fix: keep recent metadata when replaying cached tracks

Stop wiping history-seeded titles and music covers on click-to-play when the audio cache resolves with id-only metadata.

Author: bgwastu

src/components/HistoryList.tsx

@@ -17,7 +17,8 @@ import MediaResultRow from "@/components/MediaResultRow";
 import { useAppContext } from "@/context/AppContext";
 import type { HistoryItem } from "@/interfaces";
 import { historyItemSourceUrl, resolveCachedMedia } from "@/lib/playFromCache";
-import { timeAgo } from "@/utils";
+import { stashSearchMeta } from "@/lib/searchMeta";
+import { getYouTubeId, timeAgo } from "@/utils";
 
 interface HistoryListProps {
   onPlay?: () => void;
@@ -38,6 +39,9 @@ export default function HistoryList({
     onPlay?.();
 
     const url = historyItemSourceUrl(item);
+    const ytId = getYouTubeId(url ?? item.sourceUrl) ?? item.metadata?.id;
+    if (ytId) stashSearchMeta(String(ytId), item.metadata);
+
     const cached = await resolveCachedMedia(item);
     if (cached) {
       // Pass url for YouTube so embed id resolves; IDB stays audio-only.
@@ -50,7 +54,17 @@ export default function HistoryList({
     }
 
     if (!url) return;
-    openPlayer({ url, expand: true });
+    // Seed titles/cover so extract/cache cannot flash Unknown + YT hqdefault.
+    openPlayer({
+      url,
+      media: {
+        fileUrl: "",
+        sourceUrl: url,
+        metadata: { ...item.metadata },
+        ...(item.isAudioTrackVideo ? { isAudioTrackVideo: true } : {}),
+      },
+      expand: true,
+    });
   };
 
   const sorted = [...history].sort((a, b) => b.playedAt - a.playedAt);

src/components/Player.tsx

@@ -229,13 +229,12 @@ export function Player({
     const prop = sameSource(propMedia);
 
     // Prefer a playable fileUrl; keep context/provisional as metadata shell.
-    // Previously `url` made us drop contextMedia, so re-extract after a long idle
-    // showed "Unknown" even when last-session/context still had real titles.
+    // Prefer context over provisional so history-seeded titles/covers win the merge primary.
     const playable =
       (prop?.fileUrl ? prop : null) ||
       (extracted?.fileUrl ? extracted : null) ||
       (context?.fileUrl ? context : null);
-    const shell = playable || prop || extracted || provisionalMedia || context;
+    const shell = playable || prop || extracted || context || provisionalMedia;
     if (!shell) return null;
 
     const ytId = getYouTubeId(shell.sourceUrl || url || "");
@@ -345,8 +344,17 @@ export function Player({
     setExtractedMedia(null);
     setPlaybackError(null);
     setStreamState({ status: "idle" });
-    // Drop stale context media so old cover/progress cannot linger
-    if (url) setMedia(null);
+    // Keep media already seeded for this URL (history replay). Only drop unrelated tracks.
+    if (url) {
+      setMedia((prev) => {
+        if (!prev) return null;
+        if (prev.sourceUrl === url) return prev;
+        const prevId = getYouTubeId(prev.sourceUrl) ?? prev.metadata.id;
+        const nextId = getYouTubeId(url);
+        if (prevId && nextId && prevId === nextId) return prev;
+        return null;
+      });
+    }
   }, [url, setMedia]);
 
   // Reset autoplay gate whenever the playable file changes
@@ -359,15 +367,32 @@ export function Player({
     if (extractedMedia || streamStarted.current) return;
     if (!url) return;
     streamStarted.current = true;
+
+    // History/cache open already seeded a playable blob — reuse it instead of
+    // re-resolving the cache with id-only metadata (which becomes Unknown).
+    const seeded =
+      contextMedia?.fileUrl &&
+      (contextMedia.sourceUrl === url ||
+        (getYouTubeId(contextMedia.sourceUrl) &&
+          getYouTubeId(contextMedia.sourceUrl) === getYouTubeId(url)))
+        ? contextMedia
+        : null;
+
     // Defer so we don't sync-setState inside the effect body (React Compiler lint).
-    const timer = window.setTimeout(() => startStream(), 0);
+    const timer = window.setTimeout(() => {
+      if (seeded) {
+        setExtractedMedia(seeded);
+        return;
+      }
+      startStream();
+    }, 0);
     return () => {
       window.clearTimeout(timer);
       extractAbortRef.current?.abort();
       extractAbortRef.current = null;
       streamStarted.current = false;
     };
-  }, [url, extractedMedia, startStream]);
+  }, [url, extractedMedia, startStream, contextMedia]);
 
   // Measure bottom chrome for mini-player clip height
   useEffect(() => {
@@ -395,21 +420,14 @@ export function Player({
   }, [isMini, barHeight]);
 
   // Sync playable extracted media into app context (last-session + shared state).
-  // Keep a ref of context so we can merge prior titles without depending on it
-  // (depending would re-fire this effect after every setMedia).
-  const contextMediaRef = useRef(contextMedia);
-  useEffect(() => {
-    contextMediaRef.current = contextMedia;
-  }, [contextMedia]);
+  // Titles/covers come from extract + stashed search/history meta (peekSearchMeta).
   useEffect(() => {
     if (!extractedMedia?.fileUrl) return;
-    const prior = contextMediaRef.current;
     const ytId = getYouTubeId(extractedMedia.sourceUrl);
     setMedia({
       ...extractedMedia,
       metadata: mergeTrackMetadata(
         extractedMedia.metadata,
-        prior?.sourceUrl === extractedMedia.sourceUrl ? prior.metadata : undefined,
         ytId ? peekSearchMeta(ytId) : undefined,
       ),
     });

src/context/AppContext.tsx

@@ -51,7 +51,7 @@ export interface OpenPlayerOptions {
 interface AppContextValue {
   // Media state
   media: Media | null;
-  setMedia: (media: Media | null) => void;
+  setMedia: React.Dispatch<React.SetStateAction<Media | null>>;
 
   // Persistent player shell
   playerMode: PlayerMode;
@@ -156,9 +156,12 @@ export function AppProvider({ children }: { children: React.ReactNode }) {
 
   const isHistoryWriteAllowed = useCallback(() => !skipHistoryWritesRef.current, []);
 
-  const setMedia = useCallback((next: Media | null) => {
-    setMediaState(next);
-  }, []);
+  const setMedia: React.Dispatch<React.SetStateAction<Media | null>> = useCallback(
+    (action) => {
+      setMediaState(action);
+    },
+    [],
+  );
 
   const openPlayer = useCallback((options: OpenPlayerOptions = {}) => {
     if (options.recordHistory === false) {

src/lib/searchMeta.ts

@@ -71,6 +71,31 @@ function isKnown(value: string | undefined | null): value is string {
   return isKnownMetaValue(value);
 }
 
+/** YouTube page thumbs (hqdefault etc.) — prefer music/search covers over these. */
+export function isWeakCoverUrl(url: string | undefined | null): boolean {
+  if (!url) return true;
+  let decoded = url;
+  try {
+    decoded = decodeURIComponent(url);
+  } catch {
+    // keep raw
+  }
+  return /i\.ytimg\.com\/vi\/[^/?#]+\/(default|mqdefault|hqdefault|sddefault|hq720)\.jpg/i.test(
+    decoded,
+  );
+}
+
+function pickCover(
+  current: string | undefined,
+  candidate: string | undefined,
+): string | undefined {
+  if (!candidate) return current;
+  if (!current || isWeakCoverUrl(current)) {
+    if (!isWeakCoverUrl(candidate) || !current) return candidate;
+  }
+  return current;
+}
+
 /** Prefer real titles/authors from earlier sources over cache/extract placeholders. */
 export function mergeTrackMetadata(
   primary: Partial<Media["metadata"]> | undefined,
@@ -83,7 +108,7 @@ export function mergeTrackMetadata(
     if (!isKnown(merged.author) && isKnown(fb.author)) merged.author = fb.author;
     if (merged.artist == null && fb.artist != null) merged.artist = fb.artist;
     if (merged.album == null && fb.album != null) merged.album = fb.album;
-    if (!merged.coverUrl && fb.coverUrl) merged.coverUrl = fb.coverUrl;
+    merged.coverUrl = pickCover(merged.coverUrl, fb.coverUrl);
     if (merged.id == null && fb.id != null) merged.id = fb.id;
   }
 

src/utils/streamer.ts

@@ -2,7 +2,7 @@ import { Media } from "@/interfaces";
 import { parseApiErrorBody } from "@/lib/apiError";
 import { cookieRequestHeaders, getCookiesToUse } from "@/lib/cookies";
 import { mediaFromLocalCache } from "@/lib/playFromCache";
-import { mergeTrackMetadata } from "@/lib/searchMeta";
+import { mergeTrackMetadata, peekSearchMeta } from "@/lib/searchMeta";
 import { isMarkedAudioTrackVideo, markAudioTrackVideo } from "@/lib/trackFlags";
 import { getYouTubeId, isDirectMediaURL, isYoutubeURL } from "@/utils";
 
@@ -122,7 +122,11 @@ export async function streamWithProgress(
   }
 
   const id = getYouTubeId(url);
-  const cached = await mediaFromLocalCache(url, id ? { id } : undefined);
+  const priorMeta = id ? peekSearchMeta(id) : undefined;
+  const cached = await mediaFromLocalCache(
+    url,
+    mergeTrackMetadata(priorMeta, id ? { id } : undefined),
+  );
 
   // Audio cache hit: skip extract. Show video uses YouTube embed by video id.
   if (cached) {