diff --git a/src/components/mindset/components/MediaPlayer/index.tsx b/src/components/mindset/components/MediaPlayer/index.tsx index d7e94e5e6..0df0a6f10 100644 --- a/src/components/mindset/components/MediaPlayer/index.tsx +++ b/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(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('') - 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 ? ( - setIsFocused(false)} onFocus={() => setIsFocused(true)} tabIndex={0}> - + + - + setStatus('buffering')} onBufferEnd={() => setStatus('ready')} onError={handleError} diff --git a/src/components/mindset/components/PlayerContols/index.tsx b/src/components/mindset/components/PlayerContols/index.tsx index 9ba8f0e89..a78ab57c9 100644 --- a/src/components/mindset/components/PlayerContols/index.tsx +++ b/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 ? ( - + { {isPlaying ? : } - + - {true && ( - - )} + + ) : null }