LiveStream

Live stream page component for displaying live stream content with YouTube video player, authors (participants), and CMS components.

Props

Usage

import LiveStream from '@/components/pages/LiveStream';

<LiveStream 
  liveStream={liveStreamData}
  path="/livestreams/my-live-stream"
/>

Features

• Breadcrumb navigation: Sticky breadcrumb at the top of the page
• Notices: Displays notices from additional_items at the top
• Date and Taxonomies: Shows publication date with inline taxonomy tags near the title metadata (uses entry date when set, otherwise falls back to created_at)
• YouTube video player: Embeds YouTube videos using video ID from CMS
• Participants: Displays authors as "Participants" (customizable label)
• CMS components: Renders dynamic components from Contentstack (Hero, List, RichText, Notice, Media)
• FAQ: Displays FAQ sections from additional_items
• Related Items: Shows related content lists from additional_items
• JSON-LD: Generates structured data for SEO
• Canonical URL: Supports canonical link in metadata

Page Structure

1. Breadcrumb - Sticky navigation breadcrumb
2. Notices - Notice components from additional_items (rendered first)
3. Date and Taxonomies - Publication date with inline taxonomy tags near the title metadata (uses entry date when set, otherwise falls back to created_at)
4. YouTube Video Player - Embedded video if youtube_video_id is provided
5. Participants - Author cards displayed as "Participants"
6. Components - Dynamic CMS components (Hero, List, RichText, Notice, Media)
7. Additional Items - FAQ and Related Items from additional_items
8. Canonical - Canonical URL link (if provided in metadata)

Live Stream Content Type

The LiveStream type includes:

• title: Page title
• url: Page URL
• youtube_video_id: YouTube video ID for embedding
• author: Array of authors (displayed as "Participants")
• components: Array of CMS components
• metadata: SEO metadata (description, image, canonical, etc.)
• taxonomies: Taxonomy tags
• additional_items: FAQ, notices, and related items

Route

Live streams are served at /livestreams/[...slug] route. Markdown output is also available at /livestreams/[...slug].md and via Accept: text/markdown on the HTML route.

Additional Items

The component handles additional_items array which can contain:

• Notices: Rendered at the top of the content (before date/video)
• FAQ: FAQ sections with questions and answers
• Related Items: Lists of related content (using List component)

Date and Taxonomies

• Date: Displays publication date (date fallback to created_at) and update date (updated_at) using DateDisplay component
• Taxonomies: Shows taxonomy tags inline with the date using TaxonomyTags and links to subject-filtered search

Notes

• Returns null if no components are available
• YouTube video player uses YouTubeVideo atom component
• Authors are displayed with "Participant" label instead of "Author"
• Additional items (FAQ, Related Items) are rendered after CMS components
• Notices from additional_items are rendered before the video/participants section
• Supports Contentstack Live Preview (CSLP) for all editable fields