From 5c219dd3a69c857ec9ec502cd4ae0c7c48dbc30d Mon Sep 17 00:00:00 2001
From: jeffvli <jeffvictorli@gmail.com>
Date: Wed, 15 Sep 2021 00:57:25 -0700
Subject: [PATCH] add timeout for initial playback

---
 src/components/player/Player.tsx | 37 ++++++++++++++++++--------------
 1 file changed, 21 insertions(+), 16 deletions(-)

diff --git a/src/components/player/Player.tsx b/src/components/player/Player.tsx
index 24e80b1..6b807b5 100644
--- a/src/components/player/Player.tsx
+++ b/src/components/player/Player.tsx
@@ -254,19 +254,24 @@ const Player = ({ currentEntryList, children }: any, ref: any) => {
 
   useEffect(() => {
     if (player.status === 'PLAYING') {
-      if (playQueue.currentPlayer === 1) {
-        try {
-          player1Ref.current.audioEl.current.play();
-        } catch (err) {
-          console.log(err);
-        }
-      } else {
-        try {
-          player2Ref.current.audioEl.current.play();
-        } catch (err) {
-          console.log(err);
-        }
-      }
+      setTimeout(
+        () => {
+          if (playQueue.currentPlayer === 1) {
+            try {
+              player1Ref.current.audioEl.current.play();
+            } catch (err) {
+              console.log(err);
+            }
+          } else {
+            try {
+              player2Ref.current.audioEl.current.play();
+            } catch (err) {
+              console.log(err);
+            }
+          }
+        },
+        player1Src ? 0 : 500
+      );
     } else {
       // Hacky way to pause the player because it sometimes doesn't pause if the
       // polling interval is set to a low value
@@ -287,7 +292,7 @@ const Player = ({ currentEntryList, children }: any, ref: any) => {
         player2Ref.current.audioEl.current.pause();
       }, 200);
     }
-  }, [playQueue.currentPlayer, player.status]);
+  }, [playQueue.currentPlayer, player.status, player1Src]);
 
   useEffect(() => {
     /* Adding a small delay when setting the track src helps to not break the player when we're modifying
@@ -323,11 +328,11 @@ const Player = ({ currentEntryList, children }: any, ref: any) => {
     if (playQueue[currentEntryList] && !playQueue.isFading) {
       const timer1 = setTimeout(() => {
         setPlayer1Src(getSrc1());
-      }, 300);
+      }, 250);
 
       const timer2 = setTimeout(() => {
         setPlayer2Src(getSrc2());
-      }, 300);
+      }, 250);
 
       return () => {
         clearTimeout(timer1);