fix: ai transcription loading state (#991)

* preview console logs

* Update Share.tsx

* Update Share.tsx

* correct type and improve transcription loading

* Update Share.tsx

* formatting

* Update Share.tsx

* console logs

* adjustments

* Update Share.tsx

Author: ameer2468

apps/web/actions/videos/get-status.ts

@@ -213,16 +213,43 @@ export async function getVideoStatus(
 				}
 			})();
 
-			return {
-				transcriptionStatus:
-					(video.transcriptionStatus as "PROCESSING" | "COMPLETE" | "ERROR") ||
-					null,
-				aiProcessing: true,
-				aiTitle: metadata.aiTitle || null,
-				summary: metadata.summary || null,
-				chapters: metadata.chapters || null,
-				// generationError: metadata.generationError || null,
-			};
+			const updatedVideo = await db()
+				.select({
+					transcriptionStatus: videos.transcriptionStatus,
+					metadata: videos.metadata,
+				})
+				.from(videos)
+				.where(eq(videos.id, videoId))
+				.limit(1);
+			if (updatedVideo.length > 0) {
+				const row = updatedVideo[0];
+				if (!row) {
+					return {
+						transcriptionStatus:
+							(video.transcriptionStatus as
+								| "PROCESSING"
+								| "COMPLETE"
+								| "ERROR") || null,
+						aiProcessing: metadata.aiProcessing || false,
+						aiTitle: metadata.aiTitle || null,
+						summary: metadata.summary || null,
+						chapters: metadata.chapters || null,
+						// generationError: metadata.generationError || null,
+					};
+				}
+				const updatedMetadata = (row.metadata as VideoMetadata) || {};
+
+				return {
+					transcriptionStatus:
+						(row.transcriptionStatus as "PROCESSING" | "COMPLETE" | "ERROR") ||
+						null,
+					aiProcessing: updatedMetadata.aiProcessing || false,
+					aiTitle: updatedMetadata.aiTitle || null,
+					summary: updatedMetadata.summary || null,
+					chapters: updatedMetadata.chapters || null,
+					// generationError: updatedMetadata.generationError || null,
+				};
+			}
 		} else {
 			const videoOwner = videoOwnerQuery[0];
 			console.log(

apps/web/app/s/[videoId]/Share.tsx

@@ -114,18 +114,16 @@ const useVideoStatus = (
 				}
 
 				if (data.transcriptionStatus === "COMPLETE") {
-					if (!aiGenerationEnabled) {
-						return false;
+					if (aiGenerationEnabled) {
+						const noAiData = !(
+							data.aiTitle ||
+							data.summary ||
+							(data.chapters && data.chapters.length > 0)
+						);
+						if (data.aiProcessing || noAiData) {
+							return true;
+						}
 					}
-
-					if (data.aiProcessing) {
-						return true;
-					}
-
-					if (!data.summary && !data.chapters) {
-						return true;
-					}
-
 					return false;
 				}
 
@@ -184,10 +182,7 @@ export const Share = ({
 	);
 
 	const shouldShowLoading = () => {
-		if (!aiGenerationEnabled) {
-			return false;
-		}
-
+		// Show loading while transcription is pending or processing regardless of AI flag
 		if (!transcriptionStatus || transcriptionStatus === "PROCESSING") {
 			return true;
 		}
@@ -197,22 +192,25 @@ export const Share = ({
 		}
 
 		if (transcriptionStatus === "COMPLETE") {
-			// if (aiData.generationError) {
-			// 	return false;
-			// }
-			if (aiData.processing === true) {
-				return true;
-			}
-			if (!aiData.summary && !aiData.chapters) {
+			// Only show loading for AI if enabled and currently processing
+			if (aiGenerationEnabled && aiData.processing === true) {
 				return true;
 			}
+			return false;
 		}
 
 		return false;
 	};
 
 	const aiLoading = shouldShowLoading();
 
+	console.log({
+		aiLoading,
+		aiData,
+		transcriptionStatus,
+		aiGenerationEnabled,
+	});
+
 	const handleSeek = (time: number) => {
 		if (playerRef.current) {
 			playerRef.current.currentTime = time;

apps/web/lib/transcribe.ts

@@ -1,6 +1,7 @@
 import { db } from "@cap/database";
 import { s3Buckets, videos } from "@cap/database/schema";
 import { serverEnv } from "@cap/env";
+import type { Video } from "@cap/web-domain";
 import { createClient } from "@deepgram/sdk";
 import { eq } from "drizzle-orm";
 import { generateAiMetadata } from "@/actions/videos/generate-ai-metadata";
@@ -12,7 +13,7 @@ type TranscribeResult = {
 };
 
 export async function transcribeVideo(
-	videoId: string,
+	videoId: Video.VideoId,
 	userId: string,
 	aiGenerationEnabled = false,
 ): Promise<TranscribeResult> {