@remotion/studio 4.0.472 → 4.0.474

package/dist/components/Timeline/TimelineKeyframeEasingLine.js

@@ -0,0 +1,120 @@
+"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.TimelineKeyframeEasingLine = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importStar(require("react"));
+const remotion_1 = require("remotion");
+const colors_1 = require("../../helpers/colors");
+const get_left_of_timeline_slider_1 = require("../../helpers/get-left-of-timeline-slider");
+const timeline_layout_1 = require("../../helpers/timeline-layout");
+const TimelineSelection_1 = require("./TimelineSelection");
+const TimelineWidthProvider_1 = require("./TimelineWidthProvider");
+const hitTargetHeight = 12;
+const lineHeight = 2;
+const easingLineButton = {
+    background: 'none',
+    border: 'none',
+    height: hitTargetHeight,
+    padding: 0,
+    position: 'absolute',
+    transform: 'translateY(-50%)',
+};
+const easingLine = {
+    backgroundColor: colors_1.LINE_COLOR,
+    borderRadius: lineHeight / 2,
+    height: lineHeight,
+    left: 0,
+    position: 'absolute',
+    right: 0,
+    top: '50%',
+    transform: 'translateY(-50%)',
+};
+const TimelineKeyframeEasingLineUnmemoized = ({ fromFrame, toFrame, rowHeight, nodePathInfo, segmentIndex }) => {
+    const videoConfig = (0, remotion_1.useVideoConfig)();
+    const timelineWidth = (0, react_1.useContext)(TimelineWidthProvider_1.TimelineWidthContext);
+    const { selected, onSelect, selectable } = (0, TimelineSelection_1.useTimelineEasingSelection)({
+        nodePathInfo,
+        fromFrame,
+        toFrame,
+        segmentIndex,
+    });
+    const style = (0, react_1.useMemo)(() => {
+        if (timelineWidth === null) {
+            return null;
+        }
+        const fromLeft = (0, get_left_of_timeline_slider_1.getXPositionOfItemInTimelineImperatively)(fromFrame, videoConfig.durationInFrames, timelineWidth) - timeline_layout_1.TIMELINE_PADDING;
+        const toLeft = (0, get_left_of_timeline_slider_1.getXPositionOfItemInTimelineImperatively)(toFrame, videoConfig.durationInFrames, timelineWidth) - timeline_layout_1.TIMELINE_PADDING;
+        const left = Math.min(fromLeft, toLeft);
+        const width = Math.abs(toLeft - fromLeft);
+        if (width === 0) {
+            return null;
+        }
+        return {
+            ...easingLineButton,
+            left,
+            pointerEvents: selectable ? 'auto' : 'none',
+            top: rowHeight / 2,
+            width,
+        };
+    }, [
+        fromFrame,
+        rowHeight,
+        selectable,
+        timelineWidth,
+        toFrame,
+        videoConfig.durationInFrames,
+    ]);
+    const lineStyle = (0, react_1.useMemo)(() => ({
+        ...easingLine,
+        outline: selected ? `1px solid ${colors_1.BLUE}` : undefined,
+    }), [selected]);
+    const onPointerDown = (0, react_1.useCallback)((event) => {
+        if (!selectable || event.button !== 0) {
+            return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        onSelect({
+            shiftKey: event.shiftKey,
+            toggleKey: event.metaKey || event.ctrlKey,
+        });
+    }, [onSelect, selectable]);
+    if (style === null) {
+        return null;
+    }
+    return (jsx_runtime_1.jsx("button", { type: "button", style: style, title: `Easing from frame ${fromFrame} to ${toFrame}`, "aria-label": `Select easing from frame ${fromFrame} to ${toFrame}`, onPointerDown: selectable ? onPointerDown : undefined, children: jsx_runtime_1.jsx("div", { style: lineStyle }) }));
+};
+exports.TimelineKeyframeEasingLine = react_1.default.memo(TimelineKeyframeEasingLineUnmemoized);

package/dist/components/Timeline/TimelineKeyframedValue.js

@@ -27,7 +27,7 @@ const TimelineKeyframedValue = ({ field, propStatus, keyframeDisplayOffset, drag
     }), [computedValue]);
     const effectiveValue = (0, react_1.useMemo)(() => {
         return remotion_1.Internals.getEffectiveVisualModeValue({
-            codeValue: fakeStatus,
+            propStatus: fakeStatus,
             dragOverrideValue,
             frame: jsxFrame,
             defaultValue: field.fieldSchema.default,

package/dist/components/Timeline/TimelineList.js

@@ -11,8 +11,8 @@ const container = {
 };
 const TimelineList = ({ timeline }) => {
     return (jsx_runtime_1.jsxs("div", { style: container, children: [
-            jsx_runtime_1.jsx(TimelineTimeIndicators_1.TimelineTimePadding, {}), timeline.map((track) => {
-                return (jsx_runtime_1.jsx("div", { children: jsx_runtime_1.jsx(TimelineSequenceItem_1.TimelineSequenceItem, { nestedDepth: track.depth, sequence: track.sequence, nodePathInfo: track.nodePathInfo, keyframeDisplayOffset: track.keyframeDisplayOffset }, track.sequence.id) }, track.sequence.id));
+            jsx_runtime_1.jsx(TimelineTimeIndicators_1.TimelineTimePadding, {}), timeline.map((track, trackIndex) => {
+                return (jsx_runtime_1.jsx("div", { children: jsx_runtime_1.jsx(TimelineSequenceItem_1.TimelineSequenceItem, { trackIndex: trackIndex, nestedDepth: track.depth, sequence: track.sequence, nodePathInfo: track.nodePathInfo, keyframeDisplayOffset: track.keyframeDisplayOffset }, track.sequence.id) }, track.sequence.id));
             })] }));
 };
 exports.TimelineList = TimelineList;

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

@@ -1,17 +1,4 @@
 import React from 'react';
-type LinkInfo = {
-    kind: 'local';
-    assetPath: string;
-    title: string;
-} | {
-    kind: 'remote';
-    href: string;
-    title: string;
-} | null;
-export type TimelineAssetLinkInfo = Exclude<LinkInfo, null>;
-export declare const getTimelineAssetLinkInfo: (src: string) => LinkInfo;
-export declare const openTimelineAssetLink: (linkInfo: TimelineAssetLinkInfo, setCanvasContent: React.Dispatch<React.SetStateAction<import("remotion").CanvasContent | null>>) => void;
 export declare const TimelineMediaInfo: React.FC<{
     readonly src: string;
 }>;
-export {};

package/dist/components/Timeline/TimelineMediaInfo.js

@@ -1,44 +1,12 @@
 "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.TimelineMediaInfo = exports.openTimelineAssetLink = exports.getTimelineAssetLinkInfo = void 0;
+exports.TimelineMediaInfo = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = __importStar(require("react"));
+const react_1 = require("react");
 const remotion_1 = require("remotion");
 const colors_1 = require("../../helpers/colors");
-const url_state_1 = require("../../helpers/url-state");
+const use_select_asset_1 = require("../use-select-asset");
+const timeline_asset_link_1 = require("./timeline-asset-link");
 const TimelineSelection_1 = require("./TimelineSelection");
 const lineStyle = {
     whiteSpace: 'nowrap',
@@ -49,43 +17,10 @@ const lineStyle = {
     color: colors_1.VERY_LIGHT_TEXT,
     display: 'inline-block',
 };
-const getTimelineAssetLinkInfo = (src) => {
-    const staticBase = typeof window === 'undefined' ? null : window.remotion_staticBase;
-    if (staticBase && src.startsWith(staticBase + '/')) {
-        const assetPath = src.slice(staticBase.length + 1);
-        return {
-            kind: 'local',
-            assetPath: decodeURIComponent(assetPath),
-            title: decodeURIComponent(assetPath),
-        };
-    }
-    if (src.startsWith('http://') ||
-        src.startsWith('https://') ||
-        src.startsWith('//')) {
-        try {
-            const url = new URL(src.startsWith('//') ? 'https:' + src : src);
-            return { kind: 'remote', href: src, title: url.hostname };
-        }
-        catch (_a) {
-            return { kind: 'remote', href: src, title: src };
-        }
-    }
-    return null;
-};
-exports.getTimelineAssetLinkInfo = getTimelineAssetLinkInfo;
-const openTimelineAssetLink = (linkInfo, setCanvasContent) => {
-    if (linkInfo.kind === 'local') {
-        setCanvasContent({ type: 'asset', asset: linkInfo.assetPath });
-        (0, url_state_1.pushUrl)(`/assets/${linkInfo.assetPath}`);
-        return;
-    }
-    window.open(linkInfo.href, '_blank', 'noopener,noreferrer');
-};
-exports.openTimelineAssetLink = openTimelineAssetLink;
 const useAssetLink = (src) => {
-    const { setCanvasContent } = react_1.default.useContext(remotion_1.Internals.CompositionSetters);
+    const selectAsset = (0, use_select_asset_1.useSelectAsset)();
     const [hovered, setHovered] = (0, react_1.useState)(false);
-    const linkInfo = (0, react_1.useMemo)(() => (0, exports.getTimelineAssetLinkInfo)(src), [src]);
+    const linkInfo = (0, react_1.useMemo)(() => (0, timeline_asset_link_1.getTimelineAssetLinkInfo)(src), [src]);
     const interactive = !TimelineSelection_1.SELECTION_ENABLED && linkInfo !== null;
     const onClick = (0, react_1.useCallback)((e) => {
         if (!linkInfo) {
@@ -93,8 +28,8 @@ const useAssetLink = (src) => {
         }
         e.preventDefault();
         e.stopPropagation();
-        (0, exports.openTimelineAssetLink)(linkInfo, setCanvasContent);
-    }, [linkInfo, setCanvasContent]);
+        (0, timeline_asset_link_1.openTimelineAssetLink)(linkInfo, selectAsset);
+    }, [linkInfo, selectAsset]);
     const onPointerEnter = (0, react_1.useCallback)(() => setHovered(true), []);
     const onPointerLeave = (0, react_1.useCallback)(() => setHovered(false), []);
     const fileNameStyle = (0, react_1.useMemo)(() => ({

package/dist/components/Timeline/TimelineNumberField.js

@@ -6,7 +6,7 @@ const react_1 = require("react");
 const InputDragger_1 = require("../NewComposition/InputDragger");
 const timeline_field_utils_1 = require("./timeline-field-utils");
 const TimelineNumberField = ({ field, effectiveValue, onSave, onDragValueChange, onDragEnd, propStatus, }) => {
-    var _a, _b, _c;
+    var _a, _b;
     const [dragValue, setDragValue] = (0, react_1.useState)(null);
     const onValueChange = (0, react_1.useCallback)((newVal) => {
         setDragValue(newVal);
@@ -33,17 +33,25 @@ const TimelineNumberField = ({ field, effectiveValue, onSave, onDragValueChange,
             });
         }
     }, [onSave, propStatus]);
-    const step = field.fieldSchema.type === 'number' ? ((_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 configuredStep = field.fieldSchema.type === 'number' ? field.fieldSchema.step : undefined;
+    const step = configuredStep !== null && configuredStep !== void 0 ? configuredStep : 1;
+    const stepDecimals = (0, react_1.useMemo)(() => configuredStep === undefined ? null : (0, timeline_field_utils_1.getDecimalPlaces)(configuredStep), [configuredStep]);
     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);
+        if (stepDecimals === null) {
+            const digits = (0, timeline_field_utils_1.getDecimalPlaces)(num);
+            return digits === 0 ? String(num) : num.toFixed(digits);
+        }
+        return (0, timeline_field_utils_1.formatTimelineNumber)({
+            decimalPlaces: stepDecimals,
+            fixed: true,
+            value: num,
+        });
     }, [stepDecimals]);
     return (jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: dragValue !== null && dragValue !== void 0 ? dragValue : effectiveValue, style: timeline_field_utils_1.draggerStyle, status: "ok", small: true, onValueChange: onValueChange, onValueChangeEnd: onValueChangeEnd, onTextChange: onTextChange, min: field.fieldSchema.type === 'number'
-            ? ((_b = field.fieldSchema.min) !== null && _b !== void 0 ? _b : -Infinity)
+            ? ((_a = field.fieldSchema.min) !== null && _a !== void 0 ? _a : -Infinity)
             : -Infinity, max: field.fieldSchema.type === 'number'
-            ? ((_c = field.fieldSchema.max) !== null && _c !== void 0 ? _c : Infinity)
+            ? ((_b = field.fieldSchema.max) !== null && _b !== void 0 ? _b : Infinity)
             : Infinity, step: step, formatter: formatter, rightAlign: false }));
 };
 exports.TimelineNumberField = TimelineNumberField;

package/dist/components/Timeline/TimelineRotationField.js

@@ -26,7 +26,7 @@ const parseCssRotationToDegrees = (value) => {
     }
 };
 const TimelineRotationField = ({ field, effectiveValue, propStatus, onSave, onDragValueChange, onDragEnd, }) => {
-    var _a, _b, _c;
+    var _a, _b;
     const [dragValue, setDragValue] = (0, react_1.useState)(null);
     const isCssRotation = field.fieldSchema.type === 'rotation-css';
     const degrees = (0, react_1.useMemo)(() => {
@@ -68,23 +68,29 @@ const TimelineRotationField = ({ field, effectiveValue, propStatus, onSave, onDr
             }
         }
     }, [propStatus, onSave, serializeValue]);
-    const step = field.fieldSchema.type === 'rotation-css' ||
+    const configuredStep = field.fieldSchema.type === 'rotation-css' ||
         field.fieldSchema.type === 'rotation-degrees'
-        ? ((_a = field.fieldSchema.step) !== null && _a !== void 0 ? _a : 1)
-        : 1;
+        ? field.fieldSchema.step
+        : undefined;
+    const step = configuredStep !== null && configuredStep !== void 0 ? configuredStep : 1;
     const min = field.fieldSchema.type === 'rotation-degrees'
-        ? ((_b = field.fieldSchema.min) !== null && _b !== void 0 ? _b : -Infinity)
+        ? ((_a = field.fieldSchema.min) !== null && _a !== void 0 ? _a : -Infinity)
         : -Infinity;
     const max = field.fieldSchema.type === 'rotation-degrees'
-        ? ((_c = field.fieldSchema.max) !== null && _c !== void 0 ? _c : Infinity)
+        ? ((_b = field.fieldSchema.max) !== null && _b !== void 0 ? _b : Infinity)
         : Infinity;
-    const stepDecimals = (0, react_1.useMemo)(() => (0, timeline_field_utils_1.getDecimalPlaces)(step), [step]);
+    const decimalPlaces = (0, react_1.useMemo)(() => (0, timeline_field_utils_1.getTimelineDisplayDecimalPlaces)({
+        defaultDecimalPlaces: 1,
+        step: configuredStep,
+    }), [configuredStep]);
     const formatter = (0, react_1.useCallback)((v) => {
-        const num = (0, timeline_field_utils_1.normalizeTimelineNumber)(Number(v));
-        const digits = Math.max(stepDecimals, (0, timeline_field_utils_1.getDecimalPlaces)(num));
-        const formatted = digits === 0 ? String(num) : num.toFixed(digits);
+        const formatted = (0, timeline_field_utils_1.formatTimelineNumber)({
+            decimalPlaces,
+            fixed: false,
+            value: (0, timeline_field_utils_1.normalizeTimelineNumber)(Number(v)),
+        });
         return `${formatted}\u00B0`;
-    }, [stepDecimals]);
+    }, [decimalPlaces]);
     return (jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: dragValue !== null && dragValue !== void 0 ? dragValue : degrees, style: timeline_field_utils_1.draggerStyle, status: "ok", small: true, onValueChange: onValueChange, onValueChangeEnd: onValueChangeEnd, onTextChange: onTextChange, min: min, max: max, step: step, formatter: formatter, rightAlign: false }));
 };
 exports.TimelineRotationField = TimelineRotationField;

package/dist/components/Timeline/TimelineScaleField.js

@@ -24,7 +24,7 @@ const toggleStyle = {
     ...TimelineLayerEye_1.timelineLayerIconContainer,
     border: 'none',
     color: colors_1.LIGHT_COLOR,
-    cursor: 'pointer',
+    cursor: 'default',
     marginRight: 0,
     padding: 0,
 };
@@ -78,7 +78,7 @@ const LinkToggle = ({ linked, onToggle }) => {
     return (jsx_runtime_1.jsx("button", { type: "button", style: toggleStyle, onPointerDown: onPointerDown, title: linked ? 'Unlink scale axes' : 'Link scale axes', "aria-label": linked ? 'Unlink scale axes' : 'Link scale axes', children: linked ? (jsx_runtime_1.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 640 640", style: linkIconStyle, children: jsx_runtime_1.jsx("path", { fill: "currentcolor", d: "M32 320C32 214 118 128 224 128L288 128L288 192L224 192C153.3 192 96 249.3 96 320C96 390.7 153.3 448 224 448L288 448L288 512L224 512C118 512 32 426 32 320zM608 320C608 426 522 512 416 512L352 512L352 448L416 448C486.7 448 544 390.7 544 320C544 249.3 486.7 192 416 192L352 192L352 128L416 128C522 128 608 214 608 320zM224 288L448 288L448 352L192 352L192 288L224 288z" }) })) : null }));
 };
 const TimelineScaleField = ({ field, propStatus, effectiveValue, onSave, onDragValueChange, onDragEnd, scaleLockNodePath, }) => {
-    var _a, _b, _c;
+    var _a, _b;
     const [dragX, setDragX] = (0, react_1.useState)(null);
     const [dragY, setDragY] = (0, react_1.useState)(null);
     const dragStartRef = (0, react_1.useRef)(null);
@@ -90,21 +90,25 @@ const TimelineScaleField = ({ field, propStatus, effectiveValue, onSave, onDragV
         fieldKey: field.key,
         defaultValue: defaultLinked,
     });
-    const step = field.fieldSchema.type === 'scale'
-        ? ((_a = field.fieldSchema.step) !== null && _a !== void 0 ? _a : 0.01)
-        : 0.01;
+    const configuredStep = field.fieldSchema.type === 'scale' ? field.fieldSchema.step : undefined;
+    const step = configuredStep !== null && configuredStep !== void 0 ? configuredStep : 0.01;
     const min = field.fieldSchema.type === 'scale'
-        ? ((_b = field.fieldSchema.min) !== null && _b !== void 0 ? _b : -Infinity)
+        ? ((_a = field.fieldSchema.min) !== null && _a !== void 0 ? _a : -Infinity)
         : -Infinity;
     const max = field.fieldSchema.type === 'scale'
-        ? ((_c = field.fieldSchema.max) !== null && _c !== void 0 ? _c : Infinity)
+        ? ((_b = field.fieldSchema.max) !== null && _b !== void 0 ? _b : Infinity)
         : Infinity;
-    const stepDecimals = (0, react_1.useMemo)(() => (0, timeline_field_utils_1.getDecimalPlaces)(step), [step]);
+    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 num = Number(v);
-        const digits = Math.max(stepDecimals, (0, timeline_field_utils_1.getDecimalPlaces)(num));
-        return digits === 0 ? String(num) : num.toFixed(digits);
-    }, [stepDecimals]);
+        return (0, timeline_field_utils_1.formatTimelineNumber)({
+            decimalPlaces,
+            fixed: true,
+            value: v,
+        });
+    }, [decimalPlaces]);
     const getDragStart = (0, react_1.useCallback)(() => {
         if (dragStartRef.current === null) {
             dragStartRef.current = [dragX !== null && dragX !== void 0 ? dragX : codeX, dragY !== null && dragY !== void 0 ? dragY : codeY];
@@ -308,7 +312,7 @@ const TimelineScaleField = ({ field, propStatus, effectiveValue, onSave, onDragV
         });
     }, [field.key, linked, scaleLockNodePath, setScaleLockState]);
     return (jsx_runtime_1.jsxs("span", { style: containerStyle, children: [
-            jsx_runtime_1.jsx(LinkToggle, { linked: linked, onToggle: onToggleLink }), jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: dragX !== null && dragX !== void 0 ? dragX : codeX, style: leftDraggerStyle, status: "ok", small: true, onValueChange: onXChange, onValueChangeEnd: onXChangeEnd, onTextChange: onXTextChange, min: min, max: max, step: step, formatter: formatter, rightAlign: false }), jsx_runtime_1.jsx("div", { style: gapStyle }), jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: dragY !== null && dragY !== void 0 ? dragY : codeY, style: rightDraggerStyle, status: "ok", small: true, onValueChange: onYChange, onValueChangeEnd: onYChangeEnd, onTextChange: onYTextChange, min: min, max: max, step: step, formatter: formatter, rightAlign: false })
+            jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: dragX !== null && dragX !== void 0 ? dragX : codeX, style: leftDraggerStyle, status: "ok", small: true, onValueChange: onXChange, onValueChangeEnd: onXChangeEnd, onTextChange: onXTextChange, min: min, max: max, step: step, formatter: formatter, rightAlign: false }), jsx_runtime_1.jsx("div", { style: gapStyle }), jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: dragY !== null && dragY !== void 0 ? dragY : codeY, style: rightDraggerStyle, status: "ok", small: true, onValueChange: onYChange, onValueChangeEnd: onYChangeEnd, onTextChange: onYTextChange, min: min, max: max, step: step, formatter: formatter, rightAlign: false }), jsx_runtime_1.jsx(LinkToggle, { linked: linked, onToggle: onToggleLink })
         ] }));
 };
 exports.TimelineScaleField = TimelineScaleField;

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

@@ -30,6 +30,11 @@ export type TimelineSelection = (TimelineSelectionBase & {
 }) | (TimelineSelectionBase & {
     readonly type: 'keyframe';
     readonly frame: number;
+}) | (TimelineSelectionBase & {
+    readonly type: 'easing';
+    readonly fromFrame: number;
+    readonly toFrame: number;
+    readonly segmentIndex: number;
 });
 export type TimelineSelectionInteraction = {
     readonly shiftKey: boolean;
@@ -81,5 +86,15 @@ export declare const useTimelineKeyframeSelection: (nodePathInfo: SequenceNodePa
     selectable: boolean;
     selected: boolean;
 };
+export declare const useTimelineEasingSelection: ({ nodePathInfo, fromFrame, toFrame, segmentIndex, }: {
+    readonly nodePathInfo: SequenceNodePathInfo;
+    readonly fromFrame: number;
+    readonly toFrame: number;
+    readonly segmentIndex: number;
+}) => {
+    onSelect: (interaction?: TimelineSelectionInteraction | undefined) => void;
+    selectable: boolean;
+    selected: boolean;
+};
 export declare const useTimelineRowContainsSelection: (nodePathInfo: SequenceNodePathInfo | null) => boolean;
 export {};

package/dist/components/Timeline/TimelineSelection.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useTimelineRowContainsSelection = exports.useTimelineKeyframeSelection = exports.useTimelineRowSelection = exports.useCurrentTimelineSelectionStateAsRef = exports.useTimelineSelection = exports.TimelineSelectionProvider = exports.TimelineSelectAllKeybindings = exports.getTimelineSequenceSelectionKey = exports.getSelectableTimelineSequenceSelections = exports.getTimelineSelectionFromNodePathInfo = exports.getTimelineSelectionAfterInteraction = exports.isTimelineSelectionModifierEvent = exports.ENABLE_OUTLINES = exports.TIMELINE_TOP_DRAG = exports.SELECTION_ENABLED = exports.getTimelineSelectedTrackHighlightStyle = 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;
+exports.useTimelineRowContainsSelection = exports.useTimelineEasingSelection = exports.useTimelineKeyframeSelection = exports.useTimelineRowSelection = exports.useCurrentTimelineSelectionStateAsRef = exports.useTimelineSelection = exports.TimelineSelectionProvider = exports.TimelineSelectAllKeybindings = exports.getTimelineSequenceSelectionKey = exports.getSelectableTimelineSequenceSelections = exports.getTimelineSelectionFromNodePathInfo = exports.getTimelineSelectionAfterInteraction = exports.isTimelineSelectionModifierEvent = exports.ENABLE_OUTLINES = exports.TIMELINE_TOP_DRAG = exports.SELECTION_ENABLED = exports.getTimelineSelectedTrackHighlightStyle = 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");
@@ -191,6 +191,8 @@ const getTimelineSelectionKey = (item) => {
             return `${sequenceKey}.sequence-effect-prop.${item.i}.${item.key}`;
         case 'keyframe':
             return `${(0, timeline_node_path_key_1.timelineNodePathInfoToKey)(item.nodePathInfo)}.keyframe.${item.frame}`;
+        case 'easing':
+            return `${(0, timeline_node_path_key_1.timelineNodePathInfoToKey)(item.nodePathInfo)}.easing.${item.segmentIndex}.${item.fromFrame}.${item.toFrame}`;
         default:
             throw new Error(`Unexpected timeline selection type: ${item}`);
     }
@@ -408,6 +410,29 @@ const useTimelineKeyframeSelection = (nodePathInfo, frame) => {
     };
 };
 exports.useTimelineKeyframeSelection = useTimelineKeyframeSelection;
+const useTimelineEasingSelection = ({ nodePathInfo, fromFrame, toFrame, segmentIndex, }) => {
+    const { canSelect, isSelected, selectItem, registerSelectableItem } = (0, exports.useTimelineSelection)();
+    const selectionItem = (0, react_1.useMemo)(() => ({
+        type: 'easing',
+        nodePathInfo,
+        fromFrame,
+        toFrame,
+        segmentIndex,
+    }), [nodePathInfo, fromFrame, segmentIndex, toFrame]);
+    (0, react_1.useEffect)(() => {
+        return registerSelectableItem(selectionItem);
+    }, [registerSelectableItem, selectionItem]);
+    const selected = isSelected(selectionItem);
+    const onSelect = (0, react_1.useCallback)((interaction) => {
+        selectItem(selectionItem, interaction);
+    }, [selectItem, selectionItem]);
+    return {
+        onSelect,
+        selectable: canSelect,
+        selected,
+    };
+};
+exports.useTimelineEasingSelection = useTimelineEasingSelection;
 const useTimelineRowContainsSelection = (nodePathInfo) => {
     const { containsSelection } = (0, exports.useTimelineSelection)();
     if (nodePathInfo === null) {

package/dist/components/Timeline/TimelineSequence.js

@@ -151,15 +151,15 @@ const TimelineSequenceInner = ({ s, windowWidth, nodePathInfo, sequenceFrameOffs
             column: (_a = originalLocation.column) !== null && _a !== void 0 ? _a : 0,
         };
     }, [originalLocation]);
-    const { codeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeCodeValuesContext);
+    const { propStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesContext);
     const nodePath = (_d = nodePathInfo === null || nodePathInfo === void 0 ? void 0 : nodePathInfo.sequenceSubscriptionKey) !== null && _d !== void 0 ? _d : null;
-    const codeValuesForOverride = (0, react_1.useMemo)(() => {
+    const propStatusesForOverride = (0, react_1.useMemo)(() => {
         return nodePath
-            ? remotion_1.Internals.getCodeValuesCtx(codeValues, nodePath)
+            ? remotion_1.Internals.getPropStatusesCtx(propStatuses, nodePath)
             : undefined;
-    }, [codeValues, nodePath]);
-    const durationCanUpdate = Boolean(((_a = codeValuesForOverride === null || codeValuesForOverride === void 0 ? void 0 : codeValuesForOverride.durationInFrames) === null || _a === void 0 ? void 0 : _a.status) === 'static');
-    const fromCanUpdate = Boolean(((_b = codeValuesForOverride === null || codeValuesForOverride === void 0 ? void 0 : codeValuesForOverride.from) === null || _b === void 0 ? void 0 : _b.status) === 'static');
+    }, [propStatuses, nodePath]);
+    const durationCanUpdate = Boolean(((_a = propStatusesForOverride === null || propStatusesForOverride === void 0 ? void 0 : propStatusesForOverride.durationInFrames) === null || _a === void 0 ? void 0 : _a.status) === 'static');
+    const fromCanUpdate = Boolean(((_b = propStatusesForOverride === null || propStatusesForOverride === void 0 ? void 0 : propStatusesForOverride.from) === null || _b === void 0 ? void 0 : _b.status) === 'static');
     const { onPointerDown: onMoveDragPointerDown } = (0, TimelineSequenceRightEdgeDragHandle_1.useTimelineSequenceFromDrag)({
         nodePathInfo,
         windowWidth,

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

@@ -6,4 +6,5 @@ export declare const TimelineSequenceItem: React.FC<{
     readonly nestedDepth: number;
     readonly nodePathInfo: SequenceNodePathInfo | null;
     readonly keyframeDisplayOffset: number;
+    readonly trackIndex: number;
 }>;