From 0c3dab8dd29d2ffd65035640a48a95b684ad09bb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Thu, 28 Jul 2022 09:16:49 +0200
Subject: [PATCH] Add `GainNode`
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
---
 src/video-grid/useMediaStream.ts | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/video-grid/useMediaStream.ts b/src/video-grid/useMediaStream.ts
index b9cb4309..d3df2372 100644
--- a/src/video-grid/useMediaStream.ts
+++ b/src/video-grid/useMediaStream.ts
@@ -208,6 +208,7 @@ export const useSpatialMediaStream = (
     localVolume
   );
 
+  const gainNodeRef = useRef<GainNode>();
   const pannerNodeRef = useRef<PannerNode>();
   const sourceRef = useRef<MediaStreamAudioSourceNode>();
 
@@ -224,12 +225,18 @@ export const useSpatialMediaStream = (
           refDistance: 3,
         });
       }
+      if (!gainNodeRef.current) {
+        gainNodeRef.current = new GainNode(audioContext, {
+          gain: localVolume,
+        });
+      }
       if (!sourceRef.current) {
         sourceRef.current = audioContext.createMediaStreamSource(stream);
       }
 
       const tile = tileRef.current;
       const source = sourceRef.current;
+      const gainNode = gainNodeRef.current;
       const pannerNode = pannerNodeRef.current;
 
       const updatePosition = () => {
@@ -244,8 +251,9 @@ export const useSpatialMediaStream = (
         pannerNodeRef.current.positionZ.value = -2;
       };
 
+      gainNode.gain.value = localVolume;
       updatePosition();
-      source.connect(pannerNode).connect(audioDestination);
+      source.connect(gainNode).connect(pannerNode).connect(audioDestination);
       // HACK: We abuse the CSS transitionrun event to detect when the tile
       // moves, because useMeasure, IntersectionObserver, etc. all have no
       // ability to track changes in the CSS transform property
@@ -254,10 +262,11 @@ export const useSpatialMediaStream = (
       return () => {
         tile.removeEventListener("transitionrun", updatePosition);
         source.disconnect();
+        gainNode.disconnect();
         pannerNode.disconnect();
       };
     }
-  }, [stream, spatialAudio, audioContext, audioDestination, mute]);
+  }, [stream, spatialAudio, audioContext, audioDestination, mute, localVolume]);
 
   return [tileRef, mediaRef];
 };