From 5ad3597fdb042b524417775070eb5cc073003de8 Mon Sep 17 00:00:00 2001
From: Samuel Newman <mozzius@protonmail.com>
Date: Thu, 9 Apr 2026 06:12:06 -0700
Subject: [PATCH] Add simple video player to embed (#10205)

---
 .../assets/play_filled_corner0_rounded.svg    |  1 +
 bskyembed/src/components/embed.tsx            | 25 +++++++++++++++++--
 2 files changed, 24 insertions(+), 2 deletions(-)
 create mode 100644 bskyembed/assets/play_filled_corner0_rounded.svg

diff --git a/bskyembed/assets/play_filled_corner0_rounded.svg b/bskyembed/assets/play_filled_corner0_rounded.svg
new file mode 100644
index 0000000000..19d951a1b2
--- /dev/null
+++ b/bskyembed/assets/play_filled_corner0_rounded.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#fff" d="M6.514 2.143A1 1 0 0 0 5 3v18a1 1 0 0 0 1.514.858l15-9a1 1 0 0 0 0-1.716l-15-9Z"/></svg>
diff --git a/bskyembed/src/components/embed.tsx b/bskyembed/src/components/embed.tsx
index 105c785820..a7c1d92156 100644
--- a/bskyembed/src/components/embed.tsx
+++ b/bskyembed/src/components/embed.tsx
@@ -14,7 +14,7 @@ import {ComponentChildren, h} from 'preact'
 import {useMemo} from 'preact/hooks'
 
 import infoIcon from '../../assets/circleInfo_stroke2_corner0_rounded.svg'
-import playIcon from '../../assets/play_filled_corner2_rounded.svg'
+import playIcon from '../../assets/play_filled_corner0_rounded.svg'
 import starterPackIcon from '../../assets/starterPack.svg'
 import {CONTENT_LABELS, labelsToInfo} from '../labels'
 import * as bsky from '../types/bsky'
@@ -389,7 +389,6 @@ function GenericWithImageEmbed({
   )
 }
 
-// just the thumbnail and a play button
 function VideoEmbed({content}: {content: AppBskyEmbedVideo.View}) {
   let aspectRatio = 1
 
@@ -398,6 +397,28 @@ function VideoEmbed({content}: {content: AppBskyEmbedVideo.View}) {
     aspectRatio = clamp(width / height, 1 / 1, 3 / 1)
   }
 
+  const supportsHls = useMemo(() => {
+    const video = document.createElement('video')
+    return video.canPlayType('application/vnd.apple.mpegurl') !== ''
+  }, [])
+
+  if (supportsHls) {
+    return (
+      <video
+        src={content.playlist}
+        poster={content.thumbnail}
+        controls
+        playsinline
+        preload="metadata"
+        loading="lazy"
+        aria-label={content.alt || undefined}
+        onClickCapture={evt => evt.stopPropagation()}
+        className="w-full rounded-xl bg-black"
+        style={{aspectRatio: `${aspectRatio} / 1`}}
+      />
+    )
+  }
+
   return (
     <div
       className="w-full overflow-hidden rounded-xl aspect-square relative"