nice touchups and now working cleaner with audio manager

components/Dashboard/Header.tsx

@@ -49,8 +49,6 @@ export default function Header() {
             currUser.email
           );
 
-        console.log(newTeams);
-
         setUserTeams(newTeams);
       } catch (error) {
         console.log("problem getting teams of this user");

components/Dashboard/TeamVoiceLine.tsx

@@ -19,6 +19,7 @@ import {
 import { Collections } from "../../services/collections";
 import { KeyCode } from "../../globals/keycode";
 import { Tooltip } from "antd";
+import { useAudioContext } from "../../contexts/audioContext";
 
 const userService = new UserService();
 const db = getFirestore();
@@ -67,16 +68,14 @@ function renderPulse(status: UserStatus) {
 
 const maxNumberOfKeyboardMappings: number = 9;
 
-const shortcutMappings = new Map(); // keycode number to the user id
-
 export default function TeamVoiceLine() {
+  const audioContext = useAudioContext();
   const router = useRouter();
   const { teamid } = router.query;
   const { team, user, userTeamMember, teamMembers } = useTeamDashboardContext();
   const [loading, setLoading] = useState<Boolean>(true);
 
   const [teamUsers, setTeamUsers] = useState<User[]>([]);
-  const [count, setCount] = useState<number>(0);
 
   useEffect(() => {
     const unsubs: Unsubscribe[] = [];
@@ -107,9 +106,6 @@ export default function TeamVoiceLine() {
 
             return;
           });
-
-          document.addEventListener("keydown", handleKeyboardShortcut);
-          document.addEventListener("keyup", handleKeyUp);
         }
       } catch (error) {
         console.log(error);
@@ -122,12 +118,19 @@ export default function TeamVoiceLine() {
 
     return () => {
       unsubs.map((listener) => listener());
-
-      document.removeEventListener("keydown", handleKeyboardShortcut);
-      document.removeEventListener("keyup", handleKeyUp);
     };
   }, []);
 
+  useEffect(() => {
+    teamUsers.forEach((tmUser, i) => {
+      // make sure we don't map a user if they are past the max allowed
+      if (i < maxNumberOfKeyboardMappings) {
+        let shortcut: number = i + 49; // 49 is what number 1 is on the keyboard
+        audioContext.addTeamShortcutBinding(shortcut, tmUser.id);
+      }
+    });
+  }, [teamUsers]);
+
   async function handleAdminRoute() {
     if (userTeamMember.role == TeamMemberRole.admin) {
       router.push("/teams/" + teamid + "/admin");
@@ -137,57 +140,10 @@ export default function TeamVoiceLine() {
     toast.error("You are not a team admin!");
   }
 
-  // SECTION: set up for shortcuts and recording and such
-  const [selectedTeammate, setSelectedTeammate] = useState<string>(); // id of selected teammate
-  const [isRecording, setIsRecording] = useState<Boolean>(false);
-
-  teamUsers.forEach((tmUser, i) => {
-    // make sure we don't map a user if they are past the max allowed
-    if (i < maxNumberOfKeyboardMappings) {
-      let shortcut: number = i + 49; // 49 is what number 1 is on the keyboard
-      shortcutMappings.set(shortcut, tmUser.id);
-    }
-  });
-
   useEffect(() => {
     // todo move all variable stuff like shortcut mappings here
   }, [teamUsers]);
 
-  function handleKeyUp(event) {
-    console.log("on key up");
-
-    // if was recording and released R, then stop recording
-    if (event.keyCode == KeyCode.R) {
-      console.log("stopped recording");
-      setIsRecording(false);
-      setSelectedTeammate(null);
-    }
-  }
-
-  function handleKeyboardShortcut(event) {
-    if (event.repeat) {
-      return;
-    }
-
-    console.log(event.keyCode);
-
-    // recording
-    if (event.keyCode == KeyCode.R) {
-      console.log("started recording");
-      setIsRecording(true);
-    }
-    // if we have a valid user for such a shortcut, then go ahead...otherwise
-    else if (shortcutMappings.has(event.keyCode)) {
-      setSelectedTeammate(shortcutMappings.get(event.keyCode));
-    } else if (event.keyCode == KeyCode.Escape) {
-      setSelectedTeammate(null);
-    } else {
-      toast("Invalid teammate selection.");
-    }
-
-    // todo if we press the same shortcut twice, deactive selected user
-  }
-
   function renderTeamMemberList() {
     // show loading skeleton if not yet got friend info
     if (loading) {
@@ -210,10 +166,12 @@ export default function TeamVoiceLine() {
     return teamUsers.map((tmember, i) => {
       return (
         <span
-          onClick={() => setSelectedTeammate(tmember.id)}
+          onClick={() => audioContext.setSelectedTeamMember(tmember.id)}
           key={i}
           className={`rounded flex flex-row items-center py-2 px-2 justify-items-start ease-in-out duration-300 hover:cursor-pointer ${
-            tmember.id == selectedTeammate ? "bg-white scale-150 z-20" : ""
+            tmember.id == audioContext.selectedTeammate
+              ? "bg-white scale-150 z-20"
+              : ""
           }`}
         >
           <span className="relative flex mr-2">
@@ -229,7 +187,7 @@ export default function TeamVoiceLine() {
           </span>
 
           <span className="flex flex-col mr-10">
-            {tmember.id == selectedTeammate ? (
+            {tmember.id == audioContext.selectedTeammate ? (
               <>
                 <span className="flex flex-row items-center space-x-2">
                   <span className="text-sm text-black font-bold">
@@ -256,7 +214,7 @@ export default function TeamVoiceLine() {
             )}
           </span>
 
-          {tmember.id == selectedTeammate ? (
+          {tmember.id == audioContext.selectedTeammate ? (
             <>
               <Tooltip title="send link">
                 <button className="ml-auto bg-gray-400 bg-opacity-80 p-2 rounded hover:bg-opacity-100">
@@ -271,7 +229,7 @@ export default function TeamVoiceLine() {
               </Tooltip>
 
               <Tooltip title="press and hold R to send audio message">
-                {isRecording ? (
+                {audioContext.isRecording ? (
                   <button className="ml-2 w-10 h-10 border-orange-400 bg-orange-400 border-2 bg-opacity-80 p-2 rounded hover:bg-opacity-100">
                     <span className="text-sm text-white font-bold">R</span>
                   </button>

contexts/audioContext.tsx

@@ -0,0 +1,97 @@
+import React, { useContext, useEffect, useState } from "react";
+import toast from "react-hot-toast";
+import { KeyCode } from "../globals/keycode";
+
+interface AudioContextInterface {
+  selectedTeammate: string; // can only have one selected
+  setSelectedTeamMember: Function;
+
+  teamShortcutMappings: {};
+  addTeamShortcutBinding: Function;
+
+  isRecording: Boolean; // can only record if someone is selected or maybe for an announcement
+
+  // inputDevice: string;
+
+  // outputDevice: string;
+
+  isMuted: Boolean;
+  isSilenceMode: Boolean; // won't automatically listen to notifications or sounds
+}
+
+const AudioContext = React.createContext<AudioContextInterface | null>(null);
+
+export default function AudioContextProvider({ children }) {
+  // SECTION: set up for shortcuts and recording and such
+  const [selectedTeammate, setSelectedTeamMember] = useState<string>(null); // id of selected teammate
+  const [isRecording, setIsRecording] = useState<Boolean>(false);
+
+  const [teamShortcutMappings, setTeamShortcutMappings] = useState<{}>({});
+
+  useEffect(() => {
+    document.addEventListener("keydown", handleKeyboardShortcut);
+    document.addEventListener("keyup", handleKeyUp);
+
+    return () => {
+      document.removeEventListener("keydown", handleKeyboardShortcut);
+      document.removeEventListener("keyup", handleKeyUp);
+    };
+  }, []);
+
+  function handleKeyUp(event) {
+    console.log("on key up");
+
+    // if was recording and released R, then stop recording
+    if (event.keyCode == KeyCode.R) {
+      console.log("stopped recording");
+      setIsRecording(false);
+      setSelectedTeamMember(null);
+    }
+  }
+
+  function handleKeyboardShortcut(event) {
+    if (event.repeat) {
+      return;
+    }
+
+    console.log(event.keyCode);
+
+    // recording
+    if (event.keyCode == KeyCode.R) {
+      console.log("started recording");
+      setIsRecording(true);
+    }
+    // if we have a valid user for such a shortcut, then go ahead...otherwise
+    else if (teamShortcutMappings[event.keyCode]) {
+      setSelectedTeamMember(teamShortcutMappings[event.keyCode]);
+    } else if (event.keyCode == KeyCode.Escape) {
+      setSelectedTeamMember(null);
+    } else {
+      toast("Invalid keyboard shortcut.");
+    }
+
+    // todo if we press the same shortcut twice, deactive selected user
+  }
+
+  function addTeamShortcutBinding(keyCode: number, userId: string) {
+    setTeamShortcutMappings((prevMap) => ({ ...prevMap, [keyCode]: [userId] }));
+  }
+
+  const value: AudioContextInterface = {
+    selectedTeammate,
+    setSelectedTeamMember,
+    addTeamShortcutBinding,
+    isRecording,
+    teamShortcutMappings,
+    isMuted: false,
+    isSilenceMode: false,
+  };
+
+  return (
+    <AudioContext.Provider value={value}>{children}</AudioContext.Provider>
+  );
+}
+
+export function useAudioContext() {
+  return useContext(AudioContext);
+}

pages/teams/[teamid].tsx

@@ -5,6 +5,7 @@ import Header from "../../components/Dashboard/Header";
 import TeamVoiceLine from "../../components/Dashboard/TeamVoiceLine";
 import BackgroundLayout from "../../components/Layouts/BackgroundLayout";
 import Loading from "../../components/Loading";
+import AudioContextProvider from "../../contexts/audioContext";
 import { useAuth } from "../../contexts/authContext";
 import {
   TeamDashboardContextProvider,
@@ -67,9 +68,11 @@ function TeamDashboard() {
 export default function TeamDashboardWrapper() {
   return (
     <TeamDashboardContextProvider>
-      <BackgroundLayout>
+      <AudioContextProvider>
-        <TeamDashboard />
+        <BackgroundLayout>
-      </BackgroundLayout>
+          <TeamDashboard />
+        </BackgroundLayout>
+      </AudioContextProvider>
     </TeamDashboardContextProvider>
   );
 }

services/teamService.tsx

@@ -268,9 +268,6 @@ export default class TeamService implements IService {
       email
     );
 
-    console.log(userTeamMembers);
-    console.log(userTeamMembersByEmail);
-
     // traverse through and get the teams for each
     var teams: Promise<Team>[];
     if (userTeamMembers) {