refactor: video call

src/routes/chat/DMChat/index.tsx

@@ -8,6 +8,8 @@ import User from "../../../common/component/User";
 import Layout from "../Layout";
 import { useAppSelector } from "../../../app/store";
 import GoBackNav from "../../../common/component/GoBackNav";
+import ServerVersionChecker from "../../../common/component/ServerVersionChecker";
+import VoiceChat from "../VoiceChat";
 type Props = {
   uid: number;
   dropFiles?: File[];
@@ -33,6 +35,9 @@ const DMChat: FC<Props> = ({ uid = 0, dropFiles }) => {
       dropFiles={dropFiles}
       aside={
         <ul className="flex flex-col gap-6">
+          <ServerVersionChecker version="0.3.6" empty={true}>
+            <VoiceChat context={`dm`} id={uid} />
+          </ServerVersionChecker>
           <Tooltip tip="Saved Items" placement="left">
             <Tippy
               placement="left-start"

src/routes/chat/VoiceChat/VoiceManagement.tsx

@@ -1,5 +1,5 @@
 import clsx from 'clsx';
-// import React from 'react';
+import { useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { VoicingInfo } from '../../../app/slices/voice';
@@ -15,6 +15,7 @@ import IconScreen from '../../../assets/icons/share.screen.svg';
 import StyledButton from '../../../common/component/styled/Button';
 import IconCallOff from '../../../assets/icons/call.off.svg';
 import Tooltip from '../../../common/component/Tooltip';
+import { playAgoraVideo } from '../../../common/utils';
 // import User from '../../../common/component/User';
 
 type Props = {
@@ -34,6 +35,13 @@ const VoiceManagement = ({ info, setMute, setDeafen, leave, closeCamera, openCam
             voicingMembers: store.voice.voicingMembers
         };
     });
+    useEffect(() => {
+        const ids = voicingMembers.ids;
+        ids.forEach(id => {
+            playAgoraVideo(id);
+        });
+    }, [voicingMembers.ids]);
+
     if (!info) return null;
     const { deafen, muted, video } = info;
     const nameClass = clsx(`text-sm text-gray-500 max-w-[120px] truncate font-semibold dark:text-white`);

src/routes/chat/VoiceChat/index.tsx

@@ -3,7 +3,7 @@
 // import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useDispatch } from 'react-redux';
-import { updateChannelVisibleAside } from '../../../app/slices/footprint';
+import { updateChannelVisibleAside, updateDMVisibleAside } from '../../../app/slices/footprint';
 import { useAppSelector } from '../../../app/store';
 import IconHeadphone from '../../../assets/icons/headphone.svg';
 import Tooltip from '../../../common/component/Tooltip';
@@ -29,13 +29,11 @@ const VoiceChat = ({ id, context = "channel" }: Props) => {
     const { data: enabled } = useGetAgoraStatusQuery();
     const { t } = useTranslation("chat");
     const toggleDashboard = () => {
-        if (context == "channel") {
-            dispatch(updateChannelVisibleAside({
-                id,
-                aside: visibleAside == "voice" ? null : "voice"
-            }));
-        }
-        // todo DM
+        const data = {
+            id,
+            aside: visibleAside == "voice" ? null : "voice" as const
+        };
+        dispatch(context == "channel" ? updateChannelVisibleAside(data) : updateDMVisibleAside(data));
     };
     const handleJoin = () => {
         if (joining || joined) {
@@ -43,12 +41,11 @@ const VoiceChat = ({ id, context = "channel" }: Props) => {
             return;
         }
         joinVoice();
-        if (context == "channel") {
-            dispatch(updateChannelVisibleAside({
-                id,
-                aside: "voice"
-            }));
-        }
+        const data = {
+            id,
+            aside: "voice" as const
+        };
+        dispatch(context == "channel" ? updateChannelVisibleAside(data) : updateDMVisibleAside(data));
     };
     if (!loginUser || !enabled) return null;
     const visible = visibleAside == "voice";

src/routes/settingChannel/index.tsx

@@ -50,7 +50,7 @@ export default function ChannelSetting() {
         pathPrefix={`/setting/channel/${cid}`}
         nav={currNav}
         closeModal={close}
-        title="Channel Setting"
+        title="Channel Settings"
         navs={navs}
         dangers={[
           canLeave && {