@remotion/studio 4.0.504 → 4.0.506

package/dist/components/RenderButton.js

@@ -1,4 +1,37 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -6,7 +39,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.RenderButton = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const player_1 = require("@remotion/player");
-const react_1 = require("react");
+const react_1 = __importStar(require("react"));
 const react_dom_1 = __importDefault(require("react-dom"));
 const remotion_1 = require("remotion");
 const client_id_1 = require("../helpers/client-id");
@@ -25,10 +58,9 @@ const MenuContent_1 = require("./NewComposition/MenuContent");
 const splitButtonContainer = {
     display: 'inline-flex',
     flexDirection: 'row',
-    alignItems: 'stretch',
-    borderRadius: 4,
-    border: `1px solid ${colors_1.BLACK_ALPHA_60}`,
-    backgroundColor: colors_1.INPUT_BACKGROUND,
+    alignItems: 'center',
+    borderRadius: 3,
+    gap: 1,
     overflow: 'hidden',
 };
 const mainButtonStyle = {
@@ -38,18 +70,14 @@ const mainButtonStyle = {
     paddingBottom: 7,
     background: colors_1.TRANSPARENT,
     border: 'none',
+    borderRadius: '3px 0 0 3px',
     color: colors_1.WHITE,
-    cursor: 'pointer',
+    cursor: 'default',
     display: 'flex',
     alignItems: 'center',
     fontSize: 14,
     fontFamily: 'inherit',
 };
-const dividerStyle = {
-    width: 1,
-    backgroundColor: colors_1.BLACK_ALPHA_60,
-    alignSelf: 'stretch',
-};
 const dropdownTriggerStyle = {
     paddingLeft: 6,
     paddingRight: 6,
@@ -57,10 +85,12 @@ const dropdownTriggerStyle = {
     paddingBottom: 7,
     background: colors_1.TRANSPARENT,
     border: 'none',
+    borderRadius: '0 3px 3px 0',
     color: colors_1.WHITE,
-    cursor: 'pointer',
+    cursor: 'default',
     display: 'flex',
     alignItems: 'center',
+    justifyContent: 'center',
 };
 const mainButtonContent = {
     paddingLeft: 4,
@@ -75,32 +105,29 @@ const label = {
     minWidth: 0,
     overflow: 'hidden',
     textOverflow: 'ellipsis',
+    userSelect: 'none',
+    WebkitUserSelect: 'none',
     whiteSpace: 'nowrap',
 };
-const compactSplitButtonSegmentHeight = layout_1.COMPACT_CONTROL_ROW_HEIGHT;
+const compactSplitButtonSegmentHeight = 24;
 const compactMainButtonStyle = {
     ...mainButtonStyle,
     boxSizing: 'border-box',
     height: compactSplitButtonSegmentHeight,
-    paddingLeft: 6,
-    paddingRight: 6,
-    paddingTop: 6,
-    paddingBottom: 6,
+    padding: '0 4px',
     fontSize: 12,
 };
 const compactDropdownTriggerStyle = {
     ...dropdownTriggerStyle,
     boxSizing: 'border-box',
     height: compactSplitButtonSegmentHeight,
-    paddingLeft: 5,
-    paddingRight: 5,
-    paddingTop: 6,
-    paddingBottom: 6,
+    padding: 0,
+    width: 20,
 };
 const compactMainButtonContent = {
     ...mainButtonContent,
-    paddingLeft: 2,
-    paddingRight: 4,
+    paddingLeft: 0,
+    paddingRight: 0,
 };
 const compactLabel = {
     ...label,
@@ -123,13 +150,12 @@ const getInitialRenderType = (readOnlyStudio) => {
     }
     return 'server-render';
 };
-const RenderButton = ({ readOnlyStudio, size: controlSize = 'default' }) => {
+const RenderButtonInner = ({ readOnlyStudio, size: controlSize = 'default', narrow = false }) => {
     const { inFrame, outFrame } = (0, in_out_1.useTimelineInOutFramePosition)();
-    const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
+    const { setSelectedModal } = (0, react_1.useContext)(modals_1.SetSelectedModalContext);
     const [preferredRenderType, setPreferredRenderType] = (0, react_1.useState)(() => getInitialRenderType(readOnlyStudio));
     const [dropdownOpened, setDropdownOpened] = (0, react_1.useState)(false);
-    const [mainButtonHovered, setMainButtonHovered] = (0, react_1.useState)(false);
-    const [dropdownButtonHovered, setDropdownButtonHovered] = (0, react_1.useState)(false);
+    const [hovered, setHovered] = (0, react_1.useState)(false);
     const dropdownRef = (0, react_1.useRef)(null);
     const containerRef = (0, react_1.useRef)(null);
     const { currentZIndex } = (0, z_index_1.useZIndex)();
@@ -193,14 +219,17 @@ const RenderButton = ({ readOnlyStudio, size: controlSize = 'default' }) => {
     const iconStyle = (0, react_1.useMemo)(() => {
         return {
             style: {
-                height: controlSize === 'compact' ? 14 : 16,
+                height: controlSize === 'compact' ? 18 : 16,
+                width: controlSize === 'compact' ? 18 : 16,
                 flexShrink: 0,
             },
         };
     }, [controlSize]);
     const video = remotion_1.Internals.useVideo();
-    const { getCurrentFrame } = player_1.PlayerInternals.usePlayer();
+    const { getCurrentFrame } = player_1.PlayerInternals.usePlayerMethods();
     const { props } = (0, react_1.useContext)(remotion_1.Internals.EditorPropsContext);
+    // Read the frame when the modal opens instead of subscribing this button to
+    // every timeline position update.
     const openServerRenderModal = (0, react_1.useCallback)((copyCommandOnly) => {
         var _a;
         var _b, _c;
@@ -264,7 +293,7 @@ const RenderButton = ({ readOnlyStudio, size: controlSize = 'default' }) => {
             initialMediaCacheSizeInBytes: defaults.mediaCacheSizeInBytes,
             renderDefaults: defaults,
         });
-    }, [video, setSelectedModal, getCurrentFrame, props, inFrame, outFrame]);
+    }, [video, setSelectedModal, props, inFrame, outFrame, getCurrentFrame]);
     const openClientRenderModal = (0, react_1.useCallback)(() => {
         var _a;
         if (!video) {
@@ -298,7 +327,7 @@ const RenderButton = ({ readOnlyStudio, size: controlSize = 'default' }) => {
             initialMediaCacheSizeInBytes: defaults.mediaCacheSizeInBytes,
             initialPageResponsiveness: 'medium',
         });
-    }, [video, setSelectedModal, getCurrentFrame, props, inFrame, outFrame]);
+    }, [video, setSelectedModal, props, inFrame, outFrame, getCurrentFrame]);
     const onClick = (0, react_1.useCallback)(() => {
         if (renderType === 'render-command') {
             openServerRenderModal(true);
@@ -423,10 +452,9 @@ const RenderButton = ({ readOnlyStudio, size: controlSize = 'default' }) => {
     const containerStyle = (0, react_1.useMemo)(() => {
         return {
             ...splitButtonContainer,
-            borderColor: colors_1.BLACK_ALPHA_60,
-            borderRadius: controlSize === 'compact' ? 0 : 4,
+            borderRadius: controlSize === 'compact' ? 3 : 4,
             opacity: 1,
-            cursor: 'pointer',
+            cursor: 'default',
         };
     }, [controlSize]);
     const renderLabel = renderType === 'server-render'
@@ -434,22 +462,46 @@ const RenderButton = ({ readOnlyStudio, size: controlSize = 'default' }) => {
         : renderType === 'render-command'
             ? 'Render via CLI'
             : 'Render on web';
-    const mainIconColor = mainButtonHovered ? colors_1.WHITE : colors_1.WHITE_ALPHA_80;
-    const dropdownIconColor = dropdownOpened || dropdownButtonHovered ? colors_1.WHITE : colors_1.WHITE_ALPHA_80;
+    const showRenderLabel = !narrow || renderType !== 'server-render';
+    const mainHovered = hovered && !dropdownOpened;
+    const mainForegroundColor = mainHovered ? colors_1.WHITE : colors_1.WHITE_ALPHA_80;
+    const dropdownForegroundColor = hovered || dropdownOpened ? colors_1.WHITE : colors_1.WHITE_ALPHA_80;
+    const mainSegmentBackground = (0, colors_1.getBackgroundFromHoverState)({
+        hovered: mainHovered,
+        selected: false,
+    });
+    const dropdownSegmentBackground = (0, colors_1.getBackgroundFromHoverState)({
+        hovered,
+        selected: dropdownOpened,
+    });
     if (!video) {
         return null;
     }
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-            jsx_runtime_1.jsx("button", { style: { display: 'none' }, id: "render-modal-button-server", disabled: !canServerRender, onClick: () => openServerRenderModal(false), type: "button" }), ' ', jsx_runtime_1.jsx("button", { style: { display: 'none' }, id: "render-modal-button-client", onClick: openClientRenderModal, type: "button" }), jsx_runtime_1.jsx("button", { style: { display: 'none' }, id: "render-modal-button-command", onClick: () => openServerRenderModal(true), type: "button" }), jsx_runtime_1.jsxs("div", { ref: containerRef, style: containerStyle, title: tooltip, children: [
-                    jsx_runtime_1.jsx("button", { type: "button", style: controlSize === 'compact' ? compactMainButtonStyle : mainButtonStyle, onClick: onClick, onPointerEnter: () => setMainButtonHovered(true), onPointerLeave: () => setMainButtonHovered(false), id: "render-modal-button", children: jsx_runtime_1.jsxs(layout_1.Row, { align: "center", style: controlSize === 'compact'
+            jsx_runtime_1.jsx("button", { style: { display: 'none' }, id: "render-modal-button-server", disabled: !canServerRender, onClick: () => openServerRenderModal(false), type: "button" }), ' ', jsx_runtime_1.jsx("button", { style: { display: 'none' }, id: "render-modal-button-client", onClick: openClientRenderModal, type: "button" }), jsx_runtime_1.jsx("button", { style: { display: 'none' }, id: "render-modal-button-command", onClick: () => openServerRenderModal(true), type: "button" }), jsx_runtime_1.jsxs("div", { ref: containerRef, style: containerStyle, title: tooltip, onPointerEnter: () => setHovered(true), onPointerLeave: () => setHovered(false), children: [
+                    jsx_runtime_1.jsx("button", { type: "button", "aria-label": renderLabel, style: {
+                            ...(controlSize === 'compact'
+                                ? compactMainButtonStyle
+                                : mainButtonStyle),
+                            backgroundColor: mainSegmentBackground,
+                            color: mainForegroundColor,
+                        }, onClick: onClick, id: "render-modal-button", children: jsx_runtime_1.jsxs(layout_1.Row, { align: "center", style: controlSize === 'compact'
                                 ? compactMainButtonContent
                                 : mainButtonContent, children: [
-                                jsx_runtime_1.jsx(render_1.ThinRenderIcon, { fill: mainIconColor, svgProps: iconStyle }), jsx_runtime_1.jsx(layout_1.Spacing, { x: controlSize === 'compact' ? 0.75 : 1 }), jsx_runtime_1.jsx("span", { style: controlSize === 'compact' ? compactLabel : label, children: renderLabel })
-                            ] }) }), jsx_runtime_1.jsx("div", { style: dividerStyle }), jsx_runtime_1.jsx("button", { ref: dropdownRef, type: "button", style: controlSize === 'compact'
-                            ? compactDropdownTriggerStyle
-                            : dropdownTriggerStyle, className: is_menu_item_1.MENU_INITIATOR_CLASSNAME, onPointerDown: onPointerDown, onClick: onClickDropdown, onPointerEnter: () => setDropdownButtonHovered(true), onPointerLeave: () => setDropdownButtonHovered(false), children: jsx_runtime_1.jsx(caret_1.CaretDown, { color: dropdownIconColor }) })
+                                jsx_runtime_1.jsx(render_1.ThinRenderIcon, { fill: mainForegroundColor, svgProps: iconStyle }), showRenderLabel ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                                        jsx_runtime_1.jsx(layout_1.Spacing, { x: controlSize === 'compact' ? 0.75 : 1 }), jsx_runtime_1.jsx("span", { style: {
+                                                ...(controlSize === 'compact' ? compactLabel : label),
+                                                color: mainForegroundColor,
+                                            }, children: renderLabel })
+                                    ] })) : null] }) }), jsx_runtime_1.jsx("button", { ref: dropdownRef, type: "button", style: {
+                            ...(controlSize === 'compact'
+                                ? compactDropdownTriggerStyle
+                                : dropdownTriggerStyle),
+                            backgroundColor: dropdownSegmentBackground,
+                            color: dropdownForegroundColor,
+                        }, className: is_menu_item_1.MENU_INITIATOR_CLASSNAME, onPointerDown: onPointerDown, onClick: onClickDropdown, children: jsx_runtime_1.jsx(caret_1.CaretDown, { color: dropdownForegroundColor }) })
                 ] }), portalStyle
                 ? react_dom_1.default.createPortal(jsx_runtime_1.jsx("div", { style: styles_1.fullScreenOverlay, children: jsx_runtime_1.jsx("div", { style: styles_1.outerPortal, className: "css-reset", children: jsx_runtime_1.jsx(z_index_1.HigherZIndex, { onOutsideClick: onHideDropdown, onEscape: onHideDropdown, children: jsx_runtime_1.jsx("div", { style: portalStyle, onPointerDown: onMenuPointerDown, children: jsx_runtime_1.jsx(MenuContent_1.MenuContent, { onNextMenu: () => { }, onPreviousMenu: () => { }, values: dropdownValues, onHide: onHideDropdown, leaveLeftSpace: false, preselectIndex: dropdownValues.findIndex((v) => v.id === renderType), topItemCanBeUnselected: false, fixedHeight: derivedMaxHeight }) }) }) }) }), (0, portals_1.getPortal)(currentZIndex))
                 : null] }));
 };
-exports.RenderButton = RenderButton;
+exports.RenderButton = react_1.default.memo(RenderButtonInner);

package/dist/components/RenderModal/RenderStatusModal.js

@@ -41,7 +41,7 @@ const buttonRow = {
     justifyContent: 'flex-end',
 };
 const RenderStatusModal = ({ jobId, }) => {
-    const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
+    const { setSelectedModal } = (0, react_1.useContext)(modals_1.SetSelectedModalContext);
     const { jobs, removeClientJob, cancelClientJob } = (0, react_1.useContext)(context_1.RenderQueueContext);
     const job = jobs.find((j) => j.id === jobId);
     if (!job) {

package/dist/components/RenderModal/ServerRenderModal.js

@@ -67,7 +67,7 @@ const reducer = (state, action) => {
     return state;
 };
 const RenderModal = ({ readOnlyStudio, initialFrame, initialVideoImageFormat, initialStillImageFormat, initialJpegQuality, initialScale, initialLogLevel, initialConcurrency, maxConcurrency, minConcurrency, initialMuted, initialEnforceAudioTrack, initialProResProfile, initialx264Preset, initialGopSize, initialPixelFormat, initialVideoBitrate, initialAudioBitrate, initialEveryNthFrame, initialNumberOfGifLoops, initialDelayRenderTimeout, initialOffthreadVideoCacheSizeInBytes, initialEnvVariables, initialDisableWebSecurity, initialGl, initialHeadless, initialIgnoreCertificateErrors, initialEncodingBufferSize, initialEncodingMaxRate, initialOffthreadVideoThreads, initialMediaCacheSizeInBytes, initialDarkMode, initialUserAgent, defaultProps, inFrameMark, outFrameMark, initialColorSpace, initialMultiProcessOnLinux, defaultConfigurationAudioCodec, defaultConfigurationVideoCodec, initialBeep, initialRepro, initialForSeamlessAacConcatenation, renderTypeOfLastRender, initialHardwareAcceleration, initialSampleRate, defaultMetadata, initialChromeMode, renderDefaults, }) => {
-    const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
+    const { setSelectedModal } = (0, react_1.useContext)(modals_1.SetSelectedModalContext);
     const context = (0, react_1.useContext)(ResolveCompositionBeforeModal_1.ResolvedCompositionContext);
     if (!context) {
         throw new Error('Should not be able to render without resolving comp first');

package/dist/components/RenderModal/WebRenderModal.js

@@ -82,7 +82,7 @@ const validateOutnameForStill = ({ outName, stillImageFormat, }) => {
 const WebRenderModal = ({ initialFrame, defaultProps, inFrameMark, outFrameMark, initialLogLevel, initialStillImageFormat, initialDefaultOutName, initialScale, initialDelayRenderTimeout, initialMediaCacheSizeInBytes, initialContainer, initialVideoCodec, initialAudioCodec, initialAudioBitrate, initialVideoBitrate, initialHardwareAcceleration, initialKeyframeIntervalInSeconds, initialTransparent, initialMuted, initialPageResponsiveness, }) => {
     var _a;
     const context = (0, react_1.useContext)(ResolveCompositionBeforeModal_1.ResolvedCompositionContext);
-    const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
+    const { setSelectedModal } = (0, react_1.useContext)(modals_1.SetSelectedModalContext);
     const { setSidebarCollapsedState } = (0, react_1.useContext)(sidebar_1.SidebarContext);
     const { addClientStillJob, addClientVideoJob } = (0, react_1.useContext)(context_1.RenderQueueContext);
     if (!context) {
@@ -415,7 +415,8 @@ const WebRenderModal = ({ initialFrame, defaultProps, inFrameMark, outFrameMark,
                         ] })
                 ] }), jsx_runtime_1.jsxs("div", { style: render_modals_1.horizontalLayout, children: [
                     jsx_runtime_1.jsxs("div", { style: render_modals_1.leftSidebar, children: [jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'general', onClick: () => setTab('general'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(file_1.FileIcon, { color: color, style: render_modals_1.icon }) })), children: "General" }), jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'data', onClick: () => setTab('data'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(input_props_1.InputPropsIcon, { color: color, style: render_modals_1.icon }) })), children: "Input Props" }), renderMode !== 'audio' ? (jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'picture', onClick: () => setTab('picture'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(frame_1.PicIcon, { color: color, style: render_modals_1.icon }) })), children: "Picture" })) : null, renderMode === 'video' || renderMode === 'audio' ? (jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'audio', onClick: () => setTab('audio'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(audio_1.AudioIcon, { color: color, style: render_modals_1.icon }) })), children: "Audio" })) : null, jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'advanced', onClick: () => setTab('advanced'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(gear_1.GearIcon, { color: color, style: render_modals_1.icon }) })), children: "Other" }), jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: false, onClick: () => setSelectedModal({
-                                    type: 'configure-license',
+                                    type: 'settings',
+                                    initialTab: 'license',
                                     initialPublicLicenseKey: publicLicenseKey,
                                 }), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(certificate_1.CertificateIcon, { color: color, style: render_modals_1.icon }) })), children: "License" })] }), jsx_runtime_1.jsx("div", { style: render_modals_1.optionsPanel, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: tab === 'general' ? (jsx_runtime_1.jsx(WebRenderModalBasic_1.WebRenderModalBasic, { renderMode: renderMode, resolvedComposition: resolvedComposition, imageFormat: imageFormat, setStillFormat: setStillFormat, frame: frame, onFrameChanged: onFrameChanged, onFrameSetDirectly: onFrameSetDirectly, container: container, setContainerFormat: setContainerFormat, setCodec: setCodecWithContainer, encodableVideoCodecs: encodableVideoCodecs, effectiveVideoCodec: effectiveVideoCodec, startFrame: finalStartFrame, setStartFrame: setStartFrame, endFrame: finalEndFrame, setEndFrame: setEndFrame, outName: outName, onOutNameChange: onOutNameChange, validationMessage: outnameValidation.valid ? null : outnameValidation.error.message, logLevel: logLevel, setLogLevel: setLogLevel })) : tab === 'data' ? (jsx_runtime_1.jsx(DataEditor_1.DataEditor, { defaultProps: inputProps, setDefaultProps: setInputProps, unresolvedComposition: unresolvedComposition, propsEditType: "input-props", canSaveDefaultProps: {
                                 canUpdate: false,

package/dist/components/RenderQueue/RenderQueueError.js

@@ -10,7 +10,7 @@ const outputLocation = {
     ...item_style_1.renderQueueItemSubtitleStyle,
 };
 const RenderQueueError = ({ job }) => {
-    const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
+    const { setSelectedModal } = (0, react_1.useContext)(modals_1.SetSelectedModalContext);
     const { tabIndex } = (0, z_index_1.useZIndex)();
     const onClick = (0, react_1.useCallback)(() => {
         setSelectedModal({

package/dist/components/RenderQueue/RenderQueueItemStatus.js

@@ -52,7 +52,7 @@ const invisibleStyle = {
     display: 'flex',
 };
 const RenderQueueItemStatus = ({ job }) => {
-    const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
+    const { setSelectedModal } = (0, react_1.useContext)(modals_1.SetSelectedModalContext);
     const [hovered, setHovered] = react_1.default.useState(false);
     const isClientJob = (0, context_1.isClientRenderJob)(job);
     const onPointerEnter = (0, react_1.useCallback)(() => {

package/dist/components/RenderQueue/RenderQueueProgressMessage.js

@@ -15,7 +15,7 @@ const RenderQueueProgressMessage = ({ job }) => {
     if (job.status !== 'running') {
         throw new Error('should not have rendered this component');
     }
-    const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
+    const { setSelectedModal } = (0, react_1.useContext)(modals_1.SetSelectedModalContext);
     const { tabIndex } = (0, z_index_1.useZIndex)();
     const isClientJob = (0, context_1.isClientRenderJob)(job);
     const onClick = (0, react_1.useCallback)(() => {

package/dist/components/RenderQueue/RenderQueueRepeat.js

@@ -9,7 +9,7 @@ const modals_1 = require("../../state/modals");
 const InlineAction_1 = require("../InlineAction");
 const context_1 = require("./context");
 const RenderQueueRepeatItem = ({ job }) => {
-    const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
+    const { setSelectedModal } = (0, react_1.useContext)(modals_1.SetSelectedModalContext);
     const isClientJob = (0, context_1.isClientRenderJob)(job);
     const onClick = (0, react_1.useCallback)((e) => {
         e.stopPropagation();

package/dist/components/SelectedOutlineElement.js

@@ -73,7 +73,6 @@ const timeline_translate_utils_1 = require("./Timeline/timeline-translate-utils"
 const get_stack_1 = require("./Timeline/TimelineStack/get-stack");
 const transform_origin_utils_1 = require("./Timeline/transform-origin-utils");
 const use_select_asset_1 = require("./use-select-asset");
-const emptyContextMenuValues = [];
 const SelectedOutlineTransformOriginHandle = ({ outline, onDraggingChange, target }) => {
     var _a, _b;
     const { setDragOverrides, clearDragOverrides, setPropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
@@ -305,7 +304,7 @@ const SelectedOutlineTransformOriginHandle = ({ outline, onDraggingChange, targe
         ] }));
 };
 exports.SelectedOutlineTransformOriginHandle = SelectedOutlineTransformOriginHandle;
-const SelectedOutlinePolygon = ({ allDragTargets, allDragOutlines, contextMenuValues, dragging, hovered, onContextMenuOpen, outline, onDraggingChange, onHoverChange, onSnapPointsChange, onSelect, onDoubleClickTarget, scale, snapTargets, target, }) => {
+const SelectedOutlinePolygon = ({ allDragTargets, allDragOutlines, dragging, hovered, onContextMenuOpen, outline, onDraggingChange, onHoverChange, onSnapPointsChange, onSelect, onDoubleClickTarget, scale, snapTargets, target, }) => {
     var _a, _b, _c, _d;
     const { getDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeDragOverridesContext);
     const { setPropStatuses, setDragOverrides, clearDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
@@ -566,10 +565,10 @@ const SelectedOutlinePolygon = ({ allDragTargets, allDragOutlines, contextMenuVa
                     if (!dragging) {
                         onHoverChange(null);
                     }
-                }, onPointerDown: onPointerDown, onDoubleClick: onDoubleClick, onDragOver: effectDrop === null ? undefined : onEffectDragOver, onDragLeave: effectDrop === null ? undefined : onEffectDragLeave, onDrop: effectDrop === null ? undefined : onEffectDrop }), jsx_runtime_1.jsx(ContextMenu_1.ContextMenuForTarget, { triggerRef: polygonRef, values: [...contextMenuValues], onOpen: onContextMenuOpen })
+                }, onPointerDown: onPointerDown, onDoubleClick: onDoubleClick, onDragOver: effectDrop === null ? undefined : onEffectDragOver, onDragLeave: effectDrop === null ? undefined : onEffectDragLeave, onDrop: effectDrop === null ? undefined : onEffectDrop }), jsx_runtime_1.jsx(ContextMenu_1.ContextMenuForTarget, { triggerRef: polygonRef, getItems: onContextMenuOpen })
         ] }));
 };
-const SelectedOutlineScaleEdgeLine = ({ allScaleDragTargets, contextMenuValues, dragging, edge, outline, onDraggingChange, onContextMenuOpen, onHoverChange, onSelect, target, }) => {
+const SelectedOutlineScaleEdgeLine = ({ allScaleDragTargets, dragging, edge, outline, onDraggingChange, onContextMenuOpen, onHoverChange, onSelect, target, }) => {
     var _a, _b;
     const { getDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeDragOverridesContext);
     const { setPropStatuses, setDragOverrides, clearDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
@@ -725,7 +724,7 @@ const SelectedOutlineScaleEdgeLine = ({ allScaleDragTargets, contextMenuValues,
                     if (!dragging) {
                         onHoverChange(null);
                     }
-                }, onPointerDown: onPointerDown }), jsx_runtime_1.jsx(ContextMenu_1.ContextMenuForTarget, { triggerRef: lineRef, values: [...contextMenuValues], onOpen: onContextMenuOpen })
+                }, onPointerDown: onPointerDown }), jsx_runtime_1.jsx(ContextMenu_1.ContextMenuForTarget, { triggerRef: lineRef, getItems: onContextMenuOpen })
         ] }));
 };
 const svgPointToClientPoint = (point, rect) => {
@@ -734,7 +733,7 @@ const svgPointToClientPoint = (point, rect) => {
         y: point.y + rect.top,
     };
 };
-const SelectedOutlineRotationCornerHandle = ({ allRotationDragTargets, contextMenuValues, corner, dragging, outline, onDraggingChange, onContextMenuOpen, onHoverChange, onSelect, target, }) => {
+const SelectedOutlineRotationCornerHandle = ({ allRotationDragTargets, corner, dragging, outline, onDraggingChange, onContextMenuOpen, onHoverChange, onSelect, target, }) => {
     var _a, _b;
     const { getDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeDragOverridesContext);
     const { setPropStatuses, setDragOverrides, clearDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
@@ -946,7 +945,7 @@ const SelectedOutlineRotationCornerHandle = ({ allRotationDragTargets, contextMe
                     if (!dragging) {
                         onHoverChange(null);
                     }
-                }, onPointerDown: onPointerDown }), jsx_runtime_1.jsx(ContextMenu_1.ContextMenuForTarget, { triggerRef: circleRef, values: [...contextMenuValues], onOpen: onContextMenuOpen })
+                }, onPointerDown: onPointerDown }), jsx_runtime_1.jsx(ContextMenu_1.ContextMenuForTarget, { triggerRef: circleRef, getItems: onContextMenuOpen })
         ] }));
 };
 const SelectedOutlineElement = ({ allDragTargets, allDragOutlines, allRotationDragTargets, allScaleDragTargets, dragging, hovered, outline, onDraggingChange, onHoverChange, onSnapPointsChange, onSelect, scale, snapTargets, target, }) => {
@@ -957,7 +956,7 @@ const SelectedOutlineElement = ({ allDragTargets, allDragOutlines, allRotationDr
     const selectAsset = (0, use_select_asset_1.useSelectAsset)();
     const selectComposition = (0, InitialCompositionLoader_1.useSelectComposition)();
     const { compositions } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
-    const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
+    const { setSelectedModal } = (0, react_1.useContext)(modals_1.SetSelectedModalContext);
     const resolveOriginalLocation = react_1.default.useCallback(async (resolveTarget) => {
         const stack = resolveTarget.sequence.getStack();
         if (!stack) {
@@ -1179,10 +1178,10 @@ const SelectedOutlineElement = ({ allDragTargets, allDragOutlines, allRotationDr
         target,
     ]);
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-            jsx_runtime_1.jsx(SelectedOutlinePolygon, { allDragTargets: allDragTargets, allDragOutlines: allDragOutlines, contextMenuValues: emptyContextMenuValues, dragging: dragging, hovered: hovered, outline: outline, onContextMenuOpen: onContextMenuOpen, onDraggingChange: onDraggingChange, onHoverChange: onHoverChange, onSnapPointsChange: onSnapPointsChange, onSelect: onSelect, onDoubleClickTarget: onDoubleClickTarget, scale: scale, snapTargets: snapTargets, target: target }), jsx_runtime_1.jsx(SelectedOutlineCropControls_1.SelectedOutlineCropControls, { outline: outline, onDraggingChange: onDraggingChange, target: target }), (target === null || target === void 0 ? void 0 : target.cropDrag) === null && (target.containsSelection || hovered)
-                ? ['top', 'right', 'bottom', 'left'].map((edge) => (jsx_runtime_1.jsx(SelectedOutlineScaleEdgeLine, { allScaleDragTargets: allScaleDragTargets, contextMenuValues: emptyContextMenuValues, dragging: dragging, edge: edge, outline: outline, onContextMenuOpen: onContextMenuOpen, onDraggingChange: onDraggingChange, onHoverChange: onHoverChange, onSelect: onSelect, target: target }, edge)))
+            jsx_runtime_1.jsx(SelectedOutlinePolygon, { allDragTargets: allDragTargets, allDragOutlines: allDragOutlines, dragging: dragging, hovered: hovered, outline: outline, onContextMenuOpen: onContextMenuOpen, onDraggingChange: onDraggingChange, onHoverChange: onHoverChange, onSnapPointsChange: onSnapPointsChange, onSelect: onSelect, onDoubleClickTarget: onDoubleClickTarget, scale: scale, snapTargets: snapTargets, target: target }), jsx_runtime_1.jsx(SelectedOutlineCropControls_1.SelectedOutlineCropControls, { outline: outline, onDraggingChange: onDraggingChange, target: target }), (target === null || target === void 0 ? void 0 : target.cropDrag) === null && (target.containsSelection || hovered)
+                ? ['top', 'right', 'bottom', 'left'].map((edge) => (jsx_runtime_1.jsx(SelectedOutlineScaleEdgeLine, { allScaleDragTargets: allScaleDragTargets, dragging: dragging, edge: edge, outline: outline, onContextMenuOpen: onContextMenuOpen, onDraggingChange: onDraggingChange, onHoverChange: onHoverChange, onSelect: onSelect, target: target }, edge)))
                 : null, (target === null || target === void 0 ? void 0 : target.cropDrag) === null && (target.containsSelection || hovered)
-                ? ['top-left', 'top-right', 'bottom-right', 'bottom-left'].map((corner) => (jsx_runtime_1.jsx(SelectedOutlineRotationCornerHandle, { allRotationDragTargets: allRotationDragTargets, contextMenuValues: emptyContextMenuValues, corner: corner, dragging: dragging, outline: outline, onContextMenuOpen: onContextMenuOpen, onDraggingChange: onDraggingChange, onHoverChange: onHoverChange, onSelect: onSelect, target: target }, corner)))
+                ? ['top-left', 'top-right', 'bottom-right', 'bottom-left'].map((corner) => (jsx_runtime_1.jsx(SelectedOutlineRotationCornerHandle, { allRotationDragTargets: allRotationDragTargets, corner: corner, dragging: dragging, outline: outline, onContextMenuOpen: onContextMenuOpen, onDraggingChange: onDraggingChange, onHoverChange: onHoverChange, onSelect: onSelect, target: target }, corner)))
                 : null] }));
 };
 exports.SelectedOutlineElement = SelectedOutlineElement;