use autoLevelCapping instead of nextLevel

This commit is contained in:
Samuel Newman
2024-08-02 17:32:45 +02:00
parent fe3d56dc44
commit 09a3d61e23
2 changed files with 5 additions and 3 deletions
@@ -82,7 +82,7 @@ export function VideoPlayer({
setActive: () => void setActive: () => void
onScreen: boolean onScreen: boolean
}) { }) {
const [hls] = useState(() => new Hls()) const [hls] = useState(() => new Hls({capLevelToPlayerSize: true}))
const containerRef = useRef<HTMLDivElement>(null) const containerRef = useRef<HTMLDivElement>(null)
const ref = useRef<HTMLVideoElement>(null) const ref = useRef<HTMLVideoElement>(null)
const [focused, setFocused] = useState(false) const [focused, setFocused] = useState(false)
@@ -94,6 +94,8 @@ export function VideoPlayer({
Hls.isSupported() Hls.isSupported()
) { ) {
hls.attachMedia(ref.current) hls.attachMedia(ref.current)
// initial value, later on it's managed by Controls
hls.autoLevelCapping = 0
return () => { return () => {
hls.detachMedia() hls.detachMedia()
@@ -111,9 +111,9 @@ export function Controls({
useEffect(() => { useEffect(() => {
if (focused) { if (focused) {
// auto decide quality based on network conditions // auto decide quality based on network conditions
hls.nextLevel = -1 hls.autoLevelCapping = -1
} else { } else {
hls.nextLevel = 0 hls.autoLevelCapping = 0
} }
}, [hls, focused]) }, [hls, focused])