upd

src/StreamPage.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable no-irregular-whitespace */
 /* eslint-disable react-hooks/exhaustive-deps */
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { useParams } from "react-router-dom";
+import { useParams, useSearchParams } from "react-router-dom";
 import { FullScreen, useFullScreenHandle } from "react-full-screen";
 import { useEffect, useRef, useState } from "react";
 import ky from "ky";
@@ -30,9 +30,11 @@ import useSocketStore from "./stores/useSocketStore";
 import { LiveKitRoom, RoomAudioRenderer } from "@livekit/components-react";
 import ToggleMic from "./components/ToggleMic";
 import Chat from "./components/Chat";
-import AFKTimerModal from "./components/modals/AFKTimerModal";
+// import AFKTimerModal from "./components/modals/AFKTimerModal";
 import { differenceInMilliseconds, format, parseISO } from "date-fns";
 import HandOnIcon from "./components/icons/HandOnIcon";
+import { useMobileOrientation } from "react-device-detect";
+import RotateDeviceIcon from "./components/icons/RotateDeviceIcon";
 
 function StreamPage() {
   const { t } = useTranslation();
@@ -48,6 +50,7 @@ function StreamPage() {
     state.setModal,
   ]);
   const params = useParams();
+  const [searchParams] = useSearchParams();
   const roomId = params.id;
   const livekitServerUrl = "wss://livekit.stream.graff.tech";
   const [token, setToken] = useState<string>();
@@ -60,10 +63,8 @@ function StreamPage() {
     state.setUsers,
   ]);
   const [isShowChat, setIsShowChat] = useState<boolean>(false);
-  const [lastActivity, setLastActivity] = useState<Date>(new Date());
-  const lastActivityRef = useRef<Date>();
-  lastActivityRef.current = lastActivity;
   const [stopwatch, setStopwatch] = useState<string>();
+  const { orientation } = useMobileOrientation();
 
   async function getToken() {
     if (!socket) return;
@@ -160,28 +161,13 @@ function StreamPage() {
     });
   }
 
-  const handleAction = () => {
-    setLastActivity(new Date());
-  };
-
-  function updateLastActivity() {
-    if (!socket) return;
-
-    if (meRef.current && meRef.current.admin) {
-      socket.emit("last-activity", socket.id, lastActivityRef.current);
-    }
-
-    setTimeout(() => {
-      updateLastActivity();
-    }, 5000);
-  }
-
   useEffect(() => {
     connect();
 
     const socket: Socket = io(import.meta.env.VITE_COORD_URL, {
       query: {
         roomId,
+        admin: searchParams.has("admin", "true"),
       },
     });
 
@@ -216,13 +202,10 @@ function StreamPage() {
 
     socket.on("notification", (type) => {
       if (type === "afk-timer") {
-        setModal(<AFKTimerModal />);
+        // setModal(<AFKTimerModal />);
       }
     });
 
-    document.addEventListener("mousemove", handleAction);
-    document.addEventListener("touchstart", handleAction);
-
     return () => {
       socket.off("connect");
       socket.off("join");
@@ -230,9 +213,6 @@ function StreamPage() {
       socket.off("kick");
       socket.off("leave");
       socket.close();
-
-      document.removeEventListener("mousemove", handleAction);
-      document.removeEventListener("touchstart", handleAction);
     };
   }, []);
 
@@ -240,7 +220,6 @@ function StreamPage() {
     if (!socket) return;
 
     getToken();
-    updateLastActivity();
   }, [socket]);
 
   useEffect(() => {
@@ -259,7 +238,16 @@ function StreamPage() {
     <FullScreen handle={handleFullScreen} className="h-screen text-[#F2F2F2]">
       {!isStreamEnded ? (
         isStreamLoaded ? (
-          <>{streamUrl && <Player ss={streamUrl} />}</>
+          <>
+            {orientation === "landscape" ? (
+              <>{streamUrl && <Player ss={streamUrl} />}</>
+            ) : (
+              <div className="absolute top-0 left-0 w-full h-full flex flex-col justify-center items-center gap-2">
+                <RotateDeviceIcon />
+                <Trans i18nKey="rotateDevice">Поверните устройство</Trans>
+              </div>
+            )}
+          </>
         ) : (
           <div className="absolute top-0 left-0 w-full h-full flex justify-center items-center">
             <Trans i18nKey="streamWaiting">Ожидание потока</Trans>