@remotion/cli 4.0.43 → 4.0.45

package/dist/editor/helpers/create-folder-tree.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.createFolderTree = exports.splitParentIntoNameAndParent = exports.buildAssetFolderStructure = void 0;
 const persist_open_folders_1 = require("./persist-open-folders");
-const buildAssetFolderStructure = (files) => {
+const buildAssetFolderStructure = (files, parentFolderName, foldersExpanded) => {
     const notInFolder = files.filter((f) => !f.name.includes('/'));
     const inFolder = files.filter((f) => f.name.includes('/'));
     const groupedByFolder = {};
@@ -16,6 +16,7 @@ const buildAssetFolderStructure = (files) => {
     return {
         files: notInFolder,
         folders: Object.keys(groupedByFolder).map((folderName) => {
+            var _a;
             const filesInFolder = groupedByFolder[folderName];
             const filesWithoutFolderName = filesInFolder.map((f) => {
                 return {
@@ -23,10 +24,12 @@ const buildAssetFolderStructure = (files) => {
                     name: f.name.substring(folderName.length + 1),
                 };
             });
+            const key = [parentFolderName, folderName].filter(Boolean).join('/');
+            const isExpanded = (_a = foldersExpanded[key]) !== null && _a !== void 0 ? _a : false;
             return {
                 name: folderName,
-                items: (0, exports.buildAssetFolderStructure)(filesWithoutFolderName),
-                expanded: false,
+                items: (0, exports.buildAssetFolderStructure)(filesWithoutFolderName, [parentFolderName, folderName].filter(Boolean).join('/'), foldersExpanded),
+                expanded: isExpanded,
             };
         }),
     };

package/dist/editor/helpers/document-title.d.ts

@@ -1,4 +1,4 @@
 import type { RenderJob } from '../../preview-server/render-queue/job';
-export declare const setCurrentVideoId: (id: string | null) => void;
+export declare const setCurrentCanvasContentId: (id: string | null) => void;
 export declare const setUnsavedProps: (unsaved: boolean) => void;
 export declare const setRenderJobs: (jobs: RenderJob[]) => void;

package/dist/editor/helpers/document-title.js

@@ -1,16 +1,22 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.setRenderJobs = exports.setUnsavedProps = exports.setCurrentVideoId = void 0;
+exports.setRenderJobs = exports.setUnsavedProps = exports.setCurrentCanvasContentId = void 0;
 const truthy_1 = require("../../truthy");
-let currentVideoId = null;
+let currentItemName = null;
 let unsavedProps = false;
 let tabInactive = false;
 let renderJobs = [];
-const setCurrentVideoId = (id) => {
-    currentVideoId = id;
+const setCurrentCanvasContentId = (id) => {
+    if (!id) {
+        currentItemName = id;
+        updateTitle();
+        return;
+    }
+    const idWithoutFolder = id.split('/').pop();
+    currentItemName = idWithoutFolder;
     updateTitle();
 };
-exports.setCurrentVideoId = setCurrentVideoId;
+exports.setCurrentCanvasContentId = setCurrentCanvasContentId;
 const setUnsavedProps = (unsaved) => {
     window.remotion_unsavedProps = unsaved;
     unsavedProps = unsaved;
@@ -28,13 +34,13 @@ document.addEventListener('visibilitychange', () => {
 const productName = 'Remotion Studio';
 const suffix = `- ${productName}`;
 const updateTitle = () => {
-    if (!currentVideoId) {
+    if (!currentItemName) {
         document.title = productName;
         return;
     }
-    const currentCompTitle = `${currentVideoId} / ${window.remotion_projectName}`;
+    const currentCompTitle = `${currentItemName} / ${window.remotion_projectName}`;
     document.title = [
-        getProgressInBrackets(currentVideoId, renderJobs),
+        getProgressInBrackets(currentItemName, renderJobs),
         unsavedProps && tabInactive ? '✏️' : null,
         `${currentCompTitle} ${suffix}`,
     ]

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

@@ -1,5 +1,6 @@
-export declare const useIsStill: () => boolean;
-export declare const useDimensions: () => {
+export type Dimensions = {
     width: number;
     height: number;
-} | null;
+};
+export declare const useIsStill: () => boolean;
+export declare const useIsVideoComposition: () => boolean;

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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useDimensions = 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");
@@ -12,16 +12,15 @@ const useIsStill = () => {
     return (0, is_composition_still_1.isCompositionStill)(resolved.result);
 };
 exports.useIsStill = useIsStill;
-const useDimensions = () => {
-    const config = remotion_1.Internals.useUnsafeVideoConfig();
-    return (0, react_1.useMemo)(() => {
-        if (!config) {
-            return null;
-        }
-        return {
-            width: config.width,
-            height: config.height,
-        };
-    }, [config]);
+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.useDimensions = useDimensions;
+exports.useIsVideoComposition = useIsVideoComposition;

package/dist/editor/helpers/persist-open-folders.d.ts

@@ -1,4 +1,6 @@
 export declare const openFolderKey: (folderName: string, parentName: string | null) => string;
 export type ExpandedFoldersState = Record<string, boolean>;
-export declare const persistExpandedFolders: (state: ExpandedFoldersState) => void;
-export declare const loadExpandedFolders: () => ExpandedFoldersState;
+type PersistanceType = 'assets' | 'compositions';
+export declare const persistExpandedFolders: (type: PersistanceType, state: ExpandedFoldersState) => void;
+export declare const loadExpandedFolders: (type: PersistanceType) => ExpandedFoldersState;
+export {};

package/dist/editor/helpers/persist-open-folders.js

@@ -5,13 +5,15 @@ const openFolderKey = (folderName, parentName) => {
     return [parentName !== null && parentName !== void 0 ? parentName : 'no-parent', folderName].join('/');
 };
 exports.openFolderKey = openFolderKey;
-const localStorageKey = 'remotion.expandedFolders';
-const persistExpandedFolders = (state) => {
-    window.localStorage.setItem(localStorageKey, JSON.stringify(state));
+const localStorageKey = (type) => type === 'compositions'
+    ? 'remotion.expandedFolders'
+    : 'remotion.expandedAssetFolders';
+const persistExpandedFolders = (type, state) => {
+    window.localStorage.setItem(localStorageKey(type), JSON.stringify(state));
 };
 exports.persistExpandedFolders = persistExpandedFolders;
-const loadExpandedFolders = () => {
-    const item = window.localStorage.getItem(localStorageKey);
+const loadExpandedFolders = (type) => {
+    const item = window.localStorage.getItem(localStorageKey(type));
     if (item === null) {
         return {};
     }

package/dist/editor/state/folders.d.ts

@@ -1,8 +1,10 @@
 import React from 'react';
 import type { ExpandedFoldersState } from '../helpers/persist-open-folders';
 type TFolderContext = {
-    foldersExpanded: ExpandedFoldersState;
-    setFoldersExpanded: React.Dispatch<React.SetStateAction<ExpandedFoldersState>>;
+    compositionFoldersExpanded: ExpandedFoldersState;
+    setCompositionFoldersExpanded: React.Dispatch<React.SetStateAction<ExpandedFoldersState>>;
+    assetFoldersExpanded: ExpandedFoldersState;
+    setAssetFoldersExpanded: React.Dispatch<React.SetStateAction<ExpandedFoldersState>>;
 };
 export declare const FolderContext: React.Context<TFolderContext>;
 export declare const FolderContextProvider: React.FC<{

package/dist/editor/state/folders.js

@@ -5,19 +5,26 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const persist_open_folders_1 = require("../helpers/persist-open-folders");
 exports.FolderContext = (0, react_1.createContext)({
-    foldersExpanded: {},
-    setFoldersExpanded: () => {
+    compositionFoldersExpanded: {},
+    setCompositionFoldersExpanded: () => {
+        throw new Error('default state');
+    },
+    assetFoldersExpanded: {},
+    setAssetFoldersExpanded: () => {
         throw new Error('default state');
     },
 });
 const FolderContextProvider = ({ children }) => {
-    const [foldersExpanded, setFoldersExpanded] = (0, react_1.useState)((0, persist_open_folders_1.loadExpandedFolders)());
+    const [compositionFoldersExpanded, setCompositionFoldersExpanded] = (0, react_1.useState)(() => (0, persist_open_folders_1.loadExpandedFolders)('compositions'));
+    const [assetFoldersExpanded, setAssetFoldersExpanded] = (0, react_1.useState)(() => (0, persist_open_folders_1.loadExpandedFolders)('assets'));
     const value = (0, react_1.useMemo)(() => {
         return {
-            foldersExpanded,
-            setFoldersExpanded,
+            compositionFoldersExpanded,
+            setCompositionFoldersExpanded,
+            assetFoldersExpanded,
+            setAssetFoldersExpanded,
         };
-    }, [foldersExpanded]);
+    }, [assetFoldersExpanded, compositionFoldersExpanded]);
     return ((0, jsx_runtime_1.jsx)(exports.FolderContext.Provider, { value: value, children: children }));
 };
 exports.FolderContextProvider = FolderContextProvider;

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: "light" | "4444-xq" | "4444" | "hq" | "standard" | "proxy" | undefined;
+    proResProfile: "4444-xq" | "4444" | "hq" | "standard" | "light" | "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: "error" | "verbose" | "info" | "warn";
+    logLevel: "verbose" | "info" | "warn" | "error";
     scale: number;
     chromiumOptions: ChromiumOptions;
     overwrite: boolean;

package/dist/index.d.ts

@@ -63,24 +63,24 @@ export declare const CliInternals: {
         verbose: (message?: any, ...optionalParams: any[]) => void;
         verboseAdvanced: (options: {
             indent: boolean;
-            logLevel: "error" | "verbose" | "info" | "warn";
+            logLevel: "verbose" | "info" | "warn" | "error";
         } & {
             tag?: string | undefined;
         }, message?: any, ...optionalParams: any[]) => void;
         info: (message?: any, ...optionalParams: any[]) => void;
         infoAdvanced: (options: {
             indent: boolean;
-            logLevel: "error" | "verbose" | "info" | "warn";
+            logLevel: "verbose" | "info" | "warn" | "error";
         }, message?: any, ...optionalParams: any[]) => void;
         warn: (message?: any, ...optionalParams: any[]) => void;
         warnAdvanced: (options: {
             indent: boolean;
-            logLevel: "error" | "verbose" | "info" | "warn";
+            logLevel: "verbose" | "info" | "warn" | "error";
         }, message?: any, ...optionalParams: any[]) => void;
         error: (message?: any, ...optionalParams: any[]) => void;
         errorAdvanced: (options: {
             indent: boolean;
-            logLevel: "error" | "verbose" | "info" | "warn";
+            logLevel: "verbose" | "info" | "warn" | "error";
         } & {
             tag?: string | undefined;
         }, message?: any, ...optionalParams: any[]) => void;
@@ -100,13 +100,13 @@ export declare const CliInternals: {
         browser: "chrome";
         crf: import("@remotion/renderer").Crf | null;
         pixelFormat: "yuv420p" | "yuva420p" | "yuv422p" | "yuv444p" | "yuv420p10le" | "yuv422p10le" | "yuv444p10le" | "yuva444p10le";
-        proResProfile: "light" | "4444-xq" | "4444" | "hq" | "standard" | "proxy" | undefined;
+        proResProfile: "4444-xq" | "4444" | "hq" | "standard" | "light" | "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: import("@remotion/renderer").BrowserExecutable;
-        logLevel: "error" | "verbose" | "info" | "warn";
+        logLevel: "verbose" | "info" | "warn" | "error";
         scale: number;
         chromiumOptions: import("@remotion/renderer").ChromiumOptions;
         overwrite: boolean;
@@ -132,7 +132,7 @@ export declare const CliInternals: {
         "browser-executable": import("@remotion/renderer").BrowserExecutable;
         "pixel-format": "yuv420p" | "yuva420p" | "yuv422p" | "yuv444p" | "yuv420p10le" | "yuv422p10le" | "yuv444p10le" | "yuva444p10le";
         "image-format": "none" | "png" | "jpeg" | "pdf" | "webp";
-        "prores-profile": "light" | "4444-xq" | "4444" | "hq" | "standard" | "proxy";
+        "prores-profile": "4444-xq" | "4444" | "hq" | "standard" | "light" | "proxy";
         "x264-preset": "medium" | "ultrafast" | "superfast" | "veryfast" | "faster" | "fast" | "slow" | "slower" | "veryslow" | "placebo";
         "bundle-cache": string;
         "env-file": string;
@@ -190,7 +190,7 @@ export declare const CliInternals: {
     } & {
         _: string[];
     };
-    printError: (err: Error, logLevel: "error" | "verbose" | "info" | "warn") => Promise<void>;
+    printError: (err: Error, logLevel: "verbose" | "info" | "warn" | "error") => Promise<void>;
     formatBytes: (number: number, options?: Intl.NumberFormatOptions & {
         locale: string;
         bits?: boolean | undefined;
@@ -232,7 +232,7 @@ export declare const CliInternals: {
     };
     listOfRemotionPackages: string[];
     shouldUseNonOverlayingLogger: ({ logLevel, }: {
-        logLevel: "error" | "verbose" | "info" | "warn";
+        logLevel: "verbose" | "info" | "warn" | "error";
     }) => boolean;
     getCompositionWithDimensionOverride: ({ height, width, args, compositionIdFromUi, chromiumOptions, envVariables, port, puppeteerInstance, timeoutInMilliseconds, browserExecutable, serveUrlOrWebpackUrl, indent, serializedInputPropsWithCustomSchema, logLevel, server, offthreadVideoCacheSizeInBytes, }: {
         height: number | null;
@@ -247,7 +247,7 @@ export declare const CliInternals: {
         browserExecutable: import("@remotion/renderer").BrowserExecutable;
         serveUrlOrWebpackUrl: string;
         indent: boolean;
-        logLevel: "error" | "verbose" | "info" | "warn";
+        logLevel: "verbose" | "info" | "warn" | "error";
         serializedInputPropsWithCustomSchema: string;
         server: import("@remotion/renderer").RemotionServer;
         offthreadVideoCacheSizeInBytes: number | null;

package/dist/log.d.ts

@@ -2,24 +2,24 @@ export declare const Log: {
     verbose: (message?: any, ...optionalParams: any[]) => void;
     verboseAdvanced: (options: {
         indent: boolean;
-        logLevel: "error" | "verbose" | "info" | "warn";
+        logLevel: "verbose" | "info" | "warn" | "error";
     } & {
         tag?: string | undefined;
     }, message?: any, ...optionalParams: any[]) => void;
     info: (message?: any, ...optionalParams: any[]) => void;
     infoAdvanced: (options: {
         indent: boolean;
-        logLevel: "error" | "verbose" | "info" | "warn";
+        logLevel: "verbose" | "info" | "warn" | "error";
     }, message?: any, ...optionalParams: any[]) => void;
     warn: (message?: any, ...optionalParams: any[]) => void;
     warnAdvanced: (options: {
         indent: boolean;
-        logLevel: "error" | "verbose" | "info" | "warn";
+        logLevel: "verbose" | "info" | "warn" | "error";
     }, message?: any, ...optionalParams: any[]) => void;
     error: (message?: any, ...optionalParams: any[]) => void;
     errorAdvanced: (options: {
         indent: boolean;
-        logLevel: "error" | "verbose" | "info" | "warn";
+        logLevel: "verbose" | "info" | "warn" | "error";
     } & {
         tag?: string | undefined;
     }, message?: any, ...optionalParams: any[]) => void;

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,

package/dist/preview-server/serve-static.d.ts

@@ -6,4 +6,9 @@
  * MIT Licensed
  */
 import type { IncomingMessage, ServerResponse } from 'node:http';
-export declare const serveStatic: (root: string, hash: string, req: IncomingMessage, res: ServerResponse) => Promise<void>;
+export declare const serveStatic: ({ root, path, req, res, }: {
+    root: string;
+    path: string;
+    req: IncomingMessage;
+    res: ServerResponse;
+}) => Promise<void>;

package/dist/preview-server/serve-static.js

@@ -10,10 +10,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.serveStatic = void 0;
 const renderer_1 = require("@remotion/renderer");
 const node_fs_1 = require("node:fs");
-const node_path_1 = require("node:path");
 const middleware_1 = require("./dev-middleware/middleware");
 const range_parser_1 = require("./dev-middleware/range-parser");
-const serveStatic = async function (root, hash, req, res) {
+const serveStatic = async function ({ root, path, req, res, }) {
     if (req.method !== 'GET' && req.method !== 'HEAD') {
         // method not allowed
         res.statusCode = 405;
@@ -22,8 +21,6 @@ const serveStatic = async function (root, hash, req, res) {
         res.end();
         return;
     }
-    const filename = new URL(req.url, 'http://localhost').pathname.replace(new RegExp(`^${hash}`), '');
-    const path = (0, node_path_1.join)(root, decodeURIComponent(filename));
     if (!renderer_1.RenderInternals.isPathInside(path, root)) {
         res.writeHead(500);
         res.write('Not allowed to read');

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

@@ -13,8 +13,10 @@ export declare const startServer: (options: {
     publicDir: string;
     userPassedPublicDir: string | null;
     poll: number | null;
-    hash: string;
-    hashPrefix: string;
+    staticHash: string;
+    staticHashPrefix: string;
+    outputHash: string;
+    outputHashPrefix: string;
 }) => Promise<{
     port: number;
     liveEventsServer: LiveEventsServer;

package/dist/preview-server/start-server.js

@@ -50,8 +50,10 @@ const startServer = async (options) => {
         })
             .then(() => {
             (0, routes_1.handleRoutes)({
-                hash: options.hash,
-                hashPrefix: options.hashPrefix,
+                staticHash: options.staticHash,
+                staticHashPrefix: options.staticHashPrefix,
+                outputHash: options.outputHash,
+                outputHashPrefix: options.outputHashPrefix,
                 request: request,
                 response,
                 liveEventsServer,

package/dist/studio.js

@@ -86,8 +86,11 @@ const studioCommand = async (remotionRoot, args) => {
         userPassedPublicDir: config_1.ConfigInternals.getPublicDir(),
         remotionRoot,
     });
-    const hashPrefix = '/static-';
-    const staticHash = `${hashPrefix}${node_crypto_1.default.randomBytes(6).toString('hex')}`;
+    const hash = node_crypto_1.default.randomBytes(6).toString('hex');
+    const outputHashPrefix = '/outputs-';
+    const outputHash = `${outputHashPrefix}${hash}`;
+    const staticHashPrefix = '/static-';
+    const staticHash = `${staticHashPrefix}${hash}`;
     (0, public_folder_1.initPublicFolderWatch)({
         publicDir,
         remotionRoot,
@@ -121,8 +124,10 @@ const studioCommand = async (remotionRoot, args) => {
         webpackOverride: config_1.ConfigInternals.getWebpackOverrideFn(),
         poll: config_1.ConfigInternals.getWebpackPolling(),
         userPassedPublicDir: config_1.ConfigInternals.getPublicDir(),
-        hash: staticHash,
-        hashPrefix,
+        staticHash,
+        staticHashPrefix,
+        outputHash,
+        outputHashPrefix,
     });
     (0, live_events_1.setLiveEventsListener)(liveEventsServer);
     const networkAddress = (0, get_network_address_1.getNetworkAddress)();