import React, { useState, useRef, useEffect, useImperativeHandle, forwardRef } from 'react'; import { Play, Pause, Volume2, Eye, EyeOff } from 'lucide-react'; // --- UTILS --- function extractVideoId(url: string): string | null { const regExp = /^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#&?]*).*/; const match = url.match(regExp); return match && match[7].length === 11 ? match[7] : null; } // --- COMPONENTS --- // 1. Neon Background const NeonBackground = () => { return (

{[...Array(20)].map((_, i) => (

))}

); }; // 2. Ambient Visualizer const AmbientVisualizer = ({ isActive, isPlaying, volume }: { isActive: boolean; isPlaying: boolean; volume: number }) => { const canvasRef = useRef(null); const animationRef = useRef(); useEffect(() => { if (!isActive) return; const canvas = canvasRef.current; if (!canvas) return; const ctx = canvas.getContext("2d"); if (!ctx) return; const resizeCanvas = () => { canvas.width = window.innerWidth; canvas.height = window.innerHeight; }; resizeCanvas(); window.addEventListener("resize", resizeCanvas); const draw = () => { if (!ctx) return; ctx.fillStyle = "rgba(10, 10, 26, 0.2)"; ctx.fillRect(0, 0, canvas.width, canvas.height); if (!isPlaying) { animationRef.current = requestAnimationFrame(draw); return; } const time = Date.now() * 0.001; const bars = 64; const radius = Math.min(canvas.width, canvas.height) * 0.2; const centerX = canvas.width / 2; const centerY = canvas.height / 2; for (let i = 0; i < bars; i++) { const angle = (i / bars) * Math.PI * 2; const audioValue = Math.sin(time * 2 + i * 0.5) * 0.5 + 0.5; const barHeight = (audioValue * volume * 1.5) + 20; const x1 = centerX + Math.cos(angle) * radius; const y1 = centerY + Math.sin(angle) * radius; const x2 = centerX + Math.cos(angle) * (radius + barHeight); const y2 = centerY + Math.sin(angle) * (radius + barHeight); const gradient = ctx.createLinearGradient(x1, y1, x2, y2); gradient.addColorStop(0, "rgba(6, 182, 212, 0.2)"); gradient.addColorStop(1, "rgba(236, 72, 153, 0.8)"); ctx.beginPath(); ctx.moveTo(x1, y1); ctx.lineTo(x2, y2); ctx.strokeStyle = gradient; ctx.lineWidth = 4; ctx.lineCap = "round"; ctx.stroke(); } const pulse = Math.sin(time * 3) * 10; const innerGradient = ctx.createRadialGradient( centerX, centerY, radius * 0.5, centerX, centerY, radius * 0.8 + pulse ); innerGradient.addColorStop(0, "rgba(139, 92, 246, 0)"); innerGradient.addColorStop(1, "rgba(139, 92, 246, 0.1)"); ctx.beginPath(); ctx.arc(centerX, centerY, radius * 0.8 + pulse, 0, Math.PI * 2); ctx.fillStyle = innerGradient; ctx.fill(); animationRef.current = requestAnimationFrame(draw); }; draw(); return () => { window.removeEventListener("resize", resizeCanvas); if (animationRef.current) cancelAnimationFrame(animationRef.current); }; }, [isActive, isPlaying, volume]); return

AMBITUBE

Immersive Audio Experience