@remotion/studio 4.0.465 → 4.0.466

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

@@ -7,8 +7,6 @@ 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");
 const layout_1 = require("../../layout");
 const NotificationCenter_1 = require("../../Notifications/NotificationCenter");
 const Spinner_1 = require("../../Spinner");
@@ -17,26 +15,8 @@ const TimelineStack = ({ isCompact, sequence, originalLocation }) => {
     const [stackHovered, setStackHovered] = (0, react_1.useState)(false);
     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' &&
-            sequence.type !== 'image') {
-            return null;
-        }
-        const isStatic = sequence.src.startsWith(window.remotion_staticBase);
-        if (!isStatic) {
-            return null;
-        }
-        const relativePath = sequence.src.replace(window.remotion_staticBase + '/', '');
-        return relativePath;
-    }, [sequence]);
-    const navigateToAsset = (0, react_1.useCallback)((asset) => {
-        selectAsset(asset);
-        (0, url_state_1.pushUrl)(`/assets/${asset}`);
-    }, [selectAsset]);
     const openEditor = (0, react_1.useCallback)(async (location) => {
         if (!window.remotion_editorName) {
             return;
@@ -56,35 +36,15 @@ const TimelineStack = ({ isCompact, sequence, originalLocation }) => {
         connectionStatus === 'connected' &&
         originalLocation;
     const canOpenInGitHub = window.remotion_gitSource && originalLocation;
-    const titleHoverable = (isCompact && (canOpenInEditor || canOpenInGitHub)) || assetPath;
+    const { documentationLink } = sequence;
+    const titleHoverable = documentationLink !== null;
     const stackHoverable = !isCompact && (canOpenInEditor || canOpenInGitHub);
     const onClickTitle = (0, react_1.useCallback)(() => {
-        if (!titleHoverable) {
+        if (documentationLink === null) {
             return null;
         }
-        if (assetPath) {
-            navigateToAsset(assetPath);
-            return;
-        }
-        if (!originalLocation) {
-            return;
-        }
-        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,
-    ]);
+        window.open(documentationLink, '_blank', 'noopener,noreferrer');
+    }, [documentationLink]);
     const onClickStack = (0, react_1.useCallback)(() => {
         if (!originalLocation) {
             return;
@@ -150,8 +110,8 @@ const TimelineStack = ({ isCompact, sequence, originalLocation }) => {
         ? sequence.displayName.slice(0, 1000) + '...'
         : sequence.displayName;
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-            jsx_runtime_1.jsx("div", { onPointerEnter: onTitlePointerEnter, onPointerLeave: onTitlePointerLeave, title: originalLocation
-                    ? (0, source_attribution_1.getOriginalSourceAttribution)(originalLocation)
+            jsx_runtime_1.jsx("div", { onPointerEnter: onTitlePointerEnter, onPointerLeave: onTitlePointerLeave, title: documentationLink
+                    ? `Open documentation: ${documentationLink}`
                     : text || '<Sequence>', style: titleStyle, onClick: onClickTitle, children: text || '<Sequence>' }), isCompact || !originalLocation ? null : (jsx_runtime_1.jsx("div", { onPointerEnter: onStackPointerEnter, onPointerLeave: onStackPointerLeave, onClick: onClickStack, style: style, children: (0, source_attribution_1.getOriginalSourceAttribution)(originalLocation) })), opening ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                     jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(Spinner_1.Spinner, { duration: 0.5, size: 12 })
                 ] })) : null] }));

package/dist/components/Timeline/TimelineTracks.js

@@ -36,11 +36,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TimelineTracks = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
-const remotion_1 = require("remotion");
 const client_id_1 = require("../../helpers/client-id");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
 const ExpandedTracksProvider_1 = require("../ExpandedTracksProvider");
 const MaxTimelineTracks_1 = require("./MaxTimelineTracks");
+const TimelineExpandedTrackKeyframes_1 = require("./TimelineExpandedTrackKeyframes");
 const TimelineSequence_1 = require("./TimelineSequence");
 const TimelineTimeIndicators_1 = require("./TimelineTimeIndicators");
 const content = {
@@ -51,18 +51,9 @@ const content = {
 const timelineContent = {
     minHeight: '100%',
 };
-const getExpandedPlaceholderStyle = ({ sequence, nodePathInfo, getIsExpanded, codeValues, }) => ({
-    height: (0, timeline_layout_1.getExpandedTrackHeight)({
-        sequence,
-        nodePathInfo,
-        getIsExpanded,
-        codeValues,
-    }) + timeline_layout_1.TIMELINE_ITEM_BORDER_BOTTOM,
-});
 const TimelineTracksInner = ({ timeline, hasBeenCut }) => {
     const { getIsExpanded } = (0, react_1.useContext)(ExpandedTracksProvider_1.ExpandedTracksGetterContext);
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
-    const { codeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeCodeValuesContext);
     const previewServerConnected = previewServerState.type === 'connected';
     const timelineStyle = (0, react_1.useMemo)(() => {
         return {
@@ -78,12 +69,7 @@ const TimelineTracksInner = ({ timeline, hasBeenCut }) => {
                                 jsx_runtime_1.jsx("div", { style: {
                                         height: (0, timeline_layout_1.getTimelineLayerHeight)(track.sequence.type),
                                         marginBottom: timeline_layout_1.TIMELINE_ITEM_BORDER_BOTTOM,
-                                    }, children: jsx_runtime_1.jsx(TimelineSequence_1.TimelineSequence, { s: track.sequence }) }), isExpanded && track.nodePathInfo && previewServerConnected ? (jsx_runtime_1.jsx("div", { style: getExpandedPlaceholderStyle({
-                                        sequence: track.sequence,
-                                        nodePathInfo: track.nodePathInfo,
-                                        getIsExpanded,
-                                        codeValues,
-                                    }) })) : null] }, track.sequence.id));
+                                    }, children: jsx_runtime_1.jsx(TimelineSequence_1.TimelineSequence, { s: track.sequence }) }), isExpanded && track.nodePathInfo && previewServerConnected ? (jsx_runtime_1.jsx(TimelineExpandedTrackKeyframes_1.TimelineExpandedTrackKeyframes, { sequence: track.sequence, nodePathInfo: track.nodePathInfo })) : null] }, track.sequence.id));
                     })] }), hasBeenCut ? jsx_runtime_1.jsx(MaxTimelineTracks_1.MaxTimelineTracksReached, {}) : null] }));
 };
 exports.TimelineTracks = react_1.default.memo(TimelineTracksInner);

package/dist/components/Timeline/get-timeline-keyframes.d.ts

@@ -0,0 +1,6 @@
+import type { CanUpdateSequencePropStatus, CanUpdateSequencePropStatusFalse } from 'remotion';
+export declare const getComputedStatusLabel: (propStatus: CanUpdateSequencePropStatusFalse) => string;
+export declare const getTimelineKeyframes: (propStatus: CanUpdateSequencePropStatus | null | undefined) => {
+    frame: number;
+    value: unknown;
+}[];

package/dist/components/Timeline/get-timeline-keyframes.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getTimelineKeyframes = exports.getComputedStatusLabel = void 0;
+const getComputedStatusLabel = (propStatus) => {
+    var _a;
+    if (propStatus.reason !== 'computed') {
+        throw new Error(`Unsupported prop status: ${propStatus.reason}`);
+    }
+    return ((_a = propStatus.keyframes) === null || _a === void 0 ? void 0 : _a.length) ? 'keyframed' : 'computed';
+};
+exports.getComputedStatusLabel = getComputedStatusLabel;
+const getTimelineKeyframes = (propStatus) => {
+    var _a;
+    if (!propStatus || propStatus.canUpdate) {
+        return [];
+    }
+    if (propStatus.reason !== 'computed') {
+        throw new Error(`Unsupported prop status: ${propStatus.reason}`);
+    }
+    return (_a = propStatus.keyframes) !== null && _a !== void 0 ? _a : [];
+};
+exports.getTimelineKeyframes = getTimelineKeyframes;

package/dist/components/composition-menu-items.d.ts

@@ -0,0 +1,12 @@
+import type { SetStateAction } from 'react';
+import type { ResolvedStackLocation } from 'remotion';
+import type { ModalState } from '../state/modals';
+import type { ComboboxValue } from './NewComposition/ComboBox';
+export declare const getCompositionMenuItems: ({ composition, connectionStatus, resolvedLocation, setSelectedModal, closeMenu, readOnlyStudio, }: {
+    composition: import("remotion").AnyComposition | null;
+    connectionStatus: "connected" | "disconnected" | "init";
+    resolvedLocation: ResolvedStackLocation | null;
+    setSelectedModal: (value: SetStateAction<ModalState | null>) => void;
+    closeMenu: () => void;
+    readOnlyStudio: boolean;
+}) => ComboboxValue[];

package/dist/components/composition-menu-items.js

@@ -0,0 +1,166 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getCompositionMenuItems = void 0;
+const no_react_1 = require("remotion/no-react");
+const open_in_editor_1 = require("../helpers/open-in-editor");
+const NotificationCenter_1 = require("./Notifications/NotificationCenter");
+const getCompositionMenuItems = ({ composition, connectionStatus, resolvedLocation, setSelectedModal, closeMenu, readOnlyStudio, }) => {
+    const editorName = window.remotion_editorName;
+    const showInEditorDisabled = !composition || connectionStatus !== 'connected' || !resolvedLocation;
+    const openComponentInEditorDisabled = showInEditorDisabled || !(resolvedLocation === null || resolvedLocation === void 0 ? void 0 : resolvedLocation.source);
+    return [
+        editorName
+            ? {
+                id: 'show-in-editor',
+                keyHint: null,
+                label: `Show composition in ${editorName}`,
+                leftItem: null,
+                onClick: async () => {
+                    closeMenu();
+                    if (!composition || !resolvedLocation) {
+                        return;
+                    }
+                    try {
+                        await (0, open_in_editor_1.openOriginalPositionInEditor)(resolvedLocation);
+                    }
+                    catch (err) {
+                        (0, NotificationCenter_1.showNotification)(err.message, 2000);
+                    }
+                },
+                quickSwitcherLabel: `Show composition in ${editorName}`,
+                subMenu: null,
+                type: 'item',
+                value: 'show-in-editor',
+                disabled: showInEditorDisabled,
+            }
+            : null,
+        editorName
+            ? {
+                id: 'open-component-in-editor',
+                keyHint: null,
+                label: `Show component in ${editorName}`,
+                leftItem: null,
+                onClick: async () => {
+                    closeMenu();
+                    if (!composition || !(resolvedLocation === null || resolvedLocation === void 0 ? void 0 : resolvedLocation.source)) {
+                        return;
+                    }
+                    try {
+                        await (0, open_in_editor_1.openCompositionComponentInEditor)({
+                            compositionFile: resolvedLocation.source,
+                            compositionId: composition.id,
+                        });
+                    }
+                    catch (err) {
+                        (0, NotificationCenter_1.showNotification)(err.message, 2000);
+                    }
+                },
+                quickSwitcherLabel: `Show composition component in ${editorName}`,
+                subMenu: null,
+                type: 'item',
+                value: 'open-component-in-editor',
+                disabled: openComponentInEditorDisabled,
+            }
+            : null,
+        editorName
+            ? {
+                type: 'divider',
+                id: 'show-in-editor-divider',
+            }
+            : null,
+        {
+            id: 'rename',
+            keyHint: null,
+            label: `Rename...`,
+            leftItem: null,
+            onClick: () => {
+                if (!composition) {
+                    return;
+                }
+                closeMenu();
+                setSelectedModal({
+                    type: 'rename-comp',
+                    compositionId: composition.id,
+                });
+            },
+            quickSwitcherLabel: 'Rename composition...',
+            subMenu: null,
+            type: 'item',
+            value: 'rename',
+            disabled: !composition || readOnlyStudio,
+        },
+        {
+            id: 'duplicate',
+            keyHint: null,
+            label: `Duplicate...`,
+            leftItem: null,
+            onClick: () => {
+                if (!composition) {
+                    return;
+                }
+                closeMenu();
+                setSelectedModal({
+                    type: 'duplicate-comp',
+                    compositionId: composition.id,
+                    compositionType: composition.durationInFrames === 1 ? 'still' : 'composition',
+                });
+            },
+            quickSwitcherLabel: 'Duplicate composition...',
+            subMenu: null,
+            type: 'item',
+            value: 'duplicate',
+            disabled: !composition || readOnlyStudio,
+        },
+        {
+            id: 'delete',
+            keyHint: null,
+            label: `Delete...`,
+            leftItem: null,
+            onClick: () => {
+                if (!composition) {
+                    return;
+                }
+                closeMenu();
+                setSelectedModal({
+                    type: 'delete-comp',
+                    compositionId: composition.id,
+                });
+            },
+            quickSwitcherLabel: 'Delete composition...',
+            subMenu: null,
+            type: 'item',
+            value: 'delete',
+            disabled: !composition || readOnlyStudio,
+        },
+        {
+            type: 'divider',
+            id: 'copy-id-divider',
+        },
+        {
+            id: 'copy-id',
+            keyHint: null,
+            label: `Copy ID`,
+            leftItem: null,
+            onClick: () => {
+                if (!composition) {
+                    return;
+                }
+                closeMenu();
+                navigator.clipboard
+                    .writeText(composition.id)
+                    .then(() => {
+                    (0, NotificationCenter_1.showNotification)('Copied to clipboard', 1000);
+                })
+                    .catch((err) => {
+                    (0, NotificationCenter_1.showNotification)(`Could not copy to clipboard: ${err.message}`, 1000);
+                });
+            },
+            quickSwitcherLabel: 'Copy composition ID',
+            subMenu: null,
+            type: 'item',
+            value: 'copy-id',
+            disabled: !composition,
+        },
+    ].filter(no_react_1.NoReactInternals.truthy);
+};
+exports.getCompositionMenuItems = getCompositionMenuItems;