remotion 4.0.536 → 4.0.538

package/dist/cjs/prefetch.d.ts

@@ -1,3 +1,4 @@
+import type { LogLevel } from './log.js';
 export declare const removeAndGetHashFragment: (src: string) => number | null;
 export declare const getSrcWithoutHash: (src: string) => string;
 export declare const usePreload: (src: string) => string;
@@ -10,10 +11,10 @@ export type PrefetchOnProgress = (options: {
     loadedBytes: number;
 }) => void;
 export declare const prefetch: (src: string, options?: {
-    method?: "base64" | "blob-url" | undefined;
-    contentType?: string | undefined;
-    onProgress?: PrefetchOnProgress | undefined;
-    credentials?: RequestCredentials | undefined;
-    logLevel?: "error" | "info" | "trace" | "verbose" | "warn" | undefined;
-} | undefined) => FetchAndPreload;
+    method?: 'blob-url' | 'base64';
+    contentType?: string;
+    onProgress?: PrefetchOnProgress;
+    credentials?: RequestCredentials;
+    logLevel?: LogLevel;
+}) => FetchAndPreload;
 export {};

package/dist/cjs/props-if-has-props.d.ts

@@ -17,5 +17,6 @@ export type PropsIfHasProps<Schema extends AnyZodObject, Props extends Record<st
 } : {
     defaultProps: InferProps<Schema, Props>;
 };
-export type InferProps<Schema extends AnyZodObject, Props extends Record<string, unknown>> = AnyZodObject extends Schema ? {} extends Props ? Record<string, unknown> : Props : {} extends Props ? InferZodInput<Schema> : InferZodInput<Schema> & Props;
+export type InferProps<Schema extends AnyZodObject, Props extends Record<string, unknown>> = AnyZodObject extends Schema ? {} extends Props ? Record<string, unknown> : Props : {} extends Props ? InferZodInput<Schema> : // Props and schema specified
+InferZodInput<Schema> & Props;
 export {};

package/dist/cjs/prores-profile.d.ts

@@ -1,2 +1,2 @@
-export declare const proResProfileOptions: readonly ["4444-xq", "4444", "hq", "standard", "light", "proxy"];
+export declare const proResProfileOptions: readonly ['4444-xq', '4444', 'hq', 'standard', 'light', 'proxy'];
 export type ProResProfile = (typeof proResProfileOptions)[number];

package/dist/cjs/register-root.d.ts

@@ -1,4 +1,4 @@
 import type React from 'react';
-export declare const registerRoot: (comp: React.FC<{}>) => void;
+export declare const registerRoot: (comp: React.FC) => void;
 export declare const getRoot: () => React.FC<{}> | null;
-export declare const waitForRoot: (fn: (comp: React.FC<{}>) => void) => () => void;
+export declare const waitForRoot: (fn: (comp: React.FC) => void) => (() => void);

package/dist/cjs/render-resource-manager.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 export type RenderResourceManager = {
-    getOrCreateResource: <T>({ key, create }: {
+    getOrCreateResource: <T>({ key, create, }: {
         key: string;
         create: () => {
             resource: T;

package/dist/cjs/render-types.d.ts

@@ -1,4 +1,4 @@
-export declare const validVideoImageFormats: readonly ["png", "jpeg", "none"];
+export declare const validVideoImageFormats: readonly ['png', 'jpeg', 'none'];
 export type VideoImageFormat = (typeof validVideoImageFormats)[number];
-export declare const validPixelFormats: readonly ["yuv420p", "yuva420p", "yuv422p", "yuv444p", "yuv420p10le", "yuv422p10le", "yuv444p10le", "yuva444p10le"];
+export declare const validPixelFormats: readonly ['yuv420p', 'yuva420p', 'yuv422p', 'yuv444p', 'yuv420p10le', 'yuv422p10le', 'yuv444p10le', 'yuva444p10le'];
 export type PixelFormat = (typeof validPixelFormats)[number];

package/dist/cjs/resolve-video-config.d.ts

@@ -23,20 +23,20 @@ export type VideoConfigWithMetadata = {
     readonly metadataSource: VideoConfigMetadataSource;
     readonly videoConfig: VideoConfig;
 };
-export declare const resolveVideoConfigWithMetadata: ({ calculateMetadata, signal, defaultProps, inputProps: originalProps, compositionId, compositionDurationInFrames, compositionFps, compositionHeight, compositionWidth, }: ResolveVideoConfigParams) => Promise<VideoConfigWithMetadata> | VideoConfigWithMetadata;
-export declare const resolveVideoConfig: (params: ResolveVideoConfigParams) => Promise<VideoConfig> | VideoConfig;
+export declare const resolveVideoConfigWithMetadata: ({ calculateMetadata, signal, defaultProps, inputProps: originalProps, compositionId, compositionDurationInFrames, compositionFps, compositionHeight, compositionWidth, }: ResolveVideoConfigParams) => VideoConfigWithMetadata | Promise<VideoConfigWithMetadata>;
+export declare const resolveVideoConfig: (params: ResolveVideoConfigParams) => VideoConfig | Promise<VideoConfig>;
 export declare const resolveVideoConfigWithMetadataOrCatch: (params: ResolveVideoConfigParams) => {
-    type: "success";
-    result: Promise<VideoConfigWithMetadata> | VideoConfigWithMetadata;
+    type: 'success';
+    result: VideoConfigWithMetadata | Promise<VideoConfigWithMetadata>;
 } | {
-    type: "error";
+    type: 'error';
     error: Error;
 };
 export declare const resolveVideoConfigOrCatch: (params: ResolveVideoConfigParams) => {
-    type: "success";
-    result: Promise<VideoConfig> | VideoConfig;
+    type: 'success';
+    result: VideoConfig | Promise<VideoConfig>;
 } | {
-    type: "error";
+    type: 'error';
     error: Error;
 };
 export {};

package/dist/cjs/runtime-value-store.d.ts

@@ -7,4 +7,4 @@ export type RuntimeValueStoreController<TSnapshot extends RuntimeValueSnapshot =
     store: RuntimeValueStore<TSnapshot>;
     setSnapshot: (newSnapshot: TSnapshot) => void;
 };
-export declare const createRuntimeValueStore: <TSnapshot extends Readonly<Record<string, unknown>>>(initialSnapshot: TSnapshot) => RuntimeValueStoreController<TSnapshot>;
+export declare const createRuntimeValueStore: <TSnapshot extends RuntimeValueSnapshot>(initialSnapshot: TSnapshot) => RuntimeValueStoreController<TSnapshot>;

package/dist/cjs/scale-value.d.ts

@@ -1,4 +1,4 @@
 export type ScaleValue = readonly [number, number, number];
 export declare const parseValidScaleValue: (value: unknown) => ScaleValue | null;
 export declare const parseScaleValue: (value: unknown) => ScaleValue;
-export declare const serializeScaleValue: ([x, y, z]: ScaleValue) => string | number;
+export declare const serializeScaleValue: ([x, y, z]: ScaleValue) => number | string;

package/dist/cjs/seek.d.ts

@@ -1,7 +1,8 @@
+import type { LogLevel } from './log';
 export declare const seek: ({ mediaRef, time, logLevel, why, mountTime, }: {
-    mediaRef: HTMLAudioElement | HTMLVideoElement;
+    mediaRef: HTMLVideoElement | HTMLAudioElement;
     time: number;
-    logLevel: "error" | "info" | "trace" | "verbose" | "warn";
+    logLevel: LogLevel;
     why: string;
     mountTime: number;
 }) => number;

package/dist/cjs/sequence-activity-context.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SequenceContent = exports.SequenceActivityAbsoluteTimeContext = exports.SequenceActivityTimelineContext = exports.SequenceActivitySettingsContext = exports.SequenceActivitySuspensionContext = exports.SequenceActivityDormantContext = exports.SequenceActivityContext = exports.DEFAULT_SEQUENCE_ACTIVITY_LIMIT = void 0;
 const react_1 = require("react");
-const sequence_activity_defaults_js_1 = require("./sequence-activity-defaults.js");
+var sequence_activity_defaults_js_1 = require("./sequence-activity-defaults.js");
 Object.defineProperty(exports, "DEFAULT_SEQUENCE_ACTIVITY_LIMIT", { enumerable: true, get: function () { return sequence_activity_defaults_js_1.DEFAULT_SEQUENCE_ACTIVITY_LIMIT; } });
 // Hidden Activity trees register on commit, so Sequence Activity is disabled
 // when the sequence manager falls back to effects.

package/dist/cjs/sequence-crop.js

@@ -32,10 +32,7 @@ const getSequenceCropClipPath = ({ left, right, top, bottom, style, }) => {
     ];
     const serializedBorderRadius = shorthand ||
         (longhands.some((radius) => radius !== undefined)
-            ? longhands.map((radius) => {
-                var _a;
-                return (_a = serializeRadius(radius)) !== null && _a !== void 0 ? _a : '0px';
-            }).join(' ')
+            ? longhands.map((radius) => { var _a; return (_a = serializeRadius(radius)) !== null && _a !== void 0 ? _a : '0px'; }).join(' ')
             : undefined);
     const rounded = serializedBorderRadius
         ? ` round ${serializedBorderRadius}`

package/dist/cjs/series/flatten-children.d.ts

@@ -1,2 +1,4 @@
 import React from 'react';
-export declare const flattenChildren: (children: React.ReactNode) => (string | number | bigint | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | Iterable<React.ReactNode> | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | React.ReactPortal | null | undefined> | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | React.ReactPortal)[];
+type ReactChildArray = ReturnType<typeof React.Children.toArray>;
+export declare const flattenChildren: (children: React.ReactNode) => ReactChildArray;
+export {};

package/dist/cjs/series/index.js

@@ -61,7 +61,7 @@ const SeriesSequenceInner = (0, react_1.forwardRef)(({ offset = 0, className = '
     if (_remotionInternalRender) {
         return _remotionInternalRender({ ...props, offset, className: className || undefined }, ref);
     }
-    return (jsx_runtime_1.jsx(is_inside_series_js_1.IsNotInsideSeriesProvider, { children: props.children }));
+    return ((0, jsx_runtime_1.jsx)(is_inside_series_js_1.IsNotInsideSeriesProvider, { children: props.children }));
 });
 const SeriesSequence = Interactive_js_1.Interactive.withSchema({
     Component: SeriesSequenceInner,
@@ -136,17 +136,16 @@ const SeriesInner = (props) => {
                     });
                     const currentStartFrame = startFrame + offset;
                     const nextStartFrame = startFrame + timelineDurationInFrames + offset;
-                    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-                            jsx_runtime_1.jsx(SequenceWithoutSchemaWithRef, { ref: ref, name: name || '<Series.Sequence>', _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/series", controls: controls !== null && controls !== void 0 ? controls : undefined, from: currentStartFrame, durationInFrames: durationInFramesProp, ...passedProps, _remotionInternalTimelineTrack: {
+                    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(SequenceWithoutSchemaWithRef, { ref: ref, name: name || '<Series.Sequence>', _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/series", controls: controls !== null && controls !== void 0 ? controls : undefined, from: currentStartFrame, durationInFrames: durationInFramesProp, ...passedProps, _remotionInternalTimelineTrack: {
                                     role: 'clip',
                                     seriesOffset: offset,
-                                }, children: jsx_runtime_1.jsx(is_inside_series_js_1.IsNotInsideSeriesProvider, { children: sequenceChildren }) }), renderChildren(i + 1, nextStartFrame)] }));
+                                }, children: (0, jsx_runtime_1.jsx)(is_inside_series_js_1.IsNotInsideSeriesProvider, { children: sequenceChildren }) }), renderChildren(i + 1, nextStartFrame)] }));
                 },
             });
         };
         return renderChildren(0, 0);
     }, [props.children, pendingDeletions]);
-    return (jsx_runtime_1.jsx(Track_js_1.TrackWithoutSchema, { layout: "none", _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/series", ...props, name: (_a = props.name) !== null && _a !== void 0 ? _a : '<Series>', children: jsx_runtime_1.jsx(is_inside_series_js_1.IsInsideSeriesContainer, { children: childrenValue }) }));
+    return ((0, jsx_runtime_1.jsx)(Track_js_1.TrackWithoutSchema, { layout: "none", _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/series", ...props, name: (_a = props.name) !== null && _a !== void 0 ? _a : '<Series>', children: (0, jsx_runtime_1.jsx)(is_inside_series_js_1.IsInsideSeriesContainer, { children: childrenValue }) }));
 };
 /**
  * @description with this component, you can easily stitch together scenes that should play sequentially after another.

package/dist/cjs/series/is-inside-series.js

@@ -38,11 +38,11 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
 exports.IsInsideSeriesContext = (0, react_1.createContext)(false);
 const IsInsideSeriesContainer = ({ children }) => {
-    return (jsx_runtime_1.jsx(exports.IsInsideSeriesContext.Provider, { value: true, children: children }));
+    return ((0, jsx_runtime_1.jsx)(exports.IsInsideSeriesContext.Provider, { value: true, children: children }));
 };
 exports.IsInsideSeriesContainer = IsInsideSeriesContainer;
 const IsNotInsideSeriesProvider = ({ children }) => {
-    return (jsx_runtime_1.jsx(exports.IsInsideSeriesContext.Provider, { value: false, children: children }));
+    return ((0, jsx_runtime_1.jsx)(exports.IsInsideSeriesContext.Provider, { value: false, children: children }));
 };
 exports.IsNotInsideSeriesProvider = IsNotInsideSeriesProvider;
 const useRequireToBeInsideSeries = () => {

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

@@ -1,5 +1,5 @@
 import type { SpringConfig } from './spring-utils';
-export declare function spring({ frame: passedFrame, fps, config, from, to, durationInFrames: passedDurationInFrames, durationRestThreshold, delay, reverse }: {
+export declare function spring({ frame: passedFrame, fps, config, from, to, durationInFrames: passedDurationInFrames, durationRestThreshold, delay, reverse, }: {
     frame: number;
     fps: number;
     config?: Partial<SpringConfig>;

package/dist/cjs/spring/index.js

@@ -60,5 +60,5 @@ function spring({ frame: passedFrame, fps, config = {}, from = 0, to = 1, durati
     const interpolated = from === 0 && to === 1 ? inner : (0, interpolate_js_1.interpolate)(inner, [0, 1], [from, to]);
     return interpolated;
 }
-const measure_spring_js_2 = require("./measure-spring.js");
+var measure_spring_js_2 = require("./measure-spring.js");
 Object.defineProperty(exports, "measureSpring", { enumerable: true, get: function () { return measure_spring_js_2.measureSpring; } });

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

@@ -9,5 +9,5 @@ type MeasureSpringProps = {
     config?: Partial<SpringConfig>;
     threshold?: number;
 } & (false extends typeof ENABLE_V5_BREAKING_CHANGES ? V4Props : {});
-export declare function measureSpring({ fps, config, threshold }: MeasureSpringProps): number;
+export declare function measureSpring({ fps, config, threshold, }: MeasureSpringProps): number;
 export {};

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

@@ -11,7 +11,7 @@ export type SpringConfig = {
     stiffness: number;
     overshootClamping: boolean;
 };
-export declare function springCalculation({ frame, fps, config }: {
+export declare function springCalculation({ frame, fps, config, }: {
     frame: number;
     fps: number;
     config?: Partial<SpringConfig>;

package/dist/cjs/spring/spring-utils.js

@@ -75,27 +75,33 @@ function springCalculation({ frame, fps, config = {}, }) {
         stiffness: (_c = config.stiffness) !== null && _c !== void 0 ? _c : defaultSpringConfig.stiffness,
         overshootClamping: (_d = config.overshootClamping) !== null && _d !== void 0 ? _d : defaultSpringConfig.overshootClamping,
     };
-    const cacheKey = [
-        frame,
+    const configKey = [
         fps,
         resolvedConfig.damping,
         resolvedConfig.mass,
         resolvedConfig.overshootClamping,
         resolvedConfig.stiffness,
     ].join('-');
+    const cacheKey = `${frame}-${configKey}`;
     if (calculationCache[cacheKey]) {
         return calculationCache[cacheKey];
     }
-    let animation = {
+    const frameClamped = Math.max(0, frame);
+    // Only resume from an integer frame: fractional steps change the simulation.
+    const previousFrame = Math.ceil(frameClamped) - 1;
+    const previousAnimation = previousFrame >= 0
+        ? calculationCache[`${previousFrame}-${configKey}`]
+        : undefined;
+    let animation = previousAnimation !== null && previousAnimation !== void 0 ? previousAnimation : {
         lastTimestamp: 0,
         current: from,
         toValue: to,
         velocity: 0,
         prevPosition: 0,
     };
-    const frameClamped = Math.max(0, frame);
     const unevenRest = frameClamped % 1;
-    for (let f = 0; f <= Math.floor(frameClamped); f++) {
+    const startFrame = previousAnimation ? previousFrame + 1 : 0;
+    for (let f = startFrame; f <= Math.floor(frameClamped); f++) {
         const time = (f / fps) * 1000;
         animation = advance({
             animation,

package/dist/cjs/timeline-position-state.d.ts

@@ -11,9 +11,10 @@ export declare const clampFrameToCompositionRange: (frame: number, durationInFra
 export declare const useTimelineContext: () => TimelineContextValue;
 export declare const usePlaybackRate: () => PlaybackRateContextValue;
 export declare const useTimelinePosition: () => number;
+export declare const useTimelinePositionWithOptionalSubscription: (subscribe: boolean) => number;
 export declare const useIsInsideFreeze: () => boolean;
 export declare const useAbsoluteTimelinePosition: () => number;
-export declare const useTimelineSetFrameWithoutSeek: () => (u: import("react").SetStateAction<Record<string, number>>) => void;
+export declare const useTimelineSetFrameWithoutSeek: () => ((u: React.SetStateAction<Record<string, number>>) => void);
 export declare const useTimelineSeekFrame: () => (frame: import("react").SetStateAction<Record<string, number>>) => void;
 export { usePlaying } from './use-playing.js';
 export { useBuffering } from './use-buffering.js';

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

@@ -1,11 +1,14 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useBuffering = exports.usePlaying = exports.useTimelineSeekFrame = exports.useTimelineSetFrameWithoutSeek = 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.useTimelineSetFrameWithoutSeek = exports.useAbsoluteTimelinePosition = exports.useIsInsideFreeze = exports.useTimelinePositionWithOptionalSubscription = exports.useTimelinePosition = exports.usePlaybackRate = exports.useTimelineContext = exports.clampFrameToCompositionRange = exports.getFrameForComposition = exports.getInitialFrameState = exports.persistCurrentFrame = void 0;
 const react_1 = require("react");
 const sequence_activity_context_js_1 = require("./sequence-activity-context.js");
 const TimelineContext_js_1 = require("./TimelineContext.js");
 const use_remotion_environment_js_1 = require("./use-remotion-environment.js");
 const use_video_js_1 = require("./use-video.js");
+// Reading TimelineContext and ignoring its value would still schedule frame
+// updates. Inactive subscribers must read a separate, never-changing context.
+const UnsubscribedTimelineContext = (0, react_1.createContext)(null);
 const makeKey = () => {
     return `remotion.time-all`;
 };
@@ -42,6 +45,9 @@ const useTimelinePositionFromContext = (state) => {
     const videoConfig = (0, use_video_js_1.useVideo)();
     const env = (0, use_remotion_environment_js_1.useRemotionEnvironment)();
     const dormant = (0, react_1.useContext)(sequence_activity_context_js_1.SequenceActivityDormantContext);
+    if (state === null) {
+        return 0;
+    }
     if (!videoConfig) {
         return typeof window === 'undefined'
             ? 0
@@ -76,6 +82,20 @@ const useTimelinePosition = () => {
     return useTimelinePositionFromContext(state);
 };
 exports.useTimelinePosition = useTimelinePosition;
+const useTimelinePositionWithOptionalSubscription = (subscribe) => {
+    const dormant = (0, react_1.useContext)(sequence_activity_context_js_1.SequenceActivityDormantContext);
+    const state = (0, react_1.useContext)(subscribe
+        ? dormant
+            ? sequence_activity_context_js_1.SequenceActivityTimelineContext
+            : TimelineContext_js_1.TimelineContext
+        : UnsubscribedTimelineContext);
+    const frame = useTimelinePositionFromContext(state);
+    if (subscribe && state === null) {
+        throw new Error('TimelineContext is not available. This hook must be used inside a <Player> or the Remotion Studio.');
+    }
+    return frame;
+};
+exports.useTimelinePositionWithOptionalSubscription = useTimelinePositionWithOptionalSubscription;
 const useIsInsideFreeze = () => {
     return (0, exports.useTimelineContext)().isInsideFreeze;
 };
@@ -102,7 +122,7 @@ const useTimelineSeekFrame = () => {
     return (_a = seek === null || seek === void 0 ? void 0 : seek.seekFrame) !== null && _a !== void 0 ? _a : setFrameWithoutSeek;
 };
 exports.useTimelineSeekFrame = useTimelineSeekFrame;
-const use_playing_js_1 = require("./use-playing.js");
+var 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");
+var use_buffering_js_1 = require("./use-buffering.js");
 Object.defineProperty(exports, "useBuffering", { enumerable: true, get: function () { return use_buffering_js_1.useBuffering; } });

package/dist/cjs/use-amplification.d.ts

@@ -1,4 +1,6 @@
 import { type RefObject } from 'react';
+import type { SharedElementSourceNode } from './audio/shared-element-source-node';
+import type { LogLevel } from './log';
 type AudioItems = {
     gainNode: GainNode;
 };
@@ -8,14 +10,9 @@ type AudioItems = {
  */
 export declare const useVolume: ({ mediaRef, volume, logLevel, source, shouldUseWebAudioApi, }: {
     mediaRef: RefObject<HTMLAudioElement | HTMLVideoElement | null>;
-    source: {
-        setAudioContext: (newAudioContext: AudioContext | null) => void;
-        attemptToConnect: () => void;
-        get: () => MediaElementAudioSourceNode;
-        cleanup: () => void;
-    } | null;
+    source: SharedElementSourceNode | null;
     volume: number;
-    logLevel: "error" | "info" | "trace" | "verbose" | "warn";
+    logLevel: LogLevel;
     shouldUseWebAudioApi: boolean;
 }) => RefObject<AudioItems | null>;
 export {};

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

@@ -1 +1,2 @@
+export declare const useCurrentFrameWithOptionalSubscription: (subscribe: boolean) => number;
 export declare const useCurrentFrame: () => number;

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

@@ -1,16 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useCurrentFrame = void 0;
+exports.useCurrentFrame = exports.useCurrentFrameWithOptionalSubscription = void 0;
 const react_1 = require("react");
 const CanUseRemotionHooks_js_1 = require("./CanUseRemotionHooks.js");
 const SequenceContext_js_1 = require("./SequenceContext.js");
 const timeline_position_state_js_1 = require("./timeline-position-state.js");
 const use_remotion_environment_js_1 = require("./use-remotion-environment.js");
-/*
- * @description Retrieves the current frame of the video within a component. Frames are 0-indexed, and if the component is wrapped in a `<Sequence>`, it returns the frame relative to when the Sequence starts.
- * @see [Documentation](https://www.remotion.dev/docs/use-current-frame)
- */
-const useCurrentFrame = () => {
+const useCurrentFrameWithOptionalSubscription = (subscribe) => {
     var _a;
     const canUseRemotionHooks = (0, react_1.useContext)(CanUseRemotionHooks_js_1.CanUseRemotionHooks);
     const env = (0, use_remotion_environment_js_1.useRemotionEnvironment)();
@@ -20,11 +16,22 @@ const useCurrentFrame = () => {
         }
         throw new Error(`useCurrentFrame() can only be called inside a component that was registered as a composition. See https://www.remotion.dev/docs/the-fundamentals#defining-compositions`);
     }
-    const frame = (0, timeline_position_state_js_1.useTimelinePosition)();
+    const frame = (0, timeline_position_state_js_1.useTimelinePositionWithOptionalSubscription)(subscribe);
     const context = (0, react_1.useContext)(SequenceContext_js_1.SequenceContext);
+    if (!subscribe) {
+        return 0;
+    }
     const contextOffset = context
         ? context.cumulatedFrom + context.relativeFrom
         : 0;
     return (frame - contextOffset) * ((_a = context === null || context === void 0 ? void 0 : context.playbackRate) !== null && _a !== void 0 ? _a : 1);
 };
+exports.useCurrentFrameWithOptionalSubscription = useCurrentFrameWithOptionalSubscription;
+/*
+ * @description Retrieves the current frame of the video within a component. Frames are 0-indexed, and if the component is wrapped in a `<Sequence>`, it returns the frame relative to when the Sequence starts.
+ * @see [Documentation](https://www.remotion.dev/docs/use-current-frame)
+ */
+const useCurrentFrame = () => {
+    return (0, exports.useCurrentFrameWithOptionalSubscription)(true);
+};
 exports.useCurrentFrame = useCurrentFrame;

package/dist/cjs/use-current-scale.d.ts

@@ -42,7 +42,7 @@ export type PreviewSizeCtx = {
 };
 export declare const PreviewSizeContext: React.Context<PreviewSizeCtx>;
 export declare const calculateScale: ({ canvasSize, compositionHeight, compositionWidth, previewSize, }: {
-    previewSize: number | "auto";
+    previewSize: PreviewSize['size'];
     compositionWidth: number;
     compositionHeight: number;
     canvasSize: {
@@ -50,5 +50,5 @@ export declare const calculateScale: ({ canvasSize, compositionHeight, compositi
         height: number;
     };
 }) => number;
-export declare const useCurrentScale: (options?: Options | undefined) => number;
+export declare const useCurrentScale: (options?: Options) => number;
 export {};

package/dist/cjs/use-delay-render.d.ts

@@ -2,10 +2,11 @@ import type { cancelRender as cancelRenderOriginal } from './cancel-render.js';
 import type { DelayRenderOptions, DelayRenderScope } from './delay-render.js';
 type DelayRenderFn = (label?: string, options?: DelayRenderOptions) => number;
 type ContinueRenderFn = (handle: number) => void;
+type CancelRenderFn = typeof cancelRenderOriginal;
 export declare const DelayRenderContextType: import("react").Context<DelayRenderScope | null>;
 export declare const useDelayRender: () => {
     delayRender: DelayRenderFn;
     continueRender: ContinueRenderFn;
-    cancelRender: typeof cancelRenderOriginal;
+    cancelRender: CancelRenderFn;
 };
 export {};

package/dist/cjs/use-lazy-component.d.ts

@@ -7,5 +7,5 @@ export declare const useLazyComponent: <Props>({ compProps, componentName, noSus
     compProps: CompProps<Props>;
     componentName: string;
     noSuspense: boolean;
-}) => ComponentType<Props> | LazyExoticComponent<ComponentType<Props>>;
+}) => LazyExoticComponent<ComponentType<Props>> | ComponentType<Props>;
 export {};

package/dist/cjs/use-lazy-component.js

@@ -38,6 +38,13 @@ const react_1 = __importStar(require("react"));
 const registry_store_js_1 = require("./registry-store.js");
 const use_sync_external_store_js_1 = require("./use-sync-external-store.js");
 const useIsomorphicLayoutEffect = typeof window === 'undefined' ? react_1.useEffect : react_1.useLayoutEffect;
+const createComponentWrapper = (componentStore) => {
+    const Wrapper = (props) => {
+        const Comp = (0, use_sync_external_store_js_1.useSyncExternalStore)(componentStore.subscribe, componentStore.getSnapshot, componentStore.getSnapshot);
+        return react_1.default.createElement(Comp, props);
+    };
+    return Wrapper;
+};
 // Expected, it can be any component props
 const useLazyComponent = ({ compProps, componentName, noSuspense, }) => {
     // Why a store + stable wrapper instead of returning compProps.component directly?
@@ -76,16 +83,19 @@ const useLazyComponent = ({ compProps, componentName, noSuspense, }) => {
             componentStore.setSnapshot(() => componentFromProps);
         }
     }, [componentFromProps, componentStore]);
+    // Passing a bound factory keeps its closure separate from the render, including
+    // after minification. The wrapper must only retain the store, not initial props.
+    const createWrapper = createComponentWrapper;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    const Wrapper = (0, react_1.useMemo)(createWrapper.bind(null, componentStore), [
+        componentStore,
+    ]);
     const lazy = (0, react_1.useMemo)(() => {
         if ('component' in compProps) {
             // In SSR, suspense is not yet supported, we cannot use React.lazy
             if (typeof document === 'undefined' || noSuspense) {
                 return compProps.component;
             }
-            const Wrapper = (props) => {
-                const Comp = (0, use_sync_external_store_js_1.useSyncExternalStore)(componentStore.subscribe, componentStore.getSnapshot, componentStore.getSnapshot);
-                return react_1.default.createElement(Comp, props);
-            };
             return Wrapper;
         }
         if ('lazyComponent' in compProps &&
@@ -101,7 +111,7 @@ const useLazyComponent = ({ compProps, componentName, noSuspense, }) => {
         // For the 'component' case, we intentionally do NOT depend on
         // compProps.component — the stable wrapper subscribes to componentStore instead.
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [lazyComponentFromProps, componentStore]);
+    }, [lazyComponentFromProps, componentStore, Wrapper]);
     return lazy;
 };
 exports.useLazyComponent = useLazyComponent;

package/dist/cjs/use-media-buffering.d.ts

@@ -1,10 +1,11 @@
 import type React from 'react';
+import type { LogLevel } from './log';
 export declare const useMediaBuffering: ({ element, shouldBuffer, isPremounting, isPostmounting, logLevel, mountTime, src, }: {
-    element: React.RefObject<HTMLAudioElement | HTMLVideoElement | null>;
+    element: React.RefObject<HTMLVideoElement | HTMLAudioElement | null>;
     shouldBuffer: boolean;
     isPremounting: boolean;
     isPostmounting: boolean;
-    logLevel: "error" | "info" | "trace" | "verbose" | "warn";
+    logLevel: LogLevel;
     mountTime: number;
     src: string | null;
 }) => boolean;

package/dist/cjs/use-media-duration.d.ts

@@ -0,0 +1,4 @@
+type OnDuration = (src: string, durationInSeconds: number) => void;
+export declare const useMediaDuration: (mediaRef: React.RefObject<HTMLMediaElement | null>, onDuration: OnDuration, src: string, useCurrentSrc: boolean) => void;
+export declare const scheduleMediaSourceCleanup: (cleanup: (() => void) | null) => void;
+export {};

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

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.scheduleMediaSourceCleanup = exports.useMediaDuration = void 0;
+const react_1 = require("react");
+const subscribeToMediaDuration = (mediaRef, onDurationRef, src) => {
+    var _a;
+    const { current } = mediaRef;
+    if (!current) {
+        return;
+    }
+    if (current.duration) {
+        (_a = onDurationRef.current) === null || _a === void 0 ? void 0 : _a.call(onDurationRef, src !== null && src !== void 0 ? src : current.src, current.duration);
+        return;
+    }
+    const onLoadedMetadata = () => {
+        var _a;
+        (_a = onDurationRef.current) === null || _a === void 0 ? void 0 : _a.call(onDurationRef, src !== null && src !== void 0 ? src : current.src, current.duration);
+    };
+    current.addEventListener('loadedmetadata', onLoadedMetadata);
+    return () => {
+        current.removeEventListener('loadedmetadata', onLoadedMetadata);
+    };
+};
+const useMediaDuration = (mediaRef, onDuration, src, useCurrentSrc) => {
+    const onDurationRef = (0, react_1.useRef)(onDuration);
+    onDurationRef.current = onDuration;
+    // The listener and its cleanup must not share the component render scope.
+    // Binding prevents production minifiers from inlining that scope back in.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    (0, react_1.useEffect)(subscribeToMediaDuration.bind(null, mediaRef, onDurationRef, useCurrentSrc ? null : src), [mediaRef, src, useCurrentSrc]);
+};
+exports.useMediaDuration = useMediaDuration;
+const scheduleMediaSourceCleanup = (cleanup) => {
+    requestAnimationFrame(() => cleanup === null || cleanup === void 0 ? void 0 : cleanup());
+};
+exports.scheduleMediaSourceCleanup = scheduleMediaSourceCleanup;

package/dist/cjs/use-media-enabled.d.ts

@@ -1,7 +1,7 @@
 export declare const useVideoEnabled: () => boolean;
 export declare const useAudioEnabled: () => boolean;
 export declare const MediaEnabledProvider: ({ children, videoEnabled, audioEnabled, }: {
-    readonly children: import("react").ReactNode;
+    readonly children: React.ReactNode;
     readonly videoEnabled: boolean | null;
     readonly audioEnabled: boolean | null;
 }) => import("react/jsx-runtime").JSX.Element;

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

@@ -28,6 +28,6 @@ const useAudioEnabled = () => {
 exports.useAudioEnabled = useAudioEnabled;
 const MediaEnabledProvider = ({ children, videoEnabled, audioEnabled, }) => {
     const value = (0, react_1.useMemo)(() => ({ videoEnabled, audioEnabled }), [videoEnabled, audioEnabled]);
-    return (jsx_runtime_1.jsx(MediaEnabledContext.Provider, { value: value, children: children }));
+    return ((0, jsx_runtime_1.jsx)(MediaEnabledContext.Provider, { value: value, children: children }));
 };
 exports.MediaEnabledProvider = MediaEnabledProvider;

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

@@ -20,7 +20,7 @@ export declare const useBasicMediaInTimeline: ({ src, displayName, trimBefore, t
 export type BasicMediaInTimelineReturnType = ReturnType<typeof useBasicMediaInTimeline>;
 export declare const useMediaInTimelineRegistration: ({ src, mediaType, playbackRate, displayName, id, getStack, showInTimeline, premountDisplay, postmountDisplay, loopDisplay, documentationLink, muted, }: {
     src: string | undefined;
-    mediaType: "audio" | "video";
+    mediaType: 'audio' | 'video';
     playbackRate: number;
     displayName: string | null;
     id: string;

package/dist/cjs/use-media-playback.d.ts

@@ -1,8 +1,8 @@
 import type { RefObject } from 'react';
 export declare const useMediaPlayback: ({ mediaRef, src, mediaType, playbackRate: localPlaybackRate, preservePitch, onlyWarnForMediaSeekingError, acceptableTimeshift, pauseWhenBuffering, isPremounting, isPostmounting, onAutoPlayError, }: {
-    mediaRef: RefObject<HTMLAudioElement | HTMLVideoElement | null>;
+    mediaRef: RefObject<HTMLVideoElement | HTMLAudioElement | null>;
     src: string | undefined;
-    mediaType: "audio" | "video";
+    mediaType: 'audio' | 'video';
     playbackRate: number;
     preservePitch: boolean | undefined;
     onlyWarnForMediaSeekingError: boolean;
@@ -10,5 +10,5 @@ export declare const useMediaPlayback: ({ mediaRef, src, mediaType, playbackRate
     pauseWhenBuffering: boolean;
     isPremounting: boolean;
     isPostmounting: boolean;
-    onAutoPlayError: (() => void) | null;
+    onAutoPlayError: null | (() => void);
 }) => void;