upd
This commit is contained in:
@@ -80,90 +80,6 @@ function ChatNew({ isShow, socket, userId, name, onClose }: ChatNewProps) {
|
||||
}, [isShow]);
|
||||
|
||||
return (
|
||||
// <div className={`max-h-[calc(100vh-48px)]`}>
|
||||
// <div
|
||||
// className={`overflow-y-scroll relative h-full bg-white flex flex-col ${
|
||||
// isShow ? "w-[296px]" : "w-0 hidden"
|
||||
// }`}
|
||||
// >
|
||||
// <div
|
||||
// className={`fixed z-10 top-0 bg-white w-full flex items-center justify-between p-2 pl-4`}
|
||||
// >
|
||||
// <p className="font-semibold">Чат</p>
|
||||
// <div className="flex">
|
||||
// <Button
|
||||
// variant="tertiary"
|
||||
// icon={<CloseIcon />}
|
||||
// onlyIcon
|
||||
// onClick={onClose}
|
||||
// />
|
||||
// </div>
|
||||
// </div>
|
||||
// <div
|
||||
// ref={messagesRef}
|
||||
// className="flex flex-col gap-2 p-4 pt-12 pb-[72px]"
|
||||
// >
|
||||
// {messages.map((message) => (
|
||||
// <div
|
||||
// className={`flex gap-1 items-end ${
|
||||
// message.user.id === userId ? "self-end" : ""
|
||||
// }`}
|
||||
// >
|
||||
// {message.user.id !== userId && (
|
||||
// <div className="">
|
||||
// <div className="h-6 w-6 flex items-center justify-center bg-[#E6ECF2] font-semibold text-[10px] rounded-full">
|
||||
// {message.user.name[0].toUpperCase()}
|
||||
// </div>
|
||||
// </div>
|
||||
// )}
|
||||
// <div className="relative">
|
||||
// <div
|
||||
// className={`p-2 rounded-tl-[4px] rounded-r-lg flex flex-col gap-1 ${
|
||||
// message.user.id !== userId ? "bg-[#F0F1F2]" : "bg-[#C4DDF5]"
|
||||
// }`}
|
||||
// >
|
||||
// {message.user.id !== userId && (
|
||||
// <p className="text-sm text-[#49A1F5] font-semibold">
|
||||
// {message.user.name}
|
||||
// </p>
|
||||
// )}
|
||||
// <p
|
||||
// className="text-sm break-words"
|
||||
// style={{ wordBreak: "break-word" }}
|
||||
// >
|
||||
// {message.text}
|
||||
// </p>
|
||||
// <p className="text-xs self-end text-[#767676]">
|
||||
// {message.time}
|
||||
// </p>
|
||||
// </div>
|
||||
// {message.user.id !== userId && (
|
||||
// <div className="absolute bottom-0 -left-[7px]">
|
||||
// <SubtracktIcon />
|
||||
// </div>
|
||||
// )}
|
||||
// </div>
|
||||
// </div>
|
||||
// ))}
|
||||
// </div>
|
||||
// <div className="fixed z-10 bottom-0 p-4 bg-white w-full">
|
||||
// <form onSubmit={sendMessage} className="flex gap-3 border-t pt-3">
|
||||
// <input
|
||||
// ref={textRef}
|
||||
// type="text"
|
||||
// placeholder="Напишите сообщение..."
|
||||
// className="outline-none w-full bg-white text-sm"
|
||||
// value={message}
|
||||
// onChange={(e) => setMessage(e.target.value)}
|
||||
// />
|
||||
// <button type="submit" className="text-[#49A1F5]">
|
||||
// <SendChatIcon />
|
||||
// </button>
|
||||
// </form>
|
||||
// </div>
|
||||
// </div>
|
||||
// </div>
|
||||
|
||||
<div
|
||||
className={`h-full flex flex-col ${
|
||||
isShow ? "w-[296px] p-4" : "w-0 overflow-hidden"
|
||||
|
||||
@@ -16,6 +16,7 @@ function Video({ mediaStream, muted, user }: Props) {
|
||||
const remoteVideoRef = useRef<HTMLVideoElement>(null);
|
||||
const isSpeaking = useIsAudioActive({ source: mediaStream });
|
||||
const [_muted, setMuted] = useState(muted);
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
|
||||
function toggleSound() {
|
||||
if (!remoteVideoRef.current) return;
|
||||
@@ -30,6 +31,10 @@ function Video({ mediaStream, muted, user }: Props) {
|
||||
remoteVideoRef.current.onloadedmetadata = () => {
|
||||
remoteVideoRef.current?.play();
|
||||
};
|
||||
|
||||
remoteVideoRef.current.onplay = () => {
|
||||
setIsLoading(false);
|
||||
};
|
||||
}, [mediaStream]);
|
||||
|
||||
useEffect(() => {
|
||||
@@ -55,6 +60,15 @@ function Video({ mediaStream, muted, user }: Props) {
|
||||
{_muted ? <SoundOffIcon /> : <SoundOnIcon />}
|
||||
</button>
|
||||
</div>
|
||||
{isLoading && (
|
||||
<div className="absolute top-0 left-0 w-full h-full flex items-center justify-center">
|
||||
<img
|
||||
src="/icons/Loader.png"
|
||||
alt=""
|
||||
className="animate-spin w-6 h-6"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,96 @@
|
||||
import { Trans } from "react-i18next";
|
||||
import QRCode from "react-qr-code";
|
||||
import CloseIcon from "../../icons/CloseIcon";
|
||||
import LinkIcon from "../../icons/LinkIcon";
|
||||
import Button from "../../ui/Button";
|
||||
import useModalStore from "../../../stores/useModalStore";
|
||||
import { useClipboard } from "use-clipboard-copy";
|
||||
import { toast, Bounce, ToastContainer } from "react-toastify";
|
||||
import InfoIcon from "../../icons/InfoBlueIcon";
|
||||
|
||||
function InviteModal() {
|
||||
const { setModal } = useModalStore();
|
||||
const clipboard = useClipboard();
|
||||
const link = window.location.origin + window.location.pathname;
|
||||
|
||||
function handleClickClipboard() {
|
||||
clipboard.copy();
|
||||
|
||||
toast.info("Ссылка скопирована в буфер обмена", {
|
||||
icon: <InfoIcon className="text-blue-500" />,
|
||||
position: "top-center",
|
||||
autoClose: 3000,
|
||||
hideProgressBar: true,
|
||||
closeOnClick: true,
|
||||
pauseOnHover: true,
|
||||
draggable: true,
|
||||
progress: undefined,
|
||||
theme: "light",
|
||||
transition: Bounce,
|
||||
});
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="absolute top-0 lg:left-0 left-12 lg:w-full w-[calc(100vw-48px)] h-full lg:bg-black lg:bg-opacity-50 bg-white sm:border-none border-l border-[#DAE0E5] flex flex-col lg:items-center lg:justify-center">
|
||||
<div className="bg-white flex flex-col lg:rounded-lg lg:w-[400px] lg:flex-none flex-1">
|
||||
<div className="p-2 pl-6 flex items-center justify-between border-b border-[#DAE0E5]">
|
||||
<p className="text-sm font-semibold">
|
||||
<Trans i18nKey={"invite"}>Пригласить</Trans>
|
||||
</p>
|
||||
<Button
|
||||
variant="tertiary"
|
||||
icon={<CloseIcon />}
|
||||
onlyIcon
|
||||
onClick={() => setModal(null)}
|
||||
/>
|
||||
</div>
|
||||
<div className="py-4 px-6 flex-1 flex flex-col gap-8">
|
||||
<div className="flex items-center lg:justify-between justify-center gap-8">
|
||||
<QRCode
|
||||
size={128}
|
||||
value={link}
|
||||
className="rounded-lg p-3 shadow-lg"
|
||||
/>
|
||||
<p className="font-semibold text-right">
|
||||
<Trans i18nKey={"scanQRCode"}>
|
||||
Отсканируйте QR-код,
|
||||
<br />
|
||||
чтобы присоедениться
|
||||
<br />к демонстрации
|
||||
</Trans>
|
||||
</p>
|
||||
</div>
|
||||
<div className="">
|
||||
<Button
|
||||
icon={<LinkIcon />}
|
||||
fullWidth
|
||||
large
|
||||
onClick={handleClickClipboard}
|
||||
>
|
||||
<Trans i18nKey={"copyLinkToConnect"}>
|
||||
Скопировать ссылку для подключения
|
||||
</Trans>
|
||||
</Button>
|
||||
<input ref={clipboard.target} type="hidden" value={link} />
|
||||
</div>
|
||||
{/* <div>
|
||||
<form onSubmit={(e) => e.preventDefault()} className="flex gap-2">
|
||||
<input
|
||||
type="email"
|
||||
placeholder="Email"
|
||||
className="text-sm bg-transparent border border-[#DAE0E5] rounded-lg px-2 pb-0.5 outline-none h-10 w-full"
|
||||
/>
|
||||
<Button type="submit" large className="" disabled>
|
||||
<Trans i18nKey={"invite"}>Пригласить</Trans>
|
||||
</Button>
|
||||
</form>
|
||||
</div> */}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ToastContainer />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default InviteModal;
|
||||
Reference in New Issue
Block a user