@remotion/cli 3.3.8 → 3.3.9

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

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

@@ -0,0 +1,49 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Tab = exports.Tabs = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const colors_1 = require("../../helpers/colors");
+const tabsContainer = {
+    display: 'flex',
+    flexDirection: 'row',
+};
+const Tabs = ({ children, style }) => {
+    const definiteStyle = (0, react_1.useMemo)(() => {
+        return {
+            ...tabsContainer,
+            ...style,
+        };
+    }, [style]);
+    return (0, jsx_runtime_1.jsx)("div", { style: definiteStyle, children: children });
+};
+exports.Tabs = Tabs;
+const selectorButton = {
+    border: 'none',
+    flex: 1,
+    padding: 8,
+    fontSize: 13,
+};
+const Tab = ({ children, onClick, style, selected }) => {
+    const [hovered, setHovered] = (0, react_1.useState)(false);
+    const onPointerEnter = (0, react_1.useCallback)(() => {
+        setHovered(true);
+    }, []);
+    const onPointerLeave = (0, react_1.useCallback)(() => {
+        setHovered(false);
+    }, []);
+    const definiteStyle = (0, react_1.useMemo)(() => {
+        return {
+            ...selectorButton,
+            backgroundColor: selected
+                ? colors_1.SELECTED_BACKGROUND
+                : hovered
+                    ? colors_1.CLEAR_HOVER
+                    : 'transparent',
+            color: selected ? 'white' : colors_1.LIGHT_TEXT,
+            ...style,
+        };
+    }, [hovered, selected, style]);
+    return ((0, jsx_runtime_1.jsx)("button", { style: definiteStyle, type: "button", onClick: onClick, onPointerLeave: onPointerLeave, onPointerEnter: onPointerEnter, children: children }));
+};
+exports.Tab = Tab;

package/dist/editor/icons/render.d.ts

@@ -0,0 +1,6 @@
+import type { SVGProps } from 'react';
+import React from 'react';
+export declare const RenderIcon: React.FC<{
+    svgProps: SVGProps<SVGSVGElement>;
+    color: string;
+}>;

package/dist/editor/icons/render.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RenderIcon = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const RenderIcon = (props) => {
+    return ((0, jsx_runtime_1.jsx)("svg", { ...props.svgProps, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", children: (0, jsx_runtime_1.jsx)("path", { fill: props.color, d: "M408 143.1C408 166.1 390.1 183.1 368 183.1C345.9 183.1 328 166.1 328 143.1C328 121.9 345.9 103.1 368 103.1C390.1 103.1 408 121.9 408 143.1zM384 312.1V394.2C384 419.7 370.6 443.2 348.7 456.2L260.2 508.6C252.8 513 243.6 513.1 236.1 508.9C228.6 504.6 224 496.6 224 488V373.3C224 350.6 215 328.1 199 312.1C183 296.1 161.4 288 138.7 288H24C15.38 288 7.414 283.4 3.146 275.9C-1.123 268.4-1.042 259.2 3.357 251.8L55.83 163.3C68.79 141.4 92.33 127.1 117.8 127.1H199.9C281.7-3.798 408.8-8.546 483.9 5.272C495.6 7.411 504.6 16.45 506.7 28.07C520.5 103.2 515.8 230.3 384 312.1V312.1zM197.9 253.9C210.8 260.2 222.6 268.7 232.1 279C243.3 289.4 251.8 301.2 258.1 314.1C363.9 284.1 414.8 234.5 439.7 188C464.7 141.3 466.1 90.47 461.7 50.33C421.5 45.02 370.7 47.34 323.1 72.33C277.5 97.16 227.9 148.1 197.9 253.9H197.9zM41.98 345.5C76.37 311.1 132.1 311.1 166.5 345.5C200.9 379.9 200.9 435.6 166.5 470C117 519.5 .4765 511.5 .4765 511.5C.4765 511.5-7.516 394.1 41.98 345.5V345.5zM64.58 447.4C64.58 447.4 103.3 450.1 119.8 433.6C131.2 422.2 131.2 403.6 119.8 392.2C108.3 380.8 89.81 380.8 78.38 392.2C61.92 408.7 64.58 447.4 64.58 447.4z" }) }));
+};
+exports.RenderIcon = RenderIcon;

package/dist/find-closest-package-json.d.ts

@@ -0,0 +1,2 @@
+export declare const findClosestPackageJson: () => string | null;
+export declare const findRemotionRoot: () => string;

package/dist/find-closest-package-json.js

@@ -0,0 +1,35 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.findRemotionRoot = exports.findClosestPackageJson = void 0;
+const fs_1 = __importDefault(require("fs"));
+const path_1 = __importDefault(require("path"));
+const log_1 = require("./log");
+const recursionLimit = 5;
+const findClosestPackageJson = () => {
+    let currentDir = process.cwd();
+    let possiblePackageJson = '';
+    for (let i = 0; i < recursionLimit; i++) {
+        possiblePackageJson = path_1.default.join(currentDir, 'package.json');
+        const exists = fs_1.default.existsSync(possiblePackageJson);
+        if (exists) {
+            return possiblePackageJson;
+        }
+        currentDir = path_1.default.dirname(currentDir);
+    }
+    return null;
+};
+exports.findClosestPackageJson = findClosestPackageJson;
+const findRemotionRoot = () => {
+    const closestPackageJson = (0, exports.findClosestPackageJson)();
+    if (closestPackageJson === null) {
+        log_1.Log.error('Could not find a package.json in the current directory or any of the ' +
+            recursionLimit +
+            ' parent directories. Is this a Remotion project?');
+        process.exit(1);
+    }
+    return path_1.default.dirname(closestPackageJson);
+};
+exports.findRemotionRoot = findRemotionRoot;

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

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

package/dist/get-default-out-name.d.ts

@@ -0,0 +1,4 @@
+export declare const getDefaultOutLocation: ({ compositionName, defaultExtension, }: {
+    compositionName: string;
+    defaultExtension: string;
+}) => string;

package/dist/get-default-out-name.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getDefaultOutLocation = void 0;
+const getDefaultOutLocation = ({ compositionName, defaultExtension, }) => {
+    const defaultName = `out/${compositionName}.${defaultExtension}`;
+    return defaultName;
+};
+exports.getDefaultOutLocation = getDefaultOutLocation;

package/dist/index.d.ts

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

package/dist/preview-server/get-absolute-public-dir.d.ts

@@ -0,0 +1,4 @@
+export declare const getAbsolutePublicDir: ({ userPassedPublicDir, remotionRoot, }: {
+    userPassedPublicDir: string | null;
+    remotionRoot: string;
+}) => string;

package/dist/preview-server/get-absolute-public-dir.js

@@ -0,0 +1,14 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getAbsolutePublicDir = void 0;
+const path_1 = __importDefault(require("path"));
+const getAbsolutePublicDir = ({ userPassedPublicDir, remotionRoot, }) => {
+    const publicDir = userPassedPublicDir
+        ? path_1.default.resolve(remotionRoot, userPassedPublicDir)
+        : path_1.default.join(remotionRoot, 'public');
+    return publicDir;
+};
+exports.getAbsolutePublicDir = getAbsolutePublicDir;

package/dist/preview-server/get-files-in-public-folder.d.ts

@@ -0,0 +1,2 @@
+import type { StaticFile } from 'remotion';
+export declare const getFilesInPublicFolder: (publicFolder: string) => StaticFile[];

package/dist/preview-server/get-files-in-public-folder.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getFilesInPublicFolder = void 0;
+const getFilesInPublicFolder = (publicFolder) => {
+    return readRecursively({ folder: '.', startPath: publicFolder });
+};
+exports.getFilesInPublicFolder = getFilesInPublicFolder;

package/dist/preview-server/live-event-listener.js

@@ -0,0 +1 @@
+"use strict";

package/dist/preview-server/parse-body.d.ts

@@ -0,0 +1,2 @@
+import type { IncomingMessage } from 'http';
+export declare const parseRequestBody: (req: IncomingMessage) => Promise<unknown>;

package/dist/preview-server/parse-body.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.parseRequestBody = void 0;
+const parseRequestBody = async (req) => {
+    const body = await new Promise((_resolve) => {
+        let data = '';
+        req.on('data', (chunk) => {
+            data += chunk;
+        });
+        req.on('end', () => {
+            _resolve(data.toString());
+        });
+    });
+    return JSON.parse(body);
+};
+exports.parseRequestBody = parseRequestBody;

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

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

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

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

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

@@ -0,0 +1,2 @@
+import type { IncomingMessage, ServerResponse } from 'http';
+export declare const handleAddRender: (remotionRoot: string, req: IncomingMessage, res: ServerResponse, entryPoint: string) => Promise<void>;

package/dist/preview-server/render-queue/add-render.js

@@ -0,0 +1,39 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.handleAddRender = void 0;
+const path_1 = __importDefault(require("path"));
+const _1 = require(".");
+const parse_body_1 = require("../parse-body");
+const handleAddRender = async (remotionRoot, req, res, entryPoint) => {
+    if (req.method === 'OPTIONS') {
+        res.statusCode = 200;
+        res.end();
+    }
+    try {
+        const body = (await (0, parse_body_1.parseRequestBody)(req));
+        (0, _1.addJob)({
+            compositionId: body.compositionId,
+            id: String(Math.random()).replace('0.', ''),
+            startedAt: Date.now(),
+            type: 'still',
+            outputLocation: path_1.default.resolve(remotionRoot, body.outName),
+            status: 'idle',
+        }, entryPoint);
+        res.setHeader('content-type', 'application/json');
+        res.writeHead(200);
+        res.end(JSON.stringify({
+            success: true,
+        }));
+    }
+    catch (err) {
+        res.setHeader('content-type', 'application/json');
+        res.writeHead(200);
+        res.end(JSON.stringify({
+            success: false,
+        }));
+    }
+};
+exports.handleAddRender = handleAddRender;

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

@@ -0,0 +1,7 @@
+import type { RenderJob } from './job';
+export declare const getRenderQueue: () => RenderJob[];
+export declare const notifyClientsOfJobUpdate: () => void;
+export declare const processJob: (job: RenderJob, entryPoint: string) => Promise<never>;
+export declare const addJob: (job: RenderJob, entryPoint: string) => void;
+export declare const removeJob: (jobId: string) => void;
+export declare const processJobIfPossible: (entryPoint: string) => Promise<void>;

package/dist/preview-server/render-queue/index.js

@@ -0,0 +1,105 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.processJobIfPossible = exports.removeJob = exports.addJob = exports.processJob = exports.notifyClientsOfJobUpdate = exports.getRenderQueue = void 0;
+const bundler_1 = require("@remotion/bundler");
+const renderer_1 = require("@remotion/renderer");
+const live_events_1 = require("../live-events");
+let jobQueue = [];
+const updateJob = (id, updater) => {
+    jobQueue = jobQueue.map((j) => {
+        if (id === j.id) {
+            return updater(j);
+        }
+        return j;
+    });
+    (0, exports.notifyClientsOfJobUpdate)();
+};
+const getRenderQueue = () => {
+    return jobQueue;
+};
+exports.getRenderQueue = getRenderQueue;
+const notifyClientsOfJobUpdate = () => {
+    (0, live_events_1.waitForLiveEventsListener)().then((listener) => {
+        listener.sendEventToClient({
+            type: 'render-queue-updated',
+            queue: jobQueue,
+        });
+    });
+};
+exports.notifyClientsOfJobUpdate = notifyClientsOfJobUpdate;
+const processJob = async (job, entryPoint) => {
+    if (job.type === 'still') {
+        const serveUrl = await (0, bundler_1.bundle)({
+            entryPoint,
+            // TODO: Accept CLI options
+        });
+        const compositions = await (0, renderer_1.getCompositions)(serveUrl, {
+        // TODO: Accept CLI option
+        });
+        const composition = compositions.find((c) => {
+            return c.id === job.compositionId;
+        });
+        if (!composition) {
+            throw new TypeError(`Composition ${job.compositionId} not found`);
+        }
+        await (0, renderer_1.renderStill)({
+            composition,
+            output: job.outputLocation,
+            serveUrl,
+            // TODO: Accept CLI options
+        });
+    }
+    throw new TypeError(`Could not process job of type ${job.type}`);
+};
+exports.processJob = processJob;
+const addJob = (job, entryPoint) => {
+    jobQueue.push(job);
+    (0, exports.processJobIfPossible)(entryPoint);
+    (0, exports.notifyClientsOfJobUpdate)();
+};
+exports.addJob = addJob;
+const removeJob = (jobId) => {
+    jobQueue = jobQueue.filter((job) => job.id !== jobId);
+    (0, exports.notifyClientsOfJobUpdate)();
+};
+exports.removeJob = removeJob;
+const processJobIfPossible = async (entryPoint) => {
+    const nextJob = jobQueue.find((q) => {
+        return q.status === 'idle';
+    });
+    if (!nextJob) {
+        return;
+    }
+    try {
+        updateJob(nextJob.id, (job) => {
+            return {
+                ...job,
+                status: 'running',
+            };
+        });
+        await (0, exports.processJob)(nextJob, entryPoint);
+        updateJob(nextJob.id, (job) => {
+            return {
+                ...job,
+                status: 'done',
+            };
+        });
+    }
+    catch (err) {
+        updateJob(nextJob.id, (job) => {
+            return {
+                ...job,
+                status: 'failed',
+                error: err,
+            };
+        });
+        (0, live_events_1.waitForLiveEventsListener)().then((listener) => {
+            listener.sendEventToClient({
+                type: 'render-job-failed',
+                compositionId: nextJob.compositionId,
+                error: err,
+            });
+        });
+    }
+};
+exports.processJobIfPossible = processJobIfPossible;

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

@@ -0,0 +1,29 @@
+declare type RenderJobDynamicStatus = {
+    status: 'done';
+} | {
+    status: 'running';
+} | {
+    status: 'idle';
+} | {
+    status: 'failed';
+    error: Error;
+};
+export declare type RenderJob = {
+    startedAt: number;
+    compositionId: string;
+    type: 'still' | 'composition';
+    id: string;
+    outputLocation: string;
+} & RenderJobDynamicStatus;
+export declare type AddRenderRequest = {
+    compositionId: string;
+    type: 'still' | 'composition';
+    outName: string;
+};
+export declare type RemoveRenderRequest = {
+    jobId: string;
+};
+export declare type OpenInFileExplorerRequest = {
+    directory: string;
+};
+export {};

package/dist/preview-server/render-queue/job.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/preview-server/render-queue/open-directory-in-finder.d.ts

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

package/dist/preview-server/render-queue/open-directory-in-finder.js

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.openDirectoryInFinder = void 0;
+const child_process_1 = require("child_process");
+const os_1 = require("os");
+const openDirectoryInFinder = (dirToOpen) => {
+    const command = (0, os_1.platform)() === 'darwin'
+        ? 'open'
+        : (0, os_1.platform)() === 'linux'
+            ? 'xdg-open'
+            : 'explorer';
+    // TODO: What if file was deleted in the meanwhile?
+    // TODO: '-R' only works on macOS
+    const p = (0, child_process_1.spawn)(command, ['-R', dirToOpen]);
+    return new Promise((resolve, reject) => {
+        p.on('exit', (code) => {
+            if (code === 0) {
+                resolve();
+            }
+            else {
+                reject(new Error(`Exited with code ${code}`));
+            }
+        });
+        p.on('error', (err) => {
+            p.kill();
+            if (err) {
+                reject(err);
+            }
+        });
+    });
+};
+exports.openDirectoryInFinder = openDirectoryInFinder;

package/dist/preview-server/render-queue/open-in-file-explorer.d.ts

@@ -0,0 +1,2 @@
+import type { IncomingMessage, ServerResponse } from 'http';
+export declare const handleOpenInFileExplorer: (req: IncomingMessage, res: ServerResponse) => Promise<void>;

package/dist/preview-server/render-queue/open-in-file-explorer.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.handleOpenInFileExplorer = void 0;
+const parse_body_1 = require("../parse-body");
+const open_directory_in_finder_1 = require("./open-directory-in-finder");
+const handleOpenInFileExplorer = async (req, res) => {
+    if (req.method === 'OPTIONS') {
+        res.statusCode = 200;
+        res.end();
+    }
+    try {
+        const body = (await (0, parse_body_1.parseRequestBody)(req));
+        // TODO: Disallow opening file that is not in Remotion CWD
+        await (0, open_directory_in_finder_1.openDirectoryInFinder)(body.directory);
+        res.setHeader('content-type', 'application/json');
+        res.writeHead(200);
+        res.end(JSON.stringify({
+            success: true,
+        }));
+    }
+    catch (err) {
+        res.setHeader('content-type', 'application/json');
+        res.writeHead(200);
+        res.end(JSON.stringify({
+            success: false,
+            error: err.message,
+        }));
+    }
+};
+exports.handleOpenInFileExplorer = handleOpenInFileExplorer;

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

@@ -0,0 +1,2 @@
+import type { IncomingMessage, ServerResponse } from 'http';
+export declare const handleRemoveRender: (req: IncomingMessage, res: ServerResponse) => Promise<void>;

package/dist/preview-server/render-queue/remove-render.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.handleRemoveRender = void 0;
+const _1 = require(".");
+const parse_body_1 = require("../parse-body");
+const handleRemoveRender = async (req, res) => {
+    if (req.method === 'OPTIONS') {
+        res.statusCode = 200;
+        res.end();
+    }
+    try {
+        const body = (await (0, parse_body_1.parseRequestBody)(req));
+        (0, _1.removeJob)(body.jobId);
+        res.setHeader('content-type', 'application/json');
+        res.writeHead(200);
+        res.end(JSON.stringify({
+            success: true,
+        }));
+    }
+    catch (err) {
+        res.setHeader('content-type', 'application/json');
+        res.writeHead(200);
+        res.end(JSON.stringify({
+            success: false,
+        }));
+    }
+};
+exports.handleRemoveRender = handleRemoveRender;

package/dist/preview-server/write-files-definition-file.d.ts

@@ -0,0 +1,2 @@
+import type { StaticFile } from './get-files-in-public-folder';
+export declare const writeFilesDefinitionFile: (files: StaticFile[], remotionRoot: string) => void;

package/dist/preview-server/write-files-definition-file.js

@@ -0,0 +1,37 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.writeFilesDefinitionFile = void 0;
+const fs_1 = require("fs");
+const path_1 = __importDefault(require("path"));
+const writeFilesDefinitionFile = (files, remotionRoot) => {
+    const content = `
+/*
+	This file will give you autocompletions for staticFile().
+	Enable autocompletion by adding "autocomplete.d.ts" to the "include" array in "tsconfig.json".
+	This file is auto-generated - do not edit this file!
+	You may add it to your \`.gitignore\`.
+*/
+
+declare global {
+  interface RemotionStaticPaths {
+${files
+        .map((f) => {
+        // TODO: What if file contains '"'?
+        return `    ["${f.path}"]: unknown;`;
+    })
+        .join('\n')}
+  } 
+}  
+export {}
+`.trimStart();
+    const folder = path_1.default.join(remotionRoot);
+    if (!(0, fs_1.existsSync)(folder)) {
+        (0, fs_1.mkdirSync)(folder);
+    }
+    // TODO: Create folder if exists
+    (0, fs_1.writeFileSync)(path_1.default.join(folder, 'autocomplete.d.ts'), content);
+};
+exports.writeFilesDefinitionFile = writeFilesDefinitionFile;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@remotion/cli",
-	"version": "3.3.8",
+	"version": "3.3.9",
 	"description": "CLI for Remotion",
 	"main": "dist/index.js",
 	"sideEffects": false,
@@ -22,16 +22,16 @@
 	"author": "Jonny Burger <jonny@remotion.dev>",
 	"license": "SEE LICENSE IN LICENSE.md",
 	"dependencies": {
-		"@remotion/bundler": "3.3.8",
-		"@remotion/media-utils": "3.3.8",
-		"@remotion/player": "3.3.8",
-		"@remotion/renderer": "3.3.8",
+		"@remotion/bundler": "3.3.9",
+		"@remotion/media-utils": "3.3.9",
+		"@remotion/player": "3.3.9",
+		"@remotion/renderer": "3.3.9",
 		"better-opn": "2.1.1",
 		"dotenv": "9.0.2",
 		"memfs": "3.4.3",
 		"minimist": "1.2.6",
 		"prompts": "2.4.1",
-		"remotion": "3.3.8",
+		"remotion": "3.3.9",
 		"semver": "7.3.5",
 		"source-map": "0.6.1"
 	},
@@ -72,5 +72,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "4d4c78cf83b5fd085f24d5fd19f4507815e200a7"
+	"gitHead": "86269c98522cb7ea280f8283fa6c57885b971b3b"
 }