adding devices and all of the little enhancements

components/Dashboard/Header.tsx

@@ -13,13 +13,15 @@ import {
   FaAngleDown,
   FaCheck,
   FaDatabase,
+  FaMicrophoneAltSlash,
+  FaVolumeMute,
 } from "react-icons/fa";
 import { useTeamDashboardContext } from "../../contexts/teamDashboardContext";
 import router from "next/router";
 import Moment from "react-moment";
 import { User } from "../../models/user";
 import { generateGreetings } from "../../helpers/dateTime";
-import { Dropdown, Menu } from "antd";
+import { Dropdown, Menu, Tooltip } from "antd";
 import { useRouter } from "next/router";
 import { TeamMemberRole, TeamMemberStatus } from "../../models/teamMember";
 import { toast } from "react-hot-toast";
@@ -28,6 +30,7 @@ import { useEffect, useState } from "react";
 import TeamService from "../../services/teamService";
 import { Team } from "../../models/team";
 import Loading from "../Loading";
+import { useAudioContext } from "../../contexts/audioContext";
 
 const teamService = new TeamService();
 
@@ -36,9 +39,25 @@ export default function Header() {
   const { team, user, userTeamMember } = useTeamDashboardContext();
   const router = useRouter();
   const { teamid } = router.query;
+  const {
+    hasRecPermit,
+
+    audioInputDeviceId,
+    audioOutputDeviceId,
+    selectAudioOutput,
+    selectAudioInput,
+    inputDevices,
+    outputDevices,
+
+    isMuted,
+    isSilenceMode,
+    muteOrUnmute,
+    silenceOrLivenMode,
+  } = useAudioContext();
 
   const [usersTeams, setUserTeams] = useState<Team[]>(null);
 
+  // get team data for the team dropdown
   useEffect(() => {
     (async function () {
       try {
@@ -79,6 +98,28 @@ export default function Header() {
     toast.error("You are not a team admin!");
   }
 
+  const searchBar = (
+    <div className="pt-2 flex flex-row relative items-center">
+      <button type="submit" className="absolute left-0 top-0 mt-5 ml-5">
+        <FaSearch className="text-white" />
+      </button>
+
+      <input
+        className=" bg-white bg-opacity-40 h-10 px-5 pl-10 pr-16 rounded-lg text-white text-sm focus:outline-none"
+        type="search"
+        name="search"
+        placeholder="Search"
+      />
+
+      <button
+        className="absolute right-1 rounded-lg py-1 px-2 ml-1 
+                                    shadow-md text-center text-white text-sm font-bold"
+      >
+        CTRL + K
+      </button>
+    </div>
+  );
+
   const TeamsMenu = (
     <Menu key={2} title="teams">
       <Menu.Item onClick={handleAdminRoute} key={1} icon={<FaDatabase />}>
@@ -130,28 +171,82 @@ export default function Header() {
     </Menu>
   );
 
-  const searchBar = (
+  const audioInputDropMenu = (
-    <div className="pt-2 flex flex-row relative items-center">
+    <Menu title="audio input">
-      <button type="submit" className="absolute left-0 top-0 mt-5 ml-5">
+      {inputDevices.map((device, i) => {
-        <FaSearch className="text-white" />
+        return (
-      </button>
+          <Menu.Item
-
+            key={device.deviceId}
-      <input
+            icon={device.deviceId == audioInputDeviceId ? <FaCheck /> : <></>}
-        className=" bg-white bg-opacity-40 h-10 px-5 pl-10 pr-16 rounded-lg text-white text-sm focus:outline-none"
+          >
-        type="search"
+            <button>{device.label}</button>
-        name="search"
+          </Menu.Item>
-        placeholder="Search"
+        );
-      />
+      })}
-
+    </Menu>
-      <button
-        className="absolute right-1 rounded-lg py-1 px-2 ml-1 
-                                    shadow-md text-center text-white text-sm font-bold"
-      >
-        CTRL + K
-      </button>
-    </div>
   );
 
+  const audioOutputDropMenu = (
+    <Menu title="audio ouput">
+      {outputDevices.map((device, i) => {
+        return (
+          <Menu.Item
+            key={device.deviceId}
+            icon={device.deviceId == audioOutputDeviceId ? <FaCheck /> : <></>}
+          >
+            <button>{device.label}</button>
+          </Menu.Item>
+        );
+      })}
+    </Menu>
+  );
+
+  function renderAudioInput() {
+    if (!hasRecPermit) {
+      return (
+        <Tooltip title="enable mic permissions">
+          <span>
+            <FaMicrophoneAltSlash className="text-lg text-gray-400 hover:text-white ease-in-out duration-300 hover:scale-110 hover:cursor-pointer" />
+          </span>
+        </Tooltip>
+      );
+    }
+
+    if (isMuted) {
+      return (
+        <span onClick={muteOrUnmute}>
+          <FaMicrophoneAltSlash className="text-lg text-gray-400 hover:text-white ease-in-out duration-300 hover:scale-110 hover:cursor-pointer" />
+        </span>
+      );
+    }
+
+    return (
+      <Dropdown overlay={audioInputDropMenu}>
+        <span onClick={muteOrUnmute}>
+          <FaMicrophoneAlt className="text-lg text-gray-400 hover:text-white ease-in-out duration-300 hover:scale-110 hover:cursor-pointer" />
+        </span>
+      </Dropdown>
+    );
+  }
+
+  function renderAudioOutput() {
+    if (isSilenceMode) {
+      return (
+        <span onClick={silenceOrLivenMode}>
+          <FaVolumeMute className="text-lg text-gray-400 hover:text-white ease-in-out duration-300 hover:scale-110 hover:cursor-pointer" />
+        </span>
+      );
+    }
+
+    return (
+      <Dropdown overlay={audioOutputDropMenu}>
+        <span onClick={silenceOrLivenMode}>
+          <FaHeadphonesAlt className="text-lg text-gray-400 hover:text-white ease-in-out duration-300 hover:scale-110 hover:cursor-pointer" />
+        </span>
+      </Dropdown>
+    );
+  }
+
   const today = new Date();
   const periodOfDay = generateGreetings();
   return (
@@ -180,9 +275,11 @@ export default function Header() {
       <span className="flex flex-row items-center space-x-5">
         {/* search bar */}
 
-        <FaBell className="text-lg text-gray-400 hover:text-white ease-in-out duration-300 hover:scale-110 hover:cursor-pointer" />
+        {/* <FaBell className="text-lg text-gray-400 hover:text-white ease-in-out duration-300 hover:scale-110 hover:cursor-pointer" /> */}
-        <FaHeadphonesAlt className="text-lg text-gray-400 hover:text-white ease-in-out duration-300 hover:scale-110 hover:cursor-pointer" />
+
-        <FaMicrophoneAlt className="text-lg text-gray-400 hover:text-white ease-in-out duration-300 hover:scale-110 hover:cursor-pointer" />
+        {renderAudioOutput()}
+
+        {renderAudioInput()}
 
         {/* teams menu */}
 

contexts/audioContext.tsx

@@ -5,7 +5,7 @@ import MicRecorder from "mic-recorder-to-mp3";
 
 interface AudioContextInterface {
   selectedTeammate: string; // can only have one selected
-  setSelectedTeamMember: Function;
+  selectTeamMember: Function;
 
   teamShortcutMappings: {};
   addTeamShortcutBinding: Function;
@@ -18,14 +18,35 @@ interface AudioContextInterface {
 
   isMuted: Boolean;
   isSilenceMode: Boolean; // won't automatically listen to notifications or sounds
+  muteOrUnmute: Function;
+  silenceOrLivenMode: Function;
 
   hasRecPermit: Boolean; // permission to record or not
+
+  audioInputDeviceId: string;
+  audioOutputDeviceId: string;
+
+  selectAudioOutput: Function;
+  selectAudioInput: Function;
+
+  inputDevices: MediaDeviceInfo[];
+  outputDevices: MediaDeviceInfo[];
 }
 
 const AudioContext = React.createContext<AudioContextInterface | null>(null);
 
 const Mp3Recorder = new MicRecorder({ bitRate: 128 });
 
+function stopBothVideoAndAudio(stream) {
+  stream.getTracks().forEach(function (track) {
+    if (track.readyState == "live") {
+      track.stop();
+
+      console.log("stopped playing anything");
+    }
+  });
+}
+
 export default function AudioContextProvider({ children }) {
   // SECTION: set up for shortcuts and recording and such
   const [selectedTeammate, setSelectedTeamMember] = useState<string>(null); // id of selected teammate
@@ -33,20 +54,99 @@ export default function AudioContextProvider({ children }) {
   const [hasRecPermit, setHasRecPermit] = useState<Boolean>(false);
 
   const [teamShortcutMappings, setTeamShortcutMappings] = useState<{}>(null);
+  const [audioInputDeviceId, setAudioInputDevice] = useState<string>(null); // device id
+  const [audioOutputDeviceId, setAudioOutputDevice] = useState<string>(null); // device id
+
+  const [inputDevices, setInputDevices] = useState<MediaDeviceInfo[]>([]);
+  const [outputDevices, setOutputDevices] = useState<MediaDeviceInfo[]>([]);
+
+  const [isMuted, setIsMuted] = useState<Boolean>(false);
+  const [isSilenceMode, setIseSilenceMode] = useState<Boolean>(false);
+
+  const value: AudioContextInterface = {
+    selectedTeammate,
+    selectTeamMember,
+    addTeamShortcutBinding,
+    isRecording,
+    teamShortcutMappings,
+
+    isMuted,
+    isSilenceMode,
+    muteOrUnmute,
+    silenceOrLivenMode,
+
+    hasRecPermit,
+
+    audioInputDeviceId,
+    audioOutputDeviceId,
+    selectAudioOutput,
+    selectAudioInput,
+
+    inputDevices,
+    outputDevices,
+  };
+
+  function muteOrUnmute() {
+    setIsMuted((prevVal) => !prevVal);
+  }
+
+  function silenceOrLivenMode() {
+    setIseSilenceMode((prevVal) => !prevVal);
+  }
+
+  function selectAudioOutput(deviceId: string) {
+    setAudioOutputDevice(deviceId);
+  }
+
+  function selectAudioInput(deviceId: string) {
+    setAudioInputDevice(deviceId);
+  }
+
+  // set up audio
+  useEffect(() => {
+    (async function () {
+      try {
+        const devices = await navigator.mediaDevices.enumerateDevices();
+
+        const inputDevices: MediaDeviceInfo[] = devices.filter(
+          (d) => d.kind == "audioinput"
+        );
+
+        setAudioInputDevice(inputDevices ? inputDevices[0].deviceId : null);
+        setInputDevices(inputDevices);
+
+        const outputDevices: MediaDeviceInfo[] = devices.filter(
+          (d) => d.kind == "audiooutput"
+        );
+
+        setAudioOutputDevice(outputDevices ? outputDevices[0].deviceId : null);
+        setOutputDevices(outputDevices);
+        console.log(devices);
+      } catch (e) {
+        console.log(e);
+        toast.error("Problem in setting up audio devices");
+      }
+    })();
+  }, []);
 
   useEffect(() => {
     navigator.mediaDevices
-      .getUserMedia({ audio: true })
+      .getUserMedia({ audio: { deviceId: audioInputDeviceId } })
-      .then(() => {
+      .then((stream) => {
+        // stop playing anything
+        stopBothVideoAndAudio(stream);
+
         console.log("Permission Granted");
         setHasRecPermit(true);
       })
-      .catch(() => {
+      .catch((e) => {
         console.log("Permission Denied");
+        toast.error("Please make sure that you have connected a microphone.");
         setHasRecPermit(false);
       });
-  }, []);
+  }, [audioInputDeviceId]); // change it everytime we change the input device
 
+  // shortcut handlers need to be updated as the function has to have the fresh state
   useEffect(() => {
     document.addEventListener("keydown", handleKeyboardShortcut);
     document.addEventListener("keyup", handleKeyUp);
@@ -55,10 +155,10 @@ export default function AudioContextProvider({ children }) {
       document.removeEventListener("keydown", handleKeyboardShortcut);
       document.removeEventListener("keyup", handleKeyUp);
     };
-  }, [teamShortcutMappings]);
+  }, [teamShortcutMappings, selectedTeammate]);
 
   // SECTION: recording
-  function startRecording() {
+  async function startRecording() {
     if (!hasRecPermit) {
       toast.error("You did not allow recording permission!");
     } else {
@@ -73,7 +173,7 @@ export default function AudioContextProvider({ children }) {
   }
 
   // everything to do with audio file
-  function stopRecording() {
+  async function stopRecording() {
     Mp3Recorder.stop()
       .getMp3()
       .then(([buffer, blob]) => {
@@ -95,13 +195,15 @@ export default function AudioContextProvider({ children }) {
   function handleKeyUp(event) {
     console.log("on key up");
 
+    console.log(selectedTeammate); // use this to send the message to the right person
+
     // if was recording and released R, then stop recording
     if (event.keyCode == KeyCode.R && selectedTeammate) {
       console.log("stopped recording");
       setIsRecording(false);
       setSelectedTeamMember(null);
 
-      // stopRecording();
+      stopRecording();
     }
   }
 
@@ -112,13 +214,16 @@ export default function AudioContextProvider({ children }) {
 
     console.log(event.keyCode);
     console.log(selectedTeammate);
-    console.log(teamShortcutMappings);
 
     // recording
     if (event.keyCode == KeyCode.R && selectedTeammate) {
+      if (!audioInputDeviceId) {
+        toast.error("No microphone selected");
+      }
+
       console.log("started recording");
       setIsRecording(true);
-      // startRecording();
+      startRecording();
     }
     // if we have a valid user for such a shortcut, then go ahead...otherwise
     else if (teamShortcutMappings[event.keyCode]) {
@@ -136,16 +241,9 @@ export default function AudioContextProvider({ children }) {
     setTeamShortcutMappings((prevMap) => ({ ...prevMap, [keyCode]: userId }));
   }
 
-  const value: AudioContextInterface = {
+  function selectTeamMember(userId: string) {
-    selectedTeammate,
+    setSelectedTeamMember(userId);
-    setSelectedTeamMember,
+  }
-    addTeamShortcutBinding,
-    isRecording,
-    teamShortcutMappings,
-    isMuted: false,
-    isSilenceMode: false,
-    hasRecPermit,
-  };
 
   console.log(value);