# 🐳 Docker Setup - Broadcast Panel

## Archivos Docker Creados

- **Dockerfile**: Imagen de producción con Nginx
- **Dockerfile.dev**: Imagen de desarrollo con Vite HMR
- **docker-compose.yml**: Orquestación de contenedores
- **nginx.conf**: Configuración de Nginx para SPA
- **.dockerignore**: Archivos excluidos del build
- **start-docker.sh**: Script de inicio rápido

## 🚀 Inicio Rápido

### Modo Desarrollo (Recomendado para trabajar)
```bash
cd packages/broadcast-panel
chmod +x start-docker.sh
./start-docker.sh dev
```

Accede a: **http://localhost:5173**

### Modo Producción
```bash
./start-docker.sh prod
```

Accede a: **http://localhost:8080**

## 📦 Comandos Manuales

### Desarrollo
```bash
# Build
docker-compose build broadcast-panel-dev

# Iniciar
docker-compose up broadcast-panel-dev

# Iniciar en background
docker-compose up -d broadcast-panel-dev

# Ver logs
docker-compose logs -f broadcast-panel-dev

# Detener
docker-compose down
```

### Producción
```bash
# Build
docker-compose --profile production build broadcast-panel-prod

# Iniciar
docker-compose --profile production up broadcast-panel-prod

# Iniciar en background
docker-compose --profile production up -d broadcast-panel-prod
```

## 🔧 Configuración

### Variables de Entorno

Copia `.env.example` a `.env` y ajusta las variables:

```env
VITE_LIVEKIT_WS_URL=wss://livekit-server.bfzqqk.easypanel.host
VITE_TOKEN_SERVER_URL=http://localhost:3010
```

### Puertos

- **5173**: Vite Dev Server (desarrollo)
- **8080**: Nginx (producción)

## 🌐 Conexión con LiveKit

El broadcast-panel se conectará a:

1. **Servidor LiveKit**: `wss://livekit-server.bfzqqk.easypanel.host`
2. **Token Server**: `http://localhost:3010` (Docker en tu máquina)

### Token Server

Asegúrate de que el token server esté corriendo:

```bash
cd packages/backend-api
docker-compose up -d
```

O si ya está corriendo con Docker, verifica:

```bash
docker ps | grep token-server
curl http://localhost:3010/api/token?room=test&username=demo
```

## 🔄 Hot Reload (Modo Desarrollo)

Los cambios en estos archivos se reflejan automáticamente:
- `src/**/*`
- `public/**/*`
- `index.html`
- `vite.config.ts`
- `tsconfig.json`

## 🐛 Troubleshooting

### Error: No se puede conectar al token server

```bash
# Verifica que el token server esté corriendo
docker ps

# Verifica la URL en .env
cat .env | grep TOKEN_SERVER
```

### Error: No se puede conectar a LiveKit

```bash
# Verifica la URL de LiveKit en .env
cat .env | grep LIVEKIT

# Prueba la conexión
curl -I https://livekit-server.bfzqqk.easypanel.host
```

### Rebuild completo

```bash
# Detener y eliminar contenedores
docker-compose down

# Eliminar imágenes
docker-compose rm -f

# Rebuild desde cero
docker-compose build --no-cache broadcast-panel-dev
docker-compose up broadcast-panel-dev
```

## 📊 Logs

```bash
# Ver logs en tiempo real
docker-compose logs -f broadcast-panel-dev

# Ver últimas 100 líneas
docker-compose logs --tail=100 broadcast-panel-dev
```

## 🧹 Limpieza

```bash
# Detener contenedores
docker-compose down

# Eliminar volúmenes (cuidado, borra datos)
docker-compose down -v

# Eliminar imágenes
docker rmi avanzacast-broadcast-panel-dev
docker rmi avanzacast-broadcast-panel-prod
```

## 🔗 Integración con Studio-Panel

Para que **studio-panel** se conecte con **broadcast-panel**:

1. Inicia broadcast-panel en Docker:
   ```bash
   ./start-docker.sh dev
   ```

2. En studio-panel, asegúrate de que esté en modo real (no demo):
   - El token server debe estar accesible en `localhost:3010`
   - Studio-panel intentará obtener un token real
   - Se conectará a LiveKit

3. Abre ambos:
   - Broadcast Panel: http://localhost:5173
   - Studio Panel: http://localhost:3001

4. Desde broadcast-panel, crea una sala y genera un link de invitación
5. Abre ese link en studio-panel para unirte a la sala

## 🎯 Siguiente Paso

Una vez que broadcast-panel esté corriendo en Docker, podrás:

1. ✅ Crear salas en broadcast-panel
2. ✅ Generar tokens de invitación
3. ✅ Conectar studio-panel a esas salas
4. ✅ Ver video/audio en tiempo real entre ambos
5. ✅ Probar todas las funcionalidades de LiveKit

¡Disfruta tu streaming en vivo! 🎥