@remotion/cli 4.1.0-alpha1 → 4.1.0-alpha10

package/dist/benchmark.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.benchmarkCommand = void 0;
 const renderer_1 = require("@remotion/renderer");
+const remotion_1 = require("remotion");
 const chalk_1 = require("./chalk");
 const cleanup_before_quit_1 = require("./cleanup-before-quit");
 const config_1 = require("./config");
@@ -103,11 +104,11 @@ const benchmarkCommand = async (remotionRoot, args) => {
     const browserInstance = renderer_1.RenderInternals.internalOpenBrowser({
         browser,
         browserExecutable,
-        shouldDumpIo: renderer_1.RenderInternals.isEqualOrBelowLogLevel(config_1.ConfigInternals.Logging.getLogLevel(), 'verbose'),
         chromiumOptions,
         forceDeviceScaleFactor: scale,
         indent: false,
         viewport: null,
+        logLevel,
     });
     const { urlOrBundle: bundleLocation, cleanup: cleanupBundle } = await (0, setup_cache_1.bundleOnCliOrTakeServeUrl)({
         fullPath: fullEntryPoint,
@@ -125,10 +126,14 @@ const benchmarkCommand = async (remotionRoot, args) => {
     });
     (0, cleanup_before_quit_1.registerCleanupJob)(() => cleanupBundle());
     const puppeteerInstance = await browserInstance;
-    const verbose = renderer_1.RenderInternals.isEqualOrBelowLogLevel(config_1.ConfigInternals.Logging.getLogLevel(), 'verbose');
+    const serializedInputPropsWithCustomSchema = remotion_1.Internals.serializeJSONWithDate({
+        data: inputProps !== null && inputProps !== void 0 ? inputProps : {},
+        indent: undefined,
+        staticBase: null,
+    }).serializedString;
     const comps = await renderer_1.RenderInternals.internalGetCompositions({
         serveUrlOrWebpackUrl: bundleLocation,
-        inputProps,
+        serializedInputPropsWithCustomSchema,
         envVariables,
         chromiumOptions,
         timeoutInMilliseconds: puppeteerTimeout,
@@ -139,7 +144,7 @@ const benchmarkCommand = async (remotionRoot, args) => {
         onBrowserLog: null,
         //  Intentionally disabling server to not cache results
         server: undefined,
-        verbose,
+        logLevel,
     });
     const ids = (remainingArgs[0]
         ? remainingArgs[0]
@@ -192,19 +197,18 @@ const benchmarkCommand = async (remotionRoot, args) => {
                     codec,
                     uiImageFormat: null,
                 }),
-                inputProps,
+                serializedInputPropsWithCustomSchema,
                 overwrite,
                 pixelFormat,
                 proResProfile,
                 jpegQuality,
-                dumpBrowserLogs: verbose,
                 chromiumOptions,
                 timeoutInMilliseconds: config_1.ConfigInternals.getCurrentPuppeteerTimeout(),
                 scale: configFileScale,
                 port,
                 numberOfGifLoops,
                 everyNthFrame,
-                verbose,
+                logLevel,
                 muted,
                 enforceAudioTrack,
                 browserExecutable,
@@ -225,6 +229,11 @@ const benchmarkCommand = async (remotionRoot, args) => {
                 onStart: () => undefined,
                 preferLossless: false,
                 server: undefined,
+                serializedResolvedPropsWithCustomSchema: remotion_1.Internals.serializeJSONWithDate({
+                    data: composition.props,
+                    indent: undefined,
+                    staticBase: null,
+                }).serializedString,
             }, (run, progress) => {
                 benchmarkProgress.update(makeBenchmarkProgressBar({
                     totalRuns: runs,

package/dist/chalk/index.d.ts

@@ -1,5 +1,5 @@
 export declare const chalk: {
-    enabled: boolean;
+    enabled: () => boolean;
     visible: boolean;
     styles: Record<string, {
         codes: [number, number];
@@ -23,6 +23,7 @@ export declare const chalk: {
     yellow: (str: string) => string;
     blue: (str: string) => string;
     magenta: (str: string) => string;
+    cyan: (str: string) => string;
     white: (str: string) => string;
     gray: (str: string) => string;
     bgBlack: (str: string) => string;

package/dist/codemods/stringify-with-path.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.stringifyDefaultProps = void 0;
-const input_props_serialization_1 = require("../editor/components/RenderModal/SchemaEditor/input-props-serialization");
+const remotion_1 = require("remotion");
 const doesMatchPath = (path1, enumPaths) => {
     return enumPaths.some((p) => path1.every((item, index) => {
         if (p[index] === '[]' && !Number.isNaN(Number(item))) {
@@ -13,24 +13,29 @@ const doesMatchPath = (path1, enumPaths) => {
         return item === p[index];
     }));
 };
-const stringifyDefaultProps = ({ props, enumPaths, }) => JSON.stringify(props, replacerWithPath(function (key, value, path) {
-    /* Don't replace with arrow function */ const item = this[key];
-    if (item instanceof Date) {
-        return `__REMOVEQUOTE__new Date('${item.toISOString()}')__REMOVEQUOTE__`;
-    }
-    if (typeof item === 'string' && doesMatchPath(path, enumPaths)) {
-        return `${item}__ADD_AS_CONST__`;
-    }
-    if (typeof item === 'string' && item.startsWith(input_props_serialization_1.FILE_TOKEN)) {
-        return `__REMOVEQUOTE____WRAP_IN_STATIC_FILE_START__${decodeURIComponent(item.replace(input_props_serialization_1.FILE_TOKEN, ''))}__WRAP_IN_STATIC_FILE_END____REMOVEQUOTE__`;
-    }
-    return value;
-}))
-    .replace(/"__REMOVEQUOTE__/g, '')
-    .replace(/__REMOVEQUOTE__"/g, '')
-    .replace(/__ADD_AS_CONST__"/g, '" as const')
-    .replace(/__WRAP_IN_STATIC_FILE_START__/g, 'staticFile("')
-    .replace(/__WRAP_IN_STATIC_FILE_END__/g, '")');
+const stringifyDefaultProps = ({ props, enumPaths, }) => {
+    return JSON.stringify(props, replacerWithPath(function (key, value, path) {
+        /* Don't replace with arrow function! This function uses `this` */
+        const item = this[key];
+        if (typeof item === 'string' && doesMatchPath(path, enumPaths)) {
+            return `${item}__ADD_AS_CONST__`;
+        }
+        if (typeof item === 'string' && item.startsWith(remotion_1.Internals.FILE_TOKEN)) {
+            return `__REMOVEQUOTE____WRAP_IN_STATIC_FILE_START__${decodeURIComponent(item.replace(remotion_1.Internals.FILE_TOKEN, ''))}__WRAP_IN_STATIC_FILE_END____REMOVEQUOTE__`;
+        }
+        if (typeof item === 'string' && item.startsWith(remotion_1.Internals.DATE_TOKEN)) {
+            return `__REMOVEQUOTE____WRAP_IN_DATE_START__${decodeURIComponent(item.replace(remotion_1.Internals.DATE_TOKEN, ''))}__WRAP_IN_DATE_END____REMOVEQUOTE__`;
+        }
+        return value;
+    }))
+        .replace(/"__REMOVEQUOTE__/g, '')
+        .replace(/__REMOVEQUOTE__"/g, '')
+        .replace(/__ADD_AS_CONST__"/g, '" as const')
+        .replace(/__WRAP_IN_STATIC_FILE_START__/g, 'staticFile("')
+        .replace(/__WRAP_IN_STATIC_FILE_END__/g, '")')
+        .replace(/__WRAP_IN_DATE_START__/g, 'new Date("')
+        .replace(/__WRAP_IN_DATE_END__/g, '")');
+};
 exports.stringifyDefaultProps = stringifyDefaultProps;
 function replacerWithPath(replacer) {
     const m = new Map();

package/dist/compositions.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.listCompositionsCommand = void 0;
 const renderer_1 = require("@remotion/renderer");
+const remotion_1 = require("remotion");
 const cleanup_before_quit_1 = require("./cleanup-before-quit");
 const config_1 = require("./config");
 const entry_point_1 = require("./entry-point");
@@ -17,7 +18,7 @@ const listCompositionsCommand = async (remotionRoot, args) => {
         log_1.Log.error('See https://www.remotion.dev/docs/register-root for more information.');
         process.exit(1);
     }
-    const verbose = renderer_1.RenderInternals.isEqualOrBelowLogLevel(config_1.ConfigInternals.Logging.getLogLevel(), 'verbose');
+    const logLevel = config_1.ConfigInternals.Logging.getLogLevel();
     log_1.Log.verbose('Entry point:', file, 'reason:', reason);
     const { browserExecutable, chromiumOptions, envVariables, inputProps, puppeteerTimeout, port, publicDir, } = await (0, get_cli_options_1.getCliOptions)({
         isLambda: false,
@@ -30,7 +31,7 @@ const listCompositionsCommand = async (remotionRoot, args) => {
         publicDir,
         onProgress: () => undefined,
         indentOutput: false,
-        logLevel: config_1.ConfigInternals.Logging.getLogLevel(),
+        logLevel,
         bundlingStep: 0,
         steps: 1,
         onDirectoryCreated: (dir) => {
@@ -44,13 +45,17 @@ const listCompositionsCommand = async (remotionRoot, args) => {
         browserExecutable,
         chromiumOptions,
         envVariables,
-        inputProps,
+        serializedInputPropsWithCustomSchema: remotion_1.Internals.serializeJSONWithDate({
+            data: inputProps,
+            staticBase: null,
+            indent: undefined,
+        }).serializedString,
         timeoutInMilliseconds: puppeteerTimeout,
         port,
         indent: false,
         onBrowserLog: null,
         puppeteerInstance: undefined,
-        verbose,
+        logLevel,
         server: undefined,
     });
     (0, print_compositions_1.printCompositions)(compositions);

package/dist/config/index.d.ts

@@ -245,6 +245,30 @@ type FlatConfig = RemotionConfigObject & RemotionBundlingOptions & {
      * See the Encoding guide in the docs for defaults and available options.
      */
     setAudioCodec: (codec: 'pcm-16' | 'aac' | 'mp3' | 'opus') => void;
+    /**
+     * @deprecated 'The config format has changed. Change `Config.Bundling.*()` calls to `Config.*()` in your config file.'
+     */
+    Bundling: void;
+    /**
+     * @deprecated 'The config format has changed. Change `Config.Preview.*()` calls to `Config.*()` in your config file.'
+     */
+    Preview: void;
+    /**
+     * @deprecated 'The config format has changed. Change `Config.Log.*()` calls to `Config.*()` in your config file.'
+     */
+    Log: void;
+    /**
+     * @deprecated 'The config format has changed. Change `Config.Puppeteer.*()` calls to `Config.*()` in your config file.'
+     */
+    Puppeteer: void;
+    /**
+     * @deprecated 'The config format has changed. Change `Config.Rendering.*()` calls to `Config.*()` in your config file.'
+     */
+    Rendering: void;
+    /**
+     * @deprecated 'The config format has changed. Change `Config.Output.*()` calls to `Config.*()` in your config file.'
+     */
+    Output: void;
 };
 export declare const Config: FlatConfig;
 export type { Concurrency, WebpackConfiguration, WebpackOverrideFn };

package/dist/config/index.js

@@ -83,6 +83,24 @@ const webpack_caching_2 = require("./webpack-caching");
 const webpack_poll_1 = require("./webpack-poll");
 const width_1 = require("./width");
 exports.Config = {
+    get Bundling() {
+        throw new Error('The config format has changed. Change `Config.Bundling.*()` calls to `Config.*()` in your config file.');
+    },
+    get Rendering() {
+        throw new Error('The config format has changed. Change `Config.Rendering.*()` calls to `Config.*()` in your config file.');
+    },
+    get Output() {
+        throw new Error('The config format has changed. Change `Config.Output.*()` calls to `Config.*()` in your config file.');
+    },
+    get Log() {
+        throw new Error('The config format has changed. Change `Config.Log.*()` calls to `Config.*()` in your config file.');
+    },
+    get Preview() {
+        throw new Error('The config format has changed. Change `Config.Preview.*()` calls to `Config.*()` in your config file.');
+    },
+    get Puppeteer() {
+        throw new Error('The config format has changed. Change `Config.Puppeteer.*()` calls to `Config.*()` in your config file.');
+    },
     setMaxTimelineTracks: max_timeline_tracks_2.setMaxTimelineTracks,
     setKeyboardShortcutsEnabled: keyboard_shortcuts_1.setKeyboardShortcutsEnabled,
     setNumberOfSharedAudioTags: number_of_shared_audio_tags_1.setNumberOfSharedAudioTags,
@@ -108,7 +126,7 @@ exports.Config = {
         throw new Error('setQuality() has been renamed - use setJpegQuality() instead.');
     },
     setImageFormat: () => {
-        throw new Error('setImageFormat() has been renamed - use setVideoImageFormat() or setStillImageFormat() instead.');
+        throw new Error('Config.setImageFormat() has been renamed - use Config.setVideoImageFormat() instead (default "jpeg"). For rendering stills, use Config.setStillImageFormat() (default "png")');
     },
     setJpegQuality: jpeg_quality_2.setJpegQuality,
     setStillImageFormat: image_format_1.setStillImageFormat,

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

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

package/dist/editor/components/AssetSelector.js

@@ -0,0 +1,30 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AssetSelector = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importDefault(require("react"));
+const remotion_1 = require("remotion");
+const colors_1 = require("../helpers/colors");
+const z_index_1 = require("../state/z-index");
+const AssetSelectorItem_1 = require("./AssetSelectorItem");
+const container = {
+    display: 'flex',
+    flexDirection: 'column',
+    flex: 1,
+    overflow: 'hidden',
+    backgroundColor: colors_1.BACKGROUND,
+};
+const list = {
+    overflowY: 'auto',
+};
+const AssetSelector = () => {
+    const { tabIndex } = (0, z_index_1.useZIndex)();
+    const staticFiles = react_1.default.useMemo(() => (0, remotion_1.getStaticFiles)(), []);
+    return ((0, jsx_runtime_1.jsx)("div", { style: container, children: (0, jsx_runtime_1.jsx)("div", { className: "__remotion-vertical-scrollbar", style: list, children: staticFiles.map((file) => {
+                return ((0, jsx_runtime_1.jsx)(AssetSelectorItem_1.AssetSelectorItem, { item: file, tabIndex: tabIndex }, `${file.src}`));
+            }) }) }));
+};
+exports.AssetSelector = AssetSelector;

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

@@ -0,0 +1,6 @@
+import React from 'react';
+import type { StaticFile } from 'remotion';
+export declare const AssetSelectorItem: React.FC<{
+    item: StaticFile;
+    tabIndex: number;
+}>;

package/dist/editor/components/AssetSelectorItem.js

@@ -0,0 +1,109 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AssetSelectorItem = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importStar(require("react"));
+const colors_1 = require("../helpers/colors");
+const file_1 = require("../icons/file");
+const folder_1 = require("../icons/folder");
+const InlineAction_1 = require("./InlineAction");
+const layout_1 = require("./layout");
+const NotificationCenter_1 = require("./Notifications/NotificationCenter");
+const actions_1 = require("./RenderQueue/actions");
+const ASSET_ITEM_HEIGHT = 32;
+const itemStyle = {
+    paddingRight: 10,
+    paddingTop: 6,
+    paddingBottom: 6,
+    fontSize: 13,
+    display: 'flex',
+    textDecoration: 'none',
+    cursor: 'default',
+    alignItems: 'center',
+    marginBottom: 1,
+    appearance: 'none',
+    border: 'none',
+    width: '100%',
+    textAlign: 'left',
+    backgroundColor: colors_1.BACKGROUND,
+    height: ASSET_ITEM_HEIGHT,
+};
+const labelStyle = {
+    textAlign: 'left',
+    textDecoration: 'none',
+    fontSize: 13,
+    flex: '1 1 0%',
+    whiteSpace: 'nowrap',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+};
+const iconStyle = {
+    width: 18,
+    height: 18,
+    flexShrink: 0,
+};
+const revealIconStyle = {
+    height: 12,
+    color: 'currentColor',
+};
+const AssetSelectorItem = ({ item, tabIndex }) => {
+    const [hovered, setHovered] = (0, react_1.useState)(false);
+    const onPointerEnter = (0, react_1.useCallback)(() => {
+        setHovered(true);
+    }, []);
+    const onPointerLeave = (0, react_1.useCallback)(() => {
+        setHovered(false);
+    }, []);
+    const style = (0, react_1.useMemo)(() => {
+        return {
+            ...itemStyle,
+            backgroundColor: hovered ? colors_1.CLEAR_HOVER : 'transparent',
+            paddingLeft: 12,
+            color: hovered ? 'white' : colors_1.LIGHT_TEXT,
+        };
+    }, [hovered]);
+    const label = (0, react_1.useMemo)(() => {
+        return {
+            ...labelStyle,
+            color: hovered ? 'white' : colors_1.LIGHT_TEXT,
+        };
+    }, [hovered]);
+    const onClick = (0, react_1.useCallback)(() => {
+        console.log('Clicked', item);
+    }, [item]);
+    const renderAction = (0, react_1.useCallback)((color) => {
+        return (0, jsx_runtime_1.jsx)(folder_1.ExpandedFolderIconSolid, { style: revealIconStyle, color: color });
+    }, []);
+    const revealInExplorer = react_1.default.useCallback(() => {
+        (0, actions_1.openInFileExplorer)({
+            directory: 'public/' + item.name,
+        }).catch((err) => {
+            (0, NotificationCenter_1.sendErrorNotification)(`Could not open file: ${err.message}`);
+        });
+    }, [item.name]);
+    return ((0, jsx_runtime_1.jsx)(layout_1.Row, { align: "center", children: (0, jsx_runtime_1.jsxs)("button", { style: style, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, tabIndex: tabIndex, onClick: onClick, type: "button", title: item.name, children: [(0, jsx_runtime_1.jsx)(file_1.FileIcon, { style: iconStyle, color: hovered ? 'white' : colors_1.LIGHT_TEXT }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), (0, jsx_runtime_1.jsx)("div", { style: label, children: item.name }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.5 }), (0, jsx_runtime_1.jsx)(InlineAction_1.InlineAction, { renderAction: renderAction, onClick: revealInExplorer })] }) }));
+};
+exports.AssetSelectorItem = AssetSelectorItem;

package/dist/editor/components/Canvas.js

@@ -9,6 +9,7 @@ const colors_1 = require("../helpers/colors");
 const get_effective_translation_1 = require("../helpers/get-effective-translation");
 const is_current_selected_still_1 = require("../helpers/is-current-selected-still");
 const use_keybinding_1 = require("../helpers/use-keybinding");
+const canvas_ref_1 = require("../state/canvas-ref");
 const editor_zoom_gestures_1 = require("../state/editor-zoom-gestures");
 const preview_size_1 = require("../state/preview-size");
 const layout_1 = require("./layout");
@@ -29,11 +30,10 @@ const resetZoom = {
 const ZOOM_PX_FACTOR = 0.003;
 const Canvas = () => {
     const dimensions = (0, is_current_selected_still_1.useDimensions)();
-    const ref = (0, react_1.useRef)(null);
     const { setSize, size: previewSize } = (0, react_1.useContext)(preview_size_1.PreviewSizeContext);
     const { editorZoomGestures } = (0, react_1.useContext)(editor_zoom_gestures_1.EditorZoomGesturesContext);
     const keybindings = (0, use_keybinding_1.useKeybinding)();
-    const size = player_1.PlayerInternals.useElementSize(ref, {
+    const size = player_1.PlayerInternals.useElementSize(canvas_ref_1.canvasRef, {
         triggerOnWindowResize: false,
         shouldApplyCssTransforms: true,
     });
@@ -120,7 +120,7 @@ const Canvas = () => {
         });
     }, [editorZoomGestures, dimensions, isFit, setSize, size]);
     (0, react_1.useEffect)(() => {
-        const { current } = ref;
+        const { current } = canvas_ref_1.canvasRef;
         if (!current) {
             return;
         }
@@ -219,6 +219,6 @@ const Canvas = () => {
             zoomOut.unregister();
         };
     }, [keybindings, onReset, onZoomIn, onZoomOut]);
-    return ((0, jsx_runtime_1.jsxs)("div", { ref: ref, style: container, children: [size ? (0, jsx_runtime_1.jsx)(Preview_1.VideoPreview, { canvasSize: size }) : null, isFit ? null : ((0, jsx_runtime_1.jsx)("div", { style: resetZoom, className: "css-reset", children: (0, jsx_runtime_1.jsx)(ResetZoomButton_1.ResetZoomButton, { onClick: onReset }) }))] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: canvas_ref_1.canvasRef, style: container, children: [size ? (0, jsx_runtime_1.jsx)(Preview_1.VideoPreview, { canvasSize: size }) : null, isFit ? null : ((0, jsx_runtime_1.jsx)("div", { style: resetZoom, className: "css-reset", children: (0, jsx_runtime_1.jsx)(ResetZoomButton_1.ResetZoomButton, { onClick: onReset }) }))] }));
 };
 exports.Canvas = Canvas;

package/dist/editor/components/CanvasOrLoading.js

@@ -6,10 +6,15 @@ const react_1 = require("react");
 const remotion_1 = require("remotion");
 const ErrorLoader_1 = require("../../preview-server/error-overlay/remotion-overlay/ErrorLoader");
 const colors_1 = require("../helpers/colors");
+const timeline_zoom_1 = require("../state/timeline-zoom");
 const Canvas_1 = require("./Canvas");
+const FramePersistor_1 = require("./FramePersistor");
 const layout_1 = require("./layout");
 const styles_1 = require("./Menu/styles");
 const Spinner_1 = require("./Spinner");
+const imperative_state_1 = require("./Timeline/imperative-state");
+const timeline_scroll_logic_1 = require("./Timeline/timeline-scroll-logic");
+const ZoomPersistor_1 = require("./ZoomPersistor");
 const container = {
     color: 'white',
     flex: 1,
@@ -22,6 +27,7 @@ const container = {
 const CanvasOrLoading = () => {
     const resolved = remotion_1.Internals.useResolvedVideoConfig(null);
     const [takesALongTime, setTakesALongTime] = (0, react_1.useState)(false);
+    const { setZoom } = (0, react_1.useContext)(timeline_zoom_1.TimelineZoomCtx);
     (0, react_1.useEffect)(() => {
         const timeout = setTimeout(() => {
             setTakesALongTime(true);
@@ -30,6 +36,19 @@ const CanvasOrLoading = () => {
             clearTimeout(timeout);
         };
     }, []);
+    (0, react_1.useEffect)(() => {
+        if ((resolved === null || resolved === void 0 ? void 0 : resolved.type) !== 'success') {
+            return;
+        }
+        const c = resolved.result;
+        setTimeout(() => {
+            (0, timeline_scroll_logic_1.ensureFrameIsInViewport)({
+                direction: 'center',
+                frame: (0, imperative_state_1.getCurrentFrame)(),
+                durationInFrames: c.durationInFrames,
+            });
+        });
+    }, [resolved, setZoom]);
     const style = (0, react_1.useMemo)(() => {
         return {
             ...loaderLabel,
@@ -46,7 +65,7 @@ const CanvasOrLoading = () => {
     if (resolved.type === 'error') {
         return (0, jsx_runtime_1.jsx)(exports.ErrorLoading, { error: resolved.error });
     }
-    return (0, jsx_runtime_1.jsx)(Canvas_1.Canvas, {});
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(FramePersistor_1.FramePersistor, {}), (0, jsx_runtime_1.jsx)(ZoomPersistor_1.ZoomPersistor, {}), (0, jsx_runtime_1.jsx)(Canvas_1.Canvas, {})] }));
 };
 exports.CanvasOrLoading = CanvasOrLoading;
 const loaderLabel = {

package/dist/editor/components/CopyButton.js

@@ -10,7 +10,10 @@ const iconStyle = {
     width: 16,
     height: 16,
     color: 'white',
-    verticalAlign: 'sub',
+};
+const buttonContainerStyle = {
+    display: 'flex',
+    minWidth: '114px',
 };
 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 labelStyle = {
@@ -29,6 +32,6 @@ const CopyButton = ({ textToCopy, label, labelWhenCopied }) => {
         const to = setTimeout(() => setCopied(false), 2000);
         return () => clearTimeout(to);
     }, [copied]);
-    return ((0, jsx_runtime_1.jsxs)(Button_1.Button, { onClick: onClick, 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 })] }));
+    return ((0, jsx_runtime_1.jsxs)(Button_1.Button, { onClick: onClick, style: {}, buttonContainerStyle: buttonContainerStyle, 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/Editor.js

@@ -9,12 +9,10 @@ const noop_1 = require("../helpers/noop");
 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 Modals_1 = require("./Modals");
 const NoRegisterRoot_1 = require("./NoRegisterRoot");
 const NotificationCenter_1 = require("./Notifications/NotificationCenter");
-const ZoomPersistor_1 = require("./ZoomPersistor");
 const background = {
     backgroundColor: colors_1.BACKGROUND,
     display: 'flex',
@@ -41,6 +39,6 @@ const Editor = () => {
         });
         return () => cleanup();
     }, [Root, waitForRoot]);
-    return ((0, jsx_runtime_1.jsx)(z_index_1.HigherZIndex, { onEscape: noop_1.noop, onOutsideClick: noop_1.noop, children: (0, jsx_runtime_1.jsxs)(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, {})] }), (0, jsx_runtime_1.jsx)(Modals_1.Modals, {})] }) }));
+    return ((0, jsx_runtime_1.jsx)(z_index_1.HigherZIndex, { onEscape: noop_1.noop, onOutsideClick: noop_1.noop, children: (0, jsx_runtime_1.jsxs)(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: [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, {})] }), (0, jsx_runtime_1.jsx)(Modals_1.Modals, {})] }) }));
 };
 exports.Editor = Editor;

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

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+type OptionsSidebarPanel = 'compositions' | 'assets';
+export declare const persistSelectedOptionsSidebarPanel: (panel: OptionsSidebarPanel) => void;
+export declare const optionsSidebarTabs: import("react").RefObject<{
+    selectRendersPanel: () => void;
+}>;
+export declare const ExplorerPanel: React.FC<{}>;
+export {};

package/dist/editor/components/ExplorerPanel.js

@@ -0,0 +1,67 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ExplorerPanel = exports.optionsSidebarTabs = exports.persistSelectedOptionsSidebarPanel = 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 AssetSelector_1 = require("./AssetSelector");
+const CompositionSelector_1 = require("./CompositionSelector");
+const Tabs_1 = require("./Tabs");
+const container = {
+    height: '100%',
+    width: '100%',
+    maxWidth: '100%',
+    display: 'flex',
+    flexDirection: 'column',
+    flex: 1,
+};
+const localStorageKey = 'remotion.sidebarPanel';
+const getSelectedPanel = () => {
+    const panel = localStorage.getItem(localStorageKey);
+    if (panel === 'assets') {
+        return 'assets';
+    }
+    return 'compositions';
+};
+const tabsContainer = {
+    backgroundColor: colors_1.BACKGROUND,
+};
+const persistSelectedOptionsSidebarPanel = (panel) => {
+    localStorage.setItem(localStorageKey, panel);
+};
+exports.persistSelectedOptionsSidebarPanel = persistSelectedOptionsSidebarPanel;
+exports.optionsSidebarTabs = (0, react_1.createRef)();
+const ExplorerPanel = () => {
+    const [panel, setPanel] = (0, react_1.useState)(() => getSelectedPanel());
+    const onCompositionsSelected = (0, react_1.useCallback)(() => {
+        setPanel('compositions');
+        (0, exports.persistSelectedOptionsSidebarPanel)('compositions');
+    }, []);
+    const onAssetsSelected = (0, react_1.useCallback)(() => {
+        setPanel('assets');
+        (0, exports.persistSelectedOptionsSidebarPanel)('assets');
+    }, []);
+    (0, react_1.useImperativeHandle)(exports.optionsSidebarTabs, () => {
+        return {
+            selectRendersPanel: () => {
+                setPanel('assets');
+                (0, exports.persistSelectedOptionsSidebarPanel)('assets');
+            },
+        };
+    }, []);
+    const { compositions, currentComposition } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
+    const composition = (0, react_1.useMemo)(() => {
+        for (const comp of compositions) {
+            if (comp.id === currentComposition) {
+                return comp;
+            }
+        }
+        return null;
+    }, [compositions, currentComposition]);
+    if (composition === null) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsxs)("div", { style: container, className: "css-reset", children: [(0, jsx_runtime_1.jsx)("div", { style: tabsContainer, children: (0, jsx_runtime_1.jsxs)(Tabs_1.Tabs, { children: [(0, jsx_runtime_1.jsx)(Tabs_1.Tab, { selected: panel === 'compositions', onClick: onCompositionsSelected, children: "Compositions" }), (0, jsx_runtime_1.jsx)(Tabs_1.Tab, { selected: panel === 'assets', onClick: onAssetsSelected, children: "Assets" })] }) }), panel === 'compositions' ? (0, jsx_runtime_1.jsx)(CompositionSelector_1.CompositionSelector, {}) : (0, jsx_runtime_1.jsx)(AssetSelector_1.AssetSelector, {})] }));
+};
+exports.ExplorerPanel = ExplorerPanel;

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

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