@remotion/studio 4.0.469 → 4.0.470

package/dist/components/Timeline/delete-selected-timeline-item.d.ts

@@ -0,0 +1,17 @@
+import type { OverrideIdToNodePaths, TSequence } from 'remotion';
+import type { SetCodeValues } from './save-sequence-prop';
+import type { TimelineSelection } from './TimelineSelection';
+export declare const deleteSelectedTimelineItem: ({ selection, sequences, overrideIdsToNodePaths, setCodeValues, clientId, }: {
+    selection: TimelineSelection;
+    sequences: TSequence[];
+    overrideIdsToNodePaths: OverrideIdToNodePaths;
+    setCodeValues: SetCodeValues;
+    clientId: string;
+}) => Promise<void> | null;
+export declare const deleteSelectedTimelineItems: ({ selections, sequences, overrideIdsToNodePaths, setCodeValues, clientId, }: {
+    selections: readonly TimelineSelection[];
+    sequences: TSequence[];
+    overrideIdsToNodePaths: OverrideIdToNodePaths;
+    setCodeValues: SetCodeValues;
+    clientId: string;
+}) => Promise<void> | null;

package/dist/components/Timeline/delete-selected-timeline-item.js

@@ -0,0 +1,183 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.deleteSelectedTimelineItems = exports.deleteSelectedTimelineItem = void 0;
+const call_api_1 = require("../call-api");
+const NotificationCenter_1 = require("../Notifications/NotificationCenter");
+const delete_selected_keyframe_1 = require("./delete-selected-keyframe");
+const confirmDeletingDuplicatedSequences = (nodePathInfos) => {
+    const duplicatedNodePathInfos = nodePathInfos.filter((nodePathInfo) => nodePathInfo.numberOfSequencesWithThisNodePath > 1);
+    if (duplicatedNodePathInfos.length === 0) {
+        return true;
+    }
+    if (duplicatedNodePathInfos.length === 1) {
+        const [nodePathInfo] = duplicatedNodePathInfos;
+        const singleDuplicatedSequenceMessage = 'This sequence is programmatically duplicated ' +
+            nodePathInfo.numberOfSequencesWithThisNodePath +
+            ' times in the code. Deleting removes all instances. Continue?';
+        // eslint-disable-next-line no-alert -- native confirm before deleting all instances of a duplicated sequence
+        return window.confirm(singleDuplicatedSequenceMessage);
+    }
+    const multipleDuplicatedSequencesMessage = duplicatedNodePathInfos.length +
+        ' selected sequences are programmatically duplicated in the code. Deleting removes all instances. Continue?';
+    // eslint-disable-next-line no-alert -- native confirm before deleting all instances of duplicated sequences
+    return window.confirm(multipleDuplicatedSequencesMessage);
+};
+const deleteSequences = (nodePathInfos) => {
+    if (!confirmDeletingDuplicatedSequences(nodePathInfos)) {
+        return Promise.resolve();
+    }
+    return (0, call_api_1.callApi)('/api/delete-jsx-node', {
+        nodes: nodePathInfos.map((nodePathInfo) => {
+            const nodePath = nodePathInfo.sequenceSubscriptionKey;
+            return {
+                fileName: nodePath.absolutePath,
+                nodePath: nodePath.nodePath,
+            };
+        }),
+    })
+        .then((result) => {
+        if (result.success) {
+            (0, NotificationCenter_1.showNotification)(nodePathInfos.length === 1
+                ? 'Removed sequence from source file'
+                : 'Removed sequences from source files', 2000);
+        }
+        else {
+            (0, NotificationCenter_1.showNotification)(result.reason, 4000);
+        }
+    })
+        .catch((err) => {
+        (0, NotificationCenter_1.showNotification)(err.message, 4000);
+    });
+};
+const deleteEffects = (effects) => {
+    if (effects.length === 0) {
+        return Promise.resolve();
+    }
+    return (0, call_api_1.callApi)('/api/delete-effect', effects.map((effect) => {
+        const nodePath = effect.nodePathInfo.sequenceSubscriptionKey;
+        return effect.type === 'single-effect'
+            ? {
+                type: 'single-effect',
+                fileName: nodePath.absolutePath,
+                sequenceNodePath: nodePath,
+                effectIndex: effect.effectIndex,
+            }
+            : {
+                type: 'all-effects',
+                fileName: nodePath.absolutePath,
+                sequenceNodePath: nodePath,
+            };
+    }))
+        .then((result) => {
+        if (result.success) {
+            const singleEffect = effects[0];
+            (0, NotificationCenter_1.showNotification)(effects.length === 1 && (singleEffect === null || singleEffect === void 0 ? void 0 : singleEffect.type) === 'single-effect'
+                ? 'Removed effect from source file'
+                : effects.length === 1
+                    ? 'Removed effects from source file'
+                    : 'Removed effects from source files', 2000);
+        }
+        else {
+            (0, NotificationCenter_1.showNotification)(result.reason, 4000);
+        }
+    })
+        .catch((err) => {
+        (0, NotificationCenter_1.showNotification)(err.message, 4000);
+    });
+};
+const deleteSelectedTimelineItem = ({ selection, sequences, overrideIdsToNodePaths, setCodeValues, clientId, }) => {
+    if (selection.type === 'keyframe') {
+        return (0, delete_selected_keyframe_1.deleteSelectedKeyframe)({
+            nodePathInfo: selection.nodePathInfo,
+            frame: selection.frame,
+            sequences,
+            overrideIdsToNodePaths,
+            setCodeValues,
+            clientId,
+        });
+    }
+    switch (selection.type) {
+        case 'sequence':
+            return deleteSequences([selection.nodePathInfo]);
+        case 'sequence-effect':
+            return deleteEffects([
+                {
+                    type: 'single-effect',
+                    nodePathInfo: selection.nodePathInfo,
+                    effectIndex: selection.i,
+                },
+            ]);
+        case 'sequence-prop':
+        case 'sequence-effect-prop':
+            return null;
+        case 'sequence-all-effects':
+            return deleteEffects([
+                { type: 'all-effects', nodePathInfo: selection.nodePathInfo },
+            ]);
+        default:
+            throw new Error(`Unexpected timeline selection type: ${selection}`);
+    }
+};
+exports.deleteSelectedTimelineItem = deleteSelectedTimelineItem;
+const isSequenceRowSelection = (selection) => selection.type === 'sequence';
+const isSequenceEffectSelection = (selection) => selection.type === 'sequence-effect';
+const isSequenceAllEffectsSelection = (selection) => selection.type === 'sequence-all-effects';
+const isKeyframeSelection = (selection) => selection.type === 'keyframe';
+const assertTimelineSelectionsHaveSameType = (selections) => {
+    const firstSelection = selections[0];
+    if (!firstSelection) {
+        return;
+    }
+    for (const selection of selections) {
+        if (selection.type !== firstSelection.type) {
+            throw new Error(`Assertion failed: Cannot delete timeline selections of different types (${firstSelection.type}, ${selection.type})`);
+        }
+    }
+};
+const deleteSelectedTimelineItems = ({ selections, sequences, overrideIdsToNodePaths, setCodeValues, clientId, }) => {
+    const firstSelection = selections[0];
+    if (!firstSelection) {
+        return null;
+    }
+    assertTimelineSelectionsHaveSameType(selections);
+    switch (firstSelection.type) {
+        case 'sequence':
+            return deleteSequences(selections
+                .filter(isSequenceRowSelection)
+                .map((selection) => selection.nodePathInfo));
+        case 'sequence-effect':
+            return deleteEffects(selections.filter(isSequenceEffectSelection).map((selection) => ({
+                type: 'single-effect',
+                nodePathInfo: selection.nodePathInfo,
+                effectIndex: selection.i,
+            })));
+        case 'keyframe': {
+            const deletePromises = selections
+                .filter(isKeyframeSelection)
+                .map((selection) => (0, delete_selected_keyframe_1.deleteSelectedKeyframe)({
+                nodePathInfo: selection.nodePathInfo,
+                frame: selection.frame,
+                sequences,
+                overrideIdsToNodePaths,
+                setCodeValues,
+                clientId,
+            }))
+                .filter((promise) => promise !== null);
+            if (deletePromises.length === 0) {
+                return null;
+            }
+            return Promise.all(deletePromises).then(() => undefined);
+        }
+        case 'sequence-prop':
+        case 'sequence-effect-prop':
+            return null;
+        case 'sequence-all-effects':
+            return deleteEffects(selections.filter(isSequenceAllEffectsSelection).map((selection) => ({
+                type: 'all-effects',
+                nodePathInfo: selection.nodePathInfo,
+            })));
+        default:
+            throw new Error(`Unexpected timeline selection type: ${firstSelection}`);
+    }
+};
+exports.deleteSelectedTimelineItems = deleteSelectedTimelineItems;

package/dist/components/Timeline/duplicate-selected-timeline-item.d.ts

@@ -0,0 +1,13 @@
+import type { SequenceNodePathInfo } from '../../helpers/get-timeline-sequence-sort-key';
+import type { TimelineSelection } from './TimelineSelection';
+export declare const duplicateSequencesFromSource: (nodePathInfos: readonly SequenceNodePathInfo[]) => Promise<void>;
+export declare const isDuplicatableSequenceRowSelection: (selection: TimelineSelection) => selection is {
+    readonly nodePathInfo: SequenceNodePathInfo;
+} & {
+    readonly type: "sequence";
+} & {
+    type: "sequence";
+};
+export declare const duplicateSelectedTimelineItems: ({ selections, }: {
+    selections: readonly TimelineSelection[];
+}) => Promise<void> | null;

package/dist/components/Timeline/duplicate-selected-timeline-item.js

@@ -0,0 +1,66 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.duplicateSelectedTimelineItems = exports.isDuplicatableSequenceRowSelection = exports.duplicateSequencesFromSource = void 0;
+const call_api_1 = require("../call-api");
+const NotificationCenter_1 = require("../Notifications/NotificationCenter");
+const confirmDuplicatingProgrammaticallyDuplicatedSequences = (nodePathInfos) => {
+    if (nodePathInfos.length === 0) {
+        return true;
+    }
+    if (nodePathInfos.length === 1) {
+        const [nodePathInfo] = nodePathInfos;
+        const singleDuplicatedSequenceMessage = 'This sequence is programmatically duplicated ' +
+            nodePathInfo.numberOfSequencesWithThisNodePath +
+            ' times in the code. Duplicating inserts another copy. Continue?';
+        // eslint-disable-next-line no-alert -- native confirm before applying duplicate codemod in .map callbacks
+        return window.confirm(singleDuplicatedSequenceMessage);
+    }
+    const multipleDuplicatedSequencesMessage = nodePathInfos.length +
+        ' selected sequences are programmatically duplicated in the code. Duplicating inserts another copy of each. Continue?';
+    // eslint-disable-next-line no-alert -- native confirm before applying duplicate codemod in .map callbacks
+    return window.confirm(multipleDuplicatedSequencesMessage);
+};
+const duplicateSequence = (nodePathInfo) => {
+    const nodePath = nodePathInfo.sequenceSubscriptionKey;
+    return (0, call_api_1.callApi)('/api/duplicate-jsx-node', {
+        fileName: nodePath.absolutePath,
+        nodePath: nodePath.nodePath,
+    });
+};
+const duplicateSequencesFromSource = (nodePathInfos) => {
+    const programmaticallyDuplicated = nodePathInfos.filter((nodePathInfo) => nodePathInfo.numberOfSequencesWithThisNodePath > 1);
+    const regular = nodePathInfos.filter((nodePathInfo) => nodePathInfo.numberOfSequencesWithThisNodePath <= 1);
+    const toDuplicate = [...regular];
+    if (programmaticallyDuplicated.length === 0 ||
+        confirmDuplicatingProgrammaticallyDuplicatedSequences(programmaticallyDuplicated)) {
+        toDuplicate.push(...programmaticallyDuplicated);
+    }
+    if (toDuplicate.length === 0) {
+        return Promise.resolve();
+    }
+    return Promise.all(toDuplicate.map(duplicateSequence))
+        .then((results) => {
+        const failedResult = results.find((result) => !result.success);
+        if (failedResult && !failedResult.success) {
+            (0, NotificationCenter_1.showNotification)(failedResult.reason, 4000);
+            return;
+        }
+        (0, NotificationCenter_1.showNotification)(toDuplicate.length === 1
+            ? 'Duplicated sequence in source file'
+            : 'Duplicated sequences in source files', 2000);
+    })
+        .catch((err) => {
+        (0, NotificationCenter_1.showNotification)(err.message, 4000);
+    });
+};
+exports.duplicateSequencesFromSource = duplicateSequencesFromSource;
+const isDuplicatableSequenceRowSelection = (selection) => selection.type === 'sequence';
+exports.isDuplicatableSequenceRowSelection = isDuplicatableSequenceRowSelection;
+const duplicateSelectedTimelineItems = ({ selections, }) => {
+    const sequenceSelections = selections.filter(exports.isDuplicatableSequenceRowSelection);
+    if (sequenceSelections.length === 0) {
+        return null;
+    }
+    return (0, exports.duplicateSequencesFromSource)(sequenceSelections.map((selection) => selection.nodePathInfo));
+};
+exports.duplicateSelectedTimelineItems = duplicateSelectedTimelineItems;

package/dist/components/Timeline/find-track-for-node-path-info.d.ts

@@ -0,0 +1,7 @@
+import type { OverrideIdToNodePaths, TSequence } from 'remotion';
+import type { SequenceNodePathInfo } from '../../helpers/get-timeline-sequence-sort-key';
+export declare const findTrackForNodePathInfo: ({ sequences, overrideIdsToNodePaths, nodePathInfo, }: {
+    sequences: TSequence[];
+    overrideIdsToNodePaths: OverrideIdToNodePaths;
+    nodePathInfo: SequenceNodePathInfo;
+}) => import("../../helpers/get-timeline-sequence-sort-key").TrackWithHash | undefined;

package/dist/components/Timeline/find-track-for-node-path-info.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.findTrackForNodePathInfo = void 0;
+const studio_shared_1 = require("@remotion/studio-shared");
+const calculate_timeline_1 = require("../../helpers/calculate-timeline");
+const findTrackForNodePathInfo = ({ sequences, overrideIdsToNodePaths, nodePathInfo, }) => {
+    const tracks = (0, calculate_timeline_1.calculateTimeline)({ sequences, overrideIdsToNodePaths });
+    return tracks.find((candidate) => candidate.nodePathInfo !== null &&
+        (0, studio_shared_1.stringifySequenceSubscriptionKey)(candidate.nodePathInfo.sequenceSubscriptionKey) ===
+            (0, studio_shared_1.stringifySequenceSubscriptionKey)(nodePathInfo.sequenceSubscriptionKey) &&
+        candidate.nodePathInfo.index === nodePathInfo.index);
+};
+exports.findTrackForNodePathInfo = findTrackForNodePathInfo;

package/dist/components/Timeline/get-keyframe-navigation.d.ts

@@ -0,0 +1,9 @@
+export declare const getPreviousKeyframeDisplayFrame: (keyframes: readonly {
+    frame: number;
+}[], currentDisplayFrame: number) => number | null;
+export declare const getNextKeyframeDisplayFrame: (keyframes: readonly {
+    frame: number;
+}[], currentDisplayFrame: number) => number | null;
+export declare const hasKeyframeAtSourceFrame: (keyframes: readonly {
+    frame: number;
+}[], sourceFrame: number) => boolean;

package/dist/components/Timeline/get-keyframe-navigation.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.hasKeyframeAtSourceFrame = exports.getNextKeyframeDisplayFrame = exports.getPreviousKeyframeDisplayFrame = void 0;
+const getPreviousKeyframeDisplayFrame = (keyframes, currentDisplayFrame) => {
+    let previous = null;
+    for (const keyframe of keyframes) {
+        if (keyframe.frame < currentDisplayFrame) {
+            previous = keyframe.frame;
+        }
+    }
+    return previous;
+};
+exports.getPreviousKeyframeDisplayFrame = getPreviousKeyframeDisplayFrame;
+const getNextKeyframeDisplayFrame = (keyframes, currentDisplayFrame) => {
+    for (const keyframe of keyframes) {
+        if (keyframe.frame > currentDisplayFrame) {
+            return keyframe.frame;
+        }
+    }
+    return null;
+};
+exports.getNextKeyframeDisplayFrame = getNextKeyframeDisplayFrame;
+const hasKeyframeAtSourceFrame = (keyframes, sourceFrame) => {
+    return keyframes.some((keyframe) => keyframe.frame === sourceFrame);
+};
+exports.hasKeyframeAtSourceFrame = hasKeyframeAtSourceFrame;

package/dist/components/Timeline/parse-keyframe-field-from-node-path.d.ts

@@ -0,0 +1,8 @@
+export declare const parseKeyframeFieldFromNodePath: (auxiliaryKeys: string[]) => {
+    readonly type: "sequence";
+    readonly fieldKey: string;
+} | {
+    readonly type: "effect";
+    readonly effectIndex: number;
+    readonly fieldKey: string;
+} | null;

package/dist/components/Timeline/parse-keyframe-field-from-node-path.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.parseKeyframeFieldFromNodePath = void 0;
+const parseKeyframeFieldFromNodePath = (auxiliaryKeys) => {
+    // Sequence control field: ['controls', fieldKey]
+    if (auxiliaryKeys[0] === 'controls' && auxiliaryKeys.length >= 2) {
+        return {
+            type: 'sequence',
+            fieldKey: auxiliaryKeys[1],
+        };
+    }
+    // Effect field: ['effects', effectIndex, fieldKey]
+    if (auxiliaryKeys[0] === 'effects' && auxiliaryKeys.length >= 3) {
+        const effectIndex = Number(auxiliaryKeys[1]);
+        if (!Number.isInteger(effectIndex) || effectIndex < 0) {
+            return null;
+        }
+        return {
+            type: 'effect',
+            effectIndex,
+            fieldKey: auxiliaryKeys[2],
+        };
+    }
+    return null;
+};
+exports.parseKeyframeFieldFromNodePath = parseKeyframeFieldFromNodePath;

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-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.js

@@ -10,13 +10,20 @@ 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: () => ({}),
+        getDragOverrides,
+        getEffectDragOverrides,
         codeValues,
-    }), [codeValues, nodePathInfo, sequence]);
+    }), [
+        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,

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' });