@remotion/studio 4.0.474 → 4.0.475

package/dist/components/Timeline/TimelineSequenceItem.js

@@ -2,18 +2,18 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TimelineSequenceItem = 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 client_id_1 = require("../../helpers/client-id");
 const format_file_location_1 = require("../../helpers/format-file-location");
-const install_required_package_1 = require("../../helpers/install-required-package");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
 const call_api_1 = require("../call-api");
 const ConfirmationDialog_1 = require("../ConfirmationDialog");
 const ContextMenu_1 = require("../ContextMenu");
+const effect_drag_and_drop_1 = require("../effect-drag-and-drop");
 const ExpandedTracksProvider_1 = require("../ExpandedTracksProvider");
+const layout_1 = require("../layout");
 const NotificationCenter_1 = require("../Notifications/NotificationCenter");
 const use_select_asset_1 = require("../use-select-asset");
 const duplicate_selected_timeline_item_1 = require("./duplicate-selected-timeline-item");
@@ -34,7 +34,6 @@ const labelContainerStyle = {
     display: 'flex',
     flexDirection: 'row',
     minWidth: 0,
-    gap: 4,
 };
 const effectDropHighlight = {
     backgroundColor: 'rgba(0, 155, 255, 0.16)',
@@ -103,28 +102,6 @@ const getSequenceReorderDragData = (dataTransfer) => {
 const getDestinationIndex = ({ fromIndex, insertionIndex, }) => {
     return insertionIndex > fromIndex ? insertionIndex - 1 : insertionIndex;
 };
-const hasEffectDragType = (dataTransfer) => {
-    return Array.from(dataTransfer.types).some((type) => type === studio_shared_1.EFFECT_DRAG_MIME_TYPE ||
-        type === 'application/json' ||
-        type === 'text/plain');
-};
-const getEffectDragData = (dataTransfer) => {
-    for (const type of [
-        studio_shared_1.EFFECT_DRAG_MIME_TYPE,
-        'application/json',
-        'text/plain',
-    ]) {
-        const value = dataTransfer.getData(type);
-        if (!value) {
-            continue;
-        }
-        const parsed = (0, studio_shared_1.parseEffectDragData)(value);
-        if (parsed) {
-            return parsed;
-        }
-    }
-    return null;
-};
 const TimelineSequenceItem = ({ nestedDepth, sequence, nodePathInfo, keyframeDisplayOffset, trackIndex, }) => {
     var _a, _b;
     var _c, _d;
@@ -162,11 +139,10 @@ const TimelineSequenceItem = ({ nestedDepth, sequence, nodePathInfo, keyframeDis
     const canDeleteFromSource = Boolean(nodePath && (validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source));
     const nodePathKey = (0, react_1.useMemo)(() => nodePath ? remotion_1.Internals.makeSequencePropsSubscriptionKey(nodePath) : null, [nodePath]);
     const parentId = (_d = sequence.parent) !== null && _d !== void 0 ? _d : null;
-    const canReorderSequence = TimelineSelection_1.SELECTION_ENABLED &&
-        previewConnected &&
+    const canReorderSequence = previewConnected &&
         Boolean(nodePath && nodePathKey && (validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source)) &&
         (nodePathInfo === null || nodePathInfo === void 0 ? void 0 : nodePathInfo.numberOfSequencesWithThisNodePath) === 1;
-    const canHandleSequenceDrag = TimelineSelection_1.SELECTION_ENABLED && previewConnected;
+    const canHandleSequenceDrag = previewConnected;
     const confirm = (0, ConfirmationDialog_1.useConfirmationDialog)();
     const deleteDisabled = (0, react_1.useMemo)(() => !previewConnected || !sequence.controls || !canDeleteFromSource, [previewConnected, sequence.controls, canDeleteFromSource]);
     const duplicateDisabled = deleteDisabled;
@@ -519,7 +495,7 @@ const TimelineSequenceItem = ({ nestedDepth, sequence, nodePathInfo, keyframeDis
         toggleTrack(nodePathInfo);
     }, [nodePathInfo, toggleTrack]);
     const onShowInEditorDoubleClick = (0, react_1.useCallback)((e) => {
-        if (!TimelineSelection_1.SELECTION_ENABLED || !canOpenInEditor) {
+        if (!canOpenInEditor) {
             return;
         }
         if ((0, TimelineSelection_1.isTimelineSelectionModifierEvent)(e)) {
@@ -628,7 +604,7 @@ const TimelineSequenceItem = ({ nestedDepth, sequence, nodePathInfo, keyframeDis
     const onEffectDragOver = (0, react_1.useCallback)((e) => {
         if (!canDropEffect ||
             isSequenceReorderDrag(e.dataTransfer) ||
-            !hasEffectDragType(e.dataTransfer)) {
+            !(0, effect_drag_and_drop_1.hasEffectDragType)(e.dataTransfer)) {
             return;
         }
         e.preventDefault();
@@ -647,43 +623,35 @@ const TimelineSequenceItem = ({ nestedDepth, sequence, nodePathInfo, keyframeDis
             nodePath === null ||
             validatedLocation === null ||
             isSequenceReorderDrag(e.dataTransfer) ||
-            !hasEffectDragType(e.dataTransfer)) {
+            !(0, effect_drag_and_drop_1.hasEffectDragType)(e.dataTransfer)) {
             return;
         }
-        e.preventDefault();
-        e.stopPropagation();
-        setEffectDropHovered(false);
-        const dragData = getEffectDragData(e.dataTransfer);
+        const dragData = (0, effect_drag_and_drop_1.getEffectDragData)(e.dataTransfer);
         if (!dragData) {
-            (0, NotificationCenter_1.showNotification)('Could not read effect drag data', 3000);
-            return;
-        }
-        try {
-            const requiredPackage = (0, studio_shared_1.getRequiredPackageForEffectImportPath)(dragData.effect.importPath);
-            await (0, install_required_package_1.installRequiredPackages)(requiredPackage ? [requiredPackage] : []);
-            const result = await (0, call_api_1.callApi)('/api/add-effect', {
-                fileName: validatedLocation.source,
-                sequenceNodePath: nodePath,
-                effectName: dragData.effect.name,
-                effectImportPath: dragData.effect.importPath,
-                effectConfig: dragData.effect.config,
-                clientId: previewServerState.clientId,
-            });
-            if (result.success) {
-                (0, NotificationCenter_1.showNotification)(`Added ${dragData.effect.name}()`, 2000);
+            if ((0, effect_drag_and_drop_1.hasExplicitEffectDragType)(e.dataTransfer)) {
+                e.preventDefault();
+                e.stopPropagation();
+                setEffectDropHovered(false);
+                (0, NotificationCenter_1.showNotification)('Could not read effect drag data', 3000);
             }
-            else {
-                (0, NotificationCenter_1.showNotification)(result.reason, 4000);
-            }
-        }
-        catch (err) {
-            (0, NotificationCenter_1.showNotification)(err.message, 4000);
+            return;
         }
+        e.preventDefault();
+        e.stopPropagation();
+        setEffectDropHovered(false);
+        await (0, effect_drag_and_drop_1.addEffectFromDragData)({
+            dragData,
+            fileName: validatedLocation.source,
+            nodePath,
+            clientId: previewServerState.clientId,
+        });
     }, [canDropEffect, nodePath, previewServerState, validatedLocation]);
-    const trackRow = (jsx_runtime_1.jsx(TimelineRowChrome_1.TimelineRowChrome, { depth: nestedDepth, eye: canToggleVisibility ? (jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEye, { type: sequence.type === 'audio' ? 'speaker' : 'eye', hidden: isItemHidden, onInvoked: onToggleVisibility })) : (jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEyeSpacer, {})), arrow: hasExpandableContent ? (jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowButton, { isExpanded: isExpanded, onClick: onToggleExpand, label: "track properties", disabled: !previewConnected || nodePathInfo === null })) : (jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowSpacer, {})), style: rowStyle, selected: selected, selectable: selectable, onSelect: onSelect, showSelectedBackground: true, containsSelection: containsSelection, outerHeight: outerHeight, onDragLeave: canDropEffect ? onEffectDragLeave : undefined, onDragOver: canDropEffect ? onEffectDragOver : undefined, onDrop: canDropEffect ? onEffectDrop : undefined, onDoubleClick: TimelineSelection_1.SELECTION_ENABLED && canOpenInEditor
-            ? onShowInEditorDoubleClick
-            : undefined, children: jsx_runtime_1.jsxs("div", { style: labelContainerStyle, children: [
-                jsx_runtime_1.jsx(TimelineSequenceName_1.TimelineSequenceName, { sequence: sequence, selected: selected, containsSelection: containsSelection }), mediaSrc ? jsx_runtime_1.jsx(TimelineMediaInfo_1.TimelineMediaInfo, { src: mediaSrc }) : null, jsx_runtime_1.jsx(TimelineItemStack_1.TimelineItemStack, { originalLocation: originalLocation })
+    const trackRow = (jsx_runtime_1.jsx(TimelineRowChrome_1.TimelineRowChrome, { depth: nestedDepth, eye: canToggleVisibility ? (jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEye, { type: sequence.type === 'audio' ? 'speaker' : 'eye', hidden: isItemHidden, onInvoked: onToggleVisibility })) : (jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEyeSpacer, {})), arrow: hasExpandableContent ? (jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowButton, { isExpanded: isExpanded, onClick: onToggleExpand, label: "track properties", disabled: !previewConnected || nodePathInfo === null })) : (jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowSpacer, {})), style: rowStyle, selected: selected, selectable: selectable, onSelect: onSelect, showSelectedBackground: true, containsSelection: containsSelection, outerHeight: outerHeight, onDragLeave: canDropEffect ? onEffectDragLeave : undefined, onDragOver: canDropEffect ? onEffectDragOver : undefined, onDrop: canDropEffect ? onEffectDrop : undefined, onDoubleClick: canOpenInEditor ? onShowInEditorDoubleClick : undefined, children: jsx_runtime_1.jsxs("div", { style: labelContainerStyle, children: [
+                jsx_runtime_1.jsx(TimelineSequenceName_1.TimelineSequenceName, { sequence: sequence, selected: selected, containsSelection: containsSelection }), mediaSrc ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                        jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }),
+                        " ",
+                        jsx_runtime_1.jsx(TimelineMediaInfo_1.TimelineMediaInfo, { src: mediaSrc })
+                    ] })) : null, jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(TimelineItemStack_1.TimelineItemStack, { originalLocation: originalLocation })
             ] }) }));
     const draggableTrackRow = canHandleSequenceDrag ? (jsx_runtime_1.jsxs("div", { draggable: canReorderSequence, onDragStart: onSequenceDragStart, onDragEnd: onSequenceDragEnd, onDragOver: onSequenceDragOver, onDragLeave: onSequenceDragLeave, onDrop: onSequenceDrop, style: sequenceReorderWrapper, children: [sequenceReorderLineStyle ? (jsx_runtime_1.jsx("div", { style: sequenceReorderLineStyle })) : null, sequenceDropRejection ? (jsx_runtime_1.jsx("div", { style: sequenceReorderRejectionStyle, children: sequenceDropRejection })) : null, trackRow] })) : (trackRow);
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [previewConnected ? (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { values: contextMenuValues, onOpen: selectable ? onSelect : null, children: draggableTrackRow })) : (draggableTrackRow), previewConnected &&

package/dist/components/Timeline/TimelineSequenceName.js

@@ -12,19 +12,7 @@ const getTruncatedDisplayName = (displayName) => {
     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 style = (0, react_1.useMemo)(() => {
-        const hoverEffect = hovered && hoverable;
         return {
             alignItems: 'center',
             alignSelf: 'stretch',
@@ -33,18 +21,16 @@ 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]);
+    }, [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 }));
+    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 }), 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 })
+        ] }));
+};
+exports.TimelineTransformOriginField = TimelineTransformOriginField;

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/reset-selected-timeline-props.js

@@ -7,6 +7,13 @@ 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, }) => {
@@ -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) => string;

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

@@ -0,0 +1,32 @@
+"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) => {
+    return `${(0, timeline_field_utils_1.normalizeTimelineNumber)(value)}deg`;
+};
+exports.serializeCssRotation = serializeCssRotation;