fix incorrect imageId assignments (#1456)

This commit is contained in:
jeffvli
2025-12-30 15:18:03 -08:00
parent 6ddaf0366c
commit 4a025f82e4
13 changed files with 28 additions and 23 deletions
@@ -32,7 +32,7 @@ export const DragPreview = memo(({ data }: DragPreviewProps) => {
const itemName = firstItem ? getItemName(firstItem) : 'Item'; const itemName = firstItem ? getItemName(firstItem) : 'Item';
const itemImage = useItemImageUrl({ const itemImage = useItemImageUrl({
id: (firstItem as { id: string })?.id, id: (firstItem as { imageId: string })?.imageId,
itemType: data.itemType || LibraryItem.SONG, itemType: data.itemType || LibraryItem.SONG,
type: 'table', type: 'table',
}); });
@@ -119,7 +119,7 @@ const CarouselItem = ({ album }: CarouselItemProps) => {
<ItemImage <ItemImage
className={styles.albumImage} className={styles.albumImage}
containerClassName={styles.albumImageContainer} containerClassName={styles.albumImageContainer}
id={album.id} id={album.imageId}
itemType={LibraryItem.ALBUM} itemType={LibraryItem.ALBUM}
src={imageUrl} src={imageUrl}
/> />
@@ -314,7 +314,7 @@ const CompactItemCard = ({
className={clsx(styles.image, { className={clsx(styles.image, {
[styles.isRound]: isRound, [styles.isRound]: isRound,
})} })}
id={data?.id} id={data?.imageId}
itemType={itemType} itemType={itemType}
src={(data as Album | AlbumArtist | Playlist | Song)?.imageUrl} src={(data as Album | AlbumArtist | Playlist | Song)?.imageUrl}
/> />
@@ -532,7 +532,7 @@ const DefaultItemCard = ({
<> <>
<ItemImage <ItemImage
className={clsx(styles.image, { [styles.isRound]: isRound })} className={clsx(styles.image, { [styles.isRound]: isRound })}
id={data?.id} id={data?.imageId}
itemType={itemType} itemType={itemType}
src={(data as Album | AlbumArtist | Playlist | Song)?.imageUrl} src={(data as Album | AlbumArtist | Playlist | Song)?.imageUrl}
/> />
@@ -31,7 +31,7 @@ const getUnloaderIcon = (itemType: LibraryItem) => {
}; };
const BaseItemImage = ( const BaseItemImage = (
props: Omit<ImageProps, 'src'> & { props: Omit<ImageProps, 'id' | 'src'> & {
id?: null | string; id?: null | string;
itemType: LibraryItem; itemType: LibraryItem;
src?: null | string; src?: null | string;
@@ -46,13 +46,20 @@ const BaseItemImage = (
size: 300, size: 300,
}); });
return <BaseImage src={imageUrl} unloaderIcon={getUnloaderIcon(props.itemType)} {...rest} />; return (
<BaseImage
src={imageUrl}
unloaderIcon={getUnloaderIcon(props.itemType)}
{...rest}
id={props.id || undefined}
/>
);
}; };
export const ItemImage = memo(BaseItemImage); export const ItemImage = memo(BaseItemImage);
interface UseItemImageUrlProps { interface UseItemImageUrlProps {
id?: string; id?: null | string;
imageUrl?: null | string; imageUrl?: null | string;
itemType: LibraryItem; itemType: LibraryItem;
serverId?: string; serverId?: string;
@@ -83,7 +83,7 @@ export const ImageColumn = (props: ItemTableListInnerColumn) => {
[styles.imageContainerWithAspectRatio]: [styles.imageContainerWithAspectRatio]:
props.size === 'default' || props.size === 'large', props.size === 'default' || props.size === 'large',
})} })}
id={item?.id} id={item?.imageId}
itemType={item?._itemType} itemType={item?._itemType}
src={item?.imageUrl} src={item?.imageUrl}
/> />
@@ -100,7 +100,7 @@ export const DefaultTitleCombinedColumn = (props: ItemTableListInnerColumn) => {
> >
<ItemImage <ItemImage
containerClassName={styles.image} containerClassName={styles.image}
id={item?.id} id={item?.imageId}
itemType={item?._itemType} itemType={item?._itemType}
src={item?.imageUrl} src={item?.imageUrl}
/> />
@@ -236,7 +236,7 @@ export const QueueSongTitleCombinedColumn = (props: ItemTableListInnerColumn) =>
> >
<ItemImage <ItemImage
containerClassName={styles.image} containerClassName={styles.image}
id={item?.id} id={item?.imageId}
itemType={item?._itemType} itemType={item?._itemType}
src={item?.imageUrl} src={item?.imageUrl}
/> />
@@ -121,7 +121,7 @@ export const LeftControls = () => {
styles.playerbarImage, styles.playerbarImage,
PlaybackSelectors.playerCoverArt, PlaybackSelectors.playerCoverArt,
)} )}
id={currentSong?.id} id={currentSong?.imageId}
itemType={LibraryItem.SONG} itemType={LibraryItem.SONG}
loading="eager" loading="eager"
/> />
@@ -92,7 +92,7 @@ export const MobilePlayerbar = () => {
styles.playerbarImage, styles.playerbarImage,
PlaybackSelectors.playerCoverArt, PlaybackSelectors.playerCoverArt,
)} )}
id={currentSong.id} id={currentSong.imageId}
itemType={LibraryItem.SONG} itemType={LibraryItem.SONG}
loading="eager" loading="eager"
/> />
@@ -556,7 +556,7 @@ const PlaylistTableItem = memo(
<Grid.Col span="content"> <Grid.Col span="content">
<Flex align="center" justify="center" px="sm"> <Flex align="center" justify="center" px="sm">
<ItemImage <ItemImage
id={item.id} id={item.imageId}
imageContainerProps={{ imageContainerProps={{
className: styles.imageContainer, className: styles.imageContainer,
}} }}
@@ -167,6 +167,7 @@ export const CommandPalette = ({ modalProps }: CommandPaletteProps) => {
{({ isHighlighted }) => ( {({ isHighlighted }) => (
<LibraryCommandItem <LibraryCommandItem
id={album.id} id={album.id}
imageId={album.imageId}
imageUrl={album.imageUrl} imageUrl={album.imageUrl}
isHighlighted={isHighlighted} isHighlighted={isHighlighted}
itemType={LibraryItem.ALBUM} itemType={LibraryItem.ALBUM}
@@ -200,6 +201,7 @@ export const CommandPalette = ({ modalProps }: CommandPaletteProps) => {
<LibraryCommandItem <LibraryCommandItem
disabled={artist?.albumCount === 0} disabled={artist?.albumCount === 0}
id={artist.id} id={artist.id}
imageId={artist.imageId}
imageUrl={artist.imageUrl} imageUrl={artist.imageUrl}
isHighlighted={isHighlighted} isHighlighted={isHighlighted}
itemType={LibraryItem.ALBUM_ARTIST} itemType={LibraryItem.ALBUM_ARTIST}
@@ -237,6 +239,7 @@ export const CommandPalette = ({ modalProps }: CommandPaletteProps) => {
{({ isHighlighted }) => ( {({ isHighlighted }) => (
<LibraryCommandItem <LibraryCommandItem
id={song.id} id={song.id}
imageId={song.imageId}
imageUrl={song.imageUrl} imageUrl={song.imageUrl}
isHighlighted={isHighlighted} isHighlighted={isHighlighted}
itemType={LibraryItem.SONG} itemType={LibraryItem.SONG}
@@ -19,6 +19,7 @@ import { Play } from '/@/shared/types/types';
interface LibraryCommandItemProps { interface LibraryCommandItemProps {
disabled?: boolean; disabled?: boolean;
id: string; id: string;
imageId: null | string;
imageUrl: null | string; imageUrl: null | string;
isHighlighted?: boolean; isHighlighted?: boolean;
itemType: LibraryItem; itemType: LibraryItem;
@@ -30,6 +31,7 @@ interface LibraryCommandItemProps {
export const LibraryCommandItem = ({ export const LibraryCommandItem = ({
disabled, disabled,
id, id,
imageId,
imageUrl, imageUrl,
isHighlighted, isHighlighted,
itemType, itemType,
@@ -99,7 +101,7 @@ export const LibraryCommandItem = ({
alt="cover" alt="cover"
className={styles.image} className={styles.image}
height={40} height={40}
id={id} id={imageId}
itemType={itemType} itemType={itemType}
src={imageUrl} src={imageUrl}
width={40} width={40}
@@ -232,7 +232,7 @@ const normalizeAlbum = (
_itemType: LibraryItem.ALBUM, _itemType: LibraryItem.ALBUM,
_serverId: server?.id || '', _serverId: server?.id || '',
_serverType: ServerType.JELLYFIN, _serverType: ServerType.JELLYFIN,
albumArtistName: item.AlbumArtist || '', albumArtistName: item.AlbumArtist,
albumArtists: albumArtists:
item.AlbumArtists.map((entry) => ({ item.AlbumArtists.map((entry) => ({
id: entry.Id, id: entry.Id,
+1 -8
View File
@@ -225,15 +225,8 @@ export type AlbumArtist = {
userRating: null | number; userRating: null | number;
}; };
export type Artist = { export type Artist = Omit<AlbumArtist, '_itemType'> & {
_itemType: LibraryItem.ARTIST; _itemType: LibraryItem.ARTIST;
_serverId: string;
_serverType: ServerType;
biography: null | string;
createdAt: string;
id: string;
name: string;
updatedAt: string;
}; };
export type AuthenticationResponse = { export type AuthenticationResponse = {