Cursor and zoom polish, playback prefetch fixes, and platform onboarding tweaks

apps/desktop/src-tauri/Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "cap-desktop"
-version = "0.4.8"
+version = "0.4.81"
 description = "Beautiful screen recordings, owned by you."
 authors = ["you"]
 edition = "2024"

apps/desktop/src-tauri/src/general_settings.rs

@@ -217,7 +217,7 @@ impl Default for GeneralSettingsStore {
             server_url: default_server_url(),
             recording_countdown: Some(3),
             enable_native_camera_preview: default_enable_native_camera_preview(),
-            auto_zoom_on_clicks: true,
+            auto_zoom_on_clicks: false,
             capture_keyboard_events: true,
             post_deletion_behaviour: PostDeletionBehaviour::DoNothing,
             excluded_windows: default_excluded_windows(),

apps/desktop/src-tauri/src/lib.rs

@@ -3350,6 +3350,7 @@ pub async fn run(recording_logging_handle: LoggingHandle, logs_dir: PathBuf) {
                 .with_denylist(&[
                     CapWindowId::Onboarding.label().as_str(),
                     CapWindowId::Main.label().as_str(),
+                    CapWindowId::Settings.label().as_str(),
                     "window-capture-occluder",
                     "target-select-overlay",
                     CapWindowId::CaptureArea.label().as_str(),

apps/desktop/src-tauri/src/permissions.rs

@@ -45,7 +45,7 @@ pub enum OSPermission {
 
 #[tauri::command(async)]
 #[specta::specta]
-pub fn open_permission_settings(app: tauri::AppHandle, _permission: OSPermission) {
+pub fn open_permission_settings(_app: tauri::AppHandle, _permission: OSPermission) {
     #[cfg(target_os = "macos")]
     {
         match _permission {
@@ -77,7 +77,7 @@ pub fn open_permission_settings(app: tauri::AppHandle, _permission: OSPermission
 
         match process {
             Ok(mut process) => {
-                let app = app.clone();
+                let app = _app.clone();
                 tokio::spawn(async move {
                     match tokio::task::spawn_blocking(move || process.wait()).await {
                         Ok(Err(err)) => {

apps/desktop/src-tauri/src/windows.rs

@@ -14,8 +14,8 @@ use std::{
     time::Duration,
 };
 use tauri::{
-    AppHandle, LogicalPosition, Manager, Monitor, PhysicalPosition, PhysicalSize, WebviewUrl,
-    WebviewWindow, WebviewWindowBuilder, Wry,
+    AppHandle, LogicalPosition, LogicalSize, Manager, Monitor, PhysicalPosition, PhysicalSize,
+    WebviewUrl, WebviewWindow, WebviewWindowBuilder, Wry,
 };
 use tauri_specta::Event;
 use tokio::sync::RwLock;
@@ -377,6 +377,19 @@ fn is_position_on_any_screen(pos_x: f64, pos_y: f64) -> bool {
     false
 }
 
+fn ensure_settings_window_bounds(window: &WebviewWindow) {
+    const MIN_W: f64 = 800.0;
+    const MIN_H: f64 = 580.0;
+    let _ = window.set_min_size(Some(LogicalSize::new(MIN_W, MIN_H)));
+    if let (Ok(physical), Ok(scale)) = (window.inner_size(), window.scale_factor()) {
+        let width = physical.width as f64 / scale;
+        let height = physical.height as f64 / scale;
+        if width < MIN_W || height < MIN_H {
+            let _ = window.set_size(LogicalSize::new(width.max(MIN_W), height.max(MIN_H)));
+        }
+    }
+}
+
 #[derive(Clone, Deserialize, Type)]
 pub enum CapWindowId {
     Main,
@@ -955,6 +968,10 @@ impl ShowCapWindow {
                 window.unminimize().ok();
                 window.set_focus().ok();
 
+                if let Self::Settings { .. } = self {
+                    ensure_settings_window_bounds(&window);
+                }
+
                 if let Self::Main { init_target_mode } = self {
                     let _ = RequestSetTargetMode {
                         target_mode: *init_target_mode,
@@ -1262,7 +1279,6 @@ impl ShowCapWindow {
 
                 #[cfg(windows)]
                 {
-                    use tauri::LogicalSize;
                     if let Err(e) = window.set_size(LogicalSize::new(800.0, 580.0)) {
                         warn!("Failed to set Settings window size on Windows: {}", e);
                     }
@@ -1273,6 +1289,7 @@ impl ShowCapWindow {
 
                 window.show().ok();
                 window.set_focus().ok();
+                ensure_settings_window_bounds(&window);
 
                 window
             }

apps/desktop/src/routes/(window-chrome)/new-main/index.tsx

@@ -14,7 +14,6 @@
 } from "@tauri-apps/api/webviewWindow";
 import { getCurrentWindow, LogicalSize } from "@tauri-apps/api/window";
 import * as dialog from "@tauri-apps/plugin-dialog";
-import { type as ostype } from "@tauri-apps/plugin-os";
 import * as shell from "@tauri-apps/plugin-shell";
 import * as updater from "@tauri-apps/plugin-updater";
 import { cx } from "cva";
@@ -1705,9 +1704,7 @@
 					class="flex flex-1 gap-1 items-center mx-2 min-w-0"
 					data-tauri-drag-region
 				>
-					<Show when={ostype() === "macos"}>
-						<MainWindowHelpButton />
-					</Show>
+					<MainWindowHelpButton />
 					<div class="flex-1 min-h-9 min-w-0" data-tauri-drag-region />
 					<div class="flex gap-1 items-center shrink-0" data-tauri-drag-region>
 						<Tooltip content={<span>Settings</span>}>
@@ -1773,9 +1770,6 @@
 							</button>
 						)}
 					</div>
-					<Show when={ostype() !== "macos"}>
-						<MainWindowHelpButton />
-					</Show>
 				</div>
 			</WindowChromeHeader>
 			<Show when={!activeMenu()}>
@@ -1783,7 +1777,7 @@
 					<div class="flex items-center space-x-1">
 						<a
 							class="*:w-[92px] *:h-auto text-[--text-primary]"
 							target="_blank"
 							href={
 								auth.data
 									? `${import.meta.env.VITE_SERVER_URL}/dashboard`

apps/desktop/src/routes/(window-chrome)/onboarding.tsx

@@ -323,7 +323,17 @@ export default function OnboardingPage() {
 	});
 
 	const isMacOS = createMemo(() => ostype() === "macos");
-	const permissionsOnly = createMemo(() => isRevisit() && permissionsNeeded());
+	const permissionsOnly = createMemo(
+		() => isMacOS() && isRevisit() && permissionsNeeded(),
+	);
+
+	createEffect(() => {
+		ready();
+		if (!isMacOS()) {
+			setPermsGranted(true);
+			setCorePermsGranted(true);
+		}
+	});
 
 	const totalSteps = createMemo(() => {
 		if (permissionsOnly()) return 1;
@@ -362,11 +372,11 @@ export default function OnboardingPage() {
 		setIsExiting(true);
 		await generalSettingsStore.set({ hasCompletedStartup: true });
 		setTimeout(() => {
-			setShowStartupOverlay(false);
-			setIsExiting(false);
 			if (!isMacOS()) {
 				goToStep(1);
 			}
+			setShowStartupOverlay(false);
+			setIsExiting(false);
 		}, 600);
 	};
 
@@ -403,7 +413,7 @@ export default function OnboardingPage() {
 		return "Continue";
 	};
 
-	const nextDisabled = () => step() === 0 && !permsGranted();
+	const nextDisabled = () => isMacOS() && step() === 0 && !permsGranted();
 
 	const handleSkipOnboarding = () => {
 		if (!corePermsGranted() || permissionsOnly()) return;
@@ -477,13 +487,15 @@ export default function OnboardingPage() {
 				<div class="flex flex-col flex-1 min-h-0 overflow-hidden relative">
 					<OnboardingAmbientBackdrop />
 					<div class="relative flex-1 min-h-0 z-10">
-						<StepPanel active={step() === 0} index={0} currentStep={step()}>
-							<PermissionsStep
-								active={step() === 0 && !showStartupOverlay()}
-								onPermissionsChanged={setPermsGranted}
-								onCorePermissionsChanged={setCorePermsGranted}
-							/>
-						</StepPanel>
+						<Show when={isMacOS()}>
+							<StepPanel active={step() === 0} index={0} currentStep={step()}>
+								<PermissionsStep
+									active={step() === 0 && !showStartupOverlay()}
+									onPermissionsChanged={setPermsGranted}
+									onCorePermissionsChanged={setCorePermsGranted}
+								/>
+							</StepPanel>
+						</Show>
 						<Show when={!permissionsOnly()}>
 							<StepPanel active={step() === 1} index={1} currentStep={step()}>
 								<ModesOverviewStep active={step() === 1} />

apps/desktop/src/routes/editor/ConfigSidebar.tsx

@@ -220,7 +220,7 @@
 	friction: number;
 };
 
-const DEFAULT_CURSOR_MOTION_BLUR = 1.0;
+const DEFAULT_CURSOR_MOTION_BLUR = 0.3;
 
 const CURSOR_TYPE_OPTIONS = [
 	{
@@ -242,12 +242,24 @@
 		description: "Relaxed easing with a gentle follow and higher inertia.",
 		preset: { tension: 65, mass: 1.8, friction: 16 },
 	},
+	{
+		value: "smooth",
+		label: "Smooth",
+		description: "Ultra-smooth cinematic feel with high damping.",
+		preset: { tension: 80, mass: 2.5, friction: 28 },
+	},
 	{
 		value: "mellow",
 		label: "Mellow",
 		description: "Balanced smoothing for everyday tutorials and walkthroughs.",
 		preset: { tension: 120, mass: 1.1, friction: 18 },
 	},
+	{
+		value: "fast",
+		label: "Fast",
+		description: "Quick, responsive smoothing for fast-paced content.",
+		preset: { tension: 380, mass: 1.0, friction: 30 },
+	},
 	{
 		value: "custom",
 		label: "Custom",
@@ -748,9 +760,9 @@
 							icon={<IconLucideSparkles />}
 							value={
 								<Toggle
 									checked={(project.cursor as any).useSvg ?? true}
 									onChange={(value) => {
 										setProject("cursor", "useSvg" as any, value);
 									}}
 								/>
 							}
@@ -1224,7 +1236,7 @@
 										when={value().segments.length > 1}
 										fallback={
 											<SceneSegmentConfig
 												segment={value().segments[0].segment!}
 												segmentIndex={value().segments[0].index}
 											/>
 										}
@@ -1290,7 +1302,7 @@
 										when={value().segments.length > 1}
 										fallback={
 											<ClipSegmentConfig
 												segment={value().segments[0].segment!}
 												segmentIndex={value().segments[0].index}
 											/>
 										}
@@ -1368,8 +1380,8 @@
 			.filter((p) => p.path !== null)
 			.map(({ id, path }) => ({
 				id,
 				url: convertFileSrc(path!),
 				rawPath: path!,
 			}));
 	});
 
@@ -1768,13 +1780,13 @@
 								<For each={filteredWallpapers().slice(0, 21)}>
 									{(photo) => (
 										<KRadioGroup.Item
 											value={photo.url!}
 											class="relative aspect-square group"
 										>
 											<KRadioGroup.ItemInput class="peer" />
 											<KRadioGroup.ItemControl class="overflow-hidden w-full h-full rounded-lg transition cursor-pointer ui-not-checked:ring-offset-1 ui-not-checked:ring-offset-gray-200 ui-not-checked:hover:ring-1 ui-not-checked:hover:ring-gray-400 ui-checked:ring-2 ui-checked:ring-gray-500 ui-checked:ring-offset-2 ui-checked:ring-offset-gray-200">
 												<img
 													src={photo.url!}
 													loading="eager"
 													class="object-cover w-full h-full"
 													alt="Wallpaper option"
@@ -1789,13 +1801,13 @@
 											<For each={filteredWallpapers()}>
 												{(photo) => (
 													<KRadioGroup.Item
 														value={photo.url!}
 														class="relative aspect-square group"
 													>
 														<KRadioGroup.ItemInput class="peer" />
 														<KRadioGroup.ItemControl class="overflow-hidden w-full h-full rounded-lg border cursor-pointer border-gray-5 ui-checked:border-blue-9 ui-checked:ring-2 ui-checked:ring-blue-9 peer-focus-visible:border-2 peer-focus-visible:border-blue-9">
 															<img
 																src={photo.url!}
 																alt="Wallpaper option"
 																class="object-cover w-full h-full"
 																loading="lazy"
@@ -3588,7 +3600,7 @@
 
 		setProject(
 			produce((proj) => {
 				const clips = (proj.clips ??= []);
 				let clip = clips.find(
 					(clip) => clip.index === (props.segment.recordingSegment ?? 0),
 				);

apps/desktop/src/routes/editor/Editor.tsx

@@ -14,6 +14,7 @@ import {
 	createResource,
 	createSignal,
 	ErrorBoundary,
+	For,
 	Match,
 	on,
 	onCleanup,
@@ -54,9 +55,11 @@ import { Dialog, DialogContent, EditorButton, Input, Subfield } from "./ui";
 const DEFAULT_TIMELINE_HEIGHT = 260;
 const MIN_PLAYER_CONTENT_HEIGHT = 320;
 const MIN_TIMELINE_HEIGHT = 240;
-const RESIZE_HANDLE_HEIGHT = 8;
+const RESIZE_HANDLE_HEIGHT = 16;
 const MIN_PLAYER_HEIGHT = MIN_PLAYER_CONTENT_HEIGHT + RESIZE_HANDLE_HEIGHT;
 
+const TIMELINE_RESIZE_GRIP_MARKS = [0, 1, 2] as const;
+
 function getEditorErrorMessage(error: unknown) {
 	return error instanceof Error ? error.message : String(error);
 }
@@ -462,18 +465,27 @@ function Inner() {
 								<div
 									role="separator"
 									aria-orientation="horizontal"
-									class="flex-none transition-colors hover:bg-gray-3/30"
+									class="flex-none shrink-0 border-t border-gray-4 dark:border-gray-5 bg-gray-2/95 dark:bg-gray-3/55 transition-colors hover:bg-gray-3/70 dark:hover:bg-gray-4/55"
 									style={{ height: `${RESIZE_HANDLE_HEIGHT}px` }}
 								>
 									<div
-										class="flex justify-center items-center h-full cursor-row-resize select-none group"
-										classList={{ "bg-gray-3/50": isResizingTimeline() }}
+										class="flex flex-col gap-0.5 justify-center items-center h-full w-full cursor-row-resize select-none group"
+										classList={{
+											"bg-gray-3/55 dark:bg-gray-4/50": isResizingTimeline(),
+										}}
 										onMouseDown={handleTimelineResizeStart}
+										aria-label="Resize timeline height"
 									>
-										<div
-											class="h-1 w-12 rounded-full bg-gray-4 transition-colors group-hover:bg-gray-6"
-											classList={{ "bg-gray-7": isResizingTimeline() }}
-										/>
+										<For each={TIMELINE_RESIZE_GRIP_MARKS}>
+											{() => (
+												<div
+													class="h-0.5 w-20 max-w-[85%] rounded-full bg-gray-6 dark:bg-gray-7 shadow-[0_1px_0_rgb(0_0_0_/0.06)] transition-colors group-hover:bg-gray-9 dark:group-hover:bg-gray-11"
+													classList={{
+														"bg-gray-9 dark:bg-gray-11": isResizingTimeline(),
+													}}
+												/>
+											)}
+										</For>
 									</div>
 								</div>
 							</div>