Check and display file url errors

Author: slinjhu

smoosense-gui/src/components/audio/AudioMiniMelSpectrogram.tsx

@@ -67,7 +67,7 @@ const AudioMiniMelSpectrogram = memo(function AudioMiniMelSpectrogram({
   }, [])
 
   // Only load audio when visible
-  const { audioData, isLoading } = useAudioData(isVisible ? audioUrl : '')
+  const { audioData, isLoading, error } = useAudioData(isVisible ? audioUrl : '')
 
   // Extract or pad to 5 seconds, with trimming - save to state
   useEffect(() => {
@@ -127,10 +127,36 @@ const AudioMiniMelSpectrogram = memo(function AudioMiniMelSpectrogram({
   )
 
   // Show placeholder until visible, or while loading
-  if (!isVisible || isLoading || !previewSamples) {
+  if (!isVisible || isLoading) {
     return loadingContent
   }
 
+  // Show error message if loading failed
+  if (error) {
+    return (
+      <div
+        ref={containerRef}
+        className="w-full flex items-center justify-start bg-muted/20 text-destructive text-xs p-1 overflow-hidden"
+        style={{ height }}
+      >
+        <span className="break-all line-clamp-3 text-left">{error.message}</span>
+      </div>
+    )
+  }
+
+  // Show message if no audio data
+  if (!previewSamples) {
+    return (
+      <div
+        ref={containerRef}
+        className="w-full flex items-center justify-center bg-muted/20 text-muted-foreground text-xs"
+        style={{ height }}
+      >
+        No audio data
+      </div>
+    )
+  }
+
   const melSpectrogramContent = (
     <div className="w-full">
       <MelSpectrogram

smoosense-gui/src/components/audio/RichAudioPlayer.tsx

@@ -17,7 +17,7 @@ export default function RichAudioPlayer({ audioUrl, autoPlay = false }: RichAudi
   const [currentTime, setCurrentTime] = useState(0)
 
   // Load audio data (starts loading when this component mounts, i.e., when popover opens)
-  const { audioData } = useAudioData(audioUrl)
+  const { audioData, isLoading, error } = useAudioData(audioUrl)
 
   // Handle seek from visualizations
   const handleSeek = (time: number) => {
@@ -33,10 +33,22 @@ export default function RichAudioPlayer({ audioUrl, autoPlay = false }: RichAudi
     }
   }
 
+  // Show error message if loading failed
+  if (error) {
+    return (
+      <div className="p-4 w-full flex items-center justify-start h-[280px]">
+        <div className="flex flex-col items-start space-y-3 text-destructive max-w-full overflow-hidden">
+          <span className="text-sm font-medium">Failed to load audio</span>
+          <span className="text-xs break-all line-clamp-3 text-left">{error.message}</span>
+        </div>
+      </div>
+    )
+  }
+
   // Show loading spinner while audio is being downloaded/decoded
-  if (!audioData) {
+  if (isLoading || !audioData) {
     return (
-      <div className="p-4 w-full flex items-center justify-center h-[500px]">
+      <div className="p-4 w-full flex items-center justify-center h-[280px]">
         <div className="flex flex-col items-center space-y-3">
           <div className="w-12 h-12 border-4 border-muted-foreground border-t-transparent rounded-full animate-spin" />
           <span className="text-sm text-muted-foreground">Loading audio...</span>

smoosense-gui/src/lib/hooks/useAudioData.ts

@@ -49,6 +49,20 @@ export function useAudioData(audioUrl: string): UseAudioDataResult {
         const response = await fetch(audioUrl)
         if (cancelled) return
 
+        if (!response.ok) {
+          const status = response.status
+          if (status === 401) {
+            throw new Error(`Unauthorized: ${audioUrl}`)
+          } else if (status === 403) {
+            throw new Error(`Access denied: ${audioUrl}`)
+          } else if (status === 404) {
+            throw new Error(`File not found: ${audioUrl}`)
+          } else if (status >= 500) {
+            throw new Error(`Server error: ${audioUrl}`)
+          }
+          throw new Error(`HTTP error ${status}: ${audioUrl}`)
+        }
+
         const arrayBuffer = await response.arrayBuffer()
         if (cancelled) return