pogmommy/feishin
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Migrate sidebar playlist to react-window

Browse source
This commit is contained in:
jeffvli 2023-02-08 03:44:37 -08:00
parent 147b155d60
commit 2845476d83
2 changed files with 134 additions and 136 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

131
src/renderer/features/sidebar/components/sidebar-playlist-list.tsx
View file

@ -1,71 +1,24 @@
import { Group } from '@mantine/core';
import { useVirtualizer } from '@tanstack/react-virtual';
import { useRef } from 'react';
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, NativeScrollArea, Text } from '/@/renderer/components';
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'];
}
export const SidebarPlaylistList = ({ data }: SidebarPlaylistListProps) => {
const scrollAreaRef = useRef<HTMLDivElement | null>(null);
const handlePlayQueueAdd = usePlayQueueAdd();
const handlePlayPlaylist = (id: string, play: Play) => {
handlePlayQueueAdd?.({
byItemType: {
id: [id],
type: LibraryItem.PLAYLIST,
},
play,
});
};
const rowVirtualizer = useVirtualizer({
count: data?.items?.length || 0,
estimateSize: () => 25,
getScrollElement: () => {
return scrollAreaRef.current;
},
overscan: 5,
});
return (
<NativeScrollArea
ref={scrollAreaRef}
noHeader
scrollBarOffset="0px"
scrollHideDelay={0}
style={{ margin: '0.5rem 0', padding: '0 1.5rem' }}
>
<div
style={{
height: `${rowVirtualizer.getTotalSize()}px`,
position: 'relative',
width: '100%',
}}
>
{rowVirtualizer.getVirtualItems().map((virtualRow) => (
<div
key={virtualRow.index}
style={{
height: `${virtualRow.size}px`,
left: 0,
position: 'absolute',
top: 0,
transform: `translateY(${virtualRow.start}px)`,
width: '100%',
}}
>
const PlaylistRow = ({ index, data, style }: ListChildComponentProps) => (
<div style={{ margin: '0.5rem 0', padding: '0 1.5rem', ...style }}>
<Group
noWrap
className="sidebar-playlist-item"
@ -93,14 +46,14 @@ export const SidebarPlaylistList = ({ data }: SidebarPlaylistListProps) => {
width: '100%',
}}
to={
data?.items?.[virtualRow.index].id
data?.items[index].id
? generatePath(AppRoute.PLAYLISTS_DETAIL, {
playlistId: data?.items?.[virtualRow.index].id,
playlistId: data?.items[index].id,
})
: undefined
}
>
{data?.items?.[virtualRow.index].name}
{data?.items[index].name}
</Text>
<Group
noWrap
@ -116,8 +69,8 @@ export const SidebarPlaylistList = ({ data }: SidebarPlaylistListProps) => {
tooltip={{ label: 'Play', openDelay: 500 }}
variant="default"
onClick={() => {
if (!data?.items?.[virtualRow.index].id) return;
handlePlayPlaylist(data?.items?.[virtualRow.index].id, Play.NOW);
if (!data?.items?.[index].id) return;
data.handlePlay(data?.items[index].id, Play.NOW);
}}
>
<RiPlayFill />
@ -128,8 +81,8 @@ export const SidebarPlaylistList = ({ data }: SidebarPlaylistListProps) => {
tooltip={{ label: 'Add to queue', openDelay: 500 }}
variant="default"
onClick={() => {
if (!data?.items?.[virtualRow.index].id) return;
handlePlayPlaylist(data?.items?.[virtualRow.index].id, Play.LAST);
if (!data?.items?.[index].id) return;
data.handlePlay(data?.items[index].id, Play.LAST);
}}
>
<RiAddBoxFill />
@ -140,8 +93,8 @@ export const SidebarPlaylistList = ({ data }: SidebarPlaylistListProps) => {
tooltip={{ label: 'Add to queue next', openDelay: 500 }}
variant="default"
onClick={() => {
if (!data?.items?.[virtualRow.index].id) return;
handlePlayPlaylist(data?.items?.[virtualRow.index].id, Play.NEXT);
if (!data?.items?.[index].id) return;
data.handlePlay(data?.items[index].id, Play.NEXT);
}}
>
<RiAddCircleFill />
@ -149,8 +102,52 @@ export const SidebarPlaylistList = ({ data }: SidebarPlaylistListProps) => {
</Group>
</Group>
</div>
))}
</div>
</NativeScrollArea>
);
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>
);
};

1
src/renderer/features/sidebar/components/sidebar.tsx
View file

@ -171,6 +171,7 @@ export const Sidebar = () => {
spacing={0}
>
<MotionStack
h="100%"
layout="position"
spacing={0}
sx={{ maxHeight: showImage ? `calc(100% - ${sidebar.leftWidth})` : '100%' }}