@remotion/studio 4.0.479 → 4.0.481

package/dist/components/Timeline/TimelineSequenceItem.js

@@ -41,6 +41,7 @@ const client_id_1 = require("../../helpers/client-id");
 const format_file_location_1 = require("../../helpers/format-file-location");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
 const use_keybinding_1 = require("../../helpers/use-keybinding");
+const modals_1 = require("../../state/modals");
 const call_api_1 = require("../call-api");
 const ConfirmationDialog_1 = require("../ConfirmationDialog");
 const ContextMenu_1 = require("../ContextMenu");
@@ -64,6 +65,7 @@ const TimelineSelection_1 = require("./TimelineSelection");
 const TimelineSequenceName_1 = require("./TimelineSequenceName");
 const use_open_sequence_in_editor_1 = require("./use-open-sequence-in-editor");
 const use_sequence_freeze_frame_menu_item_1 = require("./use-sequence-freeze-frame-menu-item");
+const use_timeline_expanded_tree_1 = require("./use-timeline-expanded-tree");
 const labelContainerStyle = {
     alignItems: 'center',
     alignSelf: 'stretch',
@@ -78,6 +80,16 @@ const effectDropHighlight = {
 };
 const SEQUENCE_REORDER_MIME_TYPE = 'application/remotion-sequence-reorder';
 let currentSequenceDrag = null;
+const TimelineSequenceExpandArrow = ({ disabled, isExpanded, nodePathInfo, onToggleExpand, sequence }) => {
+    const { filteredTree } = (0, use_timeline_expanded_tree_1.useTimelineExpandedTree)({
+        sequence,
+        nodePathInfo,
+    });
+    if (filteredTree.length === 0) {
+        return jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowSpacer, {});
+    }
+    return (jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowButton, { isExpanded: isExpanded, onClick: onToggleExpand, label: "track properties", disabled: disabled }));
+};
 const sequenceReorderWrapper = {
     position: 'relative',
 };
@@ -148,9 +160,10 @@ const TimelineSequenceItem = ({ nestedDepth, sequence, nodePathInfo, keyframeDis
     const { toggleTrack } = (0, react_1.useContext)(ExpandedTracksProvider_1.ExpandedTracksSetterContext);
     const { propStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesContext);
     const { setPropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
+    const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
     const { isHighestContext } = (0, use_keybinding_1.useKeybinding)();
     const selectAsset = (0, use_select_asset_1.useSelectAsset)();
-    const { onSelect, selectable, selected } = (0, TimelineSelection_1.useTimelineRowSelection)(nodePathInfo);
+    const { onSelect, selectable, selected, selectionItem } = (0, TimelineSelection_1.useTimelineRowSelection)(nodePathInfo);
     const { selectedItems } = (0, TimelineSelection_1.useTimelineSelection)();
     const containsSelection = (0, TimelineSelection_1.useTimelineRowContainsSelection)(nodePathInfo);
     const [effectDropHovered, setEffectDropHovered] = (0, react_1.useState)(false);
@@ -629,6 +642,29 @@ const TimelineSequenceItem = ({ nestedDepth, sequence, nodePathInfo, keyframeDis
         timelinePosition,
         validatedSource: (_f = validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source) !== null && _f !== void 0 ? _f : null,
     });
+    const canAddEffect = (nodePathInfo === null || nodePathInfo === void 0 ? void 0 : nodePathInfo.supportsEffects) === true &&
+        previewServerState.type === 'connected' &&
+        Boolean(validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source);
+    const onAddEffect = (0, react_1.useCallback)(() => {
+        if (!canAddEffect ||
+            previewServerState.type !== 'connected' ||
+            !nodePath ||
+            !(validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source)) {
+            return;
+        }
+        setSelectedModal({
+            type: 'add-effect',
+            clientId: previewServerState.clientId,
+            fileName: validatedLocation.source,
+            nodePath,
+        });
+    }, [
+        canAddEffect,
+        nodePath,
+        previewServerState,
+        setSelectedModal,
+        validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source,
+    ]);
     const contextMenuValues = (0, react_1.useMemo)(() => {
         if (!previewConnected) {
             return [];
@@ -649,6 +685,26 @@ const TimelineSequenceItem = ({ nestedDepth, sequence, nodePathInfo, keyframeDis
             selectAsset,
             sequence,
             sourceActions: [
+                ...((nodePathInfo === null || nodePathInfo === void 0 ? void 0 : nodePathInfo.supportsEffects)
+                    ? [
+                        {
+                            type: 'item',
+                            id: 'add-effect',
+                            keyHint: null,
+                            label: 'Add effect...',
+                            leftItem: null,
+                            disabled: !canAddEffect,
+                            onClick: onAddEffect,
+                            quickSwitcherLabel: null,
+                            subMenu: null,
+                            value: 'add-effect',
+                        },
+                        {
+                            type: 'divider',
+                            id: 'add-effect-divider',
+                        },
+                    ]
+                    : []),
                 {
                     type: 'item',
                     id: 'rename-sequence',
@@ -668,6 +724,7 @@ const TimelineSequenceItem = ({ nestedDepth, sequence, nodePathInfo, keyframeDis
         });
     }, [
         assetLinkInfo,
+        canAddEffect,
         canOpenInEditor,
         canRenameThisSequence,
         deleteDisabled,
@@ -675,6 +732,8 @@ const TimelineSequenceItem = ({ nestedDepth, sequence, nodePathInfo, keyframeDis
         duplicateDisabled,
         fileLocation,
         freezeFrameMenuItem,
+        nodePathInfo === null || nodePathInfo === void 0 ? void 0 : nodePathInfo.supportsEffects,
+        onAddEffect,
         onDeleteSequenceFromSource,
         onDisableSequenceInteractivity,
         onDuplicateSequenceFromSource,
@@ -743,7 +802,7 @@ const TimelineSequenceItem = ({ nestedDepth, sequence, nodePathInfo, keyframeDis
             clientId: previewServerState.clientId,
         });
     }, [canDropEffect, nodePath, previewServerState, validatedLocation]);
-    const trackRow = (jsx_runtime_1.jsx(TimelineRowChrome_1.TimelineRowChrome, { depth: nestedDepth, eye: canToggleVisibility ? (jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEye, { type: sequence.type === 'audio' ? 'speaker' : 'eye', hidden: isItemHidden, onInvoked: onToggleVisibility })) : (jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEyeSpacer, {})), arrow: hasExpandableContent ? (jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowButton, { isExpanded: isExpanded, onClick: onToggleExpand, label: "track properties", disabled: !previewConnected || nodePathInfo === null })) : (jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowSpacer, {})), style: rowStyle, selected: selected, selectable: selectable, onSelect: onSelect, showSelectedBackground: true, containsSelection: containsSelection, outerHeight: outerHeight, onDragLeave: canDropEffect ? onEffectDragLeave : undefined, onDragOver: canDropEffect ? onEffectDragOver : undefined, onDrop: canDropEffect ? onEffectDrop : undefined, onDoubleClick: canOpenInEditor ? onShowInEditorDoubleClick : undefined, children: jsx_runtime_1.jsxs("div", { style: labelContainerStyle, children: [
+    const trackRow = (jsx_runtime_1.jsx(TimelineRowChrome_1.TimelineRowChrome, { depth: nestedDepth, eye: canToggleVisibility ? (jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEye, { type: sequence.type === 'audio' ? 'speaker' : 'eye', hidden: isItemHidden, onInvoked: onToggleVisibility })) : (jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEyeSpacer, {})), arrow: hasExpandableContent && nodePathInfo !== null ? (jsx_runtime_1.jsx(TimelineSequenceExpandArrow, { disabled: !previewConnected, isExpanded: isExpanded, nodePathInfo: nodePathInfo, onToggleExpand: onToggleExpand, sequence: sequence })) : (jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowSpacer, {})), style: rowStyle, selected: selected, selectable: selectable, selectionItem: selectionItem, onSelect: onSelect, showSelectedBackground: true, containsSelection: containsSelection, outerHeight: outerHeight, onDragLeave: canDropEffect ? onEffectDragLeave : undefined, onDragOver: canDropEffect ? onEffectDragOver : undefined, onDrop: canDropEffect ? onEffectDrop : undefined, onDoubleClick: canOpenInEditor ? onShowInEditorDoubleClick : undefined, children: jsx_runtime_1.jsxs("div", { style: labelContainerStyle, children: [
                 jsx_runtime_1.jsx(TimelineSequenceName_1.TimelineSequenceName, { displayName: displayName, selected: selected, containsSelection: containsSelection, editing: isRenaming, onCancelEditing: onCancelRenaming, onSaveName: onSaveName }), mediaSrc ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                         jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }),
                         " ",

package/dist/components/Timeline/TimelineSequencePropItem.js

@@ -306,7 +306,7 @@ const TimelineSequencePropItem = ({ field, validatedLocation, rowDepth, nodePath
     if (propStatus === null) {
         return null;
     }
-    const row = (jsx_runtime_1.jsxs(TimelineRowChrome_1.TimelineRowChrome, { depth: rowDepth, eye: jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEyeSpacer, {}), keyframeControls: keyframeControls, arrow: jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowSpacer, {}), style: style, selected: selection.selected, selectable: selection.selectable, onSelect: selection.onSelect, showSelectedBackground: true, containsSelection: false, outerHeight: null, children: [
+    const row = (jsx_runtime_1.jsxs(TimelineRowChrome_1.TimelineRowChrome, { depth: rowDepth, eye: jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEyeSpacer, {}), keyframeControls: keyframeControls, arrow: jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowSpacer, {}), style: style, selected: selection.selected, selectable: selection.selectable, selectionItem: selection.selectionItem, onSelect: selection.onSelect, showSelectedBackground: true, containsSelection: false, outerHeight: null, children: [
             jsx_runtime_1.jsx(TimelineFieldLabel_1.TimelineFieldLabel, { rowDepth: rowDepth, selected: selection.selected, label: (_b = field.description) !== null && _b !== void 0 ? _b : field.key }), isKeyframedStatus(propStatus) ? (jsx_runtime_1.jsx("div", { style: timeline_field_row_layout_1.timelineFieldValueColumnStyle, children: jsx_runtime_1.jsx(exports.TimelineSequenceKeyframedValue, { field: field, fileName: validatedLocation.source, nodePath: nodePath, schema: schema, propStatus: propStatus, sourceFrame: sourceFrame }) })) : propStatus.status === 'static' ? (jsx_runtime_1.jsx("div", { style: timeline_field_row_layout_1.timelineFieldValueColumnStyle, children: jsx_runtime_1.jsx(Value, { field: field, nodePath: nodePath, validatedLocation: validatedLocation, schema: schema, propStatus: propStatus }) })) : (jsx_runtime_1.jsx("div", { style: timeline_field_row_layout_1.timelineFieldValueColumnStyle, children: jsx_runtime_1.jsx(TimelineSchemaField_1.TimelineNonEditableStatus, { propStatus: propStatus }) }))] }));
     return (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { values: contextMenuValues, onOpen: selection.selectable ? selection.onSelect : null, children: row }));
 };

package/dist/components/Timeline/TimelineSequenceRightEdgeDragHandle.js

@@ -92,12 +92,12 @@ const getTimelineSequenceFromDragChanges = ({ targets, deltaFrames, }) => {
 };
 exports.getTimelineSequenceFromDragChanges = getTimelineSequenceFromDragChanges;
 const findSequenceTrack = ({ tracks, nodePathInfo, }) => {
-    const key = (0, studio_shared_1.stringifySequenceSubscriptionKey)(nodePathInfo.sequenceSubscriptionKey);
+    const key = (0, studio_shared_1.stringifySequenceExpandedRowKey)(nodePathInfo.sequenceSubscriptionKey);
     return tracks.find((candidate) => {
         if (candidate.nodePathInfo === null) {
             return false;
         }
-        return ((0, studio_shared_1.stringifySequenceSubscriptionKey)(candidate.nodePathInfo.sequenceSubscriptionKey) === key && candidate.nodePathInfo.index === nodePathInfo.index);
+        return ((0, studio_shared_1.stringifySequenceExpandedRowKey)(candidate.nodePathInfo.sequenceSubscriptionKey) === key && candidate.nodePathInfo.index === nodePathInfo.index);
     });
 };
 const getTimelineSequenceDurationDragTargets = ({ draggedNodePathInfo, selectedItems, sequences, overrideIdsToNodePaths, propStatuses, }) => {
@@ -120,11 +120,12 @@ const getTimelineSequenceDurationDragTargets = ({ draggedNodePathInfo, selectedI
             ? sequences.find((sequence) => sequence.id === track.sequence.id)
             : null;
         if (!track ||
+            !track.nodePathInfo ||
             !originalSequence ||
             !isDurationDraggableSequence(originalSequence)) {
             return null;
         }
-        const nodePath = nodePathInfo.sequenceSubscriptionKey;
+        const nodePath = track.nodePathInfo.sequenceSubscriptionKey;
         if (!canUpdateDurationInFrames({ propStatuses, nodePath })) {
             return null;
         }
@@ -160,11 +161,12 @@ const getTimelineSequenceFromDragTargets = ({ draggedNodePathInfo, selectedItems
             ? sequences.find((sequence) => sequence.id === track.sequence.id)
             : null;
         if (!track ||
+            !track.nodePathInfo ||
             !originalSequence ||
             !isFromDraggableSequence(originalSequence)) {
             return null;
         }
-        const nodePath = nodePathInfo.sequenceSubscriptionKey;
+        const nodePath = track.nodePathInfo.sequenceSubscriptionKey;
         if (!canUpdateFrom({ propStatuses, nodePath })) {
             return null;
         }

package/dist/components/Timeline/find-track-for-node-path-info.js

@@ -6,8 +6,8 @@ const calculate_timeline_1 = require("../../helpers/calculate-timeline");
 const findTrackForNodePathInfo = ({ sequences, overrideIdsToNodePaths, nodePathInfo, }) => {
     const tracks = (0, calculate_timeline_1.calculateTimeline)({ sequences, overrideIdsToNodePaths });
     return tracks.find((candidate) => candidate.nodePathInfo !== null &&
-        (0, studio_shared_1.stringifySequenceSubscriptionKey)(candidate.nodePathInfo.sequenceSubscriptionKey) ===
-            (0, studio_shared_1.stringifySequenceSubscriptionKey)(nodePathInfo.sequenceSubscriptionKey) &&
+        (0, studio_shared_1.stringifySequenceExpandedRowKey)(candidate.nodePathInfo.sequenceSubscriptionKey) ===
+            (0, studio_shared_1.stringifySequenceExpandedRowKey)(nodePathInfo.sequenceSubscriptionKey) &&
         candidate.nodePathInfo.index === nodePathInfo.index);
 };
 exports.findTrackForNodePathInfo = findTrackForNodePathInfo;

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

@@ -12,3 +12,10 @@ export declare const getNodeKeyframes: ({ node, nodePath, propStatuses, keyframe
     frame: number;
     value: unknown;
 }[];
+export declare const getNodeHasKeyframes: ({ node, nodePath, propStatuses, getDragOverrides, getEffectDragOverrides, }: {
+    node: TimelineTreeNode;
+    nodePath: SequencePropsSubscriptionKey;
+    propStatuses: PropStatuses;
+    getDragOverrides: GetDragOverrides;
+    getEffectDragOverrides: GetEffectDragOverrides;
+}) => boolean;

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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getNodeKeyframes = void 0;
+exports.getNodeHasKeyframes = exports.getNodeKeyframes = void 0;
 const remotion_1 = require("remotion");
 const get_timeline_keyframes_1 = require("./get-timeline-keyframes");
 const hasOverride = (overrides, key) => Object.prototype.hasOwnProperty.call(overrides, key);
@@ -54,3 +54,28 @@ const getNodeKeyframes = ({ node, nodePath, propStatuses, keyframeDisplayOffset,
     });
 };
 exports.getNodeKeyframes = getNodeKeyframes;
+const getNodeHasKeyframes = ({ node, nodePath, propStatuses, getDragOverrides, getEffectDragOverrides, }) => {
+    var _a, _b, _c, _d, _e, _f;
+    if (node.kind !== 'field' || node.field === null) {
+        return false;
+    }
+    if (node.field.kind === 'sequence-field') {
+        const dragOverrides = getDragOverrides(nodePath);
+        if (((_a = dragOverrides[node.field.key]) === null || _a === void 0 ? void 0 : _a.type) === 'keyframed') {
+            return true;
+        }
+        return (((_c = (_b = remotion_1.Internals.getPropStatusesCtx(propStatuses, nodePath)) === null || _b === void 0 ? void 0 : _b[node.field.key]) === null || _c === void 0 ? void 0 : _c.status) === 'keyframed');
+    }
+    const effectDragOverrides = getEffectDragOverrides(nodePath, node.field.effectIndex);
+    if (((_d = effectDragOverrides[node.field.key]) === null || _d === void 0 ? void 0 : _d.type) === 'keyframed') {
+        return true;
+    }
+    const effectStatus = remotion_1.Internals.getEffectPropStatusesCtx({
+        propStatuses,
+        nodePath,
+        effectIndex: node.field.effectIndex,
+    });
+    return (effectStatus.type === 'can-update-effect' &&
+        ((_f = (_e = effectStatus.props) === null || _e === void 0 ? void 0 : _e[node.field.key]) === null || _f === void 0 ? void 0 : _f.status) === 'keyframed');
+};
+exports.getNodeHasKeyframes = getNodeHasKeyframes;

package/dist/components/Timeline/reset-selected-timeline-props.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.resetSelectedTimelineProps = exports.getTimelinePropResetTargets = void 0;
+const studio_shared_1 = require("@remotion/studio-shared");
 const remotion_1 = require("remotion");
 const find_track_for_node_path_info_1 = require("./find-track-for-node-path-info");
 const save_effect_prop_1 = require("./save-effect-prop");
@@ -23,9 +24,12 @@ const isResettablePropStatus = ({ propStatus, defaultValue, }) => {
     if (defaultValue === undefined) {
         return false;
     }
-    if (propStatus.status === 'keyframed' || propStatus.status === 'computed') {
+    if (propStatus.status === 'keyframed') {
         return true;
     }
+    if (propStatus.status === 'computed') {
+        return false;
+    }
     return isNonDefaultCodeValue({
         propStatus: propStatus.codeValue,
         defaultValue,
@@ -96,7 +100,16 @@ const getTimelinePropResetTargets = ({ selections, sequences, overrideIdsToNodeP
             continue;
         }
         const effect = sequence.effects[selection.i];
-        const fieldSchema = effect === null || effect === void 0 ? void 0 : effect.schema[selection.key];
+        const field = effect
+            ? (0, studio_shared_1.getEffectFieldsToShow)({
+                effect,
+                effectIndex: selection.i,
+                nodePath,
+                propStatuses,
+                getEffectDragOverrides: () => ({}),
+            }).find((candidate) => candidate.key === selection.key)
+            : null;
+        const fieldSchema = field === null || field === void 0 ? void 0 : field.fieldSchema;
         const effectStatus = remotion_1.Internals.getEffectPropStatusesCtx({
             propStatuses,
             nodePath,

package/dist/components/Timeline/timeline-expanded-filter.d.ts

@@ -0,0 +1,12 @@
+import type { SequenceNodePathInfo } from '../../helpers/get-timeline-sequence-sort-key';
+import type { TimelineTreeNode } from '../../helpers/timeline-layout';
+import type { TimelineSelection } from './TimelineSelection';
+export declare const filterTimelineExpandedTree: ({ nodes, shouldShowNode, }: {
+    readonly nodes: readonly TimelineTreeNode[];
+    readonly shouldShowNode: (node: TimelineTreeNode) => boolean;
+}) => TimelineTreeNode[];
+export declare const getSelectedTimelineExpandedRowKeys: (selectedItems: readonly TimelineSelection[]) => ReadonlySet<string>;
+export declare const isTimelineExpandedNodeSelected: ({ nodePathInfo, selectedRowKeys, }: {
+    readonly nodePathInfo: SequenceNodePathInfo;
+    readonly selectedRowKeys: ReadonlySet<string>;
+}) => boolean;

package/dist/components/Timeline/timeline-expanded-filter.js

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isTimelineExpandedNodeSelected = exports.getSelectedTimelineExpandedRowKeys = exports.filterTimelineExpandedTree = void 0;
+const timeline_node_path_key_1 = require("../../helpers/timeline-node-path-key");
+const filterTimelineExpandedTree = ({ nodes, shouldShowNode, }) => {
+    const out = [];
+    for (const node of nodes) {
+        if (node.kind === 'field') {
+            if (shouldShowNode(node)) {
+                out.push(node);
+            }
+            continue;
+        }
+        const children = (0, exports.filterTimelineExpandedTree)({
+            nodes: node.children,
+            shouldShowNode,
+        });
+        if (children.length > 0 || shouldShowNode(node)) {
+            out.push({
+                ...node,
+                children,
+            });
+        }
+    }
+    return out;
+};
+exports.filterTimelineExpandedTree = filterTimelineExpandedTree;
+const getSelectedTimelineExpandedRowKeys = (selectedItems) => {
+    return new Set(selectedItems.flatMap((item) => {
+        if (item.type === 'guide') {
+            return [];
+        }
+        return [(0, timeline_node_path_key_1.timelineNodePathInfoToKey)(item.nodePathInfo)];
+    }));
+};
+exports.getSelectedTimelineExpandedRowKeys = getSelectedTimelineExpandedRowKeys;
+const isTimelineExpandedNodeSelected = ({ nodePathInfo, selectedRowKeys, }) => selectedRowKeys.has((0, timeline_node_path_key_1.timelineNodePathInfoToKey)(nodePathInfo));
+exports.isTimelineExpandedNodeSelected = isTimelineExpandedNodeSelected;

package/dist/components/Timeline/use-expanded-track-keyframe-rows.js

@@ -7,6 +7,8 @@ const timeline_layout_1 = require("../../helpers/timeline-layout");
 const timeline_node_path_key_1 = require("../../helpers/timeline-node-path-key");
 const ExpandedTracksProvider_1 = require("../ExpandedTracksProvider");
 const get_node_keyframes_1 = require("./get-node-keyframes");
+const timeline_expanded_filter_1 = require("./timeline-expanded-filter");
+const TimelineSelection_1 = require("./TimelineSelection");
 const canEditEasingForInterpolationFunction = (interpolationFunction) => interpolationFunction === 'interpolate' ||
     interpolationFunction === 'interpolateColors';
 const getNodeCanEditEasing = ({ node, nodePath, propStatuses, }) => {
@@ -34,6 +36,7 @@ const useExpandedTrackKeyframeRows = ({ sequence, nodePathInfo, keyframeDisplayO
     const { getIsExpanded } = (0, react_1.useContext)(ExpandedTracksProvider_1.ExpandedTracksGetterContext);
     const { propStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesContext);
     const { getDragOverrides, getEffectDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeDragOverridesContext);
+    const { selectedItems } = (0, TimelineSelection_1.useTimelineSelection)();
     const timelinePosition = remotion_1.Internals.Timeline.useTimelinePosition();
     const tree = (0, react_1.useMemo)(() => (0, timeline_layout_1.buildTimelineTree)({
         sequence,
@@ -48,16 +51,37 @@ const useExpandedTrackKeyframeRows = ({ sequence, nodePathInfo, keyframeDisplayO
         nodePathInfo,
         sequence,
     ]);
-    const flat = (0, react_1.useMemo)(() => (0, timeline_layout_1.flattenVisibleTreeNodes)({ nodes: tree, getIsExpanded }), [tree, getIsExpanded]);
-    const expandedHeight = (0, react_1.useMemo)(() => (0, timeline_layout_1.getExpandedTrackHeight)({
-        sequence,
-        nodePathInfo,
-        getIsExpanded,
+    const selectedRowKeys = (0, react_1.useMemo)(() => (0, timeline_expanded_filter_1.getSelectedTimelineExpandedRowKeys)(selectedItems), [selectedItems]);
+    const filteredTree = (0, react_1.useMemo)(() => (0, timeline_expanded_filter_1.filterTimelineExpandedTree)({
+        nodes: tree,
+        shouldShowNode: (node) => (0, timeline_expanded_filter_1.isTimelineExpandedNodeSelected)({
+            nodePathInfo: node.nodePathInfo,
+            selectedRowKeys,
+        }) ||
+            (0, get_node_keyframes_1.getNodeHasKeyframes)({
+                node,
+                nodePath: nodePathInfo.sequenceSubscriptionKey,
+                propStatuses,
+                getDragOverrides,
+                getEffectDragOverrides,
+            }),
+    }), [
+        getDragOverrides,
+        getEffectDragOverrides,
+        nodePathInfo.sequenceSubscriptionKey,
         propStatuses,
-    }), [propStatuses, getIsExpanded, nodePathInfo, sequence]);
-    const rows = (0, react_1.useMemo)(() => flat.map(({ node }) => ({
-        height: (0, timeline_layout_1.getTreeRowHeight)(node),
-        keyframes: (0, get_node_keyframes_1.getNodeKeyframes)({
+        selectedRowKeys,
+        tree,
+    ]);
+    const flat = (0, react_1.useMemo)(() => (0, timeline_layout_1.flattenVisibleTreeNodes)({ nodes: filteredTree, getIsExpanded }), [filteredTree, getIsExpanded]);
+    const expandedHeight = (0, react_1.useMemo)(() => {
+        const totalRowsHeight = flat.reduce((sum, { node }) => sum + (0, timeline_layout_1.getTreeRowHeight)(node), 0);
+        const separators = Math.max(0, flat.length - 1);
+        return totalRowsHeight + separators;
+    }, [flat]);
+    const nodeKeyframes = (0, react_1.useMemo)(() => new Map(flat.map(({ node }) => [
+        (0, timeline_node_path_key_1.timelineNodePathInfoToKey)(node.nodePathInfo),
+        (0, get_node_keyframes_1.getNodeKeyframes)({
             node,
             nodePath: nodePathInfo.sequenceSubscriptionKey,
             propStatuses,
@@ -66,22 +90,30 @@ const useExpandedTrackKeyframeRows = ({ sequence, nodePathInfo, keyframeDisplayO
             getEffectDragOverrides,
             timelinePosition,
         }),
-        canEditEasing: getNodeCanEditEasing({
-            node,
-            nodePath: nodePathInfo.sequenceSubscriptionKey,
-            propStatuses,
-        }),
-        rowKey: (0, timeline_node_path_key_1.timelineNodePathInfoToKey)(node.nodePathInfo),
-        nodePathInfo: node.nodePathInfo,
-    })), [
-        propStatuses,
+    ])), [
         flat,
         getDragOverrides,
         getEffectDragOverrides,
         keyframeDisplayOffset,
         nodePathInfo.sequenceSubscriptionKey,
+        propStatuses,
         timelinePosition,
     ]);
+    const rows = (0, react_1.useMemo)(() => flat.map(({ node }) => {
+        var _a;
+        const rowKey = (0, timeline_node_path_key_1.timelineNodePathInfoToKey)(node.nodePathInfo);
+        return {
+            height: (0, timeline_layout_1.getTreeRowHeight)(node),
+            keyframes: (_a = nodeKeyframes.get(rowKey)) !== null && _a !== void 0 ? _a : [],
+            canEditEasing: getNodeCanEditEasing({
+                node,
+                nodePath: nodePathInfo.sequenceSubscriptionKey,
+                propStatuses,
+            }),
+            rowKey,
+            nodePathInfo: node.nodePathInfo,
+        };
+    }), [propStatuses, flat, nodePathInfo.sequenceSubscriptionKey, nodeKeyframes]);
     return { rows, expandedHeight };
 };
 exports.useExpandedTrackKeyframeRows = useExpandedTrackKeyframeRows;

package/dist/components/Timeline/use-timeline-expanded-tree.d.ts

@@ -4,6 +4,7 @@ export declare const useTimelineExpandedTree: ({ sequence, nodePathInfo, }: {
     readonly sequence: TSequence;
     readonly nodePathInfo: SequenceNodePathInfo;
 }) => {
+    filteredTree: import("../../helpers/timeline-layout").TimelineTreeNode[];
     getIsExpanded: import("../ExpandedTracksProvider").GetIsExpanded;
     propStatuses: import("remotion").PropStatuses;
     toggleTrack: (nodePathInfo: SequenceNodePathInfo) => void;

package/dist/components/Timeline/use-timeline-expanded-tree.js

@@ -5,11 +5,15 @@ const react_1 = require("react");
 const remotion_1 = require("remotion");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
 const ExpandedTracksProvider_1 = require("../ExpandedTracksProvider");
+const get_node_keyframes_1 = require("./get-node-keyframes");
+const timeline_expanded_filter_1 = require("./timeline-expanded-filter");
+const TimelineSelection_1 = require("./TimelineSelection");
 const useTimelineExpandedTree = ({ sequence, nodePathInfo, }) => {
     const { getIsExpanded } = (0, react_1.useContext)(ExpandedTracksProvider_1.ExpandedTracksGetterContext);
     const { toggleTrack } = (0, react_1.useContext)(ExpandedTracksProvider_1.ExpandedTracksSetterContext);
     const { propStatuses: visualModePropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesContext);
     const { getDragOverrides, getEffectDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeDragOverridesContext);
+    const { selectedItems } = (0, TimelineSelection_1.useTimelineSelection)();
     const tree = (0, react_1.useMemo)(() => (0, timeline_layout_1.buildTimelineTree)({
         sequence,
         nodePathInfo,
@@ -23,7 +27,30 @@ const useTimelineExpandedTree = ({ sequence, nodePathInfo, }) => {
         getEffectDragOverrides,
         visualModePropStatuses,
     ]);
+    const selectedRowKeys = (0, react_1.useMemo)(() => (0, timeline_expanded_filter_1.getSelectedTimelineExpandedRowKeys)(selectedItems), [selectedItems]);
+    const filteredTree = (0, react_1.useMemo)(() => (0, timeline_expanded_filter_1.filterTimelineExpandedTree)({
+        nodes: tree,
+        shouldShowNode: (node) => (0, timeline_expanded_filter_1.isTimelineExpandedNodeSelected)({
+            nodePathInfo: node.nodePathInfo,
+            selectedRowKeys,
+        }) ||
+            (0, get_node_keyframes_1.getNodeHasKeyframes)({
+                node,
+                nodePath: nodePathInfo.sequenceSubscriptionKey,
+                propStatuses: visualModePropStatuses,
+                getDragOverrides,
+                getEffectDragOverrides,
+            }),
+    }), [
+        getDragOverrides,
+        getEffectDragOverrides,
+        nodePathInfo.sequenceSubscriptionKey,
+        selectedRowKeys,
+        tree,
+        visualModePropStatuses,
+    ]);
     return {
+        filteredTree,
         getIsExpanded,
         propStatuses: visualModePropStatuses,
         toggleTrack,

package/dist/components/Timeline/use-timeline-height.js

@@ -6,13 +6,19 @@ const remotion_1 = require("remotion");
 const client_id_1 = require("../../helpers/client-id");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
 const ExpandedTracksProvider_1 = require("../ExpandedTracksProvider");
+const get_node_keyframes_1 = require("./get-node-keyframes");
 const MaxTimelineTracks_1 = require("./MaxTimelineTracks");
+const timeline_expanded_filter_1 = require("./timeline-expanded-filter");
+const TimelineSelection_1 = require("./TimelineSelection");
 const TimelineTimeIndicators_1 = require("./TimelineTimeIndicators");
 const useTimelineHeight = ({ shown, hasBeenCut, }) => {
     const { getIsExpanded } = (0, react_1.useContext)(ExpandedTracksProvider_1.ExpandedTracksGetterContext);
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const { propStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesContext);
+    const { getDragOverrides, getEffectDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeDragOverridesContext);
+    const { selectedItems } = (0, TimelineSelection_1.useTimelineSelection)();
     const previewServerConnected = previewServerState.type === 'connected';
+    const selectedRowKeys = (0, react_1.useMemo)(() => (0, timeline_expanded_filter_1.getSelectedTimelineExpandedRowKeys)(selectedItems), [selectedItems]);
     return (0, react_1.useMemo)(() => {
         const tracksHeight = shown.reduce((acc, track) => {
             const isExpanded = previewServerConnected &&
@@ -20,20 +26,58 @@ const useTimelineHeight = ({ shown, hasBeenCut, }) => {
                 getIsExpanded(track.nodePathInfo);
             const layerHeight = (0, timeline_layout_1.getTimelineLayerHeight)(track.sequence.type) +
                 timeline_layout_1.TIMELINE_ITEM_BORDER_BOTTOM;
-            const expandedHeight = isExpanded && track.nodePathInfo
-                ? (0, timeline_layout_1.getExpandedTrackHeight)({
+            const expandedHeight = (() => {
+                if (!isExpanded || track.nodePathInfo === null) {
+                    return 0;
+                }
+                const { nodePathInfo } = track;
+                const tree = (0, timeline_layout_1.buildTimelineTree)({
                     sequence: track.sequence,
-                    nodePathInfo: track.nodePathInfo,
-                    getIsExpanded,
+                    nodePathInfo,
+                    getDragOverrides,
+                    getEffectDragOverrides,
                     propStatuses,
-                }) + timeline_layout_1.TIMELINE_ITEM_BORDER_BOTTOM
-                : 0;
+                });
+                const filteredTree = (0, timeline_expanded_filter_1.filterTimelineExpandedTree)({
+                    nodes: tree,
+                    shouldShowNode: (node) => (0, timeline_expanded_filter_1.isTimelineExpandedNodeSelected)({
+                        nodePathInfo: node.nodePathInfo,
+                        selectedRowKeys,
+                    }) ||
+                        (0, get_node_keyframes_1.getNodeHasKeyframes)({
+                            node,
+                            nodePath: nodePathInfo.sequenceSubscriptionKey,
+                            propStatuses,
+                            getDragOverrides,
+                            getEffectDragOverrides,
+                        }),
+                });
+                const flat = (0, timeline_layout_1.flattenVisibleTreeNodes)({
+                    nodes: filteredTree,
+                    getIsExpanded,
+                });
+                if (flat.length === 0) {
+                    return 0;
+                }
+                const totalRowsHeight = flat.reduce((sum, { node }) => sum + (0, timeline_layout_1.getTreeRowHeight)(node), 0);
+                const separators = Math.max(0, flat.length - 1);
+                return totalRowsHeight + separators + timeline_layout_1.TIMELINE_ITEM_BORDER_BOTTOM;
+            })();
             return acc + layerHeight + expandedHeight;
         }, 0);
         return (tracksHeight +
             timeline_layout_1.TIMELINE_ITEM_BORDER_BOTTOM +
             (hasBeenCut ? MaxTimelineTracks_1.MAX_TIMELINE_TRACKS_NOTICE_HEIGHT : 0) +
             TimelineTimeIndicators_1.TIMELINE_TIME_INDICATOR_HEIGHT);
-    }, [shown, hasBeenCut, previewServerConnected, getIsExpanded, propStatuses]);
+    }, [
+        shown,
+        hasBeenCut,
+        previewServerConnected,
+        getIsExpanded,
+        propStatuses,
+        getDragOverrides,
+        getEffectDragOverrides,
+        selectedRowKeys,
+    ]);
 };
 exports.useTimelineHeight = useTimelineHeight;

package/dist/components/Timeline/use-timeline-keyframe-drag.js

@@ -285,7 +285,8 @@ const useTimelineKeyframeDrag = ({ frame, nodePathInfo, onSelect, selectable, se
             toggleKey: e.metaKey || e.ctrlKey,
         };
         const shouldDragExistingSelection = selected && !interaction.shiftKey && !interaction.toggleKey;
-        if (!shouldDragExistingSelection) {
+        const shouldSelectOnPointerUp = !selected && !interaction.shiftKey && !interaction.toggleKey;
+        if (!shouldDragExistingSelection && !shouldSelectOnPointerUp) {
             onSelect(interaction);
         }
         const clickedSelection = {
@@ -380,6 +381,9 @@ const useTimelineKeyframeDrag = ({ frame, nodePathInfo, onSelect, selectable, se
             cleanup();
             const targets = dragTargets;
             if (!hasDragged || lastDelta === 0 || targets === null) {
+                if (shouldSelectOnPointerUp) {
+                    onSelect(interaction);
+                }
                 clearActiveOverrides();
                 clearDraggedKeyframes();
                 return;
@@ -392,11 +396,13 @@ const useTimelineKeyframeDrag = ({ frame, nodePathInfo, onSelect, selectable, se
                 clearDraggedKeyframes();
                 return;
             }
-            currentSelection.current.selectItems(targets.map((target) => ({
-                type: 'keyframe',
-                nodePathInfo: target.nodePathInfo,
-                frame: target.displayFrame + lastDelta,
-            })));
+            if (shouldDragExistingSelection) {
+                currentSelection.current.selectItems(targets.map((target) => ({
+                    type: 'keyframe',
+                    nodePathInfo: target.nodePathInfo,
+                    frame: target.displayFrame + lastDelta,
+                })));
+            }
             clearActiveOverrides();
             clearDraggedKeyframes();
             (0, call_move_keyframe_1.callMoveKeyframes)({

package/dist/components/TopPanel.js

@@ -115,7 +115,7 @@ const TopPanelInner = ({ readOnlyStudio, onMounted, drawRef, bufferStateDelayInM
             : null, readOnlyStudio: readOnlyStudio, children: jsx_runtime_1.jsxs("div", { style: container, children: [
                 jsx_runtime_1.jsx("div", { style: row, children: jsx_runtime_1.jsxs(SplitterContainer_1.SplitterContainer, { minFlex: 0.15, maxFlex: 0.4, defaultFlex: 0.2, id: "sidebar-to-preview", orientation: "vertical", children: [actualStateLeft === 'expanded' ? (isMobileLayout ? (jsx_runtime_1.jsx(MobilePanel_1.default, { onClose: onCollapseLeft, children: jsx_runtime_1.jsx(ExplorerPanel_1.ExplorerPanel, { readOnlyStudio: readOnlyStudio }) })) : (jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { sticky: null, type: "flexer", children: jsx_runtime_1.jsx(ExplorerPanel_1.ExplorerPanel, { readOnlyStudio: readOnlyStudio }) }))) : null, actualStateLeft === 'expanded' ? (jsx_runtime_1.jsx(SplitterHandle_1.SplitterHandle, { allowToCollapse: "left", onCollapse: onCollapseLeft })) : null, jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { sticky: null, type: "anti-flexer", children: jsx_runtime_1.jsxs(SplitterContainer_1.SplitterContainer, { minFlex: 0.5, maxFlex: 0.8, defaultFlex: 0.7, id: "canvas-to-right-sidebar", orientation: "vertical", children: [
                                         jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { sticky: null, type: "flexer", children: jsx_runtime_1.jsx("div", { ref: drawRef, style: canvasContainerStyle, children: jsx_runtime_1.jsx(CanvasIfSizeIsAvailable_1.CanvasIfSizeIsAvailable, {}) }) }), actualStateRight === 'expanded' ? (jsx_runtime_1.jsx(SplitterHandle_1.SplitterHandle, { allowToCollapse: "right", onCollapse: onCollapseRight })) : null, actualStateRight === 'expanded' ? (isMobileLayout ? (jsx_runtime_1.jsx(MobilePanel_1.default, { onClose: onCollapseRight, children: jsx_runtime_1.jsx(OptionsPanel_1.OptionsPanel, { readOnlyStudio: readOnlyStudio }) })) : (jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { sticky: null, type: "anti-flexer", children: jsx_runtime_1.jsx(OptionsPanel_1.OptionsPanel, { readOnlyStudio: readOnlyStudio }) }))) : null] }) })
-                        ] }) }), jsx_runtime_1.jsx(PreviewToolbar_1.PreviewToolbar, { bufferStateDelayInMilliseconds: bufferStateDelayInMilliseconds, readOnlyStudio: readOnlyStudio }), jsx_runtime_1.jsx(CurrentCompositionSideEffects_1.CurrentCompositionKeybindings, { readOnlyStudio: readOnlyStudio }), jsx_runtime_1.jsx(CurrentCompositionSideEffects_1.TitleUpdater, {})
+                        ] }) }), jsx_runtime_1.jsx(PreviewToolbar_1.PreviewToolbar, { bufferStateDelayInMilliseconds: bufferStateDelayInMilliseconds, readOnlyStudio: readOnlyStudio }), jsx_runtime_1.jsx(CurrentCompositionSideEffects_1.TitleUpdater, {})
             ] }) }));
 };
 exports.TopPanel = react_1.default.memo(TopPanelInner);