Cesar Mendivil
0ca2b36b5c
- Added StudioLeftSidebar component for scene management with add, delete, and duplicate functionalities. - Introduced StudioRightPanel component with tabs for brand settings, multimedia, sounds, video, QR code generation, countdown, and general settings. - Created StudioSidebar component for participant management, chat, and notes. - Developed StudioVideoArea component to handle video display for demo and live modes. - Configured demo data for scenes, participants, overlays, backgrounds, and sounds in demo.ts. - Set up a token server for LiveKit integration to manage participant access. - Updated Vite environment definitions for LiveKit configuration.
130 lines
3.6 KiB
TypeScript
130 lines
3.6 KiB
TypeScript
// Configuración para modo demo/desarrollo
|
|
export const DEMO_MODE = import.meta.env.VITE_DEMO_MODE === 'true' || false
|
|
|
|
// Token simulado para desarrollo (cuando LiveKit no está disponible)
|
|
export const DEMO_TOKEN = 'demo-token-for-development'
|
|
|
|
// Configuración simulada de LiveKit
|
|
export const DEMO_LIVEKIT_CONFIG = {
|
|
serverUrl: 'wss://demo.livekit.cloud',
|
|
token: DEMO_TOKEN,
|
|
}
|
|
|
|
// Participantes simulados para modo demo
|
|
export const DEMO_PARTICIPANTS = [
|
|
{
|
|
id: 'local-user',
|
|
identity: 'Usuario Local',
|
|
name: 'Tú',
|
|
isSpeaking: false,
|
|
isCameraEnabled: true,
|
|
isMicrophoneEnabled: true,
|
|
isScreenShareEnabled: false,
|
|
isLocal: true,
|
|
},
|
|
{
|
|
id: 'guest-1',
|
|
identity: 'guest-1',
|
|
name: 'Invitado 1',
|
|
isSpeaking: true,
|
|
isCameraEnabled: true,
|
|
isMicrophoneEnabled: true,
|
|
isScreenShareEnabled: false,
|
|
isLocal: false,
|
|
},
|
|
{
|
|
id: 'guest-2',
|
|
identity: 'guest-2',
|
|
name: 'Invitado 2',
|
|
isSpeaking: false,
|
|
isCameraEnabled: false,
|
|
isMicrophoneEnabled: true,
|
|
isScreenShareEnabled: false,
|
|
isLocal: false,
|
|
},
|
|
]
|
|
|
|
// Escenas predefinidas para demo
|
|
export const DEMO_SCENES = [
|
|
{
|
|
id: 'scene-1',
|
|
name: 'Escena Principal',
|
|
thumbnail: 'https://via.placeholder.com/160x90/1a1a24/ec4899?text=Escena+1',
|
|
active: true,
|
|
},
|
|
{
|
|
id: 'scene-2',
|
|
name: 'Presentación',
|
|
thumbnail: 'https://via.placeholder.com/160x90/1a1a24/3b82f6?text=Escena+2',
|
|
active: false,
|
|
},
|
|
{
|
|
id: 'scene-3',
|
|
name: 'Pantalla compartida',
|
|
thumbnail: 'https://via.placeholder.com/160x90/1a1a24/10b981?text=Escena+3',
|
|
active: false,
|
|
},
|
|
]
|
|
|
|
// Temas de color para personalización
|
|
export const COLOR_THEMES = [
|
|
{ id: 'rosa', name: 'Rosa', primary: '#ec4899', secondary: '#be185d' },
|
|
{ id: 'azul', name: 'Azul', primary: '#3b82f6', secondary: '#1e40af' },
|
|
{ id: 'verde', name: 'Verde', primary: '#10b981', secondary: '#047857' },
|
|
{ id: 'morado', name: 'Morado', primary: '#a855f7', secondary: '#7e22ce' },
|
|
{ id: 'naranja', name: 'Naranja', primary: '#f97316', secondary: '#c2410c' },
|
|
{ id: 'rojo', name: 'Rojo', primary: '#ef4444', secondary: '#b91c1c' },
|
|
]
|
|
|
|
// Overlays de ejemplo
|
|
export const DEMO_OVERLAYS = [
|
|
{
|
|
id: 'overlay-1',
|
|
name: 'Lower Third',
|
|
thumbnail: 'https://via.placeholder.com/120x68/1a1a24/ec4899?text=Lower+Third',
|
|
type: 'lower-third',
|
|
},
|
|
{
|
|
id: 'overlay-2',
|
|
name: 'Logo Corner',
|
|
thumbnail: 'https://via.placeholder.com/120x68/1a1a24/3b82f6?text=Logo',
|
|
type: 'logo',
|
|
},
|
|
{
|
|
id: 'overlay-3',
|
|
name: 'Banner Superior',
|
|
thumbnail: 'https://via.placeholder.com/120x68/1a1a24/10b981?text=Banner',
|
|
type: 'banner',
|
|
},
|
|
]
|
|
|
|
// Fondos de ejemplo
|
|
export const DEMO_BACKGROUNDS = [
|
|
{
|
|
id: 'bg-1',
|
|
name: 'Gradient Rosa',
|
|
thumbnail: 'https://via.placeholder.com/120x68/ec4899/be185d?text=Gradient',
|
|
gradient: 'linear-gradient(135deg, #ec4899 0%, #be185d 100%)',
|
|
},
|
|
{
|
|
id: 'bg-2',
|
|
name: 'Gradient Azul',
|
|
thumbnail: 'https://via.placeholder.com/120x68/3b82f6/1e40af?text=Gradient',
|
|
gradient: 'linear-gradient(135deg, #3b82f6 0%, #1e40af 100%)',
|
|
},
|
|
{
|
|
id: 'bg-3',
|
|
name: 'Gradient Verde',
|
|
thumbnail: 'https://via.placeholder.com/120x68/10b981/047857?text=Gradient',
|
|
gradient: 'linear-gradient(135deg, #10b981 0%, #047857 100%)',
|
|
},
|
|
]
|
|
|
|
// Efectos de sonido de ejemplo
|
|
export const DEMO_SOUNDS = [
|
|
{ id: 'sound-1', name: 'Aplauso', icon: '👏', file: '/sounds/applause.mp3' },
|
|
{ id: 'sound-2', name: 'Risa', icon: '😄', file: '/sounds/laugh.mp3' },
|
|
{ id: 'sound-3', name: 'Campana', icon: '🔔', file: '/sounds/bell.mp3' },
|
|
{ id: 'sound-4', name: 'Intro', icon: '🎵', file: '/sounds/intro.mp3' },
|
|
]
|