1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
|
import React, {useEffect, useId, useRef, useState} from 'react'
import {View} from 'react-native'
import {AppBskyEmbedVideo} from '@atproto/api'
import Hls from 'hls.js'
import {atoms as a} from '#/alf'
import {Controls} from './VideoWebControls'
export function VideoEmbedInnerWeb({
embed,
active,
setActive,
onScreen,
}: {
embed: AppBskyEmbedVideo.View
active: boolean
setActive: () => void
onScreen: boolean
}) {
const containerRef = useRef<HTMLDivElement>(null)
const ref = useRef<HTMLVideoElement>(null)
const [focused, setFocused] = useState(false)
const [hasSubtitleTrack, setHasSubtitleTrack] = useState(false)
const figId = useId()
const hlsRef = useRef<Hls | undefined>(undefined)
useEffect(() => {
if (!ref.current) return
if (!Hls.isSupported()) throw new HLSUnsupportedError()
const hls = new Hls({capLevelToPlayerSize: true})
hlsRef.current = hls
hls.attachMedia(ref.current)
hls.loadSource(embed.playlist)
// initial value, later on it's managed by Controls
hls.autoLevelCapping = 0
hls.on(Hls.Events.SUBTITLE_TRACKS_UPDATED, (event, data) => {
if (data.subtitleTracks.length > 0) {
setHasSubtitleTrack(true)
}
})
return () => {
hlsRef.current = undefined
hls.detachMedia()
hls.destroy()
}
}, [embed.playlist])
return (
<View style={[a.flex_1, a.rounded_sm, a.overflow_hidden]}>
<div ref={containerRef} style={{height: '100%', width: '100%'}}>
<figure style={{margin: 0, position: 'absolute', inset: 0}}>
<video
ref={ref}
poster={embed.thumbnail}
style={{width: '100%', height: '100%', objectFit: 'contain'}}
playsInline
preload="none"
loop
muted={!focused}
aria-labelledby={embed.alt ? figId : undefined}
/>
{embed.alt && (
<figcaption
id={figId}
style={{
position: 'absolute',
width: 1,
height: 1,
padding: 0,
margin: -1,
overflow: 'hidden',
clip: 'rect(0, 0, 0, 0)',
whiteSpace: 'nowrap',
borderWidth: 0,
}}>
{embed.alt}
</figcaption>
)}
</figure>
<Controls
videoRef={ref}
hlsRef={hlsRef}
active={active}
setActive={setActive}
focused={focused}
setFocused={setFocused}
onScreen={onScreen}
fullscreenRef={containerRef}
hasSubtitleTrack={hasSubtitleTrack}
/>
</div>
</View>
)
}
export class HLSUnsupportedError extends Error {
constructor() {
super('HLS is not supported')
}
}
|
