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/features/albums/components/album-detail-content.tsx

@@ -31,9 +31,9 @@ import {
 import { usePlayQueueAdd } from '/@/renderer/features/player';
 import { PlayButton, useCreateFavorite, useDeleteFavorite } from '/@/renderer/features/shared';
 import { LibraryBackgroundOverlay } from '/@/renderer/features/shared/components/library-background-overlay';
-import { useContainerQuery } from '/@/renderer/hooks';
+import { useAppFocus, useContainerQuery } from '/@/renderer/hooks';
 import { AppRoute } from '/@/renderer/router/routes';
-import { useCurrentServer } from '/@/renderer/store';
+import { useCurrentServer, useCurrentStatus } from '/@/renderer/store';
 import {
     usePlayButtonBehavior,
     useSettingsStoreActions,
@@ -70,8 +70,13 @@ export const AlbumDetailContent = ({ tableRef, background }: AlbumDetailContentP
     const handlePlayQueueAdd = usePlayQueueAdd();
     const tableConfig = useTableSettings('albumDetail');
     const { setTable } = useSettingsStoreActions();
+    const status = useCurrentStatus();
+    const isFocused = useAppFocus();
 
-    const columnDefs = useMemo(() => getColumnDefs(tableConfig.columns), [tableConfig.columns]);
+    const columnDefs = useMemo(
+        () => getColumnDefs(tableConfig.columns, false, 'albumDetail'),
+        [tableConfig.columns],
+    );
 
     const getRowHeight = useCallback(
         (params: RowHeightParams) => {
@@ -396,7 +401,9 @@ export const AlbumDetailContent = ({ tableRef, background }: AlbumDetailContentP
                         autoFitColumns={tableConfig.autoFit}
                         columnDefs={columnDefs}
                         context={{
+                            isFocused,
                             onCellContextMenu,
+                            status,
                         }}
                         enableCellChangeFlash={false}
                         fullWidthCellRenderer={FullWidthDiscCell}