@remotion/gif 4.0.432 → 4.0.433

package/dist/cjs/Gif.d.ts

@@ -1,2 +1,12 @@
+import React from 'react';
+import { type SequenceControls, type SequenceProps } from 'remotion';
 import type { RemotionGifProps } from './props';
-export declare const Gif: import("react").ForwardRefExoticComponent<RemotionGifProps & import("react").RefAttributes<HTMLCanvasElement>>;
+export type GifProps = Omit<SequenceProps, 'children' | 'durationInFrames' | 'layout'> & RemotionGifProps & {
+    readonly durationInFrames?: number;
+};
+export declare const Gif: React.ComponentType<Omit<SequenceProps, "children" | "durationInFrames" | "layout"> & RemotionGifProps & {
+    readonly durationInFrames?: number | undefined;
+} & {
+    readonly controls?: SequenceControls | undefined;
+    readonly ref?: React.Ref<HTMLCanvasElement> | undefined;
+}>;

package/dist/cjs/Gif.js

@@ -2,7 +2,6 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Gif = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
 const remotion_1 = require("remotion");
 const GifForDevelopment_1 = require("./GifForDevelopment");
 const GifForRendering_1 = require("./GifForRendering");
@@ -10,10 +9,64 @@ const GifForRendering_1 = require("./GifForRendering");
  * @description Displays a GIF that synchronizes with Remotions useCurrentFrame().
  * @see [Documentation](https://remotion.dev/docs/gif)
  */
-exports.Gif = (0, react_1.forwardRef)((props, ref) => {
+const gifSchema = {
+    playbackRate: {
+        type: 'number',
+        min: 0,
+        max: 10,
+        step: 0.1,
+        default: 1,
+        description: 'Playback Rate',
+    },
+    'style.translate': {
+        type: 'translate',
+        step: 1,
+        default: '0px 0px',
+        description: 'Position',
+    },
+    'style.scale': {
+        type: 'number',
+        min: 0.05,
+        max: 100,
+        step: 0.01,
+        default: 1,
+        description: 'Scale',
+    },
+    'style.rotate': {
+        type: 'rotation',
+        step: 1,
+        default: '0deg',
+        description: 'Rotation',
+    },
+    'style.opacity': {
+        type: 'number',
+        min: 0,
+        max: 1,
+        step: 0.01,
+        default: 1,
+        description: 'Opacity',
+    },
+};
+const GifInner = ({ src, width, height, onLoad, onError, fit, playbackRate, loopBehavior, id, delayRenderTimeoutInMilliseconds, durationInFrames, style, controls, ref, ...sequenceProps }) => {
     const env = (0, remotion_1.useRemotionEnvironment)();
-    if (env.isRendering) {
-        return jsx_runtime_1.jsx(GifForRendering_1.GifForRendering, { ...props, ref: ref });
-    }
-    return jsx_runtime_1.jsx(GifForDevelopment_1.GifForDevelopment, { ...props, ref: ref });
-});
+    const { durationInFrames: videoDuration } = (0, remotion_1.useVideoConfig)();
+    const resolvedDuration = durationInFrames !== null && durationInFrames !== void 0 ? durationInFrames : videoDuration;
+    const gifProps = {
+        src,
+        width,
+        height,
+        onLoad,
+        onError,
+        fit,
+        playbackRate,
+        loopBehavior,
+        id,
+        delayRenderTimeoutInMilliseconds,
+        style,
+    };
+    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.Sequence, { layout: "none", durationInFrames: resolvedDuration, name: "<Gif>", controls: controls, ...sequenceProps, children: inner }));
+};
+exports.Gif = remotion_1.Internals.wrapInSchema(GifInner, gifSchema);
+exports.Gif.displayName = 'Gif';
+remotion_1.Internals.addSequenceStackTraces(exports.Gif);

package/dist/cjs/index.d.ts

@@ -1,4 +1,4 @@
 export { getGifDurationInSeconds } from './get-gif-duration-in-seconds';
-export { Gif } from './Gif';
+export { Gif, type GifProps } from './Gif';
 export { preloadGif } from './preload-gif';
 export { GifFillMode, RemotionGifProps } from './props';

package/dist/esm/index.mjs

@@ -819,8 +819,12 @@ var getGifDurationInSeconds = async (src2) => {
   return calcDuration(parsed);
 };
 // src/Gif.tsx
-import { forwardRef as forwardRef4 } from "react";
-import { useRemotionEnvironment } from "remotion";
+import {
+  Internals as Internals2,
+  Sequence,
+  useRemotionEnvironment,
+  useVideoConfig as useVideoConfig2
+} from "remotion";
 
 // src/GifForDevelopment.tsx
 import { forwardRef as forwardRef2, useEffect as useEffect3, useRef as useRef2, useState as useState3 } from "react";
@@ -1237,19 +1241,96 @@ var GifForRendering = forwardRef3(({
 
 // src/Gif.tsx
 import { jsx as jsx4 } from "react/jsx-runtime";
-var Gif = forwardRef4((props, ref) => {
-  const env = useRemotionEnvironment();
-  if (env.isRendering) {
-    return /* @__PURE__ */ jsx4(GifForRendering, {
-      ...props,
-      ref
-    });
+var gifSchema = {
+  playbackRate: {
+    type: "number",
+    min: 0,
+    max: 10,
+    step: 0.1,
+    default: 1,
+    description: "Playback Rate"
+  },
+  "style.translate": {
+    type: "translate",
+    step: 1,
+    default: "0px 0px",
+    description: "Position"
+  },
+  "style.scale": {
+    type: "number",
+    min: 0.05,
+    max: 100,
+    step: 0.01,
+    default: 1,
+    description: "Scale"
+  },
+  "style.rotate": {
+    type: "rotation",
+    step: 1,
+    default: "0deg",
+    description: "Rotation"
+  },
+  "style.opacity": {
+    type: "number",
+    min: 0,
+    max: 1,
+    step: 0.01,
+    default: 1,
+    description: "Opacity"
   }
-  return /* @__PURE__ */ jsx4(GifForDevelopment, {
-    ...props,
+};
+var GifInner = ({
+  src: src2,
+  width,
+  height,
+  onLoad,
+  onError,
+  fit,
+  playbackRate,
+  loopBehavior,
+  id,
+  delayRenderTimeoutInMilliseconds,
+  durationInFrames,
+  style,
+  controls,
+  ref,
+  ...sequenceProps
+}) => {
+  const env = useRemotionEnvironment();
+  const { durationInFrames: videoDuration } = useVideoConfig2();
+  const resolvedDuration = durationInFrames ?? videoDuration;
+  const gifProps = {
+    src: src2,
+    width,
+    height,
+    onLoad,
+    onError,
+    fit,
+    playbackRate,
+    loopBehavior,
+    id,
+    delayRenderTimeoutInMilliseconds,
+    style
+  };
+  const inner = env.isRendering ? /* @__PURE__ */ jsx4(GifForRendering, {
+    ...gifProps,
+    ref
+  }) : /* @__PURE__ */ jsx4(GifForDevelopment, {
+    ...gifProps,
     ref
   });
-});
+  return /* @__PURE__ */ jsx4(Sequence, {
+    layout: "none",
+    durationInFrames: resolvedDuration,
+    name: "<Gif>",
+    controls,
+    ...sequenceProps,
+    children: inner
+  });
+};
+var Gif = Internals2.wrapInSchema(GifInner, gifSchema);
+Gif.displayName = "Gif";
+Internals2.addSequenceStackTraces(Gif);
 // src/preload-gif.ts
 var preloadGif = (src2) => {
   const resolvedSrc = resolveGifSource(src2);

package/package.json

@@ -3,7 +3,7 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/gif"
 	},
 	"name": "@remotion/gif",
-	"version": "4.0.432",
+	"version": "4.0.433",
 	"description": "Embed GIFs in a Remotion video",
 	"sideEffects": false,
 	"bugs": {
@@ -30,16 +30,16 @@
 		}
 	},
 	"dependencies": {
-		"remotion": "4.0.432"
+		"remotion": "4.0.433"
 	},
 	"devDependencies": {
 		"esbuild": "0.25.0",
 		"react": "19.2.3",
 		"react-dom": "19.2.3",
 		"webpack": "5.105.0",
-		"@remotion/eslint-config-internal": "4.0.432",
+		"@remotion/eslint-config-internal": "4.0.433",
 		"eslint": "9.19.0",
-		"@typescript/native-preview": "7.0.0-dev.20260301.1"
+		"@typescript/native-preview": "7.0.0-dev.20260217.1"
 	},
 	"peerDependencies": {
 		"react": ">=16.8.0",