This repository has been archived on 2025-03-19. You can view files and clone it, but cannot push or open issues or pull requests.
feishin/src/renderer/features/sidebar/components/sidebar-playlist-list.tsx
2023-03-28 23:59:51 -07:00

155 lines
4.4 KiB
TypeScript

import { useCallback, useMemo } from 'react';
import { Flex, Group } from '@mantine/core';
import { RiAddBoxFill, RiAddCircleFill, RiPlayFill } from 'react-icons/ri';
import { generatePath } from 'react-router';
import { Link } from 'react-router-dom';
import { LibraryItem } from '/@/renderer/api/types';
import { Button, Text } from '/@/renderer/components';
import { usePlayQueueAdd } from '/@/renderer/features/player';
import { usePlaylistList } from '/@/renderer/features/playlists';
import { AppRoute } from '/@/renderer/router/routes';
import { Play } from '/@/renderer/types';
import AutoSizer from 'react-virtualized-auto-sizer';
import { FixedSizeList, ListChildComponentProps } from 'react-window';
import { useHideScrollbar } from '/@/renderer/hooks';
interface SidebarPlaylistListProps {
data: ReturnType<typeof usePlaylistList>['data'];
}
const PlaylistRow = ({ index, data, style }: ListChildComponentProps) => {
return (
<div style={{ margin: '0.5rem 0', padding: '0 1.5rem', ...style }}>
<Group
noWrap
className="sidebar-playlist-item"
pos="relative"
position="apart"
sx={{
'&:hover': {
'.sidebar-playlist-controls': {
display: 'flex',
},
'.sidebar-playlist-name': {
color: 'var(--sidebar-fg-hover) !important',
},
},
}}
>
<Text
className="sidebar-playlist-name"
component={Link}
overflow="hidden"
size="md"
sx={{
color: 'var(--sidebar-fg) !important',
cursor: 'default',
width: '100%',
}}
to={
data?.items[index].id
? generatePath(AppRoute.PLAYLISTS_DETAIL, {
playlistId: data?.items[index].id,
})
: undefined
}
>
{data?.items[index].name}
</Text>
<Group
noWrap
className="sidebar-playlist-controls"
display="none"
pos="absolute"
right="0"
spacing="sm"
>
<Button
compact
size="md"
tooltip={{ label: 'Play', openDelay: 500 }}
variant="default"
onClick={() => {
if (!data?.items?.[index].id) return;
data.handlePlay(data?.items[index].id, Play.NOW);
}}
>
<RiPlayFill />
</Button>
<Button
compact
size="md"
tooltip={{ label: 'Add to queue', openDelay: 500 }}
variant="default"
onClick={() => {
if (!data?.items?.[index].id) return;
data.handlePlay(data?.items[index].id, Play.LAST);
}}
>
<RiAddBoxFill />
</Button>
<Button
compact
size="md"
tooltip={{ label: 'Add to queue next', openDelay: 500 }}
variant="default"
onClick={() => {
if (!data?.items?.[index].id) return;
data.handlePlay(data?.items[index].id, Play.NEXT);
}}
>
<RiAddCircleFill />
</Button>
</Group>
</Group>
</div>
);
};
export const SidebarPlaylistList = ({ data }: SidebarPlaylistListProps) => {
const { isScrollbarHidden, hideScrollbarElementProps } = useHideScrollbar(0);
const handlePlayQueueAdd = usePlayQueueAdd();
const handlePlayPlaylist = useCallback(
(id: string, play: Play) => {
handlePlayQueueAdd?.({
byItemType: {
id: [id],
type: LibraryItem.PLAYLIST,
},
play,
});
},
[handlePlayQueueAdd],
);
const memoizedItemData = useMemo(() => {
return {
handlePlay: handlePlayPlaylist,
items: data?.items,
};
}, [data?.items, handlePlayPlaylist]);
return (
<Flex
h="100%"
{...hideScrollbarElementProps}
>
<AutoSizer>
{({ height, width }) => (
<FixedSizeList
className={isScrollbarHidden ? 'hide-scrollbar overlay-scrollbar' : 'overlay-scrollbar'}
height={height}
itemCount={data?.items?.length || 0}
itemData={memoizedItemData}
itemSize={25}
overscanCount={20}
width={width}
>
{PlaylistRow}
</FixedSizeList>
)}
</AutoSizer>
</Flex>
);
};