@remotion/promo-pages 4.0.452 → 4.0.454

package/dist/Homepage.js

@@ -2043,7 +2043,7 @@ var getComponentsToAddStacksTo = () => componentsToAddStacksTo;
 var addSequenceStackTraces = (component) => {
   componentsToAddStacksTo.push(component);
 };
-var VERSION = "4.0.452";
+var VERSION = "4.0.454";
 var checkMultipleRemotionVersions = () => {
   if (typeof globalThis === "undefined") {
     return;
@@ -25789,9 +25789,10 @@ var useElementSize = (ref, options2) => {
         setSize(null);
         return;
       }
-      const probableCssParentScale = contentRect.width === 0 ? 1 : newSize[0].width / contentRect.width;
-      const width = options2.shouldApplyCssTransforms || probableCssParentScale === 0 ? newSize[0].width : newSize[0].width * (1 / probableCssParentScale);
-      const height = options2.shouldApplyCssTransforms || probableCssParentScale === 0 ? newSize[0].height : newSize[0].height * (1 / probableCssParentScale);
+      const probableCssParentScaleX = contentRect.width === 0 ? 1 : newSize[0].width / contentRect.width;
+      const probableCssParentScaleY = contentRect.height === 0 ? 1 : newSize[0].height / contentRect.height;
+      const width = options2.shouldApplyCssTransforms || probableCssParentScaleX === 0 ? newSize[0].width : newSize[0].width * (1 / probableCssParentScaleX);
+      const height = options2.shouldApplyCssTransforms || probableCssParentScaleY === 0 ? newSize[0].height : newSize[0].height * (1 / probableCssParentScaleY);
       setSize((prevState) => {
         const isSame = prevState && prevState.width === width && prevState.height === height && prevState.left === newSize[0].x && prevState.top === newSize[0].y && prevState.windowSize.height === window.innerHeight && prevState.windowSize.width === window.innerWidth;
         if (isSame) {
@@ -27505,9 +27506,11 @@ var SharedPlayerContexts = ({
   logLevel,
   audioLatencyHint,
   volumePersistenceKey,
+  initialVolume,
   inputProps,
   audioEnabled
 }) => {
+  const persistVolumeToStorage = initialVolume === undefined;
   const compositionManagerContext = useMemo132(() => {
     const context = {
       compositions: [
@@ -27552,7 +27555,7 @@ var SharedPlayerContexts = ({
     inputProps
   ]);
   const [mediaMuted, setMediaMuted] = useState122(() => initiallyMuted);
-  const [mediaVolume, setMediaVolume] = useState122(() => getPreferredVolume(volumePersistenceKey ?? null));
+  const [mediaVolume, setMediaVolume] = useState122(() => persistVolumeToStorage ? getPreferredVolume(volumePersistenceKey ?? null) : initialVolume);
   const mediaVolumeContextValue = useMemo132(() => {
     return {
       mediaMuted,
@@ -27561,8 +27564,10 @@ var SharedPlayerContexts = ({
   }, [mediaMuted, mediaVolume]);
   const setMediaVolumeAndPersist = useCallback122((vol) => {
     setMediaVolume(vol);
-    persistVolume(vol, logLevel, volumePersistenceKey ?? null);
-  }, [logLevel, volumePersistenceKey]);
+    if (persistVolumeToStorage) {
+      persistVolume(vol, logLevel, volumePersistenceKey ?? null);
+    }
+  }, [persistVolumeToStorage, logLevel, volumePersistenceKey]);
   const setMediaVolumeContextValue = useMemo132(() => {
     return {
       setMediaMuted,
@@ -27777,6 +27782,7 @@ var PlayerFn = ({
   acknowledgeRemotionLicense,
   audioLatencyHint = "playback",
   volumePersistenceKey,
+  initialVolume,
   ...componentProps
 }, ref) => {
   if (typeof window !== "undefined") {
@@ -27851,6 +27857,12 @@ var PlayerFn = ({
   if (typeof spaceKeyToPlayOrPause !== "boolean" && typeof spaceKeyToPlayOrPause !== "undefined") {
     throw new TypeError(`'spaceKeyToPlayOrPause' must be a boolean or undefined but got '${typeof spaceKeyToPlayOrPause}' instead`);
   }
+  if (typeof initialVolume !== "undefined" && typeof initialVolume !== "number") {
+    throw new TypeError(`'initialVolume' must be a number or undefined but got '${typeof initialVolume}' instead`);
+  }
+  if (typeof initialVolume === "number" && (!Number.isFinite(initialVolume) || Number.isNaN(initialVolume) || initialVolume < 0 || initialVolume > 1)) {
+    throw new TypeError(`'initialVolume' must be between 0 and 1 but got '${initialVolume}' instead`);
+  }
   if (typeof numberOfSharedAudioTags !== "number" || numberOfSharedAudioTags % 1 !== 0 || !Number.isFinite(numberOfSharedAudioTags) || Number.isNaN(numberOfSharedAudioTags) || numberOfSharedAudioTags < 0) {
     throw new TypeError(`'numberOfSharedAudioTags' must be an integer but got '${numberOfSharedAudioTags}' instead`);
   }
@@ -27910,6 +27922,7 @@ var PlayerFn = ({
       logLevel,
       audioLatencyHint,
       volumePersistenceKey,
+      initialVolume,
       inputProps: actualInputProps,
       audioEnabled: true,
       children: /* @__PURE__ */ jsx143(Internals.SetTimelineContext.Provider, {
@@ -28968,7 +28981,7 @@ import { AudioBufferSink, InputDisposedError } from "mediabunny";
 import { CanvasSink } from "mediabunny";
 import { useMemo as useMemo51 } from "react";
 import { useContext as useContext47, useLayoutEffect as useLayoutEffect17 } from "react";
-import { useContext as useContext212, useState as useState40, useEffect as useEffect41 } from "react";
+import { useContext as useContext212, useEffect as useEffect41, useState as useState40 } from "react";
 import { jsx as jsx57 } from "react/jsx-runtime";
 import { useContext as useContext46, useLayoutEffect as useLayoutEffect24, useMemo as useMemo310, useState as useState312 } from "react";
 import React211 from "react";
@@ -29726,6 +29739,11 @@ var drawPreviewOverlay = ({
     context.fillText(lines2[i], boxLeft + boxPaddingX, boxTop + boxPaddingY + i * lineHeight);
   }
 };
+var getDurationOrCompute = async (input) => {
+  return await input.getDurationFromMetadata(undefined, {
+    skipLiveWait: true
+  }) ?? input.computeDuration(undefined, { skipLiveWait: true });
+};
 function isNetworkError(error2) {
   if (error2.message.includes("Failed to fetch") || error2.message.includes("Load failed") || error2.message.includes("NetworkError when attempting to fetch resource")) {
     return true;
@@ -29748,11 +29766,74 @@ var makeNonceManager = () => {
     createAsyncOperation
   };
 };
+var canvasesAheadOfTime = (videoSink, startTimestamp) => {
+  const iterator = videoSink.canvases(startTimestamp);
+  let inFlight = iterator.next();
+  let resolved = null;
+  const trackResolution = () => {
+    const captured = inFlight;
+    captured.then((result) => {
+      if (captured === inFlight) {
+        resolved = result;
+      }
+    }, () => {
+      return;
+    });
+  };
+  trackResolution();
+  const advance2 = () => {
+    inFlight = iterator.next();
+    resolved = null;
+    trackResolution();
+  };
+  const next = () => {
+    if (resolved) {
+      if (resolved.done) {
+        return { type: "ready", frame: null };
+      }
+      const frame = resolved.value;
+      advance2();
+      return { type: "ready", frame };
+    }
+    const captured = inFlight;
+    return {
+      type: "pending",
+      wait: async () => {
+        const result = await captured;
+        if (captured === inFlight && !result.done) {
+          advance2();
+        }
+        return result.done ? null : result.value;
+      }
+    };
+  };
+  const closeFrame = (frame) => {
+    frame.close?.();
+  };
+  const closeIterator = async () => {
+    if (resolved) {
+      if (!resolved.done) {
+        closeFrame(resolved.value);
+      }
+    } else {
+      const captured = inFlight;
+      captured.then((result) => {
+        if (!result.done) {
+          closeFrame(result.value);
+        }
+      }, () => {
+        return;
+      });
+    }
+    await iterator.return();
+  };
+  return { next, closeIterator };
+};
 var makePrewarmedVideoIteratorCache = (videoSink) => {
   const prewarmedVideoIterators = new Map;
   const prewarmIteratorForLooping = ({ timeToSeek }) => {
     if (!prewarmedVideoIterators.has(timeToSeek)) {
-      prewarmedVideoIterators.set(timeToSeek, videoSink.canvases(timeToSeek));
+      prewarmedVideoIterators.set(timeToSeek, canvasesAheadOfTime(videoSink, timeToSeek));
     }
   };
   const makeIteratorOrUsePrewarmed = (timeToSeek) => {
@@ -29761,12 +29842,11 @@ var makePrewarmedVideoIteratorCache = (videoSink) => {
       prewarmedVideoIterators.delete(timeToSeek);
       return prewarmedIterator;
     }
-    const iterator = videoSink.canvases(timeToSeek);
-    return iterator;
+    return canvasesAheadOfTime(videoSink, timeToSeek);
   };
   const destroy = () => {
     for (const iterator of prewarmedVideoIterators.values()) {
-      iterator.return();
+      iterator.closeIterator();
     }
     prewarmedVideoIterators.clear();
   };
@@ -29783,48 +29863,43 @@ var createVideoIterator = async (timeToSeek, cache2) => {
   let destroyed = false;
   const iterator = cache2.makeIteratorOrUsePrewarmed(timeToSeek);
   let iteratorEnded = false;
-  const initialFrame = (await iterator.next())?.value ?? null;
+  const firstAwait = iterator.next();
+  const initialFrame = firstAwait && firstAwait.type === "ready" ? firstAwait.frame : await firstAwait.wait();
   let lastReturnedFrame = initialFrame;
-  const getNextOrNullIfNotAvailable = async () => {
+  const getNextOrNullIfNotAvailable = () => {
     const next = iterator.next();
-    const result = await Promise.race([
-      next,
-      new Promise((resolve) => {
-        Promise.resolve().then(() => resolve());
-      })
-    ]);
-    if (!result) {
+    if (next.type === "pending") {
       return {
         type: "need-to-wait-for-it",
         waitPromise: async () => {
-          const res = await next;
-          if (res.value) {
-            lastReturnedFrame = res.value;
+          const res = await next.wait();
+          if (res) {
+            lastReturnedFrame = res;
           } else {
             iteratorEnded = true;
           }
-          return res.value;
+          return res;
         }
       };
     }
-    if (result.value) {
-      lastReturnedFrame = result.value;
+    if (next.frame) {
+      lastReturnedFrame = next.frame;
     } else {
       iteratorEnded = true;
     }
     return {
       type: "got-frame-or-end",
-      frame: result.value ?? null
+      frame: next.frame ?? null
     };
   };
   const destroy = () => {
     destroyed = true;
     lastReturnedFrame = null;
-    iterator.return().catch(() => {
+    iterator.closeIterator().catch(() => {
       return;
     });
   };
-  const tryToSatisfySeek = async (time) => {
+  const tryToSatisfySeek = (time) => {
     if (lastReturnedFrame) {
       const frameTimestamp = roundTo4Digits(lastReturnedFrame.timestamp);
       if (roundTo4Digits(time) < frameTimestamp) {
@@ -29863,7 +29938,7 @@ var createVideoIterator = async (timeToSeek, cache2) => {
       };
     }
     while (true) {
-      const frame = await getNextOrNullIfNotAvailable();
+      const frame = getNextOrNullIfNotAvailable();
       if (frame.type === "need-to-wait-for-it") {
         return {
           type: "not-satisfied",
@@ -29907,7 +29982,7 @@ var createVideoIterator = async (timeToSeek, cache2) => {
     tryToSatisfySeek
   };
 };
-var videoIteratorManager = ({
+var videoIteratorManager = async ({
   delayPlaybackHandleIfNotPremounting,
   canvas,
   context,
@@ -29924,9 +29999,11 @@ var videoIteratorManager = ({
   let framesRendered = 0;
   let currentDelayHandle = null;
   if (canvas) {
-    if (canvas.width !== videoTrack.displayWidth || canvas.height !== videoTrack.displayHeight) {
-      canvas.width = videoTrack.displayWidth;
-      canvas.height = videoTrack.displayHeight;
+    const displayWidth = await videoTrack.getDisplayWidth();
+    const displayHeight = await videoTrack.getDisplayHeight();
+    if (canvas.width !== displayWidth || canvas.height !== displayHeight) {
+      canvas.width = displayWidth;
+      canvas.height = displayHeight;
     }
   }
   const canvasSink = new CanvasSink(videoTrack, {
@@ -29987,7 +30064,7 @@ var videoIteratorManager = ({
         });
       }
     }
-    const videoSatisfyResult = await videoFrameIterator.tryToSatisfySeek(newTime);
+    const videoSatisfyResult = videoFrameIterator.tryToSatisfySeek(newTime);
     if (videoSatisfyResult.type === "satisfied") {
       drawFrame(videoSatisfyResult.frame);
       return;
@@ -30020,6 +30097,7 @@ var videoIteratorManager = ({
 };
 
 class MediaPlayer {
+  tagType;
   canvas;
   context;
   src;
@@ -30066,7 +30144,8 @@ class MediaPlayer {
     onVideoFrameCallback,
     playing,
     sequenceOffset,
-    credentials
+    credentials,
+    tagType
   }) {
     this.canvas = canvas ?? null;
     this.src = src;
@@ -30077,7 +30156,7 @@ class MediaPlayer {
     this.loop = loop;
     this.trimBefore = trimBefore;
     this.trimAfter = trimAfter;
-    this.audioStreamIndex = audioStreamIndex ?? 0;
+    this.audioStreamIndex = audioStreamIndex;
     this.fps = fps;
     this.debugOverlay = debugOverlay;
     this.bufferState = bufferState;
@@ -30094,6 +30173,7 @@ class MediaPlayer {
       } : undefined),
       formats: ALL_FORMATS
     });
+    this.tagType = tagType;
     if (canvas) {
       const context = canvas.getContext("2d", {
         alpha: true,
@@ -30161,7 +30241,7 @@ class MediaPlayer {
           return { type: "unknown-container-format" };
         }
         const [durationInSeconds, videoTrack, audioTracks] = await Promise.all([
-          this.input.computeDuration(),
+          getDurationOrCompute(this.input),
           this.input.getPrimaryVideoTrack(),
           this.input.getAudioTracks()
         ]);
@@ -30169,11 +30249,17 @@ class MediaPlayer {
           return { type: "disposed" };
         }
         this.totalDuration = durationInSeconds;
-        const audioTrack = audioTracks[this.audioStreamIndex] ?? null;
+        const audioTrack = await (this.audioStreamIndex === null ? videoTrack?.getPrimaryPairableAudioTrack() : audioTracks[this.audioStreamIndex] ?? null);
         if (!videoTrack && !audioTrack) {
           return { type: "no-tracks" };
         }
-        if (videoTrack) {
+        if (videoTrack && this.tagType === "video") {
+          if (await videoTrack.isLive()) {
+            throw new Error("Live streams are not currently supported by Remotion. Sorry! Source: " + this.src);
+          }
+          if (await videoTrack.isRelativeToUnixEpoch()) {
+            throw new Error("Streams with UNIX timestamps are not currently supported by Remotion. Sorry! Source: " + this.src);
+          }
           const canDecode = await videoTrack.canDecode();
           if (!canDecode) {
             return { type: "cannot-decode" };
@@ -30181,7 +30267,7 @@ class MediaPlayer {
           if (this.input.disposed) {
             return { type: "disposed" };
           }
-          this.videoIteratorManager = videoIteratorManager({
+          this.videoIteratorManager = await videoIteratorManager({
             videoTrack,
             delayPlaybackHandleIfNotPremounting: this.delayPlaybackHandleIfNotPremounting,
             context: this.context,
@@ -30199,6 +30285,12 @@ class MediaPlayer {
           throw new Error(`should have asserted that the time is not null`);
         }
         if (audioTrack && this.sharedAudioContext) {
+          if (await audioTrack.isLive()) {
+            throw new Error("Live streams are not currently supported by Remotion. Sorry! Source: " + this.src);
+          }
+          if (await audioTrack.isRelativeToUnixEpoch()) {
+            throw new Error("Streams with UNIX timestamps are not currently supported by Remotion. Sorry! Source: " + this.src);
+          }
           const canDecode = await audioTrack.canDecode();
           if (!canDecode) {
             return { type: "cannot-decode" };
@@ -30737,9 +30829,7 @@ var useMediaInTimeline2 = ({
   const parentSequence = useContext212(Internals.SequenceContext);
   const startsAt = Internals.useMediaStartsAt();
   const { registerSequence, unregisterSequence } = useContext212(Internals.SequenceManager);
-  const [sequenceId] = useState40(() => String(Math.random()));
   const [mediaId] = useState40(() => String(Math.random()));
-  const frame = useCurrentFrame();
   const {
     volumes,
     duration,
@@ -30768,32 +30858,13 @@ var useMediaInTimeline2 = ({
     if (!showInTimeline) {
       return;
     }
-    const loopIteration = loopDisplay ? Math.floor(frame / loopDisplay.durationInFrames) : 0;
-    if (loopDisplay) {
-      registerSequence({
-        type: "sequence",
-        premountDisplay,
-        postmountDisplay,
-        parent: parentSequence?.id ?? null,
-        displayName: finalDisplayName,
-        rootId,
-        showInTimeline: true,
-        nonce: nonce.get(),
-        loopDisplay,
-        stack,
-        from: 0,
-        duration,
-        id: sequenceId,
-        controls: null
-      });
-    }
     registerSequence({
       type: mediaType,
       src,
       id: mediaId,
-      duration: loopDisplay?.durationInFrames ?? duration,
-      from: loopDisplay ? loopIteration * loopDisplay.durationInFrames : 0,
-      parent: loopDisplay ? sequenceId : parentSequence?.id ?? null,
+      duration,
+      from: 0,
+      parent: parentSequence?.id ?? null,
       displayName: finalDisplayName,
       rootId,
       volume: volumes,
@@ -30801,17 +30872,14 @@ var useMediaInTimeline2 = ({
       nonce: nonce.get(),
       startMediaFrom: 0 - startsAt + (trimBefore ?? 0),
       doesVolumeChange,
-      loopDisplay: undefined,
+      loopDisplay,
       playbackRate,
       stack,
-      premountDisplay: null,
-      postmountDisplay: null,
+      premountDisplay,
+      postmountDisplay,
       controls: controls ?? null
     });
     return () => {
-      if (loopDisplay) {
-        unregisterSequence(sequenceId);
-      }
       unregisterSequence(mediaId);
     };
   }, [
@@ -30830,14 +30898,12 @@ var useMediaInTimeline2 = ({
     premountDisplay,
     registerSequence,
     rootId,
-    sequenceId,
     showInTimeline,
     src,
     stack,
     startsAt,
     unregisterSequence,
     volumes,
-    frame,
     trimBefore
   ]);
   return {
@@ -31005,7 +31071,7 @@ var AudioForPreviewAssertedShowing = ({
         fps: videoConfig.fps,
         canvas: null,
         playbackRate: initialPlaybackRate.current,
-        audioStreamIndex: audioStreamIndex ?? 0,
+        audioStreamIndex: audioStreamIndex ?? null,
         debugOverlay: false,
         bufferState: buffer,
         isPostmounting: initialIsPostmounting.current,
@@ -31015,7 +31081,8 @@ var AudioForPreviewAssertedShowing = ({
         onVideoFrameCallback: null,
         playing: initialPlaying.current,
         sequenceOffset: initialSequenceOffset.current,
-        credentials
+        credentials,
+        tagType: "audio"
       });
       mediaPlayerRef.current = player;
       player.initialize(currentTimeRef.current, initialMuted.current).then((result) => {
@@ -31181,7 +31248,7 @@ var AudioForPreview2 = ({
     return null;
   }
   return /* @__PURE__ */ jsx57(AudioForPreviewAssertedShowing, {
-    audioStreamIndex: audioStreamIndex ?? 0,
+    audioStreamIndex,
     src: preloadedSrc,
     playbackRate,
     logLevel: logLevel ?? defaultLogLevel,
@@ -32318,6 +32385,12 @@ var getSinks = async (src, credentials) => {
     if (!videoTrack) {
       return "no-video-track";
     }
+    if (await videoTrack.isLive()) {
+      throw new Error("Live streams are not currently supported by Remotion. Sorry! Source: " + src);
+    }
+    if (await videoTrack.isRelativeToUnixEpoch()) {
+      throw new Error("Streams with UNIX timestamps are not currently supported by Remotion. Sorry! Source: " + src);
+    }
     const canDecode = await videoTrack.canDecode();
     if (!canDecode) {
       return "cannot-decode";
@@ -32351,8 +32424,8 @@ var getSinks = async (src, credentials) => {
     if (format === "network-error") {
       return "network-error";
     }
-    const audioTracks = await input.getAudioTracks();
-    const audioTrack = audioTracks[index2];
+    const videoTrack = await input.getPrimaryVideoTrack();
+    const audioTrack = videoTrack === null ? (await input.getAudioTracks())[index2 ?? 0] : await (index2 === null ? videoTrack?.getPrimaryPairableAudioTrack() : (await input.getAudioTracks())[index2] ?? null);
     if (!audioTrack) {
       return "no-audio-track";
     }
@@ -32365,11 +32438,12 @@ var getSinks = async (src, credentials) => {
     };
   };
   const getAudioSinksPromise = (index2) => {
-    if (audioSinksPromise[index2]) {
-      return audioSinksPromise[index2];
+    const keyIndex = index2 === null ? -1 : index2;
+    if (audioSinksPromise[keyIndex]) {
+      return audioSinksPromise[keyIndex];
     }
-    audioSinksPromise[index2] = getAudioSinks(index2);
-    return audioSinksPromise[index2];
+    audioSinksPromise[keyIndex] = getAudioSinks(index2);
+    return audioSinksPromise[keyIndex];
   };
   return {
     getVideo: () => getVideoSinksPromise(),
@@ -32377,7 +32451,7 @@ var getSinks = async (src, credentials) => {
     actualMatroskaTimestamps: rememberActualMatroskaTimestamps(isMatroska),
     isMatroska,
     getDuration: () => {
-      return input.computeDuration();
+      return getDurationOrCompute(input);
     }
   };
 };
@@ -33055,7 +33129,7 @@ var AudioForRendering2 = ({
       includeVideo: false,
       isClientSideRendering: environment.isClientSideRendering,
       loop: loop ?? false,
-      audioStreamIndex: audioStreamIndex ?? 0,
+      audioStreamIndex: audioStreamIndex ?? null,
       trimAfter,
       trimBefore,
       fps,
@@ -33463,7 +33537,8 @@ var VideoForPreviewAssertedShowing = ({
         onVideoFrameCallback: initialOnVideoFrameRef.current ?? null,
         playing: initialPlaying.current,
         sequenceOffset: initialSequenceOffset.current,
-        credentials
+        credentials,
+        tagType: "video"
       });
       mediaPlayerRef.current = player;
       player.initialize(currentTimeRef.current, initialMuted.current).then((result) => {
@@ -35486,7 +35561,7 @@ import {
 import { BufferTarget, StreamTarget } from "mediabunny";
 
 // ../core/dist/esm/version.mjs
-var VERSION2 = "4.0.452";
+var VERSION2 = "4.0.454";
 
 // ../web-renderer/dist/esm/index.mjs
 import { AudioSample, VideoSample } from "mediabunny";
@@ -38559,6 +38634,30 @@ function skipToNextNonDescendant(treeWalker) {
   }
   return false;
 }
+var getTextOverflowForLineHeight = (computedStyle) => {
+  const { lineHeight } = computedStyle;
+  const fontSize = parseFloat(computedStyle.fontSize);
+  if (!fontSize || isNaN(fontSize)) {
+    return { top: 0, bottom: 0 };
+  }
+  let lineHeightValue;
+  if (lineHeight === "normal") {
+    return { top: 0, bottom: 0 };
+  }
+  if (lineHeight.endsWith("px")) {
+    lineHeightValue = parseFloat(lineHeight) / fontSize;
+  } else {
+    lineHeightValue = parseFloat(lineHeight);
+    if (lineHeight.endsWith("%")) {
+      lineHeightValue /= 100;
+    }
+  }
+  if (isNaN(lineHeightValue) || lineHeightValue >= 1) {
+    return { top: 0, bottom: 0 };
+  }
+  const overflow = (1 - lineHeightValue) * fontSize;
+  return { top: overflow, bottom: overflow };
+};
 var getBiggestBoundingClientRect = (element) => {
   const treeWalker = document.createTreeWalker(element, NodeFilter.SHOW_ELEMENT);
   let mostLeft = Infinity;
@@ -38570,6 +38669,7 @@ var getBiggestBoundingClientRect = (element) => {
     const outlineWidth = parseOutlineWidth(computedStyle.outlineWidth);
     const outlineOffset = parseOutlineOffset(computedStyle.outlineOffset);
     const rect = treeWalker.currentNode.getBoundingClientRect();
+    const textOverflow = getTextOverflowForLineHeight(computedStyle);
     const shadows = parseBoxShadow(computedStyle.boxShadow);
     let shadowLeft = 0;
     let shadowRight = 0;
@@ -38584,9 +38684,9 @@ var getBiggestBoundingClientRect = (element) => {
       }
     }
     mostLeft = Math.min(mostLeft, rect.left - outlineOffset - outlineWidth - shadowLeft);
-    mostTop = Math.min(mostTop, rect.top - outlineOffset - outlineWidth - shadowTop);
+    mostTop = Math.min(mostTop, rect.top - outlineOffset - outlineWidth - shadowTop - textOverflow.top);
     mostRight = Math.max(mostRight, rect.right + outlineOffset + outlineWidth + shadowRight);
-    mostBottom = Math.max(mostBottom, rect.bottom + outlineOffset + outlineWidth + shadowBottom);
+    mostBottom = Math.max(mostBottom, rect.bottom + outlineOffset + outlineWidth + shadowBottom + textOverflow.bottom);
     if (computedStyle.overflow === "hidden") {
       if (!skipToNextNonDescendant(treeWalker)) {
         break;
@@ -42334,6 +42434,7 @@ var listOfRemotionPackages = [
   "@remotion/motion-blur",
   "@remotion/noise",
   "@remotion/paths",
+  "@remotion/player-a11y",
   "@remotion/player-example",
   "@remotion/player",
   "@remotion/preload",

package/dist/design.js

@@ -6993,7 +6993,7 @@ var getComponentsToAddStacksTo = () => componentsToAddStacksTo;
 var addSequenceStackTraces = (component) => {
   componentsToAddStacksTo.push(component);
 };
-var VERSION = "4.0.452";
+var VERSION = "4.0.454";
 var checkMultipleRemotionVersions = () => {
   if (typeof globalThis === "undefined") {
     return;

package/dist/experts.js

@@ -2043,7 +2043,7 @@ var getComponentsToAddStacksTo = () => componentsToAddStacksTo;
 var addSequenceStackTraces = (component) => {
   componentsToAddStacksTo.push(component);
 };
-var VERSION = "4.0.452";
+var VERSION = "4.0.454";
 var checkMultipleRemotionVersions = () => {
   if (typeof globalThis === "undefined") {
     return;

package/dist/homepage/Pricing.js

@@ -6993,7 +6993,7 @@ var getComponentsToAddStacksTo = () => componentsToAddStacksTo;
 var addSequenceStackTraces = (component) => {
   componentsToAddStacksTo.push(component);
 };
-var VERSION = "4.0.452";
+var VERSION = "4.0.454";
 var checkMultipleRemotionVersions = () => {
   if (typeof globalThis === "undefined") {
     return;

package/dist/prompts/PromptsGallery.js

@@ -6993,7 +6993,7 @@ var getComponentsToAddStacksTo = () => componentsToAddStacksTo;
 var addSequenceStackTraces = (component) => {
   componentsToAddStacksTo.push(component);
 };
-var VERSION = "4.0.452";
+var VERSION = "4.0.454";
 var checkMultipleRemotionVersions = () => {
   if (typeof globalThis === "undefined") {
     return;

package/dist/prompts/PromptsShow.js

@@ -24327,7 +24327,7 @@ var getComponentsToAddStacksTo = () => componentsToAddStacksTo;
 var addSequenceStackTraces = (component) => {
   componentsToAddStacksTo.push(component);
 };
-var VERSION = "4.0.452";
+var VERSION = "4.0.454";
 var checkMultipleRemotionVersions = () => {
   if (typeof globalThis === "undefined") {
     return;

package/dist/prompts/PromptsSubmit.js

@@ -24327,7 +24327,7 @@ var getComponentsToAddStacksTo = () => componentsToAddStacksTo;
 var addSequenceStackTraces = (component) => {
   componentsToAddStacksTo.push(component);
 };
-var VERSION = "4.0.452";
+var VERSION = "4.0.454";
 var checkMultipleRemotionVersions = () => {
   if (typeof globalThis === "undefined") {
     return;