From 125d5cb0154b0ae18d01cd45482fae2baa8d14c9 Mon Sep 17 00:00:00 2001 From: Bill Thornton Date: Tue, 12 Apr 2022 16:22:00 -0400 Subject: [PATCH 1/2] 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. From a9ae263045e69c6e3cc89195a85ce6ad051ddce5 Mon Sep 17 00:00:00 2001 From: Bill Thornton Date: Tue, 12 Apr 2022 16:58:56 -0400 Subject: [PATCH 2/2] Remove default export for backdrop component --- src/components/appRouter.js | 4 ++-- src/components/backdrop/backdrop.js | 7 ------- src/components/remotecontrol/remotecontrol.js | 6 +++--- src/components/tabbedview/tabbedview.js | 4 ++-- src/controllers/itemDetails/index.js | 6 +++--- src/scripts/autoBackdrops.js | 10 +++++----- 6 files changed, 15 insertions(+), 22 deletions(-) diff --git a/src/components/appRouter.js b/src/components/appRouter.js index 30553ea9b..b834f1e83 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, { setBackdropTransparency } 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() diff --git a/src/components/backdrop/backdrop.js b/src/components/backdrop/backdrop.js index c27f03aae..0c84defc8 100644 --- a/src/components/backdrop/backdrop.js +++ b/src/components/backdrop/backdrop.js @@ -349,10 +349,3 @@ export function setBackdropTransparency(level) { backdropElem.classList.remove('hide'); } } - -export default { - setBackdrops: setBackdrops, - setBackdrop: setBackdrop, - clearBackdrop: clearBackdrop, - externalBackdrop: externalBackdrop -}; diff --git a/src/components/remotecontrol/remotecontrol.js b/src/components/remotecontrol/remotecontrol.js index 53b61949e..fdb15b272 100644 --- a/src/components/remotecontrol/remotecontrol.js +++ b/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 = ''; }); } else { - backdrop.clearBackdrop(); + clearBackdrop(); context.querySelector('.nowPlayingPageUserDataButtons').innerHTML = ''; } } diff --git a/src/components/tabbedview/tabbedview.js b/src/components/tabbedview/tabbedview.js index b5c54d41b..46b14ed36 100644 --- a/src/components/tabbedview/tabbedview.js +++ b/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; diff --git a/src/controllers/itemDetails/index.js b/src/controllers/itemDetails/index.js index 3f9448d5a..f814418be 100644 --- a/src/controllers/itemDetails/index.js +++ b/src/controllers/itemDetails/index.js @@ -10,7 +10,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'; @@ -514,9 +514,9 @@ function setTrailerButtonVisibility(page, item) { function renderBackdrop(item) { if (dom.getWindowSize().innerWidth >= 1000) { - backdrop.setBackdrops([item]); + setBackdrops([item]); } else { - backdrop.clearBackdrop(); + clearBackdrop(); } } diff --git a/src/scripts/autoBackdrops.js b/src/scripts/autoBackdrops.js index 02e73ff3d..2334d1690 100644 --- a/src/scripts/autoBackdrops.js +++ b/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(); } } });