upd

2023-08-15 13:16:47 +05:00
parent 1dac8116fb
commit 9a0dbe390e
4 changed files with 63 additions and 30 deletions
@@ -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("Присоеденился новый участник");
+      toastUser(t("notification.newMember"));
    });

    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={() =>
-                toastWarn("Получите доступ у администратора трансляции!")
-              }
+              onTouchStart={() => toastWarn(t("notification.getAccess"))}
            ></div>
          ) : (
            <div
              className="absolute top-0 left-0 w-full h-full"
-              onMouseDown={() =>
-                toastWarn("Получите доступ у администратора трансляции!")
-              }
+              onMouseDown={() => toastWarn(t("notification.getAccess"))}
            ></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>
@@ -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">
-            Пригласить
-            <br />
-            на демонстрацию
+            <Trans i18nKey={"shareModal.title"}>
+              Пригласить
+              <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>
@@ -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>
@@ -15,9 +15,12 @@ const resources = {
      streamEnded: "Трансляция была завершена",
      demoStarted: "Демонстрация начата",
      clickToContinue: "Нажмите, чтобы продолжить",
-      fullscreenMode: "Полноэкранный режим",
-      windowedMode: "Оконный режим",
-      inviteByQR: "Пригласить по QR",
+      fullscreenMode: "Полноэкранный режим",
+      windowedMode: "Оконный режим",
+      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",
-      windowedMode: "Windowed mode",
-      inviteByQR: "Invite by QR code",
+      fullscreenMode: "Fullscreen mode",
+      windowedMode: "Windowed mode",
+      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!",
+      },
    },
  },
 };