@remotion/studio 4.0.526 → 4.0.528

package/dist/components/RenderQueue/VideoMattingQueueProcessor.js

@@ -4,41 +4,51 @@ exports.VideoMattingQueueProcessor = void 0;
 const video_matting_1 = require("@remotion/video-matting");
 const react_1 = require("react");
 const write_static_file_1 = require("../../api/write-static-file");
+const browser_studio_operations_1 = require("../../helpers/browser-studio-operations");
+const call_api_1 = require("../call-api");
 const context_1 = require("./context");
 const load_model_for_job_1 = require("./load-model-for-job");
 const VideoMattingQueueProcessor = () => {
-    const { markVideoMattingJobDone, markVideoMattingJobFailed, setProcessVideoMattingJobCallback, updateVideoMattingJobProgress, } = (0, react_1.useContext)(context_1.RenderQueueContext);
+    const { markVideoMattingJobDone, markVideoMattingJobFailed, markVideoMattingJobCancelled, markVideoMattingJobSaving, getAbortController, setProcessVideoMattingJobCallback, updateVideoMattingJobProgress, } = (0, react_1.useContext)(context_1.RenderQueueContext);
     const processJob = (0, react_1.useCallback)(async (job) => {
-        let outputs = null;
+        const { signal } = getAbortController(job.id);
+        let output = null;
         let processingError = null;
         try {
+            signal.throwIfAborted();
             updateVideoMattingJobProgress(job.id, {
                 detail: null,
                 message: 'Checking WebGPU support...',
                 value: 0,
             });
             const support = await (0, video_matting_1.canUseVideoMatting)({ model: job.model });
+            signal.throwIfAborted();
             if (!support.supported) {
                 throw new Error(support.detailedReason);
             }
             await (0, load_model_for_job_1.loadModelForJob)({
+                signal,
                 model: job.model,
                 progressStart: 0,
                 progressSpan: 0.2,
                 isModelCached: (model) => (0, video_matting_1.isVideoMattingModelCached)({ model }),
-                loadModel: (model, onProgress) => (0, video_matting_1.loadVideoMattingModel)({
-                    model,
-                    onProgress: (progress) => onProgress(progress.progress),
-                }),
+                loadModel: async (model, onProgress) => {
+                    await (0, video_matting_1.downloadVideoMattingModel)({
+                        signal,
+                        model,
+                        onProgress: (progress) => onProgress(progress.progress),
+                    });
+                    await (0, video_matting_1.loadVideoMattingModel)({ model, signal });
+                },
                 updateProgress: (progress) => updateVideoMattingJobProgress(job.id, {
                     ...progress,
                     detail: null,
                 }),
             });
-            outputs = await (0, video_matting_1.separateVideoLayers)({
+            const mattingOptions = {
+                signal,
                 src: job.src,
                 model: job.model,
-                audio: job.audio,
                 videoBitrate: job.videoBitrate,
                 onProgress: (progress) => {
                     var _a;
@@ -47,51 +57,81 @@ const VideoMattingQueueProcessor = () => {
                             ? `Processed ${progress.processedFrames} ${progress.processedFrames === 1 ? 'frame' : 'frames'}`
                             : `Processed ${progress.processedFrames} ${progress.processedFrames === 1 ? 'frame' : 'frames'} · ${Math.round(progress.progress * 100)}%`,
                         message: progress.stage === 'finalizing'
-                            ? 'Finalizing video layers...'
-                            : 'Separating foreground...',
+                            ? 'Finalizing video...'
+                            : 'Removing background...',
                         value: 0.2 + ((_a = progress.progress) !== null && _a !== void 0 ? _a : 1) * 0.65,
                     });
                 },
+            };
+            output = await video_matting_1.VideoMattingInternals.removeVideoBackground({
+                ...mattingOptions,
+                audio: job.audio,
             });
+            if (output === null) {
+                throw new Error('Video matting produced no output.');
+            }
+            signal.throwIfAborted();
             updateVideoMattingJobProgress(job.id, {
                 detail: null,
-                message: 'Saving video layers...',
+                message: 'Saving video...',
                 value: 0.88,
             });
-            const [base, foreground] = await Promise.all([
-                outputs.base.getBlob(),
-                outputs.foreground.getBlob(),
-            ]);
-            await Promise.all([
-                base
-                    .arrayBuffer()
-                    .then((contents) => (0, write_static_file_1.writeStaticFile)({ contents, filePath: job.baseOutName })),
-                foreground
-                    .arrayBuffer()
-                    .then((contents) => (0, write_static_file_1.writeStaticFile)({ contents, filePath: job.foregroundOutName })),
-            ]);
+            const video = await output.video.getBlob();
+            signal.throwIfAborted();
+            markVideoMattingJobSaving(job.id);
+            await video
+                .arrayBuffer()
+                .then((contents) => (0, write_static_file_1.writeStaticFile)({ contents, filePath: job.outName }));
+            if (job.target !== null) {
+                updateVideoMattingJobProgress(job.id, {
+                    detail: null,
+                    message: 'Replacing video source...',
+                    value: 0.97,
+                });
+                const browserStudioOperations = (0, browser_studio_operations_1.getBrowserStudioOperations)();
+                const request = {
+                    fileName: job.target.fileName,
+                    nodePath: job.target.nodePath.nodePath,
+                    src: job.outName,
+                };
+                const replaceSource = browserStudioOperations === null || browserStudioOperations === void 0 ? void 0 : browserStudioOperations.replaceVideoSource;
+                if (browserStudioOperations && !replaceSource) {
+                    throw new Error('Browser Studio cannot replace the video source.');
+                }
+                const response = replaceSource
+                    ? await replaceSource(request)
+                    : await (0, call_api_1.callApi)('/api/replace-video-source', request);
+                if (!response.success) {
+                    throw new Error(response.reason);
+                }
+            }
         }
         catch (error) {
             processingError =
                 error instanceof Error ? error : new Error(String(error));
         }
+        if (output) {
+            await Promise.allSettled([output.video.dispose()]);
+        }
         try {
-            await Promise.all([
-                outputs === null || outputs === void 0 ? void 0 : outputs.base.dispose(),
-                outputs === null || outputs === void 0 ? void 0 : outputs.foreground.dispose(),
-            ]);
             await (0, video_matting_1.disposeVideoMattingModel)({ model: job.model });
         }
         catch (_a) {
             // Cleanup errors must not hide successfully written outputs.
         }
-        if (processingError) {
+        if (signal.aborted) {
+            markVideoMattingJobCancelled(job.id);
+        }
+        else if (processingError) {
             markVideoMattingJobFailed(job.id, processingError);
         }
         else {
             markVideoMattingJobDone(job.id);
         }
     }, [
+        getAbortController,
+        markVideoMattingJobCancelled,
+        markVideoMattingJobSaving,
         markVideoMattingJobDone,
         markVideoMattingJobFailed,
         updateVideoMattingJobProgress,

package/dist/components/RenderQueue/caption-job-types.d.ts

@@ -1,4 +1,5 @@
 import type { WhisperWebGpuModel, WhisperWebGpuTask } from '@remotion/whisper-webgpu';
+import type { SequencePropsSubscriptionKey } from 'remotion';
 export type CaptionJobProgress = {
     message: string;
     value: number;
@@ -6,7 +7,9 @@ export type CaptionJobProgress = {
 type CaptionJobStatus = {
     status: 'idle';
 } | {
-    status: 'running';
+    status: 'cancelled';
+} | {
+    status: 'running' | 'saving';
     progress: CaptionJobProgress;
 } | {
     status: 'done';
@@ -24,6 +27,11 @@ export type AddCaptionJobParams = {
     audioStreamIndex: number | null;
     requestInit: Omit<RequestInit, 'signal'> | null;
     outName: string;
+    target: {
+        fileName: string;
+        nodePath: SequencePropsSubscriptionKey;
+        durationInFrames: number | null;
+    } | null;
     model: WhisperWebGpuModel;
     language: string | null;
     task: WhisperWebGpuTask;

package/dist/components/RenderQueue/context.d.ts

@@ -32,12 +32,16 @@ type RenderQueueContextType = {
     updateCaptionJobProgress: (jobId: string, progress: CaptionJobProgress) => void;
     markCaptionJobDone: (jobId: string, captionCount: number) => void;
     markCaptionJobFailed: (jobId: string, error: Error) => void;
+    markCaptionJobCancelled: (jobId: string) => void;
+    markCaptionJobSaving: (jobId: string) => void;
     removeCaptionJob: (jobId: string) => void;
     setProcessCaptionJobCallback: (callback: ((job: CaptionJob) => Promise<void>) | null) => void;
     addVideoMattingJob: (params: AddVideoMattingJobParams) => string;
     updateVideoMattingJobProgress: (jobId: string, progress: VideoMattingJobProgress) => void;
     markVideoMattingJobDone: (jobId: string) => void;
     markVideoMattingJobFailed: (jobId: string, error: Error) => void;
+    markVideoMattingJobCancelled: (jobId: string) => void;
+    markVideoMattingJobSaving: (jobId: string) => void;
     removeVideoMattingJob: (jobId: string) => void;
     setProcessVideoMattingJobCallback: (callback: ((job: VideoMattingJob) => Promise<void>) | null) => void;
     getAbortController: (jobId: string) => AbortController;

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

@@ -108,14 +108,14 @@ const RenderQueue = () => {
             for (let i = 0; i < allJobs.length; i++) {
                 const job = allJobs[i];
                 if ((0, caption_job_types_1.isCaptionJob)(job) &&
+                    job.target === null &&
                     job.status === 'done' &&
                     canvasContent.asset === job.outName) {
                     return i;
                 }
                 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;
                 }
             }
@@ -124,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/RendersTab.js

@@ -15,6 +15,7 @@ const row = {
     alignItems: 'center',
     flex: 1,
     userSelect: 'none',
+    WebkitUserSelect: 'none',
 };
 const badge = {
     height: 16,
@@ -25,6 +26,7 @@ const badge = {
     justifyContent: 'center',
     alignItems: 'center',
     userSelect: 'none',
+    WebkitUserSelect: 'none',
 };
 const RendersTab = ({ selected, onClick }) => {
     const { jobs, captionJobs } = (0, react_1.useContext)(context_1.RenderQueueContext);

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[];
 }>;