fix(transcripts): improve paragraph formatting and set no-store on missing caption responses

Author: codercatdev

apps/site/src/components/TranscriptModal.astro

@@ -251,38 +251,53 @@ const {
 				if (!fullText) {
 					fulltextView.innerHTML = `<p class="text-muted-foreground italic">No plain text transcript available.</p>`;
 				} else {
-					// Split into readable paragraphs (approx every 3-4 sentences or double newlines)
-					const rawParagraphs = fullText.split(/\n+/).filter(Boolean);
-					const paragraphs = rawParagraphs.length > 3
-						? rawParagraphs
-						: fullText.match(/[^.!?]+[.!?]+(\s+|$)/g) || [fullText];
-
-					// Group small sentences into chunky paragraphs of ~4 sentences
-					const chunky: string[] = [];
-					let buffer = "";
-					paragraphs.forEach((p, idx) => {
-						buffer += (buffer ? " " : "") + p.trim();
-						if ((idx + 1) % 4 === 0 || idx === paragraphs.length - 1) {
-							chunky.push(buffer);
-							buffer = "";
+					// Build readable paragraphs:
+					// 1. If cues exist, group cues into natural paragraphs every ~5 cues or 35-40 seconds
+					// 2. Otherwise split on double newlines or punctuation sentences
+					let paragraphs: string[] = [];
+
+					if (cues.length > 0) {
+						let currentParagraph: string[] = [];
+						for (let i = 0; i < cues.length; i++) {
+							currentParagraph.push(cues[i].text.trim());
+							if (currentParagraph.length >= 6 || i === cues.length - 1) {
+								paragraphs.push(currentParagraph.join(" "));
+								currentParagraph = [];
+							}
 						}
-					});
+					} else {
+						const rawParagraphs = fullText.split(/\n{2,}/).map((p) => p.trim()).filter(Boolean);
+						if (rawParagraphs.length > 2) {
+							paragraphs = rawParagraphs;
+						} else {
+							// Split by sentence boundaries (. ! ?)
+							const sentences = fullText.match(/[^.!?]+[.!?]+(?:\s+|$)|[^.!?]+$/g) || [fullText];
+							let buffer = "";
+							sentences.forEach((s, idx) => {
+								buffer += (buffer ? " " : "") + s.trim();
+								if ((idx + 1) % 4 === 0 || idx === sentences.length - 1) {
+									paragraphs.push(buffer);
+									buffer = "";
+								}
+							});
+						}
+					}
 
 					const filtered = filter
-						? chunky.filter((p) => p.toLowerCase().includes(filter))
-						: chunky;
+						? paragraphs.filter((p) => p.toLowerCase().includes(filter))
+						: paragraphs;
 
 					if (filtered.length === 0) {
 						fulltextView.innerHTML = `<p class="text-muted-foreground italic py-8 text-center">No transcript sections matched "${currentSearch}".</p>`;
 					} else {
 						fulltextView.innerHTML = filtered
 							.map((p) => {
-								if (!filter) return `<p class="leading-relaxed">${p}</p>`;
+								if (!filter) return `<p class="leading-relaxed mb-4">${p}</p>`;
 								const highlighted = p.replace(
 									new RegExp(`(${filter})`, "gi"),
 									`<mark class="bg-primary/20 text-primary font-semibold px-0.5 rounded">$1</mark>`,
 								);
-								return `<p class="leading-relaxed">${highlighted}</p>`;
+								return `<p class="leading-relaxed mb-4">${highlighted}</p>`;
 							})
 							.join("");
 					}

apps/site/src/pages/api/transcript.ts

@@ -146,9 +146,14 @@ async function fetchYouTubeCaptions(videoId: string): Promise<{
 			fullText,
 			status: cues.length > 0 ? "completed" : "no_caption_available",
 		};
-	} catch (err) {
+	} catch (err: any) {
 		console.warn("[fetchYouTubeCaptions error]", err);
-		return { cues: [], fullText: "", status: "no_caption_available" };
+		return {
+			cues: [],
+			fullText: "",
+			status: "no_caption_available",
+			error: err?.message || String(err),
+		};
 	}
 }
 
@@ -312,9 +317,10 @@ export const GET: APIRoute = async ({ request }) => {
 
 	// If Sanity doc is missing fullText, but we have a YouTube video ID, fetch on demand
 	const targetYtId = ytId || transcriptDoc?.youtubeId || parseYoutubeId(youtubeParam);
+	let captionsResult: any = null;
 	if (targetYtId) {
-		const captions = await fetchYouTubeCaptions(targetYtId);
-		if (captions.status === "completed" && captions.fullText.length > 50) {
+		captionsResult = await fetchYouTubeCaptions(targetYtId);
+		if (captionsResult.status === "completed" && captionsResult.fullText.length > 50) {
 			return new Response(
 				JSON.stringify(
 					{
@@ -324,9 +330,9 @@ export const GET: APIRoute = async ({ request }) => {
 						duration: transcriptDoc?.duration || "",
 						durationSeconds: transcriptDoc?.durationSeconds || 0,
 						summary: transcriptDoc?.summary || "",
-						fullText: captions.fullText,
+						fullText: captionsResult.fullText,
 						chapters: transcriptDoc?.chapters || [],
-						cues: captions.cues,
+						cues: captionsResult.cues,
 						status: "completed",
 					},
 					null,
@@ -336,7 +342,7 @@ export const GET: APIRoute = async ({ request }) => {
 					status: 200,
 					headers: {
 						...CORS_HEADERS,
-						"cache-control": "public, max-age=3600, s-maxage=86400",
+						"cache-control": "public, max-age=86400, s-maxage=604800",
 					},
 				},
 			);
@@ -360,6 +366,11 @@ export const GET: APIRoute = async ({ request }) => {
 					chapters: transcriptDoc.chapters || [],
 					cues: transcriptDoc.cues || [],
 					status: transcriptDoc.status || "no_caption_available",
+					_debug: {
+						targetYtId,
+						captionsStatus: captionsResult?.status,
+						captionsError: captionsResult?.error,
+					},
 				},
 				null,
 				2,
@@ -368,7 +379,7 @@ export const GET: APIRoute = async ({ request }) => {
 				status: 200,
 				headers: {
 					...CORS_HEADERS,
-					"cache-control": "public, max-age=1800",
+					"cache-control": "no-store, no-cache, must-revalidate",
 				},
 			},
 		);