@remotion/studio 4.0.479 → 4.0.481

package/dist/components/AudioWaveform.js

@@ -52,6 +52,12 @@ const waveformCanvasStyle = {
 const volumeCanvasStyle = {
     position: 'absolute',
 };
+const parseVolume = (volume) => {
+    if (typeof volume === 'number') {
+        return volume;
+    }
+    return volume.split(',').map((v) => Number(v));
+};
 const drawLoopedWaveform = ({ canvas, peaks, volume, visualizationWidth, loopWidth, }) => {
     const h = canvas.height;
     const w = Math.ceil(visualizationWidth);
@@ -95,6 +101,7 @@ const AudioWaveform = ({ src, height, startFrom, durationInFrames, visualization
     const hasTransferredCanvas = (0, react_1.useRef)(false);
     const latestRequestId = (0, react_1.useRef)(0);
     const shouldRenderVolumeOverlay = doesVolumeChange && typeof volume === 'string';
+    const parsedVolume = (0, react_1.useMemo)(() => parseVolume(volume), [volume]);
     (0, react_1.useEffect)(() => {
         if (canUseWorkerPath) {
             return;
@@ -198,7 +205,6 @@ const AudioWaveform = ({ src, height, startFrom, durationInFrames, visualization
         }
         const h = height;
         const w = Math.ceil(visualizationWidth);
-        const vol = typeof volume === 'number' ? volume : 1;
         if (canUseWorkerPath) {
             const worker = waveformWorker.current;
             if (!worker || !hasTransferredCanvas.current) {
@@ -212,7 +218,7 @@ const AudioWaveform = ({ src, height, startFrom, durationInFrames, visualization
                 src,
                 width: w,
                 height: h,
-                volume: vol,
+                volume: parsedVolume,
                 startFrom,
                 durationInFrames,
                 fps: vidConf.fps,
@@ -228,7 +234,7 @@ const AudioWaveform = ({ src, height, startFrom, durationInFrames, visualization
             drawLoopedWaveform({
                 canvas: canvasElement,
                 peaks: portionPeaks !== null && portionPeaks !== void 0 ? portionPeaks : EMPTY_PEAKS,
-                volume: vol,
+                volume: parsedVolume,
                 visualizationWidth,
                 loopWidth: (0, timeline_utils_1.getLoopDisplayWidth)({
                     visualizationWidth,
@@ -241,7 +247,7 @@ const AudioWaveform = ({ src, height, startFrom, durationInFrames, visualization
                 canvas: canvasElement,
                 peaks: portionPeaks !== null && portionPeaks !== void 0 ? portionPeaks : EMPTY_PEAKS,
                 color: 'rgba(255, 255, 255, 0.6)',
-                volume: vol,
+                volume: parsedVolume,
                 width: w,
             });
         }
@@ -251,12 +257,12 @@ const AudioWaveform = ({ src, height, startFrom, durationInFrames, visualization
         height,
         loopDisplay,
         playbackRate,
+        parsedVolume,
         portionPeaks,
         src,
         startFrom,
         vidConf.fps,
         visualizationWidth,
-        volume,
         waveformCanvasKey,
     ]);
     (0, react_1.useEffect)(() => {
@@ -275,11 +281,15 @@ const AudioWaveform = ({ src, height, startFrom, durationInFrames, visualization
         volumeCanvasElement.width = Math.ceil(visualizationWidth);
         volumeCanvasElement.height = h;
         context.clearRect(0, 0, visualizationWidth, h);
-        const volumes = volume.split(',').map((v) => Number(v));
+        if (!Array.isArray(parsedVolume)) {
+            return;
+        }
         context.beginPath();
         context.moveTo(0, h);
-        volumes.forEach((v, index) => {
-            const x = (index / (volumes.length - 1)) * visualizationWidth;
+        parsedVolume.forEach((v, index) => {
+            const x = parsedVolume.length <= 1
+                ? 0
+                : (index / (parsedVolume.length - 1)) * visualizationWidth;
             const y = (1 - v) * (h - timeline_layout_1.TIMELINE_BORDER * 2) + 1;
             if (index === 0) {
                 context.moveTo(x, y);
@@ -290,10 +300,8 @@ const AudioWaveform = ({ src, height, startFrom, durationInFrames, visualization
         });
         context.strokeStyle = colors_1.LIGHT_TRANSPARENT;
         context.stroke();
-    }, [height, shouldRenderVolumeOverlay, visualizationWidth, volume]);
+    }, [height, parsedVolume, shouldRenderVolumeOverlay, visualizationWidth]);
     if (error) {
-        // eslint-disable-next-line no-console
-        console.error(error);
         return (jsx_runtime_1.jsx("div", { style: getContainerStyle(height), children: jsx_runtime_1.jsx("div", { style: errorMessage, children: "No waveform available. The audio could not be decoded or may not support CORS." }) }));
     }
     if (!canUseWorkerPath && !peaks) {

package/dist/components/Button.d.ts

@@ -9,5 +9,6 @@ export type ButtonProps = {
     readonly autoFocus?: boolean;
     readonly title?: string;
     readonly id?: string;
+    readonly onPointerDown?: React.PointerEventHandler<HTMLButtonElement>;
 };
 export declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/Button.js

@@ -14,7 +14,7 @@ const button = {
     color: 'white',
     flexDirection: 'row',
 };
-const ButtonRefForwardFunction = ({ children, onClick, title, disabled, size = 'default', style, id, autoFocus, buttonContainerStyle, }, ref) => {
+const ButtonRefForwardFunction = ({ children, onClick, title, disabled, size = 'default', style, id, autoFocus, buttonContainerStyle, onPointerDown, }, ref) => {
     const combined = (0, react_1.useMemo)(() => {
         return {
             ...button,
@@ -33,6 +33,6 @@ const ButtonRefForwardFunction = ({ children, onClick, title, disabled, size = '
             ...(buttonContainerStyle !== null && buttonContainerStyle !== void 0 ? buttonContainerStyle : {}),
         };
     }, [buttonContainerStyle, disabled, size]);
-    return (jsx_runtime_1.jsx("button", { ref: ref, id: id, style: combined, type: "button", disabled: disabled, onClick: onClick, autoFocus: autoFocus, title: title, children: jsx_runtime_1.jsx("div", { className: "css-reset", style: buttonContainer, children: children }) }));
+    return (jsx_runtime_1.jsx("button", { ref: ref, id: id, style: combined, type: "button", disabled: disabled, onClick: onClick, onPointerDown: onPointerDown, autoFocus: autoFocus, title: title, children: jsx_runtime_1.jsx("div", { className: "css-reset", style: buttonContainer, children: children }) }));
 };
 exports.Button = (0, react_1.forwardRef)(ButtonRefForwardFunction);

package/dist/components/CurrentCompositionSideEffects.d.ts

@@ -1,5 +1,2 @@
 import type React from 'react';
 export declare const TitleUpdater: React.FC;
-export declare const CurrentCompositionKeybindings: React.FC<{
-    readonly readOnlyStudio: boolean;
-}>;

package/dist/components/CurrentCompositionSideEffects.js

@@ -1,13 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.CurrentCompositionKeybindings = exports.TitleUpdater = void 0;
+exports.TitleUpdater = void 0;
 const react_1 = require("react");
 const remotion_1 = require("remotion");
-const client_id_1 = require("../helpers/client-id");
 const document_title_1 = require("../helpers/document-title");
-const show_browser_rendering_1 = require("../helpers/show-browser-rendering");
-const use_keybinding_1 = require("../helpers/use-keybinding");
-const NotificationCenter_1 = require("./Notifications/NotificationCenter");
 const context_1 = require("./RenderQueue/context");
 const TitleUpdater = () => {
     const renderQueue = (0, react_1.useContext)(context_1.RenderQueueContext);
@@ -38,35 +34,3 @@ const TitleUpdater = () => {
     return null;
 };
 exports.TitleUpdater = TitleUpdater;
-const CurrentCompositionKeybindings = ({ readOnlyStudio }) => {
-    const keybindings = (0, use_keybinding_1.useKeybinding)();
-    const video = remotion_1.Internals.useVideo();
-    const { type } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx).previewServerState;
-    const openRenderModal = (0, react_1.useCallback)(() => {
-        if (!video) {
-            return;
-        }
-        if (type !== 'connected' && !show_browser_rendering_1.SHOW_BROWSER_RENDERING && !readOnlyStudio) {
-            (0, NotificationCenter_1.showNotification)('Studio server is offline', 2000);
-            return;
-        }
-        const renderButton = document.getElementById('render-modal-button');
-        renderButton.click();
-    }, [readOnlyStudio, type, video]);
-    (0, react_1.useEffect)(() => {
-        const binding = keybindings.registerKeybinding({
-            event: 'keydown',
-            key: 'r',
-            commandCtrlKey: false,
-            callback: openRenderModal,
-            preventDefault: true,
-            triggerIfInputFieldFocused: false,
-            keepRegisteredWhenNotHighestContext: false,
-        });
-        return () => {
-            binding.unregister();
-        };
-    }, [keybindings, openRenderModal]);
-    return null;
-};
-exports.CurrentCompositionKeybindings = CurrentCompositionKeybindings;

package/dist/components/Editor.js

@@ -47,7 +47,6 @@ const z_index_1 = require("../state/z-index");
 const canvas_capture_enabled_1 = require("./canvas-capture-enabled");
 const EditorContent_1 = require("./EditorContent");
 const ForceSpecificCursor_1 = require("./ForceSpecificCursor");
-const GlobalKeybindings_1 = require("./GlobalKeybindings");
 const Modals_1 = require("./Modals");
 const NotificationCenter_1 = require("./Notifications/NotificationCenter");
 const RenderErrorContext_1 = require("./RenderErrorContext");
@@ -104,12 +103,10 @@ const Editor = ({ Root, readOnlyStudio }) => {
     const editor = (jsx_runtime_1.jsx(z_index_1.HigherZIndex, { onEscape: noop_1.noop, onOutsideClick: noop_1.noop, children: jsx_runtime_1.jsx(timeline_zoom_1.TimelineZoomContext, { children: jsx_runtime_1.jsxs(SequencePropsSubscriptionProvider_1.SequencePropsSubscriptionProvider, { children: [
                     jsx_runtime_1.jsxs(remotion_1.Internals.CurrentScaleContext.Provider, { value: value, children: [
                             jsx_runtime_1.jsx(ForceSpecificCursor_1.ForceSpecificCursor, {}), jsx_runtime_1.jsx(scale_lock_1.ScaleLockProvider, { children: jsx_runtime_1.jsxs("div", { style: background, children: [
-                                        jsx_runtime_1.jsx(remotion_1.Internals.CompositionRenderErrorContext.Provider, { value: compositionRenderErrorContextValue, children: canvasMounted ? jsx_runtime_1.jsx(MemoRoot, {}) : null }), jsx_runtime_1.jsxs(remotion_1.Internals.CanUseRemotionHooksProvider, { children: [
-                                                jsx_runtime_1.jsx(RenderErrorContext_1.RenderErrorContext.Provider, { value: renderErrorContextValue, children: jsx_runtime_1.jsx(EditorContent_1.EditorContent, { readOnlyStudio: readOnlyStudio, children: jsx_runtime_1.jsx(TopPanel_1.TopPanel, { drawRef: setDrawRef, bufferStateDelayInMilliseconds: exports.BUFFER_STATE_DELAY_IN_MILLISECONDS, onMounted: onMounted, readOnlyStudio: readOnlyStudio }) }) }), jsx_runtime_1.jsx(GlobalKeybindings_1.GlobalKeybindings, {})
-                                            ] })
+                                        jsx_runtime_1.jsx(remotion_1.Internals.CompositionRenderErrorContext.Provider, { value: compositionRenderErrorContextValue, children: canvasMounted ? jsx_runtime_1.jsx(MemoRoot, {}) : null }), jsx_runtime_1.jsx(remotion_1.Internals.CanUseRemotionHooksProvider, { children: jsx_runtime_1.jsx(RenderErrorContext_1.RenderErrorContext.Provider, { value: renderErrorContextValue, children: jsx_runtime_1.jsx(EditorContent_1.EditorContent, { readOnlyStudio: readOnlyStudio, children: jsx_runtime_1.jsx(TopPanel_1.TopPanel, { drawRef: setDrawRef, bufferStateDelayInMilliseconds: exports.BUFFER_STATE_DELAY_IN_MILLISECONDS, onMounted: onMounted, readOnlyStudio: readOnlyStudio }) }) }) })
                                     ] }) })
                         ] }), jsx_runtime_1.jsx(Modals_1.Modals, { readOnlyStudio: readOnlyStudio }), jsx_runtime_1.jsx(NotificationCenter_1.NotificationCenter, {})
                 ] }) }) }));
-    return canvas_capture_enabled_1.CANVAS_CAPTURE_ENABLED ? (jsx_runtime_1.jsx(StudioCanvasCapture_1.StudioCanvasCapture, { density: 2, children: editor })) : (editor);
+    return canvas_capture_enabled_1.CANVAS_CAPTURE_ENABLED ? (jsx_runtime_1.jsx(StudioCanvasCapture_1.StudioCanvasCapture, { density: 3, children: editor })) : (editor);
 };
 exports.Editor = Editor;

package/dist/components/EditorContent.js

@@ -4,6 +4,7 @@ exports.EditorContent = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
+const GlobalKeybindings_1 = require("./GlobalKeybindings");
 const InitialCompositionLoader_1 = require("./InitialCompositionLoader");
 const MenuToolbar_1 = require("./MenuToolbar");
 const SplitterContainer_1 = require("./Splitter/SplitterContainer");
@@ -38,7 +39,7 @@ const EditorContent = ({ readOnlyStudio, children }) => {
             jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { sticky: null, type: "flexer", children: children }), jsx_runtime_1.jsx(SplitterHandle_1.SplitterHandle, { allowToCollapse: "none", onCollapse: noop }), jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { sticky: null, type: "anti-flexer", children: showTimeline ? jsx_runtime_1.jsx(Timeline_1.Timeline, {}) : jsx_runtime_1.jsx(TimelineEmptyState_1.TimelineEmptyState, {}) })
         ] }));
     return (jsx_runtime_1.jsx(TimelineSelection_1.TimelineSelectionProvider, { children: jsx_runtime_1.jsxs(StudioClearSelectionArea, { children: [
-                jsx_runtime_1.jsx(InitialCompositionLoader_1.InitialCompositionLoader, {}), jsx_runtime_1.jsx(MenuToolbar_1.MenuToolbar, { readOnlyStudio: readOnlyStudio }), jsx_runtime_1.jsx(TimelineKeyframeDragState_1.TimelineKeyframeDragStateProvider, { children: content })
+                jsx_runtime_1.jsx(InitialCompositionLoader_1.InitialCompositionLoader, {}), jsx_runtime_1.jsx(MenuToolbar_1.MenuToolbar, { readOnlyStudio: readOnlyStudio }), jsx_runtime_1.jsx(GlobalKeybindings_1.GlobalKeybindings, { readOnlyStudio: readOnlyStudio }), jsx_runtime_1.jsx(TimelineKeyframeDragState_1.TimelineKeyframeDragStateProvider, { children: content })
             ] }) }));
 };
 exports.EditorContent = EditorContent;

package/dist/components/ExpandedTracksProvider.d.ts

@@ -6,6 +6,7 @@ type ExpandedTracksGetterContextValue = {
     readonly getIsExpanded: GetIsExpanded;
 };
 type ExpandedTracksSetterContextValue = {
+    readonly expandParentTracks: (nodePathInfo: SequenceNodePathInfo) => void;
     readonly toggleTrack: (nodePathInfo: SequenceNodePathInfo) => void;
     readonly migrateExpandedTracksForSubscriptionKey: (oldKey: SequencePropsSubscriptionKey, newKey: SequencePropsSubscriptionKey) => void;
 };

package/dist/components/ExpandedTracksProvider.js

@@ -4,11 +4,46 @@ exports.ExpandedTracksProvider = exports.ExpandedTracksSetterContext = exports.E
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const migrate_expanded_tracks_for_subscription_key_1 = require("../helpers/migrate-expanded-tracks-for-subscription-key");
-const persist_boolean_map_1 = require("../helpers/persist-boolean-map");
 const timeline_node_path_key_1 = require("../helpers/timeline-node-path-key");
 const SESSION_STORAGE_KEY = 'remotion.editor.expandedTracks';
+const onlyCollapsedTrackValues = (state) => {
+    const result = {};
+    for (const [key, value] of Object.entries(state)) {
+        if (value === false) {
+            result[key] = false;
+        }
+    }
+    return result;
+};
 const loadExpandedTracks = () => {
-    return (0, persist_boolean_map_1.loadPersistedBooleanMap)(SESSION_STORAGE_KEY);
+    if (typeof window === 'undefined') {
+        return {};
+    }
+    try {
+        const raw = window.sessionStorage.getItem(SESSION_STORAGE_KEY);
+        if (raw === null) {
+            return {};
+        }
+        const parsed = JSON.parse(raw);
+        if (!parsed || typeof parsed !== 'object') {
+            return {};
+        }
+        return onlyCollapsedTrackValues(parsed);
+    }
+    catch (_a) {
+        return {};
+    }
+};
+const persistExpandedTracks = (state) => {
+    if (typeof window === 'undefined') {
+        return;
+    }
+    try {
+        window.sessionStorage.setItem(SESSION_STORAGE_KEY, JSON.stringify(onlyCollapsedTrackValues(state)));
+    }
+    catch (_a) {
+        // Ignore quota errors or disabled storage.
+    }
 };
 exports.ExpandedTracksGetterContext = (0, react_1.createContext)({
     getIsExpanded: () => {
@@ -16,6 +51,9 @@ exports.ExpandedTracksGetterContext = (0, react_1.createContext)({
     },
 });
 exports.ExpandedTracksSetterContext = (0, react_1.createContext)({
+    expandParentTracks: () => {
+        throw new Error('ExpandedTracksSetterContext not initialized');
+    },
     toggleTrack: () => {
         throw new Error('ExpandedTracksSetterContext not initialized');
     },
@@ -25,11 +63,46 @@ exports.ExpandedTracksSetterContext = (0, react_1.createContext)({
 });
 const ExpandedTracksProvider = ({ children }) => {
     const [expandedTracks, setExpandedTracks] = (0, react_1.useState)(loadExpandedTracks);
+    const expandParentTracks = (0, react_1.useCallback)((nodePathInfo) => {
+        const keysToExpand = [];
+        for (let i = 0; i < nodePathInfo.auxiliaryKeys.length; i++) {
+            keysToExpand.push((0, timeline_node_path_key_1.timelineNodePathInfoToKey)({
+                ...nodePathInfo,
+                auxiliaryKeys: nodePathInfo.auxiliaryKeys.slice(0, i),
+            }));
+        }
+        if (keysToExpand.length === 0) {
+            return;
+        }
+        setExpandedTracks((prev) => {
+            let changed = false;
+            const next = { ...prev };
+            for (const key of keysToExpand) {
+                if (next[key] === false) {
+                    delete next[key];
+                    changed = true;
+                }
+            }
+            if (!changed) {
+                return prev;
+            }
+            persistExpandedTracks(next);
+            return next;
+        });
+    }, []);
     const toggleTrack = (0, react_1.useCallback)((nodePathInfo) => {
         setExpandedTracks((prev) => {
+            var _a;
             const key = (0, timeline_node_path_key_1.timelineNodePathInfoToKey)(nodePathInfo);
-            const next = (0, persist_boolean_map_1.toggleBooleanMapKey)(prev, key);
-            (0, persist_boolean_map_1.persistBooleanMap)(SESSION_STORAGE_KEY, next);
+            const next = { ...prev };
+            const isExpanded = (_a = next[key]) !== null && _a !== void 0 ? _a : true;
+            if (isExpanded) {
+                next[key] = false;
+            }
+            else {
+                delete next[key];
+            }
+            persistExpandedTracks(next);
             return next;
         });
     }, []);
@@ -39,20 +112,21 @@ const ExpandedTracksProvider = ({ children }) => {
             if (!next) {
                 return prev;
             }
-            (0, persist_boolean_map_1.persistBooleanMap)(SESSION_STORAGE_KEY, next);
+            persistExpandedTracks(next);
             return next;
         });
     }, []);
     const getterValue = (0, react_1.useMemo)(() => ({
         getIsExpanded: (nodePathInfo) => {
             var _a;
-            return (_a = expandedTracks[(0, timeline_node_path_key_1.timelineNodePathInfoToKey)(nodePathInfo)]) !== null && _a !== void 0 ? _a : false;
+            return (_a = expandedTracks[(0, timeline_node_path_key_1.timelineNodePathInfoToKey)(nodePathInfo)]) !== null && _a !== void 0 ? _a : true;
         },
     }), [expandedTracks]);
     const setterValue = (0, react_1.useMemo)(() => ({
+        expandParentTracks,
         toggleTrack,
         migrateExpandedTracksForSubscriptionKey: migrateExpandedTracks,
-    }), [toggleTrack, migrateExpandedTracks]);
+    }), [expandParentTracks, toggleTrack, migrateExpandedTracks]);
     return (jsx_runtime_1.jsx(exports.ExpandedTracksSetterContext.Provider, { value: setterValue, children: jsx_runtime_1.jsx(exports.ExpandedTracksGetterContext.Provider, { value: getterValue, children: children }) }));
 };
 exports.ExpandedTracksProvider = ExpandedTracksProvider;

package/dist/components/GlobalKeybindings.d.ts

@@ -1,2 +1,4 @@
 import type React from 'react';
-export declare const GlobalKeybindings: React.FC;
+export declare const GlobalKeybindings: React.FC<{
+    readonly readOnlyStudio: boolean;
+}>;

package/dist/components/GlobalKeybindings.js

@@ -2,18 +2,110 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.GlobalKeybindings = void 0;
 const react_1 = require("react");
+const remotion_1 = require("remotion");
+const calculate_timeline_1 = require("../helpers/calculate-timeline");
+const client_id_1 = require("../helpers/client-id");
+const show_browser_rendering_1 = require("../helpers/show-browser-rendering");
+const timeline_node_path_key_1 = require("../helpers/timeline-node-path-key");
 const use_keybinding_1 = require("../helpers/use-keybinding");
 const checkerboard_1 = require("../state/checkerboard");
 const modals_1 = require("../state/modals");
 const AskAiModal_1 = require("./AskAiModal");
 const CompositionSelector_1 = require("./CompositionSelector");
 const NotificationCenter_1 = require("./Notifications/NotificationCenter");
-const GlobalKeybindings = () => {
+const TimelineSelection_1 = require("./Timeline/TimelineSelection");
+const sequencePropShortcuts = {
+    p: 'style.translate',
+    r: 'style.rotate',
+    s: 'style.scale',
+    t: 'style.opacity',
+};
+const hasOwnProperty = (obj, key) => Object.prototype.hasOwnProperty.call(obj, key);
+const GlobalKeybindings = ({ readOnlyStudio }) => {
     const keybindings = (0, use_keybinding_1.useKeybinding)();
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
     const { setCheckerboard } = (0, react_1.useContext)(checkerboard_1.CheckerboardContext);
+    const currentSelection = (0, TimelineSelection_1.useCurrentTimelineSelectionStateAsRef)();
+    const { sequences } = (0, react_1.useContext)(remotion_1.Internals.SequenceManager);
+    const videoConfig = remotion_1.Internals.useUnsafeVideoConfig();
+    const { overrideIdToNodePathMappings } = (0, react_1.useContext)(remotion_1.Internals.OverrideIdsToNodePathsGettersContext);
+    const { type } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx).previewServerState;
     const { navigateToNextComposition, navigateToPreviousComposition } = (0, CompositionSelector_1.useCompositionNavigation)();
+    const video = remotion_1.Internals.useVideo();
+    const timeline = (0, react_1.useMemo)(() => {
+        if (videoConfig === null) {
+            return [];
+        }
+        return (0, calculate_timeline_1.calculateTimeline)({
+            sequences,
+            overrideIdsToNodePaths: overrideIdToNodePathMappings,
+        });
+    }, [overrideIdToNodePathMappings, sequences, videoConfig]);
+    const selectSequenceProp = (0, react_1.useCallback)((fieldKey) => {
+        const { selectedItems, selectItems } = currentSelection.current;
+        if (selectedItems.length !== 1) {
+            return false;
+        }
+        const [selection] = selectedItems;
+        if (selection.type !== 'sequence' && selection.type !== 'sequence-prop') {
+            return false;
+        }
+        const selectedTrackKey = (0, TimelineSelection_1.getTimelineSequenceSelectionKey)(selection.nodePathInfo);
+        const track = timeline.find((candidate) => candidate.nodePathInfo !== null &&
+            (0, timeline_node_path_key_1.timelineNodePathInfoToKey)(candidate.nodePathInfo) ===
+                selectedTrackKey);
+        if (!(track === null || track === void 0 ? void 0 : track.sequence.controls)) {
+            return false;
+        }
+        const { schema, currentRuntimeValueDotNotation } = track.sequence.controls;
+        if (!hasOwnProperty(schema, fieldKey) &&
+            !hasOwnProperty(currentRuntimeValueDotNotation, fieldKey)) {
+            return false;
+        }
+        selectItems([
+            {
+                type: 'sequence-prop',
+                nodePathInfo: {
+                    ...selection.nodePathInfo,
+                    auxiliaryKeys: ['controls', fieldKey],
+                },
+                key: fieldKey,
+            },
+        ]);
+        return true;
+    }, [currentSelection, timeline]);
+    const openRenderModal = (0, react_1.useCallback)(() => {
+        if (!video) {
+            return;
+        }
+        if (type !== 'connected' && !show_browser_rendering_1.SHOW_BROWSER_RENDERING && !readOnlyStudio) {
+            (0, NotificationCenter_1.showNotification)('Studio server is offline', 2000);
+            return;
+        }
+        const renderButton = document.getElementById('render-modal-button');
+        renderButton.click();
+    }, [readOnlyStudio, type, video]);
     (0, react_1.useEffect)(() => {
+        const onSequencePropKey = (event) => {
+            const key = event.key.toLowerCase();
+            const fieldKey = sequencePropShortcuts[key];
+            if (!fieldKey) {
+                return;
+            }
+            if (selectSequenceProp(fieldKey)) {
+                event.preventDefault();
+                return;
+            }
+            if (key === 't') {
+                setCheckerboard((c) => !c);
+                event.preventDefault();
+                return;
+            }
+            if (key === 'r') {
+                openRenderModal();
+                event.preventDefault();
+            }
+        };
         const nKey = keybindings.registerKeybinding({
             event: 'keypress',
             key: 'n',
@@ -65,17 +157,15 @@ const GlobalKeybindings = () => {
                 preventDefault: true,
             })
             : null;
-        const cKey = keybindings.registerKeybinding({
-            event: 'keypress',
-            key: 't',
-            callback: () => {
-                setCheckerboard((c) => !c);
-            },
+        const sequencePropKeys = Object.keys(sequencePropShortcuts).map((key) => keybindings.registerKeybinding({
+            event: 'keydown',
+            key,
+            callback: onSequencePropKey,
             commandCtrlKey: false,
-            preventDefault: true,
+            preventDefault: false,
             triggerIfInputFieldFocused: false,
             keepRegisteredWhenNotHighestContext: false,
-        });
+        }));
         const questionMark = keybindings.registerKeybinding({
             event: 'keypress',
             key: '?',
@@ -111,7 +201,9 @@ const GlobalKeybindings = () => {
         });
         return () => {
             nKey.unregister();
-            cKey.unregister();
+            for (const sequencePropKey of sequencePropKeys) {
+                sequencePropKey.unregister();
+            }
             questionMark.unregister();
             cmdKKey.unregister();
             cmdSKey.unregister();
@@ -121,6 +213,8 @@ const GlobalKeybindings = () => {
         };
     }, [
         keybindings,
+        openRenderModal,
+        selectSequenceProp,
         setCheckerboard,
         setSelectedModal,
         navigateToNextComposition,

package/dist/components/InspectorPanel/SequenceSelectionInspector.js

@@ -62,9 +62,9 @@ const SequenceExpandedInspector = ({ track }) => {
         }
         window.open(documentationLink, '_blank', 'noopener,noreferrer');
     }, [documentationLink]);
-    const titleStyle = (0, react_1.useMemo)(() => {
+    const subtitleStyle = (0, react_1.useMemo)(() => {
         return {
-            ...styles_1.sequenceHeaderTitle,
+            ...styles_1.sequenceHeaderSubtitle,
             cursor: documentationLink ? 'pointer' : 'default',
         };
     }, [documentationLink]);
@@ -103,7 +103,8 @@ const SequenceExpandedInspector = ({ track }) => {
         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.jsxs("div", { style: styles_1.sequenceHeader, children: [documentationLink ? (jsx_runtime_1.jsx("button", { type: "button", style: titleStyle, title: "Open component docs", onClick: openDocumentationLink, children: sequenceDisplayName })) : (jsx_runtime_1.jsx("div", { style: titleStyle, children: sequenceDisplayName })), jsx_runtime_1.jsx(InspectorSourceLocation_1.InspectorSourceLocation, { location: validatedLocation, canOpen: canOpenInEditor, onOpen: openFileLocation })
+            jsx_runtime_1.jsxs("div", { style: styles_1.sequenceHeader, children: [
+                    jsx_runtime_1.jsx("div", { style: styles_1.sequenceHeaderTitle, children: sequenceDisplayName }), documentationLink ? (jsx_runtime_1.jsx("button", { type: "button", style: subtitleStyle, title: "Open component docs", onClick: openDocumentationLink, children: track.sequence.controls.componentName })) : (jsx_runtime_1.jsx("div", { style: subtitleStyle, children: track.sequence.controls.componentName })), jsx_runtime_1.jsx(InspectorSourceLocation_1.InspectorSourceLocation, { location: validatedLocation, canOpen: canOpenInEditor, onOpen: openFileLocation })
                 ] }), jsx_runtime_1.jsx(InspectorSequenceSection_1.InspectorSequenceSection, { sequence: track.sequence, validatedLocation: validatedLocation, nodePathInfo: track.nodePathInfo, keyframeDisplayOffset: track.keyframeDisplayOffset, renderSectionHeader: (children) => (jsx_runtime_1.jsx(common_1.InspectorSectionHeader, { children: children })) })] }));
 };
 const SequenceSelectionInspector = ({ selection }) => {

package/dist/components/InspectorPanel/inspector-selection.d.ts

@@ -3,8 +3,8 @@ export type SequenceSectionSelection = Extract<TimelineSelection, {
     type: 'sequence' | 'sequence-prop' | 'sequence-all-effects' | 'sequence-effect' | 'sequence-effect-prop';
 }>;
 export declare const isSequenceSectionSelection: (selection: TimelineSelection) => selection is SequenceSectionSelection;
-type SequencePropSelection = Extract<TimelineSelection, {
-    type: 'sequence-prop' | 'sequence-effect-prop';
+type SameSequenceInspectorSelection = Extract<TimelineSelection, {
+    type: 'sequence-prop' | 'sequence-effect' | 'sequence-effect-prop';
 }>;
-export declare const getSameSequencePropInspectorSelection: (selections: readonly TimelineSelection[]) => SequencePropSelection | null;
+export declare const getSameSequenceInspectorSelection: (selections: readonly TimelineSelection[]) => SameSequenceInspectorSelection | null;
 export {};

package/dist/components/InspectorPanel/inspector-selection.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getSameSequencePropInspectorSelection = exports.isSequenceSectionSelection = void 0;
+exports.getSameSequenceInspectorSelection = exports.isSequenceSectionSelection = void 0;
 const TimelineSelection_1 = require("../Timeline/TimelineSelection");
 const isSequenceSectionSelection = (selection) => {
     return (selection.type === 'sequence' ||
@@ -10,18 +10,19 @@ const isSequenceSectionSelection = (selection) => {
         selection.type === 'sequence-effect-prop');
 };
 exports.isSequenceSectionSelection = isSequenceSectionSelection;
-const isSequencePropSelection = (selection) => {
+const isSameSequenceInspectorSelection = (selection) => {
     return (selection.type === 'sequence-prop' ||
+        selection.type === 'sequence-effect' ||
         selection.type === 'sequence-effect-prop');
 };
-const getSameSequencePropInspectorSelection = (selections) => {
+const getSameSequenceInspectorSelection = (selections) => {
     const firstSelection = selections[0];
-    if (!firstSelection || !isSequencePropSelection(firstSelection)) {
+    if (!firstSelection || !isSameSequenceInspectorSelection(firstSelection)) {
         return null;
     }
     const rootSequenceKey = (0, TimelineSelection_1.getTimelineSequenceSelectionKey)(firstSelection.nodePathInfo);
     for (const selection of selections) {
-        if (!isSequencePropSelection(selection)) {
+        if (!isSameSequenceInspectorSelection(selection)) {
             return null;
         }
         if ((0, TimelineSelection_1.getTimelineSequenceSelectionKey)(selection.nodePathInfo) !==
@@ -31,4 +32,4 @@ const getSameSequencePropInspectorSelection = (selections) => {
     }
     return firstSelection;
 };
-exports.getSameSequencePropInspectorSelection = getSameSequencePropInspectorSelection;
+exports.getSameSequenceInspectorSelection = getSameSequenceInspectorSelection;

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

@@ -8,6 +8,7 @@ export declare const inspectorSectionDivider: React.CSSProperties;
 export declare const sectionHeader: React.CSSProperties;
 export declare const sequenceHeader: React.CSSProperties;
 export declare const sequenceHeaderTitle: React.CSSProperties;
+export declare const sequenceHeaderSubtitle: React.CSSProperties;
 export declare const sectionHeaderRow: React.CSSProperties;
 export declare const sectionHeaderTitle: React.CSSProperties;
 export declare const sectionHeaderStart: React.CSSProperties;

package/dist/components/InspectorPanel/styles.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.keyframeEditorValue = exports.keyframeEditorLabel = exports.keyframeEditorRow = exports.detailValue = exports.detailLabel = exports.detailRow = exports.guideDetailsContainer = exports.detailsContainer = exports.centeredMessage = exports.selectedContainer = exports.resolveLinkStyle = exports.defaultPropsWarningMessages = exports.defaultPropsWarningContainer = exports.sectionHeaderEnd = exports.sectionHeaderStart = exports.sectionHeaderTitle = exports.sectionHeaderRow = exports.sequenceHeaderTitle = exports.sequenceHeader = exports.sectionHeader = exports.inspectorSectionDivider = exports.compositionSection = exports.visualControlsSection = exports.defaultPropsSection = exports.scrollableContainer = exports.container = void 0;
+exports.keyframeEditorValue = exports.keyframeEditorLabel = exports.keyframeEditorRow = exports.detailValue = exports.detailLabel = exports.detailRow = exports.guideDetailsContainer = exports.detailsContainer = exports.centeredMessage = exports.selectedContainer = exports.resolveLinkStyle = exports.defaultPropsWarningMessages = exports.defaultPropsWarningContainer = exports.sectionHeaderEnd = exports.sectionHeaderStart = exports.sectionHeaderTitle = exports.sectionHeaderRow = exports.sequenceHeaderSubtitle = exports.sequenceHeaderTitle = exports.sequenceHeader = exports.sectionHeader = exports.inspectorSectionDivider = exports.compositionSection = exports.visualControlsSection = exports.defaultPropsSection = exports.scrollableContainer = exports.container = void 0;
 const colors_1 = require("../../helpers/colors");
 const InspectorPanelLayout_1 = require("../InspectorPanelLayout");
 exports.container = {
@@ -62,6 +62,24 @@ exports.sequenceHeaderTitle = {
     textOverflow: 'ellipsis',
     whiteSpace: 'nowrap',
 };
+exports.sequenceHeaderSubtitle = {
+    alignSelf: 'flex-start',
+    backgroundColor: colors_1.BACKGROUND,
+    border: 'none',
+    color: colors_1.LIGHT_TEXT,
+    display: 'inline-flex',
+    fontFamily: 'sans-serif',
+    fontSize: 12,
+    lineHeight: '18px',
+    margin: 0,
+    maxWidth: '100%',
+    minWidth: 0,
+    overflow: 'hidden',
+    padding: 0,
+    textAlign: 'left',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+};
 exports.sectionHeaderRow = {
     alignItems: 'center',
     display: 'flex',