feat: add audio asset support with recording and upload functionality

- Implemented audio asset handling in the API, including download and deletion routes.
- Added audio content type mappings and extraction functions for audio file names and keys.
- Enhanced the asset management UI to support audio uploads, including recording capabilities.
- Updated the database schema to accommodate audio assets with new enum values.
- Integrated audio playback features in the asset list and comment sections.
- Improved user experience with drag-and-drop support for audio files.

app/api/videos/[videoId]/assets/[assetId]/download/route.ts

@@ -7,19 +7,31 @@ import { fetchWithTimeout, resolveBunnyDownloadSource } from '@/lib/bunny-downlo
 import { db } from '@/lib/db';
 import {
   extractImageFileNameFromProxyUrl,
+  extractAudioFileNameFromProxyUrl,
   getVideoAssetAccessContext,
 } from '@/lib/video-assets';
 
 type RouteParams = { params: Promise<{ videoId: string; assetId: string }> };
 type BunnySourcePreference = 'auto' | 'original' | 'compressed';
 
-const CONTENT_TYPE_BY_EXTENSION: Record<string, string> = {
+const IMAGE_CONTENT_TYPE_BY_EXTENSION: Record<string, string> = {
   jpg: 'image/jpeg',
   jpeg: 'image/jpeg',
   png: 'image/png',
   webp: 'image/webp',
   gif: 'image/gif',
 };
+
+const AUDIO_CONTENT_TYPE_BY_EXTENSION: Record<string, string> = {
+  webm: 'audio/webm',
+  ogg: 'audio/ogg',
+  opus: 'audio/ogg',
+  mp4: 'audio/mp4',
+  m4a: 'audio/mp4',
+  mpeg: 'audio/mpeg',
+  mp3: 'audio/mpeg',
+  wav: 'audio/wav',
+};
 const BUNNY_ALLOWED_QUALITIES = new Set([2160, 1440, 1080, 720, 480, 360, 240]);
 
 function sanitizeFileName(value: string): string {
@@ -47,7 +59,7 @@ function buildContentDisposition(fileNameWithExt: string): string {
 
 function imageContentTypeFromFileName(fileName: string): string {
   const ext = fileName.split('.').pop()?.toLowerCase() || '';
-  return CONTENT_TYPE_BY_EXTENSION[ext] || 'application/octet-stream';
+  return IMAGE_CONTENT_TYPE_BY_EXTENSION[ext] || 'application/octet-stream';
 }
 
 // GET /api/videos/[videoId]/assets/[assetId]/download
@@ -101,6 +113,29 @@ export async function GET(request: NextRequest, { params }: RouteParams) {
       });
     }
 
+    if (asset.provider === VideoAssetProvider.R2_AUDIO) {
+      const fileName = extractAudioFileNameFromProxyUrl(asset.sourceUrl);
+      if (!fileName) return apiErrors.badRequest('Invalid audio asset URL');
+      const key = `voice/${fileName}`;
+      const ext = fileName.includes('.') ? fileName.slice(fileName.lastIndexOf('.')) : '.webm';
+      const downloadName = `${sanitizeFileName(asset.displayName)}${ext}`;
+      const contentDisposition = buildContentDisposition(downloadName);
+      const extKey = ext.replace('.', '');
+      const contentType = AUDIO_CONTENT_TYPE_BY_EXTENSION[extKey] || 'audio/webm';
+
+      return proxyR2MediaObject({
+        request,
+        key,
+        fallbackContentType: contentType,
+        cacheControl: 'private, no-store',
+        extraHeaders: {
+          'Content-Disposition': contentDisposition,
+          'X-Content-Type-Options': 'nosniff',
+        },
+        internalErrorMessage: 'Failed to retrieve audio',
+      });
+    }
+
     const sourceParam = request.nextUrl.searchParams.get('source');
     const rawQuality = request.nextUrl.searchParams.get('quality');
     const isPrepareOnly = request.nextUrl.searchParams.get('prepare') === '1';

app/api/videos/[videoId]/assets/[assetId]/route.ts

@@ -42,6 +42,7 @@ export async function DELETE(request: NextRequest, { params }: RouteParams) {
     }
 
     let shouldDeleteImageObject = false;
+    let shouldDeleteAudioObject = false;
     await db.$transaction(async (tx) => {
       await tx.videoAsset.delete({ where: { id: asset.id } });
 
@@ -52,12 +53,23 @@ export async function DELETE(request: NextRequest, { params }: RouteParams) {
         ]);
         shouldDeleteImageObject = assetReferenceCount === 0 && commentReferenceCount === 0;
       }
+
+      if (asset.provider === VideoAssetProvider.R2_AUDIO) {
+        const [assetReferenceCount, commentReferenceCount] = await Promise.all([
+          tx.videoAsset.count({ where: { sourceUrl: asset.sourceUrl } }),
+          tx.comment.count({ where: { voiceUrl: asset.sourceUrl } }),
+        ]);
+        shouldDeleteAudioObject = assetReferenceCount === 0 && commentReferenceCount === 0;
+      }
     });
 
     let r2CleanupResult: Awaited<ReturnType<typeof deleteMediaFilesBestEffort>> | undefined;
     if (asset.provider === VideoAssetProvider.R2_IMAGE && shouldDeleteImageObject) {
       r2CleanupResult = await deleteMediaFilesBestEffort([asset.sourceUrl]);
     }
+    if (asset.provider === VideoAssetProvider.R2_AUDIO && shouldDeleteAudioObject) {
+      r2CleanupResult = await deleteMediaFilesBestEffort([asset.sourceUrl]);
+    }
 
     let bunnyCleanupResult: Awaited<ReturnType<typeof cleanupBunnyStreamVideosBestEffort>> | undefined;
     if (asset.provider === VideoAssetProvider.BUNNY && asset.providerVideoId) {

app/api/videos/[videoId]/assets/route.ts

@@ -15,9 +15,12 @@ import { resolveServerBunnyCdnHostname } from '@/lib/bunny-cdn';
 import {
   SAFE_BUNNY_VIDEO_ID,
   SAFE_IMAGE_PROXY_PATH,
+  SAFE_AUDIO_PROXY_PATH,
   canDeleteAssetForViewer,
   extractImageFileNameFromProxyUrl,
   extractImageKeyFromProxyUrl,
+  extractAudioKeyFromProxyUrl,
+  extractAudioFileNameFromProxyUrl,
   getVideoAssetAccessContext,
   sanitizeAssetDisplayName,
 } from '@/lib/video-assets';
@@ -32,7 +35,7 @@ const YOUTUBE_TITLE_CACHE_TTL_MS = 5 * 60 * 1000;
 type AssetWithViewerFields = {
   id: string;
   videoId: string;
-  kind: 'IMAGE' | 'VIDEO';
+  kind: 'IMAGE' | 'VIDEO' | 'AUDIO';
   provider: VideoAssetProvider;
   displayName: string;
   sourceUrl: string;
@@ -159,6 +162,22 @@ async function isFreshImageAttachment(url: string): Promise<boolean> {
   }
 }
 
+async function isFreshAudioAttachment(url: string): Promise<boolean> {
+  const key = extractAudioKeyFromProxyUrl(url);
+  if (!key) return false;
+
+  try {
+    const head = await r2Client.send(new HeadObjectCommand({
+      Bucket: R2_BUCKET_NAME,
+      Key: key,
+    }));
+    if (!head.LastModified) return false;
+    return Date.now() - head.LastModified.getTime() <= UNATTACHED_UPLOAD_TTL_MS;
+  } catch {
+    return false;
+  }
+}
+
 // GET /api/videos/[videoId]/assets
 export async function GET(request: NextRequest, { params }: RouteParams) {
   try {
@@ -225,7 +244,8 @@ export async function GET(request: NextRequest, { params }: RouteParams) {
     const response = successResponse({
       assets: pagedAssets.map((asset) => shapeAssetForViewer(
         asset,
-        context.canDownloadAssets,
+        // R2_AUDIO proxy URLs have no auth gate — expose them to any viewer so guests can preview audio
+        context.canDownloadAssets || (asset.provider === VideoAssetProvider.R2_AUDIO && context.hasViewAccess),
         includeDeleteMetadata ? canDeleteAssetForViewer(asset, context) : false
       )),
       pagination: {
@@ -259,7 +279,12 @@ export async function POST(request: NextRequest, { params }: RouteParams) {
     const body = await request.json().catch(() => null);
     const provider = typeof body?.provider === 'string' ? body.provider.trim().toUpperCase() : '';
 
-    if (provider !== VideoAssetProvider.R2_IMAGE && provider !== VideoAssetProvider.YOUTUBE && provider !== VideoAssetProvider.BUNNY) {
+    if (
+      provider !== VideoAssetProvider.R2_IMAGE &&
+      provider !== VideoAssetProvider.YOUTUBE &&
+      provider !== VideoAssetProvider.BUNNY &&
+      provider !== VideoAssetProvider.R2_AUDIO
+    ) {
       return apiErrors.badRequest('Invalid provider');
     }
 
@@ -271,7 +296,7 @@ export async function POST(request: NextRequest, { params }: RouteParams) {
     let sourceUrl = '';
     let providerVideoId: string | null = null;
     let thumbnailUrl: string | null = null;
-    let kind: 'IMAGE' | 'VIDEO' = 'IMAGE';
+    let kind: 'IMAGE' | 'VIDEO' | 'AUDIO' = 'IMAGE';
 
     if (provider === VideoAssetProvider.R2_IMAGE) {
       sourceUrl = typeof body?.sourceUrl === 'string' ? body.sourceUrl.trim() : '';
@@ -288,6 +313,20 @@ export async function POST(request: NextRequest, { params }: RouteParams) {
       kind = 'IMAGE';
     }
 
+    if (provider === VideoAssetProvider.R2_AUDIO) {
+      sourceUrl = typeof body?.sourceUrl === 'string' ? body.sourceUrl.trim() : '';
+      if (!SAFE_AUDIO_PROXY_PATH.test(sourceUrl)) {
+        return apiErrors.badRequest('Audio URL must reference an uploaded audio file');
+      }
+      if (!(await isFreshAudioAttachment(sourceUrl))) {
+        return apiErrors.badRequest('Audio upload expired. Please upload again.');
+      }
+
+      const fileName = extractAudioFileNameFromProxyUrl(sourceUrl);
+      displayName = sanitizeAssetDisplayName(requestedDisplayName, fileName || 'Voice Recording');
+      kind = 'AUDIO';
+    }
+
     if (provider === VideoAssetProvider.YOUTUBE) {
       sourceUrl = typeof body?.sourceUrl === 'string' ? body.sourceUrl.trim() : '';
       const parsedSource = parseVideoUrl(sourceUrl);