@remotion/promo-pages 4.0.483 → 4.0.485

package/dist/Homepage.js

@@ -2335,7 +2335,7 @@ var getComponentsToAddStacksTo = () => componentsToAddStacksTo;
 var addSequenceStackTraces = (component) => {
   componentsToAddStacksTo.push(component);
 };
-var VERSION = "4.0.483";
+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: "900",
-            width: "85px",
-            maxWidth: "100px",
+            content: "1000",
+            width: "112px",
             fontSize: "2.5rem",
             fontWeight: "bold"
           })
@@ -29698,8 +29727,8 @@ var CommunityStats_default = CommunityStats;
 
 // ../player/dist/esm/index.mjs
 import { createContext as createContext32 } from "react";
-import { jsx as jsx59, jsxs as jsxs14 } from "react/jsx-runtime";
-import { jsx as jsx214, jsxs as jsxs24, Fragment as Fragment12 } from "react/jsx-runtime";
+import { jsx as jsx59, jsxs as jsxs14, Fragment as Fragment12 } from "react/jsx-runtime";
+import { jsx as jsx214, jsxs as jsxs24, Fragment as Fragment23 } from "react/jsx-runtime";
 import React56 from "react";
 import { useContext as useContext210, useEffect as useEffect42, useState as useState38 } from "react";
 import { useContext as useContext46, useLayoutEffect as useLayoutEffect17 } from "react";
@@ -29749,10 +29778,10 @@ import { jsx as jsx104, jsxs as jsxs62 } from "react/jsx-runtime";
 import { useMemo as useMemo72 } from "react";
 import { jsxs as jsxs72 } from "react/jsx-runtime";
 import { useMemo as useMemo82 } from "react";
-import { jsx as jsx114, jsxs as jsxs82, Fragment as Fragment23 } from "react/jsx-runtime";
+import { jsx as jsx114, jsxs as jsxs82, Fragment as Fragment32 } from "react/jsx-runtime";
 import { useCallback as useCallback92, useMemo as useMemo112 } from "react";
 import { useCallback as useCallback82, useMemo as useMemo102, useRef as useRef92 } from "react";
-import { jsx as jsx124, jsxs as jsxs92, Fragment as Fragment32 } from "react/jsx-runtime";
+import { jsx as jsx124, jsxs as jsxs92, Fragment as Fragment42 } from "react/jsx-runtime";
 import { useCallback as useCallback112, useMemo as useMemo132, useState as useState122 } from "react";
 import { jsx as jsx133 } from "react/jsx-runtime";
 
@@ -31245,27 +31274,113 @@ if (typeof createContext32 !== "function") {
 }
 var ICON_SIZE2 = 25;
 var fullscreenIconSize = 16;
-var PlayIcon = () => {
-  return /* @__PURE__ */ jsx59("svg", {
+var focusRingFallbackColor = "Highlight";
+var focusRingColor = "-webkit-focus-ring-color";
+var focusRingStyle = {
+  stroke: focusRingColor
+};
+var playPath = "M8 6.375C7.40904 8.17576 7.06921 10.2486 7.01438 12.3871C6.95955 14.5255 7.19163 16.6547 7.6875 18.5625C9.95364 18.2995 12.116 17.6164 14.009 16.5655C15.902 15.5147 17.4755 14.124 18.6088 12.5C17.5158 10.8949 15.9949 9.51103 14.1585 8.45082C12.3222 7.3906 10.2174 6.68116 8 6.375Z";
+var playFocusPath = "M93.4691 0.0367432C84.4873 0.520935 77.2494 1.93634 69.9553 4.69266C66.3176 6.05219 60.3548 9.0134 57.0734 11.062C43.3476 19.6103 32.8846 32.4606 27.428 47.4154C26.3405 50.3766 23.3966 59.8188 21.5027 66.3185C8.88329 109.768 1.7204 157.277 0.182822 207.561C-0.0609408 215.569 -0.0609408 234.639 0.182822 242.517C1.21413 275.854 4.42055 305.949 10.2334 336.641C12.596 349.063 16.3837 365.75 18.5776 373.33C23.059 388.732 32.2095 401.843 45.2227 411.453C53.9419 417.896 63.8425 422.217 74.8118 424.34C80.0996 425.365 87.075 425.83 92.2127 425.495C99.3194 425.029 113.42 423.148 124.877 421.118C176.517 411.974 224.22 395.604 267.478 372.175C294.874 357.332 318.294 341.26 340.888 321.761C363.408 302.355 382.609 281.478 399.504 258.049C403.423 252.63 405.392 249.464 407.361 245.478C412.424 235.198 414.805 224.974 414.786 213.539C414.786 202.886 412.761 193.425 408.392 183.741C406.292 179.066 404.286 175.714 399.785 169.345C383.21 145.898 364.815 125.467 342.389 105.614C307.624 74.8481 266.335 49.613 220.226 30.9334C210.232 26.8921 200.387 23.335 188.537 19.4799C163.448 11.3413 132.396 4.28293 106.126 0.763062C102.001 0.204346 96.3942 -0.112244 93.4691 0.0367432Z";
+var playIconStrokeWidth = 6.25;
+var playFocusStrokeWidth = 1.5;
+var playFocusPadding = 2;
+var playPathBounds = {
+  x1: 7.006500987565134,
+  y1: 6.375,
+  x2: 18.6088,
+  y2: 18.5625
+};
+var playFocusPathBounds = {
+  x1: -0.00000009999999999649709,
+  y1: 0.000013203698169792638,
+  x2: 414.7861127950162,
+  y2: 425.60252460486765
+};
+var expandBounds = (bounds, padding) => {
+  return {
+    x1: bounds.x1 - padding,
+    y1: bounds.y1 - padding,
+    x2: bounds.x2 + padding,
+    y2: bounds.y2 + padding
+  };
+};
+var getBoundsWidth = (bounds) => bounds.x2 - bounds.x1;
+var getBoundsHeight = (bounds) => bounds.y2 - bounds.y1;
+var fitBoundsTransform = ({
+  source,
+  target
+}) => {
+  const scale = Math.min(getBoundsWidth(target) / getBoundsWidth(source), getBoundsHeight(target) / getBoundsHeight(source));
+  const x = target.x1 + (getBoundsWidth(target) - getBoundsWidth(source) * scale) / 2 - source.x1 * scale;
+  const y = target.y1 + (getBoundsHeight(target) - getBoundsHeight(source) * scale) / 2 - source.y1 * scale;
+  return `translate(${x.toFixed(4)} ${y.toFixed(4)}) scale(${scale.toFixed(5)})`;
+};
+var playFocusTransform = fitBoundsTransform({
+  source: playFocusPathBounds,
+  target: expandBounds(expandBounds(playPathBounds, playIconStrokeWidth / 2), playFocusPadding)
+});
+var PlayIcon = ({ focused }) => {
+  return /* @__PURE__ */ jsxs14("svg", {
     width: ICON_SIZE2,
     height: ICON_SIZE2,
     viewBox: "0 0 25 25",
     fill: "none",
-    children: /* @__PURE__ */ jsx59("path", {
-      d: "M8 6.375C7.40904 8.17576 7.06921 10.2486 7.01438 12.3871C6.95955 14.5255 7.19163 16.6547 7.6875 18.5625C9.95364 18.2995 12.116 17.6164 14.009 16.5655C15.902 15.5147 17.4755 14.124 18.6088 12.5C17.5158 10.8949 15.9949 9.51103 14.1585 8.45082C12.3222 7.3906 10.2174 6.68116 8 6.375Z",
-      fill: "white",
-      stroke: "white",
-      strokeWidth: "6.25",
-      strokeLinejoin: "round"
-    })
+    children: [
+      focused ? /* @__PURE__ */ jsx59("path", {
+        d: playFocusPath,
+        fill: "none",
+        stroke: focusRingFallbackColor,
+        strokeWidth: playFocusStrokeWidth,
+        style: focusRingStyle,
+        transform: playFocusTransform,
+        vectorEffect: "non-scaling-stroke"
+      }) : null,
+      /* @__PURE__ */ jsx59("path", {
+        d: playPath,
+        fill: "white",
+        stroke: "white",
+        strokeWidth: playIconStrokeWidth,
+        strokeLinejoin: "round"
+      })
+    ]
   });
 };
-var PauseIcon = () => {
+var PauseIcon = ({
+  focused
+}) => {
   return /* @__PURE__ */ jsxs14("svg", {
     viewBox: "0 0 100 100",
     width: ICON_SIZE2,
     height: ICON_SIZE2,
     children: [
+      focused ? /* @__PURE__ */ jsxs14(Fragment12, {
+        children: [
+          /* @__PURE__ */ jsx59("rect", {
+            x: "21",
+            y: "16",
+            width: "28",
+            height: "68",
+            fill: "none",
+            stroke: focusRingFallbackColor,
+            strokeWidth: "4",
+            ry: "9",
+            rx: "9",
+            style: focusRingStyle
+          }),
+          /* @__PURE__ */ jsx59("rect", {
+            x: "51",
+            y: "16",
+            width: "28",
+            height: "68",
+            fill: "none",
+            stroke: focusRingFallbackColor,
+            strokeWidth: "4",
+            ry: "9",
+            rx: "9",
+            style: focusRingStyle
+          })
+        ]
+      }) : null,
       /* @__PURE__ */ jsx59("rect", {
         x: "25",
         y: "20",
@@ -31383,7 +31498,7 @@ var studioStyle = {
 };
 var BufferingIndicator = ({ type }) => {
   const style = type === "player" ? playerStyle : studioStyle;
-  return /* @__PURE__ */ jsxs24(Fragment12, {
+  return /* @__PURE__ */ jsxs24(Fragment23, {
     children: [
       /* @__PURE__ */ jsx214("style", {
         type: "text/css",
@@ -32597,16 +32712,20 @@ var RenderWarningIfBlacklist = () => {
     })
   });
 };
-var DefaultPlayPauseButton = ({ playing, buffering }) => {
+var DefaultPlayPauseButton = ({ playing, buffering, focused }) => {
   if (playing && buffering) {
     return /* @__PURE__ */ jsx64(BufferingIndicator, {
       type: "player"
     });
   }
   if (playing) {
-    return /* @__PURE__ */ jsx64(PauseIcon, {});
+    return /* @__PURE__ */ jsx64(PauseIcon, {
+      focused
+    });
   }
-  return /* @__PURE__ */ jsx64(PlayIcon, {});
+  return /* @__PURE__ */ jsx64(PlayIcon, {
+    focused
+  });
 };
 var KNOB_SIZE = 12;
 var BAR_HEIGHT = 5;
@@ -33330,6 +33449,7 @@ var Controls = ({
   renderCustomControls
 }) => {
   const playButtonRef = useRef82(null);
+  const [playButtonFocused, setPlayButtonFocused] = useState102(false);
   const [supportsFullscreen, setSupportsFullscreen] = useState102(false);
   const hovered = useHoverState(containerRef, hideControlsWhenPointerDoesntMove);
   const { maxTimeLabelWidth, displayVerticalVolumeSlider } = useVideoControlsResize({
@@ -33364,6 +33484,15 @@ var Controls = ({
       opacity: Number(shouldShow)
     };
   }, [hovered, shouldShowInitially, playing, alwaysShowControls]);
+  const playPauseButtonStyle = useMemo92(() => {
+    if (renderPlayPauseButton !== null || playing && buffering) {
+      return playerButtonStyle;
+    }
+    return {
+      ...playerButtonStyle,
+      outline: "none"
+    };
+  }, [buffering, playing, renderPlayPauseButton]);
   useEffect112(() => {
     if (playButtonRef.current && spaceKeyToPlayOrPause) {
       playButtonRef.current.focus({
@@ -33416,6 +33545,12 @@ var Controls = ({
       onDoubleClick?.(e);
     }
   }, [onDoubleClick]);
+  const onPlayButtonFocus = useCallback72(() => {
+    setPlayButtonFocused(true);
+  }, []);
+  const onPlayButtonBlur = useCallback72(() => {
+    setPlayButtonFocused(false);
+  }, []);
   return /* @__PURE__ */ jsxs82("div", {
     ref,
     style: containerCss,
@@ -33432,22 +33567,26 @@ var Controls = ({
               /* @__PURE__ */ jsx114("button", {
                 ref: playButtonRef,
                 type: "button",
-                style: playerButtonStyle,
+                style: playPauseButtonStyle,
                 onClick: toggle,
+                onFocus: onPlayButtonFocus,
+                onBlur: onPlayButtonBlur,
                 "aria-label": playing ? "Pause video" : "Play video",
                 title: playing ? "Pause video" : "Play video",
                 children: renderPlayPauseButton === null ? /* @__PURE__ */ jsx114(DefaultPlayPauseButton, {
                   buffering,
+                  focused: playButtonFocused,
                   playing
                 }) : renderPlayPauseButton({
                   playing,
                   isBuffering: buffering
                 }) ?? /* @__PURE__ */ jsx114(DefaultPlayPauseButton, {
                   buffering,
+                  focused: false,
                   playing
                 })
               }),
-              showVolumeControls ? /* @__PURE__ */ jsxs82(Fragment23, {
+              showVolumeControls ? /* @__PURE__ */ jsxs82(Fragment32, {
                 children: [
                   /* @__PURE__ */ jsx114("div", {
                     style: xSpacer
@@ -33984,7 +34123,7 @@ var PlayerUI = ({
     showPosterWhenBufferingAndPaused && showBufferIndicator && !player.isPlaying()
   ].some(Boolean);
   const { left, top, width, height, ...outerWithoutScale } = outer;
-  const content = /* @__PURE__ */ jsxs92(Fragment32, {
+  const content = /* @__PURE__ */ jsxs92(Fragment42, {
     children: [
       /* @__PURE__ */ jsxs92("div", {
         style: outer,
@@ -35724,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) {
@@ -36626,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 = [];
@@ -36633,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)
@@ -36645,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;
@@ -36683,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);
         }
       };
     }
@@ -36697,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);
       }
     };
   };
@@ -36705,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;
@@ -36748,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;
@@ -36763,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
@@ -36778,7 +36965,7 @@ var createVideoIterator = async (timeToSeek, cache2) => {
         waitPromise: async () => {
           const res = await next.wait();
           if (res) {
-            lastReturnedFrame = res;
+            setLastReturnedFrame(res);
           } else {
             iteratorEnded = true;
           }
@@ -36787,7 +36974,7 @@ var createVideoIterator = async (timeToSeek, cache2) => {
       };
     }
     if (next.frame) {
-      lastReturnedFrame = next.frame;
+      setLastReturnedFrame(next.frame);
     } else {
       iteratorEnded = true;
     }
@@ -36798,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) {
@@ -36828,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",
@@ -36872,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",
@@ -36926,7 +37117,7 @@ var videoIteratorManager = async ({
     }
   }
   const canvasSink = new CanvasSink(videoTrack, {
-    poolSize: 2,
+    poolSize: 3,
     fit: "contain",
     alpha: true
   });
@@ -40339,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);
@@ -40402,32 +40595,19 @@ var VideoForPreviewAssertedShowing = ({
     };
   }, [_experimentalInitiallyDrawCachedFrame, src]);
   useEffect212(() => {
-    if (!sharedAudioContext)
-      return;
-    if (!sharedAudioContext.audioContext)
-      return;
-    const {
-      audioContext,
-      gainNode,
-      audioSyncAnchor,
-      scheduleAudioNode,
-      unscheduleAudioNode
-    } = sharedAudioContext;
-    if (!gainNode) {
-      return;
-    }
+    const sharedAudioContextForMediaPlayer = sharedAudioContext?.audioContext && sharedAudioContext.gainNode ? {
+      audioContext: sharedAudioContext.audioContext,
+      gainNode: sharedAudioContext.gainNode,
+      audioSyncAnchor: sharedAudioContext.audioSyncAnchor,
+      scheduleAudioNode: sharedAudioContext.scheduleAudioNode,
+      unscheduleAudioNode: sharedAudioContext.unscheduleAudioNode
+    } : null;
     try {
       const player = new MediaPlayer({
         canvas: canvasRef.current,
         src: preloadedSrc,
         logLevel,
-        sharedAudioContext: {
-          audioContext,
-          gainNode,
-          audioSyncAnchor,
-          scheduleAudioNode,
-          unscheduleAudioNode
-        },
+        sharedAudioContext: sharedAudioContextForMediaPlayer,
         loop,
         trimAfter: initialTrimAfterRef.current,
         trimBefore: initialTrimBeforeRef.current,
@@ -40456,7 +40636,7 @@ var VideoForPreviewAssertedShowing = ({
         }
         const handleError = (error2, fallbackMessage) => {
           const [action, errorToUse] = callOnErrorAndResolve({
-            onError,
+            onError: onErrorRef.current,
             error: error2,
             disallowFallback: disallowFallbackToOffthreadVideo,
             isClientSideRendering: false,
@@ -40491,7 +40671,7 @@ var VideoForPreviewAssertedShowing = ({
         }
       }).catch((error2) => {
         const [action, errorToUse] = callOnErrorAndResolve({
-          onError,
+          onError: onErrorRef.current,
           error: error2,
           disallowFallback: disallowFallbackToOffthreadVideo,
           isClientSideRendering: false,
@@ -40506,7 +40686,7 @@ var VideoForPreviewAssertedShowing = ({
     } catch (error2) {
       const [action, errorToUse] = callOnErrorAndResolve({
         error: error2,
-        onError,
+        onError: onErrorRef.current,
         disallowFallback: disallowFallbackToOffthreadVideo,
         isClientSideRendering: false,
         clientSideError: error2
@@ -40537,7 +40717,6 @@ var VideoForPreviewAssertedShowing = ({
     preloadedSrc,
     sharedAudioContext,
     videoConfig.fps,
-    onError,
     credentials,
     initialRequestInit,
     setMediaDurationInSeconds
@@ -42565,7 +42744,7 @@ import {
 import { BufferTarget, StreamTarget } from "mediabunny";
 
 // ../core/dist/esm/version.mjs
-var VERSION2 = "4.0.483";
+var VERSION2 = "4.0.485";
 
 // ../web-renderer/dist/esm/index.mjs
 import { AudioSample, VideoSample } from "mediabunny";
@@ -46060,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,
@@ -46186,7 +46365,7 @@ var processNode = async ({
       if (precompositing.needsMaskImage) {
         handleMask({
           gradientInfo: precompositing.needsMaskImage,
-          rect,
+          maskRect: dimensions,
           precomposeRect,
           tempContext,
           scale
@@ -46299,6 +46478,175 @@ var parsePaintOrder = (paintOrder) => {
 var parseTextShadow = (textShadowValue) => {
   return parseShadowValues(textShadowValue);
 };
+var textDecorationLines = [
+  "underline",
+  "overline",
+  "line-through"
+];
+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 = getTextDecorationStyle(style2.getPropertyValue("text-decoration-style").trim());
+  if (textDecorationStyle === null) {
+    return null;
+  }
+  const textDecorationLine = style2.getPropertyValue("text-decoration-line");
+  const lineParts = textDecorationLine.split(/\s+/);
+  const lines2 = textDecorationLines.filter((line) => lineParts.includes(line));
+  if (lines2.length === 0) {
+    return null;
+  }
+  const textDecorationThickness = style2.getPropertyValue("text-decoration-thickness");
+  const thicknessValue = parseFloat(textDecorationThickness);
+  const thickness = Number.isFinite(thicknessValue) ? thicknessValue : getDefaultTextDecorationThickness(parseFloat(style2.fontSize));
+  if (thickness <= 0) {
+    return null;
+  }
+  const textDecorationColor = style2.getPropertyValue("text-decoration-color");
+  return {
+    lines: lines2,
+    color: onlyBackgroundClipText || !textDecorationColor || currentColorValues.has(textDecorationColor) ? onlyBackgroundClipText ? "black" : style2.color : textDecorationColor,
+    thickness,
+    style: textDecorationStyle
+  };
+};
+var getTextDecorations = ({
+  computedStyle,
+  onlyBackgroundClipText,
+  span
+}) => {
+  const decorations = [];
+  const spanDecoration = parseTextDecoration({
+    onlyBackgroundClipText,
+    style: computedStyle
+  });
+  if (spanDecoration) {
+    decorations.push(spanDecoration);
+  }
+  let parent = span.parentElement;
+  while (parent) {
+    const parentDecoration = parseTextDecoration({
+      onlyBackgroundClipText,
+      style: getComputedStyle(parent)
+    });
+    if (parentDecoration) {
+      decorations.push(parentDecoration);
+    }
+    parent = parent.parentElement;
+  }
+  return decorations;
+};
+var getTextDecorationY = ({
+  line,
+  measurements,
+  y,
+  thickness,
+  fontSizePx
+}) => {
+  const fontAscent = measurements.fontBoundingBoxAscent || measurements.actualBoundingBoxAscent || fontSizePx;
+  const fontDescent = measurements.fontBoundingBoxDescent || measurements.actualBoundingBoxDescent || fontSizePx * 0.2;
+  const actualAscent = measurements.actualBoundingBoxAscent || fontAscent;
+  if (line === "underline") {
+    return y + Math.max(thickness, fontDescent * 0.4);
+  }
+  if (line === "overline") {
+    return y - fontAscent + thickness / 2;
+  }
+  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,
+  measurements,
+  parentRect,
+  textDecorations,
+  token,
+  y
+}) => {
+  if (textDecorations.length === 0) {
+    return;
+  }
+  const startX = token.rect.left - parentRect.x;
+  const endX = token.rect.right - parentRect.x;
+  if (endX <= startX) {
+    return;
+  }
+  contextToDraw.save();
+  contextToDraw.lineCap = "butt";
+  for (const textDecoration of textDecorations) {
+    contextToDraw.strokeStyle = textDecoration.color;
+    contextToDraw.lineWidth = textDecoration.thickness;
+    for (const line of textDecoration.lines) {
+      const lineY = getTextDecorationY({
+        line,
+        measurements,
+        y,
+        thickness: textDecoration.thickness,
+        fontSizePx
+      });
+      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();
+};
 var drawText = ({
   span,
   logLevel,
@@ -46349,6 +46697,11 @@ var drawText = ({
     contextToDraw.fillStyle = onlyBackgroundClipText ? "black" : webkitTextFillColor;
     contextToDraw.letterSpacing = letterSpacing;
     contextToDraw.wordSpacing = wordSpacing;
+    const textDecorations = getTextDecorations({
+      computedStyle,
+      onlyBackgroundClipText,
+      span
+    });
     const strokeWidth2 = parseFloat(webkitTextStrokeWidth);
     const hasStroke = strokeWidth2 > 0;
     if (hasStroke) {
@@ -46399,6 +46752,15 @@ var drawText = ({
         drawFill();
         drawStroke();
       }
+      drawTextDecoration({
+        contextToDraw,
+        fontSizePx,
+        measurements,
+        parentRect,
+        textDecorations,
+        token,
+        y
+      });
     }
     span.textContent = originalText;
     finishFilter();
@@ -49416,6 +49778,7 @@ var listOfRemotionPackages = [
   "@remotion/bugs",
   "@remotion/brand",
   "@remotion/bundler",
+  "@remotion/browser-studio",
   "@remotion/canvas-capture",
   "@remotion/cli",
   "@remotion/cloudrun",
@@ -50830,32 +51193,6 @@ var GetStarted = () => {
           className: "w-full",
           children: /* @__PURE__ */ jsx168(GithubButton, {})
         })
-      }),
-      " ",
-      /* @__PURE__ */ jsx168("div", {
-        className: "w-2 h-2"
-      }),
-      /* @__PURE__ */ jsx168("div", {
-        className: "w-full lg:w-auto",
-        children: /* @__PURE__ */ jsxs66(Button, {
-          href: "/prompts",
-          className: "w-full",
-          children: [
-            /* @__PURE__ */ jsx168("svg", {
-              width: "20",
-              height: "20",
-              viewBox: "0 0 149 149",
-              fill: "none",
-              xmlns: "http://www.w3.org/2000/svg",
-              style: { marginRight: 8 },
-              children: /* @__PURE__ */ jsx168("path", {
-                d: "M29.05 98.54L58.19 82.19L58.68 80.77L58.19 79.98H56.77L51.9 79.68L35.25 79.23L20.81 78.63L6.82 77.88L3.3 77.13L0 72.78L0.340004 70.61L3.3 68.62L7.54 68.99L16.91 69.63L30.97 70.6L41.17 71.2L56.28 72.77H58.68L59.02 71.8L58.2 71.2L57.56 70.6L43.01 60.74L27.26 50.32L19.01 44.32L14.55 41.28L12.3 38.43L11.33 32.21L15.38 27.75L20.82 28.12L22.21 28.49L27.72 32.73L39.49 41.84L54.86 53.16L57.11 55.03L58.01 54.39L58.12 53.94L57.11 52.25L48.75 37.14L39.83 21.77L35.86 15.4L34.81 11.58C34.44 10.01 34.17 8.69 34.17 7.08L38.78 0.820007L41.33 0L47.48 0.820007L50.07 3.07001L53.89 11.81L60.08 25.57L69.68 44.28L72.49 49.83L73.99 54.97L74.55 56.54H75.52V55.64L76.31 45.1L77.77 32.16L79.19 15.51L79.68 10.82L82 5.2L86.61 2.16L90.21 3.88L93.17 8.12L92.76 10.86L91 22.3L87.55 40.22L85.3 52.22H86.61L88.11 50.72L94.18 42.66L104.38 29.91L108.88 24.85L114.13 19.26L117.5 16.6H123.87L128.56 23.57L126.46 30.77L119.9 39.09L114.46 46.14L106.66 56.64L101.79 65.04L102.24 65.71L103.4 65.6L121.02 61.85L130.54 60.13L141.9 58.18L147.04 60.58L147.6 63.02L145.58 68.01L133.43 71.01L119.18 73.86L97.96 78.88L97.7 79.07L98 79.44L107.56 80.34L111.65 80.56H121.66L140.3 81.95L145.17 85.17L148.09 89.11L147.6 92.11L140.1 95.93L129.98 93.53L106.36 87.91L98.26 85.89H97.14V86.56L103.89 93.16L116.26 104.33L131.75 118.73L132.54 122.29L130.55 125.1L128.45 124.8L114.84 114.56L109.59 109.95L97.7 99.94H96.91V100.99L99.65 105L114.12 126.75L114.87 133.42L113.82 135.59L110.07 136.9L105.95 136.15L97.48 124.26L88.74 110.87L81.69 98.87L80.83 99.36L76.67 144.17L74.72 146.46L70.22 148.18L66.47 145.33L64.48 140.72L66.47 131.61L68.87 119.72L70.82 110.27L72.58 98.53L73.63 94.63L73.56 94.37L72.7 94.48L63.85 106.63L50.39 124.82L39.74 136.22L37.19 137.23L32.77 134.94L33.18 130.85L35.65 127.21L50.39 108.46L59.28 96.84L65.02 90.13L64.98 89.16H64.64L25.49 114.58L18.52 115.48L15.52 112.67L15.89 108.06L17.31 106.56L29.08 98.46L29.04 98.5L29.05 98.54Z",
-                fill: "#D97757"
-              })
-            }),
-            "Prompt a video"
-          ]
-        })
       })
     ]
   });