@remotion/cli 4.1.0-alpha1 → 4.1.0-alpha10

package/dist/editor/components/RightPanel.js

@@ -4,8 +4,10 @@ exports.RightPanel = exports.rightSidebarTabs = exports.persistSelectedPanel = v
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
+const ShortcutHint_1 = require("../../preview-server/error-overlay/remotion-overlay/ShortcutHint");
 const colors_1 = require("../helpers/colors");
 const DataEditor_1 = require("./RenderModal/DataEditor");
+const deep_equal_1 = require("./RenderModal/SchemaEditor/deep-equal");
 const RenderQueue_1 = require("./RenderQueue");
 const RendersTab_1 = require("./RendersTab");
 const Tabs_1 = require("./Tabs");
@@ -16,17 +18,10 @@ const container = {
     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 circle = {
+    width: 8,
+    height: 8,
+    borderRadius: 4,
 };
 const localStorageKey = 'remotion.sidebarPanel';
 const getSelectedPanel = () => {
@@ -45,6 +40,8 @@ const persistSelectedPanel = (panel) => {
 exports.persistSelectedPanel = persistSelectedPanel;
 exports.rightSidebarTabs = (0, react_1.createRef)();
 const RightPanel = () => {
+    const { props, updateProps } = (0, react_1.useContext)(remotion_1.Internals.EditorPropsContext);
+    const [saving, setSaving] = (0, react_1.useState)(false);
     const [panel, setPanel] = (0, react_1.useState)(() => getSelectedPanel());
     const onCompositionsSelected = (0, react_1.useCallback)(() => {
         setPanel('input-props');
@@ -63,6 +60,14 @@ const RightPanel = () => {
         };
     }, []);
     const { compositions, currentComposition } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
+    const circleStyle = (0, react_1.useMemo)(() => {
+        const onTabColor = saving ? colors_1.LIGHT_TEXT : 'white';
+        return {
+            ...circle,
+            backgroundColor: panel === 'input-props' ? onTabColor : colors_1.LIGHT_TEXT,
+            cursor: 'help',
+        };
+    }, [panel, saving]);
     const composition = (0, react_1.useMemo)(() => {
         for (const comp of compositions) {
             if (comp.id === currentComposition) {
@@ -71,9 +76,37 @@ const RightPanel = () => {
         }
         return null;
     }, [compositions, currentComposition]);
+    const saveToolTip = (0, react_1.useMemo)(() => {
+        return process.env.KEYBOARD_SHORTCUTS_ENABLED
+            ? `Save using ${ShortcutHint_1.cmdOrCtrlCharacter}+S`
+            : 'There are unsaved changes';
+    }, []);
+    const setInputProps = (0, react_1.useCallback)((newProps) => {
+        if (composition === null) {
+            return;
+        }
+        updateProps({
+            id: composition.id,
+            defaultProps: composition.defaultProps,
+            newProps,
+        });
+    }, [composition, updateProps]);
+    const actualProps = (0, react_1.useMemo)(() => {
+        var _a, _b;
+        if (composition === null) {
+            return {};
+        }
+        return (_b = (_a = props[composition.id]) !== null && _a !== void 0 ? _a : composition.defaultProps) !== null && _b !== void 0 ? _b : {};
+    }, [composition, props]);
+    const unsavedChangesExist = (0, react_1.useMemo)(() => {
+        if (composition === null || composition.defaultProps === undefined) {
+            return false;
+        }
+        return !(0, deep_equal_1.deepEqual)(composition.defaultProps, actualProps);
+    }, [actualProps, composition]);
     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: onCompositionsSelected, 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 }))] }));
+    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.jsxs)(Tabs_1.Tab, { selected: panel === 'input-props', onClick: onCompositionsSelected, style: { justifyContent: 'space-between' }, children: ["Props", unsavedChangesExist ? ((0, jsx_runtime_1.jsx)("div", { title: saveToolTip, style: circleStyle })) : null] }), (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)(DataEditor_1.DataEditor, { unresolvedComposition: composition, inputProps: actualProps, setInputProps: setInputProps, mayShowSaveButton: true, propsEditType: "default-props", saving: saving, setSaving: setSaving }, composition.id))] }));
 };
 exports.RightPanel = RightPanel;

package/dist/editor/components/SetTimelineInOutProvider.js

@@ -4,16 +4,17 @@ exports.SetTimelineInOutProvider = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const in_out_1 = require("../state/in-out");
+const marks_1 = require("../state/marks");
 const SetTimelineInOutProvider = ({ children }) => {
-    const [inAndOutFrames, setInAndOutFrames] = (0, react_1.useState)({
-        inFrame: null,
-        outFrame: null,
-    });
+    const [inAndOutFrames, setInAndOutFrames] = (0, react_1.useState)(() => (0, marks_1.loadMarks)());
     const setTimelineInOutContextValue = (0, react_1.useMemo)(() => {
         return {
             setInAndOutFrames,
         };
     }, []);
+    (0, react_1.useEffect)(() => {
+        (0, marks_1.persistMarks)(inAndOutFrames);
+    }, [inAndOutFrames]);
     return ((0, jsx_runtime_1.jsx)(in_out_1.TimelineInOutContext.Provider, { value: inAndOutFrames, children: (0, jsx_runtime_1.jsx)(in_out_1.SetTimelineInOutContext.Provider, { value: setTimelineInOutContextValue, children: children }) }));
 };
 exports.SetTimelineInOutProvider = SetTimelineInOutProvider;

package/dist/editor/components/SidebarRenderButton.js

@@ -22,7 +22,9 @@ const SidebarRenderButton = ({ composition, visible }) => {
     }, []);
     const connectionStatus = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx).type;
     const { props } = (0, react_1.useContext)(remotion_1.Internals.EditorPropsContext);
-    const isVideo = composition.durationInFrames > 1;
+    const isVideo = typeof composition.durationInFrames === 'undefined'
+        ? true
+        : composition.durationInFrames > 1;
     const onClick = (0, react_1.useCallback)((e) => {
         var _a;
         const defaults = window.remotion_renderDefaults;

package/dist/editor/components/Timeline/TimelineDragHandler.js

@@ -9,8 +9,8 @@ const get_left_of_timeline_slider_1 = require("../../helpers/get-left-of-timelin
 const timeline_layout_1 = require("../../helpers/timeline-layout");
 const in_out_1 = require("../../state/in-out");
 const timeline_zoom_1 = require("../../state/timeline-zoom");
-const FramePersistor_1 = require("../FramePersistor");
 const is_menu_item_1 = require("../Menu/is-menu-item");
+const TimelineInOutToggle_1 = require("../TimelineInOutToggle");
 const timeline_refs_1 = require("./timeline-refs");
 const timeline_scroll_logic_1 = require("./timeline-scroll-logic");
 const TimelineInOutPointer_1 = require("./TimelineInOutPointer");
@@ -50,6 +50,7 @@ const Inner = () => {
         triggerOnWindowResize: true,
         shouldApplyCssTransforms: true,
     });
+    const setFrame = remotion_1.Internals.useTimelineSetFrame();
     const [inOutDragging, setInOutDragging] = (0, react_1.useState)({
         dragging: false,
     });
@@ -254,11 +255,12 @@ const Inner = () => {
             width,
             extrapolate: 'clamp',
         });
-        (0, FramePersistor_1.persistCurrentFrame)(frame);
+        remotion_1.Internals.persistCurrentFrame(frame, videoConfig.id);
+        setFrame((c) => ({ ...c, [videoConfig.id]: frame }));
         if (dragging.wasPlaying) {
             play();
         }
-    }, [dragging, left, play, videoConfig, width]);
+    }, [dragging, left, play, videoConfig, setFrame, width]);
     const onPointerUpInOut = (0, react_1.useCallback)((e) => {
         if (!videoConfig) {
             return;
@@ -277,29 +279,53 @@ const Inner = () => {
         });
         if (inOutDragging.dragging === 'in') {
             if (frame < 1) {
-                return setInAndOutFrames((prev) => ({
-                    ...prev,
-                    inFrame: null,
-                }));
+                return setInAndOutFrames((prev) => {
+                    var _a;
+                    return ({
+                        ...prev,
+                        [videoConfig.id]: {
+                            ...((_a = prev[videoConfig.id]) !== null && _a !== void 0 ? _a : TimelineInOutToggle_1.defaultInOutValue),
+                            inFrame: null,
+                        },
+                    });
+                });
             }
             const maxFrame = outFrame === null ? Infinity : outFrame - 1;
-            setInAndOutFrames((prev) => ({
-                ...prev,
-                inFrame: Math.min(maxFrame, frame),
-            }));
+            setInAndOutFrames((prev) => {
+                var _a;
+                return ({
+                    ...prev,
+                    [videoConfig.id]: {
+                        ...((_a = prev[videoConfig.id]) !== null && _a !== void 0 ? _a : TimelineInOutToggle_1.defaultInOutValue),
+                        inFrame: Math.min(maxFrame, frame),
+                    },
+                });
+            });
         }
         else {
             if (frame > videoConfig.durationInFrames - 2) {
-                return setInAndOutFrames((prev) => ({
-                    ...prev,
-                    outFrame: null,
-                }));
+                return setInAndOutFrames((prev) => {
+                    var _a;
+                    return ({
+                        ...prev,
+                        [videoConfig.id]: {
+                            ...((_a = prev[videoConfig.id]) !== null && _a !== void 0 ? _a : TimelineInOutToggle_1.defaultInOutValue),
+                            outFrame: null,
+                        },
+                    });
+                });
             }
             const minFrame = inFrame === null ? -Infinity : inFrame + 1;
-            setInAndOutFrames((prev) => ({
-                ...prev,
-                outFrame: Math.max(minFrame, frame),
-            }));
+            setInAndOutFrames((prev) => {
+                var _a;
+                return ({
+                    ...prev,
+                    [videoConfig.id]: {
+                        ...((_a = prev[videoConfig.id]) !== null && _a !== void 0 ? _a : TimelineInOutToggle_1.defaultInOutValue),
+                        outFrame: Math.max(minFrame, frame),
+                    },
+                });
+            });
         }
     }, [
         inFrame,

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

@@ -1,8 +1,9 @@
 import React from 'react';
+import type { InOutValue } from '../state/in-out';
 export declare const inOutHandles: React.RefObject<{
     inMarkClick: (e: KeyboardEvent | null) => void;
     outMarkClick: (e: KeyboardEvent | null) => void;
     clearMarks: () => void;
-    setMarks: (marks: [number | null, number | null]) => void;
 }>;
+export declare const defaultInOutValue: InOutValue;
 export declare const TimelineInOutPointToggle: React.FC;

package/dist/editor/components/TimelineInOutToggle.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TimelineInOutPointToggle = exports.inOutHandles = void 0;
+exports.TimelineInOutPointToggle = exports.defaultInOutValue = exports.inOutHandles = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
@@ -10,7 +10,6 @@ const is_current_selected_still_1 = require("../helpers/is-current-selected-stil
 const use_keybinding_1 = require("../helpers/use-keybinding");
 const timelineInOutPointer_1 = require("../icons/timelineInOutPointer");
 const in_out_1 = require("../state/in-out");
-const marks_1 = require("../state/marks");
 const ControlButton_1 = require("./ControlButton");
 const getTooltipText = (pointType, key) => [
     `Mark ${pointType}`,
@@ -24,19 +23,22 @@ const style = {
     height: 16,
 };
 exports.inOutHandles = (0, react_1.createRef)();
+exports.defaultInOutValue = { inFrame: null, outFrame: null };
 const TimelineInOutPointToggle = () => {
     const timelinePosition = remotion_1.Internals.Timeline.useTimelinePosition();
     const { inFrame, outFrame } = (0, in_out_1.useTimelineInOutFramePosition)();
     const { setInAndOutFrames } = (0, in_out_1.useTimelineSetInOutFramePosition)();
-    const { currentComposition } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     const isStill = (0, is_current_selected_still_1.useIsStill)();
     const videoConfig = remotion_1.Internals.useUnsafeVideoConfig();
     const keybindings = (0, use_keybinding_1.useKeybinding)();
-    const onInOutClear = (0, react_1.useCallback)(() => {
-        setInAndOutFrames(() => {
+    const onInOutClear = (0, react_1.useCallback)((composition) => {
+        setInAndOutFrames((prev) => {
             return {
-                inFrame: null,
-                outFrame: null,
+                ...prev,
+                [composition]: {
+                    inFrame: null,
+                    outFrame: null,
+                },
             };
         });
     }, [setInAndOutFrames]);
@@ -45,35 +47,51 @@ const TimelineInOutPointToggle = () => {
             return null;
         }
         if (e === null || e === void 0 ? void 0 : e.shiftKey) {
-            setInAndOutFrames((f) => {
+            setInAndOutFrames((prev) => {
+                var _a;
                 return {
-                    ...f,
-                    inFrame: null,
+                    ...prev,
+                    [videoConfig.id]: {
+                        ...((_a = prev[videoConfig.id]) !== null && _a !== void 0 ? _a : exports.defaultInOutValue),
+                        inFrame: null,
+                    },
                 };
             });
             return null;
         }
         setInAndOutFrames((prev) => {
-            const biggestPossible = prev.outFrame === null ? Infinity : prev.outFrame - 1;
+            var _a, _b, _c, _d, _e;
+            const prevOut = (_a = prev[videoConfig.id]) === null || _a === void 0 ? void 0 : _a.outFrame;
+            const biggestPossible = prevOut === undefined || prevOut === null ? Infinity : prevOut - 1;
             const selected = Math.min(timelinePosition, biggestPossible);
             if (selected === 0) {
                 return {
                     ...prev,
-                    inFrame: null,
+                    [videoConfig.id]: {
+                        ...((_b = prev[videoConfig.id]) !== null && _b !== void 0 ? _b : exports.defaultInOutValue),
+                        inFrame: null,
+                    },
                 };
             }
-            if (prev.inFrame !== null) {
+            const prevIn = (_c = prev[videoConfig.id]) === null || _c === void 0 ? void 0 : _c.inFrame;
+            if (prevIn !== null && prevIn !== undefined) {
                 // Disable if already at this position
-                if (prev.inFrame === selected) {
+                if (prevIn === selected) {
                     return {
                         ...prev,
-                        inFrame: null,
+                        [videoConfig.id]: {
+                            ...((_d = prev[videoConfig.id]) !== null && _d !== void 0 ? _d : exports.defaultInOutValue),
+                            inFrame: null,
+                        },
                     };
                 }
             }
             return {
                 ...prev,
-                inFrame: selected,
+                [videoConfig.id]: {
+                    ...((_e = prev[videoConfig.id]) !== null && _e !== void 0 ? _e : exports.defaultInOutValue),
+                    inFrame: selected,
+                },
             };
         });
     }, [setInAndOutFrames, timelinePosition, videoConfig]);
@@ -83,9 +101,13 @@ const TimelineInOutPointToggle = () => {
         }
         e.preventDefault();
         setInAndOutFrames((f) => {
+            var _a;
             return {
                 ...f,
-                inFrame: null,
+                [videoConfig.id]: {
+                    ...((_a = f[videoConfig.id]) !== null && _a !== void 0 ? _a : exports.defaultInOutValue),
+                    inFrame: null,
+                },
             };
         });
     }, [setInAndOutFrames, videoConfig]);
@@ -95,9 +117,13 @@ const TimelineInOutPointToggle = () => {
         }
         e === null || e === void 0 ? void 0 : e.preventDefault();
         setInAndOutFrames((f) => {
+            var _a;
             return {
                 ...f,
-                outFrame: null,
+                [videoConfig.id]: {
+                    ...((_a = f[videoConfig.id]) !== null && _a !== void 0 ? _a : exports.defaultInOutValue),
+                    outFrame: null,
+                },
             };
         });
     }, [setInAndOutFrames, videoConfig]);
@@ -107,37 +133,59 @@ const TimelineInOutPointToggle = () => {
         }
         if (e === null || e === void 0 ? void 0 : e.shiftKey) {
             setInAndOutFrames((f) => {
+                var _a;
                 return {
                     ...f,
-                    outFrame: null,
+                    [videoConfig.id]: {
+                        ...((_a = f[videoConfig.id]) !== null && _a !== void 0 ? _a : exports.defaultInOutValue),
+                        outFrame: null,
+                    },
                 };
             });
             return;
         }
         setInAndOutFrames((prev) => {
-            const smallestPossible = prev.inFrame === null ? -Infinity : prev.inFrame + 1;
+            var _a, _b, _c, _d, _e;
+            const prevInFrame = (_a = prev[videoConfig.id]) === null || _a === void 0 ? void 0 : _a.inFrame;
+            const smallestPossible = prevInFrame === null || prevInFrame === undefined
+                ? -Infinity
+                : prevInFrame + 1;
             const selected = Math.max(timelinePosition, smallestPossible);
             if (selected === videoConfig.durationInFrames - 1) {
                 return {
                     ...prev,
-                    outFrame: null,
+                    [videoConfig.id]: {
+                        ...((_b = prev[videoConfig.id]) !== null && _b !== void 0 ? _b : exports.defaultInOutValue),
+                        outFrame: null,
+                    },
                 };
             }
-            if (prev.outFrame !== null) {
-                if (prev.outFrame === selected) {
+            const prevOut = (_c = prev[videoConfig.id]) === null || _c === void 0 ? void 0 : _c.outFrame;
+            if (prevOut !== null && prevOut !== undefined) {
+                if (prevOut === selected) {
                     return {
                         ...prev,
-                        outFrame: null,
+                        [videoConfig.id]: {
+                            ...((_d = prev[videoConfig.id]) !== null && _d !== void 0 ? _d : exports.defaultInOutValue),
+                            outFrame: null,
+                        },
                     };
                 }
             }
             return {
                 ...prev,
-                outFrame: selected,
+                [videoConfig.id]: {
+                    ...((_e = prev[videoConfig.id]) !== null && _e !== void 0 ? _e : exports.defaultInOutValue),
+                    outFrame: selected,
+                },
             };
         });
     }, [setInAndOutFrames, timelinePosition, videoConfig]);
+    const confId = videoConfig === null || videoConfig === void 0 ? void 0 : videoConfig.id;
     (0, react_1.useEffect)(() => {
+        if (!confId) {
+            return;
+        }
         const iKey = keybindings.registerKeybinding({
             event: 'keypress',
             key: 'i',
@@ -162,7 +210,7 @@ const TimelineInOutPointToggle = () => {
             event: 'keypress',
             key: 'x',
             callback: () => {
-                onInOutClear();
+                onInOutClear(confId);
             },
             commandCtrlKey: false,
             preventDefault: true,
@@ -173,52 +221,19 @@ const TimelineInOutPointToggle = () => {
             iKey.unregister();
             xKey.unregister();
         };
-    }, [keybindings, onInMark, onInOutClear, onOutMark]);
-    (0, react_1.useEffect)(() => {
-        if (!currentComposition || !videoConfig) {
-            return;
-        }
-        (0, marks_1.persistMarks)(currentComposition, videoConfig.durationInFrames, [
-            inFrame,
-            outFrame,
-        ]);
-    }, [currentComposition, inFrame, outFrame, videoConfig]);
-    // If duration changes and it goes out of range, we reset
-    (0, react_1.useEffect)(() => {
-        if (outFrame === null) {
-            return;
-        }
-        if (!videoConfig) {
-            return;
-        }
-        if (outFrame >= videoConfig.durationInFrames - 1) {
-            onInOutClear();
-        }
-    }, [onInOutClear, outFrame, videoConfig]);
-    (0, react_1.useEffect)(() => {
-        if (inFrame === null) {
-            return;
-        }
-        if (!videoConfig) {
-            return;
-        }
-        if (inFrame >= videoConfig.durationInFrames - 1) {
-            onInOutClear();
-        }
-    }, [onInOutClear, inFrame, videoConfig]);
+    }, [confId, keybindings, onInMark, onInOutClear, onOutMark]);
     (0, react_1.useImperativeHandle)(exports.inOutHandles, () => {
         return {
-            clearMarks: onInOutClear,
+            clearMarks: () => {
+                if (!confId) {
+                    return;
+                }
+                onInOutClear(confId);
+            },
             inMarkClick: onInMark,
             outMarkClick: onOutMark,
-            setMarks: ([newInFrame, newOutFrame]) => {
-                setInAndOutFrames({
-                    inFrame: newInFrame,
-                    outFrame: newOutFrame,
-                });
-            },
         };
-    }, [onInMark, onInOutClear, onOutMark, setInAndOutFrames]);
+    }, [confId, onInMark, onInOutClear, onOutMark]);
     if (isStill) {
         return null;
     }

package/dist/editor/helpers/is-composition-still.d.ts

@@ -1,3 +1,3 @@
 export declare const isCompositionStill: (comp: {
-    durationInFrames: number;
+    durationInFrames: number | undefined;
 } | null) => boolean;

package/dist/editor/helpers/is-current-selected-still.js

@@ -13,16 +13,15 @@ const useIsStill = () => {
 };
 exports.useIsStill = useIsStill;
 const useDimensions = () => {
-    const { compositions, currentComposition } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
-    const selected = (0, react_1.useMemo)(() => compositions.find((c) => c.id === currentComposition), [compositions, currentComposition]);
+    const config = remotion_1.Internals.useUnsafeVideoConfig();
     return (0, react_1.useMemo)(() => {
-        if (!selected) {
+        if (!config) {
             return null;
         }
         return {
-            width: selected.width,
-            height: selected.height,
+            width: config.width,
+            height: config.height,
         };
-    }, [selected]);
+    }, [config]);
 };
 exports.useDimensions = useDimensions;

package/dist/editor/helpers/use-menu-structure.js

@@ -11,6 +11,7 @@ const NotificationCenter_1 = require("../components/Notifications/NotificationCe
 const SizeSelector_1 = require("../components/SizeSelector");
 const TimelineInOutToggle_1 = require("../components/TimelineInOutToggle");
 const Checkmark_1 = require("../icons/Checkmark");
+const canvas_ref_1 = require("../state/canvas-ref");
 const checkerboard_1 = require("../state/checkerboard");
 const editor_zoom_gestures_1 = require("../state/editor-zoom-gestures");
 const modals_1 = require("../state/modals");
@@ -36,6 +37,7 @@ const useMenuStructure = (closeMenu) => {
     const { type } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const { setSidebarCollapsedState, sidebarCollapsedStateLeft, sidebarCollapsedStateRight, } = (0, react_1.useContext)(sidebar_1.SidebarContext);
     const sizes = (0, SizeSelector_1.getUniqueSizes)(size);
+    const isFullscreenSupported = document.fullscreenEnabled || document.webkitFullscreenEnabled;
     const structure = (0, react_1.useMemo)(() => {
         const struct = [
             {
@@ -474,7 +476,28 @@ const useMenuStructure = (closeMenu) => {
                         value: 'clear-marks',
                         quickSwitcherLabel: 'Timeline: Clear In and Out Mark',
                     },
-                ],
+                    {
+                        id: 'fullscreen-divider',
+                        type: 'divider',
+                    },
+                    isFullscreenSupported
+                        ? {
+                            id: 'fullscreen',
+                            keyHint: null,
+                            label: 'Fullscreen',
+                            leftItem: null,
+                            onClick: () => {
+                                var _a;
+                                closeMenu();
+                                (_a = canvas_ref_1.canvasRef.current) === null || _a === void 0 ? void 0 : _a.requestFullscreen();
+                            },
+                            subMenu: null,
+                            type: 'item',
+                            value: 'fullscreen',
+                            quickSwitcherLabel: 'Go Fullscreen',
+                        }
+                        : null,
+                ].filter(remotion_1.Internals.truthy),
             },
             'EyeDropper' in window
                 ? {
@@ -639,6 +662,7 @@ const useMenuStructure = (closeMenu) => {
         sidebarCollapsedStateLeft,
         sidebarCollapsedStateRight,
         checkerboard,
+        isFullscreenSupported,
         closeMenu,
         setSelectedModal,
         type,

package/dist/editor/icons/keys.js

@@ -4,6 +4,7 @@ exports.ArrowRight = exports.ArrowLeft = exports.ShiftIcon = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const iconStyle = {
     width: 10,
+    display: 'inline',
 };
 const ShiftIcon = () => {
     return ((0, jsx_runtime_1.jsx)("svg", { style: iconStyle, viewBox: "0 0 448 512", children: (0, jsx_runtime_1.jsx)("path", { fill: "currentColor", d: "M48.048 304h73.798v128c0 26.51 21.49 48 48 48h108.308c26.51 0 48-21.49 48-48V304h73.789c42.638 0 64.151-51.731 33.941-81.941l-175.943-176c-18.745-18.745-49.137-18.746-67.882 0l-175.952 176C-16.042 252.208 5.325 304 48.048 304zM224 80l176 176H278.154v176H169.846V256H48L224 80z" }) }));

package/dist/editor/state/canvas-ref.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const canvasRef: import("react").RefObject<HTMLDivElement>;

package/dist/editor/state/canvas-ref.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.canvasRef = void 0;
+const react_1 = require("react");
+exports.canvasRef = (0, react_1.createRef)();

package/dist/editor/state/in-out.d.ts

@@ -1,12 +1,13 @@
 import type React from 'react';
-export type TimelineInOutContextValue = {
+export type InOutValue = {
     inFrame: number | null;
     outFrame: number | null;
 };
+export type TimelineInOutContextValue = Record<string, InOutValue>;
 export type SetTimelineInOutContextValue = {
     setInAndOutFrames: (u: React.SetStateAction<TimelineInOutContextValue>) => void;
 };
 export declare const TimelineInOutContext: React.Context<TimelineInOutContextValue>;
 export declare const SetTimelineInOutContext: React.Context<SetTimelineInOutContextValue>;
-export declare const useTimelineInOutFramePosition: () => TimelineInOutContextValue;
+export declare const useTimelineInOutFramePosition: () => InOutValue;
 export declare const useTimelineSetInOutFramePosition: () => SetTimelineInOutContextValue;