mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
Add splash screen preview and upload/delete
This commit is contained in:
Bill Thornton
parent
82d7b5b760
commit
5022307855
5 changed files with 232 additions and 51 deletions
|
|
@ -1,5 +1,8 @@
|
|||
import type { BrandingOptions } from '@jellyfin/sdk/lib/generated-client/models/branding-options';
|
||||
import { getConfigurationApi } from '@jellyfin/sdk/lib/utils/api/configuration-api';
|
||||
import { getImageApi } from '@jellyfin/sdk/lib/utils/api/image-api';
|
||||
import Delete from '@mui/icons-material/Delete';
|
||||
import Upload from '@mui/icons-material/Upload';
|
||||
import Alert from '@mui/material/Alert';
|
||||
import Box from '@mui/material/Box';
|
||||
import Button from '@mui/material/Button';
|
||||
|
|
@ -8,18 +11,21 @@ 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 React, { useCallback, useState } from 'react';
|
||||
import { type ActionFunctionArgs, Form, useActionData, useNavigation } from 'react-router-dom';
|
||||
import React, { useCallback, useEffect, useState } from 'react';
|
||||
import { type ActionFunctionArgs, Form, useActionData, useNavigation, useSubmit } from 'react-router-dom';
|
||||
|
||||
import { getBrandingOptionsQuery, QUERY_KEY, useBrandingOptions } from 'apps/dashboard/features/branding/api/useBrandingOptions';
|
||||
import Loading from 'components/loading/LoadingComponent';
|
||||
import Image from 'components/Image';
|
||||
import Page from 'components/Page';
|
||||
import ServerConnections from 'components/ServerConnections';
|
||||
import { useApi } from 'hooks/useApi';
|
||||
import globalize from 'lib/globalize';
|
||||
import { queryClient } from 'utils/query/queryClient';
|
||||
import { ActionData } from 'types/actionData';
|
||||
|
||||
const BRANDING_CONFIG_KEY = 'branding';
|
||||
const SPLASHSCREEN_URL = '/Branding/Splashscreen';
|
||||
const BrandingOption = {
|
||||
CustomCss: 'CustomCss',
|
||||
LoginDisclaimer: 'LoginDisclaimer',
|
||||
|
|
@ -60,9 +66,11 @@ export const loader = () => {
|
|||
};
|
||||
|
||||
export const Component = () => {
|
||||
const { api } = useApi();
|
||||
const navigation = useNavigation();
|
||||
const actionData = useActionData() as ActionData | undefined;
|
||||
const isSubmitting = navigation.state === 'submitting';
|
||||
const submit = useSubmit();
|
||||
|
||||
const {
|
||||
data: defaultBrandingOptions,
|
||||
|
|
@ -70,12 +78,79 @@ export const Component = () => {
|
|||
} = useBrandingOptions();
|
||||
const [ brandingOptions, setBrandingOptions ] = useState(defaultBrandingOptions || {});
|
||||
|
||||
const setSplashscreenEnabled = useCallback((_: React.ChangeEvent<HTMLInputElement>, isEnabled: boolean) => {
|
||||
const [ error, setError ] = useState<string>();
|
||||
|
||||
const [ splashscreenUrl, setSplashscreenUrl ] = useState<string>();
|
||||
useEffect(() => {
|
||||
if (!api || isSubmitting) return;
|
||||
|
||||
setSplashscreenUrl(api.getUri(SPLASHSCREEN_URL, { t: Date.now() }));
|
||||
}, [ api, isSubmitting ]);
|
||||
|
||||
const onSplashscreenDelete = useCallback(() => {
|
||||
setError(undefined);
|
||||
|
||||
if (!api) return;
|
||||
|
||||
getImageApi(api)
|
||||
.deleteCustomSplashscreen()
|
||||
.then(() => {
|
||||
setSplashscreenUrl(api.getUri(SPLASHSCREEN_URL, { t: Date.now() }));
|
||||
})
|
||||
.catch(e => {
|
||||
console.error('[BrandingPage] error deleting image', e);
|
||||
setError('ImageDeleteFailed');
|
||||
});
|
||||
}, [ api ]);
|
||||
|
||||
const onSplashscreenUpload = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
setError(undefined);
|
||||
|
||||
const files = event.target.files;
|
||||
|
||||
if (!api || !files) return false;
|
||||
|
||||
const file = files[0];
|
||||
const reader = new FileReader();
|
||||
reader.onerror = e => {
|
||||
console.error('[BrandingPage] error reading file', e);
|
||||
setError('ImageUploadFailed');
|
||||
};
|
||||
reader.onabort = e => {
|
||||
console.warn('[BrandingPage] aborted reading file', e);
|
||||
setError('ImageUploadCancelled');
|
||||
};
|
||||
reader.onload = () => {
|
||||
if (!reader.result) return;
|
||||
|
||||
const dataUrl = reader.result.toString();
|
||||
// FIXME: TypeScript SDK thinks body should be a File but in reality it is a Base64 string
|
||||
const body = dataUrl.split(',')[1] as never;
|
||||
getImageApi(api)
|
||||
.uploadCustomSplashscreen(
|
||||
{ body },
|
||||
{ headers: { ['Content-Type']: file.type } }
|
||||
)
|
||||
.then(() => {
|
||||
setSplashscreenUrl(dataUrl);
|
||||
})
|
||||
.catch(e => {
|
||||
console.error('[BrandingPage] error uploading splashscreen', e);
|
||||
setError('ImageUploadFailed');
|
||||
});
|
||||
};
|
||||
|
||||
reader.readAsDataURL(file);
|
||||
}, [ api ]);
|
||||
|
||||
const setSplashscreenEnabled = useCallback((event: React.ChangeEvent<HTMLInputElement>, isEnabled: boolean) => {
|
||||
setBrandingOptions({
|
||||
...brandingOptions,
|
||||
[BrandingOption.SplashscreenEnabled]: isEnabled
|
||||
});
|
||||
}, [ brandingOptions ]);
|
||||
|
||||
submit(event.target.form);
|
||||
}, [ brandingOptions, submit ]);
|
||||
|
||||
const setBrandingOption = useCallback((event: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>) => {
|
||||
if (Object.keys(BrandingOption).includes(event.target.name)) {
|
||||
|
|
@ -86,6 +161,10 @@ export const Component = () => {
|
|||
}
|
||||
}, [ brandingOptions ]);
|
||||
|
||||
const onSubmit = useCallback(() => {
|
||||
setError(undefined);
|
||||
}, []);
|
||||
|
||||
if (isPending) return <Loading />;
|
||||
|
||||
return (
|
||||
|
|
@ -95,7 +174,10 @@ export const Component = () => {
|
|||
className='mainAnimatedPage type-interior'
|
||||
>
|
||||
<Box className='content-primary'>
|
||||
<Form method='POST'>
|
||||
<Form
|
||||
method='POST'
|
||||
onSubmit={onSubmit}
|
||||
>
|
||||
<Stack spacing={3}>
|
||||
<Typography variant='h1'>
|
||||
{globalize.translate('HeaderBranding')}
|
||||
|
|
@ -107,16 +189,75 @@ export const Component = () => {
|
|||
</Alert>
|
||||
)}
|
||||
|
||||
<FormControlLabel
|
||||
control={
|
||||
<Switch
|
||||
name={BrandingOption.SplashscreenEnabled}
|
||||
checked={brandingOptions?.SplashscreenEnabled}
|
||||
onChange={setSplashscreenEnabled}
|
||||
{error && (
|
||||
<Alert severity='error'>
|
||||
{globalize.translate(error)}
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
<Stack
|
||||
direction={{
|
||||
xs: 'column',
|
||||
sm: 'row'
|
||||
}}
|
||||
spacing={3}
|
||||
>
|
||||
<Box sx={{ flex: '1 1 0' }}>
|
||||
<Image
|
||||
isLoading={false}
|
||||
url={
|
||||
brandingOptions.SplashscreenEnabled ?
|
||||
splashscreenUrl :
|
||||
undefined
|
||||
}
|
||||
/>
|
||||
}
|
||||
label={globalize.translate('EnableSplashScreen')}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
<Stack
|
||||
spacing={{ xs: 3, sm: 2 }}
|
||||
sx={{ flex: '1 1 0' }}
|
||||
>
|
||||
<FormControlLabel
|
||||
control={
|
||||
<Switch
|
||||
name={BrandingOption.SplashscreenEnabled}
|
||||
checked={brandingOptions?.SplashscreenEnabled}
|
||||
onChange={setSplashscreenEnabled}
|
||||
/>
|
||||
}
|
||||
label={globalize.translate('EnableSplashScreen')}
|
||||
/>
|
||||
|
||||
<Typography variant='body2'>
|
||||
{globalize.translate('CustomSplashScreenSize')}
|
||||
</Typography>
|
||||
|
||||
<Button
|
||||
component='label'
|
||||
variant='outlined'
|
||||
startIcon={<Upload />}
|
||||
disabled={!brandingOptions.SplashscreenEnabled}
|
||||
>
|
||||
<input
|
||||
type='file'
|
||||
accept='image/*'
|
||||
hidden
|
||||
onChange={onSplashscreenUpload}
|
||||
/>
|
||||
{globalize.translate('UploadCustomImage')}
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
variant='outlined'
|
||||
color='error'
|
||||
startIcon={<Delete />}
|
||||
disabled={!brandingOptions.SplashscreenEnabled}
|
||||
onClick={onSplashscreenDelete}
|
||||
>
|
||||
{globalize.translate('DeleteCustomImage')}
|
||||
</Button>
|
||||
</Stack>
|
||||
</Stack>
|
||||
|
||||
<TextField
|
||||
fullWidth
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue