Timers module overview

The Timers module is the core of Timers Studio. It is what the director drives during the show and what the audience — or the speaker on stage — reads on screen. This page describes the parts you will see, where they live in the app, and how they talk to each other.

Two routes, one module

The module is served from two URLs for the same room ID.

• timers.studio/id/<room> — the Studio, the director view. Rendered by StudioView. It holds the rundown, the controls, the message editor, and every modal (Customize, Links, Shortcuts, Export/Import, Activity logs).
• timers.studio/player/<room> — the Player, the screen output. Rendered by PlayerPage. It displays a single timer and reacts to state pushed from the Studio within 100 ms.

Both routes subscribe to the same Supabase channel. Whatever you change in the Studio lands on every open Player, every Moderator view, and every embedded browser source.

What you see inside the Studio

The Studio lays out three vertical columns on a wide screen, or stacks them on narrower viewports:

• Left column — Rundown. Rendered by RundownList. The ordered list of timers for your show. Drag rows to reorder. Each row shows the title, the speaker, the type (DURATION, FINISH_TIME, TIME_OF_DAY, COUNT_UP) and the planned length.
• Center column — Player preview and transport. A live mirror of what the audience sees, plus the transport bar: Play, Pause, Stop, Next, Previous, and the tweak buttons (+1m, +30s, -30s, -1m) wired through ControlPanel.
• Right column — Messages and intercom. Rendered by MessageControl. The speaker message editor, the live Q&A queue, and the intercom chat with the moderator all share this pane.

Above the columns you get the Header: room title, language, Customize button, Shortcuts, Export/Import, Links, Activity logs, and the user menu.

The rundown

The rundown is the ordered list of timers the show will run through. Each entry is a TimerItem with a type, a durationSec or targetTime, a title, a speaker, and optional metadata (segment label, speaker icon, notes). The rundown drives the Player — only the active entry is rendered on screen. Changing the current index (via Next, Previous, or clicking a row) tells every Player to switch immediately.

State and sync

Every Studio session is persisted in Supabase under room_state.controller_id. The Studio publishes changes through a Realtime channel; the Player applies them through a server-anchored clock so that all viewers see the same tenth of a second regardless of their local clock drift. The calculation lives in PlayerPage.tsx (syncElapsedRef, syncReceivedAtRef).

Related modules

• Agenda — /agenda/<room> derives its running order from the same timer list. No separate rundown.
• Moderator — /moderator/<room> exposes a subset of controls plus the widget grid (intercom, polls, visual pager, Wharton clock, Q&A).
• Gateway — /ask/<room> is where the audience lands to send questions or vote on polls. The Gateway is also the transport layer for every realtime update.

Where to go next

• Create your first timer — three minutes from zero to a running clock.
• Launch and control the Player — open the Player view, run it fullscreen, embed it in OBS.
• Send messages to the stage — push text, flash, and fullscreen overlays to every viewer.
• Keyboard shortcuts — every key you can press in the Studio.
• Share links and permissions — copy the four role links and set the moderator password.