upd

src/StreamPage.tsx

@@ -16,14 +16,18 @@ import ModalContainer from "./components/ModalContainer";
 import useModalStore from "./stores/useModalStore";
 import ShareModal from "./components/modals/ShareModal";
 import { Transition } from "react-transition-group";
-import { ToastContainer, toast } from "react-toastify";
-import "react-toastify/dist/ReactToastify.css";
 import FullscreenIcon from "./components/icons/FullscreenIcon";
 import WindowedModeIcon from "./components/icons/WindowedModeIcon";
 import QRIcon from "./components/icons/QRIcon";
 import QRCodeModal from "./components/modals/QRCodeModal";
 import PersonsIcon from "./components/icons/PersonsIcon";
 import UsersManagementModal from "./components/modals/UsersManagementModal";
+import useStreamUserStore from "./stores/useStreamUserStore";
+import { ToastContainer, toast } from "react-toastify";
+import "react-toastify/dist/ReactToastify.css";
+import UserIcon from "./components/icons/UserIcon";
+import HandOnIcon from "./components/icons/HandOnIcon";
+import AlertIcon from "./components/icons/AlertIcon";
 
 function StreamPage() {
   const params = useParams();
@@ -32,7 +36,10 @@ function StreamPage() {
   const [isStreamEnded, setIsStreamEnded] = useState<boolean>(false);
   const [isStreamLoaded, setStreamLoaded] = useState<boolean>(false);
   const [socket, setSocket] = useState<any>(null);
-  const [users, setUsers] = useState<any>([]);
+  const [users, setUsers] = useStreamUserStore((state) => [
+    state.users,
+    state.setUsers,
+  ]);
   const [me, setMe] = useState<any>({});
 
   // const screen = useScreen();
@@ -49,27 +56,43 @@ function StreamPage() {
 
   function toastWarn(text: string) {
     toast.warn(text, {
-      position: "bottom-right",
-      autoClose: 5000,
-      hideProgressBar: false,
+      position: "top-center",
+      autoClose: 2000,
+      hideProgressBar: true,
       closeOnClick: true,
       pauseOnHover: true,
       draggable: true,
-      progress: undefined,
       theme: "dark",
+      icon: <AlertIcon />,
+      closeButton: false,
     });
   }
 
-  function toastInfo(text: string) {
+  function toastUser(text: string) {
     toast.info(text, {
-      position: "bottom-right",
-      autoClose: 5000,
-      hideProgressBar: false,
+      position: "top-center",
+      autoClose: 2000,
+      hideProgressBar: true,
       closeOnClick: true,
       pauseOnHover: true,
       draggable: true,
-      progress: undefined,
       theme: "dark",
+      icon: <UserIcon />,
+      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,
     });
   }
 
@@ -113,7 +136,7 @@ function StreamPage() {
       setUsers(room.users);
       // console.log("join: ", _socketId, room.users);
 
-      toastInfo("Присоеденился новый участник");
+      toastUser("Присоеденился новый участник");
     });
 
     socket.on("update", (_socketId, room) => {
@@ -126,7 +149,11 @@ function StreamPage() {
     });
 
     socket.on("leave", (socketId) => {
-      setUsers((prev: any) => prev.filter((user: any) => user.id !== socketId));
+      setUsers(
+        useStreamUserStore
+          .getState()
+          .users.filter((user: any) => user.id !== socketId)
+      );
     });
 
     return () => {
@@ -140,7 +167,7 @@ function StreamPage() {
 
   useEffect(() => {
     if (me && me.allowControl && !me.admin) {
-      toastInfo("Управление получено");
+      toastHandOn("Управление получено");
     }
   }, [me]);
 
@@ -234,7 +261,6 @@ function StreamPage() {
             onClick={() =>
               setModal(
                 <UsersManagementModal
-                  users={users}
                   me={me}
                   handleUpdate={(socketId, params) => update(socketId, params)}
                   handleKick={(socketId) => kick(socketId)}