Feat/fe 60 implement agora video call using agora UIKIT

package.json

@@ -7,7 +7,6 @@
     "type": "git",
     "url": "https://github.com/zurichat/zc_main"
   },
-
   "bugs": {
     "url": "https://github.com/zurichat/zc_main/issues"
   },
@@ -49,3 +48,4 @@
   },
   "dependencies": {}
 }
+

packages/main/src/components/media-chat/video/VideoRoom.jsx

@@ -0,0 +1,126 @@
+import { useState, useEffect } from "react";
+import AgoraUIKit from "agora-react-uikit";
+import { AGORA_APP_ID, AGORA_TOKEN } from "@zuri/utilities";
+import styles from "./styles/videoRoom.css";
+import axios from "axios";
+
+const VideoRoom = ({ workspaceId }) => {
+  const [videoCall, setVideoCall] = useState(false);
+  const [token, setToken] = useState(null);
+  const fetchToken = async () => {
+    const response = await fetch(
+      `https://staging.api.zuri.chat/rtc/${workspaceId}/publisher/userAccount`
+    );
+    const data = await response.json();
+    setToken(data.data.token);
+    if (response.status === 200) {
+      setVideoCall(true);
+    }
+  };
+  useEffect(() => {
+    fetchToken();
+  }, []);
+  const rtcProps = {
+    appId: AGORA_APP_ID,
+    channel: workspaceId,
+    token: token
+  };
+  const callbacks = {
+    EndCall: () => setVideoCall(false)
+  };
+
+  const styleProps = {
+    videoMode: { max: "cover" },
+    UIKitContainer: {
+      position: "relative",
+      background: "#838383",
+      overflow: "hidden"
+    },
+    minViewContainer: {
+      maxWidth: "auto",
+      maxHeight: "168px",
+      position: "absolute",
+      top: "0px",
+      right: "0px",
+      display: "flex",
+      justifyContent: "flex-end"
+    },
+    minViewStyles: {
+      maxWidth: "128px",
+      maxHeight: "128px",
+      margin: "32px 40px 0 0",
+      overflow: "hidden",
+      borderRadius: "10px",
+      boxShadow: "1px 1px 15px 3px rgba(184, 88, 32, 0.2)"
+    },
+    minViewOverlayContainer: {
+      background: "red"
+    },
+
+    maxViewContainer: {
+      position: "absolute",
+      width: "100%",
+      height: "100%"
+    },
+    maxViewStyles: {},
+    localBtnContainer: {
+      background: "#00b87c"
+    },
+    localBtnStyles: {
+      endCall: {
+        minHeight: "48px",
+        minWidth: "48px",
+        background: "rgb(220,60,60)",
+        border: "none"
+      },
+      muteLocalAudio: {
+        minHeight: "48px",
+        minWidth: "48px",
+        background: "transparent",
+        border: "none"
+      },
+      muteLocalVideo: {
+        minHeight: "48px",
+        minWidth: "48px",
+        background: "transparent",
+        border: "none"
+      }
+    }
+  };
+  return videoCall ? (
+    <div
+      style={{
+        display: "flex",
+        width: "100%",
+        height: "100vh",
+        padding: "10px"
+      }}
+    >
+      <AgoraUIKit
+        styleProps={styleProps}
+        rtcProps={rtcProps}
+        callbacks={callbacks}
+      />
+    </div>
+  ) : (
+    <div
+      style={{
+        justifyContent: "center",
+        display: "flex",
+        alignItems: "center",
+        height: "100%",
+        width: "100%"
+      }}
+    >
+      <button
+        colorScheme="blue"
+        onClick={() => setVideoCall(true)}
+        className={styles.joinBtn}
+      >
+        Join Video Chat
+      </button>
+    </div>
+  );
+};
+
+export default VideoRoom;

packages/main/src/components/media-chat/video/styles/videoRoom.css

@@ -0,0 +1,5 @@
+.joinBtn {
+    padding: 12px 24px;
+    font-size: 21px;
+    background-color: #20c997;
+}

packages/main/src/components/protected/sidebar/components/EditWorkspaceModal.jsx

@@ -8,7 +8,7 @@ import { useTranslation } from "react-i18next";
 
 const EditWorkspaceModal = ({ workSpace, editDetails, setEditDetails }) => {
   const { t } = useTranslation();
-  
+
   // getting current workspace id
   const currentWorkspace = localStorage.getItem("currentWorkspace");
   const orgs = JSON.parse(sessionStorage.getItem("organisations"));

packages/main/src/components/protected/sidebar/components/Sidebar.jsx

@@ -1,20 +1,19 @@
 import { useState, useEffect, useRef, useCallback } from "react";
+import { navigateToUrl } from "single-spa";
 import styles from "../styles/Sidebar.module.css";
 import { useTranslation } from "react-i18next";
-
+// import videoIcon from "../assets/icons/videos.svg";
 import threadIcon from "../assets/icons/thread-icon.svg";
 import dmIcon from "../assets/icons/dm-icon.svg";
-import liveicon from "../assets/icons/newlive.svg";
-import phoneicon from "../assets/icons/phone.svg";
 import draftIcon from "../assets/icons/draft-icon.svg";
 import { subscribeToChannel } from "@zuri/utilities";
 import { ACTIONS } from "../reducers/sidebar.reducer";
 import Header from "./Header";
-import Room from "./Room";
 import SingleRoom from "./SingleRoom";
 import Category from "./Category";
 import Starred from "./Starred";
 import { storeSideBarInfo } from "../../../../utils/cache-sidebar";
+import { FiVideo } from "react-icons/fi";
 
 const categories = [];
 
@@ -231,7 +230,7 @@ const Sidebar = props => {
         <div className={styles.sb__content}>
           <Header state={props.state} />
           <div className={`${styles.subCon2}`}>
-            <>
+            <div>
               <SingleRoom
                 name={`${t("workspace_chat.threads")}`}
                 image={threadIcon}
@@ -242,30 +241,28 @@ const Sidebar = props => {
                 image={dmIcon}
                 link={`/workspace/${currentWorkspaceShort}/plugin-chat/all-dms`}
               />
-              <SingleRoom
-                name="Video Chat"
-                image={dmIcon}
-                link={`/workspace/${currentWorkspaceShort}/video-chat`}
-              />
               <SingleRoom
                 name={`${t("workspace_chat.drafts")}`}
                 image={draftIcon}
               />
-              <SingleRoom
-                name="LiveBroadcast"
-                image={liveicon}
-                link={`/workspace/${currentWorkspaceShort}/LiveBroadcast`}
-              />
-              <SingleRoom
-                name="Voice Call"
-                image={phoneicon}
-                link={`/workspace/${currentWorkspaceShort}/voice-call`}
-              />
               <div className={styles.sb__divider} />
               <Starred starredRooms={starredRooms} />
               {singleItems}
               {categorizedItems}
-            </>
+            </div>
+            <div>
+              <div
+                className={styles.videoCall}
+                onClick={() =>
+                  navigateToUrl(
+                    `/workspace/${currentWorkspaceShort}/video-chat`
+                  )
+                }
+              >
+                <FiVideo />
+                Video call
+              </div>
+            </div>
           </div>
         </div>
       )}

packages/main/src/components/protected/sidebar/styles/Drop.module.css

@@ -47,6 +47,7 @@
 
 .item__img {
   margin-left: 0.1rem;
+  width: 14px;
 }
 
 .item__list,

packages/main/src/components/protected/sidebar/styles/Sidebar.module.css

@@ -54,8 +54,12 @@
 }
 
 .subCon2 {
-  height: 100%;
+  height: 90vh;
   width: unset;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  gap: 20px;
 }
 
 .subCon2::-webkit-scrollbar {
@@ -266,3 +270,30 @@
   display: block;
 }
 
+.videoCall {
+  height: 50px;
+  border-top: 2px solid rgba(128, 128, 128, 0.5);
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  gap: 20px;
+  padding: 0px 20px;
+}
+
+.videoCall:hover {
+  background-color: #7ed5af;
+}
+
+.videoCall:active {
+  background-color: #7ed5af;
+}
+.videoCall > div {
+  width: 100%;
+}
+
+.videoCall > div > div {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 20px;
+}