@remotion/studio 4.0.121 → 4.0.123

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
 
-> @remotion/studio@4.0.120 build /Users/jonathanburger/remotion/packages/studio
+> @remotion/studio@4.0.122 build /Users/jonathanburger/remotion/packages/studio
 > tsc -d
 

package/dist/components/AssetSelector.d.ts

@@ -1,2 +1,4 @@
 import React from 'react';
-export declare const AssetSelector: React.FC;
+export declare const AssetSelector: React.FC<{
+    readOnlyStudio: boolean;
+}>;

package/dist/components/AssetSelector.js

@@ -22,6 +22,9 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AssetSelector = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
@@ -31,10 +34,12 @@ const client_id_1 = require("../helpers/client-id");
 const colors_1 = require("../helpers/colors");
 const create_folder_tree_1 = require("../helpers/create-folder-tree");
 const persist_open_folders_1 = require("../helpers/persist-open-folders");
+const use_asset_drag_events_1 = __importDefault(require("../helpers/use-asset-drag-events"));
 const folders_1 = require("../state/folders");
 const z_index_1 = require("../state/z-index");
 const AssetSelectorItem_1 = require("./AssetSelectorItem");
 const styles_1 = require("./Menu/styles");
+const utils_1 = require("./utils");
 const container = {
     display: 'flex',
     flexDirection: 'column',
@@ -60,10 +65,14 @@ const list = {
     height: '100%',
     overflowY: 'auto',
 };
-const AssetSelector = () => {
+const AssetSelector = ({ readOnlyStudio }) => {
     const { tabIndex } = (0, z_index_1.useZIndex)();
     const { assetFoldersExpanded, setAssetFoldersExpanded } = (0, react_1.useContext)(folders_1.FolderContext);
+    const [dropLocation, setDropLocation] = (0, react_1.useState)(null);
     const { subscribeToEvent } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
+    const connectionStatus = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx)
+        .previewServerState.type;
+    const shouldAllowUpload = connectionStatus === 'connected' && !readOnlyStudio;
     const [{ publicFolderExists, staticFiles }, setState] = react_1.default.useState(() => {
         return {
             staticFiles: (0, remotion_1.getStaticFiles)(),
@@ -98,6 +107,24 @@ const AssetSelector = () => {
             return foldersExpandedState;
         });
     }, [setAssetFoldersExpanded]);
-    return ((0, jsx_runtime_1.jsx)("div", { style: container, children: staticFiles.length === 0 ? (publicFolderExists ? ((0, jsx_runtime_1.jsx)("div", { style: emptyState, children: (0, jsx_runtime_1.jsxs)("div", { style: label, children: ["To add assets, place a file in the", ' ', (0, jsx_runtime_1.jsx)("code", { style: styles_1.inlineCodeSnippet, children: "public" }), " folder of your project."] }) })) : ((0, jsx_runtime_1.jsx)("div", { style: emptyState, children: (0, jsx_runtime_1.jsxs)("div", { style: label, children: ["To add assets, create a folder called", ' ', (0, jsx_runtime_1.jsx)("code", { style: styles_1.inlineCodeSnippet, children: "public" }), " in the root of your project and place a file in it."] }) }))) : ((0, jsx_runtime_1.jsx)("div", { className: "__remotion-vertical-scrollbar", style: list, children: (0, jsx_runtime_1.jsx)(AssetSelectorItem_1.AssetFolderTree, { item: assetTree, level: 0, parentFolder: null, name: null, tabIndex: tabIndex, toggleFolder: toggleFolder }) })) }));
+    const { isDropDiv, onDragEnter, onDragLeave } = (0, use_asset_drag_events_1.default)({
+        name: null,
+        parentFolder: null,
+        dropLocation,
+        setDropLocation,
+    });
+    const onDragOver = (0, react_1.useCallback)((e) => {
+        e.preventDefault();
+    }, []);
+    const onDrop = (0, react_1.useCallback)((e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        (0, utils_1.handleUploadFile)(e.dataTransfer.files[0], dropLocation || '/');
+        setDropLocation(null);
+    }, [dropLocation]);
+    return ((0, jsx_runtime_1.jsx)("div", { style: container, onDragOver: shouldAllowUpload ? onDragOver : undefined, onDrop: shouldAllowUpload ? onDrop : undefined, children: staticFiles.length === 0 ? (publicFolderExists ? ((0, jsx_runtime_1.jsx)("div", { style: emptyState, children: (0, jsx_runtime_1.jsxs)("div", { style: label, children: ["To add assets, place a file in the", ' ', (0, jsx_runtime_1.jsx)("code", { style: styles_1.inlineCodeSnippet, children: "public" }), " folder of your project or drag and drop a file here."] }) })) : ((0, jsx_runtime_1.jsx)("div", { style: emptyState, children: (0, jsx_runtime_1.jsxs)("div", { style: label, children: ["To add assets, create a folder called", ' ', (0, jsx_runtime_1.jsx)("code", { style: styles_1.inlineCodeSnippet, children: "public" }), " in the root of your project and place a file in it."] }) }))) : ((0, jsx_runtime_1.jsx)("div", { className: "__remotion-vertical-scrollbar", style: {
+                ...list,
+                backgroundColor: isDropDiv ? colors_1.CLEAR_HOVER : colors_1.BACKGROUND,
+            }, onDragEnter: onDragEnter, onDragLeave: onDragLeave, children: (0, jsx_runtime_1.jsx)(AssetSelectorItem_1.AssetFolderTree, { item: assetTree, level: 0, parentFolder: null, name: null, tabIndex: tabIndex, toggleFolder: toggleFolder, dropLocation: dropLocation, setDropLocation: setDropLocation }) })) }));
 };
 exports.AssetSelector = AssetSelector;

package/dist/components/AssetSelectorItem.d.ts

@@ -7,4 +7,6 @@ export declare const AssetFolderTree: React.FC<{
     level: number;
     tabIndex: number;
     toggleFolder: (folderName: string, parentName: string | null) => void;
+    dropLocation: string | null;
+    setDropLocation: React.Dispatch<React.SetStateAction<string | null>>;
 }>;

package/dist/components/AssetSelectorItem.js

@@ -22,6 +22,9 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AssetFolderTree = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
@@ -31,6 +34,7 @@ const no_react_1 = require("remotion/no-react");
 const colors_1 = require("../helpers/colors");
 const copy_text_1 = require("../helpers/copy-text");
 const url_state_1 = require("../helpers/url-state");
+const use_asset_drag_events_1 = __importDefault(require("../helpers/use-asset-drag-events"));
 const clipboard_1 = require("../icons/clipboard");
 const file_1 = require("../icons/file");
 const folder_1 = require("../icons/folder");
@@ -75,8 +79,15 @@ const revealIconStyle = {
     height: 12,
     color: 'currentColor',
 };
-const AssetFolderItem = ({ tabIndex, item, level, parentFolder, toggleFolder }) => {
+const AssetFolderItem = ({ tabIndex, item, level, parentFolder, toggleFolder, dropLocation, setDropLocation, }) => {
     const [hovered, setHovered] = (0, react_1.useState)(false);
+    const openFolderTimerRef = (0, react_1.useRef)(null);
+    const { isDropDiv, onDragEnter, onDragLeave } = (0, use_asset_drag_events_1.default)({
+        name: item.name,
+        parentFolder,
+        dropLocation,
+        setDropLocation,
+    });
     const onPointerEnter = (0, react_1.useCallback)(() => {
         setHovered(true);
     }, []);
@@ -100,14 +111,26 @@ const AssetFolderItem = ({ tabIndex, item, level, parentFolder, toggleFolder })
         toggleFolder(item.name, parentFolder);
     }, [item.name, parentFolder, toggleFolder]);
     const Icon = item.expanded ? folder_1.ExpandedFolderIcon : folder_1.CollapsedFolderIcon;
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { style: folderStyle, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, tabIndex: tabIndex, title: item.name, onClick: onClick, children: (0, jsx_runtime_1.jsxs)(layout_1.Row, { children: [(0, jsx_runtime_1.jsx)(Icon, { style: iconStyle, color: hovered ? 'white' : colors_1.LIGHT_TEXT }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), (0, jsx_runtime_1.jsx)("div", { style: label, children: item.name })] }) }), item.expanded ? ((0, jsx_runtime_1.jsx)(exports.AssetFolderTree, { item: item.items, name: item.name, level: level, parentFolder: parentFolder, tabIndex: tabIndex, toggleFolder: toggleFolder }, item.name)) : null] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { onDragEnter: onDragEnter, onDragLeave: onDragLeave, style: {
+            backgroundColor: isDropDiv ? colors_1.CLEAR_HOVER : colors_1.BACKGROUND,
+        }, children: [(0, jsx_runtime_1.jsx)("div", { style: folderStyle, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, tabIndex: tabIndex, title: item.name, onClick: onClick, onDragEnter: () => {
+                    if (!item.expanded) {
+                        openFolderTimerRef.current = window.setTimeout(() => {
+                            toggleFolder(item.name, parentFolder);
+                        }, 1000);
+                    }
+                }, onDragLeave: () => {
+                    if (openFolderTimerRef.current) {
+                        clearTimeout(openFolderTimerRef.current);
+                    }
+                }, children: (0, jsx_runtime_1.jsxs)(layout_1.Row, { children: [(0, jsx_runtime_1.jsx)(Icon, { style: iconStyle, color: hovered ? 'white' : colors_1.LIGHT_TEXT }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), (0, jsx_runtime_1.jsx)("div", { style: label, children: item.name })] }) }), item.expanded ? ((0, jsx_runtime_1.jsx)(exports.AssetFolderTree, { item: item.items, name: item.name, level: level, parentFolder: parentFolder, tabIndex: tabIndex, toggleFolder: toggleFolder, dropLocation: dropLocation, setDropLocation: setDropLocation }, item.name)) : null] }));
 };
-const AssetFolderTree = ({ item, level, name, parentFolder, toggleFolder, tabIndex }) => {
+const AssetFolderTree = ({ item, level, name, parentFolder, toggleFolder, tabIndex, dropLocation, setDropLocation, }) => {
     const combinedParents = (0, react_1.useMemo)(() => {
         return [parentFolder, name].filter(no_react_1.NoReactInternals.truthy).join('/');
     }, [name, parentFolder]);
     return ((0, jsx_runtime_1.jsxs)("div", { children: [item.folders.map((folder) => {
-                return ((0, jsx_runtime_1.jsx)(AssetFolderItem, { item: folder, tabIndex: tabIndex, level: level + 1, parentFolder: combinedParents, toggleFolder: toggleFolder }, folder.name));
+                return ((0, jsx_runtime_1.jsx)(AssetFolderItem, { item: folder, tabIndex: tabIndex, level: level + 1, parentFolder: combinedParents, toggleFolder: toggleFolder, dropLocation: dropLocation, setDropLocation: setDropLocation }, folder.name));
             }), item.files.map((file) => {
                 return ((0, jsx_runtime_1.jsx)(AssetSelectorItem, { item: file, tabIndex: tabIndex, level: level, parentFolder: combinedParents }, file.src));
             })] }));

package/dist/components/ExplorerPanel.d.ts

@@ -3,4 +3,6 @@ export declare const explorerSidebarTabs: import("react").RefObject<{
     selectAssetsPanel: () => void;
     selectCompositionPanel: () => void;
 }>;
-export declare const ExplorerPanel: React.FC<{}>;
+export declare const ExplorerPanel: React.FC<{
+    readOnlyStudio: boolean;
+}>;

package/dist/components/ExplorerPanel.js

@@ -30,7 +30,7 @@ const persistSelectedOptionsSidebarPanel = (panel) => {
     localStorage.setItem(localStorageKey, panel);
 };
 exports.explorerSidebarTabs = (0, react_1.createRef)();
-const ExplorerPanel = () => {
+const ExplorerPanel = ({ readOnlyStudio }) => {
     const [panel, setPanel] = (0, react_1.useState)(() => getSelectedPanel());
     const onCompositionsSelected = (0, react_1.useCallback)(() => {
         setPanel('compositions');
@@ -52,6 +52,6 @@ const ExplorerPanel = () => {
             },
         };
     }, []);
-    return ((0, jsx_runtime_1.jsxs)("div", { style: container, className: "css-reset", children: [(0, jsx_runtime_1.jsx)("div", { style: tabsContainer, children: (0, jsx_runtime_1.jsxs)(Tabs_1.Tabs, { children: [(0, jsx_runtime_1.jsx)(Tabs_1.Tab, { selected: panel === 'compositions', onClick: onCompositionsSelected, children: "Compositions" }), (0, jsx_runtime_1.jsx)(Tabs_1.Tab, { selected: panel === 'assets', onClick: onAssetsSelected, children: "Assets" })] }) }), panel === 'compositions' ? (0, jsx_runtime_1.jsx)(CompositionSelector_1.CompositionSelector, {}) : (0, jsx_runtime_1.jsx)(AssetSelector_1.AssetSelector, {})] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { style: container, className: "css-reset", children: [(0, jsx_runtime_1.jsx)("div", { style: tabsContainer, children: (0, jsx_runtime_1.jsxs)(Tabs_1.Tabs, { children: [(0, jsx_runtime_1.jsx)(Tabs_1.Tab, { selected: panel === 'compositions', onClick: onCompositionsSelected, children: "Compositions" }), (0, jsx_runtime_1.jsx)(Tabs_1.Tab, { selected: panel === 'assets', onClick: onAssetsSelected, children: "Assets" })] }) }), panel === 'compositions' ? ((0, jsx_runtime_1.jsx)(CompositionSelector_1.CompositionSelector, {})) : ((0, jsx_runtime_1.jsx)(AssetSelector_1.AssetSelector, { readOnlyStudio: readOnlyStudio }))] }));
 };
 exports.ExplorerPanel = ExplorerPanel;

package/dist/components/Modals.js

@@ -17,7 +17,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 === '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.RenderModalWithLoader, { initialFrame: modalContextType.initialFrame, compositionId: modalContextType.compositionId, initialVideoImageFormat: modalContextType.initialVideoImageFormat, initialJpegQuality: modalContextType.initialJpegQuality, initialScale: modalContextType.initialScale, initialLogLevel: modalContextType.initialLogLevel, initialOffthreadVideoCacheSizeInBytes: modalContextType.initialOffthreadVideoCacheSizeInBytes, 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, defaultProps: modalContextType.defaultProps, inFrameMark: modalContextType.inFrameMark, outFrameMark: modalContextType.outFrameMark, defaultConfigurationAudioCodec: modalContextType.defaultConfigurationAudioCodec, defaultConfigurationVideoCodec: modalContextType.defaultConfigurationVideoCodec })), modalContextType &&
+    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.RenderModalWithLoader, { initialFrame: modalContextType.initialFrame, compositionId: modalContextType.compositionId, initialVideoImageFormat: modalContextType.initialVideoImageFormat, initialJpegQuality: modalContextType.initialJpegQuality, initialScale: modalContextType.initialScale, initialLogLevel: modalContextType.initialLogLevel, initialOffthreadVideoCacheSizeInBytes: modalContextType.initialOffthreadVideoCacheSizeInBytes, 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 })), modalContextType &&
                 canRender &&
                 modalContextType.type === 'render-progress' && ((0, jsx_runtime_1.jsx)(RenderStatusModal_1.RenderStatusModal, { jobId: modalContextType.jobId })), modalContextType && modalContextType.type === 'update' && ((0, jsx_runtime_1.jsx)(UpdateModal_1.UpdateModal, { info: modalContextType.info, knownBugs: modalContextType.knownBugs })), modalContextType && modalContextType.type === 'quick-switcher' && ((0, jsx_runtime_1.jsx)(QuickSwitcher_1.default, { readOnlyStudio: readOnlyStudio, invocationTimestamp: modalContextType.invocationTimestamp, initialMode: modalContextType.mode }))] }));
 };

package/dist/components/RenderButton.js

@@ -89,6 +89,7 @@ const RenderButton = () => {
             initialUserAgent: defaults.userAgent,
             initialBeep: defaults.beepOnFinish,
             initialRepro: defaults.repro,
+            initialForSeamlessAacConcatenation: defaults.forSeamlessAacConcatenation,
         });
     }, [video, setSelectedModal, frame, props, inFrame, outFrame]);
     if (!video) {

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

@@ -39,6 +39,7 @@ type RenderModalProps = {
     initialMultiProcessOnLinux: boolean;
     defaultConfigurationVideoCodec: Codec | null;
     defaultConfigurationAudioCodec: AudioCodec | null;
+    initialForSeamlessAacConcatenation: boolean;
 };
 export declare const RenderModalWithLoader: React.FC<RenderModalProps>;
 export {};

package/dist/components/RenderModal/RenderModal.js

@@ -34,6 +34,7 @@ const vertical_1 = require("../Tabs/vertical");
 const CrfSetting_1 = require("./CrfSetting");
 const DataEditor_1 = require("./DataEditor");
 const get_default_codecs_1 = require("./get-default-codecs");
+const get_string_before_suffix_1 = require("./get-string-before-suffix");
 const out_name_checker_1 = require("./out-name-checker");
 const RenderModalAdvanced_1 = require("./RenderModalAdvanced");
 const RenderModalAudio_1 = require("./RenderModalAudio");
@@ -117,7 +118,7 @@ const outer = {
     display: 'flex',
     flexDirection: 'column',
 };
-const RenderModal = ({ initialFrame, initialVideoImageFormat, initialStillImageFormat, initialJpegQuality, initialScale, initialLogLevel, initialConcurrency, maxConcurrency, minConcurrency, initialMuted, initialEnforceAudioTrack, initialProResProfile, initialx264Preset, initialPixelFormat, initialVideoBitrate, initialAudioBitrate, initialEveryNthFrame, initialNumberOfGifLoops, initialDelayRenderTimeout, initialOffthreadVideoCacheSizeInBytes, initialEnvVariables, initialDisableWebSecurity, initialGl, initialHeadless, initialIgnoreCertificateErrors, initialEncodingBufferSize, initialEncodingMaxRate, initialUserAgent, defaultProps, inFrameMark, outFrameMark, onClose, resolvedComposition, unresolvedComposition, initialColorSpace, initialMultiProcessOnLinux, defaultConfigurationAudioCodec, defaultConfigurationVideoCodec, initialBeep, initialRepro, }) => {
+const RenderModal = ({ initialFrame, initialVideoImageFormat, initialStillImageFormat, initialJpegQuality, initialScale, initialLogLevel, initialConcurrency, maxConcurrency, minConcurrency, initialMuted, initialEnforceAudioTrack, initialProResProfile, initialx264Preset, initialPixelFormat, initialVideoBitrate, initialAudioBitrate, initialEveryNthFrame, initialNumberOfGifLoops, initialDelayRenderTimeout, initialOffthreadVideoCacheSizeInBytes, initialEnvVariables, initialDisableWebSecurity, initialGl, initialHeadless, initialIgnoreCertificateErrors, initialEncodingBufferSize, initialEncodingMaxRate, initialUserAgent, defaultProps, inFrameMark, outFrameMark, onClose, resolvedComposition, unresolvedComposition, initialColorSpace, initialMultiProcessOnLinux, defaultConfigurationAudioCodec, defaultConfigurationVideoCodec, initialBeep, initialRepro, initialForSeamlessAacConcatenation, }) => {
     const isMounted = (0, react_1.useRef)(true);
     const [isVideo] = (0, react_1.useState)(() => {
         return typeof resolvedComposition.durationInFrames === 'undefined'
@@ -141,6 +142,7 @@ const RenderModal = ({ initialFrame, initialVideoImageFormat, initialStillImageF
     const [concurrency, setConcurrency] = (0, react_1.useState)(() => initialConcurrency);
     const [videoCodecForVideoTab, setVideoCodecForVideoTab] = (0, react_1.useState)(() => initialVideoCodecForVideoTab);
     const [userSelectedAudioCodec, setUserSelectedAudioCodec] = (0, react_1.useState)(() => initialAudioCodec);
+    const [separateAudioTo, setSeparateAudioTo] = (0, react_1.useState)(null);
     const [envVariables, setEnvVariables] = (0, react_1.useState)(() => (0, convert_env_variables_1.envVariablesObjectToArray)(initialEnvVariables).filter(([key]) => key !== 'NODE_ENV'));
     const [initialOutName] = (0, react_1.useState)(() => {
         return (0, studio_shared_1.getDefaultOutLocation)({
@@ -155,6 +157,7 @@ const RenderModal = ({ initialFrame, initialVideoImageFormat, initialStillImageF
     const [mutedState, setMuted] = (0, react_1.useState)(() => initialMuted);
     const [repro, setRepro] = (0, react_1.useState)(() => initialRepro);
     const [enforceAudioTrackState, setEnforceAudioTrackState] = (0, react_1.useState)(() => initialEnforceAudioTrack);
+    const [forSeamlessAacConcatenation, setForSeamlessAacConcatenation] = (0, react_1.useState)(() => initialForSeamlessAacConcatenation);
     const [renderMode, setRenderModeState] = (0, react_1.useState)(initialRenderType);
     const [jpegQuality, setJpegQuality] = (0, react_1.useState)(() => initialJpegQuality);
     const [scale, setScale] = (0, react_1.useState)(() => initialScale);
@@ -301,14 +304,6 @@ const RenderModal = ({ initialFrame, initialVideoImageFormat, initialStillImageF
         const parsed = Math.floor(unclampedFrame);
         return Math.max(0, Math.min(resolvedComposition.durationInFrames - 1, parsed));
     }, [resolvedComposition.durationInFrames, unclampedFrame]);
-    const getStringBeforeSuffix = (0, react_1.useCallback)((fileName) => {
-        const dotPos = fileName.lastIndexOf('.');
-        if (dotPos === -1) {
-            return fileName;
-        }
-        const bitBeforeDot = fileName.substring(0, dotPos);
-        return bitBeforeDot;
-    }, []);
     const deriveFinalAudioCodec = (0, react_1.useCallback)((passedVideoCodec, passedAudioCodec) => {
         if (passedAudioCodec !== null &&
             client_1.BrowserSafeApis.supportedAudioCodecs[passedVideoCodec].includes(passedAudioCodec)) {
@@ -320,24 +315,24 @@ const RenderModal = ({ initialFrame, initialVideoImageFormat, initialStillImageF
     const setDefaultOutName = (0, react_1.useCallback)((options) => {
         if (options.type === 'still') {
             setOutName((prev) => {
-                const newFileName = getStringBeforeSuffix(prev) + '.' + options.imageFormat;
+                const newFileName = (0, get_string_before_suffix_1.getStringBeforeSuffix)(prev) + '.' + options.imageFormat;
                 return newFileName;
             });
         }
         else if (options.type === 'sequence') {
             setOutName((prev) => {
-                const folderName = getStringBeforeSuffix(prev);
+                const folderName = (0, get_string_before_suffix_1.getStringBeforeSuffix)(prev);
                 return folderName;
             });
         }
         else {
             setOutName((prev) => {
                 const codecSuffix = client_1.BrowserSafeApis.getFileExtensionFromCodec(options.codec, deriveFinalAudioCodec(options.codec, options.audioCodec));
-                const newFileName = getStringBeforeSuffix(prev) + '.' + codecSuffix;
+                const newFileName = (0, get_string_before_suffix_1.getStringBeforeSuffix)(prev) + '.' + codecSuffix;
                 return newFileName;
             });
         }
-    }, [deriveFinalAudioCodec, getStringBeforeSuffix]);
+    }, [deriveFinalAudioCodec]);
     const setAudioCodec = (0, react_1.useCallback)((newAudioCodec) => {
         setUserSelectedAudioCodec(newAudioCodec);
         setDefaultOutName({
@@ -345,6 +340,14 @@ const RenderModal = ({ initialFrame, initialVideoImageFormat, initialStillImageF
             codec: videoCodecForVideoTab,
             audioCodec: newAudioCodec,
         });
+        setSeparateAudioTo((prev) => {
+            if (prev === null) {
+                return null;
+            }
+            const newExtension = client_1.BrowserSafeApis.getExtensionFromAudioCodec(newAudioCodec);
+            const newFileName = (0, get_string_before_suffix_1.getStringBeforeSuffix)(prev) + '.' + newExtension;
+            return newFileName;
+        });
     }, [setDefaultOutName, videoCodecForVideoTab]);
     const setCodec = (0, react_1.useCallback)((newCodec) => {
         if (renderMode === 'audio') {
@@ -474,6 +477,8 @@ const RenderModal = ({ initialFrame, initialVideoImageFormat, initialStillImageF
             encodingMaxRate,
             beepOnFinish,
             repro,
+            forSeamlessAacConcatenation,
+            separateAudioTo,
         })
             .then(() => {
             dispatchIfMounted({ type: 'succeed' });
@@ -520,6 +525,8 @@ const RenderModal = ({ initialFrame, initialVideoImageFormat, initialStillImageF
         encodingMaxRate,
         beepOnFinish,
         repro,
+        forSeamlessAacConcatenation,
+        separateAudioTo,
         onClose,
     ]);
     const onClickSequence = (0, react_1.useCallback)(() => {
@@ -733,6 +740,7 @@ const RenderModal = ({ initialFrame, initialVideoImageFormat, initialStillImageF
         audioCodec,
         renderMode,
         stillImageFormat,
+        separateAudioTo,
     });
     const { tab, setTab, shownTabs } = (0, render_modal_sections_1.useRenderModalSections)(renderMode, codec);
     const { registerKeybinding } = (0, use_keybinding_1.useKeybinding)();
@@ -786,7 +794,7 @@ const RenderModal = ({ initialFrame, initialVideoImageFormat, initialStillImageF
     return ((0, jsx_runtime_1.jsxs)("div", { style: outer, children: [(0, jsx_runtime_1.jsx)(ModalHeader_1.NewCompHeader, { title: `Render ${resolvedComposition.id}` }), (0, jsx_runtime_1.jsxs)("div", { style: container, children: [(0, jsx_runtime_1.jsx)(SegmentedControl_1.SegmentedControl, { items: renderTabOptions, needsWrapping: false }), (0, jsx_runtime_1.jsx)("div", { style: flexer }), (0, jsx_runtime_1.jsxs)(Button_1.Button, { autoFocus: true, onClick: trigger, disabled: renderDisabled, style: {
                             ...buttonStyle,
                             backgroundColor: outnameValidation.valid ? colors_1.BLUE : colors_1.BLUE_DISABLED,
-                        }, children: [state.type === 'idle' ? `Render ${renderMode}` : 'Rendering...', (0, jsx_runtime_1.jsx)(ShortcutHint_1.ShortcutHint, { keyToPress: "\u21B5", cmdOrCtrl: true })] })] }), (0, jsx_runtime_1.jsxs)("div", { style: horizontalLayout, children: [(0, jsx_runtime_1.jsxs)("div", { style: leftSidebar, children: [shownTabs.includes('general') ? ((0, jsx_runtime_1.jsxs)(vertical_1.VerticalTab, { style: horizontalTab, selected: tab === 'general', onClick: () => setTab('general'), children: [(0, jsx_runtime_1.jsx)("div", { style: iconContainer, children: (0, jsx_runtime_1.jsx)(file_1.FileIcon, { style: icon }) }), "General"] })) : null, shownTabs.includes('data') ? ((0, jsx_runtime_1.jsxs)(vertical_1.VerticalTab, { style: horizontalTab, selected: tab === 'data', onClick: () => setTab('data'), children: [(0, jsx_runtime_1.jsx)("div", { style: iconContainer, children: (0, jsx_runtime_1.jsx)(data_1.DataIcon, { style: icon }) }), "Input Props"] })) : null, shownTabs.includes('picture') ? ((0, jsx_runtime_1.jsxs)(vertical_1.VerticalTab, { style: horizontalTab, selected: tab === 'picture', onClick: () => setTab('picture'), children: [(0, jsx_runtime_1.jsx)("div", { style: iconContainer, children: (0, jsx_runtime_1.jsx)(frame_1.PicIcon, { style: icon }) }), "Picture"] })) : null, shownTabs.includes('audio') ? ((0, jsx_runtime_1.jsxs)(vertical_1.VerticalTab, { style: horizontalTab, selected: tab === 'audio', onClick: () => setTab('audio'), children: [(0, jsx_runtime_1.jsx)("div", { style: iconContainer, children: (0, jsx_runtime_1.jsx)(audio_1.AudioIcon, { style: icon }) }), "Audio"] })) : null, shownTabs.includes('gif') ? ((0, jsx_runtime_1.jsxs)(vertical_1.VerticalTab, { style: horizontalTab, selected: tab === 'gif', onClick: () => setTab('gif'), children: [(0, jsx_runtime_1.jsx)("div", { style: iconContainer, children: (0, jsx_runtime_1.jsx)(gif_1.GifIcon, { style: icon }) }), "GIF"] })) : null, shownTabs.includes('advanced') ? ((0, jsx_runtime_1.jsxs)(vertical_1.VerticalTab, { style: horizontalTab, selected: tab === 'advanced', onClick: () => setTab('advanced'), children: [(0, jsx_runtime_1.jsx)("div", { style: iconContainer, children: (0, jsx_runtime_1.jsx)(gear_1.GearIcon, { style: icon }) }), "Other"] })) : null] }), (0, jsx_runtime_1.jsx)("div", { style: optionsPanel, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: tab === 'general' ? ((0, jsx_runtime_1.jsx)(RenderModalBasic_1.RenderModalBasic, { codec: codec, resolvedComposition: resolvedComposition, frame: frame, imageFormatOptions: imageFormatOptions, outName: outName, proResProfile: proResProfile, renderMode: renderMode, setVideoCodec: setCodec, setFrame: setFrame, setOutName: setOutName, setProResProfile: setProResProfile, endFrame: endFrame, setEndFrame: setEndFrame, setStartFrame: setStartFrame, startFrame: startFrame, validationMessage: outnameValidation.valid ? null : outnameValidation.error.message })) : tab === 'picture' ? ((0, jsx_runtime_1.jsx)(RenderModalPicture_1.RenderModalPicture, { renderMode: renderMode, scale: scale, setScale: setScale, pixelFormat: pixelFormat, pixelFormatOptions: pixelFormatOptions, imageFormatOptions: imageFormatOptions, crf: crf, setCrf: setCrf, customTargetVideoBitrate: customTargetVideoBitrate, maxCrf: maxCrf, minCrf: minCrf, jpegQuality: jpegQuality, qualityControlType: qualityControlType, setJpegQuality: setJpegQuality, setColorSpace: setColorSpace, colorSpace: colorSpace, setCustomTargetVideoBitrateValue: setCustomTargetVideoBitrateValue, setQualityControl: setQualityControl, videoImageFormat: videoImageFormat, stillImageFormat: stillImageFormat, shouldDisplayQualityControlPicker: supportsBothQualityControls, encodingBufferSize: encodingBufferSize, setEncodingBufferSize: setEncodingBufferSize, encodingMaxRate: encodingMaxRate, setEncodingMaxRate: setEncodingMaxRate })) : tab === 'audio' ? ((0, jsx_runtime_1.jsx)(RenderModalAudio_1.RenderModalAudio, { muted: muted, renderMode: renderMode, setMuted: setMuted, codec: codec, audioCodec: audioCodec, setAudioCodec: setAudioCodec, enforceAudioTrack: enforceAudioTrack, setEnforceAudioTrackState: setEnforceAudioTrackState, customTargetAudioBitrate: customTargetAudioBitrate, setCustomTargetAudioBitrateValue: setCustomTargetAudioBitrateValue, setShouldHaveCustomTargetAudioBitrate: setShouldHaveCustomTargetAudioBitrate, shouldHaveCustomTargetAudioBitrate: shouldHaveCustomTargetAudioBitrate })) : tab === 'gif' ? ((0, jsx_runtime_1.jsx)(RenderModalGif_1.RenderModalGif, { everyNthFrame: everyNthFrame, limitNumberOfGifLoops: limitNumberOfGifLoops, numberOfGifLoopsSetting: numberOfGifLoopsSetting, setEveryNthFrameSetting: setEveryNthFrameSetting, setLimitNumberOfGifLoops: setLimitNumberOfGifLoops, setNumberOfGifLoopsSetting: setNumberOfGifLoopsSetting })) : tab === 'data' ? ((0, jsx_runtime_1.jsx)(DataEditor_1.DataEditor, { inputProps: inputProps, setInputProps: setInputProps, unresolvedComposition: unresolvedComposition, mayShowSaveButton: false, propsEditType: "input-props", saving: saving, setSaving: setSaving, readOnlyStudio: false })) : ((0, jsx_runtime_1.jsx)(RenderModalAdvanced_1.RenderModalAdvanced, { x264Preset: x264Preset, setx264Preset: setx264Preset, concurrency: concurrency, maxConcurrency: maxConcurrency, minConcurrency: minConcurrency, renderMode: renderMode, setConcurrency: setConcurrency, setVerboseLogging: setLogLevel, logLevel: logLevel, delayRenderTimeout: delayRenderTimeout, setDelayRenderTimeout: setDelayRenderTimeout, disallowParallelEncoding: disallowParallelEncoding, setDisallowParallelEncoding: setDisallowParallelEncoding, setDisableWebSecurity: setDisableWebSecurity, setIgnoreCertificateErrors: setIgnoreCertificateErrors, setHeadless: setHeadless, headless: headless, ignoreCertificateErrors: ignoreCertificateErrors, disableWebSecurity: disableWebSecurity, openGlOption: openGlOption, setOpenGlOption: setOpenGlOption, setEnvVariables: setEnvVariables, envVariables: envVariables, offthreadVideoCacheSizeInBytes: offthreadVideoCacheSizeInBytes, setOffthreadVideoCacheSizeInBytes: setOffthreadVideoCacheSizeInBytes, enableMultiProcessOnLinux: multiProcessOnLinux, setChromiumMultiProcessOnLinux: setChromiumMultiProcessOnLinux, codec: codec, userAgent: userAgent, setUserAgent: setUserAgent, setBeep: setBeepOnFinish, beep: beepOnFinish, repro: repro, setRepro: setRepro })) })] })] }));
+                        }, children: [state.type === 'idle' ? `Render ${renderMode}` : 'Rendering...', (0, jsx_runtime_1.jsx)(ShortcutHint_1.ShortcutHint, { keyToPress: "\u21B5", cmdOrCtrl: true })] })] }), (0, jsx_runtime_1.jsxs)("div", { style: horizontalLayout, children: [(0, jsx_runtime_1.jsxs)("div", { style: leftSidebar, children: [shownTabs.includes('general') ? ((0, jsx_runtime_1.jsxs)(vertical_1.VerticalTab, { style: horizontalTab, selected: tab === 'general', onClick: () => setTab('general'), children: [(0, jsx_runtime_1.jsx)("div", { style: iconContainer, children: (0, jsx_runtime_1.jsx)(file_1.FileIcon, { style: icon }) }), "General"] })) : null, shownTabs.includes('data') ? ((0, jsx_runtime_1.jsxs)(vertical_1.VerticalTab, { style: horizontalTab, selected: tab === 'data', onClick: () => setTab('data'), children: [(0, jsx_runtime_1.jsx)("div", { style: iconContainer, children: (0, jsx_runtime_1.jsx)(data_1.DataIcon, { style: icon }) }), "Input Props"] })) : null, shownTabs.includes('picture') ? ((0, jsx_runtime_1.jsxs)(vertical_1.VerticalTab, { style: horizontalTab, selected: tab === 'picture', onClick: () => setTab('picture'), children: [(0, jsx_runtime_1.jsx)("div", { style: iconContainer, children: (0, jsx_runtime_1.jsx)(frame_1.PicIcon, { style: icon }) }), "Picture"] })) : null, shownTabs.includes('audio') ? ((0, jsx_runtime_1.jsxs)(vertical_1.VerticalTab, { style: horizontalTab, selected: tab === 'audio', onClick: () => setTab('audio'), children: [(0, jsx_runtime_1.jsx)("div", { style: iconContainer, children: (0, jsx_runtime_1.jsx)(audio_1.AudioIcon, { style: icon }) }), "Audio"] })) : null, shownTabs.includes('gif') ? ((0, jsx_runtime_1.jsxs)(vertical_1.VerticalTab, { style: horizontalTab, selected: tab === 'gif', onClick: () => setTab('gif'), children: [(0, jsx_runtime_1.jsx)("div", { style: iconContainer, children: (0, jsx_runtime_1.jsx)(gif_1.GifIcon, { style: icon }) }), "GIF"] })) : null, shownTabs.includes('advanced') ? ((0, jsx_runtime_1.jsxs)(vertical_1.VerticalTab, { style: horizontalTab, selected: tab === 'advanced', onClick: () => setTab('advanced'), children: [(0, jsx_runtime_1.jsx)("div", { style: iconContainer, children: (0, jsx_runtime_1.jsx)(gear_1.GearIcon, { style: icon }) }), "Other"] })) : null] }), (0, jsx_runtime_1.jsx)("div", { style: optionsPanel, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: tab === 'general' ? ((0, jsx_runtime_1.jsx)(RenderModalBasic_1.RenderModalBasic, { codec: codec, resolvedComposition: resolvedComposition, frame: frame, imageFormatOptions: imageFormatOptions, outName: outName, proResProfile: proResProfile, renderMode: renderMode, setVideoCodec: setCodec, setFrame: setFrame, setOutName: setOutName, setProResProfile: setProResProfile, endFrame: endFrame, setEndFrame: setEndFrame, setStartFrame: setStartFrame, startFrame: startFrame, validationMessage: outnameValidation.valid ? null : outnameValidation.error.message })) : tab === 'picture' ? ((0, jsx_runtime_1.jsx)(RenderModalPicture_1.RenderModalPicture, { renderMode: renderMode, scale: scale, setScale: setScale, pixelFormat: pixelFormat, pixelFormatOptions: pixelFormatOptions, imageFormatOptions: imageFormatOptions, crf: crf, setCrf: setCrf, customTargetVideoBitrate: customTargetVideoBitrate, maxCrf: maxCrf, minCrf: minCrf, jpegQuality: jpegQuality, qualityControlType: qualityControlType, setJpegQuality: setJpegQuality, setColorSpace: setColorSpace, colorSpace: colorSpace, setCustomTargetVideoBitrateValue: setCustomTargetVideoBitrateValue, setQualityControl: setQualityControl, videoImageFormat: videoImageFormat, stillImageFormat: stillImageFormat, shouldDisplayQualityControlPicker: supportsBothQualityControls, encodingBufferSize: encodingBufferSize, setEncodingBufferSize: setEncodingBufferSize, encodingMaxRate: encodingMaxRate, setEncodingMaxRate: setEncodingMaxRate })) : tab === 'audio' ? ((0, jsx_runtime_1.jsx)(RenderModalAudio_1.RenderModalAudio, { muted: muted, renderMode: renderMode, setMuted: setMuted, codec: codec, audioCodec: audioCodec, setAudioCodec: setAudioCodec, enforceAudioTrack: enforceAudioTrack, setEnforceAudioTrackState: setEnforceAudioTrackState, customTargetAudioBitrate: customTargetAudioBitrate, setCustomTargetAudioBitrateValue: setCustomTargetAudioBitrateValue, setShouldHaveCustomTargetAudioBitrate: setShouldHaveCustomTargetAudioBitrate, shouldHaveCustomTargetAudioBitrate: shouldHaveCustomTargetAudioBitrate, forSeamlessAacConcatenation: forSeamlessAacConcatenation, setForSeamlessAacConcatenation: setForSeamlessAacConcatenation, separateAudioTo: separateAudioTo, setSeparateAudioTo: setSeparateAudioTo, outName: outName })) : tab === 'gif' ? ((0, jsx_runtime_1.jsx)(RenderModalGif_1.RenderModalGif, { everyNthFrame: everyNthFrame, limitNumberOfGifLoops: limitNumberOfGifLoops, numberOfGifLoopsSetting: numberOfGifLoopsSetting, setEveryNthFrameSetting: setEveryNthFrameSetting, setLimitNumberOfGifLoops: setLimitNumberOfGifLoops, setNumberOfGifLoopsSetting: setNumberOfGifLoopsSetting })) : tab === 'data' ? ((0, jsx_runtime_1.jsx)(DataEditor_1.DataEditor, { inputProps: inputProps, setInputProps: setInputProps, unresolvedComposition: unresolvedComposition, mayShowSaveButton: false, propsEditType: "input-props", saving: saving, setSaving: setSaving, readOnlyStudio: false })) : ((0, jsx_runtime_1.jsx)(RenderModalAdvanced_1.RenderModalAdvanced, { x264Preset: x264Preset, setx264Preset: setx264Preset, concurrency: concurrency, maxConcurrency: maxConcurrency, minConcurrency: minConcurrency, renderMode: renderMode, setConcurrency: setConcurrency, setVerboseLogging: setLogLevel, logLevel: logLevel, delayRenderTimeout: delayRenderTimeout, setDelayRenderTimeout: setDelayRenderTimeout, disallowParallelEncoding: disallowParallelEncoding, setDisallowParallelEncoding: setDisallowParallelEncoding, setDisableWebSecurity: setDisableWebSecurity, setIgnoreCertificateErrors: setIgnoreCertificateErrors, setHeadless: setHeadless, headless: headless, ignoreCertificateErrors: ignoreCertificateErrors, disableWebSecurity: disableWebSecurity, openGlOption: openGlOption, setOpenGlOption: setOpenGlOption, setEnvVariables: setEnvVariables, envVariables: envVariables, offthreadVideoCacheSizeInBytes: offthreadVideoCacheSizeInBytes, setOffthreadVideoCacheSizeInBytes: setOffthreadVideoCacheSizeInBytes, enableMultiProcessOnLinux: multiProcessOnLinux, setChromiumMultiProcessOnLinux: setChromiumMultiProcessOnLinux, codec: codec, userAgent: userAgent, setUserAgent: setUserAgent, setBeep: setBeepOnFinish, beep: beepOnFinish, repro: repro, setRepro: setRepro })) })] })] }));
 };
 const RenderModalWithLoader = (props) => {
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);

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

@@ -7,6 +7,8 @@ export declare const RenderModalAudio: React.FC<{
     renderMode: RenderType;
     enforceAudioTrack: boolean;
     setEnforceAudioTrackState: React.Dispatch<React.SetStateAction<boolean>>;
+    forSeamlessAacConcatenation: boolean;
+    setForSeamlessAacConcatenation: React.Dispatch<React.SetStateAction<boolean>>;
     shouldHaveCustomTargetAudioBitrate: boolean;
     setShouldHaveCustomTargetAudioBitrate: React.Dispatch<React.SetStateAction<boolean>>;
     setCustomTargetAudioBitrateValue: React.Dispatch<React.SetStateAction<string>>;
@@ -14,4 +16,7 @@ export declare const RenderModalAudio: React.FC<{
     audioCodec: AudioCodec;
     setAudioCodec: (newAudioCodec: AudioCodec) => void;
     codec: Codec;
+    setSeparateAudioTo: React.Dispatch<React.SetStateAction<string | null>>;
+    separateAudioTo: string | null;
+    outName: string;
 }>;

package/dist/components/RenderModal/RenderModalAudio.js

@@ -6,24 +6,31 @@ const client_1 = require("@remotion/renderer/client");
 const react_1 = require("react");
 const Checkmark_1 = require("../../icons/Checkmark");
 const Checkbox_1 = require("../Checkbox");
+const layout_1 = require("../layout");
+const is_menu_item_1 = require("../Menu/is-menu-item");
 const ComboBox_1 = require("../NewComposition/ComboBox");
 const RemInput_1 = require("../NewComposition/RemInput");
 const EnforceAudioTrackSetting_1 = require("./EnforceAudioTrackSetting");
 const human_readable_audio_codecs_1 = require("./human-readable-audio-codecs");
-const layout_1 = require("./layout");
+const layout_2 = require("./layout");
 const MutedSetting_1 = require("./MutedSetting");
 const OptionExplainerBubble_1 = require("./OptionExplainerBubble");
 const RenderModalHr_1 = require("./RenderModalHr");
+const SeparateAudioOption_1 = require("./SeparateAudioOption");
 const container = {
     flex: 1,
+    overflowY: 'auto',
 };
-const RenderModalAudio = ({ muted, setMuted, renderMode, enforceAudioTrack, setEnforceAudioTrackState, setShouldHaveCustomTargetAudioBitrate, shouldHaveCustomTargetAudioBitrate, setCustomTargetAudioBitrateValue, customTargetAudioBitrate, audioCodec, codec, setAudioCodec, }) => {
+const RenderModalAudio = ({ muted, setMuted, renderMode, enforceAudioTrack, setEnforceAudioTrackState, setShouldHaveCustomTargetAudioBitrate, shouldHaveCustomTargetAudioBitrate, setCustomTargetAudioBitrateValue, customTargetAudioBitrate, audioCodec, codec, setAudioCodec, forSeamlessAacConcatenation, setForSeamlessAacConcatenation, separateAudioTo, setSeparateAudioTo, outName, }) => {
     const onShouldHaveTargetAudioBitrateChanged = (0, react_1.useCallback)((e) => {
         setShouldHaveCustomTargetAudioBitrate(e.target.checked);
     }, [setShouldHaveCustomTargetAudioBitrate]);
     const onTargetAudioBitrateChanged = (0, react_1.useCallback)((e) => {
         setCustomTargetAudioBitrateValue(e.target.value);
     }, [setCustomTargetAudioBitrateValue]);
+    const onSeamlessAacConcatenationChanges = (0, react_1.useCallback)((e) => {
+        setForSeamlessAacConcatenation(e.target.checked);
+    }, [setForSeamlessAacConcatenation]);
     const audioCodecOptions = (0, react_1.useCallback)((currentCodec) => {
         return client_1.BrowserSafeApis.supportedAudioCodecs[currentCodec].map((audioCodecOption) => {
             return {
@@ -40,6 +47,10 @@ const RenderModalAudio = ({ muted, setMuted, renderMode, enforceAudioTrack, setE
             };
         });
     }, [codec, setAudioCodec]);
-    return ((0, jsx_runtime_1.jsxs)("div", { style: container, children: [renderMode === 'video' && audioCodecOptions(codec).length >= 2 ? ((0, jsx_runtime_1.jsxs)("div", { style: layout_1.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_1.label, children: "Audio Codec" }), (0, jsx_runtime_1.jsx)("div", { style: layout_1.rightRow, children: (0, jsx_runtime_1.jsx)(ComboBox_1.Combobox, { values: audioCodecOptions(codec), selectedId: audioCodec, title: "AudioCodec" }) })] })) : null, renderMode === 'video' ? ((0, jsx_runtime_1.jsx)(MutedSetting_1.MutedSetting, { enforceAudioTrack: enforceAudioTrack, muted: muted, setMuted: setMuted })) : null, (renderMode === 'video' || renderMode === 'audio') && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(EnforceAudioTrackSetting_1.EnforceAudioTrackSetting, { muted: muted, enforceAudioTrack: enforceAudioTrack, setEnforceAudioTrack: setEnforceAudioTrackState }), (0, jsx_runtime_1.jsx)(RenderModalHr_1.RenderModalHr, {})] })), renderMode === 'still' ? null : ((0, jsx_runtime_1.jsxs)("div", { style: layout_1.optionRow, children: [(0, jsx_runtime_1.jsxs)("div", { style: layout_1.label, children: ["Custom audio bitrate", ' ', (0, jsx_runtime_1.jsx)(OptionExplainerBubble_1.OptionExplainerBubble, { id: "audioBitrateOption" })] }), (0, jsx_runtime_1.jsx)("div", { style: layout_1.rightRow, children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { checked: shouldHaveCustomTargetAudioBitrate, onChange: onShouldHaveTargetAudioBitrateChanged, name: "custom-audio-bitrate" }) })] })), shouldHaveCustomTargetAudioBitrate && renderMode !== 'still' ? ((0, jsx_runtime_1.jsxs)("div", { style: layout_1.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_1.label, children: "Target audio bitrate" }), (0, jsx_runtime_1.jsx)("div", { style: layout_1.rightRow, children: (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(RemInput_1.RemotionInput, { style: layout_1.input, value: customTargetAudioBitrate, onChange: onTargetAudioBitrateChanged, status: "ok", rightAlign: true }) }) })] })) : null] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { style: container, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: [renderMode === 'video' ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(MutedSetting_1.MutedSetting, { enforceAudioTrack: enforceAudioTrack, muted: muted, setMuted: setMuted }), (0, jsx_runtime_1.jsx)(RenderModalHr_1.RenderModalHr, {})] })) : null, renderMode === 'video' &&
+                audioCodecOptions(codec).length >= 2 &&
+                !muted ? ((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)(OptionExplainerBubble_1.OptionExplainerBubble, { id: "audioCodecOption" })] }), (0, jsx_runtime_1.jsx)("div", { style: layout_2.rightRow, children: (0, jsx_runtime_1.jsx)(ComboBox_1.Combobox, { values: audioCodecOptions(codec), selectedId: audioCodec, title: "AudioCodec" }) })] })) : null, (renderMode === 'video' || renderMode === 'audio') && !muted && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(EnforceAudioTrackSetting_1.EnforceAudioTrackSetting, { muted: muted, enforceAudioTrack: enforceAudioTrack, setEnforceAudioTrack: setEnforceAudioTrackState }), (0, jsx_runtime_1.jsx)(RenderModalHr_1.RenderModalHr, {})] })), renderMode === 'video' && !muted ? ((0, jsx_runtime_1.jsx)(SeparateAudioOption_1.SeparateAudioOption, { separateAudioTo: separateAudioTo, setSeparateAudioTo: setSeparateAudioTo, audioCodec: audioCodec, outName: outName })) : null, audioCodec === 'aac' && !muted ? ((0, jsx_runtime_1.jsxs)("div", { style: layout_2.optionRow, children: [(0, jsx_runtime_1.jsxs)("div", { style: layout_2.label, children: ["For seamless AAC concatenation", (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.5 }), (0, jsx_runtime_1.jsx)(OptionExplainerBubble_1.OptionExplainerBubble, { id: "forSeamlessAacConcatenationOption" })] }), (0, jsx_runtime_1.jsx)("div", { style: layout_2.rightRow, children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { disabled: false, checked: forSeamlessAacConcatenation, onChange: onSeamlessAacConcatenationChanges, name: "enforce-audio-track" }) })] })) : null, renderMode === 'still' || muted ? null : ((0, jsx_runtime_1.jsxs)("div", { style: layout_2.optionRow, children: [(0, jsx_runtime_1.jsxs)("div", { style: layout_2.label, children: ["Custom audio bitrate", ' ', (0, jsx_runtime_1.jsx)(OptionExplainerBubble_1.OptionExplainerBubble, { id: "audioBitrateOption" })] }), (0, jsx_runtime_1.jsx)("div", { style: layout_2.rightRow, children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { checked: shouldHaveCustomTargetAudioBitrate, onChange: onShouldHaveTargetAudioBitrateChanged, name: "custom-audio-bitrate" }) })] })), shouldHaveCustomTargetAudioBitrate &&
+                renderMode !== 'still' &&
+                !muted ? ((0, jsx_runtime_1.jsxs)("div", { style: layout_2.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_2.label, children: "Target audio bitrate" }), (0, jsx_runtime_1.jsx)("div", { style: layout_2.rightRow, children: (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(RemInput_1.RemotionInput, { style: layout_2.input, value: customTargetAudioBitrate, onChange: onTargetAudioBitrateChanged, status: "ok", rightAlign: true }) }) })] })) : null] }));
 };
 exports.RenderModalAudio = RenderModalAudio;

package/dist/components/RenderModal/RenderModalBasic.js

@@ -16,7 +16,7 @@ const FrameRangeSetting_1 = require("./FrameRangeSetting");
 const human_readable_codec_1 = require("./human-readable-codec");
 const layout_2 = require("./layout");
 const OptionExplainerBubble_1 = require("./OptionExplainerBubble");
-const RenderModalInput_1 = require("./RenderModalInput");
+const RenderModalOutputName_1 = require("./RenderModalOutputName");
 const container = {
     flex: 1,
 };
@@ -74,6 +74,6 @@ const RenderModalBasic = ({ renderMode, imageFormatOptions, outName, codec, setV
     const onValueChange = (0, react_1.useCallback)((e) => {
         setOutName(e.target.value);
     }, [setOutName]);
-    return ((0, jsx_runtime_1.jsxs)("div", { style: container, children: [renderMode === 'still' || renderMode === 'sequence' ? ((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 }) })] })) : ((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: videoCodecOptions, selectedId: codec, title: "Codec" }) })] })), renderMode === 'still' && 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, renderMode === 'video' && codec === 'prores' ? ((0, jsx_runtime_1.jsxs)("div", { style: layout_2.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_2.label, children: "ProRes profile" }), (0, jsx_runtime_1.jsx)("div", { style: layout_2.rightRow, children: (0, jsx_runtime_1.jsx)(ComboBox_1.Combobox, { title: 'proResProfile', selectedId: proResProfile, values: proResProfileOptions }) })] })) : null, renderMode === 'still' ? null : ((0, jsx_runtime_1.jsx)(FrameRangeSetting_1.FrameRangeSetting, { durationInFrames: resolvedComposition.durationInFrames, endFrame: endFrame, setEndFrame: setEndFrame, setStartFrame: setStartFrame, startFrame: startFrame })), (0, jsx_runtime_1.jsx)(RenderModalInput_1.RenderModalInput, { existence: existence, inputStyle: layout_2.input, outName: outName, onValueChange: onValueChange, validationMessage: validationMessage, renderType: renderMode })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { style: container, children: [renderMode === 'still' || renderMode === 'sequence' ? ((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 }) })] })) : ((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: videoCodecOptions, selectedId: codec, title: "Codec" }) })] })), renderMode === 'still' && 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, renderMode === 'video' && codec === 'prores' ? ((0, jsx_runtime_1.jsxs)("div", { style: layout_2.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_2.label, children: "ProRes profile" }), (0, jsx_runtime_1.jsx)("div", { style: layout_2.rightRow, children: (0, jsx_runtime_1.jsx)(ComboBox_1.Combobox, { title: 'proResProfile', selectedId: proResProfile, values: proResProfileOptions }) })] })) : null, renderMode === 'still' ? null : ((0, jsx_runtime_1.jsx)(FrameRangeSetting_1.FrameRangeSetting, { durationInFrames: resolvedComposition.durationInFrames, endFrame: endFrame, setEndFrame: setEndFrame, setStartFrame: setStartFrame, startFrame: startFrame })), (0, jsx_runtime_1.jsx)(RenderModalOutputName_1.RenderModalOutputName, { existence: existence, inputStyle: layout_2.input, outName: outName, onValueChange: onValueChange, validationMessage: validationMessage, label: renderMode === 'sequence' ? 'Folder name' : 'Output name' })] }));
 };
 exports.RenderModalBasic = RenderModalBasic;

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

@@ -0,0 +1,11 @@
+import React from 'react';
+type Props = {
+    existence: boolean;
+    inputStyle: React.CSSProperties;
+    outName: string;
+    onValueChange: React.ChangeEventHandler<HTMLInputElement>;
+    validationMessage: string | null;
+    label: string;
+};
+export declare const RenderModalOutputName: ({ existence, inputStyle, outName, onValueChange, validationMessage, label: labelText, }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/RenderModal/RenderModalOutputName.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RenderModalOutputName = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const layout_1 = require("../layout");
+const RemInput_1 = require("../NewComposition/RemInput");
+const ValidationMessage_1 = require("../NewComposition/ValidationMessage");
+const layout_2 = require("./layout");
+const RenderModalOutputName = ({ existence, inputStyle, outName, onValueChange, validationMessage, label: labelText, }) => {
+    return ((0, jsx_runtime_1.jsxs)("div", { style: layout_2.optionRow, children: [(0, jsx_runtime_1.jsx)(layout_1.Column, { children: (0, jsx_runtime_1.jsx)("div", { style: layout_2.label, children: labelText }) }), (0, jsx_runtime_1.jsx)("div", { style: layout_2.rightRow, children: (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(RemInput_1.RemotionInput, { status: validationMessage ? 'error' : existence ? 'warning' : 'ok', style: inputStyle, type: "text", value: outName, onChange: onValueChange, rightAlign: true }), validationMessage ? ((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, { align: "flex-end", message: validationMessage, type: 'error' })] })) : existence ? ((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, { align: "flex-end", message: "Will be overwritten", type: 'warning' })] })) : null] }) })] }));
+};
+exports.RenderModalOutputName = RenderModalOutputName;

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

@@ -0,0 +1,13 @@
+import type { AudioCodec } from '@remotion/renderer';
+import React from 'react';
+export declare const SeparateAudioOptionInput: React.FC<{
+    setSeparateAudioTo: React.Dispatch<React.SetStateAction<string | null>>;
+    separateAudioTo: string;
+    audioCodec: AudioCodec;
+}>;
+export declare const SeparateAudioOption: React.FC<{
+    setSeparateAudioTo: React.Dispatch<React.SetStateAction<string | null>>;
+    separateAudioTo: string | null;
+    audioCodec: AudioCodec;
+    outName: string;
+}>;

package/dist/components/RenderModal/SeparateAudioOption.js

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SeparateAudioOption = exports.SeparateAudioOptionInput = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const client_1 = require("@remotion/renderer/client");
+const react_1 = require("react");
+const use_file_existence_1 = require("../../helpers/use-file-existence");
+const Checkbox_1 = require("../Checkbox");
+const layout_1 = require("../layout");
+const get_string_before_suffix_1 = require("./get-string-before-suffix");
+const layout_2 = require("./layout");
+const OptionExplainerBubble_1 = require("./OptionExplainerBubble");
+const RenderModalOutputName_1 = require("./RenderModalOutputName");
+const SeparateAudioOptionInput = ({ separateAudioTo, setSeparateAudioTo, audioCodec }) => {
+    const existence = (0, use_file_existence_1.useFileExistence)(separateAudioTo);
+    const onValueChange = (0, react_1.useCallback)((e) => {
+        setSeparateAudioTo(e.target.value);
+    }, [setSeparateAudioTo]);
+    const validationMessage = (0, react_1.useMemo)(() => {
+        const expectedExtension = client_1.BrowserSafeApis.getExtensionFromAudioCodec(audioCodec);
+        const actualExtension = separateAudioTo.split('.').pop();
+        if (actualExtension !== expectedExtension) {
+            return `Expected extension: .${expectedExtension}`;
+        }
+        return null;
+    }, [audioCodec, separateAudioTo]);
+    return ((0, jsx_runtime_1.jsx)(RenderModalOutputName_1.RenderModalOutputName, { existence: existence, inputStyle: layout_2.input, onValueChange: onValueChange, outName: separateAudioTo, label: 'Separate audio to', validationMessage: validationMessage }));
+};
+exports.SeparateAudioOptionInput = SeparateAudioOptionInput;
+const SeparateAudioOption = ({ separateAudioTo, setSeparateAudioTo, audioCodec, outName }) => {
+    const onSeparateAudioChange = (0, react_1.useCallback)((e) => {
+        if (e.target.checked) {
+            const extension = client_1.BrowserSafeApis.getExtensionFromAudioCodec(audioCodec);
+            setSeparateAudioTo(`${(0, get_string_before_suffix_1.getStringBeforeSuffix)(outName)}.${extension}`);
+        }
+        else {
+            setSeparateAudioTo(null);
+        }
+    }, [audioCodec, outName, setSeparateAudioTo]);
+    return ((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.jsxs)("div", { style: layout_2.label, children: ["Separate audio", (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.5 }), (0, jsx_runtime_1.jsx)(OptionExplainerBubble_1.OptionExplainerBubble, { id: "separateAudioOption" })] }), (0, jsx_runtime_1.jsx)("div", { style: layout_2.rightRow, children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { disabled: false, checked: Boolean(separateAudioTo), onChange: onSeparateAudioChange, name: "separate-audio-to" }) })] }), separateAudioTo === null ? null : ((0, jsx_runtime_1.jsx)(exports.SeparateAudioOptionInput, { separateAudioTo: separateAudioTo, setSeparateAudioTo: setSeparateAudioTo, audioCodec: audioCodec }))] }));
+};
+exports.SeparateAudioOption = SeparateAudioOption;

package/dist/components/RenderModal/get-string-before-suffix.d.ts

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

package/dist/components/RenderModal/get-string-before-suffix.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getStringBeforeSuffix = void 0;
+const getStringBeforeSuffix = (fileName) => {
+    const dotPos = fileName.lastIndexOf('.');
+    if (dotPos === -1) {
+        return fileName;
+    }
+    return fileName.substring(0, dotPos);
+};
+exports.getStringBeforeSuffix = getStringBeforeSuffix;

package/dist/components/RenderModal/human-readable-codec.d.ts

@@ -1,2 +1,2 @@
 import type { Codec } from '@remotion/renderer';
-export declare const humanReadableCodec: (codec: Codec) => "AAC" | "MP3" | "GIF" | "H.264" | "H.264 Matroska" | "H.265" | "ProRes" | "WebM VP8" | "WebM VP9" | "Waveform" | undefined;
+export declare const humanReadableCodec: (codec: Codec) => "AAC" | "MP3" | "GIF" | "H.264" | "H.264 Matroska" | "H.264 Transport Stream" | "H.265" | "ProRes" | "WebM VP8" | "WebM VP9" | "Waveform";

package/dist/components/RenderModal/human-readable-codec.js

@@ -17,6 +17,9 @@ const humanReadableCodec = (codec) => {
     if (codec === 'h264-mkv') {
         return 'H.264 Matroska';
     }
+    if (codec === 'h264-ts') {
+        return 'H.264 Transport Stream';
+    }
     if (codec === 'h265') {
         return 'H.265';
     }
@@ -32,5 +35,6 @@ const humanReadableCodec = (codec) => {
     if (codec === 'wav') {
         return 'Waveform';
     }
+    throw new TypeError(`Got unexpected codec "${codec}"`);
 };
 exports.humanReadableCodec = humanReadableCodec;