feat(i18n): add ClassroomPage (#662)

packages/flat-components/src/components/ClassroomPage/ExitRoomConfirmModal/index.tsx

@@ -1,5 +1,6 @@
-import { Button, Modal } from "antd";
 import React, { FC } from "react";
+import { Button, Modal } from "antd";
+import { useTranslation } from "react-i18next";
 
 export interface StopClassConfirmModalProps {
     visible: boolean;
@@ -18,17 +19,16 @@ export const StopClassConfirmModal: FC<StopClassConfirmModalProps> = ({
     onStop,
     onCancel,
 }) => {
+    const { t } = useTranslation();
     return (
         <Modal
             visible={visible}
-            title="确定结束上课"
+            title={t("confirmation-of-the-end-of-classes")}
             okButtonProps={{ loading }}
             onOk={onStop}
             onCancel={onCancel}
         >
-            <p>
-                一旦结束上课，所有用户自动退出房间，并且自动结束课程和录制（如有），不能继续直播。
-            </p>
+            <p>{t("end-of-class-tips")}</p>
         </Modal>
     );
 };
@@ -54,25 +54,26 @@ export const CloseRoomConfirmModal: FC<CloseRoomConfirmModalProps> = ({
     onStop,
     onCancel,
 }) => {
+    const { t } = useTranslation();
     return (
         <Modal
             visible={visible}
-            title="关闭选项"
+            title={t("close-option")}
             onOk={onCancel}
             onCancel={onCancel}
             footer={[
                 <Button key="Cancel" onClick={onCancel}>
-                    取消
+                    {t("cancel")}
                 </Button>,
                 <Button key="ReturnMain" loading={hangLoading} onClick={onHang}>
-                    挂起房间
+                    {t("hang-up-the-room")}
                 </Button>,
                 <Button key="StopClass" type="primary" loading={stopLoading} onClick={onStop}>
-                    结束上课
+                    {t("end-the-class")}
                 </Button>,
             ]}
         >
-            <p>课堂正在继续，你是暂时退出挂起房间还是结束上课？</p>
+            <p>{t("exit-room-tips")}</p>
         </Modal>
     );
 };
@@ -92,9 +93,15 @@ export const ExitRoomConfirmModal: FC<ExitRoomConfirmModalProps> = ({
     onExit,
     onCancel,
 }) => {
+    const { t } = useTranslation();
     return (
-        <Modal visible={visible} title="确定退出房间" onOk={onExit} onCancel={onCancel}>
-            <p>课堂正在继续，确定退出房间？</p>
+        <Modal
+            visible={visible}
+            title={t("student-sure-to-exit-the-room")}
+            onOk={onExit}
+            onCancel={onCancel}
+        >
+            <p>{t("student-exit-room-tip")}</p>
         </Modal>
     );
 };

packages/flat-components/src/components/ClassroomPage/NetworkStatus/index.tsx

@@ -6,14 +6,15 @@ import signal3SVG from "./icons/signal-3.svg";
 
 import React, { useMemo } from "react";
 import { observer } from "mobx-react-lite";
+import { useTranslation } from "react-i18next";
 
 interface NetworkQuality {
     delay: number;
     uplink: number;
     downlink: number;
 }
 
-function getSignalIcon({ uplink, downlink }: NetworkQuality): string {
+function getSignalIcon(uplink: number, downlink: number): string {
     if (uplink === 5 || downlink === 5 || uplink === 4 || downlink === 4) {
         return signal1SVG;
     }
@@ -30,31 +31,27 @@ function getSignalIcon({ uplink, downlink }: NetworkQuality): string {
     return signal0SVG;
 }
 
-const signalLocale = [
-    "质量未知",
-    "网络质量极好",
-    "网络质量优秀",
-    "网络质量一般",
-    "网络质量较差",
-    "网络质量非常差",
-    "网络连接已断开",
-    "暂时无法检测网络质量",
-    "正在检测...",
-];
-
-function getSignalText({ uplink, downlink }: NetworkQuality): string {
-    return `上行：${signalLocale[uplink]}，下行：${signalLocale[downlink]}`;
-}
-
 export interface NetworkStatusProps {
     networkQuality: NetworkQuality;
 }
 
 export const NetworkStatus = observer<NetworkStatusProps>(function NetworkStatus({
     networkQuality,
 }) {
-    const signalIcon = useMemo(() => getSignalIcon(networkQuality), [networkQuality]);
-    const signalText = useMemo(() => getSignalText(networkQuality), [networkQuality]);
+    const { t } = useTranslation();
+    const { uplink, downlink } = networkQuality;
+
+    const signalIcon = useMemo(() => getSignalIcon(uplink, downlink), [uplink, downlink]);
+
+    const signalText = useMemo(
+        () =>
+            t("network-quality", {
+                uplink: t(`network-quality${uplink}`),
+                downlink: t(`network-quality${downlink}`),
+            }),
+        [t, uplink, downlink],
+    );
+
     return (
         <div className="network-status">
             <span className="network-status-delay" title="客户端到边缘服务器的网络延迟">

packages/flat-components/src/components/ClassroomPage/RecordHintTips/index.tsx

@@ -3,13 +3,15 @@ import "./style.less";
 import React, { FC } from "react";
 import { CloseOutlined } from "@ant-design/icons";
 import { Button, Tooltip } from "antd";
+import { useTranslation } from "react-i18next";
 
 export interface RecordHintTipsProps {
     visible: boolean;
     onClose: () => void;
 }
 
 export const RecordHintTips: FC<RecordHintTipsProps> = ({ visible, onClose, children }) => {
+    const { t } = useTranslation();
     return (
         <Tooltip
             overlayClassName="record-hint-tips"
@@ -18,7 +20,7 @@ export const RecordHintTips: FC<RecordHintTipsProps> = ({ visible, onClose, chil
             visible={visible}
             title={
                 <div>
-                    点击「开始上课」才能录制并生成回放哦~
+                    {t("start-class-tips")}
                     <Button
                         className="record-hint-tips-close"
                         size="small"

packages/flat-components/src/components/ClassroomPage/RoomInfo/index.tsx

@@ -1,7 +1,8 @@
-import "./style.less"
+import "./style.less";
 
 import classNames from "classnames";
 import React, { FC } from "react";
+import { useTranslation } from "react-i18next";
 import { RoomStatus, RoomType } from "../../../types/room";
 import { getRoomStatusName, getRoomTypeName } from "../../../utils/room";
 
@@ -10,23 +11,26 @@ export interface RoomInfoProps {
     roomType?: RoomType;
 }
 
-export const RoomInfo: FC<RoomInfoProps> = ({ roomStatus, roomType }) => (
-    <div className="room-info">
-        <span>
-            当前状态：
-            <span
-                className={classNames("room-info-progress", {
-                    "is-active": roomStatus !== RoomStatus.Idle,
-                })}
-            >
-                {getRoomStatusName(roomStatus)}
+export const RoomInfo: FC<RoomInfoProps> = ({ roomStatus, roomType }) => {
+    const { t } = useTranslation();
+    return (
+        <div className="room-info">
+            <span>
+                {t("current-status")}
+                <span
+                    className={classNames("room-info-progress", {
+                        "is-active": roomStatus !== RoomStatus.Idle,
+                    })}
+                >
+                    {getRoomStatusName(roomStatus)}
+                </span>
             </span>
-        </span>
-        <span>
-            当前模式：
-            <span className="room-info-mode">
-                {getRoomTypeName(roomType || RoomType.BigClass)}
+            <span>
+                {t("current-mode")}
+                <span className="room-info-mode">
+                    {getRoomTypeName(roomType || RoomType.BigClass)}
+                </span>
             </span>
-        </span>
-    </div>
-);
+        </div>
+    );
+};

packages/flat-components/src/components/ClassroomPage/RoomStoppedModal/index.tsx

@@ -1,5 +1,6 @@
-import { Modal } from "antd";
 import { FC, useEffect, useRef, useState } from "react";
+import { Modal } from "antd";
+import { useTranslation } from "react-i18next";
 import { RoomStatus } from "../../../types/room";
 
 export interface RoomStoppedModalProps {
@@ -16,6 +17,7 @@ export interface RoomStoppedModalProps {
 export const RoomStoppedModal: FC<RoomStoppedModalProps> = ({ isCreator, roomStatus, onExit }) => {
     const modalRef = useRef<ReturnType<typeof Modal.info>>();
     const [visible, setVisible] = useState(false);
+    const { t } = useTranslation();
 
     useEffect(() => {
         if (roomStatus === RoomStatus.Stopped) {
@@ -33,14 +35,14 @@ export const RoomStoppedModal: FC<RoomStoppedModalProps> = ({ isCreator, roomSta
         if (visible) {
             let countdown = 5;
             modalRef.current = Modal.info({
-                title: "房间已结束，即将退出...",
-                okText: `知道了 (${countdown})`,
+                title: t("the-room-has-ended-and-is-about-to-exit"),
+                okText: t("i-know", { countdown }),
                 onOk: onExit,
                 onCancel: onExit,
             });
             ticket = window.setInterval(() => {
                 modalRef.current?.update({
-                    okText: `知道了 (${--countdown})`,
+                    okText: t("i-know", { countdown: --countdown }),
                 });
                 if (countdown <= 0) {
                     window.clearInterval(ticket);
@@ -53,7 +55,7 @@ export const RoomStoppedModal: FC<RoomStoppedModalProps> = ({ isCreator, roomSta
             window.clearInterval(ticket);
             modalRef.current?.destroy();
         };
-    }, [visible, onExit]);
+    }, [visible, onExit, t]);
 
     return null;
 };

packages/flat-components/src/components/ClassroomPage/VideoAvatar/index.tsx

@@ -8,6 +8,7 @@ import videoExpandSVG from "./icons/video-expand.svg";
 import React from "react";
 import { observer } from "mobx-react-lite";
 import classNames from "classnames";
+import { useTranslation } from "react-i18next";
 
 export interface AvatarUser {
     name: string;
@@ -40,6 +41,7 @@ export const VideoAvatar = observer<VideoAvatarProps>(function VideoAvatar({
     className,
     ...restProps
 }) {
+    const { t } = useTranslation();
     if (!avatarUser) {
         return (
             <div
@@ -48,7 +50,7 @@ export const VideoAvatar = observer<VideoAvatarProps>(function VideoAvatar({
                     "is-mini": mini,
                 })}
             >
-                老师暂时离开
+                {t("teacher-left-temporarily")}
             </div>
         );
     }

packages/flat-i18n/locales/en.json

@@ -12,7 +12,7 @@
   "upload-exception": "Uploading exception",
   "upload-fail": "Upload failed",
   "upload-success": "Successful",
-  "agree": "by",
+  "agree": "agree",
   "all-staff-are-under-ban": "All members are mute",
   "ban": "Mute",
   "banned": "Muted",
@@ -27,5 +27,34 @@
   "send": "send",
   "teacher": "(Teacher)",
   "unban": "Unmuted",
-  "users": "user list"
+  "users": "user list",
+  "cancel": "Cancel",
+  "client-to-edge-server-network-latency": "Network latency from client to edge server",
+  "close-option": "Close option",
+  "confirmation-of-the-end-of-classes": "Make sure to end the class",
+  "current-mode": "Current mode:",
+  "current-status": "Current status:",
+  "delay": "delay:",
+  "end-of-class-tips": "Once the lesson ends, all users are automatically logged out of the room and the lesson and recording (if any) is automatically ended and cannot be continued live.",
+  "end-the-class": "End of class",
+  "exit-room-tips": "The class is continuing, do you want to quit hanging up the room for now or end the class?",
+  "hang-up-the-room": "Hang up the room",
+  "i-know": "Got it ({{countdown}})",
+  "network": "The internet:",
+  "network-quality": "Uplink: {{uplink}}, Downlink: {{downlink}}",
+  "network-quality0": "Unknown quality",
+  "network-quality1": "Excellent network quality",
+  "network-quality2": "Good network quality",
+  "network-quality3": "Okay network quality",
+  "network-quality4": "Poor network quality",
+  "network-quality5": "Terrible network quality",
+  "network-quality6": "Network connection lost",
+  "network-quality7": "Unable to detect network quality",
+  "network-quality8": "Detecting...",
+  "signal-text": "Up: {{up}}, Down: {{down}}",
+  "start-class-tips": "Please start the lesson first to enable room recording.",
+  "student-exit-room-tip": "The class is continuing, are you sure to leave the room?",
+  "student-sure-to-exit-the-room": "Sure to exit the room",
+  "teacher-left-temporarily": "The teacher leaves temporarily",
+  "the-room-has-ended-and-is-about-to-exit": "The room has ended and is about to exit..."
 }

packages/flat-i18n/locales/zh-CN.json

@@ -27,5 +27,34 @@
   "me": "(我)",
   "cancel-hand-raising": "取消举手",
   "messages": "消息列表",
-  "users": "用户列表"
+  "users": "用户列表",
+  "confirmation-of-the-end-of-classes": "确定结束上课",
+  "end-of-class-tips": "一旦结束上课，所有用户自动退出房间，并且自动结束课程和录制（如有），不能继续直播。",
+  "cancel": "取消",
+  "hang-up-the-room": "挂起房间",
+  "end-the-class": "结束上课",
+  "close-option": "关闭选项",
+  "exit-room-tips": "课堂正在继续，你是暂时退出挂起房间还是结束上课？",
+  "student-sure-to-exit-the-room": "确定退出房间",
+  "student-exit-room-tip": "课堂正在继续，确定退出房间？",
+  "start-class-tips": "请先「开始上课」再开启房间录制功能",
+  "current-status": "当前状态：",
+  "current-mode": "当前模式：",
+  "the-room-has-ended-and-is-about-to-exit": "房间已结束，即将退出...",
+  "teacher-left-temporarily": "老师暂时离开",
+  "signal-text": "上行：{{up}}，下行：{{down}}",
+  "client-to-edge-server-network-latency": "客户端到边缘服务器的网络延迟",
+  "delay": "延迟：",
+  "network": "网络：",
+  "i-know": "知道了 ({{countdown}})",
+  "network-quality": "上行：{{uplink}}，下行：{{downlink}}",
+  "network-quality0": "质量未知",
+  "network-quality1": "网络质量极好",
+  "network-quality2": "网络质量优秀",
+  "network-quality3": "网络质量一般",
+  "network-quality4": "网络质量较差",
+  "network-quality5": "网络质量非常差",
+  "network-quality6": "网络连接已断开",
+  "network-quality7": "暂时无法检测网络质量",
+  "network-quality8": "正在检测..."
 }