remotion 3.3.55 → 3.3.56

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

@@ -1,53 +0,0 @@
-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 '../SequenceContext.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.js

@@ -1,49 +0,0 @@
-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.js

@@ -1,44 +0,0 @@
-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.js

@@ -1,53 +0,0 @@
-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.js

@@ -1,37 +0,0 @@
-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.js

@@ -1,55 +0,0 @@
-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/index.js';
-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.js

@@ -1,93 +0,0 @@
-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.js

@@ -1,37 +0,0 @@
-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.js

@@ -1,35 +0,0 @@
-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.js

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

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

@@ -1,23 +0,0 @@
-import { useContext } from 'react';
-import { CanUseRemotionHooks } from './CanUseRemotionHooks.js';
-import { SequenceContext } from './SequenceContext.js';
-import { useTimelinePosition } from './timeline-position-state.js';
-/**
- * @description 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.
- * @see [Documentation](https://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.js

@@ -1,22 +0,0 @@
-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.js

@@ -1,125 +0,0 @@
-import { useContext, useEffect, useMemo, useState } from 'react';
-import { useMediaStartsAt } from './audio/use-audio-frame.js';
-import { CompositionManager } from './CompositionManager.js';
-import { getAssetDisplayName } from './get-asset-file-name.js';
-import { useRemotionEnvironment } from './get-environment.js';
-import { useNonce } from './nonce.js';
-import { playAndHandleNotAllowedError } from './play-and-handle-not-allowed-error.js';
-import { SequenceContext } from './SequenceContext.js';
-import { TimelineContext, usePlayingState } from './timeline-position-state.js';
-import { useVideoConfig } from './use-video-config.js';
-import { evaluateVolume } from './volume-prop.js';
-const didWarn = {};
-const warnOnce = (message) => {
-    if (didWarn[message]) {
-        return;
-    }
-    console.warn(message);
-    didWarn[message] = true;
-};
-export const useMediaInTimeline = ({ volume, mediaVolume, mediaRef, src, mediaType, playbackRate, }) => {
-    const videoConfig = useVideoConfig();
-    const { rootId, audioAndVideoTags } = useContext(TimelineContext);
-    const parentSequence = useContext(SequenceContext);
-    const actualFrom = parentSequence
-        ? parentSequence.relativeFrom + parentSequence.cumulatedFrom
-        : 0;
-    const [playing] = usePlayingState();
-    const startsAt = useMediaStartsAt();
-    const { registerSequence, unregisterSequence } = useContext(CompositionManager);
-    const [id] = useState(() => String(Math.random()));
-    const [initialVolume] = useState(() => volume);
-    const nonce = useNonce();
-    const duration = parentSequence
-        ? Math.min(parentSequence.durationInFrames, videoConfig.durationInFrames)
-        : videoConfig.durationInFrames;
-    const doesVolumeChange = typeof volume === 'function';
-    const environment = useRemotionEnvironment();
-    const volumes = useMemo(() => {
-        if (typeof volume === 'number') {
-            return volume;
-        }
-        return new Array(Math.max(0, duration + startsAt))
-            .fill(true)
-            .map((_, i) => {
-            return evaluateVolume({
-                frame: i + startsAt,
-                volume,
-                mediaVolume,
-                allowAmplificationDuringRender: false,
-            });
-        })
-            .join(',');
-    }, [duration, startsAt, volume, mediaVolume]);
-    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]);
-    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: 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,
-    ]);
-    useEffect(() => {
-        const tag = {
-            id,
-            play: () => {
-                if (!playing) {
-                    // Don't play if for example in a <Freeze> state.
-                    return;
-                }
-                return playAndHandleNotAllowedError(mediaRef, mediaType);
-            },
-        };
-        audioAndVideoTags.current.push(tag);
-        return () => {
-            audioAndVideoTags.current = audioAndVideoTags.current.filter((a) => a.id !== id);
-        };
-    }, [audioAndVideoTags, id, mediaRef, mediaType, playing]);
-};