add double click play to album detail

- add mediaPlayByIndex
- add index property to item list controls args
- add overrides to item list controls
This commit is contained in:
jeffvli
2025-11-22 22:27:45 -08:00
parent 0aee428aaf
commit 646eb4a3b0
15 changed files with 131 additions and 22 deletions
@@ -12,10 +12,14 @@ export const ActionsColumn = (props: ItemTableListInnerColumn) => {
event.stopPropagation();
event.preventDefault();
if (row !== undefined) {
const item = row as ItemListItem;
const rowId = props.internalState.extractRowId(item);
const index = rowId ? props.internalState.findItemIndex(rowId) : -1;
props.controls.onMore?.({
event,
index,
internalState: props.internalState,
item: row as ItemListItem,
item,
itemType: props.itemType,
});
}
@@ -24,11 +24,15 @@ export const FavoriteColumn = (props: ItemTableListInnerColumn) => {
onClick={(event) => {
event.stopPropagation();
event.preventDefault();
const item = props.data[props.rowIndex] as ItemListItem;
const rowId = props.internalState.extractRowId(item);
const index = rowId ? props.internalState.findItemIndex(rowId) : -1;
props.controls.onFavorite?.({
event,
favorite: !row,
index,
internalState: props.internalState,
item: props.data[props.rowIndex] as ItemListItem,
item,
itemType: props.itemType,
});
}}
@@ -16,10 +16,14 @@ export const RatingColumn = (props: ItemTableListInnerColumn) => {
<Rating
className={row ? undefined : 'hover-only-flex'}
onChange={(rating) => {
const item = props.data[props.rowIndex] as ItemListItem;
const rowId = props.internalState.extractRowId(item);
const index = rowId ? props.internalState.findItemIndex(rowId) : -1;
props.controls.onRating?.({
event: null,
index,
internalState: props.internalState,
item: props.data[props.rowIndex] as ItemListItem,
item,
itemType: props.itemType,
rating,
});
@@ -20,7 +20,9 @@ export const RowIndexColumn = (props: ItemTableListInnerColumn) => {
const { itemType } = props;
switch (itemType) {
case LibraryItem.PLAYLIST_SONG:
case LibraryItem.QUEUE_SONG:
case LibraryItem.SONG:
return <QueueSongRowIndexColumn {...props} />;
default:
return <DefaultRowIndexColumn {...props} />;
@@ -54,14 +56,18 @@ const DefaultRowIndexColumn = (props: ItemTableListInnerColumn) => {
className={clsx(styles.expand, 'hover-only')}
icon="arrowDownS"
iconProps={{ color: 'muted', size: 'md' }}
onClick={(e) =>
onClick={(e) => {
const item = data[rowIndex] as ItemListItem;
const rowId = internalState.extractRowId(item);
const index = rowId ? internalState.findItemIndex(rowId) : -1;
controls.onExpand?.({
event: e,
index,
internalState,
item: data[rowIndex] as ItemListItem,
item,
itemType,
})
}
});
}}
size="xs"
variant="subtle"
/>
@@ -78,7 +84,7 @@ const DefaultRowIndexColumn = (props: ItemTableListInnerColumn) => {
const QueueSongRowIndexColumn = (props: ItemTableListInnerColumn) => {
const status = usePlayerStatus();
const song = props.data[props.rowIndex] as QueueSong;
const isActive = props.activeRowId === song?._uniqueId;
const isActive = props.activeRowId === song?.id || props.activeRowId === song?._uniqueId;
let adjustedRowIndex =
props.adjustedRowIndexMap?.get(props.rowIndex) ??
@@ -17,7 +17,9 @@ export const TitleColumn = (props: ItemTableListInnerColumn) => {
const { itemType } = props;
switch (itemType) {
case LibraryItem.PLAYLIST_SONG:
case LibraryItem.QUEUE_SONG:
case LibraryItem.SONG:
return <QueueSongTitleColumn {...props} />;
default:
return <DefaultTitleColumn {...props} />;
@@ -72,7 +74,7 @@ function QueueSongTitleColumn(props: ItemTableListInnerColumn) {
];
const song = props.data[props.rowIndex] as QueueSong;
const isActive = props.activeRowId === song?._uniqueId;
const isActive = props.activeRowId === song?.id || props.activeRowId === song?._uniqueId;
if (typeof row === 'string') {
const path = getTitlePath(props.itemType, (props.data[props.rowIndex] as any).id as string);
@@ -88,7 +88,7 @@ export const QueueSongTitleCombinedColumn = (props: ItemTableListInnerColumn) =>
const row: object | undefined = (props.data as (any | undefined)[])[props.rowIndex];
const song = props.data[props.rowIndex] as QueueSong;
const isActive = props.activeRowId === song?._uniqueId;
const isActive = props.activeRowId === song?.id || props.activeRowId === song?._uniqueId;
const artists = useMemo(() => {
if (row && 'artists' in row && Array.isArray(row.artists)) {
@@ -167,7 +167,9 @@ export const TitleCombinedColumn = (props: ItemTableListInnerColumn) => {
const { itemType } = props;
switch (itemType) {
case LibraryItem.PLAYLIST_SONG:
case LibraryItem.QUEUE_SONG:
case LibraryItem.SONG:
return <QueueSongTitleCombinedColumn {...props} />;
default:
return <DefaultTitleCombinedColumn {...props} />;