Migrate libraries display to React

src/apps/dashboard/controllers/librarydisplay.html

@@ -1,57 +0,0 @@
-<div id="libraryDisplayPage" data-role="page" class="page type-interior librarySectionPage" data-title="${Display}">
-    <div>
-        <div class="content-primary">
-            <form>
-                <div class="selectContainer">
-                    <select is="emby-select" id="selectDateAdded" data-mini="true" label="${LabelDateAddedBehavior}">
-                        <option value="0">${OptionDateAddedImportTime}</option>
-                        <option value="1">${OptionDateAddedFileTime}</option>
-                    </select>
-                    <div class="fieldDescription">${LabelDateAddedBehaviorHelp}</div>
-                </div>
-
-                <div class="checkboxContainer checkboxContainer-withDescription">
-                    <label>
-                        <input type="checkbox" is="emby-checkbox" class="chkFolderView" />
-                        <span>${OptionDisplayFolderView}</span>
-                    </label>
-                    <div class="fieldDescription checkboxFieldDescription">${OptionDisplayFolderViewHelp}</div>
-                </div>
-
-                <label class="checkboxContainer">
-                    <input type="checkbox" is="emby-checkbox" class="chkDisplaySpecialsWithinSeasons"/>
-                    <span>${LabelDisplaySpecialsWithinSeasons}</span>
-                </label>
-
-                <div class="checkboxContainer checkboxContainer-withDescription">
-                    <label>
-                        <input type="checkbox" is="emby-checkbox" class="chkGroupMoviesIntoCollections" />
-                        <span>${LabelGroupMoviesIntoCollections}</span>
-                    </label>
-                    <div class="fieldDescription checkboxFieldDescription">${LabelGroupMoviesIntoCollectionsHelp}</div>
-                </div>
-
-                <div class="checkboxContainer checkboxContainer-withDescription">
-                    <label>
-                        <input class="chkExternalContentInSuggestions" type="checkbox" is="emby-checkbox" />
-                        <span>${OptionEnableExternalContentInSuggestions}</span>
-                    </label>
-                    <div class="fieldDescription checkboxFieldDescription">${OptionEnableExternalContentInSuggestionsHelp}</div>
-                </div>
-
-                <div class="checkboxContainer checkboxContainer-withDescription fldSaveMetadataHidden hide">
-                    <label>
-                        <input type="checkbox" is="emby-checkbox" class="chkAirDays" id="chkSaveMetadataHidden" data-filter="Sunday" />
-                        <span>${OptionSaveMetadataAsHidden}</span>
-                    </label>
-                    <div class="fieldDescription checkboxFieldDescription">${OptionSaveMetadataAsHiddenHelp}</div>
-                </div>
-
-                <br/>
-                <button is="emby-button" type="submit" class="raised button-submit block">
-                    <span>${Save}</span>
-                </button>
-            </form>
-        </div>
-    </div>
-</div>

src/apps/dashboard/controllers/librarydisplay.js

@@ -1,52 +0,0 @@
-import loading from 'components/loading/loading';
-import 'elements/emby-checkbox/emby-checkbox';
-import 'elements/emby-button/emby-button';
-import Dashboard from 'utils/dashboard';
-
-export default function(view) {
-    function loadData() {
-        ApiClient.getServerConfiguration().then(function(config) {
-            view.querySelector('.chkFolderView').checked = config.EnableFolderView;
-            view.querySelector('.chkGroupMoviesIntoCollections').checked = config.EnableGroupingIntoCollections;
-            view.querySelector('.chkDisplaySpecialsWithinSeasons').checked = config.DisplaySpecialsWithinSeasons;
-            view.querySelector('.chkExternalContentInSuggestions').checked = config.EnableExternalContentInSuggestions;
-            view.querySelector('#chkSaveMetadataHidden').checked = config.SaveMetadataHidden;
-        });
-        ApiClient.getNamedConfiguration('metadata').then(function(metadata) {
-            view.querySelector('#selectDateAdded').selectedIndex = metadata.UseFileCreationTimeForDateAdded ? 1 : 0;
-        });
-    }
-
-    view.querySelector('form').addEventListener('submit', function(e) {
-        loading.show();
-        const form = this;
-        ApiClient.getServerConfiguration().then(function(config) {
-            config.EnableFolderView = form.querySelector('.chkFolderView').checked;
-            config.EnableGroupingIntoCollections = form.querySelector('.chkGroupMoviesIntoCollections').checked;
-            config.DisplaySpecialsWithinSeasons = form.querySelector('.chkDisplaySpecialsWithinSeasons').checked;
-            config.EnableExternalContentInSuggestions = form.querySelector('.chkExternalContentInSuggestions').checked;
-            config.SaveMetadataHidden = form.querySelector('#chkSaveMetadataHidden').checked;
-            ApiClient.updateServerConfiguration(config).then(Dashboard.processServerConfigurationUpdateResult);
-        });
-        ApiClient.getNamedConfiguration('metadata').then(function(config) {
-            config.UseFileCreationTimeForDateAdded = form.querySelector('#selectDateAdded').value === '1';
-            ApiClient.updateNamedConfiguration('metadata', config);
-        });
-
-        e.preventDefault();
-        loading.hide();
-        return false;
-    });
-
-    view.addEventListener('viewshow', function() {
-        loadData();
-        ApiClient.getSystemInfo().then(function(info) {
-            if (info.OperatingSystem === 'Windows') {
-                view.querySelector('.fldSaveMetadataHidden').classList.remove('hide');
-            } else {
-                view.querySelector('.fldSaveMetadataHidden').classList.add('hide');
-            }
-        });
-    });
-}
-

src/apps/dashboard/routes/_asyncRoutes.ts

@@ -6,6 +6,7 @@ export const ASYNC_ADMIN_ROUTES: AsyncRoute[] = [
     { path: 'branding', type: AppType.Dashboard },
     { path: 'devices', type: AppType.Dashboard },
     { path: 'keys', type: AppType.Dashboard },
+    { path: 'libraries/display', type: AppType.Dashboard },
     { path: 'logs', type: AppType.Dashboard },
     { path: 'playback/resume', type: AppType.Dashboard },
     { path: 'playback/streaming', type: AppType.Dashboard },

src/apps/dashboard/routes/_legacyRoutes.ts

@@ -30,13 +30,6 @@ export const LEGACY_ADMIN_ROUTES: LegacyRoute[] = [
             controller: 'library',
             view: 'library.html'
         }
-    }, {
-        path: 'libraries/display',
-        pageProps: {
-            appType: AppType.Dashboard,
-            controller: 'librarydisplay',
-            view: 'librarydisplay.html'
-        }
     }, {
         path: 'playback/transcoding',
         pageProps: {

src/apps/dashboard/routes/libraries/display.tsx

@@ -0,0 +1,166 @@
+import React from 'react';
+import Alert from '@mui/material/Alert';
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+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 Stack from '@mui/material/Stack';
+import Switch from '@mui/material/Switch';
+import TextField from '@mui/material/TextField';
+import Typography from '@mui/material/Typography';
+import Loading from 'components/loading/LoadingComponent';
+import Page from 'components/Page';
+import ServerConnections from 'components/ServerConnections';
+import { getConfigurationApi } from '@jellyfin/sdk/lib/utils/api/configuration-api';
+import { useConfiguration } from 'hooks/useConfiguration';
+import { fetchNamedConfiguration, useNamedConfiguration } from 'hooks/useNamedConfiguration';
+import globalize from 'lib/globalize';
+import { type ActionFunctionArgs, Form, useActionData, useNavigation } from 'react-router-dom';
+import { ActionData } from 'types/actionData';
+
+export const action = async ({ request }: ActionFunctionArgs) => {
+    const api = ServerConnections.getCurrentApi();
+    if (!api) throw new Error('No Api instance available');
+
+    const formData = await request.formData();
+    const data = Object.fromEntries(formData);
+
+    const { data: config } = await getConfigurationApi(api).getConfiguration();
+    const namedConfig = await fetchNamedConfiguration(api, 'metadata');
+
+    namedConfig.UseFileCreationTimeForDateAdded = data.DateAddedBehavior.toString() === '1';
+    config.EnableFolderView = data.DisplayFolderView?.toString() === 'on';
+    config.DisplaySpecialsWithinSeasons = data.DisplaySpecialsWithinSeasons?.toString() === 'on';
+    config.EnableGroupingIntoCollections = data.GroupMoviesIntoCollections?.toString() === 'on';
+    config.EnableExternalContentInSuggestions = data.EnableExternalContentInSuggestions?.toString() === 'on';
+
+    await getConfigurationApi(api)
+        .updateConfiguration({ serverConfiguration: config });
+
+    await getConfigurationApi(api)
+        .updateNamedConfiguration({ key: 'metadata', body: namedConfig });
+
+    return {
+        isSaved: true
+    };
+};
+
+export const Component = () => {
+    const {
+        data: config,
+        isPending: isConfigPending,
+        isError: isConfigError
+    } = useConfiguration();
+    const {
+        data: namedConfig,
+        isPending: isNamedConfigPending,
+        isError: isNamedConfigError
+    } = useNamedConfiguration('metadata');
+
+    const navigation = useNavigation();
+    const actionData = useActionData() as ActionData | undefined;
+    const isSubmitting = navigation.state === 'submitting';
+
+    if (isConfigPending || isNamedConfigPending) {
+        return <Loading />;
+    }
+
+    return (
+        <Page
+            id='libraryDisplayPage'
+            title={globalize.translate('Display')}
+            className='mainAnimatedPage type-interior'
+        >
+            <Box className='content-primary'>
+                <Form method='POST'>
+                    <Stack spacing={3}>
+                        {isConfigError || isNamedConfigError ? (
+                            <Alert severity='error'>{globalize.translate('DisplayLoadError')}</Alert>
+                        ) : (
+                            <>
+                                {!isSubmitting && actionData?.isSaved && (
+                                    <Alert severity='success'>
+                                        {globalize.translate('SettingsSaved')}
+                                    </Alert>
+                                )}
+                                <Typography variant='h2'>{globalize.translate('Display')}</Typography>
+                                <TextField
+                                    name={'DateAddedBehavior'}
+                                    label={globalize.translate('LabelDateAddedBehavior')}
+                                    select
+                                    defaultValue={namedConfig.UseFileCreationTimeForDateAdded ? '1' : '0'}
+                                    helperText={globalize.translate('LabelDateAddedBehaviorHelp')}
+                                >
+                                    <MenuItem value={'0'}>{globalize.translate('OptionDateAddedImportTime')}</MenuItem>
+                                    <MenuItem value={'1'}>{globalize.translate('OptionDateAddedFileTime')}</MenuItem>
+                                </TextField>
+
+                                <FormControl>
+                                    <FormControlLabel
+                                        control={
+                                            <Switch
+                                                name={'DisplayFolderView'}
+                                                defaultChecked={config.EnableFolderView}
+                                            />
+                                        }
+                                        label={globalize.translate('OptionDisplayFolderView')}
+                                    />
+                                    <FormHelperText>{globalize.translate('OptionDisplayFolderViewHelp')}</FormHelperText>
+                                </FormControl>
+
+                                <FormControl>
+                                    <FormControlLabel
+                                        control={
+                                            <Switch
+                                                name={'DisplaySpecialsWithinSeasons'}
+                                                defaultChecked={config.DisplaySpecialsWithinSeasons}
+                                            />
+                                        }
+                                        label={globalize.translate('LabelDisplaySpecialsWithinSeasons')}
+                                    />
+                                </FormControl>
+
+                                <FormControl>
+                                    <FormControlLabel
+                                        control={
+                                            <Switch
+                                                name={'GroupMoviesIntoCollections'}
+                                                defaultChecked={config.EnableGroupingIntoCollections}
+                                            />
+                                        }
+                                        label={globalize.translate('LabelGroupMoviesIntoCollections')}
+                                    />
+                                    <FormHelperText>{globalize.translate('LabelGroupMoviesIntoCollectionsHelp')}</FormHelperText>
+                                </FormControl>
+
+                                <FormControl>
+                                    <FormControlLabel
+                                        control={
+                                            <Switch
+                                                name={'EnableExternalContentInSuggestions'}
+                                                defaultChecked={config.EnableExternalContentInSuggestions}
+                                            />
+                                        }
+                                        label={globalize.translate('OptionEnableExternalContentInSuggestions')}
+                                    />
+                                    <FormHelperText>{globalize.translate('OptionEnableExternalContentInSuggestionsHelp')}</FormHelperText>
+                                </FormControl>
+
+                                <Button
+                                    type='submit'
+                                    size='large'
+                                >
+                                    {globalize.translate('Save')}
+                                </Button>
+                            </>
+                        )}
+                    </Stack>
+                </Form>
+            </Box>
+        </Page>
+    );
+};
+
+Component.displayName = 'DisplayPage';

src/hooks/useConfiguration.ts

@@ -6,12 +6,7 @@ import type { AxiosRequestConfig } from 'axios';
 
 export const QUERY_KEY = 'Configuration';
 
-export const fetchConfiguration = async (api?: Api, options?: AxiosRequestConfig) => {
+export const fetchConfiguration = async (api: Api, options?: AxiosRequestConfig) => {
-    if (!api) {
-        console.error('[useLogOptions] No API instance available');
-        return;
-    }
-
     const response = await getConfigurationApi(api).getConfiguration(options);
 
     return response.data;
@@ -22,7 +17,7 @@ export const useConfiguration = () => {
 
     return useQuery({
         queryKey: [QUERY_KEY],
-        queryFn: ({ signal }) => fetchConfiguration(api, { signal }),
+        queryFn: ({ signal }) => fetchConfiguration(api!, { signal }),
         enabled: !!api
     });
 };

src/hooks/useNamedConfiguration.ts

@@ -0,0 +1,27 @@
+import { Api } from '@jellyfin/sdk';
+import { getConfigurationApi } from '@jellyfin/sdk/lib/utils/api/configuration-api';
+import { useQuery } from '@tanstack/react-query';
+import { useApi } from 'hooks/useApi';
+import type { AxiosRequestConfig } from 'axios';
+
+export const QUERY_KEY = 'NamedConfiguration';
+
+interface NamedConfiguration {
+    [key: string]: unknown;
+}
+
+export const fetchNamedConfiguration = async (api: Api, key: string, options?: AxiosRequestConfig) => {
+    const response = await getConfigurationApi(api).getNamedConfiguration({ key }, options);
+
+    return response.data as unknown as NamedConfiguration;
+};
+
+export const useNamedConfiguration = (key: string) => {
+    const { api } = useApi();
+
+    return useQuery({
+        queryKey: [ QUERY_KEY ],
+        queryFn: ({ signal }) => fetchNamedConfiguration(api!, key, { signal }),
+        enabled: !!api
+    });
+};

src/strings/en-us.json

@@ -241,6 +241,7 @@
     "Display": "Display",
     "DisplayInMyMedia": "Display on home screen",
     "DisplayInOtherHomeScreenSections": "Display in home screen sections such as 'Recently Added Media' and 'Continue Watching'",
+    "DisplayLoadError": "An error occurred while loading display configuration data.",
     "DisplayMissingEpisodesWithinSeasons": "Display missing episodes within seasons",
     "DisplayMissingEpisodesWithinSeasonsHelp": "This must also be enabled for TV libraries in the server configuration.",
     "DisplayModeHelp": "Select the layout style you want for the interface.",