Don't resolve video src until upload finish

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

@@ -4,7 +4,7 @@
 use serde::{Deserialize, Serialize};
 use serde_json::json;
 use tauri::AppHandle;
-use tracing::instrument;
+use tracing::{instrument, trace};
 
 use crate::web_api::{AuthedApiError, ManagerExt};
 
@@ -46,7 +46,7 @@ pub async fn upload_multipart_initiate(
         .map(|data| data.upload_id)
 }
 
-#[instrument]
+#[instrument(skip(upload_id))]
 pub async fn upload_multipart_presign_part(
     app: &AppHandle,
     video_id: &str,
@@ -110,7 +110,7 @@ pub struct S3VideoMeta {
     pub fps: Option<f32>,
 }
 
-#[instrument]
+#[instrument(skip_all)]
 pub async fn upload_multipart_complete(
     app: &AppHandle,
     video_id: &str,
@@ -133,6 +133,8 @@ pub async fn upload_multipart_complete(
         location: Option<String>,
     }
 
+    trace!("Completing multipart upload");
+
     let resp = app
         .authed_api_request("/api/upload/multipart/complete", |c, url| {
             c.post(url)

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

@@ -616,7 +616,7 @@ fn retryable_client(host: String) -> reqwest::ClientBuilder {
 /// Takes an incoming stream of bytes and individually uploads them to S3.
 ///
 /// Note: It's on the caller to ensure the chunks are sized correctly within S3 limits.
-#[instrument(skip(app, stream))]
+#[instrument(skip(app, stream, upload_id))]
 fn multipart_uploader(
     app: AppHandle,
     video_id: String,

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());

apps/web/app/(org)/dashboard/caps/components/CapCard/CapCard.tsx

@@ -549,7 +549,9 @@ export const CapCard = ({
 						}}
 						href={`/s/${cap.id}`}
 					>
-						{imageStatus !== "success" && uploadProgress ? (
+						{imageStatus !== "success" &&
+						uploadProgress &&
+						uploadProgress?.status !== "fetching" ? (
 							<div className="relative inset-0 z-20 w-full h-full">
 								<div className="overflow-hidden relative mx-auto w-full h-full bg-black rounded-t-xl border-b border-gray-3 aspect-video z-5">
 									<div className="flex absolute inset-0 justify-center items-center rounded-t-xl">

apps/web/app/api/desktop/[...route]/video.ts

@@ -209,12 +209,7 @@ app.get(
 					.from(videos)
 					.where(eq(videos.ownerId, user.id));
 
-				if (
-					videoCount &&
-					videoCount[0] &&
-					videoCount[0].count === 1 &&
-					user.email
-				) {
+				if (videoCount?.[0] && videoCount[0].count === 1 && user.email) {
 					console.log(
 						"[SendFirstShareableLinkEmail] Sending first shareable link email with 5-minute delay",
 					);
@@ -370,10 +365,10 @@ app.post(
 					updatedAt,
 				});
 
-			if (uploaded === total)
-				await db()
-					.delete(videoUploads)
-					.where(eq(videoUploads.videoId, videoId));
+			// if (uploaded === total)
+			// 	await db()
+			// 		.delete(videoUploads)
+			// 		.where(eq(videoUploads.videoId, videoId));
 
 			return c.json(true);
 		} catch (error) {