@remotion/cli 4.0.20 → 4.0.21

package/dist/config/image-format.d.ts

@@ -2,4 +2,4 @@ import type { StillImageFormat, VideoImageFormat } from '@remotion/renderer';
 export declare const setStillImageFormat: (format: StillImageFormat) => void;
 export declare const setVideoImageFormat: (format: VideoImageFormat) => void;
 export declare const getUserPreferredStillImageFormat: () => "png" | "jpeg" | "pdf" | "webp" | undefined;
-export declare const getUserPreferredVideoImageFormat: () => "none" | "png" | "jpeg" | undefined;
+export declare const getUserPreferredVideoImageFormat: () => "png" | "jpeg" | "none" | undefined;

package/dist/config/index.d.ts

@@ -297,7 +297,7 @@ export declare const ConfigInternals: {
     getShouldOutputImageSequence: (frameRange: FrameRange | null) => boolean;
     getDotEnvLocation: () => string | null;
     getUserPreferredStillImageFormat: () => "png" | "jpeg" | "pdf" | "webp" | undefined;
-    getUserPreferredVideoImageFormat: () => "none" | "png" | "jpeg" | undefined;
+    getUserPreferredVideoImageFormat: () => "png" | "jpeg" | "none" | undefined;
     getWebpackOverrideFn: () => WebpackOverrideFn;
     getWebpackCaching: () => boolean;
     getOutputLocation: () => string | null;

package/dist/config/log.d.ts

@@ -1 +1 @@
-export declare const getLogLevel: () => "error" | "verbose" | "info" | "warn", setLogLevel: (newLogLevel: "error" | "verbose" | "info" | "warn") => void;
+export declare const getLogLevel: () => "verbose" | "info" | "warn" | "error", setLogLevel: (newLogLevel: "verbose" | "info" | "warn" | "error") => void;

package/dist/editor/components/AssetSelectorItem.js

@@ -108,7 +108,7 @@ const FolderTree = ({ item, level, name, parentFolder, tabIndex }) => {
     return ((0, jsx_runtime_1.jsxs)("div", { children: [item.folders.map((folder) => {
                 return ((0, jsx_runtime_1.jsx)(exports.AssetFolderItem, { item: folder, tabIndex: tabIndex, level: level + 1, parentFolder: combinedParents }, folder.name));
             }), item.files.map((file) => {
-                return ((0, jsx_runtime_1.jsx)(exports.AssetSelectorItem, { item: file, tabIndex: tabIndex, level: level + 1, parentFolder: combinedParents }, file.src));
+                return ((0, jsx_runtime_1.jsx)(exports.AssetSelectorItem, { item: file, tabIndex: tabIndex, level: level, parentFolder: combinedParents }, file.src));
             })] }));
 };
 exports.FolderTree = FolderTree;

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

@@ -1,3 +1,6 @@
 import React from 'react';
 export declare const getKeysToExpand: (initialFolderName: string, parentFolderName: string | null, initial?: string[]) => string[];
+export declare const compositionSelectorRef: React.RefObject<{
+    expandComposition: (compName: string) => void;
+}>;
 export declare const CompositionSelector: React.FC;

package/dist/editor/components/CompositionSelector.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.CompositionSelector = exports.getKeysToExpand = void 0;
+exports.CompositionSelector = exports.compositionSelectorRef = exports.getKeysToExpand = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
@@ -31,6 +31,7 @@ const getKeysToExpand = (initialFolderName, parentFolderName, initial = []) => {
     return (0, exports.getKeysToExpand)(name, parent, initial);
 };
 exports.getKeysToExpand = getKeysToExpand;
+exports.compositionSelectorRef = (0, react_1.createRef)();
 const CompositionSelector = () => {
     const { compositions, currentComposition, folders } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     const [foldersExpanded, setFoldersExpanded] = (0, react_1.useState)((0, persist_open_folders_1.loadExpandedFolders)());
@@ -49,6 +50,43 @@ const CompositionSelector = () => {
             return foldersExpandedState;
         });
     }, []);
+    (0, react_1.useImperativeHandle)(exports.compositionSelectorRef, () => {
+        return {
+            expandComposition: (compName) => {
+                const compositionToExpand = compositions.find((c) => c.id === compName);
+                if (!compositionToExpand) {
+                    return;
+                }
+                const { folderName, parentFolderName } = compositionToExpand;
+                if (folderName === null) {
+                    return;
+                }
+                setFoldersExpanded((previousState) => {
+                    var _a, _b, _c;
+                    const foldersExpandedState = {
+                        ...previousState,
+                    };
+                    let currentFolder = folderName;
+                    let currentParentName = parentFolderName;
+                    while (currentFolder) {
+                        if (currentParentName === null || currentParentName === void 0 ? void 0 : currentParentName.includes('/')) {
+                            const splittedParentName = currentParentName.split('/');
+                            currentParentName = (_a = splittedParentName.pop()) !== null && _a !== void 0 ? _a : null;
+                        }
+                        const key = (0, persist_open_folders_1.openFolderKey)(currentFolder, currentParentName);
+                        foldersExpandedState[key] = true;
+                        const parentFolder = folders.find((f) => {
+                            return f.name === currentParentName && currentParentName;
+                        });
+                        currentFolder = (_b = parentFolder === null || parentFolder === void 0 ? void 0 : parentFolder.name) !== null && _b !== void 0 ? _b : null;
+                        currentParentName = (_c = parentFolder === null || parentFolder === void 0 ? void 0 : parentFolder.parent) !== null && _c !== void 0 ? _c : null;
+                    }
+                    (0, persist_open_folders_1.persistExpandedFolders)(foldersExpandedState);
+                    return foldersExpandedState;
+                });
+            },
+        };
+    }, [compositions, folders]);
     const items = (0, react_1.useMemo)(() => {
         return (0, create_folder_tree_1.createFolderTree)(compositions, folders, foldersExpanded);
     }, [compositions, folders, foldersExpanded]);

package/dist/editor/components/CompositionSelectorItem.js

@@ -91,6 +91,6 @@ const CompositionSelectorItem = ({ item, level, currentComposition, tabIndex, se
                     })
                     : null] }));
     }
-    return ((0, jsx_runtime_1.jsx)(layout_1.Row, { align: "center", children: (0, jsx_runtime_1.jsxs)("button", { style: style, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, tabIndex: tabIndex, onClick: onClick, type: "button", title: item.composition.id, children: [(0, is_composition_still_1.isCompositionStill)(item.composition) ? ((0, jsx_runtime_1.jsx)(still_1.StillIcon, { color: hovered || selected ? 'white' : colors_1.LIGHT_TEXT, style: iconStyle })) : ((0, jsx_runtime_1.jsx)(video_1.FilmIcon, { color: hovered || selected ? 'white' : colors_1.LIGHT_TEXT, style: iconStyle })), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), (0, jsx_runtime_1.jsx)("div", { style: label, children: item.composition.id }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.5 }), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(SidebarRenderButton_1.SidebarRenderButton, { visible: hovered, composition: item.composition }) })] }) }));
+    return ((0, jsx_runtime_1.jsx)(layout_1.Row, { align: "center", children: (0, jsx_runtime_1.jsxs)("button", { style: style, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, tabIndex: tabIndex, onClick: onClick, type: "button", title: item.composition.id, className: "__remotion-composition", "data-compname": item.composition.id, children: [(0, is_composition_still_1.isCompositionStill)(item.composition) ? ((0, jsx_runtime_1.jsx)(still_1.StillIcon, { color: hovered || selected ? 'white' : colors_1.LIGHT_TEXT, style: iconStyle })) : ((0, jsx_runtime_1.jsx)(video_1.FilmIcon, { color: hovered || selected ? 'white' : colors_1.LIGHT_TEXT, style: iconStyle })), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), (0, jsx_runtime_1.jsx)("div", { style: label, children: item.composition.id }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.5 }), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(SidebarRenderButton_1.SidebarRenderButton, { visible: hovered, composition: item.composition }) })] }) }));
 };
 exports.CompositionSelectorItem = CompositionSelectorItem;

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

@@ -12,6 +12,6 @@ export declare const getInputBorderColor: ({ status, isFocused, isHovered, }: {
     status: 'error' | 'warning' | 'ok';
     isFocused: boolean;
     isHovered: boolean;
-}) => "#ff3232" | "hsla(0, 0%, 100%, 0.15)" | "rgba(0, 0, 0, 0.6)" | "rgba(255, 255, 255, 0.05)" | "#f1c40f";
-export declare const RemotionInput: React.ForwardRefExoticComponent<Pick<Props, "key" | "status" | "rightAlign" | keyof React.InputHTMLAttributes<HTMLInputElement>> & React.RefAttributes<HTMLInputElement>>;
+}) => "hsla(0, 0%, 100%, 0.15)" | "rgba(0, 0, 0, 0.6)" | "rgba(255, 255, 255, 0.05)" | "#ff3232" | "#f1c40f";
+export declare const RemotionInput: React.ForwardRefExoticComponent<Pick<Props, "status" | "key" | "rightAlign" | keyof React.InputHTMLAttributes<HTMLInputElement>> & React.RefAttributes<HTMLInputElement>>;
 export {};

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

@@ -4,5 +4,5 @@ type Props = React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>
     status: RemInputStatus;
     name: string;
 };
-export declare const RemInputTypeColor: React.ForwardRefExoticComponent<Pick<Props, "key" | "status" | keyof React.InputHTMLAttributes<HTMLInputElement>> & React.RefAttributes<HTMLInputElement>>;
+export declare const RemInputTypeColor: React.ForwardRefExoticComponent<Pick<Props, "status" | "key" | keyof React.InputHTMLAttributes<HTMLInputElement>> & React.RefAttributes<HTMLInputElement>>;
 export {};

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

@@ -3,5 +3,5 @@ type Props = React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLTextAreaEleme
     status: 'error' | 'warning' | 'ok';
 };
 export declare const inputBaseStyle: React.CSSProperties;
-export declare const RemTextarea: React.ForwardRefExoticComponent<Pick<Props, "key" | "status" | keyof React.InputHTMLAttributes<HTMLTextAreaElement>> & React.RefAttributes<HTMLTextAreaElement>>;
+export declare const RemTextarea: React.ForwardRefExoticComponent<Pick<Props, "status" | "key" | keyof React.InputHTMLAttributes<HTMLTextAreaElement>> & React.RefAttributes<HTMLTextAreaElement>>;
 export {};

package/dist/editor/components/QuickSwitcher/QuickSwitcherContent.js

@@ -9,6 +9,7 @@ const is_composition_still_1 = require("../../helpers/is-composition-still");
 const use_keybinding_1 = require("../../helpers/use-keybinding");
 const use_menu_structure_1 = require("../../helpers/use-menu-structure");
 const modals_1 = require("../../state/modals");
+const CompositionSelector_1 = require("../CompositionSelector");
 const InitialCompositionLoader_1 = require("../InitialCompositionLoader");
 const KeyboardShortcutsExplainer_1 = require("../KeyboardShortcutsExplainer");
 const layout_1 = require("../layout");
@@ -131,8 +132,16 @@ const QuickSwitcherContent = ({ initialMode, invocationTimestamp }) => {
                 title: c.id,
                 type: 'composition',
                 onSelected: () => {
+                    var _a;
                     selectComposition(c, true);
                     setSelectedModal(null);
+                    const selector = `.__remotion-composition[data-compname=${c.id}`;
+                    (_a = CompositionSelector_1.compositionSelectorRef.current) === null || _a === void 0 ? void 0 : _a.expandComposition(c.id);
+                    waitForElm(selector).then(() => {
+                        var _a;
+                        (_a = document
+                            .querySelector(selector)) === null || _a === void 0 ? void 0 : _a.scrollIntoView({ block: 'center' });
+                    });
                 },
                 compositionType: (0, is_composition_still_1.isCompositionStill)(c) ? 'still' : 'composition',
             };
@@ -272,3 +281,21 @@ const QuickSwitcherContent = ({ initialMode, invocationTimestamp }) => {
                 })) })] }));
 };
 exports.QuickSwitcherContent = QuickSwitcherContent;
+function waitForElm(selector) {
+    return new Promise((resolve) => {
+        if (document.querySelector(selector)) {
+            resolve(document.querySelector(selector));
+            return;
+        }
+        const observer = new MutationObserver(() => {
+            if (document.querySelector(selector)) {
+                resolve(document.querySelector(selector));
+                observer.disconnect();
+            }
+        });
+        observer.observe(document.body, {
+            childList: true,
+            subtree: true,
+        });
+    });
+}

package/dist/editor/components/RenderModal/human-readable-codec.d.ts

@@ -1,2 +1,2 @@
 import type { Codec } from '@remotion/renderer';
-export declare const humanReadableCodec: (codec: Codec) => "AAC" | "MP3" | "GIF" | "H.264" | "H.264 Matroska" | "H.265" | "ProRes" | "WebM VP8" | "WebM VP9" | "Waveform" | undefined;
+export declare const humanReadableCodec: (codec: Codec) => "GIF" | "AAC" | "MP3" | "H.264" | "H.264 Matroska" | "H.265" | "ProRes" | "WebM VP8" | "WebM VP9" | "Waveform" | undefined;

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

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import type { RenderJob } from '../../../preview-server/render-queue/job';
+export declare const supportsCopyingToClipboard: (job: RenderJob) => boolean;
+export declare const RenderQueueCopyToClipboard: React.FC<{
+    job: RenderJob;
+}>;

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

@@ -0,0 +1,51 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RenderQueueCopyToClipboard = exports.supportsCopyingToClipboard = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const clipboard_1 = require("../../icons/clipboard");
+const InlineAction_1 = require("../InlineAction");
+const NotificationCenter_1 = require("../Notifications/NotificationCenter");
+const actions_1 = require("./actions");
+const revealIconStyle = {
+    height: 12,
+    color: 'currentColor',
+};
+const supportsCopyingToClipboard = (job) => {
+    if (job.status !== 'done') {
+        return false;
+    }
+    if (job.type !== 'still') {
+        return false;
+    }
+    if (job.imageFormat === 'png') {
+        return true;
+    }
+    if (job.imageFormat === 'jpeg') {
+        return true;
+    }
+    return false;
+};
+exports.supportsCopyingToClipboard = supportsCopyingToClipboard;
+const RenderQueueCopyToClipboard = ({ job, }) => {
+    const renderCopyAction = (0, react_1.useCallback)((color) => {
+        return (0, jsx_runtime_1.jsx)(clipboard_1.ClipboardIcon, { style: revealIconStyle, color: color });
+    }, []);
+    const onClick = (0, react_1.useCallback)(() => {
+        (0, actions_1.copyToClipboard)({ outName: job.outName })
+            .catch((err) => {
+            (0, NotificationCenter_1.sendErrorNotification)(`Could not copy to clipboard: ${err.message}`);
+        })
+            .then(() => {
+            var _a;
+            (_a = NotificationCenter_1.notificationCenter.current) === null || _a === void 0 ? void 0 : _a.addNotification({
+                content: 'Copied to clipboard',
+                created: Date.now(),
+                duration: 1000,
+                id: String(Math.random()),
+            });
+        });
+    }, [job.outName]);
+    return ((0, jsx_runtime_1.jsx)(InlineAction_1.InlineAction, { title: "Copy to clipboard", renderAction: renderCopyAction, onClick: onClick }));
+};
+exports.RenderQueueCopyToClipboard = RenderQueueCopyToClipboard;

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

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.RenderQueueItem = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const layout_1 = require("../layout");
+const RenderQueueCopyToClipboard_1 = require("./RenderQueueCopyToClipboard");
 const RenderQueueError_1 = require("./RenderQueueError");
 const RenderQueueItemCancelButton_1 = require("./RenderQueueItemCancelButton");
 const RenderQueueItemStatus_1 = require("./RenderQueueItemStatus");
@@ -35,6 +36,6 @@ const subtitle = {
     overflow: 'hidden',
 };
 const RenderQueueItem = ({ job }) => {
-    return ((0, jsx_runtime_1.jsxs)(layout_1.Row, { style: container, align: "center", children: [(0, jsx_runtime_1.jsx)(RenderQueueItemStatus_1.RenderQueueItemStatus, { job: job }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), (0, jsx_runtime_1.jsxs)("div", { style: right, children: [(0, jsx_runtime_1.jsx)("div", { style: title, children: job.compositionId }), (0, jsx_runtime_1.jsx)("div", { style: subtitle, children: job.status === 'done' ? ((0, jsx_runtime_1.jsx)(RenderQueueOutputName_1.RenderQueueOutputName, { job: job })) : job.status === 'failed' ? ((0, jsx_runtime_1.jsx)(RenderQueueError_1.RenderQueueError, { job: job })) : job.status === 'running' ? ((0, jsx_runtime_1.jsx)(RenderQueueProgressMessage_1.RenderQueueProgressMessage, { job: job })) : null })] }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), job.status === 'done' || job.status === 'failed' ? ((0, jsx_runtime_1.jsx)(RenderQueueRepeat_1.RenderQueueRepeatItem, { job: job })) : null, job.status === 'running' ? ((0, jsx_runtime_1.jsx)(RenderQueueItemCancelButton_1.RenderQueueCancelButton, { job: job })) : ((0, jsx_runtime_1.jsx)(RenderQueueRemoveItem_1.RenderQueueRemoveItem, { job: job })), job.status === 'done' ? (0, jsx_runtime_1.jsx)(RenderQueueOpenInFolder_1.RenderQueueOpenInFinderItem, { job: job }) : null] }));
+    return ((0, jsx_runtime_1.jsxs)(layout_1.Row, { style: container, align: "center", children: [(0, jsx_runtime_1.jsx)(RenderQueueItemStatus_1.RenderQueueItemStatus, { job: job }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), (0, jsx_runtime_1.jsxs)("div", { style: right, children: [(0, jsx_runtime_1.jsx)("div", { style: title, children: job.compositionId }), (0, jsx_runtime_1.jsx)("div", { style: subtitle, children: job.status === 'done' ? ((0, jsx_runtime_1.jsx)(RenderQueueOutputName_1.RenderQueueOutputName, { job: job })) : job.status === 'failed' ? ((0, jsx_runtime_1.jsx)(RenderQueueError_1.RenderQueueError, { job: job })) : job.status === 'running' ? ((0, jsx_runtime_1.jsx)(RenderQueueProgressMessage_1.RenderQueueProgressMessage, { job: job })) : null })] }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), (0, RenderQueueCopyToClipboard_1.supportsCopyingToClipboard)(job) ? ((0, jsx_runtime_1.jsx)(RenderQueueCopyToClipboard_1.RenderQueueCopyToClipboard, { job: job })) : null, job.status === 'done' || job.status === 'failed' ? ((0, jsx_runtime_1.jsx)(RenderQueueRepeat_1.RenderQueueRepeatItem, { job: job })) : null, job.status === 'running' ? ((0, jsx_runtime_1.jsx)(RenderQueueItemCancelButton_1.RenderQueueCancelButton, { job: job })) : ((0, jsx_runtime_1.jsx)(RenderQueueRemoveItem_1.RenderQueueRemoveItem, { job: job })), job.status === 'done' ? (0, jsx_runtime_1.jsx)(RenderQueueOpenInFolder_1.RenderQueueOpenInFinderItem, { job: job }) : null] }));
 };
 exports.RenderQueueItem = RenderQueueItem;

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

@@ -53,6 +53,9 @@ export declare const subscribeToFileExistenceWatcher: ({ file, clientId, }: {
 export declare const openInFileExplorer: ({ directory }: {
     directory: string;
 }) => Promise<void>;
+export declare const copyToClipboard: ({ outName }: {
+    outName: string;
+}) => Promise<void>;
 export declare const removeRenderJob: (job: RenderJob) => Promise<undefined>;
 export declare const cancelRenderJob: (job: RenderJob) => Promise<import("../../../preview-server/render-queue/job").CancelRenderResponse>;
 export declare const updateAvailable: (signal: AbortSignal) => Promise<import("../../../preview-server/render-queue/job").UpdateAvailableResponse>;

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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.canUpdateDefaultProps = exports.updateDefaultProps = exports.updateAvailable = exports.cancelRenderJob = exports.removeRenderJob = exports.openInFileExplorer = exports.subscribeToFileExistenceWatcher = exports.unsubscribeFromFileExistenceWatcher = exports.addVideoRenderJob = exports.addStillRenderJob = void 0;
+exports.canUpdateDefaultProps = exports.updateDefaultProps = exports.updateAvailable = exports.cancelRenderJob = exports.removeRenderJob = exports.copyToClipboard = exports.openInFileExplorer = exports.subscribeToFileExistenceWatcher = exports.unsubscribeFromFileExistenceWatcher = exports.addVideoRenderJob = exports.addStillRenderJob = void 0;
 const remotion_1 = require("remotion");
 const callApi = (endpoint, body, signal) => {
     return new Promise((resolve, reject) => {
@@ -101,6 +101,13 @@ const openInFileExplorer = ({ directory }) => {
     return callApi('/api/open-in-file-explorer', body);
 };
 exports.openInFileExplorer = openInFileExplorer;
+const copyToClipboard = ({ outName }) => {
+    const body = {
+        outName,
+    };
+    return callApi('/api/copy-still-to-clipboard', body);
+};
+exports.copyToClipboard = copyToClipboard;
 const removeRenderJob = (job) => {
     return callApi('/api/remove-render', {
         jobId: job.id,

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

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

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

@@ -20,7 +20,7 @@ export declare const getCliOptions: (options: {
     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;
@@ -33,5 +33,5 @@ export declare const getCliOptions: (options: {
     videoBitrate: string | null;
     height: number | null;
     width: number | null;
-    configFileImageFormat: "none" | "png" | "jpeg" | undefined;
+    configFileImageFormat: "png" | "jpeg" | "none" | undefined;
 }>;

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;
@@ -105,7 +105,7 @@ export declare const CliInternals: {
         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;
@@ -118,7 +118,7 @@ export declare const CliInternals: {
         videoBitrate: string | null;
         height: number | null;
         width: number | null;
-        configFileImageFormat: "none" | "png" | "jpeg" | undefined;
+        configFileImageFormat: "png" | "jpeg" | "none" | undefined;
     }>;
     loadConfig: (remotionRoot: string) => Promise<string | null>;
     initializeCli: (remotionRoot: string) => Promise<void>;
@@ -127,7 +127,7 @@ export declare const CliInternals: {
     parsedCli: {
         "browser-executable": import("@remotion/renderer").BrowserExecutable;
         "pixel-format": "yuv420p" | "yuva420p" | "yuv422p" | "yuv444p" | "yuv420p10le" | "yuv422p10le" | "yuv444p10le" | "yuva444p10le";
-        "image-format": "none" | "png" | "jpeg" | "pdf" | "webp";
+        "image-format": "png" | "jpeg" | "pdf" | "webp" | "none";
         "prores-profile": "4444-xq" | "4444" | "hq" | "standard" | "light" | "proxy";
         "bundle-cache": string;
         "env-file": string;
@@ -180,7 +180,7 @@ export declare const CliInternals: {
     } & {
         _: string[];
     };
-    handleCommonError: (err: Error, logLevel: "error" | "verbose" | "info" | "warn") => Promise<void>;
+    handleCommonError: (err: Error, logLevel: "verbose" | "info" | "warn" | "error") => Promise<void>;
     formatBytes: (number: number, options?: Intl.NumberFormatOptions & {
         locale: string;
         bits?: boolean | undefined;
@@ -192,7 +192,7 @@ export declare const CliInternals: {
         downloadName: string | null;
         outName: string | null;
         configImageFormat: "png" | "jpeg" | "pdf" | "webp" | null;
-        cliFlag: "none" | "png" | "jpeg" | "pdf" | "webp" | null;
+        cliFlag: "png" | "jpeg" | "pdf" | "webp" | "none" | null;
         isLambda: boolean;
         fromUi: "png" | "jpeg" | "pdf" | "webp" | null;
     }) => {
@@ -207,8 +207,8 @@ export declare const CliInternals: {
     };
     getVideoImageFormat: ({ codec, uiImageFormat, }: {
         codec: import("@remotion/renderer").CodecOrUndefined;
-        uiImageFormat: "none" | "png" | "jpeg" | null;
-    }) => "none" | "png" | "jpeg";
+        uiImageFormat: "png" | "jpeg" | "none" | null;
+    }) => "png" | "jpeg" | "none";
     printCompositions: (compositions: import("remotion").VideoConfig[]) => void;
     getFinalOutputCodec: ({ cliFlag, configFile, downloadName, outName, uiCodec, }: {
         cliFlag: import("@remotion/renderer").CodecOrUndefined;
@@ -222,7 +222,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, }: {
         height: number | null;
@@ -237,7 +237,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;
     }) => Promise<{

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/api-routes.js

@@ -4,6 +4,7 @@ exports.allApiRoutes = void 0;
 const add_render_1 = require("./routes/add-render");
 const can_update_default_props_1 = require("./routes/can-update-default-props");
 const cancel_render_1 = require("./routes/cancel-render");
+const copy_still_to_clipboard_handler_1 = require("./routes/copy-still-to-clipboard-handler");
 const open_in_file_explorer_1 = require("./routes/open-in-file-explorer");
 const remove_render_1 = require("./routes/remove-render");
 const subscribe_to_file_existence_1 = require("./routes/subscribe-to-file-existence");
@@ -17,6 +18,7 @@ exports.allApiRoutes = {
     '/api/subscribe-to-file-existence': subscribe_to_file_existence_1.subscribeToFileExistence,
     '/api/remove-render': remove_render_1.handleRemoveRender,
     '/api/open-in-file-explorer': open_in_file_explorer_1.handleOpenInFileExplorer,
+    '/api/copy-still-to-clipboard': copy_still_to_clipboard_handler_1.handleCopyStillToClipboard,
     '/api/update-default-props': update_default_props_1.updateDefaultPropsHandler,
     '/api/can-update-default-props': can_update_default_props_1.canUpdateDefaultPropsHandler,
     '/api/update-available': update_available_1.handleUpdate,

package/dist/preview-server/api-types.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="node" />
 import type { IncomingMessage, ServerResponse } from 'node:http';
-import type { AddRenderRequest, CancelRenderRequest, CancelRenderResponse, CanUpdateDefaultPropsRequest, CanUpdateDefaultPropsResponse, OpenInFileExplorerRequest, RemoveRenderRequest, SubscribeToFileExistenceRequest, SubscribeToFileExistenceResponse, UnsubscribeFromFileExistenceRequest, UpdateAvailableRequest, UpdateAvailableResponse, UpdateDefaultPropsRequest, UpdateDefaultPropsResponse } from './render-queue/job';
+import type { AddRenderRequest, CancelRenderRequest, CancelRenderResponse, CanUpdateDefaultPropsRequest, CanUpdateDefaultPropsResponse, CopyStillToClipboardRequest, OpenInFileExplorerRequest, RemoveRenderRequest, SubscribeToFileExistenceRequest, SubscribeToFileExistenceResponse, UnsubscribeFromFileExistenceRequest, UpdateAvailableRequest, UpdateAvailableResponse, UpdateDefaultPropsRequest, UpdateDefaultPropsResponse } from './render-queue/job';
 export type ApiHandler<ReqData, ResData> = (params: {
     input: ReqData;
     entryPoint: string;
@@ -19,6 +19,7 @@ export type ApiRoutes = {
     '/api/subscribe-to-file-existence': ReqAndRes<SubscribeToFileExistenceRequest, SubscribeToFileExistenceResponse>;
     '/api/remove-render': ReqAndRes<RemoveRenderRequest, undefined>;
     '/api/open-in-file-explorer': ReqAndRes<OpenInFileExplorerRequest, void>;
+    '/api/copy-still-to-clipboard': ReqAndRes<CopyStillToClipboardRequest, void>;
     '/api/update-default-props': ReqAndRes<UpdateDefaultPropsRequest, UpdateDefaultPropsResponse>;
     '/api/can-update-default-props': ReqAndRes<CanUpdateDefaultPropsRequest, CanUpdateDefaultPropsResponse>;
     '/api/update-available': ReqAndRes<UpdateAvailableRequest, UpdateAvailableResponse>;

package/dist/preview-server/dev-middleware/range-parser.d.ts

@@ -11,5 +11,5 @@ type Range = {
 type Ranges = Range[] & {
     type?: string;
 };
-export declare function parseRange(size: number, str: string | string[]): -1 | -2 | Ranges;
+export declare function parseRange(size: number, str: string | string[]): -1 | Ranges | -2;
 export {};

package/dist/preview-server/error-overlay/react-overlay/utils/get-file-source.js

@@ -7,14 +7,15 @@ exports.getFileSource = void 0;
 const node_fs_1 = __importDefault(require("node:fs"));
 const node_path_1 = __importDefault(require("node:path"));
 const allowedFileExtensions = ['js', 'ts', 'tsx', 'jsx', 'map', 'mjs'];
+// Must be async function for proper error handling
 const getFileSource = (remotionRoot, p) => {
     if (!allowedFileExtensions.find((extension) => p.endsWith(extension))) {
-        throw new Error(`Not allowed to open ${p}`);
+        return Promise.reject(new Error(`Not allowed to open ${p}`));
     }
     const resolved = node_path_1.default.resolve(remotionRoot, p);
     const relativeToProcessCwd = node_path_1.default.relative(remotionRoot, resolved);
     if (relativeToProcessCwd.startsWith('..')) {
-        throw new Error(`Not allowed to open ${relativeToProcessCwd}`);
+        return Promise.reject(new Error(`Not allowed to open ${relativeToProcessCwd}`));
     }
     return node_fs_1.default.promises.readFile(p, 'utf-8');
 };

package/dist/preview-server/render-queue/copy-still-to-clipboard.d.ts

@@ -0,0 +1 @@
+export declare const copyStillToClipBoard: (img: string) => Promise<void>;

package/dist/preview-server/render-queue/copy-still-to-clipboard.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.copyStillToClipBoard = void 0;
+const renderer_1 = require("@remotion/renderer");
+const copyStillToClipBoard = (img) => {
+    return renderer_1.RenderInternals.copyImageToClipboard(img, 'info');
+};
+exports.copyStillToClipBoard = copyStillToClipBoard;

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

@@ -113,6 +113,9 @@ export type RemoveRenderRequest = {
 export type OpenInFileExplorerRequest = {
     directory: string;
 };
+export type CopyStillToClipboardRequest = {
+    outName: string;
+};
 export type SubscribeToFileExistenceRequest = {
     file: string;
     clientId: string;

package/dist/preview-server/routes/copy-still-to-clipboard-handler.d.ts

@@ -0,0 +1,3 @@
+import type { ApiHandler } from '../api-types';
+import type { CopyStillToClipboardRequest } from '../render-queue/job';
+export declare const handleCopyStillToClipboard: ApiHandler<CopyStillToClipboardRequest, void>;

package/dist/preview-server/routes/copy-still-to-clipboard-handler.js

@@ -0,0 +1,17 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.handleCopyStillToClipboard = void 0;
+const renderer_1 = require("@remotion/renderer");
+const path_1 = __importDefault(require("path"));
+const handleCopyStillToClipboard = ({ input: { outName }, remotionRoot }) => {
+    const resolved = path_1.default.resolve(remotionRoot, outName);
+    const relativeToProcessCwd = path_1.default.relative(remotionRoot, resolved);
+    if (relativeToProcessCwd.startsWith('..')) {
+        throw new Error(`Not allowed to open ${relativeToProcessCwd}`);
+    }
+    return renderer_1.RenderInternals.copyImageToClipboard(resolved, 'info');
+};
+exports.handleCopyStillToClipboard = handleCopyStillToClipboard;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remotion/cli",
-  "version": "4.0.20",
+  "version": "4.0.21",
   "description": "CLI for Remotion",
   "main": "dist/index.js",
   "sideEffects": false,
@@ -35,11 +35,11 @@
     "prompts": "2.4.1",
     "semver": "7.5.3",
     "source-map": "0.6.1",
-    "@remotion/bundler": "4.0.20",
-    "remotion": "4.0.20",
-    "@remotion/player": "4.0.20",
-    "@remotion/renderer": "4.0.20",
-    "@remotion/media-utils": "4.0.20"
+    "@remotion/media-utils": "4.0.21",
+    "@remotion/player": "4.0.21",
+    "@remotion/bundler": "4.0.21",
+    "@remotion/renderer": "4.0.21",
+    "remotion": "4.0.21"
   },
   "peerDependencies": {
     "react": ">=16.8.0",
@@ -64,8 +64,8 @@
     "react-dom": "^18.0.0",
     "vitest": "0.31.1",
     "zod": "^3.21.4",
-    "@remotion/tailwind": "4.0.20",
-    "@remotion/zod-types": "4.0.20"
+    "@remotion/zod-types": "4.0.21",
+    "@remotion/tailwind": "4.0.21"
   },
   "keywords": [
     "remotion",