@remotion/studio 4.0.468 → 4.0.469

package/dist/components/Timeline/TimelineSelection.js

@@ -0,0 +1,160 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useTimelineRowContainsSelection = exports.useTimelineKeyframeSelection = exports.useTimelineRowSelection = exports.useTimelineSelection = exports.TimelineSelectionProvider = exports.SELECTION_ENABLED = exports.TIMELINE_SELECTED_TRACK_HIGHLIGHT_STYLE = exports.getTimelineColor = exports.getTimelineSelectedLabelStyle = exports.TIMELINE_SELECTED_LABEL_HORIZONTAL_PADDING = exports.TIMELINE_SELECTED_LABEL_TEXT = exports.TIMELINE_SELECTED_LABEL_BACKGROUND = exports.TIMELINE_SELECTED_BACKGROUND = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const studio_shared_1 = require("@remotion/studio-shared");
+const react_1 = require("react");
+const client_id_1 = require("../../helpers/client-id");
+const timeline_layout_1 = require("../../helpers/timeline-layout");
+const timeline_node_path_key_1 = require("../../helpers/timeline-node-path-key");
+exports.TIMELINE_SELECTED_BACKGROUND = '#3B3F42';
+exports.TIMELINE_SELECTED_LABEL_BACKGROUND = '#B0B0B0';
+exports.TIMELINE_SELECTED_LABEL_TEXT = 'black';
+exports.TIMELINE_SELECTED_LABEL_HORIZONTAL_PADDING = 2;
+const getTimelineSelectedLabelStyle = (selected, subcategory) => {
+    return {
+        paddingLeft: exports.TIMELINE_SELECTED_LABEL_HORIZONTAL_PADDING,
+        paddingRight: exports.TIMELINE_SELECTED_LABEL_HORIZONTAL_PADDING,
+        ...(selected
+            ? {
+                backgroundColor: subcategory
+                    ? 'rgba(255, 255, 255, 0.1)'
+                    : exports.TIMELINE_SELECTED_LABEL_BACKGROUND,
+            }
+            : {}),
+    };
+};
+exports.getTimelineSelectedLabelStyle = getTimelineSelectedLabelStyle;
+const getTimelineColor = (selected, subcategory) => {
+    return selected && !subcategory
+        ? exports.TIMELINE_SELECTED_LABEL_TEXT
+        : 'rgba(255, 255, 255, 0.8)';
+};
+exports.getTimelineColor = getTimelineColor;
+exports.TIMELINE_SELECTED_TRACK_HIGHLIGHT_STYLE = {
+    backgroundColor: exports.TIMELINE_SELECTED_BACKGROUND,
+    bottom: 0,
+    left: -timeline_layout_1.TIMELINE_PADDING,
+    pointerEvents: 'none',
+    position: 'absolute',
+    right: -timeline_layout_1.TIMELINE_PADDING,
+    top: 0,
+};
+exports.SELECTION_ENABLED = false;
+const TimelineSelectionContext = (0, react_1.createContext)({
+    canSelect: false,
+    isSelected: () => false,
+    selectItem: () => undefined,
+    containsSelection: () => false,
+    clearSelection: () => undefined,
+});
+const getTimelineSelectionKey = (item) => {
+    const rowKey = (0, timeline_node_path_key_1.timelineNodePathInfoToKey)(item.nodePathInfo);
+    if (item.type === 'row') {
+        return rowKey;
+    }
+    return `${rowKey}.keyframe.${item.frame}`;
+};
+const TimelineSelectionProvider = ({ children }) => {
+    const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
+    const canSelect = exports.SELECTION_ENABLED &&
+        previewServerState.type === 'connected' &&
+        !window.remotion_isReadOnlyStudio;
+    const [selectedItem, setSelectedItem] = (0, react_1.useState)(null);
+    (0, react_1.useEffect)(() => {
+        if (!canSelect) {
+            setSelectedItem(null);
+        }
+    }, [canSelect]);
+    const isSelected = (0, react_1.useCallback)((item) => {
+        return selectedItem === null
+            ? false
+            : getTimelineSelectionKey(selectedItem) ===
+                getTimelineSelectionKey(item);
+    }, [selectedItem]);
+    const selectItem = (0, react_1.useCallback)((item) => {
+        if (!canSelect) {
+            return;
+        }
+        setSelectedItem(item);
+    }, [canSelect]);
+    const clearSelection = (0, react_1.useCallback)(() => {
+        setSelectedItem(null);
+    }, []);
+    const containsSelection = (0, react_1.useCallback)((nodePathInfo) => {
+        if (selectedItem === null) {
+            return false;
+        }
+        const selectedNodePath = selectedItem.nodePathInfo;
+        if ((0, studio_shared_1.stringifySequenceExpandedRowKey)(selectedNodePath.sequenceSubscriptionKey) !==
+            (0, studio_shared_1.stringifySequenceExpandedRowKey)(nodePathInfo.sequenceSubscriptionKey)) {
+            return false;
+        }
+        if (selectedNodePath.index !== nodePathInfo.index) {
+            return false;
+        }
+        // Selection must be strictly deeper than this node (i.e. a descendant),
+        // not the same row.
+        if (selectedNodePath.auxiliaryKeys.length <=
+            nodePathInfo.auxiliaryKeys.length) {
+            return false;
+        }
+        return nodePathInfo.auxiliaryKeys.every((key, i) => selectedNodePath.auxiliaryKeys[i] === key);
+    }, [selectedItem]);
+    const value = (0, react_1.useMemo)(() => ({
+        canSelect,
+        isSelected,
+        selectItem,
+        containsSelection,
+        clearSelection,
+    }), [canSelect, isSelected, selectItem, containsSelection, clearSelection]);
+    return (jsx_runtime_1.jsx(TimelineSelectionContext.Provider, { value: value, children: children }));
+};
+exports.TimelineSelectionProvider = TimelineSelectionProvider;
+const useTimelineSelection = () => {
+    return (0, react_1.useContext)(TimelineSelectionContext);
+};
+exports.useTimelineSelection = useTimelineSelection;
+const useTimelineRowSelection = (nodePathInfo) => {
+    const { canSelect, isSelected, selectItem } = (0, exports.useTimelineSelection)();
+    const selectionItem = (0, react_1.useMemo)(() => nodePathInfo === null ? null : { type: 'row', nodePathInfo }, [nodePathInfo]);
+    const selected = selectionItem === null ? false : isSelected(selectionItem);
+    const onSelect = (0, react_1.useCallback)(() => {
+        if (selectionItem === null) {
+            return;
+        }
+        selectItem(selectionItem);
+    }, [selectItem, selectionItem]);
+    return {
+        onSelect,
+        selectable: canSelect && selectionItem !== null,
+        selected,
+    };
+};
+exports.useTimelineRowSelection = useTimelineRowSelection;
+const useTimelineKeyframeSelection = (nodePathInfo, frame) => {
+    const { canSelect, isSelected, selectItem } = (0, exports.useTimelineSelection)();
+    const selectionItem = (0, react_1.useMemo)(() => ({
+        type: 'keyframe',
+        nodePathInfo,
+        frame,
+    }), [nodePathInfo, frame]);
+    const selected = isSelected(selectionItem);
+    const onSelect = (0, react_1.useCallback)(() => {
+        selectItem(selectionItem);
+    }, [selectItem, selectionItem]);
+    return {
+        onSelect,
+        selectable: canSelect,
+        selected,
+    };
+};
+exports.useTimelineKeyframeSelection = useTimelineKeyframeSelection;
+const useTimelineRowContainsSelection = (nodePathInfo) => {
+    const { containsSelection } = (0, exports.useTimelineSelection)();
+    if (nodePathInfo === null) {
+        return false;
+    }
+    return containsSelection(nodePathInfo);
+};
+exports.useTimelineRowContainsSelection = useTimelineRowContainsSelection;

package/dist/components/Timeline/TimelineSequence.js

@@ -165,6 +165,6 @@ const TimelineSequenceInner = ({ s, windowWidth }) => {
     if (maxMediaDuration === null && !s.loopDisplay) {
         return null;
     }
-    return (jsx_runtime_1.jsxs(TimelineSequenceCurrentFrame, { s: s, displayDurationInFrames: displayDurationInFrames, premountWidth: premountWidth, postmountWidth: postmountWidth, style: style, children: [s.type === 'audio' ? (jsx_runtime_1.jsx(AudioWaveform_1.AudioWaveform, { src: s.src, doesVolumeChange: s.doesVolumeChange, visualizationWidth: width, startFrom: s.startMediaFrom, durationInFrames: s.duration, volume: s.volume, playbackRate: s.playbackRate, loopDisplay: s.loopDisplay })) : null, s.type === 'video' ? (jsx_runtime_1.jsx(TimelineVideoInfo_1.TimelineVideoInfo, { src: s.src, visualizationWidth: width, naturalWidth: naturalWidth, trimBefore: s.startMediaFrom, durationInFrames: s.duration, playbackRate: s.playbackRate, volume: s.volume, doesVolumeChange: s.doesVolumeChange, premountWidth: premountWidth !== null && premountWidth !== void 0 ? premountWidth : 0, postmountWidth: postmountWidth !== null && postmountWidth !== void 0 ? postmountWidth : 0, loopDisplay: s.loopDisplay })) : null, s.type === 'image' ? (jsx_runtime_1.jsx(TimelineImageInfo_1.TimelineImageInfo, { src: s.src, visualizationWidth: width })) : null, s.loopDisplay === undefined ? null : (jsx_runtime_1.jsx(LoopedTimelineIndicators_1.LoopedTimelineIndicator, { loops: s.loopDisplay.numberOfTimes }))] }));
+    return (jsx_runtime_1.jsxs(TimelineSequenceCurrentFrame, { s: s, displayDurationInFrames: displayDurationInFrames, premountWidth: premountWidth, postmountWidth: postmountWidth, style: style, children: [s.type === 'audio' ? (jsx_runtime_1.jsx(AudioWaveform_1.AudioWaveform, { src: s.src, height: timeline_layout_1.TIMELINE_LAYER_HEIGHT_AUDIO, doesVolumeChange: s.doesVolumeChange, visualizationWidth: width, startFrom: s.startMediaFrom, durationInFrames: s.duration, volume: s.volume, playbackRate: s.playbackRate, loopDisplay: s.loopDisplay })) : null, s.type === 'video' ? (jsx_runtime_1.jsx(TimelineVideoInfo_1.TimelineVideoInfo, { src: s.src, visualizationWidth: width, naturalWidth: naturalWidth, trimBefore: s.startMediaFrom, durationInFrames: s.duration, playbackRate: s.playbackRate, volume: s.volume, doesVolumeChange: s.doesVolumeChange, premountWidth: premountWidth !== null && premountWidth !== void 0 ? premountWidth : 0, postmountWidth: postmountWidth !== null && postmountWidth !== void 0 ? postmountWidth : 0, loopDisplay: s.loopDisplay })) : null, s.type === 'image' ? (jsx_runtime_1.jsx(TimelineImageInfo_1.TimelineImageInfo, { src: s.src, visualizationWidth: width })) : null, s.loopDisplay === undefined ? null : (jsx_runtime_1.jsx(LoopedTimelineIndicators_1.LoopedTimelineIndicator, { loops: s.loopDisplay.numberOfTimes }))] }));
 };
 exports.TimelineSequence = react_1.default.memo(TimelineSequenceFn);

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

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { TSequence } from 'remotion';
+export declare const TimelineSequenceName: React.FC<{
+    readonly sequence: TSequence;
+    readonly selected: boolean;
+    readonly containsSelection: boolean;
+}>;

package/dist/components/Timeline/TimelineSequenceName.js

@@ -0,0 +1,50 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TimelineSequenceName = void 0;
+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 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 style = (0, react_1.useMemo)(() => {
+        const hoverEffect = hovered && hoverable;
+        return {
+            alignItems: 'center',
+            alignSelf: 'stretch',
+            ...(0, TimelineSelection_1.getTimelineSelectedLabelStyle)(selected, false),
+            display: 'inline-flex',
+            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,
+            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 }));
+};
+exports.TimelineSequenceName = TimelineSequenceName;

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,64 @@
+"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 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 { 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 ? (jsx_runtime_1.jsx("div", { style: TimelineSelection_1.TIMELINE_SELECTED_TRACK_HIGHLIGHT_STYLE })) : null, jsx_runtime_1.jsx(TimelineSequence_1.TimelineSequence, { s: track.sequence })
+                ] }), 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/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;

package/dist/components/Timeline/get-node-keyframes.d.ts

@@ -0,0 +1,11 @@
+import { type CodeValues, type SequencePropsSubscriptionKey } from 'remotion';
+import type { TimelineTreeNode } from '../../helpers/timeline-layout';
+export declare const getNodeKeyframes: ({ node, nodePath, codeValues, keyframeDisplayOffset, }: {
+    node: TimelineTreeNode;
+    nodePath: SequencePropsSubscriptionKey;
+    codeValues: CodeValues;
+    keyframeDisplayOffset: number;
+}) => {
+    frame: number;
+    value: unknown;
+}[];

package/dist/components/Timeline/get-node-keyframes.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getNodeKeyframes = void 0;
+const remotion_1 = require("remotion");
+const get_timeline_keyframes_1 = require("./get-timeline-keyframes");
+const getNodeKeyframes = ({ node, nodePath, codeValues, keyframeDisplayOffset, }) => {
+    var _a, _b;
+    if (node.kind !== 'field' || node.field === null) {
+        return [];
+    }
+    if (node.field.kind === 'sequence-field') {
+        return (0, get_timeline_keyframes_1.getTimelineKeyframes)((_a = remotion_1.Internals.getCodeValuesCtx(codeValues, nodePath)) === null || _a === void 0 ? void 0 : _a[node.field.key], keyframeDisplayOffset);
+    }
+    const effectStatus = remotion_1.Internals.getEffectCodeValuesCtx({
+        codeValues,
+        nodePath,
+        effectIndex: node.field.effectIndex,
+    });
+    return (0, get_timeline_keyframes_1.getTimelineKeyframes)(effectStatus.type === 'can-update-effect'
+        ? (_b = effectStatus.props) === null || _b === void 0 ? void 0 : _b[node.field.key]
+        : null, keyframeDisplayOffset);
+};
+exports.getNodeKeyframes = getNodeKeyframes;

package/dist/components/Timeline/get-timeline-keyframes.js

@@ -2,22 +2,20 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getTimelineKeyframes = exports.getComputedStatusLabel = void 0;
 const getComputedStatusLabel = (propStatus) => {
-    var _a;
-    if (propStatus.reason !== 'computed') {
-        throw new Error(`Unsupported prop status: ${propStatus.reason}`);
+    if (propStatus.reason === 'computed') {
+        return 'computed';
     }
-    return ((_a = propStatus.keyframes) === null || _a === void 0 ? void 0 : _a.length) ? 'keyframed' : 'computed';
+    return 'keyframed';
 };
 exports.getComputedStatusLabel = getComputedStatusLabel;
 const getTimelineKeyframes = (propStatus, keyframeDisplayOffset = 0) => {
-    var _a;
     if (!propStatus || propStatus.canUpdate) {
         return [];
     }
-    if (propStatus.reason !== 'computed') {
-        throw new Error(`Unsupported prop status: ${propStatus.reason}`);
+    if (propStatus.reason === 'computed') {
+        return [];
     }
-    const keyframes = (_a = propStatus.keyframes) !== null && _a !== void 0 ? _a : [];
+    const { keyframes } = propStatus;
     if (keyframeDisplayOffset === 0) {
         return keyframes;
     }