@remotion/studio 4.0.465 → 4.0.466

package/dist/esm/renderEntry.mjs

@@ -207,7 +207,7 @@ var renderContent = (Root) => {
     renderToDOM(/* @__PURE__ */ jsx("div", {
       children: /* @__PURE__ */ jsx(DelayedSpinner, {})
     }));
-    import("./chunk-pqk2qd0d.js").then(({ StudioInternals }) => {
+    import("./chunk-sa3dm85y.js").then(({ StudioInternals }) => {
       window.remotion_isStudio = true;
       window.remotion_isReadOnlyStudio = true;
       window.remotion_inputProps = "{}";

package/dist/helpers/make-render-command.d.ts

@@ -10,7 +10,7 @@ export declare const normalizeServeUrlForRenderCommand: ({ locationHref, composi
 type StrictRequired<T> = {
     [K in keyof T]-?: Exclude<T[K], undefined>;
 };
-type RenderMediaCommandOptions = Omit<StrictRequired<Pick<RenderMediaOptions, 'codec' | 'crf' | 'concurrency' | 'disallowParallelEncoding' | 'muted' | 'enforceAudioTrack' | 'everyNthFrame' | 'numberOfGifLoops' | 'colorSpace' | 'scale' | 'logLevel' | 'repro' | 'metadata' | 'jpegQuality' | 'pixelFormat' | 'proResProfile' | 'x264Preset' | 'audioCodec' | 'forSeamlessAacConcatenation' | 'separateAudioTo' | 'hardwareAcceleration' | 'chromeMode' | 'offthreadVideoCacheSizeInBytes' | 'offthreadVideoThreads' | 'mediaCacheSizeInBytes' | 'audioBitrate' | 'videoBitrate' | 'encodingMaxRate' | 'encodingBufferSize' | 'sampleRate'>>, 'audioBitrate' | 'videoBitrate' | 'encodingMaxRate' | 'encodingBufferSize' | 'jpegQuality' | 'proResProfile'> & {
+type RenderMediaCommandOptions = Omit<StrictRequired<Pick<RenderMediaOptions, 'codec' | 'crf' | 'concurrency' | 'disallowParallelEncoding' | 'muted' | 'enforceAudioTrack' | 'everyNthFrame' | 'numberOfGifLoops' | 'colorSpace' | 'scale' | 'logLevel' | 'repro' | 'metadata' | 'jpegQuality' | 'pixelFormat' | 'proResProfile' | 'x264Preset' | 'gopSize' | 'audioCodec' | 'forSeamlessAacConcatenation' | 'separateAudioTo' | 'hardwareAcceleration' | 'chromeMode' | 'offthreadVideoCacheSizeInBytes' | 'offthreadVideoThreads' | 'mediaCacheSizeInBytes' | 'audioBitrate' | 'videoBitrate' | 'encodingMaxRate' | 'encodingBufferSize' | 'sampleRate'>>, 'audioBitrate' | 'videoBitrate' | 'encodingMaxRate' | 'encodingBufferSize' | 'jpegQuality' | 'proResProfile'> & {
     audioBitrate: string | null;
     videoBitrate: string | null;
     encodingMaxRate: string | null;
@@ -48,5 +48,5 @@ type ReadOnlyStudioRenderCommandInput = RenderMediaCommandOptions & RenderStillC
     envVariables: Record<string, string>;
     inputProps: Record<string, unknown>;
 };
-export declare const makeReadOnlyStudioRenderCommand: ({ remotionVersion, locationHref, compositionId, outName, renderMode, renderDefaults, durationInFrames, concurrency, frame, startFrame, endFrame, stillImageFormat, sequenceImageFormat, videoImageFormat, jpegQuality, codec, muted, enforceAudioTrack, proResProfile, x264Preset, pixelFormat, crf, videoBitrate, audioBitrate, audioCodec, everyNthFrame, numberOfGifLoops, disallowParallelEncoding, encodingBufferSize, encodingMaxRate, forSeamlessAacConcatenation, separateAudioTo, colorSpace, scale, logLevel, delayRenderTimeout, hardwareAcceleration, chromeMode, headless, disableWebSecurity, ignoreCertificateErrors, gl, userAgent, multiProcessOnLinux, darkMode, offthreadVideoCacheSizeInBytes, offthreadVideoThreads, mediaCacheSizeInBytes, beepOnFinish, repro, metadata, sampleRate, envVariables, inputProps, }: ReadOnlyStudioRenderCommandInput) => string;
+export declare const makeReadOnlyStudioRenderCommand: ({ remotionVersion, locationHref, compositionId, outName, renderMode, renderDefaults, durationInFrames, concurrency, frame, startFrame, endFrame, stillImageFormat, sequenceImageFormat, videoImageFormat, jpegQuality, codec, muted, enforceAudioTrack, proResProfile, x264Preset, gopSize, pixelFormat, crf, videoBitrate, audioBitrate, audioCodec, everyNthFrame, numberOfGifLoops, disallowParallelEncoding, encodingBufferSize, encodingMaxRate, forSeamlessAacConcatenation, separateAudioTo, colorSpace, scale, logLevel, delayRenderTimeout, hardwareAcceleration, chromeMode, headless, disableWebSecurity, ignoreCertificateErrors, gl, userAgent, multiProcessOnLinux, darkMode, offthreadVideoCacheSizeInBytes, offthreadVideoThreads, mediaCacheSizeInBytes, beepOnFinish, repro, metadata, sampleRate, envVariables, inputProps, }: ReadOnlyStudioRenderCommandInput) => string;
 export {};

package/dist/helpers/make-render-command.js

@@ -80,7 +80,7 @@ const renderMediaValueFlag = (option, value, defaultValue) => {
 const renderMediaBooleanFlag = (option, value, defaultValue) => {
     return booleanFlag(getRenderMediaFlag(option), value, defaultValue);
 };
-const makeReadOnlyStudioRenderCommand = ({ remotionVersion, locationHref, compositionId, outName, renderMode, renderDefaults, durationInFrames, concurrency, frame, startFrame, endFrame, stillImageFormat, sequenceImageFormat, videoImageFormat, jpegQuality, codec, muted, enforceAudioTrack, proResProfile, x264Preset, pixelFormat, crf, videoBitrate, audioBitrate, audioCodec, everyNthFrame, numberOfGifLoops, disallowParallelEncoding, encodingBufferSize, encodingMaxRate, forSeamlessAacConcatenation, separateAudioTo, colorSpace, scale, logLevel, delayRenderTimeout, hardwareAcceleration, chromeMode, headless, disableWebSecurity, ignoreCertificateErrors, gl, userAgent, multiProcessOnLinux, darkMode, offthreadVideoCacheSizeInBytes, offthreadVideoThreads, mediaCacheSizeInBytes, beepOnFinish, repro, metadata, sampleRate, envVariables, inputProps, }) => {
+const makeReadOnlyStudioRenderCommand = ({ remotionVersion, locationHref, compositionId, outName, renderMode, renderDefaults, durationInFrames, concurrency, frame, startFrame, endFrame, stillImageFormat, sequenceImageFormat, videoImageFormat, jpegQuality, codec, muted, enforceAudioTrack, proResProfile, x264Preset, gopSize, pixelFormat, crf, videoBitrate, audioBitrate, audioCodec, everyNthFrame, numberOfGifLoops, disallowParallelEncoding, encodingBufferSize, encodingMaxRate, forSeamlessAacConcatenation, separateAudioTo, colorSpace, scale, logLevel, delayRenderTimeout, hardwareAcceleration, chromeMode, headless, disableWebSecurity, ignoreCertificateErrors, gl, userAgent, multiProcessOnLinux, darkMode, offthreadVideoCacheSizeInBytes, offthreadVideoThreads, mediaCacheSizeInBytes, beepOnFinish, repro, metadata, sampleRate, envVariables, inputProps, }) => {
     var _a;
     const serveUrl = (0, exports.normalizeServeUrlForRenderCommand)({
         locationHref,
@@ -154,6 +154,7 @@ const makeReadOnlyStudioRenderCommand = ({ remotionVersion, locationHref, compos
                 renderMediaValueFlag('colorSpace', colorSpace, renderDefaults.colorSpace),
                 valueFlag(options.proResProfileOption.cliFlag, proResProfile, renderDefaults.proResProfile),
                 renderMediaValueFlag('x264Preset', x264Preset, renderDefaults.x264Preset),
+                renderMediaValueFlag('gopSize', gopSize, renderDefaults.gopSize),
                 valueFlag(options.crfOption.cliFlag, crf, null),
                 valueFlag(options.jpegQualityOption.cliFlag, jpegQuality, renderDefaults.jpegQuality),
                 renderMediaValueFlag('videoBitrate', videoBitrate, renderDefaults.videoBitrate),

package/dist/helpers/open-in-editor.d.ts

@@ -2,3 +2,11 @@ import type { SymbolicatedStackFrame } from '@remotion/studio-shared';
 import type { OriginalPosition } from '../error-overlay/react-overlay/utils/get-source-map';
 export declare const openInEditor: (stack: SymbolicatedStackFrame) => Promise<Response>;
 export declare const openOriginalPositionInEditor: (originalPosition: OriginalPosition) => Promise<void>;
+export declare const preloadCompositionComponentInfo: ({ compositionFile, compositionId, }: {
+    compositionFile: string;
+    compositionId: string;
+}) => void;
+export declare const openCompositionComponentInEditor: ({ compositionFile, compositionId, }: {
+    compositionFile: string;
+    compositionId: string;
+}) => Promise<void>;

package/dist/helpers/open-in-editor.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.openOriginalPositionInEditor = exports.openInEditor = void 0;
+exports.openCompositionComponentInEditor = exports.preloadCompositionComponentInfo = exports.openOriginalPositionInEditor = exports.openInEditor = void 0;
 const openInEditor = (stack) => {
     const { originalFileName, originalLineNumber, originalColumnNumber, originalFunctionName, originalScriptCode, } = stack;
     return fetch(`/api/open-in-editor`, {
@@ -30,3 +30,60 @@ const openOriginalPositionInEditor = async (originalPosition) => {
     });
 };
 exports.openOriginalPositionInEditor = openOriginalPositionInEditor;
+const componentResolutionCache = new Map();
+const getComponentResolutionCacheKey = ({ compositionFile, compositionId, }) => {
+    return `${compositionFile}::${compositionId}`;
+};
+const loadCompositionComponentInfo = async ({ compositionFile, compositionId, }) => {
+    const cacheKey = getComponentResolutionCacheKey({
+        compositionFile,
+        compositionId,
+    });
+    const existing = componentResolutionCache.get(cacheKey);
+    if (existing) {
+        return existing;
+    }
+    const promise = (async () => {
+        const response = await fetch(`/api/composition-component-info`, {
+            method: 'post',
+            headers: {
+                'content-type': 'application/json',
+            },
+            body: JSON.stringify({
+                compositionFile,
+                compositionId,
+            }),
+        });
+        const body = (await response.json());
+        if (!body.success) {
+            throw new Error(body.error);
+        }
+        return {
+            location: body.location,
+            canAddSequence: body.canAddSequence,
+        };
+    })();
+    componentResolutionCache.set(cacheKey, promise);
+    try {
+        return await promise;
+    }
+    catch (err) {
+        componentResolutionCache.delete(cacheKey);
+        throw err;
+    }
+};
+const preloadCompositionComponentInfo = ({ compositionFile, compositionId, }) => {
+    loadCompositionComponentInfo({
+        compositionFile,
+        compositionId,
+    }).catch(() => undefined);
+};
+exports.preloadCompositionComponentInfo = preloadCompositionComponentInfo;
+const openCompositionComponentInEditor = async ({ compositionFile, compositionId, }) => {
+    const info = await loadCompositionComponentInfo({
+        compositionFile,
+        compositionId,
+    });
+    await (0, exports.openOriginalPositionInEditor)(info.location);
+};
+exports.openCompositionComponentInEditor = openCompositionComponentInEditor;

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

@@ -1,5 +1,5 @@
 import type { RenderType } from '../components/RenderModal/RenderModalAdvanced';
-type Section = 'general' | 'picture' | 'advanced' | 'data' | 'gif' | 'audio';
+type Section = 'general' | 'data' | 'picture' | 'audio' | 'gif' | 'encoding' | 'environment' | 'advanced';
 export declare const useRenderModalSections: (renderMode: RenderType, codec: "aac" | "av1" | "gif" | "h264" | "h264-mkv" | "h264-ts" | "h265" | "mp3" | "prores" | "vp8" | "vp9" | "wav") => {
     tab: Section;
     setTab: import("react").Dispatch<import("react").SetStateAction<Section>>;

package/dist/helpers/render-modal-sections.js

@@ -6,19 +6,49 @@ const useRenderModalSections = (renderMode, codec) => {
     const [selectedTab, setTab] = (0, react_1.useState)('general');
     const shownTabs = (0, react_1.useMemo)(() => {
         if (renderMode === 'audio') {
-            return ['general', 'data', 'audio', 'advanced'];
+            return [
+                'general',
+                'data',
+                'audio',
+                'encoding',
+                'environment',
+                'advanced',
+            ];
         }
         if (renderMode === 'still') {
-            return ['general', 'data', 'picture', 'advanced'];
+            return ['general', 'data', 'picture', 'environment', 'advanced'];
         }
         if (renderMode === 'sequence') {
-            return ['general', 'data', 'picture', 'advanced'];
+            return [
+                'general',
+                'data',
+                'picture',
+                'encoding',
+                'environment',
+                'advanced',
+            ];
         }
         if (renderMode === 'video') {
             if (codec === 'gif') {
-                return ['general', 'data', 'picture', 'gif', 'advanced'];
+                return [
+                    'general',
+                    'data',
+                    'picture',
+                    'gif',
+                    'encoding',
+                    'environment',
+                    'advanced',
+                ];
             }
-            return ['general', 'data', 'picture', 'audio', 'advanced'];
+            return [
+                'general',
+                'data',
+                'picture',
+                'audio',
+                'encoding',
+                'environment',
+                'advanced',
+            ];
         }
         throw new TypeError('Unknown render mode');
     }, [codec, renderMode]);

package/dist/helpers/retry-payload.js

@@ -25,6 +25,7 @@ const makeRetryPayload = (job) => {
             initialEnforceAudioTrack: defaults.enforceAudioTrack,
             initialProResProfile: null,
             initialx264Preset: defaults.x264Preset,
+            initialGopSize: defaults.gopSize,
             initialPixelFormat: defaults.pixelFormat,
             initialAudioBitrate: defaults.audioBitrate,
             initialVideoBitrate: defaults.videoBitrate,
@@ -78,6 +79,7 @@ const makeRetryPayload = (job) => {
             initialEnforceAudioTrack: defaults.enforceAudioTrack,
             initialProResProfile: null,
             initialx264Preset: defaults.x264Preset,
+            initialGopSize: defaults.gopSize,
             initialPixelFormat: defaults.pixelFormat,
             initialAudioBitrate: defaults.audioBitrate,
             initialVideoBitrate: defaults.videoBitrate,
@@ -133,6 +135,7 @@ const makeRetryPayload = (job) => {
             initialEnforceAudioTrack: job.enforceAudioTrack,
             initialProResProfile: (_d = job.proResProfile) !== null && _d !== void 0 ? _d : null,
             initialx264Preset: (_e = job.x264Preset) !== null && _e !== void 0 ? _e : defaults.x264Preset,
+            initialGopSize: job.gopSize,
             initialPixelFormat: job.pixelFormat,
             initialAudioBitrate: job.audioBitrate,
             initialVideoBitrate: job.videoBitrate,

package/dist/helpers/timeline-layout.d.ts

@@ -15,6 +15,7 @@ export type TimelineFieldOnDragValueChange = (value: unknown) => void;
 export type TimelineEffectGroupInfo = {
     readonly effectIndex: number;
     readonly effectSchema: SequenceSchemaShape;
+    readonly documentationLink: string | null;
 };
 export type TimelineTreeNode = {
     readonly kind: 'group';

package/dist/helpers/timeline-layout.js

@@ -50,6 +50,7 @@ const buildTimelineTree = ({ sequence, nodePathInfo, getDragOverrides, codeValue
             label: 'Effects',
             effectInfo: null,
             children: sequence.effects.map((effect, i) => {
+                var _a;
                 const effectFields = (0, studio_shared_1.getEffectFieldsToShow)(effect, i);
                 return {
                     kind: 'group',
@@ -60,7 +61,11 @@ const buildTimelineTree = ({ sequence, nodePathInfo, getDragOverrides, codeValue
                         numberOfSequencesWithThisNodePath: 0,
                     },
                     label: effect.label,
-                    effectInfo: { effectIndex: i, effectSchema: effect.schema },
+                    effectInfo: {
+                        effectIndex: i,
+                        effectSchema: effect.schema,
+                        documentationLink: (_a = effect.documentationLink) !== null && _a !== void 0 ? _a : null,
+                    },
                     children: effectFields.map((f) => {
                         var _a;
                         return ({

package/dist/helpers/use-menu-structure.js

@@ -7,9 +7,11 @@ const remotion_1 = require("remotion");
 const no_react_1 = require("remotion/no-react");
 const restart_studio_1 = require("../api/restart-studio");
 const AskAiModal_1 = require("../components/AskAiModal");
+const composition_menu_items_1 = require("../components/composition-menu-items");
 const layout_1 = require("../components/layout");
 const NotificationCenter_1 = require("../components/Notifications/NotificationCenter");
 const SizeSelector_1 = require("../components/SizeSelector");
+const use_resolved_stack_1 = require("../components/Timeline/use-resolved-stack");
 const TimelineInOutToggle_1 = require("../components/TimelineInOutToggle");
 const ShortcutHint_1 = require("../error-overlay/remotion-overlay/ShortcutHint");
 const Checkmark_1 = require("../icons/Checkmark");
@@ -145,12 +147,14 @@ const getFileMenu = ({ readOnlyStudio, closeMenu, previewServerState, setSelecte
     };
 };
 const useMenuStructure = (closeMenu, readOnlyStudio) => {
+    var _a;
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
     const { checkerboard, setCheckerboard } = (0, react_1.useContext)(checkerboard_1.CheckerboardContext);
     const { editorZoomGestures, setEditorZoomGestures } = (0, react_1.useContext)(editor_zoom_gestures_1.EditorZoomGesturesContext);
     const { editorShowRulers, setEditorShowRulers } = (0, react_1.useContext)(editor_rulers_1.EditorShowRulersContext);
     const { editorShowGuides, setEditorShowGuides } = (0, react_1.useContext)(editor_guides_1.EditorShowGuidesContext);
     const { size, setSize } = (0, react_1.useContext)(remotion_1.Internals.PreviewSizeContext);
+    const { canvasContent, compositions } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     const { type } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx).previewServerState;
     const { setSidebarCollapsedState, sidebarCollapsedStateLeft, sidebarCollapsedStateRight, } = (0, react_1.useContext)(sidebar_1.SidebarContext);
     const sizes = (0, react_1.useMemo)(() => (0, SizeSelector_1.getUniqueSizes)(size), [size]);
@@ -158,6 +162,26 @@ const useMenuStructure = (closeMenu, readOnlyStudio) => {
     const { remotion_packageManager } = window;
     const sizePreselectIndex = sizes.findIndex((s) => String(size.size) === String(s.size));
     const mobileLayout = (0, mobile_layout_1.useMobileLayout)();
+    const currentComposition = (0, react_1.useMemo)(() => {
+        var _a;
+        if (canvasContent === null || canvasContent.type !== 'composition') {
+            return null;
+        }
+        return ((_a = compositions.find((c) => c.id === canvasContent.compositionId)) !== null && _a !== void 0 ? _a : null);
+    }, [canvasContent, compositions]);
+    const resolvedCompositionLocation = (0, use_resolved_stack_1.useResolvedStack)((_a = currentComposition === null || currentComposition === void 0 ? void 0 : currentComposition.stack) !== null && _a !== void 0 ? _a : null);
+    (0, react_1.useEffect)(() => {
+        if (type !== 'connected' ||
+            !window.remotion_editorName ||
+            !currentComposition ||
+            !(resolvedCompositionLocation === null || resolvedCompositionLocation === void 0 ? void 0 : resolvedCompositionLocation.source)) {
+            return;
+        }
+        (0, open_in_editor_1.preloadCompositionComponentInfo)({
+            compositionFile: resolvedCompositionLocation.source,
+            compositionId: currentComposition.id,
+        });
+    }, [currentComposition, resolvedCompositionLocation === null || resolvedCompositionLocation === void 0 ? void 0 : resolvedCompositionLocation.source, type]);
     const structure = (0, react_1.useMemo)(() => {
         let struct = [
             {
@@ -574,6 +598,20 @@ const useMenuStructure = (closeMenu, readOnlyStudio) => {
                         : null,
                 ].filter(remotion_1.Internals.truthy),
             },
+            {
+                id: 'composition',
+                label: 'Composition',
+                leaveLeftPadding: false,
+                items: (0, composition_menu_items_1.getCompositionMenuItems)({
+                    closeMenu,
+                    composition: currentComposition,
+                    connectionStatus: type,
+                    resolvedLocation: resolvedCompositionLocation,
+                    setSelectedModal,
+                    readOnlyStudio,
+                }),
+                quickSwitcherLabel: null,
+            },
             {
                 id: 'tools',
                 label: 'Tools',
@@ -834,6 +872,8 @@ const useMenuStructure = (closeMenu, readOnlyStudio) => {
         type,
         sizePreselectIndex,
         sizes,
+        currentComposition,
+        resolvedCompositionLocation,
         editorZoomGestures,
         editorShowRulers,
         editorShowGuides,
@@ -866,6 +906,9 @@ const getItemLabel = (item) => {
     return (_a = item.label) === null || _a === void 0 ? void 0 : _a.toString();
 };
 const itemToSearchResult = (item, setSelectedModal, prefixes) => {
+    if (item.disabled) {
+        return [];
+    }
     if (item.subMenu) {
         return item.subMenu.items
             .map((subItem) => {

package/dist/state/modals.d.ts

@@ -48,6 +48,7 @@ export type RenderModalState = {
     initialEnforceAudioTrack: boolean;
     initialProResProfile: _InternalTypes['ProResProfile'] | null;
     initialx264Preset: X264Preset;
+    initialGopSize: number | null;
     initialPixelFormat: PixelFormat | null;
     initialVideoBitrate: string | null;
     initialAudioBitrate: string | null;

package/package.json

@@ -3,7 +3,7 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/studio"
 	},
 	"name": "@remotion/studio",
-	"version": "4.0.465",
+	"version": "4.0.466",
 	"description": "APIs for interacting with the Remotion Studio",
 	"main": "dist",
 	"scripts": {
@@ -25,14 +25,14 @@
 	},
 	"dependencies": {
 		"semver": "7.5.3",
-		"remotion": "4.0.465",
-		"@remotion/player": "4.0.465",
-		"@remotion/media-utils": "4.0.465",
-		"@remotion/renderer": "4.0.465",
-		"@remotion/web-renderer": "4.0.465",
-		"@remotion/studio-shared": "4.0.465",
-		"@remotion/timeline-utils": "4.0.465",
-		"@remotion/zod-types": "4.0.465",
+		"remotion": "4.0.466",
+		"@remotion/player": "4.0.466",
+		"@remotion/media-utils": "4.0.466",
+		"@remotion/renderer": "4.0.466",
+		"@remotion/web-renderer": "4.0.466",
+		"@remotion/studio-shared": "4.0.466",
+		"@remotion/timeline-utils": "4.0.466",
+		"@remotion/zod-types": "4.0.466",
 		"@jridgewell/trace-mapping": "0.3.31",
 		"mediabunny": "1.45.0",
 		"memfs": "3.4.3",
@@ -43,7 +43,7 @@
 		"react": "19.2.3",
 		"react-dom": "19.2.3",
 		"@types/semver": "7.5.3",
-		"@remotion/eslint-config-internal": "4.0.465",
+		"@remotion/eslint-config-internal": "4.0.466",
 		"eslint": "9.19.0",
 		"@typescript/native-preview": "7.0.0-dev.20260217.1"
 	},