@remotion/cli 4.0.63 → 4.0.65

package/dist/editor/components/EditorRuler/index.js

@@ -5,69 +5,30 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.EditorRulers = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const player_1 = require("@remotion/player");
 const react_1 = require("react");
+const colors_1 = require("../../helpers/colors");
 const editor_ruler_1 = require("../../helpers/editor-ruler");
+const use_studio_canvas_dimensions_1 = require("../../helpers/use-studio-canvas-dimensions");
+const editor_guides_1 = require("../../state/editor-guides");
 const editor_rulers_1 = require("../../state/editor-rulers");
-const preview_size_1 = require("../../state/preview-size");
 const Ruler_1 = __importDefault(require("./Ruler"));
 const originBlockStyles = {
     position: 'absolute',
     top: 0,
     left: 0,
-    borderBottom: '1px solid #444444',
-    borderRight: '1px solid #444444',
+    borderBottom: '1px solid ' + colors_1.RULER_COLOR,
+    borderRight: '1px solid ' + colors_1.RULER_COLOR,
     width: `${editor_rulers_1.RULER_WIDTH}px`,
     height: `${editor_rulers_1.RULER_WIDTH}px`,
-    background: '#000000',
+    background: colors_1.BACKGROUND,
 };
 const EditorRulers = ({ contentDimensions, canvasSize, assetMetadata, containerRef }) => {
-    const { size: previewSize } = (0, react_1.useContext)(preview_size_1.PreviewSizeContext);
-    const { centerX, centerY, scale } = (0, react_1.useMemo)(() => {
-        if (contentDimensions === 'none' ||
-            contentDimensions === null ||
-            (assetMetadata && assetMetadata.type === 'not-found') ||
-            !canvasSize) {
-            return {
-                centerX: previewSize.translation.x,
-                centerY: previewSize.translation.y,
-                scale: 1,
-            };
-        }
-        return player_1.PlayerInternals.calculateCanvasTransformation({
-            canvasSize,
-            compositionHeight: contentDimensions.height,
-            compositionWidth: contentDimensions.width,
-            previewSize: previewSize.size,
-        });
-    }, [
+    const { scale, canvasDimensions } = (0, use_studio_canvas_dimensions_1.useStudioCanvasDimensions)({
         canvasSize,
         contentDimensions,
-        previewSize.size,
-        previewSize.translation.y,
-        previewSize.translation.x,
         assetMetadata,
-    ]);
-    const canvasDimensions = (0, react_1.useMemo)(() => {
-        return {
-            left: centerX - previewSize.translation.x,
-            top: centerY - previewSize.translation.y,
-            width: contentDimensions === 'none' || !contentDimensions
-                ? (canvasSize === null || canvasSize === void 0 ? void 0 : canvasSize.width) || 0
-                : contentDimensions.width * scale,
-            height: contentDimensions === 'none' || !contentDimensions
-                ? (canvasSize === null || canvasSize === void 0 ? void 0 : canvasSize.height) || 0
-                : contentDimensions.height * scale,
-        };
-    }, [
-        scale,
-        centerX,
-        previewSize.translation.x,
-        previewSize.translation.y,
-        centerY,
-        canvasSize,
-        contentDimensions,
-    ]);
+    });
+    const { shouldCreateGuideRef, shouldDeleteGuideRef, setGuidesList, selectedGuideId, setSelectedGuideId, } = (0, react_1.useContext)(editor_guides_1.EditorShowGuidesContext);
     const rulerMarkingGaps = (0, react_1.useMemo)(() => {
         const minimumGap = editor_rulers_1.MINIMUM_RULER_MARKING_GAP_PX;
         const predefinedGap = editor_rulers_1.PREDEFINED_RULER_SCALE_GAPS.find((gap) => gap * scale > minimumGap);
@@ -93,6 +54,114 @@ const EditorRulers = ({ contentDimensions, canvasSize, assetMetadata, containerR
         rulerMarkingGaps,
         scale,
     }), [verticalRulerScaleRange, rulerMarkingGaps, scale]);
+    const requestAnimationFrameRef = (0, react_1.useRef)(null);
+    const onMouseMove = (0, react_1.useCallback)((e) => {
+        if (requestAnimationFrameRef.current) {
+            cancelAnimationFrame(requestAnimationFrameRef.current);
+        }
+        requestAnimationFrameRef.current = requestAnimationFrame(() => {
+            var _a;
+            const { clientX: mouseX, clientY: mouseY } = e;
+            const { left: containerLeft = 0, top: containerTop = 0, right: containerRight = 0, bottom: containerBottom = 0, } = ((_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) || {};
+            if (mouseX < containerLeft ||
+                mouseX > containerRight ||
+                mouseY < containerTop ||
+                mouseY > containerBottom) {
+                if (!shouldDeleteGuideRef.current) {
+                    shouldDeleteGuideRef.current = true;
+                }
+                if (document.body.style.cursor !== 'no-drop') {
+                    document.body.style.cursor = 'no-drop';
+                }
+                setGuidesList((prevState) => {
+                    const newGuides = prevState.map((guide) => {
+                        if (guide.id !== selectedGuideId) {
+                            return guide;
+                        }
+                        return {
+                            ...guide,
+                            show: false,
+                        };
+                    });
+                    (0, editor_guides_1.persistGuidesList)(newGuides);
+                    return newGuides;
+                });
+            }
+            else {
+                if (shouldDeleteGuideRef.current) {
+                    shouldDeleteGuideRef.current = false;
+                }
+                setGuidesList((prevState) => {
+                    // Intentionally no persist, only persist on mouse up
+                    return prevState.map((guide) => {
+                        if (guide.id !== selectedGuideId) {
+                            return guide;
+                        }
+                        const position = guide.orientation === 'vertical'
+                            ? (mouseX - containerLeft) / scale -
+                                canvasDimensions.left / scale
+                            : (mouseY - containerTop) / scale -
+                                canvasDimensions.top / scale;
+                        const desiredCursor = guide.orientation === 'vertical' ? 'ew-resize' : 'ns-resize';
+                        if (document.body.style.cursor !== desiredCursor) {
+                            document.body.style.cursor = desiredCursor;
+                        }
+                        return {
+                            ...guide,
+                            position: Math.floor(position / 1.0),
+                            show: true,
+                        };
+                    });
+                });
+            }
+        });
+    }, [
+        containerRef,
+        shouldDeleteGuideRef,
+        selectedGuideId,
+        scale,
+        setGuidesList,
+        canvasDimensions.left,
+        canvasDimensions.top,
+    ]);
+    const onMouseUp = (0, react_1.useCallback)(() => {
+        setGuidesList((prevState) => {
+            const newGuides = prevState.filter((selected) => {
+                if (!shouldDeleteGuideRef.current) {
+                    return true;
+                }
+                return selected.id !== selectedGuideId;
+            });
+            (0, editor_guides_1.persistGuidesList)(newGuides);
+            return newGuides;
+        });
+        shouldDeleteGuideRef.current = false;
+        document.body.style.cursor = 'auto';
+        shouldCreateGuideRef.current = false;
+        setSelectedGuideId(() => null);
+        document.removeEventListener('pointerup', onMouseUp);
+        document.removeEventListener('pointermove', onMouseMove);
+    }, [
+        selectedGuideId,
+        shouldCreateGuideRef,
+        shouldDeleteGuideRef,
+        setSelectedGuideId,
+        setGuidesList,
+        onMouseMove,
+    ]);
+    (0, react_1.useEffect)(() => {
+        if (selectedGuideId !== null) {
+            document.addEventListener('pointermove', onMouseMove);
+            document.addEventListener('pointerup', onMouseUp);
+        }
+        return () => {
+            document.removeEventListener('pointermove', onMouseMove);
+            document.removeEventListener('pointerup', onMouseUp);
+            if (requestAnimationFrameRef.current) {
+                cancelAnimationFrame(requestAnimationFrameRef.current);
+            }
+        };
+    }, [selectedGuideId, onMouseMove, onMouseUp]);
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { style: originBlockStyles }), (0, jsx_runtime_1.jsx)(Ruler_1.default, { orientation: "horizontal", scale: scale, points: horizontalRulerPoints, startMarking: horizontalRulerStartMarking, containerRef: containerRef, markingGaps: rulerMarkingGaps, originOffset: canvasDimensions.left }), (0, jsx_runtime_1.jsx)(Ruler_1.default, { orientation: "vertical", scale: scale, points: verticalRulerPoints, startMarking: verticalRulerStartMarking, containerRef: containerRef, markingGaps: rulerMarkingGaps, originOffset: canvasDimensions.top })] }));
 };
 exports.EditorRulers = EditorRulers;

package/dist/editor/components/EditorRuler/use-is-ruler-visible.d.ts

@@ -0,0 +1 @@
+export declare const useIsRulerVisible: () => boolean | null;

package/dist/editor/components/EditorRuler/use-is-ruler-visible.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useIsRulerVisible = void 0;
+const react_1 = require("react");
+const remotion_1 = require("remotion");
+const editor_rulers_1 = require("../../state/editor-rulers");
+const useIsRulerVisible = () => {
+    const { canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
+    const { editorShowRulers } = (0, react_1.useContext)(editor_rulers_1.EditorShowRulersContext);
+    return (editorShowRulers && canvasContent && canvasContent.type === 'composition');
+};
+exports.useIsRulerVisible = useIsRulerVisible;

package/dist/editor/components/Menu/MenuItem.js

@@ -59,10 +59,13 @@ const MenuItem = ({ label: itemName, selected, id, onItemSelected, onItemHovered
     const onPointerLeave = (0, react_1.useCallback)(() => {
         setHovered(false);
     }, []);
-    const onPointerDown = (0, react_1.useCallback)(() => {
+    const onPointerDown = (0, react_1.useCallback)((e) => {
+        if (e.button !== 0) {
+            return;
+        }
         onItemSelected(id);
-        window.addEventListener('pointerup', (e) => {
-            if (!(0, is_menu_item_1.isMenuItem)(e.target)) {
+        window.addEventListener('pointerup', (evt) => {
+            if (!(0, is_menu_item_1.isMenuItem)(evt.target)) {
                 onItemQuit();
             }
         }, {

package/dist/editor/components/Menu/MenuSubItem.d.ts

@@ -1,10 +1,11 @@
+import type { PointerEvent } from 'react';
 import React from 'react';
 import type { SubMenu } from '../NewComposition/ComboBox';
 export type SubMenuActivated = false | 'with-mouse' | 'without-mouse';
 export declare const MenuSubItem: React.FC<{
     label: React.ReactNode;
     id: string;
-    onActionChosen: (id: string) => void;
+    onActionChosen: (id: string, e: PointerEvent<HTMLDivElement>) => void;
     selected: boolean;
     onItemSelected: (id: string) => void;
     keyHint: string | null;

package/dist/editor/components/Menu/MenuSubItem.js

@@ -57,8 +57,8 @@ const MenuSubItem = ({ label, leaveLeftSpace, leftItem, onActionChosen, id, sele
             backgroundColor: selected ? colors_1.CLEAR_HOVER : 'transparent',
         };
     }, [selected]);
-    const onItemTriggered = (0, react_1.useCallback)(() => {
-        onActionChosen(id);
+    const onItemTriggered = (0, react_1.useCallback)((e) => {
+        onActionChosen(id, e);
     }, [id, onActionChosen]);
     const onPointerEnter = (0, react_1.useCallback)(() => {
         onItemSelected(id);

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

@@ -13,7 +13,7 @@ export type SelectionItem = {
     id: string;
     label: React.ReactNode;
     value: string | number;
-    onClick: (id: string) => void;
+    onClick: (id: string, e: React.PointerEvent | null) => void;
     keyHint: string | null;
     leftItem: React.ReactNode;
     subMenu: SubMenu | null;

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

@@ -71,7 +71,10 @@ const InputDragger = ({ onValueChange, min: _min, max: _max, step: _step, value,
         return Math.ceil(val * factor) / factor;
     };
     const onPointerDown = (0, react_1.useCallback)((e) => {
-        const { pageX, pageY } = e;
+        const { pageX, pageY, button } = e;
+        if (button !== 0) {
+            return;
+        }
         const moveListener = (ev) => {
             const xDistance = ev.pageX - pageX;
             const distanceFromStart = Math.sqrt(xDistance ** 2 + (ev.pageY - pageY) ** 2);

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

@@ -88,7 +88,7 @@ const MenuContent = ({ onHide, values, preselectIndex, onNextMenu, onPreviousMen
             return setSubMenuActivated('without-mouse');
         }
         onHide();
-        item.onClick(item.id);
+        item.onClick(item.id, null);
     }, [onHide, selectedItem, values]);
     const onArrowRight = (0, react_1.useCallback)(() => {
         if (selectedItem === null) {
@@ -228,9 +228,9 @@ const MenuContent = ({ onHide, values, preselectIndex, onNextMenu, onPreviousMen
             if (item.type === 'divider') {
                 return (0, jsx_runtime_1.jsx)(MenuDivider_1.MenuDivider, {}, item.id);
             }
-            const onClick = () => {
+            const onClick = (id, e) => {
                 onHide();
-                item.onClick(item.id);
+                item.onClick(id, e);
             };
             return ((0, jsx_runtime_1.jsx)(MenuSubItem_1.MenuSubItem, { selected: item.id === selectedItem, onActionChosen: onClick, onItemSelected: onItemSelected, label: item.label, id: item.id, keyHint: item.keyHint, leaveLeftSpace: leaveLeftSpace, leftItem: item.leftItem, subMenu: item.subMenu, onQuitMenu: onHide, onNextMenu: onNextMenu, subMenuActivated: subMenuActivated, setSubMenuActivated: setSubMenuActivated }, item.id));
         }) }));

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export declare const getNewCompositionCode: ({ type, height, width, fps, durationInFrames, name, raw, }: {
     type: 'still' | 'composition';
     height: number;

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, "key" | "status" | "rightAlign" | keyof React.InputHTMLAttributes<HTMLInputElement>> & React.RefAttributes<HTMLInputElement>>;
+export declare const RemotionInput: React.ForwardRefExoticComponent<Pick<Props, "status" | "key" | "rightAlign" | keyof React.InputHTMLAttributes<HTMLInputElement>> & 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, "key" | "status" | keyof React.InputHTMLAttributes<HTMLInputElement>> & React.RefAttributes<HTMLInputElement>>;
+export declare const RemInputTypeColor: React.ForwardRefExoticComponent<Pick<Props, "status" | "key" | keyof React.InputHTMLAttributes<HTMLInputElement>> & 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, "key" | "status" | keyof React.InputHTMLAttributes<HTMLTextAreaElement>> & React.RefAttributes<HTMLTextAreaElement>>;
+export declare const RemTextarea: React.ForwardRefExoticComponent<Pick<Props, "status" | "key" | keyof React.InputHTMLAttributes<HTMLTextAreaElement>> & React.RefAttributes<HTMLTextAreaElement>>;
 export {};

package/dist/editor/components/ShowGuidesProvider.js

@@ -5,7 +5,12 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const editor_guides_1 = require("../state/editor-guides");
 const ShowGuidesProvider = ({ children }) => {
+    const [guidesList, setGuidesList] = (0, react_1.useState)(() => (0, editor_guides_1.loadGuidesList)());
+    const [selectedGuideId, setSelectedGuideId] = (0, react_1.useState)(null);
+    const [hoveredGuideId, setHoveredGuideId] = (0, react_1.useState)(null);
     const [editorShowGuides, setEditorShowGuidesState] = (0, react_1.useState)(() => (0, editor_guides_1.loadEditorShowGuidesOption)());
+    const shouldCreateGuideRef = (0, react_1.useRef)(false);
+    const shouldDeleteGuideRef = (0, react_1.useRef)(false);
     const setEditorShowGuides = (0, react_1.useCallback)((newValue) => {
         setEditorShowGuidesState((prevState) => {
             const newVal = newValue(prevState);
@@ -17,8 +22,22 @@ const ShowGuidesProvider = ({ children }) => {
         return {
             editorShowGuides,
             setEditorShowGuides,
+            guidesList,
+            setGuidesList,
+            selectedGuideId,
+            setSelectedGuideId,
+            shouldCreateGuideRef,
+            shouldDeleteGuideRef,
+            hoveredGuideId,
+            setHoveredGuideId,
         };
-    }, [editorShowGuides, setEditorShowGuides]);
+    }, [
+        editorShowGuides,
+        setEditorShowGuides,
+        guidesList,
+        selectedGuideId,
+        hoveredGuideId,
+    ]);
     return ((0, jsx_runtime_1.jsx)(editor_guides_1.EditorShowGuidesContext.Provider, { value: editorShowGuidesCtx, children: children }));
 };
 exports.ShowGuidesProvider = ShowGuidesProvider;

package/dist/editor/components/Splitter/SplitterHandle.js

@@ -56,6 +56,9 @@ const SplitterHandle = ({ allowToCollapse, onCollapse }) => {
         };
         const onPointerDown = (e) => {
             var _a;
+            if (e.button !== 0) {
+                return;
+            }
             context.isDragging.current = {
                 x: e.clientX,
                 y: e.clientY,

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

@@ -9,6 +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 z_index_1 = require("../../state/z-index");
+const ContextMenu_1 = require("../ContextMenu");
 const is_menu_item_1 = require("../Menu/is-menu-item");
 const TimelineInOutToggle_1 = require("../TimelineInOutToggle");
 const timeline_refs_1 = require("./timeline-refs");
@@ -27,6 +29,10 @@ const container = {
     height: '100%',
     top: 0,
 };
+const style = {
+    width: '100%',
+    height: '100%',
+};
 const getClientXWithScroll = (x) => {
     var _a;
     return x + ((_a = timeline_refs_1.scrollableRef.current) === null || _a === void 0 ? void 0 : _a.scrollLeft);
@@ -50,6 +56,7 @@ const Inner = () => {
         triggerOnWindowResize: true,
         shouldApplyCssTransforms: true,
     });
+    const { isHighestContext } = (0, z_index_1.useZIndex)();
     const setFrame = remotion_1.Internals.useTimelineSetFrame();
     const [inOutDragging, setInOutDragging] = (0, react_1.useState)({
         dragging: false,
@@ -77,6 +84,12 @@ const Inner = () => {
         }
     };
     const onPointerDown = (0, react_1.useCallback)((e) => {
+        if (e.button !== 0) {
+            return;
+        }
+        if (!isHighestContext) {
+            return;
+        }
         stopInterval();
         if (!videoConfig) {
             return;
@@ -107,6 +120,9 @@ const Inner = () => {
             });
             return;
         }
+        if (e.button !== 0) {
+            return;
+        }
         const frame = (0, timeline_scroll_logic_1.getFrameFromX)({
             clientX: getClientXWithScroll(e.clientX) - left,
             durationInFrames: videoConfig.durationInFrames,
@@ -119,7 +135,18 @@ const Inner = () => {
             wasPlaying: playing,
         });
         pause();
-    }, [videoConfig, left, width, seek, playing, pause, outFrame, get, inFrame]);
+    }, [
+        isHighestContext,
+        videoConfig,
+        left,
+        width,
+        seek,
+        playing,
+        pause,
+        inFrame,
+        get,
+        outFrame,
+    ]);
     const onPointerMoveScrubbing = (0, react_1.useCallback)((e) => {
         var _a;
         if (!videoConfig) {
@@ -358,8 +385,61 @@ const Inner = () => {
             window.removeEventListener('pointerup', onPointerUpInOut);
         };
     }, [inOutDragging.dragging, onPointerMoveInOut, onPointerUpInOut]);
-    return ((0, jsx_runtime_1.jsxs)("div", { style: {
-            width: '100%',
-            height: '100%',
-        }, onPointerDown: onPointerDown, children: [(0, jsx_runtime_1.jsx)("div", { style: inner, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME }), inFrame !== null && ((0, jsx_runtime_1.jsx)(TimelineInOutPointerHandle_1.TimelineInOutPointerHandle, { type: "in", atFrame: inFrame, dragging: inOutDragging.dragging === 'in' })), outFrame !== null && ((0, jsx_runtime_1.jsx)(TimelineInOutPointerHandle_1.TimelineInOutPointerHandle, { type: "out", dragging: inOutDragging.dragging === 'out', atFrame: outFrame }))] }));
+    const inContextMenu = (0, react_1.useMemo)(() => {
+        return [
+            {
+                id: 'hide-in',
+                keyHint: null,
+                label: 'Clear In marker',
+                leftItem: null,
+                onClick: (_, e) => {
+                    e === null || e === void 0 ? void 0 : e.stopPropagation();
+                    e === null || e === void 0 ? void 0 : e.preventDefault();
+                    setInAndOutFrames((prev) => {
+                        var _a;
+                        return ({
+                            ...prev,
+                            [videoConfig.id]: {
+                                ...((_a = prev[videoConfig.id]) !== null && _a !== void 0 ? _a : TimelineInOutToggle_1.defaultInOutValue),
+                                inFrame: null,
+                            },
+                        });
+                    });
+                },
+                quickSwitcherLabel: null,
+                subMenu: null,
+                type: 'item',
+                value: 'hide-in',
+            },
+        ];
+    }, [setInAndOutFrames, videoConfig.id]);
+    const outContextMenu = (0, react_1.useMemo)(() => {
+        return [
+            {
+                id: 'hide-out',
+                keyHint: null,
+                label: 'Clear Out marker',
+                leftItem: null,
+                onClick: (_, e) => {
+                    e === null || e === void 0 ? void 0 : e.stopPropagation();
+                    e === null || e === void 0 ? void 0 : e.preventDefault();
+                    setInAndOutFrames((prev) => {
+                        var _a;
+                        return ({
+                            ...prev,
+                            [videoConfig.id]: {
+                                ...((_a = prev[videoConfig.id]) !== null && _a !== void 0 ? _a : TimelineInOutToggle_1.defaultInOutValue),
+                                outFrame: null,
+                            },
+                        });
+                    });
+                },
+                quickSwitcherLabel: null,
+                subMenu: null,
+                type: 'item',
+                value: 'hide-out',
+            },
+        ];
+    }, [setInAndOutFrames, videoConfig.id]);
+    return ((0, jsx_runtime_1.jsxs)("div", { style: style, onPointerDown: onPointerDown, children: [(0, jsx_runtime_1.jsx)("div", { style: inner, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME }), inFrame !== null && ((0, jsx_runtime_1.jsx)(ContextMenu_1.ContextMenu, { values: inContextMenu, children: (0, jsx_runtime_1.jsx)(TimelineInOutPointerHandle_1.TimelineInOutPointerHandle, { type: "in", atFrame: inFrame, dragging: inOutDragging.dragging === 'in' }) })), outFrame !== null && ((0, jsx_runtime_1.jsx)(ContextMenu_1.ContextMenu, { values: outContextMenu, children: (0, jsx_runtime_1.jsx)(TimelineInOutPointerHandle_1.TimelineInOutPointerHandle, { type: "out", dragging: inOutDragging.dragging === 'out', atFrame: outFrame }) }))] }));
 };

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

@@ -4,6 +4,7 @@ exports.TimelineInOutPointerHandle = exports.outPointerHandle = exports.inPointe
 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 get_left_of_timeline_slider_1 = require("../../helpers/get-left-of-timeline-slider");
 const TimelineWidthProvider_1 = require("./TimelineWidthProvider");
 const line = {
@@ -23,7 +24,7 @@ const InnerTimelineInOutPointerHandle = ({ atFrame, dragging, timelineWidth, typ
         return {
             ...line,
             backgroundColor: dragging
-                ? 'rgba(255, 255, 255, 0.7)'
+                ? colors_1.LIGHT_TRANSPARENT
                 : 'rgba(255, 255, 255, 0.1)',
             transform: `translateX(${(0, get_left_of_timeline_slider_1.getXPositionOfItemInTimelineImperatively)(atFrame, videoConfig.durationInFrames, timelineWidth)}px)`,
         };

package/dist/editor/components/TopPanel.js

@@ -4,9 +4,11 @@ exports.TopPanel = exports.useResponsiveSidebarStatus = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const use_breakpoint_1 = require("../helpers/use-breakpoint");
+const editor_rulers_1 = require("../state/editor-rulers");
 const sidebar_1 = require("../state/sidebar");
 const CanvasOrLoading_1 = require("./CanvasOrLoading");
 const CurrentCompositionSideEffects_1 = require("./CurrentCompositionSideEffects");
+const use_is_ruler_visible_1 = require("./EditorRuler/use-is-ruler-visible");
 const ExplorerPanel_1 = require("./ExplorerPanel");
 const InitialCompositionLoader_1 = require("./InitialCompositionLoader");
 const MenuToolbar_1 = require("./MenuToolbar");
@@ -28,10 +30,6 @@ const row = {
     flex: 1,
     minHeight: 0,
 };
-const canvasContainer = {
-    flex: 1,
-    display: 'flex',
-};
 const useResponsiveSidebarStatus = () => {
     const { sidebarCollapsedStateLeft } = (0, react_1.useContext)(sidebar_1.SidebarContext);
     const responsiveLeftStatus = (0, use_breakpoint_1.useBreakpoint)(1200) ? 'collapsed' : 'expanded';
@@ -49,6 +47,7 @@ const useResponsiveSidebarStatus = () => {
 exports.useResponsiveSidebarStatus = useResponsiveSidebarStatus;
 const TopPanel = () => {
     const { setSidebarCollapsedState, sidebarCollapsedStateRight } = (0, react_1.useContext)(sidebar_1.SidebarContext);
+    const rulersAreVisible = (0, use_is_ruler_visible_1.useIsRulerVisible)();
     const actualStateLeft = (0, exports.useResponsiveSidebarStatus)();
     const actualStateRight = (0, react_1.useMemo)(() => {
         if (sidebarCollapsedStateRight === 'collapsed') {
@@ -56,12 +55,18 @@ const TopPanel = () => {
         }
         return 'expanded';
     }, [sidebarCollapsedStateRight]);
+    const canvasContainerStyle = (0, react_1.useMemo)(() => ({
+        flex: 1,
+        display: 'flex',
+        paddingTop: rulersAreVisible ? editor_rulers_1.RULER_WIDTH : 0,
+        paddingLeft: rulersAreVisible ? editor_rulers_1.RULER_WIDTH : 0,
+    }), [rulersAreVisible]);
     const onCollapseLeft = (0, react_1.useCallback)(() => {
         setSidebarCollapsedState({ left: 'collapsed', right: null });
     }, [setSidebarCollapsedState]);
     const onCollapseRight = (0, react_1.useCallback)(() => {
         setSidebarCollapsedState({ left: null, right: 'collapsed' });
     }, [setSidebarCollapsedState]);
-    return ((0, jsx_runtime_1.jsxs)("div", { style: container, children: [(0, jsx_runtime_1.jsx)(InitialCompositionLoader_1.InitialCompositionLoader, {}), (0, jsx_runtime_1.jsx)(MenuToolbar_1.MenuToolbar, {}), (0, jsx_runtime_1.jsx)("div", { style: row, children: (0, jsx_runtime_1.jsxs)(SplitterContainer_1.SplitterContainer, { minFlex: 0.15, maxFlex: 0.4, defaultFlex: 0.2, id: "sidebar-to-preview", orientation: "vertical", children: [actualStateLeft === 'expanded' ? ((0, jsx_runtime_1.jsx)(SplitterElement_1.SplitterElement, { type: "flexer", children: (0, jsx_runtime_1.jsx)(ExplorerPanel_1.ExplorerPanel, {}) })) : null, actualStateLeft === 'expanded' ? ((0, jsx_runtime_1.jsx)(SplitterHandle_1.SplitterHandle, { allowToCollapse: "left", onCollapse: onCollapseLeft })) : null, (0, jsx_runtime_1.jsx)(SplitterElement_1.SplitterElement, { type: "anti-flexer", children: (0, jsx_runtime_1.jsxs)(SplitterContainer_1.SplitterContainer, { minFlex: 0.5, maxFlex: 0.8, defaultFlex: 0.7, id: "canvas-to-right-sidebar", orientation: "vertical", children: [(0, jsx_runtime_1.jsx)(SplitterElement_1.SplitterElement, { type: "flexer", children: (0, jsx_runtime_1.jsx)("div", { style: canvasContainer, children: (0, jsx_runtime_1.jsx)(CanvasOrLoading_1.CanvasOrLoading, {}) }) }), actualStateRight === 'expanded' ? ((0, jsx_runtime_1.jsx)(SplitterHandle_1.SplitterHandle, { allowToCollapse: "right", onCollapse: onCollapseRight })) : null, actualStateRight === 'expanded' ? ((0, jsx_runtime_1.jsx)(SplitterElement_1.SplitterElement, { type: "anti-flexer", children: (0, jsx_runtime_1.jsx)(OptionsPanel_1.OptionsPanel, {}) })) : null] }) })] }) }), (0, jsx_runtime_1.jsx)(PreviewToolbar_1.PreviewToolbar, {}), (0, jsx_runtime_1.jsx)(CurrentCompositionSideEffects_1.CurrentCompositionKeybindings, {}), (0, jsx_runtime_1.jsx)(CurrentCompositionSideEffects_1.TitleUpdater, {})] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { style: container, children: [(0, jsx_runtime_1.jsx)(InitialCompositionLoader_1.InitialCompositionLoader, {}), (0, jsx_runtime_1.jsx)(MenuToolbar_1.MenuToolbar, {}), (0, jsx_runtime_1.jsx)("div", { style: row, children: (0, jsx_runtime_1.jsxs)(SplitterContainer_1.SplitterContainer, { minFlex: 0.15, maxFlex: 0.4, defaultFlex: 0.2, id: "sidebar-to-preview", orientation: "vertical", children: [actualStateLeft === 'expanded' ? ((0, jsx_runtime_1.jsx)(SplitterElement_1.SplitterElement, { type: "flexer", children: (0, jsx_runtime_1.jsx)(ExplorerPanel_1.ExplorerPanel, {}) })) : null, actualStateLeft === 'expanded' ? ((0, jsx_runtime_1.jsx)(SplitterHandle_1.SplitterHandle, { allowToCollapse: "left", onCollapse: onCollapseLeft })) : null, (0, jsx_runtime_1.jsx)(SplitterElement_1.SplitterElement, { type: "anti-flexer", children: (0, jsx_runtime_1.jsxs)(SplitterContainer_1.SplitterContainer, { minFlex: 0.5, maxFlex: 0.8, defaultFlex: 0.7, id: "canvas-to-right-sidebar", orientation: "vertical", children: [(0, jsx_runtime_1.jsx)(SplitterElement_1.SplitterElement, { type: "flexer", children: (0, jsx_runtime_1.jsx)("div", { style: canvasContainerStyle, children: (0, jsx_runtime_1.jsx)(CanvasOrLoading_1.CanvasOrLoading, {}) }) }), actualStateRight === 'expanded' ? ((0, jsx_runtime_1.jsx)(SplitterHandle_1.SplitterHandle, { allowToCollapse: "right", onCollapse: onCollapseRight })) : null, actualStateRight === 'expanded' ? ((0, jsx_runtime_1.jsx)(SplitterElement_1.SplitterElement, { type: "anti-flexer", children: (0, jsx_runtime_1.jsx)(OptionsPanel_1.OptionsPanel, {}) })) : null] }) })] }) }), (0, jsx_runtime_1.jsx)(PreviewToolbar_1.PreviewToolbar, {}), (0, jsx_runtime_1.jsx)(CurrentCompositionSideEffects_1.CurrentCompositionKeybindings, {}), (0, jsx_runtime_1.jsx)(CurrentCompositionSideEffects_1.TitleUpdater, {})] }));
 };
 exports.TopPanel = TopPanel;

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import type { PackageManager } from '../../preview-server/get-package-manager';
 export type UpdateInfo = {
     currentVersion: string;

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

@@ -1,9 +1,11 @@
-export declare const BACKGROUND = "#1f2428";
+export declare const BACKGROUND = "rgb(31,36,40)";
+export declare const BACKGROUND__TRANSPARENT = "rgba(31,36,40, 0)";
 export declare const INPUT_BACKGROUND = "#2f363d";
 export declare const BORDER_COLOR = "#000";
 export declare const LIGHT_COLOR = "#ddd";
 export declare const SELECTED_BACKGROUND = "hsla(0, 0%, 100%, 0.15)";
 export declare const LIGHT_TEXT = "#A6A7A9";
+export declare const RULER_COLOR = "#808080";
 export declare const VERY_LIGHT_TEXT = "rgba(255, 255, 255, 0.3)";
 export declare const CLEAR_HOVER = "rgba(255, 255, 255, 0.06)";
 export declare const INPUT_BORDER_COLOR_UNHOVERED = "rgba(0, 0, 0, 0.6)";
@@ -13,6 +15,9 @@ export declare const FAIL_COLOR = "#ff3232";
 export declare const WARNING_COLOR = "#f1c40f";
 export declare const BLUE = "#0b84f3";
 export declare const BLUE_DISABLED = "#284f73";
+export declare const LIGHT_TRANSPARENT = "rgba(255, 255, 255, 0.7)";
+export declare const UNSELECTED_GUIDE = "#7e1219";
+export declare const SELECTED_GUIDE = "#d22d3a";
 export declare const getBackgroundFromHoverState: ({ selected, hovered, }: {
     selected: boolean;
     hovered: boolean;

package/dist/editor/helpers/colors.js

@@ -1,12 +1,14 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getBackgroundFromHoverState = exports.BLUE_DISABLED = exports.BLUE = exports.WARNING_COLOR = exports.FAIL_COLOR = exports.TIMELINE_BACKGROUND = exports.INPUT_BORDER_COLOR_HOVERED = exports.INPUT_BORDER_COLOR_UNHOVERED = exports.CLEAR_HOVER = exports.VERY_LIGHT_TEXT = exports.LIGHT_TEXT = exports.SELECTED_BACKGROUND = exports.LIGHT_COLOR = exports.BORDER_COLOR = exports.INPUT_BACKGROUND = exports.BACKGROUND = void 0;
-exports.BACKGROUND = '#1f2428';
+exports.getBackgroundFromHoverState = exports.SELECTED_GUIDE = exports.UNSELECTED_GUIDE = exports.LIGHT_TRANSPARENT = exports.BLUE_DISABLED = exports.BLUE = exports.WARNING_COLOR = exports.FAIL_COLOR = exports.TIMELINE_BACKGROUND = exports.INPUT_BORDER_COLOR_HOVERED = exports.INPUT_BORDER_COLOR_UNHOVERED = exports.CLEAR_HOVER = exports.VERY_LIGHT_TEXT = exports.RULER_COLOR = exports.LIGHT_TEXT = exports.SELECTED_BACKGROUND = exports.LIGHT_COLOR = exports.BORDER_COLOR = exports.INPUT_BACKGROUND = exports.BACKGROUND__TRANSPARENT = exports.BACKGROUND = void 0;
+exports.BACKGROUND = 'rgb(31,36,40)';
+exports.BACKGROUND__TRANSPARENT = 'rgba(31,36,40, 0)';
 exports.INPUT_BACKGROUND = '#2f363d';
 exports.BORDER_COLOR = '#000';
 exports.LIGHT_COLOR = '#ddd';
 exports.SELECTED_BACKGROUND = 'hsla(0, 0%, 100%, 0.15)';
 exports.LIGHT_TEXT = '#A6A7A9';
+exports.RULER_COLOR = '#808080';
 exports.VERY_LIGHT_TEXT = 'rgba(255, 255, 255, 0.3)';
 const SELECTED_HOVER_BACKGROUND = 'hsla(0, 0%, 100%, 0.25)';
 exports.CLEAR_HOVER = 'rgba(255, 255, 255, 0.06)';
@@ -17,6 +19,9 @@ exports.FAIL_COLOR = '#ff3232';
 exports.WARNING_COLOR = '#f1c40f';
 exports.BLUE = '#0b84f3';
 exports.BLUE_DISABLED = '#284f73';
+exports.LIGHT_TRANSPARENT = 'rgba(255, 255, 255, 0.7)';
+exports.UNSELECTED_GUIDE = '#7e1219';
+exports.SELECTED_GUIDE = '#d22d3a';
 const getBackgroundFromHoverState = ({ selected, hovered, }) => {
     if (selected) {
         if (hovered) {