From 1af2b75201662f8ffff849e1192c69f413d1f538 Mon Sep 17 00:00:00 2001 From: Nafiu Taiwo <69268373+taiwonaf@users.noreply.github.com> Date: Thu, 1 Dec 2022 16:43:59 +0100 Subject: [PATCH 01/14] Fix: Implement Agora video call using Agora sdk --- package.json | 3 +- packages/main/src/assets/media/exit.svg | 1 + packages/main/src/assets/media/mic-off.svg | 1 + packages/main/src/assets/media/mic.svg | 1 + packages/main/src/assets/media/video-off.svg | 1 + packages/main/src/assets/media/video.svg | 1 + .../media-chat/VideoCall/Controls.jsx | 22 +++ .../media-chat/VideoCall/Staging.jsx | 59 ++++++++ .../media-chat/VideoCall/VideoPlayer.jsx | 21 +++ .../media-chat/VideoCall/VideoRoom.jsx | 128 ++++++++++++++++++ .../VideoCall/styles/Staging.module.css | 45 ++++++ .../VideoCall/styles/videochat.module.css | 7 + .../VideoCall/styles/videoplayer.module.css | 12 ++ .../VideoCall/styles/videoroom.module.css | 45 ++++++ .../src/components/media-chat/VideoChat.jsx | 27 ---- .../protected/sidebar/assets/icons/videos.svg | 1 + .../protected/sidebar/components/Sidebar.jsx | 4 +- .../protected/sidebar/styles/Drop.module.css | 1 + .../pages/protected/workspace/Workspace.jsx | 56 ++++---- yarn.lock | 7 +- 20 files changed, 384 insertions(+), 59 deletions(-) create mode 100644 packages/main/src/assets/media/exit.svg create mode 100644 packages/main/src/assets/media/mic-off.svg create mode 100644 packages/main/src/assets/media/mic.svg create mode 100644 packages/main/src/assets/media/video-off.svg create mode 100644 packages/main/src/assets/media/video.svg create mode 100644 packages/main/src/components/media-chat/VideoCall/Controls.jsx create mode 100644 packages/main/src/components/media-chat/VideoCall/Staging.jsx create mode 100644 packages/main/src/components/media-chat/VideoCall/VideoPlayer.jsx create mode 100644 packages/main/src/components/media-chat/VideoCall/VideoRoom.jsx create mode 100644 packages/main/src/components/media-chat/VideoCall/styles/Staging.module.css create mode 100644 packages/main/src/components/media-chat/VideoCall/styles/videochat.module.css create mode 100644 packages/main/src/components/media-chat/VideoCall/styles/videoplayer.module.css create mode 100644 packages/main/src/components/media-chat/VideoCall/styles/videoroom.module.css delete mode 100644 packages/main/src/components/media-chat/VideoChat.jsx create mode 100644 packages/main/src/components/protected/sidebar/assets/icons/videos.svg diff --git a/package.json b/package.json index f62fb13cee..7bdf92d06a 100644 --- a/package.json +++ b/package.json @@ -7,7 +7,6 @@ "type": "git", "url": "https://github.com/zurichat/zc_main" }, - "bugs": { "url": "https://github.com/zurichat/zc_main/issues" }, @@ -38,7 +37,7 @@ "eslint-plugin-css-modules": "^2.11.0", "eslint-plugin-cypress": "^2.12.1", "eslint-plugin-react": "^7.28.0", - "husky": "^7.0.2", + "husky": "^8.0.2", "lerna": "^4.0.0", "lint-staged": ">=10", "opener": "^1.5.2", diff --git a/packages/main/src/assets/media/exit.svg b/packages/main/src/assets/media/exit.svg new file mode 100644 index 0000000000..e47723f00a --- /dev/null +++ b/packages/main/src/assets/media/exit.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/main/src/assets/media/mic-off.svg b/packages/main/src/assets/media/mic-off.svg new file mode 100644 index 0000000000..cc85332c8b --- /dev/null +++ b/packages/main/src/assets/media/mic-off.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/main/src/assets/media/mic.svg b/packages/main/src/assets/media/mic.svg new file mode 100644 index 0000000000..45818c9cac --- /dev/null +++ b/packages/main/src/assets/media/mic.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/main/src/assets/media/video-off.svg b/packages/main/src/assets/media/video-off.svg new file mode 100644 index 0000000000..27c37d8916 --- /dev/null +++ b/packages/main/src/assets/media/video-off.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/main/src/assets/media/video.svg b/packages/main/src/assets/media/video.svg new file mode 100644 index 0000000000..734a2cb3e5 --- /dev/null +++ b/packages/main/src/assets/media/video.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/main/src/components/media-chat/VideoCall/Controls.jsx b/packages/main/src/components/media-chat/VideoCall/Controls.jsx new file mode 100644 index 0000000000..e3a6cd75a1 --- /dev/null +++ b/packages/main/src/components/media-chat/VideoCall/Controls.jsx @@ -0,0 +1,22 @@ +import { useRef, useState, useEffect } from "react"; + +const Controls = ({ tracks }) => { + const ref = useRef(); + const muteAudio = () => { + tracks[0].stop(ref.current); + }; + + const muteVideo = () => { + tracks[1].stop(ref.current); + }; + return ( +
+
+
+
+
+
+ ); +}; + +export default Controls; diff --git a/packages/main/src/components/media-chat/VideoCall/Staging.jsx b/packages/main/src/components/media-chat/VideoCall/Staging.jsx new file mode 100644 index 0000000000..ee38d427fa --- /dev/null +++ b/packages/main/src/components/media-chat/VideoCall/Staging.jsx @@ -0,0 +1,59 @@ +import { useEffect, useState } from "react"; +import styles from "./styles/Staging.module.css"; +import VideoPlayer from "./VideoPlayer"; +import VideoRoom from "./VideoRoom"; + +const Staging = ({ workspaceId }) => { + // set states + const [stage, setStage] = useState(0); + const [localTracks, setLocalTracks] = useState([]); + const [users, setUsers] = useState([]); + const [token, setToken] = useState(null); + + // const APP_ID = process.env.APP_ID; + let uid = sessionStorage.getItem("uid"); + if (!uid) { + uid = String(Math.floor(Math.random() * 1000)); + sessionStorage.setItem("uid", uid); + } + + const fetchToken = () => { + fetch( + `https://staging.api.zuri.chat/rtc/${workspaceId}/publisher/uid/${uid}/` + ) + .then(res => res.json()) + .then(data => { + setToken(data.data.token); + setStage(1); + }); + }; + + return ( +
+ {stage === 0 && ( +
+
+ {/* */} + +
+
+ )} + {stage === 1 && ( + + )} +
+ ); +}; + +export default Staging; diff --git a/packages/main/src/components/media-chat/VideoCall/VideoPlayer.jsx b/packages/main/src/components/media-chat/VideoCall/VideoPlayer.jsx new file mode 100644 index 0000000000..6a74b48207 --- /dev/null +++ b/packages/main/src/components/media-chat/VideoCall/VideoPlayer.jsx @@ -0,0 +1,21 @@ +import { useEffect, useRef } from "react"; +import styles from "./styles/videoplayer.module.css"; + +const VideoPlayer = ({ user }) => { + const ref = useRef(); + useEffect(() => { + user?.videoTrack.play(ref.current); + user?.audioTrack.play(ref.current); + return () => { + user?.videoTrack.stop(ref.current); + user?.audioTrack.stop(ref.current); + }; + }, []); + return ( +
+
+
+ ); +}; + +export default VideoPlayer; diff --git a/packages/main/src/components/media-chat/VideoCall/VideoRoom.jsx b/packages/main/src/components/media-chat/VideoCall/VideoRoom.jsx new file mode 100644 index 0000000000..f0ed5b41f7 --- /dev/null +++ b/packages/main/src/components/media-chat/VideoCall/VideoRoom.jsx @@ -0,0 +1,128 @@ +import React, { useState, useEffect } from "react"; +import VideoPlayer from "./VideoPlayer"; +import Styles from "./styles/videoroom.module.css"; +import Mic from "./../../../assets/media/mic.svg"; +import MicOff from "./../../../assets/media/mic-off.svg"; +import Video from "./../../../assets/media/video.svg"; +import VideoOff from "./../../../assets/media/video-off.svg"; +import exit from "./../../../assets/media/exit.svg"; +import AgoraRTC from "agora-rtc-sdk-ng"; +import { Grid } from "@material-ui/core"; +import { AGORA_APP_ID } from "@zuri/utilities"; + +const VideoRoom = ({ token, channelName, uid, closeRoom }) => { + const [trackState, setTrackState] = useState({ video: true, audio: true }); + const [localTracks, setLocalTracks] = useState([]); + const [users, setUsers] = useState([]); + const [gridSpacing, setGridSpacing] = useState(12); + + const APP_ID = AGORA_APP_ID; + + const client = AgoraRTC.createClient({ + mode: "rtc", + codec: "vp8" + }); + + const handleUserJoined = async (user, mediaType) => { + await client.subscribe(user, mediaType); + + if (mediaType === "video") { + setUsers(previousUsers => [...previousUsers, user]); + } + + if (mediaType === "audio") { + user.audioTrack.play(); + } + }; + + const handleUserLeft = user => { + setUsers(previousUsers => previousUsers.filter(u => u.uid !== user.uid)); + }; + + useEffect(() => { + setGridSpacing(Math.max(Math.floor(12 / (users.length + 1)), 4)); + + client.on("user-published", handleUserJoined); + client.on("user-left", handleUserLeft); + + client + .join(APP_ID, channelName, `${token}`, uid) + .then(uid => + Promise.all([AgoraRTC.createMicrophoneAndCameraTracks(), uid]) + ) + .then(([tracks, uid]) => { + const [audioTrack, videoTrack] = tracks; + setLocalTracks(tracks); + setUsers(previousUsers => [ + ...previousUsers, + { + uid, + videoTrack, + audioTrack + } + ]); + client.publish(tracks); + }); + + return () => { + for (let localTrack of localTracks) { + localTrack.stop(); + localTrack.close(); + } + client.off("user-published", handleUserJoined); + client.off("user-left", handleUserLeft); + client.unpublish(localTracks).then(() => client.leave()); + }; + }, []); + + const mute = async type => { + if (type === "audio") { + await localTracks[0].setEnabled(!trackState.audio); + setTrackState(ps => { + return { ...ps, audio: !ps.audio }; + }); + } else if (type === "video") { + await localTracks[1].setEnabled(!trackState.video); + setTrackState(ps => { + return { ...ps, video: !ps.video }; + }); + } + }; + + const leaveChannel = async () => { + await client.leave(); + client.removeAllListeners(); + localTracks[0].close(); + localTracks[1].close(); + closeRoom(prev => prev - 1); + }; + + return ( +
+
+ {users.map(user => { + return ; + })} + {/* + */} +
+
+
mute("audio")}> + +
+
mute("video")}> + +
+
leaveChannel()} + > + +
+
+
+ ); +}; + +export default VideoRoom; diff --git a/packages/main/src/components/media-chat/VideoCall/styles/Staging.module.css b/packages/main/src/components/media-chat/VideoCall/styles/Staging.module.css new file mode 100644 index 0000000000..0c49cbce5b --- /dev/null +++ b/packages/main/src/components/media-chat/VideoCall/styles/Staging.module.css @@ -0,0 +1,45 @@ +.videoChat { + height: 100%; +} + +.staging{ + height: 100%; + width: 100%; + display: flex; + justify-content: center; + align-items: center; +} + +.stagingWrapper { + max-width: 70%; + width: 100%; + display: flex; + justify-content: center; + align-items: center; + gap: 50px; +} + +.videoContainer { + height: 300px; + width: 500px; + border-radius: 8px; + background-color: black; +} + +.stagingBtn { + padding: 12px 24px; + border-radius: 8px; + color: white; + background: #00b87c; + display: inline-block; +} + +.stagingBtn:disabled { + background-color: #00b87ba4; +} + +.userVideo { + height: 100%; + width: 100%; + border-radius: 50px; +} \ No newline at end of file diff --git a/packages/main/src/components/media-chat/VideoCall/styles/videochat.module.css b/packages/main/src/components/media-chat/VideoCall/styles/videochat.module.css new file mode 100644 index 0000000000..edf4813433 --- /dev/null +++ b/packages/main/src/components/media-chat/VideoCall/styles/videochat.module.css @@ -0,0 +1,7 @@ +.videoChat { + height: 100%; + width: 100%; + display: flex; + justify-content: center; + align-items: center; +} \ No newline at end of file diff --git a/packages/main/src/components/media-chat/VideoCall/styles/videoplayer.module.css b/packages/main/src/components/media-chat/VideoCall/styles/videoplayer.module.css new file mode 100644 index 0000000000..2477f51d2f --- /dev/null +++ b/packages/main/src/components/media-chat/VideoCall/styles/videoplayer.module.css @@ -0,0 +1,12 @@ +.videoplayer { + height: 100%; + width: 100%; + border-radius: 8px; + overflow: hidden; + background-color: black; +} + +.video { + width: 100%; + height: 100%; +} \ No newline at end of file diff --git a/packages/main/src/components/media-chat/VideoCall/styles/videoroom.module.css b/packages/main/src/components/media-chat/VideoCall/styles/videoroom.module.css new file mode 100644 index 0000000000..a981866882 --- /dev/null +++ b/packages/main/src/components/media-chat/VideoCall/styles/videoroom.module.css @@ -0,0 +1,45 @@ +.videoroom { + /* position: relative; */ + height: 100%; + padding: 20px; +} + +.controlBar{ + margin-top: 10px; + height: 5%; + height: 80px; + background-color: black; + width: 100%; + display: flex; + justify-content: center; + align-items: center; + gap: 50px; +} + +.controlBar > div { + background-color: #ffffff; + border-radius: 50px; + height: 50px; + width: 50px; + display: flex; + justify-content: center; + align-items: center; +} + +.controlBar > div:hover { + background-color: white; +} + +.controlBar img { + width: 30px; +} + +.videoroomRooms { + height: 95%; + display: flex; + justify-content: center; + align-items: center; + flex-wrap: wrap; + gap: 20px; + height: 90%; +} \ No newline at end of file diff --git a/packages/main/src/components/media-chat/VideoChat.jsx b/packages/main/src/components/media-chat/VideoChat.jsx deleted file mode 100644 index 8c7ee0339c..0000000000 --- a/packages/main/src/components/media-chat/VideoChat.jsx +++ /dev/null @@ -1,27 +0,0 @@ -import { AGORA_APP_ID, AGORA_TOKEN } from "@zuri/utilities"; -import AgoraUIKit from "agora-react-uikit"; -import { useState } from "react"; - -const VideoChat = () => { - const [videoCall, setVideoCall] = useState(true); - - const rtcProps = { - appId: AGORA_APP_ID, - channel: "plug", - token: AGORA_TOKEN - }; - - const callbacks = { - EndCall: () => setVideoCall(false) - }; - - return videoCall ? ( -
- -
- ) : ( -

setVideoCall(true)}>Join

- ); -}; - -export default VideoChat; diff --git a/packages/main/src/components/protected/sidebar/assets/icons/videos.svg b/packages/main/src/components/protected/sidebar/assets/icons/videos.svg new file mode 100644 index 0000000000..686005bd7f --- /dev/null +++ b/packages/main/src/components/protected/sidebar/assets/icons/videos.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/main/src/components/protected/sidebar/components/Sidebar.jsx b/packages/main/src/components/protected/sidebar/components/Sidebar.jsx index be2ab1b2f6..31f97cb77e 100644 --- a/packages/main/src/components/protected/sidebar/components/Sidebar.jsx +++ b/packages/main/src/components/protected/sidebar/components/Sidebar.jsx @@ -1,7 +1,7 @@ import { useState, useEffect, useRef, useCallback } from "react"; 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"; @@ -217,7 +217,7 @@ const Sidebar = props => { /> -
- - -

Welcome to your Workspace

- - - - +
+ + +

Welcome to your Workspace

+ + + + - - - - - - + + + + + + - {/*

MarketPlace

} - /> */} + {/*

MarketPlace

} + /> */} - {/* All other routes not by main go to Single SPA */} - {/* -
-

SHOULD SHOW PLUGINS

-
- */} - + {/* All other routes not by main go to Single SPA */} + {/* +
+

SHOULD SHOW PLUGINS

+
+ */} + +
diff --git a/yarn.lock b/yarn.lock index 0ee75bf645..067921853c 100644 --- a/yarn.lock +++ b/yarn.lock @@ -10181,6 +10181,11 @@ husky@^7.0.2: resolved "https://registry.npmjs.org/husky/-/husky-7.0.4.tgz" integrity sha512-vbaCKN2QLtP/vD4yvs6iz6hBEo6wkSzs8HpRah1Z6aGmF2KW5PdYuAd7uX5a+OyBZHBhd+TFLqgjUgytQr4RvQ== +husky@^8.0.2: + version "8.0.2" + resolved "https://registry.yarnpkg.com/husky/-/husky-8.0.2.tgz#5816a60db02650f1f22c8b69b928fd6bcd77a236" + integrity sha512-Tkv80jtvbnkK3mYWxPZePGFpQ/tT3HNSs/sasF9P2YfkMezDl3ON37YN6jUUI4eTg5LcyVynlb6r4eyvOmspvg== + hyphenate-style-name@^1.0.2, hyphenate-style-name@^1.0.3: version "1.0.4" resolved "https://registry.npmjs.org/hyphenate-style-name/-/hyphenate-style-name-1.0.4.tgz" @@ -18112,4 +18117,4 @@ yup@^0.32.11: zwitch@^1.0.0: version "1.0.5" resolved "https://registry.npmjs.org/zwitch/-/zwitch-1.0.5.tgz" - integrity sha512-V50KMwwzqJV0NpZIZFwfOD5/lyny3WlSzRiXgA0G7VUnRlqttta1L6UQIHzd6EuBY/cHGfwTIck7w1yH6Q5zUw== \ No newline at end of file + integrity sha512-V50KMwwzqJV0NpZIZFwfOD5/lyny3WlSzRiXgA0G7VUnRlqttta1L6UQIHzd6EuBY/cHGfwTIck7w1yH6Q5zUw== From c1ed3f5b6cc663b960aceb65bc452ecbc539085b Mon Sep 17 00:00:00 2001 From: Nafiu Taiwo <69268373+taiwonaf@users.noreply.github.com> Date: Thu, 1 Dec 2022 20:18:24 +0100 Subject: [PATCH 02/14] Fix: Implement Agora video call using Agora SDK, fixed local video from palying and used material ui grid to hold the videos --- package.json | 1 + .../media-chat/VideoCall/VideoPlayer.jsx | 5 ++++- .../media-chat/VideoCall/VideoRoom.jsx | 19 ++++++++++++++----- .../VideoCall/styles/videoroom.module.css | 5 +++++ 4 files changed, 24 insertions(+), 6 deletions(-) diff --git a/package.json b/package.json index 7bdf92d06a..21e5b6d64f 100644 --- a/package.json +++ b/package.json @@ -48,3 +48,4 @@ }, "dependencies": {} } + diff --git a/packages/main/src/components/media-chat/VideoCall/VideoPlayer.jsx b/packages/main/src/components/media-chat/VideoCall/VideoPlayer.jsx index 6a74b48207..78d4bc5467 100644 --- a/packages/main/src/components/media-chat/VideoCall/VideoPlayer.jsx +++ b/packages/main/src/components/media-chat/VideoCall/VideoPlayer.jsx @@ -1,11 +1,14 @@ import { useEffect, useRef } from "react"; import styles from "./styles/videoplayer.module.css"; -const VideoPlayer = ({ user }) => { +const VideoPlayer = ({ user, localId }) => { const ref = useRef(); useEffect(() => { user?.videoTrack.play(ref.current); user?.audioTrack.play(ref.current); + if (user.uid == localId) { + user?.audioTrack.stop(ref.current); + } return () => { user?.videoTrack.stop(ref.current); user?.audioTrack.stop(ref.current); diff --git a/packages/main/src/components/media-chat/VideoCall/VideoRoom.jsx b/packages/main/src/components/media-chat/VideoCall/VideoRoom.jsx index f0ed5b41f7..a95a2977ba 100644 --- a/packages/main/src/components/media-chat/VideoCall/VideoRoom.jsx +++ b/packages/main/src/components/media-chat/VideoCall/VideoRoom.jsx @@ -97,14 +97,23 @@ const VideoRoom = ({ token, channelName, uid, closeRoom }) => { closeRoom(prev => prev - 1); }; + const videoContainer = { + height: "100%", + width: "100%" + }; + return (
- {users.map(user => { - return ; - })} - {/* - */} + + {users.map(user => { + return ( + + + + ); + })} +
mute("audio")}> diff --git a/packages/main/src/components/media-chat/VideoCall/styles/videoroom.module.css b/packages/main/src/components/media-chat/VideoCall/styles/videoroom.module.css index a981866882..ee88e64ed2 100644 --- a/packages/main/src/components/media-chat/VideoCall/styles/videoroom.module.css +++ b/packages/main/src/components/media-chat/VideoCall/styles/videoroom.module.css @@ -42,4 +42,9 @@ flex-wrap: wrap; gap: 20px; height: 90%; +} + +.videoContainer { + height: 100%; + width: 100%; } \ No newline at end of file From ceb89b4aa794f7c7d6e744f437f578c7a0be79a5 Mon Sep 17 00:00:00 2001 From: Nafiu Taiwo <69268373+taiwonaf@users.noreply.github.com> Date: Fri, 2 Dec 2022 16:47:07 +0100 Subject: [PATCH 03/14] Token generated not used, it does not support publishing remote users --- .../src/components/media-chat/VideoCall/VideoRoom.jsx | 10 +++------- .../media-chat/VideoCall/styles/videoplayer.module.css | 7 +++++-- 2 files changed, 8 insertions(+), 9 deletions(-) diff --git a/packages/main/src/components/media-chat/VideoCall/VideoRoom.jsx b/packages/main/src/components/media-chat/VideoCall/VideoRoom.jsx index a95a2977ba..225569d182 100644 --- a/packages/main/src/components/media-chat/VideoCall/VideoRoom.jsx +++ b/packages/main/src/components/media-chat/VideoCall/VideoRoom.jsx @@ -8,7 +8,7 @@ import VideoOff from "./../../../assets/media/video-off.svg"; import exit from "./../../../assets/media/exit.svg"; import AgoraRTC from "agora-rtc-sdk-ng"; import { Grid } from "@material-ui/core"; -import { AGORA_APP_ID } from "@zuri/utilities"; +import { AGORA_APP_ID, AGORA_TOKEN } from "@zuri/utilities"; const VideoRoom = ({ token, channelName, uid, closeRoom }) => { const [trackState, setTrackState] = useState({ video: true, audio: true }); @@ -17,6 +17,7 @@ const VideoRoom = ({ token, channelName, uid, closeRoom }) => { const [gridSpacing, setGridSpacing] = useState(12); const APP_ID = AGORA_APP_ID; + const Token = AGORA_TOKEN; const client = AgoraRTC.createClient({ mode: "rtc", @@ -46,7 +47,7 @@ const VideoRoom = ({ token, channelName, uid, closeRoom }) => { client.on("user-left", handleUserLeft); client - .join(APP_ID, channelName, `${token}`, uid) + .join(APP_ID, "plug", `${Token}`, null) .then(uid => Promise.all([AgoraRTC.createMicrophoneAndCameraTracks(), uid]) ) @@ -97,11 +98,6 @@ const VideoRoom = ({ token, channelName, uid, closeRoom }) => { closeRoom(prev => prev - 1); }; - const videoContainer = { - height: "100%", - width: "100%" - }; - return (
diff --git a/packages/main/src/components/media-chat/VideoCall/styles/videoplayer.module.css b/packages/main/src/components/media-chat/VideoCall/styles/videoplayer.module.css index 2477f51d2f..e85ec880b1 100644 --- a/packages/main/src/components/media-chat/VideoCall/styles/videoplayer.module.css +++ b/packages/main/src/components/media-chat/VideoCall/styles/videoplayer.module.css @@ -1,9 +1,12 @@ .videoplayer { - height: 100%; - width: 100%; + height: 300px; + width: 300px; border-radius: 8px; overflow: hidden; background-color: black; + display: flex; + justify-content: space-between; + align-items: center; } .video { From 8529361fc8649f3658d7a2efda01e13bde55e9c3 Mon Sep 17 00:00:00 2001 From: Nafiu Taiwo <69268373+taiwonaf@users.noreply.github.com> Date: Sat, 10 Dec 2022 12:53:58 +0100 Subject: [PATCH 04/14] Fix- Integrating ui kit --- .../media-chat/VideoCall/VideoPlayer.jsx | 6 +---- .../VideoCall/styles/videoplayer.module.css | 3 --- .../VideoCall/styles/videoroom.module.css | 6 +++-- .../components/media-chat/video/Staging.jsx | 7 ++++++ .../components/media-chat/video/VideoRoom.jsx | 24 +++++++++++++++++++ 5 files changed, 36 insertions(+), 10 deletions(-) create mode 100644 packages/main/src/components/media-chat/video/Staging.jsx create mode 100644 packages/main/src/components/media-chat/video/VideoRoom.jsx diff --git a/packages/main/src/components/media-chat/VideoCall/VideoPlayer.jsx b/packages/main/src/components/media-chat/VideoCall/VideoPlayer.jsx index 78d4bc5467..7e3557bff0 100644 --- a/packages/main/src/components/media-chat/VideoCall/VideoPlayer.jsx +++ b/packages/main/src/components/media-chat/VideoCall/VideoPlayer.jsx @@ -14,11 +14,7 @@ const VideoPlayer = ({ user, localId }) => { user?.audioTrack.stop(ref.current); }; }, []); - return ( -
-
-
- ); + return
; }; export default VideoPlayer; diff --git a/packages/main/src/components/media-chat/VideoCall/styles/videoplayer.module.css b/packages/main/src/components/media-chat/VideoCall/styles/videoplayer.module.css index e85ec880b1..b239e4a021 100644 --- a/packages/main/src/components/media-chat/VideoCall/styles/videoplayer.module.css +++ b/packages/main/src/components/media-chat/VideoCall/styles/videoplayer.module.css @@ -4,9 +4,6 @@ border-radius: 8px; overflow: hidden; background-color: black; - display: flex; - justify-content: space-between; - align-items: center; } .video { diff --git a/packages/main/src/components/media-chat/VideoCall/styles/videoroom.module.css b/packages/main/src/components/media-chat/VideoCall/styles/videoroom.module.css index ee88e64ed2..074d9578a9 100644 --- a/packages/main/src/components/media-chat/VideoCall/styles/videoroom.module.css +++ b/packages/main/src/components/media-chat/VideoCall/styles/videoroom.module.css @@ -35,16 +35,18 @@ } .videoroomRooms { - height: 95%; + height: 80%; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 20px; - height: 90%; } .videoContainer { height: 100%; width: 100%; + display: flex; + justify-content: center; + align-items: center; } \ No newline at end of file diff --git a/packages/main/src/components/media-chat/video/Staging.jsx b/packages/main/src/components/media-chat/video/Staging.jsx new file mode 100644 index 0000000000..3afcbb08dc --- /dev/null +++ b/packages/main/src/components/media-chat/video/Staging.jsx @@ -0,0 +1,7 @@ +import React from "react"; + +const Staging = () => { + return
; +}; + +export default Staging; diff --git a/packages/main/src/components/media-chat/video/VideoRoom.jsx b/packages/main/src/components/media-chat/video/VideoRoom.jsx new file mode 100644 index 0000000000..fe8bcbd26e --- /dev/null +++ b/packages/main/src/components/media-chat/video/VideoRoom.jsx @@ -0,0 +1,24 @@ +import { useState } from "react"; +import AgoraUIKit from "agora-react-uikit"; +import { AGORA_APP_ID, AGORA_TOKEN } from "@zuri/utilities"; + +const VideoRoom = () => { + const [videoCall, setVideoCall] = useState(true); + const rtcProps = { + appId: AGORA_APP_ID, + channl: "plug", + token: AGORA_TOKEN + }; + const callbacks = { + EndCall: () => setVideoCall(false) + }; + return videoCall ? ( +
+ +
+ ) : ( +

setVideoCall(true)}>Join

+ ); +}; + +export default VideoRoom; From ebd811314935d77fe97ec3f6d118986010d2d8f8 Mon Sep 17 00:00:00 2001 From: Nafiu Taiwo <69268373+taiwonaf@users.noreply.github.com> Date: Sat, 10 Dec 2022 13:08:48 +0100 Subject: [PATCH 05/14] Integrating Agora ui kit --- packages/main/src/pages/protected/workspace/Workspace.jsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/main/src/pages/protected/workspace/Workspace.jsx b/packages/main/src/pages/protected/workspace/Workspace.jsx index dd34390863..37c3e74b6b 100644 --- a/packages/main/src/pages/protected/workspace/Workspace.jsx +++ b/packages/main/src/pages/protected/workspace/Workspace.jsx @@ -32,6 +32,7 @@ import { import Staging from "../../../components/media-chat/VideoCall/Staging"; // import VideoChat from "../../../components/media-chat/VideoChat"; import VoiceCall from "../../../components/media-chat/VoiceCall/VoiceCall"; +import VideoRoom from "../../../components/media-chat/video/VideoRoom"; import { Sidebar, TopBar } from "../../../components/protected"; const cache = setupCache({ @@ -239,7 +240,7 @@ export default function Index() { - + From 79059a060d6958738d726a5b905a031876f0d7d4 Mon Sep 17 00:00:00 2001 From: Nafiu Taiwo <69268373+taiwonaf@users.noreply.github.com> Date: Sat, 10 Dec 2022 16:03:08 +0100 Subject: [PATCH 06/14] Feat/FE-60-Implement-agora-video-call-using-Agora --- .../media-chat/VideoCall/Controls.jsx | 22 --- .../media-chat/VideoCall/Staging.jsx | 59 -------- .../media-chat/VideoCall/VideoPlayer.jsx | 20 --- .../media-chat/VideoCall/VideoRoom.jsx | 133 ------------------ .../VideoCall/styles/Staging.module.css | 45 ------ .../VideoCall/styles/videochat.module.css | 7 - .../VideoCall/styles/videoplayer.module.css | 12 -- .../VideoCall/styles/videoroom.module.css | 52 ------- .../components/media-chat/video/Staging.jsx | 7 - .../components/media-chat/video/VideoRoom.jsx | 23 ++- .../media-chat/video/styles/videoRoom.css | 5 + .../protected/sidebar/components/Sidebar.jsx | 18 ++- .../sidebar/styles/Sidebar.module.css | 24 +++- 13 files changed, 58 insertions(+), 369 deletions(-) delete mode 100644 packages/main/src/components/media-chat/VideoCall/Controls.jsx delete mode 100644 packages/main/src/components/media-chat/VideoCall/Staging.jsx delete mode 100644 packages/main/src/components/media-chat/VideoCall/VideoPlayer.jsx delete mode 100644 packages/main/src/components/media-chat/VideoCall/VideoRoom.jsx delete mode 100644 packages/main/src/components/media-chat/VideoCall/styles/Staging.module.css delete mode 100644 packages/main/src/components/media-chat/VideoCall/styles/videochat.module.css delete mode 100644 packages/main/src/components/media-chat/VideoCall/styles/videoplayer.module.css delete mode 100644 packages/main/src/components/media-chat/VideoCall/styles/videoroom.module.css delete mode 100644 packages/main/src/components/media-chat/video/Staging.jsx create mode 100644 packages/main/src/components/media-chat/video/styles/videoRoom.css diff --git a/packages/main/src/components/media-chat/VideoCall/Controls.jsx b/packages/main/src/components/media-chat/VideoCall/Controls.jsx deleted file mode 100644 index e3a6cd75a1..0000000000 --- a/packages/main/src/components/media-chat/VideoCall/Controls.jsx +++ /dev/null @@ -1,22 +0,0 @@ -import { useRef, useState, useEffect } from "react"; - -const Controls = ({ tracks }) => { - const ref = useRef(); - const muteAudio = () => { - tracks[0].stop(ref.current); - }; - - const muteVideo = () => { - tracks[1].stop(ref.current); - }; - return ( -
-
-
-
-
-
- ); -}; - -export default Controls; diff --git a/packages/main/src/components/media-chat/VideoCall/Staging.jsx b/packages/main/src/components/media-chat/VideoCall/Staging.jsx deleted file mode 100644 index ee38d427fa..0000000000 --- a/packages/main/src/components/media-chat/VideoCall/Staging.jsx +++ /dev/null @@ -1,59 +0,0 @@ -import { useEffect, useState } from "react"; -import styles from "./styles/Staging.module.css"; -import VideoPlayer from "./VideoPlayer"; -import VideoRoom from "./VideoRoom"; - -const Staging = ({ workspaceId }) => { - // set states - const [stage, setStage] = useState(0); - const [localTracks, setLocalTracks] = useState([]); - const [users, setUsers] = useState([]); - const [token, setToken] = useState(null); - - // const APP_ID = process.env.APP_ID; - let uid = sessionStorage.getItem("uid"); - if (!uid) { - uid = String(Math.floor(Math.random() * 1000)); - sessionStorage.setItem("uid", uid); - } - - const fetchToken = () => { - fetch( - `https://staging.api.zuri.chat/rtc/${workspaceId}/publisher/uid/${uid}/` - ) - .then(res => res.json()) - .then(data => { - setToken(data.data.token); - setStage(1); - }); - }; - - return ( -
- {stage === 0 && ( -
-
- {/* */} - -
-
- )} - {stage === 1 && ( - - )} -
- ); -}; - -export default Staging; diff --git a/packages/main/src/components/media-chat/VideoCall/VideoPlayer.jsx b/packages/main/src/components/media-chat/VideoCall/VideoPlayer.jsx deleted file mode 100644 index 7e3557bff0..0000000000 --- a/packages/main/src/components/media-chat/VideoCall/VideoPlayer.jsx +++ /dev/null @@ -1,20 +0,0 @@ -import { useEffect, useRef } from "react"; -import styles from "./styles/videoplayer.module.css"; - -const VideoPlayer = ({ user, localId }) => { - const ref = useRef(); - useEffect(() => { - user?.videoTrack.play(ref.current); - user?.audioTrack.play(ref.current); - if (user.uid == localId) { - user?.audioTrack.stop(ref.current); - } - return () => { - user?.videoTrack.stop(ref.current); - user?.audioTrack.stop(ref.current); - }; - }, []); - return
; -}; - -export default VideoPlayer; diff --git a/packages/main/src/components/media-chat/VideoCall/VideoRoom.jsx b/packages/main/src/components/media-chat/VideoCall/VideoRoom.jsx deleted file mode 100644 index 225569d182..0000000000 --- a/packages/main/src/components/media-chat/VideoCall/VideoRoom.jsx +++ /dev/null @@ -1,133 +0,0 @@ -import React, { useState, useEffect } from "react"; -import VideoPlayer from "./VideoPlayer"; -import Styles from "./styles/videoroom.module.css"; -import Mic from "./../../../assets/media/mic.svg"; -import MicOff from "./../../../assets/media/mic-off.svg"; -import Video from "./../../../assets/media/video.svg"; -import VideoOff from "./../../../assets/media/video-off.svg"; -import exit from "./../../../assets/media/exit.svg"; -import AgoraRTC from "agora-rtc-sdk-ng"; -import { Grid } from "@material-ui/core"; -import { AGORA_APP_ID, AGORA_TOKEN } from "@zuri/utilities"; - -const VideoRoom = ({ token, channelName, uid, closeRoom }) => { - const [trackState, setTrackState] = useState({ video: true, audio: true }); - const [localTracks, setLocalTracks] = useState([]); - const [users, setUsers] = useState([]); - const [gridSpacing, setGridSpacing] = useState(12); - - const APP_ID = AGORA_APP_ID; - const Token = AGORA_TOKEN; - - const client = AgoraRTC.createClient({ - mode: "rtc", - codec: "vp8" - }); - - const handleUserJoined = async (user, mediaType) => { - await client.subscribe(user, mediaType); - - if (mediaType === "video") { - setUsers(previousUsers => [...previousUsers, user]); - } - - if (mediaType === "audio") { - user.audioTrack.play(); - } - }; - - const handleUserLeft = user => { - setUsers(previousUsers => previousUsers.filter(u => u.uid !== user.uid)); - }; - - useEffect(() => { - setGridSpacing(Math.max(Math.floor(12 / (users.length + 1)), 4)); - - client.on("user-published", handleUserJoined); - client.on("user-left", handleUserLeft); - - client - .join(APP_ID, "plug", `${Token}`, null) - .then(uid => - Promise.all([AgoraRTC.createMicrophoneAndCameraTracks(), uid]) - ) - .then(([tracks, uid]) => { - const [audioTrack, videoTrack] = tracks; - setLocalTracks(tracks); - setUsers(previousUsers => [ - ...previousUsers, - { - uid, - videoTrack, - audioTrack - } - ]); - client.publish(tracks); - }); - - return () => { - for (let localTrack of localTracks) { - localTrack.stop(); - localTrack.close(); - } - client.off("user-published", handleUserJoined); - client.off("user-left", handleUserLeft); - client.unpublish(localTracks).then(() => client.leave()); - }; - }, []); - - const mute = async type => { - if (type === "audio") { - await localTracks[0].setEnabled(!trackState.audio); - setTrackState(ps => { - return { ...ps, audio: !ps.audio }; - }); - } else if (type === "video") { - await localTracks[1].setEnabled(!trackState.video); - setTrackState(ps => { - return { ...ps, video: !ps.video }; - }); - } - }; - - const leaveChannel = async () => { - await client.leave(); - client.removeAllListeners(); - localTracks[0].close(); - localTracks[1].close(); - closeRoom(prev => prev - 1); - }; - - return ( -
-
- - {users.map(user => { - return ( - - - - ); - })} - -
-
-
mute("audio")}> - -
-
mute("video")}> - -
-
leaveChannel()} - > - -
-
-
- ); -}; - -export default VideoRoom; diff --git a/packages/main/src/components/media-chat/VideoCall/styles/Staging.module.css b/packages/main/src/components/media-chat/VideoCall/styles/Staging.module.css deleted file mode 100644 index 0c49cbce5b..0000000000 --- a/packages/main/src/components/media-chat/VideoCall/styles/Staging.module.css +++ /dev/null @@ -1,45 +0,0 @@ -.videoChat { - height: 100%; -} - -.staging{ - height: 100%; - width: 100%; - display: flex; - justify-content: center; - align-items: center; -} - -.stagingWrapper { - max-width: 70%; - width: 100%; - display: flex; - justify-content: center; - align-items: center; - gap: 50px; -} - -.videoContainer { - height: 300px; - width: 500px; - border-radius: 8px; - background-color: black; -} - -.stagingBtn { - padding: 12px 24px; - border-radius: 8px; - color: white; - background: #00b87c; - display: inline-block; -} - -.stagingBtn:disabled { - background-color: #00b87ba4; -} - -.userVideo { - height: 100%; - width: 100%; - border-radius: 50px; -} \ No newline at end of file diff --git a/packages/main/src/components/media-chat/VideoCall/styles/videochat.module.css b/packages/main/src/components/media-chat/VideoCall/styles/videochat.module.css deleted file mode 100644 index edf4813433..0000000000 --- a/packages/main/src/components/media-chat/VideoCall/styles/videochat.module.css +++ /dev/null @@ -1,7 +0,0 @@ -.videoChat { - height: 100%; - width: 100%; - display: flex; - justify-content: center; - align-items: center; -} \ No newline at end of file diff --git a/packages/main/src/components/media-chat/VideoCall/styles/videoplayer.module.css b/packages/main/src/components/media-chat/VideoCall/styles/videoplayer.module.css deleted file mode 100644 index b239e4a021..0000000000 --- a/packages/main/src/components/media-chat/VideoCall/styles/videoplayer.module.css +++ /dev/null @@ -1,12 +0,0 @@ -.videoplayer { - height: 300px; - width: 300px; - border-radius: 8px; - overflow: hidden; - background-color: black; -} - -.video { - width: 100%; - height: 100%; -} \ No newline at end of file diff --git a/packages/main/src/components/media-chat/VideoCall/styles/videoroom.module.css b/packages/main/src/components/media-chat/VideoCall/styles/videoroom.module.css deleted file mode 100644 index 074d9578a9..0000000000 --- a/packages/main/src/components/media-chat/VideoCall/styles/videoroom.module.css +++ /dev/null @@ -1,52 +0,0 @@ -.videoroom { - /* position: relative; */ - height: 100%; - padding: 20px; -} - -.controlBar{ - margin-top: 10px; - height: 5%; - height: 80px; - background-color: black; - width: 100%; - display: flex; - justify-content: center; - align-items: center; - gap: 50px; -} - -.controlBar > div { - background-color: #ffffff; - border-radius: 50px; - height: 50px; - width: 50px; - display: flex; - justify-content: center; - align-items: center; -} - -.controlBar > div:hover { - background-color: white; -} - -.controlBar img { - width: 30px; -} - -.videoroomRooms { - height: 80%; - display: flex; - justify-content: center; - align-items: center; - flex-wrap: wrap; - gap: 20px; -} - -.videoContainer { - height: 100%; - width: 100%; - display: flex; - justify-content: center; - align-items: center; -} \ No newline at end of file diff --git a/packages/main/src/components/media-chat/video/Staging.jsx b/packages/main/src/components/media-chat/video/Staging.jsx deleted file mode 100644 index 3afcbb08dc..0000000000 --- a/packages/main/src/components/media-chat/video/Staging.jsx +++ /dev/null @@ -1,7 +0,0 @@ -import React from "react"; - -const Staging = () => { - return
; -}; - -export default Staging; diff --git a/packages/main/src/components/media-chat/video/VideoRoom.jsx b/packages/main/src/components/media-chat/video/VideoRoom.jsx index 898f4d803e..f976723779 100644 --- a/packages/main/src/components/media-chat/video/VideoRoom.jsx +++ b/packages/main/src/components/media-chat/video/VideoRoom.jsx @@ -1,6 +1,7 @@ import { useState } from "react"; import AgoraUIKit from "agora-react-uikit"; import { AGORA_APP_ID, AGORA_TOKEN } from "@zuri/utilities"; +import styles from "./styles/videoRoom.css"; const VideoRoom = () => { const [videoCall, setVideoCall] = useState(true); @@ -13,13 +14,27 @@ const VideoRoom = () => { EndCall: () => setVideoCall(false) }; return videoCall ? ( -
+
) : ( - +
+ +
); }; diff --git a/packages/main/src/components/media-chat/video/styles/videoRoom.css b/packages/main/src/components/media-chat/video/styles/videoRoom.css new file mode 100644 index 0000000000..409422284e --- /dev/null +++ b/packages/main/src/components/media-chat/video/styles/videoRoom.css @@ -0,0 +1,5 @@ +.joinBtn { + padding: 12px 24px; + font-size: 21px; + background-color: #20c997; +} \ No newline at end of file diff --git a/packages/main/src/components/protected/sidebar/components/Sidebar.jsx b/packages/main/src/components/protected/sidebar/components/Sidebar.jsx index 78be8f12a5..a4b3a87f47 100644 --- a/packages/main/src/components/protected/sidebar/components/Sidebar.jsx +++ b/packages/main/src/components/protected/sidebar/components/Sidebar.jsx @@ -231,7 +231,7 @@ const Sidebar = props => {
- <> +
{ image={dmIcon} link={`/workspace/${currentWorkspaceShort}/plugin-chat/all-dms`} /> - { {singleItems} {categorizedItems} - +
+
+
+ +
+
)} diff --git a/packages/main/src/components/protected/sidebar/styles/Sidebar.module.css b/packages/main/src/components/protected/sidebar/styles/Sidebar.module.css index cac94f6d4e..3931b16f3f 100644 --- a/packages/main/src/components/protected/sidebar/styles/Sidebar.module.css +++ b/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,21 @@ display: block; } +.videoCall { + height: 50px; + border-top: 2px solid rgba(128, 128, 128, 0.5); + display: flex; + justify-content: center; + align-items: center; +} + +.videoCall > div { + width: 100%; +} + +.videoCall > div > div { + display: flex; + justify-content: space-between; + align-items: center; + gap: 20px; +} \ No newline at end of file From d206e662f5d3d87841a723f2ff17d51697b77839 Mon Sep 17 00:00:00 2001 From: Nafiu Taiwo <69268373+taiwonaf@users.noreply.github.com> Date: Sat, 10 Dec 2022 16:27:23 +0100 Subject: [PATCH 07/14] Moved agora uikit props to new lines --- packages/main/src/components/media-chat/video/VideoRoom.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/main/src/components/media-chat/video/VideoRoom.jsx b/packages/main/src/components/media-chat/video/VideoRoom.jsx index f976723779..9c4b72aefa 100644 --- a/packages/main/src/components/media-chat/video/VideoRoom.jsx +++ b/packages/main/src/components/media-chat/video/VideoRoom.jsx @@ -3,7 +3,7 @@ import AgoraUIKit from "agora-react-uikit"; import { AGORA_APP_ID, AGORA_TOKEN } from "@zuri/utilities"; import styles from "./styles/videoRoom.css"; -const VideoRoom = () => { +const VideoRoom = ({ workspaceId }) => { const [videoCall, setVideoCall] = useState(true); const rtcProps = { appId: AGORA_APP_ID, From ee07c261d221d444c48d8af24271da0d0ed1f3f2 Mon Sep 17 00:00:00 2001 From: Nafiu Taiwo <69268373+taiwonaf@users.noreply.github.com> Date: Sat, 10 Dec 2022 22:30:46 +0100 Subject: [PATCH 08/14] Styling: fixed the sizes of the video containers --- .../components/media-chat/video/VideoRoom.jsx | 74 ++++++++++++++++++- .../protected/sidebar/assets/icons/videos.svg | 4 +- .../protected/sidebar/components/Sidebar.jsx | 13 ---- .../sidebar/styles/Sidebar.module.css | 4 + .../pages/protected/workspace/Workspace.jsx | 9 --- 5 files changed, 79 insertions(+), 25 deletions(-) diff --git a/packages/main/src/components/media-chat/video/VideoRoom.jsx b/packages/main/src/components/media-chat/video/VideoRoom.jsx index 9c4b72aefa..40a56844f6 100644 --- a/packages/main/src/components/media-chat/video/VideoRoom.jsx +++ b/packages/main/src/components/media-chat/video/VideoRoom.jsx @@ -13,9 +13,79 @@ const VideoRoom = ({ workspaceId }) => { 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 ? ( -
- +
+
) : (
\ No newline at end of file + + + diff --git a/packages/main/src/components/protected/sidebar/components/Sidebar.jsx b/packages/main/src/components/protected/sidebar/components/Sidebar.jsx index a4b3a87f47..43b1f4e7a3 100644 --- a/packages/main/src/components/protected/sidebar/components/Sidebar.jsx +++ b/packages/main/src/components/protected/sidebar/components/Sidebar.jsx @@ -4,13 +4,10 @@ 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"; @@ -246,16 +243,6 @@ const Sidebar = props => { name={`${t("workspace_chat.drafts")}`} image={draftIcon} /> - -
{singleItems} diff --git a/packages/main/src/components/protected/sidebar/styles/Sidebar.module.css b/packages/main/src/components/protected/sidebar/styles/Sidebar.module.css index 3931b16f3f..d62960fd75 100644 --- a/packages/main/src/components/protected/sidebar/styles/Sidebar.module.css +++ b/packages/main/src/components/protected/sidebar/styles/Sidebar.module.css @@ -282,6 +282,10 @@ width: 100%; } +.videoCall img { + width: 24px; +} + .videoCall > div > div { display: flex; justify-content: space-between; diff --git a/packages/main/src/pages/protected/workspace/Workspace.jsx b/packages/main/src/pages/protected/workspace/Workspace.jsx index 062da0cddb..7d515bf19e 100644 --- a/packages/main/src/pages/protected/workspace/Workspace.jsx +++ b/packages/main/src/pages/protected/workspace/Workspace.jsx @@ -6,7 +6,6 @@ import { useLocation, useRouteMatch } from "react-router-dom"; -import LiveBroadcast from "../../../components/media-chat/LiveBroadcast"; import useParamHook from "./useParamHook"; import { ExtraSidebarWrapperStyle, @@ -25,7 +24,6 @@ import { BsGearFill, BsPlusCircle } from "react-icons/bs"; -import VoiceCall from "../../../components/media-chat/VoiceCall/VoiceCall"; import VideoRoom from "../../../components/media-chat/video/VideoRoom"; import { Sidebar, TopBar } from "../../../components/protected"; import ExtraSidebar from "../../../components/protected/extra-sidebar"; @@ -98,16 +96,9 @@ export default function Index() {

Welcome to your Workspace

 - - - - - - - {/* Date: Sat, 10 Dec 2022 22:48:55 +0100 Subject: [PATCH 09/14] Fixed stylings and husky version issue --- package.json | 2 +- yarn.lock | 5 ----- 2 files changed, 1 insertion(+), 6 deletions(-) diff --git a/package.json b/package.json index 21e5b6d64f..c7750459a7 100644 --- a/package.json +++ b/package.json @@ -37,7 +37,7 @@ "eslint-plugin-css-modules": "^2.11.0", "eslint-plugin-cypress": "^2.12.1", "eslint-plugin-react": "^7.28.0", - "husky": "^8.0.2", + "husky": "^7.0.2", "lerna": "^4.0.0", "lint-staged": ">=10", "opener": "^1.5.2", diff --git a/yarn.lock b/yarn.lock index ceea82d535..22657598ba 100644 --- a/yarn.lock +++ b/yarn.lock @@ -10539,11 +10539,6 @@ husky@^7.0.2: resolved "https://registry.npmjs.org/husky/-/husky-7.0.4.tgz" integrity sha512-vbaCKN2QLtP/vD4yvs6iz6hBEo6wkSzs8HpRah1Z6aGmF2KW5PdYuAd7uX5a+OyBZHBhd+TFLqgjUgytQr4RvQ== -husky@^8.0.2: - version "8.0.2" - resolved "https://registry.yarnpkg.com/husky/-/husky-8.0.2.tgz#5816a60db02650f1f22c8b69b928fd6bcd77a236" - integrity sha512-Tkv80jtvbnkK3mYWxPZePGFpQ/tT3HNSs/sasF9P2YfkMezDl3ON37YN6jUUI4eTg5LcyVynlb6r4eyvOmspvg== - hyphenate-style-name@^1.0.2, hyphenate-style-name@^1.0.3: version "1.0.4" resolved "https://registry.npmjs.org/hyphenate-style-name/-/hyphenate-style-name-1.0.4.tgz" From 79e35c8a0819adbe2677b22d302d15b8067ee76c Mon Sep 17 00:00:00 2001 From: Nafiu Taiwo <69268373+taiwonaf@users.noreply.github.com> Date: Sun, 11 Dec 2022 22:22:58 +0100 Subject: [PATCH 10/14] Integrated the token generator --- .../components/media-chat/video/VideoRoom.jsx | 23 +++++++++++++++---- 1 file changed, 19 insertions(+), 4 deletions(-) diff --git a/packages/main/src/components/media-chat/video/VideoRoom.jsx b/packages/main/src/components/media-chat/video/VideoRoom.jsx index 40a56844f6..5de9cfdb53 100644 --- a/packages/main/src/components/media-chat/video/VideoRoom.jsx +++ b/packages/main/src/components/media-chat/video/VideoRoom.jsx @@ -1,14 +1,29 @@ -import { useState } from "react"; +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(true); + 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: "plug", - token: AGORA_TOKEN + channel: workspaceId, + token: token }; const callbacks = { EndCall: () => setVideoCall(false) From ce9e9fe95cb43994bcaa3c68818b9b874e29b951 Mon Sep 17 00:00:00 2001 From: Nafiu Taiwo <69268373+taiwonaf@users.noreply.github.com> Date: Mon, 12 Dec 2022 09:58:33 +0100 Subject: [PATCH 11/14] Token generator integrated --- .../main/src/components/protected/sidebar/components/Sidebar.jsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/main/src/components/protected/sidebar/components/Sidebar.jsx b/packages/main/src/components/protected/sidebar/components/Sidebar.jsx index 43b1f4e7a3..00b430499e 100644 --- a/packages/main/src/components/protected/sidebar/components/Sidebar.jsx +++ b/packages/main/src/components/protected/sidebar/components/Sidebar.jsx @@ -12,6 +12,7 @@ import SingleRoom from "./SingleRoom"; import Category from "./Category"; import Starred from "./Starred"; import { storeSideBarInfo } from "../../../../utils/cache-sidebar"; +import VideoRoom from "../../../media-chat/video/VideoRoom"; const categories = []; From 177f5075a676ed5ae0bf1aaad708f220003fcc0c Mon Sep 17 00:00:00 2001 From: Nafiu Taiwo <69268373+taiwonaf@users.noreply.github.com> Date: Mon, 12 Dec 2022 11:00:22 +0100 Subject: [PATCH 12/14] Changed the video icon image to react icon --- .../protected/sidebar/components/Sidebar.jsx | 21 ++++++++++++------- .../sidebar/styles/Sidebar.module.css | 15 ++++++++----- 2 files changed, 23 insertions(+), 13 deletions(-) diff --git a/packages/main/src/components/protected/sidebar/components/Sidebar.jsx b/packages/main/src/components/protected/sidebar/components/Sidebar.jsx index 00b430499e..3957e45f33 100644 --- a/packages/main/src/components/protected/sidebar/components/Sidebar.jsx +++ b/packages/main/src/components/protected/sidebar/components/Sidebar.jsx @@ -1,7 +1,8 @@ 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 videoIcon from "../assets/icons/videos.svg"; import threadIcon from "../assets/icons/thread-icon.svg"; import dmIcon from "../assets/icons/dm-icon.svg"; import draftIcon from "../assets/icons/draft-icon.svg"; @@ -12,7 +13,7 @@ import SingleRoom from "./SingleRoom"; import Category from "./Category"; import Starred from "./Starred"; import { storeSideBarInfo } from "../../../../utils/cache-sidebar"; -import VideoRoom from "../../../media-chat/video/VideoRoom"; +import { FiVideo } from "react-icons/fi"; const categories = []; @@ -250,12 +251,16 @@ const Sidebar = props => { {categorizedItems}
-
- +
+ navigateToUrl( + `/workspace/${currentWorkspaceShort}/video-chat` + ) + } + > + + Video call
diff --git a/packages/main/src/components/protected/sidebar/styles/Sidebar.module.css b/packages/main/src/components/protected/sidebar/styles/Sidebar.module.css index d62960fd75..77d1d0fda7 100644 --- a/packages/main/src/components/protected/sidebar/styles/Sidebar.module.css +++ b/packages/main/src/components/protected/sidebar/styles/Sidebar.module.css @@ -274,16 +274,21 @@ height: 50px; border-top: 2px solid rgba(128, 128, 128, 0.5); display: flex; - justify-content: center; + justify-content: flex-start; align-items: center; + gap: 20px; + padding: 0px 20px; } -.videoCall > div { - width: 100%; +.videoCall:hover { + background-color: #7ed5af; } -.videoCall img { - width: 24px; +.videoCall:active { + background-color: #7ed5af; +} +.videoCall > div { + width: 100%; } .videoCall > div > div { From f3d1ef03e794007de87314d8c3bfff3c1afa0c13 Mon Sep 17 00:00:00 2001 From: Nafiu Taiwo <69268373+taiwonaf@users.noreply.github.com> Date: Tue, 13 Dec 2022 22:28:04 +0100 Subject: [PATCH 13/14] removed icons not in use --- packages/main/src/assets/media/exit.svg | 1 - packages/main/src/assets/media/mic-off.svg | 1 - packages/main/src/assets/media/mic.svg | 1 - packages/main/src/assets/media/video-off.svg | 1 - packages/main/src/assets/media/video.svg | 1 - 5 files changed, 5 deletions(-) delete mode 100644 packages/main/src/assets/media/exit.svg delete mode 100644 packages/main/src/assets/media/mic-off.svg delete mode 100644 packages/main/src/assets/media/mic.svg delete mode 100644 packages/main/src/assets/media/video-off.svg delete mode 100644 packages/main/src/assets/media/video.svg diff --git a/packages/main/src/assets/media/exit.svg b/packages/main/src/assets/media/exit.svg deleted file mode 100644 index e47723f00a..0000000000 --- a/packages/main/src/assets/media/exit.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/packages/main/src/assets/media/mic-off.svg b/packages/main/src/assets/media/mic-off.svg deleted file mode 100644 index cc85332c8b..0000000000 --- a/packages/main/src/assets/media/mic-off.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/packages/main/src/assets/media/mic.svg b/packages/main/src/assets/media/mic.svg deleted file mode 100644 index 45818c9cac..0000000000 --- a/packages/main/src/assets/media/mic.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/packages/main/src/assets/media/video-off.svg b/packages/main/src/assets/media/video-off.svg deleted file mode 100644 index 27c37d8916..0000000000 --- a/packages/main/src/assets/media/video-off.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/packages/main/src/assets/media/video.svg b/packages/main/src/assets/media/video.svg deleted file mode 100644 index 734a2cb3e5..0000000000 --- a/packages/main/src/assets/media/video.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file From 3a76289f3f01a22b20e1aa274708533b26441eb7 Mon Sep 17 00:00:00 2001 From: Nafiu Taiwo <69268373+taiwonaf@users.noreply.github.com> Date: Tue, 13 Dec 2022 23:18:35 +0100 Subject: [PATCH 14/14] Changed to axios to fetching data --- .../components/media-chat/video/VideoRoom.jsx | 21 +++++++++++-------- .../sidebar/styles/Sidebar.module.css | 1 + 2 files changed, 13 insertions(+), 9 deletions(-) diff --git a/packages/main/src/components/media-chat/video/VideoRoom.jsx b/packages/main/src/components/media-chat/video/VideoRoom.jsx index 5de9cfdb53..5b90d61943 100644 --- a/packages/main/src/components/media-chat/video/VideoRoom.jsx +++ b/packages/main/src/components/media-chat/video/VideoRoom.jsx @@ -7,15 +7,18 @@ 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); - } + const fetchToken = () => { + axios + .get( + `https://staging.api.zuri.chat/rtc/${workspaceId}/publisher/userAccount` + ) + .then(response => { + if (response.status === 200) { + setToken(response.data.data.token); + setVideoCall(true); + } + }) + .catch(error => console.log(error)); }; useEffect(() => { fetchToken(); diff --git a/packages/main/src/components/protected/sidebar/styles/Sidebar.module.css b/packages/main/src/components/protected/sidebar/styles/Sidebar.module.css index 77d1d0fda7..a6607536fb 100644 --- a/packages/main/src/components/protected/sidebar/styles/Sidebar.module.css +++ b/packages/main/src/components/protected/sidebar/styles/Sidebar.module.css @@ -278,6 +278,7 @@ align-items: center; gap: 20px; padding: 0px 20px; + cursor: pointer; } .videoCall:hover {