remotion 4.0.108 → 4.0.109

package/dist/cjs/get-timeline-clip-name.d.ts

@@ -0,0 +1 @@
+export declare const getTimelineClipName: (children: React.ReactNode) => string;

package/dist/cjs/get-timeline-clip-name.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getTimelineClipName = void 0;
+const react_1 = require("react");
+const HIDDEN_NAMES = ['__WEBPACK_DEFAULT_EXPORT__'];
+const getTimelineClipName = (children) => {
+    var _a;
+    const tree = (_a = react_1.Children.map(children, (ch) => {
+        if (!(0, react_1.isValidElement)(ch)) {
+            return null;
+        }
+        // Must be name, not ID
+        const name = typeof ch.type !== 'string' && ch.type.name;
+        if (name && !HIDDEN_NAMES.includes(name)) {
+            return name;
+        }
+        if (ch.props.children) {
+            const chName = (0, exports.getTimelineClipName)(ch.props.children);
+            return chName;
+        }
+        return null;
+    })) === null || _a === void 0 ? void 0 : _a.filter(Boolean);
+    return (tree === null || tree === void 0 ? void 0 : tree.length) ? tree[0] : '';
+};
+exports.getTimelineClipName = getTimelineClipName;

package/dist/cjs/version.d.ts

@@ -1 +1 @@
-export declare const VERSION = "4.0.108";
+export declare const VERSION = "4.0.109";

package/dist/cjs/version.js

@@ -2,4 +2,4 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.VERSION = void 0;
 // Automatically generated on publish
-exports.VERSION = '4.0.108';
+exports.VERSION = '4.0.109';

package/dist/esm/index.mjs

@@ -105,7 +105,7 @@ function truthy(value) {
 }
 
 // Automatically generated on publish
-const VERSION = '4.0.108';
+const VERSION = '4.0.109';
 
 const checkMultipleRemotionVersions = () => {
     if (typeof globalThis === 'undefined') {

package/dist/esm/version.mjs

@@ -1,4 +1,4 @@
 // Automatically generated on publish
-const VERSION = '4.0.108';
+const VERSION = '4.0.109';
 
 export { VERSION };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "remotion",
-  "version": "4.0.108",
+  "version": "4.0.109",
   "description": "Render videos in React",
   "main": "dist/cjs/index.js",
   "types": "dist/cjs/index.d.ts",

package/dist/cjs/audio/AudioForPreview.d.ts

@@ -1,11 +0,0 @@
-import React from 'react';
-import type { RemotionAudioProps } from './props.js';
-type AudioForPreviewProps = RemotionAudioProps & {
-    shouldPreMountAudioTags: boolean;
-    onDuration: (src: string, durationInSeconds: number) => void;
-    pauseWhenBuffering: boolean;
-    _remotionInternalNativeLoopPassed: boolean;
-    _remotionInternalStack: string | null;
-};
-export declare const AudioForPreview: React.ForwardRefExoticComponent<Omit<AudioForPreviewProps, "ref"> & React.RefAttributes<HTMLAudioElement>>;
-export {};

package/dist/cjs/audio/AudioForPreview.js

@@ -1,119 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.AudioForPreview = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const prefetch_js_1 = require("../prefetch.js");
-const random_js_1 = require("../random.js");
-const SequenceContext_js_1 = require("../SequenceContext.js");
-const SequenceManager_js_1 = require("../SequenceManager.js");
-const use_media_buffering_js_1 = require("../use-media-buffering.js");
-const use_media_in_timeline_js_1 = require("../use-media-in-timeline.js");
-const use_media_playback_js_1 = require("../use-media-playback.js");
-const use_media_tag_volume_js_1 = require("../use-media-tag-volume.js");
-const use_sync_volume_with_media_tag_js_1 = require("../use-sync-volume-with-media-tag.js");
-const volume_position_state_js_1 = require("../volume-position-state.js");
-const shared_audio_tags_js_1 = require("./shared-audio-tags.js");
-const use_audio_frame_js_1 = require("./use-audio-frame.js");
-const AudioForDevelopmentForwardRefFunction = (props, ref) => {
-    var _a;
-    const [initialShouldPreMountAudioElements] = (0, react_1.useState)(props.shouldPreMountAudioTags);
-    if (props.shouldPreMountAudioTags !== initialShouldPreMountAudioElements) {
-        throw new Error('Cannot change the behavior for pre-mounting audio tags dynamically.');
-    }
-    const [mediaVolume] = (0, volume_position_state_js_1.useMediaVolumeState)();
-    const [mediaMuted] = (0, volume_position_state_js_1.useMediaMutedState)();
-    const volumePropFrame = (0, use_audio_frame_js_1.useFrameForVolumeProp)();
-    const { volume, muted, playbackRate, shouldPreMountAudioTags, src, onDuration, acceptableTimeShiftInSeconds, _remotionInternalNeedsDurationCalculation, _remotionInternalNativeLoopPassed, _remotionInternalStack, allowAmplificationDuringRender, name, pauseWhenBuffering, ...nativeProps } = props;
-    const { hidden } = (0, react_1.useContext)(SequenceManager_js_1.SequenceVisibilityToggleContext);
-    if (!src) {
-        throw new TypeError("No 'src' was passed to <Audio>.");
-    }
-    const preloadedSrc = (0, prefetch_js_1.usePreload)(src);
-    const sequenceContext = (0, react_1.useContext)(SequenceContext_js_1.SequenceContext);
-    const [timelineId] = (0, react_1.useState)(() => String(Math.random()));
-    const isSequenceHidden = (_a = hidden[timelineId]) !== null && _a !== void 0 ? _a : false;
-    const propsToPass = (0, react_1.useMemo)(() => {
-        return {
-            muted: muted || mediaMuted || isSequenceHidden,
-            src: preloadedSrc,
-            loop: _remotionInternalNativeLoopPassed,
-            ...nativeProps,
-        };
-    }, [
-        _remotionInternalNativeLoopPassed,
-        isSequenceHidden,
-        mediaMuted,
-        muted,
-        nativeProps,
-        preloadedSrc,
-    ]);
-    // Generate a string that's as unique as possible for this asset
-    // but at the same time deterministic. We use it to combat strict mode issues.
-    const id = (0, react_1.useMemo)(() => `audio-${(0, random_js_1.random)(src !== null && src !== void 0 ? src : '')}-${sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.relativeFrom}-${sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.cumulatedFrom}-${sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.durationInFrames}-muted:${props.muted}-loop:${props.loop}`, [
-        src,
-        sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.relativeFrom,
-        sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.cumulatedFrom,
-        sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.durationInFrames,
-        props.muted,
-        props.loop,
-    ]);
-    const audioRef = (0, shared_audio_tags_js_1.useSharedAudio)(propsToPass, id).el;
-    const actualVolume = (0, use_media_tag_volume_js_1.useMediaTagVolume)(audioRef);
-    (0, use_sync_volume_with_media_tag_js_1.useSyncVolumeWithMediaTag)({
-        volumePropFrame,
-        actualVolume,
-        volume,
-        mediaVolume,
-        mediaRef: audioRef,
-    });
-    (0, use_media_in_timeline_js_1.useMediaInTimeline)({
-        volume,
-        mediaVolume,
-        mediaRef: audioRef,
-        src,
-        mediaType: 'audio',
-        playbackRate: playbackRate !== null && playbackRate !== void 0 ? playbackRate : 1,
-        displayName: name !== null && name !== void 0 ? name : null,
-        id: timelineId,
-        stack: props._remotionInternalStack,
-    });
-    (0, use_media_playback_js_1.useMediaPlayback)({
-        mediaRef: audioRef,
-        src,
-        mediaType: 'audio',
-        playbackRate: playbackRate !== null && playbackRate !== void 0 ? playbackRate : 1,
-        onlyWarnForMediaSeekingError: false,
-        acceptableTimeshift: acceptableTimeShiftInSeconds !== null && acceptableTimeShiftInSeconds !== void 0 ? acceptableTimeShiftInSeconds : use_media_playback_js_1.DEFAULT_ACCEPTABLE_TIMESHIFT,
-    });
-    (0, use_media_buffering_js_1.useMediaBuffering)(audioRef, pauseWhenBuffering);
-    (0, react_1.useImperativeHandle)(ref, () => {
-        return audioRef.current;
-    }, [audioRef]);
-    const currentOnDurationCallback = (0, react_1.useRef)();
-    currentOnDurationCallback.current = onDuration;
-    (0, react_1.useEffect)(() => {
-        var _a;
-        const { current } = audioRef;
-        if (!current) {
-            return;
-        }
-        if (current.duration) {
-            (_a = currentOnDurationCallback.current) === null || _a === void 0 ? void 0 : _a.call(currentOnDurationCallback, current.src, current.duration);
-            return;
-        }
-        const onLoadedMetadata = () => {
-            var _a;
-            (_a = currentOnDurationCallback.current) === null || _a === void 0 ? void 0 : _a.call(currentOnDurationCallback, current.src, current.duration);
-        };
-        current.addEventListener('loadedmetadata', onLoadedMetadata);
-        return () => {
-            current.removeEventListener('loadedmetadata', onLoadedMetadata);
-        };
-    }, [audioRef, src]);
-    if (initialShouldPreMountAudioElements) {
-        return null;
-    }
-    return (0, jsx_runtime_1.jsx)("audio", { ref: audioRef, preload: "metadata", ...propsToPass });
-};
-exports.AudioForPreview = (0, react_1.forwardRef)(AudioForDevelopmentForwardRefFunction);

package/dist/cjs/buffering.d.ts

@@ -1,26 +0,0 @@
-import React from 'react';
-type Block = {
-    id: string;
-};
-type OnBufferingCallback = () => void;
-type OnResumeCallback = () => void;
-type ListenForBuffering = (callback: OnBufferingCallback) => {
-    remove: () => void;
-};
-type ListenForResume = (callback: OnResumeCallback) => {
-    remove: () => void;
-};
-type AddBlock = (block: Block) => {
-    unblock: () => void;
-};
-type BufferManager = {
-    addBlock: AddBlock;
-    listenForBuffering: ListenForBuffering;
-    listenForResume: ListenForResume;
-    buffering: React.MutableRefObject<boolean>;
-};
-export declare const BufferingContextReact: React.Context<BufferManager | null>;
-export declare const BufferingProvider: React.FC<{
-    children: React.ReactNode;
-}>;
-export {};

package/dist/cjs/buffering.js

@@ -1,75 +0,0 @@
-"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.BufferingProvider = exports.BufferingContextReact = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = __importStar(require("react"));
-const useBufferManager = () => {
-    const [blocks, setBlocks] = (0, react_1.useState)([]);
-    const [onBufferingCallbacks, setOnBufferingCallbacks] = (0, react_1.useState)([]);
-    const [onResumeCallbacks, setOnResumeCallbacks] = (0, react_1.useState)([]);
-    const buffering = (0, react_1.useRef)(false);
-    const addBlock = (0, react_1.useCallback)((block) => {
-        setBlocks((b) => [...b, block]);
-        return {
-            unblock: () => {
-                setBlocks((b) => b.filter((bx) => bx !== block));
-            },
-        };
-    }, []);
-    const listenForBuffering = (0, react_1.useCallback)((callback) => {
-        setOnBufferingCallbacks((c) => [...c, callback]);
-        return {
-            remove: () => {
-                setOnBufferingCallbacks((c) => c.filter((cb) => cb !== callback));
-            },
-        };
-    }, []);
-    const listenForResume = (0, react_1.useCallback)((callback) => {
-        setOnResumeCallbacks((c) => [...c, callback]);
-        return {
-            remove: () => {
-                setOnResumeCallbacks((c) => c.filter((cb) => cb !== callback));
-            },
-        };
-    }, []);
-    (0, react_1.useEffect)(() => {
-        if (blocks.length > 0) {
-            onBufferingCallbacks.forEach((c) => c());
-        }
-        else {
-            onResumeCallbacks.forEach((c) => c());
-        }
-    }, [blocks, onBufferingCallbacks, onResumeCallbacks]);
-    return (0, react_1.useMemo)(() => {
-        return { addBlock, listenForBuffering, listenForResume, buffering };
-    }, [addBlock, buffering, listenForBuffering, listenForResume]);
-};
-exports.BufferingContextReact = react_1.default.createContext(null);
-const BufferingProvider = ({ children }) => {
-    const bufferManager = useBufferManager();
-    return ((0, jsx_runtime_1.jsx)(exports.BufferingContextReact.Provider, { value: bufferManager, children: children }));
-};
-exports.BufferingProvider = BufferingProvider;

package/dist/cjs/use-buffer-state.d.ts

@@ -1,5 +0,0 @@
-export declare const useBufferState: () => {
-    delayPlayback: () => {
-        unblock: () => void;
-    };
-};

package/dist/cjs/use-buffer-state.js

@@ -1,28 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useBufferState = void 0;
-const react_1 = require("react");
-const buffering_1 = require("./buffering");
-const CanUseRemotionHooks_1 = require("./CanUseRemotionHooks");
-const useBufferState = () => {
-    const canUseRemotionHooks = (0, react_1.useContext)(CanUseRemotionHooks_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 buffer = (0, react_1.useContext)(buffering_1.BufferingContextReact);
-    if (!buffer) {
-        throw new Error('BufferingContextReact was unexpectedly not found. Most likely your Remotion versions are mismatching.');
-    }
-    return (0, react_1.useMemo)(() => ({
-        delayPlayback: () => {
-            const { unblock } = buffer.addBlock({
-                id: String(Math.random()),
-            });
-            return { unblock };
-        },
-    }), [buffer]);
-};
-exports.useBufferState = useBufferState;

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

@@ -1,5 +0,0 @@
-export declare const useBufferState: () => {
-    delayPlayback: () => {
-        unblock: () => void;
-    };
-};

package/dist/cjs/use-buffer.js

@@ -1,28 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useBufferState = void 0;
-const react_1 = require("react");
-const buffering_1 = require("./buffering");
-const CanUseRemotionHooks_1 = require("./CanUseRemotionHooks");
-const useBufferState = () => {
-    const canUseRemotionHooks = (0, react_1.useContext)(CanUseRemotionHooks_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 buffer = (0, react_1.useContext)(buffering_1.BufferingContextReact);
-    if (!buffer) {
-        throw new Error('BufferingContextReact was unexpectedly not found. Most likely your Remotion versions are mismatching.');
-    }
-    return (0, react_1.useMemo)(() => ({
-        delayPlayback: () => {
-            const { unblock } = buffer.addBlock({
-                id: String(Math.random()),
-            });
-            return { unblock };
-        },
-    }), [buffer]);
-};
-exports.useBufferState = useBufferState;

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

@@ -1,2 +0,0 @@
-import type React from 'react';
-export declare const useMediaBuffering: (element: React.RefObject<HTMLVideoElement | HTMLAudioElement>, shouldBuffer: boolean) => void;

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

@@ -1,41 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useMediaBuffering = void 0;
-const react_1 = require("react");
-const use_buffer_state_1 = require("./use-buffer-state");
-const useMediaBuffering = (element, shouldBuffer) => {
-    const buffer = (0, use_buffer_state_1.useBufferState)();
-    (0, react_1.useEffect)(() => {
-        let cleanup = () => undefined;
-        const { current } = element;
-        if (!current) {
-            return;
-        }
-        if (!shouldBuffer) {
-            return;
-        }
-        const onWaiting = () => {
-            const { unblock } = buffer.delayPlayback();
-            const onCanPlay = () => {
-                unblock();
-            };
-            current.addEventListener('canplay', onCanPlay, {
-                once: true,
-            });
-            cleanup = () => {
-                current.removeEventListener('canplay', onCanPlay);
-                return undefined;
-            };
-        };
-        if (current.readyState < current.HAVE_FUTURE_DATA) {
-            onWaiting();
-        }
-        else {
-            current.addEventListener('waiting', onWaiting);
-        }
-        return () => {
-            cleanup();
-        };
-    }, [buffer, element, shouldBuffer]);
-};
-exports.useMediaBuffering = useMediaBuffering;

package/dist/cjs/video/VideoForPreview.d.ts

@@ -1,11 +0,0 @@
-import React from 'react';
-import type { RemotionVideoProps } from './props.js';
-type VideoForPreviewProps = RemotionVideoProps & {
-    onlyWarnForMediaSeekingError: boolean;
-    onDuration: (src: string, durationInSeconds: number) => void;
-    pauseWhenBuffering: boolean;
-    _remotionInternalNativeLoopPassed: boolean;
-    _remotionInternalStack: string | null;
-};
-export declare const VideoForPreview: React.ForwardRefExoticComponent<Omit<VideoForPreviewProps, "ref"> & React.RefAttributes<HTMLVideoElement>>;
-export {};

package/dist/cjs/video/VideoForPreview.js

@@ -1,150 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.VideoForPreview = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const use_audio_frame_js_1 = require("../audio/use-audio-frame.js");
-const prefetch_js_1 = require("../prefetch.js");
-const SequenceContext_js_1 = require("../SequenceContext.js");
-const SequenceManager_js_1 = require("../SequenceManager.js");
-const use_media_buffering_js_1 = require("../use-media-buffering.js");
-const use_media_in_timeline_js_1 = require("../use-media-in-timeline.js");
-const use_media_playback_js_1 = require("../use-media-playback.js");
-const use_media_tag_volume_js_1 = require("../use-media-tag-volume.js");
-const use_sync_volume_with_media_tag_js_1 = require("../use-sync-volume-with-media-tag.js");
-const use_video_config_js_1 = require("../use-video-config.js");
-const volume_position_state_js_1 = require("../volume-position-state.js");
-const video_fragment_js_1 = require("./video-fragment.js");
-const VideoForDevelopmentRefForwardingFunction = (props, ref) => {
-    var _a, _b, _c;
-    const videoRef = (0, react_1.useRef)(null);
-    const volumePropFrame = (0, use_audio_frame_js_1.useFrameForVolumeProp)();
-    const { fps, durationInFrames } = (0, use_video_config_js_1.useVideoConfig)();
-    const parentSequence = (0, react_1.useContext)(SequenceContext_js_1.SequenceContext);
-    const { hidden } = (0, react_1.useContext)(SequenceManager_js_1.SequenceVisibilityToggleContext);
-    const [timelineId] = (0, react_1.useState)(() => String(Math.random()));
-    const isSequenceHidden = (_a = hidden[timelineId]) !== null && _a !== void 0 ? _a : false;
-    const { volume, muted, playbackRate, onlyWarnForMediaSeekingError, src, onDuration, 
-    // @ts-expect-error
-    acceptableTimeShift, acceptableTimeShiftInSeconds, toneFrequency, name, _remotionInternalNativeLoopPassed, _remotionInternalStack, style, pauseWhenBuffering, ...nativeProps } = props;
-    if (typeof acceptableTimeShift !== 'undefined') {
-        throw new Error('acceptableTimeShift has been removed. Use acceptableTimeShiftInSeconds instead.');
-    }
-    const actualVolume = (0, use_media_tag_volume_js_1.useMediaTagVolume)(videoRef);
-    const [mediaVolume] = (0, volume_position_state_js_1.useMediaVolumeState)();
-    const [mediaMuted] = (0, volume_position_state_js_1.useMediaMutedState)();
-    (0, use_media_in_timeline_js_1.useMediaInTimeline)({
-        mediaRef: videoRef,
-        volume,
-        mediaVolume,
-        mediaType: 'video',
-        src,
-        playbackRate: (_b = props.playbackRate) !== null && _b !== void 0 ? _b : 1,
-        displayName: name !== null && name !== void 0 ? name : null,
-        id: timelineId,
-        stack: props._remotionInternalStack,
-    });
-    (0, use_sync_volume_with_media_tag_js_1.useSyncVolumeWithMediaTag)({
-        volumePropFrame,
-        actualVolume,
-        volume,
-        mediaVolume,
-        mediaRef: videoRef,
-    });
-    (0, use_media_playback_js_1.useMediaPlayback)({
-        mediaRef: videoRef,
-        src,
-        mediaType: 'video',
-        playbackRate: (_c = props.playbackRate) !== null && _c !== void 0 ? _c : 1,
-        onlyWarnForMediaSeekingError,
-        acceptableTimeshift: acceptableTimeShiftInSeconds !== null && acceptableTimeShiftInSeconds !== void 0 ? acceptableTimeShiftInSeconds : use_media_playback_js_1.DEFAULT_ACCEPTABLE_TIMESHIFT,
-    });
-    (0, use_media_buffering_js_1.useMediaBuffering)(videoRef, pauseWhenBuffering);
-    const actualFrom = parentSequence
-        ? parentSequence.relativeFrom + parentSequence.cumulatedFrom
-        : 0;
-    const duration = parentSequence
-        ? Math.min(parentSequence.durationInFrames, durationInFrames)
-        : durationInFrames;
-    const actualSrc = (0, video_fragment_js_1.useAppendVideoFragment)({
-        actualSrc: (0, prefetch_js_1.usePreload)(src),
-        actualFrom,
-        duration,
-        fps,
-    });
-    (0, react_1.useImperativeHandle)(ref, () => {
-        return videoRef.current;
-    }, []);
-    (0, react_1.useEffect)(() => {
-        const { current } = videoRef;
-        if (!current) {
-            return;
-        }
-        const errorHandler = () => {
-            var _a;
-            if (current === null || current === void 0 ? void 0 : current.error) {
-                // eslint-disable-next-line no-console
-                console.error('Error occurred in video', current === null || current === void 0 ? void 0 : current.error);
-                // If user is handling the error, we don't cause an unhandled exception
-                if (props.onError) {
-                    return;
-                }
-                throw new Error(`The browser threw an error while playing the video ${src}: Code ${current.error.code} - ${(_a = current === null || current === void 0 ? void 0 : current.error) === null || _a === void 0 ? void 0 : _a.message}. See https://remotion.dev/docs/media-playback-error for help. Pass an onError() prop to handle the error.`);
-            }
-            else {
-                throw new Error('The browser threw an error');
-            }
-        };
-        current.addEventListener('error', errorHandler, { once: true });
-        return () => {
-            current.removeEventListener('error', errorHandler);
-        };
-    }, [props.onError, src]);
-    const currentOnDurationCallback = (0, react_1.useRef)();
-    currentOnDurationCallback.current = onDuration;
-    (0, react_1.useEffect)(() => {
-        var _a;
-        const { current } = videoRef;
-        if (!current) {
-            return;
-        }
-        if (current.duration) {
-            (_a = currentOnDurationCallback.current) === null || _a === void 0 ? void 0 : _a.call(currentOnDurationCallback, src, current.duration);
-            return;
-        }
-        const onLoadedMetadata = () => {
-            var _a;
-            (_a = currentOnDurationCallback.current) === null || _a === void 0 ? void 0 : _a.call(currentOnDurationCallback, src, current.duration);
-        };
-        current.addEventListener('loadedmetadata', onLoadedMetadata);
-        return () => {
-            current.removeEventListener('loadedmetadata', onLoadedMetadata);
-        };
-    }, [src]);
-    (0, react_1.useEffect)(() => {
-        const { current } = videoRef;
-        if (!current) {
-            return;
-        }
-        // Without this, on iOS Safari, the video cannot be seeked.
-        // if a seek is triggered before `loadedmetadata` is fired,
-        // the video will not seek, even if `loadedmetadata` is fired afterwards.
-        // Also, this needs to happen in a useEffect, because otherwise
-        // the SSR props will be applied.
-        if ((0, video_fragment_js_1.isIosSafari)()) {
-            current.preload = 'metadata';
-        }
-        else {
-            current.preload = 'auto';
-        }
-    }, []);
-    const actualStyle = (0, react_1.useMemo)(() => {
-        var _a;
-        return {
-            ...style,
-            opacity: isSequenceHidden ? 0 : (_a = style === null || style === void 0 ? void 0 : style.opacity) !== null && _a !== void 0 ? _a : 1,
-        };
-    }, [isSequenceHidden, style]);
-    return ((0, jsx_runtime_1.jsx)("video", { ref: videoRef, muted: muted || mediaMuted, playsInline: true, src: actualSrc, loop: _remotionInternalNativeLoopPassed, style: actualStyle, ...nativeProps }));
-};
-exports.VideoForPreview = (0, react_1.forwardRef)(VideoForDevelopmentRefForwardingFunction);