Remove progress for legacy clients (#1035)

* fix

* create video upload entry for via web

* yeet

* a mess

* reset

* wip

* better progress tracking

* fix thumbnail on placeholder

* wip

* cleanup upload progress

* improvements

* disable progress by default

* improvements

* fixes

* format

* fix flagging logic

* nit

* fix

* deploy plz

Author: oscartbeaumont

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

@@ -186,12 +186,15 @@ impl UploadProgressUpdater {
     async fn send_api_update(app: &AppHandle, video_id: String, uploaded: u64, total: u64) {
         let response = app
             .authed_api_request("/api/desktop/video/progress", |client, url| {
-                client.post(url).json(&json!({
-                    "videoId": video_id,
-                    "uploaded": uploaded,
-                    "total": total,
-                    "updatedAt": chrono::Utc::now().to_rfc3339()
-                }))
+                client
+                    .post(url)
+                    .header("X-Cap-Desktop-Version", env!("CARGO_PKG_VERSION"))
+                    .json(&json!({
+                        "videoId": video_id,
+                        "uploaded": uploaded,
+                        "total": total,
+                        "updatedAt": chrono::Utc::now().to_rfc3339()
+                    }))
             })
             .await;
 

apps/web/actions/video/upload.ts

@@ -7,7 +7,7 @@ import {
 import { db } from "@cap/database";
 import { getCurrentUser } from "@cap/database/auth/session";
 import { nanoId } from "@cap/database/helpers";
-import { s3Buckets, videos } from "@cap/database/schema";
+import { s3Buckets, videos, videoUploads } from "@cap/database/schema";
 import { buildEnv, NODE_ENV, serverEnv } from "@cap/env";
 import { userIsPro } from "@cap/utils";
 import { eq } from "drizzle-orm";
@@ -231,6 +231,10 @@ 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"
 		}`;

apps/web/app/(org)/dashboard/caps/Caps.tsx

@@ -74,14 +74,7 @@ export const Caps = ({
 	const previousCountRef = useRef<number>(0);
 	const [selectedCaps, setSelectedCaps] = useState<Video.VideoId[]>([]);
 	const [isDraggingCap, setIsDraggingCap] = useState(false);
-	const {
-		isUploading,
-		setIsUploading,
-		setUploadingCapId,
-		setUploadProgress,
-		uploadingCapId,
-		setUploadingThumbnailUrl,
-	} = useUploadingContext();
+	const { uploadStatus } = useUploadingContext();
 
 	const anyCapSelected = selectedCaps.length > 0;
 
@@ -262,11 +255,13 @@ export const Caps = ({
 			toast.success("Cap deleted successfully");
 			router.refresh();
 		},
-		onError: () => {
-			toast.error("Failed to delete cap");
-		},
+		onError: () => toast.error("Failed to delete cap"),
 	});
 
+	const isUploading = uploadStatus !== undefined;
+	const uploadingCapId =
+		uploadStatus && "capId" in uploadStatus ? uploadStatus.capId : undefined;
+
 	const visibleVideos = useMemo(
 		() =>
 			isUploading && uploadingCapId
@@ -293,21 +288,7 @@ export const Caps = ({
 					<FontAwesomeIcon className="size-3.5" icon={faFolderPlus} />
 					New Folder
 				</Button>
-				<UploadCapButton
-					onStart={(id, thumbnailUrl) => {
-						setIsUploading(true);
-						setUploadingCapId(id);
-						setUploadingThumbnailUrl(thumbnailUrl);
-						setUploadProgress(0);
-					}}
-					size="sm"
-					onComplete={() => {
-						setIsUploading(false);
-						setUploadingCapId(null);
-						setUploadingThumbnailUrl(undefined);
-						setUploadProgress(0);
-					}}
-				/>
+				<UploadCapButton size="sm" />
 			</div>
 			{folders.length > 0 && (
 				<>

apps/web/app/(org)/dashboard/caps/UploadingContext.tsx

@@ -1,52 +1,73 @@
 "use client";
 
 import type React from "react";
-import { createContext, useContext, useState } from "react";
+import { createContext, useContext, useEffect, useState } from "react";
 
 interface UploadingContextType {
-	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;
+	uploadStatus: UploadStatus | undefined;
+	setUploadStatus: (state: UploadStatus | undefined) => void;
 }
 
+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;
+	  };
+
 const UploadingContext = createContext<UploadingContextType | undefined>(
 	undefined,
 );
 
 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 UploadingProvider({ children }: { children: React.ReactNode }) {
-	const [isUploading, setIsUploading] = useState(false);
-	const [uploadingCapId, setUploadingCapId] = useState<string | null>(null);
-	const [uploadingThumbnailUrl, setUploadingThumbnailUrl] = useState<
-		string | undefined
-	>(undefined);
-	const [uploadProgress, setUploadProgress] = useState(0);
+	const [state, setState] = useState<UploadStatus>();
+
+	// Prevent the user closing the tab while uploading
+	useEffect(() => {
+		const handleBeforeUnload = (e: BeforeUnloadEvent) => {
+			if (state?.status) {
+				e.preventDefault();
+				// Chrome requires returnValue to be set
+				e.returnValue = "";
+				return "";
+			}
+		};
+
+		window.addEventListener("beforeunload", handleBeforeUnload);
+		return () => window.removeEventListener("beforeunload", handleBeforeUnload);
+	}, [state]);
 
 	return (
 		<UploadingContext.Provider
 			value={{
-				isUploading,
-				setIsUploading,
-				uploadingCapId,
-				setUploadingCapId,
-				uploadingThumbnailUrl,
-				setUploadingThumbnailUrl,
-				uploadProgress,
-				setUploadProgress,
+				uploadStatus: state,
+				setUploadStatus: setState,
 			}}
 		>
 			{children}

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

@@ -1,3 +1,5 @@
+"use client";
+
 import {
 	Button,
 	Dialog,