[Video] Fix safari showing spinner (#5364)
parent
8241747fc2
commit
8daf6b7868
|
@ -5,7 +5,7 @@ import {useLingui} from '@lingui/react'
|
||||||
|
|
||||||
import {isFirefox} from '#/lib/browser'
|
import {isFirefox} from '#/lib/browser'
|
||||||
import {clamp} from '#/lib/numbers'
|
import {clamp} from '#/lib/numbers'
|
||||||
import {atoms as a, useTheme} from '#/alf'
|
import {atoms as a, useTheme, web} from '#/alf'
|
||||||
import {useInteractionState} from '#/components/hooks/useInteractionState'
|
import {useInteractionState} from '#/components/hooks/useInteractionState'
|
||||||
import {formatTime} from './utils'
|
import {formatTime} from './utils'
|
||||||
|
|
||||||
|
@ -172,6 +172,7 @@ export function Scrubber({
|
||||||
a.overflow_hidden,
|
a.overflow_hidden,
|
||||||
{backgroundColor: 'rgba(255, 255, 255, 0.4)'},
|
{backgroundColor: 'rgba(255, 255, 255, 0.4)'},
|
||||||
{height: hovered || scrubberActive ? 6 : 3},
|
{height: hovered || scrubberActive ? 6 : 3},
|
||||||
|
web({transition: 'height 0.1s ease'}),
|
||||||
]}>
|
]}>
|
||||||
{duration > 0 && (
|
{duration > 0 && (
|
||||||
<View
|
<View
|
||||||
|
|
|
@ -1,5 +1,6 @@
|
||||||
import React, {useCallback, useEffect, useRef, useState} from 'react'
|
import React, {useCallback, useEffect, useRef, useState} from 'react'
|
||||||
|
|
||||||
|
import {isSafari} from '#/lib/browser'
|
||||||
import {useVideoVolumeState} from '../../VideoVolumeContext'
|
import {useVideoVolumeState} from '../../VideoVolumeContext'
|
||||||
|
|
||||||
export function useVideoElement(ref: React.RefObject<HTMLVideoElement>) {
|
export function useVideoElement(ref: React.RefObject<HTMLVideoElement>) {
|
||||||
|
@ -37,6 +38,12 @@ export function useVideoElement(ref: React.RefObject<HTMLVideoElement>) {
|
||||||
const handleTimeUpdate = () => {
|
const handleTimeUpdate = () => {
|
||||||
if (!ref.current) return
|
if (!ref.current) return
|
||||||
setCurrentTime(round(ref.current.currentTime) || 0)
|
setCurrentTime(round(ref.current.currentTime) || 0)
|
||||||
|
// HACK: Safari randomly fires `stalled` events when changing between segments
|
||||||
|
// let's just clear the buffering state if the video is still progressing -sfn
|
||||||
|
if (isSafari) {
|
||||||
|
if (bufferingTimeout) clearTimeout(bufferingTimeout)
|
||||||
|
setBuffering(false)
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const handleDurationChange = () => {
|
const handleDurationChange = () => {
|
||||||
|
@ -82,7 +89,7 @@ export function useVideoElement(ref: React.RefObject<HTMLVideoElement>) {
|
||||||
if (bufferingTimeout) clearTimeout(bufferingTimeout)
|
if (bufferingTimeout) clearTimeout(bufferingTimeout)
|
||||||
bufferingTimeout = setTimeout(() => {
|
bufferingTimeout = setTimeout(() => {
|
||||||
setBuffering(true)
|
setBuffering(true)
|
||||||
}, 200) // Delay to avoid frequent buffering state changes
|
}, 500) // Delay to avoid frequent buffering state changes
|
||||||
}
|
}
|
||||||
|
|
||||||
const handlePlaying = () => {
|
const handlePlaying = () => {
|
||||||
|
@ -95,7 +102,7 @@ export function useVideoElement(ref: React.RefObject<HTMLVideoElement>) {
|
||||||
if (bufferingTimeout) clearTimeout(bufferingTimeout)
|
if (bufferingTimeout) clearTimeout(bufferingTimeout)
|
||||||
bufferingTimeout = setTimeout(() => {
|
bufferingTimeout = setTimeout(() => {
|
||||||
setBuffering(true)
|
setBuffering(true)
|
||||||
}, 200) // Delay to avoid frequent buffering state changes
|
}, 500) // Delay to avoid frequent buffering state changes
|
||||||
}
|
}
|
||||||
|
|
||||||
const handleEnded = () => {
|
const handleEnded = () => {
|
||||||
|
|
Loading…
Reference in New Issue