refactor: joining

src/routes/chat/VoiceChat/index.tsx

@@ -7,7 +7,7 @@ import { updateChannelVisibleAside } from '../../../app/slices/channels';
 import { useAppSelector } from '../../../app/store';
 import IconHeadphone from '../../../assets/icons/headphone.svg';
 import Tooltip from '../../../common/component/Tooltip';
-// import Dashboard from './Dashboard';
+import { useVoice } from '../../../common/component/Voice';
 
 type Props = {
     context?: "channel" | "dm"
@@ -15,8 +15,15 @@ type Props = {
 }
 
 const VoiceChat = ({ id, context = "channel" }: Props) => {
+    const { joinVoice, joined, joining = false, joinedAtThisContext } = useVoice({ id, context });
     const dispatch = useDispatch();
-    const { loginUser, contextData } = useAppSelector(store => { return { loginUser: store.authData.user, contextData: context == "channel" ? store.channels.byId[id] : store.users.byId[id] }; });
+    const { loginUser, contextData, voiceList } = useAppSelector(store => {
+        return {
+            loginUser: store.authData.user,
+            contextData: context == "channel" ? store.channels.byId[id] : store.users.byId[id],
+            voiceList: store.voice.list
+        };
+    });
     const { t } = useTranslation("chat");
     const toggleDashboard = () => {
         if (context == "channel") {
@@ -27,12 +34,30 @@ const VoiceChat = ({ id, context = "channel" }: Props) => {
         }
         // todo DM
     };
+    const handleJoin = () => {
+        if (joining || joined) {
+            alert("You have joined another channel, please leave first!");
+            return;
+        }
+        joinVoice();
+        if (context == "channel") {
+            dispatch(updateChannelVisibleAside({
+                id,
+                aside: "voice"
+            }));
+        }
+    };
     if (!loginUser) return null;
     const visible = contextData.visibleAside == "voice";
+    const memberCount = voiceList.find((v) => v.context == context && v.id == id)?.memberCount ?? 0;
+    const badgeClass = `absolute -top-1 -right-1 w-4 h-4 rounded-full bg-primary-400 text-white `;
     return (
         <Tooltip disabled={visible} tip={t("voice")} placement="left">
-            <li className={`relative`} >
-                <IconHeadphone className={visible ? "fill-gray-600" : "fill-gray-500"} role="button" onClick={toggleDashboard} />
+            <li className={`relative group`} >
+                <IconHeadphone className={visible ? "fill-gray-600" : "fill-gray-500"} role="button" onClick={joinedAtThisContext ? toggleDashboard : handleJoin} />
+                {visible ? null : memberCount > 0 ? <span className={`${badgeClass} flex-center font-bold text-[10px]`}>{memberCount}</span> : <span className={`${badgeClass} hidden text-xs group-hover:flex-center`}>
+                    <em className='font-normal'>+</em>
+                </span>}
             </li>
         </Tooltip>
     );