Merge pull request #1092 from MrTimscampi/screenfull

Use screenfull to handle fullscreen switching

package.json

@@ -73,6 +73,7 @@
     "page": "^1.11.5",
     "query-string": "^6.11.1",
     "resize-observer-polyfill": "^1.5.1",
+    "screenfull": "^5.0.2",
     "shaka-player": "^2.5.10",
     "sortablejs": "^1.10.2",
     "swiper": "^5.3.1",

src/bundle.js

@@ -135,7 +135,14 @@ _define("fast-text-encoding", function () {
     return fast_text_encoding;
 });
 
+// intersection-observer
 var intersection_observer = require("intersection-observer");
 _define("intersection-observer", function () {
     return intersection_observer;
 });
+
+// screenfull
+var screenfull = require("screenfull");
+_define("screenfull", function () {
+    return screenfull;
+});

src/components/fullscreenManager.js

@@ -1,103 +0,0 @@
-define(['events', 'dom', 'apphost', 'browser'], function (events, dom, appHost, browser) {
-    'use strict';
-
-    function fullscreenManager() {
-
-    }
-
-    fullscreenManager.prototype.requestFullscreen = function (element) {
-
-        element = element || document.documentElement;
-
-        if (element.requestFullscreen) {
-            element.requestFullscreen();
-            return;
-        } else if (element.mozRequestFullScreen) {
-            element.mozRequestFullScreen();
-            return;
-        } else if (element.webkitRequestFullscreen) {
-            element.webkitRequestFullscreen();
-            return;
-        } else if (element.msRequestFullscreen) {
-            element.msRequestFullscreen();
-            return;
-        }
-
-        // Hack - This is only available for video elements in ios safari
-        if (element.tagName !== 'VIDEO') {
-            element = document.querySelector('video') || element;
-        }
-        if (element.webkitEnterFullscreen) {
-            element.webkitEnterFullscreen();
-        }
-    };
-
-    fullscreenManager.prototype.exitFullscreen = function () {
-
-        if (!this.isFullScreen()) {
-            return;
-        }
-        if (document.exitFullscreen) {
-            document.exitFullscreen();
-        } else if (document.mozCancelFullScreen) {
-            document.mozCancelFullScreen();
-        } else if (document.webkitExitFullscreen) {
-            document.webkitExitFullscreen();
-        } else if (document.webkitCancelFullscreen) {
-            document.webkitCancelFullscreen();
-        } else if (document.msExitFullscreen) {
-            document.msExitFullscreen();
-        }
-    };
-
-    // TODO: use screenfull.js
-    fullscreenManager.prototype.isFullScreen = function () {
-        return document.fullscreen ||
-            document.mozFullScreen ||
-            document.webkitIsFullScreen ||
-            document.msFullscreenElement || /* IE/Edge syntax */
-            document.fullscreenElement || /* Standard syntax */
-            document.webkitFullscreenElement || /* Chrome, Safari and Opera syntax */
-            document.mozFullScreenElement; /* Firefox syntax */
-    };
-
-    var manager = new fullscreenManager();
-
-    function onFullScreenChange() {
-        events.trigger(manager, 'fullscreenchange');
-    }
-
-    dom.addEventListener(document, 'fullscreenchange', onFullScreenChange, {
-        passive: true
-    });
-
-    dom.addEventListener(document, 'webkitfullscreenchange', onFullScreenChange, {
-        passive: true
-    });
-
-    dom.addEventListener(document, 'mozfullscreenchange', onFullScreenChange, {
-        passive: true
-    });
-
-    function isTargetValid(target) {
-        return !dom.parentWithTag(target, ['BUTTON', 'INPUT', 'TEXTAREA']);
-    }
-    if (appHost.supports("fullscreenchange") && (browser.edgeUwp || -1 !== navigator.userAgent.toLowerCase().indexOf("electron"))) {
-
-        dom.addEventListener(window, 'dblclick', function (e) {
-
-            if (isTargetValid(e.target)) {
-                if (manager.isFullScreen()) {
-                    manager.exitFullscreen();
-                } else {
-                    manager.requestFullscreen();
-                }
-            }
-
-        }, {
-            passive: true
-        });
-    }
-
-    return manager;
-});

src/components/htmlvideoplayer/plugin.js

@@ -1,4 +1,4 @@
-define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackManager', 'appRouter', 'appSettings', 'connectionManager', 'htmlMediaHelper', 'itemHelper', 'fullscreenManager', 'globalize'], function (browser, require, events, appHost, loading, dom, playbackManager, appRouter, appSettings, connectionManager, htmlMediaHelper, itemHelper, fullscreenManager, globalize) {
+define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackManager', 'appRouter', 'appSettings', 'connectionManager', 'htmlMediaHelper', 'itemHelper', 'screenfull', 'globalize'], function (browser, require, events, appHost, loading, dom, playbackManager, appRouter, appSettings, connectionManager, htmlMediaHelper, itemHelper, screenfull, globalize) {
     "use strict";
     /* globals cast */
 
@@ -795,7 +795,7 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa
                 dlg.parentNode.removeChild(dlg);
             }
 
-            fullscreenManager.exitFullscreen();
+            screenfull.exit();
         };
 
         function onEnded() {

src/components/playback/playbackmanager.js

@@ -1,4 +1,4 @@
-define(['events', 'datetime', 'appSettings', 'itemHelper', 'pluginManager', 'playQueueManager', 'userSettings', 'globalize', 'connectionManager', 'loading', 'apphost', 'fullscreenManager'], function (events, datetime, appSettings, itemHelper, pluginManager, PlayQueueManager, userSettings, globalize, connectionManager, loading, apphost, fullscreenManager) {
+define(['events', 'datetime', 'appSettings', 'itemHelper', 'pluginManager', 'playQueueManager', 'userSettings', 'globalize', 'connectionManager', 'loading', 'apphost', 'screenfull'], function (events, datetime, appSettings, itemHelper, pluginManager, PlayQueueManager, userSettings, globalize, connectionManager, loading, apphost, screenfull) {
     'use strict';
 
     function enableLocalPlaylistManagement(player) {
@@ -17,7 +17,7 @@ define(['events', 'datetime', 'appSettings', 'itemHelper', 'pluginManager', 'pla
     }
 
     function bindToFullscreenChange(player) {
-        events.on(fullscreenManager, 'fullscreenchange', function () {
+        screenfull.on('change', function () {
             events.trigger(player, 'fullscreenchange');
         });
     }
@@ -1518,7 +1518,7 @@ define(['events', 'datetime', 'appSettings', 'itemHelper', 'pluginManager', 'pla
                 return player.isFullscreen();
             }
 
-            return fullscreenManager.isFullScreen();
+            return screenfull.isFullscreen;
         };
 
         self.toggleFullscreen = function (player) {
@@ -1528,10 +1528,8 @@ define(['events', 'datetime', 'appSettings', 'itemHelper', 'pluginManager', 'pla
                 return player.toggleFulscreen();
             }
 
-            if (fullscreenManager.isFullScreen()) {
+            if (screenfull.isEnabled) {
-                fullscreenManager.exitFullscreen();
+                screenfull.toggle();
-            } else {
-                fullscreenManager.requestFullscreen();
             }
         };
 

src/scripts/site.js

@@ -588,7 +588,7 @@ var AppInfo = {};
                     }
                 }
 
-                require(["playerSelectionMenu", "fullscreenManager"]);
+                require(["playerSelectionMenu"]);
 
                 var apiClient = window.ConnectionManager && window.ConnectionManager.currentApiClient();
                 if (apiClient) {
@@ -706,7 +706,8 @@ var AppInfo = {};
                     "polyfill",
                     "fast-text-encoding",
                     "intersection-observer",
-                    "classlist-polyfill"
+                    "classlist-polyfill",
+                    "screenfull"
                 ]
             },
             urlArgs: urlArgs,
@@ -834,8 +835,6 @@ var AppInfo = {};
         define("searchFields", [componentsPath + "/search/searchfields"], returnFirstDependency);
         define("searchResults", [componentsPath + "/search/searchresults"], returnFirstDependency);
         define("upNextDialog", [componentsPath + "/upnextdialog/upnextdialog"], returnFirstDependency);
-        define("fullscreen-doubleclick", [componentsPath + "/fullscreen/fullscreen-dc"], returnFirstDependency);
-        define("fullscreenManager", [componentsPath + "/fullscreenManager", "events"], returnFirstDependency);
         define("subtitleAppearanceHelper", [componentsPath + "/subtitlesettings/subtitleappearancehelper"], returnFirstDependency);
         define("subtitleSettings", [componentsPath + "/subtitlesettings/subtitlesettings"], returnFirstDependency);
         define("displaySettings", [componentsPath + "/displaysettings/displaysettings"], returnFirstDependency);

yarn.lock

@@ -10216,6 +10216,11 @@ schema-utils@^2.6.0, schema-utils@^2.6.4, schema-utils@^2.6.5:
     ajv "^6.12.0"
     ajv-keywords "^3.4.1"
 
+screenfull@^5.0.2:
+  version "5.0.2"
+  resolved "https://registry.yarnpkg.com/screenfull/-/screenfull-5.0.2.tgz#b9acdcf1ec676a948674df5cd0ff66b902b0bed7"
+  integrity sha512-cCF2b+L/mnEiORLN5xSAz6H3t18i2oHh9BA8+CQlAh5DRw2+NFAGQJOSYbcGw8B2k04g/lVvFcfZ83b3ysH5UQ==
+
 scss-tokenizer@^0.2.3:
   version "0.2.3"
   resolved "https://registry.yarnpkg.com/scss-tokenizer/-/scss-tokenizer-0.2.3.tgz#8eb06db9a9723333824d3f5530641149847ce5d1"