@remotion/studio 4.0.376 → 4.0.377

package/dist/esm/internals.mjs

@@ -17956,6 +17956,7 @@ var label8 = {
 var TriggerWebRender = () => {
   const video = Internals44.useVideo();
   const getCurrentFrame2 = PlayerInternals15.useFrameImperative();
+  const { inFrame, outFrame } = useTimelineInOutFramePosition();
   const { setSelectedModal } = useContext53(ModalsContext);
   const onClick = useCallback89(() => {
     if (!video?.id) {
@@ -17966,9 +17967,18 @@ var TriggerWebRender = () => {
       type: "web-render",
       initialFrame: frame2,
       compositionId: video.id,
-      defaultProps: video.defaultProps
+      defaultProps: video.defaultProps,
+      inFrameMark: inFrame,
+      outFrameMark: outFrame
     });
-  }, [getCurrentFrame2, setSelectedModal, video?.id, video?.defaultProps]);
+  }, [
+    getCurrentFrame2,
+    inFrame,
+    outFrame,
+    setSelectedModal,
+    video?.defaultProps,
+    video?.id
+  ]);
   if (!video) {
     return null;
   }
@@ -48683,41 +48693,31 @@ var calculateTransforms = (element) => {
     nativeTransformOrigin
   };
 };
-var composeCanvas = (canvas, context) => {
-  const { totalMatrix, reset, dimensions, nativeTransformOrigin } = calculateTransforms(canvas);
-  const translateX = nativeTransformOrigin.x + dimensions.left;
-  const translateY = nativeTransformOrigin.y + dimensions.top;
-  const matrix = new DOMMatrix().translate(translateX, translateY).multiply(totalMatrix).translate(-translateX, -translateY);
-  context.setTransform(matrix);
-  context.drawImage(canvas, dimensions.left, dimensions.top, dimensions.width, dimensions.height);
-  context.setTransform(new DOMMatrix);
-  reset();
-};
-var svgToImageBitmap = (svg) => {
-  const {
-    dimensions: svgDimensions,
-    totalMatrix,
-    reset
-  } = calculateTransforms(svg);
+var turnSvgIntoDrawable = (svg) => {
   const originalTransform = svg.style.transform;
   const originalTransformOrigin = svg.style.transformOrigin;
-  svg.style.transform = totalMatrix.toString();
-  svg.style.transformOrigin = "50% 50%";
+  const originalMarginLeft = svg.style.marginLeft;
+  const originalMarginRight = svg.style.marginRight;
+  const originalMarginTop = svg.style.marginTop;
+  const originalMarginBottom = svg.style.marginBottom;
+  svg.style.transform = "none";
+  svg.style.transformOrigin = "";
+  svg.style.marginLeft = "0";
+  svg.style.marginRight = "0";
+  svg.style.marginTop = "0";
+  svg.style.marginBottom = "0";
   const svgData = new XMLSerializer().serializeToString(svg);
+  svg.style.marginLeft = originalMarginLeft;
+  svg.style.marginRight = originalMarginRight;
+  svg.style.marginTop = originalMarginTop;
+  svg.style.marginBottom = originalMarginBottom;
   svg.style.transform = originalTransform;
   svg.style.transformOrigin = originalTransformOrigin;
-  reset();
   return new Promise((resolve, reject) => {
-    const image = new Image(svgDimensions.width, svgDimensions.height);
+    const image = new Image;
     const url2 = `data:image/svg+xml;base64,${btoa(svgData)}`;
     image.onload = function() {
-      resolve({
-        image,
-        width: svgDimensions.width,
-        height: svgDimensions.height,
-        left: svgDimensions.left,
-        top: svgDimensions.top
-      });
+      resolve(image);
     };
     image.onerror = () => {
       reject(new Error("Failed to convert SVG to image"));
@@ -48725,6 +48725,17 @@ var svgToImageBitmap = (svg) => {
     image.src = url2;
   });
 };
+var composeCanvas = async (canvas, context) => {
+  const { totalMatrix, reset, dimensions } = calculateTransforms(canvas);
+  const translateX = dimensions.left + dimensions.width / 2;
+  const translateY = dimensions.top + dimensions.height / 2;
+  const matrix = new DOMMatrix().translate(translateX, translateY).multiply(totalMatrix).translate(-translateX, -translateY);
+  context.setTransform(matrix);
+  const drawable = canvas instanceof SVGSVGElement ? await turnSvgIntoDrawable(canvas) : canvas;
+  context.drawImage(drawable, dimensions.left, dimensions.top, dimensions.width, dimensions.height);
+  context.setTransform(new DOMMatrix);
+  reset();
+};
 var compose = async ({
   composables,
   width: width2,
@@ -48736,14 +48747,7 @@ var compose = async ({
     throw new Error("Could not get context");
   }
   for (const composable of composables) {
-    if (composable.type === "canvas" || composable.type === "img") {
-      composeCanvas(composable.element, context);
-    } else if (composable.type === "svg") {
-      const imageBitmap = await svgToImageBitmap(composable.element);
-      if (imageBitmap) {
-        context.drawImage(imageBitmap.image, imageBitmap.left, imageBitmap.top, imageBitmap.width, imageBitmap.height);
-      }
-    }
+    await composeCanvas(composable.element, context);
   }
   return canvas;
 };
@@ -49760,7 +49764,9 @@ var validateOutnameForStill = ({
 };
 var WebRenderModal = ({
   initialFrame,
-  defaultProps
+  defaultProps,
+  inFrameMark,
+  outFrameMark
 }) => {
   const context = useContext83(ResolvedCompositionContext);
   if (!context) {
@@ -49784,10 +49790,28 @@ var WebRenderModal = ({
   const [videoBitrate, setVideoBitrate] = useState81("high");
   const [hardwareAcceleration, setHardwareAcceleration] = useState81("no-preference");
   const [keyframeIntervalInSeconds, setKeyframeIntervalInSeconds] = useState81(5);
-  const [startFrame, setStartFrame] = useState81(null);
-  const [endFrame, setEndFrame] = useState81(null);
+  const [startFrame, setStartFrame] = useState81(() => inFrameMark ?? null);
+  const [endFrame, setEndFrame] = useState81(() => outFrameMark ?? null);
   const [renderProgress, setRenderProgress] = useState81(null);
   const [transparent, setTransparent] = useState81(false);
+  const finalEndFrame = useMemo132(() => {
+    if (endFrame === null) {
+      return resolvedComposition.durationInFrames - 1;
+    }
+    return Math.max(0, Math.min(resolvedComposition.durationInFrames - 1, endFrame));
+  }, [endFrame, resolvedComposition.durationInFrames]);
+  const finalStartFrame = useMemo132(() => {
+    if (startFrame === null) {
+      return 0;
+    }
+    return Math.max(0, Math.min(finalEndFrame, startFrame));
+  }, [finalEndFrame, startFrame]);
+  const frameRange = useMemo132(() => {
+    if (startFrame === null && endFrame === null) {
+      return null;
+    }
+    return [finalStartFrame, finalEndFrame];
+  }, [endFrame, finalEndFrame, finalStartFrame, startFrame]);
   const [initialOutName] = useState81(() => {
     return getDefaultOutLocation2({
       compositionName: resolvedComposition.id,
@@ -49968,10 +49992,7 @@ var WebRenderModal = ({
       videoBitrate,
       hardwareAcceleration,
       keyframeIntervalInSeconds,
-      frameRange: startFrame !== null || endFrame !== null ? [
-        startFrame ?? 0,
-        endFrame ?? resolvedComposition.durationInFrames - 1
-      ] : null,
+      frameRange,
       onProgress: (progress) => {
         setRenderProgress(progress);
       },
@@ -49999,8 +50020,7 @@ var WebRenderModal = ({
     videoBitrate,
     hardwareAcceleration,
     keyframeIntervalInSeconds,
-    startFrame,
-    endFrame,
+    frameRange,
     resolvedComposition.durationInFrames,
     resolvedComposition.width,
     resolvedComposition.height,
@@ -50040,7 +50060,7 @@ var WebRenderModal = ({
             style: buttonStyle7,
             disabled: !outnameValidation.valid,
             children: [
-              renderProgress ? `Rendering... ${renderProgress.renderedFrames}/${endFrame ?? resolvedComposition.durationInFrames - 1}` : `Render ${renderMode}`,
+              renderProgress ? `Rendering... ${renderProgress.renderedFrames}/${finalEndFrame}` : `Render ${renderMode}`,
               /* @__PURE__ */ jsx263(ShortcutHint, {
                 keyToPress: "↵",
                 cmdOrCtrl: true
@@ -50128,9 +50148,9 @@ var WebRenderModal = ({
               setContainerFormat,
               codec,
               setCodec,
-              startFrame,
+              startFrame: finalStartFrame,
               setStartFrame,
-              endFrame,
+              endFrame: finalEndFrame,
               setEndFrame,
               outName,
               onOutNameChange,
@@ -50482,7 +50502,9 @@ var Modals = ({ readOnlyStudio }) => {
         type: "web-render",
         initialFrame: modalContextType.initialFrame,
         compositionId: modalContextType.compositionId,
-        defaultProps: modalContextType.defaultProps
+        defaultProps: modalContextType.defaultProps,
+        inFrameMark: modalContextType.inFrameMark,
+        outFrameMark: modalContextType.outFrameMark
       }),
       modalContextType && canRender && modalContextType.type === "server-render" && /* @__PURE__ */ jsx268(RenderModalWithLoader, {
         initialFrame: modalContextType.initialFrame,

package/dist/esm/previewEntry.mjs

@@ -18236,6 +18236,7 @@ var label8 = {
 var TriggerWebRender = () => {
   const video = Internals44.useVideo();
   const getCurrentFrame2 = PlayerInternals15.useFrameImperative();
+  const { inFrame, outFrame } = useTimelineInOutFramePosition();
   const { setSelectedModal } = useContext53(ModalsContext);
   const onClick = useCallback90(() => {
     if (!video?.id) {
@@ -18246,9 +18247,18 @@ var TriggerWebRender = () => {
       type: "web-render",
       initialFrame: frame2,
       compositionId: video.id,
-      defaultProps: video.defaultProps
+      defaultProps: video.defaultProps,
+      inFrameMark: inFrame,
+      outFrameMark: outFrame
     });
-  }, [getCurrentFrame2, setSelectedModal, video?.id, video?.defaultProps]);
+  }, [
+    getCurrentFrame2,
+    inFrame,
+    outFrame,
+    setSelectedModal,
+    video?.defaultProps,
+    video?.id
+  ]);
   if (!video) {
     return null;
   }
@@ -48963,41 +48973,31 @@ var calculateTransforms = (element) => {
     nativeTransformOrigin
   };
 };
-var composeCanvas = (canvas, context) => {
-  const { totalMatrix, reset, dimensions, nativeTransformOrigin } = calculateTransforms(canvas);
-  const translateX = nativeTransformOrigin.x + dimensions.left;
-  const translateY = nativeTransformOrigin.y + dimensions.top;
-  const matrix = new DOMMatrix().translate(translateX, translateY).multiply(totalMatrix).translate(-translateX, -translateY);
-  context.setTransform(matrix);
-  context.drawImage(canvas, dimensions.left, dimensions.top, dimensions.width, dimensions.height);
-  context.setTransform(new DOMMatrix);
-  reset();
-};
-var svgToImageBitmap = (svg) => {
-  const {
-    dimensions: svgDimensions,
-    totalMatrix,
-    reset
-  } = calculateTransforms(svg);
+var turnSvgIntoDrawable = (svg) => {
   const originalTransform = svg.style.transform;
   const originalTransformOrigin = svg.style.transformOrigin;
-  svg.style.transform = totalMatrix.toString();
-  svg.style.transformOrigin = "50% 50%";
+  const originalMarginLeft = svg.style.marginLeft;
+  const originalMarginRight = svg.style.marginRight;
+  const originalMarginTop = svg.style.marginTop;
+  const originalMarginBottom = svg.style.marginBottom;
+  svg.style.transform = "none";
+  svg.style.transformOrigin = "";
+  svg.style.marginLeft = "0";
+  svg.style.marginRight = "0";
+  svg.style.marginTop = "0";
+  svg.style.marginBottom = "0";
   const svgData = new XMLSerializer().serializeToString(svg);
+  svg.style.marginLeft = originalMarginLeft;
+  svg.style.marginRight = originalMarginRight;
+  svg.style.marginTop = originalMarginTop;
+  svg.style.marginBottom = originalMarginBottom;
   svg.style.transform = originalTransform;
   svg.style.transformOrigin = originalTransformOrigin;
-  reset();
   return new Promise((resolve, reject) => {
-    const image = new Image(svgDimensions.width, svgDimensions.height);
+    const image = new Image;
     const url2 = `data:image/svg+xml;base64,${btoa(svgData)}`;
     image.onload = function() {
-      resolve({
-        image,
-        width: svgDimensions.width,
-        height: svgDimensions.height,
-        left: svgDimensions.left,
-        top: svgDimensions.top
-      });
+      resolve(image);
     };
     image.onerror = () => {
       reject(new Error("Failed to convert SVG to image"));
@@ -49005,6 +49005,17 @@ var svgToImageBitmap = (svg) => {
     image.src = url2;
   });
 };
+var composeCanvas = async (canvas, context) => {
+  const { totalMatrix, reset, dimensions } = calculateTransforms(canvas);
+  const translateX = dimensions.left + dimensions.width / 2;
+  const translateY = dimensions.top + dimensions.height / 2;
+  const matrix = new DOMMatrix().translate(translateX, translateY).multiply(totalMatrix).translate(-translateX, -translateY);
+  context.setTransform(matrix);
+  const drawable = canvas instanceof SVGSVGElement ? await turnSvgIntoDrawable(canvas) : canvas;
+  context.drawImage(drawable, dimensions.left, dimensions.top, dimensions.width, dimensions.height);
+  context.setTransform(new DOMMatrix);
+  reset();
+};
 var compose = async ({
   composables,
   width: width2,
@@ -49016,14 +49027,7 @@ var compose = async ({
     throw new Error("Could not get context");
   }
   for (const composable of composables) {
-    if (composable.type === "canvas" || composable.type === "img") {
-      composeCanvas(composable.element, context);
-    } else if (composable.type === "svg") {
-      const imageBitmap = await svgToImageBitmap(composable.element);
-      if (imageBitmap) {
-        context.drawImage(imageBitmap.image, imageBitmap.left, imageBitmap.top, imageBitmap.width, imageBitmap.height);
-      }
-    }
+    await composeCanvas(composable.element, context);
   }
   return canvas;
 };
@@ -50040,7 +50044,9 @@ var validateOutnameForStill = ({
 };
 var WebRenderModal = ({
   initialFrame,
-  defaultProps
+  defaultProps,
+  inFrameMark,
+  outFrameMark
 }) => {
   const context = useContext83(ResolvedCompositionContext);
   if (!context) {
@@ -50064,10 +50070,28 @@ var WebRenderModal = ({
   const [videoBitrate, setVideoBitrate] = useState82("high");
   const [hardwareAcceleration, setHardwareAcceleration] = useState82("no-preference");
   const [keyframeIntervalInSeconds, setKeyframeIntervalInSeconds] = useState82(5);
-  const [startFrame, setStartFrame] = useState82(null);
-  const [endFrame, setEndFrame] = useState82(null);
+  const [startFrame, setStartFrame] = useState82(() => inFrameMark ?? null);
+  const [endFrame, setEndFrame] = useState82(() => outFrameMark ?? null);
   const [renderProgress, setRenderProgress] = useState82(null);
   const [transparent, setTransparent] = useState82(false);
+  const finalEndFrame = useMemo132(() => {
+    if (endFrame === null) {
+      return resolvedComposition.durationInFrames - 1;
+    }
+    return Math.max(0, Math.min(resolvedComposition.durationInFrames - 1, endFrame));
+  }, [endFrame, resolvedComposition.durationInFrames]);
+  const finalStartFrame = useMemo132(() => {
+    if (startFrame === null) {
+      return 0;
+    }
+    return Math.max(0, Math.min(finalEndFrame, startFrame));
+  }, [finalEndFrame, startFrame]);
+  const frameRange = useMemo132(() => {
+    if (startFrame === null && endFrame === null) {
+      return null;
+    }
+    return [finalStartFrame, finalEndFrame];
+  }, [endFrame, finalEndFrame, finalStartFrame, startFrame]);
   const [initialOutName] = useState82(() => {
     return getDefaultOutLocation2({
       compositionName: resolvedComposition.id,
@@ -50248,10 +50272,7 @@ var WebRenderModal = ({
       videoBitrate,
       hardwareAcceleration,
       keyframeIntervalInSeconds,
-      frameRange: startFrame !== null || endFrame !== null ? [
-        startFrame ?? 0,
-        endFrame ?? resolvedComposition.durationInFrames - 1
-      ] : null,
+      frameRange,
       onProgress: (progress) => {
         setRenderProgress(progress);
       },
@@ -50279,8 +50300,7 @@ var WebRenderModal = ({
     videoBitrate,
     hardwareAcceleration,
     keyframeIntervalInSeconds,
-    startFrame,
-    endFrame,
+    frameRange,
     resolvedComposition.durationInFrames,
     resolvedComposition.width,
     resolvedComposition.height,
@@ -50320,7 +50340,7 @@ var WebRenderModal = ({
             style: buttonStyle7,
             disabled: !outnameValidation.valid,
             children: [
-              renderProgress ? `Rendering... ${renderProgress.renderedFrames}/${endFrame ?? resolvedComposition.durationInFrames - 1}` : `Render ${renderMode}`,
+              renderProgress ? `Rendering... ${renderProgress.renderedFrames}/${finalEndFrame}` : `Render ${renderMode}`,
               /* @__PURE__ */ jsx264(ShortcutHint, {
                 keyToPress: "↵",
                 cmdOrCtrl: true
@@ -50408,9 +50428,9 @@ var WebRenderModal = ({
               setContainerFormat,
               codec,
               setCodec,
-              startFrame,
+              startFrame: finalStartFrame,
               setStartFrame,
-              endFrame,
+              endFrame: finalEndFrame,
               setEndFrame,
               outName,
               onOutNameChange,
@@ -50762,7 +50782,9 @@ var Modals = ({ readOnlyStudio }) => {
         type: "web-render",
         initialFrame: modalContextType.initialFrame,
         compositionId: modalContextType.compositionId,
-        defaultProps: modalContextType.defaultProps
+        defaultProps: modalContextType.defaultProps,
+        inFrameMark: modalContextType.inFrameMark,
+        outFrameMark: modalContextType.outFrameMark
       }),
       modalContextType && canRender && modalContextType.type === "server-render" && /* @__PURE__ */ jsx269(RenderModalWithLoader, {
         initialFrame: modalContextType.initialFrame,

package/dist/esm/renderEntry.mjs

@@ -206,7 +206,7 @@ var renderContent = (Root) => {
     renderToDOM(/* @__PURE__ */ jsx("div", {
       children: /* @__PURE__ */ jsx(DelayedSpinner, {})
     }));
-    import("./chunk-fbkf30v3.js").then(({ StudioInternals }) => {
+    import("./chunk-x5sy3ah8.js").then(({ StudioInternals }) => {
       window.remotion_isStudio = true;
       window.remotion_isReadOnlyStudio = true;
       window.remotion_inputProps = "{}";

package/dist/state/modals.d.ts

@@ -12,6 +12,8 @@ export type WebRenderModalState = {
     initialFrame: number;
     compositionId: string;
     defaultProps: Record<string, unknown>;
+    inFrameMark: number | null;
+    outFrameMark: number | null;
 };
 export type RenderModalState = {
     type: 'server-render';

package/package.json

@@ -3,7 +3,7 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/studio"
 	},
 	"name": "@remotion/studio",
-	"version": "4.0.376",
+	"version": "4.0.377",
 	"description": "APIs for interacting with the Remotion Studio",
 	"main": "dist",
 	"sideEffects": false,
@@ -25,13 +25,13 @@
 	},
 	"dependencies": {
 		"semver": "7.5.3",
-		"remotion": "4.0.376",
-		"@remotion/player": "4.0.376",
-		"@remotion/media-utils": "4.0.376",
-		"@remotion/renderer": "4.0.376",
-		"@remotion/web-renderer": "4.0.376",
-		"@remotion/studio-shared": "4.0.376",
-		"@remotion/zod-types": "4.0.376",
+		"remotion": "4.0.377",
+		"@remotion/player": "4.0.377",
+		"@remotion/media-utils": "4.0.377",
+		"@remotion/renderer": "4.0.377",
+		"@remotion/web-renderer": "4.0.377",
+		"@remotion/studio-shared": "4.0.377",
+		"@remotion/zod-types": "4.0.377",
 		"mediabunny": "1.24.5",
 		"memfs": "3.4.3",
 		"source-map": "0.7.3",
@@ -42,7 +42,7 @@
 		"react": "19.0.0",
 		"react-dom": "19.0.0",
 		"@types/semver": "^7.3.4",
-		"@remotion/eslint-config-internal": "4.0.376",
+		"@remotion/eslint-config-internal": "4.0.377",
 		"eslint": "9.19.0"
 	},
 	"publishConfig": {