Skip to content
Documentation

Vue d'ensemble du module Timers

Comment le module Timers s'assemble : le Studio sur /id/, le Player sur /player/, le DashboardPanel, le rundown et le pont Gateway qui maintient toutes les vues synchronisées.

Mis à jour le

Vue d’ensemble du module Timers

Le module Timers est le cœur de Timers Studio. C’est ce que pilote la régie pendant le show, et ce que le public — ou l’intervenant sur scène — lit à l’écran. Cette page décrit les parties visibles, où elles vivent dans l’app, et comment elles dialoguent.

Deux routes, un module

Le module est servi depuis deux URL pour le même ID de room.

  • timers.studio/id/<room> — le Studio, la vue régie. Rendu par StudioView. Il contient le rundown, les contrôles, l’éditeur de messages et toutes les modals (Customize, Links, Shortcuts, Export/Import, Activity logs).
  • timers.studio/player/<room> — le Player, la sortie écran. Rendu par PlayerPage. Il affiche un seul timer et réagit à l’état poussé depuis le Studio en moins de 100 ms.

Les deux routes sont abonnées au même canal Supabase. Toute modification dans le Studio arrive sur chaque Player ouvert, chaque vue Moderator et chaque source navigateur embarquée.

Ce que vous voyez dans le Studio

Le Studio dispose trois colonnes verticales sur grand écran, ou les empile sur les viewports plus étroits :

  • Colonne gauche — Rundown. Rendue par RundownList. La liste ordonnée des timers du show. Glissez les lignes pour réordonner. Chaque ligne affiche le titre, l’intervenant, le type (DURATION, FINISH_TIME, TIME_OF_DAY, COUNT_UP) et la durée prévue.
  • Colonne centrale — Aperçu Player et transport. Un miroir live de ce que voit le public, plus la barre de transport : Play, Pause, Stop, Next, Previous, et les boutons tweak (+1m, +30s, -30s, -1m) câblés via ControlPanel.
  • Colonne droite — Messages et intercom. Rendue par MessageControl. L’éditeur de messages au speaker, la file Q&A live et l’intercom avec le modérateur partagent ce panneau.

Au-dessus des colonnes, le Header : titre de room, langue, bouton Customize, Shortcuts, Export/Import, Links, Activity logs, menu utilisateur.

Le rundown

Le rundown est la liste ordonnée des timers que le show va enchaîner. Chaque entrée est un TimerItem avec un type, une durationSec ou un targetTime, un title, un speaker, et des métadonnées optionnelles (libellé de segment, icône d’intervenant, notes). Le rundown pilote le Player — seule l’entrée active est rendue à l’écran. Changer l’index courant (via Next, Previous, ou en cliquant une ligne) fait basculer chaque Player immédiatement.

État et synchronisation

Chaque session Studio est persistée dans Supabase sous room_state.controller_id. Le Studio publie les changements via un canal Realtime ; le Player les applique via une horloge ancrée serveur pour que tous les viewers voient le même dixième de seconde, quel que soit leur dérive locale. Le calcul vit dans PlayerPage.tsx (syncElapsedRef, syncReceivedAtRef).

Modules connexes

  • Agenda — /agenda/<room> dérive son ordre de passage depuis la même liste de timers. Pas de rundown séparé.
  • Moderator — /moderator/<room> expose un sous-ensemble de contrôles plus la grille de widgets (intercom, polls, visual pager, Wharton clock, Q&A).
  • Gateway — /ask/<room> est la page où arrive le public pour envoyer des questions ou voter. Le Gateway est aussi la couche de transport pour chaque mise à jour realtime.

Pour aller plus loin