From 4ad4cff23f912cdc13488b121f5a873decef97e0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Thu, 14 Jul 2022 16:18:10 +0200
Subject: [PATCH] Add handling for local volume control
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/useCallFeed.js    |  7 +++++++
 src/video-grid/useMediaStream.ts | 16 +++++++++++++---
 2 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/src/video-grid/useCallFeed.js b/src/video-grid/useCallFeed.js
index b294f58..9ae4e86 100644
--- a/src/video-grid/useCallFeed.js
+++ b/src/video-grid/useCallFeed.js
@@ -27,6 +27,7 @@ function getCallFeedState(callFeed) {
       : true,
     videoMuted: callFeed ? callFeed.isVideoMuted() : true,
     audioMuted: callFeed ? callFeed.isAudioMuted() : true,
+    localVolume: callFeed ? callFeed.getLocalVolume() : 0,
     stream: callFeed ? callFeed.stream : undefined,
     purpose: callFeed ? callFeed.purpose : undefined,
   };
@@ -44,6 +45,10 @@ export function useCallFeed(callFeed) {
       setState((prevState) => ({ ...prevState, audioMuted, videoMuted }));
     }
 
+    function onLocalVolumeChanged(localVolume) {
+      setState((prevState) => ({ ...prevState, localVolume }))
+    }
+
     function onUpdateCallFeed() {
       setState(getCallFeedState(callFeed));
     }
@@ -51,6 +56,7 @@ export function useCallFeed(callFeed) {
     if (callFeed) {
       callFeed.on(CallFeedEvent.Speaking, onSpeaking);
       callFeed.on(CallFeedEvent.MuteStateChanged, onMuteStateChanged);
+      callFeed.on(CallFeedEvent.LocalVolumeChanged, onLocalVolumeChanged);
       callFeed.on(CallFeedEvent.NewStream, onUpdateCallFeed);
     }
 
@@ -63,6 +69,7 @@ export function useCallFeed(callFeed) {
           CallFeedEvent.MuteStateChanged,
           onMuteStateChanged
         );
+        callFeed.removeListener(CallFeedEvent.LocalVolumeChanged, onLocalVolumeChanged);
         callFeed.removeListener(CallFeedEvent.NewStream, onUpdateCallFeed);
       }
     };
diff --git a/src/video-grid/useMediaStream.ts b/src/video-grid/useMediaStream.ts
index 79e8292..1781b7a 100644
--- a/src/video-grid/useMediaStream.ts
+++ b/src/video-grid/useMediaStream.ts
@@ -33,7 +33,8 @@ declare global {
 export const useMediaStream = (
   stream: MediaStream,
   audioOutputDevice: string,
-  mute = false
+  mute = false,
+  localVolume: number,
 ): RefObject<MediaElement> => {
   const mediaRef = useRef<MediaElement>();
 
@@ -84,6 +85,13 @@ export const useMediaStream = (
     }
   }, [audioOutputDevice]);
 
+  useEffect(() => {
+    if (!mediaRef.current) return;
+    if (localVolume === null || localVolume === undefined) return;
+
+    mediaRef.current.volume = localVolume;
+  }, [localVolume])
+
   useEffect(() => {
     const mediaEl = mediaRef.current;
 
@@ -187,7 +195,8 @@ export const useSpatialMediaStream = (
   audioOutputDevice: string,
   audioContext: AudioContext,
   audioDestination: AudioNode,
-  mute = false
+  mute = false,
+  localVolume: number,
 ): [RefObject<Element>, RefObject<MediaElement>] => {
   const tileRef = useRef<Element>();
   const [spatialAudio] = useSpatialAudio();
@@ -195,7 +204,8 @@ export const useSpatialMediaStream = (
   const mediaRef = useMediaStream(
     stream,
     audioOutputDevice,
-    spatialAudio || mute
+    spatialAudio || mute,
+    localVolume,
   );
 
   const pannerNodeRef = useRef<PannerNode>();