@remotion/promo-pages 4.0.484 → 4.0.485

package/dist/Homepage.js

@@ -2335,7 +2335,7 @@ var getComponentsToAddStacksTo = () => componentsToAddStacksTo;
 var addSequenceStackTraces = (component) => {
   componentsToAddStacksTo.push(component);
 };
-var VERSION = "4.0.484";
+var VERSION = "4.0.485";
 var checkMultipleRemotionVersions = () => {
   if (typeof globalThis === "undefined") {
     return;
@@ -2806,6 +2806,14 @@ var textSchema = {
     hiddenFromList: false
   }
 };
+var textContentSchema = {
+  children: {
+    type: "text-content",
+    default: "",
+    description: "Text",
+    keyframable: false
+  }
+};
 var premountSchema = {
   premountFor: {
     type: "number",
@@ -5173,10 +5181,21 @@ var getNestedValue = (obj, key) => {
   }
   return current;
 };
-var readValuesFromProps = (props, keys) => {
+var getRuntimeValueForSchemaKey = ({
+  flatSchema,
+  key,
+  props
+}) => {
+  const value = getNestedValue(props, key);
+  if (flatSchema[key]?.type === "text-content" && typeof value !== "string") {
+    return;
+  }
+  return value;
+};
+var readValuesFromProps = (props, keys, flatSchema) => {
   const out = {};
   for (const key of keys) {
-    out[key] = getNestedValue(props, key);
+    out[key] = flatSchema ? getRuntimeValueForSchemaKey({ flatSchema, key, props }) : getNestedValue(props, key);
   }
   return out;
 };
@@ -5184,6 +5203,7 @@ var selectActiveKeys = (schema, values) => {
   return Object.keys(flattenActiveSchema(schema, (key) => values[key]));
 };
 var mergeValues = ({
+  flatSchema,
   props,
   valuesDotNotation,
   schemaKeys,
@@ -5192,6 +5212,9 @@ var mergeValues = ({
   const merged = { ...props };
   for (const key of schemaKeys) {
     const value = valuesDotNotation[key];
+    if (flatSchema[key]?.type === "text-content" && value === undefined) {
+      continue;
+    }
     const parts = key.split(".");
     if (parts.length === 1) {
       merged[key] = value;
@@ -5209,7 +5232,8 @@ var mergeValues = ({
     }
     current[parts[parts.length - 1]] = value;
   }
-  deleteNestedKey(merged, propsToDelete);
+  const propsToDeleteWithoutTextContent = new Set([...propsToDelete].filter((key) => !(flatSchema[key]?.type === "text-content" && valuesDotNotation[key] === undefined)));
+  deleteNestedKey(merged, propsToDeleteWithoutTextContent);
   return merged;
 };
 var stackToOverrideMap = {};
@@ -5256,8 +5280,12 @@ var withInteractivitySchema = ({
       return newOverrideId;
     });
     const nodePath = nodePathMapping.overrideIdToNodePathMappings[overrideId] ?? null;
-    const runtimeValues = flatKeys.map((k) => getNestedValue(props, k));
-    const currentRuntimeValueDotNotation = useMemo13(() => readValuesFromProps(props, flatKeys), runtimeValues);
+    const runtimeValues = flatKeys.map((key) => getRuntimeValueForSchemaKey({
+      flatSchema,
+      key,
+      props
+    }));
+    const currentRuntimeValueDotNotation = useMemo13(() => readValuesFromProps(props, flatKeys, flatSchema), runtimeValues);
     const controls = useMemo13(() => {
       return {
         schema: schemaWithSequenceName,
@@ -5285,6 +5313,7 @@ var withInteractivitySchema = ({
     ]);
     const activeKeys = selectActiveKeys(schemaWithSequenceName, valuesDotNotation);
     const mergedProps = mergeValues({
+      flatSchema,
       props,
       valuesDotNotation,
       schemaKeys: activeKeys,
@@ -7908,7 +7937,7 @@ var getTimelineDuration = ({
     trimAfter
   });
   if (parentSequenceDurationInFrames !== null) {
-    const cappedDuration = Math.min(parentSequenceDurationInFrames * playbackRate, mediaDuration);
+    const cappedDuration = Math.min(parentSequenceDurationInFrames, mediaDuration);
     return Number(cappedDuration.toFixed(10));
   }
   return mediaDuration;
@@ -10706,7 +10735,8 @@ addSequenceStackTraces(Img);
 var interactiveElementSchema = {
   ...baseSchema,
   ...transformSchema,
-  ...textSchema
+  ...textSchema,
+  ...textContentSchema
 };
 var setRef = (ref, value) => {
   if (typeof ref === "function") {
@@ -29449,7 +29479,7 @@ var PagesOfDocs = () => {
     className: "flex-col",
     children: [
       /* @__PURE__ */ jsxs12("div", {
-        style: { display: "flex", alignItems: "center" },
+        style: { display: "flex", alignItems: "center", gap: 8 },
         children: [
           /* @__PURE__ */ jsx57(StatItemContent, {
             content: /* @__PURE__ */ jsx57("svg", {
@@ -29463,12 +29493,11 @@ var PagesOfDocs = () => {
                 fill: "var(--text-color)"
               })
             }),
-            width: "40px"
+            width: "32px"
           }),
           /* @__PURE__ */ jsx57(StatItemContent, {
             content: "1000",
-            width: "85px",
-            maxWidth: "100px",
+            width: "112px",
             fontSize: "2.5rem",
             fontWeight: "bold"
           })
@@ -35834,13 +35863,13 @@ var getTimeInSeconds = ({
   if (mediaDurationInSeconds === null && loop && ifNoMediaDuration === "fail") {
     throw new Error(`Could not determine duration of ${src}, but "loop" was set.`);
   }
-  const loopDuration = loop ? Internals.calculateMediaDuration({
+  const loopDurationInFrames = loop ? Internals.calculateMediaDuration({
     trimAfter,
     mediaDurationInFrames: mediaDurationInSeconds ? mediaDurationInSeconds * fps : Infinity,
     playbackRate: 1,
     trimBefore
-  }) / fps : Infinity;
-  const timeInSeconds = unloopedTimeInSeconds * playbackRate % loopDuration;
+  }) : Infinity;
+  const timeInSeconds = loop ? unloopedTimeInSeconds * playbackRate * fps % loopDurationInFrames / fps : unloopedTimeInSeconds * playbackRate;
   if ((trimAfter ?? null) !== null && !loop) {
     const time = (trimAfter - (trimBefore ?? 0)) / fps;
     if (timeInSeconds >= time) {
@@ -36736,6 +36765,43 @@ var roundTo4Digits = (timestamp) => {
   return Math.round(timestamp * 1000) / 1000;
 };
 var BUFFER_SIZE = 3;
+var releaseCanvas = Symbol("releaseCanvas");
+var releaseStableFrame = (frame) => {
+  frame?.[releaseCanvas]?.();
+};
+var makeStableFramePool = () => {
+  const availableCanvases = [];
+  const makeStableFrame = (frame) => {
+    const { canvas } = frame;
+    const stableCanvas = availableCanvases.pop() ?? new OffscreenCanvas(canvas.width, canvas.height);
+    if (stableCanvas.width !== canvas.width) {
+      stableCanvas.width = canvas.width;
+    }
+    if (stableCanvas.height !== canvas.height) {
+      stableCanvas.height = canvas.height;
+    }
+    const context = stableCanvas.getContext("2d");
+    if (!context) {
+      throw new Error("Could not create canvas context");
+    }
+    context.drawImage(canvas, 0, 0);
+    let released = false;
+    const stableFrame = {
+      canvas: stableCanvas,
+      duration: frame.duration,
+      timestamp: frame.timestamp,
+      [releaseCanvas]: () => {
+        if (released) {
+          return;
+        }
+        released = true;
+        availableCanvases.push(stableCanvas);
+      }
+    };
+    return stableFrame;
+  };
+  return { makeStableFrame };
+};
 var canvasesAheadOfTime = (videoSink, startTimestamp) => {
   const iterator = videoSink.canvases(startTimestamp);
   const buffer = [];
@@ -36743,8 +36809,9 @@ var canvasesAheadOfTime = (videoSink, startTimestamp) => {
   let reachedEnd = false;
   let closed = false;
   let inFlight = null;
-  const closeFrame = (frame) => {
-    frame.close?.();
+  const stableFramePool = makeStableFramePool();
+  const takeFrame = (frame) => {
+    return stableFramePool.makeStableFrame(frame);
   };
   const fillNext = () => {
     if (chaining || reachedEnd || closed)
@@ -36755,17 +36822,18 @@ var canvasesAheadOfTime = (videoSink, startTimestamp) => {
     const slot = { promise: iterator.next(), resolved: null };
     buffer.push(slot);
     inFlight = slot.promise.then((result) => {
-      slot.resolved = result;
       chaining = false;
       inFlight = null;
       if (result.done) {
+        slot.resolved = result;
         reachedEnd = true;
         return;
       }
       if (closed) {
-        closeFrame(result.value);
+        slot.resolved = { done: true, value: undefined };
         return;
       }
+      slot.resolved = { ...result, value: takeFrame(result.value) };
       fillNext();
     }, () => {
       chaining = false;
@@ -36793,7 +36861,7 @@ var canvasesAheadOfTime = (videoSink, startTimestamp) => {
             return next2.resolved.done ? null : next2.resolved.value;
           }
           const result = await next2.promise;
-          return result.done ? null : result.value;
+          return result.done ? null : takeFrame(result.value);
         }
       };
     }
@@ -36807,7 +36875,10 @@ var canvasesAheadOfTime = (videoSink, startTimestamp) => {
       type: "pending",
       wait: async () => {
         const result = await slot.promise;
-        return result.done ? null : result.value;
+        if (slot.resolved) {
+          return slot.resolved.done ? null : slot.resolved.value;
+        }
+        return result.done ? null : takeFrame(result.value);
       }
     };
   };
@@ -36815,7 +36886,7 @@ var canvasesAheadOfTime = (videoSink, startTimestamp) => {
     closed = true;
     for (const slot of buffer) {
       if (slot.resolved && !slot.resolved.done) {
-        closeFrame(slot.resolved.value);
+        releaseStableFrame(slot.resolved.value);
       }
     }
     buffer.length = 0;
@@ -36858,6 +36929,12 @@ var createVideoIterator = async (timeToSeek, cache2) => {
   const initialFrame = firstAwait && firstAwait.type === "ready" ? firstAwait.frame : await firstAwait.wait();
   let lastReturnedFrame = initialFrame;
   let peekedFrame = null;
+  const setLastReturnedFrame = (frame) => {
+    if (lastReturnedFrame !== frame) {
+      releaseStableFrame(lastReturnedFrame);
+    }
+    lastReturnedFrame = frame;
+  };
   const peek = async () => {
     if (peekedFrame) {
       return peekedFrame;
@@ -36873,7 +36950,7 @@ var createVideoIterator = async (timeToSeek, cache2) => {
   const getNextOrNullIfNotAvailable = () => {
     if (peekedFrame) {
       const frame = peekedFrame;
-      lastReturnedFrame = frame;
+      setLastReturnedFrame(frame);
       const retValue = {
         type: "got-frame-or-end",
         frame
@@ -36888,7 +36965,7 @@ var createVideoIterator = async (timeToSeek, cache2) => {
         waitPromise: async () => {
           const res = await next.wait();
           if (res) {
-            lastReturnedFrame = res;
+            setLastReturnedFrame(res);
           } else {
             iteratorEnded = true;
           }
@@ -36897,7 +36974,7 @@ var createVideoIterator = async (timeToSeek, cache2) => {
       };
     }
     if (next.frame) {
-      lastReturnedFrame = next.frame;
+      setLastReturnedFrame(next.frame);
     } else {
       iteratorEnded = true;
     }
@@ -36908,15 +36985,21 @@ var createVideoIterator = async (timeToSeek, cache2) => {
   };
   const destroy = () => {
     destroyed = true;
+    releaseStableFrame(lastReturnedFrame);
+    if (peekedFrame !== lastReturnedFrame) {
+      releaseStableFrame(peekedFrame);
+    }
     lastReturnedFrame = null;
+    peekedFrame = null;
     iterator.closeIterator().catch(() => {
       return;
     });
   };
   const tryToSatisfySeek = async (time) => {
+    const timestamp = roundTo4Digits(time);
     if (lastReturnedFrame) {
       const frameTimestamp = roundTo4Digits(lastReturnedFrame.timestamp);
-      if (roundTo4Digits(time) < frameTimestamp) {
+      if (timestamp < frameTimestamp) {
         const lastFrameWasInitialFrame = lastReturnedFrame === initialFrame;
         const firstFrameDoesSatisfy = lastFrameWasInitialFrame && roundTo4Digits(time) >= roundTo4Digits(timeToSeek);
         if (firstFrameDoesSatisfy) {
@@ -36938,7 +37021,6 @@ var createVideoIterator = async (timeToSeek, cache2) => {
         }
       }
       const frameEndTimestamp = roundTo4Digits(lastReturnedFrame.timestamp + lastFrameDuration);
-      const timestamp = roundTo4Digits(time);
       if (frameTimestamp <= timestamp && frameEndTimestamp > timestamp) {
         return {
           type: "satisfied",
@@ -36982,7 +37064,6 @@ var createVideoIterator = async (timeToSeek, cache2) => {
         }
         const frameTimestamp = roundTo4Digits(frame.frame.timestamp);
         const frameEndTimestamp = roundTo4Digits(frame.frame.timestamp + frame.frame.duration);
-        const timestamp = roundTo4Digits(time);
         if (frameTimestamp <= timestamp && frameEndTimestamp > timestamp) {
           return {
             type: "satisfied",
@@ -37036,7 +37117,7 @@ var videoIteratorManager = async ({
     }
   }
   const canvasSink = new CanvasSink(videoTrack, {
-    poolSize: 2,
+    poolSize: 3,
     fit: "contain",
     alpha: true
   });
@@ -40449,6 +40530,8 @@ var VideoForPreviewAssertedShowing = ({
   const effectChainState = useEffectChainState2();
   const effectsRef = useRef213(effects);
   effectsRef.current = effects;
+  const onErrorRef = useRef213(onError);
+  onErrorRef.current = onError;
   const effectChainStateRef = useRef213(effectChainState);
   effectChainStateRef.current = effectChainState;
   const parentSequence = useContext49(SequenceContext22);
@@ -40553,7 +40636,7 @@ var VideoForPreviewAssertedShowing = ({
         }
         const handleError = (error2, fallbackMessage) => {
           const [action, errorToUse] = callOnErrorAndResolve({
-            onError,
+            onError: onErrorRef.current,
             error: error2,
             disallowFallback: disallowFallbackToOffthreadVideo,
             isClientSideRendering: false,
@@ -40588,7 +40671,7 @@ var VideoForPreviewAssertedShowing = ({
         }
       }).catch((error2) => {
         const [action, errorToUse] = callOnErrorAndResolve({
-          onError,
+          onError: onErrorRef.current,
           error: error2,
           disallowFallback: disallowFallbackToOffthreadVideo,
           isClientSideRendering: false,
@@ -40603,7 +40686,7 @@ var VideoForPreviewAssertedShowing = ({
     } catch (error2) {
       const [action, errorToUse] = callOnErrorAndResolve({
         error: error2,
-        onError,
+        onError: onErrorRef.current,
         disallowFallback: disallowFallbackToOffthreadVideo,
         isClientSideRendering: false,
         clientSideError: error2
@@ -40634,7 +40717,6 @@ var VideoForPreviewAssertedShowing = ({
     preloadedSrc,
     sharedAudioContext,
     videoConfig.fps,
-    onError,
     credentials,
     initialRequestInit,
     setMediaDurationInSeconds
@@ -42662,7 +42744,7 @@ import {
 import { BufferTarget, StreamTarget } from "mediabunny";
 
 // ../core/dist/esm/version.mjs
-var VERSION2 = "4.0.484";
+var VERSION2 = "4.0.485";
 
 // ../web-renderer/dist/esm/index.mjs
 import { AudioSample, VideoSample } from "mediabunny";
@@ -46157,12 +46239,12 @@ var getPrecomposeRectForMask = (element) => {
 };
 var handleMask = ({
   gradientInfo,
-  rect,
+  maskRect,
   precomposeRect,
   tempContext,
   scale
 }) => {
-  const rectToFill = new DOMRect((rect.left - precomposeRect.left) * scale, (rect.top - precomposeRect.top) * scale, rect.width * scale, rect.height * scale);
+  const rectToFill = new DOMRect((maskRect.left - precomposeRect.left) * scale, (maskRect.top - precomposeRect.top) * scale, maskRect.width * scale, maskRect.height * scale);
   const gradient = createCanvasGradient({
     ctx: tempContext,
     rect: rectToFill,
@@ -46283,7 +46365,7 @@ var processNode = async ({
       if (precompositing.needsMaskImage) {
         handleMask({
           gradientInfo: precompositing.needsMaskImage,
-          rect,
+          maskRect: dimensions,
           precomposeRect,
           tempContext,
           scale
@@ -46405,12 +46487,21 @@ var currentColorValues = new Set(["currentcolor", "currentColor"]);
 var getDefaultTextDecorationThickness = (fontSizePx) => {
   return Math.max(1, Number.isFinite(fontSizePx) ? fontSizePx / 16 : 1);
 };
+var getTextDecorationStyle = (style2) => {
+  if (style2 === "wavy") {
+    return null;
+  }
+  if (style2 === "double" || style2 === "dotted" || style2 === "dashed") {
+    return style2;
+  }
+  return "solid";
+};
 var parseTextDecoration = ({
   onlyBackgroundClipText,
   style: style2
 }) => {
-  const textDecorationStyle = style2.getPropertyValue("text-decoration-style");
-  if (textDecorationStyle && textDecorationStyle !== "solid") {
+  const textDecorationStyle = getTextDecorationStyle(style2.getPropertyValue("text-decoration-style").trim());
+  if (textDecorationStyle === null) {
     return null;
   }
   const textDecorationLine = style2.getPropertyValue("text-decoration-line");
@@ -46429,7 +46520,8 @@ var parseTextDecoration = ({
   return {
     lines: lines2,
     color: onlyBackgroundClipText || !textDecorationColor || currentColorValues.has(textDecorationColor) ? onlyBackgroundClipText ? "black" : style2.color : textDecorationColor,
-    thickness
+    thickness,
+    style: textDecorationStyle
   };
 };
 var getTextDecorations = ({
@@ -46476,6 +46568,26 @@ var getTextDecorationY = ({
   }
   return y - actualAscent * 0.35;
 };
+var getTextDecorationLineDashPattern = (style2, thickness) => {
+  if (style2 === "dashed") {
+    return [thickness * 2, thickness];
+  }
+  if (style2 === "dotted") {
+    return [thickness, thickness];
+  }
+  return [];
+};
+var strokeTextDecorationLine = ({
+  contextToDraw,
+  endX,
+  lineY,
+  startX
+}) => {
+  contextToDraw.beginPath();
+  contextToDraw.moveTo(startX, lineY);
+  contextToDraw.lineTo(endX, lineY);
+  contextToDraw.stroke();
+};
 var drawTextDecoration = ({
   contextToDraw,
   fontSizePx,
@@ -46506,10 +46618,31 @@ var drawTextDecoration = ({
         thickness: textDecoration.thickness,
         fontSizePx
       });
-      contextToDraw.beginPath();
-      contextToDraw.moveTo(startX, lineY);
-      contextToDraw.lineTo(endX, lineY);
-      contextToDraw.stroke();
+      if (textDecoration.style === "double") {
+        contextToDraw.setLineDash([]);
+        strokeTextDecorationLine({
+          contextToDraw,
+          endX,
+          lineY: lineY - textDecoration.thickness,
+          startX
+        });
+        strokeTextDecorationLine({
+          contextToDraw,
+          endX,
+          lineY: lineY + textDecoration.thickness,
+          startX
+        });
+        contextToDraw.setLineDash([]);
+        continue;
+      }
+      contextToDraw.setLineDash(getTextDecorationLineDashPattern(textDecoration.style, textDecoration.thickness));
+      strokeTextDecorationLine({
+        contextToDraw,
+        endX,
+        lineY,
+        startX
+      });
+      contextToDraw.setLineDash([]);
     }
   }
   contextToDraw.restore();

package/dist/design.js

@@ -5565,7 +5565,7 @@ var getComponentsToAddStacksTo = () => componentsToAddStacksTo;
 var addSequenceStackTraces = (component) => {
   componentsToAddStacksTo.push(component);
 };
-var VERSION = "4.0.484";
+var VERSION = "4.0.485";
 var checkMultipleRemotionVersions = () => {
   if (typeof globalThis === "undefined") {
     return;
@@ -6036,6 +6036,14 @@ var textSchema = {
     hiddenFromList: false
   }
 };
+var textContentSchema = {
+  children: {
+    type: "text-content",
+    default: "",
+    description: "Text",
+    keyframable: false
+  }
+};
 var premountSchema = {
   premountFor: {
     type: "number",
@@ -8403,10 +8411,21 @@ var getNestedValue = (obj, key) => {
   }
   return current;
 };
-var readValuesFromProps = (props, keys) => {
+var getRuntimeValueForSchemaKey = ({
+  flatSchema,
+  key,
+  props
+}) => {
+  const value = getNestedValue(props, key);
+  if (flatSchema[key]?.type === "text-content" && typeof value !== "string") {
+    return;
+  }
+  return value;
+};
+var readValuesFromProps = (props, keys, flatSchema) => {
   const out = {};
   for (const key of keys) {
-    out[key] = getNestedValue(props, key);
+    out[key] = flatSchema ? getRuntimeValueForSchemaKey({ flatSchema, key, props }) : getNestedValue(props, key);
   }
   return out;
 };
@@ -8414,6 +8433,7 @@ var selectActiveKeys = (schema, values) => {
   return Object.keys(flattenActiveSchema(schema, (key) => values[key]));
 };
 var mergeValues = ({
+  flatSchema,
   props,
   valuesDotNotation,
   schemaKeys,
@@ -8422,6 +8442,9 @@ var mergeValues = ({
   const merged = { ...props };
   for (const key of schemaKeys) {
     const value = valuesDotNotation[key];
+    if (flatSchema[key]?.type === "text-content" && value === undefined) {
+      continue;
+    }
     const parts = key.split(".");
     if (parts.length === 1) {
       merged[key] = value;
@@ -8439,7 +8462,8 @@ var mergeValues = ({
     }
     current[parts[parts.length - 1]] = value;
   }
-  deleteNestedKey(merged, propsToDelete);
+  const propsToDeleteWithoutTextContent = new Set([...propsToDelete].filter((key) => !(flatSchema[key]?.type === "text-content" && valuesDotNotation[key] === undefined)));
+  deleteNestedKey(merged, propsToDeleteWithoutTextContent);
   return merged;
 };
 var stackToOverrideMap = {};
@@ -8486,8 +8510,12 @@ var withInteractivitySchema = ({
       return newOverrideId;
     });
     const nodePath = nodePathMapping.overrideIdToNodePathMappings[overrideId] ?? null;
-    const runtimeValues = flatKeys.map((k) => getNestedValue(props, k));
-    const currentRuntimeValueDotNotation = useMemo13(() => readValuesFromProps(props, flatKeys), runtimeValues);
+    const runtimeValues = flatKeys.map((key) => getRuntimeValueForSchemaKey({
+      flatSchema,
+      key,
+      props
+    }));
+    const currentRuntimeValueDotNotation = useMemo13(() => readValuesFromProps(props, flatKeys, flatSchema), runtimeValues);
     const controls = useMemo13(() => {
       return {
         schema: schemaWithSequenceName,
@@ -8515,6 +8543,7 @@ var withInteractivitySchema = ({
     ]);
     const activeKeys = selectActiveKeys(schemaWithSequenceName, valuesDotNotation);
     const mergedProps = mergeValues({
+      flatSchema,
       props,
       valuesDotNotation,
       schemaKeys: activeKeys,
@@ -11138,7 +11167,7 @@ var getTimelineDuration = ({
     trimAfter
   });
   if (parentSequenceDurationInFrames !== null) {
-    const cappedDuration = Math.min(parentSequenceDurationInFrames * playbackRate, mediaDuration);
+    const cappedDuration = Math.min(parentSequenceDurationInFrames, mediaDuration);
     return Number(cappedDuration.toFixed(10));
   }
   return mediaDuration;
@@ -13936,7 +13965,8 @@ addSequenceStackTraces(Img);
 var interactiveElementSchema = {
   ...baseSchema,
   ...transformSchema,
-  ...textSchema
+  ...textSchema,
+  ...textContentSchema
 };
 var setRef = (ref, value) => {
   if (typeof ref === "function") {