Skip to content

fix: ai transcription loading state #991

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 10 commits into from
Sep 8, 2025
Merged

fix: ai transcription loading state #991

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
e15127d
preview console logs
ameer2468 Sep 8, 2025
b83888c
Update Share.tsx
ameer2468 Sep 8, 2025
eebd801
Update Share.tsx
ameer2468 Sep 8, 2025
c33b429
correct type and improve transcription loading
ameer2468 Sep 8, 2025
c4716f0
Update Share.tsx
ameer2468 Sep 8, 2025
4480b85
formatting
ameer2468 Sep 8, 2025
fc99253
Update Share.tsx
ameer2468 Sep 8, 2025
0eb6fab
console logs
ameer2468 Sep 8, 2025
9eb95e2
adjustments
ameer2468 Sep 8, 2025
7530353
Update Share.tsx
ameer2468 Sep 8, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
47 changes: 37 additions & 10 deletions apps/web/actions/videos/get-status.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand Down
42 changes: 20 additions & 22 deletions apps/web/app/s/[videoId]/Share.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}

Expand Down Expand Up @@ -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;
}
Expand All @@ -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;
Expand Down
3 changes: 2 additions & 1 deletion apps/web/lib/transcribe.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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";
Expand All @@ -12,7 +13,7 @@ type TranscribeResult = {
};

export async function transcribeVideo(
videoId: string,
videoId: Video.VideoId,
userId: string,
aiGenerationEnabled = false,
): Promise<TranscribeResult> {
Comment on lines +16 to 19
Copy link
Contributor

@coderabbitai coderabbitai bot Sep 8, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Verification agent

🧩 Analysis chain

Signature now uses Video.VideoId—verify all call sites.

Change looks good; ensure no callers still pass plain string ids.

Run to spot call sites:

🏁 Script executed:

#!/bin/bash
rg -nP --type=ts --type=tsx -C2 '\btranscribeVideo\s*\('

Length of output: 27

🏁 Script executed:

#!/bin/bash
# Search for transcribeVideo call sites in TS and TSX files using glob patterns
rg -nP -C2 '\btranscribeVideo\s*\(' --glob '*.ts' --glob '*.tsx'

Length of output: 1326

🏁 Script executed:

#!/bin/bash
# Locate the Video namespace and VideoId type alias
rg -nP --type=ts 'export (namespace|type) Video' -nC3

Length of output: 422

Enforce Video.VideoId on all transcribeVideo calls
Call sites still passing plain strings—update to cast or type-annotate as Video.VideoId:

  • apps/web/app/embed/[videoId]/page.tsx:250 – transcribeVideo(video.id, …)
  • apps/web/app/s/[videoId]/page.tsx:437 – transcribeVideo(videoId, …) (route param is string)
  • apps/web/actions/videos/get-status.ts:52 – transcribeVideo(videoId, …)
🤖 Prompt for AI Agents 
apps/web/lib/transcribe.ts around lines 16-19: the transcribeVideo API must
enforce Video.VideoId at call sites; update the three callers to pass a properly
typed Video.VideoId instead of plain string — in
apps/web/app/embed/[videoId]/page.tsx line ~250 change transcribeVideo(video.id,
...) to transcribeVideo(video.id as Video.VideoId, ...) or ensure video.id is
typed Video.VideoId; in apps/web/app/s/[videoId]/page.tsx line ~437 cast the
route param before calling (e.g. const id = params.videoId as Video.VideoId) and
call transcribeVideo(id, ...); in apps/web/actions/videos/get-status.ts line ~52
cast the videoId variable to Video.VideoId when calling transcribeVideo(videoId
as Video.VideoId, ...); ensure Video is imported where required.

Expand Down
Loading