@remotion/studio 4.0.467 → 4.0.469

package/dist/components/Timeline/TimelineExpandedTrackKeyframes.js

@@ -1,124 +1,19 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TimelineExpandedTrackKeyframes = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = __importStar(require("react"));
-const remotion_1 = require("remotion");
-const colors_1 = require("../../helpers/colors");
-const get_left_of_timeline_slider_1 = require("../../helpers/get-left-of-timeline-slider");
-const timeline_layout_1 = require("../../helpers/timeline-layout");
-const ExpandedTracksProvider_1 = require("../ExpandedTracksProvider");
-const get_timeline_keyframes_1 = require("./get-timeline-keyframes");
-const TimelineWidthProvider_1 = require("./TimelineWidthProvider");
-const row = {
-    position: 'relative',
-};
-const separator = {
-    height: 1,
-    backgroundColor: colors_1.TIMELINE_TRACK_SEPARATOR,
-};
-const section = {
-    borderBottom: `1px solid ${colors_1.TIMELINE_TRACK_SEPARATOR}`,
-};
-const diamondBase = {
-    position: 'absolute',
-    width: 8,
-    height: 8,
-    backgroundColor: colors_1.LIGHT_TEXT,
-    borderRadius: 1,
-    boxShadow: '0 0 0 1px rgba(0, 0, 0, 0.4)',
-    pointerEvents: 'none',
-};
-const getNodeKeyframes = ({ node, nodePath, codeValues, }) => {
-    var _a, _b;
-    if (node.kind !== 'field' || node.field === null) {
-        return [];
-    }
-    if (node.field.kind === 'sequence-field') {
-        return (0, get_timeline_keyframes_1.getTimelineKeyframes)((_a = remotion_1.Internals.getCodeValuesCtx(codeValues, nodePath)) === null || _a === void 0 ? void 0 : _a[node.field.key]);
-    }
-    const effectStatus = remotion_1.Internals.getEffectCodeValuesCtx({
-        codeValues,
-        nodePath,
-        effectIndex: node.field.effectIndex,
-    });
-    return (0, get_timeline_keyframes_1.getTimelineKeyframes)(effectStatus.type === 'can-update-effect'
-        ? (_b = effectStatus.props) === null || _b === void 0 ? void 0 : _b[node.field.key]
-        : null);
-};
-const TimelineExpandedTrackKeyframesInner = ({ nodePathInfo, sequence }) => {
-    const videoConfig = (0, remotion_1.useVideoConfig)();
-    const timelineWidth = (0, react_1.useContext)(TimelineWidthProvider_1.TimelineWidthContext);
-    const { getIsExpanded } = (0, react_1.useContext)(ExpandedTracksProvider_1.ExpandedTracksGetterContext);
-    const { codeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeCodeValuesContext);
-    const tree = (0, react_1.useMemo)(() => (0, timeline_layout_1.buildTimelineTree)({
+const react_1 = __importDefault(require("react"));
+const TimelineExpandedKeyframeRow_1 = require("./TimelineExpandedKeyframeRow");
+const use_expanded_track_keyframe_rows_1 = require("./use-expanded-track-keyframe-rows");
+const TimelineExpandedTrackKeyframesInner = ({ nodePathInfo, sequence, keyframeDisplayOffset }) => {
+    const { rows, expandedHeight } = (0, use_expanded_track_keyframe_rows_1.useExpandedTrackKeyframeRows)({
         sequence,
         nodePathInfo,
-        getDragOverrides: () => ({}),
-        getEffectDragOverrides: () => ({}),
-        codeValues,
-    }), [codeValues, 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,
-        codeValues,
-    }), [codeValues, getIsExpanded, nodePathInfo, sequence]);
-    const rows = (0, react_1.useMemo)(() => flat.map(({ node }) => ({
-        height: (0, timeline_layout_1.getTreeRowHeight)(node),
-        keyframes: getNodeKeyframes({
-            node,
-            nodePath: nodePathInfo.sequenceSubscriptionKey,
-            codeValues,
-        }),
-        key: JSON.stringify(node.nodePathInfo),
-    })), [codeValues, flat, nodePathInfo.sequenceSubscriptionKey]);
-    return (jsx_runtime_1.jsx("div", { style: {
-            height: expandedHeight + timeline_layout_1.TIMELINE_ITEM_BORDER_BOTTOM,
-        }, children: jsx_runtime_1.jsx("div", { style: { ...section, height: expandedHeight }, children: rows.map(({ height, keyframes, key }, 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("div", { style: { ...row, height }, children: timelineWidth === null
-                                ? null
-                                : keyframes.map((keyframe) => (jsx_runtime_1.jsx("div", { style: {
-                                        ...diamondBase,
-                                        left: (0, get_left_of_timeline_slider_1.getXPositionOfItemInTimelineImperatively)(keyframe.frame, videoConfig.durationInFrames, timelineWidth) - timeline_layout_1.TIMELINE_PADDING,
-                                        top: height / 2,
-                                        transform: 'translate(-50%, -50%) rotate(45deg)',
-                                    }, title: `Keyframe at frame ${keyframe.frame}` }, String(keyframe.frame)))) })
-                    ] }, key));
-            }) }) }));
+        keyframeDisplayOffset,
+    });
+    return (jsx_runtime_1.jsx("div", { style: { height: expandedHeight }, children: rows.map((row, index) => (jsx_runtime_1.jsx(TimelineExpandedKeyframeRow_1.TimelineExpandedKeyframeRow, { height: row.height, keyframes: row.keyframes, nodePathInfo: row.nodePathInfo, showSeparator: index > 0 }, row.rowKey))) }));
 };
 exports.TimelineExpandedTrackKeyframes = react_1.default.memo(TimelineExpandedTrackKeyframesInner);

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

@@ -0,0 +1,6 @@
+import React from 'react';
+export declare const TimelineFieldLabel: React.FC<{
+    readonly rowDepth: number;
+    readonly selected: boolean;
+    readonly label: string;
+}>;

package/dist/components/Timeline/TimelineFieldLabel.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TimelineFieldLabel = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const timeline_field_row_layout_1 = require("./timeline-field-row-layout");
+const TimelineSelection_1 = require("./TimelineSelection");
+const fieldNameBase = {
+    fontSize: 12,
+    color: 'rgba(255, 255, 255, 0.8)',
+    userSelect: 'none',
+    whiteSpace: 'nowrap',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    flex: 1,
+    minWidth: 0,
+};
+const TimelineFieldLabel = ({ rowDepth, selected, label }) => {
+    const labelRowStyle = (0, react_1.useMemo)(() => ({
+        ...(0, timeline_field_row_layout_1.getTimelineFieldLabelRowStyle)(rowDepth),
+        ...(0, TimelineSelection_1.getTimelineSelectedLabelStyle)(selected, true),
+        alignSelf: 'stretch',
+    }), [rowDepth, selected]);
+    const fieldNameStyle = (0, react_1.useMemo)(() => ({
+        ...fieldNameBase,
+        color: (0, TimelineSelection_1.getTimelineColor)(selected, true),
+    }), [selected]);
+    return (jsx_runtime_1.jsx("div", { style: labelRowStyle, children: jsx_runtime_1.jsx("span", { style: fieldNameStyle, title: label, children: label }) }));
+};
+exports.TimelineFieldLabel = TimelineFieldLabel;

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

@@ -1,12 +1,13 @@
 import React from 'react';
-import type { SequencePropsSubscriptionKey } from 'remotion';
-import type { SequenceSchema } from 'remotion';
+import type { SequencePropsSubscriptionKey, SequenceSchema } 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 { SchemaFieldInfo } from '../../helpers/timeline-layout';
 export declare const TimelineFieldRow: React.FC<{
     readonly field: SchemaFieldInfo;
     readonly validatedLocation: CodePosition;
     readonly rowDepth: number;
     readonly nodePath: SequencePropsSubscriptionKey;
+    readonly nodePathInfo: SequenceNodePathInfo;
     readonly schema: SequenceSchema;
 }>;

package/dist/components/Timeline/TimelineFieldRow.js

@@ -5,21 +5,15 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
 const client_id_1 = require("../../helpers/client-id");
-const timeline_layout_1 = require("../../helpers/timeline-layout");
 const save_sequence_prop_1 = require("./save-sequence-prop");
 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, schema, codeValue }) => {
     const { getDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeDragOverridesContext);
     const { setDragOverrides, clearDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
@@ -92,9 +86,10 @@ const Value = ({ field, nodePath, validatedLocation, schema, codeValue }) => {
     }, [clearDragOverrides, nodePath]);
     return (jsx_runtime_1.jsx(TimelineSchemaField_1.TimelineFieldValue, { field: field, propStatus: codeValue, onSave: onSave, onDragValueChange: onDragValueChange, onDragEnd: onDragEnd, effectiveValue: effectiveValue }));
 };
-const TimelineFieldRow = ({ field, validatedLocation, rowDepth, nodePath, schema }) => {
+const TimelineFieldRow = ({ field, validatedLocation, rowDepth, nodePath, nodePathInfo, schema }) => {
     var _a, _b;
     const { codeValues: visualModeCodeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeCodeValuesContext);
+    const selection = (0, TimelineSelection_1.useTimelineRowSelection)(nodePathInfo);
     const codeValuesForOverride = remotion_1.Internals.getCodeValuesCtx(visualModeCodeValues, nodePath);
     const codeValue = (_a = codeValuesForOverride === null || codeValuesForOverride === void 0 ? void 0 : codeValuesForOverride[field.key]) !== null && _a !== void 0 ? _a : null;
     const style = (0, react_1.useMemo)(() => {
@@ -103,11 +98,10 @@ const TimelineFieldRow = ({ field, validatedLocation, rowDepth, nodePath, schema
             height: field.rowHeight,
         };
     }, [field.rowHeight]);
-    const labelRowStyle = (0, react_1.useMemo)(() => (0, timeline_field_row_layout_1.getTimelineFieldLabelRowStyle)(rowDepth), [rowDepth]);
     if (codeValue === null) {
         return null;
     }
-    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: (_b = field.description) !== null && _b !== void 0 ? _b : field.key }) }), codeValue.canUpdate ? (jsx_runtime_1.jsx(Value, { field: field, nodePath: nodePath, validatedLocation: validatedLocation, schema: schema, codeValue: codeValue })) : (jsx_runtime_1.jsx(TimelineSchemaField_1.TimelineNonEditableStatus, { propStatus: codeValue }))] }));
+    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: (_b = field.description) !== null && _b !== void 0 ? _b : field.key }), codeValue.canUpdate ? (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, codeValue: codeValue }) })) : (jsx_runtime_1.jsx("div", { style: timeline_field_row_layout_1.timelineFieldValueColumnStyle, children: jsx_runtime_1.jsx(TimelineSchemaField_1.TimelineNonEditableStatus, { propStatus: codeValue }) }))] }));
 };
 exports.TimelineFieldRow = TimelineFieldRow;

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

@@ -0,0 +1,5 @@
+import React from 'react';
+import type { OriginalPosition } from '../../error-overlay/react-overlay/utils/get-source-map';
+export declare const TimelineItemStack: React.FC<{
+    readonly originalLocation: OriginalPosition | null;
+}>;

package/dist/components/Timeline/TimelineItemStack.js

@@ -0,0 +1,82 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TimelineItemStack = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const client_id_1 = require("../../helpers/client-id");
+const colors_1 = require("../../helpers/colors");
+const get_git_menu_item_1 = require("../../helpers/get-git-menu-item");
+const open_in_editor_1 = require("../../helpers/open-in-editor");
+const layout_1 = require("../layout");
+const NotificationCenter_1 = require("../Notifications/NotificationCenter");
+const Spinner_1 = require("../Spinner");
+const TimelineSelection_1 = require("./TimelineSelection");
+const source_attribution_1 = require("./TimelineStack/source-attribution");
+const TimelineItemStack = ({ originalLocation }) => {
+    const [hovered, setHovered] = (0, react_1.useState)(false);
+    const [opening, setOpening] = (0, react_1.useState)(false);
+    const connectionStatus = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx)
+        .previewServerState.type;
+    const openEditor = (0, react_1.useCallback)(async (location) => {
+        if (!window.remotion_editorName) {
+            return;
+        }
+        setOpening(true);
+        try {
+            await (0, open_in_editor_1.openOriginalPositionInEditor)(location);
+        }
+        catch (err) {
+            (0, NotificationCenter_1.showNotification)(err.message, 2000);
+        }
+        finally {
+            setOpening(false);
+        }
+    }, []);
+    const canOpenInEditor = Boolean(window.remotion_editorName &&
+        connectionStatus === 'connected' &&
+        originalLocation);
+    const canOpenInGitHub = Boolean(window.remotion_gitSource && originalLocation);
+    const hoverable = !TimelineSelection_1.SELECTION_ENABLED && (canOpenInEditor || canOpenInGitHub);
+    const onClick = (0, react_1.useCallback)(() => {
+        if (!originalLocation) {
+            return;
+        }
+        if (canOpenInEditor) {
+            openEditor(originalLocation);
+            return;
+        }
+        if (canOpenInGitHub) {
+            window.open((0, get_git_menu_item_1.getGitRefUrl)(window.remotion_gitSource, originalLocation), '_blank');
+        }
+    }, [canOpenInEditor, canOpenInGitHub, openEditor, originalLocation]);
+    const onPointerEnter = (0, react_1.useCallback)(() => setHovered(true), []);
+    const onPointerLeave = (0, react_1.useCallback)(() => setHovered(false), []);
+    const style = (0, react_1.useMemo)(() => {
+        return {
+            fontSize: 12,
+            color: opening
+                ? colors_1.VERY_LIGHT_TEXT
+                : hovered && hoverable
+                    ? colors_1.LIGHT_TEXT
+                    : colors_1.VERY_LIGHT_TEXT,
+            cursor: hoverable ? 'pointer' : undefined,
+            display: 'flex',
+            flexDirection: 'row',
+            alignItems: 'center',
+            whiteSpace: 'nowrap',
+            textOverflow: 'ellipsis',
+            overflow: 'hidden',
+            flexShrink: 100000,
+            userSelect: 'none',
+            WebkitUserSelect: 'none',
+        };
+    }, [opening, hovered, hoverable]);
+    if (!originalLocation) {
+        return null;
+    }
+    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+            jsx_runtime_1.jsx("div", { onPointerEnter: hoverable ? onPointerEnter : undefined, onPointerLeave: hoverable ? onPointerLeave : undefined, onClick: hoverable ? onClick : undefined, style: style, children: (0, source_attribution_1.getOriginalSourceAttribution)(originalLocation) }), opening ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                    jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(Spinner_1.Spinner, { duration: 0.5, size: 12 })
+                ] })) : null] }));
+};
+exports.TimelineItemStack = TimelineItemStack;

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

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { SequenceNodePathInfo } from '../../helpers/get-timeline-sequence-sort-key';
+export declare const TimelineKeyframeDiamond: React.NamedExoticComponent<{
+    readonly frame: number;
+    readonly rowHeight: number;
+    readonly nodePathInfo: SequenceNodePathInfo;
+}>;

package/dist/components/Timeline/TimelineKeyframeDiamond.js

@@ -0,0 +1,87 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TimelineKeyframeDiamond = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importStar(require("react"));
+const remotion_1 = require("remotion");
+const colors_1 = require("../../helpers/colors");
+const get_left_of_timeline_slider_1 = require("../../helpers/get-left-of-timeline-slider");
+const timeline_layout_1 = require("../../helpers/timeline-layout");
+const TimelineSelection_1 = require("./TimelineSelection");
+const TimelineWidthProvider_1 = require("./TimelineWidthProvider");
+const diamondBase = {
+    position: 'absolute',
+    width: 8,
+    height: 8,
+    backgroundColor: colors_1.LIGHT_TEXT,
+    borderRadius: 1,
+    boxShadow: '0 0 0 1px rgba(0, 0, 0, 0.4)',
+    pointerEvents: 'none',
+};
+const TimelineKeyframeDiamondUnmemoized = ({ frame, rowHeight, nodePathInfo }) => {
+    const videoConfig = (0, remotion_1.useVideoConfig)();
+    const timelineWidth = (0, react_1.useContext)(TimelineWidthProvider_1.TimelineWidthContext);
+    const { selected, onSelect, selectable } = (0, TimelineSelection_1.useTimelineKeyframeSelection)(nodePathInfo, frame);
+    const style = (0, react_1.useMemo)(() => {
+        if (timelineWidth === null) {
+            return null;
+        }
+        return {
+            ...diamondBase,
+            backgroundColor: selected
+                ? TimelineSelection_1.TIMELINE_SELECTED_LABEL_BACKGROUND
+                : colors_1.LIGHT_TEXT,
+            border: 'none',
+            cursor: 'default',
+            left: (0, get_left_of_timeline_slider_1.getXPositionOfItemInTimelineImperatively)(frame, videoConfig.durationInFrames, timelineWidth) - timeline_layout_1.TIMELINE_PADDING,
+            padding: 0,
+            pointerEvents: 'auto',
+            top: rowHeight / 2,
+            transform: 'translate(-50%, -50%) rotate(45deg)',
+        };
+    }, [frame, rowHeight, selected, timelineWidth, videoConfig.durationInFrames]);
+    const onPointerDown = (0, react_1.useCallback)((e) => {
+        if (e.button === 0) {
+            e.stopPropagation();
+            onSelect();
+        }
+    }, [onSelect]);
+    if (style === null) {
+        return null;
+    }
+    return (jsx_runtime_1.jsx("button", { type: "button", style: style, title: `Keyframe at frame ${frame}`, "aria-label": `Select keyframe at frame ${frame}`, onPointerDown: selectable ? onPointerDown : undefined }));
+};
+exports.TimelineKeyframeDiamond = react_1.default.memo(TimelineKeyframeDiamondUnmemoized);

package/dist/components/Timeline/TimelineLayerEye.js

@@ -47,6 +47,7 @@ const TimelineLayerEye = ({ onInvoked, hidden, type }) => {
         if (e.button !== 0) {
             return;
         }
+        e.stopPropagation();
         layerPointedDown = hidden ? 'enable' : 'disable';
         onInvoked(layerPointedDown);
         window.addEventListener('pointerup', () => {

package/dist/components/Timeline/TimelineList.js

@@ -2,25 +2,29 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TimelineList = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const player_1 = require("@remotion/player");
 const react_1 = require("react");
 const colors_1 = require("../../helpers/colors");
 const TimelineListItem_1 = require("./TimelineListItem");
+const TimelineSelection_1 = require("./TimelineSelection");
 const TimelineTimeIndicators_1 = require("./TimelineTimeIndicators");
 const container = {
     flex: 1,
     background: colors_1.BACKGROUND,
 };
 const TimelineList = ({ timeline }) => {
-    const ref = (0, react_1.useRef)(null);
-    const size = player_1.PlayerInternals.useElementSize(ref, {
-        shouldApplyCssTransforms: false,
-        triggerOnWindowResize: false,
-    });
-    const isCompact = size ? size.width < 250 : false;
-    return (jsx_runtime_1.jsxs("div", { ref: ref, style: container, children: [
+    const { clearSelection } = (0, TimelineSelection_1.useTimelineSelection)();
+    // Selection-triggering click handlers in children call e.stopPropagation(),
+    // so any pointerdown that bubbles up here is by definition on empty space
+    // and should clear the current selection.
+    const onPointerDown = (0, react_1.useCallback)((e) => {
+        if (e.button !== 0) {
+            return;
+        }
+        clearSelection();
+    }, [clearSelection]);
+    return (jsx_runtime_1.jsxs("div", { style: container, onPointerDown: onPointerDown, children: [
             jsx_runtime_1.jsx(TimelineTimeIndicators_1.TimelineTimePadding, {}), timeline.map((track) => {
-                return (jsx_runtime_1.jsx("div", { children: jsx_runtime_1.jsx(TimelineListItem_1.TimelineListItem, { nestedDepth: track.depth, sequence: track.sequence, isCompact: isCompact, nodePathInfo: track.nodePathInfo }, track.sequence.id) }, track.sequence.id));
+                return (jsx_runtime_1.jsx("div", { children: jsx_runtime_1.jsx(TimelineListItem_1.TimelineListItem, { nestedDepth: track.depth, sequence: track.sequence, nodePathInfo: track.nodePathInfo }, track.sequence.id) }, track.sequence.id));
             })] }));
 };
 exports.TimelineList = TimelineList;

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

@@ -4,6 +4,5 @@ import type { SequenceNodePathInfo } from '../../helpers/get-timeline-sequence-s
 export declare const TimelineListItem: React.FC<{
     readonly sequence: TSequence;
     readonly nestedDepth: number;
-    readonly isCompact: boolean;
     readonly nodePathInfo: SequenceNodePathInfo | null;
 }>;