diff --git a/src/App.tsx b/src/App.tsx index c55c68f..7451d54 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,10 +1,11 @@ -import { useCallback, useEffect, useRef, useState } from 'react' +import { useEffect, useState } from 'react' -import { MediaPlayer, MediaProvider, useMediaRemote, useMediaStore, type MediaPlayerInstance } from '@vidstack/react' +import { MediaPlayer, MediaProvider } from '@vidstack/react' import '@vidstack/react/player/styles/base.css' import { AudioOrVideoSourceInput, Button, StartOrPauseTimerButton, Timer } from './components' +import usePlayer from './hooks/usePlayer' import useTimer from './hooks/useTimer' import { useTranslation } from 'react-i18next' @@ -16,17 +17,21 @@ import { FaGithub } from 'react-icons/fa' import { ONE_HOUR_IN_SECONDS } from './constants' export default function App() { - const player = useRef(null) - const remote = useMediaRemote(player) const { - paused: playerPaused, - currentTime: playerCurrentTime, - duration: playerDuration, - canPlay: playerCanPlay, - } = useMediaStore(player) + player, + playerPaused, + playerCurrentTime, + playerDuration, + playerCanPlay, + playerSource, + setPlayerSource, + resumePlayer, + pausePlayer, + resetPlayerCurrentTime, + resetPlayer, + } = usePlayer() const [audioMoments, setAudioMoments] = useState() - const [playerSource, setPlayerSource] = useState('') const [audioShouldUnpause, setAudioShouldUnpause] = useState(false) const { timeLeft, start, pause, reset, isRunning } = useTimer(ONE_HOUR_IN_SECONDS) @@ -34,10 +39,6 @@ export default function App() { const { t, i18n } = useTranslation('', { keyPrefix: 'app' }) - const resumePlayer = useCallback(() => remote.play(), [remote]) - const pausePlayer = () => remote.pause() - const resetPlayerCurrentTime = () => remote.seek(0) - function handleAudioOrVideoSourceInputChange(input: string | File): void { reset() if (playerSource !== '') { @@ -48,21 +49,6 @@ export default function App() { setPlayerSource(input) } - async function resetPlayer(): Promise { - const playerReset = playerPaused && playerCurrentTime === 0 - if (!playerReset) { - pausePlayer() - resetPlayerCurrentTime() - if (playerSource instanceof File) { - await new Promise((resolve) => { - setPlayerSource('') - resolve(true) - }) - setPlayerSource(playerSource) - } - } - } - function handleRandomAudioMomentsGeneration(): void { const oneHourRandomAudioMomentsGenerator = new OneHourRandomAudioMomentsGenerator(playerDuration) const generatedRandomAudioMoments = oneHourRandomAudioMomentsGenerator.execute() diff --git a/src/hooks/usePlayer.ts b/src/hooks/usePlayer.ts new file mode 100644 index 0000000..df392f6 --- /dev/null +++ b/src/hooks/usePlayer.ts @@ -0,0 +1,44 @@ +import { useRef, useState } from 'react' + +import { useMediaRemote, useMediaStore, type MediaPlayerInstance } from '@vidstack/react' + +export default function usePlayer() { + const player = useRef(null) + const remote = useMediaRemote(player) + + const { paused, currentTime, duration, canPlay } = useMediaStore(player) + + const [playerSource, setPlayerSource] = useState('') + + const pausePlayer = () => remote.pause() + const resetPlayerCurrentTime = () => remote.seek(0) + + async function resetPlayer(): Promise { + const playerReset = paused && currentTime === 0 + if (!playerReset) { + pausePlayer() + resetPlayerCurrentTime() + if (playerSource instanceof File) { + await new Promise((resolve) => { + setPlayerSource('') + resolve(true) + }) + setPlayerSource(playerSource) + } + } + } + + return { + player, + playerPaused: paused, + playerCurrentTime: currentTime, + playerDuration: duration, + playerCanPlay: canPlay, + playerSource, + setPlayerSource, + resumePlayer: () => remote.play(), + pausePlayer, + resetPlayerCurrentTime, + resetPlayer, + } +}