From 8e1cdac3a25828c023a72e976bcf3e29e25cd1ad Mon Sep 17 00:00:00 2001 From: jeffvli Date: Tue, 18 Nov 2025 20:39:44 -0800 Subject: [PATCH] optimize playqueue performance for active song styles --- .../item-table-list/columns/row-index-column.tsx | 4 ++-- .../item-table-list/columns/title-column.tsx | 4 ++-- .../columns/title-combined-column.tsx | 4 ++-- .../item-list/item-table-list/item-table-list.tsx | 12 ++++++++++-- .../features/now-playing/components/play-queue.tsx | 5 +++++ 5 files changed, 21 insertions(+), 8 deletions(-) diff --git a/src/renderer/components/item-list/item-table-list/columns/row-index-column.tsx b/src/renderer/components/item-list/item-table-list/columns/row-index-column.tsx index 55012eacb..7b794e184 100644 --- a/src/renderer/components/item-list/item-table-list/columns/row-index-column.tsx +++ b/src/renderer/components/item-list/item-table-list/columns/row-index-column.tsx @@ -8,7 +8,6 @@ import { TableColumnTextContainer, } from '/@/renderer/components/item-list/item-table-list/item-table-list-column'; import { ItemListItem } from '/@/renderer/components/item-list/types'; -import { useIsCurrentSong } from '/@/renderer/features/player/hooks/use-is-current-song'; import { usePlayerStatus } from '/@/renderer/store'; import { ActionIcon } from '/@/shared/components/action-icon/action-icon'; import { Flex } from '/@/shared/components/flex/flex'; @@ -73,7 +72,8 @@ const DefaultRowIndexColumn = (props: ItemTableListInnerColumn) => { const QueueSongRowIndexColumn = (props: ItemTableListInnerColumn) => { const status = usePlayerStatus(); - const { isActive } = useIsCurrentSong(props.data[props.rowIndex] as QueueSong); + const song = props.data[props.rowIndex] as QueueSong; + const isActive = props.activeRowId === song?._uniqueId; const adjustedRowIndex = props.adjustedRowIndexMap?.get(props.rowIndex) ?? diff --git a/src/renderer/components/item-list/item-table-list/columns/title-column.tsx b/src/renderer/components/item-list/item-table-list/columns/title-column.tsx index 2537aa4a6..16967c275 100644 --- a/src/renderer/components/item-list/item-table-list/columns/title-column.tsx +++ b/src/renderer/components/item-list/item-table-list/columns/title-column.tsx @@ -10,7 +10,6 @@ import { ItemTableListInnerColumn, TableColumnContainer, } from '/@/renderer/components/item-list/item-table-list/item-table-list-column'; -import { useIsCurrentSong } from '/@/renderer/features/player/hooks/use-is-current-song'; import { Text } from '/@/shared/components/text/text'; import { LibraryItem, QueueSong } from '/@/shared/types/domain-types'; @@ -70,7 +69,8 @@ function QueueSongTitleColumn(props: ItemTableListInnerColumn) { props.columns[props.columnIndex].id ]; - const { isActive } = useIsCurrentSong(props.data[props.rowIndex] as QueueSong); + const song = props.data[props.rowIndex] as QueueSong; + const isActive = props.activeRowId === song?._uniqueId; if (typeof row === 'string') { const path = getTitlePath(props.itemType, (props.data[props.rowIndex] as any).id as string); diff --git a/src/renderer/components/item-list/item-table-list/columns/title-combined-column.tsx b/src/renderer/components/item-list/item-table-list/columns/title-combined-column.tsx index 3d7e9ec33..36b6b2c20 100644 --- a/src/renderer/components/item-list/item-table-list/columns/title-combined-column.tsx +++ b/src/renderer/components/item-list/item-table-list/columns/title-combined-column.tsx @@ -10,7 +10,6 @@ import { ItemTableListInnerColumn, TableColumnContainer, } from '/@/renderer/components/item-list/item-table-list/item-table-list-column'; -import { useIsCurrentSong } from '/@/renderer/features/player/hooks/use-is-current-song'; import { AppRoute } from '/@/renderer/router/routes'; import { Image } from '/@/shared/components/image/image'; import { Text } from '/@/shared/components/text/text'; @@ -79,7 +78,8 @@ export const DefaultTitleCombinedColumn = (props: ItemTableListInnerColumn) => { export const QueueSongTitleCombinedColumn = (props: ItemTableListInnerColumn) => { const row: object | undefined = (props.data as (any | undefined)[])[props.rowIndex]; - const { isActive } = useIsCurrentSong(props.data[props.rowIndex] as QueueSong); + const song = props.data[props.rowIndex] as QueueSong; + const isActive = props.activeRowId === song?._uniqueId; const artists = useMemo(() => { if (row && 'artists' in row && Array.isArray(row.artists)) { diff --git a/src/renderer/components/item-list/item-table-list/item-table-list.tsx b/src/renderer/components/item-list/item-table-list/item-table-list.tsx index e8a6f5260..b1c01a206 100644 --- a/src/renderer/components/item-list/item-table-list/item-table-list.tsx +++ b/src/renderer/components/item-list/item-table-list/item-table-list.tsx @@ -84,6 +84,7 @@ enum TableItemSize { } interface VirtualizedTableGridProps { + activeRowId?: string; calculatedColumnWidths: number[]; CellComponent: JSXElementConstructor>; cellPadding: 'lg' | 'md' | 'sm' | 'xl' | 'xs'; @@ -125,6 +126,7 @@ interface VirtualizedTableGridProps { const VirtualizedTableGrid = React.memo( ({ + activeRowId, calculatedColumnWidths, CellComponent, cellPadding, @@ -271,6 +273,7 @@ const VirtualizedTableGrid = React.memo( const itemProps: TableItemProps = useMemo( () => ({ + activeRowId, adjustedRowIndexMap, calculatedColumnWidths, cellPadding, @@ -300,11 +303,12 @@ const VirtualizedTableGrid = React.memo( tableId, }), [ + activeRowId, adjustedRowIndexMap, calculatedColumnWidths, cellPadding, - controls, parsedColumns, + controls, dataWithGroups, enableAlternateRowColors, enableColumnReorder, @@ -622,7 +626,8 @@ export interface TableGroupHeader { } export interface TableItemProps { - adjustedRowIndexMap?: Map; // Maps rowIndex to adjustedRowIndex (1-indexed, excluding group rows) + activeRowId?: string; // Active row's uniqueId for QUEUE_SONG performance optimization + adjustedRowIndexMap?: Map; calculatedColumnWidths?: number[]; cellPadding?: ItemTableListProps['cellPadding']; columns: ItemTableListColumnConfig[]; @@ -653,6 +658,7 @@ export interface TableItemProps { } interface ItemTableListProps { + activeRowId?: string; autoFitColumns?: boolean; CellComponent: JSXElementConstructor>; cellPadding?: 'lg' | 'md' | 'sm' | 'xl' | 'xs'; @@ -692,6 +698,7 @@ interface ItemTableListProps { } export const ItemTableList = ({ + activeRowId, autoFitColumns = false, CellComponent, cellPadding = 'sm', @@ -2026,6 +2033,7 @@ export const ItemTableList = ({ {StickyHeader} {StickyGroupRow} (({ listKey, sear itemListKey: listKey, }); + const currentSong = usePlayerSong(); + const currentSongUniqueId = currentSong?._uniqueId; + return (