Merge pull request #1903 from dmitrylyzo/return-of-the-scrollbar

Return permanent scrollbar

src/components/alphaPicker/style.css

@@ -12,7 +12,6 @@
 .alphaPicker-fixed {
     position: fixed;
     bottom: 5.5em;
-    z-index: 999999;
 }
 
 .alphaPickerRow {

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;
         }

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');
     };
 
     /**

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;
+}

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;
         }
 

src/plugins/backdropScreensaver/plugin.js

@@ -43,6 +43,7 @@ class BackdropScreensaver {
                 this.currentSlideshow.hide();
                 this.currentSlideshow = null;
             }
+            return Promise.resolve();
         }
     }
 /* eslint-enable indent */

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'));

src/plugins/logoScreensaver/plugin.js

@@ -148,8 +148,10 @@ export default function () {
         const elem = document.querySelector('.logoScreenSaver');
 
         if (elem) {
+            return new Promise((resolve) => {
                 const onAnimationFinish = function () {
                     elem.parentNode.removeChild(elem);
+                    resolve();
                 };
 
                 if (elem.animate) {
@@ -158,6 +160,9 @@ export default function () {
                 } else {
                     onAnimationFinish();
                 }
+            });
         }
+
+        return Promise.resolve();
     };
 }

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) {

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) {