Bluesky app fork with some witchin' additions 💫
Add simple video player to embed (#10205)
authored by
Samuel Newman
and committed by
GitHub
5ad3597f
987a6569
+24
-2
+1
bskyembed/assets/play_filled_corner0_rounded.svg
+1
bskyembed/assets/play_filled_corner0_rounded.svg
···
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>
+23
-2
bskyembed/src/components/embed.tsx
+23
-2
bskyembed/src/components/embed.tsx
···
14
14
import {useMemo} from 'preact/hooks'
15
15
16
16
import infoIcon from '../../assets/circleInfo_stroke2_corner0_rounded.svg'
17
-
import playIcon from '../../assets/play_filled_corner2_rounded.svg'
17
+
import playIcon from '../../assets/play_filled_corner0_rounded.svg'
18
18
import starterPackIcon from '../../assets/starterPack.svg'
19
19
import {CONTENT_LABELS, labelsToInfo} from '../labels'
20
20
import * as bsky from '../types/bsky'
···
389
389
)
390
390
}
391
391
392
-
// just the thumbnail and a play button
393
392
function VideoEmbed({content}: {content: AppBskyEmbedVideo.View}) {
394
393
let aspectRatio = 1
395
394
396
395
if (content.aspectRatio) {
397
396
const {width, height} = content.aspectRatio
398
397
aspectRatio = clamp(width / height, 1 / 1, 3 / 1)
398
+
}
399
+
400
+
const supportsHls = useMemo(() => {
401
+
const video = document.createElement('video')
402
+
return video.canPlayType('application/vnd.apple.mpegurl') !== ''
403
+
}, [])
404
+
405
+
if (supportsHls) {
406
+
return (
407
+
<video
408
+
src={content.playlist}
409
+
poster={content.thumbnail}
410
+
controls
411
+
playsinline
412
+
preload="metadata"
413
+
loading="lazy"
414
+
aria-label={content.alt || undefined}
415
+
onClickCapture={evt => evt.stopPropagation()}
416
+
className="w-full rounded-xl bg-black"
417
+
style={{aspectRatio: `${aspectRatio} / 1`}}
418
+
/>
419
+
)
399
420
}
400
421
401
422
return (