@remotion/studio 4.0.522 → 4.0.523

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/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/TimelineInOutToggle.js

@@ -6,18 +6,23 @@ 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 client_id_1 = require("../helpers/client-id");
 const colors_1 = require("../helpers/colors");
 const use_keybinding_1 = require("../helpers/use-keybinding");
 const timelineInOutPointer_1 = require("../icons/timelineInOutPointer");
 const in_out_1 = require("../state/in-out");
 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 keyboard_shortcuts_1 = require("./keyboard-shortcuts");
+const getTooltipText = (pointType, action) => {
+    const shortcut = (0, keyboard_shortcuts_1.getKeyboardShortcutLabel)(action);
+    return [
+        `Mark ${pointType}`,
+        (0, use_keybinding_1.areKeyboardShortcutsDisabled)() || shortcut === '' ? null : `(${shortcut})`,
+        '- right click to clear',
+    ]
+        .filter(no_react_1.NoReactInternals.truthy)
+        .join(' ');
+};
 const style = {
     width: 17,
     height: 17,
@@ -29,6 +34,7 @@ exports.inOutHandles = (0, react_1.createRef)();
 exports.defaultInOutValue = { inFrame: null, outFrame: null };
 const TimelineInOutPointToggle = () => {
     var _a;
+    (0, client_id_1.useStudioConfigRevision)();
     const { inFrame, outFrame } = (0, in_out_1.useTimelineInOutFramePosition)();
     const { setInAndOutFrames } = (0, in_out_1.useTimelineSetInOutFramePosition)();
     const videoConfig = remotion_1.Internals.useUnsafeVideoConfig();
@@ -195,34 +201,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 +249,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(ControlButton_1.ControlButton, { title: getTooltipText('In', 'setInPoint'), "aria-label": getTooltipText('In', 'setInPoint'), 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', 'setOutPoint'), "aria-label": getTooltipText('Out', 'setOutPoint'), 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>;