@remotion/studio 4.0.482 → 4.0.484

package/dist/components/InspectorPanel/KeyframeInspector.js

@@ -2,20 +2,69 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.KeyframeInspector = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const studio_shared_1 = require("@remotion/studio-shared");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
+const client_id_1 = require("../../helpers/client-id");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
 const is_menu_item_1 = require("../Menu/is-menu-item");
+const InputDragger_1 = require("../NewComposition/InputDragger");
+const call_delete_keyframe_1 = require("../Timeline/call-delete-keyframe");
+const call_move_keyframe_1 = require("../Timeline/call-move-keyframe");
+const get_easing_selection_after_keyframe_delete_1 = require("../Timeline/get-easing-selection-after-keyframe-delete");
 const parse_keyframe_field_from_node_path_1 = require("../Timeline/parse-keyframe-field-from-node-path");
 const TimelineEffectPropItem_1 = require("../Timeline/TimelineEffectPropItem");
+const TimelineSelection_1 = require("../Timeline/TimelineSelection");
 const TimelineSequencePropItem_1 = require("../Timeline/TimelineSequencePropItem");
+const update_selected_easing_1 = require("../Timeline/update-selected-easing");
 const common_1 = require("./common");
+const keyframe_inspector_frame_1 = require("./keyframe-inspector-frame");
+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 makeMovedKeyframedDragOverride = ({ details, toFrame, }) => {
+    if (!(0, studio_shared_1.canMoveKeyframesWithoutCollisions)({
+        status: details.propStatus,
+        moves: [{ fromFrame: details.sourceFrame, toFrame }],
+    })) {
+        return null;
+    }
+    const movedStatus = (0, studio_shared_1.moveKeyframesInPropStatus)({
+        status: details.propStatus,
+        moves: [{ fromFrame: details.sourceFrame, toFrame }],
+    });
+    if (movedStatus.status !== 'keyframed') {
+        return null;
+    }
+    return {
+        type: 'keyframed',
+        status: movedStatus,
+    };
+};
+const removeKeyframeIcon = {
+    display: 'block',
+    flexShrink: 0,
+    height: 13,
+    width: 12,
+};
+const TrashIcon = ({ color }) => {
+    return (jsx_runtime_1.jsx("svg", { viewBox: "0 0 448 512", style: removeKeyframeIcon, children: jsx_runtime_1.jsx("path", { fill: color, d: "M136.7 5.9C141.1-7.2 153.3-16 167.1-16l113.9 0c13.8 0 26 8.8 30.4 21.9L320 32 416 32c17.7 0 32 14.3 32 32s-14.3 32-32 32L32 96C14.3 96 0 81.7 0 64S14.3 32 32 32l96 0 8.7-26.1zM32 144l384 0 0 304c0 35.3-28.7 64-64 64L96 512c-35.3 0-64-28.7-64-64l0-304zm88 64c-13.3 0-24 10.7-24 24l0 192c0 13.3 10.7 24 24 24s24-10.7 24-24l0-192c0-13.3-10.7-24-24-24zm104 0c-13.3 0-24 10.7-24 24l0 192c0 13.3 10.7 24 24 24s24-10.7 24-24l0-192c0-13.3-10.7-24-24-24zm104 0c-13.3 0-24 10.7-24 24l0 192c0 13.3 10.7 24 24 24s24-10.7 24-24l0-192c0-13.3-10.7-24-24-24z" }) }));
+};
 const KeyframeInspector = ({ selection }) => {
     const track = (0, use_track_for_selection_1.useTrackForSelection)(selection);
+    const videoConfig = (0, remotion_1.useVideoConfig)();
+    const timelinePosition = remotion_1.Internals.Timeline.useTimelinePosition();
     const { propStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesContext);
+    const { clearDragOverrides, clearEffectDragOverrides, setDragOverrides, setEffectDragOverrides, setPropStatuses, } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
     const { getDragOverrides, getEffectDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeDragOverridesContext);
+    const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
+    const { selectItems } = (0, TimelineSelection_1.useTimelineSelection)();
+    const [draftFrame, setDraftFrame] = (0, react_1.useState)(selection.frame);
+    const parentSelection = (0, react_1.useMemo)(() => (0, TimelineSelection_1.getTimelineSelectionFromNodePathInfo)(selection.nodePathInfo), [selection.nodePathInfo]);
+    (0, react_1.useEffect)(() => {
+        setDraftFrame(selection.frame);
+    }, [selection.frame]);
     const details = (0, react_1.useMemo)(() => {
         var _a;
         var _b, _c, _d, _e, _f, _g;
@@ -47,6 +96,7 @@ const KeyframeInspector = ({ selection }) => {
                 field: sequenceField,
                 fieldLabel: (_d = sequenceField.description) !== null && _d !== void 0 ? _d : sequenceField.key,
                 fileName: nodePath.absolutePath,
+                keyframeDisplayOffset,
                 nodePath,
                 propStatus: sequencePropStatus,
                 schema: track.sequence.controls.schema,
@@ -78,9 +128,14 @@ const KeyframeInspector = ({ selection }) => {
         }
         return {
             type: 'effect',
+            effectIndex: keyframeField.effectIndex,
             field: effectField,
             fieldLabel: (_g = effectField.description) !== null && _g !== void 0 ? _g : effectField.key,
+            fileName: nodePath.absolutePath,
+            keyframeDisplayOffset,
             nodePath,
+            propStatus: effectPropStatus,
+            schema: effect.schema,
             sourceFrame,
             validatedLocation: {
                 source: nodePath.absolutePath,
@@ -95,15 +150,183 @@ const KeyframeInspector = ({ selection }) => {
         selection,
         track,
     ]);
-    if (details === null) {
+    const clearFrameDragOverride = (0, react_1.useCallback)((detailsToClear) => {
+        if (detailsToClear === null) {
+            return;
+        }
+        if (detailsToClear.type === 'sequence') {
+            clearDragOverrides(detailsToClear.nodePath);
+            return;
+        }
+        clearEffectDragOverrides(detailsToClear.nodePath, detailsToClear.effectIndex);
+    }, [clearDragOverrides, clearEffectDragOverrides]);
+    const onFrameChange = (0, react_1.useCallback)((value) => {
+        const displayFrame = (0, keyframe_inspector_frame_1.clampInspectorKeyframeDisplayFrame)({
+            durationInFrames: videoConfig.durationInFrames,
+            frame: value,
+        });
+        setDraftFrame(displayFrame);
+        if (details === null) {
+            return;
+        }
+        const toFrame = (0, keyframe_inspector_frame_1.getInspectorKeyframeSourceFrame)({
+            displayFrame,
+            keyframeDisplayOffset: details.keyframeDisplayOffset,
+        });
+        if (displayFrame === selection.frame || toFrame === details.sourceFrame) {
+            clearFrameDragOverride(details);
+            return;
+        }
+        const dragOverrideValue = makeMovedKeyframedDragOverride({
+            details,
+            toFrame,
+        });
+        if (dragOverrideValue === null) {
+            clearFrameDragOverride(details);
+            return;
+        }
+        if (details.type === 'sequence') {
+            setDragOverrides(details.nodePath, details.field.key, dragOverrideValue);
+            return;
+        }
+        setEffectDragOverrides(details.nodePath, details.effectIndex, details.field.key, dragOverrideValue);
+    }, [
+        clearFrameDragOverride,
+        details,
+        selection.frame,
+        setDragOverrides,
+        setEffectDragOverrides,
+        videoConfig.durationInFrames,
+    ]);
+    const onFrameChangeEnd = (0, react_1.useCallback)((value) => {
+        if (details === null || previewServerState.type !== 'connected') {
+            clearFrameDragOverride(details);
+            setDraftFrame(selection.frame);
+            return;
+        }
+        const displayFrame = (0, keyframe_inspector_frame_1.clampInspectorKeyframeDisplayFrame)({
+            durationInFrames: videoConfig.durationInFrames,
+            frame: value,
+        });
+        const toFrame = (0, keyframe_inspector_frame_1.getInspectorKeyframeSourceFrame)({
+            displayFrame,
+            keyframeDisplayOffset: details.keyframeDisplayOffset,
+        });
+        setDraftFrame(displayFrame);
+        clearFrameDragOverride(details);
+        if (displayFrame === selection.frame || toFrame === details.sourceFrame) {
+            return;
+        }
+        if (makeMovedKeyframedDragOverride({ details, toFrame }) === null) {
+            setDraftFrame(selection.frame);
+            return;
+        }
+        selectItems([
+            {
+                ...selection,
+                frame: displayFrame,
+            },
+        ], { reveal: true });
+        const move = {
+            fileName: details.fileName,
+            nodePath: details.nodePath,
+            fieldKey: details.field.key,
+            fromFrame: details.sourceFrame,
+            toFrame,
+            schema: details.schema,
+        };
+        (0, call_move_keyframe_1.callMoveKeyframes)({
+            sequenceKeyframes: details.type === 'sequence' ? [move] : [],
+            effectKeyframes: details.type === 'effect'
+                ? [
+                    {
+                        ...move,
+                        effectIndex: details.effectIndex,
+                    },
+                ]
+                : [],
+            setPropStatuses,
+            clientId: previewServerState.clientId,
+        }).catch(() => undefined);
+    }, [
+        clearFrameDragOverride,
+        details,
+        previewServerState,
+        selection,
+        selectItems,
+        setPropStatuses,
+        videoConfig.durationInFrames,
+    ]);
+    const onSelectParent = (0, react_1.useCallback)((event) => {
+        event.stopPropagation();
+        if (parentSelection === null) {
+            return;
+        }
+        selectItems([parentSelection], { reveal: true });
+    }, [parentSelection, selectItems]);
+    const removeDisabled = previewServerState.type !== 'connected';
+    const onRemoveKeyframe = (0, react_1.useCallback)((event) => {
+        event.stopPropagation();
+        if (details === null || previewServerState.type !== 'connected') {
+            return;
+        }
+        const easingSelection = (0, update_selected_easing_1.canEditEasingForInterpolationFunction)(details.propStatus.interpolationFunction)
+            ? (0, get_easing_selection_after_keyframe_delete_1.getEasingSelectionAfterKeyframeDelete)({
+                deletedSourceFrames: [details.sourceFrame],
+                keyframeDisplayOffset: details.keyframeDisplayOffset,
+                nodePathInfo: selection.nodePathInfo,
+                propStatus: details.propStatus,
+                timelinePosition,
+            })
+            : null;
+        if (easingSelection !== null) {
+            selectItems([easingSelection], { reveal: true });
+        }
+        else if (parentSelection !== null) {
+            selectItems([parentSelection], { reveal: true });
+        }
+        if (details.type === 'sequence') {
+            (0, call_delete_keyframe_1.callDeleteSequenceKeyframe)({
+                fileName: details.fileName,
+                nodePath: details.nodePath,
+                fieldKey: details.field.key,
+                sourceFrame: details.sourceFrame,
+                schema: details.schema,
+                setPropStatuses,
+                clientId: previewServerState.clientId,
+            }).catch(() => undefined);
+            return;
+        }
+        (0, call_delete_keyframe_1.callDeleteEffectKeyframe)({
+            fileName: details.fileName,
+            nodePath: details.nodePath,
+            effectIndex: details.effectIndex,
+            fieldKey: details.field.key,
+            sourceFrame: details.sourceFrame,
+            schema: details.schema,
+            setPropStatuses,
+            clientId: previewServerState.clientId,
+        }).catch(() => undefined);
+    }, [
+        details,
+        parentSelection,
+        previewServerState,
+        selectItems,
+        selection.nodePathInfo,
+        setPropStatuses,
+        timelinePosition,
+    ]);
+    if (details === null || track === null) {
         return jsx_runtime_1.jsx(common_1.InspectorMessage, { children: "Keyframe unavailable" });
     }
     return (jsx_runtime_1.jsxs("div", { style: styles_1.selectedContainer, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: [
-            jsx_runtime_1.jsx(common_1.InspectorSectionHeader, { children: "Keyframe" }), jsx_runtime_1.jsxs("div", { style: styles_1.detailsContainer, children: [
-                    jsx_runtime_1.jsx(common_1.InspectorDetailRow, { label: "Frame", children: selection.frame }), jsx_runtime_1.jsxs("div", { style: styles_1.keyframeEditorRow, children: [
+            jsx_runtime_1.jsx(SequenceInspectorHeader_1.SequenceInspectorHeaderWithDivider, { track: track }), 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: details.fieldLabel }) }), jsx_runtime_1.jsx(KeyframeEasingNavigator_1.KeyframeEasingNavigator, { currentSelection: selection, includeEasings: (0, update_selected_easing_1.canEditEasingForInterpolationFunction)(details.propStatus.interpolationFunction), keyframes: details.propStatus.keyframes.map((keyframe) => ({
+                    ...keyframe,
+                    frame: keyframe.frame + details.keyframeDisplayOffset,
+                })), nodePathInfo: selection.nodePathInfo }), jsx_runtime_1.jsxs("div", { style: styles_1.detailsContainer, children: [
+                    jsx_runtime_1.jsx(common_1.InspectorDetailRow, { label: "Frame", children: jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: draftFrame, status: "ok", onValueChange: onFrameChange, onValueChangeEnd: onFrameChangeEnd, onTextChange: () => undefined, min: 0, max: Math.max(0, videoConfig.durationInFrames - 1), step: 1, formatter: (value) => String(Math.round(Number(value))), rightAlign: true, small: true }) }), jsx_runtime_1.jsxs("div", { style: styles_1.keyframeEditorRow, children: [
                             jsx_runtime_1.jsx("div", { style: styles_1.keyframeEditorLabel, children: details.fieldLabel }), jsx_runtime_1.jsx("div", { style: styles_1.keyframeEditorValue, children: details.type === 'sequence' ? (jsx_runtime_1.jsx(TimelineSequencePropItem_1.TimelineSequenceKeyframedValue, { field: details.field, fileName: details.fileName, nodePath: details.nodePath, schema: details.schema, propStatus: details.propStatus, sourceFrame: details.sourceFrame })) : (jsx_runtime_1.jsx(TimelineEffectPropItem_1.TimelineEffectPropValue, { field: details.field, nodePath: details.nodePath, validatedLocation: details.validatedLocation, sourceFrame: details.sourceFrame })) })
-                        ] })
-                ] })
+                        ] }), jsx_runtime_1.jsx(common_1.InspectorInlineAction, { disabled: removeDisabled, onClick: onRemoveKeyframe, renderIcon: (color) => jsx_runtime_1.jsx(TrashIcon, { color: color }), children: "Remove keyframe" })] })
         ] }));
 };
 exports.KeyframeInspector = KeyframeInspector;

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

@@ -0,0 +1,17 @@
+import React from 'react';
+import type { CodePosition } from '../../error-overlay/react-overlay/utils/get-source-map';
+import type { TrackWithHash } from '../../helpers/get-timeline-sequence-sort-key';
+type SequenceInspectorSourceLocation = {
+    readonly canOpenInEditor: boolean;
+    readonly openFileLocation: () => void;
+    readonly validatedLocation: CodePosition | null;
+};
+export declare const useSequenceInspectorSourceLocation: (sequence: import("remotion").TSequence) => SequenceInspectorSourceLocation;
+export declare const SequenceInspectorHeader: React.FC<{
+    readonly sourceLocation: SequenceInspectorSourceLocation;
+    readonly track: TrackWithHash;
+}>;
+export declare const SequenceInspectorHeaderWithDivider: React.FC<{
+    readonly track: TrackWithHash;
+}>;
+export {};

package/dist/components/InspectorPanel/SequenceInspectorHeader.js

@@ -0,0 +1,93 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SequenceInspectorHeaderWithDivider = exports.SequenceInspectorHeader = exports.useSequenceInspectorSourceLocation = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const remotion_1 = require("remotion");
+const InspectorSourceLocation_1 = require("../InspectorSourceLocation");
+const use_open_sequence_in_editor_1 = require("../Timeline/use-open-sequence-in-editor");
+const styles_1 = require("./styles");
+const useSequenceInspectorSourceLocation = (sequence) => {
+    const { canOpenInEditor, openInEditor, originalLocation } = (0, use_open_sequence_in_editor_1.useOpenSequenceInEditor)(sequence);
+    const validatedLocation = (0, react_1.useMemo)(() => {
+        var _a;
+        if (!originalLocation ||
+            !originalLocation.source ||
+            !originalLocation.line) {
+            return null;
+        }
+        return {
+            source: originalLocation.source,
+            line: originalLocation.line,
+            column: (_a = originalLocation.column) !== null && _a !== void 0 ? _a : 0,
+        };
+    }, [originalLocation]);
+    const openFileLocation = (0, react_1.useCallback)(() => {
+        if (!canOpenInEditor) {
+            return;
+        }
+        openInEditor();
+    }, [canOpenInEditor, openInEditor]);
+    return {
+        canOpenInEditor,
+        openFileLocation,
+        validatedLocation,
+    };
+};
+exports.useSequenceInspectorSourceLocation = useSequenceInspectorSourceLocation;
+const useSequenceDisplayName = (track) => {
+    var _a, _b;
+    var _c;
+    const { propStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesContext);
+    const nodePath = (_c = (_a = track.nodePathInfo) === null || _a === void 0 ? void 0 : _a.sequenceSubscriptionKey) !== null && _c !== void 0 ? _c : null;
+    return (0, react_1.useMemo)(() => {
+        var _a;
+        const propStatusesForOverride = nodePath
+            ? remotion_1.Internals.getPropStatusesCtx(propStatuses, nodePath)
+            : undefined;
+        const codeNameStatus = propStatusesForOverride === null || propStatusesForOverride === void 0 ? void 0 : propStatusesForOverride.name;
+        const fallbackDisplayName = ((_a = track.sequence.controls) === null || _a === void 0 ? void 0 : _a.componentName) || '<Sequence>';
+        if ((codeNameStatus === null || codeNameStatus === void 0 ? void 0 : codeNameStatus.status) === 'static' &&
+            typeof codeNameStatus.codeValue === 'string') {
+            return codeNameStatus.codeValue;
+        }
+        if ((codeNameStatus === null || codeNameStatus === void 0 ? void 0 : codeNameStatus.status) === 'static') {
+            return fallbackDisplayName;
+        }
+        return track.sequence.displayName || fallbackDisplayName;
+    }, [
+        nodePath,
+        propStatuses,
+        (_b = track.sequence.controls) === null || _b === void 0 ? void 0 : _b.componentName,
+        track.sequence.displayName,
+    ]);
+};
+const SequenceInspectorHeader = ({ sourceLocation, track }) => {
+    var _a;
+    const sequenceDisplayName = useSequenceDisplayName(track);
+    const { documentationLink } = track.sequence;
+    const openDocumentationLink = (0, react_1.useCallback)(() => {
+        if (!documentationLink) {
+            return;
+        }
+        window.open(documentationLink, '_blank', 'noopener,noreferrer');
+    }, [documentationLink]);
+    const subtitleStyle = (0, react_1.useMemo)(() => {
+        return {
+            ...styles_1.sequenceHeaderSubtitle,
+            cursor: documentationLink ? 'pointer' : 'default',
+        };
+    }, [documentationLink]);
+    const componentName = (_a = track.sequence.controls) === null || _a === void 0 ? void 0 : _a.componentName;
+    return (jsx_runtime_1.jsxs("div", { style: styles_1.sequenceHeader, children: [
+            jsx_runtime_1.jsx("div", { style: styles_1.sequenceHeaderTitle, children: sequenceDisplayName }), documentationLink ? (jsx_runtime_1.jsx("button", { type: "button", style: subtitleStyle, title: "Open component docs", onClick: openDocumentationLink, children: componentName })) : (jsx_runtime_1.jsx("div", { style: subtitleStyle, children: componentName })), jsx_runtime_1.jsx(InspectorSourceLocation_1.InspectorSourceLocation, { location: sourceLocation.validatedLocation, canOpen: sourceLocation.canOpenInEditor, onOpen: sourceLocation.openFileLocation })
+        ] }));
+};
+exports.SequenceInspectorHeader = SequenceInspectorHeader;
+const SequenceInspectorHeaderWithDivider = ({ track }) => {
+    const sourceLocation = (0, exports.useSequenceInspectorSourceLocation)(track.sequence);
+    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+            jsx_runtime_1.jsx(exports.SequenceInspectorHeader, { sourceLocation: sourceLocation, track: track }), jsx_runtime_1.jsx("div", { style: styles_1.sequenceHeaderDivider })
+        ] }));
+};
+exports.SequenceInspectorHeaderWithDivider = SequenceInspectorHeaderWithDivider;

package/dist/components/InspectorPanel/SequenceSelectionInspector.js

@@ -3,71 +3,19 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.SequenceSelectionInspector = 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 InspectorSequenceSection_1 = require("../InspectorSequenceSection");
-const InspectorSourceLocation_1 = require("../InspectorSourceLocation");
 const is_menu_item_1 = require("../Menu/is-menu-item");
 const TimelineSelection_1 = require("../Timeline/TimelineSelection");
-const use_open_sequence_in_editor_1 = require("../Timeline/use-open-sequence-in-editor");
 const common_1 = require("./common");
+const SequenceInspectorHeader_1 = require("./SequenceInspectorHeader");
 const styles_1 = require("./styles");
 const use_track_for_selection_1 = require("./use-track-for-selection");
-const useSequenceDisplayName = (track) => {
-    var _a;
-    var _b;
-    const { propStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesContext);
-    const nodePath = (_b = (_a = track.nodePathInfo) === null || _a === void 0 ? void 0 : _a.sequenceSubscriptionKey) !== null && _b !== void 0 ? _b : null;
-    return (0, react_1.useMemo)(() => {
-        const propStatusesForOverride = nodePath
-            ? remotion_1.Internals.getPropStatusesCtx(propStatuses, nodePath)
-            : undefined;
-        const codeNameStatus = propStatusesForOverride === null || propStatusesForOverride === void 0 ? void 0 : propStatusesForOverride.name;
-        const displayName = codeNameStatus &&
-            codeNameStatus.status === 'static' &&
-            typeof codeNameStatus.codeValue === 'string'
-            ? codeNameStatus.codeValue
-            : track.sequence.displayName;
-        return displayName || '<Sequence>';
-    }, [nodePath, propStatuses, track.sequence.displayName]);
-};
 const SequenceExpandedInspector = ({ track }) => {
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const { selectedItems, selectItems } = (0, TimelineSelection_1.useTimelineSelection)();
-    const { canOpenInEditor, openInEditor, originalLocation } = (0, use_open_sequence_in_editor_1.useOpenSequenceInEditor)(track.sequence);
-    const sequenceDisplayName = useSequenceDisplayName(track);
-    const { documentationLink } = track.sequence;
-    const validatedLocation = (0, react_1.useMemo)(() => {
-        var _a;
-        if (!originalLocation ||
-            !originalLocation.source ||
-            !originalLocation.line) {
-            return null;
-        }
-        return {
-            source: originalLocation.source,
-            line: originalLocation.line,
-            column: (_a = originalLocation.column) !== null && _a !== void 0 ? _a : 0,
-        };
-    }, [originalLocation]);
-    const openFileLocation = (0, react_1.useCallback)(() => {
-        if (!canOpenInEditor) {
-            return;
-        }
-        openInEditor();
-    }, [canOpenInEditor, openInEditor]);
-    const openDocumentationLink = (0, react_1.useCallback)(() => {
-        if (!documentationLink) {
-            return;
-        }
-        window.open(documentationLink, '_blank', 'noopener,noreferrer');
-    }, [documentationLink]);
-    const subtitleStyle = (0, react_1.useMemo)(() => {
-        return {
-            ...styles_1.sequenceHeaderSubtitle,
-            cursor: documentationLink ? 'pointer' : 'default',
-        };
-    }, [documentationLink]);
+    const sourceLocation = (0, SequenceInspectorHeader_1.useSequenceInspectorSourceLocation)(track.sequence);
+    const { validatedLocation } = sourceLocation;
     const sequenceSelection = (0, react_1.useMemo)(() => {
         if (!track.nodePathInfo) {
             return null;
@@ -103,9 +51,7 @@ const SequenceExpandedInspector = ({ track }) => {
         return jsx_runtime_1.jsx(common_1.InspectorMessage, { children: "Sequence inspector unavailable" });
     }
     return (jsx_runtime_1.jsxs("div", { style: styles_1.selectedContainer, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, onPointerDown: selectSequenceOnInspectorPointerDown, children: [
-            jsx_runtime_1.jsxs("div", { style: styles_1.sequenceHeader, children: [
-                    jsx_runtime_1.jsx("div", { style: styles_1.sequenceHeaderTitle, children: sequenceDisplayName }), documentationLink ? (jsx_runtime_1.jsx("button", { type: "button", style: subtitleStyle, title: "Open component docs", onClick: openDocumentationLink, children: track.sequence.controls.componentName })) : (jsx_runtime_1.jsx("div", { style: subtitleStyle, children: track.sequence.controls.componentName })), jsx_runtime_1.jsx(InspectorSourceLocation_1.InspectorSourceLocation, { location: validatedLocation, canOpen: canOpenInEditor, onOpen: openFileLocation })
-                ] }), jsx_runtime_1.jsx(InspectorSequenceSection_1.InspectorSequenceSection, { sequence: track.sequence, validatedLocation: validatedLocation, nodePathInfo: track.nodePathInfo, keyframeDisplayOffset: track.keyframeDisplayOffset, renderSectionHeader: (children) => (jsx_runtime_1.jsx(common_1.InspectorSectionHeader, { children: children })) })] }));
+            jsx_runtime_1.jsx(SequenceInspectorHeader_1.SequenceInspectorHeader, { sourceLocation: sourceLocation, track: track }), jsx_runtime_1.jsx(InspectorSequenceSection_1.InspectorSequenceSection, { sequence: track.sequence, validatedLocation: validatedLocation, nodePathInfo: track.nodePathInfo, keyframeDisplayOffset: track.keyframeDisplayOffset, renderSectionHeader: (children) => (jsx_runtime_1.jsx(common_1.InspectorSectionHeader, { children: children })) })] }));
 };
 const SequenceSelectionInspector = ({ selection }) => {
     const track = (0, use_track_for_selection_1.useTrackForSelection)(selection);

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

@@ -3,6 +3,12 @@ import type { RenderModalWarning } from '../RenderModal/DataEditor';
 export declare const InspectorSectionHeader: React.FC<{
     readonly children: React.ReactNode;
 }>;
+export declare const InspectorBackHeaderWithDivider: React.FC<{
+    readonly children: React.ReactNode;
+    readonly disabled: boolean;
+    readonly onClick: React.MouseEventHandler<HTMLButtonElement>;
+    readonly title: string;
+}>;
 export declare const InspectorMessage: React.FC<{
     readonly children: React.ReactNode;
 }>;
@@ -10,6 +16,12 @@ export declare const InspectorDetailRow: React.FC<{
     readonly label: string;
     readonly children: React.ReactNode;
 }>;
+export declare const InspectorInlineAction: React.FC<{
+    readonly children: React.ReactNode;
+    readonly disabled: boolean;
+    readonly onClick: React.MouseEventHandler<HTMLButtonElement>;
+    readonly renderIcon: (color: string) => React.ReactNode;
+}>;
 export declare const InspectorDefaultPropsWarnings: React.FC<{
     readonly warnings: RenderModalWarning[];
 }>;

package/dist/components/InspectorPanel/common.js

@@ -1,17 +1,94 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.InspectorDefaultPropsWarnings = exports.InspectorDetailRow = exports.InspectorMessage = exports.InspectorSectionHeader = void 0;
+exports.InspectorDefaultPropsWarnings = exports.InspectorInlineAction = exports.InspectorDetailRow = exports.InspectorMessage = exports.InspectorBackHeaderWithDivider = exports.InspectorSectionHeader = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importDefault(require("react"));
+const colors_1 = require("../../helpers/colors");
+const InlineAction_1 = require("../InlineAction");
 const ValidationMessage_1 = require("../NewComposition/ValidationMessage");
 const styles_1 = require("./styles");
 const InspectorSectionHeader = ({ children }) => jsx_runtime_1.jsx("div", { style: styles_1.sectionHeader, children: children });
 exports.InspectorSectionHeader = InspectorSectionHeader;
+const backIcon = {
+    alignItems: 'center',
+    display: 'flex',
+    height: 12,
+    justifyContent: 'center',
+    width: 12,
+};
+const BackChevron = ({ color }) => {
+    return (jsx_runtime_1.jsx("svg", { viewBox: "0 0 8 12", style: backIcon, children: jsx_runtime_1.jsx("path", { d: "M6 1L2 6L6 11", fill: "none", stroke: color, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5" }) }));
+};
+const InspectorBackHeaderWithDivider = ({ children, disabled, onClick, title }) => {
+    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+            jsx_runtime_1.jsx(exports.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(InlineAction_1.InlineAction, { disabled: disabled, onClick: onClick, title: title, renderAction: (color) => jsx_runtime_1.jsx(BackChevron, { color: color }) }), children] }) }) }), jsx_runtime_1.jsx("div", { style: styles_1.inspectorSectionDivider })
+        ] }));
+};
+exports.InspectorBackHeaderWithDivider = InspectorBackHeaderWithDivider;
 const InspectorMessage = ({ children }) => jsx_runtime_1.jsx("div", { style: styles_1.centeredMessage, children: children });
 exports.InspectorMessage = InspectorMessage;
 const InspectorDetailRow = ({ label, children }) => (jsx_runtime_1.jsxs("div", { style: styles_1.detailRow, children: [
         jsx_runtime_1.jsx("div", { style: styles_1.detailLabel, children: label }), jsx_runtime_1.jsx("div", { style: styles_1.detailValue, children: children })
     ] }));
 exports.InspectorDetailRow = InspectorDetailRow;
+const inlineLabelButton = {
+    alignItems: 'center',
+    appearance: 'none',
+    backgroundColor: 'transparent',
+    border: 'none',
+    color: colors_1.LIGHT_TEXT,
+    cursor: 'default',
+    display: 'flex',
+    fontFamily: 'sans-serif',
+    fontSize: 13,
+    gap: 8,
+    lineHeight: '18px',
+    margin: 0,
+    padding: '10px 0 0',
+};
+const inlineLabelButtonDisabled = {
+    ...inlineLabelButton,
+    opacity: 0.35,
+};
+const inlineLabelText = {
+    color: colors_1.LIGHT_TEXT,
+    fontFamily: 'sans-serif',
+    fontSize: 13,
+    lineHeight: '18px',
+};
+const inlineLabelIcon = {
+    alignItems: 'center',
+    display: 'flex',
+    flexShrink: 0,
+    height: 13,
+    justifyContent: 'center',
+    width: 13,
+};
+const InspectorInlineAction = ({ children, disabled, onClick, renderIcon }) => {
+    const [hovered, setHovered] = react_1.default.useState(false);
+    const color = hovered && !disabled ? 'white' : colors_1.LIGHT_TEXT;
+    const buttonStyle = react_1.default.useMemo(() => ({
+        ...(disabled ? inlineLabelButtonDisabled : inlineLabelButton),
+        color,
+    }), [color, disabled]);
+    const textStyle = react_1.default.useMemo(() => ({
+        ...inlineLabelText,
+        color,
+    }), [color]);
+    const onPointerEnter = react_1.default.useCallback(() => {
+        setHovered(true);
+    }, []);
+    const onPointerLeave = react_1.default.useCallback(() => {
+        setHovered(false);
+    }, []);
+    return (jsx_runtime_1.jsxs("button", { type: "button", disabled: disabled, style: buttonStyle, onClick: onClick, onPointerEnter: disabled ? undefined : onPointerEnter, onPointerLeave: onPointerLeave, children: [
+            jsx_runtime_1.jsx("span", { style: inlineLabelIcon, children: renderIcon(color) }), jsx_runtime_1.jsx("span", { style: textStyle, children: children })
+        ] }));
+};
+exports.InspectorInlineAction = InspectorInlineAction;
 const InspectorDefaultPropsWarnings = ({ warnings }) => {
     return (jsx_runtime_1.jsx("div", { style: styles_1.defaultPropsWarningMessages, children: warnings.map((warning) => (jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { message: warning.message, align: "flex-start", type: "warning", size: "compact", action: warning.resolveLink ? (jsx_runtime_1.jsx("a", { href: warning.resolveLink, target: "_blank", rel: "noopener noreferrer", style: styles_1.resolveLinkStyle, children: "Resolve" })) : null }, warning.id))) }));
 };

package/dist/components/InspectorPanel/easing-inspector-selection.d.ts

@@ -0,0 +1,14 @@
+import type { CanUpdateSequencePropStatusKeyframed } from 'remotion';
+import type { SequenceNodePathInfo } from '../../helpers/get-timeline-sequence-sort-key';
+export declare const getEasingSelectionFromCurrentKeyframes: ({ keyframeDisplayOffset, nodePathInfo, propStatus, segmentIndex, }: {
+    readonly keyframeDisplayOffset: number;
+    readonly nodePathInfo: SequenceNodePathInfo;
+    readonly propStatus: CanUpdateSequencePropStatusKeyframed;
+    readonly segmentIndex: number;
+}) => {
+    readonly type: "easing";
+    readonly nodePathInfo: SequenceNodePathInfo;
+    readonly fromFrame: number;
+    readonly toFrame: number;
+    readonly segmentIndex: number;
+} | null;

package/dist/components/InspectorPanel/easing-inspector-selection.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getEasingSelectionFromCurrentKeyframes = void 0;
+const getEasingSelectionFromCurrentKeyframes = ({ keyframeDisplayOffset, nodePathInfo, propStatus, segmentIndex, }) => {
+    const fromKeyframe = propStatus.keyframes[segmentIndex];
+    const toKeyframe = propStatus.keyframes[segmentIndex + 1];
+    if (!fromKeyframe || !toKeyframe) {
+        return null;
+    }
+    return {
+        type: 'easing',
+        nodePathInfo,
+        fromFrame: fromKeyframe.frame + keyframeDisplayOffset,
+        toFrame: toKeyframe.frame + keyframeDisplayOffset,
+        segmentIndex,
+    };
+};
+exports.getEasingSelectionFromCurrentKeyframes = getEasingSelectionFromCurrentKeyframes;

package/dist/components/InspectorPanel/keyframe-easing-navigator-items.d.ts

@@ -0,0 +1,24 @@
+import type { SequenceNodePathInfo } from '../../helpers/get-timeline-sequence-sort-key';
+import type { TimelineSelection } from '../Timeline/TimelineSelection';
+export type KeyframeNavigatorItem = {
+    readonly selection: Extract<TimelineSelection, {
+        type: 'keyframe';
+    }>;
+    readonly type: 'keyframe';
+};
+export type EasingNavigatorItem = {
+    readonly selection: Extract<TimelineSelection, {
+        type: 'easing';
+    }>;
+    readonly type: 'easing';
+};
+export type NavigatorItem = KeyframeNavigatorItem | EasingNavigatorItem;
+export type NavigatorKeyframe = {
+    readonly frame: number;
+};
+export declare const getKeyframeEasingNavigatorItems: ({ includeEasings, keyframes, nodePathInfo, }: {
+    readonly includeEasings: boolean;
+    readonly keyframes: readonly NavigatorKeyframe[];
+    readonly nodePathInfo: SequenceNodePathInfo;
+}) => NavigatorItem[];
+export declare const getNavigatorItemPlayheadFrame: (item: NavigatorItem) => number;