Media Player Ecosystem
Relevant source files
The following files were used as context for generating this wiki page:
The Media Player Ecosystem provides a unified interface for embedding and managing diverse media types including YouTube, Vimeo, direct video files, and audio streams. It identifies the media format from a given URL and renders the appropriate playback component. This system supports the display of faith-based talks, clips, and collections across the platform.
Sources: src/components/media-embed/media-embed.tsx, src/app/talks/[speakerSlug]/[talkSlug]/page.tsx
Media Detection and Classification
The system uses regular expressions to classify media URLs into specific types. The detectMediaType utility parses the input string to return a structured MediaType object containing the source URL or platform-specific identifiers.
Supported Media Types
| Type | Detection Criteria | Resulting Data |
|---|---|---|
| YouTube | Matches youtube.com or youtu.be patterns | Platform ID |
| Vimeo | Matches vimeo.com or player.vimeo.com | Platform ID |
| Video | Matches .mp4, .webm, .ogg, or .mov extensions | Source URL |
| Audio | Matches .mp3, .wav, .ogg, .m4a, or .aac extensions | Source URL |
| Unknown | Fallback for unrecognized formats | External Link |
Sources: src/components/media-embed/utils.ts:47-75
Processing Flow
The following diagram illustrates how the MediaEmbed component determines which sub-component to render based on the input URL.
The detectMediaType function acts as the primary router for the ecosystem. Sources: src/components/media-embed/media-embed.tsx:28-56, src/components/media-embed/utils.ts:47-75
Core Components
MediaEmbed Component
The MediaEmbed component serves as the public API for media playback. It accepts a mediaUrl, an optional title, and a trackingContext for analytics. It applies specific styling, such as rounded corners for video types, and handles the rendering logic for internal players.
Sources: src/components/media-embed/media-embed.tsx:16-58
TalkMediaCard
This component displays a preview of the media. It uses detectMediaType to render a specific icon (Play, Mic, or Link) that indicates the content type to the user before they click.
Sources: src/features/talks/components/talk-media-card.tsx:21-44
Metadata and SEO Integration
The ecosystem integrates with Next.js metadata and JSON-LD for Search Engine Optimization. It distinguishes between video and audio types to provide accurate schema information.
- VideoObject: Applied when
isVideoMediaTypereturns true. Sources: src/app/clips/[clipSlug]/page.tsx:55, src/app/talks/[speakerSlug]/[talkSlug]/page.tsx:64 - AudioObject: Applied when the media is detected as audio. Sources: src/app/clips/[clipSlug]/page.tsx:55, src/app/talks/[speakerSlug]/[talkSlug]/page.tsx:64
- Thumbnails: The
getVideoThumbnailutility generates preview image URLs for YouTube and Vimeo. Sources: src/components/media-embed/utils.ts:29-45
Page components determine the schema type based on utility checks. Sources: src/app/clips/[clipSlug]/page.tsx:55, src/components/media-embed/utils.ts:77-85
Usage in Routing
Media embedding is central to the layout of Speaker, Talk, and Clip pages.
- Speaker Page: Uses
rotateContentandisVideoMediaTypeto select a featured talk for the hero section. Sources: src/app/speakers/[speakerSlug]/page.tsx:55-63 - Talk Page: Fetches talk data and renders the
MediaEmbedwithin a specialized layout for spiritual content. Sources: src/app/talks/[speakerSlug]/[talkSlug]/page.tsx:63-71 - Clip Page: Renders short segments using the same player infrastructure as full talks. Sources: src/app/clips/[clipSlug]/page.tsx:54-71
The Media Player Ecosystem ensures that Christ-centered content is accessible regardless of the underlying hosting provider or file format. By centralizing detection and rendering logic, the project maintains a consistent user experience across different content types.