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

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

View file

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

View file

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

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}

View file

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