remotion 4.0.327 → 4.0.329

package/dist/cjs/index.d.ts

@@ -82,6 +82,7 @@ export * from './AbsoluteFill.js';
 export * from './animated-image/index.js';
 export { Artifact } from './Artifact.js';
 export * from './audio/index.js';
+export type { LoopVolumeCurveBehavior } from './audio/use-audio-frame.js';
 export { cancelRender } from './cancel-render.js';
 export { CalculateMetadataFunction, Composition, CompositionProps, CompProps, StillProps, } from './Composition.js';
 export type { CanvasContent } from './CompositionManagerContext.js';
@@ -116,6 +117,8 @@ export * from './use-video-config.js';
 export * from './version.js';
 export * from './video-config.js';
 export * from './video/index.js';
+export type { OnVideoFrame } from './video/props.js';
+export type { VolumeProp } from './volume-prop.js';
 export { watchStaticFile } from './watch-static-file.js';
 export declare const Experimental: {
     /**

package/dist/cjs/internals.d.ts

@@ -13,7 +13,56 @@ import type { WatchRemotionStaticFilesPayload } from './watch-static-file.js';
 import { useRemotionContexts } from './wrap-remotion-context.js';
 export declare const Internals: {
     readonly useUnsafeVideoConfig: () => import("./video-config.js").VideoConfig | null;
+    readonly useFrameForVolumeProp: (behavior: import("./audio/use-audio-frame.js").LoopVolumeCurveBehavior) => number;
+    readonly useTimelinePosition: () => number;
+    readonly evaluateVolume: ({ frame, volume, mediaVolume, }: {
+        frame: number;
+        volume: import("./volume-prop.js").VolumeProp | undefined;
+        mediaVolume: number;
+    }) => number;
+    readonly getAbsoluteSrc: (relativeSrc: string) => string;
     readonly Timeline: typeof TimelinePosition;
+    readonly validateMediaTrimProps: ({ startFrom, endAt, trimBefore, trimAfter, }: {
+        startFrom: number | undefined;
+        endAt: number | undefined;
+        trimBefore: number | undefined;
+        trimAfter: number | undefined;
+    }) => void;
+    readonly validateMediaProps: (props: import("./index.js").RemotionVideoProps | import("./index.js").RemotionAudioProps | import("./index.js").OffthreadVideoProps, component: "Video" | "Audio") => void;
+    readonly resolveTrimProps: ({ startFrom, endAt, trimBefore, trimAfter, }: {
+        startFrom: number | undefined;
+        endAt: number | undefined;
+        trimBefore: number | undefined;
+        trimAfter: number | undefined;
+    }) => {
+        trimBeforeValue: number | undefined;
+        trimAfterValue: number | undefined;
+    };
+    readonly VideoForPreview: import("react").ForwardRefExoticComponent<Omit<import("./video/props.js").NativeVideoProps & {
+        name?: string;
+        volume?: import("./volume-prop.js").VolumeProp;
+        playbackRate?: number;
+        acceptableTimeShiftInSeconds?: number;
+        allowAmplificationDuringRender?: boolean;
+        useWebAudioApi?: boolean;
+        toneFrequency?: number;
+        pauseWhenBuffering?: boolean;
+        showInTimeline?: boolean;
+        delayRenderTimeoutInMilliseconds?: number;
+        loopVolumeCurveBehavior?: import("./audio/use-audio-frame.js").LoopVolumeCurveBehavior;
+        delayRenderRetries?: number;
+        onError?: (err: Error) => void;
+        onAutoPlayError?: null | (() => void);
+    } & {
+        readonly onlyWarnForMediaSeekingError: boolean;
+        readonly onDuration: (src: string, durationInSeconds: number) => void;
+        readonly pauseWhenBuffering: boolean;
+        readonly _remotionInternalNativeLoopPassed: boolean;
+        readonly _remotionInternalStack: string | null;
+        readonly showInTimeline: boolean;
+        readonly onVideoFrame: null | import("./index.js").OnVideoFrame;
+        readonly crossOrigin?: "" | "anonymous" | "use-credentials";
+    }, "ref"> & import("react").RefAttributes<HTMLVideoElement>>;
     readonly CompositionManager: import("react").Context<CompositionManagerContext>;
     readonly CompositionSetters: import("react").Context<import("./CompositionManagerContext.js").CompositionManagerSetters>;
     readonly SequenceManager: import("react").Context<import("./SequenceManager.js").SequenceManagerContext>;

package/dist/cjs/internals.js

@@ -35,6 +35,7 @@ var __importStar = (this && this.__importStar) || (function () {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Internals = void 0;
 const react_1 = require("react");
+const absolute_src_js_1 = require("./absolute-src.js");
 const shared_audio_tags_js_1 = require("./audio/shared-audio-tags.js");
 const use_audio_frame_js_1 = require("./audio/use-audio-frame.js");
 const buffering_js_1 = require("./buffering.js");
@@ -69,11 +70,15 @@ const use_current_scale_js_1 = require("./use-current-scale.js");
 const use_lazy_component_js_1 = require("./use-lazy-component.js");
 const use_unsafe_video_config_js_1 = require("./use-unsafe-video-config.js");
 const use_video_js_1 = require("./use-video.js");
+const validate_media_props_js_1 = require("./validate-media-props.js");
+const validate_start_from_props_js_1 = require("./validate-start-from-props.js");
 const validate_artifact_js_1 = require("./validation/validate-artifact.js");
 const validate_composition_id_js_1 = require("./validation/validate-composition-id.js");
 const duration_state_js_1 = require("./video/duration-state.js");
 const video_fragment_js_1 = require("./video/video-fragment.js");
+const VideoForPreview_js_1 = require("./video/VideoForPreview.js");
 const volume_position_state_js_1 = require("./volume-position-state.js");
+const volume_prop_js_1 = require("./volume-prop.js");
 const watch_static_file_js_1 = require("./watch-static-file.js");
 const wrap_remotion_context_js_1 = require("./wrap-remotion-context.js");
 // needs to be in core package so gets deduplicated in studio
@@ -82,7 +87,15 @@ const compositionSelectorRef = (0, react_1.createRef)();
 // API and are less likely to use it
 exports.Internals = {
     useUnsafeVideoConfig: use_unsafe_video_config_js_1.useUnsafeVideoConfig,
+    useFrameForVolumeProp: use_audio_frame_js_1.useFrameForVolumeProp,
+    useTimelinePosition: TimelinePosition.useTimelinePosition,
+    evaluateVolume: volume_prop_js_1.evaluateVolume,
+    getAbsoluteSrc: absolute_src_js_1.getAbsoluteSrc,
     Timeline: TimelinePosition,
+    validateMediaTrimProps: validate_start_from_props_js_1.validateMediaTrimProps,
+    validateMediaProps: validate_media_props_js_1.validateMediaProps,
+    resolveTrimProps: validate_start_from_props_js_1.resolveTrimProps,
+    VideoForPreview: VideoForPreview_js_1.VideoForPreview,
     CompositionManager: CompositionManagerContext_js_1.CompositionManager,
     CompositionSetters: CompositionManagerContext_js_1.CompositionSetters,
     SequenceManager: SequenceManager_js_1.SequenceManager,

package/dist/cjs/no-react.d.ts

@@ -5,6 +5,7 @@ export { random, RandomSeed } from './random.js';
 export type { VideoConfig } from './video-config';
 import { processColor } from './interpolate-colors';
 import { truthy } from './truthy';
+import { validateCodec } from './validation/validate-default-codec';
 import { validateDimension } from './validation/validate-dimensions';
 import { validateDurationInFrames } from './validation/validate-duration-in-frames';
 import { validateFps } from './validation/validate-fps';
@@ -51,4 +52,5 @@ export declare const NoReactInternals: {
     };
     DATE_TOKEN: string;
     FILE_TOKEN: string;
+    validateCodec: typeof validateCodec;
 };

package/dist/cjs/no-react.js

@@ -12,6 +12,7 @@ const interpolate_colors_1 = require("./interpolate-colors");
 const truthy_1 = require("./truthy");
 const v5_flag_1 = require("./v5-flag");
 const validate_frame_1 = require("./validate-frame");
+const validate_default_codec_1 = require("./validation/validate-default-codec");
 const validate_default_props_1 = require("./validation/validate-default-props");
 const validate_dimensions_1 = require("./validation/validate-dimensions");
 const validate_duration_in_frames_1 = require("./validation/validate-duration-in-frames");
@@ -42,4 +43,5 @@ exports.NoReactInternals = {
     colorNames: interpolate_colors_1.colorNames,
     DATE_TOKEN: input_props_serialization_js_1.DATE_TOKEN,
     FILE_TOKEN: input_props_serialization_js_1.FILE_TOKEN,
+    validateCodec: validate_default_codec_1.validateCodec,
 };

package/dist/cjs/resolve-video-config.js

@@ -22,7 +22,7 @@ const validateCalculated = ({ calculated, compositionId, compositionFps, composi
         component: `of the "<Composition />" component with the id "${compositionId}"`,
     });
     const defaultCodec = calculated === null || calculated === void 0 ? void 0 : calculated.defaultCodec;
-    (0, validate_default_codec_js_1.validateDefaultCodec)(defaultCodec, calculateMetadataErrorLocation);
+    (0, validate_default_codec_js_1.validateCodec)(defaultCodec, calculateMetadataErrorLocation, 'defaultCodec');
     const defaultOutName = calculated === null || calculated === void 0 ? void 0 : calculated.defaultOutName;
     const defaultVideoImageFormat = calculated === null || calculated === void 0 ? void 0 : calculated.defaultVideoImageFormat;
     const defaultPixelFormat = calculated === null || calculated === void 0 ? void 0 : calculated.defaultPixelFormat;

package/dist/cjs/validation/validate-default-codec.d.ts

@@ -1,2 +1,2 @@
 import type { CodecOrUndefined } from '../codec';
-export declare function validateDefaultCodec(defaultCodec: unknown, location: string): asserts defaultCodec is CodecOrUndefined;
+export declare function validateCodec(defaultCodec: unknown, location: string, name: string): asserts defaultCodec is CodecOrUndefined;

package/dist/cjs/validation/validate-default-codec.js

@@ -1,15 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.validateDefaultCodec = validateDefaultCodec;
+exports.validateCodec = validateCodec;
 const codec_1 = require("../codec");
-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 (!codec_1.validCodecs.includes(defaultCodec)) {
-        throw new Error(`The "defaultCodec" prop ${location} must be one of ${codec_1.validCodecs.join(', ')}, but you passed ${defaultCodec}.`);
+        throw new Error(`The "${name}" prop ${location} must be one of ${codec_1.validCodecs.join(', ')}, but you passed ${defaultCodec}.`);
     }
 }

package/dist/cjs/version.d.ts

@@ -3,4 +3,4 @@
  * @see [Documentation](https://remotion.dev/docs/version)
  * @returns {string} The current version of the remotion package
  */
-export declare const VERSION = "4.0.327";
+export declare const VERSION = "4.0.329";

package/dist/cjs/version.js

@@ -7,4 +7,4 @@ exports.VERSION = void 0;
  * @see [Documentation](https://remotion.dev/docs/version)
  * @returns {string} The current version of the remotion package
  */
-exports.VERSION = '4.0.327';
+exports.VERSION = '4.0.329';

package/dist/cjs/video/Video.d.ts

@@ -11,7 +11,7 @@ export declare const Video: React.ForwardRefExoticComponent<Omit<import("./props
     pauseWhenBuffering?: boolean;
     showInTimeline?: boolean;
     delayRenderTimeoutInMilliseconds?: number;
-    loopVolumeCurveBehavior?: import("../audio/use-audio-frame.js").LoopVolumeCurveBehavior;
+    loopVolumeCurveBehavior?: import("../index.js").LoopVolumeCurveBehavior;
     delayRenderRetries?: number;
     onError?: (err: Error) => void;
     onAutoPlayError?: null | (() => void);

package/dist/cjs/video/offthread-video-source.js

@@ -3,6 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.getOffthreadVideoSource = void 0;
 const absolute_src_1 = require("../absolute-src");
 const getOffthreadVideoSource = ({ src, transparent, currentTime, toneMapped, }) => {
-    return `http://localhost:${window.remotion_proxyPort}/proxy?src=${encodeURIComponent((0, absolute_src_1.getAbsoluteSrc)(src))}&time=${encodeURIComponent(currentTime)}&transparent=${String(transparent)}&toneMapped=${String(toneMapped)}`;
+    return `http://localhost:${window.remotion_proxyPort}/proxy?src=${encodeURIComponent((0, absolute_src_1.getAbsoluteSrc)(src))}&time=${encodeURIComponent(Math.max(0, currentTime))}&transparent=${String(transparent)}&toneMapped=${String(toneMapped)}`;
 };
 exports.getOffthreadVideoSource = getOffthreadVideoSource;

package/dist/esm/index.mjs

@@ -104,7 +104,7 @@ function truthy(value) {
 }
 
 // src/version.ts
-var VERSION = "4.0.327";
+var VERSION = "4.0.329";
 
 // src/multiple-versions-warning.ts
 var checkMultipleRemotionVersions = () => {
@@ -547,15 +547,15 @@ var validCodecs = [
 ];
 
 // src/validation/validate-default-codec.ts
-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}.`);
   }
 }
 
@@ -640,7 +640,7 @@ var validateCalculated = ({
     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;
@@ -5887,6 +5887,246 @@ var useCurrentScale = (options) => {
   });
 };
 
+// src/video/VideoForPreview.tsx
+import {
+  forwardRef as forwardRef9,
+  useContext as useContext28,
+  useEffect as useEffect19,
+  useImperativeHandle as useImperativeHandle9,
+  useMemo as useMemo26,
+  useRef as useRef16,
+  useState as useState17
+} from "react";
+
+// src/video/emit-video-frame.ts
+import { useEffect as useEffect18 } from "react";
+var 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]);
+};
+
+// src/video/VideoForPreview.tsx
+import { jsx as jsx27 } from "react/jsx-runtime";
+var 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
+  });
+};
+var VideoForPreview = forwardRef9(VideoForDevelopmentRefForwardingFunction);
+
 // src/watch-static-file.ts
 var WATCH_REMOTION_STATIC_FILES = "remotion_staticFilesChanged";
 var watchStaticFile = (fileName, callback) => {
@@ -5925,22 +6165,22 @@ var watchStaticFile = (fileName, callback) => {
 };
 
 // src/wrap-remotion-context.tsx
-import React26, { useMemo as useMemo26 } 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";
 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,
@@ -5970,29 +6210,29 @@ function useRemotionContexts() {
 }
 var 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
                         })
@@ -6013,7 +6253,15 @@ var RemotionContextProvider = (props2) => {
 var compositionSelectorRef = createRef3();
 var Internals = {
   useUnsafeVideoConfig,
+  useFrameForVolumeProp,
+  useTimelinePosition,
+  evaluateVolume,
+  getAbsoluteSrc,
   Timeline: exports_timeline_position_state,
+  validateMediaTrimProps,
+  validateMediaProps,
+  resolveTrimProps,
+  VideoForPreview,
   CompositionManager,
   CompositionSetters,
   SequenceManager,
@@ -6451,17 +6699,17 @@ var getOffthreadVideoSource = ({
   currentTime,
   toneMapped
 }) => {
-  return `http://localhost:${window.remotion_proxyPort}/proxy?src=${encodeURIComponent(getAbsoluteSrc(src))}&time=${encodeURIComponent(currentTime)}&transparent=${String(transparent)}&toneMapped=${String(toneMapped)}`;
+  return `http://localhost:${window.remotion_proxyPort}/proxy?src=${encodeURIComponent(getAbsoluteSrc(src))}&time=${encodeURIComponent(Math.max(0, currentTime))}&transparent=${String(transparent)}&toneMapped=${String(toneMapped)}`;
 };
 // src/series/index.tsx
-import { Children, forwardRef as forwardRef9, useMemo as useMemo27 } from "react";
+import { Children, forwardRef as forwardRef10, useMemo as useMemo28 } from "react";
 
 // src/series/flatten-children.tsx
-import React27 from "react";
+import React28 from "react";
 var 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);
@@ -6470,39 +6718,39 @@ var flattenChildren = (children) => {
 };
 
 // src/series/is-inside-series.tsx
-import React28, { createContext as createContext19 } from "react";
-import { jsx as jsx28 } from "react/jsx-runtime";
+import React29, { createContext as createContext19 } from "react";
+import { jsx as jsx29 } from "react/jsx-runtime";
 var IsInsideSeriesContext = createContext19(false);
 var IsInsideSeriesContainer = ({ children }) => {
-  return /* @__PURE__ */ jsx28(IsInsideSeriesContext.Provider, {
+  return /* @__PURE__ */ jsx29(IsInsideSeriesContext.Provider, {
     value: true,
     children
   });
 };
 var IsNotInsideSeriesProvider = ({ children }) => {
-  return /* @__PURE__ */ jsx28(IsInsideSeriesContext.Provider, {
+  return /* @__PURE__ */ jsx29(IsInsideSeriesContext.Provider, {
     value: false,
     children
   });
 };
 var useRequireToBeInsideSeries = () => {
-  const isInsideSeries = React28.useContext(IsInsideSeriesContext);
+  const isInsideSeries = React29.useContext(IsInsideSeriesContext);
   if (!isInsideSeries) {
     throw new Error("This component must be inside a <Series /> component.");
   }
 };
 
 // src/series/index.tsx
-import { jsx as jsx29 } from "react/jsx-runtime";
+import { jsx as jsx30 } from "react/jsx-runtime";
 var SeriesSequenceRefForwardingFunction = ({ children }, _ref) => {
   useRequireToBeInsideSeries();
-  return /* @__PURE__ */ jsx29(IsNotInsideSeriesProvider, {
+  return /* @__PURE__ */ jsx30(IsNotInsideSeriesProvider, {
     children
   });
 };
-var SeriesSequence = forwardRef9(SeriesSequenceRefForwardingFunction);
+var SeriesSequence = forwardRef10(SeriesSequenceRefForwardingFunction);
 var Series = (props2) => {
-  const childrenValue = useMemo27(() => {
+  const childrenValue = useMemo28(() => {
     let startFrame = 0;
     const flattenedChildren = flattenChildren(props2.children);
     return Children.map(flattenedChildren, (child, i) => {
@@ -6546,7 +6794,7 @@ var Series = (props2) => {
       }
       const currentStartFrame = startFrame + offset;
       startFrame += durationInFramesProp + offset;
-      return /* @__PURE__ */ jsx29(Sequence, {
+      return /* @__PURE__ */ jsx30(Sequence, {
         name: name || "<Series.Sequence>",
         from: currentStartFrame,
         durationInFrames: durationInFramesProp,
@@ -6557,14 +6805,14 @@ var Series = (props2) => {
     });
   }, [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
   });
 };
@@ -6901,14 +7149,14 @@ var staticFile = (path) => {
   return preparsed;
 };
 // src/Still.tsx
-import React30 from "react";
+import React31 from "react";
 var Still = (props2) => {
   const newProps = {
     ...props2,
     durationInFrames: 1,
     fps: 1
   };
-  return React30.createElement(Composition, newProps);
+  return React31.createElement(Composition, newProps);
 };
 // src/video/OffthreadVideo.tsx
 import { useCallback as useCallback15 } from "react";
@@ -6916,13 +7164,13 @@ import { useCallback as useCallback15 } from "react";
 // src/video/OffthreadVideoForRendering.tsx
 import {
   useCallback as useCallback14,
-  useContext as useContext28,
-  useEffect as useEffect18,
+  useContext as useContext29,
+  useEffect as useEffect20,
   useLayoutEffect as useLayoutEffect9,
-  useMemo as useMemo28,
-  useState as useState17
+  useMemo as useMemo29,
+  useState as useState18
 } from "react";
-import { jsx as jsx30 } from "react/jsx-runtime";
+import { jsx as jsx31 } from "react/jsx-runtime";
 var OffthreadVideoForRendering = ({
   onError,
   volume: volumeProp,
@@ -6945,13 +7193,13 @@ var OffthreadVideoForRendering = ({
   const frame = useCurrentFrame();
   const volumePropsFrame = useFrameForVolumeProp(loopVolumeCurveBehavior ?? "repeat");
   const videoConfig = useUnsafeVideoConfig();
-  const sequenceContext = useContext28(SequenceContext);
+  const sequenceContext = useContext29(SequenceContext);
   const mediaStartsAt = useMediaStartsAt();
-  const { registerRenderAsset, unregisterRenderAsset } = useContext28(RenderAssetManager);
+  const { registerRenderAsset, unregisterRenderAsset } = useContext29(RenderAssetManager);
   if (!src) {
     throw new TypeError("No `src` was passed to <OffthreadVideo>.");
   }
-  const id = useMemo28(() => `offthreadvideo-${random(src ?? "")}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.relativeFrom}-${sequenceContext?.durationInFrames}`, [
+  const id = useMemo29(() => `offthreadvideo-${random(src ?? "")}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.relativeFrom}-${sequenceContext?.durationInFrames}`, [
     src,
     sequenceContext?.cumulatedFrom,
     sequenceContext?.relativeFrom,
@@ -6965,7 +7213,7 @@ var OffthreadVideoForRendering = ({
     frame: volumePropsFrame,
     mediaVolume: 1
   });
-  useEffect18(() => {
+  useEffect20(() => {
     if (!src) {
       throw new Error("No src passed");
     }
@@ -7003,14 +7251,14 @@ var OffthreadVideoForRendering = ({
     toneFrequency,
     sequenceContext?.relativeFrom
   ]);
-  const currentTime = useMemo28(() => {
+  const currentTime = useMemo29(() => {
     return getExpectedMediaFrameUncorrected({
       frame,
       playbackRate: playbackRate || 1,
       startFrom: -mediaStartsAt
     }) / videoConfig.fps;
   }, [frame, mediaStartsAt, playbackRate, videoConfig.fps]);
-  const actualSrc = useMemo28(() => {
+  const actualSrc = useMemo29(() => {
     return getOffthreadVideoSource({
       src,
       currentTime,
@@ -7018,7 +7266,7 @@ var OffthreadVideoForRendering = ({
       toneMapped
     });
   }, [toneMapped, currentTime, src, transparent]);
-  const [imageSrc, setImageSrc] = useState17(null);
+  const [imageSrc, setImageSrc] = useState18(null);
   useLayoutEffect9(() => {
     if (!window.remotion_videoEnabled) {
       return;
@@ -7095,7 +7343,7 @@ var OffthreadVideoForRendering = ({
       cancelRender("Failed to load image with src " + imageSrc);
     }
   }, [imageSrc, onError]);
-  const className = useMemo28(() => {
+  const className = useMemo29(() => {
     return [OFFTHREAD_VIDEO_CLASS_NAME, props2.className].filter(truthy).join(" ");
   }, [props2.className]);
   const onImageFrame = useCallback14((img) => {
@@ -7107,7 +7355,7 @@ var OffthreadVideoForRendering = ({
     return null;
   }
   continueRender(imageSrc.handle);
-  return /* @__PURE__ */ jsx30(Img, {
+  return /* @__PURE__ */ jsx31(Img, {
     src: imageSrc.src,
     className,
     delayRenderRetries,
@@ -7118,246 +7366,6 @@ var OffthreadVideoForRendering = ({
   });
 };
 
-// src/video/VideoForPreview.tsx
-import {
-  forwardRef as forwardRef10,
-  useContext as useContext29,
-  useEffect as useEffect20,
-  useImperativeHandle as useImperativeHandle9,
-  useMemo as useMemo29,
-  useRef as useRef16,
-  useState as useState18
-} from "react";
-
-// src/video/emit-video-frame.ts
-import { useEffect as useEffect19 } from "react";
-var 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]);
-};
-
-// src/video/VideoForPreview.tsx
-import { jsx as jsx31 } from "react/jsx-runtime";
-var 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
-  });
-};
-var VideoForPreview = forwardRef10(VideoForDevelopmentRefForwardingFunction);
-
 // src/video/OffthreadVideo.tsx
 import { jsx as jsx32 } from "react/jsx-runtime";
 var OffthreadVideo = (props2) => {

package/dist/esm/no-react.mjs

@@ -522,6 +522,34 @@ var validateFrame = ({
   }
 };
 
+// src/codec.ts
+var validCodecs = [
+  "h264",
+  "h265",
+  "vp8",
+  "vp9",
+  "mp3",
+  "aac",
+  "wav",
+  "prores",
+  "h264-mkv",
+  "h264-ts",
+  "gif"
+];
+
+// src/validation/validate-default-codec.ts
+function validateCodec(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 (!validCodecs.includes(defaultCodec)) {
+    throw new Error(`The "${name}" prop ${location} must be one of ${validCodecs.join(", ")}, but you passed ${defaultCodec}.`);
+  }
+}
+
 // src/validation/validate-default-props.ts
 var validateDefaultAndInputProps = (defaultProps, name, compositionId) => {
   if (!defaultProps) {
@@ -620,7 +648,7 @@ var getOffthreadVideoSource = ({
   currentTime,
   toneMapped
 }) => {
-  return `http://localhost:${window.remotion_proxyPort}/proxy?src=${encodeURIComponent(getAbsoluteSrc(src))}&time=${encodeURIComponent(currentTime)}&transparent=${String(transparent)}&toneMapped=${String(toneMapped)}`;
+  return `http://localhost:${window.remotion_proxyPort}/proxy?src=${encodeURIComponent(getAbsoluteSrc(src))}&time=${encodeURIComponent(Math.max(0, currentTime))}&transparent=${String(transparent)}&toneMapped=${String(toneMapped)}`;
 };
 
 // src/no-react.ts
@@ -647,7 +675,8 @@ var NoReactInternals = {
   MIN_BUN_VERSION: ENABLE_V5_BREAKING_CHANGES ? "1.1.3" : "1.0.3",
   colorNames,
   DATE_TOKEN,
-  FILE_TOKEN
+  FILE_TOKEN,
+  validateCodec
 };
 export {
   random,

package/dist/esm/version.mjs

@@ -1,5 +1,5 @@
 // src/version.ts
-var VERSION = "4.0.327";
+var VERSION = "4.0.329";
 export {
   VERSION
 };

package/package.json

@@ -3,7 +3,7 @@
     "url": "https://github.com/remotion-dev/remotion/tree/main/packages/core"
   },
   "name": "remotion",
-  "version": "4.0.327",
+  "version": "4.0.329",
   "description": "Make videos programmatically",
   "main": "dist/cjs/index.js",
   "types": "dist/cjs/index.d.ts",
@@ -28,7 +28,7 @@
     "webpack": "5.96.1",
     "zod": "3.22.3",
     "eslint": "9.19.0",
-    "@remotion/eslint-config-internal": "4.0.327"
+    "@remotion/eslint-config-internal": "4.0.329"
   },
   "keywords": [
     "remotion",