Background modal updates

biome.json

@@ -19,7 +19,7 @@
 				"noExplicitAny": "off",
 				"noImplicitAnyLet": "off",
 				"recommended": true,
-				"noConsole": { "level": "error", "options": { "allow": ["error", "log"] } }
+				"noConsole": { "level": "error", "options": { "allow": ["error"] } }
 			},
 			"correctness": {
 				"useExhaustiveDependencies": "off",

src/hooks/useAPI.tsx

@@ -298,6 +298,8 @@ export function useFileUploadAPI() {
 		onMutate: () => {},
 		onSuccess: (_variables) => {
 			queryClient.invalidateQueries({ queryKey: ['GET', 'api/backgrounds'] });
+			queryClient.invalidateQueries({ queryKey: ['GET', 'api/themes'] });
+			queryClient.invalidateQueries({ queryKey: ['GET', 'api/themePlaylists'] });
 		},
 	});
 }

src/pages/settings/components/Theming/BackgroundModal.tsx

@@ -6,9 +6,12 @@ import {
 	Group,
 	Image,
 	Modal,
+	Overlay,
 	ScrollArea,
 	SimpleGrid,
+	Stack,
 	Text,
+	TextInput,
 } from '@mantine/core';
 import { useCommonHooks } from 'hooks';
 import { useFileUploadAPI, useMutationAPI } from 'hooks/useAPI';
@@ -20,13 +23,18 @@ function BackgroundModal({
 	backgroundModalOpened,
 	handleBackgroundModalClose,
 	backgroundList,
+	inUseBackgrounds,
 }: {
 	backgroundModalOpened: boolean;
 	handleBackgroundModalClose: () => void;
 	backgroundList: string[];
+	inUseBackgrounds: string[];
 }) {
 	const [background, setBackground] = useState<File | null>(null);
+	const [fileName, setFileName] = useState<string>('');
+	const [newFileName, setNewFileName] = useState<string>('');
 	const [err, setErr] = useState<boolean>(false);
+	const [confirm, setConfirm] = useState<boolean>(false);
 	const { isMobile } = useCommonHooks();
 	const { mutateAsync: uploadAsync } = useFileUploadAPI();
 	const { mutateAsync } = useMutationAPI();
@@ -34,8 +42,8 @@ function BackgroundModal({
 	const handleFileUpload = (e: any) => {
 		setErr(false);
 		setBackground(e);
+		setFileName(e?.name);
 	};
-
 	return (
 		<Modal.Root
 			size={'75%'}
@@ -43,8 +51,11 @@ function BackgroundModal({
 			classNames={modalClasses}
 			opened={backgroundModalOpened}
 			onClose={() => {
-				handleBackgroundModalClose();
 				setBackground(null);
+				setFileName('');
+				setNewFileName('');
+				handleBackgroundModalClose();
+				setConfirm(false);
 			}}
 			fullScreen={isMobile}
 			centered
@@ -59,7 +70,81 @@ function BackgroundModal({
 					</Group>
 					<Modal.CloseButton />
 				</Modal.Header>
-				<Modal.Body p={'2rem'}>
+				<Modal.Body p={'1rem'}>
+					<Stack align='center' w={'100%'}>
+						{confirm ? (
+							<Stack
+								justify='center'
+								align='center'
+								style={{
+									width: '100%',
+									height: '30rem',
+									backgroundColor: 'var(--mantine-color-search-0)',
+									padding: '1rem',
+									borderRadius: '.5rem',
+									backgroundFilter: 'blur(5px)',
+								}}
+							>
+								<Text fw={600} fz={'2rem'}>
+									Are you sure you want to delete {fileName}?
+								</Text>
+								{inUseBackgrounds.includes(fileName) && (
+									<Text fw={600} fz={'1.5rem'}>
+										This background is currently in use! This will result in a blank
+										background on the theme.
+									</Text>
+								)}
+								<Text fw={600} fz={'3rem'}>
+									THIS ACTION CANNOT BE UNDONE!!!
+								</Text>
+								<Card
+									style={{
+										aspectRatio: '16/9',
+										height: '100%',
+										backgroundImage: `url(../../api/backgroundImages/${fileName})`,
+										backgroundSize: 'cover',
+										backgroundPosition: 'center',
+										backgroundRepeat: 'no-repeat',
+										padding: '2rem',
+										margin: '1rem',
+									}}
+								/>
+								<Group>
+									<Button
+										mt={'auto'}
+										w={'min-content'}
+										color='red'
+										onClick={() => {
+											setBackground(null);
+											setFileName('');
+											setNewFileName('');
+											setConfirm(false);
+											setFileName('');
+											mutateAsync({
+												method: 'DELETE',
+												endpoint: 'api/backgrounds',
+												body: { fileName },
+											});
+										}}
+									>
+										DELETE
+									</Button>
+									<Button
+										mt={'auto'}
+										w={'min-content'}
+										onClick={() => {
+											setBackground(null);
+											setFileName('');
+											setNewFileName('');
+											setConfirm(false);
+											setFileName('');
+										}}
+									>
+										Cancel
+									</Button>
+								</Group>
+							</Stack>
+						) : (
 							<ScrollArea
 								className={scrollAreaClasses.default}
 								classNames={scrollAreaClasses}
@@ -113,11 +198,8 @@ function BackgroundModal({
 														zIndex: 3,
 													}}
 													onClick={() => {
-												mutateAsync({
-													method: 'DELETE',
-													endpoint: 'api/backgrounds',
-													body: { background },
-												});
+														setFileName(background);
+														setConfirm(true);
 													}}
 												>
 													<FiTrash />
@@ -126,7 +208,24 @@ function BackgroundModal({
 										))}
 								</SimpleGrid>
 							</ScrollArea>
-					<Group gap={0} w={'100%'} align={'center'} justify='space-between'>
+						)}
+						<Stack
+							display={'flex'}
+							pos={'relative'}
+							w={'100%'}
+							align={'center'}
+							justify='space-between'
+							p={16}
+						>
+							{confirm && (
+								<Overlay
+									opacity={1}
+									color='var(--mantine-color-search-0)'
+									style={{ borderRadius: '.5rem', backdropFilter: 'blur(5px)' }}
+								/>
+							)}
+							<Group gap={0}>
+								<Stack gap={0} w={'60%'}>
 									<FileInput
 										clearable
 										accept='image/png,image/jpeg'
@@ -134,13 +233,12 @@ function BackgroundModal({
 										onChange={handleFileUpload}
 										label={'Upload Background'}
 										placeholder={'Select...'}
+										error={err && 'Please upload a background'}
 										description={
 											'Max size: 50MB for upload. Images are resized to 300kb after upload.'
 										}
-							p={'xl'}
-							w={'60%'}
+										pr={'xl'}
 										pl={0}
-							error={err && 'Please upload a background'}
 										styles={{
 											input: {
 												color: 'var(--mantine-color-primary-0)',
@@ -151,6 +249,21 @@ function BackgroundModal({
 											},
 										}}
 									/>
+									<TextInput
+										label={'File Name'}
+										placeholder={fileName}
+										value={newFileName}
+										onChange={(e) => setNewFileName(e.target.value)}
+										pr={'xl'}
+										pl={0}
+										styles={{
+											input: {
+												color: 'var(--mantine-color-primary-0)',
+												borderColor: 'var(--mantine-color-primary-0)',
+											},
+										}}
+									/>
+								</Stack>
 								<Card
 									style={{
 										aspectRatio: '16/9',
@@ -168,7 +281,7 @@ function BackgroundModal({
 										<Image src={URL.createObjectURL(background)} w={'100%'} h={'100%'} />
 									) : (
 										<Image
-									src={'https://placehold.co/800x450?text=Select%20an%20Image'}
+											src={'https://placehold.co/800x450?text=Upload%20an%20Image'}
 											w={'100%'}
 											h={'100%'}
 										/>
@@ -176,16 +289,22 @@ function BackgroundModal({
 								</Card>
 							</Group>
 							<Button
+								w={'min-content'}
 								onClick={() => {
 									if (background) {
-								fd.append('background', background || '');
+										const newBackground = new File(
+											[background],
+											newFileName || background.name,
+											{ type: background.type },
+										);
+										fd.append('background', newBackground || '');
 										uploadAsync({
 											method: 'POST',
 											endpoint: 'api/backgrounds',
 											body: fd,
 										});
-								handleBackgroundModalClose();
 										setBackground(null);
+										setNewFileName('');
 										setErr(false);
 									} else {
 										setErr(true);
@@ -194,6 +313,8 @@ function BackgroundModal({
 							>
 								Upload
 							</Button>
+						</Stack>
+					</Stack>
 				</Modal.Body>
 			</Modal.Content>
 		</Modal.Root>

src/pages/settings/components/Theming/Themes.tsx

@@ -37,6 +37,7 @@ function ThemesSettings() {
 	const [colorId, setColorId] = useState<string>('');
 	const [colorValue, setColorValue] = useState('#000000');
 	const [backgroundList, setBackgroundList] = useState<string[]>(['None']);
+	const [inUseBackgrounds, setInUseBackgrounds] = useState<string[]>([]);
 	const [selectedTheme, setSelectedTheme] = useState<Theme>({
 		id: undefined,
 		name: 'default',
@@ -119,6 +120,23 @@ function ThemesSettings() {
 			setIsLoading(false);
 		}
 	}, [allThemeData, isAllThemeDataFetched, debouncedSearch]);
+
+	useEffect(() => {
+		if (allThemes) {
+			setInUseBackgrounds([
+				...new Set(
+					allThemes
+						.filter((t) => {
+							if (t.backgroundImage !== 'none') {
+								return t.backgroundImage;
+							}
+						})
+						.map((t) => t.backgroundImage),
+				),
+			]);
+		}
+	}, [allThemes]);
+
 	return (
 		<Stack w={'100%'} align='center'>
 			<ThemeModal
@@ -140,6 +158,7 @@ function ThemesSettings() {
 				backgroundModalOpened={backgroundModalOpened}
 				handleBackgroundModalClose={handleBackgroundModalClose}
 				backgroundList={backgroundList}
+				inUseBackgrounds={inUseBackgrounds}
 			/>
 			<SettingsHeader
 				setDragging={undefined}