feat: Split View scene + timeline trim indicator

apps/desktop/src/routes/editor/Timeline/ClipTrack.tsx

@@ -8,6 +8,7 @@
 	createEffect,
 	createMemo,
 	createRoot,
+	createSignal,
 	For,
 	Match,
 	mergeProps,
@@ -176,19 +177,26 @@
 		totalDuration,
 		micWaveforms,
 		systemAudioWaveforms,
-		metaQuery,
 	} = useEditorContext();
 
 	const { secsPerPixel, duration } = useTimelineContext();
 
+	const [startResizePreview, setStartResizePreview] = createSignal<{
+		index: number;
+		previewStart: number;
+	} | null>(null);
+
 	const segments = (): Array<TimelineSegment> =>
 		project.timeline?.segments ?? [{ start: 0, end: duration(), timescale: 1 }];
 
 	function onHandleReleased() {
 		const { transform } = editorState.timeline;
 
 		if (transform.position + transform.zoom > totalDuration() + 4) {
-			transform.updateZoom(totalDuration(), editorState.previewTime!);
+			transform.updateZoom(
+				totalDuration(),
+				editorState.previewTime ?? editorState.playbackTime,
+			);
 		}
 	}
 
@@ -439,20 +447,19 @@
 												start +
 												(event.clientX - downEvent.clientX) * secsPerPixel();
 
-											setProject(
-												"timeline",
-												"segments",
-												i(),
-												"start",
-												Math.min(
-													Math.max(
-														newStart,
-														prevSegmentIsSameClip ? prevSegment.end : 0,
-														segment.end - maxDuration,
-													),
-													segment.end - 1,
+											const constrained = Math.min(
+												Math.max(
+													newStart,
+													prevSegmentIsSameClip ? prevSegment.end : 0,
+													segment.end - maxDuration,
 												),
+												segment.end - 1,
 											);
+
+											setStartResizePreview({
+												index: i(),
+												previewStart: constrained,
+											});
 										}
 
 										const resumeHistory = projectHistory.pause();
@@ -463,12 +470,48 @@
 													dispose();
 													resumeHistory();
 													update(e);
+													const p = startResizePreview();
+													if (p && p.index === i()) {
+														setProject(
+															"timeline",
+															"segments",
+															i(),
+															"start",
+															p.previewStart,
+														);
+													}
+													setStartResizePreview(null);
 													onHandleReleased();
 												},
 											});
 										});
 									}}
 								/>
+								<Show
+									when={(() => {
+										const p = startResizePreview();
+										return p && p.index === i();
+									})()}
+								>
+									{() => {
+										const p = startResizePreview();
+										const previewWidth = () =>
+											(segment.end - (p?.previewStart ?? segment.start)) /
+											secsPerPixel();
+										const leftOffset = () =>
+											((p?.previewStart ?? segment.start) - segment.start) /
+											secsPerPixel();
+										return (
+											<div
+												class="absolute z-20 inset-y-0 left-0 pointer-events-none bg-white/30 dark:bg-black/30 ring-1 ring-white/70 dark:ring-white/30 rounded-md"
+												style={{
+													left: `${Math.max(0, leftOffset())}px`,
+													width: `${Math.max(0, previewWidth())}px`,
+												}}
+											/>
+										);
+									}}
+								</Show>
 								<SegmentContent class="relative justify-center items-center">
 									{(() => {
 										const ctx = useSegmentContext();

apps/desktop/src/routes/editor/Timeline/SceneTrack.tsx

@@ -59,6 +59,8 @@ export function SceneTrack(props: {
 				return <IconLucideVideo class="size-3.5" />;
 			case "hideCamera":
 				return <IconLucideEyeOff class="size-3.5" />;
+			case "splitView":
+				return <IconLucideLayout class="size-3.5" />;
 			default:
 				return <IconLucideMonitor class="size-3.5" />;
 		}
@@ -70,6 +72,8 @@ export function SceneTrack(props: {
 				return "Camera Only";
 			case "hideCamera":
 				return "Hide Camera";
+			case "splitView":
+				return "Split View";
 			default:
 				return "Default";
 		}

apps/desktop/src/routes/editor/context.ts

@@ -159,6 +159,75 @@ export const [EditorContextProvider, useEditorContext] = createContextProvider(
 					setEditorState("timeline", "selection", null);
 				});
 			},
+			duplicateSceneSegment: (segmentIndex: number) => {
+				if (!project.timeline?.sceneSegments?.[segmentIndex]) return;
+				const segment = project.timeline.sceneSegments[segmentIndex];
+				const segmentDuration = segment.end - segment.start;
+				const newSegmentStart = segment.end;
+				const newSegmentEnd = newSegmentStart + segmentDuration;
+
+				const timelineDuration = totalDuration();
+				if (newSegmentEnd > timelineDuration) {
+					return;
+				}
+
+				const wouldOverlap = project.timeline.sceneSegments.some((s, i) => {
+					if (i === segmentIndex) return false; // Skip the original segment
+					return newSegmentStart < s.end && newSegmentEnd > s.start;
+				});
+
+				if (wouldOverlap) {
+					return;
+				}
+
+				batch(() => {
+					setProject(
+						"timeline",
+						"sceneSegments",
+						produce((s) => {
+							if (!s) return;
+							s.splice(segmentIndex + 1, 0, {
+								...segment,
+								start: newSegmentStart,
+								end: newSegmentEnd,
+								splitViewSettings: segment.splitViewSettings
+									? { ...segment.splitViewSettings }
+									: undefined,
+							});
+						}),
+					);
+					setEditorState("timeline", "selection", {
+						type: "scene",
+						index: segmentIndex + 1,
+					});
+					setEditorState("playbackTime", newSegmentStart);
+					const currentZoom = editorState.timeline.transform.zoom;
+					const targetPosition = Math.max(0, newSegmentStart - currentZoom / 2);
+					editorState.timeline.transform.setPosition(targetPosition);
+				});
+			},
+			copySceneSettingsFromOriginal: (segmentIndex: number) => {
+				if (!project.timeline?.sceneSegments?.[segmentIndex]) return;
+
+				const currentSegment = project.timeline.sceneSegments[segmentIndex];
+				const originalSegment = project.timeline.sceneSegments.find(
+					(s, i) => i !== segmentIndex && s.mode === currentSegment.mode,
+				);
+
+				if (!originalSegment) return;
+
+				setProject(
+					"timeline",
+					"sceneSegments",
+					segmentIndex,
+					produce((s) => {
+						if (!s) return;
+						if (s.mode === "splitView" && originalSegment.splitViewSettings) {
+							s.splitViewSettings = { ...originalSegment.splitViewSettings };
+						}
+					}),
+				);
+			},
 		};
 
 		createEffect(
@@ -338,7 +407,7 @@ function transformMeta({ pretty_name, ...rawMeta }: RecordingMeta) {
 		throw new Error("Instant mode recordings cannot be edited");
 	}
 
-	let meta;
+	let meta = null;
 
 	if ("segments" in rawMeta) {
 		meta = {

apps/desktop/src/utils/tauri.ts

@@ -448,15 +448,17 @@ export type RequestOpenSettings = { page: string }
 export type RequestScreenCapturePrewarm = { force?: boolean }
 export type RequestStartRecording = { mode: RecordingMode }
 export type S3UploadMeta = { id: string }
-export type SceneMode = "default" | "cameraOnly" | "hideCamera"
-export type SceneSegment = { start: number; end: number; mode?: SceneMode }
+export type SceneMode = "default" | "cameraOnly" | "hideCamera" | "splitView"
+export type SceneSegment = { start: number; end: number; mode?: SceneMode; splitViewSettings?: SplitViewSettings | null }
 export type ScreenCaptureTarget = { variant: "window"; id: WindowId } | { variant: "display"; id: DisplayId } | { variant: "area"; screen: DisplayId; bounds: LogicalBounds }
 export type SegmentRecordings = { display: Video; camera: Video | null; mic: Audio | null; system_audio: Audio | null }
 export type SerializedEditorInstance = { framesSocketUrl: string; recordingDuration: number; savedProjectConfig: ProjectConfiguration; recordings: ProjectRecordingsMeta; path: string }
 export type ShadowConfiguration = { size: number; opacity: number; blur: number }
 export type SharingMeta = { id: string; link: string }
 export type ShowCapWindow = "Setup" | { Main: { init_target_mode: RecordingTargetMode | null } } | { Settings: { page: string | null } } | { Editor: { project_path: string } } | "RecordingsOverlay" | { WindowCaptureOccluder: { screen_id: DisplayId } } | { TargetSelectOverlay: { display_id: DisplayId } } | { CaptureArea: { screen_id: DisplayId } } | "Camera" | { InProgressRecording: { countdown: number | null } } | "Upgrade" | "ModeSelect"
 export type SingleSegment = { display: VideoMeta; camera?: VideoMeta | null; audio?: AudioMeta | null; cursor?: string | null }
+export type SplitViewSettings = { cameraPosition: XY<number>; screenPosition: XY<number>; cameraSide: SplitViewSide; cameraZoom?: number; screenZoom?: number; fullscreen?: boolean }
+export type SplitViewSide = "left" | "right"
 export type StartRecordingInputs = { capture_target: ScreenCaptureTarget; capture_system_audio?: boolean; mode: RecordingMode }
 export type StereoMode = "stereo" | "monoL" | "monoR"
 export type StudioRecordingMeta = { segment: SingleSegment } | { inner: MultipleSegments }

crates/project/src/configuration.rs

@@ -487,6 +487,45 @@ pub enum SceneMode {
     Default,
     CameraOnly,
     HideCamera,
+    SplitView,
+}
+
+#[derive(Type, Serialize, Deserialize, Clone, Debug)]
+#[serde(rename_all = "camelCase")]
+pub struct SplitViewSettings {
+    pub camera_position: XY<f64>,
+    pub screen_position: XY<f64>,
+    pub camera_side: SplitViewSide,
+    #[serde(default = "default_zoom")]
+    pub camera_zoom: f64,
+    #[serde(default = "default_zoom")]
+    pub screen_zoom: f64,
+    #[serde(default)]
+    pub fullscreen: bool,
+}
+
+fn default_zoom() -> f64 {
+    1.0
+}
+
+impl Default for SplitViewSettings {
+    fn default() -> Self {
+        Self {
+            camera_position: XY { x: 0.5, y: 0.5 },
+            screen_position: XY { x: 0.5, y: 0.5 },
+            camera_side: SplitViewSide::Right,
+            camera_zoom: 1.0,
+            screen_zoom: 1.0,
+            fullscreen: false,
+        }
+    }
+}
+
+#[derive(Type, Serialize, Deserialize, Clone, Debug)]
+#[serde(rename_all = "camelCase")]
+pub enum SplitViewSide {
+    Left,
+    Right,
 }
 
 #[derive(Type, Serialize, Deserialize, Clone, Debug)]
@@ -496,6 +535,8 @@ pub struct SceneSegment {
     pub end: f64,
     #[serde(default)]
     pub mode: SceneMode,
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub split_view_settings: Option<SplitViewSettings>,
 }
 
 #[derive(Type, Serialize, Deserialize, Clone, Debug)]

crates/rendering/src/composite_frame.rs

@@ -26,13 +26,12 @@ pub struct CompositeVideoFrameUniforms {
     pub shadow_opacity: f32,
     pub shadow_blur: f32,
     pub opacity: f32,
+    pub rounding_mask: f32,
     pub border_enabled: f32,
     pub border_width: f32,
     pub _padding0: f32,
-    pub _padding1: [f32; 2],
-    pub _padding1b: [f32; 2],
     pub border_color: [f32; 4],
-    pub _padding2: [f32; 4],
+    pub _padding1: [f32; 2],
 }
 
 impl Default for CompositeVideoFrameUniforms {
@@ -53,13 +52,12 @@ impl Default for CompositeVideoFrameUniforms {
             shadow_opacity: Default::default(),
             shadow_blur: Default::default(),
             opacity: 1.0,
+            rounding_mask: 15.0,
             border_enabled: 0.0,
             border_width: 5.0,
             _padding0: 0.0,
-            _padding1: [0.0; 2],
-            _padding1b: [0.0; 2],
             border_color: [1.0, 1.0, 1.0, 0.8],
-            _padding2: [0.0; 4],
+            _padding1: [0.0; 2],
         }
     }
 }

crates/rendering/src/layers/mod.rs

@@ -4,10 +4,12 @@ mod camera;
 mod captions;
 mod cursor;
 mod display;
+mod shadow;
 
 pub use background::*;
 pub use blur::*;
 pub use camera::*;
 pub use captions::*;
 pub use cursor::*;
 pub use display::*;
+pub use shadow::*;