|
@@ -1,4 +1,4 @@
|
1
|
|
-/* global APP, $, config, interfaceConfig, JitsiMeetJS */
|
|
1
|
+/* global AJS, APP, $, config, interfaceConfig, JitsiMeetJS */
|
2
|
2
|
import UIUtil from '../util/UIUtil';
|
3
|
3
|
import UIEvents from '../../../service/UI/UIEvents';
|
4
|
4
|
import SideContainerToggler from "../side_pannels/SideContainerToggler";
|
|
@@ -26,8 +26,8 @@ const buttonHandlers = {
|
26
|
26
|
if (sharedVideoManager
|
27
|
27
|
&& sharedVideoManager.isSharedVideoVolumeOn()
|
28
|
28
|
&& !sharedVideoManager.isSharedVideoOwner()) {
|
29
|
|
- UIUtil.animateShowElement(
|
30
|
|
- $("#unableToUnmutePopup"), true, 5000);
|
|
29
|
+ APP.UI.showCustomToolbarPopup(
|
|
30
|
+ '#unableToUnmutePopup', true, 5000);
|
31
|
31
|
}
|
32
|
32
|
else {
|
33
|
33
|
JitsiMeetJS.analytics.sendEvent('toolbar.audio.unmuted');
|
|
@@ -120,19 +120,19 @@ const defaultToolbarButtons = {
|
120
|
120
|
shortcutDescription: "keyboardShortcuts.mute",
|
121
|
121
|
popups: [
|
122
|
122
|
{
|
123
|
|
- id: "micMutedPopup",
|
124
|
|
- className: "loginmenu",
|
125
|
|
- dataAttr: "[html]toolbar.micMutedPopup"
|
|
123
|
+ id: 'micMutedPopup',
|
|
124
|
+ className: 'loginmenu',
|
|
125
|
+ dataAttr: '[title]toolbar.micMutedPopup'
|
126
|
126
|
},
|
127
|
127
|
{
|
128
|
|
- id: "unableToUnmutePopup",
|
129
|
|
- className: "loginmenu",
|
130
|
|
- dataAttr: "[html]toolbar.unableToUnmutePopup"
|
|
128
|
+ id: 'unableToUnmutePopup',
|
|
129
|
+ className: 'loginmenu',
|
|
130
|
+ dataAttr: '[title]toolbar.unableToUnmutePopup'
|
131
|
131
|
},
|
132
|
132
|
{
|
133
|
|
- id: "talkWhileMutedPopup",
|
134
|
|
- className: "loginmenu",
|
135
|
|
- dataAttr: "[html]toolbar.talkWhileMutedPopup"
|
|
133
|
+ id: 'talkWhileMutedPopup',
|
|
134
|
+ className: 'loginmenu',
|
|
135
|
+ dataAttr: '[title]toolbar.talkWhileMutedPopup'
|
136
|
136
|
}
|
137
|
137
|
],
|
138
|
138
|
content: "Mute / Unmute",
|
|
@@ -263,11 +263,14 @@ const defaultToolbarButtons = {
|
263
|
263
|
id: 'toolbar_button_sharedvideo',
|
264
|
264
|
tooltipKey: 'toolbar.sharedvideo',
|
265
|
265
|
className: 'button icon-shared-video',
|
266
|
|
- html: `<ul id="sharedVideoMutedPopup"
|
267
|
|
- class="loginmenu extendedToolbarPopup">
|
268
|
|
- <li data-i18n="[html]toolbar.sharedVideoMutedPopup"></li>
|
269
|
|
- </ul>
|
270
|
|
-`
|
|
266
|
+ popups: [
|
|
267
|
+ {
|
|
268
|
+ id: 'sharedVideoMutedPopup',
|
|
269
|
+ className: 'loginmenu extendedToolbarPopup',
|
|
270
|
+ dataAttr: '[title]toolbar.sharedVideoMutedPopup',
|
|
271
|
+ dataAttrPosition: 'w'
|
|
272
|
+ }
|
|
273
|
+ ]
|
271
|
274
|
},
|
272
|
275
|
'sip': {
|
273
|
276
|
id: 'toolbar_button_sip',
|
|
@@ -358,6 +361,12 @@ Toolbar = {
|
358
|
361
|
Toolbar._handleFullScreenToggled(isFullScreen);
|
359
|
362
|
});
|
360
|
363
|
|
|
364
|
+ APP.UI.addListener(UIEvents.SHOW_CUSTOM_TOOLBAR_BUTTON_POPUP,
|
|
365
|
+ (toolbarButtonID, popupID, show, timeout) => {
|
|
366
|
+ Toolbar._showCustomToolbarPopup(
|
|
367
|
+ toolbarButtonID, popupID, show, timeout);
|
|
368
|
+ });
|
|
369
|
+
|
361
|
370
|
if(!APP.tokenData.isGuest) {
|
362
|
371
|
$("#toolbar_button_profile").addClass("unclickable");
|
363
|
372
|
UIUtil.removeTooltip(
|
|
@@ -724,17 +733,47 @@ Toolbar = {
|
724
|
733
|
|
725
|
734
|
_addPopups(buttonElement, popups = []) {
|
726
|
735
|
popups.forEach((popup) => {
|
727
|
|
- let popupElement = document.createElement("ul");
|
|
736
|
+ const popupElement = document.createElement('div');
|
728
|
737
|
popupElement.id = popup.id;
|
729
|
738
|
popupElement.className = popup.className;
|
730
|
|
- let liElement = document.createElement("li");
|
731
|
|
- liElement.setAttribute("data-i18n", popup.dataAttr);
|
732
|
|
- popupElement.appendChild(liElement);
|
|
739
|
+ popupElement.setAttribute('data-i18n', popup.dataAttr);
|
|
740
|
+
|
|
741
|
+ let gravity = 'n';
|
|
742
|
+ if (popup.dataAttrPosition)
|
|
743
|
+ gravity = popup.dataAttrPosition;
|
|
744
|
+ popupElement.setAttribute('data-tooltip', gravity);
|
|
745
|
+
|
733
|
746
|
buttonElement.appendChild(popupElement);
|
734
|
747
|
});
|
735
|
748
|
},
|
736
|
749
|
|
737
|
750
|
/**
|
|
751
|
+ * Show custom popup/tooltip for a specified button.
|
|
752
|
+ * @param popupSelectorID the selector id of the popup to show
|
|
753
|
+ * @param show true or false/show or hide the popup
|
|
754
|
+ * @param timeout the time to show the popup
|
|
755
|
+ */
|
|
756
|
+ _showCustomToolbarPopup(popupSelectorID, show, timeout) {
|
|
757
|
+
|
|
758
|
+ const gravity = $(popupSelectorID).attr('data-tooltip');
|
|
759
|
+ AJS.$(popupSelectorID)
|
|
760
|
+ .tooltip({
|
|
761
|
+ trigger: 'manual',
|
|
762
|
+ html: true,
|
|
763
|
+ gravity: gravity,
|
|
764
|
+ title: 'title'});
|
|
765
|
+ if (show) {
|
|
766
|
+ AJS.$(popupSelectorID).tooltip('show');
|
|
767
|
+ setTimeout(function () {
|
|
768
|
+ // hide the tooltip
|
|
769
|
+ AJS.$(popupSelectorID).tooltip('hide');
|
|
770
|
+ }, timeout);
|
|
771
|
+ } else {
|
|
772
|
+ AJS.$(popupSelectorID).tooltip('hide');
|
|
773
|
+ }
|
|
774
|
+ },
|
|
775
|
+
|
|
776
|
+/**
|
738
|
777
|
* Sets the toggled state of the given element depending on the isToggled
|
739
|
778
|
* parameter.
|
740
|
779
|
*
|