Skip to content

User Interface

Ethan Lin edited this page Feb 23, 2026 · 2 revisions

Splash Screen

Storybook+ splash screen

  1. Title – presentation title.
  2. Subtitle – optional subtitle.
  3. Author – author name or source.
  4. Duration – approximated length of the presentation.
  5. Start button – starts the presentation from the beginning.
  6. Resume button – starts from where the viewer left off (hidden if never viewed).
  7. File download buttons – shown only if corresponding files exist:
    • Transcript: PDF
    • Video: MP4
    • Audio: MP3
    • Supplement: ZIP (compressed)

Notes:

  • The splash screen image and button color may change depending on presentation context.
  • Additional downloadable formats can be specified in manifest.json.

Presentation Screen

Storybook+ presentation screen

  1. Title – same title as splash screen.
  2. Author – same author name/source; click to open author profile.
  3. Menu button – opens menu (Author Profile, General Info, Settings, and any additional custom menu items).
  4. Media – video, audio, image, or HTML content.
  5. Copy to Clipboard button – copies specified content to clipboard when available.
  6. Table of contents – sections and pages.
  7. Section – groups pages; can toggle open/collapse.
  8. Slide – click to jump to a slide.

Media controls:

  1. Play/Pause/Replay (combined).
  2. Skip backward 10s.
  3. Skip forward 10s.
  4. Volume control (hover to adjust; click mute/unmute).
  5. Progress/scrubber bar (hover tooltips; click to scrub; optional markers).
  6. Timecode remaining.
  7. Playback rate (click/hover to select).
  8. Subtitles/Captions (hover to select).
  9. Expand/Contract media area (full width vs normal).
  10. Tabbed widget area – may contain notes and custom tabbed content with labels; defaulted to logo (grayed out) if none.

Navigation and downloads:

  1. Current slide status – current slide / total.
  2. Previous – previous page; wraps to last page if currently on first.
  3. Next – next page; wraps to first page if currently on last.
  4. Download file button – opens list of downloadable files; hidden if none.

Video only:

Storybook player video only controls

  1. Quality (hover to select video quality) when available.
  2. Fullscreen mode.

Additional notes:

  • If there is only one section in the table of contents, the section label is not displayed and pages cannot be collapsed.
  • UI color may change based on presentation settings.
  • Items 16–23 only appear for video or audio media.

Clone this wiki locally