@remotion/studio 4.0.526 → 4.0.527

package/dist/components/InspectorPanel/SequenceSelectionInspector.js

@@ -6,15 +6,19 @@ const react_1 = require("react");
 const remotion_1 = require("remotion");
 const client_id_1 = require("../../helpers/client-id");
 const interactivity_enabled_1 = require("../../helpers/interactivity-enabled");
+const use_media_metadata_1 = require("../../helpers/use-media-metadata");
 const audio_1 = require("../../icons/audio");
 const duplicate_1 = require("../../icons/duplicate");
 const scissors_1 = require("../../icons/scissors");
 const snowflake_1 = require("../../icons/snowflake");
+const transcription_1 = require("../../icons/transcription");
 const trash_1 = require("../../icons/trash");
+const modals_1 = require("../../state/modals");
 const ConfirmationDialog_1 = require("../ConfirmationDialog");
 const InspectorSequenceSection_1 = require("../InspectorSequenceSection");
 const is_menu_item_1 = require("../Menu/is-menu-item");
 const NotificationCenter_1 = require("../Notifications/NotificationCenter");
+const public_output_name_1 = require("../public-output-name");
 const split_video_from_audio_api_1 = require("../split-video-from-audio-api");
 const duplicate_selected_timeline_item_1 = require("../Timeline/duplicate-selected-timeline-item");
 const split_selected_timeline_item_1 = require("../Timeline/split-selected-timeline-item");
@@ -70,8 +74,10 @@ const SplitSequenceQuickAction = ({ selection, track }) => {
     return (jsx_runtime_1.jsx(common_1.InspectorQuickAction, { disabled: !canSplit, onClick: onSplit, title: disabledReason, renderIcon: (color) => (jsx_runtime_1.jsx(scissors_1.ScissorsIcon, { style: actionIconStyle, color: color })), children: "Split clip" }));
 };
 const SequenceSourceQuickActions = ({ selection, track, validatedSource }) => {
+    var _a;
     const timelinePosition = remotion_1.Internals.Timeline.useTimelinePosition();
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
+    const { setSelectedModal } = (0, react_1.useContext)(modals_1.SetSelectedModalContext);
     const { propStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesContext);
     const { setPropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
     const confirm = (0, ConfirmationDialog_1.useConfirmationDialog)();
@@ -90,6 +96,40 @@ const SequenceSourceQuickActions = ({ selection, track, validatedSource }) => {
         validatedSource,
     });
     const sourceActionsDisabled = previewServerState.type !== 'connected' || !(0, interactivity_enabled_1.isStudioInteractivityEnabled)();
+    const mediaSequence = track.sequence.type === 'video' || track.sequence.type === 'audio'
+        ? track.sequence
+        : null;
+    const mediaMetadata = (0, use_media_metadata_1.useMediaMetadata)((_a = mediaSequence === null || mediaSequence === void 0 ? void 0 : mediaSequence.src) !== null && _a !== void 0 ? _a : null);
+    const transcriptionDisabledReason = sourceActionsDisabled
+        ? 'Studio is read-only'
+        : selection.nodePathInfo.numberOfSequencesWithThisNodePath > 1
+            ? 'Programmatically duplicated media cannot be transcribed from source'
+            : undefined;
+    const onGenerateCaptions = (0, react_1.useCallback)(() => {
+        if (transcriptionDisabledReason !== undefined || mediaSequence === null) {
+            return;
+        }
+        const nodePath = selection.nodePathInfo.sequenceSubscriptionKey;
+        setSelectedModal({
+            type: 'transcribe',
+            src: mediaSequence.src,
+            displayName: (0, public_output_name_1.getMediaFileName)(mediaSequence.src, mediaSequence.displayName),
+            audioStreamIndex: null,
+            requestInit: null,
+            target: {
+                fileName: nodePath.absolutePath,
+                nodePath,
+                durationInFrames: Number.isFinite(mediaSequence.duration)
+                    ? mediaSequence.duration
+                    : null,
+            },
+        });
+    }, [
+        selection.nodePathInfo,
+        setSelectedModal,
+        mediaSequence,
+        transcriptionDisabledReason,
+    ]);
     const onDuplicate = (0, react_1.useCallback)(() => {
         if (sourceActionsDisabled) {
             return;
@@ -125,7 +165,7 @@ const SequenceSourceQuickActions = ({ selection, track, validatedSource }) => {
             (0, NotificationCenter_1.showNotification)(err.message, 4000);
         });
     }, [selection.nodePathInfo, splitVideoFromAudioDisabledReason]);
-    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [(freezeFrameMenuItem === null || freezeFrameMenuItem === void 0 ? void 0 : freezeFrameMenuItem.type) === 'item' ? (jsx_runtime_1.jsx(common_1.InspectorQuickAction, { disabled: Boolean(freezeFrameMenuItem.disabled), onClick: () => freezeFrameMenuItem.onClick(freezeFrameMenuItem.id, null), renderIcon: (color) => (jsx_runtime_1.jsx(snowflake_1.SnowflakeIcon, { style: largeActionIconStyle, color: color })), children: freezeFrameMenuItem.label })) : null, track.sequence.type === 'video' ? (jsx_runtime_1.jsx(common_1.InspectorQuickAction, { disabled: splitVideoFromAudioDisabledReason !== undefined, onClick: onSplitVideoFromAudio, title: splitVideoFromAudioDisabledReason, renderIcon: (color) => (jsx_runtime_1.jsx(audio_1.AudioIcon, { style: actionIconStyle, color: color })), children: "Split video from audio" })) : null, jsx_runtime_1.jsx(common_1.InspectorQuickAction, { disabled: sourceActionsDisabled, onClick: onDuplicate, renderIcon: (color) => (jsx_runtime_1.jsx(duplicate_1.DuplicateIcon, { style: largeActionIconStyle, color: color })), children: "Duplicate" }), jsx_runtime_1.jsx(common_1.InspectorQuickAction, { disabled: sourceActionsDisabled, onClick: onDelete, renderIcon: (color) => (jsx_runtime_1.jsx(trash_1.TrashIcon, { style: actionIconStyle, color: color })), children: "Delete" })] }));
+    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [(freezeFrameMenuItem === null || freezeFrameMenuItem === void 0 ? void 0 : freezeFrameMenuItem.type) === 'item' ? (jsx_runtime_1.jsx(common_1.InspectorQuickAction, { disabled: Boolean(freezeFrameMenuItem.disabled), onClick: () => freezeFrameMenuItem.onClick(freezeFrameMenuItem.id, null), renderIcon: (color) => (jsx_runtime_1.jsx(snowflake_1.SnowflakeIcon, { style: largeActionIconStyle, color: color })), children: freezeFrameMenuItem.label })) : null, track.sequence.type === 'video' ? (jsx_runtime_1.jsx(common_1.InspectorQuickAction, { disabled: 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" })] }));
 };
 const SequenceExpandedInspector = ({ track, readOnlyStudio }) => {
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);

package/dist/components/InspectorPanel/common.js

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

package/dist/components/InspectorPanel/styles.js

@@ -40,6 +40,7 @@ exports.sectionHeader = {
     lineHeight: '24px',
     padding: `4px 0 4px ${InspectorPanelLayout_1.INSPECTOR_PANEL_HORIZONTAL_PADDING}px`,
     userSelect: 'none',
+    WebkitUserSelect: 'none',
 };
 exports.inspectorSectionBody = {
     display: 'flex',
@@ -144,6 +145,7 @@ exports.detailLabel = {
     overflow: 'hidden',
     textOverflow: 'ellipsis',
     userSelect: 'none',
+    WebkitUserSelect: 'none',
     whiteSpace: 'nowrap',
 };
 exports.detailValue = {

package/dist/components/InspectorPanel/use-composition-actions.js

@@ -59,6 +59,7 @@ const useCompositionActions = () => {
     const canInsertComposition = canShowInsertComposition && !isAddingComposition;
     const canShowGenerateWithAgent = previewInteractive &&
         !window.remotion_isReadOnlyStudio &&
+        browserStudioOperations === null &&
         currentCompositionId !== null;
     const insertSolid = (0, react_1.useCallback)(async () => {
         if (!canInsertSolid ||

package/dist/components/InspectorSourceLocation.js

@@ -28,11 +28,13 @@ const sourceLocationStyle = {
     textDecoration: 'none',
     textOverflow: 'ellipsis',
     userSelect: 'none',
+    WebkitUserSelect: 'none',
     whiteSpace: 'nowrap',
     width: 'fit-content',
 };
 const quickActionStyle = {
     userSelect: 'none',
+    WebkitUserSelect: 'none',
 };
 const sourceLocationLabelStyle = {
     color: 'inherit',
@@ -44,6 +46,7 @@ const sourceLocationLabelStyle = {
     overflow: 'hidden',
     textOverflow: 'ellipsis',
     userSelect: 'none',
+    WebkitUserSelect: 'none',
     whiteSpace: 'nowrap',
 };
 const InspectorSourceLocation = ({ location, canOpen, onOpen, renderIcon, size = 'default' }) => {

package/dist/components/MenuBuildIndicator.js

@@ -15,6 +15,7 @@ const cwd = {
     alignItems: 'center',
     justifyContent: 'center',
     userSelect: 'none',
+    WebkitUserSelect: 'none',
     whiteSpace: 'nowrap',
 };
 const spinnerSize = 14;

package/dist/components/NewComposition/CancelButton.js

@@ -15,7 +15,7 @@ const style = {
     alignItems: 'center',
 };
 const CancelIcon = (props) => {
-    return (jsx_runtime_1.jsx("svg", { viewBox: "0 0 320 512", ...props, children: jsx_runtime_1.jsx("path", { fill: colors_1.CURRENT_COLOR, d: "M207.6 256l107.72-107.72c6.23-6.23 6.23-16.34 0-22.58l-25.03-25.03c-6.23-6.23-16.34-6.23-22.58 0L160 208.4 52.28 100.68c-6.23-6.23-16.34-6.23-22.58 0L4.68 125.7c-6.23 6.23-6.23 16.34 0 22.58L112.4 256 4.68 363.72c-6.23 6.23-6.23 16.34 0 22.58l25.03 25.03c6.23 6.23 16.34 6.23 22.58 0L160 303.6l107.72 107.72c6.23 6.23 16.34 6.23 22.58 0l25.03-25.03c6.23-6.23 6.23-16.34 0-22.58L207.6 256z" }) }));
+    return (jsx_runtime_1.jsx("svg", { viewBox: "0 0 640 640", ...props, children: jsx_runtime_1.jsx("path", { fill: colors_1.CURRENT_COLOR, d: "M507.3 155.3C513.5 149.1 513.5 138.9 507.3 132.7C501.1 126.5 490.9 126.5 484.7 132.7L320 297.4L155.3 132.7C149.1 126.5 138.9 126.5 132.7 132.7C126.5 138.9 126.5 149.1 132.7 155.3L297.4 320L132.7 484.7C126.5 490.9 126.5 501.1 132.7 507.3C138.9 513.5 149.1 513.5 155.3 507.3L320 342.6L484.7 507.3C490.9 513.5 501.1 513.5 507.3 507.3C513.5 501.1 513.5 490.9 507.3 484.7L342.6 320L507.3 155.3z" }) }));
 };
 exports.CancelIcon = CancelIcon;
 const CancelButton = ({ onPress, ...props }) => {

package/dist/components/Preview.js

@@ -47,6 +47,9 @@ const PIXEL_GRID_MIN_SCALE = 4;
 const containerStyle = (options) => {
     return {
         transform: `scale(${options.scale})`,
+        // Keep the scaled composition on its own layer so the checkerboard does
+        // not bleed through its edges at fractional preview scales.
+        willChange: 'transform',
         marginLeft: options.xCorrection,
         marginTop: options.yCorrection,
         width: options.width,

package/dist/components/QuickSwitcher/ExplorerQuickSwitcherTrigger.js

@@ -29,6 +29,7 @@ const quickSwitcherTrigger = {
     flex: 1,
     appearance: 'none',
     userSelect: 'none',
+    WebkitUserSelect: 'none',
     ...(0, hoverable_1.hoverableStyle)({
         idleBackground: colors_1.WHITE_ALPHA_06,
         hoverBackground: colors_1.WHITE_ALPHA_06,

package/dist/components/QuickSwitcher/QuickSwitcherContent.js

@@ -49,6 +49,7 @@ const modeItem = {
     fontSize: 13,
     cursor: 'pointer',
     userSelect: 'none',
+    WebkitUserSelect: 'none',
 };
 const modeInactive = {
     ...modeItem,

package/dist/components/RadioButton.js

@@ -29,6 +29,7 @@ const row = {
     padding: '4px 8px',
     textAlign: 'left',
     userSelect: 'none',
+    WebkitUserSelect: 'none',
     width: 'calc(100% + 16px)',
 };
 const circle = {

package/dist/components/RenderModal/DataEditor.js

@@ -274,6 +274,9 @@ const DataEditor = ({ unresolvedComposition, defaultProps, setDefaultProps, prop
     if (!unresolvedComposition.defaultProps) {
         return jsx_runtime_1.jsx(SchemaErrorMessages_1.NoDefaultProps, { mode: schemaErrorMode });
     }
+    // <Composition> normalizes omitted defaultProps to an empty object.
+    // Avoid rendering field editors with undefined values in that case.
+    const emptyDefaultPropsAreInvalid = Object.keys(defaultProps).length === 0 && !zodValidationResult.success;
     const shouldRenderControlRow = !hideModeControls || (!hideWarningButton && warnings.length > 0);
     const shouldRenderWarningMessages = showWarning && warnings.length > 0;
     const compactLayout = layout === 'inspector';
@@ -284,6 +287,6 @@ const DataEditor = ({ unresolvedComposition, defaultProps, setDefaultProps, prop
                                 jsx_runtime_1.jsx(layout_1.Spacing, { y: 1 }), jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { message: warning.message, align: "flex-start", type: "warning", size: compactLayout ? 'compact' : 'default', action: warning.resolveLink ? (jsx_runtime_1.jsx("a", { href: warning.resolveLink, target: "_blank", rel: "noopener noreferrer", style: compactLayout
                                             ? compactResolveLinkStyle
                                             : resolveLinkStyle, children: "Resolve" })) : null })] }, warning.id)))
-                        : null] })) : null, mode === 'schema' ? (jsx_runtime_1.jsx(SchemaEditor_1.SchemaEditor, { value: defaultProps, setValue: setDefaultProps, schema: schema, scrollableContainer: !compactLayout, contentInset: compactLayout ? InspectorPanelLayout_1.INSPECTOR_PANEL_HORIZONTAL_PADDING : undefined, errorMode: schemaErrorMode })) : (jsx_runtime_1.jsx(RenderModalJSONPropsEditor_1.RenderModalJSONPropsEditor, { value: defaultProps !== null && defaultProps !== void 0 ? defaultProps : {}, setValue: jsonEditorSetValue, onSave: onSave, serializedJSON: serializedJSON, defaultProps: unresolvedComposition.defaultProps, schema: schema, compositionId: unresolvedComposition.id, layout: layout }))] }));
+                        : null] })) : null, mode === 'schema' ? (emptyDefaultPropsAreInvalid ? (jsx_runtime_1.jsx(SchemaErrorMessages_1.InvalidDefaultProps, { zodValidationResult: zodValidationResult })) : (jsx_runtime_1.jsx(SchemaEditor_1.SchemaEditor, { value: defaultProps, setValue: setDefaultProps, schema: schema, scrollableContainer: !compactLayout, contentInset: compactLayout ? InspectorPanelLayout_1.INSPECTOR_PANEL_HORIZONTAL_PADDING : undefined, errorMode: schemaErrorMode }))) : (jsx_runtime_1.jsx(RenderModalJSONPropsEditor_1.RenderModalJSONPropsEditor, { value: defaultProps !== null && defaultProps !== void 0 ? defaultProps : {}, setValue: jsonEditorSetValue, onSave: onSave, serializedJSON: serializedJSON, defaultProps: unresolvedComposition.defaultProps, schema: schema, compositionId: unresolvedComposition.id, layout: layout }))] }));
 };
 exports.DataEditor = DataEditor;

package/dist/components/RenderQueue/CaptionQueueItem.js

@@ -68,7 +68,7 @@ const CaptionQueueItem = ({ job, selected }) => {
     const [hovered, setHovered] = (0, react_1.useState)(false);
     const { removeCaptionJob } = (0, react_1.useContext)(context_1.RenderQueueContext);
     const selectAsset = (0, use_select_asset_1.useSelectAsset)();
-    const isHoverable = job.status === 'done';
+    const isHoverable = job.status === 'done' && job.target === null;
     const containerStyle = (0, react_1.useMemo)(() => {
         return {
             ...container,
@@ -95,6 +95,9 @@ const CaptionQueueItem = ({ job, selected }) => {
         if (job.status !== 'done') {
             return;
         }
+        if (job.target !== null) {
+            return;
+        }
         selectAsset(job.outName);
         (0, url_state_1.pushUrl)(`/assets/${job.outName}`);
     }, [job, selectAsset]);
@@ -120,7 +123,7 @@ const CaptionQueueItem = ({ job, selected }) => {
         if (job.status === 'failed') {
             return job.error.message;
         }
-        return job.outName;
+        return job.target === null ? job.outName : 'Captions added to composition';
     }, [job]);
     return (jsx_runtime_1.jsxs(layout_1.Row, { "data-render-queue-item": job.id, style: containerStyle, align: "center", onClick: onClick, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, className: selected ? item_style_1.RENDER_QUEUE_ITEM_SELECTED_CLASSNAME : undefined, children: [
             jsx_runtime_1.jsx(CaptionJobStatus, { job: job }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsxs("div", { style: right, children: [

package/dist/components/RenderQueue/CaptionQueueProcessor.js

@@ -4,6 +4,9 @@ exports.CaptionQueueProcessor = void 0;
 const whisper_webgpu_1 = require("@remotion/whisper-webgpu");
 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 install_required_package_1 = require("../../helpers/install-required-package");
+const call_api_1 = require("../call-api");
 const resample_media_to_16_khz_1 = require("../Transcription/resample-media-to-16-khz");
 const context_1 = require("./context");
 const load_model_for_job_1 = require("./load-model-for-job");
@@ -73,14 +76,38 @@ const CaptionQueueProcessor = () => {
             const { captions } = (0, whisper_webgpu_1.toCaptions)({
                 whisperWebGpuOutput: transcription,
             });
-            updateCaptionJobProgress(job.id, {
-                message: `Saving ${job.outName}...`,
-                value: 0.95,
-            });
-            await (0, write_static_file_1.writeStaticFile)({
-                contents: JSON.stringify(captions, null, 2),
-                filePath: job.outName,
-            });
+            if (job.target === null) {
+                updateCaptionJobProgress(job.id, {
+                    message: `Saving ${job.outName}...`,
+                    value: 0.95,
+                });
+                await (0, write_static_file_1.writeStaticFile)({
+                    contents: JSON.stringify(captions, null, 2),
+                    filePath: job.outName,
+                });
+            }
+            else {
+                updateCaptionJobProgress(job.id, {
+                    message: 'Adding Basic captions...',
+                    value: 0.95,
+                });
+                await (0, install_required_package_1.installRequiredPackages)([
+                    { name: '@remotion/captions', version: null },
+                ]);
+                const request = {
+                    fileName: job.target.fileName,
+                    nodePath: job.target.nodePath.nodePath,
+                    durationInFrames: job.target.durationInFrames,
+                    captions,
+                };
+                const browserStudioOperations = (0, browser_studio_operations_1.getBrowserStudioOperations)();
+                const response = browserStudioOperations
+                    ? await browserStudioOperations.insertBasicCaptions(request)
+                    : await (0, call_api_1.callApi)('/api/insert-basic-captions', request);
+                if (!response.success) {
+                    throw new Error(response.reason);
+                }
+            }
             captionCount = captions.length;
         }
         catch (error) {

package/dist/components/RenderQueue/VideoMattingQueueItem.js

@@ -71,6 +71,7 @@ const VideoMattingQueueItem = ({ job, selected }) => {
             selected,
         }),
         userSelect: 'none',
+        WebkitUserSelect: 'none',
     }), [done, hovered, selected]);
     const messages = job.status === 'idle'
         ? ['Queued for video matting']

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;
@@ -24,6 +25,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/index.js

@@ -108,6 +108,7 @@ 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;

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/SelectedOutlineSnapIndicators.d.ts

@@ -1,6 +1,12 @@
 import React from 'react';
 import { type SelectedOutlineSnapPoint } from './selected-outline-snap';
 export type UpdateSelectedOutlineSnapPoints = (snapPoints: readonly SelectedOutlineSnapPoint[]) => void;
+export declare const SelectedOutlineSnapLines: React.FC<{
+    readonly compositionHeight: number;
+    readonly compositionWidth: number;
+    readonly scale: number;
+    readonly snapPoints: readonly SelectedOutlineSnapPoint[];
+}>;
 export declare const SelectedOutlineSnapIndicators: React.FC<{
     readonly compositionHeight: number;
     readonly compositionWidth: number;

package/dist/components/SelectedOutlineSnapIndicators.js

@@ -1,9 +1,23 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SelectedOutlineSnapIndicators = void 0;
+exports.SelectedOutlineSnapIndicators = exports.SelectedOutlineSnapLines = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const selected_outline_snap_1 = require("./selected-outline-snap");
+const SelectedOutlineSnapLines = ({ compositionHeight, compositionWidth, scale, snapPoints }) => {
+    if (snapPoints.length === 0) {
+        return null;
+    }
+    return (jsx_runtime_1.jsx("g", { pointerEvents: "none", children: snapPoints.map((snapPoint) => {
+            if (snapPoint.target.axis === 'x') {
+                const x = snapPoint.target.position * scale;
+                return (jsx_runtime_1.jsx("line", { x1: x, x2: x, y1: 0, y2: compositionHeight * scale, stroke: selected_outline_snap_1.selectedOutlineSnapIndicatorColor, strokeWidth: 1, vectorEffect: "non-scaling-stroke" }, `${snapPoint.target.axis}-${snapPoint.target.type}-${snapPoint.target.position}-${snapPoint.edge}`));
+            }
+            const y = snapPoint.target.position * scale;
+            return (jsx_runtime_1.jsx("line", { x1: 0, x2: compositionWidth * scale, y1: y, y2: y, stroke: selected_outline_snap_1.selectedOutlineSnapIndicatorColor, strokeWidth: 1, vectorEffect: "non-scaling-stroke" }, `${snapPoint.target.axis}-${snapPoint.target.type}-${snapPoint.target.position}-${snapPoint.edge}`));
+        }) }));
+};
+exports.SelectedOutlineSnapLines = SelectedOutlineSnapLines;
 const SelectedOutlineSnapIndicators = ({ compositionHeight, compositionWidth, scale, updateSnapPointsRef }) => {
     const [activeSnapPoints, setActiveSnapPoints] = (0, react_1.useState)([]);
     (0, react_1.useLayoutEffect)(() => {
@@ -14,16 +28,6 @@ const SelectedOutlineSnapIndicators = ({ compositionHeight, compositionWidth, sc
             }
         };
     }, [updateSnapPointsRef]);
-    if (activeSnapPoints.length === 0) {
-        return null;
-    }
-    return (jsx_runtime_1.jsx("g", { pointerEvents: "none", children: activeSnapPoints.map((snapPoint) => {
-            if (snapPoint.target.axis === 'x') {
-                const x = snapPoint.target.position * scale;
-                return (jsx_runtime_1.jsx("line", { x1: x, x2: x, y1: 0, y2: compositionHeight * scale, stroke: selected_outline_snap_1.selectedOutlineSnapIndicatorColor, strokeWidth: 1, vectorEffect: "non-scaling-stroke" }, `${snapPoint.target.axis}-${snapPoint.target.type}-${snapPoint.target.position}-${snapPoint.edge}`));
-            }
-            const y = snapPoint.target.position * scale;
-            return (jsx_runtime_1.jsx("line", { x1: 0, x2: compositionWidth * scale, y1: y, y2: y, stroke: selected_outline_snap_1.selectedOutlineSnapIndicatorColor, strokeWidth: 1, vectorEffect: "non-scaling-stroke" }, `${snapPoint.target.axis}-${snapPoint.target.type}-${snapPoint.target.position}-${snapPoint.edge}`));
-        }) }));
+    return (jsx_runtime_1.jsx(exports.SelectedOutlineSnapLines, { compositionHeight: compositionHeight, compositionWidth: compositionWidth, scale: scale, snapPoints: activeSnapPoints }));
 };
 exports.SelectedOutlineSnapIndicators = SelectedOutlineSnapIndicators;

package/dist/components/SequencePropsSubscriptionProvider.d.ts

@@ -1,4 +1,7 @@
 import type { OverrideIdToNodePaths, TSequence } from 'remotion';
+export declare const OverrideIdToNodePathMappingsRefContext: import("react").Context<{
+    readonly current: OverrideIdToNodePaths;
+}>;
 export declare const getReadOnlyOverrideIdToNodePathMappings: (sequences: readonly TSequence[]) => OverrideIdToNodePaths;
 export declare const SequencePropsSubscriptionProvider: React.FC<{
     readonly children: React.ReactNode;

package/dist/components/SequencePropsSubscriptionProvider.js

@@ -1,9 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SequencePropsSubscriptionProvider = exports.getReadOnlyOverrideIdToNodePathMappings = void 0;
+exports.SequencePropsSubscriptionProvider = exports.getReadOnlyOverrideIdToNodePathMappings = exports.OverrideIdToNodePathMappingsRefContext = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
+exports.OverrideIdToNodePathMappingsRefContext = (0, react_1.createContext)({ current: {} });
 const getReadOnlyOverrideIdToNodePathMappings = (sequences) => {
     return Object.fromEntries(sequences.flatMap((sequence) => {
         var _a;
@@ -32,6 +33,9 @@ const SequencePropsSubscriptionProvider = ({ children }) => {
     const readOnlyOverrideToNodePathMap = (0, react_1.useMemo)(() => window.remotion_isReadOnlyStudio
         ? (0, exports.getReadOnlyOverrideIdToNodePathMappings)(sequences)
         : null, [sequences]);
+    const overrideIdToNodePathMappings = readOnlyOverrideToNodePathMap !== null && readOnlyOverrideToNodePathMap !== void 0 ? readOnlyOverrideToNodePathMap : overrideToNodePathMap;
+    const overrideIdToNodePathMappingsRef = (0, react_1.useRef)(overrideIdToNodePathMappings);
+    overrideIdToNodePathMappingsRef.current = overrideIdToNodePathMappings;
     const setOverrideIdToNodePath = (0, react_1.useCallback)((overrideId, state) => {
         setOverrideIdToNodePathMap((prev) => {
             const existing = prev[overrideId];
@@ -50,13 +54,11 @@ const SequencePropsSubscriptionProvider = ({ children }) => {
         });
     }, []);
     const getters = (0, react_1.useMemo)(() => {
-        return {
-            overrideIdToNodePathMappings: readOnlyOverrideToNodePathMap !== null && readOnlyOverrideToNodePathMap !== void 0 ? readOnlyOverrideToNodePathMap : overrideToNodePathMap,
-        };
-    }, [overrideToNodePathMap, readOnlyOverrideToNodePathMap]);
+        return { overrideIdToNodePathMappings };
+    }, [overrideIdToNodePathMappings]);
     const setters = (0, react_1.useMemo)(() => {
         return { setOverrideIdToNodePath };
     }, [setOverrideIdToNodePath]);
-    return (jsx_runtime_1.jsx(remotion_1.Internals.OverrideIdsToNodePathsGettersContext.Provider, { value: getters, children: jsx_runtime_1.jsx(remotion_1.Internals.OverrideIdsToNodePathsSettersContext.Provider, { value: setters, children: children }) }));
+    return (jsx_runtime_1.jsx(exports.OverrideIdToNodePathMappingsRefContext.Provider, { value: overrideIdToNodePathMappingsRef, children: jsx_runtime_1.jsx(remotion_1.Internals.OverrideIdsToNodePathsGettersContext.Provider, { value: getters, children: jsx_runtime_1.jsx(remotion_1.Internals.OverrideIdsToNodePathsSettersContext.Provider, { value: setters, children: children }) }) }));
 };
 exports.SequencePropsSubscriptionProvider = SequencePropsSubscriptionProvider;

package/dist/components/Timeline/TimelineDeleteKeybindings.js

@@ -6,6 +6,7 @@ const remotion_1 = require("remotion");
 const client_id_1 = require("../../helpers/client-id");
 const use_keybinding_1 = require("../../helpers/use-keybinding");
 const ConfirmationDialog_1 = require("../ConfirmationDialog");
+const SequencePropsSubscriptionProvider_1 = require("../SequencePropsSubscriptionProvider");
 const duplicate_selected_timeline_item_1 = require("./duplicate-selected-timeline-item");
 const imperative_state_1 = require("./imperative-state");
 const split_selected_timeline_item_1 = require("./split-selected-timeline-item");
@@ -15,7 +16,7 @@ const TimelineDeleteKeybindings = () => {
     const keybindings = (0, use_keybinding_1.useKeybinding)();
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const sequencesRef = (0, react_1.useContext)(remotion_1.Internals.SequenceManagerRefContext);
-    const { overrideIdToNodePathMappings } = (0, react_1.useContext)(remotion_1.Internals.OverrideIdsToNodePathsGettersContext);
+    const overrideIdToNodePathMappingsRef = (0, react_1.useContext)(SequencePropsSubscriptionProvider_1.OverrideIdToNodePathMappingsRefContext);
     const propStatusesRef = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesRefContext);
     const { canSelect } = (0, TimelineSelection_1.useTimelineSelection)();
     const currentSelection = (0, TimelineSelection_1.useCurrentTimelineSelectionStateAsRef)();
@@ -56,11 +57,8 @@ const TimelineDeleteKeybindings = () => {
         });
         const split = keybindings.registerKeybinding({
             event: 'keydown',
-            key: 'd',
-            callback: (event) => {
-                if (!(0, split_selected_timeline_item_1.shouldHandleTimelineSplitShortcut)(event)) {
-                    return;
-                }
+            action: 'splitSequences',
+            callback: () => {
                 const { selectedItems } = currentSelection.current;
                 if (selectedItems.length === 0) {
                     return;
@@ -68,7 +66,7 @@ const TimelineDeleteKeybindings = () => {
                 const splitPromise = (0, split_selected_timeline_item_1.splitSelectedTimelineItems)({
                     selections: selectedItems,
                     sequences: sequencesRef.current,
-                    overrideIdsToNodePaths: overrideIdToNodePathMappings,
+                    overrideIdsToNodePaths: overrideIdToNodePathMappingsRef.current,
                     propStatuses: propStatusesRef.current,
                     splitFrame: (0, imperative_state_1.getCurrentFrame)(),
                 });
@@ -77,7 +75,6 @@ const TimelineDeleteKeybindings = () => {
                 }
                 splitPromise.catch(() => undefined);
             },
-            commandCtrlKey: true,
             preventDefault: true,
             triggerIfInputFieldFocused: false,
             keepRegisteredWhenNotHighestContext: false,
@@ -93,7 +90,7 @@ const TimelineDeleteKeybindings = () => {
         currentSelection,
         deleteTimelineItems,
         keybindings,
-        overrideIdToNodePathMappings,
+        overrideIdToNodePathMappingsRef,
         propStatusesRef,
         previewServerState,
         sequencesRef,

package/dist/components/Timeline/TimelineEffectItem.js

@@ -24,6 +24,7 @@ const rowLabel = {
     fontSize: 12,
     color: colors_1.WHITE_ALPHA_80,
     userSelect: 'none',
+    WebkitUserSelect: 'none',
 };
 const rowStyle = {
     height: timeline_layout_1.TREE_GROUP_ROW_HEIGHT,

package/dist/components/Timeline/TimelineExpandArrowButton.js

@@ -52,6 +52,7 @@ const arrowButton = {
     fontSize: 8,
     marginRight: 4,
     userSelect: 'none',
+    WebkitUserSelect: 'none',
     outline: 'none',
     lineHeight: 1,
 };

package/dist/components/Timeline/TimelineExpandedRow.js

@@ -20,6 +20,7 @@ const rowLabel = {
     fontSize: 12,
     color: colors_1.WHITE_ALPHA_80,
     userSelect: 'none',
+    WebkitUserSelect: 'none',
 };
 const TimelineExpandedRowInner = ({ node, depth, nestedDepth, rowDepthBase, getIsExpanded, toggleTrack, validatedLocation, nodePath, schema, keyframeDisplayOffset, keyframeControlsMode, }) => {
     const rowDepth = (rowDepthBase !== null && rowDepthBase !== void 0 ? rowDepthBase : (0, timeline_row_layout_1.getExpandedRowDepth)({ nestedDepth, treeDepth: 0 })) + depth;

package/dist/components/Timeline/TimelineFieldLabel.js

@@ -12,6 +12,7 @@ const fieldNameBase = {
     lineHeight: `${timeline_field_row_layout_1.TIMELINE_STACKED_FIELD_HEADER_HEIGHT}px`,
     color: colors_1.WHITE_ALPHA_80,
     userSelect: 'none',
+    WebkitUserSelect: 'none',
     whiteSpace: 'nowrap',
     overflow: 'hidden',
     textOverflow: 'ellipsis',

package/dist/components/Timeline/TimelineKeyframeControls.js

@@ -52,6 +52,7 @@ const navButtonStyle = {
     outline: 'none',
     padding: 0,
     userSelect: 'none',
+    WebkitUserSelect: 'none',
     width: NAV_BUTTON_SIZE,
 };
 const inspectorNavButtonStyle = {