@remotion/studio 4.0.522 → 4.0.524

package/dist/components/Timeline/TimelineSequenceRightEdgeDragHandle.js

@@ -33,7 +33,7 @@ var __importStar = (this && this.__importStar) || (function () {
     };
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TimelineSequenceRightEdgeDragHandle = exports.useTimelineSequenceFromDrag = exports.TimelineSequenceLeftEdgeDragHandle = exports.getTimelineSequenceFromDragTargets = exports.getTimelineSequenceLeftEdgeDragTargets = exports.getTimelineSequenceDurationDragTargets = exports.getTimelineSequenceFromDragKeyframeMoves = exports.getTimelineSequenceFromDragChanges = exports.getTimelineSequenceFromDragDelta = exports.getTimelineSequenceFromDragValue = exports.getTimelineSequenceDurationDragChanges = exports.getTimelineSequenceLeftEdgeDragChanges = exports.getTimelineSequenceLeftEdgeDragValues = exports.getTimelineSequenceLeftEdgeDragDelta = exports.getTimelineSequenceDurationDragValue = exports.isTimelineSequenceLeftEdgeDraggable = exports.canResizeTimelineSequenceDuration = exports.isTimelineSequenceDurationDraggable = exports.isCascadingSequence = exports.isTransitionSeriesSequence = exports.timelineSequenceFromDragSnapThresholdPx = void 0;
+exports.TimelineSequenceRightEdgeDragHandle = exports.useTimelineSequenceFromDrag = exports.TimelineSequenceLeftEdgeDragHandle = exports.getTimelineSequenceFromDragTargets = exports.getTimelineSequenceLeftEdgeDragTargets = exports.getTimelineSequenceDurationDragTargets = exports.getTimelineSequenceFromDragKeyframeMoves = exports.getTimelineSequenceFromDragChanges = exports.getTimelineSequenceFromDragDelta = exports.getTimelineSequenceFromDragValue = exports.getTimelineSequenceDurationDragChanges = exports.getTimelineSequenceLeftEdgeDragChanges = exports.getTimelineSequenceLeftEdgeDragValues = exports.getTimelineSequenceLeftEdgeDragDelta = exports.getTimelineSequenceDurationDragValue = exports.isTimelineSequenceLeftEdgeDraggable = exports.canResizeTimelineSequenceDuration = exports.isTimelineSequenceDurationDraggable = exports.isCascadingSequence = exports.isTransitionSeriesSequence = exports.getTimelineSequenceMediaDurationDragLimits = exports.TimelineSequenceMediaDurationDragLimitsProvider = exports.TimelineSequenceMediaDurationDragLimitsContext = exports.timelineSequenceFromDragSnapThresholdPx = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const canvas_1 = require("@remotion/canvas");
 const studio_shared_1 = require("@remotion/studio-shared");
@@ -53,6 +53,32 @@ const HANDLE_INSET = 6;
 const HANDLE_OUTSET = 8;
 const timelineSequenceEdgeDragThresholdPx = 4;
 exports.timelineSequenceFromDragSnapThresholdPx = 10;
+exports.TimelineSequenceMediaDurationDragLimitsContext = react_1.default.createContext(null);
+const TimelineSequenceMediaDurationDragLimitsProvider = ({ children }) => {
+    const limits = (0, react_1.useRef)(new Map());
+    return (jsx_runtime_1.jsx(exports.TimelineSequenceMediaDurationDragLimitsContext.Provider, { value: limits, children: children }));
+};
+exports.TimelineSequenceMediaDurationDragLimitsProvider = TimelineSequenceMediaDurationDragLimitsProvider;
+const getTimelineSequenceMediaDurationDragLimits = ({ cascadedStart, displayDurationInFrames, displayStart, effectiveMaxMediaDuration, explicitDurationInFrames, hasImplicitDuration, naturalMediaDuration, timelineDurationInFrames, }) => {
+    if (naturalMediaDuration === null ||
+        !Number.isFinite(naturalMediaDuration) ||
+        naturalMediaDuration <= 0) {
+        return null;
+    }
+    const initialDuration = explicitDurationInFrames !== null && explicitDurationInFrames !== void 0 ? explicitDurationInFrames : Math.ceil(displayStart +
+        Math.max(0, Math.min(displayDurationInFrames, timelineDurationInFrames - displayStart, effectiveMaxMediaDuration !== null && effectiveMaxMediaDuration !== void 0 ? effectiveMaxMediaDuration : Infinity)) -
+        cascadedStart);
+    const maximumDuration = 
+    // Keeping duration omitted represents the media's natural end. An
+    // explicit duration is only useful once its edge is before that end.
+    Math.ceil(displayStart + naturalMediaDuration - cascadedStart) -
+        (hasImplicitDuration ? 1 : 0);
+    if (hasImplicitDuration && initialDuration > maximumDuration) {
+        return null;
+    }
+    return { initialDuration, maximumDuration };
+};
+exports.getTimelineSequenceMediaDurationDragLimits = getTimelineSequenceMediaDurationDragLimits;
 const getTimelineSequenceEdgeSelectionInteraction = ({ button, selected, shiftKey, metaKey, ctrlKey, }) => {
     if (button !== 0 ||
         !(0, TimelineSelection_1.shouldSelectTimelineRowOnPointerDown)({
@@ -205,14 +231,8 @@ const isTimelineSequenceDurationDraggable = (sequence) => {
         Boolean(sequence.controls));
 };
 exports.isTimelineSequenceDurationDraggable = isTimelineSequenceDurationDraggable;
-const canResizeTimelineSequenceDuration = ({ sequence, status, }) => {
-    if ((status === null || status === void 0 ? void 0 : status.status) !== 'static') {
-        return false;
-    }
-    if (sequence.type === 'audio' || sequence.type === 'video') {
-        return status.codeValue !== undefined;
-    }
-    return true;
+const canResizeTimelineSequenceDuration = ({ status, }) => {
+    return (status === null || status === void 0 ? void 0 : status.status) === 'static';
 };
 exports.canResizeTimelineSequenceDuration = canResizeTimelineSequenceDuration;
 const isTimelineSequenceLeftEdgeDraggable = (sequence) => {
@@ -265,7 +285,10 @@ const getTimelineSequenceLeftEdgeDragValues = ({ initialDuration, initialFrom, i
     return {
         durationInFrames: initialDuration - clampedDeltaFrames,
         from: initialFrom + clampedDeltaFrames,
-        trimBefore: initialTrimBefore + clampedDeltaFrames * playbackRate,
+        // Division and multiplication by playbackRate may not cancel exactly.
+        trimBefore: clampedDeltaFrames === -initialTrimBefore / playbackRate
+            ? 0
+            : initialTrimBefore + clampedDeltaFrames * playbackRate,
     };
 };
 exports.getTimelineSequenceLeftEdgeDragValues = getTimelineSequenceLeftEdgeDragValues;
@@ -430,8 +453,9 @@ const findSequenceTrack = ({ tracks, nodePathInfo, }) => {
         return ((0, studio_shared_1.stringifySequenceExpandedRowKey)(candidate.nodePathInfo.sequenceSubscriptionKey) === key && candidate.nodePathInfo.index === nodePathInfo.index);
     });
 };
-const getTimelineSequenceDurationDragTargets = ({ draggedNodePathInfo, selectedItems, sequences, overrideIdsToNodePaths, propStatuses, timelineDurationInFrames, }) => {
+const getTimelineSequenceDurationDragTargets = ({ draggedNodePathInfo, draggedSequenceMediaDurationDragLimits, selectedSequenceMediaDurationDragLimits, selectedItems, sequences, overrideIdsToNodePaths, propStatuses, timelineDurationInFrames, }) => {
     var _a;
+    var _b, _c, _d;
     const draggedSelectionKey = (0, TimelineSelection_1.getTimelineSequenceSelectionKey)(draggedNodePathInfo);
     const selectedSequenceItems = selectedItems.filter((item) => item.type === 'sequence');
     const draggedItemIsSelected = selectedSequenceItems.some((item) => (0, TimelineSelection_1.getTimelineSequenceSelectionKey)(item.nodePathInfo) ===
@@ -459,7 +483,6 @@ const getTimelineSequenceDurationDragTargets = ({ draggedNodePathInfo, selectedI
         const nodePath = track.nodePathInfo.sequenceSubscriptionKey;
         const durationStatus = (_a = remotion_1.Internals.getPropStatusesCtx(propStatuses, nodePath)) === null || _a === void 0 ? void 0 : _a.durationInFrames;
         if (!(0, exports.canResizeTimelineSequenceDuration)({
-            sequence: originalSequence,
             status: durationStatus,
         })) {
             return null;
@@ -470,11 +493,27 @@ const getTimelineSequenceDurationDragTargets = ({ draggedNodePathInfo, selectedI
         }
         const key = (0, studio_shared_1.stringifySequenceSubscriptionKey)(nodePath);
         if (!targets.has(key)) {
+            const selectionKey = (0, TimelineSelection_1.getTimelineSequenceSelectionKey)(nodePathInfo);
+            const isMedia = originalSequence.type === 'audio' || originalSequence.type === 'video';
+            const isDraggedSequence = selectionKey === draggedSelectionKey;
+            const mediaDurationDragLimits = isMedia
+                ? isDraggedSequence
+                    ? draggedSequenceMediaDurationDragLimits
+                    : ((_b = selectedSequenceMediaDurationDragLimits === null || selectedSequenceMediaDurationDragLimits === void 0 ? void 0 : selectedSequenceMediaDurationDragLimits.get(selectionKey)) !== null && _b !== void 0 ? _b : null)
+                : null;
+            if (isMedia && mediaDurationDragLimits === null) {
+                return null;
+            }
             const minimumDuration = Math.max(1 - originalSequence.from, getMinimumSequenceDuration({ sequence: originalSequence, sequences }));
+            const initialDuration = (_c = mediaDurationDragLimits === null || mediaDurationDragLimits === void 0 ? void 0 : mediaDurationDragLimits.initialDuration) !== null && _c !== void 0 ? _c : originalSequence.duration;
+            const constrainedMaximumDuration = Math.min((_d = mediaDurationDragLimits === null || mediaDurationDragLimits === void 0 ? void 0 : mediaDurationDragLimits.maximumDuration) !== null && _d !== void 0 ? _d : Infinity, timelineDurationInFrames - track.cascadedStart);
+            const maximumDuration = isMedia
+                ? Math.max(minimumDuration, initialDuration, constrainedMaximumDuration)
+                : Math.max(minimumDuration, constrainedMaximumDuration);
             targets.set(key, {
                 fileName: nodePath.absolutePath,
-                initialDuration: originalSequence.duration,
-                maximumDuration: Math.max(minimumDuration, timelineDurationInFrames - track.cascadedStart),
+                initialDuration,
+                maximumDuration,
                 // A negative start needs enough duration to retain one visible frame.
                 minimumDuration,
                 nodePath,
@@ -1029,12 +1068,10 @@ const useTimelineSequenceFromDrag = ({ nodePathInfo, windowWidth, timelineDurati
         document.body.style.webkitUserSelect = 'none';
         // Register before React commits so no pointer move can arrive before
         // the global session listeners exist.
-        stopPointerSessionRef.current = (0, pointer_session_1.startCapturedPointerSession)({
+        stopPointerSessionRef.current = (0, pointer_session_1.startDeferredCapturedPointerSession)({
             event: e.nativeEvent,
-            // The bar is removed when it leaves the visible timeline. Capture on
-            // a stable element so the move continues until the pointer is released.
             captureTarget: e.currentTarget.ownerDocument.body,
-            onMove: (moveEvent) => {
+            onMove: (moveEvent, capturePointer) => {
                 const dragState = dragStateRef.current;
                 if (!dragState) {
                     return;
@@ -1049,6 +1086,10 @@ const useTimelineSequenceFromDrag = ({ nodePathInfo, windowWidth, timelineDurati
                 });
                 dragState.latestDeltaFrames = deltaFrames;
                 if (deltaFrames !== 0) {
+                    // The bar can be removed when it leaves the visible timeline.
+                    // Capture only after a real drag starts so clicks and double-clicks
+                    // remain targeted at the bar.
+                    capturePointer();
                     dragState.didMove = true;
                 }
                 for (const target of dragState.targets) {
@@ -1107,18 +1148,20 @@ const useTimelineSequenceFromDrag = ({ nodePathInfo, windowWidth, timelineDurati
     };
 };
 exports.useTimelineSequenceFromDrag = useTimelineSequenceFromDrag;
-const TimelineSequenceRightEdgeDragHandleInner = ({ nodePathInfo, windowWidth, timelineDurationInFrames, onDragEnd, onSelect, selected, }) => {
+const TimelineSequenceRightEdgeDragHandleInner = ({ nodePathInfo, mediaDurationDragLimits, windowWidth, timelineDurationInFrames, onDragEnd, onSelect, selected, }) => {
     const { setPropStatuses, setDragOverrides, clearDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
     const propStatusesRef = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesRefContext);
     const sequencesRef = (0, react_1.useContext)(remotion_1.Internals.SequenceManagerRefContext);
     const { overrideIdToNodePathMappings } = (0, react_1.useContext)(remotion_1.Internals.OverrideIdsToNodePathsGettersContext);
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const currentSelection = (0, TimelineSelection_1.useCurrentTimelineSelectionStateAsRef)();
+    const mediaDurationDragLimitsRegistry = (0, react_1.useContext)(exports.TimelineSequenceMediaDurationDragLimitsContext);
     const stopPointerSessionRef = (0, react_1.useRef)(null);
     const dragStateRef = (0, react_1.useRef)(null);
     // Keep latest props/setters available to window listeners installed once at pointerdown.
     const latestRef = (0, react_1.useRef)({
         nodePathInfo,
+        mediaDurationDragLimits,
         setPropStatuses,
         setDragOverrides,
         clearDragOverrides,
@@ -1129,6 +1172,7 @@ const TimelineSequenceRightEdgeDragHandleInner = ({ nodePathInfo, windowWidth, t
     });
     latestRef.current = {
         nodePathInfo,
+        mediaDurationDragLimits,
         setPropStatuses,
         setDragOverrides,
         clearDragOverrides,
@@ -1190,7 +1234,7 @@ const TimelineSequenceRightEdgeDragHandleInner = ({ nodePathInfo, windowWidth, t
     }, []);
     const onPointerDown = (0, react_1.useCallback)((e) => {
         var _a;
-        var _b;
+        var _b, _c;
         if (e.button !== 0) {
             return;
         }
@@ -1207,17 +1251,19 @@ const TimelineSequenceRightEdgeDragHandleInner = ({ nodePathInfo, windowWidth, t
             ? (windowWidth - timeline_layout_1.TIMELINE_PADDING * 2) / timelineDurationInFrames
             : 0;
         const canCalculateDelta = Number.isFinite(pxPerFrame) && pxPerFrame > 0;
-        const { nodePathInfo: latestNodePathInfo, overrideIdToNodePathMappings: latestOverrideIdsToNodePaths, } = latestRef.current;
+        const { nodePathInfo: latestNodePathInfo, mediaDurationDragLimits: latestMediaDurationDragLimits, overrideIdToNodePathMappings: latestOverrideIdsToNodePaths, } = latestRef.current;
         const { selectedItems: latestSelectedItems } = currentSelection.current;
         const targets = canCalculateDelta
-            ? ((_b = (0, exports.getTimelineSequenceDurationDragTargets)({
+            ? ((_c = (0, exports.getTimelineSequenceDurationDragTargets)({
                 draggedNodePathInfo: latestNodePathInfo,
+                draggedSequenceMediaDurationDragLimits: latestMediaDurationDragLimits,
+                selectedSequenceMediaDurationDragLimits: (_b = mediaDurationDragLimitsRegistry === null || mediaDurationDragLimitsRegistry === void 0 ? void 0 : mediaDurationDragLimitsRegistry.current) !== null && _b !== void 0 ? _b : null,
                 selectedItems: latestSelectedItems,
                 sequences: sequencesRef.current,
                 overrideIdsToNodePaths: latestOverrideIdsToNodePaths,
                 propStatuses: propStatusesRef.current,
                 timelineDurationInFrames,
-            })) !== null && _b !== void 0 ? _b : [])
+            })) !== null && _c !== void 0 ? _c : [])
             : [];
         (_a = stopPointerSessionRef.current) === null || _a === void 0 ? void 0 : _a.call(stopPointerSessionRef);
         dragStateRef.current = {
@@ -1248,12 +1294,13 @@ const TimelineSequenceRightEdgeDragHandleInner = ({ nodePathInfo, windowWidth, t
                 dragState.didMove = true;
             }
             for (const target of dragState.targets) {
-                latestRef.current.setDragOverrides(target.nodePath, 'durationInFrames', remotion_1.Internals.makeStaticDragOverride((0, exports.getTimelineSequenceDurationDragValue)({
+                const previewValue = (0, exports.getTimelineSequenceDurationDragValue)({
                     initialDuration: target.initialDuration,
                     deltaFrames,
                     maximumDuration: target.maximumDuration,
                     minimumDuration: target.minimumDuration,
-                })));
+                });
+                latestRef.current.setDragOverrides(target.nodePath, 'durationInFrames', remotion_1.Internals.makeStaticDragOverride(previewValue));
             }
         };
         const onUp = (pointerEvent) => {
@@ -1295,6 +1342,7 @@ const TimelineSequenceRightEdgeDragHandleInner = ({ nodePathInfo, windowWidth, t
     }, [
         currentSelection,
         finishDrag,
+        mediaDurationDragLimitsRegistry,
         propStatusesRef,
         selected,
         sequencesRef,

package/dist/components/Timeline/TimelineTimeIndicators.js

@@ -295,6 +295,7 @@ const TimelineTimeIndicatorsInner = react_1.default.memo(({ windowWidth, duratio
         return {
             ...container,
             width: windowWidth,
+            minWidth: '100%',
             overflow: 'hidden',
             pointerEvents: 'none',
         };

package/dist/components/Timeline/TimelineZoomControls.js

@@ -44,6 +44,7 @@ const is_current_selected_still_1 = require("../../helpers/is-current-selected-s
 const canvas_zoom_1 = require("../../icons/canvas-zoom");
 const timeline_zoom_1 = require("../../state/timeline-zoom");
 const z_index_1 = require("../../state/z-index");
+const ActionTooltip_1 = require("../ActionTooltip");
 const ControlButton_1 = require("../ControlButton");
 const layout_1 = require("../layout");
 const timeline_refs_1 = require("./timeline-refs");
@@ -123,7 +124,7 @@ const TimelineZoomControlsInner = ({ sliderMaxWidth }) => {
         return null;
     }
     return (jsx_runtime_1.jsxs("div", { style: container, children: [
-            jsx_runtime_1.jsx(ControlButton_1.ControlButton, { onClick: onMinusClicked, style: buttonStyle, title: "Zoom out timeline", role: 'ControlButton', type: "button", children: (color) => jsx_runtime_1.jsx(canvas_zoom_1.CanvasZoomOutIcon, { color: color }) }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(TimelineZoomSlider, { maxWidth: sliderMaxWidth, minZoom: minZoom, timelineViewportWidth: timelineViewportWidth }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(ControlButton_1.ControlButton, { onClick: onPlusClicked, style: buttonStyle, title: "Zoom in timeline", role: 'button', type: "button", children: (color) => jsx_runtime_1.jsx(canvas_zoom_1.CanvasZoomIcon, { color: color }) })
+            jsx_runtime_1.jsx(ActionTooltip_1.ActionTooltip, { label: "Zoom out timeline", shortcut: null, delay: 800, dismissOnClick: true, children: jsx_runtime_1.jsx(ControlButton_1.ControlButton, { onClick: onMinusClicked, style: buttonStyle, title: "", "aria-label": "Zoom out timeline", type: "button", children: (color) => jsx_runtime_1.jsx(canvas_zoom_1.CanvasZoomOutIcon, { color: color }) }) }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(TimelineZoomSlider, { maxWidth: sliderMaxWidth, minZoom: minZoom, timelineViewportWidth: timelineViewportWidth }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(ActionTooltip_1.ActionTooltip, { label: "Zoom in timeline", shortcut: null, delay: 800, dismissOnClick: true, children: jsx_runtime_1.jsx(ControlButton_1.ControlButton, { onClick: onPlusClicked, style: buttonStyle, title: "", "aria-label": "Zoom in timeline", type: "button", children: (color) => jsx_runtime_1.jsx(canvas_zoom_1.CanvasZoomIcon, { color: color }) }) })
         ] }));
 };
 exports.TimelineZoomControls = react_1.default.memo(TimelineZoomControlsInner);

package/dist/components/Timeline/timeline-field-display-utils.js

@@ -95,11 +95,14 @@ const formatNumberTimelineFieldValueForDisplay = ({ fieldSchema, value, }) => {
         const digits = (0, timeline_field_utils_1.getDecimalPlaces)(numericValue);
         return digits === 0 ? String(numericValue) : numericValue.toFixed(digits);
     }
-    return (0, timeline_field_utils_1.formatTimelineNumber)({
-        decimalPlaces: stepDecimals,
-        fixed: true,
-        value: numericValue,
-    });
+    // The step controls increments, not the precision of source or typed values.
+    // Keep finer values while trimming floating point noise.
+    const normalizedValue = (0, timeline_field_utils_1.getDecimalPlaces)(numericValue) > stepDecimals
+        ? Number(numericValue.toPrecision(15))
+        : numericValue;
+    return (0, timeline_field_utils_1.getDecimalPlaces)(normalizedValue) > stepDecimals
+        ? String(normalizedValue)
+        : normalizedValue.toFixed(stepDecimals);
 };
 const formatRotationTimelineFieldValueForDisplay = ({ fieldSchema, value, }) => {
     const configuredStep = fieldSchema.type === 'rotation-css' ||

package/dist/components/Timeline/use-asset-timeline-context-menu.d.ts

@@ -0,0 +1,2 @@
+import type { ComboboxValue } from '../NewComposition/ComboBox';
+export declare const useAssetTimelineContextMenu: () => ComboboxValue[] | null;

package/dist/components/Timeline/use-asset-timeline-context-menu.js

@@ -0,0 +1,52 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useAssetTimelineContextMenu = void 0;
+const react_1 = require("react");
+const remotion_1 = require("remotion");
+const browser_studio_operations_1 = require("../../helpers/browser-studio-operations");
+const client_id_1 = require("../../helpers/client-id");
+const get_file_manager_name_1 = require("../../helpers/get-file-manager-name");
+const NotificationCenter_1 = require("../Notifications/NotificationCenter");
+const actions_1 = require("../RenderQueue/actions");
+const get_copy_context_for_agents_menu_item_1 = require("./get-copy-context-for-agents-menu-item");
+const useAssetTimelineContextMenu = () => {
+    const { canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
+    const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
+    return (0, react_1.useMemo)(() => {
+        if ((canvasContent === null || canvasContent === void 0 ? void 0 : canvasContent.type) !== 'asset') {
+            return null;
+        }
+        const copyContextItem = (0, get_copy_context_for_agents_menu_item_1.getCopyContextForAgentsMenuItem)({
+            contextForAgents: window.remotion_publicFolderExists
+                ? `Asset: ${window.remotion_publicFolderExists}/${canvasContent.asset}`
+                : `Asset: staticFile(${JSON.stringify(canvasContent.asset)})`,
+        });
+        if ((0, browser_studio_operations_1.getBrowserStudioOperations)() !== null) {
+            return [copyContextItem];
+        }
+        return [
+            {
+                type: 'item',
+                id: 'open-asset-in-explorer',
+                label: `Show in ${(0, get_file_manager_name_1.getFileManagerName)(window.remotion_fileSystemPlatform)}`,
+                keyHint: null,
+                leftItem: null,
+                quickSwitcherLabel: null,
+                subMenu: null,
+                value: 'open-asset-in-explorer',
+                disabled: Boolean(window.remotion_isReadOnlyStudio) ||
+                    !window.remotion_publicFolderExists ||
+                    previewServerState.type !== 'connected',
+                onClick: () => {
+                    (0, actions_1.openInFileExplorer)({
+                        directory: window.remotion_publicFolderExists + '/' + canvasContent.asset,
+                    }).catch((err) => {
+                        (0, NotificationCenter_1.showNotification)(`Could not open file: ${err.message}`, 2000);
+                    });
+                },
+            },
+            copyContextItem,
+        ];
+    }, [canvasContent, previewServerState.type]);
+};
+exports.useAssetTimelineContextMenu = useAssetTimelineContextMenu;

package/dist/components/TimelineCombobox.d.ts

@@ -5,6 +5,7 @@ export declare const TimelineCombobox: React.FC<{
     readonly values: ComboboxValue[];
     readonly selectedId: string | number;
     readonly title: string;
+    readonly tooltipDelay: number | null;
     readonly labelWidth?: number;
     readonly renderLeftItem?: RenderInlineAction;
     readonly unhoveredIconColor?: string;

package/dist/components/TimelineCombobox.js

@@ -4,6 +4,7 @@ exports.TimelineCombobox = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const colors_1 = require("../helpers/colors");
 const caret_1 = require("../icons/caret");
+const ActionTooltip_1 = require("./ActionTooltip");
 const layout_1 = require("./layout");
 const SegmentedButton_1 = require("./SegmentedButton");
 const segmentedButtonStyle = {
@@ -21,7 +22,7 @@ const label = {
     userSelect: 'none',
     whiteSpace: 'nowrap',
 };
-const TimelineCombobox = ({ values, selectedId, title, labelWidth = 32, renderLeftItem, unhoveredIconColor = colors_1.LIGHT_TEXT, }) => {
+const TimelineCombobox = ({ values, selectedId, title, tooltipDelay, labelWidth = 32, renderLeftItem, unhoveredIconColor = colors_1.LIGHT_TEXT, }) => {
     const selected = values.find((value) => value.id === selectedId);
     const segments = [
         {
@@ -32,16 +33,19 @@ const TimelineCombobox = ({ values, selectedId, title, labelWidth = 32, renderLe
             leaveLeftSpace: true,
             onOpenChange: null,
             renderContent: (color) => (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [renderLeftItem ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [renderLeftItem(color), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 })
-                        ] })) : null, selected ? (jsx_runtime_1.jsx("div", { title: typeof selected.label === 'string' ? selected.label : undefined, style: { ...label, width: labelWidth }, children: selected.label })) : null, jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(caret_1.CaretDown, { color: color })
+                        ] })) : null, selected ? (jsx_runtime_1.jsx("div", { title: tooltipDelay === null && typeof selected.label === 'string'
+                            ? selected.label
+                            : undefined, style: { ...label, width: labelWidth }, children: selected.label })) : null, jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(caret_1.CaretDown, { color: color })
                 ] })),
             segmentId: 'selector',
             selectedId,
             style: { fontFamily: 'inherit', padding: '0 4px' },
-            title,
+            title: tooltipDelay === null ? title : null,
             type: 'menu',
             values,
         },
     ];
-    return (jsx_runtime_1.jsx(SegmentedButton_1.SegmentedButton, { segments: segments, style: segmentedButtonStyle, title: null }));
+    const button = (jsx_runtime_1.jsx(SegmentedButton_1.SegmentedButton, { segments: segments, style: segmentedButtonStyle, title: null }));
+    return tooltipDelay === null ? (button) : (jsx_runtime_1.jsx(ActionTooltip_1.ActionTooltip, { label: title, shortcut: null, delay: tooltipDelay, dismissOnClick: true, children: button }));
 };
 exports.TimelineCombobox = TimelineCombobox;

package/dist/components/TimelineInOutToggle.js

@@ -5,19 +5,13 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const player_1 = require("@remotion/player");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
-const no_react_1 = require("remotion/no-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 timelineInOutPointer_1 = require("../icons/timelineInOutPointer");
 const in_out_1 = require("../state/in-out");
+const ActionTooltip_1 = require("./ActionTooltip");
 const ControlButton_1 = require("./ControlButton");
-const getTooltipText = (pointType, key) => [
-    `Mark ${pointType}`,
-    (0, use_keybinding_1.areKeyboardShortcutsDisabled)() ? null : `(${key})`,
-    '- right click to clear',
-]
-    .filter(no_react_1.NoReactInternals.truthy)
-    .join(' ');
 const style = {
     width: 17,
     height: 17,
@@ -29,6 +23,11 @@ exports.inOutHandles = (0, react_1.createRef)();
 exports.defaultInOutValue = { inFrame: null, outFrame: null };
 const TimelineInOutPointToggle = () => {
     var _a;
+    const inShortcut = (0, use_keyboard_shortcut_label_1.useKeyboardShortcutLabel)('setInPoint');
+    const outShortcut = (0, use_keyboard_shortcut_label_1.useKeyboardShortcutLabel)('setOutPoint');
+    const inAriaShortcut = (0, use_keyboard_shortcut_label_1.useKeyboardShortcutAriaKeyShortcuts)('setInPoint');
+    const outAriaShortcut = (0, use_keyboard_shortcut_label_1.useKeyboardShortcutAriaKeyShortcuts)('setOutPoint');
+    const shortcutsDisabled = (0, use_keybinding_1.areKeyboardShortcutsDisabled)();
     const { inFrame, outFrame } = (0, in_out_1.useTimelineInOutFramePosition)();
     const { setInAndOutFrames } = (0, in_out_1.useTimelineSetInOutFramePosition)();
     const videoConfig = remotion_1.Internals.useUnsafeVideoConfig();
@@ -195,34 +194,31 @@ const TimelineInOutPointToggle = () => {
             return;
         }
         const iKey = keybindings.registerKeybinding({
-            event: 'keypress',
-            key: 'i',
+            event: 'keydown',
+            action: 'setInPoint',
             callback: (e) => {
                 onInMark(e);
             },
-            commandCtrlKey: false,
             preventDefault: true,
             triggerIfInputFieldFocused: false,
             keepRegisteredWhenNotHighestContext: false,
         });
         const oKey = keybindings.registerKeybinding({
-            event: 'keypress',
-            key: 'o',
+            event: 'keydown',
+            action: 'setOutPoint',
             callback: (e) => {
                 onOutMark(e);
             },
-            commandCtrlKey: false,
             preventDefault: true,
             triggerIfInputFieldFocused: false,
             keepRegisteredWhenNotHighestContext: false,
         });
         const xKey = keybindings.registerKeybinding({
-            event: 'keypress',
-            key: 'x',
+            event: 'keydown',
+            action: 'clearInOutPoints',
             callback: () => {
                 onInOutClear(confId);
             },
-            commandCtrlKey: false,
             preventDefault: true,
             triggerIfInputFieldFocused: false,
             keepRegisteredWhenNotHighestContext: false,
@@ -246,7 +242,7 @@ const TimelineInOutPointToggle = () => {
         };
     }, [confId, onInMark, onInOutClear, onOutMark]);
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-            jsx_runtime_1.jsx(ControlButton_1.ControlButton, { title: getTooltipText('In', 'I'), "aria-label": getTooltipText('In', 'I'), style: buttonStyle, onClick: onInMark, onContextMenu: clearInMark, disabled: !videoConfig || isFirstFrame, children: (color) => (jsx_runtime_1.jsx(timelineInOutPointer_1.TimelineInPointer, { color: inFrame === null ? color : colors_1.BLUE, style: style })) }), jsx_runtime_1.jsx(ControlButton_1.ControlButton, { title: getTooltipText('Out', 'O'), "aria-label": getTooltipText('Out', 'O'), style: buttonStyle, onClick: onOutMark, onContextMenu: clearOutMark, disabled: !videoConfig || isLastFrame, children: (color) => (jsx_runtime_1.jsx(timelineInOutPointer_1.TimelineOutPointer, { color: outFrame === null ? color : colors_1.BLUE, style: style })) })
+            jsx_runtime_1.jsx(ActionTooltip_1.ActionTooltip, { label: "In point", shortcut: shortcutsDisabled ? null : inShortcut, delay: 800, dismissOnClick: true, children: jsx_runtime_1.jsx(ControlButton_1.ControlButton, { title: "", "aria-label": "In point", "aria-description": "Right click to clear", "aria-keyshortcuts": shortcutsDisabled ? undefined : inAriaShortcut || undefined, style: buttonStyle, onClick: onInMark, onContextMenu: clearInMark, disabled: !videoConfig || isFirstFrame, children: (color) => (jsx_runtime_1.jsx(timelineInOutPointer_1.TimelineInPointer, { color: inFrame === null ? color : colors_1.BLUE, style: style })) }) }), jsx_runtime_1.jsx(ActionTooltip_1.ActionTooltip, { label: "Out point", shortcut: shortcutsDisabled ? null : outShortcut, delay: 800, dismissOnClick: true, children: jsx_runtime_1.jsx(ControlButton_1.ControlButton, { title: "", "aria-label": "Out point", "aria-description": "Right click to clear", "aria-keyshortcuts": shortcutsDisabled ? undefined : outAriaShortcut || undefined, style: buttonStyle, onClick: onOutMark, onContextMenu: clearOutMark, disabled: !videoConfig || isLastFrame, children: (color) => (jsx_runtime_1.jsx(timelineInOutPointer_1.TimelineOutPointer, { color: outFrame === null ? color : colors_1.BLUE, style: style })) }) })
         ] }));
 };
 exports.TimelineInOutPointToggle = TimelineInOutPointToggle;

package/dist/components/Transcription/LazyModels.d.ts

@@ -0,0 +1 @@
+export { Models as default } from './Models';

package/dist/components/Transcription/LazyModels.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+const Models_1 = require("./Models");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return Models_1.Models; } });

package/dist/components/Transcription/Models.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export declare const Models: React.FC<{
+    readonly description: string | null;
+    readonly indent: boolean;
+    readonly visible: boolean;
+}>;

package/dist/components/Transcription/Models.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Models = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const whisper_webgpu_1 = require("@remotion/whisper-webgpu");
+const react_1 = require("react");
+const ModelManager_1 = require("../ModelManager");
+const AVAILABLE_MODELS = (0, whisper_webgpu_1.getAvailableModels)();
+const Models = ({ description, indent, visible }) => {
+    const isModelCached = (0, react_1.useCallback)((model) => (0, whisper_webgpu_1.isWhisperModelCached)({ model }), []);
+    const loadModel = (0, react_1.useCallback)((model, onProgress) => (0, whisper_webgpu_1.loadWhisperModel)({
+        model,
+        onProgress: (progress) => onProgress(progress.progress),
+    }), []);
+    const removeModel = (0, react_1.useCallback)((model) => (0, whisper_webgpu_1.removeWhisperModel)({ model }), []);
+    return (jsx_runtime_1.jsx(ModelManager_1.ModelManager, { ariaLabel: "Whisper models", availableModels: AVAILABLE_MODELS, description: description, indent: indent, isModelCached: isModelCached, loadModel: loadModel, prepare: whisper_webgpu_1.clearStaleModels, removeModel: removeModel, visible: visible }));
+};
+exports.Models = Models;

package/dist/components/Transcription/TranscriptionModal.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import type { TranscriptionModalState } from '../../state/modals';
+export declare const TranscriptionModal: React.FC<TranscriptionModalState>;