@remotion/cli 3.3.17 → 3.3.19

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

@@ -0,0 +1,5 @@
+import React from 'react';
+import type { RenderJob } from '../../../preview-server/render-queue/job';
+export declare const RenderQueueError: React.FC<{
+    job: RenderJob;
+}>;

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

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RenderQueueError = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const modals_1 = require("../../state/modals");
+const z_index_1 = require("../../state/z-index");
+const item_style_1 = require("./item-style");
+const outputLocation = {
+    ...item_style_1.renderQueueItemSubtitleStyle,
+};
+const RenderQueueError = ({ job }) => {
+    const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
+    const { tabIndex } = (0, z_index_1.useZIndex)();
+    const onClick = (0, react_1.useCallback)(() => {
+        setSelectedModal({
+            type: 'render-error',
+            job,
+        });
+    }, [job, setSelectedModal]);
+    if (job.status !== 'failed') {
+        throw new Error('should not have rendered this component');
+    }
+    return ((0, jsx_runtime_1.jsx)("button", { onClick: onClick, type: "button", style: outputLocation, tabIndex: tabIndex, title: job.error.message, children: job.error.message }));
+};
+exports.RenderQueueError = RenderQueueError;

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

@@ -3,14 +3,18 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.RenderQueueItem = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const layout_1 = require("../layout");
+const RenderQueueError_1 = require("./RenderQueueError");
 const RenderQueueItemStatus_1 = require("./RenderQueueItemStatus");
 const RenderQueueOutputName_1 = require("./RenderQueueOutputName");
+const RenderQueueProgressMessage_1 = require("./RenderQueueProgressMessage");
 const RenderQueueRemoveItem_1 = require("./RenderQueueRemoveItem");
+const RenderQueueRepeat_1 = require("./RenderQueueRepeat");
 const container = {
     padding: 12,
     display: 'flex',
     flexDirection: 'row',
     paddingBottom: 10,
+    paddingRight: 4,
 };
 const title = {
     fontSize: 13,
@@ -18,8 +22,17 @@ const title = {
 };
 const right = {
     flex: 1,
+    display: 'flex',
+    flexDirection: 'column',
+    overflow: 'hidden',
+};
+const subtitle = {
+    maxWidth: '100%',
+    flex: 1,
+    display: 'flex',
+    overflow: 'hidden',
 };
 const RenderQueueItem = ({ job }) => {
-    return ((0, jsx_runtime_1.jsxs)(layout_1.Row, { style: container, align: "center", children: [(0, jsx_runtime_1.jsx)(RenderQueueItemStatus_1.RenderQueueItemStatus, { job: job }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), (0, jsx_runtime_1.jsxs)("div", { style: right, children: [(0, jsx_runtime_1.jsx)("div", { style: title, children: job.compositionId }), (0, jsx_runtime_1.jsx)(RenderQueueOutputName_1.RenderQueueOutputName, { job: job })] }), (0, jsx_runtime_1.jsx)(RenderQueueRemoveItem_1.RenderQueueRemoveItem, { job: job })] }));
+    return ((0, jsx_runtime_1.jsxs)(layout_1.Row, { style: container, align: "center", children: [(0, jsx_runtime_1.jsx)(RenderQueueItemStatus_1.RenderQueueItemStatus, { job: job }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), (0, jsx_runtime_1.jsxs)("div", { style: right, children: [(0, jsx_runtime_1.jsx)("div", { style: title, children: job.compositionId }), (0, jsx_runtime_1.jsx)("div", { style: subtitle, children: job.status === 'done' ? ((0, jsx_runtime_1.jsx)(RenderQueueOutputName_1.RenderQueueOutputName, { job: job })) : job.status === 'failed' ? ((0, jsx_runtime_1.jsx)(RenderQueueError_1.RenderQueueError, { job: job })) : job.status === 'running' ? ((0, jsx_runtime_1.jsx)(RenderQueueProgressMessage_1.RenderQueueProgressMessage, { job: job })) : null })] }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), (0, jsx_runtime_1.jsx)(RenderQueueRepeat_1.RenderQueueRepeatItem, { job: job }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), (0, jsx_runtime_1.jsx)(RenderQueueRemoveItem_1.RenderQueueRemoveItem, { job: job })] }));
 };
 exports.RenderQueueItem = RenderQueueItem;

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

@@ -3,9 +3,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.RenderQueueItemStatus = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const colors_1 = require("../../helpers/colors");
+const CircularProgress_1 = require("./CircularProgress");
 const iconStyle = {
-    height: 16,
-    width: 16,
+    height: CircularProgress_1.RENDER_STATUS_INDICATOR_SIZE,
+    width: CircularProgress_1.RENDER_STATUS_INDICATOR_SIZE,
 };
 const RenderQueueItemStatus = ({ job }) => {
     if (job.status === 'failed') {
@@ -14,6 +15,13 @@ const RenderQueueItemStatus = ({ job }) => {
     if (job.status === 'idle') {
         return ((0, jsx_runtime_1.jsx)("svg", { style: iconStyle, viewBox: "0 0 512 512", children: (0, jsx_runtime_1.jsx)("path", { fill: colors_1.LIGHT_TEXT, d: "M256 512C114.6 512 0 397.4 0 256S114.6 0 256 0S512 114.6 512 256s-114.6 256-256 256zM232 120V256c0 8 4 15.5 10.7 20l96 64c11 7.4 25.9 4.4 33.3-6.7s4.4-25.9-6.7-33.3L280 243.2V120c0-13.3-10.7-24-24-24s-24 10.7-24 24z" }) }));
     }
-    return (0, jsx_runtime_1.jsx)("div", { children: job.status });
+    if (job.status === 'done') {
+        return ((0, jsx_runtime_1.jsx)("svg", { style: iconStyle, viewBox: "0 0 512 512", children: (0, jsx_runtime_1.jsx)("path", { fill: colors_1.LIGHT_TEXT, d: "M256 512c141.4 0 256-114.6 256-256S397.4 0 256 0S0 114.6 0 256S114.6 512 256 512zM369 209L241 337l-17 17-17-17-64-64-17-17L160 222.1l17 17 47 47L335 175l17-17L385.9 192l-17 17z" }) }));
+    }
+    if (job.status === 'running') {
+        // Add a minimum progress to avoid the progress bar from disappearing
+        return (0, jsx_runtime_1.jsx)(CircularProgress_1.CircularProgress, { progress: Math.max(0.07, job.progress) });
+    }
+    throw new Error('Unknown job status');
 };
 exports.RenderQueueItemStatus = RenderQueueItemStatus;

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

@@ -3,59 +3,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.RenderQueueOutputName = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const colors_1 = require("../../helpers/colors");
-const layout_1 = require("../layout");
 const NotificationCenter_1 = require("../Notifications/NotificationCenter");
-const outputLocation = {
-    fontSize: 13,
-    color: colors_1.LIGHT_TEXT,
-    appearance: 'none',
-    border: 'none',
-    padding: 0,
-    cursor: 'pointer',
-    lineHeight: 1,
-    textAlign: 'left',
-    whiteSpace: 'nowrap',
-    marginRight: layout_1.SPACING_UNIT,
-};
-const formatOutputLocation = (location) => {
-    if (location.startsWith(window.remotion_cwd)) {
-        const out = location.substring(window.remotion_cwd.length);
-        if (out.startsWith('/') || out.startsWith('\\')) {
-            return out.substring(1);
-        }
-        return out;
-    }
-    return location;
-};
+const actions_1 = require("./actions");
+const item_style_1 = require("./item-style");
 const RenderQueueOutputName = ({ job }) => {
     const onClick = (0, react_1.useCallback)(() => {
-        const body = {
-            directory: job.outputLocation,
-        };
-        fetch(`/api/open-in-file-explorer`, {
-            method: 'post',
-            headers: {
-                'content-type': 'application/json',
-            },
-            body: JSON.stringify(body),
-        })
-            .then((res) => res.json())
-            .then((data) => {
-            var _a;
-            if (data.success) {
-                console.log('Opened file in explorer');
-            }
-            else {
-                (_a = NotificationCenter_1.notificationCenter.current) === null || _a === void 0 ? void 0 : _a.addNotification({
-                    content: `Could not open file: ${data.error}`,
-                    created: Date.now(),
-                    duration: 2000,
-                    id: String(Math.random()),
-                });
-            }
-        })
-            .catch((err) => {
+        (0, actions_1.openInFileExplorer)({ directory: job.outName }).catch((err) => {
             var _a;
             (_a = NotificationCenter_1.notificationCenter.current) === null || _a === void 0 ? void 0 : _a.addNotification({
                 content: `Could not open file: ${err.message}`,
@@ -64,7 +17,14 @@ const RenderQueueOutputName = ({ job }) => {
                 id: String(Math.random()),
             });
         });
-    }, [job.outputLocation]);
-    return ((0, jsx_runtime_1.jsx)("button", { onClick: onClick, type: "button", style: outputLocation, title: job.outputLocation, children: formatOutputLocation(job.outputLocation) }));
+    }, [job.outName]);
+    const style = (0, react_1.useMemo)(() => {
+        return {
+            ...item_style_1.renderQueueItemSubtitleStyle,
+            cursor: job.deletedOutputLocation ? 'inherit' : 'pointer',
+            textDecoration: job.deletedOutputLocation ? 'line-through' : 'none',
+        };
+    }, [job.deletedOutputLocation]);
+    return ((0, jsx_runtime_1.jsx)("button", { onClick: onClick, type: "button", style: style, disabled: job.deletedOutputLocation, title: job.deletedOutputLocation ? 'File was deleted' : job.outName, children: job.outName }));
 };
 exports.RenderQueueOutputName = RenderQueueOutputName;

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

@@ -0,0 +1,5 @@
+import React from 'react';
+import type { RenderJob } from '../../../preview-server/render-queue/job';
+export declare const RenderQueueProgressMessage: React.FC<{
+    job: RenderJob;
+}>;

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

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RenderQueueProgressMessage = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const modals_1 = require("../../state/modals");
+const z_index_1 = require("../../state/z-index");
+const item_style_1 = require("./item-style");
+const outputLocation = {
+    ...item_style_1.renderQueueItemSubtitleStyle,
+};
+const RenderQueueProgressMessage = ({ job }) => {
+    if (job.status !== 'running') {
+        throw new Error('should not have rendered this component');
+    }
+    const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
+    const { tabIndex } = (0, z_index_1.useZIndex)();
+    const onClick = (0, react_1.useCallback)(() => {
+        // TODO: Show progress instead
+        setSelectedModal({
+            type: 'render-error',
+            job,
+        });
+    }, [job, setSelectedModal]);
+    return ((0, jsx_runtime_1.jsx)("button", { onClick: onClick, type: "button", style: outputLocation, tabIndex: tabIndex, title: job.message, children: job.message }));
+};
+exports.RenderQueueProgressMessage = RenderQueueProgressMessage;

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

@@ -3,54 +3,20 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.RenderQueueRemoveItem = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const colors_1 = require("../../helpers/colors");
+const InlineAction_1 = require("../InlineAction");
+const actions_1 = require("./actions");
 const RenderQueueRemoveItem = ({ job }) => {
     const onClick = (0, react_1.useCallback)(() => {
-        const body = {
-            jobId: job.id,
-        };
-        fetch(`/api/remove-render`, {
-            method: 'post',
-            headers: {
-                'content-type': 'application/json',
-            },
-            body: JSON.stringify(body),
-        })
-            .then((res) => res.json())
-            .then((data) => {
-            if (!data.success) {
-                // TODO: Handle error
-            }
-        })
-            .catch(() => {
+        (0, actions_1.removeRenderJob)(job).catch((err) => {
             // TODO: Handle error
+            console.log(err);
         });
-    }, [job.id]);
-    const [hovered, setHovered] = (0, react_1.useState)(false);
+    }, [job]);
     const icon = (0, react_1.useMemo)(() => {
         return {
             height: 12,
         };
     }, []);
-    const onPointerEnter = (0, react_1.useCallback)(() => {
-        setHovered(true);
-    }, []);
-    const onPointerLeave = (0, react_1.useCallback)(() => {
-        setHovered(false);
-    }, []);
-    const style = (0, react_1.useMemo)(() => {
-        return {
-            border: 'none',
-            background: hovered ? colors_1.CLEAR_HOVER : 'transparent',
-            height: 24,
-            width: 24,
-            display: 'inline-flex',
-            justifyContent: 'center',
-            alignItems: 'center',
-            borderRadius: 3,
-            cursor: 'pointer',
-        };
-    }, [hovered]);
-    return ((0, jsx_runtime_1.jsx)("button", { onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, type: "button", onClick: onClick, style: style, children: (0, jsx_runtime_1.jsx)("svg", { style: icon, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 448 512", children: (0, jsx_runtime_1.jsx)("path", { fill: hovered ? 'white' : colors_1.LIGHT_TEXT, d: "M135.2 17.7L128 32H32C14.3 32 0 46.3 0 64S14.3 96 32 96H416c17.7 0 32-14.3 32-32s-14.3-32-32-32H320l-7.2-14.3C307.4 6.8 296.3 0 284.2 0H163.8c-12.1 0-23.2 6.8-28.6 17.7zM416 128H32L53.2 467c1.6 25.3 22.6 45 47.9 45H346.9c25.3 0 46.3-19.7 47.9-45L416 128z" }) }) }));
+    return ((0, jsx_runtime_1.jsx)(InlineAction_1.InlineAction, { onClick: onClick, children: (0, jsx_runtime_1.jsx)("svg", { style: icon, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 448 512", children: (0, jsx_runtime_1.jsx)("path", { fill: "currentColor", d: "M135.2 17.7L128 32H32C14.3 32 0 46.3 0 64S14.3 96 32 96H416c17.7 0 32-14.3 32-32s-14.3-32-32-32H320l-7.2-14.3C307.4 6.8 296.3 0 284.2 0H163.8c-12.1 0-23.2 6.8-28.6 17.7zM416 128H32L53.2 467c1.6 25.3 22.6 45 47.9 45H346.9c25.3 0 46.3-19.7 47.9-45L416 128z" }) }) }));
 };
 exports.RenderQueueRemoveItem = RenderQueueRemoveItem;

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

@@ -0,0 +1,5 @@
+import React from 'react';
+import type { RenderJob } from '../../../preview-server/render-queue/job';
+export declare const RenderQueueRepeatItem: React.FC<{
+    job: RenderJob;
+}>;

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

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RenderQueueRepeatItem = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const make_retry_payload_1 = require("../../../preview-server/render-queue/make-retry-payload");
+const modals_1 = require("../../state/modals");
+const InlineAction_1 = require("../InlineAction");
+const RenderQueueRepeatItem = ({ job }) => {
+    const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
+    const onClick = (0, react_1.useCallback)(() => {
+        const retryPayload = (0, make_retry_payload_1.makeRetryPayload)(job);
+        setSelectedModal(retryPayload);
+    }, [job, setSelectedModal]);
+    const icon = (0, react_1.useMemo)(() => {
+        return {
+            height: 12,
+        };
+    }, []);
+    return ((0, jsx_runtime_1.jsx)(InlineAction_1.InlineAction, { onClick: onClick, children: (0, jsx_runtime_1.jsx)("svg", { style: icon, viewBox: "0 0 512 512", children: (0, jsx_runtime_1.jsx)("path", { fill: "currentcolor", d: "M386.3 160H336c-17.7 0-32 14.3-32 32s14.3 32 32 32H464c17.7 0 32-14.3 32-32V64c0-17.7-14.3-32-32-32s-32 14.3-32 32v51.2L414.4 97.6c-87.5-87.5-229.3-87.5-316.8 0s-87.5 229.3 0 316.8s229.3 87.5 316.8 0c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0c-62.5 62.5-163.8 62.5-226.3 0s-62.5-163.8 0-226.3s163.8-62.5 226.3 0L386.3 160z" }) }) }));
+};
+exports.RenderQueueRepeatItem = RenderQueueRepeatItem;

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

@@ -0,0 +1,32 @@
+import type { Codec, StillImageFormat } from '@remotion/renderer';
+import type { ApiRoutes } from '../../../preview-server/api-types';
+import type { RenderJob } from '../../../preview-server/render-queue/job';
+export declare const callApi: <Endpoint extends keyof ApiRoutes>(endpoint: Endpoint, body: ApiRoutes[Endpoint]["Request"]) => Promise<ApiRoutes[Endpoint]["Response"]>;
+export declare const addStillRenderJob: ({ compositionId, outName, imageFormat, quality, frame, scale, verbose, }: {
+    compositionId: string;
+    outName: string;
+    imageFormat: StillImageFormat;
+    quality: number | null;
+    frame: number;
+    scale: number;
+    verbose: boolean;
+}) => Promise<undefined>;
+export declare const addVideoRenderJob: ({ compositionId, outName, imageFormat, quality, scale, verbose, codec, }: {
+    compositionId: string;
+    outName: string;
+    imageFormat: StillImageFormat;
+    quality: number | null;
+    scale: number;
+    verbose: boolean;
+    codec: Codec;
+}) => Promise<undefined>;
+export declare const unsubscribeFromFileExistenceWatcher: ({ file }: {
+    file: string;
+}) => Promise<undefined>;
+export declare const subscribeToFileExistenceWatcher: ({ file, }: {
+    file: string;
+}) => Promise<boolean>;
+export declare const openInFileExplorer: ({ directory }: {
+    directory: string;
+}) => Promise<void>;
+export declare const removeRenderJob: (job: RenderJob) => Promise<undefined>;

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

@@ -0,0 +1,75 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.removeRenderJob = exports.openInFileExplorer = exports.subscribeToFileExistenceWatcher = exports.unsubscribeFromFileExistenceWatcher = exports.addVideoRenderJob = exports.addStillRenderJob = exports.callApi = void 0;
+const callApi = (endpoint, body) => {
+    return new Promise((resolve, reject) => {
+        fetch(endpoint, {
+            method: 'post',
+            headers: {
+                'content-type': 'application/json',
+            },
+            body: JSON.stringify(body),
+        })
+            .then((res) => res.json())
+            .then((data) => {
+            if (data.success) {
+                resolve(data.data);
+            }
+            else {
+                reject(new Error(data.error));
+            }
+        })
+            .catch((err) => {
+            reject(err);
+        });
+    });
+};
+exports.callApi = callApi;
+const addStillRenderJob = ({ compositionId, outName, imageFormat, quality, frame, scale, verbose, }) => {
+    return (0, exports.callApi)('/api/render', {
+        compositionId,
+        type: 'still',
+        outName,
+        imageFormat,
+        quality,
+        frame,
+        scale,
+        verbose,
+    });
+};
+exports.addStillRenderJob = addStillRenderJob;
+const addVideoRenderJob = ({ compositionId, outName, imageFormat, quality, scale, verbose, codec, }) => {
+    return (0, exports.callApi)('/api/render', {
+        compositionId,
+        type: 'video',
+        outName,
+        imageFormat,
+        quality,
+        scale,
+        verbose,
+        codec,
+    });
+};
+exports.addVideoRenderJob = addVideoRenderJob;
+const unsubscribeFromFileExistenceWatcher = ({ file }) => {
+    return (0, exports.callApi)('/api/unsubscribe-from-file-existence', { file });
+};
+exports.unsubscribeFromFileExistenceWatcher = unsubscribeFromFileExistenceWatcher;
+const subscribeToFileExistenceWatcher = async ({ file, }) => {
+    const { exists } = await (0, exports.callApi)('/api/subscribe-to-file-existence', { file });
+    return exists;
+};
+exports.subscribeToFileExistenceWatcher = subscribeToFileExistenceWatcher;
+const openInFileExplorer = ({ directory }) => {
+    const body = {
+        directory,
+    };
+    return (0, exports.callApi)('/api/open-in-file-explorer', body);
+};
+exports.openInFileExplorer = openInFileExplorer;
+const removeRenderJob = (job) => {
+    return (0, exports.callApi)('/api/remove-render', {
+        jobId: job.id,
+    });
+};
+exports.removeRenderJob = removeRenderJob;

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

@@ -9,6 +9,7 @@ declare type RenderQueueContextType = {
     jobs: RenderJob[];
 };
 export declare const RenderQueueContext: React.Context<RenderQueueContextType>;
+export declare const useShouldRenderLeftSidebarTabs: () => boolean;
 export declare const renderJobsRef: React.RefObject<{
     updateRenderJobs: (jobs: RenderJob[]) => void;
 }>;

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

@@ -23,12 +23,17 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.RenderQueueContextProvider = exports.renderJobsRef = exports.RenderQueueContext = void 0;
+exports.RenderQueueContextProvider = exports.renderJobsRef = exports.useShouldRenderLeftSidebarTabs = exports.RenderQueueContext = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
 exports.RenderQueueContext = react_1.default.createContext({
     jobs: [],
 });
+const useShouldRenderLeftSidebarTabs = () => {
+    const context = (0, react_1.useContext)(exports.RenderQueueContext);
+    return context.jobs.length > 0;
+};
+exports.useShouldRenderLeftSidebarTabs = useShouldRenderLeftSidebarTabs;
 exports.renderJobsRef = (0, react_1.createRef)();
 const RenderQueueContextProvider = ({ children }) => {
     const [jobs, setJobs] = (0, react_1.useState)(window.remotion_initialRenderQueue);

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

@@ -7,7 +7,7 @@ const colors_1 = require("../../helpers/colors");
 const context_1 = require("./context");
 const RenderQueueItem_1 = require("./RenderQueueItem");
 const separatorStyle = {
-    borderBottom: '1px solid ' + colors_1.BORDER_COLOR,
+    borderBottom: `1px solid ${colors_1.BORDER_COLOR}`,
 };
 const RenderQueue = () => {
     const { jobs } = (0, react_1.useContext)(context_1.RenderQueueContext);

package/dist/editor/components/RenderQueue/item-style.d.ts

@@ -0,0 +1,2 @@
+import type React from 'react';
+export declare const renderQueueItemSubtitleStyle: React.CSSProperties;

package/dist/editor/components/RenderQueue/item-style.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.renderQueueItemSubtitleStyle = void 0;
+const colors_1 = require("../../helpers/colors");
+const layout_1 = require("../layout");
+exports.renderQueueItemSubtitleStyle = {
+    fontSize: 13,
+    color: colors_1.LIGHT_TEXT,
+    appearance: 'none',
+    border: 'none',
+    padding: 0,
+    cursor: 'pointer',
+    lineHeight: 1.2,
+    textAlign: 'left',
+    whiteSpace: 'nowrap',
+    marginRight: layout_1.SPACING_UNIT,
+    overflowX: 'hidden',
+    // size smaller than viewport causes actual ellipse
+    maxWidth: 500,
+    textOverflow: 'ellipsis',
+};

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

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const RenderStillButton: React.FC;

package/dist/editor/components/RenderToolbarIcon.js

@@ -0,0 +1,47 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RenderStillButton = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const remotion_1 = require("remotion");
+const get_default_out_name_1 = require("../../get-default-out-name");
+const RenderStillIcon_1 = require("../icons/RenderStillIcon");
+const modals_1 = require("../state/modals");
+const ControlButton_1 = require("./ControlButton");
+const tooltip = 'Export the current frame as a still image';
+const style = {
+    width: 18,
+    height: 18,
+    color: 'white',
+};
+const RenderStillButton = () => {
+    const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
+    const video = remotion_1.Internals.useVideo();
+    const frame = (0, remotion_1.useCurrentFrame)();
+    const onClick = (0, react_1.useCallback)(() => {
+        var _a, _b, _c, _d, _e;
+        if (!video) {
+            return null;
+        }
+        setSelectedModal({
+            type: 'render',
+            compositionId: video.id,
+            initialFrame: frame,
+            // TODO: JPEG for video, PNG for image
+            initialImageFormat: 'png',
+            initialOutName: (0, get_default_out_name_1.getDefaultOutLocation)({
+                compositionName: video.id,
+                defaultExtension: 'png',
+            }),
+            // TODO: Determine defaults from config file
+            initialQuality: (_b = (_a = window.remotion_renderDefaults) === null || _a === void 0 ? void 0 : _a.quality) !== null && _b !== void 0 ? _b : 80,
+            initialScale: (_d = (_c = window.remotion_renderDefaults) === null || _c === void 0 ? void 0 : _c.scale) !== null && _d !== void 0 ? _d : 1,
+            initialVerbose: ((_e = window.remotion_renderDefaults) === null || _e === void 0 ? void 0 : _e.logLevel) === 'verbose',
+        });
+    }, [frame, setSelectedModal, video]);
+    if (!video) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsx)(ControlButton_1.ControlButton, { title: tooltip, "aria-label": tooltip, onClick: onClick, children: (0, jsx_runtime_1.jsx)(RenderStillIcon_1.RenderStill, { style: style }) }));
+};
+exports.RenderStillButton = RenderStillButton;

package/dist/editor/components/RendersTab.js

@@ -24,6 +24,7 @@ const badge = {
     justifyContent: 'center',
     alignItems: 'center',
 };
+// TODO: Don't show if preview server is disconnected
 const RendersTab = ({ selected, onClick }) => {
     const { jobs } = (0, react_1.useContext)(context_1.RenderQueueContext);
     const failedJobs = jobs.filter((j) => j.status === 'failed').length;
@@ -31,8 +32,11 @@ const RendersTab = ({ selected, onClick }) => {
     const badgeStyle = (0, react_1.useMemo)(() => {
         return {
             ...badge,
-            backgroundColor: failedJobs > 0 ? colors_1.FAIL_COLOR : 'white',
-            color: failedJobs > 0 ? 'white' : 'black',
+            backgroundColor: failedJobs > 0 ? colors_1.FAIL_COLOR : 'transparent',
+            color: failedJobs > 0 ? 'white' : colors_1.LIGHT_TEXT,
+            borderWidth: failedJobs > 0 ? 0 : 1,
+            borderStyle: 'solid',
+            borderColor: colors_1.LIGHT_TEXT,
         };
     }, [failedJobs]);
     return ((0, jsx_runtime_1.jsx)(Tabs_1.Tab, { selected: selected, onClick: onClick, children: (0, jsx_runtime_1.jsxs)("div", { style: row, children: ["Renders", jobCount > 0 ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.5 }), (0, jsx_runtime_1.jsx)("div", { style: badgeStyle, children: jobCount })] })) : null] }) }));

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

@@ -0,0 +1,15 @@
+import type { PropsWithChildren } from 'react';
+import React from 'react';
+export declare type SegmentedControlItem = {
+    label: React.ReactNode;
+    onClick: () => void;
+    key: string;
+    selected: boolean;
+};
+export declare const SegmentedControl: React.FC<{
+    items: SegmentedControlItem[];
+}>;
+export declare const Item: React.FC<PropsWithChildren<{
+    selected: boolean;
+    onClick: () => void;
+}>>;

package/dist/editor/components/SegmentedControl.js

@@ -0,0 +1,46 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Item = exports.SegmentedControl = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const colors_1 = require("../helpers/colors");
+const z_index_1 = require("../state/z-index");
+const container = {
+    display: 'flex',
+    flexDirection: 'row',
+    overflow: 'hidden',
+    border: '1px solid ' + colors_1.INPUT_BORDER_COLOR_UNHOVERED,
+};
+const item = {
+    display: 'flex',
+    fontSize: 13,
+    padding: '4px 12px',
+    cursor: 'pointer',
+    appearance: 'none',
+    border: 'none',
+};
+const SegmentedControl = ({ items }) => {
+    return ((0, jsx_runtime_1.jsx)("div", { style: container, children: items.map((i) => {
+            return ((0, jsx_runtime_1.jsx)(exports.Item, { onClick: i.onClick, selected: i.selected, children: i.label }, i.key));
+        }) }));
+};
+exports.SegmentedControl = SegmentedControl;
+const Item = ({ selected, onClick, children }) => {
+    const [hovered, setHovered] = (0, react_1.useState)(false);
+    const { tabIndex } = (0, z_index_1.useZIndex)();
+    const onPointerEnter = (0, react_1.useCallback)(() => {
+        setHovered(true);
+    }, []);
+    const onPointerLeave = (0, react_1.useCallback)(() => {
+        setHovered(false);
+    }, []);
+    const itemStyle = (0, react_1.useMemo)(() => {
+        return {
+            ...item,
+            backgroundColor: selected ? colors_1.INPUT_BACKGROUND : 'transparent',
+            color: selected ? 'white' : hovered ? 'white' : colors_1.LIGHT_TEXT,
+        };
+    }, [hovered, selected]);
+    return ((0, jsx_runtime_1.jsx)("button", { type: "button", onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, style: itemStyle, tabIndex: tabIndex, onClick: onClick, children: children }));
+};
+exports.Item = Item;