bobinejs 0.1.0 → 0.2.0

package/dist/index.js

@@ -1,11 +1,8 @@
 "use client";
 
-// ../../lib/utils.ts
+// src/utils.ts
 import { clsx } from "clsx";
-import { extendTailwindMerge } from "tailwind-merge";
-var twMerge = extendTailwindMerge({
-  extend: { theme: { text: ["display", "title", "body", "action", "meta", "code"] } }
-});
+import { twMerge } from "tailwind-merge";
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
@@ -135,6 +132,7 @@ var MEDIA_EVENTS = [
   "volumechange",
   "ratechange",
   "emptied",
+  "loadstart",
   "error",
   "enterpictureinpicture",
   "leavepictureinpicture"
@@ -154,6 +152,7 @@ var initialState = {
   fullscreen: false,
   pictureInPicture: false,
   error: null,
+  hasSource: false,
   textTracks: [],
   textTrack: -1,
   cues: []
@@ -174,7 +173,13 @@ function captionTracks(media) {
   );
 }
 function cueText(cue) {
-  return (cue.text ?? "").replace(/<[^>]+>/g, "").trim();
+  const vtt = cue;
+  const text = typeof vtt.getCueAsHTML === "function" ? vtt.getCueAsHTML().textContent : vtt.text?.replace(/<[^>]+>/g, "");
+  return (text ?? "").trim();
+}
+function defaultTrack(media, tracks) {
+  const el = Array.from(media?.querySelectorAll("track") ?? []).find((track) => track.default);
+  return el ? tracks.indexOf(el.track) : -1;
 }
 var sameList = (a, b) => a.length === b.length && a.every((value, i) => Object.is(value, b[i]));
 var sameTracks = (a, b) => a.length === b.length && a.every((t, i) => t.label === b[i].label && t.language === b[i].language && t.kind === b[i].kind);
@@ -191,6 +196,7 @@ function createMediaStore({ persistKey } = {}) {
   let container = null;
   let cueTrack = null;
   let metadata = null;
+  let trackChosen = false;
   const listeners = /* @__PURE__ */ new Set();
   const set = (patch) => {
     let changed = false;
@@ -220,7 +226,8 @@ function createMediaStore({ persistKey } = {}) {
       muted: media.muted,
       playbackRate: media.playbackRate,
       pictureInPicture: typeof document !== "undefined" && document.pictureInPictureElement === media,
-      error: media.error
+      error: media.error,
+      hasSource: Boolean(media.src || media.currentSrc || media.querySelector("source[src]"))
     });
   };
   const readCues = () => {
@@ -235,7 +242,7 @@ function createMediaStore({ persistKey } = {}) {
   };
   const syncTracks = (requested = state.textTrack) => {
     const tracks = captionTracks(media);
-    let active = requested;
+    let active = requested === -1 && !trackChosen ? defaultTrack(media, tracks) : requested;
     tracks.forEach((track, i) => {
       if (track.mode === "showing") active = i;
     });
@@ -444,6 +451,7 @@ function createMediaStore({ persistKey } = {}) {
     }
   };
   const syncTracksExplicit = (index) => {
+    trackChosen = true;
     captionTracks(media).forEach((track, i) => {
       if (i !== index && track.mode === "showing") track.mode = "disabled";
     });
@@ -462,13 +470,14 @@ function createMediaStore({ persistKey } = {}) {
     ...actions
   };
 }
-function formatTime(seconds) {
+function formatTime(seconds, reference = seconds) {
   if (!Number.isFinite(seconds) || seconds < 0) seconds = 0;
   const s = Math.floor(seconds % 60);
   const m = Math.floor(seconds / 60 % 60);
   const h = Math.floor(seconds / 3600);
   const ss = s.toString().padStart(2, "0");
-  return h > 0 ? `${h}:${m.toString().padStart(2, "0")}:${ss}` : `${m}:${ss}`;
+  const hours = h > 0 || Number.isFinite(reference) && reference >= 3600;
+  return hours ? `${h}:${m.toString().padStart(2, "0")}:${ss}` : `${m}:${ss}`;
 }
 function describeMediaError(error) {
   switch (error?.code) {
@@ -479,7 +488,7 @@ function describeMediaError(error) {
     case 3:
       return "This media could not be decoded.";
     case 4:
-      return "This format or source isn't supported.";
+      return "This media couldn't be loaded.";
     default:
       return "Something went wrong during playback.";
   }
@@ -502,8 +511,8 @@ function useMedia(selector) {
     () => selector(store.getServerState())
   );
 }
-function useComposedRefs(...refs) {
-  return React2.useCallback(composeRefs(...refs), refs);
+function useComposedRefs(a, b, c) {
+  return React2.useCallback((node) => composeRefs(a, b, c)(node), [a, b, c]);
 }
 function composeRefs(...refs) {
   return (node) => {
@@ -643,14 +652,14 @@ function useMediaElement(ref, src, loader) {
     if (!loader || !src || !media) return;
     return loader(media, src) ?? void 0;
   }, [store, loader, src]);
-  return { mediaRef };
+  return mediaRef;
 }
 function MediaVideo({ className, ref, src, loader, ...props }) {
-  const media = useMediaElement(ref, typeof src === "string" ? src : void 0, loader);
+  const mediaRef = useMediaElement(ref, typeof src === "string" ? src : void 0, loader);
   return /* @__PURE__ */ jsx2(
     "video",
     {
-      ref: media.mediaRef,
+      ref: mediaRef,
       "data-slot": "media-video",
       playsInline: true,
       preload: "metadata",
@@ -662,11 +671,11 @@ function MediaVideo({ className, ref, src, loader, ...props }) {
   );
 }
 function MediaAudio({ ref, src, loader, ...props }) {
-  const media = useMediaElement(ref, typeof src === "string" ? src : void 0, loader);
+  const mediaRef = useMediaElement(ref, typeof src === "string" ? src : void 0, loader);
   return /* @__PURE__ */ jsx2(
     "audio",
     {
-      ref: media.mediaRef,
+      ref: mediaRef,
       "data-slot": "media-audio",
       preload: "metadata",
       ...props,
@@ -717,12 +726,14 @@ function IconSwap({ show, a, b }) {
 function MediaPlayButton({ onClick, ...props }) {
   const store = useMediaStore();
   const paused = useMedia((s) => s.paused);
+  const hasSource = useMedia((s) => s.hasSource);
   return /* @__PURE__ */ jsx2(
     MediaButton,
     {
       "aria-label": paused ? "Play" : "Pause",
       tooltip: paused ? "Play" : "Pause",
       shortcut: "K",
+      disabled: !hasSource,
       onClick: (event) => {
         onClick?.(event);
         store.toggle();
@@ -810,6 +821,7 @@ function MediaPlaybackRateButton({
     {
       "aria-label": `Playback speed ${rate}x`,
       tooltip: "Playback speed",
+      dir: "ltr",
       className: cn("w-(--media-rate-width) min-w-7 px-1.5 font-mono text-xs tabular-nums", className),
       style: { "--media-rate-width": `calc(${chars}ch + 0.75rem)`, ...style },
       onClick: (event) => {
@@ -1054,7 +1066,7 @@ function MediaSeek({
               previewClassName
             ),
             style: { left: `${hover * 100}%` },
-            children: formatTime(hover * duration)
+            children: formatTime(hover * duration, duration)
           }
         )
       ]
@@ -1146,19 +1158,21 @@ var timeNames = { current: "elapsed", duration: "duration", remaining: "remainin
 function MediaTime({ type = "current", toggle = false, className, ...props }) {
   const [picked, setPicked] = React2.useState(type);
   const shown = toggle ? picked : type;
+  const duration = useMedia((s) => s.duration);
   const value = useMedia((s) => {
-    if (shown === "duration") return Math.floor(s.duration);
+    if (shown === "duration") return Math.floor(s.duration) || Math.ceil(s.duration);
     if (shown === "remaining") return Math.ceil(Math.max(s.duration - s.currentTime, 0));
     return Math.floor(s.currentTime);
   });
-  const text = shown === "remaining" ? `-${formatTime(value)}` : formatTime(value);
+  const time = formatTime(value, duration);
+  const text = shown === "remaining" ? `-${time}` : time;
   const other = type === "remaining" ? "current" : "remaining";
   const next = shown === type ? other : type;
-  return /* @__PURE__ */ jsx2("span", { "data-slot": "media-time", className: cn("font-mono text-xs tabular-nums", className), ...props, children: toggle ? /* @__PURE__ */ jsxs2(
+  return /* @__PURE__ */ jsx2("span", { "data-slot": "media-time", dir: "ltr", className: cn("font-mono text-xs tabular-nums", className), ...props, children: toggle ? /* @__PURE__ */ jsxs2(
     "button",
     {
       type: "button",
-      "aria-label": `${shown === "remaining" ? "Time remaining" : shown === "duration" ? "Duration" : "Time elapsed"} ${formatTime(value)}`,
+      "aria-label": `${shown === "remaining" ? "Time remaining" : shown === "duration" ? "Duration" : "Time elapsed"} ${time}`,
       onClick: () => setPicked(next),
       className: "group/media-button relative cursor-pointer rounded-sm outline-none transition-colors duration-150 ease-media hover:text-current focus-visible:ring-2 focus-visible:ring-current/60",
       children: [
@@ -1194,7 +1208,7 @@ function MediaCaptions({ className, ...props }) {
       "data-slot": "media-captions",
       className: cn("pointer-events-none flex flex-col items-center gap-1 text-center", className),
       ...props,
-      children: cues.map((cue, i) => /* @__PURE__ */ jsx2("span", { className: "whitespace-pre-line text-balance rounded-md px-2 py-0.5 box-decoration-clone", children: cue }, `${i}-${cue}`))
+      children: cues.map((cue, i) => /* @__PURE__ */ jsx2("span", { dir: "auto", className: "whitespace-pre-line text-balance rounded-md px-2 py-0.5 box-decoration-clone", children: cue }, `${i}-${cue}`))
     }
   );
 }
@@ -1229,20 +1243,31 @@ function MediaSettings({ rates = [0.5, 0.75, 1, 1.25, 1.5, 2], className, panelC
   const rootEl = React2.useRef(null);
   const triggerEl = React2.useRef(null);
   const panelEl = React2.useRef(null);
+  const listEl = React2.useRef(null);
   const panelId = React2.useId();
   React2.useLayoutEffect(() => {
     const panel = panelEl.current;
+    const list = listEl.current;
     const trigger = triggerEl.current;
     const player = rootEl.current?.closest("[data-slot='media-root']");
-    if (!open || !panel || !trigger || !player) return;
+    if (!open || !panel || !list || !trigger || !player) return;
+    const edge = () => {
+      const left = Math.min(24, list.scrollHeight - list.clientHeight - list.scrollTop);
+      list.style.maskImage = left > 1 ? `linear-gradient(to bottom, black calc(100% - ${left}px), rgb(0 0 0 / 0.3))` : "";
+    };
     const fit = () => {
       const space = trigger.getBoundingClientRect().top - player.getBoundingClientRect().top - 16;
       panel.style.maxHeight = `${Math.max(96, Math.min(288, space))}px`;
+      edge();
     };
     fit();
     const observer = new ResizeObserver(fit);
     observer.observe(player);
-    return () => observer.disconnect();
+    list.addEventListener("scroll", edge, { passive: true });
+    return () => {
+      observer.disconnect();
+      list.removeEventListener("scroll", edge);
+    };
   }, [open]);
   React2.useEffect(() => {
     if (!open) return;
@@ -1283,10 +1308,10 @@ function MediaSettings({ rates = [0.5, 0.75, 1, 1.25, 1.5, 2], className, panelC
         select();
         close();
       },
-      className: "flex h-8 w-full cursor-pointer items-center justify-between gap-6 rounded-md px-2 text-left text-sm outline-none transition-colors duration-150 ease-media hover:bg-current/10 focus-visible:bg-current/15",
+      className: "flex min-h-8 w-full shrink-0 cursor-pointer items-center justify-between gap-3 rounded-md px-2 py-1.5 text-left text-sm leading-5 outline-none transition-colors duration-150 ease-media hover:bg-current/10 focus-visible:bg-current/15",
       children: [
-        /* @__PURE__ */ jsx2("span", { children: label }),
-        /* @__PURE__ */ jsx2(CheckIcon, { className: cn("size-3.5 transition-opacity duration-150", checked ? "opacity-100" : "opacity-0") })
+        /* @__PURE__ */ jsx2("span", { dir: "auto", className: "min-w-0", children: label }),
+        /* @__PURE__ */ jsx2(CheckIcon, { className: cn("size-3.5 shrink-0 transition-opacity duration-150", checked ? "opacity-100" : "opacity-0") })
       ]
     },
     label
@@ -1313,7 +1338,7 @@ function MediaSettings({ rates = [0.5, 0.75, 1, 1.25, 1.5, 2], className, panelC
             children: /* @__PURE__ */ jsx2(SettingsIcon, { className: cn("transition-transform duration-300 ease-media motion-reduce:transition-none", open && "rotate-90") })
           }
         ),
-        open && /* @__PURE__ */ jsxs2(
+        open && /* @__PURE__ */ jsx2(
           "div",
           {
             ref: panelEl,
@@ -1322,40 +1347,47 @@ function MediaSettings({ rates = [0.5, 0.75, 1, 1.25, 1.5, 2], className, panelC
             "aria-label": "Playback settings",
             onKeyDown: onPanelKeyDown,
             className: cn(
-              "absolute right-0 bottom-full z-10 mb-2 flex max-h-72 w-44 origin-bottom-right flex-col gap-2 overflow-y-auto overscroll-contain rounded-xl p-1.5 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
+              "absolute right-0 bottom-full z-10 mb-2 flex max-h-72 w-48 origin-bottom-right flex-col overflow-hidden rounded-xl",
               "transition-[opacity,translate,scale] duration-150 ease-media starting:translate-y-1 starting:scale-95 starting:opacity-0 motion-reduce:transition-none",
               panelClassName
             ),
-            children: [
-              /* @__PURE__ */ jsxs2("div", { role: "group", "aria-label": "Speed", className: "flex flex-col", children: [
-                /* @__PURE__ */ jsx2("span", { className: "px-2 pt-1 pb-1.5 text-xs opacity-60", children: "Speed" }),
-                /* @__PURE__ */ jsx2("div", { className: "grid grid-cols-3 gap-1", children: rates.map((r) => /* @__PURE__ */ jsx2(
-                  "button",
-                  {
-                    type: "button",
-                    role: "menuitemradio",
-                    "aria-checked": rate === r,
-                    "aria-label": r === 1 ? "Normal speed" : `${r}\xD7 speed`,
-                    tabIndex: rate === r ? 0 : -1,
-                    onClick: () => {
-                      store.setPlaybackRate(r);
-                      close();
-                    },
-                    className: cn(
-                      "h-8 cursor-pointer rounded-md text-sm tabular-nums outline-none transition-colors duration-150 ease-media hover:bg-current/10 focus-visible:ring-1 focus-visible:ring-current/40",
-                      rate === r && "bg-current/15"
-                    ),
-                    children: `${r}\xD7`
-                  },
-                  r
-                )) })
-              ] }),
-              tracks.length > 0 && /* @__PURE__ */ jsxs2("div", { role: "group", "aria-label": "Captions", className: "flex flex-col", children: [
-                /* @__PURE__ */ jsx2("span", { className: "px-2 pt-1 pb-1.5 text-xs opacity-60", children: "Captions" }),
-                option("Off", textTrack === -1, () => store.setTextTrack(-1)),
-                tracks.map((track, i) => option(track.label, textTrack === i, () => store.setTextTrack(i)))
-              ] })
-            ]
+            children: /* @__PURE__ */ jsxs2(
+              "div",
+              {
+                ref: listEl,
+                className: "flex min-h-0 flex-col gap-2 overflow-y-auto overscroll-contain p-1.5 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
+                children: [
+                  /* @__PURE__ */ jsxs2("div", { role: "group", "aria-label": "Speed", className: "flex flex-col", children: [
+                    /* @__PURE__ */ jsx2("span", { className: "px-2 pt-1 pb-1.5 text-xs opacity-60", children: "Speed" }),
+                    /* @__PURE__ */ jsx2("div", { className: "grid grid-cols-3 gap-1", children: rates.map((r) => /* @__PURE__ */ jsx2(
+                      "button",
+                      {
+                        type: "button",
+                        role: "menuitemradio",
+                        "aria-checked": rate === r,
+                        "aria-label": r === 1 ? "Normal speed" : `${r}\xD7 speed`,
+                        tabIndex: rate === r ? 0 : -1,
+                        onClick: () => {
+                          store.setPlaybackRate(r);
+                          close();
+                        },
+                        className: cn(
+                          "h-8 cursor-pointer rounded-md text-sm tabular-nums outline-none transition-colors duration-150 ease-media hover:bg-current/10 focus-visible:ring-1 focus-visible:ring-current/40",
+                          rate === r && "bg-current/15"
+                        ),
+                        children: `${r}\xD7`
+                      },
+                      r
+                    )) })
+                  ] }),
+                  tracks.length > 0 && /* @__PURE__ */ jsxs2("div", { role: "group", "aria-label": "Captions", className: "flex flex-col", children: [
+                    /* @__PURE__ */ jsx2("span", { className: "px-2 pt-1 pb-1.5 text-xs opacity-60", children: "Captions" }),
+                    option("Off", textTrack === -1, () => store.setTextTrack(-1)),
+                    tracks.map((track, i) => option(track.label, textTrack === i, () => store.setTextTrack(i)))
+                  ] })
+                ]
+              }
+            )
           }
         )
       ]
@@ -1380,7 +1412,7 @@ function MediaErrorMessage({ className, message, ...props }) {
           {
             type: "button",
             onClick: () => store.retry(),
-            className: "inline-flex h-8 cursor-pointer items-center gap-1.5 rounded-full px-3 text-sm outline-none ring-1 ring-current/25 transition-[background-color,scale] duration-150 ease-media hover:bg-current/10 focus-visible:ring-2 focus-visible:ring-current/60 motion-safe:active:scale-[0.96]",
+            className: "inline-flex h-8 shrink-0 cursor-pointer items-center gap-1.5 rounded-full px-3 text-sm whitespace-nowrap outline-none ring-1 ring-current/25 transition-[background-color,scale] duration-150 ease-media hover:bg-current/10 focus-visible:ring-2 focus-visible:ring-current/60 motion-safe:active:scale-[0.96]",
             children: [
               /* @__PURE__ */ jsx2(RetryIcon, { className: "size-3.5" }),
               "Try again"
@@ -1462,7 +1494,8 @@ function VideoPlayer({
           MediaCaptions,
           {
             className: cn(
-              "absolute inset-x-4 bottom-4 text-sm leading-snug transition-transform duration-200 ease-media motion-reduce:transition-none sm:text-base",
+              /* sized by the player, not the viewport, so a small player keeps its cues */
+              "absolute inset-x-4 bottom-4 text-xs leading-snug transition-transform duration-200 ease-media motion-reduce:transition-none @xs/player:text-sm @2xl/player:text-base",
               "group-data-active/media:-translate-y-10 group-has-focus-visible/media:-translate-y-10 group-data-paused/media:group-data-started/media:-translate-y-10",
               "[&>span]:bg-media-scrim/75 [&>span]:text-media-foreground"
             )
@@ -1479,29 +1512,36 @@ function VideoPlayer({
             )
           }
         ),
-        /* @__PURE__ */ jsxs3(MediaControls, { className: "absolute inset-x-2 bottom-2 h-9 gap-1 px-1 **:data-[slot=media-tooltip]:bg-media-foreground **:data-[slot=media-tooltip]:text-media-scrim", children: [
-          /* @__PURE__ */ jsx3(MediaPlayButton, { tooltipAlign: "start" }),
-          /* @__PURE__ */ jsx3(MediaSeek, { className: "mx-2", previewClassName: "bg-media-foreground text-media-scrim" }),
-          /* @__PURE__ */ jsx3(MediaTime, { type: "remaining", toggle: true, className: "min-w-10 text-right text-media-foreground/80" }),
-          /* @__PURE__ */ jsxs3("div", { className: "group/volume-menu relative", children: [
-            /* @__PURE__ */ jsx3(MediaMuteButton, { tooltip: false }),
-            /* @__PURE__ */ jsx3(
-              "div",
-              {
-                className: cn(
-                  "pointer-events-none absolute bottom-full left-1/2 hidden -translate-x-1/2 translate-y-1 pb-2 opacity-0 pointer-fine:block",
-                  "transition-[opacity,translate] duration-150 ease-media motion-reduce:transition-none",
-                  volumeOpen
-                ),
-                children: /* @__PURE__ */ jsx3("div", { className: cn("flex h-24 w-7 justify-center rounded-full py-3", glass), children: /* @__PURE__ */ jsx3(MediaVolume, { orientation: "vertical", className: "h-full" }) })
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsx3(MediaCaptionsButton, {}),
-          /* @__PURE__ */ jsx3(MediaSettings, { panelClassName: glass }),
-          /* @__PURE__ */ jsx3(MediaPictureInPictureButton, { tooltipAlign: "end", className: "hidden @sm/player:inline-grid" }),
-          /* @__PURE__ */ jsx3(MediaFullscreenButton, { tooltipAlign: "end" })
-        ] }),
+        /* @__PURE__ */ jsxs3(
+          MediaControls,
+          {
+            dir: "ltr",
+            className: "absolute inset-x-2 bottom-2 h-9 gap-1 px-1 **:data-[slot=media-tooltip]:bg-media-foreground **:data-[slot=media-tooltip]:text-media-scrim",
+            children: [
+              /* @__PURE__ */ jsx3(MediaPlayButton, { tooltipAlign: "start" }),
+              /* @__PURE__ */ jsx3(MediaSeek, { className: "mx-2", previewClassName: "bg-media-foreground text-media-scrim" }),
+              /* @__PURE__ */ jsx3(MediaTime, { type: "remaining", toggle: true, className: "hidden min-w-10 text-right text-media-foreground/80 @xs/player:inline" }),
+              /* @__PURE__ */ jsxs3("div", { className: "group/volume-menu relative", children: [
+                /* @__PURE__ */ jsx3(MediaMuteButton, { tooltip: false }),
+                /* @__PURE__ */ jsx3(
+                  "div",
+                  {
+                    className: cn(
+                      "pointer-events-none absolute bottom-full left-1/2 hidden -translate-x-1/2 translate-y-1 pb-2 opacity-0 pointer-fine:block",
+                      "transition-[opacity,translate] duration-150 ease-media motion-reduce:transition-none",
+                      volumeOpen
+                    ),
+                    children: /* @__PURE__ */ jsx3("div", { className: cn("flex h-24 w-7 justify-center rounded-full py-3", glass), children: /* @__PURE__ */ jsx3(MediaVolume, { orientation: "vertical", className: "h-full" }) })
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx3(MediaCaptionsButton, {}),
+              /* @__PURE__ */ jsx3(MediaSettings, { panelClassName: glass }),
+              /* @__PURE__ */ jsx3(MediaPictureInPictureButton, { tooltipAlign: "end", className: "hidden @sm/player:inline-grid" }),
+              /* @__PURE__ */ jsx3(MediaFullscreenButton, { tooltipAlign: "end" })
+            ]
+          }
+        ),
         /* @__PURE__ */ jsx3(MediaErrorMessage, { className: "absolute inset-0 bg-media-scrim/85 px-6 text-media-foreground backdrop-blur-sm" })
       ]
     }
@@ -1509,6 +1549,7 @@ function VideoPlayer({
 }
 
 // ../../components/ui/audio-player.tsx
+import * as React3 from "react";
 import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
 var muted = "text-muted-foreground hover:text-foreground";
 var volumeOpen2 = "group-hover/volume-menu:pointer-events-auto group-hover/volume-menu:translate-y-0 group-hover/volume-menu:opacity-100 group-has-focus-visible/volume-menu:pointer-events-auto group-has-focus-visible/volume-menu:translate-y-0 group-has-focus-visible/volume-menu:opacity-100";
@@ -1531,6 +1572,8 @@ function AudioPlayer({
     artwork: artwork ? [{ src: artwork }] : void 0
   } : void 0);
   const hasInfo = Boolean(title || description);
+  const [failedArtwork, setFailedArtwork] = React3.useState(null);
+  const showArtwork = artwork && failedArtwork !== artwork;
   return /* @__PURE__ */ jsxs4(
     MediaRoot,
     {
@@ -1544,7 +1587,7 @@ function AudioPlayer({
       children: [
         /* @__PURE__ */ jsx4(MediaAudio, { className, loader, ...props }),
         /* @__PURE__ */ jsx4("div", { className: cn("flex items-center", hasInfo && "row-span-2 @max-sm/audio:row-span-1"), children: /* @__PURE__ */ jsxs4("span", { className: "relative shrink-0", children: [
-          artwork ? (
+          showArtwork ? (
             /**
              * The tile presses as one piece. Scaling the button alone pulled
              * its scrim in from the edges and bared a band of the image. No
@@ -1556,7 +1599,12 @@ function AudioPlayer({
                 {
                   src: artwork,
                   alt: "",
-                  className: "size-full rounded-lg object-cover outline outline-black/10 -outline-offset-1 dark:outline-white/10"
+                  draggable: false,
+                  onError: () => setFailedArtwork(artwork),
+                  ref: (img) => {
+                    if (img?.complete && img.naturalWidth === 0) setFailedArtwork(artwork);
+                  },
+                  className: "size-full rounded-lg object-cover outline select-none outline-black/10 -outline-offset-1 dark:outline-white/10"
                 }
               ),
               /* @__PURE__ */ jsx4(
@@ -1577,17 +1625,26 @@ function AudioPlayer({
           /* @__PURE__ */ jsx4(
             MediaLoading,
             {
-              className: artwork ? "absolute inset-0 m-auto size-5 text-background" : "absolute -inset-1 size-auto border-current/15 border-t-current text-foreground"
+              className: showArtwork ? "absolute inset-0 m-auto size-5 text-background" : "absolute -inset-1 size-auto border-current/15 border-t-current text-foreground"
             }
           )
         ] }) }),
         hasInfo && /* @__PURE__ */ jsxs4("div", { className: "col-start-2 flex min-w-0 items-baseline gap-2 self-end text-sm leading-5 @max-sm/audio:col-span-3 @max-sm/audio:col-start-1 @max-sm/audio:row-start-2 @max-sm/audio:pt-1", children: [
-          title && /* @__PURE__ */ jsx4("span", { className: "truncate font-medium", children: title }),
-          description && /* @__PURE__ */ jsx4("span", { className: "truncate text-muted-foreground", children: description })
+          title && /* @__PURE__ */ jsx4("span", { dir: "auto", title: typeof title === "string" ? title : void 0, className: "truncate font-medium", children: title }),
+          description && /* @__PURE__ */ jsx4(
+            "span",
+            {
+              dir: "auto",
+              title: typeof description === "string" ? description : void 0,
+              className: "min-w-12 shrink-[4] truncate text-muted-foreground",
+              children: description
+            }
+          )
         ] }),
         /* @__PURE__ */ jsxs4(
           "div",
           {
+            dir: "ltr",
             className: cn(
               "col-start-2 flex items-center gap-2.5 text-muted-foreground",
               hasInfo && "row-start-2 self-start @max-sm/audio:col-span-3 @max-sm/audio:col-start-1 @max-sm/audio:row-start-3"