@remotion/cli 4.0.0-fastlambda.8 → 4.0.0-forcepublish.7

package/dist/config/timeout.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getCurrentPuppeteerTimeout = exports.setPuppeteerTimeout = void 0;
+const renderer_1 = require("@remotion/renderer");
+let currentTimeout = renderer_1.RenderInternals.DEFAULT_TIMEOUT;
+const setPuppeteerTimeout = (newPuppeteerTimeout) => {
+    if (typeof newPuppeteerTimeout !== 'number') {
+        throw new Error('--timeout flag / setTimeoutInMilliseconds() must be a number, but got ' +
+            JSON.stringify(newPuppeteerTimeout));
+    }
+    currentTimeout = newPuppeteerTimeout;
+};
+exports.setPuppeteerTimeout = setPuppeteerTimeout;
+const getCurrentPuppeteerTimeout = () => {
+    return currentTimeout;
+};
+exports.getCurrentPuppeteerTimeout = getCurrentPuppeteerTimeout;

package/dist/config/webpack-caching.d.ts

@@ -0,0 +1,3 @@
+export declare const DEFAULT_WEBPACK_CACHE_ENABLED = true;
+export declare const setWebpackCaching: (flag: boolean) => void;
+export declare const getWebpackCaching: () => boolean;

package/dist/config/webpack-caching.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getWebpackCaching = exports.setWebpackCaching = exports.DEFAULT_WEBPACK_CACHE_ENABLED = void 0;
+exports.DEFAULT_WEBPACK_CACHE_ENABLED = true;
+let webpackCaching = exports.DEFAULT_WEBPACK_CACHE_ENABLED;
+const setWebpackCaching = (flag) => {
+    if (typeof flag !== 'boolean') {
+        throw new TypeError('Caching flag must be a boolean.');
+    }
+    webpackCaching = flag;
+};
+exports.setWebpackCaching = setWebpackCaching;
+const getWebpackCaching = () => {
+    return webpackCaching;
+};
+exports.getWebpackCaching = getWebpackCaching;

package/dist/download-progress.d.ts

@@ -1,2 +1,3 @@
-import { DownloadProgress } from './progress-bar';
+import type { DownloadProgress } from './progress-bar';
+export declare const getFileSizeDownloadBar: (downloaded: number) => string;
 export declare const makeMultiDownloadProgress: (progresses: DownloadProgress[]) => string | null;

package/dist/download-progress.js

@@ -1,22 +1,37 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.makeMultiDownloadProgress = void 0;
+exports.makeMultiDownloadProgress = exports.getFileSizeDownloadBar = void 0;
+const format_bytes_1 = require("./format-bytes");
 const make_progress_bar_1 = require("./make-progress-bar");
+const getFileSizeDownloadBar = (downloaded) => {
+    const desiredLength = (0, make_progress_bar_1.makeProgressBar)(0).length;
+    return `[${(0, format_bytes_1.formatBytes)(downloaded).padEnd(desiredLength - 2, ' ')}]`;
+};
+exports.getFileSizeDownloadBar = getFileSizeDownloadBar;
 const makeMultiDownloadProgress = (progresses) => {
     if (progresses.length === 0) {
         return null;
     }
     if (progresses.length === 1) {
         const [progress] = progresses;
+        const truncatedFileName = progress.name.length >= 60
+            ? progress.name.substring(0, 57) + '...'
+            : progress.name;
         return [
             `    +`,
-            (0, make_progress_bar_1.makeProgressBar)(progress.progress),
-            `Downloading ${progress.name}`,
+            progress.progress
+                ? (0, make_progress_bar_1.makeProgressBar)(progress.progress)
+                : (0, exports.getFileSizeDownloadBar)(progress.downloaded),
+            `Downloading ${truncatedFileName}`,
         ].join(' ');
     }
+    const everyFileHasContentLength = progresses.every((p) => p.totalBytes !== null);
     return [
         `    +`,
-        (0, make_progress_bar_1.makeProgressBar)(progresses.reduce((a, b) => a + b.progress, 0) / progresses.length),
+        everyFileHasContentLength
+            ? (0, make_progress_bar_1.makeProgressBar)(progresses.reduce((a, b) => a + b.progress, 0) /
+                progresses.length)
+            : (0, exports.getFileSizeDownloadBar)(progresses.reduce((a, b) => a + b.downloaded, 0)),
         `Downloading ${progresses.length} files`,
     ].join(' ');
 };

package/dist/editor/components/AudioWaveform.js

@@ -98,13 +98,13 @@ const AudioWaveform = ({ src, fps, startFrom, durationInFrames, visualizationWid
         });
     }, [durationInFrames, fps, metadata, startFrom, visualizationWidth]);
     if (error) {
-        return ((0, jsx_runtime_1.jsx)("div", { style: container, children: (0, jsx_runtime_1.jsx)("div", { style: errorMessage, children: "No waveform available. Audio might not support CORS." }, void 0) }, void 0));
+        return ((0, jsx_runtime_1.jsx)("div", { style: container, children: (0, jsx_runtime_1.jsx)("div", { style: errorMessage, children: "No waveform available. Audio might not support CORS." }) }));
     }
     if (!metadata) {
         return null;
     }
     return ((0, jsx_runtime_1.jsxs)("div", { style: container, children: [normalized.map((w) => {
                 return (0, jsx_runtime_1.jsx)(AudioWaveformBar_1.AudioWaveformBar, { amplitude: w.amplitude }, w.index);
-            }), (0, jsx_runtime_1.jsx)("canvas", { ref: canvas, style: canvasStyle, width: visualizationWidth, height: timeline_layout_1.TIMELINE_LAYER_HEIGHT }, void 0)] }, void 0));
+            }), (0, jsx_runtime_1.jsx)("canvas", { ref: canvas, style: canvasStyle, width: visualizationWidth, height: timeline_layout_1.TIMELINE_LAYER_HEIGHT })] }));
 };
 exports.AudioWaveform = AudioWaveform;

package/dist/editor/components/AudioWaveformBar.js

@@ -19,6 +19,6 @@ const AudioWaveformBar = ({ amplitude }) => {
             height: (timeline_layout_1.TIMELINE_LAYER_HEIGHT / 2) * amplitude,
         };
     }, [amplitude]);
-    return (0, jsx_runtime_1.jsx)("div", { style: style }, void 0);
+    return (0, jsx_runtime_1.jsx)("div", { style: style });
 };
 exports.AudioWaveformBar = AudioWaveformBar;

package/dist/editor/components/Canvas.js

@@ -4,12 +4,14 @@ exports.Canvas = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const player_1 = require("@remotion/player");
 const react_1 = require("react");
+const colors_1 = require("../helpers/colors");
 const Preview_1 = require("./Preview");
 const container = {
     flex: 1,
     display: 'flex',
     overflow: 'hidden',
     position: 'relative',
+    backgroundColor: colors_1.BACKGROUND,
 };
 const Canvas = () => {
     const ref = (0, react_1.useRef)(null);
@@ -17,6 +19,6 @@ const Canvas = () => {
         triggerOnWindowResize: false,
         shouldApplyCssTransforms: true,
     });
-    return ((0, jsx_runtime_1.jsx)("div", { ref: ref, style: container, children: size ? (0, jsx_runtime_1.jsx)(Preview_1.VideoPreview, { canvasSize: size }, void 0) : null }, void 0));
+    return ((0, jsx_runtime_1.jsx)("div", { ref: ref, style: container, children: size ? (0, jsx_runtime_1.jsx)(Preview_1.VideoPreview, { canvasSize: size }) : null }));
 };
 exports.Canvas = Canvas;

package/dist/editor/components/CheckboardToggle.js

@@ -13,6 +13,6 @@ const CheckboardToggle = () => {
             return !c;
         });
     }, [setCheckerboard]);
-    return ((0, jsx_runtime_1.jsx)(ControlButton_1.ControlButton, { title: accessibilityLabel, "aria-label": accessibilityLabel, onClick: onClick, children: (0, jsx_runtime_1.jsx)("svg", { "aria-hidden": "true", focusable: "false", "data-prefix": "fas", "data-icon": "game-board-alt", className: "svg-inline--fa fa-game-board-alt fa-w-16", role: "img", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", style: { width: 16, height: 16 }, children: (0, jsx_runtime_1.jsx)("path", { fill: checkerboard ? 'var(--blue)' : 'white', d: "M480 0H32A32 32 0 0 0 0 32v448a32 32 0 0 0 32 32h448a32 32 0 0 0 32-32V32a32 32 0 0 0-32-32zm-32 256H256v192H64V256h192V64h192z" }, void 0) }, void 0) }, void 0));
+    return ((0, jsx_runtime_1.jsx)(ControlButton_1.ControlButton, { title: accessibilityLabel, "aria-label": accessibilityLabel, onClick: onClick, children: (0, jsx_runtime_1.jsx)("svg", { "aria-hidden": "true", focusable: "false", "data-prefix": "fas", "data-icon": "game-board-alt", className: "svg-inline--fa fa-game-board-alt fa-w-16", role: "img", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", style: { width: 16, height: 16 }, children: (0, jsx_runtime_1.jsx)("path", { fill: checkerboard ? 'var(--blue)' : 'white', d: "M480 0H32A32 32 0 0 0 0 32v448a32 32 0 0 0 32 32h448a32 32 0 0 0 32-32V32a32 32 0 0 0-32-32zm-32 256H256v192H64V256h192V64h192z" }) }) }));
 };
 exports.CheckboardToggle = CheckboardToggle;

package/dist/editor/components/ClipboardIcon.js

@@ -7,6 +7,6 @@ const ClipboardIcon = () => {
             height: 16,
             verticalAlign: 'middle',
             marginTop: -3,
-        }, children: (0, jsx_runtime_1.jsx)("path", { fill: "currentColor", d: "M336 64h-80c0-35.3-28.7-64-64-64s-64 28.7-64 64H48C21.5 64 0 85.5 0 112v352c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48V112c0-26.5-21.5-48-48-48zM192 40c13.3 0 24 10.7 24 24s-10.7 24-24 24-24-10.7-24-24 10.7-24 24-24zm144 418c0 3.3-2.7 6-6 6H54c-3.3 0-6-2.7-6-6V118c0-3.3 2.7-6 6-6h42v36c0 6.6 5.4 12 12 12h168c6.6 0 12-5.4 12-12v-36h42c3.3 0 6 2.7 6 6z" }, void 0) }, void 0));
+        }, children: (0, jsx_runtime_1.jsx)("path", { fill: "currentColor", d: "M336 64h-80c0-35.3-28.7-64-64-64s-64 28.7-64 64H48C21.5 64 0 85.5 0 112v352c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48V112c0-26.5-21.5-48-48-48zM192 40c13.3 0 24 10.7 24 24s-10.7 24-24 24-24-10.7-24-24 10.7-24 24-24zm144 418c0 3.3-2.7 6-6 6H54c-3.3 0-6-2.7-6-6V118c0-3.3 2.7-6 6-6h42v36c0 6.6 5.4 12 12 12h168c6.6 0 12-5.4 12-12v-36h42c3.3 0 6 2.7 6 6z" }) }));
 };
 exports.ClipboardIcon = ClipboardIcon;

package/dist/editor/components/CollapsedCompositionSelector.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare const CollapsedCompositionSelector: React.FC<{
+    onExpand: () => void;
+}>;

package/dist/editor/components/CollapsedCompositionSelector.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CollapsedCompositionSelector = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const colors_1 = require("../helpers/colors");
+const caret_1 = require("../icons/caret");
+const z_index_1 = require("../state/z-index");
+const CollapsedCompositionSelector = ({ onExpand }) => {
+    const [hovered, setHovered] = (0, react_1.useState)(false);
+    const { tabIndex } = (0, z_index_1.useZIndex)();
+    const onPointerEnter = (0, react_1.useCallback)(() => {
+        setHovered(true);
+    }, []);
+    const onPointerLeave = (0, react_1.useCallback)(() => {
+        setHovered(false);
+    }, []);
+    const style = (0, react_1.useMemo)(() => {
+        return {
+            border: 'none',
+            borderRight: '2px solid black',
+            cursor: 'pointer',
+            color: 'white',
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            paddingLeft: 7,
+            paddingRight: 4,
+            backgroundColor: (0, colors_1.getBackgroundFromHoverState)({
+                hovered,
+                selected: false,
+            }),
+            appearance: 'none',
+            WebkitAppearance: 'none',
+        };
+    }, [hovered]);
+    return ((0, jsx_runtime_1.jsx)("button", { style: style, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, type: "button", role: "button", tabIndex: tabIndex, onClick: onExpand, children: (0, jsx_runtime_1.jsx)(caret_1.CaretRight, {}) }));
+};
+exports.CollapsedCompositionSelector = CollapsedCompositionSelector;

package/dist/editor/components/CompositionSelector.js

@@ -4,20 +4,20 @@ exports.CompositionSelector = exports.getKeysToExpand = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
+const colors_1 = require("../helpers/colors");
 const create_folder_tree_1 = require("../helpers/create-folder-tree");
 const persist_open_folders_1 = require("../helpers/persist-open-folders");
-const marks_1 = require("../state/marks");
 const z_index_1 = require("../state/z-index");
 const CompositionSelectorItem_1 = require("./CompositionSelectorItem");
 const CurrentComposition_1 = require("./CurrentComposition");
-const FramePersistor_1 = require("./FramePersistor");
-const TimelineInOutToggle_1 = require("./TimelineInOutToggle");
+const InitialCompositionLoader_1 = require("./InitialCompositionLoader");
 const container = {
     borderRight: '1px solid black',
     position: 'absolute',
     height: '100%',
     width: '100%',
     flex: 1,
+    backgroundColor: colors_1.BACKGROUND,
 };
 const list = {
     padding: 5,
@@ -34,32 +34,10 @@ const getKeysToExpand = (initialFolderName, parentFolderName, initial = []) => {
 };
 exports.getKeysToExpand = getKeysToExpand;
 const CompositionSelector = () => {
-    const { compositions, setCurrentComposition, currentComposition, folders } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
+    const { compositions, currentComposition, folders } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     const [foldersExpanded, setFoldersExpanded] = (0, react_1.useState)((0, persist_open_folders_1.loadExpandedFolders)());
     const { tabIndex } = (0, z_index_1.useZIndex)();
-    const setCurrentFrame = remotion_1.Internals.Timeline.useTimelineSetFrame();
-    const selectComposition = (0, react_1.useCallback)((c) => {
-        var _a;
-        (_a = TimelineInOutToggle_1.inOutHandles.current) === null || _a === void 0 ? void 0 : _a.setMarks((0, marks_1.loadMarks)(c.id, c.durationInFrames));
-        window.history.pushState({}, 'Preview', `/${c.id}`);
-        const frame = (0, FramePersistor_1.getFrameForComposition)(c.id);
-        const frameInBounds = Math.min(c.durationInFrames - 1, frame);
-        setCurrentFrame(frameInBounds);
-        setCurrentComposition(c.id);
-        const { folderName, parentFolderName } = c;
-        if (folderName !== null) {
-            setFoldersExpanded((ex) => {
-                const keysToExpand = (0, exports.getKeysToExpand)(folderName, parentFolderName);
-                const newState = {
-                    ...ex,
-                };
-                for (const key of keysToExpand) {
-                    newState[key] = true;
-                }
-                return newState;
-            });
-        }
-    }, [setCurrentComposition, setCurrentFrame]);
+    const selectComposition = (0, InitialCompositionLoader_1.useSelectComposition)();
     const toggleFolder = (0, react_1.useCallback)((folderName, parentName) => {
         setFoldersExpanded((p) => {
             var _a;
@@ -73,27 +51,11 @@ const CompositionSelector = () => {
             return foldersExpandedState;
         });
     }, []);
-    (0, react_1.useEffect)(() => {
-        if (currentComposition) {
-            return;
-        }
-        const compositionFromUrl = (0, FramePersistor_1.getCurrentCompositionFromUrl)();
-        if (compositionFromUrl) {
-            const exists = compositions.find((c) => c.id === compositionFromUrl);
-            if (exists) {
-                selectComposition(exists);
-                return;
-            }
-        }
-        if (compositions.length > 0) {
-            selectComposition(compositions[0]);
-        }
-    }, [compositions, currentComposition, selectComposition]);
     const items = (0, react_1.useMemo)(() => {
         return (0, create_folder_tree_1.createFolderTree)(compositions, folders, foldersExpanded);
     }, [compositions, folders, foldersExpanded]);
-    return ((0, jsx_runtime_1.jsxs)("div", { style: container, children: [(0, jsx_runtime_1.jsx)(CurrentComposition_1.CurrentComposition, {}, void 0), (0, jsx_runtime_1.jsx)("div", { style: list, children: items.map((c) => {
+    return ((0, jsx_runtime_1.jsxs)("div", { style: container, children: [(0, jsx_runtime_1.jsx)(CurrentComposition_1.CurrentComposition, {}), (0, jsx_runtime_1.jsx)("div", { style: list, children: items.map((c) => {
                     return ((0, jsx_runtime_1.jsx)(CompositionSelectorItem_1.CompositionSelectorItem, { level: 0, currentComposition: currentComposition, selectComposition: selectComposition, toggleFolder: toggleFolder, tabIndex: tabIndex, item: c }, c.key + c.type));
-                }) }, void 0)] }, void 0));
+                }) })] }));
 };
 exports.CompositionSelector = CompositionSelector;

package/dist/editor/components/CompositionSelectorItem.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { TComposition } from 'remotion';
+import type { TComposition } from 'remotion';
 export declare type CompositionSelectorItemType = {
     key: string;
     type: 'composition';
@@ -16,7 +16,7 @@ export declare const CompositionSelectorItem: React.FC<{
     item: CompositionSelectorItemType;
     currentComposition: string | null;
     tabIndex: number;
-    selectComposition: (c: TComposition) => void;
+    selectComposition: (c: TComposition, push: boolean) => void;
     toggleFolder: (folderName: string, parentName: string | null) => void;
     level: number;
 }>;

package/dist/editor/components/CompositionSelectorItem.js

@@ -22,6 +22,8 @@ const itemStyle = {
     appearance: 'none',
     border: 'none',
     width: '100%',
+    textAlign: 'left',
+    backgroundColor: colors_1.BACKGROUND,
 };
 const iconStyle = {
     width: 18,
@@ -58,19 +60,19 @@ const CompositionSelectorItem = ({ item, level, currentComposition, tabIndex, se
     const onClick = (0, react_1.useCallback)((evt) => {
         evt.preventDefault();
         if (item.type === 'composition') {
-            selectComposition(item.composition);
+            selectComposition(item.composition, true);
         }
         else {
             toggleFolder(item.folderName, item.parentName);
         }
     }, [item, selectComposition, toggleFolder]);
     if (item.type === 'folder') {
-        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("button", { style: style, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, tabIndex: tabIndex, onClick: onClick, type: "button", children: [item.expanded ? ((0, jsx_runtime_1.jsx)(folder_1.ExpandedFolderIcon, { style: iconStyle }, void 0)) : ((0, jsx_runtime_1.jsx)(folder_1.CollapsedFolderIcon, { style: iconStyle }, void 0)), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }, void 0), item.folderName] }, void 0), item.expanded
+        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("button", { style: style, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, tabIndex: tabIndex, onClick: onClick, type: "button", children: [item.expanded ? ((0, jsx_runtime_1.jsx)(folder_1.ExpandedFolderIcon, { style: iconStyle })) : ((0, jsx_runtime_1.jsx)(folder_1.CollapsedFolderIcon, { style: iconStyle })), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), item.folderName] }), item.expanded
                     ? item.items.map((childItem) => {
                         return ((0, jsx_runtime_1.jsx)(exports.CompositionSelectorItem, { currentComposition: currentComposition, selectComposition: selectComposition, item: childItem, tabIndex: tabIndex, level: level + 1, toggleFolder: toggleFolder }, childItem.key + childItem.type));
                     })
-                    : null] }, void 0));
+                    : null] }));
     }
-    return ((0, jsx_runtime_1.jsxs)("button", { style: style, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, tabIndex: tabIndex, onClick: onClick, type: "button", children: [(0, is_composition_still_1.isCompositionStill)(item.composition) ? ((0, jsx_runtime_1.jsx)(still_1.StillIcon, { style: iconStyle }, void 0)) : ((0, jsx_runtime_1.jsx)(film_1.FilmIcon, { style: iconStyle }, void 0)), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }, void 0), item.composition.id] }, void 0));
+    return ((0, jsx_runtime_1.jsxs)("button", { style: style, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, tabIndex: tabIndex, onClick: onClick, type: "button", children: [(0, is_composition_still_1.isCompositionStill)(item.composition) ? ((0, jsx_runtime_1.jsx)(still_1.StillIcon, { style: iconStyle })) : ((0, jsx_runtime_1.jsx)(film_1.FilmIcon, { style: iconStyle })), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), item.composition.id] }));
 };
 exports.CompositionSelectorItem = CompositionSelectorItem;

package/dist/editor/components/ControlButton.js

@@ -16,6 +16,6 @@ const ControlButton = (props) => {
         };
     }, [props.disabled]);
     const { tabIndex } = (0, z_index_1.useZIndex)();
-    return ((0, jsx_runtime_1.jsx)("button", { type: 'button', tabIndex: tabIndex, ...props, style: style }, void 0));
+    return ((0, jsx_runtime_1.jsx)("button", { type: 'button', tabIndex: tabIndex, ...props, style: style }));
 };
 exports.ControlButton = ControlButton;

package/dist/editor/components/CopyButton.js

@@ -11,7 +11,7 @@ const iconStyle = {
     height: 16,
     color: 'white',
 };
-const copyIcon = ((0, jsx_runtime_1.jsx)("svg", { "aria-hidden": "true", focusable: "false", "data-prefix": "far", "data-icon": "clipboard", className: "svg-inline--fa fa-clipboard fa-w-12", role: "img", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 384 512", style: iconStyle, children: (0, jsx_runtime_1.jsx)("path", { fill: "currentColor", d: "M336 64h-80c0-35.3-28.7-64-64-64s-64 28.7-64 64H48C21.5 64 0 85.5 0 112v352c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48V112c0-26.5-21.5-48-48-48zM192 40c13.3 0 24 10.7 24 24s-10.7 24-24 24-24-10.7-24-24 10.7-24 24-24zm144 418c0 3.3-2.7 6-6 6H54c-3.3 0-6-2.7-6-6V118c0-3.3 2.7-6 6-6h42v36c0 6.6 5.4 12 12 12h168c6.6 0 12-5.4 12-12v-36h42c3.3 0 6 2.7 6 6z" }, void 0) }, void 0));
+const copyIcon = ((0, jsx_runtime_1.jsx)("svg", { "aria-hidden": "true", focusable: "false", "data-prefix": "far", "data-icon": "clipboard", className: "svg-inline--fa fa-clipboard fa-w-12", role: "img", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 384 512", style: iconStyle, children: (0, jsx_runtime_1.jsx)("path", { fill: "currentColor", d: "M336 64h-80c0-35.3-28.7-64-64-64s-64 28.7-64 64H48C21.5 64 0 85.5 0 112v352c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48V112c0-26.5-21.5-48-48-48zM192 40c13.3 0 24 10.7 24 24s-10.7 24-24 24-24-10.7-24-24 10.7-24 24-24zm144 418c0 3.3-2.7 6-6 6H54c-3.3 0-6-2.7-6-6V118c0-3.3 2.7-6 6-6h42v36c0 6.6 5.4 12 12 12h168c6.6 0 12-5.4 12-12v-36h42c3.3 0 6 2.7 6 6z" }) }));
 const container = {
     padding: 10,
     cursor: 'pointer',
@@ -32,7 +32,7 @@ const labelStyle = {
 const CopyButton = ({ textToCopy, label, labelWhenCopied }) => {
     const [copied, setCopied] = (0, react_1.useState)(false);
     const onClick = (0, react_1.useCallback)(() => {
-        (0, copy_text_1.copyCmd)(textToCopy);
+        (0, copy_text_1.copyText)(textToCopy);
         setCopied(Date.now());
     }, [textToCopy]);
     (0, react_1.useEffect)(() => {
@@ -42,6 +42,6 @@ const CopyButton = ({ textToCopy, label, labelWhenCopied }) => {
         const to = setTimeout(() => setCopied(false), 2000);
         return () => clearTimeout(to);
     }, [copied]);
-    return ((0, jsx_runtime_1.jsx)("button", { onClick: onClick, style: button, type: "button", children: (0, jsx_runtime_1.jsxs)(layout_1.Row, { style: container, children: [copyIcon, (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1.5 }, void 0), ' ', (0, jsx_runtime_1.jsx)("span", { style: labelStyle, children: copied ? labelWhenCopied : label }, void 0)] }, void 0) }, void 0));
+    return ((0, jsx_runtime_1.jsx)("button", { onClick: onClick, style: button, type: "button", children: (0, jsx_runtime_1.jsxs)(layout_1.Row, { style: container, children: [copyIcon, (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1.5 }), ' ', (0, jsx_runtime_1.jsx)("span", { style: labelStyle, children: copied ? labelWhenCopied : label })] }) }));
 };
 exports.CopyButton = CopyButton;

package/dist/editor/components/CurrentComposition.js

@@ -4,6 +4,7 @@ exports.CurrentComposition = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
+const colors_1 = require("../helpers/colors");
 const is_composition_still_1 = require("../helpers/is-composition-still");
 const render_frame_1 = require("../state/render-frame");
 const rich_timeline_1 = require("../state/rich-timeline");
@@ -15,23 +16,27 @@ const container = {
     borderBottom: '1px solid black',
     padding: 16,
     color: 'white',
+    backgroundColor: colors_1.BACKGROUND,
 };
 const title = {
     fontWeight: 'bold',
     fontSize: 12,
     whiteSpace: 'nowrap',
     lineHeight: '18px',
+    backgroundColor: colors_1.BACKGROUND,
 };
 const subtitle = {
     fontSize: 12,
     opacity: 0.8,
     whiteSpace: 'nowrap',
     lineHeight: '18px',
+    backgroundColor: colors_1.BACKGROUND,
 };
 const row = {
     display: 'flex',
     flexDirection: 'row',
     lineHeight: '18px',
+    backgroundColor: colors_1.BACKGROUND,
 };
 const targetHeight = 60;
 const targetWidth = (targetHeight * 16) / 9;
@@ -46,9 +51,9 @@ const CurrentComposition = () => {
         document.title = `${video.id} / ${window.remotion_projectName} - Remotion Preview`;
     }, [video]);
     if (!video) {
-        return (0, jsx_runtime_1.jsx)("div", { style: container }, void 0);
+        return (0, jsx_runtime_1.jsx)("div", { style: container });
     }
     const frameToDisplay = Math.floor(video.durationInFrames / 2);
-    return ((0, jsx_runtime_1.jsx)("div", { style: container, children: (0, jsx_runtime_1.jsxs)("div", { style: row, children: [richTimelineContext.richTimeline ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Thumbnail_1.Thumbnail, { composition: video, targetHeight: targetHeight, targetWidth: targetWidth, frameToDisplay: frameToDisplay }, void 0), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }, void 0)] }, void 0)) : null, (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { style: title, children: video.id }, void 0), (0, jsx_runtime_1.jsxs)("div", { style: subtitle, children: [video.width, "x", video.height, (0, is_composition_still_1.isCompositionStill)(video) ? null : `, ${video.fps} FPS`] }, void 0), (0, is_composition_still_1.isCompositionStill)(video) ? ((0, jsx_runtime_1.jsx)("div", { style: subtitle, children: "Still" }, void 0)) : ((0, jsx_runtime_1.jsxs)("div", { style: subtitle, children: ["Duration ", (0, render_frame_1.renderFrame)(video.durationInFrames, video.fps)] }, void 0))] }, void 0)] }, void 0) }, void 0));
+    return ((0, jsx_runtime_1.jsx)("div", { style: container, children: (0, jsx_runtime_1.jsxs)("div", { style: row, children: [richTimelineContext.richTimeline ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Thumbnail_1.Thumbnail, { composition: video, targetHeight: targetHeight, targetWidth: targetWidth, frameToDisplay: frameToDisplay }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 })] })) : null, (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { style: title, children: video.id }), (0, jsx_runtime_1.jsxs)("div", { style: subtitle, children: [video.width, "x", video.height, (0, is_composition_still_1.isCompositionStill)(video) ? null : `, ${video.fps} FPS`] }), (0, is_composition_still_1.isCompositionStill)(video) ? ((0, jsx_runtime_1.jsx)("div", { style: subtitle, children: "Still" })) : ((0, jsx_runtime_1.jsxs)("div", { style: subtitle, children: ["Duration ", (0, render_frame_1.renderFrame)(video.durationInFrames, video.fps)] }))] })] }) }));
 };
 exports.CurrentComposition = CurrentComposition;

package/dist/editor/components/Editor.js

@@ -11,19 +11,26 @@ const remotion_1 = require("remotion");
 const colors_1 = require("../helpers/colors");
 const noop_1 = require("../helpers/noop");
 const checkerboard_1 = require("../state/checkerboard");
+const folders_1 = require("../state/folders");
 const highest_z_index_1 = require("../state/highest-z-index");
+const in_out_1 = require("../state/in-out");
 const keybindings_1 = require("../state/keybindings");
 const modals_1 = require("../state/modals");
 const mute_1 = require("../state/mute");
 const preview_size_1 = require("../state/preview-size");
 const rich_timeline_1 = require("../state/rich-timeline");
+const sidebar_1 = require("../state/sidebar");
+const timeline_zoom_1 = require("../state/timeline-zoom");
 const z_index_1 = require("../state/z-index");
 const EditorContent_1 = require("./EditorContent");
 const FramePersistor_1 = require("./FramePersistor");
 const GlobalKeybindings_1 = require("./GlobalKeybindings");
 const KeyboardShortcutsModal_1 = require("./KeyboardShortcutsModal");
 const NewComposition_1 = __importDefault(require("./NewComposition/NewComposition"));
+const NoRegisterRoot_1 = require("./NoRegisterRoot");
+const NotificationCenter_1 = require("./Notifications/NotificationCenter");
 const UpdateModal_1 = require("./UpdateModal/UpdateModal");
+const ZoomPersistor_1 = require("./ZoomPersistor");
 const background = {
     backgroundColor: colors_1.BACKGROUND,
     display: 'flex',
@@ -32,10 +39,16 @@ const background = {
     flexDirection: 'column',
     position: 'absolute',
 };
-const Root = remotion_1.Internals.getRoot();
 const Editor = () => {
     const [emitter] = (0, react_1.useState)(() => new player_1.PlayerInternals.PlayerEmitter());
     const [size, setSizeState] = (0, react_1.useState)(() => (0, preview_size_1.loadPreviewSizeOption)());
+    const [Root, setRoot] = (0, react_1.useState)(() => remotion_1.Internals.getRoot());
+    const [waitForRoot] = (0, react_1.useState)(() => {
+        if (Root) {
+            return 0;
+        }
+        return (0, remotion_1.delayRender)('Waiting for registerRoot()');
+    });
     const [checkerboard, setCheckerboardState] = (0, react_1.useState)(() => (0, checkerboard_1.loadCheckerboardOption)());
     const setCheckerboard = (0, react_1.useCallback)((newValue) => {
         setCheckerboardState((prevState) => {
@@ -110,12 +123,19 @@ const Editor = () => {
             setSelectedModal: setModalContextType,
         };
     }, [modalContextType]);
-    if (!Root) {
-        throw new Error('Root has not been registered. ');
-    }
-    return ((0, jsx_runtime_1.jsx)(keybindings_1.KeybindingContextProvider, { children: (0, jsx_runtime_1.jsx)(rich_timeline_1.RichTimelineContext.Provider, { value: richTimelineCtx, children: (0, jsx_runtime_1.jsx)(checkerboard_1.CheckerboardContext.Provider, { value: checkerboardCtx, children: (0, jsx_runtime_1.jsx)(preview_size_1.PreviewSizeContext.Provider, { value: previewSizeCtx, children: (0, jsx_runtime_1.jsx)(modals_1.ModalsContext.Provider, { value: modalsContext, children: (0, jsx_runtime_1.jsx)(remotion_1.Internals.Timeline.TimelineInOutContext.Provider, { value: timelineInOutContextValue, children: (0, jsx_runtime_1.jsx)(remotion_1.Internals.Timeline.SetTimelineInOutContext.Provider, { value: setTimelineInOutContextValue, children: (0, jsx_runtime_1.jsx)(remotion_1.Internals.MediaVolumeContext.Provider, { value: mediaVolumeContextValue, children: (0, jsx_runtime_1.jsx)(remotion_1.Internals.SetMediaVolumeContext.Provider, { value: setMediaVolumeContextValue, children: (0, jsx_runtime_1.jsx)(player_1.PlayerInternals.PlayerEventEmitterContext.Provider, { value: emitter, children: (0, jsx_runtime_1.jsx)(highest_z_index_1.HighestZIndexProvider, { children: (0, jsx_runtime_1.jsxs)(z_index_1.HigherZIndex, { onEscape: noop_1.noop, onOutsideClick: noop_1.noop, children: [(0, jsx_runtime_1.jsxs)("div", { style: background, children: [(0, jsx_runtime_1.jsx)(Root, {}, void 0), (0, jsx_runtime_1.jsx)(FramePersistor_1.FramePersistor, {}, void 0), (0, jsx_runtime_1.jsx)(EditorContent_1.EditorContent, {}, void 0), (0, jsx_runtime_1.jsx)(GlobalKeybindings_1.GlobalKeybindings, {}, void 0)] }, void 0), modalContextType &&
-                                                            modalContextType.type === 'new-comp' && ((0, jsx_runtime_1.jsx)(NewComposition_1.default, { initialCompType: modalContextType.compType }, void 0)), modalContextType &&
-                                                            modalContextType.type === 'update' && ((0, jsx_runtime_1.jsx)(UpdateModal_1.UpdateModal, { info: modalContextType.info }, void 0)), modalContextType &&
-                                                            modalContextType.type === 'shortcuts' && ((0, jsx_runtime_1.jsx)(KeyboardShortcutsModal_1.KeyboardShortcuts, {}, void 0))] }, void 0) }, void 0) }, void 0) }, void 0) }, void 0) }, void 0) }, void 0) }, void 0) }, void 0) }, void 0) }, void 0) }, void 0));
+    (0, react_1.useEffect)(() => {
+        if (Root) {
+            return;
+        }
+        const cleanup = remotion_1.Internals.waitForRoot((NewRoot) => {
+            setRoot(() => NewRoot);
+            (0, remotion_1.continueRender)(waitForRoot);
+        });
+        return () => cleanup();
+    }, [Root, waitForRoot]);
+    return ((0, jsx_runtime_1.jsx)(keybindings_1.KeybindingContextProvider, { children: (0, jsx_runtime_1.jsx)(rich_timeline_1.RichTimelineContext.Provider, { value: richTimelineCtx, children: (0, jsx_runtime_1.jsx)(checkerboard_1.CheckerboardContext.Provider, { value: checkerboardCtx, children: (0, jsx_runtime_1.jsx)(preview_size_1.PreviewSizeContext.Provider, { value: previewSizeCtx, children: (0, jsx_runtime_1.jsx)(modals_1.ModalsContext.Provider, { value: modalsContext, children: (0, jsx_runtime_1.jsx)(in_out_1.TimelineInOutContext.Provider, { value: timelineInOutContextValue, children: (0, jsx_runtime_1.jsx)(in_out_1.SetTimelineInOutContext.Provider, { value: setTimelineInOutContextValue, children: (0, jsx_runtime_1.jsx)(remotion_1.Internals.MediaVolumeContext.Provider, { value: mediaVolumeContextValue, children: (0, jsx_runtime_1.jsx)(remotion_1.Internals.SetMediaVolumeContext.Provider, { value: setMediaVolumeContextValue, children: (0, jsx_runtime_1.jsx)(player_1.PlayerInternals.PlayerEventEmitterContext.Provider, { value: emitter, children: (0, jsx_runtime_1.jsx)(sidebar_1.SidebarContextProvider, { children: (0, jsx_runtime_1.jsx)(folders_1.FolderContextProvider, { children: (0, jsx_runtime_1.jsx)(highest_z_index_1.HighestZIndexProvider, { children: (0, jsx_runtime_1.jsxs)(z_index_1.HigherZIndex, { onEscape: noop_1.noop, onOutsideClick: noop_1.noop, children: [(0, jsx_runtime_1.jsx)(timeline_zoom_1.TimelineZoomContext, { children: (0, jsx_runtime_1.jsxs)("div", { style: background, children: [Root === null ? null : (0, jsx_runtime_1.jsx)(Root, {}), (0, jsx_runtime_1.jsxs)(remotion_1.Internals.CanUseRemotionHooksProvider, { children: [(0, jsx_runtime_1.jsx)(FramePersistor_1.FramePersistor, {}), (0, jsx_runtime_1.jsx)(ZoomPersistor_1.ZoomPersistor, {}), Root === null ? ((0, jsx_runtime_1.jsx)(NoRegisterRoot_1.NoRegisterRoot, {})) : ((0, jsx_runtime_1.jsx)(EditorContent_1.EditorContent, {})), (0, jsx_runtime_1.jsx)(GlobalKeybindings_1.GlobalKeybindings, {})] })] }) }), (0, jsx_runtime_1.jsx)(NotificationCenter_1.NotificationCenter, {}), modalContextType &&
+                                                                    modalContextType.type === 'new-comp' && ((0, jsx_runtime_1.jsx)(NewComposition_1.default, { initialCompType: modalContextType.compType })), modalContextType &&
+                                                                    modalContextType.type === 'update' && ((0, jsx_runtime_1.jsx)(UpdateModal_1.UpdateModal, { info: modalContextType.info })), modalContextType &&
+                                                                    modalContextType.type === 'shortcuts' && ((0, jsx_runtime_1.jsx)(KeyboardShortcutsModal_1.KeyboardShortcuts, {}))] }) }) }) }) }) }) }) }) }) }) }) }) }) }));
 };
 exports.Editor = Editor;

package/dist/editor/components/EditorContent.js

@@ -8,11 +8,12 @@ const SplitterElement_1 = require("./Splitter/SplitterElement");
 const SplitterHandle_1 = require("./Splitter/SplitterHandle");
 const Timeline_1 = require("./Timeline/Timeline");
 const TopPanel_1 = require("./TopPanel");
+const noop = () => undefined;
 const EditorContent = () => {
     const isStill = (0, is_current_selected_still_1.useIsStill)();
     if (isStill) {
-        return (0, jsx_runtime_1.jsx)(TopPanel_1.TopPanel, {}, void 0);
+        return (0, jsx_runtime_1.jsx)(TopPanel_1.TopPanel, {});
     }
-    return ((0, jsx_runtime_1.jsxs)(SplitterContainer_1.SplitterContainer, { orientation: "horizontal", id: "top-to-bottom", maxFlex: 0.9, minFlex: 0.2, defaultFlex: 0.75, children: [(0, jsx_runtime_1.jsx)(SplitterElement_1.SplitterElement, { type: "flexer", children: (0, jsx_runtime_1.jsx)(TopPanel_1.TopPanel, {}, void 0) }, void 0), (0, jsx_runtime_1.jsx)(SplitterHandle_1.SplitterHandle, {}, void 0), (0, jsx_runtime_1.jsx)(SplitterElement_1.SplitterElement, { type: "anti-flexer", children: (0, jsx_runtime_1.jsx)(Timeline_1.Timeline, {}, void 0) }, void 0)] }, void 0));
+    return ((0, jsx_runtime_1.jsxs)(SplitterContainer_1.SplitterContainer, { orientation: "horizontal", id: "top-to-bottom", maxFlex: 0.9, minFlex: 0.2, defaultFlex: 0.75, children: [(0, jsx_runtime_1.jsx)(SplitterElement_1.SplitterElement, { type: "flexer", children: (0, jsx_runtime_1.jsx)(TopPanel_1.TopPanel, {}) }), (0, jsx_runtime_1.jsx)(SplitterHandle_1.SplitterHandle, { allowToCollapse: false, onCollapse: noop }), (0, jsx_runtime_1.jsx)(SplitterElement_1.SplitterElement, { type: "anti-flexer", children: (0, jsx_runtime_1.jsx)(Timeline_1.Timeline, {}) })] }));
 };
 exports.EditorContent = EditorContent;

package/dist/editor/components/FpsCounter.js

@@ -69,6 +69,6 @@ const FpsCounter = ({ playbackSpeed }) => {
     if (videoConfig === null) {
         return null;
     }
-    return (0, jsx_runtime_1.jsxs)("div", { style: style, children: [fps.toFixed(1), " FPS"] }, void 0);
+    return (0, jsx_runtime_1.jsxs)("div", { style: style, children: [fps.toFixed(1), " FPS"] });
 };
 exports.FpsCounter = FpsCounter;

package/dist/editor/components/FramePersistor.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import type React from 'react';
 export declare const getCurrentCompositionFromUrl: () => string;
 export declare const persistCurrentFrame: (frame: number) => void;
 export declare const getFrameForComposition: (composition: string) => number;

package/dist/editor/components/GlobalKeybindings.d.ts

@@ -1,2 +1,2 @@
-import React from 'react';
+import type React from 'react';
 export declare const GlobalKeybindings: React.FC;

package/dist/editor/components/GlobalKeybindings.js

@@ -10,19 +10,34 @@ const GlobalKeybindings = () => {
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
     const { setCheckerboard } = (0, react_1.useContext)(checkerboard_1.CheckerboardContext);
     (0, react_1.useEffect)(() => {
-        const nKey = keybindings.registerKeybinding('keypress', 'n', () => {
-            setSelectedModal({
-                type: 'new-comp',
-                compType: 'composition',
-            });
+        const nKey = keybindings.registerKeybinding({
+            event: 'keypress',
+            key: 'n',
+            callback: () => {
+                setSelectedModal({
+                    type: 'new-comp',
+                    compType: 'composition',
+                });
+            },
+            commandCtrlKey: false,
         });
-        const cKey = keybindings.registerKeybinding('keypress', 't', () => {
-            setCheckerboard((c) => !c);
+        const cKey = keybindings.registerKeybinding({
+            event: 'keypress',
+            key: 't',
+            callback: () => {
+                setCheckerboard((c) => !c);
+            },
+            commandCtrlKey: true,
         });
-        const questionMark = keybindings.registerKeybinding('keypress', '?', () => {
-            setSelectedModal({
-                type: 'shortcuts',
-            });
+        const questionMark = keybindings.registerKeybinding({
+            event: 'keypress',
+            key: '?',
+            callback: () => {
+                setSelectedModal({
+                    type: 'shortcuts',
+                });
+            },
+            commandCtrlKey: false,
         });
         return () => {
             nKey.unregister();

package/dist/editor/components/InitialCompositionLoader.d.ts

@@ -0,0 +1,4 @@
+import type React from 'react';
+import type { TComposition } from 'remotion';
+export declare const useSelectComposition: () => (c: TComposition, push: boolean) => void;
+export declare const InitialCompositionLoader: React.FC;