Add handling for local volume control

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

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);
       }
     };

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>();