@remotion/studio 4.0.100 → 4.0.103

package/.turbo/turbo-build.log

@@ -1,4 +1,4 @@
 
-> @remotion/studio@4.0.99 build /Users/jonathanburger/remotion/packages/studio
+> @remotion/studio@4.0.102 build /Users/jonathanburger/remotion/packages/studio
 > tsc -d
 

package/LICENSE.md

@@ -7,7 +7,7 @@ Depending on the type of your legal entity, you are granted permission to use Re
 
 ## Free license
 
-Copyright © 2023 [Remotion](https://www.remotion.dev)
+Copyright © 2024 [Remotion](https://www.remotion.dev)
 
 ### Eligibility
 

package/dist/components/Canvas.d.ts

@@ -1,5 +1,7 @@
+import type { Size } from '@remotion/player';
 import React from 'react';
 import type { CanvasContent } from 'remotion';
 export declare const Canvas: React.FC<{
     canvasContent: CanvasContent;
+    size: Size;
 }>;

package/dist/components/Canvas.js

@@ -36,7 +36,7 @@ const resetZoom = {
     right: layout_1.SPACING_UNIT * 2,
 };
 const ZOOM_PX_FACTOR = 0.003;
-const Canvas = ({ canvasContent }) => {
+const Canvas = ({ canvasContent, size }) => {
     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)();
@@ -55,10 +55,6 @@ const Canvas = ({ canvasContent }) => {
         }
         return null;
     }, [assetResolution, config, canvasContent]);
-    const size = player_1.PlayerInternals.useElementSize(canvas_ref_1.canvasRef, {
-        triggerOnWindowResize: false,
-        shouldApplyCssTransforms: true,
-    });
     const isFit = previewSize.size === 'auto';
     const onWheel = (0, react_1.useCallback)((e) => {
         if (!editorZoomGestures) {

package/dist/components/CanvasOrLoading.d.ts

@@ -1,2 +1,5 @@
+import type { Size } from '@remotion/player';
 import React from 'react';
-export declare const CanvasOrLoading: React.FC;
+export declare const CanvasOrLoading: React.FC<{
+    size: Size;
+}>;

package/dist/components/CanvasOrLoading.js

@@ -24,7 +24,7 @@ const container = {
     backgroundColor: colors_1.BACKGROUND,
     flexDirection: 'column',
 };
-const CanvasOrLoading = () => {
+const CanvasOrLoading = ({ size }) => {
     const resolved = remotion_1.Internals.useResolvedVideoConfig(null);
     const [takesALongTime, setTakesALongTime] = (0, react_1.useState)(false);
     const { setZoom } = (0, react_1.useContext)(timeline_zoom_1.TimelineZoomCtx);
@@ -60,7 +60,7 @@ const CanvasOrLoading = () => {
     if (!canvasContent) {
         return null;
     }
-    const content = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ZoomPersistor_1.ZoomPersistor, {}), (0, jsx_runtime_1.jsx)(Canvas_1.Canvas, { canvasContent: canvasContent })] }));
+    const content = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ZoomPersistor_1.ZoomPersistor, {}), (0, jsx_runtime_1.jsx)(Canvas_1.Canvas, { size: size, canvasContent: canvasContent })] }));
     if (canvasContent.type === 'asset' || canvasContent.type === 'output') {
         return content;
     }

package/dist/components/Editor.js

@@ -1,8 +1,31 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Editor = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
+const react_1 = __importStar(require("react"));
 const remotion_1 = require("remotion");
 const colors_1 = require("../helpers/colors");
 const noop_1 = require("../helpers/noop");
@@ -35,6 +58,10 @@ const Editor = ({ Root, readOnlyStudio, }) => {
             window.removeEventListener('beforeunload', listenToChanges);
         };
     }, [readOnlyStudio]);
-    return ((0, jsx_runtime_1.jsx)(z_index_1.HigherZIndex, { onEscape: noop_1.noop, onOutsideClick: noop_1.noop, children: (0, jsx_runtime_1.jsxs)(timeline_zoom_1.TimelineZoomContext, { children: [(0, jsx_runtime_1.jsxs)("div", { style: background, children: [(0, jsx_runtime_1.jsx)(Root, {}), (0, jsx_runtime_1.jsxs)(remotion_1.Internals.CanUseRemotionHooksProvider, { children: [(0, jsx_runtime_1.jsx)(EditorContent_1.EditorContent, { readOnlyStudio: readOnlyStudio }), (0, jsx_runtime_1.jsx)(GlobalKeybindings_1.GlobalKeybindings, {})] }), (0, jsx_runtime_1.jsx)(NotificationCenter_1.NotificationCenter, {})] }), (0, jsx_runtime_1.jsx)(Modals_1.Modals, { readOnlyStudio: readOnlyStudio })] }) }));
+    const [canvasMounted, setCanvasMounted] = react_1.default.useState(false);
+    const onMounted = (0, react_1.useCallback)(() => {
+        setCanvasMounted(true);
+    }, []);
+    return ((0, jsx_runtime_1.jsx)(z_index_1.HigherZIndex, { onEscape: noop_1.noop, onOutsideClick: noop_1.noop, children: (0, jsx_runtime_1.jsxs)(timeline_zoom_1.TimelineZoomContext, { children: [(0, jsx_runtime_1.jsxs)("div", { style: background, children: [canvasMounted ? (0, jsx_runtime_1.jsx)(Root, {}) : null, (0, jsx_runtime_1.jsxs)(remotion_1.Internals.CanUseRemotionHooksProvider, { children: [(0, jsx_runtime_1.jsx)(EditorContent_1.EditorContent, { onMounted: onMounted, readOnlyStudio: readOnlyStudio }), (0, jsx_runtime_1.jsx)(GlobalKeybindings_1.GlobalKeybindings, {})] }), (0, jsx_runtime_1.jsx)(NotificationCenter_1.NotificationCenter, {})] }), (0, jsx_runtime_1.jsx)(Modals_1.Modals, { readOnlyStudio: readOnlyStudio })] }) }));
 };
 exports.Editor = Editor;

package/dist/components/EditorContent.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
 export declare const EditorContent: React.FC<{
     readOnlyStudio: boolean;
+    onMounted: () => void;
 }>;

package/dist/components/EditorContent.js

@@ -19,11 +19,11 @@ const container = {
     flex: 1,
     height: 0,
 };
-const EditorContent = ({ readOnlyStudio }) => {
+const EditorContent = ({ readOnlyStudio, onMounted }) => {
     const isStill = (0, is_current_selected_still_1.useIsStill)();
     const { canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     // Preventing multiple renders so the update check doesn't get rendered twice and needs to be aborted
     const onlyTopPanel = canvasContent === null || isStill || canvasContent.type !== 'composition';
-    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, { readOnlyStudio: readOnlyStudio }), onlyTopPanel ? ((0, jsx_runtime_1.jsx)(TopPanel_1.TopPanel, { readOnlyStudio: readOnlyStudio })) : ((0, jsx_runtime_1.jsxs)(SplitterContainer_1.SplitterContainer, { orientation: "horizontal", id: "top-to-bottom", maxFlex: 0.9, minFlex: 0.2, defaultFlex: 0.75, children: [(0, jsx_runtime_1.jsx)(SplitterElement_1.SplitterElement, { sticky: null, type: "flexer", children: (0, jsx_runtime_1.jsx)(TopPanel_1.TopPanel, { readOnlyStudio: readOnlyStudio }) }), (0, jsx_runtime_1.jsx)(SplitterHandle_1.SplitterHandle, { allowToCollapse: "none", onCollapse: noop }), (0, jsx_runtime_1.jsx)(SplitterElement_1.SplitterElement, { sticky: null, type: "anti-flexer", children: (0, jsx_runtime_1.jsx)(Timeline_1.Timeline, {}) })] }))] }));
+    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, { readOnlyStudio: readOnlyStudio }), onlyTopPanel ? ((0, jsx_runtime_1.jsx)(TopPanel_1.TopPanel, { onMounted: onMounted, readOnlyStudio: readOnlyStudio })) : ((0, jsx_runtime_1.jsxs)(SplitterContainer_1.SplitterContainer, { orientation: "horizontal", id: "top-to-bottom", maxFlex: 0.9, minFlex: 0.2, defaultFlex: 0.75, children: [(0, jsx_runtime_1.jsx)(SplitterElement_1.SplitterElement, { sticky: null, type: "flexer", children: (0, jsx_runtime_1.jsx)(TopPanel_1.TopPanel, { onMounted: onMounted, readOnlyStudio: readOnlyStudio }) }), (0, jsx_runtime_1.jsx)(SplitterHandle_1.SplitterHandle, { allowToCollapse: "none", onCollapse: noop }), (0, jsx_runtime_1.jsx)(SplitterElement_1.SplitterElement, { sticky: null, type: "anti-flexer", children: (0, jsx_runtime_1.jsx)(Timeline_1.Timeline, {}) })] }))] }));
 };
 exports.EditorContent = EditorContent;

package/dist/components/EditorRuler/Ruler.d.ts

@@ -1,3 +1,4 @@
+import type { Size } from '@remotion/player';
 import React from 'react';
 interface Point {
     value: number;
@@ -8,9 +9,9 @@ interface RulerProps {
     points: Point[];
     originOffset: number;
     startMarking: number;
-    containerRef: React.RefObject<HTMLDivElement>;
     markingGaps: number;
     orientation: 'horizontal' | 'vertical';
+    size: Size;
 }
 declare const Ruler: React.FC<RulerProps>;
 export default Ruler;

package/dist/components/EditorRuler/Ruler.js

@@ -10,8 +10,7 @@ const editor_rulers_1 = require("../../state/editor-rulers");
 const makeGuideId = () => {
     return Math.random().toString(36).substring(7);
 };
-const Ruler = ({ scale, points, originOffset, startMarking, containerRef, markingGaps, orientation, }) => {
-    var _a;
+const Ruler = ({ scale, points, originOffset, startMarking, size, markingGaps, orientation, }) => {
     const rulerCanvasRef = (0, react_1.useRef)(null);
     const isVerticalRuler = orientation === 'vertical';
     const { shouldCreateGuideRef, setGuidesList, selectedGuideId, hoveredGuideId, setSelectedGuideId, guidesList, setEditorShowGuides, } = (0, react_1.useContext)(editor_guides_1.EditorShowGuidesContext);
@@ -24,6 +23,8 @@ const Ruler = ({ scale, points, originOffset, startMarking, containerRef, markin
         var _a, _b;
         return ((_b = (_a = guidesList.find((guide) => guide.id === selectedGuideId)) !== null && _a !== void 0 ? _a : guidesList.find((guide) => guide.id === hoveredGuideId)) !== null && _b !== void 0 ? _b : null);
     }, [guidesList, hoveredGuideId, selectedGuideId]);
+    const rulerWidth = isVerticalRuler ? editor_rulers_1.RULER_WIDTH : size.width - editor_rulers_1.RULER_WIDTH;
+    const rulerHeight = isVerticalRuler ? size.height - editor_rulers_1.RULER_WIDTH : editor_rulers_1.RULER_WIDTH;
     (0, react_1.useEffect)(() => {
         (0, editor_ruler_1.drawMarkingOnRulerCanvas)({
             scale,
@@ -34,6 +35,8 @@ const Ruler = ({ scale, points, originOffset, startMarking, containerRef, markin
             orientation,
             rulerCanvasRef,
             selectedGuide: selectedOrHoveredGuide,
+            canvasHeight: rulerHeight * window.devicePixelRatio,
+            canvasWidth: rulerWidth * window.devicePixelRatio,
         });
     }, [
         scale,
@@ -43,15 +46,15 @@ const Ruler = ({ scale, points, originOffset, startMarking, containerRef, markin
         markingGaps,
         orientation,
         selectedOrHoveredGuide,
+        size,
+        rulerHeight,
+        rulerWidth,
     ]);
-    const { width: canvasContainerWidth, height: canvasContainerHeight } = ((_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) || { width: 0, height: 0 };
-    const rulerWidth = isVerticalRuler ? editor_rulers_1.RULER_WIDTH : canvasContainerWidth;
-    const rulerHeight = isVerticalRuler ? canvasContainerHeight : editor_rulers_1.RULER_WIDTH;
     const rulerStyle = (0, react_1.useMemo)(() => ({
         position: 'absolute',
         background: colors_1.BACKGROUND,
-        width: `${rulerWidth}px`,
-        height: `${rulerHeight}px`,
+        width: rulerWidth,
+        height: rulerHeight,
         left: isVerticalRuler ? 0 : 'unset',
         top: isVerticalRuler ? 'unset' : 0,
         borderBottom: isVerticalRuler ? undefined : '1px solid ' + colors_1.RULER_COLOR,
@@ -100,6 +103,6 @@ const Ruler = ({ scale, points, originOffset, startMarking, containerRef, markin
             setCursor(isVerticalRuler ? 'ew-resize' : 'ns-resize');
         }
     }, [selectedGuideId, isVerticalRuler]);
-    return ((0, jsx_runtime_1.jsx)("canvas", { ref: rulerCanvasRef, width: rulerWidth * devicePixelRatio, height: rulerHeight * devicePixelRatio, style: rulerStyle, onPointerDown: onMouseDown, onPointerEnter: changeCursor, onPointerLeave: changeCursor }));
+    return ((0, jsx_runtime_1.jsx)("canvas", { ref: rulerCanvasRef, width: rulerWidth * window.devicePixelRatio, height: rulerHeight * window.devicePixelRatio, style: rulerStyle, onPointerDown: onMouseDown, onPointerEnter: changeCursor, onPointerLeave: changeCursor }));
 };
 exports.default = Ruler;

package/dist/components/EditorRuler/index.d.ts

@@ -3,7 +3,7 @@ import React from 'react';
 import type { AssetMetadata } from '../../helpers/get-asset-metadata';
 import type { Dimensions } from '../../helpers/is-current-selected-still';
 export declare const EditorRulers: React.FC<{
-    canvasSize: Size | null;
+    canvasSize: Size;
     contentDimensions: Dimensions | 'none' | null;
     assetMetadata: AssetMetadata | null;
     containerRef: React.RefObject<HTMLDivElement>;

package/dist/components/EditorRuler/index.js

@@ -23,7 +23,7 @@ const originBlockStyles = {
     background: colors_1.BACKGROUND,
 };
 const EditorRulers = ({ contentDimensions, canvasSize, assetMetadata, containerRef }) => {
-    const { scale, canvasDimensions } = (0, use_studio_canvas_dimensions_1.useStudioCanvasDimensions)({
+    const { scale } = (0, use_studio_canvas_dimensions_1.useStudioCanvasDimensions)({
         canvasSize,
         contentDimensions,
         assetMetadata,
@@ -35,15 +35,15 @@ const EditorRulers = ({ contentDimensions, canvasSize, assetMetadata, containerR
         return predefinedGap || editor_rulers_1.MAXIMUM_PREDEFINED_RULER_SCALE_GAP;
     }, [scale]);
     const horizontalRulerScaleRange = (0, react_1.useMemo)(() => (0, editor_ruler_1.getRulerScaleRange)({
-        canvasLength: canvasDimensions.width,
-        containerRef,
+        canvasLength: canvasSize.width,
         scale,
-    }), [canvasDimensions.width, containerRef, scale]);
+        canvasSize,
+    }), [canvasSize, scale]);
     const verticalRulerScaleRange = (0, react_1.useMemo)(() => (0, editor_ruler_1.getRulerScaleRange)({
-        canvasLength: canvasDimensions.height,
-        containerRef,
+        canvasLength: canvasSize.height,
         scale,
-    }), [canvasDimensions.height, containerRef, scale]);
+        canvasSize,
+    }), [canvasSize, scale]);
     const { points: horizontalRulerPoints, startMarking: horizontalRulerStartMarking, } = (0, react_1.useMemo)(() => (0, editor_ruler_1.getRulerPoints)({
         rulerScaleRange: horizontalRulerScaleRange,
         rulerMarkingGaps,
@@ -98,10 +98,8 @@ const EditorRulers = ({ contentDimensions, canvasSize, assetMetadata, containerR
                             return guide;
                         }
                         const position = guide.orientation === 'vertical'
-                            ? (mouseX - containerLeft) / scale -
-                                canvasDimensions.left / scale
-                            : (mouseY - containerTop) / scale -
-                                canvasDimensions.top / scale;
+                            ? (mouseX - containerLeft) / scale - canvasSize.left / scale
+                            : (mouseY - containerTop) / scale - canvasSize.top / scale;
                         const desiredCursor = guide.orientation === 'vertical' ? 'ew-resize' : 'ns-resize';
                         if (document.body.style.cursor !== desiredCursor) {
                             document.body.style.cursor = desiredCursor;
@@ -118,11 +116,11 @@ const EditorRulers = ({ contentDimensions, canvasSize, assetMetadata, containerR
     }, [
         containerRef,
         shouldDeleteGuideRef,
+        setGuidesList,
         selectedGuideId,
         scale,
-        setGuidesList,
-        canvasDimensions.left,
-        canvasDimensions.top,
+        canvasSize.left,
+        canvasSize.top,
     ]);
     const onMouseUp = (0, react_1.useCallback)(() => {
         setGuidesList((prevState) => {
@@ -162,6 +160,6 @@ const EditorRulers = ({ contentDimensions, canvasSize, assetMetadata, containerR
             }
         };
     }, [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 })] }));
+    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, markingGaps: rulerMarkingGaps, originOffset: canvasSize.left, size: canvasSize }), (0, jsx_runtime_1.jsx)(Ruler_1.default, { orientation: "vertical", scale: scale, points: verticalRulerPoints, startMarking: verticalRulerStartMarking, markingGaps: rulerMarkingGaps, originOffset: canvasSize.top, size: canvasSize })] }));
 };
 exports.EditorRulers = EditorRulers;

package/dist/components/MenuBuildIndicator.js

@@ -40,6 +40,6 @@ const MenuBuildIndicator = () => {
             window.remotion_finishedBuilding = undefined;
         };
     }, []);
-    return ((0, jsx_runtime_1.jsxs)("div", { style: cwd, title: window.remotion_cwd, children: [showButton ? (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 2 }) : null, isBuilding ? ((0, jsx_runtime_1.jsx)("div", { style: spinner, children: (0, jsx_runtime_1.jsx)(Spinner_1.Spinner, { duration: 0.5, size: spinnerSize }) })) : ((0, jsx_runtime_1.jsx)("div", { style: noSpinner })), showButton ? (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.5 }) : null, window.remotion_projectName, showButton ? (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.25 }) : null, showButton ? (0, jsx_runtime_1.jsx)(OpenEditorButton_1.OpenEditorButton, {}) : null] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { style: cwd, title: window.remotion_cwd, children: [showButton ? (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 2 }) : null, isBuilding ? ((0, jsx_runtime_1.jsx)("div", { style: spinner, children: (0, jsx_runtime_1.jsx)(Spinner_1.Spinner, { duration: 0.5, size: spinnerSize }) })) : ((0, jsx_runtime_1.jsx)("div", { style: noSpinner })), showButton ? (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.5 }) : null, window.remotion_projectName, showButton ? (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.25 }) : null, showButton ? ((0, jsx_runtime_1.jsx)(OpenEditorButton_1.OpenEditorButton, { type: "editor" })) : window.remotion_gitSource ? ((0, jsx_runtime_1.jsx)(OpenEditorButton_1.OpenEditorButton, { type: "git" })) : null] }));
 };
 exports.MenuBuildIndicator = MenuBuildIndicator;

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

@@ -12,6 +12,6 @@ export declare const getInputBorderColor: ({ status, isFocused, isHovered, }: {
     status: 'error' | 'warning' | 'ok';
     isFocused: boolean;
     isHovered: boolean;
-}) => "#ff3232" | "hsla(0, 0%, 100%, 0.15)" | "#f1c40f" | "rgba(0, 0, 0, 0.6)" | "rgba(255, 255, 255, 0.05)";
+}) => "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<Omit<Props, "ref"> & React.RefAttributes<HTMLInputElement>>;
 export {};

package/dist/components/OpenEditorButton.d.ts

@@ -1,2 +1,4 @@
 /// <reference types="react" />
-export declare const OpenEditorButton: React.FC<{}>;
+export declare const OpenEditorButton: React.FC<{
+    type: 'git' | 'editor';
+}>;

package/dist/components/OpenEditorButton.js

@@ -4,6 +4,7 @@ exports.OpenEditorButton = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const colors_1 = require("../helpers/colors");
+const get_git_menu_item_1 = require("../helpers/get-git-menu-item");
 const open_in_editor_1 = require("../helpers/open-in-editor");
 const NotificationCenter_1 = require("./Notifications/NotificationCenter");
 const svgStyle = {
@@ -17,32 +18,42 @@ const buttonStyle = {
     justifyContent: 'center',
     alignItems: 'center',
 };
-const OpenEditorButton = () => {
+const OpenEditorButton = ({ type }) => {
     const [hovered, setHovered] = (0, react_1.useState)(false);
     const svgFillColor = (0, react_1.useMemo)(() => {
         return hovered ? 'white' : colors_1.LIGHT_TEXT;
     }, [hovered]);
-    const handleClick = async () => {
-        await (0, open_in_editor_1.openInEditor)({
-            originalFileName: `${window.remotion_cwd}`,
-            originalLineNumber: 1,
-            originalColumnNumber: 1,
-            originalFunctionName: null,
-            originalScriptCode: null,
-        })
-            .then((res) => res.json())
-            .then(({ success }) => {
-            if (!success) {
+    const handleClick = (0, react_1.useCallback)(async () => {
+        if (type === 'editor') {
+            await (0, open_in_editor_1.openInEditor)({
+                originalFileName: `${window.remotion_cwd}`,
+                originalLineNumber: 1,
+                originalColumnNumber: 1,
+                originalFunctionName: null,
+                originalScriptCode: null,
+            })
+                .then((res) => res.json())
+                .then(({ success }) => {
+                if (!success) {
+                    (0, NotificationCenter_1.sendErrorNotification)(`Could not open ${window.remotion_editorName}`);
+                }
+            })
+                .catch((err) => {
+                // eslint-disable-next-line no-console
+                console.error(err);
                 (0, NotificationCenter_1.sendErrorNotification)(`Could not open ${window.remotion_editorName}`);
+            });
+        }
+        if (type === 'git') {
+            if (!window.remotion_gitSource) {
+                throw new Error('No git source');
             }
-        })
-            .catch((err) => {
-            // eslint-disable-next-line no-console
-            console.error(err);
-            (0, NotificationCenter_1.sendErrorNotification)(`Could not open ${window.remotion_editorName}`);
-        });
-    };
-    const buttonTooltip = `Open in ${window.remotion_editorName}`;
+            window.open((0, get_git_menu_item_1.getGitSourceBranchUrl)(window.remotion_gitSource), '_blank');
+        }
+    }, [type]);
+    const buttonTooltip = type === 'git'
+        ? `Open ${(0, get_git_menu_item_1.getGitSourceName)(window.remotion_gitSource)} Repo`
+        : `Open in ${window.remotion_editorName}`;
     const openInEditorSvg = ((0, jsx_runtime_1.jsx)("svg", { viewBox: "0 0 512 512", style: svgStyle, children: (0, jsx_runtime_1.jsx)("path", { fill: svgFillColor, d: "M320 0c-17.7 0-32 14.3-32 32s14.3 32 32 32h82.7L201.4 265.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L448 109.3V192c0 17.7 14.3 32 32 32s32-14.3 32-32V32c0-17.7-14.3-32-32-32H320zM80 32C35.8 32 0 67.8 0 112V432c0 44.2 35.8 80 80 80H400c44.2 0 80-35.8 80-80V320c0-17.7-14.3-32-32-32s-32 14.3-32 32V432c0 8.8-7.2 16-16 16H80c-8.8 0-16-7.2-16-16V112c0-8.8 7.2-16 16-16H192c17.7 0 32-14.3 32-32s-14.3-32-32-32H80z" }) }));
     const onPointerEnter = (0, react_1.useCallback)(() => {
         setHovered(true);

package/dist/components/Timeline/TimelineStack/index.js

@@ -5,7 +5,9 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const studio_shared_1 = require("@remotion/studio-shared");
 const react_1 = require("react");
 const source_map_1 = require("source-map");
+const client_id_1 = require("../../../helpers/client-id");
 const colors_1 = require("../../../helpers/colors");
+const get_git_menu_item_1 = require("../../../helpers/get-git-menu-item");
 const open_in_editor_1 = require("../../../helpers/open-in-editor");
 const url_state_1 = require("../../../helpers/url-state");
 const InitialCompositionLoader_1 = require("../../InitialCompositionLoader");
@@ -24,6 +26,8 @@ const TimelineStack = ({ isCompact, sequence }) => {
     const [titleHovered, setTitleHovered] = (0, react_1.useState)(false);
     const [opening, setOpening] = (0, react_1.useState)(false);
     const selectAsset = (0, InitialCompositionLoader_1.useSelectAsset)();
+    const connectionStatus = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx)
+        .previewServerState.type;
     const assetPath = (0, react_1.useMemo)(() => {
         if (sequence.type !== 'video' && sequence.type !== 'audio') {
             return null;
@@ -60,7 +64,16 @@ const TimelineStack = ({ isCompact, sequence }) => {
             setOpening(false);
         }
     }, []);
+    const canOpenInEditor = window.remotion_editorName &&
+        connectionStatus === 'connected' &&
+        originalLocation;
+    const canOpenInGitHub = window.remotion_gitSource && originalLocation;
+    const titleHoverable = (isCompact && (canOpenInEditor || canOpenInGitHub)) || assetPath;
+    const stackHoverable = !isCompact && (canOpenInEditor || canOpenInGitHub);
     const onClickTitle = (0, react_1.useCallback)(() => {
+        if (!titleHoverable) {
+            return null;
+        }
         if (assetPath) {
             navigateToAsset(assetPath);
             return;
@@ -68,14 +81,34 @@ const TimelineStack = ({ isCompact, sequence }) => {
         if (!originalLocation) {
             return;
         }
-        openEditor(originalLocation);
-    }, [assetPath, navigateToAsset, openEditor, originalLocation]);
+        if (canOpenInEditor) {
+            openEditor(originalLocation);
+            return;
+        }
+        if (canOpenInGitHub) {
+            window.open((0, get_git_menu_item_1.getGitRefUrl)(window.remotion_gitSource, originalLocation), '_blank');
+        }
+    }, [
+        assetPath,
+        canOpenInEditor,
+        canOpenInGitHub,
+        navigateToAsset,
+        openEditor,
+        originalLocation,
+        titleHoverable,
+    ]);
     const onClickStack = (0, react_1.useCallback)(() => {
         if (!originalLocation) {
             return;
         }
-        openEditor(originalLocation);
-    }, [openEditor, originalLocation]);
+        if (canOpenInEditor) {
+            openEditor(originalLocation);
+            return;
+        }
+        if (canOpenInGitHub) {
+            window.open((0, get_git_menu_item_1.getGitRefUrl)(window.remotion_gitSource, originalLocation), '_blank');
+        }
+    }, [canOpenInEditor, canOpenInGitHub, openEditor, originalLocation]);
     (0, react_1.useEffect)(() => {
         if (!sequence.stack) {
             return;
@@ -101,18 +134,16 @@ const TimelineStack = ({ isCompact, sequence }) => {
     const onTitlePointerLeave = (0, react_1.useCallback)(() => {
         setTitleHovered(false);
     }, []);
-    const hoverable = (originalLocation && isCompact) ||
-        (assetPath && window.remotion_editorName);
     const style = (0, react_1.useMemo)(() => {
         return {
             fontSize: 12,
             color: opening
                 ? colors_1.VERY_LIGHT_TEXT
-                : stackHovered && hoverable
+                : stackHovered && stackHoverable
                     ? colors_1.LIGHT_TEXT
                     : colors_1.VERY_LIGHT_TEXT,
             marginLeft: 10,
-            cursor: hoverable ? 'pointer' : undefined,
+            cursor: stackHoverable ? 'pointer' : undefined,
             display: 'flex',
             flexDirection: 'row',
             alignItems: 'center',
@@ -121,9 +152,9 @@ const TimelineStack = ({ isCompact, sequence }) => {
             overflow: 'hidden',
             flexShrink: 100000,
         };
-    }, [opening, stackHovered, hoverable]);
-    const textStyle = (0, react_1.useMemo)(() => {
-        const hoverEffect = titleHovered && hoverable;
+    }, [opening, stackHovered, stackHoverable]);
+    const titleStyle = (0, react_1.useMemo)(() => {
+        const hoverEffect = titleHovered && titleHoverable;
         return {
             fontSize: 12,
             whiteSpace: 'nowrap',
@@ -135,12 +166,12 @@ const TimelineStack = ({ isCompact, sequence }) => {
             borderBottom: hoverEffect ? '1px solid #fff' : 'none',
             cursor: hoverEffect ? 'pointer' : undefined,
         };
-    }, [hoverable, isCompact, opening, titleHovered]);
+    }, [titleHoverable, isCompact, opening, titleHovered]);
     const text = sequence.displayName.length > 1000
         ? sequence.displayName.slice(0, 1000) + '...'
         : sequence.displayName;
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { onPointerEnter: onTitlePointerEnter, onPointerLeave: onTitlePointerLeave, title: originalLocation
                     ? (0, source_attribution_1.getOriginalSourceAttribution)(originalLocation)
-                    : text || '<Sequence>', style: textStyle, onClick: onClickTitle, children: text || '<Sequence>' }), isCompact || !originalLocation ? null : ((0, jsx_runtime_1.jsx)("div", { onPointerEnter: onStackPointerEnter, onPointerLeave: onStackPointerLeave, onClick: onClickStack, style: style, children: (0, source_attribution_1.getOriginalSourceAttribution)(originalLocation) })), opening ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.5 }), (0, jsx_runtime_1.jsx)(Spinner_1.Spinner, { duration: 0.5, size: 12 })] })) : null] }));
+                    : text || '<Sequence>', style: titleStyle, onClick: onClickTitle, children: text || '<Sequence>' }), isCompact || !originalLocation ? null : ((0, jsx_runtime_1.jsx)("div", { onPointerEnter: onStackPointerEnter, onPointerLeave: onStackPointerLeave, onClick: onClickStack, style: style, children: (0, source_attribution_1.getOriginalSourceAttribution)(originalLocation) })), opening ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.5 }), (0, jsx_runtime_1.jsx)(Spinner_1.Spinner, { duration: 0.5, size: 12 })] })) : null] }));
 };
 exports.TimelineStack = TimelineStack;

package/dist/components/TopPanel.d.ts

@@ -2,4 +2,5 @@ import React from 'react';
 export declare const useResponsiveSidebarStatus: () => 'collapsed' | 'expanded';
 export declare const TopPanel: React.FC<{
     readOnlyStudio: boolean;
+    onMounted: () => void;
 }>;

package/dist/components/TopPanel.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TopPanel = exports.useResponsiveSidebarStatus = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const player_1 = require("@remotion/player");
 const react_1 = require("react");
 const use_breakpoint_1 = require("../helpers/use-breakpoint");
 const editor_rulers_1 = require("../state/editor-rulers");
@@ -43,9 +44,10 @@ const useResponsiveSidebarStatus = () => {
     return actualStateLeft;
 };
 exports.useResponsiveSidebarStatus = useResponsiveSidebarStatus;
-const TopPanel = ({ readOnlyStudio }) => {
+const TopPanel = ({ readOnlyStudio, onMounted }) => {
     const { setSidebarCollapsedState, sidebarCollapsedStateRight } = (0, react_1.useContext)(sidebar_1.SidebarContext);
     const rulersAreVisible = (0, use_is_ruler_visible_1.useIsRulerVisible)();
+    const ref = (0, react_1.useRef)(null);
     const actualStateLeft = (0, exports.useResponsiveSidebarStatus)();
     const actualStateRight = (0, react_1.useMemo)(() => {
         if (sidebarCollapsedStateRight === 'collapsed') {
@@ -53,6 +55,14 @@ const TopPanel = ({ readOnlyStudio }) => {
         }
         return 'expanded';
     }, [sidebarCollapsedStateRight]);
+    const size = player_1.PlayerInternals.useElementSize(ref, {
+        triggerOnWindowResize: false,
+        shouldApplyCssTransforms: true,
+    });
+    const hasSize = size !== null;
+    (0, react_1.useEffect)(() => {
+        onMounted();
+    }, [hasSize, onMounted]);
     const canvasContainerStyle = (0, react_1.useMemo)(() => ({
         flex: 1,
         display: 'flex',
@@ -65,6 +75,6 @@ const TopPanel = ({ readOnlyStudio }) => {
     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)("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, { sticky: null, 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, { sticky: null, 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, { sticky: null, 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, { sticky: null, type: "anti-flexer", children: (0, jsx_runtime_1.jsx)(OptionsPanel_1.OptionsPanel, { readOnlyStudio: readOnlyStudio }) })) : null] }) })] }) }), (0, jsx_runtime_1.jsx)(PreviewToolbar_1.PreviewToolbar, { readOnlyStudio: readOnlyStudio }), (0, jsx_runtime_1.jsx)(CurrentCompositionSideEffects_1.CurrentCompositionKeybindings, { readOnlyStudio: readOnlyStudio }), (0, jsx_runtime_1.jsx)(CurrentCompositionSideEffects_1.TitleUpdater, {})] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { style: container, children: [(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, { sticky: null, 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, { sticky: null, 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, { sticky: null, type: "flexer", children: (0, jsx_runtime_1.jsx)("div", { ref: ref, style: canvasContainerStyle, children: size ? (0, jsx_runtime_1.jsx)(CanvasOrLoading_1.CanvasOrLoading, { size: size }) : null }) }), 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, { sticky: null, type: "anti-flexer", children: (0, jsx_runtime_1.jsx)(OptionsPanel_1.OptionsPanel, { readOnlyStudio: readOnlyStudio }) })) : null] }) })] }) }), (0, jsx_runtime_1.jsx)(PreviewToolbar_1.PreviewToolbar, { readOnlyStudio: readOnlyStudio }), (0, jsx_runtime_1.jsx)(CurrentCompositionSideEffects_1.CurrentCompositionKeybindings, { readOnlyStudio: readOnlyStudio }), (0, jsx_runtime_1.jsx)(CurrentCompositionSideEffects_1.TitleUpdater, {})] }));
 };
 exports.TopPanel = TopPanel;

package/dist/helpers/checkerboard-background.d.ts

@@ -1,4 +1,4 @@
 export declare const getCheckerboardBackgroundSize: (size: number) => string;
 export declare const getCheckerboardBackgroundPos: (size: number) => string;
-export declare const checkerboardBackgroundColor: (checkerboard: boolean) => "white" | "black";
+export declare const checkerboardBackgroundColor: (checkerboard: boolean) => "black" | "white";
 export declare const checkerboardBackgroundImage: (checkerboard: boolean) => "\n     linear-gradient(\n        45deg,\n        rgba(0, 0, 0, 0.1) 25%,\n        transparent 25%\n      ),\n      linear-gradient(135deg, rgba(0, 0, 0, 0.1) 25%, transparent 25%),\n      linear-gradient(45deg, transparent 75%, rgba(0, 0, 0, 0.1) 75%),\n      linear-gradient(135deg, transparent 75%, rgba(0, 0, 0, 0.1) 75%)\n    " | undefined;

package/dist/helpers/colors.d.ts

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

package/dist/helpers/editor-ruler.d.ts

@@ -1,5 +1,6 @@
+import type { Size } from '@remotion/player';
 import type { Guide } from '../state/editor-guides';
-export declare const drawMarkingOnRulerCanvas: ({ scale, points, startMarking, originOffset, markingGaps, orientation, rulerCanvasRef, selectedGuide, }: {
+export declare const drawMarkingOnRulerCanvas: ({ scale, points, startMarking, originOffset, markingGaps, orientation, rulerCanvasRef, selectedGuide, canvasHeight, canvasWidth, }: {
     scale: number;
     points: Array<{
         position: number;
@@ -11,6 +12,8 @@ export declare const drawMarkingOnRulerCanvas: ({ scale, points, startMarking, o
     orientation: 'horizontal' | 'vertical';
     rulerCanvasRef: React.RefObject<HTMLCanvasElement>;
     selectedGuide: Guide | null;
+    canvasWidth: number;
+    canvasHeight: number;
 }) => void;
 export declare const getRulerPoints: ({ rulerScaleRange, rulerMarkingGaps, scale, }: {
     rulerScaleRange: {
@@ -26,10 +29,10 @@ export declare const getRulerPoints: ({ rulerScaleRange, rulerMarkingGaps, scale
     }[];
     startMarking: number;
 };
-export declare const getRulerScaleRange: ({ canvasLength, containerRef, scale, }: {
+export declare const getRulerScaleRange: ({ canvasLength, scale, canvasSize, }: {
     canvasLength: number;
-    containerRef: React.RefObject<HTMLDivElement>;
     scale: number;
+    canvasSize: Size;
 }) => {
     start: number;
     end: number;