fix(i18n): i18n fixes (#1312)

* fix(i18n): forget some i18n * fix(classroom): language will be reset upon enter classroom (#1314) * refactor(i18n): improve i18n
netless-io · Jan 19, 2022 · 198e065 · 198e065
1 parent 3756edd
commit 198e065
Show file tree

Hide file tree

Showing 20 changed files with 60 additions and 35 deletions.
diff --git a/desktop/renderer-app/src/components/AppStoreButton/index.tsx b/desktop/renderer-app/src/components/AppStoreButton/index.tsx
@@ -64,7 +64,7 @@ export const AppStoreButton = observer<AppStoreButtonProps>(function AppStoreBut
         <>
             <TopBarRightBtn
                 icon={<img src={appStoreSVG} />}
-                title="Open App Store"
+                title={t("app-store")}
                 onClick={() => setAppStoreIsVisible(true)}
             />
             <Modal

diff --git a/desktop/renderer-app/src/components/CloudStorageButton.tsx b/desktop/renderer-app/src/components/CloudStorageButton.tsx
@@ -29,7 +29,7 @@ export const CloudStorageButton = observer<CloudStorageButtonProps>(function Clo
         <>
             <TopBarRightBtn
                 icon={<img src={cloudStorageSVG} />}
-                title="Open Cloud Storage"
+                title={t("cloud-storage")}
                 onClick={showModal}
             />
             <Modal

diff --git a/desktop/renderer-app/src/components/InviteButton.tsx b/desktop/renderer-app/src/components/InviteButton.tsx
@@ -4,19 +4,21 @@ import { TopBarRightBtn } from "flat-components";
 import { RoomItem } from "../stores/room-store";
 import { InviteModal } from "./Modal/InviteModal";
 import inviteSVG from "../assets/image/invite.svg";
+import { useTranslation } from "react-i18next";
 
 export interface InviteButtonProps {
     roomInfo?: RoomItem;
 }
 
 export const InviteButton = observer<InviteButtonProps>(function InviteButton({ roomInfo }) {
+    const { t } = useTranslation();
     const [isShowInviteModal, showInviteModal] = useState(false);
     const hideInviteModal = (): void => showInviteModal(false);
     return (
         <div>
             <TopBarRightBtn
                 icon={<img src={inviteSVG} />}
-                title="Invite"
+                title={t("invitation")}
                 onClick={() => showInviteModal(true)}
             />
             {roomInfo && (

diff --git a/desktop/renderer-app/src/pages/BigClassPage/index.tsx b/desktop/renderer-app/src/pages/BigClassPage/index.tsx
@@ -259,7 +259,7 @@ export const BigClassPage = observer<BigClassPageProps>(function BigClassPage()
                                 <img src={shareScreenSVG} />
                             )
                         }
-                        title="Share Screen"
+                        title={t("share-screen.self")}
                         onClick={handleShareScreen}
                     />
                 )}
@@ -281,7 +281,7 @@ export const BigClassPage = observer<BigClassPageProps>(function BigClassPage()
                 <InviteButton roomInfo={classRoomStore.roomInfo} />
                 <TopBarRightBtn
                     icon={<img src={exitSVG} />}
-                    title="Exit"
+                    title={t("exit")}
                     onClick={() => confirm(ExitRoomConfirmType.ExitButton)}
                 />
                 <TopBarDivider />
@@ -293,7 +293,7 @@ export const BigClassPage = observer<BigClassPageProps>(function BigClassPage()
                             <img src={hideSideSVG} />
                         )
                     }
-                    title={isRealtimeSideOpen ? "hide side panel" : "show side panel"}
+                    title={isRealtimeSideOpen ? t("side-panel.hide") : t("side-panel.show")}
                     onClick={handleSideOpenerSwitch}
                 />
             </>

diff --git a/desktop/renderer-app/src/pages/HomePage/MainRoomListPanel/MainRoomList.tsx b/desktop/renderer-app/src/pages/HomePage/MainRoomListPanel/MainRoomList.tsx
@@ -352,7 +352,7 @@ export const MainRoomList = observer<MainRoomListProps>(function MainRoomList({
                 });
             }
             if (room.roomUUID) {
-                result.push({ key: "invite", text: t("copy-invitation") });
+                result.push({ key: "invite", text: t("invitation") });
             }
         }
         return result as SubActions;

diff --git a/desktop/renderer-app/src/pages/OneToOnePage/index.tsx b/desktop/renderer-app/src/pages/OneToOnePage/index.tsx
@@ -217,7 +217,7 @@ export const OneToOnePage = observer<OneToOnePageProps>(function OneToOnePage()
                                 <img src={shareScreenSVG} />
                             )
                         }
-                        title="Share Screen"
+                        title={t("share-screen.self")}
                         onClick={handleShareScreen}
                     />
                 )}
@@ -239,7 +239,7 @@ export const OneToOnePage = observer<OneToOnePageProps>(function OneToOnePage()
                 <InviteButton roomInfo={classRoomStore.roomInfo} />
                 <TopBarRightBtn
                     icon={<img src={exitSVG} />}
-                    title="Exit"
+                    title={t("exit")}
                     onClick={() => confirm(ExitRoomConfirmType.ExitButton)}
                 />
                 <TopBarDivider />
@@ -251,7 +251,7 @@ export const OneToOnePage = observer<OneToOnePageProps>(function OneToOnePage()
                             <img src={hideSideSVG} />
                         )
                     }
-                    title={isRealtimeSideOpen ? "hide side panel" : "show side panel"}
+                    title={isRealtimeSideOpen ? t("side-panel.hide") : t("side-panel.show")}
                     onClick={handleSideOpenerSwitch}
                 />
             </>

diff --git a/desktop/renderer-app/src/pages/SmallClassPage/index.tsx b/desktop/renderer-app/src/pages/SmallClassPage/index.tsx
@@ -284,7 +284,7 @@ export const SmallClassPage = observer<SmallClassPageProps>(function SmallClassP
                                 <img src={shareScreenSVG} />
                             )
                         }
-                        title="Share Screen"
+                        title={t("share-screen.self")}
                         onClick={handleShareScreen}
                     />
                 )}
@@ -306,7 +306,7 @@ export const SmallClassPage = observer<SmallClassPageProps>(function SmallClassP
                 <InviteButton roomInfo={classRoomStore.roomInfo} />
                 <TopBarRightBtn
                     icon={<img src={exitSVG} />}
-                    title="Exit"
+                    title={t("exit")}
                     onClick={() => confirm(ExitRoomConfirmType.ExitButton)}
                 />
                 <TopBarDivider />
@@ -318,7 +318,7 @@ export const SmallClassPage = observer<SmallClassPageProps>(function SmallClassP
                             <img src={hideSideSVG} />
                         )
                     }
-                    title={isRealtimeSideOpen ? "hide side panel" : "show side panel"}
+                    title={isRealtimeSideOpen ? t("side-panel.hide") : t("side-panel.show")}
                     onClick={() => openRealtimeSide(isRealtimeSideOpen => !isRealtimeSideOpen)}
                 />
             </>

diff --git a/packages/flat-components/src/components/ClassroomPage/CloudRecordBtn/index.tsx b/packages/flat-components/src/components/ClassroomPage/CloudRecordBtn/index.tsx
@@ -3,6 +3,7 @@ import { observer } from "mobx-react-lite";
 import React from "react";
 import RecordIdleSVG from "./icons/record-idle.svg";
 import RecordStartedSVG from "./icons/record-started.svg";
+import { useTranslation } from "react-i18next";
 
 export type CloudRecordBtnProps = {
     isRecording: boolean;
@@ -11,9 +12,12 @@ export type CloudRecordBtnProps = {
 
 export const CloudRecordBtn: React.FC<CloudRecordBtnProps> = observer(
     ({ isRecording, onClick }) => {
+        const { t } = useTranslation();
+
         return (
             <TopBarRightBtn
                 icon={<img src={isRecording ? RecordStartedSVG : RecordIdleSVG} />}
+                title={t("recording")}
                 onClick={onClick}
             />
         );

diff --git a/packages/flat-components/src/components/ClassroomPage/RaiseHand/index.tsx b/packages/flat-components/src/components/ClassroomPage/RaiseHand/index.tsx
@@ -3,6 +3,7 @@ import raiseHandActiveSVG from "./icons/raise-hand-active.svg";
 import "./style.less";
 
 import React from "react";
+import { useTranslation } from "react-i18next";
 
 export interface RaiseHandProps {
     isRaiseHand?: boolean;
@@ -15,8 +16,10 @@ export const RaiseHand: React.FC<RaiseHandProps> = ({
     disableHandRaising,
     onRaiseHandChange,
 }) => {
+    const { t } = useTranslation();
+
     return disableHandRaising ? null : (
-        <button className="raise-hand-btn" title="举手" onClick={onRaiseHandChange}>
+        <button className="raise-hand-btn" title={t("raise-your-hand")} onClick={onRaiseHandChange}>
             <img src={isRaiseHand ? raiseHandActiveSVG : raiseHandSVG} />
         </button>
     );

diff --git a/packages/flat-components/src/components/PeriodicRoomPage/MoreMenu.tsx b/packages/flat-components/src/components/PeriodicRoomPage/MoreMenu.tsx
@@ -49,7 +49,7 @@ export const MoreMenu: React.FC<MoreMenuProps> = ({
                             </>
                         )}
                         <Menu.Item onClick={() => setInviteRoomVisible(true)}>
-                            {t("copy-invitation")}
+                            {t("invitation")}
                         </Menu.Item>
                         <CancelSubPeriodicRoomModal
                             isCreator={isCreator}

diff --git a/packages/flat-components/src/components/RoomDetailPage/RoomDetailFooter/index.tsx b/packages/flat-components/src/components/RoomDetailPage/RoomDetailFooter/index.tsx
@@ -78,7 +78,7 @@ export const RoomDetailFooter = observer<RoomDetailFooterProps>(function RoomDet
                 </Button>
             )}
             <Button className="room-detail-footer-btn" onClick={() => setIsShowInviteModal(true)}>
-                {t("copy-invitation")}
+                {t("invitation")}
             </Button>
             <Button className="room-detail-footer-btn" type="primary" onClick={onJoinRoom}>
                 {isCreator && room.roomStatus === RoomStatus.Idle ? t("begin") : t("join-room")}

diff --git a/packages/flat-i18n/locales/en.json b/packages/flat-i18n/locales/en.json
@@ -133,7 +133,7 @@
   "room-type": "Room Type",
   "think-again": "Think again",
   "cancel-general-room-tips": "Are you sure to cancel this room? \nAfter cancellation, other members will not be able to join.",
-  "copy-invitation": "Invite",
+  "invitation": "Invite",
   "join-room": "Join room",
   "modify-room": "Modify",
   "copy-success": "Copy successfully",
@@ -364,7 +364,8 @@
     "choose-share-content": "Choose what to share",
     "tip-window-title": "Ending screen sharing",
     "tip-window-body": "You are sharing the current screen",
-    "tip-window-button": "End Sharing"
+    "tip-window-button": "End Sharing",
+    "self": "Share Screen"
   },
   "app-store": "AppStore(Beta)",
   "recently-used": "Recently Used",
@@ -390,6 +391,12 @@
   "user-guide-button": "Check it out now",
   "start-recording": "Start recording",
   "stop-recording": "Stop recording",
+  "recording": "Recording",
   "open-in-browser": "Open in Browser",
-  "room-started": "Started: "
+  "room-started": "Started:",
+  "exit": "Exit",
+  "side-panel": {
+    "hide": "Hide",
+    "show":  "Show"
+  }
 }
diff --git a/packages/flat-i18n/locales/zh-CN.json b/packages/flat-i18n/locales/zh-CN.json
@@ -123,7 +123,7 @@
   "remove-room": "移除房间",
   "cancel-room": "取消房间",
   "modify-room": "修改房间",
-  "copy-invitation": "复制邀请",
+  "invitation": "邀请",
   "join-room": "加入房间",
   "copy-success": "复制成功",
   "copy-fail": "复制失败，请确保已允许相关权限",
@@ -364,7 +364,8 @@
     "choose-share-content": "选择共享内容",
     "tip-window-title": "结束屏幕共享",
     "tip-window-body": "正在共享屏幕",
-    "tip-window-button": "结束共享"
+    "tip-window-button": "结束共享",
+    "self": "屏幕分享"
   },
   "app-store": "应用中心（测试版）",
   "recently-used": "最近使用",
@@ -390,6 +391,12 @@
   "user-guide-button": "立即查看",
   "start-recording": "开始录制",
   "stop-recording": "停止录制",
+  "recording": "录制",
   "open-in-browser": "请在浏览器中打开",
-  "room-started": "已上课："
+  "room-started": "已上课：",
+  "exit": "退出",
+  "side-panel": {
+    "hide": "折叠",
+    "show":  "展开"
+  }
 }
diff --git a/web/flat-web/src/components/AppStoreButton/index.tsx b/web/flat-web/src/components/AppStoreButton/index.tsx
@@ -64,7 +64,7 @@ export const AppStoreButton = observer<AppStoreButtonProps>(function AppStoreBut
         <>
             <TopBarRightBtn
                 icon={<img src={appStoreSVG} />}
-                title="Open App Store"
+                title={t("app-store")}
                 onClick={() => setAppStoreIsVisible(true)}
             />
             <Modal

diff --git a/web/flat-web/src/components/CloudStorageButton.tsx b/web/flat-web/src/components/CloudStorageButton.tsx
@@ -29,7 +29,7 @@ export const CloudStorageButton = observer<CloudStorageButtonProps>(function Clo
         <>
             <TopBarRightBtn
                 icon={<img src={cloudStorageSVG} />}
-                title="Open Cloud Storage"
+                title={t("cloud-storage")}
                 onClick={showModal}
             />
             <Modal

diff --git a/web/flat-web/src/components/InviteButton.tsx b/web/flat-web/src/components/InviteButton.tsx
@@ -5,19 +5,21 @@ import { observer } from "mobx-react-lite";
 import { RoomItem } from "../stores/room-store";
 import { InviteModal } from "./Modal/InviteModal";
 import { TopBarRightBtn } from "flat-components";
+import { useTranslation } from "react-i18next";
 
 export interface InviteButtonProps {
     roomInfo?: RoomItem;
 }
 
 export const InviteButton = observer<InviteButtonProps>(function InviteButton({ roomInfo }) {
+    const { t } = useTranslation();
     const [isShowInviteModal, showInviteModal] = useState(false);
     const hideInviteModal = (): void => showInviteModal(false);
     return (
         <div>
             <TopBarRightBtn
                 icon={<img src={inviteSVG} />}
-                title="Invite"
+                title={t("invitation")}
                 onClick={() => showInviteModal(true)}
             />
             {roomInfo && (

diff --git a/web/flat-web/src/pages/BigClassPage/index.tsx b/web/flat-web/src/pages/BigClassPage/index.tsx
@@ -231,7 +231,7 @@ export const BigClassPage = observer<BigClassPageProps>(function BigClassPage()
                                 ? "share-screen-active"
                                 : "share-screen"
                         }
-                        title="Share Screen"
+                        title={t("share-screen.self")}
                         onClick={handleShareScreen}
                     />
                 )}
@@ -253,13 +253,13 @@ export const BigClassPage = observer<BigClassPageProps>(function BigClassPage()
                 <InviteButton roomInfo={classRoomStore.roomInfo} />
                 <TopBarRightBtn
                     icon="exit"
-                    title="Exit"
+                    title={t("exit")}
                     onClick={() => confirm(ExitRoomConfirmType.ExitButton)}
                 />
                 <TopBarDivider />
                 <TopBarRightBtn
                     icon={isRealtimeSideOpen ? "hide-side" : "hide-side-active"}
-                    title={isRealtimeSideOpen ? "hide side panel" : "show side panel"}
+                    title={isRealtimeSideOpen ? t("side-panel.hide") : t("side-panel.show")}
                     onClick={handleSideOpenerSwitch}
                 />
             </>

diff --git a/web/flat-web/src/pages/HomePage/MainRoomListPanel/MainRoomList.tsx b/web/flat-web/src/pages/HomePage/MainRoomListPanel/MainRoomList.tsx
@@ -365,7 +365,7 @@ export const MainRoomList = observer<MainRoomListProps>(function MainRoomList({
                 });
             }
             if (room.roomUUID) {
-                result.push({ key: "invite", text: t("copy-invitation") });
+                result.push({ key: "invite", text: t("invitation") });
             }
         }
         return result as SubActions;

diff --git a/web/flat-web/src/pages/OneToOnePage/index.tsx b/web/flat-web/src/pages/OneToOnePage/index.tsx
@@ -191,7 +191,7 @@ export const OneToOnePage = observer<OneToOnePageProps>(function OneToOnePage()
                                 ? "share-screen-active"
                                 : "share-screen"
                         }
-                        title="Share Screen"
+                        title={t("share-screen.self")}
                         onClick={handleShareScreen}
                     />
                 )}
@@ -213,13 +213,13 @@ export const OneToOnePage = observer<OneToOnePageProps>(function OneToOnePage()
                 <InviteButton roomInfo={classRoomStore.roomInfo} />
                 <TopBarRightBtn
                     icon="exit"
-                    title="Exit"
+                    title={t("exit")}
                     onClick={() => confirm(ExitRoomConfirmType.ExitButton)}
                 />
                 <TopBarDivider />
                 <TopBarRightBtn
                     icon={isRealtimeSideOpen ? "hide-side" : "hide-side-active"}
-                    title={isRealtimeSideOpen ? "hide side panel" : "show side panel"}
+                    title={isRealtimeSideOpen ? t("side-panel.hide") : t("side-panel.show")}
                     onClick={handleSideOpenerSwitch}
                 />
             </>

diff --git a/web/flat-web/src/pages/SmallClassPage/index.tsx b/web/flat-web/src/pages/SmallClassPage/index.tsx
@@ -263,7 +263,7 @@ export const SmallClassPage = observer<SmallClassPageProps>(function SmallClassP
                                 ? "share-screen-active"
                                 : "share-screen"
                         }
-                        title="Share Screen"
+                        title={t("share-screen.self")}
                         onClick={handleShareScreen}
                     />
                 )}
@@ -284,13 +284,13 @@ export const SmallClassPage = observer<SmallClassPageProps>(function SmallClassP
                 <InviteButton roomInfo={classRoomStore.roomInfo} />
                 <TopBarRightBtn
                     icon="exit"
-                    title="Exit"
+                    title={t("exit")}
                     onClick={() => confirm(ExitRoomConfirmType.ExitButton)}
                 />
                 <TopBarDivider />
                 <TopBarRightBtn
                     icon={isRealtimeSideOpen ? "hide-side" : "hide-side-active"}
-                    title={isRealtimeSideOpen ? "hide side panel" : "show side panel"}
+                    title={isRealtimeSideOpen ? t("side-panel.hide") : t("side-panel.show")}
                     onClick={() => {
                         openRealtimeSide(isRealtimeSideOpen => !isRealtimeSideOpen);
                         whiteboardStore.setRightSideClose(isRealtimeSideOpen);