@remotion/rive 4.0.526 → 4.0.528

package/dist/cjs/RemotionRiveCanvas.d.ts

@@ -1,6 +1,6 @@
 import type { Artboard, CanvasRenderer, File, FileAsset, LinearAnimationInstance, RiveCanvas } from '@rive-app/canvas-advanced';
 import React from 'react';
-import type { EffectsProp, InteractiveBaseProps, InteractiveCropProps, InteractivitySchema } from 'remotion';
+import type { EffectsProp, InteractiveBaseProps, InteractivePremountProps, InteractiveCropProps, InteractivitySchema } from 'remotion';
 import type { RemotionRiveCanvasAlignment, RemotionRiveCanvasFit } from './map-enums.js';
 type assetLoadCallback = (asset: FileAsset, bytes: Uint8Array) => boolean;
 type onLoadCallback = (file: File) => void;
@@ -17,7 +17,7 @@ type RemotionRiveCanvasOwnProps = {
     readonly style?: React.CSSProperties;
     readonly effects?: EffectsProp;
 };
-export type RemotionRiveCanvasProps = RemotionRiveCanvasOwnProps & InteractiveBaseProps & InteractiveCropProps;
+export type RemotionRiveCanvasProps = RemotionRiveCanvasOwnProps & InteractiveBaseProps & InteractivePremountProps & InteractiveCropProps;
 export type RiveCanvasRef = {
     getAnimationInstance: () => LinearAnimationInstance | null;
     getArtboard: () => Artboard | null;
@@ -25,5 +25,5 @@ export type RiveCanvasRef = {
     getCanvas: () => RiveCanvas | null;
 };
 export declare const riveCanvasSchema: InteractivitySchema;
-export declare const RemotionRiveCanvas: React.ForwardRefExoticComponent<RemotionRiveCanvasOwnProps & InteractiveBaseProps & InteractiveCropProps & React.RefAttributes<RiveCanvasRef>>;
+export declare const RemotionRiveCanvas: React.ForwardRefExoticComponent<RemotionRiveCanvasOwnProps & InteractiveBaseProps & InteractivePremountProps & InteractiveCropProps & React.RefAttributes<RiveCanvasRef>>;
 export {};

package/dist/cjs/RemotionRiveCanvas.js

@@ -65,6 +65,7 @@ const riveAlignmentVariants = {
 };
 exports.riveCanvasSchema = {
     ...remotion_1.Internals.baseSchema,
+    ...remotion_1.Internals.premountSchema,
     fit: {
         type: 'enum',
         default: 'contain',
@@ -289,21 +290,31 @@ const RemotionRiveCanvasContentForwardRefFunction = ({ src, fit, alignment, artb
     return (jsx_runtime_1.jsx("canvas", { ref: canvasRef, width: width, height: height, className: className, style: canvasStyle }));
 };
 const RemotionRiveCanvasContent = (0, react_1.forwardRef)(RemotionRiveCanvasContentForwardRefFunction);
-const RemotionRiveCanvasInnerForwardRefFunction = ({ src, fit = 'contain', alignment = 'center', artboard, animation, onLoad = null, assetLoader, enableRiveAssetCdn = true, className, style, effects = [], controls, durationInFrames, name, from, trimBefore, freeze, showInTimeline, hidden, cropLeft, cropRight, cropTop, cropBottom, ...props }, ref) => {
+const RemotionRiveCanvasInnerForwardRefFunction = ({ src, fit = 'contain', alignment = 'center', artboard, animation, onLoad = null, assetLoader, enableRiveAssetCdn = true, className, style, effects = [], controls, durationInFrames, name, from, premountFor, postmountFor, styleWhilePremounted, styleWhilePostmounted, trimBefore, playbackRate, freeze, showInTimeline, hidden, cropLeft, cropRight, cropTop, cropBottom, ...props }, ref) => {
     props;
     const memoizedEffectDefinitions = useMemoizedEffectDefinitions(effects);
     const canvasRef = (0, react_1.useRef)(null);
+    const { effectivePremountFor, effectivePostmountFor, freezeFrame, isPremountingOrPostmounting, premountingActive, postmountingActive, 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: 'opacity',
+    });
     const croppedStyle = remotion_1.Internals.useCropStyle({
         cropLeft,
         cropRight,
         cropTop,
         cropBottom,
-        style: style !== null && style !== void 0 ? style : null,
+        style: premountingStyle,
         componentName: '<RemotionRiveCanvas />',
     });
-    return (jsx_runtime_1.jsx(remotion_1.Sequence, { layout: "none", from: from, trimBefore: trimBefore, freeze: freeze, hidden: hidden, showInTimeline: showInTimeline, name: name !== null && name !== void 0 ? name : '<RemotionRiveCanvas>', _remotionInternalDocumentationLink: name === undefined
-            ? 'https://www.remotion.dev/docs/rive/remotionrivecanvas'
-            : undefined, durationInFrames: durationInFrames, controls: controls, _remotionInternalEffects: memoizedEffectDefinitions, outlineRef: canvasRef, ...props, children: jsx_runtime_1.jsx(RemotionRiveCanvasContent, { ref: ref, src: src, fit: fit, alignment: alignment, artboard: artboard, animation: animation, onLoad: onLoad, assetLoader: assetLoader, enableRiveAssetCdn: enableRiveAssetCdn, className: className, style: croppedStyle !== null && croppedStyle !== void 0 ? croppedStyle : undefined, effects: effects, controls: controls, canvasRef: canvasRef }) }));
+    return (jsx_runtime_1.jsx(remotion_1.Freeze, { frame: freezeFrame, active: isPremountingOrPostmounting, children: jsx_runtime_1.jsx(remotion_1.Sequence, { layout: "none", from: from, trimBefore: trimBefore, playbackRate: playbackRate, freeze: freeze, hidden: hidden, showInTimeline: showInTimeline, name: name !== null && name !== void 0 ? name : '<RemotionRiveCanvas>', _remotionInternalDocumentationLink: name === undefined
+                ? 'https://www.remotion.dev/docs/rive/remotionrivecanvas'
+                : undefined, durationInFrames: durationInFrames, controls: controls, _remotionInternalEffects: memoizedEffectDefinitions, outlineRef: canvasRef, ...props, _remotionInternalPremountDisplay: effectivePremountFor || null, _remotionInternalPostmountDisplay: effectivePostmountFor || null, _remotionInternalIsPremounting: premountingActive, _remotionInternalIsPostmounting: postmountingActive, children: jsx_runtime_1.jsx(RemotionRiveCanvasContent, { ref: ref, src: src, fit: fit, alignment: alignment, artboard: artboard, animation: animation, onLoad: onLoad, assetLoader: assetLoader, enableRiveAssetCdn: enableRiveAssetCdn, className: className, style: croppedStyle !== null && croppedStyle !== void 0 ? croppedStyle : undefined, effects: effects, controls: controls, canvasRef: canvasRef }) }) }));
 };
 const RemotionRiveCanvasInner = (0, react_1.forwardRef)(RemotionRiveCanvasInnerForwardRefFunction);
 exports.RemotionRiveCanvas = remotion_1.Interactive.withSchema({

package/dist/esm/index.mjs

@@ -9,9 +9,10 @@ import React, {
   useState
 } from "react";
 import {
+  Freeze,
+  Sequence,
   Internals,
   Interactive,
-  Sequence,
   useCurrentFrame,
   useDelayRender,
   useVideoConfig
@@ -103,6 +104,7 @@ var riveAlignmentVariants = {
 };
 var riveCanvasSchema = {
   ...Internals.baseSchema,
+  ...Internals.premountSchema,
   fit: {
     type: "enum",
     default: "contain",
@@ -329,7 +331,12 @@ var RemotionRiveCanvasInnerForwardRefFunction = ({
   durationInFrames,
   name,
   from,
+  premountFor,
+  postmountFor,
+  styleWhilePremounted,
+  styleWhilePostmounted,
   trimBefore,
+  playbackRate,
   freeze,
   showInTimeline,
   hidden,
@@ -341,43 +348,70 @@ var RemotionRiveCanvasInnerForwardRefFunction = ({
 }, ref) => {
   const memoizedEffectDefinitions = useMemoizedEffectDefinitions(effects);
   const canvasRef = useRef(null);
+  const {
+    effectivePremountFor,
+    effectivePostmountFor,
+    freezeFrame,
+    isPremountingOrPostmounting,
+    premountingActive,
+    postmountingActive,
+    premountingStyle
+  } = Internals.usePremounting({
+    from: from ?? 0,
+    durationInFrames: durationInFrames ?? Infinity,
+    premountFor: premountFor ?? null,
+    postmountFor: postmountFor ?? null,
+    style: style ?? null,
+    styleWhilePremounted: styleWhilePremounted ?? null,
+    styleWhilePostmounted: styleWhilePostmounted ?? null,
+    hideWhilePremounted: "opacity"
+  });
   const croppedStyle = Internals.useCropStyle({
     cropLeft,
     cropRight,
     cropTop,
     cropBottom,
-    style: style ?? null,
+    style: premountingStyle,
     componentName: "<RemotionRiveCanvas />"
   });
-  return /* @__PURE__ */ jsx(Sequence, {
-    layout: "none",
-    from,
-    trimBefore,
-    freeze,
-    hidden,
-    showInTimeline,
-    name: name ?? "<RemotionRiveCanvas>",
-    _remotionInternalDocumentationLink: name === undefined ? "https://www.remotion.dev/docs/rive/remotionrivecanvas" : undefined,
-    durationInFrames,
-    controls,
-    _remotionInternalEffects: memoizedEffectDefinitions,
-    outlineRef: canvasRef,
-    ...props,
-    children: /* @__PURE__ */ jsx(RemotionRiveCanvasContent, {
-      ref,
-      src,
-      fit,
-      alignment,
-      artboard,
-      animation,
-      onLoad,
-      assetLoader,
-      enableRiveAssetCdn,
-      className,
-      style: croppedStyle ?? undefined,
-      effects,
+  return /* @__PURE__ */ jsx(Freeze, {
+    frame: freezeFrame,
+    active: isPremountingOrPostmounting,
+    children: /* @__PURE__ */ jsx(Sequence, {
+      layout: "none",
+      from,
+      trimBefore,
+      playbackRate,
+      freeze,
+      hidden,
+      showInTimeline,
+      name: name ?? "<RemotionRiveCanvas>",
+      _remotionInternalDocumentationLink: name === undefined ? "https://www.remotion.dev/docs/rive/remotionrivecanvas" : undefined,
+      durationInFrames,
       controls,
-      canvasRef
+      _remotionInternalEffects: memoizedEffectDefinitions,
+      outlineRef: canvasRef,
+      ...props,
+      _remotionInternalPremountDisplay: effectivePremountFor || null,
+      _remotionInternalPostmountDisplay: effectivePostmountFor || null,
+      _remotionInternalIsPremounting: premountingActive,
+      _remotionInternalIsPostmounting: postmountingActive,
+      children: /* @__PURE__ */ jsx(RemotionRiveCanvasContent, {
+        ref,
+        src,
+        fit,
+        alignment,
+        artboard,
+        animation,
+        onLoad,
+        assetLoader,
+        enableRiveAssetCdn,
+        className,
+        style: croppedStyle ?? undefined,
+        effects,
+        controls,
+        canvasRef
+      })
     })
   });
 };

package/package.json

@@ -3,7 +3,7 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/rive"
 	},
 	"name": "@remotion/rive",
-	"version": "4.0.526",
+	"version": "4.0.528",
 	"description": "Embed Rive animations in a Remotion video",
 	"main": "dist/cjs/index.js",
 	"types": "dist/cjs/index.d.ts",
@@ -23,7 +23,7 @@
 	"license": "See LICENSE.md",
 	"dependencies": {
 		"@rive-app/canvas-advanced": "2.31.5",
-		"remotion": "4.0.526"
+		"remotion": "4.0.528"
 	},
 	"peerDependencies": {
 		"react": ">=18.2.0",
@@ -32,7 +32,7 @@
 	"devDependencies": {
 		"react": "19.2.3",
 		"react-dom": "19.2.3",
-		"@remotion/eslint-config-internal": "4.0.526",
+		"@remotion/eslint-config-internal": "4.0.528",
 		"eslint": "9.19.0",
 		"@typescript/native-preview": "7.0.0-dev.20260217.1"
 	},