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 { diff --git a/src/components/dialogHelper/dialogHelper.js b/src/components/dialogHelper/dialogHelper.js index 20c658df4e..cdaf47996f 100644 --- a/src/components/dialogHelper/dialogHelper.js +++ b/src/components/dialogHelper/dialogHelper.js @@ -310,10 +310,6 @@ import '../../assets/css/scrollstyles.css'; 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 '../../assets/css/scrollstyles.css'; 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 10a3ae6200..0a50d26ea9 100644 --- a/src/components/slideshow/slideshow.js +++ b/src/components/slideshow/slideshow.js @@ -559,9 +559,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'); - document.body.classList.add('force-scroll'); } /** @@ -761,9 +758,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/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 96a9c677b0..bdb049a23c 100644 --- a/src/libraries/screensavermanager.js +++ b/src/libraries/screensavermanager.js @@ -4,6 +4,7 @@ import { pluginManager } from '../components/pluginManager'; import inputManager from '../scripts/inputManager'; import * as userSettings from '../scripts/settings/userSettings'; import ServerConnections from '../components/ServerConnections'; +import './screensavermanager.css'; function getMinIdleTime() { // Returns the minimum amount of idle time required before the screen saver can be displayed @@ -53,6 +54,8 @@ function ScreenSaverManager() { console.debug('Showing screensaver ' + screensaver.name); + document.body.classList.add('screensaver-noScroll'); + screensaver.show(); activeScreenSaver = screensaver; @@ -70,7 +73,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 2e550513e3..7db319a34e 100644 --- a/src/plugins/backdropScreensaver/plugin.js +++ b/src/plugins/backdropScreensaver/plugin.js @@ -43,6 +43,7 @@ class BackdropScreensaver { this.currentSlideshow.hide(); this.currentSlideshow = null; } + return Promise.resolve(); } } /* eslint-enable indent */ diff --git a/src/plugins/htmlVideoPlayer/plugin.js b/src/plugins/htmlVideoPlayer/plugin.js index b976c47461..1b1ec39d18 100644 --- a/src/plugins/htmlVideoPlayer/plugin.js +++ b/src/plugins/htmlVideoPlayer/plugin.js @@ -105,13 +105,6 @@ function tryRemoveElement(elem) { }); } - function hidePrePlaybackPage() { - 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'); - } - function zoomIn(elem) { return new Promise(resolve => { const duration = 240; @@ -678,6 +671,7 @@ function tryRemoveElement(elem) { destroyFlvPlayer(this); appRouter.setTransparency('none'); + document.body.classList.remove('hide-scroll'); const videoElement = this.#mediaElement; @@ -1348,7 +1342,8 @@ function tryRemoveElement(elem) { this.#mediaElement = videoElement; if (options.fullscreen) { - hidePrePlaybackPage(); + // 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 @@ -1361,8 +1356,9 @@ function tryRemoveElement(elem) { } }); } else { + // we need to hide scrollbar when starting playback from page with animated background if (options.fullscreen) { - hidePrePlaybackPage(); + document.body.classList.add('hide-scroll'); } return Promise.resolve(dlg.querySelector('video')); diff --git a/src/plugins/logoScreensaver/plugin.js b/src/plugins/logoScreensaver/plugin.js index 7c2b71342c..5067546c7f 100644 --- a/src/plugins/logoScreensaver/plugin.js +++ b/src/plugins/logoScreensaver/plugin.js @@ -148,16 +148,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(); }; } diff --git a/src/plugins/youtubePlayer/plugin.js b/src/plugins/youtubePlayer/plugin.js index 93bb435c27..6362cb3cbb 100644 --- a/src/plugins/youtubePlayer/plugin.js +++ b/src/plugins/youtubePlayer/plugin.js @@ -45,6 +45,10 @@ function createMediaElement(instance, options) { document.body.insertBefore(dlg, document.body.firstChild); instance.videoDialog = dlg; + if (options.fullscreen) { + document.body.classList.add('hide-scroll'); + } + if (options.fullscreen && dlg.animate && !browser.slow) { zoomIn(dlg, 1).onfinish = function () { resolve(videoElement); @@ -54,6 +58,11 @@ function createMediaElement(instance, options) { } }); } else { + // we need to hide scrollbar when starting playback from page with animated background + if (options.fullscreen) { + document.body.classList.add('hide-scroll'); + } + resolve(dlg.querySelector('#player')); } }); @@ -219,6 +228,7 @@ class YoutubePlayer { } destroy() { appRouter.setTransparency('none'); + document.body.classList.remove('hide-scroll'); const dlg = this.videoDialog; if (dlg) { diff --git a/src/scripts/autoThemes.js b/src/scripts/autoThemes.js index e62f87c608..35bfdbf738 100644 --- a/src/scripts/autoThemes.js +++ b/src/scripts/autoThemes.js @@ -5,7 +5,11 @@ import { Events } from 'jellyfin-apiclient'; import ServerConnections from '../components/ServerConnections'; // 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 saved theme once a user authenticates Events.on(ServerConnections, 'localusersignedin', function (e, user) {