From c9108a6d5009f316984e378635c709412d3c2b2a Mon Sep 17 00:00:00 2001 From: Arjun Patel Date: Sat, 15 Jan 2022 19:33:14 -0800 Subject: [PATCH] nice touchups and now working cleaner with audio manager --- components/Dashboard/Header.tsx | 2 - components/Dashboard/TeamVoiceLine.tsx | 80 +++++---------------- contexts/audioContext.tsx | 97 ++++++++++++++++++++++++++ pages/teams/[teamid].tsx | 9 ++- services/teamService.tsx | 3 - 5 files changed, 122 insertions(+), 69 deletions(-) create mode 100644 contexts/audioContext.tsx diff --git a/components/Dashboard/Header.tsx b/components/Dashboard/Header.tsx index 7fb77d1..aaa8193 100644 --- a/components/Dashboard/Header.tsx +++ b/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"); diff --git a/components/Dashboard/TeamVoiceLine.tsx b/components/Dashboard/TeamVoiceLine.tsx index 1aa2cd3..fcc4b91 100644 --- a/components/Dashboard/TeamVoiceLine.tsx +++ b/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(true); const [teamUsers, setTeamUsers] = useState([]); - const [count, setCount] = useState(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(); // id of selected teammate - const [isRecording, setIsRecording] = useState(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 ( 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" + : "" }`} > @@ -229,7 +187,7 @@ export default function TeamVoiceLine() { - {tmember.id == selectedTeammate ? ( + {tmember.id == audioContext.selectedTeammate ? ( <> @@ -256,7 +214,7 @@ export default function TeamVoiceLine() { )} - {tmember.id == selectedTeammate ? ( + {tmember.id == audioContext.selectedTeammate ? ( <> diff --git a/contexts/audioContext.tsx b/contexts/audioContext.tsx new file mode 100644 index 0000000..e5346e8 --- /dev/null +++ b/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(null); + +export default function AudioContextProvider({ children }) { + // SECTION: set up for shortcuts and recording and such + const [selectedTeammate, setSelectedTeamMember] = useState(null); // id of selected teammate + const [isRecording, setIsRecording] = useState(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 ( + {children} + ); +} + +export function useAudioContext() { + return useContext(AudioContext); +} diff --git a/pages/teams/[teamid].tsx b/pages/teams/[teamid].tsx index 58386e9..298b10c 100644 --- a/pages/teams/[teamid].tsx +++ b/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 ( - - - + + + + + ); } diff --git a/services/teamService.tsx b/services/teamService.tsx index 55adcb0..fbec112 100644 --- a/services/teamService.tsx +++ b/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[]; if (userTeamMembers) {