Merge pull request #3560 from thornbill/refactor-transparency

Move backdrop transparency method to component

src/components/appRouter.js

@@ -1,6 +1,6 @@
 import { appHost } from './apphost';
 import appSettings from '../scripts/settings/appSettings';
-import backdrop from './backdrop/backdrop';
+import { clearBackdrop, setBackdropTransparency } from './backdrop/backdrop';
 import browser from '../scripts/browser';
 import { Events } from 'jellyfin-apiclient';
 import globalize from '../scripts/globalize';
@@ -106,7 +106,7 @@ class AppRouter {
     }
 
     beginConnectionWizard() {
-        backdrop.clearBackdrop();
+        clearBackdrop();
         loading.show();
         ServerConnections.connect({
             enableAutoLogin: appSettings.enableAutoLogin()
@@ -252,30 +252,14 @@ class AppRouter {
         }
     }
 
+    /**
+     * Sets the backdrop, background, and document transparency
+     * @deprecated use Dashboard.setBackdropTransparency
+     */
     setTransparency(level) {
-        if (!this.backdropContainer) {
+        // TODO: Remove this after JMP is updated to not use this function
-            this.backdropContainer = document.querySelector('.backdropContainer');
+        console.warn('Deprecated! Use Dashboard.setBackdropTransparency');
-        }
+        setBackdropTransparency(level);
-        if (!this.backgroundContainer) {
-            this.backgroundContainer = document.querySelector('.backgroundContainer');
-        }
-
-        if (level === 'full' || level === 2) {
-            backdrop.clearBackdrop(true);
-            document.documentElement.classList.add('transparentDocument');
-            this.backgroundContainer.classList.add('backgroundContainer-transparent');
-            this.backdropContainer.classList.add('hide');
-        } else if (level === 'backdrop' || level === 1) {
-            backdrop.externalBackdrop(true);
-            document.documentElement.classList.add('transparentDocument');
-            this.backgroundContainer.classList.add('backgroundContainer-transparent');
-            this.backdropContainer.classList.add('hide');
-        } else {
-            backdrop.externalBackdrop(false);
-            document.documentElement.classList.remove('transparentDocument');
-            this.backgroundContainer.classList.remove('backgroundContainer-transparent');
-            this.backdropContainer.classList.remove('hide');
-        }
     }
 
     getRoutes() {

src/components/backdrop/backdrop.js

@@ -295,9 +295,37 @@ import './backdrop.scss';
 
 /* eslint-enable indent */
 
-export default {
+/**
-    setBackdrops: setBackdrops,
+ * @enum TransparencyLevel
-    setBackdrop: setBackdrop,
+ */
-    clearBackdrop: clearBackdrop,
+export const TRANSPARENCY_LEVEL = {
-    externalBackdrop: externalBackdrop
+    Full: 'full',
+    Backdrop: 'backdrop',
+    None: 'none'
 };
+
+/**
+ * Sets the backdrop, background, and document transparency
+ * @param {TransparencyLevel} level The level of transparency
+ */
+export function setBackdropTransparency(level) {
+    const backdropElem = getBackdropContainer();
+    const backgroundElem = getBackgroundContainer();
+
+    if (level === TRANSPARENCY_LEVEL.Full || level === 2) {
+        clearBackdrop(true);
+        document.documentElement.classList.add('transparentDocument');
+        backgroundElem.classList.add('backgroundContainer-transparent');
+        backdropElem.classList.add('hide');
+    } else if (level === TRANSPARENCY_LEVEL.Backdrop || level === 1) {
+        externalBackdrop(true);
+        document.documentElement.classList.add('transparentDocument');
+        backgroundElem.classList.add('backgroundContainer-transparent');
+        backdropElem.classList.add('hide');
+    } else {
+        externalBackdrop(false);
+        document.documentElement.classList.remove('transparentDocument');
+        backgroundElem.classList.remove('backgroundContainer-transparent');
+        backdropElem.classList.remove('hide');
+    }
+}

src/components/remotecontrol/remotecontrol.js

@@ -1,6 +1,6 @@
 import escapeHtml from 'escape-html';
 import datetime from '../../scripts/datetime';
-import backdrop from '../backdrop/backdrop';
+import { clearBackdrop, setBackdrops } from '../backdrop/backdrop';
 import listView from '../listview/listview';
 import imageLoader from '../images/imageLoader';
 import { playbackManager } from '../playback/playbackmanager';
@@ -229,7 +229,7 @@ function updateNowPlayingInfo(context, state, serverId) {
             });
         });
         setImageUrl(context, state, url);
-        backdrop.setBackdrops([item]);
+        setBackdrops([item]);
         apiClient.getItem(apiClient.getCurrentUserId(), item.Id).then(function (fullItem) {
             const userData = fullItem.UserData || {};
             const likes = userData.Likes == null ? '' : userData.Likes;
@@ -237,7 +237,7 @@ function updateNowPlayingInfo(context, state, serverId) {
             context.querySelector('.nowPlayingPageUserDataButtons').innerHTML = '<button is="emby-ratingbutton" type="button" class="listItemButton paper-icon-button-light" data-id="' + fullItem.Id + '" data-serverid="' + fullItem.ServerId + '" data-itemtype="' + fullItem.Type + '" data-likes="' + likes + '" data-isfavorite="' + userData.IsFavorite + '"><span class="material-icons favorite" aria-hidden="true"></span></button>';
         });
     } else {
-        backdrop.clearBackdrop();
+        clearBackdrop();
         context.querySelector('.nowPlayingPageUserDataButtons').innerHTML = '';
     }
 }

src/components/tabbedview/tabbedview.js

@@ -1,4 +1,4 @@
-import backdrop from '../backdrop/backdrop';
+import { clearBackdrop } from '../backdrop/backdrop';
 import * as mainTabsManager from '../maintabsmanager';
 import layoutManager from '../layoutManager';
 import '../../elements/emby-tabs/emby-tabs';
@@ -87,7 +87,7 @@ class TabbedView {
 
     onResume() {
         this.setTitle();
-        backdrop.clearBackdrop();
+        clearBackdrop();
 
         const currentTabController = this.currentTabController;
 

src/controllers/itemDetails/index.js

@@ -12,7 +12,7 @@ import * as userSettings from '../../scripts/settings/userSettings';
 import cardBuilder from '../../components/cardbuilder/cardBuilder';
 import datetime from '../../scripts/datetime';
 import mediaInfo from '../../components/mediainfo/mediainfo';
-import backdrop from '../../components/backdrop/backdrop';
+import { clearBackdrop, setBackdrops } from '../../components/backdrop/backdrop';
 import listView from '../../components/listview/listview';
 import itemContextMenu from '../../components/itemContextMenu';
 import itemHelper from '../../components/itemHelper';
@@ -520,9 +520,9 @@ function setTrailerButtonVisibility(page, item) {
 
 function renderBackdrop(item) {
     if (dom.getWindowSize().innerWidth >= 1000) {
-        backdrop.setBackdrops([item]);
+        setBackdrops([item]);
     } else {
-        backdrop.clearBackdrop();
+        clearBackdrop();
     }
 }
 

src/controllers/playback/video/index.js

@@ -24,6 +24,7 @@ import shell from '../../../scripts/shell';
 import SubtitleSync from '../../../components/subtitlesync/subtitlesync';
 import { appRouter } from '../../../components/appRouter';
 import LibraryMenu from '../../../scripts/libraryMenu';
+import { setBackdropTransparency, TRANSPARENCY_LEVEL } from '../../../components/backdrop/backdrop';
 
 /* eslint-disable indent */
 
@@ -1325,7 +1326,7 @@ import LibraryMenu from '../../../scripts/libraryMenu';
 
         view.addEventListener('viewbeforeshow', function () {
             headerElement.classList.add('osdHeader');
-            appRouter.setTransparency('full');
+            setBackdropTransparency(TRANSPARENCY_LEVEL.Full);
         });
         view.addEventListener('viewshow', function () {
             try {

src/plugins/htmlVideoPlayer/plugin.js

@@ -30,6 +30,7 @@ import globalize from '../../scripts/globalize';
 import ServerConnections from '../../components/ServerConnections';
 import profileBuilder from '../../scripts/browserDeviceProfile';
 import { getIncludeCorsCredentials } from '../../scripts/settings/webSettings';
+import { setBackdropTransparency, TRANSPARENCY_LEVEL } from '../../components/backdrop/backdrop';
 
 /* eslint-disable indent */
 
@@ -691,7 +692,7 @@ function tryRemoveElement(elem) {
             destroyHlsPlayer(this);
             destroyFlvPlayer(this);
 
-            appRouter.setTransparency('none');
+            setBackdropTransparency(TRANSPARENCY_LEVEL.None);
             document.body.classList.remove('hide-scroll');
 
             const videoElement = this.#mediaElement;
@@ -838,7 +839,7 @@ function tryRemoveElement(elem) {
                 if (this._currentPlayOptions.fullscreen) {
                     appRouter.showVideoOsd().then(this.onNavigatedToOsd);
                 } else {
-                    appRouter.setTransparency('backdrop');
+                    setBackdropTransparency(TRANSPARENCY_LEVEL.Backdrop);
                     this.#videoDialog.classList.remove('videoPlayerContainer-onTop');
 
                     this.onStartedAndNavigatedToOsd();

src/plugins/youtubePlayer/plugin.js

@@ -2,6 +2,7 @@ import { Events } from 'jellyfin-apiclient';
 import browser from '../../scripts/browser';
 import { appRouter } from '../../components/appRouter';
 import loading from '../../components/loading/loading';
+import { setBackdropTransparency, TRANSPARENCY_LEVEL } from '../../components/backdrop/backdrop';
 
 /* globals YT */
 
@@ -127,7 +128,7 @@ function onPlaying(instance, playOptions, resolve) {
                 instance.videoDialog.classList.remove('onTop');
             });
         } else {
-            appRouter.setTransparency('backdrop');
+            setBackdropTransparency(TRANSPARENCY_LEVEL.Backdrop);
             instance.videoDialog.classList.remove('onTop');
         }
 
@@ -227,7 +228,7 @@ class YoutubePlayer {
         return Promise.resolve();
     }
     destroy() {
-        appRouter.setTransparency('none');
+        setBackdropTransparency(TRANSPARENCY_LEVEL.None);
         document.body.classList.remove('hide-scroll');
 
         const dlg = this.videoDialog;

src/scripts/autoBackdrops.js

@@ -1,4 +1,4 @@
-import backdrop from '../components/backdrop/backdrop';
+import { clearBackdrop, setBackdrops } from '../components/backdrop/backdrop';
 import * as userSettings from './settings/userSettings';
 import libraryMenu from './libraryMenu';
 import { pageClassOn } from '../utils/dashboard';
@@ -48,12 +48,12 @@ function showBackdrop(type, parentId) {
     if (apiClient) {
         getBackdropItemIds(apiClient, apiClient.getCurrentUserId(), type, parentId).then(function (images) {
             if (images.length) {
-                backdrop.setBackdrops(images.map(function (i) {
+                setBackdrops(images.map(function (i) {
                     i.BackdropImageTags = [i.tag];
                     return i;
                 }));
             } else {
-                backdrop.clearBackdrop();
+                clearBackdrop();
             }
         });
     }
@@ -70,10 +70,10 @@ pageClassOn('pageshow', 'page', function () {
                 showBackdrop(type, parentId);
             } else {
                 page.classList.remove('backdropPage');
-                backdrop.clearBackdrop();
+                clearBackdrop();
             }
         } else {
-            backdrop.clearBackdrop();
+            clearBackdrop();
         }
     }
 });

src/utils/dashboard.js

@@ -7,6 +7,7 @@ import baseConfirm from '../components/confirm/confirm';
 import globalize from '../scripts/globalize';
 import * as webSettings from '../scripts/settings/webSettings';
 import datetime from '../scripts/datetime';
+import { setBackdropTransparency } from '../components/backdrop/backdrop';
 import DirectoryBrowser from '../components/directorybrowser/directorybrowser';
 import dialogHelper from '../components/dialogHelper/dialogHelper';
 import itemIdentifier from '../components/itemidentifier/itemidentifier';
@@ -234,7 +235,8 @@ const Dashboard = {
     datetime,
     DirectoryBrowser,
     dialogHelper,
-    itemIdentifier
+    itemIdentifier,
+    setBackdropTransparency
 };
 
 // This is used in plugins and templates, so keep it defined for now.