remotion 3.3.44 → 3.3.51

package/dist/esm/test/truthy.test.js

@@ -0,0 +1,22 @@
+import { expect, test } from 'vitest';
+import { truthy } from '../truthy.js';
+test.each([
+    ['true', true],
+    ['false', true],
+    ['True', true],
+    ['False', true],
+    ['', false],
+    ['abc', true],
+    [true, true],
+    [false, false],
+    [null, false],
+    [undefined, false],
+    [0, false],
+    [1, true],
+    [0.5, true],
+    [12, true],
+    [-1, true],
+    [-4, true],
+])('test with %s', (input, expected) => {
+    expect(truthy(input)).toEqual(expected);
+});

package/dist/esm/test/use-audio-frame.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/esm/test/use-audio-frame.test.js

@@ -0,0 +1,53 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { afterAll, beforeAll, describe, expect, test, vitest } from 'vitest';
+import * as useAudioFrameModule from '../audio/use-audio-frame.js';
+import { useFrameForVolumeProp, useMediaStartsAt, } from '../audio/use-audio-frame.js';
+import { SequenceContext } from '../Sequence.js';
+import * as useFrameModule from '../use-current-frame.js';
+import { renderHook } from './render-hook.js';
+test.skip('Media starts at 0 if it is outside a sequence', () => {
+    const wrapper = ({ children }) => (_jsx(SequenceContext.Provider, { value: null, children: children }));
+    const { result } = renderHook(() => useMediaStartsAt(), { wrapper });
+    expect(result.current).toEqual(0);
+});
+test.skip('Media start is shifted back based on sequence', () => {
+    const mockSequence = {
+        cumulatedFrom: 0,
+        relativeFrom: -100,
+        parentFrom: 0,
+        durationInFrames: 0,
+        id: 'mock',
+    };
+    const wrapper = ({ children }) => (_jsx(SequenceContext.Provider, { value: mockSequence, children: children }));
+    const { result } = renderHook(() => useMediaStartsAt(), { wrapper });
+    expect(result.current).toEqual(-100);
+});
+describe('useFrameForVolumeProp hook tests', () => {
+    beforeAll(() => {
+        vitest
+            .spyOn(useAudioFrameModule, 'useMediaStartsAt')
+            .mockImplementation(() => -10);
+    });
+    afterAll(() => {
+        vitest.spyOn(useAudioFrameModule, 'useMediaStartsAt').mockRestore();
+    });
+    test.skip('Media not mounted', () => {
+        vitest.spyOn(useFrameModule, 'useCurrentFrame').mockImplementation(() => 9);
+        const { result } = renderHook(() => useFrameForVolumeProp());
+        expect(result.current).toEqual(-1);
+    });
+    test.skip('Media mounted', () => {
+        vitest
+            .spyOn(useFrameModule, 'useCurrentFrame')
+            .mockImplementation(() => 10);
+        const { result } = renderHook(() => useFrameForVolumeProp());
+        expect(result.current).toEqual(0);
+    });
+    test.skip('Media mounted + 1 frame', () => {
+        vitest
+            .spyOn(useFrameModule, 'useCurrentFrame')
+            .mockImplementation(() => 11);
+        const { result } = renderHook(() => useFrameForVolumeProp());
+        expect(result.current).toEqual(1);
+    });
+});

package/dist/esm/test/use-media-in-timeline.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/esm/test/use-media-in-timeline.test.js

@@ -0,0 +1,49 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { afterAll, beforeAll, expect, test, vitest } from 'vitest';
+import { Internals } from '../internals.js';
+import { useMediaInTimeline } from '../use-media-in-timeline.js';
+import * as useVideoConfigModule from '../use-video-config.js';
+import { renderHook } from './render-hook.js';
+import { mockCompositionContext } from './wrap-sequence-context.js';
+beforeAll(() => {
+    vitest
+        .spyOn(useVideoConfigModule, 'useVideoConfig')
+        .mockImplementation(() => ({
+        width: 10,
+        height: 10,
+        fps: 30,
+        durationInFrames: 100,
+        id: 'hithere',
+        defaultProps: () => ({}),
+    }));
+});
+afterAll(() => {
+    vitest.spyOn(useVideoConfigModule, 'useVideoConfig').mockClear();
+});
+test('useMediaInTimeline registers and unregisters new sequence', () => {
+    const registerSequence = vitest.fn();
+    const unregisterSequence = vitest.fn();
+    const wrapper = ({ children }) => (_jsx(Internals.CompositionManager.Provider, { value: 
+        // eslint-disable-next-line react/jsx-no-constructed-context-values
+        {
+            ...mockCompositionContext,
+            registerSequence,
+            unregisterSequence,
+        }, children: children }));
+    const audioRef = {
+        current: { volume: 0.5 },
+    };
+    const { unmount } = renderHook(() => useMediaInTimeline({
+        volume: 1,
+        src: 'test',
+        mediaVolume: 1,
+        mediaType: 'audio',
+        mediaRef: audioRef,
+        playbackRate: 1,
+    }), {
+        wrapper,
+    });
+    expect(registerSequence).toHaveBeenCalled();
+    unmount();
+    expect(unregisterSequence).toHaveBeenCalled();
+});

package/dist/esm/test/use-media-tag-volume.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/esm/test/use-media-tag-volume.test.js

@@ -0,0 +1,44 @@
+import React from 'react';
+import { afterEach, beforeEach, describe, expect, test, vitest } from 'vitest';
+import { useMediaTagVolume } from '../use-media-tag-volume.js';
+import { renderHook } from './render-hook.js';
+describe('Should update state when volume changes', () => {
+    const setState = vitest.fn();
+    const useStateSpy = vitest.spyOn(React, 'useState');
+    beforeEach(() => {
+        // @ts-expect-error
+        useStateSpy.mockImplementation((init) => [init, setState]);
+    });
+    afterEach(() => {
+        useStateSpy.mockRestore();
+    });
+    test.skip('has the volume been set', () => {
+        const addEventListener = vitest.fn();
+        const removeEventListener = vitest.fn();
+        let audioRef = {
+            current: { volume: 0.5, addEventListener, removeEventListener },
+        };
+        const { rerender } = renderHook(({ mediaRef }) => useMediaTagVolume(mediaRef), {
+            initialProps: { mediaRef: audioRef },
+        });
+        expect(setState).toHaveBeenCalledWith(0.5);
+        audioRef = {
+            current: { ...audioRef.current, volume: 0.75 },
+        };
+        rerender({ mediaRef: audioRef });
+        expect(setState).toHaveBeenCalledWith(0.75);
+        expect(addEventListener).toHaveBeenCalledWith('volumechange', expect.anything());
+        expect(removeEventListener).toHaveBeenCalledWith('volumechange', expect.anything());
+    });
+});
+test('Should listen for volume changes', () => {
+    const addEventListener = vitest.fn();
+    const removeEventListener = vitest.fn();
+    const audioRef = {
+        current: { volume: 0.5, addEventListener, removeEventListener },
+    };
+    renderHook(({ mediaRef }) => useMediaTagVolume(mediaRef), {
+        initialProps: { mediaRef: audioRef },
+    });
+    expect(addEventListener).toHaveBeenCalledTimes(1);
+});

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,53 @@
+import { expect, test, vitest } from 'vitest';
+import { useSyncVolumeWithMediaTag } from '../use-sync-volume-with-media-tag.js';
+import { renderHook } from './render-hook.js';
+test('has the volume been adapted', () => {
+    var _a, _b;
+    const addEventListener = vitest.fn();
+    const removeEventListener = vitest.fn();
+    const audioRef = {
+        current: { volume: 0.5, addEventListener, removeEventListener },
+    };
+    const volume = 0.6;
+    const volumePropFrame = 1;
+    const actualVolume = 0.4;
+    const initialProps = {
+        volumePropFrame,
+        actualVolume,
+        volume,
+        mediaRef: audioRef,
+        mediaVolume: 1,
+    };
+    const { rerender } = renderHook((hookProps) => useSyncVolumeWithMediaTag(hookProps), {
+        initialProps,
+    });
+    expect((_a = audioRef.current) === null || _a === void 0 ? void 0 : _a.volume).toEqual(initialProps.volume);
+    const newVolume = 0.5;
+    rerender({
+        ...initialProps,
+        volume: newVolume,
+    });
+    expect((_b = audioRef.current) === null || _b === void 0 ? void 0 : _b.volume).toEqual(newVolume);
+});
+test('volume should not be adapted', () => {
+    var _a;
+    const addEventListener = vitest.fn();
+    const removeEventListener = vitest.fn();
+    const audioRef = {
+        current: { volume: 0.4, addEventListener, removeEventListener },
+    };
+    const volume = 0.4;
+    const volumePropFrame = 1;
+    const actualVolume = 0.4;
+    const initialProps = {
+        volumePropFrame,
+        actualVolume,
+        volume,
+        mediaRef: audioRef,
+        mediaVolume: 1,
+    };
+    renderHook((hookProps) => useSyncVolumeWithMediaTag(hookProps), {
+        initialProps,
+    });
+    expect((_a = audioRef.current) === null || _a === void 0 ? void 0 : _a.volume).toEqual(initialProps.volume);
+});

package/dist/esm/test/validate-start-from-props.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/esm/test/validate-start-from-props.test.js

@@ -0,0 +1,37 @@
+import { describe, test } from 'vitest';
+import { validateStartFromProps } from '../validate-start-from-props.js';
+import { expectToThrow } from './expect-to-throw.js';
+describe('ValidateStartFrom props should throw', () => {
+    describe('Throw with invalid startFrom prop', () => {
+        test('It should throw if startFrom prop is negative', () => {
+            expectToThrow(() => validateStartFromProps(-40, 1), /startFrom must be greater than equal to 0 instead got -40./);
+        });
+        test('It should throw if startFrom is not a number', () => {
+            expectToThrow(
+            // @ts-expect-error
+            () => validateStartFromProps('10', 20), /type of startFrom prop must be a number, instead got type string./);
+        });
+        test('It should throw if startFrom is NaN', () => {
+            expectToThrow(() => validateStartFromProps(NaN, 20), /startFrom prop can not be NaN or Infinity./);
+        });
+        test('It should throw if startFrom is Infinity', () => {
+            expectToThrow(() => validateStartFromProps(Infinity, 20), /startFrom prop can not be NaN or Infinity./);
+        });
+    });
+    describe('Throw with invalid endAt prop', () => {
+        test('It should throw if endAt prop is negative', () => {
+            expectToThrow(() => validateStartFromProps(0, -40), /endAt must be a positive number, instead got -40./);
+        });
+        test('It should throw if endAt is less than startFrom', () => {
+            expectToThrow(() => validateStartFromProps(10, 1), /endAt prop must be greater than startFrom prop./);
+        });
+        test('It should throw if endAt is not a number', () => {
+            expectToThrow(
+            // @ts-expect-error
+            () => validateStartFromProps(10, '20'), /type of endAt prop must be a number, instead got type string./);
+        });
+        test('It should throw if endAt is NaN', () => {
+            expectToThrow(() => validateStartFromProps(10, NaN), /endAt prop can not be NaN./);
+        });
+    });
+});

package/dist/esm/test/video.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/esm/test/video.test.js

@@ -0,0 +1,55 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * @vitest-environment jsdom
+ */
+import { render } from '@testing-library/react';
+import React, { useContext } from 'react';
+import { describe, expect, test } from 'vitest';
+import { CanUseRemotionHooksProvider } from '../CanUseRemotionHooks.js';
+import { Internals } from '../internals.js';
+import { Video } from '../video';
+import { expectToThrow } from './expect-to-throw.js';
+const Wrapper = ({ children }) => {
+    const compositions = useContext(Internals.CompositionManager);
+    return (_jsx(CanUseRemotionHooksProvider, { children: _jsx(Internals.RemotionRoot, { numberOfAudioTags: 0, children: _jsx(Internals.CompositionManager.Provider
+            // eslint-disable-next-line react/jsx-no-constructed-context-values
+            , { 
+                // eslint-disable-next-line react/jsx-no-constructed-context-values
+                value: {
+                    ...compositions,
+                    compositions: [
+                        {
+                            height: 1080,
+                            width: 1080,
+                            fps: 30,
+                            durationInFrames: 30,
+                            id: 'markup',
+                            nonce: 0,
+                            component: React.lazy(() => Promise.resolve({
+                                default: (() => null),
+                            })),
+                            defaultProps: undefined,
+                            folderName: null,
+                            parentFolderName: null,
+                        },
+                    ],
+                    currentComposition: 'markup',
+                }, children: children }) }) }));
+};
+describe('Render correctly with props', () => {
+    test('It should render Video without startFrom / endAt props', () => {
+        expect(() => render(_jsx(Wrapper, { children: _jsx(Video, { src: "test" }) }))).not.toThrow();
+    });
+    test('It should render Video with startFrom props', () => {
+        expect(() => render(_jsx(Wrapper, { children: _jsx(Video, { src: "test", startFrom: 10 }) }))).not.toThrow();
+    });
+    test('It should render Video with endAt props', () => {
+        expect(() => render(_jsx(Wrapper, { children: _jsx(Video, { src: "test", endAt: 10 }) }))).not.toThrow();
+    });
+    test('It should render Video with startFrom and endAt props', () => {
+        expect(() => render(_jsx(Wrapper, { children: _jsx(Video, { src: "test", startFrom: 10, endAt: 15 }) }))).not.toThrow();
+    });
+    test('It should throw if videoConfig/Wrapper is missing', () => {
+        expectToThrow(() => render(_jsx(CanUseRemotionHooksProvider, { children: _jsx(Video, { startFrom: 10, endAt: 15 }) })), /No video config found/);
+    });
+});

package/dist/esm/test/volume-prop.test.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,93 @@
+import { describe, expect, test } from 'vitest';
+import { evaluateVolume } from '../volume-prop.js';
+import { expectToThrow } from './expect-to-throw.js';
+describe('EvaluateVolume does not throw', () => {
+    test('Volume is undefined', () => {
+        const toEvaluate = {
+            frame: 10,
+            volume: undefined,
+            mediaVolume: 1,
+            allowAmplificationDuringRender: false,
+        };
+        expect(evaluateVolume(toEvaluate)).toEqual(1);
+    });
+    test('Volume is smaller than one', () => {
+        const smallVolume = 0.5;
+        const toEvaluate = {
+            frame: 10,
+            volume: smallVolume,
+            mediaVolume: 1,
+            allowAmplificationDuringRender: false,
+        };
+        expect(evaluateVolume(toEvaluate)).toEqual(smallVolume);
+    });
+    test('Volume is bigger than one', () => {
+        const toEvaluate = {
+            frame: 10,
+            volume: 10,
+            mediaVolume: 1,
+            allowAmplificationDuringRender: true,
+        };
+        expect(evaluateVolume(toEvaluate)).toBe(10);
+    });
+    test('evaluated volume from frame that is smaller than one', () => {
+        const toEvaluate = {
+            frame: 1,
+            volume: (frame) => frame * 0.5,
+            mediaVolume: 1,
+            allowAmplificationDuringRender: false,
+        };
+        expect(evaluateVolume(toEvaluate)).toBe(0.5);
+    });
+    test('evaluated volume from frame that is bigger than one', () => {
+        const toEvaluate = {
+            frame: 10,
+            volume: (frame) => frame,
+            mediaVolume: 1,
+            allowAmplificationDuringRender: false,
+        };
+        expect(evaluateVolume(toEvaluate)).toBe(1);
+    });
+});
+describe('evaluateVolume throws exception', () => {
+    test('It should throw if volume prop is neither number nor undefined', () => {
+        const toEvaluate = { frame: 10, volume: 'NaN' };
+        expectToThrow(() => {
+            // @ts-expect-error
+            evaluateVolume(toEvaluate);
+        }, /volume is not a function/);
+    });
+    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`
+        expectToThrow(() => {
+            // @ts-expect-error
+            evaluateVolume(toEvaluate);
+        }, /You passed in a function to the volume prop but it returned NaN for frame 1./);
+    });
+    test('It should throw if volume is NaN', () => {
+        const invalidVolume = NaN;
+        const toEvaluate = {
+            frame: 1,
+            volume: () => invalidVolume,
+            mediaVolume: 1,
+            allowAmplificationDuringRender: false,
+        };
+        expectToThrow(() => {
+            evaluateVolume(toEvaluate);
+        }, /You passed in a function to the volume prop but it returned NaN for frame 1/);
+    });
+    test('It should throw if volume returns non finite number', () => {
+        const invalidVolume = Infinity;
+        const toEvaluate = {
+            frame: 1,
+            volume: () => invalidVolume,
+            mediaVolume: 1,
+            allowAmplificationDuringRender: false,
+        };
+        expectToThrow(() => {
+            evaluateVolume(toEvaluate);
+        }, /You passed in a function to the volume prop but it returned a non-finite number for frame 1/);
+    });
+});

package/dist/esm/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/esm/test/wrap-sequence-context.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { CanUseRemotionHooksProvider } from '../CanUseRemotionHooks.js';
+import { CompositionManager } from '../CompositionManager.js';
+const Comp = () => null;
+export const 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,
+};
+export const WrapSequenceContext = ({ children }) => {
+    return (_jsx(CanUseRemotionHooksProvider, { children: _jsx(CompositionManager.Provider, { value: mockCompositionContext, children: children }) }));
+};

package/dist/esm/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/esm/timeline-position-state.js

@@ -0,0 +1,35 @@
+import { createContext, useContext, useMemo } from 'react';
+export const TimelineContext = createContext({
+    frame: 0,
+    playing: false,
+    playbackRate: 1,
+    rootId: '',
+    imperativePlaying: {
+        current: false,
+    },
+    setPlaybackRate: () => {
+        throw new Error('default');
+    },
+    audioAndVideoTags: { current: [] },
+});
+export const SetTimelineContext = createContext({
+    setFrame: () => {
+        throw new Error('default');
+    },
+    setPlaying: () => {
+        throw new Error('default');
+    },
+});
+export const useTimelinePosition = () => {
+    const state = useContext(TimelineContext);
+    return state.frame;
+};
+export const useTimelineSetFrame = () => {
+    const { setFrame } = useContext(SetTimelineContext);
+    return setFrame;
+};
+export const usePlayingState = () => {
+    const { playing, imperativePlaying } = useContext(TimelineContext);
+    const { setPlaying } = useContext(SetTimelineContext);
+    return useMemo(() => [playing, setPlaying, imperativePlaying], [imperativePlaying, playing, setPlaying]);
+};

package/dist/esm/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/esm/truthy.js

@@ -0,0 +1,3 @@
+export function truthy(value) {
+    return Boolean(value);
+}

package/dist/esm/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/esm/use-current-frame.js

@@ -0,0 +1,24 @@
+import { useContext } from 'react';
+import { CanUseRemotionHooks } from './CanUseRemotionHooks.js';
+import { SequenceContext } from './Sequence.js';
+import { useTimelinePosition } from './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
+ */
+export const useCurrentFrame = () => {
+    const canUseRemotionHooks = useContext(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 = useTimelinePosition();
+    const context = useContext(SequenceContext);
+    const contextOffset = context
+        ? context.cumulatedFrom + context.relativeFrom
+        : 0;
+    return frame - contextOffset;
+};

package/dist/esm/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/esm/use-lazy-component.js

@@ -0,0 +1,22 @@
+import React, { useMemo } from 'react';
+// Expected, it can be any component props
+export const useLazyComponent = (compProps) => {
+    const lazy = useMemo(() => {
+        if ('lazyComponent' in compProps) {
+            return React.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.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;
+};

package/dist/esm/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;