upd

src/StreamPage.tsx

@@ -31,6 +31,19 @@ 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 {
+  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() {
   const { t } = useTranslation();
@@ -39,6 +52,8 @@ function StreamPage() {
   const [isStreamEnded, setIsStreamEnded] = useState<boolean>(false);
   const [isStreamLoaded, setStreamLoaded] = useState<boolean>(false);
   const [me, setMe] = useState<any>({});
+  const meRef = useRef<any>({});
+  meRef.current = me;
   const [modal, setModal] = useModalStore((state) => [
     state.modal,
     state.setModal,
@@ -59,6 +74,7 @@ function StreamPage() {
   const [lastActivity, setLastActivity] = useState<Date>(new Date());
   const lastActivityRef = useRef<Date>();
   lastActivityRef.current = lastActivity;
+  const [stopwatch, setStopwatch] = useState<string>();
 
   async function getToken() {
     if (!socket) return;
@@ -72,6 +88,17 @@ function StreamPage() {
     setToken(token);
   }
 
+  function updateStartDate(date: Date) {
+    const diffMs = differenceInMilliseconds(new Date(), date);
+    setStopwatch(format(diffMs, "mm:ss"));
+
+    console.log();
+
+    setTimeout(() => {
+      updateStartDate(date);
+    }, 1000);
+  }
+
   async function connect() {
     const activeSession: any = await ky
       .get(`${import.meta.env.VITE_COORD_URL}/active_sessions/${params.id}`)
@@ -82,6 +109,8 @@ function StreamPage() {
         `wss://${activeSession.location}.sess.stream.graff.tech/${activeSession.server}/${activeSession.cirrusPort}/`
       );
 
+      updateStartDate(parseISO(activeSession.createdAt));
+
       setStreamLoaded(true);
     } else {
       setIsStreamEnded(true);
@@ -130,47 +159,35 @@ function StreamPage() {
   //   });
   // }
 
-  // function toastHandOn(text: string) {
-  //   toast.info(text, {
-  //     position: "top-center",
-  //     autoClose: 2000,
-  //     hideProgressBar: true,
-  //     closeOnClick: true,
-  //     pauseOnHover: true,
-  //     draggable: true,
-  //     theme: "dark",
-  //     icon: <HandOnIcon />,
-  //     closeButton: false,
-  //   });
-  // }
+  function toastHandOn(text: string) {
+    toast.info(text, {
+      position: "top-center",
+      autoClose: 2000,
+      hideProgressBar: true,
+      closeOnClick: true,
+      pauseOnHover: true,
+      draggable: true,
+      theme: "dark",
+      icon: <HandOnIcon />,
+      closeButton: false,
+    });
+  }
 
   const handleAction = () => {
     setLastActivity(new Date());
   };
 
-  const updateLastActivity = async () => {
-    console.log("lastActivity: ", lastActivityRef.current);
+  function updateLastActivity() {
+    if (!socket) return;
 
-    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);
-      }
+    if (meRef.current && meRef.current.admin) {
+      socket.emit("last-activity", socket.id, lastActivityRef.current);
     }
 
     setTimeout(() => {
       updateLastActivity();
-    }, 2000);
-  };
+    }, 5000);
+  }
 
   useEffect(() => {
     connect();
@@ -189,6 +206,7 @@ function StreamPage() {
     socket.on("join", (socketId, sockets) => {
       console.log("User connected: ", socketId, sockets);
       setUsers(sockets);
+      toastHandOn(t("notification.newMember"));
     });
 
     socket.on("update", (socketId, data, sockets) => {
@@ -197,6 +215,7 @@ function StreamPage() {
     });
 
     socket.on("kick", () => {
+      socket.close();
       window.close();
     });
 
@@ -208,11 +227,15 @@ function StreamPage() {
       );
     });
 
+    socket.on("notification", (type) => {
+      if (type === "afk-timer") {
+        setModal(<AFKTimerModal />);
+      }
+    });
+
     document.addEventListener("mousemove", handleAction);
     document.addEventListener("touchstart", handleAction);
 
-    updateLastActivity();
-
     return () => {
       socket.off("connect");
       socket.off("join");
@@ -230,6 +253,7 @@ function StreamPage() {
     if (!socket) return;
 
     getToken();
+    updateLastActivity();
   }, [socket]);
 
   useEffect(() => {
@@ -240,7 +264,7 @@ function StreamPage() {
 
   useEffect(() => {
     if (me && me.allowControl && !me.admin) {
-      // toastHandOn(t("notification.controlReceived"));
+      toastHandOn(t("notification.controlReceived"));
     }
   }, [me]);
 
@@ -368,6 +392,10 @@ function StreamPage() {
             <RoomAudioRenderer />
             <ToggleMic socket={socket} handleUpdate={update} />
           </LiveKitRoom>
+
+          <div className="relative group outline-none w-10 h-10 bg-[#131313] rounded-full shadow-lg shadow-[#131313] p-2 opacity-90 flex justify-center items-center">
+            <p className="text-xs">{stopwatch}</p>
+          </div>
         </div>
       </div>