waveform AI changes

Signed-off-by: ale <ale@manalejandro.com>
2025-06-04 22:16:41 +02:00
commit 840acf6c23
--- a/src/TVTest.jsx
+++ b/src/TVTest.jsx
@@ -0,0 +1,114 @@
+import React, { useEffect, useState } from 'react';
+
+const TVTest = () => {
+  const [detectionInfo, setDetectionInfo] = useState({});
+
+  useEffect(() => {
+    const userAgent = navigator.userAgent;
+    const platform = navigator.platform;
+    const vendor = navigator.vendor;
+    
+    const isTVPlatform = userAgent.includes('Tizen') || 
+                        userAgent.includes('Samsung') ||
+                        userAgent.includes('LG') ||
+                        userAgent.includes('webOS') ||
+                        userAgent.includes('SmartTV') ||
+                        userAgent.includes('Smart-TV') ||
+                        userAgent.includes('SamsungBrowser') ||
+                        userAgent.includes('SMART-TV') ||
+                        userAgent.includes('NetCast') ||
+                        userAgent.includes('HbbTV') ||
+                        userAgent.includes('TV') ||
+                        window.tizen ||
+                        window.webOS ||
+                        window.PalmServiceBridge ||
+                        // Screen-based detection for large displays
+                        (screen.width >= 1920 && screen.height >= 1080 && !('ontouchstart' in window)) ||
+                        // TV-specific properties
+                        window.opera && window.opera.tv ||
+                        // Check for TV-like environment
+                        (screen.width > 1600 && !navigator.maxTouchPoints);
+
+    setDetectionInfo({
+      userAgent,
+      platform,
+      vendor,
+      screenWidth: screen.width,
+      screenHeight: screen.height,
+      hasTouchStart: 'ontouchstart' in window,
+      maxTouchPoints: navigator.maxTouchPoints,
+      isTVPlatform,
+      windowTizen: !!window.tizen,
+      windowWebOS: !!window.webOS,
+      windowOpera: !!window.opera,
+      windowOperaTV: !!(window.opera && window.opera.tv),
+      windowPalmServiceBridge: !!window.PalmServiceBridge
+    });
+  }, []);
+
+  return (
+    <div style={{ 
+      padding: '20px', 
+      fontFamily: 'monospace', 
+      backgroundColor: '#000', 
+      color: '#0f0', 
+      minHeight: '100vh',
+      fontSize: '14px',
+      lineHeight: '1.4'
+    }}>
+      <h1 style={{ color: '#fff', marginBottom: '20px' }}>TV Browser Detection Test</h1>
+      
+      <div style={{ 
+        backgroundColor: '#111', 
+        padding: '15px', 
+        borderRadius: '5px',
+        marginBottom: '20px'
+      }}>
+        <h2 style={{ color: '#ff0', marginBottom: '10px' }}>
+          RESULT: {detectionInfo.isTVPlatform ? 'TV PLATFORM DETECTED' : 'REGULAR BROWSER'}
+        </h2>
+        
+        <div style={{ marginBottom: '10px' }}>
+          <strong>User Agent:</strong><br />
+          {detectionInfo.userAgent}
+        </div>
+        
+        <div style={{ marginBottom: '10px' }}>
+          <strong>Platform:</strong> {detectionInfo.platform}<br />
+          <strong>Vendor:</strong> {detectionInfo.vendor}
+        </div>
+        
+        <div style={{ marginBottom: '10px' }}>
+          <strong>Screen:</strong> {detectionInfo.screenWidth} x {detectionInfo.screenHeight}
+        </div>
+        
+        <div style={{ marginBottom: '10px' }}>
+          <strong>Touch Support:</strong> {detectionInfo.hasTouchStart ? 'Yes' : 'No'}<br />
+          <strong>Max Touch Points:</strong> {detectionInfo.maxTouchPoints}
+        </div>
+        
+        <div>
+          <strong>TV APIs:</strong><br />
+          - window.tizen: {detectionInfo.windowTizen ? 'Yes' : 'No'}<br />
+          - window.webOS: {detectionInfo.windowWebOS ? 'Yes' : 'No'}<br />
+          - window.opera.tv: {detectionInfo.windowOperaTV ? 'Yes' : 'No'}<br />
+          - window.PalmServiceBridge: {detectionInfo.windowPalmServiceBridge ? 'Yes' : 'No'}
+        </div>
+      </div>
+      
+      <div style={{ 
+        backgroundColor: '#222', 
+        padding: '15px', 
+        borderRadius: '5px'
+      }}>
+        <h3 style={{ color: '#0ff', marginBottom: '10px' }}>Common TV Browser User Agents:</h3>
+        <div style={{ fontSize: '12px' }}>
+          <div><strong>Samsung Tizen:</strong> Mozilla/5.0 (SMART-TV; Linux; Tizen 5.5) AppleWebKit/537.36 (KHTML, like Gecko) SamsungBrowser/2.2 Chrome/63.0.3239.84 TV Safari/537.36</div>
+          <div style={{ marginTop: '5px' }}><strong>LG webOS:</strong> Mozilla/5.0 (Web0S; Linux/SmartTV) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/53.0.2785.34 Safari/537.36 WebAppManager</div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default TVTest;
--- a/src/WaveForm.jsx
+++ b/src/WaveForm.jsx
@@ -107,7 +107,6 @@ const animateBars = (analyser, canvas, ctx, dataArray, bufferLength) => {
 const WaveForm = ({ analyzerData }) => {
  const canvasRef = useRef(null);
  const animationRef = useRef(null);
-  const debugRef = useRef(null);

  useEffect(() => {
    const canvas = canvasRef.current;
@@ -122,11 +121,6 @@ const WaveForm = ({ analyzerData }) => {
                           analyzerData.dataArray && 
                           analyzerData.bufferLength;

-    // Check if running on Samsung TV (for debug info)
-    const isTizenTV = navigator.userAgent.includes('Tizen') || 
-                     navigator.userAgent.includes('Samsung') ||
-                     window.tizen;
-
    const render = () => {
      // Set canvas dimensions
      canvas.width = window.innerWidth;
@@ -142,32 +136,13 @@ const WaveForm = ({ analyzerData }) => {
      ctx.save();

      if (hasValidAnalyzer) {
-        const success = animateBars(
+        animateBars(
          analyzerData.analyzer, 
          canvas, 
          ctx, 
          analyzerData.dataArray, 
          analyzerData.bufferLength
        );
-        
-        // Debug info for TV browsers
-        if (isTizenTV && debugRef.current) {
-          const testData = new Uint8Array(analyzerData.bufferLength);
-          analyzerData.analyzer.getByteFrequencyData(testData);
-          const maxVal = Math.max(...testData);
-          const avgVal = testData.reduce((a, b) => a + b, 0) / testData.length;
-          
-          debugRef.current.innerHTML = `
-            <div style="position: fixed; top: 10px; right: 10px; background: rgba(0,0,0,0.7); color: white; padding: 10px; font-family: monospace; font-size: 12px; z-index: 1000;">
-              <div>Tizen TV Detected: ${isTizenTV}</div>
-              <div>Analyzer Connected: ${analyzerData.isConnected || 'Unknown'}</div>
-              <div>Max Value: ${maxVal}</div>
-              <div>Avg Value: ${avgVal.toFixed(2)}</div>
-              <div>Using Fallback: ${!success}</div>
-              <div>Static Frames: ${consecutiveStaticFrames}</div>
-            </div>
-          `;
-        }
      } else {
        // Always show fallback when no analyzer
        const time = Date.now();
@@ -204,20 +179,10 @@ const WaveForm = ({ analyzerData }) => {

    render();

-    // Create debug element for TV browsers
-    if (isTizenTV && !debugRef.current) {
-      debugRef.current = document.createElement('div');
-      document.body.appendChild(debugRef.current);
-    }
-
    return () => {
      if (animationRef.current) {
        cancelAnimationFrame(animationRef.current);
      }
-      if (debugRef.current) {
-        document.body.removeChild(debugRef.current);
-        debugRef.current = null;
-      }
    };
  }, [analyzerData]);

--- a/src/hooks/useAudioPlayer.js
+++ b/src/hooks/useAudioPlayer.js
@@ -19,12 +19,51 @@ const useAudioPlayer = (audioUrl) => {
    if (!audioElmRef.current) return;
    
    // Detect if we're on a TV platform and skip Web Audio API
-    const isTVPlatform = navigator.userAgent.includes('Tizen') || 
-                        navigator.userAgent.includes('Samsung') ||
-                        navigator.userAgent.includes('LG') ||
-                        navigator.userAgent.includes('webOS') ||
+    const userAgent = navigator.userAgent.toLowerCase();
+    const platform = navigator.platform;
+    const vendor = navigator.vendor;
+    
+    // Manual override for testing
+    const forceTV = window.location.search.includes('tv=true') || 
+                   window.location.search.includes('forcetv') ||
+                   localStorage.getItem('forceTVMode') === 'true';
+    
+    // More aggressive TV detection
+    const isTVPlatform = forceTV ||
+                        userAgent.includes('tizen') || 
+                        userAgent.includes('samsung') ||
+                        userAgent.includes('lg') ||
+                        userAgent.includes('webos') ||
+                        userAgent.includes('smarttv') ||
+                        userAgent.includes('smart-tv') ||
+                        userAgent.includes('samsungbrowser') ||
+                        userAgent.includes('netcast') ||
+                        userAgent.includes('hbbtv') ||
+                        userAgent.includes(' tv ') ||
+                        userAgent.includes('tv;') ||
+                        userAgent.includes('tv)') ||
+                        userAgent.includes('roku') ||
+                        userAgent.includes('chromecast') ||
                        window.tizen ||
-                        window.webOS;
+                        window.webOS ||
+                        window.PalmServiceBridge ||
+                        // Screen-based detection for large displays without touch
+                        (window.screen.width >= 1920 && window.screen.height >= 1080 && !('ontouchstart' in window) && !navigator.maxTouchPoints) ||
+                        // TV-specific properties
+                        (window.opera && window.opera.tv) ||
+                        // Additional Samsung TV patterns
+                        userAgent.includes('maple') ||
+                        // Large screen without typical desktop indicators
+                        (window.screen.width > 1600 && window.screen.height > 900 && !navigator.userAgent.includes('Windows') && !navigator.userAgent.includes('Mac') && !navigator.userAgent.includes('Linux')) ||
+                        // Force TV mode if screen is very large and no mouse detected
+                        (window.screen.width >= 3840 || window.screen.height >= 2160);
+    
+    console.log('TV Detection:', {
+      isTVPlatform,
+      forceTV,
+      screenSize: `${window.screen.width}x${window.screen.height}`,
+      userAgentSnippet: userAgent.substring(0, 50) + '...'
+    });
    
    if (isTVPlatform) {
      // Skip Web Audio API for TV platforms and use fallback