@remotion/studio 4.0.526 → 4.0.528

package/dist/components/InspectorPanel/CompositionMetadata.js

@@ -31,6 +31,7 @@ const computedContainerStyle = {
     ...InputDragger_1.inputDraggerContainerStyle,
     textAlign: 'right',
     userSelect: 'none',
+    WebkitUserSelect: 'none',
 };
 const computedValueStyle = {
     color: colors_1.WHITE_ALPHA_40,
@@ -39,10 +40,12 @@ const computedValueStyle = {
     fontStyle: 'italic',
     lineHeight: '20px',
     userSelect: 'none',
+    WebkitUserSelect: 'none',
 };
 const metadataFormatterStyle = {
     fontSize: 13,
     userSelect: 'none',
+    WebkitUserSelect: 'none',
 };
 const metadataDraggerStyles = {
     durationInFrames: {
@@ -113,6 +116,7 @@ const metadataLabelText = {
     overflow: 'hidden',
     textOverflow: 'ellipsis',
     userSelect: 'none',
+    WebkitUserSelect: 'none',
     whiteSpace: 'nowrap',
 };
 const dimensionPresets = [

package/dist/components/InspectorPanel/EasingInspector.js

@@ -113,6 +113,7 @@ const EasingInspector = ({ selection }) => {
         }
         return (0, easing_inspector_selection_1.getEasingSelectionFromCurrentKeyframes)({
             keyframeDisplayOffset: track.keyframeDisplayOffset,
+            keyframePlaybackRate: track.keyframePlaybackRate,
             nodePathInfo: selection.nodePathInfo,
             propStatus: easingUpdate.propStatus,
             segmentIndex: easingUpdate.segmentIndex,
@@ -123,6 +124,7 @@ const EasingInspector = ({ selection }) => {
         : (0, get_timeline_keyframes_1.getKeyframeDisplayOffset)({
             propStatus: easingUpdate.propStatus,
             keyframeDisplayOffset: track.keyframeDisplayOffset,
+            keyframePlaybackRate: track.keyframePlaybackRate,
         });
     const state = (0, react_1.useMemo)(() => {
         if (initialEasing === null || currentEasingSelection === null) {
@@ -154,7 +156,8 @@ const EasingInspector = ({ selection }) => {
             previewServerState.type !== 'connected') {
             return;
         }
-        const sourceFrame = timelinePosition - easingKeyframeDisplayOffset;
+        const sourceFrame = (timelinePosition - easingKeyframeDisplayOffset) *
+            track.keyframePlaybackRate;
         const value = remotion_1.Internals.getEffectiveVisualModeValue({
             propStatus: easingUpdate.propStatus,
             dragOverrideValue: easingDetails.dragOverrideValue,
@@ -208,7 +211,8 @@ const EasingInspector = ({ selection }) => {
     const renderHeader = (0, react_1.useCallback)(() => (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
             jsx_runtime_1.jsx(common_1.InspectorBackAction, { disabled: parentSelection === null, onClick: onSelectParent, title: "Back to property", children: fieldLabel }), easingUpdate === null || track === null ? null : (jsx_runtime_1.jsx(KeyframeEasingNavigator_1.KeyframeEasingNavigator, { currentSelection: currentEasingSelection !== null && currentEasingSelection !== void 0 ? currentEasingSelection : selection, includeEasings: true, keyframes: easingUpdate.propStatus.keyframes.map((keyframe) => ({
                     ...keyframe,
-                    frame: keyframe.frame + easingKeyframeDisplayOffset,
+                    frame: keyframe.frame / track.keyframePlaybackRate +
+                        easingKeyframeDisplayOffset,
                 })), nodePathInfo: selection.nodePathInfo }))] })), [
         currentEasingSelection,
         easingUpdate,

package/dist/components/InspectorPanel/ElementLibraryButton.js

@@ -45,6 +45,7 @@ const elementLibraryDropdownLabelStyle = {
     textAlign: 'left',
     textOverflow: 'ellipsis',
     userSelect: 'none',
+    WebkitUserSelect: 'none',
     whiteSpace: 'nowrap',
 };
 const elementLibraryDropdownCaretStyle = {
@@ -81,7 +82,7 @@ const ElementLibraryButton = () => {
             segmentId: 'element-library',
             selectedId: null,
             style: elementLibraryDropdownSegmentStyle,
-            title: 'Choose an Element library to browse inside Studio.',
+            title: 'Choose an Element Library to browse inside Studio.',
             tooltipLabel: null,
             type: 'menu',
             values: [

package/dist/components/InspectorPanel/KeyframeEasingNavigator.js

@@ -98,7 +98,7 @@ const TimelineNavigatorItem = ({ extendLineLeft, extendLineRight, item, onSelect
 };
 const KeyframeEasingNavigator = ({ currentSelection, includeEasings, keyframes, nodePathInfo }) => {
     const { isSelected, selectItems } = (0, TimelineSelection_1.useTimelineSelection)();
-    const setFrame = remotion_1.Internals.useTimelineSetFrame();
+    const setFrame = remotion_1.Internals.Timeline.useTimelineSeekFrame();
     const videoConfig = (0, remotion_1.useVideoConfig)();
     const items = (0, react_1.useMemo)(() => (0, keyframe_easing_navigator_items_1.getKeyframeEasingNavigatorItems)({
         includeEasings,

package/dist/components/InspectorPanel/KeyframeInspector.js

@@ -12,9 +12,7 @@ const is_menu_item_1 = require("../Menu/is-menu-item");
 const InputDragger_1 = require("../NewComposition/InputDragger");
 const call_delete_keyframe_1 = require("../Timeline/call-delete-keyframe");
 const call_move_keyframe_1 = require("../Timeline/call-move-keyframe");
-const get_easing_selection_after_keyframe_delete_1 = require("../Timeline/get-easing-selection-after-keyframe-delete");
 const get_timeline_keyframes_1 = require("../Timeline/get-timeline-keyframes");
-const imperative_state_1 = require("../Timeline/imperative-state");
 const parse_keyframe_field_from_node_path_1 = require("../Timeline/parse-keyframe-field-from-node-path");
 const TimelineEffectPropItem_1 = require("../Timeline/TimelineEffectPropItem");
 const TimelineSelection_1 = require("../Timeline/TimelineSelection");
@@ -80,7 +78,7 @@ const KeyframeInspector = ({ selection }) => {
             return null;
         }
         const nodePath = selection.nodePathInfo.sequenceSubscriptionKey;
-        const { keyframeDisplayOffset } = track;
+        const { keyframeDisplayOffset, keyframePlaybackRate } = track;
         if (keyframeField.type === 'sequence') {
             const sequenceFields = (0, timeline_layout_1.getFieldsToShow)({
                 schema: track.sequence.controls.schema,
@@ -100,18 +98,25 @@ const KeyframeInspector = ({ selection }) => {
                 field: sequenceField,
                 fieldLabel: (_d = sequenceField.description) !== null && _d !== void 0 ? _d : sequenceField.key,
                 fileName: nodePath.absolutePath,
+                keyframePlaybackRate,
                 keyframeDisplayOffset: (0, get_timeline_keyframes_1.getKeyframeDisplayOffset)({
                     propStatus: sequencePropStatus,
                     keyframeDisplayOffset,
+                    keyframePlaybackRate,
                 }),
                 nodePath,
                 propStatus: sequencePropStatus,
                 schema: track.sequence.controls.schema,
-                sourceFrame: selection.frame -
-                    (0, get_timeline_keyframes_1.getKeyframeDisplayOffset)({
+                sourceFrame: (0, get_timeline_keyframes_1.getKeyframeSourceFrame)({
+                    displayFrame: selection.frame,
+                    propStatus: sequencePropStatus,
+                    keyframeDisplayOffset: (0, get_timeline_keyframes_1.getKeyframeDisplayOffset)({
                         propStatus: sequencePropStatus,
                         keyframeDisplayOffset,
+                        keyframePlaybackRate,
                     }),
+                    keyframePlaybackRate,
+                }),
             };
         }
         const effect = track.sequence.effects[keyframeField.effectIndex];
@@ -143,18 +148,25 @@ const KeyframeInspector = ({ selection }) => {
             field: effectField,
             fieldLabel: (_g = effectField.description) !== null && _g !== void 0 ? _g : effectField.key,
             fileName: nodePath.absolutePath,
+            keyframePlaybackRate,
             keyframeDisplayOffset: (0, get_timeline_keyframes_1.getKeyframeDisplayOffset)({
                 propStatus: effectPropStatus,
                 keyframeDisplayOffset,
+                keyframePlaybackRate,
             }),
             nodePath,
             propStatus: effectPropStatus,
             schema: effect.schema,
-            sourceFrame: selection.frame -
-                (0, get_timeline_keyframes_1.getKeyframeDisplayOffset)({
+            sourceFrame: (0, get_timeline_keyframes_1.getKeyframeSourceFrame)({
+                displayFrame: selection.frame,
+                propStatus: effectPropStatus,
+                keyframeDisplayOffset: (0, get_timeline_keyframes_1.getKeyframeDisplayOffset)({
                     propStatus: effectPropStatus,
                     keyframeDisplayOffset,
+                    keyframePlaybackRate,
                 }),
+                keyframePlaybackRate,
+            }),
             validatedLocation: {
                 source: nodePath.absolutePath,
                 line: 1,
@@ -188,9 +200,11 @@ const KeyframeInspector = ({ selection }) => {
         if (details === null) {
             return;
         }
-        const toFrame = (0, keyframe_inspector_frame_1.getInspectorKeyframeSourceFrame)({
+        const toFrame = (0, get_timeline_keyframes_1.getKeyframeSourceFrame)({
             displayFrame,
             keyframeDisplayOffset: details.keyframeDisplayOffset,
+            keyframePlaybackRate: details.keyframePlaybackRate,
+            propStatus: details.propStatus,
         });
         if (displayFrame === selection.frame || toFrame === details.sourceFrame) {
             clearFrameDragOverride(details);
@@ -227,9 +241,11 @@ const KeyframeInspector = ({ selection }) => {
             durationInFrames: videoConfig.durationInFrames,
             frame: value,
         });
-        const toFrame = (0, keyframe_inspector_frame_1.getInspectorKeyframeSourceFrame)({
+        const toFrame = (0, get_timeline_keyframes_1.getKeyframeSourceFrame)({
             displayFrame,
             keyframeDisplayOffset: details.keyframeDisplayOffset,
+            keyframePlaybackRate: details.keyframePlaybackRate,
+            propStatus: details.propStatus,
         });
         setDraftFrame(displayFrame);
         clearFrameDragOverride(details);
@@ -289,19 +305,7 @@ const KeyframeInspector = ({ selection }) => {
         if (details === null || previewServerState.type !== 'connected') {
             return;
         }
-        const easingSelection = (0, update_selected_easing_1.canEditEasingForInterpolationFunction)(details.propStatus.interpolationFunction)
-            ? (0, get_easing_selection_after_keyframe_delete_1.getEasingSelectionAfterKeyframeDelete)({
-                deletedSourceFrames: [details.sourceFrame],
-                keyframeDisplayOffset: details.keyframeDisplayOffset,
-                nodePathInfo: selection.nodePathInfo,
-                propStatus: details.propStatus,
-                timelinePosition: (0, imperative_state_1.getCurrentFrame)(),
-            })
-            : null;
-        if (easingSelection !== null) {
-            selectItems([easingSelection], { reveal: true });
-        }
-        else if (parentSelection !== null) {
+        if (parentSelection !== null) {
             selectItems([parentSelection], { reveal: true });
         }
         if (details.type === 'sequence') {
@@ -331,7 +335,6 @@ const KeyframeInspector = ({ selection }) => {
         parentSelection,
         previewServerState,
         selectItems,
-        selection.nodePathInfo,
         setPropStatuses,
     ]);
     if (details === null || track === null) {
@@ -340,7 +343,8 @@ const KeyframeInspector = ({ selection }) => {
     return (jsx_runtime_1.jsxs("div", { style: styles_1.selectedContainer, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: [
             jsx_runtime_1.jsx(SequenceInspectorHeader_1.SequenceInspectorSections, { track: track }), jsx_runtime_1.jsx(common_1.InspectorBackAction, { disabled: parentSelection === null, onClick: onSelectParent, title: "Back to property", children: details.fieldLabel }), jsx_runtime_1.jsx(KeyframeEasingNavigator_1.KeyframeEasingNavigator, { currentSelection: selection, includeEasings: (0, update_selected_easing_1.canEditEasingForInterpolationFunction)(details.propStatus.interpolationFunction), keyframes: details.propStatus.keyframes.map((keyframe) => ({
                     ...keyframe,
-                    frame: keyframe.frame + details.keyframeDisplayOffset,
+                    frame: keyframe.frame / details.keyframePlaybackRate +
+                        details.keyframeDisplayOffset,
                 })), nodePathInfo: selection.nodePathInfo }), jsx_runtime_1.jsxs("div", { style: styles_1.detailsWithInlineAction, children: [
                     jsx_runtime_1.jsxs("div", { style: styles_1.detailsBeforeInlineAction, children: [
                             jsx_runtime_1.jsx(common_1.InspectorDetailRow, { label: "Frame", children: jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: draftFrame, status: "ok", onValueChange: onFrameChange, onValueChangeEnd: onFrameChangeEnd, onTextChange: () => undefined, min: 0, max: Math.max(0, videoConfig.durationInFrames - 1), step: 1, formatter: (value) => String(Math.round(Number(value))), rightAlign: true, small: true }) }), jsx_runtime_1.jsx("div", { style: styles_1.keyframeEditorRow, children: jsx_runtime_1.jsx(common_1.InspectorDetailRow, { label: details.fieldLabel, children: jsx_runtime_1.jsx("div", { style: styles_1.keyframeEditorValue, children: details.type === 'sequence' ? (jsx_runtime_1.jsx(TimelineSequencePropItem_1.TimelineSequenceKeyframedValue, { field: details.field, fileName: details.fileName, nodePath: details.nodePath, schema: details.schema, propStatus: details.propStatus, sourceFrame: details.sourceFrame })) : (jsx_runtime_1.jsx(TimelineEffectPropItem_1.TimelineEffectPropValue, { field: details.field, nodePath: details.nodePath, validatedLocation: details.validatedLocation, sourceFrame: details.sourceFrame, runtimeValueStore: null })) }) }) })

package/dist/components/InspectorPanel/MultiSequenceInspector.js

@@ -7,11 +7,14 @@ const react_1 = require("react");
 const remotion_1 = require("remotion");
 const calculate_timeline_1 = require("../../helpers/calculate-timeline");
 const colors_1 = require("../../helpers/colors");
+const interactivity_enabled_1 = require("../../helpers/interactivity-enabled");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
+const scissors_1 = require("../../icons/scissors");
 const InspectorInfoHeader_1 = require("../InspectorInfoHeader");
 const InspectorPanelLayout_1 = require("../InspectorPanelLayout");
 const layout_1 = require("../layout");
 const is_menu_item_1 = require("../Menu/is-menu-item");
+const split_selected_timeline_item_1 = require("../Timeline/split-selected-timeline-item");
 const TimelineRowLayoutContext_1 = require("../Timeline/TimelineRowLayoutContext");
 const CollapsibleInspectorSection_1 = require("./CollapsibleInspectorSection");
 const common_1 = require("./common");
@@ -28,8 +31,14 @@ const selectionCountStyle = {
     textOverflow: 'ellipsis',
     whiteSpace: 'nowrap',
 };
+const actionIconStyle = {
+    display: 'block',
+    height: 16,
+    width: 16,
+};
 const MultiSequenceInspector = ({ selections, readOnlyStudio }) => {
     const { sequences } = (0, react_1.useContext)(remotion_1.Internals.SequenceManager);
+    const timelinePosition = remotion_1.Internals.Timeline.useTimelinePosition();
     const { overrideIdToNodePathMappings } = (0, react_1.useContext)(remotion_1.Internals.OverrideIdsToNodePathsGettersContext);
     const { propStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesContext);
     const { getDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeDragOverridesContext);
@@ -93,11 +102,33 @@ const MultiSequenceInspector = ({ selections, readOnlyStudio }) => {
         });
         return ((_a = allFields[0]) !== null && _a !== void 0 ? _a : []).filter((field) => allFields.every((candidate) => candidate.some((other) => other.key === field.key && other.fieldSchema === field.fieldSchema)));
     }, [getDragOverrides, propStatuses, runtimeValues, targets]);
+    const canSplit = !readOnlyStudio && (0, interactivity_enabled_1.isStudioInteractivityEnabled)();
+    const onSplit = (0, react_1.useCallback)(() => {
+        var _a;
+        if (!canSplit) {
+            return;
+        }
+        (_a = (0, split_selected_timeline_item_1.splitSelectedTimelineItems)({
+            selections,
+            sequences,
+            overrideIdsToNodePaths: overrideIdToNodePathMappings,
+            propStatuses,
+            splitFrame: timelinePosition,
+        })) === null || _a === void 0 ? void 0 : _a.catch(() => undefined);
+    }, [
+        canSplit,
+        overrideIdToNodePathMappings,
+        propStatuses,
+        selections,
+        sequences,
+        timelinePosition,
+    ]);
     return (jsx_runtime_1.jsxs("div", { style: styles_1.scrollableContainer, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: [
             jsx_runtime_1.jsx(InspectorInfoHeader_1.InspectorInfoHeader, { padding: "4px 0", children: jsx_runtime_1.jsxs("div", { style: selectionCountStyle, children: [selections.length, " sequences selected"] }) }), jsx_runtime_1.jsx("div", { role: "separator", style: styles_1.sequenceHeaderDivider }), targets === null ? (jsx_runtime_1.jsx(common_1.InspectorMessage, { children: "Sequence controls unavailable" })) : fields.length === 0 ? (jsx_runtime_1.jsx(common_1.InspectorMessage, { children: "No shared controls" })) : (jsx_runtime_1.jsx(TimelineRowLayoutContext_1.TimelineRowLayoutContext.Provider, { value: TimelineRowLayoutContext_1.INSPECTOR_TIMELINE_ROW_LAYOUT, children: timeline_layout_1.SCHEMA_FIELD_GROUPS.map((group) => {
                     const groupedFields = fields.filter((field) => field.group === group.id);
                     return groupedFields.length === 0 ? null : (jsx_runtime_1.jsx(CollapsibleInspectorSection_1.CollapsibleInspectorSection, { collapsible: true, label: group.label, sectionId: `multi-sequence-${group.id}`, children: groupedFields.map((field) => (jsx_runtime_1.jsx(MultiSequenceField_1.MultiSequenceField, { field: field, targets: targets, readOnlyStudio: readOnlyStudio }, JSON.stringify(targets.map((target) => target.nodePath)) +
                             field.key))) }, group.id));
-                }) }))] }));
+                }) })), jsx_runtime_1.jsx(CollapsibleInspectorSection_1.CollapsibleInspectorSection, { collapsible: true, label: "Actions", sectionId: "multi-sequence-actions", children: jsx_runtime_1.jsx(common_1.InspectorQuickActionsSection, { children: jsx_runtime_1.jsx(common_1.InspectorQuickAction, { disabled: !canSplit, onClick: onSplit, title: canSplit ? undefined : 'Studio is read-only', renderIcon: (color) => (jsx_runtime_1.jsx(scissors_1.ScissorsIcon, { style: actionIconStyle, color: color })), children: "Split selected" }) }) })
+        ] }));
 };
 exports.MultiSequenceInspector = MultiSequenceInspector;

package/dist/components/InspectorPanel/MultiSequenceNumberField.js

@@ -63,7 +63,7 @@ const NumericAxis = ({ field, values, axis, onPreview, onSave, onClear }) => {
             }
         }, children: jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: dragValue !== null && dragValue !== void 0 ? dragValue : coordinates[0], "aria-label": axis === null
                 ? ((_d = field.description) !== null && _d !== void 0 ? _d : field.key)
-                : `Offset ${['X', 'Y', 'Z'][axis]}`, title: "Type to set all values; drag to adjust each value", status: "ok", small: true, rightAlign: false, min: min, max: max, step: step, snapToStep: axis === null, dragDecimalPlaces: decimalPlaces, dragSensitivity: axis === null ? 1 : 3, buttonStyle: { paddingLeft: 0 }, style: { width: 70 }, formatter: (value) => mixed && dragValue === null
+                : `Offset ${['X', 'Y', 'Z'][axis]}`, title: "Type to set all values; drag to adjust each value", status: "ok", small: true, rightAlign: false, min: min, max: max, step: step, allowStepMismatch: true, integerOnly: schema.type === 'number' && schema.integer === true, snapToStep: axis === null, dragDecimalPlaces: decimalPlaces, dragSensitivity: axis === null ? 1 : 3, buttonStyle: { paddingLeft: 0 }, style: { width: 70 }, formatter: (value) => mixed && dragValue === null
                 ? 'Mixed'
                 : (0, timeline_field_display_utils_1.formatTimelineFieldValueForDisplay)({ fieldSchema: schema, value }), onTextChange: noop_1.noop, onValueChange: (value, source) => {
                 var _a;

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

@@ -6,7 +6,9 @@ type SequenceInspectorSourceLocation = {
     readonly openFileLocation: () => void;
     readonly validatedLocation: CodePosition | null;
 };
-export declare const useSequenceInspectorSourceLocation: (sequence: import("remotion").TSequence) => SequenceInspectorSourceLocation;
+export declare const useSequenceInspectorSourceLocation: (sequence: import("remotion").TSequence & {
+    loopDisplay: import("@remotion/canvas").TimelineLoopDisplay | undefined;
+}) => SequenceInspectorSourceLocation;
 export declare const SequenceInspectorHeader: React.FC<{
     readonly sourceLocation: SequenceInspectorSourceLocation;
     readonly track: TimelineTrackData;

package/dist/components/InspectorPanel/SequenceSelectionInspector.js

@@ -6,15 +6,20 @@ const react_1 = require("react");
 const remotion_1 = require("remotion");
 const client_id_1 = require("../../helpers/client-id");
 const interactivity_enabled_1 = require("../../helpers/interactivity-enabled");
+const use_media_metadata_1 = require("../../helpers/use-media-metadata");
 const audio_1 = require("../../icons/audio");
+const background_removal_1 = require("../../icons/background-removal");
 const duplicate_1 = require("../../icons/duplicate");
 const scissors_1 = require("../../icons/scissors");
 const snowflake_1 = require("../../icons/snowflake");
+const transcription_1 = require("../../icons/transcription");
 const trash_1 = require("../../icons/trash");
+const modals_1 = require("../../state/modals");
 const ConfirmationDialog_1 = require("../ConfirmationDialog");
 const InspectorSequenceSection_1 = require("../InspectorSequenceSection");
 const is_menu_item_1 = require("../Menu/is-menu-item");
 const NotificationCenter_1 = require("../Notifications/NotificationCenter");
+const public_output_name_1 = require("../public-output-name");
 const split_video_from_audio_api_1 = require("../split-video-from-audio-api");
 const duplicate_selected_timeline_item_1 = require("../Timeline/duplicate-selected-timeline-item");
 const split_selected_timeline_item_1 = require("../Timeline/split-selected-timeline-item");
@@ -26,6 +31,7 @@ const CollapsibleInspectorSection_1 = require("./CollapsibleInspectorSection");
 const common_1 = require("./common");
 const ConnectedCompositionsSection_1 = require("./ConnectedCompositionsSection");
 const SequenceInspectorHeader_1 = require("./SequenceInspectorHeader");
+const SequenceWrapAction_1 = require("./SequenceWrapAction");
 const styles_1 = require("./styles");
 const use_track_for_selection_1 = require("./use-track-for-selection");
 const actionIconStyle = {
@@ -70,8 +76,10 @@ const SplitSequenceQuickAction = ({ selection, track }) => {
     return (jsx_runtime_1.jsx(common_1.InspectorQuickAction, { disabled: !canSplit, onClick: onSplit, title: disabledReason, renderIcon: (color) => (jsx_runtime_1.jsx(scissors_1.ScissorsIcon, { style: actionIconStyle, color: color })), children: "Split clip" }));
 };
 const SequenceSourceQuickActions = ({ selection, track, validatedSource }) => {
+    var _a;
     const timelinePosition = remotion_1.Internals.Timeline.useTimelinePosition();
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
+    const { setSelectedModal } = (0, react_1.useContext)(modals_1.SetSelectedModalContext);
     const { propStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesContext);
     const { setPropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
     const confirm = (0, ConfirmationDialog_1.useConfirmationDialog)();
@@ -90,6 +98,66 @@ const SequenceSourceQuickActions = ({ selection, track, validatedSource }) => {
         validatedSource,
     });
     const sourceActionsDisabled = previewServerState.type !== 'connected' || !(0, interactivity_enabled_1.isStudioInteractivityEnabled)();
+    const mediaSequence = track.sequence.type === 'video' || track.sequence.type === 'audio'
+        ? track.sequence
+        : null;
+    const mediaMetadata = (0, use_media_metadata_1.useMediaMetadata)((_a = mediaSequence === null || mediaSequence === void 0 ? void 0 : mediaSequence.src) !== null && _a !== void 0 ? _a : null);
+    const transcriptionDisabledReason = sourceActionsDisabled
+        ? 'Studio is read-only'
+        : selection.nodePathInfo.numberOfSequencesWithThisNodePath > 1
+            ? 'Programmatically duplicated media cannot be transcribed from source'
+            : undefined;
+    const videoMattingDisabledReason = sourceActionsDisabled
+        ? 'Studio is read-only'
+        : selection.nodePathInfo.numberOfSequencesWithThisNodePath > 1
+            ? 'Programmatically duplicated videos cannot have their background removed from source'
+            : undefined;
+    const onGenerateCaptions = (0, react_1.useCallback)(() => {
+        if (transcriptionDisabledReason !== undefined || mediaSequence === null) {
+            return;
+        }
+        const nodePath = selection.nodePathInfo.sequenceSubscriptionKey;
+        setSelectedModal({
+            type: 'transcribe',
+            src: mediaSequence.src,
+            displayName: (0, public_output_name_1.getMediaFileName)(mediaSequence.src, mediaSequence.displayName),
+            audioStreamIndex: null,
+            requestInit: null,
+            target: {
+                fileName: nodePath.absolutePath,
+                nodePath,
+                durationInFrames: Number.isFinite(mediaSequence.duration)
+                    ? mediaSequence.duration
+                    : null,
+            },
+        });
+    }, [
+        selection.nodePathInfo,
+        setSelectedModal,
+        mediaSequence,
+        transcriptionDisabledReason,
+    ]);
+    const onRemoveBackground = (0, react_1.useCallback)(() => {
+        if (videoMattingDisabledReason !== undefined ||
+            track.sequence.type !== 'video') {
+            return;
+        }
+        const nodePath = selection.nodePathInfo.sequenceSubscriptionKey;
+        setSelectedModal({
+            type: 'video-matting',
+            src: track.sequence.src,
+            displayName: (0, public_output_name_1.getMediaFileName)(track.sequence.src, track.sequence.displayName),
+            target: {
+                fileName: nodePath.absolutePath,
+                nodePath,
+            },
+        });
+    }, [
+        selection.nodePathInfo,
+        setSelectedModal,
+        track.sequence,
+        videoMattingDisabledReason,
+    ]);
     const onDuplicate = (0, react_1.useCallback)(() => {
         if (sourceActionsDisabled) {
             return;
@@ -125,7 +193,7 @@ const SequenceSourceQuickActions = ({ selection, track, validatedSource }) => {
             (0, NotificationCenter_1.showNotification)(err.message, 4000);
         });
     }, [selection.nodePathInfo, splitVideoFromAudioDisabledReason]);
-    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [(freezeFrameMenuItem === null || freezeFrameMenuItem === void 0 ? void 0 : freezeFrameMenuItem.type) === 'item' ? (jsx_runtime_1.jsx(common_1.InspectorQuickAction, { disabled: Boolean(freezeFrameMenuItem.disabled), onClick: () => freezeFrameMenuItem.onClick(freezeFrameMenuItem.id, null), renderIcon: (color) => (jsx_runtime_1.jsx(snowflake_1.SnowflakeIcon, { style: largeActionIconStyle, color: color })), children: freezeFrameMenuItem.label })) : null, track.sequence.type === 'video' ? (jsx_runtime_1.jsx(common_1.InspectorQuickAction, { disabled: splitVideoFromAudioDisabledReason !== undefined, onClick: onSplitVideoFromAudio, title: splitVideoFromAudioDisabledReason, renderIcon: (color) => (jsx_runtime_1.jsx(audio_1.AudioIcon, { style: actionIconStyle, color: color })), children: "Split video from audio" })) : null, jsx_runtime_1.jsx(common_1.InspectorQuickAction, { disabled: sourceActionsDisabled, onClick: onDuplicate, renderIcon: (color) => (jsx_runtime_1.jsx(duplicate_1.DuplicateIcon, { style: largeActionIconStyle, color: color })), children: "Duplicate" }), jsx_runtime_1.jsx(common_1.InspectorQuickAction, { disabled: sourceActionsDisabled, onClick: onDelete, renderIcon: (color) => (jsx_runtime_1.jsx(trash_1.TrashIcon, { style: actionIconStyle, color: color })), children: "Delete" })] }));
+    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [(freezeFrameMenuItem === null || freezeFrameMenuItem === void 0 ? void 0 : freezeFrameMenuItem.type) === 'item' ? (jsx_runtime_1.jsx(common_1.InspectorQuickAction, { disabled: Boolean(freezeFrameMenuItem.disabled), onClick: () => freezeFrameMenuItem.onClick(freezeFrameMenuItem.id, null), renderIcon: (color) => (jsx_runtime_1.jsx(snowflake_1.SnowflakeIcon, { style: largeActionIconStyle, color: color })), children: freezeFrameMenuItem.label })) : null, track.sequence.type === 'video' ? (jsx_runtime_1.jsx(common_1.InspectorQuickAction, { disabled: videoMattingDisabledReason !== undefined, onClick: onRemoveBackground, title: videoMattingDisabledReason, renderIcon: (color) => (jsx_runtime_1.jsx(background_removal_1.BackgroundRemovalIcon, { style: actionIconStyle, color: color })), children: "Remove background" })) : null, track.sequence.type === 'video' ? (jsx_runtime_1.jsx(common_1.InspectorQuickAction, { disabled: splitVideoFromAudioDisabledReason !== undefined, onClick: onSplitVideoFromAudio, title: splitVideoFromAudioDisabledReason, renderIcon: (color) => (jsx_runtime_1.jsx(audio_1.AudioIcon, { style: actionIconStyle, color: color })), children: "Split video from audio" })) : null, mediaSequence !== null && (mediaMetadata === null || mediaMetadata === void 0 ? void 0 : mediaMetadata.hasAudioTrack) !== false ? (jsx_runtime_1.jsx(common_1.InspectorQuickAction, { disabled: transcriptionDisabledReason !== undefined, onClick: onGenerateCaptions, title: transcriptionDisabledReason, renderIcon: (color) => (jsx_runtime_1.jsx(transcription_1.TranscriptionIcon, { style: actionIconStyle, color: color })), children: "Generate captions" })) : null, jsx_runtime_1.jsx(common_1.InspectorQuickAction, { disabled: sourceActionsDisabled, onClick: onDuplicate, renderIcon: (color) => (jsx_runtime_1.jsx(duplicate_1.DuplicateIcon, { style: largeActionIconStyle, color: color })), children: "Duplicate" }), jsx_runtime_1.jsx(SequenceWrapAction_1.SequenceWrapAction, { nodePathInfo: selection.nodePathInfo, sequence: track.sequence, sourceActionsDisabled: sourceActionsDisabled }), jsx_runtime_1.jsx(common_1.InspectorQuickAction, { disabled: sourceActionsDisabled, onClick: onDelete, renderIcon: (color) => (jsx_runtime_1.jsx(trash_1.TrashIcon, { style: actionIconStyle, color: color })), children: "Delete" })] }));
 };
 const SequenceExpandedInspector = ({ track, readOnlyStudio }) => {
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
@@ -170,7 +238,7 @@ const SequenceExpandedInspector = ({ track, readOnlyStudio }) => {
         return jsx_runtime_1.jsx(common_1.InspectorMessage, { children: "Sequence inspector unavailable" });
     }
     return (jsx_runtime_1.jsxs("div", { style: styles_1.selectedContainer, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, onPointerDown: selectSequenceOnInspectorPointerDown, children: [
-            jsx_runtime_1.jsx(SequenceInspectorHeader_1.SequenceInspectorHeader, { sourceLocation: sourceLocation, track: track }, stackKey !== null && stackKey !== void 0 ? stackKey : track.sequence.id), jsx_runtime_1.jsx(SequenceInspectorHeader_1.SequenceInspectorDuplicationSection, { track: track }), connectedCompositions.length > 0 ? (jsx_runtime_1.jsx(ConnectedCompositionsSection_1.ConnectedCompositionsSection, { connectedCompositions: connectedCompositions })) : null, validatedLocation ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [jsx_runtime_1.jsx(InspectorSequenceSection_1.InspectorSequenceSection, { sequence: track.sequence, readOnlyStudio: readOnlyStudio, validatedLocation: validatedLocation, nodePathInfo: track.nodePathInfo, keyframeDisplayOffset: track.keyframeDisplayOffset, renderTransformControls: () => jsx_runtime_1.jsx(AlignmentControls_1.AlignmentControls, { track: track }) }), jsx_runtime_1.jsx(CollapsibleInspectorSection_1.CollapsibleInspectorSection, { collapsible: true, label: "Actions", sectionId: "sequence-actions", children: jsx_runtime_1.jsxs(common_1.InspectorQuickActionsSection, { children: [
+            jsx_runtime_1.jsx(SequenceInspectorHeader_1.SequenceInspectorHeader, { sourceLocation: sourceLocation, track: track }, stackKey !== null && stackKey !== void 0 ? stackKey : track.sequence.id), jsx_runtime_1.jsx(SequenceInspectorHeader_1.SequenceInspectorDuplicationSection, { track: track }), connectedCompositions.length > 0 ? (jsx_runtime_1.jsx(ConnectedCompositionsSection_1.ConnectedCompositionsSection, { connectedCompositions: connectedCompositions })) : null, validatedLocation ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [jsx_runtime_1.jsx(InspectorSequenceSection_1.InspectorSequenceSection, { sequence: track.sequence, readOnlyStudio: readOnlyStudio, validatedLocation: validatedLocation, nodePathInfo: track.nodePathInfo, keyframeDisplayOffset: track.keyframeDisplayOffset, keyframePlaybackRate: track.keyframePlaybackRate, renderTransformControls: () => jsx_runtime_1.jsx(AlignmentControls_1.AlignmentControls, { track: track }) }), jsx_runtime_1.jsx(CollapsibleInspectorSection_1.CollapsibleInspectorSection, { collapsible: true, label: "Actions", sectionId: "sequence-actions", children: jsx_runtime_1.jsxs(common_1.InspectorQuickActionsSection, { children: [
                                 jsx_runtime_1.jsx(SplitSequenceQuickAction, { selection: sequenceSelection, track: track }), jsx_runtime_1.jsx(SequenceSourceQuickActions, { selection: sequenceSelection, track: track, validatedSource: validatedLocation.source })
                             ] }) })
                 ] })) : (jsx_runtime_1.jsx(common_1.InspectorMessage, { children: "Source controls unavailable" }))] }));

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

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { SequenceNodePathInfo } from '../../helpers/get-timeline-sequence-sort-key';
+import type { TimelineTrackData } from '../../helpers/get-timeline-sequence-sort-key';
+export declare const SequenceWrapAction: React.FC<{
+    readonly nodePathInfo: SequenceNodePathInfo;
+    readonly sequence: TimelineTrackData['sequence'];
+    readonly sourceActionsDisabled: boolean;
+}>;

package/dist/components/InspectorPanel/SequenceWrapAction.js

@@ -0,0 +1,151 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SequenceWrapAction = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const remotion_1 = require("remotion");
+const colors_1 = require("../../helpers/colors");
+const caret_1 = require("../../icons/caret");
+const wrap_1 = require("../../icons/wrap");
+const InspectorPanelLayout_1 = require("../InspectorPanelLayout");
+const NotificationCenter_1 = require("../Notifications/NotificationCenter");
+const SegmentedButton_1 = require("../SegmentedButton");
+const wrap_jsx_node_api_1 = require("../wrap-jsx-node-api");
+const wrapperNames = ['AbsoluteFill', 'Sequence', 'HtmlInCanvas'];
+const buttonStyle = {
+    borderRadius: 4,
+    height: 28,
+    margin: '0 4px',
+    width: 'calc(100% - 8px)',
+};
+const segmentStyle = {
+    fontSize: 13,
+    gap: 8,
+    justifyContent: 'flex-start',
+    padding: `0 ${InspectorPanelLayout_1.INSPECTOR_PANEL_HORIZONTAL_PADDING - 4}px`,
+    width: '100%',
+};
+const iconStyle = { height: 22, width: 22 };
+const iconContainerStyle = {
+    flexShrink: 0,
+    height: 22,
+    marginLeft: -2,
+    marginRight: -2,
+    width: 22,
+};
+const labelStyle = {
+    flex: 1,
+    fontFamily: 'sans-serif',
+    fontSize: 13,
+    lineHeight: '18px',
+    minWidth: 0,
+    overflow: 'hidden',
+    textAlign: 'left',
+    textOverflow: 'ellipsis',
+    userSelect: 'none',
+    WebkitUserSelect: 'none',
+    whiteSpace: 'nowrap',
+};
+const caretStyle = {
+    display: 'flex',
+    flexShrink: 0,
+    height: 12,
+    width: 12,
+};
+const SequenceWrapAction = ({ nodePathInfo, sequence, sourceActionsDisabled }) => {
+    const { width, height } = (0, remotion_1.useVideoConfig)();
+    const nodePathKey = JSON.stringify(nodePathInfo.sequenceSubscriptionKey);
+    const [eligibility, setEligibility] = (0, react_1.useState)(null);
+    const [busy, setBusy] = (0, react_1.useState)(false);
+    (0, react_1.useEffect)(() => {
+        setEligibility(null);
+        if (sourceActionsDisabled) {
+            return;
+        }
+        let cancelled = false;
+        const nodePath = JSON.parse(nodePathKey);
+        (0, wrap_jsx_node_api_1.wrapJsxNode)({
+            fileName: nodePath.absolutePath,
+            nodePath: nodePath.nodePath,
+            wrapper: null,
+            width: null,
+            height: null,
+        })
+            .then((result) => {
+            if (!cancelled && result.success) {
+                setEligibility({
+                    canWrap: result.canWrap,
+                    canWrapHtmlInCanvas: result.canWrapHtmlInCanvas,
+                });
+            }
+        })
+            .catch(() => undefined);
+        return () => {
+            cancelled = true;
+        };
+    }, [nodePathKey, sequence, sourceActionsDisabled]);
+    const onWrap = (0, react_1.useCallback)((wrapper) => {
+        if (busy || sourceActionsDisabled || !(eligibility === null || eligibility === void 0 ? void 0 : eligibility.canWrap)) {
+            return;
+        }
+        setBusy(true);
+        const nodePath = JSON.parse(nodePathKey);
+        (0, wrap_jsx_node_api_1.wrapJsxNode)({
+            fileName: nodePath.absolutePath,
+            nodePath: nodePath.nodePath,
+            wrapper,
+            width,
+            height,
+        })
+            .then((result) => {
+            if (!result.success) {
+                (0, NotificationCenter_1.showNotification)(result.reason, 4000);
+            }
+        })
+            .catch((error) => {
+            (0, NotificationCenter_1.showNotification)(error.message, 4000);
+        })
+            .finally(() => setBusy(false));
+    }, [busy, eligibility, height, nodePathKey, sourceActionsDisabled, width]);
+    const values = (0, react_1.useMemo)(() => wrapperNames.map((wrapper) => ({
+        type: 'item',
+        id: wrapper,
+        label: `<${wrapper}>`,
+        value: wrapper,
+        onClick: () => onWrap(wrapper),
+        keyHint: null,
+        leftItem: null,
+        subMenu: null,
+        quickSwitcherLabel: null,
+        disabled: busy ||
+            (wrapper === 'HtmlInCanvas' &&
+                (!(eligibility === null || eligibility === void 0 ? void 0 : eligibility.canWrapHtmlInCanvas) || !(0, remotion_1.isHtmlInCanvasSupported)())),
+    })), [busy, eligibility, onWrap]);
+    const segments = (0, react_1.useMemo)(() => [
+        {
+            ariaLabel: 'Wrap',
+            buttonId: null,
+            disabled: busy,
+            idleColor: colors_1.LIGHT_TEXT,
+            leaveLeftSpace: false,
+            onOpenChange: null,
+            renderContent: (color) => (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                    jsx_runtime_1.jsx("span", { style: iconContainerStyle, children: jsx_runtime_1.jsx(wrap_1.WrapIcon, { color: color, style: iconStyle }) }), jsx_runtime_1.jsx("span", { style: labelStyle, children: "Wrap" }), jsx_runtime_1.jsx("span", { style: caretStyle, children: jsx_runtime_1.jsx(caret_1.CaretDown, { color: color }) })
+                ] })),
+            segmentId: 'wrap',
+            selectedId: null,
+            style: segmentStyle,
+            title: nodePathInfo.numberOfSequencesWithThisNodePath > 1
+                ? `Wrap all ${nodePathInfo.numberOfSequencesWithThisNodePath} instances of this JSX element`
+                : 'Wrap this JSX element',
+            tooltipLabel: null,
+            type: 'menu',
+            values,
+        },
+    ], [busy, nodePathInfo.numberOfSequencesWithThisNodePath, values]);
+    if (!(eligibility === null || eligibility === void 0 ? void 0 : eligibility.canWrap) || sourceActionsDisabled) {
+        return null;
+    }
+    return (jsx_runtime_1.jsx(SegmentedButton_1.SegmentedButton, { segments: segments, style: buttonStyle, title: null }));
+};
+exports.SequenceWrapAction = SequenceWrapAction;

package/dist/components/InspectorPanel/common.js

@@ -89,6 +89,7 @@ const inlineLabelText = {
     overflow: 'hidden',
     textOverflow: 'ellipsis',
     userSelect: 'none',
+    WebkitUserSelect: 'none',
     whiteSpace: 'nowrap',
 };
 const inlineLabelIcon = {

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

@@ -1,7 +1,8 @@
 import type { CanUpdateSequencePropStatusKeyframed } from 'remotion';
 import type { SequenceNodePathInfo } from '../../helpers/get-timeline-sequence-sort-key';
-export declare const getEasingSelectionFromCurrentKeyframes: ({ keyframeDisplayOffset, nodePathInfo, propStatus, segmentIndex, }: {
+export declare const getEasingSelectionFromCurrentKeyframes: ({ keyframeDisplayOffset, keyframePlaybackRate, nodePathInfo, propStatus, segmentIndex, }: {
     readonly keyframeDisplayOffset: number;
+    readonly keyframePlaybackRate: number;
     readonly nodePathInfo: SequenceNodePathInfo;
     readonly propStatus: CanUpdateSequencePropStatusKeyframed;
     readonly segmentIndex: number;