(null)
const [nearScreen, setNearScreen] = useState(false)
const [isFullscreen] = useFullscreen()
- const isWithinMessage = useIsWithinMessage()
// Send position when scrolling. This is done with an IntersectionObserver
// observing a div of 100vh height
@@ -143,12 +141,10 @@ function ViewportObserver({
{
- if (isFullscreen) {
- document.documentElement.style.scrollbarGutter = 'unset'
- return () => {
- document.documentElement.style.removeProperty('scrollbar-gutter')
- }
- }
- }, [isFullscreen])
-
// pause + unfocus when another video is active
useEffect(() => {
if (!active) {
@@ -114,8 +104,7 @@ export function Controls({
}, [active, pause, setFocused])
// autoplay/pause based on visibility
- const isWithinMessage = useIsWithinMessage()
- const autoplayDisabled = useAutoplayDisabled() || isWithinMessage
+ const autoplayDisabled = useAutoplayDisabled()
useEffect(() => {
if (active) {
if (onScreen) {
@@ -132,12 +121,8 @@ export function Controls({
if (focused) {
// auto decide quality based on network conditions
hlsRef.current.autoLevelCapping = -1
- // allow 30s of buffering
- hlsRef.current.config.maxMaxBufferLength = 30
} else {
- // back to what we initially set
hlsRef.current.autoLevelCapping = 0
- hlsRef.current.config.maxMaxBufferLength = 10
}
}, [hlsRef, focused])
@@ -250,39 +235,6 @@ export function Controls({
}
}, [])
- // these are used to trigger the hover state. on mobile, the hover state
- // should stick around for a bit after they tap, and if the controls aren't
- // present this initial tab should *only* show the controls and not activate anything
-
- const onPointerDown = useCallback(
- (evt: React.PointerEvent) => {
- if (evt.pointerType !== 'mouse' && !hovered) {
- evt.preventDefault()
- }
- },
- [hovered],
- )
-
- const timeoutRef = useRef>()
-
- const onHoverWithTimeout = useCallback(() => {
- onHover()
- clearTimeout(timeoutRef.current)
- }, [onHover])
-
- const onEndHoverWithTimeout = useCallback(
- (evt: React.PointerEvent) => {
- // if touch, end after 3s
- // if mouse, end immediately
- if (evt.pointerType !== 'mouse') {
- setTimeout(onEndHover, 3000)
- } else {
- onEndHover()
- }
- },
- [onEndHover],
- )
-
const showControls =
((focused || autoplayDisabled) && !playing) ||
(interactingViaKeypress ? hasFocus : hovered)
@@ -300,10 +252,9 @@ export function Controls({
evt.stopPropagation()
setInteractingViaKeypress(false)
}}
- onPointerEnter={onHoverWithTimeout}
- onPointerMove={onHoverWithTimeout}
- onPointerLeave={onEndHoverWithTimeout}
- onPointerDown={onPointerDown}
+ onPointerEnter={onHover}
+ onPointerMove={onHover}
+ onPointerLeave={onEndHover}
onFocus={onFocus}
onBlur={onBlur}
onKeyDown={onKeyDown}>
@@ -592,7 +543,7 @@ function Scrubber({
return (