upd

2024-09-26 18:30:52 +05:00
parent 3fdf64415e
commit 60ee65dab5
4 changed files with 64 additions and 29 deletions
@@ -6,28 +6,44 @@ import CloseIcon from "./icons/CloseIcon";
 import SendChatIcon from "./icons/SendChatIcon";
 import Button from "./ui/Button";
 import useStreamUserStore from "../stores/useStreamUserStore";
-import { FormEvent, useRef, useState } from "react";
-import IMessage from "../types/IMessage";
-import useStateRef from "react-usestateref";
+import { FormEvent, useEffect, useRef, useState } from "react";
+import useSocketStore from "../stores/useSocketStore";
+import useChatStore from "../stores/useChatStore";

 interface Props {
  onClose: () => void;
 }

 function Chat2({ onClose }: Props) {
-//   const { socket } = useSocketStore();
+  const { socket } = useSocketStore();
  const { me, users } = useStreamUserStore();
-  const [messages] = useStateRef<IMessage[]>([]);
+  // const [messages] = useStateRef<IMessage[]>([]);
  const messagesRef = useRef<HTMLDivElement>(null);
  const [messageText, setMessageText] = useState<string>("");
  const messageTextRef = useRef<HTMLInputElement>(null);
+  const { messages } = useChatStore();

  function sendMessage(e: FormEvent) {
    e.preventDefault();
+
+    socket?.emit("message", messageText);
+
+    setMessageText("");
  }

+  useEffect(() => {
+    if (!messages.length) return;
+
+    messagesRef.current?.scrollTo({
+      top: messagesRef.current.scrollHeight,
+      behavior: "smooth",
+    });
+  }, [messages]);
+
  return (
-    <div className={`chat relative h-full flex flex-col w-[296px] bg-white`}>
+    <div
+      className={`chat relative h-[calc(100vh-48px)] flex flex-col w-[296px] bg-white`}
+    >
      <div className="flex items-center justify-between p-2 pl-4 border-b border-[#DAE0E5]">
        <p className="text-sm font-semibold">
          <Trans i18nKey={"chat"}>Чат</Trans>
@@ -47,14 +63,16 @@ function Chat2({ onClose }: Props) {
          <div
            key={index}
            className={`text-sm p-2 flex flex-col gap-1 rounded-lg ${
-              users.find((user) => user.id === me?.id)?.name === message.name
+              users.find((user) => user.id === me?.id)?.id === message.userId
                ? "bg-[#C4DDF5]"
                : "bg-[#F0F1F2]"
            }`}
          >
-            {users.find((user) => user.id === me?.id)?.name !==
-              message.name && (
-              <p className="text-[#49A1F5] font-semibold">{message.name}</p>
+            {users.find((user) => user.id === me?.id)?.id !==
+              message.userId && (
+              <p className="text-[#49A1F5] font-semibold">
+                {users.find((user) => user.id === message.userId)?.name}
+              </p>
            )}

            <p className="break-words">{message.text}</p>
@@ -70,7 +88,7 @@ function Chat2({ onClose }: Props) {
            ref={messageTextRef}
            type="text"
            placeholder={t("writeAMessage")}
-            className="w-full bg-transparent text-sm outline-none"
+            className="w-full text-sm bg-transparent outline-none"
            value={messageText}
            onChange={(e) => setMessageText(e.target.value)}
          />
@@ -9,13 +9,13 @@ function DesktopIcon() {
    >
      <path
        d="M2.6665 3.87878C2.6665 3.20934 3.26346 2.66666 3.99984 2.66666L11.9998 2.66666C12.7362 2.66666 13.3332 3.20934 13.3332 3.87878V8.1212C13.3332 8.79064 12.7362 9.33332 11.9998 9.33332L3.99984 9.33332C3.26346 9.33332 2.6665 8.79064 2.6665 8.1212L2.6665 3.87878Z"
-        stroke="#ccc"
+        stroke="currentColor"
        strokeWidth={1.5}
        strokeLinecap="round"
      />
      <path
        d="M13.2794 11H2.72092C2.29049 11 1.90835 11.2754 1.77224 11.6838C1.5564 12.3313 2.03836 13 2.72092 13L13.2794 13C13.962 13 14.4439 12.3313 14.2281 11.6838C14.092 11.2754 13.7098 11 13.2794 11Z"
-        stroke="#ccc"
+        stroke="currentColor"
        strokeWidth={1.5}
        strokeLinecap="round"
      />
@@ -9,7 +9,7 @@ function MobileIcon() {
    >
      <path
        d="M7.44428 3.33333H8.55539M5.99984 14L9.99984 14C10.7362 14 11.3332 13.403 11.3332 12.6667V3.33333C11.3332 2.59695 10.7362 2 9.99984 2L5.99984 2C5.26346 2 4.6665 2.59695 4.6665 3.33333L4.6665 12.6667C4.6665 13.403 5.26346 14 5.99984 14Z"
-        stroke="#ccc"
+        stroke="currentColor"
        strokeWidth={1.5}
        strokeLinecap="round"
      />
@@ -25,7 +25,7 @@ import MicroOffIcon from "../components/icons/MicroOffIcon";
 import CameraOnIcon from "../components/icons/CameraOnIcon";
 import CameraOffIcon from "../components/icons/CameraOffIcon";
 import { Trans } from "react-i18next";
-import { isIOS, useMobileOrientation } from "react-device-detect";
+import { isIOS, isMobile, useMobileOrientation } from "react-device-detect";
 import WindowIcon from "../components/icons/WindowIcon";
 import FullscreenIcon from "../components/icons/FullscreenIcon";
 import ShareIcon from "../components/icons/ShareIcon";
@@ -39,6 +39,10 @@ import useStreamUserStore from "../stores/useStreamUserStore";
 import Chat2 from "../components/Chat2";
 import Rotate64Icon from "../components/icons/Rotate64Icon";
 import Draggable from "react-draggable";
+import DesktopIcon from "../components/icons/DesktopIcon";
+import MobileIcon from "../components/icons/MobileIcon";
+import ChatIcon from "../components/icons/ChatIcon";
+import useChatStore from "../stores/useChatStore";
 // import ChatIcon from "../components/icons/ChatIcon";

 // import MoreIcon from "../components/icons/MoreIcon";
@@ -79,6 +83,7 @@ function StreamPage3() {
  const [step, setStep] = useState<number>(1);
  const [isShowChat, setIsShowChat] = useState<boolean>(false);
  const { isPortrait } = useMobileOrientation();
+  const { setMessages } = useChatStore();

  async function startCall(remotePeerId: string) {
    if (!peerInstance) return;
@@ -131,6 +136,7 @@ function StreamPage3() {

  function initPeer() {
    const peer = new Peer({
+      host: "stream.graff.tech",
      config: {
        iceServers: [
          {
@@ -212,6 +218,10 @@ function StreamPage3() {
      toast.info(`Вы получили разрешение на управление`);
    });

+    socket.on("message", ({ userId, text }) => {
+      setMessages([...useChatStore.getState().messages, { userId, text }]);
+    });
+
    socket.on("connect", () => {
      setSocket(socket);
    });
@@ -267,7 +277,7 @@ function StreamPage3() {

    setIsEnded(false);
    setWSUrl(
-      `wss://${activeSession.location}.sess.stream.graff.tech/${activeSession.name}/${activeSession.cirrusPort}/`
+      `wss://${activeSession.location}.sess.stream.graff.tech/server/${activeSession.localIP}:${activeSession.cirrusPort}`
    );
    setModal(<SetNameModal onAction={handleSetName} />);

@@ -310,6 +320,7 @@ function StreamPage3() {

  useEffect(() => {
    getWSUrl();
+    // initSocket();
  }, []);

  useEffect(() => {
@@ -347,16 +358,16 @@ function StreamPage3() {
    >
      {isEnded === false && (
        <>
-          <div className="flex max-lg:flex-col items-center justify-between bg-white lg:h-12 lg:w-auto w-12 lg:px-6 max-lg:py-2">
+          <div className="flex items-center justify-between w-12 bg-white max-lg:flex-col lg:h-12 lg:w-auto lg:px-6 max-lg:py-2">
            <div className="lg:pr-6">
              <img
                src="/images/logo24.svg"
                alt=""
-                className="lg:block hidden"
+                className="hidden lg:block"
              />
            </div>
            <div className="flex items-center gap-4">
-              <div className="lg:flex hidden items-center gap-2">
+              <div className="items-center hidden gap-2 lg:flex">
                <div className="relative w-6 h-6 bg-[#E6ECF2] rounded-full flex items-center justify-center">
                  <p className="text-xs font-semibold">
                    {name[0]?.toUpperCase()}
@@ -366,8 +377,11 @@ function StreamPage3() {
                  )}
                </div>
                <p className="text-xs">{name}</p>
+                <div className="text-[#CCCCCC]">
+                  {isMobile ? <MobileIcon /> : <DesktopIcon />}
+                </div>
              </div>
-              <div className="flex max-lg:flex-col items-center gap-2">
+              <div className="flex items-center gap-2 max-lg:flex-col">
                <div className="relative group">
                  <Button
                    variant="secondary"
@@ -428,7 +442,7 @@ function StreamPage3() {
                )}
              </div>
              <div className="h-4 w-px bg-[#DAE0E5] lg:block hidden"></div>
-              <div className="lg:flex hidden">
+              <div className="hidden gap-6 lg:flex">
                {users.map((user) => {
                  if (user.id !== userId) {
                    return (
@@ -442,6 +456,9 @@ function StreamPage3() {
                          )}
                        </div>
                        <p className="text-xs">{user.name}</p>
+                        <div className="text-[#CCCCCC]">
+                          {isMobile ? <MobileIcon /> : <DesktopIcon />}
+                        </div>

                        {me?.isAdmin && me?.isControlAllowed && (
                          <div className="relative">
@@ -469,8 +486,8 @@ function StreamPage3() {
                })}
              </div>
            </div>
-            <div className="flex max-lg:flex-col gap-2 lg:ml-auto">
-              {/* <div className="relative group">
+            <div className="flex gap-2 max-lg:flex-col lg:ml-auto">
+              <div className="relative group">
                <Button
                  variant="secondary"
                  icon={<ChatIcon />}
@@ -478,7 +495,7 @@ function StreamPage3() {
                  onClick={() => setIsShowChat((prev) => !prev)}
                />
                <Tooltip text={isShowChat ? "Скрыть чат" : "Показать чат"} />
-              </div> */}
+              </div>
              <div className="relative group">
                <Button
                  variant="secondary"
@@ -505,7 +522,7 @@ function StreamPage3() {
              )}
            </div>
          </div>
-          <div className="relative flex-1 flex">
+          <div className="relative flex flex-1">
            {WSUrl && (
              <PixelStreamingWrapper2
                initialSettings={{
@@ -534,7 +551,7 @@ function StreamPage3() {
              defaultClassName="cursor-grab"
              defaultClassNameDragging="cursor-grabbing"
            >
-              <div className="absolute top-2 lg:left-2 max-lg:right-2 space-y-2">
+              <div className="absolute space-y-2 top-2 lg:left-2 max-lg:right-2">
                <div className={`relative ${!permission ? "hidden" : ""}`}>
                  <video
                    ref={localVideoRef}
@@ -566,7 +583,7 @@ function StreamPage3() {
          </div>

          {isPortrait && (
-            <div className="absolute top-0 left-0 w-full h-full bg-white flex flex-col items-center justify-center gap-2">
+            <div className="absolute top-0 left-0 flex flex-col items-center justify-center w-full h-full gap-2 bg-white">
              <Rotate64Icon />
              <p className="font-semibold">Поверните устройство</p>
            </div>
@@ -578,8 +595,8 @@ function StreamPage3() {
      )}

      {isEnded === true && (
-        <div className="flex-1 flex items-center justify-center p-8">
-          <p className="text-2xl text-white font-gilroy text-center">
+        <div className="flex items-center justify-center flex-1 p-8">
+          <p className="text-2xl text-center text-white font-gilroy">
            <Trans i18nKey={"demonstrationCompleted"}>
              Данная демонстрация была завершена
            </Trans>