remotion 4.0.135 → 4.0.137

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

@@ -0,0 +1,17 @@
+import type { ForwardRefExoticComponent, RefAttributes } from 'react';
+import React from 'react';
+export declare const AudioForDevelopment: ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.AudioHTMLAttributes<HTMLAudioElement>, HTMLAudioElement>, "nonce" | "onEnded" | "onResize" | "onResizeCapture" | "autoPlay" | "controls"> & {
+    name?: string | undefined;
+    volume?: import("../volume-prop.js").VolumeProp | undefined;
+    playbackRate?: number | undefined;
+    acceptableTimeShiftInSeconds?: number | undefined;
+    allowAmplificationDuringRender?: boolean | undefined;
+    _remotionInternalNeedsDurationCalculation?: boolean | undefined;
+    _remotionInternalNativeLoopPassed?: boolean | undefined;
+    toneFrequency?: number | undefined;
+} & {
+    shouldPreMountAudioTags: boolean;
+    onDuration: (src: string, durationInSeconds: number) => void;
+    _remotionInternalNativeLoopPassed: boolean;
+    _remotionInternalStack: string | null;
+} & RefAttributes<HTMLAudioElement>>;

package/dist/cjs/audio/AudioForDevelopment.js

@@ -0,0 +1,117 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AudioForDevelopment = 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_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, ...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, 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.AudioForDevelopment = (0, react_1.forwardRef)(AudioForDevelopmentForwardRefFunction);

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.135";
+export declare const VERSION = "4.0.137";

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.135';
+exports.VERSION = '4.0.137';

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

@@ -0,0 +1,15 @@
+import type { ForwardRefExoticComponent, RefAttributes } from 'react';
+import React from 'react';
+export declare const VideoForDevelopment: ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.VideoHTMLAttributes<HTMLVideoElement>, HTMLVideoElement>, "nonce" | "onEnded" | "autoPlay" | "controls"> & {
+    name?: string | undefined;
+    volume?: import("../volume-prop.js").VolumeProp | undefined;
+    playbackRate?: number | undefined;
+    acceptableTimeShiftInSeconds?: number | undefined;
+    allowAmplificationDuringRender?: boolean | undefined;
+    toneFrequency?: number | undefined;
+} & {
+    onlyWarnForMediaSeekingError: boolean;
+    onDuration: (src: string, durationInSeconds: number) => void;
+    _remotionInternalNativeLoopPassed: boolean;
+    _remotionInternalStack: string | null;
+} & RefAttributes<HTMLVideoElement>>;

package/dist/cjs/video/VideoForDevelopment.js

@@ -0,0 +1,149 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VideoForDevelopment = 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_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, ...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,
+    });
+    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 }));
+};
+// Copy types from forwardRef but not necessary to remove ref
+exports.VideoForDevelopment = (0, react_1.forwardRef)(VideoForDevelopmentRefForwardingFunction);

package/dist/esm/index.mjs

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

package/dist/esm/version.mjs

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

package/package.json

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