feat: audio quality and mute

src/routes/chat/VoiceChat/Dashboard.tsx

@@ -10,11 +10,13 @@ type Props = {
 }
 
 const Dashboard = ({ context = "channel", id }: Props) => {
-  const { joinVoice, joined, joining, voiceInfo } = useVoice({ id, context });
+  const { joinVoice, joined, joining, voicingInfo } = useVoice({ id, context });
   // const dispatch = useDispatch();
 
 
-  return <div className='absolute -left-full -translate-x-full -top-1 z-50 shadow rounded p-2 bg-white dark:bg-black'>{joined ? <VoiceManagement info={voiceInfo} /> : <JoinVoice join={joinVoice} joining={joining} />}</div>;
+  return <div className='absolute -left-full -translate-x-full -top-1 z-50 shadow rounded p-2 bg-white dark:bg-black px-2 py-4'>
+    {joined ? <VoiceManagement info={voicingInfo} /> : <JoinVoice join={joinVoice} joining={joining} />}
+  </div>;
 };
 
 export default Dashboard;

src/routes/chat/VoiceChat/JoinVoice.tsx

@@ -11,7 +11,7 @@ const JoinVoice = ({ joining, join }: Props) => {
         Joining
     </div>;
     return (
-        <div>
+        <div className='w-full h-full flex-center p-4'>
             <StyledButton className='mini' onClick={join}>Join</StyledButton>
         </div>
     );

src/routes/chat/VoiceChat/VoiceManagement.tsx

@@ -1,22 +1,49 @@
+import clsx from 'clsx';
 import React from 'react';
-import { VoiceInfo } from '../../../app/slices/voice';
+import { VoicingInfo } from '../../../app/slices/voice';
 import { useAppSelector } from '../../../app/store';
-import User from '../../../common/component/User';
+import Avatar from '../../../common/component/Avatar';
+import IconMic from '../../../assets/icons/mic.on.svg';
+import IconMicOff from '../../../assets/icons/mic.off.svg';
+// import User from '../../../common/component/User';
 
 type Props = {
-    info: VoiceInfo | null
+    info: VoicingInfo | null
 }
 
 const VoiceManagement = ({ info }: Props) => {
     const userData = useAppSelector(store => store.users.byId);
     if (!info) return null;
     const { context, id, members } = info;
+    const nameClass = clsx(`text-sm text-gray-500 max-w-[190px] truncate font-semibold dark:text-white`);
     return (
-        <div>
-            <ul>
+        <div className='w-full h-full py-2'>
+            <ul className='flex flex-col gap-2'>
                 {members.map((uid) => {
+                    const curr = userData[uid];
+                    if (!curr) return null;
                     return <li key={uid}>
-                        <User uid={uid} interactive={false} />
+                        <div className="flex items-center justify-between gap-6 ">
+                            <div className="flex items-center gap-2">
+                                <div className="w-8 h-8 flex shrink-0">
+                                    <Avatar
+                                        width={32}
+                                        height={32}
+                                        className="w-full h-full rounded-full object-cover"
+                                        src={curr.avatar}
+                                        name={curr.name}
+                                        alt="avatar"
+                                    />
+                                </div>
+                                <span className={nameClass} title={curr?.name}>
+                                    {curr?.name}
+                                </span>
+                            </div>
+                            <div className="flex items-center">
+                                <IconMic className="w-4" role="button" />
+                            </div>
+                        </div>
+                        {/* <User uid={uid} interactive={false} /> */}
                         {/* {userData[uid]?.name} */}
                     </li>;
                 })}

src/routes/chat/VoiceChat/index.tsx

@@ -23,7 +23,7 @@ const VoiceChat = ({ id, context = "channel" }: Props) => {
     return (
         <Tooltip disabled={dashboardVisible} tip={t("voice")} placement="left">
             <li className={`relative`} >
-                <IconHeadphone className="fill-gray-500" role="button" onClick={toggleDashboard} />
+                <IconHeadphone className={dashboardVisible ? "fill-gray-600" : "fill-gray-500"} role="button" onClick={toggleDashboard} />
                 {dashboardVisible && <Dashboard id={id} context={context} />}
             </li>
         </Tooltip>