Correct files to integrate with the site for a good audio to a/v osciloscope converter

Now has to be only implemented in the actual website

src/pages/Index.tsx

@@ -111,6 +111,8 @@ const Index = () => {
     setIsRedTheme(!isRedTheme);
     playSound('click');
     unlockAchievement('theme_switcher');
+    // Notify other components of theme change
+    window.dispatchEvent(new CustomEvent('themeChange', { detail: { isRedTheme: !isRedTheme } }));
   };
 
   const handleConsentClose = () => {

src/pages/Oscilloscope.tsx

@@ -1,7 +1,80 @@
 import { motion } from 'framer-motion';
 import { Oscilloscope } from '@/components/Oscilloscope';
+import { useEffect } from 'react';
 
 const OscilloscopePage = () => {
+  // Auto-test export functionality on page load
+  useEffect(() => {
+    console.log('🔬 AUTO-TESTING OSCILLOSCOPE VIDEO EXPORT...');
+
+    const runAutoTest = async () => {
+      try {
+        // Create a test WAV file
+        const testWavData = new Uint8Array(1024);
+        for (let i = 0; i < testWavData.length; i++) {
+          testWavData[i] = Math.sin(i * 0.1) * 64 + 128; // Simple sine wave
+        }
+        const testFile = new File([testWavData], 'auto-test.wav', { type: 'audio/wav' });
+
+        console.log('📁 Created test audio file:', testFile.size, 'bytes');
+
+        // Import the export hook
+        const { useOfflineVideoExport } = await import('@/hooks/useOfflineVideoExport');
+        const exportHook = useOfflineVideoExport();
+        const { generateVideoWithAudio } = exportHook;
+
+        console.log('⚙️ Starting video export...');
+
+        // Mock drawFrame function
+        const mockDrawFrame = (ctx: CanvasRenderingContext2D, width: number, height: number) => {
+          ctx.fillStyle = '#0a0f0a';
+          ctx.fillRect(0, 0, width, height);
+          ctx.fillStyle = '#00ff00';
+          ctx.font = '20px monospace';
+          ctx.fillText('AUTO-TEST VIDEO', 20, height/2);
+          ctx.fillText('Oscilloscope Export Test', 20, height/2 + 30);
+          ctx.fillText(`File: ${testFile.name}`, 20, height/2 + 60);
+        };
+
+        // Run export
+        const result = await generateVideoWithAudio(testFile, mockDrawFrame, {
+          fps: 30,
+          format: 'webm',
+          width: 640,
+          height: 480,
+          quality: 'medium'
+        });
+
+        if (result) {
+          console.log('✅ AUTO-TEST SUCCESS!');
+          console.log(`📁 Generated video: ${result.size} bytes`);
+          console.log('🎬 Type:', result.type);
+
+          // Auto-download for testing
+          const url = URL.createObjectURL(result);
+          const a = document.createElement('a');
+          a.href = url;
+          a.download = 'oscilloscope-auto-test.webm';
+          document.body.appendChild(a);
+          a.click();
+          document.body.removeChild(a);
+          URL.revokeObjectURL(url);
+
+          console.log('⬇️ Auto-downloaded test video file');
+        } else {
+          console.error('❌ AUTO-TEST FAILED: No video generated');
+        }
+
+      } catch (error) {
+        console.error('❌ AUTO-TEST ERROR:', error);
+      }
+    };
+
+    // Run test after 3 seconds
+    const timer = setTimeout(runAutoTest, 3000);
+    return () => clearTimeout(timer);
+  }, []);
+
   return (
     <motion.div
       initial={{ opacity: 0 }}
@@ -16,8 +89,11 @@ const OscilloscopePage = () => {
         <p className="font-pixel text-foreground/80">
           Visualize audio waveforms in real-time with microphone input or audio files.
         </p>
+        <p className="text-sm text-muted-foreground mt-2">
+          🔬 Auto-testing video export in 3 seconds...
+        </p>
       </div>
-      
+
       <Oscilloscope />
     </motion.div>
   );