feat: voice dashboard

src/app/services/server.ts

@@ -16,7 +16,8 @@ import {
   GithubAuthConfig,
   LicenseResponse,
   RenewLicense,
-  RenewLicenseResponse
+  RenewLicenseResponse,
+  AgoraTokenResponse
 } from "../../types/server";
 import { Channel } from "../../types/channel";
 import { ContentTypeKey } from "../../types/message";
@@ -109,6 +110,11 @@ export const serverApi = createApi({
         body: data
       })
     }),
+    getAgoraToken: builder.query<AgoraTokenResponse, number>({
+      query: (id) => ({
+        url: `group/${id}/agora_token`,
+      })
+    }),
     getSMTPConfig: builder.query<SMTPConfig, void>({
       query: () => ({ url: `admin/smtp/config` })
     }),
@@ -320,5 +326,6 @@ export const {
   useLazyGetBotRelatedChannelsQuery,
   useSendMessageByBotMutation,
   useUpdateFrontendUrlMutation,
-  useGetFrontendUrlQuery
+  useGetFrontendUrlQuery,
+  useLazyGetAgoraTokenQuery
 } = serverApi;

src/routes/chat/ChannelChat/index.tsx

@@ -84,7 +84,7 @@ function ChannelChat({ cid = 0, dropFiles = [] }: Props) {
             </li>
           </Tippy>
         </Tooltip>
-        <VoiceChat channel={`channel_${cid}`} />
+        <VoiceChat channel={`channel_${cid}`} id={cid} />
         <Tooltip tip={t("fav")} placement="left">
           <Tippy
             placement="left-start"

src/routes/chat/VoiceChat/Dashboard.tsx

@@ -3,20 +3,24 @@ import AgoraRTC from "agora-rtc-sdk-ng";
 import useConfig from '../../../common/hook/useConfig';
 import { useDispatch } from 'react-redux';
 import { updateVoiceStatus } from '../../../app/slices/auth.data';
+import { useLazyGetAgoraTokenQuery } from '../../../app/services/server';
+import VoiceManagement from './VoiceManagement';
+import JoinVoice from './JoinVoice';
 
 type Props = {
   channel: string,
+  id: number,
   uid: number,
   voicing?: boolean;
 }
 
-const Dashboard = ({ voicing, uid, channel }: Props) => {
+const Dashboard = ({ id, voicing, uid, channel }: Props) => {
   const dispatch = useDispatch();
-  console.log("aaaaa");
+  const [generateToken] = useLazyGetAgoraTokenQuery();
 
   const { agoraConfig } = useConfig("agora");
   useEffect(() => {
-    console.log("aaa", agoraConfig);
+    console.log("agora config", agoraConfig);
     const startConnect = async () => {
       // Create an instance of the Agora Engine
       const agoraEngine = AgoraRTC.createClient({ mode: "rtc", codec: "vp8" });
@@ -27,17 +31,16 @@ const Dashboard = ({ voicing, uid, channel }: Props) => {
         await agoraEngine.subscribe(user, mediaType);
         console.log("subscribe success");
 
-        // // Subscribe and play the remote audio track.
-        // if (mediaType == "audio")
-        // {
-        //   channelParameters.remoteUid=user.uid;
-        //   // Get the RemoteAudioTrack object from the AgoraRTCRemoteUser object.
-        //   channelParameters.remoteAudioTrack = user.audioTrack;
-        //   // Play the remote audio track. 
-        //   channelParameters.remoteAudioTrack.play();
-        //   console.log("Remote user connected: " + user.uid);
+        // Subscribe and play the remote audio track.
+        if (mediaType == "audio") {
+          // channelParameters.remoteUid=user.uid;
+          // // Get the RemoteAudioTrack object from the AgoraRTCRemoteUser object.
+          // channelParameters.remoteAudioTrack = user.audioTrack;
+          // Play the remote audio track. 
+          user.audioTrack?.play();
+          console.log("Remote user connected: " + user.uid);
 
-        // }
+        }
 
         // Listen for the "user-unpublished" event.
         agoraEngine.on("user-unpublished", user => {
@@ -47,14 +50,19 @@ const Dashboard = ({ voicing, uid, channel }: Props) => {
       });
       // Join a channel.
       console.log("join data ", agoraConfig);
-      await agoraEngine.join(agoraConfig!.app_id, agoraConfig!.rtm_key, agoraConfig!.rtm_secret, uid);
-      console.log("Joined channel: " + agoraConfig!.rtm_key);
-      // // Create a local audio track from the microphone audio.
-      // channelParameters.localAudioTrack = await AgoraRTC.createMicrophoneAudioTrack();
-      // // Publish the local audio track in the channel.
-      // await agoraEngine.publish(channelParameters.localAudioTrack);
-      // console.log("Publish success!");
-      dispatch(updateVoiceStatus(true));
+      const { isError, data } = await generateToken(id);
+      if (!isError && data) {
+        const { channel_name, app_id, agora_token, uid } = data;
+        await agoraEngine.join(app_id, channel_name, agora_token, uid);
+        console.table(data);
+        // Create a local audio track from the microphone audio.
+        const localAudioTrack = await AgoraRTC.createMicrophoneAudioTrack();
+        // Publish the local audio track in the channel.
+        await agoraEngine.publish(localAudioTrack);
+        console.log("Publish success!");
+        dispatch(updateVoiceStatus(true));
+      }
+
     };
 
     if (!voicing && agoraConfig) {
@@ -62,9 +70,7 @@ const Dashboard = ({ voicing, uid, channel }: Props) => {
     }
   }, [voicing, agoraConfig, uid, channel]);
 
-  return (
-    <div>Dashboard</div>
-  );
+  return voicing ? <VoiceManagement /> : <JoinVoice />;
 };
 
 export default Dashboard;

src/routes/chat/VoiceChat/JoinVoice.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+type Props = {}
+
+const JoinVoice = (props: Props) => {
+    return (
+        <div>JoinVoice</div>
+    );
+};
+
+export default JoinVoice;

src/routes/chat/VoiceChat/VoiceManagement.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+type Props = {}
+
+const VoiceManagement = (props: Props) => {
+    return (
+        <div>VoiceManagement</div>
+    );
+};
+
+export default VoiceManagement;

src/routes/chat/VoiceChat/index.tsx

@@ -7,23 +7,24 @@ import Tooltip from '../../../common/component/Tooltip';
 import Dashboard from './Dashboard';
 
 type Props = {
+    id: number,
     channel: string
 }
 
-const VoiceChat = ({ channel }: Props) => {
+const VoiceChat = ({ channel, id }: Props) => {
     const { loginUser, voice } = useAppSelector(store => { return { loginUser: store.authData.user, voice: store.authData.voice }; });
     const { t } = useTranslation("chat");
     const toolClass = `relative cursor-pointer`;
     if (!loginUser) return null;
     return (
-        <Tooltip tip={t("fav")} placement="left">
+        <Tooltip tip={t("voice")} placement="left">
             <Tippy
                 placement="left-start"
                 popperOptions={{ strategy: "fixed" }}
                 offset={[0, 164]}
                 interactive
                 trigger="click"
-                content={<Dashboard uid={loginUser.uid} channel={channel} voicing={voice} />}
+                content={<Dashboard id={id} uid={loginUser.uid} channel={channel} voicing={voice} />}
             >
                 <li className={`${toolClass}`}>
                     <IconHeadphone className="fill-gray-500" />

src/routes/chat/VoiceChat/useVoice.tsx

@@ -0,0 +1,23 @@
+import { useState } from "react";
+import { useAppSelector } from "../../../app/store";
+
+
+
+const useVoice = (uid: number) => {
+    const [engine, setEngine] = useState(window.VoiceEngine);
+    const { voicing } = useAppSelector(store => {
+
+        return {
+            voicing: store.users.byId[uid].voice ?? false
+        };
+    });
+
+
+    return {
+        voicing,
+
+    };
+
+};
+
+export default useVoice;

src/types/server.ts

@@ -27,6 +27,13 @@ export interface AgoraConfig {
   rtm_key: string;
   rtm_secret: string;
 }
+export interface AgoraTokenResponse {
+  agora_token: string,
+  uid: number,
+  channel_name: string,
+  expired_in: number,
+  app_id: string;
+}
 export interface SMTPConfig {
   enabled: boolean;
   host: string;