upd

src/StreamPage.tsx

@@ -9,7 +9,7 @@ import ky from "ky";
 import { io } from "socket.io-client";
 import userAgentParser from "ua-parser-js";
 import { Player } from "./components/Player";
-import { Trans } from "react-i18next";
+import { Trans, useTranslation } from "react-i18next";
 // import { useScreen } from "usehooks-ts";
 import ShareIcon from "./components/icons/ShareIcon";
 import ModalContainer from "./components/ModalContainer";
@@ -30,6 +30,7 @@ import HandOnIcon from "./components/icons/HandOnIcon";
 import AlertIcon from "./components/icons/AlertIcon";
 
 function StreamPage() {
+  const { t } = useTranslation();
   const params = useParams();
   const handleFullScreen = useFullScreenHandle();
   const [streamUrl, setStreamUrl] = useState<string>("");
@@ -126,17 +127,16 @@ function StreamPage() {
     const socket = io(import.meta.env.VITE_COORD_URL, {
       query: { roomId: params.id },
     });
-    setSocket(socket);
 
     socket.on("connect", () => {
+      setSocket(socket);
       // console.log("connect: ", socket.id);
     });
 
     socket.on("join", (_socketId, room) => {
       setUsers(room.users);
       // console.log("join: ", _socketId, room.users);
-
+      toastUser(t("notification.newMember"));
-      toastUser("Присоеденился новый участник");
     });
 
     socket.on("update", (_socketId, room) => {
@@ -167,7 +167,7 @@ function StreamPage() {
 
   useEffect(() => {
     if (me && me.allowControl && !me.admin) {
-      toastHandOn("Управление получено");
+      toastHandOn(t("notification.controlReceived"));
     }
   }, [me]);
 
@@ -194,16 +194,12 @@ function StreamPage() {
           {new userAgentParser(me.ua).getDevice().type === "mobile" ? (
             <div
               className="absolute top-0 left-0 w-full h-full"
-              onTouchStart={() =>
+              onTouchStart={() => toastWarn(t("notification.getAccess"))}
-                toastWarn("Получите доступ у администратора трансляции!")
-              }
             ></div>
           ) : (
             <div
               className="absolute top-0 left-0 w-full h-full"
-              onMouseDown={() =>
+              onMouseDown={() => toastWarn(t("notification.getAccess"))}
-                toastWarn("Получите доступ у администратора трансляции!")
-              }
             ></div>
           )}
         </>
@@ -220,7 +216,9 @@ function StreamPage() {
                 >
                   <FullscreenIcon />
                   <span className="absolute left-12 top-[50%] -translate-y-[50%] invisible group-hover:visible opacity-0 group-hover:opacity-100 text-xs transition-all px-2 py-1 bg-[#131313] rounded">
-                    Полноэкранный режим
+                    <Trans i18nKey={"fullscreenMode"}>
+                      Полноэкранный режим
+                    </Trans>
                   </span>
                 </button>
               ) : (
@@ -230,7 +228,7 @@ function StreamPage() {
                 >
                   <WindowedModeIcon />
                   <span className="absolute left-12 top-[50%] -translate-y-[50%] invisible group-hover:visible opacity-0 group-hover:opacity-100 text-xs transition-all px-2 py-1 bg-[#131313] rounded">
-                    Оконный режим
+                    <Trans i18nKey={"windowedMode"}>Оконный режим</Trans>
                   </span>
                 </button>
               )}
@@ -243,7 +241,7 @@ function StreamPage() {
           >
             <QRIcon />
             <span className="absolute left-12 top-[50%] -translate-y-[50%] invisible group-hover:visible opacity-0 group-hover:opacity-100 text-xs transition-all px-2 py-1 bg-[#131313] rounded">
-              Пригласить по QR
+              <Trans i18nKey={"inviteByQRCode"}>Пригласить по QR коду</Trans>
             </span>
           </button>
 
@@ -253,7 +251,7 @@ function StreamPage() {
           >
             <ShareIcon />
             <span className="absolute left-12 top-[50%] -translate-y-[50%] invisible group-hover:visible opacity-0 group-hover:opacity-100 text-xs transition-all px-2 py-1 bg-[#131313] rounded">
-              Пригласить по ссылке
+              <Trans i18nKey={"inviteByLink"}>Пригласить по ссылке</Trans>
             </span>
           </button>
 
@@ -271,7 +269,7 @@ function StreamPage() {
           >
             <PersonsIcon />
             <span className="absolute left-12 top-[50%] -translate-y-[50%] invisible group-hover:visible opacity-0 group-hover:opacity-100 text-xs transition-all px-2 py-1 bg-[#131313] rounded">
-              Участники
+              <Trans i18nKey={"members"}>Участники</Trans>
             </span>
           </button>
         </div>

src/components/modals/ShareModal.tsx

@@ -5,6 +5,7 @@ import "react-toastify/dist/ReactToastify.css";
 import useModalStore from "../../stores/useModalStore";
 import CloseIcon from "../icons/CloseIcon";
 import AlertIcon from "../icons/AlertIcon";
+import { Trans } from "react-i18next";
 
 function ShareModal() {
   const [setModal] = useModalStore((state) => [state.setModal]);
@@ -35,12 +36,16 @@ function ShareModal() {
       <div className="relative lg:p-10 p-6 bg-[#131317] rounded shadow-lg w-[320px]">
         <div className="flex flex-col lg:gap-8 gap-4">
           <p className="font-gilroy lg:text-2xl">
-            Пригласить
+            <Trans i18nKey={"shareModal.title"}>
-            <br />
+              Пригласить
-            на демонстрацию
+              <br />
+              на демонстрацию
+            </Trans>
           </p>
           <div className="flex flex-col gap-4">
-            <p className="font-gilroy lg:text-xl">Ссылка для подключения</p>
+            <p className="font-gilroy lg:text-xl">
+              <Trans i18nKey={"shareModal.label"}>Ссылка для подключения</Trans>
+            </p>
             <input
               ref={clipboard.target}
               readOnly
@@ -53,7 +58,9 @@ function ShareModal() {
               className="pl-3 pr-4 py-2 bg-gradient rounded flex items-center gap-1 w-fit"
             >
               <ShareIcon />
-              <span className="text-sm">Скопировать</span>
+              <span className="text-sm">
+                <Trans i18nKey={"shareModal.button"}>Скопировать</Trans>
+              </span>
             </button>
           </div>
         </div>

src/components/modals/UsersManagementModal.tsx

@@ -9,6 +9,7 @@ import MobilePhoneIcon from "../icons/MobilePhoneIcon";
 import UserIcon from "../icons/UserIcon";
 import CloseIcon from "../icons/CloseIcon";
 import useStreamUserStore from "../../stores/useStreamUserStore";
+import { Trans } from "react-i18next";
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
 interface UsersManagementModalProps {
@@ -28,7 +29,9 @@ function UsersManagementModal({
   return (
     <div className="relative lg:p-10 p-6 bg-[#131317] rounded shadow-lg w-[320px] flex flex-col gap-2">
       <div className="flex flex-col lg:gap-8 gap-4">
-        <p className="font-gilroy lg:text-2xl">Участники</p>
+        <p className="font-gilroy lg:text-2xl">
+          <Trans i18nKey={"members"}>Участники</Trans>
+        </p>
         <div className="flex flex-col gap-2">
           {users.map((user: any, index: number) => (
             <div key={index} className="relative">
@@ -80,7 +83,7 @@ function UsersManagementModal({
 
                 <div>
                   {me && me.id === user.id && (
-                    <span className="text-[#73788C] text-xs">Вы</span>
+                    <span className="text-[#73788C] text-xs"><Trans i18nKey={"you"}>Вы</Trans></span>
                   )}
                 </div>
               </div>

src/i18n.ts

@@ -15,9 +15,12 @@ const resources = {
       streamEnded: "Трансляция была завершена",
       demoStarted: "Демонстрация начата",
       clickToContinue: "Нажмите, чтобы продолжить",
-      fullscreenMode: "Полноэкранный режим",
+      fullscreenMode: "Полноэкранный режим",
-      windowedMode: "Оконный режим",
+      windowedMode: "Оконный режим",
-      inviteByQR: "Пригласить по QR",
+      inviteByQRCode: "Пригласить по QR",
+      inviteByLink: "Пригласить по ссылке",
+      members: "Участники",
+      you: "Вы",
       scanQRCode:
         "Отсканируйте QR-код<br />чтобы подключиться<br />к текущей демонстрации",
 
@@ -105,6 +108,16 @@ const resources = {
         notice:
           "Запись на демонстрацию работает в ознакомительном режиме и не сохраняет введенные данные",
       },
+      shareModal: {
+        title: "Пригласить<br />на демонстрацию",
+        label: "Ссылка для подключения",
+        button: "Скопировать",
+      },
+      notification: {
+        newMember: "Присоеденился новый участник",
+        getAccess: "Получите доступ у администратора трансляции!",
+        controlReceived: "Управление получено!",
+      },
     },
   },
   en: {
@@ -116,11 +129,13 @@ const resources = {
       streamEnded: "Stream has been ended",
       demoStarted: "Demo started",
       clickToContinue: "Click to continue",
-      fullscreenMode: "Fullscreen mode",
+      fullscreenMode: "Fullscreen mode",
-      windowedMode: "Windowed mode",
+      windowedMode: "Windowed mode",
-      inviteByQR: "Invite by QR code",
+      inviteByQRCode: "Invite by QR Code",
+      inviteByLink: "Invite by link",
+      members: "Members",
+      you: "You",
       scanQRCode: "Scan the QR code to connect<br /> to the current demo",
-
       title: "Remote demonstration",
       header: {
         buttonFirst: "Sign up",
@@ -205,6 +220,16 @@ const resources = {
         notice:
           "Registration for the demonstration<br />is carried out in a trial mode",
       },
+      shareModal: {
+        title: "Invite for a demonstration",
+        label: "Link to connect",
+        button: "Copy",
+      },
+      notification: {
+        newMember: "A new member has joined",
+        getAccess: "Get access from the stream administrator!",
+        controlReceived: "Control received!",
+      },
     },
   },
 };