waveform AI changes

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

src/WaveForm.jsx

@@ -11,36 +11,45 @@ const BLUE_SHADES = [
 // Fallback animation for Tizen browsers without Web Audio API
 const animateFallbackBars = (canvas, ctx, fallbackData) => {
   const HEIGHT = canvas.height;
-  const barCount = 64; // Increased for more detail
-  const barWidth = Math.max(8, Math.floor(canvas.width / barCount)); // Minimum 8px width for visibility
-  const centerY = HEIGHT / 2; // Center point for bars
+  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 centerY = HEIGHT / 2;
   let x = 0;
   
-  console.log('Drawing', barCount, 'bars with data:', fallbackData.slice(0, 5));
+  // Set rendering properties for better Tizen compatibility
+  ctx.imageSmoothingEnabled = false; // Disable smoothing for sharper rendering
+  ctx.globalCompositeOperation = 'source-over';
   
-  for (let i = 0; i < barCount && i < fallbackData.length; i++) {
-    // Make bars much taller and more visible
-    const normalizedHeight = Math.max(0.1, Math.min(1, fallbackData[i]));
-    const barHeight = Math.max(30, normalizedHeight * HEIGHT * 0.6); // Minimum 30px height, use 60% of screen
-    const blueShade = Math.min(3, Math.floor(normalizedHeight * 4));
+  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
     
-    // Use solid bright colors instead of gradients for better Tizen visibility
-    ctx.fillStyle = BLUE_SHADES[blueShade] || BLUE_SHADES[0];
+    // Use high contrast colors for TV visibility
+    const intensity = Math.floor(normalizedHeight * 255);
+    ctx.fillStyle = `rgb(${intensity}, ${intensity}, 255)`; // Blue to white gradient
     
-    // Draw bars from center, extending up and down
+    // Draw main bar
     const barY = centerY - barHeight/2;
-    const barX = x + 2;
-    const barW = barWidth - 4;
+    const barX = x + 3;
+    const barW = barWidth - 6;
     
     ctx.fillRect(barX, barY, barW, barHeight);
     
-    // Add strong white outline for maximum visibility
-    ctx.strokeStyle = "rgba(255,255,255,1)";
-    ctx.lineWidth = 2;
+    // Add high contrast outline
+    ctx.strokeStyle = "white";
+    ctx.lineWidth = 3;
     ctx.strokeRect(barX, barY, barW, barHeight);
     
+    // Add inner highlight for extra visibility
+    ctx.fillStyle = "rgba(255,255,255,0.8)";
+    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
@@ -121,14 +130,20 @@ const WaveForm = ({ analyzerData }) => {
 
     const render = () => {
       try {
-        // Clear canvas completely (transparent background)
-        ctx.clearRect(0, 0, canvas.width, canvas.height);
+        // Force canvas dimensions update for Tizen
+        if (canvas.width !== (width || window.innerWidth) || 
+            canvas.height !== (height || window.innerHeight)) {
+          canvas.width = width || window.innerWidth;
+          canvas.height = height || window.innerHeight;
+        }
+
+        // Clear canvas with a semi-transparent fill instead of clearRect for Tizen
+        ctx.fillStyle = "rgba(0,0,0,0.01)"; // Very subtle background to force redraw
+        ctx.fillRect(0, 0, canvas.width, canvas.height);
         
-        // Ensure we're drawing from bottom up
         ctx.save();
 
         if (hasValidAnalyzer && webAudioWorking && !useFallback) {
-          // Try Web Audio API first
           console.log('Using Web Audio API');
           const success = animateBars(
             analyzerData.analyzer, 
@@ -149,6 +164,10 @@ const WaveForm = ({ analyzerData }) => {
         }
 
         ctx.restore();
+        
+        // Force canvas refresh for Tizen
+        canvas.style.transform = 'translateZ(0)'; // Force hardware acceleration
+        
         animationRef.current = requestAnimationFrame(render);
       } catch (error) {
         console.warn('Canvas rendering error:', error);
@@ -163,16 +182,19 @@ const WaveForm = ({ analyzerData }) => {
       setFallbackData(prevData => {
         const newData = prevData.map((val, index) => {
           // Create more dramatic wave pattern
-          const time = Date.now() * 0.008; // Slower for more visible movement
-          const wave = Math.sin(time + (index * 0.3)) * 0.4; // Bigger wave amplitude
-          const randomness = (Math.random() - 0.5) * 0.3;
+          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.15; // Smoother transitions
-          return Math.max(0.1, Math.min(1, val + (target - val) * smoothing));
+          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;
       });
-    }, 60); // 60ms updates for smooth motion
+    }, 100); // Slower updates but more dramatic changes
 
     render();
 
@@ -196,11 +218,16 @@ const WaveForm = ({ analyzerData }) => {
           width: "100%",
           height: "100%",
           zIndex: -1,
-          willChange: "auto",
-          imageRendering: "auto",
+          // Tizen-specific optimizations
+          willChange: "contents", // Changed to contents for canvas updates
+          imageRendering: "pixelated", // Sharp rendering for TV
           backgroundColor: "transparent",
           pointerEvents: "none",
-          display: "block"
+          display: "block",
+          // Force hardware acceleration
+          transform: "translateZ(0)",
+          // Ensure crisp rendering
+          msInterpolationMode: "nearest-neighbor"
         }}
         ref={canvasRef}
         width={width || window.innerWidth}