Added Theme Playlists

2025-03-13 17:01:20 -05:00
parent 0ba63f57c4
commit 7edbbb6a76
7 changed files with 676 additions and 6 deletions
--- a/src/pages/settings/components/ThemePlaylistCard.tsx
+++ b/src/pages/settings/components/ThemePlaylistCard.tsx
@@ -0,0 +1,208 @@
+import {
+	ActionIcon,
+	Button,
+	Group,
+	Overlay,
+	ScrollArea,
+	Stack,
+	Text,
+} from '@mantine/core';
+import { useCommonHooks } from 'hooks';
+import { useState } from 'react';
+import { FiEdit, FiRefreshCcw, FiTrash } from 'react-icons/fi';
+import ThemeMiniCard from './ThemeMiniCard';
+
+function ThemePlaylistCard({
+	cardPlaylist,
+	handleOpen,
+	handleDeletePlaylist,
+	createPlaylist,
+	allThemes,
+}: any) {
+	const [hover, setHover] = useState(false);
+	const { currentThemePlaylist, setCurrentThemePlaylist, theme } = useCommonHooks();
+	const syncableLists = ['All', 'Backgrounds', 'No Backgrounds'];
+	const themeList = JSON.parse(
+		cardPlaylist.themeList.name === 'Time of Day' ? '[]' : cardPlaylist.themeList,
+	);
+
+	return (
+		<Group
+			gap={0}
+			align='center'
+			justify='center'
+			display={'grid'}
+			pos={'relative'}
+			onMouseEnter={() => setHover(true)}
+			onMouseLeave={() => setHover(false)}
+		>
+			<Text
+				style={{
+					position: 'absolute',
+					top: -10,
+					left: 6,
+					paddingRight: 4,
+					paddingLeft: 4,
+					backgroundColor: theme.borderColor,
+					borderRadius: '4px',
+					color:
+						theme.borderColor === theme.primaryColor
+							? theme.accentColor
+							: theme.primaryColor,
+					zIndex: 3,
+				}}
+			>
+				{cardPlaylist.name}
+			</Text>
+			{syncableLists.includes(cardPlaylist.name) ? (
+				<ActionIcon
+					style={{
+						position: 'absolute',
+						top: -10,
+						right: 6,
+						paddingRight: 4,
+						paddingLeft: 4,
+						backgroundColor: theme.borderColor,
+						borderRadius: '4px',
+						color:
+							theme.borderColor === theme.primaryColor
+								? theme.accentColor
+								: theme.primaryColor,
+						zIndex: 3,
+					}}
+					onClick={(event) => {
+						event.stopPropagation();
+						if (cardPlaylist.name === 'All') {
+							createPlaylist({
+								method: 'PATCH',
+								endpoint: 'api/themePlaylists',
+								body: {
+									id: cardPlaylist.id,
+									name: 'All',
+									themeList: JSON.stringify(allThemes.map((theme: any) => theme.id)),
+								},
+							});
+						}
+						if (cardPlaylist.name === 'Backgrounds') {
+							createPlaylist({
+								method: 'PATCH',
+								endpoint: 'api/themePlaylists',
+								body: {
+									id: cardPlaylist.id,
+									name: 'Backgrounds',
+									themeList: JSON.stringify(
+										allThemes
+											.filter((theme: any) => theme.backgroundImage !== 'none')
+											.map((theme: any) => theme.id),
+									),
+								},
+							});
+						}
+						if (cardPlaylist.name === 'No Backgrounds') {
+							createPlaylist({
+								method: 'PATCH',
+								endpoint: 'api/themePlaylists',
+								body: {
+									id: cardPlaylist.id,
+									name: 'No Backgrounds',
+									themeList: JSON.stringify(
+										allThemes
+											.filter((theme: any) => theme.backgroundImage === 'none')
+											.map((theme: any) => theme.id),
+									),
+								},
+							});
+						}
+					}}
+				>
+					<FiRefreshCcw />
+				</ActionIcon>
+			) : (
+				<>
+					<ActionIcon
+						style={{
+							position: 'absolute',
+							top: -10,
+							right: 6,
+							paddingRight: 4,
+							paddingLeft: 4,
+							backgroundColor: theme.borderColor,
+							borderRadius: '4px',
+							color:
+								theme.borderColor === theme.primaryColor
+									? theme.accentColor
+									: theme.primaryColor,
+							zIndex: 3,
+						}}
+						onClick={() => {
+							handleOpen(cardPlaylist);
+						}}
+					>
+						<FiEdit />
+					</ActionIcon>
+					{cardPlaylist.default === 0 && (
+						<ActionIcon
+							style={{
+								position: 'absolute',
+								top: -10,
+								right: 40,
+								paddingRight: 4,
+								paddingLeft: 4,
+								backgroundColor: theme.borderColor,
+								borderRadius: '4px',
+								color:
+									theme.borderColor === theme.primaryColor
+										? theme.accentColor
+										: theme.primaryColor,
+								zIndex: 3,
+							}}
+							onClick={() => handleDeletePlaylist(cardPlaylist)}
+						>
+							<FiTrash />
+						</ActionIcon>
+					)}
+				</>
+			)}
+			<Button
+				w={'275px'}
+				h={'300px'}
+				style={{
+					backgroundSize: 'cover',
+					backgroundColor: theme.primaryColor,
+					color: theme.accentColor,
+					border: `solid ${theme.borderColor}`,
+				}}
+				onClick={() => {
+					setCurrentThemePlaylist(cardPlaylist.name);
+				}}
+			>
+				{hover && <Overlay opacity={0.5} zIndex={1} />}
+				<Stack h={'100%'} w={'100%'}>
+					{cardPlaylist.name !== 'Time of Day' ? (
+						<>
+							<Text>Count: {themeList.length}</Text>
+							<ScrollArea h={'240px'} w={'100%'} style={{ zIndex: 2 }}>
+								{themeList.length > 0 &&
+									themeList.map((item: any) => {
+										return <ThemeMiniCard key={item} item={item} allThemes={allThemes} />;
+									})}
+							</ScrollArea>
+						</>
+					) : (
+						<>
+							<Text>Timed Themes</Text>
+							<ScrollArea h={'240px'} w={'100%'} style={{ zIndex: 2 }}>
+								<ThemeMiniCard item={Number(themeList[0])} allThemes={allThemes} />
+								<ThemeMiniCard item={Number(themeList[1])} allThemes={allThemes} />
+								<ThemeMiniCard item={Number(themeList[2])} allThemes={allThemes} />
+								<ThemeMiniCard item={Number(themeList[3])} allThemes={allThemes} />
+							</ScrollArea>
+						</>
+					)}
+				</Stack>
+			</Button>
+		</Group>
+	);
+}
+
+export default ThemePlaylistCard;