@remotion/studio 4.0.454 → 4.0.455

package/dist/components/PlayPause.d.ts

@@ -3,4 +3,5 @@ export declare const PlayPause: React.FC<{
     readonly playbackRate: number;
     readonly loop: boolean;
     readonly bufferStateDelayInMilliseconds: number;
+    readonly muted: boolean;
 }>;

package/dist/components/PlayPause.js

@@ -29,7 +29,7 @@ const iconButton = {
     width: 14,
     color: 'white',
 };
-const PlayPause = ({ playbackRate, loop, bufferStateDelayInMilliseconds }) => {
+const PlayPause = ({ playbackRate, loop, bufferStateDelayInMilliseconds, muted }) => {
     const { inFrame, outFrame } = (0, in_out_1.useTimelineInOutFramePosition)();
     const videoConfig = remotion_1.Internals.useUnsafeVideoConfig();
     const [showBufferIndicator, setShowBufferState] = (0, react_1.useState)(false);
@@ -44,6 +44,7 @@ const PlayPause = ({ playbackRate, loop, bufferStateDelayInMilliseconds }) => {
         browserMediaControlsBehavior: {
             mode: 'register-media-session',
         },
+        muted,
     });
     const isStill = (0, is_current_selected_still_1.useIsStill)();
     (0, react_1.useEffect)(() => {

package/dist/components/PreviewToolbar.js

@@ -140,7 +140,7 @@ const PreviewToolbar = ({ readOnlyStudio, bufferStateDelayInMilliseconds }) => {
                     jsx_runtime_1.jsxs("div", { style: sideContainer, children: [
                             jsx_runtime_1.jsx("div", { style: padding }), jsx_runtime_1.jsx(TimelineZoomControls_1.TimelineZoomControls, {})
                         ] }), jsx_runtime_1.jsx(layout_1.Flex, {}), jsx_runtime_1.jsx(SizeSelector_1.SizeSelector, {}), isStill || isVideoComposition ? (jsx_runtime_1.jsx(PlaybackRateSelector_1.PlaybackRateSelector, { setPlaybackRate: setPlaybackRate, playbackRate: playbackRate })) : null] })), isVideoComposition ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-                    jsx_runtime_1.jsx(layout_1.Spacing, { x: 2 }), jsx_runtime_1.jsx(PlayPause_1.PlayPause, { bufferStateDelayInMilliseconds: bufferStateDelayInMilliseconds, loop: loop, playbackRate: playbackRate }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 2 }), jsx_runtime_1.jsx(LoopToggle_1.LoopToggle, { loop: loop, setLoop: setLoop }), jsx_runtime_1.jsx(MuteToggle_1.MuteToggle, { muted: mediaMuted, setMuted: setMediaMuted }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 2 }), jsx_runtime_1.jsx(TimelineInOutToggle_1.TimelineInOutPointToggle, {}), jsx_runtime_1.jsx(layout_1.Spacing, { x: 2 })
+                    jsx_runtime_1.jsx(layout_1.Spacing, { x: 2 }), jsx_runtime_1.jsx(PlayPause_1.PlayPause, { bufferStateDelayInMilliseconds: bufferStateDelayInMilliseconds, loop: loop, playbackRate: playbackRate, muted: mediaMuted }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 2 }), jsx_runtime_1.jsx(LoopToggle_1.LoopToggle, { loop: loop, setLoop: setLoop }), jsx_runtime_1.jsx(MuteToggle_1.MuteToggle, { muted: mediaMuted, setMuted: setMediaMuted }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 2 }), jsx_runtime_1.jsx(TimelineInOutToggle_1.TimelineInOutPointToggle, {}), jsx_runtime_1.jsx(layout_1.Spacing, { x: 2 })
                 ] })) : null, (canvasContent === null || canvasContent === void 0 ? void 0 : canvasContent.type) === 'composition' ? jsx_runtime_1.jsx(CheckboardToggle_1.CheckboardToggle, {}) : null, jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), canvasContent && isFullscreenSupported ? jsx_runtime_1.jsx(FullscreenToggle_1.FullScreenToggle, {}) : null, jsx_runtime_1.jsx(layout_1.Flex, {}), isMobileLayout && (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                     jsx_runtime_1.jsx(layout_1.Flex, {}), jsx_runtime_1.jsx(SizeSelector_1.SizeSelector, {}), isStill || isVideoComposition ? (jsx_runtime_1.jsx(PlaybackRateSelector_1.PlaybackRateSelector, { setPlaybackRate: setPlaybackRate, playbackRate: playbackRate })) : null] })), jsx_runtime_1.jsxs("div", { style: sideContainer, children: [
                     jsx_runtime_1.jsx(layout_1.Flex, {}), !isMobileLayout && jsx_runtime_1.jsx(FpsCounter_1.FpsCounter, { playbackSpeed: playbackRate }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 2 }), jsx_runtime_1.jsx(RenderButton_1.RenderButton, { readOnlyStudio: readOnlyStudio }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1.5 })

package/dist/components/Timeline/Timeline.js

@@ -104,7 +104,7 @@ const TimelineInner = () => {
                     (0, timeline_layout_1.getTimelineLayerHeight)(track.sequence.type) +
                     Number(timeline_layout_1.TIMELINE_ITEM_BORDER_BOTTOM) +
                     (isExpanded
-                        ? (0, timeline_layout_1.getExpandedTrackHeight)(track.sequence.controls) +
+                        ? (0, timeline_layout_1.getExpandedTrackHeight)(track.sequence, expandedTracks) +
                             timeline_layout_1.TIMELINE_ITEM_BORDER_BOTTOM
                         : 0));
             }, 0) +

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

@@ -0,0 +1,7 @@
+import React from 'react';
+export declare const TimelineExpandArrowButton: React.FC<{
+    readonly isExpanded: boolean;
+    readonly onClick: () => void;
+    readonly label: string;
+}>;
+export declare const TimelineExpandArrowSpacer: React.FC;

package/dist/components/Timeline/TimelineExpandArrowButton.js

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TimelineExpandArrowSpacer = exports.TimelineExpandArrowButton = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const arrowButton = {
+    background: 'none',
+    border: 'none',
+    color: 'white',
+    cursor: 'pointer',
+    padding: 0,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: 12,
+    height: 12,
+    flexShrink: 0,
+    fontSize: 8,
+    marginRight: 4,
+    userSelect: 'none',
+    outline: 'none',
+    lineHeight: 1,
+};
+const svgStyle = { display: 'block' };
+const TimelineExpandArrowButton = ({ isExpanded, onClick, label }) => {
+    const style = (0, react_1.useMemo)(() => {
+        return {
+            ...arrowButton,
+            transform: isExpanded ? 'rotate(90deg)' : 'rotate(0deg)',
+        };
+    }, [isExpanded]);
+    return (jsx_runtime_1.jsx("button", { type: "button", style: style, onClick: onClick, "aria-expanded": isExpanded, "aria-label": `${isExpanded ? 'Collapse' : 'Expand'} ${label}`, children: jsx_runtime_1.jsx("svg", { width: "12", height: "12", viewBox: "0 0 8 8", style: svgStyle, children: jsx_runtime_1.jsx("path", { d: "M2 1L6 4L2 7Z", fill: "white" }) }) }));
+};
+exports.TimelineExpandArrowButton = TimelineExpandArrowButton;
+const TimelineExpandArrowSpacer = () => {
+    return jsx_runtime_1.jsx("div", { style: arrowButton });
+};
+exports.TimelineExpandArrowSpacer = TimelineExpandArrowSpacer;

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

@@ -2,8 +2,6 @@ import type { SequenceNodePath } from '@remotion/studio-shared';
 import React from 'react';
 import type { TSequence } from 'remotion';
 import type { OriginalPosition } from '../../error-overlay/react-overlay/utils/get-source-map';
-export declare const EXPANDED_SECTION_PADDING_LEFT = 28;
-export declare const EXPANDED_SECTION_PADDING_RIGHT = 10;
 export declare const TimelineExpandedSection: React.FC<{
     readonly sequence: TSequence;
     readonly originalLocation: OriginalPosition | null;

package/dist/components/Timeline/TimelineExpandedSection.js

@@ -33,14 +33,15 @@ var __importStar = (this && this.__importStar) || (function () {
     };
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TimelineExpandedSection = exports.EXPANDED_SECTION_PADDING_RIGHT = exports.EXPANDED_SECTION_PADDING_LEFT = void 0;
+exports.TimelineExpandedSection = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
 const colors_1 = require("../../helpers/colors");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
+const ExpandedTracksProvider_1 = require("../ExpandedTracksProvider");
+const TimelineExpandArrowButton_1 = require("./TimelineExpandArrowButton");
 const TimelineFieldRow_1 = require("./TimelineFieldRow");
-exports.EXPANDED_SECTION_PADDING_LEFT = 28;
-exports.EXPANDED_SECTION_PADDING_RIGHT = 10;
+const TimelineListItem_1 = require("./TimelineListItem");
 const expandedSectionBase = {
     color: 'white',
     fontFamily: 'Arial, Helvetica, sans-serif',
@@ -53,11 +54,27 @@ const separator = {
     height: 1,
     backgroundColor: colors_1.TIMELINE_TRACK_SEPARATOR,
 };
+const groupRowBase = {
+    height: timeline_layout_1.TREE_GROUP_ROW_HEIGHT,
+    display: 'flex',
+    alignItems: 'center',
+    paddingRight: timeline_layout_1.EXPANDED_SECTION_PADDING_RIGHT,
+};
+const rowLabel = {
+    fontSize: 12,
+    color: 'rgba(255, 255, 255, 0.8)',
+    userSelect: 'none',
+};
+const labelOnlyRowBase = {
+    display: 'flex',
+    alignItems: 'center',
+    paddingRight: timeline_layout_1.EXPANDED_SECTION_PADDING_RIGHT,
+};
 const TimelineExpandedSection = ({ sequence, originalLocation, nestedDepth, nodePath }) => {
     var _a;
     var _b;
+    const { expandedTracks, toggleTrack } = (0, react_1.useContext)(ExpandedTracksProvider_1.ExpandedTracksContext);
     const overrideId = (_b = (_a = sequence.controls) === null || _a === void 0 ? void 0 : _a.overrideId) !== null && _b !== void 0 ? _b : sequence.id;
-    const schemaFields = (0, react_1.useMemo)(() => (0, timeline_layout_1.getSchemaFields)(sequence.controls), [sequence.controls]);
     const validatedLocation = (0, react_1.useMemo)(() => {
         var _a;
         if (!originalLocation ||
@@ -71,24 +88,56 @@ const TimelineExpandedSection = ({ sequence, originalLocation, nestedDepth, node
             column: (_a = originalLocation.column) !== null && _a !== void 0 ? _a : 0,
         };
     }, [originalLocation]);
-    const expandedHeight = (0, react_1.useMemo)(() => (0, timeline_layout_1.getExpandedTrackHeight)(sequence.controls), [sequence.controls]);
+    const tree = (0, react_1.useMemo)(() => (0, timeline_layout_1.buildTimelineTree)(sequence), [sequence]);
+    const flat = (0, react_1.useMemo)(() => (0, timeline_layout_1.flattenVisibleTreeNodes)(tree, expandedTracks), [tree, expandedTracks]);
+    const expandedHeight = (0, react_1.useMemo)(() => (0, timeline_layout_1.getExpandedTrackHeight)(sequence, expandedTracks), [sequence, expandedTracks]);
+    const sequenceOffsetPx = TimelineListItem_1.SPACING * 3 * nestedDepth;
+    const keysToObserve = (0, react_1.useMemo)(() => {
+        const fields = (0, timeline_layout_1.getSchemaFields)(sequence.controls);
+        if (!fields) {
+            return [];
+        }
+        return fields.map((f) => f.key);
+    }, [sequence.controls]);
     const style = (0, react_1.useMemo)(() => {
         return {
             ...expandedSectionBase,
             height: expandedHeight,
         };
     }, [expandedHeight]);
-    const keysToObserve = (0, react_1.useMemo)(() => {
-        if (!schemaFields) {
-            return [];
+    const renderRow = (0, react_1.useCallback)((node, depth) => {
+        var _a;
+        const paddingLeft = timeline_layout_1.EXPANDED_SECTION_PADDING_LEFT +
+            depth * timeline_layout_1.TREE_INDENT_PER_LEVEL +
+            sequenceOffsetPx;
+        if (node.kind === 'group') {
+            const isExpanded = (_a = expandedTracks[node.id]) !== null && _a !== void 0 ? _a : false;
+            return (jsx_runtime_1.jsxs("div", { style: { ...groupRowBase, paddingLeft }, children: [
+                    jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowButton, { isExpanded: isExpanded, onClick: () => toggleTrack(node.id), label: `${node.label} section` }), jsx_runtime_1.jsx("span", { style: rowLabel, children: node.label })
+                ] }));
+        }
+        if (node.field) {
+            return (jsx_runtime_1.jsx(TimelineFieldRow_1.TimelineFieldRow, { field: node.field, overrideId: overrideId, validatedLocation: validatedLocation, paddingLeft: paddingLeft, nodePath: nodePath, keysToObserve: keysToObserve }));
         }
-        return schemaFields.map((f) => f.key);
-    }, [schemaFields]);
-    return (jsx_runtime_1.jsx("div", { style: style, children: schemaFields
-            ? schemaFields.map((field, i) => {
-                return (jsx_runtime_1.jsxs(react_1.default.Fragment, { children: [i > 0 ? jsx_runtime_1.jsx("div", { style: separator }) : null, jsx_runtime_1.jsx(TimelineFieldRow_1.TimelineFieldRow, { field: field, overrideId: overrideId, validatedLocation: validatedLocation, nestedDepth: nestedDepth, nodePath: nodePath, keysToObserve: keysToObserve })
-                    ] }, field.key));
-            })
-            : 'No schema' }));
+        return (jsx_runtime_1.jsx("div", { style: {
+                ...labelOnlyRowBase,
+                height: (0, timeline_layout_1.getTreeRowHeight)(node),
+                paddingLeft,
+            }, children: jsx_runtime_1.jsx("span", { style: rowLabel, children: node.label }) }));
+    }, [
+        expandedTracks,
+        keysToObserve,
+        nodePath,
+        overrideId,
+        sequenceOffsetPx,
+        toggleTrack,
+        validatedLocation,
+    ]);
+    if (flat.length === 0) {
+        return jsx_runtime_1.jsx("div", { style: style, children: "No schema" });
+    }
+    return (jsx_runtime_1.jsx("div", { style: style, children: flat.map(({ node, depth }, i) => {
+            return (jsx_runtime_1.jsxs(react_1.default.Fragment, { children: [i > 0 ? jsx_runtime_1.jsx("div", { style: separator }) : null, renderRow(node, depth)] }, node.id));
+        }) }));
 };
 exports.TimelineExpandedSection = TimelineExpandedSection;

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

@@ -6,7 +6,7 @@ export declare const TimelineFieldRow: React.FC<{
     readonly field: SchemaFieldInfo;
     readonly overrideId: string;
     readonly validatedLocation: CodePosition | null;
-    readonly nestedDepth: number;
+    readonly paddingLeft: number;
     readonly nodePath: SequenceNodePath | null;
     readonly keysToObserve: string[];
 }>;

package/dist/components/Timeline/TimelineFieldRow.js

@@ -4,16 +4,14 @@ exports.TimelineFieldRow = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
+const timeline_layout_1 = require("../../helpers/timeline-layout");
 const call_api_1 = require("../call-api");
-const TimelineExpandedSection_1 = require("./TimelineExpandedSection");
-const TimelineListItem_1 = require("./TimelineListItem");
 const TimelineSchemaField_1 = require("./TimelineSchemaField");
-const FIELD_ROW_PADDING_LEFT = 24;
 const fieldRowBase = {
     display: 'flex',
     alignItems: 'center',
     gap: 8,
-    paddingRight: TimelineExpandedSection_1.EXPANDED_SECTION_PADDING_RIGHT,
+    paddingRight: timeline_layout_1.EXPANDED_SECTION_PADDING_RIGHT,
 };
 const fieldName = {
     fontSize: 12,
@@ -27,7 +25,7 @@ const fieldLabelRow = {
     alignItems: 'center',
     gap: 6,
 };
-const TimelineFieldRow = ({ field, overrideId, validatedLocation, nestedDepth, nodePath, keysToObserve, }) => {
+const TimelineFieldRow = ({ field, overrideId, validatedLocation, paddingLeft, nodePath, keysToObserve, }) => {
     var _a, _b, _c, _d;
     const { setDragOverrides, clearDragOverrides, dragOverrides, codeValues: allPropStatuses, } = (0, react_1.useContext)(remotion_1.Internals.VisualModeOverridesContext);
     const propStatuses = ((_a = allPropStatuses[overrideId]) !== null && _a !== void 0 ? _a : null);
@@ -93,11 +91,9 @@ const TimelineFieldRow = ({ field, overrideId, validatedLocation, nestedDepth, n
         return {
             ...fieldRowBase,
             height: field.rowHeight,
-            paddingLeft: TimelineExpandedSection_1.EXPANDED_SECTION_PADDING_LEFT +
-                FIELD_ROW_PADDING_LEFT +
-                TimelineListItem_1.SPACING * 3 * nestedDepth,
+            paddingLeft,
         };
-    }, [field.rowHeight, nestedDepth]);
+    }, [field.rowHeight, paddingLeft]);
     return (jsx_runtime_1.jsxs("div", { style: style, children: [
             jsx_runtime_1.jsx("div", { style: fieldLabelRow, children: jsx_runtime_1.jsx("span", { style: fieldName, children: (_c = field.description) !== null && _c !== void 0 ? _c : field.key }) }), jsx_runtime_1.jsx(TimelineSchemaField_1.TimelineFieldValue, { field: field, propStatus: propStatus, onSave: onSave, onDragValueChange: onDragValueChange, onDragEnd: onDragEnd, canUpdate: (_d = propStatus === null || propStatus === void 0 ? void 0 : propStatus.canUpdate) !== null && _d !== void 0 ? _d : false, effectiveValue: effectiveValue, codeValue: propStatus })
         ] }));

package/dist/components/Timeline/TimelineListItem.js

@@ -11,6 +11,7 @@ const call_api_1 = require("../call-api");
 const ContextMenu_1 = require("../ContextMenu");
 const ExpandedTracksProvider_1 = require("../ExpandedTracksProvider");
 const NotificationCenter_1 = require("../Notifications/NotificationCenter");
+const TimelineExpandArrowButton_1 = require("./TimelineExpandArrowButton");
 const TimelineExpandedSection_1 = require("./TimelineExpandedSection");
 const TimelineLayerEye_1 = require("./TimelineLayerEye");
 const TimelineStack_1 = require("./TimelineStack");
@@ -21,24 +22,6 @@ const space = {
     width: exports.SPACING,
     flexShrink: 0,
 };
-const arrowButton = {
-    background: 'none',
-    border: 'none',
-    color: 'white',
-    cursor: 'pointer',
-    padding: 0,
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    width: 12,
-    height: 12,
-    flexShrink: 0,
-    fontSize: 8,
-    marginRight: 4,
-    userSelect: 'none',
-    outline: 'none',
-    lineHeight: 1,
-};
 const TimelineListItem = ({ nestedDepth, sequence, isCompact }) => {
     var _a, _b;
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
@@ -165,7 +148,7 @@ const TimelineListItem = ({ nestedDepth, sequence, isCompact }) => {
     }, [sequence.id, toggleTrack]);
     const padder = (0, react_1.useMemo)(() => {
         return {
-            width: Number(exports.SPACING * 3) * nestedDepth,
+            width: Number(exports.SPACING) * nestedDepth,
             flexShrink: 0,
         };
     }, [nestedDepth]);
@@ -195,15 +178,10 @@ const TimelineListItem = ({ nestedDepth, sequence, isCompact }) => {
             borderBottom: `1px solid ${colors_1.TIMELINE_TRACK_SEPARATOR}`,
         };
     }, [sequence.type]);
-    const arrowStyle = (0, react_1.useMemo)(() => {
-        return {
-            ...arrowButton,
-            transform: isExpanded ? 'rotate(90deg)' : 'rotate(0deg)',
-        };
-    }, [isExpanded]);
+    const hasExpandableContent = Boolean(sequence.controls) || sequence.effects.length > 0;
     const trackRow = (jsx_runtime_1.jsxs("div", { style: outer, children: [
-            jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEye, { type: sequence.type === 'audio' ? 'speaker' : 'eye', hidden: isItemHidden, onInvoked: onToggleVisibility }), jsx_runtime_1.jsx("div", { style: padder }), sequence.parent && nestedDepth > 0 ? jsx_runtime_1.jsx("div", { style: space }) : null, visualModeActive ? (sequence.controls ? (jsx_runtime_1.jsx("button", { type: "button", style: arrowStyle, onClick: onToggleExpand, "aria-expanded": isExpanded, "aria-label": `${isExpanded ? 'Collapse' : 'Expand'} track`, children: jsx_runtime_1.jsx("svg", { width: "12", height: "12", viewBox: "0 0 8 8", style: { display: 'block' }, children: jsx_runtime_1.jsx("path", { d: "M2 1L6 4L2 7Z", fill: "white" }) }) })) : (jsx_runtime_1.jsx("div", { style: arrowButton }))) : null, jsx_runtime_1.jsx(TimelineStack_1.TimelineStack, { sequence: sequence, isCompact: isCompact, originalLocation: originalLocation })
+            jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEye, { type: sequence.type === 'audio' ? 'speaker' : 'eye', hidden: isItemHidden, onInvoked: onToggleVisibility }), jsx_runtime_1.jsx("div", { style: padder }), sequence.parent && nestedDepth > 0 ? jsx_runtime_1.jsx("div", { style: space }) : null, visualModeActive ? (hasExpandableContent ? (jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowButton, { isExpanded: isExpanded, onClick: onToggleExpand, label: "track properties" })) : (jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowSpacer, {}))) : null, jsx_runtime_1.jsx(TimelineStack_1.TimelineStack, { sequence: sequence, isCompact: isCompact, originalLocation: originalLocation })
         ] }));
-    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [visualModeEnvEnabled ? (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { values: contextMenuValues, children: trackRow })) : (trackRow), visualModeActive && isExpanded && sequence.controls ? (jsx_runtime_1.jsx(TimelineExpandedSection_1.TimelineExpandedSection, { sequence: sequence, originalLocation: originalLocation, nestedDepth: nestedDepth, nodePath: nodePath })) : null] }));
+    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [visualModeEnvEnabled ? (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { values: contextMenuValues, children: trackRow })) : (trackRow), visualModeActive && isExpanded && hasExpandableContent ? (jsx_runtime_1.jsx(TimelineExpandedSection_1.TimelineExpandedSection, { sequence: sequence, originalLocation: originalLocation, nestedDepth: nestedDepth, nodePath: nodePath })) : null] }));
 };
 exports.TimelineListItem = TimelineListItem;

package/dist/components/Timeline/TimelineTracks.js

@@ -18,8 +18,9 @@ const content = {
 const timelineContent = {
     minHeight: '100%',
 };
-const getExpandedPlaceholderStyle = (controls) => ({
-    height: (0, timeline_layout_1.getExpandedTrackHeight)(controls) + timeline_layout_1.TIMELINE_ITEM_BORDER_BOTTOM,
+const getExpandedPlaceholderStyle = (sequence, expandedTracks) => ({
+    height: (0, timeline_layout_1.getExpandedTrackHeight)(sequence, expandedTracks) +
+        timeline_layout_1.TIMELINE_ITEM_BORDER_BOTTOM,
 });
 const TimelineTracks = ({ timeline, hasBeenCut }) => {
     const { expandedTracks } = (0, react_1.useContext)(ExpandedTracksProvider_1.ExpandedTracksContext);
@@ -44,7 +45,7 @@ const TimelineTracks = ({ timeline, hasBeenCut }) => {
                                 jsx_runtime_1.jsx("div", { style: {
                                         height: (0, timeline_layout_1.getTimelineLayerHeight)(track.sequence.type),
                                         marginBottom: timeline_layout_1.TIMELINE_ITEM_BORDER_BOTTOM,
-                                    }, children: jsx_runtime_1.jsx(TimelineSequence_1.TimelineSequence, { s: track.sequence }) }), visualModeEnabled && isExpanded ? (jsx_runtime_1.jsx("div", { style: getExpandedPlaceholderStyle(track.sequence.controls) })) : null] }, track.sequence.id));
+                                    }, children: jsx_runtime_1.jsx(TimelineSequence_1.TimelineSequence, { s: track.sequence }) }), visualModeEnabled && isExpanded ? (jsx_runtime_1.jsx("div", { style: getExpandedPlaceholderStyle(track.sequence, expandedTracks) })) : null] }, track.sequence.id));
                     })] }), hasBeenCut ? jsx_runtime_1.jsx(MaxTimelineTracks_1.MaxTimelineTracksReached, {}) : null] }));
 };
 exports.TimelineTracks = TimelineTracks;