From 5459ef2a780d5966e168b53f0c0d8d95059132b9 Mon Sep 17 00:00:00 2001 From: MrTimscampi Date: Wed, 15 Apr 2020 13:08:48 +0200 Subject: [PATCH] Use screenfull to handle fullscreen switching --- package.json | 1 + src/bundle.js | 7 ++ src/components/fullscreenManager.js | 103 --------------------- src/components/htmlvideoplayer/plugin.js | 4 +- src/components/playback/playbackmanager.js | 12 +-- src/scripts/site.js | 7 +- yarn.lock | 5 + 7 files changed, 23 insertions(+), 116 deletions(-) delete mode 100644 src/components/fullscreenManager.js diff --git a/package.json b/package.json index 8f42635adc..bc8089947f 100644 --- a/package.json +++ b/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", diff --git a/src/bundle.js b/src/bundle.js index cf4822deb6..eb358797e6 100644 --- a/src/bundle.js +++ b/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; +}); diff --git a/src/components/fullscreenManager.js b/src/components/fullscreenManager.js deleted file mode 100644 index 8ae31073a2..0000000000 --- a/src/components/fullscreenManager.js +++ /dev/null @@ -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; -}); diff --git a/src/components/htmlvideoplayer/plugin.js b/src/components/htmlvideoplayer/plugin.js index bcd3a72ba9..77fa687dc2 100644 --- a/src/components/htmlvideoplayer/plugin.js +++ b/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() { diff --git a/src/components/playback/playbackmanager.js b/src/components/playback/playbackmanager.js index 2ea4c67cfb..352df53958 100644 --- a/src/components/playback/playbackmanager.js +++ b/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()) { - fullscreenManager.exitFullscreen(); - } else { - fullscreenManager.requestFullscreen(); + if (screenfull.isEnabled) { + screenfull.toggle(); } }; diff --git a/src/scripts/site.js b/src/scripts/site.js index f861824797..ffe006ccc6 100644 --- a/src/scripts/site.js +++ b/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); diff --git a/yarn.lock b/yarn.lock index 03437af39b..099117476e 100644 --- a/yarn.lock +++ b/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"