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 metadata to React

Browse source
This commit is contained in:
viown 2025-02-25 15:47:09 +03:00
parent 1693618589
commit c8d2ce4142
9 changed files with 222 additions and 145 deletions
Download patch file Download diff file Expand all files Collapse all files

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

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

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

@ -37,13 +37,6 @@ export const LEGACY_ADMIN_ROUTES: LegacyRoute[] = [
controller: 'encodingsettings',
view: 'encodingsettings.html'
}
}, {
path: 'libraries/metadata',
pageProps: {
appType: AppType.Dashboard,
controller: 'metadataImages',
view: 'metadataimages.html'
}
}, {
path: 'libraries/nfo',
pageProps: {

159
src/apps/dashboard/routes/libraries/metadata.tsx Normal file
View file

@ -0,0 +1,159 @@
import { ImageResolution } from '@jellyfin/sdk/lib/generated-client/models/image-resolution';
import { getConfigurationApi } from '@jellyfin/sdk/lib/utils/api/configuration-api';
import Alert from '@mui/material/Alert';
import Box from '@mui/material/Box';
import Button from '@mui/material/Button';
import MenuItem from '@mui/material/MenuItem';
import Stack from '@mui/material/Stack';
import TextField from '@mui/material/TextField';
import Typography from '@mui/material/Typography';
import { useCountries } from 'apps/dashboard/features/libraries/api/useCountries';
import { useCultures } from 'apps/dashboard/features/libraries/api/useCultures';
import { getImageResolutionOptions } from 'apps/dashboard/features/libraries/utils/metadataOptions';
import Loading from 'components/loading/LoadingComponent';
import Page from 'components/Page';
import ServerConnections from 'components/ServerConnections';
import { useConfiguration } from 'hooks/useConfiguration';
import globalize from 'lib/globalize';
import React from 'react';
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();
config.PreferredMetadataLanguage = data.Language.toString();
config.MetadataCountryCode = data.Country.toString();
config.DummyChapterDuration = parseInt(data.DummyChapterDuration.toString(), 10);
config.ChapterImageResolution = data.ChapterImageResolution.toString() as ImageResolution;
await getConfigurationApi(api)
.updateConfiguration({ serverConfiguration: config });
return {
isSaved: true
};
};
export const Component = () => {
const {
data: config,
isPending: isConfigPending,
isError: isConfigError
} = useConfiguration();
const {
data: cultures,
isPending: isCulturesPending,
isError: isCulturesError
} = useCultures();
const {
data: countries,
isPending: isCountriesPending,
isError: isCountriesError
} = useCountries();
const navigation = useNavigation();
const actionData = useActionData() as ActionData | undefined;
const isSubmitting = navigation.state === 'submitting';
const imageResolutions = getImageResolutionOptions();
if (isConfigPending || isCulturesPending || isCountriesPending) {
return <Loading />;
}
return (
<Page
id='metadataImagesConfigurationPage'
title={globalize.translate('LabelMetadata')}
className='type-interior mainAnimatedPage'
>
<Box className='content-primary'>
{isConfigError || isCulturesError || isCountriesError ? (
<Alert severity='error'>{globalize.translate('MetadataImagesLoadError')}</Alert>
) : (
<Form method='POST'>
<Stack spacing={3}>
{!isSubmitting && actionData?.isSaved && (
<Alert severity='success'>
{globalize.translate('SettingsSaved')}
</Alert>
)}
<Typography variant='h2'>{globalize.translate('HeaderPreferredMetadataLanguage')}</Typography>
<Typography>{globalize.translate('DefaultMetadataLangaugeDescription')}</Typography>
<TextField
name={'Language'}
label={globalize.translate('LabelLanguage')}
defaultValue={config?.PreferredMetadataLanguage}
select
>
{cultures.map(culture => {
return <MenuItem
key={culture.TwoLetterISOLanguageName}
value={culture.TwoLetterISOLanguageName}
>{culture.DisplayName}</MenuItem>;
})}
</TextField>
<TextField
name={'Country'}
label={globalize.translate('LabelCountry')}
defaultValue={config?.MetadataCountryCode}
select
>
{countries.map(country => {
return <MenuItem
key={country.DisplayName}
value={country.TwoLetterISORegionName || ''}
>{country.DisplayName}</MenuItem>;
})}
</TextField>
<Typography variant='h2'>{globalize.translate('HeaderDummyChapter')}</Typography>
<TextField
name={'DummyChapterDuration'}
defaultValue={config?.DummyChapterDuration}
type='number'
inputProps={{
min: 0,
required: true
}}
label={globalize.translate('LabelDummyChapterDuration')}
helperText={globalize.translate('LabelDummyChapterDurationHelp')}
/>
<TextField
name={'ChapterImageResolution'}
select
defaultValue={config?.ChapterImageResolution}
label={globalize.translate('LabelChapterImageResolution')}
helperText={globalize.translate('LabelChapterImageResolutionHelp')}
>
{imageResolutions.map(resolution => {
return <MenuItem key={resolution.name} value={resolution.value}>{resolution.name}</MenuItem>;
})}
</TextField>
<Button
type='submit'
size='large'
>
{globalize.translate('Save')}
</Button>
</Stack>
</Form>
)}
</Box>
</Page>
);
};
Component.displayName = 'MetadataImagesPage';