haskal
/
jiti-meet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #520 from isymchych/improve-settings 

Apply new settings without clickint "Update" button
This commit is contained in:
yanas 2016-03-10 13:08:23 -06:00
parent 3759676770 be0abf908e
commit ed85658ce5
7 changed files with 140 additions and 108 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
conference.js
View File

@ -331,10 +331,9 @@ export default {
// update list of available devices
if (JitsiMeetJS.isDeviceListAvailable() &&
JitsiMeetJS.isDeviceChangeAvailable()) {
JitsiMeetJS.enumerateDevices((devices) => {
this.availableDevices = devices;
APP.UI.onAvailableDevicesChanged();
});
JitsiMeetJS.enumerateDevices(
devices => APP.UI.onAvailableDevicesChanged(devices)
);
}
// XXX The API will take care of disconnecting from the XMPP server
// (and, thus, leaving the room) on unload.
@ -398,10 +397,6 @@ export default {
listMembersIds () {
return room.getParticipants().map(p => p.getId());
},
/**
* List of available cameras and microphones.
*/
availableDevices: [],
/**
* Check if SIP is supported.
* @returns {boolean}
@ -412,12 +407,6 @@ export default {
get membersCount () {
return room.getParticipants().length + 1;
},
get startAudioMuted () {
return room && room.getStartMutedPolicy().audio;
},
get startVideoMuted () {
return room && room.getStartMutedPolicy().video;
},
/**
* Returns true if the callstats integration is enabled, otherwise returns
* false.
@ -689,7 +678,6 @@ export default {
room.on(ConferenceEvents.USER_JOINED, (id, user) => {
console.log('USER %s connnected', id, user);
APP.API.notifyUserJoined(id);
// FIXME email???
APP.UI.addUser(id, user.getDisplayName());
// chek the roles for the new user and reflect them
@ -907,7 +895,13 @@ export default {
});
});
APP.UI.addListener(UIEvents.EMAIL_CHANGED, (email) => {
APP.UI.addListener(UIEvents.EMAIL_CHANGED, (email = '') => {
email = email.trim();
if (email === APP.settings.getEmail()) {
return;
}
APP.settings.setEmail(email);
APP.UI.setUserAvatar(room.myUserId(), email);
sendEmail(email);
@ -930,14 +924,16 @@ export default {
APP.UI.addListener(UIEvents.START_MUTED_CHANGED,
(startAudioMuted, startVideoMuted) => {
room.setStartMutedPolicy({audio: startAudioMuted,
video: startVideoMuted});
room.setStartMutedPolicy({
audio: startAudioMuted,
video: startVideoMuted
});
}
);
room.on(
ConferenceEvents.START_MUTED_POLICY_CHANGED,
(policy) => {
APP.UI.onStartMutedChanged();
({ audio, video }) => {
APP.UI.onStartMutedChanged(audio, video);
}
);
room.on(ConferenceEvents.STARTED_MUTED, () => {

17
css/settingsmenu.css
View File

@ -27,13 +27,6 @@
margin-right: auto;
}
#settingsmenu button {
width: 45%;
left: 26%;
padding: 0;
margin-top: 10px;
}
#settingsmenu #avatar {
width: 24%;
left: 38%;
@ -45,8 +38,9 @@
padding: 34px;
}
#languages_selectbox{
#languages_selectbox {
height: 40px;
cursor: pointer;
}
@ -54,6 +48,10 @@
padding-left: 10%;
text-indent: -10%;
margin-top: 10px;
display: none; /* hide by default */
/* clearfix */
overflow: auto;
zoom: 1;
@ -70,10 +68,12 @@
.startMutedLabel {
width: 94%;
float: left;
cursor: pointer;
}
#devicesOptions {
display: none;
margin-top: 10px;
}
#devicesOptions label {
@ -87,4 +87,5 @@
#devicesOptions select {
height: 40px;
cursor: pointer;
}

2
index.html
View File

@ -219,6 +219,7 @@
<div class="arrow-up"></div>
<input type="text" id="setDisplayName" data-i18n="[placeholder]settings.name" placeholder="Name">
<input type="text" id="setEmail" placeholder="E-Mail">
<select id="languages_selectbox"></select>
<div id = "startMutedOptions">
<label class = "startMutedLabel">
<input type="checkbox" id="startAudioMuted">
@ -239,7 +240,6 @@
<select id="selectMic"></select>
</label>
</div>
<button id="updateSettings" data-i18n="settings.update"></button>
<a id="downloadlog" data-container="body" data-toggle="popover" data-placement="right" data-i18n="[data-content]downloadlogs" ><i class="fa fa-cloud-download"></i></a>
</div>
<div class="feedbackButton">

16
modules/UI/UI.js
View File

@ -212,10 +212,10 @@ UI.showChatError = function (err, msg) {
*/
UI.changeDisplayName = function (id, displayName) {
ContactList.onDisplayNameChange(id, displayName);
SettingsMenu.onDisplayNameChange(id, displayName);
VideoLayout.onDisplayNameChanged(id, displayName);
if (APP.conference.isLocalId(id)) {
if (APP.conference.isLocalId(id) || id === 'localVideoContainer') {
SettingsMenu.changeDisplayName(displayName);
Chat.setChatConversationMode(!!displayName);
}
};
@ -256,10 +256,6 @@ UI.mucJoined = function () {
* Setup some UI event listeners.
*/
function registerListeners() {
UI.addListener(UIEvents.EMAIL_CHANGED, function (email) {
UI.setUserAvatar(APP.conference.localId, email);
});
UI.addListener(UIEvents.PREZI_CLICKED, function () {
preziManager.handlePreziButtonClicked();
});
@ -538,7 +534,7 @@ UI.updateLocalRole = function (isModerator) {
Toolbar.showSipCallButton(isModerator);
Toolbar.showRecordingButton(isModerator);
SettingsMenu.onRoleChanged();
SettingsMenu.showStartMutedOptions(isModerator);
if (isModerator) {
messageHandler.notify(null, "notify.me", 'connected', "notify.moderator");
@ -1022,8 +1018,8 @@ UI.stopPrezi = function (userId) {
}
};
UI.onStartMutedChanged = function () {
SettingsMenu.onStartMutedChanged();
UI.onStartMutedChanged = function (startAudioMuted, startVideoMuted) {
SettingsMenu.updateStartMutedBox(startAudioMuted, startVideoMuted);
};
/**
@ -1031,7 +1027,7 @@ UI.onStartMutedChanged = function () {
* @param {object[]} devices new list of available devices
*/
UI.onAvailableDevicesChanged = function (devices) {
SettingsMenu.onAvailableDevicesChanged(devices);
SettingsMenu.changeDevicesList(devices);
};
/**

5
modules/UI/side_pannels/SidePanelToggler.js
View File

@ -161,10 +161,7 @@ var PanelToggler = {
toggle(SettingsMenu,
'#settingsmenu',
null,
function() {
$('#setDisplayName').val(Settings.getDisplayName());
$('#setEmail').val(Settings.getEmail());
},
function() {},
null);
},

167
modules/UI/side_pannels/settings/SettingsMenu.js
View File

@ -4,23 +4,34 @@ import UIEvents from "../../../../service/UI/UIEvents";
import languages from "../../../../service/translation/languages";
import Settings from '../../../settings/Settings';
function generateLanguagesSelectBox() {
var currentLang = APP.translation.getCurrentLanguage();
var html = '<select id="languages_selectbox">';
var langArray = languages.getLanguages();
for(var i = 0; i < langArray.length; i++) {
var lang = langArray[i];
html += "<option ";
if(lang === currentLang)
html += "selected ";
html += "value=\"" + lang + "\" data-i18n='languages:" + lang + "'>";
html += "</option>";
/**
* Generate html select options for available languages.
* @param {string[]} items available languages
* @param {string} [currentLang] current language
* @returns {string}
*/
function generateLanguagesOptions(items, currentLang) {
return items.map(function (lang) {
let attrs = {
value: lang,
'data-i18n': `languages:${lang}`
};
}
if (lang === currentLang) {
attrs.selected = 'selected';
}
return html + "</select>";
let attrsStr = UIUtil.attrsToString(attrs);
return `<option ${attrsStr}></option>`;
}).join('\n');
}
/**
* Generate html select options for available physical devices.
* @param {{ deviceId, label }[]} items available devices
* @param {string} [selectedId] id of selected device
* @returns {string}
*/
function generateDevicesOptions(items, selectedId) {
return items.map(function (item) {
let attrs = {
@ -39,89 +50,121 @@ function generateDevicesOptions(items, selectedId) {
export default {
init (emitter) {
function update() {
let displayName = $('#setDisplayName').val();
emitter.emit(UIEvents.NICKNAME_CHANGED, displayName);
// DISPLAY NAME
function updateDisplayName () {
emitter.emit(UIEvents.NICKNAME_CHANGED, $('#setDisplayName').val());
}
$('#setDisplayName')
.val(Settings.getDisplayName())
.keyup(function (event) {
if (event.keyCode === 13) { // enter
updateDisplayName();
}
})
.focusout(updateDisplayName);
let language = $("#languages_selectbox").val();
if (language !== Settings.getLanguage()) {
emitter.emit(UIEvents.LANG_CHANGED, language);
// EMAIL
function updateEmail () {
emitter.emit(UIEvents.EMAIL_CHANGED, $('#setEmail').val());
}
$('#setEmail')
.val(Settings.getEmail())
.keyup(function (event) {
if (event.keyCode === 13) { // enter
updateEmail();
}
}).focusout(updateEmail);
let email = UIUtil.escapeHtml($('#setEmail').val());
if (email !== Settings.getEmail()) {
emitter.emit(UIEvents.EMAIL_CHANGED, email);
}
// START MUTED
$("#startMutedOptions").change(function () {
let startAudioMuted = $("#startAudioMuted").is(":checked");
let startVideoMuted = $("#startVideoMuted").is(":checked");
if (startAudioMuted !== APP.conference.startAudioMuted
|| startVideoMuted !== APP.conference.startVideoMuted) {
emitter.emit(
UIEvents.START_MUTED_CHANGED,
startAudioMuted,
startVideoMuted
);
}
emitter.emit(
UIEvents.START_MUTED_CHANGED,
startAudioMuted,
startVideoMuted
);
});
let cameraDeviceId = $('#selectCamera').val();
// LANGUAGES BOX
let languagesBox = $("#languages_selectbox");
languagesBox.html(generateLanguagesOptions(
languages.getLanguages(),
APP.translation.getCurrentLanguage()
));
APP.translation.translateElement(languagesBox);
languagesBox.change(function () {
emitter.emit(UIEvents.LANG_CHANGED, languagesBox.val());
});
// DEVICES LIST
this.changeDevicesList([]);
$('#selectCamera').change(function () {
let cameraDeviceId = $(this).val();
if (cameraDeviceId !== Settings.getCameraDeviceId()) {
emitter.emit(UIEvents.VIDEO_DEVICE_CHANGED, cameraDeviceId);
}
let micDeviceId = $('#selectMic').val();
});
$('#selectMic').change(function () {
let micDeviceId = $(this).val();
if (micDeviceId !== Settings.getMicDeviceId()) {
emitter.emit(UIEvents.AUDIO_DEVICE_CHANGED, micDeviceId);
}
}
let startMutedBlock = $("#startMutedOptions");
startMutedBlock.before(generateLanguagesSelectBox());
APP.translation.translateElement($("#languages_selectbox"));
this.onAvailableDevicesChanged();
this.onRoleChanged();
this.onStartMutedChanged();
$("#updateSettings").click(update);
$('#settingsmenu>input').keyup(function(event){
if (event.keyCode === 13) {//enter
update();
}
});
},
onRoleChanged () {
if(APP.conference.isModerator) {
/**
* If start audio muted/start video muted options should be visible or not.
* @param {boolean} show
*/
showStartMutedOptions (show) {
if (show) {
$("#startMutedOptions").css("display", "block");
}
else {
} else {
$("#startMutedOptions").css("display", "none");
}
},
onStartMutedChanged () {
$("#startAudioMuted").attr("checked", APP.conference.startAudioMuted);
$("#startVideoMuted").attr("checked", APP.conference.startVideoMuted);
updateStartMutedBox (startAudioMuted, startVideoMuted) {
$("#startAudioMuted").attr("checked", startAudioMuted);
$("#startVideoMuted").attr("checked", startVideoMuted);
},
/**
* Check if settings menu is visible or not.
* @returns {boolean}
*/
isVisible () {
return $('#settingsmenu').is(':visible');
},
onDisplayNameChange (id, newDisplayName) {
if(id === 'localVideoContainer' || APP.conference.isLocalId(id)) {
$('#setDisplayName').val(newDisplayName);
}
/**
* Change user display name in the settings menu.
* @param {string} newDisplayName
*/
changeDisplayName (newDisplayName) {
$('#setDisplayName').val(newDisplayName);
},
/**
* Change user avatar in the settings menu.
* @param {string} avatarUrl url of the new avatar
*/
changeAvatar (avatarUrl) {
$('#avatar').attr('src', avatarUrl);
},
onAvailableDevicesChanged () {
let devices = APP.conference.availableDevices;
/**
* Change available cameras/microphones or hide selects completely if
* no devices available.
* @param {{ deviceId, label, kind }[]} devices list of available devices
*/
changeDevicesList (devices) {
if (!devices.length) {
$('#devicesOptions').hide();
return;

5
modules/settings/Settings.js
View File

@ -30,7 +30,7 @@ if (supportsLocalStorage()) {
console.log("generated id", window.localStorage.jitsiMeetId);
}
email = window.localStorage.email || '';
email = UIUtil.unescapeHtml(window.localStorage.email || '');
displayName = UIUtil.unescapeHtml(window.localStorage.displayname || '');
language = window.localStorage.language;
cameraDeviceId = window.localStorage.cameraDeviceId || '';
@ -68,8 +68,7 @@ export default {
*/
setEmail: function (newEmail) {
email = newEmail;
window.localStorage.email = newEmail;
return email;
window.localStorage.email = UIUtil.escapeHtml(newEmail);
},
/**