feat: add YouTube chapter markers to community feed #880
Conversation
Automatically detect and display chapter timestamps from YouTube video descriptions, creating deep links to specific moments in videos. Each chapter shows its timestamp and title, making it easy for users to navigate to specific topics. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com> Signed-off-by: Lars Trieloff <lars@trieloff.net>
|
There was a problem hiding this comment.
Pull Request Overview
This PR adds automatic detection and display of YouTube chapter markers from video descriptions in the community feed. When a video description contains timestamps, the system now parses them and creates clickable chapter links that navigate to specific moments in the video.
- Parses timestamp formats (00:00, 1:23, 1:23:45) from video descriptions
- Creates interactive chapter UI with deep links to specific video moments
- Adds responsive styling for chapter markers that integrates with existing feed design
Reviewed Changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
| blocks/feed/feed.js | Adds timestamp parsing logic and chapter marker creation functionality |
| blocks/feed/feed.css | Adds responsive styling for chapter markers with hover states and typography |
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
| let match = timestampRegex.exec(description); | ||
|
|
||
| while (match !== null) { | ||
| const [, time, title] = match; | ||
| const seconds = timeToSeconds(time); | ||
| chapters.push({ | ||
| timestamp: time, | ||
| title: title.trim(), | ||
| seconds, | ||
| url: `${videoUrl}&t=${seconds}s`, | ||
| }); | ||
| match = timestampRegex.exec(description); | ||
| } |
There was a problem hiding this comment.
Using exec() with a global regex in a while loop can create an infinite loop if the regex continues to match the same position. Consider using matchAll() or resetting the regex's lastIndex property, or use a non-global regex with match() method instead.
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Summary
Details
The implementation parses timestamps (formats like 00:00, 1:23, 1:23:45) from YouTube video descriptions and creates a "Chapters" section below each video thumbnail. Each chapter is a clickable link that opens the YouTube video at the specific timestamp.
Test Plan
Test the changes at: https://youtube-chapter-markers--helix-website--adobe.aem.live/community
The chapter markers should appear for videos that have timestamps in their descriptions. Each timestamp link should open the video at the correct moment.
Related
See discussion in Slack: https://cq-dev.slack.com/archives/C02U1A5480P/p1756141627192249
🤖 Generated with Claude Code