diff --git a/client/src/App.css b/client/src/App.css
index 45cc428..ee94161 100644
--- a/client/src/App.css
+++ b/client/src/App.css
@@ -26,6 +26,11 @@
height: 603px !important;
}
+video {
+ max-width: 200px !important;
+ max-height: 200px !important;
+}
+
@keyframes App-logo-spin {
from {
transform: rotate(0deg);
diff --git a/client/src/pages/CodeUI.js b/client/src/pages/CodeUI.js
index 053e1ff..228cdbc 100644
--- a/client/src/pages/CodeUI.js
+++ b/client/src/pages/CodeUI.js
@@ -19,10 +19,13 @@ import "codemirror/lib/codemirror.css";
import "codemirror/theme/material.css";
import { theme } from "../themes/theme";
import socket from "../socket/socket";
+import Video from 'twilio-video';
+import ParticipantVideo from "../video-chat/ParticipantVideo";
require("codemirror/mode/xml/xml");
require("codemirror/mode/python/python");
require("codemirror/mode/clike/clike");
require("codemirror/mode/javascript/javascript");
+
const codeUIStyle = (theme) => ({
root: {
flexGrow: 1,
@@ -65,6 +68,14 @@ const codeUIStyle = (theme) => ({
fill: "black",
},
},
+ remoteParticipant: {
+ width: 200,
+ height: 200,
+ zIndex: 9,
+ position: 'absolute',
+ right: 0,
+ margin: "0 auto",
+ }
});
const qtitle = "Diagonal Difference";
const qdesc =
@@ -84,6 +95,9 @@ function CodeUI(props) {
const [runResult, setrunResult] = useState(null);
const [inRoom, setInRoom] = useState(false);
const history = useHistory();
+ const [videoRoom, setVideoRoom] = useState(null);
+ const [videoParticipants, setVideoParticipants] = useState([]);
+ const [token, setToken] = useState(null);
const [language, setLanguage] = useState("text/x-python");
useEffect(() => {
@@ -118,6 +132,60 @@ function CodeUI(props) {
});
}, []);
+ //For video chat room creation
+ useEffect(() => {
+ fetch(`/video/token/${props.match.params.id}`, {
+ method: 'POST',
+ body: JSON.stringify({}),
+ headers: { 'Content-Type': 'application/json' }
+ })
+ .then(res => res.json())
+ .then(data => setToken(data.token));
+ },[]);
+
+ //For video chat connection
+ useEffect(() => {
+ if (token) {
+ const participantConnected = participant => {
+ setVideoParticipants(prevParticipants => [...prevParticipants, participant]);
+ };
+
+ const participantDisconnected = participant => {
+ setVideoParticipants(prevParticipants =>
+ prevParticipants.filter(p => p !== participant)
+ );
+ };
+
+ Video.connect(token, {
+ name: props.match.params.id
+ }).then(videoRoom => {
+ setVideoRoom(videoRoom);
+ videoRoom.on('participantConnected', participantConnected);
+ videoRoom.on('participantDisconnected', participantDisconnected);
+ videoRoom.participants.forEach(participantConnected);
+ });
+
+ return () => {
+ setVideoRoom(currentRoom => {
+ if (currentRoom && currentRoom.localParticipant.state === 'connected') {
+ currentRoom.localParticipant.tracks.forEach(function(trackPublication) {
+ trackPublication.track.stop();
+ });
+ currentRoom.disconnect();
+ return null;
+ } else {
+ return currentRoom;
+ }
+ });
+ };
+ }
+ }, [props.match.params.id, token]);
+
+ //For video chat other participant video
+ const remoteParticipants = videoParticipants.map(participant => (
+
+ ));
+
const handleInRoom = () => {
inRoom ? setInRoom(false) : setInRoom(true);
};
@@ -142,6 +210,7 @@ function CodeUI(props) {
fetch(`/interviews/endInterview/${props.match.params.id}`)
.then((res) => socket.emit("endInterview", { id: props.match.params.id }))
.catch((err) => console.log(err));
+ setToken(null);//For video-chat logout
}
const changeLanguage = (lang) => {
@@ -203,6 +272,8 @@ function CodeUI(props) {
+ {remoteParticipants}
+ {/* I want this above
*/}
{}}
+ style={{position: 'absolute'}}
/>
+ {/* {remoteParticipants}
*/}
diff --git a/client/src/video-chat/ParticipantVideo.js b/client/src/video-chat/ParticipantVideo.js
new file mode 100644
index 0000000..f21b9bb
--- /dev/null
+++ b/client/src/video-chat/ParticipantVideo.js
@@ -0,0 +1,83 @@
+import React, { useState, useEffect, useRef } from "react";
+import { makeStyles } from "@material-ui/core/styles";
+
+const useStyles = makeStyles((theme) => ({
+ screen: {
+ maxWidth: "200px",
+ maxHeight: "200px"
+ }
+}));
+
+const ParticipantVideo = ({ participant }) => {
+ const classes = useStyles();
+ const [videoTracks, setVideoTracks] = useState([]);
+ const [audioTracks, setAudioTracks] = useState([]);
+
+ const videoRef = useRef();
+ const audioRef = useRef();
+
+ const trackpubsToTracks = (trackMap) =>
+ Array.from(trackMap.values())
+ .map((publication) => publication.track)
+ .filter((track) => track !== null);
+
+ useEffect(() => {
+ setVideoTracks(trackpubsToTracks(participant.videoTracks));
+ setAudioTracks(trackpubsToTracks(participant.audioTracks));
+
+ const trackSubscribed = (track) => {
+ if (track.kind === "video") {
+ setVideoTracks((videoTracks) => [...videoTracks, track]);
+ } else if (track.kind === "audio") {
+ setAudioTracks((audioTracks) => [...audioTracks, track]);
+ }
+ };
+
+ const trackUnsubscribed = (track) => {
+ if (track.kind === "video") {
+ setVideoTracks((videoTracks) => videoTracks.filter((v) => v !== track));
+ } else if (track.kind === "audio") {
+ setAudioTracks((audioTracks) => audioTracks.filter((a) => a !== track));
+ }
+ };
+
+ participant.on("trackSubscribed", trackSubscribed);
+ participant.on("trackUnsubscribed", trackUnsubscribed);
+
+ return () => {
+ setVideoTracks([]);
+ setAudioTracks([]);
+ participant.removeAllListeners();
+ };
+ }, [participant]);
+
+ useEffect(() => {
+ const videoTrack = videoTracks[0];
+ if (videoTrack) {
+ videoTrack.attach(videoRef.current);
+ return () => {
+ videoTrack.detach();
+ };
+ }
+ }, [videoTracks]);
+
+ useEffect(() => {
+ const audioTrack = audioTracks[0];
+ if (audioTrack) {
+ audioTrack.attach(audioRef.current);
+ return () => {
+ audioTrack.detach();
+ };
+ }
+ }, [audioTracks]);
+
+ return (
+
+
{participant.identity}
+
+
+