From 6bfe7d0356100894d2fd0e1d45b23c36473605b4 Mon Sep 17 00:00:00 2001
From: Vordgi <sasha2822222@gmail.com>
Date: Mon, 25 May 2026 15:48:58 +0100
Subject: [PATCH 1/2] feat: improve external post embeds

---
 app/components/VideoPlayer.vue                | 51 ++++++++++++++++
 .../global/BlueskyPostEmbed.client.vue        | 61 ++++++++++---------
 modules/security-headers.ts                   |  4 +-
 package.json                                  |  1 +
 pnpm-lock.yaml                                |  8 +++
 5 files changed, 96 insertions(+), 29 deletions(-)
 create mode 100644 app/components/VideoPlayer.vue

diff --git a/app/components/VideoPlayer.vue b/app/components/VideoPlayer.vue
new file mode 100644
index 0000000000..9dd518165e
--- /dev/null
+++ b/app/components/VideoPlayer.vue
@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import Hls from 'hls.js'
+
+const props = defineProps<{
+  src: string
+  autoplay?: boolean
+}>()
+
+const videoRef = useTemplateRef<HTMLVideoElement>('videoRef')
+
+let hls: Hls | null = null
+
+watch(
+  [videoRef, () => props.src],
+  ([video, src]) => {
+    if (!video || !Hls.isSupported()) return
+
+    hls?.destroy()
+    hls = new Hls()
+    hls.loadSource(src)
+    hls.attachMedia(video)
+    hls.on(Hls.Events.ERROR, err => {
+      console.log(err)
+    })
+  },
+  { immediate: true, flush: 'post' },
+)
+
+onScopeDispose(() => {
+  hls?.destroy()
+})
+
+useIntersectionObserver(
+  videoRef,
+  ([entry]) => {
+    const video = videoRef.value
+    if (!props.autoplay || !video || !entry) return
+
+    if (entry.isIntersecting) {
+      void video.play().catch(() => {})
+    } else {
+      video.pause()
+    }
+  },
+  { threshold: 0.5 },
+)
+</script>
+
+<template>
+  <video ref="videoRef" :src="src" />
+</template>
diff --git a/app/components/global/BlueskyPostEmbed.client.vue b/app/components/global/BlueskyPostEmbed.client.vue
index 718fc439d5..5694bebe0e 100644
--- a/app/components/global/BlueskyPostEmbed.client.vue
+++ b/app/components/global/BlueskyPostEmbed.client.vue
@@ -42,6 +42,7 @@ interface BlueskyPost {
     images?: EmbedImage[]
     external?: EmbedExternal
     thumbnail?: string
+    playlist?: string
     aspectRatio?: { width: number; height: number }
   }
   likeCount?: number
@@ -115,18 +116,20 @@ const postUrl = computed(() => {
     <span class="i-svg-spinners:90-ring-with-bg h-5 w-5 inline-block" />
   </div>
 
-  <a
-    v-else-if="post"
-    :href="postUrl ?? '#'"
-    target="_blank"
-    rel="noopener noreferrer"
-    class="not-prose block my-4 rounded-lg border border-border bg-bg-subtle p-4 sm:p-5 no-underline hover:border-border-hover transition-colors duration-200 relative group"
-  >
-    <!-- Bluesky icon -->
-    <span
-      class="i-simple-icons:bluesky w-5 h-5 text-fg-subtle group-hover:text-blue-500 absolute top-4 end-4 sm:top-5 sm:end-5"
-      aria-hidden="true"
-    />
+  <div class="not-prose relative bg-bg-subtle p-4 sm:p-5 my-4 sm:my-5" v-else-if="post">
+    <a
+      :href="postUrl ?? '#'"
+      target="_blank"
+      rel="noopener noreferrer"
+      class="before:(absolute content-[''] inset-0 hover:border-border-hover border border-border transition-colors duration-200 rounded-lg) block no-underline group"
+      :title="$t('blog.atproto.view_on_bluesky')"
+    >
+      <!-- Bluesky icon -->
+      <span
+        class="i-simple-icons:bluesky w-5 h-5 text-fg-subtle group-hover:text-blue-500 absolute top-4 end-4 sm:top-5 sm:end-5"
+        aria-hidden="true"
+      />
+    </a>
 
     <!-- Author row -->
     <div class="flex items-center gap-3 mb-3 pe-7">
@@ -169,7 +172,12 @@ const postUrl = computed(() => {
 
     <!-- Embedded external embed -->
     <template v-if="post.embed?.external && post.embed.external.uri">
-      <div class="block mb-3 p-0.5 bg-bg-muted rounded-lg">
+      <a
+        :href="post.embed.external.uri"
+        target="_blank"
+        rel="noopener noreferrer"
+        class="relative block mb-3 p-0.5 bg-bg-muted hover:bg-bg-elevated rounded-lg z-10 duration-300 transition-colors"
+      >
         <img
           v-if="post.embed.external.thumb"
           :src="post.embed.external.thumb"
@@ -185,25 +193,22 @@ const postUrl = computed(() => {
             {{ post.embed.external.description }}
           </p>
         </div>
-      </div>
+      </a>
     </template>
 
     <!-- Embedded video -->
-    <template v-if="post.embed?.thumbnail">
+    <template v-if="post.embed?.playlist">
       <div class="relative block mb-3 p-0.5 bg-bg-muted rounded-lg">
-        <img
-          :src="post.embed.thumbnail"
-          alt=""
-          class="w-full rounded-lg object-cover"
-          :height="post.embed.aspectRatio?.height"
-          :width="post.embed.aspectRatio?.width"
-          loading="lazy"
+        <VideoPlayer
+          :poster="post.embed.thumbnail"
+          playsInline
+          controls
+          preload="none"
+          :src="post.embed.playlist"
+          muted
+          loop
+          class="block max-h-150 object-contain w-full rounded-lg"
         />
-        <div
-          class="absolute inset-0 bg-bg/60 light:bg-bg/80 flex items-center justify-center text-fg font-medium"
-        >
-          Click to watch video on Bluesky
-        </div>
       </div>
     </template>
 
@@ -223,5 +228,5 @@ const postUrl = computed(() => {
         {{ post.replyCount }}
       </span>
     </div>
-  </a>
+  </div>
 </template>
diff --git a/modules/security-headers.ts b/modules/security-headers.ts
index b3d9584475..25b6b2a63d 100644
--- a/modules/security-headers.ts
+++ b/modules/security-headers.ts
@@ -50,6 +50,8 @@ export default defineNuxtModule({
       'https://registry.npmjs.org',
       'https://api.npmjs.org',
       'https://npm.antfu.dev',
+      'https://video.bsky.app',
+      'https://video.cdn.bsky.app',
       BLUESKY_API,
       ...ALL_KNOWN_GIT_API_ORIGINS,
       // Local CLI connector (npmx CLI communicates via localhost)
@@ -76,7 +78,7 @@ export default defineNuxtModule({
       `script-src 'self' 'unsafe-inline'`,
       `style-src 'self' 'unsafe-inline'`,
       `img-src ${imgSrc}`,
-      `media-src 'self'`,
+      `media-src 'self' blob:`,
       `font-src 'self'`,
       `connect-src ${connectSrc}`,
       `frame-src ${frameSrc}`,
diff --git a/package.json b/package.json
index b8ebae9cd7..300111cae0 100644
--- a/package.json
+++ b/package.json
@@ -88,6 +88,7 @@
     "fast-npm-meta": "1.4.2",
     "focus-trap": "^8.0.0",
     "gray-matter": "4.0.3",
+    "hls.js": "1.6.16",
     "ipaddr.js": "2.3.0",
     "marked": "18.0.0",
     "module-replacements": "3.0.0-beta.7",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 8c7c6740a7..4aae720372 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -183,6 +183,9 @@ importers:
       gray-matter:
         specifier: 4.0.3
         version: 4.0.3
+      hls.js:
+        specifier: 1.6.16
+        version: 1.6.16
       ipaddr.js:
         specifier: 2.3.0
         version: 2.3.0
@@ -7673,6 +7676,9 @@ packages:
   hey-listen@1.0.8:
     resolution: {integrity: sha512-COpmrF2NOg4TBWUJ5UVyaCU2A88wEMkUPK4hNqyCkqHbxT92BbvfjoSozkAIIm6XhicGlJHhFdullInrdhwU8Q==}
 
+  hls.js@1.6.16:
+    resolution: {integrity: sha512-VSIRpLfRwlAAdGL4wiTucx2ScRipo0ed1FBatWkyt832jC4CReKstga6yIhYVwGu9LOBjuX9wzmRMeQdBJtzEA==}
+
   hono@4.12.3:
     resolution: {integrity: sha512-SFsVSjp8sj5UumXOOFlkZOG6XS9SJDKw0TbwFeV+AJ8xlST8kxK5Z/5EYa111UY8732lK2S/xB653ceuaoGwpg==}
     engines: {node: '>=16.9.0'}
@@ -19140,6 +19146,8 @@ snapshots:
 
   hey-listen@1.0.8: {}
 
+  hls.js@1.6.16: {}
+
   hono@4.12.3: {}
 
   hookable@5.5.3: {}

From 165445f41dacb61adfe49cfe41939926e6470594 Mon Sep 17 00:00:00 2001
From: Vordgi <sasha2822222@gmail.com>
Date: Mon, 25 May 2026 15:59:51 +0100
Subject: [PATCH 2/2] test: ignore video-player in tests

---
 test/unit/a11y-component-coverage.spec.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/test/unit/a11y-component-coverage.spec.ts b/test/unit/a11y-component-coverage.spec.ts
index 1f5570aaa3..bb68a2221d 100644
--- a/test/unit/a11y-component-coverage.spec.ts
+++ b/test/unit/a11y-component-coverage.spec.ts
@@ -59,6 +59,7 @@ const SKIPPED_COMPONENTS: Record<string, string> = {
   'Changelog/Markdown.vue': 'Requires API call & only renders markdown html',
   'Translation/StatusByFile.unused.vue': 'Unused component, might be needed in the future',
   'ColorScheme/Img.vue': 'Image component, basic ui',
+  'VideoPlayer.vue': 'Atproto video component, basic ui',
 }
 
 function normalizeComponentPath(filePath: string): string {