Style updates and bugfixes
This commit is contained in:
Sean Edmunds
381
src/pages/settings/components/Theming/Themes/Themes.tsx
Normal file
381
src/pages/settings/components/Theming/Themes/Themes.tsx
Normal file
@@ -0,0 +1,381 @@
|
||||
import { Box, Button, Group, Overlay, Stack, Switch, Text, Tooltip } from '@mantine/core';
|
||||
import { useDebouncedValue, useDisclosure } from '@mantine/hooks';
|
||||
import { NoItemsFound, SettingsHeader } from 'components';
|
||||
import { useCommonHooks, useMutationAPI, useQueryAPI } from 'hooks';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { FaDice } from 'react-icons/fa';
|
||||
import { FiChevronRight, FiEdit, FiMousePointer, FiStopCircle } from 'react-icons/fi';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { switchClasses, textClasses } from 'styles';
|
||||
import type { Theme, ThemePlaylist } from 'types';
|
||||
import { BackgroundModal } from '../Backgrounds';
|
||||
import { ThemeCard } from './ThemeCard';
|
||||
import { ThemeModal } from './ThemeModal';
|
||||
|
||||
export function Themes() {
|
||||
const themesEndpoint = 'api/themes';
|
||||
const backgroundsEndpoint = 'api/backgrounds';
|
||||
const { data: allThemeData, isFetched: isAllThemeDataFetched } = useQueryAPI({
|
||||
endpoint: 'api/themes',
|
||||
});
|
||||
const [allThemes, setAllThemes] = useState<Theme[]>([]);
|
||||
const { data: backgroundData, isFetched: isBackgroundFetched } = useQueryAPI({
|
||||
endpoint: backgroundsEndpoint,
|
||||
});
|
||||
const { data: themePlaylistData } = useQueryAPI({
|
||||
endpoint: 'api/themePlaylists',
|
||||
});
|
||||
const [themePlaylists, setThemePlaylists] = useState<ThemePlaylist[]>([]);
|
||||
const { mutateAsync } = useMutationAPI();
|
||||
const [themeModalOpened, { open: openThemeModal, close: closeThemeModal }] =
|
||||
useDisclosure(false);
|
||||
const [
|
||||
backgroundModalOpened,
|
||||
{ open: openBackgroundModal, close: closeBackgroundModal },
|
||||
] = useDisclosure(false);
|
||||
const [backgroundList, setBackgroundList] = useState<string[]>(['None']);
|
||||
const [inUseBackgrounds, setInUseBackgrounds] = useState<string[]>([]);
|
||||
const [selectedTheme, setSelectedTheme] = useState<Theme>({
|
||||
id: undefined,
|
||||
name: 'default',
|
||||
backgroundImage: 'none',
|
||||
backgroundColor: '#EEEEEE',
|
||||
searchColor: '#00000033',
|
||||
primaryColor: '#222222',
|
||||
accentColor: '#5c5c5c',
|
||||
borderColor: '#5c5c5c',
|
||||
randomEnabled: 0,
|
||||
textShadowsEnabled: 0,
|
||||
appShadowsEnabled: 0,
|
||||
});
|
||||
const [pickerOpen, { open: openPicker, close: closePicker }] = useDisclosure(false);
|
||||
const [searchValue, setSearchValue] = useState('');
|
||||
const [debouncedSearch] = useDebouncedValue(searchValue, 500);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const navigate = useNavigate();
|
||||
const {
|
||||
currentTheme,
|
||||
setCurrentTheme,
|
||||
theme,
|
||||
isMobile,
|
||||
currentThemePlaylist,
|
||||
setCurrentThemePlaylist,
|
||||
} = useCommonHooks();
|
||||
|
||||
const handleOpen = (theme: Theme) => {
|
||||
setSelectedTheme(theme);
|
||||
openThemeModal();
|
||||
};
|
||||
|
||||
const handleClose = () => {
|
||||
closeThemeModal();
|
||||
closePicker();
|
||||
setSelectedTheme({
|
||||
id: undefined,
|
||||
name: 'default',
|
||||
backgroundImage: 'none',
|
||||
backgroundColor: '#EEEEEE',
|
||||
searchColor: '#00000033',
|
||||
primaryColor: '#222222',
|
||||
accentColor: '#5c5c5c',
|
||||
borderColor: '#5c5c5c',
|
||||
randomEnabled: 0,
|
||||
textShadowsEnabled: 0,
|
||||
appShadowsEnabled: 0,
|
||||
});
|
||||
};
|
||||
|
||||
const handleBackgroundModalClose = () => {
|
||||
closeBackgroundModal();
|
||||
};
|
||||
|
||||
const handleSaveTheme = () => {
|
||||
mutateAsync({
|
||||
method: selectedTheme?.id === undefined ? 'POST' : 'PATCH',
|
||||
endpoint: themesEndpoint,
|
||||
body: selectedTheme,
|
||||
});
|
||||
handleClose();
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (backgroundData && isBackgroundFetched) {
|
||||
setBackgroundList(['None', ...backgroundData]);
|
||||
}
|
||||
}, [backgroundData, isBackgroundFetched]);
|
||||
|
||||
useEffect(() => {
|
||||
if (themePlaylistData) {
|
||||
setThemePlaylists(themePlaylistData);
|
||||
}
|
||||
}, [themePlaylistData]);
|
||||
|
||||
useEffect(() => {
|
||||
if (allThemeData && isAllThemeDataFetched) {
|
||||
setAllThemes(
|
||||
allThemeData.filter((a: Theme) =>
|
||||
a.name.toLowerCase().includes(debouncedSearch.toLowerCase()),
|
||||
),
|
||||
);
|
||||
}
|
||||
if (debouncedSearch === searchValue) {
|
||||
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>
|
||||
<ThemeModal
|
||||
opened={themeModalOpened}
|
||||
handleClose={handleClose}
|
||||
selectedTheme={selectedTheme}
|
||||
setSelectedTheme={setSelectedTheme}
|
||||
openPicker={openPicker}
|
||||
backgroundList={backgroundList}
|
||||
pickerOpen={pickerOpen}
|
||||
closePicker={closePicker}
|
||||
handleSaveTheme={handleSaveTheme}
|
||||
/>
|
||||
<BackgroundModal
|
||||
backgroundModalOpened={backgroundModalOpened}
|
||||
handleBackgroundModalClose={handleBackgroundModalClose}
|
||||
backgroundList={backgroundList}
|
||||
inUseBackgrounds={inUseBackgrounds}
|
||||
/>
|
||||
<SettingsHeader
|
||||
setDragging={undefined}
|
||||
openModal={openThemeModal}
|
||||
title={'Themes'}
|
||||
tooltip={{
|
||||
title: 'Themes can be created here and applied to the homepage.',
|
||||
highlightList: ['theme', 'themes', 'homepage', 'playlist'],
|
||||
description:
|
||||
'Themes are combinations of 5 colors and a background image, and can be added to a playlist. If a theme has been disabled, it will only be disabled with random/shuffle is enabled. If a theme is part of a playlist, it will appear while the playlist is active, regardless of random/shuffle.',
|
||||
}}
|
||||
searchValue={searchValue}
|
||||
setSearchValue={setSearchValue}
|
||||
searchPlaceholder={'Search Themes...'}
|
||||
isLoading={isLoading}
|
||||
setIsLoading={setIsLoading}
|
||||
/>
|
||||
<Stack mt={isMobile ? '11rem' : '7rem'} align='center'>
|
||||
<Group
|
||||
w={'85%'}
|
||||
justify='center'
|
||||
pos={'relative'}
|
||||
mb={isMobile ? '10rem' : '7.5rem'}
|
||||
>
|
||||
<Overlay
|
||||
display={
|
||||
currentTheme === 'random' && debouncedSearch === '' ? 'flex' : 'none'
|
||||
}
|
||||
blur={5}
|
||||
style={{
|
||||
zIndex: 190,
|
||||
borderRadius: '10px',
|
||||
marginTop: '-1rem',
|
||||
marginBottom: '-1rem',
|
||||
boxShadow: '0px 0px 10px 3px rgba(0, 0, 0, .8)',
|
||||
}}
|
||||
pos={'absolute'}
|
||||
/>
|
||||
{allThemes.length > 0 ? (
|
||||
allThemes.map((cardTheme: Theme) => (
|
||||
<Group key={cardTheme.name} pos={'relative'}>
|
||||
{cardTheme.name === currentTheme && (
|
||||
<FiChevronRight
|
||||
style={{
|
||||
position: 'absolute',
|
||||
left: -14,
|
||||
zIndex: 1,
|
||||
fontSize: '2rem',
|
||||
fontWeight: 'bold',
|
||||
borderRadius: '50%',
|
||||
backgroundColor: cardTheme.borderColor,
|
||||
color:
|
||||
cardTheme.borderColor === cardTheme.primaryColor
|
||||
? cardTheme.accentColor
|
||||
: cardTheme.primaryColor,
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
<Box
|
||||
style={{
|
||||
zIndex:
|
||||
currentTheme === 'random' &&
|
||||
(themePlaylists
|
||||
.filter(
|
||||
(t: ThemePlaylist) =>
|
||||
t.name.toLowerCase() === currentThemePlaylist.toLowerCase(),
|
||||
)[0]
|
||||
?.themeList.includes(`${cardTheme.id}`) ||
|
||||
cardTheme.name === theme.name)
|
||||
? 195
|
||||
: 0,
|
||||
}}
|
||||
>
|
||||
<ThemeCard
|
||||
allThemes={allThemeData}
|
||||
cardTheme={cardTheme}
|
||||
handleOpen={handleOpen}
|
||||
themePlaylists={themePlaylists}
|
||||
/>
|
||||
</Box>
|
||||
</Group>
|
||||
))
|
||||
) : (
|
||||
<Group
|
||||
w={'100%'}
|
||||
style={{ zIndex: 1000, display: 'flex', justifyContent: 'center' }}
|
||||
>
|
||||
<NoItemsFound />
|
||||
</Group>
|
||||
)}
|
||||
</Group>
|
||||
</Stack>
|
||||
<Group
|
||||
style={{
|
||||
backdropFilter: 'blur(5px) brightness(.75)',
|
||||
zIndex: 199,
|
||||
paddingTop: isMobile ? '.5rem' : '1.5rem',
|
||||
paddingBottom: '1.5rem',
|
||||
paddingLeft: '1rem',
|
||||
paddingRight: '1rem',
|
||||
width: '100%',
|
||||
position: 'absolute',
|
||||
bottom: isMobile ? '3.25rem' : 0,
|
||||
}}
|
||||
>
|
||||
<Group w={'100%'} justify={isMobile ? 'center' : 'space-between'}>
|
||||
<Text
|
||||
w={'fit-content'}
|
||||
className={textClasses.settingsSubTitle}
|
||||
classNames={textClasses}
|
||||
fz={isMobile ? '1rem' : undefined}
|
||||
style={
|
||||
isMobile
|
||||
? {
|
||||
position: 'absolute',
|
||||
top: -16,
|
||||
left: 4,
|
||||
padding: '.25rem',
|
||||
backgroundColor: 'var(--mantine-color-background-0)',
|
||||
backdropFilter: 'blur(5px) brightness(.25)',
|
||||
borderRadius: '10px',
|
||||
boxShadow: '2px -2px var(--mantine-color-accent-0)',
|
||||
}
|
||||
: undefined
|
||||
}
|
||||
>
|
||||
Current Settings:
|
||||
</Text>
|
||||
<Group>
|
||||
<Group>
|
||||
<Text
|
||||
style={{
|
||||
color: 'var(--mantine-color-primary-0)',
|
||||
fontWeight: 'bold',
|
||||
}}
|
||||
>
|
||||
Active Playlist:
|
||||
</Text>
|
||||
<Text
|
||||
style={{
|
||||
color: 'var(--mantine-color-primary-0)',
|
||||
fontWeight: 'bold',
|
||||
fontSize: isMobile ? '.8rem' : '1.2rem',
|
||||
}}
|
||||
>
|
||||
{currentThemePlaylist === 'All' ? 'All' : currentThemePlaylist}
|
||||
</Text>
|
||||
</Group>
|
||||
<Button
|
||||
onClick={() => {
|
||||
if (currentThemePlaylist === 'All') {
|
||||
navigate(`/${import.meta.env.VITE_BASE_URL}/settings/themePlaylists`);
|
||||
} else {
|
||||
setCurrentThemePlaylist('All');
|
||||
setCurrentTheme(theme.name);
|
||||
}
|
||||
}}
|
||||
style={{
|
||||
aspectRatio: isMobile ? 1 : undefined,
|
||||
padding: isMobile ? 0 : undefined,
|
||||
}}
|
||||
>
|
||||
{currentThemePlaylist === 'All' ? (
|
||||
isMobile ? (
|
||||
<FiMousePointer />
|
||||
) : (
|
||||
'Select Playlist'
|
||||
)
|
||||
) : isMobile ? (
|
||||
<FiStopCircle />
|
||||
) : (
|
||||
'Disable Playlist'
|
||||
)}
|
||||
</Button>
|
||||
<Tooltip
|
||||
label='Shuffle is always on when a playlist is active.'
|
||||
c={'var(--mantine-color-primary-0)'}
|
||||
bg={'var(--mantine-color-background-0)'}
|
||||
disabled={currentThemePlaylist === 'All'}
|
||||
>
|
||||
<Group>
|
||||
<Switch
|
||||
disabled={currentThemePlaylist !== 'All'}
|
||||
label={
|
||||
isMobile ? (
|
||||
<FaDice size={20} color={'var(--mantine-color-primary-0)'} />
|
||||
) : (
|
||||
<Text c={'var(--mantine-color-primary-0)'}>Shuffle Enabled</Text>
|
||||
)
|
||||
}
|
||||
labelPosition='left'
|
||||
checked={currentTheme === 'random'}
|
||||
onChange={(e) => {
|
||||
setCurrentTheme(e.target.checked ? 'random' : theme.name);
|
||||
setCurrentThemePlaylist('All');
|
||||
}}
|
||||
className={switchClasses.default}
|
||||
classNames={switchClasses}
|
||||
style={{
|
||||
zIndex: 250,
|
||||
}}
|
||||
/>
|
||||
</Group>
|
||||
</Tooltip>
|
||||
</Group>
|
||||
<Button
|
||||
style={{
|
||||
zIndex: 200,
|
||||
aspectRatio: isMobile ? 1 : undefined,
|
||||
padding: isMobile ? 0 : undefined,
|
||||
}}
|
||||
onClick={() => {
|
||||
openBackgroundModal();
|
||||
}}
|
||||
>
|
||||
{isMobile ? <FiEdit /> : 'Manage Backgrounds'}
|
||||
</Button>
|
||||
</Group>
|
||||
</Group>
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user