improvements

Author: oscartbeaumont

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

@@ -53,6 +53,9 @@ export const UploadCapButton = ({
 		},
 		onError: (error) => {
 			console.error("Upload failed:", error);
+			toast.error(
+				"Failed to process video file. This format may not be supported for upload.",
+			);
 			if (inputRef.current) inputRef.current.value = "";
 		},
 	});
@@ -61,12 +64,11 @@ export const UploadCapButton = ({
 		const file = e.target.files?.[0];
 		if (!file || !user) return;
 
-		// TODO: Enable this
-		// uploadCapMutation.mutate(file);
+		uploadCapMutation.mutate(file);
 
-		const ok = await legacyUploadCap(file, folderId, setUploadStatus);
-		if (ok) router.refresh();
-		if (inputRef.current) inputRef.current.value = "";
+		// const ok = await legacyUploadCap(file, folderId, setUploadStatus);
+		// if (ok) router.refresh();
+		// if (inputRef.current) inputRef.current.value = "";
 	};
 
 	const isUploading = !!uploadStatus || uploadCapMutation.isPending;
@@ -436,6 +438,8 @@ const createUploadEffect = (
 			});
 		}
 
+		const progressTracker = createProgressTracker();
+
 		const progressStream = Stream.fromQueue(progressQueue).pipe(
 			Stream.tap(({ loaded, total }) =>
 				Effect.sync(() => {
@@ -447,7 +451,7 @@ const createUploadEffect = (
 							progress: percent,
 							thumbnailUrl,
 						});
-						sendProgressUpdate(uploadId, loaded, total);
+						progressTracker.scheduleProgressUpdate(uploadId, loaded, total);
 					} else {
 						const thumbnailProgress = 90 + percent * 0.1;
 						setUploadStatus({
@@ -480,14 +484,21 @@ const createUploadEffect = (
 
 					xhr.onload = () => {
 						if (xhr.status >= 200 && xhr.status < 300) {
+							progressTracker.cleanup();
+							if (uploadType === "video") {
+								const total = progressTracker.getTotal() || 1;
+								sendProgressUpdate(uploadId, total, total);
+							}
 							Effect.runSync(Queue.shutdown(progressQueue));
 							resolve();
 						} else {
+							progressTracker.cleanup();
 							Effect.runSync(Queue.shutdown(progressQueue));
 							reject(new Error(`Upload failed with status ${xhr.status}`));
 						}
 					};
 					xhr.onerror = () => {
+						progressTracker.cleanup();
 						Effect.runSync(Queue.shutdown(progressQueue));
 						reject(new Error("Upload failed"));
 					};
@@ -499,6 +510,60 @@ const createUploadEffect = (
 		yield* Effect.race(progressStream, uploadEffect);
 	});
 
+const createProgressTracker = () => {
+	const uploadState = {
+		videoId: "",
+		uploaded: 0,
+		total: 0,
+		pendingTask: undefined as ReturnType<typeof setTimeout> | undefined,
+		lastUpdateTime: Date.now(),
+	};
+
+	const scheduleProgressUpdate = (
+		videoId: string,
+		uploaded: number,
+		total: number,
+	) => {
+		uploadState.videoId = videoId;
+		uploadState.uploaded = uploaded;
+		uploadState.total = total;
+		uploadState.lastUpdateTime = Date.now();
+
+		if (uploadState.pendingTask) {
+			clearTimeout(uploadState.pendingTask);
+			uploadState.pendingTask = undefined;
+		}
+
+		const shouldSendImmediately = uploaded >= total;
+
+		if (shouldSendImmediately) {
+			return;
+		} else {
+			uploadState.pendingTask = setTimeout(() => {
+				if (uploadState.videoId) {
+					sendProgressUpdate(
+						uploadState.videoId,
+						uploadState.uploaded,
+						uploadState.total,
+					);
+				}
+				uploadState.pendingTask = undefined;
+			}, 2000);
+		}
+	};
+
+	const cleanup = () => {
+		if (uploadState.pendingTask) {
+			clearTimeout(uploadState.pendingTask);
+			uploadState.pendingTask = undefined;
+		}
+	};
+
+	const getTotal = () => uploadState.total;
+
+	return { scheduleProgressUpdate, cleanup, getTotal };
+};
+
 const sendProgressUpdate = async (
 	videoId: string,
 	uploaded: number,