Player various fixes (#1058)

* fix issue with big play button and with player volume

* naming, refactor save logic

src/providers/personalData/store.tsx

@@ -1,3 +1,5 @@
+import { round } from 'lodash'
+
 import { createStore } from '@/store'
 import { readFromLocalStorage } from '@/utils/localStorage'
 
@@ -15,7 +17,8 @@ export type PersonalDataStoreState = {
   followedChannels: FollowedChannel[]
   recentSearches: RecentSearch[]
   dismissedMessages: DismissedMessage[]
-  cachedPlayerVolume: number
+  currentVolume: number
+  cachedVolume: number
 }
 
 const WHITELIST = [
@@ -23,7 +26,8 @@ const WHITELIST = [
   'followedChannels',
   'recentSearches',
   'dismissedMessages',
-  'cachedPlayerVolume',
+  'currentVolume',
+  'cachedVolume',
 ] as (keyof PersonalDataStoreState)[]
 
 export type PersonalDataStoreActions = {
@@ -31,23 +35,25 @@ export type PersonalDataStoreActions = {
   updateChannelFollowing: (id: string, follow: boolean) => void
   updateRecentSearches: (id: string, type: RecentSearchType) => void
   updateDismissedMessages: (id: string, add?: boolean) => void
-  updateCachedPlayerVolume: (volume: number) => void
+  setCurrentVolume: (volume: number) => void
+  setCachedVolume: (volume: number) => void
 }
 
 const watchedVideos = readFromLocalStorage<WatchedVideo[]>('watchedVideos') ?? []
 const followedChannels = readFromLocalStorage<FollowedChannel[]>('followedChannels') ?? []
 const recentSearches = readFromLocalStorage<RecentSearch[]>('recentSearches') ?? []
 const dismissedMessages = readFromLocalStorage<DismissedMessage[]>('dismissedMessages') ?? []
-const cachedPlayerVolume = readFromLocalStorage<number>('playerVolume') ?? 1
+const currentVolume = readFromLocalStorage<number>('playerVolume') ?? 1
 
 export const usePersonalDataStore = createStore<PersonalDataStoreState, PersonalDataStoreActions>(
   {
     state: {
+      cachedVolume: 0,
       watchedVideos,
       followedChannels,
       recentSearches,
       dismissedMessages,
-      cachedPlayerVolume,
+      currentVolume,
     },
     actionsFactory: (set) => ({
       updateWatchedVideos: (__typename, id, timestamp) => {
@@ -87,9 +93,13 @@ export const usePersonalDataStore = createStore<PersonalDataStoreState, Personal
           }
         })
       },
-      updateCachedPlayerVolume: (volume) =>
+      setCurrentVolume: (volume) =>
+        set((state) => {
+          state.currentVolume = round(volume, 2)
+        }),
+      setCachedVolume: (volume) =>
         set((state) => {
-          state.cachedPlayerVolume = volume
+          state.cachedVolume = round(volume, 2)
         }),
     }),
   },

src/shared/components/VideoPlayer/VideoPlayer.tsx

@@ -65,10 +65,12 @@ const VideoPlayerComponent: React.ForwardRefRenderFunction<HTMLVideoElement, Vid
   externalRef
 ) => {
   const [player, playerRef] = useVideoJsPlayer(videoJsConfig)
-  const cachedPlayerVolume = usePersonalDataStore((state) => state.cachedPlayerVolume)
-  const updateCachedPlayerVolume = usePersonalDataStore((state) => state.actions.updateCachedPlayerVolume)
+  const currentVolume = usePersonalDataStore((state) => state.currentVolume)
+  const cachedVolume = usePersonalDataStore((state) => state.cachedVolume)
+  const setCurrentVolume = usePersonalDataStore((state) => state.actions.setCurrentVolume)
+  const setCachedVolume = usePersonalDataStore((state) => state.actions.setCachedVolume)
+  const [volumeToSave, setVolumeToSave] = useState(0)
 
-  const [volume, setVolume] = useState(cachedPlayerVolume)
   const [isPlaying, setIsPlaying] = useState(false)
   const [videoTime, setVideoTime] = useState(0)
   const [isFullScreen, setIsFullScreen] = useState(false)
@@ -315,26 +317,29 @@ const VideoPlayerComponent: React.ForwardRefRenderFunction<HTMLVideoElement, Vid
 
     const handler = (event: Event) => {
       if (event.type === CustomVideojsEvents.Muted) {
-        setVolume(0)
+        if (currentVolume) {
+          setCachedVolume(currentVolume)
+        }
+        setCurrentVolume(0)
         return
       }
       if (event.type === CustomVideojsEvents.Unmuted) {
-        setVolume(cachedPlayerVolume || VOLUME_STEP)
+        setCurrentVolume(cachedVolume || VOLUME_STEP)
         return
       }
       if (event.type === CustomVideojsEvents.VolumeIncrease || CustomVideojsEvents.VolumeDecrease) {
-        setVolume(player.volume())
+        setCurrentVolume(player.volume())
       }
     }
     player.on(events, handler)
     return () => {
       player.off(events, handler)
     }
-  }, [cachedPlayerVolume, volume, player])
+  }, [currentVolume, player, cachedVolume, setCachedVolume, setCurrentVolume])
 
   const debouncedVolumeChange = useRef(
     debounce((volume: number) => {
-      updateCachedPlayerVolume(volume)
+      setVolumeToSave(volume)
     }, 125)
   )
   // update volume on mouse input
@@ -342,15 +347,18 @@ const VideoPlayerComponent: React.ForwardRefRenderFunction<HTMLVideoElement, Vid
     if (!player || isInBackground) {
       return
     }
-    player?.volume(volume)
+    player?.volume(currentVolume)
 
-    if (volume) {
+    debouncedVolumeChange.current(currentVolume)
+    if (currentVolume) {
       player.muted(false)
-      debouncedVolumeChange.current(volume)
     } else {
+      if (volumeToSave) {
+        setCachedVolume(volumeToSave)
+      }
       player.muted(true)
     }
-  }, [isInBackground, player, volume])
+  }, [currentVolume, volumeToSave, isInBackground, player, setCachedVolume])
 
   // button/input handlers
   const handlePlayPause = () => {
@@ -363,15 +371,15 @@ const VideoPlayerComponent: React.ForwardRefRenderFunction<HTMLVideoElement, Vid
   }
 
   const handleChangeVolume = (event: React.ChangeEvent<HTMLInputElement>) => {
-    setVolume(Number(event.target.value))
+    setCurrentVolume(Number(event.target.value))
   }
 
   const handleMute = (event: React.MouseEvent) => {
     event.stopPropagation()
-    if (volume === 0) {
-      setVolume(cachedPlayerVolume || 0.05)
+    if (currentVolume === 0) {
+      setCurrentVolume(cachedVolume || 0.05)
     } else {
-      setVolume(0)
+      setCurrentVolume(0)
     }
   }
 
@@ -398,10 +406,10 @@ const VideoPlayerComponent: React.ForwardRefRenderFunction<HTMLVideoElement, Vid
   }
 
   const renderVolumeButton = () => {
-    if (volume === 0) {
+    if (currentVolume === 0) {
       return <StyledSvgPlayerSoundOff />
     } else {
-      return volume <= 0.5 ? <SvgPlayerSoundHalf /> : <SvgPlayerSoundOn />
+      return currentVolume <= 0.5 ? <SvgPlayerSoundHalf /> : <SvgPlayerSoundOn />
     }
   }
 
@@ -411,7 +419,7 @@ const VideoPlayerComponent: React.ForwardRefRenderFunction<HTMLVideoElement, Vid
     <Container isFullScreen={isFullScreen} className={className} isInBackground={isInBackground}>
       <div data-vjs-player>
         {showBigPlayButton && (
-          <BigPlayButtonOverlay>
+          <BigPlayButtonOverlay onClick={handlePlayPause}>
             <BigPlayButton onClick={handlePlayPause}>
               <SvgPlayerPlay />
             </BigPlayButton>
@@ -447,7 +455,7 @@ const VideoPlayerComponent: React.ForwardRefRenderFunction<HTMLVideoElement, Vid
                       step={0.01}
                       max={1}
                       min={0}
-                      value={volume}
+                      value={currentVolume}
                       onChange={handleChangeVolume}
                       type="range"
                     />