@remotion/promo-pages 4.0.482 → 4.0.484

package/dist/templates.js

@@ -5565,7 +5565,7 @@ var getComponentsToAddStacksTo = () => componentsToAddStacksTo;
 var addSequenceStackTraces = (component) => {
   componentsToAddStacksTo.push(component);
 };
-var VERSION = "4.0.482";
+var VERSION = "4.0.484";
 var checkMultipleRemotionVersions = () => {
   if (typeof globalThis === "undefined") {
     return;
@@ -6781,6 +6781,35 @@ function findRange(input, inputRange) {
   return i - 1;
 }
 var defaultEasing = (num) => num;
+var shouldExtendRightForEasing = (easing) => {
+  return easing.remotionShouldExtendRight === true;
+};
+var resolveEasingForSegment = ({
+  easing,
+  segmentIndex
+}) => {
+  if (easing === undefined) {
+    return defaultEasing;
+  }
+  if (typeof easing === "function") {
+    return easing;
+  }
+  return easing[segmentIndex];
+};
+var interpolateSegment = ({
+  input,
+  inputRange,
+  outputRange,
+  easing,
+  extrapolateLeft,
+  extrapolateRight
+}) => {
+  return interpolateFunction(input, inputRange, outputRange, {
+    easing,
+    extrapolateLeft,
+    extrapolateRight: input > inputRange[1] && extrapolateRight === "clamp" && shouldExtendRightForEasing(easing) ? "extend" : extrapolateRight
+  });
+};
 var interpolateNumber = ({
   input,
   inputRange,
@@ -6791,15 +6820,6 @@ var interpolateNumber = ({
     return outputRange[0];
   }
   const easingOption = options?.easing;
-  const resolveEasingForSegment = (segmentIndex) => {
-    if (easingOption === undefined) {
-      return defaultEasing;
-    }
-    if (typeof easingOption === "function") {
-      return easingOption;
-    }
-    return easingOption[segmentIndex];
-  };
   let extrapolateLeft = "extend";
   if (options?.extrapolateLeft !== undefined) {
     extrapolateLeft = options.extrapolateLeft;
@@ -6810,11 +6830,41 @@ var interpolateNumber = ({
   }
   const posterizedInput = options?.posterize === undefined ? input : Math.floor(input / options.posterize) * options.posterize;
   const range = findRange(posterizedInput, inputRange);
-  return interpolateFunction(posterizedInput, [inputRange[range], inputRange[range + 1]], [outputRange[range], outputRange[range + 1]], {
-    easing: resolveEasingForSegment(range),
+  const easing = resolveEasingForSegment({
+    easing: easingOption,
+    segmentIndex: range
+  });
+  let result = interpolateSegment({
+    input: posterizedInput,
+    inputRange: [inputRange[range], inputRange[range + 1]],
+    outputRange: [outputRange[range], outputRange[range + 1]],
+    easing,
     extrapolateLeft,
     extrapolateRight
   });
+  for (let segmentIndex = 0;segmentIndex < range; segmentIndex++) {
+    const previousEasing = resolveEasingForSegment({
+      easing: easingOption,
+      segmentIndex
+    });
+    if (!shouldExtendRightForEasing(previousEasing)) {
+      continue;
+    }
+    const previousSegmentEnd = inputRange[segmentIndex + 1];
+    if (posterizedInput <= previousSegmentEnd) {
+      continue;
+    }
+    const continuedSegmentValue = interpolateSegment({
+      input: posterizedInput,
+      inputRange: [inputRange[segmentIndex], previousSegmentEnd],
+      outputRange: [outputRange[segmentIndex], outputRange[segmentIndex + 1]],
+      easing: previousEasing,
+      extrapolateLeft,
+      extrapolateRight: "extend"
+    });
+    result += continuedSegmentValue - outputRange[segmentIndex + 1];
+  }
+  return result;
 };
 var interpolateString = ({
   input,
@@ -7288,21 +7338,40 @@ class Easing {
   static back(s = 1.70158) {
     return (t) => t * t * ((s + 1) * t - s);
   }
-  static spring(config = {}) {
-    return (t) => {
+  static spring({
+    allowTail = false,
+    durationRestThreshold,
+    ...config
+  } = {}) {
+    const easing = (t) => {
       if (t <= 0) {
         return 0;
       }
-      if (t >= 1) {
+      if (!allowTail && t >= 1) {
         return 1;
       }
+      if (allowTail) {
+        return spring({
+          fps: springEasingDurationInFrames,
+          frame: t * measureSpring({
+            fps: springEasingDurationInFrames,
+            config,
+            threshold: durationRestThreshold
+          }),
+          config
+        });
+      }
       return spring({
         fps: springEasingDurationInFrames,
         frame: t * springEasingDurationInFrames,
         config,
-        durationInFrames: springEasingDurationInFrames
+        durationInFrames: springEasingDurationInFrames,
+        durationRestThreshold
       });
     };
+    return Object.assign(easing, {
+      remotionShouldExtendRight: allowTail
+    });
   }
   static bounce(t) {
     const u = clampUnit(t);
@@ -7833,25 +7902,31 @@ var interpolateColors = (input, inputRange, outputRange, options) => {
   const processedOutputRange = outputRange.map((c2) => processColor(c2));
   return interpolateColorsRGB(input, inputRange, processedOutputRange, options);
 };
-var easingToFn = (e) => {
-  switch (e.type) {
+var easingToFn = ({
+  easing,
+  forceSpringAllowTail
+}) => {
+  switch (easing.type) {
     case "linear":
       return Easing.linear;
     case "spring":
       return Easing.spring({
-        damping: e.damping,
-        mass: e.mass,
-        overshootClamping: e.overshootClamping,
-        stiffness: e.stiffness
+        allowTail: forceSpringAllowTail ?? easing.allowTail ?? undefined,
+        damping: easing.damping,
+        durationRestThreshold: easing.durationRestThreshold ?? undefined,
+        mass: easing.mass,
+        overshootClamping: easing.overshootClamping,
+        stiffness: easing.stiffness
       });
     case "bezier":
-      return bezier(e.x1, e.y1, e.x2, e.y2);
+      return bezier(easing.x1, easing.y1, easing.x2, easing.y2);
     default:
-      throw new TypeError(`Unsupported easing: ${JSON.stringify(e)}`);
+      throw new TypeError(`Unsupported easing: ${JSON.stringify(easing)}`);
   }
 };
 var interpolateKeyframedStatus = ({
   frame,
+  forceSpringAllowTail,
   status
 }) => {
   const { keyframes, easing, clamping, interpolationFunction } = status;
@@ -7870,7 +7945,7 @@ var interpolateKeyframedStatus = ({
     }
     try {
       return interpolateColors(frame, inputRange, outputs, {
-        easing: easing.map(easingToFn),
+        easing: easing.map((e) => easingToFn({ easing: e, forceSpringAllowTail })),
         posterize: status.posterize
       });
     } catch {
@@ -7882,7 +7957,7 @@ var interpolateKeyframedStatus = ({
   }
   try {
     return interpolate(frame, inputRange, outputs, {
-      easing: easing.map(easingToFn),
+      easing: easing.map((e) => easingToFn({ easing: e, forceSpringAllowTail })),
       extrapolateLeft: clamping.left,
       extrapolateRight: clamping.right,
       posterize: status.posterize
@@ -7905,6 +7980,7 @@ var resolveDragOverrideValue = ({
     return { type: "none" };
   }
   const interpolated = interpolateKeyframedStatus({
+    forceSpringAllowTail: null,
     frame,
     status: dragOverrideValue.status
   });
@@ -7930,6 +8006,7 @@ var getEffectiveVisualModeValue = ({
   if (propStatus.status === "keyframed") {
     if (frame !== null) {
       return interpolateKeyframedStatus({
+        forceSpringAllowTail: null,
         frame,
         status: propStatus
       });
@@ -7998,6 +8075,7 @@ var resolvePropStatusOverrides = (propStatus, frame) => {
     }
     if (status.status === "keyframed") {
       const value = interpolateKeyframedStatus({
+        forceSpringAllowTail: null,
         frame,
         status
       });
@@ -8173,6 +8251,17 @@ var findPropsToDelete = ({
 var DEFAULT_LINEAR_EASING = {
   type: "linear"
 };
+var getEasingIndexToDuplicate = ({
+  insertedKeyframeIndex,
+  easingLength,
+  keyframeCount
+}) => {
+  const isSplittingExistingSegment = insertedKeyframeIndex > 0 && insertedKeyframeIndex < keyframeCount - 1;
+  if (!isSplittingExistingSegment || easingLength === 0) {
+    return null;
+  }
+  return Math.min(insertedKeyframeIndex - 1, easingLength - 1);
+};
 var makeStaticDragOverride = (value) => {
   return { type: "static", value };
 };
@@ -8184,6 +8273,16 @@ var makeKeyframedDragOverride = ({
   const existingIndex = status.keyframes.findIndex((keyframe) => keyframe.frame === frame);
   const keyframes = existingIndex === -1 ? [...status.keyframes, { frame, value }].sort((first, second) => first.frame - second.frame) : status.keyframes.map((keyframe, index) => index === existingIndex ? { frame, value } : keyframe);
   const easing = [...status.easing];
+  if (existingIndex === -1) {
+    const insertedKeyframeIndex = keyframes.findIndex((keyframe) => keyframe.frame === frame);
+    const easingIndexToDuplicate = getEasingIndexToDuplicate({
+      insertedKeyframeIndex,
+      easingLength: easing.length,
+      keyframeCount: keyframes.length
+    });
+    const easingToDuplicate = easingIndexToDuplicate === null ? DEFAULT_LINEAR_EASING : easing[easingIndexToDuplicate];
+    easing.splice(insertedKeyframeIndex, 0, easingToDuplicate);
+  }
   while (easing.length < keyframes.length - 1) {
     easing.push(DEFAULT_LINEAR_EASING);
   }
@@ -8255,6 +8354,7 @@ var computeEffectiveSchemaValuesDotNotation = ({
           value = dragOverride.value;
         } else if (frame !== null) {
           const interpolated = interpolateKeyframedStatus({
+            forceSpringAllowTail: null,
             frame,
             status
           });
@@ -12406,6 +12506,7 @@ var AudioForRenderingRefForwardingFunction = (props, ref) => {
 var AudioForRendering = forwardRef6(AudioForRenderingRefForwardingFunction);
 var AudioRefForwardingFunction = (props, ref) => {
   const audioTagsContext = useContext30(SharedAudioTagsContext);
+  const propsWithFreeze = props;
   const {
     startFrom,
     endAt,
@@ -12416,14 +12517,18 @@ var AudioRefForwardingFunction = (props, ref) => {
     pauseWhenBuffering,
     showInTimeline,
     onError: onRemotionError,
+    freeze,
     ...otherProps
-  } = props;
-  const { loop, ...propsOtherThanLoop } = props;
+  } = propsWithFreeze;
+  const { loop, freeze: _freeze, ...propsOtherThanLoop } = propsWithFreeze;
   const { fps } = useVideoConfig();
   const environment = useRemotionEnvironment();
   if (environment.isClientSideRendering) {
     throw new Error("<Html5Audio> is not supported in @remotion/web-renderer. Use <Audio> from @remotion/media instead. See https://remotion.dev/docs/client-side-rendering/limitations");
   }
+  if (typeof freeze !== "undefined") {
+    throw new TypeError('The "freeze" prop is not supported on <Html5Audio />. Use <Sequence freeze={...}> to freeze media playback.');
+  }
   const { durations, setDurations } = useContext30(DurationsContext);
   if (typeof props.src !== "string") {
     throw new TypeError(`The \`<Html5Audio>\` tag requires a string for \`src\`, but got ${JSON.stringify(props.src)} instead.`);
@@ -12762,6 +12867,10 @@ function resolveHtmlInCanvasPixelDensity(pixelDensity) {
   }
   return pixelDensity;
 }
+var isMissingPaintRecordError = (error2) => {
+  return error2 instanceof DOMException && error2.name === "InvalidStateError";
+};
+var missingPaintRecordMessage = "HtmlInCanvas: Expected the element to be inside the viewport during rendering, but Chrome had no cached paint record for it.";
 var resizeOffscreenCanvas = ({
   offscreen,
   width,
@@ -12805,6 +12914,7 @@ var HtmlInCanvasContent = forwardRef9(({
   const canvasWidth = Math.ceil(width * resolvedPixelDensity);
   const canvasHeight = Math.ceil(height * resolvedPixelDensity);
   const { continueRender: continueRender2, cancelRender: cancelRender2 } = useDelayRender();
+  const { isRendering } = useRemotionEnvironment();
   if (!isHtmlInCanvasSupported()) {
     cancelRender2(new Error(HTML_IN_CANVAS_UNSUPPORTED_MESSAGE));
   }
@@ -12855,28 +12965,51 @@ var HtmlInCanvasContent = forwardRef9(({
       }
       const handle = delayRender("onPaint");
       if (!initializedRef.current) {
-        initializedRef.current = true;
-        const initImage = placeholderCanvas.captureElementImage(element);
-        const currentOnInit = onInitRef.current;
-        if (currentOnInit) {
-          const cleanup = await currentOnInit({
-            canvas: offscreen,
-            element,
-            elementImage: initImage,
-            pixelDensity: resolvedPixelDensity
-          });
-          if (typeof cleanup !== "function") {
-            throw new Error("HtmlInCanvas: when `onInit` is provided, it must return a cleanup function, or a Promise that resolves to one.");
-          }
-          if (unmountedRef.current) {
-            cleanup();
+        let initImage = null;
+        try {
+          initImage = placeholderCanvas.captureElementImage(element);
+        } catch (error2) {
+          if (isMissingPaintRecordError(error2) && !isRendering) {} else if (isMissingPaintRecordError(error2)) {
+            throw new Error(missingPaintRecordMessage);
           } else {
-            onInitCleanupRef.current = cleanup;
+            throw error2;
+          }
+        }
+        if (initImage) {
+          initializedRef.current = true;
+          const currentOnInit = onInitRef.current;
+          if (currentOnInit) {
+            const cleanup = await currentOnInit({
+              canvas: offscreen,
+              element,
+              elementImage: initImage,
+              pixelDensity: resolvedPixelDensity
+            });
+            if (typeof cleanup !== "function") {
+              throw new Error("HtmlInCanvas: when `onInit` is provided, it must return a cleanup function, or a Promise that resolves to one.");
+            }
+            if (unmountedRef.current) {
+              cleanup();
+            } else {
+              onInitCleanupRef.current = cleanup;
+            }
           }
         }
       }
       const handler = onPaintRef.current ?? defaultOnPaint;
-      const elImage = placeholderCanvas.captureElementImage(element);
+      let elImage;
+      try {
+        elImage = placeholderCanvas.captureElementImage(element);
+      } catch (error2) {
+        if (isMissingPaintRecordError(error2) && !isRendering) {
+          continueRender2(handle);
+          return;
+        }
+        if (isMissingPaintRecordError(error2)) {
+          throw new Error(missingPaintRecordMessage);
+        }
+        throw error2;
+      }
       await handler({
         canvas: offscreen,
         element,
@@ -12901,7 +13034,8 @@ var HtmlInCanvasContent = forwardRef9(({
     chainState,
     continueRender2,
     cancelRender2,
-    resolvedPixelDensity
+    resolvedPixelDensity,
+    isRendering
   ]);
   useLayoutEffect9(() => {
     const placeholder = canvas2dRef.current;
@@ -25555,6 +25689,7 @@ var listOfRemotionPackages = [
   "@remotion/bugs",
   "@remotion/brand",
   "@remotion/bundler",
+  "@remotion/browser-studio",
   "@remotion/canvas-capture",
   "@remotion/cli",
   "@remotion/cloudrun",

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@remotion/promo-pages",
-	"version": "4.0.482",
+	"version": "4.0.484",
 	"publishConfig": {
 		"access": "public"
 	},
@@ -11,19 +11,19 @@
 	},
 	"type": "module",
 	"dependencies": {
-		"@remotion/animated-emoji": "4.0.482",
-		"@remotion/design": "4.0.482",
-		"@remotion/web-renderer": "4.0.482",
-		"@remotion/lottie": "4.0.482",
-		"@remotion/paths": "4.0.482",
-		"@remotion/player": "4.0.482",
-		"@remotion/shapes": "4.0.482",
-		"@remotion/media": "4.0.482",
-		"@remotion/svg-3d-engine": "4.0.482",
-		"create-video": "4.0.482",
+		"@remotion/animated-emoji": "4.0.484",
+		"@remotion/design": "4.0.484",
+		"@remotion/web-renderer": "4.0.484",
+		"@remotion/lottie": "4.0.484",
+		"@remotion/paths": "4.0.484",
+		"@remotion/player": "4.0.484",
+		"@remotion/shapes": "4.0.484",
+		"@remotion/media": "4.0.484",
+		"@remotion/svg-3d-engine": "4.0.484",
+		"create-video": "4.0.484",
 		"hls.js": "1.5.19",
 		"polished": "4.3.1",
-		"remotion": "4.0.482",
+		"remotion": "4.0.484",
 		"zod": "4.3.6",
 		"@mux/upchunk": "3.5.0",
 		"@vidstack/react": "1.12.13",
@@ -34,7 +34,7 @@
 		"@mediabunny/mp3-encoder": "1.47.0"
 	},
 	"devDependencies": {
-		"@remotion/eslint-config-internal": "4.0.482",
+		"@remotion/eslint-config-internal": "4.0.484",
 		"@eslint/eslintrc": "3.1.0",
 		"@types/react": "19.2.7",
 		"@types/react-dom": "19.2.3",