AvanzaCast/packages/broadcast-panel/README.md

# Broadcast Panel - AvanzaCast

Panel de control para gestión de transmisiones en vivo, inspirado en el diseño limpio y moderno de StreamYard.

## 🎨 Diseño y Estilos

Este proyecto utiliza **CSS Modules** para un diseño modular y mantenible, siguiendo las mejores prácticas de arquitectura de componentes React.

### Paleta de Colores

```css
--primary-blue: #1a73e8        /* Azul principal (acciones, enlaces activos) */
--primary-blue-hover: #1557b0  /* Azul hover */
--background-color: #f7f8fa    /* Fondo de página */
--surface-color: #ffffff       /* Fondo de componentes/tarjetas */
--text-primary: #212121        /* Texto principal */
--text-secondary: #5f6368      /* Texto secundario */
--border-light: #e8eaed        /* Bordes sutiles */
--active-bg-light: #e8f0fe     /* Fondo de elementos activos */
```

### Tipografía

- **Familia:** Inter, sistema UI sans-serif
- **Títulos (H2):** 22px, font-weight 600
- **Subtítulos:** 16px, font-weight 500
- **Texto principal:** 14px, font-weight 400
- **Texto pequeño:** 12px

## 📁 Assets Utilizados

### Imágenes del Dashboard Techwind

Los siguientes assets fueron copiados desde `/home/xesar/Descargas/techwind_v2.2.0/HTML/Dashboard/src/assets/images/`:

```
public/assets/
├── logo-dark.png         # Logo oscuro para header
├── logo-light.png        # Logo claro para sidebar
├── logo-icon.png         # Icono del logo (64x64)
├── logo-icon-32.png      # Icono pequeño (32x32)
└── logo-icon-64.png      # Icono mediano (64x64)

public/
└── favicon.ico           # Favicon del sitio
```

### Licencia de Assets

Los assets provienen de la plantilla **Techwind v2.2.0** (Dashboard template).  
**Uso:** Estos assets están incluidos para propósitos de desarrollo y demostración.  
**Nota:** Reemplazar con assets propios antes de producción si se requiere licencia comercial.

## 🏗️ Estructura de Componentes

```
src/components/
├── PageContainer.tsx          # Contenedor principal con layout
├── PageContainer.module.css   # Estilos del contenedor
├── Sidebar.tsx                # Barra lateral de navegación
├── Sidebar.module.css         # Estilos del sidebar
├── Header.tsx                 # Barra superior
├── Header.module.css          # Estilos del header
├── TransmissionsTable.tsx     # Tabla de transmisiones
├── TransmissionsTable.module.css
└── NewTransmissionModal (migrado a `shared/components/NewTransmissionModal.tsx`)
```

## 🚀 Desarrollo

### Iniciar el servidor de desarrollo

Desde la raíz del monorepo:

```bash
npm run dev:broadcast-panel
```

O directamente en el paquete:

```bash
cd packages/broadcast-panel
npm run dev
```

El servidor estará disponible en: **http://localhost:5173/**

### Build de producción

```bash
npm run build
```

## 📱 Responsive Design

El diseño es completamente responsivo con breakpoints:

- **Desktop:** > 1024px (sidebar fijo, header completo)
- **Tablet:** 768px - 1024px (sidebar colapsable)
- **Mobile:** < 768px (sidebar con toggle, header compacto)

## ✨ Características UI

### Sidebar
- Navegación con indicadores visuales de página activa
- Sección de almacenamiento con barra de progreso
- Diseño fijo con scroll interno
- Iconos emoji temporales (reemplazar con SVG icons)

### Header
- Toggle de tema claro/oscuro
- Notificaciones con badge
- Menú de usuario
- Botón de "Mejora tu plan"

### Transmissions Table
- Tabs para filtrar (Próximamente / Anteriores)
- Estados hover en filas
- Botones de acción (Entrar al estudio, Más opciones)
- Estado vacío con mensaje descriptivo

### Modal
- Overlay con backdrop blur
- Animaciones de entrada (fadeIn + slideUp)
- Formulario con validación
- Cierre con Escape o clic fuera

## 🔧 Próximas Mejoras

- [ ] Reemplazar emojis con iconos SVG (React Icons)
- [ ] Implementar tema oscuro completo
- [ ] Añadir animaciones de transición entre páginas
- [ ] Implementar filtrado real de tabs (Próximamente/Anteriores)
- [ ] Añadir estados de carga (loading skeletons)
- [ ] Implementar dropdown del menú de usuario
- [ ] Añadir tooltips informativos

## 📝 Notas de Implementación

Este panel sigue el patrón de diseño de **StreamYard**, caracterizado por:

1. **Simplicidad:** UI limpia sin elementos innecesarios
2. **Claridad:** Jerarquía visual clara con espaciado generoso
3. **Consistencia:** Uso uniforme de colores, tipografía y espaciado
4. **Accesibilidad:** Contraste adecuado, tamaños de fuente legibles
5. **Responsividad:** Adaptación fluida a diferentes dispositivos

## Entrar al estudio (token flow)

El botón "Entrar al estudio" ahora solicita un token al servidor de tokens (configurable mediante la variable de entorno `VITE_TOKEN_SERVER_URL`) y abre el `studio-panel` enviando el token vía `postMessage` (o redirige como fallback si el popup está bloqueado).

Variables importantes:
- VITE_TOKEN_SERVER_URL - URL base del servidor que responde en `/api/token?room=...&username=...` y devuelve JSON con `{ token, url }`.
- VITE_STUDIO_URL - URL base del `studio-panel` (ej. `https://avanzacast-studio.bfzqqk.easypanel.host`) que se usa como origin para postMessage.

Cómo probar localmente:
1. Levanta `backend-api` con tus credenciales LiveKit (LIVEKIT_API_KEY y LIVEKIT_API_SECRET en .env):
```bash
cd packages/backend-api
npm run dev
```
2. Arranca `broadcast-panel` (por defecto corre en http://localhost:5175):
```bash
cd packages/broadcast-panel
npm run dev
```
3. Abre la lista de transmisiones y pulsa "Entrar al estudio" en una fila; el panel abrirá el `studio-panel` en una ventana popup y enviará el token por postMessage.

Notas de debug:
- Si no recibes confirmación (ACK) del `studio-panel`, revisa la consola del navegador para ver posibles errores de `postMessage` (origin mismatch) o bloqueos de popup.
- Para pruebas locales puedes usar `packages/studio-panel/public/simulate_postmessage.html` (simulador) para verificar el flujo sin LiveKit.