forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
[Video] Fix safari showing spinner (#5364)
authored by
Samuel Newman
and committed by
GitHub
8daf6b78
8241747f
+11
-3
+2
-1
src/view/com/util/post-embeds/VideoEmbedInner/web-controls/Scrubber.tsx
+2
-1
src/view/com/util/post-embeds/VideoEmbedInner/web-controls/Scrubber.tsx
···
5
5
6
6
import {isFirefox} from '#/lib/browser'
7
7
import {clamp} from '#/lib/numbers'
8
-
import {atoms as a, useTheme} from '#/alf'
8
+
import {atoms as a, useTheme, web} from '#/alf'
9
9
import {useInteractionState} from '#/components/hooks/useInteractionState'
10
10
import {formatTime} from './utils'
11
11
···
172
172
a.overflow_hidden,
173
173
{backgroundColor: 'rgba(255, 255, 255, 0.4)'},
174
174
{height: hovered || scrubberActive ? 6 : 3},
175
+
web({transition: 'height 0.1s ease'}),
175
176
]}>
176
177
{duration > 0 && (
177
178
<View
+9
-2
src/view/com/util/post-embeds/VideoEmbedInner/web-controls/utils.tsx
+9
-2
src/view/com/util/post-embeds/VideoEmbedInner/web-controls/utils.tsx
···
1
1
import React, {useCallback, useEffect, useRef, useState} from 'react'
2
2
3
+
import {isSafari} from '#/lib/browser'
3
4
import {useVideoVolumeState} from '../../VideoVolumeContext'
4
5
5
6
export function useVideoElement(ref: React.RefObject<HTMLVideoElement>) {
···
37
38
const handleTimeUpdate = () => {
38
39
if (!ref.current) return
39
40
setCurrentTime(round(ref.current.currentTime) || 0)
41
+
// HACK: Safari randomly fires `stalled` events when changing between segments
42
+
// let's just clear the buffering state if the video is still progressing -sfn
43
+
if (isSafari) {
44
+
if (bufferingTimeout) clearTimeout(bufferingTimeout)
45
+
setBuffering(false)
46
+
}
40
47
}
41
48
42
49
const handleDurationChange = () => {
···
82
89
if (bufferingTimeout) clearTimeout(bufferingTimeout)
83
90
bufferingTimeout = setTimeout(() => {
84
91
setBuffering(true)
85
-
}, 200) // Delay to avoid frequent buffering state changes
92
+
}, 500) // Delay to avoid frequent buffering state changes
86
93
}
87
94
88
95
const handlePlaying = () => {
···
95
102
if (bufferingTimeout) clearTimeout(bufferingTimeout)
96
103
bufferingTimeout = setTimeout(() => {
97
104
setBuffering(true)
98
-
}, 200) // Delay to avoid frequent buffering state changes
105
+
}, 500) // Delay to avoid frequent buffering state changes
99
106
}
100
107
101
108
const handleEnded = () => {