mirrors/jellyfin-web
1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web synced 2025-03-30 19:56:21 +00:00
Code Activity

Merge pull request #3560 from thornbill/refactor-transparency

Browse source 
Move backdrop transparency method to component
This commit is contained in:
Bill Thornton 2022-04-19 23:26:12 -04:00 • committed by GitHub
commit 4b7f615001
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
10 changed files with 66 additions and 49 deletions
Download patch file Download diff file Expand all files Collapse all files

34
src/components/appRouter.js
View file

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

38
src/components/backdrop/backdrop.js
View file

@ -295,9 +295,37 @@ import './backdrop.scss';
/* eslint-enable indent */
export default {
setBackdrops: setBackdrops,
setBackdrop: setBackdrop,
clearBackdrop: clearBackdrop,
externalBackdrop: externalBackdrop
/**
* @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');
}
}

6
src/components/remotecontrol/remotecontrol.js
View file

@ -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 = '';
}
}

4
src/components/tabbedview/tabbedview.js
View file

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

6
src/controllers/itemDetails/index.js
View file

@ -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();
}
}

3
src/controllers/playback/video/index.js
View file

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

5
src/plugins/htmlVideoPlayer/plugin.js
View file

@ -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();

5
src/plugins/youtubePlayer/plugin.js
View file

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

10
src/scripts/autoBackdrops.js
View file

@ -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();
}
}
});

4
src/utils/dashboard.js
View file

@ -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.