[Video] Refactor HLS logic (#5468)
* Extract HLS interop into useHLS * Rename variable * Move flushing outside an effect * use continue instead of return --------- Co-authored-by: Samuel Newman <mozzius@protonmail.com>
This commit is contained in:
dan
@@ -3,6 +3,7 @@ import {View} from 'react-native'
|
||||
import {AppBskyEmbedVideo} from '@atproto/api'
|
||||
import Hls, {Events, FragChangedData, Fragment} from 'hls.js'
|
||||
|
||||
import {useNonReactiveCallback} from '#/lib/hooks/useNonReactiveCallback'
|
||||
import {atoms as a} from '#/alf'
|
||||
import {MediaInsetBorder} from '#/components/MediaInsetBorder'
|
||||
import {Controls} from './web-controls/VideoControls'
|
||||
@@ -30,114 +31,13 @@ export function VideoEmbedInnerWeb({
|
||||
throw error
|
||||
}
|
||||
|
||||
const hlsRef = useRef<Hls | undefined>(undefined)
|
||||
const [lowQualityFragments, setLowQualityFragments] = useState<Fragment[]>([])
|
||||
|
||||
useEffect(() => {
|
||||
if (!videoRef.current) return
|
||||
if (!Hls.isSupported()) throw new HLSUnsupportedError()
|
||||
|
||||
const hls = new Hls({
|
||||
maxMaxBufferLength: 10, // only load 10s ahead
|
||||
// note: the amount buffered is affected by both maxBufferLength and maxBufferSize
|
||||
// it will buffer until it it's greater than *both* of those values
|
||||
// so we use maxMaxBufferLength to set the actual maximum amount of buffering instead
|
||||
})
|
||||
hlsRef.current = hls
|
||||
|
||||
hls.attachMedia(videoRef.current)
|
||||
hls.loadSource(embed.playlist)
|
||||
|
||||
// initial value, later on it's managed by Controls
|
||||
hls.autoLevelCapping = 0
|
||||
|
||||
// manually loop, so if we've flushed the first buffer it doesn't get confused
|
||||
const abortController = new AbortController()
|
||||
const {signal} = abortController
|
||||
videoRef.current.addEventListener(
|
||||
'ended',
|
||||
function () {
|
||||
this.currentTime = 0
|
||||
this.play()
|
||||
},
|
||||
{signal},
|
||||
)
|
||||
|
||||
hls.on(Hls.Events.SUBTITLE_TRACKS_UPDATED, (_event, data) => {
|
||||
if (data.subtitleTracks.length > 0) {
|
||||
setHasSubtitleTrack(true)
|
||||
}
|
||||
})
|
||||
|
||||
hls.on(Hls.Events.FRAG_BUFFERED, (_event, {frag}) => {
|
||||
if (frag.level === 0) {
|
||||
setLowQualityFragments(prev => [...prev, frag])
|
||||
}
|
||||
})
|
||||
|
||||
hls.on(Hls.Events.ERROR, (_event, data) => {
|
||||
if (data.fatal) {
|
||||
if (
|
||||
data.details === 'manifestLoadError' &&
|
||||
data.response?.code === 404
|
||||
) {
|
||||
setError(new VideoNotFoundError())
|
||||
} else {
|
||||
setError(data.error)
|
||||
}
|
||||
} else {
|
||||
console.error(data.error)
|
||||
}
|
||||
})
|
||||
|
||||
return () => {
|
||||
hlsRef.current = undefined
|
||||
hls.detachMedia()
|
||||
hls.destroy()
|
||||
abortController.abort()
|
||||
}
|
||||
}, [embed.playlist])
|
||||
|
||||
// purge low quality segments from buffer on next frag change
|
||||
useEffect(() => {
|
||||
if (!hlsRef.current) return
|
||||
|
||||
const current = hlsRef.current
|
||||
|
||||
if (focused) {
|
||||
function fragChanged(
|
||||
_event: Events.FRAG_CHANGED,
|
||||
{frag}: FragChangedData,
|
||||
) {
|
||||
// if the current quality level goes above 0, flush the low quality segments
|
||||
if (current.nextAutoLevel > 0) {
|
||||
const flushed: Fragment[] = []
|
||||
|
||||
for (const lowQualFrag of lowQualityFragments) {
|
||||
// avoid if close to the current fragment
|
||||
if (Math.abs(frag.start - lowQualFrag.start) < 0.1) {
|
||||
return
|
||||
}
|
||||
|
||||
current.trigger(Hls.Events.BUFFER_FLUSHING, {
|
||||
startOffset: lowQualFrag.start,
|
||||
endOffset: lowQualFrag.end,
|
||||
type: 'video',
|
||||
})
|
||||
|
||||
flushed.push(lowQualFrag)
|
||||
}
|
||||
|
||||
setLowQualityFragments(prev => prev.filter(f => !flushed.includes(f)))
|
||||
}
|
||||
}
|
||||
current.on(Hls.Events.FRAG_CHANGED, fragChanged)
|
||||
|
||||
return () => {
|
||||
current.off(Hls.Events.FRAG_CHANGED, fragChanged)
|
||||
}
|
||||
}
|
||||
}, [focused, lowQualityFragments])
|
||||
const hlsRef = useHLS({
|
||||
focused,
|
||||
playlist: embed.playlist,
|
||||
setHasSubtitleTrack,
|
||||
setError,
|
||||
videoRef,
|
||||
})
|
||||
|
||||
return (
|
||||
<View style={[a.flex_1, a.rounded_md, a.overflow_hidden]}>
|
||||
@@ -198,3 +98,120 @@ export class VideoNotFoundError extends Error {
|
||||
super('Video not found')
|
||||
}
|
||||
}
|
||||
|
||||
function useHLS({
|
||||
focused,
|
||||
playlist,
|
||||
setHasSubtitleTrack,
|
||||
setError,
|
||||
videoRef,
|
||||
}: {
|
||||
focused: boolean
|
||||
playlist: string
|
||||
setHasSubtitleTrack: (v: boolean) => void
|
||||
setError: (v: Error | null) => void
|
||||
videoRef: React.RefObject<HTMLVideoElement>
|
||||
}) {
|
||||
const hlsRef = useRef<Hls | undefined>(undefined)
|
||||
const [lowQualityFragments, setLowQualityFragments] = useState<Fragment[]>([])
|
||||
|
||||
// purge low quality segments from buffer on next frag change
|
||||
const handleFragChange = useNonReactiveCallback(
|
||||
(_event: Events.FRAG_CHANGED, {frag}: FragChangedData) => {
|
||||
if (!hlsRef.current) return
|
||||
const hls = hlsRef.current
|
||||
|
||||
if (focused && hls.nextAutoLevel > 0) {
|
||||
// if the current quality level goes above 0, flush the low quality segments
|
||||
const flushed: Fragment[] = []
|
||||
|
||||
for (const lowQualFrag of lowQualityFragments) {
|
||||
// avoid if close to the current fragment
|
||||
if (Math.abs(frag.start - lowQualFrag.start) < 0.1) {
|
||||
continue
|
||||
}
|
||||
|
||||
hls.trigger(Hls.Events.BUFFER_FLUSHING, {
|
||||
startOffset: lowQualFrag.start,
|
||||
endOffset: lowQualFrag.end,
|
||||
type: 'video',
|
||||
})
|
||||
|
||||
flushed.push(lowQualFrag)
|
||||
}
|
||||
|
||||
setLowQualityFragments(prev => prev.filter(f => !flushed.includes(f)))
|
||||
}
|
||||
},
|
||||
)
|
||||
|
||||
useEffect(() => {
|
||||
if (!videoRef.current) return
|
||||
if (!Hls.isSupported()) throw new HLSUnsupportedError()
|
||||
|
||||
const hls = new Hls({
|
||||
maxMaxBufferLength: 10, // only load 10s ahead
|
||||
// note: the amount buffered is affected by both maxBufferLength and maxBufferSize
|
||||
// it will buffer until it it's greater than *both* of those values
|
||||
// so we use maxMaxBufferLength to set the actual maximum amount of buffering instead
|
||||
})
|
||||
hlsRef.current = hls
|
||||
|
||||
hls.attachMedia(videoRef.current)
|
||||
hls.loadSource(playlist)
|
||||
|
||||
// initial value, later on it's managed by Controls
|
||||
hls.autoLevelCapping = 0
|
||||
|
||||
// manually loop, so if we've flushed the first buffer it doesn't get confused
|
||||
const abortController = new AbortController()
|
||||
const {signal} = abortController
|
||||
const videoNode = videoRef.current
|
||||
videoNode.addEventListener(
|
||||
'ended',
|
||||
function () {
|
||||
videoNode.currentTime = 0
|
||||
videoNode.play()
|
||||
},
|
||||
{signal},
|
||||
)
|
||||
|
||||
hls.on(Hls.Events.SUBTITLE_TRACKS_UPDATED, (_event, data) => {
|
||||
if (data.subtitleTracks.length > 0) {
|
||||
setHasSubtitleTrack(true)
|
||||
}
|
||||
})
|
||||
|
||||
hls.on(Hls.Events.FRAG_BUFFERED, (_event, {frag}) => {
|
||||
if (frag.level === 0) {
|
||||
setLowQualityFragments(prev => [...prev, frag])
|
||||
}
|
||||
})
|
||||
|
||||
hls.on(Hls.Events.ERROR, (_event, data) => {
|
||||
if (data.fatal) {
|
||||
if (
|
||||
data.details === 'manifestLoadError' &&
|
||||
data.response?.code === 404
|
||||
) {
|
||||
setError(new VideoNotFoundError())
|
||||
} else {
|
||||
setError(data.error)
|
||||
}
|
||||
} else {
|
||||
console.error(data.error)
|
||||
}
|
||||
})
|
||||
|
||||
hls.on(Hls.Events.FRAG_CHANGED, handleFragChange)
|
||||
|
||||
return () => {
|
||||
hlsRef.current = undefined
|
||||
hls.detachMedia()
|
||||
hls.destroy()
|
||||
abortController.abort()
|
||||
}
|
||||
}, [playlist, setError, setHasSubtitleTrack, videoRef, handleFragChange])
|
||||
|
||||
return hlsRef
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user