feat: 声网插件增加国际化支持

Author: moonrailgun

server/plugins/com.msgbyte.agora/web/plugins/com.msgbyte.agora/src/FloatWindow/Controls.tsx

@@ -1,6 +1,7 @@
 import { useAsyncFn } from '@capital/common';
 import { IconBtn } from '@capital/component';
 import React from 'react';
+import { Translate } from '../translate';
 import {
   useClient,
   createMicrophoneAudioTrack,
@@ -61,7 +62,7 @@ export const Controls: React.FC<{
     <div className="controller">
       <IconBtn
         icon={mediaPerm.video ? 'mdi:video' : 'mdi:video-off'}
-        title={mediaPerm.video ? '关闭摄像头' : '开启摄像头'}
+        title={mediaPerm.video ? Translate.closeCamera : Translate.openCamera}
         active={mediaPerm.video}
         disabled={loading}
         size="large"
@@ -70,7 +71,7 @@ export const Controls: React.FC<{
 
       <IconBtn
         icon={mediaPerm.audio ? 'mdi:microphone' : 'mdi:microphone-off'}
-        title={mediaPerm.audio ? '关闭麦克风' : '开启麦克风'}
+        title={mediaPerm.audio ? Translate.closeMic : Translate.openMic}
         active={mediaPerm.audio}
         disabled={loading}
         size="large"
@@ -79,7 +80,7 @@ export const Controls: React.FC<{
 
       <IconBtn
         icon="mdi:phone-remove-outline"
-        title="挂断"
+        title={Translate.hangUp}
         danger={true}
         size="large"
         onClick={leaveChannel}

server/plugins/com.msgbyte.agora/web/plugins/com.msgbyte.agora/src/FloatWindow/MeetingView.tsx

@@ -11,6 +11,7 @@ import { useMeetingStore } from './store';
 import { NetworkStats } from './NetworkStats';
 import _once from 'lodash/once';
 import type { IAgoraRTCClient } from 'agora-rtc-react';
+import { Translate } from '../translate';
 
 const Root = styled.div`
   .body {
@@ -113,7 +114,7 @@ export const MeetingView: React.FC<MeetingViewProps> = React.memo((props) => {
       <NetworkStats />
 
       <div className="body">
-        {start ? <Videos /> : <LoadingSpinner tip={'正在加入通话...'} />}
+        {start ? <Videos /> : <LoadingSpinner tip={Translate.joinTip} />}
       </div>
 
       <div className="controller">

server/plugins/com.msgbyte.agora/web/plugins/com.msgbyte.agora/src/FloatWindow/index.tsx

@@ -1,20 +1,19 @@
 import { showToasts } from '@capital/common';
 import { PortalAdd, PortalRemove } from '@capital/component';
 import React from 'react';
+import { Translate } from '../translate';
 import { FloatMeetingWindow } from './window';
 
 let currentMeeting: string | null = null;
 
 /**
- * TODO
- *
  * 启动快速会议
  *
  * 表现形式是在浏览器内有个小的浮动窗口
  */
 export function startFastMeeting(meetingId: string) {
   if (currentMeeting) {
-    showToasts('当前已有正在进行中的通话, 请先结束上一场通话');
+    showToasts(Translate.repeatTip);
     return;
   }
 

server/plugins/com.msgbyte.agora/web/plugins/com.msgbyte.agora/src/FloatWindow/window.tsx

@@ -3,6 +3,7 @@ import styled from 'styled-components';
 import { Divider, ErrorBoundary } from '@capital/component';
 import { MeetingView, MeetingViewProps } from './MeetingView';
 import { SpeakerNames } from './SpeakerNames';
+import { Translate } from '../translate';
 
 const FloatWindow = styled.div`
   z-index: 100;
@@ -61,7 +62,9 @@ export const FloatMeetingWindow: React.FC<MeetingViewProps> = React.memo(
 
             <Divider type="vertical" />
 
-            <span style={{ marginLeft: 4 }}>{folder ? '展开' : '收起'}</span>
+            <span style={{ marginLeft: 4 }}>
+              {folder ? Translate.expand : Translate.foldup}
+            </span>
           </div>
         </div>
       </FloatWindow>

server/plugins/com.msgbyte.agora/web/plugins/com.msgbyte.agora/src/index.tsx

@@ -1,5 +1,6 @@
 import { regPluginPanelAction } from '@capital/common';
 import { openConfirmModal } from '@capital/component';
+import { Translate } from './translate';
 
 console.log('Plugin 声网音视频 is loaded');
 
@@ -11,13 +12,13 @@ async function startFastMeeting(meetingId: string) {
 // 发起群组会议
 regPluginPanelAction({
   name: 'plugin:com.msgbyte.meeting/groupAction',
-  label: '发起通话',
+  label: Translate.startCall,
   position: 'group',
   icon: 'mdi:video-box',
   onClick: ({ groupId, panelId }) => {
     openConfirmModal({
-      title: '发起通话',
-      content: '是否通过声网插件在当前会话开启音视频通讯？',
+      title: Translate.startCall,
+      content: Translate.startCallContent,
       onConfirm: async () => {
         startFastMeeting(`${groupId}|${panelId}`);
       },

server/plugins/com.msgbyte.agora/web/plugins/com.msgbyte.agora/src/translate.ts

@@ -17,4 +17,50 @@ export const Translate = {
     'zh-CN': '无人发言',
     'en-US': 'No one Speaking',
   }),
+  startCall: localTrans({
+    'zh-CN': '发起通话',
+    'en-US': 'Start Call',
+  }),
+  startCallContent: localTrans({
+    'zh-CN': '是否通过声网插件在当前会话开启音视频通讯？',
+    'en-US':
+      'Do you want to enable audio and video communication in the current session through the Agora plugin?',
+  }),
+  expand: localTrans({
+    'zh-CN': '展开',
+    'en-US': 'expand',
+  }),
+  foldup: localTrans({
+    'zh-CN': '收起',
+    'en-US': 'foldup',
+  }),
+  joinTip: localTrans({
+    'zh-CN': '正在加入通话...',
+    'en-US': 'Joining call...',
+  }),
+  repeatTip: localTrans({
+    'zh-CN': '当前已有正在进行中的通话, 请先结束上一场通话',
+    'en-US':
+      'There is currently an active call, please end the previous call first',
+  }),
+  hangUp: localTrans({
+    'zh-CN': '挂断',
+    'en-US': 'Hang Up',
+  }),
+  openCamera: localTrans({
+    'zh-CN': '开启摄像头',
+    'en-US': 'Open Camera',
+  }),
+  closeCamera: localTrans({
+    'zh-CN': '关闭摄像头',
+    'en-US': 'Close Camera',
+  }),
+  openMic: localTrans({
+    'zh-CN': '开启麦克风',
+    'en-US': 'Open Mic',
+  }),
+  closeMic: localTrans({
+    'zh-CN': '关闭麦克风',
+    'en-US': 'Close Mic',
+  }),
 };