@remotion/cli 3.3.11 → 3.3.13

package/dist/config/chromium-flags.d.ts

@@ -7,5 +7,3 @@ export declare const getChromiumOpenGlRenderer: () => "swangle" | "angle" | "egl
 export declare const setChromiumOpenGlRenderer: (renderer: OpenGlRenderer) => void;
 export declare const getChromiumHeadlessMode: () => boolean;
 export declare const setChromiumHeadlessMode: (should: boolean) => void;
-export declare const getChromiumEnableExtensions: () => boolean;
-export declare const setEnableChromiumExtensions: (should: boolean) => void;

package/dist/config/chromium-flags.js

@@ -1,12 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.setEnableChromiumExtensions = exports.getChromiumEnableExtensions = exports.setChromiumHeadlessMode = exports.getChromiumHeadlessMode = exports.setChromiumOpenGlRenderer = exports.getChromiumOpenGlRenderer = exports.setChromiumIgnoreCertificateErrors = exports.getIgnoreCertificateErrors = exports.setChromiumDisableWebSecurity = exports.getChromiumDisableWebSecurity = void 0;
+exports.setChromiumHeadlessMode = exports.getChromiumHeadlessMode = exports.setChromiumOpenGlRenderer = exports.getChromiumOpenGlRenderer = exports.setChromiumIgnoreCertificateErrors = exports.getIgnoreCertificateErrors = exports.setChromiumDisableWebSecurity = exports.getChromiumDisableWebSecurity = void 0;
 const renderer_1 = require("@remotion/renderer");
 let chromiumDisableWebSecurity = false;
 let ignoreCertificateErrors = false;
 let openGlRenderer = renderer_1.RenderInternals.DEFAULT_OPENGL_RENDERER;
 let headlessMode = true;
-let enableExtensions = false;
 const getChromiumDisableWebSecurity = () => chromiumDisableWebSecurity;
 exports.getChromiumDisableWebSecurity = getChromiumDisableWebSecurity;
 const setChromiumDisableWebSecurity = (should) => {
@@ -32,9 +31,3 @@ const setChromiumHeadlessMode = (should) => {
     headlessMode = should;
 };
 exports.setChromiumHeadlessMode = setChromiumHeadlessMode;
-const getChromiumEnableExtensions = () => enableExtensions;
-exports.getChromiumEnableExtensions = getChromiumEnableExtensions;
-const setEnableChromiumExtensions = (should) => {
-    enableExtensions = should;
-};
-exports.setEnableChromiumExtensions = setEnableChromiumExtensions;

package/dist/config/index.d.ts

@@ -23,7 +23,6 @@ export declare const ConfigInternals: {
     getIgnoreCertificateErrors: () => boolean;
     getChromiumHeadlessMode: () => boolean;
     getChromiumOpenGlRenderer: () => "swangle" | "angle" | "egl" | "swiftshader" | null;
-    getChromiumEnableExtensions: () => boolean;
     getEveryNthFrame: () => number;
     getConcurrency: () => number | null;
     getCurrentPuppeteerTimeout: () => number;

package/dist/config/index.js

@@ -107,7 +107,6 @@ exports.Config = {
         setChromiumDisableWebSecurity: chromium_flags_2.setChromiumDisableWebSecurity,
         setChromiumIgnoreCertificateErrors: chromium_flags_2.setChromiumIgnoreCertificateErrors,
         setChromiumHeadlessMode: chromium_flags_2.setChromiumHeadlessMode,
-        setEnableChromiumExtensions: chromium_flags_1.setEnableChromiumExtensions,
         setChromiumOpenGlRenderer: chromium_flags_2.setChromiumOpenGlRenderer,
     },
     Rendering: {
@@ -157,7 +156,6 @@ exports.ConfigInternals = {
     getIgnoreCertificateErrors: chromium_flags_1.getIgnoreCertificateErrors,
     getChromiumHeadlessMode: chromium_flags_1.getChromiumHeadlessMode,
     getChromiumOpenGlRenderer: chromium_flags_1.getChromiumOpenGlRenderer,
-    getChromiumEnableExtensions: chromium_flags_1.getChromiumEnableExtensions,
     getEveryNthFrame: every_nth_frame_1.getEveryNthFrame,
     getConcurrency: concurrency_1.getConcurrency,
     getCurrentPuppeteerTimeout: timeout_1.getCurrentPuppeteerTimeout,

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" | "info" | "warn" | "error";
 export declare const setLogLevel: (newLogLevel: LogLevel) => void;

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

@@ -0,0 +1,6 @@
+import React from 'react';
+import type { TCompMetadata } from 'remotion';
+export declare const COMPOSITION_ITEM_HEIGHT = 32;
+export declare const RenderButton: React.FC<{
+    composition: TCompMetadata;
+}>;

package/dist/editor/components/RenderButton.js

@@ -0,0 +1,53 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RenderButton = exports.COMPOSITION_ITEM_HEIGHT = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const colors_1 = require("../helpers/colors");
+const render_1 = require("../icons/render");
+const modals_1 = require("../state/modals");
+const z_index_1 = require("../state/z-index");
+exports.COMPOSITION_ITEM_HEIGHT = 32;
+const itemStyle = {
+    display: 'flex',
+    cursor: 'default',
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginBottom: 1,
+    appearance: 'none',
+    border: 'none',
+    height: exports.COMPOSITION_ITEM_HEIGHT,
+};
+const RenderButton = ({ composition }) => {
+    const [hovered, setHovered] = (0, react_1.useState)(false);
+    const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
+    const onPointerEnter = (0, react_1.useCallback)(() => {
+        setHovered(true);
+    }, []);
+    const onPointerLeave = (0, react_1.useCallback)(() => {
+        setHovered(false);
+    }, []);
+    const { tabIndex } = (0, z_index_1.useZIndex)();
+    const style = (0, react_1.useMemo)(() => {
+        return {
+            ...itemStyle,
+            backgroundColor: hovered ? colors_1.CLEAR_HOVER : 'transparent',
+            color: hovered ? 'white' : colors_1.LIGHT_TEXT,
+        };
+    }, [hovered]);
+    const iconStyle = (0, react_1.useMemo)(() => {
+        return {
+            style: {
+                height: 14,
+            },
+        };
+    }, []);
+    const onClick = (0, react_1.useCallback)(() => {
+        setSelectedModal({
+            type: 'render',
+            composition,
+        });
+    }, [composition, setSelectedModal]);
+    return ((0, jsx_runtime_1.jsx)("button", { style: style, tabIndex: tabIndex, onClick: onClick, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, type: "button", children: (0, jsx_runtime_1.jsx)(render_1.RenderIcon, { svgProps: iconStyle, color: hovered ? 'white' : colors_1.LIGHT_TEXT }) }));
+};
+exports.RenderButton = RenderButton;

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

@@ -0,0 +1,5 @@
+import React from 'react';
+import type { TCompMetadata } from 'remotion';
+export declare const RenderModal: React.FC<{
+    composition: TCompMetadata;
+}>;

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

@@ -0,0 +1,90 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RenderModal = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const get_default_out_name_1 = require("../../../get-default-out-name");
+const Button_1 = require("../../../preview-server/error-overlay/remotion-overlay/Button");
+const modals_1 = require("../../state/modals");
+const layout_1 = require("../layout");
+const ModalContainer_1 = require("../ModalContainer");
+const ModalHeader_1 = require("../ModalHeader");
+const RemInput_1 = require("../NewComposition/RemInput");
+const SidebarContent_1 = require("../SidebarContent");
+const initialState = { type: 'idle' };
+const reducer = (state, action) => {
+    if (action.type === 'start') {
+        return {
+            type: 'load',
+        };
+    }
+    if (action.type === 'fail') {
+        return {
+            type: 'error',
+        };
+    }
+    if (action.type === 'succeed') {
+        return {
+            type: 'success',
+        };
+    }
+    return state;
+};
+const container = {
+    padding: 20,
+};
+const RenderModal = ({ composition, }) => {
+    const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
+    const onQuit = (0, react_1.useCallback)(() => {
+        setSelectedModal(null);
+    }, [setSelectedModal]);
+    const isMounted = (0, react_1.useRef)(true);
+    const [state, dispatch] = (0, react_1.useReducer)(reducer, initialState);
+    // TODO: Allow to change out name
+    const [outName] = (0, react_1.useState)(() => (0, get_default_out_name_1.getDefaultOutLocation)({
+        compositionName: composition.id,
+        // TODO: Set default extension
+        defaultExtension: 'png',
+    }));
+    const dispatchIfMounted = (0, react_1.useCallback)((payload) => {
+        if (isMounted.current === false)
+            return;
+        dispatch(payload);
+    }, []);
+    const onClick = (0, react_1.useCallback)(() => {
+        var _a;
+        const body = {
+            compositionId: composition.id,
+            type: 'still',
+            outName,
+        };
+        (_a = SidebarContent_1.leftSidebarTabs.current) === null || _a === void 0 ? void 0 : _a.selectRendersPanel();
+        fetch(`/api/render`, {
+            method: 'post',
+            headers: {
+                'content-type': 'application/json',
+            },
+            body: JSON.stringify(body),
+        })
+            .then((res) => res.json())
+            .then((data) => {
+            if (data.success) {
+                dispatchIfMounted({ type: 'succeed' });
+                setSelectedModal(null);
+            }
+            else {
+                dispatchIfMounted({ type: 'fail' });
+            }
+        })
+            .catch(() => {
+            dispatchIfMounted({ type: 'fail' });
+        });
+    }, [composition.id, dispatchIfMounted, outName, setSelectedModal]);
+    (0, react_1.useEffect)(() => {
+        return () => {
+            isMounted.current = false;
+        };
+    }, []);
+    return ((0, jsx_runtime_1.jsxs)(ModalContainer_1.ModalContainer, { onOutsideClick: onQuit, onEscape: onQuit, children: [(0, jsx_runtime_1.jsx)(ModalHeader_1.NewCompHeader, { title: `Render ${composition.id}` }), (0, jsx_runtime_1.jsxs)("div", { style: container, children: [(0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(RemInput_1.RemotionInput, { type: "text", value: outName }) }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { block: true, y: 0.5 }), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: onClick, disabled: state.type === 'load', children: state.type === 'idle' ? 'Render' : 'Rendering...' }) })] })] }));
+};
+exports.RenderModal = RenderModal;

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

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

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

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RenderQueueItem = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const layout_1 = require("../layout");
+const RenderQueueItemStatus_1 = require("./RenderQueueItemStatus");
+const RenderQueueOutputName_1 = require("./RenderQueueOutputName");
+const RenderQueueRemoveItem_1 = require("./RenderQueueRemoveItem");
+const container = {
+    padding: 12,
+    display: 'flex',
+    flexDirection: 'row',
+    paddingBottom: 10,
+};
+const title = {
+    fontSize: 13,
+    lineHeight: 1,
+};
+const right = {
+    flex: 1,
+};
+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 })] }));
+};
+exports.RenderQueueItem = RenderQueueItem;

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

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

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

@@ -0,0 +1,19 @@
+"use strict";
+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 iconStyle = {
+    height: 16,
+    width: 16,
+};
+const RenderQueueItemStatus = ({ job }) => {
+    if (job.status === 'failed') {
+        return ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)("svg", { style: iconStyle, viewBox: "0 0 512 512", children: (0, jsx_runtime_1.jsx)("path", { fill: colors_1.FAIL_COLOR, d: "M0 160V352L160 512H352L512 352V160L352 0H160L0 160zm353.9 32l-17 17-47 47 47 47 17 17L320 353.9l-17-17-47-47-47 47-17 17L158.1 320l17-17 47-47-47-47-17-17L192 158.1l17 17 47 47 47-47 17-17L353.9 192z" }) }) }));
+    }
+    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 });
+};
+exports.RenderQueueItemStatus = RenderQueueItemStatus;

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

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

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

@@ -0,0 +1,70 @@
+"use strict";
+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 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) => {
+            var _a;
+            (_a = NotificationCenter_1.notificationCenter.current) === null || _a === void 0 ? void 0 : _a.addNotification({
+                content: `Could not open file: ${err.message}`,
+                created: Date.now(),
+                duration: 2000,
+                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) }));
+};
+exports.RenderQueueOutputName = RenderQueueOutputName;

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

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

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

@@ -0,0 +1,56 @@
+"use strict";
+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 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(() => {
+            // TODO: Handle error
+        });
+    }, [job.id]);
+    const [hovered, setHovered] = (0, react_1.useState)(false);
+    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" }) }) }));
+};
+exports.RenderQueueRemoveItem = RenderQueueRemoveItem;

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

@@ -0,0 +1,18 @@
+import React from 'react';
+import type { RenderJob } from '../../../preview-server/render-queue/job';
+declare global {
+    interface Window {
+        remotion_initialRenderQueue: RenderJob[];
+    }
+}
+declare type RenderQueueContextType = {
+    jobs: RenderJob[];
+};
+export declare const RenderQueueContext: React.Context<RenderQueueContextType>;
+export declare const renderJobsRef: React.RefObject<{
+    updateRenderJobs: (jobs: RenderJob[]) => void;
+}>;
+export declare const RenderQueueContextProvider: React.FC<{
+    children: React.ReactNode;
+}>;
+export {};

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

@@ -0,0 +1,49 @@
+"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.RenderQueueContextProvider = exports.renderJobsRef = 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: [],
+});
+exports.renderJobsRef = (0, react_1.createRef)();
+const RenderQueueContextProvider = ({ children }) => {
+    const [jobs, setJobs] = (0, react_1.useState)(window.remotion_initialRenderQueue);
+    const value = (0, react_1.useMemo)(() => {
+        return {
+            jobs,
+        };
+    }, [jobs]);
+    (0, react_1.useImperativeHandle)(exports.renderJobsRef, () => {
+        return {
+            updateRenderJobs: (newJobs) => {
+                setJobs(newJobs);
+            },
+        };
+    }, []);
+    return ((0, jsx_runtime_1.jsx)(exports.RenderQueueContext.Provider, { value: value, children: children }));
+};
+exports.RenderQueueContextProvider = RenderQueueContextProvider;

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

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

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

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RenderQueue = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+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,
+};
+const RenderQueue = () => {
+    const { jobs } = (0, react_1.useContext)(context_1.RenderQueueContext);
+    return ((0, jsx_runtime_1.jsx)("div", { children: jobs.map((j, index) => {
+            return ((0, jsx_runtime_1.jsx)("div", { style: index === jobs.length - 1 ? undefined : separatorStyle, children: (0, jsx_runtime_1.jsx)(RenderQueueItem_1.RenderQueueItem, { job: j }) }, j.id));
+        }) }));
+};
+exports.RenderQueue = RenderQueue;

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

@@ -0,0 +1,6 @@
+import type { MouseEventHandler } from 'react';
+import React from 'react';
+export declare const RendersTab: React.FC<{
+    selected: boolean;
+    onClick: MouseEventHandler<HTMLButtonElement>;
+}>;

package/dist/editor/components/RendersTab.js

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RendersTab = 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 context_1 = require("./RenderQueue/context");
+const Tabs_1 = require("./Tabs");
+const row = {
+    display: 'flex',
+    flexDirection: 'row',
+    fontSize: 13,
+    justifyContent: 'center',
+    color: 'inherit',
+    alignItems: 'center',
+};
+const badge = {
+    height: 16,
+    width: 16,
+    borderRadius: 8,
+    fontSize: 10,
+    display: 'inline-flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+};
+const RendersTab = ({ selected, onClick }) => {
+    const { jobs } = (0, react_1.useContext)(context_1.RenderQueueContext);
+    const failedJobs = jobs.filter((j) => j.status === 'failed').length;
+    const jobCount = jobs.length;
+    const badgeStyle = (0, react_1.useMemo)(() => {
+        return {
+            ...badge,
+            backgroundColor: failedJobs > 0 ? colors_1.FAIL_COLOR : 'white',
+            color: failedJobs > 0 ? 'white' : 'black',
+        };
+    }, [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] }) }));
+};
+exports.RendersTab = RendersTab;

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

@@ -0,0 +1,5 @@
+import React from 'react';
+export declare const leftSidebarTabs: React.RefObject<{
+    selectRendersPanel: () => void;
+}>;
+export declare const SidebarContent: React.FC;

package/dist/editor/components/SidebarContent.js

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SidebarContent = exports.leftSidebarTabs = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const colors_1 = require("../helpers/colors");
+const CompositionSelector_1 = require("./CompositionSelector");
+const RenderQueue_1 = require("./RenderQueue");
+const RendersTab_1 = require("./RendersTab");
+const Tabs_1 = require("./Tabs");
+const container = {
+    width: '100%',
+};
+const tabsContainer = {
+    padding: 4,
+    borderBottom: `1px solid ${colors_1.BORDER_COLOR}`,
+};
+exports.leftSidebarTabs = (0, react_1.createRef)();
+const SidebarContent = () => {
+    const [panel, setPanel] = (0, react_1.useState)('compositions');
+    const onCompositionsSelected = (0, react_1.useCallback)(() => {
+        setPanel('compositions');
+    }, []);
+    const onRendersSelected = (0, react_1.useCallback)(() => {
+        setPanel('renders');
+    }, []);
+    (0, react_1.useImperativeHandle)(exports.leftSidebarTabs, () => {
+        return {
+            selectRendersPanel: () => setPanel('renders'),
+        };
+    }, []);
+    return ((0, jsx_runtime_1.jsxs)("div", { style: container, children: [(0, jsx_runtime_1.jsx)("div", { style: tabsContainer, children: (0, jsx_runtime_1.jsxs)(Tabs_1.Tabs, { children: [(0, jsx_runtime_1.jsx)(Tabs_1.Tab, { selected: panel === 'compositions', onClick: onCompositionsSelected, children: "Compositions" }), (0, jsx_runtime_1.jsx)(RendersTab_1.RendersTab, { onClick: onRendersSelected, selected: panel === 'renders' })] }) }), panel === 'compositions' ? (0, jsx_runtime_1.jsx)(CompositionSelector_1.CompositionSelector, {}) : (0, jsx_runtime_1.jsx)(RenderQueue_1.RenderQueue, {})] }));
+};
+exports.SidebarContent = SidebarContent;

package/dist/editor/components/Tabs/index.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+export declare const Tabs: React.FC<{
+    children: React.ReactNode;
+    style?: React.CSSProperties;
+}>;
+export declare const Tab: React.FC<{
+    children: React.ReactNode;
+    onClick: React.MouseEventHandler<HTMLButtonElement>;
+    style?: React.CSSProperties;
+    selected: boolean;
+}>;