feat: init agora

src/routes/chat/ChannelChat/index.tsx

@@ -16,6 +16,7 @@ import IconPin from "../../../assets/icons/pin.svg";
 import { useAppSelector } from "../../../app/store";
 import GoBackNav from "../../../common/component/GoBackNav";
 import Members from "./Members";
+import VoiceChat from "../VoiceChat";
 type Props = {
   cid?: number;
   dropFiles?: File[];
@@ -83,6 +84,7 @@ function ChannelChat({ cid = 0, dropFiles = [] }: Props) {
             </li>
           </Tippy>
         </Tooltip>
+        <VoiceChat channel={`channel_${cid}`} />
         <Tooltip tip={t("fav")} placement="left">
           <Tippy
             placement="left-start"

src/routes/chat/RTCWidget.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { useAppSelector } from '../../app/store';
+import User from '../../common/component/User';
+import IconHeadphone from '../../assets/icons/headphone.svg';
+import IconMic from '../../assets/icons/mic.on.svg';
+
+type Props = {}
+
+const RTCWidget = (props: Props) => {
+    const { loginUser, voicing } = useAppSelector(store => { return { loginUser: store.authData.user, voicing: store.authData.voice }; });
+    if (!loginUser) return null;
+
+    return (
+        <div className='bg-gray-100 dark:bg-gray-900 flex flex-col  p-2 rounded-full m-3 text-sm'>
+            {voicing && <div className="flex justify-between items-center">
+                <div className="flex items-center gap-3 text-green-800">
+                    Voice Connected
+                </div>
+            </div>}
+            <div className="flex justify-between items-center">
+                <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='text-gray-400 text-xs'>#{loginUser.uid}</span>
+                    </div>
+                </div>
+                <div className="flex gap-2">
+                    <IconHeadphone role="button" />
+                    <IconMic role="button" />
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default RTCWidget;

src/routes/chat/SessionList/index.tsx

@@ -74,7 +74,7 @@ const SessionList: FC<Props> = ({ tempSession }) => {
 
   return (
     <>
-      <ul ref={ref} className="flex flex-col gap-0.5 p-2 overflow-auto">
+      <ul ref={ref} className="flex flex-1 flex-col gap-0.5 p-2 overflow-auto">
         <ViewportList
           initialPrerender={10}
           viewportRef={ref}

src/routes/chat/VoiceChat/Dashboard.tsx

@@ -0,0 +1,70 @@
+import { useEffect } from 'react';
+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';
+
+type Props = {
+  channel: string,
+  uid: number,
+  voicing?: boolean;
+}
+
+const Dashboard = ({ voicing, uid, channel }: Props) => {
+  const dispatch = useDispatch();
+  console.log("aaaaa");
+
+  const { agoraConfig } = useConfig("agora");
+  useEffect(() => {
+    console.log("aaa", agoraConfig);
+    const startConnect = async () => {
+      // Create an instance of the Agora Engine
+      const agoraEngine = AgoraRTC.createClient({ mode: "rtc", codec: "vp8" });
+
+      // Listen for the "user-published" event to retrieve an AgoraRTCRemoteUser object.
+      agoraEngine.on("user-published", async (user, mediaType) => {
+        // Subscribe to the remote user when the SDK triggers the "user-published" event.
+        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);
+
+        // }
+
+        // Listen for the "user-unpublished" event.
+        agoraEngine.on("user-unpublished", user => {
+          console.log(user.uid + "has left the channel");
+          console.log("Remote user has left the channel");
+        });
+      });
+      // 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));
+    };
+
+    if (!voicing && agoraConfig) {
+      startConnect();
+    }
+  }, [voicing, agoraConfig, uid, channel]);
+
+  return (
+    <div>Dashboard</div>
+  );
+};
+
+export default Dashboard;

src/routes/chat/VoiceChat/index.tsx

@@ -0,0 +1,36 @@
+// import React from 'react';
+import Tippy from '@tippyjs/react';
+import { useTranslation } from 'react-i18next';
+import { useAppSelector } from '../../../app/store';
+import IconHeadphone from '../../../assets/icons/headphone.svg';
+import Tooltip from '../../../common/component/Tooltip';
+import Dashboard from './Dashboard';
+
+type Props = {
+    channel: string
+}
+
+const VoiceChat = ({ channel }: 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">
+            <Tippy
+                placement="left-start"
+                popperOptions={{ strategy: "fixed" }}
+                offset={[0, 164]}
+                interactive
+                trigger="click"
+                content={<Dashboard uid={loginUser.uid} channel={channel} voicing={voice} />}
+            >
+                <li className={`${toolClass}`}>
+                    <IconHeadphone className="fill-gray-500" />
+                </li>
+            </Tippy>
+        </Tooltip>
+    );
+};
+
+export default VoiceChat;

src/routes/chat/index.tsx

@@ -14,6 +14,7 @@ import GuestBlankPlaceholder from "./GuestBlankPlaceholder";
 import GuestChannelChat from "./GuestChannelChat";
 import GuestSessionList from "./GuestSessionList";
 import ErrorCatcher from "../../common/component/ErrorCatcher";
+import RTCWidget from "./RTCWidget";
 
 function ChatPage() {
   const isHomePath = useMatch(`/`);
@@ -62,9 +63,10 @@ function ChatPage() {
         )}>
           <Server readonly={isGuest} />
           {isGuest ? <GuestSessionList /> : <SessionList tempSession={tmpSession} />}
-          {isGuest && <footer className="hidden md:block py-1 text-xs text-gray-300 dark:text-gray-700 text-center">
+
+          {isGuest ? <footer className="hidden md:block py-1 text-xs text-gray-300 dark:text-gray-700 text-center">
             Host your own <a href="https://voce.chat" target="_blank" rel="noopener noreferrer" className="text-gray-400  dark:text-gray-600">voce.chat</a>
-          </footer>}
+          </footer> : <RTCWidget />}
         </div>
         <div className={clsx(`right-container md:rounded-r-2xl w-full bg-white dark:!bg-gray-700`, placeholderVisible && "h-full flex-center", isMainPath && "hidden md:flex")}>
           {placeholderVisible && (isGuest ? <GuestBlankPlaceholder /> : <BlankPlaceholder />)}