@remotion/studio 4.0.402 → 4.0.404

package/dist/components/Menu/MenuSubItem.d.ts

@@ -16,4 +16,5 @@ export declare const MenuSubItem: React.FC<{
     readonly onNextMenu: () => void;
     readonly subMenuActivated: SubMenuActivated;
     readonly setSubMenuActivated: React.Dispatch<React.SetStateAction<SubMenuActivated>>;
+    readonly disabled?: boolean;
 }>;

package/dist/components/Menu/MenuSubItem.js

@@ -44,7 +44,7 @@ const leftSpace = {
     justifyContent: 'center',
     alignItems: 'center',
 };
-const MenuSubItem = ({ label, leaveLeftSpace, leftItem, onActionChosen, id, selected, onItemSelected, keyHint, subMenu, onQuitMenu, subMenuActivated, setSubMenuActivated, }) => {
+const MenuSubItem = ({ label, leaveLeftSpace, leftItem, onActionChosen, id, selected, onItemSelected, keyHint, subMenu, onQuitMenu, subMenuActivated, setSubMenuActivated, disabled, }) => {
     const [hovered, setHovered] = (0, react_1.useState)(false);
     const ref = (0, react_1.useRef)(null);
     const size = player_1.PlayerInternals.useElementSize(ref, {
@@ -56,21 +56,29 @@ const MenuSubItem = ({ label, leaveLeftSpace, leftItem, onActionChosen, id, sele
     const style = (0, react_1.useMemo)(() => {
         return {
             ...container,
-            backgroundColor: selected ? colors_1.CLEAR_HOVER : 'transparent',
+            backgroundColor: selected && !disabled ? colors_1.CLEAR_HOVER : 'transparent',
+            opacity: disabled ? 0.5 : 1,
+            cursor: disabled ? 'not-allowed' : 'default',
         };
-    }, [selected]);
+    }, [selected, disabled]);
     const onPointerUp = (0, react_1.useCallback)((e) => {
+        if (disabled) {
+            return;
+        }
         if (subMenu) {
             setSubMenuActivated('with-mouse');
             setHovered(true);
             return;
         }
         onActionChosen(id, e);
-    }, [id, onActionChosen, setSubMenuActivated, subMenu]);
+    }, [disabled, id, onActionChosen, setSubMenuActivated, subMenu]);
     const onPointerEnter = (0, react_1.useCallback)(() => {
+        if (disabled) {
+            return;
+        }
         onItemSelected(id);
         setHovered(true);
-    }, [id, onItemSelected]);
+    }, [disabled, id, onItemSelected]);
     const onPointerLeave = (0, react_1.useCallback)(() => {
         setHovered(false);
     }, []);

package/dist/components/NewComposition/ComboBox.d.ts

@@ -18,6 +18,7 @@ export type SelectionItem = {
     leftItem: React.ReactNode;
     subMenu: SubMenu | null;
     quickSwitcherLabel: string | null;
+    disabled?: boolean;
 };
 export type ComboboxValue = DividerItem | SelectionItem;
 export declare const Combobox: React.FC<{

package/dist/components/NewComposition/MenuContent.js

@@ -38,6 +38,9 @@ const MenuContent = ({ onHide, values, preselectIndex, onNextMenu, onPreviousMen
     const onItemSelected = (0, react_1.useCallback)((id) => {
         setSelectedItem(id);
     }, []);
+    const isItemSelectable = (0, react_1.useCallback)((v) => {
+        return v.type !== 'divider' && !v.disabled;
+    }, []);
     const onArrowUp = (0, react_1.useCallback)(() => {
         setSelectedItem((prevItem) => {
             if (prevItem === null) {
@@ -47,34 +50,34 @@ const MenuContent = ({ onHide, values, preselectIndex, onNextMenu, onPreviousMen
             if ((topItemCanBeUnselected && index === 0) || prevItem === null) {
                 return null;
             }
-            const previousItems = values.filter((v, i) => i < index && v.type !== 'divider');
+            const previousItems = values.filter((v, i) => i < index && isItemSelectable(v));
             if (previousItems.length > 0) {
                 return previousItems[previousItems.length - 1].id;
             }
-            const firstNonDivider = values.find((v) => v.type !== 'divider');
-            if (firstNonDivider) {
-                return firstNonDivider.id;
+            const firstSelectable = values.find((v) => isItemSelectable(v));
+            if (firstSelectable) {
+                return firstSelectable.id;
             }
             throw new Error('could not find previous item');
         });
-    }, [topItemCanBeUnselected, values]);
+    }, [topItemCanBeUnselected, values, isItemSelectable]);
     const onArrowDown = (0, react_1.useCallback)(() => {
         setSelectedItem((prevItem) => {
             const index = values.findIndex((val) => val.id === prevItem);
-            const nextItem = values.find((v, i) => i > index && v.type !== 'divider');
+            const nextItem = values.find((v, i) => i > index && isItemSelectable(v));
             if (nextItem) {
                 return nextItem.id;
             }
-            const lastNonDivider = values
+            const lastSelectable = values
                 .slice()
                 .reverse()
-                .find((v) => v.type !== 'divider');
-            if (lastNonDivider) {
-                return lastNonDivider.id;
+                .find((v) => isItemSelectable(v));
+            if (lastSelectable) {
+                return lastSelectable.id;
             }
             throw new Error('could not find next item');
         });
-    }, [values]);
+    }, [values, isItemSelectable]);
     const onEnter = (0, react_1.useCallback)(() => {
         if (selectedItem === null) {
             return onHide();
@@ -86,6 +89,9 @@ const MenuContent = ({ onHide, values, preselectIndex, onNextMenu, onPreviousMen
         if (item.type === 'divider') {
             throw new Error('cannot find divider');
         }
+        if (item.disabled) {
+            return;
+        }
         if (item.subMenu) {
             return setSubMenuActivated('without-mouse');
         }
@@ -249,7 +255,7 @@ const MenuContent = ({ onHide, values, preselectIndex, onNextMenu, onPreviousMen
                 }
                 onHide();
             };
-            return ((0, jsx_runtime_1.jsx)(MenuSubItem_1.MenuSubItem, { selected: item.id === selectedItem, onActionChosen: onClick, onItemSelected: onItemSelected, label: item.label, id: item.id, keyHint: item.keyHint, leaveLeftSpace: leaveLeftSpace, leftItem: item.leftItem, subMenu: item.subMenu, onQuitMenu: onHide, onNextMenu: onNextMenu, subMenuActivated: subMenuActivated, setSubMenuActivated: setSubMenuActivated }, item.id));
+            return ((0, jsx_runtime_1.jsx)(MenuSubItem_1.MenuSubItem, { selected: item.id === selectedItem, onActionChosen: onClick, onItemSelected: onItemSelected, label: item.label, id: item.id, keyHint: item.keyHint, leaveLeftSpace: leaveLeftSpace, leftItem: item.leftItem, subMenu: item.subMenu, onQuitMenu: onHide, onNextMenu: onNextMenu, subMenuActivated: subMenuActivated, setSubMenuActivated: setSubMenuActivated, disabled: item.disabled }, item.id));
         }) }));
 };
 exports.MenuContent = MenuContent;

package/dist/components/RenderModal/WebRenderModal.js

@@ -22,6 +22,8 @@ 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 use_encodable_audio_codecs_1 = require("./use-encodable-audio-codecs");
+const use_encodable_video_codecs_1 = require("./use-encodable-video-codecs");
 const WebRendererExperimentalBadge_1 = require("./WebRendererExperimentalBadge");
 const WebRenderModalAdvanced_1 = require("./WebRenderModalAdvanced");
 const WebRenderModalAudio_1 = require("./WebRenderModalAudio");
@@ -99,6 +101,8 @@ const WebRenderModal = ({ initialFrame, defaultProps, inFrameMark, outFrameMark,
     // Video-specific state
     const [codec, setCodec] = (0, react_1.useState)('h264');
     const [container, setContainer] = (0, react_1.useState)('mp4');
+    const [audioCodec, setAudioCodec] = (0, react_1.useState)('aac');
+    const [audioBitrate, setAudioBitrate] = (0, react_1.useState)('medium');
     const [videoBitrate, setVideoBitrate] = (0, react_1.useState)('high');
     const [hardwareAcceleration, setHardwareAcceleration] = (0, react_1.useState)('no-preference');
     const [keyframeIntervalInSeconds, setKeyframeIntervalInSeconds] = (0, react_1.useState)(5);
@@ -108,6 +112,22 @@ const WebRenderModal = ({ initialFrame, defaultProps, inFrameMark, outFrameMark,
     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 encodableAudioCodecs = (0, use_encodable_audio_codecs_1.useEncodableAudioCodecs)(container);
+    const encodableVideoCodecs = (0, use_encodable_video_codecs_1.useEncodableVideoCodecs)(container);
+    const effectiveAudioCodec = (0, react_1.useMemo)(() => {
+        var _a;
+        if (encodableAudioCodecs.includes(audioCodec)) {
+            return audioCodec;
+        }
+        return (_a = encodableAudioCodecs[0]) !== null && _a !== void 0 ? _a : audioCodec;
+    }, [audioCodec, encodableAudioCodecs]);
+    const effectiveVideoCodec = (0, react_1.useMemo)(() => {
+        var _a;
+        if (encodableVideoCodecs.includes(codec)) {
+            return codec;
+        }
+        return (_a = encodableVideoCodecs[0]) !== null && _a !== void 0 ? _a : codec;
+    }, [codec, encodableVideoCodecs]);
     const finalEndFrame = (0, react_1.useMemo)(() => {
         if (endFrame === null) {
             return resolvedComposition.durationInFrames - 1;
@@ -149,6 +169,7 @@ const WebRenderModal = ({ initialFrame, defaultProps, inFrameMark, outFrameMark,
     }, []);
     const setContainerFormat = (0, react_1.useCallback)((newContainer) => {
         setContainer(newContainer);
+        setAudioCodec((0, web_renderer_1.getDefaultAudioCodecForContainer)(newContainer));
         setOutName((prev) => {
             const newFileName = (0, get_string_before_suffix_1.getStringBeforeSuffix)(prev) + '.' + newContainer;
             return newFileName;
@@ -162,7 +183,7 @@ const WebRenderModal = ({ initialFrame, defaultProps, inFrameMark, outFrameMark,
                 return newFileName;
             });
         }
-        else {
+        else if (newMode === 'still') {
             setOutName((prev) => {
                 const newFileName = (0, get_string_before_suffix_1.getStringBeforeSuffix)(prev) + '.' + imageFormat;
                 return newFileName;
@@ -316,7 +337,9 @@ const WebRenderModal = ({ initialFrame, defaultProps, inFrameMark, outFrameMark,
             delayRenderTimeoutInMilliseconds: delayRenderTimeout,
             mediaCacheSizeInBytes,
             logLevel,
-            videoCodec: codec,
+            videoCodec: effectiveVideoCodec,
+            audioCodec: effectiveAudioCodec,
+            audioBitrate,
             container,
             videoBitrate,
             hardwareAcceleration,
@@ -348,7 +371,9 @@ const WebRenderModal = ({ initialFrame, defaultProps, inFrameMark, outFrameMark,
         delayRenderTimeout,
         mediaCacheSizeInBytes,
         logLevel,
-        codec,
+        effectiveVideoCodec,
+        effectiveAudioCodec,
+        audioBitrate,
         container,
         videoBitrate,
         hardwareAcceleration,
@@ -376,7 +401,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.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 })) })] })] }));
+                                : `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, setCodec: setCodec, encodableVideoCodecs: encodableVideoCodecs, effectiveVideoCodec: effectiveVideoCodec, 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, audioCodec: audioCodec, setAudioCodec: setAudioCodec, audioBitrate: audioBitrate, setAudioBitrate: setAudioBitrate, container: container, encodableCodecs: encodableAudioCodecs, effectiveAudioCodec: effectiveAudioCodec })) : 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/WebRenderModalAudio.d.ts

@@ -1,5 +1,13 @@
-import type React from 'react';
+import type { WebRendererAudioCodec, WebRendererContainer, WebRendererQuality } from '@remotion/web-renderer';
+import React from 'react';
 export declare const WebRenderModalAudio: React.FC<{
     readonly muted: boolean;
     readonly setMuted: React.Dispatch<React.SetStateAction<boolean>>;
+    readonly audioCodec: WebRendererAudioCodec;
+    readonly setAudioCodec: React.Dispatch<React.SetStateAction<WebRendererAudioCodec>>;
+    readonly audioBitrate: WebRendererQuality;
+    readonly setAudioBitrate: React.Dispatch<React.SetStateAction<WebRendererQuality>>;
+    readonly container: WebRendererContainer;
+    readonly encodableCodecs: WebRendererAudioCodec[];
+    readonly effectiveAudioCodec: WebRendererAudioCodec;
 }>;

package/dist/components/RenderModal/WebRenderModalAudio.js

@@ -2,13 +2,62 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.WebRenderModalAudio = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const web_renderer_1 = require("@remotion/web-renderer");
+const react_1 = require("react");
+const Checkmark_1 = require("../../icons/Checkmark");
 const is_menu_item_1 = require("../Menu/is-menu-item");
+const ComboBox_1 = require("../NewComposition/ComboBox");
+const layout_1 = require("../layout");
 const MutedSetting_1 = require("./MutedSetting");
+const RenderModalHr_1 = require("./RenderModalHr");
+const layout_2 = require("./layout");
+const quality_options_1 = require("./quality-options");
 const container = {
     flex: 1,
     overflowY: 'auto',
 };
-const WebRenderModalAudio = ({ muted, setMuted }) => {
-    return ((0, jsx_runtime_1.jsx)("div", { style: container, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: (0, jsx_runtime_1.jsx)(MutedSetting_1.MutedSetting, { enforceAudioTrack: false, muted: muted, setMuted: setMuted }) }));
+const fallbackNoticeStyle = {
+    backgroundColor: 'rgba(59, 130, 246, 0.15)',
+    border: '1px solid rgba(59, 130, 246, 0.4)',
+    borderRadius: 4,
+    padding: '8px 12px',
+    marginLeft: 16,
+    marginRight: 16,
+    marginTop: 8,
+    fontSize: 13,
+    lineHeight: 1.4,
+    color: '#60a5fa',
+};
+const humanReadableWebAudioCodec = (audioCodec) => {
+    switch (audioCodec) {
+        case 'aac':
+            return 'AAC';
+        case 'opus':
+            return 'Opus';
+        default:
+            return audioCodec;
+    }
+};
+const WebRenderModalAudio = ({ muted, setMuted, audioCodec, setAudioCodec, audioBitrate, setAudioBitrate, container: videoContainer, encodableCodecs, effectiveAudioCodec, }) => {
+    const containerSupported = (0, react_1.useMemo)(() => (0, web_renderer_1.getSupportedAudioCodecsForContainer)(videoContainer), [videoContainer]);
+    const audioCodecOptions = (0, react_1.useMemo)(() => {
+        return containerSupported.map((codec) => {
+            const isEncodable = encodableCodecs.includes(codec);
+            return {
+                label: humanReadableWebAudioCodec(codec),
+                onClick: () => setAudioCodec(codec),
+                leftItem: audioCodec === codec ? (0, jsx_runtime_1.jsx)(Checkmark_1.Checkmark, {}) : null,
+                id: codec,
+                keyHint: null,
+                quickSwitcherLabel: null,
+                subMenu: null,
+                type: 'item',
+                value: codec,
+                disabled: !isEncodable,
+            };
+        });
+    }, [containerSupported, encodableCodecs, audioCodec, setAudioCodec]);
+    const audioBitrateOptions = (0, react_1.useMemo)(() => (0, quality_options_1.getQualityOptions)(audioBitrate, setAudioBitrate), [audioBitrate, setAudioBitrate]);
+    return ((0, jsx_runtime_1.jsxs)("div", { style: container, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: [(0, jsx_runtime_1.jsx)(MutedSetting_1.MutedSetting, { enforceAudioTrack: false, muted: muted, setMuted: setMuted }), !muted ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(RenderModalHr_1.RenderModalHr, {}), (0, jsx_runtime_1.jsxs)("div", { style: layout_2.optionRow, children: [(0, jsx_runtime_1.jsxs)("div", { style: layout_2.label, children: ["Audio Quality", (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.5 })] }), (0, jsx_runtime_1.jsx)("div", { style: layout_2.rightRow, children: (0, jsx_runtime_1.jsx)(ComboBox_1.Combobox, { values: audioBitrateOptions, selectedId: audioBitrate, title: "Audio Quality" }) })] }), (0, jsx_runtime_1.jsxs)("div", { style: layout_2.optionRow, children: [(0, jsx_runtime_1.jsxs)("div", { style: layout_2.label, children: ["Audio Codec", (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.5 })] }), (0, jsx_runtime_1.jsx)("div", { style: layout_2.rightRow, children: (0, jsx_runtime_1.jsx)(ComboBox_1.Combobox, { values: audioCodecOptions, selectedId: audioCodec, title: "Audio Codec" }) })] }), effectiveAudioCodec !== audioCodec ? ((0, jsx_runtime_1.jsxs)("div", { style: fallbackNoticeStyle, children: [humanReadableWebAudioCodec(audioCodec), " is not available in this browser. Using ", humanReadableWebAudioCodec(effectiveAudioCodec), ' ', "instead."] })) : null] })) : null] }));
 };
 exports.WebRenderModalAudio = WebRenderModalAudio;

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

@@ -13,8 +13,9 @@ type WebRenderModalBasicProps = {
     readonly onFrameSetDirectly: (newFrame: number) => void;
     readonly container: WebRendererContainer;
     readonly setContainerFormat: (container: WebRendererContainer) => void;
-    readonly codec: WebRendererVideoCodec;
     readonly setCodec: (codec: WebRendererVideoCodec) => void;
+    readonly encodableVideoCodecs: WebRendererVideoCodec[];
+    readonly effectiveVideoCodec: WebRendererVideoCodec;
     readonly startFrame: number | null;
     readonly setStartFrame: React.Dispatch<React.SetStateAction<number | null>>;
     readonly endFrame: number | null;

package/dist/components/RenderModal/WebRenderModalBasic.js

@@ -17,7 +17,7 @@ const RenderModalOutputName_1 = require("./RenderModalOutputName");
 const tabContainer = {
     flex: 1,
 };
-const WebRenderModalBasic = ({ renderMode, resolvedComposition, imageFormat, setStillFormat, frame, onFrameChanged, onFrameSetDirectly, container, setContainerFormat, codec, setCodec, startFrame, setStartFrame, endFrame, setEndFrame, outName, onOutNameChange, validationMessage, logLevel, setLogLevel, }) => {
+const WebRenderModalBasic = ({ renderMode, resolvedComposition, imageFormat, setStillFormat, frame, onFrameChanged, onFrameSetDirectly, container, setContainerFormat, setCodec, encodableVideoCodecs, effectiveVideoCodec, startFrame, setStartFrame, endFrame, setEndFrame, outName, onOutNameChange, validationMessage, logLevel, setLogLevel, }) => {
     const imageFormatOptions = (0, react_1.useMemo)(() => {
         return [
             {
@@ -81,65 +81,26 @@ const WebRenderModalBasic = ({ renderMode, resolvedComposition, imageFormat, set
             },
         ];
     }, [container, setContainerFormat]);
+    const codecLabels = (0, react_1.useMemo)(() => ({
+        h264: 'H.264',
+        h265: 'H.265',
+        vp8: 'VP8',
+        vp9: 'VP9',
+        av1: 'AV1',
+    }), []);
     const codecOptions = (0, react_1.useMemo)(() => {
-        return [
-            {
-                label: 'H.264',
-                onClick: () => setCodec('h264'),
-                leftItem: codec === 'h264' ? (0, jsx_runtime_1.jsx)(Checkmark_1.Checkmark, {}) : null,
-                id: 'h264',
-                keyHint: null,
-                quickSwitcherLabel: null,
-                subMenu: null,
-                type: 'item',
-                value: 'h264',
-            },
-            {
-                label: 'H.265',
-                onClick: () => setCodec('h265'),
-                leftItem: codec === 'h265' ? (0, jsx_runtime_1.jsx)(Checkmark_1.Checkmark, {}) : null,
-                id: 'h265',
-                keyHint: null,
-                quickSwitcherLabel: null,
-                subMenu: null,
-                type: 'item',
-                value: 'h265',
-            },
-            {
-                label: 'VP8',
-                onClick: () => setCodec('vp8'),
-                leftItem: codec === 'vp8' ? (0, jsx_runtime_1.jsx)(Checkmark_1.Checkmark, {}) : null,
-                id: 'vp8',
-                keyHint: null,
-                quickSwitcherLabel: null,
-                subMenu: null,
-                type: 'item',
-                value: 'vp8',
-            },
-            {
-                label: 'VP9',
-                onClick: () => setCodec('vp9'),
-                leftItem: codec === 'vp9' ? (0, jsx_runtime_1.jsx)(Checkmark_1.Checkmark, {}) : null,
-                id: 'vp9',
-                keyHint: null,
-                quickSwitcherLabel: null,
-                subMenu: null,
-                type: 'item',
-                value: 'vp9',
-            },
-            {
-                label: 'AV1',
-                onClick: () => setCodec('av1'),
-                leftItem: codec === 'av1' ? (0, jsx_runtime_1.jsx)(Checkmark_1.Checkmark, {}) : null,
-                id: 'av1',
-                keyHint: null,
-                quickSwitcherLabel: null,
-                subMenu: null,
-                type: 'item',
-                value: 'av1',
-            },
-        ];
-    }, [codec, setCodec]);
-    return ((0, jsx_runtime_1.jsxs)("div", { style: tabContainer, children: [renderMode === 'still' ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { style: layout_2.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_2.label, children: "Format" }), (0, jsx_runtime_1.jsx)("div", { style: layout_2.rightRow, children: (0, jsx_runtime_1.jsx)(SegmentedControl_1.SegmentedControl, { items: imageFormatOptions, needsWrapping: true }) })] }), resolvedComposition.durationInFrames > 1 ? ((0, jsx_runtime_1.jsxs)("div", { style: layout_2.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_2.label, children: "Frame" }), (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: frame, onTextChange: onFrameChanged, placeholder: `0-${resolvedComposition.durationInFrames - 1}`, onValueChange: onFrameSetDirectly, name: "frame", step: 1, min: 0, status: "ok", max: resolvedComposition.durationInFrames - 1, rightAlign: true }) }) })] })) : null] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { style: layout_2.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_2.label, children: "Container" }), (0, jsx_runtime_1.jsx)("div", { style: layout_2.rightRow, children: (0, jsx_runtime_1.jsx)(ComboBox_1.Combobox, { values: containerOptions, selectedId: container, title: "Container" }) })] }), (0, jsx_runtime_1.jsxs)("div", { style: layout_2.optionRow, children: [(0, jsx_runtime_1.jsxs)("div", { style: layout_2.label, children: ["Codec", (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.5 }), (0, jsx_runtime_1.jsx)(OptionExplainerBubble_1.OptionExplainerBubble, { id: "videoCodecOption" })] }), (0, jsx_runtime_1.jsx)("div", { style: layout_2.rightRow, children: (0, jsx_runtime_1.jsx)(ComboBox_1.Combobox, { values: codecOptions, selectedId: codec, title: "Codec" }) })] }), (0, jsx_runtime_1.jsx)(FrameRangeSetting_1.FrameRangeSetting, { durationInFrames: resolvedComposition.durationInFrames, startFrame: startFrame !== null && startFrame !== void 0 ? startFrame : 0, endFrame: endFrame !== null && endFrame !== void 0 ? endFrame : resolvedComposition.durationInFrames - 1, setStartFrame: setStartFrame, setEndFrame: setEndFrame })] })), (0, jsx_runtime_1.jsx)(RenderModalOutputName_1.RenderModalOutputName, { existence: false, inputStyle: layout_2.input, outName: outName, onValueChange: onOutNameChange, validationMessage: validationMessage, label: "Download name" }), (0, jsx_runtime_1.jsxs)("div", { style: layout_2.optionRow, children: [(0, jsx_runtime_1.jsxs)("div", { style: layout_2.label, children: ["Log Level ", (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.5 }), (0, jsx_runtime_1.jsx)(OptionExplainerBubble_1.OptionExplainerBubble, { id: "logLevelOption" })] }), (0, jsx_runtime_1.jsx)("div", { style: layout_2.rightRow, children: (0, jsx_runtime_1.jsx)(ComboBox_1.Combobox, { values: logLevelOptions, selectedId: logLevel, title: "Log Level" }) })] })] }));
+        return encodableVideoCodecs.map((c) => ({
+            label: codecLabels[c],
+            onClick: () => setCodec(c),
+            leftItem: effectiveVideoCodec === c ? (0, jsx_runtime_1.jsx)(Checkmark_1.Checkmark, {}) : null,
+            id: c,
+            keyHint: null,
+            quickSwitcherLabel: null,
+            subMenu: null,
+            type: 'item',
+            value: c,
+        }));
+    }, [encodableVideoCodecs, effectiveVideoCodec, setCodec, codecLabels]);
+    return ((0, jsx_runtime_1.jsxs)("div", { style: tabContainer, children: [renderMode === 'still' ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { style: layout_2.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_2.label, children: "Format" }), (0, jsx_runtime_1.jsx)("div", { style: layout_2.rightRow, children: (0, jsx_runtime_1.jsx)(SegmentedControl_1.SegmentedControl, { items: imageFormatOptions, needsWrapping: true }) })] }), resolvedComposition.durationInFrames > 1 ? ((0, jsx_runtime_1.jsxs)("div", { style: layout_2.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_2.label, children: "Frame" }), (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: frame, onTextChange: onFrameChanged, placeholder: `0-${resolvedComposition.durationInFrames - 1}`, onValueChange: onFrameSetDirectly, name: "frame", step: 1, min: 0, status: "ok", max: resolvedComposition.durationInFrames - 1, rightAlign: true }) }) })] })) : null] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { style: layout_2.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_2.label, children: "Container" }), (0, jsx_runtime_1.jsx)("div", { style: layout_2.rightRow, children: (0, jsx_runtime_1.jsx)(ComboBox_1.Combobox, { values: containerOptions, selectedId: container, title: "Container" }) })] }), (0, jsx_runtime_1.jsxs)("div", { style: layout_2.optionRow, children: [(0, jsx_runtime_1.jsxs)("div", { style: layout_2.label, children: ["Codec", (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.5 }), (0, jsx_runtime_1.jsx)(OptionExplainerBubble_1.OptionExplainerBubble, { id: "videoCodecOption" })] }), (0, jsx_runtime_1.jsx)("div", { style: layout_2.rightRow, children: (0, jsx_runtime_1.jsx)(ComboBox_1.Combobox, { values: codecOptions, selectedId: effectiveVideoCodec, title: "Codec" }) })] }), (0, jsx_runtime_1.jsx)(FrameRangeSetting_1.FrameRangeSetting, { durationInFrames: resolvedComposition.durationInFrames, startFrame: startFrame !== null && startFrame !== void 0 ? startFrame : 0, endFrame: endFrame !== null && endFrame !== void 0 ? endFrame : resolvedComposition.durationInFrames - 1, setStartFrame: setStartFrame, setEndFrame: setEndFrame })] })), (0, jsx_runtime_1.jsx)(RenderModalOutputName_1.RenderModalOutputName, { existence: false, inputStyle: layout_2.input, outName: outName, onValueChange: onOutNameChange, validationMessage: validationMessage, label: "Download name" }), (0, jsx_runtime_1.jsxs)("div", { style: layout_2.optionRow, children: [(0, jsx_runtime_1.jsxs)("div", { style: layout_2.label, children: ["Log Level ", (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.5 }), (0, jsx_runtime_1.jsx)(OptionExplainerBubble_1.OptionExplainerBubble, { id: "logLevelOption" })] }), (0, jsx_runtime_1.jsx)("div", { style: layout_2.rightRow, children: (0, jsx_runtime_1.jsx)(ComboBox_1.Combobox, { values: logLevelOptions, selectedId: logLevel, title: "Log Level" }) })] })] }));
 };
 exports.WebRenderModalBasic = WebRenderModalBasic;

package/dist/components/RenderModal/WebRenderModalLicense.js

@@ -8,6 +8,7 @@ const Checkbox_1 = require("../Checkbox");
 const RemInput_1 = require("../NewComposition/RemInput");
 const ValidationMessage_1 = require("../NewComposition/ValidationMessage");
 const layout_1 = require("../layout");
+const WebRenderModalLicenseKeyDetails_1 = require("./WebRenderModalLicenseKeyDetails");
 exports.row = {
     display: 'flex',
     flexDirection: 'row',
@@ -84,12 +85,13 @@ const LICENSE_KEY_LENGTH = 55;
 const LICENSE_KEY_PREFIX = 'rm_pub_';
 const validateLicenseKey = (key) => {
     if (key.length === 0) {
-        return { valid: false, message: null };
+        return { valid: false, message: null, details: null };
     }
     if (!key.startsWith(LICENSE_KEY_PREFIX)) {
         return {
             valid: false,
             message: `License key must start with "${LICENSE_KEY_PREFIX}"`,
+            details: null,
         };
     }
     const afterPrefix = key.slice(LICENSE_KEY_PREFIX.length);
@@ -97,17 +99,58 @@ const validateLicenseKey = (key) => {
         return {
             valid: false,
             message: 'License key must contain only alphanumeric characters after the prefix',
+            details: null,
         };
     }
     if (key.length !== LICENSE_KEY_LENGTH) {
         return {
             valid: false,
             message: `License key must be ${LICENSE_KEY_LENGTH} characters long`,
+            details: null,
         };
     }
-    return { valid: true, message: null };
+    return { valid: true, message: null, details: null };
 };
 const WebRenderModalLicense = ({ licenseKey, setLicenseKey, initialPublicLicenseKey, }) => {
+    const [licenseValidation, setLicenseValidation] = (0, react_1.useState)({ valid: true, message: null, details: null });
+    const [isLoading, setIsLoading] = (0, react_1.useState)(false);
+    (0, react_1.useEffect)(() => {
+        if (licenseKey === null || licenseKey === 'free-license') {
+            return setLicenseValidation({
+                valid: true,
+                message: null,
+                details: null,
+            });
+        }
+        const validation = validateLicenseKey(licenseKey);
+        if (!validation.valid) {
+            return setLicenseValidation(validation);
+        }
+        setLicenseValidation({ valid: true, message: null, details: null });
+        setIsLoading(true);
+        (0, WebRenderModalLicenseKeyDetails_1.fetchLicenseKeyDetails)(licenseKey)
+            .then((details) => {
+            setIsLoading(false);
+            if (details.isValid) {
+                setLicenseValidation({ valid: true, message: null, details });
+            }
+            else {
+                setLicenseValidation({
+                    valid: false,
+                    message: 'License key is invalid or has been reset',
+                    details: null,
+                });
+            }
+        })
+            .catch(() => {
+            setIsLoading(false);
+            setLicenseValidation({
+                valid: false,
+                message: 'Failed to fetch license key details',
+                details: null,
+            });
+        });
+    }, [licenseKey]);
     const onFreeLicenseChange = (0, react_1.useCallback)(() => {
         setLicenseKey('free-license');
     }, [setLicenseKey]);
@@ -117,14 +160,8 @@ const WebRenderModalLicense = ({ licenseKey, setLicenseKey, initialPublicLicense
     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] }));
+                            : '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, isLoading && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1, block: true }), "Loading license key details..."] })), licenseValidation.details && ((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)(WebRenderModalLicenseKeyDetails_1.WebRenderModalLicenseKeyDetails, { details: licenseValidation.details })] }))] })) : 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/WebRenderModalLicenseKeyDetails.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+export type LicenseKeyDetails = {
+    readonly isValid: boolean;
+    readonly hasActiveSubscription: boolean;
+    readonly projectName: string;
+    readonly projectSlug: string;
+};
+type WebRenderModalLicenseKeyDetailsProps = {
+    readonly details: LicenseKeyDetails;
+};
+export declare const fetchLicenseKeyDetails: (licenseKey: string) => Promise<LicenseKeyDetails>;
+export declare const WebRenderModalLicenseKeyDetails: React.FC<WebRenderModalLicenseKeyDetailsProps>;
+export {};

package/dist/components/RenderModal/WebRenderModalLicenseKeyDetails.js

@@ -0,0 +1,49 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WebRenderModalLicenseKeyDetails = exports.fetchLicenseKeyDetails = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const colors_1 = require("../../helpers/colors");
+const check_circle_filled_1 = require("../../icons/check-circle-filled");
+const ValidationMessage_1 = require("../NewComposition/ValidationMessage");
+const textStyle = {
+    color: colors_1.LIGHT_TEXT,
+    fontSize: 14,
+    fontFamily: 'sans-serif',
+    lineHeight: 1.5,
+    display: 'flex',
+    alignItems: 'center',
+};
+const linkStyle = {
+    fontSize: 14,
+    fontFamily: 'sans-serif',
+    lineHeight: 1.5,
+    cursor: 'pointer',
+};
+const bulletStyle = {
+    display: 'flex',
+    alignItems: 'center',
+    gap: 6,
+};
+const icon = {
+    width: 14,
+    height: 14,
+    flexShrink: 0,
+};
+const PRO_HOST = 'https://remotion.pro';
+const fetchLicenseKeyDetails = async (licenseKey) => {
+    const response = await fetch(`${PRO_HOST}/api/validate-license-key`, {
+        method: 'POST',
+        body: JSON.stringify({
+            licenseKey,
+        }),
+        headers: {
+            'Content-Type': 'application/json',
+        },
+    });
+    return response.json();
+};
+exports.fetchLicenseKeyDetails = fetchLicenseKeyDetails;
+const WebRenderModalLicenseKeyDetails = ({ details }) => {
+    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("div", { style: bulletStyle, children: [(0, jsx_runtime_1.jsx)(check_circle_filled_1.CheckCircleFilled, { style: { ...icon, fill: colors_1.LIGHT_TEXT } }), (0, jsx_runtime_1.jsxs)("div", { style: textStyle, children: ["Belongs to\u00A0", (0, jsx_runtime_1.jsx)("a", { href: `${PRO_HOST}/projects/${details.projectSlug}`, target: "_blank", style: linkStyle, children: details.projectName }), "\u00A0-\u00A0", (0, jsx_runtime_1.jsx)("a", { href: `${PRO_HOST}/projects/${details.projectSlug}/usage#client-renders-usage`, target: "_blank", style: linkStyle, children: "View usage" })] })] }), details.hasActiveSubscription ? ((0, jsx_runtime_1.jsxs)("div", { style: bulletStyle, children: [(0, jsx_runtime_1.jsx)(check_circle_filled_1.CheckCircleFilled, { style: { ...icon, fill: colors_1.LIGHT_TEXT } }), (0, jsx_runtime_1.jsx)("div", { style: textStyle, children: "Active Company License" })] })) : ((0, jsx_runtime_1.jsxs)("div", { style: bulletStyle, children: [(0, jsx_runtime_1.jsx)(ValidationMessage_1.WarningTriangle, { type: "warning", style: { ...icon, fill: colors_1.WARNING_COLOR } }), (0, jsx_runtime_1.jsx)("div", { style: textStyle, children: "No active Company License" })] }))] }));
+};
+exports.WebRenderModalLicenseKeyDetails = WebRenderModalLicenseKeyDetails;