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,141 +70,251 @@ function BackgroundModal({
 					</Group>
 					<Modal.CloseButton />
 				</Modal.Header>
-				<Modal.Body p={'2rem'}>
-					<ScrollArea
-						className={scrollAreaClasses.default}
-						classNames={scrollAreaClasses}
-						type={'always'}
-						style={{
-							width: '100%',
-							height: '30rem',
-							backgroundColor: 'var(--mantine-color-search-0)',
-							padding: '1rem',
-							borderRadius: '.5rem',
-							backgroundFilter: 'blur(5px)',
-						}}
-					>
-						<SimpleGrid w={'100%'} cols={3} p={'.5rem'}>
-							{backgroundList
-								.filter((background) => background !== 'None')
-								.map((background) => (
-									<Group key={background} display={'flex'} pos={'relative'}>
-										<Text
-											style={{
-												color: 'var(--mantine-color-primary-0)',
-												backgroundColor: 'var(--mantine-color-accent-0)',
-												padding: '.25rem',
-												borderRadius: '.5rem',
-												position: 'absolute',
-												top: '-.5rem',
-												left: 0,
-												zIndex: 3,
-											}}
-										>
-											{background}
-										</Text>
-										<Card
-											style={{
-												aspectRatio: '16/9',
-												width: '100%',
-												backgroundImage: `url(../../api/backgroundImages/${background})`,
-												backgroundSize: 'cover',
-												backgroundPosition: 'center',
-												backgroundRepeat: 'no-repeat',
-												padding: '2rem',
-												margin: '1rem',
-											}}
-										/>
-										<ActionIcon
-											color='var(--mantine-color-red-6)'
-											style={{
-												position: 'absolute',
-												bottom: '.5rem',
-												right: '.5rem',
-												zIndex: 3,
-											}}
-											onClick={() => {
-												mutateAsync({
-													method: 'DELETE',
-													endpoint: 'api/backgrounds',
-													body: { background },
-												});
-											}}
-										>
-											<FiTrash />
-										</ActionIcon>
-									</Group>
-								))}
-						</SimpleGrid>
-					</ScrollArea>
-					<Group gap={0} w={'100%'} align={'center'} justify='space-between'>
-						<FileInput
-							clearable
-							accept='image/png,image/jpeg'
-							value={background}
-							onChange={handleFileUpload}
-							label={'Upload Background'}
-							placeholder={'Select...'}
-							description={
-								'Max size: 50MB for upload. Images are resized to 300kb after upload.'
-							}
-							p={'xl'}
-							w={'60%'}
-							pl={0}
-							error={err && 'Please upload a background'}
-							styles={{
-								input: {
-									color: 'var(--mantine-color-primary-0)',
-									borderColor: 'var(--mantine-color-primary-0)',
-								},
-								placeholder: {
-									color: 'var(--mantine-color-accent-0)',
-								},
-							}}
-						/>
-						<Card
-							style={{
-								aspectRatio: '16/9',
-								width: '35%',
-								backgroundSize: 'cover',
-								backgroundPosition: 'center',
-								backgroundRepeat: 'no-repeat',
-								backgroundColor: 'var(--mantine-color-search-0)',
-								padding: '2rem',
-								margin: '1rem',
-								marginRight: 0,
-							}}
+				<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}
+								type={'always'}
+								style={{
+									width: '100%',
+									height: '30rem',
+									backgroundColor: 'var(--mantine-color-search-0)',
+									padding: '1rem',
+									borderRadius: '.5rem',
+									backgroundFilter: 'blur(5px)',
+								}}
+							>
+								<SimpleGrid w={'100%'} cols={3} p={'.5rem'}>
+									{backgroundList
+										.filter((background) => background !== 'None')
+										.map((background) => (
+											<Group key={background} display={'flex'} pos={'relative'}>
+												<Text
+													style={{
+														color: 'var(--mantine-color-primary-0)',
+														backgroundColor: 'var(--mantine-color-accent-0)',
+														padding: '.25rem',
+														borderRadius: '.5rem',
+														position: 'absolute',
+														top: '-.5rem',
+														left: 0,
+														zIndex: 3,
+													}}
+												>
+													{background}
+												</Text>
+												<Card
+													style={{
+														aspectRatio: '16/9',
+														width: '100%',
+														backgroundImage: `url(../../api/backgroundImages/${background})`,
+														backgroundSize: 'cover',
+														backgroundPosition: 'center',
+														backgroundRepeat: 'no-repeat',
+														padding: '2rem',
+														margin: '1rem',
+													}}
+												/>
+												<ActionIcon
+													color='var(--mantine-color-red-6)'
+													style={{
+														position: 'absolute',
+														bottom: '.5rem',
+														right: '.5rem',
+														zIndex: 3,
+													}}
+													onClick={() => {
+														setFileName(background);
+														setConfirm(true);
+													}}
+												>
+													<FiTrash />
+												</ActionIcon>
+											</Group>
+										))}
+								</SimpleGrid>
+							</ScrollArea>
+						)}
+						<Stack
+							display={'flex'}
+							pos={'relative'}
+							w={'100%'}
+							align={'center'}
+							justify='space-between'
+							p={16}
 						>
-							{background ? (
-								<Image src={URL.createObjectURL(background)} w={'100%'} h={'100%'} />
-							) : (
-								<Image
-									src={'https://placehold.co/800x450?text=Select%20an%20Image'}
-									w={'100%'}
-									h={'100%'}
+							{confirm && (
+								<Overlay
+									opacity={1}
+									color='var(--mantine-color-search-0)'
+									style={{ borderRadius: '.5rem', backdropFilter: 'blur(5px)' }}
 								/>
 							)}
-						</Card>
-					</Group>
-					<Button
-						onClick={() => {
-							if (background) {
-								fd.append('background', background || '');
-								uploadAsync({
-									method: 'POST',
-									endpoint: 'api/backgrounds',
-									body: fd,
-								});
-								handleBackgroundModalClose();
-								setBackground(null);
-								setErr(false);
-							} else {
-								setErr(true);
-							}
-						}}
-					>
-						Upload
-					</Button>
+							<Group gap={0}>
+								<Stack gap={0} w={'60%'}>
+									<FileInput
+										clearable
+										accept='image/png,image/jpeg'
+										value={background}
+										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.'
+										}
+										pr={'xl'}
+										pl={0}
+										styles={{
+											input: {
+												color: 'var(--mantine-color-primary-0)',
+												borderColor: 'var(--mantine-color-primary-0)',
+											},
+											placeholder: {
+												color: 'var(--mantine-color-accent-0)',
+											},
+										}}
+									/>
+									<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',
+										width: '35%',
+										backgroundSize: 'cover',
+										backgroundPosition: 'center',
+										backgroundRepeat: 'no-repeat',
+										backgroundColor: 'var(--mantine-color-search-0)',
+										padding: '2rem',
+										margin: '1rem',
+										marginRight: 0,
+									}}
+								>
+									{background ? (
+										<Image src={URL.createObjectURL(background)} w={'100%'} h={'100%'} />
+									) : (
+										<Image
+											src={'https://placehold.co/800x450?text=Upload%20an%20Image'}
+											w={'100%'}
+											h={'100%'}
+										/>
+									)}
+								</Card>
+							</Group>
+							<Button
+								w={'min-content'}
+								onClick={() => {
+									if (background) {
+										const newBackground = new File(
+											[background],
+											newFileName || background.name,
+											{ type: background.type },
+										);
+										fd.append('background', newBackground || '');
+										uploadAsync({
+											method: 'POST',
+											endpoint: 'api/backgrounds',
+											body: fd,
+										});
+										setBackground(null);
+										setNewFileName('');
+										setErr(false);
+									} else {
+										setErr(true);
+									}
+								}}
+							>
+								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}