@remotion/studio 4.0.505 → 4.0.506

package/dist/components/InspectorOpenInEditor.js

@@ -15,17 +15,21 @@ const NotificationCenter_1 = require("./Notifications/NotificationCenter");
 const use_default_editor_info_1 = require("./use-default-editor-info");
 const splitButton = {
     alignItems: 'center',
+    borderRadius: 3,
     display: 'inline-flex',
     flexDirection: 'row',
     flexShrink: 0,
+    gap: 1,
     height: 24,
+    overflow: 'hidden',
 };
 const mainButtonBase = {
     alignItems: 'center',
     background: colors_1.TRANSPARENT,
     border: 'none',
-    borderRadius: 3,
+    borderRadius: '3px 0 0 3px',
     color: colors_1.LIGHT_TEXT,
+    columnGap: 4,
     display: 'inline-flex',
     fontFamily: 'sans-serif',
     fontSize: 11,
@@ -42,12 +46,13 @@ const menuLabel = {
 };
 const editorButtonIconSize = 18;
 const editorMenuIconSize = 18;
-const InspectorOpenInEditor = ({ location }) => {
+const InspectorOpenInEditor = ({ label, location }) => {
     var _a;
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
-    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 [hovered, setHovered] = (0, react_1.useState)(false);
+    const [dropdownOpened, setDropdownOpened] = (0, react_1.useState)(false);
     const editorPickerAvailable = (0, use_default_editor_info_1.canUseEditorPicker)(previewServerState.type === 'connected');
     const editorInfo = (0, use_default_editor_info_1.useDefaultEditorInfo)(editorPickerAvailable);
     const openWithEditor = (0, react_1.useCallback)(async (editorId) => {
@@ -68,18 +73,30 @@ const InspectorOpenInEditor = ({ location }) => {
         event.stopPropagation();
         openWithEditor(null).catch(() => undefined);
     }, [openWithEditor]);
+    const mainHovered = hovered && !dropdownOpened;
     const mainButtonStyle = (0, react_1.useMemo)(() => {
         return {
             ...mainButtonBase,
             background: (0, colors_1.getBackgroundFromHoverState)({
-                hovered,
+                hovered: mainHovered,
                 selected: false,
             }),
-            color: hovered ? colors_1.WHITE : colors_1.LIGHT_TEXT,
+            color: mainHovered ? colors_1.WHITE : colors_1.LIGHT_TEXT,
             opacity: canOpenDefault ? 1 : 0.5,
             pointerEvents: canOpenDefault ? 'auto' : 'none',
         };
-    }, [canOpenDefault, hovered]);
+    }, [canOpenDefault, mainHovered]);
+    const dropdownForegroundColor = hovered || dropdownOpened ? colors_1.WHITE : colors_1.LIGHT_TEXT;
+    const dropdownStyle = (0, react_1.useMemo)(() => {
+        return {
+            background: (0, colors_1.getBackgroundFromHoverState)({
+                hovered,
+                selected: dropdownOpened,
+            }),
+            borderRadius: '0 3px 3px 0',
+            color: dropdownForegroundColor,
+        };
+    }, [dropdownForegroundColor, dropdownOpened, hovered]);
     const renderDropdownAction = (0, react_1.useCallback)((color) => {
         return jsx_runtime_1.jsx(caret_1.CaretDown, { color: color, small: true });
     }, []);
@@ -110,7 +127,13 @@ const InspectorOpenInEditor = ({ location }) => {
                 label: jsx_runtime_1.jsx("span", { style: menuLabel, children: "Set default editor..." }),
                 leftItem: null,
                 onClick: () => {
-                    setSelectedModal({ type: 'configure-default-editor' });
+                    var _a;
+                    var _b;
+                    setSelectedModal({
+                        type: 'settings',
+                        initialTab: 'apps',
+                        initialPublicLicenseKey: (_b = (_a = window.remotion_renderDefaults) === null || _a === void 0 ? void 0 : _a.publicLicenseKey) !== null && _b !== void 0 ? _b : null,
+                    });
                 },
                 quickSwitcherLabel: null,
                 subMenu: null,
@@ -128,8 +151,9 @@ const InspectorOpenInEditor = ({ location }) => {
     if (!editorPickerAvailable) {
         return null;
     }
-    return (jsx_runtime_1.jsxs("div", { style: splitButton, children: [
-            jsx_runtime_1.jsx("button", { "aria-label": `Open in ${editorName}`, disabled: !canOpenDefault, onClick: onOpenDefault, onPointerEnter: () => setHovered(true), onPointerLeave: () => setHovered(false), style: mainButtonStyle, tabIndex: tabIndex, title: `Open in ${editorName}`, type: "button", children: jsx_runtime_1.jsx(editor_1.EditorIcon, { editorId: preferredEditorId, size: editorButtonIconSize }) }), jsx_runtime_1.jsx(InlineDropdown_1.InlineDropdown, { renderAction: renderDropdownAction, title: "Open in another editor", values: menuItems, variant: "compact" })
+    return (jsx_runtime_1.jsxs("div", { style: splitButton, onPointerEnter: () => setHovered(true), onPointerLeave: () => setHovered(false), children: [
+            jsx_runtime_1.jsxs("button", { "aria-label": `Open in ${editorName}`, disabled: !canOpenDefault, onClick: onOpenDefault, style: mainButtonStyle, tabIndex: tabIndex, title: `Open in ${editorName}`, type: "button", children: [label, jsx_runtime_1.jsx(editor_1.EditorIcon, { editorId: preferredEditorId, size: editorButtonIconSize })
+                ] }), jsx_runtime_1.jsx(InlineDropdown_1.InlineDropdown, { onOpenChange: setDropdownOpened, renderAction: renderDropdownAction, style: dropdownStyle, title: "Open in another editor", unhoveredColor: dropdownForegroundColor, values: menuItems, variant: "compact" })
         ] }));
 };
 exports.InspectorOpenInEditor = InspectorOpenInEditor;

package/dist/components/InspectorPanel/AlignmentControls.js

@@ -6,6 +6,7 @@ const react_1 = require("react");
 const remotion_1 = require("remotion");
 const client_id_1 = require("../../helpers/client-id");
 const interactivity_enabled_1 = require("../../helpers/interactivity-enabled");
+const use_runtime_values_1 = require("../../helpers/use-runtime-values");
 const align_bottom_1 = require("../../icons/align-bottom");
 const align_center_horizontal_1 = require("../../icons/align-center-horizontal");
 const align_center_vertical_1 = require("../../icons/align-center-vertical");
@@ -48,6 +49,7 @@ const AlignmentButton = ({ onClick, title, Icon, disabled }) => {
 };
 const AlignmentControls = ({ track }) => {
     var _a;
+    const runtimeValues = (0, use_runtime_values_1.useRuntimeValues)(track.sequence.controls);
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const { propStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesContext);
     const { getDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeDragOverridesContext);
@@ -79,7 +81,7 @@ const AlignmentControls = ({ track }) => {
         const dragOverrides = (_b = getDragOverrides(nodePath)) !== null && _b !== void 0 ? _b : {};
         const activeSchema = (0, selected_outline_drag_1.getSelectedOutlineActiveSchema)({
             schema: track.sequence.controls.schema,
-            currentRuntimeValueDotNotation: track.sequence.controls.currentRuntimeValueDotNotation,
+            currentRuntimeValueDotNotation: runtimeValues,
             dragOverrides,
             propStatus: nodePropStatuses,
             frame: sourceFrame,
@@ -176,6 +178,7 @@ const AlignmentControls = ({ track }) => {
         currentCompositionMetadata,
         timelinePosition,
         propStatuses,
+        runtimeValues,
         getDragOverrides,
         setPropStatuses,
     ]);
@@ -192,7 +195,7 @@ const AlignmentControls = ({ track }) => {
     const renderDragOverrides = (_a = getDragOverrides(renderNodePath)) !== null && _a !== void 0 ? _a : {};
     const renderActiveSchema = (0, selected_outline_drag_1.getSelectedOutlineActiveSchema)({
         schema: track.sequence.controls.schema,
-        currentRuntimeValueDotNotation: track.sequence.controls.currentRuntimeValueDotNotation,
+        currentRuntimeValueDotNotation: runtimeValues,
         dragOverrides: renderDragOverrides,
         propStatus: renderNodePropStatuses,
         frame: renderSourceFrame,

package/dist/components/InspectorPanel/CompositionInspector.js

@@ -4,6 +4,7 @@ exports.CompositionInspector = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const interactivity_enabled_1 = require("../../helpers/interactivity-enabled");
+const browse_elements_1 = require("../../icons/browse-elements");
 const frame_1 = require("../../icons/frame");
 const solid_1 = require("../../icons/solid");
 const video_1 = require("../../icons/video");
@@ -26,13 +27,26 @@ const actionIconStyle = {
     height: 18,
     width: 18,
 };
+const browseElementsIconStyle = {
+    height: 22,
+    width: 22,
+};
+const browseElementsIconContainerStyle = {
+    height: 22,
+    marginLeft: -2,
+    marginRight: -2,
+    width: 22,
+};
 const CompositionActions = ({ readOnlyStudio }) => {
     const { canInsertAsset, canInsertComposition, canInsertSolid, canShowInsertAsset, canShowInsertComposition, canShowInsertSolid, insertAsset, insertComposition, insertSolid, } = (0, use_composition_actions_1.useCompositionActions)();
+    const openElementsLibrary = (0, react_1.useCallback)(() => {
+        window.open('https://www.remotion.dev/elements', '_blank', 'noopener,noreferrer');
+    }, []);
     if ((readOnlyStudio && !canShowInsertSolid) ||
         (!canShowInsertAsset && !canShowInsertComposition && !canShowInsertSolid)) {
         return null;
     }
-    return (jsx_runtime_1.jsxs(common_1.InspectorActionSection, { children: [canShowInsertSolid ? (jsx_runtime_1.jsx(common_1.InspectorInlineAction, { disabled: !canInsertSolid, onClick: insertSolid, renderIcon: (color) => (jsx_runtime_1.jsx(solid_1.SolidIcon, { color: color, style: actionIconStyle })), children: "Add Solid" })) : null, canShowInsertAsset ? (jsx_runtime_1.jsx(common_1.InspectorInlineAction, { disabled: !canInsertAsset, onClick: insertAsset, renderIcon: (color) => (jsx_runtime_1.jsx(frame_1.PicIcon, { color: color, style: actionIconStyle })), children: "Add asset..." })) : null, canShowInsertComposition ? (jsx_runtime_1.jsx(common_1.InspectorInlineAction, { disabled: !canInsertComposition, onClick: insertComposition, renderIcon: (color) => (jsx_runtime_1.jsx(video_1.FilmIcon, { color: color, style: actionIconStyle })), children: "Add composition..." })) : null] }));
+    return (jsx_runtime_1.jsxs(common_1.InspectorActionSection, { children: [canShowInsertSolid ? (jsx_runtime_1.jsx(common_1.InspectorInlineAction, { disabled: !canInsertSolid, onClick: insertSolid, renderIcon: (color) => (jsx_runtime_1.jsx(solid_1.SolidIcon, { color: color, style: actionIconStyle })), children: "Add Solid" })) : null, canShowInsertAsset ? (jsx_runtime_1.jsx(common_1.InspectorInlineAction, { disabled: !canInsertAsset, onClick: insertAsset, renderIcon: (color) => (jsx_runtime_1.jsx(frame_1.PicIcon, { color: color, style: actionIconStyle })), children: "Add asset..." })) : null, canShowInsertComposition ? (jsx_runtime_1.jsx(common_1.InspectorInlineAction, { disabled: !canInsertComposition, onClick: insertComposition, renderIcon: (color) => (jsx_runtime_1.jsx(video_1.FilmIcon, { color: color, style: actionIconStyle })), children: "Add composition..." })) : null, canShowInsertAsset ? (jsx_runtime_1.jsx(common_1.InspectorInlineAction, { disabled: false, iconContainerStyle: browseElementsIconContainerStyle, onClick: openElementsLibrary, renderIcon: (color) => (jsx_runtime_1.jsx(browse_elements_1.BrowseElementsIcon, { color: color, style: browseElementsIconStyle })), title: "Open the Remotion Elements library in a new tab. Install an Element there to send it to this composition.", children: "Browse Elements..." })) : null] }));
 };
 const CompositionDefaultPropsSection = ({ composition, currentDefaultProps, readOnlyStudio, setDefaultProps }) => {
     var _a;

package/dist/components/InspectorPanel/ConnectedCompositionsSection.js

@@ -40,7 +40,7 @@ const ConnectedCompositionsSection = ({ connectedCompositions }) => {
 exports.ConnectedCompositionsSection = ConnectedCompositionsSection;
 const ConnectedCompositionRow = ({ composition }) => {
     const selectComposition = (0, InitialCompositionLoader_1.useSelectComposition)();
-    const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
+    const { setSelectedModal } = (0, react_1.useContext)(modals_1.SetSelectedModalContext);
     const connectionStatus = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx)
         .previewServerState.type;
     const resolvedLocation = (0, use_resolved_stack_1.useResolvedStack)(composition.stack);

package/dist/components/InspectorPanel/EasingInspector.js

@@ -6,6 +6,7 @@ const react_1 = require("react");
 const remotion_1 = require("remotion");
 const client_id_1 = require("../../helpers/client-id");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
+const use_runtime_values_1 = require("../../helpers/use-runtime-values");
 const plus_1 = require("../../icons/plus");
 const render_frame_1 = require("../../state/render-frame");
 const is_menu_item_1 = require("../Menu/is-menu-item");
@@ -26,8 +27,9 @@ const addKeyframeIcon = {
     width: 18,
 };
 const EasingInspector = ({ selection }) => {
-    var _a, _b;
+    var _a, _b, _c;
     const track = (0, use_track_for_selection_1.useTrackForSelection)(selection);
+    const runtimeValues = (0, use_runtime_values_1.useRuntimeValues)((_a = track === null || track === void 0 ? void 0 : track.sequence.controls) !== null && _a !== void 0 ? _a : null);
     const videoConfig = (0, remotion_1.useVideoConfig)();
     const timelinePosition = remotion_1.Internals.Timeline.useTimelinePosition();
     const { sequences } = (0, react_1.useContext)(remotion_1.Internals.SequenceManager);
@@ -44,7 +46,7 @@ const EasingInspector = ({ selection }) => {
         overrideIdsToNodePaths: overrideIdToNodePathMappings,
         propStatuses,
     }), [overrideIdToNodePathMappings, propStatuses, selection, sequences]);
-    const initialEasing = (_a = easingUpdate === null || easingUpdate === void 0 ? void 0 : easingUpdate.currentEasing) !== null && _a !== void 0 ? _a : null;
+    const initialEasing = (_b = easingUpdate === null || easingUpdate === void 0 ? void 0 : easingUpdate.currentEasing) !== null && _b !== void 0 ? _b : null;
     const easingDetails = (0, react_1.useMemo)(() => {
         var _a, _b, _c, _d, _e, _f, _g;
         if (easingUpdate === null || track === null) {
@@ -61,7 +63,7 @@ const EasingInspector = ({ selection }) => {
             }
             const sequenceFields = (0, timeline_layout_1.getFieldsToShow)({
                 schema: track.sequence.controls.schema,
-                currentRuntimeValueDotNotation: track.sequence.controls.currentRuntimeValueDotNotation,
+                currentRuntimeValueDotNotation: runtimeValues,
                 getDragOverrides,
                 propStatuses,
                 nodePath: easingUpdate.nodePath,
@@ -100,9 +102,10 @@ const EasingInspector = ({ selection }) => {
         getDragOverrides,
         getEffectDragOverrides,
         propStatuses,
+        runtimeValues,
         track,
     ]);
-    const fieldLabel = (_b = easingDetails === null || easingDetails === void 0 ? void 0 : easingDetails.fieldLabel) !== null && _b !== void 0 ? _b : null;
+    const fieldLabel = (_c = easingDetails === null || easingDetails === void 0 ? void 0 : easingDetails.fieldLabel) !== null && _c !== void 0 ? _c : null;
     const currentEasingSelection = (0, react_1.useMemo)(() => {
         if (easingUpdate === null || track === null) {
             return null;

package/dist/components/InspectorPanel/KeyframeInspector.js

@@ -7,6 +7,7 @@ const react_1 = require("react");
 const remotion_1 = require("remotion");
 const client_id_1 = require("../../helpers/client-id");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
+const use_runtime_values_1 = require("../../helpers/use-runtime-values");
 const is_menu_item_1 = require("../Menu/is-menu-item");
 const InputDragger_1 = require("../NewComposition/InputDragger");
 const call_delete_keyframe_1 = require("../Timeline/call-delete-keyframe");
@@ -53,7 +54,9 @@ const TrashIcon = ({ color }) => {
     return (jsx_runtime_1.jsx("svg", { viewBox: "0 0 448 512", style: removeKeyframeIcon, children: jsx_runtime_1.jsx("path", { fill: color, d: "M160.5 27.4c2-6.8 8.3-11.4 15.3-11.4l96.4 0c7.1 0 13.3 4.6 15.3 11.4l11 36.6-149 0 11-36.6zM116.1 64L16 64C7.2 64 0 71.2 0 80S7.2 96 16 96l416 0c8.8 0 16-7.2 16-16s-7.2-16-16-16l-100.1 0-13.7-45.8C312.1-2.1 293.4-16 272.2-16l-96.4 0c-21.2 0-39.9 13.9-46 34.2L116.1 64zM28.7 144L51.6 452.7c2.5 33.4 30.3 59.3 63.8 59.3l217.1 0c33.5 0 61.3-25.9 63.8-59.3l22.9-308.7-32.1 0-22.7 306.4c-1.2 16.7-15.2 29.6-31.9 29.6l-217.1 0c-16.8 0-30.7-12.9-31.9-29.6L60.8 144 28.7 144z" }) }));
 };
 const KeyframeInspector = ({ selection }) => {
+    var _a;
     const track = (0, use_track_for_selection_1.useTrackForSelection)(selection);
+    const runtimeValues = (0, use_runtime_values_1.useRuntimeValues)((_a = track === null || track === void 0 ? void 0 : track.sequence.controls) !== null && _a !== void 0 ? _a : null);
     const videoConfig = (0, remotion_1.useVideoConfig)();
     const { propStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesContext);
     const { clearDragOverrides, clearEffectDragOverrides, setDragOverrides, setEffectDragOverrides, setPropStatuses, } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
@@ -81,7 +84,7 @@ const KeyframeInspector = ({ selection }) => {
         if (keyframeField.type === 'sequence') {
             const sequenceFields = (0, timeline_layout_1.getFieldsToShow)({
                 schema: track.sequence.controls.schema,
-                currentRuntimeValueDotNotation: track.sequence.controls.currentRuntimeValueDotNotation,
+                currentRuntimeValueDotNotation: runtimeValues,
                 getDragOverrides,
                 propStatuses,
                 nodePath,
@@ -148,6 +151,7 @@ const KeyframeInspector = ({ selection }) => {
         getDragOverrides,
         getEffectDragOverrides,
         propStatuses,
+        runtimeValues,
         selection,
         track,
     ]);

package/dist/components/InspectorPanel/common.d.ts

@@ -33,6 +33,7 @@ export type InspectorInlineActionSegment = {
 export type InspectorInlineActionProps = {
     readonly children: React.ReactNode;
     readonly disabled: boolean;
+    readonly iconContainerStyle?: React.CSSProperties;
     readonly onClick: React.MouseEventHandler<HTMLButtonElement> | null;
     readonly renderIcon?: (color: string) => React.ReactNode;
     readonly size?: 'default' | 'compact';

package/dist/components/InspectorPanel/common.js

@@ -115,7 +115,7 @@ const segmentedTrailingAction = {
     padding: 0,
     width: 28,
 };
-const InspectorInlineAction = ({ children, disabled, onClick, renderIcon, size = 'default', style, title, variant = { type: 'single' }, }) => {
+const InspectorInlineAction = ({ children, disabled, iconContainerStyle, onClick, renderIcon, size = 'default', style, title, variant = { type: 'single' }, }) => {
     const isSegmented = variant.type === 'segmented';
     // A non-clickable single action (onClick === null) never shows a hover
     // effect. In the segmented variant, the main segment highlights whenever
@@ -135,7 +135,7 @@ const InspectorInlineAction = ({ children, disabled, onClick, renderIcon, size =
         ...(isSegmented ? segmentedMainAction : null),
         ...style,
     }), [disabled, showsHover, isSegmented, size, style]);
-    const mainContent = (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [renderIcon ? (jsx_runtime_1.jsx("span", { style: inlineLabelIcon, children: renderIcon(colors_1.CURRENT_COLOR) })) : null, jsx_runtime_1.jsx("span", { style: inlineLabelText, children: children })
+    const mainContent = (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [renderIcon ? (jsx_runtime_1.jsx("span", { style: { ...inlineLabelIcon, ...iconContainerStyle }, children: renderIcon(colors_1.CURRENT_COLOR) })) : null, jsx_runtime_1.jsx("span", { style: inlineLabelText, children: children })
         ] }));
     const mainAction = onClick ? (jsx_runtime_1.jsx("button", { className: `__remotion-inspector-inline-action ${hoverable_1.HOVERABLE_CLASS_NAME}`, type: "button", disabled: disabled, style: buttonStyle, title: title, onClick: onClick, children: mainContent })) : (jsx_runtime_1.jsx("div", { className: hoverable_1.HOVERABLE_CLASS_NAME, style: buttonStyle, title: title, children: mainContent }));
     if (variant.type === 'segmented') {

package/dist/components/InspectorPanel/use-composition-actions.js

@@ -21,7 +21,7 @@ const useCompositionActions = () => {
     const [isAddingSolid, setIsAddingSolid] = (0, react_1.useState)(false);
     const [isAddingAsset, setIsAddingAsset] = (0, react_1.useState)(false);
     const [isAddingComposition, setIsAddingComposition] = (0, react_1.useState)(false);
-    const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
+    const { setSelectedModal } = (0, react_1.useContext)(modals_1.SetSelectedModalContext);
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const previewConnected = previewServerState.type === 'connected';
     const previewInteractive = previewConnected && (0, interactivity_enabled_1.isStudioInteractivityEnabled)();
@@ -121,6 +121,7 @@ const useCompositionActions = () => {
                 destinationDimensions: null,
                 dropPosition: null,
                 from: null,
+                preferCompositionStart: null,
                 svgImportMode: 'image',
             });
         }
@@ -145,6 +146,7 @@ const useCompositionActions = () => {
                 destinationDimensions: null,
                 dropPosition: null,
                 from: null,
+                preferCompositionStart: null,
             });
         }
         finally {
@@ -198,6 +200,7 @@ const useCompositionActions = () => {
                 compositionId: currentCompositionId,
                 dropPosition: null,
                 from: null,
+                preferCompositionStart: null,
             });
         }
         catch (error) {

package/dist/components/InspectorSequenceSection.js

@@ -230,7 +230,7 @@ const hasSequenceControls = (sequence) => {
 exports.hasSequenceControls = hasSequenceControls;
 const InspectorSequenceSection = ({ sequence, readOnlyStudio, validatedLocation, nodePathInfo, keyframeDisplayOffset, renderTransformControls, }) => {
     var _a;
-    const { tree, propStatuses } = (0, use_timeline_expanded_tree_1.useTimelineExpandedTree)({
+    const { tree, propStatuses, runtimeValues } = (0, use_timeline_expanded_tree_1.useTimelineExpandedTree)({
         sequence,
         nodePathInfo,
         includeTextContent: true,
@@ -242,9 +242,9 @@ const InspectorSequenceSection = ({ sequence, readOnlyStudio, validatedLocation,
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const { getDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeDragOverridesContext);
     const { setPropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
-    const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
+    const { setSelectedModal } = (0, react_1.useContext)(modals_1.SetSelectedModalContext);
     const selectAsset = (0, use_select_asset_1.useSelectAsset)();
-    const mediaSrc = (0, timeline_asset_link_1.getTimelineAssetSrcFromSchema)(sequence.controls);
+    const mediaSrc = (0, timeline_asset_link_1.getTimelineAssetSrcFromSchema)(sequence.controls, runtimeValues);
     const assetSelectionInitialQuery = (0, asset_search_1.getAssetSearchQueryForComponent)(sequence.controls.componentIdentity);
     const getSourceAction = (0, react_1.useCallback)((src) => {
         var _a;
@@ -412,7 +412,7 @@ const InspectorSequenceSection = ({ sequence, readOnlyStudio, validatedLocation,
     });
     const borderRadiusConversion = (0, border_radius_representation_1.getBorderRadiusConversion)(sequencePropStatuses, getDragOverrides(nodePathInfo.sequenceSubscriptionKey));
     const inlineCaptionValue = ((_a = schema.captions) === null || _a === void 0 ? void 0 : _a.type) === 'remotion-captions'
-        ? sequence.controls.currentRuntimeValueDotNotation.captions
+        ? runtimeValues.captions
         : null;
     const inlineCaptions = Array.isArray(inlineCaptionValue)
         ? inlineCaptionValue

package/dist/components/InstallPackage.js

@@ -73,7 +73,7 @@ const InstallPackageModal = ({ packageManager }) => {
         }
         setState({ type: 'installing' });
         try {
-            await (0, install_package_1.installPackages)(selectedPackages);
+            await (0, install_package_1.installPackages)(selectedPackages.map((name) => ({ name, version: null })));
             setState({ type: 'done' });
         }
         catch (err) {

package/dist/components/MenuBuildIndicator.js

@@ -15,6 +15,7 @@ const cwd = {
     alignItems: 'center',
     justifyContent: 'center',
     userSelect: 'none',
+    whiteSpace: 'nowrap',
 };
 const spinnerSize = 14;
 const spinner = {

package/dist/components/MenuToolbar.js

@@ -39,7 +39,7 @@ const flex = {
 const MenuToolbar = ({ readOnlyStudio }) => {
     const [selected, setSelected] = (0, react_1.useState)(null);
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
-    const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
+    const { setSelectedModal } = (0, react_1.useContext)(modals_1.SetSelectedModalContext);
     const browserStudioOperations = (0, browser_studio_operations_1.getBrowserStudioOperations)();
     const canUndoAndRedo = !readOnlyStudio ||
         (previewServerState.type === 'connected' &&

package/dist/components/ModalFooter.d.ts

@@ -2,4 +2,5 @@ import React from 'react';
 export declare const ModalFooterContainer: React.FC<{
     readonly children: React.ReactNode;
     readonly style?: React.CSSProperties;
+    readonly noBorder?: boolean;
 }>;

package/dist/components/ModalFooter.js

@@ -10,7 +10,11 @@ const content = {
     fontSize: 13,
     minWidth: 500,
 };
-const ModalFooterContainer = ({ children, style }) => {
-    return (jsx_runtime_1.jsx("div", { style: { ...content, ...style, borderTop: colors_1.BORDER_BLACK }, children: children }));
+const ModalFooterContainer = ({ children, noBorder, style }) => {
+    return (jsx_runtime_1.jsx("div", { style: {
+            ...content,
+            ...style,
+            borderTop: noBorder ? undefined : colors_1.BORDER_BLACK,
+        }, children: children }));
 };
 exports.ModalFooterContainer = ModalFooterContainer;

package/dist/components/ModalHeader.js

@@ -24,7 +24,7 @@ const icon = {
     width: 20,
 };
 const ModalHeader = ({ title, onClose }) => {
-    const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
+    const { setSelectedModal } = (0, react_1.useContext)(modals_1.SetSelectedModalContext);
     const onPress = (0, react_1.useCallback)(() => {
         setSelectedModal(null);
     }, [setSelectedModal]);

package/dist/components/Modals.js

@@ -12,8 +12,6 @@ const studio_runtime_config_1 = require("../helpers/studio-runtime-config");
 const modals_1 = require("../state/modals");
 const z_index_1 = require("../state/z-index");
 const AskAiModal_1 = require("./AskAiModal");
-const ConfigureDefaultEditorModal_1 = require("./ConfigureDefaultEditorModal");
-const ConfigureLicenseModal_1 = require("./ConfigureLicenseModal");
 const ConfirmationDialog_1 = require("./ConfirmationDialog");
 const EffectPickerModal_1 = require("./EffectPickerModal");
 const InstallPackage_1 = require("./InstallPackage");
@@ -31,16 +29,29 @@ const QuickSwitcher_1 = __importDefault(require("./QuickSwitcher/QuickSwitcher")
 const RenderStatusModal_1 = require("./RenderModal/RenderStatusModal");
 const ServerRenderModal_1 = require("./RenderModal/ServerRenderModal");
 const WebRenderModal_1 = require("./RenderModal/WebRenderModal");
+const SettingsModal_1 = require("./SettingsModal");
 const SvgImportDialog_1 = require("./SvgImportDialog");
 const UpdateModal_1 = require("./UpdateModal/UpdateModal");
 const Modals = ({ readOnlyStudio }) => {
     var _a;
-    const { selectedModal: modalContextType } = (0, react_1.useContext)(modals_1.ModalsContext);
+    const modalContextType = (0, react_1.useContext)(modals_1.SelectedModalContext);
+    const { setSelectedModal } = (0, react_1.useContext)(modals_1.SetSelectedModalContext);
     const { currentZIndex } = (0, z_index_1.useZIndex)();
-    const canRender = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx).previewServerState.type ===
-        'connected';
-    return react_dom_1.default.createPortal(jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [modalContextType && modalContextType.type === 'new-comp' && (jsx_runtime_1.jsx(NewComposition_1.NewComposition, { folderName: modalContextType.folderName, parentName: modalContextType.parentName, stack: modalContextType.stack })), modalContextType && modalContextType.type === 'new-folder' && (jsx_runtime_1.jsx(NewFolder_1.NewFolder, { parentName: modalContextType.parentName, stack: modalContextType.stack })), 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 === 'delete-folder' && (jsx_runtime_1.jsx(DeleteFolder_1.DeleteFolder, { folderName: modalContextType.folderName, parentName: modalContextType.parentName, stack: modalContextType.stack })), modalContextType && modalContextType.type === 'rename-folder' && (jsx_runtime_1.jsx(RenameFolder_1.RenameFolder, { folderName: modalContextType.folderName, parentName: modalContextType.parentName, stack: modalContextType.stack })), modalContextType && modalContextType.type === 'rename-static-file' && (jsx_runtime_1.jsx(RenameStaticFile_1.RenameStaticFileModal, { relativePath: modalContextType.relativePath })), modalContextType && modalContextType.type === 'input-props-override' && (jsx_runtime_1.jsx(OverrideInputProps_1.OverrideInputPropsModal, {})), modalContextType && modalContextType.type === 'configure-license' && (jsx_runtime_1.jsx(ConfigureLicenseModal_1.ConfigureLicenseModal, { initialPublicLicenseKey: modalContextType.initialPublicLicenseKey })), modalContextType &&
-                modalContextType.type === 'configure-default-editor' && (jsx_runtime_1.jsx(ConfigureDefaultEditorModal_1.ConfigureDefaultEditorModal, {})), modalContextType && modalContextType.type === 'web-render' && (jsx_runtime_1.jsx(WebRenderModal_1.WebRenderModalWithLoader, { ...modalContextType })), modalContextType &&
+    const { previewServerState, subscribeToEvent } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
+    const canRender = previewServerState.type === 'connected';
+    (0, react_1.useEffect)(() => {
+        return subscribeToEvent('license-key-install-request', (event) => {
+            if (event.type !== 'license-key-install-request') {
+                return;
+            }
+            setSelectedModal({
+                type: 'settings',
+                initialTab: 'license',
+                initialPublicLicenseKey: event.licenseKey,
+            });
+        });
+    }, [setSelectedModal, subscribeToEvent]);
+    return react_dom_1.default.createPortal(jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [modalContextType && modalContextType.type === 'new-comp' && (jsx_runtime_1.jsx(NewComposition_1.NewComposition, { folderName: modalContextType.folderName, parentName: modalContextType.parentName, stack: modalContextType.stack })), modalContextType && modalContextType.type === 'new-folder' && (jsx_runtime_1.jsx(NewFolder_1.NewFolder, { parentName: modalContextType.parentName, stack: modalContextType.stack })), 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 === 'delete-folder' && (jsx_runtime_1.jsx(DeleteFolder_1.DeleteFolder, { folderName: modalContextType.folderName, parentName: modalContextType.parentName, stack: modalContextType.stack })), modalContextType && modalContextType.type === 'rename-folder' && (jsx_runtime_1.jsx(RenameFolder_1.RenameFolder, { folderName: modalContextType.folderName, parentName: modalContextType.parentName, stack: modalContextType.stack })), modalContextType && modalContextType.type === 'rename-static-file' && (jsx_runtime_1.jsx(RenameStaticFile_1.RenameStaticFileModal, { relativePath: modalContextType.relativePath })), modalContextType && modalContextType.type === 'input-props-override' && (jsx_runtime_1.jsx(OverrideInputProps_1.OverrideInputPropsModal, {})), modalContextType && modalContextType.type === 'settings' && (jsx_runtime_1.jsx(SettingsModal_1.SettingsModal, { initialTab: modalContextType.initialTab, initialPublicLicenseKey: modalContextType.initialPublicLicenseKey }, `${modalContextType.initialTab}-${modalContextType.initialPublicLicenseKey}`)), 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, 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, assetSelection: modalContextType.assetSelection, compositionSelection: modalContextType.compositionSelection })), modalContextType && modalContextType.type === 'add-effect' && (jsx_runtime_1.jsx(EffectPickerModal_1.EffectPickerModal, { state: modalContextType })), modalContextType && modalContextType.type === 'confirmation-dialog' && (jsx_runtime_1.jsx(ConfirmationDialog_1.ConfirmationDialog, { state: modalContextType })), modalContextType && modalContextType.type === 'svg-import-dialog' && (jsx_runtime_1.jsx(SvgImportDialog_1.SvgImportDialog, { state: modalContextType })), (0, studio_runtime_config_1.getStudioAskAIEnabled)() && jsx_runtime_1.jsx(AskAiModal_1.AskAiModal, {})] }), 
     // Modals must be above overlays opened from the editor, such as the

package/dist/components/ModalsProvider.js

@@ -5,13 +5,12 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const modals_1 = require("../state/modals");
 const ModalsProvider = ({ children }) => {
-    const [modalContextType, setModalContextType] = (0, react_1.useState)(null);
-    const modalsContext = (0, react_1.useMemo)(() => {
+    const [selectedModal, setSelectedModal] = (0, react_1.useState)(null);
+    const setSelectedModalContext = (0, react_1.useMemo)(() => {
         return {
-            selectedModal: modalContextType,
-            setSelectedModal: setModalContextType,
+            setSelectedModal,
         };
-    }, [modalContextType]);
-    return (jsx_runtime_1.jsx(modals_1.ModalsContext.Provider, { value: modalsContext, children: children }));
+    }, []);
+    return (jsx_runtime_1.jsx(modals_1.SetSelectedModalContext.Provider, { value: setSelectedModalContext, children: jsx_runtime_1.jsx(modals_1.SelectedModalContext.Provider, { value: selectedModal, children: children }) }));
 };
 exports.ModalsProvider = ModalsProvider;

package/dist/components/NewComposition/CodemodFooter.js

@@ -24,7 +24,7 @@ const CodemodFooterPresentation = ({ codemodStatus, disabled, genericSubmitLabel
 const CodemodFooter = ({ codemod, stack, valid, loadingNotification, successNotification, errorNotification, genericSubmitLabel, submitLabel, onSuccess, fallbackToRootFile = false, applyCodemod, }) => {
     var _a;
     const [submitting, setSubmitting] = (0, react_1.useState)(false);
-    const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
+    const { setSelectedModal } = (0, react_1.useContext)(modals_1.SetSelectedModalContext);
     const [codemodStatus, setCanApplyCodemod] = (0, react_1.useState)({
         type: 'loading',
     });

package/dist/components/NewComposition/DismissableModal.js

@@ -6,7 +6,7 @@ const react_1 = require("react");
 const modals_1 = require("../../state/modals");
 const ModalContainer_1 = require("../ModalContainer");
 const DismissableModal = ({ children, panelStyle }) => {
-    const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
+    const { setSelectedModal } = (0, react_1.useContext)(modals_1.SetSelectedModalContext);
     const onQuit = (0, react_1.useCallback)(() => {
         setSelectedModal(null);
     }, [setSelectedModal]);

package/dist/components/NewComposition/RenameStaticFile.js

@@ -23,7 +23,7 @@ const content = {
     minWidth: 500,
 };
 const RenameStaticFileModal = ({ relativePath }) => {
-    const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
+    const { setSelectedModal } = (0, react_1.useContext)(modals_1.SetSelectedModalContext);
     const staticFiles = (0, use_static_files_1.useStaticFiles)();
     const [newName, setNewName] = (0, react_1.useState)(() => (0, use_rename_static_file_1.getStaticFileBaseName)(relativePath));
     const [submitting, setSubmitting] = (0, react_1.useState)(false);

package/dist/components/OverrideInputProps.js

@@ -51,7 +51,7 @@ const Inner = () => {
         }
         return null;
     });
-    const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
+    const { setSelectedModal } = (0, react_1.useContext)(modals_1.SetSelectedModalContext);
     const valid = (0, react_1.useMemo)(() => {
         if (!value)
             return true;

package/dist/components/PlayPause.js

@@ -30,7 +30,8 @@ const PlayPause = ({ playbackRate, loop, bufferStateDelayInMilliseconds, muted,
     const { inFrame, outFrame } = (0, in_out_1.useTimelineInOutFramePosition)();
     const videoConfig = remotion_1.Internals.useUnsafeVideoConfig();
     const [showBufferIndicator, setShowBufferState] = (0, react_1.useState)(false);
-    const { playing, play, pause, pauseAndReturnToPlayStart, frameBack, seek, frameForward, emitter, getCurrentFrame, } = player_1.PlayerInternals.usePlayer();
+    const { play, pause, pauseAndReturnToPlayStart, frameBack, seek, frameForward, emitter, getCurrentFrame, } = player_1.PlayerInternals.usePlayerMethods();
+    const [playing] = remotion_1.Internals.Timeline.usePlayingState();
     player_1.PlayerInternals.usePlayback({
         loop,
         playbackRate,

package/dist/components/PlaybackKeyboardShortcutsManager.js

@@ -6,10 +6,11 @@ const react_1 = require("react");
 const use_keybinding_1 = require("../helpers/use-keybinding");
 const PlaybackKeyboardShortcutsManager = ({ setPlaybackRate }) => {
     const keybindings = (0, use_keybinding_1.useKeybinding)();
-    const { play, pause, playing } = player_1.PlayerInternals.usePlayer();
+    const { play, pause, isPlaying } = player_1.PlayerInternals.usePlayerMethods();
     const onJKey = (0, react_1.useCallback)(() => {
+        const wasPlaying = isPlaying();
         setPlaybackRate((prevPlaybackRate) => {
-            if (!playing) {
+            if (!wasPlaying) {
                 return -1;
             }
             if (prevPlaybackRate > -1) {
@@ -21,14 +22,15 @@ const PlaybackKeyboardShortcutsManager = ({ setPlaybackRate }) => {
             return -4;
         });
         play();
-    }, [play, playing, setPlaybackRate]);
+    }, [isPlaying, play, setPlaybackRate]);
     const onKKey = (0, react_1.useCallback)(() => {
         setPlaybackRate(1);
         pause();
     }, [pause, setPlaybackRate]);
     const onLKey = (0, react_1.useCallback)(() => {
+        const wasPlaying = isPlaying();
         setPlaybackRate((prevPlaybackRate) => {
-            if (!playing) {
+            if (!wasPlaying) {
                 return 1;
             }
             if (prevPlaybackRate < 1) {
@@ -40,7 +42,7 @@ const PlaybackKeyboardShortcutsManager = ({ setPlaybackRate }) => {
             return 4;
         });
         play();
-    }, [play, playing, setPlaybackRate]);
+    }, [isPlaying, play, setPlaybackRate]);
     (0, react_1.useEffect)(() => {
         const jKey = keybindings.registerKeybinding({
             event: 'keydown',