From 8daf6b78688ca20326a79fa9c7ca1cbd945786e1 Mon Sep 17 00:00:00 2001
From: Samuel Newman <mozzius@protonmail.com>
Date: Mon, 16 Sep 2024 22:22:22 +0100
Subject: [PATCH] [Video] Fix safari showing spinner (#5364)

---
 .../VideoEmbedInner/web-controls/Scrubber.tsx         |  3 ++-
 .../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 84b66705..44978ad5 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 aa1b0b8c..8aa2d3f7 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 = () => {