@remotion/studio 4.0.465 → 4.0.467

package/dist/components/Timeline/TimelineEffectGroupRow.js

@@ -18,9 +18,10 @@ const rowLabel = {
     color: 'rgba(255, 255, 255, 0.8)',
     userSelect: 'none',
 };
-const TimelineEffectGroupRow = ({ label, nodePathInfo, effectIndex, effectSchema, nodePath, validatedLocation, rowDepth, getIsExpanded, toggleTrack, }) => {
+const TimelineEffectGroupRow = ({ label, nodePathInfo, effectIndex, effectSchema, documentationLink, nodePath, validatedLocation, rowDepth, getIsExpanded, toggleTrack, }) => {
     var _a;
     var _b;
+    const [labelHovered, setLabelHovered] = (0, react_1.useState)(false);
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const previewConnected = previewServerState.type === 'connected';
     const { codeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeCodeValuesContext);
@@ -122,7 +123,22 @@ const TimelineEffectGroupRow = ({ label, nodePathInfo, effectIndex, effectSchema
         height: timeline_layout_1.TREE_GROUP_ROW_HEIGHT,
         paddingRight: timeline_layout_1.EXPANDED_SECTION_PADDING_RIGHT,
     }), []);
-    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", { style: rowLabel, children: label }) }));
+    const labelStyle = (0, react_1.useMemo)(() => {
+        const hoverEffect = labelHovered && documentationLink !== null;
+        return {
+            ...rowLabel,
+            textDecoration: hoverEffect ? 'underline' : 'none',
+            textUnderlineOffset: 2,
+            cursor: hoverEffect ? 'pointer' : undefined,
+        };
+    }, [documentationLink, labelHovered]);
+    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);
 };
 exports.TimelineEffectGroupRow = TimelineEffectGroupRow;

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { SequenceSchema, SequencePropsSubscriptionKey } 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 { TimelineTreeNode } from '../../helpers/timeline-layout';

package/dist/components/Timeline/TimelineExpandedRow.js

@@ -19,7 +19,7 @@ const TimelineExpandedRow = ({ node, depth, nestedDepth, getIsExpanded, toggleTr
     const rowDepth = (0, timeline_row_layout_1.getExpandedRowDepth)({ nestedDepth, treeDepth: depth });
     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, nodePath: nodePath, validatedLocation: validatedLocation, rowDepth: rowDepth, getIsExpanded: getIsExpanded, toggleTrack: toggleTrack }));
+            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 }));
         }
         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: {

package/dist/components/Timeline/TimelineExpandedSection.js

@@ -57,13 +57,20 @@ const TimelineExpandedSection = ({ sequence, validatedLocation, nodePathInfo, ne
     const { getIsExpanded } = (0, react_1.useContext)(ExpandedTracksProvider_1.ExpandedTracksGetterContext);
     const { toggleTrack } = (0, react_1.useContext)(ExpandedTracksProvider_1.ExpandedTracksSetterContext);
     const { codeValues: visualModeCodeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeCodeValuesContext);
-    const { getDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeDragOverridesContext);
+    const { getDragOverrides, getEffectDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeDragOverridesContext);
     const tree = (0, react_1.useMemo)(() => (0, timeline_layout_1.buildTimelineTree)({
         sequence,
         nodePathInfo,
         getDragOverrides,
+        getEffectDragOverrides,
         codeValues: visualModeCodeValues,
-    }), [sequence, nodePathInfo, getDragOverrides, visualModeCodeValues]);
+    }), [
+        sequence,
+        nodePathInfo,
+        getDragOverrides,
+        getEffectDragOverrides,
+        visualModeCodeValues,
+    ]);
     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,

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

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

package/dist/components/Timeline/TimelineExpandedTrackKeyframes.js

@@ -0,0 +1,124 @@
+"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.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)({
+        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));
+            }) }) }));
+};
+exports.TimelineExpandedTrackKeyframes = react_1.default.memo(TimelineExpandedTrackKeyframesInner);

package/dist/components/Timeline/TimelineListItem.js

@@ -12,9 +12,11 @@ const ContextMenu_1 = require("../ContextMenu");
 const ExpandedTracksProvider_1 = require("../ExpandedTracksProvider");
 const NotificationCenter_1 = require("../Notifications/NotificationCenter");
 const save_sequence_prop_1 = require("./save-sequence-prop");
+const timeline_row_layout_1 = require("./timeline-row-layout");
 const TimelineExpandArrowButton_1 = require("./TimelineExpandArrowButton");
 const TimelineExpandedSection_1 = require("./TimelineExpandedSection");
 const TimelineLayerEye_1 = require("./TimelineLayerEye");
+const TimelineMediaInfo_1 = require("./TimelineMediaInfo");
 const TimelineRowChrome_1 = require("./TimelineRowChrome");
 const TimelineStack_1 = require("./TimelineStack");
 const use_resolved_stack_react_to_change_1 = require("./use-resolved-stack-react-to-change");
@@ -211,18 +213,34 @@ const TimelineListItem = ({ nestedDepth, sequence, isCompact, nodePathInfo }) =>
         return {
             height: (0, timeline_layout_1.getTimelineLayerHeight)(sequence.type) + timeline_layout_1.TIMELINE_ITEM_BORDER_BOTTOM,
             borderBottom: `1px solid ${colors_1.TIMELINE_TRACK_SEPARATOR}`,
+            display: 'flex',
+            flexDirection: 'column',
         };
     }, [sequence.type]);
     const inner = (0, react_1.useMemo)(() => {
         return {
-            // TODO: Not so small
-            height: timeline_layout_1.TIMELINE_LAYER_HEIGHT_AUDIO,
+            height: timeline_layout_1.TIMELINE_LIST_ITEM_ROW_HEIGHT,
             color: 'white',
             fontFamily: 'Arial, Helvetica, sans-serif',
             wordBreak: 'break-all',
             textAlign: 'left',
+            flexShrink: 0,
         };
     }, []);
+    const mediaInfoStyle = (0, react_1.useMemo)(() => {
+        return {
+            paddingLeft: (0, timeline_row_layout_1.getTimelineRowLeftChromeWidth)(nestedDepth),
+            paddingRight: 8,
+            marginTop: -6,
+            overflow: 'hidden',
+            minHeight: 0,
+        };
+    }, [nestedDepth]);
+    const mediaSrc = sequence.type === 'audio' ||
+        sequence.type === 'video' ||
+        sequence.type === 'image'
+        ? sequence.src
+        : null;
     const hasExpandableContent = Boolean(sequence.controls) || sequence.effects.length > 0;
     const canToggleVisibility = previewConnected &&
         Boolean(sequence.controls) &&
@@ -231,7 +249,7 @@ const TimelineListItem = ({ nestedDepth, sequence, isCompact, nodePathInfo }) =>
         codeHiddenStatus !== undefined &&
         codeHiddenStatus !== null &&
         codeHiddenStatus.canUpdate;
-    const trackRow = (jsx_runtime_1.jsx("div", { style: outer, children: jsx_runtime_1.jsx(TimelineRowChrome_1.TimelineRowChrome, { depth: nestedDepth, eye: canToggleVisibility ? (jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEye, { type: sequence.type === 'audio' ? 'speaker' : 'eye', hidden: isItemHidden, onInvoked: onToggleVisibility })) : (jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEyeSpacer, {})), arrow: hasExpandableContent ? (jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowButton, { isExpanded: isExpanded, onClick: onToggleExpand, label: "track properties", disabled: !previewConnected || nodePathInfo === null })) : (jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowSpacer, {})), style: inner, children: jsx_runtime_1.jsx(TimelineStack_1.TimelineStack, { sequence: sequence, isCompact: isCompact, originalLocation: originalLocation }) }) }));
+    const trackRow = (jsx_runtime_1.jsxs("div", { style: outer, children: [jsx_runtime_1.jsx(TimelineRowChrome_1.TimelineRowChrome, { depth: nestedDepth, eye: canToggleVisibility ? (jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEye, { type: sequence.type === 'audio' ? 'speaker' : 'eye', hidden: isItemHidden, onInvoked: onToggleVisibility })) : (jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEyeSpacer, {})), arrow: hasExpandableContent ? (jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowButton, { isExpanded: isExpanded, onClick: onToggleExpand, label: "track properties", disabled: !previewConnected || nodePathInfo === null })) : (jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowSpacer, {})), style: inner, children: jsx_runtime_1.jsx(TimelineStack_1.TimelineStack, { sequence: sequence, isCompact: isCompact, originalLocation: originalLocation }) }), mediaSrc ? (jsx_runtime_1.jsx("div", { style: mediaInfoStyle, children: jsx_runtime_1.jsx(TimelineMediaInfo_1.TimelineMediaInfo, { src: mediaSrc, type: sequence.type }) })) : null] }));
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [previewConnected ? (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { values: contextMenuValues, children: trackRow })) : (trackRow), previewConnected &&
                 isExpanded &&
                 hasExpandableContent &&

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

@@ -0,0 +1,5 @@
+import React from 'react';
+export declare const TimelineMediaInfo: React.FC<{
+    readonly src: string;
+    readonly type: 'audio' | 'video' | 'image';
+}>;

package/dist/components/Timeline/TimelineMediaInfo.js

@@ -0,0 +1,173 @@
+"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.TimelineMediaInfo = 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 lineStyle = {
+    whiteSpace: 'nowrap',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    minWidth: 0,
+    fontSize: 12,
+    color: colors_1.VERY_LIGHT_TEXT,
+    lineHeight: 1.3,
+};
+const getLinkInfo = (src) => {
+    const staticBase = typeof window === 'undefined' ? null : window.remotion_staticBase;
+    if (staticBase && src.startsWith(staticBase + '/')) {
+        const assetPath = src.slice(staticBase.length + 1);
+        return {
+            kind: 'local',
+            assetPath: decodeURIComponent(assetPath),
+            title: decodeURIComponent(assetPath),
+        };
+    }
+    if (src.startsWith('http://') ||
+        src.startsWith('https://') ||
+        src.startsWith('//')) {
+        try {
+            const url = new URL(src.startsWith('//') ? 'https:' + src : src);
+            return { kind: 'remote', href: src, title: url.hostname };
+        }
+        catch (_a) {
+            return { kind: 'remote', href: src, title: src };
+        }
+    }
+    return null;
+};
+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 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');
+    }, [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,
+        textDecoration: 'none',
+        display: 'inline-block',
+        overflow: 'hidden',
+        whiteSpace: 'pre',
+        textOverflow: 'ellipsis',
+    }), [linkInfo, hovered]);
+    return { linkInfo, 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 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] }));
+};
+exports.TimelineMediaInfo = TimelineMediaInfo;

package/dist/components/Timeline/TimelineSchemaField.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TimelineFieldValue = exports.TimelineNonEditableStatus = exports.UnsupportedStatus = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const get_timeline_keyframes_1 = require("./get-timeline-keyframes");
 const TimelineBooleanField_1 = require("./TimelineBooleanField");
 const TimelineColorField_1 = require("./TimelineColorField");
 const TimelineEnumField_1 = require("./TimelineEnumField");
@@ -30,7 +31,7 @@ const TimelineNonEditableStatus = ({ propStatus }) => {
         return null;
     }
     if (propStatus.reason === 'computed') {
-        return jsx_runtime_1.jsx("span", { style: unsupportedLabel, children: "computed" });
+        return (jsx_runtime_1.jsx("span", { style: unsupportedLabel, children: (0, get_timeline_keyframes_1.getComputedStatusLabel)(propStatus) }));
     }
     throw new Error(`Unsupported prop status: ${propStatus.reason}`);
 };

package/dist/components/Timeline/TimelineStack/index.js

@@ -7,8 +7,6 @@ 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 url_state_1 = require("../../../helpers/url-state");
-const InitialCompositionLoader_1 = require("../../InitialCompositionLoader");
 const layout_1 = require("../../layout");
 const NotificationCenter_1 = require("../../Notifications/NotificationCenter");
 const Spinner_1 = require("../../Spinner");
@@ -17,26 +15,8 @@ const TimelineStack = ({ isCompact, sequence, originalLocation }) => {
     const [stackHovered, setStackHovered] = (0, react_1.useState)(false);
     const [titleHovered, setTitleHovered] = (0, react_1.useState)(false);
     const [opening, setOpening] = (0, react_1.useState)(false);
-    const selectAsset = (0, InitialCompositionLoader_1.useSelectAsset)();
     const connectionStatus = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx)
         .previewServerState.type;
-    const assetPath = (0, react_1.useMemo)(() => {
-        if (sequence.type !== 'video' &&
-            sequence.type !== 'audio' &&
-            sequence.type !== 'image') {
-            return null;
-        }
-        const isStatic = sequence.src.startsWith(window.remotion_staticBase);
-        if (!isStatic) {
-            return null;
-        }
-        const relativePath = sequence.src.replace(window.remotion_staticBase + '/', '');
-        return relativePath;
-    }, [sequence]);
-    const navigateToAsset = (0, react_1.useCallback)((asset) => {
-        selectAsset(asset);
-        (0, url_state_1.pushUrl)(`/assets/${asset}`);
-    }, [selectAsset]);
     const openEditor = (0, react_1.useCallback)(async (location) => {
         if (!window.remotion_editorName) {
             return;
@@ -56,35 +36,15 @@ const TimelineStack = ({ isCompact, sequence, originalLocation }) => {
         connectionStatus === 'connected' &&
         originalLocation;
     const canOpenInGitHub = window.remotion_gitSource && originalLocation;
-    const titleHoverable = (isCompact && (canOpenInEditor || canOpenInGitHub)) || assetPath;
+    const { documentationLink } = sequence;
+    const titleHoverable = documentationLink !== null;
     const stackHoverable = !isCompact && (canOpenInEditor || canOpenInGitHub);
     const onClickTitle = (0, react_1.useCallback)(() => {
-        if (!titleHoverable) {
+        if (documentationLink === null) {
             return null;
         }
-        if (assetPath) {
-            navigateToAsset(assetPath);
-            return;
-        }
-        if (!originalLocation) {
-            return;
-        }
-        if (canOpenInEditor) {
-            openEditor(originalLocation);
-            return;
-        }
-        if (canOpenInGitHub) {
-            window.open((0, get_git_menu_item_1.getGitRefUrl)(window.remotion_gitSource, originalLocation), '_blank');
-        }
-    }, [
-        assetPath,
-        canOpenInEditor,
-        canOpenInGitHub,
-        navigateToAsset,
-        openEditor,
-        originalLocation,
-        titleHoverable,
-    ]);
+        window.open(documentationLink, '_blank', 'noopener,noreferrer');
+    }, [documentationLink]);
     const onClickStack = (0, react_1.useCallback)(() => {
         if (!originalLocation) {
             return;
@@ -150,8 +110,8 @@ const TimelineStack = ({ isCompact, sequence, originalLocation }) => {
         ? sequence.displayName.slice(0, 1000) + '...'
         : sequence.displayName;
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-            jsx_runtime_1.jsx("div", { onPointerEnter: onTitlePointerEnter, onPointerLeave: onTitlePointerLeave, title: originalLocation
-                    ? (0, source_attribution_1.getOriginalSourceAttribution)(originalLocation)
+            jsx_runtime_1.jsx("div", { onPointerEnter: onTitlePointerEnter, onPointerLeave: onTitlePointerLeave, title: documentationLink
+                    ? `Open documentation: ${documentationLink}`
                     : text || '<Sequence>', style: titleStyle, onClick: onClickTitle, children: text || '<Sequence>' }), isCompact || !originalLocation ? null : (jsx_runtime_1.jsx("div", { onPointerEnter: onStackPointerEnter, onPointerLeave: onStackPointerLeave, onClick: onClickStack, 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] }));

package/dist/components/Timeline/TimelineTracks.js

@@ -36,11 +36,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TimelineTracks = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
-const remotion_1 = require("remotion");
 const client_id_1 = require("../../helpers/client-id");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
 const ExpandedTracksProvider_1 = require("../ExpandedTracksProvider");
 const MaxTimelineTracks_1 = require("./MaxTimelineTracks");
+const TimelineExpandedTrackKeyframes_1 = require("./TimelineExpandedTrackKeyframes");
 const TimelineSequence_1 = require("./TimelineSequence");
 const TimelineTimeIndicators_1 = require("./TimelineTimeIndicators");
 const content = {
@@ -51,18 +51,9 @@ const content = {
 const timelineContent = {
     minHeight: '100%',
 };
-const getExpandedPlaceholderStyle = ({ sequence, nodePathInfo, getIsExpanded, codeValues, }) => ({
-    height: (0, timeline_layout_1.getExpandedTrackHeight)({
-        sequence,
-        nodePathInfo,
-        getIsExpanded,
-        codeValues,
-    }) + timeline_layout_1.TIMELINE_ITEM_BORDER_BOTTOM,
-});
 const TimelineTracksInner = ({ timeline, hasBeenCut }) => {
     const { getIsExpanded } = (0, react_1.useContext)(ExpandedTracksProvider_1.ExpandedTracksGetterContext);
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
-    const { codeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeCodeValuesContext);
     const previewServerConnected = previewServerState.type === 'connected';
     const timelineStyle = (0, react_1.useMemo)(() => {
         return {
@@ -78,12 +69,7 @@ const TimelineTracksInner = ({ timeline, hasBeenCut }) => {
                                 jsx_runtime_1.jsx("div", { style: {
                                         height: (0, timeline_layout_1.getTimelineLayerHeight)(track.sequence.type),
                                         marginBottom: timeline_layout_1.TIMELINE_ITEM_BORDER_BOTTOM,
-                                    }, children: jsx_runtime_1.jsx(TimelineSequence_1.TimelineSequence, { s: track.sequence }) }), isExpanded && track.nodePathInfo && previewServerConnected ? (jsx_runtime_1.jsx("div", { style: getExpandedPlaceholderStyle({
-                                        sequence: track.sequence,
-                                        nodePathInfo: track.nodePathInfo,
-                                        getIsExpanded,
-                                        codeValues,
-                                    }) })) : null] }, track.sequence.id));
+                                    }, children: jsx_runtime_1.jsx(TimelineSequence_1.TimelineSequence, { s: track.sequence }) }), isExpanded && track.nodePathInfo && previewServerConnected ? (jsx_runtime_1.jsx(TimelineExpandedTrackKeyframes_1.TimelineExpandedTrackKeyframes, { sequence: track.sequence, nodePathInfo: track.nodePathInfo })) : null] }, track.sequence.id));
                     })] }), hasBeenCut ? jsx_runtime_1.jsx(MaxTimelineTracks_1.MaxTimelineTracksReached, {}) : null] }));
 };
 exports.TimelineTracks = react_1.default.memo(TimelineTracksInner);

package/dist/components/Timeline/TimelineVideoInfo.js

@@ -8,7 +8,7 @@ const remotion_1 = require("remotion");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
 const AudioWaveform_1 = require("../AudioWaveform");
 const get_timeline_video_info_widths_1 = require("./get-timeline-video-info-widths");
-const FILMSTRIP_HEIGHT = timeline_layout_1.TIMELINE_LAYER_HEIGHT_IMAGE - 2;
+const FILMSTRIP_HEIGHT = 48;
 const outerStyle = {
     width: '100%',
     height: '100%',
@@ -233,7 +233,7 @@ const TimelineVideoInfo = ({ src, visualizationWidth, naturalWidth, trimBefore,
     }, [mediaVisualizationWidth, premountWidth]);
     const audioStyle = (0, react_1.useMemo)(() => {
         return {
-            height: timeline_layout_1.TIMELINE_LAYER_HEIGHT_AUDIO,
+            height: timeline_layout_1.TIMELINE_VIDEO_INFO_WAVEFORM_HEIGHT,
             width: audioWidth,
             position: 'relative',
             marginLeft: premountWidth,

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

@@ -0,0 +1,6 @@
+import type { CanUpdateSequencePropStatus, CanUpdateSequencePropStatusFalse } from 'remotion';
+export declare const getComputedStatusLabel: (propStatus: CanUpdateSequencePropStatusFalse) => string;
+export declare const getTimelineKeyframes: (propStatus: CanUpdateSequencePropStatus | null | undefined) => {
+    frame: number;
+    value: unknown;
+}[];