@remotion/cli 4.0.44 → 4.0.46

package/dist/config/index.d.ts

@@ -295,7 +295,7 @@ export declare const ConfigInternals: {
     getOutputCodecOrUndefined: () => CodecOrUndefined;
     getBrowser: () => null;
     getPixelFormat: () => "yuv420p" | "yuva420p" | "yuv422p" | "yuv444p" | "yuv420p10le" | "yuv422p10le" | "yuv444p10le" | "yuva444p10le";
-    getProResProfile: () => "4444-xq" | "4444" | "hq" | "standard" | "light" | "proxy" | undefined;
+    getProResProfile: () => "light" | "4444-xq" | "4444" | "hq" | "standard" | "proxy" | undefined;
     getPresetProfile: () => "medium" | "ultrafast" | "superfast" | "veryfast" | "faster" | "fast" | "slow" | "slower" | "veryslow" | "placebo" | undefined;
     getShouldOverwrite: ({ defaultValue, }: {
         defaultValue: boolean;

package/dist/config/log.d.ts

@@ -1 +1 @@
-export declare const getLogLevel: () => "verbose" | "info" | "warn" | "error", setLogLevel: (newLogLevel: "verbose" | "info" | "warn" | "error") => void;
+export declare const getLogLevel: () => "error" | "verbose" | "info" | "warn", setLogLevel: (newLogLevel: "error" | "verbose" | "info" | "warn") => void;

package/dist/editor/components/Canvas.js

@@ -2,12 +2,12 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Canvas = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const media_utils_1 = require("@remotion/media-utils");
 const player_1 = require("@remotion/player");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
 const smooth_zoom_1 = require("../../smooth-zoom");
 const colors_1 = require("../helpers/colors");
+const get_asset_metadata_1 = require("../helpers/get-asset-metadata");
 const get_effective_translation_1 = require("../helpers/get-effective-translation");
 const use_keybinding_1 = require("../helpers/use-keybinding");
 const canvas_ref_1 = require("../state/canvas-ref");
@@ -36,8 +36,10 @@ const Canvas = ({ canvasContent }) => {
     const config = remotion_1.Internals.useUnsafeVideoConfig();
     const [assetResolution, setAssetResolution] = (0, react_1.useState)(null);
     const contentDimensions = (0, react_1.useMemo)(() => {
-        if (canvasContent.type === 'asset') {
-            return assetResolution;
+        if ((canvasContent.type === 'asset' || canvasContent.type === 'output') &&
+            assetResolution &&
+            assetResolution.type === 'found') {
+            return assetResolution.dimensions;
         }
         if (config) {
             return { width: config.width, height: config.height };
@@ -231,36 +233,16 @@ const Canvas = ({ canvasContent }) => {
         };
     }, [keybindings, onReset, onZoomIn, onZoomOut]);
     const fetchMetadata = (0, react_1.useCallback)(async () => {
-        if (canvasContent.type !== 'asset') {
-            return;
-        }
         setAssetResolution(null);
-        const assetSrc = (0, remotion_1.staticFile)(canvasContent.asset);
-        const fileType = (0, Preview_1.getPreviewFileType)(canvasContent.asset);
-        if (fileType === 'video') {
-            try {
-                await (0, media_utils_1.getVideoMetadata)(assetSrc).then((data) => {
-                    setAssetResolution({ width: data.width, height: data.height });
-                });
-            }
-            catch (_a) {
-                setAssetResolution('none');
-            }
-        }
-        else if (fileType === 'image') {
-            const img = new Image();
-            img.onload = () => {
-                setAssetResolution({ width: img.width, height: img.height });
-            };
-            img.src = assetSrc;
-        }
-        else {
-            setAssetResolution('none');
+        if (canvasContent.type === 'composition') {
+            return;
         }
+        const metadata = await (0, get_asset_metadata_1.getAssetMetadata)(canvasContent);
+        setAssetResolution(metadata);
     }, [canvasContent]);
     (0, react_1.useEffect)(() => {
         fetchMetadata();
     }, [fetchMetadata]);
-    return ((0, jsx_runtime_1.jsxs)("div", { ref: canvas_ref_1.canvasRef, style: container, children: [size ? ((0, jsx_runtime_1.jsx)(Preview_1.VideoPreview, { canvasContent: canvasContent, contentDimensions: contentDimensions, canvasSize: size })) : null, isFit ? null : ((0, jsx_runtime_1.jsx)("div", { style: resetZoom, className: "css-reset", children: (0, jsx_runtime_1.jsx)(ResetZoomButton_1.ResetZoomButton, { onClick: onReset }) }))] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: canvas_ref_1.canvasRef, style: container, children: [size ? ((0, jsx_runtime_1.jsx)(Preview_1.VideoPreview, { canvasContent: canvasContent, contentDimensions: contentDimensions, canvasSize: size, assetMetadata: assetResolution })) : null, isFit ? null : ((0, jsx_runtime_1.jsx)("div", { style: resetZoom, className: "css-reset", children: (0, jsx_runtime_1.jsx)(ResetZoomButton_1.ResetZoomButton, { onClick: onReset }) }))] }));
 };
 exports.Canvas = Canvas;

package/dist/editor/components/CanvasOrLoading.js

@@ -61,7 +61,7 @@ const CanvasOrLoading = () => {
         return null;
     }
     const content = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ZoomPersistor_1.ZoomPersistor, {}), (0, jsx_runtime_1.jsx)(Canvas_1.Canvas, { canvasContent: canvasContent })] }));
-    if (canvasContent.type === 'asset') {
+    if (canvasContent.type === 'asset' || canvasContent.type === 'output') {
         return content;
     }
     if (!resolved) {

package/dist/editor/components/CheckboardToggle.js

@@ -3,7 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.CheckboardToggle = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const remotion_1 = require("remotion");
 const truthy_1 = require("../../truthy");
 const colors_1 = require("../helpers/colors");
 const use_keybinding_1 = require("../helpers/use-keybinding");
@@ -17,15 +16,11 @@ const accessibilityLabel = [
     .join(' ');
 const CheckboardToggle = () => {
     const { checkerboard, setCheckerboard } = (0, react_1.useContext)(checkerboard_1.CheckerboardContext);
-    const { canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     const onClick = (0, react_1.useCallback)(() => {
         setCheckerboard((c) => {
             return !c;
         });
     }, [setCheckerboard]);
-    if ((canvasContent === null || canvasContent === void 0 ? void 0 : canvasContent.type) === 'asset') {
-        return null;
-    }
     return ((0, jsx_runtime_1.jsx)(ControlButton_1.ControlButton, { title: accessibilityLabel, "aria-label": accessibilityLabel, onClick: onClick, children: (0, jsx_runtime_1.jsx)("svg", { "aria-hidden": "true", focusable: "false", "data-prefix": "fas", "data-icon": "game-board-alt", className: "svg-inline--fa fa-game-board-alt fa-w-16", role: "img", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", style: { width: 16, height: 16 }, children: (0, jsx_runtime_1.jsx)("path", { fill: checkerboard ? colors_1.BLUE : 'white', d: "M480 0H32A32 32 0 0 0 0 32v448a32 32 0 0 0 32 32h448a32 32 0 0 0 32-32V32a32 32 0 0 0-32-32zm-32 256H256v192H64V256h192V64h192z" }) }) }));
 };
 exports.CheckboardToggle = CheckboardToggle;

package/dist/editor/components/CompositionSelectorItem.js

@@ -59,13 +59,7 @@ const CompositionSelectorItem = ({ item, level, currentComposition, tabIndex, se
     const style = (0, react_1.useMemo)(() => {
         return {
             ...itemStyle,
-            backgroundColor: hovered
-                ? selected
-                    ? colors_1.SELECTED_BACKGROUND
-                    : colors_1.CLEAR_HOVER
-                : selected
-                    ? colors_1.SELECTED_BACKGROUND
-                    : 'transparent',
+            backgroundColor: (0, colors_1.getBackgroundFromHoverState)({ hovered, selected }),
             paddingLeft: 12 + level * 8,
         };
     }, [hovered, level, selected]);

package/dist/editor/components/CurrentComposition.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
 export declare const CurrentComposition: () => JSX.Element;

package/dist/editor/components/CurrentCompositionSideEffects.js

@@ -21,6 +21,10 @@ const TitleUpdater = () => {
             (0, document_title_1.setCurrentCanvasContentId)(canvasContent.compositionId);
             return;
         }
+        if (canvasContent.type === 'output') {
+            (0, document_title_1.setCurrentCanvasContentId)(canvasContent.path);
+            return;
+        }
         (0, document_title_1.setCurrentCanvasContentId)(canvasContent.asset);
     }, [canvasContent]);
     (0, react_1.useEffect)(() => {

package/dist/editor/components/EditorContent.js

@@ -14,7 +14,9 @@ const noop = () => undefined;
 const EditorContent = () => {
     const isStill = (0, is_current_selected_still_1.useIsStill)();
     const { canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
-    if (canvasContent === null || isStill || canvasContent.type === 'asset') {
+    if (canvasContent === null ||
+        isStill ||
+        canvasContent.type !== 'composition') {
         return (0, jsx_runtime_1.jsx)(TopPanel_1.TopPanel, {});
     }
     return ((0, jsx_runtime_1.jsxs)(SplitterContainer_1.SplitterContainer, { orientation: "horizontal", id: "top-to-bottom", maxFlex: 0.9, minFlex: 0.2, defaultFlex: 0.75, children: [(0, jsx_runtime_1.jsx)(SplitterElement_1.SplitterElement, { type: "flexer", children: (0, jsx_runtime_1.jsx)(TopPanel_1.TopPanel, {}) }), (0, jsx_runtime_1.jsx)(SplitterHandle_1.SplitterHandle, { allowToCollapse: "none", onCollapse: noop }), (0, jsx_runtime_1.jsx)(SplitterElement_1.SplitterElement, { type: "anti-flexer", children: (0, jsx_runtime_1.jsx)(Timeline_1.Timeline, {}) })] }));

package/dist/editor/components/FilePreview.d.ts

@@ -1,8 +1,9 @@
 import React from 'react';
+import type { AssetMetadata } from '../helpers/get-asset-metadata';
 import type { AssetFileType } from './Preview';
 export declare const FilePreview: React.FC<{
     src: string;
     fileType: AssetFileType;
     currentAsset: string;
-    fileSize: string | null;
+    assetMetadata: AssetMetadata | null;
 }>;

package/dist/editor/components/FilePreview.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FilePreview = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const format_bytes_1 = require("../../format-bytes");
 const JSONViewer_1 = require("./JSONViewer");
 const layout_1 = require("./layout");
 const TextViewer_1 = require("./TextViewer");
@@ -12,9 +13,15 @@ const msgStyle = {
     display: 'flex',
     justifyContent: 'center',
 };
-const FilePreview = ({ fileType, src, currentAsset, fileSize }) => {
+const FilePreview = ({ fileType, src, currentAsset, assetMetadata }) => {
+    if (!assetMetadata) {
+        throw new Error('expected to have assetMetadata');
+    }
+    if (assetMetadata.type === 'not-found') {
+        throw new Error('expected to have assetMetadata, got "not-found"');
+    }
     if (fileType === 'audio') {
-        return ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)("audio", { src: src, controls: true }) }));
+        return (0, jsx_runtime_1.jsx)("audio", { src: src, controls: true });
     }
     if (fileType === 'video') {
         return (0, jsx_runtime_1.jsx)("video", { src: src, controls: true });
@@ -28,6 +35,6 @@ const FilePreview = ({ fileType, src, currentAsset, fileSize }) => {
     if (fileType === 'txt') {
         return (0, jsx_runtime_1.jsx)(TextViewer_1.TextViewer, { src: src });
     }
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { style: msgStyle, children: currentAsset }), fileSize ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1 }), (0, jsx_runtime_1.jsxs)("div", { style: msgStyle, children: ["Size: ", fileSize, " "] })] })) : null] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { style: msgStyle, children: currentAsset }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 0.5 }), (0, jsx_runtime_1.jsxs)("div", { style: msgStyle, children: ["Size: ", (0, format_bytes_1.formatBytes)(assetMetadata.size), " "] })] }));
 };
 exports.FilePreview = FilePreview;

package/dist/editor/components/InitialCompositionLoader.js

@@ -70,6 +70,10 @@ const InitialCompositionLoader = () => {
             selectAsset(canvasContentFromUrl.asset);
             return;
         }
+        if (canvasContentFromUrl && canvasContentFromUrl.type === 'output') {
+            setCanvasContent(canvasContentFromUrl);
+            return;
+        }
         if (compositions.length > 0) {
             selectComposition(compositions[0], true);
         }
@@ -83,14 +87,15 @@ const InitialCompositionLoader = () => {
     (0, react_1.useEffect)(() => {
         const onchange = () => {
             const newCanvas = (0, ZoomPersistor_1.deriveCanvasContentFromUrl)();
-            if (newCanvas && (newCanvas === null || newCanvas === void 0 ? void 0 : newCanvas.type) === 'composition') {
+            if (newCanvas && newCanvas.type === 'composition') {
                 const newComp = window.location.pathname.substring(1);
                 const exists = compositions.find((c) => c.id === newComp);
                 if (exists) {
                     selectComposition(exists, false);
                 }
+                return;
             }
-            else if (newCanvas && newCanvas.type === 'asset') {
+            if (newCanvas && newCanvas.type === 'asset') {
                 const staticFiles = (0, remotion_1.getStaticFiles)();
                 const exists = staticFiles.find((file) => {
                     return file.name === newCanvas.asset;
@@ -98,7 +103,9 @@ const InitialCompositionLoader = () => {
                 if (exists) {
                     setCanvasContent(newCanvas);
                 }
+                return;
             }
+            setCanvasContent(newCanvas);
         };
         window.addEventListener('popstate', onchange);
         return () => window.removeEventListener('popstate', onchange);

package/dist/editor/components/LoopToggle.js

@@ -3,24 +3,17 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.LoopToggle = 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_current_selected_still_1 = require("../helpers/is-current-selected-still");
 const loop_1 = require("../state/loop");
 const ControlButton_1 = require("./ControlButton");
 const accessibilityLabel = 'Loop video';
 const LoopToggle = ({ loop, setLoop }) => {
-    const { canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     const onClick = (0, react_1.useCallback)(() => {
         setLoop((c) => {
             (0, loop_1.persistLoopOption)(!c);
             return !c;
         });
     }, [setLoop]);
-    const isStill = (0, is_current_selected_still_1.useIsStill)();
-    if (isStill || canvasContent === null || canvasContent.type === 'asset') {
-        return null;
-    }
     return ((0, jsx_runtime_1.jsx)(ControlButton_1.ControlButton, { title: accessibilityLabel, "aria-label": accessibilityLabel, onClick: onClick, children: (0, jsx_runtime_1.jsx)("svg", { viewBox: "0 0 512 512", style: { width: 18, height: 18 }, children: (0, jsx_runtime_1.jsx)("path", { fill: loop ? colors_1.BLUE : 'white', d: "M493.544 181.463c11.956 22.605 18.655 48.4 18.452 75.75C511.339 345.365 438.56 416 350.404 416H192v47.495c0 22.475-26.177 32.268-40.971 17.475l-80-80c-9.372-9.373-9.372-24.569 0-33.941l80-80C166.138 271.92 192 282.686 192 304v48h158.875c52.812 0 96.575-42.182 97.12-94.992.155-15.045-3.17-29.312-9.218-42.046-4.362-9.185-2.421-20.124 4.8-27.284 4.745-4.706 8.641-8.555 11.876-11.786 11.368-11.352 30.579-8.631 38.091 5.571zM64.005 254.992c.545-52.81 44.308-94.992 97.12-94.992H320v47.505c0 22.374 26.121 32.312 40.971 17.465l80-80c9.372-9.373 9.372-24.569 0-33.941l-80-80C346.014 16.077 320 26.256 320 48.545V96H161.596C73.44 96 .661 166.635.005 254.788c-.204 27.35 6.495 53.145 18.452 75.75 7.512 14.202 26.723 16.923 38.091 5.57 3.235-3.231 7.13-7.08 11.876-11.786 7.22-7.16 9.162-18.098 4.8-27.284-6.049-12.735-9.374-27.001-9.219-42.046z" }) }) }));
 };
 exports.LoopToggle = LoopToggle;

package/dist/editor/components/MuteToggle.js

@@ -3,13 +3,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.MuteToggle = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const remotion_1 = require("remotion");
-const is_current_selected_still_1 = require("../helpers/is-current-selected-still");
 const media_volume_1 = require("../icons/media-volume");
 const mute_1 = require("../state/mute");
 const ControlButton_1 = require("./ControlButton");
 const MuteToggle = ({ muted, setMuted }) => {
-    const { canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     const onClick = (0, react_1.useCallback)(() => {
         setMuted((m) => {
             (0, mute_1.persistMuteOption)(!m);
@@ -17,10 +14,6 @@ const MuteToggle = ({ muted, setMuted }) => {
         });
     }, [setMuted]);
     const accessibilityLabel = muted ? 'Unmute video' : 'Mute video';
-    const isStill = (0, is_current_selected_still_1.useIsStill)();
-    if (isStill || canvasContent === null || canvasContent.type === 'asset') {
-        return null;
-    }
     return ((0, jsx_runtime_1.jsx)(ControlButton_1.ControlButton, { title: accessibilityLabel, "aria-label": accessibilityLabel, onClick: onClick, children: muted ? (0, jsx_runtime_1.jsx)(media_volume_1.VolumeOffIcon, {}) : (0, jsx_runtime_1.jsx)(media_volume_1.VolumeOnIcon, {}) }));
 };
 exports.MuteToggle = MuteToggle;

package/dist/editor/components/NewComposition/RemInput.d.ts

@@ -12,6 +12,6 @@ export declare const getInputBorderColor: ({ status, isFocused, isHovered, }: {
     status: 'error' | 'warning' | 'ok';
     isFocused: boolean;
     isHovered: boolean;
-}) => "hsla(0, 0%, 100%, 0.15)" | "rgba(0, 0, 0, 0.6)" | "rgba(255, 255, 255, 0.05)" | "#ff3232" | "#f1c40f";
-export declare const RemotionInput: React.ForwardRefExoticComponent<Pick<Props, "key" | keyof React.InputHTMLAttributes<HTMLInputElement> | "status" | "rightAlign"> & React.RefAttributes<HTMLInputElement>>;
+}) => "#ff3232" | "hsla(0, 0%, 100%, 0.15)" | "#f1c40f" | "rgba(0, 0, 0, 0.6)" | "rgba(255, 255, 255, 0.05)";
+export declare const RemotionInput: React.ForwardRefExoticComponent<Pick<Props, "key" | "status" | keyof React.InputHTMLAttributes<HTMLInputElement> | "rightAlign"> & React.RefAttributes<HTMLInputElement>>;
 export {};

package/dist/editor/components/NewComposition/RemInputTypeColor.d.ts

@@ -4,5 +4,5 @@ type Props = React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>
     status: RemInputStatus;
     name: string;
 };
-export declare const RemInputTypeColor: React.ForwardRefExoticComponent<Pick<Props, "key" | keyof React.InputHTMLAttributes<HTMLInputElement> | "status"> & React.RefAttributes<HTMLInputElement>>;
+export declare const RemInputTypeColor: React.ForwardRefExoticComponent<Pick<Props, "key" | "status" | keyof React.InputHTMLAttributes<HTMLInputElement>> & React.RefAttributes<HTMLInputElement>>;
 export {};

package/dist/editor/components/PlayPause.js

@@ -23,7 +23,6 @@ const forwardBackStyle = {
 const PlayPause = ({ playbackRate, loop }) => {
     const { inFrame, outFrame } = (0, in_out_1.useTimelineInOutFramePosition)();
     const videoConfig = remotion_1.Internals.useUnsafeVideoConfig();
-    const { canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     player_1.PlayerInternals.usePlayback({
         loop,
         playbackRate,
@@ -187,9 +186,6 @@ const PlayPause = ({ playbackRate, loop }) => {
         onEnter,
         onSpace,
     ]);
-    if (isStill || canvasContent === null || canvasContent.type === 'asset') {
-        return null;
-    }
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ControlButton_1.ControlButton, { "aria-label": "Jump to beginning", title: "Jump to beginning", disabled: !videoConfig || isFirstFrame, onClick: jumpToStart, children: (0, jsx_runtime_1.jsx)(jump_to_start_1.JumpToStart, { style: forwardBackStyle }) }), (0, jsx_runtime_1.jsx)(ControlButton_1.ControlButton, { "aria-label": "Step back one frame", title: "Step back one frame", disabled: !videoConfig || isFirstFrame, onClick: oneFrameBack, children: (0, jsx_runtime_1.jsx)(step_back_1.StepBack, { style: forwardBackStyle }) }), (0, jsx_runtime_1.jsx)(ControlButton_1.ControlButton, { "aria-label": playing ? 'Pause' : 'Play', title: playing ? 'Pause' : 'Play', onClick: playing ? pause : play, disabled: !videoConfig, children: playing ? ((0, jsx_runtime_1.jsx)(pause_1.Pause, { style: {
                         height: 14,
                         width: 14,

package/dist/editor/components/Preview.d.ts

@@ -1,12 +1,13 @@
 import type { Size } from '@remotion/player';
 import React from 'react';
 import type { CanvasContent } from 'remotion';
+import type { AssetMetadata } from '../helpers/get-asset-metadata';
 import type { Dimensions } from '../helpers/is-current-selected-still';
-type AssetFileType = 'audio' | 'video' | 'image' | 'json' | 'txt' | 'other';
+export type AssetFileType = 'audio' | 'video' | 'image' | 'json' | 'txt' | 'other';
 export declare const getPreviewFileType: (fileName: string | null) => AssetFileType;
 export declare const VideoPreview: React.FC<{
     canvasSize: Size;
     contentDimensions: Dimensions | 'none' | null;
     canvasContent: CanvasContent;
+    assetMetadata: AssetMetadata | null;
 }>;
-export {};

package/dist/editor/components/Preview.js

@@ -5,31 +5,22 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const player_1 = require("@remotion/player");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
-const format_bytes_1 = require("../../format-bytes");
 const checkerboard_background_1 = require("../helpers/checkerboard-background");
-const client_id_1 = require("../helpers/client-id");
 const colors_1 = require("../helpers/colors");
 const checkerboard_1 = require("../state/checkerboard");
 const preview_size_1 = require("../state/preview-size");
-const JSONViewer_1 = require("./JSONViewer");
-const layout_1 = require("./layout");
+const RenderPreview_1 = require("./RenderPreview");
 const Spinner_1 = require("./Spinner");
-const TextViewer_1 = require("./TextViewer");
-const spinnerContainer = {
+const StaticFilePreview_1 = require("./StaticFilePreview");
+const centeredContainer = {
     display: 'flex',
     flex: 1,
     justifyContent: 'center',
     alignItems: 'center',
 };
-const msgStyle = {
-    fontSize: 13,
-    color: 'white',
+const label = {
     fontFamily: 'sans-serif',
-    display: 'flex',
-    justifyContent: 'center',
-};
-const errMsgStyle = {
-    ...msgStyle,
+    fontSize: 14,
     color: colors_1.LIGHT_TEXT,
 };
 const getPreviewFileType = (fileName) => {
@@ -78,67 +69,17 @@ const containerStyle = (options) => {
         backgroundPosition: (0, checkerboard_background_1.getCheckerboardBackgroundPos)(checkerboardSize) /* Must be half of one side of the square */,
     };
 };
-const AssetComponent = ({ currentAsset }) => {
-    const fileType = (0, exports.getPreviewFileType)(currentAsset);
-    const staticFileSrc = (0, remotion_1.staticFile)(currentAsset);
-    const staticFiles = (0, remotion_1.getStaticFiles)();
-    const connectionStatus = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx).type;
-    const exists = staticFiles.find((file) => file.name === currentAsset);
-    if (connectionStatus === 'disconnected') {
-        return (0, jsx_runtime_1.jsx)("div", { style: errMsgStyle, children: "Studio server disconnected" });
-    }
-    if (!exists) {
-        return ((0, jsx_runtime_1.jsxs)("div", { style: errMsgStyle, children: [currentAsset, " does not exist in your public folder."] }));
-    }
-    const fileSize = () => {
-        const fileFromStaticFiles = staticFiles.find((file) => file.name === currentAsset);
-        if (fileFromStaticFiles) {
-            return (0, format_bytes_1.formatBytes)(fileFromStaticFiles === null || fileFromStaticFiles === void 0 ? void 0 : fileFromStaticFiles.sizeInBytes);
-        }
-    };
-    if (!currentAsset) {
-        return null;
-    }
-    if (fileType === 'audio') {
-        try {
-            return ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)("audio", { src: staticFileSrc, controls: true }) }));
-        }
-        catch (err) {
-            return (0, jsx_runtime_1.jsx)("div", { style: errMsgStyle, children: "The audio could not be loaded" });
-        }
+const VideoPreview = ({ canvasSize, contentDimensions, canvasContent, assetMetadata }) => {
+    if (assetMetadata && assetMetadata.type === 'not-found') {
+        return ((0, jsx_runtime_1.jsx)("div", { style: centeredContainer, children: (0, jsx_runtime_1.jsx)("div", { style: label, children: "File does not exist" }) }));
     }
-    if (fileType === 'video') {
-        try {
-            return (0, jsx_runtime_1.jsx)("video", { src: staticFileSrc, controls: true });
-        }
-        catch (err) {
-            return (0, jsx_runtime_1.jsx)("div", { style: errMsgStyle, children: "The video could not be loaded" });
-        }
-    }
-    if (fileType === 'image') {
-        try {
-            return (0, jsx_runtime_1.jsx)("img", { src: staticFileSrc });
-        }
-        catch (err) {
-            return (0, jsx_runtime_1.jsx)("div", { style: errMsgStyle, children: "The image could not be loaded" });
-        }
-    }
-    if (fileType === 'json') {
-        return (0, jsx_runtime_1.jsx)(JSONViewer_1.JSONViewer, { src: staticFileSrc });
-    }
-    if (fileType === 'txt') {
-        return (0, jsx_runtime_1.jsx)(TextViewer_1.TextViewer, { src: staticFileSrc });
-    }
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { style: msgStyle, children: currentAsset }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1 }), (0, jsx_runtime_1.jsxs)("div", { style: msgStyle, children: ["Size: ", fileSize(), " "] })] }));
-};
-const VideoPreview = ({ canvasSize, contentDimensions, canvasContent }) => {
-    if (!contentDimensions) {
-        return ((0, jsx_runtime_1.jsx)("div", { style: spinnerContainer, children: (0, jsx_runtime_1.jsx)(Spinner_1.Spinner, { duration: 0.5, size: 24 }) }));
+    if (contentDimensions === null) {
+        return ((0, jsx_runtime_1.jsx)("div", { style: centeredContainer, children: (0, jsx_runtime_1.jsx)(Spinner_1.Spinner, { duration: 0.5, size: 24 }) }));
     }
-    return ((0, jsx_runtime_1.jsx)(CompWhenItHasDimensions, { contentDimensions: contentDimensions, canvasSize: canvasSize, canvasContent: canvasContent }));
+    return ((0, jsx_runtime_1.jsx)(CompWhenItHasDimensions, { contentDimensions: contentDimensions, canvasSize: canvasSize, canvasContent: canvasContent, assetMetadata: assetMetadata }));
 };
 exports.VideoPreview = VideoPreview;
-const CompWhenItHasDimensions = ({ contentDimensions, canvasSize, canvasContent }) => {
+const CompWhenItHasDimensions = ({ contentDimensions, canvasSize, canvasContent, assetMetadata }) => {
     const { size: previewSize } = (0, react_1.useContext)(preview_size_1.PreviewSizeContext);
     const { centerX, centerY, yCorrection, xCorrection, scale } = (0, react_1.useMemo)(() => {
         if (contentDimensions === 'none') {
@@ -184,7 +125,7 @@ const CompWhenItHasDimensions = ({ contentDimensions, canvasSize, canvasContent
         centerY,
         canvasContent,
     ]);
-    return ((0, jsx_runtime_1.jsx)("div", { style: outer, children: canvasContent.type === 'asset' ? ((0, jsx_runtime_1.jsx)(AssetComponent, { currentAsset: canvasContent.asset })) : ((0, jsx_runtime_1.jsx)(PortalContainer, { contentDimensions: contentDimensions, scale: scale, xCorrection: xCorrection, yCorrection: yCorrection })) }));
+    return ((0, jsx_runtime_1.jsx)("div", { style: outer, children: canvasContent.type === 'asset' ? ((0, jsx_runtime_1.jsx)(StaticFilePreview_1.StaticFilePreview, { assetMetadata: assetMetadata, currentAsset: canvasContent.asset })) : canvasContent.type === 'output' ? ((0, jsx_runtime_1.jsx)(RenderPreview_1.RenderPreview, { path: canvasContent.path, assetMetadata: assetMetadata })) : ((0, jsx_runtime_1.jsx)(PortalContainer, { contentDimensions: contentDimensions, scale: scale, xCorrection: xCorrection, yCorrection: yCorrection })) }));
 };
 const PortalContainer = ({ scale, xCorrection, yCorrection, contentDimensions }) => {
     const { checkerboard } = (0, react_1.useContext)(checkerboard_1.CheckerboardContext);

package/dist/editor/components/PreviewToolbar.js

@@ -5,6 +5,7 @@ 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_current_selected_still_1 = require("../helpers/is-current-selected-still");
 const timeline_layout_1 = require("../helpers/timeline-layout");
 const loop_1 = require("../state/loop");
 const CheckboardToggle_1 = require("./CheckboardToggle");
@@ -45,8 +46,10 @@ const PreviewToolbar = () => {
     const { playbackRate, setPlaybackRate } = (0, react_1.useContext)(remotion_1.Internals.Timeline.TimelineContext);
     const { mediaMuted } = (0, react_1.useContext)(remotion_1.Internals.MediaVolumeContext);
     const { setMediaMuted } = (0, react_1.useContext)(remotion_1.Internals.SetMediaVolumeContext);
+    const isVideoComposition = (0, is_current_selected_still_1.useIsVideoComposition)();
+    const isStill = (0, is_current_selected_still_1.useIsStill)();
     const [loop, setLoop] = (0, react_1.useState)((0, loop_1.loadLoopOption)());
     const isFullscreenSupported = document.fullscreenEnabled || document.webkitFullscreenEnabled;
-    return ((0, jsx_runtime_1.jsxs)("div", { style: container, className: "css-reset", children: [(0, jsx_runtime_1.jsxs)("div", { style: sideContainer, children: [(0, jsx_runtime_1.jsx)("div", { style: padding }), (0, jsx_runtime_1.jsx)(TimelineZoomControls_1.TimelineZoomControls, {})] }), (0, jsx_runtime_1.jsx)(layout_1.Flex, {}), (0, jsx_runtime_1.jsx)(SizeSelector_1.SizeSelector, {}), (0, jsx_runtime_1.jsx)(PlaybackRateSelector_1.PlaybackRateSelector, { setPlaybackRate: setPlaybackRate, playbackRate: playbackRate }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 2 }), (0, jsx_runtime_1.jsx)(PlayPause_1.PlayPause, { loop: loop, playbackRate: playbackRate }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 2 }), (0, jsx_runtime_1.jsx)(LoopToggle_1.LoopToggle, { loop: loop, setLoop: setLoop }), (0, jsx_runtime_1.jsx)(CheckboardToggle_1.CheckboardToggle, {}), (0, jsx_runtime_1.jsx)(TimelineInOutToggle_1.TimelineInOutPointToggle, {}), (0, jsx_runtime_1.jsx)(MuteToggle_1.MuteToggle, { muted: mediaMuted, setMuted: setMediaMuted }), isFullscreenSupported && (0, jsx_runtime_1.jsx)(FullscreenToggle_1.FullScreenToggle, {}), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 2 }), (0, jsx_runtime_1.jsx)(layout_1.Flex, {}), (0, jsx_runtime_1.jsxs)("div", { style: sideContainer, children: [(0, jsx_runtime_1.jsx)(layout_1.Flex, {}), (0, jsx_runtime_1.jsx)(FpsCounter_1.FpsCounter, { playbackSpeed: playbackRate }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 2 }), (0, jsx_runtime_1.jsx)(RenderButton_1.RenderButton, {}), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1.5 })] }), (0, jsx_runtime_1.jsx)(PlaybackKeyboardShortcutsManager_1.PlaybackKeyboardShortcutsManager, { setPlaybackRate: setPlaybackRate }), (0, jsx_runtime_1.jsx)(PlaybackRatePersistor_1.PlaybackRatePersistor, {})] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { style: container, className: "css-reset", children: [(0, jsx_runtime_1.jsxs)("div", { style: sideContainer, children: [(0, jsx_runtime_1.jsx)("div", { style: padding }), (0, jsx_runtime_1.jsx)(TimelineZoomControls_1.TimelineZoomControls, {})] }), (0, jsx_runtime_1.jsx)(layout_1.Flex, {}), (0, jsx_runtime_1.jsx)(SizeSelector_1.SizeSelector, {}), isStill || isVideoComposition ? ((0, jsx_runtime_1.jsx)(PlaybackRateSelector_1.PlaybackRateSelector, { setPlaybackRate: setPlaybackRate, playbackRate: playbackRate })) : null, isVideoComposition ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 2 }), (0, jsx_runtime_1.jsx)(PlayPause_1.PlayPause, { loop: loop, playbackRate: playbackRate }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 2 }), (0, jsx_runtime_1.jsx)(LoopToggle_1.LoopToggle, { loop: loop, setLoop: setLoop }), (0, jsx_runtime_1.jsx)(CheckboardToggle_1.CheckboardToggle, {}), (0, jsx_runtime_1.jsx)(TimelineInOutToggle_1.TimelineInOutPointToggle, {}), (0, jsx_runtime_1.jsx)(MuteToggle_1.MuteToggle, { muted: mediaMuted, setMuted: setMediaMuted })] })) : null, isFullscreenSupported && (0, jsx_runtime_1.jsx)(FullscreenToggle_1.FullScreenToggle, {}), (0, jsx_runtime_1.jsx)(layout_1.Flex, {}), (0, jsx_runtime_1.jsxs)("div", { style: sideContainer, children: [(0, jsx_runtime_1.jsx)(layout_1.Flex, {}), (0, jsx_runtime_1.jsx)(FpsCounter_1.FpsCounter, { playbackSpeed: playbackRate }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 2 }), (0, jsx_runtime_1.jsx)(RenderButton_1.RenderButton, {}), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1.5 })] }), (0, jsx_runtime_1.jsx)(PlaybackKeyboardShortcutsManager_1.PlaybackKeyboardShortcutsManager, { setPlaybackRate: setPlaybackRate }), (0, jsx_runtime_1.jsx)(PlaybackRatePersistor_1.PlaybackRatePersistor, {})] }));
 };
 exports.PreviewToolbar = PreviewToolbar;

package/dist/editor/components/RenderPreview.d.ts

@@ -1,4 +1,6 @@
 import React from 'react';
+import type { AssetMetadata } from '../helpers/get-asset-metadata';
 export declare const RenderPreview: React.FC<{
     path: string;
+    assetMetadata: AssetMetadata | null;
 }>;

package/dist/editor/components/RenderPreview.js

@@ -5,6 +5,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const client_id_1 = require("../helpers/client-id");
 const colors_1 = require("../helpers/colors");
+const get_asset_metadata_1 = require("../helpers/get-asset-metadata");
 const FilePreview_1 = require("./FilePreview");
 const Preview_1 = require("./Preview");
 const msgStyle = {
@@ -18,13 +19,13 @@ const errMsgStyle = {
     ...msgStyle,
     color: colors_1.LIGHT_TEXT,
 };
-const RenderPreview = ({ path }) => {
+const RenderPreview = ({ path, assetMetadata }) => {
     const fileType = (0, Preview_1.getPreviewFileType)(path);
-    const src = window.remotion_staticBase.replace('static', 'outputs') + path;
+    const src = get_asset_metadata_1.remotion_outputsBase + path;
     const connectionStatus = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx).type;
     if (connectionStatus === 'disconnected') {
         return (0, jsx_runtime_1.jsx)("div", { style: errMsgStyle, children: "Studio server disconnected" });
     }
-    return ((0, jsx_runtime_1.jsx)(FilePreview_1.FilePreview, { currentAsset: path, fileSize: null, fileType: fileType, src: src }));
+    return ((0, jsx_runtime_1.jsx)(FilePreview_1.FilePreview, { assetMetadata: assetMetadata, currentAsset: path, fileType: fileType, src: src }));
 };
 exports.RenderPreview = RenderPreview;

package/dist/editor/components/RenderQueue/RenderQueueCopyToClipboard.js

@@ -27,11 +27,12 @@ const supportsCopyingToClipboard = (job) => {
     return false;
 };
 exports.supportsCopyingToClipboard = supportsCopyingToClipboard;
-const RenderQueueCopyToClipboard = ({ job, }) => {
+const RenderQueueCopyToClipboard = ({ job }) => {
     const renderCopyAction = (0, react_1.useCallback)((color) => {
         return (0, jsx_runtime_1.jsx)(clipboard_1.ClipboardIcon, { style: revealIconStyle, color: color });
     }, []);
-    const onClick = (0, react_1.useCallback)(() => {
+    const onClick = (0, react_1.useCallback)((e) => {
+        e.stopPropagation();
         (0, actions_1.copyToClipboard)({ outName: job.outName })
             .catch((err) => {
             (0, NotificationCenter_1.sendErrorNotification)(`Could not copy to clipboard: ${err.message}`);

package/dist/editor/components/RenderQueue/RenderQueueItem.d.ts

@@ -2,4 +2,5 @@ import React from 'react';
 import type { RenderJob } from '../../../preview-server/render-queue/job';
 export declare const RenderQueueItem: React.FC<{
     job: RenderJob;
+    selected: boolean;
 }>;