mirrors/jellyfin-web
1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web synced 2025-03-30 19:56:21 +00:00
Code Activity

Migrate libraries display to React

Browse source
This commit is contained in:
viown 2025-02-25 15:39:17 +03:00
parent 577e972564
commit 0b47abc009
8 changed files with 197 additions and 123 deletions
Download patch file Download diff file Expand all files Collapse all files

57
src/apps/dashboard/controllers/librarydisplay.html
View file

@ -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>

52
src/apps/dashboard/controllers/librarydisplay.js
View file

@ -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');
}
});
});
}

1
src/apps/dashboard/routes/_asyncRoutes.ts
View file

@ -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 },

7
src/apps/dashboard/routes/_legacyRoutes.ts
View file

@ -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: {

166
src/apps/dashboard/routes/libraries/display.tsx Normal file
View file

@ -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';

9
src/hooks/useConfiguration.ts
View file

@ -6,12 +6,7 @@ import type { AxiosRequestConfig } from 'axios';
export const QUERY_KEY = 'Configuration';
export const fetchConfiguration = async (api?: Api, options?: AxiosRequestConfig) => {
if (!api) {
console.error('[useLogOptions] No API instance available');
return;
}
export const fetchConfiguration = async (api: Api, options?: AxiosRequestConfig) => {
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
});
};

27
src/hooks/useNamedConfiguration.ts Normal file
View file

@ -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
});
};

1
src/strings/en-us.json
View file

@ -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.",