@remotion/studio 4.0.468 → 4.0.470

package/dist/components/Timeline/TimelineKeyframeControls.js

@@ -0,0 +1,217 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TimelineKeyframeControls = exports.shouldShowTimelineKeyframeControls = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const remotion_1 = require("remotion");
+const client_id_1 = require("../../helpers/client-id");
+const colors_1 = require("../../helpers/colors");
+const call_add_keyframe_1 = require("./call-add-keyframe");
+const call_delete_keyframe_1 = require("./call-delete-keyframe");
+const get_keyframe_navigation_1 = require("./get-keyframe-navigation");
+const get_timeline_keyframes_1 = require("./get-timeline-keyframes");
+const TimelineSelection_1 = require("./TimelineSelection");
+const controlsContainerStyle = {
+    alignItems: 'center',
+    display: 'flex',
+    flexShrink: 0,
+    gap: 2,
+    marginRight: 4,
+};
+const navButtonStyle = {
+    alignItems: 'center',
+    background: 'none',
+    border: 'none',
+    color: 'white',
+    cursor: 'pointer',
+    display: 'flex',
+    flexShrink: 0,
+    fontSize: 8,
+    height: 12,
+    justifyContent: 'center',
+    lineHeight: 1,
+    outline: 'none',
+    padding: 0,
+    userSelect: 'none',
+    width: 10,
+};
+const diamondButtonStyle = {
+    ...navButtonStyle,
+    height: 10,
+    width: 10,
+};
+const svgStyle = { display: 'block' };
+const getCurrentKeyframeValue = ({ propStatus, jsxFrame, defaultValue, dragOverrideValue, }) => {
+    if (propStatus.canUpdate) {
+        return remotion_1.Internals.getEffectiveVisualModeValue({
+            codeValue: propStatus,
+            dragOverrideValue,
+            defaultValue,
+            shouldResortToDefaultValueIfUndefined: true,
+        });
+    }
+    if (propStatus.reason === 'keyframed') {
+        return remotion_1.Internals.interpolateKeyframedStatus({
+            frame: jsxFrame,
+            status: propStatus,
+        });
+    }
+    return null;
+};
+const shouldShowTimelineKeyframeControls = ({ propStatus, selected, }) => {
+    if (propStatus === null) {
+        return false;
+    }
+    if (selected) {
+        return true;
+    }
+    return (TimelineSelection_1.SELECTION_ENABLED &&
+        !propStatus.canUpdate &&
+        propStatus.reason === 'keyframed');
+};
+exports.shouldShowTimelineKeyframeControls = shouldShowTimelineKeyframeControls;
+const TimelineKeyframeControls = ({ fieldKey, propStatus, nodePath, fileName, keyframeDisplayOffset, defaultValue, dragOverrideValue, schema, effectIndex, }) => {
+    const videoConfig = (0, remotion_1.useVideoConfig)();
+    const timelinePosition = remotion_1.Internals.Timeline.useTimelinePosition();
+    const setFrame = remotion_1.Internals.useTimelineSetFrame();
+    const { setCodeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
+    const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
+    const clientId = previewServerState.type === 'connected'
+        ? previewServerState.clientId
+        : null;
+    const jsxFrame = timelinePosition - keyframeDisplayOffset;
+    const keyframes = (0, react_1.useMemo)(() => (0, get_timeline_keyframes_1.getTimelineKeyframes)(propStatus, keyframeDisplayOffset), [propStatus, keyframeDisplayOffset]);
+    const hasKeyframeAtCurrentFrame = (0, react_1.useMemo)(() => {
+        if (propStatus.canUpdate || propStatus.reason === 'computed') {
+            return false;
+        }
+        return (0, get_keyframe_navigation_1.hasKeyframeAtSourceFrame)(propStatus.keyframes, jsxFrame);
+    }, [jsxFrame, propStatus]);
+    const previousDisplayFrame = (0, react_1.useMemo)(() => (0, get_keyframe_navigation_1.getPreviousKeyframeDisplayFrame)(keyframes, timelinePosition), [keyframes, timelinePosition]);
+    const nextDisplayFrame = (0, react_1.useMemo)(() => (0, get_keyframe_navigation_1.getNextKeyframeDisplayFrame)(keyframes, timelinePosition), [keyframes, timelinePosition]);
+    const canToggleKeyframe = propStatus.canUpdate || propStatus.reason === 'keyframed';
+    const seekToDisplayFrame = (0, react_1.useCallback)((frame) => {
+        setFrame((current) => {
+            const next = { ...current, [videoConfig.id]: frame };
+            remotion_1.Internals.persistCurrentFrame(next);
+            return next;
+        });
+    }, [setFrame, videoConfig.id]);
+    const onPrevious = (0, react_1.useCallback)((e) => {
+        e.stopPropagation();
+        if (previousDisplayFrame !== null) {
+            seekToDisplayFrame(previousDisplayFrame);
+        }
+    }, [previousDisplayFrame, seekToDisplayFrame]);
+    const onNext = (0, react_1.useCallback)((e) => {
+        e.stopPropagation();
+        if (nextDisplayFrame !== null) {
+            seekToDisplayFrame(nextDisplayFrame);
+        }
+    }, [nextDisplayFrame, seekToDisplayFrame]);
+    const onToggleKeyframe = (0, react_1.useCallback)(async (e) => {
+        e.stopPropagation();
+        if (!clientId || !canToggleKeyframe) {
+            return;
+        }
+        if (hasKeyframeAtCurrentFrame &&
+            !propStatus.canUpdate &&
+            propStatus.reason === 'keyframed') {
+            if (effectIndex === null) {
+                await (0, call_delete_keyframe_1.callDeleteSequenceKeyframe)({
+                    fileName,
+                    nodePath,
+                    fieldKey,
+                    sourceFrame: jsxFrame,
+                    schema,
+                    setCodeValues,
+                    clientId,
+                });
+                return;
+            }
+            await (0, call_delete_keyframe_1.callDeleteEffectKeyframe)({
+                fileName,
+                nodePath,
+                effectIndex,
+                fieldKey,
+                sourceFrame: jsxFrame,
+                schema,
+                setCodeValues,
+                clientId,
+            });
+            return;
+        }
+        const value = getCurrentKeyframeValue({
+            propStatus,
+            jsxFrame,
+            defaultValue,
+            dragOverrideValue,
+        });
+        if (value === null) {
+            return;
+        }
+        if (effectIndex === null) {
+            await (0, call_add_keyframe_1.callAddSequenceKeyframe)({
+                fileName,
+                nodePath,
+                fieldKey,
+                sourceFrame: jsxFrame,
+                value,
+                schema,
+                setCodeValues,
+                clientId,
+            });
+            return;
+        }
+        await (0, call_add_keyframe_1.callAddEffectKeyframe)({
+            fileName,
+            nodePath,
+            effectIndex,
+            fieldKey,
+            sourceFrame: jsxFrame,
+            value,
+            schema,
+            setCodeValues,
+            clientId,
+        });
+    }, [
+        canToggleKeyframe,
+        clientId,
+        defaultValue,
+        dragOverrideValue,
+        effectIndex,
+        fieldKey,
+        fileName,
+        hasKeyframeAtCurrentFrame,
+        jsxFrame,
+        nodePath,
+        propStatus,
+        schema,
+        setCodeValues,
+    ]);
+    const previousDisabled = previousDisplayFrame === null;
+    const nextDisabled = nextDisplayFrame === null;
+    const previousStyle = (0, react_1.useMemo)(() => ({
+        ...navButtonStyle,
+        cursor: previousDisabled ? 'default' : 'pointer',
+        opacity: previousDisabled ? 0.35 : 1,
+    }), [previousDisabled]);
+    const nextStyle = (0, react_1.useMemo)(() => ({
+        ...navButtonStyle,
+        cursor: nextDisabled ? 'default' : 'pointer',
+        opacity: nextDisabled ? 0.35 : 1,
+    }), [nextDisabled]);
+    const diamondStyle = (0, react_1.useMemo)(() => ({
+        ...diamondButtonStyle,
+        backgroundColor: hasKeyframeAtCurrentFrame ? colors_1.BLUE : colors_1.LIGHT_TEXT,
+        borderRadius: 1,
+        boxShadow: '0 0 0 1px rgba(0, 0, 0, 0.4)',
+        cursor: canToggleKeyframe && clientId ? 'pointer' : 'default',
+        opacity: canToggleKeyframe && clientId ? 1 : 0.35,
+        transform: 'rotate(45deg)',
+    }), [canToggleKeyframe, clientId, hasKeyframeAtCurrentFrame]);
+    return (jsx_runtime_1.jsxs("div", { style: controlsContainerStyle, children: [
+            jsx_runtime_1.jsx("button", { type: "button", style: previousStyle, disabled: previousDisabled, onPointerDown: previousDisabled ? undefined : onPrevious, "aria-label": "Go to previous keyframe", title: "Previous keyframe", children: jsx_runtime_1.jsx("svg", { width: "8", height: "8", viewBox: "0 0 8 8", style: svgStyle, children: jsx_runtime_1.jsx("path", { d: "M5 1L2 4L5 7Z", fill: "#ccc" }) }) }), jsx_runtime_1.jsx("button", { type: "button", style: diamondStyle, disabled: !canToggleKeyframe || !clientId, onPointerDown: canToggleKeyframe && clientId ? onToggleKeyframe : undefined, "aria-label": hasKeyframeAtCurrentFrame ? 'Remove keyframe' : 'Add keyframe', title: hasKeyframeAtCurrentFrame ? 'Remove keyframe' : 'Add keyframe' }), jsx_runtime_1.jsx("button", { type: "button", style: nextStyle, disabled: nextDisabled, onPointerDown: nextDisabled ? undefined : onNext, "aria-label": "Go to next keyframe", title: "Next keyframe", children: jsx_runtime_1.jsx("svg", { width: "8", height: "8", viewBox: "0 0 8 8", style: svgStyle, children: jsx_runtime_1.jsx("path", { d: "M3 1L6 4L3 7Z", fill: "#ccc" }) }) })
+        ] }));
+};
+exports.TimelineKeyframeControls = TimelineKeyframeControls;

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,88 @@
+"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)',
+};
+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: colors_1.LIGHT_TEXT,
+            outline: selected ? '2px solid ' + colors_1.BLUE : 'none',
+            border: 'none',
+            cursor: 'pointer',
+            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({
+                shiftKey: e.shiftKey,
+                toggleKey: e.metaKey || e.ctrlKey,
+            });
+        }
+    }, [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/TimelineKeyframedValue.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { CanUpdateSequencePropStatusKeyframed } from 'remotion';
+import type { SchemaFieldInfo } from '../../helpers/timeline-layout';
+export declare const TimelineKeyframedValue: React.FC<{
+    readonly field: SchemaFieldInfo;
+    readonly propStatus: CanUpdateSequencePropStatusKeyframed;
+    readonly keyframeDisplayOffset: number;
+}>;

package/dist/components/Timeline/TimelineKeyframedValue.js

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TimelineKeyframedValue = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const remotion_1 = require("remotion");
+const TimelineSchemaField_1 = require("./TimelineSchemaField");
+const wrapperStyle = {
+    opacity: 0.5,
+    pointerEvents: 'none',
+};
+const noop = () => undefined;
+const noopAsync = () => Promise.resolve();
+const TimelineKeyframedValue = ({ field, propStatus, keyframeDisplayOffset }) => {
+    const timelinePosition = remotion_1.Internals.Timeline.useTimelinePosition();
+    const jsxFrame = timelinePosition - keyframeDisplayOffset;
+    const computedValue = (0, react_1.useMemo)(() => {
+        const raw = remotion_1.Internals.interpolateKeyframedStatus({
+            frame: jsxFrame,
+            status: propStatus,
+        });
+        if (typeof raw === 'number') {
+            return Math.round(raw * 100) / 100;
+        }
+        return raw;
+    }, [jsxFrame, propStatus]);
+    const fakeStatus = (0, react_1.useMemo)(() => ({
+        canUpdate: true,
+        codeValue: computedValue,
+    }), [computedValue]);
+    if (computedValue === null) {
+        return null;
+    }
+    return (jsx_runtime_1.jsx("div", { style: wrapperStyle, children: jsx_runtime_1.jsx(TimelineSchemaField_1.TimelineFieldValue, { field: field, propStatus: fakeStatus, effectiveValue: computedValue, onSave: noopAsync, onDragValueChange: noop, onDragEnd: noop }) }));
+};
+exports.TimelineKeyframedValue = TimelineKeyframedValue;

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,17 @@
 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 TimelineSequenceItem_1 = require("./TimelineSequenceItem");
 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: [
+    return (jsx_runtime_1.jsxs("div", { style: container, 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(TimelineSequenceItem_1.TimelineSequenceItem, { nestedDepth: track.depth, sequence: track.sequence, nodePathInfo: track.nodePathInfo, keyframeDisplayOffset: track.keyframeDisplayOffset }, track.sequence.id) }, track.sequence.id));
             })] }));
 };
 exports.TimelineList = TimelineList;

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

@@ -1,5 +1,17 @@
 import React from 'react';
+type LinkInfo = {
+    kind: 'local';
+    assetPath: string;
+    title: string;
+} | {
+    kind: 'remote';
+    href: string;
+    title: string;
+} | null;
+export type TimelineAssetLinkInfo = Exclude<LinkInfo, null>;
+export declare const getTimelineAssetLinkInfo: (src: string) => LinkInfo;
+export declare const openTimelineAssetLink: (linkInfo: TimelineAssetLinkInfo, setCanvasContent: React.Dispatch<React.SetStateAction<import("remotion").CanvasContent | null>>) => void;
 export declare const TimelineMediaInfo: React.FC<{
     readonly src: string;
-    readonly type: 'audio' | 'video' | 'image';
 }>;
+export {};

package/dist/components/Timeline/TimelineMediaInfo.js

@@ -33,25 +33,13 @@ var __importStar = (this && this.__importStar) || (function () {
     };
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TimelineMediaInfo = void 0;
+exports.TimelineMediaInfo = exports.openTimelineAssetLink = exports.getTimelineAssetLinkInfo = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const media_utils_1 = require("@remotion/media-utils");
 const react_1 = __importStar(require("react"));
 const remotion_1 = require("remotion");
 const colors_1 = require("../../helpers/colors");
-const format_media_duration_1 = require("../../helpers/format-media-duration");
 const url_state_1 = require("../../helpers/url-state");
-const use_media_metadata_1 = require("../../helpers/use-media-metadata");
-const containerStyle = {
-    fontFamily: 'Arial, Helvetica, sans-serif',
-    fontSize: 12,
-    lineHeight: 1,
-    overflow: 'hidden',
-    whiteSpace: 'nowrap',
-    textOverflow: 'ellipsis',
-    minWidth: 0,
-    marginTop: 2,
-};
+const TimelineSelection_1 = require("./TimelineSelection");
 const lineStyle = {
     whiteSpace: 'nowrap',
     overflow: 'hidden',
@@ -59,9 +47,9 @@ const lineStyle = {
     minWidth: 0,
     fontSize: 12,
     color: colors_1.VERY_LIGHT_TEXT,
-    lineHeight: 1.3,
+    display: 'inline-block',
 };
-const getLinkInfo = (src) => {
+const getTimelineAssetLinkInfo = (src) => {
     const staticBase = typeof window === 'undefined' ? null : window.remotion_staticBase;
     if (staticBase && src.startsWith(staticBase + '/')) {
         const assetPath = src.slice(staticBase.length + 1);
@@ -84,90 +72,55 @@ const getLinkInfo = (src) => {
     }
     return null;
 };
+exports.getTimelineAssetLinkInfo = getTimelineAssetLinkInfo;
+const openTimelineAssetLink = (linkInfo, setCanvasContent) => {
+    if (linkInfo.kind === 'local') {
+        setCanvasContent({ type: 'asset', asset: linkInfo.assetPath });
+        (0, url_state_1.pushUrl)(`/assets/${linkInfo.assetPath}`);
+        return;
+    }
+    window.open(linkInfo.href, '_blank', 'noopener,noreferrer');
+};
+exports.openTimelineAssetLink = openTimelineAssetLink;
 const useAssetLink = (src) => {
     const { setCanvasContent } = react_1.default.useContext(remotion_1.Internals.CompositionSetters);
     const [hovered, setHovered] = (0, react_1.useState)(false);
-    const linkInfo = (0, react_1.useMemo)(() => getLinkInfo(src), [src]);
+    const linkInfo = (0, react_1.useMemo)(() => (0, exports.getTimelineAssetLinkInfo)(src), [src]);
+    const interactive = !TimelineSelection_1.SELECTION_ENABLED && linkInfo !== null;
     const onClick = (0, react_1.useCallback)((e) => {
         if (!linkInfo) {
             return;
         }
         e.preventDefault();
         e.stopPropagation();
-        if (linkInfo.kind === 'local') {
-            setCanvasContent({ type: 'asset', asset: linkInfo.assetPath });
-            (0, url_state_1.pushUrl)(`/assets/${linkInfo.assetPath}`);
-            return;
-        }
-        window.open(linkInfo.href, '_blank', 'noopener,noreferrer');
+        (0, exports.openTimelineAssetLink)(linkInfo, setCanvasContent);
     }, [linkInfo, setCanvasContent]);
     const onPointerEnter = (0, react_1.useCallback)(() => setHovered(true), []);
     const onPointerLeave = (0, react_1.useCallback)(() => setHovered(false), []);
     const fileNameStyle = (0, react_1.useMemo)(() => ({
         ...lineStyle,
-        color: linkInfo && hovered ? colors_1.LIGHT_TEXT : colors_1.VERY_LIGHT_TEXT,
-        cursor: linkInfo ? 'pointer' : undefined,
+        color: interactive && hovered ? colors_1.LIGHT_TEXT : colors_1.VERY_LIGHT_TEXT,
+        cursor: interactive ? 'pointer' : undefined,
         textDecoration: 'none',
         display: 'inline-block',
         overflow: 'hidden',
         whiteSpace: 'pre',
         textOverflow: 'ellipsis',
-    }), [linkInfo, hovered]);
-    return { linkInfo, onClick, onPointerEnter, onPointerLeave, fileNameStyle };
+        userSelect: 'none',
+        WebkitUserSelect: 'none',
+    }), [interactive, hovered]);
+    return {
+        linkInfo,
+        interactive,
+        onClick,
+        onPointerEnter,
+        onPointerLeave,
+        fileNameStyle,
+    };
 };
-const TimelineMediaInfo = ({ src, type }) => {
-    // Images aren't supported by mediabunny, so don't even try.
-    const metadata = (0, use_media_metadata_1.useMediaMetadata)(type === 'image' ? null : src);
+const TimelineMediaInfo = ({ src }) => {
     const fileName = (0, react_1.useMemo)(() => remotion_1.Internals.getAssetDisplayName(src), [src]);
-    const { linkInfo, onClick, onPointerEnter, onPointerLeave, fileNameStyle } = useAssetLink(src);
-    const [imageDimensions, setImageDimensions] = (0, react_1.useState)(null);
-    (0, react_1.useEffect)(() => {
-        if (type !== 'image') {
-            return;
-        }
-        let cancelled = false;
-        setImageDimensions(null);
-        (0, media_utils_1.getImageDimensions)(src)
-            .then((dims) => {
-            if (cancelled) {
-                return;
-            }
-            setImageDimensions({ width: dims.width, height: dims.height });
-        })
-            .catch(() => {
-            // Non-image or load failure — ignore silently.
-        });
-        return () => {
-            cancelled = true;
-        };
-    }, [src, type]);
-    const detailsLine = (0, react_1.useMemo)(() => {
-        if (type === 'image') {
-            if (!imageDimensions) {
-                return null;
-            }
-            return `${imageDimensions.width}x${imageDimensions.height}`;
-        }
-        if (!metadata) {
-            return null;
-        }
-        const parts = [];
-        if (metadata.format) {
-            parts.push(metadata.format);
-        }
-        if (type === 'video' && metadata.videoCodec) {
-            parts.push(metadata.videoCodec);
-        }
-        if (metadata.audioCodec) {
-            parts.push(metadata.audioCodec);
-        }
-        if (metadata.width !== null && metadata.height !== null) {
-            parts.push(`${metadata.width}x${metadata.height}`);
-        }
-        parts.push((0, format_media_duration_1.formatMediaDuration)(metadata.duration));
-        return parts.join(' · ');
-    }, [imageDimensions, metadata, type]);
-    return (jsx_runtime_1.jsxs("div", { style: containerStyle, children: [
-            jsx_runtime_1.jsx("div", { style: fileNameStyle, title: linkInfo ? linkInfo.title : fileName, onClick: linkInfo ? onClick : undefined, onPointerEnter: linkInfo ? onPointerEnter : undefined, onPointerLeave: linkInfo ? onPointerLeave : undefined, children: fileName }), detailsLine ? (jsx_runtime_1.jsx("div", { style: lineStyle, title: detailsLine, children: detailsLine })) : null] }));
+    const { linkInfo, interactive, onClick, onPointerEnter, onPointerLeave, fileNameStyle, } = useAssetLink(src);
+    return (jsx_runtime_1.jsx("div", { style: fileNameStyle, title: linkInfo ? linkInfo.title : fileName, onClick: interactive ? onClick : undefined, onPointerEnter: interactive ? onPointerEnter : undefined, onPointerLeave: interactive ? onPointerLeave : undefined, children: fileName }));
 };
 exports.TimelineMediaInfo = TimelineMediaInfo;

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

@@ -1,8 +1,17 @@
 import React from 'react';
+import type { TimelineSelectionInteraction } from './TimelineSelection';
 export declare const TimelineRowChrome: React.FC<{
     readonly depth: number;
     readonly eye: React.ReactNode;
+    readonly keyframeControls?: React.ReactNode;
     readonly arrow: React.ReactNode;
     readonly children: React.ReactNode;
-    readonly style?: React.CSSProperties;
+    readonly style: React.CSSProperties;
+    readonly selected: boolean;
+    readonly selectable: boolean;
+    readonly onSelect: (interaction?: TimelineSelectionInteraction) => void;
+    readonly showSelectedBackground: boolean;
+    readonly containsSelection: boolean;
+    readonly outerHeight: number | null;
+    readonly onDoubleClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
 }>;