feat: improve external post embeds#2794
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
2 Skipped Deployments
|
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (1)
✅ Files skipped from review due to trivial changes (1)
📝 WalkthroughSummary by CodeRabbit
WalkthroughThis PR introduces HLS video streaming for Bluesky post embeds. A new VideoPlayer component manages hls.js playback and viewport-based auto-play, BlueskyPostEmbed is updated to render playlists via VideoPlayer with a restructured embed template, and security headers are configured to allow video streaming from Bluesky endpoints and blob: URLs. ChangesVideo Streaming for Bluesky Embeds
🚥 Pre-merge checks | ✅ 4✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
Codecov Report❌ Patch coverage is
📢 Thoughts on this report? Let us know! |
📊 Dependency Size ChangesWarning This PR adds 24.8 MB of new dependencies, which exceeds the threshold of 200 kB.
Total size change: 24.8 MB |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
app/components/global/BlueskyPostEmbed.client.vue (1)
200-213: 💤 Low valueConsider whether viewport-based autoplay is desired.
The
VideoPlayercomponent supports anautoplayprop that triggers play/pause based on viewport intersection, but it isn't passed here. If auto-play when scrolling into view is desired, add:autoplay="true". The current setup requires manual user interaction, which may be intentional given thecontrolsandmutedattributes.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@app/components/global/BlueskyPostEmbed.client.vue` around lines 200 - 213, The template rendering a VideoPlayer for playlist embeds omits the component's viewport-based autoplay prop, so the video won't auto-play when scrolled into view; decide whether autoplay-on-intersection is desired and if so add the :autoplay="true" prop to the <VideoPlayer> usage (keeping existing props like controls, muted, loop) to enable the component's intersection-driven play/pause behavior, otherwise leave as-is to require manual interaction.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@app/components/VideoPlayer.vue`:
- Around line 22-24: The HLS error handler currently logs only the event name;
update the HLS listener registered with hls.on(Hls.Events.ERROR, ...) to accept
both parameters (event, data) and log the actual error details from data (e.g.,
data.type, data.details, data.response) instead of the event string, and handle
fatal errors by calling the Hls instance recovery/cleanup methods (e.g.,
hls.recoverMediaError(), hls.startLoad() or hls.destroy()) depending on
data.fatal; modify the callback signature and add branching for data.fatal to
attempt recovery or cleanup accordingly.
---
Nitpick comments:
In `@app/components/global/BlueskyPostEmbed.client.vue`:
- Around line 200-213: The template rendering a VideoPlayer for playlist embeds
omits the component's viewport-based autoplay prop, so the video won't auto-play
when scrolled into view; decide whether autoplay-on-intersection is desired and
if so add the :autoplay="true" prop to the <VideoPlayer> usage (keeping existing
props like controls, muted, loop) to enable the component's intersection-driven
play/pause behavior, otherwise leave as-is to require manual interaction.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: aa5c26f3-6d23-47e9-9bee-fbd45cb38d85
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (4)
app/components/VideoPlayer.vueapp/components/global/BlueskyPostEmbed.client.vuemodules/security-headers.tspackage.json
1 participant
🧭 Context
Since I always think about improving the blog at the last minute, I'm doing it separately this time 🙃
Added full video support and improved post zones clickability. Now, in addition to video, we can also click to external embeds.
For video, I used an external library. It's the base approach for atproto projects, and I use it in mine as well