add more emphasis to current song (#283)

* add more emphasis to current song

* add css indicator (rivolumelineup)

* don't use absolute position, support album track number

* Respect order of set-queue function (fix race condition)

* Fix table row actions button on album detail and play queue

* Fix album detail table customizations

* Bump to v0.4.1

* Fix opacity mask for unsynced lyrics container

* Separate sidebar icons to new component

- Fixes react render issue

* Add app focus hook

* Remove css play image

* Add player status as cell refresh condition for queue

* Add current song images

* Add current song styles for all song tables

* Revert row index cell width

* Remove animated svg on browser

---------

Co-authored-by: jeffvli <jeffvictorli@gmail.com>
Co-authored-by: Jeff <42182408+jeffvli@users.noreply.github.com>

src/renderer/components/virtual-table/hooks/use-current-song-row-styles.ts

@@ -1,7 +1,8 @@
 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 { MutableRefObject, useEffect, useMemo, useRef } from 'react';
 import { Song } from '/@/renderer/api/types';
+import { useAppFocus } from '/@/renderer/hooks';
 import { useCurrentSong, usePlayerStore } from '/@/renderer/store';
 
 interface UseCurrentSongRowStylesProps {
@@ -10,17 +11,43 @@ interface UseCurrentSongRowStylesProps {
 
 export const useCurrentSongRowStyles = ({ tableRef }: UseCurrentSongRowStylesProps) => {
     const currentSong = useCurrentSong();
+    const isFocused = useAppFocus();
+    const isFocusedRef = useRef<boolean>(isFocused);
+
+    useEffect(() => {
+        // Redraw rows if the app focus changes
+        if (isFocusedRef.current !== isFocused) {
+            isFocusedRef.current = isFocused;
+            if (tableRef?.current) {
+                const { api, columnApi } = tableRef?.current || {};
+                if (api == null || columnApi == null) {
+                    return;
+                }
+
+                const currentNode = currentSong?.id ? api.getRowNode(currentSong.id) : undefined;
+
+                const rowNodes = [currentNode].filter((e) => e !== undefined) as RowNode<any>[];
+
+                if (rowNodes) {
+                    api.redrawRows({ rowNodes });
+                }
+            }
+        }
+    }, [currentSong?.id, isFocused, tableRef]);
 
     const rowClassRules = useMemo<RowClassRules<Song> | undefined>(() => {
         return {
             'current-song': (params) => {
-                return params?.data?.id === currentSong?.id;
+                return (
+                    params?.data?.id === currentSong?.id &&
+                    params?.data?.albumId === currentSong?.albumId
+                );
             },
         };
-    }, [currentSong?.id]);
+    }, [currentSong?.albumId, currentSong?.id]);
 
-    // Redraw song rows when current song changes
     useEffect(() => {
+        // Redraw song rows when current song changes
         const unsubSongChange = usePlayerStore.subscribe(
             (state) => state.current.song,
             (song, previousSong) => {
@@ -46,8 +73,35 @@ export const useCurrentSongRowStyles = ({ tableRef }: UseCurrentSongRowStylesPro
             { equalityFn: (a, b) => a?.id === b?.id },
         );
 
+        // Redraw song rows when the status changes
+        const unsubStatusChange = 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();
+            unsubStatusChange();
         };
     }, [tableRef]);