fix: recover pasted-link titles and harden cover loading

Fetch oembed metadata for pasted/deep-linked YouTube URLs, recover titles on cache hits, proxy search thumbs through /api/cover, and shimmer the dock cover while audio loads.

Author: bgwastu

src/app/page.tsx

@@ -52,6 +52,7 @@ import { youtubeErrorTitle } from "@/lib/apiError";
 import { cookieRequestHeaders } from "@/lib/cookies";
 import { stashSearchMeta } from "@/lib/searchMeta";
 import { SEARCH_ACCENT_VAR } from "@/lib/theme";
+import { ensureYouTubeLinkMeta } from "@/lib/youtubeOembed";
 import { getYouTubeId, isDirectMediaURL, isYoutubeURL } from "@/utils";
 import { setMediaCache } from "@/utils/cache";
 
@@ -359,8 +360,11 @@ function SearchPanel({
     if (isYoutubeURL(clean)) {
       const id = getYouTubeId(clean);
       if (id) {
+        const playUrl = `https://www.youtube.com/watch?v=${id}`;
+        // Stash oembed titles before open so paste doesn't flash / stick on Unknown.
+        await ensureYouTubeLinkMeta(id);
         resetSearchUi();
-        openPlayer({ url: `https://www.youtube.com/watch?v=${id}`, expand: true });
+        openPlayer({ url: playUrl, expand: true });
       }
       return;
     }

src/components/MediaResultRow.tsx

@@ -13,7 +13,9 @@ import {
 } from "@mantine/core";
 import { IconMusic } from "@tabler/icons-react";
 import ShimmerImage from "@/components/ShimmerImage";
+import { toDisplayCoverUrl } from "@/lib/mergePlayerMedia";
 import { SEARCH_ACCENT_VAR } from "@/lib/theme";
+import { getYouTubeId } from "@/utils";
 
 export interface MediaResultItem {
   id: string;
@@ -61,6 +63,8 @@ export default function MediaResultRow({
     : item.lengthSeconds
       ? formatDuration(item.lengthSeconds)
       : "";
+  const ytId = getYouTubeId(item.id) ?? (/^[\w-]{11}$/.test(item.id) ? item.id : null);
+  const thumbSrc = toDisplayCoverUrl(item.thumbnail || undefined, ytId);
 
   return (
     <Paper
@@ -87,9 +91,9 @@ export default function MediaResultRow({
     >
       <Flex gap="sm" align="center">
         <Box pos="relative" style={{ flexShrink: 0 }}>
-          {item.thumbnail ? (
+          {thumbSrc ? (
             <ShimmerImage
-              src={item.thumbnail}
+              src={thumbSrc}
               alt=""
               w={thumbW}
               h={thumbH}

src/components/Player.tsx

@@ -1801,15 +1801,14 @@ export function Player({
                 radius="sm"
                 h={38}
                 w={38}
-                visibleFrom="xs"
                 alt="cover image"
+                forceShimmer={isLoading || !isMediaReady}
                 wrapperStyle={{ width: 38, height: 38, flexShrink: 0 }}
                 style={{
                   userSelect: "none",
                   WebkitUserSelect: "none",
                   pointerEvents: "none",
                   flexShrink: 0,
-                  opacity: isMediaReady ? 1 : 0.55,
                 }}
               />
               <Box ml="sm" style={{ minWidth: 0, flex: 1 }}>

src/components/PlayerRouteBridge.tsx

@@ -5,7 +5,8 @@ import { useRouter } from "next/navigation";
 import LoadingOverlay from "@/components/LoadingOverlay";
 import { useAppContext } from "@/context/AppContext";
 import { playerPathForMedia, softReplaceUrl } from "@/lib/playerNavigation";
-import { isDirectMediaURL, isYoutubeURL } from "@/utils";
+import { ensureYouTubeLinkMeta } from "@/lib/youtubeOembed";
+import { getYouTubeId, isDirectMediaURL, isYoutubeURL } from "@/utils";
 
 /**
  * Deep-link / rewrite entry for /player and /watch.
@@ -21,25 +22,31 @@ export default function PlayerRouteBridge({ url }: { url?: string }) {
     if (started.current) return;
     started.current = true;
 
-    if (url && (isDirectMediaURL(url) || isYoutubeURL(url))) {
-      // syncUrl false — router.replace("/") would stomp a soft /watch path.
-      openPlayer({ url, expand: true, syncUrl: false });
-      router.replace("/");
-      // Re-apply shareable URL after Next lands on Home.
-      const path = playerPathForMedia(url, null);
-      requestAnimationFrame(() => softReplaceUrl(path));
-      return;
-    }
+    void (async () => {
+      if (url && (isDirectMediaURL(url) || isYoutubeURL(url))) {
+        if (isYoutubeURL(url)) {
+          const id = getYouTubeId(url);
+          if (id) await ensureYouTubeLinkMeta(id);
+        }
+        // syncUrl false — router.replace("/") would stomp a soft /watch path.
+        openPlayer({ url, expand: true, syncUrl: false });
+        router.replace("/");
+        // Re-apply shareable URL after Next lands on Home.
+        const path = playerPathForMedia(url, null);
+        requestAnimationFrame(() => softReplaceUrl(path));
+        return;
+      }
 
-    if (media) {
-      openPlayer({ media, expand: true, syncUrl: false });
-      const path = playerPathForMedia(null, media);
-      router.replace("/");
-      requestAnimationFrame(() => softReplaceUrl(path));
-      return;
-    }
+      if (media) {
+        openPlayer({ media, expand: true, syncUrl: false });
+        const path = playerPathForMedia(null, media);
+        router.replace("/");
+        requestAnimationFrame(() => softReplaceUrl(path));
+        return;
+      }
 
-    router.replace("/");
+      router.replace("/");
+    })();
   }, [url, openPlayer, router, media]);
 
   return (

src/components/ShimmerImage.tsx

@@ -25,6 +25,8 @@ type ShimmerImageProps = {
   visibleFrom?: MantineBreakpoint;
   hiddenFrom?: MantineBreakpoint;
   fallbackSrc?: string;
+  /** Keep the shimmer visible even after the bitmap has painted (e.g. audio loading). */
+  forceShimmer?: boolean;
   onLoad?: (event: SyntheticEvent<HTMLImageElement>) => void;
   onError?: (event: SyntheticEvent<HTMLImageElement>) => void;
 };
@@ -51,16 +53,24 @@ export default function ShimmerImage({
   style,
   wrapperStyle,
   radius,
+  forceShimmer = false,
   onLoad,
   onError,
   visibleFrom,
   hiddenFrom,
+  w,
+  h,
+  width,
+  height,
   ...rest
 }: ShimmerImageProps) {
   const theme = useMantineTheme();
   const [loadedSrc, setLoadedSrc] = useState<string | null>(null);
   const loaded = Boolean(src) && loadedSrc === src;
+  const showShimmer = forceShimmer || !loaded;
   const borderRadius = resolveRadius(radius, theme);
+  const boxW = w ?? width ?? wrapperStyle?.width;
+  const boxH = h ?? height ?? wrapperStyle?.height;
 
   const handleLoad = useCallback(
     (event: SyntheticEvent<HTMLImageElement>) => {
@@ -79,15 +89,40 @@ export default function ShimmerImage({
   );
 
   if (!src) {
+    if (!forceShimmer) {
+      return (
+        <Image
+          src={src}
+          alt={alt}
+          radius={radius}
+          style={style}
+          visibleFrom={visibleFrom}
+          hiddenFrom={hiddenFrom}
+          w={w}
+          h={h}
+          width={width}
+          height={height}
+          {...rest}
+        />
+      );
+    }
+
     return (
-      <Image
-        src={src}
-        alt={alt}
-        radius={radius}
-        style={style}
+      <Box
+        pos="relative"
         visibleFrom={visibleFrom}
         hiddenFrom={hiddenFrom}
-        {...rest}
+        className="moonlit-shimmer"
+        aria-hidden
+        style={{
+          overflow: "hidden",
+          borderRadius,
+          width: boxW,
+          height: boxH,
+          flexShrink: 0,
+          backgroundColor: rgba(theme.colors.dark[5], 0.55),
+          ...wrapperStyle,
+        }}
       />
     );
   }
@@ -107,10 +142,12 @@ export default function ShimmerImage({
       style={{
         overflow: "hidden",
         borderRadius,
+        width: boxW,
+        height: boxH,
         ...wrapperStyle,
       }}
     >
-      {!loaded ? (
+      {showShimmer ? (
         <Box
           className="moonlit-shimmer"
           aria-hidden
@@ -129,9 +166,18 @@ export default function ShimmerImage({
         src={src}
         alt={alt}
         radius={radius}
+        w={w}
+        h={h}
+        width={width}
+        height={height}
         style={{
           ...style,
-          opacity: loaded ? (Number.isFinite(targetOpacity) ? targetOpacity : 1) : 0,
+          opacity:
+            loaded && !forceShimmer
+              ? Number.isFinite(targetOpacity)
+                ? targetOpacity
+                : 1
+              : 0,
           transition: style?.transition ?? "opacity 0.2s ease-out",
         }}
         onLoad={handleLoad}

src/lib/youtubeOembed.ts

@@ -0,0 +1,59 @@
+import type { Media } from "@/interfaces";
+import { isKnownMetaValue, peekSearchMeta, stashSearchMeta } from "@/lib/searchMeta";
+
+type OembedResponse = {
+  title?: string;
+  author_name?: string;
+  thumbnail_url?: string;
+};
+
+/** Fetch public YouTube oembed metadata (title / author / thumb). */
+export async function fetchYouTubeOembedMeta(
+  videoId: string,
+  signal?: AbortSignal,
+): Promise<Partial<Media["metadata"]> | null> {
+  if (!videoId) return null;
+  const watchUrl = `https://www.youtube.com/watch?v=${videoId}`;
+  const endpoint = `https://www.youtube.com/oembed?url=${encodeURIComponent(watchUrl)}&format=json`;
+  try {
+    const res = await fetch(endpoint, { signal });
+    if (!res.ok) return null;
+    const data = (await res.json()) as OembedResponse;
+    if (!data.title && !data.author_name) return null;
+    return {
+      id: videoId,
+      ...(data.title ? { title: data.title } : {}),
+      ...(data.author_name ? { author: data.author_name } : {}),
+      ...(data.thumbnail_url ? { coverUrl: data.thumbnail_url } : {}),
+    };
+  } catch {
+    return null;
+  }
+}
+
+/**
+ * Stash oembed titles for a pasted / deep-linked YouTube id when the session
+ * stash does not already have known title+author.
+ */
+export async function ensureYouTubeLinkMeta(
+  videoId: string,
+  options?: { timeoutMs?: number },
+): Promise<Partial<Media["metadata"]> | undefined> {
+  if (!videoId) return undefined;
+  const existing = peekSearchMeta(videoId);
+  if (isKnownMetaValue(existing?.title) && isKnownMetaValue(existing?.author)) {
+    return existing;
+  }
+
+  const timeoutMs = options?.timeoutMs ?? 4000;
+  const controller = new AbortController();
+  const timer = setTimeout(() => controller.abort(), timeoutMs);
+  try {
+    const meta = await fetchYouTubeOembedMeta(videoId, controller.signal);
+    if (!meta) return existing;
+    stashSearchMeta(videoId, meta);
+    return peekSearchMeta(videoId) ?? meta;
+  } finally {
+    clearTimeout(timer);
+  }
+}