Bluesky app fork with some witchin' additions 💫
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

[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
··· 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
··· 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 = () => {