@ai-matrx/media 0.5.0 → 0.5.2

package/dist/react.js

@@ -628,13 +628,18 @@ function useMediaBlobLoadRecovery(ref, source, options) {
   const refKey = stableRefKey(ref);
   const [failed, setFailed] = useState2(false);
   const attemptRef = useRef2(0);
+  const generationRef = useRef2(0);
   const recoveryInFlightRef = useRef2(false);
   const onRetry = options.onRetry;
   const onTerminal = options.onTerminal;
   useEffect2(() => {
+    generationRef.current += 1;
     attemptRef.current = 0;
     recoveryInFlightRef.current = false;
     setFailed(false);
+    return () => {
+      generationRef.current += 1;
+    };
   }, [refKey]);
   useEffect2(() => {
     recoveryInFlightRef.current = false;
@@ -659,6 +664,7 @@ function useMediaBlobLoadRecovery(ref, source, options) {
       recoveryInFlightRef.current = true;
       attemptRef.current += 1;
       const attempt = attemptRef.current;
+      const generation = generationRef.current;
       const recover = client.recoverBlobLoadError;
       if (!ref || !recover) {
         finishTerminal(
@@ -670,6 +676,7 @@ function useMediaBlobLoadRecovery(ref, source, options) {
       }
       recover(ref, attempt).then(
         (verdict) => {
+          if (generation !== generationRef.current) return;
           if (verdict === "retry") {
             setFailed(false);
             onRetry();
@@ -682,6 +689,7 @@ function useMediaBlobLoadRecovery(ref, source, options) {
           );
         },
         (err) => {
+          if (generation !== generationRef.current) return;
           finishTerminal(
             event,
             attempt,
@@ -1392,7 +1400,9 @@ function useThumbnailSource(ref, options = {}) {
       mode: "thumbnail",
       loading: false,
       resolution,
-      recoverable: explicitThumb.recoverable !== false
+      recoverable: explicitThumb.recoverable !== false,
+      blobBacked: false,
+      retryBlob: blob.retry
     };
   }
   if (resolution?.thumbnailSrc) {
@@ -1401,7 +1411,9 @@ function useThumbnailSource(ref, options = {}) {
       mode: "thumbnail",
       loading: false,
       resolution,
-      recoverable: resolution.recoverable !== false
+      recoverable: resolution.recoverable !== false,
+      blobBacked: false,
+      retryBlob: blob.retry
     };
   }
   if (allowSourceFallback && resolution) {
@@ -1411,7 +1423,9 @@ function useThumbnailSource(ref, options = {}) {
         mode: blob.url ? resolution.kind === "video" ? "live-video-poster" : "live-image" : "icon",
         loading: blob.loading,
         resolution,
-        recoverable: false
+        recoverable: false,
+        blobBacked: true,
+        retryBlob: blob.retry
       };
     }
     if (resolution.kind === "image") {
@@ -1420,7 +1434,9 @@ function useThumbnailSource(ref, options = {}) {
         mode: "live-image",
         loading: false,
         resolution,
-        recoverable: resolution.recoverable !== false
+        recoverable: resolution.recoverable !== false,
+        blobBacked: false,
+        retryBlob: blob.retry
       };
     }
     if (resolution.kind === "video") {
@@ -1429,7 +1445,9 @@ function useThumbnailSource(ref, options = {}) {
         mode: "live-video-poster",
         loading: false,
         resolution,
-        recoverable: resolution.recoverable !== false
+        recoverable: resolution.recoverable !== false,
+        blobBacked: false,
+        retryBlob: blob.retry
       };
     }
   }
@@ -1438,7 +1456,9 @@ function useThumbnailSource(ref, options = {}) {
     mode: "icon",
     loading: false,
     resolution,
-    recoverable: false
+    recoverable: false,
+    blobBacked: false,
+    retryBlob: blob.retry
   };
 }
 
@@ -1468,6 +1488,8 @@ function MediaThumbnail({
           url: source.src,
           mediaRef,
           recoverable: source.recoverable,
+          blobBacked: source.blobBacked,
+          retryBlob: source.retryBlob,
           fallback
         }
       );
@@ -1479,6 +1501,8 @@ function MediaThumbnail({
           alt: fileName,
           mediaRef,
           recoverable: source.recoverable,
+          blobBacked: source.blobBacked,
+          retryBlob: source.retryBlob,
           fallback
         }
       );
@@ -1497,13 +1521,21 @@ function ImageThumb({
   alt,
   mediaRef,
   recoverable,
+  blobBacked,
+  retryBlob,
   fallback
 }) {
   const { retryKey, onLoadError, failed } = useMediaLoadRecovery(url, {
     recoverable,
     failureRef: mediaRef
   });
-  if (failed) return /* @__PURE__ */ jsx4(Fragment2, { children: fallback });
+  const blobRecovery = useMediaBlobLoadRecovery(
+    blobBacked ? mediaRef : null,
+    blobBacked ? url : null,
+    { onRetry: retryBlob }
+  );
+  const activeRecovery = blobBacked ? { retryKey: 0, ...blobRecovery } : { retryKey, onLoadError, failed };
+  if (activeRecovery.failed) return /* @__PURE__ */ jsx4(Fragment2, { children: fallback });
   return /* @__PURE__ */ jsx4(
     "img",
     {
@@ -1511,21 +1543,29 @@ function ImageThumb({
       alt,
       loading: url.startsWith("blob:") ? "eager" : "lazy",
       className: "h-full w-full object-cover",
-      onError: onLoadError
+      onError: activeRecovery.onLoadError
     },
-    retryKey
+    activeRecovery.retryKey
   );
 }
 function VideoPosterThumb({
   url,
   mediaRef,
   recoverable,
+  blobBacked,
+  retryBlob,
   fallback
 }) {
   const { retryKey, onLoadError, failed } = useMediaLoadRecovery(url, {
     recoverable,
     failureRef: mediaRef
   });
+  const blobRecovery = useMediaBlobLoadRecovery(
+    blobBacked ? mediaRef : null,
+    blobBacked ? url : null,
+    { onRetry: retryBlob }
+  );
+  const activeRecovery = blobBacked ? { retryKey: 0, ...blobRecovery } : { retryKey, onLoadError, failed };
   const ref = useRef5(null);
   useEffect6(() => {
     const v = ref.current;
@@ -1539,7 +1579,7 @@ function VideoPosterThumb({
     v.addEventListener("loadedmetadata", onMeta);
     return () => v.removeEventListener("loadedmetadata", onMeta);
   }, []);
-  if (failed) return /* @__PURE__ */ jsx4(Fragment2, { children: fallback });
+  if (activeRecovery.failed) return /* @__PURE__ */ jsx4(Fragment2, { children: fallback });
   return /* @__PURE__ */ jsx4(
     "video",
     {
@@ -1549,9 +1589,9 @@ function VideoPosterThumb({
       preload: "metadata",
       muted: true,
       playsInline: true,
-      onError: onLoadError
+      onError: activeRecovery.onLoadError
     },
-    retryKey
+    activeRecovery.retryKey
   );
 }