@remotion/cli 4.0.0-alpha.4 → 4.0.0-alpha10

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

@@ -0,0 +1,37 @@
+"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 InlineAction_1 = require("../InlineAction");
+const NotificationCenter_1 = require("../Notifications/NotificationCenter");
+const actions_1 = require("./actions");
+const RenderQueueRemoveItem = ({ job }) => {
+    const onClick = (0, react_1.useCallback)(() => {
+        (0, actions_1.removeRenderJob)(job)
+            .then(() => {
+            var _a;
+            (_a = NotificationCenter_1.notificationCenter.current) === null || _a === void 0 ? void 0 : _a.addNotification({
+                content: 'Removed job',
+                duration: 2000,
+                created: Date.now(),
+                id: String(Math.random()).replace('0.', ''),
+            });
+        })
+            .catch((err) => {
+            (0, NotificationCenter_1.sendErrorNotification)(`Could not remove item: ${err.message}`);
+            console.log(err);
+        });
+    }, [job]);
+    const icon = (0, react_1.useMemo)(() => {
+        return {
+            height: 16,
+            color: 'currentColor',
+        };
+    }, []);
+    const renderAction = (0, react_1.useCallback)((color) => {
+        return ((0, jsx_runtime_1.jsx)("svg", { style: icon, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 320 512", children: (0, jsx_runtime_1.jsx)("path", { fill: color, d: "M310.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L160 210.7 54.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L114.7 256 9.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 301.3 265.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L205.3 256 310.6 150.6z" }) }));
+    }, [icon]);
+    return (0, jsx_runtime_1.jsx)(InlineAction_1.InlineAction, { renderAction: renderAction, onClick: onClick });
+};
+exports.RenderQueueRemoveItem = RenderQueueRemoveItem;

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

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

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

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

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

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

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

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SuccessIcon = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const colors_1 = require("../../helpers/colors");
+const CircularProgress_1 = require("./CircularProgress");
+const iconStyle = {
+    height: CircularProgress_1.RENDER_STATUS_INDICATOR_SIZE,
+    width: CircularProgress_1.RENDER_STATUS_INDICATOR_SIZE,
+};
+const SuccessIcon = () => {
+    return ((0, jsx_runtime_1.jsx)("svg", { style: iconStyle, viewBox: "0 0 512 512", children: (0, jsx_runtime_1.jsx)("path", { fill: colors_1.LIGHT_TEXT, d: "M256 512c141.4 0 256-114.6 256-256S397.4 0 256 0S0 114.6 0 256S114.6 512 256 512zM369 209L241 337l-17 17-17-17-64-64-17-17L160 222.1l17 17 47 47L335 175l17-17L385.9 192l-17 17z" }) }));
+};
+exports.SuccessIcon = SuccessIcon;

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

@@ -0,0 +1,59 @@
+import type { AudioCodec, Codec, PixelFormat, ProResProfile, StillImageFormat, VideoImageFormat } from '@remotion/renderer';
+import type { RenderJob } from '../../../preview-server/render-queue/job';
+import type { RequiredChromiumOptions } from '../../../required-chromium-options';
+import type { EnumPath } from '../RenderModal/SchemaEditor/extract-enum-json-paths';
+export declare const addStillRenderJob: ({ compositionId, outName, imageFormat, jpegQuality, frame, scale, verbose, chromiumOptions, delayRenderTimeout, envVariables, inputProps, }: {
+    compositionId: string;
+    outName: string;
+    imageFormat: StillImageFormat;
+    jpegQuality: number | null;
+    frame: number;
+    scale: number;
+    verbose: boolean;
+    chromiumOptions: RequiredChromiumOptions;
+    delayRenderTimeout: number;
+    envVariables: Record<string, string>;
+    inputProps: Record<string, unknown>;
+}) => Promise<undefined>;
+export declare const addVideoRenderJob: ({ compositionId, outName, imageFormat, jpegQuality, scale, verbose, codec, concurrency, crf, startFrame, endFrame, muted, enforceAudioTrack, proResProfile, pixelFormat, audioBitrate, videoBitrate, everyNthFrame, numberOfGifLoops, delayRenderTimeout, audioCodec, disallowParallelEncoding, chromiumOptions, envVariables, inputProps, }: {
+    compositionId: string;
+    outName: string;
+    imageFormat: VideoImageFormat;
+    jpegQuality: number | null;
+    scale: number;
+    verbose: boolean;
+    codec: Codec;
+    concurrency: number;
+    crf: number | null;
+    startFrame: number;
+    endFrame: number;
+    muted: boolean;
+    enforceAudioTrack: boolean;
+    proResProfile: ProResProfile | null;
+    pixelFormat: PixelFormat;
+    audioBitrate: string | null;
+    videoBitrate: string | null;
+    everyNthFrame: number;
+    numberOfGifLoops: number | null;
+    delayRenderTimeout: number;
+    audioCodec: AudioCodec;
+    disallowParallelEncoding: boolean;
+    chromiumOptions: RequiredChromiumOptions;
+    envVariables: Record<string, string>;
+    inputProps: Record<string, unknown>;
+}) => Promise<undefined>;
+export declare const unsubscribeFromFileExistenceWatcher: ({ file, clientId, }: {
+    file: string;
+    clientId: string;
+}) => Promise<undefined>;
+export declare const subscribeToFileExistenceWatcher: ({ file, clientId, }: {
+    file: string;
+    clientId: string;
+}) => Promise<boolean>;
+export declare const openInFileExplorer: ({ directory }: {
+    directory: string;
+}) => Promise<void>;
+export declare const removeRenderJob: (job: RenderJob) => Promise<undefined>;
+export declare const cancelRenderJob: (job: RenderJob) => Promise<import("../../../preview-server/render-queue/job").CancelRenderResponse>;
+export declare const updateDefaultProps: (compositionId: string, defaultProps: unknown, enumPaths: EnumPath[]) => Promise<import("../../../preview-server/render-queue/job").UpdateDefaultPropsResponse>;
+export declare const canUpdateDefaultProps: (compositionId: string) => Promise<import("../../../preview-server/render-queue/job").CanUpdateDefaultPropsResponse>;

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

@@ -0,0 +1,124 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.canUpdateDefaultProps = exports.updateDefaultProps = exports.cancelRenderJob = exports.removeRenderJob = exports.openInFileExplorer = exports.subscribeToFileExistenceWatcher = exports.unsubscribeFromFileExistenceWatcher = exports.addVideoRenderJob = exports.addStillRenderJob = void 0;
+const input_props_serialization_1 = require("../RenderModal/SchemaEditor/input-props-serialization");
+const callApi = (endpoint, body) => {
+    return new Promise((resolve, reject) => {
+        fetch(endpoint, {
+            method: 'post',
+            headers: {
+                'content-type': 'application/json',
+            },
+            body: JSON.stringify(body),
+        })
+            .then((res) => res.json())
+            .then((data) => {
+            if (data.success) {
+                resolve(data.data);
+            }
+            else {
+                reject(new Error(data.error));
+            }
+        })
+            .catch((err) => {
+            reject(err);
+        });
+    });
+};
+const addStillRenderJob = ({ compositionId, outName, imageFormat, jpegQuality, frame, scale, verbose, chromiumOptions, delayRenderTimeout, envVariables, inputProps, }) => {
+    return callApi('/api/render', {
+        compositionId,
+        type: 'still',
+        outName,
+        imageFormat,
+        jpegQuality,
+        frame,
+        scale,
+        verbose,
+        chromiumOptions,
+        delayRenderTimeout,
+        envVariables,
+        inputProps,
+    });
+};
+exports.addStillRenderJob = addStillRenderJob;
+const addVideoRenderJob = ({ compositionId, outName, imageFormat, jpegQuality, scale, verbose, codec, concurrency, crf, startFrame, endFrame, muted, enforceAudioTrack, proResProfile, pixelFormat, audioBitrate, videoBitrate, everyNthFrame, numberOfGifLoops, delayRenderTimeout, audioCodec, disallowParallelEncoding, chromiumOptions, envVariables, inputProps, }) => {
+    return callApi('/api/render', {
+        compositionId,
+        type: 'video',
+        outName,
+        imageFormat,
+        jpegQuality,
+        scale,
+        verbose,
+        codec,
+        concurrency,
+        crf,
+        endFrame,
+        startFrame,
+        muted,
+        enforceAudioTrack,
+        proResProfile,
+        pixelFormat,
+        audioBitrate,
+        videoBitrate,
+        everyNthFrame,
+        numberOfGifLoops,
+        delayRenderTimeout,
+        audioCodec,
+        disallowParallelEncoding,
+        chromiumOptions,
+        envVariables,
+        inputProps,
+    });
+};
+exports.addVideoRenderJob = addVideoRenderJob;
+const unsubscribeFromFileExistenceWatcher = ({ file, clientId, }) => {
+    return callApi('/api/unsubscribe-from-file-existence', { file, clientId });
+};
+exports.unsubscribeFromFileExistenceWatcher = unsubscribeFromFileExistenceWatcher;
+const subscribeToFileExistenceWatcher = async ({ file, clientId, }) => {
+    const { exists } = await callApi('/api/subscribe-to-file-existence', {
+        file,
+        clientId,
+    });
+    return exists;
+};
+exports.subscribeToFileExistenceWatcher = subscribeToFileExistenceWatcher;
+const openInFileExplorer = ({ directory }) => {
+    const body = {
+        directory,
+    };
+    return callApi('/api/open-in-file-explorer', body);
+};
+exports.openInFileExplorer = openInFileExplorer;
+const removeRenderJob = (job) => {
+    return callApi('/api/remove-render', {
+        jobId: job.id,
+    });
+};
+exports.removeRenderJob = removeRenderJob;
+const cancelRenderJob = (job) => {
+    return callApi('/api/cancel', {
+        jobId: job.id,
+    });
+};
+exports.cancelRenderJob = cancelRenderJob;
+const updateDefaultProps = (compositionId, defaultProps, enumPaths) => {
+    return callApi('/api/update-default-props', {
+        compositionId,
+        defaultProps: (0, input_props_serialization_1.serializeJSONWithDate)({
+            data: defaultProps,
+            indent: undefined,
+            staticBase: window.remotion_staticBase,
+        }).serializedString,
+        enumPaths,
+    });
+};
+exports.updateDefaultProps = updateDefaultProps;
+const canUpdateDefaultProps = (compositionId) => {
+    return callApi('/api/can-update-default-props', {
+        compositionId,
+    });
+};
+exports.canUpdateDefaultProps = canUpdateDefaultProps;

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,50 @@
+"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 client_id_1 = require("../../helpers/client-id");
+const colors_1 = require("../../helpers/colors");
+const layout_1 = require("../layout");
+const is_menu_item_1 = require("../Menu/is-menu-item");
+const context_1 = require("./context");
+const RenderQueueItem_1 = require("./RenderQueueItem");
+const separatorStyle = {
+    borderBottom: `1px solid ${colors_1.BORDER_COLOR}`,
+};
+const errorExplanation = {
+    fontSize: 14,
+    color: colors_1.LIGHT_TEXT,
+    fontFamily: 'sans-serif',
+    lineHeight: 1.5,
+};
+const explainer = {
+    display: 'flex',
+    flex: 1,
+    flexDirection: 'column',
+    padding: '0 12px',
+    justifyContent: 'center',
+    alignItems: 'center',
+    textAlign: 'center',
+    background: colors_1.BACKGROUND,
+};
+const renderQueue = {
+    background: colors_1.BACKGROUND,
+    flex: 1,
+    overflowY: 'auto',
+};
+const RenderQueue = () => {
+    const connectionStatus = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx).type;
+    const { jobs } = (0, react_1.useContext)(context_1.RenderQueueContext);
+    const jobCount = jobs.length;
+    if (connectionStatus === 'disconnected') {
+        return ((0, jsx_runtime_1.jsxs)("div", { style: explainer, children: [(0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 5 }), (0, jsx_runtime_1.jsx)("div", { style: errorExplanation, children: "The preview server has disconnected." }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 2, block: true })] }));
+    }
+    if (jobCount === 0) {
+        return ((0, jsx_runtime_1.jsxs)("div", { style: explainer, children: [(0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 5 }), (0, jsx_runtime_1.jsx)("div", { style: errorExplanation, children: "No renders in the queue." }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 2, block: true })] }));
+    }
+    return ((0, jsx_runtime_1.jsx)("div", { style: renderQueue, className: ['css-reset', is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME].join(' '), 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/RenderQueue/item-style.d.ts

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

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

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

package/dist/editor/components/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,43 @@
+"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: 14,
+    color: 'inherit',
+    alignItems: 'center',
+    flex: 1,
+};
+const badge = {
+    height: 16,
+    width: 16,
+    borderRadius: 3,
+    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 : 'transparent',
+            color: failedJobs > 0 ? 'white' : colors_1.LIGHT_TEXT,
+            borderWidth: failedJobs > 0 ? 0 : 1,
+            borderStyle: 'solid',
+            borderColor: colors_1.LIGHT_TEXT,
+        };
+    }, [failedJobs]);
+    return ((0, jsx_runtime_1.jsx)(Tabs_1.Tab, { selected: selected, onClick: onClick, children: (0, jsx_runtime_1.jsxs)("div", { style: row, children: ["Renders", jobCount > 0 ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(layout_1.Flex, {}), (0, jsx_runtime_1.jsx)("div", { style: badgeStyle, children: jobCount })] })) : null] }) }));
+};
+exports.RendersTab = RendersTab;

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

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare const ResetZoomButton: React.FC<{
+    onClick: () => void;
+}>;

package/dist/editor/components/ResetZoomButton.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ResetZoomButton = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Button_1 = require("../../preview-server/error-overlay/remotion-overlay/Button");
+const ResetZoomButton = ({ onClick }) => {
+    return (0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: onClick, children: "Reset zoom" });
+};
+exports.ResetZoomButton = ResetZoomButton;

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

@@ -0,0 +1,8 @@
+import React from 'react';
+declare type SidebarPanel = 'input-props' | 'renders';
+export declare const persistSelectedPanel: (panel: SidebarPanel) => void;
+export declare const rightSidebarTabs: React.RefObject<{
+    selectRendersPanel: () => void;
+}>;
+export declare const RightPanel: React.FC<{}>;
+export {};

package/dist/editor/components/RightPanel.js

@@ -0,0 +1,79 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RightPanel = exports.rightSidebarTabs = exports.persistSelectedPanel = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const remotion_1 = require("remotion");
+const colors_1 = require("../helpers/colors");
+const DataEditor_1 = require("./RenderModal/DataEditor");
+const RenderQueue_1 = require("./RenderQueue");
+const RendersTab_1 = require("./RendersTab");
+const Tabs_1 = require("./Tabs");
+const container = {
+    height: '100%',
+    width: '100%',
+    position: 'absolute',
+    display: 'flex',
+    flexDirection: 'column',
+};
+const PropsEditor = ({ composition }) => {
+    const { props, updateProps } = (0, react_1.useContext)(remotion_1.Internals.EditorPropsContext);
+    const setInputProps = (0, react_1.useCallback)((newProps) => {
+        updateProps({
+            id: composition.id,
+            defaultProps: composition.defaultProps,
+            newProps,
+        });
+    }, [composition.defaultProps, composition.id, updateProps]);
+    const actualProps = (0, react_1.useMemo)(() => { var _a, _b; return (_b = (_a = props[composition.id]) !== null && _a !== void 0 ? _a : composition.defaultProps) !== null && _b !== void 0 ? _b : {}; }, [composition.defaultProps, composition.id, props]);
+    return ((0, jsx_runtime_1.jsx)(DataEditor_1.DataEditor, { unresolvedComposition: composition, inputProps: actualProps, setInputProps: setInputProps, compact: true, mayShowSaveButton: true, propsEditType: "default-props" }, composition.id));
+};
+const localStorageKey = 'remotion.sidebarPanel';
+const getSelectedPanel = () => {
+    const panel = localStorage.getItem(localStorageKey);
+    if (panel === 'renders') {
+        return 'renders';
+    }
+    return 'input-props';
+};
+const tabsContainer = {
+    backgroundColor: colors_1.BACKGROUND,
+};
+const persistSelectedPanel = (panel) => {
+    localStorage.setItem(localStorageKey, panel);
+};
+exports.persistSelectedPanel = persistSelectedPanel;
+exports.rightSidebarTabs = (0, react_1.createRef)();
+const RightPanel = () => {
+    const [panel, setPanel] = (0, react_1.useState)(() => getSelectedPanel());
+    const onCompositionsSelected = (0, react_1.useCallback)(() => {
+        setPanel('input-props');
+        (0, exports.persistSelectedPanel)('input-props');
+    }, []);
+    const onRendersSelected = (0, react_1.useCallback)(() => {
+        setPanel('renders');
+        (0, exports.persistSelectedPanel)('renders');
+    }, []);
+    (0, react_1.useImperativeHandle)(exports.rightSidebarTabs, () => {
+        return {
+            selectRendersPanel: () => {
+                setPanel('renders');
+                (0, exports.persistSelectedPanel)('renders');
+            },
+        };
+    }, []);
+    const { compositions, currentComposition } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
+    const composition = (0, react_1.useMemo)(() => {
+        for (const comp of compositions) {
+            if (comp.id === currentComposition) {
+                return comp;
+            }
+        }
+        return null;
+    }, [compositions, currentComposition]);
+    if (composition === null) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsxs)("div", { style: container, className: "css-reset", 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 === 'input-props', onClick: onCompositionsSelected, children: "Props" }), (0, jsx_runtime_1.jsx)(RendersTab_1.RendersTab, { onClick: onRendersSelected, selected: panel === 'renders' })] }) }), panel === 'renders' ? ((0, jsx_runtime_1.jsx)(RenderQueue_1.RenderQueue, {})) : ((0, jsx_runtime_1.jsx)(PropsEditor, { composition: composition }))] }));
+};
+exports.RightPanel = RightPanel;

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

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