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.

components/video-page/hooks/use-comment-media.ts

@@ -86,6 +86,17 @@ export function useCommentMedia() {
     void audio.play();
   }, [playingVoiceId, voicePlaybackRate, startVoiceTracking, stopVoiceTracking]);
 
+  const stopVoice = useCallback(() => {
+    if (audioPlayerRef.current) {
+      audioPlayerRef.current.pause();
+      audioPlayerRef.current = null;
+    }
+    stopVoiceTracking();
+    setPlayingVoiceId(null);
+    setVoiceProgress(0);
+    setVoiceCurrentTime(0);
+  }, [stopVoiceTracking]);
+
   const toggleVoiceSpeed = useCallback(() => {
     setVoicePlaybackRate((prev) => {
       const next = prev === 1 ? 2 : 1;
@@ -112,6 +123,7 @@ export function useCommentMedia() {
     voiceCurrentTime,
     voicePlaybackRate,
     playVoice,
+    stopVoice,
     toggleVoiceSpeed,
   };
 }

components/video-page/hooks/use-video-assets.ts

@@ -7,7 +7,7 @@ import type { VideoAsset } from '@/components/video-page/types';
 type BunnyDownloadPreference = 'original' | 'compressed';
 
 type CreateAssetPayload = {
-  provider: 'R2_IMAGE' | 'YOUTUBE' | 'BUNNY';
+  provider: 'R2_IMAGE' | 'YOUTUBE' | 'BUNNY' | 'R2_AUDIO';
   displayName?: string;
   sourceUrl: string;
   providerVideoId?: string;
@@ -240,7 +240,7 @@ export function useVideoAssets({
     }
   }, [canDownloadAssets, videoId]);
 
-  const getGuestUploadToken = useCallback(async (intent: 'image') => {
+  const getGuestUploadToken = useCallback(async (intent: 'image' | 'audio') => {
     if (isAuthenticated) return null;
     const response = await fetch(`/api/watch/${videoId}/upload-token`, {
       method: 'POST',