diff --git a/src/components/mindset/components/MediaPlayer/index.tsx b/src/components/mindset/components/MediaPlayer/index.tsx index b7b106db2..09c543f1f 100644 --- a/src/components/mindset/components/MediaPlayer/index.tsx +++ b/src/components/mindset/components/MediaPlayer/index.tsx @@ -85,9 +85,9 @@ const MediaPlayerComponent = ({ mediaUrl }: Props) => { } }, [playingTime, isSeeking, setIsSeeking, playerRef]) - const togglePlay = () => { + const togglePlay = useCallback(() => { setIsPlaying(!isPlaying) - } + }, [isPlaying, setIsPlaying]) const handlePlay = useCallback(() => { setIsPlaying(true) @@ -102,6 +102,24 @@ const MediaPlayerComponent = ({ mediaUrl }: Props) => { setStatus('error') } + const handleKeyDown = useCallback( + (event: KeyboardEvent) => { + if (event.code === 'Space') { + event.preventDefault() + togglePlay() + } + }, + [togglePlay], + ) + + useEffect(() => { + window.addEventListener('keydown', handleKeyDown) + + return () => { + window.removeEventListener('keydown', handleKeyDown) + } + }, [handleKeyDown]) + const edges = useMemo(() => { const edgesFiltered = dataInitial?.links.filter((link) => link?.properties?.start) || []