@remotion/cli 3.3.19 → 3.3.26

package/dist/config/log.d.ts

@@ -1,3 +1,3 @@
 import type { LogLevel } from '@remotion/renderer';
-export declare const getLogLevel: () => "error" | "verbose" | "info" | "warn";
+export declare const getLogLevel: () => "verbose" | "error" | "info" | "warn";
 export declare const setLogLevel: (newLogLevel: LogLevel) => void;

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

@@ -1,5 +1,5 @@
 import type { PropsWithChildren } from 'react';
 import React from 'react';
 export declare const InlineAction: React.FC<PropsWithChildren<{
-    onClick: React.MouseEventHandler<HTMLButtonElement> | undefined;
+    onClick: React.MouseEventHandler<HTMLAnchorElement> | undefined;
 }>>;

package/dist/editor/components/InlineAction.js

@@ -27,6 +27,8 @@ const InlineAction = ({ children, onClick }) => {
             opacity: hovered ? 1 : 0.6,
         };
     }, [hovered]);
-    return ((0, jsx_runtime_1.jsx)("button", { onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, type: "button", onClick: onClick, style: style, tabIndex: tabIndex, children: children }));
+    return (
+    // <div> because cannot use button inside a button
+    (0, jsx_runtime_1.jsx)("a", { onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, onClick: onClick, style: style, tabIndex: tabIndex, children: children }));
 };
 exports.InlineAction = InlineAction;

package/dist/editor/components/NewComposition/RemInput.d.ts

@@ -1,3 +1,5 @@
 import React from 'react';
+declare type Props = React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
 export declare const inputBaseStyle: React.CSSProperties;
-export declare const RemotionInput: (props: React.ClassAttributes<HTMLInputElement> & React.InputHTMLAttributes<HTMLInputElement> & React.RefAttributes<HTMLInputElement | null>) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;
+export declare const RemotionInput: React.ForwardRefExoticComponent<Pick<Props, "key" | keyof React.InputHTMLAttributes<HTMLInputElement>> & React.RefAttributes<HTMLInputElement>>;
+export {};

package/dist/editor/components/RenderModal/RenderModal.js

@@ -2,6 +2,8 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.RenderModal = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+// TODO: refactor such that importing from '@remotion/renderer/src/get-extension-from-codec' is no longer needed
+const get_extension_from_codec_1 = require("@remotion/renderer/src/get-extension-from-codec");
 const react_1 = require("react");
 const Button_1 = require("../../../preview-server/error-overlay/remotion-overlay/Button");
 const colors_1 = require("../../helpers/colors");
@@ -36,7 +38,14 @@ const reducer = (state, action) => {
     }
     return state;
 };
-const container = {};
+const container = {
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    padding: '12px 16px',
+    width: '100%',
+    borderBottom: '1px solid black',
+};
 const optionRow = {
     display: 'flex',
     flexDirection: 'row',
@@ -86,6 +95,9 @@ const RenderModal = ({ compositionId, initialFrame, initialImageFormat, initialQ
     const [state, dispatch] = (0, react_1.useReducer)(reducer, initialState);
     const [frame, setFrame] = (0, react_1.useState)(() => initialFrame);
     const [imageFormat, setImageFormat] = (0, react_1.useState)(() => initialImageFormat);
+    const [videoCodec, setVideoCodec] = (0, react_1.useState)('h264');
+    const [videoImageFormat, setVideoImageFormat] = (0, react_1.useState)('jpeg');
+    const [renderMode, setRenderMode] = (0, react_1.useState)('still');
     const [quality, setQuality] = (0, react_1.useState)(() => initialQuality !== null && initialQuality !== void 0 ? initialQuality : 80);
     const [scale, setScale] = (0, react_1.useState)(() => initialScale);
     const [verbose, setVerboseLogging] = (0, react_1.useState)(() => initialVerbose);
@@ -98,22 +110,24 @@ const RenderModal = ({ compositionId, initialFrame, initialImageFormat, initialQ
     const onValueChange = (0, react_1.useCallback)((e) => {
         setOutName(e.target.value);
     }, []);
-    const setPng = (0, react_1.useCallback)(() => {
-        setImageFormat('png');
+    const getStringBeforeSuffix = (0, react_1.useCallback)((fileName) => {
+        const dotPos = fileName.lastIndexOf('.');
+        const bitBeforeDot = fileName.substring(0, dotPos);
+        return bitBeforeDot;
+    }, []);
+    const setCodec = (0, react_1.useCallback)((codec) => {
+        setVideoCodec(codec);
         setOutName((prev) => {
-            if (prev.endsWith('.jpeg') || prev.endsWith('.jpg')) {
-                return prev.replace(/.jpe?g$/g, '.png');
-            }
-            return prev;
+            const codecSuffix = (0, get_extension_from_codec_1.getFileExtensionFromCodec)(codec, 'final');
+            const newFileName = getStringBeforeSuffix(prev) + '.' + codecSuffix;
+            return newFileName;
         });
     }, []);
-    const setJpeg = (0, react_1.useCallback)(() => {
-        setImageFormat('jpeg');
+    const setStillFormat = (0, react_1.useCallback)((format) => {
+        setImageFormat(format);
         setOutName((prev) => {
-            if (prev.endsWith('.png')) {
-                return prev.replace(/.png$/g, '.jpeg');
-            }
-            return prev;
+            const newFileName = getStringBeforeSuffix(prev) + '.' + format;
+            return newFileName;
         });
     }, []);
     const onClickStill = (0, react_1.useCallback)(() => {
@@ -154,12 +168,12 @@ const RenderModal = ({ compositionId, initialFrame, initialImageFormat, initialQ
         (0, actions_1.addVideoRenderJob)({
             compositionId,
             outName,
-            imageFormat,
+            imageFormat: videoImageFormat,
             quality: imageFormat === 'jpeg' ? quality : null,
             scale,
             verbose,
             // TODO: Make this configurable
-            codec: 'h264',
+            codec: videoCodec,
         })
             .then(() => {
             dispatchIfMounted({ type: 'succeed' });
@@ -177,6 +191,8 @@ const RenderModal = ({ compositionId, initialFrame, initialImageFormat, initialQ
         scale,
         setSelectedModal,
         verbose,
+        videoCodec,
+        videoImageFormat,
     ]);
     const onQualityChangedDirectly = (0, react_1.useCallback)((newQuality) => {
         setQuality(newQuality);
@@ -227,36 +243,88 @@ const RenderModal = ({ compositionId, initialFrame, initialImageFormat, initialQ
         return [
             {
                 label: 'PNG',
-                onClick: setPng,
+                onClick: renderMode === 'still'
+                    ? () => setStillFormat('png')
+                    : () => setVideoImageFormat('png'),
                 key: 'png',
-                selected: imageFormat === 'png',
+                selected: renderMode === 'still'
+                    ? imageFormat === 'png'
+                    : videoImageFormat === 'png',
             },
             {
                 label: 'JPEG',
-                onClick: setJpeg,
+                onClick: renderMode === 'still'
+                    ? () => setStillFormat('jpeg')
+                    : () => setVideoImageFormat('jpeg'),
                 key: 'jpeg',
-                selected: imageFormat === 'jpeg',
+                selected: renderMode === 'still'
+                    ? imageFormat === 'jpeg'
+                    : videoImageFormat === 'jpeg',
+            },
+        ];
+    }, [imageFormat, renderMode, setStillFormat, videoImageFormat]);
+    const videoCodecOptions = (0, react_1.useMemo)(() => {
+        const codecs = [
+            'h264',
+            'h265',
+            'vp8',
+            'vp9',
+            'mp3',
+            'aac',
+            'wav',
+            'prores',
+            'h264-mkv',
+            'gif',
+        ];
+        return codecs.map((codec) => {
+            return {
+                label: codec,
+                onClick: () => setCodec(codec),
+                key: codec,
+                selected: videoCodec === codec,
+            };
+        });
+    }, [setCodec, videoCodec]);
+    const renderTabOptions = (0, react_1.useMemo)(() => {
+        return [
+            {
+                label: 'Still',
+                onClick: () => {
+                    setRenderMode('still');
+                    setStillFormat(imageFormat);
+                },
+                key: 'still',
+                selected: renderMode === 'still',
+            },
+            {
+                label: 'Video',
+                onClick: () => {
+                    setRenderMode('video');
+                    setCodec(videoCodec);
+                },
+                key: 'video',
+                selected: renderMode === 'video',
             },
         ];
-    }, [imageFormat, setJpeg, setPng]);
+    }, [imageFormat, renderMode, setCodec, setStillFormat, videoCodec]);
     const onVerboseLoggingChanged = (0, react_1.useCallback)((e) => {
         setVerboseLogging(e.target.checked);
     }, []);
-    return ((0, jsx_runtime_1.jsxs)(ModalContainer_1.ModalContainer, { onOutsideClick: onQuit, onEscape: onQuit, children: [(0, jsx_runtime_1.jsx)(ModalHeader_1.NewCompHeader, { title: `Render ${compositionId}` }), (0, jsx_runtime_1.jsxs)("div", { style: container, children: [(0, jsx_runtime_1.jsx)(layout_1.Spacing, { block: true, y: 0.5 }), (0, jsx_runtime_1.jsxs)("div", { style: optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: label, children: "Format" }), (0, jsx_runtime_1.jsx)("div", { style: rightRow, children: (0, jsx_runtime_1.jsx)(SegmentedControl_1.SegmentedControl, { items: imageFormatOptions }) })] }), (0, jsx_runtime_1.jsxs)("div", { style: optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: label, children: "Output name" }), (0, jsx_runtime_1.jsx)("div", { style: rightRow, children: (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(RemInput_1.RemotionInput
+    return ((0, jsx_runtime_1.jsxs)(ModalContainer_1.ModalContainer, { onOutsideClick: onQuit, onEscape: onQuit, children: [(0, jsx_runtime_1.jsx)(ModalHeader_1.NewCompHeader, { title: `Render ${compositionId}` }), (0, jsx_runtime_1.jsx)("div", { style: container, children: (0, jsx_runtime_1.jsx)(SegmentedControl_1.SegmentedControl, { items: renderTabOptions }) }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(layout_1.Spacing, { block: true, y: 0.5 }), (0, jsx_runtime_1.jsxs)("div", { style: optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: label, children: renderMode === 'still' ? 'Format' : 'Codec' }), (0, jsx_runtime_1.jsx)("div", { style: rightRow, children: (0, jsx_runtime_1.jsx)(SegmentedControl_1.SegmentedControl, { items: renderMode === 'still' ? imageFormatOptions : videoCodecOptions }) })] }), (0, jsx_runtime_1.jsxs)("div", { style: optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: label, children: "Output name" }), (0, jsx_runtime_1.jsx)("div", { style: rightRow, children: (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(RemInput_1.RemotionInput
                                         // TODO: Validate and reject folders or weird file names
                                         , { 
                                             // TODO: Validate and reject folders or weird file names
-                                            warning: existence, style: input, type: "text", value: outName, onChange: onValueChange }), existence ? ((0, jsx_runtime_1.jsx)(ValidationMessage_1.ValidationMessage, { align: "flex-end", message: "Will be overwritten" })) : null] }) })] }), (0, jsx_runtime_1.jsxs)("div", { style: optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: label, children: "Frame" }), (0, jsx_runtime_1.jsxs)("div", { style: rightRow, children: [(0, jsx_runtime_1.jsx)(InputDragger_1.InputDragger
-                                    // TODO: Hide if it is a still
-                                    , { 
+                                            warning: existence, style: input, type: "text", value: outName, onChange: onValueChange }), existence ? ((0, jsx_runtime_1.jsx)(ValidationMessage_1.ValidationMessage, { align: "flex-end", message: "Will be overwritten" })) : null] }) })] }), (0, jsx_runtime_1.jsx)("div", { style: optionRow, children: renderMode === 'still' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { style: label, children: "Frame" }), (0, jsx_runtime_1.jsxs)("div", { style: rightRow, children: [(0, jsx_runtime_1.jsx)(InputDragger_1.InputDragger
                                         // TODO: Hide if it is a still
-                                        value: frame, onChange: onFrameChanged, 
-                                        // TODO: Actual frame
-                                        placeholder: "0-100", onValueChange: onFrameSetDirectly, name: "frame", step: 1, min: 0, 
-                                        // TODO: Add actual frame
-                                        max: Infinity }), ' '] })] }), (0, jsx_runtime_1.jsxs)(CollapsableOptions_1.CollapsableOptions, { showLabel: "Show advanced settings", hideLabel: "Hide advanced settings", children: [(0, jsx_runtime_1.jsxs)("div", { style: optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: label, children: "Scale" }), (0, jsx_runtime_1.jsx)("div", { style: rightRow, children: (0, jsx_runtime_1.jsx)(InputDragger_1.InputDragger, { value: scale, onChange: onScaleChanged, placeholder: "0.1-10", 
+                                        , { 
+                                            // TODO: Hide if it is a still
+                                            value: frame, onChange: onFrameChanged, 
+                                            // TODO: Actual frame
+                                            placeholder: "0-100", onValueChange: onFrameSetDirectly, name: "frame", step: 1, min: 0, 
+                                            // TODO: Add actual frame
+                                            max: Infinity }), ' '] })] })) }), (0, jsx_runtime_1.jsxs)(CollapsableOptions_1.CollapsableOptions, { showLabel: "Show advanced settings", hideLabel: "Hide advanced settings", children: [(0, jsx_runtime_1.jsxs)("div", { style: optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: label, children: "Scale" }), (0, jsx_runtime_1.jsx)("div", { style: rightRow, children: (0, jsx_runtime_1.jsx)(InputDragger_1.InputDragger, { value: scale, onChange: onScaleChanged, placeholder: "0.1-10", 
                                             // TODO: Does not allow non-integer steps
                                             // TODO: Cannot click and type in 0.2
-                                            onValueChange: onScaleSetDirectly, name: "scale", step: 0.05, min: MIN_SCALE, max: MAX_SCALE }) })] }), (0, jsx_runtime_1.jsxs)("div", { style: optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: label, children: "Verbose logging" }), (0, jsx_runtime_1.jsx)("div", { style: rightRow, children: (0, jsx_runtime_1.jsx)("input", { type: 'checkbox', checked: verbose, onChange: onVerboseLoggingChanged }) })] }), imageFormat === 'jpeg' && ((0, jsx_runtime_1.jsxs)("div", { style: optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: label, children: "JPEG Quality" }), (0, jsx_runtime_1.jsx)("div", { style: rightRow, children: (0, jsx_runtime_1.jsx)(InputDragger_1.InputDragger, { value: quality, onChange: onQualityChanged, placeholder: "0-100", onValueChange: onQualityChangedDirectly, name: "quality", step: 1, min: MIN_QUALITY, max: MAX_QUALITY }) })] }))] }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { block: true, y: 0.5 }), (0, jsx_runtime_1.jsxs)("div", { style: buttonRow, children: [(0, jsx_runtime_1.jsx)(Button_1.Button, { autoFocus: true, onClick: onClickVideo, disabled: state.type === 'load', children: state.type === 'idle' ? 'Render video' : 'Rendering...' }), (0, jsx_runtime_1.jsx)(Button_1.Button, { autoFocus: true, onClick: onClickStill, disabled: state.type === 'load', children: state.type === 'idle' ? 'Render' : 'Rendering...' })] })] })] }));
+                                            onValueChange: onScaleSetDirectly, name: "scale", step: 0.05, min: MIN_SCALE, max: MAX_SCALE }) })] }), (0, jsx_runtime_1.jsxs)("div", { style: optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: label, children: "Verbose logging" }), (0, jsx_runtime_1.jsx)("div", { style: rightRow, children: (0, jsx_runtime_1.jsx)("input", { type: 'checkbox', checked: verbose, onChange: onVerboseLoggingChanged }) })] }), renderMode === 'video' && ((0, jsx_runtime_1.jsxs)("div", { style: optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: label, children: "Image Format" }), (0, jsx_runtime_1.jsx)("div", { style: rightRow, children: (0, jsx_runtime_1.jsx)(SegmentedControl_1.SegmentedControl, { items: imageFormatOptions }) })] })), (imageFormat === 'jpeg' || videoImageFormat === 'jpeg') && ((0, jsx_runtime_1.jsxs)("div", { style: optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: label, children: "JPEG Quality" }), (0, jsx_runtime_1.jsx)("div", { style: rightRow, children: (0, jsx_runtime_1.jsx)(InputDragger_1.InputDragger, { value: quality, onChange: onQualityChanged, placeholder: "0-100", onValueChange: onQualityChangedDirectly, name: "quality", step: 1, min: MIN_QUALITY, max: MAX_QUALITY }) })] }))] }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { block: true, y: 0.5 }), (0, jsx_runtime_1.jsx)("div", { style: buttonRow, children: renderMode === 'still' ? ((0, jsx_runtime_1.jsx)(Button_1.Button, { autoFocus: true, onClick: onClickStill, disabled: state.type === 'load', children: state.type === 'idle' ? 'Render still' : 'Rendering...' })) : ((0, jsx_runtime_1.jsx)(Button_1.Button, { autoFocus: true, onClick: onClickVideo, disabled: state.type === 'load', children: state.type === 'idle' ? 'Render video' : 'Rendering...' })) })] })] }));
 };
 exports.RenderModal = RenderModal;

package/dist/editor/components/RenderQueue/actions.d.ts

@@ -20,11 +20,13 @@ export declare const addVideoRenderJob: ({ compositionId, outName, imageFormat,
     verbose: boolean;
     codec: Codec;
 }) => Promise<undefined>;
-export declare const unsubscribeFromFileExistenceWatcher: ({ file }: {
+export declare const unsubscribeFromFileExistenceWatcher: ({ file, clientId, }: {
     file: string;
+    clientId: string;
 }) => Promise<undefined>;
-export declare const subscribeToFileExistenceWatcher: ({ file, }: {
+export declare const subscribeToFileExistenceWatcher: ({ file, clientId, }: {
     file: string;
+    clientId: string;
 }) => Promise<boolean>;
 export declare const openInFileExplorer: ({ directory }: {
     directory: string;

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

@@ -51,12 +51,15 @@ const addVideoRenderJob = ({ compositionId, outName, imageFormat, quality, scale
     });
 };
 exports.addVideoRenderJob = addVideoRenderJob;
-const unsubscribeFromFileExistenceWatcher = ({ file }) => {
-    return (0, exports.callApi)('/api/unsubscribe-from-file-existence', { file });
+const unsubscribeFromFileExistenceWatcher = ({ file, clientId, }) => {
+    return (0, exports.callApi)('/api/unsubscribe-from-file-existence', { file, clientId });
 };
 exports.unsubscribeFromFileExistenceWatcher = unsubscribeFromFileExistenceWatcher;
-const subscribeToFileExistenceWatcher = async ({ file, }) => {
-    const { exists } = await (0, exports.callApi)('/api/subscribe-to-file-existence', { file });
+const subscribeToFileExistenceWatcher = async ({ file, clientId, }) => {
+    const { exists } = await (0, exports.callApi)('/api/subscribe-to-file-existence', {
+        file,
+        clientId,
+    });
     return exists;
 };
 exports.subscribeToFileExistenceWatcher = subscribeToFileExistenceWatcher;

package/dist/editor/helpers/client-id.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+declare type PreviewServerState = {
+    type: 'init';
+} | {
+    type: 'connected';
+    clientId: string;
+} | {
+    type: 'disconnected';
+};
+export declare const PreviewServerConnectionCtx: React.Context<PreviewServerState>;
+export declare const previewServerConnectionRef: React.RefObject<{
+    set: (jobs: PreviewServerState) => void;
+}>;
+export declare const PreviewServerConnection: React.FC<{
+    children: React.ReactNode;
+}>;
+export {};

package/dist/editor/helpers/client-id.js

@@ -0,0 +1,46 @@
+"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.PreviewServerConnection = exports.previewServerConnectionRef = exports.PreviewServerConnectionCtx = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importStar(require("react"));
+exports.PreviewServerConnectionCtx = react_1.default.createContext({
+    type: 'init',
+});
+exports.previewServerConnectionRef = (0, react_1.createRef)();
+const PreviewServerConnection = ({ children }) => {
+    const [state, setState] = react_1.default.useState({
+        type: 'init',
+    });
+    (0, react_1.useImperativeHandle)(exports.previewServerConnectionRef, () => {
+        return {
+            set: (newState) => {
+                setState(newState);
+            },
+        };
+    }, []);
+    return ((0, jsx_runtime_1.jsx)(exports.PreviewServerConnectionCtx.Provider, { value: state, children: children }));
+};
+exports.PreviewServerConnection = PreviewServerConnection;

package/dist/editor/helpers/use-file-existence.js

@@ -4,20 +4,29 @@ exports.useFileExistence = void 0;
 const react_1 = require("react");
 const event_source_1 = require("../../event-source");
 const actions_1 = require("../components/RenderQueue/actions");
+const client_id_1 = require("./client-id");
 const useFileExistence = (outName) => {
     const [exists, setExists] = (0, react_1.useState)(false);
+    const state = (0, react_1.useContext)(client_id_1.PreviewServerConnectionCtx);
+    const clientId = state.type === 'connected' ? state.clientId : undefined;
     const currentOutName = (0, react_1.useRef)('');
     currentOutName.current = outName;
     (0, react_1.useEffect)(() => {
-        (0, actions_1.subscribeToFileExistenceWatcher)({ file: outName }).then((_exists) => {
+        if (!clientId) {
+            return;
+        }
+        (0, actions_1.subscribeToFileExistenceWatcher)({
+            file: outName,
+            clientId,
+        }).then((_exists) => {
             if (currentOutName.current === outName) {
                 setExists(_exists);
             }
         });
         return () => {
-            (0, actions_1.unsubscribeFromFileExistenceWatcher)({ file: outName });
+            (0, actions_1.unsubscribeFromFileExistenceWatcher)({ file: outName, clientId });
         };
-    }, [outName]);
+    }, [clientId, outName]);
     (0, react_1.useEffect)(() => {
         const listener = (event) => {
             if (event.type !== 'watched-file-deleted') {

package/dist/event-source-events.d.ts

@@ -1,3 +1,4 @@
+import type { StaticFile } from 'remotion';
 export declare type EventSourceEvent = {
     type: 'new-input-props';
     newProps: object;
@@ -6,4 +7,7 @@ export declare type EventSourceEvent = {
 } | {
     type: 'new-env-variables';
     newEnvVariables: Record<string, string>;
+} | {
+    type: 'new-public-folder';
+    files: StaticFile[];
 };

package/dist/event-source.js

@@ -11,6 +11,9 @@ const openEventSource = () => {
             newEvent.type === 'new-env-variables') {
             window.location.reload();
         }
+        if (newEvent.type === 'new-public-folder') {
+            window.remotion_staticFiles = newEvent.files;
+        }
     });
     source.addEventListener('open', () => {
         var _a;

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

@@ -30,7 +30,7 @@ export declare const getCliOptions: (options: {
     browserExecutable: BrowserExecutable;
     ffmpegExecutable: import("@remotion/renderer").FfmpegExecutable;
     ffprobeExecutable: import("@remotion/renderer").FfmpegExecutable;
-    logLevel: "error" | "verbose" | "info" | "warn";
+    logLevel: "verbose" | "error" | "info" | "warn";
     scale: number;
     chromiumOptions: ChromiumOptions;
     overwrite: boolean;

package/dist/index.d.ts

@@ -88,7 +88,7 @@ export declare const CliInternals: {
         browserExecutable: import("@remotion/renderer").BrowserExecutable;
         ffmpegExecutable: import("@remotion/renderer").FfmpegExecutable;
         ffprobeExecutable: import("@remotion/renderer").FfmpegExecutable;
-        logLevel: "error" | "verbose" | "info" | "warn";
+        logLevel: "verbose" | "error" | "info" | "warn";
         scale: number;
         chromiumOptions: import("@remotion/renderer").ChromiumOptions;
         overwrite: boolean;
@@ -135,7 +135,7 @@ export declare const CliInternals: {
         source: string;
     };
     minimist: typeof minimist;
-    selectComposition: (validCompositions: import("remotion").TCompMetadata[]) => Promise<{
+    selectComposition: (validCompositions: import("remotion/.").TCompMetadata[]) => Promise<{
         compositionId: string;
         reason: string;
     }>;
@@ -145,5 +145,5 @@ export declare const CliInternals: {
         reason: string;
     };
     getImageFormat: (codec: import("@remotion/renderer").CodecOrUndefined) => "png" | "jpeg" | "none";
-    printCompositions: (compositions: import("remotion").TCompMetadata[]) => void;
+    printCompositions: (compositions: import("remotion/.").TCompMetadata[]) => void;
 };

package/dist/preview-server/file-existence-watchers.d.ts

@@ -1,10 +1,13 @@
-export declare const subscribeToFileExistenceWatchers: ({ file: relativeFile, remotionRoot, }: {
+export declare const subscribeToFileExistenceWatchers: ({ file: relativeFile, remotionRoot, clientId, }: {
     file: string;
     remotionRoot: string;
+    clientId: string;
 }) => {
     exists: boolean;
 };
-export declare const unsubscribeFromFileExistenceWatchers: ({ file, remotionRoot, }: {
+export declare const unsubscribeFromFileExistenceWatchers: ({ file, remotionRoot, clientId, }: {
     file: string;
     remotionRoot: string;
+    clientId: string;
 }) => void;
+export declare const unsubscribeClientFileExistenceWatchers: (clientId: string) => void;

package/dist/preview-server/file-existence-watchers.js

@@ -3,12 +3,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.unsubscribeFromFileExistenceWatchers = exports.subscribeToFileExistenceWatchers = void 0;
+exports.unsubscribeClientFileExistenceWatchers = exports.unsubscribeFromFileExistenceWatchers = exports.subscribeToFileExistenceWatchers = void 0;
 const path_1 = __importDefault(require("path"));
 const file_watcher_1 = require("../file-watcher");
 const live_events_1 = require("./live-events");
 const fileExistenceWatchers = {};
-const subscribeToFileExistenceWatchers = ({ file: relativeFile, remotionRoot, }) => {
+const subscribeToFileExistenceWatchers = ({ file: relativeFile, remotionRoot, clientId, }) => {
     const file = path_1.default.resolve(remotionRoot, relativeFile);
     const { unwatch, exists } = (0, file_watcher_1.installFileWatcher)({
         file,
@@ -33,14 +33,30 @@ const subscribeToFileExistenceWatchers = ({ file: relativeFile, remotionRoot, })
             }
         },
     });
-    fileExistenceWatchers[file] = unwatch;
+    if (!fileExistenceWatchers[clientId]) {
+        fileExistenceWatchers[clientId] = {};
+    }
+    fileExistenceWatchers[clientId][file] = unwatch;
     return { exists };
 };
 exports.subscribeToFileExistenceWatchers = subscribeToFileExistenceWatchers;
-const unsubscribeFromFileExistenceWatchers = ({ file, remotionRoot, }) => {
-    var _a;
+const unsubscribeFromFileExistenceWatchers = ({ file, remotionRoot, clientId, }) => {
+    var _a, _b;
     const actualPath = path_1.default.resolve(remotionRoot, file);
-    (_a = fileExistenceWatchers[actualPath]) === null || _a === void 0 ? void 0 : _a.call(fileExistenceWatchers);
-    delete fileExistenceWatchers[actualPath];
+    if (!fileExistenceWatchers[clientId]) {
+        return;
+    }
+    (_b = (_a = fileExistenceWatchers[clientId])[actualPath]) === null || _b === void 0 ? void 0 : _b.call(_a);
+    delete fileExistenceWatchers[clientId][actualPath];
 };
 exports.unsubscribeFromFileExistenceWatchers = unsubscribeFromFileExistenceWatchers;
+const unsubscribeClientFileExistenceWatchers = (clientId) => {
+    if (!fileExistenceWatchers[clientId]) {
+        return;
+    }
+    Object.values(fileExistenceWatchers[clientId]).forEach((unwatch) => {
+        unwatch();
+    });
+    delete fileExistenceWatchers[clientId];
+};
+exports.unsubscribeClientFileExistenceWatchers = unsubscribeClientFileExistenceWatchers;

package/dist/preview-server/public-folder.d.ts

@@ -1,12 +1,17 @@
 import type { StaticFile } from 'remotion';
-export declare const initPublicFolderWatch: ({ publicDir, remotionRoot, onUpdate, }: {
+export declare const initPublicFolderWatch: ({ publicDir, onUpdate, staticHash, }: {
     publicDir: string;
     remotionRoot: string;
     onUpdate: () => void;
+    staticHash: string;
 }) => void;
-export declare const watchPublicFolder: ({ publicDir, remotionRoot, onUpdate, }: {
+export declare const fetchFolder: ({ publicDir, staticHash, }: {
+    publicDir: string;
+    staticHash: string;
+}) => void;
+export declare const watchPublicFolder: ({ publicDir, onUpdate, staticHash, }: {
     publicDir: string;
-    remotionRoot: string;
     onUpdate: () => void;
+    staticHash: string;
 }) => void;
 export declare const getFiles: () => StaticFile[];

package/dist/preview-server/public-folder.js

@@ -3,32 +3,33 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getFiles = exports.watchPublicFolder = exports.initPublicFolderWatch = void 0;
+exports.getFiles = exports.watchPublicFolder = exports.fetchFolder = exports.initPublicFolderWatch = void 0;
 const bundler_1 = require("@remotion/bundler");
 const fs_1 = require("fs");
 const path_1 = __importDefault(require("path"));
-const write_files_definition_file_1 = require("./write-files-definition-file");
 let files = [];
-const initPublicFolderWatch = ({ publicDir, remotionRoot, onUpdate, }) => {
-    fetchFolder({ publicDir, remotionRoot });
-    (0, exports.watchPublicFolder)({ publicDir, remotionRoot, onUpdate });
+const initPublicFolderWatch = ({ publicDir, onUpdate, staticHash, }) => {
+    (0, exports.fetchFolder)({ publicDir, staticHash });
+    (0, exports.watchPublicFolder)({ publicDir, onUpdate, staticHash });
 };
 exports.initPublicFolderWatch = initPublicFolderWatch;
-const fetchFolder = ({ publicDir, remotionRoot, }) => {
+const fetchFolder = ({ publicDir, staticHash, }) => {
     files = bundler_1.BundlerInternals.readRecursively({
         folder: '.',
         startPath: publicDir,
+        staticHash,
+        limit: 1000,
     }).map((f) => {
         return {
             ...f,
-            path: f.path.split(path_1.default.sep).join('/'),
+            name: f.name.split(path_1.default.sep).join('/'),
         };
     });
-    (0, write_files_definition_file_1.writeFilesDefinitionFile)(files, remotionRoot);
 };
-const watchPublicFolder = ({ publicDir, remotionRoot, onUpdate, }) => {
+exports.fetchFolder = fetchFolder;
+const watchPublicFolder = ({ publicDir, onUpdate, staticHash, }) => {
     (0, fs_1.watch)(publicDir, { recursive: true }, () => {
-        fetchFolder({ publicDir, remotionRoot });
+        (0, exports.fetchFolder)({ publicDir, staticHash });
         onUpdate();
     });
 };

package/dist/preview-server/render-queue/job.d.ts

@@ -69,11 +69,13 @@ export declare type OpenInFileExplorerRequest = {
 };
 export declare type SubscribeToFileExistenceRequest = {
     file: string;
+    clientId: string;
 };
 export declare type SubscribeToFileExistenceResponse = {
     exists: boolean;
 };
 export declare type UnsubscribeFromFileExistenceRequest = {
     file: string;
+    clientId: string;
 };
 export {};

package/dist/preview-server/render-queue/process-still.d.ts

@@ -1,7 +1,8 @@
 import type { JobProgressCallback, RenderJob } from './job';
-export declare const processStill: ({ job, remotionRoot, entryPoint, onProgress, }: {
+export declare const processStill: ({ job, remotionRoot, entryPoint, onProgress, addCleanupCallback, }: {
     job: RenderJob;
     remotionRoot: string;
     entryPoint: string;
     onProgress: JobProgressCallback;
+    addCleanupCallback: (cb: () => Promise<void>) => void;
 }) => Promise<void>;

package/dist/preview-server/render-queue/process-still.js

@@ -4,7 +4,7 @@ exports.processStill = void 0;
 const convert_entry_point_to_serve_url_1 = require("../../convert-entry-point-to-serve-url");
 const get_cli_options_1 = require("../../get-cli-options");
 const still_1 = require("../../render-flows/still");
-const processStill = async ({ job, remotionRoot, entryPoint, onProgress, }) => {
+const processStill = async ({ job, remotionRoot, entryPoint, onProgress, addCleanupCallback, }) => {
     var _a;
     if (job.type !== 'still') {
         throw new Error('Expected still job');
@@ -42,6 +42,7 @@ const processStill = async ({ job, remotionRoot, entryPoint, onProgress, }) => {
         logLevel: job.verbose ? 'verbose' : 'info',
         onProgress,
         indentOutput: true,
+        addCleanupCallback,
     });
     // TODO: Allow cancel signal
     // TODO: Accept CLI options

package/dist/preview-server/render-queue/process-video.d.ts

@@ -1,7 +1,8 @@
 import type { JobProgressCallback, RenderJob } from './job';
-export declare const processVideoJob: ({ job, remotionRoot, entryPoint, onProgress, }: {
+export declare const processVideoJob: ({ job, remotionRoot, entryPoint, onProgress, addCleanupCallback, }: {
     job: RenderJob;
     remotionRoot: string;
     entryPoint: string;
     onProgress: JobProgressCallback;
+    addCleanupCallback: (cb: () => Promise<void>) => void;
 }) => Promise<void>;