@remotion/studio 4.0.466 → 4.0.468

package/dist/components/CurrentAsset.js

@@ -3,11 +3,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.CurrentAsset = exports.CURRENT_ASSET_HEIGHT = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const studio_shared_1 = require("@remotion/studio-shared");
-const mediabunny_1 = require("mediabunny");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
 const colors_1 = require("../helpers/colors");
-const get_duration_or_compute_1 = require("../helpers/get-duration-or-compute");
+const format_media_duration_1 = require("../helpers/format-media-duration");
+const use_media_metadata_1 = require("../helpers/use-media-metadata");
 const use_static_files_1 = require("./use-static-files");
 exports.CURRENT_ASSET_HEIGHT = 80;
 const container = {
@@ -38,16 +38,6 @@ const row = {
     lineHeight: '18px',
     backgroundColor: colors_1.BACKGROUND,
 };
-const formatDuration = (seconds) => {
-    const h = Math.floor(seconds / 3600);
-    const m = Math.floor((seconds % 3600) / 60);
-    const s = seconds % 60;
-    const sFixed = s.toFixed(2).padStart(5, '0');
-    if (h > 0) {
-        return `${h}:${String(m).padStart(2, '0')}:${sFixed}`;
-    }
-    return `${String(m).padStart(2, '0')}:${sFixed}`;
-};
 const CurrentAsset = () => {
     var _a;
     const { canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
@@ -61,46 +51,8 @@ const CurrentAsset = () => {
         const file = staticFiles.find((f) => f.name === assetName);
         return (_a = file === null || file === void 0 ? void 0 : file.sizeInBytes) !== null && _a !== void 0 ? _a : null;
     }, [assetName, staticFiles]);
-    const [mediaMetadata, setMediaMetadata] = (0, react_1.useState)(null);
-    (0, react_1.useEffect)(() => {
-        setMediaMetadata(null);
-        if (!assetName) {
-            return;
-        }
-        const url = (0, remotion_1.staticFile)(assetName);
-        const input = new mediabunny_1.Input({
-            formats: mediabunny_1.ALL_FORMATS,
-            source: new mediabunny_1.UrlSource(url),
-        });
-        Promise.all([
-            (0, get_duration_or_compute_1.getDurationOrCompute)(input),
-            input.getFormat(),
-            input.getPrimaryVideoTrack(),
-        ])
-            .then(async ([duration, format, videoTrack]) => {
-            if (videoTrack && (await videoTrack.isLive())) {
-                throw new Error('Live streams are not currently supported by Remotion. Sorry! Source: ' +
-                    url);
-            }
-            if (videoTrack && (await videoTrack.isRelativeToUnixEpoch())) {
-                throw new Error('Streams with UNIX timestamps are not currently supported by Remotion. Sorry! Source: ' +
-                    url);
-            }
-            setMediaMetadata({
-                duration,
-                format: format.name,
-                width: videoTrack ? await videoTrack.getDisplayWidth() : null,
-                height: videoTrack ? await videoTrack.getDisplayHeight() : null,
-            });
-        })
-            .catch(() => {
-            // InputDisposedError (user navigated away) and
-            // non-media files (e.g. .png, .json) — ignore silently
-        });
-        return () => {
-            input.dispose();
-        };
-    }, [assetName]);
+    const src = assetName ? (0, remotion_1.staticFile)(assetName) : null;
+    const mediaMetadata = (0, use_media_metadata_1.useMediaMetadata)(src);
     if (!assetName) {
         return jsx_runtime_1.jsx("div", { style: container });
     }
@@ -110,12 +62,14 @@ const CurrentAsset = () => {
         subtitleParts.push((0, studio_shared_1.formatBytes)(sizeInBytes));
     }
     if (mediaMetadata) {
-        subtitleParts.push(mediaMetadata.format);
+        if (mediaMetadata.format) {
+            subtitleParts.push(mediaMetadata.format);
+        }
         if (mediaMetadata.width !== null && mediaMetadata.height !== null) {
             subtitleParts.push(`${mediaMetadata.width}x${mediaMetadata.height}`);
         }
     }
     return (jsx_runtime_1.jsx("div", { style: container, children: jsx_runtime_1.jsx("div", { style: row, children: jsx_runtime_1.jsxs("div", { children: [
-                    jsx_runtime_1.jsx("div", { style: title, children: fileName }), subtitleParts.length > 0 ? (jsx_runtime_1.jsx("div", { style: subtitle, children: subtitleParts.join(' · ') })) : null, mediaMetadata ? (jsx_runtime_1.jsx("div", { style: subtitle, children: formatDuration(mediaMetadata.duration) })) : null] }) }) }));
+                    jsx_runtime_1.jsx("div", { style: title, children: fileName }), subtitleParts.length > 0 ? (jsx_runtime_1.jsx("div", { style: subtitle, children: subtitleParts.join(' · ') })) : null, mediaMetadata ? (jsx_runtime_1.jsx("div", { style: subtitle, children: (0, format_media_duration_1.formatMediaDuration)(mediaMetadata.duration) })) : null] }) }) }));
 };
 exports.CurrentAsset = CurrentAsset;

package/dist/components/NewComposition/ValidationMessage.d.ts

@@ -5,4 +5,5 @@ export declare const ValidationMessage: React.FC<{
     readonly message: string;
     readonly align: 'flex-start' | 'flex-end';
     readonly type: 'warning' | 'error';
+    readonly action?: React.ReactNode;
 }>;

package/dist/components/NewComposition/ValidationMessage.js

@@ -22,7 +22,7 @@ const label = {
     color: 'white',
     fontFamily: 'sans-serif',
 };
-const ValidationMessage = ({ message, align, type }) => {
+const ValidationMessage = ({ message, align, type, action }) => {
     const finalStyle = (0, react_1.useMemo)(() => {
         return {
             ...style,
@@ -30,7 +30,7 @@ const ValidationMessage = ({ message, align, type }) => {
         };
     }, [type]);
     return (jsx_runtime_1.jsx("div", { style: container, children: jsx_runtime_1.jsxs(layout_1.Row, { align: "center", justify: align, children: [
-                jsx_runtime_1.jsx(exports.WarningTriangle, { style: finalStyle }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx("div", { style: label, children: message })
-            ] }) }));
+                jsx_runtime_1.jsx(exports.WarningTriangle, { style: finalStyle }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx("div", { style: label, children: message }), action ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                        jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), action] })) : null] }) }));
 };
 exports.ValidationMessage = ValidationMessage;

package/dist/components/RenderModal/DataEditor.js

@@ -84,6 +84,13 @@ const tabWrapper = {
     flexDirection: 'row',
     alignItems: 'center',
 };
+const resolveLinkStyle = {
+    color: colors_1.BLUE,
+    fontSize: 13,
+    fontFamily: 'sans-serif',
+    textDecoration: 'underline',
+    whiteSpace: 'nowrap',
+};
 const persistanceKey = 'remotion.show-render-modalwarning';
 const getPersistedShowWarningState = () => {
     const val = localStorage.getItem(persistanceKey);
@@ -222,8 +229,7 @@ const DataEditor = ({ unresolvedComposition, defaultProps, setDefaultProps, prop
                     jsx_runtime_1.jsxs("div", { style: tabWrapper, children: [
                             jsx_runtime_1.jsx(SegmentedControl_1.SegmentedControl, { items: modeItems, needsWrapping: false }), jsx_runtime_1.jsx(layout_1.Flex, {}), warnings.length > 0 ? (jsx_runtime_1.jsx(WarningIndicatorButton_1.WarningIndicatorButton, { setShowWarning: setShowWarning, showWarning: showWarning, warningCount: warnings.length })) : null] }), showWarning && warnings.length > 0
                         ? warnings.map((warning) => (jsx_runtime_1.jsxs(react_1.default.Fragment, { children: [
-                                jsx_runtime_1.jsx(layout_1.Spacing, { y: 1 }), jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { message: warning, align: "flex-start", type: "warning" })
-                            ] }, warning)))
+                                jsx_runtime_1.jsx(layout_1.Spacing, { y: 1 }), jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { message: warning.message, align: "flex-start", type: "warning", action: warning.resolveLink ? (jsx_runtime_1.jsx("a", { href: warning.resolveLink, target: "_blank", rel: "noopener noreferrer", style: resolveLinkStyle, children: "Resolve" })) : null })] }, warning.id)))
                         : null] }), mode === 'schema' ? (jsx_runtime_1.jsx(SchemaEditor_1.SchemaEditor, { value: defaultProps, setValue: setDefaultProps, schema: schema })) : (jsx_runtime_1.jsx(RenderModalJSONPropsEditor_1.RenderModalJSONPropsEditor, { value: defaultProps !== null && defaultProps !== void 0 ? defaultProps : {}, setValue: jsonEditorSetValue, onSave: onSave, serializedJSON: serializedJSON, defaultProps: unresolvedComposition.defaultProps, schema: schema, compositionId: unresolvedComposition.id }))] }));
 };
 exports.DataEditor = DataEditor;

package/dist/components/RenderModal/get-render-modal-warnings.d.ts

@@ -1,4 +1,10 @@
 import type { PropsEditType } from './DataEditor';
+export declare const CANNOT_SAVE_DEFAULT_PROPS_DOCS = "https://www.remotion.dev/docs/troubleshooting/cannot-save-default-props";
+export type RenderModalWarning = {
+    readonly id: string;
+    readonly message: string;
+    readonly resolveLink?: string;
+};
 export type TypeCanSaveState = {
     canUpdate: true;
 } | {
@@ -15,4 +21,4 @@ export declare const getRenderModalWarnings: ({ cliProps, canSaveDefaultProps, i
     jsSetUsed: boolean;
     inJSONEditor: boolean;
     propsEditType: PropsEditType;
-}) => string[];
+}) => RenderModalWarning[];

package/dist/components/RenderModal/get-render-modal-warnings.js

@@ -1,7 +1,17 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getRenderModalWarnings = void 0;
+exports.getRenderModalWarnings = exports.CANNOT_SAVE_DEFAULT_PROPS_DOCS = void 0;
 const no_react_1 = require("remotion/no-react");
+exports.CANNOT_SAVE_DEFAULT_PROPS_DOCS = 'https://www.remotion.dev/docs/troubleshooting/cannot-save-default-props';
+const warningOrNull = (id, message) => {
+    if (message === null) {
+        return null;
+    }
+    return {
+        id,
+        message,
+    };
+};
 const getInputPropsWarning = ({ cliProps, propsEditType, }) => {
     if (Object.keys(cliProps).length > 0 &&
         propsEditType === 'default-props') {
@@ -19,7 +29,11 @@ const getCannotSaveDefaultProps = (canSaveDefaultProps) => {
     if (!canSaveDefaultProps.determined) {
         return null;
     }
-    return `Can't save default props: ${canSaveDefaultProps.reason}.`;
+    return {
+        id: 'cannot-save-default-props',
+        message: `Can't save default props: ${canSaveDefaultProps.reason}.`,
+        resolveLink: exports.CANNOT_SAVE_DEFAULT_PROPS_DOCS,
+    };
 };
 const customDateUsed = (used, inJSONEditor) => {
     if (used && inJSONEditor) {
@@ -47,12 +61,12 @@ const setUsed = (used, inJSONEditor) => {
 };
 const getRenderModalWarnings = ({ cliProps, canSaveDefaultProps, isCustomDateUsed, customFileUsed, jsMapUsed, jsSetUsed, inJSONEditor, propsEditType, }) => {
     return [
-        getInputPropsWarning({ cliProps, propsEditType }),
+        warningOrNull('input-props-override', getInputPropsWarning({ cliProps, propsEditType })),
         getCannotSaveDefaultProps(canSaveDefaultProps),
-        customDateUsed(isCustomDateUsed, inJSONEditor),
-        staticFileUsed(customFileUsed, inJSONEditor),
-        mapUsed(jsMapUsed, inJSONEditor),
-        setUsed(jsSetUsed, inJSONEditor),
+        warningOrNull('custom-date-used', customDateUsed(isCustomDateUsed, inJSONEditor)),
+        warningOrNull('static-file-used', staticFileUsed(customFileUsed, inJSONEditor)),
+        warningOrNull('map-used', mapUsed(jsMapUsed, inJSONEditor)),
+        warningOrNull('set-used', setUsed(jsSetUsed, inJSONEditor)),
     ].filter(no_react_1.NoReactInternals.truthy);
 };
 exports.getRenderModalWarnings = getRenderModalWarnings;

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

@@ -4,4 +4,5 @@ import type { SequenceNodePathInfo } from '../../helpers/get-timeline-sequence-s
 export declare const TimelineExpandedTrackKeyframes: React.NamedExoticComponent<{
     readonly sequence: TSequence;
     readonly nodePathInfo: SequenceNodePathInfo;
+    readonly keyframeDisplayOffset: number;
 }>;

package/dist/components/Timeline/TimelineExpandedTrackKeyframes.js

@@ -62,13 +62,13 @@ const diamondBase = {
     boxShadow: '0 0 0 1px rgba(0, 0, 0, 0.4)',
     pointerEvents: 'none',
 };
-const getNodeKeyframes = ({ node, nodePath, codeValues, }) => {
+const getNodeKeyframes = ({ node, nodePath, codeValues, keyframeDisplayOffset, }) => {
     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]);
+        return (0, get_timeline_keyframes_1.getTimelineKeyframes)((_a = remotion_1.Internals.getCodeValuesCtx(codeValues, nodePath)) === null || _a === void 0 ? void 0 : _a[node.field.key], keyframeDisplayOffset);
     }
     const effectStatus = remotion_1.Internals.getEffectCodeValuesCtx({
         codeValues,
@@ -77,9 +77,9 @@ const getNodeKeyframes = ({ node, nodePath, codeValues, }) => {
     });
     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);
+        : null, keyframeDisplayOffset);
 };
-const TimelineExpandedTrackKeyframesInner = ({ nodePathInfo, sequence }) => {
+const TimelineExpandedTrackKeyframesInner = ({ nodePathInfo, sequence, keyframeDisplayOffset }) => {
     const videoConfig = (0, remotion_1.useVideoConfig)();
     const timelineWidth = (0, react_1.useContext)(TimelineWidthProvider_1.TimelineWidthContext);
     const { getIsExpanded } = (0, react_1.useContext)(ExpandedTracksProvider_1.ExpandedTracksGetterContext);
@@ -88,6 +88,7 @@ const TimelineExpandedTrackKeyframesInner = ({ nodePathInfo, sequence }) => {
         sequence,
         nodePathInfo,
         getDragOverrides: () => ({}),
+        getEffectDragOverrides: () => ({}),
         codeValues,
     }), [codeValues, nodePathInfo, sequence]);
     const flat = (0, react_1.useMemo)(() => (0, timeline_layout_1.flattenVisibleTreeNodes)({ nodes: tree, getIsExpanded }), [tree, getIsExpanded]);
@@ -103,9 +104,15 @@ const TimelineExpandedTrackKeyframesInner = ({ nodePathInfo, sequence }) => {
             node,
             nodePath: nodePathInfo.sequenceSubscriptionKey,
             codeValues,
+            keyframeDisplayOffset,
         }),
         key: JSON.stringify(node.nodePathInfo),
-    })), [codeValues, flat, nodePathInfo.sequenceSubscriptionKey]);
+    })), [
+        codeValues,
+        flat,
+        keyframeDisplayOffset,
+        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) => {

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/TimelineTracks.js

@@ -69,7 +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(TimelineExpandedTrackKeyframes_1.TimelineExpandedTrackKeyframes, { sequence: track.sequence, nodePathInfo: track.nodePathInfo })) : 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, keyframeDisplayOffset: track.keyframeDisplayOffset })) : 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

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

package/dist/components/Timeline/get-timeline-keyframes.js

@@ -9,7 +9,7 @@ const getComputedStatusLabel = (propStatus) => {
     return ((_a = propStatus.keyframes) === null || _a === void 0 ? void 0 : _a.length) ? 'keyframed' : 'computed';
 };
 exports.getComputedStatusLabel = getComputedStatusLabel;
-const getTimelineKeyframes = (propStatus) => {
+const getTimelineKeyframes = (propStatus, keyframeDisplayOffset = 0) => {
     var _a;
     if (!propStatus || propStatus.canUpdate) {
         return [];
@@ -17,6 +17,13 @@ const getTimelineKeyframes = (propStatus) => {
     if (propStatus.reason !== 'computed') {
         throw new Error(`Unsupported prop status: ${propStatus.reason}`);
     }
-    return (_a = propStatus.keyframes) !== null && _a !== void 0 ? _a : [];
+    const keyframes = (_a = propStatus.keyframes) !== null && _a !== void 0 ? _a : [];
+    if (keyframeDisplayOffset === 0) {
+        return keyframes;
+    }
+    return keyframes.map((keyframe) => ({
+        ...keyframe,
+        frame: keyframe.frame + keyframeDisplayOffset,
+    }));
 };
 exports.getTimelineKeyframes = getTimelineKeyframes;