Highlight currently playing song on all song tables (#178)

2023-07-18 18:39:39 -07:00 · 2023-07-18 18:39:39 -07:00 · ece7fecc76
commit ece7fecc76
parent 919016ca5a
13 changed files with 299 additions and 194 deletions
--- a/src/renderer/components/virtual-table/cells/combined-title-cell.tsx
+++ b/src/renderer/components/virtual-table/cells/combined-title-cell.tsx
@ -102,6 +102,7 @@ export const CombinedTitleCell = ({ value, rowIndex, node }: ICellRendererParams
            </ImageWrapper>
            <MetadataWrapper>
                <Text
+                    className="current-song-child"
                    overflow="hidden"
                    size="md"
                >
--- a/src/renderer/components/virtual-table/cells/generic-cell.tsx
+++ b/src/renderer/components/virtual-table/cells/generic-cell.tsx
@ -1,20 +1,10 @@
 import type { ICellRendererParams } from '@ag-grid-community/core';
-import { motion, Variants } from 'framer-motion';
 import { Link } from 'react-router-dom';
 import styled from 'styled-components';
 import { Skeleton } from '/@/renderer/components/skeleton';
 import { Text } from '/@/renderer/components/text';

-export const CELL_VARIANTS: Variants = {
-    animate: {
-        opacity: 1,
-    },
-    initial: {
-        opacity: 0,
-    },
-};
-
-export const CellContainer = styled(motion.div)<{ position?: 'left' | 'center' | 'right' }>`
+export const CellContainer = styled.div<{ position?: 'left' | 'center' | 'right' }>`
    display: flex;
    align-items: center;
    justify-content: ${(props) =>
--- a/src/renderer/components/virtual-table/cells/title-cell.tsx
+++ b/src/renderer/components/virtual-table/cells/title-cell.tsx
@ -0,0 +1,29 @@
+import type { ICellRendererParams } from '@ag-grid-community/core';
+import { Skeleton } from '/@/renderer/components/skeleton';
+import { Text } from '/@/renderer/components/text';
+import { CellContainer } from '/@/renderer/components/virtual-table/cells/generic-cell';
+
+export const TitleCell = ({ value }: ICellRendererParams) => {
+    if (value === undefined) {
+        return (
+            <CellContainer position="left">
+                <Skeleton
+                    height="1rem"
+                    width="80%"
+                />
+            </CellContainer>
+        );
+    }
+
+    return (
+        <CellContainer position="left">
+            <Text
+                className="current-song-child"
+                overflow="hidden"
+                size="md"
+            >
+                {value}
+            </Text>
+        </CellContainer>
+    );
+};
--- a/src/renderer/components/virtual-table/hooks/use-current-song-row-styles.ts
+++ b/src/renderer/components/virtual-table/hooks/use-current-song-row-styles.ts
@ -0,0 +1,57 @@
+import { RowClassRules, RowNode } from '@ag-grid-community/core';
+import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
+import { MutableRefObject, useEffect, useMemo } from 'react';
+import { Song } from '/@/renderer/api/types';
+import { useCurrentSong, usePlayerStore } from '/@/renderer/store';
+
+interface UseCurrentSongRowStylesProps {
+    tableRef: MutableRefObject<AgGridReactType | null>;
+}
+
+export const useCurrentSongRowStyles = ({ tableRef }: UseCurrentSongRowStylesProps) => {
+    const currentSong = useCurrentSong();
+
+    const rowClassRules = useMemo<RowClassRules<Song> | undefined>(() => {
+        return {
+            'current-song': (params) => {
+                return params?.data?.id === currentSong?.id;
+            },
+        };
+    }, [currentSong?.id]);
+
+    // Redraw song rows when current song changes
+    useEffect(() => {
+        const unsubSongChange = usePlayerStore.subscribe(
+            (state) => state.current.song,
+            (song, previousSong) => {
+                if (tableRef?.current) {
+                    const { api, columnApi } = tableRef?.current || {};
+                    if (api == null || columnApi == null) {
+                        return;
+                    }
+
+                    const currentNode = song?.id ? api.getRowNode(song.id) : undefined;
+
+                    const previousNode = previousSong?.id
+                        ? api.getRowNode(previousSong?.id)
+                        : undefined;
+
+                    const rowNodes = [currentNode, previousNode].filter(
+                        (e) => e !== undefined,
+                    ) as RowNode<any>[];
+
+                    api.redrawRows({ rowNodes });
+                }
+            },
+            { equalityFn: (a, b) => a?.id === b?.id },
+        );
+
+        return () => {
+            unsubSongChange();
+        };
+    }, [tableRef]);
+
+    return {
+        rowClassRules,
+    };
+};
--- a/src/renderer/components/virtual-table/index.tsx
+++ b/src/renderer/components/virtual-table/index.tsx
@ -34,6 +34,7 @@ import { FavoriteCell } from '/@/renderer/components/virtual-table/cells/favorit
 import { RatingCell } from '/@/renderer/components/virtual-table/cells/rating-cell';
 import { TablePagination } from '/@/renderer/components/virtual-table/table-pagination';
 import { ActionsCell } from '/@/renderer/components/virtual-table/cells/actions-cell';
+import { TitleCell } from '/@/renderer/components/virtual-table/cells/title-cell';

 export * from './table-config-dropdown';
 export * from './table-pagination';
@ -274,8 +275,7 @@ const tableColumns: { [key: string]: ColDef } = {
        width: 80,
    },
    title: {
-        cellRenderer: (params: ICellRendererParams) =>
-            GenericCell(params, { position: 'left', primary: true }),
+        cellRenderer: TitleCell,
        colId: TableColumn.TITLE,
        field: 'name',
        headerName: 'Title',
--- a/src/renderer/features/albums/components/album-detail-content.tsx
+++ b/src/renderer/features/albums/components/album-detail-content.tsx
@ -33,6 +33,7 @@ import {
 } from '/@/renderer/components/virtual-table';
 import { SwiperGridCarousel } from '/@/renderer/components/grid-carousel';
 import { FullWidthDiscCell } from '/@/renderer/components/virtual-table/cells/full-width-disc-cell';
+import { useCurrentSongRowStyles } from '/@/renderer/components/virtual-table/hooks/use-current-song-row-styles';

 const isFullWidthRow = (node: RowNode) => {
    return node.id?.startsWith('disc-');
@ -266,6 +267,8 @@ export const AlbumDetailContent = ({ tableRef }: AlbumDetailContentProps) => {
        ALBUM_CONTEXT_MENU_ITEMS,
    );

+    const { rowClassRules } = useCurrentSongRowStyles({ tableRef });
+
    return (
        <ContentContainer>
            <Box component="section">
@ -356,6 +359,7 @@ export const AlbumDetailContent = ({ tableRef }: AlbumDetailContentProps) => {
                        if (isFullWidthRow(data.data)) return false;
                        return true;
                    }}
+                    rowClassRules={rowClassRules}
                    rowData={songsRowData}
                    rowSelection="multiple"
                    onCellContextMenu={handleContextMenu}
--- a/src/renderer/features/artists/components/album-artist-detail-top-songs-list-content.tsx
+++ b/src/renderer/features/artists/components/album-artist-detail-top-songs-list-content.tsx
@ -9,6 +9,7 @@ import { LibraryItem, QueueSong } from '/@/renderer/api/types';
 import { usePlayQueueAdd } from '/@/renderer/features/player';
 import { VirtualGridAutoSizerContainer } from '/@/renderer/components/virtual-grid';
 import { getColumnDefs, VirtualTable } from '/@/renderer/components/virtual-table';
+import { useCurrentSongRowStyles } from '/@/renderer/components/virtual-table/hooks/use-current-song-row-styles';

 interface AlbumArtistSongListContentProps {
    data: QueueSong[];
@ -48,6 +49,8 @@ export const AlbumArtistDetailTopSongsListContent = ({
        });
    };

+    const { rowClassRules } = useCurrentSongRowStyles({ tableRef });
+
    return (
        <>
            <VirtualGridAutoSizerContainer>
@ -69,6 +72,7 @@ export const AlbumArtistDetailTopSongsListContent = ({
                    enableCellChangeFlash={false}
                    getRowId={(data) => data.data.uniqueId}
                    rowBuffer={20}
+                    rowClassRules={rowClassRules}
                    rowData={data}
                    rowHeight={page.table.rowHeight || 40}
                    rowModelType="clientSide"
--- a/src/renderer/features/context-menu/hooks/use-handle-context-menu.ts
+++ b/src/renderer/features/context-menu/hooks/use-handle-context-menu.ts
@ -22,8 +22,6 @@ export const useHandleTableContextMenu = (

        const api = gridApi || e?.api;

-        console.log('api :>> ', api);
-
        if (!api) return;

        let selectedNodes = sortBy(api.getSelectedNodes(), ['rowIndex']);
--- a/src/renderer/features/playlists/components/playlist-detail-content.tsx
+++ b/src/renderer/features/playlists/components/playlist-detail-content.tsx
@ -14,6 +14,7 @@ import {
    useFixedTableHeader,
    VirtualTable,
 } from '/@/renderer/components/virtual-table';
+import { useCurrentSongRowStyles } from '/@/renderer/components/virtual-table/hooks/use-current-song-row-styles';
 import { useHandleTableContextMenu } from '/@/renderer/features/context-menu';
 import {
    PLAYLIST_SONG_CONTEXT_MENU_ITEMS,
@ -163,6 +164,8 @@ export const PlaylistDetailContent = ({ tableRef }: PlaylistDetailContentProps)
        });
    };

+    const { rowClassRules } = useCurrentSongRowStyles({ tableRef });
+
    const loadMoreRef = useRef<HTMLButtonElement | null>(null);

    return (
@ -234,6 +237,7 @@ export const PlaylistDetailContent = ({ tableRef }: PlaylistDetailContentProps)
                        // It's possible that there are duplicate song ids in a playlist
                        return `${data.data.id}-${data.data.pageIndex}`;
                    }}
+                    rowClassRules={rowClassRules}
                    rowData={playlistSongData}
                    rowHeight={60}
                    rowSelection="multiple"
--- a/src/renderer/features/playlists/components/playlist-detail-song-list-content.tsx
+++ b/src/renderer/features/playlists/components/playlist-detail-song-list-content.tsx
@ -40,6 +40,7 @@ import { queryKeys } from '/@/renderer/api/query-keys';
 import { usePlaylistDetail } from '/@/renderer/features/playlists/queries/playlist-detail-query';
 import { VirtualGridAutoSizerContainer } from '/@/renderer/components/virtual-grid';
 import { getColumnDefs, VirtualTable, TablePagination } from '/@/renderer/components/virtual-table';
+import { useCurrentSongRowStyles } from '/@/renderer/components/virtual-table/hooks/use-current-song-row-styles';

 interface PlaylistDetailContentProps {
    tableRef: MutableRefObject<AgGridReactType | null>;
@ -224,6 +225,8 @@ export const PlaylistDetailSongListContent = ({ tableRef }: PlaylistDetailConten
        });
    };

+    const { rowClassRules } = useCurrentSongRowStyles({ tableRef });
+
    return (
        <>
            <VirtualGridAutoSizerContainer>
@ -240,6 +243,7 @@ export const PlaylistDetailSongListContent = ({ tableRef }: PlaylistDetailConten
                    pagination={isPaginationEnabled}
                    paginationAutoPageSize={isPaginationEnabled}
                    paginationPageSize={pagination.itemsPerPage || 100}
+                    rowClassRules={rowClassRules}
                    rowHeight={page.table.rowHeight || 40}
                    rowModelType="infinite"
                    onBodyScrollEnd={handleScroll}
--- a/src/renderer/features/songs/components/song-list-table-view.tsx
+++ b/src/renderer/features/songs/components/song-list-table-view.tsx
@ -6,6 +6,7 @@ import { queryKeys } from '/@/renderer/api/query-keys';
 import { LibraryItem, QueueSong, SongListQuery, SongListResponse } from '/@/renderer/api/types';
 import { VirtualGridAutoSizerContainer } from '/@/renderer/components/virtual-grid';
 import { VirtualTable } from '/@/renderer/components/virtual-table';
+import { useCurrentSongRowStyles } from '/@/renderer/components/virtual-table/hooks/use-current-song-row-styles';
 import {
    AgGridFetchFn,
    useVirtualTable,
@ -54,6 +55,8 @@ export const SongListTableView = ({ tableRef, itemCount }: SongListTableViewProp
        [server],
    );

+    const { rowClassRules } = useCurrentSongRowStyles({ tableRef });
+
    const tableProps = useVirtualTable<SongListResponse, Omit<SongListQuery, 'startIndex'>>({
        contextMenu: SONG_CONTEXT_MENU_ITEMS,
        fetch: {
@ -86,6 +89,7 @@ export const SongListTableView = ({ tableRef, itemCount }: SongListTableViewProp
                key={`table-${listProperties.display}-${listProperties.table.rowHeight}-${server?.id}`}
                ref={tableRef}
                {...tableProps}
+                rowClassRules={rowClassRules}
                onRowDoubleClicked={handleRowDoubleClick}
            />
        </VirtualGridAutoSizerContainer>
--- a/src/renderer/themes/default.scss
+++ b/src/renderer/themes/default.scss
@ -180,6 +180,10 @@
        display: none;
    }

+    .ag-cell-transparent {
+        opacity: 0;
+    }
+
    .ag-cell-rating.visible {
        display: block;
    }
@ -189,6 +193,10 @@
    }

    .ag-row-hover {
+        .ag-cell-transparent {
+            opacity: 1;
+        }
+
        .ag-cell-rating,
        .ag-cell-favorite {
            display: block;
@ -199,6 +207,8 @@
    }

    .current-song {
-    background: rgba(96, 144, 240, 0.3) !important;
+        .current-song-child {
+            color: var(--primary-color) !important;
+        }
    }
 }