diff --git a/src/apps/dashboard/features/plugins/components/PluginImage.tsx b/src/apps/dashboard/features/plugins/components/PluginImage.tsx deleted file mode 100644 index b2a839ea63..0000000000 --- a/src/apps/dashboard/features/plugins/components/PluginImage.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import Paper from '@mui/material/Paper/Paper'; -import Skeleton from '@mui/material/Skeleton/Skeleton'; -import React, { type FC } from 'react'; - -interface PluginImageProps { - isLoading: boolean - alt?: string - url?: string -} - -const PluginImage: FC = ({ - isLoading, - alt, - url -}) => ( - - {isLoading && ( - - )} - {url && ( - {alt} - )} - -); - -export default PluginImage; diff --git a/src/apps/dashboard/routes/branding/index.tsx b/src/apps/dashboard/routes/branding/index.tsx index a62cd929ba..0fff9cddcc 100644 --- a/src/apps/dashboard/routes/branding/index.tsx +++ b/src/apps/dashboard/routes/branding/index.tsx @@ -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, isEnabled: boolean) => { + const [ error, setError ] = useState(); + + const [ splashscreenUrl, setSplashscreenUrl ] = useState(); + 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) => { + 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, isEnabled: boolean) => { setBrandingOptions({ ...brandingOptions, [BrandingOption.SplashscreenEnabled]: isEnabled }); - }, [ brandingOptions ]); + + submit(event.target.form); + }, [ brandingOptions, submit ]); const setBrandingOption = useCallback((event: React.ChangeEvent) => { if (Object.keys(BrandingOption).includes(event.target.name)) { @@ -86,6 +161,10 @@ export const Component = () => { } }, [ brandingOptions ]); + const onSubmit = useCallback(() => { + setError(undefined); + }, []); + if (isPending) return ; return ( @@ -95,7 +174,10 @@ export const Component = () => { className='mainAnimatedPage type-interior' > -
+ {globalize.translate('HeaderBranding')} @@ -107,16 +189,75 @@ export const Component = () => { )} - + {globalize.translate(error)} + + )} + + + + - } - label={globalize.translate('EnableSplashScreen')} - /> + + + + + } + label={globalize.translate('EnableSplashScreen')} + /> + + + {globalize.translate('CustomSplashScreenSize')} + + + + + + + { - diff --git a/src/components/Image.tsx b/src/components/Image.tsx new file mode 100644 index 0000000000..84f7927223 --- /dev/null +++ b/src/components/Image.tsx @@ -0,0 +1,66 @@ +import type { SvgIconComponent } from '@mui/icons-material'; +import ImageNotSupported from '@mui/icons-material/ImageNotSupported'; +import Box from '@mui/material/Box/Box'; +import Paper from '@mui/material/Paper/Paper'; +import Skeleton from '@mui/material/Skeleton/Skeleton'; +import React, { type FC } from 'react'; + +interface ImageProps { + isLoading: boolean + alt?: string + url?: string + aspectRatio?: number + FallbackIcon?: SvgIconComponent +} + +const Image: FC = ({ + isLoading, + alt, + url, + aspectRatio = 16 / 9, + FallbackIcon = ImageNotSupported +}) => ( + + {isLoading && ( + + )} + {url ? ( + {alt} + ) : ( + + + + )} + +); + +export default Image; diff --git a/src/strings/en-us.json b/src/strings/en-us.json index bb5f9cf80a..9b6573e646 100644 --- a/src/strings/en-us.json +++ b/src/strings/en-us.json @@ -194,6 +194,7 @@ "CriticRating": "Critics rating", "Cursive": "Cursive", "Custom": "Custom", + "CustomSplashScreenSize": "Custom images should be in a 16x9 aspect ratio at a minimum size of 1920x1080.", "CustomSubtitleStylingHelp": "Subtitle styling will work on most devices, but comes with an additional performance overhead.", "DailyAt": "Daily at {0}", "Data": "Data", @@ -208,6 +209,7 @@ "Delete": "Delete", "DeleteEntireSeries": "Delete {0} Episodes", "DeleteAll": "Delete All", + "DeleteCustomImage": "Delete Custom Image", "DeleteDeviceConfirmation": "Are you sure you wish to delete this device? It will reappear the next time a user signs in with it.", "DeleteDevicesConfirmation": "Are you sure you wish to delete all devices? All other sessions will be logged out. Devices will reappear the next time a user signs in.", "DeleteImage": "Delete Image", @@ -559,6 +561,9 @@ "IgnoreDtsHelp": "Disabling this option may resolve some issues, e.g. missing audio on channels with separate audio and video streams.", "Illustrator": "Illustrator", "Image": "Image", + "ImageDeleteFailed": "Image deletion failed", + "ImageUploadCancelled": "Image upload cancelled", + "ImageUploadFailed": "Image upload failed", "Images": "Images", "ImportFavoriteChannelsHelp": "Only channels that are marked as favorite on the tuner device will be imported.", "Inker": "Inker", @@ -1616,6 +1621,7 @@ "UnsupportedPlayback": "Jellyfin cannot decrypt content protected by DRM but all content will be tried regardless, including protected titles. Some files may appear completely black due to encryption or other unsupported features, such as interactive titles.", "Up": "Up", "Upload": "Upload", + "UploadCustomImage": "Upload Custom Image", "UseCustomTagDelimiters": "Use custom tag delimiter", "UseCustomTagDelimitersHelp": "Split artist/genre tags with custom characters.", "UseDoubleRateDeinterlacing": "Double the frame rate when deinterlacing", @@ -1754,7 +1760,7 @@ "ThemeSong": "Theme Song", "ThemeVideo": "Theme Video", "EnableEnhancedNvdecDecoderHelp": "Enhanced NVDEC implementation, disable this option to use CUVID if you encounter decoding errors.", - "EnableSplashScreen": "Enable the splash screen", + "EnableSplashScreen": "Enable the splash screen image", "LabelVppTonemappingBrightness": "VPP Tone mapping brightness gain", "LabelVppTonemappingBrightnessHelp": "Apply brightness gain in VPP tone mapping. The recommended value is 16.", "LabelVppTonemappingContrast": "VPP Tone mapping contrast gain",