From 9575977584da3f73ee10f543c08faf0f922ea891 Mon Sep 17 00:00:00 2001 From: ItsAllAboutTheCode <52703+ItsAllAboutTheCode@users.noreply.github.com> Date: Mon, 17 Jun 2024 01:04:40 -0500 Subject: [PATCH 1/6] Added support to shuffle theme media playback The ThemeMusicPlayer has been updated to support the "SortName" and "Random" Sort By options to allow sorting theme media for playback by either the sorted name or at random depending on the number of items. The "Ascending" and "Descending" Sort Order options were also added, which adds support to playback the theme media in reverse order of the sorted name. This is only supported for the "SortName" option Updated the Display settings for both the current and experimental display mode to add the "Theme media sort by" and "Theme media sort order" drop-down which allows users to modify the ThemeMusicPlayer sort options. The Display Settings are only shown if either the "Theme songs" or "Theme videos" checkboxes are checked. This is the implementation for the feature request located https://features.jellyfin.org/posts/2740/select-audio-from-the-theme-music-folder-at-random --- CONTRIBUTORS.md | 1 + .../preferences/hooks/useDisplaySettings.ts | 4 +++ .../types/displaySettingsValues.ts | 2 ++ .../displaySettings/displaySettings.js | 29 ++++++++++++++++++- .../displaySettings.template.html | 18 ++++++++++++ src/components/themeMediaPlayer.js | 21 +++++++++++++- src/scripts/settings/userSettings.js | 29 +++++++++++++++++++ src/strings/en-us.json | 5 ++++ 8 files changed, 107 insertions(+), 2 deletions(-) diff --git a/CONTRIBUTORS.md b/CONTRIBUTORS.md index f73bfe3d4e1..c79fa08ca97 100644 --- a/CONTRIBUTORS.md +++ b/CONTRIBUTORS.md @@ -94,6 +94,7 @@ - [iFraan](https://github.com/iFraan) - [Ali](https://github.com/bu3alwa) - [K. Kyle Puchkov](https://github.com/kepper104) +- [ItsAllAboutTheCode](https://github.com/ItsAllAboutTheCode) ## Emby Contributors diff --git a/src/apps/experimental/features/preferences/hooks/useDisplaySettings.ts b/src/apps/experimental/features/preferences/hooks/useDisplaySettings.ts index 09e52b26863..f1660f97649 100644 --- a/src/apps/experimental/features/preferences/hooks/useDisplaySettings.ts +++ b/src/apps/experimental/features/preferences/hooks/useDisplaySettings.ts @@ -96,6 +96,8 @@ async function loadDisplaySettings({ maxDaysForNextUp: settings.maxDaysForNextUp(), screensaver: settings.screensaver() || 'none', screensaverInterval: settings.backdropScreensaverInterval(), + libraryThemeMediaSortBy: settings.themeMediaSortBy(), + libraryThemeMediaSortOrder: settings.themeMediaSortOrder(), theme: settings.theme() }; @@ -138,6 +140,8 @@ async function saveDisplaySettings({ userSettings.libraryPageSize(newDisplaySettings.libraryPageSize); userSettings.maxDaysForNextUp(newDisplaySettings.maxDaysForNextUp); userSettings.screensaver(normalizeValue(newDisplaySettings.screensaver)); + userSettings.themeMediaSortBy(newDisplaySettings.libraryThemeMediaSortBy); + userSettings.themeMediaSortOrder(newDisplaySettings.libraryThemeMediaSortOrder); userSettings.backdropScreensaverInterval(newDisplaySettings.screensaverInterval); userSettings.theme(newDisplaySettings.theme); diff --git a/src/apps/experimental/features/preferences/types/displaySettingsValues.ts b/src/apps/experimental/features/preferences/types/displaySettingsValues.ts index a5e08d2dd99..c97a315d655 100644 --- a/src/apps/experimental/features/preferences/types/displaySettingsValues.ts +++ b/src/apps/experimental/features/preferences/types/displaySettingsValues.ts @@ -18,5 +18,7 @@ export interface DisplaySettingsValues { maxDaysForNextUp: number; screensaver: string; screensaverInterval: number; + libraryThemeMediaSortBy: string; + libraryThemeMediaSortOrder: string; theme: string; } diff --git a/src/components/displaySettings/displaySettings.js b/src/components/displaySettings/displaySettings.js index 354ef54d099..77471acbd41 100644 --- a/src/components/displaySettings/displaySettings.js +++ b/src/components/displaySettings/displaySettings.js @@ -114,8 +114,16 @@ function loadForm(context, user, userSettings) { context.querySelector('.chkDisplayMissingEpisodes').checked = user.Configuration.DisplayMissingEpisodes || false; - context.querySelector('#chkThemeSong').checked = userSettings.enableThemeSongs(); + const themeSongSelector = context.querySelector('#chkThemeSong'); + themeSongSelector.checked = userSettings.enableThemeSongs(); context.querySelector('#chkThemeVideo').checked = userSettings.enableThemeVideos(); + + context.querySelector('#selectThemeMediaSortBy').value = userSettings.themeMediaSortBy(); + context.querySelector('#selectThemeMediaSortOrder').value = userSettings.themeMediaSortOrder(); + + // Trigger initial change event to update the Theme Sort By / Theme Sort Order visibility + themeSongSelector.dispatchEvent(new CustomEvent('change', {})); + context.querySelector('#chkFadein').checked = userSettings.enableFastFadein(); context.querySelector('#chkBlurhash').checked = userSettings.enableBlurhash(); context.querySelector('#chkBackdrops').checked = userSettings.enableBackdrops(); @@ -150,6 +158,8 @@ function saveUser(context, user, userSettingsInstance, apiClient) { userSettingsInstance.dateTimeLocale(context.querySelector('.selectDateTimeLocale').value); userSettingsInstance.enableThemeSongs(context.querySelector('#chkThemeSong').checked); + userSettingsInstance.themeMediaSortBy(context.querySelector('#selectThemeMediaSortBy').value); + userSettingsInstance.themeMediaSortOrder(context.querySelector('#selectThemeMediaSortOrder').value); userSettingsInstance.enableThemeVideos(context.querySelector('#chkThemeVideo').checked); userSettingsInstance.theme(context.querySelector('#selectTheme').value); userSettingsInstance.dashboardTheme(context.querySelector('#selectDashboardTheme').value); @@ -216,6 +226,23 @@ function onSubmit(e) { function embed(options, self) { options.element.innerHTML = globalize.translateHtml(template, 'core'); options.element.querySelector('form').addEventListener('submit', onSubmit.bind(self)); + const updateThemeMediaSortShowState = function () { + const themeMediaElements = options.element.querySelectorAll('.themeMediaChecked'); + const themeMediaEnabled = options.element.querySelector('#chkThemeSong').checked || options.element.querySelector('#chkThemeVideo').checked; + for (const themeMediaElement of themeMediaElements) { + if (themeMediaEnabled) { + themeMediaElement.classList.remove('hide'); + } else { + themeMediaElement.classList.add('hide'); + } + } + }; + + const themeSongSelector = options.element.querySelector('#chkThemeSong'); + themeSongSelector.addEventListener('change', updateThemeMediaSortShowState); + const themeVideoSelector = options.element.querySelector('#chkThemeVideo'); + themeVideoSelector.addEventListener('change', updateThemeMediaSortShowState); + if (options.enableSaveButton) { options.element.querySelector('.btnSave').classList.remove('hide'); } diff --git a/src/components/displaySettings/displaySettings.template.html b/src/components/displaySettings/displaySettings.template.html index 1b5579b4c30..670e8ca1fd8 100644 --- a/src/components/displaySettings/displaySettings.template.html +++ b/src/components/displaySettings/displaySettings.template.html @@ -263,6 +263,24 @@

${EnableThemeVideosHelp}
+
+ +
${ThemeMediaSortByHelp}
+
${ThemeMediaFolderUsageHelp}
+
+ +
+ +
${ThemeMediaSortOrderHelp}
+
${ThemeMediaFolderUsageHelp}
+
+
+ + + + diff --git a/src/components/displaySettings/displaySettings.js b/src/components/displaySettings/displaySettings.js index bca02736062..8978934c09b 100644 --- a/src/components/displaySettings/displaySettings.js +++ b/src/components/displaySettings/displaySettings.js @@ -67,6 +67,11 @@ function showOrHideMissingEpisodesField(context) { context.querySelector('.fldDisplayMissingEpisodes').classList.remove('hide'); } +function showBackgroundPlaybackSection(context, user) { + context.querySelector('.lnkBackgroundPlaybackPreferences').setAttribute('href', '#/mypreferencesbackgroundplayback.html?userId=' + user.Id); +} + + function loadForm(context, user, userSettings) { if (appHost.supports('displaylanguage')) { context.querySelector('.languageSection').classList.remove('hide'); @@ -114,19 +119,8 @@ function loadForm(context, user, userSettings) { context.querySelector('.chkDisplayMissingEpisodes').checked = user.Configuration.DisplayMissingEpisodes || false; - const themeSongSelector = context.querySelector('#chkThemeSong'); - themeSongSelector.checked = userSettings.enableThemeSongs(); - context.querySelector('#chkThemeVideo').checked = userSettings.enableThemeVideos(); - - context.querySelector('#selectThemeMediaSortBy').value = userSettings.themeMediaSortBy(); - context.querySelector('#selectThemeMediaSortOrder').value = userSettings.themeMediaSortOrder(); - - // Trigger initial change event to update the Theme Sort By / Theme Sort Order visibility - themeSongSelector.dispatchEvent(new CustomEvent('change', {})); - context.querySelector('#chkFadein').checked = userSettings.enableFastFadein(); context.querySelector('#chkBlurhash').checked = userSettings.enableBlurhash(); - context.querySelector('#chkBackdrops').checked = userSettings.enableBackdrops(); context.querySelector('#chkDetailsBanner').checked = userSettings.detailsBanner(); context.querySelector('#chkDisableCustomCss').checked = userSettings.disableCustomCss(); @@ -145,6 +139,8 @@ function loadForm(context, user, userSettings) { showOrHideMissingEpisodesField(context); + showBackgroundPlaybackSection(context, user); + loading.hide(); } @@ -157,10 +153,6 @@ function saveUser(context, user, userSettingsInstance, apiClient) { userSettingsInstance.dateTimeLocale(context.querySelector('.selectDateTimeLocale').value); - userSettingsInstance.enableThemeSongs(context.querySelector('#chkThemeSong').checked); - userSettingsInstance.themeMediaSortBy(context.querySelector('#selectThemeMediaSortBy').value); - userSettingsInstance.themeMediaSortOrder(context.querySelector('#selectThemeMediaSortOrder').value); - userSettingsInstance.enableThemeVideos(context.querySelector('#chkThemeVideo').checked); userSettingsInstance.theme(context.querySelector('#selectTheme').value); userSettingsInstance.dashboardTheme(context.querySelector('#selectDashboardTheme').value); userSettingsInstance.screensaver(context.querySelector('.selectScreensaver').value); @@ -175,7 +167,6 @@ function saveUser(context, user, userSettingsInstance, apiClient) { userSettingsInstance.enableFastFadein(context.querySelector('#chkFadein').checked); userSettingsInstance.enableBlurhash(context.querySelector('#chkBlurhash').checked); - userSettingsInstance.enableBackdrops(context.querySelector('#chkBackdrops').checked); userSettingsInstance.detailsBanner(context.querySelector('#chkDetailsBanner').checked); userSettingsInstance.disableCustomCss(context.querySelector('#chkDisableCustomCss').checked); @@ -226,19 +217,6 @@ function onSubmit(e) { function embed(options, self) { options.element.innerHTML = globalize.translateHtml(template, 'core'); options.element.querySelector('form').addEventListener('submit', onSubmit.bind(self)); - const updateThemeMediaSortShowState = function () { - const themeMediaElements = options.element.querySelectorAll('.themeMediaChecked'); - const themeMediaEnabled = options.element.querySelector('#chkThemeSong').checked || options.element.querySelector('#chkThemeVideo').checked; - for (const themeMediaElement of themeMediaElements) { - themeMediaElement.classList.toggle('hide', !themeMediaEnabled); - } - }; - - const themeSongSelector = options.element.querySelector('#chkThemeSong'); - themeSongSelector.addEventListener('change', updateThemeMediaSortShowState); - const themeVideoSelector = options.element.querySelector('#chkThemeVideo'); - themeVideoSelector.addEventListener('change', updateThemeMediaSortShowState); - if (options.enableSaveButton) { options.element.querySelector('.btnSave').classList.remove('hide'); } diff --git a/src/components/displaySettings/displaySettings.template.html b/src/components/displaySettings/displaySettings.template.html index 4f4ff499d79..41a30d0c3ee 100644 --- a/src/components/displaySettings/displaySettings.template.html +++ b/src/components/displaySettings/displaySettings.template.html @@ -239,56 +239,6 @@

${LabelLibraryPageSizeHelp}
-
- -
${EnableBackdropsHelp}
-
- -
- -
${EnableThemeSongsHelp}
-
- -
- -
${EnableThemeVideosHelp}
-
- -
- -
${ThemeMediaSortByHelp}
-
${ThemeMediaFolderUsageHelp}
-
- -
- -
${ThemeMediaSortOrderHelp}
-
${ThemeMediaFolderUsageHelp}
-
-
+

+ +
+ +
+
${BackgroundPlayback}
+
+
+ +

+ + diff --git a/src/controllers/user/backgroundPlayback/index.html b/src/controllers/user/backgroundPlayback/index.html new file mode 100644 index 00000000000..c0a01c6fcb4 --- /dev/null +++ b/src/controllers/user/backgroundPlayback/index.html @@ -0,0 +1,4 @@ +
+
+
+
diff --git a/src/controllers/user/backgroundPlayback/index.js b/src/controllers/user/backgroundPlayback/index.js new file mode 100644 index 00000000000..c8e50bae2b1 --- /dev/null +++ b/src/controllers/user/backgroundPlayback/index.js @@ -0,0 +1,39 @@ +import BackgroundPlaybackSettings from "../../../components/backgroundPlaybackSettings/backgroundPlaybackSettings"; +import * as userSettings from "../../../scripts/settings/userSettings"; +import autoFocuser from "../../../components/autoFocuser"; + +// Shortcuts +const UserSettings = userSettings.UserSettings; + +export default function (view, params) { + let settingsInstance; + + const userId = params.userId || ApiClient.getCurrentUserId(); + const currentSettings = + userId === ApiClient.getCurrentUserId() + ? userSettings + : new UserSettings(); + + view.addEventListener("viewshow", function () { + if (settingsInstance) { + settingsInstance.loadData(); + } else { + settingsInstance = new BackgroundPlaybackSettings({ + serverId: ApiClient.serverId(), + userId: userId, + element: view.querySelector(".settingsContainer"), + userSettings: currentSettings, + enableSaveButton: true, + enableSaveConfirmation: true, + autoFocus: autoFocuser.isEnabled(), + }); + } + }); + + view.addEventListener("viewdestroy", function () { + if (settingsInstance) { + settingsInstance.destroy(); + settingsInstance = null; + } + }); +} diff --git a/src/elements/emby-select/emby-select.js b/src/elements/emby-select/emby-select.js index 2ed9e7c89bb..a0b4b76fb0a 100644 --- a/src/elements/emby-select/emby-select.js +++ b/src/elements/emby-select/emby-select.js @@ -134,7 +134,7 @@ EmbySelectPrototype.attachedCallback = function () { this.parentNode?.insertBefore(label, this); if (this.classList.contains('emby-select-withcolor')) { - this.parentNode?.insertAdjacentHTML('beforeend', '
0
'); + this.insertAdjacentHTML('afterend', '
0
'); } }; diff --git a/src/elements/emby-select/emby-select.scss b/src/elements/emby-select/emby-select.scss index d909e8af61f..6d019002e94 100644 --- a/src/elements/emby-select/emby-select.scss +++ b/src/elements/emby-select/emby-select.scss @@ -80,6 +80,10 @@ align-items: center; } +.selectContainer-inline.selectContainerWithButton { + position: relative; +} + .selectLabel { display: block; margin-bottom: 0.25em; @@ -121,6 +125,10 @@ font-size: 90%; } +.selectContainerWithButton > .selectArrowContainer { + visibility: hidden; +} + .emby-select[disabled] + .selectArrowContainer { display: none; } diff --git a/src/strings/en-us.json b/src/strings/en-us.json index c2f99fb11be..008ef6d4c87 100644 --- a/src/strings/en-us.json +++ b/src/strings/en-us.json @@ -75,6 +75,7 @@ "Backdrop": "Backdrop", "Backdrops": "Backdrops", "BackdropScreensaver": "Backdrop Screensaver", + "BackgroundPlayback": "Background Playback", "Banner": "Banner", "BirthDateValue": "Born: {0}", "BirthLocation": "Birth location", @@ -1559,10 +1560,11 @@ "TellUsAboutYourself": "Tell us about yourself", "TextSent": "Text sent.", "ThemeMediaFolderUsageHelp": "Used for \"backdrop\" folder (for theme videos) and \"theme-music\" folder (for theme music).", - "ThemeMediaSortBy": "Theme media sort by", + "ThemeMediaSortBy": "Sort by", "ThemeMediaSortByHelp": "Sort theme media using sort by criteria.", - "ThemeMediaSortOrder": "Theme media sort order", + "ThemeMediaSortOrder": "Order queue by:", "ThemeMediaSortOrderHelp": "Sort theme media using sort order criteria.", + "ThemeMediaPlayInBackgroundHelp": "Play theme media in background", "ThemeSongs": "Theme songs", "ThemeVideos": "Theme videos", "TheseSettingsAffectSubtitlesOnThisDevice": "These settings affect subtitles on this device", From 5a3808940ad77af78cd189722fe2082e2c02fb80 Mon Sep 17 00:00:00 2001 From: ItsAllAboutTheCode <52703+ItsAllAboutTheCode@users.noreply.github.com> Date: Sun, 15 Sep 2024 00:19:32 -0500 Subject: [PATCH 6/6] Removed unused import and variables to address eslint Also addressed other eslint changes such as changing single quotes to double quotes. --- .../BackgroundPlaybackPreferences.scss | 1 - .../BackgroundPlaybackPreferences.tsx | 163 +++++++++--------- .../backgroundPlaybackSettings.js | 74 ++++---- .../displaySettings/displaySettings.js | 1 - .../user/backgroundPlayback/index.js | 20 +-- 5 files changed, 124 insertions(+), 135 deletions(-) diff --git a/src/apps/experimental/features/preferences/components/BackgroundPlaybackPreferences.scss b/src/apps/experimental/features/preferences/components/BackgroundPlaybackPreferences.scss index 1d59dbbb173..5945b07bdcc 100644 --- a/src/apps/experimental/features/preferences/components/BackgroundPlaybackPreferences.scss +++ b/src/apps/experimental/features/preferences/components/BackgroundPlaybackPreferences.scss @@ -43,7 +43,6 @@ position: relative; } - #background-playback-sort-by-select-dropdown { min-width: 100px; } diff --git a/src/apps/experimental/features/preferences/components/BackgroundPlaybackPreferences.tsx b/src/apps/experimental/features/preferences/components/BackgroundPlaybackPreferences.tsx index 98bcca68470..6b5ccdf3ac5 100644 --- a/src/apps/experimental/features/preferences/components/BackgroundPlaybackPreferences.tsx +++ b/src/apps/experimental/features/preferences/components/BackgroundPlaybackPreferences.tsx @@ -1,22 +1,22 @@ -import Checkbox from "@mui/material/Checkbox"; -import FormControl from "@mui/material/FormControl"; -import FormControlLabel from "@mui/material/FormControlLabel"; -import InputLabel from "@mui/material/InputLabel"; -import MenuItem from "@mui/material/MenuItem"; -import Select, { SelectChangeEvent } from "@mui/material/Select"; -import Stack from "@mui/material/Stack"; -import Typography from "@mui/material/Typography"; -import React, { useCallback } from "react"; - -import globalize from "lib/globalize"; - -import type { DisplaySettingsValues } from "../types/displaySettingsValues"; - -import { ItemSortBy, SortOrder } from "@jellyfin/sdk/lib/generated-client"; -import { Button, Dialog, IconButton, Popover, SxProps } from "@mui/material"; -import { ArrowDownward, ArrowUpward } from "@mui/icons-material"; -import classNames from "classnames"; -import "./BackgroundPlaybackPreferences.scss"; +import Checkbox from '@mui/material/Checkbox'; +import FormControl from '@mui/material/FormControl'; +import FormControlLabel from '@mui/material/FormControlLabel'; +import InputLabel from '@mui/material/InputLabel'; +import MenuItem from '@mui/material/MenuItem'; +import Select, { SelectChangeEvent } from '@mui/material/Select'; +import Stack from '@mui/material/Stack'; +import Typography from '@mui/material/Typography'; +import React, { useCallback } from 'react'; + +import globalize from 'lib/globalize'; + +import type { DisplaySettingsValues } from '../types/displaySettingsValues'; + +import { ItemSortBy, SortOrder } from '@jellyfin/sdk/lib/generated-client'; +import { Button, IconButton, Popover, SxProps } from '@mui/material'; +import { ArrowDownward, ArrowUpward } from '@mui/icons-material'; + +import './BackgroundPlaybackPreferences.scss'; interface BackgroundPlaybackPreferencesProps { onChange: (event: SelectChangeEvent | React.SyntheticEvent) => void; @@ -25,7 +25,7 @@ interface BackgroundPlaybackPreferencesProps { export function BackgroundPlaybackPreferences({ onChange, - values, + values }: Readonly) { const [anchorEl, setAnchorEl] = React.useState(null); const openPopover = Boolean(anchorEl); @@ -38,16 +38,12 @@ export function BackgroundPlaybackPreferences({ setAnchorEl(null); }, []); - const [open, setOpen] = React.useState(false); - const handleOpen = () => setOpen(true); - const handleClose = () => setOpen(false); - // Create wrapper on change callback to toggle the Sort Order state // when the Icon Button is pressed - const handleSortOrderChange = ( + const handleSortOrderChange = useCallback(( e: SelectChangeEvent | React.SyntheticEvent ) => { - let target = e.currentTarget as HTMLInputElement; + const target = e.currentTarget as HTMLInputElement; const fieldName = target.name as keyof DisplaySettingsValues; const fieldValue = target.value; @@ -73,29 +69,31 @@ export function BackgroundPlaybackPreferences({ // Delegate to the supplied onChange function for normal processing onChange(e); - }; + }, [onChange, values]); - const popoverCssClass = classNames("backgroundPlaybackPopover"); - const dialogCssClass = classNames("backgroundPlaybackDialog"); - const stackCssClass = classNames("backgroundPlaybackStack"); - const themeMediaCheckboxCssClass = classNames( - "checkboxContainer", - "checkboxContainer-withDescription" - ); + const popoverCssClass = 'backgroundPlaybackPopover'; + const stackCssClass = 'backgroundPlaybackStack'; + const themeMediaCheckboxCssClass = + 'checkboxContainer checkboxContainer-withDescription'; const themeMediaCheckboxLabelStyleProps: SxProps = { - marginLeft: 0, + marginLeft: 0 }; return ( -
- {globalize.translate('BackgroundPlayback')} - - {/**/} - {globalize.translate("ThemeMediaPlayInBackgroundHelp")} + {globalize.translate('ThemeMediaPlayInBackgroundHelp')} } - label={globalize.translate("Backdrops")} - name="enableLibraryBackdrops" + label={globalize.translate('Backdrops')} + name='enableLibraryBackdrops' sx={themeMediaCheckboxLabelStyleProps} /> } - label={globalize.translate("ThemeSongs")} - name="enableLibraryThemeSongs" + label={globalize.translate('ThemeSongs')} + name='enableLibraryThemeSongs' sx={themeMediaCheckboxLabelStyleProps} /> } - label={globalize.translate("ThemeVideos")} - name="enableLibraryThemeVideos" + label={globalize.translate('ThemeVideos')} + name='enableLibraryThemeVideos' sx={themeMediaCheckboxLabelStyleProps} /> - - - {globalize.translate("ThemeMediaSortBy")} + + + {globalize.translate('ThemeMediaSortBy')} - {values.libraryThemeMediaSortOrder == - SortOrder.Ascending && } - {values.libraryThemeMediaSortOrder == - SortOrder.Descending && } + {values.libraryThemeMediaSortOrder + == SortOrder.Ascending && } + {values.libraryThemeMediaSortOrder + == SortOrder.Descending && } - {/**/}
); diff --git a/src/components/backgroundPlaybackSettings/backgroundPlaybackSettings.js b/src/components/backgroundPlaybackSettings/backgroundPlaybackSettings.js index 504ddf2a26d..dbdef3ae73d 100644 --- a/src/components/backgroundPlaybackSettings/backgroundPlaybackSettings.js +++ b/src/components/backgroundPlaybackSettings/backgroundPlaybackSettings.js @@ -1,56 +1,56 @@ -import focusManager from "../focusManager"; -import { SortOrder } from "@jellyfin/sdk/lib/generated-client"; -import globalize from "../../lib/globalize"; -import loading from "../loading/loading"; -import Events from "../../utils/events.ts"; -import "../../elements/emby-select/emby-select"; -import "../../elements/emby-checkbox/emby-checkbox"; -import "../../elements/emby-button/emby-button"; -import "../../elements/emby-textarea/emby-textarea"; -import ServerConnections from "../ServerConnections"; -import toast from "../toast/toast"; -import template from "./backgroundPlaybackSettings.template.html"; - -const ascendingArrow = ".arrow_upward"; -const descendingArrow = ".arrow_downward"; +import focusManager from '../focusManager'; +import { SortOrder } from '@jellyfin/sdk/lib/generated-client'; +import globalize from '../../lib/globalize'; +import loading from '../loading/loading'; +import Events from '../../utils/events.ts'; +import '../../elements/emby-select/emby-select'; +import '../../elements/emby-checkbox/emby-checkbox'; +import '../../elements/emby-button/emby-button'; +import '../../elements/emby-textarea/emby-textarea'; +import ServerConnections from '../ServerConnections'; +import toast from '../toast/toast'; +import template from './backgroundPlaybackSettings.template.html'; + +const ascendingArrow = '.arrow_upward'; +const descendingArrow = '.arrow_downward'; function loadForm(context, user, userSettings) { - context.querySelector("#chkBackdrops").checked = + context.querySelector('#chkBackdrops').checked = userSettings.enableBackdrops(); - context.querySelector("#chkThemeSong").checked = + context.querySelector('#chkThemeSong').checked = userSettings.enableThemeSongs(); - context.querySelector("#chkThemeVideo").checked = + context.querySelector('#chkThemeVideo').checked = userSettings.enableThemeVideos(); - context.querySelector("#selectThemeMediaSortBy").value = + context.querySelector('#selectThemeMediaSortBy').value = userSettings.themeMediaSortBy(); const sortOrder = userSettings.themeMediaSortOrder(); - context.querySelector("#selectThemeMediaSortOrder").value = sortOrder; + context.querySelector('#selectThemeMediaSortOrder').value = sortOrder; context .querySelector(ascendingArrow) - .classList.toggle("hide", sortOrder != SortOrder.Ascending); + .classList.toggle('hide', sortOrder != SortOrder.Ascending); context .querySelector(descendingArrow) - .classList.toggle("hide", sortOrder != SortOrder.Descending); + .classList.toggle('hide', sortOrder != SortOrder.Descending); loading.hide(); } function saveUser(context, user, userSettingsInstance, apiClient) { userSettingsInstance.enableBackdrops( - context.querySelector("#chkBackdrops").checked + context.querySelector('#chkBackdrops').checked ); userSettingsInstance.enableThemeSongs( - context.querySelector("#chkThemeSong").checked + context.querySelector('#chkThemeSong').checked ); userSettingsInstance.themeMediaSortBy( - context.querySelector("#selectThemeMediaSortBy").value + context.querySelector('#selectThemeMediaSortBy').value ); userSettingsInstance.themeMediaSortOrder( - context.querySelector("#selectThemeMediaSortOrder").value + context.querySelector('#selectThemeMediaSortOrder').value ); userSettingsInstance.enableThemeVideos( - context.querySelector("#chkThemeVideo").checked + context.querySelector('#chkThemeVideo').checked ); return apiClient.updateUserConfiguration(user.Id, user.Configuration); @@ -71,9 +71,9 @@ function save( () => { loading.hide(); if (enableSaveConfirmation) { - toast(globalize.translate("SettingsSaved")); + toast(globalize.translate('SettingsSaved')); } - Events.trigger(instance, "saved"); + Events.trigger(instance, 'saved'); }, () => { loading.hide(); @@ -85,7 +85,7 @@ function save( function onSubmit(e) { const eventSubmitter = e.submitter; const context = this.options.element; - if (eventSubmitter.id === "saveButton") { + if (eventSubmitter.id === 'saveButton') { const self = this; const apiClient = ServerConnections.getApiClient(self.options.serverId); const userId = self.options.userId; @@ -102,7 +102,7 @@ function onSubmit(e) { enableSaveConfirmation ); }); - } else if (eventSubmitter.id === "selectThemeMediaSortOrder") { + } else if (eventSubmitter.id === 'selectThemeMediaSortOrder') { switch (eventSubmitter.value) { case SortOrder.Ascending: eventSubmitter.value = SortOrder.Descending; @@ -116,10 +116,10 @@ function onSubmit(e) { const newSortOrder = eventSubmitter.value; context .querySelector(ascendingArrow) - .classList.toggle("hide", newSortOrder != SortOrder.Ascending); + .classList.toggle('hide', newSortOrder != SortOrder.Ascending); context .querySelector(descendingArrow) - .classList.toggle("hide", newSortOrder != SortOrder.Descending); + .classList.toggle('hide', newSortOrder != SortOrder.Descending); } // Disable default form submission @@ -130,13 +130,13 @@ function onSubmit(e) { } function embed(options, self) { - options.element.innerHTML = globalize.translateHtml(template, "core"); + options.element.innerHTML = globalize.translateHtml(template, 'core'); options.element - .querySelector("form") - .addEventListener("submit", onSubmit.bind(self)); + .querySelector('form') + .addEventListener('submit', onSubmit.bind(self)); if (options.enableSaveButton) { - options.element.querySelector(".btnSave").classList.remove("hide"); + options.element.querySelector('.btnSave').classList.remove('hide'); } self.loadData(options.autoFocus); } diff --git a/src/components/displaySettings/displaySettings.js b/src/components/displaySettings/displaySettings.js index 8978934c09b..cc83c0114b0 100644 --- a/src/components/displaySettings/displaySettings.js +++ b/src/components/displaySettings/displaySettings.js @@ -71,7 +71,6 @@ function showBackgroundPlaybackSection(context, user) { context.querySelector('.lnkBackgroundPlaybackPreferences').setAttribute('href', '#/mypreferencesbackgroundplayback.html?userId=' + user.Id); } - function loadForm(context, user, userSettings) { if (appHost.supports('displaylanguage')) { context.querySelector('.languageSection').classList.remove('hide'); diff --git a/src/controllers/user/backgroundPlayback/index.js b/src/controllers/user/backgroundPlayback/index.js index c8e50bae2b1..2e6600dead2 100644 --- a/src/controllers/user/backgroundPlayback/index.js +++ b/src/controllers/user/backgroundPlayback/index.js @@ -1,6 +1,6 @@ -import BackgroundPlaybackSettings from "../../../components/backgroundPlaybackSettings/backgroundPlaybackSettings"; -import * as userSettings from "../../../scripts/settings/userSettings"; -import autoFocuser from "../../../components/autoFocuser"; +import BackgroundPlaybackSettings from '../../../components/backgroundPlaybackSettings/backgroundPlaybackSettings'; +import * as userSettings from '../../../scripts/settings/userSettings'; +import autoFocuser from '../../../components/autoFocuser'; // Shortcuts const UserSettings = userSettings.UserSettings; @@ -10,27 +10,27 @@ export default function (view, params) { const userId = params.userId || ApiClient.getCurrentUserId(); const currentSettings = - userId === ApiClient.getCurrentUserId() - ? userSettings - : new UserSettings(); + userId === ApiClient.getCurrentUserId() ? + userSettings : + new UserSettings(); - view.addEventListener("viewshow", function () { + view.addEventListener('viewshow', function () { if (settingsInstance) { settingsInstance.loadData(); } else { settingsInstance = new BackgroundPlaybackSettings({ serverId: ApiClient.serverId(), userId: userId, - element: view.querySelector(".settingsContainer"), + element: view.querySelector('.settingsContainer'), userSettings: currentSettings, enableSaveButton: true, enableSaveConfirmation: true, - autoFocus: autoFocuser.isEnabled(), + autoFocus: autoFocuser.isEnabled() }); } }); - view.addEventListener("viewdestroy", function () { + view.addEventListener('viewdestroy', function () { if (settingsInstance) { settingsInstance.destroy(); settingsInstance = null;