@remotion/gif 4.0.528 → 4.0.530

package/dist/cjs/Gif.js

@@ -1,14 +1,15 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Gif = exports.gifSchema = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = __importDefault(require("react"));
+const react_1 = require("react");
+const react_2 = require("react");
 const remotion_1 = require("remotion");
+const get_gif_duration_in_seconds_1 = require("./get-gif-duration-in-seconds");
 const GifForDevelopment_1 = require("./GifForDevelopment");
 const GifForRendering_1 = require("./GifForRendering");
+const request_init_1 = require("./request-init");
+const resolve_gif_source_1 = require("./resolve-gif-source");
 const { useMemoizedEffectDefinitions, useMemoizedEffects } = remotion_1.Internals;
 /*
  * @description Displays a GIF that synchronizes with Remotions useCurrentFrame().
@@ -26,10 +27,13 @@ exports.gifSchema = {
 const GifInner = ({ src, width, height, onLoad, onError, fit, playbackRate, loopBehavior, id, delayRenderTimeoutInMilliseconds, requestInit, durationInFrames, from, premountFor, postmountFor, styleWhilePremounted, styleWhilePostmounted, style, cropLeft, cropRight, cropTop, cropBottom, controls, effects = [], ref, ...sequenceProps }) => {
     var _a;
     const env = (0, remotion_1.useRemotionEnvironment)();
-    const refForOutline = react_1.default.useRef(null);
     const { effectivePostmountFor, effectivePremountFor, freezeFrame, isPremountingOrPostmounting, postmountingActive, premountingActive, premountingStyle, } = remotion_1.Internals.usePremounting({
         from: from !== null && from !== void 0 ? from : 0,
-        durationInFrames: durationInFrames !== null && durationInFrames !== void 0 ? durationInFrames : Infinity,
+        durationInFrames: remotion_1.Internals.resolveSequenceDuration({
+            durationInFrames,
+            playbackRate,
+            loop: sequenceProps.loop,
+        }),
         premountFor: premountFor !== null && premountFor !== void 0 ? premountFor : null,
         postmountFor: postmountFor !== null && postmountFor !== void 0 ? postmountFor : null,
         style: style !== null && style !== void 0 ? style : null,
@@ -64,11 +68,71 @@ const GifInner = ({ src, width, height, onLoad, onError, fit, playbackRate, loop
         style: croppedStyle !== null && croppedStyle !== void 0 ? croppedStyle : undefined,
         effects: memoizedEffects,
     };
-    const inner = env.isRendering ? (jsx_runtime_1.jsx(GifForRendering_1.GifForRendering, { ...gifProps, ref: ref })) : (jsx_runtime_1.jsx(GifForDevelopment_1.GifForDevelopment, { ...gifProps, ref: ref, refForOutline: refForOutline }));
-    return (jsx_runtime_1.jsx(remotion_1.Freeze, { frame: freezeFrame, active: isPremountingOrPostmounting, children: jsx_runtime_1.jsx(remotion_1.Sequence, { layout: "none", from: from !== null && from !== void 0 ? from : 0, playbackRate: playbackRate, durationInFrames: durationInFrames !== null && durationInFrames !== void 0 ? durationInFrames : Infinity, name: "<Gif>", _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/gif/gif", controls: controls, _remotionInternalEffects: memoizedEffectDefinitions, _remotionInternalPremountDisplay: effectivePremountFor || null, _remotionInternalPostmountDisplay: effectivePostmountFor || null, _remotionInternalIsPremounting: premountingActive, _remotionInternalIsPostmounting: postmountingActive, ...sequenceProps, outlineRef: refForOutline, children: inner }) }));
+    const inner = env.isRendering ? (jsx_runtime_1.jsx(GifForRendering_1.GifForRendering, { ...gifProps, ref: ref })) : (jsx_runtime_1.jsx(GifForDevelopment_1.GifForDevelopment, { ...gifProps, ref: ref }));
+    return (jsx_runtime_1.jsx(remotion_1.Freeze, { frame: freezeFrame, active: isPremountingOrPostmounting, children: jsx_runtime_1.jsx(remotion_1.Sequence, { layout: "none", from: from !== null && from !== void 0 ? from : 0, playbackRate: playbackRate, durationInFrames: durationInFrames, name: "<Gif>", _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/gif/gif", controls: controls, _remotionInternalEffects: memoizedEffectDefinitions, _remotionInternalPremountDisplay: effectivePremountFor || null, _remotionInternalPostmountDisplay: effectivePostmountFor || null, _remotionInternalIsPremounting: premountingActive, _remotionInternalIsPostmounting: postmountingActive, ...sequenceProps, children: inner }) }));
+};
+const GifWithIntrinsicDuration = (props) => {
+    const { fps } = (0, remotion_1.useVideoConfig)();
+    const { delayRender, continueRender, cancelRender } = (0, remotion_1.useDelayRender)();
+    const { src, requestInit, trimBefore } = props;
+    const onErrorRef = (0, react_2.useRef)(props.onError);
+    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)(() => {
+        let cancelled = false;
+        (0, get_gif_duration_in_seconds_1.getGifDurationInSeconds)(src, { requestInit: requestInitRef.current })
+            .then((duration) => {
+            if (!cancelled) {
+                setDurationInFrames(Math.ceil(duration * fps) - (trimBefore !== null && trimBefore !== void 0 ? trimBefore : 0));
+            }
+        })
+            .catch((error) => {
+            if (cancelled) {
+                return;
+            }
+            if (onErrorRef.current) {
+                onErrorRef.current(error);
+                setFailed(true);
+            }
+            else {
+                cancelRender(error);
+            }
+        });
+        return () => {
+            cancelled = true;
+            continueRender(handle);
+        };
+    }, [cancelRender, continueRender, fps, handle, src, trimBefore]);
+    (0, react_2.useEffect)(() => {
+        if (durationInFrames !== null || failed) {
+            continueRender(handle);
+        }
+    }, [continueRender, durationInFrames, failed, handle]);
+    if (durationInFrames === null || failed) {
+        return null;
+    }
+    return jsx_runtime_1.jsx(GifInner, { ...props, durationInFrames: durationInFrames });
+};
+const GifComponent = (props) => {
+    var _a;
+    if (props.loop && props.durationInFrames === undefined) {
+        const resolvedSrc = (0, resolve_gif_source_1.resolveGifSource)(props.src);
+        const cacheKey = (0, request_init_1.getGifCacheKey)({
+            resolvedSrc,
+            requestInit: props.requestInit,
+        });
+        return (react_1.createElement(GifWithIntrinsicDuration, { ...props, key: `${cacheKey}-${(_a = props.trimBefore) !== null && _a !== void 0 ? _a : 0}` }));
+    }
+    return jsx_runtime_1.jsx(GifInner, { ...props });
 };
 exports.Gif = remotion_1.Interactive.withSchema({
-    Component: GifInner,
+    Component: GifComponent,
     componentName: '<Gif>',
     componentIdentity: 'dev.remotion.gif.Gif',
     schema: exports.gifSchema,

package/dist/cjs/GifForDevelopment.d.ts

@@ -1,7 +1,5 @@
-import { type RefObject } from 'react';
 import type { EffectDefinitionAndStack } from 'remotion';
 import type { RemotionGifProps } from './props';
 export declare const GifForDevelopment: import("react").ForwardRefExoticComponent<RemotionGifProps & {
     readonly effects: EffectDefinitionAndStack<unknown>[];
-    readonly refForOutline: RefObject<HTMLElement | null>;
 } & import("react").RefAttributes<HTMLCanvasElement>>;

package/dist/cjs/GifForDevelopment.js

@@ -11,7 +11,7 @@ const react_tools_1 = require("./react-tools");
 const request_init_1 = require("./request-init");
 const resolve_gif_source_1 = require("./resolve-gif-source");
 const useCurrentGifIndex_1 = require("./useCurrentGifIndex");
-exports.GifForDevelopment = (0, react_1.forwardRef)(({ src, width, height, onError, loopBehavior = 'loop', playbackRate = 1, onLoad, fit = 'fill', requestInit, effects, refForOutline, ...props }, ref) => {
+exports.GifForDevelopment = (0, react_1.forwardRef)(({ src, width, height, onError, loopBehavior = 'loop', playbackRate = 1, onLoad, fit = 'fill', requestInit, effects, ...props }, ref) => {
     const resolvedSrc = (0, resolve_gif_source_1.resolveGifSource)(src);
     const requestInitRef = (0, react_1.useRef)(requestInit);
     requestInitRef.current = requestInit;
@@ -91,5 +91,5 @@ exports.GifForDevelopment = (0, react_1.forwardRef)(({ src, width, height, onErr
     if (index === -1) {
         return null;
     }
-    return (jsx_runtime_1.jsx(canvas_1.Canvas, { fit: fit, index: index, frames: state.frames, width: width, height: height, effects: effects, refForOutline: refForOutline, ...props, ref: ref }));
+    return (jsx_runtime_1.jsx(canvas_1.Canvas, { fit: fit, index: index, frames: state.frames, width: width, height: height, effects: effects, ...props, ref: ref }));
 });

package/dist/cjs/canvas.d.ts

@@ -1,4 +1,3 @@
-import { type RefObject } from 'react';
 import type { EffectDefinitionAndStack } from 'remotion';
 import type { GifFillMode } from './props';
 type Props = {
@@ -10,7 +9,6 @@ type Props = {
     readonly className?: string;
     readonly style?: React.CSSProperties;
     readonly effects: EffectDefinitionAndStack<unknown>[];
-    readonly refForOutline?: RefObject<HTMLElement | null>;
 };
 export declare const Canvas: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<unknown>>;
 export {};

package/dist/cjs/canvas.js

@@ -65,7 +65,7 @@ const makeCanvas = () => {
     canvas.height = 0;
     return ctx;
 };
-exports.Canvas = (0, react_1.forwardRef)(({ index, frames, width, height, fit, className, style, effects, refForOutline, }, ref) => {
+exports.Canvas = (0, react_1.forwardRef)(({ index, frames, width, height, fit, className, style, effects }, ref) => {
     const canvasRef = (0, react_1.useRef)(null);
     const [tempCtx] = (0, react_1.useState)(() => {
         return makeCanvas();
@@ -88,12 +88,6 @@ exports.Canvas = (0, react_1.forwardRef)(({ index, frames, width, height, fit, c
     (0, react_1.useImperativeHandle)(ref, () => {
         return canvasRef.current;
     }, []);
-    const canvasCallbackRef = (0, react_1.useCallback)((canvas) => {
-        canvasRef.current = canvas;
-        if (refForOutline) {
-            refForOutline.current = canvas;
-        }
-    }, [refForOutline]);
     (0, react_1.useEffect)(() => {
         if (!size) {
             return;
@@ -202,5 +196,5 @@ exports.Canvas = (0, react_1.forwardRef)(({ index, frames, width, height, fit, c
         continueRender,
         cancelRender,
     ]);
-    return (jsx_runtime_1.jsx("canvas", { ref: canvasCallbackRef, className: className, style: style, width: width !== null && width !== void 0 ? width : size === null || size === void 0 ? void 0 : size.width, height: height !== null && height !== void 0 ? height : size === null || size === void 0 ? void 0 : size.height }));
+    return (jsx_runtime_1.jsx("canvas", { ref: canvasRef, className: className, style: style, width: width !== null && width !== void 0 ? width : size === null || size === void 0 ? void 0 : size.width, height: height !== null && height !== void 0 ? height : size === null || size === void 0 ? void 0 : size.height }));
 });

package/dist/esm/index.mjs

@@ -872,13 +872,15 @@ var getGifDurationInSeconds = async (src2, options) => {
   return calcDuration(parsed);
 };
 // src/Gif.tsx
-import React from "react";
+import React, { useEffect as useEffect5, useRef as useRef4, useState as useState5 } from "react";
 import {
   Freeze,
   Internals as Internals3,
   Interactive,
   Sequence,
-  useRemotionEnvironment
+  useDelayRender as useDelayRender3,
+  useRemotionEnvironment,
+  useVideoConfig as useVideoConfig2
 } from "remotion";
 
 // src/GifForDevelopment.tsx
@@ -887,7 +889,6 @@ import { forwardRef as forwardRef2, useEffect as useEffect3, useRef as useRef2,
 // src/canvas.tsx
 import {
   forwardRef,
-  useCallback as useCallback2,
   useEffect as useEffect2,
   useImperativeHandle,
   useMemo as useMemo2,
@@ -1020,17 +1021,7 @@ var makeCanvas = () => {
   canvas.height = 0;
   return ctx;
 };
-var Canvas = forwardRef(({
-  index,
-  frames,
-  width,
-  height,
-  fit,
-  className,
-  style,
-  effects,
-  refForOutline
-}, ref) => {
+var Canvas = forwardRef(({ index, frames, width, height, fit, className, style, effects }, ref) => {
   const canvasRef = useRef(null);
   const [tempCtx] = useState2(() => {
     return makeCanvas();
@@ -1053,12 +1044,6 @@ var Canvas = forwardRef(({
   useImperativeHandle(ref, () => {
     return canvasRef.current;
   }, []);
-  const canvasCallbackRef = useCallback2((canvas) => {
-    canvasRef.current = canvas;
-    if (refForOutline) {
-      refForOutline.current = canvas;
-    }
-  }, [refForOutline]);
   useEffect2(() => {
     if (!size) {
       return;
@@ -1160,7 +1145,7 @@ var Canvas = forwardRef(({
     cancelRender
   ]);
   return /* @__PURE__ */ jsx("canvas", {
-    ref: canvasCallbackRef,
+    ref: canvasRef,
     className,
     style,
     width: width ?? size?.width,
@@ -1224,7 +1209,6 @@ var GifForDevelopment = forwardRef2(({
   fit = "fill",
   requestInit,
   effects,
-  refForOutline,
   ...props
 }, ref) => {
   const resolvedSrc = resolveGifSource(src2);
@@ -1306,7 +1290,6 @@ var GifForDevelopment = forwardRef2(({
     width,
     height,
     effects,
-    refForOutline,
     ...props,
     ref
   });
@@ -1440,6 +1423,7 @@ var GifForRendering = forwardRef3(({
 
 // src/Gif.tsx
 import { jsx as jsx4 } from "react/jsx-runtime";
+import { createElement } from "react";
 var { useMemoizedEffectDefinitions, useMemoizedEffects } = Internals3;
 var gifSchema = {
   ...Internals3.baseSchema,
@@ -1479,7 +1463,6 @@ var GifInner = ({
   ...sequenceProps
 }) => {
   const env = useRemotionEnvironment();
-  const refForOutline = React.useRef(null);
   const {
     effectivePostmountFor,
     effectivePremountFor,
@@ -1490,7 +1473,11 @@ var GifInner = ({
     premountingStyle
   } = Internals3.usePremounting({
     from: from ?? 0,
-    durationInFrames: durationInFrames ?? Infinity,
+    durationInFrames: Internals3.resolveSequenceDuration({
+      durationInFrames,
+      playbackRate,
+      loop: sequenceProps.loop
+    }),
     premountFor: premountFor ?? null,
     postmountFor: postmountFor ?? null,
     style: style ?? null,
@@ -1530,8 +1517,7 @@ var GifInner = ({
     ref
   }) : /* @__PURE__ */ jsx4(GifForDevelopment, {
     ...gifProps,
-    ref,
-    refForOutline
+    ref
   });
   return /* @__PURE__ */ jsx4(Freeze, {
     frame: freezeFrame,
@@ -1540,7 +1526,7 @@ var GifInner = ({
       layout: "none",
       from: from ?? 0,
       playbackRate,
-      durationInFrames: durationInFrames ?? Infinity,
+      durationInFrames,
       name: "<Gif>",
       _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/gif/gif",
       controls,
@@ -1550,13 +1536,76 @@ var GifInner = ({
       _remotionInternalIsPremounting: premountingActive,
       _remotionInternalIsPostmounting: postmountingActive,
       ...sequenceProps,
-      outlineRef: refForOutline,
       children: inner
     })
   });
 };
+var GifWithIntrinsicDuration = (props) => {
+  const { fps } = useVideoConfig2();
+  const { delayRender, continueRender, cancelRender } = useDelayRender3();
+  const { src: src2, 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(() => {
+    let cancelled = false;
+    getGifDurationInSeconds(src2, { requestInit: requestInitRef.current }).then((duration) => {
+      if (!cancelled) {
+        setDurationInFrames(Math.ceil(duration * fps) - (trimBefore ?? 0));
+      }
+    }).catch((error) => {
+      if (cancelled) {
+        return;
+      }
+      if (onErrorRef.current) {
+        onErrorRef.current(error);
+        setFailed(true);
+      } else {
+        cancelRender(error);
+      }
+    });
+    return () => {
+      cancelled = true;
+      continueRender(handle);
+    };
+  }, [cancelRender, continueRender, fps, handle, src2, trimBefore]);
+  useEffect5(() => {
+    if (durationInFrames !== null || failed) {
+      continueRender(handle);
+    }
+  }, [continueRender, durationInFrames, failed, handle]);
+  if (durationInFrames === null || failed) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx4(GifInner, {
+    ...props,
+    durationInFrames
+  });
+};
+var GifComponent = (props) => {
+  if (props.loop && props.durationInFrames === undefined) {
+    const resolvedSrc = resolveGifSource(props.src);
+    const cacheKey = getGifCacheKey({
+      resolvedSrc,
+      requestInit: props.requestInit
+    });
+    return /* @__PURE__ */ createElement(GifWithIntrinsicDuration, {
+      ...props,
+      key: `${cacheKey}-${props.trimBefore ?? 0}`
+    });
+  }
+  return /* @__PURE__ */ jsx4(GifInner, {
+    ...props
+  });
+};
 var Gif = Interactive.withSchema({
-  Component: GifInner,
+  Component: GifComponent,
   componentName: "<Gif>",
   componentIdentity: "dev.remotion.gif.Gif",
   schema: gifSchema,

package/package.json

@@ -3,7 +3,7 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/gif"
 	},
 	"name": "@remotion/gif",
-	"version": "4.0.528",
+	"version": "4.0.530",
 	"description": "Embed GIFs in a Remotion video",
 	"bugs": {
 		"url": "https://github.com/remotion-dev/remotion/issues"
@@ -30,7 +30,7 @@
 		}
 	},
 	"dependencies": {
-		"remotion": "4.0.528"
+		"remotion": "4.0.530"
 	},
 	"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.528",
+		"@remotion/eslint-config-internal": "4.0.530",
 		"eslint": "9.19.0",
 		"@typescript/native-preview": "7.0.0-dev.20260217.1"
 	},