Skip to content

Visión general del módulo Timers

Cómo encaja el módulo Timers: el Studio en /id/, el Player en /player/, el DashboardPanel, el rundown y el puente Gateway que mantiene todas las vistas sincronizadas.

Última actualización

Visión general del módulo Timers

El módulo Timers es el núcleo de Timers Studio. Es lo que pilota la realización durante el show y lo que el público — o el ponente en escena — lee en pantalla. Esta página describe las partes que verás, dónde viven en la app y cómo se comunican entre sí.

Dos rutas, un módulo

El módulo se sirve desde dos URL con el mismo ID de sala.

  • timers.studio/id/<room> — el Studio, la vista de realización. Renderizado por StudioView. Contiene el rundown, los controles, el editor de mensajes y todos los modales (Customize, Links, Shortcuts, Export/Import, Activity logs).
  • timers.studio/player/<room> — el Player, la salida de pantalla. Renderizado por PlayerPage. Muestra un solo timer y reacciona al estado enviado desde el Studio en menos de 100 ms.

Ambas rutas se suscriben al mismo canal Supabase. Lo que cambies en el Studio llega a cada Player abierto, a cada vista Moderator y a cada fuente de navegador incrustada.

Lo que ves dentro del Studio

El Studio dispone tres columnas verticales en pantalla ancha, o las apila en viewports más estrechos:

  • Columna izquierda — Rundown. Renderizada por RundownList. La lista ordenada de timers del show. Arrastra las filas para reordenar. Cada fila muestra el título, el ponente, el tipo (DURATION, FINISH_TIME, TIME_OF_DAY, COUNT_UP) y la duración prevista.
  • Columna central — Vista previa del Player y transporte. Un espejo en vivo de lo que ve el público, más la barra de transporte: Play, Pause, Stop, Next, Previous, y los botones de ajuste (+1m, +30s, -30s, -1m) conectados a través de ControlPanel.
  • Columna derecha — Mensajes e intercom. Renderizada por MessageControl. El editor de mensajes al ponente, la cola Q&A en vivo y el intercom con el moderador comparten este panel.

Encima de las columnas, el Header: título de sala, idioma, botón Customize, Shortcuts, Export/Import, Links, Activity logs, menú de usuario.

El rundown

El rundown es la lista ordenada de timers que el show va a encadenar. Cada entrada es un TimerItem con un type, un durationSec o un targetTime, un title, un speaker y metadatos opcionales (etiqueta de segmento, icono de ponente, notas). El rundown pilota el Player — solo se renderiza en pantalla la entrada activa. Cambiar el índice actual (mediante Next, Previous o haciendo clic en una fila) hace que cada Player cambie de inmediato.

Estado y sincronización

Cada sesión de Studio se persiste en Supabase bajo room_state.controller_id. El Studio publica los cambios mediante un canal Realtime; el Player los aplica mediante un reloj anclado al servidor para que todos los espectadores vean la misma décima de segundo, con independencia de la deriva local. El cálculo vive en PlayerPage.tsx (syncElapsedRef, syncReceivedAtRef).

Módulos relacionados

  • Agenda — /agenda/<room> deriva su orden de paso de la misma lista de timers. Sin rundown separado.
  • Moderator — /moderator/<room> expone un subconjunto de controles más la rejilla de widgets (intercom, polls, visual pager, Wharton clock, Q&A).
  • Gateway — /ask/<room> es la página donde aterriza el público para enviar preguntas o votar. El Gateway es también la capa de transporte para cada actualización en tiempo real.

Para continuar