perf: improve audio streaming, font loading, and video provider timeouts

- Fix audio route content-type handling by using HeadObject metadata first
- Add JetBrains Mono font optimization with display:swap and preload
- Add blur placeholder to video card thumbnails for improved loading
- Fix YouTube API loading with proper state tracking to prevent race conditions
- Simplify timeout handling in YouTube and Vimeo providers using AbortSignal.timeout

app/api/upload/audio/[filename]/route.ts

@@ -1,11 +1,26 @@
 import { NextResponse } from 'next/server';
 import { r2Client, R2_BUCKET_NAME } from '@/lib/r2';
-import { GetObjectCommand } from '@aws-sdk/client-s3';
+import { GetObjectCommand, HeadObjectCommand } from '@aws-sdk/client-s3';
 import { apiErrors } from '@/lib/api-response';
 
 // Only allow UUID filenames with safe extensions
 const SAFE_FILENAME = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}\.[a-z0-9]+$/i;
 
+// Map extensions to content types
+const CONTENT_TYPE_MAP: Record<string, string> = {
+  webm: 'audio/webm',
+  m4a: 'audio/mp4',
+  mp4: 'audio/mp4',
+  mp3: 'audio/mpeg',
+  ogg: 'audio/ogg',
+  wav: 'audio/wav',
+};
+
+function getContentType(filename: string): string {
+  const ext = filename.split('.').pop()?.toLowerCase() || '';
+  return CONTENT_TYPE_MAP[ext] || 'audio/webm';
+}
+
 export async function GET(
   _request: Request,
   { params }: { params: Promise<{ filename: string }> }
@@ -20,29 +35,51 @@ export async function GET(
 
     const key = `voice/${filename}`;
 
-    const response = await r2Client.send(
+    // Get file metadata to determine content type
+    const headResponse = await r2Client.send(
+      new HeadObjectCommand({
+        Bucket: R2_BUCKET_NAME,
+        Key: key,
+      })
+    );
+
+    // Use the stored content-type or infer from filename extension
+    const contentType = headResponse.ContentType || getContentType(filename);
+
+    // Get the object
+    const objectResponse = await r2Client.send(
       new GetObjectCommand({
         Bucket: R2_BUCKET_NAME,
         Key: key,
       })
     );
 
-    if (!response.Body) {
-      return apiErrors.notFound('File');
+    // Handle the body properly - AWS SDK returns a stream
+    const body = objectResponse.Body;
+    if (!body) {
+      return apiErrors.internalError('Empty file');
     }
 
-    const contentType = response.ContentType || 'audio/webm';
-    const contentLength = response.ContentLength;
+    // Convert stream to Uint8Array
+    const chunks: Uint8Array[] = [];
+    // @ts-expect-error - body is an iterable
+    for await (const chunk of body) {
+      chunks.push(chunk);
+    }
+    const uint8Array = new Uint8Array(chunks.reduce((acc, chunk) => acc + chunk.length, 0));
+    let offset = 0;
+    for (const chunk of chunks) {
+      uint8Array.set(chunk, offset);
+      offset += chunk.length;
+    }
 
-    // Stream the response body directly instead of buffering in memory
-    const stream = response.Body.transformToWebStream();
-
-    return new NextResponse(stream, {
+    // Create response with proper content-type
+    return new NextResponse(uint8Array, {
       status: 200,
       headers: {
         'Content-Type': contentType,
-        ...(contentLength ? { 'Content-Length': String(contentLength) } : {}),
         'Cache-Control': 'public, max-age=31536000, immutable',
+        'Accept-Ranges': 'bytes',
       },
     });
   } catch (error: unknown) {

app/layout.tsx

@@ -7,6 +7,8 @@ import "./globals.css";
 const jetbrainsMono = JetBrains_Mono({
   subsets: ['latin'],
   variable: '--font-sans',
+  display: 'swap',
+  preload: true,
 });
 
 export const metadata: Metadata = {