upd

src/HistoryPage.tsx

@@ -23,13 +23,14 @@ function HistoryPage() {
       {history.map((item: any) => (
         <div key={item.id} className="p-4 rounded-lg bg-[#22222A]">
           <p>
-            Дата и время запуска: {new Date(item.createdAt).toLocaleString()}
+            Дата и время: {new Date(item.createdAt).toLocaleString()}
           </p>
-          <p>Сборка: "{item.title}"</p>
+          <p>Сборка: "{item.build}"</p>
+          <p>Локация: "{item.location}"</p>
           <p>Сервер: "{item.server}"</p>
-          <p>IP клиента: {item.headers["x-forwarded-for"]}</p>
+          <p>IP клиента: {item.ownerIp}</p>
-          <p>Город: {item.city}</p>
+          {/* <p>Город: {item.city}</p> */}
-          <p>Устройство: {item.headers["user-agent"]}</p>
+          {/* <p>Устройство: {item.headers["user-agent"]}</p> */}
         </div>
       ))}
     </div>

src/MonitoringPage.tsx

@@ -34,19 +34,16 @@ function MonitoringPage() {
     }, 1000);
   }
 
-  async function endActiveSession(
+  async function endSession(activeSessionId: string) {
-    location: string,
+    const result = await ky
-    server: string,
+      .post(
-    uePort: number,
-    cirrusPort: number
-  ) {
-    await ky
-      .get(
         `${
           import.meta.env.VITE_COORD_URL
-        }/end?location=${location}&server=${server}&uePort=${uePort}&cirrusPort=${cirrusPort}`
+        }/active_sessions/${activeSessionId}/end`
       )
       .json();
+
+    console.log(result);
   }
 
   useEffect(() => {
@@ -181,14 +178,7 @@ function MonitoringPage() {
                       Открыть в новом окне
                     </a>
                     <button
-                      onClick={() =>
+                      onClick={() => endSession(session.id)}
-                        endActiveSession(
-                          session.location,
-                          session.server,
-                          session.uePort,
-                          session.cirrusPort
-                        )
-                      }
                       className="px-4 py-2 bg-red-600 hover:bg-red-500 transition-colors rounded"
                     >
                       Завершить сессию

src/StreamPage.tsx

@@ -30,19 +30,8 @@ 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";
 import AFKTimerModal from "./components/modals/AFKTimerModal";
-import {
+import { differenceInMilliseconds, format, parseISO } from "date-fns";
-  differenceInMilliseconds,
-  differenceInSeconds,
-  format,
-  formatDuration,
-  getMinutes,
-  getSeconds,
-  intervalToDuration,
-  parseISO,
-} from "date-fns";
-import { ru } from "date-fns/locale";
 import HandOnIcon from "./components/icons/HandOnIcon";
 
 function StreamPage() {
@@ -60,7 +49,7 @@ function StreamPage() {
   ]);
   const params = useParams();
   const roomId = params.id;
-  const serverUrl = "wss://livekit.stream.graff.tech";
+  const livekitServerUrl = "wss://livekit.stream.graff.tech";
   const [token, setToken] = useState<string>();
   const [socket, setSocket] = useSocketStore((state) => [
     state.socket,
@@ -373,7 +362,7 @@ function StreamPage() {
             </div>
           </button>
 
-          <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"
           >
@@ -381,13 +370,13 @@ function StreamPage() {
             <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>
+          </button> */}
 
           <LiveKitRoom
             video={false}
             audio={true}
             token={token}
-            serverUrl={serverUrl}
+            serverUrl={livekitServerUrl}
           >
             <RoomAudioRenderer />
             <ToggleMic socket={socket} handleUpdate={update} />

src/components/modals/AFKTimerModal.tsx

@@ -1,13 +1,38 @@
-import { useEffect, useState } from "react";
+/* eslint-disable react-hooks/exhaustive-deps */
+import { useEffect, useRef, useState } from "react";
 import useModalStore from "../../stores/useModalStore";
+import ky from "ky";
+import { useParams } from "react-router-dom";
 
 function AFKTimerModal() {
   const setModal = useModalStore((state) => state.setModal);
   const [afkTimer, setAfkTimer] = useState<number>(60);
+  const afkTimerRef = useRef<number>();
+  afkTimerRef.current = afkTimer;
+  const params = useParams();
+
+  async function endSession() {
+    await ky.post(
+      `${import.meta.env.VITE_COORD_URL}/active_sessions/${params.id}/end`
+    );
+  }
+
+  async function checkAFK(interval: number) {
+    console.log(afkTimerRef.current);
+
+    if (afkTimerRef.current && afkTimerRef.current <= 1) {
+      clearInterval(interval);
+      await endSession();
+      window.location.reload();
+      return;
+    }
+
+    setAfkTimer((prev) => prev - 1);
+  }
 
   useEffect(() => {
     const interval = setInterval(() => {
-      setAfkTimer((prev) => prev - 1);
+      checkAFK(interval);
     }, 1000);
 
     return () => {