@remotion/studio 4.0.397 → 4.0.398

package/dist/components/Checkbox.d.ts

@@ -3,5 +3,6 @@ export declare const Checkbox: React.FC<{
     readonly checked: boolean;
     readonly onChange: React.ChangeEventHandler<HTMLInputElement>;
     readonly name: string;
+    readonly rounded?: boolean;
     readonly disabled?: boolean;
 }>;

package/dist/components/Checkbox.js

@@ -11,6 +11,12 @@ const background = {
     width: size,
     position: 'relative',
 };
+const bullet = {
+    width: 10,
+    height: 10,
+    backgroundColor: colors_1.LIGHT_TEXT,
+    borderRadius: '50%',
+};
 const box = {
     display: 'flex',
     justifyContent: 'center',
@@ -23,7 +29,8 @@ const box = {
     pointerEvents: 'none',
     color: 'white',
 };
-const Checkbox = ({ checked, onChange, disabled, name }) => {
+const Checkbox = ({ checked, onChange, disabled, name, rounded }) => {
+    const ref = (0, react_1.useRef)(null);
     const input = (0, react_1.useMemo)(() => {
         return {
             appearance: 'none',
@@ -37,6 +44,11 @@ const Checkbox = ({ checked, onChange, disabled, name }) => {
             margin: 0,
         };
     }, [disabled]);
-    return ((0, jsx_runtime_1.jsxs)("div", { style: background, children: [(0, jsx_runtime_1.jsx)("input", { style: input, type: 'checkbox', checked: checked, onChange: onChange, disabled: disabled, name: name }), (0, jsx_runtime_1.jsx)("div", { style: box, children: checked ? (0, jsx_runtime_1.jsx)(Checkmark_1.Checkmark, {}) : null })] }));
+    (0, react_1.useEffect)(() => {
+        if (ref.current) {
+            ref.current.style.setProperty('border-radius', rounded ? '50%' : '0%', 'important');
+        }
+    }, [rounded]);
+    return ((0, jsx_runtime_1.jsxs)("div", { style: background, children: [(0, jsx_runtime_1.jsx)("input", { ref: ref, style: input, type: 'checkbox', checked: checked, onChange: onChange, disabled: disabled, name: name }), (0, jsx_runtime_1.jsx)("div", { style: box, children: checked ? rounded ? (0, jsx_runtime_1.jsx)("div", { style: bullet }) : (0, jsx_runtime_1.jsx)(Checkmark_1.Checkmark, {}) : null })] }));
 };
 exports.Checkbox = Checkbox;

package/dist/components/Modals.js

@@ -23,7 +23,7 @@ const Modals = ({ readOnlyStudio }) => {
     const { selectedModal: modalContextType } = (0, react_1.useContext)(modals_1.ModalsContext);
     const canRender = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx).previewServerState.type ===
         'connected';
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [modalContextType && modalContextType.type === 'duplicate-comp' && ((0, jsx_runtime_1.jsx)(DuplicateComposition_1.DuplicateComposition, { compositionType: modalContextType.compositionType, compositionId: modalContextType.compositionId })), modalContextType && modalContextType.type === 'delete-comp' && ((0, jsx_runtime_1.jsx)(DeleteComposition_1.DeleteComposition, { compositionId: modalContextType.compositionId })), modalContextType && modalContextType.type === 'rename-comp' && ((0, jsx_runtime_1.jsx)(RenameComposition_1.RenameComposition, { compositionId: modalContextType.compositionId })), modalContextType && modalContextType.type === 'input-props-override' && ((0, jsx_runtime_1.jsx)(OverrideInputProps_1.OverrideInputPropsModal, {})), modalContextType && modalContextType.type === 'web-render' && ((0, jsx_runtime_1.jsx)(WebRenderModal_1.WebRenderModalWithLoader, { type: "web-render", initialFrame: modalContextType.initialFrame, compositionId: modalContextType.compositionId, defaultProps: modalContextType.defaultProps, inFrameMark: modalContextType.inFrameMark, outFrameMark: modalContextType.outFrameMark, initialLogLevel: modalContextType.initialLogLevel })), modalContextType &&
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [modalContextType && modalContextType.type === 'duplicate-comp' && ((0, jsx_runtime_1.jsx)(DuplicateComposition_1.DuplicateComposition, { compositionType: modalContextType.compositionType, compositionId: modalContextType.compositionId })), modalContextType && modalContextType.type === 'delete-comp' && ((0, jsx_runtime_1.jsx)(DeleteComposition_1.DeleteComposition, { compositionId: modalContextType.compositionId })), modalContextType && modalContextType.type === 'rename-comp' && ((0, jsx_runtime_1.jsx)(RenameComposition_1.RenameComposition, { compositionId: modalContextType.compositionId })), modalContextType && modalContextType.type === 'input-props-override' && ((0, jsx_runtime_1.jsx)(OverrideInputProps_1.OverrideInputPropsModal, {})), modalContextType && modalContextType.type === 'web-render' && ((0, jsx_runtime_1.jsx)(WebRenderModal_1.WebRenderModalWithLoader, { type: "web-render", initialFrame: modalContextType.initialFrame, compositionId: modalContextType.compositionId, defaultProps: modalContextType.defaultProps, inFrameMark: modalContextType.inFrameMark, outFrameMark: modalContextType.outFrameMark, initialLogLevel: modalContextType.initialLogLevel, initialLicenseKey: modalContextType.initialLicenseKey })), modalContextType &&
                 canRender &&
                 modalContextType.type === 'server-render' && ((0, jsx_runtime_1.jsx)(ServerRenderModal_1.RenderModalWithLoader, { initialFrame: modalContextType.initialFrame, initialDarkMode: modalContextType.initialDarkMode, compositionId: modalContextType.compositionId, initialVideoImageFormat: modalContextType.initialVideoImageFormat, initialJpegQuality: modalContextType.initialJpegQuality, initialScale: modalContextType.initialScale, initialLogLevel: modalContextType.initialLogLevel, initialOffthreadVideoCacheSizeInBytes: modalContextType.initialOffthreadVideoCacheSizeInBytes, initialOffthreadVideoThreads: modalContextType.initialOffthreadVideoThreads, initialMediaCacheSizeInBytes: modalContextType.initialMediaCacheSizeInBytes, initialConcurrency: modalContextType.initialConcurrency, maxConcurrency: modalContextType.maxConcurrency, minConcurrency: modalContextType.minConcurrency, initialStillImageFormat: modalContextType.initialStillImageFormat, initialMuted: modalContextType.initialMuted, initialEnforceAudioTrack: modalContextType.initialEnforceAudioTrack, initialProResProfile: modalContextType.initialProResProfile, initialx264Preset: modalContextType.initialx264Preset, initialPixelFormat: modalContextType.initialPixelFormat, initialAudioBitrate: modalContextType.initialAudioBitrate, initialVideoBitrate: modalContextType.initialVideoBitrate, initialEveryNthFrame: modalContextType.initialEveryNthFrame, initialNumberOfGifLoops: modalContextType.initialNumberOfGifLoops, initialDelayRenderTimeout: modalContextType.initialDelayRenderTimeout, initialEnvVariables: modalContextType.initialEnvVariables, initialDisableWebSecurity: modalContextType.initialDisableWebSecurity, initialGl: modalContextType.initialOpenGlRenderer, initialHeadless: modalContextType.initialHeadless, initialIgnoreCertificateErrors: modalContextType.initialIgnoreCertificateErrors, initialEncodingBufferSize: modalContextType.initialEncodingBufferSize, initialEncodingMaxRate: modalContextType.initialEncodingMaxRate, initialUserAgent: modalContextType.initialUserAgent, initialColorSpace: modalContextType.initialColorSpace, initialMultiProcessOnLinux: modalContextType.initialMultiProcessOnLinux, initialRepro: modalContextType.initialRepro, initialBeep: modalContextType.initialBeep, initialForSeamlessAacConcatenation: modalContextType.initialForSeamlessAacConcatenation, defaultProps: modalContextType.defaultProps, inFrameMark: modalContextType.inFrameMark, outFrameMark: modalContextType.outFrameMark, defaultConfigurationAudioCodec: modalContextType.defaultConfigurationAudioCodec, defaultConfigurationVideoCodec: modalContextType.defaultConfigurationVideoCodec, renderTypeOfLastRender: modalContextType.renderTypeOfLastRender, defaultMetadata: modalContextType.defaulMetadata, initialHardwareAcceleration: modalContextType.initialHardwareAcceleration, initialChromeMode: modalContextType.initialChromeMode, renderDefaults: modalContextType.renderDefaults })), modalContextType &&
                 canRender &&

package/dist/components/RenderButton.js

@@ -196,6 +196,7 @@ const RenderButton = ({ readOnlyStudio, }) => {
             inFrameMark: inFrame,
             outFrameMark: outFrame,
             initialLogLevel: defaults.logLevel,
+            initialLicenseKey: defaults.publicLicenseKey,
         });
     }, [video, setSelectedModal, getCurrentFrame, props, inFrame, outFrame]);
     const onClick = (0, react_1.useCallback)(() => {

package/dist/components/RenderModal/WebRenderModal.js

@@ -7,9 +7,11 @@ const web_renderer_1 = require("@remotion/web-renderer");
 const react_1 = require("react");
 const ShortcutHint_1 = require("../../error-overlay/remotion-overlay/ShortcutHint");
 const audio_1 = require("../../icons/audio");
+const certificate_1 = require("../../icons/certificate");
 const data_1 = require("../../icons/data");
 const file_1 = require("../../icons/file");
 const frame_1 = require("../../icons/frame");
+const gear_1 = require("../../icons/gear");
 const Button_1 = require("../Button");
 const is_menu_item_1 = require("../Menu/is-menu-item");
 const ModalHeader_1 = require("../ModalHeader");
@@ -20,9 +22,11 @@ const DataEditor_1 = require("./DataEditor");
 const get_string_before_suffix_1 = require("./get-string-before-suffix");
 const render_modals_1 = require("./render-modals");
 const ResolveCompositionBeforeModal_1 = require("./ResolveCompositionBeforeModal");
+const WebRendererExperimentalBadge_1 = require("./WebRendererExperimentalBadge");
 const WebRenderModalAdvanced_1 = require("./WebRenderModalAdvanced");
 const WebRenderModalAudio_1 = require("./WebRenderModalAudio");
 const WebRenderModalBasic_1 = require("./WebRenderModalBasic");
+const WebRenderModalLicense_1 = require("./WebRenderModalLicense");
 const WebRenderModalPicture_1 = require("./WebRenderModalPicture");
 const invalidCharacters = ['?', '*', '+', ':', '%'];
 const isValidStillExtension = (extension, stillImageFormat) => {
@@ -72,7 +76,7 @@ const validateOutnameForStill = ({ outName, stillImageFormat, }) => {
 // TODO: Shortcut: Shift + R
 // TODO: Apply defaultCodec
 // TODO: Apply defaultOutName
-const WebRenderModal = ({ initialFrame, defaultProps, inFrameMark, outFrameMark, initialLogLevel, }) => {
+const WebRenderModal = ({ initialFrame, defaultProps, inFrameMark, outFrameMark, initialLogLevel, initialLicenseKey, }) => {
     const context = (0, react_1.useContext)(ResolveCompositionBeforeModal_1.ResolvedCompositionContext);
     if (!context) {
         throw new Error('Should not be able to render without resolving comp first');
@@ -103,6 +107,7 @@ const WebRenderModal = ({ initialFrame, defaultProps, inFrameMark, outFrameMark,
     const [renderProgress, setRenderProgress] = (0, react_1.useState)(null);
     const [transparent, setTransparent] = (0, react_1.useState)(false);
     const [muted, setMuted] = (0, react_1.useState)(false);
+    const [licenseKey, setLicenseKey] = (0, react_1.useState)(initialLicenseKey);
     const finalEndFrame = (0, react_1.useMemo)(() => {
         if (endFrame === null) {
             return resolvedComposition.durationInFrames - 1;
@@ -264,6 +269,7 @@ const WebRenderModal = ({ initialFrame, defaultProps, inFrameMark, outFrameMark,
             delayRenderTimeoutInMilliseconds: delayRenderTimeout,
             mediaCacheSizeInBytes,
             logLevel,
+            licenseKey: licenseKey !== null && licenseKey !== void 0 ? licenseKey : undefined,
         });
         const url = URL.createObjectURL(blob);
         const a = document.createElement('a');
@@ -291,6 +297,7 @@ const WebRenderModal = ({ initialFrame, defaultProps, inFrameMark, outFrameMark,
         resolvedComposition.defaultProps,
         unresolvedComposition.calculateMetadata,
         resolvedComposition.id,
+        licenseKey,
     ]);
     const onRenderVideo = (0, react_1.useCallback)(async () => {
         setRenderProgress({ renderedFrames: 0, encodedFrames: 0 });
@@ -309,7 +316,7 @@ const WebRenderModal = ({ initialFrame, defaultProps, inFrameMark, outFrameMark,
             delayRenderTimeoutInMilliseconds: delayRenderTimeout,
             mediaCacheSizeInBytes,
             logLevel,
-            codec,
+            videoCodec: codec,
             container,
             videoBitrate,
             hardwareAcceleration,
@@ -321,6 +328,7 @@ const WebRenderModal = ({ initialFrame, defaultProps, inFrameMark, outFrameMark,
             transparent,
             muted,
             outputTarget: 'web-fs',
+            licenseKey: licenseKey !== null && licenseKey !== void 0 ? licenseKey : undefined,
         });
         setRenderProgress(null);
         const blob = await getBlob();
@@ -356,6 +364,7 @@ const WebRenderModal = ({ initialFrame, defaultProps, inFrameMark, outFrameMark,
         resolvedComposition.defaultProps,
         resolvedComposition.id,
         unresolvedComposition.calculateMetadata,
+        licenseKey,
     ]);
     const onRender = (0, react_1.useCallback)(async () => {
         if (renderMode === 'still') {
@@ -367,7 +376,7 @@ const WebRenderModal = ({ initialFrame, defaultProps, inFrameMark, outFrameMark,
     }, [renderMode, onRenderStill, onRenderVideo]);
     return ((0, jsx_runtime_1.jsxs)("div", { style: render_modals_1.outerModalStyle, children: [(0, jsx_runtime_1.jsx)(ModalHeader_1.ModalHeader, { title: `Render ${resolvedComposition.id}` }), (0, jsx_runtime_1.jsxs)("div", { style: render_modals_1.container, children: [(0, jsx_runtime_1.jsx)(SegmentedControl_1.SegmentedControl, { items: renderTabOptions, needsWrapping: false }), (0, jsx_runtime_1.jsx)("div", { style: render_modals_1.flexer }), (0, jsx_runtime_1.jsxs)(Button_1.Button, { autoFocus: true, onClick: onRender, style: render_modals_1.buttonStyle, disabled: !outnameValidation.valid, children: [renderProgress
                                 ? `Rendering... ${renderProgress.renderedFrames}/${finalEndFrame}`
-                                : `Render ${renderMode}`, (0, jsx_runtime_1.jsx)(ShortcutHint_1.ShortcutHint, { keyToPress: "\u21B5", cmdOrCtrl: true })] })] }), (0, jsx_runtime_1.jsxs)("div", { style: render_modals_1.horizontalLayout, children: [(0, jsx_runtime_1.jsxs)("div", { style: render_modals_1.leftSidebar, children: [(0, jsx_runtime_1.jsxs)(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'general', onClick: () => setTab('general'), children: [(0, jsx_runtime_1.jsx)("div", { style: render_modals_1.iconContainer, children: (0, jsx_runtime_1.jsx)(file_1.FileIcon, { style: render_modals_1.icon }) }), "General"] }), (0, jsx_runtime_1.jsxs)(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'data', onClick: () => setTab('data'), children: [(0, jsx_runtime_1.jsx)("div", { style: render_modals_1.iconContainer, children: (0, jsx_runtime_1.jsx)(data_1.DataIcon, { style: render_modals_1.icon }) }), "Input Props"] }), renderMode === 'video' ? ((0, jsx_runtime_1.jsxs)(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'picture', onClick: () => setTab('picture'), children: [(0, jsx_runtime_1.jsx)("div", { style: render_modals_1.iconContainer, children: (0, jsx_runtime_1.jsx)(frame_1.PicIcon, { style: render_modals_1.icon }) }), "Picture"] })) : null, renderMode === 'video' ? ((0, jsx_runtime_1.jsxs)(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'audio', onClick: () => setTab('audio'), children: [(0, jsx_runtime_1.jsx)("div", { style: render_modals_1.iconContainer, children: (0, jsx_runtime_1.jsx)(audio_1.AudioIcon, { style: render_modals_1.icon }) }), "Audio"] })) : null, (0, jsx_runtime_1.jsxs)(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'advanced', onClick: () => setTab('advanced'), children: [(0, jsx_runtime_1.jsx)("div", { style: render_modals_1.iconContainer, children: (0, jsx_runtime_1.jsx)(file_1.FileIcon, { style: render_modals_1.icon }) }), "Advanced"] })] }), (0, jsx_runtime_1.jsx)("div", { style: render_modals_1.optionsPanel, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: tab === 'general' ? ((0, jsx_runtime_1.jsx)(WebRenderModalBasic_1.WebRenderModalBasic, { renderMode: renderMode, resolvedComposition: resolvedComposition, imageFormat: imageFormat, setStillFormat: setStillFormat, frame: frame, onFrameChanged: onFrameChanged, onFrameSetDirectly: onFrameSetDirectly, container: container, setContainerFormat: setContainerFormat, codec: codec, setCodec: setCodec, startFrame: finalStartFrame, setStartFrame: setStartFrame, endFrame: finalEndFrame, setEndFrame: setEndFrame, outName: outName, onOutNameChange: onOutNameChange, validationMessage: outnameValidation.valid ? null : outnameValidation.error.message, logLevel: logLevel, setLogLevel: setLogLevel })) : tab === 'data' ? ((0, jsx_runtime_1.jsx)(DataEditor_1.DataEditor, { defaultProps: inputProps, setDefaultProps: setInputProps, unresolvedComposition: unresolvedComposition, mayShowSaveButton: false, propsEditType: "input-props", saving: saving, setSaving: setSaving, readOnlyStudio: false })) : tab === 'picture' ? ((0, jsx_runtime_1.jsx)(WebRenderModalPicture_1.WebRenderModalPicture, { renderMode: renderMode, videoBitrate: videoBitrate, setVideoBitrate: setVideoBitrate, keyframeIntervalInSeconds: keyframeIntervalInSeconds, setKeyframeIntervalInSeconds: setKeyframeIntervalInSeconds, transparent: transparent, setTransparent: setTransparent })) : tab === 'audio' ? ((0, jsx_runtime_1.jsx)(WebRenderModalAudio_1.WebRenderModalAudio, { muted: muted, setMuted: setMuted })) : ((0, jsx_runtime_1.jsx)(WebRenderModalAdvanced_1.WebRenderModalAdvanced, { renderMode: renderMode, delayRenderTimeout: delayRenderTimeout, setDelayRenderTimeout: setDelayRenderTimeout, mediaCacheSizeInBytes: mediaCacheSizeInBytes, setMediaCacheSizeInBytes: setMediaCacheSizeInBytes, hardwareAcceleration: hardwareAcceleration, setHardwareAcceleration: setHardwareAcceleration })) })] })] }));
+                                : `Render ${renderMode}`, (0, jsx_runtime_1.jsx)(ShortcutHint_1.ShortcutHint, { keyToPress: "\u21B5", cmdOrCtrl: true })] })] }), (0, jsx_runtime_1.jsx)("div", { style: render_modals_1.container, children: (0, jsx_runtime_1.jsx)(WebRendererExperimentalBadge_1.WebRendererExperimentalBadge, {}) }), (0, jsx_runtime_1.jsxs)("div", { style: render_modals_1.horizontalLayout, children: [(0, jsx_runtime_1.jsxs)("div", { style: render_modals_1.leftSidebar, children: [(0, jsx_runtime_1.jsxs)(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'general', onClick: () => setTab('general'), children: [(0, jsx_runtime_1.jsx)("div", { style: render_modals_1.iconContainer, children: (0, jsx_runtime_1.jsx)(file_1.FileIcon, { style: render_modals_1.icon }) }), "General"] }), (0, jsx_runtime_1.jsxs)(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'data', onClick: () => setTab('data'), children: [(0, jsx_runtime_1.jsx)("div", { style: render_modals_1.iconContainer, children: (0, jsx_runtime_1.jsx)(data_1.DataIcon, { style: render_modals_1.icon }) }), "Input Props"] }), renderMode === 'video' ? ((0, jsx_runtime_1.jsxs)(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'picture', onClick: () => setTab('picture'), children: [(0, jsx_runtime_1.jsx)("div", { style: render_modals_1.iconContainer, children: (0, jsx_runtime_1.jsx)(frame_1.PicIcon, { style: render_modals_1.icon }) }), "Picture"] })) : null, renderMode === 'video' ? ((0, jsx_runtime_1.jsxs)(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'audio', onClick: () => setTab('audio'), children: [(0, jsx_runtime_1.jsx)("div", { style: render_modals_1.iconContainer, children: (0, jsx_runtime_1.jsx)(audio_1.AudioIcon, { style: render_modals_1.icon }) }), "Audio"] })) : null, (0, jsx_runtime_1.jsxs)(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'advanced', onClick: () => setTab('advanced'), children: [(0, jsx_runtime_1.jsx)("div", { style: render_modals_1.iconContainer, children: (0, jsx_runtime_1.jsx)(gear_1.GearIcon, { style: render_modals_1.icon }) }), "Other"] }), (0, jsx_runtime_1.jsxs)(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'license', onClick: () => setTab('license'), children: [(0, jsx_runtime_1.jsx)("div", { style: render_modals_1.iconContainer, children: (0, jsx_runtime_1.jsx)(certificate_1.CertificateIcon, { style: render_modals_1.icon }) }), "License"] })] }), (0, jsx_runtime_1.jsx)("div", { style: render_modals_1.optionsPanel, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: tab === 'general' ? ((0, jsx_runtime_1.jsx)(WebRenderModalBasic_1.WebRenderModalBasic, { renderMode: renderMode, resolvedComposition: resolvedComposition, imageFormat: imageFormat, setStillFormat: setStillFormat, frame: frame, onFrameChanged: onFrameChanged, onFrameSetDirectly: onFrameSetDirectly, container: container, setContainerFormat: setContainerFormat, codec: codec, setCodec: setCodec, startFrame: finalStartFrame, setStartFrame: setStartFrame, endFrame: finalEndFrame, setEndFrame: setEndFrame, outName: outName, onOutNameChange: onOutNameChange, validationMessage: outnameValidation.valid ? null : outnameValidation.error.message, logLevel: logLevel, setLogLevel: setLogLevel })) : tab === 'data' ? ((0, jsx_runtime_1.jsx)(DataEditor_1.DataEditor, { defaultProps: inputProps, setDefaultProps: setInputProps, unresolvedComposition: unresolvedComposition, mayShowSaveButton: false, propsEditType: "input-props", saving: saving, setSaving: setSaving, readOnlyStudio: false })) : tab === 'picture' ? ((0, jsx_runtime_1.jsx)(WebRenderModalPicture_1.WebRenderModalPicture, { renderMode: renderMode, videoBitrate: videoBitrate, setVideoBitrate: setVideoBitrate, keyframeIntervalInSeconds: keyframeIntervalInSeconds, setKeyframeIntervalInSeconds: setKeyframeIntervalInSeconds, transparent: transparent, setTransparent: setTransparent })) : tab === 'audio' ? ((0, jsx_runtime_1.jsx)(WebRenderModalAudio_1.WebRenderModalAudio, { muted: muted, setMuted: setMuted })) : tab === 'advanced' ? ((0, jsx_runtime_1.jsx)(WebRenderModalAdvanced_1.WebRenderModalAdvanced, { renderMode: renderMode, delayRenderTimeout: delayRenderTimeout, setDelayRenderTimeout: setDelayRenderTimeout, mediaCacheSizeInBytes: mediaCacheSizeInBytes, setMediaCacheSizeInBytes: setMediaCacheSizeInBytes, hardwareAcceleration: hardwareAcceleration, setHardwareAcceleration: setHardwareAcceleration })) : ((0, jsx_runtime_1.jsx)(WebRenderModalLicense_1.WebRenderModalLicense, { licenseKey: licenseKey, setLicenseKey: setLicenseKey, initialPublicLicenseKey: initialLicenseKey })) })] })] }));
 };
 const WebRenderModalWithLoader = (props) => {
     return ((0, jsx_runtime_1.jsx)(DismissableModal_1.DismissableModal, { children: (0, jsx_runtime_1.jsx)(ResolveCompositionBeforeModal_1.ResolveCompositionBeforeModal, { compositionId: props.compositionId, children: (0, jsx_runtime_1.jsx)(WebRenderModal, { ...props }) }) }));

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

@@ -1,20 +1,20 @@
 import type { LogLevel } from '@remotion/renderer';
-import type { RenderStillImageFormat, WebRendererCodec, WebRendererContainer } from '@remotion/web-renderer';
+import type { RenderStillOnWebImageFormat, WebRendererContainer, WebRendererVideoCodec } from '@remotion/web-renderer';
 import type React from 'react';
 import type { VideoConfig } from 'remotion';
 import type { RenderType } from './WebRenderModal';
 type WebRenderModalBasicProps = {
     readonly renderMode: RenderType;
     readonly resolvedComposition: VideoConfig;
-    readonly imageFormat: RenderStillImageFormat;
-    readonly setStillFormat: (format: RenderStillImageFormat) => void;
+    readonly imageFormat: RenderStillOnWebImageFormat;
+    readonly setStillFormat: (format: RenderStillOnWebImageFormat) => void;
     readonly frame: number;
     readonly onFrameChanged: (e: string) => void;
     readonly onFrameSetDirectly: (newFrame: number) => void;
     readonly container: WebRendererContainer;
     readonly setContainerFormat: (container: WebRendererContainer) => void;
-    readonly codec: WebRendererCodec;
-    readonly setCodec: (codec: WebRendererCodec) => void;
+    readonly codec: WebRendererVideoCodec;
+    readonly setCodec: (codec: WebRendererVideoCodec) => void;
     readonly startFrame: number | null;
     readonly setStartFrame: React.Dispatch<React.SetStateAction<number | null>>;
     readonly endFrame: number | null;

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

@@ -0,0 +1,9 @@
+import React from 'react';
+type WebRenderModalLicenseProps = {
+    readonly licenseKey: string | null;
+    readonly setLicenseKey: React.Dispatch<React.SetStateAction<string | null>>;
+    readonly initialPublicLicenseKey: string | null;
+};
+export declare const row: React.CSSProperties;
+export declare const WebRenderModalLicense: React.FC<WebRenderModalLicenseProps>;
+export {};

package/dist/components/RenderModal/WebRenderModalLicense.js

@@ -0,0 +1,130 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WebRenderModalLicense = exports.row = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const colors_1 = require("../../helpers/colors");
+const Checkbox_1 = require("../Checkbox");
+const RemInput_1 = require("../NewComposition/RemInput");
+const ValidationMessage_1 = require("../NewComposition/ValidationMessage");
+const layout_1 = require("../layout");
+exports.row = {
+    display: 'flex',
+    flexDirection: 'row',
+    paddingLeft: 16,
+    paddingRight: 16,
+};
+const tabContainer = {
+    flex: 1,
+};
+const descriptionStyle = {
+    color: colors_1.LIGHT_TEXT,
+    fontSize: 14,
+    fontFamily: 'sans-serif',
+    paddingLeft: 16,
+    paddingRight: 16,
+    paddingTop: 16,
+    paddingBottom: 8,
+    lineHeight: 1.5,
+};
+const paddedDescriptionStyle = {
+    color: colors_1.LIGHT_TEXT,
+    fontSize: 14,
+    fontFamily: 'sans-serif',
+    padding: 9,
+    border: '1px solid ' + colors_1.INPUT_BORDER_COLOR_UNHOVERED,
+    borderRadius: 8,
+    lineHeight: 1.5,
+    marginLeft: 16,
+    marginRight: 16,
+};
+const descriptionLink = {
+    color: 'white',
+    fontSize: 14,
+};
+const checkboxLabel = {
+    fontSize: 14,
+    lineHeight: '40px',
+    color: colors_1.LIGHT_TEXT,
+    flex: 1,
+    fontFamily: 'sans-serif',
+    cursor: 'pointer',
+    userSelect: 'none',
+};
+const inputStyle = {
+    minWidth: 250,
+};
+const justifyCenter = {
+    display: 'flex',
+    alignItems: 'center',
+    gap: 10,
+    flex: 1,
+};
+const codeStyle = {
+    fontSize: 14,
+    fontFamily: 'monospace',
+    color: colors_1.BLUE,
+};
+const codeLine = {
+    fontSize: 14,
+    fontFamily: 'monospace',
+    color: colors_1.LIGHT_TEXT,
+    backgroundColor: colors_1.INPUT_BACKGROUND,
+    padding: 6,
+    borderRadius: 3,
+    marginTop: 6,
+    overflowX: 'auto',
+    maxWidth: '100%',
+};
+const codeLineSmall = {
+    ...codeLine,
+    fontSize: 11,
+};
+const LICENSE_KEY_LENGTH = 55;
+const LICENSE_KEY_PREFIX = 'rm_pub_';
+const validateLicenseKey = (key) => {
+    if (key.length === 0) {
+        return { valid: false, message: null };
+    }
+    if (!key.startsWith(LICENSE_KEY_PREFIX)) {
+        return {
+            valid: false,
+            message: `License key must start with "${LICENSE_KEY_PREFIX}"`,
+        };
+    }
+    const afterPrefix = key.slice(LICENSE_KEY_PREFIX.length);
+    if (!/^[a-zA-Z0-9]*$/.test(afterPrefix)) {
+        return {
+            valid: false,
+            message: 'License key must contain only alphanumeric characters after the prefix',
+        };
+    }
+    if (key.length !== LICENSE_KEY_LENGTH) {
+        return {
+            valid: false,
+            message: `License key must be ${LICENSE_KEY_LENGTH} characters long`,
+        };
+    }
+    return { valid: true, message: null };
+};
+const WebRenderModalLicense = ({ licenseKey, setLicenseKey, initialPublicLicenseKey, }) => {
+    const onFreeLicenseChange = (0, react_1.useCallback)(() => {
+        setLicenseKey('free-license');
+    }, [setLicenseKey]);
+    const onCompanyLicenseChange = (0, react_1.useCallback)(() => {
+        setLicenseKey(initialPublicLicenseKey !== null && initialPublicLicenseKey !== void 0 ? initialPublicLicenseKey : '');
+    }, [initialPublicLicenseKey, setLicenseKey]);
+    const onLicenseKeyChange = (0, react_1.useCallback)((e) => {
+        setLicenseKey(e.target.value);
+    }, [setLicenseKey]);
+    const licenseValidation = (0, react_1.useMemo)(() => {
+        if (licenseKey === null || licenseKey === 'free-license') {
+            return { valid: true, message: null };
+        }
+        return validateLicenseKey(licenseKey);
+    }, [licenseKey]);
+    return ((0, jsx_runtime_1.jsxs)("div", { style: tabContainer, children: [(0, jsx_runtime_1.jsxs)("div", { style: descriptionStyle, children: ["Remotion is free if you are an individual or company with a headcount of 3 or less. See", ' ', (0, jsx_runtime_1.jsx)("a", { style: descriptionLink, href: "https://remotion.dev/license", children: "LICENSE.md" }), "."] }), (0, jsx_runtime_1.jsx)("div", { style: exports.row, children: (0, jsx_runtime_1.jsxs)("div", { style: justifyCenter, children: [(0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { checked: licenseKey === 'free-license', onChange: onFreeLicenseChange, name: "free-license", rounded: true }), (0, jsx_runtime_1.jsxs)("div", { style: checkboxLabel, onClick: onFreeLicenseChange, children: ["I am eligible for the Free License, ", "don't", " print a warning"] })] }) }), licenseKey === 'free-license' ? ((0, jsx_runtime_1.jsxs)("div", { style: paddedDescriptionStyle, children: ["Enjoy Remotion! Add the following to", ' ', (0, jsx_runtime_1.jsx)("code", { style: codeStyle, children: "remotion.config.ts" }), " to persist this setting:", (0, jsx_runtime_1.jsx)("div", { style: codeLine, children: "Config.setPublicLicenseKey('free-license');" })] })) : null, (0, jsx_runtime_1.jsx)("div", { style: exports.row, children: (0, jsx_runtime_1.jsxs)("div", { style: justifyCenter, children: [(0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { checked: licenseKey !== 'free-license' && licenseKey !== null, onChange: onCompanyLicenseChange, name: "company-license", rounded: true }), (0, jsx_runtime_1.jsx)("div", { style: checkboxLabel, onClick: onCompanyLicenseChange, children: "I have a Company License" })] }) }), licenseKey !== 'free-license' && licenseKey !== null ? ((0, jsx_runtime_1.jsxs)("div", { style: paddedDescriptionStyle, children: ["Add your public license from", ' ', (0, jsx_runtime_1.jsx)("a", { href: "https://remotion.pro/dashboard", target: "_blank", style: descriptionLink, children: "remotion.pro" }), ' ', "key below.", (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1, block: true }), (0, jsx_runtime_1.jsx)(RemInput_1.RemotionInput, { value: licenseKey, onChange: onLicenseKeyChange, placeholder: "remotion.pro public license key (starts with rm_pub_)", status: licenseValidation.valid || licenseKey.length === 0
+                            ? 'ok'
+                            : 'error', rightAlign: false, style: inputStyle, autoFocus: true }), licenseValidation.message ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1, block: true }), (0, jsx_runtime_1.jsx)(ValidationMessage_1.ValidationMessage, { message: licenseValidation.message, align: "flex-start", type: "error" })] })) : null, licenseValidation.valid && licenseKey.length > 0 ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1, block: true }), "Add the following to", ' ', (0, jsx_runtime_1.jsx)("code", { style: codeStyle, children: "remotion.config.ts" }), " to persist this setting:", (0, jsx_runtime_1.jsx)("div", { style: codeLineSmall, children: "Config.setPublicLicenseKey('" + licenseKey + "');" })] })) : null] })) : null, licenseKey === null ? ((0, jsx_runtime_1.jsxs)("div", { style: descriptionStyle, children: ["If you are not eligible for the free license, you need to obtain a", ' ', (0, jsx_runtime_1.jsx)("a", { style: descriptionLink, target: "_blank", href: "https://remotion.pro/license", children: "Company License" }), "."] })) : null] }));
+};
+exports.WebRenderModalLicense = WebRenderModalLicense;

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

@@ -0,0 +1 @@
+export declare const WebRendererExperimentalBadge: React.FC;

package/dist/components/RenderModal/WebRendererExperimentalBadge.js

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WebRendererExperimentalBadge = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const colors_1 = require("../../helpers/colors");
+const ValidationMessage_1 = require("../NewComposition/ValidationMessage");
+const row = {
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+};
+const text = {
+    fontSize: 14,
+    fontFamily: 'sans-serif',
+    color: colors_1.LIGHT_TEXT,
+};
+const icon = {
+    width: 14,
+    height: 14,
+    flexShrink: 0,
+    fill: colors_1.WARNING_COLOR,
+    marginRight: 8,
+};
+const link = {
+    color: 'inherit',
+    textDecoration: 'underline',
+    fontSize: 14,
+};
+const WebRendererExperimentalBadge = () => {
+    return ((0, jsx_runtime_1.jsxs)("div", { style: row, children: [(0, jsx_runtime_1.jsx)(ValidationMessage_1.WarningTriangle, { type: "warning", style: icon }), (0, jsx_runtime_1.jsxs)("div", { style: text, children: ["The Remotion Web Renderer is experimental.", ' ', (0, jsx_runtime_1.jsx)("a", { href: "https://github.com/remotion-dev/remotion/issues/5913", target: "_blank", rel: "noopener noreferrer", style: link, children: "Track progress on GitHub" }), ' ', "and discuss in the", ' ', (0, jsx_runtime_1.jsx)("a", { href: "https://remotion.dev/discord", target: "_blank", rel: "noopener noreferrer", style: link, children: "#web-renderer" }), ' ', "channel on Discord."] })] }));
+};
+exports.WebRendererExperimentalBadge = WebRendererExperimentalBadge;