@remotion/cli 4.1.0-alpha1 → 4.1.0-alpha11

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/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/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;

package/dist/editor/components/FramePersistor.js

@@ -1,41 +1,21 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.FramePersistor = exports.getFrameForComposition = exports.persistCurrentFrame = exports.getCurrentCompositionFromUrl = void 0;
+exports.FramePersistor = exports.getCurrentCompositionFromUrl = void 0;
 const react_1 = require("react");
 const remotion_1 = require("remotion");
 const getCurrentCompositionFromUrl = () => {
     return window.location.pathname.substr(1);
 };
 exports.getCurrentCompositionFromUrl = getCurrentCompositionFromUrl;
-const makeKey = (composition) => {
-    return `remotion.time.${composition}`;
-};
-const persistCurrentFrame = (frame) => {
-    const currentComposition = (0, exports.getCurrentCompositionFromUrl)();
-    if (!currentComposition) {
-        return;
-    }
-    localStorage.setItem(makeKey(currentComposition), String(frame));
-};
-exports.persistCurrentFrame = persistCurrentFrame;
-const getFrameForComposition = (composition) => {
-    const frame = localStorage.getItem(makeKey(composition));
-    return frame ? Number(frame) : 0;
-};
-exports.getFrameForComposition = getFrameForComposition;
 const FramePersistor = () => {
     const [playing] = remotion_1.Internals.Timeline.usePlayingState();
+    const config = (0, remotion_1.useVideoConfig)();
     const frame = remotion_1.Internals.Timeline.useTimelinePosition();
-    const { currentComposition } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
-    const isActive = currentComposition === (0, exports.getCurrentCompositionFromUrl)();
     (0, react_1.useEffect)(() => {
-        if (!isActive) {
-            return;
-        }
         if (!playing) {
-            (0, exports.persistCurrentFrame)(frame);
+            remotion_1.Internals.persistCurrentFrame(frame, config.id);
         }
-    }, [frame, isActive, playing]);
+    }, [config.id, frame, playing]);
     return null;
 };
 exports.FramePersistor = FramePersistor;

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

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const FullScreenToggle: React.FC<{}>;

package/dist/editor/components/FullscreenToggle.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FullScreenToggle = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const canvas_ref_1 = require("../state/canvas-ref");
+const preview_size_1 = require("../state/preview-size");
+const ControlButton_1 = require("./ControlButton");
+const FullScreenToggle = () => {
+    const { setSize } = (0, react_1.useContext)(preview_size_1.PreviewSizeContext);
+    const onClick = (0, react_1.useCallback)(() => {
+        var _a;
+        (_a = canvas_ref_1.canvasRef.current) === null || _a === void 0 ? void 0 : _a.requestFullscreen();
+        if (document.fullscreenElement)
+            setSize(() => ({
+                size: 'auto',
+                translation: {
+                    x: 0,
+                    y: 0,
+                },
+            }));
+    }, [setSize]);
+    return ((0, jsx_runtime_1.jsx)(ControlButton_1.ControlButton, { title: "Enter fullscreen preview", "aria-label": "Enter fullscreen preview", onClick: onClick, children: (0, jsx_runtime_1.jsx)("svg", { style: { width: 18, height: 18 }, viewBox: "0 0 448 512", fill: "#fff", children: (0, jsx_runtime_1.jsx)("path", { d: "M0 180V56c0-13.3 10.7-24 24-24h124c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12H64v84c0 6.6-5.4 12-12 12H12c-6.6 0-12-5.4-12-12zM288 44v40c0 6.6 5.4 12 12 12h84v84c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12V56c0-13.3-10.7-24-24-24H300c-6.6 0-12 5.4-12 12zm148 276h-40c-6.6 0-12 5.4-12 12v84h-84c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h124c13.3 0 24-10.7 24-24V332c0-6.6-5.4-12-12-12zM160 468v-40c0-6.6-5.4-12-12-12H64v-84c0-6.6-5.4-12-12-12H12c-6.6 0-12 5.4-12 12v124c0 13.3 10.7 24 24 24h124c6.6 0 12-5.4 12-12z" }) }) }));
+};
+exports.FullScreenToggle = FullScreenToggle;

package/dist/editor/components/GlobalKeybindings.js

@@ -43,7 +43,7 @@ const GlobalKeybindings = () => {
             callback: () => {
                 setCheckerboard((c) => !c);
             },
-            commandCtrlKey: true,
+            commandCtrlKey: false,
             preventDefault: true,
             triggerIfInputFieldFocused: false,
         });

package/dist/editor/components/InitialCompositionLoader.js

@@ -4,37 +4,16 @@ exports.InitialCompositionLoader = exports.useSelectComposition = void 0;
 const react_1 = require("react");
 const remotion_1 = require("remotion");
 const folders_1 = require("../state/folders");
-const marks_1 = require("../state/marks");
-const timeline_zoom_1 = require("../state/timeline-zoom");
 const CompositionSelector_1 = require("./CompositionSelector");
 const FramePersistor_1 = require("./FramePersistor");
-const timeline_scroll_logic_1 = require("./Timeline/timeline-scroll-logic");
-const TimelineInOutToggle_1 = require("./TimelineInOutToggle");
-const ZoomPersistor_1 = require("./ZoomPersistor");
 const useSelectComposition = () => {
-    const setCurrentFrame = remotion_1.Internals.Timeline.useTimelineSetFrame();
-    const { setCurrentComposition } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     const { setFoldersExpanded } = (0, react_1.useContext)(folders_1.FolderContext);
-    const { setZoom } = (0, react_1.useContext)(timeline_zoom_1.TimelineZoomCtx);
+    const { setCurrentComposition } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     return (c, push) => {
-        var _a;
-        (_a = TimelineInOutToggle_1.inOutHandles.current) === null || _a === void 0 ? void 0 : _a.setMarks((0, marks_1.loadMarks)(c.id, c.durationInFrames));
         if (push) {
             window.history.pushState({}, 'Studio', `/${c.id}`);
         }
-        const frame = (0, FramePersistor_1.getFrameForComposition)(c.id);
-        const zoom = (0, ZoomPersistor_1.getZoomForComposition)(c.id);
-        const frameInBounds = Math.min(c.durationInFrames - 1, frame);
-        setCurrentFrame(frameInBounds);
         setCurrentComposition(c.id);
-        setZoom(() => zoom);
-        setTimeout(() => {
-            (0, timeline_scroll_logic_1.ensureFrameIsInViewport)({
-                direction: 'center',
-                frame,
-                durationInFrames: c.durationInFrames,
-            });
-        });
         const { folderName, parentFolderName } = c;
         if (folderName !== null) {
             setFoldersExpanded((ex) => {

package/dist/editor/components/KeyboardShortcutsExplainer.js

@@ -52,6 +52,6 @@ const li = {
     fontSize: 14,
 };
 const KeyboardShortcutsExplainer = () => {
-    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, use_keybinding_1.areKeyboardShortcutsDisabled)() ? ((0, jsx_runtime_1.jsxs)("div", { style: keyboardShortcutsDisabled, children: ["Keyboard shortcuts disabled either due to:", (0, jsx_runtime_1.jsxs)("ul", { style: ul, children: [(0, jsx_runtime_1.jsx)("li", { style: li, children: "a) --disable-keyboard-shortcuts being passed" }), (0, jsx_runtime_1.jsx)("li", { style: li, children: "b) Config.setKeyboardShortcutsEnabled(false) being set or" }), (0, jsx_runtime_1.jsx)("li", { style: li, children: " c) a Remotion version mismatch." })] })] })) : null, (0, jsx_runtime_1.jsxs)(layout_1.Row, { style: container, children: [(0, jsx_runtime_1.jsxs)(layout_1.Column, { children: [(0, jsx_runtime_1.jsx)("div", { style: title, children: "Playback" }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsxs)("div", { style: left, children: [(0, jsx_runtime_1.jsx)("kbd", { style: key, children: (0, jsx_runtime_1.jsx)(keys_1.ShiftIcon, {}) }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.3 }), (0, jsx_runtime_1.jsx)("kbd", { style: key, children: (0, jsx_runtime_1.jsx)(keys_1.ArrowLeft, {}) })] }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "1 second back" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: (0, jsx_runtime_1.jsx)(keys_1.ArrowLeft, {}) }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Previous frame" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "Space" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Play / Pause" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: (0, jsx_runtime_1.jsx)(keys_1.ArrowRight, {}) }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Next frame" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsxs)("div", { style: left, children: [(0, jsx_runtime_1.jsx)("kbd", { style: key, children: (0, jsx_runtime_1.jsx)(keys_1.ShiftIcon, {}) }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.3 }), (0, jsx_runtime_1.jsx)("kbd", { style: key, children: (0, jsx_runtime_1.jsx)(keys_1.ArrowRight, {}) })] }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "1 second forward" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "A" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Jump to beginning" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "E" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Jump to end" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "J" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Reverse playback" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "K" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Pause" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "L" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Play / Speed up" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "Enter" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Pause & return to playback start" })] }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("div", { style: title, children: "Sidebar" }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsxs)("div", { style: left, children: [(0, jsx_runtime_1.jsx)("kbd", { style: key, children: ShortcutHint_1.cmdOrCtrlCharacter }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.3 }), (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "B" })] }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Toggle left sidebar" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsxs)("div", { style: left, children: [(0, jsx_runtime_1.jsx)("kbd", { style: key, children: ShortcutHint_1.cmdOrCtrlCharacter }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.3 }), (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "J" })] }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Toggle right sidebar" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsxs)("div", { style: left, children: [(0, jsx_runtime_1.jsx)("kbd", { style: key, children: ShortcutHint_1.cmdOrCtrlCharacter }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.3 }), (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "G" })] }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Toggle both sidebars" })] }), (0, jsx_runtime_1.jsx)("br", {})] }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 8 }), (0, jsx_runtime_1.jsxs)(layout_1.Column, { children: [(0, jsx_runtime_1.jsx)("div", { style: title, children: "Navigation" }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "N" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "New composition" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "R" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Render composition" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "T" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Toggle checkerboard transparency" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "?" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Show keyboard shortcuts" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsxs)("div", { style: left, children: [(0, jsx_runtime_1.jsx)("kbd", { style: key, children: ShortcutHint_1.cmdOrCtrlCharacter }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.3 }), (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "K" })] }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Quick Switcher" })] }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("div", { style: title, children: "Playback range" }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "I" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Set In Point" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "O" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Set Out Point" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "X" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Clear In/Out Points" })] }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("div", { style: title, children: "Zoom" }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "+" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Zoom in" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "-" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Zoom out" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "0" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Reset zoom" })] })] })] })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, use_keybinding_1.areKeyboardShortcutsDisabled)() ? ((0, jsx_runtime_1.jsxs)("div", { style: keyboardShortcutsDisabled, children: ["Keyboard shortcuts disabled either due to:", (0, jsx_runtime_1.jsxs)("ul", { style: ul, children: [(0, jsx_runtime_1.jsx)("li", { style: li, children: "a) --disable-keyboard-shortcuts being passed" }), (0, jsx_runtime_1.jsx)("li", { style: li, children: "b) Config.setKeyboardShortcutsEnabled(false) being set or" }), (0, jsx_runtime_1.jsx)("li", { style: li, children: " c) a Remotion version mismatch." })] })] })) : null, (0, jsx_runtime_1.jsxs)(layout_1.Row, { style: container, children: [(0, jsx_runtime_1.jsxs)(layout_1.Column, { children: [(0, jsx_runtime_1.jsx)("div", { style: title, children: "Playback" }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsxs)("div", { style: left, children: [(0, jsx_runtime_1.jsx)("kbd", { style: key, children: (0, jsx_runtime_1.jsx)(keys_1.ShiftIcon, {}) }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.3 }), (0, jsx_runtime_1.jsx)("kbd", { style: key, children: (0, jsx_runtime_1.jsx)(keys_1.ArrowLeft, {}) })] }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "1 second back" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: (0, jsx_runtime_1.jsx)(keys_1.ArrowLeft, {}) }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Previous frame" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "Space" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Play / Pause" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: (0, jsx_runtime_1.jsx)(keys_1.ArrowRight, {}) }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Next frame" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsxs)("div", { style: left, children: [(0, jsx_runtime_1.jsx)("kbd", { style: key, children: (0, jsx_runtime_1.jsx)(keys_1.ShiftIcon, {}) }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.3 }), (0, jsx_runtime_1.jsx)("kbd", { style: key, children: (0, jsx_runtime_1.jsx)(keys_1.ArrowRight, {}) })] }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "1 second forward" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "A" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Jump to beginning" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "E" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Jump to end" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "J" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Reverse playback" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "K" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Pause" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "L" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Play / Speed up" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "Enter" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Pause & return to playback start" })] }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("div", { style: title, children: "Sidebar" }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsxs)("div", { style: left, children: [(0, jsx_runtime_1.jsx)("kbd", { style: key, children: ShortcutHint_1.cmdOrCtrlCharacter }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.3 }), (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "B" })] }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Toggle left sidebar" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsxs)("div", { style: left, children: [(0, jsx_runtime_1.jsx)("kbd", { style: key, children: ShortcutHint_1.cmdOrCtrlCharacter }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.3 }), (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "J" })] }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Toggle right sidebar" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsxs)("div", { style: left, children: [(0, jsx_runtime_1.jsx)("kbd", { style: key, children: ShortcutHint_1.cmdOrCtrlCharacter }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.3 }), (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "G" })] }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Toggle both sidebars" })] }), (0, jsx_runtime_1.jsx)("br", {})] }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 8 }), (0, jsx_runtime_1.jsxs)(layout_1.Column, { children: [(0, jsx_runtime_1.jsx)("div", { style: title, children: "Navigation" }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "N" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "New composition" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "R" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Render composition" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "T" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Toggle checkerboard transparency" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "?" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Show keyboard shortcuts" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsxs)("div", { style: left, children: [(0, jsx_runtime_1.jsx)("kbd", { style: key, children: ShortcutHint_1.cmdOrCtrlCharacter }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.3 }), (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "K" })] }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Quick Switcher" })] }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("div", { style: title, children: "Playback range" }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "I" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Set In Point" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "O" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Set Out Point" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "X" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Clear In/Out Points" })] }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("div", { style: title, children: "Zoom" }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "+" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Zoom in" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "-" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Zoom out" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "0" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Reset zoom" })] }), ' ', (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("div", { style: title, children: "Props Editor" }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsxs)("div", { style: left, children: [(0, jsx_runtime_1.jsx)("kbd", { style: key, children: ShortcutHint_1.cmdOrCtrlCharacter }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.3 }), (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "S" })] }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Save" })] })] })] })] }));
 };
 exports.KeyboardShortcutsExplainer = KeyboardShortcutsExplainer;

package/dist/editor/components/NewComposition/InputDragger.js

@@ -9,6 +9,9 @@ const noop_1 = require("../../helpers/noop");
 const input_dragger_click_lock_1 = require("../../state/input-dragger-click-lock");
 const z_index_1 = require("../../state/z-index");
 const RemInput_1 = require("./RemInput");
+const isInt = (num) => {
+    return num % 1 === 0;
+};
 const InputDragger = ({ onValueChange, min: _min, max: _max, step: _step, value, onTextChange, formatter = (q) => String(q), status, rightAlign, ...props }) => {
     const [inputFallback, setInputFallback] = (0, react_1.useState)(false);
     const fallbackRef = (0, react_1.useRef)(null);
@@ -99,8 +102,17 @@ const InputDragger = ({ onValueChange, min: _min, max: _max, step: _step, value,
             (_a = fallbackRef.current) === null || _a === void 0 ? void 0 : _a.select();
         }
     }, [inputFallback]);
+    const deriveStep = (0, react_1.useMemo)(() => {
+        if (_step !== undefined) {
+            return _step;
+        }
+        if (typeof _min === 'number' && isInt(_min)) {
+            return 1;
+        }
+        return 0.0001;
+    }, [_min, _step]);
     if (inputFallback) {
-        return ((0, jsx_runtime_1.jsx)(z_index_1.HigherZIndex, { onEscape: onEscape, onOutsideClick: noop_1.noop, children: (0, jsx_runtime_1.jsx)(RemInput_1.RemotionInput, { ref: fallbackRef, autoFocus: true, onKeyPress: onKeyPress, onBlur: onBlur, min: _min, step: _step, defaultValue: value, status: status, pattern: '[0-9]*[.]?[0-9]*', rightAlign: rightAlign, ...props }) }));
+        return ((0, jsx_runtime_1.jsx)(z_index_1.HigherZIndex, { onEscape: onEscape, onOutsideClick: noop_1.noop, children: (0, jsx_runtime_1.jsx)(RemInput_1.RemotionInput, { ref: fallbackRef, autoFocus: true, onKeyPress: onKeyPress, onBlur: onBlur, min: _min, max: _max, step: deriveStep, defaultValue: value, status: status, pattern: '[0-9]*[.]?[0-9]*', rightAlign: rightAlign, ...props }) }));
     }
     return ((0, jsx_runtime_1.jsx)("button", { type: "button", style: style, onClick: onClick, onPointerDown: onPointerDown, children: (0, jsx_runtime_1.jsx)("span", { style: span, children: formatter(value) }) }));
 };

package/dist/editor/components/NewComposition/RemInput.d.ts

@@ -12,6 +12,6 @@ export declare const getInputBorderColor: ({ status, isFocused, isHovered, }: {
     status: 'error' | 'warning' | 'ok';
     isFocused: boolean;
     isHovered: boolean;
-}) => "hsla(0, 0%, 100%, 0.15)" | "rgba(0, 0, 0, 0.6)" | "rgba(255, 255, 255, 0.05)" | "#ff3232" | "#f1c40f";
-export declare const RemotionInput: React.ForwardRefExoticComponent<Pick<Props, "status" | "key" | "rightAlign" | keyof React.InputHTMLAttributes<HTMLInputElement>> & React.RefAttributes<HTMLInputElement>>;
+}) => "#ff3232" | "hsla(0, 0%, 100%, 0.15)" | "rgba(0, 0, 0, 0.6)" | "rgba(255, 255, 255, 0.05)" | "#f1c40f";
+export declare const RemotionInput: React.ForwardRefExoticComponent<Pick<Props, "key" | "status" | "rightAlign" | keyof React.InputHTMLAttributes<HTMLInputElement>> & React.RefAttributes<HTMLInputElement>>;
 export {};