@remotion/rive 4.0.535 → 4.0.536
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import type { Artboard, CanvasRenderer, File, FileAsset, LinearAnimationInstance, RiveCanvas } from '@rive-app/canvas-advanced';
|
|
2
2
|
import React from 'react';
|
|
3
|
-
import type { EffectsProp, InteractiveBaseProps, InteractivePremountProps, InteractiveCropProps, InteractivitySchema } from 'remotion';
|
|
3
|
+
import type { EffectsProp, EffectsOutputSize, InteractiveBaseProps, InteractivePremountProps, InteractiveCropProps, InteractivitySchema } from 'remotion';
|
|
4
4
|
import type { RemotionRiveCanvasAlignment, RemotionRiveCanvasFit } from './map-enums.js';
|
|
5
5
|
type assetLoadCallback = (asset: FileAsset, bytes: Uint8Array) => boolean;
|
|
6
6
|
type onLoadCallback = (file: File) => void;
|
|
@@ -16,6 +16,7 @@ type RemotionRiveCanvasOwnProps = {
|
|
|
16
16
|
readonly className?: string;
|
|
17
17
|
readonly style?: React.CSSProperties;
|
|
18
18
|
readonly effects?: EffectsProp;
|
|
19
|
+
readonly effectsOutputSize?: EffectsOutputSize;
|
|
19
20
|
};
|
|
20
21
|
export type RemotionRiveCanvasProps = RemotionRiveCanvasOwnProps & InteractiveBaseProps & InteractivePremountProps & InteractiveCropProps;
|
|
21
22
|
export type RiveCanvasRef = {
|
|
@@ -51,7 +51,7 @@ exports.riveCanvasSchema = {
|
|
|
51
51
|
...remotion_1.Interactive.borderRadiusSchema,
|
|
52
52
|
...remotion_1.Interactive.cropSchema,
|
|
53
53
|
};
|
|
54
|
-
const RemotionRiveCanvasContentForwardRefFunction = ({ src, fit, alignment, artboard: artboardName, animation: animationIndex, onLoad = null, assetLoader, enableRiveAssetCdn, className, style, effects, controls, canvasRef, }, ref) => {
|
|
54
|
+
const RemotionRiveCanvasContentForwardRefFunction = ({ src, fit, alignment, artboard: artboardName, animation: animationIndex, onLoad = null, assetLoader, enableRiveAssetCdn, className, style, effects, effectsOutputSize, controls, canvasRef, }, ref) => {
|
|
55
55
|
var _a, _b, _c;
|
|
56
56
|
const { width, fps, height } = (0, remotion_1.useVideoConfig)();
|
|
57
57
|
const frame = (0, remotion_1.useCurrentFrame)();
|
|
@@ -68,7 +68,7 @@ const RemotionRiveCanvasContentForwardRefFunction = ({ src, fit, alignment, artb
|
|
|
68
68
|
}
|
|
69
69
|
return document.createElement('canvas');
|
|
70
70
|
}, []);
|
|
71
|
-
const chainState = useEffectChainState();
|
|
71
|
+
const chainState = useEffectChainState(effectsOutputSize);
|
|
72
72
|
const memoizedEffects = useMemoizedEffects({
|
|
73
73
|
effects,
|
|
74
74
|
overrideId: (_b = controls === null || controls === void 0 ? void 0 : controls.overrideId) !== null && _b !== void 0 ? _b : null,
|
|
@@ -286,7 +286,7 @@ const RemotionRiveCanvasContentForwardRefFunction = ({ src, fit, alignment, artb
|
|
|
286
286
|
return (jsx_runtime_1.jsx("canvas", { ref: canvasRef, width: width, height: height, className: className, style: canvasStyle }));
|
|
287
287
|
};
|
|
288
288
|
const RemotionRiveCanvasContent = (0, react_1.forwardRef)(RemotionRiveCanvasContentForwardRefFunction);
|
|
289
|
-
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, loop, freeze, showInTimeline, hidden, cropLeft, cropRight, cropTop, cropBottom, ...props }, ref) => {
|
|
289
|
+
const RemotionRiveCanvasInnerForwardRefFunction = ({ src, fit = 'contain', alignment = 'center', artboard, animation, onLoad = null, assetLoader, enableRiveAssetCdn = true, className, style, effects = [], effectsOutputSize, controls, durationInFrames, name, from, premountFor, postmountFor, styleWhilePremounted, styleWhilePostmounted, trimBefore, playbackRate, loop, freeze, showInTimeline, hidden, cropLeft, cropRight, cropTop, cropBottom, ...props }, ref) => {
|
|
290
290
|
props;
|
|
291
291
|
const memoizedEffectDefinitions = useMemoizedEffectDefinitions(effects);
|
|
292
292
|
const canvasRef = (0, react_1.useRef)(null);
|
|
@@ -312,7 +312,7 @@ const RemotionRiveCanvasInnerForwardRefFunction = ({ src, fit = 'contain', align
|
|
|
312
312
|
style: premountingStyle,
|
|
313
313
|
componentName: '<RemotionRiveCanvas />',
|
|
314
314
|
});
|
|
315
|
-
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, loop: loop, freeze: freeze, hidden: hidden, showInTimeline: showInTimeline, name: name !== null && name !== void 0 ? name : '<RemotionRiveCanvas>', _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/rive/remotionrivecanvas", durationInFrames: durationInFrames, controls: controls, _remotionInternalEffects: memoizedEffectDefinitions, ...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 }) }) }));
|
|
315
|
+
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, loop: loop, freeze: freeze, hidden: hidden, showInTimeline: showInTimeline, name: name !== null && name !== void 0 ? name : '<RemotionRiveCanvas>', _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/rive/remotionrivecanvas", durationInFrames: durationInFrames, controls: controls, _remotionInternalEffects: memoizedEffectDefinitions, ...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, effectsOutputSize: effectsOutputSize !== null && effectsOutputSize !== void 0 ? effectsOutputSize : null, controls: controls, canvasRef: canvasRef }) }) }));
|
|
316
316
|
};
|
|
317
317
|
const RemotionRiveCanvasInner = (0, react_1.forwardRef)(RemotionRiveCanvasInnerForwardRefFunction);
|
|
318
318
|
exports.RemotionRiveCanvas = remotion_1.Interactive.withSchema({
|
package/dist/esm/index.mjs
CHANGED
|
@@ -136,6 +136,7 @@ var RemotionRiveCanvasContentForwardRefFunction = ({
|
|
|
136
136
|
className,
|
|
137
137
|
style,
|
|
138
138
|
effects,
|
|
139
|
+
effectsOutputSize,
|
|
139
140
|
controls,
|
|
140
141
|
canvasRef
|
|
141
142
|
}, ref) => {
|
|
@@ -152,7 +153,7 @@ var RemotionRiveCanvasContentForwardRefFunction = ({
|
|
|
152
153
|
}
|
|
153
154
|
return document.createElement("canvas");
|
|
154
155
|
}, []);
|
|
155
|
-
const chainState = useEffectChainState();
|
|
156
|
+
const chainState = useEffectChainState(effectsOutputSize);
|
|
156
157
|
const memoizedEffects = useMemoizedEffects({
|
|
157
158
|
effects,
|
|
158
159
|
overrideId: controls?.overrideId ?? null,
|
|
@@ -357,6 +358,7 @@ var RemotionRiveCanvasInnerForwardRefFunction = ({
|
|
|
357
358
|
className,
|
|
358
359
|
style,
|
|
359
360
|
effects = [],
|
|
361
|
+
effectsOutputSize,
|
|
360
362
|
controls,
|
|
361
363
|
durationInFrames,
|
|
362
364
|
name,
|
|
@@ -444,6 +446,7 @@ var RemotionRiveCanvasInnerForwardRefFunction = ({
|
|
|
444
446
|
className,
|
|
445
447
|
style: croppedStyle ?? undefined,
|
|
446
448
|
effects,
|
|
449
|
+
effectsOutputSize: effectsOutputSize ?? null,
|
|
447
450
|
controls,
|
|
448
451
|
canvasRef
|
|
449
452
|
})
|
package/package.json
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
"url": "https://github.com/remotion-dev/remotion/tree/main/packages/rive"
|
|
4
4
|
},
|
|
5
5
|
"name": "@remotion/rive",
|
|
6
|
-
"version": "4.0.
|
|
6
|
+
"version": "4.0.536",
|
|
7
7
|
"description": "Embed Rive animations in a Remotion video",
|
|
8
8
|
"main": "dist/cjs/index.js",
|
|
9
9
|
"types": "dist/cjs/index.d.ts",
|
|
@@ -23,7 +23,7 @@
|
|
|
23
23
|
"license": "See LICENSE.md",
|
|
24
24
|
"dependencies": {
|
|
25
25
|
"@rive-app/canvas-advanced": "2.31.5",
|
|
26
|
-
"remotion": "4.0.
|
|
26
|
+
"remotion": "4.0.536"
|
|
27
27
|
},
|
|
28
28
|
"peerDependencies": {
|
|
29
29
|
"react": ">=18.2.0",
|
|
@@ -32,7 +32,7 @@
|
|
|
32
32
|
"devDependencies": {
|
|
33
33
|
"react": "19.2.3",
|
|
34
34
|
"react-dom": "19.2.3",
|
|
35
|
-
"@remotion/eslint-config-internal": "4.0.
|
|
35
|
+
"@remotion/eslint-config-internal": "4.0.536",
|
|
36
36
|
"eslint": "9.19.0",
|
|
37
37
|
"@typescript/native-preview": "7.0.0-dev.20260217.1"
|
|
38
38
|
},
|