Merge pull request #2547 from stakwork/bugfix/player-max-call

fix: moved playing player state to store

src/components/mindset/components/MediaPlayer/index.tsx

@@ -89,14 +89,6 @@ const MediaPlayerComponent = ({ mediaUrl }: Props) => {
     setIsPlaying(!isPlaying)
   }, [isPlaying, setIsPlaying])
 
-  const handlePlay = useCallback(() => {
-    setIsPlaying(true)
-  }, [setIsPlaying])
-
-  const handlePause = useCallback(() => {
-    setIsPlaying(false)
-  }, [setIsPlaying])
-
   const handleError = () => {
     setHasError(true)
     setStatus('error')
@@ -150,8 +142,21 @@ const MediaPlayerComponent = ({ mediaUrl }: Props) => {
     }
   }
 
-  const handlePlayerClick = () => {
-    togglePlay()
+  const handlePlay = useCallback(() => {
+    if (!isPlaying) {
+      setIsPlaying(true)
+    }
+  }, [setIsPlaying, isPlaying])
+
+  const handlePause = useCallback(() => {
+    if (isPlaying) {
+      setIsPlaying(false)
+    }
+  }, [setIsPlaying, isPlaying])
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const handlePlayerClick = (e: any) => {
+    e.stopPropagation() // Prevent click from propagating to the player
   }
 
   const playerRefCallback = useCallback(

src/components/mindset/components/PlayerContols/Controls/index.tsx

@@ -8,7 +8,9 @@ import { usePlayerStore } from '~/stores/usePlayerStore'
 import { colors } from '~/utils/colors'
 
 export const Controls = memo(() => {
-  const { isPlaying, playerRef } = usePlayerStore((s) => s)
+  const isPlaying = usePlayerStore((s) => s.isPlaying)
+  const setIsPlaying = usePlayerStore((s) => s.setIsPlaying)
+  const playerRef = usePlayerStore((s) => s.playerRef)
 
   const handleRewind = () => {
     if (playerRef) {
@@ -27,15 +29,7 @@ export const Controls = memo(() => {
   }
 
   const togglePlay = () => {
-    if (playerRef?.getInternalPlayer()) {
-      if (isPlaying) {
-        playerRef.getInternalPlayer().pauseVideo()
-
-        return
-      }
-
-      playerRef.getInternalPlayer().playVideo()
-    }
+    setIsPlaying(!isPlaying)
   }
 
   return (