From e2972e8ed054bef146d49fe0689668e8835445ea Mon Sep 17 00:00:00 2001 From: Arjun Patel Date: Sat, 15 Jan 2022 14:49:23 -0800 Subject: [PATCH] trying to fix issues with keyboard shortcut --- components/Dashboard/TeamVoiceLine.tsx | 114 +++++++++++++++++++++---- pages/teams/[teamid]/admin.tsx | 14 +-- 2 files changed, 107 insertions(+), 21 deletions(-) diff --git a/components/Dashboard/TeamVoiceLine.tsx b/components/Dashboard/TeamVoiceLine.tsx index bfeea1d..9f8ff13 100644 --- a/components/Dashboard/TeamVoiceLine.tsx +++ b/components/Dashboard/TeamVoiceLine.tsx @@ -1,6 +1,7 @@ import { useRouter } from "next/router"; -import { FaPlus } from "react-icons/fa"; +import { FaPlus, FaExternalLinkAlt, FaLink } from "react-icons/fa"; import { IoPulseOutline, IoRemoveOutline, IoTimer } from "react-icons/io5"; +import { MdScreenShare } from "react-icons/md"; import { BsThreeDots } from "react-icons/bs"; import { useTeamDashboardContext } from "../../contexts/teamDashboardContext"; import { User, UserStatus } from "../../models/user"; @@ -16,13 +17,13 @@ import { Unsubscribe, } from "firebase/firestore"; import { Collections } from "../../services/collections"; +import { KeyCode } from "../../globals/keycode"; +import { Tooltip } from "antd"; const userService = new UserService(); const db = getFirestore(); function statusBubble(status: UserStatus) { - console.log(status); - switch (status) { case UserStatus.online: return ( @@ -64,6 +65,8 @@ function renderPulse(status: UserStatus) { } } +const maxNumberOfKeyboardMappings: number = 9; + export default function TeamVoiceLine() { const router = useRouter(); const { teamid } = router.query; @@ -102,6 +105,9 @@ export default function TeamVoiceLine() { return; }); + + document.addEventListener("keypress", handleKeyboardShortcut); + document.addEventListener("keydown", handleRecording); } } catch (error) { console.log(error); @@ -114,6 +120,9 @@ export default function TeamVoiceLine() { return () => { unsubs.map((listener) => listener()); + + document.removeEventListener("keypress", handleKeyboardShortcut); + document.removeEventListener("keydown", handleRecording); }; }, []); @@ -126,6 +135,40 @@ 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 shortcutMappings = new Map(); // keycode number to the user id + 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); + } + }); + + function handleRecording(event) { + // recording + if (event.keyCode == KeyCode.R) { + console.log("recording"); + } + } + + function handleKeyboardShortcut(event) { + console.log(event.keyCode); + + // if we have a valid user for such a shortcut, then go ahead...otherwise + if (shortcutMappings.has(event.keyCode)) { + setSelectedTeammate(shortcutMappings.get(event.keyCode)); + } else if (event.keyCode == KeyCode.Escape) { + setSelectedTeammate(null); + } else { + console.log("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) { @@ -148,10 +191,11 @@ export default function TeamVoiceLine() { return teamUsers.map((tmember, i) => { return ( setSelectedTeammate(tmember.id)} key={i} - className={ - "flex flex-row items-center py-2 px-2 justify-items-start ease-in-out duration-300" - } + 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" : "" + }`} > @@ -166,18 +210,58 @@ export default function TeamVoiceLine() { - - - {tmember.nickName} - - + {tmember.id == selectedTeammate ? ( + <> + + + {tmember.nickName} + + - - {tmember.teamRole} - + + {tmember.teamRole} + + + ) : ( + <> + + + {tmember.nickName} + + + + + {tmember.teamRole} + + + )} - {renderPulse(tmember.userStatus)} + {tmember.id == selectedTeammate ? ( + <> + + + + + + + + + + + + + + + ) : ( + <>{renderPulse(tmember.userStatus)} + )} ); }); diff --git a/pages/teams/[teamid]/admin.tsx b/pages/teams/[teamid]/admin.tsx index 81262c0..04c4633 100644 --- a/pages/teams/[teamid]/admin.tsx +++ b/pages/teams/[teamid]/admin.tsx @@ -99,23 +99,25 @@ function TeamAdmin() { } try { - const team = new Team(); - team.name = teamName; - team.createdByUserId = user.id; - team.status = TeamStatus.created; + const updatedTeam = new Team(); + updatedTeam.id = team.id; + updatedTeam.name = teamName; + updatedTeam.createdByUserId = user.id; + updatedTeam.status = TeamStatus.created; if (companySite != initialSite) { // make sure to put null in database for the team - team.companySite = companySite; + updatedTeam.companySite = companySite; } // update team name and company site if it changed - await teamService.updateTeam(team); + await teamService.updateTeam(updatedTeam); // take user back to team dashboard router.push("/teams/" + team.id); } catch (error) { setError(error.message); + console.log(error); } setLoading(false);