@remotion/cli 4.0.44 → 4.0.46

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/SizeSelector.js

@@ -67,8 +67,8 @@ const getUniqueSizes = (size) => {
     });
 };
 exports.getUniqueSizes = getUniqueSizes;
+const zoomableFileTypes = ['video', 'image'];
 const SizeSelector = () => {
-    const zoomableFileTypes = ['video', 'image'];
     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)(() => {
@@ -77,13 +77,22 @@ const SizeSelector = () => {
         };
     }, []);
     const zoomable = (0, react_1.useMemo)(() => {
-        if ((canvasContent === null || canvasContent === void 0 ? void 0 : canvasContent.type) === 'asset') {
-            if (zoomableFileTypes.includes((0, Preview_1.getPreviewFileType)(canvasContent.asset))) {
-                return true;
-            }
+        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, zoomableFileTypes]);
+    }, [canvasContent]);
     const items = (0, react_1.useMemo)(() => {
         return (0, exports.getUniqueSizes)(size).map((newSize) => {
             return {

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

@@ -1,4 +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

@@ -4,7 +4,6 @@ exports.StaticFilePreview = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
-const format_bytes_1 = require("../../format-bytes");
 const client_id_1 = require("../helpers/client-id");
 const colors_1 = require("../helpers/colors");
 const FilePreview_1 = require("./FilePreview");
@@ -20,7 +19,7 @@ const errMsgStyle = {
     ...msgStyle,
     color: colors_1.LIGHT_TEXT,
 };
-const StaticFilePreview = ({ currentAsset, }) => {
+const StaticFilePreview = ({ currentAsset, assetMetadata }) => {
     const fileType = (0, Preview_1.getPreviewFileType)(currentAsset);
     const staticFileSrc = (0, remotion_1.staticFile)(currentAsset);
     const staticFiles = (0, remotion_1.getStaticFiles)();
@@ -32,16 +31,9 @@ const StaticFilePreview = ({ currentAsset, }) => {
     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);
-        }
-        return null;
-    })();
     if (!currentAsset) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsx)(FilePreview_1.FilePreview, { currentAsset: currentAsset, fileSize: fileSize, fileType: fileType, src: staticFileSrc }));
+    return ((0, jsx_runtime_1.jsx)(FilePreview_1.FilePreview, { currentAsset: currentAsset, fileType: fileType, src: staticFileSrc, assetMetadata: assetMetadata }));
 };
 exports.StaticFilePreview = StaticFilePreview;

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");
@@ -27,9 +26,7 @@ exports.defaultInOutValue = { inFrame: null, outFrame: null };
 const TimelineInOutPointToggle = () => {
     const timelinePosition = remotion_1.Internals.Timeline.useTimelinePosition();
     const { inFrame, outFrame } = (0, in_out_1.useTimelineInOutFramePosition)();
-    const { canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     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) => {
@@ -235,9 +232,6 @@ const TimelineInOutPointToggle = () => {
             outMarkClick: onOutMark,
         };
     }, [confId, onInMark, onInOutClear, onOutMark]);
-    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, { 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/UpdateCheck.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { PackageManager } from '../../preview-server/get-package-manager';
 export type UpdateInfo = {
     currentVersion: string;

package/dist/editor/components/ZoomPersistor.js

@@ -20,12 +20,18 @@ const getZoomForComposition = (composition) => {
 };
 exports.getZoomForComposition = getZoomForComposition;
 const deriveCanvasContentFromUrl = () => {
-    const substrings = window.location.pathname.split('/');
+    const substrings = window.location.pathname.split('/').filter(Boolean);
     const lastPart = substrings[substrings.length - 1];
-    if (substrings.includes('assets')) {
+    if (substrings[0] === 'assets') {
         return {
             type: 'asset',
-            asset: decodeURIComponent(window.location.pathname.substring(8)),
+            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) {

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/colors.d.ts

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

package/dist/editor/helpers/get-asset-metadata.d.ts

@@ -0,0 +1,11 @@
+import type { CanvasContent } from 'remotion';
+import type { Dimensions } from './is-current-selected-still';
+export declare const remotion_outputsBase: string;
+export type AssetMetadata = {
+    type: 'not-found';
+} | {
+    type: 'found';
+    size: number;
+    dimensions: Dimensions | 'none' | null;
+};
+export declare const getAssetMetadata: (canvasContent: CanvasContent) => Promise<AssetMetadata>;

package/dist/editor/helpers/get-asset-metadata.js

@@ -0,0 +1,64 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getAssetMetadata = exports.remotion_outputsBase = void 0;
+const media_utils_1 = require("@remotion/media-utils");
+const remotion_1 = require("remotion");
+const Preview_1 = require("../components/Preview");
+exports.remotion_outputsBase = window.remotion_staticBase.replace('static', 'outputs');
+const getSrcFromCanvasContent = (canvasContent) => {
+    if (canvasContent.type === 'asset') {
+        return (0, remotion_1.staticFile)(canvasContent.asset);
+    }
+    if (canvasContent.type === 'composition') {
+        throw new Error('cannot get dimensions for composition');
+    }
+    return exports.remotion_outputsBase + canvasContent.path;
+};
+const getAssetMetadata = async (canvasContent) => {
+    const src = getSrcFromCanvasContent(canvasContent);
+    const file = await fetch(src, {
+        method: 'HEAD',
+    });
+    if (file.status === 404) {
+        return { type: 'not-found' };
+    }
+    if (file.status !== 200) {
+        throw new Error(`Expected status code 200 or 404 for file, got ${file.status}`);
+    }
+    const size = file.headers.get('content-length');
+    if (!size) {
+        throw new Error('Unexpected error: content-length is null');
+    }
+    const fileType = (0, Preview_1.getPreviewFileType)(src);
+    if (fileType === 'video') {
+        const resolution = await (0, media_utils_1.getVideoMetadata)(src);
+        return {
+            type: 'found',
+            size: Number(size),
+            dimensions: { width: resolution.width, height: resolution.height },
+        };
+    }
+    if (fileType === 'image') {
+        const resolution = await new Promise((resolve, reject) => {
+            const img = new Image();
+            img.onload = () => {
+                resolve({
+                    type: 'found',
+                    size: Number(size),
+                    dimensions: { width: img.width, height: img.height },
+                });
+            };
+            img.onerror = () => {
+                reject(new Error('Failed to load image'));
+            };
+            img.src = src;
+        });
+        return resolution;
+    }
+    return {
+        type: 'found',
+        dimensions: 'none',
+        size: Number(size),
+    };
+};
+exports.getAssetMetadata = getAssetMetadata;

package/dist/editor/helpers/is-current-selected-still.d.ts

@@ -3,3 +3,4 @@ export type Dimensions = {
     height: number;
 };
 export declare const useIsStill: () => boolean;
+export declare const useIsVideoComposition: () => boolean;

package/dist/editor/helpers/is-current-selected-still.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useIsStill = void 0;
+exports.useIsVideoComposition = exports.useIsStill = void 0;
+const react_1 = require("react");
 const remotion_1 = require("remotion");
 const is_composition_still_1 = require("./is-composition-still");
 const useIsStill = () => {
@@ -11,3 +12,15 @@ const useIsStill = () => {
     return (0, is_composition_still_1.isCompositionStill)(resolved.result);
 };
 exports.useIsStill = useIsStill;
+const useIsVideoComposition = () => {
+    const isStill = (0, exports.useIsStill)();
+    const { canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
+    if (canvasContent === null) {
+        return false;
+    }
+    if (isStill) {
+        return false;
+    }
+    return canvasContent.type === 'composition';
+};
+exports.useIsVideoComposition = useIsVideoComposition;

package/dist/editor/helpers/render-modal-sections.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { Codec } from '@remotion/renderer';
 import type { RenderType } from '../components/RenderModal/RenderModalAdvanced';
 type Section = 'general' | 'picture' | 'advanced' | 'data' | 'gif' | 'audio';

package/dist/get-cli-options.d.ts

@@ -15,13 +15,13 @@ export declare const getCliOptions: (options: {
     browser: "chrome";
     crf: import("@remotion/renderer").Crf | null;
     pixelFormat: "yuv420p" | "yuva420p" | "yuv422p" | "yuv444p" | "yuv420p10le" | "yuv422p10le" | "yuv444p10le" | "yuva444p10le";
-    proResProfile: "4444-xq" | "4444" | "hq" | "standard" | "light" | "proxy" | undefined;
+    proResProfile: "light" | "4444-xq" | "4444" | "hq" | "standard" | "proxy" | undefined;
     x264Preset: "medium" | "ultrafast" | "superfast" | "veryfast" | "faster" | "fast" | "slow" | "slower" | "veryslow" | "placebo" | undefined;
     everyNthFrame: number;
     numberOfGifLoops: import("./config/number-of-gif-loops").Loop;
     stillFrame: number;
     browserExecutable: BrowserExecutable;
-    logLevel: "verbose" | "info" | "warn" | "error";
+    logLevel: "error" | "verbose" | "info" | "warn";
     scale: number;
     chromiumOptions: ChromiumOptions;
     overwrite: boolean;