chore: add i18n to inactive screen component

public/locales/en/common.json

@@ -42,7 +42,8 @@
     "mute": "Mute",
     "unmute": "Unmute",
     "mark_read": "Mark As Read",
-    "hide_session": "Hide Session"
+    "hide_session": "Hide Session",
+    "reload": "reload"
   },
   "status": {
     "uploading": "Uploading"
@@ -72,5 +73,9 @@
     "current_version": "Your current version:<0>{{version}}</0>",
     "update_tip": "Please upgrade the Server!",
     "howto": "How to Update VoceChat Server"
+  },
+  "inactive": {
+    "title": "Only one active tab is allowed for VoceChat",
+    "desc": "Please reload this page to continue using this tab or close it"
   }
 }

public/locales/zh/common.json

@@ -44,7 +44,8 @@
     "mute": "静默通知",
     "unmute": "取消静默",
     "mark_read": "标记已读",
-    "hide_session": "隐藏会话"
+    "hide_session": "隐藏会话",
+    "reload": "刷新页面"
   },
   "status": {
     "uploading": "上传中"
@@ -74,5 +75,9 @@
     "current_version": "当前的Server版本:<0>{{version}}</0>",
     "update_tip": "请升级后端服务！",
     "howto": "如何升级后端服务"
+  },
+  "inactive": {
+    "title": "VoceChat只允许活跃一个标签页",
+    "desc": "刷新页面继续或者关闭该页面"
   }
 }

src/common/component/InactiveScreen.tsx

@@ -1,4 +1,5 @@
 import { FC, useEffect } from "react";
+import { useTranslation } from "react-i18next";
 import useStreaming from "../hook/useStreaming";
 // import clsx from "clsx";
 import Button from "./styled/Button";
@@ -7,6 +8,7 @@ interface Props {
 }
 
 const InactiveScreen: FC<Props> = () => {
+  const { t } = useTranslation();
   const { stopStreaming } = useStreaming();
   // const [reloadVisible, setReloadVisible] = useState(false);
   useEffect(() => {
@@ -21,11 +23,11 @@ const InactiveScreen: FC<Props> = () => {
     location.reload();
   };
   return (
-    <div className="w-screen h-screen bg-orange-200/50 flex justify-center items-center text-4xl font-bold">
+    <div className="w-screen h-screen flex justify-center items-center text-4xl font-bold">
       <div className="flex flex-col items-center gap-2">
-        <h1 className="text-4xl font-bold">Only one active tab is allowed for VoceChat</h1>
-        <p className="text-gray-400 text-base font-semibold" >Please reload this page to continue using this tab or close it</p>
-        <Button className="mt-4" onClick={handleReload}>RELOAD</Button>
+        <h1 className="text-4xl font-bold">{t("inactive.title")}</h1>
+        <p className="text-gray-400 text-base font-semibold" >{t("inactive.desc")}</p>
+        <Button className="mt-4 uppercase" onClick={handleReload}>{t("action.reload")}</Button>
       </div>
 
     </div>