Individual Transcript Page

[kouloumos]

Overview

Develop the individual transcript page based on the provided designs. This page will include distinct components such as metadata, a table of contents, and content tabs, each with specific requirements and conditional displays based on available data fields.

Transcript Metadata Card

• Field Mapping: Map the following transcript metadata fields to display names:
  • tags → Topics
  • speakers → Speakers
  • date → Date
  • transcript_by → Transcript by
• Special Handling for "Transcript by" Field:
  • If transcript_by contains --needs-review, display the label "AI Generated" alongside the CTA, as shown in the designs.
• Clickable Tags:
  • Both Speakers and Topics tags should link to the Transcripts Search page, maintaining the same behavior as on the Explore page.

Table of Contents

• Replicate the table of contents functionality from the Explore page for consistent navigation.

Content Tabs

The individual transcript page includes three content tabs: Transcript, Summary, and Extra Info, each with distinct conditional display rules:

• Transcript Tab

  • Display Format: Use markdown for rendering transcript content. Apply pattern matching to format speaker attributions (bold text) and timestamps (distinct font) using the pattern "Speaker: HH:MM:SS" followed by a newline.
  • Media Display: The Show Media button and any related media functionality are not part of this implementation. Media playback and integration instructions will be provided in a separate issue, so exclude all "Show Media" button elements and related functionality for now.

• Summary Tab

  • Display this tab only if a summary field exists. Populate the tab with the content from this field.

• Extra Info Tab

  • Display this tab only if an additional_resources field exists. Populate the tab with the content from this field.

[aassoiants]

Really well written!