@remotion/cli 4.0.113 → 4.0.115

package/dist/editor/components/NewComposition/ValidationMessage.js

@@ -1,34 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ValidationMessage = exports.WarningTriangle = 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 WarningTriangle = (props) => {
-    return ((0, jsx_runtime_1.jsx)("svg", { viewBox: "0 0 576 512", ...props, children: (0, jsx_runtime_1.jsx)("path", { d: "M248.747 204.705l6.588 112c.373 6.343 5.626 11.295 11.979 11.295h41.37a12 12 0 0 0 11.979-11.295l6.588-112c.405-6.893-5.075-12.705-11.979-12.705h-54.547c-6.903 0-12.383 5.812-11.978 12.705zM330 384c0 23.196-18.804 42-42 42s-42-18.804-42-42 18.804-42 42-42 42 18.804 42 42zm-.423-360.015c-18.433-31.951-64.687-32.009-83.154 0L6.477 440.013C-11.945 471.946 11.118 512 48.054 512H527.94c36.865 0 60.035-39.993 41.577-71.987L329.577 23.985zM53.191 455.002L282.803 57.008c2.309-4.002 8.085-4.002 10.394 0l229.612 397.993c2.308 4-.579 8.998-5.197 8.998H58.388c-4.617.001-7.504-4.997-5.197-8.997z" }) }));
-};
-exports.WarningTriangle = WarningTriangle;
-const style = {
-    width: 12,
-    height: 12,
-    flexShrink: 0,
-};
-const container = {
-    maxWidth: 500,
-};
-const label = {
-    fontSize: 13,
-    color: 'white',
-    fontFamily: 'sans-serif',
-};
-const ValidationMessage = ({ message, align, type }) => {
-    const finalStyle = (0, react_1.useMemo)(() => {
-        return {
-            ...style,
-            fill: type === 'warning' ? colors_1.WARNING_COLOR : colors_1.FAIL_COLOR,
-        };
-    }, [type]);
-    return ((0, jsx_runtime_1.jsx)("div", { style: container, children: (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", justify: align, children: [(0, jsx_runtime_1.jsx)(exports.WarningTriangle, { style: finalStyle }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), (0, jsx_runtime_1.jsx)("div", { style: label, children: message })] }) }));
-};
-exports.ValidationMessage = ValidationMessage;

package/dist/editor/components/NewComposition/new-comp-layout.d.ts

@@ -1,4 +0,0 @@
-import type React from 'react';
-export declare const leftLabel: React.CSSProperties;
-export declare const inputArea: React.CSSProperties;
-export declare const rightLabel: React.CSSProperties;

package/dist/editor/components/NewComposition/new-comp-layout.js

@@ -1,20 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.rightLabel = exports.inputArea = exports.leftLabel = void 0;
-const colors_1 = require("../../helpers/colors");
-exports.leftLabel = {
-    width: 160,
-    display: 'inline-block',
-    textAlign: 'right',
-    paddingRight: 30,
-    fontSize: 14,
-    color: colors_1.LIGHT_COLOR,
-};
-exports.inputArea = {
-    width: 190,
-};
-exports.rightLabel = {
-    fontSize: 13,
-    color: colors_1.LIGHT_TEXT,
-    marginLeft: 10,
-};

package/dist/editor/components/NewComposition/render-aspect-ratio.d.ts

@@ -1 +0,0 @@
-export declare const aspectRatio: (width: number, height: number) => string;

package/dist/editor/components/NewComposition/render-aspect-ratio.js

@@ -1,23 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.aspectRatio = void 0;
-function gcd_two_numbers(x, y) {
-    x = Math.abs(x);
-    y = Math.abs(y);
-    while (y) {
-        const t = y;
-        y = x % y;
-        x = t;
-    }
-    return x;
-}
-const aspectRatio = (width, height) => {
-    const commonDivisor = gcd_two_numbers(width, height);
-    const widthDivisor = width / commonDivisor;
-    const heightDivisor = height / commonDivisor;
-    if (widthDivisor < 100) {
-        return widthDivisor + ':' + heightDivisor;
-    }
-    return (widthDivisor / heightDivisor).toFixed(2);
-};
-exports.aspectRatio = aspectRatio;

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

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

package/dist/editor/components/NoRegisterRoot.js

@@ -1,41 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.NoRegisterRoot = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const label = {
-    fontSize: 13,
-    color: 'white',
-    fontFamily: 'Arial, Helvetica, sans-serif',
-};
-const container = {
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center',
-    flex: 1,
-    flexDirection: 'column',
-    textAlign: 'center',
-    lineHeight: 1.5,
-};
-const link = {
-    color: 'white',
-    textDecoration: 'none',
-    borderBottom: '1px solid',
-};
-const NoRegisterRoot = () => {
-    const [show, setShow] = (0, react_1.useState)(() => false);
-    (0, react_1.useEffect)(() => {
-        // Only show after 2 seconds so there is no flicker when the load is really fast
-        const timeout = setTimeout(() => {
-            setShow(true);
-        }, 2000);
-        return () => {
-            clearTimeout(timeout);
-        };
-    }, []);
-    if (!show) {
-        return null;
-    }
-    return ((0, jsx_runtime_1.jsxs)("div", { style: container, children: [(0, jsx_runtime_1.jsx)("div", { style: label, children: "Waiting for registerRoot() to get called." }), (0, jsx_runtime_1.jsxs)("div", { style: label, children: ["Learn more:", ' ', (0, jsx_runtime_1.jsx)("a", { target: '_blank', style: link, href: "https://www.remotion.dev/docs/register-root", children: "remotion.dev/docs/register-root" })] })] }));
-};
-exports.NoRegisterRoot = NoRegisterRoot;

package/dist/editor/components/Notifications/ColorDot.d.ts

@@ -1,4 +0,0 @@
-import React from 'react';
-export declare const ColorDot: React.FC<{
-    color: string;
-}>;

package/dist/editor/components/Notifications/ColorDot.js

@@ -1,22 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ColorDot = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const container = {
-    height: 16,
-    width: 16,
-    backgroundColor: 'red',
-    border: '1px solid rgba(255, 255, 255, 0.2)',
-    borderRadius: 8,
-};
-const ColorDot = ({ color }) => {
-    const style = (0, react_1.useMemo)(() => {
-        return {
-            ...container,
-            backgroundColor: color,
-        };
-    }, [color]);
-    return (0, jsx_runtime_1.jsx)("div", { style: style });
-};
-exports.ColorDot = ColorDot;

package/dist/editor/components/Notifications/Notification.d.ts

@@ -1,8 +0,0 @@
-import React from 'react';
-export declare const Notification: React.FC<{
-    children: React.ReactNode;
-    created: number;
-    duration: number;
-    id: string;
-    onRemove: (id: string) => void;
-}>;

package/dist/editor/components/Notifications/Notification.js

@@ -1,31 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Notification = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const notification = {
-    backgroundColor: '#111111',
-    color: 'white',
-    fontFamily: 'Arial, Helvetica, sans-serif',
-    display: 'inline-flex',
-    padding: '8px 14px',
-    borderRadius: 4,
-    fontSize: 15,
-    border: '0.25px solid rgba(255, 255, 255, 0.1)',
-    boxShadow: '0 2px 3px rgba(0, 0, 0, 1)',
-    marginTop: 3,
-    marginBottom: 3,
-    alignItems: 'center',
-};
-const Notification = ({ children, id, duration, created, onRemove }) => {
-    (0, react_1.useEffect)(() => {
-        const timeout = setTimeout(() => {
-            onRemove(id);
-        }, duration - (Date.now() - created));
-        return () => {
-            clearTimeout(timeout);
-        };
-    }, [created, duration, id, onRemove]);
-    return ((0, jsx_runtime_1.jsx)("div", { className: "css-reset", style: notification, children: children }));
-};
-exports.Notification = Notification;

package/dist/editor/components/Notifications/NotificationCenter.d.ts

@@ -1,14 +0,0 @@
-import React from 'react';
-type TNotification = {
-    id: string;
-    content: React.ReactNode;
-    created: number;
-    duration: number;
-};
-type TNotificationCenter = {
-    addNotification: (notification: TNotification) => void;
-};
-export declare const notificationCenter: React.RefObject<TNotificationCenter>;
-export declare const sendErrorNotification: (content: React.ReactNode) => void;
-export declare const NotificationCenter: React.FC;
-export {};

package/dist/editor/components/Notifications/NotificationCenter.js

@@ -1,50 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.NotificationCenter = exports.sendErrorNotification = exports.notificationCenter = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const Notification_1 = require("./Notification");
-const container = {
-    position: 'absolute',
-    justifyContent: 'center',
-    alignItems: 'center',
-    display: 'flex',
-    width: '100%',
-    flexDirection: 'column',
-    paddingTop: 20,
-    pointerEvents: 'none',
-    backgroundColor: 'transparent',
-};
-exports.notificationCenter = (0, react_1.createRef)();
-const sendErrorNotification = (content) => {
-    var _a;
-    (_a = exports.notificationCenter.current) === null || _a === void 0 ? void 0 : _a.addNotification({
-        content,
-        duration: 2000,
-        created: Date.now(),
-        id: String(Math.random()).replace('0.', ''),
-    });
-};
-exports.sendErrorNotification = sendErrorNotification;
-const NotificationCenter = () => {
-    const [notifications, setNotifications] = (0, react_1.useState)([]);
-    const onRemove = (0, react_1.useCallback)((id) => {
-        setNotifications((not) => {
-            return not.filter((n) => n.id !== id);
-        });
-    }, []);
-    const addNotification = (0, react_1.useCallback)((notification) => {
-        setNotifications((previousNotifications) => {
-            return [...previousNotifications, notification];
-        });
-    }, []);
-    (0, react_1.useImperativeHandle)(exports.notificationCenter, () => {
-        return {
-            addNotification,
-        };
-    }, [addNotification]);
-    return ((0, jsx_runtime_1.jsx)("div", { style: container, children: notifications.map((n) => {
-            return ((0, jsx_runtime_1.jsx)(Notification_1.Notification, { created: n.created, duration: n.duration, id: n.id, onRemove: onRemove, children: n.content }, n.id));
-        }) }));
-};
-exports.NotificationCenter = NotificationCenter;

package/dist/editor/components/Notifications/ServerDisconnected.d.ts

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

package/dist/editor/components/Notifications/ServerDisconnected.js

@@ -1,53 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ServerDisconnected = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const client_id_1 = require("../../helpers/client-id");
-const container = {
-    position: 'fixed',
-    justifyContent: 'flex-end',
-    alignItems: 'flex-start',
-    display: 'flex',
-    width: '100%',
-    height: '100%',
-    flexDirection: 'column',
-    padding: 30,
-    pointerEvents: 'none',
-    backgroundColor: 'transparent',
-    fontFamily: 'SF Pro, Arial, Helvetica, sans-serif',
-};
-const message = {
-    backgroundColor: '#e74c3c',
-    color: 'white',
-    paddingLeft: 20,
-    paddingRight: 20,
-    paddingTop: 12,
-    paddingBottom: 12,
-    borderRadius: 4,
-    boxShadow: '0 2px 4px rgba(0, 0, 0, 0.4)',
-    lineHeight: 1.5,
-};
-const inlineCode = {
-    fontSize: 16,
-    fontFamily: 'monospace',
-};
-let pageIsGoingToReload = false;
-window.addEventListener('beforeunload', () => {
-    pageIsGoingToReload = true;
-});
-const ServerDisconnected = () => {
-    const ctx = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
-    const fav = document.getElementById('__remotion_favicon');
-    if (ctx.type !== 'disconnected') {
-        fav.setAttribute('href', '/remotion.png');
-        return null;
-    }
-    if (pageIsGoingToReload) {
-        return null;
-    }
-    const base64Favicon = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAARiSURBVHgB7d1NThRBFAfw/2tGgru5gXMD8QZ4AmVjAi6kN0TiAm8gnkBcGARNumcx4E48Ae0JaE9gewLHlQSZelaNgyHGL/RVd1X3+y10RQL58+rVx1QBKKWUUkoppZRSSimllFJKKVUjQs32stEiJcktZiwxzKL9Fvqzb6S0/44JVBKbtwa9aj29U6JjagtkJzsYzBEyBi9d5utsQIULCcxvelgo03R5jBarJZCXw/17E+bt82r4Hy4gtuEQekUbK8h7IHvDV5vMZht+VAlRfmYw3EhXKrSA10Ce2X7RIzpGDVzlgM1wPb2bI2JeA9nN99/b/waoV+XCmTAex1g13gLZyUZrdjjJ0CAbTB5bMN4C2ctHxwxaRABiCsZLIG6KmxC/R2BiCCaBBwn4NgJk10B2GOWj3Wz/IQLlpUL28oOjyy4AG1AZppuhVYt4hWRZ1o8gDGc6rL4YHjxCQMQDOcNCEI38bxnmLTc9d30PARAPZAITZP/4A1ctx3bjcw0NEw8koeQ64tRnu25qeggTb+q2/BmRcyv9K7yw3MTOsmiFuLMOtICblJzS5+Mm+opoIBOgFYHMuL5yVHcoooFQuwJxag9FNJCIG/rv1BqKaCDfzshbqbZQxAJxK3SJI9qATUPJstdef0axQGJbof+jwRc6eQ2PxAIx4DZXx3duSrybv3oCTyR7yACdYR762sIXDKQbFfId4ZGPJi8YCA3QLf05YvF+IhYIEV1Dx9hNu8XdbLQFQV6OcDuFaFNyKiwWiJ19DNBN/VN8XoMQrRABDFqCEJ32CiBisT08rRAZAwjRQAKjgcgQO+rVQARMb3gJ0UAkML+DEA1EwAQkdkNMcnOx1Zcxf8V9ol7y88GSm4tdDKRy1xsgSIes/0BM4ndN5HZ7OzZkMePperqSQ5jkkFWhO6r76WrYJ4b2N+YTumF60QeeSG6/d2DI4rHvW1eCPaT9Q9YZw/sVOMlZVoUWM8zpg/Su97dVJGdZFVrKhbFR05MdYoFcwWmF1rF9kbG8UeP7KaI3qBp628QTHrueUccwdZHw/ZDWNHY7tU1u1B2GIxqIYSO2Dd0Ud79wnq/eaOpBgR4EMVDW/oijINu87d7U6hYaJBrInA0k0iu4bvVtZ1KrBRrm4Vr06GNkF3cO7RCVhvK4pmiFOISkjOStk1lVrBQIiPh5SAyN3fWKWeMuEBjxCmEkh3bVvokAzd5idL2iQqDEA1nASXmK+XFIfeTCo5gFAudllvo8G20TUeNVElMQ58QrxLHD1jbB3GumSnhsz7qHE9BhTEGc87aOm16KJHi7rfqj8yfI53E1j/l9eK8L651stJUQeXx/iuzU1QztZLGIsRp+xvtOh3Qo3/qCedumEC6qZetpJztwz7O6UAa4FNsP7ELTfXbWbskUdjgq9M9VCJoFcwvTlfyPDd9t3XNJjA+2IZcGpmxi+7tpjW3OupurJziZhtKWPzWhlFJKKaWUUkoppZRSSiml/uwrgZ/Bfwo/wccAAAAASUVORK5CYII=';
-    fav.setAttribute('href', base64Favicon);
-    return ((0, jsx_runtime_1.jsx)("div", { style: container, className: "css-reset", children: (0, jsx_runtime_1.jsxs)("div", { style: message, children: ["The studio server has disconnected. ", (0, jsx_runtime_1.jsx)("br", {}), window.remotion_studioServerCommand ? ((0, jsx_runtime_1.jsxs)("span", { children: ["Run", ' ', (0, jsx_runtime_1.jsx)("code", { style: inlineCode, children: window.remotion_studioServerCommand }), ' ', "to run it again."] })) : ((0, jsx_runtime_1.jsx)("span", { children: "Fast refresh will not work." }))] }) }));
-};
-exports.ServerDisconnected = ServerDisconnected;

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

@@ -1,2 +0,0 @@
-/// <reference types="react" />
-export declare const OpenEditorButton: React.FC<{}>;

package/dist/editor/components/OpenEditorButton.js

@@ -1,55 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.OpenEditorButton = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const colors_1 = require("../helpers/colors");
-const open_in_editor_1 = require("../helpers/open-in-editor");
-const NotificationCenter_1 = require("./Notifications/NotificationCenter");
-const svgStyle = {
-    width: 11,
-    height: 11,
-};
-const buttonStyle = {
-    border: 'none',
-    height: '20px',
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center',
-};
-const OpenEditorButton = () => {
-    const [hovered, setHovered] = (0, react_1.useState)(false);
-    const svgFillColor = (0, react_1.useMemo)(() => {
-        return hovered ? 'white' : colors_1.LIGHT_TEXT;
-    }, [hovered]);
-    const handleClick = async () => {
-        await (0, open_in_editor_1.openInEditor)({
-            originalFileName: `${window.remotion_cwd}`,
-            originalLineNumber: 1,
-            originalColumnNumber: 1,
-            originalFunctionName: null,
-            originalScriptCode: null,
-        })
-            .then((res) => res.json())
-            .then(({ success }) => {
-            if (!success) {
-                (0, NotificationCenter_1.sendErrorNotification)(`Could not open ${window.remotion_editorName}`);
-            }
-        })
-            .catch((err) => {
-            // eslint-disable-next-line no-console
-            console.error(err);
-            (0, NotificationCenter_1.sendErrorNotification)(`Could not open ${window.remotion_editorName}`);
-        });
-    };
-    const buttonTooltip = `Open in ${window.remotion_editorName}`;
-    const openInEditorSvg = ((0, jsx_runtime_1.jsx)("svg", { viewBox: "0 0 512 512", style: svgStyle, children: (0, jsx_runtime_1.jsx)("path", { fill: svgFillColor, d: "M320 0c-17.7 0-32 14.3-32 32s14.3 32 32 32h82.7L201.4 265.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L448 109.3V192c0 17.7 14.3 32 32 32s32-14.3 32-32V32c0-17.7-14.3-32-32-32H320zM80 32C35.8 32 0 67.8 0 112V432c0 44.2 35.8 80 80 80H400c44.2 0 80-35.8 80-80V320c0-17.7-14.3-32-32-32s-32 14.3-32 32V432c0 8.8-7.2 16-16 16H80c-8.8 0-16-7.2-16-16V112c0-8.8 7.2-16 16-16H192c17.7 0 32-14.3 32-32s-14.3-32-32-32H80z" }) }));
-    const onPointerEnter = (0, react_1.useCallback)(() => {
-        setHovered(true);
-    }, []);
-    const onPointerLeave = (0, react_1.useCallback)(() => {
-        setHovered(false);
-    }, []);
-    return ((0, jsx_runtime_1.jsx)("button", { title: buttonTooltip, type: "button", onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, style: buttonStyle, onClick: handleClick, children: openInEditorSvg }));
-};
-exports.OpenEditorButton = OpenEditorButton;

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

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

package/dist/editor/components/OptionsPanel.js

@@ -1,112 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.OptionsPanel = exports.optionsSidebarTabs = exports.persistSelectedOptionsSidebarPanel = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const remotion_1 = require("remotion");
-const ShortcutHint_1 = require("../../preview-server/error-overlay/remotion-overlay/ShortcutHint");
-const colors_1 = require("../helpers/colors");
-const DataEditor_1 = require("./RenderModal/DataEditor");
-const deep_equal_1 = require("./RenderModal/SchemaEditor/deep-equal");
-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 circle = {
-    width: 8,
-    height: 8,
-    borderRadius: 4,
-};
-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 persistSelectedOptionsSidebarPanel = (panel) => {
-    localStorage.setItem(localStorageKey, panel);
-};
-exports.persistSelectedOptionsSidebarPanel = persistSelectedOptionsSidebarPanel;
-exports.optionsSidebarTabs = (0, react_1.createRef)();
-const OptionsPanel = () => {
-    const { props, updateProps } = (0, react_1.useContext)(remotion_1.Internals.EditorPropsContext);
-    const [saving, setSaving] = (0, react_1.useState)(false);
-    const [panel, setPanel] = (0, react_1.useState)(() => getSelectedPanel());
-    const onPropsSelected = (0, react_1.useCallback)(() => {
-        setPanel('input-props');
-        (0, exports.persistSelectedOptionsSidebarPanel)('input-props');
-    }, []);
-    const onRendersSelected = (0, react_1.useCallback)(() => {
-        setPanel('renders');
-        (0, exports.persistSelectedOptionsSidebarPanel)('renders');
-    }, []);
-    (0, react_1.useImperativeHandle)(exports.optionsSidebarTabs, () => {
-        return {
-            selectRendersPanel: () => {
-                setPanel('renders');
-                (0, exports.persistSelectedOptionsSidebarPanel)('renders');
-            },
-        };
-    }, []);
-    const { compositions, canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
-    const circleStyle = (0, react_1.useMemo)(() => {
-        const onTabColor = saving ? colors_1.LIGHT_TEXT : 'white';
-        return {
-            ...circle,
-            backgroundColor: panel === 'input-props' ? onTabColor : colors_1.LIGHT_TEXT,
-            cursor: 'help',
-        };
-    }, [panel, saving]);
-    const composition = (0, react_1.useMemo)(() => {
-        if (canvasContent === null || canvasContent.type !== 'composition') {
-            return null;
-        }
-        for (const comp of compositions) {
-            if (comp.id === canvasContent.compositionId) {
-                return comp;
-            }
-        }
-        return null;
-    }, [canvasContent, compositions]);
-    const saveToolTip = (0, react_1.useMemo)(() => {
-        return process.env.KEYBOARD_SHORTCUTS_ENABLED
-            ? `Save using ${ShortcutHint_1.cmdOrCtrlCharacter}+S`
-            : 'There are unsaved changes';
-    }, []);
-    const setInputProps = (0, react_1.useCallback)((newProps) => {
-        if (composition === null) {
-            return;
-        }
-        updateProps({
-            id: composition.id,
-            defaultProps: composition.defaultProps,
-            newProps,
-        });
-    }, [composition, updateProps]);
-    const actualProps = (0, react_1.useMemo)(() => {
-        var _a, _b;
-        if (composition === null) {
-            return {};
-        }
-        return (_b = (_a = props[composition.id]) !== null && _a !== void 0 ? _a : composition.defaultProps) !== null && _b !== void 0 ? _b : {};
-    }, [composition, props]);
-    const unsavedChangesExist = (0, react_1.useMemo)(() => {
-        if (composition === null || composition.defaultProps === undefined) {
-            return false;
-        }
-        return !(0, deep_equal_1.deepEqual)(composition.defaultProps, actualProps);
-    }, [actualProps, composition]);
-    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: [composition ? ((0, jsx_runtime_1.jsxs)(Tabs_1.Tab, { selected: panel === 'input-props', onClick: onPropsSelected, style: { justifyContent: 'space-between' }, children: ["Props", unsavedChangesExist ? ((0, jsx_runtime_1.jsx)("div", { title: saveToolTip, style: circleStyle })) : null] })) : null, (0, jsx_runtime_1.jsx)(RendersTab_1.RendersTab, { onClick: onRendersSelected, selected: panel === 'renders' })] }) }), panel === `input-props` && composition ? ((0, jsx_runtime_1.jsx)(DataEditor_1.DataEditor, { unresolvedComposition: composition, inputProps: actualProps, setInputProps: setInputProps, mayShowSaveButton: true, propsEditType: "default-props", saving: saving, setSaving: setSaving }, composition.id)) : ((0, jsx_runtime_1.jsx)(RenderQueue_1.RenderQueue, {}))] }));
-};
-exports.OptionsPanel = OptionsPanel;

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

@@ -1,5 +0,0 @@
-import React from 'react';
-export declare const PlayPause: React.FC<{
-    playbackRate: number;
-    loop: boolean;
-}>;