remotion 4.0.526 → 4.0.528

package/dist/cjs/TimelineContext.js

@@ -6,10 +6,13 @@ const react_1 = require("react");
 const runtime_value_store_js_1 = require("./runtime-value-store.js");
 const timeline_position_state_1 = require("./timeline-position-state");
 const use_delay_render_1 = require("./use-delay-render");
+const use_remotion_environment_1 = require("./use-remotion-environment");
+const use_timeline_seek_1 = require("./use-timeline-seek");
 const missingSetTimelineContext = () => {
     throw new Error('SetTimelineContext is missing. This is likely caused by a Remotion version mismatch.');
 };
 exports.SetTimelineContext = (0, react_1.createContext)({
+    seek: null,
     setFrame: missingSetTimelineContext,
     setPlaying: missingSetTimelineContext,
     setBuffering: missingSetTimelineContext,
@@ -29,6 +32,9 @@ const TimelineContextProvider = ({ children, frameState }) => {
     const [playbackRate, setPlaybackRate] = (0, react_1.useState)(1);
     const audioAndVideoTags = (0, react_1.useRef)([]);
     const [_frame, setFrame] = (0, react_1.useState)(() => (0, timeline_position_state_1.getInitialFrameState)());
+    const timelineSeek = (0, use_timeline_seek_1.useTimelineSeek)(setFrame);
+    const { isStudio } = (0, use_remotion_environment_1.useRemotionEnvironment)();
+    const seek = isStudio ? timelineSeek : null;
     const frame = frameState !== null && frameState !== void 0 ? frameState : _frame;
     const frameRef = (0, react_1.useRef)(frame);
     frameRef.current = frame;
@@ -83,6 +89,7 @@ const TimelineContextProvider = ({ children, frameState }) => {
     const setTimelineContextValue = (0, react_1.useMemo)(() => {
         return {
             setFrame,
+            seek,
             setPlaying: (updater) => {
                 const current = playingStore.store.getSnapshot().playing;
                 const next = typeof updater === 'function' ? updater(current) : updater;
@@ -102,7 +109,7 @@ const TimelineContextProvider = ({ children, frameState }) => {
             frameRef,
             audioAndVideoTags,
         };
-    }, [bufferingStore, playingStore, readIsBuffering, readIsPlaying]);
+    }, [bufferingStore, playingStore, readIsBuffering, readIsPlaying, seek]);
     return (jsx_runtime_1.jsx(exports.AbsoluteTimeContext.Provider, { value: timelineContextValue, children: jsx_runtime_1.jsx(exports.PlaybackRateContext.Provider, { value: playbackRateContextValue, children: jsx_runtime_1.jsx(exports.TimelineContext.Provider, { value: timelineContextValue, children: jsx_runtime_1.jsx(exports.SetTimelineContext.Provider, { value: setTimelineContextValue, children: children }) }) }) }));
 };
 exports.TimelineContextProvider = TimelineContextProvider;

package/dist/cjs/animated-image/AnimatedImage.d.ts

@@ -190,6 +190,15 @@ export declare const animatedImageSchema: {
         readonly step: 1;
         readonly hiddenFromList: true;
     };
+    readonly playbackRate: {
+        readonly type: "number";
+        readonly default: 1;
+        readonly min: 0.01;
+        readonly step: 0.1;
+        readonly description: "Playback rate";
+        readonly hiddenFromList: false;
+        readonly keyframable: false;
+    };
     readonly freeze: {
         readonly type: "number";
         readonly default: null;
@@ -206,16 +215,6 @@ export declare const animatedImageSchema: {
         readonly description: "Source";
         readonly keyframable: false;
     };
-    readonly playbackRate: {
-        readonly type: "number";
-        readonly min: 0;
-        readonly max: 10;
-        readonly step: 0.1;
-        readonly default: 1;
-        readonly description: "Playback rate";
-        readonly hiddenFromList: false;
-        readonly keyframable: false;
-    };
 };
 export declare const AnimatedImage: React.ComponentType<import("../Interactive.js").InteractiveBaseProps & import("../Interactive.js").InteractiveCropProps & import("../Interactive.js").InteractivePremountProps & {
     src: string;

package/dist/cjs/animated-image/AnimatedImage.js

@@ -31,16 +31,6 @@ exports.animatedImageSchema = {
     ...interactivity_schema_js_1.baseSchema,
     ...interactivity_schema_js_1.cropSchema,
     ...interactivity_schema_js_1.premountSchema,
-    playbackRate: {
-        type: 'number',
-        min: 0,
-        max: 10,
-        step: 0.1,
-        default: 1,
-        description: 'Playback rate',
-        hiddenFromList: false,
-        keyframable: false,
-    },
     ...interactivity_schema_js_1.transformSchema,
     ...interactivity_schema_js_1.backgroundSchema,
     ...interactivity_schema_js_1.borderSchema,
@@ -231,7 +221,6 @@ const AnimatedImageInner = ({ src, width, height, onError, fit, playbackRate, lo
         height,
         onError,
         fit,
-        playbackRate,
         loopBehavior,
         id,
         className,
@@ -239,7 +228,7 @@ const AnimatedImageInner = ({ src, width, height, onError, fit, playbackRate, lo
         requestInit,
         ...canvasProps,
     };
-    return (jsx_runtime_1.jsx(freeze_js_1.Freeze, { frame: freezeFrame, active: isPremountingOrPostmounting, children: jsx_runtime_1.jsx(Sequence_js_1.Sequence, { layout: "none", from: from !== null && from !== void 0 ? from : 0, durationInFrames: durationInFrames !== null && durationInFrames !== void 0 ? durationInFrames : Infinity, name: "<AnimatedImage>", _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/animatedimage", controls: controls, _remotionInternalEffects: memoizedEffectDefinitions, _remotionInternalPremountDisplay: effectivePremountFor || null, _remotionInternalPostmountDisplay: effectivePostmountFor || null, _remotionInternalIsPremounting: premountingActive, _remotionInternalIsPostmounting: postmountingActive, ...sequenceProps, outlineRef: actualRef, children: jsx_runtime_1.jsx(AnimatedImageContent, { ...animatedImageProps, ref: actualRef, effects: effects, controls: controls }) }) }));
+    return (jsx_runtime_1.jsx(freeze_js_1.Freeze, { frame: freezeFrame, active: isPremountingOrPostmounting, children: jsx_runtime_1.jsx(Sequence_js_1.Sequence, { layout: "none", from: from !== null && from !== void 0 ? from : 0, playbackRate: playbackRate, durationInFrames: durationInFrames !== null && durationInFrames !== void 0 ? durationInFrames : Infinity, name: "<AnimatedImage>", _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/animatedimage", controls: controls, _remotionInternalEffects: memoizedEffectDefinitions, _remotionInternalPremountDisplay: effectivePremountFor || null, _remotionInternalPostmountDisplay: effectivePostmountFor || null, _remotionInternalIsPremounting: premountingActive, _remotionInternalIsPostmounting: postmountingActive, ...sequenceProps, outlineRef: actualRef, children: jsx_runtime_1.jsx(AnimatedImageContent, { ...animatedImageProps, ref: actualRef, effects: effects, controls: controls }) }) }));
 };
 exports.AnimatedImage = (0, with_interactivity_schema_js_1.withInteractivitySchema)({
     Component: AnimatedImageInner,

package/dist/cjs/audio/AudioForPreview.js

@@ -140,6 +140,7 @@ const AudioForDevelopmentForwardRefFunction = (props, ref) => {
         premountDisplay: (_a = sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.premountDisplay) !== null && _a !== void 0 ? _a : null,
         postmountDisplay: (_b = sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.postmountDisplay) !== null && _b !== void 0 ? _b : null,
         loopDisplay: undefined,
+        loopVolumeCurveBehavior: loopVolumeCurveBehavior !== null && loopVolumeCurveBehavior !== void 0 ? loopVolumeCurveBehavior : 'repeat',
         documentationLink: 'https://www.remotion.dev/docs/html5-audio',
         refForOutline: null,
         muted: isMutedForTimeline,

package/dist/cjs/audio/AudioForRendering.js

@@ -16,13 +16,15 @@ const volume_safeguard_js_1 = require("../volume-safeguard.js");
 const use_audio_frame_js_1 = require("./use-audio-frame.js");
 const use_media_audio_state_js_1 = require("./use-media-audio-state.js");
 const AudioForRenderingRefForwardingFunction = (props, ref) => {
-    var _a;
+    var _a, _b;
     const audioRef = (0, react_1.useRef)(null);
     const { volume: volumeProp, playbackRate, allowAmplificationDuringRender, onDuration, toneFrequency, _remotionInternalNeedsDurationCalculation, _remotionInternalNativeLoopPassed, acceptableTimeShiftInSeconds, name, onNativeError, delayRenderRetries, delayRenderTimeoutInMilliseconds, loopVolumeCurveBehavior, pauseWhenBuffering, audioStreamIndex, preservePitch: _preservePitch, ...nativeProps } = props;
     const absoluteFrame = (0, timeline_position_state_js_1.useTimelinePosition)();
     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 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);
     const { delayRender, continueRender } = (0, use_delay_render_js_1.useDelayRender)();
     // Generate a string that's as unique as possible for this asset
@@ -44,7 +46,7 @@ const AudioForRenderingRefForwardingFunction = (props, ref) => {
     (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,
     });
@@ -52,7 +54,7 @@ const AudioForRenderingRefForwardingFunction = (props, ref) => {
         return audioRef.current;
     }, []);
     (0, react_1.useEffect)(() => {
-        var _a, _b;
+        var _a;
         if (!props.src) {
             throw new Error('No src passed');
         }
@@ -65,10 +67,11 @@ const AudioForRenderingRefForwardingFunction = (props, ref) => {
             id,
             frame: absoluteFrame,
             volume,
-            mediaFrame: frame,
-            playbackRate: (_a = props.playbackRate) !== null && _a !== void 0 ? _a : 1,
+            // Render assets use composition frames; source trimming stays in media frames.
+            mediaFrame: audioStartFrame + (frame - audioStartFrame) / sequencePlaybackRate,
+            playbackRate: ((_a = props.playbackRate) !== null && _a !== void 0 ? _a : 1) * sequencePlaybackRate,
             toneFrequency: toneFrequency !== null && toneFrequency !== void 0 ? toneFrequency : 1,
-            audioStartFrame: Math.max(0, -((_b = sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.cumulatedNegativeFrom) !== null && _b !== void 0 ? _b : 0)),
+            audioStartFrame,
             audioStreamIndex: audioStreamIndex !== null && audioStreamIndex !== void 0 ? audioStreamIndex : 0,
         });
         return () => unregisterRenderAsset(id);
@@ -85,7 +88,8 @@ const AudioForRenderingRefForwardingFunction = (props, ref) => {
         playbackRate,
         props.playbackRate,
         toneFrequency,
-        sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.cumulatedNegativeFrom,
+        audioStartFrame,
+        sequencePlaybackRate,
         audioStreamIndex,
     ]);
     const { src } = props;

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

@@ -20,8 +20,9 @@ const duration_state_js_1 = require("../video/duration-state.js");
 const AudioForPreview_js_1 = require("./AudioForPreview.js");
 const AudioForRendering_js_1 = require("./AudioForRendering.js");
 const shared_audio_tags_js_1 = require("./shared-audio-tags.js");
+const use_audio_frame_js_1 = require("./use-audio-frame.js");
 const AudioRefForwardingFunction = (props, ref) => {
-    var _a, _b, _c;
+    var _a, _b, _c, _d;
     const audioTagsContext = (0, react_1.useContext)(shared_audio_tags_js_1.SharedAudioTagsContext);
     const propsWithFreeze = props;
     const { startFrom, endAt, trimBefore, trimAfter, name, _remotionInternalStack, pauseWhenBuffering, showInTimeline, onError: onRemotionError, freeze, ...otherProps } = propsWithFreeze;
@@ -70,21 +71,27 @@ const AudioRefForwardingFunction = (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.Html5Audio, { ...propsOtherThanLoop, ref: ref, _remotionInternalNativeLoopPassed: true }));
         }
-        const duration = durationFetched * fps;
         return (jsx_runtime_1.jsx(index_js_1.Loop, { layout: "none", durationInFrames: (0, calculate_media_duration_js_1.calculateMediaDuration)({
                 trimAfter: trimAfterValue,
-                mediaDurationInFrames: duration,
+                mediaDurationInFrames: loopDuration,
                 playbackRate: (_b = props.playbackRate) !== null && _b !== void 0 ? _b : 1,
                 trimBefore: trimBeforeValue,
             }), children: jsx_runtime_1.jsx(exports.Html5Audio, { ...propsOtherThanLoop, ref: ref, _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, name: name, children: jsx_runtime_1.jsx(exports.Html5Audio, { _remotionInternalNeedsDurationCalculation: Boolean(loop), pauseWhenBuffering: shouldPauseWhenBuffering, ...otherProps, ref: ref }) }));
+        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.Html5Audio, { _remotionInternalNeedsDurationCalculation: Boolean(loop), pauseWhenBuffering: shouldPauseWhenBuffering, ...otherProps, ref: ref }) }) }));
     }
     (0, validate_media_props_js_1.validateMediaProps)({
         playbackRate: props.playbackRate,
@@ -94,7 +101,7 @@ const AudioRefForwardingFunction = (props, ref) => {
     if (environment.isRendering) {
         return (jsx_runtime_1.jsx(AudioForRendering_js_1.AudioForRendering, { onDuration: onDuration, ...props, ref: ref, onNativeError: onError, _remotionInternalNeedsDurationCalculation: Boolean(loop) }));
     }
-    return (jsx_runtime_1.jsx(AudioForPreview_js_1.AudioForPreview, { _remotionInternalNativeLoopPassed: (_c = props._remotionInternalNativeLoopPassed) !== null && _c !== void 0 ? _c : false, _remotionInternalStack: _remotionInternalStack !== null && _remotionInternalStack !== void 0 ? _remotionInternalStack : null, shouldPreMountAudioTags: audioTagsContext !== null && audioTagsContext.numberOfAudioTags > 0, ...props, ref: ref, onNativeError: onError, onDuration: onDuration, pauseWhenBuffering: shouldPauseWhenBuffering, _remotionInternalNeedsDurationCalculation: Boolean(loop), showInTimeline: showInTimeline !== null && showInTimeline !== void 0 ? showInTimeline : true }));
+    return (jsx_runtime_1.jsx(AudioForPreview_js_1.AudioForPreview, { _remotionInternalNativeLoopPassed: (_d = props._remotionInternalNativeLoopPassed) !== null && _d !== void 0 ? _d : false, _remotionInternalStack: _remotionInternalStack !== null && _remotionInternalStack !== void 0 ? _remotionInternalStack : null, shouldPreMountAudioTags: audioTagsContext !== null && audioTagsContext.numberOfAudioTags > 0, ...props, ref: ref, onNativeError: onError, onDuration: onDuration, pauseWhenBuffering: shouldPauseWhenBuffering, _remotionInternalNeedsDurationCalculation: Boolean(loop), showInTimeline: showInTimeline !== null && showInTimeline !== void 0 ? showInTimeline : true }));
 };
 /**
  * @description With this component, you can add audio to your video. All audio formats which are supported by Chromium are supported by the component.

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

@@ -1,3 +1,4 @@
+export declare const Html5MediaTrimContext: import("react").Context<number>;
 export declare const useMediaStartsAt: () => number;
 export type LoopVolumeCurveBehavior = 'repeat' | 'extend';
 /**

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

@@ -1,10 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useFrameForVolumeProp = exports.useMediaStartsAt = void 0;
+exports.useFrameForVolumeProp = exports.useMediaStartsAt = exports.Html5MediaTrimContext = void 0;
 const react_1 = require("react");
 const index_js_1 = require("../loop/index.js");
 const SequenceContext_js_1 = require("../SequenceContext.js");
 const use_current_frame_js_1 = require("../use-current-frame.js");
+// A media trim is a source-frame offset, unlike elapsed time inherited from a Sequence.
+exports.Html5MediaTrimContext = (0, react_1.createContext)(0);
 const useMediaStartsAt = () => {
     var _a;
     const parentSequence = (0, react_1.useContext)(SequenceContext_js_1.SequenceContext);
@@ -16,12 +18,22 @@ exports.useMediaStartsAt = useMediaStartsAt;
  * we calculate the way more intuitive value for currentFrame
  */
 const useFrameForVolumeProp = (behavior) => {
+    var _a, _b;
     const loop = index_js_1.Loop.useLoop();
+    const loopTimeline = (0, react_1.useContext)(index_js_1.LoopTimelineContext);
+    const sequenceContext = (0, react_1.useContext)(SequenceContext_js_1.SequenceContext);
     const frame = (0, use_current_frame_js_1.useCurrentFrame)();
     const startsAt = (0, exports.useMediaStartsAt)();
     if (behavior === 'repeat' || loop === null) {
         return frame + startsAt;
     }
-    return frame + startsAt + loop.durationInFrames * loop.iteration;
+    // Loop durations use the parent's clock, while volume callbacks use the
+    // media's clock, including rates applied inside the loop.
+    return (frame +
+        startsAt +
+        (loop.durationInFrames *
+            loop.iteration *
+            ((_a = sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.playbackRate) !== null && _a !== void 0 ? _a : 1)) /
+            ((_b = loopTimeline === null || loopTimeline === void 0 ? void 0 : loopTimeline.playbackRate) !== null && _b !== void 0 ? _b : 1));
 };
 exports.useFrameForVolumeProp = useFrameForVolumeProp;

package/dist/cjs/calculate-media-duration.js

@@ -11,7 +11,6 @@ const calculateMediaDuration = ({ trimAfter, mediaDurationInFrames, playbackRate
     if (typeof trimBefore !== 'undefined') {
         duration -= trimBefore;
     }
-    const actualDuration = duration / playbackRate;
-    return Number(actualDuration.toFixed(10));
+    return duration / playbackRate;
 };
 exports.calculateMediaDuration = calculateMediaDuration;

package/dist/cjs/canvas-image/CanvasImage.d.ts

@@ -217,7 +217,7 @@ export declare const canvasImageSchema: {
         };
     };
 };
-export declare const CanvasImage: import("react").ComponentType<import("../Interactive.js").InteractiveBaseProps & import("../Interactive.js").InteractiveCropProps & import("../Interactive.js").InteractivePremountProps & CanvasImageCanvasProps & {
+export declare const CanvasImage: import("react").ComponentType<Omit<import("../Interactive.js").InteractiveBaseProps, "playbackRate"> & import("../Interactive.js").InteractiveCropProps & import("../Interactive.js").InteractivePremountProps & CanvasImageCanvasProps & {
     readonly src: string;
     readonly crossOrigin?: "" | "anonymous" | "use-credentials" | undefined;
     readonly width?: number | undefined;

package/dist/cjs/canvas-image/CanvasImage.js

@@ -27,7 +27,7 @@ exports.canvasImageSchema = {
         description: 'Source',
         keyframable: false,
     },
-    ...interactivity_schema_js_1.baseSchema,
+    ...interactivity_schema_js_1.baseSchemaWithoutPlaybackRate,
     ...interactivity_schema_js_1.cropSchema,
     ...interactivity_schema_js_1.premountSchema,
     fit: {

package/dist/cjs/canvas-image/props.d.ts

@@ -2,7 +2,7 @@ import type React from 'react';
 import type { ImageFit } from '../calculate-image-fit.js';
 import type { EffectsProp } from '../effects/effect-types.js';
 import type { InteractiveBaseProps, InteractiveCropProps, InteractivePremountProps } from '../Interactive.js';
-type CanvasImageSequenceProps = InteractiveBaseProps & InteractiveCropProps & InteractivePremountProps;
+type CanvasImageSequenceProps = Omit<InteractiveBaseProps, 'playbackRate'> & InteractiveCropProps & InteractivePremountProps;
 export type CanvasImageCanvasProps = Omit<React.CanvasHTMLAttributes<HTMLCanvasElement>, 'children' | 'height' | 'onError' | 'width'>;
 export type CanvasImageProps = CanvasImageSequenceProps & CanvasImageCanvasProps & {
     readonly src: string;

package/dist/cjs/effects/Solid.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { InteractiveBaseProps, InteractiveCropProps } from '../Interactive.js';
+import type { InteractiveBaseProps, InteractivePremountProps, InteractiveCropProps } from '../Interactive.js';
 import type { EffectsProp } from './effect-types.js';
 type MandatoryProps = {
     readonly width: number;
@@ -125,6 +125,23 @@ export declare const solidSchema: {
         readonly default: "transparent";
         readonly description: "Color";
     };
+    readonly premountFor: {
+        readonly type: "number";
+        readonly default: 0;
+        readonly description: "Premount For";
+        readonly min: 0;
+        readonly step: 1;
+        readonly hiddenFromList: false;
+        readonly keyframable: false;
+    };
+    readonly postmountFor: {
+        readonly type: "number";
+        readonly default: 0;
+        readonly min: 0;
+        readonly step: 1;
+        readonly hiddenFromList: true;
+        readonly keyframable: false;
+    };
     readonly cropLeft: {
         readonly type: "number";
         readonly default: 0;
@@ -185,6 +202,15 @@ export declare const solidSchema: {
         readonly step: 1;
         readonly hiddenFromList: true;
     };
+    readonly playbackRate: {
+        readonly type: "number";
+        readonly default: 1;
+        readonly min: 0.01;
+        readonly step: 0.1;
+        readonly description: "Playback rate";
+        readonly hiddenFromList: false;
+        readonly keyframable: false;
+    };
     readonly freeze: {
         readonly type: "number";
         readonly default: null;
@@ -225,5 +251,5 @@ export declare const solidSchema: {
         readonly hiddenFromList: false;
     };
 };
-export declare const Solid: React.ComponentType<MandatoryProps & Partial<OptionalProps> & InteractiveCropProps & InteractiveBaseProps & React.RefAttributes<HTMLCanvasElement>>;
+export declare const Solid: React.ComponentType<MandatoryProps & Partial<OptionalProps> & InteractiveCropProps & InteractiveBaseProps & InteractivePremountProps & React.RefAttributes<HTMLCanvasElement>>;
 export {};

package/dist/cjs/effects/Solid.js

@@ -4,10 +4,12 @@ exports.Solid = exports.solidSchema = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const enable_sequence_stack_traces_js_1 = require("../enable-sequence-stack-traces.js");
+const freeze_js_1 = require("../freeze.js");
 const interactivity_schema_js_1 = require("../interactivity-schema.js");
 const Sequence_js_1 = require("../Sequence.js");
 const use_crop_style_js_1 = require("../use-crop-style.js");
 const use_delay_render_js_1 = require("../use-delay-render.js");
+const use_premounting_js_1 = require("../use-premounting.js");
 const with_interactivity_schema_js_1 = require("../with-interactivity-schema.js");
 const run_effect_chain_js_1 = require("./run-effect-chain.js");
 const use_effect_chain_state_js_1 = require("./use-effect-chain-state.js");
@@ -25,6 +27,7 @@ const resolveSolidPixelDensity = (pixelDensity) => {
 };
 exports.solidSchema = {
     ...interactivity_schema_js_1.baseSchema,
+    ...interactivity_schema_js_1.premountSchema,
     color: {
         type: 'color',
         default: 'transparent',
@@ -152,7 +155,7 @@ const SolidInner = ({ color, width, height, effects = [], className, style, pixe
     }, [height, style, width]);
     return (jsx_runtime_1.jsx("canvas", { ref: canvasRef, width: canvasWidth, height: canvasHeight, className: className, style: canvasStyle }));
 };
-const SolidOuter = (0, react_1.forwardRef)(({ effects = [], controls, color, height, width, className, durationInFrames, style, name, from, trimBefore, freeze, hidden, showInTimeline, pixelDensity, cropLeft, cropRight, cropTop, cropBottom, ...props }, ref) => {
+const SolidOuter = (0, react_1.forwardRef)(({ effects = [], controls, color, height, width, className, durationInFrames, style, name, from, premountFor, postmountFor, styleWhilePremounted, styleWhilePostmounted, trimBefore, playbackRate, freeze, hidden, showInTimeline, pixelDensity, cropLeft, cropRight, cropTop, cropBottom, ...props }, ref) => {
     var _a;
     props;
     const memoizedEffectDefinitions = (0, use_memoized_effects_js_1.useMemoizedEffectDefinitions)(effects);
@@ -160,15 +163,25 @@ const SolidOuter = (0, react_1.forwardRef)(({ effects = [], controls, color, hei
     (0, react_1.useImperativeHandle)(ref, () => {
         return actualRef.current;
     }, []);
+    const { effectivePremountFor, effectivePostmountFor, freezeFrame, isPremountingOrPostmounting, premountingActive, postmountingActive, premountingStyle, } = (0, use_premounting_js_1.usePremounting)({
+        from: from !== null && from !== void 0 ? from : 0,
+        durationInFrames: durationInFrames !== null && durationInFrames !== void 0 ? durationInFrames : Infinity,
+        premountFor: premountFor !== null && premountFor !== void 0 ? premountFor : null,
+        postmountFor: postmountFor !== null && postmountFor !== void 0 ? postmountFor : null,
+        style: style !== null && style !== void 0 ? style : null,
+        styleWhilePremounted: styleWhilePremounted !== null && styleWhilePremounted !== void 0 ? styleWhilePremounted : null,
+        styleWhilePostmounted: styleWhilePostmounted !== null && styleWhilePostmounted !== void 0 ? styleWhilePostmounted : null,
+        hideWhilePremounted: 'opacity',
+    });
     const croppedStyle = (0, use_crop_style_js_1.useCropStyle)({
         cropLeft,
         cropRight,
         cropTop,
         cropBottom,
-        style: style !== null && style !== void 0 ? style : null,
+        style: premountingStyle,
         componentName: '<Solid />',
     });
-    return (jsx_runtime_1.jsx(Sequence_js_1.Sequence, { layout: "none", from: from, trimBefore: trimBefore, freeze: freeze, hidden: hidden, showInTimeline: showInTimeline, controls: controls, _remotionInternalEffects: memoizedEffectDefinitions, durationInFrames: durationInFrames, name: name !== null && name !== void 0 ? name : '<Solid>', outlineRef: actualRef, _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/solid", ...props, children: jsx_runtime_1.jsx(SolidInner, { reference: actualRef, overrideId: (_a = controls === null || controls === void 0 ? void 0 : controls.overrideId) !== null && _a !== void 0 ? _a : null, color: color, height: height, width: width, className: className, style: croppedStyle !== null && croppedStyle !== void 0 ? croppedStyle : undefined, effects: effects, pixelDensity: pixelDensity }) }));
+    return (jsx_runtime_1.jsx(freeze_js_1.Freeze, { frame: freezeFrame, active: isPremountingOrPostmounting, children: jsx_runtime_1.jsx(Sequence_js_1.Sequence, { layout: "none", from: from, trimBefore: trimBefore, playbackRate: playbackRate, freeze: freeze, hidden: hidden, showInTimeline: showInTimeline, controls: controls, _remotionInternalEffects: memoizedEffectDefinitions, durationInFrames: durationInFrames, name: name !== null && name !== void 0 ? name : '<Solid>', outlineRef: actualRef, _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/solid", ...props, _remotionInternalPremountDisplay: effectivePremountFor || null, _remotionInternalPostmountDisplay: effectivePostmountFor || null, _remotionInternalIsPremounting: premountingActive, _remotionInternalIsPostmounting: postmountingActive, children: jsx_runtime_1.jsx(SolidInner, { reference: actualRef, overrideId: (_a = controls === null || controls === void 0 ? void 0 : controls.overrideId) !== null && _a !== void 0 ? _a : null, color: color, height: height, width: width, className: className, style: croppedStyle !== null && croppedStyle !== void 0 ? croppedStyle : undefined, effects: effects, pixelDensity: pixelDensity }) }) }));
 });
 exports.Solid = (0, with_interactivity_schema_js_1.withInteractivitySchema)({
     Component: SolidOuter,

package/dist/cjs/freeze.js

@@ -13,7 +13,7 @@ const use_video_config_js_1 = require("./use-video-config.js");
  * @see [Documentation](https://remotion.dev/docs/freeze)
  */
 const Freeze = ({ frame: frameToFreeze, children, active = true, }) => {
-    var _a;
+    var _a, _b;
     const frame = (0, use_current_frame_js_1.useCurrentFrame)();
     const videoConfig = (0, use_video_config_js_1.useVideoConfig)();
     if (typeof frameToFreeze === 'undefined') {
@@ -39,6 +39,7 @@ const Freeze = ({ frame: frameToFreeze, children, active = true, }) => {
     const timelineContext = (0, timeline_position_state_js_1.useTimelineContext)();
     const sequenceContext = (0, react_1.useContext)(SequenceContext_js_1.SequenceContext);
     const relativeFrom = (_a = sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.relativeFrom) !== null && _a !== void 0 ? _a : 0;
+    const playbackRate = (_b = sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.playbackRate) !== null && _b !== void 0 ? _b : 1;
     const timelineValue = (0, react_1.useMemo)(() => {
         if (!isActive) {
             return timelineContext;
@@ -48,10 +49,17 @@ const Freeze = ({ frame: frameToFreeze, children, active = true, }) => {
             isPlaying: () => false,
             isInsideFreeze: true,
             frame: {
-                [videoConfig.id]: frameToFreeze + relativeFrom,
+                [videoConfig.id]: frameToFreeze / playbackRate + relativeFrom,
             },
         };
-    }, [isActive, timelineContext, videoConfig.id, frameToFreeze, relativeFrom]);
+    }, [
+        isActive,
+        timelineContext,
+        videoConfig.id,
+        frameToFreeze,
+        relativeFrom,
+        playbackRate,
+    ]);
     const newSequenceContext = (0, react_1.useMemo)(() => {
         if (!sequenceContext) {
             return null;

package/dist/cjs/get-asset-file-name.js

@@ -16,6 +16,12 @@ const getAssetDisplayName = (filename) => {
         .split('/')
         .map((s) => s.split('\\'))
         .flat(1);
-    return splitted[splitted.length - 1];
+    const name = splitted[splitted.length - 1];
+    try {
+        return decodeURIComponent(name);
+    }
+    catch (_b) {
+        return name;
+    }
 };
 exports.getAssetDisplayName = getAssetDisplayName;

package/dist/cjs/get-sequence-boundary-tolerance.d.ts

@@ -0,0 +1,7 @@
+export declare const getSequenceBoundaryTolerance: ({ absoluteFrame, cumulatedFrom, from, parentPlaybackRate, durationInFrames, }: {
+    absoluteFrame: number;
+    cumulatedFrom: number;
+    from: number;
+    parentPlaybackRate: number;
+    durationInFrames: number;
+}) => number;

package/dist/cjs/get-sequence-boundary-tolerance.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getSequenceBoundaryTolerance = void 0;
+const getSequenceBoundaryTolerance = ({ absoluteFrame, cumulatedFrom, from, parentPlaybackRate, durationInFrames, }) => {
+    // Nested rates can put exact boundaries a few floating-point units apart.
+    return Math.min(durationInFrames / 2, Number.EPSILON *
+        Math.max(Math.abs(absoluteFrame * parentPlaybackRate), Math.abs(cumulatedFrom * parentPlaybackRate), Math.abs(from)) *
+        4);
+};
+exports.getSequenceBoundaryTolerance = getSequenceBoundaryTolerance;

package/dist/cjs/index.d.ts

@@ -5,7 +5,7 @@ import type { AnyCompMetadata, AnyComposition, AudioOrVideoAsset, JsxComponentId
 import type { DelayRenderScope } from './delay-render.js';
 import { type TFolder } from './Folder.js';
 import type { StaticFile } from './get-static-files.js';
-import type { AssetFieldSchema, ArrayFieldSchema, ArrayItemFieldSchema, CaptionsFieldSchema, InteractivitySchemaField, InteractivitySchema } from './interactivity-schema.js';
+import type { ArrayFieldSchema, ArrayItemFieldSchema, AssetFieldSchema, CaptionsFieldSchema, InteractivitySchema, InteractivitySchemaField } from './interactivity-schema.js';
 import type { LogLevel } from './log.js';
 import type { ProResProfile } from './prores-profile.js';
 import type { PixelFormat, VideoImageFormat } from './render-types.js';
@@ -135,7 +135,7 @@ export * from './internals.js';
 export { interpolateColors, type InterpolateColorsOptions, } from './interpolate-colors.js';
 export { LogLevel } from './log.js';
 export { Loop } from './loop/index.js';
-export { assertValidInterpolateEasingOption, assertValidInterpolatePosterizeOption, EasingFunction, ExtrapolateType, interpolate, InterpolateOutputOption, InterpolateOptions, random, RandomSeed, } from './no-react';
+export { assertValidInterpolateEasingOption, assertValidInterpolatePosterizeOption, EasingFunction, ExtrapolateType, interpolate, InterpolateOptions, InterpolateOutputOption, InterpolateOutputType, random, RandomSeed, } from './no-react';
 export { prefetch, PrefetchOnProgress } from './prefetch.js';
 export { registerRoot } from './register-root.js';
 export type { PixelFormat, VideoImageFormat } from './render-types.js';
@@ -184,4 +184,4 @@ export type _InternalTypes = {
     TRenderAsset: TRenderAsset;
     ProResProfile: ProResProfile;
 };
-export type { AnyComposition, AssetFieldSchema, ArrayFieldSchema, ArrayItemFieldSchema, CaptionsFieldSchema, DelayRenderScope, JsxComponentIdentity, LoopDisplay, RuntimeValueSnapshot, RuntimeValueStore, SequenceControls, SequenceRegistrationControls, InteractivitySchemaField, InteractivitySchema, UseBufferState, };
+export type { AnyComposition, ArrayFieldSchema, ArrayItemFieldSchema, AssetFieldSchema, CaptionsFieldSchema, DelayRenderScope, InteractivitySchema, InteractivitySchemaField, JsxComponentIdentity, LoopDisplay, RuntimeValueSnapshot, RuntimeValueStore, SequenceControls, SequenceRegistrationControls, UseBufferState, };