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

Disable custom splashscreen and separate enabled state

Browse source
This commit is contained in:
Bill Thornton 2025-03-21 11:30:04 -04:00
parent 5022307855
commit 2c3c4db843
1 changed files with 51 additions and 37 deletions
Download patch file Download diff file Expand all files Collapse all files

88
src/apps/dashboard/routes/branding/index.tsx
View file

@ -12,7 +12,7 @@ import Switch from '@mui/material/Switch';
import TextField from '@mui/material/TextField'; import TextField from '@mui/material/TextField';
import Typography from '@mui/material/Typography'; import Typography from '@mui/material/Typography';
import React, { useCallback, useEffect, useState } from 'react'; import React, { useCallback, useEffect, useState } from 'react';
import { type ActionFunctionArgs, Form, useActionData, useNavigation, useSubmit } from 'react-router-dom'; import { type ActionFunctionArgs, Form, useActionData, useNavigation } from 'react-router-dom';
import { getBrandingOptionsQuery, QUERY_KEY, useBrandingOptions } from 'apps/dashboard/features/branding/api/useBrandingOptions'; import { getBrandingOptionsQuery, QUERY_KEY, useBrandingOptions } from 'apps/dashboard/features/branding/api/useBrandingOptions';
import Loading from 'components/loading/LoadingComponent'; import Loading from 'components/loading/LoadingComponent';
@ -25,6 +25,7 @@ import { queryClient } from 'utils/query/queryClient';
import { ActionData } from 'types/actionData'; import { ActionData } from 'types/actionData';
const BRANDING_CONFIG_KEY = 'branding'; const BRANDING_CONFIG_KEY = 'branding';
const ENABLE_CUSTOM_IMAGE = false;
const SPLASHSCREEN_URL = '/Branding/Splashscreen'; const SPLASHSCREEN_URL = '/Branding/Splashscreen';
const BrandingOption = { const BrandingOption = {
CustomCss: 'CustomCss', CustomCss: 'CustomCss',
@ -70,7 +71,6 @@ export const Component = () => {
const navigation = useNavigation(); const navigation = useNavigation();
const actionData = useActionData() as ActionData | undefined; const actionData = useActionData() as ActionData | undefined;
const isSubmitting = navigation.state === 'submitting'; const isSubmitting = navigation.state === 'submitting';
const submit = useSubmit();
const { const {
data: defaultBrandingOptions, data: defaultBrandingOptions,
@ -80,6 +80,7 @@ export const Component = () => {
const [ error, setError ] = useState<string>(); const [ error, setError ] = useState<string>();
const [ isSplashscreenEnabled, setIsSplashscreenEnabled ] = useState(brandingOptions.SplashscreenEnabled ?? false);
const [ splashscreenUrl, setSplashscreenUrl ] = useState<string>(); const [ splashscreenUrl, setSplashscreenUrl ] = useState<string>();
useEffect(() => { useEffect(() => {
if (!api || isSubmitting) return; if (!api || isSubmitting) return;
@ -143,14 +144,22 @@ export const Component = () => {
reader.readAsDataURL(file); reader.readAsDataURL(file);
}, [ api ]); }, [ api ]);
const setSplashscreenEnabled = useCallback((event: React.ChangeEvent<HTMLInputElement>, isEnabled: boolean) => { const setSplashscreenEnabled = useCallback(async (_: React.ChangeEvent<HTMLInputElement>, isEnabled: boolean) => {
setBrandingOptions({ setIsSplashscreenEnabled(isEnabled);
...brandingOptions,
[BrandingOption.SplashscreenEnabled]: isEnabled
});
submit(event.target.form); await getConfigurationApi(api!)
}, [ brandingOptions, submit ]); .updateNamedConfiguration({
key: BRANDING_CONFIG_KEY,
body: JSON.stringify({
...defaultBrandingOptions,
SplashscreenEnabled: isEnabled
})
});
void queryClient.invalidateQueries({
queryKey: [ QUERY_KEY ]
});
}, [ api, defaultBrandingOptions ]);
const setBrandingOption = useCallback((event: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>) => { const setBrandingOption = useCallback((event: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>) => {
if (Object.keys(BrandingOption).includes(event.target.name)) { if (Object.keys(BrandingOption).includes(event.target.name)) {
@ -206,7 +215,7 @@ export const Component = () => {
<Image <Image
isLoading={false} isLoading={false}
url={ url={
brandingOptions.SplashscreenEnabled ? isSplashscreenEnabled ?
splashscreenUrl : splashscreenUrl :
undefined undefined
} }
@ -221,41 +230,46 @@ export const Component = () => {
control={ control={
<Switch <Switch
name={BrandingOption.SplashscreenEnabled} name={BrandingOption.SplashscreenEnabled}
checked={brandingOptions?.SplashscreenEnabled} checked={isSplashscreenEnabled}
onChange={setSplashscreenEnabled} onChange={setSplashscreenEnabled}
/> />
} }
label={globalize.translate('EnableSplashScreen')} label={globalize.translate('EnableSplashScreen')}
/> />
<Typography variant='body2'> {/* FIXME: Disabled due to https://github.com/jellyfin/jellyfin/issues/13744 */}
{globalize.translate('CustomSplashScreenSize')} {ENABLE_CUSTOM_IMAGE && (
</Typography> <>
<Typography variant='body2'>
{globalize.translate('CustomSplashScreenSize')}
</Typography>
<Button <Button
component='label' component='label'
variant='outlined' variant='outlined'
startIcon={<Upload />} startIcon={<Upload />}
disabled={!brandingOptions.SplashscreenEnabled} disabled={!isSplashscreenEnabled}
> >
<input <input
type='file' type='file'
accept='image/*' accept='image/*'
hidden hidden
onChange={onSplashscreenUpload} onChange={onSplashscreenUpload}
/> />
{globalize.translate('UploadCustomImage')} {globalize.translate('UploadCustomImage')}
</Button> </Button>
<Button <Button
variant='outlined' variant='outlined'
color='error' color='error'
startIcon={<Delete />} startIcon={<Delete />}
disabled={!brandingOptions.SplashscreenEnabled} disabled={!isSplashscreenEnabled}
onClick={onSplashscreenDelete} onClick={onSplashscreenDelete}
> >
{globalize.translate('DeleteCustomImage')} {globalize.translate('DeleteCustomImage')}
</Button> </Button>
</>
)}
</Stack> </Stack>
</Stack> </Stack>