Ver código fonte

Fixes full screen event handling

j8
yanas 8 anos atrás
pai
commit
7baa473e55
3 arquivos alterados com 56 adições e 22 exclusões
  1. 26
    18
      modules/UI/UI.js
  2. 28
    3
      modules/UI/toolbars/Toolbar.js
  3. 2
    1
      service/UI/UIEvents.js

+ 26
- 18
modules/UI/UI.js Ver arquivo

143
  * @see https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API
143
  * @see https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API
144
  */
144
  */
145
 UI.toggleFullScreen = function() {
145
 UI.toggleFullScreen = function() {
146
-                            // alternative standard method
147
-    let isNotFullScreen = !document.fullscreenElement &&
148
-            !document.mozFullScreenElement && // current working methods
149
-        !document.webkitFullscreenElement &&
150
-        !document.msFullscreenElement;
146
+    let isFullScreen = document.fullscreenElement
147
+            || document.mozFullScreenElement // current working methods
148
+            || document.webkitFullscreenElement
149
+            || document.msFullscreenElement;
151
 
150
 
152
-    if (isNotFullScreen) {
151
+    if (isFullScreen) {
152
+        if (document.exitFullscreen) {
153
+            document.exitFullscreen();
154
+        } else if (document.msExitFullscreen) {
155
+            document.msExitFullscreen();
156
+        } else if (document.mozCancelFullScreen) {
157
+            document.mozCancelFullScreen();
158
+        } else if (document.webkitExitFullscreen) {
159
+            document.webkitExitFullscreen();
160
+        }
161
+    } else {
153
         if (document.documentElement.requestFullscreen) {
162
         if (document.documentElement.requestFullscreen) {
154
             document.documentElement.requestFullscreen();
163
             document.documentElement.requestFullscreen();
155
         } else if (document.documentElement.msRequestFullscreen) {
164
         } else if (document.documentElement.msRequestFullscreen) {
160
             document.documentElement
169
             document.documentElement
161
                 .webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
170
                 .webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
162
         }
171
         }
163
-    } else {
164
-        if (document.exitFullscreen) {
165
-            document.exitFullscreen();
166
-        } else if (document.msExitFullscreen) {
167
-            document.msExitFullscreen();
168
-        } else if (document.mozCancelFullScreen) {
169
-            document.mozCancelFullScreen();
170
-        } else if (document.webkitExitFullscreen) {
171
-            document.webkitExitFullscreen();
172
-        }
173
     }
172
     }
174
 };
173
 };
175
 
174
 
380
         }
379
         }
381
     });
380
     });
382
 
381
 
383
-    UI.addListener(UIEvents.FULLSCREEN_TOGGLE, UI.toggleFullScreen);
382
+    UI.addListener(UIEvents.TOGGLE_FULLSCREEN, UI.toggleFullScreen);
384
 
383
 
385
     UI.addListener(UIEvents.TOGGLE_CHAT, UI.toggleChat);
384
     UI.addListener(UIEvents.TOGGLE_CHAT, UI.toggleChat);
386
 
385
 
415
     // Resize and reposition videos in full screen mode.
414
     // Resize and reposition videos in full screen mode.
416
     $(document).on(
415
     $(document).on(
417
         'webkitfullscreenchange mozfullscreenchange fullscreenchange',
416
         'webkitfullscreenchange mozfullscreenchange fullscreenchange',
418
-        onResize
417
+        () => {
418
+            let isFullScreen = document.fullscreenElement
419
+                || document.mozFullScreenElement // current working methods
420
+                || document.webkitFullscreenElement
421
+                || document.msFullscreenElement;
422
+
423
+            eventEmitter.emit(UIEvents.FULLSCREEN_TOGGLED, isFullScreen);
424
+
425
+            onResize();
426
+        }
419
     );
427
     );
420
 
428
 
421
     $(window).resize(onResize);
429
     $(window).resize(onResize);

+ 28
- 3
modules/UI/toolbars/Toolbar.js Ver arquivo

73
     },
73
     },
74
     "toolbar_button_fullScreen": function() {
74
     "toolbar_button_fullScreen": function() {
75
         JitsiMeetJS.analytics.sendEvent('toolbar.fullscreen.enabled');
75
         JitsiMeetJS.analytics.sendEvent('toolbar.fullscreen.enabled');
76
-        UIUtil.buttonClick("toolbar_button_fullScreen",
77
-            "icon-full-screen icon-exit-full-screen");
78
-        emitter.emit(UIEvents.FULLSCREEN_TOGGLE);
76
+
77
+        emitter.emit(UIEvents.TOGGLE_FULLSCREEN);
79
     },
78
     },
80
     "toolbar_button_sip": function () {
79
     "toolbar_button_sip": function () {
81
         JitsiMeetJS.analytics.sendEvent('toolbar.sip.clicked');
80
         JitsiMeetJS.analytics.sendEvent('toolbar.sip.clicked');
359
                 this._setToggledState("toolbar_button_raisehand", isRaisedHand);
358
                 this._setToggledState("toolbar_button_raisehand", isRaisedHand);
360
             });
359
             });
361
 
360
 
361
+        APP.UI.addListener(UIEvents.FULLSCREEN_TOGGLED,
362
+            (isFullScreen) => {
363
+                Toolbar._handleFullScreenToggled(isFullScreen);
364
+            });
365
+
362
         if(!APP.tokenData.isGuest) {
366
         if(!APP.tokenData.isGuest) {
363
             $("#toolbar_button_profile").addClass("unclickable");
367
             $("#toolbar_button_profile").addClass("unclickable");
364
             UIUtil.removeTooltip(
368
             UIUtil.removeTooltip(
657
 
661
 
658
     /**
662
     /**
659
      * Handles the side toolbar toggle.
663
      * Handles the side toolbar toggle.
664
+     *
665
+     * @param {string} containerId the identifier of the container element
660
      */
666
      */
661
     _handleSideToolbarContainerToggled(containerId) {
667
     _handleSideToolbarContainerToggled(containerId) {
662
         Object.keys(defaultToolbarButtons).forEach(
668
         Object.keys(defaultToolbarButtons).forEach(
675
         );
681
         );
676
     },
682
     },
677
 
683
 
684
+    /**
685
+     * Handles full screen toggled.
686
+     *
687
+     * @param {boolean} isFullScreen indicates if we're currently in full
688
+     * screen mode
689
+     */
690
+    _handleFullScreenToggled(isFullScreen) {
691
+        let element
692
+            = document.getElementById("toolbar_button_fullScreen");
693
+
694
+        element.className = isFullScreen
695
+            ? element.className
696
+                .replace("icon-full-screen", "icon-exit-full-screen")
697
+            : element.className
698
+                .replace("icon-exit-full-screen", "icon-full-screen");
699
+
700
+        Toolbar._setToggledState("toolbar_button_fullScreen", isFullScreen);
701
+    },
702
+
678
     /**
703
     /**
679
      * Initialise main toolbar buttons.
704
      * Initialise main toolbar buttons.
680
      */
705
      */

+ 2
- 1
service/UI/UIEvents.js Ver arquivo

34
     UPDATE_SHARED_VIDEO: "UI.update_shared_video",
34
     UPDATE_SHARED_VIDEO: "UI.update_shared_video",
35
     USER_KICKED: "UI.user_kicked",
35
     USER_KICKED: "UI.user_kicked",
36
     REMOTE_AUDIO_MUTED: "UI.remote_audio_muted",
36
     REMOTE_AUDIO_MUTED: "UI.remote_audio_muted",
37
-    FULLSCREEN_TOGGLE: "UI.fullscreen_toggle",
37
+    TOGGLE_FULLSCREEN: "UI.toogle_fullscreen",
38
+    FULLSCREEN_TOGGLED: "UI.fullscreen_toggled",
38
     AUTH_CLICKED: "UI.auth_clicked",
39
     AUTH_CLICKED: "UI.auth_clicked",
39
     TOGGLE_CHAT: "UI.toggle_chat",
40
     TOGGLE_CHAT: "UI.toggle_chat",
40
     TOGGLE_SETTINGS: "UI.toggle_settings",
41
     TOGGLE_SETTINGS: "UI.toggle_settings",

Carregando…
Cancelar
Salvar