diff --git a/src/StreamPage.tsx b/src/StreamPage.tsx index bbfe854..06cbfed 100644 --- a/src/StreamPage.tsx +++ b/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(""); @@ -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" ? (
- toastWarn("Получите доступ у администратора трансляции!") - } + onTouchStart={() => toastWarn(t("notification.getAccess"))} >
) : (
- toastWarn("Получите доступ у администратора трансляции!") - } + onMouseDown={() => toastWarn(t("notification.getAccess"))} >
)} @@ -220,7 +216,9 @@ function StreamPage() { > - Полноэкранный режим + + Полноэкранный режим + ) : ( @@ -230,7 +228,7 @@ function StreamPage() { > - Оконный режим + Оконный режим )} @@ -243,7 +241,7 @@ function StreamPage() { > - Пригласить по QR + Пригласить по QR коду @@ -253,7 +251,7 @@ function StreamPage() { > - Пригласить по ссылке + Пригласить по ссылке @@ -271,7 +269,7 @@ function StreamPage() { > - Участники + Участники diff --git a/src/components/modals/ShareModal.tsx b/src/components/modals/ShareModal.tsx index 405d4b7..de67e05 100644 --- a/src/components/modals/ShareModal.tsx +++ b/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() {

- Пригласить -
- на демонстрацию + + Пригласить +
+ на демонстрацию +

-

Ссылка для подключения

+

+ Ссылка для подключения +

- Скопировать + + Скопировать +
diff --git a/src/components/modals/UsersManagementModal.tsx b/src/components/modals/UsersManagementModal.tsx index 4324de4..5eab4d6 100644 --- a/src/components/modals/UsersManagementModal.tsx +++ b/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 (
-

Участники

+

+ Участники +

{users.map((user: any, index: number) => (
@@ -80,7 +83,7 @@ function UsersManagementModal({
{me && me.id === user.id && ( - Вы + Вы )}
diff --git a/src/i18n.ts b/src/i18n.ts index bc0c5ea..f228bcc 100644 --- a/src/i18n.ts +++ b/src/i18n.ts @@ -15,9 +15,12 @@ const resources = { streamEnded: "Трансляция была завершена", demoStarted: "Демонстрация начата", clickToContinue: "Нажмите, чтобы продолжить", - fullscreenMode: "Полноэкранный режим", - windowedMode: "Оконный режим", - inviteByQR: "Пригласить по QR", + fullscreenMode: "Полноэкранный режим", + windowedMode: "Оконный режим", + inviteByQRCode: "Пригласить по QR", + inviteByLink: "Пригласить по ссылке", + members: "Участники", + you: "Вы", scanQRCode: "Отсканируйте QR-код
чтобы подключиться
к текущей демонстрации", @@ -105,6 +108,16 @@ const resources = { notice: "Запись на демонстрацию работает в ознакомительном режиме и не сохраняет введенные данные", }, + shareModal: { + title: "Пригласить
на демонстрацию", + 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
to the current demo", - title: "Remote demonstration", header: { buttonFirst: "Sign up", @@ -205,6 +220,16 @@ const resources = { notice: "Registration for the demonstration
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!", + }, }, }, };