remotion - npm Package Compare versions

Comparing version 1.6.0-alpha.656a496e to 1.6.0-alpha.6bed117c

dist/audio/Audio.js

@@ -16,3 +16,3 @@ "use strict";
         const endAtFrameNo = endAt !== null && endAt !== void 0 ? endAt : Infinity;
-        return (jsx_runtime_1.jsx(sequencing_1.Sequence, Object.assign({ from: 0 - startAtFrameNo, showInTimeline: false, durationInFrames: endAtFrameNo }, { children: jsx_runtime_1.jsx(exports.Audio, Object.assign({}, otherProps), void 0) }), void 0));
+        return (jsx_runtime_1.jsx(sequencing_1.Sequence, Object.assign({ layout: "none", from: 0 - startAtFrameNo, showInTimeline: false, durationInFrames: endAtFrameNo }, { children: jsx_runtime_1.jsx(exports.Audio, Object.assign({}, otherProps), void 0) }), void 0));
     }
@@ -19,0 +19,0 @@ validate_media_props_1.validateMediaProps(props, 'Audio');

dist/audio/AudioForDevelopment.js

@@ -6,153 +6,29 @@ "use strict";
 const react_1 = require("react");
-const CompositionManager_1 = require("../CompositionManager");
-const get_asset_file_name_1 = require("../get-asset-file-name");
-const is_approximately_the_same_1 = require("../is-approximately-the-same");
-const nonce_1 = require("../nonce");
-const sequencing_1 = require("../sequencing");
-const timeline_position_state_1 = require("../timeline-position-state");
-const use_frame_1 = require("../use-frame");
-const use_unsafe_video_config_1 = require("../use-unsafe-video-config");
-const volume_prop_1 = require("../volume-prop");
+const use_media_in_timeline_1 = require("../use-media-in-timeline");
+const use_media_playback_1 = require("../use-media-playback");
+const use_media_tag_volume_1 = require("../use-media-tag-volume");
+const use_sync_volume_with_media_tag_1 = require("../use-sync-volume-with-media-tag");
 const use_audio_frame_1 = require("./use-audio-frame");
 const AudioForDevelopment = (props) => {
     const audioRef = react_1.useRef(null);
-    const frame = use_frame_1.useCurrentFrame();
-    const absoluteFrame = use_frame_1.useAbsoluteCurrentFrame();
-    const [actualVolume, setActualVolume] = react_1.useState(1);
-    const nonce = nonce_1.useNonce();
-    const audioFrame = use_audio_frame_1.useAudioFrame();
-    const videoConfig = use_unsafe_video_config_1.useUnsafeVideoConfig();
-    const [playing] = timeline_position_state_1.usePlayingState();
-    const { rootId } = react_1.useContext(timeline_position_state_1.TimelineContext);
-    const parentSequence = react_1.useContext(sequencing_1.SequenceContext);
-    const actualFrom = parentSequence
-        ? parentSequence.relativeFrom + parentSequence.cumulatedFrom
-        : 0;
-    const startsAt = use_audio_frame_1.useAudioStartsAt();
-    const { registerSequence, unregisterSequence } = react_1.useContext(CompositionManager_1.CompositionManager);
-    const [id] = react_1.useState(() => String(Math.random()));
+    const volumePropFrame = use_audio_frame_1.useFrameForVolumeProp();
     const { volume, ...nativeProps } = props;
-    react_1.useEffect(() => {
-        const ref = audioRef.current;
-        if (!ref) {
-            return;
-        }
-        if (ref.volume !== actualVolume) {
-            setActualVolume(ref.volume);
-            return;
-        }
-        const onChange = () => {
-            setActualVolume(ref.volume);
-        };
-        ref.addEventListener('volumechange', onChange);
-        return () => ref.removeEventListener('volumechange', onChange);
-    }, [actualVolume]);
-    react_1.useEffect(() => {
-        const userPreferredVolume = volume_prop_1.evaluateVolume({
-            frame: audioFrame,
-            volume,
-        });
-        if (!is_approximately_the_same_1.isApproximatelyTheSame(userPreferredVolume, actualVolume) &&
-            audioRef.current) {
-            audioRef.current.volume = userPreferredVolume;
-        }
-    }, [actualVolume, audioFrame, frame, props.volume, volume]);
-    react_1.useEffect(() => {
-        var _a, _b;
-        if (playing) {
-            (_a = audioRef.current) === null || _a === void 0 ? void 0 : _a.play();
-        }
-        else {
-            (_b = audioRef.current) === null || _b === void 0 ? void 0 : _b.pause();
-        }
-    }, [playing]);
-    const duration = (() => {
-        if (!videoConfig) {
-            return 0;
-        }
-        return parentSequence
-            ? Math.min(parentSequence.durationInFrames, videoConfig.durationInFrames)
-            : videoConfig.durationInFrames;
-    })();
-    const volumes = react_1.useMemo(() => {
-        var _a;
-        if (typeof props.volume === 'number') {
-            return props.volume;
-        }
-        const negativeShift = Math.min(0, (_a = parentSequence === null || parentSequence === void 0 ? void 0 : parentSequence.parentFrom) !== null && _a !== void 0 ? _a : 0);
-        return new Array(duration + startsAt + negativeShift)
-            .fill(true)
-            .map((_, i) => {
-            return volume_prop_1.evaluateVolume({
-                frame: i - negativeShift,
-                volume,
-            });
-        })
-            .join(',');
-    }, [duration, parentSequence, props.volume, startsAt, volume]);
-    react_1.useEffect(() => {
-        var _a;
-        if (!audioRef.current) {
-            return;
-        }
-        if (!videoConfig) {
-            return;
-        }
-        if (!props.src) {
-            throw new Error('No src passed');
-        }
-        registerSequence({
-            type: 'audio',
-            src: props.src,
-            id,
-            // TODO: Cap to audio duration
-            duration,
-            from: 0,
-            parent: (_a = parentSequence === null || parentSequence === void 0 ? void 0 : parentSequence.id) !== null && _a !== void 0 ? _a : null,
-            displayName: get_asset_file_name_1.getAssetFileName(props.src),
-            rootId,
-            volume: volumes,
-            showInTimeline: true,
-            nonce,
-        });
-        return () => unregisterSequence(id);
-    }, [
-        actualFrom,
-        duration,
-        id,
-        parentSequence,
-        props.src,
-        registerSequence,
-        rootId,
-        unregisterSequence,
-        videoConfig,
-        volumes,
-        nonce,
-    ]);
-    react_1.useEffect(() => {
-        if (!audioRef.current) {
-            throw new Error('No audio ref found');
-        }
-        if (!videoConfig) {
-            throw new Error('No video config found. <Audio> must be placed inside a composition.');
-        }
-        const shouldBeTime = frame / videoConfig.fps;
-        const isTime = audioRef.current.currentTime;
-        const timeShift = Math.abs(shouldBeTime - isTime);
-        if (timeShift > 0.2 && !audioRef.current.ended) {
-            console.log('Time has shifted by', timeShift, 'sec. Fixing...');
-            // If scrubbing around, adjust timing
-            // or if time shift is bigger than 0.2sec
-            audioRef.current.currentTime = shouldBeTime;
-        }
-        if (!playing || absoluteFrame === 0) {
-            // If scrubbing around, adjust timing
-            // or if time shift is bigger than 0.2sec
-            audioRef.current.currentTime = shouldBeTime;
-        }
-        if (audioRef.current.paused && !audioRef.current.ended && playing) {
-            // Play audio
-            audioRef.current.play();
-        }
-    }, [absoluteFrame, frame, playing, videoConfig]);
+    const actualVolume = use_media_tag_volume_1.useMediaTagVolume(audioRef);
+    use_sync_volume_with_media_tag_1.useSyncVolumeWithMediaTag({
+        volumePropFrame,
+        actualVolume,
+        volume,
+        mediaRef: audioRef,
+    });
+    use_media_in_timeline_1.useMediaInTimeline({
+        volume,
+        mediaRef: audioRef,
+        src: nativeProps.src,
+        mediaType: 'audio',
+    });
+    use_media_playback_1.useMediaPlayback({
+        mediaRef: audioRef,
+        src: nativeProps.src,
+        mediaType: 'audio',
+    });
     return jsx_runtime_1.jsx("audio", Object.assign({ ref: audioRef }, nativeProps), void 0);
@@ -159,0 +35,0 @@ };

dist/audio/AudioForRendering.js

@@ -14,3 +14,3 @@ "use strict";
     const absoluteFrame = use_frame_1.useAbsoluteCurrentFrame();
-    const audioFrame = use_audio_frame_1.useAudioFrame();
+    const volumePropFrame = use_audio_frame_1.useFrameForVolumeProp();
     const frame = use_frame_1.useCurrentFrame();
@@ -27,3 +27,3 @@ const sequenceContext = react_1.useContext(sequencing_1.SequenceContext);
         volume: props.volume,
-        frame: audioFrame,
+        frame: volumePropFrame,
     });
@@ -55,3 +55,3 @@ react_1.useEffect(() => {
         volume,
-        audioFrame,
+        volumePropFrame,
         frame,
@@ -58,0 +58,0 @@ ]);

dist/audio/use-audio-frame.d.ts

@@ -1,3 +0,7 @@
-export declare const useAudioStartsAt: () => number;
-export declare const useAudioFrame: () => number;
+export declare const useMediaStartsAt: () => number;
+/**
+ * When passing a function as the prop for `volume`,
+ * we calculate the way more intuitive value for currentFrame
+ */
+export declare const useFrameForVolumeProp: () => number;
 //# sourceMappingURL=use-audio-frame.d.ts.map

dist/audio/use-audio-frame.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useAudioFrame = exports.useAudioStartsAt = void 0;
+exports.useFrameForVolumeProp = exports.useMediaStartsAt = void 0;
 const react_1 = require("react");
 const sequencing_1 = require("../sequencing");
 const use_frame_1 = require("../use-frame");
-const useAudioStartsAt = () => {
+const useMediaStartsAt = () => {
     var _a;
@@ -13,9 +13,13 @@ const parentSequence = react_1.useContext(sequencing_1.SequenceContext);
 };
-exports.useAudioStartsAt = useAudioStartsAt;
-const useAudioFrame = () => {
+exports.useMediaStartsAt = useMediaStartsAt;
+/**
+ * When passing a function as the prop for `volume`,
+ * we calculate the way more intuitive value for currentFrame
+ */
+const useFrameForVolumeProp = () => {
     const frame = use_frame_1.useCurrentFrame();
-    const startsAt = exports.useAudioStartsAt();
+    const startsAt = exports.useMediaStartsAt();
     return frame + startsAt;
 };
-exports.useAudioFrame = useAudioFrame;
+exports.useFrameForVolumeProp = useFrameForVolumeProp;
 //# sourceMappingURL=use-audio-frame.js.map

dist/CompositionManager.d.ts

@@ -19,5 +19,10 @@ /// <reference types="react" />
     volume: string | number;
+    doesVolumeChange: boolean;
+    startMediaFrom: number;
 } | {
     type: 'video';
     src: string;
+    volume: string | number;
+    startMediaFrom: number;
+    doesVolumeChange: boolean;
 };
@@ -24,0 +29,0 @@ export declare type TSequence = {

dist/config/image-format.d.ts

@@ -5,5 +5,5 @@ import { PixelFormat } from '.';
 export declare const setImageFormat: (format: ImageFormat) => void;
-export declare const getUserPreferredImageFormat: () => "none" | "png" | "jpeg" | undefined;
+export declare const getUserPreferredImageFormat: () => "png" | "jpeg" | "none" | undefined;
 export declare const validateSelectedPixelFormatAndImageFormatCombination: (pixelFormat: PixelFormat, imageFormat: ImageFormat) => void;
 export {};
 //# sourceMappingURL=image-format.d.ts.map

dist/config/index.d.ts

@@ -46,3 +46,3 @@ import { Browser } from './browser';
          */
-        readonly setImageFormat: (format: "none" | "png" | "jpeg") => void;
+        readonly setImageFormat: (format: "png" | "jpeg" | "none") => void;
         /**
@@ -49,0 +49,0 @@ * Render only a subset of a video.

dist/config/input-props.d.ts

@@ -0,2 +1,3 @@
+export declare const INPUT_PROPS_KEY = "remotion.inputProps";
 export declare const getInputProps: () => any;
 //# sourceMappingURL=input-props.d.ts.map

dist/config/input-props.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getInputProps = void 0;
+exports.getInputProps = exports.INPUT_PROPS_KEY = void 0;
+exports.INPUT_PROPS_KEY = 'remotion.inputProps';
 const getInputProps = () => {
     if (process.env.NODE_ENV === 'production') {
-        const param = new URLSearchParams(window.location.search).get('props');
+        const param = localStorage.getItem(exports.INPUT_PROPS_KEY);
         if (!param) {
             return {};
         }
-        const parsed = JSON.parse(decodeURIComponent(param));
+        const parsed = JSON.parse(param);
         return parsed;
@@ -12,0 +13,0 @@ }

dist/feature-flags.d.ts

 export declare const FEATURE_FLAG_FIREFOX_SUPPORT = false;
-export declare const FEATURE_FLAG_V2_BREAKING_CHANGES = true;
 //# sourceMappingURL=feature-flags.d.ts.map

dist/feature-flags.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.FEATURE_FLAG_V2_BREAKING_CHANGES = exports.FEATURE_FLAG_FIREFOX_SUPPORT = void 0;
+exports.FEATURE_FLAG_FIREFOX_SUPPORT = void 0;
 // There is no Firefox support yet, the waitForFunction method
@@ -8,7 +8,2 @@ // does not yet work and downloading has a bug.
 exports.FEATURE_FLAG_FIREFOX_SUPPORT = false;
-// Disable this to enter V1 mode and disable breaking changes
-// Needed if making future 1.x releases
-// See here https://github.com/JonnyBurger/remotion/issues/185 what
-// the breaking changes are
-exports.FEATURE_FLAG_V2_BREAKING_CHANGES = true;
 //# sourceMappingURL=feature-flags.js.map

dist/IFrame.d.ts

 import React from 'react';
-export declare const IFrame: React.ForwardRefExoticComponent<Pick<React.DetailedHTMLProps<React.IframeHTMLAttributes<HTMLIFrameElement>, HTMLIFrameElement>, "style" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "height" | "width" | "key" | "allow" | "allowFullScreen" | "allowTransparency" | "frameBorder" | "loading" | "marginHeight" | "marginWidth" | "name" | "referrerPolicy" | "sandbox" | "scrolling" | "seamless" | "src" | "srcDoc"> & React.RefAttributes<HTMLIFrameElement>>;
+export declare const IFrame: React.ForwardRefExoticComponent<Pick<React.DetailedHTMLProps<React.IframeHTMLAttributes<HTMLIFrameElement>, HTMLIFrameElement>, "id" | "height" | "width" | "children" | "key" | "src" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "name" | "allow" | "allowFullScreen" | "allowTransparency" | "frameBorder" | "loading" | "marginHeight" | "marginWidth" | "referrerPolicy" | "sandbox" | "scrolling" | "seamless" | "srcDoc"> & React.RefAttributes<HTMLIFrameElement>>;
 //# sourceMappingURL=IFrame.d.ts.map

dist/Img.d.ts

 import React from 'react';
-export declare const Img: React.ForwardRefExoticComponent<Pick<React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "style" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "height" | "width" | "key" | "loading" | "referrerPolicy" | "src" | "alt" | "crossOrigin" | "decoding" | "sizes" | "srcSet" | "useMap"> & React.RefAttributes<HTMLImageElement>>;
+export declare const Img: React.ForwardRefExoticComponent<Pick<React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "id" | "height" | "width" | "children" | "key" | "crossOrigin" | "src" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "loading" | "referrerPolicy" | "alt" | "decoding" | "sizes" | "srcSet" | "useMap"> & React.RefAttributes<HTMLImageElement>>;
 //# sourceMappingURL=Img.d.ts.map

dist/internals.d.ts

@@ -17,3 +17,3 @@ /// <reference types="react" />
     getBrowserExecutable: () => string | null;
-    getCompositionName: () => string;
+    getCompositionName: () => string | null;
     getIsEvaluation: () => boolean;
@@ -38,3 +38,2 @@ getPixelFormat: () => "yuv420p" | "yuva420p" | "yuv422p" | "yuv444p" | "yuv420p10le" | "yuv422p10le" | "yuv444p10le";
     DEFAULT_WEBPACK_CACHE_ENABLED: boolean;
-    FEATURE_FLAG_V2_BREAKING_CHANGES: boolean;
     getBrowser: () => "chrome" | "firefox" | null;
@@ -44,5 +43,5 @@ DEFAULT_BROWSER: import("./config/browser").Browser;
     getActualCrf: (codec: "h264" | "h265" | "vp8" | "vp9" | "mp3" | "aac" | "wav") => number;
-    setFrameRangeFromCli: (newFrameRange: import("react").ReactText) => void;
-    getUserPreferredImageFormat: () => "none" | "png" | "jpeg" | undefined;
-    validateSelectedPixelFormatAndImageFormatCombination: (pixelFormat: "yuv420p" | "yuva420p" | "yuv422p" | "yuv444p" | "yuv420p10le" | "yuv422p10le" | "yuv444p10le", imageFormat: "none" | "png" | "jpeg") => void;
+    setFrameRangeFromCli: (newFrameRange: string | number) => void;
+    getUserPreferredImageFormat: () => "png" | "jpeg" | "none" | undefined;
+    validateSelectedPixelFormatAndImageFormatCombination: (pixelFormat: "yuv420p" | "yuva420p" | "yuv422p" | "yuv444p" | "yuv420p10le" | "yuv422p10le" | "yuv444p10le", imageFormat: "png" | "jpeg" | "none") => void;
     validateSelectedPixelFormatAndCodecCombination: (pixelFormat: "yuv420p" | "yuva420p" | "yuv422p" | "yuv444p" | "yuv420p10le" | "yuv422p10le" | "yuv444p10le", codec: "h264" | "h265" | "vp8" | "vp9" | "mp3" | "aac" | "wav") => void;
@@ -53,4 +52,5 @@ validateFrameRange: (frameRange: number | [number, number] | null) => void;
     isAudioCodec: (codec: import("./config/codec").CodecOrUndefined) => boolean;
+    INPUT_PROPS_KEY: string;
 };
 export type { TComposition, Timeline, TCompMetadata, TSequence, WebpackOverrideFn, TAsset, RenderAssetInfo, TimelineContextValue, };
 //# sourceMappingURL=internals.d.ts.map

dist/internals.js

@@ -32,2 +32,3 @@ "use strict";
 const image_sequence_1 = require("./config/image-sequence");
+const input_props_1 = require("./config/input-props");
 const override_webpack_1 = require("./config/override-webpack");
@@ -74,3 +75,2 @@ const overwrite_1 = require("./config/overwrite");
     DEFAULT_WEBPACK_CACHE_ENABLED: webpack_caching_1.DEFAULT_WEBPACK_CACHE_ENABLED,
-    FEATURE_FLAG_V2_BREAKING_CHANGES: feature_flags_1.FEATURE_FLAG_V2_BREAKING_CHANGES,
     getBrowser: browser_1.getBrowser,
@@ -88,3 +88,4 @@ DEFAULT_BROWSER: browser_1.DEFAULT_BROWSER,
     isAudioCodec: is_audio_codec_1.isAudioCodec,
+    INPUT_PROPS_KEY: input_props_1.INPUT_PROPS_KEY,
 };
 //# sourceMappingURL=internals.js.map

dist/is-remote-asset.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.isRemoteAsset = void 0;
-const isRemoteAsset = (asset) => !asset.startsWith(window.location.origin);
+const isRemoteAsset = (asset) => !asset.startsWith(window.location.origin) && !asset.startsWith('data');
 exports.isRemoteAsset = isRemoteAsset;
 //# sourceMappingURL=is-remote-asset.js.map

dist/register-root.d.ts

@@ -7,4 +7,4 @@ import React from 'react';
 export declare const removeStaticComposition: (id: string) => void;
-export declare const getCompositionName: () => string;
+export declare const getCompositionName: () => string | null;
 export declare const getIsEvaluation: () => boolean;
 //# sourceMappingURL=register-root.d.ts.map

dist/register-root.js

@@ -34,3 +34,3 @@ "use strict";
     }
-    throw new Error('No comp name specified in URL');
+    return null;
 };
@@ -37,0 +37,0 @@ exports.getCompositionName = getCompositionName;

dist/sequencing/index.js

@@ -7,3 +7,2 @@ "use strict";
 const CompositionManager_1 = require("../CompositionManager");
-const feature_flags_1 = require("../feature-flags");
 const get_timeline_clip_name_1 = require("../get-timeline-clip-name");
@@ -98,6 +97,3 @@ const nonce_1 = require("../nonce");
     const endThreshold = (() => {
-        if (feature_flags_1.FEATURE_FLAG_V2_BREAKING_CHANGES) {
-            return actualFrom + durationInFrames - 1;
-        }
-        return actualFrom + durationInFrames;
+        return actualFrom + durationInFrames - 1;
     })();
@@ -104,0 +100,0 @@ const content = absoluteFrame < actualFrom

dist/video/get-current-time.js

@@ -6,3 +6,3 @@ "use strict";
     if (src.endsWith('mp4')) {
-        // In Chrome, if 30fps, the first frame is still displayed at 0.033333
+        // In Chrome, for MP4s, if 30fps, the first frame is still displayed at 0.033333
         // even though after that it increases by 0.033333333 each.
@@ -12,7 +12,12 @@ // So frame = 0 in Remotion is like frame = 1 for the browser
     }
-    const msPerFrame = 1000 / fps;
-    const msShift = msPerFrame / 2;
-    return (frame * msPerFrame + msShift) / 1000;
+    if (src.endsWith('webm')) {
+        // For WebM videos, we need to add a little bit of shift to get the right frame.
+        const msPerFrame = 1000 / fps;
+        const msShift = msPerFrame / 2;
+        return (frame * msPerFrame + msShift) / 1000;
+    }
+    // For audio, we don't do any shift correction
+    return frame / fps;
 };
 exports.getCurrentTime = getCurrentTime;
 //# sourceMappingURL=get-current-time.js.map

dist/video/Video.js

@@ -16,3 +16,3 @@ "use strict";
         const endAtFrameNo = endAt !== null && endAt !== void 0 ? endAt : Infinity;
-        return (jsx_runtime_1.jsx(sequencing_1.Sequence, Object.assign({ showInTimeline: false, from: 0 - startAtFrameNo, durationInFrames: endAtFrameNo }, { children: jsx_runtime_1.jsx(exports.Video, Object.assign({}, otherProps), void 0) }), void 0));
+        return (jsx_runtime_1.jsx(sequencing_1.Sequence, Object.assign({ layout: "none", from: 0 - startAtFrameNo, showInTimeline: false, durationInFrames: endAtFrameNo }, { children: jsx_runtime_1.jsx(exports.Video, Object.assign({}, otherProps), void 0) }), void 0));
     }
@@ -19,0 +19,0 @@ validate_media_props_1.validateMediaProps(props, 'Video');

dist/video/VideoForDevelopment.js

@@ -6,77 +6,29 @@ "use strict";
 const react_1 = require("react");
-const feature_flags_1 = require("../feature-flags");
-const is_approximately_the_same_1 = require("../is-approximately-the-same");
-const timeline_position_state_1 = require("../timeline-position-state");
-const use_frame_1 = require("../use-frame");
-const use_unsafe_video_config_1 = require("../use-unsafe-video-config");
-const volume_prop_1 = require("../volume-prop");
-const get_current_time_1 = require("./get-current-time");
+const use_audio_frame_1 = require("../audio/use-audio-frame");
+const use_media_in_timeline_1 = require("../use-media-in-timeline");
+const use_media_playback_1 = require("../use-media-playback");
+const use_media_tag_volume_1 = require("../use-media-tag-volume");
+const use_sync_volume_with_media_tag_1 = require("../use-sync-volume-with-media-tag");
 const VideoForDevelopment = (props) => {
     const videoRef = react_1.useRef(null);
-    const currentFrame = use_frame_1.useCurrentFrame();
-    const absoluteFrame = use_frame_1.useAbsoluteCurrentFrame();
-    const videoConfig = use_unsafe_video_config_1.useUnsafeVideoConfig();
-    const [playing] = timeline_position_state_1.usePlayingState();
-    const [actualVolume, setActualVolume] = react_1.useState(1);
+    const volumePropFrame = use_audio_frame_1.useFrameForVolumeProp();
     const { volume, ...nativeProps } = props;
-    // TODO: Register as an asset
-    react_1.useEffect(() => {
-        var _a, _b, _c;
-        if (playing && !((_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.ended)) {
-            (_b = videoRef.current) === null || _b === void 0 ? void 0 : _b.play();
-        }
-        else {
-            (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.pause();
-        }
-    }, [playing]);
-    react_1.useEffect(() => {
-        const ref = videoRef.current;
-        if (!ref) {
-            return;
-        }
-        if (ref.volume !== actualVolume) {
-            setActualVolume(ref.volume);
-            return;
-        }
-        const onChange = () => {
-            setActualVolume(ref.volume);
-        };
-        ref.addEventListener('volumechange', onChange);
-        return () => ref.removeEventListener('volumechange', onChange);
-    }, [actualVolume]);
-    react_1.useEffect(() => {
-        const userPreferredVolume = volume_prop_1.evaluateVolume({
-            frame: currentFrame,
-            volume,
-        });
-        if (!is_approximately_the_same_1.isApproximatelyTheSame(userPreferredVolume, actualVolume) &&
-            videoRef.current) {
-            videoRef.current.volume = userPreferredVolume;
-        }
-    }, [actualVolume, currentFrame, props.volume, volume]);
-    react_1.useEffect(() => {
-        if (!videoRef.current) {
-            throw new Error('No video ref found');
-        }
-        if (!videoConfig) {
-            throw new Error('No video config found. <Video> must be placed inside a composition.');
-        }
-        const currentTime = (() => {
-            if (feature_flags_1.FEATURE_FLAG_V2_BREAKING_CHANGES) {
-                return get_current_time_1.getCurrentTime({
-                    fps: videoConfig.fps,
-                    frame: currentFrame,
-                    src: props.src,
-                });
-            }
-            return currentFrame / (1000 / videoConfig.fps);
-        })();
-        if (!playing || absoluteFrame === 0) {
-            videoRef.current.currentTime = currentTime;
-        }
-        if (videoRef.current.paused && !videoRef.current.ended && playing) {
-            videoRef.current.currentTime = currentTime;
-            videoRef.current.play();
-        }
-    }, [currentFrame, playing, videoConfig, absoluteFrame, props.src]);
+    const actualVolume = use_media_tag_volume_1.useMediaTagVolume(videoRef);
+    use_media_in_timeline_1.useMediaInTimeline({
+        mediaRef: videoRef,
+        volume,
+        mediaType: 'video',
+        src: nativeProps.src,
+    });
+    use_sync_volume_with_media_tag_1.useSyncVolumeWithMediaTag({
+        volumePropFrame,
+        actualVolume,
+        volume,
+        mediaRef: videoRef,
+    });
+    use_media_playback_1.useMediaPlayback({
+        mediaRef: videoRef,
+        src: nativeProps.src,
+        mediaType: 'video',
+    });
     return jsx_runtime_1.jsx("video", Object.assign({ ref: videoRef }, nativeProps), void 0);
@@ -83,0 +35,0 @@ };

dist/video/VideoForRendering.js

@@ -8,3 +8,2 @@ "use strict";
 const CompositionManager_1 = require("../CompositionManager");
-const feature_flags_1 = require("../feature-flags");
 const is_approximately_the_same_1 = require("../is-approximately-the-same");
@@ -22,3 +21,3 @@ const is_remote_asset_1 = require("../is-remote-asset");
     const frame = use_frame_1.useCurrentFrame();
-    const audioFrame = use_audio_frame_1.useAudioFrame();
+    const volumePropsFrame = use_audio_frame_1.useFrameForVolumeProp();
     const videoConfig = use_unsafe_video_config_1.useUnsafeVideoConfig();
@@ -45,3 +44,3 @@ const videoRef = react_1.useRef(null);
         volume: volumeProp,
-        frame: audioFrame,
+        frame: volumePropsFrame,
     });
@@ -80,10 +79,7 @@ react_1.useEffect(() => {
         const currentTime = (() => {
-            if (feature_flags_1.FEATURE_FLAG_V2_BREAKING_CHANGES) {
-                return get_current_time_1.getCurrentTime({
-                    fps: videoConfig.fps,
-                    frame: audioFrame,
-                    src: props.src,
-                });
-            }
-            return audioFrame / (1000 / videoConfig.fps);
+            return get_current_time_1.getCurrentTime({
+                fps: videoConfig.fps,
+                frame,
+                src: props.src,
+            });
         })();
@@ -120,3 +116,3 @@ const handle = ready_manager_1.delayRender();
         }, { once: true });
-    }, [audioFrame, props.src, videoConfig.fps]);
+    }, [volumePropsFrame, props.src, videoConfig.fps, frame]);
     return jsx_runtime_1.jsx("video", Object.assign({ ref: videoRef }, props), void 0);
@@ -123,0 +119,0 @@ };

package.json

 {
 	"name": "remotion",
-	"version": "1.6.0-alpha.656a496e",
+	"version": "1.6.0-alpha.6bed117c",
 	"description": "Render videos in React",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

No alert changes

Improved metrics

Total package byte prevSize

395802

increased by1.35%

Number of package files

430

increased by4.88%

Lines of code

4678

increased by1.54%

No dependency changes