@remotion/studio 4.0.469 → 4.0.471

package/dist/components/Timeline/reset-selected-timeline-props.js

@@ -0,0 +1,143 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.resetSelectedTimelineProps = exports.getTimelinePropResetTargets = void 0;
+const remotion_1 = require("remotion");
+const find_track_for_node_path_info_1 = require("./find-track-for-node-path-info");
+const save_effect_prop_1 = require("./save-effect-prop");
+const save_sequence_prop_1 = require("./save-sequence-prop");
+const isPropResetSelection = (selection) => selection.type === 'sequence-prop' ||
+    selection.type === 'sequence-effect-prop';
+const isVisibleFieldSchema = (fieldSchema) => fieldSchema !== undefined && fieldSchema.type !== 'hidden';
+const isNonDefaultCodeValue = ({ codeValue, defaultValue, }) => JSON.stringify(codeValue !== null && codeValue !== void 0 ? codeValue : defaultValue) !== JSON.stringify(defaultValue);
+const getDefaultValue = (fieldSchema) => fieldSchema.default !== undefined
+    ? JSON.stringify(fieldSchema.default)
+    : null;
+const getTimelinePropResetTargets = ({ selections, sequences, overrideIdsToNodePaths, codeValues, }) => {
+    var _a;
+    var _b;
+    const firstSelection = selections[0];
+    if (!firstSelection || !isPropResetSelection(firstSelection)) {
+        return null;
+    }
+    const resetTargets = [];
+    for (const selection of selections) {
+        if (!isPropResetSelection(selection)) {
+            throw new Error(`Assertion failed: Cannot reset timeline selections of different types (${firstSelection.type}, ${selection.type})`);
+        }
+        const track = (0, find_track_for_node_path_info_1.findTrackForNodePathInfo)({
+            sequences,
+            overrideIdsToNodePaths,
+            nodePathInfo: selection.nodePathInfo,
+        });
+        const sequence = (_b = track === null || track === void 0 ? void 0 : track.sequence) !== null && _b !== void 0 ? _b : null;
+        if (!sequence) {
+            continue;
+        }
+        const nodePath = selection.nodePathInfo.sequenceSubscriptionKey;
+        if (selection.type === 'sequence-prop') {
+            if (!sequence.controls) {
+                continue;
+            }
+            const sequenceFieldSchema = sequence.controls.schema[selection.key];
+            const sequencePropStatus = (_a = remotion_1.Internals.getCodeValuesCtx(codeValues, nodePath)) === null || _a === void 0 ? void 0 : _a[selection.key];
+            if (!isVisibleFieldSchema(sequenceFieldSchema) ||
+                !(sequencePropStatus === null || sequencePropStatus === void 0 ? void 0 : sequencePropStatus.canUpdate) ||
+                !isNonDefaultCodeValue({
+                    codeValue: sequencePropStatus.codeValue,
+                    defaultValue: sequenceFieldSchema.default,
+                })) {
+                continue;
+            }
+            resetTargets.push({
+                type: 'sequence-prop',
+                fileName: nodePath.absolutePath,
+                nodePath,
+                fieldKey: selection.key,
+                value: sequenceFieldSchema.default,
+                defaultValue: getDefaultValue(sequenceFieldSchema),
+                schema: sequence.controls.schema,
+            });
+            continue;
+        }
+        const effect = sequence.effects[selection.i];
+        const fieldSchema = effect === null || effect === void 0 ? void 0 : effect.schema[selection.key];
+        const effectStatus = remotion_1.Internals.getEffectCodeValuesCtx({
+            codeValues,
+            nodePath,
+            effectIndex: selection.i,
+        });
+        const propStatus = effectStatus.type === 'can-update-effect'
+            ? effectStatus.props[selection.key]
+            : null;
+        if (!effect ||
+            !isVisibleFieldSchema(fieldSchema) ||
+            !(propStatus === null || propStatus === void 0 ? void 0 : propStatus.canUpdate) ||
+            !isNonDefaultCodeValue({
+                codeValue: propStatus.codeValue,
+                defaultValue: fieldSchema.default,
+            })) {
+            continue;
+        }
+        resetTargets.push({
+            type: 'effect-prop',
+            fileName: nodePath.absolutePath,
+            nodePath,
+            effectIndex: selection.i,
+            fieldKey: selection.key,
+            value: fieldSchema.default,
+            defaultValue: getDefaultValue(fieldSchema),
+            schema: effect.schema,
+        });
+    }
+    return resetTargets;
+};
+exports.getTimelinePropResetTargets = getTimelinePropResetTargets;
+const resetSelectedTimelineProps = ({ selections, sequences, overrideIdsToNodePaths, codeValues, setCodeValues, clientId, }) => {
+    const resetTargets = (0, exports.getTimelinePropResetTargets)({
+        selections,
+        sequences,
+        overrideIdsToNodePaths,
+        codeValues,
+    });
+    if (resetTargets === null || resetTargets.length === 0) {
+        return null;
+    }
+    const sequencePropTargets = resetTargets.filter((target) => target.type === 'sequence-prop');
+    const effectPropTargets = resetTargets.filter((target) => target.type === 'effect-prop');
+    const resetPromises = [];
+    if (sequencePropTargets.length > 0) {
+        resetPromises.push((0, save_sequence_prop_1.saveSequenceProps)({
+            changes: sequencePropTargets.map((target) => ({
+                fileName: target.fileName,
+                nodePath: target.nodePath,
+                fieldKey: target.fieldKey,
+                value: target.value,
+                defaultValue: target.defaultValue,
+                schema: target.schema,
+            })),
+            setCodeValues,
+            clientId,
+            undoLabel: sequencePropTargets.length > 1
+                ? 'Reset selected sequence props'
+                : null,
+            redoLabel: sequencePropTargets.length > 1
+                ? 'Reapply selected sequence props'
+                : null,
+        }));
+    }
+    for (const target of effectPropTargets) {
+        resetPromises.push((0, save_effect_prop_1.saveEffectProp)({
+            fileName: target.fileName,
+            nodePath: target.nodePath,
+            effectIndex: target.effectIndex,
+            fieldKey: target.fieldKey,
+            value: target.value,
+            defaultValue: target.defaultValue,
+            schema: target.schema,
+            setCodeValues,
+            clientId,
+        }));
+    }
+    return Promise.all(resetPromises).then(() => undefined);
+};
+exports.resetSelectedTimelineProps = resetSelectedTimelineProps;

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/sequence-props-subscription-store.d.ts

@@ -1,13 +1,14 @@
-import type { SequenceSchema } from 'remotion';
+import type { SequenceNodePath, SequenceSchema } from 'remotion';
 import { callApi } from '../call-api';
 type SubscribeResult = Awaited<ReturnType<typeof callApi<'/api/subscribe-to-sequence-props'>>>;
 type ApplyResult = (result: SubscribeResult) => void;
-export declare const acquireSequencePropsSubscription: ({ fileName, line, column, schema, effects, clientId, applyOnce, applyEach, }: {
+export declare const acquireSequencePropsSubscription: ({ fileName, line, column, schema, effects, nodePath, clientId, applyOnce, applyEach, }: {
     fileName: string;
     line: number;
     column: number;
     schema: SequenceSchema;
     effects: SequenceSchema[];
+    nodePath: SequenceNodePath | null;
     clientId: string;
     applyOnce: ApplyResult;
     applyEach: ApplyResult;

package/dist/components/Timeline/sequence-props-subscription-store.js

@@ -6,7 +6,7 @@ const remotion_1 = require("remotion");
 const call_api_1 = require("../call-api");
 const makeKey = (fileName, line, column, sequenceKeys, effectKeys) => `${fileName}\0${line}\0${column}\0${sequenceKeys.join('\0')}\0${effectKeys.map((keys) => keys.join('\0')).join('\0\0')}`;
 const entries = new Map();
-const acquireSequencePropsSubscription = ({ fileName, line, column, schema, effects, clientId, applyOnce, applyEach, }) => {
+const acquireSequencePropsSubscription = ({ fileName, line, column, schema, effects, nodePath, clientId, applyOnce, applyEach, }) => {
     const sequenceKeys = (0, studio_shared_1.getAllSchemaKeys)(schema);
     const effectKeys = effects.map((effect) => (0, studio_shared_1.getAllSchemaKeys)(effect));
     const key = makeKey(fileName, line, column, sequenceKeys, effectKeys);
@@ -16,6 +16,7 @@ const acquireSequencePropsSubscription = ({ fileName, line, column, schema, effe
             fileName,
             line,
             column,
+            nodePath,
             keys: (0, studio_shared_1.getAllSchemaKeys)(schema),
             effects: effectKeys,
             clientId,

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

@@ -172,7 +172,7 @@ const getFrameIncrement = (durationInFrames) => {
     return (0, exports.getFrameIncrementFromWidth)(durationInFrames, width);
 };
 const getFrameIncrementFromWidth = (durationInFrames, width) => {
-    return (width - timeline_layout_1.TIMELINE_PADDING * 2) / (durationInFrames - 1);
+    return (width - timeline_layout_1.TIMELINE_PADDING * 2) / durationInFrames;
 };
 exports.getFrameIncrementFromWidth = getFrameIncrementFromWidth;
 const getFrameWhileScrollingRight = ({ durationInFrames, width, }) => {
@@ -193,10 +193,10 @@ const getFrameWhileScrollingRight = ({ durationInFrames, width, }) => {
 exports.getFrameWhileScrollingRight = getFrameWhileScrollingRight;
 const getFrameFromX = ({ clientX, durationInFrames, width, extrapolate, }) => {
     const pos = clientX - timeline_layout_1.TIMELINE_PADDING;
-    const frame = Math.round((0, remotion_1.interpolate)(pos, [0, width - timeline_layout_1.TIMELINE_PADDING * 2], [0, durationInFrames - 1], {
+    const frame = Math.min(durationInFrames - 1, Math.round((0, remotion_1.interpolate)(pos, [0, width - timeline_layout_1.TIMELINE_PADDING * 2], [0, durationInFrames], {
         extrapolateLeft: extrapolate,
         extrapolateRight: extrapolate,
-    }));
+    })));
     return frame;
 };
 exports.getFrameFromX = getFrameFromX;

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/Timeline/use-sequence-props-subscription.js

@@ -36,7 +36,7 @@ const useSequencePropsSubscription = ({ originalLocation, overrideId, schema, ef
     const locationLine = (_b = validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.line) !== null && _b !== void 0 ? _b : null;
     const locationColumn = (_c = validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.column) !== null && _c !== void 0 ? _c : null;
     (0, react_1.useEffect)(() => {
-        var _a;
+        var _a, _b;
         if (!clientId ||
             !locationSource ||
             !locationLine ||
@@ -51,6 +51,7 @@ const useSequencePropsSubscription = ({ originalLocation, overrideId, schema, ef
             column: locationColumn,
             schema,
             effects,
+            nodePath: (_b = nodePathAtResubscribe === null || nodePathAtResubscribe === void 0 ? void 0 : nodePathAtResubscribe.nodePath) !== null && _b !== void 0 ? _b : null,
             clientId,
             applyOnce: (result) => {
                 if (!result.success) {

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