@remotion/cli 4.0.43 → 4.0.45

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

@@ -0,0 +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;
+    assetMetadata: AssetMetadata | null;
+}>;

package/dist/editor/components/FilePreview.js

@@ -0,0 +1,40 @@
+"use strict";
+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");
+const msgStyle = {
+    fontSize: 13,
+    color: 'white',
+    fontFamily: 'sans-serif',
+    display: 'flex',
+    justifyContent: 'center',
+};
+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)("audio", { src: src, controls: true });
+    }
+    if (fileType === 'video') {
+        return (0, jsx_runtime_1.jsx)("video", { src: src, controls: true });
+    }
+    if (fileType === 'image') {
+        return (0, jsx_runtime_1.jsx)("img", { src: src });
+    }
+    if (fileType === 'json') {
+        return (0, jsx_runtime_1.jsx)(JSONViewer_1.JSONViewer, { src: src });
+    }
+    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 }), (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/FramePersistor.d.ts

@@ -1,3 +1,2 @@
 import type React from 'react';
-export declare const getCurrentCompositionFromUrl: () => string;
 export declare const FramePersistor: React.FC;

package/dist/editor/components/FramePersistor.js

@@ -1,12 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.FramePersistor = exports.getCurrentCompositionFromUrl = void 0;
+exports.FramePersistor = void 0;
 const react_1 = require("react");
 const remotion_1 = require("remotion");
-const getCurrentCompositionFromUrl = () => {
-    return window.location.pathname.substr(1);
-};
-exports.getCurrentCompositionFromUrl = getCurrentCompositionFromUrl;
 const FramePersistor = () => {
     const [playing] = remotion_1.Internals.Timeline.usePlayingState();
     const config = (0, remotion_1.useVideoConfig)();

package/dist/editor/components/InitialCompositionLoader.js

@@ -5,18 +5,38 @@ const react_1 = require("react");
 const remotion_1 = require("remotion");
 const folders_1 = require("../state/folders");
 const CompositionSelector_1 = require("./CompositionSelector");
-const FramePersistor_1 = require("./FramePersistor");
+const ZoomPersistor_1 = require("./ZoomPersistor");
+const useSelectAsset = () => {
+    const { setCanvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
+    const { setAssetFoldersExpanded } = (0, react_1.useContext)(folders_1.FolderContext);
+    return (asset) => {
+        setCanvasContent({ type: 'asset', asset });
+        setAssetFoldersExpanded((ex) => {
+            const split = asset.split('/');
+            const keysToExpand = split.map((_, i) => {
+                return split.slice(0, i).join('/');
+            });
+            const newState = {
+                ...ex,
+            };
+            for (const key of keysToExpand) {
+                newState[key] = true;
+            }
+            return newState;
+        });
+    };
+};
 const useSelectComposition = () => {
-    const { setFoldersExpanded } = (0, react_1.useContext)(folders_1.FolderContext);
-    const { setCurrentComposition } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
+    const { setCompositionFoldersExpanded } = (0, react_1.useContext)(folders_1.FolderContext);
+    const { setCanvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     return (c, push) => {
         if (push) {
             window.history.pushState({}, 'Studio', `/${c.id}`);
         }
-        setCurrentComposition(c.id);
+        setCanvasContent({ type: 'composition', compositionId: c.id });
         const { folderName, parentFolderName } = c;
         if (folderName !== null) {
-            setFoldersExpanded((ex) => {
+            setCompositionFoldersExpanded((ex) => {
                 const keysToExpand = (0, CompositionSelector_1.getKeysToExpand)(folderName, parentFolderName);
                 const newState = {
                     ...ex,
@@ -31,35 +51,65 @@ const useSelectComposition = () => {
 };
 exports.useSelectComposition = useSelectComposition;
 const InitialCompositionLoader = () => {
-    const { compositions, currentComposition } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
+    const { compositions, canvasContent, setCanvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     const selectComposition = (0, exports.useSelectComposition)();
+    const selectAsset = useSelectAsset();
     (0, react_1.useEffect)(() => {
-        if (currentComposition) {
+        if (canvasContent) {
             return;
         }
-        const compositionFromUrl = (0, FramePersistor_1.getCurrentCompositionFromUrl)();
-        if (compositionFromUrl) {
-            const exists = compositions.find((c) => c.id === compositionFromUrl);
+        const canvasContentFromUrl = (0, ZoomPersistor_1.deriveCanvasContentFromUrl)();
+        if (canvasContentFromUrl && canvasContentFromUrl.type === 'composition') {
+            const exists = compositions.find((c) => c.id === canvasContentFromUrl.compositionId);
             if (exists) {
-                selectComposition(exists, true);
-                return;
+                selectComposition(exists, false);
             }
+            return;
+        }
+        if (canvasContentFromUrl && canvasContentFromUrl.type === 'asset') {
+            selectAsset(canvasContentFromUrl.asset);
+            return;
+        }
+        if (canvasContentFromUrl && canvasContentFromUrl.type === 'output') {
+            setCanvasContent(canvasContentFromUrl);
+            return;
         }
         if (compositions.length > 0) {
             selectComposition(compositions[0], true);
         }
-    }, [compositions, currentComposition, selectComposition]);
+    }, [
+        compositions,
+        canvasContent,
+        selectComposition,
+        setCanvasContent,
+        selectAsset,
+    ]);
     (0, react_1.useEffect)(() => {
         const onchange = () => {
-            const newComp = window.location.pathname.substring(1);
-            const exists = compositions.find((c) => c.id === newComp);
-            if (exists) {
-                selectComposition(exists, false);
+            const newCanvas = (0, ZoomPersistor_1.deriveCanvasContentFromUrl)();
+            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;
+            }
+            if (newCanvas && newCanvas.type === 'asset') {
+                const staticFiles = (0, remotion_1.getStaticFiles)();
+                const exists = staticFiles.find((file) => {
+                    return file.name === newCanvas.asset;
+                });
+                if (exists) {
+                    setCanvasContent(newCanvas);
+                }
+                return;
             }
+            setCanvasContent(newCanvas);
         };
         window.addEventListener('popstate', onchange);
         return () => window.removeEventListener('popstate', onchange);
-    }, [compositions, selectComposition]);
+    }, [compositions, selectComposition, setCanvasContent]);
     return null;
 };
 exports.InitialCompositionLoader = InitialCompositionLoader;

package/dist/editor/components/LoopToggle.js

@@ -4,7 +4,6 @@ exports.LoopToggle = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 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';
@@ -15,10 +14,6 @@ const LoopToggle = ({ loop, setLoop }) => {
             return !c;
         });
     }, [setLoop]);
-    const isStill = (0, is_current_selected_still_1.useIsStill)();
-    if (isStill) {
-        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,7 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.MuteToggle = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-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");
@@ -15,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) {
-        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)" | "#ff3232" | "#f1c40f" | "rgba(255, 255, 255, 0.05)" | "rgba(0, 0, 0, 0.6)";
-export declare const RemotionInput: React.ForwardRefExoticComponent<Pick<Props, "status" | "key" | "rightAlign" | keyof React.InputHTMLAttributes<HTMLInputElement>> & React.RefAttributes<HTMLInputElement>>;
+}) => "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>>;
 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, "status" | "key" | keyof React.InputHTMLAttributes<HTMLInputElement>> & React.RefAttributes<HTMLInputElement>>;
+export declare const RemInputTypeColor: React.ForwardRefExoticComponent<Pick<Props, "key" | keyof React.InputHTMLAttributes<HTMLInputElement> | "status"> & React.RefAttributes<HTMLInputElement>>;
 export {};

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

@@ -3,5 +3,5 @@ type Props = React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLTextAreaEleme
     status: 'error' | 'warning' | 'ok';
 };
 export declare const inputBaseStyle: React.CSSProperties;
-export declare const RemTextarea: React.ForwardRefExoticComponent<Pick<Props, "status" | "key" | keyof React.InputHTMLAttributes<HTMLTextAreaElement>> & React.RefAttributes<HTMLTextAreaElement>>;
+export declare const RemTextarea: React.ForwardRefExoticComponent<Pick<Props, "key" | "status" | keyof React.InputHTMLAttributes<HTMLTextAreaElement>> & React.RefAttributes<HTMLTextAreaElement>>;
 export {};

package/dist/editor/components/OptionsPanel.js

@@ -59,7 +59,7 @@ const OptionsPanel = () => {
             },
         };
     }, []);
-    const { compositions, currentComposition } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
+    const { compositions, canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     const circleStyle = (0, react_1.useMemo)(() => {
         const onTabColor = saving ? colors_1.LIGHT_TEXT : 'white';
         return {
@@ -69,13 +69,16 @@ const OptionsPanel = () => {
         };
     }, [panel, saving]);
     const composition = (0, react_1.useMemo)(() => {
+        if (canvasContent === null || canvasContent.type !== 'composition') {
+            return null;
+        }
         for (const comp of compositions) {
-            if (comp.id === currentComposition) {
+            if (comp.id === canvasContent.compositionId) {
                 return comp;
             }
         }
         return null;
-    }, [compositions, currentComposition]);
+    }, [canvasContent, compositions]);
     const saveToolTip = (0, react_1.useMemo)(() => {
         return process.env.KEYBOARD_SHORTCUTS_ENABLED
             ? `Save using ${ShortcutHint_1.cmdOrCtrlCharacter}+S`
@@ -104,9 +107,6 @@ const OptionsPanel = () => {
         }
         return !(0, deep_equal_1.deepEqual)(composition.defaultProps, actualProps);
     }, [actualProps, composition]);
-    if (composition === null) {
-        return null;
-    }
-    return ((0, jsx_runtime_1.jsxs)("div", { style: container, className: "css-reset", children: [(0, jsx_runtime_1.jsx)("div", { style: tabsContainer, children: (0, jsx_runtime_1.jsxs)(Tabs_1.Tabs, { children: [(0, jsx_runtime_1.jsxs)(Tabs_1.Tab, { selected: panel === 'input-props', onClick: onPropsSelected, style: { justifyContent: 'space-between' }, children: ["Props", unsavedChangesExist ? ((0, jsx_runtime_1.jsx)("div", { title: saveToolTip, style: circleStyle })) : null] }), (0, jsx_runtime_1.jsx)(RendersTab_1.RendersTab, { onClick: onRendersSelected, selected: panel === 'renders' })] }) }), panel === 'renders' ? ((0, jsx_runtime_1.jsx)(RenderQueue_1.RenderQueue, {})) : ((0, jsx_runtime_1.jsx)(DataEditor_1.DataEditor, { unresolvedComposition: composition, inputProps: actualProps, setInputProps: setInputProps, mayShowSaveButton: true, propsEditType: "default-props", saving: saving, setSaving: setSaving }, composition.id))] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { style: container, className: "css-reset", children: [(0, jsx_runtime_1.jsx)("div", { style: tabsContainer, children: (0, jsx_runtime_1.jsxs)(Tabs_1.Tabs, { children: [composition ? ((0, jsx_runtime_1.jsxs)(Tabs_1.Tab, { selected: panel === 'input-props', onClick: onPropsSelected, style: { justifyContent: 'space-between' }, children: ["Props", unsavedChangesExist ? ((0, jsx_runtime_1.jsx)("div", { title: saveToolTip, style: circleStyle })) : null] })) : null, (0, jsx_runtime_1.jsx)(RendersTab_1.RendersTab, { onClick: onRendersSelected, selected: panel === 'renders' })] }) }), panel === `input-props` && composition ? ((0, jsx_runtime_1.jsx)(DataEditor_1.DataEditor, { unresolvedComposition: composition, inputProps: actualProps, setInputProps: setInputProps, mayShowSaveButton: true, propsEditType: "default-props", saving: saving, setSaving: setSaving }, composition.id)) : ((0, jsx_runtime_1.jsx)(RenderQueue_1.RenderQueue, {}))] }));
 };
 exports.OptionsPanel = OptionsPanel;

package/dist/editor/components/PlayPause.js

@@ -186,9 +186,6 @@ const PlayPause = ({ playbackRate, loop }) => {
         onEnter,
         onSpace,
     ]);
-    if (isStill) {
-        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/PlaybackRateSelector.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.PlaybackRateSelector = 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 Checkmark_1 = require("../icons/Checkmark");
 const playbackrate_1 = require("../state/playbackrate");
@@ -17,6 +18,7 @@ const getPlaybackRateLabel = (playbackRate) => {
 const accessibilityLabel = 'Change the playback rate';
 const comboStyle = { width: 80 };
 const PlaybackRateSelector = ({ playbackRate, setPlaybackRate }) => {
+    const { canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     const isStill = (0, is_current_selected_still_1.useIsStill)();
     const style = (0, react_1.useMemo)(() => {
         return {
@@ -49,7 +51,7 @@ const PlaybackRateSelector = ({ playbackRate, setPlaybackRate }) => {
         const middle = Math.floor(commonPlaybackRates.length / 2);
         return [...values.slice(0, middle), divider, ...values.slice(middle)];
     }, [playbackRate, setPlaybackRate]);
-    if (isStill) {
+    if (isStill || canvasContent === null || canvasContent.type === 'asset') {
         return null;
     }
     return ((0, jsx_runtime_1.jsx)("div", { style: style, "aria-label": accessibilityLabel, children: (0, jsx_runtime_1.jsx)(ComboBox_1.Combobox, { title: accessibilityLabel, style: comboStyle, selectedId: String(playbackRate), values: items }) }));

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

@@ -1,5 +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';
+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;
 }>;

package/dist/editor/components/Preview.js

@@ -1,13 +1,58 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.VideoPreview = void 0;
+exports.VideoPreview = exports.getPreviewFileType = void 0;
 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 checkerboard_background_1 = require("../helpers/checkerboard-background");
+const colors_1 = require("../helpers/colors");
 const checkerboard_1 = require("../state/checkerboard");
 const preview_size_1 = require("../state/preview-size");
+const RenderPreview_1 = require("./RenderPreview");
+const Spinner_1 = require("./Spinner");
+const StaticFilePreview_1 = require("./StaticFilePreview");
+const centeredContainer = {
+    display: 'flex',
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+};
+const label = {
+    fontFamily: 'sans-serif',
+    fontSize: 14,
+    color: colors_1.LIGHT_TEXT,
+};
+const getPreviewFileType = (fileName) => {
+    var _a;
+    if (!fileName) {
+        return 'other';
+    }
+    const audioExtensions = ['mp3', 'wav', 'ogg', 'aac'];
+    const videoExtensions = ['mp4', 'avi', 'mkv', 'mov', 'webm'];
+    const imageExtensions = ['jpg', 'jpeg', 'png', 'gif', 'bmp'];
+    const fileExtension = (_a = fileName.split('.').pop()) === null || _a === void 0 ? void 0 : _a.toLowerCase();
+    if (fileExtension === undefined) {
+        throw new Error('File extension is undefined');
+    }
+    if (audioExtensions.includes(fileExtension)) {
+        return 'audio';
+    }
+    if (videoExtensions.includes(fileExtension)) {
+        return 'video';
+    }
+    if (imageExtensions.includes(fileExtension)) {
+        return 'image';
+    }
+    if (fileExtension === 'json') {
+        return 'json';
+    }
+    if (fileExtension === 'txt') {
+        return 'txt';
+    }
+    return 'other';
+};
+exports.getPreviewFileType = getPreviewFileType;
 const checkerboardSize = 49;
 const containerStyle = (options) => {
     return {
@@ -24,50 +69,79 @@ const containerStyle = (options) => {
         backgroundPosition: (0, checkerboard_background_1.getCheckerboardBackgroundPos)(checkerboardSize) /* Must be half of one side of the square */,
     };
 };
-const Inner = ({ canvasSize }) => {
+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 (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, assetMetadata: assetMetadata }));
+};
+exports.VideoPreview = VideoPreview;
+const CompWhenItHasDimensions = ({ contentDimensions, canvasSize, canvasContent, assetMetadata }) => {
     const { size: previewSize } = (0, react_1.useContext)(preview_size_1.PreviewSizeContext);
-    const portalContainer = (0, react_1.useRef)(null);
-    const config = (0, remotion_1.useVideoConfig)();
-    const { checkerboard } = (0, react_1.useContext)(checkerboard_1.CheckerboardContext);
-    const { centerX, centerY, yCorrection, xCorrection, scale } = player_1.PlayerInternals.calculateCanvasTransformation({
-        canvasSize,
-        compositionHeight: config.height,
-        compositionWidth: config.width,
-        previewSize: previewSize.size,
-    });
+    const { centerX, centerY, yCorrection, xCorrection, scale } = (0, react_1.useMemo)(() => {
+        if (contentDimensions === 'none') {
+            return {
+                centerX: 0,
+                centerY: 0,
+                yCorrection: 0,
+                xCorrection: 0,
+                scale: 1,
+            };
+        }
+        return player_1.PlayerInternals.calculateCanvasTransformation({
+            canvasSize,
+            compositionHeight: contentDimensions.height,
+            compositionWidth: contentDimensions.width,
+            previewSize: previewSize.size,
+        });
+    }, [canvasSize, contentDimensions, previewSize.size]);
     const outer = (0, react_1.useMemo)(() => {
         return {
-            width: config.width * scale,
-            height: config.height * scale,
+            width: contentDimensions === 'none' ? '100%' : contentDimensions.width * scale,
+            height: contentDimensions === 'none'
+                ? '100%'
+                : contentDimensions.height * scale,
             display: 'flex',
             flexDirection: 'column',
             position: 'absolute',
             left: centerX - previewSize.translation.x,
             top: centerY - previewSize.translation.y,
             overflow: 'hidden',
+            justifyContent: canvasContent.type === 'asset' ? 'center' : 'flex-start',
+            alignItems: canvasContent.type === 'asset' &&
+                (0, exports.getPreviewFileType)(canvasContent.asset) === 'audio'
+                ? 'center'
+                : 'normal',
         };
     }, [
+        contentDimensions,
+        scale,
         centerX,
-        centerY,
-        config.height,
-        config.width,
         previewSize.translation.x,
         previewSize.translation.y,
-        scale,
+        centerY,
+        canvasContent,
     ]);
+    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);
     const style = (0, react_1.useMemo)(() => {
         return containerStyle({
             checkerboard,
             scale,
             xCorrection,
             yCorrection,
-            width: config.width,
-            height: config.height,
+            width: contentDimensions.width,
+            height: contentDimensions.height,
         });
     }, [
         checkerboard,
-        config.height,
-        config.width,
+        contentDimensions.height,
+        contentDimensions.width,
         scale,
         xCorrection,
         yCorrection,
@@ -79,13 +153,6 @@ const Inner = ({ canvasSize }) => {
             current === null || current === void 0 ? void 0 : current.removeChild(remotion_1.Internals.portalNode());
         };
     }, []);
-    return ((0, jsx_runtime_1.jsx)("div", { style: outer, children: (0, jsx_runtime_1.jsx)("div", { ref: portalContainer, style: style }) }));
-};
-const VideoPreview = ({ canvasSize }) => {
-    const config = remotion_1.Internals.useUnsafeVideoConfig();
-    if (!config) {
-        return null;
-    }
-    return (0, jsx_runtime_1.jsx)(Inner, { canvasSize: canvasSize });
+    const portalContainer = (0, react_1.useRef)(null);
+    return (0, jsx_runtime_1.jsx)("div", { ref: portalContainer, style: style });
 };
-exports.VideoPreview = VideoPreview;

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

@@ -0,0 +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

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RenderPreview = void 0;
+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 = {
+    fontSize: 13,
+    color: 'white',
+    fontFamily: 'sans-serif',
+    display: 'flex',
+    justifyContent: 'center',
+};
+const errMsgStyle = {
+    ...msgStyle,
+    color: colors_1.LIGHT_TEXT,
+};
+const RenderPreview = ({ path, assetMetadata }) => {
+    const fileType = (0, Preview_1.getPreviewFileType)(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, { 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;
 }>;