mirror of
https://github.com/antebudimir/feishin.git
synced 2026-01-01 02:13:33 +00:00
Highlight currently playing song on all song tables (#178)
This commit is contained in:
parent
919016ca5a
commit
ece7fecc76
13 changed files with 299 additions and 194 deletions
|
|
@ -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}
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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']);
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue