@remotion/cli 4.0.44 → 4.0.45

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/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/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/handle-common-errors.d.ts

@@ -0,0 +1,2 @@
+import type { LogLevel } from '@remotion/renderer';
+export declare const handleCommonError: (err: Error, logLevel: LogLevel) => Promise<void>;

package/dist/handle-common-errors.js

@@ -0,0 +1,60 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.handleCommonError = void 0;
+const chalk_1 = require("./chalk");
+const log_1 = require("./log");
+const print_error_1 = require("./print-error");
+const truthy_1 = require("./truthy");
+const handleCommonError = async (err, logLevel) => {
+    var _a;
+    await (0, print_error_1.printError)(err, logLevel);
+    if (err.message.includes('Could not play video with')) {
+        log_1.Log.info();
+        log_1.Log.info('💡 Get help for this issue at https://remotion.dev/docs/media-playback-error');
+    }
+    if (err.message.includes('A delayRender()') &&
+        err.message.includes('was called but not cleared after')) {
+        log_1.Log.info();
+        log_1.Log.info('💡 Get help for this issue at https://remotion.dev/docs/timeout');
+    }
+    if (err.message.includes('Target closed')) {
+        log_1.Log.info();
+        log_1.Log.info('💡 Get help for this issue at https://remotion.dev/docs/target-closed');
+    }
+    if (err.message.includes('ENAMETOOLONG')) {
+        log_1.Log.info();
+        log_1.Log.info('💡 Get help for this issue at https://remotion.dev/docs/enametoolong');
+    }
+    if (err.message.includes('Error creating WebGL context')) {
+        log_1.Log.info();
+        log_1.Log.warn('💡 You might need to set the OpenGL renderer to "angle" (or "swangle" if rendering on lambda). Learn why at https://www.remotion.dev/docs/three');
+        log_1.Log.warn("💡 Check how it's done at https://www.remotion.dev/docs/chromium-flags#--gl");
+    }
+    if (err.message.includes('The bucket does not allow ACLs')) {
+        log_1.Log.info();
+        log_1.Log.info(chalk_1.chalk.green('💡 Fix this issue https://remotion.dev/docs/lambda/troubleshooting/bucket-disallows-acl'));
+    }
+    if (err.message.includes('Minified React error #306')) {
+        const componentName = (_a = err.message.match(/<\w+>/)) === null || _a === void 0 ? void 0 : _a[0];
+        log_1.Log.info([
+            '💡 This error indicates that the component',
+            componentName ? `(${componentName})` : null,
+            'you are trying to render is not imported correctly.',
+        ]
+            .filter(truthy_1.truthy)
+            .join(' '));
+        log_1.Log.info();
+        log_1.Log.info('   Check the root file and ensure that the component is not undefined.');
+        log_1.Log.info('   Oftentimes, this happens if the component is missing the `export` keyword');
+        log_1.Log.info('   or if the component was renamed and the import statement not properly adjusted.');
+    }
+    if (err.message.includes('GLIBC_')) {
+        log_1.Log.info('💡 Remotion requires at least Libc 2.35.');
+        log_1.Log.info('💡 Get help for this issue: https://github.com/remotion-dev/remotion/issues/2439');
+    }
+    if (err.message.includes('EBADF')) {
+        log_1.Log.info('💡 This error might be fixed by changing your Node version:');
+        log_1.Log.info('   https://github.com/remotion-dev/remotion/issues/2452');
+    }
+};
+exports.handleCommonError = handleCommonError;

package/dist/preview-server/routes.d.ts

@@ -1,9 +1,11 @@
 /// <reference types="node" />
 import type { IncomingMessage, ServerResponse } from 'node:http';
 import type { LiveEventsServer } from './live-events';
-export declare const handleRoutes: ({ hash, hashPrefix, request, response, liveEventsServer, getCurrentInputProps, getEnvVariables, remotionRoot, entryPoint, publicDir, }: {
-    hash: string;
-    hashPrefix: string;
+export declare const handleRoutes: ({ staticHash, staticHashPrefix, outputHash, outputHashPrefix, request, response, liveEventsServer, getCurrentInputProps, getEnvVariables, remotionRoot, entryPoint, publicDir, }: {
+    staticHash: string;
+    staticHashPrefix: string;
+    outputHash: string;
+    outputHashPrefix: string;
     request: IncomingMessage;
     response: ServerResponse;
     liveEventsServer: LiveEventsServer;

package/dist/preview-server/routes.js

@@ -1,13 +1,33 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
+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.handleRoutes = void 0;
 const bundler_1 = require("@remotion/bundler");
 const renderer_1 = require("@remotion/renderer");
 const node_fs_1 = require("node:fs");
-const node_path_1 = __importDefault(require("node:path"));
+const node_path_1 = __importStar(require("node:path"));
 const node_url_1 = require("node:url");
 const config_1 = require("../config");
 const number_of_shared_audio_tags_1 = require("../config/number-of-shared-audio-tags");
@@ -27,6 +47,10 @@ const static404 = (response) => {
     response.writeHead(404);
     response.end('The static/ prefix has been changed, this URL is no longer valid.');
 };
+const output404 = (response) => {
+    response.writeHead(404);
+    response.end('The outputs/ prefix has been changed, this URL is no longer valid.');
+};
 const handleFallback = async ({ remotionRoot, hash, response, getCurrentInputProps, getEnvVariables, publicDir, }) => {
     var _a, _b, _c;
     const [edit] = await editorGuess;
@@ -176,7 +200,7 @@ const handleFavicon = (_, response) => {
     const readStream = (0, node_fs_1.createReadStream)(filePath);
     readStream.pipe(response);
 };
-const handleRoutes = ({ hash, hashPrefix, request, response, liveEventsServer, getCurrentInputProps, getEnvVariables, remotionRoot, entryPoint, publicDir, }) => {
+const handleRoutes = ({ staticHash, staticHashPrefix, outputHash, outputHashPrefix, request, response, liveEventsServer, getCurrentInputProps, getEnvVariables, remotionRoot, entryPoint, publicDir, }) => {
     const url = new URL(request.url, 'http://localhost');
     if (url.pathname === '/api/project-info') {
         return handleProjectInfo(remotionRoot, request, response);
@@ -209,15 +233,35 @@ const handleRoutes = ({ hash, hashPrefix, request, response, liveEventsServer, g
     if (url.pathname === '/events') {
         return liveEventsServer.router(request, response);
     }
-    if (url.pathname.startsWith(hash)) {
-        return (0, serve_static_1.serveStatic)(publicDir, hash, request, response);
+    if (url.pathname.startsWith(staticHash)) {
+        const filename = new URL(request.url, 'http://localhost').pathname.replace(new RegExp(`^${staticHash}`), '');
+        const filePath = (0, node_path_1.join)(publicDir, decodeURIComponent(filename));
+        return (0, serve_static_1.serveStatic)({
+            root: publicDir,
+            path: filePath,
+            req: request,
+            res: response,
+        });
     }
-    if (url.pathname.startsWith(hashPrefix)) {
+    if (url.pathname.startsWith(staticHashPrefix)) {
         return static404(response);
     }
+    if (url.pathname.startsWith(outputHash)) {
+        const filename = new URL(request.url, 'http://localhost').pathname.replace(new RegExp(`^${outputHash}`), '');
+        const filePath = (0, node_path_1.join)(remotionRoot, decodeURIComponent(filename));
+        return (0, serve_static_1.serveStatic)({
+            root: remotionRoot,
+            path: filePath,
+            req: request,
+            res: response,
+        });
+    }
+    if (url.pathname.startsWith(outputHashPrefix)) {
+        return output404(response);
+    }
     return handleFallback({
         remotionRoot,
-        hash,
+        hash: staticHash,
         response,
         getCurrentInputProps,
         getEnvVariables,