chore: tooltips for voice widget

public/locales/en/chat.json

@@ -46,5 +46,10 @@
   "file": "file",
   "image": "image",
   "forward": "forward",
-  "voice": "Voice Chat"
+  "voice": "Voice Chat",
+  "deafen": "Deafen",
+  "undeafen": "Undeafen",
+  "mute": "Mute",
+  "unmute": "Unmute",
+  "leave_voice": "Leave Voice Chat"
 }

public/locales/zh/chat.json

@@ -47,5 +47,10 @@
   "file": "文件",
   "image": "图片",
   "forward": "转发",
-  "voice": "音频通话"
+  "voice": "音频通话",
+  "deafen": "静默",
+  "undeafen": "取消静默",
+  "mute": "静音",
+  "unmute": "取消静音",
+  "leave_voice": "离开"
 }

src/routes/chat/RTCWidget.tsx

@@ -1,13 +1,15 @@
-import React from 'react';
+// import React from 'react';
 import { useAppSelector } from '../../app/store';
 import User from '../../common/component/User';
 import IconMic from '../../assets/icons/mic.on.svg';
 import IconMicOff from '../../assets/icons/mic.off.svg';
-import IconCallOff from '../../assets/icons/call.off.svg';
+import IconCallOff from '../../assets/icons/headphone.svg';
 import IconSoundOn from '../../assets/icons/sound.on.svg';
 import IconSoundOff from '../../assets/icons/sound.off.svg';
 import { useVoice } from '../../common/component/Voice';
 import Signal from '../../common/component/Signal';
+import Tooltip from '../../common/component/Tooltip';
+import { useTranslation } from 'react-i18next';
 
 type Props = {
     id: number,
@@ -15,6 +17,7 @@ type Props = {
 }
 
 const RTCWidget = ({ id, context = "channel" }: Props) => {
+    const { t } = useTranslation("chat");
     const { leave, voicingInfo, setMute, setDeafen } = useVoice({ context, id });
     const { loginUser, channelData, userData } = useAppSelector(store => {
         return {
@@ -33,28 +36,34 @@ const RTCWidget = ({ id, context = "channel" }: Props) => {
                 <div className="flex flex-1 items-center gap-1">
                     <Signal strength={voicingInfo.downlinkNetworkQuality} />
                     <div className="flex flex-col">
-                        <span className='text-green-800'>Voice Connected</span>
+                        <span className='text-green-800 font-bold'>Voice Connected</span>
                         <span className='text-gray-600 dark:text-gray-400 text-xs truncate max-w-[170px]' >{voicingInfo.context == "channel" ? "Channel" : "DM"} / {voicingInfo.context == "channel" ? channelData[voicingInfo.id].name : userData[voicingInfo.id].name}</span>
                     </div>
                 </div>
-                <IconCallOff onClick={leave} role="button" className="fill-red-600" />
+                <Tooltip tip={t("leave_voice")} placement="top">
+                    <IconCallOff onClick={leave} role="button" className="fill-red-600" />
+                </Tooltip>
             </div>
             {/* } */}
             <div className="flex justify-between items-center pt-2">
                 <div className="flex items-center gap-3">
                     <User uid={loginUser.uid} compact />
                     <div className="flex flex-col">
-                        <span className='dark:text-white text-sm'>{loginUser.name}</span>
+                        <span className='dark:text-white text-sm font-bold'>{loginUser.name}</span>
                         <span className='text-gray-400 text-xs'>#{loginUser.uid}</span>
                     </div>
                 </div>
                 {/* {voicingInfo && */}
                 <div className="flex gap-2 px-1">
-                    {voicingInfo.deafen ? <IconSoundOff role="button" onClick={setDeafen.bind(null, false)} /> : <IconSoundOn role="button" onClick={setDeafen.bind(null, true)} />}
-                    {voicingInfo.muted ?
-                        <IconMicOff onClick={setMute.bind(null, false)} role="button" />
-                        :
-                        <IconMic onClick={setMute.bind(null, true)} role="button" />}
+                    <Tooltip tip={voicingInfo.muted ? t("undeafen") : t("deafen")} placement="top">
+                        {voicingInfo.deafen ? <IconSoundOff role="button" onClick={setDeafen.bind(null, false)} /> : <IconSoundOn role="button" onClick={setDeafen.bind(null, true)} />}
+                    </Tooltip>
+                    <Tooltip tip={voicingInfo.muted ? t("unmute") : t("mute")} placement="top">
+                        {voicingInfo.muted ?
+                            <IconMicOff onClick={setMute.bind(null, false)} role="button" />
+                            :
+                            <IconMic onClick={setMute.bind(null, true)} role="button" />}
+                    </Tooltip>
                 </div>
                 {/*  } */}
             </div>