@remotion/studio 4.0.527 → 4.0.528

package/dist/components/RenderQueue/context.js

@@ -68,12 +68,16 @@ exports.RenderQueueContext = react_1.default.createContext({
     updateCaptionJobProgress: noop,
     markCaptionJobDone: noop,
     markCaptionJobFailed: noop,
+    markCaptionJobCancelled: noop,
+    markCaptionJobSaving: noop,
     removeCaptionJob: noop,
     setProcessCaptionJobCallback: noop,
     addVideoMattingJob: noopString,
     updateVideoMattingJobProgress: noop,
     markVideoMattingJobDone: noop,
     markVideoMattingJobFailed: noop,
+    markVideoMattingJobCancelled: noop,
+    markVideoMattingJobSaving: noop,
     removeVideoMattingJob: noop,
     setProcessVideoMattingJobCallback: noop,
     getAbortController: () => new AbortController(),
@@ -89,8 +93,12 @@ const RenderQueueContextProvider = ({ children }) => {
     const hasActiveLocalJob = clientJobs.some((job) => job.status === 'idle' ||
         job.status === 'running' ||
         job.status === 'saving') ||
-        captionJobs.some((job) => job.status === 'idle' || job.status === 'running') ||
-        videoMattingJobs.some((job) => job.status === 'idle' || job.status === 'running');
+        captionJobs.some((job) => job.status === 'idle' ||
+            job.status === 'running' ||
+            job.status === 'saving') ||
+        videoMattingJobs.some((job) => job.status === 'idle' ||
+            job.status === 'running' ||
+            job.status === 'saving');
     const [currentlyProcessing, setCurrentlyProcessing] = (0, react_1.useState)(null);
     const lastLocalJobStartedAt = (0, react_1.useRef)(clientJobs.reduce((latest, job) => Math.max(latest, job.startedAt), 0));
     const processJobCallbackRef = (0, react_1.useRef)(null);
@@ -154,7 +162,9 @@ const RenderQueueContextProvider = ({ children }) => {
                     status: 'running',
                     progress: {
                         detail: null,
-                        message: 'Starting video matting...',
+                        message: 'outName' in job
+                            ? 'Starting background removal...'
+                            : 'Starting video matting...',
                         value: 0,
                     },
                 }
@@ -283,17 +293,20 @@ const RenderQueueContextProvider = ({ children }) => {
         return id;
     }, [getLocalJobStartedAt]);
     const updateCaptionJobProgress = (0, react_1.useCallback)((jobId, progress) => {
-        setCaptionJobs((prev) => prev.map((job) => job.id === jobId
-            ? { ...job, status: 'running', progress }
+        setCaptionJobs((prev) => prev.map((job) => job.id === jobId &&
+            (job.status === 'running' || job.status === 'saving')
+            ? { ...job, progress }
             : job));
     }, []);
     const markCaptionJobDone = (0, react_1.useCallback)((jobId, captionCount) => {
+        (0, client_render_queue_1.deleteAbortController)(jobId);
         setCaptionJobs((prev) => prev.map((job) => job.id === jobId
             ? { ...job, status: 'done', captionCount }
             : job));
         setCurrentlyProcessing((current) => (current === jobId ? null : current));
     }, []);
     const markCaptionJobFailed = (0, react_1.useCallback)((jobId, error) => {
+        (0, client_render_queue_1.deleteAbortController)(jobId);
         setCaptionJobs((prev) => prev.map((job) => job.id === jobId
             ? {
                 ...job,
@@ -303,12 +316,24 @@ const RenderQueueContextProvider = ({ children }) => {
             : job));
         setCurrentlyProcessing((current) => (current === jobId ? null : current));
     }, []);
+    const markCaptionJobCancelled = (0, react_1.useCallback)((jobId) => {
+        (0, client_render_queue_1.deleteAbortController)(jobId);
+        setCaptionJobs((prev) => prev.map((job) => job.id === jobId ? { ...job, status: 'cancelled' } : job));
+        setCurrentlyProcessing((current) => (current === jobId ? null : current));
+    }, []);
+    const markCaptionJobSaving = (0, react_1.useCallback)((jobId) => {
+        setCaptionJobs((prev) => prev.map((job) => job.id === jobId && job.status === 'running'
+            ? { ...job, status: 'saving' }
+            : job));
+    }, []);
     const removeCaptionJob = (0, react_1.useCallback)((jobId) => {
         setCaptionJobs((prev) => {
             const jobToRemove = prev.find((job) => job.id === jobId);
-            if ((jobToRemove === null || jobToRemove === void 0 ? void 0 : jobToRemove.status) === 'running') {
+            if ((jobToRemove === null || jobToRemove === void 0 ? void 0 : jobToRemove.status) === 'running' ||
+                (jobToRemove === null || jobToRemove === void 0 ? void 0 : jobToRemove.status) === 'saving') {
                 return prev;
             }
+            (0, client_render_queue_1.deleteAbortController)(jobId);
             return prev.filter((job) => job.id !== jobId);
         });
     }, []);
@@ -333,13 +358,18 @@ const RenderQueueContextProvider = ({ children }) => {
         return id;
     }, [getLocalJobStartedAt]);
     const updateVideoMattingJobProgress = (0, react_1.useCallback)((jobId, progress) => {
-        setVideoMattingJobs((prev) => prev.map((job) => job.id === jobId ? { ...job, status: 'running', progress } : job));
+        setVideoMattingJobs((prev) => prev.map((job) => job.id === jobId &&
+            (job.status === 'running' || job.status === 'saving')
+            ? { ...job, progress }
+            : job));
     }, []);
     const markVideoMattingJobDone = (0, react_1.useCallback)((jobId) => {
+        (0, client_render_queue_1.deleteAbortController)(jobId);
         setVideoMattingJobs((prev) => prev.map((job) => (job.id === jobId ? { ...job, status: 'done' } : job)));
         setCurrentlyProcessing((current) => (current === jobId ? null : current));
     }, []);
     const markVideoMattingJobFailed = (0, react_1.useCallback)((jobId, error) => {
+        (0, client_render_queue_1.deleteAbortController)(jobId);
         setVideoMattingJobs((prev) => prev.map((job) => job.id === jobId
             ? {
                 ...job,
@@ -349,12 +379,24 @@ const RenderQueueContextProvider = ({ children }) => {
             : job));
         setCurrentlyProcessing((current) => (current === jobId ? null : current));
     }, []);
+    const markVideoMattingJobCancelled = (0, react_1.useCallback)((jobId) => {
+        (0, client_render_queue_1.deleteAbortController)(jobId);
+        setVideoMattingJobs((prev) => prev.map((job) => job.id === jobId ? { ...job, status: 'cancelled' } : job));
+        setCurrentlyProcessing((current) => (current === jobId ? null : current));
+    }, []);
+    const markVideoMattingJobSaving = (0, react_1.useCallback)((jobId) => {
+        setVideoMattingJobs((prev) => prev.map((job) => job.id === jobId && job.status === 'running'
+            ? { ...job, status: 'saving' }
+            : job));
+    }, []);
     const removeVideoMattingJob = (0, react_1.useCallback)((jobId) => {
         setVideoMattingJobs((prev) => {
             const jobToRemove = prev.find((job) => job.id === jobId);
-            if ((jobToRemove === null || jobToRemove === void 0 ? void 0 : jobToRemove.status) === 'running') {
+            if ((jobToRemove === null || jobToRemove === void 0 ? void 0 : jobToRemove.status) === 'running' ||
+                (jobToRemove === null || jobToRemove === void 0 ? void 0 : jobToRemove.status) === 'saving') {
                 return prev;
             }
+            (0, client_render_queue_1.deleteAbortController)(jobId);
             return prev.filter((job) => job.id !== jobId);
         });
     }, []);
@@ -408,12 +450,16 @@ const RenderQueueContextProvider = ({ children }) => {
             updateCaptionJobProgress,
             markCaptionJobDone,
             markCaptionJobFailed,
+            markCaptionJobCancelled,
+            markCaptionJobSaving,
             removeCaptionJob,
             setProcessCaptionJobCallback,
             addVideoMattingJob,
             updateVideoMattingJobProgress,
             markVideoMattingJobDone,
             markVideoMattingJobFailed,
+            markVideoMattingJobCancelled,
+            markVideoMattingJobSaving,
             removeVideoMattingJob,
             setProcessVideoMattingJobCallback,
             getAbortController: client_render_queue_1.getAbortController,
@@ -438,12 +484,16 @@ const RenderQueueContextProvider = ({ children }) => {
         updateCaptionJobProgress,
         markCaptionJobDone,
         markCaptionJobFailed,
+        markCaptionJobCancelled,
+        markCaptionJobSaving,
         removeCaptionJob,
         setProcessCaptionJobCallback,
         addVideoMattingJob,
         updateVideoMattingJobProgress,
         markVideoMattingJobDone,
         markVideoMattingJobFailed,
+        markVideoMattingJobCancelled,
+        markVideoMattingJobSaving,
         removeVideoMattingJob,
         setProcessVideoMattingJobCallback,
     ]);

package/dist/components/RenderQueue/index.js

@@ -115,8 +115,7 @@ const RenderQueue = () => {
                 }
                 if ((0, video_matting_job_types_1.isVideoMattingJob)(job) &&
                     job.status === 'done' &&
-                    (canvasContent.asset === job.baseOutName ||
-                        canvasContent.asset === job.foregroundOutName)) {
+                    canvasContent.asset === job.outName) {
                     return i;
                 }
             }
@@ -125,7 +124,7 @@ const RenderQueue = () => {
     }, [allJobs, canvasContent]);
     if (jobCount === 0) {
         return (jsx_runtime_1.jsxs("div", { style: explainer, children: [
-                jsx_runtime_1.jsx(layout_1.Spacing, { y: 5 }), jsx_runtime_1.jsx("div", { style: errorExplanation, children: "Renders, transcriptions and video matting jobs will show up here." }), jsx_runtime_1.jsx(layout_1.Spacing, { y: 2, block: true })
+                jsx_runtime_1.jsx(layout_1.Spacing, { y: 5 }), jsx_runtime_1.jsx("div", { style: errorExplanation, children: "Renders, transcriptions and background removal jobs will show up here." }), jsx_runtime_1.jsx(layout_1.Spacing, { y: 2, block: true })
             ] }));
     }
     return (jsx_runtime_1.jsx("div", { ref: divRef, style: renderQueue, className: ['css-reset', is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME].join(' '), children: allJobs.map((job, index) => {

package/dist/components/RenderQueue/load-model-for-job.d.ts

@@ -1,7 +1,8 @@
-export declare const loadModelForJob: <Model extends string>({ isModelCached, loadModel, model, progressSpan, progressStart, updateProgress, }: {
+export declare const loadModelForJob: <Model extends string>({ isModelCached, loadModel, model, signal, progressSpan, progressStart, updateProgress, }: {
     isModelCached: (model: Model) => Promise<boolean>;
     loadModel: (model: Model, onProgress: (progress: number | null) => void) => Promise<unknown>;
     model: Model;
+    signal: AbortSignal;
     progressSpan: number;
     progressStart: number;
     updateProgress: (progress: {

package/dist/components/RenderQueue/load-model-for-job.js

@@ -1,14 +1,18 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.loadModelForJob = void 0;
-const loadModelForJob = async ({ isModelCached, loadModel, model, progressSpan, progressStart, updateProgress, }) => {
+const loadModelForJob = async ({ isModelCached, loadModel, model, signal, progressSpan, progressStart, updateProgress, }) => {
+    signal.throwIfAborted();
     const cached = await isModelCached(model);
+    signal.throwIfAborted();
     await loadModel(model, (progress) => {
+        signal.throwIfAborted();
         const percentage = progress === null ? '' : ` ${Math.round(progress * 100)}%`;
         updateProgress({
             message: `${cached ? 'Loading' : 'Downloading'} ${model}${percentage}`,
             value: progressStart + (progress !== null && progress !== void 0 ? progress : 0) * progressSpan,
         });
     });
+    signal.throwIfAborted();
 };
 exports.loadModelForJob = loadModelForJob;

package/dist/components/RenderQueue/video-matting-job-types.d.ts

@@ -1,4 +1,5 @@
-import type { VideoLayerAudio, VideoMattingBitrate, VideoMattingModel } from '@remotion/video-matting';
+import type { VideoMattingBitrate, VideoMattingModel } from '@remotion/video-matting';
+import type { SequencePropsSubscriptionKey } from 'remotion';
 export type VideoMattingJobProgress = {
     detail: string | null;
     message: string;
@@ -7,7 +8,9 @@ export type VideoMattingJobProgress = {
 type VideoMattingJobStatus = {
     status: 'idle';
 } | {
-    status: 'running';
+    status: 'cancelled';
+} | {
+    status: 'running' | 'saving';
     progress: VideoMattingJobProgress;
 } | {
     status: 'done';
@@ -18,15 +21,19 @@ type VideoMattingJobStatus = {
         stack: string | undefined;
     };
 };
-export type AddVideoMattingJobParams = {
+type VideoMattingJobCommon = {
     src: string;
     displayName: string;
-    baseOutName: string;
-    foregroundOutName: string;
     model: VideoMattingModel;
-    audio: VideoLayerAudio;
     videoBitrate: VideoMattingBitrate;
+    outName: string;
+    audio: 'keep' | 'none';
+    target: {
+        fileName: string;
+        nodePath: SequencePropsSubscriptionKey;
+    } | null;
 };
+export type AddVideoMattingJobParams = VideoMattingJobCommon;
 export type VideoMattingJob = AddVideoMattingJobParams & {
     id: string;
     type: 'video-matting';

package/dist/components/SelectedOutlineCropControls.js

@@ -47,6 +47,7 @@ const selected_outline_types_1 = require("./selected-outline-types");
 const selected_outline_uv_1 = require("./selected-outline-uv");
 const call_add_keyframe_1 = require("./Timeline/call-add-keyframe");
 const focus_inspector_field_1 = require("./Timeline/focus-inspector-field");
+const get_timeline_keyframes_1 = require("./Timeline/get-timeline-keyframes");
 const save_sequence_prop_1 = require("./Timeline/save-sequence-prop");
 const CROP_HANDLE_THICKNESS = 5;
 const CROP_HANDLE_LENGTH = 20;
@@ -223,7 +224,7 @@ const CropHandle = ({ handle, outline, onDraggingChange, target }) => {
                 setDragOverrides(cropDrag.nodePath, fieldKey, field.propStatus.status === 'keyframed'
                     ? remotion_1.Internals.makeKeyframedDragOverride({
                         status: field.propStatus,
-                        frame: cropDrag.sourceFrame,
+                        frame: (0, get_timeline_keyframes_1.resolveKeyframeSourceFrame)(cropDrag.sourceFrame, field.propStatus),
                         value,
                     })
                     : remotion_1.Internals.makeStaticDragOverride(value));

package/dist/components/SelectedOutlineEditingHandles.js

@@ -47,18 +47,25 @@ const SelectedOutlineEditingHandles = ({ dragging, getAllRotationDragTargets, ge
         layoutTarget,
     });
     const controlLayout = (0, react_1.useMemo)(() => (0, selected_outline_control_layout_1.getSelectedOutlineControlLayout)(outline.points), [outline.points]);
+    // Scale and rotation handles are placed on the bounding box of the element.
+    // For path outlines the rendered geometry follows the SVG path, so
+    // bounding-box handles would sit off the shape and misrepresent the
+    // transform. Translate and crop still apply to the element as a whole.
+    const showTransformHandles = outline.path === null;
     const onContextMenuOpen = react_1.default.useCallback(() => {
         var _a;
         var _b;
         return (_b = (_a = getContextMenuOpenByKey(outline.key)) === null || _a === void 0 ? void 0 : _a()) !== null && _b !== void 0 ? _b : false;
     }, [getContextMenuOpenByKey, outline.key]);
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-            jsx_runtime_1.jsx(SelectedOutlineCropControls_1.SelectedOutlineCropControls, { outline: outline, onDraggingChange: onDraggingChange, target: controlTarget }), (controlTarget === null || controlTarget === void 0 ? void 0 : controlTarget.cropDrag) === null &&
+            jsx_runtime_1.jsx(SelectedOutlineCropControls_1.SelectedOutlineCropControls, { outline: outline, onDraggingChange: onDraggingChange, target: controlTarget }), showTransformHandles &&
+                (controlTarget === null || controlTarget === void 0 ? void 0 : controlTarget.cropDrag) === null &&
                 ((layoutTarget === null || layoutTarget === void 0 ? void 0 : layoutTarget.containsSelection) || hovered)
                 ? controlLayout.scaleEdges.map((edge) => (jsx_runtime_1.jsx(SelectedOutlineScaleEdgeLine_1.SelectedOutlineScaleEdgeLine, { getAllScaleDragTargets: getAllScaleDragTargets, dragging: dragging, edge: edge, hitWidth: edge === 'top' || edge === 'bottom'
                         ? controlLayout.scaleHitWidth.horizontal
                         : controlLayout.scaleHitWidth.vertical, outline: outline, onContextMenuOpen: onContextMenuOpen, onContextMenuOpenChange: onContextMenuOpenChange, onDraggingChange: onDraggingChange, onHoverChange: onHoverChange, onSelect: onSelect, target: controlTarget }, edge)))
-                : null, (controlTarget === null || controlTarget === void 0 ? void 0 : controlTarget.cropDrag) === null &&
+                : null, showTransformHandles &&
+                (controlTarget === null || controlTarget === void 0 ? void 0 : controlTarget.cropDrag) === null &&
                 ((layoutTarget === null || layoutTarget === void 0 ? void 0 : layoutTarget.containsSelection) || hovered)
                 ? controlLayout.rotationCorners.map(({ corner, point }) => (jsx_runtime_1.jsx(SelectedOutlineRotationCornerHandle_1.SelectedOutlineRotationCornerHandle, { getAllRotationDragTargets: getAllRotationDragTargets, corner: corner, dragging: dragging, handlePoint: point, outline: outline, onContextMenuOpen: onContextMenuOpen, onContextMenuOpenChange: onContextMenuOpenChange, onDraggingChange: onDraggingChange, onHoverChange: onHoverChange, onSelect: onSelect, radius: controlLayout.rotationHandleRadius, target: controlTarget }, corner)))
                 : null] }));

package/dist/components/SelectedOutlineElement.js

@@ -77,6 +77,7 @@ const SelectedOutlineElementUnmemoized = ({ compositionHeight, compositionWidth,
     const selectComposition = (0, InitialCompositionLoader_1.useSelectComposition)();
     const { compositions } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.SetSelectedModalContext);
+    const { selectItems } = (0, TimelineSelection_1.useTimelineSelection)();
     const { setManuallyEnabled } = (0, react_1.useContext)(transform_3d_mode_1.Transform3DModeStateContext);
     const { controlTarget, getLayoutTarget, getTarget, hovered, onHoverChange } = (0, use_selected_outline_control_target_1.useSelectedOutlineControlTarget)({
         getLatestTargetByKey,
@@ -171,7 +172,7 @@ const SelectedOutlineElementUnmemoized = ({ compositionHeight, compositionWidth,
             !sourceEditDisabled &&
             previewServerState.type === 'connected';
         const canCrop = contextMenuTarget.canCrop && !sourceEditDisabled;
-        const canRotate = !sourceEditDisabled;
+        const canRotate = !sourceEditDisabled && outline.path === null;
         const outlineElement = (_b = (_a = contextMenuTarget.sequence.refForOutline) === null || _a === void 0 ? void 0 : _a.current) !== null && _b !== void 0 ? _b : null;
         return (0, get_sequence_context_menu_items_1.getSequenceContextMenuItems)({
             assetLinkInfo,
@@ -269,7 +270,8 @@ const SelectedOutlineElementUnmemoized = ({ compositionHeight, compositionWidth,
                                         type: 'add-effect',
                                         clientId: previewServerState.clientId,
                                         fileName: nodePath.absolutePath,
-                                        nodePath,
+                                        nodePathInfo: contextMenuTarget.nodePathInfo,
+                                        selectItems,
                                     });
                                 },
                                 quickSwitcherLabel: null,
@@ -348,8 +350,10 @@ const SelectedOutlineElementUnmemoized = ({ compositionHeight, compositionWidth,
         resolveOriginalLocation,
         setManuallyEnabled,
         selectAsset,
+        selectItems,
         setSelectedModal,
         setPropStatuses,
+        outline.path,
     ]);
     (0, react_1.useLayoutEffect)(() => {
         registerContextMenuOpen(outline.key, onContextMenuOpen);
@@ -359,6 +363,8 @@ const SelectedOutlineElementUnmemoized = ({ compositionHeight, compositionWidth,
     }, [onContextMenuOpen, outline.key, registerContextMenuOpen]);
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
             jsx_runtime_1.jsx(SelectedOutlinePolygon_1.SelectedOutlinePolygon, { compositionHeight: compositionHeight, compositionWidth: compositionWidth, containsSelection: (layoutTarget === null || layoutTarget === void 0 ? void 0 : layoutTarget.containsSelection) === true, directlySelected: (layoutTarget === null || layoutTarget === void 0 ? void 0 : layoutTarget.selected) === true, dragging: dragging, getAllDragOutlines: getAllDragOutlines, getAllDragTargets: getAllDragTargets, getLayoutTarget: getLayoutTarget, getTarget: getTarget, hasTarget: layoutTarget !== undefined, hovered: hovered, outline: outline, onDraggingChange: onDraggingChange, onHoverChange: onHoverChange, onSnapPointsChange: onSnapPointsChange, onSelect: onSelect, onDoubleClickTarget: onDoubleClickTarget, scale: scale, showSelectedOutline: (_a = layoutTarget === null || layoutTarget === void 0 ? void 0 : layoutTarget.showSelectedOutline) !== null && _a !== void 0 ? _a : false, translateWithCommandKey: (layoutTarget === null || layoutTarget === void 0 ? void 0 : layoutTarget.selectedForRotation) === true &&
-                    Boolean(controlTarget === null || controlTarget === void 0 ? void 0 : controlTarget.rotationDrag) }), (layoutTarget === null || layoutTarget === void 0 ? void 0 : layoutTarget.selectedForRotation) && (controlTarget === null || controlTarget === void 0 ? void 0 : controlTarget.rotationDrag) ? (jsx_runtime_1.jsx(SelectedOutlineCanvasRotation_1.SelectedOutlineCanvasRotation, { getLatestTargetByKey: getLatestTargetByKey, layoutTarget: layoutTarget, onDraggingChange: onDraggingChange, outline: outline, transform3DMode: controlTarget.rotationDrag.transform3DMode })) : null] }));
+                    Boolean(controlTarget === null || controlTarget === void 0 ? void 0 : controlTarget.rotationDrag) }), (layoutTarget === null || layoutTarget === void 0 ? void 0 : layoutTarget.selectedForRotation) &&
+                (controlTarget === null || controlTarget === void 0 ? void 0 : controlTarget.rotationDrag) &&
+                outline.path === null ? (jsx_runtime_1.jsx(SelectedOutlineCanvasRotation_1.SelectedOutlineCanvasRotation, { getLatestTargetByKey: getLatestTargetByKey, layoutTarget: layoutTarget, onDraggingChange: onDraggingChange, outline: outline, transform3DMode: controlTarget.rotationDrag.transform3DMode })) : null] }));
 };
 exports.SelectedOutlineElement = react_1.default.memo(SelectedOutlineElementUnmemoized);

package/dist/components/SelectedOutlineKeyboardControls.d.ts

@@ -1,7 +1,5 @@
 import type React from 'react';
-import type { getSequencesWithSelectableOutlines } from './selected-outline-measurement';
-import { type SelectedOutlineTarget } from './selected-outline-types';
+import { type SelectedOutlineDragTarget } from './selected-outline-types';
 export declare const SelectedOutlineKeyboardControls: React.FC<{
-    readonly getLatestOutlineTargetByKey: (key: string) => SelectedOutlineTarget | undefined;
-    readonly getSelectableOutlines: () => ReturnType<typeof getSequencesWithSelectableOutlines>;
+    readonly getAllDragTargets: () => readonly SelectedOutlineDragTarget[];
 }>;

package/dist/components/SelectedOutlineKeyboardControls.js

@@ -7,15 +7,12 @@ const remotion_1 = require("remotion");
 const use_keybinding_1 = require("../helpers/use-keybinding");
 const NotificationCenter_1 = require("./Notifications/NotificationCenter");
 const selected_outline_drag_1 = require("./selected-outline-drag");
-const selected_outline_measurement_1 = require("./selected-outline-measurement");
 const selected_outline_types_1 = require("./selected-outline-types");
 const call_add_keyframe_1 = require("./Timeline/call-add-keyframe");
 const imperative_state_1 = require("./Timeline/imperative-state");
 const save_sequence_prop_1 = require("./Timeline/save-sequence-prop");
 const timeline_scroll_logic_1 = require("./Timeline/timeline-scroll-logic");
-const TimelineSelection_1 = require("./Timeline/TimelineSelection");
-const SelectedOutlineKeyboardControls = ({ getLatestOutlineTargetByKey, getSelectableOutlines }) => {
-    const currentSelection = (0, TimelineSelection_1.useCurrentTimelineSelectionStateAsRef)();
+const SelectedOutlineKeyboardControls = ({ getAllDragTargets }) => {
     const { getDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeDragOverridesContext);
     const { setPropStatuses, setDragOverrides, clearDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
     const { frameBack, frameForward, getCurrentFrame, seek } = player_1.PlayerInternals.usePlayerMethods();
@@ -143,21 +140,8 @@ const SelectedOutlineKeyboardControls = ({ getLatestOutlineTargetByKey, getSelec
         if (direction === null) {
             return;
         }
-        const { selectedItems } = currentSelection.current;
-        const selectedSequenceKeys = (0, selected_outline_measurement_1.getSelectedSequenceKeys)(selectedItems);
-        const sequenceKeysContainingSelection = (0, selected_outline_measurement_1.getSequenceKeysContainingSelection)(selectedItems);
-        const selectableOutlines = getSelectableOutlines();
-        const allDragTargets = selectableOutlines.flatMap(({ key }) => {
-            var _a;
-            var _b;
-            if (!selectedSequenceKeys.has(key) &&
-                !sequenceKeysContainingSelection.has(key)) {
-                return [];
-            }
-            const drag = (_b = (_a = getLatestOutlineTargetByKey(key)) === null || _a === void 0 ? void 0 : _a.drag) !== null && _b !== void 0 ? _b : null;
-            return drag === null ? [] : [drag];
-        });
-        if (selectedItems.length === 0 || allDragTargets.length === 0) {
+        const allDragTargets = getAllDragTargets();
+        if (allDragTargets.length === 0) {
             seekWithArrowKey(event, direction);
             return;
         }
@@ -215,11 +199,9 @@ const SelectedOutlineKeyboardControls = ({ getLatestOutlineTargetByKey, getSelec
             }
         }
     }, [
-        currentSelection,
+        getAllDragTargets,
         getCurrentFrame,
         getDragOverrides,
-        getLatestOutlineTargetByKey,
-        getSelectableOutlines,
         seekWithArrowKey,
         setDragOverrides,
     ]);