Add Stereo Input toggle in my avatar's context menu

Author: zfox23

examples/nodejs/djBot/package-lock.json

@@ -892,7 +892,8 @@ $bottom-controls-container-height: 72px;
 
 .echoCancellation,
 .agc,
-.noiseSuppression {
+.noiseSuppression,
+.stereoInput {
     &Container {
         display: flex;
         width: 100%;

experiments/nodejs/Spatial-Audio-Rooms/src/client/css/controls.scss

@@ -67,7 +67,7 @@ export class ConnectionController {
             // Set up our `HiFiCommunicator` object and supply our input media stream.
             console.log("Setting input audio stream on `this.hifiCommunicator`...");
             try {
-                await this.hifiCommunicator.setInputAudioMediaStream(avDevicesController.inputAudioMediaStream);
+                await this.hifiCommunicator.setInputAudioMediaStream(avDevicesController.inputAudioMediaStream, userDataController.myAvatar.myUserData.stereoInput);
                 await this.hifiCommunicator.setInputAudioMuted(userDataController.myAvatar.myUserData.isMuted);
                 resolve(avDevicesController.inputAudioMediaStream);
             } catch (e) {

experiments/nodejs/Spatial-Audio-Rooms/src/client/ts/connection/ConnectionController.ts

@@ -405,6 +405,33 @@ export class UIController {
         noiseSuppressionContainer.appendChild(noiseSuppressionCheckboxLabel);
     }
 
+    generateStereoInputUI(userData: UserData) {
+        if (userData.visitIDHash !== userDataController.myAvatar.myUserData.visitIDHash || typeof (userData.stereoInput) !== "boolean") {
+            return;
+        }
+
+        let stereoInputContainer = document.createElement("div");
+        stereoInputContainer.classList.add("stereoInputContainer");
+        this.avatarContextMenu.appendChild(stereoInputContainer);
+
+        let stereoInputCheckbox = document.createElement("input");
+        stereoInputCheckbox.id = "stereoInputCheckbox";
+        stereoInputCheckbox.classList.add("stereoInputCheckbox");
+        stereoInputCheckbox.type = "checkbox";
+        stereoInputCheckbox.checked = userData.stereoInput;
+        stereoInputCheckbox.addEventListener("click", (e) => {
+            let newStereoInputStatus = (<HTMLInputElement>e.target).checked;
+            userInputController.setStereoInputStatus(newStereoInputStatus)
+        });
+        stereoInputContainer.appendChild(stereoInputCheckbox);
+
+        let stereoInputCheckboxLabel = document.createElement("label");
+        stereoInputCheckboxLabel.setAttribute("for", "stereoInputCheckbox");
+        stereoInputCheckboxLabel.classList.add("stereoInputCheckboxLabel");
+        stereoInputCheckboxLabel.innerHTML = "Stereo Input";
+        stereoInputContainer.appendChild(stereoInputCheckboxLabel);
+    }
+
     generateUserGainForThisConnectionUI(userData: UserData) {
         let hifiCommunicator = connectionController.hifiCommunicator;
 
@@ -546,6 +573,7 @@ export class UIController {
         this.generateEchoCancellationUI(userData);
         this.generateAGCUI(userData);
         this.generateNoiseSuppressionUI(userData);
+        this.generateStereoInputUI(userData);
         this.generateUserGainForThisConnectionUI(userData);
         this.generateHiFiGainUI(userData);
         this.generateVolumeThresholdUI(userData);

experiments/nodejs/Spatial-Audio-Rooms/src/client/ts/ui/UIController.ts

@@ -449,6 +449,11 @@ export class UserInputController {
         connectionController.setNewInputAudioMediaStream();
     }
 
+    setStereoInputStatus(newStereoInputStatus: boolean) {
+        userDataController.myAvatar.myUserData.stereoInput = newStereoInputStatus;
+        connectionController.setNewInputAudioMediaStream();
+    }
+
     setHiFiGainFromSliderValue(newHiFiGainSliderValue: string) {
         let newHiFiGain = uiController.hiFiGainFromSliderValue(newHiFiGainSliderValue);
 

experiments/nodejs/Spatial-Audio-Rooms/src/client/ts/ui/UserInputController.ts

@@ -41,6 +41,7 @@ export interface UserData {
     echoCancellationEnabled?: boolean;
     agcEnabled?: boolean;
     noiseSuppressionEnabled?: boolean;
+    stereoInput?: boolean;
     currentWatchPartyRoomName?: string;
     tempData?: TempUserData;
 }
@@ -90,6 +91,7 @@ class MyAvatar {
             echoCancellationEnabled: false,
             agcEnabled: false,
             noiseSuppressionEnabled: false,
+            stereoInput: false,
             currentWatchPartyRoomName: undefined,
             tempData: {},
         };

experiments/nodejs/Spatial-Audio-Rooms/src/client/ts/userData/UserDataController.ts

@@ -76,7 +76,7 @@ export class Utilities {
 
     static hexColorFromString(string: string) {
         if (!string) {
-            return;
+            return "#FFFFFF";
         }
 
         let hash = 0;

experiments/nodejs/Spatial-Audio-Rooms/src/client/ts/utilities/Utilities.ts

@@ -0,0 +1,19 @@
+{
+    "name": "Website Demo Config",
+    "comments": "A config JSON. Yay",
+    "configJSONVersion": "v1.0.0",
+    "theme": "light",
+    "backgroundColorHex": "#FFFFFF",
+    "rooms": [
+        {
+            "name": " ",
+            "roomCenter": { "x": 0, "z": 0 },
+            "seatingCenter": { "x": 0, "z": 0 },
+            "dimensions": { "x": 13, "z": 7.3125 },
+            "seatingRadiusM": 0.00001,
+            "roomImageSRC": "/spatial-audio-rooms/rooms/website-demo.png",
+            "numSeatsInRoom": 1
+        }
+    ],
+    "landmarks": []
+}