remotion 3.2.4 → 3.2.9

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
-remotion:build: cache hit, replaying output e51675c52d445313
+remotion:build: cache hit, replaying output b7e34247803ef5aa
 remotion:build: 
-remotion:build: > remotion@3.2.3 build /Users/jonathanburger/remotion/packages/core
+remotion:build: > remotion@3.2.8 build /Users/jonathanburger/remotion/packages/core
 remotion:build: > tsc -d
 remotion:build: 

package/README.md

@@ -26,22 +26,23 @@ Remotion is a suite of libraries building a foundation for **creating videos pro
 - **"The X in MDX" talk** [Watch](https://twitter.com/pomber/status/1359556846688886789) • [Source code](https://github.com/pomber/record-talk-with-remotion) • A re-recording of [this talk](https://www.youtube.com/watch?v=xEu3t-KJVVg) using Remotion.
 - **Redesigning the Scatterplot** [Watch](https://twitter.com/BrooksLybrand/status/1371547875109445635) • [Source code](https://github.com/brookslybrand/redesigning-scatterplots) • An animated section of Edward R. Tufte's book [The Visual Display of Quantitative Information](https://www.amazon.com/Visual-Display-Quantitative-Information/dp/0961392142/ref=sr_1_1?crid=3HQZSBUUROV09&dchild=1&keywords=the+visual+display+of+quantitative+information&qid=1615907320&sprefix=the+visual+disp%2Caps%2C190&sr=8-1).
 - **News Podcast Maker** [Watch](https://www.youtube.com/watch?v=Mwo5iNlWryg) • [Source code](https://github.com/FelippeChemello/podcast-maker/) • A fully automated News Podcast Maker.
+- **This video was made with code. But how?** [Watch](https://youtu.be/deg8bOoziaE) • [Source code](https://github.com/wcandillon/remotion-fireship) • A YouTube tutorial about Remotion, made with Remotion
 
-Feel free to pull request your creations!
+See even more creations in the [Showcase](https://remotion.dev/showcase).
 
 ## Get started
 
-If you already have Yarn and FFMPEG installed, type
+If you already have Node.JS and FFMPEG installed, type
 
 ```console
-yarn create video
+npm init video
 ```
 
 to get started. Otherwise, read the [installation page](https://www.remotion.dev/docs/) in the documentation.
 
 ## Documentation
 
-Head to [**remotion.dev**](https://www.remotion.dev) to learn the in and outs of Remotion!
+Head to [**remotion.dev/docs**](https://www.remotion.dev/docs) to learn the in and outs of Remotion!
 
 ## License
 

package/dist/CompositionManager.d.ts

@@ -50,6 +50,7 @@ export declare type TAsset = {
     mediaFrame: number;
     playbackRate: number;
 };
+declare type BaseMetadata = Pick<TCompMetadata, 'durationInFrames' | 'fps' | 'defaultProps' | 'height' | 'width'>;
 export declare type CompositionManagerContext = {
     compositions: TComposition[];
     registerComposition: <T>(comp: TComposition<T>) => void;
@@ -58,6 +59,8 @@ export declare type CompositionManagerContext = {
     unregisterFolder: (name: string, parent: string | null) => void;
     currentComposition: string | null;
     setCurrentComposition: (curr: string) => void;
+    setCurrentCompositionMetadata: (metadata: BaseMetadata) => void;
+    currentCompositionMetadata: BaseMetadata | null;
     registerSequence: (seq: TSequence) => void;
     unregisterSequence: (id: string) => void;
     registerAsset: (asset: TAsset) => void;

package/dist/CompositionManager.js

@@ -34,6 +34,7 @@ exports.CompositionManager = (0, react_1.createContext)({
     unregisterFolder: () => undefined,
     currentComposition: null,
     setCurrentComposition: () => undefined,
+    setCurrentCompositionMetadata: () => undefined,
     registerSequence: () => undefined,
     unregisterSequence: () => undefined,
     registerAsset: () => undefined,
@@ -41,6 +42,7 @@ exports.CompositionManager = (0, react_1.createContext)({
     sequences: [],
     assets: [],
     folders: [],
+    currentCompositionMetadata: null,
 });
 exports.compositionsRef = react_1.default.createRef();
 const CompositionManagerProvider = ({ children }) => {
@@ -51,6 +53,7 @@ const CompositionManagerProvider = ({ children }) => {
     const [assets, setAssets] = (0, react_1.useState)([]);
     const [folders, setFolders] = (0, react_1.useState)([]);
     const [sequences, setSequences] = (0, react_1.useState)([]);
+    const [currentCompositionMetadata, setCurrentCompositionMetadata] = (0, react_1.useState)(null);
     const registerComposition = (0, react_1.useCallback)((comp) => {
         setCompositions((comps) => {
             if (comps.find((c) => c.id === comp.id)) {
@@ -127,21 +130,24 @@ const CompositionManagerProvider = ({ children }) => {
             folders,
             registerFolder,
             unregisterFolder,
+            currentCompositionMetadata,
+            setCurrentCompositionMetadata,
         };
     }, [
         compositions,
-        currentComposition,
         registerComposition,
-        registerSequence,
         unregisterComposition,
+        currentComposition,
+        registerSequence,
         unregisterSequence,
         registerAsset,
         unregisterAsset,
         sequences,
         assets,
+        folders,
         registerFolder,
         unregisterFolder,
-        folders,
+        currentCompositionMetadata,
     ]);
     return ((0, jsx_runtime_1.jsx)(exports.CompositionManager.Provider, { value: contextValue, children: children }));
 };

package/dist/Sequence.js

@@ -5,11 +5,11 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const AbsoluteFill_1 = require("./AbsoluteFill");
 const CompositionManager_1 = require("./CompositionManager");
+const get_environment_1 = require("./get-environment");
 const get_timeline_clip_name_1 = require("./get-timeline-clip-name");
 const nonce_1 = require("./nonce");
 const timeline_position_state_1 = require("./timeline-position-state");
-const use_current_frame_1 = require("./use-current-frame");
-const use_unsafe_video_config_1 = require("./use-unsafe-video-config");
+const use_video_config_1 = require("./use-video-config");
 exports.SequenceContext = (0, react_1.createContext)(null);
 const Sequence = ({ from, durationInFrames = Infinity, children, name, showInTimeline = true, showLoopTimesInTimeline, ...other }) => {
     const { layout = 'absolute-fill' } = other;
@@ -19,7 +19,6 @@ const Sequence = ({ from, durationInFrames = Infinity, children, name, showInTim
     const cumulatedFrom = parentSequence
         ? parentSequence.cumulatedFrom + parentSequence.relativeFrom
         : 0;
-    const actualFrom = cumulatedFrom + from;
     const nonce = (0, nonce_1.useNonce)();
     if (layout !== 'absolute-fill' && layout !== 'none') {
         throw new TypeError(`The layout prop of <Sequence /> expects either "absolute-fill" or "none", but you passed: ${layout}`);
@@ -44,16 +43,12 @@ const Sequence = ({ from, durationInFrames = Infinity, children, name, showInTim
     if (from % 1 !== 0) {
         throw new TypeError(`The "from" prop of a sequence must be an integer, but got ${from}.`);
     }
-    const absoluteFrame = (0, use_current_frame_1.useAbsoluteCurrentFrame)();
-    const unsafeVideoConfig = (0, use_unsafe_video_config_1.useUnsafeVideoConfig)();
-    const compositionDuration = unsafeVideoConfig
-        ? unsafeVideoConfig.durationInFrames
-        : 0;
-    const actualDurationInFrames = Math.min(compositionDuration - from, parentSequence
-        ? Math.min(parentSequence.durationInFrames +
-            (parentSequence.cumulatedFrom + parentSequence.relativeFrom) -
-            actualFrom, durationInFrames)
-        : durationInFrames);
+    const absoluteFrame = (0, timeline_position_state_1.useTimelinePosition)();
+    const videoConfig = (0, use_video_config_1.useVideoConfig)();
+    const parentSequenceDuration = parentSequence
+        ? Math.min(parentSequence.durationInFrames - from, durationInFrames)
+        : durationInFrames;
+    const actualDurationInFrames = Math.max(0, Math.min(videoConfig.durationInFrames - from, parentSequenceDuration));
     const { registerSequence, unregisterSequence } = (0, react_1.useContext)(CompositionManager_1.CompositionManager);
     const contextValue = (0, react_1.useMemo)(() => {
         var _a;
@@ -76,6 +71,9 @@ const Sequence = ({ from, durationInFrames = Infinity, children, name, showInTim
     }, [children, name]);
     (0, react_1.useEffect)(() => {
         var _a;
+        if ((0, get_environment_1.getRemotionEnvironment)() !== 'preview') {
+            return;
+        }
         registerSequence({
             from,
             duration: actualDurationInFrames,
@@ -93,7 +91,6 @@ const Sequence = ({ from, durationInFrames = Infinity, children, name, showInTim
         };
     }, [
         durationInFrames,
-        actualFrom,
         id,
         name,
         registerSequence,
@@ -107,10 +104,8 @@ const Sequence = ({ from, durationInFrames = Infinity, children, name, showInTim
         nonce,
         showLoopTimesInTimeline,
     ]);
-    const endThreshold = (() => {
-        return actualFrom + durationInFrames - 1;
-    })();
-    const content = absoluteFrame < actualFrom
+    const endThreshold = cumulatedFrom + from + durationInFrames - 1;
+    const content = absoluteFrame < cumulatedFrom + from
         ? null
         : absoluteFrame > endThreshold
             ? null

package/dist/Still.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 import type { StillProps } from './Composition';
 export declare const Still: <T>(props: StillProps<T>) => JSX.Element;

package/dist/audio/AudioForDevelopment.d.ts

@@ -1,7 +1,8 @@
+import type { ForwardRefExoticComponent, RefAttributes } from 'react';
 import React from 'react';
-export declare const AudioForDevelopment: React.ForwardRefExoticComponent<Pick<Omit<React.DetailedHTMLProps<React.AudioHTMLAttributes<HTMLAudioElement>, HTMLAudioElement>, "onEnded" | "autoPlay" | "controls" | "loop"> & {
+export declare const AudioForDevelopment: ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.AudioHTMLAttributes<HTMLAudioElement>, HTMLAudioElement>, "onEnded" | "autoPlay" | "controls" | "loop"> & {
     volume?: import("../volume-prop").VolumeProp | undefined;
     playbackRate?: number | undefined;
 } & {
     shouldPreMountAudioTags: boolean;
-}, "id" | "style" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "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" | "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" | "src" | "volume" | "playbackRate" | "controlsList" | "crossOrigin" | "mediaGroup" | "muted" | "playsInline" | "preload" | "key" | "shouldPreMountAudioTags"> & React.RefAttributes<HTMLAudioElement>>;
+} & RefAttributes<HTMLAudioElement>>;

package/dist/audio/AudioForRendering.d.ts

@@ -1,3 +1,6 @@
+import type { ForwardRefExoticComponent, RefAttributes } from 'react';
 import React from 'react';
-import type { RemotionAudioProps } from './props';
-export declare const AudioForRendering: React.ForwardRefExoticComponent<Pick<RemotionAudioProps, "id" | "style" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "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" | "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" | "src" | "volume" | "playbackRate" | "controlsList" | "crossOrigin" | "mediaGroup" | "muted" | "playsInline" | "preload" | "key"> & React.RefAttributes<HTMLAudioElement>>;
+export declare const AudioForRendering: ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.AudioHTMLAttributes<HTMLAudioElement>, HTMLAudioElement>, "onEnded" | "autoPlay" | "controls" | "loop"> & {
+    volume?: import("../volume-prop").VolumeProp | undefined;
+    playbackRate?: number | undefined;
+} & RefAttributes<HTMLAudioElement>>;

package/dist/audio/AudioForRendering.js

@@ -7,12 +7,13 @@ const absolute_src_1 = require("../absolute-src");
 const CompositionManager_1 = require("../CompositionManager");
 const random_1 = require("../random");
 const Sequence_1 = require("../Sequence");
+const timeline_position_state_1 = require("../timeline-position-state");
 const use_current_frame_1 = require("../use-current-frame");
 const volume_prop_1 = require("../volume-prop");
 const use_audio_frame_1 = require("./use-audio-frame");
 const AudioForRenderingRefForwardingFunction = (props, ref) => {
     const audioRef = (0, react_1.useRef)(null);
-    const absoluteFrame = (0, use_current_frame_1.useAbsoluteCurrentFrame)();
+    const absoluteFrame = (0, timeline_position_state_1.useTimelinePosition)();
     const volumePropFrame = (0, use_audio_frame_1.useFrameForVolumeProp)();
     const frame = (0, use_current_frame_1.useCurrentFrame)();
     const sequenceContext = (0, react_1.useContext)(Sequence_1.SequenceContext);

package/dist/index.d.ts

@@ -20,10 +20,11 @@ declare global {
         remotion_envVariables: string;
         remotion_collectAssets: () => TAsset[];
         remotion_isPlayer: boolean;
-        remotion_imported: boolean;
         remotion_isBuilding: undefined | (() => void);
         remotion_finishedBuilding: undefined | (() => void);
         siteVersion: '4';
+        remotion_version: string;
+        remotion_imported: string | boolean;
     }
 }
 export declare type BundleState = {
@@ -33,6 +34,11 @@ export declare type BundleState = {
 } | {
     type: 'composition';
     compositionName: string;
+    compositionDefaultProps: unknown;
+    compositionHeight: number;
+    compositionDurationInFrames: number;
+    compositionWidth: number;
+    compositionFps: number;
 };
 export * from './AbsoluteFill';
 export * from './audio';
@@ -60,5 +66,6 @@ export * from './Still';
 export type { PlayableMediaTag } from './timeline-position-state';
 export { useCurrentFrame } from './use-current-frame';
 export * from './use-video-config';
+export * from './version';
 export * from './video';
 export * from './video-config';

package/dist/index.js

@@ -51,5 +51,6 @@ __exportStar(require("./Still"), exports);
 var use_current_frame_1 = require("./use-current-frame");
 Object.defineProperty(exports, "useCurrentFrame", { enumerable: true, get: function () { return use_current_frame_1.useCurrentFrame; } });
 __exportStar(require("./use-video-config"), exports);
+__exportStar(require("./version"), exports);
 __exportStar(require("./video"), exports);
 __exportStar(require("./video-config"), exports);

package/dist/internals.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import type { Configuration } from 'webpack';
 import type { CompProps } from './Composition';
 import type { CompositionManagerContext, TAsset, TCompMetadata, TComposition, TSequence } from './CompositionManager';
@@ -16,7 +17,18 @@ export declare const Internals: {
     RemotionRoot: import("react").FC<{
         children: import("react").ReactNode;
     }>;
-    useVideo: () => TComposition<unknown> | null;
+    useVideo: () => {
+        height: number;
+        width: number;
+        fps: number;
+        durationInFrames: number;
+        defaultProps: unknown;
+        id: string;
+        folderName: string | null;
+        parentFolderName: string | null;
+        component: import("react").LazyExoticComponent<import("react").ComponentType<unknown>>;
+        nonce: number;
+    } | null;
     getRoot: () => import("react").FC<{}> | null;
     useMediaVolumeState: () => readonly [number, (u: number) => void];
     useMediaMutedState: () => readonly [boolean, (u: import("react").SetStateAction<boolean>) => void];
@@ -59,7 +71,6 @@ export declare const Internals: {
         getCompositions: () => TCompMetadata[];
     }>;
     DELAY_RENDER_CALLSTACK_TOKEN: string;
-    useAbsoluteCurrentFrame: () => number;
     portalNode: () => HTMLElement;
     waitForRoot: (fn: (comp: import("react").FC<{}>) => void) => () => void;
     validateOffthreadVideoImageFormat: (input: unknown) => void;

package/dist/internals.js

@@ -39,7 +39,6 @@ const Sequence_1 = require("./Sequence");
 const setup_env_variables_1 = require("./setup-env-variables");
 const TimelinePosition = __importStar(require("./timeline-position-state"));
 const truthy_1 = require("./truthy");
-const use_current_frame_1 = require("./use-current-frame");
 const use_lazy_component_1 = require("./use-lazy-component");
 const use_unsafe_video_config_1 = require("./use-unsafe-video-config");
 const use_video_1 = require("./use-video");
@@ -83,7 +82,6 @@ exports.Internals = {
     getPreviewDomElement: get_preview_dom_element_1.getPreviewDomElement,
     compositionsRef: CompositionManager_1.compositionsRef,
     DELAY_RENDER_CALLSTACK_TOKEN: delay_render_1.DELAY_RENDER_CALLSTACK_TOKEN,
-    useAbsoluteCurrentFrame: use_current_frame_1.useAbsoluteCurrentFrame,
     portalNode: portal_node_1.portalNode,
     waitForRoot: register_root_1.waitForRoot,
     validateOffthreadVideoImageFormat: validate_offthreadvideo_image_format_1.validateOffthreadVideoImageFormat,

package/dist/loop/index.js

@@ -2,10 +2,11 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Loop = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const __1 = require("..");
+const Sequence_1 = require("../Sequence");
+const use_video_config_1 = require("../use-video-config");
 const validate_duration_in_frames_1 = require("../validation/validate-duration-in-frames");
 const Loop = ({ durationInFrames, times = Infinity, children, layout, name, }) => {
-    const { durationInFrames: compDuration } = (0, __1.useVideoConfig)();
+    const { durationInFrames: compDuration } = (0, use_video_config_1.useVideoConfig)();
     (0, validate_duration_in_frames_1.validateDurationInFrames)(durationInFrames, 'of the <Loop /> component');
     if (typeof times !== 'number') {
         throw new TypeError(`You passed to "times" an argument of type ${typeof times}, but it must be a number.`);
@@ -19,7 +20,7 @@ const Loop = ({ durationInFrames, times = Infinity, children, layout, name, }) =
     const maxTimes = Math.ceil(compDuration / durationInFrames);
     const actualTimes = Math.min(maxTimes, times);
     return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: new Array(actualTimes).fill(true).map((_, i) => {
-            return ((0, jsx_runtime_1.jsx)(__1.Sequence
+            return ((0, jsx_runtime_1.jsx)(Sequence_1.Sequence
             // eslint-disable-next-line react/no-array-index-key
             , { durationInFrames: durationInFrames, from: i * durationInFrames, layout: layout, name: name, showLoopTimesInTimeline: actualTimes, showInTimeline: i === 0, children: children }, `loop-${i}`));
         }) }));

package/dist/multiple-versions-warning.js

@@ -1,13 +1,27 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.checkMultipleRemotionVersions = void 0;
+const truthy_1 = require("./truthy");
+const version_1 = require("./version");
 const checkMultipleRemotionVersions = () => {
-    if (typeof window === 'undefined') {
+    if (typeof globalThis === 'undefined') {
         return;
     }
-    if (window.remotion_imported) {
-        console.error('🚨 Multiple versions of Remotion detected. Multiple versions will cause conflicting React contexts and things may break in an unexpected way. Please check your dependency tree and make sure only one version of Remotion is on the page.');
+    const alreadyImported = globalThis.remotion_imported ||
+        (typeof window !== 'undefined' && window.remotion_imported);
+    if (alreadyImported) {
+        throw new TypeError(`🚨 Multiple versions of Remotion detected: ${[
+            version_1.VERSION,
+            typeof alreadyImported === 'string'
+                ? alreadyImported
+                : 'an older version',
+        ]
+            .filter(truthy_1.truthy)
+            .join(' and ')}. This will cause things to break in an unexpected way.\nCheck that all your Remotion packages are on the same version. If your dependencies depend on Remotion, make them peer dependencies. You can also run \`npx remotion versions\` from your terminal to see which versions are mismatching.`);
+    }
+    globalThis.remotion_imported = true;
+    if (typeof window !== 'undefined') {
+        window.remotion_imported = version_1.VERSION;
     }
-    window.remotion_imported = true;
 };
 exports.checkMultipleRemotionVersions = checkMultipleRemotionVersions;

package/dist/use-current-frame.d.ts

@@ -1,4 +1,3 @@
-export declare const useAbsoluteCurrentFrame: () => number;
 /**
  * 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.

package/dist/use-current-frame.js

@@ -1,15 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useCurrentFrame = exports.useAbsoluteCurrentFrame = void 0;
+exports.useCurrentFrame = void 0;
 const react_1 = require("react");
 const CanUseRemotionHooks_1 = require("./CanUseRemotionHooks");
 const Sequence_1 = require("./Sequence");
 const timeline_position_state_1 = require("./timeline-position-state");
-const useAbsoluteCurrentFrame = () => {
-    const timelinePosition = (0, timeline_position_state_1.useTimelinePosition)();
-    return timelinePosition;
-};
-exports.useAbsoluteCurrentFrame = useAbsoluteCurrentFrame;
 /**
  * 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.
@@ -23,7 +18,7 @@ const useCurrentFrame = () => {
         }
         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 = (0, exports.useAbsoluteCurrentFrame)();
+    const frame = (0, timeline_position_state_1.useTimelinePosition)();
     const context = (0, react_1.useContext)(Sequence_1.SequenceContext);
     const contextOffset = context
         ? context.cumulatedFrom + context.relativeFrom

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

@@ -5,6 +5,7 @@ const react_1 = require("react");
 const use_audio_frame_1 = require("./audio/use-audio-frame");
 const CompositionManager_1 = require("./CompositionManager");
 const get_asset_file_name_1 = require("./get-asset-file-name");
+const get_environment_1 = require("./get-environment");
 const nonce_1 = require("./nonce");
 const play_and_handle_not_allowed_error_1 = require("./play-and-handle-not-allowed-error");
 const Sequence_1 = require("./Sequence");
@@ -32,11 +33,9 @@ const useMediaInTimeline = ({ volume, mediaVolume, mediaRef, src, mediaType, })
     const [id] = (0, react_1.useState)(() => String(Math.random()));
     const [initialVolume] = (0, react_1.useState)(() => volume);
     const nonce = (0, nonce_1.useNonce)();
-    const duration = (() => {
-        return parentSequence
-            ? Math.min(parentSequence.durationInFrames, videoConfig.durationInFrames)
-            : videoConfig.durationInFrames;
-    })();
+    const duration = parentSequence
+        ? Math.min(parentSequence.durationInFrames, videoConfig.durationInFrames)
+        : videoConfig.durationInFrames;
     const doesVolumeChange = typeof volume === 'function';
     const volumes = (0, react_1.useMemo)(() => {
         if (typeof volume === 'number') {
@@ -66,6 +65,10 @@ const useMediaInTimeline = ({ volume, mediaVolume, mediaRef, src, mediaType, })
         if (!src) {
             throw new Error('No src passed');
         }
+        if ((0, get_environment_1.getRemotionEnvironment)() !== 'preview' &&
+            process.env.NODE_ENV !== 'test') {
+            return;
+        }
         registerSequence({
             type: mediaType,
             src,

package/dist/use-media-playback.js

@@ -12,7 +12,7 @@ const warn_about_non_seekable_media_1 = require("./warn-about-non-seekable-media
 const useMediaPlayback = ({ mediaRef, src, mediaType, playbackRate: localPlaybackRate, onlyWarnForMediaSeekingError, }) => {
     const { playbackRate: globalPlaybackRate } = (0, react_1.useContext)(timeline_position_state_1.TimelineContext);
     const frame = (0, use_current_frame_1.useCurrentFrame)();
-    const absoluteFrame = (0, use_current_frame_1.useAbsoluteCurrentFrame)();
+    const absoluteFrame = (0, timeline_position_state_1.useTimelinePosition)();
     const [playing] = (0, timeline_position_state_1.usePlayingState)();
     const { fps } = (0, use_video_config_1.useVideoConfig)();
     const mediaStartsAt = (0, use_audio_frame_1.useMediaStartsAt)();

package/dist/use-video.d.ts

@@ -1 +1,13 @@
-export declare const useVideo: () => import("./CompositionManager").TComposition<unknown> | null;
+/// <reference types="react" />
+export declare const useVideo: () => {
+    height: number;
+    width: number;
+    fps: number;
+    durationInFrames: number;
+    defaultProps: unknown;
+    id: string;
+    folderName: string | null;
+    parentFolderName: string | null;
+    component: import("react").LazyExoticComponent<import("react").ComponentType<unknown>>;
+    nonce: number;
+} | null;

package/dist/use-video.js

@@ -7,9 +7,22 @@ const useVideo = () => {
     const context = (0, react_1.useContext)(CompositionManager_1.CompositionManager);
     return (0, react_1.useMemo)(() => {
         var _a;
-        return (_a = context.compositions.find((c) => {
+        const selected = context.compositions.find((c) => {
             return c.id === context.currentComposition;
-        })) !== null && _a !== void 0 ? _a : null;
-    }, [context.compositions, context.currentComposition]);
+        });
+        if (selected) {
+            return {
+                ...selected,
+                // We override the selected metadata with the metadata that was passed to renderMedia(),
+                // and don't allow it to be changed during render anymore
+                ...((_a = context.currentCompositionMetadata) !== null && _a !== void 0 ? _a : {}),
+            };
+        }
+        return null;
+    }, [
+        context.compositions,
+        context.currentComposition,
+        context.currentCompositionMetadata,
+    ]);
 };
 exports.useVideo = useVideo;

package/dist/version.d.ts

@@ -0,0 +1 @@
+export declare const VERSION = "3.2.9";

package/dist/version.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VERSION = void 0;
+// Automatically generated on publish
+exports.VERSION = '3.2.9';

package/dist/video/OffthreadVideoForRendering.js

@@ -11,13 +11,14 @@ const Img_1 = require("../Img");
 const internals_1 = require("../internals");
 const random_1 = require("../random");
 const Sequence_1 = require("../Sequence");
+const timeline_position_state_1 = require("../timeline-position-state");
 const use_current_frame_1 = require("../use-current-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 DEFAULT_IMAGE_FORMAT = 'jpeg';
 const OffthreadVideoForRendering = ({ onError, volume: volumeProp, playbackRate, src, muted, imageFormat, ...props }) => {
-    const absoluteFrame = (0, use_current_frame_1.useAbsoluteCurrentFrame)();
+    const absoluteFrame = (0, timeline_position_state_1.useTimelinePosition)();
     const frame = (0, use_current_frame_1.useCurrentFrame)();
     const volumePropsFrame = (0, use_audio_frame_1.useFrameForVolumeProp)();
     const videoConfig = (0, use_unsafe_video_config_1.useUnsafeVideoConfig)();

package/dist/video/VideoForDevelopment.d.ts

@@ -1,7 +1,8 @@
+import type { ForwardRefExoticComponent, RefAttributes } from 'react';
 import React from 'react';
-export declare const VideoForDevelopment: React.ForwardRefExoticComponent<Pick<Omit<React.DetailedHTMLProps<React.VideoHTMLAttributes<HTMLVideoElement>, HTMLVideoElement>, "onEnded" | "autoPlay" | "controls" | "loop"> & {
+export declare const VideoForDevelopment: ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.VideoHTMLAttributes<HTMLVideoElement>, HTMLVideoElement>, "onEnded" | "autoPlay" | "controls" | "loop"> & {
     volume?: import("../volume-prop").VolumeProp | undefined;
     playbackRate?: number | undefined;
 } & {
     onlyWarnForMediaSeekingError: boolean;
-}, "id" | "height" | "width" | "style" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "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" | "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" | "src" | "volume" | "playbackRate" | "controlsList" | "crossOrigin" | "mediaGroup" | "muted" | "playsInline" | "preload" | "key" | "poster" | "disablePictureInPicture" | "disableRemotePlayback" | "onlyWarnForMediaSeekingError"> & React.RefAttributes<HTMLVideoElement>>;
+} & RefAttributes<HTMLVideoElement>>;

package/dist/video/VideoForDevelopment.js

@@ -50,7 +50,7 @@ const VideoForDevelopmentRefForwardingFunction = (props, ref) => {
             var _a;
             if (current === null || current === void 0 ? void 0 : current.error) {
                 console.error('Error occurred in video', current === null || current === void 0 ? void 0 : current.error);
-                throw new Error(`The browser threw an error while playing the video: 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`);
+                throw new Error(`The browser threw an error while playing the video ${nativeProps.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`);
             }
             else {
                 throw new Error('The browser threw an error');
@@ -60,7 +60,8 @@ const VideoForDevelopmentRefForwardingFunction = (props, ref) => {
         return () => {
             current.removeEventListener('error', errorHandler);
         };
-    }, []);
+    }, [nativeProps.src]);
     return ((0, jsx_runtime_1.jsx)("video", { ref: videoRef, muted: muted || mediaMuted, playsInline: true, ...nativeProps }));
 };
+// Copy types from forwardRef but not necessary to remove ref
 exports.VideoForDevelopment = (0, react_1.forwardRef)(VideoForDevelopmentRefForwardingFunction);

package/dist/video/VideoForRendering.d.ts

@@ -1,3 +1,6 @@
+import type { ForwardRefExoticComponent, RefAttributes } from 'react';
 import React from 'react';
-import type { RemotionVideoProps } from './props';
-export declare const VideoForRendering: React.ForwardRefExoticComponent<Pick<RemotionVideoProps, "id" | "height" | "width" | "style" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "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" | "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" | "src" | "volume" | "playbackRate" | "controlsList" | "crossOrigin" | "mediaGroup" | "muted" | "playsInline" | "preload" | "key" | "poster" | "disablePictureInPicture" | "disableRemotePlayback"> & React.RefAttributes<HTMLVideoElement>>;
+export declare const VideoForRendering: ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.VideoHTMLAttributes<HTMLVideoElement>, HTMLVideoElement>, "onEnded" | "autoPlay" | "controls" | "loop"> & {
+    volume?: import("../volume-prop").VolumeProp | undefined;
+    playbackRate?: number | undefined;
+} & RefAttributes<HTMLVideoElement>>;

package/dist/video/VideoForRendering.js

@@ -10,13 +10,14 @@ const delay_render_1 = require("../delay-render");
 const is_approximately_the_same_1 = require("../is-approximately-the-same");
 const random_1 = require("../random");
 const Sequence_1 = require("../Sequence");
+const timeline_position_state_1 = require("../timeline-position-state");
 const use_current_frame_1 = require("../use-current-frame");
 const use_unsafe_video_config_1 = require("../use-unsafe-video-config");
 const volume_prop_1 = require("../volume-prop");
 const warn_about_non_seekable_media_1 = require("../warn-about-non-seekable-media");
 const get_current_time_1 = require("./get-current-time");
 const VideoForRenderingForwardFunction = ({ onError, volume: volumeProp, playbackRate, ...props }, ref) => {
-    const absoluteFrame = (0, use_current_frame_1.useAbsoluteCurrentFrame)();
+    const absoluteFrame = (0, timeline_position_state_1.useTimelinePosition)();
     const frame = (0, use_current_frame_1.useCurrentFrame)();
     const volumePropsFrame = (0, use_audio_frame_1.useFrameForVolumeProp)();
     const videoConfig = (0, use_unsafe_video_config_1.useUnsafeVideoConfig)();
@@ -138,7 +139,7 @@ const VideoForRenderingForwardFunction = ({ onError, volume: volumeProp, playbac
             var _a;
             if (current === null || current === void 0 ? void 0 : current.error) {
                 console.error('Error occurred in video', current === null || current === void 0 ? void 0 : current.error);
-                throw new Error(`The browser threw an error while playing the video: 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`);
+                throw new Error(`The browser threw an error while playing the video ${props.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`);
             }
             else {
                 throw new Error('The browser threw an error');

package/ensure-correct-version.js

@@ -0,0 +1,24 @@
+const path = require('node:path');
+const fs = require('node:fs');
+const cp = require('node:child_process');
+
+const packageJson = JSON.parse(fs.readFileSync('package.json'));
+const {version} = packageJson;
+const src =
+	`
+// Automatically generated on publish
+export const VERSION = '${version}';
+`.trim() + '\n';
+
+fs.writeFileSync(path.resolve(process.cwd(), 'src/version.ts'), src);
+
+cp.execSync('npx tsc');
+
+const distFile = fs.readFileSync('dist/version.js', 'utf-8');
+
+if (!distFile.includes(version)) {
+	console.log('In dist file, did not include version');
+	process.exit(1);
+}
+
+console.log('Updated version to v' + version);

package/package.json

@@ -1,16 +1,16 @@
 {
 	"name": "remotion",
-	"version": "3.2.4",
+	"version": "3.2.9",
 	"description": "Render videos in React",
 	"main": "dist/index.js",
 	"types": "dist/index.d.ts",
 	"sideEffects": false,
 	"scripts": {
+		"prepublish": "node ensure-correct-version.js && cp ../../README.md .",
 		"lint": "eslint src --ext ts,tsx",
 		"test": "vitest --run",
 		"build": "tsc -d",
-		"watch": "tsc -w",
-		"prerelease": "cp ../../README.md ."
+		"watch": "tsc -w"
 	},
 	"repository": {
 		"url": "https://github.com/remotion-dev/remotion"
@@ -54,5 +54,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "ee420b99227e0e5bcf093c108e3695f5d46e3658"
+	"gitHead": "66eceb7252865747a2808fc51cdbd2b57bb38486"
 }

package/version.d.ts

@@ -0,0 +1 @@
+export * from './dist/version';

package/version.js

@@ -0,0 +1 @@
+module.exports = require('./dist/version');