@remotion/cli 3.3.79 → 3.3.81

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

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NumberSetting = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const layout_1 = require("../layout");
+const InputDragger_1 = require("../NewComposition/InputDragger");
+const RemInput_1 = require("../NewComposition/RemInput");
+const InfoBubble_1 = require("./InfoBubble");
+const layout_2 = require("./layout");
+const OptionExplainer_1 = require("./OptionExplainer");
+const NumberSetting = ({ name, value, step, hint, onValueChanged, max, min, formatter }) => {
+    const onTextChanged = (0, react_1.useCallback)((e) => {
+        onValueChanged((q) => {
+            const newSetting = parseInt(e, 10);
+            if (Number.isNaN(newSetting)) {
+                return q;
+            }
+            return Math.min(max !== null && max !== void 0 ? max : Infinity, Math.max(newSetting, min));
+        });
+    }, [max, min, onValueChanged]);
+    const onValueChange = (0, react_1.useCallback)((newConcurrency) => {
+        onValueChanged(newConcurrency);
+    }, [onValueChanged]);
+    return ((0, jsx_runtime_1.jsxs)("div", { style: layout_2.optionRow, children: [(0, jsx_runtime_1.jsxs)("div", { style: layout_2.label, children: [name, hint ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.25 }), ' ', (0, jsx_runtime_1.jsx)(InfoBubble_1.InfoBubble, { title: "Learn more about this option", children: (0, jsx_runtime_1.jsx)(OptionExplainer_1.OptionExplainer, { option: hint }) })] })) : null] }), (0, jsx_runtime_1.jsx)("div", { style: layout_2.rightRow, children: (0, jsx_runtime_1.jsx)(RemInput_1.RightAlignInput, { children: (0, jsx_runtime_1.jsx)(InputDragger_1.InputDragger, { value: value, name: name.toLowerCase(), onTextChange: onTextChanged, onValueChange: onValueChange, step: step, placeholder: [min, max]
+                            .map((f) => (f !== null && f !== undefined ? f : ''))
+                            .join('-'), min: min, max: max, formatter: formatter, status: "ok" }) }) })] }));
+};
+exports.NumberSetting = NumberSetting;

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

@@ -0,0 +1,5 @@
+import type { RemotionOption } from '@remotion/renderer';
+import React from 'react';
+export declare const OptionExplainer: React.FC<{
+    option: RemotionOption;
+}>;

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

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.OptionExplainer = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const layout_1 = require("../layout");
+const MenuDivider_1 = require("../Menu/MenuDivider");
+const CliCopyButton_1 = require("./CliCopyButton");
+const container = {
+    fontSize: 14,
+    paddingTop: 10,
+    paddingBottom: 10,
+};
+const padding = {
+    paddingLeft: 12,
+    paddingRight: 12,
+};
+const title = {
+    fontSize: 14,
+};
+const description = {
+    fontSize: 14,
+    maxWidth: 400,
+};
+const link = {
+    fontSize: 14,
+    maxWidth: 200,
+    color: '#0b84f3',
+    wordWrap: 'break-word',
+};
+const infoRow = {
+    ...padding,
+    fontSize: 14,
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+};
+const infoRowLabel = {
+    width: 150,
+    fontSize: 14,
+    color: 'white',
+};
+const OptionExplainer = ({ option }) => {
+    return ((0, jsx_runtime_1.jsxs)("div", { style: container, className: "__remotion-info-button-container", children: [(0, jsx_runtime_1.jsxs)("div", { style: padding, children: [(0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)("strong", { style: title, children: option.name }) }), (0, jsx_runtime_1.jsx)("div", { style: description, children: option.description })] }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 0.5, block: true }), (0, jsx_runtime_1.jsx)(MenuDivider_1.MenuDivider, {}), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 0.5, block: true }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("div", { style: infoRow, children: [(0, jsx_runtime_1.jsx)("div", { style: infoRowLabel, children: "CLI flag:" }), (0, jsx_runtime_1.jsx)("code", { children: option.cliFlag }), (0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', justifyContent: 'flex-end', flex: 1 }, children: (0, jsx_runtime_1.jsx)(CliCopyButton_1.CliCopyButton, { valueToCopy: option.cliFlag }) })] }), (0, jsx_runtime_1.jsxs)("div", { style: infoRow, children: [(0, jsx_runtime_1.jsx)("div", { style: infoRowLabel, children: "Node.JS option:" }), (0, jsx_runtime_1.jsx)("code", { children: option.ssrName })] }), (0, jsx_runtime_1.jsx)("div", { style: infoRow, children: (0, jsx_runtime_1.jsx)("a", { style: link, href: option.docLink, target: "_blank", children: "Docs" }) })] })] }));
+};
+exports.OptionExplainer = OptionExplainer;

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

@@ -0,0 +1,34 @@
+import type { AudioCodec, Codec, OpenGlRenderer, PixelFormat, ProResProfile, StillImageFormat, VideoImageFormat } from '@remotion/renderer';
+import React from 'react';
+import type { RenderType } from './RenderModalAdvanced';
+export declare const RenderModal: React.FC<{
+    compositionId: string;
+    initialFrame: number;
+    initialVideoImageFormat: VideoImageFormat;
+    initialStillImageFormat: StillImageFormat;
+    initialQuality: number;
+    initialScale: number;
+    initialVerbose: boolean;
+    initialOutName: string;
+    initialRenderType: RenderType;
+    initialVideoCodecForAudioTab: Codec;
+    initialVideoCodecForVideoTab: Codec;
+    initialAudioCodec: AudioCodec | null;
+    initialConcurrency: number;
+    minConcurrency: number;
+    maxConcurrency: number;
+    initialMuted: boolean;
+    initialEnforceAudioTrack: boolean;
+    initialProResProfile: ProResProfile;
+    initialPixelFormat: PixelFormat;
+    initialVideoBitrate: string | null;
+    initialAudioBitrate: string | null;
+    initialEveryNthFrame: number;
+    initialNumberOfGifLoops: number | null;
+    initialDelayRenderTimeout: number;
+    initialEnvVariables: Record<string, string>;
+    initialDisableWebSecurity: boolean;
+    initialGl: OpenGlRenderer | null;
+    initialIgnoreCertificateErrors: boolean;
+    initialHeadless: boolean;
+}>;