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

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"
                 >

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 = {
+export const CellContainer = styled.div<{ position?: 'left' | 'center' | 'right' }>`
-    animate: {
-        opacity: 1,
-    },
-    initial: {
-        opacity: 0,
-    },
-};
-
-export const CellContainer = styled(motion.div)<{ position?: 'left' | 'center' | 'right' }>`
     display: flex;
     align-items: center;
     justify-content: ${(props) =>

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>
+    );
+};

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,
+    };
+};

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) =>
+        cellRenderer: TitleCell,
-            GenericCell(params, { position: 'left', primary: true }),
         colId: TableColumn.TITLE,
         field: 'name',
         headerName: 'Title',

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}

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"

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']);

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"

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}

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>

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;
+        }
     }
 }