# Studio Panel - AvanzaCast

Panel de videoconferencia estilo StreamYard construido con React, LiveKit y Avanza-UI.

## 📋 Características

- ✅ **Videoconferencia en tiempo real** con LiveKit
- ✅ **Diseño tipo StreamYard** - Interfaz oscura y profesional
- ✅ **Componentes reutilizables** con Avanza-UI
- ✅ **Storybook** para documentación de componentes
- ✅ **TypeScript** - Tipado completo
- ✅ **Responsive** - Adaptable a diferentes tamaños de pantalla

## 🚀 Inicio Rápido

### Prerrequisitos

- Node.js 18+
- npm o yarn
- Cuenta de LiveKit (para desarrollo)

### Instalación

```bash
# Instalar dependencias
npm install

# Desarrollo
npm run dev

# Storybook
npm run storybook

# Build
npm run build
```

## 🏗️ Arquitectura

### Stack Tecnológico

- **React 18** - UI Framework
- **LiveKit** - WebRTC y videoconferencia
  - `@livekit/components-react` - Componentes React de LiveKit
  - `@livekit/components-styles` - Estilos base
  - `livekit-client` - Cliente JavaScript
- **Avanza-UI** - Librería de componentes personalizada
- **Vite** - Build tool y dev server
- **Storybook** - Documentación de componentes
- **TypeScript** - Lenguaje de programación

### Estructura del Proyecto

```
studio-panel/
├── src/
│   ├── components/
│   │   ├── StudioRoom/           # Componente principal de la sala
│   │   ├── VideoParticipant/     # Tile de participante
│   │   └── ...
│   ├── stories/                  # Historias de Storybook
│   │   ├── Button.stories.tsx
│   │   └── ...
│   ├── App.tsx                   # Aplicación principal
│   └── main.tsx                  # Entry point
├── .storybook/                   # Configuración de Storybook
│   ├── main.ts
│   └── preview.ts
├── package.json
└── vite.config.ts
```

## 📚 Componentes

### StudioRoom

Componente principal que maneja la sala de videoconferencia.

```tsx
import { StudioRoom } from './components/StudioRoom';

function App() {
  return (
    <StudioRoom
      serverUrl="wss://your-server.livekit.cloud"
      token="your-token"
      roomName="Mi Sala"
      onConnected={() => console.log('Conectado')}
      onDisconnected={() => console.log('Desconectado')}
    />
  );
}
```

#### Props

| Prop | Tipo | Requerido | Descripción |
|------|------|-----------|-------------|
| `serverUrl` | `string` | ✅ | URL del servidor LiveKit |
| `token` | `string` | ✅ | Token de autenticación |
| `roomName` | `string` | ❌ | Nombre de la sala |
| `onConnected` | `() => void` | ❌ | Callback al conectar |
| `onDisconnected` | `() => void` | ❌ | Callback al desconectar |

### VideoParticipant

Componente para mostrar un participante individual.

```tsx
import { VideoParticipant } from './components/VideoParticipant';

<VideoParticipant
  track={trackReference}
  showName={true}
  showAudioIndicator={true}
/>
```

## 🎨 Estilos y Tema

El proyecto utiliza el **Studio Theme** de Avanza-UI, basado en el diseño de StreamYard.

### Variables CSS

```css
/* Colores principales */
--studio-bg-primary: #0f0f0f;
--studio-bg-secondary: #1a1a1a;
--studio-accent: #3b82f6;
--studio-danger: #ef4444;
--studio-success: #10b981;

/* Espaciado */
--studio-space-sm: 8px;
--studio-space-md: 12px;
--studio-space-lg: 16px;

/* Tipografía */
--studio-text-base: 14px;
--studio-font-medium: 500;
```

### Personalización

Puedes sobrescribir las variables en tu CSS:

```css
:root {
  --studio-accent: #your-color;
}
```

## 📖 Storybook

Para ver y probar los componentes:

```bash
npm run storybook
```

El Storybook estará disponible en `http://localhost:6006`

### Historias Disponibles

- **Button** - Todos los estilos y variantes
- **StreamYard Control Bar** - Barra de controles estilo StreamYard
- Más historias en desarrollo...

## 🔧 Configuración de LiveKit

### Obtener Credenciales

1. Crear cuenta en [LiveKit Cloud](https://cloud.livekit.io)
2. Crear un nuevo proyecto
3. Obtener:
   - URL del servidor (WebSocket URL)
   - API Key
   - API Secret

### Generar Token

Para desarrollo, usa el [LiveKit CLI](https://docs.livekit.io/home/cli/):

```bash
# Instalar CLI
brew install livekit

# Generar token
livekit-cli token create \
  --api-key <tu-api-key> \
  --api-secret <tu-api-secret> \
  --join --room <nombre-sala> \
  --identity <nombre-usuario>
```

### Variables de Entorno

Crea un archivo `.env.local`:

```env
VITE_LIVEKIT_URL=wss://your-project.livekit.cloud
VITE_LIVEKIT_API_KEY=your-api-key
VITE_LIVEKIT_API_SECRET=your-api-secret
```

## 🎯 Características Clave

### Layout de Video

- **Grid Layout** - Vista de cuadrícula para múltiples participantes
- **Focus Layout** - Vista enfocada con thumbnails
- **Speaker View** - Vista del participante activo

### Controles

- 🎤 **Audio** - Activar/desactivar micrófono
- 📹 **Video** - Activar/desactivar cámara
- 🖥️ **Compartir pantalla** - Compartir pantalla
- ➕ **Invitar** - Agregar participantes
- ⚙️ **Configuración** - Ajustes de audio/video
- 🚪 **Salir** - Abandonar la sala

### Estados

- **Conectando** - Mostrando estado de conexión
- **En vivo** - Indicador de transmisión activa
- **Grabando** - Indicador de grabación
- **Hablando** - Indicador de audio activo

## 🧪 Testing

```bash
# Ejecutar tests
npm test

# Tests en modo watch
npm test -- --watch
```

## 📦 Build para Producción

```bash
# Build
npm run build

# Preview del build
npm run preview
```

## 🔗 Integración con Otros Servicios

### Multistreaming

Para transmitir a múltiples plataformas:

1. Usar **LiveKit Egress** para RTMP
2. Configurar destinos (YouTube, Facebook, Twitch, etc.)
3. Iniciar grabación/streaming desde la app

### Recording

```typescript
// Iniciar grabación
const egressClient = new EgressClient(serverUrl);
await egressClient.startRoomCompositeEgress(roomName, {
  file: {
    filepath: '/path/to/recording.mp4',
  },
});
```

## 🐛 Troubleshooting

### Error de conexión

- Verificar URL del servidor
- Verificar token válido
- Revisar permisos de cámara/micrófono

### Video no se muestra

- Verificar permisos del navegador
- Revisar configuración de dispositivos
- Verificar conexión de red

### Audio no funciona

- Verificar permisos de micrófono
- Revisar configuración de audio
- Comprobar que no esté silenciado

## 📝 Roadmap

- [ ] Chat en tiempo real
- [ ] Reacciones y emojis
- [ ] Grabación local
- [ ] Layouts personalizados
- [ ] Overlays y branding
- [ ] Moderación de participantes
- [ ] Estadísticas en tiempo real
- [ ] Integración con broadcast-panel

## 📄 Licencia

Uso interno - AvanzaCast

## 👥 Contribuidores

- Equipo AvanzaCast

## 📚 Recursos

- [LiveKit Docs](https://docs.livekit.io)
- [LiveKit React Components](https://docs.livekit.io/reference/components/react)
- [Avanza-UI](../avanza-ui/README.md)
- [StreamYard](https://streamyard.com) - Inspiración de diseño

---

**Versión:** 0.2.0  
**Última actualización:** 2025-11-11