diff --git a/src/components/Chat2.tsx b/src/components/Chat2.tsx
index eb2f9ce..4344d17 100644
--- a/src/components/Chat2.tsx
+++ b/src/components/Chat2.tsx
@@ -9,6 +9,7 @@ import useStreamUserStore from "../stores/useStreamUserStore";
 import { FormEvent, useEffect, useRef, useState } from "react";
 import useSocketStore from "../stores/useSocketStore";
 import useChatStore from "../stores/useChatStore";
+import { isMobile } from "react-device-detect";
 
 interface Props {
   onClose: () => void;
@@ -26,6 +27,8 @@ function Chat2({ onClose }: Props) {
   function sendMessage(e: FormEvent) {
     e.preventDefault();
 
+    if (!messageText || messageText === " ") return;
+
     socket?.emit("message", messageText);
 
     setMessageText("");
@@ -42,22 +45,24 @@ function Chat2({ onClose }: Props) {
 
   return (
     <div
-      className={`chat relative h-[calc(100vh-48px)] flex flex-col w-[296px] bg-white`}
+      className={`chat lg:relative absolute right-0 lg:h-[calc(100dvh-48px)] h-dvh flex flex-col w-[296px] bg-white border-t border-[#DAE0E5]`}
     >
-      <div className="flex items-center justify-between p-2 pl-4 border-b border-[#DAE0E5]">
-        <p className="text-sm font-semibold">
-          <Trans i18nKey={"chat"}>Чат</Trans>
-        </p>
-        <Button
-          variant="tertiary"
-          icon={<CloseIcon />}
-          onlyIcon
-          onClick={onClose}
-        />
+      <div className="p-4 pb-2">
+        <div className="flex items-center justify-between border-b border-[#DAE0E5] pb-4">
+          <p className="text-sm font-semibold">
+            <Trans i18nKey={"chat"}>Чат демонстрации</Trans>
+          </p>
+          <Button
+            variant="tertiary"
+            icon={<CloseIcon />}
+            onlyIcon
+            onClick={onClose}
+          />
+        </div>
       </div>
       <div
         ref={messagesRef}
-        className="flex-1 overflow-y-scroll flex flex-col gap-1 p-3 border-b border-[#DAE0E5]"
+        className="flex-1 overflow-y-scroll flex flex-col gap-1 px-4 pb-2 pt-0 border-b border-[#DAE0E5]"
       >
         {messages.map((message, index) => (
           <div
@@ -85,12 +90,15 @@ function Chat2({ onClose }: Props) {
       <div className="p-3 pl-4">
         <form onSubmit={sendMessage} className="flex items-center gap-3">
           <input
+            autoFocus={isMobile ? false : true}
             ref={messageTextRef}
             type="text"
             placeholder={t("writeAMessage")}
             className="w-full text-sm bg-transparent outline-none"
             value={messageText}
-            onChange={(e) => setMessageText(e.target.value)}
+            onChange={(e) =>
+              setMessageText(e.target.value.replace(/\s+/g, " "))
+            }
           />
           <button type="submit" className="text-[#49A1F5] outline-none">
             <SendChatIcon />
diff --git a/src/components/Dropdown.tsx b/src/components/Dropdown.tsx
new file mode 100644
index 0000000..ac762ac
--- /dev/null
+++ b/src/components/Dropdown.tsx
@@ -0,0 +1,41 @@
+import CloseIcon from "./icons/CloseIcon";
+import HandOffIcon from "./icons/HandOffIcon";
+// import MicroOnIcon from "./icons/MicroOnIcon";
+
+interface Props {
+  handleToggleControl: () => void;
+  handleKick: () => void;
+}
+
+function Dropdown({ handleToggleControl, handleKick }: Props) {
+  return (
+    <div className="absolute py-2 mt-4 space-y-1 bg-white rounded-lg shadow w-60">
+      {/* <button className="flex items-center gap-2 px-4 py-1 text-sm">
+        <span className="text-[#77828C]">
+          <MicroOnIcon />
+        </span>
+        <span>Отключить микрофон</span>
+      </button> */}
+      <button
+        className="flex items-center gap-2 px-4 py-1 text-sm"
+        onClick={handleToggleControl}
+      >
+        <span className="text-[#77828C]">
+          <HandOffIcon />
+        </span>
+        <span>Передать управление</span>
+      </button>
+      <button
+        className="flex items-center gap-2 px-4 py-1 text-sm"
+        onClick={handleKick}
+      >
+        <span className="text-[#EB5757]">
+          <CloseIcon />
+        </span>
+        <span>Исключить</span>
+      </button>
+    </div>
+  );
+}
+
+export default Dropdown;
diff --git a/src/components/User.tsx b/src/components/User.tsx
index daf6501..3da4573 100644
--- a/src/components/User.tsx
+++ b/src/components/User.tsx
@@ -1,82 +1,86 @@
-import { useRef, useState } from "react";
-import CloseIcon from "./icons/CloseIcon";
+import { isMobile } from "react-device-detect";
+import DesktopIcon from "./icons/DesktopIcon";
 import HandOnIcon from "./icons/HandOnIcon";
-import Button from "./ui/Button";
+import MobileIcon from "./icons/MobileIcon";
 import MoreIcon from "./icons/MoreIcon";
-import { useOnClickOutside } from "usehooks-ts";
 import Tooltip from "./Tooltip";
+import Button from "./ui/Button";
 import IUser from "../types/IUser";
+import CloseIcon from "./icons/CloseIcon";
+import { useState } from "react";
+import { useClickAway } from "@uidotdev/usehooks";
 
-interface UserProps {
+interface Props {
+  me: IUser;
   user: IUser;
-  onTransferControl: (userId: string) => void;
-  onKickUser: (userId: string) => void;
-  className?: string;
-  tooltip?: boolean;
+  handleTransferControl: () => void;
+  handleKick: () => void;
 }
 
-function User({
-  user,
-  onTransferControl,
-  onKickUser,
-  className,
-  tooltip = false,
-}: UserProps) {
-  const [isShowMore, setIsShowMore] = useState(false);
-  const moreRef = useRef(null);
+function User({ me, user, handleTransferControl, handleKick }: Props) {
+  const [showMore, setShowMore] = useState(false);
 
-  function handleClickOutside() {
-    setIsShowMore(false);
-  }
-
-  useOnClickOutside(moreRef, handleClickOutside);
-
-  function handleClickTransferControl() {
-    onTransferControl(user.id);
-    setIsShowMore(false);
-  }
-
-  function handleClickKickUser() {
-    onKickUser(user.id);
-    setIsShowMore(false);
-  }
+  const ref = useClickAway<HTMLDivElement>(() => {
+    setShowMore(false);
+  });
 
   return (
-    <div ref={moreRef} className="relative">
-      <Button
-        variant="tertiary"
-        icon={<MoreIcon />}
-        onlyIcon
-        onClick={() => setIsShowMore((prev) => !prev)}
-        className="group relative"
-      >
-        {tooltip && <Tooltip text="Действия" />}
-      </Button>
+    <div key={user.id} className="flex items-center gap-2">
+      <div className="relative w-6 h-6 bg-[#E6ECF2] rounded-full flex items-center justify-center">
+        <p className="text-xs font-semibold">{user.name[0]?.toUpperCase()}</p>
+        {user?.isControlAllowed && (
+          <div className="absolute bottom-0 right-0 bg-[#49A1F5] w-2 h-2 rounded-full border border-white"></div>
+        )}
+      </div>
+      <p className="text-xs">{user.name}</p>
+      <div className="text-[#CCCCCC]">
+        {isMobile ? <MobileIcon /> : <DesktopIcon />}
+      </div>
 
-      {isShowMore && (
-        <div
-          className={`absolute top-[calc(100%+18px)] bg-white rounded-lg py-2 z-10 shadow ${className}`}
-        >
-          <button
-            className="flex items-center gap-2 px-4 py-1 hover:bg-[#E6ECF2] transition-colors w-full"
-            onClick={handleClickTransferControl}
-          >
+      {me.isAdmin && (
+        <div ref={ref} className="relative z-10">
+          <Button
+            variant="tertiary"
+            icon={<MoreIcon />}
+            onlyIcon
+            onClick={() => setShowMore(true)}
+          />
+          <Tooltip text={"Действия"} />
+
+          {showMore && (
+            <div className="absolute py-2 mt-4 space-y-1 bg-white rounded-lg shadow w-60">
+              {/* <button className="flex items-center gap-2 px-4 py-1 text-sm hover:bg-[#E6ECF2] transition-colors">
             <span className="text-[#77828C]">
-              <HandOnIcon />
+              <MicroOnIcon />
             </span>
-            <span className="text-sm whitespace-nowrap">
-              Передать управление
-            </span>
-          </button>
-          <button
-            className="flex items-center gap-2 px-4 py-1 hover:bg-[#E6ECF2] transition-colors w-full"
-            onClick={handleClickKickUser}
-          >
-            <span className="text-[#EB5757]">
-              <CloseIcon />
-            </span>
-            <span className="text-sm">Исключить</span>
-          </button>
+            <span>Отключить микрофон</span>
+          </button> */}
+              <button
+                className="flex items-center w-full gap-2 px-4 py-1 text-sm hover:bg-[#E6ECF2] transition-colors"
+                onClick={() => {
+                  handleTransferControl();
+                  setShowMore(false);
+                }}
+              >
+                <span className="text-[#77828C]">
+                  <HandOnIcon />
+                </span>
+                <span>Передать управление</span>
+              </button>
+              <button
+                className="flex items-center w-full gap-2 px-4 py-1 text-sm hover:bg-[#E6ECF2] transition-colors"
+                onClick={() => {
+                  handleKick();
+                  setShowMore(false);
+                }}
+              >
+                <span className="text-[#EB5757]">
+                  <CloseIcon />
+                </span>
+                <span>Исключить</span>
+              </button>
+            </div>
+          )}
         </div>
       )}
     </div>
diff --git a/src/main.tsx b/src/main.tsx
index 43cff56..f60c714 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -7,8 +7,7 @@ import App from "./App";
 // import ErrorBoundary from "./ErrorBoundary";
 import HistoryPage from "./HistoryPage";
 import ScheduledPage from "./ScheduledPage";
-// import StreamPage2 from "./pages/StreamPage2";
-import StreamPage3 from "./pages/StreamPage3";
+import StreamPage from "./pages/StreamPage";
 
 const router = createBrowserRouter([
   {
@@ -18,7 +17,7 @@ const router = createBrowserRouter([
   },
   {
     path: "/stream/:id",
-    element: <StreamPage3 />,
+    element: <StreamPage />,
   },
   {
     path: "/history",
diff --git a/src/pages/StreamPage3.tsx b/src/pages/StreamPage.tsx
similarity index 86%
rename from src/pages/StreamPage3.tsx
rename to src/pages/StreamPage.tsx
index 1ebe3e6..dd1a699 100644
--- a/src/pages/StreamPage3.tsx
+++ b/src/pages/StreamPage.tsx
@@ -43,13 +43,14 @@ import DesktopIcon from "../components/icons/DesktopIcon";
 import MobileIcon from "../components/icons/MobileIcon";
 import ChatIcon from "../components/icons/ChatIcon";
 import useChatStore from "../stores/useChatStore";
+import User from "../components/User";
 // import ChatIcon from "../components/icons/ChatIcon";
 
 // import MoreIcon from "../components/icons/MoreIcon";
 
 const userId = uuidv4();
 
-function StreamPage3() {
+function StreamPage() {
   const params = useParams();
   const [searchParams] = useSearchParams();
   const [WSUrl, setWSUrl] = useState<string>("");
@@ -218,6 +219,17 @@ function StreamPage3() {
       toast.info(`Вы получили разрешение на управление`);
     });
 
+    socket.on("kick", (userId) => {
+      if (useStreamUserStore.getState().me?.id !== userId) return;
+
+      window.close();
+      socket.disconnect();
+      setPeerInstance(undefined);
+      setWSUrl("");
+      setUsers([]);
+      setRemoteStreams([]);
+    });
+
     socket.on("message", ({ userId, text }) => {
       setMessages([...useChatStore.getState().messages, { userId, text }]);
     });
@@ -289,10 +301,13 @@ function StreamPage3() {
   }
 
   function requestControl(userId: string) {
-    console.log("requestControl func", userId);
     socket?.emit("request-control", userId);
   }
 
+  function kick(userId: string) {
+    socket?.emit("kick", userId);
+  }
+
   async function getActiveSession() {
     const activeSession: any = await api
       .get(`activeSessions/${params.id}`)
@@ -443,50 +458,22 @@ function StreamPage3() {
               </div>
               <div className="h-4 w-px bg-[#DAE0E5] lg:block hidden"></div>
               <div className="hidden gap-6 lg:flex">
-                {users.map((user) => {
-                  if (user.id !== userId) {
-                    return (
-                      <div key={user.id} className="flex items-center gap-2">
-                        <div className="relative w-6 h-6 bg-[#E6ECF2] rounded-full flex items-center justify-center">
-                          <p className="text-xs font-semibold">
-                            {name[0]?.toUpperCase()}
-                          </p>
-                          {user?.isControlAllowed && (
-                            <div className="absolute bottom-0 right-0 bg-[#49A1F5] w-2 h-2 rounded-full border border-white"></div>
-                          )}
-                        </div>
-                        <p className="text-xs">{user.name}</p>
-                        <div className="text-[#CCCCCC]">
-                          {isMobile ? <MobileIcon /> : <DesktopIcon />}
-                        </div>
-
-                        {me?.isAdmin && me?.isControlAllowed && (
-                          <div className="relative">
-                            {/* <Button
-                        variant="secondary"
-                        icon={<MoreIcon />}
-                        onlyIcon
-                      /> */}
-                            {/* <div className="absolute"> */}
-                            <div className="relative group">
-                              <Button
-                                variant="secondary"
-                                icon={<HandOnIcon />}
-                                onlyIcon
-                                onClick={() => transferControl(user.id)}
-                              />
-                              <Tooltip text={"Передать управление"} />
-                            </div>
-                            {/* </div> */}
-                          </div>
-                        )}
-                      </div>
-                    );
-                  }
-                })}
+                {me &&
+                  users.map((user) => {
+                    if (user.id !== userId) {
+                      return (
+                        <User
+                          me={me}
+                          user={user}
+                          handleTransferControl={() => transferControl(user.id)}
+                          handleKick={() => kick(user.id)}
+                        />
+                      );
+                    }
+                  })}
               </div>
             </div>
-            <div className="flex gap-2 max-lg:flex-col lg:ml-auto">
+            <div className="flex items-center gap-2 lg:gap-4 max-lg:flex-col lg:ml-auto">
               <div className="relative group">
                 <Button
                   variant="secondary"
@@ -496,30 +483,33 @@ function StreamPage3() {
                 />
                 <Tooltip text={isShowChat ? "Скрыть чат" : "Показать чат"} />
               </div>
-              <div className="relative group">
-                <Button
-                  variant="secondary"
-                  icon={<ShareIcon />}
-                  onlyIcon
-                  onClick={() => setModal(<InviteModal />)}
-                />
-                <Tooltip text={"Поделиться"} />
-              </div>
-              {!isIOS && (
+              <div className="w-px h-4 bg-[#DAE0E5] max-lg:hidden"></div>
+              <div className="flex gap-2 max-lg:flex-col lg:ml-auto">
                 <div className="relative group">
                   <Button
                     variant="secondary"
-                    icon={isFullscreen ? <WindowIcon /> : <FullscreenIcon />}
+                    icon={<ShareIcon />}
                     onlyIcon
-                    onClick={toggleFullscreen}
-                  />
-                  <Tooltip
-                    text={
-                      isFullscreen ? "Оконный режим" : "Полноэкранный режим"
-                    }
+                    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>
           </div>
           <div className="relative flex flex-1">
@@ -607,4 +597,4 @@ function StreamPage3() {
   );
 }
 
-export default StreamPage3;
+export default StreamPage;
diff --git a/src/pages/StreamPage2.css b/src/pages/StreamPage2.css
deleted file mode 100644
index 991cda3..0000000
--- a/src/pages/StreamPage2.css
+++ /dev/null
@@ -1,33 +0,0 @@
-.entering {
-  opacity: 1;
-}
-
-.entered {
-  opacity: 1;
-}
-
-.exiting {
-  opacity: 0;
-}
-
-.exited {
-  opacity: 0;
-}
-
-:root {
-  --toastify-toast-offset: 52px;
-}
-
-.Toastify__toast-body {
-  padding: 0;
-  margin: 0 4px 0 0;
-  align-items: normal;
-  font-family: "Inter", sans-serif;
-  font-size: 14px;
-  color: #111c26;
-}
-
-.Toastify__toast-icon {
-  width: auto;
-  margin-inline-end: 8px;
-}
diff --git a/src/pages/StreamPage2.tsx b/src/pages/StreamPage2.tsx
deleted file mode 100644
index 71fe581..0000000
--- a/src/pages/StreamPage2.tsx
+++ /dev/null
@@ -1,1234 +0,0 @@
-/* eslint-disable @typescript-eslint/no-unused-vars */
-/* eslint-disable react-hooks/rules-of-hooks */
-/* eslint-disable @typescript-eslint/no-non-null-assertion */
-/* eslint-disable @typescript-eslint/no-explicit-any */
-/* eslint-disable react-hooks/exhaustive-deps */
-import "./StreamPage2.css";
-import { PixelStreamingWrapper } from "../components/PixelStreamingWrapper";
-import { useParams, useSearchParams } from "react-router-dom";
-import { FormEvent, useEffect, useRef } from "react";
-import { Transition } from "react-transition-group";
-import Button from "../components/ui/Button";
-// import CloseIcon from "../components/icons/CloseIcon";
-import HandOffIcon from "../components/icons/HandOffIcon";
-// import MicroOffIcon from "../components/icons/MicroOffIcon";
-import PersonsIcon from "../components/icons/PersonsIcon";
-import MicroOnIcon from "../components/icons/MicroOnIcon";
-// import MoreIcon from "../components/icons/MoreIcon";
-import FullscreenIcon from "../components/icons/FullscreenIcon";
-import WindowIcon from "../components/icons/WindowIcon";
-import ChatIcon from "../components/icons/ChatIcon";
-import ShareIcon from "../components/icons/ShareIcon";
-// import GearIcon from "../components/icons/GearIcon";
-import { useFullscreen } from "ahooks";
-import api from "../utils/api";
-import { Socket, io } from "socket.io-client";
-import { v4 as uuidv4 } from "uuid";
-import HandOnIcon from "../components/icons/HandOnIcon";
-import User from "../components/User";
-import Tooltip from "../components/Tooltip";
-import { Bounce, ToastContainer, toast } from "react-toastify";
-import "react-toastify/dist/ReactToastify.css";
-import InfoBlueIcon from "../components/icons/InfoBlueIcon";
-import CloseIcon from "../components/icons/CloseIcon";
-import SendChatIcon from "../components/icons/SendChatIcon";
-import UserIcon from "../components/icons/UserIcon";
-import { isIOS, isMobile, useMobileOrientation } from "react-device-detect";
-import LinkIcon from "../components/icons/LinkIcon";
-import removeSpaces from "../utils/removeSpaces";
-import MobileIcon from "../components/icons/MobileIcon";
-import DesktopIcon from "../components/icons/DesktopIcon";
-import { format } from "date-fns";
-import IUser from "../types/IUser";
-import IMessage from "../types/IMessage";
-import InfoIcon from "../components/icons/InfoIcon";
-import Rotate64Icon from "../components/icons/Rotate64Icon";
-import { useClipboard } from "use-clipboard-copy";
-import QRCode from "react-qr-code";
-import Star12Icon from "../components/icons/Star12Icon";
-import { Trans, useTranslation } from "react-i18next";
-import Countdown from "react-countdown";
-import useStreamStore from "../stores/useStreamStore";
-import Peer from "peerjs";
-import Video from "../components/Video";
-import MicroOffIcon from "../components/icons/MicroOffIcon";
-import useIsAudioActive from "use-is-audio-active";
-import CameraOffIcon from "../components/icons/CameraOffIcon";
-import CameraOnIcon from "../components/icons/CameraOnIcon";
-import useState from "react-usestateref";
-
-const renderer = ({ minutes, seconds }: any) => {
-  return (
-    <>
-      {String(minutes).padStart(2, "0")}:{String(seconds).padStart(2, "0")}
-    </>
-  );
-};
-
-interface IRemoteStream {
-  peerId: string;
-  mediaStream: MediaStream;
-}
-
-function StreamPage2() {
-  const { t, i18n } = useTranslation();
-  const { isPortrait } = useMobileOrientation();
-  const params = useParams();
-  const [searchParams] = useSearchParams();
-  const [socket, setSocket] = useState<Socket>();
-  const [wsUrl, setWsUrl] = useState<string>();
-  const [isEnded, setIsEnded] = useState<boolean>(false);
-  const { name, setName } = useStreamStore();
-  const userId = uuidv4();
-  const [step, setStep] = useState<number>(1);
-  const nameRef = useRef<HTMLInputElement>(null!);
-  const [users, setUsers] = useState<IUser[]>([]);
-  const fullscreenRef = useRef(null);
-  const [isFullscreen, { toggleFullscreen }] = useFullscreen(fullscreenRef);
-  const [isShowChat, setIsShowChat] = useState<boolean>(false);
-  const [isShowUsers, setIsShowUsers] = useState<boolean>(false);
-  const [isShowInviteModal, setIsShowInviteModal] = useState(false);
-  const [isVideoInitialized, setIsVideoInitialized] = useState<boolean>(false);
-  const [messageText, setMessageText] = useState("");
-  const [messages] = useState<IMessage[]>([]);
-  const messagesRef = useRef<HTMLDivElement>(null);
-  const messageTextRef = useRef<HTMLInputElement>(null);
-  const parentElementRef = useRef<HTMLDivElement>(null);
-  const clipboard = useClipboard();
-  const link = window.location.origin + window.location.pathname;
-  const [anyNewMessages, setAnyNewMessages] = useState(false);
-  const [endAt, setEndAt] = useState();
-
-  const localVideoRef = useRef<HTMLVideoElement>(null);
-  const [localStream, setLocalStream] = useState<MediaStream>(
-    new MediaStream()
-  );
-  const [remoteStreams, setRemoteStreams, remoteStreamsRef] = useState<
-    IRemoteStream[]
-  >([]);
-  const [peerId, setPeerId] = useState<string>("");
-  const [peerInstance, setPeerInstance] = useState<Peer>();
-  const [permission, setPermission] = useState<boolean>();
-  const isSpeaking = useIsAudioActive({
-    source: localStream.getTracks().length ? localStream : null,
-  });
-  const isCallInit = useRef<boolean>(false);
-
-  const [isVideoEnabled, setIsVideoEnabled] = useState<boolean>(false);
-  const [isAudioEnabled, setIsAudioEnabled] = useState<boolean>(false);
-
-  async function getLang() {
-    const { countryCode, error }: { countryCode: string; error: string } =
-      await api.get("getCountryCode").json();
-
-    if (!error && countryCode !== "RU") {
-      i18n.changeLanguage("en");
-    }
-  }
-
-  function handleClickClipboard() {
-    clipboard.copy();
-
-    toast.info("Ссылка скопирована в буфер обмена", {
-      icon: <InfoIcon className="text-blue-500" />,
-      position: "top-center",
-      autoClose: 3000,
-      hideProgressBar: true,
-      closeOnClick: true,
-      pauseOnHover: true,
-      draggable: true,
-      progress: undefined,
-      theme: "light",
-      transition: Bounce,
-    });
-  }
-
-  async function sendMessage(e: FormEvent) {
-    e.preventDefault();
-
-    const text = removeSpaces(messageText);
-
-    if (text) {
-      const name = users.find((user) => user.id === userId)?.name;
-      socket?.emit("message", { name, text });
-    }
-
-    setMessageText("");
-    messageTextRef.current?.focus();
-  }
-
-  async function getActiveSession() {
-    const activeSession: any = await api
-      .get(`activeSessions/${params.id}`)
-      .json();
-
-    if (activeSession?.endAt) {
-      setEndAt(activeSession.endAt);
-    }
-
-    return activeSession;
-  }
-
-  async function checkSessionStatus() {
-    const activeSession = await getActiveSession();
-
-    if (!activeSession || activeSession.status === "error") {
-      setIsEnded(true);
-      return;
-    }
-  }
-
-  async function getWsUrl() {
-    const activeSession = await getActiveSession();
-
-    if (!activeSession || activeSession.status === "error") {
-      setIsEnded(true);
-      return;
-    }
-
-    setIsEnded(false);
-    setWsUrl(
-      `wss://${activeSession.location}.sess.stream.graff.tech/${activeSession.name}/${activeSession.cirrusPort}/`
-    );
-
-    checkSessionStatus();
-  }
-
-  function handleSetName(e: FormEvent) {
-    e.preventDefault();
-
-    if (!name) {
-      nameRef.current.focus();
-      return;
-    }
-
-    setStep(2);
-  }
-
-  function setNameGuest() {
-    i18n.language === "ru" ? setName("Гость") : setName("Guest");
-
-    setStep(2);
-  }
-
-  function toggleVideo() {
-    localStream.getVideoTracks().forEach((track) => {
-      track.enabled = !track.enabled;
-
-      if (!permission) return;
-      setIsVideoEnabled(track.enabled);
-    });
-  }
-
-  function toggleAudio() {
-    localStream.getAudioTracks().forEach((track) => {
-      track.enabled = !track.enabled;
-
-      if (!permission) return;
-      setIsAudioEnabled(track.enabled);
-    });
-  }
-
-  function transferControl(userId: string) {
-    socket?.emit("transferControl", userId);
-  }
-
-  function requestControl(userId: string) {
-    socket?.emit("requestControl", userId);
-
-    toast.info(`Вы запросили разрешение на управление`, {
-      icon: <InfoBlueIcon />,
-      position: "top-center",
-      autoClose: 3000,
-      hideProgressBar: false,
-      closeOnClick: true,
-      pauseOnHover: true,
-      draggable: true,
-      progress: undefined,
-      theme: "light",
-      transition: Bounce,
-    });
-  }
-
-  function kickUser(userId: string) {
-    socket?.emit("kickUser", userId);
-  }
-
-  async function startCall(remotePeerId: string) {
-    if (!peerInstance) return;
-
-    console.log("startCall", remotePeerId);
-
-    const options = {
-      constraints: {
-        offerToReceiveVideo: true,
-        offerToReceiveAudio: true,
-      },
-    };
-
-    const call = peerInstance.call(remotePeerId, localStream, options as any);
-
-    let accept = true;
-    call.on("stream", (remoteStream) => {
-      if (!accept) return;
-      console.log("setRemoteStreams", remoteStream);
-      setRemoteStreams((prev) => [
-        ...prev,
-        { peerId: remotePeerId, mediaStream: remoteStream },
-      ]);
-      accept = false;
-    });
-  }
-
-  async function getUserMedia() {
-    try {
-      const mediaStream = await navigator.mediaDevices.getUserMedia({
-        video: true,
-        audio: true,
-      });
-
-      if (!localVideoRef.current) return;
-
-      localVideoRef.current.srcObject = mediaStream;
-      localVideoRef.current.onloadedmetadata = () => {
-        localVideoRef.current?.play();
-      };
-
-      setLocalStream(mediaStream);
-      setPermission(true);
-      console.log("setLocalStream mediaStream", mediaStream);
-    } catch (error) {
-      setPermission(false);
-      console.log("ERROR: ", error);
-    }
-  }
-
-  function initPeer() {
-    const peer = new Peer();
-
-    peer.on("open", (id) => {
-      setPeerId(id);
-    });
-
-    peer.on("call", (call) => {
-      call.answer(localStream || undefined);
-
-      let accept = true;
-      call.on("stream", (remoteStream) => {
-        if (!accept) return;
-        setRemoteStreams((prev) => [
-          ...prev,
-          { peerId: call.peer, mediaStream: remoteStream },
-        ]);
-        accept = false;
-      });
-    });
-
-    setPeerInstance(peer);
-  }
-
-  function initSocket() {
-    const socket = io(import.meta.env.VITE_SOCKET_URL, {
-      transports: ["websocket"],
-      auth: {
-        roomId: params.id,
-        user: {
-          id: userId,
-          name: name,
-          device: isMobile ? "mobile" : "desktop",
-          isAdmin: searchParams.has("admin", true),
-          peerId,
-        },
-      },
-    });
-
-    socket.on("update", async (users: IUser[]) => {
-      console.log("isCallInit", isCallInit.current);
-
-      if (!isCallInit.current) {
-        for (const user of users) {
-          if (userId === user.id) continue;
-
-          await startCall(user.peerId);
-        }
-
-        isCallInit.current = true;
-      }
-
-      setUsers(users);
-    });
-
-    setSocket(socket);
-    setStep(3);
-  }
-
-  useEffect(() => {
-    console.log("users", users);
-  }, [users]);
-
-  function updateRemoteStreams() {
-    setTimeout(() => {
-      console.log("users", users);
-
-      const newRemoteStreams = remoteStreamsRef.current.filter((remoteStream) =>
-        users.some((user) => user.peerId === remoteStream.peerId)
-      );
-
-      setRemoteStreams(newRemoteStreams);
-    }, 500);
-  }
-
-  useEffect(() => {
-    getLang();
-    getWsUrl();
-  }, []);
-
-  useEffect(() => {
-    document.title = t("title");
-  }, [i18n.language]);
-
-  useEffect(() => {
-    if (!name) return;
-
-    setName(name.trim());
-  }, [name]);
-
-  useEffect(() => {
-    if (!isShowChat || messagesRef.current?.scrollTop === undefined) return;
-
-    messagesRef.current.scrollTop = messagesRef.current.scrollHeight;
-  }, [messages, isShowChat]);
-
-  useEffect(() => {
-    if (!messages.length || isShowChat) return;
-
-    setAnyNewMessages(true);
-  }, [messages]);
-
-  useEffect(() => {
-    if (isShowChat) {
-      setAnyNewMessages(false);
-    }
-  }, [isShowChat]);
-
-  // useEffect(() => {
-  //   if (!peerId) return;
-
-  //   const socket = io(import.meta.env.VITE_SOCKET_URL, {
-  //     auth: {
-  //       roomId: params.id,
-  //       user: {
-  //         id: userId,
-  //         name: name,
-  //         device: isMobile ? "mobile" : "desktop",
-  //         isAdmin: searchParams.has("admin", true),
-  //         peerId,
-  //       },
-  //     },
-  //   });
-
-  //   // TODO
-
-  //   socket.on("message", (message: IMessage) => {
-  //     setMessages((prev) => [...prev, message]);
-  //   });
-
-  //   socket.on("requestControl", (user: IUser) => {
-  //     if (!usersRef.current.find((user) => user.id === userId)?.isAdmin) return;
-
-  //     toast.info(`${user.name} запрашивает разрешение на управление`, {
-  //       icon: <InfoBlueIcon />,
-  //       position: "top-center",
-  //       autoClose: 5000,
-  //       hideProgressBar: false,
-  //       closeOnClick: true,
-  //       pauseOnHover: true,
-  //       draggable: true,
-  //       progress: undefined,
-  //       theme: "light",
-  //       transition: Bounce,
-  //     });
-  //   });
-
-  //   socket.on("transferControl", (user: IUser) => {
-  //     if (user.id !== userId) return;
-
-  //     toast.info(`Вы получили разрешение на управление`, {
-  //       icon: <InfoBlueIcon />,
-  //       position: "top-center",
-  //       autoClose: 3000,
-  //       hideProgressBar: false,
-  //       closeOnClick: true,
-  //       pauseOnHover: true,
-  //       draggable: true,
-  //       progress: undefined,
-  //       theme: "light",
-  //       transition: Bounce,
-  //     });
-  //   });
-
-  //   socket.on("kickUser", (socketUserId: string) => {
-  //     if (socketUserId === userId) {
-  //       socket.disconnect();
-  //       window.close();
-  //       window.location.reload();
-  //     }
-  //   });
-
-  //   setSocket(socket);
-  // }, [peerId]);
-
-  useEffect(() => {
-    if (!isMobile) return;
-    if (isShowUsers) {
-      setIsShowChat(false);
-    }
-  }, [isShowUsers]);
-
-  useEffect(() => {
-    if (!isMobile) return;
-    if (isShowChat) {
-      setIsShowUsers(false);
-    }
-  }, [isShowChat]);
-
-  useEffect(() => {
-    if (step === 3) {
-      setInterval(async () => {
-        await checkSessionStatus();
-      }, 1000);
-    }
-  }, [step]);
-
-  useEffect(() => {
-    if (permission === undefined) return;
-
-    initPeer();
-  }, [permission]);
-
-  useEffect(() => {
-    if (!peerId) return;
-
-    initSocket();
-  }, [peerId]);
-
-  useEffect(() => {
-    if (!users.length) return;
-
-    updateRemoteStreams();
-  }, [users.length]);
-
-  return (
-    <>
-      {isEnded === false ? (
-        <div
-          ref={fullscreenRef}
-          className="h-[100dvh] flex flex-col overflow-hidden touch-none"
-        >
-          <div className="top-header hidden h-12 bg-white px-6 py-3 lg:flex items-center justify-between">
-            <div className="flex items-center gap-4">
-              <div className="mr-2">
-                <img src="/images/logo24.svg" alt="" />
-              </div>
-              <div className="flex items-center gap-2">
-                <div className="relative h-6 w-6 flex items-center justify-center bg-[#E6ECF2] font-semibold text-[10px] rounded-full">
-                  {name && name[0].toUpperCase()}
-                  {users.find((user) => user.id === userId)
-                    ?.isControlAllowed && (
-                    <div className="w-2 h-2 border border-white bg-[#49A1F5] absolute right-0 bottom-0 rounded-full"></div>
-                  )}
-                  {users.find((user) => user.id === userId)?.isAdmin && (
-                    <div className="absolute -top-[3px] -left-[3px] text-[#49A1F5]">
-                      <Star12Icon />
-                    </div>
-                  )}
-                </div>
-                <p className="text-xs">{name}</p>
-              </div>
-              <div className="flex gap-2">
-                {users.find((user) => user.id === userId)?.isControlAllowed ? (
-                  <Button variant="secondary" icon={<HandOnIcon />} onlyIcon />
-                ) : users.find((user) => user.id === userId)?.isAdmin ? (
-                  <Button
-                    variant="secondary"
-                    icon={<HandOffIcon />}
-                    onlyIcon
-                    onClick={() => transferControl(userId)}
-                    className="group relative"
-                  >
-                    <Tooltip text="Вернуть управление" />
-                  </Button>
-                ) : (
-                  <Button
-                    variant="secondary"
-                    icon={<HandOffIcon />}
-                    onlyIcon
-                    onClick={() => requestControl(userId)}
-                    className="group relative"
-                  >
-                    <Tooltip text="Запросить управление" />
-                  </Button>
-                )}
-                <Button
-                  variant="secondary"
-                  icon={isVideoEnabled ? <CameraOnIcon /> : <CameraOffIcon />}
-                  onlyIcon
-                  onClick={toggleVideo}
-                />
-                <Button
-                  variant="secondary"
-                  icon={isAudioEnabled ? <MicroOnIcon /> : <MicroOffIcon />}
-                  onlyIcon
-                  onClick={toggleAudio}
-                />
-              </div>
-              <div className="w-px h-4 bg-[#DAE0E5]"></div>
-              <div className="flex gap-6">
-                {users
-                  .filter((user) => user.id !== userId)
-                  .map(
-                    (user, index) =>
-                      index < 3 && (
-                        <div key={user.id} className="flex items-center gap-2">
-                          <div className="relative h-6 w-6 flex items-center justify-center bg-[#E6ECF2] font-semibold text-[10px] rounded-full">
-                            {user.name[0].toUpperCase()}
-                            {user.isControlAllowed && (
-                              <div className="w-2 h-2 border border-white bg-[#49A1F5] absolute right-0 bottom-0 rounded-full"></div>
-                            )}
-                            {user.isAdmin && (
-                              <div className="absolute -top-[3px] -left-[3px] text-[#49A1F5]">
-                                <Star12Icon />
-                              </div>
-                            )}
-                          </div>
-                          <p className="text-xs">{user.name}</p>
-                          <div className="text-[#CCC]">
-                            {user.device === "mobile" ? (
-                              <MobileIcon />
-                            ) : (
-                              <DesktopIcon />
-                            )}
-                          </div>
-                          {users.find((user) => user.id === userId)
-                            ?.isAdmin && (
-                            <User
-                              user={user}
-                              onTransferControl={(userId) =>
-                                transferControl(userId)
-                              }
-                              onKickUser={(userId) => {
-                                kickUser(userId);
-                              }}
-                            />
-                          )}
-                        </div>
-                      )
-                  )}
-
-                {users.length > 4 && (
-                  <Button
-                    variant="secondary"
-                    icon={<PersonsIcon />}
-                    onlyIcon
-                    onClick={() => setIsShowUsers((prev) => !prev)}
-                  />
-                )}
-              </div>
-            </div>
-
-            <div id="right" className="flex items-center gap-4">
-              <div className="relative">
-                <Button
-                  variant="secondary"
-                  icon={<ChatIcon />}
-                  onlyIcon
-                  onClick={() => setIsShowChat((prev) => !prev)}
-                />
-                {anyNewMessages && (
-                  <div className="w-2 h-2 bg-[#49A1F5] border rounded-full animate-ping absolute top-[25%] right-[20%] pointer-events-none"></div>
-                )}
-              </div>
-              <div id="divider" className="w-px h-4 bg-[#DAE0E5]"></div>
-              <div className="flex gap-2">
-                {!isIOS && (
-                  <Button
-                    variant="secondary"
-                    icon={isFullscreen ? <WindowIcon /> : <FullscreenIcon />}
-                    onlyIcon
-                    onClick={toggleFullscreen}
-                  />
-                )}
-                <Button
-                  variant="secondary"
-                  icon={<ShareIcon />}
-                  onlyIcon
-                  onClick={() => setIsShowInviteModal((prev) => !prev)}
-                />
-              </div>
-              {endAt && searchParams.has("admin", "true") && (
-                <>
-                  <div id="divider" className="w-px h-4 bg-[#DAE0E5]"></div>
-                  <div className="flex items-center gap-4">
-                    <p className="text-[#77828C] font-semibold text-sm">
-                      До завершения сеанса
-                    </p>
-                    <p className="font-semibold text-sm w-10">
-                      <Countdown date={new Date(endAt)} renderer={renderer} />
-                    </p>
-                    {/* <Button variant="secondary">Завершить</Button> */}
-                  </div>
-                </>
-              )}
-            </div>
-          </div>
-          <div className="main flex-1 bg-white flex">
-            <div className="left-header lg:hidden flex flex-col justify-between gap-4 w-12 p-2">
-              <div className="flex flex-col items-center gap-4">
-                <div className="mt-2">
-                  <img src="/images/logo24.svg" alt="" />
-                </div>
-                {!isIOS && (
-                  <Button
-                    variant="secondary"
-                    icon={isFullscreen ? <WindowIcon /> : <FullscreenIcon />}
-                    onlyIcon
-                    onClick={toggleFullscreen}
-                  />
-                )}
-              </div>
-              <div className="flex flex-col items-center gap-2">
-                <Button
-                  variant="secondary"
-                  icon={<UserIcon />}
-                  onlyIcon
-                  onClick={() => setIsShowUsers((prev) => !prev)}
-                />
-                <div className="relative">
-                  <Button
-                    variant="secondary"
-                    icon={<ChatIcon />}
-                    onlyIcon
-                    onClick={() => setIsShowChat((prev) => !prev)}
-                  />
-                  {anyNewMessages && (
-                    <div className="w-2 h-2 bg-[#49A1F5] border rounded-full animate-ping absolute top-[25%] right-[20%] pointer-events-none"></div>
-                  )}
-                </div>
-                <hr className="bg-[#DAE0E5] w-4" />
-                <Button
-                  variant="secondary"
-                  icon={isAudioEnabled ? <MicroOnIcon /> : <MicroOffIcon />}
-                  onlyIcon
-                  onClick={toggleAudio}
-                />
-              </div>
-              <div className="">
-                <Button
-                  variant="secondary"
-                  icon={<ShareIcon />}
-                  onlyIcon
-                  onClick={() => setIsShowInviteModal((prev) => !prev)}
-                />
-              </div>
-            </div>
-            <div className="relative w-full bg-[#111C26]">
-              {wsUrl && (
-                <PixelStreamingWrapper
-                  initialSettings={{
-                    AutoPlayVideo: true,
-                    AutoConnect: true,
-                    ss: wsUrl,
-                    StartVideoMuted: true,
-                    HoveringMouse: true,
-                    WaitForStreamer: true,
-                  }}
-                  onVideoInitialized={() => setIsVideoInitialized(true)}
-                />
-              )}
-
-              {!users.find((user) => user.id === userId)?.isControlAllowed && (
-                <div
-                  className="absolute w-full h-full top-0 left-0"
-                  onTouchStart={() =>
-                    toast.error(
-                      `Запросите доступ на управление у администратора!`,
-                      {
-                        icon: <InfoIcon className="text-red-500" />,
-                        position: "top-center",
-                        autoClose: 5000,
-                        hideProgressBar: false,
-                        closeOnClick: true,
-                        pauseOnHover: true,
-                        draggable: true,
-                        progress: undefined,
-                        theme: "light",
-                        transition: Bounce,
-                      }
-                    )
-                  }
-                  onMouseDown={() =>
-                    toast.error(
-                      `Запросите доступ на управление у администратора!`,
-                      {
-                        icon: <InfoIcon className="text-red-500" />,
-                        position: "top-center",
-                        autoClose: 5000,
-                        hideProgressBar: false,
-                        closeOnClick: true,
-                        pauseOnHover: true,
-                        draggable: true,
-                        progress: undefined,
-                        theme: "light",
-                        transition: Bounce,
-                      }
-                    )
-                  }
-                ></div>
-              )}
-
-              <div className="absolute top-2 lg:left-2 lg:right-auto right-2 flex flex-col gap-2">
-                <video
-                  ref={localVideoRef}
-                  className={`aspect-video bg-black rounded-lg -scale-x-100 object-cover ring-2 ${
-                    isAudioEnabled && isSpeaking
-                      ? "ring-green-500"
-                      : "ring-transparent"
-                  } ${
-                    permission
-                      ? "lg:w-[216px] lg:h-[162px] w-[112px] h-[84px]"
-                      : "w-0 h-0"
-                  }`}
-                  playsInline
-                  autoPlay
-                  muted
-                />
-                {remoteStreams.map(({ peerId, mediaStream }) => (
-                  <Video
-                    key={peerId}
-                    mediaStream={mediaStream}
-                    muted={!permission}
-                  />
-                ))}
-              </div>
-            </div>
-
-            {(isShowUsers || isShowChat) && (
-              <div className="absolute right-0 bg-white min-w-[240px] lg:w-[296px] w-[240px] h-full lg:max-h-[calc(100dvh-48px)] flex flex-col border-t border-[#DAE0E5] shadow-2xl shadow-black">
-                {isShowUsers && (
-                  <div
-                    className={`users min-h-[50%] h-full flex flex-col ${
-                      isShowChat ? "max-h-[calc(50vh-48px)]" : "max-h-[100dvh]"
-                    }`}
-                  >
-                    <div className="flex items-center justify-between p-2 pl-4 border-b border-[#DAE0E5]">
-                      <p className="text-sm font-semibold">
-                        <Trans i18nKey={"members"}>Участники</Trans>
-                      </p>
-                      <Button
-                        variant="tertiary"
-                        icon={<CloseIcon />}
-                        onlyIcon
-                        onClick={() => setIsShowUsers((prev) => !prev)}
-                      />
-                    </div>
-                    <div className="flex-1 overflow-y-scroll overflow-x-hidden flex flex-col gap-4 p-4 border-b border-[#DAE0E5]">
-                      {users.map((user) => (
-                        <div key={user.id} className="flex items-center gap-2">
-                          <div className="relative h-6 w-6 flex items-center justify-center bg-[#E6ECF2] font-semibold text-[10px] rounded-full">
-                            {user.name[0].toUpperCase()}
-                            {user.isControlAllowed && (
-                              <div className="w-2 h-2 border border-white bg-[#49A1F5] absolute right-0 bottom-0 rounded-full"></div>
-                            )}
-                            {user.isAdmin && (
-                              <div className="absolute -top-[3px] -left-[3px] text-[#49A1F5]">
-                                <Star12Icon />
-                              </div>
-                            )}
-                          </div>
-                          <p className="text-xs">{user.name}</p>
-                          <div className="text-[#CCC]">
-                            {user.device === "mobile" ? (
-                              <MobileIcon />
-                            ) : (
-                              <DesktopIcon />
-                            )}
-                          </div>
-                          <div className="ml-auto">
-                            {users.find((user) => user.id === userId)
-                              ?.isAdmin && (
-                              <User
-                                className="top-[calc(100%+4px)] -translate-x-[calc(100%-42px)]"
-                                user={user}
-                                onTransferControl={(userId) =>
-                                  transferControl(userId)
-                                }
-                                onKickUser={(userId) => {
-                                  kickUser(userId);
-                                }}
-                              />
-                            )}
-                          </div>
-                        </div>
-                      ))}
-                    </div>
-                    <div className="px-4 py-2">
-                      <Button
-                        fullWidth
-                        onClick={() => setIsShowInviteModal((prev) => !prev)}
-                      >
-                        <Trans i18nKey={"invite"}>Пригласить</Trans>
-                      </Button>
-                    </div>
-                  </div>
-                )}
-                {isShowChat && (
-                  <div
-                    className={`chat min-h-[50%] h-full flex flex-col ${
-                      isShowUsers ? "max-h-[calc(50vh-48px)]" : "max-h-[100dvh]"
-                    }`}
-                  >
-                    <div className="flex items-center justify-between p-2 pl-4 border-b border-[#DAE0E5]">
-                      <p className="text-sm font-semibold">
-                        <Trans i18nKey={"chat"}>Чат</Trans>
-                      </p>
-                      <Button
-                        variant="tertiary"
-                        icon={<CloseIcon />}
-                        onlyIcon
-                        onClick={() => setIsShowChat((prev) => !prev)}
-                      />
-                    </div>
-                    <div
-                      ref={messagesRef}
-                      className="flex-1 overflow-y-scroll flex flex-col gap-1 p-3 border-b border-[#DAE0E5]"
-                    >
-                      {messages.map((message, index) => (
-                        <div
-                          key={index}
-                          className={`text-sm p-2 flex flex-col gap-1 rounded-lg ${
-                            users.find((user) => user.id === userId)?.name ===
-                            message.name
-                              ? "bg-[#C4DDF5]"
-                              : "bg-[#F0F1F2]"
-                          }`}
-                        >
-                          {users.find((user) => user.id === userId)?.name !==
-                            message.name && (
-                            <p className="text-[#49A1F5] font-semibold">
-                              {message.name}
-                            </p>
-                          )}
-
-                          <p className="break-words">{message.text}</p>
-                          <p className="text-[#767676] translate-x-1 translate-y-1 self-end leading-none">
-                            {format(new Date(), "HH:mm")}
-                          </p>
-                        </div>
-                      ))}
-                    </div>
-                    <div className="p-3 pl-4">
-                      <form
-                        onSubmit={sendMessage}
-                        className="flex items-center gap-3"
-                      >
-                        <input
-                          ref={messageTextRef}
-                          type="text"
-                          placeholder={t("writeAMessage")}
-                          className="w-full bg-transparent text-sm outline-none"
-                          value={messageText}
-                          onChange={(e) => setMessageText(e.target.value)}
-                        />
-                        <button
-                          type="submit"
-                          className="text-[#49A1F5] outline-none"
-                        >
-                          <SendChatIcon />
-                        </button>
-                      </form>
-                    </div>
-                  </div>
-                )}
-              </div>
-            )}
-          </div>
-
-          {isShowInviteModal && (
-            <div className="absolute top-0 lg:left-0 left-12 lg:w-full w-[calc(100vw-48px)] h-full lg:bg-black lg:bg-opacity-50 bg-white border-l border-[#DAE0E5] flex flex-col lg:items-center lg:justify-center">
-              <div className="bg-white flex flex-col lg:rounded-lg lg:w-[400px] lg:flex-none flex-1">
-                <div className="p-2 pl-6 flex items-center justify-between border-b border-[#DAE0E5]">
-                  <p className="text-sm font-semibold">
-                    <Trans i18nKey={"invite"}>Пригласить</Trans>
-                  </p>
-                  <Button
-                    variant="tertiary"
-                    icon={<CloseIcon />}
-                    onlyIcon
-                    onClick={() => setIsShowInviteModal(false)}
-                  />
-                </div>
-                <div className="py-4 px-6 flex-1 flex flex-col gap-8">
-                  <div className="flex items-center lg:justify-between justify-center gap-8">
-                    <QRCode
-                      size={128}
-                      value={link}
-                      className="rounded-lg p-3 shadow-lg"
-                    />
-                    <p className="font-semibold text-right">
-                      <Trans i18nKey={"scanQRCode"}>
-                        Отсканируйте QR-код,
-                        <br />
-                        чтобы присоедениться
-                        <br />к демонстрации
-                      </Trans>
-                    </p>
-                  </div>
-                  <div className="">
-                    <Button
-                      icon={<LinkIcon />}
-                      fullWidth
-                      large
-                      onClick={handleClickClipboard}
-                    >
-                      <Trans i18nKey={"copyLinkToConnect"}>
-                        Скопировать ссылку для подключения
-                      </Trans>
-                    </Button>
-                    <input ref={clipboard.target} type="hidden" value={link} />
-                  </div>
-                  <div className="">
-                    <form
-                      onSubmit={(e) => e.preventDefault()}
-                      className="flex gap-2"
-                    >
-                      <input
-                        type="email"
-                        placeholder="Email"
-                        className="text-sm bg-transparent border border-[#DAE0E5] rounded-lg px-2 pb-0.5 outline-none h-10 w-full"
-                      />
-                      <Button type="submit" large className="" disabled>
-                        <Trans i18nKey={"invite"}>Пригласить</Trans>
-                      </Button>
-                    </form>
-                  </div>
-                  {/* <div className="flex flex-col gap-2">
-                    <p className="text-sm font-semibold">Участники</p>
-                    <div className="flex flex-col gap-4 overflow-y-scroll max-h-[calc(100dvh-206px)]">
-                      {users.map((user) => (
-                        <div key={user.id} className="flex items-center gap-2">
-                          <div className="h-8 w-8 bg-[#E6ECF2] rounded-full flex items-center justify-center">
-                            <p className="text-xs font-semibold">
-                              {user.name[0].toUpperCase()}
-                            </p>
-                          </div>
-                          <p className="text-sm">{user.name}</p>
-                        </div>
-                      ))}
-                    </div>
-                  </div> */}
-                </div>
-              </div>
-            </div>
-          )}
-
-          <Transition
-            in={step !== 3 || !isVideoInitialized}
-            timeout={300}
-            mountOnEnter
-            unmountOnExit
-          >
-            {(state) => (
-              <div
-                className={`absolute top-0 left-0 w-full h-full flex items-center justify-center bg-[#14161F] transition-all ${state} ${
-                  step !== 3 || !isVideoInitialized
-                    ? "bg-opacity-50 backdrop-blur-2xl"
-                    : "bg-opacity-0 backdrop-blur-none"
-                } `}
-              >
-                <Transition
-                  in={step === 1}
-                  timeout={300}
-                  mountOnEnter
-                  unmountOnExit
-                >
-                  {(state) => (
-                    <form
-                      className={`absolute lg:w-[396px] lg:h-auto w-full h-full flex flex-col justify-center bg-white lg:rounded-lg lg:p-12 p-6 transition-opacity ${state}`}
-                      onSubmit={handleSetName}
-                    >
-                      <div className="flex-1">
-                        <div className="mb-6">
-                          <p className="text-2xl font-semibold">
-                            <Trans i18nKey={"hello"}>Здравствуйте!</Trans>
-                          </p>
-                        </div>
-                        <div className="mb-6 flex flex-col gap-2">
-                          <p className="font-semibold">
-                            <Trans i18nKey={"pleaseIntroduceYourself"}>
-                              Представьтесь, пожалуйста
-                            </Trans>
-                          </p>
-                          <p className="text-[#77828C] text-sm">
-                            <Trans i18nKey={"communicateWithYou"}>
-                              Так мы будем знать, как к вам обращаться
-                            </Trans>
-                          </p>
-                        </div>
-                        <div className="mb-10">
-                          <div className="flex flex-col gap-1">
-                            <label className="text-[#77828C] text-xs">
-                              <Trans i18nKey={"name"}>Имя</Trans>
-                            </label>
-                            <input
-                              ref={nameRef}
-                              type="text"
-                              autoComplete="off"
-                              autoFocus
-                              className="rounded-lg px-2 py-2.5 bg-white border border-[#DAE0E5] hover:border-[#49A1F5] focus:border-[#49A1F5] outline-none transition-colors text-sm"
-                              value={name}
-                              onChange={(e) => setName(e.target.value)}
-                            />
-                          </div>
-                        </div>
-                      </div>
-                      <div className="flex gap-2">
-                        <Button
-                          type="button"
-                          variant="secondary"
-                          fullWidth
-                          large
-                          onClick={setNameGuest}
-                        >
-                          <Trans i18nKey={"skip"}>Не указывать</Trans>
-                        </Button>
-                        <Button
-                          type="submit"
-                          fullWidth
-                          large
-                          onClick={void handleSetName}
-                        >
-                          <Trans i18nKey={"сontinue"}>Продолжить</Trans>
-                        </Button>
-                      </div>
-                    </form>
-                  )}
-                </Transition>
-
-                <Transition
-                  in={step === 2}
-                  timeout={300}
-                  mountOnEnter
-                  unmountOnExit
-                >
-                  {(state) => (
-                    <div
-                      className={`absolute lg:w-[396px] lg:h-auto w-full h-full flex flex-col justify-center bg-white lg:rounded-lg lg:p-12 p-6 transition-opacity ${state}`}
-                    >
-                      <div className="flex-1">
-                        <div className="mb-6">
-                          <p className="text-2xl font-semibold">
-                            <Trans i18nKey={"partInDiscussion"}>
-                              Хотите принять участие в обсуждении?
-                            </Trans>
-                          </p>
-                        </div>
-                        <div className="mb-6 flex items-center gap-6">
-                          <div className="border border-[#DAE0E5] text-[#49A1F5] p-2 rounded-full">
-                            <MicroOnIcon />
-                          </div>
-                          <p className="text-sm">
-                            <Trans i18nKey={"allowMicrophoneUse"}>
-                              Разрешите использование камеры и микрофона
-                            </Trans>
-                          </p>
-                        </div>
-                        <div className="mb-10">
-                          <p className="text-[#77828C] text-xs">
-                            <Trans i18nKey={"turnOffMicrophone"}>
-                              Выключить камеру и микрофон можно в любой момент
-                            </Trans>
-                          </p>
-                        </div>
-                      </div>
-                      <div className="flex gap-2">
-                        {/* <Button
-                          variant="secondary"
-                          fullWidth
-                          large
-                          onClick={disallowMic}
-                        >
-                          <Trans i18nKey={"skip"}>Пропустить</Trans>
-                        </Button> */}
-                        <Button fullWidth large onClick={getUserMedia}>
-                          <Trans i18nKey={"allow"}>Продолжить</Trans>
-                        </Button>
-                      </div>
-                    </div>
-                  )}
-                </Transition>
-
-                <Transition
-                  in={step === 3 && !isVideoInitialized}
-                  timeout={300}
-                  mountOnEnter
-                  unmountOnExit
-                >
-                  {(state) => (
-                    <div
-                      className={`absolute bg-white rounded-lg p-12 w-[396px] transition-opacity ${state}`}
-                    >
-                      <div className="mb-6">
-                        <p className="text-2xl font-semibold">
-                          <Trans i18nKey={"pleaseWait"}>
-                            Пожалуйста, подождите
-                          </Trans>
-                        </p>
-                      </div>
-                      <div className="flex items-center gap-2">
-                        <img
-                          src="/icons/LoaderPrimary.png"
-                          alt=""
-                          className="w-8 h-8 animate-spin"
-                        />
-                        <p className="font-semibold text-[#49A1F5]">
-                          <Trans i18nKey={"connection"}>Подключение</Trans>
-                        </p>
-                      </div>
-                    </div>
-                  )}
-                </Transition>
-              </div>
-            )}
-          </Transition>
-
-          <div ref={parentElementRef} className="hidden"></div>
-
-          {step === 3 && isMobile && isPortrait && (
-            <div className="absolute top-0 left-0 w-full h-full bg-white sm:hidden flex items-center justify-center">
-              <div className="flex flex-col items-center gap-2">
-                <Rotate64Icon />
-                <p className="font-semibold">
-                  <Trans i18nKey={"rotateYourDevice"}>
-                    Поверните устройство
-                  </Trans>
-                </p>
-              </div>
-            </div>
-          )}
-
-          <ToastContainer />
-        </div>
-      ) : (
-        <div className="h-[100dvh] flex items-center justify-center p-8">
-          <p className="text-2xl text-white font-gilroy text-center">
-            <Trans i18nKey={"demonstrationCompleted"}>
-              Данная демонстрация была завершена
-            </Trans>
-          </p>
-        </div>
-      )}
-    </>
-  );
-}
-
-export default StreamPage2;