Cesar Mendivil 91a09df7ab Unify ui-components into avanza-ui; remove ui-components package; fix type issues and studio-panel wrappers

2025-11-11 18:14:02 -07:00

13 KiB

Raw Blame History

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:

Panel Lateral Izquierdo (Escenas) - ~200-250px
Área Central (Vista Previa/Canvas) - Flexible
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:

Comentarios
Banners
Activos multimedia ⭐ (seleccionado en captura)
Estilo
Notas
Personas
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:

✓ Logo
✓ Superposición
✓ Código QR
✓ Clips de video
✓ Fondo
✓ Sonidos
✓ Música de fondo

5. BARRA SUPERIOR

Elementos (Left to Right)

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

6. BARRA INFERIOR - CONTROLES PRINCIPALES

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

Botones (de izquierda a derecha):

Micrófono
- Icon: 🎤
- Toggle state: On/Off
- Color On: #10b981
- Color Off: #ef4444
Cámara
- Icon: 📹
- Similar al micrófono
Compartir Pantalla
- Icon: 🖥️
- Background: #2a2a2a
Agregar Invitados
- Icon: ➕
- Background: #2a2a2a
Configuración
- Icon: ⚙️
- Background: #2a2a2a
Salir del Estudio (derecha)
- Background: #ef4444
- Color: #ffffff
- Border-radius: 6px
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

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

/* 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

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

/* 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

/* 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

StudioLayout
- Layout de 3 columnas
- Responsive
- Paneles colapsables
SceneCard
- Miniatura con preview
- Título
- Botón de acción
- Estado (activa/inactiva)
ControlButton
- Botón con ícono
- Toggle state
- Variantes: primary, secondary, danger
ParticipantCard
- Avatar
- Nombre
- Estado (audio/video)
- Menú de opciones
LayoutSelector
- Grid de layouts
- Preview visual de cada layout
- Estado activo
CollapsibleSection
- Header con título e ícono
- Contenido colapsable
- Animación suave
TabNavigation
- Tabs horizontales
- Indicador de tab activo
- Scroll horizontal si necesario
TopBar
- Logo
- Título
- Acciones
- Status indicators
BottomBar
- Controles principales
- Botones de acción
- Layout flexible
VideoCanvas
- Área de preview 16:9
- Overlays
- Responsive

15. MEJORAS RECOMENDADAS PARA STUDIO-PANEL

Prioridad Alta

✅ Implementar esquema de colores oscuro consistente
✅ Crear componentes de botones con estados correctos
✅ Layout de 3 columnas responsive
✅ Sistema de tabs lateral derecho
✅ Canvas central con aspect ratio 16:9

Prioridad Media

Animaciones y transiciones suaves
Estados hover/active/disabled consistentes
Sistema de iconos unificado
Sombras y elevaciones correctas
Tipografía mejorada

Prioridad Baja

Temas personalizables
Accesibilidad mejorada
Atajos de teclado
Tooltips informativos

16. VARIABLES CSS PROPUESTAS

/* 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

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

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

13 KiB Raw Blame History Unescape Escape

Análisis de la Interfaz de StreamYard Studio

Fecha de Análisis

URL Analizada

1. ESTRUCTURA GENERAL

Layout Principal

Esquema de Colores

2. PANEL LATERAL IZQUIERDO - ESCENAS

Características

Elementos

Header del Panel

Video de Introducción

Lista de Escenas

Video de Cierre

Botón Nueva Escena

3. ÁREA CENTRAL - CANVAS/PREVIEW

Características

Elementos Superpuestos

Indicador de Resolución

Barra de Layouts (Bottom Center)

Vista de Participantes (Bottom Left)

4. PANEL LATERAL DERECHO - CONTROLES

Características

Tabs Principales

Tab: Activos Multimedia

5. BARRA SUPERIOR

Elementos (Left to Right)

6. BARRA INFERIOR - CONTROLES PRINCIPALES

Botones (de izquierda a derecha):

Características Comunes de Botones

7. TIPOGRAFÍA

Font Family

Tamaños

8. ESPACIADO Y PADDING

Sistema de Espaciado

Padding de Contenedores

9. BORDER RADIUS

10. SOMBRAS

11. TRANSICIONES Y ANIMACIONES

Transiciones Estándar

Animaciones Específicas

12. ESTADOS INTERACTIVOS

Botones

Inputs

13. ICONOGRAFÍA

Fuente de Íconos

Tamaños de Íconos

14. COMPONENTES REUTILIZABLES IDENTIFICADOS

Para Avanza-UI

15. MEJORAS RECOMENDADAS PARA STUDIO-PANEL

Prioridad Alta

Prioridad Media

Prioridad Baja

16. VARIABLES CSS PROPUESTAS

17. NOTAS ADICIONALES

18. PRÓXIMOS PASOS

13 KiB

Raw Blame History