@remotion/studio 4.0.468 → 4.0.470

package/dist/components/Timeline/save-sequence-prop.d.ts

@@ -1,12 +1,24 @@
 import type { CanUpdateSequencePropsResponse, SequencePropsSubscriptionKey, SequenceSchema } from 'remotion';
 export type SetCodeValues = (nodePath: SequencePropsSubscriptionKey, values: (prev: CanUpdateSequencePropsResponse) => CanUpdateSequencePropsResponse) => void;
-export declare const saveSequenceProp: ({ fileName, nodePath, fieldKey, value, defaultValue, schema, setCodeValues, clientId, }: {
+export type SaveSequencePropChange = {
     fileName: string;
     nodePath: SequencePropsSubscriptionKey;
     fieldKey: string;
     value: unknown;
     defaultValue: string | null;
     schema: SequenceSchema;
+};
+type SaveSequencePropsOptions = {
+    changes: SaveSequencePropChange[];
     setCodeValues: SetCodeValues;
     clientId: string;
-}) => Promise<void>;
+    undoLabel: string | null;
+    redoLabel: string | null;
+};
+type SaveSequencePropOptions = SaveSequencePropChange & {
+    setCodeValues: SetCodeValues;
+    clientId: string;
+};
+export declare const saveSequenceProps: ({ changes, setCodeValues, clientId, undoLabel, redoLabel, }: SaveSequencePropsOptions) => Promise<void>;
+export declare const saveSequenceProp: ({ fileName, nodePath, fieldKey, value, defaultValue, schema, setCodeValues, clientId, }: SaveSequencePropOptions) => Promise<void>;
+export {};

package/dist/components/Timeline/save-sequence-prop.js

@@ -1,9 +1,38 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.saveSequenceProp = void 0;
+exports.saveSequenceProp = exports.saveSequenceProps = void 0;
 const studio_shared_1 = require("@remotion/studio-shared");
 const call_api_1 = require("../call-api");
 const save_prop_queue_1 = require("./save-prop-queue");
+const saveSequenceProps = ({ changes, setCodeValues, clientId, undoLabel, redoLabel, }) => {
+    if (changes.length === 0) {
+        return Promise.resolve();
+    }
+    for (const change of changes) {
+        setCodeValues(change.nodePath, (prev) => (0, studio_shared_1.optimisticUpdateForCodeValues)({
+            previous: prev,
+            fieldKey: change.fieldKey,
+            value: change.value,
+            schema: change.schema,
+        }));
+    }
+    return (0, call_api_1.callApi)('/api/save-sequence-props', {
+        edits: changes.map((change) => {
+            return {
+                fileName: change.fileName,
+                nodePath: change.nodePath,
+                key: change.fieldKey,
+                value: JSON.stringify(change.value),
+                defaultValue: change.defaultValue,
+                schema: change.schema,
+            };
+        }),
+        clientId,
+        undoLabel,
+        redoLabel,
+    }).then(() => undefined);
+};
+exports.saveSequenceProps = saveSequenceProps;
 const saveSequenceProp = ({ fileName, nodePath, fieldKey, value, defaultValue, schema, setCodeValues, clientId, }) => {
     return (0, save_prop_queue_1.enqueueSavePropChange)({
         nodePath,
@@ -15,13 +44,19 @@ const saveSequenceProp = ({ fileName, nodePath, fieldKey, value, defaultValue, s
             schema,
         }),
         apiCall: () => (0, call_api_1.callApi)('/api/save-sequence-props', {
-            fileName,
-            nodePath,
-            key: fieldKey,
-            value: JSON.stringify(value),
-            defaultValue,
-            schema,
+            edits: [
+                {
+                    fileName,
+                    nodePath,
+                    key: fieldKey,
+                    value: JSON.stringify(value),
+                    defaultValue,
+                    schema,
+                },
+            ],
             clientId,
+            undoLabel: null,
+            redoLabel: null,
         }),
         errorLabel: 'Could not save sequence prop',
     });

package/dist/components/Timeline/timeline-field-row-layout.d.ts

@@ -1,2 +1,3 @@
 import type React from 'react';
 export declare const getTimelineFieldLabelRowStyle: (depth: number) => React.CSSProperties;
+export declare const timelineFieldValueColumnStyle: React.CSSProperties;

package/dist/components/Timeline/timeline-field-row-layout.js

@@ -1,10 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getTimelineFieldLabelRowStyle = void 0;
+exports.timelineFieldValueColumnStyle = exports.getTimelineFieldLabelRowStyle = void 0;
+const timeline_layout_1 = require("../../helpers/timeline-layout");
 const timeline_row_layout_1 = require("./timeline-row-layout");
 const getTimelineFieldLabelRowStyle = (depth) => {
     return {
         flex: `0 0 ${(0, timeline_row_layout_1.getTimelineFieldLabelFlexBasis)(depth)}`,
+        minWidth: 0,
         display: 'flex',
         flexDirection: 'row',
         alignItems: 'center',
@@ -12,3 +14,11 @@ const getTimelineFieldLabelRowStyle = (depth) => {
     };
 };
 exports.getTimelineFieldLabelRowStyle = getTimelineFieldLabelRowStyle;
+exports.timelineFieldValueColumnStyle = {
+    alignItems: 'center',
+    alignSelf: 'stretch',
+    display: 'flex',
+    flex: 1,
+    minWidth: 0,
+    paddingRight: timeline_layout_1.EXPANDED_SECTION_PADDING_RIGHT,
+};

package/dist/components/Timeline/timeline-row-layout.d.ts

@@ -1,6 +1,7 @@
 export declare const TIMELINE_ROW_BASE_PADDING = 5;
 export declare const TIMELINE_EYE_COLUMN_WIDTH = 22;
 export declare const TIMELINE_ARROW_COLUMN_WIDTH = 16;
+export declare const TIMELINE_KEYFRAME_CONTROLS_WIDTH = 38;
 export declare const TIMELINE_FIELD_LABEL_EXTRA_WIDTH = 15;
 export declare const getTimelineRowIndentWidth: (depth: number) => number;
 export declare const getTimelineRowLeftChromeWidth: (depth: number) => number;

package/dist/components/Timeline/timeline-row-layout.js

@@ -1,10 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getExpandedRowDepth = exports.getTimelineFieldLabelFlexBasis = exports.getTimelineRowLeftChromeWidth = exports.getTimelineRowIndentWidth = exports.TIMELINE_FIELD_LABEL_EXTRA_WIDTH = exports.TIMELINE_ARROW_COLUMN_WIDTH = exports.TIMELINE_EYE_COLUMN_WIDTH = exports.TIMELINE_ROW_BASE_PADDING = void 0;
+exports.getExpandedRowDepth = exports.getTimelineFieldLabelFlexBasis = exports.getTimelineRowLeftChromeWidth = exports.getTimelineRowIndentWidth = exports.TIMELINE_FIELD_LABEL_EXTRA_WIDTH = exports.TIMELINE_KEYFRAME_CONTROLS_WIDTH = exports.TIMELINE_ARROW_COLUMN_WIDTH = exports.TIMELINE_EYE_COLUMN_WIDTH = exports.TIMELINE_ROW_BASE_PADDING = void 0;
 const timeline_indent_1 = require("./timeline-indent");
 exports.TIMELINE_ROW_BASE_PADDING = 5;
 exports.TIMELINE_EYE_COLUMN_WIDTH = 22;
 exports.TIMELINE_ARROW_COLUMN_WIDTH = 16;
+exports.TIMELINE_KEYFRAME_CONTROLS_WIDTH = 38;
 exports.TIMELINE_FIELD_LABEL_EXTRA_WIDTH = 15;
 const getTimelineRowIndentWidth = (depth) => {
     return depth * timeline_indent_1.TIMELINE_INDENT;

package/dist/components/Timeline/timeline-translate-utils.d.ts

@@ -0,0 +1,2 @@
+export declare const parseTranslate: (value: string) => [number, number];
+export declare const serializeTranslate: (x: number, y: number) => string;

package/dist/components/Timeline/timeline-translate-utils.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.serializeTranslate = exports.parseTranslate = void 0;
+const PIXEL_PATTERN = /^(-?\d+(?:\.\d+)?)px(?:\s+(-?\d+(?:\.\d+)?)px)?$/;
+const parseTranslate = (value) => {
+    const m = value.match(PIXEL_PATTERN);
+    if (!m) {
+        return [0, 0];
+    }
+    return [Number(m[1]), m[2] !== undefined ? Number(m[2]) : 0];
+};
+exports.parseTranslate = parseTranslate;
+const formatTranslateCoordinate = (value) => {
+    const rounded = Math.round(value * 1000) / 1000;
+    return String(Object.is(rounded, -0) ? 0 : rounded);
+};
+const serializeTranslate = (x, y) => {
+    return `${formatTranslateCoordinate(x)}px ${formatTranslateCoordinate(y)}px`;
+};
+exports.serializeTranslate = serializeTranslate;

package/dist/components/Timeline/use-expanded-track-keyframe-rows.d.ts

@@ -0,0 +1,17 @@
+import { type TSequence } from 'remotion';
+import type { SequenceNodePathInfo } from '../../helpers/get-timeline-sequence-sort-key';
+import type { getTimelineKeyframes } from './get-timeline-keyframes';
+export type ExpandedTrackKeyframeRow = {
+    readonly height: number;
+    readonly keyframes: ReturnType<typeof getTimelineKeyframes>;
+    readonly nodePathInfo: SequenceNodePathInfo;
+    readonly rowKey: string;
+};
+export declare const useExpandedTrackKeyframeRows: ({ sequence, nodePathInfo, keyframeDisplayOffset, }: {
+    sequence: TSequence;
+    nodePathInfo: SequenceNodePathInfo;
+    keyframeDisplayOffset: number;
+}) => {
+    readonly rows: ExpandedTrackKeyframeRow[];
+    readonly expandedHeight: number;
+};

package/dist/components/Timeline/use-expanded-track-keyframe-rows.js

@@ -0,0 +1,52 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useExpandedTrackKeyframeRows = void 0;
+const react_1 = require("react");
+const remotion_1 = require("remotion");
+const timeline_layout_1 = require("../../helpers/timeline-layout");
+const timeline_node_path_key_1 = require("../../helpers/timeline-node-path-key");
+const ExpandedTracksProvider_1 = require("../ExpandedTracksProvider");
+const get_node_keyframes_1 = require("./get-node-keyframes");
+const useExpandedTrackKeyframeRows = ({ sequence, nodePathInfo, keyframeDisplayOffset, }) => {
+    const { getIsExpanded } = (0, react_1.useContext)(ExpandedTracksProvider_1.ExpandedTracksGetterContext);
+    const { codeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeCodeValuesContext);
+    const { getDragOverrides, getEffectDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeDragOverridesContext);
+    const tree = (0, react_1.useMemo)(() => (0, timeline_layout_1.buildTimelineTree)({
+        sequence,
+        nodePathInfo,
+        getDragOverrides,
+        getEffectDragOverrides,
+        codeValues,
+    }), [
+        codeValues,
+        getDragOverrides,
+        getEffectDragOverrides,
+        nodePathInfo,
+        sequence,
+    ]);
+    const flat = (0, react_1.useMemo)(() => (0, timeline_layout_1.flattenVisibleTreeNodes)({ nodes: tree, getIsExpanded }), [tree, getIsExpanded]);
+    const expandedHeight = (0, react_1.useMemo)(() => (0, timeline_layout_1.getExpandedTrackHeight)({
+        sequence,
+        nodePathInfo,
+        getIsExpanded,
+        codeValues,
+    }), [codeValues, getIsExpanded, nodePathInfo, sequence]);
+    const rows = (0, react_1.useMemo)(() => flat.map(({ node }) => ({
+        height: (0, timeline_layout_1.getTreeRowHeight)(node),
+        keyframes: (0, get_node_keyframes_1.getNodeKeyframes)({
+            node,
+            nodePath: nodePathInfo.sequenceSubscriptionKey,
+            codeValues,
+            keyframeDisplayOffset,
+        }),
+        rowKey: (0, timeline_node_path_key_1.timelineNodePathInfoToKey)(node.nodePathInfo),
+        nodePathInfo: node.nodePathInfo,
+    })), [
+        codeValues,
+        flat,
+        keyframeDisplayOffset,
+        nodePathInfo.sequenceSubscriptionKey,
+    ]);
+    return { rows, expandedHeight };
+};
+exports.useExpandedTrackKeyframeRows = useExpandedTrackKeyframeRows;

package/dist/components/Timeline/use-open-sequence-in-editor.d.ts

@@ -0,0 +1,6 @@
+import type { TSequence } from 'remotion';
+export declare const useOpenSequenceInEditor: (sequence: TSequence) => {
+    canOpenInEditor: boolean;
+    openInEditor: () => Promise<void>;
+    originalLocation: import("remotion").ResolvedStackLocation | null;
+};

package/dist/components/Timeline/use-open-sequence-in-editor.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useOpenSequenceInEditor = void 0;
+const react_1 = require("react");
+const client_id_1 = require("../../helpers/client-id");
+const open_in_editor_1 = require("../../helpers/open-in-editor");
+const NotificationCenter_1 = require("../Notifications/NotificationCenter");
+const use_resolved_stack_react_to_change_1 = require("./use-resolved-stack-react-to-change");
+const useOpenSequenceInEditor = (sequence) => {
+    const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
+    const previewConnected = previewServerState.type === 'connected';
+    const originalLocation = (0, use_resolved_stack_react_to_change_1.useResolveStackAndReactToChange)(sequence.getStack);
+    const canOpenInEditor = (0, react_1.useMemo)(() => Boolean(window.remotion_editorName && previewConnected && originalLocation), [originalLocation, previewConnected]);
+    const openInEditor = (0, react_1.useCallback)(async () => {
+        if (!canOpenInEditor || !originalLocation) {
+            return;
+        }
+        try {
+            await (0, open_in_editor_1.openOriginalPositionInEditor)(originalLocation);
+        }
+        catch (err) {
+            (0, NotificationCenter_1.showNotification)(err.message, 2000);
+        }
+    }, [canOpenInEditor, originalLocation]);
+    return {
+        canOpenInEditor,
+        openInEditor,
+        originalLocation,
+    };
+};
+exports.useOpenSequenceInEditor = useOpenSequenceInEditor;

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

@@ -2,12 +2,18 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getCompositionMenuItems = void 0;
 const no_react_1 = require("remotion/no-react");
+const format_file_location_1 = require("../helpers/format-file-location");
 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 fileLocation = (0, format_file_location_1.formatFileLocation)({
+        location: resolvedLocation,
+        root: window.remotion_cwd,
+    });
     const showInEditorDisabled = !composition || connectionStatus !== 'connected' || !resolvedLocation;
     const openComponentInEditorDisabled = showInEditorDisabled || !(resolvedLocation === null || resolvedLocation === void 0 ? void 0 : resolvedLocation.source);
+    const copyFileLocationDisabled = !composition || !fileLocation;
     return [
         editorName
             ? {
@@ -34,6 +40,31 @@ const getCompositionMenuItems = ({ composition, connectionStatus, resolvedLocati
                 disabled: showInEditorDisabled,
             }
             : null,
+        {
+            id: 'copy-file-location',
+            keyHint: null,
+            label: `Copy file location`,
+            leftItem: null,
+            onClick: () => {
+                closeMenu();
+                if (!fileLocation) {
+                    return;
+                }
+                navigator.clipboard
+                    .writeText(fileLocation)
+                    .then(() => {
+                    (0, NotificationCenter_1.showNotification)('Copied file location to clipboard', 1000);
+                })
+                    .catch((err) => {
+                    (0, NotificationCenter_1.showNotification)(`Could not copy to clipboard: ${err.message}`, 1000);
+                });
+            },
+            quickSwitcherLabel: 'Copy composition file location',
+            subMenu: null,
+            type: 'item',
+            value: 'copy-file-location',
+            disabled: copyFileLocationDisabled,
+        },
         editorName
             ? {
                 id: 'open-component-in-editor',
@@ -62,7 +93,7 @@ const getCompositionMenuItems = ({ composition, connectionStatus, resolvedLocati
                 disabled: openComponentInEditorDisabled,
             }
             : null,
-        editorName
+        editorName || fileLocation
             ? {
                 type: 'divider',
                 id: 'show-in-editor-divider',

package/dist/error-overlay/remotion-overlay/OpenInEditor.js

@@ -43,7 +43,6 @@ const OpenInEditor = ({ stack, canHaveKeyboardShortcuts }) => {
     const openInBrowser = (0, react_1.useCallback)(() => {
         dispatch({ type: 'start' });
         (0, open_in_editor_1.openInEditor)(stack)
-            .then((res) => res.json())
             .then((data) => {
             if (data.success) {
                 dispatchIfMounted({ type: 'succeed' });