@remotion/shapes 4.0.529 → 4.0.531

package/dist/components/render-svg.d.ts

@@ -10,7 +10,7 @@ export type AllShapesProps = Omit<React.SVGProps<SVGPathElement>, 'width' | 'hei
     readonly pathStyle?: React.CSSProperties;
     readonly pixelDensity?: HtmlInCanvasPixelDensity;
 };
-export declare const RenderSvg: ({ defaultName, documentationLink, width, height, path, style, pathStyle, transformOrigin, debug, effects, instructions, pixelDensity, durationInFrames, from, premountFor, postmountFor, styleWhilePremounted, styleWhilePostmounted, trimBefore, playbackRate, freeze, hidden, name, showInTimeline, controls, ...props }: {
+export declare const RenderSvg: ({ defaultName, documentationLink, width, height, path, style, pathStyle, transformOrigin, debug, effects, instructions, pixelDensity, durationInFrames, from, premountFor, postmountFor, styleWhilePremounted, styleWhilePostmounted, trimBefore, playbackRate, loop, freeze, hidden, name, showInTimeline, controls, ...props }: {
     readonly defaultName: string;
     readonly documentationLink: string;
     readonly width: number;

package/dist/components/render-svg.js

@@ -40,10 +40,14 @@ const react_dom_1 = require("react-dom");
 const remotion_1 = require("remotion");
 const does_react_support_canary_1 = require("../utils/does-react-support-canary");
 const HtmlInCanvasWithPrivateProps = remotion_1.HtmlInCanvas;
-const RenderSvgWithTiming = ({ premountFor, postmountFor, styleWhilePremounted, styleWhilePostmounted, from, trimBefore, playbackRate, freeze, hidden, showInTimeline, controls, durationInFrames, name, defaultName, outlineRef, documentationLink, memoizedEffectDefinitions, content, actualStyle, }) => {
+const RenderSvgWithTiming = ({ premountFor, postmountFor, styleWhilePremounted, styleWhilePostmounted, from, trimBefore, playbackRate, loop, freeze, hidden, showInTimeline, controls, durationInFrames, name, defaultName, documentationLink, memoizedEffectDefinitions, content, actualStyle, }) => {
     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,
+        durationInFrames: remotion_1.Internals.resolveSequenceDuration({
+            durationInFrames,
+            playbackRate,
+            loop,
+        }),
         premountFor: premountFor !== null && premountFor !== void 0 ? premountFor : null,
         postmountFor: postmountFor !== null && postmountFor !== void 0 ? postmountFor : null,
         style: actualStyle,
@@ -51,9 +55,9 @@ const RenderSvgWithTiming = ({ premountFor, postmountFor, styleWhilePremounted,
         styleWhilePostmounted: styleWhilePostmounted !== null && styleWhilePostmounted !== void 0 ? styleWhilePostmounted : null,
         hideWhilePremounted: 'opacity',
     });
-    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, controls: controls, _remotionInternalEffects: memoizedEffectDefinitions, durationInFrames: durationInFrames, name: name !== null && name !== void 0 ? name : defaultName, outlineRef: outlineRef, _remotionInternalDocumentationLink: name === undefined ? documentationLink : undefined, _remotionInternalPremountDisplay: effectivePremountFor || null, _remotionInternalPostmountDisplay: effectivePostmountFor || null, _remotionInternalIsPremounting: premountingActive, _remotionInternalIsPostmounting: postmountingActive, children: react_1.default.cloneElement(content, { style: premountingStyle !== null && premountingStyle !== void 0 ? premountingStyle : undefined }) }) }));
+    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, controls: controls, _remotionInternalEffects: memoizedEffectDefinitions, durationInFrames: durationInFrames, name: name !== null && name !== void 0 ? name : defaultName, _remotionInternalDocumentationLink: name === undefined ? documentationLink : undefined, _remotionInternalPremountDisplay: effectivePremountFor || null, _remotionInternalPostmountDisplay: effectivePostmountFor || null, _remotionInternalIsPremounting: premountingActive, _remotionInternalIsPostmounting: postmountingActive, children: react_1.default.cloneElement(content, { style: premountingStyle !== null && premountingStyle !== void 0 ? premountingStyle : undefined }) }) }));
 };
-const RenderSvg = ({ defaultName, documentationLink, width, height, path, style, pathStyle, transformOrigin, debug, effects = [], instructions, pixelDensity, durationInFrames, from, premountFor, postmountFor, styleWhilePremounted, styleWhilePostmounted, trimBefore, playbackRate, freeze, hidden, name, showInTimeline, controls, ...props }) => {
+const RenderSvg = ({ defaultName, documentationLink, width, height, path, style, pathStyle, transformOrigin, debug, effects = [], instructions, pixelDensity, durationInFrames, from, premountFor, postmountFor, styleWhilePremounted, styleWhilePostmounted, trimBefore, playbackRate, loop, freeze, hidden, name, showInTimeline, controls, ...props }) => {
     const actualStyle = (0, react_1.useMemo)(() => {
         return {
             overflow: 'visible',
@@ -66,17 +70,10 @@ const RenderSvg = ({ defaultName, documentationLink, width, height, path, style,
             ...(pathStyle !== null && pathStyle !== void 0 ? pathStyle : {}),
         };
     }, [pathStyle]);
-    const outlineRef = (0, react_1.useRef)(null);
-    const setSvgRef = (0, react_1.useCallback)((node) => {
-        outlineRef.current = node;
-    }, []);
-    const setCanvasRef = (0, react_1.useCallback)((canvas) => {
-        outlineRef.current = canvas;
-    }, []);
     const memoizedEffectDefinitions = remotion_1.Internals.useMemoizedEffectDefinitions(effects);
     const videoConfig = remotion_1.Internals.useUnsafeVideoConfig();
     const reactSupportsTransformOrigin = (0, does_react_support_canary_1.doesReactSupportTransformOriginProperty)(react_dom_1.version);
-    const svg = (jsx_runtime_1.jsxs("svg", { ref: effects.length === 0 || !videoConfig ? setSvgRef : undefined, width: width, height: height, viewBox: `0 0 ${width} ${height}`, xmlns: "http://www.w3.org/2000/svg", style: effects.length === 0 || !videoConfig
+    const svg = (jsx_runtime_1.jsxs("svg", { width: width, height: height, viewBox: `0 0 ${width} ${height}`, xmlns: "http://www.w3.org/2000/svg", style: effects.length === 0 || !videoConfig
             ? actualStyle
             : { overflow: 'visible' }, children: [
             jsx_runtime_1.jsx("path", { ...(reactSupportsTransformOrigin
@@ -116,10 +113,10 @@ const RenderSvg = ({ defaultName, documentationLink, width, height, path, style,
                     return null;
                 })
                 : null] }));
-    const content = effects.length === 0 ? (svg) : (jsx_runtime_1.jsx(HtmlInCanvasWithPrivateProps, { ref: setCanvasRef, width: Math.ceil(width), height: Math.ceil(height), effects: effects, pixelDensity: pixelDensity, showInTimeline: false, style: actualStyle, controls: controls, children: svg }));
+    const content = effects.length === 0 ? (svg) : (jsx_runtime_1.jsx(HtmlInCanvasWithPrivateProps, { width: Math.ceil(width), height: Math.ceil(height), effects: effects, pixelDensity: pixelDensity, showInTimeline: false, style: actualStyle, controls: controls, children: svg }));
     if (!videoConfig) {
         return svg;
     }
-    return (jsx_runtime_1.jsx(RenderSvgWithTiming, { premountFor: premountFor, postmountFor: postmountFor, styleWhilePremounted: styleWhilePremounted, styleWhilePostmounted: styleWhilePostmounted, from: from, trimBefore: trimBefore, playbackRate: playbackRate, freeze: freeze, hidden: hidden, showInTimeline: showInTimeline, controls: controls, durationInFrames: durationInFrames, name: name, defaultName: defaultName, outlineRef: outlineRef, documentationLink: documentationLink, memoizedEffectDefinitions: memoizedEffectDefinitions, content: content, actualStyle: actualStyle }));
+    return (jsx_runtime_1.jsx(RenderSvgWithTiming, { premountFor: premountFor, postmountFor: postmountFor, styleWhilePremounted: styleWhilePremounted, styleWhilePostmounted: styleWhilePostmounted, from: from, trimBefore: trimBefore, playbackRate: playbackRate, loop: loop, freeze: freeze, hidden: hidden, showInTimeline: showInTimeline, controls: controls, durationInFrames: durationInFrames, name: name, defaultName: defaultName, documentationLink: documentationLink, memoizedEffectDefinitions: memoizedEffectDefinitions, content: content, actualStyle: actualStyle }));
 };
 exports.RenderSvg = RenderSvg;

package/dist/esm/index.mjs

@@ -140,7 +140,7 @@ var makeArrow = ({
 };
 
 // src/components/render-svg.tsx
-import React, { useCallback, useMemo, useRef } from "react";
+import React, { useMemo } from "react";
 import { version } from "react-dom";
 import {
   HtmlInCanvas,
@@ -170,6 +170,7 @@ var RenderSvgWithTiming = ({
   from,
   trimBefore,
   playbackRate,
+  loop,
   freeze,
   hidden,
   showInTimeline,
@@ -177,7 +178,6 @@ var RenderSvgWithTiming = ({
   durationInFrames,
   name,
   defaultName,
-  outlineRef,
   documentationLink,
   memoizedEffectDefinitions,
   content,
@@ -193,7 +193,11 @@ var RenderSvgWithTiming = ({
     premountingStyle
   } = Internals.usePremounting({
     from: from ?? 0,
-    durationInFrames: durationInFrames ?? Infinity,
+    durationInFrames: Internals.resolveSequenceDuration({
+      durationInFrames,
+      playbackRate,
+      loop
+    }),
     premountFor: premountFor ?? null,
     postmountFor: postmountFor ?? null,
     style: actualStyle,
@@ -209,6 +213,7 @@ var RenderSvgWithTiming = ({
       from,
       trimBefore,
       playbackRate,
+      loop,
       freeze,
       hidden,
       showInTimeline,
@@ -216,7 +221,6 @@ var RenderSvgWithTiming = ({
       _remotionInternalEffects: memoizedEffectDefinitions,
       durationInFrames,
       name: name ?? defaultName,
-      outlineRef,
       _remotionInternalDocumentationLink: name === undefined ? documentationLink : undefined,
       _remotionInternalPremountDisplay: effectivePremountFor || null,
       _remotionInternalPostmountDisplay: effectivePostmountFor || null,
@@ -247,6 +251,7 @@ var RenderSvg = ({
   styleWhilePostmounted,
   trimBefore,
   playbackRate,
+  loop,
   freeze,
   hidden,
   name,
@@ -266,18 +271,10 @@ var RenderSvg = ({
       ...pathStyle ?? {}
     };
   }, [pathStyle]);
-  const outlineRef = useRef(null);
-  const setSvgRef = useCallback((node) => {
-    outlineRef.current = node;
-  }, []);
-  const setCanvasRef = useCallback((canvas) => {
-    outlineRef.current = canvas;
-  }, []);
   const memoizedEffectDefinitions = Internals.useMemoizedEffectDefinitions(effects);
   const videoConfig = Internals.useUnsafeVideoConfig();
   const reactSupportsTransformOrigin = doesReactSupportTransformOriginProperty(version);
   const svg = /* @__PURE__ */ jsxs("svg", {
-    ref: effects.length === 0 || !videoConfig ? setSvgRef : undefined,
     width,
     height,
     viewBox: `0 0 ${width} ${height}`,
@@ -338,7 +335,6 @@ var RenderSvg = ({
     ]
   });
   const content = effects.length === 0 ? svg : /* @__PURE__ */ jsx(HtmlInCanvasWithPrivateProps, {
-    ref: setCanvasRef,
     width: Math.ceil(width),
     height: Math.ceil(height),
     effects,
@@ -359,6 +355,7 @@ var RenderSvg = ({
     from,
     trimBefore,
     playbackRate,
+    loop,
     freeze,
     hidden,
     showInTimeline,
@@ -366,7 +363,6 @@ var RenderSvg = ({
     durationInFrames,
     name,
     defaultName,
-    outlineRef,
     documentationLink,
     memoizedEffectDefinitions,
     content,

package/package.json

@@ -3,7 +3,7 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/shapes"
 	},
 	"name": "@remotion/shapes",
-	"version": "4.0.529",
+	"version": "4.0.531",
 	"description": "Generate SVG shapes",
 	"main": "dist/index.js",
 	"scripts": {
@@ -34,7 +34,7 @@
 		"react": "19.2.3",
 		"react-dom": "19.2.3",
 		"@happy-dom/global-registrator": "14.5.1",
-		"@remotion/eslint-config-internal": "4.0.529",
+		"@remotion/eslint-config-internal": "4.0.531",
 		"eslint": "9.19.0",
 		"@typescript/native-preview": "7.0.0-dev.20260217.1"
 	},
@@ -51,8 +51,8 @@
 		"react-dom": ">=16.8.0"
 	},
 	"dependencies": {
-		"@remotion/paths": "4.0.529",
-		"remotion": "4.0.529"
+		"@remotion/paths": "4.0.531",
+		"remotion": "4.0.531"
 	},
 	"homepage": "https://www.remotion.dev/docs/shapes"
 }