mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
feat: (preferences) hide display settings when unsupported
This commit is contained in:
Grady Hallenbeck
parent
3dd26c7785
commit
5edcadd423
5 changed files with 163 additions and 99 deletions
|
|
@ -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,49 +23,56 @@ 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>
|
||||
|
||||
<FormControl fullWidth>
|
||||
<Select
|
||||
aria-describedby='display-settings-layout-description'
|
||||
inputProps={{
|
||||
name: 'layout'
|
||||
}}
|
||||
label={globalize.translate('LabelDisplayMode')}
|
||||
onChange={onChange}
|
||||
value={values.layout}
|
||||
>
|
||||
<MenuItem value='auto'>{globalize.translate('Auto')}</MenuItem>
|
||||
<MenuItem value='desktop'>{globalize.translate('Desktop')}</MenuItem>
|
||||
<MenuItem value='mobile'>{globalize.translate('Mobile')}</MenuItem>
|
||||
<MenuItem value='tv'>{globalize.translate('TV')}</MenuItem>
|
||||
<MenuItem value='experimental'>{globalize.translate('Experimental')}</MenuItem>
|
||||
</Select>
|
||||
<FormHelperText component={Stack} id='display-settings-layout-description'>
|
||||
<span>{globalize.translate('DisplayModeHelp')}</span>
|
||||
<span>{globalize.translate('LabelPleaseRestart')}</span>
|
||||
</FormHelperText>
|
||||
</FormControl>
|
||||
{ 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'
|
||||
}}
|
||||
labelId='display-settings-layout-label'
|
||||
onChange={onChange}
|
||||
value={values.layout}
|
||||
>
|
||||
<MenuItem value='auto'>{globalize.translate('Auto')}</MenuItem>
|
||||
<MenuItem value='desktop'>{globalize.translate('Desktop')}</MenuItem>
|
||||
<MenuItem value='mobile'>{globalize.translate('Mobile')}</MenuItem>
|
||||
<MenuItem value='tv'>{globalize.translate('TV')}</MenuItem>
|
||||
<MenuItem value='experimental'>{globalize.translate('Experimental')}</MenuItem>
|
||||
</Select>
|
||||
<FormHelperText component={Stack} id='display-settings-layout-description'>
|
||||
<span>{globalize.translate('DisplayModeHelp')}</span>
|
||||
<span>{globalize.translate('LabelPleaseRestart')}</span>
|
||||
</FormHelperText>
|
||||
</FormControl>
|
||||
) }
|
||||
|
||||
<FormControl fullWidth>
|
||||
<Select
|
||||
inputProps={{
|
||||
name: 'theme'
|
||||
}}
|
||||
label={globalize.translate('LabelTheme')}
|
||||
onChange={onChange}
|
||||
value={values.theme}
|
||||
>
|
||||
{ ...themes.map(({ id, name }) => (
|
||||
<MenuItem key={id} value={id}>{name}</MenuItem>
|
||||
))}
|
||||
</Select>
|
||||
</FormControl>
|
||||
{ themes.length > 0 && (
|
||||
<FormControl fullWidth>
|
||||
<InputLabel id='display-settings-theme-label'>{globalize.translate('LabelTheme')}</InputLabel>
|
||||
<Select
|
||||
inputProps={{
|
||||
name: 'theme'
|
||||
}}
|
||||
labelId='display-settings-theme-label'
|
||||
onChange={onChange}
|
||||
value={values.theme}
|
||||
>
|
||||
{ ...themes.map(({ id, name }) => (
|
||||
<MenuItem key={id} value={id}>{name}</MenuItem>
|
||||
))}
|
||||
</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,25 +105,65 @@ export function DisplayPreferences({ onChange, values }: Readonly<DisplayPrefere
|
|||
</FormHelperText>
|
||||
</FormControl>
|
||||
|
||||
{/* TODO: There are some admin-only options here */}
|
||||
{/* Server Dashboard Theme */}
|
||||
{ themes.length > 0 && user?.Policy?.IsAdministrator && (
|
||||
<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>
|
||||
) }
|
||||
|
||||
<FormControl fullWidth>
|
||||
<Select
|
||||
inputProps={{
|
||||
name: 'screensaver'
|
||||
}}
|
||||
label={globalize.translate('LabelScreensaver')}
|
||||
onChange={onChange}
|
||||
value={values.screensaver}
|
||||
>
|
||||
{ ...screensavers.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'
|
||||
}}
|
||||
labelId='display-settings-screensaver-label'
|
||||
onChange={onChange}
|
||||
value={values.screensaver}
|
||||
>
|
||||
{ ...screensavers.map(({ id, name }) => (
|
||||
<MenuItem key={id} value={id}>{name}</MenuItem>
|
||||
))}
|
||||
</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
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
|
|
|
|||
|
|
@ -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,50 +20,61 @@ 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>
|
||||
|
||||
<FormControl fullWidth>
|
||||
<Select
|
||||
aria-describedby='display-settings-language-description'
|
||||
inputProps={{
|
||||
name: 'language'
|
||||
}}
|
||||
label={globalize.translate('LabelDisplayLanguage')}
|
||||
onChange={onChange}
|
||||
value={values.language}
|
||||
>
|
||||
{ ...LANGUAGE_OPTIONS.map(({ value, label }) => (
|
||||
<MenuItem key={value } value={value}>{ label }</MenuItem>
|
||||
))}
|
||||
</Select>
|
||||
<FormHelperText component={Stack} id='display-settings-language-description'>
|
||||
<span>{globalize.translate('LabelDisplayLanguageHelp')}</span>
|
||||
<Link
|
||||
href='https://github.com/jellyfin/jellyfin'
|
||||
rel='noopener noreferrer'
|
||||
target='_blank'
|
||||
{ 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'
|
||||
}}
|
||||
labelId='display-settings-language-label'
|
||||
onChange={onChange}
|
||||
value={values.language}
|
||||
>
|
||||
{globalize.translate('LearnHowYouCanContribute')}
|
||||
</Link>
|
||||
</FormHelperText>
|
||||
</FormControl>
|
||||
{ ...LANGUAGE_OPTIONS.map(({ value, label }) => (
|
||||
<MenuItem key={value } value={value}>{ label }</MenuItem>
|
||||
))}
|
||||
</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'
|
||||
target='_blank'
|
||||
>
|
||||
{globalize.translate('LearnHowYouCanContribute')}
|
||||
</Link>
|
||||
) }
|
||||
</FormHelperText>
|
||||
</FormControl>
|
||||
) }
|
||||
|
||||
<FormControl fullWidth>
|
||||
<Select
|
||||
inputProps={{
|
||||
name: 'dateTimeLocale'
|
||||
}}
|
||||
label={globalize.translate('LabelDateTimeLocale')}
|
||||
onChange={onChange}
|
||||
value={values.dateTimeLocale}
|
||||
>
|
||||
{...DATE_LOCALE_OPTIONS.map(({ value, label }) => (
|
||||
<MenuItem key={value} value={value}>{label}</MenuItem>
|
||||
))}
|
||||
</Select>
|
||||
</FormControl>
|
||||
{ datetime.supportsLocalization() && (
|
||||
<FormControl fullWidth>
|
||||
<InputLabel id='display-settings-locale-label'>{globalize.translate('LabelDateTimeLocale')}</InputLabel>
|
||||
<Select
|
||||
inputProps={{
|
||||
name: 'dateTimeLocale'
|
||||
}}
|
||||
labelId='display-settings-locale-label'
|
||||
onChange={onChange}
|
||||
value={values.dateTimeLocale}
|
||||
>
|
||||
{...DATE_LOCALE_OPTIONS.map(({ value, label }) => (
|
||||
<MenuItem key={value} value={value}>{label}</MenuItem>
|
||||
))}
|
||||
</Select>
|
||||
</FormControl>
|
||||
) }
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
|
|
|
|||
|
|
@ -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({
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue