@remotion/cli 4.1.0-alpha1 → 4.1.0-alpha10

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

@@ -13,5 +13,5 @@ export declare const getInputBorderColor: ({ status, isFocused, isHovered, }: {
     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>>;
+export declare const RemotionInput: React.ForwardRefExoticComponent<Pick<Props, "key" | keyof React.InputHTMLAttributes<HTMLInputElement> | "status" | "rightAlign"> & React.RefAttributes<HTMLInputElement>>;
 export {};

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

@@ -4,5 +4,5 @@ type Props = React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>
     status: RemInputStatus;
     name: string;
 };
-export declare const RemInputTypeColor: React.ForwardRefExoticComponent<Pick<Props, "status" | "key" | keyof React.InputHTMLAttributes<HTMLInputElement>> & React.RefAttributes<HTMLInputElement>>;
+export declare const RemInputTypeColor: React.ForwardRefExoticComponent<Pick<Props, "key" | keyof React.InputHTMLAttributes<HTMLInputElement> | "status"> & React.RefAttributes<HTMLInputElement>>;
 export {};

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

@@ -3,5 +3,5 @@ type Props = React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLTextAreaEleme
     status: 'error' | 'warning' | 'ok';
 };
 export declare const inputBaseStyle: React.CSSProperties;
-export declare const RemTextarea: React.ForwardRefExoticComponent<Pick<Props, "status" | "key" | keyof React.InputHTMLAttributes<HTMLTextAreaElement>> & React.RefAttributes<HTMLTextAreaElement>>;
+export declare const RemTextarea: React.ForwardRefExoticComponent<Pick<Props, "key" | "status" | keyof React.InputHTMLAttributes<HTMLTextAreaElement>> & React.RefAttributes<HTMLTextAreaElement>>;
 export {};

package/dist/editor/components/OpenEditorButton.js

@@ -12,8 +12,11 @@ const svgStyle = {
 };
 const buttonStyle = {
     border: 'none',
-    width: '25px',
-    height: '25px',
+    width: '20px',
+    height: '20px',
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
 };
 const OpenEditorButton = () => {
     const [hovered, setHovered] = (0, react_1.useState)(false);

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

@@ -0,0 +1,8 @@
+import React from 'react';
+type OptionsSidebarPanel = 'input-props' | 'renders';
+export declare const persistSelectedOptionsSidebarPanel: (panel: OptionsSidebarPanel) => void;
+export declare const optionsSidebarTabs: React.RefObject<{
+    selectRendersPanel: () => void;
+}>;
+export declare const OptionsPanel: React.FC<{}>;
+export {};

package/dist/editor/components/OptionsPanel.js

@@ -0,0 +1,79 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.OptionsPanel = 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 DataEditor_1 = require("./RenderModal/DataEditor");
+const RenderQueue_1 = require("./RenderQueue");
+const RendersTab_1 = require("./RendersTab");
+const Tabs_1 = require("./Tabs");
+const container = {
+    height: '100%',
+    width: '100%',
+    position: 'absolute',
+    display: 'flex',
+    flexDirection: 'column',
+};
+const PropsEditor = ({ composition }) => {
+    const { props, updateProps } = (0, react_1.useContext)(remotion_1.Internals.EditorPropsContext);
+    const setInputProps = (0, react_1.useCallback)((newProps) => {
+        updateProps({
+            id: composition.id,
+            defaultProps: composition.defaultProps,
+            newProps,
+        });
+    }, [composition.defaultProps, composition.id, updateProps]);
+    const actualProps = (0, react_1.useMemo)(() => { var _a, _b; return (_b = (_a = props[composition.id]) !== null && _a !== void 0 ? _a : composition.defaultProps) !== null && _b !== void 0 ? _b : {}; }, [composition.defaultProps, composition.id, props]);
+    return ((0, jsx_runtime_1.jsx)(DataEditor_1.DataEditor, { unresolvedComposition: composition, inputProps: actualProps, setInputProps: setInputProps, mayShowSaveButton: true, propsEditType: "default-props" }, composition.id));
+};
+const localStorageKey = 'remotion.sidebarPanel';
+const getSelectedPanel = () => {
+    const panel = localStorage.getItem(localStorageKey);
+    if (panel === 'renders') {
+        return 'renders';
+    }
+    return 'input-props';
+};
+const tabsContainer = {
+    backgroundColor: colors_1.BACKGROUND,
+};
+const persistSelectedOptionsSidebarPanel = (panel) => {
+    localStorage.setItem(localStorageKey, panel);
+};
+exports.persistSelectedOptionsSidebarPanel = persistSelectedOptionsSidebarPanel;
+exports.optionsSidebarTabs = (0, react_1.createRef)();
+const OptionsPanel = () => {
+    const [panel, setPanel] = (0, react_1.useState)(() => getSelectedPanel());
+    const onPropsSelected = (0, react_1.useCallback)(() => {
+        setPanel('input-props');
+        (0, exports.persistSelectedOptionsSidebarPanel)('input-props');
+    }, []);
+    const onRendersSelected = (0, react_1.useCallback)(() => {
+        setPanel('renders');
+        (0, exports.persistSelectedOptionsSidebarPanel)('renders');
+    }, []);
+    (0, react_1.useImperativeHandle)(exports.optionsSidebarTabs, () => {
+        return {
+            selectRendersPanel: () => {
+                setPanel('renders');
+                (0, exports.persistSelectedOptionsSidebarPanel)('renders');
+            },
+        };
+    }, []);
+    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 === 'input-props', onClick: onPropsSelected, children: "Props" }), (0, jsx_runtime_1.jsx)(RendersTab_1.RendersTab, { onClick: onRendersSelected, selected: panel === 'renders' })] }) }), panel === 'renders' ? ((0, jsx_runtime_1.jsx)(RenderQueue_1.RenderQueue, {})) : ((0, jsx_runtime_1.jsx)(PropsEditor, { composition: composition }))] }));
+};
+exports.OptionsPanel = OptionsPanel;

package/dist/editor/components/PlayPause.js

@@ -114,11 +114,11 @@ const PlayPause = ({ playbackRate, loop }) => {
         frameForward(1);
     }, [frameForward]);
     const jumpToStart = (0, react_1.useCallback)(() => {
-        seek(0);
-    }, [seek]);
+        seek(inFrame !== null && inFrame !== void 0 ? inFrame : 0);
+    }, [seek, inFrame]);
     const jumpToEnd = (0, react_1.useCallback)(() => {
-        seek((0, imperative_state_1.getCurrentDuration)() - 1);
-    }, [seek]);
+        seek(outFrame !== null && outFrame !== void 0 ? outFrame : (0, imperative_state_1.getCurrentDuration)() - 1);
+    }, [seek, outFrame]);
     const keybindings = (0, use_keybinding_1.useKeybinding)();
     (0, react_1.useEffect)(() => {
         const arrowLeft = keybindings.registerKeybinding({

package/dist/editor/components/PlaybackRateSelector.js

@@ -9,7 +9,7 @@ const playbackrate_1 = require("../state/playbackrate");
 const ControlButton_1 = require("./ControlButton");
 const ComboBox_1 = require("./NewComposition/ComboBox");
 const commonPlaybackRates = [
-    -4, -2, -1, -0.5, -0.25, 0.25, 0.5, 1, 2, 4,
+    -4, -2, -1, -0.5, -0.25, 0.25, 0.5, 1, 1.5, 2, 4,
 ];
 const getPlaybackRateLabel = (playbackRate) => {
     return `${playbackRate}x`;

package/dist/editor/components/PreviewToolbar.js

@@ -9,6 +9,7 @@ const timeline_layout_1 = require("../helpers/timeline-layout");
 const loop_1 = require("../state/loop");
 const CheckboardToggle_1 = require("./CheckboardToggle");
 const FpsCounter_1 = require("./FpsCounter");
+const FullscreenToggle_1 = require("./FullscreenToggle");
 const layout_1 = require("./layout");
 const LoopToggle_1 = require("./LoopToggle");
 const MuteToggle_1 = require("./MuteToggle");
@@ -45,6 +46,7 @@ const PreviewToolbar = () => {
     const { mediaMuted } = (0, react_1.useContext)(remotion_1.Internals.MediaVolumeContext);
     const { setMediaMuted } = (0, react_1.useContext)(remotion_1.Internals.SetMediaVolumeContext);
     const [loop, setLoop] = (0, react_1.useState)((0, loop_1.loadLoopOption)());
-    return ((0, jsx_runtime_1.jsxs)("div", { style: container, className: "css-reset", children: [(0, jsx_runtime_1.jsxs)("div", { style: sideContainer, children: [(0, jsx_runtime_1.jsx)("div", { style: padding }), (0, jsx_runtime_1.jsx)(TimelineZoomControls_1.TimelineZoomControls, {})] }), (0, jsx_runtime_1.jsx)(layout_1.Flex, {}), (0, jsx_runtime_1.jsx)(SizeSelector_1.SizeSelector, {}), (0, jsx_runtime_1.jsx)(PlaybackRateSelector_1.PlaybackRateSelector, { setPlaybackRate: setPlaybackRate, playbackRate: playbackRate }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 2 }), (0, jsx_runtime_1.jsx)(PlayPause_1.PlayPause, { loop: loop, playbackRate: playbackRate }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 2 }), (0, jsx_runtime_1.jsx)(LoopToggle_1.LoopToggle, { loop: loop, setLoop: setLoop }), (0, jsx_runtime_1.jsx)(CheckboardToggle_1.CheckboardToggle, {}), (0, jsx_runtime_1.jsx)(TimelineInOutToggle_1.TimelineInOutPointToggle, {}), (0, jsx_runtime_1.jsx)(MuteToggle_1.MuteToggle, { muted: mediaMuted, setMuted: setMediaMuted }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 2 }), (0, jsx_runtime_1.jsx)(layout_1.Flex, {}), (0, jsx_runtime_1.jsxs)("div", { style: sideContainer, children: [(0, jsx_runtime_1.jsx)(layout_1.Flex, {}), (0, jsx_runtime_1.jsx)(FpsCounter_1.FpsCounter, { playbackSpeed: playbackRate }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 2 }), (0, jsx_runtime_1.jsx)(RenderButton_1.RenderButton, {}), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1.5 })] }), (0, jsx_runtime_1.jsx)(PlaybackKeyboardShortcutsManager_1.PlaybackKeyboardShortcutsManager, { setPlaybackRate: setPlaybackRate }), (0, jsx_runtime_1.jsx)(PlaybackRatePersistor_1.PlaybackRatePersistor, {})] }));
+    const isFullscreenSupported = document.fullscreenEnabled || document.webkitFullscreenEnabled;
+    return ((0, jsx_runtime_1.jsxs)("div", { style: container, className: "css-reset", children: [(0, jsx_runtime_1.jsxs)("div", { style: sideContainer, children: [(0, jsx_runtime_1.jsx)("div", { style: padding }), (0, jsx_runtime_1.jsx)(TimelineZoomControls_1.TimelineZoomControls, {})] }), (0, jsx_runtime_1.jsx)(layout_1.Flex, {}), (0, jsx_runtime_1.jsx)(SizeSelector_1.SizeSelector, {}), (0, jsx_runtime_1.jsx)(PlaybackRateSelector_1.PlaybackRateSelector, { setPlaybackRate: setPlaybackRate, playbackRate: playbackRate }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 2 }), (0, jsx_runtime_1.jsx)(PlayPause_1.PlayPause, { loop: loop, playbackRate: playbackRate }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 2 }), (0, jsx_runtime_1.jsx)(LoopToggle_1.LoopToggle, { loop: loop, setLoop: setLoop }), (0, jsx_runtime_1.jsx)(CheckboardToggle_1.CheckboardToggle, {}), (0, jsx_runtime_1.jsx)(TimelineInOutToggle_1.TimelineInOutPointToggle, {}), (0, jsx_runtime_1.jsx)(MuteToggle_1.MuteToggle, { muted: mediaMuted, setMuted: setMediaMuted }), isFullscreenSupported && (0, jsx_runtime_1.jsx)(FullscreenToggle_1.FullScreenToggle, {}), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 2 }), (0, jsx_runtime_1.jsx)(layout_1.Flex, {}), (0, jsx_runtime_1.jsxs)("div", { style: sideContainer, children: [(0, jsx_runtime_1.jsx)(layout_1.Flex, {}), (0, jsx_runtime_1.jsx)(FpsCounter_1.FpsCounter, { playbackSpeed: playbackRate }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 2 }), (0, jsx_runtime_1.jsx)(RenderButton_1.RenderButton, {}), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1.5 })] }), (0, jsx_runtime_1.jsx)(PlaybackKeyboardShortcutsManager_1.PlaybackKeyboardShortcutsManager, { setPlaybackRate: setPlaybackRate }), (0, jsx_runtime_1.jsx)(PlaybackRatePersistor_1.PlaybackRatePersistor, {})] }));
 };
 exports.PreviewToolbar = PreviewToolbar;

package/dist/editor/components/QuickSwitcher/QuickSwitcherResult.js

@@ -98,14 +98,14 @@ const QuickSwitcherResult = ({ result, selected }) => {
             fontSize: 15,
         };
     }, [hovered, result.type, selected]);
-    return ((0, jsx_runtime_1.jsxs)("div", { ref: ref, style: style, onClick: result.onSelected, children: [result.type === 'composition' ? (result.compositionType === 'still' ? ((0, jsx_runtime_1.jsx)(still_1.StillIcon, { color: selected ? 'white' : colors_1.LIGHT_TEXT, style: iconStyle })) : ((0, jsx_runtime_1.jsx)(video_1.FilmIcon, { color: selected ? 'white' : colors_1.LIGHT_TEXT, style: iconStyle }))) : null, (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), (0, jsx_runtime_1.jsx)("div", { style: labelContainer, children: result.type === 'search-result' ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { style: labelStyle, 
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: ref, style: style, onClick: result.onSelected, children: [result.type === 'composition' ? (result.compositionType === 'still' ? ((0, jsx_runtime_1.jsx)(still_1.StillIcon, { color: selected ? 'white' : colors_1.LIGHT_TEXT, style: iconStyle })) : ((0, jsx_runtime_1.jsx)(video_1.FilmIcon, { color: selected ? 'white' : colors_1.LIGHT_TEXT, style: iconStyle }))) : null, (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), (0, jsx_runtime_1.jsx)("div", { style: labelContainer, children: result.type === 'search-result' ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { 
                             // eslint-disable-next-line react/no-danger
                             dangerouslySetInnerHTML: {
                                 __html: result.titleLine,
-                            } }), (0, jsx_runtime_1.jsx)("div", { style: labelStyle, 
+                            }, style: labelStyle }), (0, jsx_runtime_1.jsx)("div", { 
                             // eslint-disable-next-line react/no-danger
                             dangerouslySetInnerHTML: {
                                 __html: result.subtitleLine,
-                            } })] })) : ((0, jsx_runtime_1.jsx)("div", { style: labelStyle, children: result.title })) })] }, result.id));
+                            }, style: labelStyle })] })) : ((0, jsx_runtime_1.jsx)("div", { style: labelStyle, children: result.title })) })] }, result.id));
 };
 exports.QuickSwitcherResult = QuickSwitcherResult;

package/dist/editor/components/RenderModal/DataEditor.d.ts

@@ -17,4 +17,6 @@ export declare const DataEditor: React.FC<{
     setInputProps: React.Dispatch<React.SetStateAction<Record<string, unknown>>>;
     mayShowSaveButton: boolean;
     propsEditType: PropsEditType;
+    saving: boolean;
+    setSaving: React.Dispatch<React.SetStateAction<boolean>>;
 }>;

package/dist/editor/components/RenderModal/DataEditor.js

@@ -39,7 +39,6 @@ const SegmentedControl_1 = require("../SegmentedControl");
 const get_render_modal_warnings_1 = require("./get-render-modal-warnings");
 const RenderModalJSONPropsEditor_1 = require("./RenderModalJSONPropsEditor");
 const extract_enum_json_paths_1 = require("./SchemaEditor/extract-enum-json-paths");
-const input_props_serialization_1 = require("./SchemaEditor/input-props-serialization");
 const SchemaEditor_1 = require("./SchemaEditor/SchemaEditor");
 const SchemaErrorMessages_1 = require("./SchemaEditor/SchemaErrorMessages");
 const WarningIndicatorButton_1 = require("./WarningIndicatorButton");
@@ -88,10 +87,8 @@ const getPersistedShowWarningState = () => {
 const setPersistedShowWarningState = (val) => {
     localStorage.setItem(persistanceKey, String(Boolean(val)));
 };
-const DataEditor = ({ unresolvedComposition, inputProps, setInputProps, mayShowSaveButton, propsEditType, }) => {
+const DataEditor = ({ unresolvedComposition, inputProps, setInputProps, mayShowSaveButton, propsEditType, saving, setSaving, }) => {
     const [mode, setMode] = (0, react_1.useState)('schema');
-    const [valBeforeSafe, setValBeforeSafe] = (0, react_1.useState)(inputProps);
-    const [saving, setSaving] = (0, react_1.useState)(false);
     const [showWarning, setShowWarningWithoutPersistance] = (0, react_1.useState)(() => getPersistedShowWarningState());
     const inJSONEditor = mode === 'json';
     const serializedJSON = (0, react_1.useMemo)(() => {
@@ -99,7 +96,7 @@ const DataEditor = ({ unresolvedComposition, inputProps, setInputProps, mayShowS
             return null;
         }
         const value = inputProps;
-        return (0, input_props_serialization_1.serializeJSONWithDate)({
+        return remotion_1.Internals.serializeJSONWithDate({
             data: value,
             indent: 2,
             staticBase: window.remotion_staticBase,
@@ -215,7 +212,6 @@ const DataEditor = ({ unresolvedComposition, inputProps, setInputProps, mayShowS
             (0, NotificationCenter_1.sendErrorNotification)('Cannot update default props: No Zod schema');
             return;
         }
-        setValBeforeSafe(inputProps);
         (0, actions_1.updateDefaultProps)(unresolvedComposition.id, inputProps, (0, extract_enum_json_paths_1.extractEnumJsonPaths)(schema, z, [])).then((response) => {
             if (!response.success) {
                 (0, NotificationCenter_1.sendErrorNotification)('Cannot update default props: ' + response.reason);
@@ -224,14 +220,15 @@ const DataEditor = ({ unresolvedComposition, inputProps, setInputProps, mayShowS
     }, [unresolvedComposition.id, inputProps, schema, z]);
     (0, react_1.useEffect)(() => {
         setSaving(false);
-    }, [fastRefreshes]);
+    }, [fastRefreshes, setSaving]);
     const onSave = (0, react_1.useCallback)((updater) => {
+        var _a;
         if (schema === 'no-zod' || schema === 'no-schema' || z === null) {
             (0, NotificationCenter_1.sendErrorNotification)('Cannot update default props: No Zod schema');
             return;
         }
         setSaving(true);
-        (0, actions_1.updateDefaultProps)(unresolvedComposition.id, updater(unresolvedComposition.defaultProps), (0, extract_enum_json_paths_1.extractEnumJsonPaths)(schema, z, []))
+        (0, actions_1.updateDefaultProps)(unresolvedComposition.id, updater((_a = unresolvedComposition.defaultProps) !== null && _a !== void 0 ? _a : {}), (0, extract_enum_json_paths_1.extractEnumJsonPaths)(schema, z, []))
             .then((response) => {
             if (!response.success) {
                 console.log(response.stack);
@@ -242,7 +239,13 @@ const DataEditor = ({ unresolvedComposition, inputProps, setInputProps, mayShowS
             (0, NotificationCenter_1.sendErrorNotification)(`Cannot update default props: ${err.message}`);
             setSaving(false);
         });
-    }, [unresolvedComposition.defaultProps, unresolvedComposition.id, schema, z]);
+    }, [
+        schema,
+        z,
+        setSaving,
+        unresolvedComposition.id,
+        unresolvedComposition.defaultProps,
+    ]);
     const connectionStatus = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx).type;
     const warnings = (0, react_1.useMemo)(() => {
         return (0, get_render_modal_warnings_1.getRenderModalWarnings)({
@@ -291,6 +294,6 @@ const DataEditor = ({ unresolvedComposition, inputProps, setInputProps, mayShowS
     }
     return ((0, jsx_runtime_1.jsxs)("div", { style: outer, children: [(0, jsx_runtime_1.jsxs)("div", { style: controlContainer, children: [(0, jsx_runtime_1.jsxs)("div", { style: tabWrapper, children: [(0, jsx_runtime_1.jsx)(SegmentedControl_1.SegmentedControl, { items: modeItems, needsWrapping: false }), (0, jsx_runtime_1.jsx)(layout_1.Flex, {}), warnings.length > 0 ? ((0, jsx_runtime_1.jsx)(WarningIndicatorButton_1.WarningIndicatorButton, { setShowWarning: setShowWarning, showWarning: showWarning, warningCount: warnings.length })) : null] }), showWarning && warnings.length > 0
                         ? warnings.map((warning) => ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1 }), (0, jsx_runtime_1.jsx)(ValidationMessage_1.ValidationMessage, { message: warning, align: "flex-start", type: "warning" })] }, warning)))
-                        : null] }), mode === 'schema' ? ((0, jsx_runtime_1.jsx)(SchemaEditor_1.SchemaEditor, { value: inputProps, setValue: setInputProps, schema: schema, zodValidationResult: zodValidationResult, defaultProps: unresolvedComposition.defaultProps, onSave: onSave, showSaveButton: showSaveButton, saving: saving, saveDisabledByParent: !zodValidationResult.success })) : ((0, jsx_runtime_1.jsx)(RenderModalJSONPropsEditor_1.RenderModalJSONPropsEditor, { value: inputProps !== null && inputProps !== void 0 ? inputProps : {}, setValue: setInputProps, onSave: onUpdate, valBeforeSafe: valBeforeSafe, showSaveButton: showSaveButton, serializedJSON: serializedJSON, defaultProps: unresolvedComposition.defaultProps, schema: schema }))] }));
+                        : null] }), mode === 'schema' ? ((0, jsx_runtime_1.jsx)(SchemaEditor_1.SchemaEditor, { value: inputProps, setValue: setInputProps, schema: schema, zodValidationResult: zodValidationResult, defaultProps: unresolvedComposition.defaultProps, onSave: onSave, showSaveButton: showSaveButton, saving: saving, saveDisabledByParent: !zodValidationResult.success })) : ((0, jsx_runtime_1.jsx)(RenderModalJSONPropsEditor_1.RenderModalJSONPropsEditor, { value: inputProps !== null && inputProps !== void 0 ? inputProps : {}, setValue: setInputProps, onSave: onUpdate, showSaveButton: showSaveButton, serializedJSON: serializedJSON, defaultProps: unresolvedComposition.defaultProps, schema: schema }))] }));
 };
 exports.DataEditor = DataEditor;

package/dist/editor/components/RenderModal/FrameRangeSetting.js

@@ -3,13 +3,17 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.FrameRangeSetting = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const InputDragger_1 = require("../NewComposition/InputDragger");
-const RemInput_1 = require("../NewComposition/RemInput");
 const layout_1 = require("./layout");
+const MultiRangeSlider_1 = require("./MultiRangeSlider");
+const numberWrapper = {
+    minWidth: '39px',
+    display: 'flex',
+    justifyContent: 'flex-end',
+    alignItems: 'center',
+    fontSize: '14px',
+};
 const FrameRangeSetting = ({ startFrame, endFrame, setEndFrame, durationInFrames, setStartFrame }) => {
-    const maxStartFrame = endFrame - 1;
     const minStartFrame = 0;
-    const minEndFrame = startFrame + 1;
     const maxEndFrame = durationInFrames - 1;
     const onStartFrameChangedDirectly = (0, react_1.useCallback)((newStartFrame) => {
         setStartFrame(newStartFrame);
@@ -17,26 +21,6 @@ const FrameRangeSetting = ({ startFrame, endFrame, setEndFrame, durationInFrames
     const onEndFrameChangedDirectly = (0, react_1.useCallback)((newEndFrame) => {
         setEndFrame(newEndFrame);
     }, [setEndFrame]);
-    const onStartFrameChanged = (0, react_1.useCallback)((e) => {
-        setStartFrame((q) => {
-            const newStartFrame = parseInt(e, 10);
-            if (Number.isNaN(newStartFrame)) {
-                return q;
-            }
-            const newStartFrameClamped = Math.min(maxStartFrame, Math.max(newStartFrame, minStartFrame));
-            return newStartFrameClamped;
-        });
-    }, [maxStartFrame, setStartFrame]);
-    const onEndFrameChanged = (0, react_1.useCallback)((e) => {
-        setEndFrame((q) => {
-            const newEndFrame = parseInt(e, 10);
-            if (Number.isNaN(newEndFrame)) {
-                return q;
-            }
-            const newEndFrameClamped = Math.min(maxEndFrame, Math.max(newEndFrame, minEndFrame));
-            return newEndFrameClamped;
-        });
-    }, [maxEndFrame, minEndFrame, setEndFrame]);
-    return ((0, jsx_runtime_1.jsxs)("div", { style: layout_1.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_1.label, children: "Frame range" }), (0, jsx_runtime_1.jsxs)("div", { style: layout_1.rightRow, children: [(0, jsx_runtime_1.jsx)(RemInput_1.RightAlignInput, { children: (0, jsx_runtime_1.jsx)(InputDragger_1.InputDragger, { value: startFrame, onTextChange: onStartFrameChanged, placeholder: `${minStartFrame}-${maxStartFrame}`, onValueChange: onStartFrameChangedDirectly, name: "startFrame", step: 1, min: minStartFrame, max: maxStartFrame, status: "ok", rightAlign: true }) }), (0, jsx_runtime_1.jsx)(RemInput_1.RightAlignInput, { children: (0, jsx_runtime_1.jsx)(InputDragger_1.InputDragger, { value: endFrame, onTextChange: onEndFrameChanged, placeholder: `${minEndFrame}-${maxEndFrame}`, onValueChange: onEndFrameChangedDirectly, name: "endFrame", step: 1, min: minEndFrame, max: maxEndFrame, status: "ok", rightAlign: true }) })] })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { style: layout_1.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_1.label, children: "Frame range" }), (0, jsx_runtime_1.jsxs)("div", { style: layout_1.rightRow, children: [(0, jsx_runtime_1.jsx)("div", { style: numberWrapper, children: startFrame }), (0, jsx_runtime_1.jsx)(MultiRangeSlider_1.MultiRangeSlider, { min: minStartFrame, max: maxEndFrame, start: startFrame, end: endFrame, step: 1, onLeftThumbDrag: onStartFrameChangedDirectly, onRightThumbDrag: onEndFrameChangedDirectly }), (0, jsx_runtime_1.jsx)("div", { style: numberWrapper, children: endFrame })] })] }));
 };
 exports.FrameRangeSetting = FrameRangeSetting;

package/dist/editor/components/RenderModal/MultiRangeSlider.d.ts

@@ -0,0 +1,12 @@
+import type { FC } from 'react';
+interface MultiRangeSliderProps {
+    min: number;
+    max: number;
+    start: number;
+    end: number;
+    step: number;
+    onLeftThumbDrag: (newVal: number) => void;
+    onRightThumbDrag: (newVal: number) => void;
+}
+export declare const MultiRangeSlider: FC<MultiRangeSliderProps>;
+export {};

package/dist/editor/components/RenderModal/MultiRangeSlider.js

@@ -0,0 +1,50 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MultiRangeSlider = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const colors_1 = require("../../helpers/colors");
+const container = {
+    borderColor: 'black',
+    borderStyle: 'solid',
+    height: 39,
+    width: 220,
+    position: 'relative',
+    backgroundColor: colors_1.INPUT_BACKGROUND,
+    marginLeft: 8,
+    marginRight: 8,
+    borderRadius: 2,
+};
+const slider = {
+    position: 'relative',
+    height: 38,
+    width: 220,
+};
+const sliderRange = {
+    position: 'absolute',
+    top: 0,
+    backgroundColor: colors_1.BLUE,
+    height: 39,
+};
+const MultiRangeSlider = ({ min, max, start, end, step, onLeftThumbDrag, onRightThumbDrag, }) => {
+    const getPercent = (0, react_1.useCallback)((value) => Math.round(((value - min) / (max - min)) * 100), [min, max]);
+    const rangeStyle = (0, react_1.useMemo)(() => {
+        const minPercent = getPercent(start);
+        const maxPercent = getPercent(end);
+        return {
+            ...sliderRange,
+            left: `${minPercent}%`,
+            width: `${maxPercent - minPercent}%`,
+        };
+    }, [end, getPercent, start]);
+    const onChangeLeft = (0, react_1.useCallback)((event) => {
+        const value = Math.min(Number(event.target.value), end - 1);
+        onLeftThumbDrag(value);
+    }, [end, onLeftThumbDrag]);
+    const onChangeRight = (0, react_1.useCallback)((event) => {
+        const value = Math.max(Number(event.target.value), start + 1);
+        onRightThumbDrag(value);
+    }, [onRightThumbDrag, start]);
+    return ((0, jsx_runtime_1.jsx)("div", { style: container, children: (0, jsx_runtime_1.jsxs)("div", { style: slider, children: [(0, jsx_runtime_1.jsx)("input", { type: "range", min: min, max: max, value: start, step: step, onChange: onChangeLeft, className: "__remotion_thumb" }), (0, jsx_runtime_1.jsx)("input", { type: "range", min: min, max: max, value: end, step: step, onChange: onChangeRight, className: "__remotion_thumb" }), (0, jsx_runtime_1.jsx)("div", { style: rangeStyle })] }) }));
+};
+exports.MultiRangeSlider = MultiRangeSlider;