@remotion/studio 4.0.468 → 4.0.470

package/dist/components/Timeline/TimelineSequencePropItem.js

@@ -0,0 +1,183 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TimelineSequencePropItem = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const remotion_1 = require("remotion");
+const client_id_1 = require("../../helpers/client-id");
+const ContextMenu_1 = require("../ContextMenu");
+const save_sequence_prop_1 = require("./save-sequence-prop");
+const timeline_field_row_layout_1 = require("./timeline-field-row-layout");
+const TimelineExpandArrowButton_1 = require("./TimelineExpandArrowButton");
+const TimelineFieldLabel_1 = require("./TimelineFieldLabel");
+const TimelineKeyframeControls_1 = require("./TimelineKeyframeControls");
+const TimelineKeyframedValue_1 = require("./TimelineKeyframedValue");
+const TimelineLayerEye_1 = require("./TimelineLayerEye");
+const TimelineRowChrome_1 = require("./TimelineRowChrome");
+const TimelineSchemaField_1 = require("./TimelineSchemaField");
+const TimelineSelection_1 = require("./TimelineSelection");
+const fieldRowBase = {};
+const Value = ({ field, nodePath, validatedLocation, schema, codeValue }) => {
+    const { getDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeDragOverridesContext);
+    const { setDragOverrides, clearDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
+    const dragOverrideValue = (0, react_1.useMemo)(() => {
+        var _a;
+        return nodePath === null
+            ? undefined
+            : ((_a = getDragOverrides(nodePath)) !== null && _a !== void 0 ? _a : {})[field.key];
+    }, [getDragOverrides, nodePath, field.key]);
+    const effectiveValue = remotion_1.Internals.getEffectiveVisualModeValue({
+        codeValue,
+        dragOverrideValue,
+        defaultValue: field.fieldSchema.default,
+        shouldResortToDefaultValueIfUndefined: true,
+    });
+    const { setCodeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
+    const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
+    const clientId = previewServerState.type === 'connected'
+        ? previewServerState.clientId
+        : null;
+    const onSave = (0, react_1.useCallback)((value) => {
+        if (!codeValue || !codeValue.canUpdate) {
+            return Promise.reject(new Error('Cannot save'));
+        }
+        if (!clientId) {
+            return Promise.reject(new Error('Not connected to studio server'));
+        }
+        const defaultValue = field.fieldSchema.default !== undefined
+            ? JSON.stringify(field.fieldSchema.default)
+            : null;
+        const stringifiedValue = JSON.stringify(value);
+        if (value === codeValue.codeValue) {
+            return Promise.resolve();
+        }
+        if (defaultValue === stringifiedValue &&
+            codeValue.codeValue === undefined) {
+            return Promise.resolve();
+        }
+        return (0, save_sequence_prop_1.saveSequenceProp)({
+            fileName: validatedLocation.source,
+            nodePath,
+            fieldKey: field.key,
+            value,
+            defaultValue,
+            schema,
+            setCodeValues,
+            clientId,
+        });
+    }, [
+        codeValue,
+        clientId,
+        field.fieldSchema.default,
+        field.key,
+        nodePath,
+        schema,
+        setCodeValues,
+        validatedLocation,
+    ]);
+    const onDragValueChange = (0, react_1.useCallback)((value) => {
+        if (nodePath === null) {
+            throw new Error('Cannot drag value');
+        }
+        setDragOverrides(nodePath, field.key, value);
+    }, [setDragOverrides, nodePath, field.key]);
+    const onDragEnd = (0, react_1.useCallback)(() => {
+        if (nodePath === null) {
+            throw new Error('Cannot clear drag value');
+        }
+        clearDragOverrides(nodePath);
+    }, [clearDragOverrides, nodePath]);
+    return (jsx_runtime_1.jsx(TimelineSchemaField_1.TimelineFieldValue, { field: field, propStatus: codeValue, onSave: onSave, onDragValueChange: onDragValueChange, onDragEnd: onDragEnd, effectiveValue: effectiveValue }));
+};
+const TimelineSequencePropItem = ({ field, validatedLocation, rowDepth, nodePath, nodePathInfo, schema, keyframeDisplayOffset, }) => {
+    var _a, _b;
+    const { codeValues: visualModeCodeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeCodeValuesContext);
+    const { getDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeDragOverridesContext);
+    const { setCodeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
+    const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
+    const selection = (0, TimelineSelection_1.useTimelineRowSelection)(nodePathInfo);
+    const codeValuesForOverride = remotion_1.Internals.getCodeValuesCtx(visualModeCodeValues, nodePath);
+    const codeValue = (_a = codeValuesForOverride === null || codeValuesForOverride === void 0 ? void 0 : codeValuesForOverride[field.key]) !== null && _a !== void 0 ? _a : null;
+    const dragOverrideValue = (0, react_1.useMemo)(() => {
+        var _a;
+        return ((_a = getDragOverrides(nodePath)) !== null && _a !== void 0 ? _a : {})[field.key];
+    }, [getDragOverrides, nodePath, field.key]);
+    const keyframeControls = codeValue !== null &&
+        (0, TimelineKeyframeControls_1.shouldShowTimelineKeyframeControls)({
+            propStatus: codeValue,
+            selected: selection.selected,
+        }) ? (jsx_runtime_1.jsx(TimelineKeyframeControls_1.TimelineKeyframeControls, { fieldKey: field.key, propStatus: codeValue, nodePath: nodePath, fileName: validatedLocation.source, keyframeDisplayOffset: keyframeDisplayOffset, defaultValue: field.fieldSchema.default, dragOverrideValue: dragOverrideValue, schema: schema, effectIndex: null })) : null;
+    const style = (0, react_1.useMemo)(() => {
+        return {
+            ...fieldRowBase,
+            height: field.rowHeight,
+        };
+    }, [field.rowHeight]);
+    const isNonDefault = (0, react_1.useMemo)(() => {
+        var _a;
+        if (!codeValue || !codeValue.canUpdate) {
+            return false;
+        }
+        const effectiveCodeValue = (_a = codeValue.codeValue) !== null && _a !== void 0 ? _a : field.fieldSchema.default;
+        return (JSON.stringify(effectiveCodeValue) !==
+            JSON.stringify(field.fieldSchema.default));
+    }, [codeValue, field.fieldSchema.default]);
+    const canPerformReset = previewServerState.type === 'connected' &&
+        codeValue !== null &&
+        codeValue.canUpdate;
+    const onReset = (0, react_1.useCallback)(() => {
+        if (!canPerformReset ||
+            previewServerState.type !== 'connected' ||
+            codeValue === null ||
+            !isNonDefault) {
+            return;
+        }
+        const defaultValue = field.fieldSchema.default !== undefined
+            ? JSON.stringify(field.fieldSchema.default)
+            : null;
+        (0, save_sequence_prop_1.saveSequenceProp)({
+            fileName: validatedLocation.source,
+            nodePath,
+            fieldKey: field.key,
+            value: field.fieldSchema.default,
+            defaultValue,
+            schema,
+            setCodeValues,
+            clientId: previewServerState.clientId,
+        });
+    }, [
+        canPerformReset,
+        field.fieldSchema.default,
+        field.key,
+        isNonDefault,
+        nodePath,
+        previewServerState,
+        schema,
+        setCodeValues,
+        validatedLocation.source,
+        codeValue,
+    ]);
+    const contextMenuValues = (0, react_1.useMemo)(() => {
+        return [
+            {
+                type: 'item',
+                id: 'reset-sequence-field',
+                keyHint: null,
+                label: 'Reset',
+                leftItem: null,
+                disabled: !canPerformReset,
+                onClick: onReset,
+                quickSwitcherLabel: null,
+                subMenu: null,
+                value: 'reset-sequence-field',
+            },
+        ];
+    }, [canPerformReset, onReset]);
+    if (codeValue === null) {
+        return null;
+    }
+    const row = (jsx_runtime_1.jsxs(TimelineRowChrome_1.TimelineRowChrome, { depth: rowDepth, eye: jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEyeSpacer, {}), keyframeControls: keyframeControls, arrow: jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowSpacer, {}), style: style, selected: selection.selected, selectable: selection.selectable, onSelect: selection.onSelect, showSelectedBackground: true, containsSelection: false, outerHeight: null, children: [
+            jsx_runtime_1.jsx(TimelineFieldLabel_1.TimelineFieldLabel, { rowDepth: rowDepth, selected: selection.selected, label: (_b = field.description) !== null && _b !== void 0 ? _b : field.key }), codeValue.canUpdate ? (jsx_runtime_1.jsx("div", { style: timeline_field_row_layout_1.timelineFieldValueColumnStyle, children: jsx_runtime_1.jsx(Value, { field: field, nodePath: nodePath, validatedLocation: validatedLocation, schema: schema, codeValue: codeValue }) })) : codeValue.reason === 'keyframed' ? (jsx_runtime_1.jsx("div", { style: timeline_field_row_layout_1.timelineFieldValueColumnStyle, children: jsx_runtime_1.jsx(TimelineKeyframedValue_1.TimelineKeyframedValue, { field: field, propStatus: codeValue, keyframeDisplayOffset: keyframeDisplayOffset }) })) : (jsx_runtime_1.jsx("div", { style: timeline_field_row_layout_1.timelineFieldValueColumnStyle, children: jsx_runtime_1.jsx(TimelineSchemaField_1.TimelineNonEditableStatus, { propStatus: codeValue }) }))] }));
+    return (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { values: contextMenuValues, onOpen: selection.selectable ? selection.onSelect : null, children: row }));
+};
+exports.TimelineSequencePropItem = TimelineSequencePropItem;

package/dist/components/Timeline/TimelineTimeIndicators.js

@@ -14,7 +14,6 @@ const TimelineWidthProvider_1 = require("./TimelineWidthProvider");
 exports.TIMELINE_TIME_INDICATOR_HEIGHT = 39;
 const container = {
     height: exports.TIMELINE_TIME_INDICATOR_HEIGHT,
-    boxShadow: `0 0 4px ${colors_1.TIMELINE_BACKGROUND}`,
     position: 'absolute',
     backgroundColor: colors_1.TIMELINE_BACKGROUND,
     top: 0,

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

@@ -0,0 +1,5 @@
+import React from 'react';
+import type { TrackWithHash } from '../../helpers/get-timeline-sequence-sort-key';
+export declare const TimelineTrack: React.NamedExoticComponent<{
+    readonly track: TrackWithHash;
+}>;

package/dist/components/Timeline/TimelineTrack.js

@@ -0,0 +1,66 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TimelineTrack = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importStar(require("react"));
+const client_id_1 = require("../../helpers/client-id");
+const timeline_layout_1 = require("../../helpers/timeline-layout");
+const ExpandedTracksProvider_1 = require("../ExpandedTracksProvider");
+const TimelineExpandedTrackKeyframes_1 = require("./TimelineExpandedTrackKeyframes");
+const TimelineSelection_1 = require("./TimelineSelection");
+const TimelineSequence_1 = require("./TimelineSequence");
+const TimelineWidthProvider_1 = require("./TimelineWidthProvider");
+const TimelineTrackUnmemoized = ({ track }) => {
+    const { getIsExpanded } = (0, react_1.useContext)(ExpandedTracksProvider_1.ExpandedTracksGetterContext);
+    const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
+    const previewServerConnected = previewServerState.type === 'connected';
+    const timelineWidth = (0, react_1.useContext)(TimelineWidthProvider_1.TimelineWidthContext);
+    const { selected: rowSelected } = (0, TimelineSelection_1.useTimelineRowSelection)(track.nodePathInfo);
+    const containsSelection = (0, TimelineSelection_1.useTimelineRowContainsSelection)(track.nodePathInfo);
+    const layerStyle = (0, react_1.useMemo)(() => ({
+        height: (0, timeline_layout_1.getTimelineLayerHeight)(track.sequence.type),
+        marginBottom: timeline_layout_1.TIMELINE_ITEM_BORDER_BOTTOM,
+        position: 'relative',
+    }), [track.sequence.type]);
+    const showExpandedKeyframes = track.nodePathInfo !== null &&
+        previewServerConnected &&
+        getIsExpanded(track.nodePathInfo);
+    const showRowHighlight = track.nodePathInfo !== null && (rowSelected || containsSelection);
+    return (jsx_runtime_1.jsxs("div", { children: [
+            jsx_runtime_1.jsxs("div", { style: layerStyle, children: [showRowHighlight && timelineWidth !== null ? (jsx_runtime_1.jsx("div", { style: (0, TimelineSelection_1.getTimelineSelectedTrackHighlightStyle)(timelineWidth) })) : null, jsx_runtime_1.jsx(TimelineSequence_1.TimelineSequence, { s: track.sequence, nodePathInfo: track.nodePathInfo })
+                ] }), showExpandedKeyframes && track.nodePathInfo ? (jsx_runtime_1.jsx(TimelineExpandedTrackKeyframes_1.TimelineExpandedTrackKeyframes, { sequence: track.sequence, nodePathInfo: track.nodePathInfo, keyframeDisplayOffset: track.keyframeDisplayOffset })) : null] }));
+};
+exports.TimelineTrack = react_1.default.memo(TimelineTrackUnmemoized);

package/dist/components/Timeline/TimelineTracks.js

@@ -36,25 +36,18 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TimelineTracks = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
-const client_id_1 = require("../../helpers/client-id");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
-const ExpandedTracksProvider_1 = require("../ExpandedTracksProvider");
 const MaxTimelineTracks_1 = require("./MaxTimelineTracks");
-const TimelineExpandedTrackKeyframes_1 = require("./TimelineExpandedTrackKeyframes");
-const TimelineSequence_1 = require("./TimelineSequence");
 const TimelineTimeIndicators_1 = require("./TimelineTimeIndicators");
+const TimelineTrack_1 = require("./TimelineTrack");
 const content = {
     paddingLeft: timeline_layout_1.TIMELINE_PADDING,
     paddingRight: timeline_layout_1.TIMELINE_PADDING,
-    paddingTop: 1,
 };
 const timelineContent = {
     minHeight: '100%',
 };
 const TimelineTracksInner = ({ timeline, hasBeenCut }) => {
-    const { getIsExpanded } = (0, react_1.useContext)(ExpandedTracksProvider_1.ExpandedTracksGetterContext);
-    const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
-    const previewServerConnected = previewServerState.type === 'connected';
     const timelineStyle = (0, react_1.useMemo)(() => {
         return {
             ...timelineContent,
@@ -63,13 +56,6 @@ const TimelineTracksInner = ({ timeline, hasBeenCut }) => {
     }, []);
     return (jsx_runtime_1.jsxs("div", { style: timelineStyle, children: [
             jsx_runtime_1.jsxs("div", { style: content, children: [
-                    jsx_runtime_1.jsx(TimelineTimeIndicators_1.TimelineTimePadding, {}), timeline.map((track) => {
-                        const isExpanded = track.nodePathInfo !== null && getIsExpanded(track.nodePathInfo);
-                        return (jsx_runtime_1.jsxs("div", { children: [
-                                jsx_runtime_1.jsx("div", { style: {
-                                        height: (0, timeline_layout_1.getTimelineLayerHeight)(track.sequence.type),
-                                        marginBottom: timeline_layout_1.TIMELINE_ITEM_BORDER_BOTTOM,
-                                    }, children: jsx_runtime_1.jsx(TimelineSequence_1.TimelineSequence, { s: track.sequence }) }), isExpanded && track.nodePathInfo && previewServerConnected ? (jsx_runtime_1.jsx(TimelineExpandedTrackKeyframes_1.TimelineExpandedTrackKeyframes, { sequence: track.sequence, nodePathInfo: track.nodePathInfo, keyframeDisplayOffset: track.keyframeDisplayOffset })) : null] }, track.sequence.id));
-                    })] }), hasBeenCut ? jsx_runtime_1.jsx(MaxTimelineTracks_1.MaxTimelineTracksReached, {}) : null] }));
+                    jsx_runtime_1.jsx(TimelineTimeIndicators_1.TimelineTimePadding, {}), timeline.map((track) => (jsx_runtime_1.jsx(TimelineTrack_1.TimelineTrack, { track: track }, track.sequence.id)))] }), hasBeenCut ? jsx_runtime_1.jsx(MaxTimelineTracks_1.MaxTimelineTracksReached, {}) : null] }));
 };
 exports.TimelineTracks = react_1.default.memo(TimelineTracksInner);

package/dist/components/Timeline/TimelineTranslateField.js

@@ -5,20 +5,13 @@ 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 timeline_translate_utils_1 = require("./timeline-translate-utils");
 const leftDraggerStyle = {
     paddingLeft: 0,
 };
 const rightDraggerStyle = {
     paddingRight: 0,
 };
-const PIXEL_PATTERN = /^(-?\d+(?:\.\d+)?)px(?:\s+(-?\d+(?:\.\d+)?)px)?$/;
-const parseTranslate = (value) => {
-    const m = value.match(PIXEL_PATTERN);
-    if (!m) {
-        return [0, 0];
-    }
-    return [Number(m[1]), m[2] !== undefined ? Number(m[2]) : 0];
-};
 const containerStyle = {
     display: 'flex',
     gap: 4,
@@ -27,8 +20,7 @@ const TimelineTranslateField = ({ field, propStatus, effectiveValue, onSave, onD
     var _a;
     const [dragX, setDragX] = (0, react_1.useState)(null);
     const [dragY, setDragY] = (0, react_1.useState)(null);
-    const [codeX, codeY] = (0, react_1.useMemo)(() => parseTranslate(String(effectiveValue !== null && effectiveValue !== void 0 ? effectiveValue : '0px 0px')), [effectiveValue]);
-    const makeString = (0, react_1.useCallback)((x, y) => `${x}px ${y}px`, []);
+    const [codeX, codeY] = (0, react_1.useMemo)(() => (0, timeline_translate_utils_1.parseTranslate)(String(effectiveValue !== null && effectiveValue !== void 0 ? effectiveValue : '0px 0px')), [effectiveValue]);
     const step = field.fieldSchema.type === 'translate' ? ((_a = field.fieldSchema.step) !== null && _a !== void 0 ? _a : 1) : 1;
     const stepDecimals = (0, react_1.useMemo)(() => (0, timeline_field_utils_1.getDecimalPlaces)(step), [step]);
     const formatter = (0, react_1.useCallback)((v) => {
@@ -41,11 +33,11 @@ const TimelineTranslateField = ({ field, propStatus, effectiveValue, onSave, onD
     const onXChange = (0, react_1.useCallback)((newVal) => {
         setDragX(newVal);
         const currentY = dragY !== null && dragY !== void 0 ? dragY : codeY;
-        onDragValueChange(makeString(newVal, currentY));
-    }, [onDragValueChange, dragY, codeY, makeString]);
+        onDragValueChange((0, timeline_translate_utils_1.serializeTranslate)(newVal, currentY));
+    }, [onDragValueChange, dragY, codeY]);
     const onXChangeEnd = (0, react_1.useCallback)((newVal) => {
         const currentY = dragY !== null && dragY !== void 0 ? dragY : codeY;
-        const newStr = makeString(newVal, currentY);
+        const newStr = (0, timeline_translate_utils_1.serializeTranslate)(newVal, currentY);
         if (propStatus.canUpdate && newStr !== propStatus.codeValue) {
             onSave(newStr).finally(() => {
                 setDragX(null);
@@ -56,13 +48,13 @@ const TimelineTranslateField = ({ field, propStatus, effectiveValue, onSave, onD
             setDragX(null);
             onDragEnd();
         }
-    }, [dragY, codeY, makeString, propStatus, onSave, onDragEnd]);
+    }, [dragY, codeY, propStatus, onSave, onDragEnd]);
     const onXTextChange = (0, react_1.useCallback)((newVal) => {
         if (propStatus.canUpdate) {
             const parsed = Number(newVal);
             if (!Number.isNaN(parsed)) {
                 const currentY = dragY !== null && dragY !== void 0 ? dragY : codeY;
-                const newStr = makeString(parsed, currentY);
+                const newStr = (0, timeline_translate_utils_1.serializeTranslate)(parsed, currentY);
                 if (newStr !== propStatus.codeValue) {
                     setDragX(parsed);
                     onSave(newStr).finally(() => {
@@ -71,16 +63,16 @@ const TimelineTranslateField = ({ field, propStatus, effectiveValue, onSave, onD
                 }
             }
         }
-    }, [propStatus, dragY, codeY, makeString, onSave]);
+    }, [propStatus, dragY, codeY, onSave]);
     // --- Y callbacks ---
     const onYChange = (0, react_1.useCallback)((newVal) => {
         setDragY(newVal);
         const currentX = dragX !== null && dragX !== void 0 ? dragX : codeX;
-        onDragValueChange(makeString(currentX, newVal));
-    }, [onDragValueChange, dragX, codeX, makeString]);
+        onDragValueChange((0, timeline_translate_utils_1.serializeTranslate)(currentX, newVal));
+    }, [onDragValueChange, dragX, codeX]);
     const onYChangeEnd = (0, react_1.useCallback)((newVal) => {
         const currentX = dragX !== null && dragX !== void 0 ? dragX : codeX;
-        const newStr = makeString(currentX, newVal);
+        const newStr = (0, timeline_translate_utils_1.serializeTranslate)(currentX, newVal);
         if (propStatus.canUpdate && newStr !== propStatus.codeValue) {
             onSave(newStr).finally(() => {
                 setDragY(null);
@@ -91,13 +83,13 @@ const TimelineTranslateField = ({ field, propStatus, effectiveValue, onSave, onD
             setDragY(null);
             onDragEnd();
         }
-    }, [dragX, codeX, makeString, propStatus, onSave, onDragEnd]);
+    }, [dragX, codeX, propStatus, onSave, onDragEnd]);
     const onYTextChange = (0, react_1.useCallback)((newVal) => {
         if (propStatus.canUpdate) {
             const parsed = Number(newVal);
             if (!Number.isNaN(parsed)) {
                 const currentX = dragX !== null && dragX !== void 0 ? dragX : codeX;
-                const newStr = makeString(currentX, parsed);
+                const newStr = (0, timeline_translate_utils_1.serializeTranslate)(currentX, parsed);
                 if (newStr !== propStatus.codeValue) {
                     setDragY(parsed);
                     onSave(newStr).finally(() => {
@@ -106,7 +98,7 @@ const TimelineTranslateField = ({ field, propStatus, effectiveValue, onSave, onD
                 }
             }
         }
-    }, [propStatus, onSave, dragX, codeX, makeString]);
+    }, [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: -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 })
         ] }));

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

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

package/dist/components/Timeline/TimelineUvCoordinateField.js

@@ -0,0 +1,126 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TimelineUvCoordinateField = 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 leftDraggerStyle = {
+    paddingLeft: 0,
+};
+const rightDraggerStyle = {
+    paddingRight: 0,
+};
+const containerStyle = {
+    display: 'flex',
+    gap: 4,
+};
+const parseUvCoordinate = (value) => {
+    if (Array.isArray(value) &&
+        value.length === 2 &&
+        value.every((item) => typeof item === 'number' && Number.isFinite(item))) {
+        return [value[0], value[1]];
+    }
+    return [0, 0];
+};
+const tuplesEqual = (left, right) => {
+    if (!Array.isArray(left) || left.length !== 2) {
+        return false;
+    }
+    return left[0] === right[0] && left[1] === right[1];
+};
+const TimelineUvCoordinateField = ({ field, propStatus, effectiveValue, onSave, onDragValueChange, onDragEnd, }) => {
+    var _a, _b, _c;
+    const [dragX, setDragX] = (0, react_1.useState)(null);
+    const [dragY, setDragY] = (0, react_1.useState)(null);
+    const [codeX, codeY] = (0, react_1.useMemo)(() => parseUvCoordinate(effectiveValue), [effectiveValue]);
+    const step = field.fieldSchema.type === 'uv-coordinate'
+        ? ((_a = field.fieldSchema.step) !== null && _a !== void 0 ? _a : 0.01)
+        : 0.01;
+    const min = field.fieldSchema.type === 'uv-coordinate'
+        ? ((_b = field.fieldSchema.min) !== null && _b !== void 0 ? _b : -Infinity)
+        : -Infinity;
+    const max = field.fieldSchema.type === 'uv-coordinate'
+        ? ((_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 onXChange = (0, react_1.useCallback)((newVal) => {
+        setDragX(newVal);
+        const currentY = dragY !== null && dragY !== void 0 ? dragY : codeY;
+        onDragValueChange([newVal, currentY]);
+    }, [onDragValueChange, dragY, codeY]);
+    const onXChangeEnd = (0, react_1.useCallback)((newVal) => {
+        const currentY = dragY !== null && dragY !== void 0 ? dragY : codeY;
+        const newTuple = [newVal, currentY];
+        if (propStatus.canUpdate &&
+            !tuplesEqual(propStatus.codeValue, newTuple)) {
+            onSave(newTuple).finally(() => {
+                setDragX(null);
+                onDragEnd();
+            });
+        }
+        else {
+            setDragX(null);
+            onDragEnd();
+        }
+    }, [dragY, codeY, propStatus, onSave, onDragEnd]);
+    const onXTextChange = (0, react_1.useCallback)((newVal) => {
+        if (propStatus.canUpdate) {
+            const parsed = Number(newVal);
+            if (!Number.isNaN(parsed)) {
+                const currentY = dragY !== null && dragY !== void 0 ? dragY : codeY;
+                const newTuple = [parsed, currentY];
+                if (!tuplesEqual(propStatus.codeValue, newTuple)) {
+                    setDragX(parsed);
+                    onSave(newTuple).finally(() => {
+                        setDragX(null);
+                    });
+                }
+            }
+        }
+    }, [propStatus, dragY, codeY, onSave]);
+    const onYChange = (0, react_1.useCallback)((newVal) => {
+        setDragY(newVal);
+        const currentX = dragX !== null && dragX !== void 0 ? dragX : codeX;
+        onDragValueChange([currentX, newVal]);
+    }, [onDragValueChange, dragX, codeX]);
+    const onYChangeEnd = (0, react_1.useCallback)((newVal) => {
+        const currentX = dragX !== null && dragX !== void 0 ? dragX : codeX;
+        const newTuple = [currentX, newVal];
+        if (propStatus.canUpdate &&
+            !tuplesEqual(propStatus.codeValue, newTuple)) {
+            onSave(newTuple).finally(() => {
+                setDragY(null);
+                onDragEnd();
+            });
+        }
+        else {
+            setDragY(null);
+            onDragEnd();
+        }
+    }, [dragX, codeX, propStatus, onSave, onDragEnd]);
+    const onYTextChange = (0, react_1.useCallback)((newVal) => {
+        if (propStatus.canUpdate) {
+            const parsed = Number(newVal);
+            if (!Number.isNaN(parsed)) {
+                const currentX = dragX !== null && dragX !== void 0 ? dragX : codeX;
+                const newTuple = [currentX, parsed];
+                if (!tuplesEqual(propStatus.codeValue, newTuple)) {
+                    setDragY(parsed);
+                    onSave(newTuple).finally(() => {
+                        setDragY(null);
+                    });
+                }
+            }
+        }
+    }, [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 }), 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 })
+        ] }));
+};
+exports.TimelineUvCoordinateField = TimelineUvCoordinateField;

package/dist/components/Timeline/TimelineVideoInfo.js

@@ -8,7 +8,6 @@ const remotion_1 = require("remotion");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
 const AudioWaveform_1 = require("../AudioWaveform");
 const get_timeline_video_info_widths_1 = require("./get-timeline-video-info-widths");
-const FILMSTRIP_HEIGHT = 48;
 const outerStyle = {
     width: '100%',
     height: '100%',
@@ -16,7 +15,7 @@ const outerStyle = {
     flexDirection: 'column',
 };
 const filmstripContainerStyle = {
-    height: FILMSTRIP_HEIGHT,
+    height: timeline_layout_1.TIMELINE_LAYER_FILMSTRIP_HEIGHT,
     backgroundColor: 'rgba(0, 0, 0, 0.3)',
     display: 'flex',
     borderTopLeftRadius: 2,
@@ -48,7 +47,7 @@ const TimelineVideoInfo = ({ src, visualizationWidth, naturalWidth, trimBefore,
         const controller = new AbortController();
         const canvas = document.createElement('canvas');
         canvas.width = mediaVisualizationWidth;
-        canvas.height = FILMSTRIP_HEIGHT;
+        canvas.height = timeline_layout_1.TIMELINE_LAYER_FILMSTRIP_HEIGHT;
         const ctx = canvas.getContext('2d');
         if (!ctx) {
             return;
@@ -103,7 +102,7 @@ const TimelineVideoInfo = ({ src, visualizationWidth, naturalWidth, trimBefore,
                 fromSeconds,
                 toSeconds,
                 aspectRatio: aspectRatio.current,
-                frameHeight: FILMSTRIP_HEIGHT,
+                frameHeight: timeline_layout_1.TIMELINE_LAYER_FILMSTRIP_HEIGHT,
             });
             (0, timeline_utils_1.fillWithCachedFrames)({
                 ctx: targetCtx,
@@ -113,7 +112,7 @@ const TimelineVideoInfo = ({ src, visualizationWidth, naturalWidth, trimBefore,
                 segmentDuration: toSeconds - fromSeconds,
                 fromSeconds,
                 devicePixelRatio: window.devicePixelRatio,
-                frameHeight: FILMSTRIP_HEIGHT,
+                frameHeight: timeline_layout_1.TIMELINE_LAYER_FILMSTRIP_HEIGHT,
             });
             repeatTarget();
             const unfilled = Array.from(filledSlots.keys()).filter((timestamp) => !filledSlots.get(timestamp));
@@ -134,7 +133,7 @@ const TimelineVideoInfo = ({ src, visualizationWidth, naturalWidth, trimBefore,
                     toSeconds,
                     naturalWidth: targetWidth,
                     aspectRatio: aspectRatio.current,
-                    frameHeight: FILMSTRIP_HEIGHT,
+                    frameHeight: timeline_layout_1.TIMELINE_LAYER_FILMSTRIP_HEIGHT,
                 });
                 return Array.from(filledSlots.keys()).map((timestamp) => timestamp / timeline_utils_1.WEBCODECS_TIMESCALE);
             },
@@ -143,7 +142,8 @@ const TimelineVideoInfo = ({ src, visualizationWidth, naturalWidth, trimBefore,
                 let frame;
                 try {
                     frame = sample.toVideoFrame();
-                    const scale = (FILMSTRIP_HEIGHT / frame.displayHeight) * window.devicePixelRatio;
+                    const scale = (timeline_layout_1.TIMELINE_LAYER_FILMSTRIP_HEIGHT / frame.displayHeight) *
+                        window.devicePixelRatio;
                     const transformed = (0, timeline_utils_1.resizeVideoFrame)({
                         frame,
                         scale,
@@ -163,7 +163,7 @@ const TimelineVideoInfo = ({ src, visualizationWidth, naturalWidth, trimBefore,
                         toSeconds,
                         naturalWidth: targetWidth,
                         aspectRatio: aspectRatio.current,
-                        frameHeight: FILMSTRIP_HEIGHT,
+                        frameHeight: timeline_layout_1.TIMELINE_LAYER_FILMSTRIP_HEIGHT,
                     });
                     (0, timeline_utils_1.fillFrameWhereItFits)({
                         ctx: targetCtx,
@@ -173,7 +173,7 @@ const TimelineVideoInfo = ({ src, visualizationWidth, naturalWidth, trimBefore,
                         segmentDuration: toSeconds - fromSeconds,
                         fromSeconds,
                         devicePixelRatio: window.devicePixelRatio,
-                        frameHeight: FILMSTRIP_HEIGHT,
+                        frameHeight: timeline_layout_1.TIMELINE_LAYER_FILMSTRIP_HEIGHT,
                     });
                     repeatTarget();
                 }
@@ -201,7 +201,7 @@ const TimelineVideoInfo = ({ src, visualizationWidth, naturalWidth, trimBefore,
                 segmentDuration: toSeconds - fromSeconds,
                 fromSeconds,
                 devicePixelRatio: window.devicePixelRatio,
-                frameHeight: FILMSTRIP_HEIGHT,
+                frameHeight: timeline_layout_1.TIMELINE_LAYER_FILMSTRIP_HEIGHT,
             });
             repeatTarget();
         })
@@ -233,14 +233,13 @@ const TimelineVideoInfo = ({ src, visualizationWidth, naturalWidth, trimBefore,
     }, [mediaVisualizationWidth, premountWidth]);
     const audioStyle = (0, react_1.useMemo)(() => {
         return {
-            height: timeline_layout_1.TIMELINE_VIDEO_INFO_WAVEFORM_HEIGHT,
             width: audioWidth,
             position: 'relative',
             marginLeft: premountWidth,
         };
     }, [audioWidth, premountWidth]);
     return (jsx_runtime_1.jsxs("div", { style: outerStyle, children: [
-            jsx_runtime_1.jsx("div", { ref: ref, style: filmstripStyle }), jsx_runtime_1.jsx("div", { style: audioStyle, children: jsx_runtime_1.jsx(AudioWaveform_1.AudioWaveform, { src: src, visualizationWidth: audioWidth, startFrom: trimBefore, durationInFrames: durationInFrames, volume: volume, doesVolumeChange: doesVolumeChange, playbackRate: playbackRate, loopDisplay: loopDisplay }) })
+            jsx_runtime_1.jsx("div", { ref: ref, style: filmstripStyle }), jsx_runtime_1.jsx("div", { style: audioStyle, children: jsx_runtime_1.jsx(AudioWaveform_1.AudioWaveform, { src: src, height: timeline_layout_1.TIMELINE_VIDEO_INFO_WAVEFORM_HEIGHT, visualizationWidth: audioWidth, startFrom: trimBefore, durationInFrames: durationInFrames, volume: volume, doesVolumeChange: doesVolumeChange, playbackRate: playbackRate, loopDisplay: loopDisplay }) })
         ] }));
 };
 exports.TimelineVideoInfo = TimelineVideoInfo;