@remotion/studio 4.0.471 → 4.0.473

package/dist/components/Timeline/TimelineSequencePropItem.js

@@ -2,10 +2,13 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TimelineSequencePropItem = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const studio_shared_1 = require("@remotion/studio-shared");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
 const client_id_1 = require("../../helpers/client-id");
+const modals_1 = require("../../state/modals");
 const ContextMenu_1 = require("../ContextMenu");
+const call_add_keyframe_1 = require("./call-add-keyframe");
 const save_sequence_prop_1 = require("./save-sequence-prop");
 const timeline_field_row_layout_1 = require("./timeline-field-row-layout");
 const TimelineExpandArrowButton_1 = require("./TimelineExpandArrowButton");
@@ -17,6 +20,23 @@ const TimelineRowChrome_1 = require("./TimelineRowChrome");
 const TimelineSchemaField_1 = require("./TimelineSchemaField");
 const TimelineSelection_1 = require("./TimelineSelection");
 const fieldRowBase = {};
+const isKeyframedStatus = (status) => {
+    return status.status === 'keyframed';
+};
+const isResettableStatus = ({ status, defaultValue, }) => {
+    var _a;
+    if (defaultValue === undefined) {
+        return false;
+    }
+    if (status.status === 'keyframed') {
+        return true;
+    }
+    if (status.status === 'computed') {
+        return false;
+    }
+    const effectiveCodeValue = (_a = status.codeValue) !== null && _a !== void 0 ? _a : defaultValue;
+    return JSON.stringify(effectiveCodeValue) !== JSON.stringify(defaultValue);
+};
 const Value = ({ field, nodePath, validatedLocation, schema, codeValue }) => {
     const { getDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeDragOverridesContext);
     const { setDragOverrides, clearDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
@@ -38,9 +58,7 @@ const Value = ({ field, nodePath, validatedLocation, schema, codeValue }) => {
         ? previewServerState.clientId
         : null;
     const onSave = (0, react_1.useCallback)((value) => {
-        if (!codeValue || !codeValue.canUpdate) {
-            return Promise.reject(new Error('Cannot save'));
-        }
+        var _a;
         if (!clientId) {
             return Promise.reject(new Error('Not connected to studio server'));
         }
@@ -48,6 +66,7 @@ const Value = ({ field, nodePath, validatedLocation, schema, codeValue }) => {
             ? JSON.stringify(field.fieldSchema.default)
             : null;
         const stringifiedValue = JSON.stringify(value);
+        const fieldLabel = (_a = field.description) !== null && _a !== void 0 ? _a : field.key;
         if (value === codeValue.codeValue) {
             return Promise.resolve();
         }
@@ -55,19 +74,26 @@ const Value = ({ field, nodePath, validatedLocation, schema, codeValue }) => {
             codeValue.codeValue === undefined) {
             return Promise.resolve();
         }
-        return (0, save_sequence_prop_1.saveSequenceProp)({
-            fileName: validatedLocation.source,
-            nodePath,
-            fieldKey: field.key,
-            value,
-            defaultValue,
-            schema,
+        return (0, save_sequence_prop_1.saveSequenceProps)({
+            changes: [
+                {
+                    fileName: validatedLocation.source,
+                    nodePath,
+                    fieldKey: field.key,
+                    value,
+                    defaultValue,
+                    schema,
+                },
+            ],
             setCodeValues,
             clientId,
+            undoLabel: `Update ${fieldLabel}`,
+            redoLabel: `Update ${fieldLabel} again`,
         });
     }, [
         codeValue,
         clientId,
+        field.description,
         field.fieldSchema.default,
         field.key,
         nodePath,
@@ -79,7 +105,7 @@ const Value = ({ field, nodePath, validatedLocation, schema, codeValue }) => {
         if (nodePath === null) {
             throw new Error('Cannot drag value');
         }
-        setDragOverrides(nodePath, field.key, value);
+        setDragOverrides(nodePath, field.key, remotion_1.Internals.makeStaticDragOverride(value));
     }, [setDragOverrides, nodePath, field.key]);
     const onDragEnd = (0, react_1.useCallback)(() => {
         if (nodePath === null) {
@@ -87,17 +113,23 @@ const Value = ({ field, nodePath, validatedLocation, schema, codeValue }) => {
         }
         clearDragOverrides(nodePath);
     }, [clearDragOverrides, nodePath]);
-    return (jsx_runtime_1.jsx(TimelineSchemaField_1.TimelineFieldValue, { field: field, propStatus: codeValue, onSave: onSave, onDragValueChange: onDragValueChange, onDragEnd: onDragEnd, effectiveValue: effectiveValue }));
+    return (jsx_runtime_1.jsx(TimelineSchemaField_1.TimelineFieldValue, { field: field, propStatus: codeValue, onSave: onSave, onDragValueChange: onDragValueChange, onDragEnd: onDragEnd, effectiveValue: effectiveValue, scaleLockNodePath: nodePath }));
 };
 const TimelineSequencePropItem = ({ field, validatedLocation, rowDepth, nodePath, nodePathInfo, schema, keyframeDisplayOffset, }) => {
     var _a, _b;
     const { codeValues: visualModeCodeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeCodeValuesContext);
     const { getDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeDragOverridesContext);
-    const { setCodeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
+    const { setCodeValues, setDragOverrides, clearDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
+    const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
     const selection = (0, TimelineSelection_1.useTimelineRowSelection)(nodePathInfo);
+    const clientId = previewServerState.type === 'connected'
+        ? previewServerState.clientId
+        : null;
     const codeValuesForOverride = remotion_1.Internals.getCodeValuesCtx(visualModeCodeValues, nodePath);
     const codeValue = (_a = codeValuesForOverride === null || codeValuesForOverride === void 0 ? void 0 : codeValuesForOverride[field.key]) !== null && _a !== void 0 ? _a : null;
+    const timelinePosition = remotion_1.Internals.Timeline.useTimelinePosition();
+    const jsxFrame = timelinePosition - keyframeDisplayOffset;
     const dragOverrideValue = (0, react_1.useMemo)(() => {
         var _a;
         return ((_a = getDragOverrides(nodePath)) !== null && _a !== void 0 ? _a : {})[field.key];
@@ -106,6 +138,10 @@ const TimelineSequencePropItem = ({ field, validatedLocation, rowDepth, nodePath
         (0, TimelineKeyframeControls_1.shouldShowTimelineKeyframeControls)({
             propStatus: codeValue,
             selected: selection.selected,
+            keyframable: (0, studio_shared_1.isSchemaFieldKeyframable)({
+                schema,
+                key: field.key,
+            }),
         }) ? (jsx_runtime_1.jsx(TimelineKeyframeControls_1.TimelineKeyframeControls, { fieldKey: field.key, propStatus: codeValue, nodePath: nodePath, fileName: validatedLocation.source, keyframeDisplayOffset: keyframeDisplayOffset, defaultValue: field.fieldSchema.default, dragOverrideValue: dragOverrideValue, schema: schema, effectIndex: null })) : null;
     const style = (0, react_1.useMemo)(() => {
         return {
@@ -113,71 +149,161 @@ const TimelineSequencePropItem = ({ field, validatedLocation, rowDepth, nodePath
             height: field.rowHeight,
         };
     }, [field.rowHeight]);
-    const isNonDefault = (0, react_1.useMemo)(() => {
-        var _a;
-        if (!codeValue || !codeValue.canUpdate) {
+    const canResetToDefault = (0, react_1.useMemo)(() => {
+        if (!codeValue || codeValue.status === 'computed') {
             return false;
         }
-        const effectiveCodeValue = (_a = codeValue.codeValue) !== null && _a !== void 0 ? _a : field.fieldSchema.default;
-        return (JSON.stringify(effectiveCodeValue) !==
-            JSON.stringify(field.fieldSchema.default));
+        return isResettableStatus({
+            status: codeValue,
+            defaultValue: field.fieldSchema.default,
+        });
     }, [codeValue, field.fieldSchema.default]);
     const canPerformReset = previewServerState.type === 'connected' &&
         codeValue !== null &&
-        codeValue.canUpdate;
+        codeValue.status !== 'computed';
+    const canShowReset = canPerformReset && field.fieldSchema.default !== undefined;
     const onReset = (0, react_1.useCallback)(() => {
-        if (!canPerformReset ||
+        var _a;
+        if (!canShowReset ||
+            !canResetToDefault ||
             previewServerState.type !== 'connected' ||
-            codeValue === null ||
-            !isNonDefault) {
+            codeValue === null) {
             return;
         }
         const defaultValue = field.fieldSchema.default !== undefined
             ? JSON.stringify(field.fieldSchema.default)
             : null;
-        (0, save_sequence_prop_1.saveSequenceProp)({
+        const fieldLabel = (_a = field.description) !== null && _a !== void 0 ? _a : field.key;
+        (0, save_sequence_prop_1.saveSequenceProps)({
+            changes: [
+                {
+                    fileName: validatedLocation.source,
+                    nodePath,
+                    fieldKey: field.key,
+                    value: field.fieldSchema.default,
+                    defaultValue,
+                    schema,
+                },
+            ],
+            setCodeValues,
+            clientId: previewServerState.clientId,
+            undoLabel: `Reset ${fieldLabel}`,
+            redoLabel: `Reapply ${fieldLabel}`,
+        });
+    }, [
+        canResetToDefault,
+        canShowReset,
+        field.description,
+        field.fieldSchema.default,
+        field.key,
+        nodePath,
+        previewServerState,
+        schema,
+        setCodeValues,
+        validatedLocation.source,
+        codeValue,
+    ]);
+    const onSaveKeyframed = (0, react_1.useCallback)((value, sourceFrame) => {
+        if (!clientId) {
+            return Promise.reject(new Error('Not connected to studio server'));
+        }
+        return (0, call_add_keyframe_1.callAddSequenceKeyframe)({
             fileName: validatedLocation.source,
             nodePath,
             fieldKey: field.key,
-            value: field.fieldSchema.default,
-            defaultValue,
+            sourceFrame,
+            value,
             schema,
             setCodeValues,
-            clientId: previewServerState.clientId,
+            clientId,
         });
     }, [
-        canPerformReset,
-        field.fieldSchema.default,
+        clientId,
         field.key,
-        isNonDefault,
         nodePath,
-        previewServerState,
         schema,
         setCodeValues,
         validatedLocation.source,
+    ]);
+    const onKeyframedDragValueChange = (0, react_1.useCallback)((value) => {
+        if (codeValue === null || !isKeyframedStatus(codeValue)) {
+            throw new Error('Expected keyframed status');
+        }
+        setDragOverrides(nodePath, field.key, remotion_1.Internals.makeKeyframedDragOverride({
+            status: codeValue,
+            frame: jsxFrame,
+            value,
+        }));
+    }, [codeValue, field.key, jsxFrame, nodePath, setDragOverrides]);
+    const onKeyframedDragEnd = (0, react_1.useCallback)(() => {
+        clearDragOverrides(nodePath);
+    }, [clearDragOverrides, nodePath]);
+    const onOpenKeyframeSettings = (0, react_1.useCallback)(() => {
+        var _a;
+        if (codeValue === null || !isKeyframedStatus(codeValue)) {
+            return;
+        }
+        setSelectedModal({
+            type: 'keyframe-settings',
+            fileName: validatedLocation.source,
+            nodePath,
+            fieldKey: field.key,
+            fieldLabel: (_a = field.description) !== null && _a !== void 0 ? _a : field.key,
+            status: codeValue,
+            schema,
+            effectIndex: null,
+        });
+    }, [
         codeValue,
+        field.description,
+        field.key,
+        nodePath,
+        schema,
+        setSelectedModal,
+        validatedLocation.source,
     ]);
     const contextMenuValues = (0, react_1.useMemo)(() => {
-        return [
+        const values = [
             {
                 type: 'item',
                 id: 'reset-sequence-field',
                 keyHint: null,
                 label: 'Reset',
                 leftItem: null,
-                disabled: !canPerformReset,
+                disabled: !canShowReset,
                 onClick: onReset,
                 quickSwitcherLabel: null,
                 subMenu: null,
                 value: 'reset-sequence-field',
             },
         ];
-    }, [canPerformReset, onReset]);
+        if (codeValue !== null && isKeyframedStatus(codeValue)) {
+            values.push({
+                type: 'item',
+                id: 'keyframe-settings-sequence-field',
+                keyHint: null,
+                label: 'Keyframe settings...',
+                leftItem: null,
+                disabled: previewServerState.type !== 'connected',
+                onClick: onOpenKeyframeSettings,
+                quickSwitcherLabel: null,
+                subMenu: null,
+                value: 'keyframe-settings-sequence-field',
+            });
+        }
+        return values;
+    }, [
+        canShowReset,
+        codeValue,
+        onOpenKeyframeSettings,
+        onReset,
+        previewServerState,
+    ]);
     if (codeValue === null) {
         return null;
     }
     const row = (jsx_runtime_1.jsxs(TimelineRowChrome_1.TimelineRowChrome, { depth: rowDepth, eye: jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEyeSpacer, {}), keyframeControls: keyframeControls, arrow: jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowSpacer, {}), style: style, selected: selection.selected, selectable: selection.selectable, onSelect: selection.onSelect, showSelectedBackground: true, containsSelection: false, outerHeight: null, children: [
-            jsx_runtime_1.jsx(TimelineFieldLabel_1.TimelineFieldLabel, { rowDepth: rowDepth, selected: selection.selected, label: (_b = field.description) !== null && _b !== void 0 ? _b : field.key }), codeValue.canUpdate ? (jsx_runtime_1.jsx("div", { style: timeline_field_row_layout_1.timelineFieldValueColumnStyle, children: jsx_runtime_1.jsx(Value, { field: field, nodePath: nodePath, validatedLocation: validatedLocation, schema: schema, codeValue: codeValue }) })) : codeValue.reason === 'keyframed' ? (jsx_runtime_1.jsx("div", { style: timeline_field_row_layout_1.timelineFieldValueColumnStyle, children: jsx_runtime_1.jsx(TimelineKeyframedValue_1.TimelineKeyframedValue, { field: field, propStatus: codeValue, keyframeDisplayOffset: keyframeDisplayOffset }) })) : (jsx_runtime_1.jsx("div", { style: timeline_field_row_layout_1.timelineFieldValueColumnStyle, children: jsx_runtime_1.jsx(TimelineSchemaField_1.TimelineNonEditableStatus, { propStatus: codeValue }) }))] }));
+            jsx_runtime_1.jsx(TimelineFieldLabel_1.TimelineFieldLabel, { rowDepth: rowDepth, selected: selection.selected, label: (_b = field.description) !== null && _b !== void 0 ? _b : field.key }), isKeyframedStatus(codeValue) ? (jsx_runtime_1.jsx("div", { style: timeline_field_row_layout_1.timelineFieldValueColumnStyle, children: jsx_runtime_1.jsx(TimelineKeyframedValue_1.TimelineKeyframedValue, { field: field, propStatus: codeValue, keyframeDisplayOffset: keyframeDisplayOffset, dragOverrideValue: dragOverrideValue, onSave: onSaveKeyframed, onDragValueChange: onKeyframedDragValueChange, onDragEnd: onKeyframedDragEnd, scaleLockNodePath: nodePath }) })) : codeValue.status === 'static' ? (jsx_runtime_1.jsx("div", { style: timeline_field_row_layout_1.timelineFieldValueColumnStyle, children: jsx_runtime_1.jsx(Value, { field: field, nodePath: nodePath, validatedLocation: validatedLocation, schema: schema, codeValue: codeValue }) })) : (jsx_runtime_1.jsx("div", { style: timeline_field_row_layout_1.timelineFieldValueColumnStyle, children: jsx_runtime_1.jsx(TimelineSchemaField_1.TimelineNonEditableStatus, { propStatus: codeValue }) }))] }));
     return (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { values: contextMenuValues, onOpen: selection.selectable ? selection.onSelect : null, children: row }));
 };
 exports.TimelineSequencePropItem = TimelineSequencePropItem;

package/dist/components/Timeline/TimelineSequenceRightEdgeDragHandle.d.ts

@@ -0,0 +1,58 @@
+import React from 'react';
+import type { CodeValues, OverrideIdToNodePaths, SequencePropsSubscriptionKey, TSequence } from 'remotion';
+import type { SequenceNodePathInfo } from '../../helpers/get-timeline-sequence-sort-key';
+import { type SaveSequencePropChange } from './save-sequence-prop';
+import { type TimelineSelection } from './TimelineSelection';
+export type TimelineSequenceDurationDragTarget = {
+    readonly fileName: string;
+    readonly initialDuration: number;
+    readonly nodePath: SequencePropsSubscriptionKey;
+};
+export type TimelineSequenceFromDragTarget = {
+    readonly fileName: string;
+    readonly initialFrom: number;
+    readonly nodePath: SequencePropsSubscriptionKey;
+};
+export declare const getTimelineSequenceDurationDragValue: ({ initialDuration, deltaFrames, }: {
+    readonly initialDuration: number;
+    readonly deltaFrames: number;
+}) => number;
+export declare const getTimelineSequenceDurationDragChanges: ({ targets, deltaFrames, }: {
+    readonly targets: readonly TimelineSequenceDurationDragTarget[];
+    readonly deltaFrames: number;
+}) => SaveSequencePropChange[];
+export declare const getTimelineSequenceFromDragValue: ({ initialFrom, deltaFrames, }: {
+    readonly initialFrom: number;
+    readonly deltaFrames: number;
+}) => number;
+export declare const getTimelineSequenceFromDragChanges: ({ targets, deltaFrames, }: {
+    readonly targets: readonly TimelineSequenceFromDragTarget[];
+    readonly deltaFrames: number;
+}) => SaveSequencePropChange[];
+export declare const getTimelineSequenceDurationDragTargets: ({ draggedNodePathInfo, selectedItems, sequences, overrideIdsToNodePaths, codeValues, }: {
+    readonly draggedNodePathInfo: SequenceNodePathInfo;
+    readonly selectedItems: readonly TimelineSelection[];
+    readonly sequences: TSequence[];
+    readonly overrideIdsToNodePaths: OverrideIdToNodePaths;
+    readonly codeValues: CodeValues;
+}) => TimelineSequenceDurationDragTarget[] | null;
+export declare const getTimelineSequenceFromDragTargets: ({ draggedNodePathInfo, selectedItems, sequences, overrideIdsToNodePaths, codeValues, }: {
+    readonly draggedNodePathInfo: SequenceNodePathInfo;
+    readonly selectedItems: readonly TimelineSelection[];
+    readonly sequences: TSequence[];
+    readonly overrideIdsToNodePaths: OverrideIdToNodePaths;
+    readonly codeValues: CodeValues;
+}) => TimelineSequenceFromDragTarget[] | null;
+export declare const useTimelineSequenceFromDrag: ({ nodePathInfo, windowWidth, timelineDurationInFrames, }: {
+    readonly nodePathInfo: SequenceNodePathInfo | null;
+    readonly windowWidth: number;
+    readonly timelineDurationInFrames: number;
+}) => {
+    dragging: boolean;
+    onPointerDown: (e: React.PointerEvent<HTMLDivElement>) => void;
+};
+export declare const TimelineSequenceRightEdgeDragHandle: React.FC<{
+    readonly nodePathInfo: SequenceNodePathInfo;
+    readonly windowWidth: number;
+    readonly timelineDurationInFrames: number;
+}>;