Cesar Mendivil
543d6bc6af
- 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.
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
--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.tsx # Modal de creación
└── NewTransmissionModal.module.css
🚀 Desarrollo
Iniciar el servidor de desarrollo
Desde la raíz del monorepo:
npm run dev:broadcast-panel
O directamente en el paquete:
cd packages/broadcast-panel
npm run dev
El servidor estará disponible en: http://localhost:5173/
Build de producción
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:
- Simplicidad: UI limpia sin elementos innecesarios
- Claridad: Jerarquía visual clara con espaciado generoso
- Consistencia: Uso uniforme de colores, tipografía y espaciado
- Accesibilidad: Contraste adecuado, tamaños de fuente legibles
- Responsividad: Adaptación fluida a diferentes dispositivos