|
|
@@ -1,4 +1,5 @@
|
|
1
|
|
-/* global APP, $, JitsiMeetJS */
|
|
|
1
|
+/* global APP, $, JitsiMeetJS, interfaceConfig, AJS */
|
|
|
2
|
+
|
|
2
|
3
|
import UIUtil from "../../util/UIUtil";
|
|
3
|
4
|
import UIEvents from "../../../../service/UI/UIEvents";
|
|
4
|
5
|
import languages from "../../../../service/translation/languages";
|
|
|
@@ -24,7 +25,7 @@ function generateLanguagesOptions(items, currentLang) {
|
|
24
|
25
|
|
|
25
|
26
|
let attrsStr = UIUtil.attrsToString(attrs);
|
|
26
|
27
|
return `<option ${attrsStr}></option>`;
|
|
27
|
|
- }).join('\n');
|
|
|
28
|
+ }).join('');
|
|
28
|
29
|
}
|
|
29
|
30
|
|
|
30
|
31
|
/**
|
|
|
@@ -61,11 +62,57 @@ function generateDevicesOptions(items, selectedId, permissionGranted) {
|
|
61
|
62
|
return options.join('');
|
|
62
|
63
|
}
|
|
63
|
64
|
|
|
|
65
|
+/**
|
|
|
66
|
+ * Replace html select element to select2 custom dropdown
|
|
|
67
|
+ *
|
|
|
68
|
+ * @param {jQueryElement} $el native select element
|
|
|
69
|
+ * @param {function} onSelectedCb fired if item is selected
|
|
|
70
|
+ */
|
|
|
71
|
+function initSelect2($el, onSelectedCb) {
|
|
|
72
|
+ $el.auiSelect2({
|
|
|
73
|
+ minimumResultsForSearch: Infinity,
|
|
|
74
|
+ dropdownCssClass: 'dropdown-dark',
|
|
|
75
|
+ containerCssClass: 'input-container-dark',
|
|
|
76
|
+ });
|
|
|
77
|
+ if (typeof onSelectedCb === 'function'){
|
|
|
78
|
+ $el.change(onSelectedCb);
|
|
|
79
|
+ }
|
|
|
80
|
+}
|
|
64
|
81
|
|
|
65
|
82
|
export default {
|
|
66
|
83
|
init (emitter) {
|
|
|
84
|
+ //LANGUAGES BOX
|
|
|
85
|
+ if (UIUtil.isSettingEnabled('language')) {
|
|
|
86
|
+ const wrapperId = 'languagesSelectWrapper';
|
|
|
87
|
+ const selectId = 'languagesSelect';
|
|
|
88
|
+ const selectEl = AJS.$(`#${selectId}`);
|
|
|
89
|
+ let selectInput;
|
|
|
90
|
+
|
|
|
91
|
+ selectEl.html(generateLanguagesOptions(
|
|
|
92
|
+ languages.getLanguages(),
|
|
|
93
|
+ APP.translation.getCurrentLanguage()
|
|
|
94
|
+ ));
|
|
|
95
|
+ initSelect2(selectEl, () => {
|
|
|
96
|
+ const val = selectEl.val();
|
|
|
97
|
+
|
|
|
98
|
+ selectInput[0].dataset.i18n = `languages:${val}`;
|
|
|
99
|
+ APP.translation.translateElement(selectInput);
|
|
|
100
|
+ emitter.emit(UIEvents.LANG_CHANGED, val);
|
|
|
101
|
+ });
|
|
|
102
|
+ //find new selectInput element
|
|
|
103
|
+ selectInput = $(`#s2id_${selectId} .select2-chosen`);
|
|
|
104
|
+ //first select fix for languages options
|
|
|
105
|
+ selectInput[0].dataset.i18n =
|
|
|
106
|
+ `languages:${APP.translation.getCurrentLanguage()}`;
|
|
|
107
|
+
|
|
|
108
|
+ APP.translation.translateElement(selectEl);
|
|
|
109
|
+
|
|
|
110
|
+ UIUtil.showElement(wrapperId);
|
|
|
111
|
+ }
|
|
|
112
|
+ // DEVICES LIST
|
|
67
|
113
|
if (UIUtil.isSettingEnabled('devices')) {
|
|
68
|
|
- // DEVICES LIST
|
|
|
114
|
+ const wrapperId = 'deviceOptionsWrapper';
|
|
|
115
|
+
|
|
69
|
116
|
JitsiMeetJS.mediaDevices.isDeviceListAvailable()
|
|
70
|
117
|
.then((isDeviceListAvailable) => {
|
|
71
|
118
|
if (isDeviceListAvailable &&
|
|
|
@@ -73,31 +120,21 @@ export default {
|
|
73
|
120
|
this._initializeDeviceSelectionSettings(emitter);
|
|
74
|
121
|
}
|
|
75
|
122
|
});
|
|
|
123
|
+ // Only show the subtitle if this isn't the only setting section.
|
|
|
124
|
+ if (interfaceConfig.SETTINGS_SECTIONS.length > 1)
|
|
|
125
|
+ UIUtil.showElement("deviceOptionsTitle");
|
|
76
|
126
|
|
|
77
|
|
- UIUtil.showElement("deviceOptionsTitle");
|
|
78
|
|
- UIUtil.showElement("devicesOptions");
|
|
79
|
|
- }
|
|
80
|
|
-
|
|
81
|
|
- if (UIUtil.isSettingEnabled('language')) {
|
|
82
|
|
- //LANGUAGES BOX
|
|
83
|
|
- let languagesBox = $("#languages_selectbox");
|
|
84
|
|
- languagesBox.html(generateLanguagesOptions(
|
|
85
|
|
- languages.getLanguages(),
|
|
86
|
|
- APP.translation.getCurrentLanguage()
|
|
87
|
|
- ));
|
|
88
|
|
- APP.translation.translateElement(languagesBox);
|
|
89
|
|
- languagesBox.change(function () {
|
|
90
|
|
- emitter.emit(UIEvents.LANG_CHANGED, languagesBox.val());
|
|
91
|
|
- });
|
|
92
|
|
-
|
|
93
|
|
- UIUtil.showElement("languages_selectbox");
|
|
|
127
|
+ UIUtil.showElement(wrapperId);
|
|
94
|
128
|
}
|
|
95
|
|
-
|
|
|
129
|
+ // MODERATOR
|
|
96
|
130
|
if (UIUtil.isSettingEnabled('moderator')) {
|
|
|
131
|
+ const wrapperId = 'moderatorOptionsWrapper';
|
|
|
132
|
+
|
|
97
|
133
|
// START MUTED
|
|
98
|
134
|
$("#startMutedOptions").change(function () {
|
|
99
|
135
|
let startAudioMuted = $("#startAudioMuted").is(":checked");
|
|
100
|
136
|
let startVideoMuted = $("#startVideoMuted").is(":checked");
|
|
|
137
|
+
|
|
101
|
138
|
emitter.emit(
|
|
102
|
139
|
UIEvents.START_MUTED_CHANGED,
|
|
103
|
140
|
startAudioMuted,
|
|
|
@@ -106,13 +143,17 @@ export default {
|
|
106
|
143
|
});
|
|
107
|
144
|
|
|
108
|
145
|
// FOLLOW ME
|
|
109
|
|
- $("#followMeOptions").change(function () {
|
|
110
|
|
- let isFollowMeEnabled = $("#followMeCheckBox").is(":checked");
|
|
|
146
|
+ let followMeToggle = document.getElementById('followMeCheckBox');
|
|
|
147
|
+ followMeToggle.addEventListener('change', function() {
|
|
|
148
|
+ let isFollowMeEnabled = followMeToggle.checked;
|
|
|
149
|
+
|
|
111
|
150
|
emitter.emit(
|
|
112
|
151
|
UIEvents.FOLLOW_ME_ENABLED,
|
|
113
|
152
|
isFollowMeEnabled
|
|
114
|
153
|
);
|
|
115
|
154
|
});
|
|
|
155
|
+
|
|
|
156
|
+ UIUtil.showElement(wrapperId);
|
|
116
|
157
|
}
|
|
117
|
158
|
},
|
|
118
|
159
|
|
|
|
@@ -147,7 +188,8 @@ export default {
|
|
147
|
188
|
showStartMutedOptions (show) {
|
|
148
|
189
|
if (show && UIUtil.isSettingEnabled('moderator')) {
|
|
149
|
190
|
// Only show the subtitle if this isn't the only setting section.
|
|
150
|
|
- if (!$("#moderatorOptionsTitle").is(":visible"))
|
|
|
191
|
+ if (!$("#moderatorOptionsTitle").is(":visible")
|
|
|
192
|
+ && interfaceConfig.SETTINGS_SECTIONS.length > 1)
|
|
151
|
193
|
UIUtil.showElement("moderatorOptionsTitle");
|
|
152
|
194
|
|
|
153
|
195
|
UIUtil.showElement("startMutedOptions");
|
|
|
@@ -214,9 +256,9 @@ export default {
|
|
214
|
256
|
* @param {{ deviceId, label, kind }[]} devices list of available devices
|
|
215
|
257
|
*/
|
|
216
|
258
|
changeDevicesList (devices) {
|
|
217
|
|
- let $selectCamera= $('#selectCamera'),
|
|
218
|
|
- $selectMic = $('#selectMic'),
|
|
219
|
|
- $selectAudioOutput = $('#selectAudioOutput'),
|
|
|
259
|
+ let $selectCamera= AJS.$('#selectCamera'),
|
|
|
260
|
+ $selectMic = AJS.$('#selectMic'),
|
|
|
261
|
+ $selectAudioOutput = AJS.$('#selectAudioOutput'),
|
|
220
|
262
|
$selectAudioOutputParent = $selectAudioOutput.parent();
|
|
221
|
263
|
|
|
222
|
264
|
let audio = devices.filter(device => device.kind === 'audioinput'),
|
|
|
@@ -241,6 +283,8 @@ export default {
|
|
241
|
283
|
videoPermissionGranted))
|
|
242
|
284
|
.prop('disabled', !video.length || !videoPermissionGranted);
|
|
243
|
285
|
|
|
|
286
|
+ initSelect2($selectCamera);
|
|
|
287
|
+
|
|
244
|
288
|
$selectMic
|
|
245
|
289
|
.html(generateDevicesOptions(
|
|
246
|
290
|
audio,
|
|
|
@@ -248,6 +292,8 @@ export default {
|
|
248
|
292
|
audioPermissionGranted))
|
|
249
|
293
|
.prop('disabled', !audio.length || !audioPermissionGranted);
|
|
250
|
294
|
|
|
|
295
|
+ initSelect2($selectMic);
|
|
|
296
|
+
|
|
251
|
297
|
if (JitsiMeetJS.mediaDevices.isDeviceChangeAvailable('output')) {
|
|
252
|
298
|
$selectAudioOutput
|
|
253
|
299
|
.html(generateDevicesOptions(
|
|
|
@@ -258,14 +304,13 @@ export default {
|
|
258
|
304
|
videoPermissionGranted || audioPermissionGranted))
|
|
259
|
305
|
.prop('disabled', !audioOutput.length ||
|
|
260
|
306
|
(!videoPermissionGranted && !audioPermissionGranted));
|
|
|
307
|
+ initSelect2($selectAudioOutput);
|
|
261
|
308
|
|
|
262
|
309
|
$selectAudioOutputParent.show();
|
|
263
|
310
|
} else {
|
|
264
|
311
|
$selectAudioOutputParent.hide();
|
|
265
|
312
|
}
|
|
266
|
313
|
|
|
267
|
|
- $('#devicesOptions').show();
|
|
268
|
|
-
|
|
269
|
314
|
APP.translation.translateElement($('#settings_container option'));
|
|
270
|
315
|
}
|
|
271
|
316
|
};
|
Lyubomir Marinov
8 jaren geleden