@ai-matrx/media 0.4.4 → 0.4.5

package/dist/react.js

@@ -465,11 +465,11 @@ function FileIcon2({
 
 // src/react/inline-media-ref.tsx
 import {
-  useCallback as useCallback2,
-  useEffect as useEffect4,
+  useCallback as useCallback3,
+  useEffect as useEffect5,
   useMemo as useMemo2,
-  useRef as useRef3,
-  useState as useState3
+  useRef as useRef4,
+  useState as useState4
 } from "react";
 
 // src/core/context.ts
@@ -620,8 +620,83 @@ function useMediaBlob(ref) {
   };
 }
 
+// src/core/use-media-blob-load-recovery.ts
+import { useCallback as useCallback2, useEffect as useEffect2, useRef as useRef2, useState as useState2 } from "react";
+function useMediaBlobLoadRecovery(ref, source, options) {
+  const client = useMediaClient();
+  const capture = useMediaFailureCapture();
+  const refKey = stableRefKey(ref);
+  const [failed, setFailed] = useState2(false);
+  const attemptRef = useRef2(0);
+  const recoveryInFlightRef = useRef2(false);
+  const onRetry = options.onRetry;
+  const onTerminal = options.onTerminal;
+  useEffect2(() => {
+    attemptRef.current = 0;
+    recoveryInFlightRef.current = false;
+    setFailed(false);
+  }, [refKey]);
+  useEffect2(() => {
+    recoveryInFlightRef.current = false;
+  }, [source]);
+  const finishTerminal = useCallback2(
+    (event, attempt, message) => {
+      setFailed(true);
+      capture({
+        phase: "element-load",
+        mediaRef: failureMediaIdentity(ref ?? null, source),
+        terminal: true,
+        retryOutcome: attempt > 1 ? "retried" : "not-attempted",
+        message
+      });
+      onTerminal?.(event);
+    },
+    [capture, onTerminal, ref, source]
+  );
+  const onLoadError = useCallback2(
+    (event) => {
+      if (recoveryInFlightRef.current || !source) return;
+      recoveryInFlightRef.current = true;
+      attemptRef.current += 1;
+      const attempt = attemptRef.current;
+      const recover = client.recoverBlobLoadError;
+      if (!ref || !recover) {
+        finishTerminal(
+          event,
+          attempt,
+          "blob-backed media element failed to load and the client exposes no object-URL recovery policy"
+        );
+        return;
+      }
+      recover(ref, attempt).then(
+        (verdict) => {
+          if (verdict === "retry") {
+            setFailed(false);
+            onRetry();
+            return;
+          }
+          finishTerminal(
+            event,
+            attempt,
+            attempt > 1 ? "blob-backed media element failed after the client-approved re-read" : "blob-backed media recovery was declined on the first attempt"
+          );
+        },
+        (err) => {
+          finishTerminal(
+            event,
+            attempt,
+            `blob-backed media recovery failed: ${err instanceof Error ? err.message : String(err ?? "unknown error")}`
+          );
+        }
+      );
+    },
+    [client, finishTerminal, onRetry, ref, source]
+  );
+  return { onLoadError, failed };
+}
+
 // src/core/use-media-load-recovery.ts
-import { useEffect as useEffect2, useLayoutEffect, useRef as useRef2, useState as useState2 } from "react";
+import { useEffect as useEffect3, useLayoutEffect, useRef as useRef3, useState as useState3 } from "react";
 
 // src/types.ts
 function mintDurableSrc(url) {
@@ -639,10 +714,10 @@ function useMediaLoadRecovery(src, options) {
   const recoverable = options?.recoverable !== false;
   const onTerminal = options?.onTerminal;
   const failureRef = options?.failureRef;
-  const [result, setResult] = useState2({ source: src, retryKey: 0, failed: false });
-  const attemptRef = useRef2(0);
-  const recoveryInFlightRef = useRef2(false);
-  useEffect2(() => {
+  const [result, setResult] = useState3({ source: src, retryKey: 0, failed: false });
+  const attemptRef = useRef3(0);
+  const recoveryInFlightRef = useRef3(false);
+  useEffect3(() => {
     attemptRef.current = 0;
     recoveryInFlightRef.current = false;
   }, [src]);
@@ -720,7 +795,7 @@ function useMediaLoadRecovery(src, options) {
 }
 
 // src/core/use-media-resolution.ts
-import { useEffect as useEffect3, useMemo } from "react";
+import { useEffect as useEffect4, useMemo } from "react";
 function useMediaResolution(ref) {
   const client = useMediaClient();
   const capture = useMediaFailureCapture();
@@ -755,7 +830,7 @@ function useMediaResolution(ref) {
       };
     }
   }, [client, refKey]);
-  useEffect3(() => {
+  useEffect4(() => {
     if (state.status !== "unavailable") return;
     capture({
       phase: "resolve",
@@ -810,7 +885,7 @@ function prettifyUrl(url) {
 }
 var INERT_PLAYBACK = {
   useMediaElementSink(forward) {
-    return useCallback2(
+    return useCallback3(
       (node) => {
         if (!forward) return;
         if (typeof forward === "function") forward(node);
@@ -861,7 +936,7 @@ function InformativeErrorFallback({
 }) {
   const capture = useMediaFailureCapture();
   const identity = failureMediaIdentity(mediaRef ?? null, url);
-  useEffect4(() => {
+  useEffect5(() => {
     capture({
       phase: failurePhase,
       mediaRef: identity,
@@ -925,10 +1000,10 @@ function InformativeErrorPanel({
   icon,
   tooltip
 }) {
-  const [copied, setCopied] = useState3(false);
+  const [copied, setCopied] = useState4(false);
   const isFill = dimensions === "fill";
   const { host, tail } = prettifyUrl(url);
-  const handleCopy = useCallback2(
+  const handleCopy = useCallback3(
     (event) => {
       event.stopPropagation();
       event.preventDefault();
@@ -1045,16 +1120,25 @@ function InlineMediaRef({
   );
   const blob = useMediaBlob(needsBlob ? mediaRef : null);
   const url = needsBlob ? blob.url : resolution?.src ?? null;
+  const terminalCallback = (event) => onError?.(
+    event
+  );
   const recovery = useMediaLoadRecovery(url, {
-    recoverable: !needsBlob && resolution?.recoverable !== false,
+    recoverable: resolution?.recoverable !== false,
     failureRef: mediaRef,
-    onTerminal: (event) => onError?.(
-      event
-    )
+    onTerminal: terminalCallback
   });
+  const blobRecovery = useMediaBlobLoadRecovery(
+    needsBlob ? mediaRef : null,
+    needsBlob ? url : null,
+    {
+      onRetry: blob.retry,
+      onTerminal: terminalCallback
+    }
+  );
   const playback = ports.playbackSession ?? INERT_PLAYBACK;
-  const sessionElRef = useRef3(null);
-  const [isMediaPlaying, setIsMediaPlaying] = useState3(false);
+  const sessionElRef = useRef4(null);
+  const [isMediaPlaying, setIsMediaPlaying] = useState4(false);
   const portSinkRef = playback.useMediaElementSink(
     mediaElementRef
   );
@@ -1085,8 +1169,10 @@ function InlineMediaRef({
   const mediaResolutionError = status === "unavailable" ? reason ?? "unknown" : blob.error ?? null;
   const dimensions = resolveDimensions(size);
   const isFill = dimensions === "fill";
-  const hasLoadError = recovery.failed;
-  const handleLoadError = recovery.onLoadError;
+  const activeRecovery = needsBlob ? blobRecovery : recovery;
+  const retryKey = needsBlob ? 0 : recovery.retryKey;
+  const hasLoadError = activeRecovery.failed;
+  const handleLoadError = activeRecovery.onLoadError;
   const defaultIcon = elementType === "video" ? /* @__PURE__ */ jsx3(FileVideoIcon, { className: "h-1/2 w-1/2" }) : elementType === "audio" ? /* @__PURE__ */ jsx3(FileAudioIcon, { className: "h-1/2 w-1/2" }) : mediaRef ? /* @__PURE__ */ jsx3(ImageIcon, { className: "h-1/2 w-1/2" }) : /* @__PURE__ */ jsx3(FileIcon, { className: "h-1/2 w-1/2" });
   const unresolvedDisplayUrl = mediaRef && typeof mediaRef === "object" && mediaRef.file_id ? `file:${mediaRef.file_id}` : "unresolved-media";
   if (!url) {
@@ -1222,7 +1308,7 @@ function InlineMediaRef({
         ...mediaSessionEvents,
         ...interactiveProps
       },
-      recovery.retryKey
+      retryKey
     );
   }
   if (elementType === "audio") {
@@ -1243,7 +1329,7 @@ function InlineMediaRef({
         crossOrigin,
         ...interactiveProps
       },
-      recovery.retryKey
+      retryKey
     );
   }
   const needsPlainImg = !!onLoad || !!mediaElementRef || !!crossOrigin;
@@ -1261,7 +1347,7 @@ function InlineMediaRef({
         onError: handleLoadError,
         ...interactiveProps
       },
-      recovery.retryKey
+      retryKey
     );
   }
   return /* @__PURE__ */ jsx3(
@@ -1277,12 +1363,12 @@ function InlineMediaRef({
       crossOrigin,
       ...interactiveProps
     },
-    recovery.retryKey
+    retryKey
   );
 }
 
 // src/react/media-thumbnail.tsx
-import { useEffect as useEffect5, useRef as useRef4 } from "react";
+import { useEffect as useEffect6, useRef as useRef5 } from "react";
 
 // src/core/use-thumbnail-source.ts
 import { useMemo as useMemo3 } from "react";
@@ -1440,8 +1526,8 @@ function VideoPosterThumb({
     recoverable,
     failureRef: mediaRef
   });
-  const ref = useRef4(null);
-  useEffect5(() => {
+  const ref = useRef5(null);
+  useEffect6(() => {
     const v = ref.current;
     if (!v) return void 0;
     const onMeta = () => {
@@ -1471,11 +1557,11 @@ function VideoPosterThumb({
 
 // src/react/use-media-dropzone.ts
 import {
-  useCallback as useCallback3,
-  useEffect as useEffect6,
+  useCallback as useCallback4,
+  useEffect as useEffect7,
   useMemo as useMemo4,
-  useRef as useRef5,
-  useState as useState4
+  useRef as useRef6,
+  useState as useState5
 } from "react";
 function matchesAccept(file, accept) {
   if (!accept || accept.length === 0) return true;
@@ -1500,16 +1586,16 @@ function useMediaDropzone(options) {
     disabled = false,
     multiple = true
   } = options;
-  const [isDragActive, setIsDragActive] = useState4(false);
-  const [pasteHighlight, setPasteHighlight] = useState4(false);
-  const dragDepth = useRef5(0);
-  const inputRef = useRef5(null);
-  const onFilesRef = useRef5(onFiles);
+  const [isDragActive, setIsDragActive] = useState5(false);
+  const [pasteHighlight, setPasteHighlight] = useState5(false);
+  const dragDepth = useRef6(0);
+  const inputRef = useRef6(null);
+  const onFilesRef = useRef6(onFiles);
   onFilesRef.current = onFiles;
-  const onRejectedRef = useRef5(onRejected);
+  const onRejectedRef = useRef6(onRejected);
   onRejectedRef.current = onRejected;
   const acceptKey = accept?.join(",") ?? "";
-  const filterFiles = useCallback3(
+  const filterFiles = useCallback4(
     (files) => {
       const accepted = [];
       const rejected = [];
@@ -1527,23 +1613,23 @@ function useMediaDropzone(options) {
     },
     [acceptKey, maxSize]
   );
-  const emit = useCallback3(
+  const emit = useCallback4(
     (files) => {
       const accepted = filterFiles(files);
       if (accepted.length) onFilesRef.current(accepted);
     },
     [filterFiles]
   );
-  const openPicker = useCallback3(() => {
+  const openPicker = useCallback4(() => {
     if (!disabled) inputRef.current?.click();
   }, [disabled]);
-  useEffect6(() => {
+  useEffect7(() => {
     if (!pickerEventName || typeof window === "undefined") return void 0;
     const handler = () => openPicker();
     window.addEventListener(pickerEventName, handler);
     return () => window.removeEventListener(pickerEventName, handler);
   }, [openPicker, pickerEventName]);
-  useEffect6(() => {
+  useEffect7(() => {
     if (!enablePaste || disabled || typeof window === "undefined") {
       return void 0;
     }
@@ -1569,7 +1655,7 @@ function useMediaDropzone(options) {
     window.addEventListener("paste", handler);
     return () => window.removeEventListener("paste", handler);
   }, [enablePaste, disabled, emit]);
-  const getRootProps = useCallback3(
+  const getRootProps = useCallback4(
     () => ({
       onDragEnter: (event) => {
         if (disabled) return;
@@ -1602,7 +1688,7 @@ function useMediaDropzone(options) {
     () => acceptKey.length ? acceptKey : void 0,
     [acceptKey]
   );
-  const getInputProps = useCallback3(
+  const getInputProps = useCallback4(
     () => ({
       ref: (node) => {
         inputRef.current = node;
@@ -1624,20 +1710,20 @@ function useMediaDropzone(options) {
 }
 
 // src/react/file-upload-dropzone.tsx
-import { useCallback as useCallback5 } from "react";
+import { useCallback as useCallback6 } from "react";
 
 // src/core/use-media-upload.ts
-import { useCallback as useCallback4, useRef as useRef6, useState as useState5 } from "react";
+import { useCallback as useCallback5, useRef as useRef7, useState as useState6 } from "react";
 var entrySeq = 0;
 function useMediaUpload() {
   const client = useMediaClient();
-  const [uploading, setUploading] = useState5(false);
-  const [progress, setProgress] = useState5(null);
-  const [result, setResult] = useState5(null);
-  const [error, setError] = useState5(null);
-  const [entries, setEntries] = useState5([]);
-  const activeCount = useRef6(0);
-  const patchEntry = useCallback4(
+  const [uploading, setUploading] = useState6(false);
+  const [progress, setProgress] = useState6(null);
+  const [result, setResult] = useState6(null);
+  const [error, setError] = useState6(null);
+  const [entries, setEntries] = useState6([]);
+  const activeCount = useRef7(0);
+  const patchEntry = useCallback5(
     (id, patch) => {
       setEntries(
         (current) => current.map((e) => e.id === id ? { ...e, ...patch } : e)
@@ -1645,7 +1731,7 @@ function useMediaUpload() {
     },
     []
   );
-  const upload = useCallback4(
+  const upload = useCallback5(
     async (file, opts = {}) => {
       const id = `up-${++entrySeq}`;
       const fileName = opts.fileName ?? (file instanceof File ? file.name : "file");
@@ -1699,7 +1785,7 @@ function useMediaUpload() {
     },
     [client, patchEntry]
   );
-  const uploadMany = useCallback4(
+  const uploadMany = useCallback5(
     async (files, opts = {}) => {
       if (client.uploadMany) {
         activeCount.current += 1;
@@ -1728,10 +1814,10 @@ function useMediaUpload() {
     },
     [client, upload]
   );
-  const clearEntry = useCallback4((id) => {
+  const clearEntry = useCallback5((id) => {
     setEntries((current) => current.filter((e) => e.id !== id));
   }, []);
-  const reset = useCallback4(() => {
+  const reset = useCallback5(() => {
     setResult(null);
     setError(null);
     setProgress(null);
@@ -1751,7 +1837,7 @@ function useMediaUpload() {
 }
 
 // src/react/upload-progress-list.tsx
-import { memo, useEffect as useEffect7, useRef as useRef7, useState as useState6 } from "react";
+import { memo, useEffect as useEffect8, useRef as useRef8, useState as useState7 } from "react";
 import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
 var AUTO_DISMISS_MS = 1e4;
 function formatFileSize(bytes) {
@@ -1772,16 +1858,16 @@ function UploadProgressListImpl({
   onOpenFile,
   className
 }) {
-  const [hovered, setHovered] = useState6(false);
+  const [hovered, setHovered] = useState7(false);
   const activeCount = uploads.filter((u) => u.status === "uploading").length;
   const successCount = uploads.filter((u) => u.status === "success").length;
   const errorCount = uploads.filter((u) => u.status === "error").length;
-  const timersRef = useRef7(
+  const timersRef = useRef8(
     /* @__PURE__ */ new Map()
   );
-  const onDismissRef = useRef7(onDismiss);
+  const onDismissRef = useRef8(onDismiss);
   onDismissRef.current = onDismiss;
-  useEffect7(() => {
+  useEffect8(() => {
     const timers = timersRef.current;
     if (hovered) {
       timers.forEach((t) => clearTimeout(t));
@@ -1809,7 +1895,7 @@ function UploadProgressListImpl({
       }
     }
   }, [uploads, hovered]);
-  useEffect7(() => {
+  useEffect8(() => {
     const timers = timersRef.current;
     return () => {
       timers.forEach((t) => clearTimeout(t));
@@ -1941,7 +2027,7 @@ function FileUploadDropzone({
   pickerEventName
 }) {
   const { uploadMany, entries, clearEntry } = useMediaUpload();
-  const handleUpload = useCallback5(
+  const handleUpload = useCallback6(
     async (files) => {
       if (!files.length) return;
       try {
@@ -2048,22 +2134,22 @@ function FileUploadDropzone({
 }
 
 // src/react/media-action-toolbar.tsx
-import { useState as useState8 } from "react";
+import { useState as useState9 } from "react";
 
 // src/core/use-media-actions.ts
-import { useCallback as useCallback6, useMemo as useMemo5, useState as useState7 } from "react";
+import { useCallback as useCallback7, useMemo as useMemo5, useState as useState8 } from "react";
 function useMediaActions(ref, options = {}) {
   const ports = useMediaHostPorts();
   const { resolution } = useMediaResolution(ref);
-  const [busy, setBusy] = useState7(null);
-  const [lastError, setLastError] = useState7(null);
+  const [busy, setBusy] = useState8(null);
+  const [lastError, setLastError] = useState8(null);
   const actions = ports.actions;
   const { fileName, alt } = options;
   const context = useMemo5(() => {
     if (!ref) return null;
     return { ref, resolution, fileName, alt };
   }, [ref, resolution, fileName, alt]);
-  const isAvailable = useCallback6(
+  const isAvailable = useCallback7(
     (kind) => {
       if (!context || !actions) return false;
       if (kind === "share") return Boolean(actions.share || actions.SharePopover);
@@ -2071,7 +2157,7 @@ function useMediaActions(ref, options = {}) {
     },
     [context, actions]
   );
-  const run = useCallback6(
+  const run = useCallback7(
     async (kind) => {
       if (!context || !actions) return;
       const handler = actions[kind];
@@ -2120,7 +2206,7 @@ function MediaActionToolbar({
   buttonClassName
 }) {
   const state = useMediaActions(mediaRef, { fileName, alt });
-  const [shareOpen, setShareOpen] = useState8(false);
+  const [shareOpen, setShareOpen] = useState9(false);
   const SharePopover = state.SharePopover;
   const visible = hideUnavailable ? actions.filter((kind) => state.isAvailable(kind)) : actions;
   if (visible.length === 0) return null;
@@ -2177,7 +2263,7 @@ function MediaActionToolbar({
 }
 
 // src/react/media-lightbox.tsx
-import { useEffect as useEffect8 } from "react";
+import { useEffect as useEffect9 } from "react";
 import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
 function MediaLightbox({
   open,
@@ -2195,7 +2281,7 @@ function MediaLightbox({
   headerExtra,
   className
 }) {
-  useEffect8(() => {
+  useEffect9(() => {
     if (!open || typeof window === "undefined") return void 0;
     const handler = (event) => {
       if (event.key === "Escape") {