mirror of
https://github.com/antebudimir/feishin.git
synced 2026-01-02 02:43:33 +00:00
Lint all files
This commit is contained in:
jeffvli
parent
22af76b4d6
commit
30e52ebb54
334 changed files with 76519 additions and 75932 deletions
|
|
@ -4,37 +4,37 @@ import { closeAllModals, openModal } from '@mantine/modals';
|
|||
import { AnimatePresence, motion } from 'framer-motion';
|
||||
import { IconType } from 'react-icons';
|
||||
import {
|
||||
RiAddFill,
|
||||
RiAlbumFill,
|
||||
RiAlbumLine,
|
||||
RiArrowDownSLine,
|
||||
RiDiscLine,
|
||||
RiFlag2Fill,
|
||||
RiFlagLine,
|
||||
RiFolder3Fill,
|
||||
RiFolder3Line,
|
||||
RiHome6Fill,
|
||||
RiHome6Line,
|
||||
RiListUnordered,
|
||||
RiMusic2Fill,
|
||||
RiMusic2Line,
|
||||
RiPlayLine,
|
||||
RiSearchFill,
|
||||
RiUserVoiceFill,
|
||||
RiUserVoiceLine,
|
||||
RiSearchLine,
|
||||
RiPlayFill,
|
||||
RiSettings2Line,
|
||||
RiSettings2Fill,
|
||||
RiPlayListLine,
|
||||
RiPlayListFill,
|
||||
RiAddFill,
|
||||
RiAlbumFill,
|
||||
RiAlbumLine,
|
||||
RiArrowDownSLine,
|
||||
RiDiscLine,
|
||||
RiFlag2Fill,
|
||||
RiFlagLine,
|
||||
RiFolder3Fill,
|
||||
RiFolder3Line,
|
||||
RiHome6Fill,
|
||||
RiHome6Line,
|
||||
RiListUnordered,
|
||||
RiMusic2Fill,
|
||||
RiMusic2Line,
|
||||
RiPlayLine,
|
||||
RiSearchFill,
|
||||
RiUserVoiceFill,
|
||||
RiUserVoiceLine,
|
||||
RiSearchLine,
|
||||
RiPlayFill,
|
||||
RiSettings2Line,
|
||||
RiSettings2Fill,
|
||||
RiPlayListLine,
|
||||
RiPlayListFill,
|
||||
} from 'react-icons/ri';
|
||||
import { generatePath, Link, useLocation } from 'react-router-dom';
|
||||
import styled from 'styled-components';
|
||||
import {
|
||||
SidebarItemType,
|
||||
useGeneralSettings,
|
||||
useWindowSettings,
|
||||
SidebarItemType,
|
||||
useGeneralSettings,
|
||||
useWindowSettings,
|
||||
} from '../../../store/settings.store';
|
||||
import { LibraryItem, PlaylistListSort, ServerType, SortOrder } from '/@/renderer/api/types';
|
||||
import { Button, MotionStack, Spinner, Tooltip } from '/@/renderer/components';
|
||||
|
|
@ -45,289 +45,291 @@ import { SidebarPlaylistList } from '/@/renderer/features/sidebar/components/sid
|
|||
import { useContainerQuery } from '/@/renderer/hooks';
|
||||
import { AppRoute } from '/@/renderer/router/routes';
|
||||
import {
|
||||
useAppStoreActions,
|
||||
useCurrentServer,
|
||||
useCurrentSong,
|
||||
useFullScreenPlayerStore,
|
||||
useSetFullScreenPlayerStore,
|
||||
useSidebarStore,
|
||||
useAppStoreActions,
|
||||
useCurrentServer,
|
||||
useCurrentSong,
|
||||
useFullScreenPlayerStore,
|
||||
useSetFullScreenPlayerStore,
|
||||
useSidebarStore,
|
||||
} from '/@/renderer/store';
|
||||
import { fadeIn } from '/@/renderer/styles';
|
||||
import { Platform } from '/@/renderer/types';
|
||||
|
||||
const SidebarContainer = styled.div<{ windowBarStyle: Platform }>`
|
||||
height: 100%;
|
||||
max-height: ${(props) =>
|
||||
props.windowBarStyle === Platform.WEB || props.windowBarStyle === Platform.LINUX
|
||||
? 'calc(100vh - 149px)'
|
||||
: 'calc(100vh - 179px)'}; // Playerbar (90px), titlebar (65px), windowbar (30px)
|
||||
user-select: none;
|
||||
height: 100%;
|
||||
max-height: ${(props) =>
|
||||
props.windowBarStyle === Platform.WEB || props.windowBarStyle === Platform.LINUX
|
||||
? 'calc(100vh - 149px)'
|
||||
: 'calc(100vh - 179px)'}; // Playerbar (90px), titlebar (65px), windowbar (30px)
|
||||
user-select: none;
|
||||
`;
|
||||
|
||||
const ImageContainer = styled(motion.div)<{ height: string }>`
|
||||
position: relative;
|
||||
height: ${(props) => props.height};
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
height: ${(props) => props.height};
|
||||
cursor: pointer;
|
||||
|
||||
${fadeIn};
|
||||
animation: fadein 0.2s ease-in-out;
|
||||
${fadeIn};
|
||||
animation: fadein 0.2s ease-in-out;
|
||||
|
||||
button {
|
||||
display: none;
|
||||
}
|
||||
button {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&:hover button {
|
||||
display: block;
|
||||
}
|
||||
&:hover button {
|
||||
display: block;
|
||||
}
|
||||
`;
|
||||
|
||||
const SidebarImage = styled.img`
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
background: var(--placeholder-bg);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
background: var(--placeholder-bg);
|
||||
`;
|
||||
|
||||
const sidebarItemMap = {
|
||||
[AppRoute.HOME]: {
|
||||
activeIcon: RiHome6Fill,
|
||||
icon: RiHome6Line,
|
||||
},
|
||||
[AppRoute.LIBRARY_ALBUMS]: {
|
||||
activeIcon: RiAlbumFill,
|
||||
icon: RiAlbumLine,
|
||||
},
|
||||
[AppRoute.LIBRARY_ALBUM_ARTISTS]: {
|
||||
activeIcon: RiUserVoiceFill,
|
||||
icon: RiUserVoiceLine,
|
||||
},
|
||||
[AppRoute.PLAYLISTS]: {
|
||||
activeIcon: RiPlayListFill,
|
||||
icon: RiPlayListLine,
|
||||
},
|
||||
[AppRoute.LIBRARY_SONGS]: {
|
||||
activeIcon: RiMusic2Fill,
|
||||
icon: RiMusic2Line,
|
||||
},
|
||||
[AppRoute.LIBRARY_FOLDERS]: {
|
||||
activeIcon: RiFolder3Fill,
|
||||
icon: RiFolder3Line,
|
||||
},
|
||||
[AppRoute.LIBRARY_GENRES]: {
|
||||
activeIcon: RiFlag2Fill,
|
||||
icon: RiFlagLine,
|
||||
},
|
||||
[generatePath(AppRoute.SEARCH, { itemType: LibraryItem.SONG })]: {
|
||||
activeIcon: RiSearchFill,
|
||||
icon: RiSearchLine,
|
||||
},
|
||||
[AppRoute.SETTINGS]: {
|
||||
activeIcon: RiSettings2Fill,
|
||||
icon: RiSettings2Line,
|
||||
},
|
||||
[AppRoute.NOW_PLAYING]: {
|
||||
activeIcon: RiPlayFill,
|
||||
icon: RiPlayLine,
|
||||
},
|
||||
[AppRoute.HOME]: {
|
||||
activeIcon: RiHome6Fill,
|
||||
icon: RiHome6Line,
|
||||
},
|
||||
[AppRoute.LIBRARY_ALBUMS]: {
|
||||
activeIcon: RiAlbumFill,
|
||||
icon: RiAlbumLine,
|
||||
},
|
||||
[AppRoute.LIBRARY_ALBUM_ARTISTS]: {
|
||||
activeIcon: RiUserVoiceFill,
|
||||
icon: RiUserVoiceLine,
|
||||
},
|
||||
[AppRoute.PLAYLISTS]: {
|
||||
activeIcon: RiPlayListFill,
|
||||
icon: RiPlayListLine,
|
||||
},
|
||||
[AppRoute.LIBRARY_SONGS]: {
|
||||
activeIcon: RiMusic2Fill,
|
||||
icon: RiMusic2Line,
|
||||
},
|
||||
[AppRoute.LIBRARY_FOLDERS]: {
|
||||
activeIcon: RiFolder3Fill,
|
||||
icon: RiFolder3Line,
|
||||
},
|
||||
[AppRoute.LIBRARY_GENRES]: {
|
||||
activeIcon: RiFlag2Fill,
|
||||
icon: RiFlagLine,
|
||||
},
|
||||
[generatePath(AppRoute.SEARCH, { itemType: LibraryItem.SONG })]: {
|
||||
activeIcon: RiSearchFill,
|
||||
icon: RiSearchLine,
|
||||
},
|
||||
[AppRoute.SETTINGS]: {
|
||||
activeIcon: RiSettings2Fill,
|
||||
icon: RiSettings2Line,
|
||||
},
|
||||
[AppRoute.NOW_PLAYING]: {
|
||||
activeIcon: RiPlayFill,
|
||||
icon: RiPlayLine,
|
||||
},
|
||||
};
|
||||
|
||||
export const Sidebar = () => {
|
||||
const location = useLocation();
|
||||
const sidebar = useSidebarStore();
|
||||
const { setSideBar } = useAppStoreActions();
|
||||
const { windowBarStyle } = useWindowSettings();
|
||||
const { sidebarPlaylistList } = useGeneralSettings();
|
||||
const imageUrl = useCurrentSong()?.imageUrl;
|
||||
const server = useCurrentServer();
|
||||
const location = useLocation();
|
||||
const sidebar = useSidebarStore();
|
||||
const { setSideBar } = useAppStoreActions();
|
||||
const { windowBarStyle } = useWindowSettings();
|
||||
const { sidebarPlaylistList } = useGeneralSettings();
|
||||
const imageUrl = useCurrentSong()?.imageUrl;
|
||||
const server = useCurrentServer();
|
||||
|
||||
const upsizedImageUrl = imageUrl
|
||||
?.replace(/size=\d+/, 'size=300')
|
||||
.replace(/width=\d+/, 'width=300')
|
||||
.replace(/height=\d+/, 'height=300');
|
||||
const upsizedImageUrl = imageUrl
|
||||
?.replace(/size=\d+/, 'size=300')
|
||||
.replace(/width=\d+/, 'width=300')
|
||||
.replace(/height=\d+/, 'height=300');
|
||||
|
||||
const showImage = sidebar.image;
|
||||
const showImage = sidebar.image;
|
||||
|
||||
const handleCreatePlaylistModal = (e: MouseEvent<HTMLButtonElement>) => {
|
||||
e.stopPropagation();
|
||||
const handleCreatePlaylistModal = (e: MouseEvent<HTMLButtonElement>) => {
|
||||
e.stopPropagation();
|
||||
|
||||
openModal({
|
||||
children: <CreatePlaylistForm onCancel={() => closeAllModals()} />,
|
||||
size: server?.type === ServerType?.NAVIDROME ? 'xl' : 'sm',
|
||||
title: 'Create Playlist',
|
||||
openModal({
|
||||
children: <CreatePlaylistForm onCancel={() => closeAllModals()} />,
|
||||
size: server?.type === ServerType?.NAVIDROME ? 'xl' : 'sm',
|
||||
title: 'Create Playlist',
|
||||
});
|
||||
};
|
||||
|
||||
const playlistsQuery = usePlaylistList({
|
||||
query: {
|
||||
sortBy: PlaylistListSort.NAME,
|
||||
sortOrder: SortOrder.ASC,
|
||||
startIndex: 0,
|
||||
},
|
||||
serverId: server?.id,
|
||||
});
|
||||
};
|
||||
|
||||
const playlistsQuery = usePlaylistList({
|
||||
query: {
|
||||
sortBy: PlaylistListSort.NAME,
|
||||
sortOrder: SortOrder.ASC,
|
||||
startIndex: 0,
|
||||
},
|
||||
serverId: server?.id,
|
||||
});
|
||||
const setFullScreenPlayerStore = useSetFullScreenPlayerStore();
|
||||
const { expanded: isFullScreenPlayerExpanded } = useFullScreenPlayerStore();
|
||||
const expandFullScreenPlayer = () => {
|
||||
setFullScreenPlayerStore({ expanded: !isFullScreenPlayerExpanded });
|
||||
};
|
||||
|
||||
const setFullScreenPlayerStore = useSetFullScreenPlayerStore();
|
||||
const { expanded: isFullScreenPlayerExpanded } = useFullScreenPlayerStore();
|
||||
const expandFullScreenPlayer = () => {
|
||||
setFullScreenPlayerStore({ expanded: !isFullScreenPlayerExpanded });
|
||||
};
|
||||
const cq = useContainerQuery({ sm: 300 });
|
||||
|
||||
const cq = useContainerQuery({ sm: 300 });
|
||||
const { sidebarItems } = useGeneralSettings();
|
||||
|
||||
const { sidebarItems } = useGeneralSettings();
|
||||
const sidebarItemsWithRoute: (SidebarItemType & {
|
||||
activeIcon: IconType;
|
||||
icon: IconType;
|
||||
})[] = useMemo(() => {
|
||||
if (!sidebarItems) return [];
|
||||
|
||||
const sidebarItemsWithRoute: (SidebarItemType & {
|
||||
activeIcon: IconType;
|
||||
icon: IconType;
|
||||
})[] = useMemo(() => {
|
||||
if (!sidebarItems) return [];
|
||||
const items = sidebarItems
|
||||
.filter((item) => !item.disabled)
|
||||
.map((item) => ({
|
||||
...item,
|
||||
...sidebarItemMap[item.route as keyof typeof sidebarItemMap],
|
||||
}));
|
||||
|
||||
const items = sidebarItems
|
||||
.filter((item) => !item.disabled)
|
||||
.map((item) => ({
|
||||
...item,
|
||||
...sidebarItemMap[item.route as keyof typeof sidebarItemMap],
|
||||
}));
|
||||
return items;
|
||||
}, [sidebarItems]);
|
||||
|
||||
return items;
|
||||
}, [sidebarItems]);
|
||||
|
||||
return (
|
||||
<SidebarContainer
|
||||
ref={cq.ref}
|
||||
windowBarStyle={windowBarStyle}
|
||||
>
|
||||
<ActionBar />
|
||||
<Stack
|
||||
h="100%"
|
||||
justify="space-between"
|
||||
spacing={0}
|
||||
>
|
||||
<MotionStack
|
||||
h="100%"
|
||||
layout="position"
|
||||
spacing={0}
|
||||
sx={{ maxHeight: showImage ? `calc(100% - ${sidebar.leftWidth})` : '100%' }}
|
||||
return (
|
||||
<SidebarContainer
|
||||
ref={cq.ref}
|
||||
windowBarStyle={windowBarStyle}
|
||||
>
|
||||
<Stack spacing={0}>
|
||||
{sidebarItemsWithRoute.map((item) => (
|
||||
<SidebarItem
|
||||
key={`sidebar-${item.route}`}
|
||||
to={item.route}
|
||||
>
|
||||
<Group spacing="sm">
|
||||
{location.pathname === item.route ? (
|
||||
<item.activeIcon size="1.1em" />
|
||||
) : (
|
||||
<item.icon size="1.1em" />
|
||||
)}
|
||||
{item.label}
|
||||
</Group>
|
||||
</SidebarItem>
|
||||
))}
|
||||
</Stack>
|
||||
<Divider
|
||||
mx="1rem"
|
||||
my="0.5rem"
|
||||
/>
|
||||
{sidebarPlaylistList && (
|
||||
<>
|
||||
<Group
|
||||
position="apart"
|
||||
pt="1rem"
|
||||
px="1.5rem"
|
||||
>
|
||||
<Group>
|
||||
<Box
|
||||
fw="600"
|
||||
sx={{ fontSize: '1.2rem' }}
|
||||
>
|
||||
Playlists
|
||||
</Box>
|
||||
{playlistsQuery.isLoading && <Spinner />}
|
||||
</Group>
|
||||
<Group spacing="sm">
|
||||
<Button
|
||||
compact
|
||||
size="md"
|
||||
tooltip={{ label: 'Create playlist', openDelay: 500 }}
|
||||
variant="default"
|
||||
onClick={handleCreatePlaylistModal}
|
||||
>
|
||||
<RiAddFill size="1em" />
|
||||
</Button>
|
||||
<Button
|
||||
compact
|
||||
component={Link}
|
||||
size="md"
|
||||
to={AppRoute.PLAYLISTS}
|
||||
tooltip={{ label: 'Playlist list', openDelay: 500 }}
|
||||
variant="default"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<RiListUnordered size="1em" />
|
||||
</Button>
|
||||
</Group>
|
||||
</Group>
|
||||
<SidebarPlaylistList data={playlistsQuery.data} />
|
||||
</>
|
||||
)}
|
||||
</MotionStack>
|
||||
<AnimatePresence
|
||||
initial={false}
|
||||
mode="popLayout"
|
||||
>
|
||||
{showImage && (
|
||||
<ImageContainer
|
||||
key="sidebar-image"
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
exit={{ opacity: 0, y: 200 }}
|
||||
height={sidebar.leftWidth}
|
||||
initial={{ opacity: 0, y: 200 }}
|
||||
role="button"
|
||||
transition={{ duration: 0.3, ease: 'easeInOut' }}
|
||||
onClick={expandFullScreenPlayer}
|
||||
<ActionBar />
|
||||
<Stack
|
||||
h="100%"
|
||||
justify="space-between"
|
||||
spacing={0}
|
||||
>
|
||||
<Tooltip
|
||||
label="Toggle fullscreen player"
|
||||
openDelay={500}
|
||||
>
|
||||
{upsizedImageUrl ? (
|
||||
<SidebarImage
|
||||
loading="eager"
|
||||
src={upsizedImageUrl}
|
||||
/>
|
||||
) : (
|
||||
<Center sx={{ background: 'var(--placeholder-bg)', height: '100%' }}>
|
||||
<RiDiscLine
|
||||
color="var(--placeholder-fg)"
|
||||
size={50}
|
||||
<MotionStack
|
||||
h="100%"
|
||||
layout="position"
|
||||
spacing={0}
|
||||
sx={{ maxHeight: showImage ? `calc(100% - ${sidebar.leftWidth})` : '100%' }}
|
||||
>
|
||||
<Stack spacing={0}>
|
||||
{sidebarItemsWithRoute.map((item) => (
|
||||
<SidebarItem
|
||||
key={`sidebar-${item.route}`}
|
||||
to={item.route}
|
||||
>
|
||||
<Group spacing="sm">
|
||||
{location.pathname === item.route ? (
|
||||
<item.activeIcon size="1.1em" />
|
||||
) : (
|
||||
<item.icon size="1.1em" />
|
||||
)}
|
||||
{item.label}
|
||||
</Group>
|
||||
</SidebarItem>
|
||||
))}
|
||||
</Stack>
|
||||
<Divider
|
||||
mx="1rem"
|
||||
my="0.5rem"
|
||||
/>
|
||||
</Center>
|
||||
)}
|
||||
</Tooltip>
|
||||
<Button
|
||||
compact
|
||||
opacity={0.8}
|
||||
radius={100}
|
||||
size="md"
|
||||
sx={{ cursor: 'default', position: 'absolute', right: 5, top: 5 }}
|
||||
tooltip={{ label: 'Collapse', openDelay: 500 }}
|
||||
variant="default"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
setSideBar({ image: false });
|
||||
}}
|
||||
>
|
||||
<RiArrowDownSLine
|
||||
color="white"
|
||||
size={20}
|
||||
/>
|
||||
</Button>
|
||||
</ImageContainer>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</Stack>
|
||||
</SidebarContainer>
|
||||
);
|
||||
{sidebarPlaylistList && (
|
||||
<>
|
||||
<Group
|
||||
position="apart"
|
||||
pt="1rem"
|
||||
px="1.5rem"
|
||||
>
|
||||
<Group>
|
||||
<Box
|
||||
fw="600"
|
||||
sx={{ fontSize: '1.2rem' }}
|
||||
>
|
||||
Playlists
|
||||
</Box>
|
||||
{playlistsQuery.isLoading && <Spinner />}
|
||||
</Group>
|
||||
<Group spacing="sm">
|
||||
<Button
|
||||
compact
|
||||
size="md"
|
||||
tooltip={{ label: 'Create playlist', openDelay: 500 }}
|
||||
variant="default"
|
||||
onClick={handleCreatePlaylistModal}
|
||||
>
|
||||
<RiAddFill size="1em" />
|
||||
</Button>
|
||||
<Button
|
||||
compact
|
||||
component={Link}
|
||||
size="md"
|
||||
to={AppRoute.PLAYLISTS}
|
||||
tooltip={{ label: 'Playlist list', openDelay: 500 }}
|
||||
variant="default"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<RiListUnordered size="1em" />
|
||||
</Button>
|
||||
</Group>
|
||||
</Group>
|
||||
<SidebarPlaylistList data={playlistsQuery.data} />
|
||||
</>
|
||||
)}
|
||||
</MotionStack>
|
||||
<AnimatePresence
|
||||
initial={false}
|
||||
mode="popLayout"
|
||||
>
|
||||
{showImage && (
|
||||
<ImageContainer
|
||||
key="sidebar-image"
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
exit={{ opacity: 0, y: 200 }}
|
||||
height={sidebar.leftWidth}
|
||||
initial={{ opacity: 0, y: 200 }}
|
||||
role="button"
|
||||
transition={{ duration: 0.3, ease: 'easeInOut' }}
|
||||
onClick={expandFullScreenPlayer}
|
||||
>
|
||||
<Tooltip
|
||||
label="Toggle fullscreen player"
|
||||
openDelay={500}
|
||||
>
|
||||
{upsizedImageUrl ? (
|
||||
<SidebarImage
|
||||
loading="eager"
|
||||
src={upsizedImageUrl}
|
||||
/>
|
||||
) : (
|
||||
<Center
|
||||
sx={{ background: 'var(--placeholder-bg)', height: '100%' }}
|
||||
>
|
||||
<RiDiscLine
|
||||
color="var(--placeholder-fg)"
|
||||
size={50}
|
||||
/>
|
||||
</Center>
|
||||
)}
|
||||
</Tooltip>
|
||||
<Button
|
||||
compact
|
||||
opacity={0.8}
|
||||
radius={100}
|
||||
size="md"
|
||||
sx={{ cursor: 'default', position: 'absolute', right: 5, top: 5 }}
|
||||
tooltip={{ label: 'Collapse', openDelay: 500 }}
|
||||
variant="default"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
setSideBar({ image: false });
|
||||
}}
|
||||
>
|
||||
<RiArrowDownSLine
|
||||
color="white"
|
||||
size={20}
|
||||
/>
|
||||
</Button>
|
||||
</ImageContainer>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</Stack>
|
||||
</SidebarContainer>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue