🎵 [FiveM] ¡EL SISTEMA DE MÚSICA DEFINITIVO! | DP-Boombox_v2 🎵

📝 Descripción General

¡Lleva la fiesta a cualquier rincón de tu servidor! DP-Boombox_v2 es un sistema de música interactivo, avanzado y colaborativo diseñado por DP-Scripts. Con una interfaz moderna y sincronización perfecta, los jugadores podrán crear listas de reproducción, compartir códigos de invitación, importar canciones directamente desde YouTube, instalar radios en sus vehículos y gestionar permisos de DJ en tiempo real.

¿Qué es y qué hace?

Es el ecosistema musical definitivo para tus jugadores. Entre sus múltiples sistemas integrados destacan:

- 🎨 Interfaz de Usuario (UI) Moderna: Panel interactivo con pestañas, previsualizaciones nativas de YouTube y un tooltip inteligente de volumen que sigue a tu ratón.
- 🖼️ Mosaicos Dinámicos de Listas: Las portadas de las playlists se generan automáticamente creando un collage estilo Spotify con hasta 5 miniaturas de las canciones que contienen.
- 🔀 Controles Multimedia Avanzados: Sistema de reproducción inteligente con opciones de Aleatorio (Shuffle matemático), Repetir Lista (Loop) y Repetir 1 Canción, con salto automático.
- 🚗 Sistema de Radio para Vehículos: Permite a los mecánicos o jugadores instalar un ítem de radio en cualquier vehículo con una barra de progreso y animaciones, accesible después mediante un comando.
- 🎧 Sincronización Perfecta (xsound): Reproduce música sincronizada entre todos los jugadores cercanos sin lag ni cortes molestos, tanto en altavoces de suelo como en coches.
- 🤝 Listas Colaborativas y Compartibles: Crea listas, copia al portapapeles un código de invitación alfanumérico aleatorio y compártelo para que tus amigos se unan.
- 👑 Gestión Avanzada de Permisos: El dueño de la lista puede decidir quién puede añadir canciones, borrar o renombrar la lista, o traspasar la propiedad modificando los permisos al instante.
- 🌐 Integración Nativa con YouTube API: ¡Importa listas completas de YouTube (hasta 50 canciones de golpe) directamente a la boombox o inyéctalas a una lista existente mediante la API de Google!
- 🖱️ Drag & Drop Anti-Colisión: Modo edición premium para arrastrar la UI libremente. Incluye un sistema que detecta los bordes de la pantalla e invierte las pestañas laterales para evitar que el menú se salga o se oculte.
- 🎯 Cero Dependencias de 'Target': Utiliza un sistema nativo y optimizado con TextUI (`DP-TextUI`) y detección de cercanía matemática.

¿Cómo funciona?

Una vez que el jugador utiliza el ítem del altavoz (por defecto speaker), este aparecerá en el mundo. Al acercarse, el sistema detecta la distancia matemáticamente y muestra las opciones en pantalla usando el DP-TextUI. También cuenta con soporte para radios de coche instalables (ítem vehicle_radio), accesibles mediante el comando /carradio.

El jugador puede interactuar con el altavoz usando teclas rápidas (E para abrir la interfaz, K para llevarlo en la mano, G para guardarlo). Dentro del menú interactivo, se pueden crear listas, generar códigos de invitación, importar playlists enteras con un link de YouTube y modificar los permisos de los oyentes. Además, el script guarda en base de datos las preferencias del usuario, como si prefiere moverse mientras el menú está abierto o la posición exacta de la interfaz en su pantalla.

¿Qué te permite?

✅ Reproducir música sincronizada en tiempo real sin lag en suelo o en vehículos 🎶.
✅ Reproducir listas en modo Aleatorio (Shuffle) o Bucle (Loop) 🔀.
✅ Visualizar portadas dinámicas en mosaico estilo Spotify 🖼️.
✅ Importar de golpe hasta 50 canciones desde YouTube 📥.
✅ Compartir la sesión como DJ con amigos mediante códigos secretos 🔑.
✅ Gestionar permisos de quién añade o quita canciones 🛡️.
✅ Traspasar la propiedad de una lista a otro jugador 👑.
✅ Coger, mover y transportar el altavoz en la mano mientras suena 🚶‍♂️.
✅ Arrastrar la UI libremente y guardar la posición (con sistema anti-colisión de bordes) 🖱️.
✅ Función de borrado completo (Wipe) de datos y listas por usuario 🗑️.

🚀 Instalación

Requisitos previos

- Servidor FiveM con QBCore o ESX instalado y actualizado.
- Base de datos MySQL configurada (oxmysql).
- Sistema de audio (xsound).
- Sistema de notificaciones en pantalla (DP-TextUI).

Pasos de instalación

1. **Descargar el script** y colocar la carpeta en tu servidor dentro del directorio `resources`.
- ⚠️ Asegúrate de que el nombre de la carpeta sea exactamente `DP-Boombox_v2`.
2. **Base de Datos (IMPORTANTE)**.
- Aunque las tablas principales se crean solas, **DEBES ejecutar el archivo `dp-boombox_v2.sql`** en tu base de datos para crear/actualizar la tabla `dp_preferences`, vital para guardar la posición de la UI y los ajustes de movimiento de los jugadores.
3. **Configuración de la API**.
- Abre el archivo `config.lua` y pega tu YouTube API Key (obligatorio para la importación de listas de reproducción completas).
4. **Configuración de los Ítems**.
- Añade el ítem del altavoz configurado en `Config.Radios` (por defecto `speaker`) y el de la radio del coche `Config.CarRadio.ItemInstall` (por defecto `vehicle_radio`) a la base de datos o al archivo `shared` de tu inventario.
5. **Dependencias visuales**.
- Asegúrate de tener tu recurso `DP-TextUI` funcionando para que se vean los avisos de las teclas en pantalla.
6. **Asegurar el recurso**.
- Añade `ensure DP-Boombox_v2` a tu `server.cfg`.
- ⚠️ IMPORTANTE: Asegúrate de iniciarlo DESPUÉS de `oxmysql` y `xsound`.

📂 Estructura del Script

DP-Boombox_v2
├── 📁 client
│   ├── 📄 client.lua
│   └── 📄 functions.lua
├── 📁 server
│   └── 📄 server.lua
├── 📁 ui
│   ├── 🌐 index.html
│   ├── 📄 script.js
│   └── 🎨 style.css
├── 📝 README.md
├── 📄 config.lua
├── 📄 fxmanifest.lua
└── 💾 dp-boombox_v2.sql

🎮 Controles por Defecto y Comandos

[E] - Abrir el menú del altavoz.
[K] - Coger el altavoz en la mano para llevártelo.
[G] - Recoger el altavoz y guardarlo en el inventario.
/carradio - Abrir el menú de la radio en un vehículo con radio instalada.

⚙️ Dependencias

Este script está diseñado para funcionar nativamente con entornos QBCore y ESX.

📦 Requisitos del Sistema

Recurso	Descripción / Estado
ESX / QB-Core	🔴 OBLIGATORIO
oxmysql	🔴 OBLIGATORIO
xsound	🔴 OBLIGATORIO
DP-TextUI	🔴 OBLIGATORIO

🖼️ Vistas Previas

Explora el poder y el diseño de las distintas secciones del boombox.

Reproductor Principal y Controles Avanzados

Biblioteca y Mosaicos Dinámicos

Gestión de Permisos en Tiempo Real

Modo Edición Libre (Drag & Drop)

Ajustes y Zona de Peligro

🎥 Video Demostrativo

Ver Funcionamiento

🔮 Posibles Mejoras Futuras

El script ya es increíblemente completo, pero siempre se puede ir a más.

🚧 Roadmap y Sugerencias

IDEA	EXPLICACIÓN
Soporte Spotify/Soundcloud	Integración de APIs de otras plataformas de streaming de música populares.
Más Modelos de Altavoces	Inclusión de props de boombox personalizados y radios antiguas para distintas vibras.
Efectos Visuales (VFX)	Partículas o luces de neón en el prop que reaccionen a los graves de la música (Audio visualizer en 3D).

---

Autor: DP-Scripts
Versión: 1.2.5