@remotion/studio 4.0.468 → 4.0.469

package/dist/components/AudioWaveform.d.ts

@@ -2,6 +2,7 @@ import React from 'react';
 import type { LoopDisplay } from 'remotion';
 export declare const AudioWaveform: React.FC<{
     readonly src: string;
+    readonly height: number;
     readonly visualizationWidth: number;
     readonly startFrom: number;
     readonly durationInFrames: number;

package/dist/components/AudioWaveform.js

@@ -21,12 +21,15 @@ const canUseAudioWaveformWorker = () => {
     }
     return 'transferControlToOffscreen' in HTMLCanvasElement.prototype;
 };
-const container = {
-    display: 'flex',
-    flexDirection: 'row',
-    alignItems: 'center',
-    position: 'absolute',
-    inset: 0,
+const getContainerStyle = (height) => {
+    return {
+        display: 'flex',
+        flexDirection: 'row',
+        alignItems: 'center',
+        position: 'relative',
+        width: '100%',
+        height,
+    };
 };
 const errorMessage = {
     fontSize: 13,
@@ -74,7 +77,7 @@ const drawLoopedWaveform = ({ canvas, peaks, volume, visualizationWidth, loopWid
     ctx.fillStyle = pattern;
     ctx.fillRect(0, 0, w, h);
 };
-const AudioWaveform = ({ src, startFrom, durationInFrames, visualizationWidth, volume, doesVolumeChange, playbackRate, loopDisplay, }) => {
+const AudioWaveform = ({ src, height, startFrom, durationInFrames, visualizationWidth, volume, doesVolumeChange, playbackRate, loopDisplay, }) => {
     const [peaks, setPeaks] = (0, react_1.useState)(null);
     const [error, setError] = (0, react_1.useState)(null);
     const [waveformCanvasKey, setWaveformCanvasKey] = (0, react_1.useState)(0);
@@ -83,12 +86,12 @@ const AudioWaveform = ({ src, startFrom, durationInFrames, visualizationWidth, v
     if (vidConf === null) {
         throw new Error('Expected video config');
     }
-    const containerRef = (0, react_1.useRef)(null);
     const waveformCanvas = (0, react_1.useRef)(null);
     const volumeCanvas = (0, react_1.useRef)(null);
     const waveformWorker = (0, react_1.useRef)(null);
     const hasTransferredCanvas = (0, react_1.useRef)(false);
     const latestRequestId = (0, react_1.useRef)(0);
+    const shouldRenderVolumeOverlay = doesVolumeChange && typeof volume === 'string';
     (0, react_1.useEffect)(() => {
         if (canUseWorkerPath) {
             return;
@@ -173,11 +176,10 @@ const AudioWaveform = ({ src, startFrom, durationInFrames, visualizationWidth, v
     ]);
     (0, react_1.useEffect)(() => {
         const { current: canvasElement } = waveformCanvas;
-        const { current: containerElement } = containerRef;
-        if (!canvasElement || !containerElement) {
+        if (!canvasElement) {
             return;
         }
-        const h = containerElement.clientHeight;
+        const h = height;
         const w = Math.ceil(visualizationWidth);
         const vol = typeof volume === 'number' ? volume : 1;
         if (canUseWorkerPath) {
@@ -229,6 +231,7 @@ const AudioWaveform = ({ src, startFrom, durationInFrames, visualizationWidth, v
     }, [
         canUseWorkerPath,
         durationInFrames,
+        height,
         loopDisplay,
         playbackRate,
         portionPeaks,
@@ -240,12 +243,14 @@ const AudioWaveform = ({ src, startFrom, durationInFrames, visualizationWidth, v
         waveformCanvasKey,
     ]);
     (0, react_1.useEffect)(() => {
+        if (!shouldRenderVolumeOverlay) {
+            return;
+        }
         const { current: volumeCanvasElement } = volumeCanvas;
-        const { current: containerElement } = containerRef;
-        if (!volumeCanvasElement || !containerElement) {
+        if (!volumeCanvasElement) {
             return;
         }
-        const h = containerElement.clientHeight;
+        const h = height;
         const context = volumeCanvasElement.getContext('2d');
         if (!context) {
             return;
@@ -253,9 +258,6 @@ const AudioWaveform = ({ src, startFrom, durationInFrames, visualizationWidth, v
         volumeCanvasElement.width = Math.ceil(visualizationWidth);
         volumeCanvasElement.height = h;
         context.clearRect(0, 0, visualizationWidth, h);
-        if (!doesVolumeChange || typeof volume === 'number') {
-            return;
-        }
         const volumes = volume.split(',').map((v) => Number(v));
         context.beginPath();
         context.moveTo(0, h);
@@ -271,17 +273,16 @@ const AudioWaveform = ({ src, startFrom, durationInFrames, visualizationWidth, v
         });
         context.strokeStyle = colors_1.LIGHT_TRANSPARENT;
         context.stroke();
-    }, [visualizationWidth, volume, doesVolumeChange]);
+    }, [height, shouldRenderVolumeOverlay, visualizationWidth, volume]);
     if (error) {
         // eslint-disable-next-line no-console
         console.error(error);
-        return (jsx_runtime_1.jsx("div", { style: container, children: jsx_runtime_1.jsx("div", { style: errorMessage, children: "No waveform available. Audio might not support CORS." }) }));
+        return (jsx_runtime_1.jsx("div", { style: getContainerStyle(height), children: jsx_runtime_1.jsx("div", { style: errorMessage, children: "No waveform available. Audio might not support CORS." }) }));
     }
     if (!canUseWorkerPath && !peaks) {
         return null;
     }
-    return (jsx_runtime_1.jsxs("div", { ref: containerRef, style: container, children: [
-            jsx_runtime_1.jsx("canvas", { ref: waveformCanvas, style: waveformCanvasStyle }, waveformCanvasKey), jsx_runtime_1.jsx("canvas", { ref: volumeCanvas, style: volumeCanvasStyle })
-        ] }));
+    return (jsx_runtime_1.jsxs("div", { style: getContainerStyle(height), children: [
+            jsx_runtime_1.jsx("canvas", { ref: waveformCanvas, style: waveformCanvasStyle }, waveformCanvasKey), shouldRenderVolumeOverlay ? (jsx_runtime_1.jsx("canvas", { ref: volumeCanvas, style: volumeCanvasStyle })) : null] }));
 };
 exports.AudioWaveform = AudioWaveform;

package/dist/components/CompositionSelectorItem.js

@@ -131,7 +131,7 @@ const CompositionSelectorItem = ({ item, level, currentComposition, tabIndex, se
                     })
                     : null] }));
     }
-    return (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { values: contextMenu, children: jsx_runtime_1.jsx(layout_1.Row, { align: "center", children: jsx_runtime_1.jsxs("a", { ref: compositionRowRef, style: style, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, tabIndex: tabIndex, onClick: onClick, onKeyPress: onKeyPress, type: "button", title: item.composition.id, className: "__remotion-composition", "data-compname": item.composition.id, children: [(0, is_composition_still_1.isCompositionStill)(item.composition) ? (jsx_runtime_1.jsx(still_1.StillIcon, { color: hovered || selected ? 'white' : colors_1.LIGHT_TEXT, style: iconStyle })) : (jsx_runtime_1.jsx(video_1.FilmIcon, { color: hovered || selected ? 'white' : colors_1.LIGHT_TEXT, style: iconStyle })), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx("div", { style: label, children: item.composition.id }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(CompositionContextButton_1.CompositionContextButton, { values: contextMenu, visible: hovered }), jsx_runtime_1.jsx(SidebarRenderButton_1.SidebarRenderButton, { visible: hovered, composition: item.composition })
+    return (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { values: contextMenu, onOpen: null, children: jsx_runtime_1.jsx(layout_1.Row, { align: "center", children: jsx_runtime_1.jsxs("a", { ref: compositionRowRef, style: style, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, tabIndex: tabIndex, onClick: onClick, onKeyPress: onKeyPress, type: "button", title: item.composition.id, className: "__remotion-composition", "data-compname": item.composition.id, children: [(0, is_composition_still_1.isCompositionStill)(item.composition) ? (jsx_runtime_1.jsx(still_1.StillIcon, { color: hovered || selected ? 'white' : colors_1.LIGHT_TEXT, style: iconStyle })) : (jsx_runtime_1.jsx(video_1.FilmIcon, { color: hovered || selected ? 'white' : colors_1.LIGHT_TEXT, style: iconStyle })), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx("div", { style: label, children: item.composition.id }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(CompositionContextButton_1.CompositionContextButton, { values: contextMenu, visible: hovered }), jsx_runtime_1.jsx(SidebarRenderButton_1.SidebarRenderButton, { visible: hovered, composition: item.composition })
                 ] }) }) }));
 };
 exports.CompositionSelectorItem = CompositionSelectorItem;

package/dist/components/ContextMenu.d.ts

@@ -3,4 +3,5 @@ import type { ComboboxValue } from './NewComposition/ComboBox';
 export declare const ContextMenu: React.FC<{
     readonly children: React.ReactNode;
     readonly values: ComboboxValue[];
+    readonly onOpen: (() => void) | null;
 }>;

package/dist/components/ContextMenu.js

@@ -14,7 +14,7 @@ const z_index_1 = require("../state/z-index");
 const portals_1 = require("./Menu/portals");
 const styles_1 = require("./Menu/styles");
 const MenuContent_1 = require("./NewComposition/MenuContent");
-const ContextMenu = ({ children, values }) => {
+const ContextMenu = ({ children, values, onOpen }) => {
     const ref = (0, react_1.useRef)(null);
     const [opened, setOpened] = (0, react_1.useState)({ type: 'not-open' });
     const { currentZIndex } = (0, z_index_1.useZIndex)();
@@ -34,6 +34,7 @@ const ContextMenu = ({ children, values }) => {
         const onClick = (e) => {
             e.preventDefault();
             e.stopPropagation();
+            onOpen === null || onOpen === void 0 ? void 0 : onOpen();
             setOpened({ type: 'open', left: e.clientX, top: e.clientY });
             return false;
         };
@@ -41,7 +42,7 @@ const ContextMenu = ({ children, values }) => {
         return () => {
             current.removeEventListener('contextmenu', onClick);
         };
-    }, [size]);
+    }, [onOpen, size]);
     const spaceToBottom = (0, react_1.useMemo)(() => {
         if (size && opened.type === 'open') {
             return size.windowSize.height - opened.top;

package/dist/components/EditorGuides/Guide.js

@@ -80,7 +80,7 @@ const GuideComp = ({ guide, canvasDimensions, scale }) => {
             },
         ];
     }, [guide.id, setGuidesList]);
-    return (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { values: values, children: jsx_runtime_1.jsx("div", { style: guideStyle, onMouseDown: onMouseDown, className: "__remotion_editor_guide", onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, children: jsx_runtime_1.jsx("div", { style: guideContentStyle, className: [
+    return (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { values: values, onOpen: null, children: jsx_runtime_1.jsx("div", { style: guideStyle, onMouseDown: onMouseDown, className: "__remotion_editor_guide", onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, children: jsx_runtime_1.jsx("div", { style: guideContentStyle, className: [
                     '__remotion_editor_guide_content',
                     selectedGuideId === guide.id || hoveredGuideId === guide.id
                         ? '__remotion_editor_guide_selected'

package/dist/components/ExpandedTracksProvider.js

@@ -2,15 +2,10 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ExpandedTracksProvider = exports.ExpandedTracksSetterContext = exports.ExpandedTracksGetterContext = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const studio_shared_1 = require("@remotion/studio-shared");
 const react_1 = require("react");
 const migrate_expanded_tracks_for_subscription_key_1 = require("../helpers/migrate-expanded-tracks-for-subscription-key");
 const persist_boolean_map_1 = require("../helpers/persist-boolean-map");
-const nodePathInfoToExpandedKey = (info) => [
-    (0, studio_shared_1.stringifySequenceExpandedRowKey)(info.sequenceSubscriptionKey),
-    info.auxiliaryKeys.join('.'),
-    info.index,
-].join('.');
+const timeline_node_path_key_1 = require("../helpers/timeline-node-path-key");
 const SESSION_STORAGE_KEY = 'remotion.editor.expandedTracks';
 const loadExpandedTracks = () => {
     return (0, persist_boolean_map_1.loadPersistedBooleanMap)(SESSION_STORAGE_KEY);
@@ -32,7 +27,7 @@ const ExpandedTracksProvider = ({ children }) => {
     const [expandedTracks, setExpandedTracks] = (0, react_1.useState)(loadExpandedTracks);
     const toggleTrack = (0, react_1.useCallback)((nodePathInfo) => {
         setExpandedTracks((prev) => {
-            const key = nodePathInfoToExpandedKey(nodePathInfo);
+            const key = (0, timeline_node_path_key_1.timelineNodePathInfoToKey)(nodePathInfo);
             const next = (0, persist_boolean_map_1.toggleBooleanMapKey)(prev, key);
             (0, persist_boolean_map_1.persistBooleanMap)(SESSION_STORAGE_KEY, next);
             return next;
@@ -51,7 +46,7 @@ const ExpandedTracksProvider = ({ children }) => {
     const getterValue = (0, react_1.useMemo)(() => ({
         getIsExpanded: (nodePathInfo) => {
             var _a;
-            return (_a = expandedTracks[nodePathInfoToExpandedKey(nodePathInfo)]) !== null && _a !== void 0 ? _a : false;
+            return (_a = expandedTracks[(0, timeline_node_path_key_1.timelineNodePathInfoToKey)(nodePathInfo)]) !== null && _a !== void 0 ? _a : false;
         },
     }), [expandedTracks]);
     const setterValue = (0, react_1.useMemo)(() => ({

package/dist/components/Menu/MenuItem.js

@@ -20,8 +20,8 @@ const container = {
     paddingLeft: 10,
     paddingRight: 10,
     cursor: 'default',
-    paddingTop: 8,
-    paddingBottom: 8,
+    paddingTop: 6,
+    paddingBottom: 6,
     userSelect: 'none',
     WebkitUserSelect: 'none',
     border: 'none',

package/dist/components/Menu/MenuSubItem.js

@@ -19,9 +19,9 @@ const portals_1 = require("./portals");
 const styles_1 = require("./styles");
 const SubMenu_1 = require("./SubMenu");
 const container = {
-    paddingTop: 8,
-    paddingBottom: 8,
-    paddingLeft: 12,
+    paddingTop: 4,
+    paddingBottom: 4,
+    paddingLeft: 8,
     paddingRight: 8,
     cursor: 'default',
 };
@@ -38,8 +38,8 @@ const keyHintCss = {
     fontSize: 13,
 };
 const leftSpace = {
-    width: 24,
-    marginLeft: -6,
+    width: 20,
+    marginLeft: -2,
     display: 'inline-flex',
     justifyContent: 'center',
     alignItems: 'center',

package/dist/components/PreviewToolbar.js

@@ -24,13 +24,11 @@ const RenderButton_1 = require("./RenderButton");
 const SizeSelector_1 = require("./SizeSelector");
 const TimelineZoomControls_1 = require("./Timeline/TimelineZoomControls");
 const TimelineInOutToggle_1 = require("./TimelineInOutToggle");
-const TOOLBAR_HEIGHT = 56;
+const TOOLBAR_HEIGHT = 50;
 const container = {
     display: 'flex',
     justifyContent: 'center',
     borderTop: '1px solid rgba(0, 0, 0, 0.5)',
-    paddingTop: 2,
-    paddingBottom: 2,
     alignItems: 'center',
     flexDirection: 'row',
     background: colors_1.BACKGROUND,
@@ -64,7 +62,7 @@ const scrollIndicatorRight = {
 };
 const sideContainer = {
     width: 300,
-    height: 38,
+    height: 36,
     display: 'flex',
     flexDirection: 'row',
     alignItems: 'center',

package/dist/components/Timeline/Timeline.js

@@ -57,6 +57,7 @@ const TimelineList_1 = require("./TimelineList");
 const TimelinePinchZoom_1 = require("./TimelinePinchZoom");
 const TimelinePlayCursorSyncer_1 = require("./TimelinePlayCursorSyncer");
 const TimelineScrollable_1 = require("./TimelineScrollable");
+const TimelineSelection_1 = require("./TimelineSelection");
 const TimelineSlider_1 = require("./TimelineSlider");
 const TimelineTimeIndicators_1 = require("./TimelineTimeIndicators");
 const TimelineTracks_1 = require("./TimelineTracks");
@@ -98,18 +99,18 @@ const TimelineInner = () => {
             : filtered;
     }, [filtered]);
     const hasBeenCut = filtered.length > shown.length;
-    return (jsx_runtime_1.jsxs("div", { ref: timeline_refs_1.timelineVerticalScroll, style: container, className: 'css-reset ' + is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: [sequences.map((sequence) => {
-                if (!sequence.controls || !previewConnected || !sequence.getStack()) {
-                    return null;
-                }
-                return (jsx_runtime_1.jsx(SubscribeToNodePaths_1.SubscribeToNodePaths, { overrideId: sequence.controls.overrideId, schema: sequence.controls.schema, getStack: sequence.getStack, effects: sequence.effects }, sequence.id));
-            }), jsx_runtime_1.jsx(SequencePropsObserver_1.SequencePropsObserver, {}), jsx_runtime_1.jsx(TimelineHeightContainer_1.TimelineHeightContainer, { shown: shown, hasBeenCut: hasBeenCut, children: isStill ? (jsx_runtime_1.jsx(TimelineList_1.TimelineList, { timeline: shown })) : (jsx_runtime_1.jsxs(TimelineWidthProvider_1.TimelineWidthProvider, { children: [
-                        jsx_runtime_1.jsx(TimelinePinchZoom_1.TimelinePinchZoom, {}), jsx_runtime_1.jsxs(SplitterContainer_1.SplitterContainer, { orientation: "vertical", defaultFlex: 0.2, id: "names-to-timeline", maxFlex: 0.5, minFlex: 0.15, children: [
-                                jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { type: "flexer", sticky: jsx_runtime_1.jsx(TimelineTimeIndicators_1.TimelineTimePlaceholders, {}), children: jsx_runtime_1.jsx(TimelineList_1.TimelineList, { timeline: shown }) }), jsx_runtime_1.jsx(SplitterHandle_1.SplitterHandle, { onCollapse: noop, allowToCollapse: "none" }), jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { type: "anti-flexer", sticky: null, children: jsx_runtime_1.jsxs(TimelineScrollable_1.TimelineScrollable, { children: [
-                                            jsx_runtime_1.jsx(TimelineTracks_1.TimelineTracks, { timeline: shown, hasBeenCut: hasBeenCut }), jsx_runtime_1.jsx(TimelineInOutPointer_1.TimelineInOutPointer, {}), jsx_runtime_1.jsx(TimelinePlayCursorSyncer_1.TimelinePlayCursorSyncer, {}), jsx_runtime_1.jsx(TimelineDragHandler_1.TimelineDragHandler, {}), jsx_runtime_1.jsx(TimelineTimeIndicators_1.TimelineTimeIndicators, {}), jsx_runtime_1.jsx(TimelineSlider_1.TimelineSlider, {})
-                                        ] }) })
-                            ] })
-                    ] })) })
-        ] }));
+    return (jsx_runtime_1.jsx("div", { ref: timeline_refs_1.timelineVerticalScroll, style: container, className: 'css-reset ' + is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: jsx_runtime_1.jsxs(TimelineSelection_1.TimelineSelectionProvider, { children: [sequences.map((sequence) => {
+                    if (!sequence.controls || !previewConnected || !sequence.getStack()) {
+                        return null;
+                    }
+                    return (jsx_runtime_1.jsx(SubscribeToNodePaths_1.SubscribeToNodePaths, { overrideId: sequence.controls.overrideId, schema: sequence.controls.schema, getStack: sequence.getStack, effects: sequence.effects }, sequence.id));
+                }), jsx_runtime_1.jsx(SequencePropsObserver_1.SequencePropsObserver, {}), jsx_runtime_1.jsx(TimelineHeightContainer_1.TimelineHeightContainer, { shown: shown, hasBeenCut: hasBeenCut, children: isStill ? (jsx_runtime_1.jsx(TimelineList_1.TimelineList, { timeline: shown })) : (jsx_runtime_1.jsxs(TimelineWidthProvider_1.TimelineWidthProvider, { children: [
+                            jsx_runtime_1.jsx(TimelinePinchZoom_1.TimelinePinchZoom, {}), jsx_runtime_1.jsxs(SplitterContainer_1.SplitterContainer, { orientation: "vertical", defaultFlex: 0.2, id: "names-to-timeline", maxFlex: 0.5, minFlex: 0.15, children: [
+                                    jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { type: "flexer", sticky: jsx_runtime_1.jsx(TimelineTimeIndicators_1.TimelineTimePlaceholders, {}), children: jsx_runtime_1.jsx(TimelineList_1.TimelineList, { timeline: shown }) }), jsx_runtime_1.jsx(SplitterHandle_1.SplitterHandle, { onCollapse: noop, allowToCollapse: "none" }), jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { type: "anti-flexer", sticky: null, children: jsx_runtime_1.jsxs(TimelineScrollable_1.TimelineScrollable, { children: [
+                                                jsx_runtime_1.jsx(TimelineTracks_1.TimelineTracks, { timeline: shown, hasBeenCut: hasBeenCut }), jsx_runtime_1.jsx(TimelineInOutPointer_1.TimelineInOutPointer, {}), jsx_runtime_1.jsx(TimelinePlayCursorSyncer_1.TimelinePlayCursorSyncer, {}), jsx_runtime_1.jsx(TimelineDragHandler_1.TimelineDragHandler, {}), jsx_runtime_1.jsx(TimelineTimeIndicators_1.TimelineTimeIndicators, {}), jsx_runtime_1.jsx(TimelineSlider_1.TimelineSlider, {})
+                                            ] }) })
+                                ] })
+                        ] })) })
+            ] }) }));
 };
 exports.Timeline = react_1.default.memo(TimelineInner);

package/dist/components/Timeline/TimelineDragHandler.js

@@ -501,6 +501,6 @@ const TimelineDragHandlerInner = () => {
         ];
     }, [setInAndOutFrames, videoConfig.id]);
     return (jsx_runtime_1.jsxs("div", { style: style, onPointerDown: onPointerDown, children: [
-            jsx_runtime_1.jsx("div", { style: inner, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME }), inFrame !== null && (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { values: inContextMenu, children: jsx_runtime_1.jsx(TimelineInOutPointerHandle_1.TimelineInOutPointerHandle, { type: "in", atFrame: inFrame, dragging: inOutDragging.dragging === 'in' }) })), outFrame !== null && (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { values: outContextMenu, children: jsx_runtime_1.jsx(TimelineInOutPointerHandle_1.TimelineInOutPointerHandle, { type: "out", dragging: inOutDragging.dragging === 'out', atFrame: outFrame }) }))] }));
+            jsx_runtime_1.jsx("div", { style: inner, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME }), inFrame !== null && (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { values: inContextMenu, onOpen: null, children: jsx_runtime_1.jsx(TimelineInOutPointerHandle_1.TimelineInOutPointerHandle, { type: "in", atFrame: inFrame, dragging: inOutDragging.dragging === 'in' }) })), outFrame !== null && (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { values: outContextMenu, onOpen: null, children: jsx_runtime_1.jsx(TimelineInOutPointerHandle_1.TimelineInOutPointerHandle, { type: "out", dragging: inOutDragging.dragging === 'out', atFrame: outFrame }) }))] }));
 };
 const TimelineDragHandlerInnerMemo = react_1.default.memo(TimelineDragHandlerInner);

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

@@ -1,10 +1,12 @@
 import React from 'react';
 import type { SequencePropsSubscriptionKey } from 'remotion';
 import type { CodePosition } from '../../error-overlay/react-overlay/utils/get-source-map';
+import type { SequenceNodePathInfo } from '../../helpers/get-timeline-sequence-sort-key';
 import type { EffectSchemaFieldInfo } from '../../helpers/timeline-layout';
 export declare const TimelineEffectFieldRow: React.FC<{
     readonly field: EffectSchemaFieldInfo;
     readonly validatedLocation: CodePosition;
     readonly rowDepth: number;
     readonly nodePath: SequencePropsSubscriptionKey;
+    readonly nodePathInfo: SequenceNodePathInfo;
 }>;

package/dist/components/Timeline/TimelineEffectFieldRow.js

@@ -6,23 +6,17 @@ 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 call_api_1 = require("../call-api");
 const get_timeline_keyframes_1 = require("./get-timeline-keyframes");
 const save_prop_queue_1 = require("./save-prop-queue");
 const timeline_field_row_layout_1 = require("./timeline-field-row-layout");
 const TimelineExpandArrowButton_1 = require("./TimelineExpandArrowButton");
+const TimelineFieldLabel_1 = require("./TimelineFieldLabel");
 const TimelineLayerEye_1 = require("./TimelineLayerEye");
 const TimelineRowChrome_1 = require("./TimelineRowChrome");
 const TimelineSchemaField_1 = require("./TimelineSchemaField");
-const fieldRowBase = {
-    paddingRight: timeline_layout_1.EXPANDED_SECTION_PADDING_RIGHT,
-};
-const fieldName = {
-    fontSize: 12,
-    color: 'rgba(255, 255, 255, 0.8)',
-    userSelect: 'none',
-};
+const TimelineSelection_1 = require("./TimelineSelection");
+const fieldRowBase = {};
 const Value = ({ field, nodePath, validatedLocation }) => {
     var _a;
     var _b;
@@ -130,7 +124,8 @@ const Value = ({ field, nodePath, validatedLocation }) => {
         throw new Error(`Unsupported effect status: ${effectStatus.reason}`);
     }
     if (propStatus === null || !propStatus.canUpdate) {
-        if ((propStatus === null || propStatus === void 0 ? void 0 : propStatus.reason) === 'computed') {
+        if ((propStatus === null || propStatus === void 0 ? void 0 : propStatus.reason) === 'computed' ||
+            (propStatus === null || propStatus === void 0 ? void 0 : propStatus.reason) === 'keyframed') {
             return jsx_runtime_1.jsx(TimelineSchemaField_1.UnsupportedStatus, { label: (0, get_timeline_keyframes_1.getComputedStatusLabel)(propStatus) });
         }
         return null;
@@ -143,17 +138,17 @@ const Value = ({ field, nodePath, validatedLocation }) => {
     });
     return (jsx_runtime_1.jsx(TimelineSchemaField_1.TimelineFieldValue, { field: field, propStatus: propStatus, onSave: onSave, onDragValueChange: onDragValueChange, onDragEnd: onDragEnd, effectiveValue: effectiveValue }));
 };
-const TimelineEffectFieldRow = ({ field, validatedLocation, rowDepth, nodePath }) => {
+const TimelineEffectFieldRow = ({ field, validatedLocation, rowDepth, nodePath, nodePathInfo }) => {
     var _a;
+    const selection = (0, TimelineSelection_1.useTimelineRowSelection)(nodePathInfo);
     const style = (0, react_1.useMemo)(() => {
         return {
             ...fieldRowBase,
             height: field.rowHeight,
         };
     }, [field.rowHeight]);
-    const labelRowStyle = (0, react_1.useMemo)(() => (0, timeline_field_row_layout_1.getTimelineFieldLabelRowStyle)(rowDepth), [rowDepth]);
-    return (jsx_runtime_1.jsxs(TimelineRowChrome_1.TimelineRowChrome, { depth: rowDepth, eye: jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEyeSpacer, {}), arrow: jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowSpacer, {}), style: style, children: [
-            jsx_runtime_1.jsx("div", { style: labelRowStyle, children: jsx_runtime_1.jsx("span", { style: fieldName, children: (_a = field.description) !== null && _a !== void 0 ? _a : field.key }) }), jsx_runtime_1.jsx(Value, { field: field, nodePath: nodePath, validatedLocation: validatedLocation })
+    return (jsx_runtime_1.jsxs(TimelineRowChrome_1.TimelineRowChrome, { depth: rowDepth, eye: jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEyeSpacer, {}), 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: [
+            jsx_runtime_1.jsx(TimelineFieldLabel_1.TimelineFieldLabel, { rowDepth: rowDepth, selected: selection.selected, label: (_a = field.description) !== null && _a !== void 0 ? _a : field.key }), jsx_runtime_1.jsx("div", { style: timeline_field_row_layout_1.timelineFieldValueColumnStyle, children: jsx_runtime_1.jsx(Value, { field: field, nodePath: nodePath, validatedLocation: validatedLocation }) })
         ] }));
 };
 exports.TimelineEffectFieldRow = TimelineEffectFieldRow;

package/dist/components/Timeline/TimelineEffectGroupRow.js

@@ -13,6 +13,7 @@ const save_effect_prop_1 = require("./save-effect-prop");
 const TimelineExpandArrowButton_1 = require("./TimelineExpandArrowButton");
 const TimelineLayerEye_1 = require("./TimelineLayerEye");
 const TimelineRowChrome_1 = require("./TimelineRowChrome");
+const TimelineSelection_1 = require("./TimelineSelection");
 const rowLabel = {
     fontSize: 12,
     color: 'rgba(255, 255, 255, 0.8)',
@@ -26,6 +27,7 @@ const TimelineEffectGroupRow = ({ label, nodePathInfo, effectIndex, effectSchema
     const previewConnected = previewServerState.type === 'connected';
     const { codeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeCodeValuesContext);
     const { setCodeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
+    const selection = (0, TimelineSelection_1.useTimelineRowSelection)(nodePathInfo);
     const effectStatus = (0, react_1.useMemo)(() => remotion_1.Internals.getEffectCodeValuesCtx({
         codeValues,
         nodePath,
@@ -121,24 +123,31 @@ const TimelineEffectGroupRow = ({ label, nodePathInfo, effectIndex, effectSchema
     const isExpanded = getIsExpanded(nodePathInfo);
     const rowStyle = (0, react_1.useMemo)(() => ({
         height: timeline_layout_1.TREE_GROUP_ROW_HEIGHT,
-        paddingRight: timeline_layout_1.EXPANDED_SECTION_PADDING_RIGHT,
     }), []);
     const labelStyle = (0, react_1.useMemo)(() => {
         const hoverEffect = labelHovered && documentationLink !== null;
         return {
             ...rowLabel,
+            ...(0, TimelineSelection_1.getTimelineSelectedLabelStyle)(selection.selected, true),
+            alignSelf: 'stretch',
+            alignItems: 'center',
+            color: (0, TimelineSelection_1.getTimelineColor)(selection.selected, true),
+            display: 'flex',
+            flex: 1,
+            minWidth: 0,
+            paddingRight: timeline_layout_1.EXPANDED_SECTION_PADDING_RIGHT,
             textDecoration: hoverEffect ? 'underline' : 'none',
             textUnderlineOffset: 2,
             cursor: hoverEffect ? 'pointer' : undefined,
         };
-    }, [documentationLink, labelHovered]);
+    }, [documentationLink, labelHovered, selection.selected]);
     const onClickLabel = (0, react_1.useCallback)(() => {
         if (documentationLink === null) {
             return;
         }
         window.open(documentationLink, '_blank', 'noopener,noreferrer');
     }, [documentationLink]);
-    const row = (jsx_runtime_1.jsx(TimelineRowChrome_1.TimelineRowChrome, { depth: rowDepth, eye: canToggle ? (jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEye, { type: "effect", hidden: isDisabled, onInvoked: onToggle })) : (jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEyeSpacer, {})), arrow: jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowButton, { isExpanded: isExpanded, onClick: () => toggleTrack(nodePathInfo), label: `${label} section`, disabled: false }), style: rowStyle, children: jsx_runtime_1.jsx("span", { onPointerEnter: () => setLabelHovered(true), onPointerLeave: () => setLabelHovered(false), onClick: onClickLabel, title: documentationLink ? `Open documentation: ${documentationLink}` : label, style: labelStyle, children: label }) }));
-    return previewConnected ? (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { values: contextMenuValues, children: row })) : (row);
+    const row = (jsx_runtime_1.jsx(TimelineRowChrome_1.TimelineRowChrome, { depth: rowDepth, eye: canToggle ? (jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEye, { type: "effect", hidden: isDisabled, onInvoked: onToggle })) : (jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEyeSpacer, {})), arrow: jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowButton, { isExpanded: isExpanded, onClick: () => toggleTrack(nodePathInfo), label: `${label} section`, disabled: false }), style: rowStyle, selected: selection.selected, selectable: selection.selectable, onSelect: selection.onSelect, showSelectedBackground: true, containsSelection: false, outerHeight: null, children: jsx_runtime_1.jsx("span", { onPointerEnter: () => setLabelHovered(true), onPointerLeave: () => setLabelHovered(false), onClick: onClickLabel, title: documentationLink ? `Open documentation: ${documentationLink}` : label, style: labelStyle, children: label }) }));
+    return previewConnected ? (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { values: contextMenuValues, onOpen: selection.selectable ? selection.onSelect : null, children: row })) : (row);
 };
 exports.TimelineEffectGroupRow = TimelineEffectGroupRow;

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

@@ -0,0 +1,11 @@
+import React from 'react';
+import type { SequenceNodePathInfo } from '../../helpers/get-timeline-sequence-sort-key';
+export declare const TimelineExpandedKeyframeRow: React.NamedExoticComponent<{
+    readonly height: number;
+    readonly keyframes: {
+        frame: number;
+        value: unknown;
+    }[];
+    readonly nodePathInfo: SequenceNodePathInfo;
+    readonly showSeparator: boolean;
+}>;

package/dist/components/Timeline/TimelineExpandedKeyframeRow.js

@@ -0,0 +1,23 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TimelineExpandedKeyframeRow = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importDefault(require("react"));
+const timeline_layout_1 = require("../../helpers/timeline-layout");
+const TimelineKeyframeDiamond_1 = require("./TimelineKeyframeDiamond");
+const TimelineSelection_1 = require("./TimelineSelection");
+const row = {
+    position: 'relative',
+};
+const rowSeparator = {
+    height: timeline_layout_1.TIMELINE_ITEM_BORDER_BOTTOM,
+};
+const TimelineExpandedKeyframeRowUnmemoized = ({ height, keyframes, nodePathInfo, showSeparator }) => {
+    const { selected: rowSelected } = (0, TimelineSelection_1.useTimelineRowSelection)(nodePathInfo);
+    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [showSeparator ? jsx_runtime_1.jsx("div", { style: rowSeparator }) : null, jsx_runtime_1.jsxs("div", { style: { ...row, height }, children: [rowSelected ? (jsx_runtime_1.jsx("div", { style: TimelineSelection_1.TIMELINE_SELECTED_TRACK_HIGHLIGHT_STYLE })) : null, keyframes.map((keyframe) => (jsx_runtime_1.jsx(TimelineKeyframeDiamond_1.TimelineKeyframeDiamond, { frame: keyframe.frame, rowHeight: height, nodePathInfo: nodePathInfo }, keyframe.frame)))] })
+        ] }));
+};
+exports.TimelineExpandedKeyframeRow = react_1.default.memo(TimelineExpandedKeyframeRowUnmemoized);

package/dist/components/Timeline/TimelineExpandedRow.js

@@ -1,7 +1,11 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TimelineExpandedRow = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importDefault(require("react"));
 const timeline_layout_1 = require("../../helpers/timeline-layout");
 const timeline_row_layout_1 = require("./timeline-row-layout");
 const TimelineEffectFieldRow_1 = require("./TimelineEffectFieldRow");
@@ -10,6 +14,7 @@ const TimelineExpandArrowButton_1 = require("./TimelineExpandArrowButton");
 const TimelineFieldRow_1 = require("./TimelineFieldRow");
 const TimelineLayerEye_1 = require("./TimelineLayerEye");
 const TimelineRowChrome_1 = require("./TimelineRowChrome");
+const TimelineSelection_1 = require("./TimelineSelection");
 const rowLabel = {
     fontSize: 12,
     color: 'rgba(255, 255, 255, 0.8)',
@@ -17,28 +22,39 @@ const rowLabel = {
 };
 const TimelineExpandedRow = ({ node, depth, nestedDepth, getIsExpanded, toggleTrack, validatedLocation, nodePath, schema, }) => {
     const rowDepth = (0, timeline_row_layout_1.getExpandedRowDepth)({ nestedDepth, treeDepth: depth });
+    const selection = (0, TimelineSelection_1.useTimelineRowSelection)(node.nodePathInfo);
+    const labelStyle = react_1.default.useMemo(() => ({
+        ...rowLabel,
+        ...(0, TimelineSelection_1.getTimelineSelectedLabelStyle)(selection.selected, true),
+        alignSelf: 'stretch',
+        alignItems: 'center',
+        color: (0, TimelineSelection_1.getTimelineColor)(selection.selected, true),
+        display: 'flex',
+        flex: 1,
+        minWidth: 0,
+        paddingRight: timeline_layout_1.EXPANDED_SECTION_PADDING_RIGHT,
+    }), [selection.selected]);
     if (node.kind === 'group') {
         if (node.effectInfo) {
             return (jsx_runtime_1.jsx(TimelineEffectGroupRow_1.TimelineEffectGroupRow, { label: node.label, nodePathInfo: node.nodePathInfo, effectIndex: node.effectInfo.effectIndex, effectSchema: node.effectInfo.effectSchema, documentationLink: node.effectInfo.documentationLink, nodePath: nodePath, validatedLocation: validatedLocation, rowDepth: rowDepth, getIsExpanded: getIsExpanded, toggleTrack: toggleTrack }));
         }
+        // Group like "Effects"
         const isExpanded = getIsExpanded(node.nodePathInfo);
         return (jsx_runtime_1.jsx(TimelineRowChrome_1.TimelineRowChrome, { depth: rowDepth, eye: jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEyeSpacer, {}), arrow: jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowButton, { isExpanded: isExpanded, onClick: () => toggleTrack(node.nodePathInfo), label: `${node.label} section`, disabled: false }), style: {
                 height: timeline_layout_1.TREE_GROUP_ROW_HEIGHT,
-                paddingRight: timeline_layout_1.EXPANDED_SECTION_PADDING_RIGHT,
-            }, children: jsx_runtime_1.jsx("span", { style: rowLabel, children: node.label }) }));
+            }, selected: selection.selected, selectable: selection.selectable, onSelect: selection.onSelect, showSelectedBackground: true, containsSelection: false, outerHeight: null, children: jsx_runtime_1.jsx("span", { style: labelStyle, children: node.label }) }));
     }
     if (node.field) {
         if (node.field.kind === 'effect-field') {
-            return (jsx_runtime_1.jsx(TimelineEffectFieldRow_1.TimelineEffectFieldRow, { field: node.field, validatedLocation: validatedLocation, rowDepth: rowDepth, nodePath: nodePath }));
+            return (jsx_runtime_1.jsx(TimelineEffectFieldRow_1.TimelineEffectFieldRow, { field: node.field, validatedLocation: validatedLocation, rowDepth: rowDepth, nodePath: nodePath, nodePathInfo: node.nodePathInfo }));
         }
         if (node.field.kind === 'sequence-field') {
-            return (jsx_runtime_1.jsx(TimelineFieldRow_1.TimelineFieldRow, { field: node.field, validatedLocation: validatedLocation, rowDepth: rowDepth, nodePath: nodePath, schema: schema }));
+            return (jsx_runtime_1.jsx(TimelineFieldRow_1.TimelineFieldRow, { field: node.field, validatedLocation: validatedLocation, rowDepth: rowDepth, nodePath: nodePath, nodePathInfo: node.nodePathInfo, schema: schema }));
         }
         throw new Error('Unexpected field kind: ' + JSON.stringify(node.field));
     }
     return (jsx_runtime_1.jsx(TimelineRowChrome_1.TimelineRowChrome, { depth: rowDepth, eye: jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEyeSpacer, {}), arrow: jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowSpacer, {}), style: {
             height: (0, timeline_layout_1.getTreeRowHeight)(node),
-            paddingRight: timeline_layout_1.EXPANDED_SECTION_PADDING_RIGHT,
-        }, children: jsx_runtime_1.jsx("span", { style: rowLabel, children: node.label }) }));
+        }, selected: selection.selected, selectable: selection.selectable, onSelect: selection.onSelect, showSelectedBackground: true, containsSelection: false, outerHeight: null, children: jsx_runtime_1.jsx("span", { style: labelStyle, children: node.label }) }));
 };
 exports.TimelineExpandedRow = TimelineExpandedRow;

package/dist/components/Timeline/TimelineExpandedSection.js

@@ -50,8 +50,8 @@ const expandedSectionBase = {
     borderBottom: `1px solid ${colors_1.TIMELINE_TRACK_SEPARATOR}`,
 };
 const separator = {
-    height: 1,
-    backgroundColor: colors_1.TIMELINE_TRACK_SEPARATOR,
+    height: 0,
+    borderBottom: `1px solid ${colors_1.TIMELINE_TRACK_SEPARATOR}`,
 };
 const TimelineExpandedSection = ({ sequence, validatedLocation, nodePathInfo, nestedDepth }) => {
     const { getIsExpanded } = (0, react_1.useContext)(ExpandedTracksProvider_1.ExpandedTracksGetterContext);

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { type TSequence } from 'remotion';
+import type { TSequence } from 'remotion';
 import type { SequenceNodePathInfo } from '../../helpers/get-timeline-sequence-sort-key';
 export declare const TimelineExpandedTrackKeyframes: React.NamedExoticComponent<{
     readonly sequence: TSequence;