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
|
import React, {useEffect, useRef, useState} from 'react'
import {View} from 'react-native'
import Hls from 'hls.js'
import {atoms as a} from '#/alf'
import {Controls} from './VideoWebControls'
export function VideoEmbedInnerWeb({
source,
active,
setActive,
onScreen,
}: {
source: string
active?: boolean
setActive?: () => void
onScreen?: boolean
}) {
if (active == null || setActive == null || onScreen == null) {
throw new Error(
'active, setActive, and onScreen are required VideoEmbedInner props on web.',
)
}
const containerRef = useRef<HTMLDivElement>(null)
const ref = useRef<HTMLVideoElement>(null)
const [focused, setFocused] = useState(false)
const [hasSubtitleTrack, setHasSubtitleTrack] = useState(false)
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(source)
// 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()
}
}, [source])
return (
<View
style={[
a.w_full,
a.rounded_sm,
// TODO: get from embed metadata
// max should be 1 / 1
{aspectRatio: 16 / 9},
a.overflow_hidden,
]}>
<div
ref={containerRef}
style={{width: '100%', height: '100%', display: 'flex'}}>
<video
ref={ref}
style={{width: '100%', height: '100%', objectFit: 'contain'}}
playsInline
preload="none"
loop
muted={!focused}
/>
<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')
}
}
|
