@remotion/studio 4.0.465 → 4.0.467

package/dist/components/CompositionSelectorItem.js

@@ -3,18 +3,21 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.CompositionSelectorItem = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const client_id_1 = require("../helpers/client-id");
 const colors_1 = require("../helpers/colors");
 const is_composition_still_1 = require("../helpers/is-composition-still");
+const noop_1 = require("../helpers/noop");
 const sidebar_scroll_into_view_1 = require("../helpers/sidebar-scroll-into-view");
 const folder_1 = require("../icons/folder");
 const still_1 = require("../icons/still");
 const video_1 = require("../icons/video");
 const modals_1 = require("../state/modals");
+const composition_menu_items_1 = require("./composition-menu-items");
 const CompositionContextButton_1 = require("./CompositionContextButton");
 const ContextMenu_1 = require("./ContextMenu");
 const layout_1 = require("./layout");
-const NotificationCenter_1 = require("./Notifications/NotificationCenter");
 const SidebarRenderButton_1 = require("./SidebarRenderButton");
+const use_resolved_stack_1 = require("./Timeline/use-resolved-stack");
 const COMPOSITION_ITEM_HEIGHT = 32;
 const itemStyle = {
     paddingRight: 10,
@@ -103,88 +106,22 @@ const CompositionSelectorItem = ({ item, level, currentComposition, tabIndex, se
         }
     }, [onClick]);
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
+    const connectionStatus = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx)
+        .previewServerState.type;
+    const resolvedLocation = (0, use_resolved_stack_1.useResolvedStack)(item.type === 'composition' ? item.composition.stack : null);
     const contextMenu = (0, react_1.useMemo)(() => {
         if (item.type === 'composition') {
-            return [
-                {
-                    id: 'duplicate',
-                    keyHint: null,
-                    label: `Duplicate...`,
-                    leftItem: null,
-                    onClick: () => {
-                        setSelectedModal({
-                            type: 'duplicate-comp',
-                            compositionId: item.composition.id,
-                            compositionType: item.composition.durationInFrames === 1
-                                ? 'still'
-                                : 'composition',
-                        });
-                    },
-                    quickSwitcherLabel: null,
-                    subMenu: null,
-                    type: 'item',
-                    value: 'duplicate',
-                },
-                {
-                    id: 'rename',
-                    keyHint: null,
-                    label: `Rename...`,
-                    leftItem: null,
-                    onClick: () => {
-                        setSelectedModal({
-                            type: 'rename-comp',
-                            compositionId: item.composition.id,
-                        });
-                    },
-                    quickSwitcherLabel: null,
-                    subMenu: null,
-                    type: 'item',
-                    value: 'rename',
-                },
-                {
-                    id: 'delete',
-                    keyHint: null,
-                    label: `Delete...`,
-                    leftItem: null,
-                    onClick: () => {
-                        setSelectedModal({
-                            type: 'delete-comp',
-                            compositionId: item.composition.id,
-                        });
-                    },
-                    quickSwitcherLabel: null,
-                    subMenu: null,
-                    type: 'item',
-                    value: 'delete',
-                },
-                {
-                    type: 'divider',
-                    id: 'copy-id-divider',
-                },
-                {
-                    id: 'copy-id',
-                    keyHint: null,
-                    label: `Copy ID`,
-                    leftItem: null,
-                    onClick: () => {
-                        navigator.clipboard
-                            .writeText(item.composition.id)
-                            .catch((err) => {
-                            (0, NotificationCenter_1.showNotification)(`Could not copy to clipboard: ${err.message}`, 1000);
-                        })
-                            .then(() => {
-                            (0, NotificationCenter_1.showNotification)('Copied to clipboard', 1000);
-                        });
-                    },
-                    quickSwitcherLabel: null,
-                    subMenu: null,
-                    type: 'item',
-                    value: 'remove',
-                },
-            ];
+            return (0, composition_menu_items_1.getCompositionMenuItems)({
+                closeMenu: noop_1.noop,
+                composition: item.composition,
+                connectionStatus,
+                resolvedLocation,
+                setSelectedModal,
+                readOnlyStudio: window.remotion_isReadOnlyStudio,
+            });
         }
         return [];
-    }, [item, setSelectedModal]);
+    }, [connectionStatus, item, resolvedLocation, setSelectedModal]);
     if (item.type === 'folder') {
         return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                 jsx_runtime_1.jsxs("button", { style: style, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, tabIndex: tabIndex, onClick: onClick, type: "button", title: item.folderName, children: [item.expanded ? (jsx_runtime_1.jsx(folder_1.ExpandedFolderIcon, { style: iconStyle, color: hovered || selected ? 'white' : colors_1.LIGHT_TEXT })) : (jsx_runtime_1.jsx(folder_1.CollapsedFolderIcon, { color: hovered || selected ? 'white' : colors_1.LIGHT_TEXT, style: iconStyle })), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx("div", { style: label, children: item.folderName })

package/dist/components/CurrentAsset.js

@@ -3,11 +3,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.CurrentAsset = exports.CURRENT_ASSET_HEIGHT = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const studio_shared_1 = require("@remotion/studio-shared");
-const mediabunny_1 = require("mediabunny");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
 const colors_1 = require("../helpers/colors");
-const get_duration_or_compute_1 = require("../helpers/get-duration-or-compute");
+const format_media_duration_1 = require("../helpers/format-media-duration");
+const use_media_metadata_1 = require("../helpers/use-media-metadata");
 const use_static_files_1 = require("./use-static-files");
 exports.CURRENT_ASSET_HEIGHT = 80;
 const container = {
@@ -38,16 +38,6 @@ const row = {
     lineHeight: '18px',
     backgroundColor: colors_1.BACKGROUND,
 };
-const formatDuration = (seconds) => {
-    const h = Math.floor(seconds / 3600);
-    const m = Math.floor((seconds % 3600) / 60);
-    const s = seconds % 60;
-    const sFixed = s.toFixed(2).padStart(5, '0');
-    if (h > 0) {
-        return `${h}:${String(m).padStart(2, '0')}:${sFixed}`;
-    }
-    return `${String(m).padStart(2, '0')}:${sFixed}`;
-};
 const CurrentAsset = () => {
     var _a;
     const { canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
@@ -61,46 +51,8 @@ const CurrentAsset = () => {
         const file = staticFiles.find((f) => f.name === assetName);
         return (_a = file === null || file === void 0 ? void 0 : file.sizeInBytes) !== null && _a !== void 0 ? _a : null;
     }, [assetName, staticFiles]);
-    const [mediaMetadata, setMediaMetadata] = (0, react_1.useState)(null);
-    (0, react_1.useEffect)(() => {
-        setMediaMetadata(null);
-        if (!assetName) {
-            return;
-        }
-        const url = (0, remotion_1.staticFile)(assetName);
-        const input = new mediabunny_1.Input({
-            formats: mediabunny_1.ALL_FORMATS,
-            source: new mediabunny_1.UrlSource(url),
-        });
-        Promise.all([
-            (0, get_duration_or_compute_1.getDurationOrCompute)(input),
-            input.getFormat(),
-            input.getPrimaryVideoTrack(),
-        ])
-            .then(async ([duration, format, videoTrack]) => {
-            if (videoTrack && (await videoTrack.isLive())) {
-                throw new Error('Live streams are not currently supported by Remotion. Sorry! Source: ' +
-                    url);
-            }
-            if (videoTrack && (await videoTrack.isRelativeToUnixEpoch())) {
-                throw new Error('Streams with UNIX timestamps are not currently supported by Remotion. Sorry! Source: ' +
-                    url);
-            }
-            setMediaMetadata({
-                duration,
-                format: format.name,
-                width: videoTrack ? await videoTrack.getDisplayWidth() : null,
-                height: videoTrack ? await videoTrack.getDisplayHeight() : null,
-            });
-        })
-            .catch(() => {
-            // InputDisposedError (user navigated away) and
-            // non-media files (e.g. .png, .json) — ignore silently
-        });
-        return () => {
-            input.dispose();
-        };
-    }, [assetName]);
+    const src = assetName ? (0, remotion_1.staticFile)(assetName) : null;
+    const mediaMetadata = (0, use_media_metadata_1.useMediaMetadata)(src);
     if (!assetName) {
         return jsx_runtime_1.jsx("div", { style: container });
     }
@@ -110,12 +62,14 @@ const CurrentAsset = () => {
         subtitleParts.push((0, studio_shared_1.formatBytes)(sizeInBytes));
     }
     if (mediaMetadata) {
-        subtitleParts.push(mediaMetadata.format);
+        if (mediaMetadata.format) {
+            subtitleParts.push(mediaMetadata.format);
+        }
         if (mediaMetadata.width !== null && mediaMetadata.height !== null) {
             subtitleParts.push(`${mediaMetadata.width}x${mediaMetadata.height}`);
         }
     }
     return (jsx_runtime_1.jsx("div", { style: container, children: jsx_runtime_1.jsx("div", { style: row, children: jsx_runtime_1.jsxs("div", { children: [
-                    jsx_runtime_1.jsx("div", { style: title, children: fileName }), subtitleParts.length > 0 ? (jsx_runtime_1.jsx("div", { style: subtitle, children: subtitleParts.join(' · ') })) : null, mediaMetadata ? (jsx_runtime_1.jsx("div", { style: subtitle, children: formatDuration(mediaMetadata.duration) })) : null] }) }) }));
+                    jsx_runtime_1.jsx("div", { style: title, children: fileName }), subtitleParts.length > 0 ? (jsx_runtime_1.jsx("div", { style: subtitle, children: subtitleParts.join(' · ') })) : null, mediaMetadata ? (jsx_runtime_1.jsx("div", { style: subtitle, children: (0, format_media_duration_1.formatMediaDuration)(mediaMetadata.duration) })) : null] }) }) }));
 };
 exports.CurrentAsset = CurrentAsset;

package/dist/components/EditorContent.js

@@ -4,7 +4,6 @@ exports.EditorContent = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
-const is_current_selected_still_1 = require("../helpers/is-current-selected-still");
 const InitialCompositionLoader_1 = require("./InitialCompositionLoader");
 const MenuToolbar_1 = require("./MenuToolbar");
 const SplitterContainer_1 = require("./Splitter/SplitterContainer");
@@ -20,9 +19,8 @@ const container = {
     height: 0,
 };
 const EditorContent = ({ readOnlyStudio, children }) => {
-    const isStill = (0, is_current_selected_still_1.useIsStill)();
     const { canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
-    const showTimeline = canvasContent !== null && !isStill && canvasContent.type === 'composition';
+    const showTimeline = canvasContent !== null && canvasContent.type === 'composition';
     return (jsx_runtime_1.jsxs("div", { style: container, children: [
             jsx_runtime_1.jsx(InitialCompositionLoader_1.InitialCompositionLoader, {}), jsx_runtime_1.jsx(MenuToolbar_1.MenuToolbar, { readOnlyStudio: readOnlyStudio }), jsx_runtime_1.jsxs(SplitterContainer_1.SplitterContainer, { orientation: "horizontal", id: "top-to-bottom", maxFlex: 0.9, minFlex: 0.2, defaultFlex: 0.75, children: [
                     jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { sticky: null, type: "flexer", children: children }), jsx_runtime_1.jsx(SplitterHandle_1.SplitterHandle, { allowToCollapse: "none", onCollapse: noop }), jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { sticky: null, type: "anti-flexer", children: showTimeline ? jsx_runtime_1.jsx(Timeline_1.Timeline, {}) : jsx_runtime_1.jsx(TimelineEmptyState_1.TimelineEmptyState, {}) })

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

@@ -1,7 +1,7 @@
 import type { SetStateAction } from 'react';
 import React from 'react';
 import type { ComboboxValue } from '../NewComposition/ComboBox';
-export type MenuId = 'remotion' | 'file' | 'view' | 'install' | 'tools' | 'help';
+export type MenuId = 'remotion' | 'file' | 'view' | 'composition' | 'install' | 'tools' | 'help';
 export type Menu = {
     id: MenuId;
     label: React.ReactNode;

package/dist/components/Modals.js

@@ -26,6 +26,6 @@ const Modals = ({ readOnlyStudio }) => {
         'connected';
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [modalContextType && modalContextType.type === 'duplicate-comp' && (jsx_runtime_1.jsx(DuplicateComposition_1.DuplicateComposition, { compositionType: modalContextType.compositionType, compositionId: modalContextType.compositionId })), modalContextType && modalContextType.type === 'delete-comp' && (jsx_runtime_1.jsx(DeleteComposition_1.DeleteComposition, { compositionId: modalContextType.compositionId })), modalContextType && modalContextType.type === 'rename-comp' && (jsx_runtime_1.jsx(RenameComposition_1.RenameComposition, { compositionId: modalContextType.compositionId })), modalContextType && modalContextType.type === 'input-props-override' && (jsx_runtime_1.jsx(OverrideInputProps_1.OverrideInputPropsModal, {})), modalContextType && modalContextType.type === 'web-render' && (jsx_runtime_1.jsx(WebRenderModal_1.WebRenderModalWithLoader, { ...modalContextType })), modalContextType &&
                 modalContextType.type === 'server-render' &&
-                (canRender || modalContextType.readOnlyStudio) ? (jsx_runtime_1.jsx(ServerRenderModal_1.RenderModalWithLoader, { readOnlyStudio: (_a = modalContextType.readOnlyStudio) !== null && _a !== void 0 ? _a : false, initialFrame: modalContextType.initialFrame, initialDarkMode: modalContextType.initialDarkMode, compositionId: modalContextType.compositionId, initialVideoImageFormat: modalContextType.initialVideoImageFormat, initialJpegQuality: modalContextType.initialJpegQuality, initialScale: modalContextType.initialScale, initialLogLevel: modalContextType.initialLogLevel, initialOffthreadVideoCacheSizeInBytes: modalContextType.initialOffthreadVideoCacheSizeInBytes, initialOffthreadVideoThreads: modalContextType.initialOffthreadVideoThreads, initialMediaCacheSizeInBytes: modalContextType.initialMediaCacheSizeInBytes, initialConcurrency: modalContextType.initialConcurrency, maxConcurrency: modalContextType.maxConcurrency, minConcurrency: modalContextType.minConcurrency, initialStillImageFormat: modalContextType.initialStillImageFormat, initialMuted: modalContextType.initialMuted, initialEnforceAudioTrack: modalContextType.initialEnforceAudioTrack, initialProResProfile: modalContextType.initialProResProfile, initialx264Preset: modalContextType.initialx264Preset, initialPixelFormat: modalContextType.initialPixelFormat, initialAudioBitrate: modalContextType.initialAudioBitrate, initialVideoBitrate: modalContextType.initialVideoBitrate, initialEveryNthFrame: modalContextType.initialEveryNthFrame, initialNumberOfGifLoops: modalContextType.initialNumberOfGifLoops, initialDelayRenderTimeout: modalContextType.initialDelayRenderTimeout, initialEnvVariables: modalContextType.initialEnvVariables, initialDisableWebSecurity: modalContextType.initialDisableWebSecurity, initialGl: modalContextType.initialOpenGlRenderer, initialHeadless: modalContextType.initialHeadless, initialIgnoreCertificateErrors: modalContextType.initialIgnoreCertificateErrors, initialEncodingBufferSize: modalContextType.initialEncodingBufferSize, initialEncodingMaxRate: modalContextType.initialEncodingMaxRate, initialUserAgent: modalContextType.initialUserAgent, initialColorSpace: modalContextType.initialColorSpace, initialMultiProcessOnLinux: modalContextType.initialMultiProcessOnLinux, initialRepro: modalContextType.initialRepro, initialBeep: modalContextType.initialBeep, initialForSeamlessAacConcatenation: modalContextType.initialForSeamlessAacConcatenation, defaultProps: modalContextType.defaultProps, inFrameMark: modalContextType.inFrameMark, outFrameMark: modalContextType.outFrameMark, defaultConfigurationAudioCodec: modalContextType.defaultConfigurationAudioCodec, defaultConfigurationVideoCodec: modalContextType.defaultConfigurationVideoCodec, renderTypeOfLastRender: modalContextType.renderTypeOfLastRender, defaultMetadata: modalContextType.defaulMetadata, initialHardwareAcceleration: modalContextType.initialHardwareAcceleration, initialSampleRate: modalContextType.initialSampleRate, initialChromeMode: modalContextType.initialChromeMode, renderDefaults: modalContextType.renderDefaults })) : null, modalContextType && modalContextType.type === 'render-progress' && (jsx_runtime_1.jsx(RenderStatusModal_1.RenderStatusModal, { jobId: modalContextType.jobId })), modalContextType && modalContextType.type === 'update' && (jsx_runtime_1.jsx(UpdateModal_1.UpdateModal, { info: modalContextType.info, knownBugs: modalContextType.knownBugs })), modalContextType && modalContextType.type === 'install-packages' && (jsx_runtime_1.jsx(InstallPackage_1.InstallPackageModal, { packageManager: modalContextType.packageManager })), modalContextType && modalContextType.type === 'quick-switcher' && (jsx_runtime_1.jsx(QuickSwitcher_1.default, { readOnlyStudio: readOnlyStudio, invocationTimestamp: modalContextType.invocationTimestamp, initialMode: modalContextType.mode })), process.env.ASK_AI_ENABLED && jsx_runtime_1.jsx(AskAiModal_1.AskAiModal, {})] }));
+                (canRender || modalContextType.readOnlyStudio) ? (jsx_runtime_1.jsx(ServerRenderModal_1.RenderModalWithLoader, { readOnlyStudio: (_a = modalContextType.readOnlyStudio) !== null && _a !== void 0 ? _a : false, initialFrame: modalContextType.initialFrame, initialDarkMode: modalContextType.initialDarkMode, compositionId: modalContextType.compositionId, initialVideoImageFormat: modalContextType.initialVideoImageFormat, initialJpegQuality: modalContextType.initialJpegQuality, initialScale: modalContextType.initialScale, initialLogLevel: modalContextType.initialLogLevel, initialOffthreadVideoCacheSizeInBytes: modalContextType.initialOffthreadVideoCacheSizeInBytes, initialOffthreadVideoThreads: modalContextType.initialOffthreadVideoThreads, initialMediaCacheSizeInBytes: modalContextType.initialMediaCacheSizeInBytes, initialConcurrency: modalContextType.initialConcurrency, maxConcurrency: modalContextType.maxConcurrency, minConcurrency: modalContextType.minConcurrency, initialStillImageFormat: modalContextType.initialStillImageFormat, initialMuted: modalContextType.initialMuted, initialEnforceAudioTrack: modalContextType.initialEnforceAudioTrack, initialProResProfile: modalContextType.initialProResProfile, initialx264Preset: modalContextType.initialx264Preset, initialGopSize: modalContextType.initialGopSize, initialPixelFormat: modalContextType.initialPixelFormat, initialAudioBitrate: modalContextType.initialAudioBitrate, initialVideoBitrate: modalContextType.initialVideoBitrate, initialEveryNthFrame: modalContextType.initialEveryNthFrame, initialNumberOfGifLoops: modalContextType.initialNumberOfGifLoops, initialDelayRenderTimeout: modalContextType.initialDelayRenderTimeout, initialEnvVariables: modalContextType.initialEnvVariables, initialDisableWebSecurity: modalContextType.initialDisableWebSecurity, initialGl: modalContextType.initialOpenGlRenderer, initialHeadless: modalContextType.initialHeadless, initialIgnoreCertificateErrors: modalContextType.initialIgnoreCertificateErrors, initialEncodingBufferSize: modalContextType.initialEncodingBufferSize, initialEncodingMaxRate: modalContextType.initialEncodingMaxRate, initialUserAgent: modalContextType.initialUserAgent, initialColorSpace: modalContextType.initialColorSpace, initialMultiProcessOnLinux: modalContextType.initialMultiProcessOnLinux, initialRepro: modalContextType.initialRepro, initialBeep: modalContextType.initialBeep, initialForSeamlessAacConcatenation: modalContextType.initialForSeamlessAacConcatenation, defaultProps: modalContextType.defaultProps, inFrameMark: modalContextType.inFrameMark, outFrameMark: modalContextType.outFrameMark, defaultConfigurationAudioCodec: modalContextType.defaultConfigurationAudioCodec, defaultConfigurationVideoCodec: modalContextType.defaultConfigurationVideoCodec, renderTypeOfLastRender: modalContextType.renderTypeOfLastRender, defaultMetadata: modalContextType.defaulMetadata, initialHardwareAcceleration: modalContextType.initialHardwareAcceleration, initialSampleRate: modalContextType.initialSampleRate, initialChromeMode: modalContextType.initialChromeMode, renderDefaults: modalContextType.renderDefaults })) : null, modalContextType && modalContextType.type === 'render-progress' && (jsx_runtime_1.jsx(RenderStatusModal_1.RenderStatusModal, { jobId: modalContextType.jobId })), modalContextType && modalContextType.type === 'update' && (jsx_runtime_1.jsx(UpdateModal_1.UpdateModal, { info: modalContextType.info, knownBugs: modalContextType.knownBugs })), modalContextType && modalContextType.type === 'install-packages' && (jsx_runtime_1.jsx(InstallPackage_1.InstallPackageModal, { packageManager: modalContextType.packageManager })), modalContextType && modalContextType.type === 'quick-switcher' && (jsx_runtime_1.jsx(QuickSwitcher_1.default, { readOnlyStudio: readOnlyStudio, invocationTimestamp: modalContextType.invocationTimestamp, initialMode: modalContextType.mode })), process.env.ASK_AI_ENABLED && jsx_runtime_1.jsx(AskAiModal_1.AskAiModal, {})] }));
 };
 exports.Modals = Modals;

package/dist/components/NewComposition/MenuContent.js

@@ -19,6 +19,7 @@ const container = {
     marginLeft: 0 - BORDER_SIZE,
     overflowY: 'auto',
     overflowX: 'hidden',
+    scrollbarGutter: 'auto',
     minWidth: 200,
     maxWidth: styles_1.MAX_MENU_WIDTH,
 };

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

@@ -5,4 +5,5 @@ export declare const ValidationMessage: React.FC<{
     readonly message: string;
     readonly align: 'flex-start' | 'flex-end';
     readonly type: 'warning' | 'error';
+    readonly action?: React.ReactNode;
 }>;

package/dist/components/NewComposition/ValidationMessage.js

@@ -22,7 +22,7 @@ const label = {
     color: 'white',
     fontFamily: 'sans-serif',
 };
-const ValidationMessage = ({ message, align, type }) => {
+const ValidationMessage = ({ message, align, type, action }) => {
     const finalStyle = (0, react_1.useMemo)(() => {
         return {
             ...style,
@@ -30,7 +30,7 @@ const ValidationMessage = ({ message, align, type }) => {
         };
     }, [type]);
     return (jsx_runtime_1.jsx("div", { style: container, children: jsx_runtime_1.jsxs(layout_1.Row, { align: "center", justify: align, children: [
-                jsx_runtime_1.jsx(exports.WarningTriangle, { style: finalStyle }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx("div", { style: label, children: message })
-            ] }) }));
+                jsx_runtime_1.jsx(exports.WarningTriangle, { style: finalStyle }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx("div", { style: label, children: message }), action ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                        jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), action] })) : null] }) }));
 };
 exports.ValidationMessage = ValidationMessage;

package/dist/components/RenderButton.js

@@ -195,6 +195,7 @@ const RenderButton = ({ readOnlyStudio, }) => {
             initialEnforceAudioTrack: defaults.enforceAudioTrack,
             initialProResProfile: defaults.proResProfile,
             initialx264Preset: defaults.x264Preset,
+            initialGopSize: defaults.gopSize,
             initialPixelFormat: null,
             initialAudioBitrate: defaults.audioBitrate,
             initialVideoBitrate: defaults.videoBitrate,

package/dist/components/RenderModal/DataEditor.js

@@ -84,6 +84,13 @@ const tabWrapper = {
     flexDirection: 'row',
     alignItems: 'center',
 };
+const resolveLinkStyle = {
+    color: colors_1.BLUE,
+    fontSize: 13,
+    fontFamily: 'sans-serif',
+    textDecoration: 'underline',
+    whiteSpace: 'nowrap',
+};
 const persistanceKey = 'remotion.show-render-modalwarning';
 const getPersistedShowWarningState = () => {
     const val = localStorage.getItem(persistanceKey);
@@ -222,8 +229,7 @@ const DataEditor = ({ unresolvedComposition, defaultProps, setDefaultProps, prop
                     jsx_runtime_1.jsxs("div", { style: tabWrapper, children: [
                             jsx_runtime_1.jsx(SegmentedControl_1.SegmentedControl, { items: modeItems, needsWrapping: false }), jsx_runtime_1.jsx(layout_1.Flex, {}), warnings.length > 0 ? (jsx_runtime_1.jsx(WarningIndicatorButton_1.WarningIndicatorButton, { setShowWarning: setShowWarning, showWarning: showWarning, warningCount: warnings.length })) : null] }), showWarning && warnings.length > 0
                         ? warnings.map((warning) => (jsx_runtime_1.jsxs(react_1.default.Fragment, { children: [
-                                jsx_runtime_1.jsx(layout_1.Spacing, { y: 1 }), jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { message: warning, align: "flex-start", type: "warning" })
-                            ] }, warning)))
+                                jsx_runtime_1.jsx(layout_1.Spacing, { y: 1 }), jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { message: warning.message, align: "flex-start", type: "warning", action: warning.resolveLink ? (jsx_runtime_1.jsx("a", { href: warning.resolveLink, target: "_blank", rel: "noopener noreferrer", style: resolveLinkStyle, children: "Resolve" })) : null })] }, warning.id)))
                         : null] }), mode === 'schema' ? (jsx_runtime_1.jsx(SchemaEditor_1.SchemaEditor, { value: defaultProps, setValue: setDefaultProps, schema: schema })) : (jsx_runtime_1.jsx(RenderModalJSONPropsEditor_1.RenderModalJSONPropsEditor, { value: defaultProps !== null && defaultProps !== void 0 ? defaultProps : {}, setValue: jsonEditorSetValue, onSave: onSave, serializedJSON: serializedJSON, defaultProps: unresolvedComposition.defaultProps, schema: schema, compositionId: unresolvedComposition.id }))] }));
 };
 exports.DataEditor = DataEditor;

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

@@ -1,5 +1,4 @@
-import type { ChromeMode, Codec, X264Preset } from '@remotion/renderer';
-import type { HardwareAccelerationOption } from '@remotion/renderer/client';
+import type { ChromeMode } from '@remotion/renderer';
 import type { UiOpenGlOptions } from '@remotion/studio-shared';
 import React from 'react';
 export type RenderType = 'still' | 'video' | 'audio' | 'sequence';
@@ -11,8 +10,6 @@ export declare const RenderModalAdvanced: React.FC<{
     readonly concurrency: number;
     readonly delayRenderTimeout: number;
     readonly setDelayRenderTimeout: React.Dispatch<React.SetStateAction<number>>;
-    readonly disallowParallelEncoding: boolean;
-    readonly setDisallowParallelEncoding: React.Dispatch<React.SetStateAction<boolean>>;
     readonly setDisableWebSecurity: React.Dispatch<React.SetStateAction<boolean>>;
     readonly setIgnoreCertificateErrors: React.Dispatch<React.SetStateAction<boolean>>;
     readonly setHeadless: React.Dispatch<React.SetStateAction<boolean>>;
@@ -23,19 +20,12 @@ export declare const RenderModalAdvanced: React.FC<{
     readonly setOpenGlOption: React.Dispatch<React.SetStateAction<UiOpenGlOptions>>;
     readonly chromeModeOption: ChromeMode;
     readonly setChromeModeOption: React.Dispatch<React.SetStateAction<ChromeMode>>;
-    readonly envVariables: [string, string][];
-    readonly setEnvVariables: React.Dispatch<React.SetStateAction<[string, string][]>>;
-    readonly x264Preset: X264Preset | null;
-    readonly setx264Preset: React.Dispatch<React.SetStateAction<X264Preset>>;
-    readonly hardwareAcceleration: HardwareAccelerationOption;
-    readonly setHardwareAcceleration: React.Dispatch<React.SetStateAction<HardwareAccelerationOption>>;
     readonly offthreadVideoCacheSizeInBytes: number | null;
     readonly setOffthreadVideoCacheSizeInBytes: React.Dispatch<React.SetStateAction<number | null>>;
     readonly mediaCacheSizeInBytes: number | null;
     readonly setMediaCacheSizeInBytes: React.Dispatch<React.SetStateAction<number | null>>;
     readonly offthreadVideoThreads: number | null;
     readonly setOffthreadVideoThreads: React.Dispatch<React.SetStateAction<number | null>>;
-    readonly codec: Codec;
     readonly enableMultiProcessOnLinux: boolean;
     readonly darkMode: boolean;
     readonly setDarkMode: React.Dispatch<React.SetStateAction<boolean>>;

package/dist/components/RenderModal/RenderModalAdvanced.js

@@ -4,7 +4,6 @@ exports.RenderModalAdvanced = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const client_1 = require("@remotion/renderer/client");
 const react_1 = require("react");
-const presets_labels_1 = require("../../helpers/presets-labels");
 const Checkmark_1 = require("../../icons/Checkmark");
 const Checkbox_1 = require("../Checkbox");
 const layout_1 = require("../layout");
@@ -14,13 +13,12 @@ const RemInput_1 = require("../NewComposition/RemInput");
 const layout_2 = require("./layout");
 const NumberSetting_1 = require("./NumberSetting");
 const OptionExplainerBubble_1 = require("./OptionExplainerBubble");
-const RenderModalEnvironmentVariables_1 = require("./RenderModalEnvironmentVariables");
 const RenderModalHr_1 = require("./RenderModalHr");
 const container = {
     flex: 1,
     overflowY: 'auto',
 };
-const RenderModalAdvanced = ({ renderMode, maxConcurrency, minConcurrency, setConcurrency, concurrency, delayRenderTimeout, setDelayRenderTimeout, disallowParallelEncoding, setDisallowParallelEncoding, setDisableWebSecurity, setIgnoreCertificateErrors, setHeadless, headless, ignoreCertificateErrors, disableWebSecurity, openGlOption, setOpenGlOption, setEnvVariables, envVariables, setx264Preset, x264Preset, codec, setMediaCacheSizeInBytes, mediaCacheSizeInBytes, offthreadVideoCacheSizeInBytes, setOffthreadVideoCacheSizeInBytes, offthreadVideoThreads, setOffthreadVideoThreads, enableMultiProcessOnLinux, setChromiumMultiProcessOnLinux, setUserAgent, userAgent, beep, setBeep, repro, setRepro, hardwareAcceleration, chromeModeOption, setChromeModeOption, setHardwareAcceleration, darkMode, setDarkMode, }) => {
+const RenderModalAdvanced = ({ renderMode, maxConcurrency, minConcurrency, setConcurrency, concurrency, delayRenderTimeout, setDelayRenderTimeout, setDisableWebSecurity, setIgnoreCertificateErrors, setHeadless, headless, ignoreCertificateErrors, disableWebSecurity, openGlOption, setOpenGlOption, setMediaCacheSizeInBytes, mediaCacheSizeInBytes, offthreadVideoCacheSizeInBytes, setOffthreadVideoCacheSizeInBytes, offthreadVideoThreads, setOffthreadVideoThreads, enableMultiProcessOnLinux, setChromiumMultiProcessOnLinux, setUserAgent, userAgent, beep, setBeep, repro, setRepro, chromeModeOption, setChromeModeOption, darkMode, setDarkMode, }) => {
     const extendedOpenGlOptions = (0, react_1.useMemo)(() => {
         return [
             'angle',
@@ -64,9 +62,6 @@ const RenderModalAdvanced = ({ renderMode, maxConcurrency, minConcurrency, setCo
             return null;
         });
     }, [setUserAgent]);
-    const onDisallowParallelEncodingChanged = (0, react_1.useCallback)((e) => {
-        setDisallowParallelEncoding(e.target.checked);
-    }, [setDisallowParallelEncoding]);
     const onDisableWebSecurityChanged = (0, react_1.useCallback)((e) => {
         setDisableWebSecurity(e.target.checked);
     }, [setDisableWebSecurity]);
@@ -123,37 +118,6 @@ const RenderModalAdvanced = ({ renderMode, maxConcurrency, minConcurrency, setCo
             };
         });
     }, [chromeModeOption, setChromeModeOption]);
-    const x264PresetOptions = (0, react_1.useMemo)(() => {
-        return client_1.BrowserSafeApis.x264PresetOptions.map((option) => {
-            return {
-                label: (0, presets_labels_1.labelx264Preset)(option),
-                onClick: () => setx264Preset(option),
-                key: option,
-                type: 'item',
-                id: option,
-                keyHint: null,
-                leftItem: x264Preset === option ? jsx_runtime_1.jsx(Checkmark_1.Checkmark, {}) : null,
-                quickSwitcherLabel: null,
-                subMenu: null,
-                value: option,
-            };
-        });
-    }, [setx264Preset, x264Preset]);
-    const hardwareAccelerationValues = (0, react_1.useMemo)(() => {
-        return client_1.BrowserSafeApis.hardwareAccelerationOptions.map((option) => {
-            return {
-                label: option,
-                onClick: () => setHardwareAcceleration(option),
-                leftItem: hardwareAcceleration === option ? jsx_runtime_1.jsx(Checkmark_1.Checkmark, {}) : null,
-                subMenu: null,
-                quickSwitcherLabel: null,
-                type: 'item',
-                id: option,
-                keyHint: null,
-                value: option,
-            };
-        });
-    }, [hardwareAcceleration, setHardwareAcceleration]);
     const changeMediaCacheSizeInBytes = (0, react_1.useCallback)((cb) => {
         setMediaCacheSizeInBytes((prev) => {
             if (prev === null) {
@@ -187,21 +151,11 @@ const RenderModalAdvanced = ({ renderMode, maxConcurrency, minConcurrency, setCo
             return cb;
         });
     }, [setOffthreadVideoThreads]);
-    return (jsx_runtime_1.jsxs("div", { style: container, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: [renderMode === 'still' ? null : (jsx_runtime_1.jsx(NumberSetting_1.NumberSetting, { min: minConcurrency, max: maxConcurrency, step: 1, name: "Concurrency", formatter: (w) => `${w}x`, onValueChanged: setConcurrency, value: concurrency })), renderMode === 'video' && codec === 'h264' ? (jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
-                    jsx_runtime_1.jsxs("div", { style: layout_2.label, children: ["x264 Preset",
-                            jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(OptionExplainerBubble_1.OptionExplainerBubble, { id: "x264Option" })
-                        ] }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { title: x264Preset, selectedId: x264Preset, values: x264PresetOptions }) })
-                ] })) : null, renderMode === 'video' ? (jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
-                    jsx_runtime_1.jsxs("div", { style: layout_2.label, children: ["Hardware acceleration",
-                            jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(OptionExplainerBubble_1.OptionExplainerBubble, { id: "hardwareAccelerationOption" })
-                        ] }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { title: hardwareAcceleration, selectedId: hardwareAcceleration, values: hardwareAccelerationValues }) })
-                ] })) : null, jsx_runtime_1.jsx(NumberSetting_1.NumberSetting
+    return (jsx_runtime_1.jsxs("div", { style: container, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: [renderMode === 'still' ? null : (jsx_runtime_1.jsx(NumberSetting_1.NumberSetting, { min: minConcurrency, max: maxConcurrency, step: 1, name: "Concurrency", formatter: (w) => `${w}x`, onValueChanged: setConcurrency, value: concurrency })), jsx_runtime_1.jsx(NumberSetting_1.NumberSetting
             // Also appears in packages/renderer/src/validate-puppeteer-timeout.ts
             , { 
                 // Also appears in packages/renderer/src/validate-puppeteer-timeout.ts
-                min: 7000, max: 900000, name: "delayRender() timeout", onValueChanged: setDelayRenderTimeout, formatter: (w) => `${w}ms`, step: 1000, hint: "delayRenderTimeoutInMillisecondsOption", value: delayRenderTimeout }), jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
-                    jsx_runtime_1.jsx("div", { style: layout_2.label, children: "No parallel encoding" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(Checkbox_1.Checkbox, { checked: disallowParallelEncoding, onChange: onDisallowParallelEncodingChanged, name: "disallow-parallel-encoding" }) })
-                ] }), renderMode === 'audio' ? null : (jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
+                min: 7000, max: 900000, name: "delayRender() timeout", onValueChanged: setDelayRenderTimeout, formatter: (w) => `${w}ms`, step: 1000, hint: "delayRenderTimeoutInMillisecondsOption", value: delayRenderTimeout }), renderMode === 'audio' ? null : (jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
                     jsx_runtime_1.jsxs("div", { style: layout_2.label, children: ["Custom @remotion/media cache size",
                             jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(OptionExplainerBubble_1.OptionExplainerBubble, { id: "mediaCacheSizeInBytesOption" })
                         ] }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(Checkbox_1.Checkbox, { checked: mediaCacheSizeInBytes !== null, onChange: toggleCustomMediaCacheSizeInBytes, name: "media-cache-size" }) })
@@ -250,7 +204,7 @@ const RenderModalAdvanced = ({ renderMode, maxConcurrency, minConcurrency, setCo
                     jsx_runtime_1.jsxs("div", { style: layout_2.label, children: ["Beep when finished ",
                             jsx_runtime_1.jsx(OptionExplainerBubble_1.OptionExplainerBubble, { id: "beepOnFinishOption" })
                         ] }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(Checkbox_1.Checkbox, { checked: beep, onChange: onPlayBeepSound, name: "beep-when-finished" }) })
-                ] }), jsx_runtime_1.jsx(RenderModalHr_1.RenderModalHr, {}), jsx_runtime_1.jsx(RenderModalEnvironmentVariables_1.RenderModalEnvironmentVariables, { envVariables: envVariables, setEnvVariables: setEnvVariables })
+                ] })
         ] }));
 };
 exports.RenderModalAdvanced = RenderModalAdvanced;

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

@@ -0,0 +1,37 @@
+import type { ColorSpace, Codec, PixelFormat, X264Preset } from '@remotion/renderer';
+import type { HardwareAccelerationOption } from '@remotion/renderer/client';
+import React from 'react';
+import type { ComboboxValue } from '../NewComposition/ComboBox';
+import type { RenderType } from './RenderModalAdvanced';
+declare const qualityControlModes: readonly ["crf", "bitrate"];
+export type QualityControl = (typeof qualityControlModes)[number];
+export declare const RenderModalEncoding: React.FC<{
+    readonly renderMode: RenderType;
+    readonly codec: Codec;
+    readonly qualityControlType: QualityControl | null;
+    readonly setQualityControl: React.Dispatch<React.SetStateAction<QualityControl>>;
+    readonly shouldDisplayQualityControlPicker: boolean;
+    readonly crf: number | null;
+    readonly minCrf: number;
+    readonly maxCrf: number;
+    readonly setCrf: React.Dispatch<React.SetStateAction<number>>;
+    readonly customTargetVideoBitrate: string;
+    readonly setCustomTargetVideoBitrateValue: React.Dispatch<React.SetStateAction<string>>;
+    readonly encodingBufferSize: string | null;
+    readonly setEncodingBufferSize: React.Dispatch<React.SetStateAction<string | null>>;
+    readonly encodingMaxRate: string | null;
+    readonly setEncodingMaxRate: React.Dispatch<React.SetStateAction<string | null>>;
+    readonly pixelFormat: PixelFormat;
+    readonly pixelFormatOptions: ComboboxValue[];
+    readonly colorSpace: ColorSpace;
+    readonly setColorSpace: React.Dispatch<React.SetStateAction<ColorSpace>>;
+    readonly x264Preset: X264Preset | null;
+    readonly setx264Preset: React.Dispatch<React.SetStateAction<X264Preset>>;
+    readonly gopSize: number | null;
+    readonly setGopSize: React.Dispatch<React.SetStateAction<number | null>>;
+    readonly hardwareAcceleration: HardwareAccelerationOption;
+    readonly setHardwareAcceleration: React.Dispatch<React.SetStateAction<HardwareAccelerationOption>>;
+    readonly disallowParallelEncoding: boolean;
+    readonly setDisallowParallelEncoding: React.Dispatch<React.SetStateAction<boolean>>;
+}>;
+export {};