Merge pull request #2480 from stakwork/feature/auto-play

feat: updates autoplay and icons

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

@@ -5,10 +5,10 @@ import styled from 'styled-components'
 import { Avatar } from '~/components/common/Avatar'
 import { Flex } from '~/components/common/Flex'
 import { usePlayerStore } from '~/stores/usePlayerStore'
-import { colors, videoTimeToSeconds } from '~/utils'
+import { colors } from '~/utils'
 
 import { useDataStore } from '~/stores/useDataStore'
-import { useGraphStore, useSelectedNode } from '~/stores/useGraphStore'
+import { useGraphStore } from '~/stores/useGraphStore'
 import { Link } from '~/types'
 
 const findCurrentEdge = (sortedEdges: Link[], playerProgress: number): Link | null => {
@@ -46,26 +46,12 @@ type Props = {
 
 const MediaPlayerComponent = ({ mediaUrl }: Props) => {
   const wrapperRef = useRef<HTMLDivElement | null>(null)
-  const [isFocused, setIsFocused] = useState(false)
-  const [isFullScreen, setIsFullScreen] = useState(false)
-  const [isMouseNearBottom, setIsMouseNearBottom] = useState(false)
   const [status, setStatus] = useState<'buffering' | 'error' | 'ready'>('ready')
   const [isReady, setIsReady] = useState(false)
-  const [NodeStartTime, setNodeStartTime] = useState<string>('')
-  const [hasSeekedToStart, setHasSeekedToStart] = useState(false)
-  const selectedNode = useSelectedNode()
   const { setActiveEdge } = useGraphStore((s) => s)
 
   const { dataInitial } = useDataStore((s) => s)
 
-  useEffect(() => {
-    const timestamp = '00:00:00-00:12:00'
-
-    const startTime = timestamp?.split('-')[0] as string
-
-    setNodeStartTime(startTime as string)
-  }, [selectedNode])
-
   const {
     isPlaying,
     playingTime,
@@ -89,7 +75,6 @@ const MediaPlayerComponent = ({ mediaUrl }: Props) => {
       setPlayingTime(0)
       setDuration(0)
       setIsReady(false)
-      setHasSeekedToStart(false)
     }
   }, [playingNode, setPlayingTime, setDuration, setIsReady, isReady])
 
@@ -100,16 +85,6 @@ const MediaPlayerComponent = ({ mediaUrl }: Props) => {
     }
   }, [playingTime, isSeeking, setIsSeeking, playerRef])
 
-  useEffect(() => {
-    if (isReady && NodeStartTime && playerRef && !hasSeekedToStart) {
-      const startTimeInSeconds = videoTimeToSeconds(NodeStartTime)
-
-      playerRef.seekTo(startTimeInSeconds, 'seconds')
-      setPlayingTime(startTimeInSeconds)
-      setHasSeekedToStart(true)
-    }
-  }, [isReady, NodeStartTime, setPlayingTime, hasSeekedToStart, playerRef])
-
   const togglePlay = () => {
     setIsPlaying(!isPlaying)
   }
@@ -158,69 +133,10 @@ const MediaPlayerComponent = ({ mediaUrl }: Props) => {
   const handleReady = () => {
     if (playerRef) {
       setStatus('ready')
-
-      const videoDuration = playerRef.getDuration()
-
-      setDuration(videoDuration)
-
-      if (NodeStartTime && !hasSeekedToStart) {
-        const startTimeInSeconds = videoTimeToSeconds(NodeStartTime)
-
-        playerRef.seekTo(startTimeInSeconds, 'seconds')
-        setPlayingTime(startTimeInSeconds)
-        setHasSeekedToStart(true)
-      }
+      togglePlay()
     }
   }
 
-  const handleFullScreenChange = () => {
-    setIsFullScreen(!!document.fullscreenElement)
-    document.removeEventListener('fullscreenchange', handleFullScreenChange)
-  }
-
-  useEffect(() => () => {
-    document.removeEventListener('fullscreenchange', handleFullScreenChange)
-  })
-
-  useEffect(() => {
-    const handleMouseMove = (event: MouseEvent) => {
-      if (isFullScreen) {
-        const windowHeight = window.screen.height
-        const mousePositionY = event.clientY
-        const distanceFromBottom = windowHeight - mousePositionY
-        const threshold = 50
-
-        setIsMouseNearBottom(distanceFromBottom <= threshold)
-      }
-    }
-
-    document.addEventListener('mousemove', handleMouseMove)
-
-    return () => {
-      document.removeEventListener('mousemove', handleMouseMove)
-    }
-  }, [isFullScreen, isMouseNearBottom])
-
-  useEffect(() => {
-    const handleKeyDown = (event: KeyboardEvent) => {
-      if (isFullScreen && event.key === 'Escape') {
-        event.preventDefault()
-        event.stopPropagation()
-      } else if (isFocused && event.key === ' ') {
-        event.preventDefault()
-        togglePlay()
-      }
-    }
-
-    document.addEventListener('fullscreenchange', handleFullScreenChange)
-    document.addEventListener('keydown', handleKeyDown)
-
-    return () => {
-      document.removeEventListener('fullscreenchange', handleFullScreenChange)
-      document.removeEventListener('keydown', handleKeyDown)
-    }
-  })
-
   const handlePlayerClick = () => {
     togglePlay()
   }
@@ -235,15 +151,15 @@ const MediaPlayerComponent = ({ mediaUrl }: Props) => {
   )
 
   return mediaUrl ? (
-    <Wrapper ref={wrapperRef} onBlur={() => setIsFocused(false)} onFocus={() => setIsFocused(true)} tabIndex={0}>
-      <Cover isFullScreen={isFullScreen}>
+    <Wrapper ref={wrapperRef} tabIndex={0}>
+      <Cover isFullScreen={false}>
         <Avatar size={120} src={playingNode?.image_url || ''} type="clip" />
       </Cover>
-      <PlayerWrapper isFullScreen={isFullScreen} onClick={handlePlayerClick}>
+      <PlayerWrapper isFullScreen={false} onClick={handlePlayerClick}>
         <ReactPlayer
           ref={playerRefCallback}
           controls
-          height={!isFullScreen ? '219px' : window.screen.height}
+          height="219px"
           onBuffer={() => setStatus('buffering')}
           onBufferEnd={() => setStatus('ready')}
           onError={handleError}

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

@@ -14,7 +14,7 @@ type Props = {
 }
 
 export const PlayerControl = ({ markers }: Props) => {
-  const { isPlaying, setIsPlaying, playingTime, playingNode, duration, playerRef } = usePlayerStore((s) => s)
+  const { isPlaying, setIsPlaying, playingTime, playingNode, playerRef } = usePlayerStore((s) => s)
 
   const showPlayer = playingNode
 
@@ -45,11 +45,13 @@ export const PlayerControl = ({ markers }: Props) => {
     }
   }
 
+  const duration = playerRef?.getDuration() || 0
+
   return showPlayer ? (
     <Wrapper>
       <Controls>
         <RewindIconWrapper onClick={handleRewind}>
-          <img alt="" src="public/RewindIcon.svg" />
+          <img alt="" src="RewindIcon.svg" />
         </RewindIconWrapper>
         <Action
           data-testid="play-pause-button"
@@ -62,17 +64,16 @@ export const PlayerControl = ({ markers }: Props) => {
           {isPlaying ? <PauseIcon data-testid="pause-icon" /> : <PlayIcon data-testid="play-icon" />}
         </Action>
         <ForwardIconWrapper onClick={handleFastForward}>
-          <img alt="" src="public/ForwardIcon.svg" />
+          <img alt="" src="ForwardIcon.svg" />
         </ForwardIconWrapper>
       </Controls>
-      {true && (
-        <ProgressBar
-          duration={duration}
-          handleProgressChange={handleProgressChange}
-          markers={markers}
-          playingTIme={playingTime}
-        />
-      )}
+
+      <ProgressBar
+        duration={duration}
+        handleProgressChange={handleProgressChange}
+        markers={markers}
+        playingTIme={playingTime}
+      />
     </Wrapper>
   ) : null
 }