having one solution for different components of app
This commit is contained in:
Arjun Patel
@@ -0,0 +1,245 @@
|
||||
import { useRouter } from "next/router";
|
||||
import { FaPlus, FaBackward, FaArrowCircleDown } from "react-icons/fa";
|
||||
import { BsThreeDots } from "react-icons/bs";
|
||||
import { useTeamDashboardContext } from "../../contexts/teamDashboardContext";
|
||||
import { useEffect, useState } from "react";
|
||||
import { toast } from "react-hot-toast";
|
||||
import { TeamMemberRole, TeamMemberStatus } from "../../models/teamMember";
|
||||
import { getFirestore } from "firebase/firestore";
|
||||
import { Tooltip } from "antd";
|
||||
import {
|
||||
ShowModalType,
|
||||
useKeyboardContext,
|
||||
} from "../../contexts/keyboardContext";
|
||||
import UserStatusBubble, { UserPulse } from "../UserStatusBubble";
|
||||
import { useAuth } from "../../contexts/authContext";
|
||||
import PowerPlayer from "../Modals/PowerPlayer";
|
||||
|
||||
const maxNumberOfKeyboardMappings: number = 9;
|
||||
|
||||
export default function TeamVoiceLine() {
|
||||
const { currUser } = useAuth();
|
||||
const {
|
||||
addTeamShortcutBinding,
|
||||
selectTeamMember,
|
||||
selectedTeammate,
|
||||
isRecording,
|
||||
handleModalType,
|
||||
} = useKeyboardContext();
|
||||
const router = useRouter();
|
||||
const { teamid } = router.query;
|
||||
const { userTeamMember, teamUsers, messagesByTeamMate } =
|
||||
useTeamDashboardContext();
|
||||
|
||||
// todo use a global is loading
|
||||
const [loading, setLoading] = useState<Boolean>(false);
|
||||
|
||||
// set up shortcuts for each teammate
|
||||
useEffect(() => {
|
||||
// create shortcuts
|
||||
if (!teamUsers) {
|
||||
console.log("no team members to map to shortcuts");
|
||||
return;
|
||||
}
|
||||
|
||||
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
|
||||
addTeamShortcutBinding(shortcut, tmUser.id);
|
||||
}
|
||||
});
|
||||
}, [teamUsers]);
|
||||
|
||||
async function handleAdminRoute() {
|
||||
if (userTeamMember.role == TeamMemberRole.admin) {
|
||||
router.push("/teams/" + teamid + "/admin");
|
||||
return;
|
||||
}
|
||||
|
||||
toast.error("You are not a team admin!");
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
// todo move all variable stuff like shortcut mappings here
|
||||
}, [teamUsers]);
|
||||
|
||||
function renderTeamMemberList() {
|
||||
// show loading skeleton if not yet got friend info
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="w-full h-24 flex animate-pulse flex-row items-center justify-center space-x-5">
|
||||
<div className="w-12 bg-gray-300 h-12 rounded-full "></div>
|
||||
<div className="flex flex-col space-y-3">
|
||||
<div className="w-60 bg-gray-300 h-6 rounded-md "></div>
|
||||
<div className="w-40 bg-gray-300 h-6 rounded-md "></div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// if not teammates, stale state message to tell admin to add people
|
||||
if (!teamUsers) {
|
||||
return <span className="text-gray-300">Please add team members.</span>;
|
||||
}
|
||||
|
||||
return teamUsers.map((tmember, i) => {
|
||||
var isMessageIncoming: boolean = false;
|
||||
if (
|
||||
messagesByTeamMate.has(tmember.id) &&
|
||||
messagesByTeamMate.get(tmember.id)[0]?.receiverUserId == currUser.uid
|
||||
) {
|
||||
isMessageIncoming = true;
|
||||
}
|
||||
|
||||
var customSelectClasses: string = "";
|
||||
if (tmember.id == selectedTeammate) {
|
||||
customSelectClasses = "bg-white scale-100 z-20 ";
|
||||
} else if (isMessageIncoming) {
|
||||
customSelectClasses = "bg-orange-500 bg-opacity-20";
|
||||
}
|
||||
|
||||
return (
|
||||
<span
|
||||
onClick={() => selectTeamMember(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 ${customSelectClasses} hover:bg-gray-200 hover:bg-opacity-20`}
|
||||
>
|
||||
<span
|
||||
className={`relative flex mr-2 transition-all duration-500 ${
|
||||
tmember.id == selectedTeammate ? "scale-110" : ""
|
||||
}`}
|
||||
>
|
||||
<span className="bg-gray-200 bg-opacity-30 rounded-full shadow-md absolute w-full h-full"></span>
|
||||
|
||||
<UserStatusBubble status={tmember.userStatus} />
|
||||
|
||||
<img
|
||||
src={tmember.avatarUrl}
|
||||
alt="asdf"
|
||||
className="rounded-full w-12"
|
||||
/>
|
||||
</span>
|
||||
|
||||
<span className="flex flex-col">
|
||||
{tmember.id == selectedTeammate ? (
|
||||
<>
|
||||
<span className="flex flex-row items-center space-x-2">
|
||||
<span className="text-md text-black font-bold">
|
||||
{tmember.nickName}
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<span className={"text-xs span-sans text-gray-500"}>
|
||||
{tmember.teamRole}{" "}
|
||||
</span>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<span className="flex flex-row items-center space-x-2">
|
||||
<span className="text-sm text-white font-bold">
|
||||
{tmember.nickName}
|
||||
</span>
|
||||
|
||||
<span className="text-white shadow-xl font-bold px-3 py-1 rounded">
|
||||
{/* keyboard shortcuts start from 1 */}
|
||||
{i + 1}
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<span className={"text-xs span-sans text-gray-300"}>
|
||||
{tmember.teamRole}
|
||||
</span>
|
||||
</>
|
||||
)}
|
||||
</span>
|
||||
|
||||
{tmember.id == selectedTeammate ? (
|
||||
<>
|
||||
<Tooltip title="press and hold R to send audio message">
|
||||
{isRecording ? (
|
||||
<button className="ml-auto shadow-lg w-10 h-10 border-orange-400 bg-orange-400 bg-opacity-80 p-2 rounded hover:bg-opacity-100">
|
||||
<span className="text-sm text-white font-bold">R</span>
|
||||
</button>
|
||||
) : (
|
||||
<button className="ml-auto shadow-lg w-10 h-10 border-orange-400 bg-opacity-80 p-2 rounded hover:bg-opacity-100">
|
||||
<span className="text-sm text-orange-500 font-bold">R</span>
|
||||
</button>
|
||||
)}
|
||||
</Tooltip>
|
||||
|
||||
<Tooltip title="press space to play latest convo chunk">
|
||||
<button className="ml-2 h-10 shadow-lg border-green-400 bg-opacity-80 p-2 rounded hover:bg-opacity-100">
|
||||
<span className="text-sm text-green-500 font-bold">
|
||||
SPACE
|
||||
</span>
|
||||
</button>
|
||||
</Tooltip>
|
||||
|
||||
<BsThreeDots className="text-black ml-2 hover:cursor-pointer" />
|
||||
</>
|
||||
) : (
|
||||
<span className="flex flex-row items-center ml-auto ">
|
||||
{isMessageIncoming ? (
|
||||
<FaArrowCircleDown className="text-orange-500" />
|
||||
) : (
|
||||
""
|
||||
)}
|
||||
|
||||
<UserPulse status={tmember.userStatus} />
|
||||
</span>
|
||||
)}
|
||||
</span>
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
const [showPowerPlayer, setShowPowerPlayer] = useState<boolean>(false);
|
||||
|
||||
function handleCloseModal() {
|
||||
handleModalType(ShowModalType.na);
|
||||
setShowPowerPlayer(false);
|
||||
}
|
||||
|
||||
function handleShowModal() {
|
||||
handleModalType(ShowModalType.powerPlayer); // disables controls
|
||||
|
||||
setShowPowerPlayer(true);
|
||||
}
|
||||
|
||||
return (
|
||||
<section className="p-5 flex flex-col bg-gray-100 bg-opacity-25 rounded-lg shadow-md w-96 shrink-0 max-h-[35rem]">
|
||||
<span className="flex flex-row justify-start items-center pb-5">
|
||||
<span className="flex flex-col">
|
||||
<span className="text-white">TEAM</span>
|
||||
</span>
|
||||
|
||||
<Tooltip title="power playback mode">
|
||||
<button
|
||||
onClick={handleShowModal}
|
||||
className="bg-gray-300 bg-opacity-25 p-2 ml-auto rounded hover:bg-opacity-40"
|
||||
>
|
||||
<FaBackward className="text-lg text-white" />
|
||||
</button>
|
||||
</Tooltip>
|
||||
|
||||
<Tooltip title="add members">
|
||||
<button
|
||||
onClick={handleAdminRoute}
|
||||
className="bg-gray-300 bg-opacity-25 p-2 ml-2 rounded hover:bg-opacity-40"
|
||||
>
|
||||
<FaPlus className="text-lg text-white" />
|
||||
</button>
|
||||
</Tooltip>
|
||||
</span>
|
||||
|
||||
<PowerPlayer show={showPowerPlayer} handleCloseModal={handleCloseModal} />
|
||||
|
||||
{/* list of team members */}
|
||||
<div className="flex flex-col overflow-y-auto space-y-2">
|
||||
{renderTeamMemberList()}
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user