@remotion/studio 4.0.506 → 4.0.508

package/dist/components/InspectorPanel/SequenceInspectorHeader.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SequenceInspectorSections = exports.SequenceInspectorHeader = exports.useSequenceInspectorSourceLocation = void 0;
+exports.SequenceInspectorSections = exports.SequenceInspectorDuplicationSection = exports.SequenceInspectorHeader = exports.useSequenceInspectorSourceLocation = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const client_id_1 = require("../../helpers/client-id");
@@ -10,7 +10,7 @@ const InspectorInfoHeader_1 = require("../InspectorInfoHeader");
 const InspectorLocationCopy_1 = require("../InspectorLocationCopy");
 const InspectorSourceLocation_1 = require("../InspectorSourceLocation");
 const layout_1 = require("../layout");
-const use_open_sequence_in_editor_1 = require("../Timeline/use-open-sequence-in-editor");
+const use_open_sequence_in_apps_1 = require("../Timeline/use-open-sequence-in-apps");
 const use_rename_sequence_1 = require("../Timeline/use-rename-sequence");
 const common_1 = require("./common");
 const ConnectedCompositionsSection_1 = require("./ConnectedCompositionsSection");
@@ -38,7 +38,7 @@ const defaultCursor = {
     cursor: 'default',
 };
 const useSequenceInspectorSourceLocation = (sequence) => {
-    const { canOpenInEditor, openInEditor, originalLocation } = (0, use_open_sequence_in_editor_1.useOpenSequenceInEditor)(sequence);
+    const { canOpenInEditor, openInEditor, originalLocation } = (0, use_open_sequence_in_apps_1.useOpenSequenceInApps)(sequence);
     const validatedLocation = (0, react_1.useMemo)(() => {
         var _a;
         if (!originalLocation ||
@@ -99,11 +99,29 @@ const SequenceInspectorHeader = ({ sourceLocation, track }) => {
             ] }) }));
 };
 exports.SequenceInspectorHeader = SequenceInspectorHeader;
+const SequenceInspectorDuplicationSection = ({ track }) => {
+    var _a;
+    var _b;
+    const numberOfInstances = (_b = (_a = track.nodePathInfo) === null || _a === void 0 ? void 0 : _a.numberOfSequencesWithThisNodePath) !== null && _b !== void 0 ? _b : 0;
+    if (numberOfInstances <= 1) {
+        return null;
+    }
+    return (jsx_runtime_1.jsx(common_1.InspectorSection, { header: jsx_runtime_1.jsxs("span", { style: {
+                color: 'inherit',
+                display: 'block',
+                fontFamily: 'inherit',
+                fontSize: 'inherit',
+                fontWeight: 'normal',
+                lineHeight: 'inherit',
+                margin: '2px 0',
+            }, children: [numberOfInstances, " instances"] }), children: null }));
+};
+exports.SequenceInspectorDuplicationSection = SequenceInspectorDuplicationSection;
 const SequenceInspectorSections = ({ track }) => {
     const sourceLocation = (0, exports.useSequenceInspectorSourceLocation)(track.sequence);
     const connectedCompositions = (0, ConnectedCompositionsSection_1.useConnectedCompositions)({ track });
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-            jsx_runtime_1.jsx(exports.SequenceInspectorHeader, { sourceLocation: sourceLocation, track: track }), connectedCompositions.length > 0 ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+            jsx_runtime_1.jsx(exports.SequenceInspectorHeader, { sourceLocation: sourceLocation, track: track }), jsx_runtime_1.jsx(exports.SequenceInspectorDuplicationSection, { track: track }), connectedCompositions.length > 0 ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                     jsx_runtime_1.jsx(common_1.InspectorSectionDivider, {}), jsx_runtime_1.jsx(ConnectedCompositionsSection_1.ConnectedCompositionsSection, { connectedCompositions: connectedCompositions })
                 ] })) : null] }));
 };

package/dist/components/InspectorPanel/SequenceSelectionInspector.js

@@ -141,7 +141,7 @@ const SequenceExpandedInspector = ({ track, readOnlyStudio }) => {
         return jsx_runtime_1.jsx(common_1.InspectorMessage, { children: "Sequence inspector unavailable" });
     }
     return (jsx_runtime_1.jsxs("div", { style: styles_1.selectedContainer, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, onPointerDown: selectSequenceOnInspectorPointerDown, children: [
-            jsx_runtime_1.jsx(SequenceInspectorHeader_1.SequenceInspectorHeader, { sourceLocation: sourceLocation, track: track }), connectedCompositions.length > 0 ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+            jsx_runtime_1.jsx(SequenceInspectorHeader_1.SequenceInspectorHeader, { sourceLocation: sourceLocation, track: track }), jsx_runtime_1.jsx(SequenceInspectorHeader_1.SequenceInspectorDuplicationSection, { track: track }), connectedCompositions.length > 0 ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                     jsx_runtime_1.jsx(common_1.InspectorSectionDivider, {}), jsx_runtime_1.jsx(ConnectedCompositionsSection_1.ConnectedCompositionsSection, { connectedCompositions: connectedCompositions })
                 ] })) : null, validatedLocation ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [jsx_runtime_1.jsx(InspectorSequenceSection_1.InspectorSequenceSection, { sequence: track.sequence, readOnlyStudio: readOnlyStudio, validatedLocation: validatedLocation, nodePathInfo: track.nodePathInfo, keyframeDisplayOffset: track.keyframeDisplayOffset, renderTransformControls: () => jsx_runtime_1.jsx(AlignmentControls_1.AlignmentControls, { track: track }) }), jsx_runtime_1.jsxs(common_1.InspectorActionSection, { children: [
                             jsx_runtime_1.jsx(SplitSequenceAction, { selection: sequenceSelection, track: track }), jsx_runtime_1.jsx(SequenceSourceActions, { selection: sequenceSelection, track: track, validatedSource: validatedLocation.source })

package/dist/components/InspectorPanel/styles.js

@@ -43,7 +43,7 @@ exports.sectionHeader = {
     fontSize: 12,
     fontWeight: 'bold',
     lineHeight: '24px',
-    padding: `4px ${InspectorPanelLayout_1.INSPECTOR_PANEL_HORIZONTAL_PADDING}px`,
+    padding: `4px 0 4px ${InspectorPanelLayout_1.INSPECTOR_PANEL_HORIZONTAL_PADDING}px`,
     userSelect: 'none',
 };
 exports.inspectorSectionBody = {

package/dist/components/InspectorSequenceSection.js

@@ -10,9 +10,11 @@ const get_preview_file_type_1 = require("../helpers/get-preview-file-type");
 const interactivity_enabled_1 = require("../helpers/interactivity-enabled");
 const timeline_layout_1 = require("../helpers/timeline-layout");
 const border_radius_1 = require("../icons/border-radius");
+const cube_1 = require("../icons/cube");
 const fullscreen_1 = require("../icons/fullscreen");
 const plus_1 = require("../icons/plus");
 const modals_1 = require("../state/modals");
+const transform_3d_mode_1 = require("../state/transform-3d-mode");
 const AssetFileIcon_1 = require("./AssetFileIcon");
 const InlineAction_1 = require("./InlineAction");
 const InlineCaptionInspector_1 = require("./InlineCaptionInspector");
@@ -27,6 +29,8 @@ const TimelineAssetField_1 = require("./Timeline/TimelineAssetField");
 const TimelineExpandedRow_1 = require("./Timeline/TimelineExpandedRow");
 const TimelineRowLayoutContext_1 = require("./Timeline/TimelineRowLayoutContext");
 const TimelineSelection_1 = require("./Timeline/TimelineSelection");
+const transform_3d_mode_2 = require("./Timeline/transform-3d-mode");
+const Transform3DModeContext_1 = require("./Timeline/Transform3DModeContext");
 const use_timeline_expanded_tree_1 = require("./Timeline/use-timeline-expanded-tree");
 const use_select_asset_1 = require("./use-select-asset");
 const container = {
@@ -56,6 +60,11 @@ const borderRadiusToggleIcon = {
     height: 15,
     width: 15,
 };
+const transform3DToggleIcon = {
+    flexShrink: 0,
+    height: 14,
+    width: 14,
+};
 const collapsibleSectionHeaderButton = {
     appearance: 'none',
     backgroundColor: 'transparent',
@@ -239,6 +248,9 @@ const InspectorSequenceSection = ({ sequence, readOnlyStudio, validatedLocation,
     const [collapsedKeys, setCollapsedKeys] = (0, react_1.useState)(loadInspectorCollapsedKeys);
     const [sectionExpansionOverrides, setSectionExpansionOverrides] = (0, react_1.useState)(loadInspectorSectionExpansionOverrides);
     const [automaticSectionExpansion, setAutomaticSectionExpansion] = (0, react_1.useState)({});
+    const { manuallyEnabledSequenceKeys, setManuallyEnabled } = (0, react_1.useContext)(transform_3d_mode_1.Transform3DModeStateContext);
+    const sequenceKey = (0, TimelineSelection_1.getTimelineSequenceSelectionKey)(nodePathInfo);
+    const manuallyEnabled3DTransform = manuallyEnabledSequenceKeys.has(sequenceKey);
     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);
@@ -326,6 +338,22 @@ const InspectorSequenceSection = ({ sequence, readOnlyStudio, validatedLocation,
     const layoutGroup = controlGroups.find((group) => group.id === 'layout');
     const controlGroupsWithoutLayout = controlGroups.filter((group) => group.id !== 'layout');
     const sequencePropStatuses = remotion_1.Internals.getPropStatusesCtx(propStatuses, nodePathInfo.sequenceSubscriptionKey);
+    const automaticallyEnabled3DTransform = (0, react_1.useMemo)(() => {
+        return [
+            'style.translate',
+            'style.scale',
+            'style.rotate',
+            'style.transformOrigin',
+        ].some((fieldKey) => (0, transform_3d_mode_2.propStatusHas3DTransformValue)({
+            fieldKey,
+            propStatus: sequencePropStatuses === null || sequencePropStatuses === void 0 ? void 0 : sequencePropStatuses[fieldKey],
+            runtimeValue: runtimeValues[fieldKey],
+        }));
+    }, [runtimeValues, sequencePropStatuses]);
+    const show3DTransformControls = automaticallyEnabled3DTransform || manuallyEnabled3DTransform;
+    const onToggle3DTransform = (0, react_1.useCallback)(() => {
+        setManuallyEnabled(sequenceKey, !manuallyEnabled3DTransform);
+    }, [manuallyEnabled3DTransform, sequenceKey, setManuallyEnabled]);
     const { schema } = sequence.controls;
     const getControlGroupActivity = (0, react_1.useCallback)((group) => {
         if (!(0, inspector_section_collapse_1.isSmartCollapsibleInspectorGroup)(group.id)) {
@@ -476,6 +504,11 @@ const InspectorSequenceSection = ({ sequence, readOnlyStudio, validatedLocation,
             : borderRadiusUsesShorthand
                 ? 'Use individual corner radii'
                 : 'Use one border radius value', renderAction: (color) => borderRadiusUsesShorthand ? (jsx_runtime_1.jsx(fullscreen_1.FullscreenIcon, { color: color, style: borderRadiusToggleIcon })) : (jsx_runtime_1.jsx(border_radius_1.BorderRadiusIcon, { color: color, style: borderRadiusToggleIcon })) })) : null;
+    const transform3DAction = (jsx_runtime_1.jsx(InlineAction_1.InlineAction, { variant: null, disabled: automaticallyEnabled3DTransform, onClick: onToggle3DTransform, title: automaticallyEnabled3DTransform
+            ? '3D controls are required by the current transform values'
+            : show3DTransformControls
+                ? 'Hide 3D transform controls'
+                : 'Show 3D transform controls', hoveredColor: show3DTransformControls ? colors_1.BLUE : undefined, unhoveredColor: show3DTransformControls ? colors_1.BLUE : colors_1.LIGHT_TEXT, renderAction: (color) => (jsx_runtime_1.jsx(cube_1.CubeIcon, { color: color, style: transform3DToggleIcon })) }));
     const effectsHeader = (jsx_runtime_1.jsxs("div", { style: styles_1.sectionHeaderRow, children: [
             jsx_runtime_1.jsx("div", { style: effectsHeaderTitle, children: "Effects" }), jsx_runtime_1.jsx(InlineAction_1.InlineAction, { variant: null, disabled: !canAddEffect, onClick: onAddEffect, title: canAddEffect ? 'Add effect' : undefined, renderAction: (color) => jsx_runtime_1.jsx(plus_1.Plus, { color: color, style: plusIcon }) })] }));
     const renderRow = ({ node, depth }) => {
@@ -487,16 +520,15 @@ const InspectorSequenceSection = ({ sequence, readOnlyStudio, validatedLocation,
         if (collapsible) {
             return (jsx_runtime_1.jsx(CollapsibleInspectorSectionHeader, { action: group.id === 'border-radius' && expanded ? borderRadiusAction : null, expanded: expanded, label: group.label, onToggle: () => toggleControlGroup(group) }));
         }
-        return (jsx_runtime_1.jsx("div", { style: styles_1.sectionHeaderRow, children: jsx_runtime_1.jsx("div", { style: effectsHeaderTitle, children: group.label }) }));
+        return (jsx_runtime_1.jsxs("div", { style: styles_1.sectionHeaderRow, children: [
+                jsx_runtime_1.jsx("div", { style: effectsHeaderTitle, children: group.label }), group.id === 'transforms' ? transform3DAction : null] }));
     };
     if (controlRows.length === 0 &&
         !showEffectsSection &&
         inlineCaptions === null) {
         return (jsx_runtime_1.jsx("div", { style: container, children: jsx_runtime_1.jsx(common_1.InspectorSection, { header: "Controls", children: jsx_runtime_1.jsx("div", { style: emptyState, children: "No schema" }) }) }));
     }
-    return (jsx_runtime_1.jsx(TimelineAssetField_1.AssetSelectionContext.Provider, { value: assetSelectionContextValue, children: jsx_runtime_1.jsxs("div", { style: container, children: [controlRows.length > 0 ? (jsx_runtime_1.jsx(TimelineSelection_1.TimelineSelectionOrderProvider, { items: controlSelectableItems, children: controlGroupsWithoutLayout.map((group) => (jsx_runtime_1.jsx(common_1.InspectorSection, { header: renderControlGroupHeader(group), children: isControlGroupExpanded(group) ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [group.id === 'transforms'
-                                    ? renderTransformControls()
-                                    : null, group.rows.map(renderRow)] })) : null }, group.id))) })) : null, inlineCaptions ? (jsx_runtime_1.jsx(InlineCaptionInspector_1.InlineCaptionInspector, { captions: inlineCaptions, controls: sequence.controls, nodePath: nodePathInfo.sequenceSubscriptionKey, readOnlyStudio: readOnlyStudio, validatedLocation: validatedLocation })) : null, showEffectsSection ? (jsx_runtime_1.jsx(common_1.InspectorSection, { header: effectsHeader, children: effectRows.length > 0 ? (jsx_runtime_1.jsx(TimelineSelection_1.TimelineSelectionOrderProvider, { items: effectSelectableItems, children: effectRows.map(renderRow) })) : null })) : null, layoutGroup ? (jsx_runtime_1.jsx(TimelineSelection_1.TimelineSelectionOrderProvider, { items: controlSelectableItems, children: jsx_runtime_1.jsx(common_1.InspectorSection, { header: renderControlGroupHeader(layoutGroup), children: isControlGroupExpanded(layoutGroup)
+    return (jsx_runtime_1.jsx(TimelineAssetField_1.AssetSelectionContext.Provider, { value: assetSelectionContextValue, children: jsx_runtime_1.jsxs("div", { style: container, children: [controlRows.length > 0 ? (jsx_runtime_1.jsx(TimelineSelection_1.TimelineSelectionOrderProvider, { items: controlSelectableItems, children: controlGroupsWithoutLayout.map((group) => (jsx_runtime_1.jsx(common_1.InspectorSection, { header: renderControlGroupHeader(group), children: isControlGroupExpanded(group) ? (group.id === 'transforms' ? (jsx_runtime_1.jsxs(Transform3DModeContext_1.Transform3DModeContext.Provider, { value: show3DTransformControls, children: [renderTransformControls(), group.rows.map(renderRow)] })) : (group.rows.map(renderRow))) : null }, group.id))) })) : null, inlineCaptions ? (jsx_runtime_1.jsx(InlineCaptionInspector_1.InlineCaptionInspector, { captions: inlineCaptions, controls: sequence.controls, nodePath: nodePathInfo.sequenceSubscriptionKey, readOnlyStudio: readOnlyStudio, validatedLocation: validatedLocation })) : null, showEffectsSection ? (jsx_runtime_1.jsx(common_1.InspectorSection, { header: effectsHeader, children: effectRows.length > 0 ? (jsx_runtime_1.jsx(TimelineSelection_1.TimelineSelectionOrderProvider, { items: effectSelectableItems, children: effectRows.map(renderRow) })) : null })) : null, layoutGroup ? (jsx_runtime_1.jsx(TimelineSelection_1.TimelineSelectionOrderProvider, { items: controlSelectableItems, children: jsx_runtime_1.jsx(common_1.InspectorSection, { header: renderControlGroupHeader(layoutGroup), children: isControlGroupExpanded(layoutGroup)
                             ? layoutGroup.rows.map(renderRow)
                             : null }) })) : null] }) }));
 };

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

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare const MenuSectionHeader: React.FC<{
+    readonly children: string;
+}>;

package/dist/components/Menu/MenuSectionHeader.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MenuSectionHeader = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const colors_1 = require("../../helpers/colors");
+const sectionHeader = {
+    color: colors_1.WHITE_ALPHA_50,
+    fontSize: 10,
+    lineHeight: '12px',
+    paddingBottom: 2,
+    paddingLeft: 8,
+    paddingRight: 8,
+    paddingTop: 6,
+    userSelect: 'none',
+    WebkitUserSelect: 'none',
+};
+const MenuSectionHeader = ({ children }) => {
+    return jsx_runtime_1.jsx("div", { style: sectionHeader, children: children });
+};
+exports.MenuSectionHeader = MenuSectionHeader;

package/dist/components/Menu/SubMenu.js

@@ -7,22 +7,33 @@ const mobile_layout_1 = require("../../helpers/mobile-layout");
 const noop_1 = require("../../helpers/noop");
 const z_index_1 = require("../../state/z-index");
 const MenuContent_1 = require("../NewComposition/MenuContent");
+const menu_tree_context_1 = require("./menu-tree-context");
 const portals_1 = require("./portals");
 const SubMenuComponent = ({ portalStyle, subMenuActivated, subMenu, onQuitFullMenu, onQuitSubMenu, }) => {
     const mobileLayout = (0, mobile_layout_1.useMobileLayout)();
+    const menuTreeId = (0, react_1.useContext)(menu_tree_context_1.MenuTreeContext);
     const onOutsideClick = (0, react_1.useCallback)((e) => {
+        if (menuTreeId !== null) {
+            if ((0, menu_tree_context_1.isNodeInMenuTree)(e, menuTreeId)) {
+                onQuitSubMenu();
+            }
+            else {
+                onQuitFullMenu();
+            }
+            return;
+        }
         if (portals_1.portals.find((p) => p.contains(e)) || mobileLayout) {
             onQuitSubMenu();
         }
         else {
             onQuitFullMenu();
         }
-    }, [mobileLayout, onQuitFullMenu, onQuitSubMenu]);
+    }, [menuTreeId, mobileLayout, onQuitFullMenu, onQuitSubMenu]);
     const onPointerDown = (0, react_1.useCallback)((e) => {
         // Prevent deselection of currently selected items
         e.stopPropagation();
     }, []);
-    return (jsx_runtime_1.jsx(z_index_1.HigherZIndex, { onEscape: onQuitFullMenu, onOutsideClick: onOutsideClick, children: jsx_runtime_1.jsx("div", { style: portalStyle, className: "css-reset", onPointerDown: onPointerDown, children: jsx_runtime_1.jsx(MenuContent_1.MenuContent, { onNextMenu: noop_1.noop, onPreviousMenu: onQuitSubMenu, values: subMenu.items, onHide: onQuitFullMenu, leaveLeftSpace: subMenu.leaveLeftSpace, preselectIndex: subMenuActivated === 'without-mouse' &&
+    return (jsx_runtime_1.jsx(z_index_1.HigherZIndex, { onEscape: onQuitFullMenu, onOutsideClick: onOutsideClick, children: jsx_runtime_1.jsx("div", { "data-remotion-menu-tree-id": menuTreeId !== null && menuTreeId !== void 0 ? menuTreeId : undefined, style: portalStyle, className: "css-reset", onPointerDown: onPointerDown, children: jsx_runtime_1.jsx(MenuContent_1.MenuContent, { onNextMenu: noop_1.noop, onPreviousMenu: onQuitSubMenu, values: subMenu.items, onHide: onQuitFullMenu, leaveLeftSpace: subMenu.leaveLeftSpace, preselectIndex: subMenuActivated === 'without-mouse' &&
                     typeof subMenu.preselectIndex === 'number'
                     ? subMenu.preselectIndex
                     : false, topItemCanBeUnselected: false, fixedHeight: null }) }) }));

package/dist/components/Menu/menu-tree-context.d.ts

@@ -0,0 +1,3 @@
+export declare const getNextMenuTreeId: () => number;
+export declare const MenuTreeContext: import("react").Context<number | null>;
+export declare const isNodeInMenuTree: (node: Node, menuTreeId: number) => boolean;

package/dist/components/Menu/menu-tree-context.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isNodeInMenuTree = exports.MenuTreeContext = exports.getNextMenuTreeId = void 0;
+const react_1 = require("react");
+let nextMenuTreeId = 0;
+const getNextMenuTreeId = () => nextMenuTreeId++;
+exports.getNextMenuTreeId = getNextMenuTreeId;
+exports.MenuTreeContext = (0, react_1.createContext)(null);
+const isNodeInMenuTree = (node, menuTreeId) => {
+    const element = node instanceof Element ? node : node.parentElement;
+    return ((element === null || element === void 0 ? void 0 : element.closest(`[data-remotion-menu-tree-id="${menuTreeId}"]`)) !== null);
+};
+exports.isNodeInMenuTree = isNodeInMenuTree;

package/dist/components/MenuBuildIndicator.js

@@ -48,7 +48,7 @@ const MenuBuildIndicator = ({ mobileLayout }) => {
         };
     }, []);
     return (jsx_runtime_1.jsxs("div", { style: cwd, title: window.remotion_cwd, children: [
-            jsx_runtime_1.jsx(layout_1.Spacing, { x: mobileLayout ? 0.5 : 2 }), window.remotion_projectName, jsx_runtime_1.jsx(MenuCompositionName_1.MenuCompositionName, {}), jsx_runtime_1.jsx(InspectorOpenInEditor_1.InspectorOpenInEditor, { location: folderLocation }), mobileLayout ? null : jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), mobileLayout ? (isBuilding ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+            jsx_runtime_1.jsx(layout_1.Spacing, { x: mobileLayout ? 0.5 : 2 }), window.remotion_projectName, jsx_runtime_1.jsx(MenuCompositionName_1.MenuCompositionName, {}), jsx_runtime_1.jsx(InspectorOpenInEditor_1.InspectorOpenInEditor, { location: folderLocation, locationType: "folder" }), mobileLayout ? null : jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), mobileLayout ? (isBuilding ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                     jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx("div", { style: spinner, children: jsx_runtime_1.jsx(Spinner_1.Spinner, { duration: 0.5, size: spinnerSize, color: colors_1.WHITE_ALPHA_80 }) })
                 ] })) : null) : isBuilding ? (jsx_runtime_1.jsx("div", { style: spinner, children: jsx_runtime_1.jsx(Spinner_1.Spinner, { duration: 0.5, size: spinnerSize, color: colors_1.WHITE_ALPHA_80 }) })) : (jsx_runtime_1.jsx("div", { style: noSpinner }))] }));
 };

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

@@ -4,6 +4,11 @@ type DividerItem = {
     type: 'divider';
     id: string;
 };
+type SectionHeaderItem = {
+    type: 'section-header';
+    id: string;
+    label: string;
+};
 export type SubMenu = {
     preselectIndex: number | false;
     leaveLeftSpace: boolean;
@@ -21,7 +26,7 @@ export type SelectionItem = {
     quickSwitcherLabel: string | null;
     disabled?: boolean;
 };
-export type ComboboxValue = DividerItem | SelectionItem;
+export type ComboboxValue = DividerItem | SectionHeaderItem | SelectionItem;
 export declare const Combobox: React.FC<{
     readonly values: ComboboxValue[];
     readonly selectedId: string | number;

package/dist/components/NewComposition/MenuContent.js

@@ -8,7 +8,9 @@ const mobile_layout_1 = require("../../helpers/mobile-layout");
 const studio_runtime_config_1 = require("../../helpers/studio-runtime-config");
 const use_keybinding_1 = require("../../helpers/use-keybinding");
 const is_menu_item_1 = require("../Menu/is-menu-item");
+const menu_tree_context_1 = require("../Menu/menu-tree-context");
 const MenuDivider_1 = require("../Menu/MenuDivider");
+const MenuSectionHeader_1 = require("../Menu/MenuSectionHeader");
 const MenuSubItem_1 = require("../Menu/MenuSubItem");
 const styles_1 = require("../Menu/styles");
 const menu_typeahead_1 = require("./menu-typeahead");
@@ -27,6 +29,9 @@ const container = {
 const MenuContent = ({ onHide, values, preselectIndex, onNextMenu, onPreviousMenu, leaveLeftSpace, topItemCanBeUnselected, fixedHeight, }) => {
     const keybindings = (0, use_keybinding_1.useKeybinding)();
     const containerRef = (0, react_1.useRef)(null);
+    const inheritedMenuTreeId = (0, react_1.useContext)(menu_tree_context_1.MenuTreeContext);
+    const localMenuTreeId = (0, react_1.useRef)((0, menu_tree_context_1.getNextMenuTreeId)());
+    const menuTreeId = inheritedMenuTreeId !== null && inheritedMenuTreeId !== void 0 ? inheritedMenuTreeId : localMenuTreeId.current;
     const isMobileLayout = (0, mobile_layout_1.useMobileLayout)();
     const [subMenuActivated, setSubMenuActivated] = (0, react_1.useState)(false);
     const typeaheadQueryRef = (0, react_1.useRef)('');
@@ -51,7 +56,7 @@ const MenuContent = ({ onHide, values, preselectIndex, onNextMenu, onPreviousMen
         }
     }, []);
     const isItemSelectable = (0, react_1.useCallback)((v) => {
-        return v.type !== 'divider' && !v.disabled;
+        return v.type === 'item' && !v.disabled;
     }, []);
     const onArrowUp = (0, react_1.useCallback)(() => {
         setSelectedItem((prevItem) => {
@@ -98,8 +103,8 @@ const MenuContent = ({ onHide, values, preselectIndex, onNextMenu, onPreviousMen
         if (!item) {
             throw new Error('cannot find item');
         }
-        if (item.type === 'divider') {
-            throw new Error('cannot find divider');
+        if (item.type !== 'item') {
+            throw new Error('cannot select non-interactive menu item');
         }
         if (item.disabled) {
             return;
@@ -118,8 +123,8 @@ const MenuContent = ({ onHide, values, preselectIndex, onNextMenu, onPreviousMen
         if (!item) {
             throw new Error('cannot find item');
         }
-        if (item.type === 'divider') {
-            throw new Error('cannot find divider');
+        if (item.type !== 'item') {
+            throw new Error('cannot select non-interactive menu item');
         }
         if (!item.subMenu) {
             return onNextMenu();
@@ -282,8 +287,8 @@ const MenuContent = ({ onHide, values, preselectIndex, onNextMenu, onPreviousMen
             // Can happen if resizing the window
             return;
         }
-        if (item.type === 'divider') {
-            throw new Error('should not select divider');
+        if (item.type !== 'item') {
+            throw new Error('should not select non-interactive menu item');
         }
         if (!item.subMenu && subMenuActivated) {
             setSubMenuActivated(false);
@@ -303,18 +308,21 @@ const MenuContent = ({ onHide, values, preselectIndex, onNextMenu, onPreviousMen
         current.addEventListener('pointerleave', onPointerLeave);
         return () => current.removeEventListener('pointerleave', onPointerLeave);
     }, [onHide, subMenuActivated]);
-    return (jsx_runtime_1.jsx("div", { ref: containerRef, style: containerWithHeight, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: values.map((item) => {
-            if (item.type === 'divider') {
-                return jsx_runtime_1.jsx(MenuDivider_1.MenuDivider, {}, item.id);
-            }
-            const onClick = (id, e) => {
-                item.onClick(id, e);
-                if (item.subMenu) {
-                    return null;
+    return (jsx_runtime_1.jsx(menu_tree_context_1.MenuTreeContext.Provider, { value: menuTreeId, children: jsx_runtime_1.jsx("div", { ref: containerRef, "data-remotion-menu-tree-id": menuTreeId, style: containerWithHeight, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: values.map((item) => {
+                if (item.type === 'divider') {
+                    return jsx_runtime_1.jsx(MenuDivider_1.MenuDivider, {}, item.id);
+                }
+                if (item.type === 'section-header') {
+                    return (jsx_runtime_1.jsx(MenuSectionHeader_1.MenuSectionHeader, { children: item.label }, item.id));
                 }
-                onHide();
-            };
-            return (jsx_runtime_1.jsx(MenuSubItem_1.MenuSubItem, { selected: item.id === selectedItem, onActionChosen: onClick, onItemSelected: onItemSelected, label: item.label, id: item.id, keyHint: item.keyHint, leaveLeftSpace: leaveLeftSpace, leftItem: item.leftItem, subMenu: item.subMenu, onQuitMenu: onHide, onNextMenu: onNextMenu, subMenuActivated: subMenuActivated, setSubMenuActivated: setSubMenuActivated, disabled: item.disabled }, item.id));
-        }) }));
+                const onClick = (id, e) => {
+                    item.onClick(id, e);
+                    if (item.subMenu) {
+                        return null;
+                    }
+                    onHide();
+                };
+                return (jsx_runtime_1.jsx(MenuSubItem_1.MenuSubItem, { selected: item.id === selectedItem, onActionChosen: onClick, onItemSelected: onItemSelected, label: item.label, id: item.id, keyHint: item.keyHint, leaveLeftSpace: leaveLeftSpace, leftItem: item.leftItem, subMenu: item.subMenu, onQuitMenu: onHide, onNextMenu: onNextMenu, subMenuActivated: subMenuActivated, setSubMenuActivated: setSubMenuActivated, disabled: item.disabled }, item.id));
+            }) }) }));
 };
 exports.MenuContent = MenuContent;

package/dist/components/NewComposition/menu-typeahead.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.findTypeaheadMenuItem = void 0;
 const getLabelToMatch = (value) => {
-    if (value.type === 'divider' || value.disabled) {
+    if (value.type !== 'item' || value.disabled) {
         return null;
     }
     if (typeof value.label === 'string') {
@@ -19,7 +19,7 @@ const findTypeaheadMenuItem = ({ query, values, }) => {
         const label = getLabelToMatch(value);
         return label ? label.toLowerCase().startsWith(normalizedQuery) : false;
     });
-    if (!matched || matched.type === 'divider') {
+    if (!matched || matched.type !== 'item') {
         return null;
     }
     return matched.id;

package/dist/components/PlayPause.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-export declare const PlayPause: React.FC<{
+export declare const PlayPause: React.NamedExoticComponent<{
     readonly playbackRate: number;
     readonly loop: boolean;
     readonly bufferStateDelayInMilliseconds: number;

package/dist/components/PlayPause.js

@@ -1,9 +1,42 @@
 "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;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PlayPause = 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 remotion_1 = require("remotion");
 const is_current_selected_still_1 = require("../helpers/is-current-selected-still");
 const use_keybinding_1 = require("../helpers/use-keybinding");
@@ -26,12 +59,10 @@ const iconButton = {
     height: 14,
     width: 14,
 };
-const PlayPause = ({ playbackRate, loop, bufferStateDelayInMilliseconds, muted, hideNavigationControls, }) => {
-    const { inFrame, outFrame } = (0, in_out_1.useTimelineInOutFramePosition)();
-    const videoConfig = remotion_1.Internals.useUnsafeVideoConfig();
-    const [showBufferIndicator, setShowBufferState] = (0, react_1.useState)(false);
-    const { play, pause, pauseAndReturnToPlayStart, frameBack, seek, frameForward, emitter, getCurrentFrame, } = player_1.PlayerInternals.usePlayerMethods();
-    const [playing] = remotion_1.Internals.Timeline.usePlayingState();
+const browserMediaControlsBehavior = {
+    mode: 'register-media-session',
+};
+const PlaybackManager = ({ playbackRate, loop, muted, inFrame, outFrame, getCurrentFrame }) => {
     player_1.PlayerInternals.usePlayback({
         loop,
         playbackRate,
@@ -39,11 +70,28 @@ const PlayPause = ({ playbackRate, loop, bufferStateDelayInMilliseconds, muted,
         inFrame,
         outFrame,
         getCurrentFrame,
-        browserMediaControlsBehavior: {
-            mode: 'register-media-session',
-        },
+        browserMediaControlsBehavior,
         muted,
     });
+    return null;
+};
+const PlayPauseInner = ({ playbackRate, loop, bufferStateDelayInMilliseconds, muted, hideNavigationControls, }) => {
+    const { inFrame, outFrame } = (0, in_out_1.useTimelineInOutFramePosition)();
+    const videoConfig = remotion_1.Internals.useUnsafeVideoConfig();
+    const [showBufferIndicator, setShowBufferState] = (0, react_1.useState)(false);
+    const { play, pause, pauseAndReturnToPlayStart, frameBack, seek, frameForward, emitter, getCurrentFrame, isPlaying, } = player_1.PlayerInternals.usePlayerMethods();
+    const [playing, setPlaying] = (0, react_1.useState)(isPlaying);
+    (0, react_1.useEffect)(() => {
+        const onPlay = () => setPlaying(true);
+        const onPause = () => setPlaying(false);
+        setPlaying(isPlaying());
+        emitter.addEventListener('play', onPlay);
+        emitter.addEventListener('pause', onPause);
+        return () => {
+            emitter.removeEventListener('play', onPlay);
+            emitter.removeEventListener('pause', onPause);
+        };
+    }, [emitter, isPlaying]);
     const isStill = (0, is_current_selected_still_1.useIsStill)();
     (0, react_1.useEffect)(() => {
         if (isStill) {
@@ -195,6 +243,7 @@ const PlayPause = ({ playbackRate, loop, bufferStateDelayInMilliseconds, muted,
             stopped = true;
         };
     }, [bufferStateDelayInMilliseconds, emitter]);
-    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [hideNavigationControls ? null : (jsx_runtime_1.jsx(ControlButton_1.ControlButton, { "aria-label": "Jump to beginning", title: "Jump to beginning", disabled: !videoConfig, onClick: jumpToStart, children: (color) => jsx_runtime_1.jsx(jump_to_start_1.JumpToStart, { style: backStyle, color: color }) })), hideNavigationControls ? null : (jsx_runtime_1.jsx(ControlButton_1.ControlButton, { "aria-label": "Step back one frame", title: "Step back one frame", disabled: !videoConfig, onClick: oneFrameBack, children: (color) => jsx_runtime_1.jsx(step_back_1.StepBack, { style: forwardBackStyle, color: color }) })), jsx_runtime_1.jsx(ControlButton_1.ControlButton, { "aria-label": playing ? 'Pause' : 'Play', title: playing ? 'Pause' : 'Play', onClick: playing ? pause : play, disabled: !videoConfig, children: (color) => playing ? (showBufferIndicator ? (jsx_runtime_1.jsx(player_1.PlayerInternals.BufferingIndicator, { type: "studio", color: color })) : (jsx_runtime_1.jsx(pause_1.Pause, { style: iconButton, color: color }))) : (jsx_runtime_1.jsx(play_1.Play, { style: iconButton, color: color })) }), hideNavigationControls ? null : (jsx_runtime_1.jsx(ControlButton_1.ControlButton, { "aria-label": "Step forward one frame", title: "Step forward one frame", disabled: !videoConfig, onClick: oneFrameForward, children: (color) => jsx_runtime_1.jsx(step_forward_1.StepForward, { style: forwardBackStyle, color: color }) }))] }));
+    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+            jsx_runtime_1.jsx(PlaybackManager, { loop: loop, playbackRate: playbackRate, muted: muted, inFrame: inFrame, outFrame: outFrame, getCurrentFrame: getCurrentFrame }), hideNavigationControls ? null : (jsx_runtime_1.jsx(ControlButton_1.ControlButton, { "aria-label": "Jump to beginning", title: "Jump to beginning", disabled: !videoConfig, onClick: jumpToStart, children: (color) => jsx_runtime_1.jsx(jump_to_start_1.JumpToStart, { style: backStyle, color: color }) })), hideNavigationControls ? null : (jsx_runtime_1.jsx(ControlButton_1.ControlButton, { "aria-label": "Step back one frame", title: "Step back one frame", disabled: !videoConfig, onClick: oneFrameBack, children: (color) => jsx_runtime_1.jsx(step_back_1.StepBack, { style: forwardBackStyle, color: color }) })), jsx_runtime_1.jsx(ControlButton_1.ControlButton, { "aria-label": playing ? 'Pause' : 'Play', title: playing ? 'Pause' : 'Play', onClick: playing ? pause : play, disabled: !videoConfig, children: (color) => playing ? (showBufferIndicator ? (jsx_runtime_1.jsx(player_1.PlayerInternals.BufferingIndicator, { type: "studio", color: color })) : (jsx_runtime_1.jsx(pause_1.Pause, { style: iconButton, color: color }))) : (jsx_runtime_1.jsx(play_1.Play, { style: iconButton, color: color })) }), hideNavigationControls ? null : (jsx_runtime_1.jsx(ControlButton_1.ControlButton, { "aria-label": "Step forward one frame", title: "Step forward one frame", disabled: !videoConfig, onClick: oneFrameForward, children: (color) => jsx_runtime_1.jsx(step_forward_1.StepForward, { style: forwardBackStyle, color: color }) }))] }));
 };
-exports.PlayPause = PlayPause;
+exports.PlayPause = react_1.default.memo(PlayPauseInner);

package/dist/components/Preview.js

@@ -69,6 +69,24 @@ const VideoPreview = ({ canvasSize, contentDimensions, canvasContent, assetMetad
 exports.VideoPreview = VideoPreview;
 const CompWhenItHasDimensions = ({ contentDimensions, canvasSize, canvasContent, assetMetadata }) => {
     const { size: previewSize } = (0, react_1.useContext)(remotion_1.Internals.PreviewSizeContext);
+    const [canvasHovered, setCanvasHovered] = (0, react_1.useState)(false);
+    const compositionContainerRef = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        const compositionContainer = compositionContainerRef.current;
+        if (compositionContainer === null) {
+            setCanvasHovered(false);
+            return;
+        }
+        const onPointerEnter = () => setCanvasHovered(true);
+        const onPointerLeave = () => setCanvasHovered(false);
+        setCanvasHovered(compositionContainer.matches(':hover'));
+        compositionContainer.addEventListener('pointerenter', onPointerEnter);
+        compositionContainer.addEventListener('pointerleave', onPointerLeave);
+        return () => {
+            compositionContainer.removeEventListener('pointerenter', onPointerEnter);
+            compositionContainer.removeEventListener('pointerleave', onPointerLeave);
+        };
+    }, [canvasContent.type]);
     const { centerX, centerY, yCorrection, xCorrection, scale } = (0, react_1.useMemo)(() => {
         if (contentDimensions === 'none') {
             return {
@@ -129,8 +147,8 @@ const CompWhenItHasDimensions = ({ contentDimensions, canvasSize, canvasContent,
     if (canvasContent.type === 'output-blob') {
         return (jsx_runtime_1.jsx("div", { style: outer, children: jsx_runtime_1.jsx(RenderPreview_1.RenderPreview, { path: canvasContent.displayName, assetMetadata: assetMetadata, getBlob: canvasContent.getBlob }) }));
     }
-    return (jsx_runtime_1.jsxs("div", { className: "remotion-studio-composition-container", style: outer, children: [
-            jsx_runtime_1.jsx(PortalContainer, { contentDimensions: contentDimensions, scale: scale, xCorrection: xCorrection, yCorrection: yCorrection }), jsx_runtime_1.jsx(SelectedOutlineOverlay_1.SelectedOutlineOverlay, { compositionHeight: contentDimensions.height, compositionWidth: contentDimensions.width, scale: scale, translationX: previewSize.translation.x, translationY: previewSize.translation.y })
+    return (jsx_runtime_1.jsxs("div", { ref: compositionContainerRef, className: "remotion-studio-composition-container", style: outer, children: [
+            jsx_runtime_1.jsx(PortalContainer, { contentDimensions: contentDimensions, scale: scale, xCorrection: xCorrection, yCorrection: yCorrection }), jsx_runtime_1.jsx(SelectedOutlineOverlay_1.SelectedOutlineOverlay, { canvasHovered: canvasHovered, compositionHeight: contentDimensions.height, compositionWidth: contentDimensions.width, scale: scale, translationX: previewSize.translation.x, translationY: previewSize.translation.y })
         ] }));
 };
 const PortalContainer = ({ scale, xCorrection, yCorrection, contentDimensions }) => {
@@ -154,13 +172,20 @@ const PortalContainer = ({ scale, xCorrection, yCorrection, contentDimensions })
         xCorrection,
         yCorrection,
     ]);
-    (0, react_1.useEffect)(() => {
+    (0, react_1.useLayoutEffect)(() => {
         const { current } = portalContainer;
         current === null || current === void 0 ? void 0 : current.appendChild(remotion_1.Internals.portalNode());
         return () => {
-            current === null || current === void 0 ? void 0 : current.removeChild(remotion_1.Internals.portalNode());
+            const portalNode = remotion_1.Internals.portalNode();
+            if (current && portalNode.parentNode === current) {
+                current.removeChild(portalNode);
+                remotion_1.Internals.setPortalNodeCurrentScale(1);
+            }
         };
     }, []);
+    (0, react_1.useLayoutEffect)(() => {
+        remotion_1.Internals.setPortalNodeCurrentScale(scale);
+    }, [scale]);
     const onPointerDown = (0, react_1.useCallback)((event) => {
         if (!(0, should_clear_selection_on_pointer_down_1.shouldClearSelectionOnPointerDown)(event)) {
             return;

package/dist/components/RenderButton.js

@@ -390,17 +390,21 @@ const RenderButtonInner = ({ readOnlyStudio, size: controlSize = 'default', narr
             ];
         }
         return [
-            {
-                type: 'item',
-                id: 'server-render',
-                label: 'Server-side render',
-                value: 'server-render',
-                onClick: () => handleRenderTypeChange('server-render'),
-                keyHint: null,
-                leftItem: null,
-                subMenu: null,
-                quickSwitcherLabel: null,
-            },
+            ...(canServerRender
+                ? [
+                    {
+                        type: 'item',
+                        id: 'server-render',
+                        label: 'Server-side render',
+                        value: 'server-render',
+                        onClick: () => handleRenderTypeChange('server-render'),
+                        keyHint: null,
+                        leftItem: null,
+                        subMenu: null,
+                        quickSwitcherLabel: null,
+                    },
+                ]
+                : []),
             {
                 type: 'item',
                 id: 'client-render',
@@ -413,7 +417,7 @@ const RenderButtonInner = ({ readOnlyStudio, size: controlSize = 'default', narr
                 quickSwitcherLabel: null,
             },
         ];
-    }, [handleRenderTypeChange, readOnlyStudio]);
+    }, [canServerRender, handleRenderTypeChange, readOnlyStudio]);
     const spaceToBottom = (0, react_1.useMemo)(() => {
         const margin = 10;
         if (size && dropdownOpened) {