move useAudioPlayer into AudioProvider

Author: dowdiness

src/__generated__/gatsby-types.ts

@@ -1,12 +1,9 @@
 import React from 'react'
-import useAudioPlayer from 'src/hooks/useAudioPlayer'
 import AudioControls from 'src/components/AudioPlayer/AudioControls'
 import AudioInfo from 'src/components/AudioPlayer/AudioInfo'
 import AudioVolume from 'src/components/AudioPlayer/AudioVolume'
 import AudioModal from 'src/components/AudioPlayer/AudioModal'
 import { m as motion, AnimatePresence } from 'framer-motion'
-import { AudioContext } from 'src/components/AudioPlayer/AudioProvider'
-import { useContextSelector } from 'use-context-selector'
 
 import { useAtom } from "jotai"
 import {
@@ -57,9 +54,6 @@ const AudioPlayer: React.FC = () => {
     -webkit-gradient(linear, 0% 0%, 100% 0%, color-stop(${currentPercentage}, #fff), color-stop(${currentPercentage}, #414141))
     `
 
-  const audio = useContextSelector(AudioContext, audio => audio)
-  useAudioPlayer(audio)
-
   return (
     <AnimatePresence>
       {isAudioMiniPlayerOpen ? isAudioModalOpen

src/components/AudioPlayer/Audio.tsx

@@ -1,29 +1,11 @@
-import React, { useRef, useEffect, ReactNode } from 'react'
-import { useStaticQuery, graphql } from 'gatsby'
-
+import React, { ReactNode } from 'react'
+import useAudioPlayer from 'src/hooks/useAudioPlayer'
 import { createContext } from 'use-context-selector'
 
-export const AudioContext = createContext<React.MutableRefObject<HTMLAudioElement>|null>(null!)
+export const AudioContext = createContext<React.MutableRefObject<HTMLAudioElement>>(null!)
 
 export const AudioProvider = ({ children }: { children: ReactNode }) => {
-  const { audio } = useStaticQuery(
-    graphql`
-      query {
-        audio: allFile(filter: {id: {eq: "e8d9270b-16a0-5bdb-b214-c2aff1bb7160"}}) {
-          edges {
-            node {
-              publicURL
-            }
-          }
-        }
-      }
-    `
-  )
-
-  let audioRef: React.MutableRefObject<HTMLAudioElement> | null = null
-  useEffect(() => {
-    audioRef = useRef<HTMLAudioElement>(new Audio(audio.edges[0].node.publicURL))
-  }, [])
+  const { audioRef } = useAudioPlayer()
 
   return (
     <AudioContext.Provider value={audioRef}>

src/components/AudioPlayer/AudioProvider.tsx

@@ -16,7 +16,7 @@ import {
   currentTimeAtom,
 } from 'src/atoms/track'
 
-function useAudioPlayer(audioRef: React.MutableRefObject<HTMLAudioElement>|null) {
+function useAudioPlayer() {
   const [tracks] = useAtom(tracksAtom)
   const resetTracks = useResetAtom(tracksAtom)
   const [, toPrevTrack] = useAtom(prevTrackAtom)
@@ -30,6 +30,7 @@ function useAudioPlayer(audioRef: React.MutableRefObject<HTMLAudioElement>|null)
   const [skipTime, setSkipTime] = useAtom(skipTimeAtom)
   const [currentTime] = useAtom(currentTimeAtom)
 
+  const audioRef = useRef<HTMLAudioElement>(null!)
   const isReady = useRef(false)
 
   const setMediaMetadata = (audioTracks: Track[]) => {
@@ -109,17 +110,19 @@ function useAudioPlayer(audioRef: React.MutableRefObject<HTMLAudioElement>|null)
           updatePositionState()
         }
       })
-      navigator.mediaSession.setActionHandler('previoustrack', () => toPrevTrack(audioRef?.current))
+      navigator.mediaSession.setActionHandler('previoustrack', () => toPrevTrack(audioRef.current))
       navigator.mediaSession.setActionHandler('nexttrack', () => toNextTrack())
     }
   }
 
-  const onScrub = (value: string) => {
-    if (audioRef?.current) {
-      audioRef.current.currentTime = parseInt(value, 10)
-      setTrackProgress(audioRef.current.currentTime)
-    }
-  }
+  useEffect(() => {
+    // initialize audioRef
+    audioRef.current = new Audio('/001.wav')
+    return (() => {
+      // prevent memory leak
+      audioRef.current.pause()
+    })
+  }, [])
 
   // updatePositionState https://developer.mozilla.org/en-US/docs/Web/API/MediaSession/setPositionState
   useEffect(() => {
@@ -136,74 +139,61 @@ function useAudioPlayer(audioRef: React.MutableRefObject<HTMLAudioElement>|null)
   }, [duration, playbackRate, trackProgress])
 
   useEffect(() => {
-    if (audioRef?.current) {
-      audioRef.current.volume = volume
-    }
+    audioRef.current.volume = volume
   }, [volume])
 
   useEffect(() => {
-    if (audioRef?.current) {
-      audioRef.current.muted = isMute
-    }
+    audioRef.current.muted = isMute
   }, [isMute])
 
   useEffect(() => {
-    if (audioRef?.current) {
-      audioRef.current.currentTime = currentTime
-      setTrackProgress(audioRef.current.currentTime)
-    }
+    audioRef.current.currentTime = currentTime
+    setTrackProgress(audioRef.current.currentTime)
   }, [currentTime])
 
   useEffect(() => {
-    if (audioRef?.current) {
-      // seekforward
-      if (skipTime > 0) {
-        audioRef.current.currentTime = Math.min(audioRef.current.currentTime + skipTime, audioRef.current.duration)
-        //seekbackward
-      } else if (skipTime < 0) {
-        audioRef.current.currentTime = Math.max(audioRef.current.currentTime + skipTime, 0)
-      } else {
-        return
-      }
-      setTrackProgress(audioRef.current.currentTime)
-      updatePositionState()
-      setSkipTime(0)
+    // seekforward
+    if (skipTime > 0) {
+      audioRef.current.currentTime = Math.min(audioRef.current.currentTime + skipTime, audioRef.current.duration)
+      //seekbackward
+    } else if (skipTime < 0) {
+      audioRef.current.currentTime = Math.max(audioRef.current.currentTime + skipTime, 0)
+    } else {
+      return
     }
+    setTrackProgress(audioRef.current.currentTime)
+    updatePositionState()
+    setSkipTime(0)
   }, [skipTime])
 
   useEffect(() => {
     if (isPlaying) {
-      audioRef?.current?.play().then(_ => {
-        if (audioRef.current) {
-          setDuration(audioRef.current.duration)
-          setActionHandler()
-        }
+      audioRef.current.play().then(_ => {
+        setDuration(audioRef.current.duration)
+        setActionHandler()
       })
     } else {
-      audioRef?.current?.pause()
+      audioRef.current.pause()
     }
   }, [isPlaying])
 
   // Handles cleanup and setup when changing tracks
   useEffect(() => {
-    audioRef?.current?.pause()
+    audioRef.current.pause()
 
     if (tracks[0] && isReady.current) {
       // remove previous audio eventlisners
-      if(audioRef?.current) {
-        audioRef.current.removeEventListener('timeupdate', (_event) => {
-          if (audioRef.current?.ended) {
-            toNextTrack()
-          } else if (audioRef.current) {
-            setTrackProgress(audioRef.current.currentTime)
-          }
-        })
-      }
-      if (audioRef) {
-        audioRef.current = new Audio(tracks[0].audioSrc)
-      }
+      audioRef.current.removeEventListener('timeupdate', (_event) => {
+        if (audioRef.current.ended) {
+          toNextTrack()
+        } else {
+          setTrackProgress(audioRef.current.currentTime)
+        }
+      })
+
+      audioRef.current = new Audio(tracks[0].audioSrc)
       // https://developer.mozilla.org/en-US/docs/Web/API/MediaMetadata
-      audioRef?.current.play().then(_ => {
+      audioRef.current.play().then(_ => {
         if (audioRef.current) {
           setDuration(audioRef.current.duration)
           setTrackProgress(audioRef.current.currentTime)
@@ -212,8 +202,8 @@ function useAudioPlayer(audioRef: React.MutableRefObject<HTMLAudioElement>|null)
           setIsPlaying(true)
         }
       })
-      audioRef?.current.addEventListener('timeupdate', (_event) => {
-        if (audioRef.current?.ended) {
+      audioRef.current.addEventListener('timeupdate', (_event) => {
+        if (audioRef.current.ended) {
           toNextTrack()
         } else if (audioRef.current) {
           setTrackProgress(audioRef.current.currentTime)
@@ -227,7 +217,6 @@ function useAudioPlayer(audioRef: React.MutableRefObject<HTMLAudioElement>|null)
 
   return {
     audioRef,
-    onScrub,
   }
 }
 

src/hooks/useAudioPlayer.ts

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react'
+import React, { useState } from 'react'
 import { PageProps, graphql } from 'gatsby'
 
 //Components
@@ -19,6 +19,8 @@ const PlaylistPage: React.FC<PageProps<GatsbyTypes.PlaylistQuery>> = ({ data, lo
   const [,updateTracks] = useAtom(updateTracksAtom)
   const [,setHistory] = useAtom(historyAtom)
 
+  const [isPlayed, setIsPlayed] = useState(false)
+
   const audio = useContextSelector(AudioContext, audio => audio)
 
   const playlist = data.contentfulPlaylist
@@ -67,6 +69,7 @@ const PlaylistPage: React.FC<PageProps<GatsbyTypes.PlaylistQuery>> = ({ data, lo
       audio.current.pause()
       audio.current.muted = false
       audio.current.currentTime = 0
+      setIsPlayed(true)
     }
   }
 
@@ -127,7 +130,7 @@ const PlaylistPage: React.FC<PageProps<GatsbyTypes.PlaylistQuery>> = ({ data, lo
                 <button
                   className="flex items-center"
                   onClick={() => {
-                    initializeForSafari()
+                    if (!isPlayed) initializeForSafari()
                     updateTracks(normarizedSongs.slice(index))
                     setHistory(normarizedSongs.slice(0, index))
                   }}