Cesar Mendivil 543d6bc6af feat: update studio-panel and broadcast-panel configurations
- Changed development port for studio-panel from 3001 to 3020 in package.json and vite.config.ts.
- Refactored Studio component in studio-panel to improve token handling and error diagnostics.
- Added utility functions for token validation and JWT decoding in Studio component.
- Enhanced error handling and user feedback in Studio component when token is invalid.
- Implemented sessionStorage management for token and server URL in Studio component.
- Created Docker setup for broadcast-panel including Dockerfile, Dockerfile.dev, and docker-compose.yml.
- Added Nginx configuration for serving the broadcast-panel as a Single Page Application.
- Introduced Banner component in broadcast-panel for displaying messages and actions.
- Added start-docker.sh script for easy Docker management of broadcast-panel.
- Implemented Playwright E2E tests for token handling and UI interactions between broadcast-panel and studio-panel.
- Included SSL certificates for local development in studio-panel.
2025-11-06 23:15:23 -07:00

4.1 KiB

🐳 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)

cd packages/broadcast-panel
chmod +x start-docker.sh
./start-docker.sh dev

Accede a: http://localhost:5173

Modo Producción

./start-docker.sh prod

Accede a: http://localhost:8080

📦 Comandos Manuales

Desarrollo

# 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

# 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:

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:

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

O si ya está corriendo con Docker, verifica:

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

# 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

# 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

# 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

# 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

# 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:

    ./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:

  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! 🎥