@remotion/studio 4.0.527 → 4.0.528

package/dist/components/InspectorOpenInEditor.js

@@ -6,6 +6,7 @@ const react_1 = require("react");
 const browser_studio_operations_1 = require("../helpers/browser-studio-operations");
 const client_id_1 = require("../helpers/client-id");
 const colors_1 = require("../helpers/colors");
+const copy_text_1 = require("../helpers/copy-text");
 const get_git_menu_item_1 = require("../helpers/get-git-menu-item");
 const open_in_editor_1 = require("../helpers/open-in-editor");
 const caret_1 = require("../icons/caret");
@@ -57,6 +58,16 @@ const InspectorOpenInEditor = ({ contextForAgents = null, label, location, locat
             (0, NotificationCenter_1.showNotification)(err.message, 2000);
         }
     }, [contextForAgents]);
+    const copyPath = (0, react_1.useCallback)(() => {
+        if (!(location === null || location === void 0 ? void 0 : location.source)) {
+            return;
+        }
+        (0, copy_text_1.copyText)(location.source)
+            .then(() => (0, NotificationCenter_1.showNotification)('Copied path', 1500))
+            .catch((err) => {
+            (0, NotificationCenter_1.showNotification)(`Could not copy path: ${err.message}`, 2000);
+        });
+    }, [location]);
     const defaultAppName = defaultOpenInTarget === 'git-source'
         ? 'GitHub'
         : (defaultEditorName !== null && defaultEditorName !== void 0 ? defaultEditorName : 'default editor');
@@ -89,6 +100,7 @@ const InspectorOpenInEditor = ({ contextForAgents = null, label, location, locat
             folder: locationType === 'folder',
             gitSourceDisabled: location === null,
             onConfigureApps: configureDefaultApps,
+            onCopyPath: locationType === 'folder' && (location === null || location === void 0 ? void 0 : location.source) ? copyPath : undefined,
             onOpenInCodingAgent: (codingAgentId, codingAgentName) => {
                 openWithCodingAgent(codingAgentId, codingAgentName).catch(() => undefined);
             },
@@ -138,6 +150,7 @@ const InspectorOpenInEditor = ({ contextForAgents = null, label, location, locat
         canConfigureApps,
         canOpenInEditor,
         configureDefaultApps,
+        copyPath,
         defaultEditorId,
         defaultOpenInTarget,
         editorInfo,

package/dist/components/InspectorPanel/AlignmentControls.js

@@ -78,11 +78,16 @@ const AlignmentControls = ({ track }) => {
         const nodePath = track.nodePathInfo.sequenceSubscriptionKey;
         const nodePropStatuses = remotion_1.Internals.getPropStatusesCtx(propStatuses, nodePath);
         const firstKeyframedStatus = Object.values(nodePropStatuses !== null && nodePropStatuses !== void 0 ? nodePropStatuses : {}).find((status) => status.status === 'keyframed');
-        const sourceFrame = timelinePosition -
-            (0, get_timeline_keyframes_1.getKeyframeDisplayOffset)({
-                propStatus: firstKeyframedStatus,
+        const sourceFrame = (0, get_timeline_keyframes_1.getKeyframeSourceFrame)({
+            displayFrame: timelinePosition,
+            propStatus: firstKeyframedStatus !== null && firstKeyframedStatus !== void 0 ? firstKeyframedStatus : null,
+            keyframeDisplayOffset: (0, get_timeline_keyframes_1.getKeyframeDisplayOffset)({
+                propStatus: firstKeyframedStatus !== null && firstKeyframedStatus !== void 0 ? firstKeyframedStatus : null,
                 keyframeDisplayOffset: track.keyframeDisplayOffset,
-            });
+                keyframePlaybackRate: track.keyframePlaybackRate,
+            }),
+            keyframePlaybackRate: track.keyframePlaybackRate,
+        });
         const dragOverrides = (_b = getDragOverrides(nodePath)) !== null && _b !== void 0 ? _b : {};
         const activeSchema = (0, selected_outline_drag_1.getSelectedOutlineActiveSchema)({
             schema: track.sequence.controls.schema,
@@ -170,7 +175,16 @@ const AlignmentControls = ({ track }) => {
                 fileName: nodePath.absolutePath,
                 nodePath,
                 fieldKey: selected_outline_types_1.translateFieldKey,
-                sourceFrame,
+                sourceFrame: (0, get_timeline_keyframes_1.getKeyframeSourceFrame)({
+                    displayFrame: timelinePosition,
+                    keyframeDisplayOffset: (0, get_timeline_keyframes_1.getKeyframeDisplayOffset)({
+                        propStatus,
+                        keyframeDisplayOffset: track.keyframeDisplayOffset,
+                        keyframePlaybackRate: track.keyframePlaybackRate,
+                    }),
+                    keyframePlaybackRate: track.keyframePlaybackRate,
+                    propStatus,
+                }),
                 value: newValue,
                 schema: track.sequence.controls.schema,
                 setPropStatuses,
@@ -197,11 +211,16 @@ const AlignmentControls = ({ track }) => {
     const renderNodePath = track.nodePathInfo.sequenceSubscriptionKey;
     const renderNodePropStatuses = remotion_1.Internals.getPropStatusesCtx(propStatuses, renderNodePath);
     const firstRenderKeyframedStatus = Object.values(renderNodePropStatuses !== null && renderNodePropStatuses !== void 0 ? renderNodePropStatuses : {}).find((status) => status.status === 'keyframed');
-    const renderSourceFrame = timelinePosition -
-        (0, get_timeline_keyframes_1.getKeyframeDisplayOffset)({
-            propStatus: firstRenderKeyframedStatus,
+    const renderSourceFrame = (0, get_timeline_keyframes_1.getKeyframeSourceFrame)({
+        displayFrame: timelinePosition,
+        propStatus: firstRenderKeyframedStatus !== null && firstRenderKeyframedStatus !== void 0 ? firstRenderKeyframedStatus : null,
+        keyframeDisplayOffset: (0, get_timeline_keyframes_1.getKeyframeDisplayOffset)({
+            propStatus: firstRenderKeyframedStatus !== null && firstRenderKeyframedStatus !== void 0 ? firstRenderKeyframedStatus : null,
             keyframeDisplayOffset: track.keyframeDisplayOffset,
-        });
+            keyframePlaybackRate: track.keyframePlaybackRate,
+        }),
+        keyframePlaybackRate: track.keyframePlaybackRate,
+    });
     const renderDragOverrides = (_a = getDragOverrides(renderNodePath)) !== null && _a !== void 0 ? _a : {};
     const renderActiveSchema = (0, selected_outline_drag_1.getSelectedOutlineActiveSchema)({
         schema: track.sequence.controls.schema,

package/dist/components/InspectorPanel/CollapsibleInspectorSectionHeader.js

@@ -29,7 +29,7 @@ const staticSectionTitle = {
 const collapsibleSectionHeaderButton = {
     ...sectionTitle,
     appearance: 'none',
-    backgroundColor: 'transparent',
+    backgroundColor: colors_1.TRANSPARENT,
     border: 'none',
     borderRadius: 3,
     cursor: 'default',

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

@@ -82,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/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

@@ -8,6 +8,7 @@ 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");
@@ -30,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 = {
@@ -105,6 +107,11 @@ const SequenceSourceQuickActions = ({ selection, track, validatedSource }) => {
         : 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;
@@ -130,6 +137,27 @@ const SequenceSourceQuickActions = ({ selection, track, validatedSource }) => {
         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;
@@ -165,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, 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(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);
@@ -210,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/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;

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

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getEasingSelectionFromCurrentKeyframes = void 0;
 const get_timeline_keyframes_1 = require("../Timeline/get-timeline-keyframes");
-const getEasingSelectionFromCurrentKeyframes = ({ keyframeDisplayOffset, nodePathInfo, propStatus, segmentIndex, }) => {
+const getEasingSelectionFromCurrentKeyframes = ({ keyframeDisplayOffset, keyframePlaybackRate, nodePathInfo, propStatus, segmentIndex, }) => {
     const fromKeyframe = propStatus.keyframes[segmentIndex];
     const toKeyframe = propStatus.keyframes[segmentIndex + 1];
     if (!fromKeyframe || !toKeyframe) {
@@ -11,12 +11,13 @@ const getEasingSelectionFromCurrentKeyframes = ({ keyframeDisplayOffset, nodePat
     const resolvedKeyframeDisplayOffset = (0, get_timeline_keyframes_1.getKeyframeDisplayOffset)({
         propStatus,
         keyframeDisplayOffset,
+        keyframePlaybackRate,
     });
     return {
         type: 'easing',
         nodePathInfo,
-        fromFrame: fromKeyframe.frame + resolvedKeyframeDisplayOffset,
-        toFrame: toKeyframe.frame + resolvedKeyframeDisplayOffset,
+        fromFrame: fromKeyframe.frame / keyframePlaybackRate + resolvedKeyframeDisplayOffset,
+        toFrame: toKeyframe.frame / keyframePlaybackRate + resolvedKeyframeDisplayOffset,
         segmentIndex,
     };
 };

package/dist/components/InspectorPanel/keyframe-inspector-frame.d.ts

@@ -2,7 +2,8 @@ export declare const clampInspectorKeyframeDisplayFrame: ({ durationInFrames, fr
     readonly durationInFrames: number;
     readonly frame: number;
 }) => number;
-export declare const getInspectorKeyframeSourceFrame: ({ displayFrame, keyframeDisplayOffset, }: {
+export declare const getInspectorKeyframeSourceFrame: ({ displayFrame, keyframeDisplayOffset, keyframePlaybackRate, }: {
     readonly displayFrame: number;
     readonly keyframeDisplayOffset: number;
+    readonly keyframePlaybackRate: number;
 }) => number;

package/dist/components/InspectorPanel/keyframe-inspector-frame.js

@@ -8,7 +8,7 @@ const clampInspectorKeyframeDisplayFrame = ({ durationInFrames, frame, }) => {
     return Math.min(Math.max(Math.round(frame), 0), durationInFrames - 1);
 };
 exports.clampInspectorKeyframeDisplayFrame = clampInspectorKeyframeDisplayFrame;
-const getInspectorKeyframeSourceFrame = ({ displayFrame, keyframeDisplayOffset, }) => {
-    return displayFrame - keyframeDisplayOffset;
+const getInspectorKeyframeSourceFrame = ({ displayFrame, keyframeDisplayOffset, keyframePlaybackRate, }) => {
+    return (displayFrame - keyframeDisplayOffset) * keyframePlaybackRate;
 };
 exports.getInspectorKeyframeSourceFrame = getInspectorKeyframeSourceFrame;