remotion 4.0.232 → 4.0.233

package/dist/cjs/use-current-scale.d.ts

@@ -1,13 +1,21 @@
 import React from 'react';
+type Size = {
+    width: number;
+    height: number;
+    left: number;
+    top: number;
+    windowSize: {
+        width: number;
+        height: number;
+    };
+    refresh: () => void;
+};
 export type CurrentScaleContextType = {
     type: 'scale';
     scale: number;
 } | {
     type: 'canvas-size';
-    canvasSize: {
-        width: number;
-        height: number;
-    };
+    canvasSize: Size;
 };
 export declare const CurrentScaleContext: React.Context<CurrentScaleContextType | null>;
 type Options = {

package/dist/cjs/version.d.ts

@@ -3,4 +3,4 @@
  * @see [Documentation](https://remotion.dev/docs/version)
  * @returns {string} The current version of the remotion package
  */
-export declare const VERSION = "4.0.232";
+export declare const VERSION = "4.0.233";

package/dist/cjs/version.js

@@ -7,4 +7,4 @@ exports.VERSION = void 0;
  * @see [Documentation](https://remotion.dev/docs/version)
  * @returns {string} The current version of the remotion package
  */
-exports.VERSION = '4.0.232';
+exports.VERSION = '4.0.233';

package/dist/cjs/video/OffthreadVideoForRendering.js

@@ -19,7 +19,10 @@ const use_unsafe_video_config_js_1 = require("../use-unsafe-video-config.js");
 const volume_prop_js_1 = require("../volume-prop.js");
 const get_current_time_js_1 = require("./get-current-time.js");
 const offthread_video_source_js_1 = require("./offthread-video-source.js");
-const OffthreadVideoForRendering = ({ onError, volume: volumeProp, playbackRate, src, muted, allowAmplificationDuringRender, transparent = false, toneMapped = true, toneFrequency, name, loopVolumeCurveBehavior, delayRenderRetries, delayRenderTimeoutInMilliseconds, onVideoFrame, ...props }) => {
+const OffthreadVideoForRendering = ({ onError, volume: volumeProp, playbackRate, src, muted, allowAmplificationDuringRender, transparent = false, toneMapped = true, toneFrequency, name, loopVolumeCurveBehavior, delayRenderRetries, delayRenderTimeoutInMilliseconds, onVideoFrame, 
+// Remove crossOrigin prop during rendering
+// https://discord.com/channels/809501355504959528/844143007183667220/1311639632496033813
+crossOrigin, ...props }) => {
     const absoluteFrame = (0, timeline_position_state_js_1.useTimelinePosition)();
     const frame = (0, use_current_frame_js_1.useCurrentFrame)();
     const volumePropsFrame = (0, use_audio_frame_js_1.useFrameForVolumeProp)(loopVolumeCurveBehavior !== null && loopVolumeCurveBehavior !== void 0 ? loopVolumeCurveBehavior : 'repeat');

package/dist/esm/index.mjs

@@ -23,7 +23,8 @@ if (typeof createContext !== "function") {
     '  "use client";',
     '  import {useCurrentFrame} from "remotion";'
   ];
-  throw new Error(err.join("\n"));
+  throw new Error(err.join(`
+`));
 }
 
 // src/Clipper.tsx
@@ -101,7 +102,7 @@ function truthy(value) {
 }
 
 // src/version.ts
-var VERSION = "4.0.232";
+var VERSION = "4.0.233";
 
 // src/multiple-versions-warning.ts
 var checkMultipleRemotionVersions = () => {
@@ -126,7 +127,8 @@ var checkMultipleRemotionVersions = () => {
     throw new TypeError(`\uD83D\uDEA8 Multiple versions of Remotion detected: ${[
       VERSION,
       typeof alreadyImported === "string" ? alreadyImported : "an older version"
-    ].filter(truthy).join(" and ")}. This will cause things to break in an unexpected way.\nCheck that all your Remotion packages are on the same version. If your dependencies depend on Remotion, make them peer dependencies. You can also run \`npx remotion versions\` from your terminal to see which versions are mismatching.`);
+    ].filter(truthy).join(" and ")}. This will cause things to break in an unexpected way.
+Check that all your Remotion packages are on the same version. If your dependencies depend on Remotion, make them peer dependencies. You can also run \`npx remotion versions\` from your terminal to see which versions are mismatching.`);
   }
   set();
 };
@@ -1626,21 +1628,6 @@ var calculateLoopDuration = ({
 };
 
 // src/cancel-render.ts
-function cancelRender(err) {
-  let error;
-  if (isErrorLike(err)) {
-    error = err;
-    if (!error.stack) {
-      error.stack = new Error(error.message).stack;
-    }
-  } else if (typeof err === "string") {
-    error = Error(err);
-  } else {
-    error = Error("Rendering was cancelled");
-  }
-  window.remotion_cancelledError = error.stack;
-  throw error;
-}
 var isErrorLike = (err) => {
   if (err instanceof Error) {
     return true;
@@ -1665,6 +1652,21 @@ var isErrorLike = (err) => {
   }
   return true;
 };
+function cancelRender(err) {
+  let error;
+  if (isErrorLike(err)) {
+    error = err;
+    if (!error.stack) {
+      error.stack = new Error(error.message).stack;
+    }
+  } else if (typeof err === "string") {
+    error = Error(err);
+  } else {
+    error = Error("Rendering was cancelled");
+  }
+  window.remotion_cancelledError = error.stack;
+  throw error;
+}
 
 // src/loop/index.tsx
 import React8, { createContext as createContext11, useMemo as useMemo11 } from "react";
@@ -2815,7 +2817,8 @@ var warnAboutNonSeekableMedia = (ref, type) => {
       "2) The media does not support seeking.",
       "3) The media was loaded with security headers prventing it from being included.",
       "Please see https://remotion.dev/docs/non-seekable-media for assistance."
-    ].join("\n");
+    ].join(`
+`);
     if (type === "console-error") {
       console.error(msg);
     } else if (type === "console-warning") {
@@ -3825,19 +3828,19 @@ var Loading = () => {
       /* @__PURE__ */ jsx19("style", {
         type: "text/css",
         children: `
-				@keyframes anim {
-					from {
-						opacity: 0
-					}
-					to {
-						opacity: 1
-					}
-				}
-				#remotion-comp-loading {
-					animation: anim 2s;
-					animation-fill-mode: forwards;
-				}
-			`
+\t\t\t\t@keyframes anim {
+\t\t\t\t\tfrom {
+\t\t\t\t\t\topacity: 0
+\t\t\t\t\t}
+\t\t\t\t\tto {
+\t\t\t\t\t\topacity: 1
+\t\t\t\t\t}
+\t\t\t\t}
+\t\t\t\t#remotion-comp-loading {
+\t\t\t\t\tanimation: anim 2s;
+\t\t\t\t\tanimation-fill-mode: forwards;
+\t\t\t\t}
+\t\t\t`
       }),
       /* @__PURE__ */ jsx19("svg", {
         width: ICON_SIZE,
@@ -4148,6 +4151,13 @@ var CompositionManagerProvider = ({ children, numberOfAudioTags }) => {
   });
 };
 // src/bezier.ts
+var NEWTON_ITERATIONS = 4;
+var NEWTON_MIN_SLOPE = 0.001;
+var SUBDIVISION_PRECISION = 0.0000001;
+var SUBDIVISION_MAX_ITERATIONS = 10;
+var kSplineTableSize = 11;
+var kSampleStepSize = 1 / (kSplineTableSize - 1);
+var float32ArraySupported = typeof Float32Array === "function";
 function a(aA1, aA2) {
   return 1 - 3 * aA2 + 3 * aA1;
 }
@@ -4246,13 +4256,6 @@ function bezier(mX1, mY1, mX2, mY2) {
     return calcBezier(getTForX(x), mY1, mY2);
   };
 }
-var NEWTON_ITERATIONS = 4;
-var NEWTON_MIN_SLOPE = 0.001;
-var SUBDIVISION_PRECISION = 0.0000001;
-var SUBDIVISION_MAX_ITERATIONS = 10;
-var kSplineTableSize = 11;
-var kSampleStepSize = 1 / (kSplineTableSize - 1);
-var float32ArraySupported = typeof Float32Array === "function";
 
 // src/easing.ts
 class Easing {
@@ -4403,10 +4406,10 @@ import {
   useLayoutEffect as useLayoutEffect3,
   useRef as useRef11
 } from "react";
+import { jsx as jsx23 } from "react/jsx-runtime";
 function exponentialBackoff(errorCount) {
   return 1000 * 2 ** (errorCount - 1);
 }
-import { jsx as jsx23 } from "react/jsx-runtime";
 var ImgRefForwarding = ({
   onError,
   maxRetries = 2,
@@ -4558,7 +4561,7 @@ var makeDefaultPreviewCSS = (scope, backgroundColor) => {
     }
     body {
       margin: 0;
-	    background-color: ${backgroundColor};
+\t    background-color: ${backgroundColor};
     }
     .${OFFTHREAD_VIDEO_CLASS_NAME} {
       object-fit: contain;
@@ -4781,7 +4784,8 @@ var useCurrentScale = (options) => {
       "This hook can only be called in a component that is being rendered by Remotion.",
       "If you want to this hook to return 1 outside of Remotion, pass {dontThrowIfOutsideOfRemotion: true} as an option.",
       "If you think you called this hook in a Remotion component, make sure all versions of Remotion are aligned."
-    ].join("\n"));
+    ].join(`
+`));
   }
   if (hasContext.type === "scale") {
     return hasContext.scale;
@@ -4833,6 +4837,7 @@ var watchStaticFile = (fileName, callback) => {
 
 // src/wrap-remotion-context.tsx
 import React23, { useMemo as useMemo25 } from "react";
+import { jsx as jsx25 } from "react/jsx-runtime";
 function useRemotionContexts() {
   const compositionManagerCtx = React23.useContext(CompositionManager);
   const timelineContext = React23.useContext(TimelineContext);
@@ -4871,7 +4876,6 @@ function useRemotionContexts() {
     bufferManagerContext
   ]);
 }
-import { jsx as jsx25 } from "react/jsx-runtime";
 var RemotionContextProvider = (props2) => {
   const { children, contexts } = props2;
   return /* @__PURE__ */ jsx25(CanUseRemotionHooks.Provider, {
@@ -4973,6 +4977,8 @@ var Internals = {
   validateRenderAsset
 };
 // src/interpolate-colors.ts
+var NUMBER = "[-+]?\\d*\\.?\\d+";
+var PERCENTAGE = NUMBER + "%";
 function call(...args) {
   return "\\(\\s*(" + args.join(")\\s*,\\s*(") + ")\\s*\\)";
 }
@@ -5060,60 +5066,6 @@ function parsePercentage(str) {
   }
   return int / 100;
 }
-function normalizeColor(color) {
-  const matchers = getMatchers();
-  let match;
-  if (matchers.hex6) {
-    if (match = matchers.hex6.exec(color)) {
-      return Number.parseInt(match[1] + "ff", 16) >>> 0;
-    }
-  }
-  if (colorNames[color] !== undefined) {
-    return colorNames[color];
-  }
-  if (matchers.rgb) {
-    if (match = matchers.rgb.exec(color)) {
-      return (parse255(match[1]) << 24 | parse255(match[2]) << 16 | parse255(match[3]) << 8 | 255) >>> 0;
-    }
-  }
-  if (matchers.rgba) {
-    if (match = matchers.rgba.exec(color)) {
-      return (parse255(match[1]) << 24 | parse255(match[2]) << 16 | parse255(match[3]) << 8 | parse1(match[4])) >>> 0;
-    }
-  }
-  if (matchers.hex3) {
-    if (match = matchers.hex3.exec(color)) {
-      return Number.parseInt(match[1] + match[1] + match[2] + match[2] + match[3] + match[3] + "ff", 16) >>> 0;
-    }
-  }
-  if (matchers.hex8) {
-    if (match = matchers.hex8.exec(color)) {
-      return Number.parseInt(match[1], 16) >>> 0;
-    }
-  }
-  if (matchers.hex4) {
-    if (match = matchers.hex4.exec(color)) {
-      return Number.parseInt(match[1] + match[1] + match[2] + match[2] + match[3] + match[3] + match[4] + match[4], 16) >>> 0;
-    }
-  }
-  if (matchers.hsl) {
-    if (match = matchers.hsl.exec(color)) {
-      return (hslToRgb(parse360(match[1]), parsePercentage(match[2]), parsePercentage(match[3])) | 255) >>> 0;
-    }
-  }
-  if (matchers.hsla) {
-    if (match = matchers.hsla.exec(color)) {
-      return (hslToRgb(parse360(match[1]), parsePercentage(match[2]), parsePercentage(match[3])) | parse1(match[4])) >>> 0;
-    }
-  }
-  throw new Error(`invalid color string ${color} provided`);
-}
-function processColor(color) {
-  const normalizedColor = normalizeColor(color);
-  return (normalizedColor << 24 | normalizedColor >>> 8) >>> 0;
-}
-var NUMBER = "[-+]?\\d*\\.?\\d+";
-var PERCENTAGE = NUMBER + "%";
 var colorNames = {
   transparent: 0,
   aliceblue: 4042850303,
@@ -5266,6 +5218,54 @@ var colorNames = {
   yellow: 4294902015,
   yellowgreen: 2597139199
 };
+function normalizeColor(color) {
+  const matchers = getMatchers();
+  let match;
+  if (matchers.hex6) {
+    if (match = matchers.hex6.exec(color)) {
+      return Number.parseInt(match[1] + "ff", 16) >>> 0;
+    }
+  }
+  if (colorNames[color] !== undefined) {
+    return colorNames[color];
+  }
+  if (matchers.rgb) {
+    if (match = matchers.rgb.exec(color)) {
+      return (parse255(match[1]) << 24 | parse255(match[2]) << 16 | parse255(match[3]) << 8 | 255) >>> 0;
+    }
+  }
+  if (matchers.rgba) {
+    if (match = matchers.rgba.exec(color)) {
+      return (parse255(match[1]) << 24 | parse255(match[2]) << 16 | parse255(match[3]) << 8 | parse1(match[4])) >>> 0;
+    }
+  }
+  if (matchers.hex3) {
+    if (match = matchers.hex3.exec(color)) {
+      return Number.parseInt(match[1] + match[1] + match[2] + match[2] + match[3] + match[3] + "ff", 16) >>> 0;
+    }
+  }
+  if (matchers.hex8) {
+    if (match = matchers.hex8.exec(color)) {
+      return Number.parseInt(match[1], 16) >>> 0;
+    }
+  }
+  if (matchers.hex4) {
+    if (match = matchers.hex4.exec(color)) {
+      return Number.parseInt(match[1] + match[1] + match[2] + match[2] + match[3] + match[3] + match[4] + match[4], 16) >>> 0;
+    }
+  }
+  if (matchers.hsl) {
+    if (match = matchers.hsl.exec(color)) {
+      return (hslToRgb(parse360(match[1]), parsePercentage(match[2]), parsePercentage(match[3])) | 255) >>> 0;
+    }
+  }
+  if (matchers.hsla) {
+    if (match = matchers.hsla.exec(color)) {
+      return (hslToRgb(parse360(match[1]), parsePercentage(match[2]), parsePercentage(match[3])) | parse1(match[4])) >>> 0;
+    }
+  }
+  throw new Error(`invalid color string ${color} provided`);
+}
 var opacity = (c2) => {
   return (c2 >> 24 & 255) / 255;
 };
@@ -5281,6 +5281,10 @@ var blue = (c2) => {
 var rgbaColor = (r, g, b2, alpha) => {
   return `rgba(${r}, ${g}, ${b2}, ${alpha})`;
 };
+function processColor(color) {
+  const normalizedColor = normalizeColor(color);
+  return (normalizedColor << 24 | normalizedColor >>> 8) >>> 0;
+}
 var interpolateColorsRGB = (value, inputRange, colors) => {
   const [r, g, b2, a2] = [red, green, blue, opacity].map((f) => {
     const unrounded = interpolate(value, inputRange, colors.map((c2) => f(c2)), {
@@ -5482,6 +5486,13 @@ var validateSpringDuration = (dur) => {
 };
 
 // src/spring/spring-utils.ts
+var defaultSpringConfig = {
+  damping: 10,
+  mass: 1,
+  stiffness: 100,
+  overshootClamping: false
+};
+var advanceCache = {};
 function advance({
   animation,
   now,
@@ -5533,6 +5544,7 @@ function advance({
   advanceCache[cacheKey] = animationNode;
   return animationNode;
 }
+var calculationCache = {};
 function springCalculation({
   frame,
   fps,
@@ -5577,16 +5589,9 @@ function springCalculation({
   calculationCache[cacheKey] = animation;
   return animation;
 }
-var defaultSpringConfig = {
-  damping: 10,
-  mass: 1,
-  stiffness: 100,
-  overshootClamping: false
-};
-var advanceCache = {};
-var calculationCache = {};
 
 // src/spring/measure-spring.ts
+var cache = new Map;
 function measureSpring({
   fps,
   config = {},
@@ -5654,7 +5659,6 @@ function measureSpring({
   cache.set(cacheKey, finishedFrame);
   return finishedFrame;
 }
-var cache = new Map;
 
 // src/spring/index.ts
 function spring({
@@ -5741,6 +5745,7 @@ var OffthreadVideoForRendering = ({
   delayRenderRetries,
   delayRenderTimeoutInMilliseconds,
   onVideoFrame,
+  crossOrigin,
   ...props2
 }) => {
   const absoluteFrame = useTimelinePosition();
@@ -6605,7 +6610,7 @@ var Config = new Proxy(proxyObj, {
       return Config;
     }
     return () => {
-      console.warn("\u26A0\uFE0F  The CLI configuration has been extracted from Remotion Core.");
+      console.warn("⚠️  The CLI configuration has been extracted from Remotion Core.");
       console.warn("Update the import from the config file:");
       console.warn();
       console.warn("- Delete:");

package/dist/esm/no-react.mjs

@@ -290,6 +290,8 @@ var deserializeJSONWithCustomFields = (data) => {
 };
 
 // src/interpolate-colors.ts
+var NUMBER = "[-+]?\\d*\\.?\\d+";
+var PERCENTAGE = NUMBER + "%";
 function call(...args) {
   return "\\(\\s*(" + args.join(")\\s*,\\s*(") + ")\\s*\\)";
 }
@@ -377,60 +379,6 @@ function parsePercentage(str) {
   }
   return int / 100;
 }
-function normalizeColor(color) {
-  const matchers = getMatchers();
-  let match;
-  if (matchers.hex6) {
-    if (match = matchers.hex6.exec(color)) {
-      return Number.parseInt(match[1] + "ff", 16) >>> 0;
-    }
-  }
-  if (colorNames[color] !== undefined) {
-    return colorNames[color];
-  }
-  if (matchers.rgb) {
-    if (match = matchers.rgb.exec(color)) {
-      return (parse255(match[1]) << 24 | parse255(match[2]) << 16 | parse255(match[3]) << 8 | 255) >>> 0;
-    }
-  }
-  if (matchers.rgba) {
-    if (match = matchers.rgba.exec(color)) {
-      return (parse255(match[1]) << 24 | parse255(match[2]) << 16 | parse255(match[3]) << 8 | parse1(match[4])) >>> 0;
-    }
-  }
-  if (matchers.hex3) {
-    if (match = matchers.hex3.exec(color)) {
-      return Number.parseInt(match[1] + match[1] + match[2] + match[2] + match[3] + match[3] + "ff", 16) >>> 0;
-    }
-  }
-  if (matchers.hex8) {
-    if (match = matchers.hex8.exec(color)) {
-      return Number.parseInt(match[1], 16) >>> 0;
-    }
-  }
-  if (matchers.hex4) {
-    if (match = matchers.hex4.exec(color)) {
-      return Number.parseInt(match[1] + match[1] + match[2] + match[2] + match[3] + match[3] + match[4] + match[4], 16) >>> 0;
-    }
-  }
-  if (matchers.hsl) {
-    if (match = matchers.hsl.exec(color)) {
-      return (hslToRgb(parse360(match[1]), parsePercentage(match[2]), parsePercentage(match[3])) | 255) >>> 0;
-    }
-  }
-  if (matchers.hsla) {
-    if (match = matchers.hsla.exec(color)) {
-      return (hslToRgb(parse360(match[1]), parsePercentage(match[2]), parsePercentage(match[3])) | parse1(match[4])) >>> 0;
-    }
-  }
-  throw new Error(`invalid color string ${color} provided`);
-}
-function processColor(color) {
-  const normalizedColor = normalizeColor(color);
-  return (normalizedColor << 24 | normalizedColor >>> 8) >>> 0;
-}
-var NUMBER = "[-+]?\\d*\\.?\\d+";
-var PERCENTAGE = NUMBER + "%";
 var colorNames = {
   transparent: 0,
   aliceblue: 4042850303,
@@ -583,6 +531,58 @@ var colorNames = {
   yellow: 4294902015,
   yellowgreen: 2597139199
 };
+function normalizeColor(color) {
+  const matchers = getMatchers();
+  let match;
+  if (matchers.hex6) {
+    if (match = matchers.hex6.exec(color)) {
+      return Number.parseInt(match[1] + "ff", 16) >>> 0;
+    }
+  }
+  if (colorNames[color] !== undefined) {
+    return colorNames[color];
+  }
+  if (matchers.rgb) {
+    if (match = matchers.rgb.exec(color)) {
+      return (parse255(match[1]) << 24 | parse255(match[2]) << 16 | parse255(match[3]) << 8 | 255) >>> 0;
+    }
+  }
+  if (matchers.rgba) {
+    if (match = matchers.rgba.exec(color)) {
+      return (parse255(match[1]) << 24 | parse255(match[2]) << 16 | parse255(match[3]) << 8 | parse1(match[4])) >>> 0;
+    }
+  }
+  if (matchers.hex3) {
+    if (match = matchers.hex3.exec(color)) {
+      return Number.parseInt(match[1] + match[1] + match[2] + match[2] + match[3] + match[3] + "ff", 16) >>> 0;
+    }
+  }
+  if (matchers.hex8) {
+    if (match = matchers.hex8.exec(color)) {
+      return Number.parseInt(match[1], 16) >>> 0;
+    }
+  }
+  if (matchers.hex4) {
+    if (match = matchers.hex4.exec(color)) {
+      return Number.parseInt(match[1] + match[1] + match[2] + match[2] + match[3] + match[3] + match[4] + match[4], 16) >>> 0;
+    }
+  }
+  if (matchers.hsl) {
+    if (match = matchers.hsl.exec(color)) {
+      return (hslToRgb(parse360(match[1]), parsePercentage(match[2]), parsePercentage(match[3])) | 255) >>> 0;
+    }
+  }
+  if (matchers.hsla) {
+    if (match = matchers.hsla.exec(color)) {
+      return (hslToRgb(parse360(match[1]), parsePercentage(match[2]), parsePercentage(match[3])) | parse1(match[4])) >>> 0;
+    }
+  }
+  throw new Error(`invalid color string ${color} provided`);
+}
+function processColor(color) {
+  const normalizedColor = normalizeColor(color);
+  return (normalizedColor << 24 | normalizedColor >>> 8) >>> 0;
+}
 
 // src/v5-flag.ts
 var ENABLE_V5_BREAKING_CHANGES = false;

package/dist/esm/version.mjs

@@ -1,5 +1,5 @@
 // src/version.ts
-var VERSION = "4.0.232";
+var VERSION = "4.0.233";
 export {
   VERSION
 };

package/package.json

@@ -3,7 +3,7 @@
     "url": "https://github.com/remotion-dev/remotion/tree/main/packages/core"
   },
   "name": "remotion",
-  "version": "4.0.232",
+  "version": "4.0.233",
   "description": "Make videos programmatically",
   "main": "dist/cjs/index.js",
   "types": "dist/cjs/index.d.ts",
@@ -28,7 +28,7 @@
     "webpack": "5.96.1",
     "zod": "3.22.3",
     "eslint": "9.14.0",
-    "@remotion/eslint-config-internal": "4.0.232"
+    "@remotion/eslint-config-internal": "4.0.233"
   },
   "keywords": [
     "remotion",