@remotion/studio 4.0.525 → 4.0.527

package/dist/components/Timeline/normalize-font-weight-for-keyframe.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.normalizeFontWeightForKeyframe = void 0;
+const normalizeFontWeightForKeyframe = (value) => {
+    if (value === 'normal') {
+        return 400;
+    }
+    if (value === 'bold') {
+        return 700;
+    }
+    if (typeof value === 'number') {
+        return Number.isFinite(value) ? value : null;
+    }
+    if (typeof value === 'string' && /^\d+(?:\.\d+)?$/.test(value)) {
+        return Number(value);
+    }
+    return null;
+};
+exports.normalizeFontWeightForKeyframe = normalizeFontWeightForKeyframe;

package/dist/components/Timeline/split-selected-timeline-item.d.ts

@@ -17,20 +17,23 @@ export declare const splitTimelineSequenceFromSource: ({ nodePathInfo, splitFram
     nodePathInfo: SequenceNodePathInfo;
     splitFrame: number;
 }) => Promise<boolean>;
-export declare const shouldHandleTimelineDuplicateShortcut: ({ shiftKey, }: {
-    readonly shiftKey: boolean;
-}) => boolean;
-export declare const shouldHandleTimelineSplitShortcut: ({ shiftKey, }: {
-    readonly shiftKey: boolean;
-}) => boolean;
-export declare const splitSelectedTimelineItems: ({ selections, sequences, overrideIdsToNodePaths, propStatuses, splitFrame, splitSequence, }: {
+export declare const splitTimelineSequencesFromSource: ({ sequences, }: {
+    sequences: {
+        nodePathInfo: SequenceNodePathInfo;
+        splitFrame: number;
+    }[];
+}) => Promise<boolean>;
+export declare const splitSelectedTimelineItems: ({ selections, sequences, overrideIdsToNodePaths, propStatuses, splitFrame, splitSequences, notify, }: {
     selections: readonly import("@remotion/canvas").CanvasSelectionItem[];
     sequences: TSequence[];
     overrideIdsToNodePaths: OverrideIdToNodePaths;
     propStatuses: PropStatuses | undefined;
     splitFrame: number;
-    splitSequence?: ((options: {
-        nodePathInfo: SequenceNodePathInfo;
-        splitFrame: number;
+    splitSequences?: ((options: {
+        sequences: {
+            nodePathInfo: SequenceNodePathInfo;
+            splitFrame: number;
+        }[];
     }) => Promise<boolean>) | undefined;
+    notify?: ((message: string, durationInMs: number) => void) | undefined;
 }) => Promise<boolean> | null;

package/dist/components/Timeline/split-selected-timeline-item.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.splitSelectedTimelineItems = exports.shouldHandleTimelineSplitShortcut = exports.shouldHandleTimelineDuplicateShortcut = exports.splitTimelineSequenceFromSource = exports.getTimelineSequenceSplitEligibility = void 0;
+exports.splitSelectedTimelineItems = exports.splitTimelineSequencesFromSource = exports.splitTimelineSequenceFromSource = exports.getTimelineSequenceSplitEligibility = void 0;
 const studio_shared_1 = require("@remotion/studio-shared");
 const remotion_1 = require("remotion");
 const NotificationCenter_1 = require("../Notifications/NotificationCenter");
@@ -88,12 +88,22 @@ const getTimelineSequenceSplitEligibility = ({ selection, sequence, splitFrame,
 };
 exports.getTimelineSequenceSplitEligibility = getTimelineSequenceSplitEligibility;
 const splitTimelineSequenceFromSource = ({ nodePathInfo, splitFrame, }) => {
-    const nodePath = nodePathInfo.sequenceSubscriptionKey;
+    return (0, exports.splitTimelineSequencesFromSource)({
+        sequences: [{ nodePathInfo, splitFrame }],
+    });
+};
+exports.splitTimelineSequenceFromSource = splitTimelineSequenceFromSource;
+const splitTimelineSequencesFromSource = ({ sequences, }) => {
     return (0, split_jsx_sequence_api_1.splitJsxSequence)({
-        fileName: nodePath.absolutePath,
-        nodePath: nodePath.nodePath,
-        sequenceKeys: nodePath.sequenceKeys,
-        splitFrame,
+        sequences: sequences.map(({ nodePathInfo, splitFrame }) => {
+            const nodePath = nodePathInfo.sequenceSubscriptionKey;
+            return {
+                fileName: nodePath.absolutePath,
+                nodePath: nodePath.nodePath,
+                sequenceKeys: nodePath.sequenceKeys,
+                splitFrame,
+            };
+        }),
     })
         .then((result) => {
         if (result.success) {
@@ -107,41 +117,54 @@ const splitTimelineSequenceFromSource = ({ nodePathInfo, splitFrame, }) => {
         return false;
     });
 };
-exports.splitTimelineSequenceFromSource = splitTimelineSequenceFromSource;
-const shouldHandleTimelineDuplicateShortcut = ({ shiftKey, }) => !shiftKey;
-exports.shouldHandleTimelineDuplicateShortcut = shouldHandleTimelineDuplicateShortcut;
-const shouldHandleTimelineSplitShortcut = ({ shiftKey, }) => shiftKey;
-exports.shouldHandleTimelineSplitShortcut = shouldHandleTimelineSplitShortcut;
-const splitSelectedTimelineItems = ({ selections, sequences, overrideIdsToNodePaths, propStatuses, splitFrame, splitSequence = exports.splitTimelineSequenceFromSource, }) => {
+exports.splitTimelineSequencesFromSource = splitTimelineSequencesFromSource;
+const splitSelectedTimelineItems = ({ selections, sequences, overrideIdsToNodePaths, propStatuses, splitFrame, splitSequences = exports.splitTimelineSequencesFromSource, notify = NotificationCenter_1.showNotification, }) => {
     var _a;
-    if (selections.length !== 1) {
+    if (selections.length === 0 ||
+        selections.some((selection) => selection.type !== 'sequence')) {
         return null;
     }
-    const [selection] = selections;
-    if (selection.type !== 'sequence') {
-        return null;
+    const eligible = [];
+    const skippedReasons = [];
+    for (const selection of selections) {
+        if (selection.type !== 'sequence') {
+            continue;
+        }
+        const track = (0, find_track_for_node_path_info_1.findTrackForNodePathInfo)({
+            sequences,
+            overrideIdsToNodePaths,
+            nodePathInfo: selection.nodePathInfo,
+        });
+        const sequencePropStatuses = propStatuses
+            ? remotion_1.Internals.getPropStatusesCtx(propStatuses, selection.nodePathInfo.sequenceSubscriptionKey)
+            : undefined;
+        const eligibility = (0, exports.getTimelineSequenceSplitEligibility)({
+            selection,
+            sequence: (_a = track === null || track === void 0 ? void 0 : track.sequence) !== null && _a !== void 0 ? _a : null,
+            splitFrame,
+            propStatuses: sequencePropStatuses,
+        });
+        if (eligibility.canSplit) {
+            eligible.push({
+                nodePathInfo: eligibility.nodePathInfo,
+                splitFrame,
+            });
+        }
+        else {
+            skippedReasons.push(eligibility.reason);
+        }
     }
-    const track = (0, find_track_for_node_path_info_1.findTrackForNodePathInfo)({
-        sequences,
-        overrideIdsToNodePaths,
-        nodePathInfo: selection.nodePathInfo,
-    });
-    const sequencePropStatuses = propStatuses
-        ? remotion_1.Internals.getPropStatusesCtx(propStatuses, selection.nodePathInfo.sequenceSubscriptionKey)
-        : undefined;
-    const eligibility = (0, exports.getTimelineSequenceSplitEligibility)({
-        selection,
-        sequence: (_a = track === null || track === void 0 ? void 0 : track.sequence) !== null && _a !== void 0 ? _a : null,
-        splitFrame,
-        propStatuses: sequencePropStatuses,
-    });
-    if (!eligibility.canSplit) {
-        (0, NotificationCenter_1.showNotification)(eligibility.reason, 4000);
+    if (eligible.length === 0) {
+        notify(selections.length === 1
+            ? skippedReasons[0]
+            : `None of the ${selections.length} selected clips can be split at the playhead`, 4000);
         return Promise.resolve(false);
     }
-    return splitSequence({
-        nodePathInfo: eligibility.nodePathInfo,
-        splitFrame,
+    return splitSequences({ sequences: eligible }).then((success) => {
+        if (success && skippedReasons.length > 0) {
+            notify(`Split ${eligible.length} ${eligible.length === 1 ? 'clip' : 'clips'}. Skipped ${skippedReasons.length} ${skippedReasons.length === 1 ? 'clip' : 'clips'} that could not be split.`, 4000);
+        }
+        return success;
     });
 };
 exports.splitSelectedTimelineItems = splitSelectedTimelineItems;

package/dist/components/Timeline/timeline-display-groups.d.ts

@@ -0,0 +1,9 @@
+import type { TimelineTrackData } from '../../helpers/get-timeline-sequence-sort-key';
+export type TimelineDisplayGroup = {
+    readonly key: string;
+    readonly numberOfSequences: number;
+};
+export type TimelineTrackWithDisplayGroup = TimelineTrackData & {
+    readonly displayGroup: TimelineDisplayGroup | null;
+};
+export declare const addTimelineDisplayGroups: (tracks: readonly TimelineTrackData[]) => TimelineTrackWithDisplayGroup[];

package/dist/components/Timeline/timeline-display-groups.js

@@ -0,0 +1,66 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.addTimelineDisplayGroups = void 0;
+const timeline_node_path_key_1 = require("../../helpers/timeline-node-path-key");
+const addTimelineDisplayGroups = (tracks) => {
+    var _a, _b;
+    const stacksBySequenceId = new Map();
+    const resolvedNodePathKeysByStack = new Map();
+    for (const track of tracks) {
+        // Only controlled sequences can eventually resolve to a source node.
+        const stack = track.sequence.controls === null ? null : track.sequence.getStack();
+        stacksBySequenceId.set(track.sequence.id, stack);
+        if (stack === null || track.nodePathInfo === null) {
+            continue;
+        }
+        const nodePathKey = `node-path:${(0, timeline_node_path_key_1.timelineSequenceNodePathToKey)(track.nodePathInfo.sequenceSubscriptionKey)}`;
+        const nodePathKeys = (_a = resolvedNodePathKeysByStack.get(stack)) !== null && _a !== void 0 ? _a : new Set();
+        nodePathKeys.add(nodePathKey);
+        resolvedNodePathKeysByStack.set(stack, nodePathKeys);
+    }
+    const displayKeys = tracks.map((track) => {
+        var _a;
+        if (track.nodePathInfo !== null) {
+            return `node-path:${(0, timeline_node_path_key_1.timelineSequenceNodePathToKey)(track.nodePathInfo.sequenceSubscriptionKey)}`;
+        }
+        const stack = (_a = stacksBySequenceId.get(track.sequence.id)) !== null && _a !== void 0 ? _a : null;
+        if (stack === null) {
+            return null;
+        }
+        const resolvedNodePathKeys = resolvedNodePathKeysByStack.get(stack);
+        if ((resolvedNodePathKeys === null || resolvedNodePathKeys === void 0 ? void 0 : resolvedNodePathKeys.size) === 1) {
+            const resolvedNodePathKey = resolvedNodePathKeys.values().next().value;
+            if (resolvedNodePathKey === undefined) {
+                throw new Error('Expected a resolved timeline node path key');
+            }
+            return resolvedNodePathKey;
+        }
+        // This identity is display-only. Source operations continue to require
+        // track.nodePathInfo.
+        return `stack:${stack}`;
+    });
+    const counts = new Map();
+    for (const key of displayKeys) {
+        if (key !== null) {
+            counts.set(key, ((_b = counts.get(key)) !== null && _b !== void 0 ? _b : 0) + 1);
+        }
+    }
+    return tracks.map((track, index) => {
+        const key = displayKeys[index];
+        if (key === null) {
+            return { ...track, displayGroup: null };
+        }
+        const numberOfSequences = counts.get(key);
+        if (numberOfSequences === undefined) {
+            throw new Error('Expected a timeline display group count');
+        }
+        return {
+            ...track,
+            displayGroup: {
+                key,
+                numberOfSequences,
+            },
+        };
+    });
+};
+exports.addTimelineDisplayGroups = addTimelineDisplayGroups;

package/dist/components/Timeline/use-timeline-asset-drop.js

@@ -10,6 +10,7 @@ const modals_1 = require("../../state/modals");
 const canvas_capture_drop_1 = require("../canvas-capture-drop");
 const drop_handler_data_1 = require("../drop-handler-data");
 const effect_drag_and_drop_1 = require("../effect-drag-and-drop");
+const element_drag_and_drop_1 = require("../element-drag-and-drop");
 const handle_drop_1 = require("../handle-drop");
 const NotificationCenter_1 = require("../Notifications/NotificationCenter");
 const SvgImportDialog_1 = require("../SvgImportDialog");
@@ -29,7 +30,6 @@ const useTimelineAssetDrop = () => {
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const [isAddingAsset, setIsAddingAsset] = (0, react_1.useState)(false);
     const [assetDropFrame, setAssetDropFrame] = (0, react_1.useState)(null);
-    const unsupportedDropNotifiedRef = (0, react_1.useRef)(false);
     const currentCompositionId = (canvasContent === null || canvasContent === void 0 ? void 0 : canvasContent.type) === 'composition' ? canvasContent.compositionId : null;
     const currentComposition = (0, react_1.useMemo)(() => {
         var _a;
@@ -42,13 +42,13 @@ const useTimelineAssetDrop = () => {
         compositionId: currentCompositionId,
     });
     const previewInteractive = previewServerState.type === 'connected' && (0, interactivity_enabled_1.isStudioInteractivityEnabled)();
-    const canInsertAsset = previewInteractive &&
+    const canReceiveElementDrop = previewInteractive &&
         !window.remotion_isReadOnlyStudio &&
-        (compositionComponentInfo === null || compositionComponentInfo === void 0 ? void 0 : compositionComponentInfo.canAddSequence) === true &&
         currentCompositionId !== null &&
         compositionFile !== null &&
         videoConfig !== null &&
         !isAddingAsset;
+    const canInsertAsset = canReceiveElementDrop && (compositionComponentInfo === null || compositionComponentInfo === void 0 ? void 0 : compositionComponentInfo.canAddSequence) === true;
     const getDropFrame = (0, react_1.useCallback)((event) => {
         if (videoConfig === null) {
             return null;
@@ -72,30 +72,28 @@ const useTimelineAssetDrop = () => {
             dataTransfer === null ||
             !(0, drop_handler_data_1.isSupportedDropEvent)(event) ||
             !isEventTargetInsideElement(event, timeline)) {
-            unsupportedDropNotifiedRef.current = false;
             setAssetDropFrame(null);
             return;
         }
-        const mayBeCanvasCapture = (0, drop_handler_data_1.isFileDragEvent)(event) && !window.remotion_isReadOnlyStudio;
-        const shouldNotifyAboutUnsupportedDrop = (compositionComponentInfo === null || compositionComponentInfo === void 0 ? void 0 : compositionComponentInfo.canAddSequence) === false &&
-            !mayBeCanvasCapture;
-        if (shouldNotifyAboutUnsupportedDrop &&
-            !unsupportedDropNotifiedRef.current) {
-            (0, NotificationCenter_1.showCannotAddSequenceDropNotification)();
-        }
-        unsupportedDropNotifiedRef.current = shouldNotifyAboutUnsupportedDrop;
+        const canDropElementIntoNewComposition = (compositionComponentInfo === null || compositionComponentInfo === void 0 ? void 0 : compositionComponentInfo.canAddSequence) === false &&
+            canReceiveElementDrop &&
+            (0, element_drag_and_drop_1.hasElementDragType)(dataTransfer);
         event.preventDefault();
         event.stopPropagation();
-        dataTransfer.dropEffect = canInsertAsset ? 'copy' : 'none';
+        dataTransfer.dropEffect =
+            canInsertAsset || canDropElementIntoNewComposition ? 'copy' : 'none';
         const scrollable = timeline_refs_1.scrollableRef.current;
         const shouldShowDropFrame = canInsertAsset &&
             scrollable !== null &&
             isEventTargetInsideElement(event, scrollable);
         setAssetDropFrame(shouldShowDropFrame ? getDropFrame(event) : null);
-    }, [canInsertAsset, compositionComponentInfo === null || compositionComponentInfo === void 0 ? void 0 : compositionComponentInfo.canAddSequence, getDropFrame]);
+    }, [
+        canInsertAsset,
+        canReceiveElementDrop,
+        compositionComponentInfo === null || compositionComponentInfo === void 0 ? void 0 : compositionComponentInfo.canAddSequence,
+        getDropFrame,
+    ]);
     const onAssetDrop = (0, react_1.useCallback)(async (event) => {
-        const unsupportedDropWasNotified = unsupportedDropNotifiedRef.current;
-        unsupportedDropNotifiedRef.current = false;
         setAssetDropFrame(null);
         const timeline = timeline_refs_1.timelineVerticalScroll.current;
         const { dataTransfer } = event;
@@ -130,13 +128,15 @@ const useTimelineAssetDrop = () => {
         }
         event.preventDefault();
         event.stopPropagation();
-        if (!canInsertAsset ||
+        const canDropElementIntoNewComposition = (compositionComponentInfo === null || compositionComponentInfo === void 0 ? void 0 : compositionComponentInfo.canAddSequence) === false &&
+            canReceiveElementDrop &&
+            (0, element_drag_and_drop_1.getElementDragData)(dataTransfer) !== null;
+        if ((!canInsertAsset && !canDropElementIntoNewComposition) ||
             currentCompositionId === null ||
             compositionFile === null ||
             videoConfig === null) {
-            if ((compositionComponentInfo === null || compositionComponentInfo === void 0 ? void 0 : compositionComponentInfo.canAddSequence) === false &&
-                !unsupportedDropWasNotified) {
-                (0, NotificationCenter_1.showCannotAddSequenceDropNotification)();
+            if ((compositionComponentInfo === null || compositionComponentInfo === void 0 ? void 0 : compositionComponentInfo.canAddSequence) === false) {
+                (0, NotificationCenter_1.showNotification)('Cannot insert this item: This composition component cannot accept a new <Sequence>.', 3000);
             }
             return;
         }
@@ -170,6 +170,7 @@ const useTimelineAssetDrop = () => {
         }
     }, [
         canInsertAsset,
+        canReceiveElementDrop,
         chooseSvgImportMode,
         compositionComponentInfo === null || compositionComponentInfo === void 0 ? void 0 : compositionComponentInfo.canAddSequence,
         compositionFile,
@@ -179,7 +180,6 @@ const useTimelineAssetDrop = () => {
         videoConfig,
     ]);
     const clearAssetDropFrame = (0, react_1.useCallback)(() => {
-        unsupportedDropNotifiedRef.current = false;
         setAssetDropFrame(null);
     }, []);
     (0, react_1.useEffect)(() => {

package/dist/components/Timeline/use-timeline-expanded-tree.d.ts

@@ -1,8 +1,9 @@
 import { type TSequence } from 'remotion';
 import type { SequenceNodePathInfo } from '../../helpers/get-timeline-sequence-sort-key';
-export declare const useTimelineSequenceHasExpandableContent: ({ sequence, nodePathInfo, }: {
+export declare const useTimelineSequenceHasExpandableContent: ({ sequence, nodePathInfo, selectedItems, }: {
     readonly sequence: TSequence;
     readonly nodePathInfo: SequenceNodePathInfo;
+    readonly selectedItems: readonly import("@remotion/canvas").CanvasSelectionItem[];
 }) => boolean;
 export declare const useTimelineExpandedTree: ({ sequence, nodePathInfo, includeTextContent, includeSourceControls, }: {
     readonly sequence: TSequence;

package/dist/components/Timeline/use-timeline-expanded-tree.js

@@ -9,10 +9,9 @@ const ExpandedTracksProvider_1 = require("../ExpandedTracksProvider");
 const get_node_keyframes_1 = require("./get-node-keyframes");
 const timeline_expanded_filter_1 = require("./timeline-expanded-filter");
 const TimelineSelection_1 = require("./TimelineSelection");
-const useTimelineSequenceHasExpandableContent = ({ sequence, nodePathInfo, }) => {
+const useTimelineSequenceHasExpandableContent = ({ sequence, nodePathInfo, selectedItems, }) => {
     const { propStatuses: visualModePropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesContext);
     const { getDragOverrides, getEffectDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeDragOverridesContext);
-    const { selectedItems } = (0, TimelineSelection_1.useTimelineSelection)();
     const selectedRowKeys = (0, react_1.useMemo)(() => (0, timeline_expanded_filter_1.getSelectedTimelineExpandedRowKeys)(selectedItems), [selectedItems]);
     const selectHasExpandableContent = (0, react_1.useCallback)((runtimeValues) => {
         const tree = (0, timeline_layout_1.buildTimelineTree)({

package/dist/components/TimelineCombobox.js

@@ -20,6 +20,7 @@ const label = {
     textAlign: 'left',
     textOverflow: 'ellipsis',
     userSelect: 'none',
+    WebkitUserSelect: 'none',
     whiteSpace: 'nowrap',
 };
 const TimelineCombobox = ({ values, selectedId, title, tooltipDelay, labelWidth = 32, renderLeftItem, unhoveredIconColor = colors_1.LIGHT_TEXT, }) => {

package/dist/components/Transcription/TranscriptionModal.js

@@ -280,7 +280,7 @@ const AdvancedSettings = ({ chunkLengthInSeconds, doSample, forceFullSequences,
                             title: 'Learn more about No-repeat n-gram size',
                         }, min: 0, name: "No-repeat n-gram size", onValueChanged: setNoRepeatNgramSize, step: 1, value: noRepeatNgramSize })] }), decodingValidationMessage ? (jsx_runtime_1.jsx("div", { id: TRANSCRIPTION_DECODING_MESSAGE_ID, "aria-live": "polite", style: { padding: '0 16px' }, children: jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { align: "flex-end", message: decodingValidationMessage, type: "error" }) })) : null] }));
 };
-const TranscriptionModal = ({ audioStreamIndex, displayName, requestInit, src, }) => {
+const TranscriptionModal = ({ audioStreamIndex, displayName, requestInit, src, target, }) => {
     var _a, _b, _c;
     const [tab, setTab] = (0, react_1.useState)('transcribe');
     const isModelCached = (0, react_1.useCallback)((model) => (0, whisper_webgpu_1.isWhisperModelCached)({ model }), []);
@@ -323,11 +323,14 @@ const TranscriptionModal = ({ audioStreamIndex, displayName, requestInit, src, }
         };
     }, []);
     const normalizedOutName = outName.normalize('NFC').toLowerCase();
-    const queuedOutputExists = captionJobs.some((job) => (job.status === 'idle' || job.status === 'running') &&
+    const queuedOutputExists = captionJobs.some((job) => job.target === null &&
+        (job.status === 'idle' || job.status === 'running') &&
         job.outName.normalize('NFC').toLowerCase() === normalizedOutName);
-    const outputValidationMessage = (_a = (0, caption_output_name_1.validateCaptionOutputName)(outName)) !== null && _a !== void 0 ? _a : (queuedOutputExists
-        ? 'Another caption job is already using this output file'
-        : null);
+    const outputValidationMessage = target === null
+        ? ((_a = (0, caption_output_name_1.validateCaptionOutputName)(outName)) !== null && _a !== void 0 ? _a : (queuedOutputExists
+            ? 'Another caption job is already using this output file'
+            : null))
+        : null;
     const exists = staticFiles.some((file) => file.name.normalize('NFC').toLowerCase() === normalizedOutName);
     const chunkValidationMessage = strideLengthInSeconds * 2 >= chunkLengthInSeconds
         ? 'Stride length must be less than half of chunk length'
@@ -371,7 +374,8 @@ const TranscriptionModal = ({ audioStreamIndex, displayName, requestInit, src, }
             displayName,
             audioStreamIndex,
             requestInit,
-            outName,
+            outName: target === null ? outName : 'Basic captions',
+            target,
             model: selectedModel,
             language: modelInfo.multilingual ? selectedLanguage : null,
             task: modelInfo.supportsTranslation ? selectedTask : 'transcribe',
@@ -398,6 +402,7 @@ const TranscriptionModal = ({ audioStreamIndex, displayName, requestInit, src, }
         forceFullSequences,
         noRepeatNgramSize,
         outName,
+        target,
         repetitionPenalty,
         requestInit,
         src,
@@ -410,17 +415,17 @@ const TranscriptionModal = ({ audioStreamIndex, displayName, requestInit, src, }
         temperature,
         topK,
     ]);
-    return (jsx_runtime_1.jsx(DismissableModal_1.DismissableModal, { ariaLabel: `Transcribe ${displayName}`, children: jsx_runtime_1.jsxs("div", { style: transcriptionModalStyle, children: [
-                jsx_runtime_1.jsx(ModalHeader_1.ModalHeader, { title: `Transcribe ${displayName}` }), jsx_runtime_1.jsxs("div", { style: render_modals_1.container, children: [
+    const title = target === null ? `Transcribe ${displayName}` : 'Generate captions';
+    return (jsx_runtime_1.jsx(DismissableModal_1.DismissableModal, { ariaLabel: title, children: jsx_runtime_1.jsxs("div", { style: transcriptionModalStyle, children: [
+                jsx_runtime_1.jsx(ModalHeader_1.ModalHeader, { title: title }), jsx_runtime_1.jsxs("div", { style: render_modals_1.container, children: [
                         jsx_runtime_1.jsx("div", { style: render_modals_1.flexer }), jsx_runtime_1.jsx(Button_1.Button, { onClick: onAddToQueue, disabled: !canTranscribe, title: transcribeDisabledReason, style: {
                                 ...render_modals_1.buttonStyle,
                                 backgroundColor: canTranscribe
                                     ? render_modals_1.buttonStyle.backgroundColor
                                     : colors_1.BLUE_DISABLED,
-                            }, children: "Transcribe" })
+                            }, children: target === null ? 'Transcribe' : 'Generate captions' })
                     ] }), jsx_runtime_1.jsxs("div", { style: transcriptionLayout, children: [
-                        jsx_runtime_1.jsxs("div", { style: render_modals_1.leftSidebar, children: [jsx_runtime_1.jsx(vertical_1.VerticalTab, { autoFocus: true, style: render_modals_1.horizontalTab, selected: tab === 'transcribe', onClick: () => setTab('transcribe'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(transcription_1.TranscriptionIcon, { color: color, style: render_modals_1.icon }) })), children: "Transcribe" }), jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'models', onClick: () => setTab('models'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(models_1.ModelsIcon, { color: color, style: render_modals_1.icon }) })), children: "Models" }), jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'advanced', onClick: () => setTab('advanced'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(gear_1.GearIcon, { color: color, style: render_modals_1.icon }) })), children: "Advanced" })] }), jsx_runtime_1.jsxs("div", { style: tab === 'transcribe' ? settingsPanel : hiddenPanel, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: [
-                                jsx_runtime_1.jsx(OutputSettings, { exists: exists, onOutNameChange: onOutNameChange, outName: outName, validationMessage: outputValidationMessage }), jsx_runtime_1.jsx(RenderModalHr_1.RenderModalHr, {}), jsx_runtime_1.jsx(ModelSettings, { cachedModels: cachedModels, selectedLanguage: selectedLanguage, selectedModel: selectedModel, selectedTask: selectedTask, setSelectedLanguage: setSelectedLanguage, setSelectedModel: setSelectedModel, setSelectedTask: setSelectedTask, supportState: supportState })
+                        jsx_runtime_1.jsxs("div", { style: render_modals_1.leftSidebar, children: [jsx_runtime_1.jsx(vertical_1.VerticalTab, { autoFocus: true, style: render_modals_1.horizontalTab, selected: tab === 'transcribe', onClick: () => setTab('transcribe'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(transcription_1.TranscriptionIcon, { color: color, style: render_modals_1.icon }) })), children: "Transcribe" }), jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'models', onClick: () => setTab('models'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(models_1.ModelsIcon, { color: color, style: render_modals_1.icon }) })), children: "Models" }), jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'advanced', onClick: () => setTab('advanced'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(gear_1.GearIcon, { color: color, style: render_modals_1.icon }) })), children: "Advanced" })] }), jsx_runtime_1.jsxs("div", { style: tab === 'transcribe' ? settingsPanel : hiddenPanel, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: [target === null ? (jsx_runtime_1.jsx(OutputSettings, { exists: exists, onOutNameChange: onOutNameChange, outName: outName, validationMessage: outputValidationMessage })) : null, target === null ? jsx_runtime_1.jsx(RenderModalHr_1.RenderModalHr, {}) : null, jsx_runtime_1.jsx(ModelSettings, { cachedModels: cachedModels, selectedLanguage: selectedLanguage, selectedModel: selectedModel, selectedTask: selectedTask, setSelectedLanguage: setSelectedLanguage, setSelectedModel: setSelectedModel, setSelectedTask: setSelectedTask, supportState: supportState })
                             ] }), jsx_runtime_1.jsx("div", { style: tab === 'advanced' ? advancedPanel : hiddenPanel, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: jsx_runtime_1.jsx(AdvancedSettings, { chunkLengthInSeconds: chunkLengthInSeconds, decodingValidationMessage: decodingValidationMessage, doSample: doSample, forceFullSequences: forceFullSequences, noRepeatNgramSize: noRepeatNgramSize, repetitionPenalty: repetitionPenalty, setChunkLengthInSeconds: setChunkLengthInSeconds, setDoSample: setDoSample, setForceFullSequences: setForceFullSequences, setNoRepeatNgramSize: setNoRepeatNgramSize, setRepetitionPenalty: setRepetitionPenalty, setStrideLengthInSeconds: setStrideLengthInSeconds, setTemperature: setTemperature, setTopK: setTopK, strideLengthInSeconds: strideLengthInSeconds, temperature: temperature, topK: topK, validationMessage: chunkValidationMessage }) }), jsx_runtime_1.jsx(Models_1.Models, { description: 'Models are downloaded automatically when needed.\nYou can also manage the browser cache here.', indent: true, visible: tab === 'models' })
                     ] })
             ] }) }));

package/dist/components/Transcription/TranscriptionModalWithOptionalWhisper.js

@@ -43,6 +43,6 @@ const LazyTranscriptionModal = react_1.default.lazy(async () => {
     return { default: TranscriptionModal };
 });
 const TranscriptionModalWithOptionalWhisper = ({ state }) => {
-    return (jsx_runtime_1.jsx(OptionalPackageModal_1.OptionalPackageModal, { ariaLabel: "Install transcription package", packageName: whisper_webgpu_capability_1.WHISPER_WEBGPU_PACKAGE, title: "Transcribe", children: jsx_runtime_1.jsx(react_1.Suspense, { fallback: null, children: jsx_runtime_1.jsx(LazyTranscriptionModal, { ...state }) }) }));
+    return (jsx_runtime_1.jsx(OptionalPackageModal_1.OptionalPackageModal, { ariaLabel: "Install transcription package", packageName: whisper_webgpu_capability_1.WHISPER_WEBGPU_PACKAGE, title: state.target === null ? 'Transcribe' : 'Generate captions', children: jsx_runtime_1.jsx(react_1.Suspense, { fallback: null, children: jsx_runtime_1.jsx(LazyTranscriptionModal, { ...state }) }) }));
 };
 exports.TranscriptionModalWithOptionalWhisper = TranscriptionModalWithOptionalWhisper;

package/dist/components/UpdateStatusContext.d.ts

@@ -6,12 +6,12 @@ export type Bug = {
     link: string;
     versions: string[];
 };
-type UpgradeState = 'idle' | 'upgrading' | 'upgraded' | 'shutting-down' | 'shutdown';
+type UpgradeState = 'idle' | 'upgrading' | 'upgraded' | 'restarting';
 type UpdateStatusContextValue = {
     readonly upgradeState: UpgradeState;
     readonly upgradeError: string | null;
     readonly upgrade: (version: string) => Promise<void>;
-    readonly shutdown: () => Promise<void>;
+    readonly restart: () => Promise<void>;
     readonly error: string | null;
     readonly info: UpdateAvailableResponse | null;
     readonly knownBugs: Bug[] | null;

package/dist/components/UpdateStatusContext.js

@@ -4,7 +4,7 @@ exports.useUpdateStatus = exports.UpdateStatusProvider = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
-const shut_down_studio_1 = require("../api/shut-down-studio");
+const restart_studio_1 = require("../api/restart-studio");
 const browser_studio_operations_1 = require("../helpers/browser-studio-operations");
 const can_show_updates_1 = require("../helpers/can-show-updates");
 const client_id_1 = require("../helpers/client-id");
@@ -35,16 +35,15 @@ const UpdateStatusProvider = ({ children }) => {
             busy.current = false;
         }
     }, []);
-    const shutdown = (0, react_1.useCallback)(async () => {
+    const restart = (0, react_1.useCallback)(async () => {
         if (busy.current) {
             return;
         }
         busy.current = true;
-        setUpgradeState('shutting-down');
+        setUpgradeState('restarting');
         setUpgradeError(null);
         try {
-            await (0, shut_down_studio_1.shutDownStudio)();
-            setUpgradeState('shutdown');
+            await (0, restart_studio_1.restartStudio)();
         }
         catch (err) {
             setUpgradeError(err.message);
@@ -109,9 +108,9 @@ const UpdateStatusProvider = ({ children }) => {
             upgradeState,
             upgradeError,
             upgrade,
-            shutdown,
+            restart,
         };
-    }, [error, info, knownBugs, upgradeState, upgradeError, upgrade, shutdown]);
+    }, [error, info, knownBugs, upgradeState, upgradeError, upgrade, restart]);
     return (jsx_runtime_1.jsx(UpdateStatusContext.Provider, { value: value, children: children }));
 };
 exports.UpdateStatusProvider = UpdateStatusProvider;

package/dist/components/UpdatesSettings.js

@@ -173,7 +173,7 @@ const RenderedReleaseNotes = ({ release }) => {
 };
 const UpdatesSettings = () => {
     const { remotionSkillsInfo } = (0, SettingsContext_1.useSettings)();
-    const { error, info, knownBugs, upgradeState, upgradeError, upgrade, shutdown, } = (0, UpdateStatusContext_1.useUpdateStatus)();
+    const { error, info, knownBugs, upgradeState, upgradeError, upgrade, restart } = (0, UpdateStatusContext_1.useUpdateStatus)();
     const [releaseNotes, setReleaseNotes] = (0, react_1.useState)(null);
     (0, react_1.useEffect)(() => {
         if (!(info === null || info === void 0 ? void 0 : info.updateAvailable)) {
@@ -239,11 +239,11 @@ const UpdatesSettings = () => {
                         ? 'Upgrading Remotion...'
                         : 'Remotion has been upgraded.' }), jsx_runtime_1.jsx("div", { style: text, children: upgradeState === 'upgrading'
                         ? 'This may take a few minutes. You can follow the progress in your terminal.'
-                        : upgradeState === 'shutdown'
-                            ? 'Studio is shutting down. Run your Studio start command again in the terminal to use the new version.'
-                            : 'Restart Studio to use the new version. Shut down the server below, then run your Studio start command again in the terminal.' }), upgradeState === 'upgraded' || upgradeState === 'shutting-down' ? (jsx_runtime_1.jsx("div", { style: { marginTop: 12 }, children: jsx_runtime_1.jsx(ModalButton_1.ModalButton, { onClick: shutdown, disabled: upgradeState === 'shutting-down', children: upgradeState === 'shutting-down'
-                            ? 'Shutting down...'
-                            : 'Shut down Studio' }) })) : null, upgradeError ? (jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { message: upgradeError, type: "error", align: "flex-start" })) : null] }));
+                        : upgradeState === 'restarting'
+                            ? 'Studio is restarting with the new version.'
+                            : 'Restart Studio to use the new version.' }), upgradeState === 'upgraded' || upgradeState === 'restarting' ? (jsx_runtime_1.jsx("div", { style: { marginTop: 12 }, children: jsx_runtime_1.jsx(ModalButton_1.ModalButton, { onClick: restart, disabled: upgradeState === 'restarting', children: upgradeState === 'restarting'
+                            ? 'Restarting...'
+                            : 'Restart Studio' }) })) : null, upgradeError ? (jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { message: upgradeError, type: "error", align: "flex-start" })) : null] }));
     }
     if (info === null) {
         return (jsx_runtime_1.jsx("div", { style: container, children: error ? (jsx_runtime_1.jsx("div", { style: { paddingTop: 12 }, children: jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { message: 'Could not check for updates: ' + error, align: "flex-start", type: "error" }) })) : (jsx_runtime_1.jsx("div", { style: title, children: "Checking for updates..." })) }));