Merge branch 'kkrisstoff-task/dropdown-aui-changes'
the commit.
This commit is contained in:
commit
e1c5ea11bc
|
@ -2,16 +2,15 @@
|
||||||
* Toolbar side panel main container element.
|
* Toolbar side panel main container element.
|
||||||
*/
|
*/
|
||||||
#sideToolbarContainer {
|
#sideToolbarContainer {
|
||||||
display: inline-block;
|
|
||||||
position:absolute;
|
|
||||||
top: 0px;
|
|
||||||
left: $defaultToolbarSize;
|
|
||||||
width: 0;
|
|
||||||
background-color: rgba(0,0,0,0.8);
|
background-color: rgba(0,0,0,0.8);
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
left: $defaultToolbarSize;
|
||||||
max-width: $sidebarWidth;
|
max-width: $sidebarWidth;
|
||||||
z-index: 800;
|
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
width: 0;
|
||||||
|
z-index: 800;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Labels inside the side panel.
|
* Labels inside the side panel.
|
||||||
|
@ -23,7 +22,7 @@
|
||||||
/**
|
/**
|
||||||
* Form elements and blocks.
|
* Form elements and blocks.
|
||||||
*/
|
*/
|
||||||
input, label, select, a,
|
input, select, a,
|
||||||
.sideToolbarBlock, .input-control, .button-control {
|
.sideToolbarBlock, .input-control, .button-control {
|
||||||
display: block;
|
display: block;
|
||||||
margin-top: 15px;
|
margin-top: 15px;
|
||||||
|
@ -34,8 +33,8 @@
|
||||||
/**
|
/**
|
||||||
* Specify colors for edit elements.
|
* Specify colors for edit elements.
|
||||||
*/
|
*/
|
||||||
select, input[type="button"], input[type="text"],
|
select, input[type="button"], input[type="text"], input[type="reset"],
|
||||||
input[type="reset"], input[type="submit"] {
|
input[type="submit"] {
|
||||||
color: $inputColor;
|
color: $inputColor;
|
||||||
background: $inputBackground;
|
background: $inputBackground;
|
||||||
border: none;
|
border: none;
|
||||||
|
@ -45,16 +44,18 @@
|
||||||
* Specify styling of elements inside a block.
|
* Specify styling of elements inside a block.
|
||||||
*/
|
*/
|
||||||
.sideToolbarBlock {
|
.sideToolbarBlock {
|
||||||
input, label, button, a, select {
|
input, button, a, select {
|
||||||
margin-top: 5px;
|
|
||||||
margin-left: 0;
|
margin-left: 0;
|
||||||
|
margin-top: 5px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
input[type='checkbox'] {
|
||||||
.startMutedLabel,
|
|
||||||
.followMeLabel {
|
|
||||||
display: inline;
|
display: inline;
|
||||||
margin-top: 0;
|
width: auto !important;
|
||||||
|
> label {
|
||||||
|
margin-top: 5px;
|
||||||
|
width: 80%;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -72,36 +73,35 @@
|
||||||
/**
|
/**
|
||||||
* Titles and subtitles of inner containers.
|
* Titles and subtitles of inner containers.
|
||||||
*/
|
*/
|
||||||
> div.title,
|
div.title, div.subTitle {
|
||||||
div.subTitle {
|
margin: 10px 0;
|
||||||
text-align: left;
|
|
||||||
margin: 10px 0px 10px 0px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Main title size.
|
* Main title size.
|
||||||
*/
|
*/
|
||||||
> div.title {
|
div.title {
|
||||||
color: $defaultColor !important;
|
color: $defaultColor !important;
|
||||||
text-align: center;
|
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Subtitle specific properties.
|
* Subtitle specific properties.
|
||||||
*/
|
*/
|
||||||
> div.subTitle {
|
div.subTitle {
|
||||||
|
color: $defaultSideBarFontColor !important;
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
color: $defaultSideBarFontColor !important;
|
|
||||||
margin-left: 10%;
|
margin-left: 10%;
|
||||||
|
text-align: left;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* First element after a title.
|
* First element after a title.
|
||||||
*/
|
*/
|
||||||
.first {
|
.first {
|
||||||
margin-top: 0px !important;
|
margin-top: 0 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -119,12 +119,6 @@
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
#startAudioMuted,
|
|
||||||
#startVideoMuted,
|
|
||||||
#followMeCheckBox {
|
|
||||||
width: 13px !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Profile
|
* Profile
|
||||||
*/
|
*/
|
||||||
|
@ -135,7 +129,7 @@
|
||||||
li {
|
li {
|
||||||
list-style-type: none;
|
list-style-type: none;
|
||||||
|
|
||||||
a.authButton{
|
a.authButton {
|
||||||
width: 160px;
|
width: 160px;
|
||||||
margin: 10px 20px;
|
margin: 10px 20px;
|
||||||
padding: 3px 29px;
|
padding: 3px 29px;
|
||||||
|
@ -149,4 +143,4 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -92,4 +92,13 @@ $auiPrimaryButtonBg: #3572b0;
|
||||||
$auiPrimaryButtonHoverBg: #57647b;
|
$auiPrimaryButtonHoverBg: #57647b;
|
||||||
$auiPrimaryButtonColor: #fff;
|
$auiPrimaryButtonColor: #fff;
|
||||||
$auiIconColor: #707070;
|
$auiIconColor: #707070;
|
||||||
$inputControlEmColor: #f29424;
|
$inputControlEmColor: #f29424;
|
||||||
|
$linkFontColor: #489afe;
|
||||||
|
$linkHoverFontColor: #287ade;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Forms
|
||||||
|
*/
|
||||||
|
$inputBg: #505F79;
|
||||||
|
$inputBgHover: #505F79;
|
||||||
|
$inputFontColor: #ECEEF1;
|
|
@ -0,0 +1,48 @@
|
||||||
|
form.aui {
|
||||||
|
.aui-select2-container {
|
||||||
|
background-color: transparent;
|
||||||
|
|
||||||
|
> a {
|
||||||
|
margin: 0 auto !important;
|
||||||
|
width: 100% !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.select2-results{
|
||||||
|
&::-webkit-scrollbar {
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
&::-webkit-scrollbar-track {
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
&::-webkit-scrollbar-track-piece {
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
&::-webkit-scrollbar-thumb {
|
||||||
|
background-color: #3572b0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.aui-select2-drop {
|
||||||
|
z-index: 901;
|
||||||
|
}
|
||||||
|
|
||||||
|
.select2-drop-mask {
|
||||||
|
z-index: 900;
|
||||||
|
}
|
||||||
|
|
||||||
|
//Dark theme
|
||||||
|
form.aui{
|
||||||
|
//Placeholder
|
||||||
|
.aui-select2-container.input-container-dark {
|
||||||
|
a.select2-choice {
|
||||||
|
text-shadow: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.aui-dropdown2.aui-style-default.dropdown-dark {
|
||||||
|
background-color: $defaultBackground;
|
||||||
|
border-color: transparent;
|
||||||
|
}
|
|
@ -62,5 +62,6 @@
|
||||||
@import 'buttons/button-control';
|
@import 'buttons/button-control';
|
||||||
@import "modals/invite/invite";
|
@import "modals/invite/invite";
|
||||||
@import "connection-info";
|
@import "connection-info";
|
||||||
|
@import 'aui-components/dropdown';
|
||||||
|
|
||||||
/* Modules END */
|
/* Modules END */
|
||||||
|
|
78
index.html
78
index.html
|
@ -30,15 +30,15 @@
|
||||||
<a class="poweredby" href="http://jitsi.org" target="_new" ><span data-i18n="poweredby"></span> jitsi.org</a>
|
<a class="poweredby" href="http://jitsi.org" target="_new" ><span data-i18n="poweredby"></span> jitsi.org</a>
|
||||||
|
|
||||||
<div id="enter_room_container">
|
<div id="enter_room_container">
|
||||||
<div id="enter_room_form" >
|
<div id="enter_room_form" >
|
||||||
<div id="domain_name"></div>
|
<div id="domain_name"></div>
|
||||||
<div id="enter_room">
|
<div id="enter_room">
|
||||||
<input id="enter_room_field" type="text" autofocus/>
|
<input id="enter_room_field" type="text" autofocus/>
|
||||||
<div class="icon-reload" id="reload_roomname"></div>
|
<div class="icon-reload" id="reload_roomname"></div>
|
||||||
<input id="enter_room_button" type="button" data-i18n="[value]welcomepage.go" value="GO" />
|
<input id="enter_room_button" type="button" data-i18n="[value]welcomepage.go" value="GO" />
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div id="brand_header"></div>
|
<div id="brand_header"></div>
|
||||||
<input type='checkbox' name='checkbox' id="disable_welcome"/>
|
<input type='checkbox' name='checkbox' id="disable_welcome"/>
|
||||||
|
@ -180,37 +180,45 @@
|
||||||
</div>
|
</div>
|
||||||
<div id="settings_container" class="sideToolbarContainer__inner">
|
<div id="settings_container" class="sideToolbarContainer__inner">
|
||||||
<div class="title" data-i18n="settings.title"></div>
|
<div class="title" data-i18n="settings.title"></div>
|
||||||
<select id="languages_selectbox" class="first hide"></select>
|
<form class="aui">
|
||||||
<div id="deviceOptionsTitle" class="subTitle hide" data-i18n="settings.audioVideo"></div>
|
<div id="languagesSelectWrapper" class="first hide">
|
||||||
<div id="devicesOptions" class="hide">
|
<select id="languagesSelect" style="width: 80%; margin-left: 10%"></select>
|
||||||
<div class="sideToolbarBlock first">
|
|
||||||
<label class="first" data-i18n="settings.selectCamera"></label>
|
|
||||||
<select id="selectCamera"></select>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="sideToolbarBlock">
|
<div id="deviceOptionsWrapper" class="hide">
|
||||||
<label data-i18n="settings.selectMic"></label>
|
<div id="deviceOptionsTitle" class="subTitle hide" data-i18n="settings.audioVideo"></div>
|
||||||
<select id="selectMic"></select>
|
<div class="sideToolbarBlock first">
|
||||||
|
<label class="first" data-i18n="settings.selectCamera"></label>
|
||||||
|
<select id="selectCamera"></select>
|
||||||
|
</div>
|
||||||
|
<div class="sideToolbarBlock">
|
||||||
|
<label data-i18n="settings.selectMic"></label>
|
||||||
|
<select id="selectMic"></select>
|
||||||
|
</div>
|
||||||
|
<div class="sideToolbarBlock">
|
||||||
|
<label data-i18n="settings.selectAudioOutput"></label>
|
||||||
|
<select id="selectAudioOutput"></select>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="sideToolbarBlock">
|
<div id="moderatorOptionsWrapper" class="hide">
|
||||||
<label data-i18n="settings.selectAudioOutput"></label>
|
<div id="moderatorOptionsTitle" class="subTitle hide" data-i18n="settings.moderator"></div>
|
||||||
<select id="selectAudioOutput"></select>
|
<div id="startMutedOptions" class="hide">
|
||||||
|
<div class="sideToolbarBlock first">
|
||||||
|
<input type="checkbox" id="startAudioMuted">
|
||||||
|
<label class="startMutedLabel" for="startAudioMuted" data-i18n="settings.startAudioMuted"></label>
|
||||||
|
</div>
|
||||||
|
<div class="sideToolbarBlock">
|
||||||
|
<input type="checkbox" id="startVideoMuted">
|
||||||
|
<label class="startMutedLabel" for="startVideoMuted" data-i18n="settings.startVideoMuted"></label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div id="followMeOptions" class="hide">
|
||||||
|
<div class="sideToolbarBlock">
|
||||||
|
<input type="checkbox" id="followMeCheckBox">
|
||||||
|
<label class="followMeLabel" for="followMeCheckBox" data-i18n="settings.followMe"></label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</form>
|
||||||
<div id="moderatorOptionsTitle" class="subTitle hide" data-i18n="settings.moderator"></div>
|
|
||||||
<div id = "startMutedOptions" class="hide">
|
|
||||||
<div class="sideToolbarBlock first">
|
|
||||||
<input type="checkbox" id="startAudioMuted">
|
|
||||||
<label class="startMutedLabel" for="startAudioMuted" data-i18n="settings.startAudioMuted"></label>
|
|
||||||
</div>
|
|
||||||
<div class="sideToolbarBlock">
|
|
||||||
<input type="checkbox" id="startVideoMuted">
|
|
||||||
<label class="startMutedLabel" for="startVideoMuted" data-i18n="settings.startVideoMuted"></label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div id="followMeOptions" class="sideToolbarBlock hide">
|
|
||||||
<input type="checkbox" id="followMeCheckBox">
|
|
||||||
<label class="followMeLabel" for="followMeCheckBox" data-i18n="settings.followMe"></label>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -1,4 +1,5 @@
|
||||||
/* global APP, $, JitsiMeetJS */
|
/* global $, APP, AJS, interfaceConfig, JitsiMeetJS */
|
||||||
|
|
||||||
import UIUtil from "../../util/UIUtil";
|
import UIUtil from "../../util/UIUtil";
|
||||||
import UIEvents from "../../../../service/UI/UIEvents";
|
import UIEvents from "../../../../service/UI/UIEvents";
|
||||||
import languages from "../../../../service/translation/languages";
|
import languages from "../../../../service/translation/languages";
|
||||||
|
@ -24,7 +25,7 @@ function generateLanguagesOptions(items, currentLang) {
|
||||||
|
|
||||||
let attrsStr = UIUtil.attrsToString(attrs);
|
let attrsStr = UIUtil.attrsToString(attrs);
|
||||||
return `<option ${attrsStr}></option>`;
|
return `<option ${attrsStr}></option>`;
|
||||||
}).join('\n');
|
}).join('');
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -61,11 +62,57 @@ function generateDevicesOptions(items, selectedId, permissionGranted) {
|
||||||
return options.join('');
|
return options.join('');
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Replace html select element to select2 custom dropdown
|
||||||
|
*
|
||||||
|
* @param {jQueryElement} $el native select element
|
||||||
|
* @param {function} onSelectedCb fired if item is selected
|
||||||
|
*/
|
||||||
|
function initSelect2($el, onSelectedCb) {
|
||||||
|
$el.auiSelect2({
|
||||||
|
containerCssClass: 'input-container-dark',
|
||||||
|
dropdownCssClass: 'dropdown-dark',
|
||||||
|
minimumResultsForSearch: Infinity
|
||||||
|
});
|
||||||
|
if (typeof onSelectedCb === 'function') {
|
||||||
|
$el.change(onSelectedCb);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
init (emitter) {
|
init (emitter) {
|
||||||
|
//LANGUAGES BOX
|
||||||
|
if (UIUtil.isSettingEnabled('language')) {
|
||||||
|
const wrapperId = 'languagesSelectWrapper';
|
||||||
|
const selectId = 'languagesSelect';
|
||||||
|
const selectEl = AJS.$(`#${selectId}`);
|
||||||
|
let selectInput;
|
||||||
|
|
||||||
|
selectEl.html(generateLanguagesOptions(
|
||||||
|
languages.getLanguages(),
|
||||||
|
APP.translation.getCurrentLanguage()
|
||||||
|
));
|
||||||
|
initSelect2(selectEl, () => {
|
||||||
|
const val = selectEl.val();
|
||||||
|
|
||||||
|
selectInput[0].dataset.i18n = `languages:${val}`;
|
||||||
|
APP.translation.translateElement(selectInput);
|
||||||
|
emitter.emit(UIEvents.LANG_CHANGED, val);
|
||||||
|
});
|
||||||
|
//find new selectInput element
|
||||||
|
selectInput = $(`#s2id_${selectId} .select2-chosen`);
|
||||||
|
//first select fix for languages options
|
||||||
|
selectInput[0].dataset.i18n =
|
||||||
|
`languages:${APP.translation.getCurrentLanguage()}`;
|
||||||
|
|
||||||
|
APP.translation.translateElement(selectEl);
|
||||||
|
|
||||||
|
UIUtil.showElement(wrapperId);
|
||||||
|
}
|
||||||
|
// DEVICES LIST
|
||||||
if (UIUtil.isSettingEnabled('devices')) {
|
if (UIUtil.isSettingEnabled('devices')) {
|
||||||
// DEVICES LIST
|
const wrapperId = 'deviceOptionsWrapper';
|
||||||
|
|
||||||
JitsiMeetJS.mediaDevices.isDeviceListAvailable()
|
JitsiMeetJS.mediaDevices.isDeviceListAvailable()
|
||||||
.then((isDeviceListAvailable) => {
|
.then((isDeviceListAvailable) => {
|
||||||
if (isDeviceListAvailable &&
|
if (isDeviceListAvailable &&
|
||||||
|
@ -73,31 +120,21 @@ export default {
|
||||||
this._initializeDeviceSelectionSettings(emitter);
|
this._initializeDeviceSelectionSettings(emitter);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
// Only show the subtitle if this isn't the only setting section.
|
||||||
|
if (interfaceConfig.SETTINGS_SECTIONS.length > 1)
|
||||||
|
UIUtil.showElement("deviceOptionsTitle");
|
||||||
|
|
||||||
UIUtil.showElement("deviceOptionsTitle");
|
UIUtil.showElement(wrapperId);
|
||||||
UIUtil.showElement("devicesOptions");
|
|
||||||
}
|
}
|
||||||
|
// MODERATOR
|
||||||
if (UIUtil.isSettingEnabled('language')) {
|
|
||||||
//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());
|
|
||||||
});
|
|
||||||
|
|
||||||
UIUtil.showElement("languages_selectbox");
|
|
||||||
}
|
|
||||||
|
|
||||||
if (UIUtil.isSettingEnabled('moderator')) {
|
if (UIUtil.isSettingEnabled('moderator')) {
|
||||||
|
const wrapperId = 'moderatorOptionsWrapper';
|
||||||
|
|
||||||
// START MUTED
|
// START MUTED
|
||||||
$("#startMutedOptions").change(function () {
|
$("#startMutedOptions").change(function () {
|
||||||
let startAudioMuted = $("#startAudioMuted").is(":checked");
|
let startAudioMuted = $("#startAudioMuted").is(":checked");
|
||||||
let startVideoMuted = $("#startVideoMuted").is(":checked");
|
let startVideoMuted = $("#startVideoMuted").is(":checked");
|
||||||
|
|
||||||
emitter.emit(
|
emitter.emit(
|
||||||
UIEvents.START_MUTED_CHANGED,
|
UIEvents.START_MUTED_CHANGED,
|
||||||
startAudioMuted,
|
startAudioMuted,
|
||||||
|
@ -106,13 +143,13 @@ export default {
|
||||||
});
|
});
|
||||||
|
|
||||||
// FOLLOW ME
|
// FOLLOW ME
|
||||||
$("#followMeOptions").change(function () {
|
const followMeToggle = document.getElementById('followMeCheckBox');
|
||||||
let isFollowMeEnabled = $("#followMeCheckBox").is(":checked");
|
followMeToggle.addEventListener('change', () => {
|
||||||
emitter.emit(
|
const isFollowMeEnabled = followMeToggle.checked;
|
||||||
UIEvents.FOLLOW_ME_ENABLED,
|
emitter.emit(UIEvents.FOLLOW_ME_ENABLED, isFollowMeEnabled);
|
||||||
isFollowMeEnabled
|
|
||||||
);
|
|
||||||
});
|
});
|
||||||
|
|
||||||
|
UIUtil.showElement(wrapperId);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
@ -147,7 +184,8 @@ export default {
|
||||||
showStartMutedOptions (show) {
|
showStartMutedOptions (show) {
|
||||||
if (show && UIUtil.isSettingEnabled('moderator')) {
|
if (show && UIUtil.isSettingEnabled('moderator')) {
|
||||||
// Only show the subtitle if this isn't the only setting section.
|
// Only show the subtitle if this isn't the only setting section.
|
||||||
if (!$("#moderatorOptionsTitle").is(":visible"))
|
if (!$("#moderatorOptionsTitle").is(":visible")
|
||||||
|
&& interfaceConfig.SETTINGS_SECTIONS.length > 1)
|
||||||
UIUtil.showElement("moderatorOptionsTitle");
|
UIUtil.showElement("moderatorOptionsTitle");
|
||||||
|
|
||||||
UIUtil.showElement("startMutedOptions");
|
UIUtil.showElement("startMutedOptions");
|
||||||
|
@ -214,9 +252,9 @@ export default {
|
||||||
* @param {{ deviceId, label, kind }[]} devices list of available devices
|
* @param {{ deviceId, label, kind }[]} devices list of available devices
|
||||||
*/
|
*/
|
||||||
changeDevicesList (devices) {
|
changeDevicesList (devices) {
|
||||||
let $selectCamera= $('#selectCamera'),
|
let $selectCamera= AJS.$('#selectCamera'),
|
||||||
$selectMic = $('#selectMic'),
|
$selectMic = AJS.$('#selectMic'),
|
||||||
$selectAudioOutput = $('#selectAudioOutput'),
|
$selectAudioOutput = AJS.$('#selectAudioOutput'),
|
||||||
$selectAudioOutputParent = $selectAudioOutput.parent();
|
$selectAudioOutputParent = $selectAudioOutput.parent();
|
||||||
|
|
||||||
let audio = devices.filter(device => device.kind === 'audioinput'),
|
let audio = devices.filter(device => device.kind === 'audioinput'),
|
||||||
|
@ -241,6 +279,8 @@ export default {
|
||||||
videoPermissionGranted))
|
videoPermissionGranted))
|
||||||
.prop('disabled', !video.length || !videoPermissionGranted);
|
.prop('disabled', !video.length || !videoPermissionGranted);
|
||||||
|
|
||||||
|
initSelect2($selectCamera);
|
||||||
|
|
||||||
$selectMic
|
$selectMic
|
||||||
.html(generateDevicesOptions(
|
.html(generateDevicesOptions(
|
||||||
audio,
|
audio,
|
||||||
|
@ -248,6 +288,8 @@ export default {
|
||||||
audioPermissionGranted))
|
audioPermissionGranted))
|
||||||
.prop('disabled', !audio.length || !audioPermissionGranted);
|
.prop('disabled', !audio.length || !audioPermissionGranted);
|
||||||
|
|
||||||
|
initSelect2($selectMic);
|
||||||
|
|
||||||
if (JitsiMeetJS.mediaDevices.isDeviceChangeAvailable('output')) {
|
if (JitsiMeetJS.mediaDevices.isDeviceChangeAvailable('output')) {
|
||||||
$selectAudioOutput
|
$selectAudioOutput
|
||||||
.html(generateDevicesOptions(
|
.html(generateDevicesOptions(
|
||||||
|
@ -258,14 +300,13 @@ export default {
|
||||||
videoPermissionGranted || audioPermissionGranted))
|
videoPermissionGranted || audioPermissionGranted))
|
||||||
.prop('disabled', !audioOutput.length ||
|
.prop('disabled', !audioOutput.length ||
|
||||||
(!videoPermissionGranted && !audioPermissionGranted));
|
(!videoPermissionGranted && !audioPermissionGranted));
|
||||||
|
initSelect2($selectAudioOutput);
|
||||||
|
|
||||||
$selectAudioOutputParent.show();
|
$selectAudioOutputParent.show();
|
||||||
} else {
|
} else {
|
||||||
$selectAudioOutputParent.hide();
|
$selectAudioOutputParent.hide();
|
||||||
}
|
}
|
||||||
|
|
||||||
$('#devicesOptions').show();
|
|
||||||
|
|
||||||
APP.translation.translateElement($('#settings_container option'));
|
APP.translation.translateElement($('#settings_container option'));
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
Loading…
Reference in New Issue