upd

src/StreamPage.tsx

@@ -3,7 +3,7 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { useParams } from "react-router-dom";
 import { FullScreen, useFullScreenHandle } from "react-full-screen";
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import ky from "ky";
 import { Socket, io } from "socket.io-client";
 import userAgentParser from "ua-parser-js";
@@ -29,6 +29,8 @@ import AlertIcon from "./components/icons/AlertIcon";
 import useSocketStore from "./stores/useSocketStore";
 import { LiveKitRoom, RoomAudioRenderer } from "@livekit/components-react";
 import ToggleMic from "./components/ToggleMic";
+import Chat from "./components/Chat";
+import ChatIcon from "./components/icons/ChatIcon";
 
 function StreamPage() {
   const { t } = useTranslation();
@@ -53,6 +55,10 @@ function StreamPage() {
     state.users,
     state.setUsers,
   ]);
+  const [isShowChat, setIsShowChat] = useState<boolean>(false);
+  const [lastActivity, setLastActivity] = useState<Date>(new Date());
+  const lastActivityRef = useRef<Date>();
+  lastActivityRef.current = lastActivity;
 
   async function getToken() {
     if (!socket) return;
@@ -138,6 +144,34 @@ function StreamPage() {
   //   });
   // }
 
+  const handleAction = () => {
+    setLastActivity(new Date());
+  };
+
+  const updateLastActivity = async () => {
+    console.log("lastActivity: ", lastActivityRef.current);
+
+    try {
+      const result = await ky
+        .put(`${import.meta.env.VITE_COORD_URL}/active_sessions/${params.id}`, {
+          json: {
+            lastActivityAt: lastActivityRef.current,
+          },
+        })
+        .json();
+
+      console.log(result);
+    } catch (error) {
+      if (error instanceof Error) {
+        console.log(error.message);
+      }
+    }
+
+    setTimeout(() => {
+      updateLastActivity();
+    }, 2000);
+  };
+
   useEffect(() => {
     connect();
 
@@ -162,11 +196,6 @@ function StreamPage() {
       setUsers(sockets);
     });
 
-    socket.on("leave", (socketId, sockets) => {
-      console.log("User disconnected: ", socketId);
-      setUsers(sockets);
-    });
-
     socket.on("kick", () => {
       window.close();
     });
@@ -179,8 +208,21 @@ function StreamPage() {
       );
     });
 
+    document.addEventListener("mousemove", handleAction);
+    document.addEventListener("touchstart", handleAction);
+
+    updateLastActivity();
+
     return () => {
+      socket.off("connect");
+      socket.off("join");
+      socket.off("update");
+      socket.off("kick");
+      socket.off("leave");
       socket.close();
+
+      document.removeEventListener("mousemove", handleAction);
+      document.removeEventListener("touchstart", handleAction);
     };
   }, []);
 
@@ -307,6 +349,16 @@ function StreamPage() {
             </div>
           </button>
 
+          <button
+            onClick={() => setIsShowChat(true)}
+            className="relative group outline-none bg-[#131313] rounded-full shadow-lg shadow-[#131313] p-2 opacity-90 flex justify-center items-center"
+          >
+            <ChatIcon className="w-5 h-5" />
+            <span className="absolute left-12 top-[50%] -translate-y-[50%] invisible group-hover:visible opacity-0 group-hover:opacity-100 text-xs transition-all px-2 py-1 bg-[#131313] rounded">
+              <Trans i18nKey={"chat"}>Чат</Trans>
+            </span>
+          </button>
+
           <LiveKitRoom
             video={false}
             audio={true}
@@ -319,6 +371,14 @@ function StreamPage() {
         </div>
       </div>
 
+      <Transition in={isShowChat} timeout={200} mountOnEnter unmountOnExit>
+        {(state) => (
+          <div className="absolute right-0 bottom-0">
+            <Chat className={state} handleClose={() => setIsShowChat(false)} />
+          </div>
+        )}
+      </Transition>
+
       <Transition
         in={modal ? true : false}
         timeout={200}