Skip to content

Timers 模块概览

Timers 模块的组成方式：位于 /id/ 的 Studio、位于 /player/ 的 Player、DashboardPanel、rundown，以及让所有视图保持同步的 Gateway 桥接层。

最近更新

Timers 模块概览

Timers 模块是 Timers Studio 的核心。它是导播在演出期间操作的界面，也是观众——或舞台上的演讲者——在屏幕上看到的内容。本页描述你将看到的各个部分、它们在应用中的位置，以及它们彼此之间的通信方式。

两条路由，一个模块

同一个房间 ID 由两个 URL 提供服务。

  • timers.studio/id/<room> — Studio，导播视图，由 StudioView 渲染。它承载 rundown、控制条、消息编辑器，以及所有弹层（Customize、Links、Shortcuts、Export/Import、Activity logs）。
  • timers.studio/player/<room> — Player，屏幕输出，由 PlayerPage 渲染。它只显示单个计时器，并在 100 ms 内响应从 Studio 推送的状态。

两条路由都订阅相同的 Supabase 频道。你在 Studio 中所做的任何更改，都会送达每一个打开的 Player、每一个 Moderator 视图，以及每一个嵌入的浏览器源。

Studio 内部布局

在宽屏上 Studio 排列三列，在窄屏上则垂直堆叠：

  • 左列 — Rundown。由 RundownList 渲染。演出的计时器有序列表。拖动行可重新排序。每行显示标题、演讲者、类型（DURATION、FINISH_TIME、TIME_OF_DAY、COUNT_UP）和计划时长。
  • 中列 — Player 预览与控制。观众所见内容的实时镜像，加上传输栏：Play、Pause、Stop、Next、Previous，以及通过 ControlPanel 接线的调整按钮（+1m、+30s、-30s、-1m）。
  • 右列 — 消息与内部通话。由 MessageControl 渲染。演讲者消息编辑器、Q&A 实时队列，以及与主持人的内部通话共享此面板。

列的上方是 Header：房间名、语言、Customize 按钮、Shortcuts、Export/Import、Links、Activity logs 和用户菜单。

rundown

rundown 是演出将依次运行的计时器有序列表。每一项都是一个 TimerItem，带有 type、durationSec 或 targetTime、title、speaker，以及可选的元数据（段落标签、演讲者图标、备注）。rundown 驱动 Player —— 只有当前激活的条目会被渲染到屏幕上。改变当前索引（通过 Next、Previous 或点击某一行）会让每个 Player 立即切换。

状态与同步

每个 Studio 会话都持久化在 Supabase 的 room_state.controller_id 下。Studio 通过 Realtime 频道发布变更；Player 则通过锚定在服务器的时钟应用这些变更，以保证所有观众看到同一个十分之一秒，无论他们本地时钟的漂移情况如何。相关计算位于 PlayerPage.tsx（syncElapsedRef、syncReceivedAtRef）。

相关模块

  • Agenda — /agenda/<room> 从同一份计时器列表派生出议程顺序，没有独立的 rundown。
  • Moderator — /moderator/<room> 暴露控制的一个子集，外加小组件网格（内部通话、polls、visual pager、Wharton clock、Q&A）。
  • Gateway — /ask/<room> 是观众发送问题或投票时到达的页面。Gateway 也是所有实时更新的传输层。

继续阅读