zio
/
bsky-app
2
0
Fork 0
Code Pull Requests Packages Releases Activity

[Video] Fix safari showing spinner (#5364)

zio/dev^2
Samuel Newman 2024-09-16 22:22:22 +01:00 committed by GitHub
parent 8241747fc2
commit 8daf6b7868
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 11 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/view/com/util/post-embeds/VideoEmbedInner/web-controls/Scrubber.tsx
View File

@ -5,7 +5,7 @@ import {useLingui} from '@lingui/react'
import {isFirefox} from '#/lib/browser'
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 {formatTime} from './utils'
@ -172,6 +172,7 @@ export function Scrubber({
a.overflow_hidden,
{backgroundColor: 'rgba(255, 255, 255, 0.4)'},
{height: hovered || scrubberActive ? 6 : 3},
web({transition: 'height 0.1s ease'}),
]}>
{duration > 0 && (
<View

11
src/view/com/util/post-embeds/VideoEmbedInner/web-controls/utils.tsx
View File

@ -1,5 +1,6 @@
import React, {useCallback, useEffect, useRef, useState} from 'react'
import {isSafari} from '#/lib/browser'
import {useVideoVolumeState} from '../../VideoVolumeContext'
export function useVideoElement(ref: React.RefObject<HTMLVideoElement>) {
@ -37,6 +38,12 @@ export function useVideoElement(ref: React.RefObject<HTMLVideoElement>) {
const handleTimeUpdate = () => {
if (!ref.current) return
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 = () => {
@ -82,7 +89,7 @@ export function useVideoElement(ref: React.RefObject<HTMLVideoElement>) {
if (bufferingTimeout) clearTimeout(bufferingTimeout)
bufferingTimeout = setTimeout(() => {
setBuffering(true)
}, 200) // Delay to avoid frequent buffering state changes
}, 500) // Delay to avoid frequent buffering state changes
}
const handlePlaying = () => {
@ -95,7 +102,7 @@ export function useVideoElement(ref: React.RefObject<HTMLVideoElement>) {
if (bufferingTimeout) clearTimeout(bufferingTimeout)
bufferingTimeout = setTimeout(() => {
setBuffering(true)
}, 200) // Delay to avoid frequent buffering state changes
}, 500) // Delay to avoid frequent buffering state changes
}
const handleEnded = () => {