💾 FrikiPlayer v1.0 - Retro IT Playlist Player

FrikiPlayer es un reproductor de audio web interactivo inspirado en los reproductores multimedia clásicos de finales de los 90 y principios de los 2000 (como Winamp, AIMP y Windows Media Player). Está diseñado para simular un sistema operativo retro maximizado en el escritorio clásico verde-azulado de Windows 95, donde el reproductor y sus ventanas secundarias flotan libremente con comportamiento drag-and-drop y animaciones interactivas de 8 bits.

---

🛠️ Stack Tecnológico

El proyecto está diseñado bajo una arquitectura de cliente ligero, buscando el máximo rendimiento y fidelidad visual sin sobrecargar la CPU del cliente:

1. Frontend Core:
   • HTML5: Estructura semántica para soportar las múltiples ventanas modales y el canvas gráfico.
   • JavaScript Vanilla (ES6+): Lógica estructurada orientada a objetos (patrón MVC simplificado). Controla la manipulación del DOM, los flujos asíncronos y los ciclos de renderizado.
2. Estilos y Maquetación:
   • TailwindCSS: Utilizado para la distribución rápida de layouts, espaciados y posicionamiento.
   • CSS Personalizado: Hoja de estilos para lograr la adaptabilidad cromática de los temas en las ventanas, botones retro con bisel 3D, controles deslizantes a medida y el efecto de monitor CRT.
3. Procesamiento de Audio (Web Audio API):
   • Cadena de audio física: HTML5 AudioElement -> Preamp (GainNode) -> 10 peaking BiquadFilterNodes (Ecualizador) -> AnalyserNode (Visualizaciones) -> AudioContext.destination.
4. Motor de Renderizado Gráfico (Canvas 2D):
   • Dibujado a 60 fotogramas por segundo utilizando requestAnimationFrame para animar las barras de espectro y los modos de visualización psicodélicos.
5. Persistencia Local:
   • localStorage nativo del navegador para el almacenamiento del tema activo, la fuente seleccionada y la configuración completa del ecualizador.
6. Conectividad Nube (Opcional):
   • Supabase JS SDK: Integración directa a una base de datos PostgreSQL remota para sincronizar, añadir o eliminar canciones de la lista de reproducción en tiempo real.

---

🎨 Características de UI/UX

• Escritorio Limpio Maximizado: Se ha eliminado la barra de tareas clásica para maximizar el escritorio en color #008080 (el mítico color verde azulado de Windows 95).
• Ventanas Flotantes Retro: El reproductor principal y sus módulos complementarios son ventanas independientes arrastrables (drag-and-drop) que se pueden reposicionar y reordenar mediante un gestor de profundidad de z-index dinámico.
• Minimización de Escritorio: El reproductor principal puede minimizarse a un icono de acceso directo en la esquina inferior izquierda del escritorio. Un doble clic en el acceso directo restaura la ventana a su posición original.
• Alternadores de Visibilidad (Toggles): Los botones de control del panel principal (EQ, AVS, LETRAS, EDITAR LISTA, CONECTAR NUBE) funcionan como interruptores. Al hacer clic se abre la ventana correspondiente y al hacer clic de nuevo se cierra.
• Efectos de Sonido Integrados (Retro SFX): El reproductor sintetiza pequeños beeps y tonos de 8 bits en tiempo real mediante osciladores Web Audio API para dar feedback de clic y navegación.
• 10 Temas Visuales Dinámicos:
  • Clásico: Apariencia gris estándar de Windows 95 con biseles en 3D.
  • Dark Mode: Paleta moderna de tonos oscuros y grises profundos.
  • Terminal (Hacker): Look de consola de comandos retro con textos en verde neón y fondo negro.
  • Vaporwave: Estética retro-futurista de tonos degradados rosados, cianes y morados neón.
  • Hot Dog (Win 3.1): Una recreación humorística del esquema de alto contraste en rojo y amarillo de Windows 3.1.
  • GameBoy: Paleta monocromática en escala de verdes oliva del clásico LCD de la portátil de Nintendo.
  • Monitor Hércules: Fósforo blanco y negro de terminal de mainframe clásica.
  • AIMP Classic: Estilo moderno oscuro con luces en naranja ámbar.
  • Winamp Bento: Clásico reproductor Bento con líneas negras y detalles cianes.
  • WMP 11: Inspirado en el estilo Aero brillante y azulado de Windows Vista.
• Tipografías Interactivas: Selector tipográfico entre fuentes pixeladas de 8 bits (Press Start 2P) y fuentes de terminal de DOS (VT323) en tamaños normales y ampliados.

---

🚀 Funcionalidades Detalladas

1. Panel de Reproducción Principal

• Control de reproducción estándar: Play, Pause, Stop, Previous y Next.
• Modos de reproducción Shuffle (aleatorio) y Repeat (bucle).
• Barra de progreso interactiva (hacer clic para avanzar o retroceder en la pista).
• Pantalla CRT verde reactiva con tres modos de osciloscopio y analizador:
  • LED Bars: Clásico espectro de ecualizador de barras LED.
  • Oscilloscope: Dibujo de la forma de onda del audio en tiempo real.
  • Solid Bars: Barras de espectro de frecuencia rellenas de color.

2. Plugin de Visualización AVS (Winamp AVS)

Ventana flotante de renderizado vectorial dedicada a generar animaciones complejas audio-reactivas. Contiene 4 algoritmos:

• Nebulosa de Partículas: Enjambre de estrellas en órbita gravitatoria que se vinculan por proximidad formando redes y explotan radialmente cuando se detectan golpes de bajo (frecuencias graves).
• Túnel de Luz 3D: Zoom perspectivo interactivo a través de octágonos vectoriales que se dilatan y contraen según el espectro del canal de audio.
• Caleidoscopio Psicodélico: Divide y refleja el waveform actual de la pista en 12 sectores circulares rotatorios.
• Estrella Osciloscópica: Doble corona de partículas circulares concéntricas y opuestas que vibran directamente con las muestras analógicas (Time-Domain).

3. Ecualizador Gráfico de 10 Bandas (Winamp EQ)

• Control físico de ganancia (+12dB a -12dB) en diez frecuencias de corte: 60Hz, 170Hz, 310Hz, 600Hz, 1kHz, 3kHz, 6kHz, 12kHz, 14kHz y 16kHz.
• Control de volumen PREAMP general.
• Switch de bypass para activar o desactivar la ecualización en tiempo real.
• Selección rápida de presets preconfigurados (Flat, Rock, Pop, Dance, Clásico, Full Bass, Full Treble y Soft).
• Sliders verticales funcionales en todos los navegadores: Los sliders responden correctamente al cambiar de preset en todos los navegadores, solucionando problemas de compatibilidad visual.

4. Notepad de Letras Sincronizadas

• Ventana que emula a Notepad.exe encargada de mostrar y auto-desplazar las letras de las canciones en tiempo real.
• Destaca la estrofa actual al segundo exacto según el cursor de reproducción.
• Cuenta con letras sincronizadas oficiales precargadas para los temas icónicos Code Monkey, Still Alive y Technologic.

5. Administrador de Canciones y Base de Datos (Supabase)

• Modo Local: Permite gestionar una cola de pistas almacenada localmente.
• Modo Nube: Si se ingresan las credenciales de Supabase (URL y Anon Key), el reproductor se conecta a una tabla de base de datos remota sincronizando las canciones en tiempo real con otros usuarios.
• Formulario para añadir nuevas canciones especificando título, artista y ruta/URL del archivo MP3.

✨ Mejoras recientes de UI/UX

Gestión de Ventanas y Escritorio

• Sistema Magnético (Window Snapping): Las ventanas flotantes ahora cuentan con un sistema de colisión inteligente. Al arrastrarlas cerca de los bordes de la pantalla o de otras ventanas, se pegarán magnéticamente manteniendo una separación perfecta de 8 píxeles.
• Arrastre en Grupo: Si dos o más ventanas están pegadas entre sí, arrastrar una de ellas moverá el grupo completo respetando sus posiciones relativas.
• Estado Activo/Inactivo: El gestor de ventanas ahora destaca visualmente la ventana que tiene el foco (activa) oscureciendo las barras de título de las ventanas inactivas, usando un comportamiento idéntico a los sistemas operativos clásicos.

Mejoras Estéticas y Retro

• Marquesina Clásica: El título principal del reproductor ahora se desplaza de forma continua hacia la izquierda utilizando la clásica y nostálgica etiqueta <marquee>.
• Ventana de Configuración Aislada: Los selectores de Tema y Tipografía se han movido a su propia ventana flotante (⚙️ CFG), limpiando la barra de título principal para un look más realista.

Controles de Audio Expandidos

• Balance Estéreo (L-R): Se añadió un control de paneo estéreo (StereoPannerNode) dentro del panel extendido del volumen (Knob), permitiendo balancear la salida de audio entre los canales izquierdo y derecho.

Botonera de control estabilizada

• Los 6 botones de control mantienen una altura uniforme, independientemente de los emojis o texto de cada botón.
• El botón PLAY/PAUSE tiene un ancho fijo para evitar desplazamientos laterales molestos en la interfaz al cambiar de estado.
• Los iconos de SHUFFLE y REPEAT se mantienen siempre alineados con el texto.
• Se evita que los botones salten de línea cuando el panel de volumen lateral está abierto.

Control de volumen lineal en pantalla CRT

• El mini control de volumen fue reemplazado por un control deslizante lineal horizontal más cómodo e intuitivo.
• El control de volumen del panel y la pantalla digital se sincronizan en tiempo real respetando los colores del tema activo.

Indicadores de estado estables

• El indicador de estado evita saltos o desajustes visuales en la interfaz.
• Cuando está reproduciendo, el texto parpadea simulando un LED de actividad retro.
• El campo de bitrate tiene un formato de ancho constante para evitar desalineaciones al cambiar su valor.

Carga inmediata de gráficos

• El volumen y la cuadrícula del visualizador se dibujan inmediatamente al cargar la página sin requerir interacción previa.

Ecualizador: presets corregidos

• Al seleccionar un preajuste en el ecualizador, los controles verticales se mueven de manera correcta en todos los navegadores, solucionando problemas de compatibilidad visual.