JDM170/spotizerr-dev
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: images and id not loading for playlists in watchlist

Browse Source
This commit is contained in:
Xoconoch
2025-08-30 06:58:46 -06:00
parent 9e4b2fcd01
commit 5942e6ea36
4 changed files with 51 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
spotizerr-ui/src/routes/artist.tsx
View File

@@ -2,26 +2,15 @@ import { Link, useParams } from "@tanstack/react-router";
import { useEffect, useState, useContext, useRef, useCallback } from "react";
import { toast } from "sonner";
import apiClient from "../lib/api-client";
import type { LibrespotAlbumType, LibrespotArtistType, LibrespotTrackType, LibrespotImage } from "@/types/librespot";
import type { LibrespotAlbumType, LibrespotArtistType, LibrespotTrackType } from "@/types/librespot";
import { QueueContext, getStatus } from "../contexts/queue-context";
import { useSettings } from "../contexts/settings-context";
import { FaArrowLeft, FaBookmark, FaRegBookmark, FaDownload } from "react-icons/fa";
import { AlbumCard } from "../components/AlbumCard";
// Narrow type for the artist info response additions
type ArtistInfoResponse = LibrespotArtistType & {
biography?: Array<{ text?: string; portrait_group?: { image?: LibrespotImage[] } }>;
portrait_group?: { image?: LibrespotImage[] };
top_track?: Array<{ country: string; track: string[] }>;
album_group?: string[];
single_group?: string[];
compilation_group?: string[];
appears_on_group?: string[];
};
export const Artist = () => {
const { artistId } = useParams({ from: "/artist/$artistId" });
const [artist, setArtist] = useState<ArtistInfoResponse | null>(null);
const [artist, setArtist] = useState<LibrespotArtistType | null>(null);
const [artistAlbums, setArtistAlbums] = useState<LibrespotAlbumType[]>([]);
const [artistSingles, setArtistSingles] = useState<LibrespotAlbumType[]>([]);
const [artistCompilations, setArtistCompilations] = useState<LibrespotAlbumType[]>([]);
@@ -94,8 +83,8 @@ export const Artist = () => {
setBannerUrl(null); // reset hero; will lazy-load below
try {
const resp = await apiClient.get<ArtistInfoResponse>(`/artist/info?id=${artistId}`);
const data: ArtistInfoResponse = resp.data;
const resp = await apiClient.get<LibrespotArtistType>(`/artist/info?id=${artistId}`);
const data: LibrespotArtistType = resp.data;
if (cancelled) return;
@@ -104,10 +93,10 @@ export const Artist = () => {
setArtist(data);
// Lazy-load banner image after render
const bioEntry = Array.isArray(data.biography) && data.biography.length > 0 ? data.biography[0] : undefined;
const portraitImages = data.portrait_group?.image ?? bioEntry?.portrait_group?.image ?? [];
const allImages = [...(portraitImages ?? []), ...((data.images as LibrespotImage[] | undefined) ?? [])];
const candidateBanner = allImages.sort((a, b) => (b?.width ?? 0) - (a?.width ?? 0))[0]?.url || "/placeholder.jpg";
const allImages = [...(data.portrait_group ?? []), ...(data.biography?.portrait_group ?? [])];
const candidateBanner = allImages
.filter(img => img && typeof img === 'object' && 'url' in img)
.sort((a, b) => (b.width ?? 0) - (a.width ?? 0))[0]?.url || "/placeholder.jpg";
// Use async preload to avoid blocking initial paint
setTimeout(() => {
const img = new Image();