@remotion/studio 4.0.102 → 4.0.103

package/.turbo/turbo-build.log

@@ -1,4 +1,4 @@
 
-> @remotion/studio@4.0.101 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/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/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/helpers/get-git-menu-item.d.ts

@@ -0,0 +1,7 @@
+import type { GitSource } from '@remotion/studio-shared';
+import type { ComboboxValue } from '../components/NewComposition/ComboBox';
+import type { OriginalPosition } from '../error-overlay/react-overlay/utils/get-source-map';
+export declare const getGitSourceName: (gitSource: GitSource) => string;
+export declare const getGitSourceBranchUrl: (gitSource: GitSource) => string;
+export declare const getGitRefUrl: (gitSource: GitSource, originalLocation: OriginalPosition) => string;
+export declare const getGitMenuItem: () => ComboboxValue | null;

package/dist/helpers/get-git-menu-item.js

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getGitMenuItem = exports.getGitRefUrl = exports.getGitSourceBranchUrl = exports.getGitSourceName = void 0;
+const getGitSourceName = (gitSource) => {
+    if (gitSource.type === 'github') {
+        return 'GitHub';
+    }
+    throw new Error('Unknown git source type');
+};
+exports.getGitSourceName = getGitSourceName;
+const getGitSourceBranchUrl = (gitSource) => {
+    if (gitSource.type === 'github') {
+        return `https://github.com/${gitSource.org}/${gitSource.name}/tree/${gitSource.ref}${gitSource.relativeFromGitRoot ? `/${gitSource.relativeFromGitRoot}` : ''}`;
+    }
+    throw new Error('Unknown git source type');
+};
+exports.getGitSourceBranchUrl = getGitSourceBranchUrl;
+const getGitRefUrl = (gitSource, originalLocation) => {
+    if (gitSource.type === 'github') {
+        return `https://github.com/${gitSource.org}/${gitSource.name}/tree/${gitSource.ref}/${gitSource.relativeFromGitRoot ? `${gitSource.relativeFromGitRoot}/` : ''}${originalLocation.source}#L${originalLocation.line}`;
+    }
+    throw new Error('Unknown git source type');
+};
+exports.getGitRefUrl = getGitRefUrl;
+const getGitMenuItem = () => {
+    if (!window.remotion_gitSource) {
+        return null;
+    }
+    return {
+        id: 'open-git-source',
+        value: 'open-git-source',
+        label: `Open ${(0, exports.getGitSourceName)(window.remotion_gitSource)} Repo`,
+        onClick: () => {
+            window.open((0, exports.getGitSourceBranchUrl)(window.remotion_gitSource), '_blank');
+        },
+        type: 'item',
+        keyHint: null,
+        leftItem: null,
+        subMenu: null,
+        quickSwitcherLabel: `Open ${(0, exports.getGitSourceName)(window.remotion_gitSource)} repo`,
+    };
+};
+exports.getGitMenuItem = getGitMenuItem;

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

@@ -21,6 +21,7 @@ const modals_1 = require("../state/modals");
 const preview_size_1 = require("../state/preview-size");
 const sidebar_1 = require("../state/sidebar");
 const client_id_1 = require("./client-id");
+const get_git_menu_item_1 = require("./get-git-menu-item");
 const open_in_editor_1 = require("./open-in-editor");
 const pick_color_1 = require("./pick-color");
 const use_keybinding_1 = require("./use-keybinding");
@@ -136,6 +137,7 @@ const getFileMenu = ({ readOnlyStudio, closeMenu, setSelectedModal, previewServe
                 quickSwitcherLabel: 'Open in editor...',
             }
             : null,
+        (0, get_git_menu_item_1.getGitMenuItem)(),
     ].filter(no_react_1.NoReactInternals.truthy);
     if (items.length === 0) {
         return null;

package/dist/index.d.ts

@@ -1,2 +1,2 @@
-export type { RenderDefaults } from '@remotion/studio-shared';
+export type { GitSource, RenderDefaults } from '@remotion/studio-shared';
 export { Studio } from './Studio';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remotion/studio",
-  "version": "4.0.102",
+  "version": "4.0.103",
   "description": "Remotion Editor",
   "main": "dist",
   "sideEffects": false,
@@ -18,11 +18,11 @@
     "memfs": "3.4.3",
     "source-map": "0.7.3",
     "open": "^8.4.2",
-    "remotion": "4.0.102",
-    "@remotion/player": "4.0.102",
-    "@remotion/renderer": "4.0.102",
-    "@remotion/media-utils": "4.0.102",
-    "@remotion/studio-shared": "4.0.102"
+    "remotion": "4.0.103",
+    "@remotion/player": "4.0.103",
+    "@remotion/media-utils": "4.0.103",
+    "@remotion/renderer": "4.0.103",
+    "@remotion/studio-shared": "4.0.103"
   },
   "devDependencies": {
     "react": "18.2.0",
@@ -40,7 +40,7 @@
     "prettier-plugin-organize-imports": "3.2.4",
     "vitest": "0.31.1",
     "zod": "^3.22.3",
-    "@remotion/zod-types": "4.0.102"
+    "@remotion/zod-types": "4.0.103"
   },
   "publishConfig": {
     "access": "public"