diff --git a/src/apps/experimental/features/preferences/components/BackgroundPlaybackPreferences.scss b/src/apps/experimental/features/preferences/components/BackgroundPlaybackPreferences.scss index 1d59dbbb1730..5945b07bdcc6 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 98bcca684706..6b5ccdf3ac59 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 504ddf2a26da..dbdef3ae73df 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 8978934c09bd..cc83c0114b05 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 c8e50bae2b1f..2e6600dead2d 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;