@remotion/gif 4.0.496 → 4.0.498

package/dist/cjs/Gif.d.ts

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

package/dist/cjs/Gif.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Gif = void 0;
+exports.Gif = exports.gifSchema = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importDefault(require("react"));
 const remotion_1 = require("remotion");
@@ -14,8 +14,9 @@ const { useMemoizedEffectDefinitions, useMemoizedEffects } = remotion_1.Internal
  * @description Displays a GIF that synchronizes with Remotions useCurrentFrame().
  * @see [Documentation](https://remotion.dev/docs/gif)
  */
-const gifSchema = {
+exports.gifSchema = {
     ...remotion_1.Internals.baseSchema,
+    ...remotion_1.Internals.premountSchema,
     playbackRate: {
         type: 'number',
         min: 0,
@@ -27,11 +28,23 @@ const gifSchema = {
         keyframable: false,
     },
     ...remotion_1.Internals.transformSchema,
+    ...remotion_1.Interactive.backgroundSchema,
+    ...remotion_1.Interactive.borderSchema,
 };
-const GifInner = ({ src, width, height, onLoad, onError, fit, playbackRate, loopBehavior, id, delayRenderTimeoutInMilliseconds, requestInit, durationInFrames, 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, 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,
+        premountFor: premountFor !== null && premountFor !== void 0 ? premountFor : null,
+        postmountFor: postmountFor !== null && postmountFor !== void 0 ? postmountFor : null,
+        style: style !== null && style !== void 0 ? style : null,
+        styleWhilePremounted: styleWhilePremounted !== null && styleWhilePremounted !== void 0 ? styleWhilePremounted : null,
+        styleWhilePostmounted: styleWhilePostmounted !== null && styleWhilePostmounted !== void 0 ? styleWhilePostmounted : null,
+        hideWhilePremounted: 'display-none',
+    });
     const memoizedEffectDefinitions = useMemoizedEffectDefinitions(effects);
     const memoizedEffects = useMemoizedEffects({
         effects,
@@ -49,17 +62,17 @@ const GifInner = ({ src, width, height, onLoad, onError, fit, playbackRate, loop
         id,
         delayRenderTimeoutInMilliseconds,
         requestInit,
-        style,
+        style: premountingStyle !== null && premountingStyle !== void 0 ? premountingStyle : 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.Sequence, { layout: "none", durationInFrames: durationInFrames, name: "<Gif>", _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/gif/gif", controls: controls, _remotionInternalEffects: memoizedEffectDefinitions, ...sequenceProps, outlineRef: refForOutline, children: inner }));
+    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, 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 }) }));
 };
 exports.Gif = remotion_1.Interactive.withSchema({
     Component: GifInner,
     componentName: '<Gif>',
     componentIdentity: 'dev.remotion.gif.Gif',
-    schema: gifSchema,
+    schema: exports.gifSchema,
     supportsEffects: true,
 });
 exports.Gif.displayName = 'Gif';

package/dist/esm/index.mjs

@@ -874,6 +874,7 @@ var getGifDurationInSeconds = async (src2, options) => {
 // src/Gif.tsx
 import React from "react";
 import {
+  Freeze,
   Internals as Internals3,
   Interactive,
   Sequence,
@@ -1442,6 +1443,7 @@ import { jsx as jsx4 } from "react/jsx-runtime";
 var { useMemoizedEffectDefinitions, useMemoizedEffects } = Internals3;
 var gifSchema = {
   ...Internals3.baseSchema,
+  ...Internals3.premountSchema,
   playbackRate: {
     type: "number",
     min: 0,
@@ -1452,7 +1454,9 @@ var gifSchema = {
     hiddenFromList: false,
     keyframable: false
   },
-  ...Internals3.transformSchema
+  ...Internals3.transformSchema,
+  ...Interactive.backgroundSchema,
+  ...Interactive.borderSchema
 };
 var GifInner = ({
   src: src2,
@@ -1467,6 +1471,11 @@ var GifInner = ({
   delayRenderTimeoutInMilliseconds,
   requestInit,
   durationInFrames,
+  from,
+  premountFor,
+  postmountFor,
+  styleWhilePremounted,
+  styleWhilePostmounted,
   style,
   controls,
   effects = [],
@@ -1475,6 +1484,24 @@ var GifInner = ({
 }) => {
   const env = useRemotionEnvironment();
   const refForOutline = React.useRef(null);
+  const {
+    effectivePostmountFor,
+    effectivePremountFor,
+    freezeFrame,
+    isPremountingOrPostmounting,
+    postmountingActive,
+    premountingActive,
+    premountingStyle
+  } = Internals3.usePremounting({
+    from: from ?? 0,
+    durationInFrames: durationInFrames ?? Infinity,
+    premountFor: premountFor ?? null,
+    postmountFor: postmountFor ?? null,
+    style: style ?? null,
+    styleWhilePremounted: styleWhilePremounted ?? null,
+    styleWhilePostmounted: styleWhilePostmounted ?? null,
+    hideWhilePremounted: "display-none"
+  });
   const memoizedEffectDefinitions = useMemoizedEffectDefinitions(effects);
   const memoizedEffects = useMemoizedEffects({
     effects,
@@ -1492,7 +1519,7 @@ var GifInner = ({
     id,
     delayRenderTimeoutInMilliseconds,
     requestInit,
-    style,
+    style: premountingStyle ?? undefined,
     effects: memoizedEffects
   };
   const inner = env.isRendering ? /* @__PURE__ */ jsx4(GifForRendering, {
@@ -1503,16 +1530,25 @@ var GifInner = ({
     ref,
     refForOutline
   });
-  return /* @__PURE__ */ jsx4(Sequence, {
-    layout: "none",
-    durationInFrames,
-    name: "<Gif>",
-    _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/gif/gif",
-    controls,
-    _remotionInternalEffects: memoizedEffectDefinitions,
-    ...sequenceProps,
-    outlineRef: refForOutline,
-    children: inner
+  return /* @__PURE__ */ jsx4(Freeze, {
+    frame: freezeFrame,
+    active: isPremountingOrPostmounting,
+    children: /* @__PURE__ */ jsx4(Sequence, {
+      layout: "none",
+      from: from ?? 0,
+      durationInFrames: durationInFrames ?? Infinity,
+      name: "<Gif>",
+      _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/gif/gif",
+      controls,
+      _remotionInternalEffects: memoizedEffectDefinitions,
+      _remotionInternalPremountDisplay: effectivePremountFor || null,
+      _remotionInternalPostmountDisplay: effectivePostmountFor || null,
+      _remotionInternalIsPremounting: premountingActive,
+      _remotionInternalIsPostmounting: postmountingActive,
+      ...sequenceProps,
+      outlineRef: refForOutline,
+      children: inner
+    })
   });
 };
 var Gif = Interactive.withSchema({

package/package.json

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