@remotion/rive 4.0.499 → 4.0.500

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 } from 'remotion';
+import type { EffectsProp, InteractiveBaseProps, 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,12 +17,13 @@ type RemotionRiveCanvasOwnProps = {
     readonly style?: React.CSSProperties;
     readonly effects?: EffectsProp;
 };
-export type RemotionRiveCanvasProps = RemotionRiveCanvasOwnProps & InteractiveBaseProps;
+export type RemotionRiveCanvasProps = RemotionRiveCanvasOwnProps & InteractiveBaseProps & InteractiveCropProps;
 export type RiveCanvasRef = {
     getAnimationInstance: () => LinearAnimationInstance | null;
     getArtboard: () => Artboard | null;
     getRenderer: () => CanvasRenderer | null;
     getCanvas: () => RiveCanvas | null;
 };
-export declare const RemotionRiveCanvas: React.ForwardRefExoticComponent<RemotionRiveCanvasOwnProps & InteractiveBaseProps & React.RefAttributes<RiveCanvasRef>>;
+export declare const riveCanvasSchema: InteractivitySchema;
+export declare const RemotionRiveCanvas: React.ForwardRefExoticComponent<RemotionRiveCanvasOwnProps & InteractiveBaseProps & InteractiveCropProps & React.RefAttributes<RiveCanvasRef>>;
 export {};

package/dist/cjs/RemotionRiveCanvas.js

@@ -36,7 +36,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.RemotionRiveCanvas = void 0;
+exports.RemotionRiveCanvas = exports.riveCanvasSchema = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const canvas_advanced_1 = __importDefault(require("@rive-app/canvas-advanced"));
 const react_1 = __importStar(require("react"));
@@ -63,7 +63,7 @@ const riveAlignmentVariants = {
     'top-left': {},
     'top-right': {},
 };
-const riveCanvasSchema = {
+exports.riveCanvasSchema = {
     ...remotion_1.Internals.baseSchema,
     fit: {
         type: 'enum',
@@ -80,12 +80,12 @@ const riveCanvasSchema = {
     ...remotion_1.Internals.transformSchema,
     ...remotion_1.Interactive.backgroundSchema,
     ...remotion_1.Interactive.borderSchema,
+    ...remotion_1.Interactive.cropSchema,
 };
-const RemotionRiveCanvasContentForwardRefFunction = ({ src, fit, alignment, artboard: artboardName, animation: animationIndex, onLoad = null, assetLoader, enableRiveAssetCdn, className, style, effects, controls, }, ref) => {
+const RemotionRiveCanvasContentForwardRefFunction = ({ src, fit, alignment, artboard: artboardName, animation: animationIndex, onLoad = null, assetLoader, enableRiveAssetCdn, className, style, effects, controls, canvasRef, }, ref) => {
     var _a;
     const { width, fps, height } = (0, remotion_1.useVideoConfig)();
     const frame = (0, remotion_1.useCurrentFrame)();
-    const canvas = (0, react_1.useRef)(null);
     const [riveCanvasInstance, setRiveCanvas] = (0, react_1.useState)(null);
     const [err, setError] = (0, react_1.useState)(null);
     const { delayRender, continueRender } = (0, remotion_1.useDelayRender)();
@@ -198,7 +198,7 @@ const RemotionRiveCanvasContentForwardRefFunction = ({ src, fit, alignment, artb
         if (!riveCanvasInstance || !rive) {
             return;
         }
-        const outputCanvas = canvas.current;
+        const outputCanvas = canvasRef.current;
         if (!outputCanvas || !sourceCanvas) {
             return;
         }
@@ -278,28 +278,38 @@ const RemotionRiveCanvasContentForwardRefFunction = ({ src, fit, alignment, artb
         delayRender,
         continueRender,
         src,
+        canvasRef,
     ]);
     const canvasStyle = (0, react_1.useMemo)(() => ({
         height,
         width,
         ...style,
     }), [height, style, width]);
-    return (jsx_runtime_1.jsx("canvas", { ref: canvas, width: width, height: height, className: className, style: canvasStyle }));
+    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, ...props }, ref) => {
+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) => {
     props;
     const memoizedEffectDefinitions = useMemoizedEffectDefinitions(effects);
+    const canvasRef = (0, react_1.useRef)(null);
+    const croppedStyle = remotion_1.Internals.useCropStyle({
+        cropLeft,
+        cropRight,
+        cropTop,
+        cropBottom,
+        style: style !== null && style !== void 0 ? style : null,
+        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, ...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: style, effects: effects, controls: controls }) }));
+            : 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 }) }));
 };
 const RemotionRiveCanvasInner = (0, react_1.forwardRef)(RemotionRiveCanvasInnerForwardRefFunction);
 exports.RemotionRiveCanvas = remotion_1.Interactive.withSchema({
     Component: RemotionRiveCanvasInner,
     componentName: '<RemotionRiveCanvas>',
     componentIdentity: 'dev.remotion.rive.RemotionRiveCanvas',
-    schema: riveCanvasSchema,
+    schema: exports.riveCanvasSchema,
     supportsEffects: true,
 });
 exports.RemotionRiveCanvas.displayName =

package/dist/esm/index.mjs

@@ -117,7 +117,8 @@ var riveCanvasSchema = {
   },
   ...Internals.transformSchema,
   ...Interactive.backgroundSchema,
-  ...Interactive.borderSchema
+  ...Interactive.borderSchema,
+  ...Interactive.cropSchema
 };
 var RemotionRiveCanvasContentForwardRefFunction = ({
   src,
@@ -131,11 +132,11 @@ var RemotionRiveCanvasContentForwardRefFunction = ({
   className,
   style,
   effects,
-  controls
+  controls,
+  canvasRef
 }, ref) => {
   const { width, fps, height } = useVideoConfig();
   const frame = useCurrentFrame();
-  const canvas = useRef(null);
   const [riveCanvasInstance, setRiveCanvas] = useState(null);
   const [err, setError] = useState(null);
   const { delayRender, continueRender } = useDelayRender();
@@ -226,7 +227,7 @@ var RemotionRiveCanvasContentForwardRefFunction = ({
     if (!riveCanvasInstance || !rive) {
       return;
     }
-    const outputCanvas = canvas.current;
+    const outputCanvas = canvasRef.current;
     if (!outputCanvas || !sourceCanvas) {
       return;
     }
@@ -294,7 +295,8 @@ var RemotionRiveCanvasContentForwardRefFunction = ({
     chainState,
     delayRender,
     continueRender,
-    src
+    src,
+    canvasRef
   ]);
   const canvasStyle = useMemo(() => ({
     height,
@@ -302,7 +304,7 @@ var RemotionRiveCanvasContentForwardRefFunction = ({
     ...style
   }), [height, style, width]);
   return /* @__PURE__ */ jsx("canvas", {
-    ref: canvas,
+    ref: canvasRef,
     width,
     height,
     className,
@@ -330,9 +332,22 @@ var RemotionRiveCanvasInnerForwardRefFunction = ({
   freeze,
   showInTimeline,
   hidden,
+  cropLeft,
+  cropRight,
+  cropTop,
+  cropBottom,
   ...props
 }, ref) => {
   const memoizedEffectDefinitions = useMemoizedEffectDefinitions(effects);
+  const canvasRef = useRef(null);
+  const croppedStyle = Internals.useCropStyle({
+    cropLeft,
+    cropRight,
+    cropTop,
+    cropBottom,
+    style: style ?? null,
+    componentName: "<RemotionRiveCanvas />"
+  });
   return /* @__PURE__ */ jsx(Sequence, {
     layout: "none",
     from,
@@ -345,6 +360,7 @@ var RemotionRiveCanvasInnerForwardRefFunction = ({
     durationInFrames,
     controls,
     _remotionInternalEffects: memoizedEffectDefinitions,
+    outlineRef: canvasRef,
     ...props,
     children: /* @__PURE__ */ jsx(RemotionRiveCanvasContent, {
       ref,
@@ -357,9 +373,10 @@ var RemotionRiveCanvasInnerForwardRefFunction = ({
       assetLoader,
       enableRiveAssetCdn,
       className,
-      style,
+      style: croppedStyle ?? undefined,
       effects,
-      controls
+      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.499",
+	"version": "4.0.500",
 	"description": "Embed Rive animations in a Remotion video",
 	"main": "dist/cjs/index.js",
 	"types": "dist/cjs/index.d.ts",
@@ -12,6 +12,7 @@
 		"formatting": "oxfmt src --check",
 		"format": "oxfmt src",
 		"lint": "eslint src",
+		"test": "bun test src/test",
 		"make": "tsgo -d && bun --env-file=../.env.bundle bundle.ts"
 	},
 	"bugs": {
@@ -22,7 +23,7 @@
 	"license": "See LICENSE.md",
 	"dependencies": {
 		"@rive-app/canvas-advanced": "2.31.5",
-		"remotion": "4.0.499"
+		"remotion": "4.0.500"
 	},
 	"peerDependencies": {
 		"react": ">=18.2.0",
@@ -31,7 +32,7 @@
 	"devDependencies": {
 		"react": "19.2.3",
 		"react-dom": "19.2.3",
-		"@remotion/eslint-config-internal": "4.0.499",
+		"@remotion/eslint-config-internal": "4.0.500",
 		"eslint": "9.19.0",
 		"@typescript/native-preview": "7.0.0-dev.20260217.1"
 	},