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 @@ + 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 ( +