remotion 4.0.526 → 4.0.528

package/dist/cjs/timeline-position-state.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useBuffering = exports.usePlaying = exports.useTimelineSetFrame = exports.useAbsoluteTimelinePosition = exports.useIsInsideFreeze = exports.useTimelinePosition = exports.usePlaybackRate = exports.useTimelineContext = exports.clampFrameToCompositionRange = exports.getFrameForComposition = exports.getInitialFrameState = exports.persistCurrentFrame = void 0;
+exports.useBuffering = exports.usePlaying = exports.useTimelineSeekFrame = exports.useTimelineSetFrame = exports.useAbsoluteTimelinePosition = exports.useIsInsideFreeze = exports.useTimelinePosition = exports.usePlaybackRate = exports.useTimelineContext = exports.clampFrameToCompositionRange = exports.getFrameForComposition = exports.getInitialFrameState = exports.persistCurrentFrame = void 0;
 const react_1 = require("react");
 const TimelineContext_js_1 = require("./TimelineContext.js");
 const use_remotion_environment_js_1 = require("./use-remotion-environment.js");
@@ -86,6 +86,13 @@ const useTimelineSetFrame = () => {
     return setFrame;
 };
 exports.useTimelineSetFrame = useTimelineSetFrame;
+// Explicit navigation only. Playback and frame persistence must use setFrame.
+const useTimelineSeekFrame = () => {
+    var _a;
+    const { seek, setFrame } = (0, react_1.useContext)(TimelineContext_js_1.SetTimelineContext);
+    return (_a = seek === null || seek === void 0 ? void 0 : seek.setFrame) !== null && _a !== void 0 ? _a : setFrame;
+};
+exports.useTimelineSeekFrame = useTimelineSeekFrame;
 const use_playing_js_1 = require("./use-playing.js");
 Object.defineProperty(exports, "usePlaying", { enumerable: true, get: function () { return use_playing_js_1.usePlaying; } });
 const use_buffering_js_1 = require("./use-buffering.js");

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

@@ -11,6 +11,7 @@ const use_remotion_environment_js_1 = require("./use-remotion-environment.js");
  * @see [Documentation](https://www.remotion.dev/docs/use-current-frame)
  */
 const useCurrentFrame = () => {
+    var _a;
     const canUseRemotionHooks = (0, react_1.useContext)(CanUseRemotionHooks_js_1.CanUseRemotionHooks);
     const env = (0, use_remotion_environment_js_1.useRemotionEnvironment)();
     if (!canUseRemotionHooks) {
@@ -24,6 +25,6 @@ const useCurrentFrame = () => {
     const contextOffset = context
         ? context.cumulatedFrom + context.relativeFrom
         : 0;
-    return frame - contextOffset;
+    return (frame - contextOffset) * ((_a = context === null || context === void 0 ? void 0 : context.playbackRate) !== null && _a !== void 0 ? _a : 1);
 };
 exports.useCurrentFrame = useCurrentFrame;

package/dist/cjs/use-media-in-timeline.d.ts

@@ -1,6 +1,7 @@
+import { type LoopVolumeCurveBehavior } from './audio/use-audio-frame.js';
 import type { LoopDisplay } from './CompositionManager.js';
 import type { VolumeProp } from './volume-prop.js';
-export declare const useBasicMediaInTimeline: ({ volume, mediaVolume, mediaType, src, displayName, trimBefore, trimAfter, playbackRate, sequenceDurationInFrames, mediaStartsAt, loop, muted, }: {
+export declare const useBasicMediaInTimeline: ({ volume, mediaVolume, mediaType, src, displayName, trimBefore, trimAfter, playbackRate, sequenceDurationInFrames, mediaStartsAt, mediaFrom, loop, muted, }: {
     volume: VolumeProp | undefined;
     mediaVolume: number;
     mediaType: "audio" | "image" | "video";
@@ -11,6 +12,7 @@ export declare const useBasicMediaInTimeline: ({ volume, mediaVolume, mediaType,
     playbackRate: number;
     sequenceDurationInFrames: number;
     mediaStartsAt: number;
+    mediaFrom: number;
     loop: boolean;
     muted: boolean;
 }) => {
@@ -24,7 +26,7 @@ export declare const useBasicMediaInTimeline: ({ volume, mediaVolume, mediaType,
     muted: boolean;
 };
 export type BasicMediaInTimelineReturnType = ReturnType<typeof useBasicMediaInTimeline>;
-export declare const useMediaInTimeline: ({ volume, mediaVolume, src, mediaType, playbackRate, displayName, id, getStack, showInTimeline, premountDisplay, postmountDisplay, loopDisplay, documentationLink, refForOutline, muted, }: {
+export declare const useMediaInTimeline: ({ volume, mediaVolume, src, mediaType, playbackRate, displayName, id, getStack, showInTimeline, premountDisplay, postmountDisplay, loopDisplay, loopVolumeCurveBehavior, documentationLink, refForOutline, muted, }: {
     volume: VolumeProp | undefined;
     mediaVolume: number;
     src: string | undefined;
@@ -37,6 +39,7 @@ export declare const useMediaInTimeline: ({ volume, mediaVolume, src, mediaType,
     premountDisplay: number | null;
     postmountDisplay: number | null;
     loopDisplay: LoopDisplay | undefined;
+    loopVolumeCurveBehavior: LoopVolumeCurveBehavior;
     documentationLink: string | null;
     refForOutline: import("react").RefObject<Element | null> | null;
     muted: boolean;

package/dist/cjs/use-media-in-timeline.js

@@ -5,6 +5,7 @@ const react_1 = require("react");
 const use_audio_frame_js_1 = require("./audio/use-audio-frame.js");
 const get_asset_file_name_js_1 = require("./get-asset-file-name.js");
 const get_timeline_duration_js_1 = require("./get-timeline-duration.js");
+const index_js_1 = require("./loop/index.js");
 const SequenceContext_js_1 = require("./SequenceContext.js");
 const SequenceManager_js_1 = require("./SequenceManager.js");
 const use_remotion_environment_js_1 = require("./use-remotion-environment.js");
@@ -20,19 +21,20 @@ const warnOnce = (message) => {
     console.warn(message);
     didWarn[message] = true;
 };
-const useBasicMediaInTimeline = ({ volume, mediaVolume, mediaType, src, displayName, trimBefore, trimAfter, playbackRate, sequenceDurationInFrames, mediaStartsAt, loop, muted, }) => {
-    var _a;
+const useBasicMediaInTimeline = ({ volume, mediaVolume, mediaType, src, displayName, trimBefore, trimAfter, playbackRate, sequenceDurationInFrames, mediaStartsAt, mediaFrom, loop, muted, }) => {
+    var _a, _b;
     if (!src) {
         throw new Error('No src passed');
     }
     const parentSequence = (0, react_1.useContext)(SequenceContext_js_1.SequenceContext);
+    const sequencePlaybackRate = (_a = parentSequence === null || parentSequence === void 0 ? void 0 : parentSequence.playbackRate) !== null && _a !== void 0 ? _a : 1;
     const [initialVolume] = (0, react_1.useState)(() => volume);
     const duration = (0, get_timeline_duration_js_1.getTimelineDuration)({
         compositionDurationInFrames: sequenceDurationInFrames,
         playbackRate,
         trimBefore,
         trimAfter,
-        parentSequenceDurationInFrames: (_a = parentSequence === null || parentSequence === void 0 ? void 0 : parentSequence.durationInFrames) !== null && _a !== void 0 ? _a : null,
+        parentSequenceDurationInFrames: (_b = parentSequence === null || parentSequence === void 0 ? void 0 : parentSequence.durationInFrames) !== null && _b !== void 0 ? _b : null,
         loop,
     });
     const volumes = (0, react_1.useMemo)(() => {
@@ -46,17 +48,27 @@ const useBasicMediaInTimeline = ({ volume, mediaVolume, mediaType, src, displayN
                 mediaVolume,
             });
         }
-        return new Array(Math.floor(Math.max(0, duration + mediaStartsAt)))
+        // Curves start at the first visible frame, just like the live volume callback.
+        // Sampling composition frames also preserves fractional local frames at slow rates.
+        return new Array(Math.ceil(Math.max(0, duration + Math.min(0, mediaStartsAt + mediaFrom)) /
+            sequencePlaybackRate))
             .fill(true)
             .map((_, i) => {
             return (0, volume_prop_js_1.evaluateVolume)({
-                frame: i + mediaStartsAt,
+                frame: i * sequencePlaybackRate,
                 volume,
                 mediaVolume,
             });
         })
             .join(',');
-    }, [duration, mediaStartsAt, volume, mediaVolume]);
+    }, [
+        duration,
+        mediaStartsAt,
+        mediaFrom,
+        volume,
+        mediaVolume,
+        sequencePlaybackRate,
+    ]);
     (0, react_1.useEffect)(() => {
         if (typeof volume === 'number' && volume !== initialVolume) {
             warnOnce(`Remotion: The ${mediaType} with src ${src} has changed it's volume. Prefer the callback syntax for setting volume to get better timeline display: https://www.remotion.dev/docs/audio/volume`);
@@ -88,15 +100,17 @@ const useBasicMediaInTimeline = ({ volume, mediaVolume, mediaType, src, displayN
     return memoizedResult;
 };
 exports.useBasicMediaInTimeline = useBasicMediaInTimeline;
-const useMediaInTimeline = ({ volume, mediaVolume, src, mediaType, playbackRate, displayName, id, getStack, showInTimeline, premountDisplay, postmountDisplay, loopDisplay, documentationLink, refForOutline, muted, }) => {
+const useMediaInTimeline = ({ volume, mediaVolume, src, mediaType, playbackRate, displayName, id, getStack, showInTimeline, premountDisplay, postmountDisplay, loopDisplay, loopVolumeCurveBehavior, documentationLink, refForOutline, muted, }) => {
     var _a, _b;
     const parentSequence = (0, react_1.useContext)(SequenceContext_js_1.SequenceContext);
-    const startsAt = (0, use_audio_frame_js_1.useMediaStartsAt)();
+    const mediaTrimBefore = (0, react_1.useContext)(use_audio_frame_js_1.Html5MediaTrimContext);
     const sequenceRegistrationEnabled = (0, react_1.useContext)(SequenceManager_js_1.SequenceRegistrationContext);
     const { durationInFrames } = (0, use_video_config_js_1.useVideoConfig)();
     const mediaStartsAt = (0, use_audio_frame_js_1.useMediaStartsAt)();
-    const { volumes, duration, doesVolumeChange, finalDisplayName } = (0, exports.useBasicMediaInTimeline)({
-        volume,
+    const loopContext = index_js_1.Loop.useLoop();
+    const loopTimeline = (0, react_1.useContext)(index_js_1.LoopTimelineContext);
+    const { volumes: basicVolumes, duration, finalDisplayName, } = (0, exports.useBasicMediaInTimeline)({
+        volume: loopContext && typeof volume === 'function' ? undefined : volume,
         mediaVolume,
         mediaType,
         src,
@@ -106,9 +120,59 @@ const useMediaInTimeline = ({ volume, mediaVolume, src, mediaType, playbackRate,
         playbackRate,
         sequenceDurationInFrames: durationInFrames,
         mediaStartsAt,
+        mediaFrom: 0,
         loop: false,
         muted,
     });
+    const doesVolumeChange = typeof volume === 'function';
+    const volumes = (0, react_1.useMemo)(() => {
+        var _a;
+        if (!loopContext || !loopTimeline || typeof volume !== 'function') {
+            return basicVolumes;
+        }
+        const timeline = loopTimeline;
+        const loopDuration = loopContext.durationInFrames;
+        const sequenceRate = (_a = parentSequence === null || parentSequence === void 0 ? void 0 : parentSequence.playbackRate) !== null && _a !== void 0 ? _a : 1;
+        const mediaOrigin = parentSequence
+            ? parentSequence.cumulatedFrom + parentSequence.relativeFrom
+            : 0;
+        const mediaOffset = mediaOrigin +
+            mediaTrimBefore / sequenceRate -
+            (timeline.startFrame +
+                (loopContext.iteration * loopDuration) / timeline.playbackRate);
+        const firstVisible = Math.max(0, timeline.firstVisibleFrame);
+        const firstCompositionFrame = Math.ceil(firstVisible);
+        return Array.from({
+            length: Math.max(0, Math.ceil(timeline.endFrame) - firstCompositionFrame),
+        }, (_, index) => {
+            const compositionFrame = firstCompositionFrame + index;
+            const loopsElapsed = ((compositionFrame - timeline.startFrame) * timeline.playbackRate) /
+                loopDuration;
+            const nearestIteration = Math.round(loopsElapsed);
+            const iteration = Math.abs(loopsElapsed - nearestIteration) <=
+                Number.EPSILON * Math.max(1, Math.abs(loopsElapsed)) * 4
+                ? nearestIteration
+                : Math.floor(loopsElapsed);
+            const iterationStart = timeline.startFrame +
+                (iteration * loopDuration) / timeline.playbackRate +
+                mediaOffset;
+            const frame = Math.max(0, compositionFrame - Math.max(firstVisible, iterationStart)) *
+                sequenceRate +
+                (loopVolumeCurveBehavior === 'extend'
+                    ? (iteration * loopDuration * sequenceRate) / timeline.playbackRate
+                    : 0);
+            return (0, volume_prop_js_1.evaluateVolume)({ frame, volume, mediaVolume });
+        }).join(',');
+    }, [
+        basicVolumes,
+        loopContext,
+        loopTimeline,
+        mediaTrimBefore,
+        mediaVolume,
+        parentSequence,
+        volume,
+        loopVolumeCurveBehavior,
+    ]);
     const { isStudio } = (0, use_remotion_environment_js_1.useRemotionEnvironment)();
     const getSequenceForRegistration = (0, react_1.useCallback)(() => {
         var _a;
@@ -130,11 +194,12 @@ const useMediaInTimeline = ({ volume, mediaVolume, src, mediaType, playbackRate,
             muted,
             showInTimeline: true,
             timelineOrder: null,
-            startMediaFrom: 0 - startsAt,
-            mediaFrameAtSequenceZero: null,
+            startMediaFrom: mediaTrimBefore,
+            mediaFrameAtSequenceZero: mediaTrimBefore * (1 - playbackRate),
             doesVolumeChange,
             loopDisplay,
             playbackRate,
+            sequencePlaybackRate: 1,
             getStack,
             premountDisplay,
             postmountDisplay,
@@ -153,7 +218,7 @@ const useMediaInTimeline = ({ volume, mediaVolume, src, mediaType, playbackRate,
         volumes,
         doesVolumeChange,
         mediaType,
-        startsAt,
+        mediaTrimBefore,
         playbackRate,
         getStack,
         premountDisplay,

package/dist/cjs/use-media-playback.js

@@ -11,6 +11,7 @@ const media_tag_current_time_timestamp_js_1 = require("./media-tag-current-time-
 const play_and_handle_not_allowed_error_js_1 = require("./play-and-handle-not-allowed-error.js");
 const playback_logging_js_1 = require("./playback-logging.js");
 const seek_js_1 = require("./seek.js");
+const SequenceContext_js_1 = require("./SequenceContext.js");
 const timeline_position_state_js_1 = require("./timeline-position-state.js");
 const use_buffering_js_1 = require("./use-buffering.js");
 const use_current_frame_js_1 = require("./use-current-frame.js");
@@ -35,13 +36,14 @@ const getPauseReason = ({ reason, isPremounting, isPostmounting, }) => {
     return 'Player is not playing';
 };
 const useMediaPlayback = ({ mediaRef, src, mediaType, playbackRate: localPlaybackRate, preservePitch = true, onlyWarnForMediaSeekingError, acceptableTimeshift, pauseWhenBuffering, isPremounting, isPostmounting, onAutoPlayError, }) => {
+    var _a;
     const { playbackRate: globalPlaybackRate } = (0, timeline_position_state_js_1.usePlaybackRate)();
     const frame = (0, use_current_frame_js_1.useCurrentFrame)();
     const absoluteFrame = (0, timeline_position_state_js_1.useTimelinePosition)();
     const playing = (0, timeline_position_state_js_1.usePlaying)();
     const playerBuffering = (0, use_buffering_js_1.useBuffering)();
     const { fps } = (0, use_video_config_js_1.useVideoConfig)();
-    const mediaStartsAt = (0, use_audio_frame_js_1.useMediaStartsAt)();
+    const mediaTrimBefore = (0, react_1.useContext)(use_audio_frame_js_1.Html5MediaTrimContext);
     const lastSeekDueToShift = (0, react_1.useRef)(null);
     const lastSeek = (0, react_1.useRef)(null);
     const logLevel = (0, log_level_context_js_1.useLogLevel)();
@@ -67,7 +69,7 @@ const useMediaPlayback = ({ mediaRef, src, mediaType, playbackRate: localPlaybac
     const desiredUnclampedTime = (0, get_current_time_js_1.getMediaTime)({
         frame,
         playbackRate: localPlaybackRate,
-        startFrom: -mediaStartsAt,
+        startFrom: mediaTrimBefore,
         fps,
     });
     const isMediaTagBuffering = (0, use_media_buffering_js_1.useMediaBuffering)({
@@ -87,7 +89,10 @@ const useMediaPlayback = ({ mediaRef, src, mediaType, playbackRate: localPlaybac
         logLevel,
         mountTime,
     });
-    const playbackRate = localPlaybackRate * globalPlaybackRate;
+    const sequenceContext = (0, react_1.useContext)(SequenceContext_js_1.SequenceContext);
+    const playbackRate = localPlaybackRate *
+        globalPlaybackRate *
+        ((_a = sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.playbackRate) !== null && _a !== void 0 ? _a : 1);
     const acceptableTimeShiftButLessThanDuration = (() => {
         var _a;
         // For short audio, a lower acceptable time shift is used

package/dist/cjs/use-premounting.js

@@ -2,12 +2,16 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.usePremounting = void 0;
 const react_1 = require("react");
+const get_sequence_boundary_tolerance_js_1 = require("./get-sequence-boundary-tolerance.js");
 const PremountContext_js_1 = require("./PremountContext.js");
+const SequenceContext_js_1 = require("./SequenceContext.js");
+const timeline_position_state_js_1 = require("./timeline-position-state.js");
 const use_current_frame_js_1 = require("./use-current-frame.js");
 const use_remotion_environment_js_1 = require("./use-remotion-environment.js");
 const use_video_config_js_1 = require("./use-video-config.js");
 const v5_flag_js_1 = require("./v5-flag.js");
 const usePremounting = ({ from, durationInFrames, premountFor, postmountFor, style, styleWhilePremounted, styleWhilePostmounted, hideWhilePremounted, }) => {
+    var _a;
     const parentPremountContext = (0, react_1.useContext)(PremountContext_js_1.PremountContext);
     const frame = (0, use_current_frame_js_1.useCurrentFrame)() - parentPremountContext.premountFramesRemaining;
     const environment = (0, use_remotion_environment_js_1.useRemotionEnvironment)();
@@ -16,13 +20,23 @@ const usePremounting = ({ from, durationInFrames, premountFor, postmountFor, sty
         ? (premountFor !== null && premountFor !== void 0 ? premountFor : fps)
         : (premountFor !== null && premountFor !== void 0 ? premountFor : 0);
     const effectivePostmountFor = postmountFor !== null && postmountFor !== void 0 ? postmountFor : 0;
-    const endThreshold = Math.ceil(from + durationInFrames - 1);
+    const endExclusive = from + durationInFrames;
+    const sequenceContext = (0, react_1.useContext)(SequenceContext_js_1.SequenceContext);
+    const boundaryTolerance = (0, get_sequence_boundary_tolerance_js_1.getSequenceBoundaryTolerance)({
+        absoluteFrame: (0, timeline_position_state_js_1.useTimelinePosition)(),
+        cumulatedFrom: sequenceContext
+            ? sequenceContext.cumulatedFrom + sequenceContext.relativeFrom
+            : 0,
+        from,
+        parentPlaybackRate: (_a = sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.playbackRate) !== null && _a !== void 0 ? _a : 1,
+        durationInFrames,
+    });
     const premountingActive = !environment.isRendering &&
-        frame < from &&
-        frame >= from - effectivePremountFor;
+        frame - from < -boundaryTolerance &&
+        frame - (from - effectivePremountFor) >= -boundaryTolerance;
     const postmountingActive = !environment.isRendering &&
-        frame > endThreshold &&
-        frame <= endThreshold + effectivePostmountFor;
+        frame - endExclusive >= -boundaryTolerance &&
+        frame - (endExclusive + effectivePostmountFor) < -boundaryTolerance;
     const isPremountingOrPostmounting = premountingActive || postmountingActive;
     const freezeFrame = premountingActive
         ? from

package/dist/cjs/use-timeline-seek.d.ts

@@ -0,0 +1,6 @@
+import type { RefObject, SetStateAction } from 'react';
+export type TimelineSeek = {
+    readonly revision: RefObject<number>;
+    readonly setFrame: (frame: SetStateAction<Record<string, number>>) => void;
+};
+export declare const useTimelineSeek: (setFrame: (frame: SetStateAction<Record<string, number>>) => void) => TimelineSeek;

package/dist/cjs/use-timeline-seek.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useTimelineSeek = void 0;
+const react_1 = require("react");
+// One instance per timeline, shared by Studio and Player. Keep the revision
+// outside the React updater: updaters may be deferred or run more than once.
+const useTimelineSeek = (setFrame) => {
+    const revision = (0, react_1.useRef)(0);
+    return (0, react_1.useMemo)(() => ({
+        revision,
+        setFrame: (frame) => {
+            // Even a same-frame seek is a boundary for the next media update.
+            revision.current++;
+            setFrame(frame);
+        },
+    }), [setFrame]);
+};
+exports.useTimelineSeek = useTimelineSeek;

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.526";
+export declare const VERSION = "4.0.528";

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.526';
+exports.VERSION = '4.0.528';

package/dist/cjs/video/OffthreadVideo.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.OffthreadVideo = exports.InnerOffthreadVideo = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const use_audio_frame_js_1 = require("../audio/use-audio-frame.js");
 const enable_sequence_stack_traces_js_1 = require("../enable-sequence-stack-traces.js");
 const Sequence_js_1 = require("../Sequence.js");
 const use_remotion_environment_js_1 = require("../use-remotion-environment.js");
@@ -12,6 +13,7 @@ const validate_start_from_props_js_1 = require("../validate-start-from-props.js"
 const OffthreadVideoForRendering_js_1 = require("./OffthreadVideoForRendering.js");
 const VideoForPreview_js_1 = require("./VideoForPreview.js");
 const InnerOffthreadVideo = (props) => {
+    var _a;
     // Should only destruct `startFrom` and `endAt` from props,
     // rest gets drilled down
     const { startFrom, endAt, trimBefore, trimAfter, name, pauseWhenBuffering, _remotionInternalStack, showInTimeline, ...otherProps } = props;
@@ -33,7 +35,11 @@ const InnerOffthreadVideo = (props) => {
     });
     if (typeof trimBeforeValue !== 'undefined' ||
         typeof trimAfterValue !== 'undefined') {
-        return (jsx_runtime_1.jsx(Sequence_js_1.Sequence, { layout: "none", from: 0 - (trimBeforeValue !== null && trimBeforeValue !== void 0 ? trimBeforeValue : 0), showInTimeline: false, durationInFrames: trimAfterValue, name: name, children: jsx_runtime_1.jsx(exports.InnerOffthreadVideo, { pauseWhenBuffering: shouldPauseWhenBuffering, ...otherProps, trimAfter: undefined, name: undefined, showInTimeline: showInTimeline, trimBefore: undefined, _remotionInternalStack: undefined, startFrom: undefined, endAt: undefined }) }));
+        return (jsx_runtime_1.jsx(use_audio_frame_js_1.Html5MediaTrimContext.Provider, { value: trimBeforeValue !== null && trimBeforeValue !== void 0 ? trimBeforeValue : 0, children: jsx_runtime_1.jsx(Sequence_js_1.Sequence, { layout: "none", from: 0 - (trimBeforeValue !== null && trimBeforeValue !== void 0 ? trimBeforeValue : 0), showInTimeline: false, durationInFrames: trimAfterValue === undefined
+                    ? undefined
+                    : (trimBeforeValue !== null && trimBeforeValue !== void 0 ? trimBeforeValue : 0) +
+                        (trimAfterValue - (trimBeforeValue !== null && trimBeforeValue !== void 0 ? trimBeforeValue : 0)) /
+                            ((_a = props.playbackRate) !== null && _a !== void 0 ? _a : 1), name: name, children: jsx_runtime_1.jsx(exports.InnerOffthreadVideo, { pauseWhenBuffering: shouldPauseWhenBuffering, ...otherProps, trimAfter: undefined, name: undefined, showInTimeline: showInTimeline, trimBefore: undefined, _remotionInternalStack: undefined, startFrom: undefined, endAt: undefined }) }) }));
     }
     (0, validate_media_props_js_1.validateMediaProps)(props, 'Video');
     if (environment.isRendering) {

package/dist/cjs/video/OffthreadVideoForRendering.js

@@ -26,12 +26,14 @@ const OffthreadVideoForRendering = ({ onError, volume: volumeProp, playbackRate,
 // Remove crossOrigin prop during rendering
 // https://discord.com/channels/809501355504959528/844143007183667220/1311639632496033813
 crossOrigin, audioStreamIndex, preservePitch: _preservePitch, ...props }) => {
+    var _a;
     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)(loopVolumeCurveBehavior);
     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)();
+    const sequencePlaybackRate = (_a = sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.playbackRate) !== null && _a !== void 0 ? _a : 1;
+    const audioStartFrame = (0, react_1.useContext)(use_audio_frame_js_1.Html5MediaTrimContext);
     const { registerRenderAsset, unregisterRenderAsset } = (0, react_1.useContext)(RenderAssetManager_js_1.RenderAssetManager);
     if (!src) {
         throw new TypeError('No `src` was passed to <OffthreadVideo>.');
@@ -60,7 +62,6 @@ crossOrigin, audioStreamIndex, preservePitch: _preservePitch, ...props }) => {
         throw new Error('No video config found');
     }
     (0, react_1.useEffect)(() => {
-        var _a;
         if (!src) {
             throw new Error('No src passed');
         }
@@ -73,10 +74,11 @@ crossOrigin, audioStreamIndex, preservePitch: _preservePitch, ...props }) => {
             id,
             frame: absoluteFrame,
             volume,
-            mediaFrame: frame,
-            playbackRate,
+            // Render assets use composition frames; source trimming stays in media frames.
+            mediaFrame: audioStartFrame + (frame - audioStartFrame) / sequencePlaybackRate,
+            playbackRate: playbackRate * sequencePlaybackRate,
             toneFrequency,
-            audioStartFrame: Math.max(0, -((_a = sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.cumulatedNegativeFrom) !== null && _a !== void 0 ? _a : 0)),
+            audioStartFrame,
             audioStreamIndex,
         });
         return () => unregisterRenderAsset(id);
@@ -91,16 +93,17 @@ crossOrigin, audioStreamIndex, preservePitch: _preservePitch, ...props }) => {
         absoluteFrame,
         playbackRate,
         toneFrequency,
-        sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.cumulatedNegativeFrom,
+        audioStartFrame,
+        sequencePlaybackRate,
         audioStreamIndex,
     ]);
     const currentTime = (0, react_1.useMemo)(() => {
         return ((0, get_current_time_js_1.getExpectedMediaFrameUncorrected)({
             frame,
             playbackRate: playbackRate || 1,
-            startFrom: -mediaStartsAt,
+            startFrom: audioStartFrame,
         }) / videoConfig.fps);
-    }, [frame, mediaStartsAt, playbackRate, videoConfig.fps]);
+    }, [frame, audioStartFrame, playbackRate, videoConfig.fps]);
     const actualSrc = (0, react_1.useMemo)(() => {
         return (0, offthread_video_source_js_1.getOffthreadVideoSource)({
             src,

package/dist/cjs/video/VideoForPreview.js

@@ -139,6 +139,7 @@ const VideoForDevelopmentRefForwardingFunction = (props, ref) => {
         premountDisplay: (_c = parentSequence === null || parentSequence === void 0 ? void 0 : parentSequence.premountDisplay) !== null && _c !== void 0 ? _c : null,
         postmountDisplay: (_d = parentSequence === null || parentSequence === void 0 ? void 0 : parentSequence.postmountDisplay) !== null && _d !== void 0 ? _d : null,
         loopDisplay: undefined,
+        loopVolumeCurveBehavior: loopVolumeCurveBehavior !== null && loopVolumeCurveBehavior !== void 0 ? loopVolumeCurveBehavior : 'repeat',
         documentationLink: onlyWarnForMediaSeekingError
             ? 'https://www.remotion.dev/docs/offthreadvideo'
             : 'https://www.remotion.dev/docs/html5-video',

package/dist/cjs/video/VideoForRendering.js

@@ -24,14 +24,15 @@ const get_current_time_js_1 = require("./get-current-time.js");
 const MediaPlaybackError_js_1 = require("./MediaPlaybackError.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, loopVolumeCurveBehavior, audioStreamIndex, onVideoFrame, preservePitch: _preservePitch, ...props }, ref) => {
-    var _a;
+    var _a, _b;
     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)(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);
-    const mediaStartsAt = (0, use_audio_frame_js_1.useMediaStartsAt)();
+    const sequencePlaybackRate = (_a = sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.playbackRate) !== null && _a !== void 0 ? _a : 1;
+    const audioStartFrame = (0, react_1.useContext)(use_audio_frame_js_1.Html5MediaTrimContext);
     const environment = (0, use_remotion_environment_js_1.useRemotionEnvironment)();
     const logLevel = (0, log_level_context_js_1.useLogLevel)();
     const mountTime = (0, log_level_context_js_1.useMountTime)();
@@ -56,7 +57,7 @@ const VideoForRenderingForwardFunction = ({ onError, volume: volumeProp, allowAm
     (0, volume_safeguard_js_1.warnAboutTooHighVolume)(volume);
     const audioEnabled = (0, use_media_enabled_js_1.useAudioEnabled)();
     const { shouldUseAudio } = (0, use_media_audio_state_js_1.useMediaAudioState)({
-        muted: (_a = props.muted) !== null && _a !== void 0 ? _a : false,
+        muted: (_b = props.muted) !== null && _b !== void 0 ? _b : false,
         volume,
         audioEnabled,
     });
@@ -64,7 +65,6 @@ const VideoForRenderingForwardFunction = ({ onError, volume: volumeProp, allowAm
         throw new Error('No video config found');
     }
     (0, react_1.useEffect)(() => {
-        var _a;
         if (!props.src) {
             throw new Error('No src passed');
         }
@@ -77,10 +77,11 @@ const VideoForRenderingForwardFunction = ({ onError, volume: volumeProp, allowAm
             id,
             frame: absoluteFrame,
             volume,
-            mediaFrame: frame,
-            playbackRate: playbackRate !== null && playbackRate !== void 0 ? playbackRate : 1,
+            // Render assets use composition frames; source trimming stays in media frames.
+            mediaFrame: audioStartFrame + (frame - audioStartFrame) / sequencePlaybackRate,
+            playbackRate: (playbackRate !== null && playbackRate !== void 0 ? playbackRate : 1) * sequencePlaybackRate,
             toneFrequency: toneFrequency !== null && toneFrequency !== void 0 ? toneFrequency : 1,
-            audioStartFrame: Math.max(0, -((_a = sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.cumulatedNegativeFrom) !== null && _a !== void 0 ? _a : 0)),
+            audioStartFrame,
             audioStreamIndex: audioStreamIndex !== null && audioStreamIndex !== void 0 ? audioStreamIndex : 0,
         });
         return () => unregisterRenderAsset(id);
@@ -95,7 +96,8 @@ const VideoForRenderingForwardFunction = ({ onError, volume: volumeProp, allowAm
         absoluteFrame,
         playbackRate,
         toneFrequency,
-        sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.cumulatedNegativeFrom,
+        audioStartFrame,
+        sequencePlaybackRate,
         audioStreamIndex,
     ]);
     (0, react_1.useImperativeHandle)(ref, () => {
@@ -114,7 +116,7 @@ const VideoForRenderingForwardFunction = ({ onError, volume: volumeProp, allowAm
         const currentTime = (0, get_current_time_js_1.getMediaTime)({
             frame,
             playbackRate: playbackRate || 1,
-            startFrom: -mediaStartsAt,
+            startFrom: audioStartFrame,
             fps: videoConfig.fps,
         });
         const handle = delayRender(`Rendering <Html5Video /> with src="${props.src}" at time ${currentTime}`, {
@@ -187,7 +189,7 @@ const VideoForRenderingForwardFunction = ({ onError, volume: volumeProp, allowAm
         playbackRate,
         videoConfig.fps,
         frame,
-        mediaStartsAt,
+        audioStartFrame,
         onError,
         delayRenderRetries,
         delayRenderTimeoutInMilliseconds,

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

@@ -5,6 +5,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 /* eslint-disable @typescript-eslint/no-use-before-define */
 const react_1 = require("react");
 const absolute_src_js_1 = require("../absolute-src.js");
+const use_audio_frame_js_1 = require("../audio/use-audio-frame.js");
 const calculate_media_duration_js_1 = require("../calculate-media-duration.js");
 const enable_sequence_stack_traces_js_1 = require("../enable-sequence-stack-traces.js");
 const index_js_1 = require("../loop/index.js");
@@ -47,23 +48,27 @@ const VideoForwardingFunction = (props, ref) => {
         trimBefore,
         trimAfter,
     });
-    if (loop && durationFetched !== undefined) {
-        if (!Number.isFinite(durationFetched)) {
+    // An explicit trim end defines the loop before metadata has loaded. Waiting
+    // for metadata would leave the media unmounted when seeking into later loops.
+    const loopDuration = trimAfterValue !== null && trimAfterValue !== void 0 ? trimAfterValue : (durationFetched === undefined ? undefined : durationFetched * fps);
+    if (loop && loopDuration !== undefined) {
+        if (!Number.isFinite(loopDuration)) {
             return (jsx_runtime_1.jsx(exports.Html5Video, { ...propsOtherThanLoop, ref: ref, _remotionInternalStack: _remotionInternalStack, _remotionInternalNativeLoopPassed: true }));
         }
-        const mediaDuration = durationFetched * fps;
         return (jsx_runtime_1.jsx(index_js_1.Loop, { durationInFrames: (0, calculate_media_duration_js_1.calculateMediaDuration)({
                 trimAfter: trimAfterValue,
-                mediaDurationInFrames: mediaDuration,
+                mediaDurationInFrames: loopDuration,
                 playbackRate: (_b = props.playbackRate) !== null && _b !== void 0 ? _b : 1,
                 trimBefore: trimBeforeValue,
             }), layout: "none", name: name, showInTimeline: false, children: jsx_runtime_1.jsx(exports.Html5Video, { ...propsOtherThanLoop, ref: ref, _remotionInternalStack: _remotionInternalStack, _remotionInternalNativeLoopPassed: true }) }));
     }
     if (typeof trimBeforeValue !== 'undefined' ||
         typeof trimAfterValue !== 'undefined') {
-        return (jsx_runtime_1.jsx(Sequence_js_1.Sequence, { layout: "none", from: 0 - (trimBeforeValue !== null && trimBeforeValue !== void 0 ? trimBeforeValue : 0), showInTimeline: false, durationInFrames: trimAfterValue === undefined
-                ? undefined
-                : trimAfterValue / ((_c = props.playbackRate) !== null && _c !== void 0 ? _c : 1), name: name, children: jsx_runtime_1.jsx(exports.Html5Video, { pauseWhenBuffering: shouldPauseWhenBuffering, onVideoFrame: onVideoFrame, ...otherProps, ref: ref, _remotionInternalStack: _remotionInternalStack }) }));
+        return (jsx_runtime_1.jsx(use_audio_frame_js_1.Html5MediaTrimContext.Provider, { value: trimBeforeValue !== null && trimBeforeValue !== void 0 ? trimBeforeValue : 0, children: jsx_runtime_1.jsx(Sequence_js_1.Sequence, { layout: "none", from: 0 - (trimBeforeValue !== null && trimBeforeValue !== void 0 ? trimBeforeValue : 0), showInTimeline: false, durationInFrames: trimAfterValue === undefined
+                    ? undefined
+                    : (trimBeforeValue !== null && trimBeforeValue !== void 0 ? trimBeforeValue : 0) +
+                        (trimAfterValue - (trimBeforeValue !== null && trimBeforeValue !== void 0 ? trimBeforeValue : 0)) /
+                            ((_c = props.playbackRate) !== null && _c !== void 0 ? _c : 1), name: name, children: jsx_runtime_1.jsx(exports.Html5Video, { pauseWhenBuffering: shouldPauseWhenBuffering, onVideoFrame: onVideoFrame, ...otherProps, ref: ref, _remotionInternalStack: _remotionInternalStack }) }) }));
     }
     (0, validate_media_props_js_1.validateMediaProps)({
         playbackRate: props.playbackRate,