@remotion/studio 4.0.478 → 4.0.481

package/dist/components/AssetSelector.js

@@ -36,7 +36,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.AssetSelector = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const remotion_1 = require("remotion");
 const write_static_file_1 = require("../api/write-static-file");
 const client_id_1 = require("../helpers/client-id");
 const colors_1 = require("../helpers/colors");
@@ -47,7 +46,6 @@ const use_asset_drag_events_1 = __importStar(require("../helpers/use-asset-drag-
 const folders_1 = require("../state/folders");
 const z_index_1 = require("../state/z-index");
 const AssetSelectorItem_1 = require("./AssetSelectorItem");
-const CurrentAsset_1 = require("./CurrentAsset");
 const styles_1 = require("./Menu/styles");
 const NotificationCenter_1 = require("./Notifications/NotificationCenter");
 const use_static_files_1 = require("./use-static-files");
@@ -77,21 +75,17 @@ const baseList = {
 };
 const AssetSelector = ({ readOnlyStudio }) => {
     const { tabIndex } = (0, z_index_1.useZIndex)();
-    const { canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     const { assetFoldersExpanded, setAssetFoldersExpanded } = (0, react_1.useContext)(folders_1.FolderContext);
     const [dropLocation, setDropLocation] = (0, react_1.useState)(null);
     const connectionStatus = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx)
         .previewServerState.type;
     const shouldAllowUpload = connectionStatus === 'connected' && !readOnlyStudio;
-    const showCurrentAsset = (canvasContent === null || canvasContent === void 0 ? void 0 : canvasContent.type) === 'asset';
     const list = (0, react_1.useMemo)(() => {
         return {
             ...baseList,
-            height: showCurrentAsset
-                ? `calc(100% - ${CurrentAsset_1.CURRENT_ASSET_HEIGHT}px)`
-                : '100%',
+            height: '100%',
         };
-    }, [showCurrentAsset]);
+    }, []);
     const staticFiles = (0, use_static_files_1.useStaticFiles)();
     const publicFolderExists = window.remotion_publicFolderExists;
     const assetTree = (0, react_1.useMemo)(() => {
@@ -164,11 +158,11 @@ const AssetSelector = ({ readOnlyStudio }) => {
             setDropLocation(null);
         }
     }, [dropLocation, staticFiles]);
-    return (jsx_runtime_1.jsxs("div", { style: container, onDragOver: shouldAllowUpload ? onDragOver : undefined, onDrop: shouldAllowUpload ? onDrop : undefined, children: [showCurrentAsset ? jsx_runtime_1.jsx(CurrentAsset_1.CurrentAsset, {}) : null, staticFiles.length === 0 ? (publicFolderExists ? (jsx_runtime_1.jsx("div", { style: emptyState, children: jsx_runtime_1.jsxs("div", { style: label, children: ["To add assets, place a file in the", ' ', jsx_runtime_1.jsx("code", { style: styles_1.inlineCodeSnippet, children: "public" }),
-                        " folder of your project or drag and drop a file here."] }) })) : (jsx_runtime_1.jsx("div", { style: emptyState, children: jsx_runtime_1.jsxs("div", { style: label, children: ["To add assets, create a folder called", ' ', jsx_runtime_1.jsx("code", { style: styles_1.inlineCodeSnippet, children: "public" }),
-                        " in the root of your project and place a file in it."] }) }))) : (jsx_runtime_1.jsx("div", { className: "__remotion-vertical-scrollbar", style: {
-                    ...list,
-                    backgroundColor: isDropDiv ? colors_1.CLEAR_HOVER : colors_1.BACKGROUND,
-                }, onDragEnter: onDragEnter, onDragLeave: onDragLeave, children: jsx_runtime_1.jsx(AssetSelectorItem_1.AssetFolderTree, { item: assetTree, level: 0, parentFolder: null, name: null, tabIndex: tabIndex, toggleFolder: toggleFolder, dropLocation: dropLocation, setDropLocation: setDropLocation, readOnlyStudio: readOnlyStudio }) }))] }));
+    return (jsx_runtime_1.jsx("div", { style: container, onDragOver: shouldAllowUpload ? onDragOver : undefined, onDrop: shouldAllowUpload ? onDrop : undefined, children: staticFiles.length === 0 ? (publicFolderExists ? (jsx_runtime_1.jsx("div", { style: emptyState, children: jsx_runtime_1.jsxs("div", { style: label, children: ["To add assets, place a file in the", ' ', jsx_runtime_1.jsx("code", { style: styles_1.inlineCodeSnippet, children: "public" }),
+                    " folder of your project or drag and drop a file here."] }) })) : (jsx_runtime_1.jsx("div", { style: emptyState, children: jsx_runtime_1.jsxs("div", { style: label, children: ["To add assets, create a folder called", ' ', jsx_runtime_1.jsx("code", { style: styles_1.inlineCodeSnippet, children: "public" }),
+                    " in the root of your project and place a file in it."] }) }))) : (jsx_runtime_1.jsx("div", { className: "__remotion-vertical-scrollbar", style: {
+                ...list,
+                backgroundColor: isDropDiv ? colors_1.CLEAR_HOVER : colors_1.BACKGROUND,
+            }, onDragEnter: onDragEnter, onDragLeave: onDragLeave, children: jsx_runtime_1.jsx(AssetSelectorItem_1.AssetFolderTree, { item: assetTree, level: 0, parentFolder: null, name: null, tabIndex: tabIndex, toggleFolder: toggleFolder, dropLocation: dropLocation, setDropLocation: setDropLocation, readOnlyStudio: readOnlyStudio }) })) }));
 };
 exports.AssetSelector = AssetSelector;

package/dist/components/AudioWaveform.js

@@ -52,6 +52,12 @@ const waveformCanvasStyle = {
 const volumeCanvasStyle = {
     position: 'absolute',
 };
+const parseVolume = (volume) => {
+    if (typeof volume === 'number') {
+        return volume;
+    }
+    return volume.split(',').map((v) => Number(v));
+};
 const drawLoopedWaveform = ({ canvas, peaks, volume, visualizationWidth, loopWidth, }) => {
     const h = canvas.height;
     const w = Math.ceil(visualizationWidth);
@@ -95,6 +101,7 @@ const AudioWaveform = ({ src, height, startFrom, durationInFrames, visualization
     const hasTransferredCanvas = (0, react_1.useRef)(false);
     const latestRequestId = (0, react_1.useRef)(0);
     const shouldRenderVolumeOverlay = doesVolumeChange && typeof volume === 'string';
+    const parsedVolume = (0, react_1.useMemo)(() => parseVolume(volume), [volume]);
     (0, react_1.useEffect)(() => {
         if (canUseWorkerPath) {
             return;
@@ -198,7 +205,6 @@ const AudioWaveform = ({ src, height, startFrom, durationInFrames, visualization
         }
         const h = height;
         const w = Math.ceil(visualizationWidth);
-        const vol = typeof volume === 'number' ? volume : 1;
         if (canUseWorkerPath) {
             const worker = waveformWorker.current;
             if (!worker || !hasTransferredCanvas.current) {
@@ -212,7 +218,7 @@ const AudioWaveform = ({ src, height, startFrom, durationInFrames, visualization
                 src,
                 width: w,
                 height: h,
-                volume: vol,
+                volume: parsedVolume,
                 startFrom,
                 durationInFrames,
                 fps: vidConf.fps,
@@ -228,7 +234,7 @@ const AudioWaveform = ({ src, height, startFrom, durationInFrames, visualization
             drawLoopedWaveform({
                 canvas: canvasElement,
                 peaks: portionPeaks !== null && portionPeaks !== void 0 ? portionPeaks : EMPTY_PEAKS,
-                volume: vol,
+                volume: parsedVolume,
                 visualizationWidth,
                 loopWidth: (0, timeline_utils_1.getLoopDisplayWidth)({
                     visualizationWidth,
@@ -241,7 +247,7 @@ const AudioWaveform = ({ src, height, startFrom, durationInFrames, visualization
                 canvas: canvasElement,
                 peaks: portionPeaks !== null && portionPeaks !== void 0 ? portionPeaks : EMPTY_PEAKS,
                 color: 'rgba(255, 255, 255, 0.6)',
-                volume: vol,
+                volume: parsedVolume,
                 width: w,
             });
         }
@@ -251,12 +257,12 @@ const AudioWaveform = ({ src, height, startFrom, durationInFrames, visualization
         height,
         loopDisplay,
         playbackRate,
+        parsedVolume,
         portionPeaks,
         src,
         startFrom,
         vidConf.fps,
         visualizationWidth,
-        volume,
         waveformCanvasKey,
     ]);
     (0, react_1.useEffect)(() => {
@@ -275,11 +281,15 @@ const AudioWaveform = ({ src, height, startFrom, durationInFrames, visualization
         volumeCanvasElement.width = Math.ceil(visualizationWidth);
         volumeCanvasElement.height = h;
         context.clearRect(0, 0, visualizationWidth, h);
-        const volumes = volume.split(',').map((v) => Number(v));
+        if (!Array.isArray(parsedVolume)) {
+            return;
+        }
         context.beginPath();
         context.moveTo(0, h);
-        volumes.forEach((v, index) => {
-            const x = (index / (volumes.length - 1)) * visualizationWidth;
+        parsedVolume.forEach((v, index) => {
+            const x = parsedVolume.length <= 1
+                ? 0
+                : (index / (parsedVolume.length - 1)) * visualizationWidth;
             const y = (1 - v) * (h - timeline_layout_1.TIMELINE_BORDER * 2) + 1;
             if (index === 0) {
                 context.moveTo(x, y);
@@ -290,10 +300,8 @@ const AudioWaveform = ({ src, height, startFrom, durationInFrames, visualization
         });
         context.strokeStyle = colors_1.LIGHT_TRANSPARENT;
         context.stroke();
-    }, [height, shouldRenderVolumeOverlay, visualizationWidth, volume]);
+    }, [height, parsedVolume, shouldRenderVolumeOverlay, visualizationWidth]);
     if (error) {
-        // eslint-disable-next-line no-console
-        console.error(error);
         return (jsx_runtime_1.jsx("div", { style: getContainerStyle(height), children: jsx_runtime_1.jsx("div", { style: errorMessage, children: "No waveform available. The audio could not be decoded or may not support CORS." }) }));
     }
     if (!canUseWorkerPath && !peaks) {

package/dist/components/Button.d.ts

@@ -3,10 +3,12 @@ export type ButtonProps = {
     readonly onClick: () => void;
     readonly disabled?: boolean;
     readonly children: React.ReactNode;
+    readonly size?: 'default' | 'compact' | 'condensed';
     readonly style?: React.CSSProperties;
     readonly buttonContainerStyle?: React.CSSProperties;
     readonly autoFocus?: boolean;
     readonly title?: string;
     readonly id?: string;
+    readonly onPointerDown?: React.PointerEventHandler<HTMLButtonElement>;
 };
 export declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/Button.js

@@ -14,22 +14,25 @@ const button = {
     color: 'white',
     flexDirection: 'row',
 };
-const ButtonRefForwardFunction = ({ children, onClick, title, disabled, style, id, autoFocus, buttonContainerStyle, }, ref) => {
+const ButtonRefForwardFunction = ({ children, onClick, title, disabled, size = 'default', style, id, autoFocus, buttonContainerStyle, onPointerDown, }, ref) => {
     const combined = (0, react_1.useMemo)(() => {
         return {
             ...button,
+            ...(size === 'compact' ? { fontSize: 12 } : null),
+            ...(size === 'condensed' ? { fontSize: 11 } : null),
             ...(style !== null && style !== void 0 ? style : {}),
         };
-    }, [style]);
+    }, [size, style]);
     const buttonContainer = (0, react_1.useMemo)(() => {
         return {
-            padding: 10,
+            padding: size === 'condensed' ? '2px 7px' : size === 'compact' ? '5px 8px' : 10,
             cursor: disabled ? 'inherit' : 'pointer',
-            fontSize: 14,
+            fontSize: size === 'condensed' ? 11 : size === 'compact' ? 12 : 14,
+            lineHeight: size === 'condensed' ? '14px' : size === 'compact' ? '14px' : undefined,
             opacity: disabled ? 0.7 : 1,
             ...(buttonContainerStyle !== null && buttonContainerStyle !== void 0 ? buttonContainerStyle : {}),
         };
-    }, [buttonContainerStyle, disabled]);
-    return (jsx_runtime_1.jsx("button", { ref: ref, id: id, style: combined, type: "button", disabled: disabled, onClick: onClick, autoFocus: autoFocus, title: title, children: jsx_runtime_1.jsx("div", { className: "css-reset", style: buttonContainer, children: children }) }));
+    }, [buttonContainerStyle, disabled, size]);
+    return (jsx_runtime_1.jsx("button", { ref: ref, id: id, style: combined, type: "button", disabled: disabled, onClick: onClick, onPointerDown: onPointerDown, autoFocus: autoFocus, title: title, children: jsx_runtime_1.jsx("div", { className: "css-reset", style: buttonContainer, children: children }) }));
 };
 exports.Button = (0, react_1.forwardRef)(ButtonRefForwardFunction);

package/dist/components/CompactExplanation.d.ts

@@ -0,0 +1,12 @@
+import { type ReactNode } from 'react';
+export declare const CompactExplanation: ({ children, learnMoreAriaLabel, learnMoreHref, learnMoreTitle, }: {
+    readonly children: ReactNode;
+    readonly learnMoreAriaLabel?: string | undefined;
+    readonly learnMoreHref?: string | undefined;
+    readonly learnMoreTitle?: string | undefined;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const CompactNotSetUp: ({ learnMoreAriaLabel, learnMoreHref, learnMoreTitle, }: {
+    readonly learnMoreAriaLabel: string;
+    readonly learnMoreHref: string;
+    readonly learnMoreTitle?: string | undefined;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/components/CompactExplanation.js

@@ -0,0 +1,52 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CompactNotSetUp = exports.CompactExplanation = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const colors_1 = require("../helpers/colors");
+const compactExplanation = {
+    color: colors_1.LIGHT_TEXT,
+    fontFamily: 'sans-serif',
+    fontSize: 12,
+    lineHeight: 1.4,
+    padding: '0 12px 8px',
+};
+const compactHelpLink = {
+    alignItems: 'center',
+    color: 'inherit',
+    cursor: 'default',
+    display: 'inline-flex',
+    height: 13,
+    justifyContent: 'center',
+    marginLeft: 8,
+    opacity: 1,
+    textDecoration: 'none',
+    verticalAlign: 'text-bottom',
+    width: 13,
+};
+const compactHelpLinkHovered = {
+    ...compactHelpLink,
+    color: 'white',
+};
+const compactHelpIcon = {
+    color: 'inherit',
+    display: 'block',
+    fill: 'currentColor',
+    height: 13,
+    width: 13,
+};
+const compactHelpIconPath = {
+    color: 'inherit',
+};
+const CompactHelpLink = ({ href, ariaLabel, title, }) => {
+    const [hovered, setHovered] = (0, react_1.useState)(false);
+    return (jsx_runtime_1.jsx("a", { href: href, target: "_blank", rel: "noopener noreferrer", style: hovered ? compactHelpLinkHovered : compactHelpLink, "aria-label": ariaLabel, title: title, onMouseEnter: () => setHovered(true), onMouseLeave: () => setHovered(false), children: jsx_runtime_1.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", style: compactHelpIcon, "aria-hidden": "true", children: jsx_runtime_1.jsx("path", { style: compactHelpIconPath, fill: "currentColor", d: "M464 256a208 208 0 1 0 -416 0 208 208 0 1 0 416 0zM0 256a256 256 0 1 1 512 0 256 256 0 1 1 -512 0zm256-80c-17.7 0-32 14.3-32 32l-48 0c0-44.2 35.8-80 80-80s80 35.8 80 80c0 35.1-20.5 57.5-38.2 70-6.3 4.4-12.5 7.8-17.8 10.4l0 21.9-48 0 0-56.7c1.4-.4 2.7-.7 4.1-1.1 12.2-3.2 23.3-6.1 34.1-13.7 10.4-7.3 17.8-16.9 17.8-30.8 0-17.7-14.3-32-32-32zM232 344l48 0 0 48-48 0 0-48z" }) }) }));
+};
+const CompactExplanation = ({ children, learnMoreAriaLabel, learnMoreHref, learnMoreTitle = 'Learn more', }) => {
+    return (jsx_runtime_1.jsxs("div", { style: compactExplanation, children: [children, learnMoreHref ? (jsx_runtime_1.jsx(CompactHelpLink, { href: learnMoreHref, ariaLabel: learnMoreAriaLabel !== null && learnMoreAriaLabel !== void 0 ? learnMoreAriaLabel : learnMoreTitle, title: learnMoreTitle })) : null] }));
+};
+exports.CompactExplanation = CompactExplanation;
+const CompactNotSetUp = ({ learnMoreAriaLabel, learnMoreHref, learnMoreTitle, }) => {
+    return (jsx_runtime_1.jsx(exports.CompactExplanation, { learnMoreAriaLabel: learnMoreAriaLabel, learnMoreHref: learnMoreHref, learnMoreTitle: learnMoreTitle !== null && learnMoreTitle !== void 0 ? learnMoreTitle : 'Learn more', children: "Not set up" }));
+};
+exports.CompactNotSetUp = CompactNotSetUp;

package/dist/components/CompositionSelector.js

@@ -13,7 +13,6 @@ const use_keybinding_1 = require("../helpers/use-keybinding");
 const modals_1 = require("../state/modals");
 const z_index_1 = require("../state/z-index");
 const CompositionSelectorItem_1 = require("./CompositionSelectorItem");
-const CurrentComposition_1 = require("./CurrentComposition");
 const InitialCompositionLoader_1 = require("./InitialCompositionLoader");
 const useCompositionNavigation = () => {
     const { compositions, canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
@@ -59,7 +58,6 @@ const container = {
     overflow: 'hidden',
     backgroundColor: colors_1.BACKGROUND,
 };
-const QUICK_SWITCHER_TRIGGER_HEIGHT = 38;
 const quickSwitcherArea = {
     padding: '4px 12px',
     borderBottom: `1px solid ${colors_1.BORDER_COLOR}`,
@@ -99,7 +97,7 @@ const CompositionSelector = () => {
     }, [sortedCompositions, sortedFolders, foldersExpanded]);
     const list = (0, react_1.useMemo)(() => {
         return {
-            height: `calc(100% - ${CurrentComposition_1.CURRENT_COMPOSITION_HEIGHT}px - ${QUICK_SWITCHER_TRIGGER_HEIGHT}px)`,
+            flex: 1,
             overflowY: 'auto',
         };
     }, []);
@@ -115,7 +113,7 @@ const CompositionSelector = () => {
         });
     }, [setSelectedModal]);
     return (jsx_runtime_1.jsxs("div", { style: container, children: [
-            jsx_runtime_1.jsx(CurrentComposition_1.CurrentComposition, {}), jsx_runtime_1.jsx("div", { style: quickSwitcherArea, children: jsx_runtime_1.jsxs("button", { type: "button", style: quickSwitcherTrigger, onClick: openQuickSwitcher, tabIndex: tabIndex, children: ["Search...", (0, use_keybinding_1.areKeyboardShortcutsDisabled)() ? null : (jsx_runtime_1.jsxs("span", { style: shortcutLabel, children: [ShortcutHint_1.cmdOrCtrlCharacter, "+K"] }))] }) }), jsx_runtime_1.jsx("div", { className: "__remotion-vertical-scrollbar", style: list, children: items.map((c) => {
+            jsx_runtime_1.jsx("div", { style: quickSwitcherArea, children: jsx_runtime_1.jsxs("button", { type: "button", style: quickSwitcherTrigger, onClick: openQuickSwitcher, tabIndex: tabIndex, children: ["Search...", (0, use_keybinding_1.areKeyboardShortcutsDisabled)() ? null : (jsx_runtime_1.jsxs("span", { style: shortcutLabel, children: [ShortcutHint_1.cmdOrCtrlCharacter, "+K"] }))] }) }), jsx_runtime_1.jsx("div", { className: "__remotion-vertical-scrollbar", style: list, children: items.map((c) => {
                     return (jsx_runtime_1.jsx(CompositionSelectorItem_1.CompositionSelectorItem, { level: 0, currentComposition: canvasContent && canvasContent.type === 'composition'
                             ? canvasContent.compositionId
                             : null, selectComposition: selectComposition, toggleFolder: toggleFolder, tabIndex: tabIndex, item: c }, c.key + c.type));

package/dist/components/CurrentAsset.d.ts

@@ -1,4 +1,6 @@
 import React from 'react';
-export declare const CURRENT_ASSET_HEIGHT = 80;
+import type { MediaMetadata } from '../helpers/use-media-metadata';
+export declare const CURRENT_ASSET_HEIGHT = 84;
 export declare const getCurrentAssetMetadataSource: (assetName: string | null) => string | null;
+export declare const getCurrentAssetMediaDetailLines: (mediaMetadata: MediaMetadata) => string[];
 export declare const CurrentAsset: React.FC;

package/dist/components/CurrentAsset.js

@@ -1,44 +1,17 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.CurrentAsset = exports.getCurrentAssetMetadataSource = exports.CURRENT_ASSET_HEIGHT = void 0;
+exports.CurrentAsset = exports.getCurrentAssetMediaDetailLines = exports.getCurrentAssetMetadataSource = exports.CURRENT_ASSET_HEIGHT = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const studio_shared_1 = require("@remotion/studio-shared");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
-const colors_1 = require("../helpers/colors");
 const format_media_duration_1 = require("../helpers/format-media-duration");
 const get_preview_file_type_1 = require("../helpers/get-preview-file-type");
+const render_codec_label_1 = require("../helpers/render-codec-label");
 const use_media_metadata_1 = require("../helpers/use-media-metadata");
+const InspectorInfoHeader_1 = require("./InspectorInfoHeader");
 const use_static_files_1 = require("./use-static-files");
-exports.CURRENT_ASSET_HEIGHT = 80;
-const container = {
-    height: exports.CURRENT_ASSET_HEIGHT,
-    display: 'block',
-    borderBottom: `1px solid ${colors_1.BORDER_COLOR}`,
-    padding: 12,
-    color: 'white',
-    backgroundColor: colors_1.BACKGROUND,
-};
-const title = {
-    fontWeight: 'bold',
-    fontSize: 12,
-    whiteSpace: 'nowrap',
-    lineHeight: '18px',
-    backgroundColor: colors_1.BACKGROUND,
-};
-const subtitle = {
-    fontSize: 12,
-    opacity: 0.8,
-    whiteSpace: 'nowrap',
-    lineHeight: '18px',
-    backgroundColor: colors_1.BACKGROUND,
-};
-const row = {
-    display: 'flex',
-    flexDirection: 'row',
-    lineHeight: '18px',
-    backgroundColor: colors_1.BACKGROUND,
-};
+exports.CURRENT_ASSET_HEIGHT = InspectorInfoHeader_1.INSPECTOR_INFO_HEADER_MIN_HEIGHT;
 const getCurrentAssetMetadataSource = (assetName) => {
     if (!assetName) {
         return null;
@@ -49,6 +22,36 @@ const getCurrentAssetMetadataSource = (assetName) => {
         : null;
 };
 exports.getCurrentAssetMetadataSource = getCurrentAssetMetadataSource;
+const formatFps = (fps) => `${fps.toFixed(2)} FPS`;
+const getCurrentAssetMediaDetailLines = (mediaMetadata) => {
+    const detailLines = [];
+    if (mediaMetadata.hasVideoTrack === true) {
+        const videoParts = [
+            (0, render_codec_label_1.renderHumanReadableVideoCodec)(mediaMetadata.videoCodec),
+        ];
+        if (mediaMetadata.fps !== null) {
+            videoParts.push(formatFps(mediaMetadata.fps));
+        }
+        if (mediaMetadata.isHdr !== null) {
+            videoParts.push(`HDR: ${mediaMetadata.isHdr ? 'Yes' : 'No'}`);
+        }
+        detailLines.push(`Video: ${videoParts.join(' · ')}`);
+    }
+    if (mediaMetadata.hasAudioTrack === true) {
+        const audioParts = [
+            (0, render_codec_label_1.renderHumanReadableAudioCodec)(mediaMetadata.audioCodec),
+        ];
+        if (mediaMetadata.sampleRate !== null) {
+            audioParts.push(`${mediaMetadata.sampleRate} Hz`);
+        }
+        detailLines.push(`Audio: ${audioParts.join(' · ')}`);
+    }
+    else if (mediaMetadata.hasAudioTrack === false) {
+        detailLines.push('Audio: No audio');
+    }
+    return detailLines;
+};
+exports.getCurrentAssetMediaDetailLines = getCurrentAssetMediaDetailLines;
 const CurrentAsset = () => {
     var _a;
     const { canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
@@ -65,7 +68,7 @@ const CurrentAsset = () => {
     const src = (0, exports.getCurrentAssetMetadataSource)(assetName);
     const mediaMetadata = (0, use_media_metadata_1.useMediaMetadata)(src);
     if (!assetName) {
-        return jsx_runtime_1.jsx("div", { style: container });
+        return jsx_runtime_1.jsx(InspectorInfoHeader_1.InspectorInfoHeader, {});
     }
     const fileName = (_a = assetName.split('/').pop()) !== null && _a !== void 0 ? _a : assetName;
     const subtitleParts = [];
@@ -80,7 +83,12 @@ const CurrentAsset = () => {
             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: (0, format_media_duration_1.formatMediaDuration)(mediaMetadata.duration) })) : null] }) }) }));
+    const mediaDetailLines = mediaMetadata
+        ? (0, exports.getCurrentAssetMediaDetailLines)(mediaMetadata)
+        : [];
+    return (jsx_runtime_1.jsxs(InspectorInfoHeader_1.InspectorInfoHeader, { children: [
+            jsx_runtime_1.jsx(InspectorInfoHeader_1.InspectorInfoTitle, { children: fileName }), subtitleParts.length > 0 ? (jsx_runtime_1.jsx(InspectorInfoHeader_1.InspectorInfoSubtitle, { children: subtitleParts.join(' · ') })) : null, mediaMetadata ? (jsx_runtime_1.jsx(InspectorInfoHeader_1.InspectorInfoSubtitle, { children: (0, format_media_duration_1.formatMediaDuration)(mediaMetadata.duration) })) : null, mediaDetailLines.map((line) => {
+                return jsx_runtime_1.jsx(InspectorInfoHeader_1.InspectorInfoSubtitle, { children: line }, line);
+            })] }));
 };
 exports.CurrentAsset = CurrentAsset;

package/dist/components/CurrentComposition.d.ts

@@ -1,2 +1,2 @@
-export declare const CURRENT_COMPOSITION_HEIGHT = 64;
+export declare const CURRENT_COMPOSITION_HEIGHT = 84;
 export declare const CurrentComposition: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/CurrentComposition.js

@@ -2,41 +2,48 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CurrentComposition = exports.CURRENT_COMPOSITION_HEIGHT = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const remotion_1 = require("remotion");
-const colors_1 = require("../helpers/colors");
 const is_composition_still_1 = require("../helpers/is-composition-still");
+const open_in_editor_1 = require("../helpers/open-in-editor");
 const render_frame_1 = require("../state/render-frame");
-exports.CURRENT_COMPOSITION_HEIGHT = 64;
-const container = {
-    height: exports.CURRENT_COMPOSITION_HEIGHT,
-    display: 'block',
-    padding: '6px 12px',
-    color: 'white',
-    backgroundColor: colors_1.BACKGROUND,
-};
-const title = {
-    fontWeight: 'bold',
-    fontSize: 12,
-    whiteSpace: 'nowrap',
-    lineHeight: '18px',
-    backgroundColor: colors_1.BACKGROUND,
-};
-const subtitle = {
-    fontSize: 12,
-    opacity: 0.8,
-    whiteSpace: 'nowrap',
-    lineHeight: '18px',
-    backgroundColor: colors_1.BACKGROUND,
-};
-const row = {
-    display: 'flex',
-    flexDirection: 'row',
-    lineHeight: '18px',
-    backgroundColor: colors_1.BACKGROUND,
-};
+const InspectorInfoHeader_1 = require("./InspectorInfoHeader");
+const InspectorSourceLocation_1 = require("./InspectorSourceLocation");
+const NotificationCenter_1 = require("./Notifications/NotificationCenter");
+const use_resolved_stack_1 = require("./Timeline/use-resolved-stack");
+exports.CURRENT_COMPOSITION_HEIGHT = InspectorInfoHeader_1.INSPECTOR_INFO_HEADER_MIN_HEIGHT;
 const CurrentComposition = () => {
+    var _a;
     const video = remotion_1.Internals.useVideo();
-    return (jsx_runtime_1.jsx("div", { style: container, children: video ? (jsx_runtime_1.jsx("div", { style: row, children: jsx_runtime_1.jsxs("div", { children: [
-                    jsx_runtime_1.jsx("div", { style: title, children: video.id }), jsx_runtime_1.jsxs("div", { style: subtitle, children: [video.width, "x", video.height, (0, is_composition_still_1.isCompositionStill)(video) ? null : `, ${video.fps} FPS`] }), (0, is_composition_still_1.isCompositionStill)(video) ? (jsx_runtime_1.jsx("div", { style: subtitle, children: "Still" })) : (jsx_runtime_1.jsxs("div", { style: subtitle, children: ["Duration ", (0, render_frame_1.renderFrame)(video.durationInFrames, video.fps)] }))] }) })) : null }));
+    const { compositions } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
+    const currentComposition = (0, react_1.useMemo)(() => {
+        var _a;
+        if (!video) {
+            return null;
+        }
+        return ((_a = compositions.find((composition) => composition.id === video.id)) !== null && _a !== void 0 ? _a : null);
+    }, [compositions, video]);
+    const resolvedCompositionLocation = (0, use_resolved_stack_1.useResolvedStack)((_a = currentComposition === null || currentComposition === void 0 ? void 0 : currentComposition.stack) !== null && _a !== void 0 ? _a : null);
+    const validatedLocation = (0, react_1.useMemo)(() => {
+        if (!(resolvedCompositionLocation === null || resolvedCompositionLocation === void 0 ? void 0 : resolvedCompositionLocation.source) ||
+            resolvedCompositionLocation.line === null) {
+            return null;
+        }
+        return {
+            column: resolvedCompositionLocation.column,
+            line: resolvedCompositionLocation.line,
+            source: resolvedCompositionLocation.source,
+        };
+    }, [resolvedCompositionLocation]);
+    const openFileLocation = (0, react_1.useCallback)(() => {
+        if (!validatedLocation) {
+            return;
+        }
+        (0, open_in_editor_1.openOriginalPositionInEditor)(validatedLocation).catch((err) => {
+            (0, NotificationCenter_1.showNotification)(err.message, 2000);
+        });
+    }, [validatedLocation]);
+    return (jsx_runtime_1.jsx(InspectorInfoHeader_1.InspectorInfoHeader, { children: video ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                jsx_runtime_1.jsx(InspectorInfoHeader_1.InspectorInfoTitle, { children: video.id }), jsx_runtime_1.jsx(InspectorSourceLocation_1.InspectorSourceLocation, { location: validatedLocation, canOpen: validatedLocation !== null, onOpen: openFileLocation }), jsx_runtime_1.jsxs(InspectorInfoHeader_1.InspectorInfoSubtitle, { children: [video.width, "x", video.height, (0, is_composition_still_1.isCompositionStill)(video) ? null : `, ${video.fps} FPS`] }), (0, is_composition_still_1.isCompositionStill)(video) ? (jsx_runtime_1.jsx(InspectorInfoHeader_1.InspectorInfoSubtitle, { children: "Still" })) : (jsx_runtime_1.jsxs(InspectorInfoHeader_1.InspectorInfoSubtitle, { children: ["Duration ", (0, render_frame_1.renderFrame)(video.durationInFrames, video.fps)] }))] })) : null }));
 };
 exports.CurrentComposition = CurrentComposition;

package/dist/components/CurrentCompositionSideEffects.d.ts

@@ -1,5 +1,2 @@
 import type React from 'react';
 export declare const TitleUpdater: React.FC;
-export declare const CurrentCompositionKeybindings: React.FC<{
-    readonly readOnlyStudio: boolean;
-}>;

package/dist/components/CurrentCompositionSideEffects.js

@@ -1,13 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.CurrentCompositionKeybindings = exports.TitleUpdater = void 0;
+exports.TitleUpdater = void 0;
 const react_1 = require("react");
 const remotion_1 = require("remotion");
-const client_id_1 = require("../helpers/client-id");
 const document_title_1 = require("../helpers/document-title");
-const show_browser_rendering_1 = require("../helpers/show-browser-rendering");
-const use_keybinding_1 = require("../helpers/use-keybinding");
-const NotificationCenter_1 = require("./Notifications/NotificationCenter");
 const context_1 = require("./RenderQueue/context");
 const TitleUpdater = () => {
     const renderQueue = (0, react_1.useContext)(context_1.RenderQueueContext);
@@ -38,35 +34,3 @@ const TitleUpdater = () => {
     return null;
 };
 exports.TitleUpdater = TitleUpdater;
-const CurrentCompositionKeybindings = ({ readOnlyStudio }) => {
-    const keybindings = (0, use_keybinding_1.useKeybinding)();
-    const video = remotion_1.Internals.useVideo();
-    const { type } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx).previewServerState;
-    const openRenderModal = (0, react_1.useCallback)(() => {
-        if (!video) {
-            return;
-        }
-        if (type !== 'connected' && !show_browser_rendering_1.SHOW_BROWSER_RENDERING && !readOnlyStudio) {
-            (0, NotificationCenter_1.showNotification)('Studio server is offline', 2000);
-            return;
-        }
-        const renderButton = document.getElementById('render-modal-button');
-        renderButton.click();
-    }, [readOnlyStudio, type, video]);
-    (0, react_1.useEffect)(() => {
-        const binding = keybindings.registerKeybinding({
-            event: 'keydown',
-            key: 'r',
-            commandCtrlKey: false,
-            callback: openRenderModal,
-            preventDefault: true,
-            triggerIfInputFieldFocused: false,
-            keepRegisteredWhenNotHighestContext: false,
-        });
-        return () => {
-            binding.unregister();
-        };
-    }, [keybindings, openRenderModal]);
-    return null;
-};
-exports.CurrentCompositionKeybindings = CurrentCompositionKeybindings;

package/dist/components/DefaultPropsEditor.d.ts

@@ -1,8 +1,18 @@
-import type { PropsEditType } from './RenderModal/DataEditor';
+import type { DataEditorLayout, DataEditorMode, PropsEditType, RenderModalWarning } from './RenderModal/DataEditor';
+import type { SchemaErrorMode } from './RenderModal/SchemaEditor/SchemaErrorMessages';
 import type { UpdaterFunction } from './RenderModal/SchemaEditor/ZodSwitch';
-export declare const DefaultPropsEditor: ({ unresolvedComposition, defaultProps, setDefaultProps, propsEditType, }: {
+export declare const DefaultPropsEditor: ({ unresolvedComposition, defaultProps, setDefaultProps, propsEditType, schemaErrorMode, layout, mode, onModeChange, hideModeControls, warnings, showWarning, setShowWarning, hideWarningButton, }: {
     readonly unresolvedComposition: import("remotion").AnyComposition;
     readonly defaultProps: Record<string, unknown>;
     readonly setDefaultProps: UpdaterFunction<Record<string, unknown>>;
     readonly propsEditType: PropsEditType;
+    readonly schemaErrorMode?: SchemaErrorMode | undefined;
+    readonly layout?: DataEditorLayout | undefined;
+    readonly mode?: DataEditorMode | undefined;
+    readonly onModeChange?: ((mode: DataEditorMode) => void) | undefined;
+    readonly hideModeControls?: boolean | undefined;
+    readonly warnings?: RenderModalWarning[] | undefined;
+    readonly showWarning?: boolean | undefined;
+    readonly setShowWarning?: import("react").Dispatch<import("react").SetStateAction<boolean>> | undefined;
+    readonly hideWarningButton?: boolean | undefined;
 }) => import("react/jsx-runtime").JSX.Element;

package/dist/components/DefaultPropsEditor.js

@@ -5,11 +5,11 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const ObserveDefaultPropsContext_1 = require("./ObserveDefaultPropsContext");
 const DataEditor_1 = require("./RenderModal/DataEditor");
-const DefaultPropsEditor = ({ unresolvedComposition, defaultProps, setDefaultProps, propsEditType, }) => {
+const DefaultPropsEditor = ({ unresolvedComposition, defaultProps, setDefaultProps, propsEditType, schemaErrorMode, layout, mode, onModeChange, hideModeControls, warnings, showWarning, setShowWarning, hideWarningButton, }) => {
     const canSaveDefaultProps = (0, react_1.useContext)(ObserveDefaultPropsContext_1.ObserveDefaultPropsContext);
     if (canSaveDefaultProps === null) {
         throw new Error('ObserveDefaultPropsContext is not set');
     }
-    return (jsx_runtime_1.jsx(DataEditor_1.DataEditor, { unresolvedComposition: unresolvedComposition, defaultProps: defaultProps, setDefaultProps: setDefaultProps, propsEditType: propsEditType, canSaveDefaultProps: canSaveDefaultProps.canSaveDefaultProps }));
+    return (jsx_runtime_1.jsx(DataEditor_1.DataEditor, { unresolvedComposition: unresolvedComposition, defaultProps: defaultProps, setDefaultProps: setDefaultProps, propsEditType: propsEditType, canSaveDefaultProps: canSaveDefaultProps.canSaveDefaultProps, schemaErrorMode: schemaErrorMode, layout: layout, mode: mode, onModeChange: onModeChange, hideModeControls: hideModeControls, warnings: warnings, showWarning: showWarning, setShowWarning: setShowWarning, hideWarningButton: hideWarningButton }));
 };
 exports.DefaultPropsEditor = DefaultPropsEditor;

package/dist/components/Editor.js

@@ -47,7 +47,6 @@ const z_index_1 = require("../state/z-index");
 const canvas_capture_enabled_1 = require("./canvas-capture-enabled");
 const EditorContent_1 = require("./EditorContent");
 const ForceSpecificCursor_1 = require("./ForceSpecificCursor");
-const GlobalKeybindings_1 = require("./GlobalKeybindings");
 const Modals_1 = require("./Modals");
 const NotificationCenter_1 = require("./Notifications/NotificationCenter");
 const RenderErrorContext_1 = require("./RenderErrorContext");
@@ -104,12 +103,10 @@ const Editor = ({ Root, readOnlyStudio }) => {
     const editor = (jsx_runtime_1.jsx(z_index_1.HigherZIndex, { onEscape: noop_1.noop, onOutsideClick: noop_1.noop, children: jsx_runtime_1.jsx(timeline_zoom_1.TimelineZoomContext, { children: jsx_runtime_1.jsxs(SequencePropsSubscriptionProvider_1.SequencePropsSubscriptionProvider, { children: [
                     jsx_runtime_1.jsxs(remotion_1.Internals.CurrentScaleContext.Provider, { value: value, children: [
                             jsx_runtime_1.jsx(ForceSpecificCursor_1.ForceSpecificCursor, {}), jsx_runtime_1.jsx(scale_lock_1.ScaleLockProvider, { children: jsx_runtime_1.jsxs("div", { style: background, children: [
-                                        jsx_runtime_1.jsx(remotion_1.Internals.CompositionRenderErrorContext.Provider, { value: compositionRenderErrorContextValue, children: canvasMounted ? jsx_runtime_1.jsx(MemoRoot, {}) : null }), jsx_runtime_1.jsxs(remotion_1.Internals.CanUseRemotionHooksProvider, { children: [
-                                                jsx_runtime_1.jsx(RenderErrorContext_1.RenderErrorContext.Provider, { value: renderErrorContextValue, children: jsx_runtime_1.jsx(EditorContent_1.EditorContent, { readOnlyStudio: readOnlyStudio, children: jsx_runtime_1.jsx(TopPanel_1.TopPanel, { drawRef: setDrawRef, bufferStateDelayInMilliseconds: exports.BUFFER_STATE_DELAY_IN_MILLISECONDS, onMounted: onMounted, readOnlyStudio: readOnlyStudio }) }) }), jsx_runtime_1.jsx(GlobalKeybindings_1.GlobalKeybindings, {})
-                                            ] })
+                                        jsx_runtime_1.jsx(remotion_1.Internals.CompositionRenderErrorContext.Provider, { value: compositionRenderErrorContextValue, children: canvasMounted ? jsx_runtime_1.jsx(MemoRoot, {}) : null }), jsx_runtime_1.jsx(remotion_1.Internals.CanUseRemotionHooksProvider, { children: jsx_runtime_1.jsx(RenderErrorContext_1.RenderErrorContext.Provider, { value: renderErrorContextValue, children: jsx_runtime_1.jsx(EditorContent_1.EditorContent, { readOnlyStudio: readOnlyStudio, children: jsx_runtime_1.jsx(TopPanel_1.TopPanel, { drawRef: setDrawRef, bufferStateDelayInMilliseconds: exports.BUFFER_STATE_DELAY_IN_MILLISECONDS, onMounted: onMounted, readOnlyStudio: readOnlyStudio }) }) }) })
                                     ] }) })
                         ] }), jsx_runtime_1.jsx(Modals_1.Modals, { readOnlyStudio: readOnlyStudio }), jsx_runtime_1.jsx(NotificationCenter_1.NotificationCenter, {})
                 ] }) }) }));
-    return canvas_capture_enabled_1.CANVAS_CAPTURE_ENABLED ? (jsx_runtime_1.jsx(StudioCanvasCapture_1.StudioCanvasCapture, { density: 2, children: editor })) : (editor);
+    return canvas_capture_enabled_1.CANVAS_CAPTURE_ENABLED ? (jsx_runtime_1.jsx(StudioCanvasCapture_1.StudioCanvasCapture, { density: 3, children: editor })) : (editor);
 };
 exports.Editor = Editor;