remotion 4.0.141 → 4.0.143

package/bunfig.toml

@@ -0,0 +1,2 @@
+[test]
+#preload = "./happydom.ts"

package/dist/cjs/CanUseRemotionHooks.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 export declare const CanUseRemotionHooks: React.Context<boolean>;
 export declare const CanUseRemotionHooksProvider: React.FC<{
-    children: React.ReactNode;
+    readonly children: React.ReactNode;
 }>;

package/dist/cjs/Img.js

@@ -65,6 +65,7 @@ const ImgRefForwarding = ({ onError, maxRetries = 2, src, pauseWhenLoading, dela
         (0, cancel_render_js_1.cancelRender)('Error loading image with src: ' + ((_l = imageRef.current) === null || _l === void 0 ? void 0 : _l.src));
     }, [maxRetries, onError, retryIn]);
     if (typeof window !== 'undefined') {
+        const isPremounting = Boolean(sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.premounting);
         // eslint-disable-next-line react-hooks/rules-of-hooks
         (0, react_1.useLayoutEffect)(() => {
             if (process.env.NODE_ENV === 'test') {
@@ -74,7 +75,7 @@ const ImgRefForwarding = ({ onError, maxRetries = 2, src, pauseWhenLoading, dela
                 retries: delayRenderRetries !== null && delayRenderRetries !== void 0 ? delayRenderRetries : undefined,
                 timeoutInMilliseconds: delayRenderTimeoutInMilliseconds !== null && delayRenderTimeoutInMilliseconds !== void 0 ? delayRenderTimeoutInMilliseconds : undefined,
             });
-            const unblock = pauseWhenLoading && !(sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.premounting)
+            const unblock = pauseWhenLoading && !isPremounting
                 ? delayPlayback().unblock
                 : () => undefined;
             const { current } = imageRef;
@@ -109,7 +110,7 @@ const ImgRefForwarding = ({ onError, maxRetries = 2, src, pauseWhenLoading, dela
             delayRenderRetries,
             delayRenderTimeoutInMilliseconds,
             pauseWhenLoading,
-            sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.premounting,
+            isPremounting,
         ]);
     }
     return ((0, jsx_runtime_1.jsx)("img", { ...props, ref: imageRef, src: actualSrc, onError: didGetError }));

package/dist/cjs/audio/Audio.d.ts

@@ -17,9 +17,10 @@ export declare const Audio: React.ForwardRefExoticComponent<Omit<Omit<React.Deta
     showInTimeline?: boolean | undefined;
     delayRenderTimeoutInMilliseconds?: number | undefined;
     delayRenderRetries?: number | undefined;
+    loopVolumeCurveBehavior?: import("./use-audio-frame.js").LoopVolumeCurveBehavior | undefined;
 } & RemotionMainAudioProps & {
     /**
      * @deprecated For internal use only
      */
-    stack?: string | undefined;
+    readonly stack?: string | undefined;
 }, "ref"> & React.RefAttributes<HTMLAudioElement>>;

package/dist/cjs/audio/AudioForPreview.d.ts

@@ -1,12 +1,13 @@
 import React from 'react';
 import type { RemotionAudioProps } from './props.js';
 type AudioForPreviewProps = RemotionAudioProps & {
-    shouldPreMountAudioTags: boolean;
-    onDuration: (src: string, durationInSeconds: number) => void;
-    pauseWhenBuffering: boolean;
-    _remotionInternalNativeLoopPassed: boolean;
-    _remotionInternalStack: string | null;
-    showInTimeline: boolean;
+    readonly shouldPreMountAudioTags: boolean;
+    readonly onDuration: (src: string, durationInSeconds: number) => void;
+    readonly pauseWhenBuffering: boolean;
+    readonly _remotionInternalNativeLoopPassed: boolean;
+    readonly _remotionInternalStack: string | null;
+    readonly showInTimeline: boolean;
+    readonly stack?: string | undefined;
 };
 export declare const AudioForPreview: React.ForwardRefExoticComponent<Omit<AudioForPreviewProps, "ref"> & React.RefAttributes<HTMLAudioElement>>;
 export {};

package/dist/cjs/audio/AudioForPreview.js

@@ -21,10 +21,10 @@ const AudioForDevelopmentForwardRefFunction = (props, ref) => {
     if (props.shouldPreMountAudioTags !== initialShouldPreMountAudioElements) {
         throw new Error('Cannot change the behavior for pre-mounting audio tags dynamically.');
     }
+    const { volume, muted, playbackRate, shouldPreMountAudioTags, src, onDuration, acceptableTimeShiftInSeconds, _remotionInternalNeedsDurationCalculation, _remotionInternalNativeLoopPassed, _remotionInternalStack, allowAmplificationDuringRender, name, pauseWhenBuffering, showInTimeline, loopVolumeCurveBehavior, stack, ...nativeProps } = props;
     const [mediaVolume] = (0, volume_position_state_js_1.useMediaVolumeState)();
     const [mediaMuted] = (0, volume_position_state_js_1.useMediaMutedState)();
-    const volumePropFrame = (0, use_audio_frame_js_1.useFrameForVolumeProp)();
-    const { volume, muted, playbackRate, shouldPreMountAudioTags, src, onDuration, acceptableTimeShiftInSeconds, _remotionInternalNeedsDurationCalculation, _remotionInternalNativeLoopPassed, _remotionInternalStack, allowAmplificationDuringRender, name, pauseWhenBuffering, showInTimeline, ...nativeProps } = props;
+    const volumePropFrame = (0, use_audio_frame_js_1.useFrameForVolumeProp)(loopVolumeCurveBehavior !== null && loopVolumeCurveBehavior !== void 0 ? loopVolumeCurveBehavior : 'repeat');
     const { hidden } = (0, react_1.useContext)(SequenceManager_js_1.SequenceVisibilityToggleContext);
     if (!src) {
         throw new TypeError("No 'src' was passed to <Audio>.");

package/dist/cjs/audio/AudioForRendering.d.ts

@@ -13,6 +13,7 @@ export declare const AudioForRendering: ForwardRefExoticComponent<Omit<React.Det
     showInTimeline?: boolean | undefined;
     delayRenderTimeoutInMilliseconds?: number | undefined;
     delayRenderRetries?: number | undefined;
+    loopVolumeCurveBehavior?: import("./use-audio-frame.js").LoopVolumeCurveBehavior | undefined;
 } & {
     readonly onDuration: (src: string, durationInSeconds: number) => void;
 } & RefAttributes<HTMLAudioElement>>;

package/dist/cjs/audio/AudioForRendering.js

@@ -14,8 +14,9 @@ const volume_prop_js_1 = require("../volume-prop.js");
 const use_audio_frame_js_1 = require("./use-audio-frame.js");
 const AudioForRenderingRefForwardingFunction = (props, ref) => {
     const audioRef = (0, react_1.useRef)(null);
+    const { volume: volumeProp, playbackRate, allowAmplificationDuringRender, onDuration, toneFrequency, _remotionInternalNeedsDurationCalculation, _remotionInternalNativeLoopPassed, acceptableTimeShiftInSeconds, name, onError, delayRenderRetries, delayRenderTimeoutInMilliseconds, loopVolumeCurveBehavior, ...nativeProps } = props;
     const absoluteFrame = (0, timeline_position_state_js_1.useTimelinePosition)();
-    const volumePropFrame = (0, use_audio_frame_js_1.useFrameForVolumeProp)();
+    const volumePropFrame = (0, use_audio_frame_js_1.useFrameForVolumeProp)(loopVolumeCurveBehavior !== null && loopVolumeCurveBehavior !== void 0 ? loopVolumeCurveBehavior : 'repeat');
     const frame = (0, use_current_frame_js_1.useCurrentFrame)();
     const sequenceContext = (0, react_1.useContext)(SequenceContext_js_1.SequenceContext);
     const { registerRenderAsset, unregisterRenderAsset } = (0, react_1.useContext)(RenderAssetManager_js_1.RenderAssetManager);
@@ -30,7 +31,6 @@ const AudioForRenderingRefForwardingFunction = (props, ref) => {
         sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.cumulatedFrom,
         sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.durationInFrames,
     ]);
-    const { volume: volumeProp, playbackRate, allowAmplificationDuringRender, onDuration, toneFrequency, _remotionInternalNeedsDurationCalculation, _remotionInternalNativeLoopPassed, acceptableTimeShiftInSeconds, name, onError, delayRenderRetries, delayRenderTimeoutInMilliseconds, ...nativeProps } = props;
     const volume = (0, volume_prop_js_1.evaluateVolume)({
         volume: volumeProp,
         frame: volumePropFrame,

package/dist/cjs/audio/props.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 import type { VolumeProp } from '../volume-prop.js';
+import type { LoopVolumeCurveBehavior } from './use-audio-frame.js';
 export type RemotionMainAudioProps = {
     startFrom?: number;
     endAt?: number;
@@ -17,4 +18,5 @@ export type RemotionAudioProps = Omit<React.DetailedHTMLProps<React.AudioHTMLAtt
     showInTimeline?: boolean;
     delayRenderTimeoutInMilliseconds?: number;
     delayRenderRetries?: number;
+    loopVolumeCurveBehavior?: LoopVolumeCurveBehavior;
 };

package/dist/cjs/audio/use-audio-frame.d.ts

@@ -1,6 +1,7 @@
 export declare const useMediaStartsAt: () => number;
+export type LoopVolumeCurveBehavior = 'repeat' | 'extend';
 /**
  * When passing a function as the prop for `volume`,
  * we calculate the way more intuitive value for currentFrame
  */
-export declare const useFrameForVolumeProp: () => number;
+export declare const useFrameForVolumeProp: (behavior: LoopVolumeCurveBehavior) => number;

package/dist/cjs/audio/use-audio-frame.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useFrameForVolumeProp = exports.useMediaStartsAt = void 0;
 const react_1 = require("react");
 const SequenceContext_js_1 = require("../SequenceContext.js");
+const index_js_1 = require("../loop/index.js");
 const use_current_frame_js_1 = require("../use-current-frame.js");
 const useMediaStartsAt = () => {
     var _a;
@@ -15,9 +16,13 @@ exports.useMediaStartsAt = useMediaStartsAt;
  * When passing a function as the prop for `volume`,
  * we calculate the way more intuitive value for currentFrame
  */
-const useFrameForVolumeProp = () => {
+const useFrameForVolumeProp = (behavior) => {
+    const loop = index_js_1.Loop.useLoop();
     const frame = (0, use_current_frame_js_1.useCurrentFrame)();
     const startsAt = (0, exports.useMediaStartsAt)();
-    return frame + startsAt;
+    if (behavior === 'repeat' || loop === null) {
+        return frame + startsAt;
+    }
+    return frame + startsAt + loop.durationInFrames * loop.iteration;
 };
 exports.useFrameForVolumeProp = useFrameForVolumeProp;

package/dist/cjs/index.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="node" />
+/// <reference types="bun-types" />
 /// <reference types="react" />
 import './asset-types.js';
 import type { Codec } from './codec.js';
@@ -16,7 +16,7 @@ declare global {
         remotion_delayRenderTimeouts: {
             [key: string]: {
                 label: string | null;
-                timeout: number | NodeJS.Timeout;
+                timeout: number | Timer;
             };
         };
         remotion_cancelledError: string | undefined;

package/dist/cjs/internals.d.ts

@@ -69,7 +69,7 @@ export declare const Internals: {
     readonly portalNode: () => HTMLElement;
     readonly waitForRoot: (fn: (comp: import("react").FC<{}>) => void) => () => void;
     readonly CanUseRemotionHooksProvider: import("react").FC<{
-        children: import("react").ReactNode;
+        readonly children: import("react").ReactNode;
     }>;
     readonly CanUseRemotionHooks: import("react").Context<boolean>;
     readonly PrefetchProvider: import("react").FC<{
@@ -116,8 +116,6 @@ export declare const Internals: {
         [x: string]: number;
     }) => void;
     readonly useTimelineSetFrame: () => (u: import("react").SetStateAction<Record<string, number>>) => void;
-    readonly FILE_TOKEN: "remotion-file:";
-    readonly DATE_TOKEN: "remotion-date:";
     readonly NativeLayersProvider: import("react").FC<{
         children?: import("react").ReactNode;
     }>;
@@ -146,9 +144,6 @@ export declare const Internals: {
         buffering: import("react").MutableRefObject<boolean>;
     } | null>;
     readonly enableSequenceStackTraces: () => void;
-    readonly colorNames: {
-        [key: string]: number;
-    };
     readonly CurrentScaleContext: import("react").Context<import("./use-current-scale.js").CurrentScaleContextType | null>;
     readonly PreviewSizeContext: import("react").Context<import("./use-current-scale.js").PreviewSizeCtx>;
     readonly calculateScale: ({ canvasSize, compositionHeight, compositionWidth, previewSize, }: {

package/dist/cjs/internals.js

@@ -36,8 +36,6 @@ const EditorProps_js_1 = require("./EditorProps.js");
 const enable_sequence_stack_traces_js_1 = require("./enable-sequence-stack-traces.js");
 const get_preview_dom_element_js_1 = require("./get-preview-dom-element.js");
 const get_remotion_environment_js_1 = require("./get-remotion-environment.js");
-const input_props_serialization_js_1 = require("./input-props-serialization.js");
-const interpolate_colors_js_1 = require("./interpolate-colors.js");
 const is_player_js_1 = require("./is-player.js");
 const NativeLayers_js_1 = require("./NativeLayers.js");
 const nonce_js_1 = require("./nonce.js");
@@ -114,8 +112,6 @@ exports.Internals = {
     RenderAssetManager: RenderAssetManager_js_1.RenderAssetManager,
     persistCurrentFrame: timeline_position_state_js_1.persistCurrentFrame,
     useTimelineSetFrame: timeline_position_state_js_1.useTimelineSetFrame,
-    FILE_TOKEN: input_props_serialization_js_1.FILE_TOKEN,
-    DATE_TOKEN: input_props_serialization_js_1.DATE_TOKEN,
     NativeLayersProvider: NativeLayers_js_1.NativeLayersProvider,
     ClipComposition: Composition_js_1.ClipComposition,
     isIosSafari: video_fragment_js_1.isIosSafari,
@@ -125,7 +121,6 @@ exports.Internals = {
     BufferingProvider: buffering_js_1.BufferingProvider,
     BufferingContextReact: buffering_js_1.BufferingContextReact,
     enableSequenceStackTraces: enable_sequence_stack_traces_js_1.enableSequenceStackTraces,
-    colorNames: interpolate_colors_js_1.colorNames,
     CurrentScaleContext: use_current_scale_js_1.CurrentScaleContext,
     PreviewSizeContext: use_current_scale_js_1.PreviewSizeContext,
     calculateScale: use_current_scale_js_1.calculateScale,

package/dist/cjs/loop/index.d.ts

@@ -1,13 +1,21 @@
 import React from 'react';
 import type { LayoutAndStyle } from '../Sequence.js';
 export type LoopProps = {
-    durationInFrames: number;
-    times?: number;
-    name?: string;
-    children: React.ReactNode;
+    readonly durationInFrames: number;
+    readonly times?: number;
+    readonly name?: string;
+    readonly children: React.ReactNode;
 } & LayoutAndStyle;
+type LoopContextType = {
+    iteration: number;
+    durationInFrames: number;
+};
+declare const useLoop: () => LoopContextType | null;
 /**
  * @description This component allows you to quickly lay out an animation so it repeats itself.
  * @see [Documentation](https://www.remotion.dev/docs/loop)
  */
-export declare const Loop: React.FC<LoopProps>;
+export declare const Loop: React.FC<LoopProps> & {
+    useLoop: typeof useLoop;
+};
+export {};

package/dist/cjs/loop/index.js

@@ -1,12 +1,39 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Loop = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
+const react_1 = __importStar(require("react"));
 const Sequence_js_1 = require("../Sequence.js");
 const use_current_frame_js_1 = require("../use-current-frame.js");
 const use_video_config_js_1 = require("../use-video-config.js");
 const validate_duration_in_frames_js_1 = require("../validation/validate-duration-in-frames.js");
+const LoopContext = (0, react_1.createContext)(null);
+const useLoop = () => {
+    return react_1.default.useContext(LoopContext);
+};
 /**
  * @description This component allows you to quickly lay out an animation so it repeats itself.
  * @see [Documentation](https://www.remotion.dev/docs/loop)
@@ -31,7 +58,8 @@ const Loop = ({ durationInFrames, times = Infinity, children, name, ...props })
     const actualTimes = Math.min(maxTimes, times);
     const style = props.layout === 'none' ? undefined : props.style;
     const maxFrame = durationInFrames * (actualTimes - 1);
-    const start = Math.floor(currentFrame / durationInFrames) * durationInFrames;
+    const iteration = Math.floor(currentFrame / durationInFrames);
+    const start = iteration * durationInFrames;
     const from = Math.min(start, maxFrame);
     const loopDisplay = (0, react_1.useMemo)(() => {
         return {
@@ -40,6 +68,13 @@ const Loop = ({ durationInFrames, times = Infinity, children, name, ...props })
             durationInFrames,
         };
     }, [actualTimes, durationInFrames, from]);
-    return ((0, jsx_runtime_1.jsx)(Sequence_js_1.Sequence, { durationInFrames: durationInFrames, from: from, name: name !== null && name !== void 0 ? name : '<Loop>', _remotionInternalLoopDisplay: loopDisplay, layout: props.layout, style: style, children: children }));
+    const loopContext = (0, react_1.useMemo)(() => {
+        return {
+            iteration: Math.floor(currentFrame / durationInFrames),
+            durationInFrames,
+        };
+    }, [currentFrame, durationInFrames]);
+    return ((0, jsx_runtime_1.jsx)(LoopContext.Provider, { value: loopContext, children: (0, jsx_runtime_1.jsx)(Sequence_js_1.Sequence, { durationInFrames: durationInFrames, from: from, name: name !== null && name !== void 0 ? name : '<Loop>', _remotionInternalLoopDisplay: loopDisplay, layout: props.layout, style: style, children: children }) }));
 };
 exports.Loop = Loop;
+exports.Loop.useLoop = useLoop;

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

@@ -42,4 +42,12 @@ export declare const NoReactInternals: {
         playbackRate: number;
         startFrom: number;
     }) => number;
+    ENABLE_V5_BREAKING_CHANGES: false;
+    MIN_NODE_VERSION: number;
+    MIN_BUN_VERSION: string;
+    colorNames: {
+        [key: string]: number;
+    };
+    DATE_TOKEN: string;
+    FILE_TOKEN: string;
 };

package/dist/cjs/no-react.js

@@ -7,8 +7,10 @@ var random_js_1 = require("./random.js");
 Object.defineProperty(exports, "random", { enumerable: true, get: function () { return random_js_1.random; } });
 const delay_render_1 = require("./delay-render");
 const input_props_serialization_1 = require("./input-props-serialization");
+const input_props_serialization_js_1 = require("./input-props-serialization.js");
 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_props_1 = require("./validation/validate-default-props");
 const validate_dimensions_1 = require("./validation/validate-dimensions");
@@ -33,4 +35,10 @@ exports.NoReactInternals = {
     DELAY_RENDER_ATTEMPT_TOKEN: delay_render_1.DELAY_RENDER_RETRIES_LEFT,
     getOffthreadVideoSource: offthread_video_source_1.getOffthreadVideoSource,
     getExpectedMediaFrameUncorrected: get_current_time_1.getExpectedMediaFrameUncorrected,
+    ENABLE_V5_BREAKING_CHANGES: v5_flag_1.ENABLE_V5_BREAKING_CHANGES,
+    MIN_NODE_VERSION: v5_flag_1.ENABLE_V5_BREAKING_CHANGES ? 18 : 16,
+    MIN_BUN_VERSION: v5_flag_1.ENABLE_V5_BREAKING_CHANGES ? '1.1.3' : '1.0.3',
+    colorNames: interpolate_colors_1.colorNames,
+    DATE_TOKEN: input_props_serialization_js_1.DATE_TOKEN,
+    FILE_TOKEN: input_props_serialization_js_1.FILE_TOKEN,
 };

package/dist/cjs/spring/index.d.ts

@@ -1,4 +1,4 @@
-import type { SpringConfig } from './spring-utils.js';
+import type { SpringConfig } from './spring-utils';
 /**
  * @description Calculates a position based on physical parameters, start and end value, and time.
  * @see [Documentation](https://www.remotion.dev/docs/spring)
@@ -28,4 +28,4 @@ export declare function spring({ frame: passedFrame, fps, config, from, to, dura
     reverse?: boolean;
 }): number;
 export { measureSpring } from './measure-spring.js';
-export { SpringConfig } from './spring-utils.js';
+export type { SpringConfig } from './spring-utils';

package/dist/cjs/spring/measure-spring.d.ts

@@ -1,4 +1,4 @@
-import type { SpringConfig } from './spring-utils.js';
+import type { SpringConfig } from './spring-utils';
 /**
  * @description The function returns how long it takes for a spring animation to settle
  * @see [Documentation](https://www.remotion.dev/docs/measure-spring)

package/dist/cjs/v5-flag.d.ts

@@ -0,0 +1 @@
+export declare const ENABLE_V5_BREAKING_CHANGES: false;

package/dist/cjs/v5-flag.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ENABLE_V5_BREAKING_CHANGES = void 0;
+exports.ENABLE_V5_BREAKING_CHANGES = false;

package/dist/cjs/version.d.ts

@@ -1 +1 @@
-export declare const VERSION = "4.0.141";
+export declare const VERSION = "4.0.143";

package/dist/cjs/version.js

@@ -2,4 +2,4 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.VERSION = void 0;
 // Automatically generated on publish
-exports.VERSION = '4.0.141';
+exports.VERSION = '4.0.143';

package/dist/cjs/video/OffthreadVideoForRendering.js

@@ -18,10 +18,10 @@ const use_unsafe_video_config_js_1 = require("../use-unsafe-video-config.js");
 const volume_prop_js_1 = require("../volume-prop.js");
 const get_current_time_js_1 = require("./get-current-time.js");
 const offthread_video_source_js_1 = require("./offthread-video-source.js");
-const OffthreadVideoForRendering = ({ onError, volume: volumeProp, playbackRate, src, muted, allowAmplificationDuringRender, transparent = false, toneMapped = true, toneFrequency, name, ...props }) => {
+const OffthreadVideoForRendering = ({ onError, volume: volumeProp, playbackRate, src, muted, allowAmplificationDuringRender, transparent = false, toneMapped = true, toneFrequency, name, loopVolumeCurveBehavior, ...props }) => {
     const absoluteFrame = (0, timeline_position_state_js_1.useTimelinePosition)();
     const frame = (0, use_current_frame_js_1.useCurrentFrame)();
-    const volumePropsFrame = (0, use_audio_frame_js_1.useFrameForVolumeProp)();
+    const volumePropsFrame = (0, use_audio_frame_js_1.useFrameForVolumeProp)(loopVolumeCurveBehavior !== null && loopVolumeCurveBehavior !== void 0 ? loopVolumeCurveBehavior : 'repeat');
     const videoConfig = (0, use_unsafe_video_config_js_1.useUnsafeVideoConfig)();
     const sequenceContext = (0, react_1.useContext)(SequenceContext_js_1.SequenceContext);
     const mediaStartsAt = (0, use_audio_frame_js_1.useMediaStartsAt)();

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { RemotionMainVideoProps } from './props.js';
+import type { RemotionMainVideoProps } from './props';
 /**
  * @description allows you to include a video file in your Remotion project. It wraps the native HTMLVideoElement.
  * @see [Documentation](https://www.remotion.dev/docs/video)
@@ -14,10 +14,11 @@ export declare const Video: React.ForwardRefExoticComponent<Omit<Omit<React.Deta
     pauseWhenBuffering?: boolean | undefined;
     showInTimeline?: boolean | undefined;
     delayRenderTimeoutInMilliseconds?: number | undefined;
+    loopVolumeCurveBehavior?: import("../audio/use-audio-frame.js").LoopVolumeCurveBehavior | undefined;
     delayRenderRetries?: number | undefined;
 } & RemotionMainVideoProps & {
     /**
      * @deprecated For internal use only
      */
-    stack?: string | undefined;
+    readonly stack?: string | undefined;
 }, "ref"> & React.RefAttributes<HTMLVideoElement>>;

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

@@ -1,12 +1,12 @@
 import React from 'react';
-import type { RemotionVideoProps } from './props.js';
+import type { RemotionVideoProps } from './props';
 type VideoForPreviewProps = RemotionVideoProps & {
-    onlyWarnForMediaSeekingError: boolean;
-    onDuration: (src: string, durationInSeconds: number) => void;
-    pauseWhenBuffering: boolean;
-    _remotionInternalNativeLoopPassed: boolean;
-    _remotionInternalStack: string | null;
-    showInTimeline: boolean;
+    readonly onlyWarnForMediaSeekingError: boolean;
+    readonly onDuration: (src: string, durationInSeconds: number) => void;
+    readonly pauseWhenBuffering: boolean;
+    readonly _remotionInternalNativeLoopPassed: boolean;
+    readonly _remotionInternalStack: string | null;
+    readonly showInTimeline: boolean;
 };
 export declare const VideoForPreview: React.ForwardRefExoticComponent<Omit<VideoForPreviewProps, "ref"> & React.RefAttributes<HTMLVideoElement>>;
 export {};

package/dist/cjs/video/VideoForPreview.js

@@ -18,15 +18,15 @@ const video_fragment_js_1 = require("./video-fragment.js");
 const VideoForDevelopmentRefForwardingFunction = (props, ref) => {
     var _a, _b, _c;
     const videoRef = (0, react_1.useRef)(null);
-    const volumePropFrame = (0, use_audio_frame_js_1.useFrameForVolumeProp)();
+    const { volume, muted, playbackRate, onlyWarnForMediaSeekingError, src, onDuration, 
+    // @ts-expect-error
+    acceptableTimeShift, acceptableTimeShiftInSeconds, toneFrequency, name, _remotionInternalNativeLoopPassed, _remotionInternalStack, style, pauseWhenBuffering, showInTimeline, loopVolumeCurveBehavior, ...nativeProps } = props;
+    const volumePropFrame = (0, use_audio_frame_js_1.useFrameForVolumeProp)(loopVolumeCurveBehavior !== null && loopVolumeCurveBehavior !== void 0 ? loopVolumeCurveBehavior : 'repeat');
     const { fps, durationInFrames } = (0, use_video_config_js_1.useVideoConfig)();
     const parentSequence = (0, react_1.useContext)(SequenceContext_js_1.SequenceContext);
     const { hidden } = (0, react_1.useContext)(SequenceManager_js_1.SequenceVisibilityToggleContext);
     const [timelineId] = (0, react_1.useState)(() => String(Math.random()));
     const isSequenceHidden = (_a = hidden[timelineId]) !== null && _a !== void 0 ? _a : false;
-    const { volume, muted, playbackRate, onlyWarnForMediaSeekingError, src, onDuration, 
-    // @ts-expect-error
-    acceptableTimeShift, acceptableTimeShiftInSeconds, toneFrequency, name, _remotionInternalNativeLoopPassed, _remotionInternalStack, style, pauseWhenBuffering, showInTimeline, ...nativeProps } = props;
     if (typeof acceptableTimeShift !== 'undefined') {
         throw new Error('acceptableTimeShift has been removed. Use acceptableTimeShiftInSeconds instead.');
     }
@@ -66,9 +66,7 @@ const VideoForDevelopmentRefForwardingFunction = (props, ref) => {
         shouldBuffer: pauseWhenBuffering,
         isPremounting: Boolean(parentSequence === null || parentSequence === void 0 ? void 0 : parentSequence.premounting),
     });
-    const actualFrom = parentSequence
-        ? parentSequence.relativeFrom + parentSequence.cumulatedFrom
-        : 0;
+    const actualFrom = parentSequence ? parentSequence.relativeFrom : 0;
     const duration = parentSequence
         ? Math.min(parentSequence.durationInFrames, durationInFrames)
         : durationInFrames;

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

@@ -10,6 +10,7 @@ export declare const VideoForRendering: ForwardRefExoticComponent<Omit<React.Det
     pauseWhenBuffering?: boolean | undefined;
     showInTimeline?: boolean | undefined;
     delayRenderTimeoutInMilliseconds?: number | undefined;
+    loopVolumeCurveBehavior?: import("../audio/use-audio-frame.js").LoopVolumeCurveBehavior | undefined;
     delayRenderRetries?: number | undefined;
 } & {
     readonly onDuration: (src: string, durationInSeconds: number) => void;

package/dist/cjs/video/VideoForRendering.js

@@ -17,10 +17,10 @@ const use_unsafe_video_config_js_1 = require("../use-unsafe-video-config.js");
 const volume_prop_js_1 = require("../volume-prop.js");
 const get_current_time_js_1 = require("./get-current-time.js");
 const seek_until_right_js_1 = require("./seek-until-right.js");
-const VideoForRenderingForwardFunction = ({ onError, volume: volumeProp, allowAmplificationDuringRender, playbackRate, onDuration, toneFrequency, name, acceptableTimeShiftInSeconds, delayRenderRetries, delayRenderTimeoutInMilliseconds, ...props }, ref) => {
+const VideoForRenderingForwardFunction = ({ onError, volume: volumeProp, allowAmplificationDuringRender, playbackRate, onDuration, toneFrequency, name, acceptableTimeShiftInSeconds, delayRenderRetries, delayRenderTimeoutInMilliseconds, loopVolumeCurveBehavior, ...props }, ref) => {
     const absoluteFrame = (0, timeline_position_state_js_1.useTimelinePosition)();
     const frame = (0, use_current_frame_js_1.useCurrentFrame)();
-    const volumePropsFrame = (0, use_audio_frame_js_1.useFrameForVolumeProp)();
+    const volumePropsFrame = (0, use_audio_frame_js_1.useFrameForVolumeProp)(loopVolumeCurveBehavior !== null && loopVolumeCurveBehavior !== void 0 ? loopVolumeCurveBehavior : 'repeat');
     const videoConfig = (0, use_unsafe_video_config_js_1.useUnsafeVideoConfig)();
     const videoRef = (0, react_1.useRef)(null);
     const sequenceContext = (0, react_1.useContext)(SequenceContext_js_1.SequenceContext);

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

@@ -1,3 +1,3 @@
 export { OffthreadVideo } from './OffthreadVideo.js';
 export { Video } from './Video.js';
-export { RemotionMainVideoProps, OffthreadVideoProps as RemotionOffthreadVideoProps, RemotionVideoProps, } from './props.js';
+export type { RemotionMainVideoProps, OffthreadVideoProps as RemotionOffthreadVideoProps, RemotionVideoProps, } from './props';

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

@@ -1,4 +1,5 @@
 import type React from 'react';
+import type { LoopVolumeCurveBehavior } from '../audio/use-audio-frame.js';
 import type { VolumeProp } from '../volume-prop.js';
 export type RemotionMainVideoProps = {
     startFrom?: number;
@@ -18,6 +19,7 @@ export type RemotionVideoProps = Omit<React.DetailedHTMLProps<React.VideoHTMLAtt
     pauseWhenBuffering?: boolean;
     showInTimeline?: boolean;
     delayRenderTimeoutInMilliseconds?: number;
+    loopVolumeCurveBehavior?: LoopVolumeCurveBehavior;
     delayRenderRetries?: number;
 };
 type DeprecatedOffthreadVideoProps = {
@@ -42,6 +44,7 @@ export type OffthreadVideoProps = {
     transparent?: boolean;
     toneMapped?: boolean;
     pauseWhenBuffering?: boolean;
+    loopVolumeCurveBehavior?: LoopVolumeCurveBehavior;
     /**
      * @deprecated For internal use only
      */

package/dist/cjs/video/video-fragment.js

@@ -41,15 +41,19 @@ const appendVideoFragment = ({ actualSrc, actualFrom, duration, fps, }) => {
     return actualSrc;
 };
 exports.appendVideoFragment = appendVideoFragment;
-const isSubsetOfDuration = (prevStartFrom, newStartFrom, prevDuration, newDuration) => {
-    return (prevStartFrom <= newStartFrom &&
-        prevStartFrom + prevDuration >= newStartFrom + newDuration);
-};
+const isSubsetOfDuration = ({ prevStartFrom, newStartFrom, prevDuration, newDuration, }) => prevStartFrom <= newStartFrom &&
+    prevStartFrom + prevDuration >= newStartFrom + newDuration;
 const useAppendVideoFragment = ({ actualSrc: initialActualSrc, actualFrom: initialActualFrom, duration: initialDuration, fps, }) => {
     const actualFromRef = (0, react_1.useRef)(initialActualFrom);
     const actualDuration = (0, react_1.useRef)(initialDuration);
     const actualSrc = (0, react_1.useRef)(initialActualSrc);
-    if (!isSubsetOfDuration || initialActualSrc !== actualSrc.current) {
+    if (!isSubsetOfDuration({
+        prevStartFrom: actualFromRef.current,
+        newStartFrom: initialActualFrom,
+        prevDuration: actualDuration.current,
+        newDuration: initialDuration,
+    }) ||
+        initialActualSrc !== actualSrc.current) {
         actualFromRef.current = initialActualFrom;
         actualDuration.current = initialDuration;
         actualSrc.current = initialActualSrc;