@remotion/gif 4.0.534 → 4.0.535

package/dist/cjs/Gif.js

@@ -86,17 +86,21 @@ const GifWithIntrinsicDuration = (props) => {
     onErrorRef.current = props.onError;
     const requestInitRef = (0, react_2.useRef)(requestInit);
     requestInitRef.current = requestInit;
-    const [handle] = (0, react_2.useState)(() => delayRender(`Finding duration of <Gif src="${src}" />`, {
-        timeoutInMilliseconds: props.delayRenderTimeoutInMilliseconds,
-    }));
-    const [durationInFrames, setDurationInFrames] = (0, react_2.useState)(null);
-    const [failed, setFailed] = (0, react_2.useState)(false);
-    (0, react_2.useEffect)(() => {
+    const [duration, setDuration] = (0, react_2.useState)(null);
+    const [failedHandle, setFailedHandle] = (0, react_2.useState)(null);
+    const { delayRenderTimeoutInMilliseconds } = props;
+    (0, react_2.useLayoutEffect)(() => {
+        const handle = delayRender(`Finding duration of <Gif src="${src}" />`, {
+            timeoutInMilliseconds: delayRenderTimeoutInMilliseconds,
+        });
         let cancelled = false;
         (0, get_gif_duration_in_seconds_1.getGifDurationInSeconds)(src, { requestInit: requestInitRef.current })
-            .then((duration) => {
+            .then((durationInSeconds) => {
             if (!cancelled) {
-                setDurationInFrames(Math.ceil(duration * fps) - (trimBefore !== null && trimBefore !== void 0 ? trimBefore : 0));
+                setDuration({
+                    durationInFrames: Math.ceil(durationInSeconds * fps) - (trimBefore !== null && trimBefore !== void 0 ? trimBefore : 0),
+                    handle,
+                });
             }
         })
             .catch((error) => {
@@ -105,7 +109,7 @@ const GifWithIntrinsicDuration = (props) => {
             }
             if (onErrorRef.current) {
                 onErrorRef.current(error);
-                setFailed(true);
+                setFailedHandle(handle);
             }
             else {
                 cancelRender(error);
@@ -115,16 +119,27 @@ const GifWithIntrinsicDuration = (props) => {
             cancelled = true;
             continueRender(handle);
         };
-    }, [cancelRender, continueRender, fps, handle, src, trimBefore]);
-    (0, react_2.useEffect)(() => {
-        if (durationInFrames !== null || failed) {
-            continueRender(handle);
+    }, [
+        cancelRender,
+        continueRender,
+        delayRender,
+        delayRenderTimeoutInMilliseconds,
+        fps,
+        src,
+        trimBefore,
+    ]);
+    (0, react_2.useLayoutEffect)(() => {
+        if (duration !== null) {
+            continueRender(duration.handle);
+        }
+        if (failedHandle !== null) {
+            continueRender(failedHandle);
         }
-    }, [continueRender, durationInFrames, failed, handle]);
-    if (durationInFrames === null || failed) {
+    }, [continueRender, duration, failedHandle]);
+    if (duration === null || failedHandle !== null) {
         return null;
     }
-    return jsx_runtime_1.jsx(GifInner, { ...props, durationInFrames: durationInFrames });
+    return jsx_runtime_1.jsx(GifInner, { ...props, durationInFrames: duration.durationInFrames });
 };
 const GifComponent = (props) => {
     var _a;

package/dist/cjs/GifForRendering.js

@@ -25,20 +25,13 @@ exports.GifForRendering = (0, react_1.forwardRef)(({ src, width, height, onLoad,
                 frames: [],
                 width: 0,
                 height: 0,
+                handle: null,
             };
         }
-        return parsedGif;
+        return { ...parsedGif, handle: null };
     });
     const [error, setError] = (0, react_1.useState)(null);
-    const [renderHandle] = (0, react_1.useState)(() => delayRender(`Rendering <Gif/> with src="${resolvedSrc}"`, {
-        timeoutInMilliseconds: delayRenderTimeoutInMilliseconds,
-    }));
     const logLevel = remotion_1.Internals.useLogLevel();
-    (0, react_1.useEffect)(() => {
-        return () => {
-            continueRender(renderHandle);
-        };
-    }, [renderHandle, continueRender]);
     const index = (0, useCurrentGifIndex_1.useCurrentGifIndex)({
         delays: state.delays,
         loopBehavior,
@@ -48,7 +41,7 @@ exports.GifForRendering = (0, react_1.forwardRef)(({ src, width, height, onLoad,
     const currentOnError = (0, react_1.useRef)(onError);
     currentOnLoad.current = onLoad;
     currentOnError.current = onError;
-    (0, react_1.useEffect)(() => {
+    (0, react_1.useLayoutEffect)(() => {
         const controller = new AbortController();
         let done = false;
         let aborted = false;
@@ -64,13 +57,14 @@ exports.GifForRendering = (0, react_1.forwardRef)(({ src, width, height, onLoad,
         })
             .then((parsed) => {
             var _a;
+            if (aborted) {
+                return;
+            }
             remotion_1.Internals.Log.verbose({ logLevel, tag: null }, 'Parsed GIF in', Date.now() - time, 'ms');
             (_a = currentOnLoad.current) === null || _a === void 0 ? void 0 : _a.call(currentOnLoad, parsed);
-            update(parsed);
+            update({ ...parsed, handle: newHandle });
             gif_cache_1.volatileGifCache.set(cacheKey, parsed);
             done = true;
-            continueRender(newHandle);
-            continueRender(renderHandle);
         })
             .catch((err) => {
             if (aborted) {
@@ -91,10 +85,8 @@ exports.GifForRendering = (0, react_1.forwardRef)(({ src, width, height, onLoad,
                 controller.abort();
             }
             continueRender(newHandle);
-            continueRender(renderHandle);
         };
     }, [
-        renderHandle,
         logLevel,
         cacheKey,
         resolvedSrc,
@@ -102,6 +94,11 @@ exports.GifForRendering = (0, react_1.forwardRef)(({ src, width, height, onLoad,
         continueRender,
         delayRenderTimeoutInMilliseconds,
     ]);
+    (0, react_1.useLayoutEffect)(() => {
+        if (state.handle !== null) {
+            continueRender(state.handle);
+        }
+    }, [state, continueRender]);
     if (error) {
         remotion_1.Internals.Log.error({ logLevel, tag: null }, error.stack);
         if ((0, is_cors_error_1.isCorsError)(error)) {

package/dist/cjs/canvas.js

@@ -88,7 +88,7 @@ exports.Canvas = (0, react_1.forwardRef)(({ index, frames, width, height, fit, c
     (0, react_1.useImperativeHandle)(ref, () => {
         return canvasRef.current;
     }, []);
-    (0, react_1.useEffect)(() => {
+    (0, react_1.useLayoutEffect)(() => {
         if (!size) {
             return;
         }

package/dist/cjs/use-element-size.js

@@ -51,7 +51,7 @@ const useElementSize = (ref) => {
             height: rect[0].height,
         });
     }, [ref]);
-    (0, react_1.useEffect)(() => {
+    (0, react_1.useLayoutEffect)(() => {
         if (!observer) {
             return;
         }

package/dist/esm/index.mjs

@@ -785,15 +785,15 @@ var makeWorker = () => {
 
 // src/react-tools.ts
 var parseGif = async ({
-  src: src2,
+  src,
   controller,
   requestInit
 }) => {
-  const raw = await parse2(src2, { signal: controller.signal, requestInit });
+  const raw = await parse2(src, { signal: controller.signal, requestInit });
   return generate(raw);
 };
 var parseWithWorker = ({
-  src: src2,
+  src,
   cacheKey,
   requestInit
 }) => {
@@ -815,7 +815,7 @@ var parseWithWorker = ({
     };
     worker.addEventListener("message", handler);
     worker.postMessage({
-      src: src2,
+      src,
       cacheKey,
       requestInit: workerRequestInit,
       type: "parse"
@@ -832,19 +832,19 @@ var parseWithWorker = ({
 };
 
 // src/resolve-gif-source.ts
-var resolveGifSource = (src2) => {
+var resolveGifSource = (src) => {
   if (typeof window === "undefined") {
-    return src2;
+    return src;
   }
-  return new URL(src2, document.baseURI).href;
+  return new URL(src, document.baseURI).href;
 };
 
 // src/get-gif-duration-in-seconds.ts
 var calcDuration = (parsed) => {
   return parsed.delays.reduce((sum, delay) => sum + delay, 0) / 1000;
 };
-var getGifDurationInSeconds = async (src2, options) => {
-  const resolvedSrc = resolveGifSource(src2);
+var getGifDurationInSeconds = async (src, options) => {
+  const resolvedSrc = resolveGifSource(src);
   const cacheKey = getGifCacheKey({
     resolvedSrc,
     requestInit: options?.requestInit
@@ -872,7 +872,7 @@ var getGifDurationInSeconds = async (src2, options) => {
   return calcDuration(parsed);
 };
 // src/Gif.tsx
-import React, { useEffect as useEffect5, useRef as useRef4, useState as useState5 } from "react";
+import React, { useLayoutEffect as useLayoutEffect4, useRef as useRef4, useState as useState5 } from "react";
 import {
   Freeze,
   Internals as Internals3,
@@ -884,12 +884,12 @@ import {
 } from "remotion";
 
 // src/GifForDevelopment.tsx
-import { forwardRef as forwardRef2, useEffect as useEffect3, useRef as useRef2, useState as useState3 } from "react";
+import { forwardRef as forwardRef2, useEffect as useEffect2, useRef as useRef2, useState as useState3 } from "react";
 
 // src/canvas.tsx
 import {
   forwardRef,
-  useEffect as useEffect2,
+  useLayoutEffect as useLayoutEffect2,
   useImperativeHandle,
   useMemo as useMemo2,
   useRef,
@@ -898,7 +898,13 @@ import {
 import { Internals, useDelayRender } from "remotion";
 
 // src/use-element-size.ts
-import { useCallback, useEffect, useMemo, useState } from "react";
+import {
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useState
+} from "react";
 var elementSizeHooks = [];
 var useElementSize = (ref) => {
   const [size, setSize] = useState(null);
@@ -936,7 +942,7 @@ var useElementSize = (ref) => {
       height: rect[0].height
     });
   }, [ref]);
-  useEffect(() => {
+  useLayoutEffect(() => {
     if (!observer) {
       return;
     }
@@ -1044,7 +1050,7 @@ var Canvas = forwardRef(({ index, frames, width, height, fit, className, style,
   useImperativeHandle(ref, () => {
     return canvasRef.current;
   }, []);
-  useEffect2(() => {
+  useLayoutEffect2(() => {
     if (!size) {
       return;
     }
@@ -1199,7 +1205,7 @@ function useCurrentGifIndex({
 // src/GifForDevelopment.tsx
 import { jsx as jsx2 } from "react/jsx-runtime";
 var GifForDevelopment = forwardRef2(({
-  src: src2,
+  src,
   width,
   height,
   onError,
@@ -1211,7 +1217,7 @@ var GifForDevelopment = forwardRef2(({
   effects,
   ...props
 }, ref) => {
-  const resolvedSrc = resolveGifSource(src2);
+  const resolvedSrc = resolveGifSource(src);
   const requestInitRef = useRef2(requestInit);
   requestInitRef.current = requestInit;
   const cacheKey = getGifCacheKey({ resolvedSrc, requestInit });
@@ -1232,7 +1238,7 @@ var GifForDevelopment = forwardRef2(({
   const currentOnError = useRef2(onError);
   currentOnLoad.current = onLoad;
   currentOnError.current = onError;
-  useEffect3(() => {
+  useEffect2(() => {
     const parsedGif = volatileGifCache.get(cacheKey) ?? manuallyManagedGifCache.get(cacheKey);
     if (parsedGif !== undefined) {
       update(parsedGif);
@@ -1271,9 +1277,9 @@ var GifForDevelopment = forwardRef2(({
   if (error) {
     console.error(error.stack);
     if (isCorsError(error)) {
-      throw new Error(`Failed to render GIF with source ${src2}: "${error.message}". You must enable CORS for this URL. Open the Developer Tools to see exactly why this fetch failed.`);
+      throw new Error(`Failed to render GIF with source ${src}: "${error.message}". You must enable CORS for this URL. Open the Developer Tools to see exactly why this fetch failed.`);
     }
-    throw new Error(`Failed to render GIF with source ${src2}: "${error.message}".`);
+    throw new Error(`Failed to render GIF with source ${src}: "${error.message}".`);
   }
   const index = useCurrentGifIndex({
     delays: state.delays,
@@ -1296,11 +1302,11 @@ var GifForDevelopment = forwardRef2(({
 });
 
 // src/GifForRendering.tsx
-import { forwardRef as forwardRef3, useEffect as useEffect4, useRef as useRef3, useState as useState4 } from "react";
+import { forwardRef as forwardRef3, useLayoutEffect as useLayoutEffect3, useRef as useRef3, useState as useState4 } from "react";
 import { Internals as Internals2, useDelayRender as useDelayRender2 } from "remotion";
 import { jsx as jsx3 } from "react/jsx-runtime";
 var GifForRendering = forwardRef3(({
-  src: src2,
+  src,
   width,
   height,
   onLoad,
@@ -1313,7 +1319,7 @@ var GifForRendering = forwardRef3(({
   effects,
   ...props
 }, ref) => {
-  const resolvedSrc = resolveGifSource(src2);
+  const resolvedSrc = resolveGifSource(src);
   const requestInitRef = useRef3(requestInit);
   requestInitRef.current = requestInit;
   const cacheKey = getGifCacheKey({ resolvedSrc, requestInit });
@@ -1325,21 +1331,14 @@ var GifForRendering = forwardRef3(({
         delays: [],
         frames: [],
         width: 0,
-        height: 0
+        height: 0,
+        handle: null
       };
     }
-    return parsedGif;
+    return { ...parsedGif, handle: null };
   });
   const [error, setError] = useState4(null);
-  const [renderHandle] = useState4(() => delayRender(`Rendering <Gif/> with src="${resolvedSrc}"`, {
-    timeoutInMilliseconds: delayRenderTimeoutInMilliseconds
-  }));
   const logLevel = Internals2.useLogLevel();
-  useEffect4(() => {
-    return () => {
-      continueRender(renderHandle);
-    };
-  }, [renderHandle, continueRender]);
   const index = useCurrentGifIndex({
     delays: state.delays,
     loopBehavior,
@@ -1349,7 +1348,7 @@ var GifForRendering = forwardRef3(({
   const currentOnError = useRef3(onError);
   currentOnLoad.current = onLoad;
   currentOnError.current = onError;
-  useEffect4(() => {
+  useLayoutEffect3(() => {
     const controller = new AbortController;
     let done = false;
     let aborted = false;
@@ -1363,13 +1362,14 @@ var GifForRendering = forwardRef3(({
       src: resolvedSrc,
       requestInit: requestInitRef.current
     }).then((parsed) => {
+      if (aborted) {
+        return;
+      }
       Internals2.Log.verbose({ logLevel, tag: null }, "Parsed GIF in", Date.now() - time, "ms");
       currentOnLoad.current?.(parsed);
-      update(parsed);
+      update({ ...parsed, handle: newHandle });
       volatileGifCache.set(cacheKey, parsed);
       done = true;
-      continueRender(newHandle);
-      continueRender(renderHandle);
     }).catch((err) => {
       if (aborted) {
         continueRender(newHandle);
@@ -1388,10 +1388,8 @@ var GifForRendering = forwardRef3(({
         controller.abort();
       }
       continueRender(newHandle);
-      continueRender(renderHandle);
     };
   }, [
-    renderHandle,
     logLevel,
     cacheKey,
     resolvedSrc,
@@ -1399,12 +1397,17 @@ var GifForRendering = forwardRef3(({
     continueRender,
     delayRenderTimeoutInMilliseconds
   ]);
+  useLayoutEffect3(() => {
+    if (state.handle !== null) {
+      continueRender(state.handle);
+    }
+  }, [state, continueRender]);
   if (error) {
     Internals2.Log.error({ logLevel, tag: null }, error.stack);
     if (isCorsError(error)) {
-      throw new Error(`Failed to render GIF with source ${src2}: "${error.message}". You must enable CORS for this URL.`);
+      throw new Error(`Failed to render GIF with source ${src}: "${error.message}". You must enable CORS for this URL.`);
     }
-    throw new Error(`Failed to render GIF with source ${src2}: "${error.message}". Render with --log=verbose to see the full stack.`);
+    throw new Error(`Failed to render GIF with source ${src}: "${error.message}". Render with --log=verbose to see the full stack.`);
   }
   if (index === -1) {
     return null;
@@ -1441,7 +1444,7 @@ var gifSchema = {
   ...Interactive.cropSchema
 };
 var GifInner = ({
-  src: src2,
+  src,
   width,
   height,
   onLoad,
@@ -1506,7 +1509,7 @@ var GifInner = ({
     videoConfigValues: controls?.videoConfigValues ?? null
   });
   const gifProps = {
-    src: src2,
+    src,
     width,
     height,
     onLoad,
@@ -1550,21 +1553,25 @@ var GifInner = ({
 var GifWithIntrinsicDuration = (props) => {
   const { fps } = useVideoConfig2();
   const { delayRender, continueRender, cancelRender } = useDelayRender3();
-  const { src: src2, requestInit, trimBefore } = props;
+  const { src, requestInit, trimBefore } = props;
   const onErrorRef = useRef4(props.onError);
   onErrorRef.current = props.onError;
   const requestInitRef = useRef4(requestInit);
   requestInitRef.current = requestInit;
-  const [handle] = useState5(() => delayRender(`Finding duration of <Gif src="${src2}" />`, {
-    timeoutInMilliseconds: props.delayRenderTimeoutInMilliseconds
-  }));
-  const [durationInFrames, setDurationInFrames] = useState5(null);
-  const [failed, setFailed] = useState5(false);
-  useEffect5(() => {
+  const [duration, setDuration] = useState5(null);
+  const [failedHandle, setFailedHandle] = useState5(null);
+  const { delayRenderTimeoutInMilliseconds } = props;
+  useLayoutEffect4(() => {
+    const handle = delayRender(`Finding duration of <Gif src="${src}" />`, {
+      timeoutInMilliseconds: delayRenderTimeoutInMilliseconds
+    });
     let cancelled = false;
-    getGifDurationInSeconds(src2, { requestInit: requestInitRef.current }).then((duration) => {
+    getGifDurationInSeconds(src, { requestInit: requestInitRef.current }).then((durationInSeconds) => {
       if (!cancelled) {
-        setDurationInFrames(Math.ceil(duration * fps) - (trimBefore ?? 0));
+        setDuration({
+          durationInFrames: Math.ceil(durationInSeconds * fps) - (trimBefore ?? 0),
+          handle
+        });
       }
     }).catch((error) => {
       if (cancelled) {
@@ -1572,7 +1579,7 @@ var GifWithIntrinsicDuration = (props) => {
       }
       if (onErrorRef.current) {
         onErrorRef.current(error);
-        setFailed(true);
+        setFailedHandle(handle);
       } else {
         cancelRender(error);
       }
@@ -1581,18 +1588,29 @@ var GifWithIntrinsicDuration = (props) => {
       cancelled = true;
       continueRender(handle);
     };
-  }, [cancelRender, continueRender, fps, handle, src2, trimBefore]);
-  useEffect5(() => {
-    if (durationInFrames !== null || failed) {
-      continueRender(handle);
+  }, [
+    cancelRender,
+    continueRender,
+    delayRender,
+    delayRenderTimeoutInMilliseconds,
+    fps,
+    src,
+    trimBefore
+  ]);
+  useLayoutEffect4(() => {
+    if (duration !== null) {
+      continueRender(duration.handle);
+    }
+    if (failedHandle !== null) {
+      continueRender(failedHandle);
     }
-  }, [continueRender, durationInFrames, failed, handle]);
-  if (durationInFrames === null || failed) {
+  }, [continueRender, duration, failedHandle]);
+  if (duration === null || failedHandle !== null) {
     return null;
   }
   return /* @__PURE__ */ jsx4(GifInner, {
     ...props,
-    durationInFrames
+    durationInFrames: duration.durationInFrames
   });
 };
 var GifComponent = (props) => {
@@ -1620,8 +1638,8 @@ var Gif = Interactive.withSchema({
 });
 Gif.displayName = "Gif";
 // src/preload-gif.ts
-var preloadGif = (src2, options) => {
-  const resolvedSrc = resolveGifSource(src2);
+var preloadGif = (src, options) => {
+  const resolvedSrc = resolveGifSource(src);
   const cacheKey = getGifCacheKey({
     resolvedSrc,
     requestInit: options?.requestInit
@@ -1661,7 +1679,7 @@ var preloadGif = (src2, options) => {
   };
 };
 export {
-  preloadGif,
+  Gif,
   getGifDurationInSeconds,
-  Gif
+  preloadGif
 };

package/package.json

@@ -3,7 +3,7 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/gif"
 	},
 	"name": "@remotion/gif",
-	"version": "4.0.534",
+	"version": "4.0.535",
 	"description": "Embed GIFs in a Remotion video",
 	"bugs": {
 		"url": "https://github.com/remotion-dev/remotion/issues"
@@ -30,7 +30,7 @@
 		}
 	},
 	"dependencies": {
-		"remotion": "4.0.534"
+		"remotion": "4.0.535"
 	},
 	"devDependencies": {
 		"@testing-library/react": "16.1.0",
@@ -38,7 +38,7 @@
 		"react": "19.2.3",
 		"react-dom": "19.2.3",
 		"webpack": "5.105.0",
-		"@remotion/eslint-config-internal": "4.0.534",
+		"@remotion/eslint-config-internal": "4.0.535",
 		"eslint": "9.19.0",
 		"@typescript/native-preview": "7.0.0-dev.20260217.1"
 	},