Skip to content

Commit

Permalink
feat: updates autoplay and icons
Browse files Browse the repository at this point in the history
  • Loading branch information
Rassl committed Nov 27, 2024
1 parent c919e06 commit d2c91c5
Show file tree
Hide file tree
Showing 2 changed files with 19 additions and 102 deletions.
98 changes: 7 additions & 91 deletions src/components/mindset/components/MediaPlayer/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 => {
Expand Down Expand Up @@ -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,
Expand All @@ -89,7 +75,6 @@ const MediaPlayerComponent = ({ mediaUrl }: Props) => {
setPlayingTime(0)
setDuration(0)
setIsReady(false)
setHasSeekedToStart(false)
}
}, [playingNode, setPlayingTime, setDuration, setIsReady, isReady])

Expand All @@ -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)
}
Expand Down Expand Up @@ -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()
}
Expand All @@ -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}
Expand Down
23 changes: 12 additions & 11 deletions src/components/mindset/components/PlayerContols/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down Expand Up @@ -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"
Expand All @@ -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
}
Expand Down

0 comments on commit d2c91c5

Please sign in to comment.