waveform AI changes

Signed-off-by: ale <ale@manalejandro.com>

src/WaveForm.jsx

@@ -16,6 +16,35 @@ const animateBars = (analyser, canvas, ctx, dataArray, bufferLength) => {
     const barWidth = Math.max(3, Math.floor(canvas.width / barCount)); // Thinner bars
     const step = Math.floor(bufferLength / barCount);
     
+    // Debug: Check if we're getting real data
+    const hasAudioData = dataArray.some(value => value > 0);
+    if (!hasAudioData) {
+      // TV browser might not be getting real audio data, create fallback animation
+      const time = Date.now();
+      for (let i = 0; i < barCount; i++) {
+        const wave1 = Math.sin(time * 0.003 + i * 0.3) * 0.4;
+        const wave2 = Math.sin(time * 0.002 + i * 0.2) * 0.3;
+        const normalizedHeight = Math.max(0.1, Math.min(0.8, 0.3 + wave1 + wave2));
+        const barHeight = Math.max(20, normalizedHeight * HEIGHT * 0.4);
+        const blueShade = Math.min(3, Math.floor(normalizedHeight * 4));
+        
+        const barY = HEIGHT - barHeight;
+        const gradient = ctx.createLinearGradient(0, HEIGHT, 0, barY);
+        gradient.addColorStop(0, BLUE_SHADES[3]);
+        gradient.addColorStop(0.5, BLUE_SHADES[blueShade] || BLUE_SHADES[0]);
+        gradient.addColorStop(1, BLUE_SHADES[0]);
+        
+        ctx.fillStyle = gradient;
+        ctx.fillRect(i * barWidth + 2, barY, barWidth - 4, barHeight);
+        
+        ctx.shadowColor = "rgba(255,255,255,0.8)";
+        ctx.shadowBlur = 5;
+        ctx.fillRect(i * barWidth + 2, barY, barWidth - 4, barHeight);
+        ctx.shadowBlur = 0;
+      }
+      return true;
+    }
+    
     let x = 0;
     
     for (let i = 0; i < barCount; i++) {