Skip to content

perf: lazy load Bluesky video player#2958

Open
TheAlexLichter wants to merge 1 commit into
mainfrom
perf/lazy-bluesky-video-player
Open

perf: lazy load Bluesky video player#2958
TheAlexLichter wants to merge 1 commit into
mainfrom
perf/lazy-bluesky-video-player

Conversation

@TheAlexLichter

Copy link
Copy Markdown
Contributor

🔗 Linked issue

None (but perf is always good!)

📚 Description

This PR lazy-loads the Bluesky video player so non-video Bluesky embeds no longer pull in the full HLS player chunk if they dont need it.

Optionally, a media-hint="video" preload hint for known video posts can be set, which starts loading the video player earlier while still rendering only when post.embed?.playlist is present. This is optional but recommended when we know the content.

During tests, HLS split into its own (now optional) chunk at about 152.2 KB gzip, with the Bluesky embed chunk staying small at about 2.1 KB gzip.

@vercel

vercel Bot commented Jun 24, 2026

Copy link
Copy Markdown
Contributor

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
npmx.dev Ready Ready Preview, Comment Jun 24, 2026 9:35pm
2 Skipped Deployments
Project Deployment Actions Updated (UTC)
docs.npmx.dev Ignored Ignored Jun 24, 2026 9:35pm
npmx-lunaria Ignored Ignored Jun 24, 2026 9:35pm

Request Review

@coderabbitai

coderabbitai Bot commented Jun 24, 2026

Copy link
Copy Markdown
Contributor

Review Change Stack

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 68231713-6a29-4989-8fd2-bcce76ef2190

📥 Commits

Reviewing files that changed from the base of the PR and between a93b547 and 736c5e1.

📒 Files selected for processing (2)
  • app/components/global/BlueskyPostEmbed.client.vue
  • app/pages/blog/release/crystal-chronicle.md

📝 Walkthrough

Summary by CodeRabbit

  • New Features

    • Video embeds in Bluesky posts now load more smoothly, with playback resources fetched only when needed.
    • Affected blog post embeds now display video content more reliably in the relevant sections.
  • Bug Fixes

    • Improved handling of embedded videos so they are less likely to stall or load unnecessarily when viewing posts.

Walkthrough

Bluesky post embeds now accept an optional media-hint="video" prop that lazy-loads the video player for matching embeds. Two release-note embeds were updated to pass that hint.

Changes

Bluesky video embed loading

Layer / File(s) Summary
Embed video lazy-load
app/components/global/BlueskyPostEmbed.client.vue
mediaHint is added to the embed props, VideoPlayer.vue is imported only for video hints, and the embedded video section renders LazyVideoPlayer.
Release note embed hints
app/pages/blog/release/crystal-chronicle.md
Two BlueskyPostEmbed instances add media-hint="video" in the Timeline tab and Scatter with selectable axis sections.

Possibly related PRs

  • npmx-dev/npmx.dev#2794: Also changes BlueskyPostEmbed.client.vue video handling and lazy-loading behaviour around VideoPlayer.

Suggested reviewers

  • ghostdevv
🚥 Pre-merge checks | ✅ 4
✅ Passed checks (4 passed)
Check name Status Explanation
Title check ✅ Passed The title clearly and concisely describes the main change: lazy-loading the Bluesky video player.
Description check ✅ Passed The description is directly related to the PR and accurately explains the lazy-loading and optional media hint changes.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch perf/lazy-bluesky-video-player

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.

❤️ Share

Comment @coderabbitai help to get the list of available commands.

}>()

if (props.mediaHint === 'video') {
void import('~/components/VideoPlayer.vue')

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

didnt use preloadComponent because this only works with globally registered components.

@codecov

codecov Bot commented Jun 24, 2026

Copy link
Copy Markdown

Codecov Report

❌ Patch coverage is 50.00000% with 1 line in your changes missing coverage. Please review.
✅ All tests successful. No failed tests found.

Files with missing lines Patch % Lines
app/components/global/BlueskyPostEmbed.client.vue 50.00% 1 Missing ⚠️

📢 Thoughts on this report? Let us know!

@TheAlexLichter TheAlexLichter added perf npmx.dev app performance needs review This PR is waiting for a review from a maintainer labels Jun 25, 2026
@TheAlexLichter TheAlexLichter requested a review from a team June 25, 2026 05:38

@alexdln alexdln left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah, looks great, thank you 🤍🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

needs review This PR is waiting for a review from a maintainer perf npmx.dev app performance

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants