Migrate sidebar playlist to react-window
This commit is contained in:
parent
147b155d60
commit
2845476d83
2 changed files with 134 additions and 136 deletions
|
@ -1,71 +1,24 @@
|
||||||
import { Group } from '@mantine/core';
|
import { useCallback, useMemo } from 'react';
|
||||||
import { useVirtualizer } from '@tanstack/react-virtual';
|
import { Flex, Group } from '@mantine/core';
|
||||||
import { useRef } from 'react';
|
|
||||||
import { RiAddBoxFill, RiAddCircleFill, RiPlayFill } from 'react-icons/ri';
|
import { RiAddBoxFill, RiAddCircleFill, RiPlayFill } from 'react-icons/ri';
|
||||||
import { generatePath } from 'react-router';
|
import { generatePath } from 'react-router';
|
||||||
import { Link } from 'react-router-dom';
|
import { Link } from 'react-router-dom';
|
||||||
import { LibraryItem } from '/@/renderer/api/types';
|
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 { usePlayQueueAdd } from '/@/renderer/features/player';
|
||||||
import { usePlaylistList } from '/@/renderer/features/playlists';
|
import { usePlaylistList } from '/@/renderer/features/playlists';
|
||||||
import { AppRoute } from '/@/renderer/router/routes';
|
import { AppRoute } from '/@/renderer/router/routes';
|
||||||
import { Play } from '/@/renderer/types';
|
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 {
|
interface SidebarPlaylistListProps {
|
||||||
data: ReturnType<typeof usePlaylistList>['data'];
|
data: ReturnType<typeof usePlaylistList>['data'];
|
||||||
}
|
}
|
||||||
|
|
||||||
export const SidebarPlaylistList = ({ data }: SidebarPlaylistListProps) => {
|
const PlaylistRow = ({ index, data, style }: ListChildComponentProps) => (
|
||||||
const scrollAreaRef = useRef<HTMLDivElement | null>(null);
|
<div style={{ margin: '0.5rem 0', padding: '0 1.5rem', ...style }}>
|
||||||
|
|
||||||
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%',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Group
|
<Group
|
||||||
noWrap
|
noWrap
|
||||||
className="sidebar-playlist-item"
|
className="sidebar-playlist-item"
|
||||||
|
@ -93,14 +46,14 @@ export const SidebarPlaylistList = ({ data }: SidebarPlaylistListProps) => {
|
||||||
width: '100%',
|
width: '100%',
|
||||||
}}
|
}}
|
||||||
to={
|
to={
|
||||||
data?.items?.[virtualRow.index].id
|
data?.items[index].id
|
||||||
? generatePath(AppRoute.PLAYLISTS_DETAIL, {
|
? generatePath(AppRoute.PLAYLISTS_DETAIL, {
|
||||||
playlistId: data?.items?.[virtualRow.index].id,
|
playlistId: data?.items[index].id,
|
||||||
})
|
})
|
||||||
: undefined
|
: undefined
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
{data?.items?.[virtualRow.index].name}
|
{data?.items[index].name}
|
||||||
</Text>
|
</Text>
|
||||||
<Group
|
<Group
|
||||||
noWrap
|
noWrap
|
||||||
|
@ -116,8 +69,8 @@ export const SidebarPlaylistList = ({ data }: SidebarPlaylistListProps) => {
|
||||||
tooltip={{ label: 'Play', openDelay: 500 }}
|
tooltip={{ label: 'Play', openDelay: 500 }}
|
||||||
variant="default"
|
variant="default"
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
if (!data?.items?.[virtualRow.index].id) return;
|
if (!data?.items?.[index].id) return;
|
||||||
handlePlayPlaylist(data?.items?.[virtualRow.index].id, Play.NOW);
|
data.handlePlay(data?.items[index].id, Play.NOW);
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<RiPlayFill />
|
<RiPlayFill />
|
||||||
|
@ -128,8 +81,8 @@ export const SidebarPlaylistList = ({ data }: SidebarPlaylistListProps) => {
|
||||||
tooltip={{ label: 'Add to queue', openDelay: 500 }}
|
tooltip={{ label: 'Add to queue', openDelay: 500 }}
|
||||||
variant="default"
|
variant="default"
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
if (!data?.items?.[virtualRow.index].id) return;
|
if (!data?.items?.[index].id) return;
|
||||||
handlePlayPlaylist(data?.items?.[virtualRow.index].id, Play.LAST);
|
data.handlePlay(data?.items[index].id, Play.LAST);
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<RiAddBoxFill />
|
<RiAddBoxFill />
|
||||||
|
@ -140,8 +93,8 @@ export const SidebarPlaylistList = ({ data }: SidebarPlaylistListProps) => {
|
||||||
tooltip={{ label: 'Add to queue next', openDelay: 500 }}
|
tooltip={{ label: 'Add to queue next', openDelay: 500 }}
|
||||||
variant="default"
|
variant="default"
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
if (!data?.items?.[virtualRow.index].id) return;
|
if (!data?.items?.[index].id) return;
|
||||||
handlePlayPlaylist(data?.items?.[virtualRow.index].id, Play.NEXT);
|
data.handlePlay(data?.items[index].id, Play.NEXT);
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<RiAddCircleFill />
|
<RiAddCircleFill />
|
||||||
|
@ -149,8 +102,52 @@ export const SidebarPlaylistList = ({ data }: SidebarPlaylistListProps) => {
|
||||||
</Group>
|
</Group>
|
||||||
</Group>
|
</Group>
|
||||||
</div>
|
</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>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
|
@ -171,6 +171,7 @@ export const Sidebar = () => {
|
||||||
spacing={0}
|
spacing={0}
|
||||||
>
|
>
|
||||||
<MotionStack
|
<MotionStack
|
||||||
|
h="100%"
|
||||||
layout="position"
|
layout="position"
|
||||||
spacing={0}
|
spacing={0}
|
||||||
sx={{ maxHeight: showImage ? `calc(100% - ${sidebar.leftWidth})` : '100%' }}
|
sx={{ maxHeight: showImage ? `calc(100% - ${sidebar.leftWidth})` : '100%' }}
|
||||||
|
|
Reference in a new issue