@remotion/studio 4.0.474 → 4.0.476

package/dist/components/Timeline/TimelineSequenceName.js

@@ -5,26 +5,19 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const TimelineSelection_1 = require("./TimelineSelection");
 const MAX_DISPLAY_NAME_LENGTH = 1000;
+const MAX_RENAME_INPUT_WIDTH = 240;
+const RENAME_INPUT_CLASS_NAME = 'remotion-timeline-sequence-name-input';
 const getTruncatedDisplayName = (displayName) => {
     if (displayName.length > MAX_DISPLAY_NAME_LENGTH) {
         return displayName.slice(0, MAX_DISPLAY_NAME_LENGTH) + '...';
     }
     return displayName;
 };
-const TimelineSequenceName = ({ sequence, selected, containsSelection }) => {
-    const [hovered, setHovered] = (0, react_1.useState)(false);
-    const { documentationLink } = sequence;
-    const hoverable = !TimelineSelection_1.SELECTION_ENABLED && documentationLink !== null;
-    const onClick = (0, react_1.useCallback)(() => {
-        if (documentationLink === null) {
-            return;
-        }
-        window.open(documentationLink, '_blank', 'noopener,noreferrer');
-    }, [documentationLink]);
-    const onPointerEnter = (0, react_1.useCallback)(() => setHovered(true), []);
-    const onPointerLeave = (0, react_1.useCallback)(() => setHovered(false), []);
+const TimelineSequenceName = ({ displayName, selected, containsSelection, editing, onCancelEditing, onSaveName, }) => {
+    const inputRef = (0, react_1.useRef)(null);
+    const [draftName, setDraftName] = (0, react_1.useState)(displayName);
+    const cancelNextBlurRef = (0, react_1.useRef)(false);
     const style = (0, react_1.useMemo)(() => {
-        const hoverEffect = hovered && hoverable;
         return {
             alignItems: 'center',
             alignSelf: 'stretch',
@@ -33,18 +26,76 @@ const TimelineSequenceName = ({ sequence, selected, containsSelection }) => {
             fontSize: 12,
             whiteSpace: 'nowrap',
             textOverflow: 'ellipsis',
-            overflow: 'hidden',
             color: (0, TimelineSelection_1.getTimelineColor)(selected, false),
             userSelect: 'none',
             WebkitUserSelect: 'none',
-            textDecoration: hoverEffect ? 'underline' : 'none',
-            cursor: hoverEffect ? 'pointer' : undefined,
+            textDecoration: 'none',
             boxShadow: containsSelection && !selected
                 ? `inset 0 0 0 2px ${TimelineSelection_1.TIMELINE_SELECTED_LABEL_BACKGROUND}`
                 : undefined,
         };
-    }, [hovered, hoverable, selected, containsSelection]);
-    const text = getTruncatedDisplayName(sequence.displayName) || '<Sequence>';
-    return (jsx_runtime_1.jsx("div", { onPointerEnter: hoverable ? onPointerEnter : undefined, onPointerLeave: hoverable ? onPointerLeave : undefined, title: documentationLink ? `Open documentation: ${documentationLink}` : text, style: style, onClick: hoverable ? onClick : undefined, children: text }));
+    }, [selected, containsSelection]);
+    const inputStyle = (0, react_1.useMemo)(() => {
+        return {
+            ...style,
+            background: 'transparent',
+            border: 0,
+            color: (0, TimelineSelection_1.getTimelineColor)(false, false),
+            fontFamily: 'inherit',
+            fontSize: 12,
+            outline: 'none',
+            paddingBottom: 0,
+            paddingTop: 0,
+            boxSizing: 'border-box',
+            maxWidth: MAX_RENAME_INPUT_WIDTH,
+            minWidth: 0,
+            userSelect: 'text',
+            WebkitUserSelect: 'text',
+        };
+    }, [style]);
+    const text = getTruncatedDisplayName(displayName) || '<Sequence>';
+    (0, react_1.useEffect)(() => {
+        if (!editing) {
+            setDraftName(displayName);
+            return;
+        }
+        const input = inputRef.current;
+        if (!input) {
+            return;
+        }
+        input.focus();
+        const basenameIndex = displayName.lastIndexOf('.');
+        const selectionEnd = basenameIndex > 0 ? basenameIndex : displayName.length;
+        input.setSelectionRange(0, selectionEnd);
+    }, [displayName, editing]);
+    const save = (0, react_1.useCallback)(() => {
+        onSaveName(draftName).catch(() => undefined);
+    }, [draftName, onSaveName]);
+    const onKeyDown = (0, react_1.useCallback)((e) => {
+        if (e.key === 'Escape') {
+            cancelNextBlurRef.current = true;
+            e.preventDefault();
+            onCancelEditing();
+            return;
+        }
+        if (e.key === 'Enter') {
+            cancelNextBlurRef.current = true;
+            e.preventDefault();
+            save();
+        }
+    }, [onCancelEditing, save]);
+    const onBlur = (0, react_1.useCallback)(() => {
+        if (cancelNextBlurRef.current) {
+            cancelNextBlurRef.current = false;
+            return;
+        }
+        save();
+    }, [save]);
+    if (editing) {
+        return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                jsx_runtime_1.jsx("style", { children: `.${RENAME_INPUT_CLASS_NAME}::selection { background: rgba(255, 255, 255, 0.72); color: black; }` }), jsx_runtime_1.jsx("input", { ref: inputRef, className: RENAME_INPUT_CLASS_NAME, value: draftName, onChange: (e) => setDraftName(e.target.value), onBlur: onBlur, onKeyDown: onKeyDown, size: Math.max(1, draftName.length), style: inputStyle })
+            ] }));
+    }
+    return (jsx_runtime_1.jsx("div", { title: text, style: style, children: text }));
 };
 exports.TimelineSequenceName = TimelineSequenceName;

package/dist/components/Timeline/TimelineSequencePropItem.js

@@ -142,7 +142,7 @@ const TimelineSequencePropItem = ({ field, validatedLocation, rowDepth, nodePath
                 schema,
                 key: field.key,
             }),
-        }) ? (jsx_runtime_1.jsx(TimelineKeyframeControls_1.TimelineKeyframeControls, { fieldKey: field.key, propStatus: propStatus, nodePath: nodePath, fileName: validatedLocation.source, keyframeDisplayOffset: keyframeDisplayOffset, defaultValue: field.fieldSchema.default, dragOverrideValue: dragOverrideValue, schema: schema, effectIndex: null })) : null;
+        }) ? (jsx_runtime_1.jsx(TimelineKeyframeControls_1.TimelineKeyframeControls, { fieldKey: field.key, propStatus: propStatus, nodePath: nodePath, fileName: validatedLocation.source, keyframeDisplayOffset: keyframeDisplayOffset, defaultValue: field.fieldSchema.default, dragOverrideValue: dragOverrideValue, schema: schema, effectIndex: null, nodePathInfo: nodePathInfo })) : null;
     const style = (0, react_1.useMemo)(() => {
         return {
             ...fieldRowBase,

package/dist/components/Timeline/TimelineTimeIndicators.js

@@ -10,13 +10,15 @@ const render_frame_1 = require("../../state/render-frame");
 const TimeValue_1 = require("../TimeValue");
 const timeline_refs_1 = require("./timeline-refs");
 const timeline_scroll_logic_1 = require("./timeline-scroll-logic");
+const TimelineSelection_1 = require("./TimelineSelection");
 const TimelineWidthProvider_1 = require("./TimelineWidthProvider");
 exports.TIMELINE_TIME_INDICATOR_HEIGHT = 39;
 const container = {
     height: exports.TIMELINE_TIME_INDICATOR_HEIGHT,
     position: 'absolute',
-    backgroundColor: colors_1.TIMELINE_BACKGROUND,
+    backgroundColor: TimelineSelection_1.TIMELINE_TICKS_BACKGROUND,
     top: 0,
+    borderBottom: `${timeline_layout_1.TIMELINE_ITEM_BORDER_BOTTOM}px solid ${colors_1.TIMELINE_TRACK_SEPARATOR}`,
 };
 const tick = {
     width: 1,
@@ -41,7 +43,7 @@ const timeValue = {
     height: exports.TIMELINE_TIME_INDICATOR_HEIGHT,
     position: 'absolute',
     top: 0,
-    width: '100%',
+    width: 'calc(100% + 1.5px)',
     paddingLeft: 10,
     display: 'flex',
     alignItems: 'center',

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

@@ -0,0 +1,11 @@
+import React from 'react';
+import type { CanUpdateSequencePropStatusStatic } from 'remotion';
+import type { SchemaFieldInfo, TimelineFieldOnDragValueChange, TimelineFieldOnSave } from '../../helpers/timeline-layout';
+export declare const TimelineTransformOriginField: React.FC<{
+    readonly field: SchemaFieldInfo;
+    readonly propStatus: CanUpdateSequencePropStatusStatic;
+    readonly effectiveValue: unknown;
+    readonly onSave: TimelineFieldOnSave;
+    readonly onDragValueChange: TimelineFieldOnDragValueChange;
+    readonly onDragEnd: () => void;
+}>;

package/dist/components/Timeline/TimelineTransformOriginField.js

@@ -0,0 +1,138 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TimelineTransformOriginField = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const InputDragger_1 = require("../NewComposition/InputDragger");
+const timeline_field_utils_1 = require("./timeline-field-utils");
+const TimelineSchemaField_1 = require("./TimelineSchemaField");
+const transform_origin_utils_1 = require("./transform-origin-utils");
+const leftDraggerStyle = {
+    paddingLeft: 0,
+};
+const rightDraggerStyle = {
+    paddingRight: 0,
+};
+const containerStyle = {
+    display: 'flex',
+    gap: 4,
+};
+const TimelineTransformOriginField = ({ field, propStatus, effectiveValue, onSave, onDragValueChange, onDragEnd, }) => {
+    const [dragX, setDragX] = (0, react_1.useState)(null);
+    const [dragY, setDragY] = (0, react_1.useState)(null);
+    const parsed = (0, react_1.useMemo)(() => (0, transform_origin_utils_1.parseTransformOrigin)(effectiveValue), [effectiveValue]);
+    const percent = (0, react_1.useMemo)(() => (parsed === null ? null : (0, transform_origin_utils_1.parsedTransformOriginToPercent)(parsed)), [parsed]);
+    const configuredStep = field.fieldSchema.type === 'transform-origin'
+        ? field.fieldSchema.step
+        : undefined;
+    const step = configuredStep !== null && configuredStep !== void 0 ? configuredStep : 1;
+    const decimalPlaces = (0, react_1.useMemo)(() => (0, timeline_field_utils_1.getTimelineDisplayDecimalPlaces)({
+        defaultDecimalPlaces: 2,
+        step: configuredStep,
+    }), [configuredStep]);
+    const formatter = (0, react_1.useCallback)((v) => {
+        const formatted = (0, timeline_field_utils_1.formatTimelineNumber)({
+            decimalPlaces,
+            fixed: false,
+            value: v,
+        });
+        return `${formatted}%`;
+    }, [decimalPlaces]);
+    const serialize = (0, react_1.useCallback)((x, y) => {
+        var _a;
+        return (0, transform_origin_utils_1.serializeTransformOrigin)({
+            uv: (0, transform_origin_utils_1.transformOriginPercentToUv)([x, y]),
+            z: (_a = parsed === null || parsed === void 0 ? void 0 : parsed.z) !== null && _a !== void 0 ? _a : null,
+            decimalPlaces,
+        });
+    }, [decimalPlaces, parsed === null || parsed === void 0 ? void 0 : parsed.z]);
+    const onXChange = (0, react_1.useCallback)((newVal) => {
+        if (percent === null) {
+            return;
+        }
+        setDragX(newVal);
+        const currentY = dragY !== null && dragY !== void 0 ? dragY : percent[1];
+        onDragValueChange(serialize(newVal, currentY));
+    }, [dragY, onDragValueChange, percent, serialize]);
+    const onXChangeEnd = (0, react_1.useCallback)((newVal) => {
+        if (percent === null) {
+            return;
+        }
+        const currentY = dragY !== null && dragY !== void 0 ? dragY : percent[1];
+        const value = serialize(newVal, currentY);
+        if (value !== propStatus.codeValue) {
+            onSave(value).finally(() => {
+                setDragX(null);
+                onDragEnd();
+            });
+        }
+        else {
+            setDragX(null);
+            onDragEnd();
+        }
+    }, [dragY, onDragEnd, onSave, percent, propStatus.codeValue, serialize]);
+    const onXTextChange = (0, react_1.useCallback)((newVal) => {
+        if (percent === null) {
+            return;
+        }
+        const parsedValue = Number(newVal);
+        if (!Number.isNaN(parsedValue)) {
+            const currentY = dragY !== null && dragY !== void 0 ? dragY : percent[1];
+            const value = serialize(parsedValue, currentY);
+            if (value !== propStatus.codeValue) {
+                setDragX(parsedValue);
+                onSave(value).finally(() => {
+                    setDragX(null);
+                });
+            }
+        }
+    }, [dragY, onSave, percent, propStatus.codeValue, serialize]);
+    const onYChange = (0, react_1.useCallback)((newVal) => {
+        if (percent === null) {
+            return;
+        }
+        setDragY(newVal);
+        const currentX = dragX !== null && dragX !== void 0 ? dragX : percent[0];
+        onDragValueChange(serialize(currentX, newVal));
+    }, [dragX, onDragValueChange, percent, serialize]);
+    const onYChangeEnd = (0, react_1.useCallback)((newVal) => {
+        if (percent === null) {
+            return;
+        }
+        const currentX = dragX !== null && dragX !== void 0 ? dragX : percent[0];
+        const value = serialize(currentX, newVal);
+        if (value !== propStatus.codeValue) {
+            onSave(value).finally(() => {
+                setDragY(null);
+                onDragEnd();
+            });
+        }
+        else {
+            setDragY(null);
+            onDragEnd();
+        }
+    }, [dragX, onDragEnd, onSave, percent, propStatus.codeValue, serialize]);
+    const onYTextChange = (0, react_1.useCallback)((newVal) => {
+        if (percent === null) {
+            return;
+        }
+        const parsedValue = Number(newVal);
+        if (!Number.isNaN(parsedValue)) {
+            const currentX = dragX !== null && dragX !== void 0 ? dragX : percent[0];
+            const value = serialize(currentX, parsedValue);
+            if (value !== propStatus.codeValue) {
+                setDragY(parsedValue);
+                onSave(value).finally(() => {
+                    setDragY(null);
+                });
+            }
+        }
+    }, [dragX, onSave, percent, propStatus.codeValue, serialize]);
+    if (percent === null) {
+        return jsx_runtime_1.jsx(TimelineSchemaField_1.UnsupportedStatus, { label: "unsupported origin" });
+    }
+    return (jsx_runtime_1.jsxs("span", { style: containerStyle, children: [
+            jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: dragX !== null && dragX !== void 0 ? dragX : percent[0], style: leftDraggerStyle, status: "ok", small: true, onValueChange: onXChange, onValueChangeEnd: onXChangeEnd, onTextChange: onXTextChange, min: -Infinity, max: Infinity, step: step, formatter: formatter, rightAlign: false, snapToStep: false, dragDecimalPlaces: decimalPlaces }), jsx_runtime_1.jsx("div", { style: { marginLeft: -6, marginRight: -6 } }), jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: dragY !== null && dragY !== void 0 ? dragY : percent[1], style: rightDraggerStyle, status: "ok", small: true, onValueChange: onYChange, onValueChangeEnd: onYChangeEnd, onTextChange: onYTextChange, min: -Infinity, max: Infinity, step: step, formatter: formatter, rightAlign: false, snapToStep: false, dragDecimalPlaces: decimalPlaces })
+        ] }));
+};
+exports.TimelineTransformOriginField = TimelineTransformOriginField;

package/dist/components/Timeline/TimelineTranslateField.js

@@ -101,7 +101,7 @@ const TimelineTranslateField = ({ field, propStatus, effectiveValue, onSave, onD
         }
     }, [propStatus, onSave, dragX, codeX, decimalPlaces]);
     return (jsx_runtime_1.jsxs("span", { style: containerStyle, children: [
-            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: -Infinity, max: Infinity, step: step, formatter: formatter, rightAlign: false }), jsx_runtime_1.jsx("div", { style: { marginLeft: -6, marginRight: -6 } }), 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: -Infinity, max: Infinity, step: step, formatter: formatter, rightAlign: false })
+            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: -Infinity, max: Infinity, step: step, formatter: formatter, rightAlign: false, snapToStep: false, dragDecimalPlaces: decimalPlaces }), jsx_runtime_1.jsx("div", { style: { marginLeft: -6, marginRight: -6 } }), 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: -Infinity, max: Infinity, step: step, formatter: formatter, rightAlign: false, snapToStep: false, dragDecimalPlaces: decimalPlaces })
         ] }));
 };
 exports.TimelineTranslateField = TimelineTranslateField;

package/dist/components/Timeline/TimelineUvCoordinateField.js

@@ -120,7 +120,7 @@ const TimelineUvCoordinateField = ({ field, propStatus, effectiveValue, onSave,
         }
     }, [propStatus, onSave, dragX, codeX]);
     return (jsx_runtime_1.jsxs("span", { style: containerStyle, children: [
-            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, snapToStep: false }), jsx_runtime_1.jsx("div", { style: { marginLeft: -6, marginRight: -6 } }), 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, snapToStep: false })
+            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, snapToStep: false, dragDecimalPlaces: decimalPlaces }), jsx_runtime_1.jsx("div", { style: { marginLeft: -6, marginRight: -6 } }), 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, snapToStep: false, dragDecimalPlaces: decimalPlaces })
         ] }));
 };
 exports.TimelineUvCoordinateField = TimelineUvCoordinateField;

package/dist/components/Timeline/call-add-keyframe.d.ts

@@ -1,5 +1,16 @@
 import type { SequencePropsSubscriptionKey, SequenceSchema } from 'remotion';
 import type { SetPropStatuses } from './save-sequence-prop';
+export type AddSequenceKeyframeChange = {
+    fileName: string;
+    nodePath: SequencePropsSubscriptionKey;
+    fieldKey: string;
+    sourceFrame: number;
+    value: unknown;
+    schema: SequenceSchema;
+};
+export type AddEffectKeyframeChange = AddSequenceKeyframeChange & {
+    effectIndex: number;
+};
 export declare const callAddSequenceKeyframe: ({ fileName, nodePath, fieldKey, sourceFrame, value, schema, setPropStatuses, clientId, }: {
     fileName: string;
     nodePath: SequencePropsSubscriptionKey;
@@ -10,6 +21,12 @@ export declare const callAddSequenceKeyframe: ({ fileName, nodePath, fieldKey, s
     setPropStatuses: SetPropStatuses;
     clientId: string;
 }) => Promise<void>;
+export declare const callAddKeyframes: ({ sequenceKeyframes, effectKeyframes, setPropStatuses, clientId, }: {
+    sequenceKeyframes: AddSequenceKeyframeChange[];
+    effectKeyframes: AddEffectKeyframeChange[];
+    setPropStatuses: SetPropStatuses;
+    clientId: string;
+}) => Promise<void>;
 export declare const callAddEffectKeyframe: ({ fileName, nodePath, effectIndex, fieldKey, sourceFrame, value, schema, setPropStatuses, clientId, }: {
     fileName: string;
     nodePath: SequencePropsSubscriptionKey;

package/dist/components/Timeline/call-add-keyframe.js

@@ -1,10 +1,21 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.callAddEffectKeyframe = exports.callAddSequenceKeyframe = void 0;
+exports.callAddEffectKeyframe = exports.callAddKeyframes = exports.callAddSequenceKeyframe = void 0;
 const studio_shared_1 = require("@remotion/studio-shared");
 const call_api_1 = require("../call-api");
 const apply_effect_response_to_prop_statuses_1 = require("./apply-effect-response-to-prop-statuses");
 const save_prop_queue_1 = require("./save-prop-queue");
+const groupByNodePath = (keyframes) => {
+    var _a;
+    const groups = new Map();
+    for (const keyframe of keyframes) {
+        const key = JSON.stringify(keyframe.nodePath);
+        const group = (_a = groups.get(key)) !== null && _a !== void 0 ? _a : [];
+        group.push(keyframe);
+        groups.set(key, group);
+    }
+    return [...groups.values()];
+};
 const callAddSequenceKeyframe = ({ fileName, nodePath, fieldKey, sourceFrame, value, schema, setPropStatuses, clientId, }) => {
     return (0, save_prop_queue_1.enqueueSavePropChange)({
         nodePath,
@@ -29,6 +40,59 @@ const callAddSequenceKeyframe = ({ fileName, nodePath, fieldKey, sourceFrame, va
     });
 };
 exports.callAddSequenceKeyframe = callAddSequenceKeyframe;
+const callAddKeyframes = ({ sequenceKeyframes, effectKeyframes, setPropStatuses, clientId, }) => {
+    if (sequenceKeyframes.length === 0 && effectKeyframes.length === 0) {
+        return Promise.resolve();
+    }
+    for (const keyframes of groupByNodePath(sequenceKeyframes)) {
+        const [firstKeyframe] = keyframes;
+        if (!firstKeyframe) {
+            continue;
+        }
+        setPropStatuses(firstKeyframe.nodePath, (prev) => keyframes.reduce((current, keyframe) => (0, studio_shared_1.optimisticAddSequenceKeyframe)({
+            previous: current,
+            fieldKey: keyframe.fieldKey,
+            frame: keyframe.sourceFrame,
+            value: keyframe.value,
+            schema: keyframe.schema,
+        }), prev));
+    }
+    for (const keyframes of groupByNodePath(effectKeyframes)) {
+        const [firstKeyframe] = keyframes;
+        if (!firstKeyframe) {
+            continue;
+        }
+        setPropStatuses(firstKeyframe.nodePath, (prev) => keyframes.reduce((current, keyframe) => (0, studio_shared_1.optimisticAddEffectKeyframe)({
+            previous: current,
+            effectIndex: keyframe.effectIndex,
+            fieldKey: keyframe.fieldKey,
+            frame: keyframe.sourceFrame,
+            value: keyframe.value,
+            schema: keyframe.schema,
+        }), prev));
+    }
+    return (0, call_api_1.callApi)('/api/add-keyframes', {
+        sequenceKeyframes: sequenceKeyframes.map((keyframe) => ({
+            fileName: keyframe.fileName,
+            nodePath: keyframe.nodePath,
+            key: keyframe.fieldKey,
+            frame: keyframe.sourceFrame,
+            value: JSON.stringify(keyframe.value),
+            schema: keyframe.schema,
+        })),
+        effectKeyframes: effectKeyframes.map((keyframe) => ({
+            fileName: keyframe.fileName,
+            sequenceNodePath: keyframe.nodePath,
+            effectIndex: keyframe.effectIndex,
+            key: keyframe.fieldKey,
+            frame: keyframe.sourceFrame,
+            value: JSON.stringify(keyframe.value),
+            schema: keyframe.schema,
+        })),
+        clientId,
+    }).then(() => undefined);
+};
+exports.callAddKeyframes = callAddKeyframes;
 const callAddEffectKeyframe = ({ fileName, nodePath, effectIndex, fieldKey, sourceFrame, value, schema, setPropStatuses, clientId, }) => {
     return (0, save_prop_queue_1.enqueueSavePropChange)({
         nodePath,

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

@@ -134,6 +134,7 @@ const isSequenceRowSelection = (selection) => selection.type === 'sequence';
 const isSequenceEffectSelection = (selection) => selection.type === 'sequence-effect';
 const isSequenceAllEffectsSelection = (selection) => selection.type === 'sequence-all-effects';
 const isKeyframeSelection = (selection) => selection.type === 'keyframe';
+const areSelectionsOnlyOfType = (selections, type) => selections.every((selection) => selection.type === type);
 const assertTimelineSelectionsHaveSameType = (selections) => {
     const firstSelection = selections[0];
     if (!firstSelection) {
@@ -145,12 +146,33 @@ const assertTimelineSelectionsHaveSameType = (selections) => {
         }
     }
 };
+const containsOnlyKeyframesAndEasings = (selections) => selections.every((selection) => selection.type === 'keyframe' || selection.type === 'easing');
 const deleteSelectedTimelineItems = ({ selections, sequences, overrideIdsToNodePaths, setPropStatuses, clientId, confirm, }) => {
     var _a;
     const firstSelection = selections[0];
     if (!firstSelection) {
         return null;
     }
+    if (containsOnlyKeyframesAndEasings(selections)) {
+        const keyframes = selections.filter(isKeyframeSelection);
+        if (keyframes.length === 0) {
+            return null;
+        }
+        const promise = (0, delete_selected_keyframe_1.deleteSelectedKeyframes)({
+            keyframes: keyframes.map((selection) => ({
+                nodePathInfo: selection.nodePathInfo,
+                frame: selection.frame,
+            })),
+            sequences,
+            overrideIdsToNodePaths,
+            setPropStatuses,
+            clientId,
+        });
+        return (_a = promise === null || promise === void 0 ? void 0 : promise.then(() => true)) !== null && _a !== void 0 ? _a : null;
+    }
+    if (!areSelectionsOnlyOfType(selections, firstSelection.type)) {
+        return null;
+    }
     assertTimelineSelectionsHaveSameType(selections);
     switch (firstSelection.type) {
         case 'sequence':
@@ -163,19 +185,7 @@ const deleteSelectedTimelineItems = ({ selections, sequences, overrideIdsToNodeP
                 nodePathInfo: selection.nodePathInfo,
                 effectIndex: selection.i,
             })));
-        case 'keyframe': {
-            const promise = (0, delete_selected_keyframe_1.deleteSelectedKeyframes)({
-                keyframes: selections.filter(isKeyframeSelection).map((selection) => ({
-                    nodePathInfo: selection.nodePathInfo,
-                    frame: selection.frame,
-                })),
-                sequences,
-                overrideIdsToNodePaths,
-                setPropStatuses,
-                clientId,
-            });
-            return (_a = promise === null || promise === void 0 ? void 0 : promise.then(() => true)) !== null && _a !== void 0 ? _a : null;
-        }
+        case 'keyframe':
         case 'sequence-prop':
         case 'sequence-effect-prop':
         case 'easing':

package/dist/components/Timeline/disable-sequence-interactivity.d.ts

@@ -0,0 +1,8 @@
+import type { SequencePropsSubscriptionKey } from 'remotion';
+import { type SetPropStatuses } from './save-sequence-prop';
+export declare const disableSequenceInteractivity: ({ clientId, fileName, nodePath, setPropStatuses, }: {
+    readonly clientId: string;
+    readonly fileName: string;
+    readonly nodePath: SequencePropsSubscriptionKey;
+    readonly setPropStatuses: SetPropStatuses;
+}) => Promise<void>;

package/dist/components/Timeline/disable-sequence-interactivity.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.disableSequenceInteractivity = void 0;
+const no_react_1 = require("remotion/no-react");
+const save_sequence_prop_1 = require("./save-sequence-prop");
+const disableSequenceInteractivity = ({ clientId, fileName, nodePath, setPropStatuses, }) => {
+    return (0, save_sequence_prop_1.saveSequenceProps)({
+        changes: [
+            {
+                fileName,
+                nodePath,
+                fieldKey: 'showInTimeline',
+                value: false,
+                defaultValue: 'true',
+                schema: no_react_1.NoReactInternals.sequenceSchema,
+            },
+        ],
+        setPropStatuses,
+        clientId,
+        undoLabel: 'Disable interactivity',
+        redoLabel: 'Disable interactivity again',
+    });
+};
+exports.disableSequenceInteractivity = disableSequenceInteractivity;

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

@@ -7,16 +7,23 @@ 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';
+function assertPropResetSelections(selections) {
+    for (const selection of selections) {
+        if (!isPropResetSelection(selection)) {
+            throw new Error(`Assertion failed: Cannot reset timeline selection of type ${selection.type}`);
+        }
+    }
+}
 const isVisibleFieldSchema = (fieldSchema) => fieldSchema !== undefined && fieldSchema.type !== 'hidden';
 const isNonDefaultCodeValue = ({ propStatus, defaultValue, }) => JSON.stringify(propStatus !== null && propStatus !== void 0 ? propStatus : defaultValue) !== JSON.stringify(defaultValue);
 const isResettablePropStatus = ({ propStatus, defaultValue, }) => {
-    if (!propStatus || propStatus.status === 'computed') {
+    if (!propStatus) {
         return false;
     }
     if (defaultValue === undefined) {
         return false;
     }
-    if (propStatus.status === 'keyframed') {
+    if (propStatus.status === 'keyframed' || propStatus.status === 'computed') {
         return true;
     }
     return isNonDefaultCodeValue({
@@ -30,15 +37,16 @@ const getDefaultValue = (fieldSchema) => fieldSchema.default !== undefined
 const getTimelinePropResetTargets = ({ selections, sequences, overrideIdsToNodePaths, propStatuses, }) => {
     var _a;
     var _b;
-    const firstSelection = selections[0];
-    if (!firstSelection || !isPropResetSelection(firstSelection)) {
+    const propSelections = selections.filter(isPropResetSelection);
+    if (propSelections.length === 0) {
         return null;
     }
+    if (propSelections.length !== selections.length) {
+        return null;
+    }
+    assertPropResetSelections(selections);
     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,

package/dist/components/Timeline/timeline-rotation-utils.d.ts

@@ -0,0 +1,2 @@
+export declare const parseCssRotationToDegrees: (value: string) => number;
+export declare const serializeCssRotation: (value: number, decimalPlaces?: number) => string;

package/dist/components/Timeline/timeline-rotation-utils.js

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.serializeCssRotation = exports.parseCssRotationToDegrees = void 0;
+const timeline_field_utils_1 = require("./timeline-field-utils");
+const unitPattern = /^([+-]?(?:\d+\.?\d*|\.\d+))(deg|rad|turn|grad)$/;
+const unitToDegrees = {
+    deg: 1,
+    rad: 180 / Math.PI,
+    turn: 360,
+    grad: 360 / 400,
+};
+const parseCssRotationToDegrees = (value) => {
+    const match = value.trim().match(unitPattern);
+    if (match) {
+        return (0, timeline_field_utils_1.normalizeTimelineNumber)(Number(match[1]) * unitToDegrees[match[2]]);
+    }
+    if (typeof DOMMatrix === 'undefined') {
+        return 0;
+    }
+    try {
+        const m = new DOMMatrix(`rotate(${value})`);
+        return (0, timeline_field_utils_1.normalizeTimelineNumber)(Math.atan2(m.b, m.a) * (180 / Math.PI));
+    }
+    catch (_a) {
+        return 0;
+    }
+};
+exports.parseCssRotationToDegrees = parseCssRotationToDegrees;
+const serializeCssRotation = (value, decimalPlaces = 6) => {
+    const factor = 10 ** decimalPlaces;
+    const rounded = Math.round((0, timeline_field_utils_1.normalizeTimelineNumber)(value) * factor) / factor;
+    return `${Object.is(rounded, -0) ? 0 : rounded}deg`;
+};
+exports.serializeCssRotation = serializeCssRotation;

package/dist/components/Timeline/transform-origin-utils.d.ts

@@ -0,0 +1,24 @@
+export type TransformOriginUnit = '%' | 'px';
+export type TransformOriginAxisValue = {
+    readonly value: number;
+    readonly unit: TransformOriginUnit;
+};
+export type ParsedTransformOrigin = {
+    readonly x: TransformOriginAxisValue;
+    readonly y: TransformOriginAxisValue;
+    readonly z: string | null;
+};
+export declare const parseTransformOrigin: (value: unknown) => ParsedTransformOrigin | null;
+export declare const axisValueToUv: (axis: TransformOriginAxisValue, size: number) => number | null;
+export declare const parsedTransformOriginToUv: ({ parsed, width, height, }: {
+    readonly parsed: ParsedTransformOrigin;
+    readonly width: number;
+    readonly height: number;
+}) => readonly [number, number] | null;
+export declare const serializeTransformOrigin: ({ uv, z, decimalPlaces, }: {
+    readonly uv: readonly [number, number];
+    readonly z: string | null;
+    readonly decimalPlaces?: number | undefined;
+}) => string;
+export declare const parsedTransformOriginToPercent: (parsed: ParsedTransformOrigin) => readonly [number, number] | null;
+export declare const transformOriginPercentToUv: (percent: readonly [number, number]) => readonly [number, number];