@remotion/promo-pages 4.0.327 → 4.0.330

package/dist/Homepage.js

@@ -190,34 +190,34 @@ import {
 } from "react";
 import { jsx as jsx26 } from "react/jsx-runtime";
 import React25, { createContext as createContext18 } from "react";
-import React26, { useMemo as useMemo26 } from "react";
-import { jsx as jsx27 } from "react/jsx-runtime";
-import { Children, forwardRef as forwardRef9, useMemo as useMemo27 } from "react";
-import React27 from "react";
-import React28, { createContext as createContext19 } from "react";
-import { jsx as jsx28 } from "react/jsx-runtime";
-import { jsx as jsx29 } from "react/jsx-runtime";
-import React30 from "react";
-import { useCallback as useCallback15 } from "react";
 import {
-  useCallback as useCallback14,
+  forwardRef as forwardRef9,
   useContext as useContext28,
-  useEffect as useEffect18,
-  useLayoutEffect as useLayoutEffect9,
-  useMemo as useMemo28,
+  useEffect as useEffect19,
+  useImperativeHandle as useImperativeHandle9,
+  useMemo as useMemo26,
+  useRef as useRef16,
   useState as useState17
 } from "react";
+import { useEffect as useEffect18 } from "react";
+import { jsx as jsx27 } from "react/jsx-runtime";
+import React27, { useMemo as useMemo27 } from "react";
+import { jsx as jsx28 } from "react/jsx-runtime";
+import { Children, forwardRef as forwardRef10, useMemo as useMemo28 } from "react";
+import React28 from "react";
+import React29, { createContext as createContext19 } from "react";
+import { jsx as jsx29 } from "react/jsx-runtime";
 import { jsx as jsx30 } from "react/jsx-runtime";
+import React31 from "react";
+import { useCallback as useCallback15 } from "react";
 import {
-  forwardRef as forwardRef10,
+  useCallback as useCallback14,
   useContext as useContext29,
   useEffect as useEffect20,
-  useImperativeHandle as useImperativeHandle9,
+  useLayoutEffect as useLayoutEffect9,
   useMemo as useMemo29,
-  useRef as useRef16,
   useState as useState18
 } from "react";
-import { useEffect as useEffect19 } from "react";
 import { jsx as jsx31 } from "react/jsx-runtime";
 import { jsx as jsx322 } from "react/jsx-runtime";
 import { forwardRef as forwardRef12, useCallback as useCallback16, useContext as useContext31 } from "react";
@@ -238,15 +238,15 @@ function getNodeEnvString() {
 function truthy(value) {
   return Boolean(value);
 }
-function validateDefaultCodec(defaultCodec, location) {
+function validateCodec(defaultCodec, location, name) {
   if (typeof defaultCodec === "undefined") {
     return;
   }
   if (typeof defaultCodec !== "string") {
-    throw new TypeError(`The "defaultCodec" prop ${location} must be a string, but you passed a value of type ${typeof defaultCodec}.`);
+    throw new TypeError(`The "${name}" prop ${location} must be a string, but you passed a value of type ${typeof defaultCodec}.`);
   }
   if (!validCodecs.includes(defaultCodec)) {
-    throw new Error(`The "defaultCodec" prop ${location} must be one of ${validCodecs.join(", ")}, but you passed ${defaultCodec}.`);
+    throw new Error(`The "${name}" prop ${location} must be one of ${validCodecs.join(", ")}, but you passed ${defaultCodec}.`);
   }
 }
 function validateDimension(amount, nameOfProp, location) {
@@ -436,19 +436,19 @@ function exponentialBackoff(errorCount) {
   return 1000 * 2 ** (errorCount - 1);
 }
 function useRemotionContexts() {
-  const compositionManagerCtx = React26.useContext(CompositionManager);
-  const timelineContext = React26.useContext(TimelineContext);
-  const setTimelineContext = React26.useContext(SetTimelineContext);
-  const sequenceContext = React26.useContext(SequenceContext);
-  const nonceContext = React26.useContext(NonceContext);
-  const canUseRemotionHooksContext = React26.useContext(CanUseRemotionHooks);
-  const preloadContext = React26.useContext(PreloadContext);
-  const resolveCompositionContext = React26.useContext(ResolveCompositionContext);
-  const renderAssetManagerContext = React26.useContext(RenderAssetManager);
-  const sequenceManagerContext = React26.useContext(SequenceManager);
-  const bufferManagerContext = React26.useContext(BufferingContextReact);
-  const logLevelContext = React26.useContext(LogLevelContext);
-  return useMemo26(() => ({
+  const compositionManagerCtx = React27.useContext(CompositionManager);
+  const timelineContext = React27.useContext(TimelineContext);
+  const setTimelineContext = React27.useContext(SetTimelineContext);
+  const sequenceContext = React27.useContext(SequenceContext);
+  const nonceContext = React27.useContext(NonceContext);
+  const canUseRemotionHooksContext = React27.useContext(CanUseRemotionHooks);
+  const preloadContext = React27.useContext(PreloadContext);
+  const resolveCompositionContext = React27.useContext(ResolveCompositionContext);
+  const renderAssetManagerContext = React27.useContext(RenderAssetManager);
+  const sequenceManagerContext = React27.useContext(SequenceManager);
+  const bufferManagerContext = React27.useContext(BufferingContextReact);
+  const logLevelContext = React27.useContext(LogLevelContext);
+  return useMemo27(() => ({
     compositionManagerCtx,
     timelineContext,
     setTimelineContext,
@@ -735,7 +735,7 @@ var __defProp2, __export2 = (target, all) => {
   });
 }, useIsPlayer = () => {
   return useContext(IsPlayerContext);
-}, VERSION = "4.0.327", checkMultipleRemotionVersions = () => {
+}, VERSION = "4.0.330", checkMultipleRemotionVersions = () => {
   if (typeof globalThis === "undefined") {
     return;
   }
@@ -1029,7 +1029,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
     component: `of the "<Composition />" component with the id "${compositionId}"`
   });
   const defaultCodec = calculated?.defaultCodec;
-  validateDefaultCodec(defaultCodec, calculateMetadataErrorLocation);
+  validateCodec(defaultCodec, calculateMetadataErrorLocation, "defaultCodec");
   const defaultOutName = calculated?.defaultOutName;
   const defaultVideoImageFormat = calculated?.defaultVideoImageFormat;
   const defaultPixelFormat = calculated?.defaultPixelFormat;
@@ -5162,31 +5162,251 @@ Check that all your Remotion packages are on the same version. If your dependenc
     return ratio;
   }
   return Number(previewSize);
-}, WATCH_REMOTION_STATIC_FILES = "remotion_staticFilesChanged", RemotionContextProvider = (props2) => {
+}, useEmitVideoFrame = ({
+  ref,
+  onVideoFrame
+}) => {
+  useEffect18(() => {
+    const { current } = ref;
+    if (!current) {
+      return;
+    }
+    if (!onVideoFrame) {
+      return;
+    }
+    let handle = 0;
+    const callback = () => {
+      if (!ref.current) {
+        return;
+      }
+      onVideoFrame(ref.current);
+      handle = ref.current.requestVideoFrameCallback(callback);
+    };
+    callback();
+    return () => {
+      current.cancelVideoFrameCallback(handle);
+    };
+  }, [onVideoFrame, ref]);
+}, VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
+  const context = useContext28(SharedAudioContext);
+  if (!context) {
+    throw new Error("SharedAudioContext not found");
+  }
+  const videoRef = useRef16(null);
+  const sharedSource = useMemo26(() => {
+    if (!context.audioContext) {
+      return null;
+    }
+    return makeSharedElementSourceNode({
+      audioContext: context.audioContext,
+      ref: videoRef
+    });
+  }, [context.audioContext]);
+  const {
+    volume,
+    muted,
+    playbackRate,
+    onlyWarnForMediaSeekingError,
+    src,
+    onDuration,
+    acceptableTimeShift,
+    acceptableTimeShiftInSeconds,
+    toneFrequency,
+    name,
+    _remotionInternalNativeLoopPassed,
+    _remotionInternalStack,
+    style,
+    pauseWhenBuffering,
+    showInTimeline,
+    loopVolumeCurveBehavior,
+    onError,
+    onAutoPlayError,
+    onVideoFrame,
+    crossOrigin,
+    delayRenderRetries,
+    delayRenderTimeoutInMilliseconds,
+    allowAmplificationDuringRender,
+    useWebAudioApi,
+    ...nativeProps
+  } = props2;
+  const _propsValid = true;
+  if (!_propsValid) {
+    throw new Error("typecheck error");
+  }
+  const volumePropFrame = useFrameForVolumeProp(loopVolumeCurveBehavior ?? "repeat");
+  const { fps, durationInFrames } = useVideoConfig();
+  const parentSequence = useContext28(SequenceContext);
+  const { hidden } = useContext28(SequenceVisibilityToggleContext);
+  const logLevel = useLogLevel();
+  const mountTime = useMountTime();
+  const [timelineId] = useState17(() => String(Math.random()));
+  const isSequenceHidden = hidden[timelineId] ?? false;
+  if (typeof acceptableTimeShift !== "undefined") {
+    throw new Error("acceptableTimeShift has been removed. Use acceptableTimeShiftInSeconds instead.");
+  }
+  const [mediaVolume] = useMediaVolumeState();
+  const [mediaMuted] = useMediaMutedState();
+  const userPreferredVolume = evaluateVolume({
+    frame: volumePropFrame,
+    volume,
+    mediaVolume
+  });
+  useMediaInTimeline({
+    mediaRef: videoRef,
+    volume,
+    mediaVolume,
+    mediaType: "video",
+    src,
+    playbackRate: props2.playbackRate ?? 1,
+    displayName: name ?? null,
+    id: timelineId,
+    stack: _remotionInternalStack,
+    showInTimeline,
+    premountDisplay: null,
+    onAutoPlayError: onAutoPlayError ?? null,
+    isPremounting: Boolean(parentSequence?.premounting)
+  });
+  useMediaPlayback({
+    mediaRef: videoRef,
+    src,
+    mediaType: "video",
+    playbackRate: props2.playbackRate ?? 1,
+    onlyWarnForMediaSeekingError,
+    acceptableTimeshift: acceptableTimeShiftInSeconds ?? null,
+    isPremounting: Boolean(parentSequence?.premounting),
+    pauseWhenBuffering,
+    onAutoPlayError: onAutoPlayError ?? null
+  });
+  useVolume({
+    logLevel,
+    mediaRef: videoRef,
+    volume: userPreferredVolume,
+    source: sharedSource,
+    shouldUseWebAudioApi: useWebAudioApi ?? false
+  });
+  const actualFrom = parentSequence ? parentSequence.relativeFrom : 0;
+  const duration = parentSequence ? Math.min(parentSequence.durationInFrames, durationInFrames) : durationInFrames;
+  const preloadedSrc = usePreload(src);
+  const actualSrc = useAppendVideoFragment({
+    actualSrc: preloadedSrc,
+    actualFrom,
+    duration,
+    fps
+  });
+  useImperativeHandle9(ref, () => {
+    return videoRef.current;
+  }, []);
+  useState17(() => playbackLogging({
+    logLevel,
+    message: `Mounting video with source = ${actualSrc}, v=${VERSION}, user agent=${typeof navigator === "undefined" ? "server" : navigator.userAgent}`,
+    tag: "video",
+    mountTime
+  }));
+  useEffect19(() => {
+    const { current } = videoRef;
+    if (!current) {
+      return;
+    }
+    const errorHandler = () => {
+      if (current.error) {
+        console.error("Error occurred in video", current?.error);
+        if (onError) {
+          const err = new Error(`Code ${current.error.code}: ${current.error.message}`);
+          onError(err);
+          return;
+        }
+        throw new Error(`The browser threw an error while playing the video ${src}: Code ${current.error.code} - ${current?.error?.message}. See https://remotion.dev/docs/media-playback-error for help. Pass an onError() prop to handle the error.`);
+      } else {
+        if (onError) {
+          const err = new Error(`The browser threw an error while playing the video ${src}`);
+          onError(err);
+          return;
+        }
+        throw new Error("The browser threw an error while playing the video");
+      }
+    };
+    current.addEventListener("error", errorHandler, { once: true });
+    return () => {
+      current.removeEventListener("error", errorHandler);
+    };
+  }, [onError, src]);
+  const currentOnDurationCallback = useRef16(onDuration);
+  currentOnDurationCallback.current = onDuration;
+  useEmitVideoFrame({ ref: videoRef, onVideoFrame });
+  useEffect19(() => {
+    const { current } = videoRef;
+    if (!current) {
+      return;
+    }
+    if (current.duration) {
+      currentOnDurationCallback.current?.(src, current.duration);
+      return;
+    }
+    const onLoadedMetadata = () => {
+      currentOnDurationCallback.current?.(src, current.duration);
+    };
+    current.addEventListener("loadedmetadata", onLoadedMetadata);
+    return () => {
+      current.removeEventListener("loadedmetadata", onLoadedMetadata);
+    };
+  }, [src]);
+  useEffect19(() => {
+    const { current } = videoRef;
+    if (!current) {
+      return;
+    }
+    if (isIosSafari()) {
+      current.preload = "metadata";
+    } else {
+      current.preload = "auto";
+    }
+  }, []);
+  const actualStyle = useMemo26(() => {
+    return {
+      ...style,
+      opacity: isSequenceHidden ? 0 : style?.opacity ?? 1
+    };
+  }, [isSequenceHidden, style]);
+  const crossOriginValue = getCrossOriginValue({
+    crossOrigin,
+    requestsVideoFrame: Boolean(onVideoFrame)
+  });
+  return /* @__PURE__ */ jsx27("video", {
+    ref: videoRef,
+    muted: muted || mediaMuted || isSequenceHidden || userPreferredVolume <= 0,
+    playsInline: true,
+    src: actualSrc,
+    loop: _remotionInternalNativeLoopPassed,
+    style: actualStyle,
+    disableRemotePlayback: true,
+    crossOrigin: crossOriginValue,
+    ...nativeProps
+  });
+}, VideoForPreview, WATCH_REMOTION_STATIC_FILES = "remotion_staticFilesChanged", RemotionContextProvider = (props2) => {
   const { children, contexts } = props2;
-  return /* @__PURE__ */ jsx27(LogLevelContext.Provider, {
+  return /* @__PURE__ */ jsx28(LogLevelContext.Provider, {
     value: contexts.logLevelContext,
-    children: /* @__PURE__ */ jsx27(CanUseRemotionHooks.Provider, {
+    children: /* @__PURE__ */ jsx28(CanUseRemotionHooks.Provider, {
       value: contexts.canUseRemotionHooksContext,
-      children: /* @__PURE__ */ jsx27(NonceContext.Provider, {
+      children: /* @__PURE__ */ jsx28(NonceContext.Provider, {
         value: contexts.nonceContext,
-        children: /* @__PURE__ */ jsx27(PreloadContext.Provider, {
+        children: /* @__PURE__ */ jsx28(PreloadContext.Provider, {
           value: contexts.preloadContext,
-          children: /* @__PURE__ */ jsx27(CompositionManager.Provider, {
+          children: /* @__PURE__ */ jsx28(CompositionManager.Provider, {
             value: contexts.compositionManagerCtx,
-            children: /* @__PURE__ */ jsx27(SequenceManager.Provider, {
+            children: /* @__PURE__ */ jsx28(SequenceManager.Provider, {
               value: contexts.sequenceManagerContext,
-              children: /* @__PURE__ */ jsx27(RenderAssetManager.Provider, {
+              children: /* @__PURE__ */ jsx28(RenderAssetManager.Provider, {
                 value: contexts.renderAssetManagerContext,
-                children: /* @__PURE__ */ jsx27(ResolveCompositionContext.Provider, {
+                children: /* @__PURE__ */ jsx28(ResolveCompositionContext.Provider, {
                   value: contexts.resolveCompositionContext,
-                  children: /* @__PURE__ */ jsx27(TimelineContext.Provider, {
+                  children: /* @__PURE__ */ jsx28(TimelineContext.Provider, {
                     value: contexts.timelineContext,
-                    children: /* @__PURE__ */ jsx27(SetTimelineContext.Provider, {
+                    children: /* @__PURE__ */ jsx28(SetTimelineContext.Provider, {
                       value: contexts.setTimelineContext,
-                      children: /* @__PURE__ */ jsx27(SequenceContext.Provider, {
+                      children: /* @__PURE__ */ jsx28(SequenceContext.Provider, {
                         value: contexts.sequenceContext,
-                        children: /* @__PURE__ */ jsx27(BufferingContextReact.Provider, {
+                        children: /* @__PURE__ */ jsx28(BufferingContextReact.Provider, {
                           value: contexts.bufferManagerContext,
                           children
                         })
@@ -5225,36 +5445,36 @@ Check that all your Remotion packages are on the same version. If your dependenc
     throw new RangeError(`Cannot use frame ${frame}: Duration of composition is ${durationInFrames}, therefore the highest frame that can be rendered is ${durationInFrames - 1}`);
   }
 }, flattenChildren = (children) => {
-  const childrenArray = React27.Children.toArray(children);
+  const childrenArray = React28.Children.toArray(children);
   return childrenArray.reduce((flatChildren, child) => {
-    if (child.type === React27.Fragment) {
+    if (child.type === React28.Fragment) {
       return flatChildren.concat(flattenChildren(child.props.children));
     }
     flatChildren.push(child);
     return flatChildren;
   }, []);
 }, IsInsideSeriesContext, IsInsideSeriesContainer = ({ children }) => {
-  return /* @__PURE__ */ jsx28(IsInsideSeriesContext.Provider, {
+  return /* @__PURE__ */ jsx29(IsInsideSeriesContext.Provider, {
     value: true,
     children
   });
 }, IsNotInsideSeriesProvider = ({ children }) => {
-  return /* @__PURE__ */ jsx28(IsInsideSeriesContext.Provider, {
+  return /* @__PURE__ */ jsx29(IsInsideSeriesContext.Provider, {
     value: false,
     children
   });
 }, useRequireToBeInsideSeries = () => {
-  const isInsideSeries = React28.useContext(IsInsideSeriesContext);
+  const isInsideSeries = React29.useContext(IsInsideSeriesContext);
   if (!isInsideSeries) {
     throw new Error("This component must be inside a <Series /> component.");
   }
 }, SeriesSequenceRefForwardingFunction = ({ children }, _ref) => {
   useRequireToBeInsideSeries();
-  return /* @__PURE__ */ jsx29(IsNotInsideSeriesProvider, {
+  return /* @__PURE__ */ jsx30(IsNotInsideSeriesProvider, {
     children
   });
 }, SeriesSequence, Series = (props2) => {
-  const childrenValue = useMemo27(() => {
+  const childrenValue = useMemo28(() => {
     let startFrame = 0;
     const flattenedChildren = flattenChildren(props2.children);
     return Children.map(flattenedChildren, (child, i) => {
@@ -5298,7 +5518,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
       }
       const currentStartFrame = startFrame + offset;
       startFrame += durationInFramesProp + offset;
-      return /* @__PURE__ */ jsx29(Sequence, {
+      return /* @__PURE__ */ jsx30(Sequence, {
         name: name || "<Series.Sequence>",
         from: currentStartFrame,
         durationInFrames: durationInFramesProp,
@@ -5309,14 +5529,14 @@ Check that all your Remotion packages are on the same version. If your dependenc
     });
   }, [props2.children]);
   if (ENABLE_V5_BREAKING_CHANGES) {
-    return /* @__PURE__ */ jsx29(IsInsideSeriesContainer, {
-      children: /* @__PURE__ */ jsx29(Sequence, {
+    return /* @__PURE__ */ jsx30(IsInsideSeriesContainer, {
+      children: /* @__PURE__ */ jsx30(Sequence, {
         ...props2,
         children: childrenValue
       })
     });
   }
-  return /* @__PURE__ */ jsx29(IsInsideSeriesContainer, {
+  return /* @__PURE__ */ jsx30(IsInsideSeriesContainer, {
     children: childrenValue
   });
 }, validateSpringDuration = (dur) => {
@@ -5397,227 +5617,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
     return `/${preparsed}`;
   }
   return preparsed;
-}, useEmitVideoFrame = ({
-  ref,
-  onVideoFrame
-}) => {
-  useEffect19(() => {
-    const { current } = ref;
-    if (!current) {
-      return;
-    }
-    if (!onVideoFrame) {
-      return;
-    }
-    let handle = 0;
-    const callback = () => {
-      if (!ref.current) {
-        return;
-      }
-      onVideoFrame(ref.current);
-      handle = ref.current.requestVideoFrameCallback(callback);
-    };
-    callback();
-    return () => {
-      current.cancelVideoFrameCallback(handle);
-    };
-  }, [onVideoFrame, ref]);
-}, VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
-  const context = useContext29(SharedAudioContext);
-  if (!context) {
-    throw new Error("SharedAudioContext not found");
-  }
-  const videoRef = useRef16(null);
-  const sharedSource = useMemo29(() => {
-    if (!context.audioContext) {
-      return null;
-    }
-    return makeSharedElementSourceNode({
-      audioContext: context.audioContext,
-      ref: videoRef
-    });
-  }, [context.audioContext]);
-  const {
-    volume,
-    muted,
-    playbackRate,
-    onlyWarnForMediaSeekingError,
-    src,
-    onDuration,
-    acceptableTimeShift,
-    acceptableTimeShiftInSeconds,
-    toneFrequency,
-    name,
-    _remotionInternalNativeLoopPassed,
-    _remotionInternalStack,
-    style,
-    pauseWhenBuffering,
-    showInTimeline,
-    loopVolumeCurveBehavior,
-    onError,
-    onAutoPlayError,
-    onVideoFrame,
-    crossOrigin,
-    delayRenderRetries,
-    delayRenderTimeoutInMilliseconds,
-    allowAmplificationDuringRender,
-    useWebAudioApi,
-    ...nativeProps
-  } = props2;
-  const _propsValid = true;
-  if (!_propsValid) {
-    throw new Error("typecheck error");
-  }
-  const volumePropFrame = useFrameForVolumeProp(loopVolumeCurveBehavior ?? "repeat");
-  const { fps, durationInFrames } = useVideoConfig();
-  const parentSequence = useContext29(SequenceContext);
-  const { hidden } = useContext29(SequenceVisibilityToggleContext);
-  const logLevel = useLogLevel();
-  const mountTime = useMountTime();
-  const [timelineId] = useState18(() => String(Math.random()));
-  const isSequenceHidden = hidden[timelineId] ?? false;
-  if (typeof acceptableTimeShift !== "undefined") {
-    throw new Error("acceptableTimeShift has been removed. Use acceptableTimeShiftInSeconds instead.");
-  }
-  const [mediaVolume] = useMediaVolumeState();
-  const [mediaMuted] = useMediaMutedState();
-  const userPreferredVolume = evaluateVolume({
-    frame: volumePropFrame,
-    volume,
-    mediaVolume
-  });
-  useMediaInTimeline({
-    mediaRef: videoRef,
-    volume,
-    mediaVolume,
-    mediaType: "video",
-    src,
-    playbackRate: props2.playbackRate ?? 1,
-    displayName: name ?? null,
-    id: timelineId,
-    stack: _remotionInternalStack,
-    showInTimeline,
-    premountDisplay: null,
-    onAutoPlayError: onAutoPlayError ?? null,
-    isPremounting: Boolean(parentSequence?.premounting)
-  });
-  useMediaPlayback({
-    mediaRef: videoRef,
-    src,
-    mediaType: "video",
-    playbackRate: props2.playbackRate ?? 1,
-    onlyWarnForMediaSeekingError,
-    acceptableTimeshift: acceptableTimeShiftInSeconds ?? null,
-    isPremounting: Boolean(parentSequence?.premounting),
-    pauseWhenBuffering,
-    onAutoPlayError: onAutoPlayError ?? null
-  });
-  useVolume({
-    logLevel,
-    mediaRef: videoRef,
-    volume: userPreferredVolume,
-    source: sharedSource,
-    shouldUseWebAudioApi: useWebAudioApi ?? false
-  });
-  const actualFrom = parentSequence ? parentSequence.relativeFrom : 0;
-  const duration = parentSequence ? Math.min(parentSequence.durationInFrames, durationInFrames) : durationInFrames;
-  const preloadedSrc = usePreload(src);
-  const actualSrc = useAppendVideoFragment({
-    actualSrc: preloadedSrc,
-    actualFrom,
-    duration,
-    fps
-  });
-  useImperativeHandle9(ref, () => {
-    return videoRef.current;
-  }, []);
-  useState18(() => playbackLogging({
-    logLevel,
-    message: `Mounting video with source = ${actualSrc}, v=${VERSION}, user agent=${typeof navigator === "undefined" ? "server" : navigator.userAgent}`,
-    tag: "video",
-    mountTime
-  }));
-  useEffect20(() => {
-    const { current } = videoRef;
-    if (!current) {
-      return;
-    }
-    const errorHandler = () => {
-      if (current.error) {
-        console.error("Error occurred in video", current?.error);
-        if (onError) {
-          const err = new Error(`Code ${current.error.code}: ${current.error.message}`);
-          onError(err);
-          return;
-        }
-        throw new Error(`The browser threw an error while playing the video ${src}: Code ${current.error.code} - ${current?.error?.message}. See https://remotion.dev/docs/media-playback-error for help. Pass an onError() prop to handle the error.`);
-      } else {
-        if (onError) {
-          const err = new Error(`The browser threw an error while playing the video ${src}`);
-          onError(err);
-          return;
-        }
-        throw new Error("The browser threw an error while playing the video");
-      }
-    };
-    current.addEventListener("error", errorHandler, { once: true });
-    return () => {
-      current.removeEventListener("error", errorHandler);
-    };
-  }, [onError, src]);
-  const currentOnDurationCallback = useRef16(onDuration);
-  currentOnDurationCallback.current = onDuration;
-  useEmitVideoFrame({ ref: videoRef, onVideoFrame });
-  useEffect20(() => {
-    const { current } = videoRef;
-    if (!current) {
-      return;
-    }
-    if (current.duration) {
-      currentOnDurationCallback.current?.(src, current.duration);
-      return;
-    }
-    const onLoadedMetadata = () => {
-      currentOnDurationCallback.current?.(src, current.duration);
-    };
-    current.addEventListener("loadedmetadata", onLoadedMetadata);
-    return () => {
-      current.removeEventListener("loadedmetadata", onLoadedMetadata);
-    };
-  }, [src]);
-  useEffect20(() => {
-    const { current } = videoRef;
-    if (!current) {
-      return;
-    }
-    if (isIosSafari()) {
-      current.preload = "metadata";
-    } else {
-      current.preload = "auto";
-    }
-  }, []);
-  const actualStyle = useMemo29(() => {
-    return {
-      ...style,
-      opacity: isSequenceHidden ? 0 : style?.opacity ?? 1
-    };
-  }, [isSequenceHidden, style]);
-  const crossOriginValue = getCrossOriginValue({
-    crossOrigin,
-    requestsVideoFrame: Boolean(onVideoFrame)
-  });
-  return /* @__PURE__ */ jsx31("video", {
-    ref: videoRef,
-    muted: muted || mediaMuted || isSequenceHidden || userPreferredVolume <= 0,
-    playsInline: true,
-    src: actualSrc,
-    loop: _remotionInternalNativeLoopPassed,
-    style: actualStyle,
-    disableRemotePlayback: true,
-    crossOrigin: crossOriginValue,
-    ...nativeProps
-  });
-}, VideoForPreview, roundTo6Commas = (num) => {
+}, roundTo6Commas = (num) => {
   return Math.round(num * 1e5) / 1e5;
 }, seekToTime = ({
   element,
@@ -6371,10 +6371,19 @@ var init_esm = __esm(() => {
     },
     size: { size: "auto", translation: { x: 0, y: 0 } }
   });
+  VideoForPreview = forwardRef9(VideoForDevelopmentRefForwardingFunction);
   compositionSelectorRef = createRef3();
   Internals = {
     useUnsafeVideoConfig,
+    useFrameForVolumeProp,
+    useTimelinePosition,
+    evaluateVolume,
+    getAbsoluteSrc,
     Timeline: exports_timeline_position_state,
+    validateMediaTrimProps,
+    validateMediaProps,
+    resolveTrimProps,
+    VideoForPreview,
     CompositionManager,
     CompositionSetters,
     SequenceManager,
@@ -6443,7 +6452,7 @@ var init_esm = __esm(() => {
   };
   PERCENTAGE = NUMBER + "%";
   IsInsideSeriesContext = createContext19(false);
-  SeriesSequence = forwardRef9(SeriesSequenceRefForwardingFunction);
+  SeriesSequence = forwardRef10(SeriesSequenceRefForwardingFunction);
   Series.Sequence = SeriesSequence;
   addSequenceStackTraces(SeriesSequence);
   defaultSpringConfig = {
@@ -6475,7 +6484,6 @@ var init_esm = __esm(() => {
     "%3B": ";"
   };
   didWarn2 = {};
-  VideoForPreview = forwardRef10(VideoForDevelopmentRefForwardingFunction);
   VideoForRendering = forwardRef11(VideoForRenderingForwardFunction);
   Video = forwardRef12(VideoForwardingFunction);
   addSequenceStackTraces(Video);
@@ -12161,6 +12169,30 @@ var validateFrame2 = ({
     throw new RangeError(`Cannot use frame ${frame}: Duration of composition is ${durationInFrames}, therefore the highest frame that can be rendered is ${durationInFrames - 1}`);
   }
 };
+var validCodecs2 = [
+  "h264",
+  "h265",
+  "vp8",
+  "vp9",
+  "mp3",
+  "aac",
+  "wav",
+  "prores",
+  "h264-mkv",
+  "h264-ts",
+  "gif"
+];
+function validateCodec2(defaultCodec, location, name) {
+  if (typeof defaultCodec === "undefined") {
+    return;
+  }
+  if (typeof defaultCodec !== "string") {
+    throw new TypeError(`The "${name}" prop ${location} must be a string, but you passed a value of type ${typeof defaultCodec}.`);
+  }
+  if (!validCodecs2.includes(defaultCodec)) {
+    throw new Error(`The "${name}" prop ${location} must be one of ${validCodecs2.join(", ")}, but you passed ${defaultCodec}.`);
+  }
+}
 var validateDefaultAndInputProps2 = (defaultProps, name, compositionId) => {
   if (!defaultProps) {
     return;
@@ -12246,7 +12278,7 @@ var getOffthreadVideoSource = ({
   currentTime,
   toneMapped
 }) => {
-  return `http://localhost:${window.remotion_proxyPort}/proxy?src=${encodeURIComponent(getAbsoluteSrc2(src))}&time=${encodeURIComponent(currentTime)}&transparent=${String(transparent)}&toneMapped=${String(toneMapped)}`;
+  return `http://localhost:${window.remotion_proxyPort}/proxy?src=${encodeURIComponent(getAbsoluteSrc2(src))}&time=${encodeURIComponent(Math.max(0, currentTime))}&transparent=${String(transparent)}&toneMapped=${String(toneMapped)}`;
 };
 var NoReactInternals = {
   processColor,
@@ -12271,7 +12303,8 @@ var NoReactInternals = {
   MIN_BUN_VERSION: ENABLE_V5_BREAKING_CHANGES2 ? "1.1.3" : "1.0.3",
   colorNames,
   DATE_TOKEN: DATE_TOKEN2,
-  FILE_TOKEN: FILE_TOKEN2
+  FILE_TOKEN: FILE_TOKEN2,
+  validateCodec: validateCodec2
 };
 
 // ../player/dist/esm/index.mjs
@@ -17605,7 +17638,7 @@ var DoneCheckmark = () => {
 };
 
 // ../shapes/dist/esm/index.mjs
-import React29, { useMemo as useMemo37 } from "react";
+import React26, { useMemo as useMemo37 } from "react";
 import { version } from "react-dom";
 import { jsx as jsx60, jsxs as jsxs21 } from "react/jsx-runtime";
 import { jsx as jsx212 } from "react/jsx-runtime";
@@ -18849,7 +18882,6 @@ var EvaluateRemotionSection = () => {
       "/img/freelancers/antoine.jpeg",
       "/img/freelancers/ayush.png",
       "/img/freelancers/benjamin.jpeg",
-      "/img/freelancers/florent.jpeg",
       "/img/freelancers/karel.jpeg",
       "/img/freelancers/lorenzo.jpeg",
       "/img/freelancers/mickael.jpeg",
@@ -20092,7 +20124,8 @@ var listOfRemotionPackages = [
   "@remotion/openai-whisper",
   "@remotion/compositor",
   "@remotion/example-videos",
-  "@remotion/whisper-web"
+  "@remotion/whisper-web",
+  "@remotion/video"
 ];
 function truthy3(value) {
   return Boolean(value);