feat: Create usePlayer hook and refactor App component

- Separate all player logic and state into usePlayer hook

- Refactor App component to use usePlayer hook

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,28 +17,28 @@ import { FaGithub } from 'react-icons/fa'
 import { ONE_HOUR_IN_SECONDS } from './constants'
 
 export default function App() {
-  const player = useRef<MediaPlayerInstance>(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<number[] | null>()
-  const [playerSource, setPlayerSource] = useState<string | File>('')
   const [audioShouldUnpause, setAudioShouldUnpause] = useState<boolean>(false)
 
   const { timeLeft, start, pause, reset, isRunning } = useTimer(ONE_HOUR_IN_SECONDS)
   const canResetTimer = timeLeft.getTotalSeconds() < ONE_HOUR_IN_SECONDS
 
   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<void> {
-    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()

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<MediaPlayerInstance>(null)
+  const remote = useMediaRemote(player)
+
+  const { paused, currentTime, duration, canPlay } = useMediaStore(player)
+
+  const [playerSource, setPlayerSource] = useState<string | File>('')
+
+  const pausePlayer = () => remote.pause()
+  const resetPlayerCurrentTime = () => remote.seek(0)
+
+  async function resetPlayer(): Promise<void> {
+    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,
+  }
+}