fix: when two tracks was played same time

src/components/audio-player/audio-player.tsx

@@ -1,6 +1,7 @@
-import { useEffect } from 'react'
+import { useContext, useEffect } from 'react'
 import { useAudio as ReactUseAudio } from 'react-use'
 import { PlayIcon, PauseIcon } from '@heroicons/react/solid'
+import { AudioContext } from 'contexts'
 
 type AudioPlayerProps = {
   src: string
@@ -16,13 +17,32 @@ export const AudioPlayer = ({
     autoPlay: false
   })
 
-  const { volume } = controls
+  const { source, setSource } = useContext(AudioContext)
+
+  const { volume, play, pause } = controls
+
+  useEffect(() => {
+    if (src !== source) {
+      pause()
+    }
+  }, [source, src, pause])
 
   useEffect(() => {
+    /**
+     * @disclaimer
+     * I don't know why when I add volume function to array deps
+     * this component receive this error
+     * "Maximum update depth exceeded. This can happen when a component calls setState inside"
+     */
     volume(0.1)
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
 
+  const handlePlay = () => {
+    play()
+    setSource?.(src)
+  }
+
   return (
     <div className="flex justify-center p-2">
       {audio}
@@ -33,7 +53,7 @@ export const AudioPlayer = ({
           hover:scale-110
           transition duration-200 ease-out hover:ease-in"
           type="button"
-          onClick={controls.pause}
+          onClick={pause}
         />
       ) : (
         <PlayIcon
@@ -42,7 +62,7 @@ export const AudioPlayer = ({
           hover:scale-110
           transition duration-200 ease-out hover:ease-in"
           type="button"
-          onClick={controls.play}
+          onClick={handlePlay}
         />
       )}
     </div>

src/components/image-box/image-box.spec.tsx

@@ -3,6 +3,11 @@ import userEvent from '@testing-library/user-event'
 import { ImageBox } from './image-box'
 
 describe('<ImageBox />', () => {
+  beforeEach(() => {
+    window.HTMLMediaElement.prototype.play = jest.fn()
+    window.HTMLMediaElement.prototype.pause = jest.fn()
+  })
+
   const heartIconPath = 'div > div:nth-child(2) > svg > path'
   const onLikeMock = jest.fn()
 

src/contexts/audio-context/audio-context.tsx

@@ -0,0 +1,12 @@
+import { createContext } from 'react'
+
+type AudioContextProps = {
+  source: string
+  setSource?: (source: string) => void
+}
+
+const InitialValues: AudioContextProps = {
+  source: ''
+}
+
+export const AudioContext = createContext<AudioContextProps>(InitialValues)

src/contexts/audio-context/index.ts

@@ -0,0 +1 @@
+export { AudioContext } from './audio-context'

src/contexts/index.ts

@@ -0,0 +1 @@
+export { AudioContext } from './audio-context'

src/templates/home/authenticated.tsx

@@ -11,6 +11,7 @@ import {
 import { usePlaylistMutation, useRecommendation } from 'queries'
 import { Recommendation } from 'types'
 import { MAX_RANDOM_FY_ITEMS } from '../../constants'
+import { AudioContext } from 'contexts'
 
 type AuthenticatedProps = {
   artistId: string
@@ -29,6 +30,8 @@ export const Authenticated = ({ artistId }: AuthenticatedProps) => {
     trackId: ''
   }))
 
+  const [currentPlaying, setCurrentPlaying] = useState('')
+
   const { data, isError, isLoading, isRefetching } = useRecommendation(
     liked.id,
     liked.trackId
@@ -48,52 +51,56 @@ export const Authenticated = ({ artistId }: AuthenticatedProps) => {
   }
 
   return (
-    <Content>
-      {likedArtists.length < MAX_RANDOM_FY_ITEMS && (
-        <>
-          <div
-            className={`mt-8 p-4 flex items-center ${
-              isRefetching ? 'animate-pulse' : ''
-            }`}
-          >
-            <Title>Randomfy</Title>
-            {isRefetching && <span className="ml-4">refetching...</span>}
-          </div>
-          <Grid>
-            {isLoading && <ImageBoxSkeleton />}
-            {data?.data.map((artist) => (
-              <ImageBox
-                key={artist.id}
-                imgSrc={artist.track.images[1].url}
-                audioSrc={artist.track.previewUrl}
-                track={artist.track.name}
-                artist={artist.name}
-                onLike={() => handleLike(artist)}
-              />
-            ))}
-          </Grid>
-        </>
-      )}
+    <AudioContext.Provider
+      value={{ source: currentPlaying, setSource: setCurrentPlaying }}
+    >
+      <Content>
+        {likedArtists.length < MAX_RANDOM_FY_ITEMS && (
+          <>
+            <div
+              className={`mt-8 p-4 flex items-center ${
+                isRefetching ? 'animate-pulse' : ''
+              }`}
+            >
+              <Title>Randomfy</Title>
+              {isRefetching && <span className="ml-4">refetching...</span>}
+            </div>
+            <Grid>
+              {isLoading && <ImageBoxSkeleton />}
+              {data?.data.map((artist) => (
+                <ImageBox
+                  key={artist.id}
+                  imgSrc={artist.track.images[1].url}
+                  audioSrc={artist.track.previewUrl}
+                  track={artist.track.name}
+                  artist={artist.name}
+                  onLike={() => handleLike(artist)}
+                />
+              ))}
+            </Grid>
+          </>
+        )}
 
-      <HTMLToImage artists={likedArtists} />
+        <HTMLToImage artists={likedArtists} />
 
-      {likedArtists.length === MAX_RANDOM_FY_ITEMS && (
-        <>
-          <div className="p-4" id="subtitle">
-            <SubTitle>You can make a randomfy playlist!</SubTitle>
-          </div>
-          <div className="flex justify-center p-4">
-            <button
-              className="flex justify-evenly items-center w-56 p-3 rounded-full font-semibold 
+        {likedArtists.length === MAX_RANDOM_FY_ITEMS && (
+          <>
+            <div className="p-4" id="subtitle">
+              <SubTitle>You can make a randomfy playlist!</SubTitle>
+            </div>
+            <div className="flex justify-center p-4">
+              <button
+                className="flex justify-evenly items-center w-56 p-3 rounded-full font-semibold 
           text-center text-gray-100 dark:text-gray-800 bg-gray-900 dark:bg-gray-200"
-              aria-label="create playlist button"
-              onClick={() => mutation.mutate(likedArtists)}
-            >
-              Create Playlist
-            </button>
-          </div>
-        </>
-      )}
-    </Content>
+                aria-label="create playlist button"
+                onClick={() => mutation.mutate(likedArtists)}
+              >
+                Create Playlist
+              </button>
+            </div>
+          </>
+        )}
+      </Content>
+    </AudioContext.Provider>
   )
 }