@remotion/gif 4.0.498 → 4.0.500

package/dist/cjs/Gif.d.ts

@@ -1,11 +1,11 @@
 import React from 'react';
-import { type EffectsProp, type InteractiveBaseProps, type InteractivePremountProps, type InteractiveTransformProps, type SequenceControls, type InteractivitySchema } from 'remotion';
+import { type EffectsProp, type InteractiveBaseProps, type InteractiveCropProps, type InteractivePremountProps, type InteractiveTransformProps, type SequenceControls, type InteractivitySchema } from 'remotion';
 import type { RemotionGifProps } from './props';
-export type GifProps = InteractiveBaseProps & InteractivePremountProps & InteractiveTransformProps & RemotionGifProps & {
+export type GifProps = InteractiveBaseProps & InteractiveCropProps & InteractivePremountProps & InteractiveTransformProps & RemotionGifProps & {
     readonly effects?: EffectsProp;
 };
 export declare const gifSchema: InteractivitySchema;
-export declare const Gif: React.ComponentType<InteractiveBaseProps & InteractivePremountProps & InteractiveTransformProps & RemotionGifProps & {
+export declare const Gif: React.ComponentType<InteractiveBaseProps & InteractiveCropProps & InteractivePremountProps & InteractiveTransformProps & RemotionGifProps & {
     readonly effects?: EffectsProp | undefined;
 } & {
     readonly controls?: SequenceControls | undefined;

package/dist/cjs/Gif.js

@@ -30,8 +30,9 @@ exports.gifSchema = {
     ...remotion_1.Internals.transformSchema,
     ...remotion_1.Interactive.backgroundSchema,
     ...remotion_1.Interactive.borderSchema,
+    ...remotion_1.Interactive.cropSchema,
 };
-const GifInner = ({ src, width, height, onLoad, onError, fit, playbackRate, loopBehavior, id, delayRenderTimeoutInMilliseconds, requestInit, durationInFrames, from, premountFor, postmountFor, styleWhilePremounted, styleWhilePostmounted, style, 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 = [], ref, ...sequenceProps }) => {
     var _a;
     const env = (0, remotion_1.useRemotionEnvironment)();
     const refForOutline = react_1.default.useRef(null);
@@ -45,6 +46,14 @@ const GifInner = ({ src, width, height, onLoad, onError, fit, playbackRate, loop
         styleWhilePostmounted: styleWhilePostmounted !== null && styleWhilePostmounted !== void 0 ? styleWhilePostmounted : null,
         hideWhilePremounted: 'display-none',
     });
+    const croppedStyle = remotion_1.Internals.useCropStyle({
+        cropLeft,
+        cropRight,
+        cropTop,
+        cropBottom,
+        style: premountingStyle,
+        componentName: '<Gif />',
+    });
     const memoizedEffectDefinitions = useMemoizedEffectDefinitions(effects);
     const memoizedEffects = useMemoizedEffects({
         effects,
@@ -62,7 +71,7 @@ const GifInner = ({ src, width, height, onLoad, onError, fit, playbackRate, loop
         id,
         delayRenderTimeoutInMilliseconds,
         requestInit,
-        style: premountingStyle !== null && premountingStyle !== void 0 ? premountingStyle : undefined,
+        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 }));

package/dist/esm/index.mjs

@@ -1456,7 +1456,8 @@ var gifSchema = {
   },
   ...Internals3.transformSchema,
   ...Interactive.backgroundSchema,
-  ...Interactive.borderSchema
+  ...Interactive.borderSchema,
+  ...Interactive.cropSchema
 };
 var GifInner = ({
   src: src2,
@@ -1477,6 +1478,10 @@ var GifInner = ({
   styleWhilePremounted,
   styleWhilePostmounted,
   style,
+  cropLeft,
+  cropRight,
+  cropTop,
+  cropBottom,
   controls,
   effects = [],
   ref,
@@ -1502,6 +1507,14 @@ var GifInner = ({
     styleWhilePostmounted: styleWhilePostmounted ?? null,
     hideWhilePremounted: "display-none"
   });
+  const croppedStyle = Internals3.useCropStyle({
+    cropLeft,
+    cropRight,
+    cropTop,
+    cropBottom,
+    style: premountingStyle,
+    componentName: "<Gif />"
+  });
   const memoizedEffectDefinitions = useMemoizedEffectDefinitions(effects);
   const memoizedEffects = useMemoizedEffects({
     effects,
@@ -1519,7 +1532,7 @@ var GifInner = ({
     id,
     delayRenderTimeoutInMilliseconds,
     requestInit,
-    style: premountingStyle ?? undefined,
+    style: croppedStyle ?? undefined,
     effects: memoizedEffects
   };
   const inner = env.isRendering ? /* @__PURE__ */ jsx4(GifForRendering, {

package/package.json

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