From 652554c6a21d0d0d7d4b97a050cae5266d0d8e63 Mon Sep 17 00:00:00 2001
From: inmake <inmake.ru@gmail.com>
Date: Wed, 10 Jul 2024 14:04:20 +0500
Subject: [PATCH] upd

---
 src/App.tsx                               |   2 +-
 src/components/PixelStreamingWrapper2.tsx |   3 +
 src/pages/StreamPage3.tsx                 | 170 ++++++++++++++++------
 3 files changed, 129 insertions(+), 46 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index f84dec8..5f4a3b4 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -31,7 +31,7 @@ function App() {
     state.setIsOpen,
   ]);
   const [loading, setLoading] = useState<boolean>(false);
-  const [countdownTimer, setCountdownTimer] = useState(10);
+  const [countdownTimer, setCountdownTimer] = useState(15);
   const { t, i18n } = useTranslation();
   const build = searchParams.get("build") || null;
   const type = searchParams.get("type") || "demo";
diff --git a/src/components/PixelStreamingWrapper2.tsx b/src/components/PixelStreamingWrapper2.tsx
index a7acc38..dbfb590 100644
--- a/src/components/PixelStreamingWrapper2.tsx
+++ b/src/components/PixelStreamingWrapper2.tsx
@@ -41,6 +41,9 @@ export const PixelStreamingWrapper2 = ({
       // Save the library instance into component state so that it can be accessed later:
       setPixelStreaming(streaming);
 
+      document.getElementById("hiddenInput")?.remove();
+      document.getElementById("editTextButton")?.remove();
+
       // Clean up on component unmount:
       return () => {
         try {
diff --git a/src/pages/StreamPage3.tsx b/src/pages/StreamPage3.tsx
index d95d539..660dfad 100644
--- a/src/pages/StreamPage3.tsx
+++ b/src/pages/StreamPage3.tsx
@@ -4,7 +4,7 @@
 import { useEffect, useRef, useState } from "react";
 import { PixelStreamingWrapper2 } from "../components/PixelStreamingWrapper2";
 import api from "../utils/api";
-import { useParams } from "react-router-dom";
+import { useParams, useSearchParams } from "react-router-dom";
 import useStateRef from "react-usestateref";
 import Peer from "peerjs";
 import useIsAudioActive from "use-is-audio-active";
@@ -31,6 +31,8 @@ import FullscreenIcon from "../components/icons/FullscreenIcon";
 import ShareIcon from "../components/icons/ShareIcon";
 import { useFullscreen } from "ahooks";
 import InviteModal from "../components/modals/stream/InviteModal";
+import Tooltip from "../components/Tooltip";
+import { toast, ToastContainer } from "react-toastify";
 
 // import MoreIcon from "../components/icons/MoreIcon";
 
@@ -38,6 +40,7 @@ const userId = uuidv4();
 
 function StreamPage3() {
   const params = useParams();
+  const [searchParams] = useSearchParams();
   const [WSUrl, setWSUrl] = useState<string>("");
 
   const localVideoRef = useRef<HTMLVideoElement>(null);
@@ -53,8 +56,8 @@ function StreamPage3() {
   const isSpeaking = useIsAudioActive({
     source: localStream.getTracks().length ? localStream : null,
   });
-  const [users, setUsers] = useState<IUser[]>([]);
-  const [me, setMe] = useState<IUser>();
+  const [users, setUsers, usersRef] = useStateRef<IUser[]>([]);
+  const [me, setMe, meRef] = useStateRef<IUser>();
   const isCallInit = useRef<boolean>(false);
   const [roomId] = useState<string>(params.id!);
   const [socket, setSocket] = useState<Socket>();
@@ -141,9 +144,21 @@ function StreamPage3() {
   }
 
   function initSocket() {
+    const superAdmin = searchParams.has("admin", true);
+
+    console.log("superAdmin", superAdmin);
+
     const socket = io(import.meta.env.VITE_SOCKET_URL, {
       transports: ["websocket"],
-      auth: { roomId, user: { id: userId, name, peerId } },
+      auth: {
+        roomId,
+        user: {
+          id: userId,
+          name,
+          peerId,
+          superAdmin,
+        },
+      },
     });
 
     socket.on("update", async (users: IUser[]) => {
@@ -164,7 +179,17 @@ function StreamPage3() {
     });
 
     socket.on("request-control", (userId) => {
-      console.log("request-control", userId);
+      const user = usersRef.current.find((user) => user.id === userId);
+
+      if (user?.id === meRef.current?.id || !meRef.current?.isAdmin) return;
+
+      toast.info(`${user?.name} запрашивает разрешение на управление`);
+    });
+
+    socket.on("transfer-control", (userId) => {
+      if (meRef.current?.id !== userId) return;
+
+      toast.info(`Вы получили разрешение на управление`);
     });
 
     socket.on("connect", () => {
@@ -281,7 +306,10 @@ function StreamPage3() {
   }, [users.length]);
 
   return (
-    <div ref={fullscreenRef} className="h-[100dvh] flex flex-col bg-[#111C26]">
+    <div
+      ref={fullscreenRef}
+      className="h-[100dvh] flex flex-col bg-[#111C26] overflow-hidden"
+    >
       {isEnded === false ? (
         <>
           <div className="flex items-center bg-white h-12 px-6">
@@ -301,28 +329,64 @@ function StreamPage3() {
                 <p className="text-xs">{name}</p>
               </div>
               <div className="flex items-center gap-2">
-                <Button
-                  variant="secondary"
-                  icon={me?.isControlAllowed ? <HandOnIcon /> : <HandOffIcon />}
-                  onlyIcon
-                  onClick={() =>
-                    me!.isAdmin
-                      ? transferControl(me!.id)
-                      : requestControl(me!.id)
-                  }
-                />
-                <Button
-                  variant="secondary"
-                  icon={isMicEnabled ? <MicroOnIcon /> : <MicroOffIcon />}
-                  onlyIcon
-                  onClick={toggleMic}
-                />
-                <Button
-                  variant="secondary"
-                  icon={isCameraEnabled ? <CameraOnIcon /> : <CameraOffIcon />}
-                  onlyIcon
-                  onClick={toggleCamera}
-                />
+                <div className="relative group">
+                  <Button
+                    variant="secondary"
+                    icon={
+                      me?.isControlAllowed ? <HandOnIcon /> : <HandOffIcon />
+                    }
+                    onlyIcon
+                    onClick={() =>
+                      me!.isAdmin
+                        ? transferControl(me!.id)
+                        : requestControl(me!.id)
+                    }
+                  />
+                  {me?.isAdmin && !me.isControlAllowed && (
+                    <Tooltip text={"Вернуть управление"} />
+                  )}
+
+                  {!me?.isAdmin && !me?.isControlAllowed && (
+                    <Tooltip text={"Запросить управление"} />
+                  )}
+                </div>
+
+                {permission && (
+                  <>
+                    <div className="relative group">
+                      <Button
+                        variant="secondary"
+                        icon={isMicEnabled ? <MicroOnIcon /> : <MicroOffIcon />}
+                        onlyIcon
+                        onClick={toggleMic}
+                      />
+                      <Tooltip
+                        text={
+                          isMicEnabled
+                            ? "Выключить микрофон"
+                            : "Включить микрофон"
+                        }
+                      />
+                    </div>
+                    <div className="relative group">
+                      <Button
+                        variant="secondary"
+                        icon={
+                          isCameraEnabled ? <CameraOnIcon /> : <CameraOffIcon />
+                        }
+                        onlyIcon
+                        onClick={toggleCamera}
+                      />
+                      <Tooltip
+                        text={
+                          isCameraEnabled
+                            ? "Выключить камеру"
+                            : "Включить камеру"
+                        }
+                      />
+                    </div>
+                  </>
+                )}
               </div>
               <div className="h-4 w-px bg-[#DAE0E5]"></div>
               {users.map((user) => {
@@ -347,12 +411,15 @@ function StreamPage3() {
                         onlyIcon
                       /> */}
                           {/* <div className="absolute"> */}
-                          <Button
-                            variant="secondary"
-                            icon={<HandOnIcon />}
-                            onlyIcon
-                            onClick={() => transferControl(user.id)}
-                          />
+                          <div className="relative group">
+                            <Button
+                              variant="secondary"
+                              icon={<HandOnIcon />}
+                              onlyIcon
+                              onClick={() => transferControl(user.id)}
+                            />
+                            <Tooltip text={"Передать управление"} />
+                          </div>
                           {/* </div> */}
                         </div>
                       )}
@@ -362,19 +429,29 @@ function StreamPage3() {
               })}
             </div>
             <div className="flex gap-2 ml-auto">
-              <Button
-                variant="secondary"
-                icon={<ShareIcon />}
-                onlyIcon
-                onClick={() => setModal(<InviteModal />)}
-              />
-              {!isIOS && (
+              <div className="relative group">
                 <Button
                   variant="secondary"
-                  icon={isFullscreen ? <WindowIcon /> : <FullscreenIcon />}
+                  icon={<ShareIcon />}
                   onlyIcon
-                  onClick={toggleFullscreen}
+                  onClick={() => setModal(<InviteModal />)}
                 />
+                <Tooltip text={"Поделиться"} />
+              </div>
+              {!isIOS && (
+                <div className="relative group">
+                  <Button
+                    variant="secondary"
+                    icon={isFullscreen ? <WindowIcon /> : <FullscreenIcon />}
+                    onlyIcon
+                    onClick={toggleFullscreen}
+                  />
+                  <Tooltip
+                    text={
+                      isFullscreen ? "Оконный режим" : "Полноэкранный режим"
+                    }
+                  />
+                </div>
               )}
             </div>
           </div>
@@ -395,12 +472,14 @@ function StreamPage3() {
             {!users.find((user) => user.id === userId)?.isControlAllowed && (
               <div
                 className="absolute top-0 left-0 w-full h-full"
-                onClick={() => alert("")}
+                onClick={() =>
+                  toast.warn("Необходимо запросить разрешение на управление")
+                }
               ></div>
             )}
 
             <div className="absolute top-2 left-2 space-y-2">
-              <div className="relative">
+              <div className={`relative ${!permission ? "hidden" : ""}`}>
                 <video
                   ref={localVideoRef}
                   className={`aspect-video w-[216px] h-[162px] rounded-lg object-cover bg-gray-500 -scale-x-100 ring-2 ${
@@ -427,6 +506,7 @@ function StreamPage3() {
             </div>
           </div>
           <ModalContainer2 />
+          <ToastContainer />
         </>
       ) : (
         <div className="flex-1 flex items-center justify-center p-8">