130 lines
4.4 KiB
TypeScript
130 lines
4.4 KiB
TypeScript
import useModalStore from "../../stores/useModalStore";
|
||
import userAgentParser from "ua-parser-js";
|
||
import AdminUserIcon from "../icons/AdminUserIcon";
|
||
import DesktopIcon from "../icons/DesktopIcon";
|
||
import ExitIcon from "../icons/ExitIcon";
|
||
import HandOffIcon from "../icons/HandOffIcon";
|
||
import HandOnIcon from "../icons/HandOnIcon";
|
||
import MobilePhoneIcon from "../icons/MobilePhoneIcon";
|
||
import UserIcon from "../icons/UserIcon";
|
||
import CloseIcon from "../icons/CloseIcon";
|
||
import useStreamUserStore from "../../stores/useStreamUserStore";
|
||
import { Trans } from "react-i18next";
|
||
import MicroOffIcon from "../icons/MicroOffIcon";
|
||
import MicroOnIcon from "../icons/MicroOnIcon";
|
||
|
||
/* eslint-disable @typescript-eslint/no-explicit-any */
|
||
interface UsersManagementModalProps {
|
||
me: any;
|
||
handleUpdate: (socketId: string, params: any) => void;
|
||
handleKick: (socketId: string) => void;
|
||
}
|
||
|
||
function UsersManagementModal({
|
||
me,
|
||
handleUpdate,
|
||
handleKick,
|
||
}: UsersManagementModalProps) {
|
||
const [setModal] = useModalStore((state) => [state.setModal]);
|
||
const [users] = useStreamUserStore((state) => [state.users]);
|
||
|
||
return (
|
||
<div className="relative lg:p-10 p-6 bg-[#131317] rounded shadow-lg w-[360px] flex flex-col gap-2">
|
||
<div className="flex flex-col lg:gap-8 gap-4">
|
||
<p className="font-gilroy lg:text-2xl">
|
||
<Trans i18nKey={"members"}>Участники</Trans>
|
||
</p>
|
||
<div className="flex flex-col gap-4">
|
||
{users.map((user: any, index: number) => (
|
||
<div key={index} className="relative">
|
||
<div className="flex items-center gap-4 text-white">
|
||
<div className="relative flex flex-col">
|
||
{user.admin ? <AdminUserIcon /> : <UserIcon />}
|
||
</div>
|
||
|
||
{new userAgentParser(user.ua).getDevice().type !== "mobile" ? (
|
||
<DesktopIcon />
|
||
) : (
|
||
<MobilePhoneIcon />
|
||
)}
|
||
|
||
<span className="text-sm">{user.city}</span>
|
||
|
||
{me && me.admin && (
|
||
<>
|
||
{!user.admin && (
|
||
<>
|
||
{!user.allowControl ? (
|
||
<button
|
||
onClick={() =>
|
||
handleUpdate(user.id, { allowControl: true })
|
||
}
|
||
className="outline-none"
|
||
>
|
||
<HandOffIcon />
|
||
</button>
|
||
) : (
|
||
<button
|
||
onClick={() =>
|
||
handleUpdate(user.id, { allowControl: false })
|
||
}
|
||
className="outline-none"
|
||
>
|
||
<HandOnIcon />
|
||
</button>
|
||
)}
|
||
</>
|
||
)}
|
||
|
||
{!user.muted ? (
|
||
<button
|
||
onClick={() => handleUpdate(user.id, { muted: true })}
|
||
className="outline-none"
|
||
>
|
||
<MicroOnIcon />
|
||
</button>
|
||
) : (
|
||
<button
|
||
onClick={() => handleUpdate(user.id, { muted: false })}
|
||
className="outline-none"
|
||
>
|
||
<MicroOffIcon />
|
||
</button>
|
||
)}
|
||
</>
|
||
)}
|
||
|
||
{me && me.admin && !user.admin && (
|
||
<button
|
||
onClick={() => handleKick(user.id)}
|
||
className="outline-none"
|
||
>
|
||
<ExitIcon />
|
||
</button>
|
||
)}
|
||
|
||
<div>
|
||
{me && me.id === user.id && (
|
||
<span className="text-[#73788C] text-xs">
|
||
<Trans i18nKey={"you"}>Вы</Trans>
|
||
</span>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
<button
|
||
onClick={() => setModal(null)}
|
||
className="absolute top-3 right-3 p-2 rounded-full transition-colors hover:bg-white hover:bg-opacity-5"
|
||
>
|
||
<CloseIcon />
|
||
</button>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
export default UsersManagementModal;
|