Fixed meeting bug and added singleton.

Author: mirastroie

meetsy/package-lock.json

@@ -31,8 +31,10 @@
     "react-dom": "^17.0.2",
     "react-jss": "^10.6.0",
     "react-loading-screen": "0.0.17",
+    "react-modal": "^3.14.2",
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.3",
+    "reactjs-popup": "^2.0.4",
     "recompose": "^0.30.0",
     "run-p": "0.0.0",
     "simple-flexbox": "^2.3.2",

meetsy/package.json

@@ -26,6 +26,7 @@ import TeamComponent from '../Team/TeamComponent';
 import TeamCollection from '../Team/TeamCollection';
 import {compose} from 'recompose';
 import LoadingScreen from 'react-loading-screen';
+import CallError from '../CallError';
 const styles = StyleSheet.create({
 
   content: {
@@ -116,6 +117,7 @@ class App extends Component {
             <Route path={ROUTES.USERS} component={UserList} />
             <Route path={ROUTES.USER_DETAILS} component={UserItem} />
             <Route path={ROUTES.SHOW_TEAMS} component={TeamCollection}/>
+            <Route path={ROUTES.CALLERROR} component={CallError}/>
             <Route path="/meet/:url" component={Meet} />
             <Route path="/showteam/:teamId" component={TeamComponent} />
             {/* <Route path={ROUTES.TEAM} component={TeamComponent}/> */}

meetsy/src/components/App/index.js

@@ -0,0 +1,53 @@
+import React from 'react';
+import { Component } from 'react';
+import { withAuthorization } from '../Session';
+import { withFirebase } from '../Firebase';
+import {compose} from 'recompose';
+import { COLORS } from '../../constants/designConstants';
+import styled from 'styled-components';
+import {withRouter} from 'react-router-dom';
+import * as ROUTES from '../../constants/routes';
+class Error extends Component {
+  constructor(props){
+    super(props);
+   
+  }
+ 
+  render() {
+
+    return (
+    
+      <div style={{position:'relative', marginLeft: 'auto', marginRight: 'auto', marginTop:'auto', marginBottom: 'auto'}}>
+      <h1>Error 101  - Hey, you little troublemaker...</h1>
+      <p>Seems like you are already in that call. Press the button below to return home.
+      </p>
+      <StyledButton onClick = {() => this.props.history.push(ROUTES.HOME)}>Home</StyledButton>
+
+     
+    </div>
+   
+    )
+  }
+}
+
+const StyledButton = styled.button`
+  margin-left:auto;
+  margin-right:auto;
+  max-width: 250px;
+  min-width: 150px;
+  height: 40px;
+  border: none;
+  margin: 1rem 0;
+  box-shadow: 0px 14px 9 px -15px rgba(0,0,0,0.25);
+  border-radius: 32px;
+  background-color: ${COLORS.primaryBlue};
+  color: white;
+  font-weight: 600;
+  cursor: pointer;
+  align-self: center;
+  &:hover {
+    background-color: ${COLORS.primaryBlue};
+  }
+`;
+const condition = authUser => !!authUser;
+export default compose(withRouter, withAuthorization(condition))(Error);

meetsy/src/components/CallError/index.js

@@ -26,7 +26,9 @@ const firebaseConfig = {
 // firebase.initializeApp(firebaseConfig);
 
 
-class Firebase {
+var SingletonFactory = (function() {
+
+  class Firebase {
     constructor() {
       firebase.initializeApp(firebaseConfig);
 
@@ -79,5 +81,15 @@ class Firebase {
      teams = () => this.db.collection('teams');
 
 }
-
-export default Firebase;
+  var instance;
+  return {
+    getInstance: function(){
+      if(!instance){
+        instance = new Firebase();
+        delete instance.constructor;
+      }
+      return instance;
+    }
+  }
+})();
+export default SingletonFactory;

meetsy/src/components/Firebase/firebase.js

@@ -1,5 +1,5 @@
-import Firebase from './firebase';
+import SingletonFactory from './firebase';
 import FirebaseContext, { withFirebase } from './context';
 
-export default Firebase;
+export default SingletonFactory;
 export { FirebaseContext, withFirebase };

meetsy/src/components/Firebase/index.js

@@ -8,15 +8,17 @@ class Home extends Component {
   constructor(props){
     super(props);
   }
+ 
   render() {
+
     return (
       <div>
       <h1>Welcome back, {this.props.firebase.authUser.username}</h1>
       <p>The Home Page is accessible by every signed in user.</p>
+     
     </div>
     )
   }
 }
-
 const condition = authUser => !!authUser;
 export default compose (withFirebase, withAuthorization(condition))(Home);

meetsy/src/components/Home/index.js

@@ -13,9 +13,10 @@ import ScreenShareIcon from '@material-ui/icons/ScreenShare'
 import StopScreenShareIcon from '@material-ui/icons/StopScreenShare'
 import CallEndIcon from '@material-ui/icons/CallEnd'
 import ChatIcon from '@material-ui/icons/Chat'
-
+import { withFirebase } from '../Firebase';
 import { message } from 'antd'
 import 'antd/dist/antd.css'
+import {compose} from 'recompose';
 
 import { Row } from 'simple-flexbox'
 import Modal from 'react-bootstrap/Modal'
@@ -54,7 +55,9 @@ class Meet extends Component {
 			message: "",
 			newmessages: 0,
 			askForUsername: true,
-			username: faker.internet.userName(),
+			username: this.props.firebase.authUser.username,
+			userId: this.props.firebase.authUser.userId
+		
 		}
 		connections = {}
 
@@ -278,13 +281,18 @@ class Meet extends Component {
 		socket.on("connect_error", (err) => {
 			console.log(`connect_error due to ${err.message}`);
 		});
+		
 		socket.on('signal', this.gotMessageFromServer)
 
 		socket.on('connect', () => {
 			console.log('S-a realizat conexiunea!')
-			socket.emit('join-call', window.location.href)
+			console.log("Id: ", this.state.userId);
+			socket.emit('join-call', window.location.href, this.state.userId)
 			socketId = socket.id
 
+			socket.on("already-in-call-error", () => {
+				 window.location.href = ROUTES.CALLERROR;
+			})
 			socket.on('chat-message', this.addMessage)
 
 			socket.on('user-left', (id) => {
@@ -299,7 +307,6 @@ class Meet extends Component {
 			})
 
 			socket.on('user-joined', (id, clients) => {
-				console.log('User-ul a intrat!')
 				clients.forEach((socketListId) => {
 					connections[socketListId] = new RTCPeerConnection(peerConnectionConfig)
 					// Wait for their ice candidate       
@@ -324,7 +331,7 @@ class Meet extends Component {
 
 							let css = {
 								minWidth: cssMesure.minWidth, minHeight: cssMesure.minHeight, maxHeight: "100%", margin: "10px",
-								borderStyle: "solid", borderRadius: "25px", objectFit: "cover"
+								borderStyle: "solid", borderRadius: "15px", objectFit: "cover"
 							}
 							for (let i in css) video.style[i] = css[i]
 
@@ -484,7 +491,7 @@ class Meet extends Component {
 
 						<div style={{ justifyContent: "center", textAlign: "center", paddingTop: "40px" }}>
 							<video id="my-video" ref={this.localVideoref} autoPlay muted style={{
-								borderStyle: "solid", borderColor: "#bdbdbd", objectFit: "fill", width: "60%", height: "30%"
+								borderStyle: "solid", borderRadius: "15px", borderColor: "#bdbdbd", objectFit: "fill", width: "60%", height: "30%"
 							}}></video>
 						</div>
 					</div>
@@ -549,7 +556,7 @@ class Meet extends Component {
 
 							<Row id="main" className="flex-container" style={{ margin: 0, padding: 0 }}>
 								<video id="my-video" ref={this.localVideoref} autoPlay muted style={{
-									borderStyle: "solid", borderRadius: "25px", margin: "10px", objectFit: "cover",
+									borderStyle: "solid", borderRadius: "15px", margin: "10px", objectFit: "cover",
 									width: "100%", height: "100%"
 								}}></video>
 								{/*
@@ -574,4 +581,4 @@ class Meet extends Component {
 }
 
 const condition = authUser => !!authUser;
-export default withAuthorization(condition)(Meet);
+export default compose(withFirebase, withAuthorization(condition))(Meet);

meetsy/src/components/Meet/MeetItem

@@ -4,21 +4,24 @@ body {
 p{
     color: black;
 }
+canvas {
+    background-color: blue !important;
+}
 
 .flex-container {
-    height: calc(100% - 150px);
+    height:calc(100vh - 300px);
     width: 100%;
     /* margin: 0 auto; */
     display: flex;
     flex-direction: row;
     align-items: center;
+    flex-wrap: wrap !important;
     justify-content: center;
 }
 
 .container {
-    height: 60vh;
-    width: 60vw;
-    max-width: 60vw;
+    height: 100%;
+    width: 100%;
     max-height: 60vh;
 
     align-items: center;