Skip to content

Capability: chapters

approved

Timeline segments and navigation across the video structure.

Purpose

A Latest Thinking video is a structured talk: question, method, findings. Chapters make that structure visible and navigable: the timeline shows the parts, the control bar names the current one, and the menu jumps between them.

Behavior

  • The timeline is segmented per chapter; clicking or tapping a segment seeks directly, like any timeline interaction.
  • The chapters trigger in the control bar is the chapters icon together with the current chapter name. Clicking either opens the chapters menu. The time display rendered next to it ("2:13 / 10:09") is display only, never a trigger.
  • The chapters menu opens from the trigger, anchored above the control bar as a dark panel. One row per chapter: the chapter name, a humanized duration below it (for example "2 min 16 sec"), and the chapter start time as a chip on the right (for example "1:02"). Intermediate durations run to the next chapter start; the final duration runs to a valid, strictly positive configured duration, otherwise the engine duration. Durations are rounded to whole seconds and composed from the localized minute and second fragments. Before a usable duration exists, only the final row's duration line is omitted and is added when metadata arrives. The menu remains fully usable during that window: opening, keyboard handling, and row selection are unaffected. No pending text is shown. Selecting a row seeks to that chapter's start.
  • The active chapter row is marked with a colored edge bar and a dot after the name. The in-chapter progress line visible under the active row in some design frames was deliberately dropped and must not be implemented.
  • The implicit intro segment: when the first chapter starts after zero (Latest Thinking videos carry a short branded intro, with the first chapter typically starting around nine seconds), the span from zero to the first chapter start is an unlabeled timeline segment. It is never listed in the menu, and no fake chapter is invented for it. While playback is inside it, the trigger shows no chapter name (the icon remains), and the chapterChange event reports null.
  • Shorts skip the intro: inside the feed, playback of a video with chapters starts directly at the first chapter's start, per the client's requirement (see the shorts document). Standalone instances always start at zero and play the intro.

Visual presentation

The chapter surfaces bind to the chapter-open variants in LT Player v4 portrait, node 4015-13289 and LT Player v4 landscape, node 4019-13290. The shipped Nunito Sans family continues to supersede the source file's Open Sans declarations.

  • The menu opens upward with a 10px engine side offset. It is a compact panel capped at 16rem and constrained by the available player width and height; the playground's viewport fallback is intentionally replaced by the player-owned available-width constraint.
  • The panel uses Surface black and a 0.35rem radius. Rows use 0.8rem 0.9rem 0.8rem 1rem padding, a 1rem column gap, and a 4px active edge. Overflow scrolls inside the panel instead of changing its anchor.
  • Each visible row prefixes the authored name with a one-based visual ordinal. The ordinal is decorative and is not added to the authored chapter name used by events or accessible selection text. The name is 1rem medium; the duration is 0.95rem regular in Text subdued on dark. The start chip is 0.82rem medium on Accent 3, with 0.18rem 0.42rem padding and a 0.35rem radius.
  • The active marker is a 4px Primary edge and a 0.55rem Primary dot. Highlighting may add the Primary 10% tint without changing the active marker.
  • Timeline chapters are separated by a fixed 3px gap. The base track is 0.375rem, grows to 0.625rem while interactive, and the chapter directly under the pointer grows to 0.875rem. The full track also grows to 0.875rem while dragging. The white thumb is 0.875rem. Each individual base, buffered, and played range uses a half-height radius so the segments retain crisp pill ends at every size grade. The played range is Primary, buffered content is Neutral 400, and the remaining base is white at 30% opacity. Every drawable segment has a minimum width equal to half the current inter-segment gap, so even a chapter whose proportional width is narrower than the gap remains visible and seekable. While dragging, the thumb follows the live pointer position; releasing commits the seek.
  • Timeline segment geometry and pointer mapping always use the engine duration. The configured duration applies only when calculating the final menu row's duration.
  • No timeline segments are drawn before the engine reports a usable duration, even when content.duration is configured; the ordinary timeline remains visible in that window.

Surface in landscape

  • The segmented timeline, and the chapters trigger (icon plus current chapter name) in the control bar, opening the menu described above.
  • There is no separate skip-to-chapter transport control.

Surface in portrait

  • Identical mechanism and identical menu, in the portrait arrangement. Placement and glyphs follow the refreshed portrait design, which is the authoritative icon source for both layouts.

Configuration

  • Chapter data lives in content.chapters; its presence makes the capability available and, by default, enabled.
  • capabilities.chapters: false disables the capability without touching the content.
json
{
  "content": {
    "chapters": [
      { "name": "Question", "start": 9 },
      { "name": "Method", "start": 62 }
    ]
  },
  "capabilities": {
    "chapters": false
  }
}

Strings

Chapter names remain content. The capability owns only its interface label and the locale-neutral abbreviated duration fragments.

KeyEnglish defaultPlaceholdersAppears in
chaptersChaptersnoneTrigger and menu label
chapterMinute{count} mincountHumanized-duration fragment
chapterSecond{count} seccountHumanized-duration fragment

Page API hooks

  • The chapterChange event reports the current chapter, and null while outside any chapter (the intro segment). Pages navigate chapters with the ordinary seek(); no dedicated chapter command exists, and the chapters menu has no page API trigger.

Edge cases

  • Unsorted lists are sorted by start ascending, silently: data repair, not an error.
  • Duplicate starts: the first entry with a given start is kept, later duplicates are dropped and reported in the consolidated console warning.
  • A chapter starting beyond the video's duration is dropped with a warning (the config contract's soft-degrade rule); the video plays with the remaining chapters.
  • A chapter starting exactly at the video's duration is retained in the menu and event model with a zero-second duration. It has no drawable timeline width. Only a chapter strictly beyond the duration is dropped.
  • A single chapter is allowed: one timeline segment, the name in the bar, a one-row menu. There is no minimum count; data present means available. (For comparison, YouTube requires at least three chapters starting at 0:00; the LT pipeline curates its own chapter data, so no such threshold exists here.)
  • No chapters at all leaves the capability dormant: plain timeline, plain time display, no trigger.

Out of scope

  • The in-chapter progress line (deliberately dropped by client decision).
  • Chapter thumbnails or preview images on hover.
  • Nested or hierarchical chapters.