From 125d5cb0154b0ae18d01cd45482fae2baa8d14c9 Mon Sep 17 00:00:00 2001 From: Bill Thornton Date: Tue, 12 Apr 2022 16:22:00 -0400 Subject: [PATCH] Move backdrop transparency method to component --- src/components/appRouter.js | 32 ++++++---------------- src/components/backdrop/backdrop.js | 35 +++++++++++++++++++++++++ src/controllers/playback/video/index.js | 3 ++- src/plugins/htmlVideoPlayer/plugin.js | 5 ++-- src/plugins/youtubePlayer/plugin.js | 5 ++-- src/utils/dashboard.js | 4 ++- 6 files changed, 54 insertions(+), 30 deletions(-) diff --git a/src/components/appRouter.js b/src/components/appRouter.js index 9d5d4aae2..30553ea9b 100644 --- a/src/components/appRouter.js +++ b/src/components/appRouter.js @@ -1,6 +1,6 @@ import { appHost } from './apphost'; import appSettings from '../scripts/settings/appSettings'; -import backdrop from './backdrop/backdrop'; +import backdrop, { setBackdropTransparency } from './backdrop/backdrop'; import browser from '../scripts/browser'; import { Events } from 'jellyfin-apiclient'; import globalize from '../scripts/globalize'; @@ -252,30 +252,14 @@ class AppRouter { } } + /** + * Sets the backdrop, background, and document transparency + * @deprecated use Dashboard.setBackdropTransparency + */ setTransparency(level) { - if (!this.backdropContainer) { - this.backdropContainer = document.querySelector('.backdropContainer'); - } - 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'); - } + // TODO: Remove this after JMP is updated to not use this function + console.warn('Deprecated! Use Dashboard.setBackdropTransparency'); + setBackdropTransparency(level); } getRoutes() { diff --git a/src/components/backdrop/backdrop.js b/src/components/backdrop/backdrop.js index 9403038ae..c27f03aae 100644 --- a/src/components/backdrop/backdrop.js +++ b/src/components/backdrop/backdrop.js @@ -315,6 +315,41 @@ import ServerConnections from '../ServerConnections'; /* eslint-enable indent */ +/** + * @enum TransparencyLevel + */ +export const TRANSPARENCY_LEVEL = { + 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'); + } +} + export default { setBackdrops: setBackdrops, setBackdrop: setBackdrop, diff --git a/src/controllers/playback/video/index.js b/src/controllers/playback/video/index.js index 7b408a566..8157a8b3a 100644 --- a/src/controllers/playback/video/index.js +++ b/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 */ @@ -1323,7 +1324,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 { diff --git a/src/plugins/htmlVideoPlayer/plugin.js b/src/plugins/htmlVideoPlayer/plugin.js index 2b49f99d6..c0e05d587 100644 --- a/src/plugins/htmlVideoPlayer/plugin.js +++ b/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(); diff --git a/src/plugins/youtubePlayer/plugin.js b/src/plugins/youtubePlayer/plugin.js index 5c3f3c360..96d23c2f3 100644 --- a/src/plugins/youtubePlayer/plugin.js +++ b/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; diff --git a/src/utils/dashboard.js b/src/utils/dashboard.js index 4035c8d91..0052f4429 100644 --- a/src/utils/dashboard.js +++ b/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.