2016-05-06 14:31:23 +00:00
|
|
|
/* global APP, $, JitsiMeetJS */
|
2015-12-11 14:48:16 +00:00
|
|
|
import UIUtil from "../../util/UIUtil";
|
|
|
|
import UIEvents from "../../../../service/UI/UIEvents";
|
|
|
|
import languages from "../../../../service/translation/languages";
|
2015-12-31 15:23:23 +00:00
|
|
|
import Settings from '../../../settings/Settings';
|
2015-02-06 15:46:50 +00:00
|
|
|
|
2016-03-02 15:39:39 +00:00
|
|
|
/**
|
|
|
|
* 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}`
|
|
|
|
};
|
2015-02-06 15:46:50 +00:00
|
|
|
|
2016-03-02 15:39:39 +00:00
|
|
|
if (lang === currentLang) {
|
|
|
|
attrs.selected = 'selected';
|
|
|
|
}
|
2015-02-06 15:46:50 +00:00
|
|
|
|
2016-03-02 15:39:39 +00:00
|
|
|
let attrsStr = UIUtil.attrsToString(attrs);
|
|
|
|
return `<option ${attrsStr}></option>`;
|
|
|
|
}).join('\n');
|
2015-02-06 15:46:50 +00:00
|
|
|
}
|
2015-01-07 14:54:03 +00:00
|
|
|
|
2016-03-02 15:39:39 +00:00
|
|
|
/**
|
|
|
|
* Generate html select options for available physical devices.
|
|
|
|
* @param {{ deviceId, label }[]} items available devices
|
|
|
|
* @param {string} [selectedId] id of selected device
|
|
|
|
* @returns {string}
|
|
|
|
*/
|
2016-02-09 10:19:43 +00:00
|
|
|
function generateDevicesOptions(items, selectedId) {
|
|
|
|
return items.map(function (item) {
|
|
|
|
let attrs = {
|
|
|
|
value: item.deviceId
|
|
|
|
};
|
|
|
|
|
|
|
|
if (item.deviceId === selectedId) {
|
|
|
|
attrs.selected = 'selected';
|
|
|
|
}
|
|
|
|
|
|
|
|
let attrsStr = UIUtil.attrsToString(attrs);
|
|
|
|
return `<option ${attrsStr}>${item.label}</option>`;
|
|
|
|
}).join('\n');
|
|
|
|
}
|
|
|
|
|
2015-01-07 14:54:03 +00:00
|
|
|
|
2015-12-31 15:23:23 +00:00
|
|
|
export default {
|
|
|
|
init (emitter) {
|
2015-01-07 14:54:03 +00:00
|
|
|
|
2016-03-02 15:39:39 +00:00
|
|
|
// 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);
|
|
|
|
|
|
|
|
|
|
|
|
// EMAIL
|
|
|
|
function updateEmail () {
|
|
|
|
emitter.emit(UIEvents.EMAIL_CHANGED, $('#setEmail').val());
|
|
|
|
}
|
|
|
|
$('#setEmail')
|
|
|
|
.val(Settings.getEmail())
|
|
|
|
.keyup(function (event) {
|
|
|
|
if (event.keyCode === 13) { // enter
|
|
|
|
updateEmail();
|
2015-12-31 15:23:23 +00:00
|
|
|
}
|
2016-03-02 15:39:39 +00:00
|
|
|
}).focusout(updateEmail);
|
2015-12-31 15:23:23 +00:00
|
|
|
|
2015-02-06 15:46:50 +00:00
|
|
|
|
2016-03-02 15:39:39 +00:00
|
|
|
// START MUTED
|
|
|
|
$("#startMutedOptions").change(function () {
|
2015-12-31 15:23:23 +00:00
|
|
|
let startAudioMuted = $("#startAudioMuted").is(":checked");
|
|
|
|
let startVideoMuted = $("#startVideoMuted").is(":checked");
|
2016-03-02 15:39:39 +00:00
|
|
|
emitter.emit(
|
|
|
|
UIEvents.START_MUTED_CHANGED,
|
|
|
|
startAudioMuted,
|
|
|
|
startVideoMuted
|
|
|
|
);
|
|
|
|
});
|
2016-02-09 10:19:43 +00:00
|
|
|
|
2016-03-24 01:43:29 +00:00
|
|
|
// FOLLOW ME
|
|
|
|
$("#followMeOptions").change(function () {
|
|
|
|
let isFollowMeEnabled = $("#followMeCheckBox").is(":checked");
|
|
|
|
emitter.emit(
|
|
|
|
UIEvents.FOLLOW_ME_ENABLED,
|
|
|
|
isFollowMeEnabled
|
|
|
|
);
|
|
|
|
});
|
2016-03-02 15:39:39 +00:00
|
|
|
|
|
|
|
// 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();
|
2016-02-09 10:19:43 +00:00
|
|
|
if (cameraDeviceId !== Settings.getCameraDeviceId()) {
|
|
|
|
emitter.emit(UIEvents.VIDEO_DEVICE_CHANGED, cameraDeviceId);
|
|
|
|
}
|
2016-03-02 15:39:39 +00:00
|
|
|
});
|
|
|
|
$('#selectMic').change(function () {
|
|
|
|
let micDeviceId = $(this).val();
|
2016-02-09 10:19:43 +00:00
|
|
|
if (micDeviceId !== Settings.getMicDeviceId()) {
|
|
|
|
emitter.emit(UIEvents.AUDIO_DEVICE_CHANGED, micDeviceId);
|
|
|
|
}
|
2015-02-06 15:46:50 +00:00
|
|
|
});
|
2016-05-05 14:34:15 +00:00
|
|
|
$('#selectAudioOutput').change(function () {
|
|
|
|
let audioOutputDeviceId = $(this).val();
|
|
|
|
if (audioOutputDeviceId !== Settings.getAudioOutputDeviceId()) {
|
|
|
|
emitter.emit(UIEvents.AUDIO_OUTPUT_DEVICE_CHANGED,
|
|
|
|
audioOutputDeviceId);
|
|
|
|
}
|
|
|
|
});
|
2015-02-06 15:46:50 +00:00
|
|
|
},
|
|
|
|
|
2016-03-02 15:39:39 +00:00
|
|
|
/**
|
|
|
|
* If start audio muted/start video muted options should be visible or not.
|
|
|
|
* @param {boolean} show
|
|
|
|
*/
|
|
|
|
showStartMutedOptions (show) {
|
|
|
|
if (show) {
|
2015-05-19 15:03:01 +00:00
|
|
|
$("#startMutedOptions").css("display", "block");
|
2016-03-02 15:39:39 +00:00
|
|
|
} else {
|
2015-05-19 15:03:01 +00:00
|
|
|
$("#startMutedOptions").css("display", "none");
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
2016-03-02 15:39:39 +00:00
|
|
|
updateStartMutedBox (startAudioMuted, startVideoMuted) {
|
|
|
|
$("#startAudioMuted").attr("checked", startAudioMuted);
|
|
|
|
$("#startVideoMuted").attr("checked", startVideoMuted);
|
2015-01-07 14:54:03 +00:00
|
|
|
},
|
|
|
|
|
2016-03-24 01:43:29 +00:00
|
|
|
/**
|
|
|
|
* Shows/hides the follow me options in the settings dialog.
|
|
|
|
*
|
|
|
|
* @param {boolean} show {true} to show those options, {false} to hide them
|
|
|
|
*/
|
|
|
|
showFollowMeOptions (show) {
|
|
|
|
if (show) {
|
|
|
|
$("#followMeOptions").css("display", "block");
|
|
|
|
} else {
|
|
|
|
$("#followMeOptions").css("display", "none");
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
2016-03-02 15:39:39 +00:00
|
|
|
/**
|
|
|
|
* Check if settings menu is visible or not.
|
|
|
|
* @returns {boolean}
|
|
|
|
*/
|
2015-12-31 15:23:23 +00:00
|
|
|
isVisible () {
|
2016-04-08 15:55:19 +00:00
|
|
|
return UIUtil.isVisible(document.getElementById("settingsmenu"));
|
2015-01-07 14:54:03 +00:00
|
|
|
},
|
|
|
|
|
2016-03-02 15:39:39 +00:00
|
|
|
/**
|
|
|
|
* Change user display name in the settings menu.
|
|
|
|
* @param {string} newDisplayName
|
|
|
|
*/
|
|
|
|
changeDisplayName (newDisplayName) {
|
|
|
|
$('#setDisplayName').val(newDisplayName);
|
2015-06-29 14:24:21 +00:00
|
|
|
},
|
2015-12-31 15:23:23 +00:00
|
|
|
|
2016-03-02 15:39:39 +00:00
|
|
|
/**
|
|
|
|
* Change user avatar in the settings menu.
|
|
|
|
* @param {string} avatarUrl url of the new avatar
|
|
|
|
*/
|
2016-01-19 23:10:44 +00:00
|
|
|
changeAvatar (avatarUrl) {
|
|
|
|
$('#avatar').attr('src', avatarUrl);
|
2016-02-09 10:19:43 +00:00
|
|
|
},
|
|
|
|
|
2016-03-02 15:39:39 +00:00
|
|
|
/**
|
|
|
|
* Change available cameras/microphones or hide selects completely if
|
|
|
|
* no devices available.
|
|
|
|
* @param {{ deviceId, label, kind }[]} devices list of available devices
|
|
|
|
*/
|
|
|
|
changeDevicesList (devices) {
|
2016-05-05 14:34:15 +00:00
|
|
|
let $devicesOptions = $('#devicesOptions');
|
|
|
|
|
2016-02-09 10:19:43 +00:00
|
|
|
if (!devices.length) {
|
2016-05-05 14:34:15 +00:00
|
|
|
$devicesOptions.hide();
|
2016-02-09 10:19:43 +00:00
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
2016-05-05 14:34:15 +00:00
|
|
|
let $selectCamera= $('#selectCamera'),
|
|
|
|
$selectMic = $('#selectMic'),
|
2016-05-06 14:31:23 +00:00
|
|
|
$selectAudioOutput = $('#selectAudioOutput'),
|
|
|
|
$selectAudioOutputParent = $selectAudioOutput.parent();
|
2016-05-05 14:34:15 +00:00
|
|
|
|
2016-02-09 10:19:43 +00:00
|
|
|
let audio = devices.filter(device => device.kind === 'audioinput');
|
|
|
|
let video = devices.filter(device => device.kind === 'videoinput');
|
2016-05-05 14:34:15 +00:00
|
|
|
let audioOutput = devices
|
|
|
|
.filter(device => device.kind === 'audiooutput');
|
2016-02-09 10:19:43 +00:00
|
|
|
|
2016-05-05 14:34:15 +00:00
|
|
|
$selectCamera.html(
|
2016-02-09 10:19:43 +00:00
|
|
|
generateDevicesOptions(video, Settings.getCameraDeviceId())
|
|
|
|
);
|
2016-05-05 14:34:15 +00:00
|
|
|
$selectMic.html(
|
2016-02-09 10:19:43 +00:00
|
|
|
generateDevicesOptions(audio, Settings.getMicDeviceId())
|
|
|
|
);
|
|
|
|
|
2016-05-06 14:31:23 +00:00
|
|
|
if (audioOutput.length &&
|
2016-05-11 13:59:27 +00:00
|
|
|
JitsiMeetJS.mediaDevices.isDeviceChangeAvailable('output')) {
|
2016-05-05 14:34:15 +00:00
|
|
|
$selectAudioOutput.html(
|
|
|
|
generateDevicesOptions(audioOutput,
|
2016-05-06 14:31:23 +00:00
|
|
|
Settings.getAudioOutputDeviceId()));
|
|
|
|
|
|
|
|
$selectAudioOutputParent.show();
|
2016-05-05 14:34:15 +00:00
|
|
|
} else {
|
2016-05-06 14:31:23 +00:00
|
|
|
$selectAudioOutputParent.hide();
|
2016-05-05 14:34:15 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
$devicesOptions.show();
|
2015-01-07 14:54:03 +00:00
|
|
|
}
|
|
|
|
};
|