upd

src/StreamPage.tsx

@@ -35,6 +35,7 @@ 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";
+import LoaderIcon from "./components/icons/LoaderIcon";
 
 function StreamPage() {
   const { t } = useTranslation();
@@ -161,6 +162,25 @@ function StreamPage() {
     });
   }
 
+  async function checkIsActiveSession() {
+    const activeSession: any = await ky
+      .get(`${import.meta.env.VITE_COORD_URL}/active_sessions/${params.id}`)
+      .json();
+
+    console.log(activeSession);
+
+    if (!activeSession) {
+      setIsStreamEnded(true);
+      return;
+    }
+
+    if (!isStreamEnded) {
+      setTimeout(() => {
+        checkIsActiveSession();
+      }, 1000);
+    }
+  }
+
   useEffect(() => {
     connect();
 
@@ -206,6 +226,8 @@ function StreamPage() {
       }
     });
 
+    checkIsActiveSession();
+
     return () => {
       socket.off("connect");
       socket.off("join");
@@ -249,7 +271,8 @@ function StreamPage() {
             )}
           </>
         ) : (
-          <div className="absolute top-0 left-0 w-full h-full flex justify-center items-center">
+          <div className="absolute top-0 left-0 w-full h-full flex justify-center items-center gap-4">
+            <LoaderIcon className="animate-spin w-8 h-8" />
             <Trans i18nKey="streamWaiting">Ожидание потока</Trans>
           </div>
         )