AvanzaCast/docs/STREAMYARD_STUDIO_UI_ANALYSIS.md

# Análisis de la Interfaz de StreamYard Studio

## Fecha de Análisis
2025-11-11

## URL Analizada
https://streamyard.com/j9smzza87q

---

## 1. ESTRUCTURA GENERAL

### Layout Principal
La interfaz de StreamYard está dividida en 3 áreas principales:

1. **Panel Lateral Izquierdo** (Escenas) - ~200-250px
2. **Área Central** (Vista Previa/Canvas) - Flexible
3. **Panel Lateral Derecho** (Controles y Opciones) - ~300-350px

### Esquema de Colores
- **Background Principal**: `#1a1a1a` - `#0f0f0f` (Negro muy oscuro)
- **Background Secundario**: `#242424` - `#2a2a2a` (Gris oscuro)
- **Bordes**: `#333333` - `#404040` (Gris medio oscuro)
- **Texto Principal**: `#ffffff` - `#e0e0e0` (Blanco/Gris claro)
- **Texto Secundario**: `#999999` - `#b0b0b0` (Gris)
- **Accent/Primary**: `#3b82f6` (Azul)
- **Success**: `#10b981` (Verde)
- **Warning**: `#f59e0b` (Naranja)
- **Danger**: `#ef4444` (Rojo)

---

## 2. PANEL LATERAL IZQUIERDO - ESCENAS

### Características
- **Ancho**: ~200-220px
- **Background**: `#1a1a1a`
- **Scrollable**: Sí, cuando hay muchas escenas

### Elementos

#### Header del Panel
```
┌─────────────────────────┐
│ Escenas        BETA [?] │
│ [<] Mis Escenas    [⋮] │
└─────────────────────────┘
```
- Título: "Escenas" + Badge "BETA"
- Botón de información `[?]`
- Navegación back `[<]`
- Menú de opciones `[⋮]`

#### Video de Introducción
```
┌─────────────────────────┐
│  [+]                    │
│  Establecer video de    │
│  introducción           │
└─────────────────────────┘
```
- Botón con ícono `+`
- Texto explicativo
- Hover: Background `#2a2a2a`

#### Lista de Escenas
Cada escena tiene:
```
┌─────────────────────────┐
│ [Miniatura Preview]     │
│                         │
│ Demo scene 1            │
│ [Botón: Mostrar]        │
└─────────────────────────┘
```

Propiedades de cada item:
- **Miniatura**: Aspect ratio 16:9, ~180x100px
- **Título**: Font-size 14px, color `#e0e0e0`
- **Botón de Acción**: "Mostrar en el escenario"
  - Background: `#3b82f6` en hover
  - Border-radius: `6px`
  - Padding: `8px 16px`

#### Video de Cierre
Similar al de introducción, al final de la lista

#### Botón Nueva Escena
```
┌─────────────────────────┐
│  [+] Nueva escena       │
└─────────────────────────┘
```
- Background: `#2a2a2a`
- Hover: `#333333`
- Border: `1px dashed #404040`

---

## 3. ÁREA CENTRAL - CANVAS/PREVIEW

### Características
- **Background**: `#0f0f0f` (Más oscuro que los paneles)
- **Aspect Ratio**: 16:9 (se ajusta al espacio disponible)
- **Centered**: Sí, vertical y horizontalmente

### Elementos Superpuestos

#### Indicador de Resolución
```
┌──────┐
│ 720p │
└──────┘
```
- Posición: Top-left
- Background: `rgba(0, 0, 0, 0.7)`
- Border-radius: `4px`
- Padding: `4px 8px`
- Font-size: `12px`

#### Barra de Layouts (Bottom Center)
```
┌─────────────────────────────────────────────────┐
│ [□] [⊞] [⊟] [⊡] [⊠] [⊞] [⊟] [■]              │
└─────────────────────────────────────────────────┘
```
- Posición: Bottom center, ~40px desde abajo
- Background: `rgba(0, 0, 0, 0.8)`
- Border-radius: `8px`
- Padding: `8px`
- Botones de layout:
  - Tamaño: `40x40px`
  - Hover: Background `#333333`
  - Active: Background `#3b82f6`
  - Border-radius: `6px`
  - Gap: `4px`

#### Vista de Participantes (Bottom Left)
```
┌─────────────────────┐
│ [👤] Xesar    [⋮]  │
│ Vista de orador     │
│                     │
│ [+ Presentar/      │
│    invitar]         │
└─────────────────────┘
```
- Posición: Bottom-left
- Background: `rgba(0, 0, 0, 0.9)`
- Border-radius: `8px`
- Width: ~240px

---

## 4. PANEL LATERAL DERECHO - CONTROLES

### Características
- **Ancho**: ~300-320px
- **Background**: `#1a1a1a`
- **Sticky tabs**: En la parte superior

### Tabs Principales
```
┌──────────────────────────────────────┐
│ [Comentarios] [Banners] [Activos]... │
└──────────────────────────────────────┘
```

Tabs disponibles:
1. Comentarios
2. Banners
3. Activos multimedia ⭐ (seleccionado en captura)
4. Estilo
5. Notas
6. Personas
7. Chat privado

#### Tab: Activos Multimedia

**Selector de Marca**
```
┌─────────────────────────┐
│ Marca 1        [⋮]     │
└─────────────────────────┘
```

**Secciones Colapsables**

Cada sección tiene:
- **Header**: Título + ícono `[?]` + toggle `[›]`
- **Background**: `#242424` para header
- **Hover**: `#2a2a2a`
- **Border-bottom**: `1px solid #333333`

Secciones:
1. ✓ Logo
2. ✓ Superposición
3. ✓ Código QR
4. ✓ Clips de video
5. ✓ Fondo
6. ✓ Sonidos
7. ✓ Música de fondo

---

## 5. BARRA SUPERIOR

### Elementos (Left to Right)

1. **Logo StreamYard** - Clickeable, va al home
2. **Título Broadcast**: "Transmision"
3. **Botón "Agregar destino"**
   - Background: `#3b82f6`
   - Icons: YouTube, Facebook, etc.
   - Border-radius: `6px`
4. **Status Indicators**
5. **Botones de Acción**:
   - Cancelar
   - Reiniciar
   - Pausa
   - Grabar (con efecto de "recording")

---

## 6. BARRA INFERIOR - CONTROLES PRINCIPALES

```
┌────────────────────────────────────────────────────────┐
│ [🎤] [📹] [🖥️] [➕] [⚙️]         [🚪 Salir] [❓]   │
└────────────────────────────────────────────────────────┘
```

### Botones (de izquierda a derecha):

1. **Micrófono**
   - Icon: `🎤`
   - Toggle state: On/Off
   - Color On: `#10b981`
   - Color Off: `#ef4444`

2. **Cámara**
   - Icon: `📹`
   - Similar al micrófono

3. **Compartir Pantalla**
   - Icon: `🖥️`
   - Background: `#2a2a2a`

4. **Agregar Invitados**
   - Icon: `➕`
   - Background: `#2a2a2a`

5. **Configuración**
   - Icon: `⚙️`
   - Background: `#2a2a2a`

6. **Salir del Estudio** (derecha)
   - Background: `#ef4444`
   - Color: `#ffffff`
   - Border-radius: `6px`

7. **Ayuda** (extremo derecho)
   - Icon: `❓`
   - Background: transparent
   - Border: `1px solid #404040`

### Características Comunes de Botones
- **Tamaño**: `48x48px` (botones principales)
- **Border-radius**: `8px`
- **Gap**: `8px`
- **Hover**: Brightness +10%
- **Active**: Background `#333333`
- **Transition**: `all 150ms ease`

---

## 7. TIPOGRAFÍA

### Font Family
```css
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 
             'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 
             'Helvetica Neue', sans-serif;
```

### Tamaños
- **Títulos principales**: `18-20px`, weight `600`
- **Subtítulos**: `16px`, weight `500`
- **Texto normal**: `14px`, weight `400`
- **Texto pequeño**: `12px`, weight `400`
- **Labels**: `13px`, weight `500`

---

## 8. ESPACIADO Y PADDING

### Sistema de Espaciado
- **xs**: `4px`
- **sm**: `8px`
- **md**: `12px`
- **lg**: `16px`
- **xl**: `24px`
- **2xl**: `32px`

### Padding de Contenedores
- **Paneles laterales**: `16px`
- **Cards**: `12px 16px`
- **Botones**: `8px 16px` (small), `12px 24px` (medium)
- **Input fields**: `10px 12px`

---

## 9. BORDER RADIUS

- **Pequeño**: `4px` (badges, tags)
- **Medio**: `6px` (botones, inputs)
- **Grande**: `8px` (cards, modales)
- **Muy grande**: `12px` (containers principales)

---

## 10. SOMBRAS

```css
/* Sombra sutil para elevación */
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);

/* Sombra media para popups */
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4);

/* Sombra fuerte para modales */
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
```

---

## 11. TRANSICIONES Y ANIMACIONES

### Transiciones Estándar
```css
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
```

### Animaciones Específicas
- **Hover en botones**: `transform: scale(1.02)`
- **Active en botones**: `transform: scale(0.98)`
- **Fade in**: `opacity 200ms ease-in`
- **Slide in**: `transform 250ms ease-out`

---

## 12. ESTADOS INTERACTIVOS

### Botones
```css
/* Default */
background: #2a2a2a;
color: #e0e0e0;

/* Hover */
background: #333333;

/* Active */
background: #3b82f6;
color: #ffffff;

/* Disabled */
background: #1a1a1a;
color: #666666;
opacity: 0.5;
cursor: not-allowed;
```

### Inputs
```css
/* Default */
background: #242424;
border: 1px solid #404040;
color: #e0e0e0;

/* Focus */
border-color: #3b82f6;
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);

/* Error */
border-color: #ef4444;
```

---

## 13. ICONOGRAFÍA

### Fuente de Íconos
Se utilizan principalmente:
- **Material Icons** o similar
- **SVG custom** para algunos elementos

### Tamaños de Íconos
- **Pequeño**: `16px`
- **Medio**: `20px`
- **Grande**: `24px`
- **Muy grande**: `32px`

---

## 14. COMPONENTES REUTILIZABLES IDENTIFICADOS

### Para Avanza-UI

1. **StudioLayout**
   - Layout de 3 columnas
   - Responsive
   - Paneles colapsables

2. **SceneCard**
   - Miniatura con preview
   - Título
   - Botón de acción
   - Estado (activa/inactiva)

3. **ControlButton**
   - Botón con ícono
   - Toggle state
   - Variantes: primary, secondary, danger

4. **ParticipantCard**
   - Avatar
   - Nombre
   - Estado (audio/video)
   - Menú de opciones

5. **LayoutSelector**
   - Grid de layouts
   - Preview visual de cada layout
   - Estado activo

6. **CollapsibleSection**
   - Header con título e ícono
   - Contenido colapsable
   - Animación suave

7. **TabNavigation**
   - Tabs horizontales
   - Indicador de tab activo
   - Scroll horizontal si necesario

8. **TopBar**
   - Logo
   - Título
   - Acciones
   - Status indicators

9. **BottomBar**
   - Controles principales
   - Botones de acción
   - Layout flexible

10. **VideoCanvas**
    - Área de preview 16:9
    - Overlays
    - Responsive

---

## 15. MEJORAS RECOMENDADAS PARA STUDIO-PANEL

### Prioridad Alta
1. ✅ Implementar esquema de colores oscuro consistente
2. ✅ Crear componentes de botones con estados correctos
3. ✅ Layout de 3 columnas responsive
4. ✅ Sistema de tabs lateral derecho
5. ✅ Canvas central con aspect ratio 16:9

### Prioridad Media
6. Animaciones y transiciones suaves
7. Estados hover/active/disabled consistentes
8. Sistema de iconos unificado
9. Sombras y elevaciones correctas
10. Tipografía mejorada

### Prioridad Baja
11. Temas personalizables
12. Accesibilidad mejorada
13. Atajos de teclado
14. Tooltips informativos

---

## 16. VARIABLES CSS PROPUESTAS

```css
/* Colors */
--studio-bg-primary: #0f0f0f;
--studio-bg-secondary: #1a1a1a;
--studio-bg-tertiary: #242424;
--studio-border: #333333;
--studio-border-light: #404040;

--studio-text-primary: #ffffff;
--studio-text-secondary: #e0e0e0;
--studio-text-muted: #999999;

--studio-accent: #3b82f6;
--studio-success: #10b981;
--studio-warning: #f59e0b;
--studio-danger: #ef4444;

/* Spacing */
--studio-space-xs: 4px;
--studio-space-sm: 8px;
--studio-space-md: 12px;
--studio-space-lg: 16px;
--studio-space-xl: 24px;
--studio-space-2xl: 32px;

/* Border Radius */
--studio-radius-sm: 4px;
--studio-radius-md: 6px;
--studio-radius-lg: 8px;
--studio-radius-xl: 12px;

/* Shadows */
--studio-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
--studio-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
--studio-shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.5);

/* Transitions */
--studio-transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
```

---

## 17. NOTAS ADICIONALES

- La interfaz es muy limpia y minimalista
- Uso extensivo de grises oscuros para reducir fatiga visual
- Jerarquía visual clara con tamaños y pesos de fuente
- Espaciado generoso para mejorar legibilidad
- Uso consistente de border-radius para suavizar esquinas
- Feedback visual inmediato en todas las interacciones
- Prioriza la funcionalidad sobre decoración excesiva

---

## 18. PRÓXIMOS PASOS

1. Crear archivo de variables CSS para Avanza-UI
2. Implementar componentes base con estos estilos
3. Actualizar Studio-Panel con los nuevos componentes
4. Crear storybook/documentación de componentes
5. Pruebas de usabilidad y ajustes finales

---

**Análisis completado el**: 2025-11-11
**Analista**: GitHub Copilot
**Versión**: 1.0