improve start recording button

Author: Brendonovich

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

@@ -110,7 +110,7 @@ pub struct S3VideoMeta {
     pub fps: Option<f32>,
 }
 
-#[instrument(skip(upload_id))]
+#[instrument(skip_all)]
 pub async fn upload_multipart_complete(
     app: &AppHandle,
     video_id: &str,

apps/desktop/src/routes/target-select-overlay.tsx

@@ -4,7 +4,7 @@ import {
 	createEventListenerMap,
 } from "@solid-primitives/event-listener";
 import { useSearchParams } from "@solidjs/router";
-import { createQuery } from "@tanstack/solid-query";
+import { createQuery, useMutation } from "@tanstack/solid-query";
 import { emit } from "@tauri-apps/api/event";
 import { CheckMenuItem, Menu, Submenu } from "@tauri-apps/api/menu";
 import * as dialog from "@tauri-apps/plugin-dialog";
@@ -795,6 +795,18 @@ function RecordingControls(props: {
 		return await Menu.new({ items: [await countdownMenu()] });
 	};
 
+	const startRecording = useMutation(() => ({
+		mutationFn: () =>
+			handleRecordingResult(
+				commands.startRecording({
+					capture_target: props.target,
+					mode: rawOptions.mode,
+					capture_system_audio: rawOptions.captureSystemAudio,
+				}),
+				setOptions,
+			),
+	}));
+
 	return (
 		<>
 			<div class="flex gap-2.5 items-center p-2.5 my-2.5 rounded-xl border min-w-fit w-fit bg-gray-2 border-gray-4">
@@ -805,43 +817,48 @@ function RecordingControls(props: {
 					<IconCapX class="invert will-change-transform size-3 dark:invert-0" />
 				</div>
 				<div
-					data-inactive={rawOptions.mode === "instant" && !auth.data}
-					class="flex overflow-hidden flex-row h-11 rounded-full bg-blue-9 group"
+					data-inactive={
+						(rawOptions.mode === "instant" && !auth.data) ||
+						startRecording.isPending
+					}
+					class="flex overflow-hidden flex-row h-11 rounded-full bg-blue-9 text-white group data-[inactive='true']:bg-blue-8 data-[inactive='true']:text-white/80"
 					onClick={() => {
 						if (rawOptions.mode === "instant" && !auth.data) {
 							emit("start-sign-in");
 							return;
 						}
+						if (startRecording.isPending) return;
 
-						handleRecordingResult(
-							commands.startRecording({
-								capture_target: props.target,
-								mode: rawOptions.mode,
-								capture_system_audio: rawOptions.captureSystemAudio,
-							}),
-							setOptions,
-						);
+						startRecording.mutate();
 					}}
 				>
-					<div class="flex items-center py-1 pl-4 transition-colors hover:bg-blue-10">
+					<div
+						class={cx(
+							"flex items-center py-1 pl-4 transition-colors",
+							!startRecording.isPending && "hover:bg-blue-10",
+						)}
+					>
 						{rawOptions.mode === "studio" ? (
 							<IconCapFilmCut class="size-4" />
 						) : (
 							<IconCapInstant class="size-4" />
 						)}
 						<div class="flex flex-col mr-2 ml-3">
-							<span class="text-sm font-medium text-white text-nowrap">
+							<span class="text-sm font-medium text-nowrap">
 								{rawOptions.mode === "instant" && !auth.data
 									? "Sign In To Use"
 									: "Start Recording"}
 							</span>
-							<span class="text-xs flex items-center text-nowrap gap-1 transition-opacity duration-200 text-white font-light -mt-0.5 opacity-90">
+							<span class="text-xs flex items-center text-nowrap gap-1 transition-opacity duration-200 font-light -mt-0.5 opacity-90">
 								{`${capitalize(rawOptions.mode)} Mode`}
 							</span>
 						</div>
 					</div>
 					<div
-						class="pl-2.5 group-hover:bg-blue-10 transition-colors pr-3 py-1.5 flex items-center"
+						class={cx(
+							"pl-2.5 transition-colors pr-3 py-1.5 flex items-center",
+							!startRecording.isPending && "group-hover:bg-blue-10",
+						)}
 						onClick={(e) => {
 							e.stopPropagation();
 							menuModes().then((menu) => menu.popup());