@remotion/studio 4.0.517 → 4.0.519

package/dist/components/InlineCaptionInspector.js

@@ -11,6 +11,7 @@ const serializeCaptions = (captions) => {
     return JSON.stringify(captions);
 };
 const getCaptionPatches = ({ previous, next, }) => {
+    var _a;
     if (previous.length !== next.length) {
         return null;
     }
@@ -20,11 +21,21 @@ const getCaptionPatches = ({ previous, next, }) => {
         if (!after) {
             return null;
         }
+        const changes = {};
         if (before.text !== after.text) {
+            changes.text = after.text;
+        }
+        if (Boolean(before.pageBreakAfter) !== Boolean(after.pageBreakAfter)) {
+            changes.pageBreakAfter = Boolean(after.pageBreakAfter);
+        }
+        if (Object.keys(changes).length > 0) {
             patches.push({
                 index,
-                before,
-                changes: { text: after.text },
+                before: {
+                    ...before,
+                    pageBreakAfter: (_a = before.pageBreakAfter) !== null && _a !== void 0 ? _a : null,
+                },
+                changes,
             });
         }
     }

package/dist/components/InspectorOpenInEditor.js

@@ -6,14 +6,16 @@ const react_1 = require("react");
 const browser_studio_operations_1 = require("../helpers/browser-studio-operations");
 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 caret_1 = require("../icons/caret");
 const editor_1 = require("../icons/editor");
-const modals_1 = require("../state/modals");
+const github_1 = require("../icons/github");
 const get_open_in_menu_items_1 = require("./get-open-in-menu-items");
 const NotificationCenter_1 = require("./Notifications/NotificationCenter");
 const actions_1 = require("./RenderQueue/actions");
 const SegmentedButton_1 = require("./SegmentedButton");
+const use_configure_default_apps_1 = require("./use-configure-default-apps");
 const use_default_editor_info_1 = require("./use-default-editor-info");
 const mainSegmentStyle = {
     columnGap: 4,
@@ -28,9 +30,11 @@ const dropdownSegmentStyle = {
 const editorButtonIconSize = 18;
 const InspectorOpenInEditor = ({ contextForAgents = null, label, location, locationType }) => {
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
-    const { setSelectedModal } = (0, react_1.useContext)(modals_1.SetSelectedModalContext);
+    const configureDefaultApps = (0, use_configure_default_apps_1.useConfigureDefaultApps)();
     const { canConfigureApps, canOpenInEditor, defaultEditorId, defaultEditorName, editorInfo, } = (0, use_default_editor_info_1.useEditorOpening)(previewServerState.type === 'connected');
     const codingAgentInfo = (0, use_default_editor_info_1.useDefaultCodingAgentInfo)(canConfigureApps);
+    const canOpenInGitHub = (0, get_git_menu_item_1.hasReadOnlyGitSource)();
+    const defaultActionIsGitHub = !canOpenInEditor && canOpenInGitHub;
     const openWithEditor = (0, react_1.useCallback)(async (editorId) => {
         if (!location) {
             return;
@@ -53,35 +57,36 @@ const InspectorOpenInEditor = ({ contextForAgents = null, label, location, locat
             (0, NotificationCenter_1.showNotification)(err.message, 2000);
         }
     }, [contextForAgents]);
-    const editorName = defaultEditorName !== null && defaultEditorName !== void 0 ? defaultEditorName : 'default editor';
-    const canOpenDefault = location !== null && canOpenInEditor;
+    const defaultAppName = defaultActionIsGitHub
+        ? 'GitHub'
+        : (defaultEditorName !== null && defaultEditorName !== void 0 ? defaultEditorName : 'default editor');
+    const canOpenDefault = location !== null && (canOpenInEditor || canOpenInGitHub);
     const onOpenDefault = (0, react_1.useCallback)((event) => {
         event.stopPropagation();
-        if (defaultEditorId) {
+        if (defaultActionIsGitHub) {
+            (0, get_git_menu_item_1.openGitSource)({ folder: locationType === 'folder', location });
+        }
+        else if (defaultEditorId) {
             openWithEditor(defaultEditorId).catch(() => undefined);
         }
-    }, [defaultEditorId, openWithEditor]);
+    }, [
+        defaultActionIsGitHub,
+        defaultEditorId,
+        location,
+        locationType,
+        openWithEditor,
+    ]);
     const menuItems = (0, react_1.useMemo)(() => {
-        return (0, get_open_in_menu_items_1.getOpenInMenuItems)({
+        const items = (0, get_open_in_menu_items_1.getOpenInMenuItems)({
             codingAgentInfo,
-            editorDisabled: location === null,
+            editorDisabled: location === null || !canOpenInEditor,
             editorInfo,
             excludeCodingAgentId: null,
             excludeEditorId: defaultEditorId,
-            fileManagerDisabled: !(location === null || location === void 0 ? void 0 : location.source),
+            fileManagerDisabled: !(location === null || location === void 0 ? void 0 : location.source) || previewServerState.type !== 'connected',
             folder: locationType === 'folder',
             location,
-            onConfigureApps: canConfigureApps
-                ? () => {
-                    var _a;
-                    var _b;
-                    setSelectedModal({
-                        type: 'settings',
-                        initialTab: 'apps',
-                        initialPublicLicenseKey: (_b = (_a = window.remotion_renderDefaults) === null || _a === void 0 ? void 0 : _a.publicLicenseKey) !== null && _b !== void 0 ? _b : null,
-                    });
-                }
-                : null,
+            onConfigureApps: configureDefaultApps,
             onOpenInCodingAgent: (codingAgentId, codingAgentName) => {
                 openWithCodingAgent(codingAgentId, codingAgentName).catch(() => undefined);
             },
@@ -122,34 +127,40 @@ const InspectorOpenInEditor = ({ contextForAgents = null, label, location, locat
                 });
             },
         });
+        return defaultActionIsGitHub
+            ? items.filter((item) => item.id !== 'open-in-github')
+            : items;
     }, [
         codingAgentInfo,
-        canConfigureApps,
+        canOpenInEditor,
+        configureDefaultApps,
+        defaultActionIsGitHub,
         defaultEditorId,
         editorInfo,
         location,
         locationType,
         openWithCodingAgent,
         openWithEditor,
-        setSelectedModal,
+        previewServerState.type,
     ]);
     const segments = (0, react_1.useMemo)(() => {
-        return [
+        const result = [
             {
-                ariaLabel: `Open in ${editorName}`,
+                ariaLabel: `Open in ${defaultAppName}`,
                 buttonId: null,
                 disabled: !canOpenDefault,
                 idleColor: colors_1.LIGHT_TEXT,
                 onClick: onOpenDefault,
                 onPointerDown: null,
-                renderContent: () => (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [label, jsx_runtime_1.jsx(editor_1.EditorIcon, { editorId: defaultEditorId, size: editorButtonIconSize })
-                    ] })),
+                renderContent: () => (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [label, defaultActionIsGitHub ? (jsx_runtime_1.jsx(github_1.GitHubIcon, { size: editorButtonIconSize })) : (jsx_runtime_1.jsx(editor_1.EditorIcon, { editorId: defaultEditorId, size: editorButtonIconSize }))] })),
                 segmentId: 'default-editor',
                 style: mainSegmentStyle,
-                title: `Open in ${editorName}`,
+                title: `Open in ${defaultAppName}`,
                 type: 'action',
             },
-            {
+        ];
+        if (menuItems.length > 0) {
+            result.push({
                 ariaLabel: 'Open in another app',
                 buttonId: null,
                 disabled: false,
@@ -163,18 +174,22 @@ const InspectorOpenInEditor = ({ contextForAgents = null, label, location, locat
                 title: 'Open in another app',
                 type: 'menu',
                 values: menuItems,
-            },
-        ];
+            });
+        }
+        return result;
     }, [
         canOpenDefault,
+        defaultActionIsGitHub,
+        defaultAppName,
         defaultEditorId,
-        editorName,
         label,
         menuItems,
         onOpenDefault,
     ]);
-    if (previewServerState.type !== 'connected' ||
-        (0, browser_studio_operations_1.getBrowserStudioOperations)() !== null) {
+    if ((0, browser_studio_operations_1.getBrowserStudioOperations)() !== null) {
+        return null;
+    }
+    if (previewServerState.type !== 'connected' && !canOpenInGitHub) {
         return null;
     }
     return jsx_runtime_1.jsx(SegmentedButton_1.SegmentedButton, { segments: segments, style: null, title: null });

package/dist/components/InspectorPanel/CompositionInspector.js

@@ -5,6 +5,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const browser_studio_operations_1 = require("../../helpers/browser-studio-operations");
 const client_id_1 = require("../../helpers/client-id");
+const colors_1 = require("../../helpers/colors");
 const download_blob_1 = require("../../helpers/download-blob");
 const interactivity_enabled_1 = require("../../helpers/interactivity-enabled");
 const cloud_download_1 = require("../../icons/cloud-download");
@@ -12,8 +13,10 @@ const frame_1 = require("../../icons/frame");
 const solid_1 = require("../../icons/solid");
 const video_1 = require("../../icons/video");
 const VisualControls_1 = require("../../visual-controls/VisualControls");
+const ConfirmationDialog_1 = require("../ConfirmationDialog");
 const DefaultPropsEditor_1 = require("../DefaultPropsEditor");
 const get_zod_if_possible_1 = require("../get-zod-if-possible");
+const LicenseExplanation_1 = require("../LicenseExplanation");
 const is_menu_item_1 = require("../Menu/is-menu-item");
 const NotificationCenter_1 = require("../Notifications/NotificationCenter");
 const ObserveDefaultPropsContext_1 = require("../ObserveDefaultPropsContext");
@@ -33,15 +36,42 @@ const actionIconStyle = {
     height: 18,
     width: 18,
 };
+const downloadLicenseAgreement = {
+    color: colors_1.LIGHT_TEXT,
+    fontFamily: 'sans-serif',
+    fontSize: 14,
+    lineHeight: 1.5,
+    marginBottom: 0,
+    marginTop: 20,
+};
+const downloadLicenseLink = {
+    color: colors_1.LIGHT_TEXT,
+    fontFamily: 'sans-serif',
+    fontSize: 14,
+    lineHeight: '21px',
+};
 const CompositionActions = () => {
     var _a;
     var _b;
     const { canInsertAsset, canInsertComposition, canInsertSolid, canShowInsertAsset, canShowInsertComposition, canShowInsertSolid, insertAsset, insertComposition, insertSolid, } = (0, use_composition_actions_1.useCompositionActions)();
     const downloadProject = (_b = (_a = (0, browser_studio_operations_1.getBrowserStudioOperations)()) === null || _a === void 0 ? void 0 : _a.downloadProject) !== null && _b !== void 0 ? _b : null;
+    const confirm = (0, ConfirmationDialog_1.useConfirmationDialog)();
     const onDownloadProject = (0, react_1.useCallback)(async () => {
         if (downloadProject === null) {
             return;
         }
+        const accepted = await confirm({
+            title: 'Download project',
+            message: (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                    jsx_runtime_1.jsx(LicenseExplanation_1.LicenseExplanation, {}), jsx_runtime_1.jsxs("p", { style: downloadLicenseAgreement, children: ["By downloading this project, you agree to comply with the", ' ', jsx_runtime_1.jsx("a", { href: "https://remotion.dev/license", rel: "noopener noreferrer", style: downloadLicenseLink, target: "_blank", children: "license" }),
+                            "."] })
+                ] })),
+            confirmLabel: 'Accept and download',
+            cancelLabel: 'Cancel',
+        });
+        if (!accepted) {
+            return;
+        }
         try {
             const { data, fileName } = await downloadProject();
             const arrayBuffer = data.buffer.slice(data.byteOffset, data.byteOffset + data.byteLength);
@@ -50,14 +80,16 @@ const CompositionActions = () => {
         catch (error) {
             (0, NotificationCenter_1.showNotification)(`Could not download project: ${error instanceof Error ? error.message : String(error)}`, 2000);
         }
-    }, [downloadProject]);
+    }, [confirm, downloadProject]);
     if (!canShowInsertAsset &&
         !canShowInsertComposition &&
         !canShowInsertSolid &&
         downloadProject === null) {
         return null;
     }
-    return (jsx_runtime_1.jsxs(common_1.InspectorQuickActionsSection, { children: [canShowInsertSolid ? (jsx_runtime_1.jsx(common_1.InspectorQuickAction, { disabled: !canInsertSolid, onClick: insertSolid, renderIcon: (color) => (jsx_runtime_1.jsx(solid_1.SolidIcon, { color: color, style: actionIconStyle })), children: "Add Solid" })) : null, canShowInsertAsset ? (jsx_runtime_1.jsx(common_1.InspectorQuickAction, { disabled: !canInsertAsset, onClick: insertAsset, renderIcon: (color) => (jsx_runtime_1.jsx(frame_1.PicIcon, { color: color, style: actionIconStyle })), children: "Add asset..." })) : null, canShowInsertComposition ? (jsx_runtime_1.jsx(common_1.InspectorQuickAction, { disabled: !canInsertComposition, onClick: insertComposition, renderIcon: (color) => (jsx_runtime_1.jsx(video_1.FilmIcon, { color: color, style: actionIconStyle })), children: "Add composition..." })) : null, canShowInsertAsset ? jsx_runtime_1.jsx(ElementLibraryButton_1.ElementLibraryButton, {}) : null, downloadProject ? (jsx_runtime_1.jsx(common_1.InspectorQuickAction, { disabled: false, onClick: onDownloadProject, renderIcon: (color) => (jsx_runtime_1.jsx(cloud_download_1.CloudDownloadIcon, { color: color, style: actionIconStyle })), children: "Download project" })) : null] }));
+    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+            jsx_runtime_1.jsx(common_1.InspectorSectionHeader, { children: "Actions" }), jsx_runtime_1.jsxs(common_1.InspectorQuickActionsSection, { children: [canShowInsertSolid ? (jsx_runtime_1.jsx(common_1.InspectorQuickAction, { disabled: !canInsertSolid, onClick: insertSolid, renderIcon: (color) => (jsx_runtime_1.jsx(solid_1.SolidIcon, { color: color, style: actionIconStyle })), children: "Add Solid" })) : null, canShowInsertAsset ? (jsx_runtime_1.jsx(common_1.InspectorQuickAction, { disabled: !canInsertAsset, onClick: insertAsset, renderIcon: (color) => (jsx_runtime_1.jsx(frame_1.PicIcon, { color: color, style: actionIconStyle })), children: "Add asset..." })) : null, canShowInsertComposition ? (jsx_runtime_1.jsx(common_1.InspectorQuickAction, { disabled: !canInsertComposition, onClick: insertComposition, renderIcon: (color) => (jsx_runtime_1.jsx(video_1.FilmIcon, { color: color, style: actionIconStyle })), children: "Add composition..." })) : null, canShowInsertAsset ? jsx_runtime_1.jsx(ElementLibraryButton_1.ElementLibraryButton, {}) : null, downloadProject ? (jsx_runtime_1.jsx(common_1.InspectorQuickAction, { disabled: false, onClick: onDownloadProject, renderIcon: (color) => (jsx_runtime_1.jsx(cloud_download_1.CloudDownloadIcon, { color: color, style: actionIconStyle })), children: "Download project" })) : null] })
+        ] }));
 };
 const CompositionDefaultPropsSection = ({ composition, currentDefaultProps, readOnlyStudio, setDefaultProps }) => {
     var _a;
@@ -139,7 +171,7 @@ const CompositionInspector = ({ composition, currentDefaultProps, readOnlyStudio
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     return (jsx_runtime_1.jsxs("div", { style: styles_1.scrollableContainer, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: [
             jsx_runtime_1.jsxs("div", { style: styles_1.inspectorOverviewSection, children: [
-                    jsx_runtime_1.jsx(CompositionInspectorHeader_1.CompositionInspectorHeader, {}), jsx_runtime_1.jsx(CompositionMetadata_1.CompositionMetadata, { compositionId: composition.id, disabled: readOnlyStudio || previewServerState.type !== 'connected', stack: composition.stack })
+                    jsx_runtime_1.jsx(CompositionInspectorHeader_1.CompositionInspectorHeader, {}), jsx_runtime_1.jsx(common_1.InspectorSectionHeader, { children: "Metadata" }), jsx_runtime_1.jsx(CompositionMetadata_1.CompositionMetadata, { compositionId: composition.id, disabled: readOnlyStudio || previewServerState.type !== 'connected', stack: composition.stack })
                 ] }), jsx_runtime_1.jsx(CompositionDefaultPropsSection, { composition: composition, currentDefaultProps: currentDefaultProps, readOnlyStudio: readOnlyStudio, setDefaultProps: setDefaultProps }), jsx_runtime_1.jsx(CompositionVisualControlsSection, { readOnlyStudio: readOnlyStudio }), jsx_runtime_1.jsx(CompositionActions, {})
         ] }));
 };

package/dist/components/InspectorPanel/CompositionInspectorHeader.js

@@ -5,6 +5,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
 const client_id_1 = require("../../helpers/client-id");
+const get_git_menu_item_1 = require("../../helpers/get-git-menu-item");
 const is_composition_still_1 = require("../../helpers/is-composition-still");
 const open_in_editor_1 = require("../../helpers/open-in-editor");
 const react_2 = require("../../icons/react");
@@ -37,6 +38,7 @@ const CompositionInspectorHeader = () => {
     const { compositions } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const { canOpenInEditor, defaultEditorId } = (0, use_default_editor_info_1.useEditorOpening)(previewServerState.type === 'connected');
+    const canOpenInGitHub = (0, get_git_menu_item_1.hasReadOnlyGitSource)();
     const currentComposition = (0, react_1.useMemo)(() => {
         var _a;
         if (!video) {
@@ -72,22 +74,27 @@ const CompositionInspectorHeader = () => {
             compositionId,
         });
     }, [compositionFile, compositionId]);
-    const openFileLocation = (0, react_1.useCallback)(() => {
-        if (!validatedLocation || !defaultEditorId || !canOpenInEditor) {
+    const openSourceLocation = (0, react_1.useCallback)((location) => {
+        if (canOpenInEditor && defaultEditorId) {
+            (0, open_in_editor_1.openOriginalPositionInEditor)(location, defaultEditorId).catch((err) => {
+                (0, NotificationCenter_1.showNotification)(err.message, 2000);
+            });
             return;
         }
-        (0, open_in_editor_1.openOriginalPositionInEditor)(validatedLocation, defaultEditorId).catch((err) => {
-            (0, NotificationCenter_1.showNotification)(err.message, 2000);
-        });
-    }, [canOpenInEditor, defaultEditorId, validatedLocation]);
+        if (canOpenInGitHub) {
+            (0, get_git_menu_item_1.openGitSource)({ folder: false, location });
+        }
+    }, [canOpenInEditor, canOpenInGitHub, defaultEditorId]);
+    const openFileLocation = (0, react_1.useCallback)(() => {
+        if (validatedLocation) {
+            openSourceLocation(validatedLocation);
+        }
+    }, [openSourceLocation, validatedLocation]);
     const openComponentLocation = (0, react_1.useCallback)(() => {
-        if (!componentLocation || !defaultEditorId || !canOpenInEditor) {
-            return;
+        if (componentLocation) {
+            openSourceLocation(componentLocation);
         }
-        (0, open_in_editor_1.openOriginalPositionInEditor)(componentLocation, defaultEditorId).catch((err) => {
-            (0, NotificationCenter_1.showNotification)(err.message, 2000);
-        });
-    }, [canOpenInEditor, componentLocation, defaultEditorId]);
+    }, [componentLocation, openSourceLocation]);
     const renderCompositionIcon = (0, react_1.useCallback)((color) => {
         if (!video) {
             return null;
@@ -95,8 +102,9 @@ const CompositionInspectorHeader = () => {
         return (0, is_composition_still_1.isCompositionStill)(video) ? (jsx_runtime_1.jsx(still_1.StillIcon, { color: color, style: sourceLocationIconStyle })) : (jsx_runtime_1.jsx(video_1.FilmIcon, { color: color, style: sourceLocationIconStyle }));
     }, [video]);
     return (jsx_runtime_1.jsx(InspectorInfoHeader_1.InspectorInfoHeader, { minHeight: COMPOSITION_INSPECTOR_HEADER_HEIGHT, padding: "4px 0", children: video ? (jsx_runtime_1.jsxs(InspectorLocationCopy_1.InspectorLocationCopy, { location: validatedLocation, name: video.id, openInEditorLocation: componentLocation, children: [
-                jsx_runtime_1.jsx(InlineCompositionName_1.InlineCompositionName, { compositionId: video.id, stack: (_e = currentComposition === null || currentComposition === void 0 ? void 0 : currentComposition.stack) !== null && _e !== void 0 ? _e : null, compositions: compositions }, video.id), jsx_runtime_1.jsx(InspectorSourceLocation_1.InspectorSourceLocation, { location: validatedLocation, canOpen: validatedLocation !== null && canOpenInEditor, onOpen: openFileLocation, renderIcon: renderCompositionIcon, size: "quick-action" }), compositionComponentInfo === null &&
+                jsx_runtime_1.jsx(InlineCompositionName_1.InlineCompositionName, { compositionId: video.id, stack: (_e = currentComposition === null || currentComposition === void 0 ? void 0 : currentComposition.stack) !== null && _e !== void 0 ? _e : null, compositions: compositions }, video.id), jsx_runtime_1.jsx(InspectorSourceLocation_1.InspectorSourceLocation, { location: validatedLocation, canOpen: validatedLocation !== null && (canOpenInEditor || canOpenInGitHub), onOpen: openFileLocation, renderIcon: renderCompositionIcon, size: "quick-action" }), compositionComponentInfo === null &&
                     compositionFile !== null &&
-                    compositionId !== null ? (jsx_runtime_1.jsx("div", { "aria-hidden": true, style: componentLocationPlaceholder })) : (jsx_runtime_1.jsx(InspectorSourceLocation_1.InspectorSourceLocation, { location: componentLocation, canOpen: componentLocation !== null && canOpenInEditor, onOpen: openComponentLocation, renderIcon: renderReactIcon, size: "quick-action" }))] })) : null }));
+                    compositionId !== null ? (jsx_runtime_1.jsx("div", { "aria-hidden": true, style: componentLocationPlaceholder })) : (jsx_runtime_1.jsx(InspectorSourceLocation_1.InspectorSourceLocation, { location: componentLocation, canOpen: componentLocation !== null &&
+                        (canOpenInEditor || canOpenInGitHub), onOpen: openComponentLocation, renderIcon: renderReactIcon, size: "quick-action" }))] })) : null }));
 };
 exports.CompositionInspectorHeader = CompositionInspectorHeader;

package/dist/components/InspectorPanel/ConnectedCompositionsSection.js

@@ -36,7 +36,9 @@ const useConnectedCompositions = ({ track, }) => {
 };
 exports.useConnectedCompositions = useConnectedCompositions;
 const ConnectedCompositionsSection = ({ connectedCompositions }) => {
-    return (jsx_runtime_1.jsx("div", { style: compositionListStyle, children: connectedCompositions.map((composition) => (jsx_runtime_1.jsx(ConnectedCompositionRow, { composition: composition }, composition.id))) }));
+    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+            jsx_runtime_1.jsx(common_1.InspectorSectionHeader, { children: "Connected compositions" }), jsx_runtime_1.jsx("div", { style: compositionListStyle, children: connectedCompositions.map((composition) => (jsx_runtime_1.jsx(ConnectedCompositionRow, { composition: composition }, composition.id))) })
+        ] }));
 };
 exports.ConnectedCompositionsSection = ConnectedCompositionsSection;
 const ConnectedCompositionRow = ({ composition }) => {

package/dist/components/InspectorPanel/SequenceInspectorHeader.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import type { CodePosition } from '../../error-overlay/react-overlay/utils/get-source-map';
 import type { TimelineTrackData } from '../../helpers/get-timeline-sequence-sort-key';
 type SequenceInspectorSourceLocation = {
-    readonly canOpenInEditor: boolean;
+    readonly canOpen: boolean;
     readonly openFileLocation: () => void;
     readonly validatedLocation: CodePosition | null;
 };

package/dist/components/InspectorPanel/SequenceInspectorHeader.js

@@ -5,6 +5,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 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 react_2 = require("../../icons/react");
 const InlineEditableTitle_1 = require("../InlineEditableTitle");
 const InspectorInfoHeader_1 = require("../InspectorInfoHeader");
@@ -48,6 +49,7 @@ const externalTabIndicatorStyle = {
 };
 const useSequenceInspectorSourceLocation = (sequence) => {
     const { canOpenInEditor, openInEditor, originalLocation } = (0, use_open_sequence_in_apps_1.useOpenSequenceInApps)(sequence);
+    const canOpenInGitHub = (0, get_git_menu_item_1.hasReadOnlyGitSource)();
     const validatedLocation = (0, react_1.useMemo)(() => {
         var _a;
         if (!originalLocation ||
@@ -62,13 +64,16 @@ const useSequenceInspectorSourceLocation = (sequence) => {
         };
     }, [originalLocation]);
     const openFileLocation = (0, react_1.useCallback)(() => {
-        if (!canOpenInEditor) {
+        if (canOpenInEditor) {
+            openInEditor(null);
             return;
         }
-        openInEditor(null);
-    }, [canOpenInEditor, openInEditor]);
+        if (canOpenInGitHub && validatedLocation) {
+            (0, get_git_menu_item_1.openGitSource)({ folder: false, location: validatedLocation });
+        }
+    }, [canOpenInEditor, canOpenInGitHub, openInEditor, validatedLocation]);
     return {
-        canOpenInEditor,
+        canOpen: validatedLocation !== null && (canOpenInEditor || canOpenInGitHub),
         openFileLocation,
         validatedLocation,
     };
@@ -105,7 +110,7 @@ const SequenceInspectorHeader = ({ sourceLocation, track }) => {
     }, [saveName]);
     return (jsx_runtime_1.jsx(InspectorInfoHeader_1.InspectorInfoHeader, { contentSized: true, padding: "4px 0", children: jsx_runtime_1.jsxs(InspectorLocationCopy_1.InspectorLocationCopy, { location: sourceLocation.validatedLocation, name: componentName !== null && componentName !== void 0 ? componentName : null, openInEditorLocation: sourceLocation.validatedLocation, children: [
                 jsx_runtime_1.jsx(InlineEditableTitle_1.InlineEditableTitle, { value: sequenceDisplayName, canRename: canRename, onCommit: onRename, size: "inspector" }), documentationLink ? (jsx_runtime_1.jsxs(common_1.InspectorQuickAction, { disabled: false, style: defaultCursor, title: "Open component docs", onClick: openDocumentationLink, children: [componentName, jsx_runtime_1.jsx("svg", { "aria-hidden": "true", viewBox: "0 0 16 16", style: externalTabIndicatorStyle, children: jsx_runtime_1.jsx("path", { d: "M4 12 12 4M6 4h6v6", fill: "none", stroke: colors_1.CURRENT_COLOR, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5" }) })
-                    ] })) : (jsx_runtime_1.jsx("div", { style: subtitleStyle, children: componentName })), jsx_runtime_1.jsx(InspectorSourceLocation_1.InspectorSourceLocation, { location: sourceLocation.validatedLocation, canOpen: sourceLocation.canOpenInEditor, onOpen: sourceLocation.openFileLocation, renderIcon: renderReactIcon, size: "quick-action" })
+                    ] })) : (jsx_runtime_1.jsx("div", { style: subtitleStyle, children: componentName })), jsx_runtime_1.jsx(InspectorSourceLocation_1.InspectorSourceLocation, { location: sourceLocation.validatedLocation, canOpen: sourceLocation.canOpen, onOpen: sourceLocation.openFileLocation, renderIcon: renderReactIcon, size: "quick-action" })
             ] }) }));
 };
 exports.SequenceInspectorHeader = SequenceInspectorHeader;

package/dist/components/InspectorPanel/SequenceSelectionInspector.js

@@ -168,7 +168,7 @@ const SequenceExpandedInspector = ({ track, readOnlyStudio }) => {
         return jsx_runtime_1.jsx(common_1.InspectorMessage, { children: "Sequence inspector unavailable" });
     }
     return (jsx_runtime_1.jsxs("div", { style: styles_1.selectedContainer, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, onPointerDown: selectSequenceOnInspectorPointerDown, children: [
-            jsx_runtime_1.jsx(SequenceInspectorHeader_1.SequenceInspectorHeader, { sourceLocation: sourceLocation, track: track }, stackKey !== null && stackKey !== void 0 ? stackKey : track.sequence.id), jsx_runtime_1.jsx(SequenceInspectorHeader_1.SequenceInspectorDuplicationSection, { track: track }), connectedCompositions.length > 0 ? (jsx_runtime_1.jsx(ConnectedCompositionsSection_1.ConnectedCompositionsSection, { connectedCompositions: connectedCompositions })) : null, validatedLocation ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [jsx_runtime_1.jsx(InspectorSequenceSection_1.InspectorSequenceSection, { sequence: track.sequence, readOnlyStudio: readOnlyStudio, validatedLocation: validatedLocation, nodePathInfo: track.nodePathInfo, keyframeDisplayOffset: track.keyframeDisplayOffset, renderTransformControls: () => jsx_runtime_1.jsx(AlignmentControls_1.AlignmentControls, { track: track }) }), jsx_runtime_1.jsxs(common_1.InspectorQuickActionsSection, { children: [
+            jsx_runtime_1.jsx(SequenceInspectorHeader_1.SequenceInspectorHeader, { sourceLocation: sourceLocation, track: track }, stackKey !== null && stackKey !== void 0 ? stackKey : track.sequence.id), jsx_runtime_1.jsx(SequenceInspectorHeader_1.SequenceInspectorDuplicationSection, { track: track }), connectedCompositions.length > 0 ? (jsx_runtime_1.jsx(ConnectedCompositionsSection_1.ConnectedCompositionsSection, { connectedCompositions: connectedCompositions })) : null, validatedLocation ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [jsx_runtime_1.jsx(InspectorSequenceSection_1.InspectorSequenceSection, { sequence: track.sequence, readOnlyStudio: readOnlyStudio, validatedLocation: validatedLocation, nodePathInfo: track.nodePathInfo, keyframeDisplayOffset: track.keyframeDisplayOffset, renderTransformControls: () => jsx_runtime_1.jsx(AlignmentControls_1.AlignmentControls, { track: track }) }), jsx_runtime_1.jsx(common_1.InspectorSectionHeader, { children: "Actions" }), jsx_runtime_1.jsxs(common_1.InspectorQuickActionsSection, { children: [
                             jsx_runtime_1.jsx(SplitSequenceQuickAction, { selection: sequenceSelection, track: track }), jsx_runtime_1.jsx(SequenceSourceQuickActions, { selection: sequenceSelection, track: track, validatedSource: validatedLocation.source })
                         ] })
                 ] })) : (jsx_runtime_1.jsx(common_1.InspectorMessage, { children: "Source controls unavailable" }))] }));

package/dist/components/InspectorPanel/common.js

@@ -76,6 +76,7 @@ const inlineLabelText = {
     minWidth: 0,
     overflow: 'hidden',
     textOverflow: 'ellipsis',
+    userSelect: 'none',
     whiteSpace: 'nowrap',
 };
 const inlineLabelIcon = {

package/dist/components/InspectorPanel/styles.js

@@ -169,6 +169,7 @@ exports.detailLabel = {
     minWidth: 0,
     overflow: 'hidden',
     textOverflow: 'ellipsis',
+    userSelect: 'none',
     whiteSpace: 'nowrap',
 };
 exports.detailValue = {

package/dist/components/InspectorSequenceSection.js

@@ -21,6 +21,7 @@ const InlineCaptionInspector_1 = require("./InlineCaptionInspector");
 const CollapsibleInspectorSectionHeader_1 = require("./InspectorPanel/CollapsibleInspectorSectionHeader");
 const common_1 = require("./InspectorPanel/common");
 const inspector_section_collapse_1 = require("./InspectorPanel/inspector-section-collapse");
+const styles_1 = require("./InspectorPanel/styles");
 const asset_search_1 = require("./QuickSwitcher/asset-search");
 const border_radius_representation_1 = require("./Timeline/border-radius-representation");
 const save_sequence_prop_1 = require("./Timeline/save-sequence-prop");
@@ -51,6 +52,10 @@ const plusIcon = {
     width: 15,
     height: 15,
 };
+const effectsHeaderTitle = {
+    ...styles_1.sectionHeaderTitle,
+    flexShrink: 1,
+};
 const borderRadiusToggleIcon = {
     flexShrink: 0,
     height: 15,
@@ -411,7 +416,6 @@ const InspectorSequenceSection = ({ sequence, readOnlyStudio, validatedLocation,
         });
     }, [isAdditionalSectionExpanded, nodePathInfo]);
     const captionsExpanded = isAdditionalSectionExpanded('captions');
-    const effectsExpanded = isAdditionalSectionExpanded('effects');
     const visibleControlRows = controlGroups.flatMap((group) => {
         return isControlGroupExpanded(group) ? group.rows : [];
     });
@@ -495,7 +499,8 @@ const InspectorSequenceSection = ({ sequence, readOnlyStudio, validatedLocation,
             : show3DTransformControls
                 ? 'Hide 3D transform controls'
                 : 'Show 3D transform controls', hoveredColor: show3DTransformControls ? colors_1.BLUE : undefined, unhoveredColor: show3DTransformControls ? colors_1.BLUE : colors_1.LIGHT_TEXT, renderAction: (color) => (jsx_runtime_1.jsx(cube_1.CubeIcon, { color: color, style: transform3DToggleIcon })) }));
-    const effectsHeader = (jsx_runtime_1.jsx(CollapsibleInspectorSectionHeader_1.CollapsibleInspectorSectionHeader, { action: jsx_runtime_1.jsx(InlineAction_1.InlineAction, { variant: null, disabled: !canAddEffect, onClick: onAddEffect, title: canAddEffect ? 'Add effect' : undefined, renderAction: (color) => jsx_runtime_1.jsx(plus_1.Plus, { color: color, style: plusIcon }) }), expanded: effectsExpanded, label: "Effects", onToggle: () => toggleAdditionalSection('effects') }));
+    const effectsHeader = (jsx_runtime_1.jsxs("div", { style: styles_1.sectionHeaderRow, children: [
+            jsx_runtime_1.jsx("div", { style: effectsHeaderTitle, children: "Effects" }), jsx_runtime_1.jsx(InlineAction_1.InlineAction, { variant: null, disabled: !canAddEffect, onClick: onAddEffect, title: canAddEffect ? 'Add effect' : undefined, renderAction: (color) => jsx_runtime_1.jsx(plus_1.Plus, { color: color, style: plusIcon }) })] }));
     const renderRow = ({ node, depth }) => {
         return (jsx_runtime_1.jsx(TimelineRowLayoutContext_1.TimelineRowLayoutContext.Provider, { value: TimelineRowLayoutContext_1.INSPECTOR_TIMELINE_ROW_LAYOUT, children: jsx_runtime_1.jsx(TimelineExpandedRow_1.TimelineExpandedRow, { node: node, depth: depth, nestedDepth: 0, rowDepthBase: 0, getIsExpanded: getIsExpanded, toggleTrack: toggleTrack, validatedLocation: validatedLocation, nodePath: nodePathInfo.sequenceSubscriptionKey, schema: schema, keyframeDisplayOffset: keyframeDisplayOffset, keyframeControlsMode: "inspector" }) }, JSON.stringify(node.nodePathInfo)));
     };
@@ -514,7 +519,7 @@ const InspectorSequenceSection = ({ sequence, readOnlyStudio, validatedLocation,
         inlineCaptions === null) {
         return (jsx_runtime_1.jsx("div", { style: container, children: jsx_runtime_1.jsx(common_1.InspectorSection, { header: "Controls", children: jsx_runtime_1.jsx("div", { style: emptyState, children: "No schema" }) }) }));
     }
-    return (jsx_runtime_1.jsx(TimelineAssetField_1.AssetSelectionContext.Provider, { value: assetSelectionContextValue, children: jsx_runtime_1.jsxs("div", { style: container, children: [controlRows.length > 0 ? (jsx_runtime_1.jsx(TimelineSelection_1.TimelineSelectionOrderProvider, { items: controlSelectableItems, children: controlGroupsWithoutLayout.map((group) => (jsx_runtime_1.jsx(common_1.InspectorSection, { header: renderControlGroupHeader(group), children: isControlGroupExpanded(group) ? (group.id === 'transforms' ? (jsx_runtime_1.jsxs(Transform3DModeContext_1.Transform3DModeContext.Provider, { value: show3DTransformControls, children: [renderTransformControls(), group.rows.map(renderRow)] })) : (group.rows.map(renderRow))) : null }, group.id))) })) : null, inlineCaptions ? (jsx_runtime_1.jsx(InlineCaptionInspector_1.InlineCaptionInspector, { captions: inlineCaptions, controls: sequence.controls, expanded: captionsExpanded, nodePath: nodePathInfo.sequenceSubscriptionKey, onToggle: () => toggleAdditionalSection('captions'), readOnlyStudio: readOnlyStudio, validatedLocation: validatedLocation })) : null, showEffectsSection ? (jsx_runtime_1.jsx(common_1.InspectorSection, { header: effectsHeader, children: effectsExpanded && effectRows.length > 0 ? (jsx_runtime_1.jsx(TimelineSelection_1.TimelineSelectionOrderProvider, { items: effectSelectableItems, children: effectRows.map(renderRow) })) : null })) : null, layoutGroup ? (jsx_runtime_1.jsx(TimelineSelection_1.TimelineSelectionOrderProvider, { items: controlSelectableItems, children: jsx_runtime_1.jsx(common_1.InspectorSection, { header: renderControlGroupHeader(layoutGroup), children: isControlGroupExpanded(layoutGroup)
+    return (jsx_runtime_1.jsx(TimelineAssetField_1.AssetSelectionContext.Provider, { value: assetSelectionContextValue, children: jsx_runtime_1.jsxs("div", { style: container, children: [controlRows.length > 0 ? (jsx_runtime_1.jsx(TimelineSelection_1.TimelineSelectionOrderProvider, { items: controlSelectableItems, children: controlGroupsWithoutLayout.map((group) => (jsx_runtime_1.jsx(common_1.InspectorSection, { header: renderControlGroupHeader(group), children: isControlGroupExpanded(group) ? (group.id === 'transforms' ? (jsx_runtime_1.jsxs(Transform3DModeContext_1.Transform3DModeContext.Provider, { value: show3DTransformControls, children: [renderTransformControls(), group.rows.map(renderRow)] })) : (group.rows.map(renderRow))) : null }, group.id))) })) : null, inlineCaptions ? (jsx_runtime_1.jsx(InlineCaptionInspector_1.InlineCaptionInspector, { captions: inlineCaptions, controls: sequence.controls, expanded: captionsExpanded, nodePath: nodePathInfo.sequenceSubscriptionKey, onToggle: () => toggleAdditionalSection('captions'), readOnlyStudio: readOnlyStudio, validatedLocation: validatedLocation })) : null, showEffectsSection ? (jsx_runtime_1.jsx(common_1.InspectorSection, { header: effectsHeader, children: effectRows.length > 0 ? (jsx_runtime_1.jsx(TimelineSelection_1.TimelineSelectionOrderProvider, { items: effectSelectableItems, children: effectRows.map(renderRow) })) : null })) : null, layoutGroup ? (jsx_runtime_1.jsx(TimelineSelection_1.TimelineSelectionOrderProvider, { items: controlSelectableItems, children: jsx_runtime_1.jsx(common_1.InspectorSection, { header: renderControlGroupHeader(layoutGroup), children: isControlGroupExpanded(layoutGroup)
                             ? layoutGroup.rows.map(renderRow)
                             : null }) })) : null] }) }));
 };

package/dist/components/InspectorSourceLocation.js

@@ -27,9 +27,13 @@ const sourceLocationStyle = {
     textAlign: 'left',
     textDecoration: 'none',
     textOverflow: 'ellipsis',
+    userSelect: 'none',
     whiteSpace: 'nowrap',
     width: 'fit-content',
 };
+const quickActionStyle = {
+    userSelect: 'none',
+};
 const sourceLocationLabelStyle = {
     color: 'inherit',
     display: 'block',
@@ -82,7 +86,7 @@ const InspectorSourceLocation = ({ location, canOpen, onOpen, renderIcon, size =
         return null;
     }
     if (size === 'quick-action') {
-        return (jsx_runtime_1.jsx(common_1.InspectorQuickAction, { disabled: !canOpen, onClick: onClick, renderIcon: (iconColor) => renderIcon === null || renderIcon === void 0 ? void 0 : renderIcon(iconColor), title: fileLocation !== null && fileLocation !== void 0 ? fileLocation : undefined, children: label }));
+        return (jsx_runtime_1.jsx(common_1.InspectorQuickAction, { disabled: !canOpen, onClick: onClick, renderIcon: (iconColor) => renderIcon === null || renderIcon === void 0 ? void 0 : renderIcon(iconColor), style: quickActionStyle, title: fileLocation !== null && fileLocation !== void 0 ? fileLocation : undefined, children: label }));
     }
     return (jsx_runtime_1.jsxs("button", { type: "button", style: style, title: fileLocation !== null && fileLocation !== void 0 ? fileLocation : undefined, onClick: onClick, onPointerEnter: () => setHovered(true), onPointerLeave: () => setHovered(false), children: [renderIcon ? renderIcon(color) : null, jsx_runtime_1.jsx("span", { style: sourceLocationLabelStyle, children: label })
         ] }));

package/dist/components/KnownBugs.d.ts

@@ -1,4 +1,4 @@
-import type { Bug } from './UpdateCheck';
+import type { Bug } from './UpdateStatusContext';
 export declare const KnownBugs: React.FC<{
     bugs: Bug[];
 }>;

package/dist/components/KnownBugs.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.KnownBugs = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const OpenIssueButton_1 = require("./UpdateModal/OpenIssueButton");
+const OpenIssueButton_1 = require("./OpenIssueButton");
 const container = {
     display: 'flex',
     flexDirection: 'row',

package/dist/components/LicenseExplanation.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const LicenseExplanation: React.FC;

package/dist/components/LicenseExplanation.js

@@ -0,0 +1,63 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LicenseExplanation = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const colors_1 = require("../helpers/colors");
+const description = {
+    color: colors_1.LIGHT_TEXT,
+    fontFamily: 'sans-serif',
+    fontSize: 14,
+    lineHeight: 1.5,
+    margin: 0,
+};
+const descriptionLink = {
+    color: colors_1.LIGHT_TEXT,
+    fontFamily: 'sans-serif',
+    fontSize: 14,
+    lineHeight: '21px',
+};
+const licenseExplanation = {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 12,
+};
+const licenseExplanationRow = {
+    display: 'flex',
+    alignItems: 'center',
+    gap: 12,
+};
+const people = {
+    display: 'grid',
+    gridTemplateColumns: 'repeat(4, 9px)',
+    gap: 3,
+    flexShrink: 0,
+};
+const person = {
+    display: 'block',
+    height: 24,
+    overflow: 'visible',
+    width: 9,
+};
+const PersonIcon = ({ handsUp, opacity }) => {
+    return (jsx_runtime_1.jsxs("svg", { "aria-hidden": "true", opacity: opacity, style: person, viewBox: "0 0 192 512", xmlns: "http://www.w3.org/2000/svg", children: [
+            jsx_runtime_1.jsx("path", { fill: colors_1.LIGHT_TEXT, d: "M128 64a32 32 0 1 0 -64 0 32 32 0 1 0 64 0zM32 64A64 64 0 1 1 160 64 64 64 0 1 1 32 64zm0 128l0 128 128 0 0-128-128 0zM0 160l192 0 0 192-32 0 0 160-32 0 0-160-64 0 0 160-32 0 0-160-32 0 0-192z" }), handsUp ? (jsx_runtime_1.jsx("path", { d: "M10.667 192 0 -32 M181.333 192 192 -32", fill: "none", stroke: colors_1.LIGHT_TEXT, strokeWidth: "32" })) : null] }));
+};
+const LicenseExplanation = () => {
+    return (jsx_runtime_1.jsxs("div", { style: licenseExplanation, children: [
+            jsx_runtime_1.jsxs("div", { style: licenseExplanationRow, children: [
+                    jsx_runtime_1.jsxs("div", { style: people, children: [
+                            jsx_runtime_1.jsx(PersonIcon, { handsUp: true, opacity: 1 }), jsx_runtime_1.jsx(PersonIcon, { handsUp: true, opacity: 1 }), jsx_runtime_1.jsx(PersonIcon, { handsUp: true, opacity: 1 })
+                        ] }), jsx_runtime_1.jsx("p", { style: description, children: "Remotion is free to use if you are an individual or company of 3 or less." })
+                ] }), jsx_runtime_1.jsxs("div", { style: licenseExplanationRow, children: [
+                    jsx_runtime_1.jsxs("div", { style: people, children: [
+                            jsx_runtime_1.jsx(PersonIcon, { handsUp: false, opacity: 1 }), jsx_runtime_1.jsx(PersonIcon, { handsUp: false, opacity: 1 }), jsx_runtime_1.jsx(PersonIcon, { handsUp: false, opacity: 1 }), jsx_runtime_1.jsx(PersonIcon, { handsUp: false, opacity: 1 })
+                        ] }), jsx_runtime_1.jsxs("p", { style: description, children: ["If used in an organization with 4+ people, you need a", ' ', jsx_runtime_1.jsx("a", { style: descriptionLink, href: "https://remotion.pro/license", children: "Company License" }),
+                            "."] })
+                ] }), jsx_runtime_1.jsxs("div", { style: licenseExplanationRow, children: [
+                    jsx_runtime_1.jsxs("div", { style: people, children: [
+                            jsx_runtime_1.jsx(PersonIcon, { handsUp: false, opacity: 1 }), jsx_runtime_1.jsx(PersonIcon, { handsUp: false, opacity: 0.3 }), jsx_runtime_1.jsx(PersonIcon, { handsUp: false, opacity: 0.3 }), jsx_runtime_1.jsx(PersonIcon, { handsUp: false, opacity: 0.3 })
+                        ] }), jsx_runtime_1.jsx("p", { style: description, children: "The total headcount matters, not the amount of people using Remotion." })
+                ] })
+        ] }));
+};
+exports.LicenseExplanation = LicenseExplanation;