diff options
Diffstat (limited to 'src')
-rw-r--r-- | src/view/com/util/post-embeds/VideoEmbedInner/web-controls/Scrubber.tsx | 3 | ||||
-rw-r--r-- | src/view/com/util/post-embeds/VideoEmbedInner/web-controls/utils.tsx | 11 |
2 files changed, 11 insertions, 3 deletions
diff --git a/src/view/com/util/post-embeds/VideoEmbedInner/web-controls/Scrubber.tsx b/src/view/com/util/post-embeds/VideoEmbedInner/web-controls/Scrubber.tsx index 84b667053..44978ad51 100644 --- a/src/view/com/util/post-embeds/VideoEmbedInner/web-controls/Scrubber.tsx +++ b/src/view/com/util/post-embeds/VideoEmbedInner/web-controls/Scrubber.tsx @@ -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 diff --git a/src/view/com/util/post-embeds/VideoEmbedInner/web-controls/utils.tsx b/src/view/com/util/post-embeds/VideoEmbedInner/web-controls/utils.tsx index aa1b0b8cd..8aa2d3f7d 100644 --- a/src/view/com/util/post-embeds/VideoEmbedInner/web-controls/utils.tsx +++ b/src/view/com/util/post-embeds/VideoEmbedInner/web-controls/utils.tsx @@ -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 = () => { |