@remotion/cli 3.3.1 → 3.3.3

package/dist/compositions.js

@@ -10,21 +10,8 @@ const entry_point_1 = require("./entry-point");
 const get_cli_options_1 = require("./get-cli-options");
 const get_config_file_name_1 = require("./get-config-file-name");
 const log_1 = require("./log");
-const parse_command_line_1 = require("./parse-command-line");
+const print_compositions_1 = require("./print-compositions");
 const setup_cache_1 = require("./setup-cache");
-const max = (arr) => {
-    if (arr.length === 0) {
-        throw new Error('Array of 0 length');
-    }
-    let biggest = arr[0];
-    for (let i = 0; i < arr.length; i++) {
-        const elem = arr[i];
-        if (elem > biggest) {
-            biggest = elem;
-        }
-    }
-    return biggest;
-};
 const listCompositionsCommand = async (remotionRoot, args) => {
     const { file, reason } = (0, entry_point_1.findEntryPoint)(args, remotionRoot);
     if (!file) {
@@ -59,36 +46,7 @@ const listCompositionsCommand = async (remotionRoot, args) => {
         port,
         downloadMap,
     });
-    if (!(0, parse_command_line_1.quietFlagProvided)()) {
-        log_1.Log.info();
-        log_1.Log.info('The following compositions are available:');
-        log_1.Log.info();
-    }
-    const firstColumnLength = max(compositions.map(({ id }) => id.length)) + 4;
-    const secondColumnLength = 8;
-    const thirdColumnLength = 15;
-    if ((0, parse_command_line_1.quietFlagProvided)()) {
-        log_1.Log.info(compositions.map((c) => c.id).join(' '));
-        return;
-    }
-    log_1.Log.info(`${'Composition'.padEnd(firstColumnLength, ' ')}${'FPS'.padEnd(secondColumnLength)}${'Dimensions'.padEnd(thirdColumnLength, ' ')}Duration`);
-    log_1.Log.info(compositions
-        .map((comp) => {
-        const isStill = comp.durationInFrames === 1;
-        const dimensions = `${comp.width}x${comp.height}`;
-        const fps = isStill ? '' : comp.fps.toString();
-        const durationInSeconds = (comp.durationInFrames / comp.fps).toFixed(2);
-        const formattedDuration = isStill
-            ? 'Still'
-            : `${comp.durationInFrames} (${durationInSeconds} sec)`;
-        return [
-            comp.id.padEnd(firstColumnLength, ' '),
-            fps.padEnd(secondColumnLength, ' '),
-            dimensions.padEnd(thirdColumnLength, ' '),
-            formattedDuration,
-        ].join('');
-    })
-        .join('\n'));
+    (0, print_compositions_1.printCompositions)(compositions);
     await renderer_1.RenderInternals.cleanDownloadMap(downloadMap);
     await cleanupBundle();
     log_1.Log.verbose('Cleaned up', downloadMap.assetDir);

package/dist/config/index.js

@@ -70,6 +70,7 @@ const log_1 = require("./log");
 const max_timeline_tracks_2 = require("./max-timeline-tracks");
 const muted_1 = require("./muted");
 const number_of_gif_loops_1 = require("./number-of-gif-loops");
+const number_of_shared_audio_tags_1 = require("./number-of-shared-audio-tags");
 const output_location_2 = require("./output-location");
 const override_webpack_2 = require("./override-webpack");
 const overwrite_2 = require("./overwrite");
@@ -86,6 +87,7 @@ exports.Config = {
     Preview: {
         setMaxTimelineTracks: max_timeline_tracks_2.setMaxTimelineTracks,
         setKeyboardShortcutsEnabled: keyboard_shortcuts_1.setKeyboardShortcutsEnabled,
+        setNumberOfSharedAudioTags: number_of_shared_audio_tags_1.setNumberOfSharedAudioTags,
     },
     Bundling: {
         overrideWebpackConfig: override_webpack_2.overrideWebpackConfig,

package/dist/config/number-of-shared-audio-tags.d.ts

@@ -0,0 +1,2 @@
+export declare const getNumberOfSharedAudioTags: () => number;
+export declare const setNumberOfSharedAudioTags: (audioTags: number) => void;

package/dist/config/number-of-shared-audio-tags.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.setNumberOfSharedAudioTags = exports.getNumberOfSharedAudioTags = void 0;
+let numberOfSharedAudioTags = 0;
+const getNumberOfSharedAudioTags = () => {
+    return numberOfSharedAudioTags;
+};
+exports.getNumberOfSharedAudioTags = getNumberOfSharedAudioTags;
+const setNumberOfSharedAudioTags = (audioTags) => {
+    numberOfSharedAudioTags = audioTags;
+};
+exports.setNumberOfSharedAudioTags = setNumberOfSharedAudioTags;

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;
+}>;