@remotion/cli 4.0.43 → 4.0.45

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

@@ -2,6 +2,9 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.RenderQueueItem = 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 layout_1 = require("../layout");
 const RenderQueueCopyToClipboard_1 = require("./RenderQueueCopyToClipboard");
 const RenderQueueError_1 = require("./RenderQueueError");
@@ -35,7 +38,57 @@ const subtitle = {
     display: 'flex',
     overflow: 'hidden',
 };
-const RenderQueueItem = ({ job }) => {
-    return ((0, jsx_runtime_1.jsxs)(layout_1.Row, { style: container, align: "center", children: [(0, jsx_runtime_1.jsx)(RenderQueueItemStatus_1.RenderQueueItemStatus, { job: job }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), (0, jsx_runtime_1.jsxs)("div", { style: right, children: [(0, jsx_runtime_1.jsx)("div", { style: title, children: job.compositionId }), (0, jsx_runtime_1.jsx)("div", { style: subtitle, children: job.status === 'done' ? ((0, jsx_runtime_1.jsx)(RenderQueueOutputName_1.RenderQueueOutputName, { job: job })) : job.status === 'failed' ? ((0, jsx_runtime_1.jsx)(RenderQueueError_1.RenderQueueError, { job: job })) : job.status === 'running' ? ((0, jsx_runtime_1.jsx)(RenderQueueProgressMessage_1.RenderQueueProgressMessage, { job: job })) : null })] }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), (0, RenderQueueCopyToClipboard_1.supportsCopyingToClipboard)(job) ? ((0, jsx_runtime_1.jsx)(RenderQueueCopyToClipboard_1.RenderQueueCopyToClipboard, { job: job })) : null, job.status === 'done' || job.status === 'failed' ? ((0, jsx_runtime_1.jsx)(RenderQueueRepeat_1.RenderQueueRepeatItem, { job: job })) : null, job.status === 'running' ? ((0, jsx_runtime_1.jsx)(RenderQueueItemCancelButton_1.RenderQueueCancelButton, { job: job })) : ((0, jsx_runtime_1.jsx)(RenderQueueRemoveItem_1.RenderQueueRemoveItem, { job: job })), job.status === 'done' ? (0, jsx_runtime_1.jsx)(RenderQueueOpenInFolder_1.RenderQueueOpenInFinderItem, { job: job }) : null] }));
+const SELECTED_CLASSNAME = '__remotion_selected_classname';
+const RenderQueueItem = ({ job, selected }) => {
+    const [hovered, setHovered] = (0, react_1.useState)(false);
+    const { setCanvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
+    const onPointerEnter = (0, react_1.useCallback)(() => {
+        setHovered(true);
+    }, []);
+    const onPointerLeave = (0, react_1.useCallback)(() => {
+        setHovered(false);
+    }, []);
+    const isHoverable = job.status === 'done';
+    const containerStyle = (0, react_1.useMemo)(() => {
+        return {
+            ...container,
+            backgroundColor: (0, colors_1.getBackgroundFromHoverState)({
+                hovered: isHoverable && hovered,
+                selected,
+            }),
+            userSelect: 'none',
+        };
+    }, [hovered, isHoverable, selected]);
+    const scrollCurrentIntoView = (0, react_1.useCallback)(() => {
+        var _a;
+        (_a = document
+            .querySelector(`.${SELECTED_CLASSNAME}`)) === null || _a === void 0 ? void 0 : _a.scrollIntoView({ behavior: 'smooth' });
+    }, []);
+    const onClick = (0, react_1.useCallback)(() => {
+        if (job.status !== 'done') {
+            return;
+        }
+        setCanvasContent((c) => {
+            const isAlreadySelected = c && c.type === 'output' && c.path === `/${job.outName}`;
+            if (isAlreadySelected && !selected) {
+                scrollCurrentIntoView();
+                return c;
+            }
+            return { type: 'output', path: `/${job.outName}` };
+        });
+        window.history.pushState({}, 'Studio', `/outputs/${job.outName}`);
+    }, [
+        job.outName,
+        job.status,
+        scrollCurrentIntoView,
+        selected,
+        setCanvasContent,
+    ]);
+    (0, react_1.useEffect)(() => {
+        if (selected) {
+            scrollCurrentIntoView();
+        }
+    }, [scrollCurrentIntoView, selected]);
+    return ((0, jsx_runtime_1.jsxs)(layout_1.Row, { onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, style: containerStyle, align: "center", onClick: onClick, className: selected ? SELECTED_CLASSNAME : undefined, children: [(0, jsx_runtime_1.jsx)(RenderQueueItemStatus_1.RenderQueueItemStatus, { job: job }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), (0, jsx_runtime_1.jsxs)("div", { style: right, children: [(0, jsx_runtime_1.jsx)("div", { style: title, children: job.compositionId }), (0, jsx_runtime_1.jsx)("div", { style: subtitle, children: job.status === 'done' ? ((0, jsx_runtime_1.jsx)(RenderQueueOutputName_1.RenderQueueOutputName, { job: job })) : job.status === 'failed' ? ((0, jsx_runtime_1.jsx)(RenderQueueError_1.RenderQueueError, { job: job })) : job.status === 'running' ? ((0, jsx_runtime_1.jsx)(RenderQueueProgressMessage_1.RenderQueueProgressMessage, { job: job })) : null })] }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), (0, RenderQueueCopyToClipboard_1.supportsCopyingToClipboard)(job) ? ((0, jsx_runtime_1.jsx)(RenderQueueCopyToClipboard_1.RenderQueueCopyToClipboard, { job: job })) : null, job.status === 'done' || job.status === 'failed' ? ((0, jsx_runtime_1.jsx)(RenderQueueRepeat_1.RenderQueueRepeatItem, { job: job })) : null, job.status === 'running' ? ((0, jsx_runtime_1.jsx)(RenderQueueItemCancelButton_1.RenderQueueCancelButton, { job: job })) : ((0, jsx_runtime_1.jsx)(RenderQueueRemoveItem_1.RenderQueueRemoveItem, { job: job })), job.status === 'done' ? (0, jsx_runtime_1.jsx)(RenderQueueOpenInFolder_1.RenderQueueOpenInFinderItem, { job: job }) : null] }));
 };
 exports.RenderQueueItem = RenderQueueItem;

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

@@ -7,7 +7,8 @@ const InlineAction_1 = require("../InlineAction");
 const NotificationCenter_1 = require("../Notifications/NotificationCenter");
 const actions_1 = require("./actions");
 const RenderQueueCancelButton = ({ job }) => {
-    const onClick = (0, react_1.useCallback)(() => {
+    const onClick = (0, react_1.useCallback)((e) => {
+        e.stopPropagation();
         (0, actions_1.cancelRenderJob)(job).catch((err) => {
             (0, NotificationCenter_1.sendErrorNotification)(`Could not cancel job: ${err.message}`);
         });

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

@@ -1,8 +1,31 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.RenderQueueItemStatus = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
+const react_1 = __importStar(require("react"));
 const colors_1 = require("../../helpers/colors");
 const modals_1 = require("../../state/modals");
 const CircularProgress_1 = require("./CircularProgress");
@@ -19,7 +42,15 @@ const invisibleStyle = {
 };
 const RenderQueueItemStatus = ({ job }) => {
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
-    const openProgress = (0, react_1.useCallback)(() => {
+    const [hovered, setHovered] = react_1.default.useState(false);
+    const onPointerEnter = (0, react_1.useCallback)(() => {
+        setHovered(true);
+    }, []);
+    const onPointerLeave = (0, react_1.useCallback)(() => {
+        setHovered(false);
+    }, []);
+    const onClick = (0, react_1.useCallback)((e) => {
+        e.stopPropagation();
         setSelectedModal({
             type: 'render-progress',
             jobId: job.id,
@@ -32,11 +63,11 @@ const RenderQueueItemStatus = ({ job }) => {
         return ((0, jsx_runtime_1.jsx)("svg", { style: iconStyle, viewBox: "0 0 512 512", children: (0, jsx_runtime_1.jsx)("path", { fill: colors_1.LIGHT_TEXT, d: "M256 512C114.6 512 0 397.4 0 256S114.6 0 256 0S512 114.6 512 256s-114.6 256-256 256zM232 120V256c0 8 4 15.5 10.7 20l96 64c11 7.4 25.9 4.4 33.3-6.7s4.4-25.9-6.7-33.3L280 243.2V120c0-13.3-10.7-24-24-24s-24 10.7-24 24z" }) }));
     }
     if (job.status === 'done') {
-        return ((0, jsx_runtime_1.jsx)("button", { type: "button", style: invisibleStyle, onClick: openProgress, children: (0, jsx_runtime_1.jsx)("svg", { style: iconStyle, viewBox: "0 0 512 512", children: (0, jsx_runtime_1.jsx)("path", { fill: colors_1.LIGHT_TEXT, d: "M256 512c141.4 0 256-114.6 256-256S397.4 0 256 0S0 114.6 0 256S114.6 512 256 512zM369 209L241 337l-17 17-17-17-64-64-17-17L160 222.1l17 17 47 47L335 175l17-17L385.9 192l-17 17z" }) }) }));
+        return ((0, jsx_runtime_1.jsx)("button", { type: "button", style: invisibleStyle, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, onClick: onClick, children: (0, jsx_runtime_1.jsx)("svg", { style: iconStyle, viewBox: "0 0 512 512", children: (0, jsx_runtime_1.jsx)("path", { fill: hovered ? 'white' : colors_1.LIGHT_TEXT, d: "M256 512c141.4 0 256-114.6 256-256S397.4 0 256 0S0 114.6 0 256S114.6 512 256 512zM369 209L241 337l-17 17-17-17-64-64-17-17L160 222.1l17 17 47 47L335 175l17-17L385.9 192l-17 17z" }) }) }));
     }
     if (job.status === 'running') {
         // Add a minimum progress to avoid the progress bar from disappearing
-        return ((0, jsx_runtime_1.jsx)("button", { type: "button", style: invisibleStyle, onClick: openProgress, children: (0, jsx_runtime_1.jsx)(CircularProgress_1.CircularProgress, { progress: Math.max(0.07, job.progress.value) }) }));
+        return ((0, jsx_runtime_1.jsx)("button", { type: "button", style: invisibleStyle, onClick: onClick, children: (0, jsx_runtime_1.jsx)(CircularProgress_1.CircularProgress, { progress: Math.max(0.07, job.progress.value) }) }));
     }
     throw new Error('Unknown job status');
 };

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

@@ -7,8 +7,9 @@ const folder_1 = require("../../icons/folder");
 const InlineAction_1 = require("../InlineAction");
 const NotificationCenter_1 = require("../Notifications/NotificationCenter");
 const actions_1 = require("./actions");
-const RenderQueueOpenInFinderItem = ({ job, }) => {
-    const onClick = (0, react_1.useCallback)(() => {
+const RenderQueueOpenInFinderItem = ({ job }) => {
+    const onClick = (0, react_1.useCallback)((e) => {
+        e.stopPropagation();
         (0, actions_1.openInFileExplorer)({ directory: job.outName }).catch((err) => {
             (0, NotificationCenter_1.sendErrorNotification)(`Could not open file: ${err.message}`);
         });

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

@@ -3,24 +3,16 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.RenderQueueOutputName = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const NotificationCenter_1 = require("../Notifications/NotificationCenter");
-const actions_1 = require("./actions");
 const item_style_1 = require("./item-style");
 const RenderQueueOutputName = ({ job }) => {
-    const onClick = (0, react_1.useCallback)(() => {
-        if (job.deletedOutputLocation)
-            return;
-        (0, actions_1.openInFileExplorer)({ directory: job.outName }).catch((err) => {
-            (0, NotificationCenter_1.sendErrorNotification)(err.message);
-        });
-    }, [job]);
     const style = (0, react_1.useMemo)(() => {
         return {
             ...item_style_1.renderQueueItemSubtitleStyle,
-            cursor: job.deletedOutputLocation ? 'inherit' : 'pointer',
             textDecoration: job.deletedOutputLocation ? 'line-through' : 'none',
+            color: item_style_1.renderQueueItemSubtitleStyle.color,
+            cursor: 'inherit',
         };
     }, [job.deletedOutputLocation]);
-    return ((0, jsx_runtime_1.jsx)("button", { onClick: onClick, type: "button", style: style, disabled: job.deletedOutputLocation, title: job.deletedOutputLocation ? 'File was deleted' : job.outName, children: job.outName }));
+    return ((0, jsx_runtime_1.jsx)("span", { style: style, title: job.deletedOutputLocation ? 'File was deleted' : job.outName, children: job.outName }));
 };
 exports.RenderQueueOutputName = RenderQueueOutputName;

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

@@ -7,7 +7,8 @@ const InlineAction_1 = require("../InlineAction");
 const NotificationCenter_1 = require("../Notifications/NotificationCenter");
 const actions_1 = require("./actions");
 const RenderQueueRemoveItem = ({ job }) => {
-    const onClick = (0, react_1.useCallback)(() => {
+    const onClick = (0, react_1.useCallback)((e) => {
+        e.stopPropagation();
         (0, actions_1.removeRenderJob)(job)
             .then(() => {
             var _a;

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

@@ -8,7 +8,8 @@ const modals_1 = require("../../state/modals");
 const InlineAction_1 = require("../InlineAction");
 const RenderQueueRepeatItem = ({ job }) => {
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
-    const onClick = (0, react_1.useCallback)(() => {
+    const onClick = (0, react_1.useCallback)((e) => {
+        e.stopPropagation();
         const retryPayload = (0, make_retry_payload_1.makeRetryPayload)(job);
         setSelectedModal(retryPayload);
     }, [job, setSelectedModal]);

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

@@ -26,6 +26,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.RenderQueue = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
+const remotion_1 = require("remotion");
 const client_id_1 = require("../../helpers/client-id");
 const colors_1 = require("../../helpers/colors");
 const layout_1 = require("../layout");
@@ -59,6 +60,7 @@ const renderQueue = {
 const RenderQueue = () => {
     const connectionStatus = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx).type;
     const { jobs } = (0, react_1.useContext)(context_1.RenderQueueContext);
+    const { canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     const previousJobCount = react_1.default.useRef(jobs.length);
     const jobCount = jobs.length;
     const divRef = react_1.default.useRef(null);
@@ -75,6 +77,19 @@ const RenderQueue = () => {
         }
         previousJobCount.current = jobCount;
     }, [jobCount]);
+    const selectedJob = (0, react_1.useMemo)(() => {
+        let selectedIndex = -1;
+        for (let i = 0; i < jobs.length; i++) {
+            const job = jobs[i];
+            if (canvasContent &&
+                canvasContent.type === 'output' &&
+                canvasContent.path === `/${job.outName}` &&
+                job.status === 'done') {
+                selectedIndex = i;
+            }
+        }
+        return selectedIndex;
+    }, [canvasContent, jobs]);
     if (connectionStatus === 'disconnected') {
         return ((0, jsx_runtime_1.jsxs)("div", { style: explainer, children: [(0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 5 }), (0, jsx_runtime_1.jsx)("div", { style: errorExplanation, children: "The studio server has disconnected." }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 2, block: true })] }));
     }
@@ -82,7 +97,7 @@ const RenderQueue = () => {
         return ((0, jsx_runtime_1.jsxs)("div", { style: explainer, children: [(0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 5 }), (0, jsx_runtime_1.jsx)("div", { style: errorExplanation, children: "No renders in the queue." }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 2, block: true })] }));
     }
     return ((0, jsx_runtime_1.jsx)("div", { ref: divRef, style: renderQueue, className: ['css-reset', is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME].join(' '), children: jobs.map((j, index) => {
-            return ((0, jsx_runtime_1.jsx)("div", { style: index === jobs.length - 1 ? undefined : separatorStyle, children: (0, jsx_runtime_1.jsx)(RenderQueueItem_1.RenderQueueItem, { job: j }) }, j.id));
+            return ((0, jsx_runtime_1.jsx)("div", { style: index === jobs.length - 1 ? undefined : separatorStyle, children: (0, jsx_runtime_1.jsx)(RenderQueueItem_1.RenderQueueItem, { selected: selectedJob === index, job: j }) }, j.id));
         }) }));
 };
 exports.RenderQueue = RenderQueue;

package/dist/editor/components/RendersTab.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.RendersTab = 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 layout_1 = require("./layout");
 const context_1 = require("./RenderQueue/context");
@@ -26,8 +27,15 @@ const badge = {
 };
 const RendersTab = ({ selected, onClick }) => {
     const { jobs } = (0, react_1.useContext)(context_1.RenderQueueContext);
+    const { canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     const failedJobs = jobs.filter((j) => j.status === 'failed').length;
     const jobCount = jobs.length;
+    const isActuallySelected = (0, react_1.useMemo)(() => {
+        if (!canvasContent || canvasContent.type !== 'composition') {
+            return true;
+        }
+        return selected;
+    }, [canvasContent, selected]);
     const badgeStyle = (0, react_1.useMemo)(() => {
         return {
             ...badge,
@@ -38,6 +46,6 @@ const RendersTab = ({ selected, onClick }) => {
             borderColor: colors_1.LIGHT_TEXT,
         };
     }, [failedJobs]);
-    return ((0, jsx_runtime_1.jsx)(Tabs_1.Tab, { selected: selected, onClick: onClick, children: (0, jsx_runtime_1.jsxs)("div", { style: row, children: ["Renders", jobCount > 0 ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(layout_1.Flex, {}), (0, jsx_runtime_1.jsx)("div", { style: badgeStyle, children: jobCount })] })) : null] }) }));
+    return ((0, jsx_runtime_1.jsx)(Tabs_1.Tab, { selected: isActuallySelected, onClick: onClick, children: (0, jsx_runtime_1.jsxs)("div", { style: row, children: ["Renders", jobCount > 0 ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(layout_1.Flex, {}), (0, jsx_runtime_1.jsx)("div", { style: badgeStyle, children: jobCount })] })) : null] }) }));
 };
 exports.RendersTab = RendersTab;

package/dist/editor/components/SizeSelector.js

@@ -3,10 +3,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.SizeSelector = exports.getUniqueSizes = exports.getPreviewSizeLabel = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const remotion_1 = require("remotion");
 const Checkmark_1 = require("../icons/Checkmark");
 const preview_size_1 = require("../state/preview-size");
 const ControlButton_1 = require("./ControlButton");
 const ComboBox_1 = require("./NewComposition/ComboBox");
+const Preview_1 = require("./Preview");
 const commonPreviewSizes = [
     {
         size: 'auto',
@@ -65,13 +67,32 @@ const getUniqueSizes = (size) => {
     });
 };
 exports.getUniqueSizes = getUniqueSizes;
+const zoomableFileTypes = ['video', 'image'];
 const SizeSelector = () => {
     const { size, setSize } = (0, react_1.useContext)(preview_size_1.PreviewSizeContext);
+    const { canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     const style = (0, react_1.useMemo)(() => {
         return {
             padding: ControlButton_1.CONTROL_BUTTON_PADDING,
         };
     }, []);
+    const zoomable = (0, react_1.useMemo)(() => {
+        if (!canvasContent) {
+            return null;
+        }
+        if (canvasContent.type === 'composition') {
+            return true;
+        }
+        if (canvasContent.type === 'asset' &&
+            zoomableFileTypes.includes((0, Preview_1.getPreviewFileType)(canvasContent.asset))) {
+            return true;
+        }
+        if (canvasContent.type === 'output' &&
+            zoomableFileTypes.includes((0, Preview_1.getPreviewFileType)(canvasContent.path))) {
+            return true;
+        }
+        return false;
+    }, [canvasContent]);
     const items = (0, react_1.useMemo)(() => {
         return (0, exports.getUniqueSizes)(size).map((newSize) => {
             return {
@@ -91,6 +112,9 @@ const SizeSelector = () => {
             };
         });
     }, [setSize, size]);
+    if (!zoomable) {
+        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(size.size), values: items }) }));
 };
 exports.SizeSelector = SizeSelector;

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

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import type { AssetMetadata } from '../helpers/get-asset-metadata';
+export declare const StaticFilePreview: React.FC<{
+    currentAsset: string;
+    assetMetadata: AssetMetadata | null;
+}>;

package/dist/editor/components/StaticFilePreview.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StaticFilePreview = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const remotion_1 = require("remotion");
+const client_id_1 = require("../helpers/client-id");
+const colors_1 = require("../helpers/colors");
+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 StaticFilePreview = ({ currentAsset, assetMetadata }) => {
+    const fileType = (0, Preview_1.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."] }));
+    }
+    if (!currentAsset) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsx)(FilePreview_1.FilePreview, { currentAsset: currentAsset, fileType: fileType, src: staticFileSrc, assetMetadata: assetMetadata }));
+};
+exports.StaticFilePreview = StaticFilePreview;

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

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare const TextViewer: React.FC<{
+    src: string;
+}>;

package/dist/editor/components/TextViewer.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TextViewer = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const textStyle = {
+    margin: 14,
+    fontFamily: 'monospace',
+    flex: 1,
+    color: 'white',
+    whiteSpace: 'pre-wrap',
+};
+const TextViewer = ({ src }) => {
+    const [txt, setTxt] = (0, react_1.useState)('');
+    (0, react_1.useEffect)(() => {
+        fetch(src).then(async (res) => {
+            if (!res.ok || !res.body) {
+                return;
+            }
+            const text = await res.text();
+            setTxt(text);
+        });
+    }, [src]);
+    return (0, jsx_runtime_1.jsxs)("div", { style: textStyle, children: [txt, " "] });
+};
+exports.TextViewer = TextViewer;

package/dist/editor/components/Timeline/TimelineZoomControls.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TimelineZoomControls = 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 minus_1 = require("../../icons/minus");
 const plus_1 = require("../../icons/plus");
@@ -24,6 +25,7 @@ const iconStyle = {
     width: 14,
 };
 const TimelineZoomControls = () => {
+    const { canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     const { setZoom, zoom } = (0, react_1.useContext)(timeline_zoom_1.TimelineZoomCtx);
     const { tabIndex } = (0, z_index_1.useZIndex)();
     const onMinusClicked = (0, react_1.useCallback)(() => {
@@ -36,7 +38,7 @@ const TimelineZoomControls = () => {
         setZoom(() => Number(e.target.value));
     }, [setZoom]);
     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.jsxs)("div", { style: container, children: [(0, jsx_runtime_1.jsx)(ControlButton_1.ControlButton, { onClick: onMinusClicked, style: buttonStyle, title: "Zoom out timeline", role: 'ControlButton', type: "button", disabled: timeline_zoom_1.TIMELINE_MIN_ZOOM === zoom, children: (0, jsx_runtime_1.jsx)(minus_1.Minus, { style: iconStyle }) }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.5 }), (0, jsx_runtime_1.jsx)("input", { title: `Timeline zoom (${zoom}x)`, alt: `Timeline zoom (${zoom}x)`, type: 'range', min: timeline_zoom_1.TIMELINE_MIN_ZOOM, step: 0.1, value: zoom, max: timeline_zoom_1.TIMELINE_MAX_ZOOM, onChange: onChange, className: "__remotion-timeline-slider", tabIndex: tabIndex }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.5 }), (0, jsx_runtime_1.jsx)(ControlButton_1.ControlButton, { onClick: onPlusClicked, style: buttonStyle, title: "Zoom in timeline", role: 'button', type: "button", disabled: timeline_zoom_1.TIMELINE_MAX_ZOOM === zoom, children: (0, jsx_runtime_1.jsx)(plus_1.Plus, { color: "currentcolor", style: iconStyle }) })] }));

package/dist/editor/components/TimelineInOutToggle.js

@@ -6,7 +6,6 @@ const react_1 = require("react");
 const remotion_1 = require("remotion");
 const truthy_1 = require("../../truthy");
 const colors_1 = require("../helpers/colors");
-const is_current_selected_still_1 = require("../helpers/is-current-selected-still");
 const use_keybinding_1 = require("../helpers/use-keybinding");
 const timelineInOutPointer_1 = require("../icons/timelineInOutPointer");
 const in_out_1 = require("../state/in-out");
@@ -28,7 +27,6 @@ const TimelineInOutPointToggle = () => {
     const timelinePosition = remotion_1.Internals.Timeline.useTimelinePosition();
     const { inFrame, outFrame } = (0, in_out_1.useTimelineInOutFramePosition)();
     const { setInAndOutFrames } = (0, in_out_1.useTimelineSetInOutFramePosition)();
-    const isStill = (0, is_current_selected_still_1.useIsStill)();
     const videoConfig = remotion_1.Internals.useUnsafeVideoConfig();
     const keybindings = (0, use_keybinding_1.useKeybinding)();
     const onInOutClear = (0, react_1.useCallback)((composition) => {
@@ -234,9 +232,6 @@ const TimelineInOutPointToggle = () => {
             outMarkClick: onOutMark,
         };
     }, [confId, onInMark, onInOutClear, onOutMark]);
-    if (isStill) {
-        return null;
-    }
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ControlButton_1.ControlButton, { title: getTooltipText('In', 'I'), "aria-label": getTooltipText('In', 'I'), onClick: (e) => onInMark(e), onContextMenu: clearInMark, disabled: !videoConfig || timelinePosition === 0, children: (0, jsx_runtime_1.jsx)(timelineInOutPointer_1.TimelineInPointer, { color: inFrame === null ? 'white' : colors_1.BLUE, style: style }) }), (0, jsx_runtime_1.jsx)(ControlButton_1.ControlButton, { title: getTooltipText('Out', 'O'), "aria-label": getTooltipText('Out', 'O'), onClick: onOutMark, onContextMenu: clearOutMark, disabled: !videoConfig || timelinePosition === videoConfig.durationInFrames - 1, children: (0, jsx_runtime_1.jsx)(timelineInOutPointer_1.TimelineOutPointer, { color: outFrame === null ? 'white' : colors_1.BLUE, style: style }) })] }));
 };
 exports.TimelineInOutPointToggle = TimelineInOutPointToggle;

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

@@ -1,3 +1,5 @@
 import type React from 'react';
+import type { CanvasContent } from 'remotion';
 export declare const getZoomForComposition: (composition: string) => number;
+export declare const deriveCanvasContentFromUrl: () => CanvasContent | null;
 export declare const ZoomPersistor: React.FC;

package/dist/editor/components/ZoomPersistor.js

@@ -1,30 +1,58 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ZoomPersistor = exports.getZoomForComposition = void 0;
+exports.ZoomPersistor = exports.deriveCanvasContentFromUrl = exports.getZoomForComposition = void 0;
 const react_1 = require("react");
 const remotion_1 = require("remotion");
 const timeline_zoom_1 = require("../state/timeline-zoom");
-const FramePersistor_1 = require("./FramePersistor");
 const makeKey = (composition) => {
     return `remotion.zoom.${composition}`;
 };
 const persistCurrentZoom = (zoom) => {
-    const currentComposition = (0, FramePersistor_1.getCurrentCompositionFromUrl)();
-    if (!currentComposition) {
+    const currentComposition = (0, exports.deriveCanvasContentFromUrl)();
+    if (!currentComposition || currentComposition.type !== 'composition') {
         return;
     }
-    localStorage.setItem(makeKey(currentComposition), String(zoom));
+    localStorage.setItem(makeKey(currentComposition.compositionId), String(zoom));
 };
 const getZoomForComposition = (composition) => {
     const zoom = localStorage.getItem(makeKey(composition));
     return zoom ? Number(zoom) : 0;
 };
 exports.getZoomForComposition = getZoomForComposition;
+const deriveCanvasContentFromUrl = () => {
+    const substrings = window.location.pathname.split('/').filter(Boolean);
+    const lastPart = substrings[substrings.length - 1];
+    if (substrings[0] === 'assets') {
+        return {
+            type: 'asset',
+            asset: decodeURIComponent(window.location.pathname.substring('/assets/'.length)),
+        };
+    }
+    if (substrings[0] === 'outputs') {
+        return {
+            type: 'output',
+            path: decodeURIComponent(window.location.pathname.substring('/outputs/'.length)),
+        };
+    }
+    if (lastPart) {
+        return {
+            type: 'composition',
+            compositionId: lastPart,
+        };
+    }
+    return null;
+};
+exports.deriveCanvasContentFromUrl = deriveCanvasContentFromUrl;
 const ZoomPersistor = () => {
     const [playing] = remotion_1.Internals.Timeline.usePlayingState();
     const { zoom } = (0, react_1.useContext)(timeline_zoom_1.TimelineZoomCtx);
-    const { currentComposition } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
-    const isActive = currentComposition === (0, FramePersistor_1.getCurrentCompositionFromUrl)();
+    const { canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
+    const urlState = (0, exports.deriveCanvasContentFromUrl)();
+    const isActive = urlState &&
+        urlState.type === 'composition' &&
+        canvasContent &&
+        canvasContent.type === 'composition' &&
+        urlState.compositionId === canvasContent.compositionId;
     (0, react_1.useEffect)(() => {
         if (!isActive) {
             return;

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

@@ -1,3 +1,4 @@
+import type { HTMLAttributes } from 'react';
 import React from 'react';
 export declare const SPACING_UNIT = 8;
 export declare const Spacing: React.FC<{
@@ -15,7 +16,7 @@ export declare const Row: React.FC<{
     flex?: number;
     className?: string;
     children: React.ReactNode;
-}>;
+} & HTMLAttributes<HTMLDivElement>>;
 export declare const Column: React.FC<{
     justify?: 'center';
     align?: 'center';

package/dist/editor/components/layout.js

@@ -19,7 +19,7 @@ exports.Spacing = Spacing;
 const flexCss = { flex: 1 };
 const Flex = ({ children }) => (0, jsx_runtime_1.jsx)("div", { style: flexCss, children: children });
 exports.Flex = Flex;
-const Row = ({ children, justify, className, align, flex, style = {} }) => {
+const Row = ({ children, justify, className, align, flex, style = {}, ...other }) => {
     const finalStyle = (0, react_1.useMemo)(() => {
         return {
             ...style,
@@ -30,7 +30,7 @@ const Row = ({ children, justify, className, align, flex, style = {} }) => {
             flex: flex !== null && flex !== void 0 ? flex : undefined,
         };
     }, [align, flex, justify, style]);
-    return ((0, jsx_runtime_1.jsx)("div", { className: className, style: finalStyle, children: children }));
+    return ((0, jsx_runtime_1.jsx)("div", { className: className, style: finalStyle, ...other, children: children }));
 };
 exports.Row = Row;
 const Column = ({ children, justify, className, align, style = {} }) => {

package/dist/editor/helpers/checkerboard-background.d.ts

@@ -1,4 +1,4 @@
 export declare const getCheckerboardBackgroundSize: (size: number) => string;
 export declare const getCheckerboardBackgroundPos: (size: number) => string;
-export declare const checkerboardBackgroundColor: (checkerboard: boolean) => "white" | "black";
+export declare const checkerboardBackgroundColor: (checkerboard: boolean) => "black" | "white";
 export declare const checkerboardBackgroundImage: (checkerboard: boolean) => "\n     linear-gradient(\n        45deg,\n        rgba(0, 0, 0, 0.1) 25%,\n        transparent 25%\n      ),\n      linear-gradient(135deg, rgba(0, 0, 0, 0.1) 25%, transparent 25%),\n      linear-gradient(45deg, transparent 75%, rgba(0, 0, 0, 0.1) 75%),\n      linear-gradient(135deg, transparent 75%, rgba(0, 0, 0, 0.1) 75%)\n    " | undefined;

package/dist/editor/helpers/colors.d.ts

@@ -16,4 +16,4 @@ export declare const BLUE_DISABLED = "#284f73";
 export declare const getBackgroundFromHoverState: ({ selected, hovered, }: {
     selected: boolean;
     hovered: boolean;
-}) => "transparent" | "rgba(255, 255, 255, 0.06)" | "hsla(0, 0%, 100%, 0.15)" | "hsla(0, 0%, 100%, 0.25)";
+}) => "transparent" | "hsla(0, 0%, 100%, 0.15)" | "hsla(0, 0%, 100%, 0.25)" | "rgba(255, 255, 255, 0.06)";

package/dist/editor/helpers/create-folder-tree.d.ts

@@ -2,13 +2,14 @@ import type { AnyComposition, StaticFile, TFolder } from 'remotion';
 import type { CompositionSelectorItemType } from '../components/CompositionSelectorItem';
 export type AssetFolder = {
     name: string;
-    items: Structure;
+    items: AssetStructure;
+    expanded: boolean;
 };
-export type Structure = {
+export type AssetStructure = {
     files: StaticFile[];
     folders: AssetFolder[];
 };
-export declare const buildAssetFolderStructure: (files: StaticFile[]) => Structure;
+export declare const buildAssetFolderStructure: (files: StaticFile[], parentFolderName: string | null, foldersExpanded: Record<string, boolean>) => AssetStructure;
 export declare const splitParentIntoNameAndParent: (name: string | null) => {
     name: string | null;
     parent: string | null;