@ttt-productions/media-viewer 0.10.10 → 0.10.12

package/dist/react/audio-player-chrome.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"audio-player-chrome.d.ts","sourceRoot":"","sources":["../../src/react/audio-player-chrome.tsx"],"names":[],"mappings":"AAeA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AA+B5D,MAAM,MAAM,sBAAsB,GAAG;IACnC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,GAAG,IAAI,CAAC,CAAC;IACnD,uEAAuE;IACvE,cAAc,CAAC,EAAE,mBAAmB,CAAC;IACrC,kFAAkF;IAClF,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,2EAA2E;IAC3E,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAChC,CAAC;AAEF,wBAAgB,iBAAiB,CAAC,EAChC,QAAQ,EACR,cAAuB,EACvB,UAAgC,EAChC,YAAY,GACb,EAAE,sBAAsB,qBA0SxB"}
+{"version":3,"file":"audio-player-chrome.d.ts","sourceRoot":"","sources":["../../src/react/audio-player-chrome.tsx"],"names":[],"mappings":"AAeA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AA+B5D,MAAM,MAAM,sBAAsB,GAAG;IACnC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,GAAG,IAAI,CAAC,CAAC;IACnD,uEAAuE;IACvE,cAAc,CAAC,EAAE,mBAAmB,CAAC;IACrC,kFAAkF;IAClF,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,2EAA2E;IAC3E,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAChC,CAAC;AAEF,wBAAgB,iBAAiB,CAAC,EAChC,QAAQ,EACR,cAAuB,EACvB,UAAgC,EAChC,YAAY,GACb,EAAE,sBAAsB,qBA+TxB"}

package/dist/react/audio-player-chrome.js

@@ -14,6 +14,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // the element itself changes.
 import * as React from "react";
 import { Pause, Play, Volume2, VolumeX, ChevronDown, ChevronUp, Activity, BarChart3 } from "lucide-react";
+import { Spinner } from "@ttt-productions/ui-core/react";
 import { startWaveformLoop, drawIdleFrame } from "../visualizer.js";
 import { resolveInfiniteDuration } from "../media-duration.js";
 const DEFAULT_PERSIST_KEY = "mv-audio-player";
@@ -47,6 +48,8 @@ function formatTime(seconds) {
 }
 export function AudioPlayerChrome({ audioRef, visualizerMode = "bars", persistKey = DEFAULT_PERSIST_KEY, extraActions, }) {
     const [isPlaying, setIsPlaying] = React.useState(false);
+    // Playback is waiting on data (initial buffer, a stall, or a seek landing).
+    const [buffering, setBuffering] = React.useState(false);
     const [currentTime, setCurrentTime] = React.useState(0);
     const [duration, setDuration] = React.useState(0);
     const [isMuted, setIsMuted] = React.useState(false);
@@ -182,6 +185,8 @@ export function AudioPlayerChrome({ audioRef, visualizerMode = "bars", persistKe
             setIsMuted(el.muted);
             setVolume(el.volume);
         };
+        const onWaiting = () => setBuffering(true);
+        const onReady = () => setBuffering(false);
         el.addEventListener("play", onPlay);
         el.addEventListener("pause", onPause);
         el.addEventListener("ended", onEnded);
@@ -189,6 +194,14 @@ export function AudioPlayerChrome({ audioRef, visualizerMode = "bars", persistKe
         el.addEventListener("durationchange", onDurationChange);
         el.addEventListener("loadedmetadata", onDurationChange);
         el.addEventListener("volumechange", onVolumeChange);
+        el.addEventListener("waiting", onWaiting);
+        el.addEventListener("seeking", onWaiting);
+        el.addEventListener("playing", onReady);
+        el.addEventListener("seeked", onReady);
+        el.addEventListener("canplay", onReady);
+        el.addEventListener("pause", onReady);
+        el.addEventListener("ended", onReady);
+        el.addEventListener("error", onReady);
         return () => {
             el.removeEventListener("play", onPlay);
             el.removeEventListener("pause", onPause);
@@ -197,6 +210,14 @@ export function AudioPlayerChrome({ audioRef, visualizerMode = "bars", persistKe
             el.removeEventListener("durationchange", onDurationChange);
             el.removeEventListener("loadedmetadata", onDurationChange);
             el.removeEventListener("volumechange", onVolumeChange);
+            el.removeEventListener("waiting", onWaiting);
+            el.removeEventListener("seeking", onWaiting);
+            el.removeEventListener("playing", onReady);
+            el.removeEventListener("seeked", onReady);
+            el.removeEventListener("canplay", onReady);
+            el.removeEventListener("pause", onReady);
+            el.removeEventListener("ended", onReady);
+            el.removeEventListener("error", onReady);
         };
     }, [audioRef, ensureGraph, startLoop, stopLoop]);
     // Full teardown when the chrome unmounts.
@@ -262,6 +283,6 @@ export function AudioPlayerChrome({ audioRef, visualizerMode = "bars", persistKe
         });
     };
     const shownTime = scrubTime ?? currentTime;
-    return (_jsxs("div", { className: "mv-player", "data-mv-player": true, "data-minimized": minimized ? "true" : "false", "data-mode": mode, children: [!minimized && (_jsxs("div", { className: "mv-player-viz", children: [_jsx("canvas", { ref: canvasRef, width: 600, height: 96, className: "mv-player-canvas", "aria-hidden": "true" }), _jsx("button", { type: "button", className: "mv-player-btn mv-player-mode-btn", onClick: toggleMode, "aria-label": mode === "line" ? "Switch visualizer to bars" : "Switch visualizer to waveform line", children: mode === "line" ? _jsx(BarChart3, { "aria-hidden": "true" }) : _jsx(Activity, { "aria-hidden": "true" }) })] })), _jsxs("div", { className: "mv-player-controls", children: [_jsx("button", { type: "button", className: "mv-player-btn mv-player-play-btn", onClick: togglePlay, "aria-label": isPlaying ? "Pause" : "Play", children: isPlaying ? _jsx(Pause, { "aria-hidden": "true" }) : _jsx(Play, { "aria-hidden": "true" }) }), _jsx("span", { className: "mv-player-time", "aria-hidden": "true", children: formatTime(shownTime) }), _jsx("input", { type: "range", className: "mv-player-seek", min: 0, max: duration > 0 ? duration : 0, step: 0.1, value: Math.min(shownTime, duration > 0 ? duration : shownTime), onChange: onSeekInput, onMouseUp: commitSeek, onTouchEnd: commitSeek, onKeyUp: commitSeek, disabled: duration <= 0, "aria-label": "Seek" }), _jsx("span", { className: "mv-player-time", "aria-hidden": "true", children: formatTime(duration) }), _jsx("button", { type: "button", className: "mv-player-btn", onClick: toggleMute, "aria-label": isMuted ? "Unmute" : "Mute", children: isMuted ? _jsx(VolumeX, { "aria-hidden": "true" }) : _jsx(Volume2, { "aria-hidden": "true" }) }), _jsx("input", { type: "range", className: "mv-player-volume", min: 0, max: 1, step: 0.05, value: isMuted ? 0 : volume, onChange: onVolumeInput, "aria-label": "Volume" }), _jsx("button", { type: "button", className: "mv-player-btn", onClick: toggleMinimized, "aria-label": minimized ? "Show visualizer" : "Hide visualizer", children: minimized ? _jsx(ChevronUp, { "aria-hidden": "true" }) : _jsx(ChevronDown, { "aria-hidden": "true" }) }), extraActions != null && _jsx("div", { className: "mv-player-extra", children: extraActions })] })] }));
+    return (_jsxs("div", { className: "mv-player", "data-mv-player": true, "data-minimized": minimized ? "true" : "false", "data-mode": mode, children: [!minimized && (_jsxs("div", { className: "mv-player-viz", children: [_jsx("canvas", { ref: canvasRef, width: 600, height: 96, className: "mv-player-canvas", "aria-hidden": "true" }), _jsx("button", { type: "button", className: "mv-player-btn mv-player-mode-btn", onClick: toggleMode, "aria-label": mode === "line" ? "Switch visualizer to bars" : "Switch visualizer to waveform line", children: mode === "line" ? _jsx(BarChart3, { "aria-hidden": "true" }) : _jsx(Activity, { "aria-hidden": "true" }) })] })), _jsxs("div", { className: "mv-player-controls", children: [_jsx("button", { type: "button", className: "mv-player-btn mv-player-play-btn", onClick: togglePlay, "aria-label": isPlaying ? "Pause" : "Play", "aria-busy": isPlaying && buffering ? true : undefined, children: isPlaying && buffering ? _jsx(Spinner, { size: "xs" }) : isPlaying ? _jsx(Pause, { "aria-hidden": "true" }) : _jsx(Play, { "aria-hidden": "true" }) }), _jsx("span", { className: "mv-player-time", "aria-hidden": "true", children: formatTime(shownTime) }), _jsx("input", { type: "range", className: "mv-player-seek", min: 0, max: duration > 0 ? duration : 0, step: 0.1, value: Math.min(shownTime, duration > 0 ? duration : shownTime), onChange: onSeekInput, onMouseUp: commitSeek, onTouchEnd: commitSeek, onKeyUp: commitSeek, disabled: duration <= 0, "aria-label": "Seek" }), _jsx("span", { className: "mv-player-time", "aria-hidden": "true", children: formatTime(duration) }), _jsx("button", { type: "button", className: "mv-player-btn", onClick: toggleMute, "aria-label": isMuted ? "Unmute" : "Mute", children: isMuted ? _jsx(VolumeX, { "aria-hidden": "true" }) : _jsx(Volume2, { "aria-hidden": "true" }) }), _jsx("input", { type: "range", className: "mv-player-volume", min: 0, max: 1, step: 0.05, value: isMuted ? 0 : volume, onChange: onVolumeInput, "aria-label": "Volume" }), _jsx("button", { type: "button", className: "mv-player-btn", onClick: toggleMinimized, "aria-label": minimized ? "Show visualizer" : "Hide visualizer", children: minimized ? _jsx(ChevronUp, { "aria-hidden": "true" }) : _jsx(ChevronDown, { "aria-hidden": "true" }) }), extraActions != null && _jsx("div", { className: "mv-player-extra", children: extraActions })] })] }));
 }
 //# sourceMappingURL=audio-player-chrome.js.map

package/dist/react/audio-player-chrome.js.map

@@ -1 +1 @@
-{"version":3,"file":"audio-player-chrome.js","sourceRoot":"","sources":["../../src/react/audio-player-chrome.tsx"],"names":[],"mappings":"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","sourcesContent":["\"use client\";\n\n// Custom audio player chrome — the one owned control surface used by every\n// AudioViewer. Owns: play/pause, seek, time readout, mute/volume, and\n// the visualizer panel (shared engine in ../visualizer.ts) with minimize and\n// line/bars mode toggles. The media ELEMENT (loading, errors, playback API)\n// stays owned by AudioViewer — this component only reads/drives it.\n//\n// Web Audio wiring is created lazily on the first `play` event (autoplay\n// policies suspend fresh AudioContexts; a user-gesture play resumes them) and\n// is best-effort throughout: if anything throws, the player still plays and\n// only the visualizer goes dark. `createMediaElementSource` is once-per-\n// element, so the graph is keyed to the element instance and rebuilt only if\n// the element itself changes.\n\nimport * as React from \"react\";\nimport { Pause, Play, Volume2, VolumeX, ChevronDown, ChevronUp, Activity, BarChart3 } from \"lucide-react\";\nimport { startWaveformLoop, drawIdleFrame } from \"../visualizer.js\";\nimport type { AudioVisualizerMode } from \"../visualizer.js\";\nimport { resolveInfiniteDuration } from \"../media-duration.js\";\n\nconst DEFAULT_PERSIST_KEY = \"mv-audio-player\";\n\nfunction readPref(persistKey: string | null, suffix: string): string | null {\n  if (!persistKey) return null;\n  try {\n    return window.localStorage.getItem(`${persistKey}:${suffix}`);\n  } catch {\n    return null;\n  }\n}\n\nfunction writePref(persistKey: string | null, suffix: string, value: string): void {\n  if (!persistKey) return;\n  try {\n    window.localStorage.setItem(`${persistKey}:${suffix}`, value);\n  } catch {\n    /* storage unavailable (private mode, SSR) — session-only prefs */\n  }\n}\n\nfunction formatTime(seconds: number): string {\n  if (!Number.isFinite(seconds) || seconds < 0) return \"0:00\";\n  const whole = Math.floor(seconds);\n  const m = Math.floor(whole / 60);\n  const s = whole % 60;\n  return `${m}:${s.toString().padStart(2, \"0\")}`;\n}\n\nexport type AudioPlayerChromeProps = {\n  audioRef: React.RefObject<HTMLAudioElement | null>;\n  /** Initial visualizer mode; a persisted user choice wins over this. */\n  visualizerMode?: AudioVisualizerMode;\n  /** localStorage key base for minimize/mode prefs; `null` disables persistence. */\n  persistKey?: string | null;\n  /** App-injected action buttons, rendered at the end of the control row. */\n  extraActions?: React.ReactNode;\n};\n\nexport function AudioPlayerChrome({\n  audioRef,\n  visualizerMode = \"bars\",\n  persistKey = DEFAULT_PERSIST_KEY,\n  extraActions,\n}: AudioPlayerChromeProps) {\n  const [isPlaying, setIsPlaying] = React.useState(false);\n  const [currentTime, setCurrentTime] = React.useState(0);\n  const [duration, setDuration] = React.useState(0);\n  const [isMuted, setIsMuted] = React.useState(false);\n  const [volume, setVolume] = React.useState(1);\n  const [minimized, setMinimized] = React.useState<boolean>(() => readPref(persistKey, \"minimized\") === \"1\");\n  const [mode, setMode] = React.useState<AudioVisualizerMode>(() => {\n    const stored = readPref(persistKey, \"mode\");\n    return stored === \"line\" || stored === \"bars\" ? stored : visualizerMode;\n  });\n\n  // While the user drags the seek slider, timeupdate must not fight the thumb.\n  const [scrubTime, setScrubTime] = React.useState<number | null>(null);\n\n  const canvasRef = React.useRef<HTMLCanvasElement | null>(null);\n  const modeRef = React.useRef(mode);\n  modeRef.current = mode;\n\n  // Web Audio graph (lazy, keyed to the element instance).\n  const audioCtxRef = React.useRef<AudioContext | null>(null);\n  const sourceElRef = React.useRef<HTMLAudioElement | null>(null);\n  const analyserRef = React.useRef<AnalyserNode | null>(null);\n  const stopLoopRef = React.useRef<(() => void) | null>(null);\n\n  const stopLoop = React.useCallback(() => {\n    stopLoopRef.current?.();\n    stopLoopRef.current = null;\n  }, []);\n\n  const teardownGraph = React.useCallback(() => {\n    stopLoop();\n    analyserRef.current = null;\n    sourceElRef.current = null;\n    const ctx = audioCtxRef.current;\n    audioCtxRef.current = null;\n    if (ctx && ctx.state !== \"closed\") {\n      ctx.close().catch(() => {});\n    }\n  }, [stopLoop]);\n\n  const ensureGraph = React.useCallback(\n    (el: HTMLAudioElement) => {\n      try {\n        if (sourceElRef.current === el && audioCtxRef.current) {\n          if (audioCtxRef.current.state === \"suspended\") {\n            audioCtxRef.current.resume().catch(() => {});\n          }\n          return;\n        }\n        teardownGraph();\n        const AudioCtx: typeof AudioContext =\n          (window as unknown as { AudioContext?: typeof AudioContext }).AudioContext ||\n          (window as unknown as { webkitAudioContext?: typeof AudioContext }).webkitAudioContext!;\n        if (!AudioCtx) return;\n        const ctx = new AudioCtx();\n        const source = ctx.createMediaElementSource(el);\n        const analyser = ctx.createAnalyser();\n        analyser.fftSize = 256;\n        // Element audio now routes through the graph — destination connection\n        // is REQUIRED or playback goes silent.\n        source.connect(analyser);\n        analyser.connect(ctx.destination);\n        audioCtxRef.current = ctx;\n        sourceElRef.current = el;\n        analyserRef.current = analyser;\n        if (ctx.state === \"suspended\") {\n          ctx.resume().catch(() => {});\n        }\n      } catch {\n        // Best-effort: playback works without the visualizer.\n        analyserRef.current = null;\n      }\n    },\n    [teardownGraph],\n  );\n\n  const startLoop = React.useCallback(() => {\n    if (stopLoopRef.current) return;\n    const analyser = analyserRef.current;\n    if (!analyser) return;\n    stopLoopRef.current = startWaveformLoop({\n      analyser,\n      getCanvas: () => canvasRef.current,\n      mode: () => modeRef.current,\n    });\n  }, []);\n\n  // Element event subscriptions. The element mounts in the same commit as this\n  // chrome (AudioViewer renders both once loading starts), so the ref is set\n  // by the time this effect runs.\n  React.useEffect(() => {\n    const el = audioRef.current;\n    if (!el) return;\n\n    // MediaRecorder blobs report duration Infinity until seeked (Chromium webm\n    // quirk) — without this the readout sticks at \"0:01 / 0:00\". Learn the real\n    // duration via the shared seek workaround; paused-only so an actively\n    // playing element is never seek-jumped, and one attempt per element so a\n    // workaround-triggered durationchange can never re-enter it.\n    let durationReconcileAttempted = false;\n    const reconcileInfiniteDuration = () => {\n      if (durationReconcileAttempted || Number.isFinite(el.duration) || !el.paused) return;\n      durationReconcileAttempted = true;\n      void resolveInfiniteDuration(el).then((real) => {\n        if (real !== null) setDuration(real);\n      });\n    };\n\n    const syncFromElement = () => {\n      setIsPlaying(!el.paused && !el.ended);\n      setIsMuted(el.muted);\n      setVolume(el.volume);\n      if (Number.isFinite(el.duration)) setDuration(el.duration);\n      setCurrentTime(el.currentTime);\n    };\n    syncFromElement();\n    if (el.readyState >= 1) reconcileInfiniteDuration();\n\n    const onPlay = () => {\n      setIsPlaying(true);\n      ensureGraph(el);\n      startLoop();\n    };\n    const onPause = () => {\n      setIsPlaying(false);\n      stopLoop();\n    };\n    const onEnded = () => {\n      setIsPlaying(false);\n      stopLoop();\n    };\n    const onTimeUpdate = () => setCurrentTime(el.currentTime);\n    const onDurationChange = () => {\n      if (Number.isFinite(el.duration)) setDuration(el.duration);\n      else reconcileInfiniteDuration();\n    };\n    const onVolumeChange = () => {\n      setIsMuted(el.muted);\n      setVolume(el.volume);\n    };\n\n    el.addEventListener(\"play\", onPlay);\n    el.addEventListener(\"pause\", onPause);\n    el.addEventListener(\"ended\", onEnded);\n    el.addEventListener(\"timeupdate\", onTimeUpdate);\n    el.addEventListener(\"durationchange\", onDurationChange);\n    el.addEventListener(\"loadedmetadata\", onDurationChange);\n    el.addEventListener(\"volumechange\", onVolumeChange);\n    return () => {\n      el.removeEventListener(\"play\", onPlay);\n      el.removeEventListener(\"pause\", onPause);\n      el.removeEventListener(\"ended\", onEnded);\n      el.removeEventListener(\"timeupdate\", onTimeUpdate);\n      el.removeEventListener(\"durationchange\", onDurationChange);\n      el.removeEventListener(\"loadedmetadata\", onDurationChange);\n      el.removeEventListener(\"volumechange\", onVolumeChange);\n    };\n  }, [audioRef, ensureGraph, startLoop, stopLoop]);\n\n  // Full teardown when the chrome unmounts.\n  React.useEffect(() => teardownGraph, [teardownGraph]);\n\n  // Idle frame whenever the visualizer is visible but not animating.\n  React.useEffect(() => {\n    if (minimized || isPlaying) return;\n    const canvas = canvasRef.current;\n    if (canvas) drawIdleFrame(canvas, mode);\n  }, [minimized, isPlaying, mode]);\n\n  const togglePlay = () => {\n    const el = audioRef.current;\n    if (!el) return;\n    if (el.paused) void el.play().catch(() => {});\n    else el.pause();\n  };\n\n  const toggleMute = () => {\n    const el = audioRef.current;\n    if (!el) return;\n    el.muted = !el.muted;\n  };\n\n  const onVolumeInput = (e: React.ChangeEvent<HTMLInputElement>) => {\n    const el = audioRef.current;\n    if (!el) return;\n    const v = Number(e.target.value);\n    el.volume = v;\n    if (v > 0 && el.muted) el.muted = false;\n  };\n\n  const onSeekInput = (e: React.ChangeEvent<HTMLInputElement>) => {\n    setScrubTime(Number(e.target.value));\n  };\n\n  const commitSeek = () => {\n    const el = audioRef.current;\n    if (el && scrubTime !== null) {\n      try {\n        el.currentTime = scrubTime;\n      } catch {\n        /* not seekable yet */\n      }\n    }\n    setScrubTime(null);\n  };\n\n  const toggleMinimized = () => {\n    setMinimized((m) => {\n      writePref(persistKey, \"minimized\", m ? \"0\" : \"1\");\n      return !m;\n    });\n  };\n\n  const toggleMode = () => {\n    setMode((prev) => {\n      const next: AudioVisualizerMode = prev === \"line\" ? \"bars\" : \"line\";\n      writePref(persistKey, \"mode\", next);\n      return next;\n    });\n  };\n\n  const shownTime = scrubTime ?? currentTime;\n\n  return (\n    <div className=\"mv-player\" data-mv-player data-minimized={minimized ? \"true\" : \"false\"} data-mode={mode}>\n      {!minimized && (\n        <div className=\"mv-player-viz\">\n          <canvas ref={canvasRef} width={600} height={96} className=\"mv-player-canvas\" aria-hidden=\"true\" />\n          <button\n            type=\"button\"\n            className=\"mv-player-btn mv-player-mode-btn\"\n            onClick={toggleMode}\n            aria-label={mode === \"line\" ? \"Switch visualizer to bars\" : \"Switch visualizer to waveform line\"}\n          >\n            {mode === \"line\" ? <BarChart3 aria-hidden=\"true\" /> : <Activity aria-hidden=\"true\" />}\n          </button>\n        </div>\n      )}\n      <div className=\"mv-player-controls\">\n        <button\n          type=\"button\"\n          className=\"mv-player-btn mv-player-play-btn\"\n          onClick={togglePlay}\n          aria-label={isPlaying ? \"Pause\" : \"Play\"}\n        >\n          {isPlaying ? <Pause aria-hidden=\"true\" /> : <Play aria-hidden=\"true\" />}\n        </button>\n        <span className=\"mv-player-time\" aria-hidden=\"true\">\n          {formatTime(shownTime)}\n        </span>\n        <input\n          type=\"range\"\n          className=\"mv-player-seek\"\n          min={0}\n          max={duration > 0 ? duration : 0}\n          step={0.1}\n          value={Math.min(shownTime, duration > 0 ? duration : shownTime)}\n          onChange={onSeekInput}\n          onMouseUp={commitSeek}\n          onTouchEnd={commitSeek}\n          onKeyUp={commitSeek}\n          disabled={duration <= 0}\n          aria-label=\"Seek\"\n        />\n        <span className=\"mv-player-time\" aria-hidden=\"true\">\n          {formatTime(duration)}\n        </span>\n        <button\n          type=\"button\"\n          className=\"mv-player-btn\"\n          onClick={toggleMute}\n          aria-label={isMuted ? \"Unmute\" : \"Mute\"}\n        >\n          {isMuted ? <VolumeX aria-hidden=\"true\" /> : <Volume2 aria-hidden=\"true\" />}\n        </button>\n        <input\n          type=\"range\"\n          className=\"mv-player-volume\"\n          min={0}\n          max={1}\n          step={0.05}\n          value={isMuted ? 0 : volume}\n          onChange={onVolumeInput}\n          aria-label=\"Volume\"\n        />\n        <button\n          type=\"button\"\n          className=\"mv-player-btn\"\n          onClick={toggleMinimized}\n          aria-label={minimized ? \"Show visualizer\" : \"Hide visualizer\"}\n        >\n          {minimized ? <ChevronUp aria-hidden=\"true\" /> : <ChevronDown aria-hidden=\"true\" />}\n        </button>\n        {extraActions != null && <div className=\"mv-player-extra\">{extraActions}</div>}\n      </div>\n    </div>\n  );\n}\n"]}
+{"version":3,"file":"audio-player-chrome.js","sourceRoot":"","sources":["../../src/react/audio-player-chrome.tsx"],"names":[],"mappings":"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","sourcesContent":["\"use client\";\n\n// Custom audio player chrome — the one owned control surface used by every\n// AudioViewer. Owns: play/pause, seek, time readout, mute/volume, and\n// the visualizer panel (shared engine in ../visualizer.ts) with minimize and\n// line/bars mode toggles. The media ELEMENT (loading, errors, playback API)\n// stays owned by AudioViewer — this component only reads/drives it.\n//\n// Web Audio wiring is created lazily on the first `play` event (autoplay\n// policies suspend fresh AudioContexts; a user-gesture play resumes them) and\n// is best-effort throughout: if anything throws, the player still plays and\n// only the visualizer goes dark. `createMediaElementSource` is once-per-\n// element, so the graph is keyed to the element instance and rebuilt only if\n// the element itself changes.\n\nimport * as React from \"react\";\nimport { Pause, Play, Volume2, VolumeX, ChevronDown, ChevronUp, Activity, BarChart3 } from \"lucide-react\";\nimport { Spinner } from \"@ttt-productions/ui-core/react\";\nimport { startWaveformLoop, drawIdleFrame } from \"../visualizer.js\";\nimport type { AudioVisualizerMode } from \"../visualizer.js\";\nimport { resolveInfiniteDuration } from \"../media-duration.js\";\n\nconst DEFAULT_PERSIST_KEY = \"mv-audio-player\";\n\nfunction readPref(persistKey: string | null, suffix: string): string | null {\n  if (!persistKey) return null;\n  try {\n    return window.localStorage.getItem(`${persistKey}:${suffix}`);\n  } catch {\n    return null;\n  }\n}\n\nfunction writePref(persistKey: string | null, suffix: string, value: string): void {\n  if (!persistKey) return;\n  try {\n    window.localStorage.setItem(`${persistKey}:${suffix}`, value);\n  } catch {\n    /* storage unavailable (private mode, SSR) — session-only prefs */\n  }\n}\n\nfunction formatTime(seconds: number): string {\n  if (!Number.isFinite(seconds) || seconds < 0) return \"0:00\";\n  const whole = Math.floor(seconds);\n  const m = Math.floor(whole / 60);\n  const s = whole % 60;\n  return `${m}:${s.toString().padStart(2, \"0\")}`;\n}\n\nexport type AudioPlayerChromeProps = {\n  audioRef: React.RefObject<HTMLAudioElement | null>;\n  /** Initial visualizer mode; a persisted user choice wins over this. */\n  visualizerMode?: AudioVisualizerMode;\n  /** localStorage key base for minimize/mode prefs; `null` disables persistence. */\n  persistKey?: string | null;\n  /** App-injected action buttons, rendered at the end of the control row. */\n  extraActions?: React.ReactNode;\n};\n\nexport function AudioPlayerChrome({\n  audioRef,\n  visualizerMode = \"bars\",\n  persistKey = DEFAULT_PERSIST_KEY,\n  extraActions,\n}: AudioPlayerChromeProps) {\n  const [isPlaying, setIsPlaying] = React.useState(false);\n  // Playback is waiting on data (initial buffer, a stall, or a seek landing).\n  const [buffering, setBuffering] = React.useState(false);\n  const [currentTime, setCurrentTime] = React.useState(0);\n  const [duration, setDuration] = React.useState(0);\n  const [isMuted, setIsMuted] = React.useState(false);\n  const [volume, setVolume] = React.useState(1);\n  const [minimized, setMinimized] = React.useState<boolean>(() => readPref(persistKey, \"minimized\") === \"1\");\n  const [mode, setMode] = React.useState<AudioVisualizerMode>(() => {\n    const stored = readPref(persistKey, \"mode\");\n    return stored === \"line\" || stored === \"bars\" ? stored : visualizerMode;\n  });\n\n  // While the user drags the seek slider, timeupdate must not fight the thumb.\n  const [scrubTime, setScrubTime] = React.useState<number | null>(null);\n\n  const canvasRef = React.useRef<HTMLCanvasElement | null>(null);\n  const modeRef = React.useRef(mode);\n  modeRef.current = mode;\n\n  // Web Audio graph (lazy, keyed to the element instance).\n  const audioCtxRef = React.useRef<AudioContext | null>(null);\n  const sourceElRef = React.useRef<HTMLAudioElement | null>(null);\n  const analyserRef = React.useRef<AnalyserNode | null>(null);\n  const stopLoopRef = React.useRef<(() => void) | null>(null);\n\n  const stopLoop = React.useCallback(() => {\n    stopLoopRef.current?.();\n    stopLoopRef.current = null;\n  }, []);\n\n  const teardownGraph = React.useCallback(() => {\n    stopLoop();\n    analyserRef.current = null;\n    sourceElRef.current = null;\n    const ctx = audioCtxRef.current;\n    audioCtxRef.current = null;\n    if (ctx && ctx.state !== \"closed\") {\n      ctx.close().catch(() => {});\n    }\n  }, [stopLoop]);\n\n  const ensureGraph = React.useCallback(\n    (el: HTMLAudioElement) => {\n      try {\n        if (sourceElRef.current === el && audioCtxRef.current) {\n          if (audioCtxRef.current.state === \"suspended\") {\n            audioCtxRef.current.resume().catch(() => {});\n          }\n          return;\n        }\n        teardownGraph();\n        const AudioCtx: typeof AudioContext =\n          (window as unknown as { AudioContext?: typeof AudioContext }).AudioContext ||\n          (window as unknown as { webkitAudioContext?: typeof AudioContext }).webkitAudioContext!;\n        if (!AudioCtx) return;\n        const ctx = new AudioCtx();\n        const source = ctx.createMediaElementSource(el);\n        const analyser = ctx.createAnalyser();\n        analyser.fftSize = 256;\n        // Element audio now routes through the graph — destination connection\n        // is REQUIRED or playback goes silent.\n        source.connect(analyser);\n        analyser.connect(ctx.destination);\n        audioCtxRef.current = ctx;\n        sourceElRef.current = el;\n        analyserRef.current = analyser;\n        if (ctx.state === \"suspended\") {\n          ctx.resume().catch(() => {});\n        }\n      } catch {\n        // Best-effort: playback works without the visualizer.\n        analyserRef.current = null;\n      }\n    },\n    [teardownGraph],\n  );\n\n  const startLoop = React.useCallback(() => {\n    if (stopLoopRef.current) return;\n    const analyser = analyserRef.current;\n    if (!analyser) return;\n    stopLoopRef.current = startWaveformLoop({\n      analyser,\n      getCanvas: () => canvasRef.current,\n      mode: () => modeRef.current,\n    });\n  }, []);\n\n  // Element event subscriptions. The element mounts in the same commit as this\n  // chrome (AudioViewer renders both once loading starts), so the ref is set\n  // by the time this effect runs.\n  React.useEffect(() => {\n    const el = audioRef.current;\n    if (!el) return;\n\n    // MediaRecorder blobs report duration Infinity until seeked (Chromium webm\n    // quirk) — without this the readout sticks at \"0:01 / 0:00\". Learn the real\n    // duration via the shared seek workaround; paused-only so an actively\n    // playing element is never seek-jumped, and one attempt per element so a\n    // workaround-triggered durationchange can never re-enter it.\n    let durationReconcileAttempted = false;\n    const reconcileInfiniteDuration = () => {\n      if (durationReconcileAttempted || Number.isFinite(el.duration) || !el.paused) return;\n      durationReconcileAttempted = true;\n      void resolveInfiniteDuration(el).then((real) => {\n        if (real !== null) setDuration(real);\n      });\n    };\n\n    const syncFromElement = () => {\n      setIsPlaying(!el.paused && !el.ended);\n      setIsMuted(el.muted);\n      setVolume(el.volume);\n      if (Number.isFinite(el.duration)) setDuration(el.duration);\n      setCurrentTime(el.currentTime);\n    };\n    syncFromElement();\n    if (el.readyState >= 1) reconcileInfiniteDuration();\n\n    const onPlay = () => {\n      setIsPlaying(true);\n      ensureGraph(el);\n      startLoop();\n    };\n    const onPause = () => {\n      setIsPlaying(false);\n      stopLoop();\n    };\n    const onEnded = () => {\n      setIsPlaying(false);\n      stopLoop();\n    };\n    const onTimeUpdate = () => setCurrentTime(el.currentTime);\n    const onDurationChange = () => {\n      if (Number.isFinite(el.duration)) setDuration(el.duration);\n      else reconcileInfiniteDuration();\n    };\n    const onVolumeChange = () => {\n      setIsMuted(el.muted);\n      setVolume(el.volume);\n    };\n    const onWaiting = () => setBuffering(true);\n    const onReady = () => setBuffering(false);\n\n    el.addEventListener(\"play\", onPlay);\n    el.addEventListener(\"pause\", onPause);\n    el.addEventListener(\"ended\", onEnded);\n    el.addEventListener(\"timeupdate\", onTimeUpdate);\n    el.addEventListener(\"durationchange\", onDurationChange);\n    el.addEventListener(\"loadedmetadata\", onDurationChange);\n    el.addEventListener(\"volumechange\", onVolumeChange);\n    el.addEventListener(\"waiting\", onWaiting);\n    el.addEventListener(\"seeking\", onWaiting);\n    el.addEventListener(\"playing\", onReady);\n    el.addEventListener(\"seeked\", onReady);\n    el.addEventListener(\"canplay\", onReady);\n    el.addEventListener(\"pause\", onReady);\n    el.addEventListener(\"ended\", onReady);\n    el.addEventListener(\"error\", onReady);\n    return () => {\n      el.removeEventListener(\"play\", onPlay);\n      el.removeEventListener(\"pause\", onPause);\n      el.removeEventListener(\"ended\", onEnded);\n      el.removeEventListener(\"timeupdate\", onTimeUpdate);\n      el.removeEventListener(\"durationchange\", onDurationChange);\n      el.removeEventListener(\"loadedmetadata\", onDurationChange);\n      el.removeEventListener(\"volumechange\", onVolumeChange);\n      el.removeEventListener(\"waiting\", onWaiting);\n      el.removeEventListener(\"seeking\", onWaiting);\n      el.removeEventListener(\"playing\", onReady);\n      el.removeEventListener(\"seeked\", onReady);\n      el.removeEventListener(\"canplay\", onReady);\n      el.removeEventListener(\"pause\", onReady);\n      el.removeEventListener(\"ended\", onReady);\n      el.removeEventListener(\"error\", onReady);\n    };\n  }, [audioRef, ensureGraph, startLoop, stopLoop]);\n\n  // Full teardown when the chrome unmounts.\n  React.useEffect(() => teardownGraph, [teardownGraph]);\n\n  // Idle frame whenever the visualizer is visible but not animating.\n  React.useEffect(() => {\n    if (minimized || isPlaying) return;\n    const canvas = canvasRef.current;\n    if (canvas) drawIdleFrame(canvas, mode);\n  }, [minimized, isPlaying, mode]);\n\n  const togglePlay = () => {\n    const el = audioRef.current;\n    if (!el) return;\n    if (el.paused) void el.play().catch(() => {});\n    else el.pause();\n  };\n\n  const toggleMute = () => {\n    const el = audioRef.current;\n    if (!el) return;\n    el.muted = !el.muted;\n  };\n\n  const onVolumeInput = (e: React.ChangeEvent<HTMLInputElement>) => {\n    const el = audioRef.current;\n    if (!el) return;\n    const v = Number(e.target.value);\n    el.volume = v;\n    if (v > 0 && el.muted) el.muted = false;\n  };\n\n  const onSeekInput = (e: React.ChangeEvent<HTMLInputElement>) => {\n    setScrubTime(Number(e.target.value));\n  };\n\n  const commitSeek = () => {\n    const el = audioRef.current;\n    if (el && scrubTime !== null) {\n      try {\n        el.currentTime = scrubTime;\n      } catch {\n        /* not seekable yet */\n      }\n    }\n    setScrubTime(null);\n  };\n\n  const toggleMinimized = () => {\n    setMinimized((m) => {\n      writePref(persistKey, \"minimized\", m ? \"0\" : \"1\");\n      return !m;\n    });\n  };\n\n  const toggleMode = () => {\n    setMode((prev) => {\n      const next: AudioVisualizerMode = prev === \"line\" ? \"bars\" : \"line\";\n      writePref(persistKey, \"mode\", next);\n      return next;\n    });\n  };\n\n  const shownTime = scrubTime ?? currentTime;\n\n  return (\n    <div className=\"mv-player\" data-mv-player data-minimized={minimized ? \"true\" : \"false\"} data-mode={mode}>\n      {!minimized && (\n        <div className=\"mv-player-viz\">\n          <canvas ref={canvasRef} width={600} height={96} className=\"mv-player-canvas\" aria-hidden=\"true\" />\n          <button\n            type=\"button\"\n            className=\"mv-player-btn mv-player-mode-btn\"\n            onClick={toggleMode}\n            aria-label={mode === \"line\" ? \"Switch visualizer to bars\" : \"Switch visualizer to waveform line\"}\n          >\n            {mode === \"line\" ? <BarChart3 aria-hidden=\"true\" /> : <Activity aria-hidden=\"true\" />}\n          </button>\n        </div>\n      )}\n      <div className=\"mv-player-controls\">\n        <button\n          type=\"button\"\n          className=\"mv-player-btn mv-player-play-btn\"\n          onClick={togglePlay}\n          aria-label={isPlaying ? \"Pause\" : \"Play\"}\n          aria-busy={isPlaying && buffering ? true : undefined}\n        >\n          {isPlaying && buffering ? <Spinner size=\"xs\" /> : isPlaying ? <Pause aria-hidden=\"true\" /> : <Play aria-hidden=\"true\" />}\n        </button>\n        <span className=\"mv-player-time\" aria-hidden=\"true\">\n          {formatTime(shownTime)}\n        </span>\n        <input\n          type=\"range\"\n          className=\"mv-player-seek\"\n          min={0}\n          max={duration > 0 ? duration : 0}\n          step={0.1}\n          value={Math.min(shownTime, duration > 0 ? duration : shownTime)}\n          onChange={onSeekInput}\n          onMouseUp={commitSeek}\n          onTouchEnd={commitSeek}\n          onKeyUp={commitSeek}\n          disabled={duration <= 0}\n          aria-label=\"Seek\"\n        />\n        <span className=\"mv-player-time\" aria-hidden=\"true\">\n          {formatTime(duration)}\n        </span>\n        <button\n          type=\"button\"\n          className=\"mv-player-btn\"\n          onClick={toggleMute}\n          aria-label={isMuted ? \"Unmute\" : \"Mute\"}\n        >\n          {isMuted ? <VolumeX aria-hidden=\"true\" /> : <Volume2 aria-hidden=\"true\" />}\n        </button>\n        <input\n          type=\"range\"\n          className=\"mv-player-volume\"\n          min={0}\n          max={1}\n          step={0.05}\n          value={isMuted ? 0 : volume}\n          onChange={onVolumeInput}\n          aria-label=\"Volume\"\n        />\n        <button\n          type=\"button\"\n          className=\"mv-player-btn\"\n          onClick={toggleMinimized}\n          aria-label={minimized ? \"Show visualizer\" : \"Hide visualizer\"}\n        >\n          {minimized ? <ChevronUp aria-hidden=\"true\" /> : <ChevronDown aria-hidden=\"true\" />}\n        </button>\n        {extraActions != null && <div className=\"mv-player-extra\">{extraActions}</div>}\n      </div>\n    </div>\n  );\n}\n"]}

package/dist/react/audio-viewer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"audio-viewer.d.ts","sourceRoot":"","sources":["../../src/react/audio-viewer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAKpD,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,qBAwKlD"}
+{"version":3,"file":"audio-viewer.d.ts","sourceRoot":"","sources":["../../src/react/audio-viewer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAKpD,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,qBAkLlD"}

package/dist/react/audio-viewer.js

@@ -13,7 +13,13 @@ export function AudioViewer(props) {
     const [shouldLoad, setShouldLoad] = React.useState(priority || !lazy);
     const audioRef = React.useRef(null);
     // Additive playback API — derives from element events (no observer, MEDIA-102).
-    const { hasEnded, handlers: playbackHandlers } = useMediaPlayback(audioRef, { onEnded, onProgressSample, startAtSeconds, endOverlay }, playbackControlsRef, url);
+    const { hasEnded, handlers: playbackHandlers, attachElement } = useMediaPlayback(audioRef, { onEnded, onProgressSample, startAtSeconds, endOverlay }, playbackControlsRef, url);
+    // The element attaches through the playback lifecycle so the hook knows the
+    // active generation; detach (unmount) retires it.
+    const setAudioRef = React.useCallback((el) => {
+        audioRef.current = el;
+        attachElement(el);
+    }, [attachElement]);
     const { ref: inViewRef, inView } = useInView({
         triggerOnce: false,
         threshold: 0.01,
@@ -67,7 +73,7 @@ export function AudioViewer(props) {
             return _jsx(_Fragment, { children: fallback });
         return (_jsx("div", { className: className, children: _jsx("div", { className: "mv-audio-error", children: _jsx("p", { children: "Failed to load audio" }) }) }));
     }
-    return (_jsx("div", { ref: inViewRef, className: className, style: { position: "relative", width: "100%", outline: "none" }, children: !shouldLoad ? (showSkeleton ? _jsx(Skeleton, { style: { height: "3.5rem", width: "100%" } }) : null) : (_jsxs(_Fragment, { children: [showSkeleton && !isLoaded && (_jsx(Skeleton, { style: { position: "absolute", inset: 0, height: "3.5rem", width: "100%" } })), _jsx("audio", { ref: audioRef, src: url, className: mediaClassName, controls: false, autoPlay: autoPlay, loop: loop, preload: preload, onLoadedData: handleLoadedData, onCanPlay: handleCanPlay, onError: handleError, onLoadedMetadata: handleLoadedMetadata, onTimeUpdate: playbackHandlers.onTimeUpdate, onPlay: playbackHandlers.onPlay, onPause: playbackHandlers.onPause, onSeeked: playbackHandlers.onSeeked, onEnded: playbackHandlers.onEnded, style: {
+    return (_jsx("div", { ref: inViewRef, className: className, style: { position: "relative", width: "100%", outline: "none" }, children: !shouldLoad ? (showSkeleton ? _jsx(Skeleton, { style: { height: "3.5rem", width: "100%" } }) : null) : (_jsxs(_Fragment, { children: [showSkeleton && !isLoaded && (_jsx(Skeleton, { style: { position: "absolute", inset: 0, height: "3.5rem", width: "100%" } })), _jsx("audio", { ref: setAudioRef, src: url, className: mediaClassName, controls: false, autoPlay: autoPlay, loop: loop, preload: preload, onLoadedData: handleLoadedData, onCanPlay: handleCanPlay, onError: handleError, onLoadedMetadata: handleLoadedMetadata, onTimeUpdate: playbackHandlers.onTimeUpdate, onPlay: playbackHandlers.onPlay, onPause: playbackHandlers.onPause, onSeeked: playbackHandlers.onSeeked, onEnded: playbackHandlers.onEnded, style: {
                         width: "100%",
                         opacity: isLoaded ? 1 : 0,
                         transition: "opacity 300ms ease",

package/dist/react/audio-viewer.js.map

@@ -1 +1 @@
-{"version":3,"file":"audio-viewer.js","sourceRoot":"","sources":["../../src/react/audio-viewer.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,SAAS,EAAE,MAAM,6BAA6B,CAAC;AACxD,OAAO,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAE1D,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAC3D,OAAO,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAC7D,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAEzD,MAAM,UAAU,WAAW,CAAC,KAAuB;IACjD,MAAM,EACJ,GAAG,EACH,SAAS,EACT,cAAc,EACd,QAAQ,EACR,IAAI,GAAG,KAAK,EACZ,IAAI,GAAG,IAAI,EACX,QAAQ,EAAE,YAAY,GAAG,IAAI,EAC7B,QAAQ,GAAG,KAAK,EAChB,OAAO,GAAG,UAAU,EACpB,MAAM,EACN,YAAY,EACZ,OAAO,EACP,QAAQ,EACR,aAAa,EACb,OAAO,EACP,gBAAgB,EAChB,cAAc,EACd,UAAU,EACV,mBAAmB,EACnB,cAAc,EACd,UAAU,EACV,YAAY,GACb,GAAG,KAAK,CAAC;IAEV,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IACtD,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IACtD,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC5D,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,CAAC;IACtE,MAAM,QAAQ,GAAG,KAAK,CAAC,MAAM,CAAmB,IAAI,CAAC,CAAC;IAEtD,gFAAgF;IAChF,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,gBAAgB,EAAE,GAAG,gBAAgB,CAC/D,QAAQ,EACR,EAAE,OAAO,EAAE,gBAAgB,EAAE,cAAc,EAAE,UAAU,EAAE,EACzD,mBAAmB,EACnB,GAAG,CACJ,CAAC;IAEF,MAAM,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,EAAE,GAAG,SAAS,CAAC;QAC3C,WAAW,EAAE,KAAK;QAClB,SAAS,EAAE,IAAI;QACf,IAAI,EAAE,QAAQ,IAAI,UAAU;QAC5B,UAAU,EAAE,OAAO;KACpB,CAAC,CAAC;IAEH,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,IAAI,MAAM,IAAI,CAAC,UAAU,EAAE,CAAC;YAC1B,aAAa,CAAC,IAAI,CAAC,CAAC;QACtB,CAAC;IACH,CAAC,EAAE,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC,CAAC;IAEzB,sDAAsD;IACtD,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,IAAI,QAAQ,IAAI,UAAU;YAAE,OAAO;QACnC,MAAM,KAAK,GAAG,UAAU,CAAC,GAAG,EAAE;YAC5B,IAAI,CAAC,UAAU;gBAAE,aAAa,CAAC,IAAI,CAAC,CAAC;QACvC,CAAC,EAAE,GAAG,CAAC,CAAC;QACR,OAAO,GAAG,EAAE,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;IACnC,CAAC,EAAE,CAAC,GAAG,EAAE,QAAQ,EAAE,UAAU,CAAC,CAAC,CAAC;IAEhC,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,YAAY,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC;IAC5B,CAAC,EAAE,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAC,CAAC;IAE7B,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,WAAW,CAAC,KAAK,CAAC,CAAC;QACnB,WAAW,CAAC,KAAK,CAAC,CAAC;QACnB,cAAc,CAAC,KAAK,CAAC,CAAC;IACxB,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC;IAEV,MAAM,gBAAgB,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QAC9C,WAAW,CAAC,IAAI,CAAC,CAAC;QAClB,MAAM,EAAE,EAAE,CAAC;IACb,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;IAEb,MAAM,aAAa,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QAC3C,WAAW,CAAC,IAAI,CAAC,CAAC;IACpB,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,WAAW,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QACzC,WAAW,CAAC,IAAI,CAAC,CAAC;QAClB,WAAW,CAAC,IAAI,CAAC,CAAC,CAAC,yBAAyB;QAC5C,OAAO,EAAE,EAAE,CAAC;IACd,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAEd,uEAAuE;IACvE,8DAA8D;IAC9D,MAAM,oBAAoB,GAAG,KAAK,CAAC,WAAW,CAC5C,CAAC,CAAyC,EAAE,EAAE;QAC5C,cAAc,CAAC,IAAI,CAAC,CAAC;QACrB,gBAAgB,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAC;IACvC,CAAC,EACD,CAAC,gBAAgB,CAAC,CACnB,CAAC;IAEF,eAAe,CACb,UAAU,IAAI,CAAC,QAAQ,IAAI,CAAC,WAAW,IAAI,CAAC,QAAQ,EACpD,aAAa,EACb,WAAW,CACZ,CAAC;IAEF,IAAI,QAAQ,EAAE,CAAC;QACb,IAAI,QAAQ;YAAE,OAAO,4BAAG,QAAQ,GAAI,CAAC;QACrC,OAAO,CACL,cAAK,SAAS,EAAE,SAAS,YACvB,cAAK,SAAS,EAAC,gBAAgB,YAC7B,+CAA2B,GACvB,GACF,CACP,CAAC;IACJ,CAAC;IAED,OAAO,CACL,cACE,GAAG,EAAE,SAAS,EACd,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,YAE9D,CAAC,UAAU,CAAC,CAAC,CAAC,CACb,YAAY,CAAC,CAAC,CAAC,KAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,EAAE,GAAI,CAAC,CAAC,CAAC,IAAI,CAC/E,CAAC,CAAC,CAAC,CACF,8BACG,YAAY,IAAI,CAAC,QAAQ,IAAI,CAC5B,KAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,EAAE,GAAI,CACzF,EACD,gBACE,GAAG,EAAE,QAAQ,EACb,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,cAAc,EACzB,QAAQ,EAAE,KAAK,EACf,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,OAAO,EAChB,YAAY,EAAE,gBAAgB,EAC9B,SAAS,EAAE,aAAa,EACxB,OAAO,EAAE,WAAW,EACpB,gBAAgB,EAAE,oBAAoB,EACtC,YAAY,EAAE,gBAAgB,CAAC,YAAY,EAC3C,MAAM,EAAE,gBAAgB,CAAC,MAAM,EAC/B,OAAO,EAAE,gBAAgB,CAAC,OAAO,EACjC,QAAQ,EAAE,gBAAgB,CAAC,QAAQ,EACnC,OAAO,EAAE,gBAAgB,CAAC,OAAO,EACjC,KAAK,EAAE;wBACL,KAAK,EAAE,MAAM;wBACb,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;wBACzB,UAAU,EAAE,oBAAoB;qBACjC,GACD,EACF,KAAC,iBAAiB,IAChB,QAAQ,EAAE,QAAQ,EAClB,cAAc,EAAE,cAAc,EAC9B,UAAU,EAAE,UAAU,EACtB,YAAY,EAAE,YAAY,GAC1B,EACD,UAAU,IAAI,IAAI,IAAI,QAAQ,IAAI,CACjC,cACE,SAAS,EAAC,gBAAgB,EAC1B,KAAK,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,YAEnD,UAAU,GACP,CACP,IACA,CACJ,GACG,CACP,CAAC;AACJ,CAAC","sourcesContent":["import * as React from \"react\";\nimport { useInView } from \"react-intersection-observer\";\nimport { Skeleton } from \"@ttt-productions/ui-core/react\";\nimport type { AudioViewerProps } from \"../types.js\";\nimport { useMediaPlayback } from \"./use-media-playback.js\";\nimport { AudioPlayerChrome } from \"./audio-player-chrome.js\";\nimport { useLoadWatchdog } from \"./use-load-watchdog.js\";\n\nexport function AudioViewer(props: AudioViewerProps) {\n  const {\n    url,\n    className,\n    mediaClassName,\n    autoPlay,\n    loop = false,\n    lazy = true,\n    skeleton: showSkeleton = true,\n    priority = false,\n    preload = \"metadata\",\n    onLoad,\n    onLoadChange,\n    onError,\n    fallback,\n    loadTimeoutMs,\n    onEnded,\n    onProgressSample,\n    startAtSeconds,\n    endOverlay,\n    playbackControlsRef,\n    visualizerMode,\n    persistKey,\n    extraActions,\n  } = props;\n\n  const [isLoaded, setIsLoaded] = React.useState(false);\n  const [hasError, setHasError] = React.useState(false);\n  const [hasMetadata, setHasMetadata] = React.useState(false);\n  const [shouldLoad, setShouldLoad] = React.useState(priority || !lazy);\n  const audioRef = React.useRef<HTMLAudioElement>(null);\n\n  // Additive playback API — derives from element events (no observer, MEDIA-102).\n  const { hasEnded, handlers: playbackHandlers } = useMediaPlayback(\n    audioRef,\n    { onEnded, onProgressSample, startAtSeconds, endOverlay },\n    playbackControlsRef,\n    url,\n  );\n\n  const { ref: inViewRef, inView } = useInView({\n    triggerOnce: false,\n    threshold: 0.01,\n    skip: priority || shouldLoad,\n    rootMargin: \"100px\",\n  });\n\n  React.useEffect(() => {\n    if (inView && !shouldLoad) {\n      setShouldLoad(true);\n    }\n  }, [inView, shouldLoad]);\n\n  // Accordion compatibility: delayed auto-load on mount\n  React.useEffect(() => {\n    if (priority || shouldLoad) return;\n    const timer = setTimeout(() => {\n      if (!shouldLoad) setShouldLoad(true);\n    }, 100);\n    return () => clearTimeout(timer);\n  }, [url, priority, shouldLoad]);\n\n  React.useEffect(() => {\n    onLoadChange?.(!isLoaded);\n  }, [isLoaded, onLoadChange]);\n\n  React.useEffect(() => {\n    setHasError(false);\n    setIsLoaded(false);\n    setHasMetadata(false);\n  }, [url]);\n\n  const handleLoadedData = React.useCallback(() => {\n    setIsLoaded(true);\n    onLoad?.();\n  }, [onLoad]);\n\n  const handleCanPlay = React.useCallback(() => {\n    setIsLoaded(true);\n  }, []);\n\n  const handleError = React.useCallback(() => {\n    setHasError(true);\n    setIsLoaded(true); // Stop skeleton on error\n    onError?.();\n  }, [onError]);\n\n  // Watchdog settles on METADATA — preload=\"metadata\" audio may not fire\n  // loadeddata/canplay until play, and must not false-positive.\n  const handleLoadedMetadata = React.useCallback(\n    (e: React.SyntheticEvent<HTMLAudioElement>) => {\n      setHasMetadata(true);\n      playbackHandlers.onLoadedMetadata(e);\n    },\n    [playbackHandlers]\n  );\n\n  useLoadWatchdog(\n    shouldLoad && !isLoaded && !hasMetadata && !hasError,\n    loadTimeoutMs,\n    handleError\n  );\n\n  if (hasError) {\n    if (fallback) return <>{fallback}</>;\n    return (\n      <div className={className}>\n        <div className=\"mv-audio-error\">\n          <p>Failed to load audio</p>\n        </div>\n      </div>\n    );\n  }\n\n  return (\n    <div\n      ref={inViewRef}\n      className={className}\n      style={{ position: \"relative\", width: \"100%\", outline: \"none\" }}\n    >\n      {!shouldLoad ? (\n        showSkeleton ? <Skeleton style={{ height: \"3.5rem\", width: \"100%\" }} /> : null\n      ) : (\n        <>\n          {showSkeleton && !isLoaded && (\n            <Skeleton style={{ position: \"absolute\", inset: 0, height: \"3.5rem\", width: \"100%\" }} />\n          )}\n          <audio\n            ref={audioRef}\n            src={url}\n            className={mediaClassName}\n            controls={false}\n            autoPlay={autoPlay}\n            loop={loop}\n            preload={preload}\n            onLoadedData={handleLoadedData}\n            onCanPlay={handleCanPlay}\n            onError={handleError}\n            onLoadedMetadata={handleLoadedMetadata}\n            onTimeUpdate={playbackHandlers.onTimeUpdate}\n            onPlay={playbackHandlers.onPlay}\n            onPause={playbackHandlers.onPause}\n            onSeeked={playbackHandlers.onSeeked}\n            onEnded={playbackHandlers.onEnded}\n            style={{\n              width: \"100%\",\n              opacity: isLoaded ? 1 : 0,\n              transition: \"opacity 300ms ease\",\n            }}\n          />\n          <AudioPlayerChrome\n            audioRef={audioRef}\n            visualizerMode={visualizerMode}\n            persistKey={persistKey}\n            extraActions={extraActions}\n          />\n          {endOverlay != null && hasEnded && (\n            <div\n              className=\"mv-end-overlay\"\n              style={{ position: \"absolute\", inset: 0, zIndex: 2 }}\n            >\n              {endOverlay}\n            </div>\n          )}\n        </>\n      )}\n    </div>\n  );\n}\n"]}
+{"version":3,"file":"audio-viewer.js","sourceRoot":"","sources":["../../src/react/audio-viewer.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from \"react\";\nimport { useInView } from \"react-intersection-observer\";\nimport { Skeleton } from \"@ttt-productions/ui-core/react\";\nimport type { AudioViewerProps } from \"../types.js\";\nimport { useMediaPlayback } from \"./use-media-playback.js\";\nimport { AudioPlayerChrome } from \"./audio-player-chrome.js\";\nimport { useLoadWatchdog } from \"./use-load-watchdog.js\";\n\nexport function AudioViewer(props: AudioViewerProps) {\n  const {\n    url,\n    className,\n    mediaClassName,\n    autoPlay,\n    loop = false,\n    lazy = true,\n    skeleton: showSkeleton = true,\n    priority = false,\n    preload = \"metadata\",\n    onLoad,\n    onLoadChange,\n    onError,\n    fallback,\n    loadTimeoutMs,\n    onEnded,\n    onProgressSample,\n    startAtSeconds,\n    endOverlay,\n    playbackControlsRef,\n    visualizerMode,\n    persistKey,\n    extraActions,\n  } = props;\n\n  const [isLoaded, setIsLoaded] = React.useState(false);\n  const [hasError, setHasError] = React.useState(false);\n  const [hasMetadata, setHasMetadata] = React.useState(false);\n  const [shouldLoad, setShouldLoad] = React.useState(priority || !lazy);\n  const audioRef = React.useRef<HTMLAudioElement>(null);\n\n  // Additive playback API — derives from element events (no observer, MEDIA-102).\n  const { hasEnded, handlers: playbackHandlers, attachElement } = useMediaPlayback(\n    audioRef,\n    { onEnded, onProgressSample, startAtSeconds, endOverlay },\n    playbackControlsRef,\n    url,\n  );\n\n  // The element attaches through the playback lifecycle so the hook knows the\n  // active generation; detach (unmount) retires it.\n  const setAudioRef = React.useCallback(\n    (el: HTMLAudioElement | null) => {\n      audioRef.current = el;\n      attachElement(el);\n    },\n    [attachElement],\n  );\n\n  const { ref: inViewRef, inView } = useInView({\n    triggerOnce: false,\n    threshold: 0.01,\n    skip: priority || shouldLoad,\n    rootMargin: \"100px\",\n  });\n\n  React.useEffect(() => {\n    if (inView && !shouldLoad) {\n      setShouldLoad(true);\n    }\n  }, [inView, shouldLoad]);\n\n  // Accordion compatibility: delayed auto-load on mount\n  React.useEffect(() => {\n    if (priority || shouldLoad) return;\n    const timer = setTimeout(() => {\n      if (!shouldLoad) setShouldLoad(true);\n    }, 100);\n    return () => clearTimeout(timer);\n  }, [url, priority, shouldLoad]);\n\n  React.useEffect(() => {\n    onLoadChange?.(!isLoaded);\n  }, [isLoaded, onLoadChange]);\n\n  React.useEffect(() => {\n    setHasError(false);\n    setIsLoaded(false);\n    setHasMetadata(false);\n  }, [url]);\n\n  const handleLoadedData = React.useCallback(() => {\n    setIsLoaded(true);\n    onLoad?.();\n  }, [onLoad]);\n\n  const handleCanPlay = React.useCallback(() => {\n    setIsLoaded(true);\n  }, []);\n\n  const handleError = React.useCallback(() => {\n    setHasError(true);\n    setIsLoaded(true); // Stop skeleton on error\n    onError?.();\n  }, [onError]);\n\n  // Watchdog settles on METADATA — preload=\"metadata\" audio may not fire\n  // loadeddata/canplay until play, and must not false-positive.\n  const handleLoadedMetadata = React.useCallback(\n    (e: React.SyntheticEvent<HTMLAudioElement>) => {\n      setHasMetadata(true);\n      playbackHandlers.onLoadedMetadata(e);\n    },\n    [playbackHandlers]\n  );\n\n  useLoadWatchdog(\n    shouldLoad && !isLoaded && !hasMetadata && !hasError,\n    loadTimeoutMs,\n    handleError\n  );\n\n  if (hasError) {\n    if (fallback) return <>{fallback}</>;\n    return (\n      <div className={className}>\n        <div className=\"mv-audio-error\">\n          <p>Failed to load audio</p>\n        </div>\n      </div>\n    );\n  }\n\n  return (\n    <div\n      ref={inViewRef}\n      className={className}\n      style={{ position: \"relative\", width: \"100%\", outline: \"none\" }}\n    >\n      {!shouldLoad ? (\n        showSkeleton ? <Skeleton style={{ height: \"3.5rem\", width: \"100%\" }} /> : null\n      ) : (\n        <>\n          {showSkeleton && !isLoaded && (\n            <Skeleton style={{ position: \"absolute\", inset: 0, height: \"3.5rem\", width: \"100%\" }} />\n          )}\n          <audio\n            ref={setAudioRef}\n            src={url}\n            className={mediaClassName}\n            controls={false}\n            autoPlay={autoPlay}\n            loop={loop}\n            preload={preload}\n            onLoadedData={handleLoadedData}\n            onCanPlay={handleCanPlay}\n            onError={handleError}\n            onLoadedMetadata={handleLoadedMetadata}\n            onTimeUpdate={playbackHandlers.onTimeUpdate}\n            onPlay={playbackHandlers.onPlay}\n            onPause={playbackHandlers.onPause}\n            onSeeked={playbackHandlers.onSeeked}\n            onEnded={playbackHandlers.onEnded}\n            style={{\n              width: \"100%\",\n              opacity: isLoaded ? 1 : 0,\n              transition: \"opacity 300ms ease\",\n            }}\n          />\n          <AudioPlayerChrome\n            audioRef={audioRef}\n            visualizerMode={visualizerMode}\n            persistKey={persistKey}\n            extraActions={extraActions}\n          />\n          {endOverlay != null && hasEnded && (\n            <div\n              className=\"mv-end-overlay\"\n              style={{ position: \"absolute\", inset: 0, zIndex: 2 }}\n            >\n              {endOverlay}\n            </div>\n          )}\n        </>\n      )}\n    </div>\n  );\n}\n"]}

package/dist/react/fallback.d.ts

@@ -11,6 +11,11 @@ export declare function EmptyFallback(props: {
     isCircular?: boolean;
     className?: string;
 }): import("react").JSX.Element;
+/** Loading state: the URL is still being prepared (see `urlPending`). */
+export declare function PendingFallback(props: {
+    isCircular?: boolean;
+    className?: string;
+}): import("react").JSX.Element;
 /** Error state: failed to load */
 export declare function ErrorFallback(props: {
     isCircular?: boolean;

package/dist/react/fallback.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"fallback.d.ts","sourceRoot":"","sources":["../../src/react/fallback.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAEhD,wBAAgB,iBAAiB,CAAC,KAAK,EAAE;IACvC,GAAG,EAAE,MAAM,CAAC;IACZ,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,+BAcA;AAED,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,YAAY,GAAG,SAAS,GAAG,OAAO,CAE1E;AAED,mCAAmC;AACnC,wBAAgB,aAAa,CAAC,KAAK,EAAE;IAAE,UAAU,CAAC,EAAE,OAAO,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,+BAehF;AAED,kCAAkC;AAClC,wBAAgB,aAAa,CAAC,KAAK,EAAE;IAAE,UAAU,CAAC,EAAE,OAAO,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,+BAchF"}
+{"version":3,"file":"fallback.d.ts","sourceRoot":"","sources":["../../src/react/fallback.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAEhD,wBAAgB,iBAAiB,CAAC,KAAK,EAAE;IACvC,GAAG,EAAE,MAAM,CAAC;IACZ,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,+BAcA;AAED,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,YAAY,GAAG,SAAS,GAAG,OAAO,CAE1E;AAED,mCAAmC;AACnC,wBAAgB,aAAa,CAAC,KAAK,EAAE;IAAE,UAAU,CAAC,EAAE,OAAO,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,+BAehF;AAED,yEAAyE;AACzE,wBAAgB,eAAe,CAAC,KAAK,EAAE;IAAE,UAAU,CAAC,EAAE,OAAO,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,+BAOlF;AAED,kCAAkC;AAClC,wBAAgB,aAAa,CAAC,KAAK,EAAE;IAAE,UAAU,CAAC,EAAE,OAAO,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,+BAchF"}

package/dist/react/fallback.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Spinner } from "@ttt-productions/ui-core/react";
 export function MediaFallbackLink(props) {
     const { url, filename, className, label } = props;
     return (_jsx("a", { href: url, target: "_blank", rel: "noreferrer", download: filename || undefined, className: className, children: label ?? "Download" }));
@@ -14,6 +15,11 @@ export function EmptyFallback(props) {
     }
     return (_jsx("div", { className: className ?? "mv-empty-fallback", children: _jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("path", { d: "M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z" }), _jsx("path", { d: "M14 2v4a2 2 0 0 0 2 2h4" })] }) }));
 }
+/** Loading state: the URL is still being prepared (see `urlPending`). */
+export function PendingFallback(props) {
+    const { isCircular, className } = props;
+    return (_jsx("div", { className: className ?? (isCircular ? "mv-avatar-fallback" : "mv-pending-fallback"), children: _jsx(Spinner, { size: isCircular ? "xs" : "md", label: "Loading media" }) }));
+}
 /** Error state: failed to load */
 export function ErrorFallback(props) {
     const { isCircular, className } = props;

package/dist/react/fallback.js.map

@@ -1 +1 @@
-{"version":3,"file":"fallback.js","sourceRoot":"","sources":["../../src/react/fallback.tsx"],"names":[],"mappings":";AAEA,MAAM,UAAU,iBAAiB,CAAC,KAKjC;IACC,MAAM,EAAE,GAAG,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,KAAK,CAAC;IAElD,OAAO,CACL,YACE,IAAI,EAAE,GAAG,EACT,MAAM,EAAC,QAAQ,EACf,GAAG,EAAC,YAAY,EAChB,QAAQ,EAAE,QAAQ,IAAI,SAAS,EAC/B,SAAS,EAAE,SAAS,YAEnB,KAAK,IAAI,UAAU,GAClB,CACL,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,kBAAkB,CAAC,IAA8B;IAC/D,OAAO,IAAI,KAAK,MAAM,CAAC;AACzB,CAAC;AAED,mCAAmC;AACnC,MAAM,UAAU,aAAa,CAAC,KAAmD;IAC/E,MAAM,EAAE,UAAU,EAAE,SAAS,EAAE,GAAG,KAAK,CAAC;IACxC,IAAI,UAAU,EAAE,CAAC;QACf,OAAO,CACL,cAAK,SAAS,EAAE,SAAS,IAAI,oBAAoB,kBAAS,CAC3D,CAAC;IACJ,CAAC;IACD,OAAO,CACL,cAAK,SAAS,EAAE,SAAS,IAAI,mBAAmB,YAC9C,eAAK,KAAK,EAAC,4BAA4B,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,MAAM,EAAC,cAAc,EAAC,WAAW,EAAC,GAAG,EAAC,aAAa,EAAC,OAAO,EAAC,cAAc,EAAC,OAAO,aAC/K,eAAM,CAAC,EAAC,4DAA4D,GAAG,EACvE,eAAM,CAAC,EAAC,yBAAyB,GAAG,IAChC,GACF,CACP,CAAC;AACJ,CAAC;AAED,kCAAkC;AAClC,MAAM,UAAU,aAAa,CAAC,KAAmD;IAC/E,MAAM,EAAE,UAAU,EAAE,SAAS,EAAE,GAAG,KAAK,CAAC;IACxC,OAAO,CACL,cACE,SAAS,EAAE,SAAS,IAAI,mBAAmB,EAC3C,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC,EAAE,YAAY,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,SAAS,YAEvD,eAAK,KAAK,EAAC,4BAA4B,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,MAAM,EAAC,cAAc,EAAC,WAAW,EAAC,GAAG,EAAC,aAAa,EAAC,OAAO,EAAC,cAAc,EAAC,OAAO,aAC/K,eAAM,CAAC,EAAC,4DAA4D,GAAG,EACvE,eAAM,CAAC,EAAC,yBAAyB,GAAG,EACpC,eAAM,EAAE,EAAC,GAAG,EAAC,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,GAAG,GAAG,IAClC,GACF,CACP,CAAC;AACJ,CAAC","sourcesContent":["import type { FallbackMode } from \"../types.js\";\n\nexport function MediaFallbackLink(props: {\n  url: string;\n  filename?: string;\n  className?: string;\n  label?: string;\n}) {\n  const { url, filename, className, label } = props;\n\n  return (\n    <a\n      href={url}\n      target=\"_blank\"\n      rel=\"noreferrer\"\n      download={filename || undefined}\n      className={className}\n    >\n      {label ?? \"Download\"}\n    </a>\n  );\n}\n\nexport function shouldShowFallback(mode: FallbackMode | undefined): boolean {\n  return mode !== \"none\";\n}\n\n/** Empty state: no URL provided */\nexport function EmptyFallback(props: { isCircular?: boolean; className?: string }) {\n  const { isCircular, className } = props;\n  if (isCircular) {\n    return (\n      <div className={className ?? \"mv-avatar-fallback\"}>?</div>\n    );\n  }\n  return (\n    <div className={className ?? \"mv-empty-fallback\"}>\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\n        <path d=\"M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z\" />\n        <path d=\"M14 2v4a2 2 0 0 0 2 2h4\" />\n      </svg>\n    </div>\n  );\n}\n\n/** Error state: failed to load */\nexport function ErrorFallback(props: { isCircular?: boolean; className?: string }) {\n  const { isCircular, className } = props;\n  return (\n    <div\n      className={className ?? \"mv-error-fallback\"}\n      style={isCircular ? { borderRadius: \"50%\" } : undefined}\n    >\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\n        <path d=\"M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z\" />\n        <path d=\"M14 2v4a2 2 0 0 0 2 2h4\" />\n        <line x1=\"9\" x2=\"15\" y1=\"15\" y2=\"9\" />\n      </svg>\n    </div>\n  );\n}\n"]}
+{"version":3,"file":"fallback.js","sourceRoot":"","sources":["../../src/react/fallback.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,gCAAgC,CAAC;AAGzD,MAAM,UAAU,iBAAiB,CAAC,KAKjC;IACC,MAAM,EAAE,GAAG,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,KAAK,CAAC;IAElD,OAAO,CACL,YACE,IAAI,EAAE,GAAG,EACT,MAAM,EAAC,QAAQ,EACf,GAAG,EAAC,YAAY,EAChB,QAAQ,EAAE,QAAQ,IAAI,SAAS,EAC/B,SAAS,EAAE,SAAS,YAEnB,KAAK,IAAI,UAAU,GAClB,CACL,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,kBAAkB,CAAC,IAA8B;IAC/D,OAAO,IAAI,KAAK,MAAM,CAAC;AACzB,CAAC;AAED,mCAAmC;AACnC,MAAM,UAAU,aAAa,CAAC,KAAmD;IAC/E,MAAM,EAAE,UAAU,EAAE,SAAS,EAAE,GAAG,KAAK,CAAC;IACxC,IAAI,UAAU,EAAE,CAAC;QACf,OAAO,CACL,cAAK,SAAS,EAAE,SAAS,IAAI,oBAAoB,kBAAS,CAC3D,CAAC;IACJ,CAAC;IACD,OAAO,CACL,cAAK,SAAS,EAAE,SAAS,IAAI,mBAAmB,YAC9C,eAAK,KAAK,EAAC,4BAA4B,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,MAAM,EAAC,cAAc,EAAC,WAAW,EAAC,GAAG,EAAC,aAAa,EAAC,OAAO,EAAC,cAAc,EAAC,OAAO,aAC/K,eAAM,CAAC,EAAC,4DAA4D,GAAG,EACvE,eAAM,CAAC,EAAC,yBAAyB,GAAG,IAChC,GACF,CACP,CAAC;AACJ,CAAC;AAED,yEAAyE;AACzE,MAAM,UAAU,eAAe,CAAC,KAAmD;IACjF,MAAM,EAAE,UAAU,EAAE,SAAS,EAAE,GAAG,KAAK,CAAC;IACxC,OAAO,CACL,cAAK,SAAS,EAAE,SAAS,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,qBAAqB,CAAC,YACtF,KAAC,OAAO,IAAC,IAAI,EAAE,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,EAAE,KAAK,EAAC,eAAe,GAAG,GAC7D,CACP,CAAC;AACJ,CAAC;AAED,kCAAkC;AAClC,MAAM,UAAU,aAAa,CAAC,KAAmD;IAC/E,MAAM,EAAE,UAAU,EAAE,SAAS,EAAE,GAAG,KAAK,CAAC;IACxC,OAAO,CACL,cACE,SAAS,EAAE,SAAS,IAAI,mBAAmB,EAC3C,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC,EAAE,YAAY,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,SAAS,YAEvD,eAAK,KAAK,EAAC,4BAA4B,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,MAAM,EAAC,cAAc,EAAC,WAAW,EAAC,GAAG,EAAC,aAAa,EAAC,OAAO,EAAC,cAAc,EAAC,OAAO,aAC/K,eAAM,CAAC,EAAC,4DAA4D,GAAG,EACvE,eAAM,CAAC,EAAC,yBAAyB,GAAG,EACpC,eAAM,EAAE,EAAC,GAAG,EAAC,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,GAAG,GAAG,IAClC,GACF,CACP,CAAC;AACJ,CAAC","sourcesContent":["import { Spinner } from \"@ttt-productions/ui-core/react\";\nimport type { FallbackMode } from \"../types.js\";\n\nexport function MediaFallbackLink(props: {\n  url: string;\n  filename?: string;\n  className?: string;\n  label?: string;\n}) {\n  const { url, filename, className, label } = props;\n\n  return (\n    <a\n      href={url}\n      target=\"_blank\"\n      rel=\"noreferrer\"\n      download={filename || undefined}\n      className={className}\n    >\n      {label ?? \"Download\"}\n    </a>\n  );\n}\n\nexport function shouldShowFallback(mode: FallbackMode | undefined): boolean {\n  return mode !== \"none\";\n}\n\n/** Empty state: no URL provided */\nexport function EmptyFallback(props: { isCircular?: boolean; className?: string }) {\n  const { isCircular, className } = props;\n  if (isCircular) {\n    return (\n      <div className={className ?? \"mv-avatar-fallback\"}>?</div>\n    );\n  }\n  return (\n    <div className={className ?? \"mv-empty-fallback\"}>\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\n        <path d=\"M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z\" />\n        <path d=\"M14 2v4a2 2 0 0 0 2 2h4\" />\n      </svg>\n    </div>\n  );\n}\n\n/** Loading state: the URL is still being prepared (see `urlPending`). */\nexport function PendingFallback(props: { isCircular?: boolean; className?: string }) {\n  const { isCircular, className } = props;\n  return (\n    <div className={className ?? (isCircular ? \"mv-avatar-fallback\" : \"mv-pending-fallback\")}>\n      <Spinner size={isCircular ? \"xs\" : \"md\"} label=\"Loading media\" />\n    </div>\n  );\n}\n\n/** Error state: failed to load */\nexport function ErrorFallback(props: { isCircular?: boolean; className?: string }) {\n  const { isCircular, className } = props;\n  return (\n    <div\n      className={className ?? \"mv-error-fallback\"}\n      style={isCircular ? { borderRadius: \"50%\" } : undefined}\n    >\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\n        <path d=\"M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z\" />\n        <path d=\"M14 2v4a2 2 0 0 0 2 2h4\" />\n        <line x1=\"9\" x2=\"15\" y1=\"15\" y2=\"9\" />\n      </svg>\n    </div>\n  );\n}\n"]}

package/dist/react/index.d.ts

@@ -4,7 +4,7 @@ export { VideoViewer } from "./video-viewer.js";
 export { AudioViewer } from "./audio-viewer.js";
 export { AudioPlayer } from "./audio-player.js";
 export type { AudioPlayerProps } from "./audio-player.js";
-export { MediaFallbackLink, shouldShowFallback, EmptyFallback, ErrorFallback } from "./fallback.js";
+export { MediaFallbackLink, shouldShowFallback, EmptyFallback, ErrorFallback, PendingFallback } from "./fallback.js";
 export { useMediaRecovery } from "./use-media-recovery.js";
 export type { UseMediaRecoveryOptions, UseMediaRecoveryResult } from "./use-media-recovery.js";
 export { useMediaPlayback, PROGRESS_SAMPLE_INTERVAL_MS, LATE_RESUME_ADOPT_WINDOW_SEC, } from "./use-media-playback.js";

package/dist/react/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/react/index.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAC9D,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,YAAY,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAC1D,OAAO,EAAE,iBAAiB,EAAE,kBAAkB,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AACpG,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAC3D,YAAY,EAAE,uBAAuB,EAAE,sBAAsB,EAAE,MAAM,yBAAyB,CAAC;AAC/F,OAAO,EACL,gBAAgB,EAChB,2BAA2B,EAC3B,4BAA4B,GAC7B,MAAM,yBAAyB,CAAC;AACjC,YAAY,EAAE,sBAAsB,EAAE,MAAM,yBAAyB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/react/index.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAC9D,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,YAAY,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAC1D,OAAO,EAAE,iBAAiB,EAAE,kBAAkB,EAAE,aAAa,EAAE,aAAa,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AACrH,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAC3D,YAAY,EAAE,uBAAuB,EAAE,sBAAsB,EAAE,MAAM,yBAAyB,CAAC;AAC/F,OAAO,EACL,gBAAgB,EAChB,2BAA2B,EAC3B,4BAA4B,GAC7B,MAAM,yBAAyB,CAAC;AACjC,YAAY,EAAE,sBAAsB,EAAE,MAAM,yBAAyB,CAAC"}

package/dist/react/index.js

@@ -4,7 +4,7 @@ export { ImageViewer } from "./image-viewer.js";
 export { VideoViewer } from "./video-viewer.js";
 export { AudioViewer } from "./audio-viewer.js";
 export { AudioPlayer } from "./audio-player.js";
-export { MediaFallbackLink, shouldShowFallback, EmptyFallback, ErrorFallback } from "./fallback.js";
+export { MediaFallbackLink, shouldShowFallback, EmptyFallback, ErrorFallback, PendingFallback } from "./fallback.js";
 export { useMediaRecovery } from "./use-media-recovery.js";
 export { useMediaPlayback, PROGRESS_SAMPLE_INTERVAL_MS, LATE_RESUME_ADOPT_WINDOW_SEC, } from "./use-media-playback.js";
 //# sourceMappingURL=index.js.map

package/dist/react/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/react/index.ts"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAC9D,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,iBAAiB,EAAE,kBAAkB,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AACpG,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAE3D,OAAO,EACL,gBAAgB,EAChB,2BAA2B,EAC3B,4BAA4B,GAC7B,MAAM,yBAAyB,CAAC","sourcesContent":["\"use client\";\n\nexport { MediaViewer, MediaPreview } from \"./media-viewer.js\";\nexport { ImageViewer } from \"./image-viewer.js\";\nexport { VideoViewer } from \"./video-viewer.js\";\nexport { AudioViewer } from \"./audio-viewer.js\";\nexport { AudioPlayer } from \"./audio-player.js\";\nexport type { AudioPlayerProps } from \"./audio-player.js\";\nexport { MediaFallbackLink, shouldShowFallback, EmptyFallback, ErrorFallback } from \"./fallback.js\";\nexport { useMediaRecovery } from \"./use-media-recovery.js\";\nexport type { UseMediaRecoveryOptions, UseMediaRecoveryResult } from \"./use-media-recovery.js\";\nexport {\n  useMediaPlayback,\n  PROGRESS_SAMPLE_INTERVAL_MS,\n  LATE_RESUME_ADOPT_WINDOW_SEC,\n} from \"./use-media-playback.js\";\nexport type { UseMediaPlaybackResult } from \"./use-media-playback.js\";\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/react/index.ts"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAC9D,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,iBAAiB,EAAE,kBAAkB,EAAE,aAAa,EAAE,aAAa,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AACrH,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAE3D,OAAO,EACL,gBAAgB,EAChB,2BAA2B,EAC3B,4BAA4B,GAC7B,MAAM,yBAAyB,CAAC","sourcesContent":["\"use client\";\n\nexport { MediaViewer, MediaPreview } from \"./media-viewer.js\";\nexport { ImageViewer } from \"./image-viewer.js\";\nexport { VideoViewer } from \"./video-viewer.js\";\nexport { AudioViewer } from \"./audio-viewer.js\";\nexport { AudioPlayer } from \"./audio-player.js\";\nexport type { AudioPlayerProps } from \"./audio-player.js\";\nexport { MediaFallbackLink, shouldShowFallback, EmptyFallback, ErrorFallback, PendingFallback } from \"./fallback.js\";\nexport { useMediaRecovery } from \"./use-media-recovery.js\";\nexport type { UseMediaRecoveryOptions, UseMediaRecoveryResult } from \"./use-media-recovery.js\";\nexport {\n  useMediaPlayback,\n  PROGRESS_SAMPLE_INTERVAL_MS,\n  LATE_RESUME_ADOPT_WINDOW_SEC,\n} from \"./use-media-playback.js\";\nexport type { UseMediaPlaybackResult } from \"./use-media-playback.js\";\n"]}

package/dist/react/media-viewer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"media-viewer.d.ts","sourceRoot":"","sources":["../../src/react/media-viewer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,KAAK,EAAE,iBAAiB,EAAiC,MAAM,aAAa,CAAC;AA6GpF,wBAAgB,WAAW,CAAC,KAAK,EAAE,iBAAiB,4BA2OnD;AAED,wBAAwB;AACxB,eAAO,MAAM,YAAY,oBAAc,CAAC"}
+{"version":3,"file":"media-viewer.d.ts","sourceRoot":"","sources":["../../src/react/media-viewer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,KAAK,EAAE,iBAAiB,EAAiC,MAAM,aAAa,CAAC;AA6GpF,wBAAgB,WAAW,CAAC,KAAK,EAAE,iBAAiB,4BA4OnD;AAED,wBAAwB;AACxB,eAAO,MAAM,YAAY,oBAAc,CAAC"}

package/dist/react/media-viewer.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { getSimplifiedMediaType } from "@ttt-productions/media-schemas";
-import { MediaFallbackLink, shouldShowFallback, EmptyFallback, ErrorFallback } from "./fallback.js";
+import { MediaFallbackLink, shouldShowFallback, EmptyFallback, ErrorFallback, PendingFallback } from "./fallback.js";
 import { ImageViewer } from "./image-viewer.js";
 import { VideoViewer } from "./video-viewer.js";
 import { AudioViewer } from "./audio-viewer.js";
@@ -59,7 +59,7 @@ function RecoveryOverlay({ state, onManualRetry, isCircular }) {
 // Main component
 // ---------------------------------------------------------------------------
 export function MediaViewer(props) {
-    const { url, alt, type, className, unloadOnExit, isCircular = false, enableZoom, priority, skeleton, lazy, controls, autoPlay, muted, loop, posterUrl, preload, autoPlayOnVisible, onLoad, onError, onLoadChange, onEnded, onProgressSample, startAtSeconds, endOverlay, playbackControlsRef, audioVisualizerMode, audioPersistKey, audioExtraActions, fallbackMode = "link", fallbackLabel, filename, mime, name, recoveryAdapter, assetStatusHint, loadTimeoutMs, } = props;
+    const { url, alt, type, className, unloadOnExit, urlPending = false, isCircular = false, enableZoom, priority, skeleton, lazy, controls, autoPlay, muted, loop, posterUrl, preload, autoPlayOnVisible, onLoad, onError, onLoadChange, onEnded, onProgressSample, startAtSeconds, endOverlay, playbackControlsRef, audioVisualizerMode, audioPersistKey, audioExtraActions, fallbackMode = "link", fallbackLabel, filename, mime, name, recoveryAdapter, assetStatusHint, loadTimeoutMs, } = props;
     const [hasError, setHasError] = React.useState(false);
     const [sourceUrl, setSourceUrl] = React.useState(null);
     // Remount key: incrementing this causes child media elements to unmount and
@@ -126,7 +126,7 @@ export function MediaViewer(props) {
         recoveryState.phase !== "loading";
     // No URL -> empty fallback
     if (!sourceUrl) {
-        return (_jsx("div", { className: className, style: wrapperStyle, children: _jsx(EmptyFallback, { isCircular: isCircular }) }));
+        return (_jsx("div", { className: className, style: wrapperStyle, children: urlPending ? _jsx(PendingFallback, { isCircular: isCircular }) : _jsx(EmptyFallback, { isCircular: isCircular }) }));
     }
     // Recovery overlay (for all non-idle/non-loaded recovery states)
     if (isInRecovery && hasError) {

package/dist/react/media-viewer.js.map

@@ -1 +1 @@
-{"version":3,"file":"media-viewer.js","sourceRoot":"","sources":["../../src/react/media-viewer.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from \"react\";\nimport { getSimplifiedMediaType } from \"@ttt-productions/media-schemas\";\nimport type { SimplifiedMediaType } from \"@ttt-productions/media-schemas\";\n\nimport type { MediaPreviewProps, MediaViewerType, FallbackMode } from \"../types.js\";\nimport { MediaFallbackLink, shouldShowFallback, EmptyFallback, ErrorFallback } from \"./fallback.js\";\nimport { ImageViewer } from \"./image-viewer.js\";\nimport { VideoViewer } from \"./video-viewer.js\";\nimport { AudioViewer } from \"./audio-viewer.js\";\nimport { useMediaRecovery } from \"./use-media-recovery.js\";\nimport type { RecoveryState } from \"../recovery.js\";\n\nfunction inferType(props: { type?: MediaPreviewProps[\"type\"]; mime?: string; name?: string; url?: string }): MediaViewerType {\n  if (props.type) {\n    // Handle MIME strings like \"image/png\" -> \"image\"\n    const primary = typeof props.type === \"string\" ? props.type.split(\"/\")[0] : props.type;\n    if (primary === \"image\" || primary === \"video\" || primary === \"audio\") return primary;\n    if (primary === \"other\") return \"other\";\n  }\n\n  const hint = props.mime ?? props.name ?? props.url;\n  if (!hint) return \"other\";\n  const simplified: SimplifiedMediaType = getSimplifiedMediaType(hint);\n  return simplified;\n}\n\n// ---------------------------------------------------------------------------\n// Recovery-phase UI helpers\n// ---------------------------------------------------------------------------\n\nfunction RecoveryOverlay({ state, onManualRetry, isCircular }: {\n  state: RecoveryState;\n  onManualRetry: () => void;\n  isCircular?: boolean;\n}) {\n  const wrapStyle: React.CSSProperties = {\n    display: \"flex\",\n    flexDirection: \"column\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    width: \"100%\",\n    height: \"100%\",\n    gap: \"0.5rem\",\n    ...(isCircular ? { borderRadius: \"50%\" } : {}),\n  };\n\n  if (state.phase === \"processing\") {\n    return (\n      <div className=\"mv-recovery-processing\" style={wrapStyle}>\n        <span className=\"mv-recovery-label\">Processing media&hellip;</span>\n      </div>\n    );\n  }\n\n  if (state.phase === \"finalizing\") {\n    return (\n      <div className=\"mv-recovery-finalizing\" style={wrapStyle}>\n        <span className=\"mv-recovery-label\">Finishing media&hellip;</span>\n      </div>\n    );\n  }\n\n  if (state.phase === \"transient-retry\" || state.phase === \"propagating\") {\n    return (\n      <div className=\"mv-recovery-retrying\" style={wrapStyle}>\n        <span className=\"mv-recovery-label\">Loading&hellip;</span>\n      </div>\n    );\n  }\n\n  if (state.phase === \"auth-retry\") {\n    return (\n      <div className=\"mv-recovery-auth\" style={wrapStyle}>\n        <span className=\"mv-recovery-label\">Refreshing access&hellip;</span>\n      </div>\n    );\n  }\n\n  if (state.phase === \"hard-unavailable\") {\n    return (\n      <div className=\"mv-recovery-hard\" style={wrapStyle}>\n        <ErrorFallback isCircular={isCircular} />\n        {state.reason === \"auth\" ? (\n          <span className=\"mv-recovery-label\">Access denied.</span>\n        ) : (\n          <span className=\"mv-recovery-label\">Media unavailable.</span>\n        )}\n      </div>\n    );\n  }\n\n  if (state.phase === \"max-wait-fallback\") {\n    return (\n      <div className=\"mv-recovery-max-wait\" style={wrapStyle}>\n        <span className=\"mv-recovery-label\">This media is taking longer than expected.</span>\n        <button\n          type=\"button\"\n          className=\"mv-recovery-retry-btn\"\n          onClick={onManualRetry}\n        >\n          Retry\n        </button>\n      </div>\n    );\n  }\n\n  return null;\n}\n\n// ---------------------------------------------------------------------------\n// Main component\n// ---------------------------------------------------------------------------\n\nexport function MediaViewer(props: MediaPreviewProps) {\n  const {\n    url,\n    alt,\n    type,\n    className,\n    unloadOnExit,\n    isCircular = false,\n    enableZoom,\n    priority,\n    skeleton,\n    lazy,\n    controls,\n    autoPlay,\n    muted,\n    loop,\n    posterUrl,\n    preload,\n    autoPlayOnVisible,\n    onLoad,\n    onError,\n    onLoadChange,\n    onEnded,\n    onProgressSample,\n    startAtSeconds,\n    endOverlay,\n    playbackControlsRef,\n    audioVisualizerMode,\n    audioPersistKey,\n    audioExtraActions,\n    fallbackMode = \"link\",\n    fallbackLabel,\n    filename,\n    mime,\n    name,\n    recoveryAdapter,\n    assetStatusHint,\n    loadTimeoutMs,\n  } = props;\n\n  const [hasError, setHasError] = React.useState(false);\n  const [sourceUrl, setSourceUrl] = React.useState<string | null>(null);\n\n  // Remount key: incrementing this causes child media elements to unmount and\n  // re-mount from scratch, re-issuing the HTTP request.\n  const [remountKey, setRemountKey] = React.useState(0);\n\n  const handleRemount = React.useCallback(() => {\n    setHasError(false);\n    setRemountKey((k) => k + 1);\n  }, []);\n\n  // Recovery hook (no-op when recoveryAdapter is omitted)\n  const { recoveryState, onMediaError, onMediaLoad, manualRetry } =\n    useMediaRecovery({\n      url: typeof url === \"string\" ? url : null,\n      adapter: recoveryAdapter,\n      statusHint: assetStatusHint,\n      onRemount: handleRemount,\n    });\n\n  React.useEffect(() => {\n    setHasError(false);\n    let objectUrl: string | null = null;\n\n    if (typeof url === \"string\") {\n      setSourceUrl(url);\n    } else if (url instanceof Blob) {\n      objectUrl = URL.createObjectURL(url);\n      setSourceUrl(objectUrl);\n    } else {\n      setSourceUrl(null);\n    }\n\n    return () => {\n      if (objectUrl) URL.revokeObjectURL(objectUrl);\n    };\n  }, [url]);\n\n  const handleError = React.useCallback(() => {\n    setHasError(true);\n    onError?.();\n    // If a recovery adapter is provided, delegate to the recovery hook.\n    if (recoveryAdapter) {\n      onMediaError();\n    }\n  }, [onError, recoveryAdapter, onMediaError]);\n\n  const handleLoad = React.useCallback(() => {\n    setHasError(false);\n    onLoad?.();\n    // Signal successful load to the recovery state machine.\n    if (recoveryAdapter) {\n      onMediaLoad();\n    }\n  }, [onLoad, recoveryAdapter, onMediaLoad]);\n\n  const circularStyle: React.CSSProperties = isCircular\n    ? { borderRadius: \"50%\", overflow: \"hidden\" }\n    : {};\n\n  const wrapperStyle: React.CSSProperties = {\n    position: \"relative\",\n    width: \"100%\",\n    height: \"100%\",\n    ...circularStyle,\n  };\n\n  // When recovery is active and in a terminal/blocking state, show the overlay.\n  const isInRecovery =\n    recoveryAdapter !== undefined &&\n    recoveryState.phase !== \"idle\" &&\n    recoveryState.phase !== \"loaded\" &&\n    recoveryState.phase !== \"loading\";\n\n  // No URL -> empty fallback\n  if (!sourceUrl) {\n    return (\n      <div className={className} style={wrapperStyle}>\n        <EmptyFallback isCircular={isCircular} />\n      </div>\n    );\n  }\n\n  // Recovery overlay (for all non-idle/non-loaded recovery states)\n  if (isInRecovery && hasError) {\n    return (\n      <div className={className} style={wrapperStyle}>\n        <RecoveryOverlay\n          state={recoveryState}\n          onManualRetry={manualRetry}\n          isCircular={isCircular}\n        />\n      </div>\n    );\n  }\n\n  // Vanilla error (no recovery adapter) -> error fallback\n  if (hasError && !recoveryAdapter) {\n    return (\n      <div className={className} style={wrapperStyle}>\n        <ErrorFallback isCircular={isCircular} />\n      </div>\n    );\n  }\n\n  const t = inferType({ type, mime, name, url: sourceUrl });\n\n  if (t === \"image\") {\n    return (\n      <div className={className} style={wrapperStyle}>\n        <ImageViewer\n          key={remountKey}\n          url={sourceUrl}\n          alt={alt}\n          lazy={lazy}\n          priority={priority}\n          skeleton={skeleton}\n          unloadOnExit={unloadOnExit}\n          isCircular={isCircular}\n          enableZoom={enableZoom}\n          loadTimeoutMs={loadTimeoutMs}\n          onLoad={handleLoad}\n          onError={handleError}\n          fallback={<ErrorFallback isCircular={isCircular} />}\n        />\n      </div>\n    );\n  }\n\n  if (t === \"video\") {\n    return (\n      <div className={className} style={wrapperStyle}>\n        <VideoViewer\n          key={remountKey}\n          url={sourceUrl}\n          lazy={lazy}\n          priority={priority}\n          skeleton={skeleton}\n          unloadOnExit={unloadOnExit}\n          controls={controls}\n          autoPlay={autoPlay}\n          muted={muted}\n          loop={loop}\n          posterUrl={posterUrl}\n          preload={preload}\n          autoPlayOnVisible={autoPlayOnVisible}\n          loadTimeoutMs={loadTimeoutMs}\n          onLoad={handleLoad}\n          onError={handleError}\n          onEnded={onEnded}\n          onProgressSample={onProgressSample}\n          startAtSeconds={startAtSeconds}\n          endOverlay={endOverlay}\n          playbackControlsRef={playbackControlsRef}\n        />\n      </div>\n    );\n  }\n\n  if (t === \"audio\") {\n    return (\n      <div className={className} style={wrapperStyle}>\n        <AudioViewer\n          key={remountKey}\n          url={sourceUrl}\n          lazy={lazy}\n          priority={priority}\n          skeleton={skeleton}\n          autoPlay={autoPlay}\n          loop={loop}\n          preload={preload}\n          visualizerMode={audioVisualizerMode}\n          persistKey={audioPersistKey}\n          extraActions={audioExtraActions}\n          loadTimeoutMs={loadTimeoutMs}\n          onLoad={handleLoad}\n          onLoadChange={onLoadChange}\n          onError={handleError}\n          onEnded={onEnded}\n          onProgressSample={onProgressSample}\n          startAtSeconds={startAtSeconds}\n          endOverlay={endOverlay}\n          playbackControlsRef={playbackControlsRef}\n        />\n      </div>\n    );\n  }\n\n  // Unknown type -> fallback link\n  return shouldShowFallback(fallbackMode as FallbackMode) ? (\n    <div className={className} style={wrapperStyle}>\n      <MediaFallbackLink url={sourceUrl} filename={filename} label={fallbackLabel ?? \"Download\"} />\n    </div>\n  ) : null;\n}\n\n/** Back-compat alias */\nexport const MediaPreview = MediaViewer;\n"]}
+{"version":3,"file":"media-viewer.js","sourceRoot":"","sources":["../../src/react/media-viewer.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from \"react\";\nimport { getSimplifiedMediaType } from \"@ttt-productions/media-schemas\";\nimport type { SimplifiedMediaType } from \"@ttt-productions/media-schemas\";\n\nimport type { MediaPreviewProps, MediaViewerType, FallbackMode } from \"../types.js\";\nimport { MediaFallbackLink, shouldShowFallback, EmptyFallback, ErrorFallback, PendingFallback } from \"./fallback.js\";\nimport { ImageViewer } from \"./image-viewer.js\";\nimport { VideoViewer } from \"./video-viewer.js\";\nimport { AudioViewer } from \"./audio-viewer.js\";\nimport { useMediaRecovery } from \"./use-media-recovery.js\";\nimport type { RecoveryState } from \"../recovery.js\";\n\nfunction inferType(props: { type?: MediaPreviewProps[\"type\"]; mime?: string; name?: string; url?: string }): MediaViewerType {\n  if (props.type) {\n    // Handle MIME strings like \"image/png\" -> \"image\"\n    const primary = typeof props.type === \"string\" ? props.type.split(\"/\")[0] : props.type;\n    if (primary === \"image\" || primary === \"video\" || primary === \"audio\") return primary;\n    if (primary === \"other\") return \"other\";\n  }\n\n  const hint = props.mime ?? props.name ?? props.url;\n  if (!hint) return \"other\";\n  const simplified: SimplifiedMediaType = getSimplifiedMediaType(hint);\n  return simplified;\n}\n\n// ---------------------------------------------------------------------------\n// Recovery-phase UI helpers\n// ---------------------------------------------------------------------------\n\nfunction RecoveryOverlay({ state, onManualRetry, isCircular }: {\n  state: RecoveryState;\n  onManualRetry: () => void;\n  isCircular?: boolean;\n}) {\n  const wrapStyle: React.CSSProperties = {\n    display: \"flex\",\n    flexDirection: \"column\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    width: \"100%\",\n    height: \"100%\",\n    gap: \"0.5rem\",\n    ...(isCircular ? { borderRadius: \"50%\" } : {}),\n  };\n\n  if (state.phase === \"processing\") {\n    return (\n      <div className=\"mv-recovery-processing\" style={wrapStyle}>\n        <span className=\"mv-recovery-label\">Processing media&hellip;</span>\n      </div>\n    );\n  }\n\n  if (state.phase === \"finalizing\") {\n    return (\n      <div className=\"mv-recovery-finalizing\" style={wrapStyle}>\n        <span className=\"mv-recovery-label\">Finishing media&hellip;</span>\n      </div>\n    );\n  }\n\n  if (state.phase === \"transient-retry\" || state.phase === \"propagating\") {\n    return (\n      <div className=\"mv-recovery-retrying\" style={wrapStyle}>\n        <span className=\"mv-recovery-label\">Loading&hellip;</span>\n      </div>\n    );\n  }\n\n  if (state.phase === \"auth-retry\") {\n    return (\n      <div className=\"mv-recovery-auth\" style={wrapStyle}>\n        <span className=\"mv-recovery-label\">Refreshing access&hellip;</span>\n      </div>\n    );\n  }\n\n  if (state.phase === \"hard-unavailable\") {\n    return (\n      <div className=\"mv-recovery-hard\" style={wrapStyle}>\n        <ErrorFallback isCircular={isCircular} />\n        {state.reason === \"auth\" ? (\n          <span className=\"mv-recovery-label\">Access denied.</span>\n        ) : (\n          <span className=\"mv-recovery-label\">Media unavailable.</span>\n        )}\n      </div>\n    );\n  }\n\n  if (state.phase === \"max-wait-fallback\") {\n    return (\n      <div className=\"mv-recovery-max-wait\" style={wrapStyle}>\n        <span className=\"mv-recovery-label\">This media is taking longer than expected.</span>\n        <button\n          type=\"button\"\n          className=\"mv-recovery-retry-btn\"\n          onClick={onManualRetry}\n        >\n          Retry\n        </button>\n      </div>\n    );\n  }\n\n  return null;\n}\n\n// ---------------------------------------------------------------------------\n// Main component\n// ---------------------------------------------------------------------------\n\nexport function MediaViewer(props: MediaPreviewProps) {\n  const {\n    url,\n    alt,\n    type,\n    className,\n    unloadOnExit,\n    urlPending = false,\n    isCircular = false,\n    enableZoom,\n    priority,\n    skeleton,\n    lazy,\n    controls,\n    autoPlay,\n    muted,\n    loop,\n    posterUrl,\n    preload,\n    autoPlayOnVisible,\n    onLoad,\n    onError,\n    onLoadChange,\n    onEnded,\n    onProgressSample,\n    startAtSeconds,\n    endOverlay,\n    playbackControlsRef,\n    audioVisualizerMode,\n    audioPersistKey,\n    audioExtraActions,\n    fallbackMode = \"link\",\n    fallbackLabel,\n    filename,\n    mime,\n    name,\n    recoveryAdapter,\n    assetStatusHint,\n    loadTimeoutMs,\n  } = props;\n\n  const [hasError, setHasError] = React.useState(false);\n  const [sourceUrl, setSourceUrl] = React.useState<string | null>(null);\n\n  // Remount key: incrementing this causes child media elements to unmount and\n  // re-mount from scratch, re-issuing the HTTP request.\n  const [remountKey, setRemountKey] = React.useState(0);\n\n  const handleRemount = React.useCallback(() => {\n    setHasError(false);\n    setRemountKey((k) => k + 1);\n  }, []);\n\n  // Recovery hook (no-op when recoveryAdapter is omitted)\n  const { recoveryState, onMediaError, onMediaLoad, manualRetry } =\n    useMediaRecovery({\n      url: typeof url === \"string\" ? url : null,\n      adapter: recoveryAdapter,\n      statusHint: assetStatusHint,\n      onRemount: handleRemount,\n    });\n\n  React.useEffect(() => {\n    setHasError(false);\n    let objectUrl: string | null = null;\n\n    if (typeof url === \"string\") {\n      setSourceUrl(url);\n    } else if (url instanceof Blob) {\n      objectUrl = URL.createObjectURL(url);\n      setSourceUrl(objectUrl);\n    } else {\n      setSourceUrl(null);\n    }\n\n    return () => {\n      if (objectUrl) URL.revokeObjectURL(objectUrl);\n    };\n  }, [url]);\n\n  const handleError = React.useCallback(() => {\n    setHasError(true);\n    onError?.();\n    // If a recovery adapter is provided, delegate to the recovery hook.\n    if (recoveryAdapter) {\n      onMediaError();\n    }\n  }, [onError, recoveryAdapter, onMediaError]);\n\n  const handleLoad = React.useCallback(() => {\n    setHasError(false);\n    onLoad?.();\n    // Signal successful load to the recovery state machine.\n    if (recoveryAdapter) {\n      onMediaLoad();\n    }\n  }, [onLoad, recoveryAdapter, onMediaLoad]);\n\n  const circularStyle: React.CSSProperties = isCircular\n    ? { borderRadius: \"50%\", overflow: \"hidden\" }\n    : {};\n\n  const wrapperStyle: React.CSSProperties = {\n    position: \"relative\",\n    width: \"100%\",\n    height: \"100%\",\n    ...circularStyle,\n  };\n\n  // When recovery is active and in a terminal/blocking state, show the overlay.\n  const isInRecovery =\n    recoveryAdapter !== undefined &&\n    recoveryState.phase !== \"idle\" &&\n    recoveryState.phase !== \"loaded\" &&\n    recoveryState.phase !== \"loading\";\n\n  // No URL -> empty fallback\n  if (!sourceUrl) {\n    return (\n      <div className={className} style={wrapperStyle}>\n        {urlPending ? <PendingFallback isCircular={isCircular} /> : <EmptyFallback isCircular={isCircular} />}\n      </div>\n    );\n  }\n\n  // Recovery overlay (for all non-idle/non-loaded recovery states)\n  if (isInRecovery && hasError) {\n    return (\n      <div className={className} style={wrapperStyle}>\n        <RecoveryOverlay\n          state={recoveryState}\n          onManualRetry={manualRetry}\n          isCircular={isCircular}\n        />\n      </div>\n    );\n  }\n\n  // Vanilla error (no recovery adapter) -> error fallback\n  if (hasError && !recoveryAdapter) {\n    return (\n      <div className={className} style={wrapperStyle}>\n        <ErrorFallback isCircular={isCircular} />\n      </div>\n    );\n  }\n\n  const t = inferType({ type, mime, name, url: sourceUrl });\n\n  if (t === \"image\") {\n    return (\n      <div className={className} style={wrapperStyle}>\n        <ImageViewer\n          key={remountKey}\n          url={sourceUrl}\n          alt={alt}\n          lazy={lazy}\n          priority={priority}\n          skeleton={skeleton}\n          unloadOnExit={unloadOnExit}\n          isCircular={isCircular}\n          enableZoom={enableZoom}\n          loadTimeoutMs={loadTimeoutMs}\n          onLoad={handleLoad}\n          onError={handleError}\n          fallback={<ErrorFallback isCircular={isCircular} />}\n        />\n      </div>\n    );\n  }\n\n  if (t === \"video\") {\n    return (\n      <div className={className} style={wrapperStyle}>\n        <VideoViewer\n          key={remountKey}\n          url={sourceUrl}\n          lazy={lazy}\n          priority={priority}\n          skeleton={skeleton}\n          unloadOnExit={unloadOnExit}\n          controls={controls}\n          autoPlay={autoPlay}\n          muted={muted}\n          loop={loop}\n          posterUrl={posterUrl}\n          preload={preload}\n          autoPlayOnVisible={autoPlayOnVisible}\n          loadTimeoutMs={loadTimeoutMs}\n          onLoad={handleLoad}\n          onError={handleError}\n          onEnded={onEnded}\n          onProgressSample={onProgressSample}\n          startAtSeconds={startAtSeconds}\n          endOverlay={endOverlay}\n          playbackControlsRef={playbackControlsRef}\n        />\n      </div>\n    );\n  }\n\n  if (t === \"audio\") {\n    return (\n      <div className={className} style={wrapperStyle}>\n        <AudioViewer\n          key={remountKey}\n          url={sourceUrl}\n          lazy={lazy}\n          priority={priority}\n          skeleton={skeleton}\n          autoPlay={autoPlay}\n          loop={loop}\n          preload={preload}\n          visualizerMode={audioVisualizerMode}\n          persistKey={audioPersistKey}\n          extraActions={audioExtraActions}\n          loadTimeoutMs={loadTimeoutMs}\n          onLoad={handleLoad}\n          onLoadChange={onLoadChange}\n          onError={handleError}\n          onEnded={onEnded}\n          onProgressSample={onProgressSample}\n          startAtSeconds={startAtSeconds}\n          endOverlay={endOverlay}\n          playbackControlsRef={playbackControlsRef}\n        />\n      </div>\n    );\n  }\n\n  // Unknown type -> fallback link\n  return shouldShowFallback(fallbackMode as FallbackMode) ? (\n    <div className={className} style={wrapperStyle}>\n      <MediaFallbackLink url={sourceUrl} filename={filename} label={fallbackLabel ?? \"Download\"} />\n    </div>\n  ) : null;\n}\n\n/** Back-compat alias */\nexport const MediaPreview = MediaViewer;\n"]}

package/dist/react/use-media-playback.d.ts

@@ -26,6 +26,29 @@ export type UseMediaPlaybackResult = {
         onSeeked: (e: React.SyntheticEvent<HTMLMediaElement>) => void;
         onEnded: (e: React.SyntheticEvent<HTMLMediaElement>) => void;
     };
+    /**
+     * Element lifecycle boundary. Attach the native element through this callback
+     * (compose it into the element `ref`) so the hook knows which element
+     * generation is ACTIVE. A detach (`null`) retires the outgoing element:
+     * its still-live cursor is committed as one final `pause` sample (unless the
+     * last commit already reported that exact position, playback never started,
+     * or the position is still inside the pre-seed suppression window), and every
+     * later `pause`/`seeked`/`ended`/`timeupdate` event from that retired element
+     * is ignored — a teardown-generated reset can never masquerade as a user
+     * playback event. Opt-in: a consumer that never calls this keeps the previous
+     * ungated behavior.
+     */
+    attachElement: (element: HTMLMediaElement | null) => void;
+    /**
+     * Retire the currently attached element NOW, before a destructive media
+     * operation the caller is about to perform on it (`pause()` +
+     * `removeAttribute("src")` + `load()`, DOM removal, source replacement).
+     * Emits the same final-snapshot commit as a detach and stops all further
+     * reporting from that element. Idempotent — a later detach of an already
+     * retired element emits nothing. Re-attaching an element through
+     * `attachElement` reactivates reporting.
+     */
+    retireElement: () => void;
 };
 /**
  * Shared playback API for VideoViewer and AudioViewer. Owns the additive
@@ -39,6 +62,16 @@ export type UseMediaPlaybackResult = {
  * is tracked in a component-scoped ref that outlives the element, so playback
  * resumes from where it left off — never from `startAtSeconds` again and never
  * from 0.
+ *
+ * The hook is also the single owner of the ACTIVE element generation: viewers
+ * attach their native element through `attachElement` (composed into the
+ * element ref) and call `retireElement` before performing a destructive media
+ * operation (`pause()` + src removal + `load()`, source replacement, DOM
+ * removal). A retiring element's still-live cursor is committed once as a
+ * final `pause` sample, and every media event a torn-down element emits
+ * afterwards (browsers reset the cursor to 0 and can fire pause/seeked/
+ * timeupdate during teardown) is ignored — so a teardown reset can never be
+ * presented to the app as a user playback event.
  */
 export declare function useMediaPlayback(elementRef: React.RefObject<HTMLMediaElement | null>, props: MediaPlaybackProps, playbackControlsRef?: React.Ref<MediaPlaybackControls>, 
 /**

package/dist/react/use-media-playback.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-media-playback.d.ts","sourceRoot":"","sources":["../../src/react/use-media-playback.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EACV,qBAAqB,EACrB,kBAAkB,EAEnB,MAAM,aAAa,CAAC;AAErB;;;GAGG;AACH,eAAO,MAAM,2BAA2B,OAAO,CAAC;AAEhD;;;;;;;GAOG;AACH,eAAO,MAAM,4BAA4B,IAAI,CAAC;AAE9C,MAAM,MAAM,sBAAsB,GAAG;IACnC,4DAA4D;IAC5D,QAAQ,EAAE,OAAO,CAAC;IAClB,sEAAsE;IACtE,QAAQ,EAAE;QACR,gBAAgB,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;QACtE,YAAY,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;QAClE,MAAM,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;QAC5D,OAAO,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;QAC7D,QAAQ,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;QAC9D,OAAO,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;KAC9D,CAAC;CACH,CAAC;AAEF;;;;;;;;;;;;GAYG;AACH,wBAAgB,gBAAgB,CAC9B,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,GAAG,IAAI,CAAC,EACpD,KAAK,EAAE,kBAAkB,EACzB,mBAAmB,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,qBAAqB,CAAC;AACtD;;;;;;GAMG;AACH,QAAQ,CAAC,EAAE,MAAM,GAChB,sBAAsB,CAkPxB"}
+{"version":3,"file":"use-media-playback.d.ts","sourceRoot":"","sources":["../../src/react/use-media-playback.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EACV,qBAAqB,EACrB,kBAAkB,EAEnB,MAAM,aAAa,CAAC;AAErB;;;GAGG;AACH,eAAO,MAAM,2BAA2B,OAAO,CAAC;AAEhD;;;;;;;GAOG;AACH,eAAO,MAAM,4BAA4B,IAAI,CAAC;AAE9C,MAAM,MAAM,sBAAsB,GAAG;IACnC,4DAA4D;IAC5D,QAAQ,EAAE,OAAO,CAAC;IAClB,sEAAsE;IACtE,QAAQ,EAAE;QACR,gBAAgB,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;QACtE,YAAY,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;QAClE,MAAM,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;QAC5D,OAAO,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;QAC7D,QAAQ,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;QAC9D,OAAO,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;KAC9D,CAAC;IACF;;;;;;;;;;;OAWG;IACH,aAAa,EAAE,CAAC,OAAO,EAAE,gBAAgB,GAAG,IAAI,KAAK,IAAI,CAAC;IAC1D;;;;;;;;OAQG;IACH,aAAa,EAAE,MAAM,IAAI,CAAC;CAC3B,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,gBAAgB,CAC9B,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,GAAG,IAAI,CAAC,EACpD,KAAK,EAAE,kBAAkB,EACzB,mBAAmB,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,qBAAqB,CAAC;AACtD;;;;;;GAMG;AACH,QAAQ,CAAC,EAAE,MAAM,GAChB,sBAAsB,CA4VxB"}