@remotion/studio 4.0.471 → 4.0.473

package/dist/components/Timeline/TimelineSequenceRightEdgeDragHandle.js

@@ -0,0 +1,525 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TimelineSequenceRightEdgeDragHandle = exports.useTimelineSequenceFromDrag = exports.getTimelineSequenceFromDragTargets = exports.getTimelineSequenceDurationDragTargets = exports.getTimelineSequenceFromDragChanges = exports.getTimelineSequenceFromDragValue = exports.getTimelineSequenceDurationDragChanges = exports.getTimelineSequenceDurationDragValue = 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 no_react_1 = require("remotion/no-react");
+const calculate_timeline_1 = require("../../helpers/calculate-timeline");
+const client_id_1 = require("../../helpers/client-id");
+const timeline_layout_1 = require("../../helpers/timeline-layout");
+const ForceSpecificCursor_1 = require("../ForceSpecificCursor");
+const save_sequence_prop_1 = require("./save-sequence-prop");
+const TimelineSelection_1 = require("./TimelineSelection");
+const HANDLE_WIDTH = 6;
+const baseStyle = {
+    position: 'absolute',
+    top: 0,
+    bottom: 0,
+    width: HANDLE_WIDTH,
+    cursor: 'ew-resize',
+    zIndex: 1,
+    touchAction: 'none',
+};
+const canUpdateDurationInFrames = ({ codeValues, nodePath, }) => {
+    var _a, _b;
+    const status = (_b = (_a = remotion_1.Internals.getCodeValuesCtx(codeValues, nodePath)) === null || _a === void 0 ? void 0 : _a.durationInFrames) === null || _b === void 0 ? void 0 : _b.status;
+    return status === 'static';
+};
+const canUpdateFrom = ({ codeValues, nodePath, }) => {
+    var _a, _b;
+    const status = (_b = (_a = remotion_1.Internals.getCodeValuesCtx(codeValues, nodePath)) === null || _a === void 0 ? void 0 : _a.from) === null || _b === void 0 ? void 0 : _b.status;
+    return status === 'static';
+};
+const isDurationDraggableSequence = (sequence) => {
+    return ((sequence.type === 'sequence' || sequence.type === 'image') &&
+        !sequence.loopDisplay &&
+        !sequence.isInsideSeries &&
+        Boolean(sequence.controls));
+};
+const isFromDraggableSequence = (sequence) => {
+    return (!sequence.loopDisplay &&
+        !sequence.isInsideSeries &&
+        Boolean(sequence.controls));
+};
+const getTimelineSequenceDurationDragValue = ({ initialDuration, deltaFrames, }) => Math.max(1, initialDuration + deltaFrames);
+exports.getTimelineSequenceDurationDragValue = getTimelineSequenceDurationDragValue;
+const getTimelineSequenceDurationDragChanges = ({ targets, deltaFrames, }) => {
+    return targets.flatMap((target) => {
+        const nextValue = (0, exports.getTimelineSequenceDurationDragValue)({
+            initialDuration: target.initialDuration,
+            deltaFrames,
+        });
+        if (nextValue === target.initialDuration) {
+            return [];
+        }
+        return [
+            {
+                fileName: target.fileName,
+                nodePath: target.nodePath,
+                fieldKey: 'durationInFrames',
+                value: nextValue,
+                defaultValue: null,
+                schema: no_react_1.NoReactInternals.sequenceSchema,
+            },
+        ];
+    });
+};
+exports.getTimelineSequenceDurationDragChanges = getTimelineSequenceDurationDragChanges;
+const getTimelineSequenceFromDragValue = ({ initialFrom, deltaFrames, }) => initialFrom + deltaFrames;
+exports.getTimelineSequenceFromDragValue = getTimelineSequenceFromDragValue;
+const getTimelineSequenceFromDragChanges = ({ targets, deltaFrames, }) => {
+    return targets.flatMap((target) => {
+        const nextValue = (0, exports.getTimelineSequenceFromDragValue)({
+            initialFrom: target.initialFrom,
+            deltaFrames,
+        });
+        if (nextValue === target.initialFrom) {
+            return [];
+        }
+        return [
+            {
+                fileName: target.fileName,
+                nodePath: target.nodePath,
+                fieldKey: 'from',
+                value: nextValue,
+                defaultValue: '0',
+                schema: no_react_1.NoReactInternals.sequenceSchema,
+            },
+        ];
+    });
+};
+exports.getTimelineSequenceFromDragChanges = getTimelineSequenceFromDragChanges;
+const findSequenceTrack = ({ tracks, nodePathInfo, }) => {
+    const key = (0, studio_shared_1.stringifySequenceSubscriptionKey)(nodePathInfo.sequenceSubscriptionKey);
+    return tracks.find((candidate) => {
+        if (candidate.nodePathInfo === null) {
+            return false;
+        }
+        return ((0, studio_shared_1.stringifySequenceSubscriptionKey)(candidate.nodePathInfo.sequenceSubscriptionKey) === key && candidate.nodePathInfo.index === nodePathInfo.index);
+    });
+};
+const getTimelineSequenceDurationDragTargets = ({ draggedNodePathInfo, selectedItems, sequences, overrideIdsToNodePaths, codeValues, }) => {
+    const draggedSelectionKey = (0, TimelineSelection_1.getTimelineSequenceSelectionKey)(draggedNodePathInfo);
+    const selectedSequenceItems = selectedItems.filter((item) => item.type === 'sequence');
+    const draggedItemIsSelected = selectedSequenceItems.some((item) => (0, TimelineSelection_1.getTimelineSequenceSelectionKey)(item.nodePathInfo) ===
+        draggedSelectionKey);
+    if (draggedItemIsSelected &&
+        selectedSequenceItems.length !== selectedItems.length) {
+        return null;
+    }
+    const targetNodePathInfos = draggedItemIsSelected && selectedSequenceItems.length > 1
+        ? selectedSequenceItems.map((item) => item.nodePathInfo)
+        : [draggedNodePathInfo];
+    const tracks = (0, calculate_timeline_1.calculateTimeline)({ sequences, overrideIdsToNodePaths });
+    const targets = new Map();
+    for (const nodePathInfo of targetNodePathInfos) {
+        const track = findSequenceTrack({ tracks, nodePathInfo });
+        const originalSequence = track
+            ? sequences.find((sequence) => sequence.id === track.sequence.id)
+            : null;
+        if (!track ||
+            !originalSequence ||
+            !isDurationDraggableSequence(originalSequence)) {
+            return null;
+        }
+        const nodePath = nodePathInfo.sequenceSubscriptionKey;
+        if (!canUpdateDurationInFrames({ codeValues, nodePath })) {
+            return null;
+        }
+        const key = (0, studio_shared_1.stringifySequenceSubscriptionKey)(nodePath);
+        if (!targets.has(key)) {
+            targets.set(key, {
+                fileName: nodePath.absolutePath,
+                initialDuration: originalSequence.duration,
+                nodePath,
+            });
+        }
+    }
+    return [...targets.values()];
+};
+exports.getTimelineSequenceDurationDragTargets = getTimelineSequenceDurationDragTargets;
+const getTimelineSequenceFromDragTargets = ({ draggedNodePathInfo, selectedItems, sequences, overrideIdsToNodePaths, codeValues, }) => {
+    const draggedSelectionKey = (0, TimelineSelection_1.getTimelineSequenceSelectionKey)(draggedNodePathInfo);
+    const selectedSequenceItems = selectedItems.filter((item) => item.type === 'sequence');
+    const draggedItemIsSelected = selectedSequenceItems.some((item) => (0, TimelineSelection_1.getTimelineSequenceSelectionKey)(item.nodePathInfo) ===
+        draggedSelectionKey);
+    if (draggedItemIsSelected &&
+        selectedSequenceItems.length !== selectedItems.length) {
+        return null;
+    }
+    const targetNodePathInfos = draggedItemIsSelected && selectedSequenceItems.length > 1
+        ? selectedSequenceItems.map((item) => item.nodePathInfo)
+        : [draggedNodePathInfo];
+    const tracks = (0, calculate_timeline_1.calculateTimeline)({ sequences, overrideIdsToNodePaths });
+    const targets = new Map();
+    for (const nodePathInfo of targetNodePathInfos) {
+        const track = findSequenceTrack({ tracks, nodePathInfo });
+        const originalSequence = track
+            ? sequences.find((sequence) => sequence.id === track.sequence.id)
+            : null;
+        if (!track ||
+            !originalSequence ||
+            !isFromDraggableSequence(originalSequence)) {
+            return null;
+        }
+        const nodePath = nodePathInfo.sequenceSubscriptionKey;
+        if (!canUpdateFrom({ codeValues, nodePath })) {
+            return null;
+        }
+        const key = (0, studio_shared_1.stringifySequenceSubscriptionKey)(nodePath);
+        if (!targets.has(key)) {
+            targets.set(key, {
+                fileName: nodePath.absolutePath,
+                initialFrom: originalSequence.from,
+                nodePath,
+            });
+        }
+    }
+    return [...targets.values()];
+};
+exports.getTimelineSequenceFromDragTargets = getTimelineSequenceFromDragTargets;
+const clearDurationDragOverrides = ({ clearDragOverrides, targets, }) => {
+    for (const target of targets) {
+        clearDragOverrides(target.nodePath);
+    }
+};
+const clearFromDragOverrides = ({ clearDragOverrides, targets, }) => {
+    for (const target of targets) {
+        clearDragOverrides(target.nodePath);
+    }
+};
+const useTimelineSequenceFromDrag = ({ nodePathInfo, windowWidth, timelineDurationInFrames, }) => {
+    const { setCodeValues, setDragOverrides, clearDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
+    const { codeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeCodeValuesContext);
+    const { sequences } = (0, react_1.useContext)(remotion_1.Internals.SequenceManager);
+    const { overrideIdToNodePathMappings } = (0, react_1.useContext)(remotion_1.Internals.OverrideIdsToNodePathsGettersContext);
+    const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
+    const { selectedItems } = (0, TimelineSelection_1.useTimelineSelection)();
+    const [dragging, setDragging] = (0, react_1.useState)(false);
+    const dragStateRef = (0, react_1.useRef)(null);
+    const latestRef = (0, react_1.useRef)({
+        nodePathInfo,
+        setCodeValues,
+        setDragOverrides,
+        clearDragOverrides,
+        previewServerState,
+        codeValues,
+        sequences,
+        overrideIdToNodePathMappings,
+        selectedItems,
+    });
+    latestRef.current = {
+        nodePathInfo,
+        setCodeValues,
+        setDragOverrides,
+        clearDragOverrides,
+        previewServerState,
+        codeValues,
+        sequences,
+        overrideIdToNodePathMappings,
+        selectedItems,
+    };
+    const finishDrag = (0, react_1.useCallback)((commit) => {
+        const dragState = dragStateRef.current;
+        dragStateRef.current = null;
+        document.body.style.userSelect = '';
+        document.body.style.webkitUserSelect = '';
+        setDragging(false);
+        if (!dragState) {
+            return;
+        }
+        const { setCodeValues: latestSetCodeValues, clearDragOverrides: latestClear, previewServerState: latestServerState, } = latestRef.current;
+        const changes = (0, exports.getTimelineSequenceFromDragChanges)({
+            targets: dragState.targets,
+            deltaFrames: dragState.latestDeltaFrames,
+        });
+        if (!commit ||
+            latestServerState.type !== 'connected' ||
+            changes.length === 0) {
+            clearFromDragOverrides({
+                clearDragOverrides: latestClear,
+                targets: dragState.targets,
+            });
+            return;
+        }
+        const savePromise = (0, save_sequence_prop_1.saveSequenceProps)({
+            changes,
+            setCodeValues: latestSetCodeValues,
+            clientId: latestServerState.clientId,
+            undoLabel: changes.length > 1 ? 'Move selected sequences' : 'Move sequence',
+            redoLabel: changes.length > 1
+                ? 'Move selected sequences back'
+                : 'Move sequence back',
+        });
+        savePromise
+            .catch((err) => {
+            remotion_1.Internals.Log.error({ logLevel: 'error', tag: null }, 'Could not save from', err);
+        })
+            .finally(() => {
+            clearFromDragOverrides({
+                clearDragOverrides: latestClear,
+                targets: dragState.targets,
+            });
+        });
+    }, []);
+    const onPointerDown = (0, react_1.useCallback)((e) => {
+        if (e.button !== 0) {
+            return;
+        }
+        const pxPerFrame = timelineDurationInFrames > 0
+            ? (windowWidth - timeline_layout_1.TIMELINE_PADDING * 2) / timelineDurationInFrames
+            : 0;
+        if (pxPerFrame <= 0) {
+            return;
+        }
+        const { nodePathInfo: latestNodePathInfo, selectedItems: latestSelectedItems, sequences: latestSequences, overrideIdToNodePathMappings: latestOverrideIdsToNodePaths, codeValues: latestCodeValues, } = latestRef.current;
+        if (latestNodePathInfo === null) {
+            return;
+        }
+        const targets = (0, exports.getTimelineSequenceFromDragTargets)({
+            draggedNodePathInfo: latestNodePathInfo,
+            selectedItems: latestSelectedItems,
+            sequences: latestSequences,
+            overrideIdsToNodePaths: latestOverrideIdsToNodePaths,
+            codeValues: latestCodeValues,
+        });
+        if (targets === null || targets.length === 0) {
+            return;
+        }
+        e.preventDefault();
+        dragStateRef.current = {
+            initialClientX: e.clientX,
+            latestDeltaFrames: 0,
+            pxPerFrame,
+            pointerId: e.pointerId,
+            targets,
+        };
+        document.body.style.userSelect = 'none';
+        document.body.style.webkitUserSelect = 'none';
+        setDragging(true);
+    }, [timelineDurationInFrames, windowWidth]);
+    (0, react_1.useEffect)(() => {
+        if (!dragging) {
+            return;
+        }
+        const onMove = (e) => {
+            const dragState = dragStateRef.current;
+            if (!dragState || e.pointerId !== dragState.pointerId) {
+                return;
+            }
+            const dx = e.clientX - dragState.initialClientX;
+            const deltaFrames = Math.round(dx / dragState.pxPerFrame);
+            dragState.latestDeltaFrames = deltaFrames;
+            for (const target of dragState.targets) {
+                latestRef.current.setDragOverrides(target.nodePath, 'from', remotion_1.Internals.makeStaticDragOverride((0, exports.getTimelineSequenceFromDragValue)({
+                    initialFrom: target.initialFrom,
+                    deltaFrames,
+                })));
+            }
+        };
+        const onUp = (e) => {
+            const dragState = dragStateRef.current;
+            if (!dragState || e.pointerId !== dragState.pointerId) {
+                return;
+            }
+            finishDrag(true);
+        };
+        const onCancel = (e) => {
+            const dragState = dragStateRef.current;
+            if (!dragState || e.pointerId !== dragState.pointerId) {
+                return;
+            }
+            finishDrag(false);
+        };
+        const onWindowBlur = () => {
+            finishDrag(false);
+        };
+        window.addEventListener('pointermove', onMove);
+        window.addEventListener('pointerup', onUp);
+        window.addEventListener('pointercancel', onCancel);
+        window.addEventListener('blur', onWindowBlur);
+        return () => {
+            window.removeEventListener('pointermove', onMove);
+            window.removeEventListener('pointerup', onUp);
+            window.removeEventListener('pointercancel', onCancel);
+            window.removeEventListener('blur', onWindowBlur);
+        };
+    }, [dragging, finishDrag]);
+    return {
+        dragging,
+        onPointerDown,
+    };
+};
+exports.useTimelineSequenceFromDrag = useTimelineSequenceFromDrag;
+const TimelineSequenceRightEdgeDragHandle = ({ nodePathInfo, windowWidth, timelineDurationInFrames }) => {
+    const { setCodeValues, setDragOverrides, clearDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
+    const { codeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeCodeValuesContext);
+    const { sequences } = (0, react_1.useContext)(remotion_1.Internals.SequenceManager);
+    const { overrideIdToNodePathMappings } = (0, react_1.useContext)(remotion_1.Internals.OverrideIdsToNodePathsGettersContext);
+    const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
+    const { selectedItems } = (0, TimelineSelection_1.useTimelineSelection)();
+    const [dragging, setDragging] = (0, react_1.useState)(false);
+    const dragStateRef = (0, react_1.useRef)(null);
+    // Keep latest props/setters available to window listeners installed once at pointerdown.
+    const latestRef = (0, react_1.useRef)({
+        nodePathInfo,
+        setCodeValues,
+        setDragOverrides,
+        clearDragOverrides,
+        previewServerState,
+        codeValues,
+        sequences,
+        overrideIdToNodePathMappings,
+        selectedItems,
+    });
+    latestRef.current = {
+        nodePathInfo,
+        setCodeValues,
+        setDragOverrides,
+        clearDragOverrides,
+        previewServerState,
+        codeValues,
+        sequences,
+        overrideIdToNodePathMappings,
+        selectedItems,
+    };
+    const finishDrag = (0, react_1.useCallback)((commit) => {
+        const dragState = dragStateRef.current;
+        dragStateRef.current = null;
+        document.body.style.userSelect = '';
+        document.body.style.webkitUserSelect = '';
+        (0, ForceSpecificCursor_1.stopForcingSpecificCursor)();
+        setDragging(false);
+        if (!dragState) {
+            return;
+        }
+        const { setCodeValues: latestSetCodeValues, clearDragOverrides: latestClear, previewServerState: latestServerState, } = latestRef.current;
+        const changes = (0, exports.getTimelineSequenceDurationDragChanges)({
+            targets: dragState.targets,
+            deltaFrames: dragState.latestDeltaFrames,
+        });
+        if (!commit ||
+            latestServerState.type !== 'connected' ||
+            changes.length === 0) {
+            clearDurationDragOverrides({
+                clearDragOverrides: latestClear,
+                targets: dragState.targets,
+            });
+            return;
+        }
+        const savePromise = (0, save_sequence_prop_1.saveSequenceProps)({
+            changes,
+            setCodeValues: latestSetCodeValues,
+            clientId: latestServerState.clientId,
+            undoLabel: changes.length > 1 ? 'Resize selected sequences' : 'Resize sequence',
+            redoLabel: changes.length > 1
+                ? 'Resize selected sequences back'
+                : 'Resize sequence back',
+        });
+        savePromise
+            .catch((err) => {
+            remotion_1.Internals.Log.error({ logLevel: 'error', tag: null }, 'Could not save durationInFrames', err);
+        })
+            .finally(() => {
+            clearDurationDragOverrides({
+                clearDragOverrides: latestClear,
+                targets: dragState.targets,
+            });
+        });
+    }, []);
+    const onPointerDown = (0, react_1.useCallback)((e) => {
+        if (e.button !== 0) {
+            return;
+        }
+        const pxPerFrame = timelineDurationInFrames > 0
+            ? (windowWidth - timeline_layout_1.TIMELINE_PADDING * 2) / timelineDurationInFrames
+            : 0;
+        if (pxPerFrame <= 0) {
+            return;
+        }
+        const { nodePathInfo: latestNodePathInfo, selectedItems: latestSelectedItems, sequences: latestSequences, overrideIdToNodePathMappings: latestOverrideIdsToNodePaths, codeValues: latestCodeValues, } = latestRef.current;
+        const targets = (0, exports.getTimelineSequenceDurationDragTargets)({
+            draggedNodePathInfo: latestNodePathInfo,
+            selectedItems: latestSelectedItems,
+            sequences: latestSequences,
+            overrideIdsToNodePaths: latestOverrideIdsToNodePaths,
+            codeValues: latestCodeValues,
+        });
+        if (targets === null || targets.length === 0) {
+            return;
+        }
+        e.stopPropagation();
+        e.preventDefault();
+        dragStateRef.current = {
+            initialClientX: e.clientX,
+            latestDeltaFrames: 0,
+            pxPerFrame,
+            pointerId: e.pointerId,
+            targets,
+        };
+        document.body.style.userSelect = 'none';
+        document.body.style.webkitUserSelect = 'none';
+        (0, ForceSpecificCursor_1.forceSpecificCursor)('ew-resize');
+        setDragging(true);
+    }, [timelineDurationInFrames, windowWidth]);
+    // Install global pointer listeners while dragging. They survive parent re-renders
+    // and element remounts that would otherwise drop React's synthetic handlers or
+    // pointer capture.
+    (0, react_1.useEffect)(() => {
+        if (!dragging) {
+            return;
+        }
+        const onMove = (e) => {
+            const dragState = dragStateRef.current;
+            if (!dragState || e.pointerId !== dragState.pointerId) {
+                return;
+            }
+            const dx = e.clientX - dragState.initialClientX;
+            const deltaFrames = Math.round(dx / dragState.pxPerFrame);
+            dragState.latestDeltaFrames = deltaFrames;
+            for (const target of dragState.targets) {
+                latestRef.current.setDragOverrides(target.nodePath, 'durationInFrames', remotion_1.Internals.makeStaticDragOverride((0, exports.getTimelineSequenceDurationDragValue)({
+                    initialDuration: target.initialDuration,
+                    deltaFrames,
+                })));
+            }
+        };
+        const onUp = (e) => {
+            const dragState = dragStateRef.current;
+            if (!dragState || e.pointerId !== dragState.pointerId) {
+                return;
+            }
+            finishDrag(true);
+        };
+        const onCancel = (e) => {
+            const dragState = dragStateRef.current;
+            if (!dragState || e.pointerId !== dragState.pointerId) {
+                return;
+            }
+            finishDrag(false);
+        };
+        // Bail if the page loses focus mid-drag.
+        const onWindowBlur = () => {
+            finishDrag(false);
+        };
+        window.addEventListener('pointermove', onMove);
+        window.addEventListener('pointerup', onUp);
+        window.addEventListener('pointercancel', onCancel);
+        window.addEventListener('blur', onWindowBlur);
+        return () => {
+            window.removeEventListener('pointermove', onMove);
+            window.removeEventListener('pointerup', onUp);
+            window.removeEventListener('pointercancel', onCancel);
+            window.removeEventListener('blur', onWindowBlur);
+        };
+    }, [dragging, finishDrag]);
+    const style = {
+        ...baseStyle,
+        right: 0,
+        background: 'transparent',
+    };
+    return (jsx_runtime_1.jsx("div", { role: "separator", "aria-orientation": "vertical", title: "Drag to change duration", style: style, onPointerDown: onPointerDown }));
+};
+exports.TimelineSequenceRightEdgeDragHandle = TimelineSequenceRightEdgeDragHandle;

package/dist/components/Timeline/TimelineTrack.js

@@ -60,7 +60,7 @@ const TimelineTrackUnmemoized = ({ track }) => {
         getIsExpanded(track.nodePathInfo);
     const showRowHighlight = track.nodePathInfo !== null && (rowSelected || containsSelection);
     return (jsx_runtime_1.jsxs("div", { children: [
-            jsx_runtime_1.jsxs("div", { style: layerStyle, children: [showRowHighlight && timelineWidth !== null ? (jsx_runtime_1.jsx("div", { style: (0, TimelineSelection_1.getTimelineSelectedTrackHighlightStyle)(timelineWidth) })) : null, jsx_runtime_1.jsx(TimelineSequence_1.TimelineSequence, { s: track.sequence, nodePathInfo: track.nodePathInfo })
+            jsx_runtime_1.jsxs("div", { style: layerStyle, children: [showRowHighlight && timelineWidth !== null ? (jsx_runtime_1.jsx("div", { style: (0, TimelineSelection_1.getTimelineSelectedTrackHighlightStyle)(timelineWidth) })) : null, jsx_runtime_1.jsx(TimelineSequence_1.TimelineSequence, { s: track.sequence, nodePathInfo: track.nodePathInfo, sequenceFrameOffset: track.sequenceFrameOffset })
                 ] }), showExpandedKeyframes && track.nodePathInfo ? (jsx_runtime_1.jsx(TimelineExpandedTrackKeyframes_1.TimelineExpandedTrackKeyframes, { sequence: track.sequence, nodePathInfo: track.nodePathInfo, keyframeDisplayOffset: track.keyframeDisplayOffset })) : null] }));
 };
 exports.TimelineTrack = react_1.default.memo(TimelineTrackUnmemoized);

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

@@ -1,9 +1,9 @@
 import React from 'react';
-import type { CanUpdateSequencePropStatus } from 'remotion';
+import type { CanUpdateSequencePropStatusStatic } from 'remotion';
 import type { SchemaFieldInfo, TimelineFieldOnDragValueChange, TimelineFieldOnSave } from '../../helpers/timeline-layout';
 export declare const TimelineTranslateField: React.FC<{
     readonly field: SchemaFieldInfo;
-    readonly propStatus: CanUpdateSequencePropStatus;
+    readonly propStatus: CanUpdateSequencePropStatusStatic;
     readonly effectiveValue: unknown;
     readonly onSave: TimelineFieldOnSave;
     readonly onDragValueChange: TimelineFieldOnDragValueChange;

package/dist/components/Timeline/TimelineTranslateField.js

@@ -24,7 +24,7 @@ const TimelineTranslateField = ({ field, propStatus, effectiveValue, onSave, onD
     const step = field.fieldSchema.type === 'translate' ? ((_a = field.fieldSchema.step) !== null && _a !== void 0 ? _a : 1) : 1;
     const stepDecimals = (0, react_1.useMemo)(() => (0, timeline_field_utils_1.getDecimalPlaces)(step), [step]);
     const formatter = (0, react_1.useCallback)((v) => {
-        const num = Number(v);
+        const num = (0, timeline_field_utils_1.normalizeTimelineNumber)(Number(v));
         const digits = Math.max(stepDecimals, (0, timeline_field_utils_1.getDecimalPlaces)(num));
         const formatted = digits === 0 ? String(num) : num.toFixed(digits);
         return `${formatted}px`;
@@ -38,7 +38,7 @@ const TimelineTranslateField = ({ field, propStatus, effectiveValue, onSave, onD
     const onXChangeEnd = (0, react_1.useCallback)((newVal) => {
         const currentY = dragY !== null && dragY !== void 0 ? dragY : codeY;
         const newStr = (0, timeline_translate_utils_1.serializeTranslate)(newVal, currentY);
-        if (propStatus.canUpdate && newStr !== propStatus.codeValue) {
+        if (newStr !== propStatus.codeValue) {
             onSave(newStr).finally(() => {
                 setDragX(null);
                 onDragEnd();
@@ -50,17 +50,15 @@ const TimelineTranslateField = ({ field, propStatus, effectiveValue, onSave, onD
         }
     }, [dragY, codeY, propStatus, onSave, onDragEnd]);
     const onXTextChange = (0, react_1.useCallback)((newVal) => {
-        if (propStatus.canUpdate) {
-            const parsed = Number(newVal);
-            if (!Number.isNaN(parsed)) {
-                const currentY = dragY !== null && dragY !== void 0 ? dragY : codeY;
-                const newStr = (0, timeline_translate_utils_1.serializeTranslate)(parsed, currentY);
-                if (newStr !== propStatus.codeValue) {
-                    setDragX(parsed);
-                    onSave(newStr).finally(() => {
-                        setDragX(null);
-                    });
-                }
+        const parsed = Number(newVal);
+        if (!Number.isNaN(parsed)) {
+            const currentY = dragY !== null && dragY !== void 0 ? dragY : codeY;
+            const newStr = (0, timeline_translate_utils_1.serializeTranslate)(parsed, currentY);
+            if (newStr !== propStatus.codeValue) {
+                setDragX(parsed);
+                onSave(newStr).finally(() => {
+                    setDragX(null);
+                });
             }
         }
     }, [propStatus, dragY, codeY, onSave]);
@@ -73,7 +71,7 @@ const TimelineTranslateField = ({ field, propStatus, effectiveValue, onSave, onD
     const onYChangeEnd = (0, react_1.useCallback)((newVal) => {
         const currentX = dragX !== null && dragX !== void 0 ? dragX : codeX;
         const newStr = (0, timeline_translate_utils_1.serializeTranslate)(currentX, newVal);
-        if (propStatus.canUpdate && newStr !== propStatus.codeValue) {
+        if (newStr !== propStatus.codeValue) {
             onSave(newStr).finally(() => {
                 setDragY(null);
                 onDragEnd();
@@ -85,17 +83,15 @@ const TimelineTranslateField = ({ field, propStatus, effectiveValue, onSave, onD
         }
     }, [dragX, codeX, propStatus, onSave, onDragEnd]);
     const onYTextChange = (0, react_1.useCallback)((newVal) => {
-        if (propStatus.canUpdate) {
-            const parsed = Number(newVal);
-            if (!Number.isNaN(parsed)) {
-                const currentX = dragX !== null && dragX !== void 0 ? dragX : codeX;
-                const newStr = (0, timeline_translate_utils_1.serializeTranslate)(currentX, parsed);
-                if (newStr !== propStatus.codeValue) {
-                    setDragY(parsed);
-                    onSave(newStr).finally(() => {
-                        setDragY(null);
-                    });
-                }
+        const parsed = Number(newVal);
+        if (!Number.isNaN(parsed)) {
+            const currentX = dragX !== null && dragX !== void 0 ? dragX : codeX;
+            const newStr = (0, timeline_translate_utils_1.serializeTranslate)(currentX, parsed);
+            if (newStr !== propStatus.codeValue) {
+                setDragY(parsed);
+                onSave(newStr).finally(() => {
+                    setDragY(null);
+                });
             }
         }
     }, [propStatus, onSave, dragX, codeX]);

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

@@ -1,9 +1,9 @@
 import React from 'react';
-import type { CanUpdateSequencePropStatus } from 'remotion';
+import type { CanUpdateSequencePropStatusStatic } from 'remotion';
 import type { SchemaFieldInfo, TimelineFieldOnDragValueChange, TimelineFieldOnSave } from '../../helpers/timeline-layout';
 export declare const TimelineUvCoordinateField: React.FC<{
     readonly field: SchemaFieldInfo;
-    readonly propStatus: CanUpdateSequencePropStatus;
+    readonly propStatus: CanUpdateSequencePropStatusStatic;
     readonly effectiveValue: unknown;
     readonly onSave: TimelineFieldOnSave;
     readonly onDragValueChange: TimelineFieldOnDragValueChange;