@remotion/studio 4.0.523 → 4.0.525

package/dist/components/InspectorSequenceSection.js

@@ -207,21 +207,30 @@ const hasSequenceControls = (sequence) => {
 exports.hasSequenceControls = hasSequenceControls;
 const InspectorSequenceSection = ({ sequence, readOnlyStudio, validatedLocation, nodePathInfo, keyframeDisplayOffset, renderTransformControls, }) => {
     var _a;
+    var _b;
     const { tree, propStatuses, runtimeValues } = (0, use_timeline_expanded_tree_1.useTimelineExpandedTree)({
         sequence,
         nodePathInfo,
         includeTextContent: true,
         includeSourceControls: true,
     });
-    const { selectedItems } = (0, TimelineSelection_1.useTimelineSelection)();
+    const { inspectorRevealRequest, selectedItems } = (0, TimelineSelection_1.useTimelineSelection)();
     const selectedEffect = selectedItems.length === 1 &&
         (selectedItems[0].type === 'sequence-effect' ||
             selectedItems[0].type === 'sequence-effect-prop')
         ? selectedItems[0]
         : null;
     const selectedEffectKey = selectedEffect === null ? null : (0, TimelineSelection_1.getTimelineSelectionKey)(selectedEffect);
+    const inspectorRevealItem = inspectorRevealRequest === null || inspectorRevealRequest === void 0 ? void 0 : inspectorRevealRequest.item;
+    const inspectorRevealItemKey = (inspectorRevealItem === null || inspectorRevealItem === void 0 ? void 0 : inspectorRevealItem.type) === 'sequence-effect' ||
+        (inspectorRevealItem === null || inspectorRevealItem === void 0 ? void 0 : inspectorRevealItem.type) === 'sequence-effect-prop'
+        ? (0, TimelineSelection_1.getTimelineSelectionKey)(inspectorRevealItem)
+        : null;
+    const inspectorRevealToken = inspectorRevealItemKey === selectedEffectKey
+        ? ((_b = inspectorRevealRequest === null || inspectorRevealRequest === void 0 ? void 0 : inspectorRevealRequest.token) !== null && _b !== void 0 ? _b : null)
+        : null;
     const selectedEffectRowRef = (0, react_1.useRef)(null);
-    const scrolledEffectKey = (0, react_1.useRef)(null);
+    const scrolledInspectorRevealToken = (0, react_1.useRef)(null);
     const [collapsedKeys, setCollapsedKeys] = (0, react_1.useState)(loadInspectorCollapsedKeys);
     const [sectionExpansionOverrides, setSectionExpansionOverrides] = (0, react_1.useState)(loadInspectorSectionExpansionOverrides);
     const [automaticSectionExpansion, setAutomaticSectionExpansion] = (0, react_1.useState)({});
@@ -310,7 +319,8 @@ const InspectorSequenceSection = ({ sequence, readOnlyStudio, validatedLocation,
     }, [getIsExpanded, tree]);
     (0, react_1.useEffect)(() => {
         if (selectedEffectKey === null ||
-            scrolledEffectKey.current === selectedEffectKey) {
+            inspectorRevealToken === null ||
+            scrolledInspectorRevealToken.current === inspectorRevealToken) {
             return;
         }
         const rows = (0, timeline_layout_1.flattenVisibleTreeNodes)({
@@ -344,19 +354,18 @@ const InspectorSequenceSection = ({ sequence, readOnlyStudio, validatedLocation,
             persistInspectorCollapsedKeys(next);
             return next;
         });
-    }, [selectedEffectKey, tree]);
+    }, [inspectorRevealToken, selectedEffectKey, tree]);
     (0, react_1.useEffect)(() => {
-        if (selectedEffectKey === null) {
-            scrolledEffectKey.current = null;
+        if (inspectorRevealToken === null) {
             return;
         }
-        if (scrolledEffectKey.current === selectedEffectKey ||
+        if (scrolledInspectorRevealToken.current === inspectorRevealToken ||
             selectedEffectRowRef.current === null) {
             return;
         }
         selectedEffectRowRef.current.scrollIntoView({ block: 'center' });
-        scrolledEffectKey.current = selectedEffectKey;
-    }, [effectRows, selectedEffectKey]);
+        scrolledInspectorRevealToken.current = inspectorRevealToken;
+    }, [effectRows, inspectorRevealToken]);
     const effectSelectableItems = (0, react_1.useMemo)(() => (0, exports.getInspectorSelectableItems)(effectRows), [effectRows]);
     const controlGroups = (0, react_1.useMemo)(() => getInspectorControlGroups(controlRows), [controlRows]);
     const layoutGroup = controlGroups.find((group) => group.id === 'layout');
@@ -484,11 +493,11 @@ const InspectorSequenceSection = ({ sequence, readOnlyStudio, validatedLocation,
         return node.kind === 'field' && ((_a = node.field) === null || _a === void 0 ? void 0 : _a.key) === border_radius_representation_1.BORDER_RADIUS_SHORTHAND_KEY;
     });
     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'
-        ? runtimeValues.captions
-        : null;
-    const inlineCaptions = Array.isArray(inlineCaptionValue)
-        ? inlineCaptionValue
+    const hasCaptionsSchema = ((_a = schema.captions) === null || _a === void 0 ? void 0 : _a.type) === 'remotion-captions';
+    const inlineCaptions = hasCaptionsSchema
+        ? Array.isArray(runtimeValues.captions)
+            ? runtimeValues.captions
+            : []
         : null;
     const showEffectsSection = nodePathInfo.supportsEffects || effectRows.length > 0;
     const canAddEffect = nodePathInfo.supportsEffects &&

package/dist/components/LazySyntaxHighlightedSource.d.ts

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

package/dist/components/LazySyntaxHighlightedSource.js

@@ -0,0 +1,43 @@
+"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.LazySyntaxHighlightedSource = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const SyntaxHighlightedSource = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('./SyntaxHighlightedSource'))));
+const LazySyntaxHighlightedSource = ({ source }) => {
+    return (jsx_runtime_1.jsx(react_1.Suspense, { fallback: source, children: jsx_runtime_1.jsx(SyntaxHighlightedSource, { source: source }) }));
+};
+exports.LazySyntaxHighlightedSource = LazySyntaxHighlightedSource;

package/dist/components/LoopToggle.js

@@ -4,9 +4,13 @@ exports.LoopToggle = exports.toggleLoop = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const colors_1 = require("../helpers/colors");
+const use_keybinding_1 = require("../helpers/use-keybinding");
+const use_keyboard_shortcut_label_1 = require("../helpers/use-keyboard-shortcut-label");
 const loop_1 = require("../state/loop");
+const ActionTooltip_1 = require("./ActionTooltip");
 const ControlButton_1 = require("./ControlButton");
-const accessibilityLabel = 'Loop video';
+const accessibilityLabel = 'Loop';
+const buttonStyle = { width: 30 };
 const toggleLoop = (setLoop) => {
     setLoop((currentLoop) => {
         (0, loop_1.persistLoopOption)(!currentLoop);
@@ -15,9 +19,12 @@ const toggleLoop = (setLoop) => {
 };
 exports.toggleLoop = toggleLoop;
 const LoopToggle = ({ loop, setLoop }) => {
+    const shortcut = (0, use_keyboard_shortcut_label_1.useKeyboardShortcutLabel)('toggleLoop');
+    const ariaShortcut = (0, use_keyboard_shortcut_label_1.useKeyboardShortcutAriaKeyShortcuts)('toggleLoop');
+    const shortcutsDisabled = (0, use_keybinding_1.areKeyboardShortcutsDisabled)();
     const onClick = (0, react_1.useCallback)(() => {
         (0, exports.toggleLoop)(setLoop);
     }, [setLoop]);
-    return (jsx_runtime_1.jsx(ControlButton_1.ControlButton, { title: accessibilityLabel, "aria-label": accessibilityLabel, onClick: onClick, children: (color) => (jsx_runtime_1.jsx("svg", { viewBox: "0 0 512 512", style: { width: 18, height: 18 }, children: jsx_runtime_1.jsx("path", { fill: loop ? colors_1.BLUE : color, d: "M384 150.3V41.6l64 53.3v2l-64 53.3zM352 23.5V80H192C86 80 0 166 0 272c0 8.8 7.2 16 16 16s16-7.2 16-16c0-88.4 71.6-160 160-160h160v56.5c0 13 10.5 23.5 23.5 23.5 5.5 0 10.8-1.9 15-5.4l78-65c7.3-6.1 11.5-15.1 11.5-24.6v-2c0-9.5-4.2-18.5-11.5-24.6l-78-65c-4.2-3.5-9.5-5.4-15-5.4-13 0-23.5 10.5-23.5 23.5zM128 415.9v54.5l-64-53.3v-2l64-53.3v54.1zM160 400v-56.5c0-13-10.5-23.5-23.5-23.5-5.5 0-10.8 1.9-15 5.4l-78 65C36.2 396.5 32 405.5 32 415v2c0 9.5 4.2 18.5 11.5 24.6l78 65c4.2 3.5 9.5 5.4 15 5.4 13 0 23.5-10.5 23.5-23.5V432h160c106 0 192-86 192-192 0-8.8-7.2-16-16-16s-16 7.2-16 16c0 88.4-71.6 160-160 160H160z" }) })) }));
+    return (jsx_runtime_1.jsx(ActionTooltip_1.ActionTooltip, { label: accessibilityLabel, shortcut: shortcutsDisabled ? null : shortcut, delay: 800, dismissOnClick: false, children: jsx_runtime_1.jsx(ControlButton_1.ControlButton, { title: "", "aria-label": accessibilityLabel, "aria-keyshortcuts": shortcutsDisabled ? undefined : ariaShortcut || undefined, "aria-pressed": loop, onClick: onClick, style: buttonStyle, children: (color) => (jsx_runtime_1.jsx("svg", { viewBox: "0 0 512 512", style: { width: 18, height: 18 }, children: jsx_runtime_1.jsx("path", { fill: loop ? colors_1.BLUE : color, d: "M384 150.3V41.6l64 53.3v2l-64 53.3zM352 23.5V80H192C86 80 0 166 0 272c0 8.8 7.2 16 16 16s16-7.2 16-16c0-88.4 71.6-160 160-160h160v56.5c0 13 10.5 23.5 23.5 23.5 5.5 0 10.8-1.9 15-5.4l78-65c7.3-6.1 11.5-15.1 11.5-24.6v-2c0-9.5-4.2-18.5-11.5-24.6l-78-65c-4.2-3.5-9.5-5.4-15-5.4-13 0-23.5 10.5-23.5 23.5zM128 415.9v54.5l-64-53.3v-2l64-53.3v54.1zM160 400v-56.5c0-13-10.5-23.5-23.5-23.5-5.5 0-10.8 1.9-15 5.4l-78 65C36.2 396.5 32 405.5 32 415v2c0 9.5 4.2 18.5 11.5 24.6l78 65c4.2 3.5 9.5 5.4 15 5.4 13 0 23.5-10.5 23.5-23.5V432h160c106 0 192-86 192-192 0-8.8-7.2-16-16-16s-16 7.2-16 16c0 88.4-71.6 160-160 160H160z" }) })) }) }));
 };
 exports.LoopToggle = LoopToggle;

package/dist/components/Menu/MenuItem.js

@@ -86,8 +86,7 @@ const MenuItem = ({ label: itemName, selected, id, onItemSelected, onItemHovered
             event: e.nativeEvent,
             captureTarget: e.currentTarget,
             onEnd: (reason, evt) => {
-                if ((reason === 'pointerup' || reason === 'buttons-released') &&
-                    evt) {
+                if ((0, pointer_session_1.isPointerSessionRelease)(reason, evt)) {
                     const target = document.elementFromPoint(evt.clientX, evt.clientY);
                     if (!target || !(0, is_menu_item_1.isMenuItem)(target)) {
                         onItemQuit();

package/dist/components/MenuBuildIndicator.js

@@ -53,7 +53,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(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx("div", { style: openInEditor, children: 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: mobileLayout ? 0.5 : 2 }), window.remotion_projectName, jsx_runtime_1.jsx(MenuCompositionName_1.MenuCompositionName, {}), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx("div", { style: openInEditor, children: jsx_runtime_1.jsx(InspectorOpenInEditor_1.InspectorOpenInEditor, { location: folderLocation, locationType: "folder", showTooltips: true }) }), 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/MenuToolbar.js

@@ -13,6 +13,7 @@ const use_keyboard_shortcut_label_1 = require("../helpers/use-keyboard-shortcut-
 const use_menu_structure_1 = require("../helpers/use-menu-structure");
 const search_1 = require("../icons/search");
 const modals_1 = require("../state/modals");
+const ActionTooltip_1 = require("./ActionTooltip");
 const InlineAction_1 = require("./InlineAction");
 const layout_1 = require("./layout");
 const menu_toolbar_height_1 = require("./menu-toolbar-height");
@@ -133,11 +134,12 @@ const MenuToolbar = ({ readOnlyStudio }) => {
         return jsx_runtime_1.jsx(search_1.SearchIcon, { color: color, width: 18, height: 18 });
     }, []);
     const quickSwitcherShortcut = (0, use_keyboard_shortcut_label_1.useKeyboardShortcutLabel)('quickSwitcher');
-    const searchTooltip = (0, use_keybinding_1.areKeyboardShortcutsDisabled)() || quickSwitcherShortcut === ''
-        ? 'Quick Switcher'
-        : `Quick Switcher (${quickSwitcherShortcut})`;
+    const quickSwitcherAriaShortcut = (0, use_keyboard_shortcut_label_1.useKeyboardShortcutAriaKeyShortcuts)('quickSwitcher');
+    const shortcutsDisabled = (0, use_keybinding_1.areKeyboardShortcutsDisabled)();
     return (jsx_runtime_1.jsxs(layout_1.Row, { align: "center", className: "css-reset", style: row, onPointerDown: onPointerDown, children: [
-            jsx_runtime_1.jsxs("div", { style: fixedWidthLeft, children: [mobileLayout ? (jsx_runtime_1.jsx(InlineAction_1.InlineAction, { variant: null, onClick: openQuickSwitcher, renderAction: renderSearchIcon, title: searchTooltip })) : (jsx_runtime_1.jsx(SidebarCollapserControls_1.SidebarCollapserControl, { side: "left" })), jsx_runtime_1.jsx("div", { style: menuItems, children: structure.map((s) => {
+            jsx_runtime_1.jsxs("div", { style: fixedWidthLeft, children: [mobileLayout ? (jsx_runtime_1.jsx(ActionTooltip_1.ActionTooltip, { label: "Quick switcher", shortcut: shortcutsDisabled ? null : quickSwitcherShortcut, delay: 800, dismissOnClick: true, children: jsx_runtime_1.jsx(InlineAction_1.InlineAction, { variant: null, onClick: openQuickSwitcher, renderAction: renderSearchIcon, "aria-label": "Quick switcher", "aria-keyshortcuts": shortcutsDisabled
+                                ? undefined
+                                : quickSwitcherAriaShortcut || undefined }) })) : (jsx_runtime_1.jsx(SidebarCollapserControls_1.SidebarCollapserControl, { side: "left" })), jsx_runtime_1.jsx("div", { style: menuItems, children: structure.map((s) => {
                             return (jsx_runtime_1.jsx(MenuItem_1.MenuItem, { selected: selected === s.id, onItemSelected: itemClicked, onItemHovered: itemHovered, id: s.id, label: s.label, onItemQuit: onItemQuit, menu: s, onPreviousMenu: onPreviousMenu, onNextMenu: onNextMenu, leaveLeftPadding: s.leaveLeftPadding }, s.id));
                         }) })
                 ] }), mobileLayout ? null : jsx_runtime_1.jsx("div", { style: flex }), jsx_runtime_1.jsx(MenuBuildIndicator_1.MenuBuildIndicator, { mobileLayout: mobileLayout }), jsx_runtime_1.jsx("div", { style: flex }), jsx_runtime_1.jsxs("div", { style: fixedWidthRight, children: [canUndoAndRedo ? jsx_runtime_1.jsx(UndoRedoButtons_1.UndoRedoButtons, {}) : null, jsx_runtime_1.jsx(SettingsButton_1.SettingsButton, { showUpdates: showUpdates }), jsx_runtime_1.jsx(SidebarCollapserControls_1.SidebarCollapserControl, { side: "right" })

package/dist/components/Modals.js

@@ -11,6 +11,7 @@ const client_id_1 = require("../helpers/client-id");
 const studio_runtime_config_1 = require("../helpers/studio-runtime-config");
 const modals_1 = require("../state/modals");
 const AskAiModal_1 = require("./AskAiModal");
+const AssetSelectorModal_1 = require("./AssetSelectorModal");
 const call_api_1 = require("./call-api");
 const ConfirmationDialog_1 = require("./ConfirmationDialog");
 const EffectPickerModal_1 = require("./EffectPickerModal");
@@ -109,6 +110,6 @@ const Modals = ({ readOnlyStudio }) => {
                     modalContextType.initialTab === 'packages' ||
                     modalContextType.initialTab === 'shortcuts') ? (jsx_runtime_1.jsx(SettingsModal_1.SettingsModal, { initialTab: modalContextType.initialTab, initialPublicLicenseKey: modalContextType.initialPublicLicenseKey }, `${modalContextType.initialTab}-${modalContextType.initialPublicLicenseKey}`)) : null, 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 === 'transcribe' ? (jsx_runtime_1.jsx(TranscriptionModalWithOptionalWhisper_1.TranscriptionModalWithOptionalWhisper, { state: modalContextType })) : null, modalContextType && modalContextType.type === 'video-matting' ? (jsx_runtime_1.jsx(VideoMattingModalWithOptionalPackage_1.VideoMattingModalWithOptionalPackage, { state: modalContextType })) : null, modalContextType && modalContextType.type === 'fix-computed-value' && (jsx_runtime_1.jsx(FixComputedValueModal_1.FixComputedValueModal, { state: modalContextType })), 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 === 'element-library' && (jsx_runtime_1.jsx(ElementLibraryModal_1.ElementLibraryModal, { name: modalContextType.name, url: modalContextType.url })), modalContextType && modalContextType.type === 'element-install' && (jsx_runtime_1.jsx(ElementInstallConfirmation_1.ElementInstallConfirmation, { state: modalContextType })), 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, {})] }));
+                (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 === 'transcribe' ? (jsx_runtime_1.jsx(TranscriptionModalWithOptionalWhisper_1.TranscriptionModalWithOptionalWhisper, { state: modalContextType })) : null, modalContextType && modalContextType.type === 'video-matting' ? (jsx_runtime_1.jsx(VideoMattingModalWithOptionalPackage_1.VideoMattingModalWithOptionalPackage, { state: modalContextType })) : null, modalContextType && modalContextType.type === 'fix-computed-value' && (jsx_runtime_1.jsx(FixComputedValueModal_1.FixComputedValueModal, { state: modalContextType })), 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 === 'asset-selection' ? (jsx_runtime_1.jsx(AssetSelectorModal_1.AssetSelectorModal, { readOnlyStudio: readOnlyStudio, state: modalContextType })) : null, modalContextType && modalContextType.type === 'element-library' && (jsx_runtime_1.jsx(ElementLibraryModal_1.ElementLibraryModal, { name: modalContextType.name, url: modalContextType.url })), modalContextType && modalContextType.type === 'element-install' && (jsx_runtime_1.jsx(ElementInstallConfirmation_1.ElementInstallConfirmation, { state: modalContextType })), 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, {})] }));
 };
 exports.Modals = Modals;

package/dist/components/MuteToggle.d.ts

@@ -1,3 +1,4 @@
+export declare const toggleMute: (setMuted: import("react").Dispatch<import("react").SetStateAction<boolean>>) => void;
 export declare const MuteToggle: React.FC<{
     muted: boolean;
     setMuted: React.Dispatch<React.SetStateAction<boolean>>;

package/dist/components/MuteToggle.js

@@ -1,20 +1,31 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.MuteToggle = void 0;
+exports.MuteToggle = exports.toggleMute = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const colors_1 = require("../helpers/colors");
+const use_keybinding_1 = require("../helpers/use-keybinding");
+const use_keyboard_shortcut_label_1 = require("../helpers/use-keyboard-shortcut-label");
 const media_volume_1 = require("../icons/media-volume");
 const mute_1 = require("../state/mute");
+const ActionTooltip_1 = require("./ActionTooltip");
 const ControlButton_1 = require("./ControlButton");
+const buttonStyle = { width: 30 };
+const toggleMute = (setMuted) => {
+    setMuted((muted) => {
+        (0, mute_1.persistMuteOption)(!muted);
+        return !muted;
+    });
+};
+exports.toggleMute = toggleMute;
 const MuteToggle = ({ muted, setMuted }) => {
+    const shortcut = (0, use_keyboard_shortcut_label_1.useKeyboardShortcutLabel)('toggleMute');
+    const ariaShortcut = (0, use_keyboard_shortcut_label_1.useKeyboardShortcutAriaKeyShortcuts)('toggleMute');
+    const shortcutsDisabled = (0, use_keybinding_1.areKeyboardShortcutsDisabled)();
     const onClick = (0, react_1.useCallback)(() => {
-        setMuted((m) => {
-            (0, mute_1.persistMuteOption)(!m);
-            return !m;
-        });
+        (0, exports.toggleMute)(setMuted);
     }, [setMuted]);
     const accessibilityLabel = muted ? 'Unmute video' : 'Mute video';
-    return (jsx_runtime_1.jsx(ControlButton_1.ControlButton, { title: accessibilityLabel, "aria-label": accessibilityLabel, onClick: onClick, children: (color) => muted ? jsx_runtime_1.jsx(media_volume_1.VolumeOffIcon, { color: colors_1.BLUE }) : jsx_runtime_1.jsx(media_volume_1.VolumeOnIcon, { color: color }) }));
+    return (jsx_runtime_1.jsx(ActionTooltip_1.ActionTooltip, { label: "Mute", shortcut: shortcutsDisabled ? null : shortcut, delay: 800, dismissOnClick: false, children: jsx_runtime_1.jsx(ControlButton_1.ControlButton, { title: "", "aria-label": accessibilityLabel, "aria-keyshortcuts": shortcutsDisabled ? undefined : ariaShortcut || undefined, onClick: onClick, style: buttonStyle, children: (color) => muted ? (jsx_runtime_1.jsx(media_volume_1.VolumeOffIcon, { color: colors_1.BLUE })) : (jsx_runtime_1.jsx(media_volume_1.VolumeOnIcon, { color: color })) }) }));
 };
 exports.MuteToggle = MuteToggle;

package/dist/components/NewComposition/CodemodFooter.js

@@ -80,6 +80,7 @@ const CodemodFooter = ({ codemod, stack, valid, loadingNotification, errorNotifi
                 dryRun: true,
                 symbolicatedStack,
                 signal,
+                undoRedoNavigation: null,
             });
         if (res.success) {
             setCanApplyCodemod({ type: 'success', diff: res.diff });

package/dist/components/NewComposition/DeleteComposition.js

@@ -3,6 +3,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.DeleteComposition = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const remotion_1 = require("remotion");
+const url_state_1 = require("../../helpers/url-state");
+const InitialCompositionLoader_1 = require("../InitialCompositionLoader");
+const load_canvas_content_from_url_1 = require("../load-canvas-content-from-url");
 const styles_1 = require("../Menu/styles");
 const ModalFooter_1 = require("../ModalFooter");
 const ModalHeader_1 = require("../ModalHeader");
@@ -24,6 +28,10 @@ const DeleteCompositionLoaded = ({ compositionId }) => {
     }
     const { unresolved } = context;
     const compositionStack = (_a = unresolved.stack) !== null && _a !== void 0 ? _a : null;
+    const { compositions } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
+    const { setCanvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionSetters);
+    const selectComposition = (0, InitialCompositionLoader_1.useSelectComposition)();
+    const navigationAfterDelete = (0, react_1.useRef)(undefined);
     const codemod = (0, react_1.useMemo)(() => {
         return {
             type: 'delete-composition',
@@ -33,18 +41,46 @@ const DeleteCompositionLoaded = ({ compositionId }) => {
     const onSubmit = (0, react_1.useCallback)((e) => {
         e.preventDefault();
     }, []);
+    const onSuccess = (0, react_1.useCallback)(() => {
+        if (navigationAfterDelete.current === undefined) {
+            return;
+        }
+        if (navigationAfterDelete.current === null) {
+            (0, url_state_1.pushUrl)('/');
+            setCanvasContent(null);
+            return;
+        }
+        selectComposition(navigationAfterDelete.current, true);
+    }, [selectComposition, setCanvasContent]);
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
             jsx_runtime_1.jsx(ModalHeader_1.ModalHeader, { title: 'Delete composition' }), jsx_runtime_1.jsxs("form", { onSubmit: onSubmit, children: [
                     jsx_runtime_1.jsxs("div", { style: content, children: ["Do you want to delete the", ' ', jsx_runtime_1.jsx("code", { style: styles_1.inlineCodeSnippet, children: unresolved.durationInFrames === 1 ? `<Still>` : '<Composition>' }), ' ', "with ID ", '"', unresolved.id, '"', "?",
                             jsx_runtime_1.jsx("br", {}),
                             "The associated ",
                             jsx_runtime_1.jsx("code", { style: styles_1.inlineCodeSnippet, children: "component" }),
-                            " will remain in your code."] }), jsx_runtime_1.jsx(ModalFooter_1.ModalFooterContainer, { children: jsx_runtime_1.jsx(CodemodFooter_1.CodemodFooter, { errorNotification: `Could not delete composition`, loadingNotification: 'Deleting', genericSubmitLabel: `Delete`, submitLabel: ({ relativeRootPath }) => `Delete from ${relativeRootPath}`, codemod: codemod, stack: compositionStack, valid: true, onSuccess: null, applyCodemod: ({ signal, symbolicatedStack }) => (0, actions_1.applyCodemod)({
-                                codemod,
-                                dryRun: false,
-                                signal,
-                                symbolicatedStack,
-                            }), applyCodemodForPreview: null }) })
+                            " will remain in your code."] }), jsx_runtime_1.jsx(ModalFooter_1.ModalFooterContainer, { children: jsx_runtime_1.jsx(CodemodFooter_1.CodemodFooter, { errorNotification: `Could not delete composition`, loadingNotification: 'Deleting', genericSubmitLabel: `Delete`, submitLabel: ({ relativeRootPath }) => `Delete from ${relativeRootPath}`, codemod: codemod, stack: compositionStack, valid: true, onSuccess: onSuccess, applyCodemod: ({ signal, symbolicatedStack }) => {
+                                var _a;
+                                const currentRoute = (0, url_state_1.getRoute)();
+                                const currentCanvasContent = (0, load_canvas_content_from_url_1.deriveCanvasContentFromUrl)();
+                                const isSelected = (currentCanvasContent === null || currentCanvasContent === void 0 ? void 0 : currentCanvasContent.type) === 'composition' &&
+                                    currentCanvasContent.compositionId === compositionId;
+                                const fallback = isSelected
+                                    ? ((_a = compositions.find(({ id }) => id !== compositionId)) !== null && _a !== void 0 ? _a : null)
+                                    : undefined;
+                                navigationAfterDelete.current = fallback;
+                                return (0, actions_1.applyCodemod)({
+                                    codemod,
+                                    dryRun: false,
+                                    signal,
+                                    symbolicatedStack,
+                                    undoRedoNavigation: fallback === undefined
+                                        ? null
+                                        : {
+                                            undoRoute: currentRoute,
+                                            redoRoute: fallback === null ? '/' : `/${fallback.id}`,
+                                        },
+                                });
+                            }, applyCodemodForPreview: null }) })
                 ] })
         ] }));
 };

package/dist/components/NewComposition/DeleteFolder.js

@@ -38,6 +38,7 @@ const DeleteFolder = ({ folderName, parentName, stack }) => {
                                 dryRun: false,
                                 signal,
                                 symbolicatedStack,
+                                undoRedoNavigation: null,
                             }), applyCodemodForPreview: null }) })
                 ] })
         ] }));

package/dist/components/NewComposition/DuplicateComposition.js

@@ -208,11 +208,16 @@ const DuplicateCompositionLoaded = ({ initialType }) => {
                                 dryRun: false,
                                 signal,
                                 symbolicatedStack,
+                                undoRedoNavigation: {
+                                    undoRoute: (0, url_state_1.getRoute)(),
+                                    redoRoute: `/${newId}`,
+                                },
                             }), applyCodemodForPreview: ({ signal, symbolicatedStack }) => (0, duplicate_composition_api_1.duplicateComposition)({
                                 codemod,
                                 dryRun: true,
                                 signal,
                                 symbolicatedStack,
+                                undoRedoNavigation: null,
                             }) }) })
                 ] })
         ] }));

package/dist/components/NewComposition/InputDragger.js

@@ -490,11 +490,11 @@ const InputDraggerForwardRefFn = ({ onValueChange, onValueChangeEnd, min: _min,
             event: e.nativeEvent,
             captureTarget: target,
             onMove: moveListener,
-            onEnd: (reason) => {
+            onEnd: (reason, endEvent) => {
                 pointerDownRef.current = false;
                 setDragging(false);
                 (0, ForceSpecificCursor_1.stopForcingSpecificCursor)();
-                const commit = reason === 'pointerup' || reason === 'buttons-released';
+                const commit = (0, pointer_session_1.isPointerSessionRelease)(reason, endEvent);
                 if (commit && lastDragValue !== null && onValueChangeEnd) {
                     onValueChangeEnd(lastDragValue, 'drag');
                 }

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

@@ -16,6 +16,7 @@ export type NewCompositionFormValues = {
     };
 };
 export declare const NewCompositionFields: React.FC<{
+    readonly compositionId: string;
     readonly heightValidationMessage: string | null;
     readonly inputRef: RefObject<HTMLInputElement | null>;
     readonly nameValidationMessage: string | null;

package/dist/components/NewComposition/NewComposition.js

@@ -26,6 +26,7 @@ const InputAndValidationContainer_1 = require("./InputAndValidationContainer");
 const InputDragger_1 = require("./InputDragger");
 const NewCompDuration_1 = require("./NewCompDuration");
 const RemInput_1 = require("./RemInput");
+const SlugPreview_1 = require("./SlugPreview");
 const ValidationMessage_1 = require("./ValidationMessage");
 const content = {
     padding: 12,
@@ -68,7 +69,7 @@ const FolderDropdownLabel = ({ folderPath, indentation }) => {
 };
 const rootFolderId = 'new-composition-root-folder';
 const folderSelectIdPrefix = 'new-composition-folder-';
-const NewCompositionFields = ({ heightValidationMessage, inputRef, nameValidationMessage, setValues, values, widthValidationMessage, }) => {
+const NewCompositionFields = ({ compositionId, heightValidationMessage, inputRef, nameValidationMessage, setValues, values, widthValidationMessage, }) => {
     const { folders } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     const { compositionSortOrder } = (0, react_1.useContext)(folders_1.FolderContext);
     const selectedFolderId = values.folder.folderName
@@ -207,7 +208,7 @@ const NewCompositionFields = ({ heightValidationMessage, inputRef, nameValidatio
                     jsx_runtime_1.jsx("div", { style: layout_2.label, children: "Folder" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: folderValues, selectedId: selectedFolderId, style: folderSelectStyle, title: "Folder" }) })
                 ] }), jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
                     jsx_runtime_1.jsx("div", { style: layout_2.label, children: "ID" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsxs(InputAndValidationContainer_1.InputAndValidationContainer, { children: [
-                                jsx_runtime_1.jsx(RemInput_1.RemotionInput, { ref: inputRef, value: values.id, onChange: onNameChange, type: "text", autoFocus: true, placeholder: "Composition ID", status: "ok", rightAlign: true }), nameValidationMessage ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                                jsx_runtime_1.jsx(RemInput_1.RemotionInput, { ref: inputRef, value: values.id, onChange: onNameChange, type: "text", autoFocus: true, placeholder: "Composition ID", status: "ok", rightAlign: true }), jsx_runtime_1.jsx(SlugPreview_1.SlugPreview, { action: "create", currentName: null, input: values.id, slug: compositionId }), nameValidationMessage ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                                         jsx_runtime_1.jsx(layout_1.Spacing, { y: 1, block: true }), jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { align: "flex-start", message: nameValidationMessage, type: "error" })
                                     ] })) : null] }) })
                 ] }), jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
@@ -252,7 +253,7 @@ const NewCompositionLoaded = ({ canvasCapture, folderName, parentName, stack })
             return;
         input.select();
     }, []);
-    const { codemod, createComposition, heightValidationMessage, nameValidationMessage, valid, widthValidationMessage, } = (0, use_create_composition_1.useCreateComposition)({
+    const { codemod, compositionId, createComposition, heightValidationMessage, nameValidationMessage, valid, widthValidationMessage, } = (0, use_create_composition_1.useCreateComposition)({
         compositions,
         durationInFrames: values.durationInFrames,
         folderName: values.folder.folderName,
@@ -294,7 +295,7 @@ const NewCompositionLoaded = ({ canvasCapture, folderName, parentName, stack })
     }, []);
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
             jsx_runtime_1.jsx(ModalHeader_1.ModalHeader, { title: canvasCapture === null ? 'New composition' : 'Import Canvas Capture' }), jsx_runtime_1.jsxs("form", { onSubmit: onSubmit, children: [
-                    jsx_runtime_1.jsx("div", { style: content, children: jsx_runtime_1.jsx(exports.NewCompositionFields, { heightValidationMessage: heightValidationMessage, inputRef: inputRef, nameValidationMessage: nameValidationMessage, setValues: setValues, values: values, widthValidationMessage: widthValidationMessage }) }), jsx_runtime_1.jsx(ModalFooter_1.ModalFooterContainer, { children: jsx_runtime_1.jsx(CodemodFooter_1.CodemodFooter, { loadingNotification: null, errorNotification: "Could not create composition", genericSubmitLabel: "Add to root file", submitLabel: ({ relativeRootPath }) => `Add to ${relativeRootPath}`, codemod: codemod, stack: values.folder.stack, valid: valid, onSuccess: null, applyCodemod: ({ signal, symbolicatedStack }) => createCanvasCaptureComposition({
+                    jsx_runtime_1.jsx("div", { style: content, children: jsx_runtime_1.jsx(exports.NewCompositionFields, { compositionId: compositionId, heightValidationMessage: heightValidationMessage, inputRef: inputRef, nameValidationMessage: nameValidationMessage, setValues: setValues, values: values, widthValidationMessage: widthValidationMessage }) }), jsx_runtime_1.jsx(ModalFooter_1.ModalFooterContainer, { children: jsx_runtime_1.jsx(CodemodFooter_1.CodemodFooter, { loadingNotification: null, errorNotification: "Could not create composition", genericSubmitLabel: "Add to root file", submitLabel: ({ relativeRootPath }) => `Add to ${relativeRootPath}`, codemod: codemod, stack: values.folder.stack, valid: valid, onSuccess: null, applyCodemod: ({ signal, symbolicatedStack }) => createCanvasCaptureComposition({
                                 signal,
                                 symbolicatedStack,
                             }), applyCodemodForPreview: null, fallbackToRootFile: true }) })

package/dist/components/NewComposition/NewFolder.js

@@ -4,9 +4,11 @@ exports.NewFolder = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
-const colors_1 = require("../../helpers/colors");
+const create_folder_tree_1 = require("../../helpers/create-folder-tree");
+const persist_open_folders_1 = require("../../helpers/persist-open-folders");
 const slugify_name_1 = require("../../helpers/slugify-name");
 const validate_new_folder_name_1 = require("../../helpers/validate-new-folder-name");
+const folders_1 = require("../../state/folders");
 const layout_1 = require("../layout");
 const ModalFooter_1 = require("../ModalFooter");
 const ModalHeader_1 = require("../ModalHeader");
@@ -16,6 +18,7 @@ const CodemodFooter_1 = require("./CodemodFooter");
 const DismissableModal_1 = require("./DismissableModal");
 const InputAndValidationContainer_1 = require("./InputAndValidationContainer");
 const RemInput_1 = require("./RemInput");
+const SlugPreview_1 = require("./SlugPreview");
 const ValidationMessage_1 = require("./ValidationMessage");
 const content = {
     padding: 12,
@@ -24,6 +27,10 @@ const content = {
     fontSize: 13,
     minWidth: 500,
 };
+const parentNameStyle = {
+    ...layout_2.rightRow,
+    fontSize: 13,
+};
 const getUniqueFolderName = ({ folders, parentName, }) => {
     let counter = 1;
     while (true) {
@@ -37,6 +44,7 @@ const getUniqueFolderName = ({ folders, parentName, }) => {
 };
 const NewFolder = ({ parentName, stack }) => {
     const { folders } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
+    const { setCompositionFoldersExpanded } = (0, react_1.useContext)(folders_1.FolderContext);
     const [newName, setName] = (0, react_1.useState)(() => getUniqueFolderName({ folders, parentName }));
     const inputRef = (0, react_1.useRef)(null);
     (0, react_1.useEffect)(() => {
@@ -63,23 +71,40 @@ const NewFolder = ({ parentName, stack }) => {
     const onSubmit = (0, react_1.useCallback)((e) => {
         e.preventDefault();
     }, []);
+    const onSuccess = (0, react_1.useCallback)(() => {
+        if (parentName === null) {
+            return;
+        }
+        const parentFolder = (0, create_folder_tree_1.splitParentIntoNameAndParent)(parentName);
+        const parentFolderName = parentFolder.name;
+        if (parentFolderName === null) {
+            return;
+        }
+        setCompositionFoldersExpanded((previousState) => {
+            const foldersExpanded = { ...previousState };
+            for (const key of (0, create_folder_tree_1.getKeysToExpand)(parentFolderName, parentFolder.parent)) {
+                foldersExpanded[key] = true;
+            }
+            (0, persist_open_folders_1.persistExpandedFolders)('compositions', foldersExpanded);
+            return foldersExpanded;
+        });
+    }, [parentName, setCompositionFoldersExpanded]);
     return (jsx_runtime_1.jsxs(DismissableModal_1.DismissableModal, { children: [
             jsx_runtime_1.jsx(ModalHeader_1.ModalHeader, { title: "New folder" }), jsx_runtime_1.jsxs("form", { onSubmit: onSubmit, children: [
                     jsx_runtime_1.jsxs("div", { style: content, children: [parentName ? (jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
-                                    jsx_runtime_1.jsx("div", { style: layout_2.label, children: "Parent" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: parentName })
+                                    jsx_runtime_1.jsx("div", { style: layout_2.label, children: "Parent" }), jsx_runtime_1.jsx("div", { style: parentNameStyle, children: parentName })
                                 ] })) : null, jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
                                     jsx_runtime_1.jsx("div", { style: layout_2.label, children: "Name" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsxs(InputAndValidationContainer_1.InputAndValidationContainer, { children: [
-                                                jsx_runtime_1.jsx(RemInput_1.RemotionInput, { ref: inputRef, value: newName, onChange: onNameChange, type: "text", autoFocus: true, placeholder: "Folder name", status: "ok", rightAlign: true }), folderName && folderName !== newName ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-                                                        jsx_runtime_1.jsx(layout_1.Spacing, { y: 1, block: true }), jsx_runtime_1.jsxs("div", { "aria-live": "polite", style: { fontSize: 12, color: colors_1.LIGHT_TEXT }, children: ["Will be created as ", folderName] })
-                                                    ] })) : null, folderNameErrMessage ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                                                jsx_runtime_1.jsx(RemInput_1.RemotionInput, { ref: inputRef, value: newName, onChange: onNameChange, type: "text", autoFocus: true, placeholder: "Folder name", status: "ok", rightAlign: true }), jsx_runtime_1.jsx(SlugPreview_1.SlugPreview, { action: "create", currentName: null, input: newName, slug: folderName }), folderNameErrMessage ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                                                         jsx_runtime_1.jsx(layout_1.Spacing, { y: 1, block: true }), jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { align: "flex-start", message: folderNameErrMessage, type: "error" })
                                                     ] })) : null] }) })
                                 ] })
-                        ] }), jsx_runtime_1.jsx(ModalFooter_1.ModalFooterContainer, { children: jsx_runtime_1.jsx(CodemodFooter_1.CodemodFooter, { loadingNotification: 'Creating folder...', errorNotification: 'Could not create folder', genericSubmitLabel: 'Add to root file', submitLabel: ({ relativeRootPath }) => `Add to ${relativeRootPath}`, codemod: codemod, stack: stack, valid: valid, onSuccess: null, fallbackToRootFile: true, applyCodemod: ({ signal, symbolicatedStack }) => (0, actions_1.applyCodemod)({
+                        ] }), jsx_runtime_1.jsx(ModalFooter_1.ModalFooterContainer, { children: jsx_runtime_1.jsx(CodemodFooter_1.CodemodFooter, { loadingNotification: 'Creating folder...', errorNotification: 'Could not create folder', genericSubmitLabel: 'Add to root file', submitLabel: ({ relativeRootPath }) => `Add to ${relativeRootPath}`, codemod: codemod, stack: stack, valid: valid, onSuccess: onSuccess, fallbackToRootFile: true, applyCodemod: ({ signal, symbolicatedStack }) => (0, actions_1.applyCodemod)({
                                 codemod,
                                 dryRun: false,
                                 signal,
                                 symbolicatedStack,
+                                undoRedoNavigation: null,
                             }), applyCodemodForPreview: null }) })
                 ] })
         ] }));

package/dist/components/NewComposition/RenameComposition.js

@@ -14,6 +14,7 @@ const CodemodFooter_1 = require("./CodemodFooter");
 const DismissableModal_1 = require("./DismissableModal");
 const InputAndValidationContainer_1 = require("./InputAndValidationContainer");
 const RemInput_1 = require("./RemInput");
+const SlugPreview_1 = require("./SlugPreview");
 const ValidationMessage_1 = require("./ValidationMessage");
 const content = {
     padding: 12,
@@ -44,7 +45,7 @@ const RenameCompositionLoaded = () => {
     const onNameChange = (0, react_1.useCallback)((e) => {
         setName(e.target.value);
     }, []);
-    const { codemod, renameComposition, valid, validationMessage: compNameErrMessage, } = (0, use_rename_composition_1.useRenameComposition)({
+    const { codemod, compositionId, renameComposition, valid, validationMessage: compNameErrMessage, } = (0, use_rename_composition_1.useRenameComposition)({
         compositions,
         currentId: resolved.result.id,
         newId,
@@ -56,7 +57,7 @@ const RenameCompositionLoaded = () => {
             jsx_runtime_1.jsx(ModalHeader_1.ModalHeader, { title: `Rename ${resolved.result.id}` }), jsx_runtime_1.jsxs("form", { onSubmit: onSubmit, children: [
                     jsx_runtime_1.jsx("div", { style: content, children: jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
                                 jsx_runtime_1.jsx("div", { style: layout_2.label, children: "ID" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsxs(InputAndValidationContainer_1.InputAndValidationContainer, { children: [
-                                            jsx_runtime_1.jsx(RemInput_1.RemotionInput, { ref: inputRef, value: newId, onChange: onNameChange, type: "text", autoFocus: true, placeholder: "Composition ID", status: "ok", rightAlign: true }), compNameErrMessage ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                                            jsx_runtime_1.jsx(RemInput_1.RemotionInput, { ref: inputRef, value: newId, onChange: onNameChange, type: "text", autoFocus: true, placeholder: "Composition ID", status: "ok", rightAlign: true }), jsx_runtime_1.jsx(SlugPreview_1.SlugPreview, { action: "rename", currentName: resolved.result.id, input: newId, slug: compositionId }), compNameErrMessage ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                                                     jsx_runtime_1.jsx(layout_1.Spacing, { y: 1, block: true }), jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { align: "flex-start", message: compNameErrMessage, type: "error" })
                                                 ] })) : null] }) })
                             ] }) }), jsx_runtime_1.jsx(ModalFooter_1.ModalFooterContainer, { children: jsx_runtime_1.jsx(CodemodFooter_1.CodemodFooter, { loadingNotification: 'Renaming...', errorNotification: 'Could not rename composition', genericSubmitLabel: 'Rename', submitLabel: ({ relativeRootPath }) => `Modify ${relativeRootPath}`, codemod: codemod, stack: compositionStack, valid: valid, onSuccess: null, applyCodemod: ({ signal, symbolicatedStack }) => renameComposition({