remotion 3.3.45 → 3.3.52

package/dist/cjs/test/volume-prop.test.js

@@ -0,0 +1,95 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const vitest_1 = require("vitest");
+const volume_prop_js_1 = require("../volume-prop.js");
+const expect_to_throw_js_1 = require("./expect-to-throw.js");
+(0, vitest_1.describe)('EvaluateVolume does not throw', () => {
+    (0, vitest_1.test)('Volume is undefined', () => {
+        const toEvaluate = {
+            frame: 10,
+            volume: undefined,
+            mediaVolume: 1,
+            allowAmplificationDuringRender: false,
+        };
+        (0, vitest_1.expect)((0, volume_prop_js_1.evaluateVolume)(toEvaluate)).toEqual(1);
+    });
+    (0, vitest_1.test)('Volume is smaller than one', () => {
+        const smallVolume = 0.5;
+        const toEvaluate = {
+            frame: 10,
+            volume: smallVolume,
+            mediaVolume: 1,
+            allowAmplificationDuringRender: false,
+        };
+        (0, vitest_1.expect)((0, volume_prop_js_1.evaluateVolume)(toEvaluate)).toEqual(smallVolume);
+    });
+    (0, vitest_1.test)('Volume is bigger than one', () => {
+        const toEvaluate = {
+            frame: 10,
+            volume: 10,
+            mediaVolume: 1,
+            allowAmplificationDuringRender: true,
+        };
+        (0, vitest_1.expect)((0, volume_prop_js_1.evaluateVolume)(toEvaluate)).toBe(10);
+    });
+    (0, vitest_1.test)('evaluated volume from frame that is smaller than one', () => {
+        const toEvaluate = {
+            frame: 1,
+            volume: (frame) => frame * 0.5,
+            mediaVolume: 1,
+            allowAmplificationDuringRender: false,
+        };
+        (0, vitest_1.expect)((0, volume_prop_js_1.evaluateVolume)(toEvaluate)).toBe(0.5);
+    });
+    (0, vitest_1.test)('evaluated volume from frame that is bigger than one', () => {
+        const toEvaluate = {
+            frame: 10,
+            volume: (frame) => frame,
+            mediaVolume: 1,
+            allowAmplificationDuringRender: false,
+        };
+        (0, vitest_1.expect)((0, volume_prop_js_1.evaluateVolume)(toEvaluate)).toBe(1);
+    });
+});
+(0, vitest_1.describe)('evaluateVolume throws exception', () => {
+    (0, vitest_1.test)('It should throw if volume prop is neither number nor undefined', () => {
+        const toEvaluate = { frame: 10, volume: 'NaN' };
+        (0, expect_to_throw_js_1.expectToThrow)(() => {
+            // @ts-expect-error
+            (0, volume_prop_js_1.evaluateVolume)(toEvaluate);
+        }, /volume is not a function/);
+    });
+    (0, vitest_1.test)('It should throw if volume is invalid type', () => {
+        const invalidVolume = 'anystring';
+        const toEvaluate = { frame: 1, volume: () => invalidVolume, mediaVolume: 1 };
+        // changing the test because string multiply by a number in javascript is `NaN`
+        (0, expect_to_throw_js_1.expectToThrow)(() => {
+            // @ts-expect-error
+            (0, volume_prop_js_1.evaluateVolume)(toEvaluate);
+        }, /You passed in a function to the volume prop but it returned NaN for frame 1./);
+    });
+    (0, vitest_1.test)('It should throw if volume is NaN', () => {
+        const invalidVolume = NaN;
+        const toEvaluate = {
+            frame: 1,
+            volume: () => invalidVolume,
+            mediaVolume: 1,
+            allowAmplificationDuringRender: false,
+        };
+        (0, expect_to_throw_js_1.expectToThrow)(() => {
+            (0, volume_prop_js_1.evaluateVolume)(toEvaluate);
+        }, /You passed in a function to the volume prop but it returned NaN for frame 1/);
+    });
+    (0, vitest_1.test)('It should throw if volume returns non finite number', () => {
+        const invalidVolume = Infinity;
+        const toEvaluate = {
+            frame: 1,
+            volume: () => invalidVolume,
+            mediaVolume: 1,
+            allowAmplificationDuringRender: false,
+        };
+        (0, expect_to_throw_js_1.expectToThrow)(() => {
+            (0, volume_prop_js_1.evaluateVolume)(toEvaluate);
+        }, /You passed in a function to the volume prop but it returned a non-finite number for frame 1/);
+    });
+});

package/dist/cjs/test/wrap-sequence-context.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import type { CompositionManagerContext } from '../CompositionManager.js';
+export declare const mockCompositionContext: CompositionManagerContext;
+export declare const WrapSequenceContext: React.FC<{
+    children: React.ReactNode;
+}>;

package/dist/cjs/test/wrap-sequence-context.js

@@ -0,0 +1,41 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WrapSequenceContext = exports.mockCompositionContext = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const CanUseRemotionHooks_js_1 = require("../CanUseRemotionHooks.js");
+const CompositionManager_js_1 = require("../CompositionManager.js");
+const Comp = () => null;
+exports.mockCompositionContext = {
+    assets: [],
+    compositions: [
+        {
+            id: 'my-comp',
+            durationInFrames: 100,
+            // @ts-expect-error
+            component: Comp,
+            defaultProps: {},
+            folderName: null,
+            fps: 30,
+            height: 1080,
+            width: 1080,
+            parentFolderName: null,
+            nonce: 0,
+        },
+    ],
+    currentComposition: 'my-comp',
+    folders: [],
+    registerAsset: () => undefined,
+    registerComposition: () => undefined,
+    registerFolder: () => undefined,
+    registerSequence: () => undefined,
+    sequences: [],
+    setCurrentComposition: () => undefined,
+    unregisterAsset: () => undefined,
+    unregisterComposition: () => undefined,
+    unregisterFolder: () => undefined,
+    unregisterSequence: () => undefined,
+};
+const WrapSequenceContext = ({ children }) => {
+    return ((0, jsx_runtime_1.jsx)(CanUseRemotionHooks_js_1.CanUseRemotionHooksProvider, { children: (0, jsx_runtime_1.jsx)(CompositionManager_js_1.CompositionManager.Provider, { value: exports.mockCompositionContext, children: children }) }));
+};
+exports.WrapSequenceContext = WrapSequenceContext;

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

@@ -0,0 +1,29 @@
+import type { MutableRefObject } from 'react';
+export declare type PlayableMediaTag = {
+    play: () => void;
+    id: string;
+};
+export declare type TimelineContextValue = {
+    frame: number;
+    playing: boolean;
+    rootId: string;
+    playbackRate: number;
+    imperativePlaying: MutableRefObject<boolean>;
+    setPlaybackRate: (u: React.SetStateAction<number>) => void;
+    audioAndVideoTags: MutableRefObject<PlayableMediaTag[]>;
+};
+export declare type SetTimelineContextValue = {
+    setFrame: (u: React.SetStateAction<number>) => void;
+    setPlaying: (u: React.SetStateAction<boolean>) => void;
+};
+export declare const TimelineContext: import("react").Context<TimelineContextValue>;
+export declare const SetTimelineContext: import("react").Context<SetTimelineContextValue>;
+export declare const useTimelinePosition: () => number;
+export declare const useTimelineSetFrame: () => (u: React.SetStateAction<number>) => void;
+declare type PlayingReturnType = readonly [
+    boolean,
+    (u: React.SetStateAction<boolean>) => void,
+    MutableRefObject<boolean>
+];
+export declare const usePlayingState: () => PlayingReturnType;
+export {};

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

@@ -0,0 +1,41 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.usePlayingState = exports.useTimelineSetFrame = exports.useTimelinePosition = exports.SetTimelineContext = exports.TimelineContext = void 0;
+const react_1 = require("react");
+exports.TimelineContext = (0, react_1.createContext)({
+    frame: 0,
+    playing: false,
+    playbackRate: 1,
+    rootId: '',
+    imperativePlaying: {
+        current: false,
+    },
+    setPlaybackRate: () => {
+        throw new Error('default');
+    },
+    audioAndVideoTags: { current: [] },
+});
+exports.SetTimelineContext = (0, react_1.createContext)({
+    setFrame: () => {
+        throw new Error('default');
+    },
+    setPlaying: () => {
+        throw new Error('default');
+    },
+});
+const useTimelinePosition = () => {
+    const state = (0, react_1.useContext)(exports.TimelineContext);
+    return state.frame;
+};
+exports.useTimelinePosition = useTimelinePosition;
+const useTimelineSetFrame = () => {
+    const { setFrame } = (0, react_1.useContext)(exports.SetTimelineContext);
+    return setFrame;
+};
+exports.useTimelineSetFrame = useTimelineSetFrame;
+const usePlayingState = () => {
+    const { playing, imperativePlaying } = (0, react_1.useContext)(exports.TimelineContext);
+    const { setPlaying } = (0, react_1.useContext)(exports.SetTimelineContext);
+    return (0, react_1.useMemo)(() => [playing, setPlaying, imperativePlaying], [imperativePlaying, playing, setPlaying]);
+};
+exports.usePlayingState = usePlayingState;

package/dist/cjs/truthy.d.ts

@@ -0,0 +1,3 @@
+declare type Truthy<T> = T extends false | '' | 0 | null | undefined ? never : T;
+export declare function truthy<T>(value: T): value is Truthy<T>;
+export {};

package/dist/cjs/truthy.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.truthy = void 0;
+function truthy(value) {
+    return Boolean(value);
+}
+exports.truthy = truthy;

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

@@ -0,0 +1,6 @@
+/**
+ * Get the current frame of the video.
+ * Frames are 0-indexed, meaning the first frame is 0, the last frame is the duration of the composition in frames minus one.
+ * @link https://www.remotion.dev/docs/use-current-frame
+ */
+export declare const useCurrentFrame: () => number;

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

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useCurrentFrame = void 0;
+const react_1 = require("react");
+const CanUseRemotionHooks_js_1 = require("./CanUseRemotionHooks.js");
+const Sequence_js_1 = require("./Sequence.js");
+const timeline_position_state_js_1 = require("./timeline-position-state.js");
+/**
+ * Get the current frame of the video.
+ * Frames are 0-indexed, meaning the first frame is 0, the last frame is the duration of the composition in frames minus one.
+ * @link https://www.remotion.dev/docs/use-current-frame
+ */
+const useCurrentFrame = () => {
+    const canUseRemotionHooks = (0, react_1.useContext)(CanUseRemotionHooks_js_1.CanUseRemotionHooks);
+    if (!canUseRemotionHooks) {
+        if (typeof window !== 'undefined' && window.remotion_isPlayer) {
+            throw new Error(`useCurrentFrame can only be called inside a component that was passed to <Player>. See: https://www.remotion.dev/docs/player/examples`);
+        }
+        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 context = (0, react_1.useContext)(Sequence_js_1.SequenceContext);
+    const contextOffset = context
+        ? context.cumulatedFrom + context.relativeFrom
+        : 0;
+    return frame - contextOffset;
+};
+exports.useCurrentFrame = useCurrentFrame;

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

@@ -0,0 +1,7 @@
+import type { ComponentPropsWithRef, ComponentType, ExoticComponent } from 'react';
+import type { CompProps } from './internals.js';
+declare type LazyExoticComponent<T extends ComponentType<any>> = ExoticComponent<ComponentPropsWithRef<T>> & {
+    readonly _result: T;
+};
+export declare const useLazyComponent: <T>(compProps: CompProps<T>) => LazyExoticComponent<ComponentType<T>>;
+export {};

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

@@ -0,0 +1,49 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useLazyComponent = void 0;
+const react_1 = __importStar(require("react"));
+// Expected, it can be any component props
+const useLazyComponent = (compProps) => {
+    const lazy = (0, react_1.useMemo)(() => {
+        if ('lazyComponent' in compProps) {
+            return react_1.default.lazy(compProps.lazyComponent);
+        }
+        if ('component' in compProps) {
+            // In SSR, suspense is not yet supported, we cannot use React.lazy
+            if (typeof document === 'undefined') {
+                return compProps.component;
+            }
+            return react_1.default.lazy(() => Promise.resolve({ default: compProps.component }));
+        }
+        throw new Error("You must pass either 'component' or 'lazyComponent'");
+        // Very important to leave the dependencies as they are, or instead
+        // the player will remount on every frame.
+        // @ts-expect-error
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [compProps.component, compProps.lazyComponent]);
+    return lazy;
+};
+exports.useLazyComponent = useLazyComponent;

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

@@ -0,0 +1,10 @@
+import type { RefObject } from 'react';
+import type { VolumeProp } from './volume-prop.js';
+export declare const useMediaInTimeline: ({ volume, mediaVolume, mediaRef, src, mediaType, playbackRate, }: {
+    volume: VolumeProp | undefined;
+    mediaVolume: number;
+    mediaRef: RefObject<HTMLAudioElement | HTMLVideoElement>;
+    src: string | undefined;
+    mediaType: 'audio' | 'video';
+    playbackRate: number;
+}) => void;

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

@@ -0,0 +1,129 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useMediaInTimeline = void 0;
+const react_1 = require("react");
+const use_audio_frame_js_1 = require("./audio/use-audio-frame.js");
+const CompositionManager_js_1 = require("./CompositionManager.js");
+const get_asset_file_name_js_1 = require("./get-asset-file-name.js");
+const get_environment_js_1 = require("./get-environment.js");
+const nonce_js_1 = require("./nonce.js");
+const play_and_handle_not_allowed_error_js_1 = require("./play-and-handle-not-allowed-error.js");
+const Sequence_js_1 = require("./Sequence.js");
+const timeline_position_state_js_1 = require("./timeline-position-state.js");
+const use_video_config_js_1 = require("./use-video-config.js");
+const volume_prop_js_1 = require("./volume-prop.js");
+const didWarn = {};
+const warnOnce = (message) => {
+    if (didWarn[message]) {
+        return;
+    }
+    console.warn(message);
+    didWarn[message] = true;
+};
+const useMediaInTimeline = ({ volume, mediaVolume, mediaRef, src, mediaType, playbackRate, }) => {
+    const videoConfig = (0, use_video_config_js_1.useVideoConfig)();
+    const { rootId, audioAndVideoTags } = (0, react_1.useContext)(timeline_position_state_js_1.TimelineContext);
+    const parentSequence = (0, react_1.useContext)(Sequence_js_1.SequenceContext);
+    const actualFrom = parentSequence
+        ? parentSequence.relativeFrom + parentSequence.cumulatedFrom
+        : 0;
+    const [playing] = (0, timeline_position_state_js_1.usePlayingState)();
+    const startsAt = (0, use_audio_frame_js_1.useMediaStartsAt)();
+    const { registerSequence, unregisterSequence } = (0, react_1.useContext)(CompositionManager_js_1.CompositionManager);
+    const [id] = (0, react_1.useState)(() => String(Math.random()));
+    const [initialVolume] = (0, react_1.useState)(() => volume);
+    const nonce = (0, nonce_js_1.useNonce)();
+    const duration = parentSequence
+        ? Math.min(parentSequence.durationInFrames, videoConfig.durationInFrames)
+        : videoConfig.durationInFrames;
+    const doesVolumeChange = typeof volume === 'function';
+    const environment = (0, get_environment_js_1.useRemotionEnvironment)();
+    const volumes = (0, react_1.useMemo)(() => {
+        if (typeof volume === 'number') {
+            return volume;
+        }
+        return new Array(Math.max(0, duration + startsAt))
+            .fill(true)
+            .map((_, i) => {
+            return (0, volume_prop_js_1.evaluateVolume)({
+                frame: i + startsAt,
+                volume,
+                mediaVolume,
+                allowAmplificationDuringRender: false,
+            });
+        })
+            .join(',');
+    }, [duration, startsAt, volume, mediaVolume]);
+    (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/using-audio/#controlling-volume`);
+        }
+    }, [initialVolume, mediaType, src, volume]);
+    (0, react_1.useEffect)(() => {
+        var _a;
+        if (!mediaRef.current) {
+            return;
+        }
+        if (!src) {
+            throw new Error('No src passed');
+        }
+        if (environment !== 'preview' && process.env.NODE_ENV !== 'test') {
+            return;
+        }
+        registerSequence({
+            type: mediaType,
+            src,
+            id,
+            duration,
+            from: 0,
+            parent: (_a = parentSequence === null || parentSequence === void 0 ? void 0 : parentSequence.id) !== null && _a !== void 0 ? _a : null,
+            displayName: (0, get_asset_file_name_js_1.getAssetDisplayName)(src),
+            rootId,
+            volume: volumes,
+            showInTimeline: true,
+            nonce,
+            startMediaFrom: 0 - startsAt,
+            doesVolumeChange,
+            showLoopTimesInTimeline: undefined,
+            playbackRate,
+        });
+        return () => {
+            unregisterSequence(id);
+        };
+    }, [
+        actualFrom,
+        duration,
+        id,
+        parentSequence,
+        src,
+        registerSequence,
+        rootId,
+        unregisterSequence,
+        videoConfig,
+        volumes,
+        doesVolumeChange,
+        nonce,
+        mediaRef,
+        mediaType,
+        startsAt,
+        playbackRate,
+        environment,
+    ]);
+    (0, react_1.useEffect)(() => {
+        const tag = {
+            id,
+            play: () => {
+                if (!playing) {
+                    // Don't play if for example in a <Freeze> state.
+                    return;
+                }
+                return (0, play_and_handle_not_allowed_error_js_1.playAndHandleNotAllowedError)(mediaRef, mediaType);
+            },
+        };
+        audioAndVideoTags.current.push(tag);
+        return () => {
+            audioAndVideoTags.current = audioAndVideoTags.current.filter((a) => a.id !== id);
+        };
+    }, [audioAndVideoTags, id, mediaRef, mediaType, playing]);
+};
+exports.useMediaInTimeline = useMediaInTimeline;

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

@@ -0,0 +1,10 @@
+import type { RefObject } from 'react';
+export declare const DEFAULT_ACCEPTABLE_TIMESHIFT = 0.45;
+export declare const useMediaPlayback: ({ mediaRef, src, mediaType, playbackRate: localPlaybackRate, onlyWarnForMediaSeekingError, acceptableTimeshift, }: {
+    mediaRef: RefObject<HTMLVideoElement | HTMLAudioElement>;
+    src: string | undefined;
+    mediaType: 'audio' | 'video';
+    playbackRate: number;
+    onlyWarnForMediaSeekingError: boolean;
+    acceptableTimeshift: number;
+}) => void;

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

@@ -0,0 +1,77 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useMediaPlayback = exports.DEFAULT_ACCEPTABLE_TIMESHIFT = void 0;
+const react_1 = require("react");
+const use_audio_frame_js_1 = require("./audio/use-audio-frame.js");
+const play_and_handle_not_allowed_error_js_1 = require("./play-and-handle-not-allowed-error.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_video_config_js_1 = require("./use-video-config.js");
+const get_current_time_js_1 = require("./video/get-current-time.js");
+const warn_about_non_seekable_media_js_1 = require("./warn-about-non-seekable-media.js");
+exports.DEFAULT_ACCEPTABLE_TIMESHIFT = 0.45;
+const useMediaPlayback = ({ mediaRef, src, mediaType, playbackRate: localPlaybackRate, onlyWarnForMediaSeekingError, acceptableTimeshift, }) => {
+    const { playbackRate: globalPlaybackRate } = (0, react_1.useContext)(timeline_position_state_js_1.TimelineContext);
+    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.usePlayingState)();
+    const { fps } = (0, use_video_config_js_1.useVideoConfig)();
+    const mediaStartsAt = (0, use_audio_frame_js_1.useMediaStartsAt)();
+    const playbackRate = localPlaybackRate * globalPlaybackRate;
+    (0, react_1.useEffect)(() => {
+        var _a;
+        if (!playing) {
+            (_a = mediaRef.current) === null || _a === void 0 ? void 0 : _a.pause();
+        }
+    }, [mediaRef, mediaType, playing]);
+    (0, react_1.useEffect)(() => {
+        const tagName = mediaType === 'audio' ? '<Audio>' : '<Video>';
+        if (!mediaRef.current) {
+            throw new Error(`No ${mediaType} ref found`);
+        }
+        if (!src) {
+            throw new Error(`No 'src' attribute was passed to the ${tagName} element.`);
+        }
+        mediaRef.current.playbackRate = Math.max(0, playbackRate);
+        const shouldBeTime = (0, get_current_time_js_1.getMediaTime)({
+            fps,
+            frame,
+            src,
+            playbackRate: localPlaybackRate,
+            startFrom: -mediaStartsAt,
+            mediaType,
+        });
+        const isTime = mediaRef.current.currentTime;
+        const timeShift = Math.abs(shouldBeTime - isTime);
+        if (timeShift > acceptableTimeshift && !mediaRef.current.ended) {
+            // If scrubbing around, adjust timing
+            // or if time shift is bigger than 0.2sec
+            mediaRef.current.currentTime = shouldBeTime;
+            if (!onlyWarnForMediaSeekingError) {
+                (0, warn_about_non_seekable_media_js_1.warnAboutNonSeekableMedia)(mediaRef.current, onlyWarnForMediaSeekingError ? 'console-warning' : 'console-error');
+            }
+        }
+        if (!playing || absoluteFrame === 0) {
+            mediaRef.current.currentTime = shouldBeTime;
+        }
+        if (mediaRef.current.paused && !mediaRef.current.ended && playing) {
+            const { current } = mediaRef;
+            current.currentTime = shouldBeTime;
+            (0, play_and_handle_not_allowed_error_js_1.playAndHandleNotAllowedError)(mediaRef, mediaType);
+        }
+    }, [
+        absoluteFrame,
+        fps,
+        playbackRate,
+        frame,
+        mediaRef,
+        mediaType,
+        playing,
+        src,
+        mediaStartsAt,
+        localPlaybackRate,
+        onlyWarnForMediaSeekingError,
+        acceptableTimeshift,
+    ]);
+};
+exports.useMediaPlayback = useMediaPlayback;

package/dist/cjs/use-media-tag-volume.d.ts

@@ -0,0 +1,2 @@
+import type { RefObject } from 'react';
+export declare const useMediaTagVolume: (mediaRef: RefObject<HTMLVideoElement | HTMLAudioElement>) => number;

package/dist/cjs/use-media-tag-volume.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useMediaTagVolume = void 0;
+const react_1 = require("react");
+// Returns the real volume of the audio or video while playing,
+// no matter what the supposed volume should be
+const useMediaTagVolume = (mediaRef) => {
+    const [actualVolume, setActualVolume] = (0, react_1.useState)(1);
+    (0, react_1.useEffect)(() => {
+        const ref = mediaRef.current;
+        if (!ref) {
+            return;
+        }
+        const onChange = () => {
+            setActualVolume(ref.volume);
+        };
+        ref.addEventListener('volumechange', onChange);
+        return () => ref.removeEventListener('volumechange', onChange);
+    }, [mediaRef]);
+    (0, react_1.useEffect)(() => {
+        const ref = mediaRef.current;
+        if (!ref) {
+            return;
+        }
+        if (ref.volume !== actualVolume) {
+            setActualVolume(ref.volume);
+        }
+    }, [actualVolume, mediaRef]);
+    return actualVolume;
+};
+exports.useMediaTagVolume = useMediaTagVolume;

package/dist/cjs/use-sync-volume-with-media-tag.d.ts

@@ -0,0 +1,10 @@
+import type { RefObject } from 'react';
+import type { VolumeProp } from './volume-prop.js';
+export declare type UseSyncVolumeWithMediaTagOptions = {
+    volumePropFrame: number;
+    actualVolume: number;
+    volume?: VolumeProp;
+    mediaVolume: number;
+    mediaRef: RefObject<HTMLVideoElement | HTMLAudioElement>;
+};
+export declare const useSyncVolumeWithMediaTag: ({ volumePropFrame, actualVolume, volume, mediaVolume, mediaRef, }: UseSyncVolumeWithMediaTagOptions) => void;

package/dist/cjs/use-sync-volume-with-media-tag.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSyncVolumeWithMediaTag = void 0;
+const react_1 = require("react");
+const is_approximately_the_same_js_1 = require("./is-approximately-the-same.js");
+const volume_prop_js_1 = require("./volume-prop.js");
+const useSyncVolumeWithMediaTag = ({ volumePropFrame, actualVolume, volume, mediaVolume, mediaRef, }) => {
+    (0, react_1.useEffect)(() => {
+        const userPreferredVolume = (0, volume_prop_js_1.evaluateVolume)({
+            frame: volumePropFrame,
+            volume,
+            mediaVolume,
+            allowAmplificationDuringRender: false,
+        });
+        if (!(0, is_approximately_the_same_js_1.isApproximatelyTheSame)(userPreferredVolume, actualVolume) &&
+            mediaRef.current) {
+            mediaRef.current.volume = userPreferredVolume;
+        }
+    }, [actualVolume, volumePropFrame, mediaRef, volume, mediaVolume]);
+};
+exports.useSyncVolumeWithMediaTag = useSyncVolumeWithMediaTag;

package/dist/cjs/use-unsafe-video-config.d.ts

@@ -0,0 +1,2 @@
+import type { VideoConfig } from './video-config.js';
+export declare const useUnsafeVideoConfig: () => VideoConfig | null;

package/dist/cjs/use-unsafe-video-config.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useUnsafeVideoConfig = void 0;
+const react_1 = require("react");
+const Sequence_js_1 = require("./Sequence.js");
+const use_video_js_1 = require("./use-video.js");
+const useUnsafeVideoConfig = () => {
+    var _a;
+    const context = (0, react_1.useContext)(Sequence_js_1.SequenceContext);
+    const ctxDuration = (_a = context === null || context === void 0 ? void 0 : context.durationInFrames) !== null && _a !== void 0 ? _a : null;
+    const video = (0, use_video_js_1.useVideo)();
+    return (0, react_1.useMemo)(() => {
+        if (!video) {
+            return null;
+        }
+        const { id, durationInFrames, fps, height, width, defaultProps } = video;
+        return {
+            id,
+            width,
+            height,
+            fps,
+            durationInFrames: ctxDuration !== null && ctxDuration !== void 0 ? ctxDuration : durationInFrames,
+            defaultProps,
+        };
+    }, [ctxDuration, video]);
+};
+exports.useUnsafeVideoConfig = useUnsafeVideoConfig;