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}

src/renderer/features/now-playing/components/play-queue.tsx

@@ -11,6 +11,7 @@ import '@ag-grid-community/styles/ag-theme-alpine.css';
 import {
     useAppStoreActions,
     useCurrentSong,
+    useCurrentStatus,
     useDefaultQueue,
     usePlayerControls,
     usePreviousSong,
@@ -34,6 +35,7 @@ import { LibraryItem, QueueSong } from '/@/renderer/api/types';
 import { useHandleTableContextMenu } from '/@/renderer/features/context-menu';
 import { QUEUE_CONTEXT_MENU_ITEMS } from '/@/renderer/features/context-menu/context-menu-items';
 import { VirtualGridAutoSizerContainer } from '/@/renderer/components/virtual-grid';
+import { useAppFocus } from '/@/renderer/hooks';
 
 const mpvPlayer = isElectron() ? window.electron.mpvPlayer : null;
 const remote = isElectron() ? window.electron.remote : null;
@@ -49,6 +51,7 @@ export const PlayQueue = forwardRef(({ type }: QueueProps, ref: Ref<any>) => {
     const { reorderQueue, setCurrentTrack } = useQueueControls();
     const currentSong = useCurrentSong();
     const previousSong = usePreviousSong();
+    const status = useCurrentStatus();
     const { setSettings } = useSettingsStoreActions();
     const { setAppStore } = useAppStoreActions();
     const tableConfig = useTableSettings(type);
@@ -56,6 +59,7 @@ export const PlayQueue = forwardRef(({ type }: QueueProps, ref: Ref<any>) => {
     const playerType = usePlayerType();
     const { play } = usePlayerControls();
     const volume = useVolume();
+    const isFocused = useAppFocus();
 
     useEffect(() => {
         if (tableRef.current) {
@@ -204,7 +208,7 @@ export const PlayQueue = forwardRef(({ type }: QueueProps, ref: Ref<any>) => {
                 }
             }
         }
-    }, [currentSong, previousSong, tableConfig.followCurrentSong]);
+    }, [currentSong, previousSong, tableConfig.followCurrentSong, status, isFocused]);
 
     const onCellContextMenu = useHandleTableContextMenu(LibraryItem.SONG, QUEUE_CONTEXT_MENU_ITEMS);
 
@@ -219,7 +223,9 @@ export const PlayQueue = forwardRef(({ type }: QueueProps, ref: Ref<any>) => {
                     autoFitColumns={tableConfig.autoFit}
                     columnDefs={columnDefs}
                     context={{
+                        isFocused,
                         onCellContextMenu,
+                        status,
                     }}
                     deselectOnClickOutside={type === 'fullScreen'}
                     getRowId={(data) => data.data.uniqueId}

src/renderer/features/playlists/components/playlist-detail-song-list-content.tsx

@@ -22,7 +22,7 @@ import {
     SortOrder,
 } from '/@/renderer/api/types';
 import { VirtualGridAutoSizerContainer } from '/@/renderer/components/virtual-grid';
-import { getColumnDefs, TablePagination, VirtualTable } from '/@/renderer/components/virtual-table';
+import { TablePagination, VirtualTable, getColumnDefs } 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 {
@@ -34,6 +34,7 @@ import { usePlaylistDetail } from '/@/renderer/features/playlists/queries/playli
 import { usePlaylistSongList } from '/@/renderer/features/playlists/queries/playlist-song-list-query';
 import {
     useCurrentServer,
+    useCurrentStatus,
     usePlaylistDetailStore,
     usePlaylistDetailTablePagination,
     useSetPlaylistDetailTable,
@@ -41,6 +42,7 @@ import {
 } from '/@/renderer/store';
 import { usePlayButtonBehavior } from '/@/renderer/store/settings.store';
 import { ListDisplayType } from '/@/renderer/types';
+import { useAppFocus } from '/@/renderer/hooks';
 
 interface PlaylistDetailContentProps {
     tableRef: MutableRefObject<AgGridReactType | null>;
@@ -49,6 +51,8 @@ interface PlaylistDetailContentProps {
 export const PlaylistDetailSongListContent = ({ tableRef }: PlaylistDetailContentProps) => {
     const { playlistId } = useParams() as { playlistId: string };
     const queryClient = useQueryClient();
+    const status = useCurrentStatus();
+    const isFocused = useAppFocus();
     const server = useCurrentServer();
     const page = usePlaylistDetailStore();
     const filters: Partial<PlaylistSongListQuery> = useMemo(() => {
@@ -236,6 +240,11 @@ export const PlaylistDetailSongListContent = ({ tableRef }: PlaylistDetailConten
                     alwaysShowHorizontalScroll
                     autoFitColumns={page.table.autoFit}
                     columnDefs={columnDefs}
+                    context={{
+                        isFocused,
+                        onCellContextMenu: handleContextMenu,
+                        status,
+                    }}
                     getRowId={(data) => data.data.uniqueId}
                     infiniteInitialRowCount={checkPlaylistList.data?.totalRecordCount || 100}
                     pagination={isPaginationEnabled}

src/renderer/features/songs/components/song-list-table-view.tsx

@@ -8,7 +8,8 @@ import { useCurrentSongRowStyles } from '/@/renderer/components/virtual-table/ho
 import { useVirtualTable } from '/@/renderer/components/virtual-table/hooks/use-virtual-table';
 import { useListContext } from '/@/renderer/context/list-context';
 import { SONG_CONTEXT_MENU_ITEMS } from '/@/renderer/features/context-menu/context-menu-items';
-import { useCurrentServer, usePlayButtonBehavior } from '/@/renderer/store';
+import { useAppFocus } from '/@/renderer/hooks';
+import { useCurrentServer, useCurrentStatus, usePlayButtonBehavior } from '/@/renderer/store';
 
 interface SongListTableViewProps {
     itemCount?: number;
@@ -18,6 +19,8 @@ interface SongListTableViewProps {
 export const SongListTableView = ({ tableRef, itemCount }: SongListTableViewProps) => {
     const server = useCurrentServer();
     const { pageKey, id, handlePlay, customFilters } = useListContext();
+    const isFocused = useAppFocus();
+    const status = useCurrentStatus();
 
     const { rowClassRules } = useCurrentSongRowStyles({ tableRef });
 
@@ -46,6 +49,11 @@ export const SongListTableView = ({ tableRef, itemCount }: SongListTableViewProp
                 key={`table-${tableProps.rowHeight}-${server?.id}`}
                 ref={tableRef}
                 {...tableProps}
+                context={{
+                    ...tableProps.context,
+                    isFocused,
+                    status,
+                }}
                 rowClassRules={rowClassRules}
                 onRowDoubleClicked={handleRowDoubleClick}
             />