From d6441934416cdd916ee5bb187f3c14eda686b7dc Mon Sep 17 00:00:00 2001 From: Dmitry Lyzo Date: Thu, 3 Sep 2020 01:04:21 +0300 Subject: [PATCH 01/10] Return permanent scrollbar (killed by refactoring) --- src/assets/css/site.css | 9 +++++---- src/components/slideshow/slideshow.js | 2 -- src/plugins/htmlVideoPlayer/plugin.js | 3 ++- 3 files changed, 7 insertions(+), 7 deletions(-) diff --git a/src/assets/css/site.css b/src/assets/css/site.css index 38e056df89..9eb61de074 100644 --- a/src/assets/css/site.css +++ b/src/assets/css/site.css @@ -44,6 +44,11 @@ body { overflow-x: hidden; background-color: transparent !important; -webkit-font-smoothing: antialiased; + + /* This keeps the scrollbar always present in all pages, so we avoid clipping while switching between pages + that need the scrollbar and pages that don't. + */ + overflow-y: scroll; } .mainAnimatedPage { @@ -122,10 +127,6 @@ div[data-role=page] { padding-bottom: 4em; } -.force-scroll { - overflow-y: scroll; -} - .hide-scroll { overflow-y: hidden; } diff --git a/src/components/slideshow/slideshow.js b/src/components/slideshow/slideshow.js index 028c21b221..f41f864848 100644 --- a/src/components/slideshow/slideshow.js +++ b/src/components/slideshow/slideshow.js @@ -492,7 +492,6 @@ export default function (options) { document.removeEventListener((window.PointerEvent ? 'pointermove' : 'mousemove'), onPointerMove); // Shows page scrollbar document.body.classList.remove('hide-scroll'); - document.body.classList.add('force-scroll'); } /** @@ -657,7 +656,6 @@ export default function (options) { self.show = function () { createElements(options); // Hides page scrollbar - document.body.classList.remove('force-scroll'); document.body.classList.add('hide-scroll'); }; diff --git a/src/plugins/htmlVideoPlayer/plugin.js b/src/plugins/htmlVideoPlayer/plugin.js index d07e6aae58..9b9b7011da 100644 --- a/src/plugins/htmlVideoPlayer/plugin.js +++ b/src/plugins/htmlVideoPlayer/plugin.js @@ -107,7 +107,7 @@ function tryRemoveElement(elem) { const animatedPage = document.querySelector('.page:not(.hide)'); animatedPage.classList.add('hide'); // At this point, we must hide the scrollbar placeholder, so it's not being displayed while the item is being loaded - document.body.classList.remove('force-scroll'); + document.body.classList.add('hide-scroll'); } function zoomIn(elem) { @@ -679,6 +679,7 @@ function tryRemoveElement(elem) { destroyFlvPlayer(this); appRouter.setTransparency('none'); + document.body.classList.remove('hide-scroll'); const videoElement = this.#mediaElement; From 74227f38f53649b8532e2f2e3503f13ad0e7f536 Mon Sep 17 00:00:00 2001 From: Dmitry Lyzo Date: Thu, 3 Sep 2020 01:40:36 +0300 Subject: [PATCH 02/10] Fix scrollbar for Youtube player --- src/plugins/youtubePlayer/plugin.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/plugins/youtubePlayer/plugin.js b/src/plugins/youtubePlayer/plugin.js index eed75a8116..57e49e1d1a 100644 --- a/src/plugins/youtubePlayer/plugin.js +++ b/src/plugins/youtubePlayer/plugin.js @@ -37,6 +37,9 @@ function createMediaElement(instance, options) { document.body.insertBefore(dlg, document.body.firstChild); instance.videoDialog = dlg; + // At this point, we must hide the scrollbar placeholder, so it's not being displayed while the item is being loaded + document.body.classList.add('hide-scroll'); + if (options.fullscreen && dlg.animate && !browser.slow) { zoomIn(dlg, 1).onfinish = function () { resolve(videoElement); @@ -214,6 +217,7 @@ class YoutubePlayer { } destroy() { appRouter.setTransparency('none'); + document.body.classList.remove('hide-scroll'); const dlg = this.videoDialog; if (dlg) { From b973a5eace34f81a1ccb59239c95fa1545cbfb17 Mon Sep 17 00:00:00 2001 From: Dmitry Lyzo Date: Sat, 26 Sep 2020 21:16:34 +0300 Subject: [PATCH 03/10] Make all fullscreen dialogs hide scrollbar --- src/components/dialogHelper/dialogHelper.js | 8 ++++---- src/components/slideshow/slideshow.js | 4 ---- 2 files changed, 4 insertions(+), 8 deletions(-) diff --git a/src/components/dialogHelper/dialogHelper.js b/src/components/dialogHelper/dialogHelper.js index eb46d98b12..65f2a07a19 100644 --- a/src/components/dialogHelper/dialogHelper.js +++ b/src/components/dialogHelper/dialogHelper.js @@ -310,10 +310,6 @@ import 'scrollStyles'; const supportsOverscrollBehavior = 'overscroll-behavior-y' in document.body.style; function shouldLockDocumentScroll(options) { - if (supportsOverscrollBehavior && (options.size || !browser.touch)) { - return false; - } - if (options.lockScroll != null) { return options.lockScroll; } @@ -322,6 +318,10 @@ import 'scrollStyles'; return true; } + if (supportsOverscrollBehavior && (options.size || !browser.touch)) { + return false; + } + if (options.size) { return true; } diff --git a/src/components/slideshow/slideshow.js b/src/components/slideshow/slideshow.js index f41f864848..e825bd0b8a 100644 --- a/src/components/slideshow/slideshow.js +++ b/src/components/slideshow/slideshow.js @@ -490,8 +490,6 @@ export default function (options) { inputManager.off(window, onInputCommand); /* eslint-disable-next-line compat/compat */ document.removeEventListener((window.PointerEvent ? 'pointermove' : 'mousemove'), onPointerMove); - // Shows page scrollbar - document.body.classList.remove('hide-scroll'); } /** @@ -655,8 +653,6 @@ export default function (options) { */ self.show = function () { createElements(options); - // Hides page scrollbar - document.body.classList.add('hide-scroll'); }; /** From 78a3c971ff0e508b1fc367d25bcf3915c0bf319d Mon Sep 17 00:00:00 2001 From: Dmitry Lyzo Date: Sat, 26 Sep 2020 21:48:22 +0300 Subject: [PATCH 04/10] Fix unstyled scrollbar --- src/assets/css/site.css | 9 ++++----- src/scripts/autoThemes.js | 6 +++++- 2 files changed, 9 insertions(+), 6 deletions(-) diff --git a/src/assets/css/site.css b/src/assets/css/site.css index 9eb61de074..38e056df89 100644 --- a/src/assets/css/site.css +++ b/src/assets/css/site.css @@ -44,11 +44,6 @@ body { overflow-x: hidden; background-color: transparent !important; -webkit-font-smoothing: antialiased; - - /* This keeps the scrollbar always present in all pages, so we avoid clipping while switching between pages - that need the scrollbar and pages that don't. - */ - overflow-y: scroll; } .mainAnimatedPage { @@ -127,6 +122,10 @@ div[data-role=page] { padding-bottom: 4em; } +.force-scroll { + overflow-y: scroll; +} + .hide-scroll { overflow-y: hidden; } diff --git a/src/scripts/autoThemes.js b/src/scripts/autoThemes.js index e278a80dc9..daf8ae581b 100644 --- a/src/scripts/autoThemes.js +++ b/src/scripts/autoThemes.js @@ -3,7 +3,11 @@ import skinManager from 'skinManager'; import events from 'events'; // Set the default theme when loading -skinManager.setTheme(userSettings.theme()); +skinManager.setTheme(userSettings.theme()) + /* This keeps the scrollbar always present in all pages, so we avoid clipping while switching between pages + that need the scrollbar and pages that don't. + */ + .then(() => document.body.classList.add('force-scroll')); // Set the user's prefered theme when signing in events.on(window.connectionManager, 'localusersignedin', function (e, user) { From da50605b4e9eed88be771a38d5b6a0362fca8cd8 Mon Sep 17 00:00:00 2001 From: Dmitry Lyzo Date: Sat, 26 Sep 2020 23:55:02 +0300 Subject: [PATCH 05/10] Hide scrollbar only for fullscreen --- src/plugins/youtubePlayer/plugin.js | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/src/plugins/youtubePlayer/plugin.js b/src/plugins/youtubePlayer/plugin.js index 57e49e1d1a..5b921010a2 100644 --- a/src/plugins/youtubePlayer/plugin.js +++ b/src/plugins/youtubePlayer/plugin.js @@ -15,6 +15,10 @@ function zoomIn(elem, iterations) { return elem.animate(keyframes, timing); } +function hideScroll() { + document.body.classList.add('hide-scroll'); +} + function createMediaElement(instance, options) { return new Promise(function (resolve, reject) { const dlg = document.querySelector('.youtubePlayerContainer'); @@ -37,8 +41,9 @@ function createMediaElement(instance, options) { document.body.insertBefore(dlg, document.body.firstChild); instance.videoDialog = dlg; - // At this point, we must hide the scrollbar placeholder, so it's not being displayed while the item is being loaded - document.body.classList.add('hide-scroll'); + if (options.fullscreen) { + hideScroll(); + } if (options.fullscreen && dlg.animate && !browser.slow) { zoomIn(dlg, 1).onfinish = function () { @@ -49,6 +54,10 @@ function createMediaElement(instance, options) { } }); } else { + if (options.fullscreen) { + hideScroll(); + } + resolve(dlg.querySelector('#player')); } }); From 5787069b313d4ae8360d76cdd48c8445374d32d9 Mon Sep 17 00:00:00 2001 From: Dmitry Lyzo Date: Sat, 31 Oct 2020 12:54:40 +0300 Subject: [PATCH 06/10] Add some comments --- src/plugins/htmlVideoPlayer/plugin.js | 1 + src/plugins/youtubePlayer/plugin.js | 1 + 2 files changed, 2 insertions(+) diff --git a/src/plugins/htmlVideoPlayer/plugin.js b/src/plugins/htmlVideoPlayer/plugin.js index 08db55ac7c..f996c5de69 100644 --- a/src/plugins/htmlVideoPlayer/plugin.js +++ b/src/plugins/htmlVideoPlayer/plugin.js @@ -1342,6 +1342,7 @@ function tryRemoveElement(elem) { } }); } else { + // we need to hide scrollbar when starting playback from page with animated background if (options.fullscreen) { hidePrePlaybackPage(); } diff --git a/src/plugins/youtubePlayer/plugin.js b/src/plugins/youtubePlayer/plugin.js index 5b921010a2..838a13c99b 100644 --- a/src/plugins/youtubePlayer/plugin.js +++ b/src/plugins/youtubePlayer/plugin.js @@ -54,6 +54,7 @@ function createMediaElement(instance, options) { } }); } else { + // we need to hide scrollbar when starting playback from page with animated background if (options.fullscreen) { hideScroll(); } From 47f6d198b63456483969b85884ba254ee2560d9f Mon Sep 17 00:00:00 2001 From: Dmitry Lyzo Date: Sat, 31 Oct 2020 12:58:34 +0300 Subject: [PATCH 07/10] Fix playback of tv show or playlist and restoring of scrollbar after history back --- src/plugins/htmlVideoPlayer/plugin.js | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/src/plugins/htmlVideoPlayer/plugin.js b/src/plugins/htmlVideoPlayer/plugin.js index f996c5de69..e8e16693cb 100644 --- a/src/plugins/htmlVideoPlayer/plugin.js +++ b/src/plugins/htmlVideoPlayer/plugin.js @@ -103,9 +103,7 @@ function tryRemoveElement(elem) { }); } - function hidePrePlaybackPage() { - const animatedPage = document.querySelector('.page:not(.hide)'); - animatedPage.classList.add('hide'); + function hideScroll() { // At this point, we must hide the scrollbar placeholder, so it's not being displayed while the item is being loaded document.body.classList.add('hide-scroll'); } @@ -1329,7 +1327,7 @@ function tryRemoveElement(elem) { this.#mediaElement = videoElement; if (options.fullscreen) { - hidePrePlaybackPage(); + hideScroll(); } // don't animate on smart tv's, too slow @@ -1344,7 +1342,7 @@ function tryRemoveElement(elem) { } else { // we need to hide scrollbar when starting playback from page with animated background if (options.fullscreen) { - hidePrePlaybackPage(); + hideScroll(); } return Promise.resolve(dlg.querySelector('video')); From 3a692f4ed2d071183ff082740d6c779511b774bf Mon Sep 17 00:00:00 2001 From: Dmitry Lyzo Date: Sat, 31 Oct 2020 13:16:24 +0300 Subject: [PATCH 08/10] Fix alphapicker positioning at the top when starting playback --- src/components/alphaPicker/style.css | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/alphaPicker/style.css b/src/components/alphaPicker/style.css index 4e94c0f754..8feb3e50e0 100644 --- a/src/components/alphaPicker/style.css +++ b/src/components/alphaPicker/style.css @@ -12,7 +12,6 @@ .alphaPicker-fixed { position: fixed; bottom: 5.5em; - z-index: 999999; } .alphaPickerRow { From 517b69550e5c14931c816391b1fe8f7680cb6bf6 Mon Sep 17 00:00:00 2001 From: Dmitry Lyzo Date: Sat, 31 Oct 2020 22:39:30 +0300 Subject: [PATCH 09/10] Fix permanent scrollbar for screensaver --- src/libraries/screensavermanager.css | 4 ++++ src/libraries/screensavermanager.js | 7 ++++++- src/plugins/backdropScreensaver/plugin.js | 1 + src/plugins/logoScreensaver/plugin.js | 23 ++++++++++++++--------- 4 files changed, 25 insertions(+), 10 deletions(-) create mode 100644 src/libraries/screensavermanager.css diff --git a/src/libraries/screensavermanager.css b/src/libraries/screensavermanager.css new file mode 100644 index 0000000000..b11bbddb5e --- /dev/null +++ b/src/libraries/screensavermanager.css @@ -0,0 +1,4 @@ +/* own "noScroll" class to avoid conflicts and the need for a scrollbar manager */ +.screensaver-noScroll { + overflow: hidden !important; +} diff --git a/src/libraries/screensavermanager.js b/src/libraries/screensavermanager.js index 68a7dda73b..1d6370b9cc 100644 --- a/src/libraries/screensavermanager.js +++ b/src/libraries/screensavermanager.js @@ -3,6 +3,7 @@ import playbackManager from 'playbackManager'; import pluginManager from 'pluginManager'; import inputManager from 'inputManager'; import * as userSettings from 'userSettings'; +import 'css!./screensavermanager.css'; function getMinIdleTime() { // Returns the minimum amount of idle time required before the screen saver can be displayed @@ -52,6 +53,8 @@ function ScreenSaverManager() { console.debug('Showing screensaver ' + screensaver.name); + document.body.classList.add('screensaver-noScroll'); + screensaver.show(); activeScreenSaver = screensaver; @@ -69,7 +72,9 @@ function ScreenSaverManager() { function hide() { if (activeScreenSaver) { console.debug('Hiding screensaver'); - activeScreenSaver.hide(); + activeScreenSaver.hide().then(() => { + document.body.classList.remove('screensaver-noScroll'); + }); activeScreenSaver = null; } diff --git a/src/plugins/backdropScreensaver/plugin.js b/src/plugins/backdropScreensaver/plugin.js index 917d8f48a3..c261d7508b 100644 --- a/src/plugins/backdropScreensaver/plugin.js +++ b/src/plugins/backdropScreensaver/plugin.js @@ -42,6 +42,7 @@ class BackdropScreensaver { this.currentSlideshow.hide(); this.currentSlideshow = null; } + return Promise.resolve(); } } /* eslint-enable indent */ diff --git a/src/plugins/logoScreensaver/plugin.js b/src/plugins/logoScreensaver/plugin.js index 61b8f8a6d6..51c9362d36 100644 --- a/src/plugins/logoScreensaver/plugin.js +++ b/src/plugins/logoScreensaver/plugin.js @@ -150,16 +150,21 @@ export default function () { const elem = document.querySelector('.logoScreenSaver'); if (elem) { - const onAnimationFinish = function () { - elem.parentNode.removeChild(elem); - }; + return new Promise((resolve) => { + const onAnimationFinish = function () { + elem.parentNode.removeChild(elem); + resolve(); + }; - if (elem.animate) { - const animation = fadeOut(elem, 1); - animation.onfinish = onAnimationFinish; - } else { - onAnimationFinish(); - } + if (elem.animate) { + const animation = fadeOut(elem, 1); + animation.onfinish = onAnimationFinish; + } else { + onAnimationFinish(); + } + }); } + + return Promise.resolve(); }; } From b2d342f0e4af0f36bae361f1341be17526b9c40e Mon Sep 17 00:00:00 2001 From: Dmitry Lyzo Date: Sat, 21 Nov 2020 23:04:42 +0300 Subject: [PATCH 10/10] Suggestions: inline function --- src/plugins/htmlVideoPlayer/plugin.js | 10 +++------- src/plugins/youtubePlayer/plugin.js | 8 ++------ 2 files changed, 5 insertions(+), 13 deletions(-) diff --git a/src/plugins/htmlVideoPlayer/plugin.js b/src/plugins/htmlVideoPlayer/plugin.js index 8ebbacb129..45c4e6c6fd 100644 --- a/src/plugins/htmlVideoPlayer/plugin.js +++ b/src/plugins/htmlVideoPlayer/plugin.js @@ -105,11 +105,6 @@ function tryRemoveElement(elem) { }); } - function hideScroll() { - // At this point, we must hide the scrollbar placeholder, so it's not being displayed while the item is being loaded - document.body.classList.add('hide-scroll'); - } - function zoomIn(elem) { return new Promise(resolve => { const duration = 240; @@ -1347,7 +1342,8 @@ function tryRemoveElement(elem) { this.#mediaElement = videoElement; if (options.fullscreen) { - hideScroll(); + // At this point, we must hide the scrollbar placeholder, so it's not being displayed while the item is being loaded + document.body.classList.add('hide-scroll'); } // don't animate on smart tv's, too slow @@ -1362,7 +1358,7 @@ function tryRemoveElement(elem) { } else { // we need to hide scrollbar when starting playback from page with animated background if (options.fullscreen) { - hideScroll(); + document.body.classList.add('hide-scroll'); } return Promise.resolve(dlg.querySelector('video')); diff --git a/src/plugins/youtubePlayer/plugin.js b/src/plugins/youtubePlayer/plugin.js index de2081c089..f7bc7a1428 100644 --- a/src/plugins/youtubePlayer/plugin.js +++ b/src/plugins/youtubePlayer/plugin.js @@ -15,10 +15,6 @@ function zoomIn(elem, iterations) { return elem.animate(keyframes, timing); } -function hideScroll() { - document.body.classList.add('hide-scroll'); -} - function createMediaElement(instance, options) { return new Promise(function (resolve, reject) { const dlg = document.querySelector('.youtubePlayerContainer'); @@ -42,7 +38,7 @@ function createMediaElement(instance, options) { instance.videoDialog = dlg; if (options.fullscreen) { - hideScroll(); + document.body.classList.add('hide-scroll'); } if (options.fullscreen && dlg.animate && !browser.slow) { @@ -56,7 +52,7 @@ function createMediaElement(instance, options) { } else { // we need to hide scrollbar when starting playback from page with animated background if (options.fullscreen) { - hideScroll(); + document.body.classList.add('hide-scroll'); } resolve(dlg.querySelector('#player'));