@remotion/studio 4.0.471 → 4.0.472

package/dist/components/Timeline/TimelineScaleField.js

@@ -0,0 +1,314 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TimelineScaleField = exports.getLinkedScale = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const no_react_1 = require("remotion/no-react");
+const colors_1 = require("../../helpers/colors");
+const scale_lock_1 = require("../../state/scale-lock");
+const InputDragger_1 = require("../NewComposition/InputDragger");
+const timeline_field_utils_1 = require("./timeline-field-utils");
+const TimelineLayerEye_1 = require("./TimelineLayerEye");
+const leftDraggerStyle = {
+    paddingLeft: 0,
+};
+const rightDraggerStyle = {
+    paddingRight: 0,
+};
+const containerStyle = {
+    alignItems: 'center',
+    display: 'flex',
+    gap: 4,
+};
+const toggleStyle = {
+    ...TimelineLayerEye_1.timelineLayerIconContainer,
+    border: 'none',
+    color: colors_1.LIGHT_COLOR,
+    cursor: 'pointer',
+    marginRight: 0,
+    padding: 0,
+};
+const linkIconStyle = {
+    width: 14,
+    height: 14,
+    pointerEvents: 'none',
+};
+const gapStyle = {
+    marginLeft: -6,
+    marginRight: -6,
+};
+const clamp = (value, min, max) => {
+    return Math.min(max, Math.max(min, value));
+};
+const getLinkedScale = ({ axis, newValue, baseX, baseY, min, max, }) => {
+    const drivingBase = axis === 'x' ? baseX : baseY;
+    const linkedBase = axis === 'x' ? baseY : baseX;
+    if (drivingBase === 0 || linkedBase === 0) {
+        const clamped = (0, timeline_field_utils_1.normalizeTimelineNumber)(clamp(newValue, min, max));
+        return [clamped, clamped];
+    }
+    let factor = newValue / drivingBase;
+    let driving = newValue;
+    let linked = linkedBase * factor;
+    const clampedLinked = clamp(linked, min, max);
+    if (clampedLinked !== linked) {
+        factor = clampedLinked / linkedBase;
+        linked = clampedLinked;
+        driving = drivingBase * factor;
+    }
+    const clampedDriving = clamp(driving, min, max);
+    const normalizedDriving = (0, timeline_field_utils_1.normalizeTimelineNumber)(clampedDriving);
+    const normalizedLinked = (0, timeline_field_utils_1.normalizeTimelineNumber)(linked);
+    return axis === 'x'
+        ? [normalizedDriving, normalizedLinked]
+        : [normalizedLinked, normalizedDriving];
+};
+exports.getLinkedScale = getLinkedScale;
+const valuesEqual = (left, right) => {
+    return JSON.stringify(left) === JSON.stringify(right);
+};
+const LinkToggle = ({ linked, onToggle }) => {
+    const onPointerDown = (0, react_1.useCallback)((e) => {
+        if (e.button !== 0) {
+            return;
+        }
+        e.stopPropagation();
+        onToggle();
+    }, [onToggle]);
+    return (jsx_runtime_1.jsx("button", { type: "button", style: toggleStyle, onPointerDown: onPointerDown, title: linked ? 'Unlink scale axes' : 'Link scale axes', "aria-label": linked ? 'Unlink scale axes' : 'Link scale axes', children: linked ? (jsx_runtime_1.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 640 640", style: linkIconStyle, children: jsx_runtime_1.jsx("path", { fill: "currentcolor", d: "M32 320C32 214 118 128 224 128L288 128L288 192L224 192C153.3 192 96 249.3 96 320C96 390.7 153.3 448 224 448L288 448L288 512L224 512C118 512 32 426 32 320zM608 320C608 426 522 512 416 512L352 512L352 448L416 448C486.7 448 544 390.7 544 320C544 249.3 486.7 192 416 192L352 192L352 128L416 128C522 128 608 214 608 320zM224 288L448 288L448 352L192 352L192 288L224 288z" }) })) : null }));
+};
+const TimelineScaleField = ({ field, propStatus, effectiveValue, onSave, onDragValueChange, onDragEnd, scaleLockNodePath, }) => {
+    var _a, _b, _c;
+    const [dragX, setDragX] = (0, react_1.useState)(null);
+    const [dragY, setDragY] = (0, react_1.useState)(null);
+    const dragStartRef = (0, react_1.useRef)(null);
+    const { getScaleLockState, setScaleLockState } = (0, react_1.useContext)(scale_lock_1.ScaleLockContext);
+    const [codeX, codeY, codeZ] = (0, react_1.useMemo)(() => no_react_1.NoReactInternals.parseScaleValue(effectiveValue), [effectiveValue]);
+    const defaultLinked = codeX === codeY;
+    const linked = getScaleLockState({
+        nodePath: scaleLockNodePath,
+        fieldKey: field.key,
+        defaultValue: defaultLinked,
+    });
+    const step = field.fieldSchema.type === 'scale'
+        ? ((_a = field.fieldSchema.step) !== null && _a !== void 0 ? _a : 0.01)
+        : 0.01;
+    const min = field.fieldSchema.type === 'scale'
+        ? ((_b = field.fieldSchema.min) !== null && _b !== void 0 ? _b : -Infinity)
+        : -Infinity;
+    const max = field.fieldSchema.type === 'scale'
+        ? ((_c = field.fieldSchema.max) !== null && _c !== void 0 ? _c : Infinity)
+        : Infinity;
+    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 digits = Math.max(stepDecimals, (0, timeline_field_utils_1.getDecimalPlaces)(num));
+        return digits === 0 ? String(num) : num.toFixed(digits);
+    }, [stepDecimals]);
+    const getDragStart = (0, react_1.useCallback)(() => {
+        if (dragStartRef.current === null) {
+            dragStartRef.current = [dragX !== null && dragX !== void 0 ? dragX : codeX, dragY !== null && dragY !== void 0 ? dragY : codeY];
+        }
+        return dragStartRef.current;
+    }, [codeX, codeY, dragX, dragY]);
+    const serialize = (0, react_1.useCallback)((x, y) => {
+        return no_react_1.NoReactInternals.serializeScaleValue([x, y, codeZ]);
+    }, [codeZ]);
+    const onXChange = (0, react_1.useCallback)((newVal) => {
+        if (linked) {
+            const [baseX, baseY] = getDragStart();
+            const [newX, newY] = (0, exports.getLinkedScale)({
+                axis: 'x',
+                newValue: newVal,
+                baseX,
+                baseY,
+                min,
+                max,
+            });
+            setDragX(newX);
+            setDragY(newY);
+            onDragValueChange(serialize(newX, newY));
+            return;
+        }
+        setDragX(newVal);
+        const currentY = dragY !== null && dragY !== void 0 ? dragY : codeY;
+        onDragValueChange(serialize(newVal, currentY));
+    }, [
+        codeY,
+        dragY,
+        getDragStart,
+        linked,
+        max,
+        min,
+        onDragValueChange,
+        serialize,
+    ]);
+    const onXChangeEnd = (0, react_1.useCallback)((newVal) => {
+        var _a, _b;
+        var _c, _d;
+        const [newX, newY] = linked
+            ? (0, exports.getLinkedScale)({
+                axis: 'x',
+                newValue: newVal,
+                baseX: (_c = (_a = dragStartRef.current) === null || _a === void 0 ? void 0 : _a[0]) !== null && _c !== void 0 ? _c : codeX,
+                baseY: (_d = (_b = dragStartRef.current) === null || _b === void 0 ? void 0 : _b[1]) !== null && _d !== void 0 ? _d : codeY,
+                min,
+                max,
+            })
+            : [newVal, dragY !== null && dragY !== void 0 ? dragY : codeY];
+        const newScale = serialize(newX, newY);
+        const clearDragState = () => {
+            dragStartRef.current = null;
+            setDragX(null);
+            setDragY(null);
+            onDragEnd();
+        };
+        if (!valuesEqual(newScale, propStatus.codeValue)) {
+            onSave(newScale).finally(clearDragState);
+        }
+        else {
+            clearDragState();
+        }
+    }, [
+        codeX,
+        codeY,
+        dragY,
+        linked,
+        max,
+        min,
+        onDragEnd,
+        onSave,
+        propStatus,
+        serialize,
+    ]);
+    const onXTextChange = (0, react_1.useCallback)((newVal) => {
+        const parsed = Number(newVal);
+        if (Number.isNaN(parsed)) {
+            return;
+        }
+        const [newX, newY] = linked
+            ? (0, exports.getLinkedScale)({
+                axis: 'x',
+                newValue: parsed,
+                baseX: codeX,
+                baseY: codeY,
+                min,
+                max,
+            })
+            : [parsed, dragY !== null && dragY !== void 0 ? dragY : codeY];
+        const newScale = serialize(newX, newY);
+        if (!valuesEqual(newScale, propStatus.codeValue)) {
+            setDragX(newX);
+            setDragY(newY);
+            onSave(newScale).finally(() => {
+                dragStartRef.current = null;
+                setDragX(null);
+                setDragY(null);
+            });
+        }
+    }, [codeX, codeY, dragY, linked, max, min, onSave, propStatus, serialize]);
+    const onYChange = (0, react_1.useCallback)((newVal) => {
+        if (linked) {
+            const [baseX, baseY] = getDragStart();
+            const [newX, newY] = (0, exports.getLinkedScale)({
+                axis: 'y',
+                newValue: newVal,
+                baseX,
+                baseY,
+                min,
+                max,
+            });
+            setDragX(newX);
+            setDragY(newY);
+            onDragValueChange(serialize(newX, newY));
+            return;
+        }
+        setDragY(newVal);
+        const currentX = dragX !== null && dragX !== void 0 ? dragX : codeX;
+        onDragValueChange(serialize(currentX, newVal));
+    }, [
+        codeX,
+        dragX,
+        getDragStart,
+        linked,
+        max,
+        min,
+        onDragValueChange,
+        serialize,
+    ]);
+    const onYChangeEnd = (0, react_1.useCallback)((newVal) => {
+        var _a, _b;
+        var _c, _d;
+        const [newX, newY] = linked
+            ? (0, exports.getLinkedScale)({
+                axis: 'y',
+                newValue: newVal,
+                baseX: (_c = (_a = dragStartRef.current) === null || _a === void 0 ? void 0 : _a[0]) !== null && _c !== void 0 ? _c : codeX,
+                baseY: (_d = (_b = dragStartRef.current) === null || _b === void 0 ? void 0 : _b[1]) !== null && _d !== void 0 ? _d : codeY,
+                min,
+                max,
+            })
+            : [dragX !== null && dragX !== void 0 ? dragX : codeX, newVal];
+        const newScale = serialize(newX, newY);
+        const clearDragState = () => {
+            dragStartRef.current = null;
+            setDragX(null);
+            setDragY(null);
+            onDragEnd();
+        };
+        if (!valuesEqual(newScale, propStatus.codeValue)) {
+            onSave(newScale).finally(clearDragState);
+        }
+        else {
+            clearDragState();
+        }
+    }, [
+        codeX,
+        codeY,
+        dragX,
+        linked,
+        max,
+        min,
+        onDragEnd,
+        onSave,
+        propStatus,
+        serialize,
+    ]);
+    const onYTextChange = (0, react_1.useCallback)((newVal) => {
+        const parsed = Number(newVal);
+        if (Number.isNaN(parsed)) {
+            return;
+        }
+        const [newX, newY] = linked
+            ? (0, exports.getLinkedScale)({
+                axis: 'y',
+                newValue: parsed,
+                baseX: codeX,
+                baseY: codeY,
+                min,
+                max,
+            })
+            : [dragX !== null && dragX !== void 0 ? dragX : codeX, parsed];
+        const newScale = serialize(newX, newY);
+        if (!valuesEqual(newScale, propStatus.codeValue)) {
+            setDragX(newX);
+            setDragY(newY);
+            onSave(newScale).finally(() => {
+                dragStartRef.current = null;
+                setDragX(null);
+                setDragY(null);
+            });
+        }
+    }, [codeX, codeY, dragX, linked, max, min, onSave, propStatus, serialize]);
+    const onToggleLink = (0, react_1.useCallback)(() => {
+        setScaleLockState({
+            nodePath: scaleLockNodePath,
+            fieldKey: field.key,
+            linked: !linked,
+        });
+    }, [field.key, linked, scaleLockNodePath, setScaleLockState]);
+    return (jsx_runtime_1.jsxs("span", { style: containerStyle, children: [
+            jsx_runtime_1.jsx(LinkToggle, { linked: linked, onToggle: onToggleLink }), jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: dragX !== null && dragX !== void 0 ? dragX : codeX, style: leftDraggerStyle, status: "ok", small: true, onValueChange: onXChange, onValueChangeEnd: onXChangeEnd, onTextChange: onXTextChange, min: min, max: max, step: step, formatter: formatter, rightAlign: false }), jsx_runtime_1.jsx("div", { style: gapStyle }), jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: dragY !== null && dragY !== void 0 ? dragY : codeY, style: rightDraggerStyle, status: "ok", small: true, onValueChange: onYChange, onValueChangeEnd: onYChangeEnd, onTextChange: onYTextChange, min: min, max: max, step: step, formatter: formatter, rightAlign: false })
+        ] }));
+};
+exports.TimelineScaleField = TimelineScaleField;

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { CanUpdateSequencePropStatusFalse, CanUpdateSequencePropStatusTrue } from 'remotion';
+import type { CanUpdateSequencePropStatusFalse, CanUpdateSequencePropStatusStatic, SequencePropsSubscriptionKey } from 'remotion';
 import type { SchemaFieldInfo, TimelineFieldOnDragValueChange, TimelineFieldOnSave } from '../../helpers/timeline-layout';
 export declare const UnsupportedStatus: React.FC<{
     readonly label: string;
@@ -12,6 +12,7 @@ export declare const TimelineFieldValue: React.FC<{
     readonly onSave: TimelineFieldOnSave;
     readonly onDragValueChange: TimelineFieldOnDragValueChange;
     readonly onDragEnd: () => void;
-    readonly propStatus: CanUpdateSequencePropStatusTrue;
+    readonly propStatus: CanUpdateSequencePropStatusStatic;
     readonly effectiveValue: unknown;
+    readonly scaleLockNodePath: SequencePropsSubscriptionKey | null;
 }>;

package/dist/components/Timeline/TimelineSchemaField.js

@@ -3,13 +3,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TimelineFieldValue = exports.TimelineNonEditableStatus = exports.UnsupportedStatus = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const get_timeline_keyframes_1 = require("./get-timeline-keyframes");
-const TimelineBooleanField_1 = require("./TimelineBooleanField");
-const TimelineColorField_1 = require("./TimelineColorField");
-const TimelineEnumField_1 = require("./TimelineEnumField");
-const TimelineNumberField_1 = require("./TimelineNumberField");
-const TimelineRotationField_1 = require("./TimelineRotationField");
-const TimelineTranslateField_1 = require("./TimelineTranslateField");
-const TimelineUvCoordinateField_1 = require("./TimelineUvCoordinateField");
+const TimelineArrayField_1 = require("./TimelineArrayField");
+const TimelinePrimitiveFieldValue_1 = require("./TimelinePrimitiveFieldValue");
 const unsupportedLabel = {
     color: 'rgba(255, 255, 255, 0.4)',
     fontSize: 12,
@@ -17,51 +12,22 @@ const unsupportedLabel = {
     userSelect: 'none',
     WebkitUserSelect: 'none',
 };
-const notEditableBackground = {
-    backgroundColor: 'rgba(255, 0, 0, 0.2)',
-    borderRadius: 3,
-    padding: '0 4px',
-};
-const inlineWrapper = {
-    fontSize: 12,
-};
 const UnsupportedStatus = ({ label }) => {
     return jsx_runtime_1.jsx("span", { style: unsupportedLabel, children: label });
 };
 exports.UnsupportedStatus = UnsupportedStatus;
 const TimelineNonEditableStatus = ({ propStatus }) => {
-    if (propStatus.canUpdate) {
-        return null;
-    }
-    if (propStatus.reason === 'computed' || propStatus.reason === 'keyframed') {
+    if (propStatus.status === 'computed') {
         return (jsx_runtime_1.jsx("span", { style: unsupportedLabel, children: (0, get_timeline_keyframes_1.getComputedStatusLabel)(propStatus) }));
     }
 };
 exports.TimelineNonEditableStatus = TimelineNonEditableStatus;
-const TimelineFieldValue = ({ field, onSave, onDragValueChange, onDragEnd, propStatus, effectiveValue, }) => {
-    const wrapperStyle = !propStatus.canUpdate
-        ? notEditableBackground
-        : undefined;
-    if (field.typeName === 'number') {
-        return (jsx_runtime_1.jsx("span", { style: wrapperStyle, children: jsx_runtime_1.jsx(TimelineNumberField_1.TimelineNumberField, { field: field, effectiveValue: effectiveValue, onSave: onSave, propStatus: propStatus, onDragValueChange: onDragValueChange, onDragEnd: onDragEnd }) }));
-    }
-    if (field.typeName === 'rotation') {
-        return (jsx_runtime_1.jsx("span", { style: wrapperStyle, children: jsx_runtime_1.jsx(TimelineRotationField_1.TimelineRotationField, { field: field, effectiveValue: effectiveValue, propStatus: propStatus, onSave: onSave, onDragValueChange: onDragValueChange, onDragEnd: onDragEnd }) }));
-    }
-    if (field.typeName === 'translate') {
-        return (jsx_runtime_1.jsx("span", { style: wrapperStyle, children: jsx_runtime_1.jsx(TimelineTranslateField_1.TimelineTranslateField, { field: field, effectiveValue: effectiveValue, propStatus: propStatus, onSave: onSave, onDragValueChange: onDragValueChange, onDragEnd: onDragEnd }) }));
-    }
-    if (field.typeName === 'uv-coordinate') {
-        return (jsx_runtime_1.jsx("span", { style: wrapperStyle, children: jsx_runtime_1.jsx(TimelineUvCoordinateField_1.TimelineUvCoordinateField, { field: field, effectiveValue: effectiveValue, propStatus: propStatus, onSave: onSave, onDragValueChange: onDragValueChange, onDragEnd: onDragEnd }) }));
-    }
-    if (field.typeName === 'boolean') {
-        return (jsx_runtime_1.jsx("span", { style: wrapperStyle, children: jsx_runtime_1.jsx(TimelineBooleanField_1.TimelineBooleanField, { field: field, propStatus: propStatus, onSave: onSave, effectiveValue: effectiveValue }) }));
-    }
-    if (field.typeName === 'color') {
-        return (jsx_runtime_1.jsx("span", { style: wrapperStyle, children: jsx_runtime_1.jsx(TimelineColorField_1.TimelineColorField, { field: field, propStatus: propStatus, onSave: onSave, onDragValueChange: onDragValueChange, onDragEnd: onDragEnd, effectiveValue: effectiveValue }) }));
+const TimelineFieldValue = ({ field, onSave, onDragValueChange, onDragEnd, propStatus, effectiveValue, scaleLockNodePath, }) => {
+    if ((0, TimelinePrimitiveFieldValue_1.isTimelinePrimitiveFieldInfo)(field)) {
+        return (jsx_runtime_1.jsx(TimelinePrimitiveFieldValue_1.TimelinePrimitiveFieldValue, { effectiveValue: effectiveValue, field: field, onDragEnd: onDragEnd, onDragValueChange: onDragValueChange, onSave: onSave, propStatus: propStatus, scaleLockNodePath: scaleLockNodePath }));
     }
-    if (field.typeName === 'enum') {
-        return (jsx_runtime_1.jsx("span", { style: inlineWrapper, children: jsx_runtime_1.jsx(TimelineEnumField_1.TimelineEnumField, { field: field, propStatus: propStatus, onSave: onSave, effectiveValue: effectiveValue, onDragValueChange: onDragValueChange, onDragEnd: onDragEnd }) }));
+    if (field.typeName === 'array') {
+        return (jsx_runtime_1.jsx("span", { children: jsx_runtime_1.jsx(TimelineArrayField_1.TimelineArrayField, { effectiveValue: effectiveValue, field: field, onDragEnd: onDragEnd, onDragValueChange: onDragValueChange, onSave: onSave }) }));
     }
     throw new Error(`Unsupported field type: ${field.typeName}`);
 };

package/dist/components/Timeline/TimelineSelection.js

@@ -8,6 +8,7 @@ const client_id_1 = require("../../helpers/client-id");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
 const timeline_node_path_key_1 = require("../../helpers/timeline-node-path-key");
 const use_keybinding_1 = require("../../helpers/use-keybinding");
+const TimelineClipboardKeybindings_1 = require("./TimelineClipboardKeybindings");
 const TimelineDeleteKeybindings_1 = require("./TimelineDeleteKeybindings");
 exports.TIMELINE_SELECTED_BACKGROUND = '#3B3F42';
 exports.TIMELINE_SELECTED_LABEL_BACKGROUND = '#B0B0B0';
@@ -255,7 +256,7 @@ const TimelineSelectAllKeybindings = ({ timeline }) => {
 exports.TimelineSelectAllKeybindings = TimelineSelectAllKeybindings;
 const TimelineSelectionProvider = ({ children }) => {
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
-    const canSelect = exports.SELECTION_ENABLED &&
+    const canSelect = (exports.SELECTION_ENABLED || exports.ENABLE_OUTLINES) &&
         previewServerState.type === 'connected' &&
         !window.remotion_isReadOnlyStudio;
     const [selectedItems, setSelectedItems] = (0, react_1.useState)([]);
@@ -347,7 +348,7 @@ const TimelineSelectionProvider = ({ children }) => {
     ]);
     const currentSelection = (0, react_1.useRef)(value);
     currentSelection.current = value;
-    return (jsx_runtime_1.jsx(CurrentTimelineSelectionContext.Provider, { value: currentSelection, children: jsx_runtime_1.jsxs(TimelineSelectionContext.Provider, { value: value, children: [children, jsx_runtime_1.jsx(TimelineDeleteKeybindings_1.TimelineDeleteKeybindings, {})
+    return (jsx_runtime_1.jsx(CurrentTimelineSelectionContext.Provider, { value: currentSelection, children: jsx_runtime_1.jsxs(TimelineSelectionContext.Provider, { value: value, children: [children, jsx_runtime_1.jsx(TimelineClipboardKeybindings_1.TimelineClipboardKeybindings, {}), jsx_runtime_1.jsx(TimelineDeleteKeybindings_1.TimelineDeleteKeybindings, {})
             ] }) }));
 };
 exports.TimelineSelectionProvider = TimelineSelectionProvider;

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

@@ -4,4 +4,5 @@ import type { SequenceNodePathInfo } from '../../helpers/get-timeline-sequence-s
 export declare const TimelineSequence: React.NamedExoticComponent<{
     readonly s: TSequence;
     readonly nodePathInfo: SequenceNodePathInfo | null;
+    readonly sequenceFrameOffset: number;
 }>;

package/dist/components/Timeline/TimelineSequence.js

@@ -46,19 +46,21 @@ const LoopedTimelineIndicators_1 = require("./LoopedTimelineIndicators");
 const TimelineImageInfo_1 = require("./TimelineImageInfo");
 const TimelineSelection_1 = require("./TimelineSelection");
 const TimelineSequenceFrame_1 = require("./TimelineSequenceFrame");
+const TimelineSequenceRightEdgeDragHandle_1 = require("./TimelineSequenceRightEdgeDragHandle");
 const TimelineVideoInfo_1 = require("./TimelineVideoInfo");
 const TimelineWidthProvider_1 = require("./TimelineWidthProvider");
+const use_resolved_stack_react_to_change_1 = require("./use-resolved-stack-react-to-change");
 const AUDIO_GRADIENT = 'linear-gradient(rgb(16 171 58), rgb(43 165 63) 60%)';
 const VIDEO_GRADIENT = 'linear-gradient(to top, #8e44ad, #9b59b6)';
 const IMAGE_GRADIENT = 'linear-gradient(to top, #2980b9, #3498db)';
-const TimelineSequenceFn = ({ s, nodePathInfo }) => {
+const TimelineSequenceFn = ({ s, nodePathInfo, sequenceFrameOffset }) => {
     const windowWidth = (0, react_1.useContext)(TimelineWidthProvider_1.TimelineWidthContext);
     if (windowWidth === null) {
         return null;
     }
-    return (jsx_runtime_1.jsx(TimelineSequenceInner, { windowWidth: windowWidth, s: s, nodePathInfo: nodePathInfo }));
+    return (jsx_runtime_1.jsx(TimelineSequenceInner, { windowWidth: windowWidth, s: s, nodePathInfo: nodePathInfo, sequenceFrameOffset: sequenceFrameOffset }));
 };
-const TimelineSequenceCurrentFrame = ({ s, displayDurationInFrames, premountWidth, postmountWidth, style, children, nodePathInfo, }) => {
+const TimelineSequenceCurrentFrame = ({ s, displayDurationInFrames, premountWidth, postmountWidth, style, children, nodePathInfo, sequenceFrameOffset, fromCanUpdate, onMoveDragPointerDown, }) => {
     var _a, _b;
     const { onSelect, selectable } = (0, TimelineSelection_1.useTimelineRowSelection)(nodePathInfo);
     const onPointerDown = (0, react_1.useCallback)((e) => {
@@ -68,13 +70,17 @@ const TimelineSequenceCurrentFrame = ({ s, displayDurationInFrames, premountWidt
                 shiftKey: e.shiftKey,
                 toggleKey: e.metaKey || e.ctrlKey,
             });
+            if (TimelineSelection_1.TIMELINE_TOP_DRAG && fromCanUpdate) {
+                onMoveDragPointerDown(e);
+            }
         }
-    }, [onSelect]);
+    }, [fromCanUpdate, onMoveDragPointerDown, onSelect]);
     const frame = (0, remotion_1.useCurrentFrame)();
     const relativeFrame = frame - s.from;
+    const sequenceFrame = relativeFrame + sequenceFrameOffset;
     const relativeFrameWithPremount = relativeFrame + ((_a = s.premountDisplay) !== null && _a !== void 0 ? _a : 0);
     const relativeFrameWithPostmount = relativeFrame - displayDurationInFrames;
-    const roundedFrame = Math.round(relativeFrame * 100) / 100;
+    const roundedFrame = Math.round(sequenceFrame * 100) / 100;
     const isInRange = relativeFrame >= 0 && relativeFrame < displayDurationInFrames;
     const isPremounting = relativeFrameWithPremount >= 0 &&
         relativeFrameWithPremount < displayDurationInFrames &&
@@ -86,7 +92,6 @@ const TimelineSequenceCurrentFrame = ({ s, displayDurationInFrames, premountWidt
         return {
             ...style,
             opacity: isInRange ? 1 : 0.5,
-            ...(TimelineSelection_1.TIMELINE_TOP_DRAG ? { cursor: 'pointer' } : {}),
         };
     }, [isInRange, style]);
     return (jsx_runtime_1.jsxs("div", { style: actualStyle, title: s.displayName, onPointerDown: selectable ? onPointerDown : undefined, children: [premountWidth ? (jsx_runtime_1.jsx("div", { style: {
@@ -123,14 +128,43 @@ const TimelineSequenceCurrentFrame = ({ s, displayDurationInFrames, premountWidt
                     alignItems: 'center',
                 }, children: jsx_runtime_1.jsx(TimelineSequenceFrame_1.TimelineSequenceFrame, { premounted: isPremounting, postmounted: isPostmounting ? s.duration - 1 : null, roundedFrame: roundedFrame }) })) : null] }));
 };
-const TimelineSequenceInner = ({ s, windowWidth, nodePathInfo }) => {
+const TimelineSequenceInner = ({ s, windowWidth, nodePathInfo, sequenceFrameOffset }) => {
     // If a duration is 1, it is essentially a still and it should have width 0
     // Some compositions may not be longer than their media duration,
     // if that is the case, it needs to be asynchronously determined
-    var _a;
+    var _a, _b;
+    var _c, _d, _e, _f;
     const video = remotion_1.Internals.useVideo();
-    const maxMediaDuration = (0, use_max_media_duration_1.useMaxMediaDuration)(s, (_a = video === null || video === void 0 ? void 0 : video.fps) !== null && _a !== void 0 ? _a : 30);
+    const maxMediaDuration = (0, use_max_media_duration_1.useMaxMediaDuration)(s, (_c = video === null || video === void 0 ? void 0 : video.fps) !== null && _c !== void 0 ? _c : 30);
     const effectiveMaxMediaDuration = s.loopDisplay ? null : maxMediaDuration;
+    const originalLocation = (0, use_resolved_stack_react_to_change_1.useResolveStackAndReactToChange)(s.getStack);
+    const validatedLocation = (0, react_1.useMemo)(() => {
+        var _a;
+        if (!originalLocation ||
+            !originalLocation.source ||
+            !originalLocation.line) {
+            return null;
+        }
+        return {
+            source: originalLocation.source,
+            line: originalLocation.line,
+            column: (_a = originalLocation.column) !== null && _a !== void 0 ? _a : 0,
+        };
+    }, [originalLocation]);
+    const { codeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeCodeValuesContext);
+    const nodePath = (_d = nodePathInfo === null || nodePathInfo === void 0 ? void 0 : nodePathInfo.sequenceSubscriptionKey) !== null && _d !== void 0 ? _d : null;
+    const codeValuesForOverride = (0, react_1.useMemo)(() => {
+        return nodePath
+            ? remotion_1.Internals.getCodeValuesCtx(codeValues, nodePath)
+            : undefined;
+    }, [codeValues, nodePath]);
+    const durationCanUpdate = Boolean(((_a = codeValuesForOverride === null || codeValuesForOverride === void 0 ? void 0 : codeValuesForOverride.durationInFrames) === null || _a === void 0 ? void 0 : _a.status) === 'static');
+    const fromCanUpdate = Boolean(((_b = codeValuesForOverride === null || codeValuesForOverride === void 0 ? void 0 : codeValuesForOverride.from) === null || _b === void 0 ? void 0 : _b.status) === 'static');
+    const { onPointerDown: onMoveDragPointerDown } = (0, TimelineSequenceRightEdgeDragHandle_1.useTimelineSequenceFromDrag)({
+        nodePathInfo,
+        windowWidth,
+        timelineDurationInFrames: (_e = video === null || video === void 0 ? void 0 : video.durationInFrames) !== null && _e !== void 0 ? _e : 1,
+    });
     if (!video) {
         throw new TypeError('Expected video config');
     }
@@ -174,9 +208,16 @@ const TimelineSequenceInner = ({ s, windowWidth, nodePathInfo }) => {
             overflow: 'hidden',
         };
     }, [marginLeft, s.type, width]);
+    const showRightEdgeDragHandle = TimelineSelection_1.TIMELINE_TOP_DRAG &&
+        (s.type === 'sequence' || s.type === 'image') &&
+        !s.loopDisplay &&
+        !s.isInsideSeries &&
+        nodePath !== null &&
+        validatedLocation !== null &&
+        durationCanUpdate;
     if (maxMediaDuration === null && !s.loopDisplay) {
         return null;
     }
-    return (jsx_runtime_1.jsxs(TimelineSequenceCurrentFrame, { s: s, displayDurationInFrames: displayDurationInFrames, premountWidth: premountWidth, postmountWidth: postmountWidth, style: style, nodePathInfo: nodePathInfo, children: [s.type === 'audio' ? (jsx_runtime_1.jsx(AudioWaveform_1.AudioWaveform, { src: s.src, height: timeline_layout_1.TIMELINE_LAYER_HEIGHT_AUDIO, doesVolumeChange: s.doesVolumeChange, visualizationWidth: width, startFrom: s.startMediaFrom, durationInFrames: s.duration, volume: s.volume, playbackRate: s.playbackRate, loopDisplay: s.loopDisplay })) : null, s.type === 'video' ? (jsx_runtime_1.jsx(TimelineVideoInfo_1.TimelineVideoInfo, { src: s.src, visualizationWidth: width, naturalWidth: naturalWidth, trimBefore: s.startMediaFrom, durationInFrames: s.duration, playbackRate: s.playbackRate, volume: s.volume, doesVolumeChange: s.doesVolumeChange, premountWidth: premountWidth !== null && premountWidth !== void 0 ? premountWidth : 0, postmountWidth: postmountWidth !== null && postmountWidth !== void 0 ? postmountWidth : 0, loopDisplay: s.loopDisplay })) : null, s.type === 'image' ? (jsx_runtime_1.jsx(TimelineImageInfo_1.TimelineImageInfo, { src: s.src, visualizationWidth: width })) : null, s.loopDisplay === undefined ? null : (jsx_runtime_1.jsx(LoopedTimelineIndicators_1.LoopedTimelineIndicator, { loops: s.loopDisplay.numberOfTimes }))] }));
+    return (jsx_runtime_1.jsxs(TimelineSequenceCurrentFrame, { s: s, displayDurationInFrames: displayDurationInFrames, premountWidth: premountWidth, postmountWidth: postmountWidth, style: style, nodePathInfo: nodePathInfo, sequenceFrameOffset: sequenceFrameOffset, fromCanUpdate: fromCanUpdate, onMoveDragPointerDown: onMoveDragPointerDown, children: [s.type === 'audio' ? (jsx_runtime_1.jsx(AudioWaveform_1.AudioWaveform, { src: s.src, height: timeline_layout_1.TIMELINE_LAYER_HEIGHT_AUDIO, doesVolumeChange: s.doesVolumeChange, visualizationWidth: width, startFrom: s.startMediaFrom, durationInFrames: s.duration, volume: s.volume, playbackRate: s.playbackRate, loopDisplay: s.loopDisplay })) : null, s.type === 'video' ? (jsx_runtime_1.jsx(TimelineVideoInfo_1.TimelineVideoInfo, { src: s.src, visualizationWidth: width, naturalWidth: naturalWidth, trimBefore: s.startMediaFrom, durationInFrames: s.duration, playbackRate: s.playbackRate, volume: s.volume, doesVolumeChange: s.doesVolumeChange, premountWidth: premountWidth !== null && premountWidth !== void 0 ? premountWidth : 0, postmountWidth: postmountWidth !== null && postmountWidth !== void 0 ? postmountWidth : 0, loopDisplay: s.loopDisplay })) : null, s.type === 'image' ? (jsx_runtime_1.jsx(TimelineImageInfo_1.TimelineImageInfo, { src: s.src, visualizationWidth: width })) : null, s.loopDisplay === undefined ? null : (jsx_runtime_1.jsx(LoopedTimelineIndicators_1.LoopedTimelineIndicator, { loops: s.loopDisplay.numberOfTimes })), showRightEdgeDragHandle && nodePathInfo && validatedLocation ? (jsx_runtime_1.jsx(TimelineSequenceRightEdgeDragHandle_1.TimelineSequenceRightEdgeDragHandle, { nodePathInfo: nodePathInfo, windowWidth: windowWidth, timelineDurationInFrames: (_f = video.durationInFrames) !== null && _f !== void 0 ? _f : 1 })) : null] }));
 };
 exports.TimelineSequence = react_1.default.memo(TimelineSequenceFn);

package/dist/components/Timeline/TimelineSequenceFrame.js

@@ -9,6 +9,7 @@ const relativeFrameStyle = {
     opacity: 0.5,
     whiteSpace: 'nowrap',
     pointerEvents: 'none',
+    userSelect: 'none',
 };
 const TimelineSequenceFrame = ({ roundedFrame, premounted, postmounted }) => {
     return (jsx_runtime_1.jsx("div", { style: relativeFrameStyle, children: premounted

package/dist/components/Timeline/TimelineSequenceItem.js

@@ -60,9 +60,9 @@ const getEffectDragData = (dataTransfer) => {
     return null;
 };
 const TimelineSequenceItem = ({ nestedDepth, sequence, nodePathInfo, keyframeDisplayOffset }) => {
-    var _a;
-    var _b;
-    const nodePath = (_b = nodePathInfo === null || nodePathInfo === void 0 ? void 0 : nodePathInfo.sequenceSubscriptionKey) !== null && _b !== void 0 ? _b : null;
+    var _a, _b;
+    var _c;
+    const nodePath = (_c = nodePathInfo === null || nodePathInfo === void 0 ? void 0 : nodePathInfo.sequenceSubscriptionKey) !== null && _c !== void 0 ? _c : null;
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const previewConnected = previewServerState.type === 'connected';
     const { getIsExpanded } = (0, react_1.useContext)(ExpandedTracksProvider_1.ExpandedTracksGetterContext);
@@ -298,7 +298,7 @@ const TimelineSequenceItem = ({ nestedDepth, sequence, nodePathInfo, keyframeDis
     const codeHiddenStatus = codeValuesForOverride === null || codeValuesForOverride === void 0 ? void 0 : codeValuesForOverride.hidden;
     const isItemHidden = (0, react_1.useMemo)(() => {
         var _a;
-        const codeValue = codeHiddenStatus && codeHiddenStatus.canUpdate
+        const codeValue = codeHiddenStatus && codeHiddenStatus.status === 'static'
             ? codeHiddenStatus.codeValue
             : undefined;
         const runtimeValue = (_a = sequence.controls) === null || _a === void 0 ? void 0 : _a.currentRuntimeValueDotNotation.hidden;
@@ -311,7 +311,7 @@ const TimelineSequenceItem = ({ nestedDepth, sequence, nodePathInfo, keyframeDis
             !validatedLocation ||
             !codeValuesForOverride ||
             !codeHiddenStatus ||
-            !codeHiddenStatus.canUpdate ||
+            codeHiddenStatus.status !== 'static' ||
             previewServerState.type !== 'connected') {
             return;
         }
@@ -366,11 +366,11 @@ const TimelineSequenceItem = ({ nestedDepth, sequence, nodePathInfo, keyframeDis
         validatedLocation !== null &&
         codeHiddenStatus !== undefined &&
         codeHiddenStatus !== null &&
-        codeHiddenStatus.canUpdate;
+        codeHiddenStatus.status === 'static';
     const canDropEffect = previewServerState.type === 'connected' &&
         nodePath !== null &&
         validatedLocation !== null &&
-        sequence.type !== 'audio';
+        ((_b = sequence.controls) === null || _b === void 0 ? void 0 : _b.supportsEffects) === true;
     const onEffectDragOver = (0, react_1.useCallback)((e) => {
         if (!canDropEffect || !hasEffectDragType(e.dataTransfer)) {
             return;