From 2845476d83fc15a396b15b2c4d9d9191ec7ac409 Mon Sep 17 00:00:00 2001
From: jeffvli <jeffvictorli@gmail.com>
Date: Wed, 8 Feb 2023 03:44:37 -0800
Subject: [PATCH] Migrate sidebar playlist to react-window

---
 .../components/sidebar-playlist-list.tsx      | 269 +++++++++---------
 .../features/sidebar/components/sidebar.tsx   |   1 +
 2 files changed, 134 insertions(+), 136 deletions(-)

diff --git a/src/renderer/features/sidebar/components/sidebar-playlist-list.tsx b/src/renderer/features/sidebar/components/sidebar-playlist-list.tsx
index c463d5ee..326cabc3 100644
--- a/src/renderer/features/sidebar/components/sidebar-playlist-list.tsx
+++ b/src/renderer/features/sidebar/components/sidebar-playlist-list.tsx
@@ -1,156 +1,153 @@
-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' }}
+const PlaylistRow = ({ index, data, style }: ListChildComponentProps) => (
+  <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',
+          },
+        },
+      }}
     >
-      <div
-        style={{
-          height: `${rowVirtualizer.getTotalSize()}px`,
-          position: 'relative',
+      <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
+        }
       >
-        {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%',
-            }}
+        {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}
           >
-            <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?.[virtualRow.index].id
-                    ? generatePath(AppRoute.PLAYLISTS_DETAIL, {
-                        playlistId: data?.items?.[virtualRow.index].id,
-                      })
-                    : undefined
-                }
-              >
-                {data?.items?.[virtualRow.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?.[virtualRow.index].id) return;
-                    handlePlayPlaylist(data?.items?.[virtualRow.index].id, Play.NOW);
-                  }}
-                >
-                  <RiPlayFill />
-                </Button>
-                <Button
-                  compact
-                  size="md"
-                  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);
-                  }}
-                >
-                  <RiAddBoxFill />
-                </Button>
-                <Button
-                  compact
-                  size="md"
-                  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);
-                  }}
-                >
-                  <RiAddCircleFill />
-                </Button>
-              </Group>
-            </Group>
-          </div>
-        ))}
-      </div>
-    </NativeScrollArea>
+            {PlaylistRow}
+          </FixedSizeList>
+        )}
+      </AutoSizer>
+    </Flex>
   );
 };
diff --git a/src/renderer/features/sidebar/components/sidebar.tsx b/src/renderer/features/sidebar/components/sidebar.tsx
index 1783f73d..aced0f5c 100644
--- a/src/renderer/features/sidebar/components/sidebar.tsx
+++ b/src/renderer/features/sidebar/components/sidebar.tsx
@@ -171,6 +171,7 @@ export const Sidebar = () => {
         spacing={0}
       >
         <MotionStack
+          h="100%"
           layout="position"
           spacing={0}
           sx={{ maxHeight: showImage ? `calc(100% - ${sidebar.leftWidth})` : '100%' }}