@remotion/studio 4.0.122 → 4.0.124

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;

package/dist/components/RenderModal/out-name-checker.d.ts

@@ -1,14 +1,19 @@
 import type { AudioCodec, Codec, StillImageFormat } from '@remotion/renderer';
 import type { RenderType } from './RenderModalAdvanced';
-export declare const validateOutnameGui: ({ outName, codec, audioCodec, renderMode, stillImageFormat, }: {
+export declare const validateOutnameGui: ({ outName, codec, audioCodec, renderMode, stillImageFormat, separateAudioTo, }: {
     outName: string;
     codec: Codec;
     audioCodec: AudioCodec;
     renderMode: RenderType;
     stillImageFormat: StillImageFormat | null;
+    separateAudioTo: string | null;
 }) => {
     valid: true;
 } | {
     valid: false;
     error: Error;
 };
+export declare const isValidSeparateAudioName: ({ audioCodec, separateAudioTo, }: {
+    separateAudioTo: string;
+    audioCodec: AudioCodec;
+}) => void;

package/dist/components/RenderModal/out-name-checker.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.validateOutnameGui = void 0;
+exports.isValidSeparateAudioName = exports.validateOutnameGui = void 0;
 const client_1 = require("@remotion/renderer/client");
 const invalidCharacters = ['?', '*', '+', ':', '%'];
 const isValidStillExtension = (extension, stillImageFormat) => {
@@ -9,7 +9,7 @@ const isValidStillExtension = (extension, stillImageFormat) => {
     }
     return extension === stillImageFormat;
 };
-const validateOutnameGui = ({ outName, codec, audioCodec, renderMode, stillImageFormat, }) => {
+const validateOutnameGui = ({ outName, codec, audioCodec, renderMode, stillImageFormat, separateAudioTo, }) => {
     try {
         isValidOutName({
             audioCodec,
@@ -17,6 +17,7 @@ const validateOutnameGui = ({ outName, codec, audioCodec, renderMode, stillImage
             outName,
             renderMode,
             stillImageFormat,
+            separateAudioTo,
         });
         return { valid: true };
     }
@@ -25,7 +26,7 @@ const validateOutnameGui = ({ outName, codec, audioCodec, renderMode, stillImage
     }
 };
 exports.validateOutnameGui = validateOutnameGui;
-const isValidOutName = ({ outName, codec, audioCodec, renderMode, stillImageFormat, }) => {
+const isValidOutName = ({ outName, codec, audioCodec, renderMode, stillImageFormat, separateAudioTo, }) => {
     const extension = outName.substring(outName.lastIndexOf('.') + 1);
     const prefix = outName.substring(0, outName.lastIndexOf('.'));
     const map = client_1.BrowserSafeApis.defaultFileExtensionMap[codec];
@@ -48,9 +49,10 @@ const isValidOutName = ({ outName, codec, audioCodec, renderMode, stillImageForm
     if (renderMode === 'video' || renderMode === 'audio') {
         client_1.BrowserSafeApis.validateOutputFilename({
             codec,
-            audioCodec: audioCodec !== null && audioCodec !== void 0 ? audioCodec : null,
+            audioCodecSetting: audioCodec !== null && audioCodec !== void 0 ? audioCodec : null,
             extension,
             preferLossless: false,
+            separateAudioTo,
         });
     }
     if (prefix.length < 1 && renderMode !== 'sequence') {
@@ -73,3 +75,33 @@ const isValidOutName = ({ outName, codec, audioCodec, renderMode, stillImageForm
         }
     }
 };
+const isValidSeparateAudioName = ({ audioCodec, separateAudioTo, }) => {
+    const prefix = separateAudioTo.substring(0, separateAudioTo.lastIndexOf('.'));
+    const expectedExtension = client_1.BrowserSafeApis.getExtensionFromAudioCodec(audioCodec);
+    const actualExtension = separateAudioTo.split('.').pop();
+    if (actualExtension !== expectedExtension) {
+        throw new Error(`Expected extension: .${expectedExtension}`);
+    }
+    const hasDotAfterSlash = () => {
+        const substrings = prefix.split('/');
+        for (const str of substrings) {
+            if (str[0] === '.') {
+                return true;
+            }
+        }
+        return false;
+    };
+    const hasInvalidChar = () => {
+        return prefix.split('').some((char) => invalidCharacters.includes(char));
+    };
+    if (prefix.length < 1) {
+        throw new Error('The prefix must be at least 1 character long');
+    }
+    if (prefix[0] === '.' || hasDotAfterSlash()) {
+        throw new Error('The output name must not start with a dot');
+    }
+    if (hasInvalidChar()) {
+        throw new Error("Filename can't contain the following characters:  ?, *, +, %, :");
+    }
+};
+exports.isValidSeparateAudioName = isValidSeparateAudioName;

package/dist/components/RenderQueue/actions.d.ts

@@ -36,7 +36,7 @@ export declare const addSequenceRenderJob: ({ compositionId, outName, imageForma
     beepOnFinish: boolean;
     repro: boolean;
 }) => Promise<undefined>;
-export declare const addVideoRenderJob: ({ compositionId, outName, imageFormat, jpegQuality, scale, logLevel, codec, concurrency, crf, startFrame, endFrame, muted, enforceAudioTrack, proResProfile, x264Preset, pixelFormat, audioBitrate, videoBitrate, everyNthFrame, numberOfGifLoops, delayRenderTimeout, audioCodec, disallowParallelEncoding, chromiumOptions, envVariables, inputProps, offthreadVideoCacheSizeInBytes, colorSpace, multiProcessOnLinux, encodingMaxRate, encodingBufferSize, beepOnFinish, repro, }: {
+export declare const addVideoRenderJob: ({ compositionId, outName, imageFormat, jpegQuality, scale, logLevel, codec, concurrency, crf, startFrame, endFrame, muted, enforceAudioTrack, proResProfile, x264Preset, pixelFormat, audioBitrate, videoBitrate, everyNthFrame, numberOfGifLoops, delayRenderTimeout, audioCodec, disallowParallelEncoding, chromiumOptions, envVariables, inputProps, offthreadVideoCacheSizeInBytes, colorSpace, multiProcessOnLinux, encodingMaxRate, encodingBufferSize, beepOnFinish, repro, forSeamlessAacConcatenation, separateAudioTo, }: {
     compositionId: string;
     outName: string;
     imageFormat: VideoImageFormat;
@@ -70,6 +70,8 @@ export declare const addVideoRenderJob: ({ compositionId, outName, imageFormat,
     encodingBufferSize: string | null;
     beepOnFinish: boolean;
     repro: boolean;
+    forSeamlessAacConcatenation: boolean;
+    separateAudioTo: string | null;
 }) => Promise<undefined>;
 export declare const unsubscribeFromFileExistenceWatcher: ({ file, clientId, }: {
     file: string;

package/dist/components/RenderQueue/actions.js

@@ -78,7 +78,7 @@ const addSequenceRenderJob = ({ compositionId, outName, imageFormat, startFrame,
     });
 };
 exports.addSequenceRenderJob = addSequenceRenderJob;
-const addVideoRenderJob = ({ compositionId, outName, imageFormat, jpegQuality, scale, logLevel, codec, concurrency, crf, startFrame, endFrame, muted, enforceAudioTrack, proResProfile, x264Preset, pixelFormat, audioBitrate, videoBitrate, everyNthFrame, numberOfGifLoops, delayRenderTimeout, audioCodec, disallowParallelEncoding, chromiumOptions, envVariables, inputProps, offthreadVideoCacheSizeInBytes, colorSpace, multiProcessOnLinux, encodingMaxRate, encodingBufferSize, beepOnFinish, repro, }) => {
+const addVideoRenderJob = ({ compositionId, outName, imageFormat, jpegQuality, scale, logLevel, codec, concurrency, crf, startFrame, endFrame, muted, enforceAudioTrack, proResProfile, x264Preset, pixelFormat, audioBitrate, videoBitrate, everyNthFrame, numberOfGifLoops, delayRenderTimeout, audioCodec, disallowParallelEncoding, chromiumOptions, envVariables, inputProps, offthreadVideoCacheSizeInBytes, colorSpace, multiProcessOnLinux, encodingMaxRate, encodingBufferSize, beepOnFinish, repro, forSeamlessAacConcatenation, separateAudioTo, }) => {
     return callApi('/api/render', {
         compositionId,
         type: 'video',
@@ -118,6 +118,8 @@ const addVideoRenderJob = ({ compositionId, outName, imageFormat, jpegQuality, s
         encodingMaxRate,
         beepOnFinish,
         repro,
+        forSeamlessAacConcatenation,
+        separateAudioTo,
     });
 };
 exports.addVideoRenderJob = addVideoRenderJob;

package/dist/components/SidebarRenderButton.js

@@ -67,6 +67,7 @@ const SidebarRenderButton = ({ composition, visible }) => {
             initialUserAgent: defaults.userAgent,
             initialBeep: defaults.beepOnFinish,
             initialRepro: defaults.repro,
+            initialForSeamlessAacConcatenation: defaults.forSeamlessAacConcatenation,
         });
     }, [composition.defaultProps, composition.id, props, setSelectedModal]);
     const renderAction = (0, react_1.useCallback)((color) => {

package/dist/components/TopPanel.js

@@ -69,6 +69,6 @@ const TopPanel = ({ readOnlyStudio, onMounted, size, drawRef, bufferStateDelayIn
     const onCollapseRight = (0, react_1.useCallback)(() => {
         setSidebarCollapsedState({ left: null, right: 'collapsed' });
     }, [setSidebarCollapsedState]);
-    return ((0, jsx_runtime_1.jsxs)("div", { style: container, children: [(0, jsx_runtime_1.jsx)("div", { style: row, children: (0, jsx_runtime_1.jsxs)(SplitterContainer_1.SplitterContainer, { minFlex: 0.15, maxFlex: 0.4, defaultFlex: 0.2, id: "sidebar-to-preview", orientation: "vertical", children: [actualStateLeft === 'expanded' ? ((0, jsx_runtime_1.jsx)(SplitterElement_1.SplitterElement, { sticky: null, type: "flexer", children: (0, jsx_runtime_1.jsx)(ExplorerPanel_1.ExplorerPanel, {}) })) : null, actualStateLeft === 'expanded' ? ((0, jsx_runtime_1.jsx)(SplitterHandle_1.SplitterHandle, { allowToCollapse: "left", onCollapse: onCollapseLeft })) : null, (0, jsx_runtime_1.jsx)(SplitterElement_1.SplitterElement, { sticky: null, type: "anti-flexer", children: (0, jsx_runtime_1.jsxs)(SplitterContainer_1.SplitterContainer, { minFlex: 0.5, maxFlex: 0.8, defaultFlex: 0.7, id: "canvas-to-right-sidebar", orientation: "vertical", children: [(0, jsx_runtime_1.jsx)(SplitterElement_1.SplitterElement, { sticky: null, type: "flexer", children: (0, jsx_runtime_1.jsx)("div", { ref: drawRef, style: canvasContainerStyle, children: size ? (0, jsx_runtime_1.jsx)(CanvasOrLoading_1.CanvasOrLoading, { size: size }) : null }) }), actualStateRight === 'expanded' ? ((0, jsx_runtime_1.jsx)(SplitterHandle_1.SplitterHandle, { allowToCollapse: "right", onCollapse: onCollapseRight })) : null, actualStateRight === 'expanded' ? ((0, jsx_runtime_1.jsx)(SplitterElement_1.SplitterElement, { sticky: null, type: "anti-flexer", children: (0, jsx_runtime_1.jsx)(OptionsPanel_1.OptionsPanel, { readOnlyStudio: readOnlyStudio }) })) : null] }) })] }) }), (0, jsx_runtime_1.jsx)(PreviewToolbar_1.PreviewToolbar, { bufferStateDelayInMilliseconds: bufferStateDelayInMilliseconds, readOnlyStudio: readOnlyStudio }), (0, jsx_runtime_1.jsx)(CurrentCompositionSideEffects_1.CurrentCompositionKeybindings, { readOnlyStudio: readOnlyStudio }), (0, jsx_runtime_1.jsx)(CurrentCompositionSideEffects_1.TitleUpdater, {})] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { style: container, children: [(0, jsx_runtime_1.jsx)("div", { style: row, children: (0, jsx_runtime_1.jsxs)(SplitterContainer_1.SplitterContainer, { minFlex: 0.15, maxFlex: 0.4, defaultFlex: 0.2, id: "sidebar-to-preview", orientation: "vertical", children: [actualStateLeft === 'expanded' ? ((0, jsx_runtime_1.jsx)(SplitterElement_1.SplitterElement, { sticky: null, type: "flexer", children: (0, jsx_runtime_1.jsx)(ExplorerPanel_1.ExplorerPanel, { readOnlyStudio: readOnlyStudio }) })) : null, actualStateLeft === 'expanded' ? ((0, jsx_runtime_1.jsx)(SplitterHandle_1.SplitterHandle, { allowToCollapse: "left", onCollapse: onCollapseLeft })) : null, (0, jsx_runtime_1.jsx)(SplitterElement_1.SplitterElement, { sticky: null, type: "anti-flexer", children: (0, jsx_runtime_1.jsxs)(SplitterContainer_1.SplitterContainer, { minFlex: 0.5, maxFlex: 0.8, defaultFlex: 0.7, id: "canvas-to-right-sidebar", orientation: "vertical", children: [(0, jsx_runtime_1.jsx)(SplitterElement_1.SplitterElement, { sticky: null, type: "flexer", children: (0, jsx_runtime_1.jsx)("div", { ref: drawRef, style: canvasContainerStyle, children: size ? (0, jsx_runtime_1.jsx)(CanvasOrLoading_1.CanvasOrLoading, { size: size }) : null }) }), actualStateRight === 'expanded' ? ((0, jsx_runtime_1.jsx)(SplitterHandle_1.SplitterHandle, { allowToCollapse: "right", onCollapse: onCollapseRight })) : null, actualStateRight === 'expanded' ? ((0, jsx_runtime_1.jsx)(SplitterElement_1.SplitterElement, { sticky: null, type: "anti-flexer", children: (0, jsx_runtime_1.jsx)(OptionsPanel_1.OptionsPanel, { readOnlyStudio: readOnlyStudio }) })) : null] }) })] }) }), (0, jsx_runtime_1.jsx)(PreviewToolbar_1.PreviewToolbar, { bufferStateDelayInMilliseconds: bufferStateDelayInMilliseconds, readOnlyStudio: readOnlyStudio }), (0, jsx_runtime_1.jsx)(CurrentCompositionSideEffects_1.CurrentCompositionKeybindings, { readOnlyStudio: readOnlyStudio }), (0, jsx_runtime_1.jsx)(CurrentCompositionSideEffects_1.TitleUpdater, {})] }));
 };
 exports.TopPanel = TopPanel;

package/dist/components/utils.d.ts

@@ -0,0 +1 @@
+export declare const handleUploadFile: (file: File, assetPath: string) => Promise<void>;

package/dist/components/utils.js

@@ -0,0 +1,53 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.handleUploadFile = void 0;
+const NotificationCenter_1 = require("./Notifications/NotificationCenter");
+const handleUploadFile = async (file, assetPath) => {
+    var _a, _b, _c, _d;
+    if (!file) {
+        (_a = NotificationCenter_1.notificationCenter.current) === null || _a === void 0 ? void 0 : _a.addNotification({
+            content: `Please select a file first!`,
+            created: Date.now(),
+            duration: 3000,
+            id: String(Math.random()),
+        });
+        return;
+    }
+    try {
+        const url = new URL('/api/add-asset', window.location.origin);
+        url.search = new URLSearchParams({
+            folder: assetPath,
+            file: file.name,
+        }).toString();
+        const response = await fetch(url, {
+            method: 'POST',
+            body: file,
+        });
+        if (response.ok) {
+            (_b = NotificationCenter_1.notificationCenter.current) === null || _b === void 0 ? void 0 : _b.addNotification({
+                content: `Added ${file.name} to ${assetPath}`,
+                created: Date.now(),
+                duration: 3000,
+                id: String(Math.random()),
+            });
+        }
+        else {
+            const jsonResponse = await response.json();
+            (_c = NotificationCenter_1.notificationCenter.current) === null || _c === void 0 ? void 0 : _c.addNotification({
+                content: `Upload failed: ${jsonResponse.error}`,
+                created: Date.now(),
+                duration: 3000,
+                id: String(Math.random()),
+            });
+        }
+    }
+    catch (error) {
+        (_d = NotificationCenter_1.notificationCenter.current) === null || _d === void 0 ? void 0 : _d.addNotification({
+            content: `Error during upload: ${error}`,
+            created: Date.now(),
+            duration: 3000,
+            id: String(Math.random()),
+        });
+    }
+};
+exports.handleUploadFile = handleUploadFile;

package/dist/helpers/colors.d.ts

@@ -23,4 +23,4 @@ export declare const TIMELINE_TRACK_SEPARATOR = "rgba(0, 0, 0, 0.3)";
 export declare const getBackgroundFromHoverState: ({ selected, hovered, }: {
     selected: boolean;
     hovered: boolean;
-}) => "transparent" | "hsla(0, 0%, 100%, 0.15)" | "rgba(255, 255, 255, 0.06)" | "hsla(0, 0%, 100%, 0.25)";
+}) => "hsla(0, 0%, 100%, 0.15)" | "hsla(0, 0%, 100%, 0.25)" | "rgba(255, 255, 255, 0.06)" | "transparent";

package/dist/helpers/convert-env-variables.d.ts

@@ -1,2 +1,8 @@
-export declare const envVariablesObjectToArray: (envVariables: Record<string, string>) => [string, string][];
-export declare const envVariablesArrayToObject: (envVariables: [string, string][]) => Record<string, string>;
+export declare const envVariablesObjectToArray: (envVariables: Record<string, string>) => [
+    string,
+    string
+][];
+export declare const envVariablesArrayToObject: (envVariables: [
+    string,
+    string
+][]) => Record<string, string>;

package/dist/helpers/render-modal-sections.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { Codec } from '@remotion/renderer';
 import type { RenderType } from '../components/RenderModal/RenderModalAdvanced';
 type Section = 'general' | 'picture' | 'advanced' | 'data' | 'gif' | 'audio';

package/dist/helpers/retry-payload.js

@@ -49,6 +49,7 @@ const makeRetryPayload = (job) => {
             initialUserAgent: job.chromiumOptions.userAgent,
             initialBeep: job.beepOnFinish,
             initialRepro: job.repro,
+            initialForSeamlessAacConcatenation: defaults.forSeamlessAacConcatenation,
         };
     }
     if (job.type === 'sequence') {
@@ -92,6 +93,7 @@ const makeRetryPayload = (job) => {
             initialUserAgent: job.chromiumOptions.userAgent,
             initialBeep: job.beepOnFinish,
             initialRepro: job.repro,
+            initialForSeamlessAacConcatenation: defaults.forSeamlessAacConcatenation,
         };
     }
     if (job.type === 'video') {
@@ -135,6 +137,7 @@ const makeRetryPayload = (job) => {
             initialUserAgent: job.chromiumOptions.userAgent,
             initialBeep: job.beepOnFinish,
             initialRepro: job.repro,
+            initialForSeamlessAacConcatenation: job.forSeamlessAacConcatenation,
         };
     }
     throw new Error(`Job ${JSON.stringify(job)} Not implemented`);

package/dist/helpers/use-asset-drag-events.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+declare function useAssetDragEvents({ name, parentFolder, dropLocation, setDropLocation, }: {
+    name: string | null;
+    parentFolder: string | null;
+    dropLocation: string | null;
+    setDropLocation: React.Dispatch<React.SetStateAction<string | null>>;
+}): {
+    isDropDiv: boolean;
+    onDragEnter: () => void;
+    onDragLeave: () => void;
+};
+export default useAssetDragEvents;

package/dist/helpers/use-asset-drag-events.js

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = require("react");
+const no_react_1 = require("remotion/no-react");
+function useAssetDragEvents({ name, parentFolder, dropLocation, setDropLocation, }) {
+    const dragDepthRef = (0, react_1.useRef)(0);
+    const combinedParents = (0, react_1.useMemo)(() => {
+        return [parentFolder, name].filter(no_react_1.NoReactInternals.truthy).join('/');
+    }, [name, parentFolder]);
+    const isDropDiv = (0, react_1.useMemo)(() => {
+        return dropLocation === combinedParents;
+    }, [combinedParents, dropLocation]);
+    const onDragEnter = (0, react_1.useCallback)(() => {
+        if (dragDepthRef.current === 0) {
+            setDropLocation((currentDropLocation) => (currentDropLocation === null || currentDropLocation === void 0 ? void 0 : currentDropLocation.includes(combinedParents))
+                ? currentDropLocation
+                : combinedParents);
+        }
+        dragDepthRef.current++;
+    }, [combinedParents, dragDepthRef, setDropLocation]);
+    const onDragLeave = (0, react_1.useCallback)(() => {
+        dragDepthRef.current--;
+        if (dragDepthRef.current === 0) {
+            setDropLocation((currentPath) => currentPath === combinedParents ? parentFolder : currentPath);
+        }
+    }, [combinedParents, dragDepthRef, parentFolder, setDropLocation]);
+    (0, react_1.useEffect)(() => {
+        if (dropLocation === null) {
+            dragDepthRef.current = 0;
+        }
+    }, [dropLocation]);
+    return {
+        isDropDiv,
+        onDragEnter,
+        onDragLeave,
+    };
+}
+exports.default = useAssetDragEvents;

package/dist/state/modals.d.ts

@@ -34,6 +34,7 @@ export type RenderModalState = {
     initialUserAgent: string | null;
     initialEncodingMaxRate: string | null;
     initialEncodingBufferSize: string | null;
+    initialForSeamlessAacConcatenation: boolean;
     initialBeep: boolean;
     initialRepro: boolean;
     minConcurrency: number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remotion/studio",
-  "version": "4.0.122",
+  "version": "4.0.124",
   "description": "Remotion Editor",
   "main": "dist",
   "sideEffects": false,
@@ -18,11 +18,11 @@
     "memfs": "3.4.3",
     "source-map": "0.7.3",
     "open": "^8.4.2",
-    "@remotion/player": "4.0.122",
-    "@remotion/media-utils": "4.0.122",
-    "remotion": "4.0.122",
-    "@remotion/renderer": "4.0.122",
-    "@remotion/studio-shared": "4.0.122"
+    "remotion": "4.0.124",
+    "@remotion/player": "4.0.124",
+    "@remotion/renderer": "4.0.124",
+    "@remotion/media-utils": "4.0.124",
+    "@remotion/studio-shared": "4.0.124"
   },
   "devDependencies": {
     "react": "18.2.0",
@@ -40,7 +40,7 @@
     "prettier-plugin-organize-imports": "3.2.4",
     "vitest": "0.31.1",
     "zod": "^3.22.3",
-    "@remotion/zod-types": "4.0.122"
+    "@remotion/zod-types": "4.0.124"
   },
   "publishConfig": {
     "access": "public"