@remotion/cli 4.0.43 → 4.0.44

package/dist/editor/components/ExplorerPanel.js

@@ -3,7 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ExplorerPanel = exports.optionsSidebarTabs = exports.persistSelectedOptionsSidebarPanel = 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 AssetSelector_1 = require("./AssetSelector");
 const CompositionSelector_1 = require("./CompositionSelector");
@@ -50,18 +49,6 @@ const ExplorerPanel = () => {
             },
         };
     }, []);
-    const { compositions, currentComposition } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
-    const composition = (0, react_1.useMemo)(() => {
-        for (const comp of compositions) {
-            if (comp.id === currentComposition) {
-                return comp;
-            }
-        }
-        return null;
-    }, [compositions, currentComposition]);
-    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.jsx)(Tabs_1.Tab, { selected: panel === 'compositions', onClick: onCompositionsSelected, children: "Compositions" }), (0, jsx_runtime_1.jsx)(Tabs_1.Tab, { selected: panel === 'assets', onClick: onAssetsSelected, children: "Assets" })] }) }), panel === 'compositions' ? (0, jsx_runtime_1.jsx)(CompositionSelector_1.CompositionSelector, {}) : (0, jsx_runtime_1.jsx)(AssetSelector_1.AssetSelector, {})] }));
 };
 exports.ExplorerPanel = ExplorerPanel;

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

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

package/dist/editor/components/FilePreview.js

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FilePreview = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+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, fileSize }) => {
+    if (fileType === 'audio') {
+        return ((0, jsx_runtime_1.jsx)("div", { children: (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 }), 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] }));
+};
+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,58 @@ 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 (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 === null || newCanvas === void 0 ? void 0 : newCanvas.type) === 'composition') {
+                const newComp = window.location.pathname.substring(1);
+                const exists = compositions.find((c) => c.id === newComp);
+                if (exists) {
+                    selectComposition(exists, false);
+                }
+            }
+            else 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);
+                }
             }
         };
         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

@@ -3,12 +3,14 @@ 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);
@@ -16,7 +18,7 @@ const LoopToggle = ({ loop, setLoop }) => {
         });
     }, [setLoop]);
     const isStill = (0, is_current_selected_still_1.useIsStill)();
-    if (isStill) {
+    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" }) }) }));

package/dist/editor/components/MuteToggle.js

@@ -3,11 +3,13 @@ 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);
@@ -16,7 +18,7 @@ const MuteToggle = ({ muted, setMuted }) => {
     }, [setMuted]);
     const accessibilityLabel = muted ? 'Unmute video' : 'Mute video';
     const isStill = (0, is_current_selected_still_1.useIsStill)();
-    if (isStill) {
+    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, {}) }));

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

@@ -23,6 +23,7 @@ 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,
@@ -186,7 +187,7 @@ const PlayPause = ({ playbackRate, loop }) => {
         onEnter,
         onSpace,
     ]);
-    if (isStill) {
+    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: {

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,12 @@
 import type { Size } from '@remotion/player';
 import React from 'react';
+import type { CanvasContent } from 'remotion';
+import type { Dimensions } from '../helpers/is-current-selected-still';
+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;
 }>;
+export {};

package/dist/editor/components/Preview.js

@@ -1,13 +1,67 @@
 "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 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 Spinner_1 = require("./Spinner");
+const TextViewer_1 = require("./TextViewer");
+const spinnerContainer = {
+    display: 'flex',
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+};
+const msgStyle = {
+    fontSize: 13,
+    color: 'white',
+    fontFamily: 'sans-serif',
+    display: 'flex',
+    justifyContent: 'center',
+};
+const errMsgStyle = {
+    ...msgStyle,
+    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 +78,129 @@ const containerStyle = (options) => {
         backgroundPosition: (0, checkerboard_background_1.getCheckerboardBackgroundPos)(checkerboardSize) /* Must be half of one side of the square */,
     };
 };
-const Inner = ({ canvasSize }) => {
+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" });
+        }
+    }
+    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 }) }));
+    }
+    return ((0, jsx_runtime_1.jsx)(CompWhenItHasDimensions, { contentDimensions: contentDimensions, canvasSize: canvasSize, canvasContent: canvasContent }));
+};
+exports.VideoPreview = VideoPreview;
+const CompWhenItHasDimensions = ({ contentDimensions, canvasSize, canvasContent }) => {
     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)(AssetComponent, { currentAsset: canvasContent.asset })) : ((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 +212,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/RenderPreview.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare const RenderPreview: React.FC<{
+    path: string;
+}>;