Feat/fe 60 implement agora video call using agora UIKIT #2842

taiwonaf · 2022-12-10T17:44:46Z

Fixes Issue/Linear Ticket

( This could be an existing issue or a linear ticket )

My PR Closes #issue_number_here or
My PR Fixes ID-linear_ticket_number_here

Team plug (Yieldvest) - Feat/FE-60-Implement-agora-video-call-using-Agora-sdk

Changes proposed

Implement Video call using Agora

What were you told to do?

Project 20: Using Agora, make it possible to do a group call in ZuriChat. Also make it possible to do video calls and video broadcasts.

What did you do?

I made it possible to have a video call in a workspace on zurichat using Agora UIKIT. Currently, due to delay in the backend, there is only one channel. When the backend is resolved, there will be different channel, and this will be the workspaces Id

Check List (Check all the applicable boxes)

🚨Please review the style guide for contributing and guidelines for contributing to this repository.

My code follows the code style of this project.
This PR does not contain plagiarized content.
The title and description of the PR is clear and explains the approach.
I am making a pull request against the dev branch (left side).
My commit messages styles matches our requested structure.
My code additions will fail neither code linting checks nor unit test.

Workspace_636831864746182adae96b6b_video.chat.-.Zuri.Chat.-.Google.Chrome.2022-12-10.22-27-33.mp4

…om palying and used material ui grid to hold the videos

…E-60-Implement-agora-video-call-using-Agora-sdk

JulianaSau

Instead of adding all those images to the codebase, use the existing icon libraries like react-icons. I'm sure these icons that youre adding already exist there

package.json

billmal071 · 2022-12-10T18:01:22Z

Like I said before, the icons are ugly, look for better icon, then the format of the video isn't exactly good, if you're not making it half, then put the smaller one on top of the bigger one.

…E-60-Implement-agora-video-call-using-Agora-sdk

taiwonaf · 2022-12-12T10:02:28Z

Instead of adding all those images to the codebase, use the existing icon libraries like react-icons. I'm sure these icons that youre adding already exist there

I have changed the icon to react icon

JulianaSau

Also, if you're not using an icon anymore, delete it entirely. Don't leave it in your commits

JulianaSau · 2022-12-13T17:36:21Z

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

+  const [token, setToken] = useState(null);
+  const fetchToken = async () => {
+    const response = await fetch(
+      `https://staging.api.zuri.chat/rtc/${workspaceId}/publisher/userAccount`


Import BASE_API_URL from Zuri utilities instead of hardcoding it like this. Because there's different base urls for the different development environments

The endpoint is on staging, not on the main yet

Is this the zc_core PR or what are you talking about?

The api for fetching the token is currently on zc_core and currently the changes is hosted on staging.api.zuri.chat and not on the base url which is api.zuri.chat

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

JulianaSau · 2022-12-13T17:39:07Z

packages/main/src/pages/protected/workspace/Workspace.jsx

-              <LiveBroadcast />
-            </Route>
+          <div id="zuri-plugin-load-section">
+            <Switch>


You omitted some very important code up there. Please review and return that loader and the div that you removed

So for this, I wrapped the switches inside the zuri plugin load section.

she's referring to the single spa loader

…-agora-video-call-using-Agora-sdk

billmal071 · 2022-12-16T19:13:20Z

@taiwonaf fix conflicts.

billmal071 · 2022-12-17T12:27:00Z

@JulianaSau

ickynavigator · 2022-12-19T11:51:58Z

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

+  const fetchToken = () => {
+    axios
+      .get(
+        `https://staging.api.zuri.chat/rtc/${workspaceId}/publisher/userAccount`


Use the hardcoded variables not this one

ickynavigator · 2022-12-19T11:52:41Z

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

+          setVideoCall(true);
+        }
+      })
+      .catch(error => console.log(error));


The user isn't going to open the log
Handle the error properly

ickynavigator · 2022-12-19T11:53:49Z

packages/main/src/components/protected/sidebar/assets/icons/videos.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">


remove this svg file and use the react icons svg

ickynavigator · 2022-12-19T11:54:27Z

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();
-  
+


remove stray changes like this and the one you made in the package.json

ickynavigator · 2022-12-19T11:54:40Z

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

 import styles from "../styles/Sidebar.module.css";
 import { useTranslation } from "react-i18next";
-
+// import videoIcon from "../assets/icons/videos.svg";


remove commented out code

ickynavigator · 2022-12-19T11:55:25Z

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

-              <SingleRoom
-                name="LiveBroadcast"
-                image={liveicon}
-                link={`/workspace/${currentWorkspaceShort}/LiveBroadcast`}
-              />
-              <SingleRoom
-                name="Voice Call"
-                image={phoneicon}
-                link={`/workspace/${currentWorkspaceShort}/voice-call`}
-              />


Broadcast and voice call are no longer available?

ickynavigator · 2022-12-19T11:56:01Z

packages/main/src/pages/protected/workspace/Workspace.jsx

@@ -16,8 +15,16 @@ import {
  WorkspaceWrapperStyle
 } from "./Workspace.style";

-import VideoChat from "../../../components/media-chat/VideoChat";
-import VoiceCall from "../../../components/media-chat/VoiceCall/VoiceCall";
+// import { GeneralLoading } from "../../../components";


commented code and unnecessary spacing between imports

ickynavigator · 2022-12-19T11:56:28Z

packages/main/src/pages/protected/workspace/Workspace.jsx

-              <LiveBroadcast />
-            </Route>
+          <div id="zuri-plugin-load-section">
+            <Switch>


she's referring to the single spa loader

ickynavigator · 2022-12-19T11:56:42Z

packages/main/src/pages/protected/workspace/Workspace.jsx

+              {/* <Route
+                exact
+                path="/workspace/:workspaceId/marketplace"
+                component={() => <h1>MarketPlace</h1>}
+              /> */}

-            {/* <Route
-              exact
-              path="/workspace/:workspaceId/marketplace"
-              component={() => <h1>MarketPlace</h1>}
-            /> */}
-
-            {/* All other routes not by main go to Single SPA */}
-            {/* <Route path="/workspace/:workspaceId/*">
-              <div id="zuri-plugin-load-section">
-                <p>SHOULD SHOW PLUGINS</p>
-              </div>
-            </Route> */}
-          </Switch>
+              {/* All other routes not by main go to Single SPA */}
+              {/* <Route path="/workspace/:workspaceId/*">
+                <div id="zuri-plugin-load-section">
+                  <p>SHOULD SHOW PLUGINS</p>
+                </div>
+              </Route> */}


commented code

taiwonaf added 9 commits December 1, 2022 16:43

Fix: Implement Agora video call using Agora sdk

1af2b75

Fix: Implement Agora video call using Agora SDK, fixed local video fr…

c1ed3f5

…om palying and used material ui grid to hold the videos

Token generated not used, it does not support publishing remote users

ceb89b4

Fix- Integrating ui kit

8529361

Integrating Agora ui kit

ebd8113

resolve merge conflict

4d9554a

Feat/FE-60-Implement-agora-video-call-using-Agora

79059a0

Moved agora uikit props to new lines

d206e66

Merge branch 'dev' of https://github.com/zurichat/zc_main into Feat/F…

d7b40a1

…E-60-Implement-agora-video-call-using-Agora-sdk

taiwonaf changed the title ~~Feat/fe 60 implement agora video call using agora sdk~~ Feat/fe 60 implement agora video call using agora UIKIT Dec 10, 2022

JulianaSau requested changes Dec 10, 2022

View reviewed changes

package.json Outdated Show resolved Hide resolved

JulianaSau added the Changes Requested label Dec 10, 2022

taiwonaf added 3 commits December 10, 2022 22:30

Styling: fixed the sizes of the video containers

ee07c26

Fixed stylings and husky version issue

ba43efb

Merge branch 'dev' of https://github.com/zurichat/zc_main into Feat/F…

db2f2b0

…E-60-Implement-agora-video-call-using-Agora-sdk

taiwonaf requested a review from JulianaSau December 10, 2022 21:59

taiwonaf added 4 commits December 11, 2022 22:22

Integrated the token generator

79e35c8

Token generator integrated

ce9e9fe

Merge upstream dev

ee88331

Changed the video icon image to react icon

177f507

JulianaSau requested changes Dec 13, 2022

View reviewed changes

taiwonaf added 3 commits December 13, 2022 22:28

removed icons not in use

f3d1ef0

Merge remote-tracking branch 'upstream/dev' into Feat/FE-60-Implement…

076f39f

…-agora-video-call-using-Agora-sdk

Changed to axios to fetching data

3a76289

resovled merge conflict

f21a340

ickynavigator requested changes Dec 19, 2022

View reviewed changes

JulianaSau added the Conflicts label Dec 22, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Feat/fe 60 implement agora video call using agora UIKIT #2842

Feat/fe 60 implement agora video call using agora UIKIT #2842

taiwonaf commented Dec 10, 2022 •

edited

Loading

JulianaSau left a comment

billmal071 commented Dec 10, 2022

taiwonaf commented Dec 12, 2022

JulianaSau left a comment

JulianaSau Dec 13, 2022

taiwonaf Dec 13, 2022

JulianaSau Dec 15, 2022

taiwonaf Dec 15, 2022

JulianaSau Dec 13, 2022

taiwonaf Dec 15, 2022

ickynavigator Dec 19, 2022

billmal071 commented Dec 16, 2022

billmal071 commented Dec 17, 2022

ickynavigator Dec 19, 2022

ickynavigator Dec 19, 2022

ickynavigator Dec 19, 2022

ickynavigator Dec 19, 2022

ickynavigator Dec 19, 2022

ickynavigator Dec 19, 2022

ickynavigator Dec 19, 2022

ickynavigator Dec 19, 2022

ickynavigator Dec 19, 2022

		@@ -0,0 +1,3 @@
		<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">

		@@ -8,7 +8,7 @@ import { useTranslation } from "react-i18next";

		const EditWorkspaceModal = ({ workSpace, editDetails, setEditDetails }) => {
		const { t } = useTranslation();

Feat/fe 60 implement agora video call using agora UIKIT #2842

Are you sure you want to change the base?

Feat/fe 60 implement agora video call using agora UIKIT #2842

Conversation

taiwonaf commented Dec 10, 2022 • edited Loading

Fixes Issue/Linear Ticket

Changes proposed

What were you told to do?

What did you do?

Check List (Check all the applicable boxes)

JulianaSau left a comment

Choose a reason for hiding this comment

billmal071 commented Dec 10, 2022

taiwonaf commented Dec 12, 2022

JulianaSau left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

billmal071 commented Dec 16, 2022

billmal071 commented Dec 17, 2022

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

taiwonaf commented Dec 10, 2022 •

edited

Loading