waveform AI changes

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

src/WaveForm.jsx

@@ -9,25 +9,31 @@ const BLUE_SHADES = [
 ];
 
 // Fallback animation for Tizen browsers without Web Audio API
-const animateFallbackBars = (canvas, ctx, fallbackData) => {
+const animateFallbackBars = (canvas, ctx, time) => {
   const HEIGHT = canvas.height;
   const WIDTH = canvas.width;
-  const barCount = Math.min(64, fallbackData.length);
-  const barWidth = Math.max(10, Math.floor(WIDTH / barCount)); // Bigger bars for TV
+  const barCount = 64;
+  const barWidth = Math.max(10, Math.floor(WIDTH / barCount));
   const centerY = HEIGHT / 2;
   let x = 0;
   
   // Set rendering properties for better Tizen compatibility
-  ctx.imageSmoothingEnabled = false; // Disable smoothing for sharper rendering
+  ctx.imageSmoothingEnabled = false;
   ctx.globalCompositeOperation = 'source-over';
   
   for (let i = 0; i < barCount; i++) {
-    const normalizedHeight = Math.max(0.2, Math.min(1, fallbackData[i]));
-    const barHeight = Math.max(40, normalizedHeight * HEIGHT * 0.7); // Minimum 40px, use 70% of screen
+    // Create animated wave pattern using time directly with slower, more visible movement
+    const slowTime = time * 0.001; // Very slow animation for TV viewing
+    const wave1 = Math.sin(slowTime + (i * 0.2)) * 0.4;
+    const wave2 = Math.sin(slowTime * 0.7 + (i * 0.15)) * 0.3;
+    const wave3 = Math.sin(slowTime * 1.3 + (i * 0.1)) * 0.2; // Third wave for complexity
+    const normalizedHeight = Math.max(0.3, Math.min(1, 0.5 + wave1 + wave2 + wave3));
+    const barHeight = Math.max(40, normalizedHeight * HEIGHT * 0.7);
     
-    // Use high contrast colors for TV visibility
-    const intensity = Math.floor(normalizedHeight * 255);
-    ctx.fillStyle = `rgb(${intensity}, ${intensity}, 255)`; // Blue to white gradient
+    // Use dynamic colors based on height for more visual interest
+    const intensity = Math.floor(normalizedHeight * 200) + 55; // Keep it bright
+    const blue = Math.floor(255 * normalizedHeight);
+    ctx.fillStyle = `rgb(${intensity}, ${intensity}, ${blue})`;
     
     // Draw main bar
     const barY = centerY - barHeight/2;
@@ -38,18 +44,15 @@ const animateFallbackBars = (canvas, ctx, fallbackData) => {
     
     // Add high contrast outline
     ctx.strokeStyle = "white";
-    ctx.lineWidth = 3;
+    ctx.lineWidth = 2;
     ctx.strokeRect(barX, barY, barW, barHeight);
     
     // Add inner highlight for extra visibility
-    ctx.fillStyle = "rgba(255,255,255,0.8)";
+    ctx.fillStyle = `rgba(255,255,255,${0.3 + normalizedHeight * 0.5})`;
     ctx.fillRect(barX + 2, barY + 2, Math.max(2, barW - 4), Math.max(2, barHeight - 4));
     
     x += barWidth;
   }
-  
-  // Force canvas update for Tizen
-  ctx.globalCompositeOperation = 'source-over';
 };
 
 // Real Web Audio API animation
@@ -98,16 +101,9 @@ const WaveForm = ({ analyzerData }) => {
   const canvasRef = useRef(null);
   const [width, height] = useSize();
   const [useFallback, setUseFallback] = useState(true); // Start with fallback immediately
-  const [fallbackData, setFallbackData] = useState([]);
-  const fallbackIntervalRef = useRef(null);
   const animationRef = useRef(null);
 
-  // Initialize fallback data
-  useEffect(() => {
-    const initialData = Array(64).fill(0).map(() => Math.random() * 0.8 + 0.2); // Higher initial values, more bars
-    setFallbackData(initialData);
-    console.log('WaveForm initialized with fallback data');
-  }, []);
+  // Remove fallbackData state and interval - we'll calculate animation in real-time
 
   useEffect(() => {
     const canvas = canvasRef.current;
@@ -130,6 +126,8 @@ const WaveForm = ({ analyzerData }) => {
 
     const render = () => {
       try {
+        const currentTime = Date.now();
+        
         // Force canvas dimensions update for Tizen
         if (canvas.width !== (width || window.innerWidth) || 
             canvas.height !== (height || window.innerHeight)) {
@@ -159,8 +157,8 @@ const WaveForm = ({ analyzerData }) => {
             console.log('Web Audio failed, switching to fallback');
           }
         } else {
-          // Use fallback animation
-          animateFallbackBars(canvas, ctx, fallbackData);
+          // Use fallback animation with current time
+          animateFallbackBars(canvas, ctx, currentTime);
         }
 
         ctx.restore();
@@ -176,37 +174,16 @@ const WaveForm = ({ analyzerData }) => {
       }
     };
 
-    // Start animation data updates
-    console.log('Starting animation updates');
-    fallbackIntervalRef.current = setInterval(() => {
-      setFallbackData(prevData => {
-        const newData = prevData.map((val, index) => {
-          // Create more dramatic wave pattern
-          const time = Date.now() * 0.002; // Even slower for very visible movement
-          const wave = Math.sin(time + (index * 0.4)) * 0.5; // Bigger wave amplitude
-          const randomness = (Math.random() - 0.5) * 0.2;
-          const target = 0.5 + wave + randomness; // Base of 0.5 + wave + randomness
-          const smoothing = 0.05; // Much smoother transitions
-          return Math.max(0.2, Math.min(1, val + (target - val) * smoothing));
-        });
-        
-        // Log first few values to debug panel
-        console.log('Animation data updated:', newData.slice(0, 3));
-        return newData;
-      });
-    }, 100); // Slower updates but more dramatic changes
-
+    // Start animation
+    console.log('Starting animation');
     render();
 
     return () => {
       if (animationRef.current) {
         cancelAnimationFrame(animationRef.current);
       }
-      if (fallbackIntervalRef.current) {
-        clearInterval(fallbackIntervalRef.current);
-      }
     };
-  }, [analyzerData, width, height, fallbackData]);
+  }, [analyzerData, width, height, useFallback]); // Added useFallback dependency
 
   return (
     <div style={{ position: 'relative' }}>
@@ -251,8 +228,8 @@ const WaveForm = ({ analyzerData }) => {
       }}>
         <div>Canvas: {width}x{height}</div>
         <div>Fallback: {useFallback ? 'YES' : 'NO'}</div>
-        <div>Data: {fallbackData.length} bars</div>
-        <div>Sample: {fallbackData.slice(0,3).map(v => v.toFixed(2)).join(', ')}</div>
+        <div>Bars: 64</div>
+        <div>Time: {Date.now() % 10000}</div>
       </div>
     </div>
   );