(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
@@ -141,10 +143,12 @@ 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) {
@@ -104,7 +114,8 @@ export function Controls({
}, [active, pause, setFocused])
// autoplay/pause based on visibility
- const autoplayDisabled = useAutoplayDisabled()
+ const isWithinMessage = useIsWithinMessage()
+ const autoplayDisabled = useAutoplayDisabled() || isWithinMessage
useEffect(() => {
if (active) {
if (onScreen) {
@@ -121,8 +132,12 @@ 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])
@@ -235,6 +250,39 @@ 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)
@@ -252,9 +300,10 @@ export function Controls({
evt.stopPropagation()
setInteractingViaKeypress(false)
}}
- onPointerEnter={onHover}
- onPointerMove={onHover}
- onPointerLeave={onEndHover}
+ onPointerEnter={onHoverWithTimeout}
+ onPointerMove={onHoverWithTimeout}
+ onPointerLeave={onEndHoverWithTimeout}
+ onPointerDown={onPointerDown}
onFocus={onFocus}
onBlur={onBlur}
onKeyDown={onKeyDown}>
@@ -543,7 +592,7 @@ function Scrubber({
return (