@remotion/cli 4.0.7 → 4.0.10

package/dist/cloudrun-command.d.ts

@@ -0,0 +1 @@
+export declare const cloudrunCommand: (remotionRoot: string, args: string[]) => Promise<never>;

package/dist/cloudrun-command.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.cloudrunCommand = void 0;
+const log_1 = require("./log");
+const get_package_manager_1 = require("./preview-server/get-package-manager");
+const update_available_1 = require("./preview-server/update-available");
+const cloudrunCommand = async (remotionRoot, args) => {
+    try {
+        const path = require.resolve('@remotion/cloudrun', {
+            paths: [remotionRoot],
+        });
+        const { CloudrunInternals } = require(path);
+        await CloudrunInternals.executeCommand(args, remotionRoot);
+        process.exit(0);
+    }
+    catch (err) {
+        const manager = (0, get_package_manager_1.getPackageManager)(remotionRoot, undefined);
+        const installCommand = manager === 'unknown' ? 'npm i' : manager.installCommand;
+        log_1.Log.error(err);
+        log_1.Log.error('Remotion CloudRun is not installed.');
+        log_1.Log.info('');
+        log_1.Log.info('You can install it using:');
+        log_1.Log.info(`${installCommand} @remotion/cloudrun@${(0, update_available_1.getRemotionVersion)()}`);
+        process.exit(1);
+    }
+};
+exports.cloudrunCommand = cloudrunCommand;

package/dist/config/log.d.ts

@@ -1 +1 @@
-export declare const getLogLevel: () => "verbose" | "info" | "warn" | "error", setLogLevel: (newLogLevel: "verbose" | "info" | "warn" | "error") => void;
+export declare const getLogLevel: () => "error" | "verbose" | "info" | "warn", setLogLevel: (newLogLevel: "error" | "verbose" | "info" | "warn") => void;

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

package/dist/editor/components/RenderModal/SchemaEditor/input-props-serialization.d.ts

@@ -0,0 +1,14 @@
+export type SerializedJSONWithCustomFields = {
+    serializedString: string;
+    customDateUsed: boolean;
+    customFileUsed: boolean;
+    mapUsed: boolean;
+    setUsed: boolean;
+};
+export declare const FILE_TOKEN = "remotion-file:";
+export declare const serializeJSONWithDate: ({ data, indent, staticBase, }: {
+    data: unknown;
+    indent: number | undefined;
+    staticBase: string;
+}) => SerializedJSONWithCustomFields;
+export declare const deserializeJSONWithCustomFields: (data: string) => any;

package/dist/editor/components/RenderModal/SchemaEditor/input-props-serialization.js

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.deserializeJSONWithCustomFields = exports.serializeJSONWithDate = exports.FILE_TOKEN = void 0;
+const DATE_TOKEN = 'remotion-date:';
+exports.FILE_TOKEN = 'remotion-file:';
+const serializeJSONWithDate = ({ data, indent, staticBase, }) => {
+    let customDateUsed = false;
+    let customFileUsed = false;
+    let mapUsed = false;
+    let setUsed = false;
+    const serializedString = JSON.stringify(data, function (key, value) {
+        const item = this[key];
+        if (item instanceof Date) {
+            customDateUsed = true;
+            return `${DATE_TOKEN}${item.toISOString()}`;
+        }
+        if (item instanceof Map) {
+            mapUsed = true;
+            return value;
+        }
+        if (item instanceof Set) {
+            setUsed = true;
+            return value;
+        }
+        if (typeof item === 'string' && item.startsWith(staticBase)) {
+            customFileUsed = true;
+            return `${exports.FILE_TOKEN}${item.replace(staticBase + '/', '')}`;
+        }
+        return value;
+    }, indent);
+    return { serializedString, customDateUsed, customFileUsed, mapUsed, setUsed };
+};
+exports.serializeJSONWithDate = serializeJSONWithDate;
+const deserializeJSONWithCustomFields = (data) => {
+    return JSON.parse(data, (_, value) => {
+        if (typeof value === 'string' && value.startsWith(DATE_TOKEN)) {
+            return new Date(value.replace(DATE_TOKEN, ''));
+        }
+        return value;
+    });
+};
+exports.deserializeJSONWithCustomFields = deserializeJSONWithCustomFields;

package/dist/editor/helpers/colors.d.ts

@@ -16,4 +16,4 @@ export declare const BLUE_DISABLED = "#284f73";
 export declare const getBackgroundFromHoverState: ({ selected, hovered, }: {
     selected: boolean;
     hovered: boolean;
-}) => "transparent" | "hsla(0, 0%, 100%, 0.15)" | "hsla(0, 0%, 100%, 0.25)" | "rgba(255, 255, 255, 0.06)";
+}) => "transparent" | "hsla(0, 0%, 100%, 0.15)" | "rgba(255, 255, 255, 0.06)" | "hsla(0, 0%, 100%, 0.25)";

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/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/error-with-stack-frame.d.ts

@@ -0,0 +1,19 @@
+import type { Page, SymbolicatedStackFrame } from '@remotion/renderer';
+export declare class ErrorWithStackFrame extends Error {
+    symbolicatedStackFrames: SymbolicatedStackFrame[] | null;
+    frame: number | null;
+    name: string;
+    delayRenderCall: SymbolicatedStackFrame[] | null;
+    constructor({ message, symbolicatedStackFrames, frame, name, delayRenderCall, }: {
+        message: string;
+        symbolicatedStackFrames: SymbolicatedStackFrame[] | null;
+        frame: number | null;
+        name: string;
+        delayRenderCall: SymbolicatedStackFrame[] | null;
+    });
+}
+export declare const handleJavascriptException: ({ page, onError, frame, }: {
+    page: Page;
+    frame: number | null;
+    onError: (err: Error) => void;
+}) => () => void;

package/dist/error-with-stack-frame.js

@@ -0,0 +1,81 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.handleJavascriptException = exports.ErrorWithStackFrame = void 0;
+const remotion_1 = require("remotion");
+const renderer_1 = require("@remotion/renderer");
+const log_1 = require("./log");
+class ErrorWithStackFrame extends Error {
+    constructor({ message, symbolicatedStackFrames, frame, name, delayRenderCall, }) {
+        super(message);
+        this.symbolicatedStackFrames = symbolicatedStackFrames;
+        this.frame = frame;
+        this.name = name;
+        this.delayRenderCall = delayRenderCall;
+    }
+}
+exports.ErrorWithStackFrame = ErrorWithStackFrame;
+const cleanUpErrorMessage = (exception) => {
+    var _a, _b, _c, _d;
+    let errorMessage = (_a = exception.exceptionDetails.exception) === null || _a === void 0 ? void 0 : _a.description;
+    if (!errorMessage) {
+        return null;
+    }
+    const errorType = (_b = exception.exceptionDetails.exception) === null || _b === void 0 ? void 0 : _b.className;
+    const prefix = `${errorType}: `;
+    if (errorMessage.startsWith(prefix)) {
+        errorMessage = errorMessage.substring(prefix.length);
+    }
+    const frames = (_d = (_c = exception.exceptionDetails.stackTrace) === null || _c === void 0 ? void 0 : _c.callFrames.length) !== null && _d !== void 0 ? _d : 0;
+    const split = errorMessage.split('\n');
+    return split.slice(0, Math.max(1, split.length - frames)).join('\n');
+};
+const removeDelayRenderStack = (message) => {
+    const index = message.indexOf(remotion_1.Internals.DELAY_RENDER_CALLSTACK_TOKEN);
+    if (index === -1) {
+        return message;
+    }
+    return message.substring(0, index);
+};
+const callFrameToStackFrame = (callFrame) => {
+    return {
+        columnNumber: callFrame.columnNumber,
+        fileName: callFrame.url,
+        functionName: callFrame.functionName,
+        lineNumber: callFrame.lineNumber,
+    };
+};
+const handleJavascriptException = ({ page, onError, frame, }) => {
+    const client = page._client();
+    const handler = (exception) => {
+        var _a, _b, _c;
+        const rawErrorMessage = (_a = exception.exceptionDetails.exception) === null || _a === void 0 ? void 0 : _a.description;
+        const cleanErrorMessage = cleanUpErrorMessage(exception);
+        if (!cleanErrorMessage) {
+            log_1.Log.error(exception);
+            const err = new Error(rawErrorMessage);
+            err.stack = rawErrorMessage;
+            onError(err);
+            return;
+        }
+        if (!exception.exceptionDetails.stackTrace) {
+            const err = new Error(removeDelayRenderStack(cleanErrorMessage));
+            err.stack = rawErrorMessage;
+            onError(err);
+            return;
+        }
+        const errorType = (_b = exception.exceptionDetails.exception) === null || _b === void 0 ? void 0 : _b.className;
+        const symbolicatedErr = new renderer_1.RenderInternals.SymbolicateableError({
+            message: removeDelayRenderStack(cleanErrorMessage),
+            stackFrame: exception.exceptionDetails.stackTrace.callFrames.map((f) => callFrameToStackFrame(f)),
+            frame,
+            name: errorType,
+            stack: (_c = exception.exceptionDetails.exception) === null || _c === void 0 ? void 0 : _c.description,
+        });
+        onError(symbolicatedErr);
+    };
+    client.on('Runtime.exceptionThrown', handler);
+    return () => {
+        client.off('Runtime.exceptionThrown', handler);
+    };
+};
+exports.handleJavascriptException = handleJavascriptException;

package/dist/handle-javascript-error.d.ts

@@ -0,0 +1,20 @@
+import type { Page } from '../browser/BrowserPage';
+import type { SymbolicatedStackFrame } from '../symbolicate-stacktrace';
+export declare class ErrorWithStackFrame extends Error {
+    symbolicatedStackFrames: SymbolicatedStackFrame[] | null;
+    frame: number | null;
+    name: string;
+    delayRenderCall: SymbolicatedStackFrame[] | null;
+    constructor({ message, symbolicatedStackFrames, frame, name, delayRenderCall, }: {
+        message: string;
+        symbolicatedStackFrames: SymbolicatedStackFrame[] | null;
+        frame: number | null;
+        name: string;
+        delayRenderCall: SymbolicatedStackFrame[] | null;
+    });
+}
+export declare const handleJavascriptException: ({ page, onError, frame, }: {
+    page: Page;
+    frame: number | null;
+    onError: (err: Error) => void;
+}) => () => void;

package/dist/handle-javascript-error.js

@@ -0,0 +1,81 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.handleJavascriptException = exports.ErrorWithStackFrame = void 0;
+const remotion_1 = require("remotion");
+const symbolicateable_error_1 = require("./symbolicateable-error");
+const log_1 = require("./log");
+class ErrorWithStackFrame extends Error {
+    constructor({ message, symbolicatedStackFrames, frame, name, delayRenderCall, }) {
+        super(message);
+        this.symbolicatedStackFrames = symbolicatedStackFrames;
+        this.frame = frame;
+        this.name = name;
+        this.delayRenderCall = delayRenderCall;
+    }
+}
+exports.ErrorWithStackFrame = ErrorWithStackFrame;
+const cleanUpErrorMessage = (exception) => {
+    var _a, _b, _c, _d;
+    let errorMessage = (_a = exception.exceptionDetails.exception) === null || _a === void 0 ? void 0 : _a.description;
+    if (!errorMessage) {
+        return null;
+    }
+    const errorType = (_b = exception.exceptionDetails.exception) === null || _b === void 0 ? void 0 : _b.className;
+    const prefix = `${errorType}: `;
+    if (errorMessage.startsWith(prefix)) {
+        errorMessage = errorMessage.substring(prefix.length);
+    }
+    const frames = (_d = (_c = exception.exceptionDetails.stackTrace) === null || _c === void 0 ? void 0 : _c.callFrames.length) !== null && _d !== void 0 ? _d : 0;
+    const split = errorMessage.split('\n');
+    return split.slice(0, Math.max(1, split.length - frames)).join('\n');
+};
+const removeDelayRenderStack = (message) => {
+    const index = message.indexOf(remotion_1.Internals.DELAY_RENDER_CALLSTACK_TOKEN);
+    if (index === -1) {
+        return message;
+    }
+    return message.substring(0, index);
+};
+const callFrameToStackFrame = (callFrame) => {
+    return {
+        columnNumber: callFrame.columnNumber,
+        fileName: callFrame.url,
+        functionName: callFrame.functionName,
+        lineNumber: callFrame.lineNumber,
+    };
+};
+const handleJavascriptException = ({ page, onError, frame, }) => {
+    const client = page._client();
+    const handler = (exception) => {
+        var _a, _b, _c;
+        const rawErrorMessage = (_a = exception.exceptionDetails.exception) === null || _a === void 0 ? void 0 : _a.description;
+        const cleanErrorMessage = cleanUpErrorMessage(exception);
+        if (!cleanErrorMessage) {
+            log_1.Log.error(exception);
+            const err = new Error(rawErrorMessage);
+            err.stack = rawErrorMessage;
+            onError(err);
+            return;
+        }
+        if (!exception.exceptionDetails.stackTrace) {
+            const err = new Error(removeDelayRenderStack(cleanErrorMessage));
+            err.stack = rawErrorMessage;
+            onError(err);
+            return;
+        }
+        const errorType = (_b = exception.exceptionDetails.exception) === null || _b === void 0 ? void 0 : _b.className;
+        const symbolicatedErr = new symbolicateable_error_1.SymbolicateableError({
+            message: removeDelayRenderStack(cleanErrorMessage),
+            stackFrame: exception.exceptionDetails.stackTrace.callFrames.map((f) => callFrameToStackFrame(f)),
+            frame,
+            name: errorType,
+            stack: (_c = exception.exceptionDetails.exception) === null || _c === void 0 ? void 0 : _c.description,
+        });
+        onError(symbolicatedErr);
+    };
+    client.on('Runtime.exceptionThrown', handler);
+    return () => {
+        client.off('Runtime.exceptionThrown', handler);
+    };
+};
+exports.handleJavascriptException = handleJavascriptException;

package/dist/symbolicate-error.d.ts

@@ -0,0 +1,3 @@
+import { ErrorWithStackFrame } from './handle-javascript-exception';
+import type { SymbolicateableError } from './symbolicateable-error';
+export declare const symbolicateError: (symbolicateableError: SymbolicateableError) => Promise<ErrorWithStackFrame>;

package/dist/symbolicate-error.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.symbolicateError = void 0;
+const symbolicate_stacktrace_1 = require("../symbolicate-stacktrace");
+const handle_javascript_exception_1 = require("./handle-javascript-exception");
+const truthy_1 = require("./truthy");
+const symbolicateError = async (symbolicateableError) => {
+    const { delayRenderCall, stackFrame } = symbolicateableError;
+    const [mainErrorFrames, delayRenderFrames] = await Promise.all([
+        stackFrame ? (0, symbolicate_stacktrace_1.symbolicateStackTraceFromRemoteFrames)(stackFrame) : null,
+        delayRenderCall
+            ? (0, symbolicate_stacktrace_1.symbolicateStackTraceFromRemoteFrames)(delayRenderCall)
+            : null,
+    ].filter(truthy_1.truthy));
+    const symbolicatedErr = new handle_javascript_exception_1.ErrorWithStackFrame({
+        message: symbolicateableError.message,
+        symbolicatedStackFrames: mainErrorFrames,
+        frame: symbolicateableError.frame,
+        name: symbolicateableError.name,
+        delayRenderCall: delayRenderFrames,
+    });
+    return symbolicatedErr;
+};
+exports.symbolicateError = symbolicateError;

package/dist/symbolicate-errors.d.ts

@@ -0,0 +1,7 @@
+import type { SymbolicatedStackFrame, UnsymbolicatedStackFrame } from '@remotion/renderer';
+import type { SourceMapConsumer } from 'source-map';
+import { ErrorWithStackFrame } from './error-with-stack-frame';
+export declare const symbolicateError: (symbolicateableError: SymbolicateableError) => Promise<ErrorWithStackFrame>;
+export declare const symbolicateStackTraceFromRemoteFrames: (frames: UnsymbolicatedStackFrame[]) => Promise<SymbolicatedStackFrame[]>;
+export declare const getSourceMapFromRemoteFile: (fileName: string) => Promise<any>;
+export declare const symbolicateFromSources: (frames: UnsymbolicatedStackFrame[], mapValues: Record<string, SourceMapConsumer | null>) => SymbolicatedStackFrame[];

package/dist/symbolicate-errors.js

@@ -0,0 +1,90 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.symbolicateFromSources = exports.getSourceMapFromRemoteFile = exports.symbolicateStackTraceFromRemoteFrames = exports.symbolicateError = void 0;
+const renderer_1 = require("@remotion/renderer");
+const truthy_1 = require("./truthy");
+const error_with_stack_frame_1 = require("./error-with-stack-frame");
+const symbolicateError = async (symbolicateableError) => {
+    const { delayRenderCall, stackFrame } = symbolicateableError;
+    const [mainErrorFrames, delayRenderFrames] = await Promise.all([
+        stackFrame ? (0, exports.symbolicateStackTraceFromRemoteFrames)(stackFrame) : null,
+        delayRenderCall
+            ? (0, exports.symbolicateStackTraceFromRemoteFrames)(delayRenderCall)
+            : null,
+    ].filter(truthy_1.truthy));
+    const symbolicatedErr = new error_with_stack_frame_1.ErrorWithStackFrame({
+        message: symbolicateableError.message,
+        symbolicatedStackFrames: mainErrorFrames,
+        frame: symbolicateableError.frame,
+        name: symbolicateableError.name,
+        delayRenderCall: delayRenderFrames,
+    });
+    return symbolicatedErr;
+};
+exports.symbolicateError = symbolicateError;
+const symbolicateStackTraceFromRemoteFrames = async (frames) => {
+    const uniqueFileNames = [
+        ...new Set(frames
+            .map((f) => f.fileName)
+            .filter((f) => f.startsWith('http://') || f.startsWith('https://'))
+            .filter(truthy_1.truthy)),
+    ];
+    const maps = await Promise.all(uniqueFileNames.map((fileName) => {
+        return (0, exports.getSourceMapFromRemoteFile)(fileName);
+    }));
+    const mapValues = {};
+    for (let i = 0; i < uniqueFileNames.length; i++) {
+        mapValues[uniqueFileNames[i]] = maps[i];
+    }
+    return (0, exports.symbolicateFromSources)(frames, mapValues);
+};
+exports.symbolicateStackTraceFromRemoteFrames = symbolicateStackTraceFromRemoteFrames;
+const getSourceMapFromRemoteFile = async (fileName) => {
+    const fileContents = await renderer_1.RenderInternals.fetchUrl(fileName);
+    return renderer_1.RenderInternals.getSourceMap(fileName, fileContents, 'remote');
+};
+exports.getSourceMapFromRemoteFile = getSourceMapFromRemoteFile;
+const symbolicateFromSources = (frames, mapValues) => {
+    return frames
+        .map((frame) => {
+        const map = mapValues[frame.fileName];
+        if (!map) {
+            return null;
+        }
+        return symbolicateStackFrame(frame, map);
+    })
+        .filter(truthy_1.truthy);
+};
+exports.symbolicateFromSources = symbolicateFromSources;
+const symbolicateStackFrame = (frame, map) => {
+    const pos = getOriginalPosition(map, frame.lineNumber, frame.columnNumber);
+    const hasSource = pos.source ? map.sourceContentFor(pos.source, false) : null;
+    const scriptCode = hasSource && pos.line
+        ? getLinesAround(pos.line, 3, hasSource.split('\n'))
+        : null;
+    return {
+        originalColumnNumber: pos.column,
+        originalFileName: pos.source,
+        originalFunctionName: frame.functionName,
+        originalLineNumber: pos.line,
+        originalScriptCode: scriptCode,
+    };
+};
+const getOriginalPosition = (source_map, line, column) => {
+    const result = source_map.originalPositionFor({
+        line,
+        column,
+    });
+    return { line: result.line, column: result.column, source: result.source };
+};
+function getLinesAround(line, count, lines) {
+    const result = [];
+    for (let index = Math.max(0, line - 1 - count) + 1; index <= Math.min(lines.length - 1, line - 1 + count); ++index) {
+        result.push({
+            lineNumber: index + 1,
+            content: lines[index],
+            highlight: index + 1 === line,
+        });
+    }
+    return result;
+}

package/dist/symbolicate-stacktrace.d.ts

@@ -0,0 +1,28 @@
+import type { BasicSourceMapConsumer, IndexedSourceMapConsumer } from 'source-map';
+import { SourceMapConsumer } from 'source-map';
+import type { UnsymbolicatedStackFrame } from './parse-browser-error-stack';
+type ScriptLine = {
+    lineNumber: number;
+    content: string;
+    highlight: boolean;
+};
+export type SymbolicatedStackFrame = {
+    originalFunctionName: string | null;
+    originalFileName: string | null;
+    originalLineNumber: number | null;
+    originalColumnNumber: number | null;
+    originalScriptCode: ScriptLine[] | null;
+};
+export declare const symbolicateStackTraceFromRemoteFrames: (frames: UnsymbolicatedStackFrame[]) => Promise<SymbolicatedStackFrame[]>;
+export declare const symbolicateFromSources: (frames: UnsymbolicatedStackFrame[], mapValues: Record<string, SourceMapConsumer | null>) => SymbolicatedStackFrame[];
+export declare const symbolicateStackFrame: (frame: UnsymbolicatedStackFrame, map: SourceMapConsumer) => {
+    originalColumnNumber: number | null;
+    originalFileName: string | null;
+    originalFunctionName: any;
+    originalLineNumber: number | null;
+    originalScriptCode: ScriptLine[] | null;
+};
+export declare const getSourceMapFromRemoteFile: (fileName: string) => Promise<SourceMapConsumer | null>;
+export declare const getSourceMapFromLocalFile: (fileName: string) => Promise<SourceMapConsumer | null>;
+export type AnySourceMapConsumer = BasicSourceMapConsumer | IndexedSourceMapConsumer;
+export {};

package/dist/symbolicate-stacktrace.js

@@ -0,0 +1,135 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getSourceMapFromLocalFile = exports.getSourceMapFromRemoteFile = exports.symbolicateStackFrame = exports.symbolicateFromSources = exports.symbolicateStackTraceFromRemoteFrames = void 0;
+const fs_1 = require("fs");
+const path_1 = __importDefault(require("path"));
+const source_map_1 = require("source-map");
+const read_file_1 = require("./assets/read-file");
+const truthy_1 = require("./truthy");
+function extractSourceMapUrl(fileContents) {
+    const regex = /\/\/[#@] ?sourceMappingURL=([^\s'"]+)\s*$/gm;
+    let match = null;
+    for (;;) {
+        const next = regex.exec(fileContents);
+        if (next === null || next === undefined) {
+            break;
+        }
+        match = next;
+    }
+    if (!(match === null || match === void 0 ? void 0 : match[1])) {
+        return null;
+    }
+    return match[1].toString();
+}
+const getSourceMap = async (filePath, fileContents, type) => {
+    const sm = extractSourceMapUrl(fileContents);
+    if (sm === null) {
+        return null;
+    }
+    if (sm.indexOf('data:') === 0) {
+        const base64 = /^data:application\/json;([\w=:"-]+;)*base64,/;
+        const match2 = sm.match(base64);
+        if (!match2) {
+            throw new Error('Sorry, non-base64 inline source-map encoding is not supported.');
+        }
+        const converted = window.atob(sm.substring(match2[0].length));
+        return new source_map_1.SourceMapConsumer(JSON.parse(converted));
+    }
+    if (type === 'local') {
+        // Find adjacent file: bundle.js -> bundle.js.map
+        const newFilePath = path_1.default.join(path_1.default.dirname(filePath), sm);
+        return new source_map_1.SourceMapConsumer((0, fs_1.readFileSync)(newFilePath, 'utf8'));
+    }
+    const index = filePath.lastIndexOf('/');
+    const url = filePath.substring(0, index + 1) + sm;
+    const obj = await fetchUrl(url);
+    return new source_map_1.SourceMapConsumer(obj);
+};
+const fetchUrl = async (url) => {
+    const res = await (0, read_file_1.readFile)(url);
+    return new Promise((resolve, reject) => {
+        let downloaded = '';
+        res.on('data', (d) => {
+            downloaded += d;
+        });
+        res.on('end', () => {
+            resolve(downloaded);
+        });
+        res.on('error', (err) => reject(err));
+    });
+};
+function getLinesAround(line, count, lines) {
+    const result = [];
+    for (let index = Math.max(0, line - 1 - count) + 1; index <= Math.min(lines.length - 1, line - 1 + count); ++index) {
+        result.push({
+            lineNumber: index + 1,
+            content: lines[index],
+            highlight: index + 1 === line,
+        });
+    }
+    return result;
+}
+const getOriginalPosition = (source_map, line, column) => {
+    const result = source_map.originalPositionFor({
+        line,
+        column,
+    });
+    return { line: result.line, column: result.column, source: result.source };
+};
+const symbolicateStackTraceFromRemoteFrames = async (frames) => {
+    const uniqueFileNames = [
+        ...new Set(frames
+            .map((f) => f.fileName)
+            .filter((f) => f.startsWith('http://') || f.startsWith('https://'))
+            .filter(truthy_1.truthy)),
+    ];
+    const maps = await Promise.all(uniqueFileNames.map((fileName) => {
+        return (0, exports.getSourceMapFromRemoteFile)(fileName);
+    }));
+    const mapValues = {};
+    for (let i = 0; i < uniqueFileNames.length; i++) {
+        mapValues[uniqueFileNames[i]] = maps[i];
+    }
+    return (0, exports.symbolicateFromSources)(frames, mapValues);
+};
+exports.symbolicateStackTraceFromRemoteFrames = symbolicateStackTraceFromRemoteFrames;
+const symbolicateFromSources = (frames, mapValues) => {
+    return frames
+        .map((frame) => {
+        const map = mapValues[frame.fileName];
+        if (!map) {
+            return null;
+        }
+        return (0, exports.symbolicateStackFrame)(frame, map);
+    })
+        .filter(truthy_1.truthy);
+};
+exports.symbolicateFromSources = symbolicateFromSources;
+const symbolicateStackFrame = (frame, map) => {
+    const pos = getOriginalPosition(map, frame.lineNumber, frame.columnNumber);
+    const hasSource = pos.source ? map.sourceContentFor(pos.source, false) : null;
+    const scriptCode = hasSource && pos.line
+        ? getLinesAround(pos.line, 3, hasSource.split('\n'))
+        : null;
+    return {
+        originalColumnNumber: pos.column,
+        originalFileName: pos.source,
+        originalFunctionName: frame.functionName,
+        originalLineNumber: pos.line,
+        originalScriptCode: scriptCode,
+    };
+};
+exports.symbolicateStackFrame = symbolicateStackFrame;
+const getSourceMapFromRemoteFile = async (fileName) => {
+    const fileContents = await fetchUrl(fileName);
+    return getSourceMap(fileName, fileContents, 'remote');
+};
+exports.getSourceMapFromRemoteFile = getSourceMapFromRemoteFile;
+const getSourceMapFromLocalFile = (fileName) => {
+    const fileContents = (0, fs_1.readFileSync)(fileName, 'utf8');
+    return getSourceMap(fileName, fileContents, 'local');
+};
+exports.getSourceMapFromLocalFile = getSourceMapFromLocalFile;

package/dist/symbolicateable-error.d.ts

@@ -0,0 +1,16 @@
+/**
+ * A symbolicateable error is an error that can be symolicated by fetching the original sources. By throwing a symbolicateable error, Remotion CLI will attempt to symplicate it
+ */
+import type { UnsymbolicatedStackFrame } from '../parse-browser-error-stack';
+export declare class SymbolicateableError extends Error {
+    stackFrame: UnsymbolicatedStackFrame[] | null;
+    delayRenderCall: UnsymbolicatedStackFrame[] | null;
+    frame: number | null;
+    constructor({ message, stack, stackFrame, frame, name, }: {
+        message: string;
+        stack: string | undefined;
+        frame: number | null;
+        name: string;
+        stackFrame: UnsymbolicatedStackFrame[] | null;
+    });
+}

package/dist/symbolicateable-error.js

@@ -0,0 +1,18 @@
+"use strict";
+/**
+ * A symbolicateable error is an error that can be symolicated by fetching the original sources. By throwing a symbolicateable error, Remotion CLI will attempt to symplicate it
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SymbolicateableError = void 0;
+const delay_render_embedded_stack_1 = require("../delay-render-embedded-stack");
+class SymbolicateableError extends Error {
+    constructor({ message, stack, stackFrame, frame, name, }) {
+        super(message);
+        this.stack = stack;
+        this.stackFrame = stackFrame;
+        this.frame = frame;
+        this.name = name;
+        this.delayRenderCall = stack ? (0, delay_render_embedded_stack_1.parseDelayRenderEmbeddedStack)(stack) : null;
+    }
+}
+exports.SymbolicateableError = SymbolicateableError;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remotion/cli",
-  "version": "4.0.7",
+  "version": "4.0.10",
   "description": "CLI for Remotion",
   "main": "dist/index.js",
   "sideEffects": false,
@@ -35,11 +35,11 @@
     "prompts": "2.4.1",
     "semver": "7.5.3",
     "source-map": "0.6.1",
-    "@remotion/bundler": "4.0.7",
-    "@remotion/renderer": "4.0.7",
-    "remotion": "4.0.7",
-    "@remotion/media-utils": "4.0.7",
-    "@remotion/player": "4.0.7"
+    "@remotion/bundler": "4.0.10",
+    "@remotion/media-utils": "4.0.10",
+    "@remotion/player": "4.0.10",
+    "remotion": "4.0.10",
+    "@remotion/renderer": "4.0.10"
   },
   "peerDependencies": {
     "react": ">=16.8.0",
@@ -65,8 +65,8 @@
     "typescript": "4.9.5",
     "vitest": "0.31.1",
     "zod": "^3.21.4",
-    "@remotion/zod-types": "4.0.7",
-    "@remotion/tailwind": "4.0.7"
+    "@remotion/zod-types": "4.0.10",
+    "@remotion/tailwind": "4.0.10"
   },
   "keywords": [
     "remotion",

package/styles/styles.css

@@ -42,3 +42,56 @@ input[type='color'].__remotion_color_picker::-webkit-color-swatch-wrapper {
 input[type='color'].__remotion_color_picker::-webkit-color-swatch {
 	border: none;
 }
+
+.__remotion_thumb,
+.__remotion_thumb::-webkit-slider-thumb {
+	-webkit-appearance: none;
+	-webkit-tap-highlight-color: transparent;
+}
+
+.__remotion_thumb {
+	pointer-events: none;
+	position: absolute;
+	height: 0;
+	outline: none;
+	top: 51%;
+	width: 100%;
+	z-index: 2;
+}
+
+/* For Firefox browsers */
+.__remotion_thumb::-moz-range-thumb {
+	border: none;
+	border-radius: 0;
+	cursor: pointer;
+	height: 40px;
+	width: 10px;
+	pointer-events: all;
+	border-color: black;
+	background-color: white;
+	position: relative;
+}
+
+.__remotion_thumb::-moz-range-thumb {
+	border-width: 1px;
+	border-style: solid;
+}
+
+/* For Chrome browsers */
+.__remotion_thumb::-webkit-slider-thumb {
+	border: 1px solid black;
+	border-radius: 2px;
+	cursor: pointer;
+	height: 40px;
+	width: 10px;
+	pointer-events: all;
+	border-color: black;
+	background-color: white;
+	position: relative;
+}
+
+.__remotion_thumb::-webkit-slider-thumb {
+	border-width: 1px;
+	border-style: solid;
+	border-color: black;
+}