@remotion/studio 4.0.483 → 4.0.485

package/dist/components/InspectorPanel/EasingInspector.js

@@ -4,38 +4,212 @@ exports.EasingInspector = 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 timeline_layout_1 = require("../../helpers/timeline-layout");
+const plus_1 = require("../../icons/plus");
+const render_frame_1 = require("../../state/render-frame");
 const is_menu_item_1 = require("../Menu/is-menu-item");
-const SegmentedControl_1 = require("../SegmentedControl");
+const call_add_keyframe_1 = require("../Timeline/call-add-keyframe");
 const EasingEditorModal_1 = require("../Timeline/EasingEditorModal");
 const TimelineSelection_1 = require("../Timeline/TimelineSelection");
 const update_selected_easing_1 = require("../Timeline/update-selected-easing");
 const common_1 = require("./common");
+const easing_inspector_selection_1 = require("./easing-inspector-selection");
+const KeyframeEasingNavigator_1 = require("./KeyframeEasingNavigator");
+const SequenceInspectorHeader_1 = require("./SequenceInspectorHeader");
 const styles_1 = require("./styles");
+const use_track_for_selection_1 = require("./use-track-for-selection");
+const addKeyframeIcon = {
+    display: 'block',
+    height: 13,
+    width: 12,
+};
 const EasingInspector = ({ selection }) => {
+    var _a, _b;
+    const track = (0, use_track_for_selection_1.useTrackForSelection)(selection);
+    const videoConfig = (0, remotion_1.useVideoConfig)();
+    const timelinePosition = remotion_1.Internals.Timeline.useTimelinePosition();
     const { sequences } = (0, react_1.useContext)(remotion_1.Internals.SequenceManager);
     const { overrideIdToNodePathMappings } = (0, react_1.useContext)(remotion_1.Internals.OverrideIdsToNodePathsGettersContext);
     const { propStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesContext);
-    const initialEasing = (0, react_1.useMemo)(() => (0, update_selected_easing_1.getTimelineEasingValueForSelection)({
+    const { getDragOverrides, getEffectDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeDragOverridesContext);
+    const { setPropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
+    const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
+    const { selectItems } = (0, TimelineSelection_1.useTimelineSelection)();
+    const parentSelection = (0, react_1.useMemo)(() => (0, TimelineSelection_1.getTimelineSelectionFromNodePathInfo)(selection.nodePathInfo), [selection.nodePathInfo]);
+    const easingUpdate = (0, react_1.useMemo)(() => (0, update_selected_easing_1.getSelectedEasingUpdate)({
         selection,
         sequences,
         overrideIdsToNodePaths: overrideIdToNodePathMappings,
         propStatuses,
     }), [overrideIdToNodePathMappings, propStatuses, selection, sequences]);
+    const initialEasing = (_a = easingUpdate === null || easingUpdate === void 0 ? void 0 : easingUpdate.currentEasing) !== null && _a !== void 0 ? _a : null;
+    const easingDetails = (0, react_1.useMemo)(() => {
+        var _a, _b, _c, _d, _e, _f, _g;
+        if (easingUpdate === null || track === null) {
+            return null;
+        }
+        if (easingUpdate.type === 'sequence') {
+            const sequenceDragOverrideValue = ((_a = getDragOverrides(easingUpdate.nodePath)) !== null && _a !== void 0 ? _a : {})[easingUpdate.fieldKey];
+            if (!track.sequence.controls) {
+                return {
+                    defaultValue: undefined,
+                    dragOverrideValue: sequenceDragOverrideValue,
+                    fieldLabel: easingUpdate.fieldKey,
+                };
+            }
+            const sequenceFields = (0, timeline_layout_1.getFieldsToShow)({
+                schema: track.sequence.controls.schema,
+                currentRuntimeValueDotNotation: track.sequence.controls.currentRuntimeValueDotNotation,
+                getDragOverrides,
+                propStatuses,
+                nodePath: easingUpdate.nodePath,
+            });
+            const sequenceField = (_b = sequenceFields === null || sequenceFields === void 0 ? void 0 : sequenceFields.find((candidate) => candidate.key === easingUpdate.fieldKey)) !== null && _b !== void 0 ? _b : null;
+            return {
+                defaultValue: sequenceField === null || sequenceField === void 0 ? void 0 : sequenceField.fieldSchema.default,
+                dragOverrideValue: sequenceDragOverrideValue,
+                fieldLabel: (_d = (_c = sequenceField === null || sequenceField === void 0 ? void 0 : sequenceField.description) !== null && _c !== void 0 ? _c : sequenceField === null || sequenceField === void 0 ? void 0 : sequenceField.key) !== null && _d !== void 0 ? _d : easingUpdate.fieldKey,
+            };
+        }
+        const effectDragOverrideValue = getEffectDragOverrides(easingUpdate.nodePath, easingUpdate.effectIndex)[easingUpdate.fieldKey];
+        const effect = track.sequence.effects[easingUpdate.effectIndex];
+        if (!effect) {
+            return {
+                defaultValue: undefined,
+                dragOverrideValue: effectDragOverrideValue,
+                fieldLabel: easingUpdate.fieldKey,
+            };
+        }
+        const effectFields = (0, timeline_layout_1.getEffectFieldsToShow)({
+            effect,
+            effectIndex: easingUpdate.effectIndex,
+            nodePath: easingUpdate.nodePath,
+            propStatuses,
+            getEffectDragOverrides,
+        });
+        const effectField = (_e = effectFields.find((candidate) => candidate.key === easingUpdate.fieldKey)) !== null && _e !== void 0 ? _e : null;
+        return {
+            defaultValue: effectField === null || effectField === void 0 ? void 0 : effectField.fieldSchema.default,
+            dragOverrideValue: effectDragOverrideValue,
+            fieldLabel: (_g = (_f = effectField === null || effectField === void 0 ? void 0 : effectField.description) !== null && _f !== void 0 ? _f : effectField === null || effectField === void 0 ? void 0 : effectField.key) !== null && _g !== void 0 ? _g : easingUpdate.fieldKey,
+        };
+    }, [
+        easingUpdate,
+        getDragOverrides,
+        getEffectDragOverrides,
+        propStatuses,
+        track,
+    ]);
+    const fieldLabel = (_b = easingDetails === null || easingDetails === void 0 ? void 0 : easingDetails.fieldLabel) !== null && _b !== void 0 ? _b : null;
+    const currentEasingSelection = (0, react_1.useMemo)(() => {
+        if (easingUpdate === null || track === null) {
+            return null;
+        }
+        return (0, easing_inspector_selection_1.getEasingSelectionFromCurrentKeyframes)({
+            keyframeDisplayOffset: track.keyframeDisplayOffset,
+            nodePathInfo: selection.nodePathInfo,
+            propStatus: easingUpdate.propStatus,
+            segmentIndex: easingUpdate.segmentIndex,
+        });
+    }, [easingUpdate, selection.nodePathInfo, track]);
     const state = (0, react_1.useMemo)(() => {
-        if (initialEasing === null) {
+        if (initialEasing === null || currentEasingSelection === null) {
             return null;
         }
         return {
             initialEasing,
-            selections: [selection],
+            selections: [currentEasingSelection],
+        };
+    }, [currentEasingSelection, initialEasing]);
+    const onSelectParent = (0, react_1.useCallback)((event) => {
+        event.stopPropagation();
+        if (parentSelection === null) {
+            return;
+        }
+        selectItems([parentSelection], { reveal: true });
+    }, [parentSelection, selectItems]);
+    const canAddKeyframeAtPlayhead = currentEasingSelection !== null &&
+        timelinePosition > currentEasingSelection.fromFrame &&
+        timelinePosition < currentEasingSelection.toFrame;
+    const addKeyframeTime = (0, render_frame_1.renderFrame)(timelinePosition, videoConfig.fps);
+    const addKeyframeDisabled = previewServerState.type !== 'connected';
+    const onAddKeyframeAtPlayhead = (0, react_1.useCallback)((event) => {
+        event.stopPropagation();
+        if (!canAddKeyframeAtPlayhead ||
+            easingUpdate === null ||
+            easingDetails === null ||
+            track === null ||
+            previewServerState.type !== 'connected') {
+            return;
+        }
+        const sourceFrame = timelinePosition - track.keyframeDisplayOffset;
+        const value = remotion_1.Internals.getEffectiveVisualModeValue({
+            propStatus: easingUpdate.propStatus,
+            dragOverrideValue: easingDetails.dragOverrideValue,
+            defaultValue: easingDetails.defaultValue,
+            frame: sourceFrame,
+            shouldResortToDefaultValueIfUndefined: true,
+        });
+        const keyframeSelection = {
+            type: 'keyframe',
+            nodePathInfo: selection.nodePathInfo,
+            frame: timelinePosition,
         };
-    }, [initialEasing, selection]);
-    const renderHeader = (0, react_1.useCallback)((modeItems) => (jsx_runtime_1.jsx(common_1.InspectorSectionHeader, { children: jsx_runtime_1.jsx("div", { style: styles_1.sectionHeaderRow, children: jsx_runtime_1.jsxs("div", { style: styles_1.sectionHeaderStart, children: [
-                    jsx_runtime_1.jsx("span", { style: styles_1.sectionHeaderTitle, children: "Easing" }), jsx_runtime_1.jsx(SegmentedControl_1.SegmentedControl, { items: modeItems, needsWrapping: false, size: "compact" })
-                ] }) }) })), []);
-    if (state === null) {
+        if (easingUpdate.type === 'sequence') {
+            (0, call_add_keyframe_1.callAddSequenceKeyframe)({
+                fileName: easingUpdate.fileName,
+                nodePath: easingUpdate.nodePath,
+                fieldKey: easingUpdate.fieldKey,
+                sourceFrame,
+                value,
+                schema: easingUpdate.schema,
+                setPropStatuses,
+                clientId: previewServerState.clientId,
+            }).catch(() => undefined);
+        }
+        else {
+            (0, call_add_keyframe_1.callAddEffectKeyframe)({
+                fileName: easingUpdate.fileName,
+                nodePath: easingUpdate.nodePath,
+                effectIndex: easingUpdate.effectIndex,
+                fieldKey: easingUpdate.fieldKey,
+                sourceFrame,
+                value,
+                schema: easingUpdate.schema,
+                setPropStatuses,
+                clientId: previewServerState.clientId,
+            }).catch(() => undefined);
+        }
+        selectItems([keyframeSelection], { reveal: true });
+    }, [
+        canAddKeyframeAtPlayhead,
+        easingDetails,
+        easingUpdate,
+        previewServerState,
+        selectItems,
+        selection.nodePathInfo,
+        setPropStatuses,
+        timelinePosition,
+        track,
+    ]);
+    const renderHeader = (0, react_1.useCallback)(() => (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+            jsx_runtime_1.jsx(common_1.InspectorBackHeaderWithDivider, { disabled: parentSelection === null, onClick: onSelectParent, title: "Back to property", children: jsx_runtime_1.jsx("div", { style: styles_1.sectionHeaderTitle, children: fieldLabel }) }), easingUpdate === null || track === null ? null : (jsx_runtime_1.jsx(KeyframeEasingNavigator_1.KeyframeEasingNavigator, { currentSelection: currentEasingSelection !== null && currentEasingSelection !== void 0 ? currentEasingSelection : selection, includeEasings: true, keyframes: easingUpdate.propStatus.keyframes.map((keyframe) => ({
+                    ...keyframe,
+                    frame: keyframe.frame + track.keyframeDisplayOffset,
+                })), nodePathInfo: selection.nodePathInfo }))] })), [
+        currentEasingSelection,
+        easingUpdate,
+        fieldLabel,
+        onSelectParent,
+        parentSelection,
+        selection,
+        track,
+    ]);
+    if (state === null || track === null || currentEasingSelection === null) {
         return jsx_runtime_1.jsx(common_1.InspectorMessage, { children: "Easing unavailable" });
     }
-    return (jsx_runtime_1.jsx("div", { style: styles_1.selectedContainer, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: jsx_runtime_1.jsx(EasingEditorModal_1.EasingEditor, { state: state, renderHeader: renderHeader }, (0, TimelineSelection_1.getTimelineSelectionKey)(selection)) }));
+    return (jsx_runtime_1.jsxs("div", { style: styles_1.selectedContainer, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: [
+            jsx_runtime_1.jsx(SequenceInspectorHeader_1.SequenceInspectorHeaderWithDivider, { track: track }), jsx_runtime_1.jsx(EasingEditorModal_1.EasingEditor, { state: state, renderHeader: renderHeader }, (0, TimelineSelection_1.getTimelineSelectionKey)(currentEasingSelection)), canAddKeyframeAtPlayhead ? (jsx_runtime_1.jsx("div", { style: styles_1.detailsContainer, children: jsx_runtime_1.jsx(common_1.InspectorInlineAction, { disabled: addKeyframeDisabled, onClick: onAddKeyframeAtPlayhead, renderIcon: (color) => (jsx_runtime_1.jsx(plus_1.Plus, { color: color, style: addKeyframeIcon })), children: `Add keyframe at ${addKeyframeTime}` }) })) : null] }));
 };
 exports.EasingInspector = EasingInspector;

package/dist/components/InspectorPanel/KeyframeEasingNavigator.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import type { SequenceNodePathInfo } from '../../helpers/get-timeline-sequence-sort-key';
+import { type TimelineSelection } from '../Timeline/TimelineSelection';
+import { type NavigatorKeyframe } from './keyframe-easing-navigator-items';
+export declare const KeyframeEasingNavigator: React.FC<{
+    readonly currentSelection: Extract<TimelineSelection, {
+        type: 'keyframe';
+    } | {
+        type: 'easing';
+    }>;
+    readonly includeEasings: boolean;
+    readonly keyframes: readonly NavigatorKeyframe[];
+    readonly nodePathInfo: SequenceNodePathInfo;
+}>;

package/dist/components/InspectorPanel/KeyframeEasingNavigator.js

@@ -0,0 +1,146 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.KeyframeEasingNavigator = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const remotion_1 = require("remotion");
+const colors_1 = require("../../helpers/colors");
+const InlineAction_1 = require("../InlineAction");
+const InspectorPanelLayout_1 = require("../InspectorPanelLayout");
+const TimelineKeyframeDiamondIcon_1 = require("../Timeline/TimelineKeyframeDiamondIcon");
+const TimelineKeyframeEasingLine_1 = require("../Timeline/TimelineKeyframeEasingLine");
+const TimelineSelection_1 = require("../Timeline/TimelineSelection");
+const keyframe_easing_navigator_items_1 = require("./keyframe-easing-navigator-items");
+const navigatorContainer = {
+    alignItems: 'center',
+    boxSizing: 'border-box',
+    display: 'flex',
+    gap: 8,
+    justifyContent: 'space-between',
+    padding: `8px ${InspectorPanelLayout_1.INSPECTOR_PANEL_HORIZONTAL_PADDING}px 6px`,
+    width: '100%',
+};
+const itemStrip = {
+    alignItems: 'center',
+    display: 'flex',
+    flex: 1,
+    gap: 0,
+    height: 24,
+    justifyContent: 'center',
+    minWidth: 0,
+};
+const itemButton = {
+    alignItems: 'center',
+    background: 'none',
+    border: 'none',
+    display: 'flex',
+    height: 24,
+    justifyContent: 'center',
+    padding: 0,
+};
+const diamondSize = 12;
+const easingLineDiamondOverlap = diamondSize / 2;
+const emptyItem = {
+    height: 24,
+    width: diamondSize,
+};
+const easingItem = {
+    height: 12,
+    position: 'relative',
+    width: 38,
+};
+const getEasingLineUnderlay = ({ extendLeft, extendRight, }) => {
+    return {
+        bottom: 0,
+        left: extendLeft ? -easingLineDiamondOverlap : 0,
+        pointerEvents: 'none',
+        position: 'absolute',
+        right: extendRight ? -easingLineDiamondOverlap : 0,
+        top: 0,
+    };
+};
+const chevronIcon = {
+    display: 'block',
+    height: 12,
+    width: 8,
+};
+const disabledChevronColor = 'rgba(255, 255, 255, 0.25)';
+const NavigationChevron = ({ color, direction }) => {
+    const path = direction === 'left' ? 'M6 1L2 6L6 11' : 'M2 1L6 6L2 11';
+    return (jsx_runtime_1.jsx("svg", { viewBox: "0 0 8 12", style: chevronIcon, children: jsx_runtime_1.jsx("path", { d: path, fill: "none", stroke: color, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5" }) }));
+};
+const TimelineNavigatorItem = ({ extendLineLeft, extendLineRight, item, onSelect, selected }) => {
+    const onClick = (0, react_1.useCallback)(() => {
+        if (item === null) {
+            return;
+        }
+        onSelect(item);
+    }, [item, onSelect]);
+    if (item === null) {
+        return jsx_runtime_1.jsx("div", { style: emptyItem });
+    }
+    const buttonStyle = {
+        ...itemButton,
+        position: 'relative',
+        width: item.type === 'easing' ? 38 : diamondSize,
+        zIndex: item.type === 'keyframe' ? 1 : 0,
+    };
+    const lineUnderlayStyle = getEasingLineUnderlay({
+        extendLeft: extendLineLeft,
+        extendRight: extendLineRight,
+    });
+    return (jsx_runtime_1.jsx("button", { type: "button", style: buttonStyle, onClick: onClick, title: item.type === 'keyframe'
+            ? `Keyframe at frame ${item.selection.frame}`
+            : `Easing from frame ${item.selection.fromFrame} to ${item.selection.toFrame}`, "aria-label": item.type === 'keyframe'
+            ? `Select keyframe at frame ${item.selection.frame}`
+            : `Select easing from frame ${item.selection.fromFrame} to ${item.selection.toFrame}`, children: item.type === 'keyframe' ? (jsx_runtime_1.jsx(TimelineKeyframeDiamondIcon_1.TimelineKeyframeDiamondIcon, { color: colors_1.LIGHT_TEXT, selected: selected, size: 12 })) : (jsx_runtime_1.jsx("div", { style: easingItem, children: jsx_runtime_1.jsx("div", { style: lineUnderlayStyle, children: jsx_runtime_1.jsx(TimelineKeyframeEasingLine_1.TimelineKeyframeEasingLineVisual, { selected: selected }) }) })) }));
+};
+const KeyframeEasingNavigator = ({ currentSelection, includeEasings, keyframes, nodePathInfo }) => {
+    const { isSelected, selectItems } = (0, TimelineSelection_1.useTimelineSelection)();
+    const setFrame = remotion_1.Internals.useTimelineSetFrame();
+    const videoConfig = (0, remotion_1.useVideoConfig)();
+    const items = (0, react_1.useMemo)(() => (0, keyframe_easing_navigator_items_1.getKeyframeEasingNavigatorItems)({
+        includeEasings,
+        keyframes,
+        nodePathInfo,
+    }), [includeEasings, keyframes, nodePathInfo]);
+    const currentKey = (0, TimelineSelection_1.getTimelineSelectionKey)(currentSelection);
+    const currentIndex = items.findIndex((item) => (0, TimelineSelection_1.getTimelineSelectionKey)(item.selection) === currentKey);
+    const previousItem = currentIndex > 0 ? items[currentIndex - 1] : null;
+    const currentItem = currentIndex === -1 ? null : items[currentIndex];
+    const nextItem = currentIndex === -1 || currentIndex >= items.length - 1
+        ? null
+        : items[currentIndex + 1];
+    const selectItem = (0, react_1.useCallback)((item) => {
+        selectItems([item.selection], { reveal: true });
+    }, [selectItems]);
+    const seekToItem = (0, react_1.useCallback)((item) => {
+        const frame = (0, keyframe_easing_navigator_items_1.getNavigatorItemPlayheadFrame)(item);
+        setFrame((current) => {
+            const next = { ...current, [videoConfig.id]: frame };
+            remotion_1.Internals.persistCurrentFrame(next);
+            return next;
+        });
+    }, [setFrame, videoConfig.id]);
+    const selectPrevious = (0, react_1.useCallback)(() => {
+        if (previousItem === null) {
+            return;
+        }
+        seekToItem(previousItem);
+        selectItem(previousItem);
+    }, [previousItem, seekToItem, selectItem]);
+    const selectNext = (0, react_1.useCallback)(() => {
+        if (nextItem === null) {
+            return;
+        }
+        seekToItem(nextItem);
+        selectItem(nextItem);
+    }, [nextItem, seekToItem, selectItem]);
+    if (currentItem === null) {
+        return null;
+    }
+    return (jsx_runtime_1.jsxs("div", { style: navigatorContainer, children: [jsx_runtime_1.jsx(InlineAction_1.InlineAction, { disabled: previousItem === null, onClick: selectPrevious, title: "Previous animation item", renderAction: (color) => (jsx_runtime_1.jsx(NavigationChevron, { color: previousItem === null ? disabledChevronColor : color, direction: "left" })) }), jsx_runtime_1.jsxs("div", { style: itemStrip, children: [
+                    jsx_runtime_1.jsx(TimelineNavigatorItem, { extendLineLeft: false, extendLineRight: currentItem.type === 'keyframe', item: previousItem, onSelect: selectItem, selected: previousItem === null ? false : isSelected(previousItem.selection) }), jsx_runtime_1.jsx(TimelineNavigatorItem, { extendLineLeft: (previousItem === null || previousItem === void 0 ? void 0 : previousItem.type) === 'keyframe', extendLineRight: (nextItem === null || nextItem === void 0 ? void 0 : nextItem.type) === 'keyframe', item: currentItem, onSelect: selectItem, selected: isSelected(currentItem.selection) }), jsx_runtime_1.jsx(TimelineNavigatorItem, { extendLineLeft: currentItem.type === 'keyframe', extendLineRight: false, item: nextItem, onSelect: selectItem, selected: nextItem === null ? false : isSelected(nextItem.selection) })
+                ] }), jsx_runtime_1.jsx(InlineAction_1.InlineAction, { disabled: nextItem === null, onClick: selectNext, title: "Next animation item", renderAction: (color) => (jsx_runtime_1.jsx(NavigationChevron, { color: nextItem === null ? disabledChevronColor : color, direction: "right" })) })] }));
+};
+exports.KeyframeEasingNavigator = KeyframeEasingNavigator;

package/dist/components/InspectorPanel/KeyframeInspector.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { TimelineSelection } from '../Timeline/TimelineSelection';
+import { type TimelineSelection } from '../Timeline/TimelineSelection';
 export declare const KeyframeInspector: React.FC<{
     readonly selection: Extract<TimelineSelection, {
         type: 'keyframe';