From 1f3cd6ca482318de93968e4b0c7675d9df8e5a0e Mon Sep 17 00:00:00 2001
From: Kendall Garner <17521368+kgarner7@users.noreply.github.com>
Date: Wed, 24 Jan 2024 19:59:32 -0800
Subject: [PATCH 1/6] test 3

---
 .../components/audio-player/index.tsx         | 36 ++++++++++---------
 1 file changed, 20 insertions(+), 16 deletions(-)

diff --git a/src/renderer/components/audio-player/index.tsx b/src/renderer/components/audio-player/index.tsx
index 7f8b19044..9eb61ecfc 100644
--- a/src/renderer/components/audio-player/index.tsx
+++ b/src/renderer/components/audio-player/index.tsx
@@ -39,6 +39,9 @@ type WebAudio = {
     gain: GainNode;
 };
 
+const EMPTY_SOURCE =
+    'data:audio/wav;base64,UklGRjIAAABXQVZFZm10IBIAAAABAAEAQB8AAEAfAAABAAgAAABmYWN0BAAAAAAAAABkYXRhAAAAAA==';
+
 export const AudioPlayer = forwardRef(
     (
         {
@@ -69,6 +72,7 @@ export const AudioPlayer = forwardRef(
         const [player2Source, setPlayer2Source] = useState<MediaElementAudioSourceNode | null>(
             null,
         );
+
         const calculateReplayGain = useCallback(
             (song: Song): number => {
                 if (playback.replayGainMode === 'no') {
@@ -244,10 +248,7 @@ export const AudioPlayer = forwardRef(
 
         useEffect(() => {
             if (webAudio && player1Source) {
-                if (player1 === undefined) {
-                    player1Source.disconnect();
-                    setPlayer1Source(null);
-                } else if (currentPlayer === 1) {
+                if (player1 && currentPlayer === 1) {
                     webAudio.gain.gain.setValueAtTime(calculateReplayGain(player1), 0);
                 }
             }
@@ -255,10 +256,7 @@ export const AudioPlayer = forwardRef(
 
         useEffect(() => {
             if (webAudio && player2Source) {
-                if (player2 === undefined) {
-                    player2Source.disconnect();
-                    setPlayer2Source(null);
-                } else if (currentPlayer === 2) {
+                if (player2 && currentPlayer === 2) {
                     webAudio.gain.gain.setValueAtTime(calculateReplayGain(player2), 0);
                 }
             }
@@ -266,9 +264,12 @@ export const AudioPlayer = forwardRef(
 
         const handlePlayer1Start = useCallback(
             async (player: ReactPlayer) => {
-                if (!webAudio || player1Source) return;
-                if (webAudio.context.state !== 'running') {
-                    await webAudio.context.resume();
+                if (!webAudio) return;
+                if (player1Source) {
+                    if (webAudio.context.state !== 'running') {
+                        await webAudio.context.resume();
+                    }
+                    return;
                 }
 
                 const internal = player.getInternalPlayer() as HTMLMediaElement | undefined;
@@ -284,9 +285,12 @@ export const AudioPlayer = forwardRef(
 
         const handlePlayer2Start = useCallback(
             async (player: ReactPlayer) => {
-                if (!webAudio || player2Source) return;
-                if (webAudio.context.state !== 'running') {
-                    await webAudio.context.resume();
+                if (!webAudio) return;
+                if (player2Source) {
+                    if (webAudio.context.state !== 'running') {
+                        await webAudio.context.resume();
+                    }
+                    return;
                 }
 
                 const internal = player.getInternalPlayer() as HTMLMediaElement | undefined;
@@ -312,7 +316,7 @@ export const AudioPlayer = forwardRef(
                     playbackRate={playbackSpeed}
                     playing={currentPlayer === 1 && status === PlayerStatus.PLAYING}
                     progressInterval={isTransitioning ? 10 : 250}
-                    url={player1?.streamUrl}
+                    url={player1?.streamUrl || EMPTY_SOURCE}
                     volume={volume}
                     width={0}
                     onEnded={handleOnEnded}
@@ -331,7 +335,7 @@ export const AudioPlayer = forwardRef(
                     playbackRate={playbackSpeed}
                     playing={currentPlayer === 2 && status === PlayerStatus.PLAYING}
                     progressInterval={isTransitioning ? 10 : 250}
-                    url={player2?.streamUrl}
+                    url={player2?.streamUrl || EMPTY_SOURCE}
                     volume={volume}
                     width={0}
                     onEnded={handleOnEnded}

From 669c2a973f96a0466b5d66929298c510ea42e16d Mon Sep 17 00:00:00 2001
From: Kendall Garner <17521368+kgarner7@users.noreply.github.com>
Date: Wed, 24 Jan 2024 20:05:51 -0800
Subject: [PATCH 2/6] comments

---
 src/renderer/components/audio-player/index.tsx | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/src/renderer/components/audio-player/index.tsx b/src/renderer/components/audio-player/index.tsx
index 9eb61ecfc..559eb14ad 100644
--- a/src/renderer/components/audio-player/index.tsx
+++ b/src/renderer/components/audio-player/index.tsx
@@ -39,6 +39,11 @@ type WebAudio = {
     gain: GainNode;
 };
 
+// Credits: http://stackoverflow.com/questions/12150729/ddg
+// This is used so that the player will always have an <audio> element. This means that
+// player1Source and player2Source are connected BEFORE the user presses play for
+// the first time. This workaround is important for Safari, which seems to require the
+// source to be connected PRIOR to resuming audio context
 const EMPTY_SOURCE =
     'data:audio/wav;base64,UklGRjIAAABXQVZFZm10IBIAAAABAAEAQB8AAEAfAAABAAgAAABmYWN0BAAAAAAAAABkYXRhAAAAAA==';
 
@@ -266,6 +271,8 @@ export const AudioPlayer = forwardRef(
             async (player: ReactPlayer) => {
                 if (!webAudio) return;
                 if (player1Source) {
+                    // This should fire once, only if the source is real (meaning we
+                    // saw the dummy source) and the context is not ready
                     if (webAudio.context.state !== 'running') {
                         await webAudio.context.resume();
                     }

From 4a953e42f04191921af3a49c7b26a044337a36f0 Mon Sep 17 00:00:00 2001
From: Kendall Garner <17521368+kgarner7@users.noreply.github.com>
Date: Thu, 25 Jan 2024 08:54:25 -0800
Subject: [PATCH 3/6] [bugfix]: SAFARI WHY. Use GainNode volume instead for
 volume control

---
 src/renderer/components/audio-player/index.tsx | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/src/renderer/components/audio-player/index.tsx b/src/renderer/components/audio-player/index.tsx
index 559eb14ad..59e2c03c9 100644
--- a/src/renderer/components/audio-player/index.tsx
+++ b/src/renderer/components/audio-player/index.tsx
@@ -81,7 +81,7 @@ export const AudioPlayer = forwardRef(
         const calculateReplayGain = useCallback(
             (song: Song): number => {
                 if (playback.replayGainMode === 'no') {
-                    return 1;
+                    return volume;
                 }
 
                 let gain: number | undefined;
@@ -99,7 +99,7 @@ export const AudioPlayer = forwardRef(
                     gain = playback.replayGainFallbackDB;
 
                     if (!gain) {
-                        return 1;
+                        return volume;
                     }
                 }
 
@@ -116,13 +116,14 @@ export const AudioPlayer = forwardRef(
                 if (playback.replayGainClip) {
                     return Math.min(expectedGain, 1 / peak);
                 }
-                return expectedGain;
+                return expectedGain * volume;
             },
             [
                 playback.replayGainClip,
                 playback.replayGainFallbackDB,
                 playback.replayGainMode,
                 playback.replayGainPreampDB,
+                volume,
             ],
         );
 
@@ -311,6 +312,9 @@ export const AudioPlayer = forwardRef(
             [player2Source, webAudio],
         );
 
+        // Bugfix for Safari: rather than use the `<audio>` volume (which doesn't work),
+        // use the GainNode to scale the volume. In this case, for compatibility with
+        // other browsers, set the `<audio>` volume to 1
         return (
             <>
                 <ReactPlayer
@@ -324,7 +328,7 @@ export const AudioPlayer = forwardRef(
                     playing={currentPlayer === 1 && status === PlayerStatus.PLAYING}
                     progressInterval={isTransitioning ? 10 : 250}
                     url={player1?.streamUrl || EMPTY_SOURCE}
-                    volume={volume}
+                    volume={webAudio ? 1 : volume}
                     width={0}
                     onEnded={handleOnEnded}
                     onProgress={
@@ -343,7 +347,7 @@ export const AudioPlayer = forwardRef(
                     playing={currentPlayer === 2 && status === PlayerStatus.PLAYING}
                     progressInterval={isTransitioning ? 10 : 250}
                     url={player2?.streamUrl || EMPTY_SOURCE}
-                    volume={volume}
+                    volume={webAudio ? 1 : volume}
                     width={0}
                     onEnded={handleOnEnded}
                     onProgress={

From af31f38e03a6682ded13a9c944b6f37d08eb9d17 Mon Sep 17 00:00:00 2001
From: Kendall Garner <17521368+kgarner7@users.noreply.github.com>
Date: Fri, 26 Jan 2024 07:18:27 -0800
Subject: [PATCH 4/6] force vercel refresh?

---
 src/renderer/components/audio-player/index.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/renderer/components/audio-player/index.tsx b/src/renderer/components/audio-player/index.tsx
index 59e2c03c9..321172310 100644
--- a/src/renderer/components/audio-player/index.tsx
+++ b/src/renderer/components/audio-player/index.tsx
@@ -80,6 +80,7 @@ export const AudioPlayer = forwardRef(
 
         const calculateReplayGain = useCallback(
             (song: Song): number => {
+                console.log("ignoreme i'm trying to test if vercel is doing a thing", volume);
                 if (playback.replayGainMode === 'no') {
                     return volume;
                 }

From 3c9f7d476aae52b472d9e8041d1a76bcb0069f10 Mon Sep 17 00:00:00 2001
From: Kendall Garner <17521368+kgarner7@users.noreply.github.com>
Date: Fri, 26 Jan 2024 08:00:29 -0800
Subject: [PATCH 5/6] Revert "force vercel refresh?"

This reverts commit af31f38e03a6682ded13a9c944b6f37d08eb9d17.
---
 src/renderer/components/audio-player/index.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/renderer/components/audio-player/index.tsx b/src/renderer/components/audio-player/index.tsx
index 321172310..59e2c03c9 100644
--- a/src/renderer/components/audio-player/index.tsx
+++ b/src/renderer/components/audio-player/index.tsx
@@ -80,7 +80,6 @@ export const AudioPlayer = forwardRef(
 
         const calculateReplayGain = useCallback(
             (song: Song): number => {
-                console.log("ignoreme i'm trying to test if vercel is doing a thing", volume);
                 if (playback.replayGainMode === 'no') {
                     return volume;
                 }

From 3c0b2e8d73cdf83b7cc38cf7c38b492bd454129d Mon Sep 17 00:00:00 2001
From: Kendall Garner <17521368+kgarner7@users.noreply.github.com>
Date: Fri, 26 Jan 2024 16:29:25 -0800
Subject: [PATCH 6/6] move volume scaling calculation to setGain

---
 .../components/audio-player/index.tsx         | 25 ++++++++-----------
 1 file changed, 11 insertions(+), 14 deletions(-)

diff --git a/src/renderer/components/audio-player/index.tsx b/src/renderer/components/audio-player/index.tsx
index 59e2c03c9..332dabdd3 100644
--- a/src/renderer/components/audio-player/index.tsx
+++ b/src/renderer/components/audio-player/index.tsx
@@ -81,7 +81,7 @@ export const AudioPlayer = forwardRef(
         const calculateReplayGain = useCallback(
             (song: Song): number => {
                 if (playback.replayGainMode === 'no') {
-                    return volume;
+                    return 1;
                 }
 
                 let gain: number | undefined;
@@ -99,7 +99,7 @@ export const AudioPlayer = forwardRef(
                     gain = playback.replayGainFallbackDB;
 
                     if (!gain) {
-                        return volume;
+                        return 1;
                     }
                 }
 
@@ -116,14 +116,13 @@ export const AudioPlayer = forwardRef(
                 if (playback.replayGainClip) {
                     return Math.min(expectedGain, 1 / peak);
                 }
-                return expectedGain * volume;
+                return expectedGain;
             },
             [
                 playback.replayGainClip,
                 playback.replayGainFallbackDB,
                 playback.replayGainMode,
                 playback.replayGainPreampDB,
-                volume,
             ],
         );
 
@@ -253,20 +252,18 @@ export const AudioPlayer = forwardRef(
         }, [audioDeviceId]);
 
         useEffect(() => {
-            if (webAudio && player1Source) {
-                if (player1 && currentPlayer === 1) {
-                    webAudio.gain.gain.setValueAtTime(calculateReplayGain(player1), 0);
-                }
+            if (webAudio && player1Source && player1 && currentPlayer === 1) {
+                const newVolume = calculateReplayGain(player1) * volume;
+                webAudio.gain.gain.setValueAtTime(newVolume, 0);
             }
-        }, [calculateReplayGain, currentPlayer, player1, player1Source, webAudio]);
+        }, [calculateReplayGain, currentPlayer, player1, player1Source, volume, webAudio]);
 
         useEffect(() => {
-            if (webAudio && player2Source) {
-                if (player2 && currentPlayer === 2) {
-                    webAudio.gain.gain.setValueAtTime(calculateReplayGain(player2), 0);
-                }
+            if (webAudio && player2Source && player2 && currentPlayer === 2) {
+                const newVolume = calculateReplayGain(player2) * volume;
+                webAudio.gain.gain.setValueAtTime(newVolume, 0);
             }
-        }, [calculateReplayGain, currentPlayer, player2, player2Source, webAudio]);
+        }, [calculateReplayGain, currentPlayer, player2, player2Source, volume, webAudio]);
 
         const handlePlayer1Start = useCallback(
             async (player: ReactPlayer) => {