-
+ {children}
- {children}
-
+
-
+
+
Default
-
-
+
+
+
+
+ Split View
+
+
+
+
Camera Only
-
-
+
+
+
+
Hide Camera
-
-
-
-
-
+
+
+
-
-
-
+
);
}
@@ -2455,3 +2491,5 @@ function hexToRgb(hex: string): [number, number, number] | null {
if (!match) return null;
return match.slice(1).map((c) => Number.parseInt(c, 16)) as any;
}
+
+// Position control moved to SceneSegmentConfig.tsx for better organization
diff --git a/apps/desktop/src/routes/editor/SceneSegmentConfig.tsx b/apps/desktop/src/routes/editor/SceneSegmentConfig.tsx
new file mode 100644
index 0000000000..03dd5a199e
--- /dev/null
+++ b/apps/desktop/src/routes/editor/SceneSegmentConfig.tsx
@@ -0,0 +1,314 @@
+import {
+ RadioGroup as KRadioGroup,
+} from "@kobalte/core/radio-group";
+import { createSignal, For, Show } from "solid-js";
+import { type SceneSegment, type SplitViewSettings } from "~/utils/tauri";
+import { EditorButton, Slider } from "./ui";
+import { useEditorContext } from "./context";
+import IconLucideCheck from "~icons/lucide/check";
+import IconLucideMonitor from "~icons/lucide/monitor";
+import IconLucideLayout from "~icons/lucide/layout";
+import IconLucideVideo from "~icons/lucide/video";
+import IconLucideEyeOff from "~icons/lucide/eye-off";
+import IconLucideAlignLeft from "~icons/lucide/align-left";
+import IconLucideAlignRight from "~icons/lucide/align-right";
+import IconCapTrash from "~icons/iconoir/trash";
+import IconLucideSettings from "~icons/lucide/settings";
+
+function SimplePositionControl(props: {
+ position: { x: number; y: number };
+ onChange: (position: { x: number; y: number }) => void;
+ label: string;
+}) {
+ const [isDragging, setIsDragging] = createSignal(false);
+
+ return (
+ ; screenPosition: XY; cameraSide: SplitViewSide; cameraZoom?: number; screenZoom?: number }
+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 }
diff --git a/crates/project/src/configuration.rs b/crates/project/src/configuration.rs
index 432be71bf5..9f273800f4 100644
--- a/crates/project/src/configuration.rs
+++ b/crates/project/src/configuration.rs
@@ -464,6 +464,42 @@ pub enum SceneMode {
Default,
CameraOnly,
HideCamera,
+ SplitView,
+}
+
+#[derive(Type, Serialize, Deserialize, Clone, Debug)]
+#[serde(rename_all = "camelCase")]
+pub struct SplitViewSettings {
+ pub camera_position: XY,
+ pub screen_position: XY,
+ pub camera_side: SplitViewSide,
+ #[serde(default = "default_zoom")]
+ pub camera_zoom: f64,
+ #[serde(default = "default_zoom")]
+ pub screen_zoom: f64,
+}
+
+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,
+ }
+ }
+}
+
+#[derive(Type, Serialize, Deserialize, Clone, Debug)]
+#[serde(rename_all = "camelCase")]
+pub enum SplitViewSide {
+ Left,
+ Right,
}
#[derive(Type, Serialize, Deserialize, Clone, Debug)]
@@ -473,6 +509,8 @@ pub struct SceneSegment {
pub end: f64,
#[serde(default)]
pub mode: SceneMode,
+ #[serde(skip_serializing_if = "Option::is_none")]
+ pub split_view_settings: Option,
}
#[derive(Type, Serialize, Deserialize, Clone, Debug)]
diff --git a/crates/rendering/src/lib.rs b/crates/rendering/src/lib.rs
index 52ac314afd..298c937c8f 100644
--- a/crates/rendering/src/lib.rs
+++ b/crates/rendering/src/lib.rs
@@ -1,7 +1,7 @@
use anyhow::Result;
use cap_project::{
AspectRatio, CameraShape, CameraXPosition, CameraYPosition, Crop, CursorEvents,
- ProjectConfiguration, RecordingMeta, StudioRecordingMeta, XY,
+ ProjectConfiguration, RecordingMeta, SplitViewSettings, SplitViewSide, StudioRecordingMeta, XY,
};
use composite_frame::CompositeVideoFrameUniforms;
use core::f64;
@@ -342,6 +342,8 @@ pub struct ProjectUniforms {
display: CompositeVideoFrameUniforms,
camera: Option,
camera_only: Option,
+ split_view_camera: Option,
+ split_view_display: Option,
interpolated_cursor: Option,
pub project: ProjectConfiguration,
pub zoom: InterpolatedZoom,
@@ -635,7 +637,7 @@ impl ProjectUniforms {
.advanced_shadow
.as_ref()
.map_or(50.0, |s| s.blur),
- opacity: scene.screen_opacity as f32,
+ opacity: scene.regular_screen_transition_opacity() as f32,
_padding: [0.0; 3],
}
};
@@ -812,6 +814,188 @@ impl ProjectUniforms {
}
});
+ // Calculate split view uniforms
+ let (split_view_camera, split_view_display) = if scene.is_split_view() || scene.is_transitioning_split_view() {
+ // Get split view settings from current or upcoming scene segment
+ // During transitions, we need to look for the segment we're transitioning into
+ let split_settings = project.timeline
+ .as_ref()
+ .and_then(|t| {
+ // First try to find the current segment
+ let current = t.scene_segments.iter()
+ .find(|s| frame_time as f64 >= s.start && (frame_time as f64) < s.end)
+ .and_then(|s| s.split_view_settings.as_ref());
+
+ // If not in a segment, look for the next segment we're transitioning into
+ // This handles the transition period before the segment starts
+ if current.is_none() && scene.is_transitioning_split_view() {
+ t.scene_segments.iter()
+ .find(|s| {
+ // Check if this is a split view segment we're transitioning into
+ matches!(s.mode, cap_project::SceneMode::SplitView) &&
+ s.start > frame_time as f64 &&
+ (s.start - frame_time as f64) < scene::SCENE_TRANSITION_DURATION
+ })
+ .and_then(|s| s.split_view_settings.as_ref())
+ } else {
+ current
+ }
+ })
+ .cloned()
+ .unwrap_or_else(SplitViewSettings::default);
+
+ let output_size_f32 = [output_size.0 as f32, output_size.1 as f32];
+ let half_width = output_size_f32[0] / 2.0;
+
+ // Determine which side camera and screen are on
+ let (camera_x_offset, screen_x_offset) = match split_settings.camera_side {
+ SplitViewSide::Left => (0.0, half_width),
+ SplitViewSide::Right => (half_width, 0.0),
+ };
+
+ // Display uniforms for screen
+ let split_display = {
+ let screen_size = options.screen_size;
+ let crop = Self::get_crop(&options, project);
+ let frame_size = [screen_size.x as f32, screen_size.y as f32];
+
+ // Calculate crop bounds to fill the half while maintaining aspect ratio
+ let crop_size = [crop.size.x as f32, crop.size.y as f32];
+ let source_aspect = crop_size[0] / crop_size[1];
+ let target_aspect = half_width / output_size_f32[1];
+
+ // Apply position adjustment (0.0 = full crop from one side, 1.0 = full crop from other side)
+ let position_factor = split_settings.screen_position.x as f32;
+ let zoom = split_settings.screen_zoom as f32;
+
+ // Apply zoom by adjusting the visible area
+ let zoomed_crop_size = [crop_size[0] / zoom, crop_size[1] / zoom];
+
+ // We want to fill the entire half, so we crop the source
+ let (crop_x, crop_y, crop_width, crop_height) = if source_aspect > target_aspect {
+ // Source is wider - crop left and right
+ let visible_width = zoomed_crop_size[1] * target_aspect;
+ let max_crop_offset = crop_size[0] - visible_width;
+ let crop_offset = max_crop_offset * position_factor;
+
+ // Center the zoomed area
+ let zoom_offset_x = (crop_size[0] - zoomed_crop_size[0]) * position_factor;
+ let zoom_offset_y = (crop_size[1] - zoomed_crop_size[1]) * split_settings.screen_position.y as f32;
+
+ (
+ crop.position.x as f32 + crop_offset + zoom_offset_x,
+ crop.position.y as f32 + zoom_offset_y,
+ visible_width,
+ zoomed_crop_size[1]
+ )
+ } else {
+ // Source is taller - crop top and bottom
+ let visible_height = zoomed_crop_size[0] / target_aspect;
+ let max_crop_offset = crop_size[1] - visible_height;
+ let crop_offset = max_crop_offset * (split_settings.screen_position.y as f32);
+
+ // Center the zoomed area
+ let zoom_offset_x = (crop_size[0] - zoomed_crop_size[0]) * position_factor;
+ let zoom_offset_y = (crop_size[1] - zoomed_crop_size[1]) * split_settings.screen_position.y as f32;
+
+ (
+ crop.position.x as f32 + zoom_offset_x,
+ crop.position.y as f32 + crop_offset + zoom_offset_y,
+ zoomed_crop_size[0],
+ visible_height
+ )
+ };
+
+ Some(CompositeVideoFrameUniforms {
+ output_size: output_size_f32,
+ frame_size,
+ crop_bounds: [crop_x, crop_y, crop_x + crop_width, crop_y + crop_height],
+ target_bounds: [screen_x_offset, 0.0, screen_x_offset + half_width, output_size_f32[1]],
+ target_size: [half_width, output_size_f32[1]],
+ rounding_px: 0.0,
+ mirror_x: 0.0,
+ velocity_uv: [0.0, 0.0],
+ motion_blur_amount: 0.0,
+ camera_motion_blur_amount: 0.0,
+ shadow: 0.0,
+ shadow_size: 0.0,
+ shadow_opacity: 0.0,
+ shadow_blur: 0.0,
+ opacity: (scene.split_view_transition_opacity() * scene.screen_opacity) as f32,
+ _padding: [0.0; 3],
+ })
+ };
+
+ // Camera uniforms
+ let split_camera = options.camera_size.map(|camera_size| {
+ let frame_size = [camera_size.x as f32, camera_size.y as f32];
+ let source_aspect = frame_size[0] / frame_size[1];
+ let target_aspect = half_width / output_size_f32[1];
+
+ // Apply position adjustment for camera
+ let cam_pos_x = split_settings.camera_position.x as f32;
+ let cam_pos_y = split_settings.camera_position.y as f32;
+ let cam_zoom = split_settings.camera_zoom as f32;
+
+ // Apply zoom by adjusting the visible area
+ let zoomed_frame_size = [frame_size[0] / cam_zoom, frame_size[1] / cam_zoom];
+
+ // Calculate crop bounds to fill the half while maintaining aspect ratio
+ let crop_bounds = if source_aspect > target_aspect {
+ // Camera is wider - crop left and right to fit
+ let visible_width = zoomed_frame_size[1] * target_aspect;
+ let max_crop_offset = frame_size[0] - visible_width;
+ let crop_x = max_crop_offset * cam_pos_x;
+
+ // Center the zoomed area
+ let zoom_offset_x = (frame_size[0] - zoomed_frame_size[0]) * cam_pos_x;
+ let zoom_offset_y = (frame_size[1] - zoomed_frame_size[1]) * cam_pos_y;
+
+ [crop_x + zoom_offset_x,
+ zoom_offset_y,
+ crop_x + zoom_offset_x + visible_width,
+ zoom_offset_y + zoomed_frame_size[1]]
+ } else {
+ // Camera is taller - crop top and bottom to fit
+ let visible_height = zoomed_frame_size[0] / target_aspect;
+ let max_crop_offset = frame_size[1] - visible_height;
+ let crop_y = max_crop_offset * cam_pos_y;
+
+ // Center the zoomed area
+ let zoom_offset_x = (frame_size[0] - zoomed_frame_size[0]) * cam_pos_x;
+ let zoom_offset_y = (frame_size[1] - zoomed_frame_size[1]) * cam_pos_y;
+
+ [zoom_offset_x,
+ crop_y + zoom_offset_y,
+ zoom_offset_x + zoomed_frame_size[0],
+ crop_y + zoom_offset_y + visible_height]
+ };
+
+ CompositeVideoFrameUniforms {
+ output_size: output_size_f32,
+ frame_size,
+ crop_bounds,
+ target_bounds: [camera_x_offset, 0.0, camera_x_offset + half_width, output_size_f32[1]],
+ target_size: [half_width, output_size_f32[1]],
+ rounding_px: 0.0,
+ mirror_x: if project.camera.mirror { 1.0 } else { 0.0 },
+ velocity_uv: [0.0, 0.0],
+ motion_blur_amount: 0.0,
+ camera_motion_blur_amount: 0.0,
+ shadow: 0.0,
+ shadow_size: 0.0,
+ shadow_opacity: 0.0,
+ shadow_blur: 0.0,
+ opacity: (scene.split_view_transition_opacity() * scene.camera_opacity) as f32,
+ _padding: [0.0; 3],
+ }
+ });
+
+ (split_camera, split_display)
+ } else {
+ (None, None)
+ };
+
Self {
output_size,
cursor_size: project.cursor.size as f32,
@@ -819,6 +1003,8 @@ impl ProjectUniforms {
display,
camera,
camera_only,
+ split_view_camera,
+ split_view_display,
project: project.clone(),
zoom,
scene,
@@ -887,6 +1073,8 @@ pub struct RendererLayers {
cursor: CursorLayer,
camera: CameraLayer,
camera_only: CameraLayer,
+ split_view_camera: CameraLayer,
+ split_view_display: DisplayLayer,
#[allow(unused)]
captions: CaptionsLayer,
}
@@ -900,6 +1088,8 @@ impl RendererLayers {
cursor: CursorLayer::new(device),
camera: CameraLayer::new(device),
camera_only: CameraLayer::new(device),
+ split_view_camera: CameraLayer::new(device),
+ split_view_display: DisplayLayer::new(device),
captions: CaptionsLayer::new(device, queue),
}
}
@@ -964,6 +1154,27 @@ impl RendererLayers {
})(),
);
+ // Prepare split view layers
+ self.split_view_display.prepare(
+ &constants.device,
+ &constants.queue,
+ segment_frames,
+ constants.options.screen_size,
+ uniforms.split_view_display.unwrap_or_default(),
+ );
+
+ self.split_view_camera.prepare(
+ &constants.device,
+ &constants.queue,
+ (|| {
+ Some((
+ uniforms.split_view_camera?,
+ constants.options.camera_size?,
+ segment_frames.camera_frame.as_ref()?,
+ ))
+ })(),
+ );
+
Ok(())
}
@@ -1032,6 +1243,13 @@ impl RendererLayers {
let mut pass = render_pass!(session.current_texture_view(), wgpu::LoadOp::Load);
self.camera.render(&mut pass);
}
+
+ // Render split view when active or transitioning
+ if uniforms.scene.is_split_view() || uniforms.scene.is_transitioning_split_view() {
+ let mut pass = render_pass!(session.current_texture_view(), wgpu::LoadOp::Load);
+ self.split_view_display.render(&mut pass);
+ self.split_view_camera.render(&mut pass);
+ }
}
}
diff --git a/crates/rendering/src/scene.rs b/crates/rendering/src/scene.rs
index 94500b07d9..2667a75ff2 100644
--- a/crates/rendering/src/scene.rs
+++ b/crates/rendering/src/scene.rs
@@ -97,6 +97,7 @@ impl InterpolatedScene {
(SceneMode::CameraOnly, SceneMode::CameraOnly)
| (SceneMode::Default, SceneMode::Default)
| (SceneMode::HideCamera, SceneMode::HideCamera)
+ | (SceneMode::SplitView, SceneMode::SplitView)
);
if gap < MIN_GAP_FOR_TRANSITION && same_mode {
// Small gap between same modes, no transition needed
@@ -292,6 +293,7 @@ impl InterpolatedScene {
SceneMode::Default => (1.0, 1.0, 1.0),
SceneMode::CameraOnly => (1.0, 1.0, 1.0),
SceneMode::HideCamera => (0.0, 1.0, 1.0),
+ SceneMode::SplitView => (1.0, 1.0, 1.0),
}
}
@@ -304,23 +306,107 @@ impl InterpolatedScene {
}
pub fn should_render_screen(&self) -> bool {
+ // Don't render regular screen during split view (except during transitions)
+ if matches!(self.scene_mode, SceneMode::SplitView) && !self.is_transitioning_split_view() {
+ return false;
+ }
+ // Always render screen during split view transitions for cross-fade effect
+ if self.is_transitioning_split_view() {
+ return true;
+ }
self.screen_opacity > 0.01 || self.screen_blur > 0.01
}
+ pub fn regular_screen_transition_opacity(&self) -> f64 {
+ // Handle transitions to/from CameraOnly
+ if matches!(self.to_mode, SceneMode::CameraOnly)
+ && !matches!(self.from_mode, SceneMode::CameraOnly)
+ {
+ // Keep screen visible underneath camera-only transition
+ // but fade it slightly to create the overlay effect
+ let fade = (1.0 - self.transition_progress * 0.3).max(0.7);
+ fade * self.screen_opacity
+ } else if matches!(self.from_mode, SceneMode::CameraOnly)
+ && !matches!(self.to_mode, SceneMode::CameraOnly)
+ {
+ // Restore screen opacity as camera-only fades out
+ let fade = (0.7 + self.transition_progress * 0.3).min(1.0);
+ fade * self.screen_opacity
+ }
+ // Handle transitions to/from SplitView
+ else if matches!(self.to_mode, SceneMode::SplitView)
+ && !matches!(self.from_mode, SceneMode::SplitView)
+ {
+ // Keep screen visible underneath split view transition for cross-fade effect
+ // Similar to camera-only, fade slightly but keep visible
+ let fade = (1.0 - self.transition_progress * 0.3).max(0.7);
+ fade * self.screen_opacity
+ } else if matches!(self.from_mode, SceneMode::SplitView)
+ && !matches!(self.to_mode, SceneMode::SplitView)
+ {
+ // Restore screen opacity as split view fades out
+ let fade = (0.7 + self.transition_progress * 0.3).min(1.0);
+ fade * self.screen_opacity
+ } else if matches!(self.from_mode, SceneMode::SplitView)
+ && matches!(self.to_mode, SceneMode::SplitView)
+ {
+ 0.0
+ } else {
+ self.screen_opacity
+ }
+ }
+
pub fn is_transitioning_camera_only(&self) -> bool {
matches!(self.from_mode, SceneMode::CameraOnly)
|| matches!(self.to_mode, SceneMode::CameraOnly)
}
+ pub fn is_split_view(&self) -> bool {
+ matches!(self.scene_mode, SceneMode::SplitView)
+ }
+
+ pub fn is_transitioning_split_view(&self) -> bool {
+ matches!(self.from_mode, SceneMode::SplitView)
+ || matches!(self.to_mode, SceneMode::SplitView)
+ }
+
+ pub fn split_view_transition_opacity(&self) -> f64 {
+ if matches!(self.from_mode, SceneMode::SplitView)
+ && !matches!(self.to_mode, SceneMode::SplitView)
+ {
+ 1.0 - self.transition_progress
+ } else if !matches!(self.from_mode, SceneMode::SplitView)
+ && matches!(self.to_mode, SceneMode::SplitView)
+ {
+ self.transition_progress
+ } else if matches!(self.from_mode, SceneMode::SplitView)
+ && matches!(self.to_mode, SceneMode::SplitView)
+ {
+ 1.0
+ } else {
+ 0.0
+ }
+ }
+
pub fn camera_only_transition_opacity(&self) -> f64 {
if matches!(self.from_mode, SceneMode::CameraOnly)
&& !matches!(self.to_mode, SceneMode::CameraOnly)
{
- 1.0 - self.transition_progress
+ // Maintain full opacity until late in transition to ensure coverage
+ if self.transition_progress < 0.7 {
+ 1.0
+ } else {
+ ((1.0 - self.transition_progress) / 0.3).max(0.0)
+ }
} else if !matches!(self.from_mode, SceneMode::CameraOnly)
&& matches!(self.to_mode, SceneMode::CameraOnly)
{
- self.transition_progress
+ // Start fading in early to ensure no gaps
+ if self.transition_progress > 0.3 {
+ 1.0
+ } else {
+ (self.transition_progress / 0.3).min(1.0)
+ }
} else if matches!(self.from_mode, SceneMode::CameraOnly)
&& matches!(self.to_mode, SceneMode::CameraOnly)
{
@@ -331,20 +417,47 @@ impl InterpolatedScene {
}
pub fn regular_camera_transition_opacity(&self) -> f64 {
+ // Handle transitions to/from CameraOnly
if matches!(self.to_mode, SceneMode::CameraOnly)
&& !matches!(self.from_mode, SceneMode::CameraOnly)
{
- let fast_fade = (1.0 - self.transition_progress * 1.5).max(0.0);
- fast_fade * self.camera_opacity
+ // Fade out quickly but maintain full opacity initially to prevent background showing
+ if self.transition_progress < 0.3 {
+ self.camera_opacity
+ } else {
+ let fast_fade = ((1.0 - self.transition_progress) / 0.7).max(0.0);
+ fast_fade * self.camera_opacity
+ }
} else if matches!(self.from_mode, SceneMode::CameraOnly)
&& !matches!(self.to_mode, SceneMode::CameraOnly)
{
- let fast_fade = (self.transition_progress * 1.5).min(1.0);
- fast_fade * self.camera_opacity
+ // Fade in quickly but ensure no gap
+ if self.transition_progress > 0.7 {
+ self.camera_opacity
+ } else {
+ let fast_fade = (self.transition_progress / 0.7).min(1.0);
+ fast_fade * self.camera_opacity
+ }
} else if matches!(self.from_mode, SceneMode::CameraOnly)
&& matches!(self.to_mode, SceneMode::CameraOnly)
{
0.0
+ }
+ // Handle transitions to/from SplitView
+ else if matches!(self.to_mode, SceneMode::SplitView)
+ && !matches!(self.from_mode, SceneMode::SplitView)
+ {
+ // Fade out regular camera when transitioning to split view
+ (1.0 - self.transition_progress) * self.camera_opacity
+ } else if matches!(self.from_mode, SceneMode::SplitView)
+ && !matches!(self.to_mode, SceneMode::SplitView)
+ {
+ // Fade in regular camera when transitioning from split view
+ self.transition_progress * self.camera_opacity
+ } else if matches!(self.from_mode, SceneMode::SplitView)
+ && matches!(self.to_mode, SceneMode::SplitView)
+ {
+ 0.0
} else {
self.camera_opacity
}
diff --git a/packages/ui-solid/src/auto-imports.d.ts b/packages/ui-solid/src/auto-imports.d.ts
index 424407d67e..ec5d224e78 100644
--- a/packages/ui-solid/src/auto-imports.d.ts
+++ b/packages/ui-solid/src/auto-imports.d.ts
@@ -21,7 +21,7 @@ declare global {
const IconCapCorners: typeof import('~icons/cap/corners.jsx')['default']
const IconCapCrop: typeof import('~icons/cap/crop.jsx')['default']
const IconCapCursor: typeof import('~icons/cap/cursor.jsx')['default']
- const IconCapEditor: typeof import("~icons/cap/editor.jsx")["default"]
+ const IconCapEditor: typeof import('~icons/cap/editor.jsx')['default']
const IconCapEnlarge: typeof import('~icons/cap/enlarge.jsx')['default']
const IconCapFile: typeof import('~icons/cap/file.jsx')['default']
const IconCapFilmCut: typeof import('~icons/cap/film-cut.jsx')['default']
@@ -53,22 +53,24 @@ declare global {
const IconCapSettings: typeof import('~icons/cap/settings.jsx')['default']
const IconCapShadow: typeof import('~icons/cap/shadow.jsx')['default']
const IconCapSquare: typeof import('~icons/cap/square.jsx')['default']
- const IconCapStopCircle: typeof import("~icons/cap/stop-circle.jsx")["default"]
+ const IconCapStopCircle: typeof import('~icons/cap/stop-circle.jsx')['default']
const IconCapTrash: typeof import('~icons/cap/trash.jsx')['default']
const IconCapUndo: typeof import('~icons/cap/undo.jsx')['default']
- const IconCapUpload: typeof import("~icons/cap/upload.jsx")["default"]
+ const IconCapUpload: typeof import('~icons/cap/upload.jsx')['default']
const IconCapX: typeof import('~icons/cap/x.jsx')['default']
const IconCapZoomIn: typeof import('~icons/cap/zoom-in.jsx')['default']
const IconCapZoomOut: typeof import('~icons/cap/zoom-out.jsx')['default']
const IconHugeiconsEaseCurveControlPoints: typeof import('~icons/hugeicons/ease-curve-control-points.jsx')['default']
+ const IconLucideAlignLeft: typeof import('~icons/lucide/align-left.jsx')['default']
+ const IconLucideAlignRight: typeof import('~icons/lucide/align-right.jsx')['default']
const IconLucideAppWindowMac: typeof import('~icons/lucide/app-window-mac.jsx')['default']
const IconLucideBell: typeof import('~icons/lucide/bell.jsx')['default']
const IconLucideBug: typeof import('~icons/lucide/bug.jsx')['default']
const IconLucideCheck: typeof import('~icons/lucide/check.jsx')['default']
const IconLucideClock: typeof import('~icons/lucide/clock.jsx')['default']
- const IconLucideDatabase: typeof import("~icons/lucide/database.jsx")["default"]
+ const IconLucideDatabase: typeof import('~icons/lucide/database.jsx')['default']
const IconLucideEdit: typeof import('~icons/lucide/edit.jsx')['default']
- const IconLucideEye: typeof import("~icons/lucide/eye.jsx")["default"]
+ const IconLucideEye: typeof import('~icons/lucide/eye.jsx')['default']
const IconLucideEyeOff: typeof import('~icons/lucide/eye-off.jsx')['default']
const IconLucideFolder: typeof import('~icons/lucide/folder.jsx')['default']
const IconLucideGift: typeof import('~icons/lucide/gift.jsx')['default']
@@ -85,7 +87,7 @@ declare global {
const IconLucideUnplug: typeof import('~icons/lucide/unplug.jsx')['default']
const IconLucideVideo: typeof import('~icons/lucide/video.jsx')['default']
const IconLucideVolume2: typeof import('~icons/lucide/volume2.jsx')['default']
- const IconLucideVolumeX: typeof import("~icons/lucide/volume-x.jsx")["default"]
+ const IconLucideVolumeX: typeof import('~icons/lucide/volume-x.jsx')['default']
const IconMaterialSymbolsScreenshotFrame2Rounded: typeof import('~icons/material-symbols/screenshot-frame2-rounded.jsx')['default']
const IconMdiLoading: typeof import("~icons/mdi/loading.jsx")["default"]
const IconMdiMonitor: typeof import('~icons/mdi/monitor.jsx')['default']
From d350f47165cd6ccf55bae0cf77ce4b780b85192d Mon Sep 17 00:00:00 2001
From: Richie McIlroy <33632126+richiemcilroy@users.noreply.github.com>
Date: Thu, 4 Sep 2025 16:24:48 +0100
Subject: [PATCH 02/10] feat: Improved ux/ui in editor for scenes
---
.../src/routes/editor/SceneSegmentConfig.tsx | 682 ++++++++++--------
apps/desktop/src/routes/editor/context.ts | 81 +++
apps/desktop/src/utils/tauri.ts | 2 +-
crates/project/src/configuration.rs | 3 +
crates/rendering/src/composite_frame.rs | 4 +-
crates/rendering/src/lib.rs | 237 +++---
crates/rendering/src/scene.rs | 2 +
.../src/shaders/composite-video-frame.wgsl | 41 +-
8 files changed, 657 insertions(+), 395 deletions(-)
diff --git a/apps/desktop/src/routes/editor/SceneSegmentConfig.tsx b/apps/desktop/src/routes/editor/SceneSegmentConfig.tsx
index 03dd5a199e..af1522a8e8 100644
--- a/apps/desktop/src/routes/editor/SceneSegmentConfig.tsx
+++ b/apps/desktop/src/routes/editor/SceneSegmentConfig.tsx
@@ -1,10 +1,9 @@
-import {
- RadioGroup as KRadioGroup,
-} from "@kobalte/core/radio-group";
+import { RadioGroup as KRadioGroup } from "@kobalte/core/radio-group";
import { createSignal, For, Show } from "solid-js";
import { type SceneSegment, type SplitViewSettings } from "~/utils/tauri";
import { EditorButton, Slider } from "./ui";
import { useEditorContext } from "./context";
+import { Toggle } from "~/components/Toggle";
import IconLucideCheck from "~icons/lucide/check";
import IconLucideMonitor from "~icons/lucide/monitor";
import IconLucideLayout from "~icons/lucide/layout";
@@ -14,301 +13,402 @@ import IconLucideAlignLeft from "~icons/lucide/align-left";
import IconLucideAlignRight from "~icons/lucide/align-right";
import IconCapTrash from "~icons/iconoir/trash";
import IconLucideSettings from "~icons/lucide/settings";
+import IconLucideMaximize from "~icons/lucide/maximize";
+import IconLucideMinimize from "~icons/lucide/minimize";
+import IconLucideCopy from "~icons/lucide/copy";
+import IconLucideClipboardCopy from "~icons/lucide/clipboard-copy";
function SimplePositionControl(props: {
- position: { x: number; y: number };
- onChange: (position: { x: number; y: number }) => void;
- label: string;
+ position: { x: number; y: number };
+ onChange: (position: { x: number; y: number }) => void;
+ label: string;
}) {
- const [isDragging, setIsDragging] = createSignal(false);
-
- return (
- ; screenPosition: XY; cameraSide: SplitViewSide; cameraZoom?: number; screenZoom?: number }
+export type SplitViewSettings = { cameraPosition: XY; screenPosition: XY; 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"
diff --git a/crates/project/src/configuration.rs b/crates/project/src/configuration.rs
index 9f273800f4..71c8f8439c 100644
--- a/crates/project/src/configuration.rs
+++ b/crates/project/src/configuration.rs
@@ -477,6 +477,8 @@ pub struct SplitViewSettings {
pub camera_zoom: f64,
#[serde(default = "default_zoom")]
pub screen_zoom: f64,
+ #[serde(default)]
+ pub fullscreen: bool,
}
fn default_zoom() -> f64 {
@@ -491,6 +493,7 @@ impl Default for SplitViewSettings {
camera_side: SplitViewSide::Right,
camera_zoom: 1.0,
screen_zoom: 1.0,
+ fullscreen: false,
}
}
}
diff --git a/crates/rendering/src/composite_frame.rs b/crates/rendering/src/composite_frame.rs
index d57c44b954..2ca8d72a5e 100644
--- a/crates/rendering/src/composite_frame.rs
+++ b/crates/rendering/src/composite_frame.rs
@@ -26,7 +26,8 @@ pub struct CompositeVideoFrameUniforms {
pub shadow_opacity: f32,
pub shadow_blur: f32,
pub opacity: f32,
- pub _padding: [f32; 3],
+ pub rounding_mask: f32, // Bitmask for which corners to round: 0x1=TL, 0x2=TR, 0x4=BL, 0x8=BR
+ pub _padding: [f32; 2],
}
impl Default for CompositeVideoFrameUniforms {
@@ -47,6 +48,7 @@ impl Default for CompositeVideoFrameUniforms {
shadow_opacity: Default::default(),
shadow_blur: Default::default(),
opacity: 1.0,
+ rounding_mask: 15.0, // Default: all corners rounded (0xF = 0b1111)
_padding: Default::default(),
}
}
diff --git a/crates/rendering/src/lib.rs b/crates/rendering/src/lib.rs
index 298c937c8f..fcd839d2fe 100644
--- a/crates/rendering/src/lib.rs
+++ b/crates/rendering/src/lib.rs
@@ -638,7 +638,8 @@ impl ProjectUniforms {
.as_ref()
.map_or(50.0, |s| s.blur),
opacity: scene.regular_screen_transition_opacity() as f32,
- _padding: [0.0; 3],
+ rounding_mask: 15.0,
+ _padding: [0.0; 2],
}
};
@@ -747,7 +748,8 @@ impl ProjectUniforms {
.as_ref()
.map_or(50.0, |s| s.blur),
opacity: scene.regular_camera_transition_opacity() as f32,
- _padding: [0.0; 3],
+ rounding_mask: 15.0,
+ _padding: [0.0; 2],
}
});
@@ -776,16 +778,11 @@ impl ProjectUniforms {
position[1] + size[1],
];
- // In camera-only mode, we ignore the camera shape setting (Square/Source)
- // and just apply the minimum crop needed to fill the output aspect ratio.
- // This prevents excessive zooming when shape is set to Square.
let crop_bounds = if aspect > output_aspect {
- // Camera is wider than output - crop left and right
let visible_width = frame_size[1] * output_aspect;
let crop_x = (frame_size[0] - visible_width) / 2.0;
[crop_x, 0.0, frame_size[0] - crop_x, frame_size[1]]
} else {
- // Camera is taller than output - crop top and bottom
let visible_height = frame_size[0] / output_aspect;
let crop_y = (frame_size[1] - visible_height) / 2.0;
[0.0, crop_y, frame_size[0], frame_size[1] - crop_y]
@@ -810,31 +807,32 @@ impl ProjectUniforms {
shadow_opacity: 0.0,
shadow_blur: 0.0,
opacity: scene.camera_only_transition_opacity() as f32,
- _padding: [0.0; 3],
+ rounding_mask: 15.0,
+ _padding: [0.0; 2],
}
});
- // Calculate split view uniforms
- let (split_view_camera, split_view_display) = if scene.is_split_view() || scene.is_transitioning_split_view() {
- // Get split view settings from current or upcoming scene segment
- // During transitions, we need to look for the segment we're transitioning into
- let split_settings = project.timeline
+ let (split_view_camera, split_view_display) = if scene.is_split_view()
+ || scene.is_transitioning_split_view()
+ {
+ let split_settings = project
+ .timeline
.as_ref()
.and_then(|t| {
- // First try to find the current segment
- let current = t.scene_segments.iter()
+ let current = t
+ .scene_segments
+ .iter()
.find(|s| frame_time as f64 >= s.start && (frame_time as f64) < s.end)
.and_then(|s| s.split_view_settings.as_ref());
-
- // If not in a segment, look for the next segment we're transitioning into
- // This handles the transition period before the segment starts
+
if current.is_none() && scene.is_transitioning_split_view() {
- t.scene_segments.iter()
+ t.scene_segments
+ .iter()
.find(|s| {
- // Check if this is a split view segment we're transitioning into
- matches!(s.mode, cap_project::SceneMode::SplitView) &&
- s.start > frame_time as f64 &&
- (s.start - frame_time as f64) < scene::SCENE_TRANSITION_DURATION
+ matches!(s.mode, cap_project::SceneMode::SplitView)
+ && s.start > frame_time as f64
+ && (s.start - frame_time as f64)
+ < scene::SCENE_TRANSITION_DURATION
})
.and_then(|s| s.split_view_settings.as_ref())
} else {
@@ -843,76 +841,94 @@ impl ProjectUniforms {
})
.cloned()
.unwrap_or_else(SplitViewSettings::default);
-
+
let output_size_f32 = [output_size.0 as f32, output_size.1 as f32];
- let half_width = output_size_f32[0] / 2.0;
-
- // Determine which side camera and screen are on
+
+ let (split_width, split_height, split_x_offset, split_y_offset) =
+ if split_settings.fullscreen {
+ (output_size_f32[0], output_size_f32[1], 0.0, 0.0)
+ } else {
+ let display_offset = Self::display_offset(&options, project, resolution_base);
+ let display_size = Self::display_size(&options, project, resolution_base);
+
+ let display_width = display_size.coord.x as f32;
+ let display_height = display_size.coord.y as f32;
+ let display_x = display_offset.coord.x as f32;
+ let display_y = display_offset.coord.y as f32;
+
+ (display_width, display_height, display_x, display_y)
+ };
+
+ let half_width = split_width / 2.0;
+
let (camera_x_offset, screen_x_offset) = match split_settings.camera_side {
- SplitViewSide::Left => (0.0, half_width),
- SplitViewSide::Right => (half_width, 0.0),
+ SplitViewSide::Left => (split_x_offset, split_x_offset + half_width),
+ SplitViewSide::Right => (split_x_offset + half_width, split_x_offset),
};
- // Display uniforms for screen
let split_display = {
let screen_size = options.screen_size;
let crop = Self::get_crop(&options, project);
let frame_size = [screen_size.x as f32, screen_size.y as f32];
-
- // Calculate crop bounds to fill the half while maintaining aspect ratio
+
let crop_size = [crop.size.x as f32, crop.size.y as f32];
let source_aspect = crop_size[0] / crop_size[1];
- let target_aspect = half_width / output_size_f32[1];
-
- // Apply position adjustment (0.0 = full crop from one side, 1.0 = full crop from other side)
+ let target_aspect = half_width / split_height;
+
let position_factor = split_settings.screen_position.x as f32;
let zoom = split_settings.screen_zoom as f32;
-
- // Apply zoom by adjusting the visible area
+
let zoomed_crop_size = [crop_size[0] / zoom, crop_size[1] / zoom];
-
- // We want to fill the entire half, so we crop the source
+
let (crop_x, crop_y, crop_width, crop_height) = if source_aspect > target_aspect {
- // Source is wider - crop left and right
let visible_width = zoomed_crop_size[1] * target_aspect;
let max_crop_offset = crop_size[0] - visible_width;
let crop_offset = max_crop_offset * position_factor;
-
- // Center the zoomed area
+
let zoom_offset_x = (crop_size[0] - zoomed_crop_size[0]) * position_factor;
- let zoom_offset_y = (crop_size[1] - zoomed_crop_size[1]) * split_settings.screen_position.y as f32;
-
+ let zoom_offset_y = (crop_size[1] - zoomed_crop_size[1])
+ * split_settings.screen_position.y as f32;
+
(
crop.position.x as f32 + crop_offset + zoom_offset_x,
crop.position.y as f32 + zoom_offset_y,
visible_width,
- zoomed_crop_size[1]
+ zoomed_crop_size[1],
)
} else {
- // Source is taller - crop top and bottom
let visible_height = zoomed_crop_size[0] / target_aspect;
let max_crop_offset = crop_size[1] - visible_height;
let crop_offset = max_crop_offset * (split_settings.screen_position.y as f32);
-
- // Center the zoomed area
+
let zoom_offset_x = (crop_size[0] - zoomed_crop_size[0]) * position_factor;
- let zoom_offset_y = (crop_size[1] - zoomed_crop_size[1]) * split_settings.screen_position.y as f32;
-
+ let zoom_offset_y = (crop_size[1] - zoomed_crop_size[1])
+ * split_settings.screen_position.y as f32;
+
(
crop.position.x as f32 + zoom_offset_x,
crop.position.y as f32 + crop_offset + zoom_offset_y,
zoomed_crop_size[0],
- visible_height
+ visible_height,
)
};
-
+
Some(CompositeVideoFrameUniforms {
output_size: output_size_f32,
frame_size,
crop_bounds: [crop_x, crop_y, crop_x + crop_width, crop_y + crop_height],
- target_bounds: [screen_x_offset, 0.0, screen_x_offset + half_width, output_size_f32[1]],
- target_size: [half_width, output_size_f32[1]],
- rounding_px: 0.0,
+ target_bounds: [
+ screen_x_offset,
+ split_y_offset,
+ screen_x_offset + half_width,
+ split_y_offset + split_height,
+ ],
+ target_size: [half_width, split_height],
+ rounding_px: if split_settings.fullscreen {
+ 0.0
+ } else {
+ let min_axis = split_width.min(split_height);
+ (project.background.rounding / 100.0 * 0.5 * min_axis as f64) as f32
+ },
mirror_x: 0.0,
velocity_uv: [0.0, 0.0],
motion_blur_amount: 0.0,
@@ -922,62 +938,76 @@ impl ProjectUniforms {
shadow_opacity: 0.0,
shadow_blur: 0.0,
opacity: (scene.split_view_transition_opacity() * scene.screen_opacity) as f32,
- _padding: [0.0; 3],
+ rounding_mask: if split_settings.fullscreen {
+ 0.0
+ } else {
+ match split_settings.camera_side {
+ SplitViewSide::Left => 6.0,
+ SplitViewSide::Right => 5.0,
+ }
+ },
+ _padding: [0.0; 2],
})
};
- // Camera uniforms
let split_camera = options.camera_size.map(|camera_size| {
let frame_size = [camera_size.x as f32, camera_size.y as f32];
let source_aspect = frame_size[0] / frame_size[1];
- let target_aspect = half_width / output_size_f32[1];
-
- // Apply position adjustment for camera
+ let target_aspect = half_width / split_height;
+
let cam_pos_x = split_settings.camera_position.x as f32;
let cam_pos_y = split_settings.camera_position.y as f32;
let cam_zoom = split_settings.camera_zoom as f32;
-
- // Apply zoom by adjusting the visible area
+
let zoomed_frame_size = [frame_size[0] / cam_zoom, frame_size[1] / cam_zoom];
-
- // Calculate crop bounds to fill the half while maintaining aspect ratio
+
let crop_bounds = if source_aspect > target_aspect {
- // Camera is wider - crop left and right to fit
let visible_width = zoomed_frame_size[1] * target_aspect;
let max_crop_offset = frame_size[0] - visible_width;
let crop_x = max_crop_offset * cam_pos_x;
-
- // Center the zoomed area
+
let zoom_offset_x = (frame_size[0] - zoomed_frame_size[0]) * cam_pos_x;
let zoom_offset_y = (frame_size[1] - zoomed_frame_size[1]) * cam_pos_y;
-
- [crop_x + zoom_offset_x,
- zoom_offset_y,
- crop_x + zoom_offset_x + visible_width,
- zoom_offset_y + zoomed_frame_size[1]]
+
+ [
+ crop_x + zoom_offset_x,
+ zoom_offset_y,
+ crop_x + zoom_offset_x + visible_width,
+ zoom_offset_y + zoomed_frame_size[1],
+ ]
} else {
- // Camera is taller - crop top and bottom to fit
let visible_height = zoomed_frame_size[0] / target_aspect;
let max_crop_offset = frame_size[1] - visible_height;
let crop_y = max_crop_offset * cam_pos_y;
-
- // Center the zoomed area
+
let zoom_offset_x = (frame_size[0] - zoomed_frame_size[0]) * cam_pos_x;
let zoom_offset_y = (frame_size[1] - zoomed_frame_size[1]) * cam_pos_y;
-
- [zoom_offset_x,
- crop_y + zoom_offset_y,
- zoom_offset_x + zoomed_frame_size[0],
- crop_y + zoom_offset_y + visible_height]
+
+ [
+ zoom_offset_x,
+ crop_y + zoom_offset_y,
+ zoom_offset_x + zoomed_frame_size[0],
+ crop_y + zoom_offset_y + visible_height,
+ ]
};
-
+
CompositeVideoFrameUniforms {
output_size: output_size_f32,
frame_size,
crop_bounds,
- target_bounds: [camera_x_offset, 0.0, camera_x_offset + half_width, output_size_f32[1]],
- target_size: [half_width, output_size_f32[1]],
- rounding_px: 0.0,
+ target_bounds: [
+ camera_x_offset,
+ split_y_offset,
+ camera_x_offset + half_width,
+ split_y_offset + split_height,
+ ],
+ target_size: [half_width, split_height],
+ rounding_px: if split_settings.fullscreen {
+ 0.0
+ } else {
+ let min_axis = split_width.min(split_height);
+ (project.background.rounding / 100.0 * 0.5 * min_axis as f64) as f32
+ },
mirror_x: if project.camera.mirror { 1.0 } else { 0.0 },
velocity_uv: [0.0, 0.0],
motion_blur_amount: 0.0,
@@ -987,7 +1017,15 @@ impl ProjectUniforms {
shadow_opacity: 0.0,
shadow_blur: 0.0,
opacity: (scene.split_view_transition_opacity() * scene.camera_opacity) as f32,
- _padding: [0.0; 3],
+ rounding_mask: if split_settings.fullscreen {
+ 0.0
+ } else {
+ match split_settings.camera_side {
+ SplitViewSide::Left => 5.0,
+ SplitViewSide::Right => 10.0,
+ }
+ },
+ _padding: [0.0; 2],
}
});
@@ -1154,7 +1192,6 @@ impl RendererLayers {
})(),
);
- // Prepare split view layers
self.split_view_display.prepare(
&constants.device,
&constants.queue,
@@ -1204,12 +1241,27 @@ impl RendererLayers {
};
}
- {
+ let split_view_fullscreen = uniforms
+ .split_view_display
+ .map(|u| u.target_bounds[0] < 1.0 && u.target_bounds[1] < 1.0)
+ .unwrap_or(false);
+
+ // Only skip background when fully in split view, not during transitions
+ let skip_background = uniforms.scene.is_split_view()
+ && !uniforms.scene.is_transitioning_split_view()
+ && split_view_fullscreen;
+
+ if !skip_background {
let mut pass = render_pass!(
session.current_texture_view(),
wgpu::LoadOp::Clear(wgpu::Color::BLACK)
);
self.background.render(&mut pass);
+ } else {
+ let _pass = render_pass!(
+ session.current_texture_view(),
+ wgpu::LoadOp::Clear(wgpu::Color::BLACK)
+ );
}
if self.background_blur.blur_amount > 0.0 {
@@ -1220,23 +1272,25 @@ impl RendererLayers {
session.swap_textures();
}
- if uniforms.scene.should_render_screen() {
+ // During split view transitions, render screen content for cross-fade effect
+ let should_render_regular_screen = uniforms.scene.should_render_screen()
+ && (!split_view_fullscreen || uniforms.scene.is_transitioning_split_view());
+
+ if should_render_regular_screen {
let mut pass = render_pass!(session.current_texture_view(), wgpu::LoadOp::Load);
self.display.render(&mut pass);
}
- if uniforms.scene.should_render_screen() {
+ if should_render_regular_screen {
let mut pass = render_pass!(session.current_texture_view(), wgpu::LoadOp::Load);
self.cursor.render(&mut pass);
}
- // Render camera-only layer when transitioning with CameraOnly mode
if uniforms.scene.is_transitioning_camera_only() {
let mut pass = render_pass!(session.current_texture_view(), wgpu::LoadOp::Load);
self.camera_only.render(&mut pass);
}
- // Also render regular camera overlay during transitions when its opacity > 0
if uniforms.scene.should_render_camera()
&& uniforms.scene.regular_camera_transition_opacity() > 0.01
{
@@ -1244,7 +1298,6 @@ impl RendererLayers {
self.camera.render(&mut pass);
}
- // Render split view when active or transitioning
if uniforms.scene.is_split_view() || uniforms.scene.is_transitioning_split_view() {
let mut pass = render_pass!(session.current_texture_view(), wgpu::LoadOp::Load);
self.split_view_display.render(&mut pass);
diff --git a/crates/rendering/src/scene.rs b/crates/rendering/src/scene.rs
index 2667a75ff2..f2e94f5b2f 100644
--- a/crates/rendering/src/scene.rs
+++ b/crates/rendering/src/scene.rs
@@ -126,6 +126,7 @@ impl InterpolatedScene {
(SceneMode::CameraOnly, SceneMode::CameraOnly)
| (SceneMode::Default, SceneMode::Default)
| (SceneMode::HideCamera, SceneMode::HideCamera)
+ | (SceneMode::SplitView, SceneMode::SplitView)
);
if gap < MIN_GAP_FOR_TRANSITION && same_mode {
// Keep the current mode without transitioning
@@ -174,6 +175,7 @@ impl InterpolatedScene {
(SceneMode::CameraOnly, SceneMode::CameraOnly)
| (SceneMode::Default, SceneMode::Default)
| (SceneMode::HideCamera, SceneMode::HideCamera)
+ | (SceneMode::SplitView, SceneMode::SplitView)
);
if gap < MIN_GAP_FOR_TRANSITION && same_mode {
(prev_seg.mode.clone(), prev_seg.mode.clone(), 1.0)
diff --git a/crates/rendering/src/shaders/composite-video-frame.wgsl b/crates/rendering/src/shaders/composite-video-frame.wgsl
index a0ddd0bb3f..d94d0bdfc9 100644
--- a/crates/rendering/src/shaders/composite-video-frame.wgsl
+++ b/crates/rendering/src/shaders/composite-video-frame.wgsl
@@ -14,6 +14,7 @@ struct Uniforms {
shadow_opacity: f32,
shadow_blur: f32,
opacity: f32,
+ rounding_mask: f32, // Bitmask: 1=TL, 2=TR, 4=BL, 8=BR
};
@group(0) @binding(0) var uniforms: Uniforms;
@@ -203,17 +204,37 @@ fn sample_texture(uv: vec2, crop_bounds_uv: vec4) -> vec4 {
}
fn apply_rounded_corners(current_color: vec4, target_uv: vec2) -> vec4 {
- let target_coord = abs(target_uv * uniforms.target_size - uniforms.target_size / 2.0);
+ let target_coord = target_uv * uniforms.target_size - uniforms.target_size / 2.0;
+ let abs_coord = abs(target_coord);
let rounding_point = uniforms.target_size / 2.0 - uniforms.rounding_px;
- let target_rounding_coord = target_coord - rounding_point;
-
- let distance = abs(length(target_rounding_coord)) - uniforms.rounding_px;
-
- let distance_blur = 1.0;
-
- if target_rounding_coord.x >= 0.0 && target_rounding_coord.y >= 0.0 && distance >= -distance_blur/2.0 {
- return vec4(0.0);
- // return mix(current_color, vec4(0.0), min(distance / distance_blur + 0.5, 1.0));
+ let target_rounding_coord = abs_coord - rounding_point;
+
+ // Determine which corner we're in
+ let is_left = target_coord.x < 0.0;
+ let is_top = target_coord.y < 0.0;
+
+ // Calculate corner mask bit (1=TL, 2=TR, 4=BL, 8=BR)
+ var corner_bit: f32 = 0.0;
+ if is_top && is_left {
+ corner_bit = 1.0; // Top-left
+ } else if is_top && !is_left {
+ corner_bit = 2.0; // Top-right
+ } else if !is_top && is_left {
+ corner_bit = 4.0; // Bottom-left
+ } else {
+ corner_bit = 8.0; // Bottom-right
+ }
+
+ // Check if this corner should be rounded
+ let should_round = (u32(uniforms.rounding_mask) & u32(corner_bit)) != 0u;
+
+ if target_rounding_coord.x >= 0.0 && target_rounding_coord.y >= 0.0 && should_round {
+ let distance = abs(length(target_rounding_coord)) - uniforms.rounding_px;
+ let distance_blur = 1.0;
+
+ if distance >= -distance_blur/2.0 {
+ return vec4(0.0);
+ }
}
return current_color;
From 7693040e6f11e0f43bbcad6c03eb1246ed22495d Mon Sep 17 00:00:00 2001
From: Richie McIlroy <33632126+richiemcilroy@users.noreply.github.com>
Date: Fri, 5 Sep 2025 00:02:04 +0100
Subject: [PATCH 03/10] feat: Shorten timeline indicator on drag
---
.../src/routes/editor/Timeline/ClipTrack.tsx | 1297 +++++++++--------
.../src/routes/editor/Timeline/SceneTrack.tsx | 931 ++++++------
.../src/routes/editor/Timeline/ZoomTrack.tsx | 1003 +++++++------
3 files changed, 1634 insertions(+), 1597 deletions(-)
diff --git a/apps/desktop/src/routes/editor/Timeline/ClipTrack.tsx b/apps/desktop/src/routes/editor/Timeline/ClipTrack.tsx
index ee132163d0..aa39d29ee3 100644
--- a/apps/desktop/src/routes/editor/Timeline/ClipTrack.tsx
+++ b/apps/desktop/src/routes/editor/Timeline/ClipTrack.tsx
@@ -1,18 +1,19 @@
import {
- createEventListener,
- createEventListenerMap,
+ createEventListener,
+ createEventListenerMap,
} from "@solid-primitives/event-listener";
import { cx } from "cva";
import {
- type ComponentProps,
- createEffect,
- createMemo,
- createRoot,
- For,
- Match,
- mergeProps,
- Show,
- Switch,
+ type ComponentProps,
+ createEffect,
+ createMemo,
+ createRoot,
+ createSignal,
+ For,
+ Match,
+ mergeProps,
+ Show,
+ Switch,
} from "solid-js";
import { produce } from "solid-js/store";
@@ -21,640 +22,682 @@ import { useEditorContext } from "../context";
import { useSegmentContext, useTimelineContext } from "./context";
import { getSectionMarker } from "./sectionMarker";
import {
- SegmentContent,
- SegmentHandle,
- SegmentRoot,
- TrackRoot,
- useSegmentTranslateX,
- useSegmentWidth,
+ SegmentContent,
+ SegmentHandle,
+ SegmentRoot,
+ TrackRoot,
+ useSegmentTranslateX,
+ useSegmentWidth,
} from "./Track";
function WaveformCanvas(props: {
- systemWaveform?: number[];
- micWaveform?: number[];
- segment: { start: number; end: number };
- secsPerPixel: number;
+ systemWaveform?: number[];
+ micWaveform?: number[];
+ segment: { start: number; end: number };
+ secsPerPixel: number;
}) {
- const { project } = useEditorContext();
-
- let canvas: HTMLCanvasElement | undefined;
- const { width } = useSegmentContext();
- const { secsPerPixel } = useTimelineContext();
-
- const render = (
- ctx: CanvasRenderingContext2D,
- h: number,
- waveform: number[],
- color: string,
- gain = 0,
- ) => {
- const maxAmplitude = h;
-
- // yellow please
- ctx.fillStyle = color;
- ctx.beginPath();
-
- const step = 0.05 / secsPerPixel();
-
- ctx.moveTo(0, h);
-
- const norm = (w: number) => {
- const ww = Number.isFinite(w) ? w : -60;
- return 1.0 - Math.max(ww + gain, -60) / -60;
- };
-
- for (
- let segmentTime = props.segment.start;
- segmentTime <= props.segment.end + 0.1;
- segmentTime += 0.1
- ) {
- const index = Math.floor(segmentTime * 10);
- const xTime = index / 10;
-
- const currentDb =
- typeof waveform[index] === "number" ? waveform[index] : -60;
- const amplitude = norm(currentDb) * maxAmplitude;
-
- const x = (xTime - props.segment.start) / secsPerPixel();
- const y = h - amplitude;
-
- const prevX = (xTime - 0.1 - props.segment.start) / secsPerPixel();
- const prevDb =
- typeof waveform[index - 1] === "number" ? waveform[index - 1] : -60;
- const prevAmplitude = norm(prevDb) * maxAmplitude;
- const prevY = h - prevAmplitude;
-
- const cpX1 = prevX + step / 2;
- const cpX2 = x - step / 2;
-
- ctx.bezierCurveTo(cpX1, prevY, cpX2, y, x, y);
- }
-
- ctx.lineTo(
- (props.segment.end + 0.3 - props.segment.start) / secsPerPixel(),
- h,
- );
-
- ctx.closePath();
- ctx.fill();
- };
-
- function renderWaveforms() {
- if (!canvas) return;
- const ctx = canvas.getContext("2d");
- if (!ctx) return;
-
- const w = width();
- if (w <= 0) return;
-
- const h = canvas.height;
- canvas.width = w;
- ctx.clearRect(0, 0, w, h);
-
- if (props.micWaveform)
- render(
- ctx,
- h,
- props.micWaveform,
- "rgba(255,255,255,0.4)",
- project.audio.micVolumeDb,
- );
-
- if (props.systemWaveform)
- render(
- ctx,
- h,
- props.systemWaveform,
- "rgba(255,150,0,0.5)",
- project.audio.systemVolumeDb,
- );
- }
-
- createEffect(() => {
- renderWaveforms();
- });
-
- return (
-
- }
- >
- {(segment, i) => {
- const { setTrackState } = useTrackContext();
-
- const sceneSegments = () => project.timeline!.sceneSegments!;
-
- function createMouseDownDrag
-
+
- {props.segment.mode === "cameraOnly"
- ? "Shows only the camera feed"
- : props.segment.mode === "hideCamera"
- ? "Shows only the screen recording"
- : "Shows both screen and camera"}
-
-
+
+
+
+
+ {props.segment.mode === "cameraOnly"
+ ? "Shows only the camera feed"
+ : props.segment.mode === "hideCamera"
+ ? "Shows only the screen recording"
+ : props.segment.mode === "splitView"
+ ? `Shows screen on ${splitViewSettings().cameraSide === "left" ? "right" : "left"}, camera on ${splitViewSettings().cameraSide}`
+ : "Shows both screen and camera"}
-
-
+
+
+ {
+ const currentSettings = splitViewSettings();
+ setProject(
+ "timeline",
+ "sceneSegments",
+ props.segmentIndex,
+ "splitViewSettings",
+ { ...currentSettings, cameraSide: value as "left" | "right" },
+ );
+ }}
+ class="flex flex-row gap-2"
+ >
+
+
+ Left
+
+
+
+
+ Right
+
+
+
+
+
+
+ {/* Position controls are now handled in SceneSegmentConfig */}
+
+
+
+ {/* Position controls are now handled in SceneSegmentConfig */}
+
+
+
+ Please use the new scene segment controls
+ Please use the new scene segment controls
+ {
+ const rect = e.currentTarget.getBoundingClientRect();
+ setIsDragging(true);
+
+ const updatePosition = (clientX: number, clientY: number) => {
+ const x = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width));
+ const y = Math.max(0, Math.min(1, (clientY - rect.top) / rect.height));
+ props.onChange({ x, y });
+ };
+
+ updatePosition(e.clientX, e.clientY);
+
+ const handleMouseMove = (moveEvent: MouseEvent) => {
+ updatePosition(moveEvent.clientX, moveEvent.clientY);
+ };
+
+ const handleMouseUp = () => {
+ setIsDragging(false);
+ window.removeEventListener("mousemove", handleMouseMove);
+ window.removeEventListener("mouseup", handleMouseUp);
+ };
+
+ window.addEventListener("mousemove", handleMouseMove);
+ window.addEventListener("mouseup", handleMouseUp);
+ }}
+ >
+ {/* Grid lines for reference */}
+
+ );
+}
+
+export function SceneSegmentConfig(props: {
+ segmentIndex: number;
+ segment: SceneSegment;
+}) {
+ const { setProject, setEditorState, projectActions } = useEditorContext();
+
+ // Initialize split view settings if not present
+ const splitViewSettings = (): SplitViewSettings => props.segment.splitViewSettings || {
+ cameraPosition: { x: 0.5, y: 0.5 },
+ screenPosition: { x: 0.5, y: 0.5 },
+ cameraSide: "right",
+ cameraZoom: 1.0,
+ screenZoom: 1.0,
+ };
+
+ const layoutOptions = [
+ {
+ value: "default",
+ label: "Default",
+ icon:
+
+
+
+
+ {/* Position indicator */}
+
+
+ {/* Label */}
+
+ {props.label}
+
+
+ {/* Coordinates */}
+
+ {(props.position.x * 100).toFixed(0)}%, {(props.position.y * 100).toFixed(0)}%
+
+
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/apps/desktop/src/routes/editor/Timeline/SceneTrack.tsx b/apps/desktop/src/routes/editor/Timeline/SceneTrack.tsx
index 4c12bc27f2..2981e4aab6 100644
--- a/apps/desktop/src/routes/editor/Timeline/SceneTrack.tsx
+++ b/apps/desktop/src/routes/editor/Timeline/SceneTrack.tsx
@@ -59,6 +59,8 @@ export function SceneTrack(props: {
return
+ setEditorState("timeline", "selection", null)}
+ leftIcon={
+ {
+ projectActions.deleteSceneSegment(props.segmentIndex);
+ }}
+ leftIcon={
+
+
+
+ {
+ setProject(
+ "timeline",
+ "sceneSegments",
+ props.segmentIndex,
+ "mode",
+ v as "default" | "cameraOnly" | "hideCamera" | "splitView",
+ );
+ }}
+ class="grid grid-cols-2 gap-2"
+ >
+
+ {(option) => (
+
+
+
+
+ )}
+
+
+
+
+
+
+
+
+ {option.icon}
+ {option.label}
+
+ {option.description}
+
+
+
+
+
+
+
+
+
+ {
+ const currentSettings = splitViewSettings();
+ setProject(
+ "timeline",
+ "sceneSegments",
+ props.segmentIndex,
+ "splitViewSettings",
+ { ...currentSettings, cameraSide: value as "left" | "right" },
+ );
+ }}
+ class="grid grid-cols-2 gap-2"
+ >
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {
+ const currentSettings = splitViewSettings();
+ setProject(
+ "timeline",
+ "sceneSegments",
+ props.segmentIndex,
+ "splitViewSettings",
+ { ...currentSettings, cameraPosition: pos },
+ );
+ }}
+ label="Camera"
+ />
+
+
+ {
+ const currentSettings = splitViewSettings();
+ setProject(
+ "timeline",
+ "sceneSegments",
+ props.segmentIndex,
+ "splitViewSettings",
+ { ...currentSettings, cameraZoom: value },
+ );
+ }}
+ />
+
+
+
+ {((splitViewSettings().cameraZoom || 1) * 100).toFixed(0)}%
+
+
+
+
+
+ {
+ const currentSettings = splitViewSettings();
+ setProject(
+ "timeline",
+ "sceneSegments",
+ props.segmentIndex,
+ "splitViewSettings",
+ { ...currentSettings, screenPosition: pos },
+ );
+ }}
+ label="Screen"
+ />
+
+
+ {
+ const currentSettings = splitViewSettings();
+ setProject(
+ "timeline",
+ "sceneSegments",
+ props.segmentIndex,
+ "splitViewSettings",
+ { ...currentSettings, screenZoom: value },
+ );
+ }}
+ />
+
+
+
+ {((splitViewSettings().screenZoom || 1) * 100).toFixed(0)}%
+
+ {
- const rect = e.currentTarget.getBoundingClientRect();
- setIsDragging(true);
-
- const updatePosition = (clientX: number, clientY: number) => {
- const x = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width));
- const y = Math.max(0, Math.min(1, (clientY - rect.top) / rect.height));
- props.onChange({ x, y });
- };
-
- updatePosition(e.clientX, e.clientY);
-
- const handleMouseMove = (moveEvent: MouseEvent) => {
- updatePosition(moveEvent.clientX, moveEvent.clientY);
- };
-
- const handleMouseUp = () => {
- setIsDragging(false);
- window.removeEventListener("mousemove", handleMouseMove);
- window.removeEventListener("mouseup", handleMouseUp);
- };
-
- window.addEventListener("mousemove", handleMouseMove);
- window.addEventListener("mouseup", handleMouseUp);
- }}
- >
- {/* Grid lines for reference */}
-
- );
+ const [isDragging, setIsDragging] = createSignal(false);
+
+ return (
+
-
-
-
-
- {/* Position indicator */}
-
-
- {/* Label */}
-
- {props.label}
-
-
- {/* Coordinates */}
-
- {(props.position.x * 100).toFixed(0)}%, {(props.position.y * 100).toFixed(0)}%
-
- {
+ const rect = e.currentTarget.getBoundingClientRect();
+ setIsDragging(true);
+
+ const updatePosition = (clientX: number, clientY: number) => {
+ const x = Math.max(
+ 0,
+ Math.min(1, (clientX - rect.left) / rect.width)
+ );
+ const y = Math.max(
+ 0,
+ Math.min(1, (clientY - rect.top) / rect.height)
+ );
+ props.onChange({ x, y });
+ };
+
+ updatePosition(e.clientX, e.clientY);
+
+ const handleMouseMove = (moveEvent: MouseEvent) => {
+ updatePosition(moveEvent.clientX, moveEvent.clientY);
+ };
+
+ const handleMouseUp = () => {
+ setIsDragging(false);
+ window.removeEventListener("mousemove", handleMouseMove);
+ window.removeEventListener("mouseup", handleMouseUp);
+ };
+
+ window.addEventListener("mousemove", handleMouseMove);
+ window.addEventListener("mouseup", handleMouseUp);
+ }}
+ >
+ {/* Grid lines for reference */}
+
+ );
}
export function SceneSegmentConfig(props: {
- segmentIndex: number;
- segment: SceneSegment;
+ segmentIndex: number;
+ segment: SceneSegment;
}) {
- const { setProject, setEditorState, projectActions } = useEditorContext();
+ const { setProject, setEditorState, projectActions, project, totalDuration } = useEditorContext();
+
+ // Initialize split view settings if not present
+ const splitViewSettings = (): SplitViewSettings =>
+ props.segment.splitViewSettings || {
+ cameraPosition: { x: 0.5, y: 0.5 },
+ screenPosition: { x: 0.5, y: 0.5 },
+ cameraSide: "right",
+ cameraZoom: 1.0,
+ screenZoom: 1.0,
+ fullscreen: false,
+ };
+
+ const layoutOptions = [
+ {
+ value: "default",
+ label: "Default",
+ icon:
+
+
+
+
+ {/* Position indicator */}
+
+
+
+
+
+ i !== props.segmentIndex && s.mode === props.segment.mode
+ )
+ }>
+
+
+ );
+}
diff --git a/apps/desktop/src/routes/editor/context.ts b/apps/desktop/src/routes/editor/context.ts
index a504fc7a67..a54b75a954 100644
--- a/apps/desktop/src/routes/editor/context.ts
+++ b/apps/desktop/src/routes/editor/context.ts
@@ -159,6 +159,87 @@ 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;
+
+ // Check if there's enough space in the timeline
+ const timelineDuration = totalDuration();
+ if (newSegmentEnd > timelineDuration) {
+ // Not enough space for the duplicate
+ return;
+ }
+
+ // Check if the new segment would overlap with any existing scene segments
+ 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) {
+ // Would overlap with another segment
+ return;
+ }
+
+ batch(() => {
+ setProject(
+ "timeline",
+ "sceneSegments",
+ produce((s) => {
+ if (!s) return;
+ // Insert duplicate right after the original
+ s.splice(segmentIndex + 1, 0, {
+ ...segment,
+ start: newSegmentStart,
+ end: newSegmentEnd,
+ // Deep clone split view settings if present
+ splitViewSettings: segment.splitViewSettings
+ ? { ...segment.splitViewSettings }
+ : undefined,
+ });
+ }),
+ );
+ // Select and click on the newly duplicated segment
+ setEditorState("timeline", "selection", {
+ type: "scene",
+ index: segmentIndex + 1,
+ });
+ // Move playhead to the start of the new segment
+ setEditorState("playbackTime", newSegmentStart);
+ // Center the timeline view on the new segment
+ 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;
+
+ // Find the first segment with the same mode
+ 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;
+ // Copy settings based on mode
+ if (s.mode === "splitView" && originalSegment.splitViewSettings) {
+ s.splitViewSettings = { ...originalSegment.splitViewSettings };
+ }
+ // Can add more mode-specific settings copying here in the future
+ }),
+ );
+ },
};
createEffect(
diff --git a/apps/desktop/src/utils/tauri.ts b/apps/desktop/src/utils/tauri.ts
index 6066727c24..fda9684f26 100644
--- a/apps/desktop/src/utils/tauri.ts
+++ b/apps/desktop/src/utils/tauri.ts
@@ -434,7 +434,7 @@ export type ShadowConfiguration = { size: number; opacity: number; blur: number
export type SharingMeta = { id: string; link: string }
export type ShowCapWindow = "Setup" | "Main" | { 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
+ setEditorState("timeline", "selection", null)}
+ leftIcon={
+
- return (
-
+ {
+ projectActions.duplicateSceneSegment(props.segmentIndex);
+ }}
+ leftIcon={
+ {
+ projectActions.deleteSceneSegment(props.segmentIndex);
+ }}
+ leftIcon={
+
+
-
-
-
- );
-}
\ No newline at end of file
+
- setEditorState("timeline", "selection", null)}
- leftIcon={
- {
- projectActions.deleteSceneSegment(props.segmentIndex);
- }}
- leftIcon={
-
-
-
- {
- setProject(
- "timeline",
- "sceneSegments",
- props.segmentIndex,
- "mode",
- v as "default" | "cameraOnly" | "hideCamera" | "splitView",
- );
- }}
- class="grid grid-cols-2 gap-2"
- >
-
- {(option) => (
-
-
-
-
- )}
-
-
-
-
-
-
-
-
- {option.icon}
- {option.label}
-
- {option.description}
-
-
-
-
-
-
-
-
-
- {
- const currentSettings = splitViewSettings();
- setProject(
- "timeline",
- "sceneSegments",
- props.segmentIndex,
- "splitViewSettings",
- { ...currentSettings, cameraSide: value as "left" | "right" },
- );
- }}
- class="grid grid-cols-2 gap-2"
- >
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {
- const currentSettings = splitViewSettings();
- setProject(
- "timeline",
- "sceneSegments",
- props.segmentIndex,
- "splitViewSettings",
- { ...currentSettings, cameraPosition: pos },
- );
- }}
- label="Camera"
- />
-
-
- {
- const currentSettings = splitViewSettings();
- setProject(
- "timeline",
- "sceneSegments",
- props.segmentIndex,
- "splitViewSettings",
- { ...currentSettings, cameraZoom: value },
- );
- }}
- />
-
-
-
- {((splitViewSettings().cameraZoom || 1) * 100).toFixed(0)}%
-
-
-
-
-
- {
- const currentSettings = splitViewSettings();
- setProject(
- "timeline",
- "sceneSegments",
- props.segmentIndex,
- "splitViewSettings",
- { ...currentSettings, screenPosition: pos },
- );
- }}
- label="Screen"
- />
-
-
- {
- const currentSettings = splitViewSettings();
- setProject(
- "timeline",
- "sceneSegments",
- props.segmentIndex,
- "splitViewSettings",
- { ...currentSettings, screenZoom: value },
- );
- }}
- />
-
-
-
- {((splitViewSettings().screenZoom || 1) * 100).toFixed(0)}%
-
-
+ {
+ setProject(
+ "timeline",
+ "sceneSegments",
+ props.segmentIndex,
+ "mode",
+ v as "default" | "cameraOnly" | "hideCamera" | "splitView"
+ );
+ }}
+ class="grid grid-cols-2 gap-2"
+ >
+
+ {(option) => (
+
+
+
+
+ )}
+
+
+
+
+
+
+
+
+ {option.icon}
+
+ {option.label}
+
+
+ {option.description}
+
+
+
+
+
+
+
+
+
+
+
+ {
+ const currentSettings = splitViewSettings();
+ setProject(
+ "timeline",
+ "sceneSegments",
+ props.segmentIndex,
+ "splitViewSettings",
+ { ...currentSettings, fullscreen: checked }
+ );
+ }}
+ />
+
+
+
+
+ Fill entire frame without padding
+
+
+
+
+ {
+ const currentSettings = splitViewSettings();
+ setProject(
+ "timeline",
+ "sceneSegments",
+ props.segmentIndex,
+ "splitViewSettings",
+ {
+ ...currentSettings,
+ cameraSide: value as "left" | "right",
+ }
+ );
+ }}
+ class="grid grid-cols-2 gap-2"
+ >
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {
+ const currentSettings = splitViewSettings();
+ setProject(
+ "timeline",
+ "sceneSegments",
+ props.segmentIndex,
+ "splitViewSettings",
+ { ...currentSettings, cameraPosition: pos }
+ );
+ }}
+ label="Camera"
+ />
+
+
+ {
+ const currentSettings = splitViewSettings();
+ setProject(
+ "timeline",
+ "sceneSegments",
+ props.segmentIndex,
+ "splitViewSettings",
+ { ...currentSettings, cameraZoom: value }
+ );
+ }}
+ />
+
+
+
+
+ {((splitViewSettings().cameraZoom || 1) * 100).toFixed(0)}
+ %
+
+
+
+
+
+
+ {
+ const currentSettings = splitViewSettings();
+ setProject(
+ "timeline",
+ "sceneSegments",
+ props.segmentIndex,
+ "splitViewSettings",
+ { ...currentSettings, screenPosition: pos }
+ );
+ }}
+ label="Screen"
+ />
+
+
+ {
+ const currentSettings = splitViewSettings();
+ setProject(
+ "timeline",
+ "sceneSegments",
+ props.segmentIndex,
+ "splitViewSettings",
+ { ...currentSettings, screenZoom: value }
+ );
+ }}
+ />
+
+
+
+
+ {((splitViewSettings().screenZoom || 1) * 100).toFixed(0)}
+ %
+
+
+
+ {
+ projectActions.copySceneSettingsFromOriginal(props.segmentIndex);
+ }}
+ leftIcon={
+
+
- Scene
-
-
- {getSceneIcon(segment.mode)}
- {ctx.width() > 120 && (
-
- {getSceneLabel(segment.mode)}
-
- )}
-
- - + -
-Click to add scene segment
+
+ (Make the camera full screen, or hide it)
+
+
+ }
+ >
+ {(segment, i) => {
+ const { setTrackState } = useTrackContext();
+
+ const sceneSegments = () => project.timeline!.sceneSegments!;
+
+ function createMouseDownDrag
+ Scene
+
+
+ {getSceneIcon(segment.mode)}
+ {ctx.width() > 120 && (
+
+ {getSceneLabel(segment.mode)}
+
+ )}
+
+ + + +
+Click to add zoom segment
-
- (Smoothly zoom in on important areas)
-
-
- }
- >
- {(segment, i) => {
- const { setTrackState } = useTrackContext();
-
- const zoomPercentage = () => {
- const amount = segment.amount;
- return `${amount.toFixed(1)}x`;
- };
-
- const zoomSegments = () => project.timeline!.zoomSegments!;
-
- function createMouseDownDrag
-
- );
- } else if (width < 100) {
- // Small - show icon and zoom amount
- return (
-
-
- );
- } else {
- // Large - show full content
- return (
-
- Zoom
-
- );
- }
- })()}
-
-
- - + -
-Click to add zoom segment
+
+ (Smoothly zoom in on important areas)
+
+
+ }
+ >
+ {(segment, i) => {
+ const { setTrackState } = useTrackContext();
+
+ const zoomPercentage = () => {
+ const amount = segment.amount;
+ return `${amount.toFixed(1)}x`;
+ };
+
+ const zoomSegments = () => project.timeline!.zoomSegments!;
+
+ function createMouseDownDrag
+
+ );
+ } else if (width < 100) {
+ // Small - show icon and zoom amount
+ return (
+
+
+ );
+ } else {
+ // Large - show full content
+ return (
+
+ Zoom
+
+ );
+ }
+ })()}
+
+
+ + + +
+
@@ -2390,7 +2391,10 @@ function OldSceneSegmentConfig(props: {
"sceneSegments",
props.segmentIndex,
"splitViewSettings",
- { ...currentSettings, cameraSide: value as "left" | "right" },
+ {
+ ...currentSettings,
+ cameraSide: value as "left" | "right",
+ },
);
}}
class="flex flex-row gap-2"
@@ -2409,12 +2413,12 @@ function OldSceneSegmentConfig(props: {
-
+
{/* Position controls are now handled in SceneSegmentConfig */}
-
+
{/* Position controls are now handled in SceneSegmentConfig */}
- }
- >
- {(segment, i) => {
- const { setTrackState } = useTrackContext();
-
- const sceneSegments = () => project.timeline!.sceneSegments!;
-
- function createMouseDownDragPlease use the new scene segment controls
Please use the new scene segment controls
diff --git a/apps/desktop/src/routes/editor/SceneSegmentConfig.tsx b/apps/desktop/src/routes/editor/SceneSegmentConfig.tsx
index af1522a8e8..71af251044 100644
--- a/apps/desktop/src/routes/editor/SceneSegmentConfig.tsx
+++ b/apps/desktop/src/routes/editor/SceneSegmentConfig.tsx
@@ -1,414 +1,415 @@
import { RadioGroup as KRadioGroup } from "@kobalte/core/radio-group";
import { createSignal, For, Show } from "solid-js";
-import { type SceneSegment, type SplitViewSettings } from "~/utils/tauri";
-import { EditorButton, Slider } from "./ui";
-import { useEditorContext } from "./context";
import { Toggle } from "~/components/Toggle";
-import IconLucideCheck from "~icons/lucide/check";
-import IconLucideMonitor from "~icons/lucide/monitor";
-import IconLucideLayout from "~icons/lucide/layout";
-import IconLucideVideo from "~icons/lucide/video";
-import IconLucideEyeOff from "~icons/lucide/eye-off";
+import type { SceneSegment, SplitViewSettings } from "~/utils/tauri";
+import IconCapTrash from "~icons/iconoir/trash";
import IconLucideAlignLeft from "~icons/lucide/align-left";
import IconLucideAlignRight from "~icons/lucide/align-right";
-import IconCapTrash from "~icons/iconoir/trash";
-import IconLucideSettings from "~icons/lucide/settings";
+import IconLucideCheck from "~icons/lucide/check";
+import IconLucideClipboardCopy from "~icons/lucide/clipboard-copy";
+import IconLucideCopy from "~icons/lucide/copy";
+import IconLucideEyeOff from "~icons/lucide/eye-off";
+import IconLucideLayout from "~icons/lucide/layout";
import IconLucideMaximize from "~icons/lucide/maximize";
import IconLucideMinimize from "~icons/lucide/minimize";
-import IconLucideCopy from "~icons/lucide/copy";
-import IconLucideClipboardCopy from "~icons/lucide/clipboard-copy";
+import IconLucideMonitor from "~icons/lucide/monitor";
+import IconLucideSettings from "~icons/lucide/settings";
+import IconLucideVideo from "~icons/lucide/video";
+import { useEditorContext } from "./context";
+import { EditorButton, Slider } from "./ui";
function SimplePositionControl(props: {
- position: { x: number; y: number };
- onChange: (position: { x: number; y: number }) => void;
- label: string;
+ position: { x: number; y: number };
+ onChange: (position: { x: number; y: number }) => void;
+ label: string;
}) {
- const [isDragging, setIsDragging] = createSignal(false);
+ const [isDragging, setIsDragging] = createSignal(false);
- return (
- {
- const rect = e.currentTarget.getBoundingClientRect();
- setIsDragging(true);
+ return (
+
+ );
}
export function SceneSegmentConfig(props: {
- segmentIndex: number;
- segment: SceneSegment;
+ segmentIndex: number;
+ segment: SceneSegment;
}) {
- const { setProject, setEditorState, projectActions, project, totalDuration } = useEditorContext();
+ const { setProject, setEditorState, projectActions, project, totalDuration } =
+ useEditorContext();
+
+ // Initialize split view settings if not present
+ const splitViewSettings = (): SplitViewSettings =>
+ props.segment.splitViewSettings || {
+ cameraPosition: { x: 0.5, y: 0.5 },
+ screenPosition: { x: 0.5, y: 0.5 },
+ cameraSide: "right",
+ cameraZoom: 1.0,
+ screenZoom: 1.0,
+ fullscreen: false,
+ };
+
+ const layoutOptions = [
+ {
+ value: "default",
+ label: "Default",
+ icon: {
+ const rect = e.currentTarget.getBoundingClientRect();
+ setIsDragging(true);
- const updatePosition = (clientX: number, clientY: number) => {
- const x = Math.max(
- 0,
- Math.min(1, (clientX - rect.left) / rect.width)
- );
- const y = Math.max(
- 0,
- Math.min(1, (clientY - rect.top) / rect.height)
- );
- props.onChange({ x, y });
- };
+ const updatePosition = (clientX: number, clientY: number) => {
+ const x = Math.max(
+ 0,
+ Math.min(1, (clientX - rect.left) / rect.width),
+ );
+ const y = Math.max(
+ 0,
+ Math.min(1, (clientY - rect.top) / rect.height),
+ );
+ props.onChange({ x, y });
+ };
- updatePosition(e.clientX, e.clientY);
+ updatePosition(e.clientX, e.clientY);
- const handleMouseMove = (moveEvent: MouseEvent) => {
- updatePosition(moveEvent.clientX, moveEvent.clientY);
- };
+ const handleMouseMove = (moveEvent: MouseEvent) => {
+ updatePosition(moveEvent.clientX, moveEvent.clientY);
+ };
- const handleMouseUp = () => {
- setIsDragging(false);
- window.removeEventListener("mousemove", handleMouseMove);
- window.removeEventListener("mouseup", handleMouseUp);
- };
+ const handleMouseUp = () => {
+ setIsDragging(false);
+ window.removeEventListener("mousemove", handleMouseMove);
+ window.removeEventListener("mouseup", handleMouseUp);
+ };
- window.addEventListener("mousemove", handleMouseMove);
- window.addEventListener("mouseup", handleMouseUp);
- }}
- >
- {/* Grid lines for reference */}
-
- );
+ {/* Position indicator */}
+
+
-
-
-
+ window.addEventListener("mousemove", handleMouseMove);
+ window.addEventListener("mouseup", handleMouseUp);
+ }}
+ >
+ {/* Grid lines for reference */}
+
+
+
+
- {/* Position indicator */}
-
-
- i !== props.segmentIndex && s.mode === props.segment.mode,
+ )}
+ >
+
+
+ );
}
diff --git a/apps/desktop/src/routes/editor/Timeline/ClipTrack.tsx b/apps/desktop/src/routes/editor/Timeline/ClipTrack.tsx
index aa39d29ee3..de90e722bc 100644
--- a/apps/desktop/src/routes/editor/Timeline/ClipTrack.tsx
+++ b/apps/desktop/src/routes/editor/Timeline/ClipTrack.tsx
@@ -1,19 +1,19 @@
import {
- createEventListener,
- createEventListenerMap,
+ createEventListener,
+ createEventListenerMap,
} from "@solid-primitives/event-listener";
import { cx } from "cva";
import {
- type ComponentProps,
- createEffect,
- createMemo,
- createRoot,
- createSignal,
- For,
- Match,
- mergeProps,
- Show,
- Switch,
+ type ComponentProps,
+ createEffect,
+ createMemo,
+ createRoot,
+ createSignal,
+ For,
+ Match,
+ mergeProps,
+ Show,
+ Switch,
} from "solid-js";
import { produce } from "solid-js/store";
@@ -22,682 +22,682 @@ import { useEditorContext } from "../context";
import { useSegmentContext, useTimelineContext } from "./context";
import { getSectionMarker } from "./sectionMarker";
import {
- SegmentContent,
- SegmentHandle,
- SegmentRoot,
- TrackRoot,
- useSegmentTranslateX,
- useSegmentWidth,
+ SegmentContent,
+ SegmentHandle,
+ SegmentRoot,
+ TrackRoot,
+ useSegmentTranslateX,
+ useSegmentWidth,
} from "./Track";
function WaveformCanvas(props: {
- systemWaveform?: number[];
- micWaveform?: number[];
- segment: { start: number; end: number };
- secsPerPixel: number;
+ systemWaveform?: number[];
+ micWaveform?: number[];
+ segment: { start: number; end: number };
+ secsPerPixel: number;
}) {
- const { project } = useEditorContext();
-
- let canvas: HTMLCanvasElement | undefined;
- const { width } = useSegmentContext();
- const { secsPerPixel } = useTimelineContext();
-
- const render = (
- ctx: CanvasRenderingContext2D,
- h: number,
- waveform: number[],
- color: string,
- gain = 0
- ) => {
- const maxAmplitude = h;
-
- // yellow please
- ctx.fillStyle = color;
- ctx.beginPath();
-
- const step = 0.05 / secsPerPixel();
-
- ctx.moveTo(0, h);
-
- const norm = (w: number) => {
- const ww = Number.isFinite(w) ? w : -60;
- return 1.0 - Math.max(ww + gain, -60) / -60;
- };
-
- for (
- let segmentTime = props.segment.start;
- segmentTime <= props.segment.end + 0.1;
- segmentTime += 0.1
- ) {
- const index = Math.floor(segmentTime * 10);
- const xTime = index / 10;
-
- const currentDb =
- typeof waveform[index] === "number" ? waveform[index] : -60;
- const amplitude = norm(currentDb) * maxAmplitude;
-
- const x = (xTime - props.segment.start) / secsPerPixel();
- const y = h - amplitude;
-
- const prevX = (xTime - 0.1 - props.segment.start) / secsPerPixel();
- const prevDb =
- typeof waveform[index - 1] === "number" ? waveform[index - 1] : -60;
- const prevAmplitude = norm(prevDb) * maxAmplitude;
- const prevY = h - prevAmplitude;
-
- const cpX1 = prevX + step / 2;
- const cpX2 = x - step / 2;
-
- ctx.bezierCurveTo(cpX1, prevY, cpX2, y, x, y);
- }
-
- ctx.lineTo(
- (props.segment.end + 0.3 - props.segment.start) / secsPerPixel(),
- h
- );
-
- ctx.closePath();
- ctx.fill();
- };
-
- function renderWaveforms() {
- if (!canvas) return;
- const ctx = canvas.getContext("2d");
- if (!ctx) return;
-
- const w = width();
- if (w <= 0) return;
-
- const h = canvas.height;
- canvas.width = w;
- ctx.clearRect(0, 0, w, h);
-
- if (props.micWaveform)
- render(
- ctx,
- h,
- props.micWaveform,
- "rgba(255,255,255,0.4)",
- project.audio.micVolumeDb
- );
-
- if (props.systemWaveform)
- render(
- ctx,
- h,
- props.systemWaveform,
- "rgba(255,150,0,0.5)",
- project.audio.systemVolumeDb
- );
- }
-
- createEffect(() => {
- renderWaveforms();
- });
-
- return (
-
- setEditorState("timeline", "selection", null)}
- leftIcon={
-
+ return (
+
- {
- projectActions.duplicateSceneSegment(props.segmentIndex);
- }}
- leftIcon={
- {
- projectActions.deleteSceneSegment(props.segmentIndex);
- }}
- leftIcon={
-
-
+
-
- i !== props.segmentIndex && s.mode === props.segment.mode
- )
- }>
-
-
- );
+
+ setEditorState("timeline", "selection", null)}
+ leftIcon={
+
-
+ {
+ projectActions.duplicateSceneSegment(props.segmentIndex);
+ }}
+ leftIcon={
+ {
+ projectActions.deleteSceneSegment(props.segmentIndex);
+ }}
+ leftIcon={
+
+
- {
+ setProject(
+ "timeline",
+ "sceneSegments",
+ props.segmentIndex,
+ "mode",
+ v as "default" | "cameraOnly" | "hideCamera" | "splitView",
+ );
+ }}
+ class="grid grid-cols-2 gap-2"
+ >
+
+ {(option) => (
+
+
+
+
+ )}
+
+
+
-
-
+
+ {
- setProject(
- "timeline",
- "sceneSegments",
- props.segmentIndex,
- "mode",
- v as "default" | "cameraOnly" | "hideCamera" | "splitView"
- );
- }}
- class="grid grid-cols-2 gap-2"
- >
-
- {(option) => (
-
-
-
-
- )}
-
-
-
+
+
-
- {option.icon}
-
- {option.label}
-
-
- {option.description}
-
+ {option.icon}
+
+ {option.label}
+
+
+ {option.description}
+
-
+
+
-
+
+
+
+
-
-
+
-
+
- {
- const currentSettings = splitViewSettings();
- setProject(
- "timeline",
- "sceneSegments",
- props.segmentIndex,
- "splitViewSettings",
- { ...currentSettings, fullscreen: checked }
- );
- }}
- />
-
-
-
-
- Fill entire frame without padding
-
-
-
+
-
+
+
-
+ {
+ const currentSettings = splitViewSettings();
+ setProject(
+ "timeline",
+ "sceneSegments",
+ props.segmentIndex,
+ "splitViewSettings",
+ { ...currentSettings, fullscreen: checked },
+ );
+ }}
+ />
+
+
+
+
+ Fill entire frame without padding
+
+
+
-
- {
- const currentSettings = splitViewSettings();
- setProject(
- "timeline",
- "sceneSegments",
- props.segmentIndex,
- "splitViewSettings",
- {
- ...currentSettings,
- cameraSide: value as "left" | "right",
- }
- );
- }}
- class="grid grid-cols-2 gap-2"
- >
-
-
-
-
-
-
-
-
-
-
+
+
+ {
+ const currentSettings = splitViewSettings();
+ setProject(
+ "timeline",
+ "sceneSegments",
+ props.segmentIndex,
+ "splitViewSettings",
+ {
+ ...currentSettings,
+ cameraSide: value as "left" | "right",
+ },
+ );
+ }}
+ class="grid grid-cols-2 gap-2"
+ >
+
+
+
+
+
+
+
+
+
+
-
-
-
-
+
-
- {
- const currentSettings = splitViewSettings();
- setProject(
- "timeline",
- "sceneSegments",
- props.segmentIndex,
- "splitViewSettings",
- { ...currentSettings, cameraPosition: pos }
- );
- }}
- label="Camera"
- />
-
-
- {
- const currentSettings = splitViewSettings();
- setProject(
- "timeline",
- "sceneSegments",
- props.segmentIndex,
- "splitViewSettings",
- { ...currentSettings, cameraZoom: value }
- );
- }}
- />
-
-
-
-
- {((splitViewSettings().cameraZoom || 1) * 100).toFixed(0)}
- %
-
-
-
+
-
+
-
+
+ {
+ const currentSettings = splitViewSettings();
+ setProject(
+ "timeline",
+ "sceneSegments",
+ props.segmentIndex,
+ "splitViewSettings",
+ { ...currentSettings, cameraPosition: pos },
+ );
+ }}
+ label="Camera"
+ />
+
+
+ {
+ const currentSettings = splitViewSettings();
+ setProject(
+ "timeline",
+ "sceneSegments",
+ props.segmentIndex,
+ "splitViewSettings",
+ { ...currentSettings, cameraZoom: value },
+ );
+ }}
+ />
+
+
+
+
+ {((splitViewSettings().cameraZoom || 1) * 100).toFixed(0)}
+ %
+
+
+
-
-
-
- {
- const currentSettings = splitViewSettings();
- setProject(
- "timeline",
- "sceneSegments",
- props.segmentIndex,
- "splitViewSettings",
- { ...currentSettings, screenPosition: pos }
- );
- }}
- label="Screen"
- />
-
-
- {
- const currentSettings = splitViewSettings();
- setProject(
- "timeline",
- "sceneSegments",
- props.segmentIndex,
- "splitViewSettings",
- { ...currentSettings, screenZoom: value }
- );
- }}
- />
-
-
-
-
- {((splitViewSettings().screenZoom || 1) * 100).toFixed(0)}
- %
-
-
-
+
+
+
+ {
+ const currentSettings = splitViewSettings();
+ setProject(
+ "timeline",
+ "sceneSegments",
+ props.segmentIndex,
+ "splitViewSettings",
+ { ...currentSettings, screenPosition: pos },
+ );
+ }}
+ label="Screen"
+ />
+
+
+ {
+ const currentSettings = splitViewSettings();
+ setProject(
+ "timeline",
+ "sceneSegments",
+ props.segmentIndex,
+ "splitViewSettings",
+ { ...currentSettings, screenZoom: value },
+ );
+ }}
+ />
+
+
+
+
+ {((splitViewSettings().screenZoom || 1) * 100).toFixed(0)}
+ %
+
+
+
- {
- projectActions.copySceneSettingsFromOriginal(props.segmentIndex);
- }}
- leftIcon={
-
-
+ {
+ projectActions.copySceneSettingsFromOriginal(props.segmentIndex);
+ }}
+ leftIcon={
+
+
- Scene
-
-
- {getSceneIcon(segment.mode)}
- {ctx.width() > 120 && (
-
- {getSceneLabel(segment.mode)}
-
- )}
-
- - + -
-Click to add scene segment
+
+ (Make the camera full screen, or hide it)
+
+
+ }
+ >
+ {(segment, i) => {
+ const { setTrackState } = useTrackContext();
+
+ const sceneSegments = () => project.timeline!.sceneSegments!;
+
+ function createMouseDownDrag
+ Scene
+
+
+ {getSceneIcon(segment.mode)}
+ {ctx.width() > 120 && (
+
+ {getSceneLabel(segment.mode)}
+
+ )}
+
+ + + +
+Click to add zoom segment
-
- (Smoothly zoom in on important areas)
-
-
- }
- >
- {(segment, i) => {
- const { setTrackState } = useTrackContext();
-
- const zoomPercentage = () => {
- const amount = segment.amount;
- return `${amount.toFixed(1)}x`;
- };
-
- const zoomSegments = () => project.timeline!.zoomSegments!;
-
- function createMouseDownDrag
-
- );
- } else if (width < 100) {
- // Small - show icon and zoom amount
- return (
-
-
- );
- } else {
- // Large - show full content
- return (
-
- Zoom
-
- );
- }
- })()}
-
-
- - + -
-Click to add zoom segment
+
+ (Smoothly zoom in on important areas)
+
+
+ }
+ >
+ {(segment, i) => {
+ const { setTrackState } = useTrackContext();
+
+ const zoomPercentage = () => {
+ const amount = segment.amount;
+ return `${amount.toFixed(1)}x`;
+ };
+
+ const zoomSegments = () => project.timeline!.zoomSegments!;
+
+ function createMouseDownDrag
+
+ );
+ } else if (width < 100) {
+ // Small - show icon and zoom amount
+ return (
+
+
+ );
+ } else {
+ // Large - show full content
+ return (
+
+ Zoom
+
+ );
+ }
+ })()}
+
+
+ + + +
+
- {
- projectActions.deleteSceneSegment(props.segmentIndex);
- }}
- leftIcon={
-
-
- setEditorState("timeline", "selection", null)}
- leftIcon={
-
-
-
-
- Default
-
-
-
-
- Split View
-
-
-
-
- Camera Only
-
-
-
-
- Hide Camera
-
-
-
-
-
-
-
- {props.segment.mode === "cameraOnly"
- ? "Shows only the camera feed"
- : props.segment.mode === "hideCamera"
- ? "Shows only the screen recording"
- : props.segment.mode === "splitView"
- ? `Shows screen on ${splitViewSettings().cameraSide === "left" ? "right" : "left"}, camera on ${splitViewSettings().cameraSide}`
- : "Shows both screen and camera"}
-
-
-
- {
- const currentSettings = splitViewSettings();
- setProject(
- "timeline",
- "sceneSegments",
- props.segmentIndex,
- "splitViewSettings",
- {
- ...currentSettings,
- cameraSide: value as "left" | "right",
- },
- );
- }}
- class="flex flex-row gap-2"
- >
-
-
- Left
-
-
-
-
- Right
-
-
-
-
-
-
- {/* Position controls are now handled in SceneSegmentConfig */}
-
-
-
- {/* Position controls are now handled in SceneSegmentConfig */}
-
-
-
- Please use the new scene segment controls
- Please use the new scene segment controls
- to 5 mins,{" "} - + {rawOptions.mode === "instant" ? ( +
- );
-}
-
-function escapeRegExp(value: string) {
- return value.replace(/[\^$*+?.()|[\]{}-]/g, "\\$&");
-}
-
-export function TargetCardSkeleton(props: { class?: string }) {
- return (
- = PolymorphicProps<
- T,
- {
- class?: string;
- disabled?: boolean;
- expanded?: boolean;
- }
->;
-
-export default function TargetDropdownButton<
- T extends ValidComponent = "button",
->(props: TargetDropdownButtonProps) {
- const [local, rest] = splitProps(props, ["class", "expanded", "disabled"]);
-
- return (
-
-
- );
-}
diff --git a/apps/desktop/src/routes/(window-chrome)/new-main/TargetMenuGrid.tsx b/apps/desktop/src/routes/(window-chrome)/new-main/TargetMenuGrid.tsx
deleted file mode 100644
index 34cd229125..0000000000
--- a/apps/desktop/src/routes/(window-chrome)/new-main/TargetMenuGrid.tsx
+++ /dev/null
@@ -1,192 +0,0 @@
-import { cx } from "cva";
-import { createMemo, For, Match, Switch } from "solid-js";
-import { Motion } from "solid-motionone";
-import type {
- CaptureDisplayWithThumbnail,
- CaptureWindowWithThumbnail,
-} from "~/utils/tauri";
-import TargetCard, { TargetCardSkeleton } from "./TargetCard";
-
-const DEFAULT_SKELETON_COUNT = 6;
-
-type BaseProps = {
- targets?: T[];
- onSelect?: (target: T) => void;
- isLoading?: boolean;
- errorMessage?: string;
- emptyMessage?: string;
- disabled?: boolean;
- skeletonCount?: number;
- class?: string;
- highlightQuery?: string;
-};
-
-type DisplayGridProps = BaseProps & {
- variant: "display";
-};
-
-type WindowGridProps = BaseProps & {
- variant: "window";
-};
-
-type TargetMenuGridProps = DisplayGridProps | WindowGridProps;
-
-export default function TargetMenuGrid(props: TargetMenuGridProps) {
- const items = createMemo(() => props.targets ?? []);
- const skeletonItems = createMemo(() =>
- Array.from({ length: props.skeletonCount ?? DEFAULT_SKELETON_COUNT }),
- );
- const isEmpty = createMemo(
- () => !props.isLoading && items().length === 0 && !props.errorMessage,
- );
-
- let containerRef: HTMLDivElement | undefined;
-
- const handleKeyDown = (event: KeyboardEvent) => {
- const container = containerRef;
- if (!container) return;
-
- const buttons = Array.from(
- container.querySelectorAll(
- "button[data-target-menu-card]:not(:disabled)",
- ),
- );
- if (!buttons.length) return;
-
- const currentTarget = event.currentTarget as HTMLButtonElement | null;
- if (!currentTarget) return;
-
- const currentIndex = buttons.indexOf(currentTarget);
- if (currentIndex === -1) return;
-
- const totalItems = buttons.length;
- const columns = 2;
- let nextIndex = currentIndex;
-
- switch (event.key) {
- case "ArrowRight":
- nextIndex = (currentIndex + 1) % totalItems;
- event.preventDefault();
- break;
- case "ArrowLeft":
- nextIndex = (currentIndex - 1 + totalItems) % totalItems;
- event.preventDefault();
- break;
- case "ArrowDown":
- nextIndex = Math.min(currentIndex + columns, totalItems - 1);
- event.preventDefault();
- break;
- case "ArrowUp":
- nextIndex = Math.max(currentIndex - columns, 0);
- event.preventDefault();
- break;
- case "Home":
- nextIndex = 0;
- event.preventDefault();
- break;
- case "End":
- nextIndex = totalItems - 1;
- event.preventDefault();
- break;
- default:
- return;
- }
-
- const target = buttons[nextIndex];
- target?.focus();
- };
-
- const defaultEmptyMessage = () =>
- props.variant === "display" ? "No displays found" : "No windows found";
-
- return (
- >;
- name: string;
- disabled?: boolean;
-} & ComponentProps<"button">;
-
-function TargetTypeButton(props: TargetTypeButtonProps) {
- const [local, rest] = splitProps(props, [
- "selected",
- "Component",
- "name",
- "disabled",
- "class",
- ]);
+import type { Component, ComponentProps } from "solid-js";
+function TargetTypeButton(
+ props: {
+ selected: boolean;
+ Component: Component>;
+ name: string;
+ } & ComponentProps<"div">,
+) {
return (
-
+
);
}
diff --git a/apps/desktop/src/routes/(window-chrome)/new-main/index.tsx b/apps/desktop/src/routes/(window-chrome)/new-main/index.tsx
index 8bc8e2f0b2..646c7655a9 100644
--- a/apps/desktop/src/routes/(window-chrome)/new-main/index.tsx
+++ b/apps/desktop/src/routes/(window-chrome)/new-main/index.tsx
@@ -18,8 +18,6 @@ import * as updater from "@tauri-apps/plugin-updater";
import { cx } from "cva";
import {
createEffect,
- createMemo,
- createSignal,
ErrorBoundary,
onCleanup,
onMount,
@@ -27,38 +25,23 @@ import {
Suspense,
} from "solid-js";
import { reconcile } from "solid-js/store";
-import { Motion, Presence } from "solid-motionone";
-import { Transition } from "solid-transition-group";
import Tooltip from "~/components/Tooltip";
-import { Input } from "~/routes/editor/ui";
import { generalSettingsStore } from "~/store";
import { createSignInMutation } from "~/utils/auth";
import {
createCameraMutation,
- createCurrentRecordingQuery,
createLicenseQuery,
listAudioDevices,
- listDisplaysWithThumbnails,
listScreens,
listVideoDevices,
listWindows,
- listWindowsWithThumbnails,
} from "~/utils/queries";
import {
type CameraInfo,
- type CaptureDisplay,
- type CaptureDisplayWithThumbnail,
- type CaptureWindow,
- type CaptureWindowWithThumbnail,
commands,
type DeviceOrModelID,
type ScreenCaptureTarget,
} from "~/utils/tauri";
-import IconLucideAppWindowMac from "~icons/lucide/app-window-mac";
-import IconLucideArrowLeft from "~icons/lucide/arrow-left";
-import IconLucideSearch from "~icons/lucide/search";
-import IconMaterialSymbolsScreenshotFrame2Rounded from "~icons/material-symbols/screenshot-frame-2-rounded";
-import IconMdiMonitor from "~icons/mdi/monitor";
import { WindowChromeHeader } from "../Context";
import {
RecordingOptionsProvider,
@@ -68,8 +51,6 @@ import CameraSelect from "./CameraSelect";
import ChangelogButton from "./ChangeLogButton";
import MicrophoneSelect from "./MicrophoneSelect";
import SystemAudio from "./SystemAudio";
-import TargetDropdownButton from "./TargetDropdownButton";
-import TargetMenuGrid from "./TargetMenuGrid";
import TargetTypeButton from "./TargetTypeButton";
function getWindowSize() {
@@ -88,179 +69,10 @@ const findCamera = (cameras: CameraInfo[], id: DeviceOrModelID) => {
});
};
-type WindowListItem = Pick<
- CaptureWindow,
- "id" | "owner_name" | "name" | "bounds" | "refresh_rate"
->;
-
-const createWindowSignature = (
- list?: readonly WindowListItem[],
-): string | undefined => {
- if (!list) return undefined;
-
- return list
- .map((item) => {
- const { position, size } = item.bounds;
- return [
- item.id,
- item.owner_name,
- item.name,
- position.x,
- position.y,
- size.width,
- size.height,
- item.refresh_rate,
- ].join(":");
- })
- .join("|");
-};
-
-type DisplayListItem = Pick
-
-
- );
-}
diff --git a/apps/desktop/src/routes/(window-chrome)/new-main/TargetDropdownButton.tsx b/apps/desktop/src/routes/(window-chrome)/new-main/TargetDropdownButton.tsx
deleted file mode 100644
index a14601d687..0000000000
--- a/apps/desktop/src/routes/(window-chrome)/new-main/TargetDropdownButton.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import type { PolymorphicProps } from "@kobalte/core/polymorphic";
-import { Polymorphic } from "@kobalte/core/polymorphic";
-import { cx } from "cva";
-import { splitProps, type ValidComponent } from "solid-js";
-import IconCapChevronDown from "~icons/cap/chevron-down";
-
-type TargetDropdownButtonProps
-
-
-
-
-
-
- {
- containerRef = node ?? undefined;
- }}
- >
-
-
-
-
-
- {() =>
-
-
-
- 0}>
-
-
- {(() => {
- const displayProps = props as DisplayGridProps;
- return (
-
- {(item, index) => (
-
- displayProps.onSelect?.(item)}
- disabled={displayProps.disabled}
- onKeyDown={handleKeyDown}
- class="w-full"
- data-target-menu-card="true"
- highlightQuery={displayProps.highlightQuery}
- />
-
- )}
-
- );
- })()}
-
-
- {(() => {
- const windowProps = props as WindowGridProps;
- return (
-
- {(item, index) => (
-
- windowProps.onSelect?.(item)}
- disabled={windowProps.disabled}
- onKeyDown={handleKeyDown}
- class="w-full"
- data-target-menu-card="true"
- highlightQuery={windowProps.highlightQuery}
- />
-
- )}
-
- );
- })()}
-
-
-
-
-
- );
-}
diff --git a/apps/desktop/src/routes/(window-chrome)/new-main/TargetTypeButton.tsx b/apps/desktop/src/routes/(window-chrome)/new-main/TargetTypeButton.tsx
index 6664e1e402..a7c4e2ac30 100644
--- a/apps/desktop/src/routes/(window-chrome)/new-main/TargetTypeButton.tsx
+++ b/apps/desktop/src/routes/(window-chrome)/new-main/TargetTypeButton.tsx
@@ -1,43 +1,31 @@
import { cx } from "cva";
-import { type Component, type ComponentProps, splitProps } from "solid-js";
-
-type TargetTypeButtonProps = {
- selected: boolean;
- Component: Component
-
- {props.errorMessage}
-
- {props.emptyMessage ?? defaultEmptyMessage()}
-
- {props.name}
+
-
- );
-}
-
export default function () {
const generalSettings = generalSettingsStore.createQuery();
+ // We do this on focus so the window doesn't get revealed when toggling the setting
const navigate = useNavigate();
createEventListener(window, "focus", () => {
if (generalSettings.data?.enableNewRecordingFlow === false) navigate("/");
@@ -300,106 +112,22 @@ function createUpdateCheck() {
function Page() {
const { rawOptions, setOptions } = useRecordingOptions();
- const currentRecording = createCurrentRecordingQuery();
- const isRecording = () => !!currentRecording.data;
-
- const [displayMenuOpen, setDisplayMenuOpen] = createSignal(false);
- const [windowMenuOpen, setWindowMenuOpen] = createSignal(false);
- const activeMenu = createMemo<"display" | "window" | null>(() => {
- if (displayMenuOpen()) return "display";
- if (windowMenuOpen()) return "window";
- return null;
- });
- const [hasOpenedDisplayMenu, setHasOpenedDisplayMenu] = createSignal(false);
- const [hasOpenedWindowMenu, setHasOpenedWindowMenu] = createSignal(false);
-
- let displayTriggerRef: HTMLButtonElement | undefined;
- let windowTriggerRef: HTMLButtonElement | undefined;
-
- const displayTargets = useQuery(() => ({
- ...listDisplaysWithThumbnails,
- enabled: hasOpenedDisplayMenu(),
- refetchInterval: false,
- }));
-
- const windowTargets = useQuery(() => ({
- ...listWindowsWithThumbnails,
- enabled: hasOpenedWindowMenu(),
- refetchInterval: false,
- }));
-
- const hasDisplayTargetsData = () => displayTargets.status === "success";
- const hasWindowTargetsData = () => windowTargets.status === "success";
-
- const displayTargetsData = createMemo(() =>
- hasDisplayTargetsData() ? displayTargets.data : undefined,
- );
-
- const windowTargetsData = createMemo(() =>
- hasWindowTargetsData() ? windowTargets.data : undefined,
- );
-
- const displayMenuLoading = () =>
- !hasDisplayTargetsData() &&
- (displayTargets.status === "pending" ||
- displayTargets.fetchStatus === "fetching");
- const windowMenuLoading = () =>
- !hasWindowTargetsData() &&
- (windowTargets.status === "pending" ||
- windowTargets.fetchStatus === "fetching");
-
- const displayErrorMessage = () => {
- if (!displayTargets.error) return undefined;
- return "Unable to load displays. Try using the Display button.";
- };
-
- const windowErrorMessage = () => {
- if (!windowTargets.error) return undefined;
- return "Unable to load windows. Try using the Window button.";
- };
-
- const selectDisplayTarget = (target: CaptureDisplayWithThumbnail) => {
- setOptions(
- "captureTarget",
- reconcile({ variant: "display", id: target.id }),
- );
- setOptions("targetMode", "display");
- setDisplayMenuOpen(false);
- displayTriggerRef?.focus();
- };
-
- const selectWindowTarget = async (target: CaptureWindowWithThumbnail) => {
- setOptions(
- "captureTarget",
- reconcile({ variant: "window", id: target.id }),
- );
- setOptions("targetMode", "window");
- setWindowMenuOpen(false);
- windowTriggerRef?.focus();
-
- try {
- await commands.focusWindow(target.id);
- } catch (error) {
- console.error("Failed to focus window:", error);
- }
- };
-
- createEffect(() => {
- if (!isRecording()) return;
- setDisplayMenuOpen(false);
- setWindowMenuOpen(false);
- });
createUpdateCheck();
onMount(async () => {
- setOptions({ targetMode: (window as any).__CAP__.initialTargetMode });
+ // We don't want the target select overlay on launch
+ setOptions({ targetMode: null });
+ // Enforce window size with multiple safeguards
const currentWindow = getCurrentWindow();
+ // We resize the window on mount as the user could be switching to the new recording flow
+ // which has a differently sized window.
const size = getWindowSize();
currentWindow.setSize(new LogicalSize(size.width, size.height));
+ // Check size when app regains focus
const unlistenFocus = currentWindow.onFocusChanged(
({ payload: focused }) => {
if (focused) {
@@ -410,6 +138,7 @@ function Page() {
},
);
+ // Listen for resize events
const unlistenResize = currentWindow.onResized(() => {
const size = getWindowSize();
@@ -435,48 +164,6 @@ function Page() {
const cameras = useQuery(() => listVideoDevices);
const mics = useQuery(() => listAudioDevices);
- const windowListSignature = createMemo(() =>
- createWindowSignature(windows.data),
- );
- const displayListSignature = createMemo(() =>
- createDisplaySignature(screens.data),
- );
- const [windowThumbnailsSignature, setWindowThumbnailsSignature] =
- createSignal
-
- props.onBack()}
- class="flex gap-1 items-center rounded-md px-1.5 text-xs
- text-gray-11 transition-opacity hover:opacity-70 hover:text-gray-12
- focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-9 focus-visible:ring-offset-2 focus-visible:ring-offset-gray-1"
- >
-
-
-
-
-
-
- {props.variant === "display" ? (
-
-
- {
- if (!c) setCamera.mutate(null);
- else if (c.model_id) setCamera.mutate({ ModelID: c.model_id });
- else setCamera.mutate({ DeviceID: c.device_id });
- }}
- />
- setMicInput.mutate(v)}
- />
-
- );
-
- const TargetSelectionHome = () => (
-
- {
- if (isRecording()) return;
- setOptions("targetMode", (v) => (v === "area" ? null : "area"));
- }}
- name="Area"
- />
-
-
- {
- if (isRecording()) return;
- setOptions("targetMode", (v) =>
- v === "display" ? null : "display",
- );
- }}
- name="Display"
- class="flex-1 rounded-none focus-visible:ring-0 focus-visible:ring-offset-0"
- />
- (displayTriggerRef = el)}
- disabled={isRecording()}
- expanded={displayMenuOpen()}
- onClick={() => {
- setDisplayMenuOpen((prev) => {
- const next = !prev;
- if (next) {
- setWindowMenuOpen(false);
- setHasOpenedDisplayMenu(true);
- }
- return next;
- });
- }}
- aria-haspopup="menu"
- aria-label="Choose display"
- />
-
-
- {
- if (isRecording()) return;
- setOptions("targetMode", (v) =>
- v === "window" ? null : "window",
- );
- }}
- name="Window"
- class="flex-1 rounded-none focus-visible:ring-0 focus-visible:ring-offset-0"
- />
- (windowTriggerRef = el)}
- disabled={isRecording()}
- expanded={windowMenuOpen()}
- onClick={() => {
- setWindowMenuOpen((prev) => {
- const next = !prev;
- if (next) {
- setDisplayMenuOpen(false);
- setHasOpenedWindowMenu(true);
- }
- return next;
- });
- }}
- aria-haspopup="menu"
- aria-label="Choose window"
- />
-
-
+
-
- {
- setDisplayMenuOpen(false);
- displayTriggerRef?.focus();
- }}
- />
- ) : (
- {
- setWindowMenuOpen(false);
- windowTriggerRef?.focus();
- }}
- />
+
);
}
diff --git a/apps/desktop/src/routes/(window-chrome)/settings/experimental.tsx b/apps/desktop/src/routes/(window-chrome)/settings/experimental.tsx
index 1dc37e8f8a..d12b1d8b32 100644
--- a/apps/desktop/src/routes/(window-chrome)/settings/experimental.tsx
+++ b/apps/desktop/src/routes/(window-chrome)/settings/experimental.tsx
@@ -40,62 +40,64 @@ function Inner(props: { initialStore: GeneralSettingsStore | null }) {
};
return (
-
+
+ setOptions("targetMode", (v) =>
+ v === "display" ? null : "display",
)
}
-
-
+ name="Display"
+ />
+
+ setOptions("targetMode", (v) => (v === "window" ? null : "window"))
+ }
+ name="Window"
+ />
+
+ setOptions("targetMode", (v) => (v === "area" ? null : "area"))
+ }
+ name="Area"
+ />
+
+
+ {
+ if (!c) setCamera.mutate(null);
+ else if (c.model_id) setCamera.mutate({ ModelID: c.model_id });
+ else setCamera.mutate({ DeviceID: c.device_id });
+ }}
+ />
+ setMicInput.mutate(v)}
+ />
+
-
-
-
- - Experimental Features -
-- These features are still in development and may not work as - expected. -
-
-
Recording Features
-
-
- handleChange("custom_cursor_capture2", value)
- }
- />
-
- handleChange("enableNativeCameraPreview", value)
- }
- />
- {
- handleChange("autoZoomOnClicks", value);
- // This is bad code, but I just want the UI to not jank and can't seem to find the issue.
- setTimeout(
- () => window.scrollTo({ top: 0, behavior: "instant" }),
- 5,
- );
- }}
- />
- {
- handleChange("enableNewRecordingFlow", value);
- // This is bad code, but I just want the UI to not jank and can't seem to find the issue.
- setTimeout(
- () => window.scrollTo({ top: 0, behavior: "instant" }),
- 5,
- );
- }}
- />
+
+
+
diff --git a/apps/desktop/src/routes/(window-chrome)/settings/general.tsx b/apps/desktop/src/routes/(window-chrome)/settings/general.tsx
index 8b6b1f1e44..2c42de9178 100644
--- a/apps/desktop/src/routes/(window-chrome)/settings/general.tsx
+++ b/apps/desktop/src/routes/(window-chrome)/settings/general.tsx
@@ -372,138 +372,141 @@ function Inner(props: { initialStore: GeneralSettingsStore | null }) {
};
return (
-
+
+
+ + Experimental Features +
++ These features are still in development and may not work as + expected. +
+
+
Recording Features
+
+
+ handleChange("custom_cursor_capture2", value)
+ }
+ />
+
+ handleChange("enableNativeCameraPreview", value)
+ }
+ />
+ {
+ handleChange("autoZoomOnClicks", value);
+ // This is bad code, but I just want the UI to not jank and can't seem to find the issue.
+ setTimeout(
+ () => window.scrollTo({ top: 0, behavior: "instant" }),
+ 5,
+ );
+ }}
+ />
+ {
+ handleChange("enableNewRecordingFlow", value);
+ // This is bad code, but I just want the UI to not jank and can't seem to find the issue.
+ setTimeout(
+ () => window.scrollTo({ top: 0, behavior: "instant" }),
+ 5,
+ );
+ }}
+ />
+
-
- {
- setSettings("theme", newTheme);
- generalSettingsStore.set({ theme: newTheme });
- }}
- />
+
+ = {
+ startRecording: "Start Recording",
+ stopRecording: "Stop Recording",
+ restartRecording: "Restart Recording",
// takeScreenshot: "Take Screenshot",
- openRecordingPicker: "Open recording picker",
- openRecordingPickerDisplay: "Record display",
- openRecordingPickerWindow: "Record window",
- openRecordingPickerArea: "Record area",
-} satisfies { [K in HotkeyAction]?: string };
+};
export default function () {
const [store] = createResource(() => hotkeysStore.get());
@@ -44,7 +39,6 @@ export default function () {
const MODIFIER_KEYS = new Set(["Meta", "Shift", "Control", "Alt"]);
function Inner(props: { initialStore: HotkeysStore | null }) {
- const generalSettings = generalSettingsStore.createQuery();
const [hotkeys, setHotkeys] = createStore<{
[K in HotkeyAction]?: Hotkey;
}>(props.initialStore?.hotkeys ?? {});
@@ -77,32 +71,23 @@ function Inner(props: { initialStore: HotkeysStore | null }) {
}
});
- const actions = () =>
- [
- ...(generalSettings.data?.enableNewRecordingFlow
- ? (["openRecordingPicker"] as const)
- : (["startStudioRecording", "startInstantRecording"] as const)),
- "stopRecording",
- "restartRecording",
- ...(generalSettings.data?.enableNewRecordingFlow
- ? ([
- "openRecordingPickerDisplay",
- "openRecordingPickerWindow",
- "openRecordingPickerArea",
- ] as const)
- : []),
- ] satisfies Array;
+ const actions = [
+ "startRecording",
+ "stopRecording",
+ "restartRecording",
+ // "takeScreenshot",
+ ] as Array;
return (
-
-
-
-
- );
-}
-
function ResizeHandle(
props: Omit, "style"> & {
style?: JSX.CSSProperties;
diff --git a/apps/desktop/src/store.ts b/apps/desktop/src/store.ts
index 2fd16a965c..f98c7db75f 100644
--- a/apps/desktop/src/store.ts
+++ b/apps/desktop/src/store.ts
@@ -2,12 +2,12 @@ import { createQuery } from "@tanstack/solid-query";
import { Store } from "@tauri-apps/plugin-store";
import { onCleanup } from "solid-js";
-import type {
- AuthStore,
- GeneralSettingsStore,
- HotkeysStore,
- PresetsStore,
- RecordingSettingsStore,
+import {
+ type AuthStore,
+ commands,
+ type GeneralSettingsStore,
+ type HotkeysStore,
+ type PresetsStore,
} from "~/utils/tauri";
let _store: Promise | undefined;
@@ -60,5 +60,3 @@ export const authStore = declareStore("auth");
export const hotkeysStore = declareStore("hotkeys");
export const generalSettingsStore =
declareStore("general_settings");
-export const recordingSettingsStore =
- declareStore("recording_settings");
diff --git a/apps/desktop/src/styles/theme.css b/apps/desktop/src/styles/theme.css
index 4d98267241..4a432b801f 100644
--- a/apps/desktop/src/styles/theme.css
+++ b/apps/desktop/src/styles/theme.css
@@ -154,23 +154,6 @@
.gray-button-shadow {
box-shadow: 0 1.5px 0 0 rgba(255, 255, 255, 0.4) inset;
}
-
-.dark .gray-button-border {
- @apply border-gray-2;
-}
-
-.gray-button-border {
- @apply border-gray-8;
-}
-
-.dark .dark-button-border {
- @apply border-gray-2;
-}
-
-.dark-button-border {
- @apply border-gray-12;
-}
-
[data-transparent-window] {
background: transparent !important;
}
diff --git a/apps/desktop/src/utils/createPresets.ts b/apps/desktop/src/utils/createPresets.ts
index 9ba9943d33..2217a75262 100644
--- a/apps/desktop/src/utils/createPresets.ts
+++ b/apps/desktop/src/utils/createPresets.ts
@@ -28,7 +28,6 @@ export function createPresets() {
const config = { ...preset.config };
// @ts-expect-error we reeeally don't want the timeline in the preset
config.timeline = undefined;
- config.clips = undefined;
await updatePresets((store) => {
store.presets.push({ name: preset.name, config });
diff --git a/apps/desktop/src/utils/queries.ts b/apps/desktop/src/utils/queries.ts
index 93ad12177a..ceafcc1cb5 100644
--- a/apps/desktop/src/utils/queries.ts
+++ b/apps/desktop/src/utils/queries.ts
@@ -7,14 +7,10 @@ import {
useQuery,
} from "@tanstack/solid-query";
import { getCurrentWindow } from "@tauri-apps/api/window";
-import { createEffect, createMemo } from "solid-js";
+import { createMemo } from "solid-js";
import { createStore, reconcile } from "solid-js/store";
import { useRecordingOptions } from "~/routes/(window-chrome)/OptionsContext";
-import {
- authStore,
- generalSettingsStore,
- recordingSettingsStore,
-} from "~/store";
+import { authStore, generalSettingsStore } from "~/store";
import { createQueryInvalidate } from "./events";
import {
type CameraInfo,
@@ -39,7 +35,7 @@ export const listWindows = queryOptions({
return w;
},
reconcile: "id",
- refetchInterval: false,
+ refetchInterval: 1000,
});
export const listScreens = queryOptions({
@@ -49,30 +45,6 @@ export const listScreens = queryOptions({
refetchInterval: 1000,
});
-export const listWindowsWithThumbnails = queryOptions({
- queryKey: ["capture", "windows-thumbnails"] as const,
- queryFn: async () => {
- const w = await commands.listWindowsWithThumbnails();
-
- w.sort(
- (a, b) =>
- a.owner_name.localeCompare(b.owner_name) ||
- a.name.localeCompare(b.name),
- );
-
- return w;
- },
- reconcile: "id",
- refetchInterval: false,
-});
-
-export const listDisplaysWithThumbnails = queryOptions({
- queryKey: ["capture", "displays-thumbnails"] as const,
- queryFn: () => commands.listDisplaysWithThumbnails(),
- reconcile: "id",
- refetchInterval: 1000,
-});
-
const getCurrentRecording = queryOptions({
queryKey: ["currentRecording"] as const,
queryFn: () => commands.getCurrentRecording().then((d) => d[0]),
@@ -134,20 +106,14 @@ export function createOptionsQuery() {
if (e.key === PERSIST_KEY) _setState(JSON.parse(e.newValue ?? "{}"));
});
- createEffect(() => {
- recordingSettingsStore.set({
- target: _state.captureTarget,
- micName: _state.micName,
- cameraId: _state.cameraID,
- mode: _state.mode,
- systemAudio: _state.captureSystemAudio,
- });
- });
-
const [state, setState] = makePersisted([_state, _setState], {
name: PERSIST_KEY,
});
+ createEventListener(window, "storage", (e) => {
+ if (e.key === PERSIST_KEY) setState(JSON.parse(e.newValue ?? "{}"));
+ });
+
return { rawOptions: state, setOptions: setState };
}
diff --git a/apps/desktop/src/utils/tauri.ts b/apps/desktop/src/utils/tauri.ts
index 11e44e4973..fda9684f26 100644
--- a/apps/desktop/src/utils/tauri.ts
+++ b/apps/desktop/src/utils/tauri.ts
@@ -38,12 +38,6 @@ async listCaptureWindows() : Promise {
async listCaptureDisplays() : Promise {
return await TAURI_INVOKE("list_capture_displays");
},
-async listDisplaysWithThumbnails() : Promise {
- return await TAURI_INVOKE("list_displays_with_thumbnails");
-},
-async listWindowsWithThumbnails() : Promise {
- return await TAURI_INVOKE("list_windows_with_thumbnails");
-},
async takeScreenshot() : Promise {
return await TAURI_INVOKE("take_screenshot");
},
@@ -119,8 +113,8 @@ async doPermissionsCheck(initialCheck: boolean) : Promise {
async requestPermission(permission: OSPermission) : Promise {
await TAURI_INVOKE("request_permission", { permission });
},
-async uploadExportedVideo(path: string, mode: UploadMode, channel: TAURI_CHANNEL) : Promise {
- return await TAURI_INVOKE("upload_exported_video", { path, mode, channel });
+async uploadExportedVideo(path: string, mode: UploadMode) : Promise {
+ return await TAURI_INVOKE("upload_exported_video", { path, mode });
},
async uploadScreenshot(screenshotPath: string) : Promise {
return await TAURI_INVOKE("upload_screenshot", { screenshotPath });
@@ -268,12 +262,6 @@ async displayInformation(displayId: string) : Promise {
},
async getWindowIcon(windowId: string) : Promise {
return await TAURI_INVOKE("get_window_icon", { windowId });
-},
-async focusWindow(windowId: WindowId) : Promise {
- return await TAURI_INVOKE("focus_window", { windowId });
-},
-async editorDeleteProject() : Promise {
- return await TAURI_INVOKE("editor_delete_project");
}
}
@@ -297,11 +285,10 @@ recordingStarted: RecordingStarted,
recordingStopped: RecordingStopped,
renderFrameEvent: RenderFrameEvent,
requestNewScreenshot: RequestNewScreenshot,
-requestOpenRecordingPicker: RequestOpenRecordingPicker,
requestOpenSettings: RequestOpenSettings,
-requestScreenCapturePrewarm: RequestScreenCapturePrewarm,
requestStartRecording: RequestStartRecording,
-targetUnderCursor: TargetUnderCursor
+targetUnderCursor: TargetUnderCursor,
+uploadProgress: UploadProgress
}>({
audioInputLevelChange: "audio-input-level-change",
authenticationInvalid: "authentication-invalid",
@@ -319,11 +306,10 @@ recordingStarted: "recording-started",
recordingStopped: "recording-stopped",
renderFrameEvent: "render-frame-event",
requestNewScreenshot: "request-new-screenshot",
-requestOpenRecordingPicker: "request-open-recording-picker",
requestOpenSettings: "request-open-settings",
-requestScreenCapturePrewarm: "request-screen-capture-prewarm",
requestStartRecording: "request-start-recording",
-targetUnderCursor: "target-under-cursor"
+targetUnderCursor: "target-under-cursor",
+uploadProgress: "upload-progress"
})
/** user-defined constants **/
@@ -345,9 +331,8 @@ start_time?: number | null }
export type AuthSecret = { api_key: string } | { token: string; expires: number }
export type AuthStore = { secret: AuthSecret; user_id: string | null; plan: Plan | null; intercom_hash: string | null }
export type AuthenticationInvalid = null
-export type BackgroundConfiguration = { source: BackgroundSource; blur: number; padding: number; rounding: number; inset: number; crop: Crop | null; shadow?: number; advancedShadow?: ShadowConfiguration | null; border?: BorderConfiguration | null }
+export type BackgroundConfiguration = { source: BackgroundSource; blur: number; padding: number; rounding: number; inset: number; crop: Crop | null; shadow?: number; advancedShadow?: ShadowConfiguration | null }
export type BackgroundSource = { type: "wallpaper"; path: string | null } | { type: "image"; path: string | null } | { type: "color"; value: [number, number, number] } | { type: "gradient"; from: [number, number, number]; to: [number, number, number]; angle?: number }
-export type BorderConfiguration = { enabled: boolean; width: number; color: [number, number, number]; opacity: number }
export type Camera = { hide: boolean; mirror: boolean; position: CameraPosition; size: number; zoom_size: number | null; rounding?: number; shadow?: number; advanced_shadow?: ShadowConfiguration | null; shape?: CameraShape }
export type CameraInfo = { device_id: string; model_id: ModelIDType | null; display_name: string }
export type CameraPosition = { x: CameraXPosition; y: CameraYPosition }
@@ -362,11 +347,7 @@ export type CaptionSegment = { id: string; start: number; end: number; text: str
export type CaptionSettings = { enabled: boolean; font: string; size: number; color: string; backgroundColor: string; backgroundOpacity: number; position: string; bold: boolean; italic: boolean; outline: boolean; outlineColor: string; exportWithSubtitles: boolean }
export type CaptionsData = { segments: CaptionSegment[]; settings: CaptionSettings }
export type CaptureDisplay = { id: DisplayId; name: string; refresh_rate: number }
-export type CaptureDisplayWithThumbnail = { id: DisplayId; name: string; refresh_rate: number; thumbnail: string | null }
export type CaptureWindow = { id: WindowId; owner_name: string; name: string; bounds: LogicalBounds; refresh_rate: number }
-export type CaptureWindowWithThumbnail = { id: WindowId; owner_name: string; name: string; bounds: LogicalBounds; refresh_rate: number; thumbnail: string | null; app_icon: string | null }
-export type ClipConfiguration = { index: number; offsets: ClipOffsets }
-export type ClipOffsets = { camera?: number; mic?: number; system_audio?: number }
export type CommercialLicense = { licenseKey: string; expiryDate: number | null; refresh: number; activatedOn: number }
export type Crop = { position: XY; size: XY }
export type CurrentRecording = { target: CurrentRecordingTarget; mode: RecordingMode }
@@ -402,7 +383,7 @@ fast: boolean | null }
export type HapticPattern = "Alignment" | "LevelChange" | "Generic"
export type HapticPerformanceTime = "Default" | "Now" | "DrawCompleted"
export type Hotkey = { code: string; meta: boolean; ctrl: boolean; alt: boolean; shift: boolean }
-export type HotkeyAction = "startStudioRecording" | "startInstantRecording" | "stopRecording" | "restartRecording" | "openRecordingPicker" | "openRecordingPickerDisplay" | "openRecordingPickerWindow" | "openRecordingPickerArea" | "other"
+export type HotkeyAction = "startRecording" | "stopRecording" | "restartRecording"
export type HotkeysConfiguration = { show: boolean }
export type HotkeysStore = { hotkeys: { [key in HotkeyAction]: Hotkey } }
export type InstantRecordingMeta = { fps: number; sample_rate: number | null }
@@ -429,7 +410,7 @@ export type PostDeletionBehaviour = "doNothing" | "reopenRecordingWindow"
export type PostStudioRecordingBehaviour = "openEditor" | "showOverlay"
export type Preset = { name: string; config: ProjectConfiguration }
export type PresetsStore = { presets: Preset[]; default: number | null }
-export type ProjectConfiguration = { aspectRatio: AspectRatio | null; background: BackgroundConfiguration; camera: Camera; audio: AudioConfiguration; cursor: CursorConfiguration; hotkeys: HotkeysConfiguration; timeline?: TimelineConfiguration | null; captions?: CaptionsData | null; clips?: ClipConfiguration[] }
+export type ProjectConfiguration = { aspectRatio: AspectRatio | null; background: BackgroundConfiguration; camera: Camera; audio: AudioConfiguration; cursor: CursorConfiguration; hotkeys: HotkeysConfiguration; timeline?: TimelineConfiguration | null; captions?: CaptionsData | null }
export type ProjectRecordingsMeta = { segments: SegmentRecordings[] }
export type RecordingDeleted = { path: string }
export type RecordingEvent = { variant: "Countdown"; value: number } | { variant: "Started" } | { variant: "Stopped" } | { variant: "Failed"; error: string }
@@ -437,16 +418,12 @@ export type RecordingMeta = (StudioRecordingMeta | InstantRecordingMeta) & { pla
export type RecordingMetaWithMode = ((StudioRecordingMeta | InstantRecordingMeta) & { platform?: Platform | null; pretty_name: string; sharing?: SharingMeta | null }) & { mode: RecordingMode }
export type RecordingMode = "studio" | "instant"
export type RecordingOptionsChanged = null
-export type RecordingSettingsStore = { target: ScreenCaptureTarget | null; micName: string | null; cameraId: DeviceOrModelID | null; mode: RecordingMode | null; systemAudio: boolean }
export type RecordingStarted = null
export type RecordingStopped = null
-export type RecordingTargetMode = "display" | "window" | "area"
export type RenderFrameEvent = { frame_number: number; fps: number; resolution_base: XY }
export type RequestNewScreenshot = null
-export type RequestOpenRecordingPicker = { target_mode: RecordingTargetMode | null }
export type RequestOpenSettings = { page: string }
-export type RequestScreenCapturePrewarm = { force?: boolean }
-export type RequestStartRecording = { mode: RecordingMode }
+export type RequestStartRecording = null
export type S3UploadMeta = { id: string }
export type SceneMode = "default" | "cameraOnly" | "hideCamera" | "splitView"
export type SceneSegment = { start: number; end: number; mode?: SceneMode; splitViewSettings?: SplitViewSettings | null }
@@ -455,7 +432,7 @@ export type SegmentRecordings = { display: Video; camera: Video | null; mic: Aud
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 ShowCapWindow = "Setup" | "Main" | { 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; screenPosition: XY; cameraSide: SplitViewSide; cameraZoom?: number; screenZoom?: number; fullscreen?: boolean }
export type SplitViewSide = "left" | "right"
diff --git a/apps/discord-bot/package.json b/apps/discord-bot/package.json
index f2b68587ca..96ddf0e7bc 100644
--- a/apps/discord-bot/package.json
+++ b/apps/discord-bot/package.json
@@ -3,7 +3,7 @@
"private": true,
"scripts": {
"deploy": "wrangler deploy",
- "bot-dev": "wrangler dev",
+ "dev": "wrangler dev",
"start": "wrangler dev",
"test": "vitest",
"cf-typegen": "wrangler types"
diff --git a/apps/tasks/package.json b/apps/tasks/package.json
index 2010d34899..30ee20f4d8 100644
--- a/apps/tasks/package.json
+++ b/apps/tasks/package.json
@@ -5,6 +5,7 @@
"main": "src/index.ts",
"scripts": {
"start": "node dist/src/index.js",
+ "dev": "ts-node src/index.ts",
"build": "tsc",
"start:dist": "node dist/src/index.js",
"test": "jest",
diff --git a/apps/web/actions/analytics/track-user-signed-up.ts b/apps/web/actions/analytics/track-user-signed-up.ts
deleted file mode 100644
index 808fbc52c4..0000000000
--- a/apps/web/actions/analytics/track-user-signed-up.ts
+++ /dev/null
@@ -1,53 +0,0 @@
-"use server";
-
-import { db } from "@cap/database";
-import { getCurrentUser } from "@cap/database/auth/session";
-import { users } from "@cap/database/schema";
-import { sql } from "drizzle-orm";
-
-type UserPreferences = {
- notifications?: {
- pauseComments: boolean;
- pauseReplies: boolean;
- pauseViews: boolean;
- pauseReactions: boolean;
- };
- trackedEvents?: {
- user_signed_up?: boolean;
- };
-} | null;
-
-export async function checkAndMarkUserSignedUpTracked(): Promise<{
- shouldTrack: boolean;
-}> {
- const currentUser = await getCurrentUser();
- if (!currentUser) {
- return { shouldTrack: false };
- }
-
- try {
- const prefs = currentUser.preferences as UserPreferences;
- const alreadyTracked = Boolean(prefs?.trackedEvents?.user_signed_up);
-
- if (alreadyTracked) {
- return { shouldTrack: false };
- }
-
- const result = await db()
- .update(users)
- .set({
- preferences: sql`JSON_SET(COALESCE(${users.preferences}, JSON_OBJECT()), '$.trackedEvents.user_signed_up', true)`,
- })
- .where(
- sql`(${users.id} = ${currentUser.id}) AND (${users.created_at} >= CURRENT_DATE()) AND JSON_CONTAINS(COALESCE(${users.preferences}, JSON_OBJECT()), CAST(true AS JSON), '$.trackedEvents.user_signed_up') = 0`,
- );
-
- if (result.rowsAffected && result.rowsAffected > 0) {
- return { shouldTrack: true };
- }
-
- return { shouldTrack: false };
- } catch {
- return { shouldTrack: false };
- }
-}
diff --git a/apps/web/actions/billing/track-meta-purchase.ts b/apps/web/actions/billing/track-meta-purchase.ts
deleted file mode 100644
index c90db45c9f..0000000000
--- a/apps/web/actions/billing/track-meta-purchase.ts
+++ /dev/null
@@ -1,124 +0,0 @@
-"use server";
-
-import { db } from "@cap/database";
-import { getCurrentUser } from "@cap/database/auth/session";
-import { users } from "@cap/database/schema";
-import { stripe } from "@cap/utils";
-import { eq } from "drizzle-orm";
-import type Stripe from "stripe";
-
-export async function getPurchaseForMeta({
- sessionId,
-}: {
- sessionId?: string | null;
-}): Promise<{
- shouldTrack: boolean;
- value?: number;
- currency?: string;
- eventId?: string;
-}> {
- const user = await getCurrentUser();
- if (!user) {
- return { shouldTrack: false };
- }
-
- let subscriptionId: string | undefined;
- let customerId: string | undefined;
- let eventId: string | undefined;
-
- try {
- if (sessionId) {
- const session = await stripe().checkout.sessions.retrieve(sessionId);
- if (!session || session.mode !== "subscription") {
- return { shouldTrack: false };
- }
-
- eventId = session.id;
- customerId = (session.customer as string) || undefined;
-
- if (
- user.stripeCustomerId &&
- customerId &&
- user.stripeCustomerId !== customerId
- ) {
- return { shouldTrack: false };
- }
-
- if (!user.stripeCustomerId && customerId) {
- const customer = await stripe().customers.retrieve(customerId);
- let matches = false;
- if (
- "metadata" in customer &&
- customer.metadata &&
- (customer.metadata as Record).userId ===
- user.id
- ) {
- matches = true;
- } else if (
- "email" in customer &&
- customer.email &&
- customer.email === user.email
- ) {
- matches = true;
- }
- if (!matches) {
- return { shouldTrack: false };
- }
- await db()
- .update(users)
- .set({ stripeCustomerId: customer.id })
- .where(eq(users.id, user.id));
- }
-
- if (session.subscription) {
- subscriptionId = String(session.subscription);
- }
- }
-
- if (!subscriptionId) {
- if (user.stripeSubscriptionId) {
- subscriptionId = user.stripeSubscriptionId;
- } else if (user.stripeCustomerId) {
- const subs = await stripe().subscriptions.list({
- customer: user.stripeCustomerId,
- status: "all",
- limit: 1,
- });
- if (subs.data[0]) subscriptionId = subs.data[0].id;
- }
- }
-
- if (!subscriptionId) {
- return { shouldTrack: false };
- }
-
- const subscription = await stripe().subscriptions.retrieve(subscriptionId);
- const alreadyTracked =
- (subscription.metadata &&
- (subscription.metadata as Record)
- .meta_purchase_tracked === "true") ||
- false;
- if (alreadyTracked) {
- return { shouldTrack: false };
- }
-
- const currency = subscription.items.data[0]?.price?.currency?.toUpperCase();
- const amountCents = subscription.items.data.reduce((acc, item) => {
- const unit = item.price?.unit_amount ?? 0;
- const qty = item.quantity ?? 1;
- return acc + unit * qty;
- }, 0);
- const value = amountCents / 100;
-
- await stripe().subscriptions.update(subscription.id, {
- metadata: {
- ...(subscription.metadata || {}),
- meta_purchase_tracked: "true",
- } as Stripe.MetadataParam,
- });
-
- return { shouldTrack: true, value, currency, eventId };
- } catch {
- return { shouldTrack: false };
- }
-}
diff --git a/apps/web/actions/caps/share.ts b/apps/web/actions/caps/share.ts
index de025712d1..c85d0dedf5 100644
--- a/apps/web/actions/caps/share.ts
+++ b/apps/web/actions/caps/share.ts
@@ -11,12 +11,11 @@ import {
spaceVideos,
videos,
} from "@cap/database/schema";
-import type { Video } from "@cap/web-domain";
import { and, eq, inArray } from "drizzle-orm";
import { revalidatePath } from "next/cache";
interface ShareCapParams {
- capId: Video.VideoId;
+ capId: string;
spaceIds: string[];
public?: boolean;
}
diff --git a/apps/web/actions/folders/moveVideoToFolder.ts b/apps/web/actions/folders/moveVideoToFolder.ts
index 86a88fbbdd..469dc43e0f 100644
--- a/apps/web/actions/folders/moveVideoToFolder.ts
+++ b/apps/web/actions/folders/moveVideoToFolder.ts
@@ -3,7 +3,6 @@
import { db } from "@cap/database";
import { getCurrentUser } from "@cap/database/auth/session";
import { folders, spaceVideos, videos } from "@cap/database/schema";
-import type { Folder, Video } from "@cap/web-domain";
import { and, eq } from "drizzle-orm";
import { revalidatePath } from "next/cache";
@@ -12,8 +11,8 @@ export async function moveVideoToFolder({
folderId,
spaceId,
}: {
- videoId: Video.VideoId;
- folderId: Folder.FolderId | null;
+ videoId: string;
+ folderId: string | null;
spaceId?: string | null;
}) {
const user = await getCurrentUser();
@@ -24,7 +23,7 @@ export async function moveVideoToFolder({
// Get the current video to know its original folder
const [currentVideo] = await db()
- .select({ folderId: videos.folderId, id: videos.id })
+ .select({ folderId: videos.folderId })
.from(videos)
.where(eq(videos.id, videoId));
diff --git a/apps/web/actions/folders/updateFolder.ts b/apps/web/actions/folders/updateFolder.ts
index ff1548f57b..c5ad958fb5 100644
--- a/apps/web/actions/folders/updateFolder.ts
+++ b/apps/web/actions/folders/updateFolder.ts
@@ -3,7 +3,6 @@
import { db } from "@cap/database";
import { getCurrentUser } from "@cap/database/auth/session";
import { folders } from "@cap/database/schema";
-import type { Folder } from "@cap/web-domain";
import { and, eq } from "drizzle-orm";
import { revalidatePath } from "next/cache";
@@ -13,10 +12,10 @@ export async function updateFolder({
color,
parentId,
}: {
- folderId: Folder.FolderId;
+ folderId: string;
name?: string;
color?: "normal" | "blue" | "red" | "yellow";
- parentId?: Folder.FolderId | null;
+ parentId?: string | null;
}) {
const user = await getCurrentUser();
if (!user || !user.activeOrganizationId)
diff --git a/apps/web/actions/organization/create-space.ts b/apps/web/actions/organization/create-space.ts
index 552344f1a4..fceff5a72f 100644
--- a/apps/web/actions/organization/create-space.ts
+++ b/apps/web/actions/organization/create-space.ts
@@ -5,12 +5,10 @@ import { getCurrentUser } from "@cap/database/auth/session";
import { nanoId, nanoIdLength } from "@cap/database/helpers";
import { spaceMembers, spaces, users } from "@cap/database/schema";
import { serverEnv } from "@cap/env";
-import { S3Buckets } from "@cap/web-backend";
import { and, eq, inArray } from "drizzle-orm";
-import { Effect, Option } from "effect";
import { revalidatePath } from "next/cache";
import { v4 as uuidv4 } from "uuid";
-import { runPromise } from "@/lib/server";
+import { createBucketProvider } from "@/utils/s3";
interface CreateSpaceResponse {
success: boolean;
@@ -91,29 +89,25 @@ export async function createSpace(
user.activeOrganizationId
}/spaces/${spaceId}/icon-${Date.now()}.${fileExtension}`;
- await Effect.gen(function* () {
- const [bucket] = yield* S3Buckets.getBucketAccess(Option.none());
-
- yield* bucket.putObject(
- fileKey,
- yield* Effect.promise(() => iconFile.bytes()),
- { contentType: iconFile.type },
- );
-
- // Construct the icon URL
- if (serverEnv().CAP_AWS_BUCKET_URL) {
- // If a custom bucket URL is defined, use it
- iconUrl = `${serverEnv().CAP_AWS_BUCKET_URL}/${fileKey}`;
- } else if (serverEnv().CAP_AWS_ENDPOINT) {
- // For custom endpoints like MinIO
- iconUrl = `${serverEnv().CAP_AWS_ENDPOINT}/${bucket.bucketName}/${fileKey}`;
- } else {
- // Default AWS S3 URL format
- iconUrl = `https://${bucket.bucketName}.s3.${
- serverEnv().CAP_AWS_REGION || "us-east-1"
- }.amazonaws.com/${fileKey}`;
- }
- }).pipe(runPromise);
+ const bucket = await createBucketProvider();
+
+ await bucket.putObject(fileKey, await iconFile.bytes(), {
+ contentType: iconFile.type,
+ });
+
+ // Construct the icon URL
+ if (serverEnv().CAP_AWS_BUCKET_URL) {
+ // If a custom bucket URL is defined, use it
+ iconUrl = `${serverEnv().CAP_AWS_BUCKET_URL}/${fileKey}`;
+ } else if (serverEnv().CAP_AWS_ENDPOINT) {
+ // For custom endpoints like MinIO
+ iconUrl = `${serverEnv().CAP_AWS_ENDPOINT}/${bucket.name}/${fileKey}`;
+ } else {
+ // Default AWS S3 URL format
+ iconUrl = `https://${bucket.name}.s3.${
+ serverEnv().CAP_AWS_REGION || "us-east-1"
+ }.amazonaws.com/${fileKey}`;
+ }
} catch (error) {
console.error("Error uploading space icon:", error);
return {
@@ -172,9 +166,7 @@ export async function createSpace(
if (!userId) return null;
// Creator is always Owner, others are Member
const role =
- email.toLowerCase() === creatorEmail
- ? ("Admin" as const)
- : ("member" as const);
+ email.toLowerCase() === creatorEmail ? "Admin" : "Member";
return {
id: uuidv4().substring(0, nanoIdLength),
spaceId,
diff --git a/apps/web/actions/organization/delete-space.ts b/apps/web/actions/organization/delete-space.ts
index 066222621b..37c6588ad4 100644
--- a/apps/web/actions/organization/delete-space.ts
+++ b/apps/web/actions/organization/delete-space.ts
@@ -8,11 +8,9 @@ import {
spaces,
spaceVideos,
} from "@cap/database/schema";
-import { S3Buckets } from "@cap/web-backend";
import { eq } from "drizzle-orm";
-import { Effect, Option } from "effect";
import { revalidatePath } from "next/cache";
-import { runPromise } from "@/lib/server";
+import { createBucketProvider } from "@/utils/s3";
interface DeleteSpaceResponse {
success: boolean;
@@ -69,27 +67,25 @@ export async function deleteSpace(
// 4. Delete space icons from S3
try {
- await Effect.gen(function* () {
- const [bucket] = yield* S3Buckets.getBucketAccess(Option.none());
-
- const listedObjects = yield* bucket.listObjects({
- prefix: `organizations/${user.activeOrganizationId}/spaces/${spaceId}/`,
- });
-
- if (listedObjects.Contents?.length) {
- yield* bucket.deleteObjects(
- listedObjects.Contents.map((content) => ({
- Key: content.Key,
- })),
- );
-
- console.log(
- `Deleted ${listedObjects.Contents.length} objects for space ${spaceId}`,
- );
- }
- }).pipe(runPromise);
+ const bucketProvider = await createBucketProvider();
// List all objects with the space prefix
+
+ const listedObjects = await bucketProvider.listObjects({
+ prefix: `organizations/${user.activeOrganizationId}/spaces/${spaceId}/`,
+ });
+
+ if (listedObjects.Contents?.length) {
+ await bucketProvider.deleteObjects(
+ listedObjects.Contents.map((content) => ({
+ Key: content.Key,
+ })),
+ );
+
+ console.log(
+ `Deleted ${listedObjects.Contents.length} objects for space ${spaceId}`,
+ );
+ }
} catch (error) {
console.error("Error deleting space icons from S3:", error);
// Continue with space deletion even if S3 deletion fails
diff --git a/apps/web/actions/organization/update-space.ts b/apps/web/actions/organization/update-space.ts
index ab6237d0bd..3c7ede3feb 100644
--- a/apps/web/actions/organization/update-space.ts
+++ b/apps/web/actions/organization/update-space.ts
@@ -4,12 +4,10 @@ import { db } from "@cap/database";
import { getCurrentUser } from "@cap/database/auth/session";
import { nanoIdLength } from "@cap/database/helpers";
import { spaceMembers, spaces } from "@cap/database/schema";
-import { S3Buckets } from "@cap/web-backend";
import { and, eq } from "drizzle-orm";
-import { Effect, Option } from "effect";
import { revalidatePath } from "next/cache";
import { v4 as uuidv4 } from "uuid";
-import { runPromise } from "@/lib/server";
+import { createBucketProvider } from "@/utils/s3";
import { uploadSpaceIcon } from "./upload-space-icon";
export async function updateSpace(formData: FormData) {
@@ -50,18 +48,14 @@ export async function updateSpace(formData: FormData) {
// Remove icon from S3 and set iconUrl to null
const spaceArr = await db().select().from(spaces).where(eq(spaces.id, id));
const space = spaceArr[0];
- if (space?.iconUrl) {
- const key = space.iconUrl.match(/organizations\/.+/)?.[0];
-
- if (key) {
- try {
- await Effect.gen(function* () {
- const [bucket] = yield* S3Buckets.getBucketAccess(Option.none());
- yield* bucket.deleteObject(key);
- }).pipe(runPromise);
- } catch (e) {
- console.warn("Failed to delete old space icon from S3", e);
- }
+ if (space && space.iconUrl) {
+ try {
+ const bucketProvider = await createBucketProvider();
+ const prevKeyMatch = space.iconUrl.match(/organizations\/.+/);
+ if (prevKeyMatch && prevKeyMatch[0])
+ await bucketProvider.deleteObject(prevKeyMatch[0]);
+ } catch (e) {
+ console.warn("Failed to delete old space icon from S3", e);
}
}
await db().update(spaces).set({ iconUrl: null }).where(eq(spaces.id, id));
diff --git a/apps/web/actions/organization/upload-organization-icon.ts b/apps/web/actions/organization/upload-organization-icon.ts
index 485418da7c..2c143a75c9 100644
--- a/apps/web/actions/organization/upload-organization-icon.ts
+++ b/apps/web/actions/organization/upload-organization-icon.ts
@@ -4,14 +4,12 @@ import { db } from "@cap/database";
import { getCurrentUser } from "@cap/database/auth/session";
import { organizations } from "@cap/database/schema";
import { serverEnv } from "@cap/env";
-import { S3Buckets } from "@cap/web-backend";
import DOMPurify from "dompurify";
import { eq } from "drizzle-orm";
-import { Effect, Option } from "effect";
import { JSDOM } from "jsdom";
import { revalidatePath } from "next/cache";
import { sanitizeFile } from "@/lib/sanitizeFile";
-import { runPromise } from "@/lib/server";
+import { createBucketProvider } from "@/utils/s3";
export async function uploadOrganizationIcon(
formData: FormData,
@@ -58,30 +56,27 @@ export async function uploadOrganizationIcon(
try {
const sanitizedFile = await sanitizeFile(file);
- let iconUrl: string | undefined;
-
- await Effect.gen(function* () {
- const [bucket] = yield* S3Buckets.getBucketAccess(Option.none());
-
- yield* bucket.putObject(
- fileKey,
- yield* Effect.promise(() => sanitizedFile.bytes()),
- { contentType: file.type },
- );
- // Construct the icon URL
- if (serverEnv().CAP_AWS_BUCKET_URL) {
- // If a custom bucket URL is defined, use it
- iconUrl = `${serverEnv().CAP_AWS_BUCKET_URL}/${fileKey}`;
- } else if (serverEnv().CAP_AWS_ENDPOINT) {
- // For custom endpoints like MinIO
- iconUrl = `${serverEnv().CAP_AWS_ENDPOINT}/${bucket.bucketName}/${fileKey}`;
- } else {
- // Default AWS S3 URL format
- iconUrl = `https://${bucket.bucketName}.s3.${
- serverEnv().CAP_AWS_REGION || "us-east-1"
- }.amazonaws.com/${fileKey}`;
- }
- }).pipe(runPromise);
+
+ const bucket = await createBucketProvider();
+
+ await bucket.putObject(fileKey, await sanitizedFile.bytes(), {
+ contentType: file.type,
+ });
+
+ // Construct the icon URL
+ let iconUrl;
+ if (serverEnv().CAP_AWS_BUCKET_URL) {
+ // If a custom bucket URL is defined, use it
+ iconUrl = `${serverEnv().CAP_AWS_BUCKET_URL}/${fileKey}`;
+ } else if (serverEnv().CAP_AWS_ENDPOINT) {
+ // For custom endpoints like MinIO
+ iconUrl = `${serverEnv().CAP_AWS_ENDPOINT}/${bucket.name}/${fileKey}`;
+ } else {
+ // Default AWS S3 URL format
+ iconUrl = `https://${bucket.name}.s3.${
+ serverEnv().CAP_AWS_REGION || "us-east-1"
+ }.amazonaws.com/${fileKey}`;
+ }
// Update organization with new icon URL
await db()
diff --git a/apps/web/actions/organization/upload-space-icon.ts b/apps/web/actions/organization/upload-space-icon.ts
index e56c92b5a6..e3a93464c1 100644
--- a/apps/web/actions/organization/upload-space-icon.ts
+++ b/apps/web/actions/organization/upload-space-icon.ts
@@ -4,12 +4,10 @@ import { db } from "@cap/database";
import { getCurrentUser } from "@cap/database/auth/session";
import { spaces } from "@cap/database/schema";
import { serverEnv } from "@cap/env";
-import { S3Buckets } from "@cap/web-backend";
import { eq } from "drizzle-orm";
-import { Effect, Option } from "effect";
import { revalidatePath } from "next/cache";
import { sanitizeFile } from "@/lib/sanitizeFile";
-import { runPromise } from "@/lib/server";
+import { createBucketProvider } from "@/utils/s3";
export async function uploadSpaceIcon(formData: FormData, spaceId: string) {
const user = await getCurrentUser();
@@ -54,18 +52,16 @@ export async function uploadSpaceIcon(formData: FormData, spaceId: string) {
space.organizationId
}/spaces/${spaceId}/icon-${Date.now()}.${fileExtension}`;
- const [bucket] = await S3Buckets.getBucketAccess(Option.none()).pipe(
- runPromise,
- );
+ const bucket = await createBucketProvider();
try {
// Remove previous icon if exists
if (space.iconUrl) {
// Try to extract the previous S3 key from the URL
- const key = space.iconUrl.match(/organizations\/.+/)?.[0];
- if (key) {
+ const prevKeyMatch = space.iconUrl.match(/organizations\/.+/);
+ if (prevKeyMatch && prevKeyMatch[0]) {
try {
- await bucket.deleteObject(key).pipe(runPromise);
+ await bucket.deleteObject(prevKeyMatch[0]);
} catch (e) {
// Log and continue
console.warn("Failed to delete old space icon from S3", e);
@@ -75,23 +71,18 @@ export async function uploadSpaceIcon(formData: FormData, spaceId: string) {
const sanitizedFile = await sanitizeFile(file);
- await bucket
- .putObject(
- fileKey,
- Effect.promise(() => sanitizedFile.bytes()),
- { contentType: file.type },
- )
- .pipe(runPromise);
-
- let iconUrl: string | undefined;
+ await bucket.putObject(fileKey, await sanitizedFile.bytes(), {
+ contentType: file.type,
+ });
// Construct the icon URL
+ let iconUrl;
if (serverEnv().CAP_AWS_BUCKET_URL) {
iconUrl = `${serverEnv().CAP_AWS_BUCKET_URL}/${fileKey}`;
} else if (serverEnv().CAP_AWS_ENDPOINT) {
- iconUrl = `${serverEnv().CAP_AWS_ENDPOINT}/${bucket.bucketName}/${fileKey}`;
+ iconUrl = `${serverEnv().CAP_AWS_ENDPOINT}/${bucket.name}/${fileKey}`;
} else {
- iconUrl = `https://${bucket.bucketName}.s3.${
+ iconUrl = `https://${bucket.name}.s3.${
serverEnv().CAP_AWS_REGION || "us-east-1"
}.amazonaws.com/${fileKey}`;
}
diff --git a/apps/web/actions/organizations/add-videos.ts b/apps/web/actions/organizations/add-videos.ts
index 3571238088..080a4ea1e4 100644
--- a/apps/web/actions/organizations/add-videos.ts
+++ b/apps/web/actions/organizations/add-videos.ts
@@ -9,13 +9,12 @@ import {
sharedVideos,
videos,
} from "@cap/database/schema";
-import type { Video } from "@cap/web-domain";
import { and, eq, inArray } from "drizzle-orm";
import { revalidatePath } from "next/cache";
export async function addVideosToOrganization(
organizationId: string,
- videoIds: Video.VideoId[],
+ videoIds: string[],
) {
try {
const user = await getCurrentUser();
diff --git a/apps/web/actions/organizations/remove-videos.ts b/apps/web/actions/organizations/remove-videos.ts
index 307384fc39..bfebb3e9cc 100644
--- a/apps/web/actions/organizations/remove-videos.ts
+++ b/apps/web/actions/organizations/remove-videos.ts
@@ -9,13 +9,12 @@ import {
sharedVideos,
videos,
} from "@cap/database/schema";
-import type { Video } from "@cap/web-domain";
import { and, eq, inArray } from "drizzle-orm";
import { revalidatePath } from "next/cache";
export async function removeVideosFromOrganization(
organizationId: string,
- videoIds: Video.VideoId[],
+ videoIds: string[],
) {
try {
const user = await getCurrentUser();
diff --git a/apps/web/actions/screenshots/get-screenshot.ts b/apps/web/actions/screenshots/get-screenshot.ts
new file mode 100644
index 0000000000..b6bc3f3458
--- /dev/null
+++ b/apps/web/actions/screenshots/get-screenshot.ts
@@ -0,0 +1,67 @@
+import { db } from "@cap/database";
+import { getCurrentUser } from "@cap/database/auth/session";
+import { s3Buckets, videos } from "@cap/database/schema";
+import { buildEnv, serverEnv } from "@cap/env";
+import { S3_BUCKET_URL } from "@cap/utils";
+import { eq } from "drizzle-orm";
+import { createBucketProvider } from "@/utils/s3";
+
+export async function getScreenshot(userId: string, screenshotId: string) {
+ if (!userId || !screenshotId) {
+ throw new Error("userId or screenshotId not supplied");
+ }
+
+ const query = await db()
+ .select({ video: videos, bucket: s3Buckets })
+ .from(videos)
+ .leftJoin(s3Buckets, eq(videos.bucket, s3Buckets.id))
+ .where(eq(videos.id, screenshotId));
+
+ if (query.length === 0) {
+ throw new Error("Video does not exist");
+ }
+
+ const result = query[0];
+ if (!result?.video) {
+ throw new Error("Video not found");
+ }
+
+ const { video, bucket } = result;
+
+ if (video.public === false) {
+ const user = await getCurrentUser();
+
+ if (!user || user.id !== video.ownerId) {
+ throw new Error("Video is not public");
+ }
+ }
+
+ const bucketProvider = await createBucketProvider(bucket);
+ const screenshotPrefix = `${userId}/${screenshotId}/`;
+
+ try {
+ const objects = await bucketProvider.listObjects({
+ prefix: screenshotPrefix,
+ });
+
+ const screenshot = objects.Contents?.find((object) =>
+ object.Key?.endsWith(".png"),
+ );
+
+ if (!screenshot) {
+ throw new Error("Screenshot not found");
+ }
+
+ let screenshotUrl: string;
+
+ if (video.awsBucket !== serverEnv().CAP_AWS_BUCKET) {
+ screenshotUrl = await bucketProvider.getSignedObjectUrl(screenshot.Key!);
+ } else {
+ screenshotUrl = `${S3_BUCKET_URL}/${screenshot.Key}`;
+ }
+
+ return { url: screenshotUrl };
+ } catch (error) {
+ throw new Error(`Error generating screenshot URL: ${error}`);
+ }
+}
diff --git a/apps/web/actions/spaces/add-videos.ts b/apps/web/actions/spaces/add-videos.ts
index 0e5e77aec5..651d88cdb8 100644
--- a/apps/web/actions/spaces/add-videos.ts
+++ b/apps/web/actions/spaces/add-videos.ts
@@ -4,14 +4,10 @@ import { db } from "@cap/database";
import { getCurrentUser } from "@cap/database/auth/session";
import { nanoId } from "@cap/database/helpers";
import { spaces, spaceVideos, videos } from "@cap/database/schema";
-import type { Video } from "@cap/web-domain";
import { and, eq, inArray } from "drizzle-orm";
import { revalidatePath } from "next/cache";
-export async function addVideosToSpace(
- spaceId: string,
- videoIds: Video.VideoId[],
-) {
+export async function addVideosToSpace(spaceId: string, videoIds: string[]) {
try {
const user = await getCurrentUser();
diff --git a/apps/web/actions/spaces/remove-videos.ts b/apps/web/actions/spaces/remove-videos.ts
index 0f252bfc9d..27454f3b84 100644
--- a/apps/web/actions/spaces/remove-videos.ts
+++ b/apps/web/actions/spaces/remove-videos.ts
@@ -3,13 +3,12 @@
import { db } from "@cap/database";
import { getCurrentUser } from "@cap/database/auth/session";
import { folders, spaceVideos, videos } from "@cap/database/schema";
-import type { Video } from "@cap/web-domain";
import { and, eq, inArray } from "drizzle-orm";
import { revalidatePath } from "next/cache";
export async function removeVideosFromSpace(
spaceId: string,
- videoIds: Video.VideoId[],
+ videoIds: string[],
) {
try {
const user = await getCurrentUser();
diff --git a/apps/web/actions/video/upload.ts b/apps/web/actions/video/upload.ts
index 9bcd05a7c9..d6dc394a30 100644
--- a/apps/web/actions/video/upload.ts
+++ b/apps/web/actions/video/upload.ts
@@ -7,16 +7,13 @@ import {
import { db } from "@cap/database";
import { getCurrentUser } from "@cap/database/auth/session";
import { nanoId } from "@cap/database/helpers";
-import { s3Buckets, videos, videoUploads } from "@cap/database/schema";
+import { s3Buckets, videos } from "@cap/database/schema";
import { buildEnv, NODE_ENV, serverEnv } from "@cap/env";
import { userIsPro } from "@cap/utils";
-import { S3Buckets } from "@cap/web-backend";
-import { type Folder, Video } from "@cap/web-domain";
import { eq } from "drizzle-orm";
-import { Effect, Option } from "effect";
import { revalidatePath } from "next/cache";
-import { runPromise } from "@/lib/server";
import { dub } from "@/utils/dub";
+import { createBucketProvider } from "@/utils/s3";
async function getVideoUploadPresignedUrl({
fileKey,
@@ -88,6 +85,8 @@ async function getVideoUploadPresignedUrl({
}
}
+ const bucket = await createBucketProvider(customBucket);
+
const contentType = fileKey.endsWith(".aac")
? "audio/aac"
: fileKey.endsWith(".webm")
@@ -109,27 +108,19 @@ async function getVideoUploadPresignedUrl({
"x-amz-meta-audiocodec": audioCodec ?? "",
};
- const presignedPostData = await Effect.gen(function* () {
- const [bucket] = yield* S3Buckets.getBucketAccess(
- Option.fromNullable(customBucket?.id),
- );
-
- const presignedPostData = yield* bucket.getPresignedPostUrl(fileKey, {
- Fields,
- Expires: 1800,
- });
+ const presignedPostData = await bucket.getPresignedPostUrl(fileKey, {
+ Fields,
+ Expires: 1800,
+ });
- const customEndpoint = serverEnv().CAP_AWS_ENDPOINT;
- if (customEndpoint && !customEndpoint.includes("amazonaws.com")) {
- if (serverEnv().S3_PATH_STYLE) {
- presignedPostData.url = `${customEndpoint}/${bucket.bucketName}`;
- } else {
- presignedPostData.url = customEndpoint;
- }
+ const customEndpoint = serverEnv().CAP_AWS_ENDPOINT;
+ if (customEndpoint && !customEndpoint.includes("amazonaws.com")) {
+ if (serverEnv().S3_PATH_STYLE) {
+ presignedPostData.url = `${customEndpoint}/${bucket.name}`;
+ } else {
+ presignedPostData.url = customEndpoint;
}
-
- return presignedPostData;
- }).pipe(runPromise);
+ }
const videoId = fileKey.split("/")[1];
if (videoId) {
@@ -164,17 +155,15 @@ export async function createVideoAndGetUploadUrl({
isScreenshot = false,
isUpload = false,
folderId,
- orgId,
}: {
- videoId?: Video.VideoId;
+ videoId?: string;
duration?: number;
resolution?: string;
videoCodec?: string;
audioCodec?: string;
isScreenshot?: boolean;
isUpload?: boolean;
- folderId?: Folder.FolderId;
- orgId: string;
+ folderId?: string;
}) {
const user = await getCurrentUser();
@@ -222,7 +211,9 @@ export async function createVideoAndGetUploadUrl({
}
}
- const idToUse = Video.VideoId.make(videoId || nanoId());
+ const idToUse = videoId || nanoId();
+
+ const bucket = await createBucketProvider(customBucket);
const videoData = {
id: idToUse,
@@ -230,7 +221,7 @@ export async function createVideoAndGetUploadUrl({
isScreenshot ? "Screenshot" : isUpload ? "Upload" : "Recording"
} - ${formattedDate}`,
ownerId: user.id,
- orgId,
+ awsBucket: bucket.name,
source: { type: "desktopMP4" as const },
isScreenshot,
bucket: customBucket?.id,
@@ -240,10 +231,6 @@ export async function createVideoAndGetUploadUrl({
await db().insert(videos).values(videoData);
- await db().insert(videoUploads).values({
- videoId: idToUse,
- });
-
const fileKey = `${user.id}/${idToUse}/${
isScreenshot ? "screenshot/screen-capture.jpg" : "result.mp4"
}`;
diff --git a/apps/web/actions/videos/download.ts b/apps/web/actions/videos/download.ts
index 13acff3232..a32ae5afd3 100644
--- a/apps/web/actions/videos/download.ts
+++ b/apps/web/actions/videos/download.ts
@@ -3,13 +3,10 @@
import { db } from "@cap/database";
import { getCurrentUser } from "@cap/database/auth/session";
import { videos } from "@cap/database/schema";
-import { S3Buckets } from "@cap/web-backend";
-import type { Video } from "@cap/web-domain";
import { eq } from "drizzle-orm";
-import { Effect, Option } from "effect";
-import { runPromise } from "@/lib/server";
+import { createBucketProvider } from "@/utils/s3";
-export async function downloadVideo(videoId: Video.VideoId) {
+export async function downloadVideo(videoId: string) {
const user = await getCurrentUser();
if (!user || !videoId) {
@@ -33,14 +30,10 @@ export async function downloadVideo(videoId: Video.VideoId) {
}
try {
+ const bucketProvider = await createBucketProvider();
const videoKey = `${video.ownerId}/${videoId}/result.mp4`;
- const downloadUrl = await Effect.gen(function* () {
- const [bucket] = yield* S3Buckets.getBucketAccess(
- Option.fromNullable(video.bucket),
- );
- return yield* bucket.getSignedObjectUrl(videoKey);
- }).pipe(runPromise);
+ const downloadUrl = await bucketProvider.getSignedObjectUrl(videoKey);
return {
success: true,
diff --git a/apps/web/actions/videos/edit-date.ts b/apps/web/actions/videos/edit-date.ts
index 1d3565cb69..d0ebbfae77 100644
--- a/apps/web/actions/videos/edit-date.ts
+++ b/apps/web/actions/videos/edit-date.ts
@@ -4,11 +4,10 @@ import { db } from "@cap/database";
import { getCurrentUser } from "@cap/database/auth/session";
import { videos } from "@cap/database/schema";
import type { VideoMetadata } from "@cap/database/types";
-import type { Video } from "@cap/web-domain";
import { eq } from "drizzle-orm";
import { revalidatePath } from "next/cache";
-export async function editDate(videoId: Video.VideoId, date: string) {
+export async function editDate(videoId: string, date: string) {
const user = await getCurrentUser();
if (!user || !date || !videoId) {
diff --git a/apps/web/actions/videos/edit-title.ts b/apps/web/actions/videos/edit-title.ts
index d88a267d59..7760ebac34 100644
--- a/apps/web/actions/videos/edit-title.ts
+++ b/apps/web/actions/videos/edit-title.ts
@@ -3,11 +3,10 @@
import { db } from "@cap/database";
import { getCurrentUser } from "@cap/database/auth/session";
import { videos } from "@cap/database/schema";
-import type { Video } from "@cap/web-domain";
import { eq } from "drizzle-orm";
import { revalidatePath } from "next/cache";
-export async function editTitle(videoId: Video.VideoId, title: string) {
+export async function editTitle(videoId: string, title: string) {
const user = await getCurrentUser();
if (!user || !title || !videoId) {
diff --git a/apps/web/actions/videos/edit-transcript.ts b/apps/web/actions/videos/edit-transcript.ts
index 4cd630a2b8..038363824a 100644
--- a/apps/web/actions/videos/edit-transcript.ts
+++ b/apps/web/actions/videos/edit-transcript.ts
@@ -1,17 +1,15 @@
"use server";
+import { GetObjectCommand, PutObjectCommand } from "@aws-sdk/client-s3";
import { db } from "@cap/database";
import { getCurrentUser } from "@cap/database/auth/session";
import { s3Buckets, videos } from "@cap/database/schema";
-import { S3Buckets } from "@cap/web-backend";
-import type { Video } from "@cap/web-domain";
import { eq } from "drizzle-orm";
-import { Effect, Option } from "effect";
import { revalidatePath } from "next/cache";
-import { runPromise } from "@/lib/server";
+import { createBucketProvider } from "@/utils/s3";
export async function editTranscriptEntry(
- videoId: Video.VideoId,
+ videoId: string,
entryId: number,
newText: string,
): Promise<{ success: boolean; message: string }> {
@@ -52,28 +50,20 @@ export async function editTranscriptEntry(
};
}
- const [bucket] = await S3Buckets.getBucketAccess(
- Option.fromNullable(result.bucket?.id),
- ).pipe(runPromise);
+ const bucket = await createBucketProvider(result.bucket);
try {
const transcriptKey = `${video.ownerId}/${videoId}/transcription.vtt`;
- const vttContent = await bucket.getObject(transcriptKey).pipe(runPromise);
- if (Option.isNone(vttContent))
+ const vttContent = await bucket.getObject(transcriptKey);
+ if (!vttContent)
return { success: false, message: "Transcript file not found" };
- const updatedVttContent = updateVttEntry(
- vttContent.value,
- entryId,
- newText,
- );
-
- await bucket
- .putObject(transcriptKey, updatedVttContent, {
- contentType: "text/vtt",
- })
- .pipe(runPromise);
+ const updatedVttContent = updateVttEntry(vttContent, entryId, newText);
+
+ await bucket.putObject(transcriptKey, updatedVttContent, {
+ contentType: "text/vtt",
+ });
revalidatePath(`/s/${videoId}`);
diff --git a/apps/web/actions/videos/generate-ai-metadata.ts b/apps/web/actions/videos/generate-ai-metadata.ts
index 80d987fcb0..744d4d7cc9 100644
--- a/apps/web/actions/videos/generate-ai-metadata.ts
+++ b/apps/web/actions/videos/generate-ai-metadata.ts
@@ -1,20 +1,15 @@
"use server";
+import { GetObjectCommand } from "@aws-sdk/client-s3";
+import { getSignedUrl } from "@aws-sdk/s3-request-presigner";
import { db } from "@cap/database";
import { s3Buckets, videos } from "@cap/database/schema";
import type { VideoMetadata } from "@cap/database/types";
import { serverEnv } from "@cap/env";
-import { S3Buckets } from "@cap/web-backend";
-import type { Video } from "@cap/web-domain";
import { eq } from "drizzle-orm";
-import { Effect, Option } from "effect";
import { GROQ_MODEL, getGroqClient } from "@/lib/groq-client";
-import { runPromise } from "@/lib/server";
-
-export async function generateAiMetadata(
- videoId: Video.VideoId,
- userId: string,
-) {
+import { createBucketProvider } from "@/utils/s3";
+export async function generateAiMetadata(videoId: string, userId: string) {
const groqClient = getGroqClient();
if (!groqClient && !serverEnv().OPENAI_API_KEY) {
console.error(
@@ -121,25 +116,27 @@ export async function generateAiMetadata(
const { video } = row;
- const vtt = await Effect.gen(function* () {
- const [bucket] = yield* S3Buckets.getBucketAccess(
- Option.fromNullable(row.bucket?.id),
+ const awsBucket = video.awsBucket;
+ if (!awsBucket) {
+ console.error(
+ `[generateAiMetadata] AWS bucket not found for video ${videoId}`,
);
+ throw new Error(`AWS bucket not found for video ${videoId}`);
+ }
+
+ const bucket = await createBucketProvider(row.bucket);
- return yield* bucket.getObject(`${userId}/${videoId}/transcription.vtt`);
- }).pipe(runPromise);
+ const transcriptKey = `${userId}/${videoId}/transcription.vtt`;
+ const vtt = await bucket.getObject(transcriptKey);
- if (Option.isNone(vtt)) {
- console.error(`[generateAiMetadata] Transcript is empty`);
- throw new Error("Transcript is empty");
- } else if (vtt.value.length < 10) {
+ if (!vtt || vtt.length < 10) {
console.error(
- `[generateAiMetadata] Transcript is too short (${vtt.value.length} chars)`,
+ `[generateAiMetadata] Transcript is empty or too short (${vtt?.length} chars)`,
);
- throw new Error("Transcript is too short");
+ throw new Error("Transcript is empty or too short");
}
- const transcriptText = vtt.value
+ const transcriptText = vtt
.split("\n")
.filter(
(l) =>
diff --git a/apps/web/actions/videos/get-og-image.tsx b/apps/web/actions/videos/get-og-image.tsx
index cc10ffac5a..0eafb0aa8a 100644
--- a/apps/web/actions/videos/get-og-image.tsx
+++ b/apps/web/actions/videos/get-og-image.tsx
@@ -1,13 +1,10 @@
import { db } from "@cap/database";
import { s3Buckets, videos } from "@cap/database/schema";
-import { S3Buckets } from "@cap/web-backend";
-import type { Video } from "@cap/web-domain";
import { eq } from "drizzle-orm";
-import { Effect, Option } from "effect";
import { ImageResponse } from "next/og";
-import { runPromise } from "@/lib/server";
+import { createBucketProvider } from "@/utils/s3";
-export async function generateVideoOgImage(videoId: Video.VideoId) {
+export async function generateVideoOgImage(videoId: string) {
const videoData = await getData(videoId);
if (!videoData) {
@@ -60,17 +57,13 @@ export async function generateVideoOgImage(videoId: Video.VideoId) {
);
}
+ const bucket = await createBucketProvider(videoData.bucket);
+
const screenshotKey = `${video.ownerId}/${video.id}/screenshot/screen-capture.jpg`;
let screenshotUrl = null;
try {
- await Effect.gen(function* () {
- const [bucket] = yield* S3Buckets.getBucketAccess(
- Option.fromNullable(videoData.bucket?.id),
- );
-
- screenshotUrl = yield* bucket.getSignedObjectUrl(screenshotKey);
- }).pipe(runPromise);
+ screenshotUrl = await bucket.getSignedObjectUrl(screenshotKey);
} catch (error) {
console.error("Error generating URL for screenshot:", error);
}
@@ -152,7 +145,7 @@ export async function generateVideoOgImage(videoId: Video.VideoId) {
);
}
-async function getData(videoId: Video.VideoId) {
+async function getData(videoId: string) {
const query = await db()
.select({
video: videos,
diff --git a/apps/web/actions/videos/get-status.ts b/apps/web/actions/videos/get-status.ts
index eb4a0d8cd2..ac73e509ac 100644
--- a/apps/web/actions/videos/get-status.ts
+++ b/apps/web/actions/videos/get-status.ts
@@ -16,10 +16,11 @@ const MAX_AI_PROCESSING_TIME = 10 * 60 * 1000;
export interface VideoStatusResult {
transcriptionStatus: "PROCESSING" | "COMPLETE" | "ERROR" | null;
- aiTitle: string | null;
aiProcessing: boolean;
+ aiTitle: string | null;
summary: string | null;
chapters: { title: string; start: number }[] | null;
+ // generationError: string | null;
error?: string;
}
@@ -179,8 +180,7 @@ export async function getVideoStatus(
);
} catch (error) {
console.error(
- "[Get Status] Error generating AI metadata for video %s",
- videoId,
+ `[Get Status] Error generating AI metadata for video ${videoId}:`,
error,
);
@@ -198,14 +198,15 @@ export async function getVideoStatus(
metadata: {
...currentMetadata,
aiProcessing: false,
+ // generationError:
+ // error instanceof Error ? error.message : String(error),
},
})
.where(eq(videos.id, videoId));
}
} catch (resetError) {
console.error(
- `[Get Status] Failed to reset AI processing flag for video %s`,
- videoId,
+ `[Get Status] Failed to reset AI processing flag for video ${videoId}:`,
resetError,
);
}
diff --git a/apps/web/actions/videos/get-transcript.ts b/apps/web/actions/videos/get-transcript.ts
index 90b910f7da..ca94aea1a2 100644
--- a/apps/web/actions/videos/get-transcript.ts
+++ b/apps/web/actions/videos/get-transcript.ts
@@ -3,14 +3,11 @@
import { db } from "@cap/database";
import { getCurrentUser } from "@cap/database/auth/session";
import { s3Buckets, videos } from "@cap/database/schema";
-import { S3Buckets } from "@cap/web-backend";
-import type { Video } from "@cap/web-domain";
import { eq } from "drizzle-orm";
-import { Effect, Option } from "effect";
-import { runPromise } from "@/lib/server";
+import { createBucketProvider } from "@/utils/s3";
export async function getTranscript(
- videoId: Video.VideoId,
+ videoId: string,
): Promise<{ success: boolean; content?: string; message: string }> {
const user = await getCurrentUser();
@@ -48,24 +45,20 @@ export async function getTranscript(
};
}
+ const bucket = await createBucketProvider(result.bucket);
+
try {
- const vttContent = await Effect.gen(function* () {
- const [bucket] = yield* S3Buckets.getBucketAccess(
- Option.fromNullable(result.bucket?.id),
- );
+ const transcriptKey = `${video.ownerId}/${videoId}/transcription.vtt`;
- return yield* bucket.getObject(
- `${video.ownerId}/${videoId}/transcription.vtt`,
- );
- }).pipe(runPromise);
+ const vttContent = await bucket.getObject(transcriptKey);
- if (Option.isNone(vttContent)) {
+ if (!vttContent) {
return { success: false, message: "Transcript file not found" };
}
return {
success: true,
- content: vttContent.value,
+ content: vttContent,
message: "Transcript retrieved successfully",
};
} catch (error) {
diff --git a/apps/web/actions/videos/get-user-videos.ts b/apps/web/actions/videos/get-user-videos.ts
index d12d4c0431..64bb3f5803 100644
--- a/apps/web/actions/videos/get-user-videos.ts
+++ b/apps/web/actions/videos/get-user-videos.ts
@@ -2,7 +2,7 @@
import { db } from "@cap/database";
import { getCurrentUser } from "@cap/database/auth/session";
-import { comments, users, videos, videoUploads } from "@cap/database/schema";
+import { comments, users, videos } from "@cap/database/schema";
import { desc, eq, sql } from "drizzle-orm";
export async function getUserVideos(limit?: number) {
@@ -31,14 +31,10 @@ export async function getUserVideos(limit?: number) {
${videos.createdAt}
)
`,
- hasActiveUpload: sql`${videoUploads.videoId} IS NOT NULL`.mapWith(
- Boolean,
- ),
})
.from(videos)
.leftJoin(comments, eq(videos.id, comments.videoId))
.leftJoin(users, eq(videos.ownerId, users.id))
- .leftJoin(videoUploads, eq(videos.id, videoUploads.videoId))
.where(eq(videos.ownerId, userId))
.groupBy(
videos.id,
diff --git a/apps/web/actions/videos/new-comment.ts b/apps/web/actions/videos/new-comment.ts
index 85a4466f7b..ea0e0b63a0 100644
--- a/apps/web/actions/videos/new-comment.ts
+++ b/apps/web/actions/videos/new-comment.ts
@@ -4,16 +4,14 @@ import { db } from "@cap/database";
import { getCurrentUser } from "@cap/database/auth/session";
import { nanoId } from "@cap/database/helpers";
import { comments } from "@cap/database/schema";
-import type { Video } from "@cap/web-domain";
import { revalidatePath } from "next/cache";
import { createNotification } from "@/lib/Notification";
export async function newComment(data: {
content: string;
- videoId: Video.VideoId;
+ videoId: string;
type: "text" | "emoji";
parentCommentId: string;
- timestamp: number;
}) {
const user = await getCurrentUser();
@@ -25,7 +23,6 @@ export async function newComment(data: {
const videoId = data.videoId;
const type = data.type;
const parentCommentId = data.parentCommentId;
- const timestamp = data.timestamp;
const conditionalType = parentCommentId
? "reply"
: type === "emoji"
@@ -43,7 +40,7 @@ export async function newComment(data: {
type: type,
content: content,
videoId: videoId,
- timestamp: timestamp ?? null,
+ timestamp: null,
parentCommentId: parentCommentId,
createdAt: new Date(),
updatedAt: new Date(),
diff --git a/apps/web/actions/videos/password.ts b/apps/web/actions/videos/password.ts
index 5046e27e82..3396a242c5 100644
--- a/apps/web/actions/videos/password.ts
+++ b/apps/web/actions/videos/password.ts
@@ -4,15 +4,11 @@ import { db } from "@cap/database";
import { getCurrentUser } from "@cap/database/auth/session";
import { encrypt, hashPassword, verifyPassword } from "@cap/database/crypto";
import { videos } from "@cap/database/schema";
-import type { Video } from "@cap/web-domain";
import { eq } from "drizzle-orm";
import { revalidatePath } from "next/cache";
import { cookies } from "next/headers";
-export async function setVideoPassword(
- videoId: Video.VideoId,
- password: string,
-) {
+export async function setVideoPassword(videoId: string, password: string) {
try {
const user = await getCurrentUser();
@@ -46,7 +42,7 @@ export async function setVideoPassword(
}
}
-export async function removeVideoPassword(videoId: Video.VideoId) {
+export async function removeVideoPassword(videoId: string) {
try {
const user = await getCurrentUser();
@@ -79,10 +75,7 @@ export async function removeVideoPassword(videoId: Video.VideoId) {
}
}
-export async function verifyVideoPassword(
- videoId: Video.VideoId,
- password: string,
-) {
+export async function verifyVideoPassword(videoId: string, password: string) {
try {
if (!videoId || typeof password !== "string")
throw new Error("Missing data");
@@ -98,7 +91,7 @@ export async function verifyVideoPassword(
if (!valid) throw new Error("Invalid password");
- (await cookies()).set("x-cap-password", await encrypt(video.password));
+ cookies().set("x-cap-password", await encrypt(video.password));
return { success: true, value: "Password verified" };
} catch (error) {
diff --git a/apps/web/app/(org)/dashboard/Contexts.tsx b/apps/web/app/(org)/dashboard/Contexts.tsx
index 3bd54d2b5d..7d5e9c1c9a 100644
--- a/apps/web/app/(org)/dashboard/Contexts.tsx
+++ b/apps/web/app/(org)/dashboard/Contexts.tsx
@@ -23,8 +23,6 @@ type SharedContext = {
sidebarCollapsed: boolean;
upgradeModalOpen: boolean;
setUpgradeModalOpen: (open: boolean) => void;
- referClickedState: boolean;
- setReferClickedStateHandler: (referClicked: boolean) => void;
};
type ITheme = "light" | "dark";
@@ -54,7 +52,6 @@ export function DashboardContexts({
anyNewNotifications,
initialTheme,
initialSidebarCollapsed,
- referClicked,
}: {
children: React.ReactNode;
organizationData: SharedContext["organizationData"];
@@ -66,14 +63,12 @@ export function DashboardContexts({
anyNewNotifications: boolean;
initialTheme: ITheme;
initialSidebarCollapsed: boolean;
- referClicked: boolean;
}) {
const [theme, setTheme] = useState(initialTheme);
const [sidebarCollapsed, setSidebarCollapsed] = useState(
initialSidebarCollapsed,
);
const [upgradeModalOpen, setUpgradeModalOpen] = useState(false);
- const [referClickedState, setReferClickedState] = useState(referClicked);
const pathname = usePathname();
// Calculate user's spaces (both owned and member of)
@@ -94,7 +89,7 @@ export function DashboardContexts({
(member) =>
member.userId === user.id &&
member.organizationId === space.organizationId &&
- member.role === "member",
+ member.role === "MEMBER",
),
) || null;
@@ -130,7 +125,6 @@ export function DashboardContexts({
document.body.className = "light";
};
}, [theme]);
-
const toggleSidebarCollapsed = () => {
setSidebarCollapsed(!sidebarCollapsed);
Cookies.set("sidebarCollapsed", !sidebarCollapsed ? "true" : "false", {
@@ -138,13 +132,6 @@ export function DashboardContexts({
});
};
- const setReferClickedStateHandler = (referClicked: boolean) => {
- setReferClickedState(referClicked);
- Cookies.set("referClicked", referClicked ? "true" : "false", {
- expires: 365,
- });
- };
-
return (
{children}
diff --git a/apps/web/app/(org)/dashboard/_components/AnimatedIcons/Refer.tsx b/apps/web/app/(org)/dashboard/_components/AnimatedIcons/Refer.tsx
index aae32a2be9..a7572753c7 100644
--- a/apps/web/app/(org)/dashboard/_components/AnimatedIcons/Refer.tsx
+++ b/apps/web/app/(org)/dashboard/_components/AnimatedIcons/Refer.tsx
@@ -53,7 +53,6 @@ const ReferIcon = forwardRef(
onAnimationComplete={() => setIsAnimating(false)}
{...props}
>
- Box
= {
+ "/dashboard/caps": "Caps",
+ "/dashboard/shared-caps": "Shared Caps",
+ "/dashboard/settings/organization": "Organization Settings",
+ "/dashboard/settings/account": "Account Settings",
+ "/dashboard/spaces": "Spaces",
+ "/dashboard/spaces/browse": "Browse Spaces",
+ };
+
+ const title = activeSpace ? activeSpace.name : titles[pathname] || "";
+ const { theme, setThemeHandler } = useTheme();
+ const [toggleNotifications, setToggleNotifications] = useState(false);
+ const bellRef = useRef(null);
+ const notificationsRef: MutableRefObject = useClickAway(
+ (e) => {
+ if (bellRef.current && !bellRef.current.contains(e.target as Node)) {
+ setToggleNotifications(false);
+ }
+ },
+ );
+ const isSharedCapsPage = pathname === "/dashboard/shared-caps";
return (
-
+
);
diff --git a/apps/desktop/src/routes/(window-chrome)/settings/hotkeys.tsx b/apps/desktop/src/routes/(window-chrome)/settings/hotkeys.tsx
index 3337282972..19e9e62d91 100644
--- a/apps/desktop/src/routes/(window-chrome)/settings/hotkeys.tsx
+++ b/apps/desktop/src/routes/(window-chrome)/settings/hotkeys.tsx
@@ -11,7 +11,7 @@ import {
Switch,
} from "solid-js";
import { createStore } from "solid-js/store";
-import { generalSettingsStore, hotkeysStore } from "~/store";
+import { hotkeysStore } from "~/store";
import {
commands,
@@ -20,17 +20,12 @@ import {
type HotkeysStore,
} from "~/utils/tauri";
-const ACTION_TEXT = {
- startStudioRecording: "Start studio recording",
- startInstantRecording: "Start instant recording",
- restartRecording: "Restart recording",
- stopRecording: "Stop recording",
+const ACTION_TEXT: Record
+ {
+ setSettings("theme", newTheme);
+ generalSettingsStore.set({ theme: newTheme });
+ }}
+ />
-
- {(group) => (
-
-
- {
- const url = new URL(v);
- const origin = url.origin;
+ {
+ const url = new URL(v);
+ const origin = url.origin;
- if (
- !(await confirm(
- `Are you sure you want to change the server URL to '${origin}'? You will need to sign in again.`,
- ))
- )
- return;
+ if (
+ !(await confirm(
+ `Are you sure you want to change the server URL to '${origin}'? You will need to sign in again.`,
+ ))
+ )
+ return;
- await authStore.set(undefined);
- await commands.setServerUrl(origin);
- handleChange("serverUrl", origin);
- }}
- />
+ await authStore.set(undefined);
+ await commands.setServerUrl(origin);
+ handleChange("serverUrl", origin);
+ }}
+ />
+
- {group.title} -
-
-
- {(item) => {
- // Check OS compatibility
- if (
- item.type === "toggle" &&
- item.os &&
- item.os !== ostype
- ) {
- return null;
- }
-
- if (item.type === "toggle") {
- return (
-
+ {(group) => (
+
+
-
- )}
-
+
+ )}
+
-
+
- + {group.title} +
+
+
+ {(item) => {
+ // Check OS compatibility
if (
- item.label === "Main window recording start behaviour"
- ) {
- return renderRecordingSelect(
- item.label,
- item.description,
- () => item.value,
- item.onChange,
- [
- { text: "Close", value: "close" },
- { text: "Minimise", value: "minimise" },
- ],
- );
- } else if (
- item.label === "Studio recording finish behaviour"
+ item.type === "toggle" &&
+ item.os &&
+ item.os !== ostype
) {
- return renderRecordingSelect(
- item.label,
- item.description,
- () => item.value,
- item.onChange,
- [
- { text: "Open editor", value: "openEditor" },
- {
- text: "Show in overlay",
- value: "showOverlay",
- },
- ],
- );
- } else if (item.label === "Recording countdown") {
- return renderRecordingSelect(
- item.label,
- item.description,
- () => item.value,
- item.onChange,
- [
- { text: "Off", value: 0 },
- { text: "3 seconds", value: 3 },
- { text: "5 seconds", value: 5 },
- { text: "10 seconds", value: 10 },
- ],
- );
- } else if (
- item.label === "After deleting recording behaviour"
- ) {
- return renderRecordingSelect(
- item.label,
- item.description,
- () => item.value,
- item.onChange,
- [
- { text: "Do Nothing", value: "doNothing" },
- {
- text: "Reopen Recording Window",
- value: "reopenRecordingWindow",
- },
- ],
+ return null;
+ }
+
+ if (item.type === "toggle") {
+ return (
+
+ return null;
+ }}
+
+
+
@@ -736,7 +683,7 @@ function RecordingControls(props: {
setToggleModeSelect?: (value: boolean) => void;
}) {
const auth = authStore.createQuery();
- const { setOptions, rawOptions } = useRecordingOptions();
+ const { rawOptions, setOptions } = createOptionsQuery();
const generalSetings = generalSettingsStore.createQuery();
@@ -869,26 +816,6 @@ function RecordingControls(props: {
);
}
-function ShowCapFreeWarning(props: { isInstantMode: boolean }) {
- const auth = authStore.createQuery();
-
- return (
-
-
- Shortcuts
-- Configure system-wide keyboard shortcuts to control Cap +
Hotkeys
++ Configure keyboard shortcuts for common actions.
-
+
+
+ {(source) => {
+ const max = 360;
+
+ const { projectHistory } = useEditorContext();
+
+ const angle = () => source().angle ?? 90;
+
+ return (
+ <>
+
+
+
+
+
+ setProject("background", "blur", v[0])}
+ minValue={0}
+ maxValue={100}
+ step={0.1}
+ formatTooltip="%"
+ />
+
+ {/** Dashed divider */}
+
+ setProject("background", "padding", v[0])}
+ minValue={0}
+ maxValue={40}
+ step={0.1}
+ formatTooltip="%"
+ />
+
+ setProject("background", "rounding", v[0])}
+ minValue={0}
+ maxValue={100}
+ step={0.1}
+ formatTooltip="%"
+ />
+
+ {
+ batch(() => {
+ setProject("background", "shadow", v[0]);
+ // Initialize advanced shadow settings if they don't exist and shadow is enabled
+ if (v[0] > 0 && !project.background.advancedShadow) {
+ setProject("background", "advancedShadow", {
+ size: 50,
+ opacity: 18,
+ blur: 50,
+ });
+ }
+ });
+ }}
+ minValue={0}
+ maxValue={100}
+ step={0.1}
+ formatTooltip="%"
+ />
+ {
+ setProject("background", "advancedShadow", {
+ ...(project.background.advancedShadow ?? {
+ size: 50,
+ opacity: 18,
+ blur: 50,
+ }),
+ size: v[0],
+ });
+ },
+ }}
+ opacity={{
+ value: [project.background.advancedShadow?.opacity ?? 18],
+ onChange: (v) => {
+ setProject("background", "advancedShadow", {
+ ...(project.background.advancedShadow ?? {
+ size: 50,
+ opacity: 18,
+ blur: 50,
+ }),
+ opacity: v[0],
+ });
+ },
+ }}
+ blur={{
+ value: [project.background.advancedShadow?.blur ?? 50],
+ onChange: (v) => {
+ setProject("background", "advancedShadow", {
+ ...(project.background.advancedShadow ?? {
+ size: 50,
+ opacity: 18,
+ blur: 50,
+ }),
+ blur: v[0],
+ });
+ },
+ }}
+ />
+
+ {/*
+ setProject("background", "inset", v[0])}
+ minValue={0}
+ maxValue={100}
+ />
+
+ */}
+
+ );
}
function CameraConfig(props: { scrollRef: HTMLDivElement }) {
- const { project, setProject } = useEditorContext();
-
- return (
-
- setProject("camera", "size", v[0])}
+ minValue={20}
+ maxValue={80}
+ step={0.1}
+ formatTooltip="%"
+ />
+
+ setProject("camera", "zoom_size", v[0])}
+ minValue={10}
+ maxValue={60}
+ step={0.1}
+ formatTooltip="%"
+ />
+
+ setProject("camera", "rounding", v[0])}
+ minValue={0}
+ maxValue={100}
+ step={0.1}
+ formatTooltip="%"
+ />
+
+
+ setProject("camera", "shadow", v[0])}
+ minValue={0}
+ maxValue={100}
+ />
+
+ */}
+
+ );
}
function ZoomSegmentPreview(props: {
- segmentIndex: number;
- segment: ZoomSegment;
+ segmentIndex: number;
+ segment: ZoomSegment;
}) {
- const { project, editorInstance } = useEditorContext();
-
- const start = createMemo(() => props.segment.start);
-
- const segmentIndex = createMemo(() => {
- const st = start();
- const i = project.timeline?.segments.findIndex(
- (s) => s.start <= st && s.end > st
- );
- if (i === undefined || i === -1) return 0;
- return i;
- });
-
- const relativeTime = createMemo(() => {
- const st = start();
- const segment = project.timeline?.segments[segmentIndex()];
- if (!segment) return 0;
- return Math.max(0, st - segment.start);
- });
-
- const video = document.createElement("video");
- createEffect(() => {
- const path = convertFileSrc(
- `${
- editorInstance.path
- }/content/segments/segment-${segmentIndex()}/display.mp4`
- );
- video.src = path;
- video.preload = "auto";
- video.load();
- });
-
- createEffect(() => {
- const t = relativeTime();
- if (t === undefined) return;
-
- if (video.readyState >= 2) {
- video.currentTime = t;
- } else {
- const handleCanPlay = () => {
- video.currentTime = t;
- video.removeEventListener("canplay", handleCanPlay);
- };
- video.addEventListener("canplay", handleCanPlay);
- }
- });
-
- const render = () => {
- if (!canvasRef || video.readyState < 2) return;
-
- const ctx = canvasRef.getContext("2d");
- if (!ctx) return;
-
- ctx.imageSmoothingEnabled = false;
- ctx.clearRect(0, 0, canvasRef.width, canvasRef.height);
-
- const raw = editorInstance.recordings.segments[0].display;
- const croppedPosition = project.background.crop?.position || { x: 0, y: 0 };
- const croppedSize = project.background.crop?.size || {
- x: raw.width,
- y: raw.height,
- };
-
- ctx.drawImage(
- video,
- croppedPosition.x,
- croppedPosition.y,
- croppedSize.x,
- croppedSize.y,
- 0,
- 0,
- canvasRef.width,
- canvasRef.height
- );
- };
-
- const [loaded, setLoaded] = createSignal(false);
- video.onloadeddata = () => {
- setLoaded(true);
- render();
- };
- video.onseeked = render;
- video.onerror = () => {
- setTimeout(() => video.load(), 100);
- };
-
- let canvasRef!: HTMLCanvasElement;
-
- return (
- <>
-
- setProject(
- "timeline",
- "zoomSegments",
- props.segmentIndex,
- "amount",
- v[0]
- )
- }
- minValue={1}
- maxValue={4.5}
- step={0.001}
- formatTooltip="x"
- />
-
- {
- setProject(
- "timeline",
- "zoomSegments",
- props.segmentIndex,
- "mode",
- v === "auto" ? "auto" : { manual: states.manual }
- );
- }}
- >
-
-
- Auto
-
-
- Manual
-
-
-
-
-
-
- {
- const m = props.segment.mode;
- if (m === "auto") return;
-
- return m.manual;
- })()}
- >
- {(mode) => {
- const start = createMemo((prev) => {
- if (projectHistory.isPaused()) return prev;
-
- return props.segment.start;
- }, 0);
-
- const segmentIndex = createMemo((prev) => {
- if (projectHistory.isPaused()) return prev;
-
- const st = start();
- const i = project.timeline?.segments.findIndex(
- (s) => s.start <= st && s.end > st
- );
- if (i === undefined || i === -1) return 0;
- return i;
- }, 0);
-
- const relativeTime = createMemo(() => {
- const st = start();
- const segment = project.timeline?.segments[segmentIndex()];
- if (!segment) return 0;
- return Math.max(0, st - segment.start);
- });
-
- const video = document.createElement("video");
- createEffect(() => {
- const path = convertFileSrc(
- `${
- editorInstance.path
- }/content/segments/segment-${segmentIndex()}/display.mp4`
- );
- video.src = path;
- video.preload = "auto";
- video.load();
- });
-
- createEffect(() => {
- const t = relativeTime();
- if (t === undefined) return;
-
- if (video.readyState >= 2) {
- video.currentTime = t;
- } else {
- const handleCanPlay = () => {
- video.currentTime = t;
- video.removeEventListener("canplay", handleCanPlay);
- };
- video.addEventListener("canplay", handleCanPlay);
- }
- });
-
- createEffect(
- on(
- () => {
- croppedPosition();
- croppedSize();
- },
- () => {
- if (loaded()) {
- render();
- }
- }
- )
- );
-
- const render = () => {
- if (!canvasRef || video.readyState < 2) return;
-
- const ctx = canvasRef.getContext("2d");
- if (!ctx) return;
-
- ctx.imageSmoothingEnabled = false;
- ctx.clearRect(0, 0, canvasRef.width, canvasRef.height);
- ctx.drawImage(
- video,
- croppedPosition().x,
- croppedPosition().y,
- croppedSize().x,
- croppedSize().y,
- 0,
- 0,
- canvasRef.width!,
- canvasRef.height!
- );
- };
-
- const [loaded, setLoaded] = createSignal(false);
- video.onloadeddata = () => {
- setLoaded(true);
- render();
- };
- video.onseeked = render;
-
- video.onerror = (e) => {
- console.error("Failed to load video for zoom preview:", e);
- setTimeout(() => {
- video.load();
- }, 100);
- };
-
- let canvasRef!: HTMLCanvasElement;
-
- const [ref, setRef] = createSignal();
- const bounds = createElementBounds(ref);
- const rawSize = () => {
- const raw = editorInstance.recordings.segments[0].display;
- return { x: raw.width, y: raw.height };
- };
-
- const croppedPosition = () => {
- const cropped = project.background.crop?.position;
- if (cropped) return cropped;
-
- return { x: 0, y: 0 };
- };
-
- const croppedSize = () => {
- const cropped = project.background.crop?.size;
- if (cropped) return cropped;
-
- return rawSize();
- };
-
- const visualHeight = () =>
- (bounds.width! / croppedSize().x) * croppedSize().y;
-
- return (
-
-
-
-
-
- );
+ const generalSettings = generalSettingsStore.createQuery();
+ const {
+ project,
+ setProject,
+ editorInstance,
+ setEditorState,
+ projectHistory,
+ } = useEditorContext();
+
+ const states = {
+ manual:
+ props.segment.mode === "auto"
+ ? { x: 0.5, y: 0.5 }
+ : props.segment.mode.manual,
+ };
+
+ return (
+ <>
+
+ setProject(
+ "timeline",
+ "zoomSegments",
+ props.segmentIndex,
+ "amount",
+ v[0],
+ )
+ }
+ minValue={1}
+ maxValue={4.5}
+ step={0.001}
+ formatTooltip="x"
+ />
+
+ {
+ setProject(
+ "timeline",
+ "zoomSegments",
+ props.segmentIndex,
+ "mode",
+ v === "auto" ? "auto" : { manual: states.manual },
+ );
+ }}
+ >
+
+
+ Auto
+
+
+ Manual
+
+
+
+
+
+
+ {
+ const m = props.segment.mode;
+ if (m === "auto") return;
+
+ return m.manual;
+ })()}
+ >
+ {(mode) => {
+ const start = createMemo((prev) => {
+ if (projectHistory.isPaused()) return prev;
+
+ return props.segment.start;
+ }, 0);
+
+ const segmentIndex = createMemo((prev) => {
+ if (projectHistory.isPaused()) return prev;
+
+ const st = start();
+ const i = project.timeline?.segments.findIndex(
+ (s) => s.start <= st && s.end > st,
+ );
+ if (i === undefined || i === -1) return 0;
+ return i;
+ }, 0);
+
+ // Calculate the time relative to the video segment
+ const relativeTime = createMemo(() => {
+ const st = start();
+ const segment = project.timeline?.segments[segmentIndex()];
+ if (!segment) return 0;
+ // The time within the actual video file
+ return Math.max(0, st - segment.start);
+ });
+
+ const video = document.createElement("video");
+ createEffect(() => {
+ const path = convertFileSrc(
+ // TODO: this shouldn't be so hardcoded
+ `${
+ editorInstance.path
+ }/content/segments/segment-${segmentIndex()}/display.mp4`,
+ );
+ video.src = path;
+ video.preload = "auto";
+ // Force reload if video fails to load
+ video.load();
+ });
+
+ createEffect(() => {
+ const t = relativeTime();
+ if (t === undefined) return;
+
+ // Ensure video is ready before seeking
+ if (video.readyState >= 2) {
+ video.currentTime = t;
+ } else {
+ // Wait for video to be ready, then seek
+ const handleCanPlay = () => {
+ video.currentTime = t;
+ video.removeEventListener("canplay", handleCanPlay);
+ };
+ video.addEventListener("canplay", handleCanPlay);
+ }
+ });
+
+ createEffect(
+ on(
+ () => {
+ croppedPosition();
+ croppedSize();
+ },
+ () => {
+ if (loaded()) {
+ render();
+ }
+ },
+ ),
+ );
+
+ const render = () => {
+ if (!canvasRef || video.readyState < 2) return;
+
+ const ctx = canvasRef.getContext("2d");
+ if (!ctx) return;
+
+ ctx.imageSmoothingEnabled = false;
+ // Clear canvas first
+ ctx.clearRect(0, 0, canvasRef.width, canvasRef.height);
+ // Draw video frame
+ ctx.drawImage(
+ video,
+ croppedPosition().x,
+ croppedPosition().y,
+ croppedSize().x,
+ croppedSize().y,
+ 0,
+ 0,
+ canvasRef.width!,
+ canvasRef.height!,
+ );
+ };
+
+ const [loaded, setLoaded] = createSignal(false);
+ video.onloadeddata = () => {
+ setLoaded(true);
+ render();
+ };
+ video.onseeked = render;
+
+ // Add error handling
+ video.onerror = (e) => {
+ console.error("Failed to load video for zoom preview:", e);
+ // Try to reload after a short delay
+ setTimeout(() => {
+ video.load();
+ }, 100);
+ };
+
+ let canvasRef!: HTMLCanvasElement;
+
+ const [ref, setRef] = createSignal();
+ const bounds = createElementBounds(ref);
+ const rawSize = () => {
+ const raw = editorInstance.recordings.segments[0].display;
+ return { x: raw.width, y: raw.height };
+ };
+
+ const croppedPosition = () => {
+ const cropped = project.background.crop?.position;
+ if (cropped) return cropped;
+
+ return { x: 0, y: 0 };
+ };
+
+ const croppedSize = () => {
+ const cropped = project.background.crop?.size;
+ if (cropped) return cropped;
+
+ return rawSize();
+ };
+
+ const visualHeight = () =>
+ (bounds.width! / croppedSize().x) * croppedSize().y;
+
+ return (
+
+
+
+
+
+ );
}
function ClipSegmentConfig(props: {
- segmentIndex: number;
- segment: TimelineSegment;
-}) {
- const { setProject, setEditorState, project, projectActions, meta } =
- useEditorContext();
-
- const clipConfig = () =>
- project.clips?.find((c) => c.index === props.segmentIndex);
- const offsets = () => clipConfig()?.offsets || {};
-
- function setOffset(type: keyof ClipOffsets, offset: number) {
- if (Number.isNaN(offset)) return;
-
- setProject(
- produce((proj) => {
- const clips = proj.clips ?? [];
- let clip = clips.find(
- (clip) => clip.index === (props.segment.recordingSegment ?? 0)
- );
- if (!clip) {
- clip = { index: 0, offsets: {} };
- clips.push(clip);
- }
-
- clip.offsets[type] = offset / 1000;
- })
- );
- }
-
- return (
- <>
- {
- setOffset("system_audio", offset);
- }}
- />
- )}
- {meta().hasMicrophone && (
- {
- setOffset("mic", offset);
- }}
- />
- )}
- {meta().hasCamera && (
- {
- setOffset("camera", offset);
- }}
- />
- )}
-
- );
-}
-
-function SourceOffsetField(props: {
- name: string;
- value?: number;
- onChange: (value: number) => void;
+ segmentIndex: number;
+ segment: TimelineSegment;
}) {
- const rawValue = () => Math.round((props.value ?? 0) * 1000);
-
- const [value, setValue] = createSignal(rawValue().toString());
-
- return (
-
-
- );
+ const { setProject, setEditorState, project, projectActions } =
+ useEditorContext();
+
+ return (
+ <>
+
+
+
+
+
+ );
}
-function SceneSegmentConfig(props: {
- segmentIndex: number;
- segment: SceneSegment;
-}) {
- const { setProject, setEditorState, projectActions } = useEditorContext();
-
- return (
- <>
- {
- setProject(
- "timeline",
- "sceneSegments",
- props.segmentIndex,
- "mode",
- v as "default" | "cameraOnly" | "hideCamera"
- );
- }}
- >
-
-
-
-
-
- );
-}
function RgbInput(props: {
- value: [number, number, number];
- onChange: (value: [number, number, number]) => void;
+ value: [number, number, number];
+ onChange: (value: [number, number, number]) => void;
}) {
- const [text, setText] = createWritableMemo(() => rgbToHex(props.value));
- let prevHex = rgbToHex(props.value);
-
- let colorInput!: HTMLInputElement;
-
- return (
-
-
+
{(windowUnderCursor) => (
)}
@@ -712,9 +662,6 @@ function Inner() {
bounds,
}}
/>
-
+
{(item, idx) => {
createEventListener(window, "click", () => {
if (listening()?.action !== item()) return;
@@ -197,7 +182,7 @@ function Inner(props: { initialStore: HotkeysStore | null }) {
- {idx !== actions().length - 1 && (
+ {idx !== actions.length - 1 && (
)}
diff --git a/apps/desktop/src/routes/(window-chrome)/settings/license.tsx b/apps/desktop/src/routes/(window-chrome)/settings/license.tsx
index b10212cfdb..18c8a7b3bb 100644
--- a/apps/desktop/src/routes/(window-chrome)/settings/license.tsx
+++ b/apps/desktop/src/routes/(window-chrome)/settings/license.tsx
@@ -23,7 +23,7 @@ export default function Page() {
const queryClient = useQueryClient();
return (
-
+
("macOS");
-
- const [wallpapers] = createResource(async () => {
- const visibleWallpaperPaths = WALLPAPER_NAMES.map(async (id) => {
- try {
- const path = await resolveResource(`assets/backgrounds/${id}.jpg`);
- return { id, path };
- } catch (err) {
- return { id, path: null };
- }
- });
-
- const initialPaths = await Promise.all(visibleWallpaperPaths);
-
- return initialPaths
- .filter((p) => p.path !== null)
- .map(({ id, path }) => ({
- id,
- url: convertFileSrc(path!),
- rawPath: path!,
- }));
- });
-
- const ensurePaddingForBackground = () => {
- if (project.background.padding === 0)
- setProject("background", "padding", 10);
- };
-
- onMount(async () => {
- if (
- project.background.source.type === "wallpaper" ||
- project.background.source.type === "image"
- ) {
- const path = project.background.source.path;
-
- if (path) {
- if (project.background.source.type === "wallpaper") {
- if (
- WALLPAPER_NAMES.includes(path as (typeof WALLPAPER_NAMES)[number])
- ) {
- const loadedWallpapers = wallpapers();
- if (!loadedWallpapers) return;
-
- const wallpaper = loadedWallpapers.find((w) => w.id === path);
- if (!wallpaper?.url) return;
-
- const radioGroupOnChange = async (photoUrl: string) => {
- try {
- const wallpaper = wallpapers()?.find((w) => w.url === photoUrl);
- if (!wallpaper) return;
-
- const rawPath = decodeURIComponent(
- photoUrl.replace("file://", "")
- );
-
- debouncedSetProject(rawPath);
- } catch (err) {
- toast.error("Failed to set wallpaper");
- }
- };
-
- await radioGroupOnChange(wallpaper.url);
- }
- } else if (project.background.source.type === "image") {
- (async () => {
- try {
- const convertedPath = convertFileSrc(path);
- await fetch(convertedPath, { method: "HEAD" });
- } catch (err) {
- setProject("background", "source", {
- type: "image",
- path: null,
- });
- }
- })();
- }
- }
- }
- });
-
- const filteredWallpapers = createMemo(() => {
- const currentTab = backgroundTab();
- return wallpapers()?.filter((wp) => wp.id.startsWith(currentTab)) || [];
- });
-
- const [scrollX, setScrollX] = createSignal(0);
- const [reachedEndOfScroll, setReachedEndOfScroll] = createSignal(false);
-
- const [backgroundRef, setBackgroundRef] = createSignal();
-
- createEventListenerMap(
- () => backgroundRef() ?? [],
- {
- /** Handle background tabs overflowing to show fade */
- scroll: () => {
- const el = backgroundRef();
- if (el) {
- setScrollX(el.scrollLeft);
- const reachedEnd = el.scrollWidth - el.clientWidth - el.scrollLeft;
- setReachedEndOfScroll(reachedEnd === 0);
- }
- },
- wheel: (e: WheelEvent) => {
- const el = backgroundRef();
- if (el) {
- e.preventDefault();
- el.scrollLeft +=
- Math.abs(e.deltaX) > Math.abs(e.deltaY) ? e.deltaX : e.deltaY;
- }
- },
- },
- { passive: false }
- );
-
- let fileInput!: HTMLInputElement;
-
- const debouncedSetProject = (wallpaperPath: string) => {
- const resumeHistory = projectHistory.pause();
- queueMicrotask(() => {
- batch(() => {
- setProject("background", "source", {
- type: "wallpaper",
- path: wallpaperPath,
- } as const);
- resumeHistory();
- });
- });
- };
-
- const backgrounds: {
- [K in BackgroundSource["type"]]: Extract;
- } = {
- wallpaper: {
- type: "wallpaper",
- path: null,
- },
- image: {
- type: "image",
- path: null,
- },
- color: {
- type: "color",
- value: DEFAULT_GRADIENT_FROM,
- },
- gradient: {
- type: "gradient",
- from: DEFAULT_GRADIENT_FROM,
- to: DEFAULT_GRADIENT_TO,
- },
- };
-
- const generalSettings = generalSettingsStore.createQuery();
- const hapticsEnabled = () =>
- generalSettings.data?.hapticsEnabled && ostype() === "macos";
-
- return (
-
- {
- const tab = v as BackgroundSource["type"];
- ensurePaddingForBackground();
- switch (tab) {
- case "image": {
- setProject("background", "source", {
- type: "image",
- path:
- project.background.source.type === "image"
- ? project.background.source.path
- : null,
- });
- break;
- }
- case "color": {
- setProject("background", "source", {
- type: "color",
- value:
- project.background.source.type === "color"
- ? project.background.source.value
- : DEFAULT_GRADIENT_FROM,
- });
- break;
- }
- case "gradient": {
- setProject("background", "source", {
- type: "gradient",
- from:
- project.background.source.type === "gradient"
- ? project.background.source.from
- : DEFAULT_GRADIENT_FROM,
- to:
- project.background.source.type === "gradient"
- ? project.background.source.to
- : DEFAULT_GRADIENT_TO,
- angle:
- project.background.source.type === "gradient"
- ? project.background.source.angle
- : 90,
- });
- break;
- }
- case "wallpaper": {
- setProject("background", "source", {
- type: "wallpaper",
- path:
- project.background.source.type === "wallpaper"
- ? project.background.source.path
- : null,
- });
- break;
- }
- }
- }}
- >
-
-
- {(item) => {
- const el = (props?: object) => (
-
-
+ {(photo) => (
+
+
+ 
+
+
+ )}
+
+
+
+
+
+
+
+
+
+ fileInput.click()}
+ class="p-6 bg-gray-2 text-[13px] w-full rounded-[0.5rem] border border-gray-5 border-dashed flex flex-col items-center justify-center gap-[0.5rem] hover:bg-gray-3 transition-colors duration-100"
+ >
+
+ {
+ const file = e.currentTarget.files?.[0];
+ if (!file) return;
+
+ /*
+ this is a Tauri bug in WebKit so we need to validate the file type manually
+ https://github.com/tauri-apps/tauri/issues/9158
+ */
+ const validExtensions = [
+ "jpg",
+ "jpeg",
+ "png",
+ "gif",
+ "webp",
+ "bmp",
+ ];
+ const extension = file.name.split(".").pop()?.toLowerCase();
+ if (!extension || !validExtensions.includes(extension)) {
+ toast.error("Invalid image file type");
+ return;
+ }
+
+ try {
+ const fileName = `bg-${Date.now()}-${file.name}`;
+ const arrayBuffer = await file.arrayBuffer();
+ const uint8Array = new Uint8Array(arrayBuffer);
+
+ const fullPath = `${await appDataDir()}/${fileName}`;
+
+ await writeFile(fileName, uint8Array, {
+ baseDir: BaseDirectory.AppData,
+ });
+
+ setProject("background", "source", {
+ type: "image",
+ path: fullPath,
+ });
+ } catch (err) {
+ toast.error("Failed to save image");
+ }
+ }}
+ />
+
+
+
+
-
-
-
-
- (
- project.background.source as { path?: string }
- ).path?.includes(w.id)
- )?.url ?? undefined
- : undefined
- }
- onChange={(photoUrl) => {
- try {
- const wallpaper = wallpapers()?.find(
- (w) => w.url === photoUrl
- );
- if (!wallpaper) return;
-
- debouncedSetProject(wallpaper.rawPath);
-
- ensurePaddingForBackground();
- } catch (err) {
- toast.error("Failed to set wallpaper");
- }
- }}
- class="grid grid-cols-7 gap-2 h-auto"
- >
-
-
- }
- >
-
- {(photo) => (
-
-
-
-
-
- )}
-
-
-
-
-
-
-
-
-
- fileInput.click()}
- class="p-6 bg-gray-2 text-[13px] w-full rounded-[0.5rem] border border-gray-5 border-dashed flex flex-col items-center justify-center gap-[0.5rem] hover:bg-gray-3 transition-colors duration-100"
- >
-
- {
- const file = e.currentTarget.files?.[0];
- if (!file) return;
-
- const validExtensions = [
- "jpg",
- "jpeg",
- "png",
- "gif",
- "webp",
- "bmp",
- ];
- const extension = file.name.split(".").pop()?.toLowerCase();
- if (!extension || !validExtensions.includes(extension)) {
- toast.error("Invalid image file type");
- return;
- }
-
- try {
- const fileName = `bg-${Date.now()}-${file.name}`;
- const arrayBuffer = await file.arrayBuffer();
- const uint8Array = new Uint8Array(arrayBuffer);
-
- const fullPath = `${await appDataDir()}/${fileName}`;
-
- await writeFile(fileName, uint8Array, {
- baseDir: BaseDirectory.AppData,
- });
-
- setProject("background", "source", {
- type: "image",
- path: fullPath,
- });
- } catch (err) {
- toast.error("Failed to save image");
- }
- }}
- />
-
-
-
-
-
-
-
- {(source) => {
- const max = 360;
-
- const { projectHistory } = useEditorContext();
-
- const angle = () => source().angle ?? 90;
-
- return (
- <>
-
-
-
-
-
- setProject("background", "blur", v[0])}
- minValue={0}
- maxValue={100}
- step={0.1}
- formatTooltip="%"
- />
-
-
- setProject("background", "padding", v[0])}
- minValue={0}
- maxValue={40}
- step={0.1}
- formatTooltip="%"
- />
-
- setProject("background", "rounding", v[0])}
- minValue={0}
- maxValue={100}
- step={0.1}
- formatTooltip="%"
- />
-
- {
- const prev = project.background.border ?? {
- enabled: false,
- width: 5.0,
- color: [0, 0, 0],
- opacity: 50.0,
- };
-
- setProject("background", "border", {
- ...prev,
- enabled,
- });
- }}
- />
- }
- />
-
-
- setProject("background", "border", {
- ...(project.background.border ?? {
- enabled: true,
- width: 5.0,
- color: [0, 0, 0],
- opacity: 50.0,
- }),
- width: v[0],
- })
- }
- minValue={1}
- maxValue={20}
- step={0.1}
- formatTooltip="px"
- />
-
-
- setProject("background", "border", {
- ...(project.background.border ?? {
- enabled: true,
- width: 5.0,
- color: [0, 0, 0],
- opacity: 50.0,
- }),
- color,
- })
- }
- />
-
-
- setProject("background", "border", {
- ...(project.background.border ?? {
- enabled: true,
- width: 5.0,
- color: [0, 0, 0],
- opacity: 50.0,
- }),
- opacity: v[0],
- })
- }
- minValue={0}
- maxValue={100}
- step={0.1}
- formatTooltip="%"
- />
-
-
- {
- batch(() => {
- setProject("background", "shadow", v[0]);
- if (v[0] > 0 && !project.background.advancedShadow) {
- setProject("background", "advancedShadow", {
- size: 50,
- opacity: 18,
- blur: 50,
- });
- }
- });
- }}
- minValue={0}
- maxValue={100}
- step={0.1}
- formatTooltip="%"
- />
- {
- setProject("background", "advancedShadow", {
- ...(project.background.advancedShadow ?? {
- size: 50,
- opacity: 18,
- blur: 50,
- }),
- size: v[0],
- });
- },
- }}
- opacity={{
- value: [project.background.advancedShadow?.opacity ?? 18],
- onChange: (v) => {
- setProject("background", "advancedShadow", {
- ...(project.background.advancedShadow ?? {
- size: 50,
- opacity: 18,
- blur: 50,
- }),
- opacity: v[0],
- });
- },
- }}
- blur={{
- value: [project.background.advancedShadow?.blur ?? 50],
- onChange: (v) => {
- setProject("background", "advancedShadow", {
- ...(project.background.advancedShadow ?? {
- size: 50,
- opacity: 18,
- blur: 50,
- }),
- blur: v[0],
- });
- },
- }}
- />
-
-
- );
+ +
+
+ */}
+
+
+
+
diff --git a/apps/desktop/src/routes/(window-chrome)/settings/recordings.tsx b/apps/desktop/src/routes/(window-chrome)/settings/recordings.tsx
index e26e056e0a..ef7690c25c 100644
--- a/apps/desktop/src/routes/(window-chrome)/settings/recordings.tsx
+++ b/apps/desktop/src/routes/(window-chrome)/settings/recordings.tsx
@@ -1,4 +1,3 @@
-import { ProgressCircle } from "@cap/ui-solid";
import Tooltip from "@corvu/tooltip";
import {
createMutation,
@@ -6,7 +5,7 @@ import {
queryOptions,
useQueryClient,
} from "@tanstack/solid-query";
-import { Channel, convertFileSrc } from "@tauri-apps/api/core";
+import { convertFileSrc } from "@tauri-apps/api/core";
import { ask } from "@tauri-apps/plugin-dialog";
import { remove } from "@tauri-apps/plugin-fs";
import { revealItemInDir } from "@tauri-apps/plugin-opener";
@@ -20,14 +19,10 @@ import {
type ParentProps,
Show,
} from "solid-js";
+
import { trackEvent } from "~/utils/analytics";
import { createTauriEventListener } from "~/utils/createEventListener";
-import {
- commands,
- events,
- type RecordingMetaWithMode,
- type UploadProgress,
-} from "~/utils/tauri";
+import { commands, events, type RecordingMetaWithMode } from "~/utils/tauri";
type Recording = {
meta: RecordingMetaWithMode;
@@ -152,12 +147,7 @@ export default function Recordings() {
-
-
-
+
+
+ {(selection) => (
+
+ )}
+
+ {
+ const sceneSelection = selection();
+ if (sceneSelection.type !== "scene") return;
+
+ const segment =
+ project.timeline?.sceneSegments?.[sceneSelection.index];
+ if (!segment) return;
+
+ return { selection: sceneSelection, segment };
+ })()}
+ >
+ {(value) => (
+
+ {
+ const clipSegment = selection();
+ if (clipSegment.type !== "clip") return;
+
+ const segment =
+ project.timeline?.segments?.[clipSegment.index];
+ if (!segment) return;
+
+ return { selection: clipSegment, segment };
+ })()}
+ >
+ {(value) => (
+
+
+
+ )}
+
+
+ );
}
function BackgroundConfig(props: { scrollRef: HTMLDivElement }) {
- const { project, setProject, projectHistory } = useEditorContext();
-
- const [backgroundTab, setBackgroundTab] =
- createSignal- No {activeTab()} recordings -
--
- - - {permission.name} Permission - - - {permission.description} - -- -
-
-
+ + + {permission.name} Permission + + + {permission.description} + ++ +
+
- {showStartup() && (
- {
- showStartupActions.mutate(false);
- }}
- />
- )}
-
-
-
+
+
);
}
@@ -503,9 +505,7 @@ function Startup(props: { onClose: () => void }) {
size="lg"
onClick={async () => {
handleStartupCompleted();
- await commands.showWindow({
- Main: { init_target_mode: null },
- });
+ await commands.showWindow("Main");
getCurrentWindow().close();
}}
>
diff --git a/apps/desktop/src/routes/editor/ConfigSidebar.tsx b/apps/desktop/src/routes/editor/ConfigSidebar.tsx
index e1962ca6e1..717da9495d 100644
--- a/apps/desktop/src/routes/editor/ConfigSidebar.tsx
+++ b/apps/desktop/src/routes/editor/ConfigSidebar.tsx
@@ -1,11 +1,10 @@
-import { NumberField } from "@kobalte/core";
import {
- Collapsible,
- Collapsible as KCollapsible,
+ Collapsible,
+ Collapsible as KCollapsible,
} from "@kobalte/core/collapsible";
import {
- RadioGroup as KRadioGroup,
- RadioGroup,
+ RadioGroup as KRadioGroup,
+ RadioGroup,
} from "@kobalte/core/radio-group";
import { Select as KSelect } from "@kobalte/core/select";
import { Tabs as KTabs } from "@kobalte/core/tabs";
@@ -18,21 +17,21 @@ import { BaseDirectory, writeFile } from "@tauri-apps/plugin-fs";
import { type as ostype } from "@tauri-apps/plugin-os";
import { cx } from "cva";
import {
- batch,
- createEffect,
- createMemo,
- createResource,
- createRoot,
- createSignal,
- For,
- Index,
- on,
- onMount,
- Show,
- Suspense,
- type ValidComponent,
+ batch,
+ createEffect,
+ createMemo,
+ createResource,
+ createRoot,
+ createSignal,
+ For,
+ Index,
+ on,
+ onMount,
+ Show,
+ Suspense,
+ type ValidComponent,
} from "solid-js";
-import { createStore, produce } from "solid-js/store";
+import { createStore } from "solid-js/store";
import { Dynamic } from "solid-js/web";
import toast from "solid-toast";
import colorBg from "~/assets/illustrations/color.webp";
@@ -42,2454 +41,2315 @@ import transparentBg from "~/assets/illustrations/transparent.webp";
import { Toggle } from "~/components/Toggle";
import { generalSettingsStore } from "~/store";
import {
- type BackgroundSource,
- type CameraShape,
- type ClipOffsets,
- commands,
- type SceneSegment,
- type SplitViewSettings,
- type StereoMode,
- type TimelineSegment,
- type ZoomSegment,
+ type BackgroundSource,
+ type CameraShape,
+ commands,
+ type SceneSegment,
+ type SplitViewSettings,
+ type StereoMode,
+ type TimelineSegment,
+ type ZoomSegment,
} from "~/utils/tauri";
import IconLucideMonitor from "~icons/lucide/monitor";
import IconLucideSparkles from "~icons/lucide/sparkles";
import { CaptionsTab } from "./CaptionsTab";
import { useEditorContext } from "./context";
import {
- DEFAULT_GRADIENT_FROM,
- DEFAULT_GRADIENT_TO,
- type RGBColor,
+ DEFAULT_GRADIENT_FROM,
+ DEFAULT_GRADIENT_TO,
+ type RGBColor,
} from "./projectConfig";
-import { SceneSegmentConfig as SceneSegmentConfigComponent } from "./SceneSegmentConfig";
+import { SceneSegmentConfig } from "./SceneSegmentConfig";
import ShadowSettings from "./ShadowSettings";
import { TextInput } from "./TextInput";
import {
- ComingSoonTooltip,
- EditorButton,
- Field,
- MenuItem,
- MenuItemList,
- PopperContent,
- Slider,
- Subfield,
- topSlideAnimateClasses,
+ ComingSoonTooltip,
+ EditorButton,
+ Field,
+ MenuItem,
+ MenuItemList,
+ PopperContent,
+ Slider,
+ Subfield,
+ topSlideAnimateClasses,
} from "./ui";
const BACKGROUND_SOURCES = {
- wallpaper: "Wallpaper",
- image: "Image",
- color: "Color",
- gradient: "Gradient",
+ wallpaper: "Wallpaper",
+ image: "Image",
+ color: "Color",
+ gradient: "Gradient",
} satisfies Record
-
-
- - Permissions Required -
-Cap needs permissions to run properly.
--
-
+ {showStartup() && (
+ {
+ showStartupActions.mutate(false);
}}
-
-
-
-
-
-
-
-
+
+
+
+
-
+
-
+ />
+ )}
+
+ - Select Recording Mode -
-Choose how you want to record with Cap.
-
+
- + Permissions Required +
+Cap needs permissions to run properly.
+
-
+ -
+
+
-
- + Select Recording Mode +
+Choose how you want to record with Cap.
+
+
+
+
+
-
-
-
-
- setProject("audio", "mute", v)}
- />
-
- {editorInstance.recordings.segments[0].mic?.channels === 2 && (
-
-
- options={STEREO_MODES}
- optionValue="value"
- optionTextValue="name"
- value={STEREO_MODES.find(
- (v) => v.value === project.audio.micStereoMode
- )}
- onChange={(v) => {
- if (v) setProject("audio", "micStereoMode", v.value);
- }}
- disallowEmptySelection
- itemComponent={(props) => (
-
- as={KSelect.Item}
- item={props.item}
- >
-
- {props.item.rawValue.name}
-
-
- )}
- >
-
- class="flex-1 text-sm text-left truncate text-[--gray-500] font-normal">
- {(state) => {state.selectedOption().name}}
-
-
- as={(props) => (
-
-
-
- as={KSelect.Content}
- class={cx(topSlideAnimateClasses, "z-50")}
- >
-
- class="overflow-y-auto max-h-32"
- as={KSelect.Listbox}
- />
-
-
-
-
- )}
-
- {meta().hasMicrophone && (
- setProject("audio", "micVolumeDb", v[0])}
- minValue={-30}
- maxValue={10}
- step={0.1}
- formatTooltip={(v) =>
- v <= -30 ? "Muted" : `${v > 0 ? "+" : ""}${v.toFixed(1)} dB`
- }
- />
-
- )}
- {meta().hasSystemAudio && (
- setProject("audio", "systemVolumeDb", v[0])}
- minValue={-30}
- maxValue={10}
- step={0.1}
- formatTooltip={(v) =>
- v <= -30 ? "Muted" : `${v > 0 ? "+" : ""}${v.toFixed(1)} dB`
- }
- />
-
- )}
-
-
- {
- setProject("cursor", "hide", !v);
- }}
- />
- }
- />
-
- setProject("cursor", "size", v[0])}
- minValue={20}
- maxValue={300}
- step={1}
- />
-
-
- {
- setProject("cursor", "raw", !value);
- }}
- />
- }
- />
-
-
-
-
+
+ s.camera === null,
+ ),
+ },
+ { id: TAB_IDS.audio, icon: IconCapAudioOn },
+ {
+ id: TAB_IDS.cursor,
+ icon: IconCapCursor,
+ disabled: !(
+ meta().type === "multiple" && (meta() as any).segments[0].cursor
+ ),
+ },
+ window.FLAGS.captions && {
+ id: "captions" as const,
+ icon: IconCapMessageBubble,
+ },
+ // { id: "hotkeys" as const, icon: IconCapHotkeys },
+ ].filter(Boolean)}
+ >
+ {(item) => (
+ {
+ setState("selectedTab", item.id);
+ scrollRef.scrollTo({
+ top: 0,
+ });
+ }}
+ disabled={item.disabled}
+ >
+
+ )}
+
+
+ {/** Center the indicator with the icon */}
+
+
+
+
+
- {(selection) => (
-
- )}
-
- {
- const sceneSelection = selection();
- if (sceneSelection.type !== "scene") return;
-
- const segment =
- project.timeline?.sceneSegments?.[sceneSelection.index];
- if (!segment) return;
-
- return { selection: sceneSelection, segment };
- })()}
- >
- {(value) => (
-
- {
- const clipSegment = selection();
- if (clipSegment.type !== "clip") return;
-
- const segment =
- project.timeline?.segments?.[clipSegment.index];
- if (!segment) return;
-
- return { selection: clipSegment, segment };
- })()}
- >
- {(value) => (
- */}
+
+ {/*
+
+
+ */}
+
+ {meta().hasMicrophone && (
+ setProject("audio", "micVolumeDb", v[0])}
+ minValue={-30}
+ maxValue={10}
+ step={0.1}
+ formatTooltip={(v) =>
+ v <= -30 ? "Muted" : `${v > 0 ? "+" : ""}${v.toFixed(1)} dB`
+ }
+ />
+
+ )}
+ {meta().hasSystemAudio && (
+ setProject("audio", "systemVolumeDb", v[0])}
+ minValue={-30}
+ maxValue={10}
+ step={0.1}
+ formatTooltip={(v) =>
+ v <= -30 ? "Muted" : `${v > 0 ? "+" : ""}${v.toFixed(1)} dB`
+ }
+ />
+
+ )}
+
+
+ {
+ setProject("cursor", "hide", !v);
+ }}
+ />
+ }
+ />
+
+ setProject("cursor", "size", v[0])}
+ minValue={20}
+ maxValue={300}
+ step={1}
+ />
+
+
+ {
+ setProject("cursor", "raw", !value);
+ }}
+ />
+ }
+ />
+
+ {/* if Content has padding or margin the animation doesn't look as good */}
+
+
+ {
+ setProject("cursor", "useSvg" as any, value);
+ }}
+ />
+ }
+ />
+
+
+ {/*
+ setProject("cursor", "motionBlur", v[0])}
+ minValue={0}
+ maxValue={1}
+ step={0.001}
+ />
+ */}
+ {/* {
+ setProject(
+ "cursor",
+ "animationStyle",
+ value as CursorAnimationStyle
+ );
+ }}
+ class="flex flex-col gap-2"
+ disabled
+ >
+ {(
+ Object.entries(CURSOR_ANIMATION_STYLES) as [
+ CursorAnimationStyle,
+ string
+ ][]
+ ).map(([value, label]) => (
+
+
- )}
-
-
- setProject("cursor", "tension", v[0])}
- minValue={1}
- maxValue={500}
- step={1}
- />
-
-
- setProject("cursor", "friction", v[0])}
- minValue={0}
- maxValue={50}
- step={0.1}
- />
-
-
- setProject("cursor", "mass", v[0])}
- minValue={0.1}
- maxValue={10}
- step={0.01}
- />
-
-
-
+
+
+
+
+ setProject("audio", "mute", v)}
+ />
+
+ {editorInstance.recordings.segments[0].mic?.channels === 2 && (
+
+
+ options={STEREO_MODES}
+ optionValue="value"
+ optionTextValue="name"
+ value={STEREO_MODES.find(
+ (v) => v.value === project.audio.micStereoMode,
+ )}
+ onChange={(v) => {
+ if (v) setProject("audio", "micStereoMode", v.value);
+ }}
+ disallowEmptySelection
+ itemComponent={(props) => (
+
+ as={KSelect.Item}
+ item={props.item}
+ >
+
+ {props.item.rawValue.name}
+
+
+ )}
+ >
+
+ class="flex-1 text-sm text-left truncate text-[--gray-500] font-normal">
+ {(state) => {state.selectedOption().name}}
+
+
+ as={(props) => (
+
+
+
+ as={KSelect.Content}
+ class={cx(topSlideAnimateClasses, "z-50")}
+ >
+
+ class="overflow-y-auto max-h-32"
+ as={KSelect.Listbox}
+ />
+
+
+
+
+ )}
+
+ {/*
{
- setProject("cursor", "useSvg" as any, value);
- }}
+ checked={project.audio.mute}
+ onChange={(v) => setProject("audio", "mute", v)}
/>
- }
- />
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+ setProject("cursor", "tension", v[0])}
+ minValue={1}
+ maxValue={500}
+ step={1}
+ />
+
+
+ setProject("cursor", "friction", v[0])}
+ minValue={0}
+ maxValue={50}
+ step={0.1}
+ />
+
+
+ setProject("cursor", "mass", v[0])}
+ minValue={0.1}
+ maxValue={10}
+ step={0.01}
+ />
+
+
+
- {(() => {
- const getGradientBackground = () => {
- const angle =
- project.background.source.type === "gradient"
- ? project.background.source.angle
- : 90;
- const fromColor =
- project.background.source.type === "gradient"
- ? project.background.source.from
- : DEFAULT_GRADIENT_FROM;
- const toColor =
- project.background.source.type === "gradient"
- ? project.background.source.to
- : DEFAULT_GRADIENT_TO;
-
- return (
-
- );
- };
-
- const getColorBackground = () => {
- const backgroundColor =
- project.background.source.type === "color"
- ? project.background.source.value
- : hexToRgb(BACKGROUND_COLORS[9]);
-
- return (
-
- );
- };
-
- const getImageBackground = () => {
- let imageSrc: string = BACKGROUND_ICONS[item];
-
- if (
- item === "image" &&
- project.background.source.type === "image" &&
- project.background.source.path
- ) {
- const convertedPath = convertFileSrc(
- project.background.source.path
- );
- if (convertedPath) {
- imageSrc = convertedPath;
- }
- } else if (
- item === "wallpaper" &&
- project.background.source.type === "wallpaper" &&
- project.background.source.path
- ) {
- const selectedWallpaper = wallpapers()?.find((w) =>
- (
- project.background.source as { path?: string }
- ).path?.includes(w.id)
- );
- if (selectedWallpaper?.url) {
- imageSrc = selectedWallpaper.url;
- }
- }
-
- return (
- ![{BACKGROUND_SOURCES[item]}]({imageSrc})
+ const { project, setProject, projectHistory } = useEditorContext();
+
+ // Background tabs
+ const [backgroundTab, setBackgroundTab] =
+ createSignal("macOS");
+
+ const [wallpapers] = createResource(async () => {
+ // Only load visible wallpapers initially
+ const visibleWallpaperPaths = WALLPAPER_NAMES.map(async (id) => {
+ try {
+ const path = await resolveResource(`assets/backgrounds/${id}.jpg`);
+ return { id, path };
+ } catch (err) {
+ return { id, path: null };
+ }
+ });
+
+ // Load initial batch
+ const initialPaths = await Promise.all(visibleWallpaperPaths);
+
+ return initialPaths
+ .filter((p) => p.path !== null)
+ .map(({ id, path }) => ({
+ id,
+ url: convertFileSrc(path!),
+ rawPath: path!,
+ }));
+ });
+
+ // set padding if background is selected
+ const ensurePaddingForBackground = () => {
+ if (project.background.padding === 0)
+ setProject("background", "padding", 10);
+ };
+
+ // Validate background source path on mount
+ onMount(async () => {
+ if (
+ project.background.source.type === "wallpaper" ||
+ project.background.source.type === "image"
+ ) {
+ const path = project.background.source.path;
+
+ if (path) {
+ if (project.background.source.type === "wallpaper") {
+ // If the path is just the wallpaper ID (e.g. "sequoia-dark"), get the full path
+ if (
+ WALLPAPER_NAMES.includes(path as (typeof WALLPAPER_NAMES)[number])
+ ) {
+ // Wait for wallpapers to load
+ const loadedWallpapers = wallpapers();
+ if (!loadedWallpapers) return;
+
+ // Find the wallpaper with matching ID
+ const wallpaper = loadedWallpapers.find((w) => w.id === path);
+ if (!wallpaper?.url) return;
+
+ // Directly trigger the radio group's onChange handler
+ const radioGroupOnChange = async (photoUrl: string) => {
+ try {
+ const wallpaper = wallpapers()?.find((w) => w.url === photoUrl);
+ if (!wallpaper) return;
+
+ // Get the raw path without any URL prefixes
+ const rawPath = decodeURIComponent(
+ photoUrl.replace("file://", ""),
+ );
+
+ debouncedSetProject(rawPath);
+ } catch (err) {
+ toast.error("Failed to set wallpaper");
+ }
+ };
+
+ await radioGroupOnChange(wallpaper.url);
+ }
+ } else if (project.background.source.type === "image") {
+ (async () => {
+ try {
+ const convertedPath = convertFileSrc(path);
+ await fetch(convertedPath, { method: "HEAD" });
+ } catch (err) {
+ setProject("background", "source", {
+ type: "image",
+ path: null,
+ });
+ }
+ })();
+ }
+ }
+ }
+ });
+
+ const filteredWallpapers = createMemo(() => {
+ const currentTab = backgroundTab();
+ return wallpapers()?.filter((wp) => wp.id.startsWith(currentTab)) || [];
+ });
+
+ const [scrollX, setScrollX] = createSignal(0);
+ const [reachedEndOfScroll, setReachedEndOfScroll] = createSignal(false);
+
+ const [backgroundRef, setBackgroundRef] = createSignal();
+
+ createEventListenerMap(
+ () => backgroundRef() ?? [],
+ {
+ /** Handle background tabs overflowing to show fade */
+ scroll: () => {
+ const el = backgroundRef();
+ if (el) {
+ setScrollX(el.scrollLeft);
+ const reachedEnd = el.scrollWidth - el.clientWidth - el.scrollLeft;
+ setReachedEndOfScroll(reachedEnd === 0);
+ }
+ },
+ //Mouse wheel and touchpad support
+ wheel: (e: WheelEvent) => {
+ const el = backgroundRef();
+ if (el) {
+ e.preventDefault();
+ el.scrollLeft +=
+ Math.abs(e.deltaX) > Math.abs(e.deltaY) ? e.deltaX : e.deltaY;
+ }
+ },
+ },
+ { passive: false },
+ );
+
+ let fileInput!: HTMLInputElement;
+
+ // Optimize the debounced set project function
+ const debouncedSetProject = (wallpaperPath: string) => {
+ const resumeHistory = projectHistory.pause();
+ queueMicrotask(() => {
+ batch(() => {
+ setProject("background", "source", {
+ type: "wallpaper",
+ path: wallpaperPath,
+ } as const);
+ resumeHistory();
+ });
+ });
+ };
+
+ const backgrounds: {
+ [K in BackgroundSource["type"]]: Extract;
+ } = {
+ wallpaper: {
+ type: "wallpaper",
+ path: null,
+ },
+ image: {
+ type: "image",
+ path: null,
+ },
+ color: {
+ type: "color",
+ value: DEFAULT_GRADIENT_FROM,
+ },
+ gradient: {
+ type: "gradient",
+ from: DEFAULT_GRADIENT_FROM,
+ to: DEFAULT_GRADIENT_TO,
+ },
+ };
+
+ const generalSettings = generalSettingsStore.createQuery();
+ const hapticsEnabled = () =>
+ generalSettings.data?.hapticsEnabled && ostype() === "macos";
+
+ return (
+
+ {
+ const tab = v as BackgroundSource["type"];
+ ensurePaddingForBackground();
+ switch (tab) {
+ case "image": {
+ setProject("background", "source", {
+ type: "image",
+ path:
+ project.background.source.type === "image"
+ ? project.background.source.path
+ : null,
+ });
+ break;
+ }
+ case "color": {
+ setProject("background", "source", {
+ type: "color",
+ value:
+ project.background.source.type === "color"
+ ? project.background.source.value
+ : DEFAULT_GRADIENT_FROM,
+ });
+ break;
+ }
+ case "gradient": {
+ setProject("background", "source", {
+ type: "gradient",
+ from:
+ project.background.source.type === "gradient"
+ ? project.background.source.from
+ : DEFAULT_GRADIENT_FROM,
+ to:
+ project.background.source.type === "gradient"
+ ? project.background.source.to
+ : DEFAULT_GRADIENT_TO,
+ angle:
+ project.background.source.type === "gradient"
+ ? project.background.source.angle
+ : 90,
+ });
+ break;
+ }
+ case "wallpaper": {
+ setProject("background", "source", {
+ type: "wallpaper",
+ path:
+ project.background.source.type === "wallpaper"
+ ? project.background.source.path
+ : null,
+ });
+ break;
+ }
+ }
+ }}
+ >
+
+
+ {(item) => {
+ const el = (props?: object) => (
+
+
+ );
+
+ return el({});
+ }}
+
+
+ {/** Dashed divider */}
+
+
+ {/** Background Tabs */}
+
+
+
+ {/** End of Background Tabs */}
+
+ (
+ project.background.source as { path?: string }
+ ).path?.includes(w.id),
+ )?.url ?? undefined)
+ : undefined
+ }
+ onChange={(photoUrl) => {
+ try {
+ const wallpaper = wallpapers()?.find(
+ (w) => w.url === photoUrl,
+ );
+ if (!wallpaper) return;
+
+ // Get the raw path without any URL prefixes
+
+ debouncedSetProject(wallpaper.rawPath);
+
+ ensurePaddingForBackground();
+ } catch (err) {
+ toast.error("Failed to set wallpaper");
+ }
+ }}
+ class="grid grid-cols-7 gap-2 h-auto"
+ >
+
+
+ }
+ >
+
+ {(() => {
+ const getGradientBackground = () => {
+ const angle =
+ project.background.source.type === "gradient"
+ ? project.background.source.angle
+ : 90;
+ const fromColor =
+ project.background.source.type === "gradient"
+ ? project.background.source.from
+ : DEFAULT_GRADIENT_FROM;
+ const toColor =
+ project.background.source.type === "gradient"
+ ? project.background.source.to
+ : DEFAULT_GRADIENT_TO;
+
+ return (
+
+ );
+ };
+
+ const getColorBackground = () => {
+ const backgroundColor =
+ project.background.source.type === "color"
+ ? project.background.source.value
+ : hexToRgb(BACKGROUND_COLORS[9]);
+
+ return (
+
+ );
+ };
+
+ const getImageBackground = () => {
+ // Always start with the default icon
+ let imageSrc: string = BACKGROUND_ICONS[item];
+
+ // Only override for "image" if a valid path exists
+ if (
+ item === "image" &&
+ project.background.source.type === "image" &&
+ project.background.source.path
+ ) {
+ const convertedPath = convertFileSrc(
+ project.background.source.path,
+ );
+ // Only use converted path if it's valid
+ if (convertedPath) {
+ imageSrc = convertedPath;
+ }
+ }
+ // Only override for "wallpaper" if a valid wallpaper is found
+ else if (
+ item === "wallpaper" &&
+ project.background.source.type === "wallpaper" &&
+ project.background.source.path
+ ) {
+ const selectedWallpaper = wallpapers()?.find((w) =>
+ (
+ project.background.source as { path?: string }
+ ).path?.includes(w.id),
+ );
+ // Only use wallpaper URL if it exists
+ if (selectedWallpaper?.url) {
+ imageSrc = selectedWallpaper.url;
+ }
+ }
+
+ return (
+
+ );
+ };
+
+ switch (item) {
+ case "gradient":
+ return getGradientBackground();
+ case "color":
+ return getColorBackground();
+ case "image":
+ case "wallpaper":
+ return getImageBackground();
+ default:
+ return null;
+ }
+ })()}
+ {BACKGROUND_SOURCES[item]}
+
+
+
+ Loading wallpapers...
+
+
+
+ {(photo) => (
+
+
+
+
+
+ )}
+
+
+
+ )})
+
+ )}
+
+
+
+
+
+
-
- );
-
- return el({});
- }}
-
-
-
-
+ {
+ setProject("background", "source", {
+ type: "color",
+ value,
+ });
+ }}
+ />
+
+
+
+
+ {(color) => (
+
+ )}
+
+
+ {/*
-
- Loading wallpapers...
-
-
-
- {(photo) => (
-
-
-
-
-
- )}
-
-
-
-
-
- )}
-
-
-
-
-
-
- {
- setProject("background", "source", {
- type: "color",
- value,
- });
- }}
- />
-
-
-
-
- {(color) => (
-
- )}
-
-
-
-
-
- );
- }}
-
- {
- backgrounds.gradient.from = from;
- setProject("background", "source", {
- type: "gradient",
- from,
- });
- }}
- />
- {
- backgrounds.gradient.to = to;
- setProject("background", "source", {
- type: "gradient",
- to,
- });
- }}
- />
-
- {
- const start = angle();
- const resumeHistory = projectHistory.pause();
-
- createRoot((dispose) =>
- createEventListenerMap(window, {
- mouseup: () => dispose(),
- mousemove: (moveEvent) => {
- const rawNewAngle =
- Math.round(
- start +
- (downEvent.clientY - moveEvent.clientY)
- ) % max;
- const newAngle = moveEvent.shiftKey
- ? rawNewAngle
- : Math.round(rawNewAngle / 45) * 45;
-
- if (
- !moveEvent.shiftKey &&
- hapticsEnabled() &&
- project.background.source.type ===
- "gradient" &&
- project.background.source.angle !== newAngle
- ) {
- commands.performHapticFeedback(
- "Alignment",
- "Now"
- );
- }
-
- setProject("background", "source", {
- type: "gradient",
- angle:
- newAngle < 0 ? newAngle + max : newAngle,
- });
- },
- })
- );
- }}
- >
-
-
-
-
- {(gradient) => (
-
- )}
-
-
-
+
+
+ );
+ }}
+
+ {
+ backgrounds.gradient.from = from;
+ setProject("background", "source", {
+ type: "gradient",
+ from,
+ });
+ }}
+ />
+ {
+ backgrounds.gradient.to = to;
+ setProject("background", "source", {
+ type: "gradient",
+ to,
+ });
+ }}
+ />
+
+ {
+ const start = angle();
+ const resumeHistory = projectHistory.pause();
+
+ createRoot((dispose) =>
+ createEventListenerMap(window, {
+ mouseup: () => dispose(),
+ mousemove: (moveEvent) => {
+ const rawNewAngle =
+ Math.round(
+ start +
+ (downEvent.clientY - moveEvent.clientY),
+ ) % max;
+ const newAngle = moveEvent.shiftKey
+ ? rawNewAngle
+ : Math.round(rawNewAngle / 45) * 45;
+
+ if (
+ !moveEvent.shiftKey &&
+ hapticsEnabled() &&
+ project.background.source.type ===
+ "gradient" &&
+ project.background.source.angle !== newAngle
+ ) {
+ commands.performHapticFeedback(
+ "Alignment",
+ "Now",
+ );
+ }
+
+ setProject("background", "source", {
+ type: "gradient",
+ angle:
+ newAngle < 0 ? newAngle + max : newAngle,
+ });
+ },
+ }),
+ );
+ }}
+ >
+
+
+
+
+ {(gradient) => (
+
+ )}
+
+
+
-
- setProject("camera", "hide", hide)}
- />
-
-
+ const { project, setProject } = useEditorContext();
+
+ return (
+
+ setProject("camera", "size", v[0])}
- minValue={20}
- maxValue={80}
- step={0.1}
- formatTooltip="%"
- />
-
- setProject("camera", "zoom_size", v[0])}
- minValue={10}
- maxValue={60}
- step={0.1}
- formatTooltip="%"
- />
-
- setProject("camera", "rounding", v[0])}
- minValue={0}
- maxValue={100}
- step={0.1}
- formatTooltip="%"
- />
-
-
- );
+ */}
+
+
+ {/** Dashed divider */}
+
+
- {
- const [x, y] = v.split(":");
- setProject("camera", "position", { x, y } as any);
- }}
- class="mt-[0.75rem] rounded-[0.5rem] border border-gray-3 bg-gray-2 w-full h-[7.5rem] relative"
- >
-
- {(item) => (
-
- setProject("camera", "position", item)}
- >
-
-
-
- )}
-
-
-
-
+
+ setProject("camera", "hide", hide)}
+ />
+
+
+ setProject("camera", "mirror", mirror)}
+ />
+
+
+
+ options={CAMERA_SHAPES}
+ optionValue="value"
+ optionTextValue="name"
+ value={CAMERA_SHAPES.find(
+ (v) => v.value === project.camera.shape,
+ )}
+ onChange={(v) => {
+ if (v) setProject("camera", "shape", v.value);
+ }}
+ disallowEmptySelection
+ itemComponent={(props) => (
+
+ as={KSelect.Item}
+ item={props.item}
+ >
+
+ {props.item.rawValue.name}
+
+
+ )}
+ >
+
+ class="flex-1 text-sm text-left truncate text-[--gray-500] font-normal">
+ {(state) => {state.selectedOption().name}}
+
+
+ as={(props) => (
+
+
+
+ as={KSelect.Content}
+ class={cx(topSlideAnimateClasses, "z-50")}
+ >
+
+ class="overflow-y-auto max-h-32"
+ as={KSelect.Listbox}
+ />
+
+
+
+
+
+ {/*
setProject("camera", "mirror", mirror)}
+ checked={project.camera.use_camera_aspect}
+ onChange={(v) => setProject("camera", "use_camera_aspect", v)}
/>
-
-
-
- options={CAMERA_SHAPES}
- optionValue="value"
- optionTextValue="name"
- value={CAMERA_SHAPES.find(
- (v) => v.value === project.camera.shape
- )}
- onChange={(v) => {
- if (v) setProject("camera", "shape", v.value);
- }}
- disallowEmptySelection
- itemComponent={(props) => (
-
- as={KSelect.Item}
- item={props.item}
- >
-
- {props.item.rawValue.name}
-
-
- )}
- >
-
- class="flex-1 text-sm text-left truncate text-[--gray-500] font-normal">
- {(state) => {state.selectedOption().name}}
-
-
- as={(props) => (
-
-
-
- as={KSelect.Content}
- class={cx(topSlideAnimateClasses, "z-50")}
- >
-
- class="overflow-y-auto max-h-32"
- as={KSelect.Listbox}
- />
-
-
-
-
-
-
-
-
+ {
+ const [x, y] = v.split(":");
+ setProject("camera", "position", { x, y } as any);
+ }}
+ class="mt-[0.75rem] rounded-[0.5rem] border border-gray-3 bg-gray-2 w-full h-[7.5rem] relative"
+ >
+
+ {(item) => (
+
+ setProject("camera", "position", item)}
+ >
+
+
+
+ )}
+
+
+
+
- setProject("camera", "shadow", v[0])}
- minValue={0}
- maxValue={100}
- step={0.1}
- formatTooltip="%"
- />
- {
- setProject("camera", "advanced_shadow", {
- ...(project.camera.advanced_shadow ?? {
- size: 50,
- opacity: 18,
- blur: 50,
- }),
- size: v[0],
- });
- },
- }}
- opacity={{
- value: [project.camera.advanced_shadow?.opacity ?? 18],
- onChange: (v) => {
- setProject("camera", "advanced_shadow", {
- ...(project.camera.advanced_shadow ?? {
- size: 50,
- opacity: 18,
- blur: 50,
- }),
- opacity: v[0],
- });
- },
- }}
- blur={{
- value: [project.camera.advanced_shadow?.blur ?? 50],
- onChange: (v) => {
- setProject("camera", "advanced_shadow", {
- ...(project.camera.advanced_shadow ?? {
- size: 50,
- opacity: 18,
- blur: 50,
- }),
- blur: v[0],
- });
- },
- }}
- />
-
-
-
+ setProject("camera", "shadow", v[0])}
+ minValue={0}
+ maxValue={100}
+ step={0.1}
+ formatTooltip="%"
+ />
+ {
+ setProject("camera", "advanced_shadow", {
+ ...(project.camera.advanced_shadow ?? {
+ size: 50,
+ opacity: 18,
+ blur: 50,
+ }),
+ size: v[0],
+ });
+ },
+ }}
+ opacity={{
+ value: [project.camera.advanced_shadow?.opacity ?? 18],
+ onChange: (v) => {
+ setProject("camera", "advanced_shadow", {
+ ...(project.camera.advanced_shadow ?? {
+ size: 50,
+ opacity: 18,
+ blur: 50,
+ }),
+ opacity: v[0],
+ });
+ },
+ }}
+ blur={{
+ value: [project.camera.advanced_shadow?.blur ?? 50],
+ onChange: (v) => {
+ setProject("camera", "advanced_shadow", {
+ ...(project.camera.advanced_shadow ?? {
+ size: 50,
+ opacity: 18,
+ blur: 50,
+ }),
+ blur: v[0],
+ });
+ },
+ }}
+ />
+
+
+ {/*
-
-
- Zoom {props.segmentIndex + 1}
-
-
-
-
-
-
- - Loading... -
-
-
-
- );
+ const { project, editorInstance } = useEditorContext();
+
+ const start = createMemo(() => props.segment.start);
+
+ const segmentIndex = createMemo(() => {
+ const st = start();
+ const i = project.timeline?.segments.findIndex(
+ (s) => s.start <= st && s.end > st,
+ );
+ if (i === undefined || i === -1) return 0;
+ return i;
+ });
+
+ const relativeTime = createMemo(() => {
+ const st = start();
+ const segment = project.timeline?.segments[segmentIndex()];
+ if (!segment) return 0;
+ return Math.max(0, st - segment.start);
+ });
+
+ const video = document.createElement("video");
+ createEffect(() => {
+ const path = convertFileSrc(
+ `${
+ editorInstance.path
+ }/content/segments/segment-${segmentIndex()}/display.mp4`,
+ );
+ video.src = path;
+ video.preload = "auto";
+ video.load();
+ });
+
+ createEffect(() => {
+ const t = relativeTime();
+ if (t === undefined) return;
+
+ if (video.readyState >= 2) {
+ video.currentTime = t;
+ } else {
+ const handleCanPlay = () => {
+ video.currentTime = t;
+ video.removeEventListener("canplay", handleCanPlay);
+ };
+ video.addEventListener("canplay", handleCanPlay);
+ }
+ });
+
+ const render = () => {
+ if (!canvasRef || video.readyState < 2) return;
+
+ const ctx = canvasRef.getContext("2d");
+ if (!ctx) return;
+
+ ctx.imageSmoothingEnabled = false;
+ ctx.clearRect(0, 0, canvasRef.width, canvasRef.height);
+
+ const raw = editorInstance.recordings.segments[0].display;
+ const croppedPosition = project.background.crop?.position || { x: 0, y: 0 };
+ const croppedSize = project.background.crop?.size || {
+ x: raw.width,
+ y: raw.height,
+ };
+
+ ctx.drawImage(
+ video,
+ croppedPosition.x,
+ croppedPosition.y,
+ croppedSize.x,
+ croppedSize.y,
+ 0,
+ 0,
+ canvasRef.width,
+ canvasRef.height,
+ );
+ };
+
+ const [loaded, setLoaded] = createSignal(false);
+ video.onloadeddata = () => {
+ setLoaded(true);
+ render();
+ };
+ video.onseeked = render;
+ video.onerror = () => {
+ setTimeout(() => video.load(), 100);
+ };
+
+ let canvasRef!: HTMLCanvasElement;
+
+ return (
+ <>
+ {props.segment.amount.toFixed(1)}x
-
+
+
+ Zoom {props.segmentIndex + 1}
+
+
+
+
+
+
+ + Loading... +
+
+
+
+ );
}
function ZoomSegmentConfig(props: {
- segmentIndex: number;
- segment: ZoomSegment;
+ segmentIndex: number;
+ segment: ZoomSegment;
}) {
- const generalSettings = generalSettingsStore.createQuery();
- const {
- project,
- setProject,
- editorInstance,
- setEditorState,
- projectHistory,
- } = useEditorContext();
-
- const states = {
- manual:
- props.segment.mode === "auto"
- ? { x: 0.5, y: 0.5 }
- : props.segment.mode.manual,
- };
-
- return (
- <>
- {props.segment.amount.toFixed(1)}x
+ {
- const bounds =
- downEvent.currentTarget.getBoundingClientRect();
-
- createRoot((dispose) =>
- createEventListenerMap(window, {
- mouseup: () => dispose(),
- mousemove: (moveEvent) => {
- setProject(
- "timeline",
- "zoomSegments",
- props.segmentIndex,
- "mode",
- "manual",
- {
- x: Math.max(
- Math.min(
- (moveEvent.clientX - bounds.left) /
- bounds.width,
- 1
- ),
- 0
- ),
- y: Math.max(
- Math.min(
- (moveEvent.clientY - bounds.top) /
- bounds.height,
- 1
- ),
- 0
- ),
- }
- );
- },
- })
- );
- }}
- >
-
- );
- }}
-
-
-
-
-
-
-
-
-
-
-
- Loading preview...
-
- {
+ const bounds =
+ downEvent.currentTarget.getBoundingClientRect();
+
+ createRoot((dispose) =>
+ createEventListenerMap(window, {
+ mouseup: () => dispose(),
+ mousemove: (moveEvent) => {
+ setProject(
+ "timeline",
+ "zoomSegments",
+ props.segmentIndex,
+ "mode",
+ "manual",
+ {
+ x: Math.max(
+ Math.min(
+ (moveEvent.clientX - bounds.left) /
+ bounds.width,
+ 1,
+ ),
+ 0,
+ ),
+ y: Math.max(
+ Math.min(
+ (moveEvent.clientY - bounds.top) /
+ bounds.height,
+ 1,
+ ),
+ 0,
+ ),
+ },
+ );
+ },
+ }),
+ );
+ }}
+ >
+
+ );
+ }}
+
+
+
+
+
+
+
+
+
+
+
+ Loading preview...
+
+
- {
- projectActions.deleteClipSegment(props.segmentIndex);
- }}
- disabled={
- (
- project.timeline?.segments.filter(
- (s) => s.recordingSegment === props.segment.recordingSegment
- ) ?? []
- ).length < 2
- }
- leftIcon={
-
-
-
- setEditorState("timeline", "selection", null)}
- leftIcon={
-
-
-
-
- {meta().hasSystemAudio && (
- Clip Settings
-- These settings apply to all segments for the current clip -
-
-
-
- {
- props.onChange(v);
- }}
- >
- {
- if (!rawValue() || value() === "" || Number.isNaN(rawValue())) {
- setValue("0");
- props.onChange(0);
- }
- }}
- class="w-[5rem] p-[0.375rem] border rounded-[0.5rem] bg-gray-1 focus-visible:outline-none"
- />
-
- ms
-
-
- {[-100, -10, 10, 100].map((v) => (
-
- ))}
-
-
+ {
+ projectActions.deleteClipSegment(props.segmentIndex);
+ }}
+ disabled={
+ (
+ project.timeline?.segments.filter(
+ (s) => s.recordingSegment === props.segment.recordingSegment,
+ ) ?? []
+ ).length < 2
+ }
+ leftIcon={
+
+
+ setEditorState("timeline", "selection", null)}
+ leftIcon={
+
+
- {
- projectActions.deleteSceneSegment(props.segmentIndex);
- }}
- leftIcon={
-
-
- setEditorState("timeline", "selection", null)}
- leftIcon={
-
-
-
- Default
-
-
- Camera Only
-
-
- Hide Camera
-
-
-
-
-
-
-
-
-
-
-
-
-
- {props.segment.mode === "cameraOnly"
- ? "Shows only the camera feed"
- : props.segment.mode === "hideCamera"
- ? "Shows only the screen recording"
- : "Shows both screen and camera"}
-
-
-
- );
+ const [text, setText] = createWritableMemo(() => rgbToHex(props.value));
+ let prevHex = rgbToHex(props.value);
+
+ let colorInput!: HTMLInputElement;
+
+ return (
+
+
+ );
}
function rgbToHex(rgb: [number, number, number]) {
- return `#${rgb
- .map((c) => c.toString(16).padStart(2, "0"))
- .join("")
- .toUpperCase()}`;
+ return `#${rgb
+ .map((c) => c.toString(16).padStart(2, "0"))
+ .join("")
+ .toUpperCase()}`;
}
function hexToRgb(hex: string): [number, number, number] | null {
- const match = hex.match(/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i);
- if (!match) return null;
- return match.slice(1).map((c) => Number.parseInt(c, 16)) as any;
+ const match = hex.match(/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i);
+ if (!match) return null;
+ return match.slice(1).map((c) => Number.parseInt(c, 16)) as any;
}
+
+// Position control moved to SceneSegmentConfig.tsx for better organization
diff --git a/apps/desktop/src/routes/editor/Editor.tsx b/apps/desktop/src/routes/editor/Editor.tsx
index 6bdf7466d9..1895220872 100644
--- a/apps/desktop/src/routes/editor/Editor.tsx
+++ b/apps/desktop/src/routes/editor/Editor.tsx
@@ -114,11 +114,11 @@ function Inner() {
<>
- (
window.COUNTDOWN === 0
@@ -49,7 +47,6 @@ export default function () {
const [time, setTime] = createSignal(Date.now());
const currentRecording = createCurrentRecordingQuery();
const optionsQuery = createOptionsQuery();
- const auth = authStore.createQuery();
const audioLevel = createAudioInputLevel();
@@ -159,33 +156,6 @@ export default function () {
return t;
};
- const isMaxRecordingLimitEnabled = () => {
- // Only enforce the limit on instant mode.
- // We enforce it on studio mode when exporting.
- return (
- optionsQuery.rawOptions.mode === "instant" &&
- // If the data is loaded and the user is not upgraded
- auth.data?.plan?.upgraded === false
- );
- };
-
- let aborted = false;
- createEffect(() => {
- if (
- isMaxRecordingLimitEnabled() &&
- adjustedTime() > MAX_RECORDING_FOR_FREE &&
- !aborted
- ) {
- aborted = true;
- stopRecording.mutate();
- }
- });
-
- const remainingRecordingTime = () => {
- if (MAX_RECORDING_FOR_FREE < adjustedTime()) return 0;
- return MAX_RECORDING_FOR_FREE - adjustedTime();
- };
-
const [countdownRef, setCountdownRef] = createSignal(
null,
);
@@ -226,12 +196,7 @@ export default function () {
>
- {formatTime(remainingRecordingTime() / 1000)}
-
+ {formatTime(adjustedTime() / 1000)}
diff --git a/apps/desktop/src/routes/recordings-overlay.tsx b/apps/desktop/src/routes/recordings-overlay.tsx
index 01a7812889..b7a926a99a 100644
--- a/apps/desktop/src/routes/recordings-overlay.tsx
+++ b/apps/desktop/src/routes/recordings-overlay.tsx
@@ -3,7 +3,7 @@ import Tooltip from "@corvu/tooltip";
import { createElementBounds } from "@solid-primitives/bounds";
import { makePersisted } from "@solid-primitives/storage";
import { createMutation, createQuery } from "@tanstack/solid-query";
-import { Channel, convertFileSrc } from "@tauri-apps/api/core";
+import { convertFileSrc } from "@tauri-apps/api/core";
import { cx } from "cva";
import {
type Accessor,
@@ -30,7 +30,6 @@ import {
commands,
events,
type FramesRendered,
- type UploadProgress,
type UploadResult,
} from "~/utils/tauri";
import IconLucideClock from "~icons/lucide/clock";
@@ -727,8 +726,8 @@ function createRecordingMutations(
}
}
- const uploadChannel = new Channel((progress) => {
- console.log("Upload progress:", progress);
+ const unlisten = await events.uploadProgress.listen((event) => {
+ console.log("Upload progress event:", event.payload);
setActionState(
produce((actionState) => {
if (
@@ -737,65 +736,70 @@ function createRecordingMutations(
)
return;
- actionState.state.progress = Math.round(progress.progress * 100);
+ actionState.state.progress = Math.round(
+ event.payload.progress * 100,
+ );
}),
);
});
- let res: UploadResult;
- if (isRecording) {
- setActionState({
- type: "upload",
- state: { type: "rendering", state: { type: "starting" } },
- });
+ try {
+ let res: UploadResult;
+ if (isRecording) {
+ setActionState({
+ type: "upload",
+ state: { type: "rendering", state: { type: "starting" } },
+ });
- const progress = createRenderProgressCallback("upload", setActionState);
+ const progress = createRenderProgressCallback(
+ "upload",
+ setActionState,
+ );
- await exportWithDefaultSettings(progress);
+ await exportWithDefaultSettings(progress);
- // Show quick progress animation for existing video
- setActionState(
- produce((s) => {
- if (
- s.type === "copy" &&
- s.state.type === "rendering" &&
- s.state.state.type === "rendering"
- )
- s.state.state.renderedFrames = s.state.state.totalFrames;
- }),
- );
+ // Show quick progress animation for existing video
+ setActionState(
+ produce((s) => {
+ if (
+ s.type === "copy" &&
+ s.state.type === "rendering" &&
+ s.state.state.type === "rendering"
+ )
+ s.state.state.renderedFrames = s.state.state.totalFrames;
+ }),
+ );
- setActionState({
- type: "upload",
- state: { type: "uploading", progress: 0 },
- });
+ setActionState({
+ type: "upload",
+ state: { type: "uploading", progress: 0 },
+ });
- res = await commands.uploadExportedVideo(
- media.path,
- {
+ res = await commands.uploadExportedVideo(media.path, {
Initial: { pre_created_video: null },
- },
- uploadChannel,
- );
- } else {
- setActionState({
- type: "upload",
- state: { type: "uploading", progress: 0 },
- });
+ });
+ } else {
+ setActionState({
+ type: "upload",
+ state: { type: "uploading", progress: 0 },
+ });
- res = await commands.uploadScreenshot(media.path);
- }
+ res = await commands.uploadScreenshot(media.path);
+ }
- switch (res) {
- case "NotAuthenticated":
- throw new Error("Not authenticated");
- case "PlanCheckFailed":
- throw new Error("Plan check failed");
- case "UpgradeRequired":
- onEvent("upgradeRequired");
- return;
- default:
- break;
+ switch (res) {
+ case "NotAuthenticated":
+ throw new Error("Not authenticated");
+ case "PlanCheckFailed":
+ throw new Error("Plan check failed");
+ case "UpgradeRequired":
+ onEvent("upgradeRequired");
+ return;
+ default:
+ break;
+ }
+ } finally {
+ unlisten();
}
setActionState({ type: "upload", state: { type: "link-copied" } });
diff --git a/apps/desktop/src/routes/target-select-overlay.tsx b/apps/desktop/src/routes/target-select-overlay.tsx
index 1ceafbb712..57b50e11ce 100644
--- a/apps/desktop/src/routes/target-select-overlay.tsx
+++ b/apps/desktop/src/routes/target-select-overlay.tsx
@@ -31,24 +31,12 @@ import {
type ScreenCaptureTarget,
type TargetUnderCursor,
} from "~/utils/tauri";
-import {
- RecordingOptionsProvider,
- useRecordingOptions,
-} from "./(window-chrome)/OptionsContext";
const capitalize = (str: string) => {
return str.charAt(0).toUpperCase() + str.slice(1);
};
export default function () {
- return (
-
-
- );
-}
-
-function Inner() {
const [params] = useSearchParams<{ displayId: DisplayId }>();
const { rawOptions, setOptions } = createOptionsQuery();
const [toggleModeSelect, setToggleModeSelect] = createSignal(false);
@@ -64,48 +52,16 @@ function Inner() {
});
onCleanup(() => unsubTargetUnderCursor.then((unsub) => unsub()));
- const selectedWindow = createQuery(() => ({
- queryKey: ["selectedWindow", rawOptions.captureTarget],
- queryFn: async () => {
- if (rawOptions.captureTarget.variant !== "window") return null;
- const windowId = rawOptions.captureTarget.id;
-
- const windows = await commands.listCaptureWindows();
- const window = windows.find((w) => w.id === windowId);
-
- if (!window) return null;
-
- return {
- id: window.id,
- app_name: window.owner_name || window.name || "Unknown",
- bounds: window.bounds,
- };
- },
- enabled:
- rawOptions.captureTarget.variant === "window" &&
- rawOptions.targetMode === "window",
- staleTime: 5 * 1000,
- }));
-
- const windowToShow = () => {
- const hoveredWindow = targetUnderCursor.window;
- if (hoveredWindow) return hoveredWindow;
- if (rawOptions.captureTarget.variant === "window") {
- const selected = selectedWindow.data;
- if (selected) return selected;
- }
- return hoveredWindow;
- };
-
const windowIcon = createQuery(() => ({
- queryKey: ["windowIcon", windowToShow()?.id],
+ queryKey: ["windowIcon", targetUnderCursor.window?.id],
queryFn: async () => {
- const window = windowToShow();
- if (!window?.id) return null;
- return await commands.getWindowIcon(window.id.toString());
+ if (!targetUnderCursor.window?.id) return null;
+ return await commands.getWindowIcon(
+ targetUnderCursor.window.id.toString(),
+ );
},
- enabled: !!windowToShow()?.id,
- staleTime: 5 * 60 * 1000,
+ enabled: !!targetUnderCursor.window?.id,
+ staleTime: 5 * 60 * 1000, // Cache for 5 minutes
}));
const displayInformation = createQuery(() => ({
@@ -209,19 +165,16 @@ function Inner() {
setToggleModeSelect={setToggleModeSelect}
target={{ variant: "display", id: params.displayId! }}
/>
-
)}
- {
- if (editorState.timeline.selection) {
- setEditorState("timeline", "selection", null);
- return;
- }
- projectHistory.undo();
- }}
- disabled={
- !projectHistory.canUndo() && !editorState.timeline.selection
- }
- tooltipText={
- editorState.timeline.selection ? "Close selection" : "Undo"
- }
+ onClick={() => projectHistory.undo()}
+ disabled={!projectHistory.canUndo()}
+ tooltipText="Undo"
leftIcon={ {
- if (editorState.timeline.selection) {
- setEditorState("timeline", "selection", null);
- return;
- }
- projectHistory.redo();
- }}
- disabled={
- !projectHistory.canRedo() && !editorState.timeline.selection
- }
- tooltipText={
- editorState.timeline.selection ? "Close selection" : "Redo"
- }
+ onClick={() => projectHistory.redo()}
+ disabled={!projectHistory.canRedo()}
+ tooltipText="Redo"
leftIcon={((progress) => {
- console.log("Upload progress:", progress);
+ const unlisten = await events.uploadProgress.listen((event) => {
+ console.log("Upload progress event:", event.payload);
setUploadState(
produce((state) => {
if (state.type !== "uploading") return;
- state.progress = Math.round(progress.progress * 100);
+ state.progress = Math.round(event.payload.progress * 100);
}),
);
});
- setUploadState({ type: "starting" });
+ try {
+ setUploadState({ type: "starting" });
- // Setup progress listener before starting upload
+ // Setup progress listener before starting upload
- console.log("Starting actual upload...");
+ console.log("Starting actual upload...");
- await exportVideo(
- projectPath,
- {
- format: "Mp4",
- fps: 30,
- resolution_base: {
- x: RESOLUTION_OPTIONS._1080p.width,
- y: RESOLUTION_OPTIONS._1080p.height,
+ await exportVideo(
+ projectPath,
+ {
+ format: "Mp4",
+ fps: 30,
+ resolution_base: {
+ x: RESOLUTION_OPTIONS._1080p.width,
+ y: RESOLUTION_OPTIONS._1080p.height,
+ },
+ compression: "Web",
},
- compression: "Web",
- },
- (msg) => {
- setUploadState(
- reconcile({
- type: "rendering",
- renderedFrames: msg.renderedCount,
- totalFrames: msg.totalFrames,
- }),
- );
- },
- );
+ (msg) => {
+ setUploadState(
+ reconcile({
+ type: "rendering",
+ renderedFrames: msg.renderedCount,
+ totalFrames: msg.totalFrames,
+ }),
+ );
+ },
+ );
- setUploadState({ type: "uploading", progress: 0 });
+ setUploadState({ type: "uploading", progress: 0 });
- // Now proceed with upload
- const result = meta().sharing
- ? await commands.uploadExportedVideo(
- projectPath,
- "Reupload",
- uploadChannel,
- )
- : await commands.uploadExportedVideo(
- projectPath,
- {
+ // Now proceed with upload
+ const result = meta().sharing
+ ? await commands.uploadExportedVideo(projectPath, "Reupload")
+ : await commands.uploadExportedVideo(projectPath, {
Initial: { pre_created_video: null },
- },
- uploadChannel,
- );
+ });
- if (result === "NotAuthenticated") {
- throw new Error("You need to sign in to share recordings");
- } else if (result === "PlanCheckFailed")
- throw new Error("Failed to verify your subscription status");
- else if (result === "UpgradeRequired")
- throw new Error("This feature requires an upgraded plan");
+ if (result === "NotAuthenticated") {
+ throw new Error("You need to sign in to share recordings");
+ } else if (result === "PlanCheckFailed")
+ throw new Error("Failed to verify your subscription status");
+ else if (result === "UpgradeRequired")
+ throw new Error("This feature requires an upgraded plan");
- setUploadState({ type: "link-copied" });
+ setUploadState({ type: "link-copied" });
- return result;
+ return result;
+ } finally {
+ unlisten();
+ }
},
onError: (error) => {
console.error(error);
@@ -195,13 +189,7 @@ function ShareButton() {
>
@@ -685,10 +670,13 @@ function CutOffsetButton(props: {
class?: string;
onClick?(): void;
}) {
+ const formatTime = (t: number) =>
+ t < 1 ? Math.round(t * 10) / 10 : Math.round(t);
+
return (
);
diff --git a/apps/desktop/src/routes/editor/Timeline/ZoomTrack.tsx b/apps/desktop/src/routes/editor/Timeline/ZoomTrack.tsx
index 533cd56dee..d38b5f6996 100644
--- a/apps/desktop/src/routes/editor/Timeline/ZoomTrack.tsx
+++ b/apps/desktop/src/routes/editor/Timeline/ZoomTrack.tsx
@@ -57,12 +57,6 @@ export function ZoomTrack(props: {
try {
const zoomSegments = await commands.generateZoomSegmentsFromClicks();
setProject("timeline", "zoomSegments", zoomSegments);
- if (zoomSegments.length > 0) {
- const currentSize = project.cursor?.size ?? 0;
- if (currentSize < 200) {
- setProject("cursor", "size", 200);
- }
- }
} catch (error) {
console.error("Failed to generate zoom segments:", error);
}
diff --git a/apps/desktop/src/routes/editor/ui.tsx b/apps/desktop/src/routes/editor/ui.tsx
index 83d8b4cafe..88d988a09b 100644
--- a/apps/desktop/src/routes/editor/ui.tsx
+++ b/apps/desktop/src/routes/editor/ui.tsx
@@ -151,8 +151,8 @@ export function Input(props: ComponentProps<"input">) {
+ {
- if (editorState.timeline.selection) {
- setEditorState("timeline", "selection", null);
- return;
- }
- }}
- tooltipText={
- editorState.timeline.selection ? "Close selection" : "Captions"
- }
+ tooltipText="Captions"
leftIcon={ {
- if (editorState.timeline.selection) {
- setEditorState("timeline", "selection", null);
- return;
- }
- }}
- tooltipText={
- editorState.timeline.selection ? "Close selection" : "Performance"
- }
+ tooltipText="Performance"
leftIcon={
@@ -157,35 +126,15 @@ export function Header() {
)}
>
+
((progress) => {
- console.log("Upload progress:", progress);
+ const unlisten = await events.uploadProgress.listen((event) => {
+ console.log("Upload progress event:", event.payload);
setExportState(
produce((state) => {
if (state.type !== "uploading") return;
- state.progress = Math.round(progress.progress * 100);
+ state.progress = Math.round(event.payload.progress * 100);
}),
);
});
- await exportWithSettings((progress) =>
- setExportState({ type: "rendering", progress }),
- );
+ try {
+ await exportWithSettings((progress) =>
+ setExportState({ type: "rendering", progress }),
+ );
- setExportState({ type: "uploading", progress: 0 });
-
- // Now proceed with upload
- const result = meta().sharing
- ? await commands.uploadExportedVideo(
- projectPath,
- "Reupload",
- uploadChannel,
- )
- : await commands.uploadExportedVideo(
- projectPath,
- {
- Initial: { pre_created_video: null },
- },
- uploadChannel,
- );
+ setExportState({ type: "uploading", progress: 0 });
- if (result === "NotAuthenticated")
- throw new Error("You need to sign in to share recordings");
- else if (result === "PlanCheckFailed")
- throw new Error("Failed to verify your subscription status");
- else if (result === "UpgradeRequired")
- throw new Error("This feature requires an upgraded plan");
+ // Now proceed with upload
+ const result = meta().sharing
+ ? await commands.uploadExportedVideo(projectPath, "Reupload")
+ : await commands.uploadExportedVideo(projectPath, {
+ Initial: { pre_created_video: null },
+ });
+
+ if (result === "NotAuthenticated")
+ throw new Error("You need to sign in to share recordings");
+ else if (result === "PlanCheckFailed")
+ throw new Error("Failed to verify your subscription status");
+ else if (result === "UpgradeRequired")
+ throw new Error("This feature requires an upgraded plan");
+ } finally {
+ unlisten();
+ }
},
onSuccess: async () => {
const d = dialog();
@@ -378,11 +370,9 @@ export function ExportDialog() {
},
onError: (error) => {
console.error(error);
- if (!(error instanceof SilentError)) {
- commands.globalMessageDialog(
- error instanceof Error ? error.message : "Failed to upload recording",
- );
- }
+ commands.globalMessageDialog(
+ error instanceof Error ? error.message : "Failed to upload recording",
+ );
setExportState(reconcile({ type: "idle" }));
},
diff --git a/apps/desktop/src/routes/editor/Header.tsx b/apps/desktop/src/routes/editor/Header.tsx
index dae7df9b75..82322c4825 100644
--- a/apps/desktop/src/routes/editor/Header.tsx
+++ b/apps/desktop/src/routes/editor/Header.tsx
@@ -52,8 +52,6 @@ export function Header() {
exportState,
setExportState,
customDomain,
- editorState,
- setEditorState,
} = useEditorContext();
let unlistenTitlebar: UnlistenFn | undefined;
@@ -74,38 +72,25 @@ export function Header() {
{ostype() === "macos" && }
{
- if (editorState.timeline.selection) {
- setEditorState("timeline", "selection", null);
- return;
- }
-
+ const currentWindow = getCurrentWindow();
+ if (!editorInstance.path) return;
if (!(await ask("Are you sure you want to delete this recording?")))
return;
-
- await commands.editorDeleteProject();
+ await remove(editorInstance.path, {
+ recursive: true,
+ });
+ events.recordingDeleted.emit({ path: editorInstance.path });
+ await currentWindow.close();
}}
- tooltipText={
- editorState.timeline.selection
- ? "Close selection"
- : "Delete recording"
- }
+ tooltipText="Delete recording"
leftIcon={ {
- if (editorState.timeline.selection) {
- setEditorState("timeline", "selection", null);
- return;
- }
-
console.log({ path: `${editorInstance.path}/` });
revealItemInDir(`${editorInstance.path}/`);
}}
- tooltipText={
- editorState.timeline.selection
- ? "Close selection"
- : "Open recording bundle"
- }
+ tooltipText="Open recording bundle"
leftIcon={
Adjust recording area
-
- Instant Mode recordings are limited to 5 mins,{" "} - -
-
-
+
- {/* Top cap: renders rounded corner and top/side borders without affecting scroller */}
-
- {/* Scrolling content area shares border/background; top border removed to meet cap */}
-
{isSharedCapsPage && activeOrganization?.members && (
);
}
+
+const User = () => {
+ const [menuOpen, setMenuOpen] = useState(false);
+ const [upgradeModalOpen, setUpgradeModalOpen] = useState(false);
+ const { user, isSubscribed } = useDashboardContext();
+
+ const menuItems = useMemo(
+ () => [
+ {
+ name: "Homepage",
+ icon:
+
+
+
+
+
+ {menuItems
+ .filter((item) => item.showCondition)
+ .map((item, index) => (
+
+ ))}
+
+
+
+
+
+ );
+};
+
+interface Props {
+ icon: React.ReactElement;
+ name: string;
+ href?: string;
+ onClick: () => void;
+ iconClassName?: string;
+}
+
+const MenuItem = memo(({ icon, name, href, onClick, iconClassName }: Props) => {
+ const iconRef = useRef(null);
+ return (
+ {
+ iconRef.current?.startAnimation();
+ }}
+ onMouseLeave={() => {
+ iconRef.current?.stopAnimation();
+ }}
+ >
+
+
+ );
+});
+
+const ReferButton = () => {
+ const iconRef = useRef(null);
+
+ return (
+
+ {/* Red notification dot with pulse animation */}
+ (null);
- const { activeOrganization: activeOrg, user } = useDashboardContext();
- const isOwner = activeOrg?.organization.ownerId === user.id;
- const menuRef = useClickAway((e) => {
- if (
- containerRef.current &&
- !containerRef.current.contains(e.target as Node)
- ) {
- setOpen(false);
- }
- });
- return (
- >;
- open: boolean;
- containerRef: MutableRefObject;
-}) => {
- const { activeOrganization: activeOrg } = useDashboardContext();
- return (
- >;
- menuRef: MutableRefObject;
-}) => {
- const { activeOrganization: activeOrg, organizationData: orgData } =
- useDashboardContext();
- const router = useRouter();
- return (
- }
- className={
- "isolate absolute overscroll-contain bottom-14 p-2 space-y-1.5 w-full rounded-xl h-fit border bg-gray-3 max-h-[325px] custom-scroll max-w-[200px] border-gray-4"
- }
- >
- {orgData?.map((organization) => {
- const isSelected =
- activeOrg?.organization.id === organization.organization.id;
- return (
-
- );
-};
-
-export default MobileTab;
diff --git a/apps/web/app/(org)/dashboard/_components/Navbar/CapAIBox.tsx b/apps/web/app/(org)/dashboard/_components/Navbar/CapAIBox.tsx
index 7e490ad099..cffe0f3617 100644
--- a/apps/web/app/(org)/dashboard/_components/Navbar/CapAIBox.tsx
+++ b/apps/web/app/(org)/dashboard/_components/Navbar/CapAIBox.tsx
@@ -24,11 +24,11 @@ const CapAIBox = ({
}}
onMouseEnter={() => setHovered(true)}
onMouseLeave={() => setHovered(false)}
- className="hidden p-3 mb-6 w-[calc(100%-12px)] mx-auto rounded-xl border transition-colors cursor-pointer md:block hover:bg-gray-2 h-fit border-gray-3"
+ className="hidden p-3 mb-6 w-full rounded-xl border transition-colors cursor-pointer md:block hover:bg-gray-2 h-fit border-gray-3"
>
{
- if (selectedCaps.length > 0) {
- deleteCaps(selectedCaps);
- } else {
- deleteCap(video.id);
- }
- }}
- userId={user?.id}
- customDomain={customDomain}
- isLoadingAnalytics={isLoadingAnalytics}
- domainVerified={domainVerified}
- isSelected={selectedCaps.includes(video.id)}
- anyCapSelected={anyCapSelected}
- onSelectToggle={() => handleCapSelection(video.id)}
- />
- );
- })}
+ {data.map((cap) => (
+ {
+ if (selectedCaps.length > 0) {
+ deleteCaps(selectedCaps);
+ } else {
+ deleteCap(cap.id);
+ }
+ }}
+ userId={user?.id}
+ customDomain={customDomain}
+ isLoadingAnalytics={isLoadingAnalytics}
+ domainVerified={domainVerified}
+ isSelected={selectedCaps.includes(cap.id)}
+ anyCapSelected={anyCapSelected}
+ onSelectToggle={() => handleCapSelection(cap.id)}
+ />
+ ))}
)}
diff --git a/apps/web/app/(org)/dashboard/caps/UploadingContext.tsx b/apps/web/app/(org)/dashboard/caps/UploadingContext.tsx
index a24220c151..f52eb9405a 100644
--- a/apps/web/app/(org)/dashboard/caps/UploadingContext.tsx
+++ b/apps/web/app/(org)/dashboard/caps/UploadingContext.tsx
@@ -1,37 +1,17 @@
"use client";
-import { useStore } from "@tanstack/react-store";
-import { Store } from "@tanstack/store";
import type React from "react";
-import { createContext, useContext, useEffect, useState } from "react";
-
-export type UploadStatus =
- | {
- status: "parsing";
- }
- | {
- status: "creating";
- }
- | {
- status: "converting";
- capId: string;
- progress: number;
- }
- | {
- status: "uploadingThumbnail";
- capId: string;
- progress: number;
- }
- | {
- status: "uploadingVideo";
- capId: string;
- progress: number;
- thumbnailUrl: string | undefined;
- };
+import { createContext, useContext, useState } from "react";
interface UploadingContextType {
- uploadingStore: Store<{ uploadStatus?: UploadStatus }>;
- setUploadStatus: (state: UploadStatus | undefined) => void;
+ isUploading: boolean;
+ setIsUploading: (value: boolean) => void;
+ uploadingCapId: string | null;
+ setUploadingCapId: (id: string | null) => void;
+ uploadingThumbnailUrl: string | undefined;
+ setUploadingThumbnailUrl: (url: string | undefined) => void;
+ uploadProgress: number;
+ setUploadProgress: (progress: number) => void;
}
const UploadingContext = createContext(
@@ -40,69 +20,36 @@ const UploadingContext = createContext(
export function useUploadingContext() {
const context = useContext(UploadingContext);
- if (!context)
+ if (!context) {
throw new Error(
"useUploadingContext must be used within an UploadingProvider",
);
+ }
return context;
}
-export function useUploadingStatus() {
- const { uploadingStore } = useUploadingContext();
- return useStore(
- uploadingStore,
- (s) =>
- [
- s.uploadStatus !== undefined,
- s.uploadStatus && "capId" in s.uploadStatus
- ? s.uploadStatus.capId
- : null,
- ] as const,
- );
-}
-
export function UploadingProvider({ children }: { children: React.ReactNode }) {
- const [uploadingStore] = useState>(
- () => new Store({}),
- );
+ const [isUploading, setIsUploading] = useState(false);
+ const [uploadingCapId, setUploadingCapId] = useState(null);
+ const [uploadingThumbnailUrl, setUploadingThumbnailUrl] = useState<
+ string | undefined
+ >(undefined);
+ const [uploadProgress, setUploadProgress] = useState(0);
return (
{
- uploadingStore.setState((state) => ({
- ...state,
- uploadStatus: status,
- }));
- },
+ isUploading,
+ setIsUploading,
+ uploadingCapId,
+ setUploadingCapId,
+ uploadingThumbnailUrl,
+ setUploadingThumbnailUrl,
+ uploadProgress,
+ setUploadProgress,
}}
>
{children}
-
-
);
}
-
-// Separated to prevent rerendering whole tree
-function ForbidLeaveWhenUploading() {
- const { uploadingStore } = useUploadingContext();
- const uploadStatus = useStore(uploadingStore, (state) => state.uploadStatus);
-
- useEffect(() => {
- const handleBeforeUnload = (e: BeforeUnloadEvent) => {
- if (uploadStatus?.status) {
- e.preventDefault();
- // Chrome requires returnValue to be set
- e.returnValue = "";
- return "";
- }
- };
-
- window.addEventListener("beforeunload", handleBeforeUnload);
- return () => window.removeEventListener("beforeunload", handleBeforeUnload);
- }, [uploadStatus]);
-
- return null;
-}
diff --git a/apps/web/app/(org)/dashboard/caps/components/CapCard/CapCard.tsx b/apps/web/app/(org)/dashboard/caps/components/CapCard/CapCard.tsx
index 2e244a9bcf..98374c03cd 100644
--- a/apps/web/app/(org)/dashboard/caps/components/CapCard/CapCard.tsx
+++ b/apps/web/app/(org)/dashboard/caps/components/CapCard/CapCard.tsx
@@ -1,19 +1,16 @@
import type { VideoMetadata } from "@cap/database/types";
-import { buildEnv, NODE_ENV } from "@cap/env";
import {
+ Button,
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuTrigger,
} from "@cap/ui";
import type { Video } from "@cap/web-domain";
-import { HttpClient } from "@effect/platform";
import {
faCheck,
faCopy,
- faDownload,
faEllipsis,
- faLink,
faLock,
faTrash,
faUnlock,
@@ -22,23 +19,21 @@ import {
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { useMutation } from "@tanstack/react-query";
import clsx from "clsx";
-import { Effect, Option } from "effect";
import Link from "next/link";
import { useRouter } from "next/navigation";
import { type PropsWithChildren, useState } from "react";
import { toast } from "sonner";
+import { downloadVideo } from "@/actions/videos/download";
import { ConfirmationDialog } from "@/app/(org)/dashboard/_components/ConfirmationDialog";
import { useDashboardContext } from "@/app/(org)/dashboard/Contexts";
-import ProgressCircle, {
- useUploadProgress,
-} from "@/app/s/[videoId]/_components/ProgressCircle";
+import { Tooltip } from "@/components/Tooltip";
import { VideoThumbnail } from "@/components/VideoThumbnail";
import { useEffectMutation } from "@/lib/EffectRuntime";
import { withRpc } from "@/lib/Rpcs";
import { PasswordDialog } from "../PasswordDialog";
import { SharingDialog } from "../SharingDialog";
import { CapCardAnalytics } from "./CapCardAnalytics";
-import { CapCardButton } from "./CapCardButton";
+import { CapCardButtons } from "./CapCardButtons";
import { CapCardContent } from "./CapCardContent";
export interface CapCardProps extends PropsWithChildren {
@@ -64,7 +59,6 @@ export interface CapCardProps extends PropsWithChildren {
ownerName: string | null;
metadata?: VideoMetadata;
hasPassword?: boolean;
- hasActiveUpload: boolean | undefined;
duration?: number;
};
analytics: number;
@@ -113,29 +107,27 @@ export const CapCard = ({
const router = useRouter();
- const downloadMutation = useEffectMutation({
- mutationFn: () =>
- Effect.gen(function* () {
- const result = yield* withRpc((r) => r.VideoGetDownloadInfo(cap.id));
- const httpClient = yield* HttpClient.HttpClient;
- if (Option.isSome(result)) {
- const fetchResponse = yield* httpClient.get(result.value.downloadUrl);
- const blob = yield* fetchResponse.arrayBuffer;
-
- const blobUrl = window.URL.createObjectURL(new Blob([blob]));
- const link = document.createElement("a");
- link.href = blobUrl;
- link.download = result.value.fileName;
- link.style.display = "none";
- document.body.appendChild(link);
- link.click();
- document.body.removeChild(link);
-
- window.URL.revokeObjectURL(blobUrl);
- } else {
- throw new Error("Failed to get download URL");
- }
- }),
+ const downloadMutation = useMutation({
+ mutationFn: async () => {
+ const response = await downloadVideo(cap.id);
+ if (response.success && response.downloadUrl) {
+ const fetchResponse = await fetch(response.downloadUrl);
+ const blob = await fetchResponse.blob();
+
+ const blobUrl = window.URL.createObjectURL(blob);
+ const link = document.createElement("a");
+ link.href = blobUrl;
+ link.download = response.filename;
+ link.style.display = "none";
+ document.body.appendChild(link);
+ link.click();
+ document.body.removeChild(link);
+
+ window.URL.revokeObjectURL(blobUrl);
+ } else {
+ throw new Error("Failed to get download URL");
+ }
+ },
});
const deleteMutation = useMutation({
@@ -152,9 +144,6 @@ export const CapCard = ({
const duplicateMutation = useEffectMutation({
mutationFn: () => withRpc((r) => r.VideoDuplicate(cap.id)),
- onSuccess: () => {
- router.refresh();
- },
});
const handleSharingUpdated = () => {
@@ -168,11 +157,6 @@ export const CapCard = ({
const isOwner = userId === cap.ownerId;
- const uploadProgress = useUploadProgress(
- cap.id,
- cap.hasActiveUpload || false,
- );
-
// Helper function to create a drag preview element
const createDragPreview = (text: string): HTMLElement => {
// Create the element
@@ -292,11 +276,11 @@ export const CapCard = ({
onDragStart={handleDragStart}
onDragEnd={handleDragEnd}
className={clsx(
- "flex relative overflow-hidden transition-colors duration-200 flex-col gap-4 w-full h-full rounded-xl cursor-default bg-gray-1 border border-gray-3 group",
+ "flex relative transition-colors duration-200 flex-col gap-4 w-full h-full rounded-xl cursor-default bg-gray-1 border border-gray-3 group border-px",
isSelected
- ? "!border-blue-10"
+ ? "!border-blue-10 border-px"
: anyCapSelected
- ? "border-blue-10 hover:border-blue-10"
+ ? "border-blue-10 border-px hover:border-blue-10"
: "hover:border-blue-10",
isDragging && "opacity-50",
isOwner && !anyCapSelected && "cursor-grab active:cursor-grabbing",
@@ -305,122 +289,60 @@ export const CapCard = ({
{anyCapSelected && !sharedCapCard && (
)}
+ {!sharedCapCard && (
+
)}
-
+
+ {activeSpace && Space}
+
+
+ {activeSpace &&
+ (activeSpace.iconUrl ? (
+
+ + {title} +
+
+ {buildEnv.NEXT_PUBLIC_IS_CAP &&
+ {
+ setToggleNotifications(!toggleNotifications);
+ }}
+ onKeyDown={(e) => {
+ if (e.key === "Enter" || e.key === " ") {
+ e.preventDefault();
+ setToggleNotifications(!toggleNotifications);
+ }
+ }}
+ tabIndex={0}
+ role="button"
+ aria-label={`Notifications${
+ anyNewNotifications ? " (new notifications available)" : ""
+ }`}
+ aria-expanded={toggleNotifications}
+ className="hidden relative justify-center data-[state=open]:hover:bg-gray-5 items-center bg-gray-3
+ rounded-full transition-colors cursor-pointer lg:flex
+ hover:bg-gray-5 data-[state=open]:bg-gray-5
+ focus:outline-none
+ size-9"
+ >
+ {anyNewNotifications && (
+
+ {toggleNotifications &&
+
+
+
+ )}
+
+
+
+
+ {
+ if (document.startViewTransition) {
+ document.startViewTransition(() => {
+ setThemeHandler(theme === "light" ? "dark" : "light");
+ });
+ } else {
+ setThemeHandler(theme === "light" ? "dark" : "light");
+ }
+ }}
+ className="hidden justify-center items-center rounded-full transition-colors cursor-pointer bg-gray-3 lg:flex hover:bg-gray-5 size-9"
+ >
+
+
+
+
+ {user.image ? (
+
+
+ {cloneElement(icon, {
+ ref: iconRef,
+ className: iconClassName,
+ size: 14,
+ })}
+
+ {name}
+ +
+
+
+
+
+
+
+ {
+ iconRef.current?.startAnimation();
+ }}
+ onMouseLeave={() => {
+ iconRef.current?.stopAnimation();
+ }}
+ className="flex justify-center items-center rounded-full transition-colors cursor-pointer bg-gray-3 hover:bg-gray-5 size-9"
+ >
+ {cloneElement(
+
+ );
+};
diff --git a/apps/web/app/(org)/dashboard/_components/MobileTab.tsx b/apps/web/app/(org)/dashboard/_components/MobileTab.tsx
deleted file mode 100644
index b4cd329016..0000000000
--- a/apps/web/app/(org)/dashboard/_components/MobileTab.tsx
+++ /dev/null
@@ -1,183 +0,0 @@
-"use client";
-
-import { Avatar } from "@cap/ui";
-import { useClickAway } from "@uidotdev/usehooks";
-import clsx from "clsx";
-import { Check, ChevronDown } from "lucide-react";
-import { AnimatePresence, motion } from "motion/react";
-import Image from "next/image";
-import Link from "next/link";
-import { useRouter } from "next/navigation";
-import {
- type Dispatch,
- type LegacyRef,
- type MutableRefObject,
- type SetStateAction,
- useRef,
- useState,
-} from "react";
-import { useDashboardContext } from "../Contexts";
-import { CapIcon, CogIcon, LayersIcon } from "./AnimatedIcons";
-import { updateActiveOrganization } from "./Navbar/server";
-
-const Tabs = [
- { icon:
-
- {open &&
-
- );
-};
-
-const Orgs = ({
- setOpen,
- open,
- containerRef,
-}: {
- setOpen: Dispatch
- {Tabs.filter((i) => !i.ownerOnly || isOwner).map((tab) => (
-
- {tab.icon}
-
- ))}
-
- setOpen((p) => !p)}
- ref={containerRef}
- className="flex gap-1.5 items-center p-2 rounded-full border bg-gray-3 border-gray-5"
- >
- {activeOrg?.organization.iconUrl ? (
-
- );
-};
-
-const OrgsMenu = ({
- setOpen,
- menuRef,
-}: {
- setOpen: Dispatch
-
- ) : (
- - {activeOrg?.organization.name} -
- {
- await updateActiveOrganization(organization.organization.id);
- setOpen(false);
- router.push("/dashboard/caps");
- }}
- >
-
- );
- })}
-
- {organization.organization.iconUrl ? (
-
-
-
- ) : (
- - {organization.organization.name} -
- {isSelected && ( -Cap AI
-Available now
+Available now
void }) => {
)}
- {visibleVideos.length > 0 && (
+ {data.length > 0 && (
<>
Features include:
--
+
-
{[
"Auto-generated titles",
"Recording summaries",
@@ -65,7 +65,7 @@ const CapAIDialog = ({ setOpen }: { setOpen: (open: boolean) => void }) => {
icon={faWandMagicSparkles}
className="mr-2 mt-0.5 text-blue-11 size-3"
/>
- {feature}
+ {feature}
))}
+
{
-
+
);
};
diff --git a/apps/web/app/(org)/dashboard/_components/Navbar/Items.tsx b/apps/web/app/(org)/dashboard/_components/Navbar/Items.tsx
index eaa8988bb6..b0ddcad51d 100644
--- a/apps/web/app/(org)/dashboard/_components/Navbar/Items.tsx
+++ b/apps/web/app/(org)/dashboard/_components/Navbar/Items.tsx
@@ -19,11 +19,7 @@ import {
PopoverTrigger,
} from "@cap/ui";
import { classNames } from "@cap/utils";
-import {
- faBuilding,
- faCircleInfo,
- faLink,
-} from "@fortawesome/free-solid-svg-icons";
+import { faBuilding } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import clsx from "clsx";
import { AnimatePresence, motion } from "framer-motion";
@@ -31,7 +27,7 @@ import { Check, ChevronDown, Plus } from "lucide-react";
import Image from "next/image";
import Link from "next/link";
import { usePathname, useRouter } from "next/navigation";
-import { cloneElement, type RefObject, useRef, useState } from "react";
+import { cloneElement, useRef, useState } from "react";
import { NewOrganization } from "@/components/forms/NewOrganization";
import { Tooltip } from "@/components/Tooltip";
import { UsageButton } from "@/components/UsageButton";
@@ -46,6 +42,9 @@ interface Props {
toggleMobileNav?: () => void;
}
+export const navItemClass =
+ "flex items-center justify-start rounded-xl outline-none tracking-tight overflow-hidden";
+
const AdminNavItems = ({ toggleMobileNav }: Props) => {
const pathname = usePathname();
const [open, setOpen] = useState(false);
@@ -92,9 +91,6 @@ const AdminNavItems = ({ toggleMobileNav }: Props) => {
const router = useRouter();
const isPathActive = (path: string) => pathname.includes(path);
- const isDomainSetupVerified =
- activeOrg?.organization.customDomain &&
- activeOrg?.organization.domainVerified;
return (
{folders.length > 0 && (
<>
@@ -298,7 +311,7 @@ export const Caps = ({
Videos
@@ -308,29 +321,27 @@ export const Caps = ({ {isUploading && (
+
+ )}
{!sharedCapCard && onSelectToggle && (
- {
- e.stopPropagation();
- handleCopy(
- buildEnv.NEXT_PUBLIC_IS_CAP &&
- NODE_ENV === "production" &&
- customDomain &&
- domainVerified
- ? `https://${customDomain}/s/${cap.id}`
- : buildEnv.NEXT_PUBLIC_IS_CAP && NODE_ENV === "production"
- ? `https://cap.link/${cap.id}`
- : `${location.origin}/s/${cap.id}`,
- );
- }}
- className="delay-0"
- icon={() => {
- return !copyPressed ? (
- {
- e.stopPropagation();
- handleDownload();
- }}
- disabled={downloadMutation.isPending}
- className="delay-25"
- icon={() => {
- return downloadMutation.isPending ? (
-
-
-
+ variant="white"
+ size="sm"
+ aria-label="More options"
+ >
+
{
+ onClick={() =>
toast.promise(duplicateMutation.mutateAsync(), {
loading: "Duplicating cap...",
success: "Cap duplicated successfully",
error: "Failed to duplicate cap",
- });
- }}
+ })
+ }
disabled={duplicateMutation.isPending}
className="flex gap-2 items-center rounded-lg"
>
@@ -429,8 +351,11 @@ export const CapCard = ({
{
- if (!isSubscribed) setUpgradeModalOpen(true);
- else setIsPasswordDialogOpen(true);
+ if (!isSubscribed) {
+ setUpgradeModalOpen(true);
+ } else {
+ setIsPasswordDialogOpen(true);
+ }
}}
className="flex gap-2 items-center rounded-lg"
>
@@ -454,25 +379,23 @@ export const CapCard = ({
- )}
-
-
-
+
-
-
- ) : (
-
- (
-
+
+
-
- {
- if (isDeleting) {
- e.preventDefault();
- }
- }}
- href={`/s/${cap.id}`}
- >
-
- {uploadProgress.status === "failed" ? (
-
+
+ onClick={(e) => {
+ if (isDeleting) {
+ e.preventDefault();
+ }
+ }}
+ href={`/s/${cap.id}`}
+ >
+
-
- ) : (
-
-
- - Upload failed -
-
-
- )}
- void;
- disabled?: boolean;
- className: string;
- icon: () => ReactNode;
- asChild?: boolean;
-}
-
-export const CapCardButton = ({
- tooltipContent,
- onClick = () => {},
- disabled,
- className,
- icon,
- asChild,
-}: CapCardButtonProps) => {
- return (
-
-
-
- );
-};
diff --git a/apps/web/app/(org)/dashboard/caps/components/CapCard/CapCardButtons.tsx b/apps/web/app/(org)/dashboard/caps/components/CapCard/CapCardButtons.tsx
new file mode 100644
index 0000000000..3232c92b92
--- /dev/null
+++ b/apps/web/app/(org)/dashboard/caps/components/CapCard/CapCardButtons.tsx
@@ -0,0 +1,173 @@
+import { buildEnv, NODE_ENV } from "@cap/env";
+import { Button } from "@cap/ui";
+import { faDownload, faLink } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import clsx from "clsx";
+import type { ReactNode } from "react";
+import { Tooltip } from "@/components/Tooltip";
+import { usePublicEnv } from "@/utils/public-env";
+
+interface ButtonConfig {
+ tooltipContent: string;
+ onClick: (e: React.MouseEvent) => void;
+ className: string;
+ disabled: boolean;
+ icon: () => ReactNode;
+}
+
+export interface CapCardButtonsProps {
+ capId: string;
+ copyPressed: boolean;
+ isDownloading: boolean;
+ handleCopy: (url: string) => void;
+ handleDownload: () => void;
+ customDomain?: string | null;
+ domainVerified?: boolean;
+}
+
+export const CapCardButtons: React.FC = ({
+ capId,
+ copyPressed,
+ isDownloading,
+ handleCopy,
+ handleDownload,
+ customDomain,
+ domainVerified,
+}) => {
+ const { webUrl } = usePublicEnv();
+ return (
+ <>
+ {buttons(
+ capId,
+ copyPressed,
+ isDownloading,
+ handleCopy,
+ handleDownload,
+ webUrl,
+ customDomain,
+ domainVerified,
+ ).map((button, index) => (
+
+
+
+ ))}
+
+ );
+};
+
+const buttons = (
+ capId: string,
+ copyPressed: boolean,
+ isDownloading: boolean,
+ handleCopy: (url: string) => void,
+ handleDownload: () => void,
+ webUrl: string,
+ customDomain?: string | null,
+ domainVerified?: boolean,
+): ButtonConfig[] => [
+ {
+ tooltipContent: "Copy link",
+ onClick: (e: React.MouseEvent) => {
+ e.stopPropagation();
+
+ const getVideoLink = () => {
+ if (NODE_ENV === "development" && customDomain && domainVerified) {
+ return `https://${customDomain}/s/${capId}`;
+ } else if (
+ NODE_ENV === "development" &&
+ !customDomain &&
+ !domainVerified
+ ) {
+ return `${webUrl}/s/${capId}`;
+ } else if (
+ buildEnv.NEXT_PUBLIC_IS_CAP &&
+ customDomain &&
+ domainVerified
+ ) {
+ return `https://${customDomain}/s/${capId}`;
+ } else if (
+ buildEnv.NEXT_PUBLIC_IS_CAP &&
+ !customDomain &&
+ !domainVerified
+ ) {
+ return `https://cap.link/${capId}`;
+ } else {
+ return `${webUrl}/s/${capId}`;
+ }
+ };
+
+ handleCopy(getVideoLink());
+ },
+ className: "delay-0",
+ disabled: false,
+ icon: () => {
+ return !copyPressed ? (
+
+
+
+ ) : (
+ {
- e.preventDefault();
e.stopPropagation();
}}
className="flex flex-col justify-center h-10"
@@ -348,11 +347,11 @@ const FolderCard = ({
await updateFolderNameHandler();
}
}}
- onKeyDown={async (e) => {
+ onKeyDown={(e) => {
if (e.key === "Enter") {
setIsRenaming(false);
if (updateName.trim() !== name) {
- await updateFolderNameHandler();
+ updateFolderNameHandler();
}
}
}}
@@ -360,17 +359,15 @@ const FolderCard = ({
focus:ring-0 focus:border-none text-gray-12 text-[15px] max-w-[116px] truncate p-0 m-0 h-[22px] leading-[22px] overflow-hidden font-normal tracking-normal"
/>
) : (
-
{
- e.preventDefault();
e.stopPropagation();
setIsRenaming(true);
}}
+ className="text-[15px] truncate text-gray-12 w-full max-w-[116px] m-0 p-0 h-[22px] leading-[22px] font-normal tracking-normal"
>
-
+ {updateName}
+
)}
- {updateName} -
-{`${videoCount} ${
videoCount === 1 ? "video" : "videos"
diff --git a/apps/web/app/(org)/dashboard/caps/components/FoldersDropdown.tsx b/apps/web/app/(org)/dashboard/caps/components/FoldersDropdown.tsx
index d224034b01..368c1b74a6 100644
--- a/apps/web/app/(org)/dashboard/caps/components/FoldersDropdown.tsx
+++ b/apps/web/app/(org)/dashboard/caps/components/FoldersDropdown.tsx
@@ -16,7 +16,7 @@ interface FoldersDropdownProps {
id: string;
setIsRenaming: (isRenaming: boolean) => void;
setConfirmDeleteFolderOpen: (open: boolean) => void;
- nameRef: RefObject
No videos in this folder yet. Drag and drop into the folder or
upload.
@@ -180,7 +164,7 @@ export default function FolderVideosSection({
{isUploading && (
/ /
diff --git a/apps/web/app/(org)/dashboard/caps/components/SharingDialog.tsx b/apps/web/app/(org)/dashboard/caps/components/SharingDialog.tsx
index 4eb32644f4..1375f9dba1 100644
--- a/apps/web/app/(org)/dashboard/caps/components/SharingDialog.tsx
+++ b/apps/web/app/(org)/dashboard/caps/components/SharingDialog.tsx
@@ -9,7 +9,6 @@ import {
Input,
Switch,
} from "@cap/ui";
-import type { Video } from "@cap/web-domain";
import { faCopy, faShareNodes } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { useMutation } from "@tanstack/react-query";
@@ -27,7 +26,7 @@ import { Tooltip } from "@/components/Tooltip";
interface SharingDialogProps {
isOpen: boolean;
onClose: () => void;
- capId: Video.VideoId;
+ capId: string;
capName: string;
sharedSpaces: {
id: string;
@@ -68,7 +67,7 @@ export const SharingDialog: React.FC
- {uploadStatus.status === "uploadingVideo" ? (
+ {uploadingThumbnailUrl ? (
@@ -39,9 +35,7 @@ export const UploadPlaceholderCard = () => {
-
- {getFriendlyStatus(uploadStatus.status)}
-
+ {status}
);
};
-
-function getFriendlyStatus(status: UploadStatus["status"]) {
- switch (status) {
- case "parsing":
- return "Parsing";
- case "creating":
- return "Creating";
- case "converting":
- return "Converting";
- case "uploadingThumbnail":
- case "uploadingVideo":
- return "Uploading";
- default:
- return "Processing...";
- }
-}
diff --git a/apps/web/app/(org)/dashboard/caps/page.tsx b/apps/web/app/(org)/dashboard/caps/page.tsx
index 98f4753f4f..7a4fc36757 100644
--- a/apps/web/app/(org)/dashboard/caps/page.tsx
+++ b/apps/web/app/(org)/dashboard/caps/page.tsx
@@ -9,7 +9,6 @@ import {
spaceVideos,
users,
videos,
- videoUploads,
} from "@cap/database/schema";
import { serverEnv } from "@cap/env";
import { Video } from "@cap/web-domain";
@@ -23,7 +22,7 @@ export const metadata: Metadata = {
};
// Helper function to fetch shared spaces data for videos
-async function getSharedSpacesForVideos(videoIds: Video.VideoId[]) {
+async function getSharedSpacesForVideos(videoIds: string[]) {
if (videoIds.length === 0) return {};
// Fetch space-level sharing
@@ -96,10 +95,11 @@ async function getSharedSpacesForVideos(videoIds: Video.VideoId[]) {
return sharedSpacesMap;
}
-export default async function CapsPage(props: {
- searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
+export default async function CapsPage({
+ searchParams,
+}: {
+ searchParams: { [key: string]: string | string[] | undefined };
}) {
- const searchParams = await props.searchParams;
const user = await getCurrentUser();
if (!user || !user.id) {
@@ -172,17 +172,13 @@ export default async function CapsPage(props: {
${videos.createdAt}
)
`,
- hasPassword: sql`${videos.password} IS NOT NULL`.mapWith(Boolean),
- hasActiveUpload: sql`${videoUploads.videoId} IS NOT NULL`.mapWith(
- Boolean,
- ),
+ hasPassword: sqlVideos
- {visibleVideos.length === 0 && !isUploading ? (
+ {initialVideos.length === 0 && !isUploading ? (
+
+
+
+
+
+ );
};
export default FolderPage;
diff --git a/apps/web/app/(org)/dashboard/layout.tsx b/apps/web/app/(org)/dashboard/layout.tsx
index 336837c4b5..90dc58aa4e 100644
--- a/apps/web/app/(org)/dashboard/layout.tsx
+++ b/apps/web/app/(org)/dashboard/layout.tsx
@@ -2,7 +2,6 @@ import { getCurrentUser } from "@cap/database/auth/session";
import { cookies } from "next/headers";
import { redirect } from "next/navigation";
import DashboardInner from "./_components/DashboardInner";
-import MobileTab from "./_components/MobileTab";
import DesktopNav from "./_components/Navbar/Desktop";
import MobileNav from "./_components/Navbar/Mobile";
import { DashboardContexts } from "./Contexts";
@@ -63,9 +62,8 @@ export default async function DashboardLayout({
user.stripeSubscriptionStatus !== "cancelled") ||
!!user.thirdPartyStripeSubscriptionId;
- const theme = (await cookies()).get("theme")?.value ?? "light";
- const sidebar = (await cookies()).get("sidebarCollapsed")?.value ?? "false";
- const referClicked = (await cookies()).get("referClicked")?.value ?? "false";
+ const theme = cookies().get("theme")?.value ?? "light";
+ const sidebar = cookies().get("sidebarCollapsed")?.value ?? "false";
return (
-
- );
- }).pipe(Effect.provideService(CurrentUser, user), runPromise);
+ {/* Display Videos */}
+
-
-
+
+ ))}
-
+
+ )}
- {/* Display Child Folders */}
- {childFolders.length > 0 && (
- <>
-
-
- {breadcrumb.map((folder, index) => (
-
-
+ {/* Display Child Folders */}
+ {childFolders.length > 0 && (
+ <>
+ Subfolders
+
+ {childFolders.map((folder) => (
+
-
- Subfolders
-
-
- {childFolders.map((folder) => (
-
-
- )}
-
- {/* Display Videos */}
-
-
+
+
+
diff --git a/apps/web/app/(org)/dashboard/settings/account/Settings.tsx b/apps/web/app/(org)/dashboard/settings/account/Settings.tsx
index 384c78438b..e97793dfe8 100644
--- a/apps/web/app/(org)/dashboard/settings/account/Settings.tsx
+++ b/apps/web/app/(org)/dashboard/settings/account/Settings.tsx
@@ -1,47 +1,34 @@
"use client";
import type { users } from "@cap/database/schema";
-import {
- Button,
- Card,
- CardDescription,
- CardTitle,
- Input,
- Select,
-} from "@cap/ui";
+import { Button, Card, CardDescription, CardTitle, Input } from "@cap/ui";
import { useMutation } from "@tanstack/react-query";
import { useRouter } from "next/navigation";
-import { useEffect, useState } from "react";
+import { useState } from "react";
import { toast } from "sonner";
-import { useDashboardContext } from "../../Contexts";
-import { patchAccountSettings } from "./server";
export const Settings = ({
user,
}: {
user?: typeof users.$inferSelect | null;
}) => {
- const router = useRouter();
- const { organizationData } = useDashboardContext();
const [firstName, setFirstName] = useState(user?.name || "");
const [lastName, setLastName] = useState(user?.lastName || "");
- const [defaultOrgId, setDefaultOrgId] = useState
-
+