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

This commit is contained in:
jeffvli 2023-07-18 18:39:39 -07:00
parent 919016ca5a
commit ece7fecc76
13 changed files with 299 additions and 194 deletions

View file

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

View file

@ -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}