@remotion/cli 3.3.33 → 3.3.35

package/dist/config/log.d.ts

@@ -1,3 +1,3 @@
 import type { LogLevel } from '@remotion/renderer';
-export declare const getLogLevel: () => "verbose" | "info" | "warn" | "error";
+export declare const getLogLevel: () => "error" | "verbose" | "info" | "warn";
 export declare const setLogLevel: (newLogLevel: LogLevel) => void;

package/dist/convert-entry-point-to-serve-url.d.ts

@@ -0,0 +1 @@
+export declare const convertEntryPointToServeUrl: (entryPoint: string) => string;

package/dist/convert-entry-point-to-serve-url.js

@@ -0,0 +1,15 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.convertEntryPointToServeUrl = void 0;
+const renderer_1 = require("@remotion/renderer");
+const path_1 = __importDefault(require("path"));
+const convertEntryPointToServeUrl = (entryPoint) => {
+    const fullPath = renderer_1.RenderInternals.isServeUrl(entryPoint)
+        ? entryPoint
+        : path_1.default.resolve(process.cwd(), entryPoint);
+    return fullPath;
+};
+exports.convertEntryPointToServeUrl = convertEntryPointToServeUrl;

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

@@ -0,0 +1,6 @@
+import React from 'react';
+export declare const CollapsableOptions: React.FC<{
+    children: React.ReactNode;
+    showLabel: string;
+    hideLabel: string;
+}>;

package/dist/editor/components/CollapsableOptions.js

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CollapsableOptions = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const colors_1 = require("../helpers/colors");
+const z_index_1 = require("../state/z-index");
+const layout_1 = require("./layout");
+const TimelineCollapseToggle_1 = require("./Timeline/TimelineCollapseToggle");
+const container = {
+    marginLeft: 16,
+    height: 40,
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+};
+const buttonStyle = {
+    border: 'none',
+    padding: 0,
+    appearance: 'none',
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    fontSize: 14,
+    color: colors_1.LIGHT_TEXT,
+};
+const CollapsableOptions = ({ children, showLabel, hideLabel }) => {
+    const [show, setShow] = (0, react_1.useState)(false);
+    const { tabIndex } = (0, z_index_1.useZIndex)();
+    const onClick = (0, react_1.useCallback)(() => {
+        setShow((s) => !s);
+    }, []);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { style: container, children: (0, jsx_runtime_1.jsxs)("button", { style: buttonStyle, tabIndex: tabIndex, onClick: onClick, type: "button", children: [(0, jsx_runtime_1.jsx)(TimelineCollapseToggle_1.TimelineCollapseToggle, { color: colors_1.LIGHT_TEXT, collapsed: !show }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { block: true, x: 1 }), show ? hideLabel : showLabel] }) }), show ? children : null] }));
+};
+exports.CollapsableOptions = CollapsableOptions;

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

@@ -0,0 +1,5 @@
+import type { PropsWithChildren } from 'react';
+import React from 'react';
+export declare const InlineAction: React.FC<PropsWithChildren<{
+    onClick: React.MouseEventHandler<HTMLAnchorElement> | undefined;
+}>>;

package/dist/editor/components/InlineAction.js

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InlineAction = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const colors_1 = require("../helpers/colors");
+const z_index_1 = require("../state/z-index");
+const InlineAction = ({ children, onClick }) => {
+    const { tabIndex } = (0, z_index_1.useZIndex)();
+    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 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,
+            opacity: hovered ? 1 : 0.6,
+        };
+    }, [hovered]);
+    return (
+    // <div> because cannot use button inside a button
+    (0, jsx_runtime_1.jsx)("a", { onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, onClick: onClick, style: style, tabIndex: tabIndex, children: children }));
+};
+exports.InlineAction = InlineAction;

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

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

package/dist/editor/components/Modals.js

@@ -0,0 +1,23 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Modals = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const client_id_1 = require("../helpers/client-id");
+const modals_1 = require("../state/modals");
+const NewComposition_1 = __importDefault(require("./NewComposition/NewComposition"));
+const QuickSwitcher_1 = __importDefault(require("./QuickSwitcher/QuickSwitcher"));
+const RenderErrorModal_1 = require("./RenderModal/RenderErrorModal");
+const RenderModal_1 = require("./RenderModal/RenderModal");
+const UpdateModal_1 = require("./UpdateModal/UpdateModal");
+const Modals = () => {
+    const { selectedModal: modalContextType } = (0, react_1.useContext)(modals_1.ModalsContext);
+    const canRender = (0, react_1.useContext)(client_id_1.PreviewServerConnectionCtx).type === 'connected';
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [modalContextType && modalContextType.type === 'new-comp' && ((0, jsx_runtime_1.jsx)(NewComposition_1.default, { initialCompType: modalContextType.compType })), modalContextType && canRender && modalContextType.type === 'render' && ((0, jsx_runtime_1.jsx)(RenderModal_1.RenderModal, { initialFrame: modalContextType.initialFrame, compositionId: modalContextType.compositionId, initialImageFormat: modalContextType.initialImageFormat, initialQuality: modalContextType.initialQuality, initialOutName: modalContextType.initialOutName, initialScale: modalContextType.initialScale, initialVerbose: modalContextType.initialVerbose, initialRenderType: modalContextType.initialRenderType, initialCodec: modalContextType.initialCodec })), modalContextType &&
+                canRender &&
+                modalContextType.type === 'render-error' && ((0, jsx_runtime_1.jsx)(RenderErrorModal_1.RenderErrorModal, { job: modalContextType.job })), modalContextType && modalContextType.type === 'update' && ((0, jsx_runtime_1.jsx)(UpdateModal_1.UpdateModal, { info: modalContextType.info })), modalContextType && modalContextType.type === 'quick-switcher' && ((0, jsx_runtime_1.jsx)(QuickSwitcher_1.default, { invocationTimestamp: modalContextType.invocationTimestamp, initialMode: modalContextType.mode }))] }));
+};
+exports.Modals = Modals;

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

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

package/dist/editor/components/RenderButton.js

@@ -0,0 +1,46 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RenderButton = 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 render_1 = require("../icons/render");
+const modals_1 = require("../state/modals");
+const InlineAction_1 = require("./InlineAction");
+const RenderButton = ({ composition, visible }) => {
+    const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
+    const iconStyle = (0, react_1.useMemo)(() => {
+        return {
+            style: {
+                height: 12,
+            },
+        };
+    }, []);
+    const isVideo = composition.durationInFrames > 1;
+    const onClick = (0, react_1.useCallback)((e) => {
+        var _a, _b, _c, _d, _e;
+        e.stopPropagation();
+        setSelectedModal({
+            type: 'render',
+            compositionId: composition.id,
+            initialFrame: 0,
+            initialImageFormat: isVideo ? 'jpeg' : 'png',
+            // TODO: Determine defaults from config file
+            initialQuality: (_b = (_a = window.remotion_renderDefaults) === null || _a === void 0 ? void 0 : _a.quality) !== null && _b !== void 0 ? _b : 80,
+            initialScale: (_d = (_c = window.remotion_renderDefaults) === null || _c === void 0 ? void 0 : _c.scale) !== null && _d !== void 0 ? _d : 1,
+            initialVerbose: ((_e = window.remotion_renderDefaults) === null || _e === void 0 ? void 0 : _e.logLevel) === 'verbose',
+            initialOutName: (0, get_default_out_name_1.getDefaultOutLocation)({
+                compositionName: composition.id,
+                defaultExtension: isVideo ? 'mp4' : 'png',
+                type: 'asset',
+            }),
+            initialRenderType: isVideo ? 'video' : 'still',
+            initialCodec: 'h264',
+        });
+    }, [composition.id, isVideo, setSelectedModal]);
+    if (!visible) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsx)(InlineAction_1.InlineAction, { onClick: onClick, children: (0, jsx_runtime_1.jsx)(render_1.RenderIcon, { svgProps: iconStyle }) }));
+};
+exports.RenderButton = RenderButton;

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

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

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

@@ -0,0 +1,64 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RenderErrorModal = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const Button_1 = require("../../../preview-server/error-overlay/remotion-overlay/Button");
+const make_retry_payload_1 = require("../../../preview-server/render-queue/make-retry-payload");
+const modals_1 = require("../../state/modals");
+const layout_1 = require("../layout");
+const ModalContainer_1 = require("../ModalContainer");
+const ModalHeader_1 = require("../ModalHeader");
+const NotificationCenter_1 = require("../Notifications/NotificationCenter");
+const actions_1 = require("../RenderQueue/actions");
+const container = {
+    padding: 20,
+    maxWidth: 1200,
+    paddingTop: 0,
+};
+const codeBlock = {
+    backgroundColor: 'black',
+    whiteSpace: 'pre',
+    padding: 12,
+    borderRadius: 4,
+    fontFamily: 'monospace',
+    overflow: 'auto',
+    maxHeight: 300,
+};
+const spacer = {
+    height: layout_1.SPACING_UNIT,
+    width: layout_1.SPACING_UNIT,
+};
+const buttonRow = {
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'flex-end',
+};
+const RenderErrorModal = ({ job }) => {
+    const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
+    const onQuit = (0, react_1.useCallback)(() => {
+        setSelectedModal(null);
+    }, [setSelectedModal]);
+    const onRetry = (0, react_1.useCallback)(() => {
+        const retryPayload = (0, make_retry_payload_1.makeRetryPayload)(job);
+        setSelectedModal(retryPayload);
+    }, [job, setSelectedModal]);
+    const onClickOnRemove = (0, react_1.useCallback)(() => {
+        setSelectedModal(null);
+        (0, actions_1.removeRenderJob)(job).catch((err) => {
+            var _a;
+            (_a = NotificationCenter_1.notificationCenter.current) === null || _a === void 0 ? void 0 : _a.addNotification({
+                content: 'Failed to remove render job: ' + err.message,
+                created: Date.now(),
+                duration: 2000,
+                id: String(Math.random()),
+            });
+            console.log(err);
+        });
+    }, [job, setSelectedModal]);
+    if (job.status !== 'failed') {
+        throw new Error('should not have rendered this modal');
+    }
+    return ((0, jsx_runtime_1.jsxs)(ModalContainer_1.ModalContainer, { onOutsideClick: onQuit, onEscape: onQuit, children: [(0, jsx_runtime_1.jsx)(ModalHeader_1.NewCompHeader, { title: `Render ${job.compositionId}` }), (0, jsx_runtime_1.jsxs)("div", { style: container, children: [(0, jsx_runtime_1.jsx)("p", { children: "The render failed because of the following error:" }), (0, jsx_runtime_1.jsx)("div", { style: codeBlock, children: job.error.stack }), (0, jsx_runtime_1.jsx)("div", { style: spacer }), (0, jsx_runtime_1.jsxs)("div", { style: buttonRow, children: [(0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: onClickOnRemove, children: "Remove render" }), (0, jsx_runtime_1.jsx)(layout_1.Flex, {}), (0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: onRetry, children: "Retry" }), (0, jsx_runtime_1.jsx)("div", { style: spacer }), (0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: onQuit, children: "Close" })] })] })] }));
+};
+exports.RenderErrorModal = RenderErrorModal;

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

@@ -0,0 +1,14 @@
+import type { Codec, StillImageFormat } from '@remotion/renderer';
+import React from 'react';
+export declare type RenderType = 'still' | 'video';
+export declare const RenderModal: React.FC<{
+    compositionId: string;
+    initialFrame: number;
+    initialImageFormat: StillImageFormat;
+    initialQuality: number | null;
+    initialScale: number;
+    initialVerbose: boolean;
+    initialOutName: string;
+    initialRenderType: RenderType;
+    initialCodec: Codec;
+}>;