feat: (preferences) migrate display settings to react components

jellyfin · Mar 25, 2024 · ce4c7ae · ce4c7ae
1 parent 0c7fdd6
commit ce4c7ae
Show file tree

Hide file tree

Showing 11 changed files with 443 additions and 7 deletions.
diff --git a/src/apps/experimental/routes/asyncRoutes/user.ts b/src/apps/experimental/routes/asyncRoutes/user.ts
@@ -8,5 +8,6 @@ export const ASYNC_USER_ROUTES: AsyncRoute[] = [
     { path: 'movies.html', page: 'movies', type: AsyncRouteType.Experimental },
     { path: 'tv.html', page: 'shows', type: AsyncRouteType.Experimental },
     { path: 'music.html', page: 'music', type: AsyncRouteType.Experimental },
-    { path: 'livetv.html', page: 'livetv', type: AsyncRouteType.Experimental }
+    { path: 'livetv.html', page: 'livetv', type: AsyncRouteType.Experimental },
+    { path: 'mypreferencesdisplay.html', page: 'user/display', type: AsyncRouteType.Experimental }
 ];
diff --git a/src/apps/experimental/routes/legacyRoutes/user.ts b/src/apps/experimental/routes/legacyRoutes/user.ts
@@ -25,12 +25,6 @@ export const LEGACY_USER_ROUTES: LegacyRoute[] = [
             controller: 'user/controls/index',
             view: 'user/controls/index.html'
         }
-    }, {
-        path: 'mypreferencesdisplay.html',
-        pageProps: {
-            controller: 'user/display/index',
-            view: 'user/display/index.html'
-        }
     }, {
         path: 'mypreferenceshome.html',
         pageProps: {

diff --git a/src/apps/experimental/routes/user/display/DisplayPreferences.tsx b/src/apps/experimental/routes/user/display/DisplayPreferences.tsx
@@ -0,0 +1,95 @@
+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 MenuItem from '@mui/material/MenuItem';
+import Select 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 globalize from 'scripts/globalize';
+
+export function DisplayPreferences() {
+    return (
+        <Stack spacing={2}>
+            <Typography variant='h2'>{globalize.translate('Display')}</Typography>
+
+            <FormControl fullWidth>
+                <Select
+                    aria-describedby='display-settings-layout-description'
+                    label={globalize.translate('LabelDisplayMode')}
+                >
+                    <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 label={globalize.translate('LabelTheme')}>
+                </Select>
+            </FormControl>
+
+            <FormControl fullWidth>
+                <FormControlLabel
+                    aria-describedby='display-settings-disable-css-description'
+                    control={<Checkbox />}
+                    label={globalize.translate('DisableCustomCss')}
+                />
+                <FormHelperText id='display-settings-disable-css-description'>
+                    {globalize.translate('LabelDisableCustomCss')}
+                </FormHelperText>
+            </FormControl>
+
+            <FormControl fullWidth>
+                <TextField
+                    aria-describedby='display-settings-custom-css-description'
+                    label={globalize.translate('LabelCustomCss')}
+                    multiline
+                />
+                <FormHelperText id='display-settings-custom-css-description'>
+                    {globalize.translate('LabelLocalCustomCss')}
+                </FormHelperText>
+            </FormControl>
+
+            {/* TODO: There are some admin-only options here */}
+            {/* Server Dashboard Theme */}
+
+            <FormControl fullWidth>
+                <Select label={globalize.translate('LabelScreensaver')}></Select>
+            </FormControl>
+
+            {/* TODO: There are some extra options here related to screensavers */}
+
+            <FormControl fullWidth>
+                <FormControlLabel
+                    aria-describedby='display-settings-faster-animations-description'
+                    control={<Checkbox />}
+                    label={globalize.translate('EnableFasterAnimations')}
+                />
+                <FormHelperText id='display-settings-faster-animations-description'>
+                    {globalize.translate('EnableFasterAnimationsHelp')}
+                </FormHelperText>
+            </FormControl>
+
+            <FormControl fullWidth>
+                <FormControlLabel
+                    aria-describedby='display-settings-blurhash-description'
+                    control={<Checkbox />}
+                    label={globalize.translate('EnableBlurHash')}
+                />
+                <FormHelperText id='display-settings-blurhash-description'>
+                    {globalize.translate('EnableBlurHashHelp')}
+                </FormHelperText>
+            </FormControl>
+        </Stack>
+    );
+}
diff --git a/src/apps/experimental/routes/user/display/ItemDetailPreferences.tsx b/src/apps/experimental/routes/user/display/ItemDetailPreferences.tsx
@@ -0,0 +1,28 @@
+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 Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
+import React from 'react';
+
+import globalize from 'scripts/globalize';
+
+export function ItemDetailPreferences() {
+    return (
+        <Stack spacing={3}>
+            <Typography variant='h2'>{globalize.translate('ItemDetails')}</Typography>
+
+            <FormControl fullWidth>
+                <FormControlLabel
+                    aria-describedby='display-settings-item-details-banner-description'
+                    control={<Checkbox />}
+                    label={globalize.translate('EnableDetailsBanner')}
+                />
+                <FormHelperText id='display-settings-item-details-banner-description'>
+                    {globalize.translate('EnableDetailsBannerHelp')}
+                </FormHelperText>
+            </FormControl>
+        </Stack>
+    );
+}
diff --git a/src/apps/experimental/routes/user/display/LibraryPreferences.tsx b/src/apps/experimental/routes/user/display/LibraryPreferences.tsx
@@ -0,0 +1,81 @@
+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 Stack from '@mui/material/Stack';
+import TextField from '@mui/material/TextField';
+import Typography from '@mui/material/Typography';
+import React from 'react';
+
+import globalize from 'scripts/globalize';
+
+export function LibraryPreferences() {
+    return (
+        <Stack spacing={3}>
+            <Typography variant='h2'>{globalize.translate('HeaderLibraries')}</Typography>
+
+            <FormControl fullWidth>
+                <TextField
+                    aria-describedby='display-settings-lib-pagesize-description'
+                    inputProps={{
+                        type: 'number',
+                        inputMode: 'numeric',
+                        max: '1000',
+                        min: '0',
+                        pattern: '[0-9]',
+                        required: true,
+                        step: '1'
+                    }}
+                    label={globalize.translate('LabelLibraryPageSize')}
+                />
+                <FormHelperText id='display-settings-lib-pagesize-description'>
+                    {globalize.translate('LabelLibraryPageSizeHelp')}
+                </FormHelperText>
+            </FormControl>
+
+            <FormControl fullWidth>
+                <FormControlLabel
+                    aria-describedby='display-settings-lib-backdrops-description'
+                    control={<Checkbox />}
+                    label={globalize.translate('Backdrops')}
+                />
+                <FormHelperText id='display-settings-lib-backdrops-description'>
+                    {globalize.translate('EnableBackdropsHelp')}
+                </FormHelperText>
+            </FormControl>
+
+            <FormControl fullWidth>
+                <FormControlLabel
+                    aria-describedby='display-settings-lib-theme-songs-description'
+                    control={<Checkbox />}
+                    label={globalize.translate('ThemeSongs')}
+                />
+                <FormHelperText id='display-settings-lib-theme-songs-description'>
+                    {globalize.translate('EnableThemeSongsHelp')}
+                </FormHelperText>
+            </FormControl>
+
+            <FormControl fullWidth>
+                <FormControlLabel
+                    aria-describedby='display-settings-lib-theme-videos-description'
+                    control={<Checkbox />}
+                    label={globalize.translate('ThemeVideos')}
+                />
+                <FormHelperText id='display-settings-lib-theme-videos-description'>
+                    {globalize.translate('EnableThemeVideosHelp')}
+                </FormHelperText>
+            </FormControl>
+
+            <FormControl fullWidth>
+                <FormControlLabel
+                    aria-describedby='display-settings-show-missing-episodes-description'
+                    control={<Checkbox />}
+                    label={globalize.translate('DisplayMissingEpisodesWithinSeasons')}
+                />
+                <FormHelperText id='display-settings-show-missing-episodes-description'>
+                    {globalize.translate('DisplayMissingEpisodesWithinSeasonsHelp')}
+                </FormHelperText>
+            </FormControl>
+        </Stack>
+    );
+}
diff --git a/src/apps/experimental/routes/user/display/LocalizationPreferences.tsx b/src/apps/experimental/routes/user/display/LocalizationPreferences.tsx
@@ -0,0 +1,48 @@
+import FormControl from '@mui/material/FormControl';
+import FormHelperText from '@mui/material/FormHelperText';
+import Link from '@mui/material/Link';
+import MenuItem from '@mui/material/MenuItem';
+import Select from '@mui/material/Select';
+import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
+import React from 'react';
+
+import globalize from 'scripts/globalize';
+import { DATE_LOCALE_OPTIONS, LANGUAGE_OPTIONS } from './constants';
+
+export function LocalizationPreferences() {
+    return (
+        <Stack spacing={3}>
+            <Typography variant='h2'>{globalize.translate('Localization')}</Typography>
+
+            <FormControl fullWidth>
+                <Select
+                    aria-describedby='display-settings-language-description'
+                    label={globalize.translate('LabelDisplayLanguage')}
+                >
+                    { ...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'
+                    >
+                        {globalize.translate('LearnHowYouCanContribute')}
+                    </Link>
+                </FormHelperText>
+            </FormControl>
+
+            <FormControl fullWidth>
+                <Select label={globalize.translate('LabelDateTimeLocale')}>
+                    {...DATE_LOCALE_OPTIONS.map(({ value, label }) => (
+                        <MenuItem key={value} value={value}>{label}</MenuItem>
+                    ))}
+                </Select>
+            </FormControl>
+        </Stack>
+    );
+}
diff --git a/src/apps/experimental/routes/user/display/NextUpPreferences.tsx b/src/apps/experimental/routes/user/display/NextUpPreferences.tsx
@@ -0,0 +1,59 @@
+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 Stack from '@mui/material/Stack';
+import TextField from '@mui/material/TextField';
+import Typography from '@mui/material/Typography';
+import React from 'react';
+
+import globalize from 'scripts/globalize';
+
+export function NextUpPreferences() {
+    return (
+        <Stack spacing={3}>
+            <Typography variant='h2'>{globalize.translate('NextUp')}</Typography>
+
+            <FormControl fullWidth>
+                <TextField
+                    aria-describedby='display-settings-max-days-next-up-description'
+                    inputProps={{
+                        type: 'number',
+                        inputMode: 'numeric',
+                        max: '1000',
+                        min: '0',
+                        pattern: '[0-9]',
+                        required: true,
+                        step: '1'
+                    }}
+                    label={globalize.translate('LabelMaxDaysForNextUp')}
+                />
+                <FormHelperText id='display-settings-max-days-next-up-description'>
+                    {globalize.translate('LabelMaxDaysForNextUpHelp')}
+                </FormHelperText>
+            </FormControl>
+
+            <FormControl fullWidth>
+                <FormControlLabel
+                    aria-describedby='display-settings-next-up-rewatching-description'
+                    control={<Checkbox />}
+                    label={globalize.translate('EnableRewatchingNextUp')}
+                />
+                <FormHelperText id='display-settings-next-up-rewatching-description'>
+                    {globalize.translate('EnableRewatchingNextUpHelp')}
+                </FormHelperText>
+            </FormControl>
+
+            <FormControl fullWidth>
+                <FormControlLabel
+                    aria-describedby='display-settings-next-up-images-description'
+                    control={<Checkbox />}
+                    label={globalize.translate('UseEpisodeImagesInNextUp')}
+                />
+                <FormHelperText id='display-settings-next-up-images-description'>
+                    {globalize.translate('UseEpisodeImagesInNextUpHelp')}
+                </FormHelperText>
+            </FormControl>
+        </Stack>
+    );
+}