remotion 3.3.44 → 3.3.51

package/README.md

@@ -10,7 +10,7 @@
 [![Discord Shield](https://img.shields.io/discord/809501355504959528?color=000000&label=Discord&logo=fdgssdf)](https://remotion.dev/discord)
 [![NPM Version](https://img.shields.io/npm/v/remotion.svg?style=flat&color=black)](https://www.npmjs.org/package/remotion)
 [![NPM Downloads](https://img.shields.io/npm/dm/remotion.svg?style=flat&color=black&label=Downloads)](https://npmcharts.com/compare/remotion?minimal=true)
-[![Open Bounties](https://img.shields.io/endpoint?url=https%3A%2F%2Fconsole.algora.io%2Fapi%2Fshields%2Fremotion%2Fbounties%3Fstatus%3Dopen&style=flat&color=black)](https://github.com/remotion-dev/remotion/issues?q=is%3Aopen+label%3A%22%F0%9F%92%8E+Bounty%22+sort%3Aupdated-desc)
+[![Open Bounties](https://img.shields.io/endpoint?url=https%3A%2F%2Fconsole.algora.io%2Fapi%2Fshields%2Fremotion%2Fbounties%3Fstatus%3Dopen&style=flat&color=black&labelColor=grey&label=Open+Bounties)](https://github.com/remotion-dev/remotion/issues?q=is%3Aopen+label%3A%22%F0%9F%92%8E+Bounty%22+sort%3Aupdated-desc)
 <a href="https://twitter.com/remotion"><img src="https://img.shields.io/twitter/follow/remotion?label=Twitter&color=black" alt="Twitter"></a>
 
 Remotion is a framework for **creating videos programmatically using React.**

package/dist/{Clipper.js → cjs/Clipper.js}

@@ -2,9 +2,9 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Clipper = void 0;
 const react_1 = require("react");
-const NativeLayers_1 = require("./NativeLayers");
+const NativeLayers_js_1 = require("./NativeLayers.js");
 const Clipper = ({ height, width, x, y }) => {
-    const { setClipRegion } = (0, react_1.useContext)(NativeLayers_1.NativeLayersContext);
+    const { setClipRegion } = (0, react_1.useContext)(NativeLayers_js_1.NativeLayersContext);
     (0, react_1.useEffect)(() => {
         setClipRegion((c) => {
             if (c === 'hide') {

package/dist/{Composition.js → cjs/Composition.js}

@@ -4,38 +4,38 @@ exports.ClipComposition = exports.Composition = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const react_dom_1 = require("react-dom");
-const AbsoluteFill_1 = require("./AbsoluteFill");
-const CanUseRemotionHooks_1 = require("./CanUseRemotionHooks");
-const CompositionManager_1 = require("./CompositionManager");
-const input_props_1 = require("./config/input-props");
-const delay_render_1 = require("./delay-render");
-const Folder_1 = require("./Folder");
-const get_environment_1 = require("./get-environment");
-const internals_1 = require("./internals");
-const loading_indicator_1 = require("./loading-indicator");
-const NativeLayers_1 = require("./NativeLayers");
-const nonce_1 = require("./nonce");
-const portal_node_1 = require("./portal-node");
-const use_lazy_component_1 = require("./use-lazy-component");
-const use_video_1 = require("./use-video");
-const validate_composition_id_1 = require("./validation/validate-composition-id");
-const validate_dimensions_1 = require("./validation/validate-dimensions");
-const validate_duration_in_frames_1 = require("./validation/validate-duration-in-frames");
-const validate_fps_1 = require("./validation/validate-fps");
+const AbsoluteFill_js_1 = require("./AbsoluteFill.js");
+const CanUseRemotionHooks_js_1 = require("./CanUseRemotionHooks.js");
+const CompositionManager_js_1 = require("./CompositionManager.js");
+const input_props_js_1 = require("./config/input-props.js");
+const delay_render_js_1 = require("./delay-render.js");
+const Folder_js_1 = require("./Folder.js");
+const get_environment_js_1 = require("./get-environment.js");
+const internals_js_1 = require("./internals.js");
+const loading_indicator_js_1 = require("./loading-indicator.js");
+const NativeLayers_js_1 = require("./NativeLayers.js");
+const nonce_js_1 = require("./nonce.js");
+const portal_node_js_1 = require("./portal-node.js");
+const use_lazy_component_js_1 = require("./use-lazy-component.js");
+const use_video_js_1 = require("./use-video.js");
+const validate_composition_id_js_1 = require("./validation/validate-composition-id.js");
+const validate_dimensions_js_1 = require("./validation/validate-dimensions.js");
+const validate_duration_in_frames_js_1 = require("./validation/validate-duration-in-frames.js");
+const validate_fps_js_1 = require("./validation/validate-fps.js");
 const Fallback = () => {
     (0, react_1.useEffect)(() => {
-        const fallback = (0, delay_render_1.delayRender)('Waiting for Root component to unsuspend');
-        return () => (0, delay_render_1.continueRender)(fallback);
+        const fallback = (0, delay_render_js_1.delayRender)('Waiting for Root component to unsuspend');
+        return () => (0, delay_render_js_1.continueRender)(fallback);
     }, []);
     return null;
 };
 const Composition = ({ width, height, fps, durationInFrames, id, defaultProps, ...compProps }) => {
-    const { registerComposition, unregisterComposition } = (0, react_1.useContext)(CompositionManager_1.CompositionManager);
-    const video = (0, use_video_1.useVideo)();
-    const lazy = (0, use_lazy_component_1.useLazyComponent)(compProps);
-    const nonce = (0, nonce_1.useNonce)();
-    const environment = (0, get_environment_1.useRemotionEnvironment)();
-    const canUseComposition = (0, react_1.useContext)(internals_1.Internals.CanUseRemotionHooks);
+    const { registerComposition, unregisterComposition } = (0, react_1.useContext)(CompositionManager_js_1.CompositionManager);
+    const video = (0, use_video_js_1.useVideo)();
+    const lazy = (0, use_lazy_component_js_1.useLazyComponent)(compProps);
+    const nonce = (0, nonce_js_1.useNonce)();
+    const environment = (0, get_environment_js_1.useRemotionEnvironment)();
+    const canUseComposition = (0, react_1.useContext)(internals_js_1.Internals.CanUseRemotionHooks);
     if (canUseComposition) {
         if (environment === 'player-development' ||
             environment === 'player-production') {
@@ -43,17 +43,17 @@ const Composition = ({ width, height, fps, durationInFrames, id, defaultProps, .
         }
         throw new Error('<Composition> mounted inside another composition. See https://remotion.dev/docs/wrong-composition-mount for help.');
     }
-    const { folderName, parentName } = (0, react_1.useContext)(Folder_1.FolderContext);
+    const { folderName, parentName } = (0, react_1.useContext)(Folder_js_1.FolderContext);
     (0, react_1.useEffect)(() => {
         // Ensure it's a URL safe id
         if (!id) {
             throw new Error('No id for composition passed.');
         }
-        (0, validate_composition_id_1.validateCompositionId)(id);
-        (0, validate_dimensions_1.validateDimension)(width, 'width', 'of the <Composition/> component');
-        (0, validate_dimensions_1.validateDimension)(height, 'height', 'of the <Composition/> component');
-        (0, validate_duration_in_frames_1.validateDurationInFrames)(durationInFrames, 'of the <Composition/> component');
-        (0, validate_fps_1.validateFps)(fps, 'as a prop of the <Composition/> component', false);
+        (0, validate_composition_id_js_1.validateCompositionId)(id);
+        (0, validate_dimensions_js_1.validateDimension)(width, 'width', 'of the <Composition/> component');
+        (0, validate_dimensions_js_1.validateDimension)(height, 'height', 'of the <Composition/> component');
+        (0, validate_duration_in_frames_js_1.validateDurationInFrames)(durationInFrames, 'of the <Composition/> component');
+        (0, validate_fps_js_1.validateFps)(fps, 'as a prop of the <Composition/> component', false);
         registerComposition({
             durationInFrames,
             fps,
@@ -85,19 +85,19 @@ const Composition = ({ width, height, fps, durationInFrames, id, defaultProps, .
     ]);
     if (environment === 'preview' && video && video.component === lazy) {
         const Comp = lazy;
-        const inputProps = (0, input_props_1.getInputProps)();
-        return (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(exports.ClipComposition, { children: (0, jsx_runtime_1.jsx)(CanUseRemotionHooks_1.CanUseRemotionHooksProvider, { children: (0, jsx_runtime_1.jsx)(react_1.Suspense, { fallback: (0, jsx_runtime_1.jsx)(loading_indicator_1.Loading, {}), children: (0, jsx_runtime_1.jsx)(Comp, { ...defaultProps, ...inputProps }) }) }) }), (0, portal_node_1.portalNode)());
+        const inputProps = (0, input_props_js_1.getInputProps)();
+        return (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(exports.ClipComposition, { children: (0, jsx_runtime_1.jsx)(CanUseRemotionHooks_js_1.CanUseRemotionHooksProvider, { children: (0, jsx_runtime_1.jsx)(react_1.Suspense, { fallback: (0, jsx_runtime_1.jsx)(loading_indicator_js_1.Loading, {}), children: (0, jsx_runtime_1.jsx)(Comp, { ...defaultProps, ...inputProps }) }) }) }), (0, portal_node_js_1.portalNode)());
     }
     if (environment === 'rendering' && video && video.component === lazy) {
         const Comp = lazy;
-        const inputProps = (0, input_props_1.getInputProps)();
-        return (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(CanUseRemotionHooks_1.CanUseRemotionHooksProvider, { children: (0, jsx_runtime_1.jsx)(react_1.Suspense, { fallback: (0, jsx_runtime_1.jsx)(Fallback, {}), children: (0, jsx_runtime_1.jsx)(Comp, { ...defaultProps, ...inputProps }) }) }), (0, portal_node_1.portalNode)());
+        const inputProps = (0, input_props_js_1.getInputProps)();
+        return (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(CanUseRemotionHooks_js_1.CanUseRemotionHooksProvider, { children: (0, jsx_runtime_1.jsx)(react_1.Suspense, { fallback: (0, jsx_runtime_1.jsx)(Fallback, {}), children: (0, jsx_runtime_1.jsx)(Comp, { ...defaultProps, ...inputProps }) }) }), (0, portal_node_js_1.portalNode)());
     }
     return null;
 };
 exports.Composition = Composition;
 const ClipComposition = ({ children }) => {
-    const { clipRegion } = (0, react_1.useContext)(NativeLayers_1.NativeLayersContext);
+    const { clipRegion } = (0, react_1.useContext)(NativeLayers_js_1.NativeLayersContext);
     const style = (0, react_1.useMemo)(() => {
         return {
             display: 'flex',
@@ -108,6 +108,6 @@ const ClipComposition = ({ children }) => {
                 : undefined,
         };
     }, [clipRegion]);
-    return (0, jsx_runtime_1.jsx)(AbsoluteFill_1.AbsoluteFill, { style: style, children: children });
+    return (0, jsx_runtime_1.jsx)(AbsoluteFill_js_1.AbsoluteFill, { style: style, children: children });
 };
 exports.ClipComposition = ClipComposition;

package/dist/{CompositionManager.d.ts → cjs/CompositionManager.d.ts}

@@ -1,6 +1,6 @@
 import type { ComponentType, LazyExoticComponent } from 'react';
 import React from 'react';
-import type { TFolder } from './Folder';
+import type { TFolder } from './Folder.js';
 export declare type TComposition<T = unknown> = {
     width: number;
     height: number;

package/dist/{CompositionManager.js → cjs/CompositionManager.js}

@@ -49,19 +49,29 @@ const CompositionManagerProvider = ({ children }) => {
     // Wontfix, expected to have
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const [compositions, setCompositions] = (0, react_1.useState)([]);
+    const currentcompositionsRef = (0, react_1.useRef)(compositions);
     const [currentComposition, setCurrentComposition] = (0, react_1.useState)(null);
     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) => {
+    const updateCompositions = (0, react_1.useCallback)(
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    (updateComps) => {
         setCompositions((comps) => {
+            const updated = updateComps(comps);
+            currentcompositionsRef.current = updated;
+            return updated;
+        });
+    }, []);
+    const registerComposition = (0, react_1.useCallback)((comp) => {
+        updateCompositions((comps) => {
             if (comps.find((c) => c.id === comp.id)) {
                 throw new Error(`Multiple composition with id ${comp.id} are registered.`);
             }
             return [...comps, comp].slice().sort((a, b) => a.nonce - b.nonce);
         });
-    }, []);
+    }, [updateCompositions]);
     const registerSequence = (0, react_1.useCallback)((seq) => {
         setSequences((seqs) => {
             return [...seqs, seq];
@@ -111,9 +121,9 @@ const CompositionManagerProvider = ({ children }) => {
     }, [assets]);
     (0, react_1.useImperativeHandle)(exports.compositionsRef, () => {
         return {
-            getCompositions: () => compositions,
+            getCompositions: () => currentcompositionsRef.current,
         };
-    }, [compositions]);
+    }, []);
     const contextValue = (0, react_1.useMemo)(() => {
         return {
             compositions,

package/dist/{Folder.js → cjs/Folder.js}

@@ -3,18 +3,18 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Folder = exports.FolderContext = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const CompositionManager_1 = require("./CompositionManager");
-const truthy_1 = require("./truthy");
-const validate_folder_name_1 = require("./validation/validate-folder-name");
+const CompositionManager_js_1 = require("./CompositionManager.js");
+const truthy_js_1 = require("./truthy.js");
+const validate_folder_name_js_1 = require("./validation/validate-folder-name.js");
 exports.FolderContext = (0, react_1.createContext)({
     folderName: null,
     parentName: null,
 });
 const Folder = ({ name, children, }) => {
     const parent = (0, react_1.useContext)(exports.FolderContext);
-    const { registerFolder, unregisterFolder } = (0, react_1.useContext)(CompositionManager_1.CompositionManager);
-    (0, validate_folder_name_1.validateFolderName)(name);
-    const parentNameArr = [parent.parentName, parent.folderName].filter(truthy_1.truthy);
+    const { registerFolder, unregisterFolder } = (0, react_1.useContext)(CompositionManager_js_1.CompositionManager);
+    (0, validate_folder_name_js_1.validateFolderName)(name);
+    const parentNameArr = [parent.parentName, parent.folderName].filter(truthy_js_1.truthy);
     const parentName = parentNameArr.length === 0 ? null : parentNameArr.join('/');
     const value = (0, react_1.useMemo)(() => {
         return {

package/dist/{IFrame.js → cjs/IFrame.js}

@@ -3,15 +3,15 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.IFrame = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const delay_render_1 = require("./delay-render");
+const delay_render_js_1 = require("./delay-render.js");
 const IFrameRefForwarding = ({ onLoad, onError, ...props }, ref) => {
-    const [handle] = (0, react_1.useState)(() => (0, delay_render_1.delayRender)(`Loading <IFrame> with source ${props.src}`));
+    const [handle] = (0, react_1.useState)(() => (0, delay_render_js_1.delayRender)(`Loading <IFrame> with source ${props.src}`));
     const didLoad = (0, react_1.useCallback)((e) => {
-        (0, delay_render_1.continueRender)(handle);
+        (0, delay_render_js_1.continueRender)(handle);
         onLoad === null || onLoad === void 0 ? void 0 : onLoad(e);
     }, [handle, onLoad]);
     const didGetError = (0, react_1.useCallback)((e) => {
-        (0, delay_render_1.continueRender)(handle);
+        (0, delay_render_js_1.continueRender)(handle);
         if (onError) {
             onError(e);
         }

package/dist/{Img.js → cjs/Img.js}

@@ -3,16 +3,16 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Img = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const delay_render_1 = require("./delay-render");
-const get_environment_1 = require("./get-environment");
-const prefetch_1 = require("./prefetch");
+const delay_render_js_1 = require("./delay-render.js");
+const get_environment_js_1 = require("./get-environment.js");
+const prefetch_js_1 = require("./prefetch.js");
 const ImgRefForwarding = ({ onError, src, ...props }, ref) => {
     const imageRef = (0, react_1.useRef)(null);
-    const environment = (0, get_environment_1.useRemotionEnvironment)();
+    const environment = (0, get_environment_js_1.useRemotionEnvironment)();
     (0, react_1.useImperativeHandle)(ref, () => {
         return imageRef.current;
     }, []);
-    const actualSrc = (0, prefetch_1.usePreload)(src);
+    const actualSrc = (0, prefetch_js_1.usePreload)(src);
     const didGetError = (0, react_1.useCallback)((e) => {
         var _a;
         if (onError) {
@@ -29,13 +29,13 @@ const ImgRefForwarding = ({ onError, src, ...props }, ref) => {
             if (process.env.NODE_ENV === 'test') {
                 return;
             }
-            const newHandle = (0, delay_render_1.delayRender)('Loading <Img> with src=' + src);
+            const newHandle = (0, delay_render_js_1.delayRender)('Loading <Img> with src=' + src);
             const { current } = imageRef;
             const didLoad = () => {
-                (0, delay_render_1.continueRender)(newHandle);
+                (0, delay_render_js_1.continueRender)(newHandle);
             };
             if (current === null || current === void 0 ? void 0 : current.complete) {
-                (0, delay_render_1.continueRender)(newHandle);
+                (0, delay_render_js_1.continueRender)(newHandle);
             }
             else {
                 current === null || current === void 0 ? void 0 : current.addEventListener('load', didLoad, { once: true });
@@ -43,7 +43,7 @@ const ImgRefForwarding = ({ onError, src, ...props }, ref) => {
             // If tag gets unmounted, clear pending handles because image is not going to load
             return () => {
                 current === null || current === void 0 ? void 0 : current.removeEventListener('load', didLoad);
-                (0, delay_render_1.continueRender)(newHandle);
+                (0, delay_render_js_1.continueRender)(newHandle);
             };
         }, [src]);
     }

package/dist/{Null.js → cjs/Null.js}

@@ -2,9 +2,9 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Null = void 0;
 const react_1 = require("react");
-const NativeLayers_1 = require("./NativeLayers");
+const NativeLayers_js_1 = require("./NativeLayers.js");
 const Null = () => {
-    const { setClipRegion } = (0, react_1.useContext)(NativeLayers_1.NativeLayersContext);
+    const { setClipRegion } = (0, react_1.useContext)(NativeLayers_js_1.NativeLayersContext);
     (0, react_1.useEffect)(() => {
         setClipRegion((c) => {
             if (c === null) {

package/dist/{RemotionRoot.js → cjs/RemotionRoot.js}

@@ -3,18 +3,18 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.RemotionRoot = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const shared_audio_tags_1 = require("./audio/shared-audio-tags");
-const CompositionManager_1 = require("./CompositionManager");
-const delay_render_1 = require("./delay-render");
-const NativeLayers_1 = require("./NativeLayers");
-const nonce_1 = require("./nonce");
-const prefetch_state_1 = require("./prefetch-state");
-const random_1 = require("./random");
-const timeline_position_state_1 = require("./timeline-position-state");
-const duration_state_1 = require("./video/duration-state");
+const shared_audio_tags_js_1 = require("./audio/shared-audio-tags.js");
+const CompositionManager_js_1 = require("./CompositionManager.js");
+const delay_render_js_1 = require("./delay-render.js");
+const NativeLayers_js_1 = require("./NativeLayers.js");
+const nonce_js_1 = require("./nonce.js");
+const prefetch_state_js_1 = require("./prefetch-state.js");
+const random_js_1 = require("./random.js");
+const timeline_position_state_js_1 = require("./timeline-position-state.js");
+const duration_state_js_1 = require("./video/duration-state.js");
 const RemotionRoot = ({ children, numberOfAudioTags }) => {
     var _a;
-    const [remotionRootId] = (0, react_1.useState)(() => String((0, random_1.random)(null)));
+    const [remotionRootId] = (0, react_1.useState)(() => String((0, random_js_1.random)(null)));
     const [frame, setFrame] = (0, react_1.useState)((_a = window.remotion_initialFrame) !== null && _a !== void 0 ? _a : 0);
     const [playing, setPlaying] = (0, react_1.useState)(false);
     const imperativePlaying = (0, react_1.useRef)(false);
@@ -24,9 +24,9 @@ const RemotionRoot = ({ children, numberOfAudioTags }) => {
     (0, react_1.useLayoutEffect)(() => {
         if (typeof window !== 'undefined') {
             window.remotion_setFrame = (f) => {
-                const id = (0, delay_render_1.delayRender)(`Setting the current frame to ${f}`);
+                const id = (0, delay_render_js_1.delayRender)(`Setting the current frame to ${f}`);
                 setFrame(f);
-                requestAnimationFrame(() => (0, delay_render_1.continueRender)(id));
+                requestAnimationFrame(() => (0, delay_render_js_1.continueRender)(id));
             };
             window.remotion_isPlayer = false;
         }
@@ -64,7 +64,7 @@ const RemotionRoot = ({ children, numberOfAudioTags }) => {
             });
         }
     }, []);
-    return ((0, jsx_runtime_1.jsx)(nonce_1.NonceContext.Provider, { value: nonceContext, children: (0, jsx_runtime_1.jsx)(timeline_position_state_1.TimelineContext.Provider, { value: timelineContextValue, children: (0, jsx_runtime_1.jsx)(timeline_position_state_1.SetTimelineContext.Provider, { value: setTimelineContextValue, children: (0, jsx_runtime_1.jsx)(prefetch_state_1.PrefetchProvider, { children: (0, jsx_runtime_1.jsx)(NativeLayers_1.NativeLayersProvider, { children: (0, jsx_runtime_1.jsx)(CompositionManager_1.CompositionManagerProvider, { children: (0, jsx_runtime_1.jsx)(duration_state_1.DurationsContextProvider, { children: (0, jsx_runtime_1.jsx)(shared_audio_tags_1.SharedAudioContextProvider
+    return ((0, jsx_runtime_1.jsx)(nonce_js_1.NonceContext.Provider, { value: nonceContext, children: (0, jsx_runtime_1.jsx)(timeline_position_state_js_1.TimelineContext.Provider, { value: timelineContextValue, children: (0, jsx_runtime_1.jsx)(timeline_position_state_js_1.SetTimelineContext.Provider, { value: setTimelineContextValue, children: (0, jsx_runtime_1.jsx)(prefetch_state_js_1.PrefetchProvider, { children: (0, jsx_runtime_1.jsx)(NativeLayers_js_1.NativeLayersProvider, { children: (0, jsx_runtime_1.jsx)(CompositionManager_js_1.CompositionManagerProvider, { children: (0, jsx_runtime_1.jsx)(duration_state_js_1.DurationsContextProvider, { children: (0, jsx_runtime_1.jsx)(shared_audio_tags_js_1.SharedAudioContextProvider
                                 // In the preview, which is mostly played on Desktop, we opt out of the autoplay policy fix as described in https://github.com/remotion-dev/remotion/pull/554, as it mostly applies to mobile.
                                 , { 
                                     // In the preview, which is mostly played on Desktop, we opt out of the autoplay policy fix as described in https://github.com/remotion-dev/remotion/pull/554, as it mostly applies to mobile.

package/dist/{Sequence.d.ts → cjs/Sequence.d.ts}

@@ -12,6 +12,7 @@ export declare type LayoutAndStyle = {
 } | {
     layout?: 'absolute-fill';
     style?: React.CSSProperties;
+    className?: string;
 };
 export declare type SequenceProps = {
     children: React.ReactNode;

package/dist/{Sequence.js → cjs/Sequence.js}

@@ -3,24 +3,24 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Sequence = exports.SequenceContext = void 0;
 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_video_config_1 = require("./use-video-config");
+const AbsoluteFill_js_1 = require("./AbsoluteFill.js");
+const CompositionManager_js_1 = require("./CompositionManager.js");
+const get_environment_js_1 = require("./get-environment.js");
+const get_timeline_clip_name_js_1 = require("./get-timeline-clip-name.js");
+const nonce_js_1 = require("./nonce.js");
+const timeline_position_state_js_1 = require("./timeline-position-state.js");
+const use_video_config_js_1 = require("./use-video-config.js");
 exports.SequenceContext = (0, react_1.createContext)(null);
 const SequenceRefForwardingFunction = ({ from = 0, durationInFrames = Infinity, children, name, showInTimeline = true, showLoopTimesInTimeline, ...other }, ref) => {
     const { layout = 'absolute-fill' } = other;
     const [id] = (0, react_1.useState)(() => String(Math.random()));
     const parentSequence = (0, react_1.useContext)(exports.SequenceContext);
-    const { rootId } = (0, react_1.useContext)(timeline_position_state_1.TimelineContext);
+    const { rootId } = (0, react_1.useContext)(timeline_position_state_js_1.TimelineContext);
     const cumulatedFrom = parentSequence
         ? parentSequence.cumulatedFrom + parentSequence.relativeFrom
         : 0;
-    const nonce = (0, nonce_1.useNonce)();
-    const environment = (0, get_environment_1.useRemotionEnvironment)();
+    const nonce = (0, nonce_js_1.useNonce)();
+    const environment = (0, get_environment_js_1.useRemotionEnvironment)();
     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,13 +44,13 @@ const SequenceRefForwardingFunction = ({ from = 0, durationInFrames = Infinity,
     if (from % 1 !== 0) {
         throw new TypeError(`The "from" prop of a sequence must be an integer, but got ${from}.`);
     }
-    const absoluteFrame = (0, timeline_position_state_1.useTimelinePosition)();
-    const videoConfig = (0, use_video_config_1.useVideoConfig)();
+    const absoluteFrame = (0, timeline_position_state_js_1.useTimelinePosition)();
+    const videoConfig = (0, use_video_config_js_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 { registerSequence, unregisterSequence } = (0, react_1.useContext)(CompositionManager_js_1.CompositionManager);
     const contextValue = (0, react_1.useMemo)(() => {
         var _a;
         return {
@@ -68,7 +68,7 @@ const SequenceRefForwardingFunction = ({ from = 0, durationInFrames = Infinity,
         id,
     ]);
     const timelineClipName = (0, react_1.useMemo)(() => {
-        return name !== null && name !== void 0 ? name : (0, get_timeline_clip_name_1.getTimelineClipName)(children);
+        return name !== null && name !== void 0 ? name : (0, get_timeline_clip_name_js_1.getTimelineClipName)(children);
     }, [children, name]);
     (0, react_1.useEffect)(() => {
         var _a;
@@ -122,7 +122,7 @@ const SequenceRefForwardingFunction = ({ from = 0, durationInFrames = Infinity,
     if (ref !== null && layout === 'none') {
         throw new TypeError('It is not supported to pass both a `ref` and `layout="none"` to <Sequence />.');
     }
-    return ((0, jsx_runtime_1.jsx)(exports.SequenceContext.Provider, { value: contextValue, children: content === null ? null : layout === 'absolute-fill' ? ((0, jsx_runtime_1.jsx)(AbsoluteFill_1.AbsoluteFill, { ref: ref, style: defaultStyle, children: content })) : (content) }));
+    return ((0, jsx_runtime_1.jsx)(exports.SequenceContext.Provider, { value: contextValue, children: content === null ? null : other.layout === 'none' ? (content) : ((0, jsx_runtime_1.jsx)(AbsoluteFill_js_1.AbsoluteFill, { ref: ref, style: defaultStyle, className: other.className, children: content })) }));
 };
 /**
  * A component that time-shifts its children and wraps them in an absolutely positioned <div>.

package/dist/{Still.d.ts → cjs/Still.d.ts}

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

package/dist/{Still.js → cjs/Still.js}

@@ -2,8 +2,8 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Still = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const Composition_1 = require("./Composition");
+const Composition_js_1 = require("./Composition.js");
 const Still = (props) => {
-    return (0, jsx_runtime_1.jsx)(Composition_1.Composition, { fps: 1, durationInFrames: 1, ...props });
+    return (0, jsx_runtime_1.jsx)(Composition_js_1.Composition, { fps: 1, durationInFrames: 1, ...props });
 };
 exports.Still = Still;

package/dist/{audio → cjs/audio}/Audio.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
-import type { RemotionMainAudioProps } from './props';
+import type { RemotionMainAudioProps } from './props.js';
 export declare const Audio: React.ForwardRefExoticComponent<Pick<Omit<React.DetailedHTMLProps<React.AudioHTMLAttributes<HTMLAudioElement>, HTMLAudioElement>, "nonce" | "onEnded" | "onResize" | "onResizeCapture" | "autoPlay" | "controls"> & {
-    volume?: import("../volume-prop").VolumeProp | undefined;
+    volume?: import("../volume-prop.js").VolumeProp | undefined;
     playbackRate?: number | undefined;
     acceptableTimeShiftInSeconds?: number | undefined;
     allowAmplificationDuringRender?: boolean | undefined;

package/dist/{audio → cjs/audio}/Audio.js

@@ -3,24 +3,24 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Audio = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const get_environment_1 = require("../get-environment");
+const get_environment_js_1 = require("../get-environment.js");
 const loop_1 = require("../loop");
-const Sequence_1 = require("../Sequence");
-const use_video_config_1 = require("../use-video-config");
-const validate_media_props_1 = require("../validate-media-props");
-const validate_start_from_props_1 = require("../validate-start-from-props");
-const duration_state_1 = require("../video/duration-state");
-const AudioForDevelopment_1 = require("./AudioForDevelopment");
-const AudioForRendering_1 = require("./AudioForRendering");
-const shared_audio_tags_1 = require("./shared-audio-tags");
+const Sequence_js_1 = require("../Sequence.js");
+const use_video_config_js_1 = require("../use-video-config.js");
+const validate_media_props_js_1 = require("../validate-media-props.js");
+const validate_start_from_props_js_1 = require("../validate-start-from-props.js");
+const duration_state_js_1 = require("../video/duration-state.js");
+const AudioForDevelopment_js_1 = require("./AudioForDevelopment.js");
+const AudioForRendering_js_1 = require("./AudioForRendering.js");
+const shared_audio_tags_js_1 = require("./shared-audio-tags.js");
 const AudioRefForwardingFunction = (props, ref) => {
     var _a;
-    const audioContext = (0, react_1.useContext)(shared_audio_tags_1.SharedAudioContext);
+    const audioContext = (0, react_1.useContext)(shared_audio_tags_js_1.SharedAudioContext);
     const { startFrom, endAt, ...otherProps } = props;
     const { loop, ...propsOtherThanLoop } = props;
-    const { fps } = (0, use_video_config_1.useVideoConfig)();
-    const environment = (0, get_environment_1.useRemotionEnvironment)();
-    const { durations, setDurations } = (0, react_1.useContext)(duration_state_1.DurationsContext);
+    const { fps } = (0, use_video_config_js_1.useVideoConfig)();
+    const environment = (0, get_environment_js_1.useRemotionEnvironment)();
+    const { durations, setDurations } = (0, react_1.useContext)(duration_state_js_1.DurationsContext);
     if (typeof props.src !== 'string') {
         throw new TypeError(`The \`<Audio>\` tag requires a string for \`src\`, but got ${JSON.stringify(props.src)} instead.`);
     }
@@ -38,15 +38,15 @@ const AudioRefForwardingFunction = (props, ref) => {
         return ((0, jsx_runtime_1.jsx)(loop_1.Loop, { layout: "none", durationInFrames: Math.floor(actualDuration), children: (0, jsx_runtime_1.jsx)(exports.Audio, { ...propsOtherThanLoop, ref: ref }) }));
     }
     if (typeof startFrom !== 'undefined' || typeof endAt !== 'undefined') {
-        (0, validate_start_from_props_1.validateStartFromProps)(startFrom, endAt);
+        (0, validate_start_from_props_js_1.validateStartFromProps)(startFrom, endAt);
         const startFromFrameNo = startFrom !== null && startFrom !== void 0 ? startFrom : 0;
         const endAtFrameNo = endAt !== null && endAt !== void 0 ? endAt : Infinity;
-        return ((0, jsx_runtime_1.jsx)(Sequence_1.Sequence, { layout: "none", from: 0 - startFromFrameNo, showInTimeline: false, durationInFrames: endAtFrameNo, children: (0, jsx_runtime_1.jsx)(exports.Audio, { ...otherProps, ref: ref }) }));
+        return ((0, jsx_runtime_1.jsx)(Sequence_js_1.Sequence, { layout: "none", from: 0 - startFromFrameNo, showInTimeline: false, durationInFrames: endAtFrameNo, children: (0, jsx_runtime_1.jsx)(exports.Audio, { ...otherProps, ref: ref }) }));
     }
-    (0, validate_media_props_1.validateMediaProps)(props, 'Audio');
+    (0, validate_media_props_js_1.validateMediaProps)(props, 'Audio');
     if (environment === 'rendering') {
-        return ((0, jsx_runtime_1.jsx)(AudioForRendering_1.AudioForRendering, { onDuration: onDuration, ...props, ref: ref, onError: onError }));
+        return ((0, jsx_runtime_1.jsx)(AudioForRendering_js_1.AudioForRendering, { onDuration: onDuration, ...props, ref: ref, onError: onError }));
     }
-    return ((0, jsx_runtime_1.jsx)(AudioForDevelopment_1.AudioForDevelopment, { shouldPreMountAudioTags: audioContext !== null && audioContext.numberOfAudioTags > 0, ...props, ref: ref, onError: onError, onDuration: onDuration }));
+    return ((0, jsx_runtime_1.jsx)(AudioForDevelopment_js_1.AudioForDevelopment, { shouldPreMountAudioTags: audioContext !== null && audioContext.numberOfAudioTags > 0, ...props, ref: ref, onError: onError, onDuration: onDuration }));
 };
 exports.Audio = (0, react_1.forwardRef)(AudioRefForwardingFunction);

package/dist/{audio → cjs/audio}/AudioForDevelopment.d.ts

@@ -1,7 +1,7 @@
 import type { ForwardRefExoticComponent, RefAttributes } from 'react';
 import React from 'react';
 export declare const AudioForDevelopment: ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.AudioHTMLAttributes<HTMLAudioElement>, HTMLAudioElement>, "nonce" | "onEnded" | "onResize" | "onResizeCapture" | "autoPlay" | "controls"> & {
-    volume?: import("../volume-prop").VolumeProp | undefined;
+    volume?: import("../volume-prop.js").VolumeProp | undefined;
     playbackRate?: number | undefined;
     acceptableTimeShiftInSeconds?: number | undefined;
     allowAmplificationDuringRender?: boolean | undefined;