@remotion/gif 4.0.535 → 4.0.537

package/dist/cjs/Gif.js

@@ -30,7 +30,7 @@ exports.gifSchema = {
     ...remotion_1.Interactive.borderRadiusSchema,
     ...remotion_1.Interactive.cropSchema,
 };
-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 }) => {
+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 = [], effectsOutputSize, ref, ...sequenceProps }) => {
     var _a, _b;
     const env = (0, remotion_1.useRemotionEnvironment)();
     const { effectivePostmountFor, effectivePremountFor, freezeFrame, isPremountingOrPostmounting, postmountingActive, premountingActive, premountingStyle, } = remotion_1.Internals.usePremounting({
@@ -74,6 +74,7 @@ const GifInner = ({ src, width, height, onLoad, onError, fit, playbackRate, loop
         requestInit,
         style: croppedStyle !== null && croppedStyle !== void 0 ? croppedStyle : undefined,
         effects: memoizedEffects,
+        effectsOutputSize,
     };
     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 }) }));

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, ...props }, ref) => {
+exports.GifForDevelopment = (0, react_1.forwardRef)(({ src, width, height, onError, loopBehavior = 'loop', playbackRate = 1, onLoad, fit = 'fill', requestInit, effects, effectsOutputSize = null, ...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, ...props, ref: ref }));
+    return (jsx_runtime_1.jsx(canvas_1.Canvas, { fit: fit, index: index, frames: state.frames, width: width, height: height, effects: effects, effectsOutputSize: effectsOutputSize, ...props, ref: ref }));
 });

package/dist/cjs/GifForRendering.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.GifForRendering = (0, react_1.forwardRef)(({ src, width, height, onLoad, onError, loopBehavior = 'loop', playbackRate = 1, fit = 'fill', delayRenderTimeoutInMilliseconds, requestInit, effects, ...props }, ref) => {
+exports.GifForRendering = (0, react_1.forwardRef)(({ src, width, height, onLoad, onError, loopBehavior = 'loop', playbackRate = 1, fit = 'fill', delayRenderTimeoutInMilliseconds, requestInit, effects, effectsOutputSize = null, ...props }, ref) => {
     const resolvedSrc = (0, resolve_gif_source_1.resolveGifSource)(src);
     const requestInitRef = (0, react_1.useRef)(requestInit);
     requestInitRef.current = requestInit;
@@ -109,5 +109,5 @@ exports.GifForRendering = (0, react_1.forwardRef)(({ src, width, height, onLoad,
     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, ...props, ref: ref }));
+    return (jsx_runtime_1.jsx(canvas_1.Canvas, { fit: fit, index: index, frames: state.frames, width: width, height: height, effects: effects, effectsOutputSize: effectsOutputSize, ...props, ref: ref }));
 });

package/dist/cjs/canvas.d.ts

@@ -1,4 +1,4 @@
-import type { EffectDefinitionAndStack } from 'remotion';
+import type { EffectDefinitionAndStack, EffectsOutputSize } from 'remotion';
 import type { GifFillMode } from './props';
 type Props = {
     readonly index: number;
@@ -9,6 +9,7 @@ type Props = {
     readonly className?: string;
     readonly style?: React.CSSProperties;
     readonly effects: EffectDefinitionAndStack<unknown>[];
+    readonly effectsOutputSize: EffectsOutputSize | 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 }, ref) => {
+exports.Canvas = (0, react_1.forwardRef)(({ index, frames, width, height, fit, className, style, effects, effectsOutputSize, }, ref) => {
     const canvasRef = (0, react_1.useRef)(null);
     const [tempCtx] = (0, react_1.useState)(() => {
         return makeCanvas();
@@ -82,7 +82,7 @@ exports.Canvas = (0, react_1.forwardRef)(({ index, frames, width, height, fit, c
         }
         return document.createElement('canvas');
     }, []);
-    const chainState = useEffectChainState();
+    const chainState = useEffectChainState(effectsOutputSize);
     const { delayRender, continueRender, cancelRender } = (0, remotion_1.useDelayRender)();
     const size = (0, use_element_size_1.useElementSize)(canvasRef);
     (0, react_1.useImperativeHandle)(ref, () => {

package/dist/cjs/props.d.ts

@@ -1,5 +1,7 @@
+import type { EffectsOutputSize } from 'remotion';
 export type GifLoopBehavior = 'loop' | 'pause-after-finish' | 'unmount-after-finish';
 export type RemotionGifProps = {
+    effectsOutputSize?: EffectsOutputSize;
     src: string;
     width?: number;
     height?: number;

package/dist/esm/index.mjs

@@ -1027,7 +1027,17 @@ var makeCanvas = () => {
   canvas.height = 0;
   return ctx;
 };
-var Canvas = forwardRef(({ index, frames, width, height, fit, className, style, effects }, ref) => {
+var Canvas = forwardRef(({
+  index,
+  frames,
+  width,
+  height,
+  fit,
+  className,
+  style,
+  effects,
+  effectsOutputSize
+}, ref) => {
   const canvasRef = useRef(null);
   const [tempCtx] = useState2(() => {
     return makeCanvas();
@@ -1044,7 +1054,7 @@ var Canvas = forwardRef(({ index, frames, width, height, fit, className, style,
     }
     return document.createElement("canvas");
   }, []);
-  const chainState = useEffectChainState();
+  const chainState = useEffectChainState(effectsOutputSize);
   const { delayRender, continueRender, cancelRender } = useDelayRender();
   const size = useElementSize(canvasRef);
   useImperativeHandle(ref, () => {
@@ -1215,6 +1225,7 @@ var GifForDevelopment = forwardRef2(({
   fit = "fill",
   requestInit,
   effects,
+  effectsOutputSize = null,
   ...props
 }, ref) => {
   const resolvedSrc = resolveGifSource(src);
@@ -1296,6 +1307,7 @@ var GifForDevelopment = forwardRef2(({
     width,
     height,
     effects,
+    effectsOutputSize,
     ...props,
     ref
   });
@@ -1317,6 +1329,7 @@ var GifForRendering = forwardRef3(({
   delayRenderTimeoutInMilliseconds,
   requestInit,
   effects,
+  effectsOutputSize = null,
   ...props
 }, ref) => {
   const resolvedSrc = resolveGifSource(src);
@@ -1419,6 +1432,7 @@ var GifForRendering = forwardRef3(({
     width,
     height,
     effects,
+    effectsOutputSize,
     ...props,
     ref
   });
@@ -1468,6 +1482,7 @@ var GifInner = ({
   cropBottom,
   controls,
   effects = [],
+  effectsOutputSize,
   ref,
   ...sequenceProps
 }) => {
@@ -1520,7 +1535,8 @@ var GifInner = ({
     delayRenderTimeoutInMilliseconds,
     requestInit,
     style: croppedStyle ?? undefined,
-    effects: memoizedEffects
+    effects: memoizedEffects,
+    effectsOutputSize
   };
   const inner = env.isRendering ? /* @__PURE__ */ jsx4(GifForRendering, {
     ...gifProps,

package/package.json

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