feat: (preferences) hide display settings when unsupported

src/apps/experimental/routes/user/display/DisplayPreferences.tsx

@@ -2,13 +2,16 @@ import Checkbox from '@mui/material/Checkbox';
 import FormControl from '@mui/material/FormControl';
 import FormControlLabel from '@mui/material/FormControlLabel';
 import FormHelperText from '@mui/material/FormHelperText';
+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 TextField from '@mui/material/TextField';
 import Typography from '@mui/material/Typography';
-import React from 'react';
+import React, { Fragment } from 'react';
 
+import { appHost } from 'components/apphost';
+import { useApi } from 'hooks/useApi';
 import globalize from 'scripts/globalize';
 import { DisplaySettingsValues } from './types';
 import { useScreensavers } from './hooks/useScreensavers';
@@ -20,20 +23,23 @@ interface DisplayPreferencesProps {
 }
 
 export function DisplayPreferences({ onChange, values }: Readonly<DisplayPreferencesProps>) {
+    const { user } = useApi();
     const { screensavers } = useScreensavers();
     const { themes } = useServerThemes();
 
     return (
-        <Stack spacing={2}>
+        <Stack spacing={3}>
             <Typography variant='h2'>{globalize.translate('Display')}</Typography>
 
+            { appHost.supports('displaymode') && (
                 <FormControl fullWidth>
+                    <InputLabel id='display-settings-layout-label'>{globalize.translate('LabelDisplayMode')}</InputLabel>
                     <Select
                         aria-describedby='display-settings-layout-description'
                         inputProps={{
                             name: 'layout'
                         }}
-                    label={globalize.translate('LabelDisplayMode')}
+                        labelId='display-settings-layout-label'
                         onChange={onChange}
                         value={values.layout}
                     >
@@ -48,13 +54,16 @@ export function DisplayPreferences({ onChange, values }: Readonly<DisplayPrefere
                         <span>{globalize.translate('LabelPleaseRestart')}</span>
                     </FormHelperText>
                 </FormControl>
+            ) }
 
+            { themes.length > 0 && (
                 <FormControl fullWidth>
+                    <InputLabel id='display-settings-theme-label'>{globalize.translate('LabelTheme')}</InputLabel>
                     <Select
                         inputProps={{
                             name: 'theme'
                         }}
-                    label={globalize.translate('LabelTheme')}
+                        labelId='display-settings-theme-label'
                         onChange={onChange}
                         value={values.theme}
                     >
@@ -63,6 +72,7 @@ export function DisplayPreferences({ onChange, values }: Readonly<DisplayPrefere
                         ))}
                     </Select>
                 </FormControl>
+            ) }
 
             <FormControl fullWidth>
                 <FormControlLabel
@@ -84,7 +94,7 @@ export function DisplayPreferences({ onChange, values }: Readonly<DisplayPrefere
             <FormControl fullWidth>
                 <TextField
                     aria-describedby='display-settings-custom-css-description'
-                    defaultValue={values.customCss}
+                    value={values.customCss}
                     label={globalize.translate('LabelCustomCss')}
                     multiline
                     name='customCss'
@@ -95,15 +105,33 @@ export function DisplayPreferences({ onChange, values }: Readonly<DisplayPrefere
                 </FormHelperText>
             </FormControl>
 
-            {/* TODO: There are some admin-only options here */}
+            { themes.length > 0 && user?.Policy?.IsAdministrator && (
-            {/* Server Dashboard Theme */}
-
                 <FormControl fullWidth>
+                    <InputLabel id='display-settings-dashboard-theme-label'>{globalize.translate('LabelDashboardTheme')}</InputLabel>
+                    <Select
+                        inputProps={{
+                            name: 'dashboardTheme'
+                        }}
+                        labelId='display-settings-dashboard-theme-label'
+                        onChange={ onChange }
+                        value={ values.dashboardTheme }
+                    >
+                        { ...themes.map(({ id, name }) => (
+                            <MenuItem key={ id } value={ id }>{ name }</MenuItem>
+                        )) }
+                    </Select>
+                </FormControl>
+            ) }
+
+            { screensavers.length > 0 && appHost.supports('screensaver') && (
+                <Fragment>
+                    <FormControl fullWidth>
+                        <InputLabel id='display-settings-screensaver-label'>{globalize.translate('LabelScreensaver')}</InputLabel>
                         <Select
                             inputProps={{
                                 name: 'screensaver'
                             }}
-                    label={globalize.translate('LabelScreensaver')}
+                            labelId='display-settings-screensaver-label'
                             onChange={onChange}
                             value={values.screensaver}
                         >
@@ -113,7 +141,29 @@ export function DisplayPreferences({ onChange, values }: Readonly<DisplayPrefere
                         </Select>
                     </FormControl>
 
-            {/* TODO: There are some extra options here related to screensavers */}
+                    <FormControl fullWidth>
+                        <TextField
+                            aria-describedby='display-settings-screensaver-interval-description'
+                            value={values.screensaverInterval}
+                            inputProps={{
+                                inputMode: 'numeric',
+                                max: '3600',
+                                min: '1',
+                                pattern: '[0-9]',
+                                required: true,
+                                step: '1',
+                                type: 'number'
+                            }}
+                            label={globalize.translate('LabelBackdropScreensaverInterval')}
+                            name='screensaverInterval'
+                            onChange={onChange}
+                        />
+                        <FormHelperText id='display-settings-screensaver-interval-description'>
+                            {globalize.translate('LabelBackdropScreensaverIntervalHelp')}
+                        </FormHelperText>
+                    </FormControl>
+                </Fragment>
+            ) }
 
             <FormControl fullWidth>
                 <FormControlLabel

src/apps/experimental/routes/user/display/LibraryPreferences.tsx

@@ -17,7 +17,7 @@ interface LibraryPreferencesProps {
 
 export function LibraryPreferences({ onChange, values }: Readonly<LibraryPreferencesProps>) {
     return (
-        <Stack spacing={2}>
+        <Stack spacing={3}>
             <Typography variant='h2'>{globalize.translate('HeaderLibraries')}</Typography>
 
             <FormControl fullWidth>
@@ -32,7 +32,7 @@ export function LibraryPreferences({ onChange, values }: Readonly<LibraryPrefere
                         required: true,
                         step: '1'
                     }}
-                    defaultValue={values.libraryPageSize}
+                    value={values.libraryPageSize}
                     label={globalize.translate('LabelLibraryPageSize')}
                     name='libraryPageSize'
                     onChange={onChange}

src/apps/experimental/routes/user/display/LocalizationPreferences.tsx

@@ -1,5 +1,6 @@
 import FormControl from '@mui/material/FormControl';
 import FormHelperText from '@mui/material/FormHelperText';
+import InputLabel from '@mui/material/InputLabel';
 import Link from '@mui/material/Link';
 import MenuItem from '@mui/material/MenuItem';
 import Select, { SelectChangeEvent } from '@mui/material/Select';
@@ -7,6 +8,8 @@ import Stack from '@mui/material/Stack';
 import Typography from '@mui/material/Typography';
 import React from 'react';
 
+import { appHost } from 'components/apphost';
+import datetime from 'scripts/datetime';
 import globalize from 'scripts/globalize';
 import { DATE_LOCALE_OPTIONS, LANGUAGE_OPTIONS } from './constants';
 import { DisplaySettingsValues } from './types';
@@ -17,17 +20,22 @@ interface LocalizationPreferencesProps {
 }
 
 export function LocalizationPreferences({ onChange, values }: Readonly<LocalizationPreferencesProps>) {
+    if (!appHost.supports('displaylanguage') && !datetime.supportsLocalization()) {
+        return null;
+    }
     return (
-        <Stack spacing={2}>
+        <Stack spacing={3}>
             <Typography variant='h2'>{globalize.translate('Localization')}</Typography>
 
+            { appHost.supports('displaylanguage') && (
                 <FormControl fullWidth>
+                    <InputLabel id='display-settings-language-label'>{globalize.translate('LabelDisplayLanguage')}</InputLabel>
                     <Select
                         aria-describedby='display-settings-language-description'
                         inputProps={{
                             name: 'language'
                         }}
-                    label={globalize.translate('LabelDisplayLanguage')}
+                        labelId='display-settings-language-label'
                         onChange={onChange}
                         value={values.language}
                     >
@@ -37,6 +45,7 @@ export function LocalizationPreferences({ onChange, values }: Readonly<Localizat
                     </Select>
                     <FormHelperText component={Stack} id='display-settings-language-description'>
                         <span>{globalize.translate('LabelDisplayLanguageHelp')}</span>
+                        { appHost.supports('externallinks') && (
                             <Link
                                 href='https://github.com/jellyfin/jellyfin'
                                 rel='noopener noreferrer'
@@ -44,15 +53,19 @@ export function LocalizationPreferences({ onChange, values }: Readonly<Localizat
                             >
                                 {globalize.translate('LearnHowYouCanContribute')}
                             </Link>
+                        ) }
                     </FormHelperText>
                 </FormControl>
+            ) }
 
+            { datetime.supportsLocalization() && (
                 <FormControl fullWidth>
+                    <InputLabel id='display-settings-locale-label'>{globalize.translate('LabelDateTimeLocale')}</InputLabel>
                     <Select
                         inputProps={{
                             name: 'dateTimeLocale'
                         }}
-                    label={globalize.translate('LabelDateTimeLocale')}
+                        labelId='display-settings-locale-label'
                         onChange={onChange}
                         value={values.dateTimeLocale}
                     >
@@ -61,6 +74,7 @@ export function LocalizationPreferences({ onChange, values }: Readonly<Localizat
                         ))}
                     </Select>
                 </FormControl>
+            ) }
         </Stack>
     );
 }

src/apps/experimental/routes/user/display/NextUpPreferences.tsx

@@ -17,13 +17,13 @@ interface NextUpPreferencesProps {
 
 export function NextUpPreferences({ onChange, values }: Readonly<NextUpPreferencesProps>) {
     return (
-        <Stack spacing={2}>
+        <Stack spacing={3}>
             <Typography variant='h2'>{globalize.translate('NextUp')}</Typography>
 
             <FormControl fullWidth>
                 <TextField
                     aria-describedby='display-settings-max-days-next-up-description'
-                    defaultValue={values.maxDaysForNextUp}
+                    value={values.maxDaysForNextUp}
                     inputProps={{
                         type: 'number',
                         inputMode: 'numeric',

src/apps/experimental/routes/user/display/index.tsx

@@ -31,7 +31,7 @@ export default function UserDisplayPreferences() {
     const handleFieldChange = useCallback((e: SelectChangeEvent | React.SyntheticEvent) => {
         const target = e.target as HTMLInputElement;
         const fieldName = target.name as keyof DisplaySettingsValues;
-        const fieldValue = target.checked ?? target.value;
+        const fieldValue = target.type === 'checkbox' ? target.checked : target.value;
 
         if (values?.[fieldName] !== fieldValue) {
             updateField({