From 881e2157f28a2204ac6cdd206e02d6e1f64b9a1d Mon Sep 17 00:00:00 2001 From: MIRA MARIA STROIE Date: Sat, 12 Jun 2021 22:16:43 +0300 Subject: [PATCH] Fixed meeting bug and added singleton. --- meetsy/package-lock.json | 21 ++++++ meetsy/package.json | 2 + meetsy/src/components/App/index.js | 2 + meetsy/src/components/CallError/index.js | 53 ++++++++++++++ meetsy/src/components/Firebase/firebase.js | 18 ++++- meetsy/src/components/Firebase/index.js | 4 +- meetsy/src/components/Home/index.js | 4 +- meetsy/src/components/Meet/MeetItem | 0 meetsy/src/components/Meet/index.js | 23 +++--- meetsy/src/components/Meet/meet.css | 11 +-- meetsy/src/components/SignOut/index.js | 1 + meetsy/src/components/Team/TeamCollection.js | 75 ++++++++++++++------ meetsy/src/constants/designConstants.js | 3 +- meetsy/src/constants/routes.js | 1 + meetsy/src/index.css | 19 +++++ meetsy/src/index.js | 7 +- meetsy/src/server.js | 39 ++++++++-- 17 files changed, 232 insertions(+), 51 deletions(-) create mode 100644 meetsy/src/components/CallError/index.js delete mode 100644 meetsy/src/components/Meet/MeetItem diff --git a/meetsy/package-lock.json b/meetsy/package-lock.json index 6a66fab..6764225 100644 --- a/meetsy/package-lock.json +++ b/meetsy/package-lock.json @@ -7527,6 +7527,11 @@ "strip-eof": "^1.0.0" } }, + "exenv": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/exenv/-/exenv-1.2.2.tgz", + "integrity": "sha1-KueOhdmJQVhnCwPUe+wfA72Ru50=" + }, "exit": { "version": "0.1.2", "resolved": "https://registry.npmjs.org/exit/-/exit-0.1.2.tgz", @@ -15601,6 +15606,17 @@ } } }, + "react-modal": { + "version": "3.14.2", + "resolved": "https://registry.npmjs.org/react-modal/-/react-modal-3.14.2.tgz", + "integrity": "sha512-CYasEJanwneDsmvtx/fisXhgDxtt3I8jWTVX/tP9dM/J1NgDKU9lgjR9zuCCl33ub2jrTWhXyijCxCzYGN8sJg==", + "requires": { + "exenv": "^1.2.0", + "prop-types": "^15.7.2", + "react-lifecycles-compat": "^3.0.0", + "warning": "^4.0.3" + } + }, "react-overlays": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/react-overlays/-/react-overlays-5.0.1.tgz", @@ -15755,6 +15771,11 @@ "prop-types": "^15.6.2" } }, + "reactjs-popup": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/reactjs-popup/-/reactjs-popup-2.0.4.tgz", + "integrity": "sha512-G5jTXL2JkClKAYAdqedf+K9QvbNsFWvdbrXW1/vWiyanuCU/d7DtQzQux+uKOz2HeNVRsFQHvs7abs0Z7VLAhg==" + }, "read-pkg": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-2.0.0.tgz", diff --git a/meetsy/package.json b/meetsy/package.json index 6d9482e..75cd5fd 100644 --- a/meetsy/package.json +++ b/meetsy/package.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", diff --git a/meetsy/src/components/App/index.js b/meetsy/src/components/App/index.js index 831b42c..c473d3e 100644 --- a/meetsy/src/components/App/index.js +++ b/meetsy/src/components/App/index.js @@ -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 { + {/* */} diff --git a/meetsy/src/components/CallError/index.js b/meetsy/src/components/CallError/index.js new file mode 100644 index 0000000..6d3f445 --- /dev/null +++ b/meetsy/src/components/CallError/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 ( + +
+

Error 101 - Hey, you little troublemaker...

+

Seems like you are already in that call. Press the button below to return home. +

+ this.props.history.push(ROUTES.HOME)}>Home + + +
+ + ) + } +} + +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); \ No newline at end of file diff --git a/meetsy/src/components/Firebase/firebase.js b/meetsy/src/components/Firebase/firebase.js index 3e8773d..f277977 100644 --- a/meetsy/src/components/Firebase/firebase.js +++ b/meetsy/src/components/Firebase/firebase.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; \ No newline at end of file + var instance; + return { + getInstance: function(){ + if(!instance){ + instance = new Firebase(); + delete instance.constructor; + } + return instance; + } + } +})(); +export default SingletonFactory; \ No newline at end of file diff --git a/meetsy/src/components/Firebase/index.js b/meetsy/src/components/Firebase/index.js index 577d534..aa62f84 100644 --- a/meetsy/src/components/Firebase/index.js +++ b/meetsy/src/components/Firebase/index.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 }; \ No newline at end of file diff --git a/meetsy/src/components/Home/index.js b/meetsy/src/components/Home/index.js index 136792c..011cfa1 100644 --- a/meetsy/src/components/Home/index.js +++ b/meetsy/src/components/Home/index.js @@ -8,15 +8,17 @@ class Home extends Component { constructor(props){ super(props); } + render() { + return (

Welcome back, {this.props.firebase.authUser.username}

The Home Page is accessible by every signed in user.

+
) } } - const condition = authUser => !!authUser; export default compose (withFirebase, withAuthorization(condition))(Home); \ No newline at end of file diff --git a/meetsy/src/components/Meet/MeetItem b/meetsy/src/components/Meet/MeetItem deleted file mode 100644 index e69de29..0000000 diff --git a/meetsy/src/components/Meet/index.js b/meetsy/src/components/Meet/index.js index 9fea3c1..20b564c 100644 --- a/meetsy/src/components/Meet/index.js +++ b/meetsy/src/components/Meet/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 {
@@ -549,7 +556,7 @@ class Meet extends Component { {/* @@ -574,4 +581,4 @@ class Meet extends Component { } const condition = authUser => !!authUser; -export default withAuthorization(condition)(Meet); \ No newline at end of file +export default compose(withFirebase, withAuthorization(condition))(Meet); \ No newline at end of file diff --git a/meetsy/src/components/Meet/meet.css b/meetsy/src/components/Meet/meet.css index 9846704..95b6022 100644 --- a/meetsy/src/components/Meet/meet.css +++ b/meetsy/src/components/Meet/meet.css @@ -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; diff --git a/meetsy/src/components/SignOut/index.js b/meetsy/src/components/SignOut/index.js index 5c690b6..c90e1e9 100644 --- a/meetsy/src/components/SignOut/index.js +++ b/meetsy/src/components/SignOut/index.js @@ -5,6 +5,7 @@ import { withFirebase } from '../Firebase'; import { Link } from 'react-router-dom'; import * as ROUTES from '../../constants/routes'; import IconSignOut from '../../assets/icon-sign-out.js'; +import Modal from 'react-modal'; const icon = { height: '23px', diff --git a/meetsy/src/components/Team/TeamCollection.js b/meetsy/src/components/Team/TeamCollection.js index 39e9e59..bd28380 100644 --- a/meetsy/src/components/Team/TeamCollection.js +++ b/meetsy/src/components/Team/TeamCollection.js @@ -7,6 +7,9 @@ import TeamItem from './TeamItem'; import Grid from "@material-ui/core/Grid"; import styled from 'styled-components'; import { COLORS } from '../../constants/designConstants'; +import ReactModal from 'react-modal'; +import Modal from 'react-modal'; +import Popup from 'reactjs-popup'; class TeamCollection extends Component { constructor(props) { @@ -21,7 +24,8 @@ class TeamCollection extends Component { name: '', loading: false, teams: [], - description: '' + description: '', + modalIsOpen: false }; } // este chemata imediata ce componenta este mounted (este adaugata in DOM) @@ -61,7 +65,7 @@ class TeamCollection extends Component { // apelam metoda asta ca sa incetam sa ascultam schimbarile colectiei din bd this.unsubscribe(); } - + /// ATENTIE! Trebuie sa actualizam valoarea inputului onChangeText = event => { this.setState({ name: event.target.value }); @@ -96,6 +100,10 @@ class TeamCollection extends Component { }); }; + /// FOR MODAL + openModal = () => { this.setState({modalIsOpen: true});} + + closeModal = () => { this.setState({modalIsOpen: false}); } render() { const { name, teams, loading, description } = this.state; @@ -127,26 +135,46 @@ class TeamCollection extends Component { {/*onCreateTeam trebuie sa primeasca si event ca sa putem preveni actiunea default a submisiei */} -
- this.onCreateTeam(event, authUser) - } - > -

Create a new course

- - - Create Team - + + + {/* Open Modal } + modal + > + {close => ( */} +
+ this.onCreateTeam(event, authUser) + } + > +

Create a new course

+ + + Create Team + + {/* */} + + {/* )} +
*/} + )} ); @@ -210,6 +238,7 @@ const StyledTextArea = styled.textarea` // border: 3px solid rgb(62,106,225,0.7); } `; + const form = { marginTop: '10%', marginRight: 'auto !important', @@ -221,7 +250,7 @@ const form = { display: 'flex', borderRadius: '8px', minWidth: '300px', - maxWidth: '500px', + maxWidth: '600px', flexDirection: 'column', alignContent: 'center', justifyContent: 'right', diff --git a/meetsy/src/constants/designConstants.js b/meetsy/src/constants/designConstants.js index 8ca47fe..7960f22 100644 --- a/meetsy/src/constants/designConstants.js +++ b/meetsy/src/constants/designConstants.js @@ -5,5 +5,6 @@ export const COLORS = { bodyLight: '#f4f4f4', primaryBlue: '#3e6ae1', primaryBg: '#131516', - inputGrey: '#393c41' + inputGrey: '#393c41', + errorRed: '#b74134' } diff --git a/meetsy/src/constants/routes.js b/meetsy/src/constants/routes.js index 745712a..300f8d9 100644 --- a/meetsy/src/constants/routes.js +++ b/meetsy/src/constants/routes.js @@ -13,3 +13,4 @@ export const USER_DETAILS = '/users/:id'; export const TEAMS = '/teams'; export const SHOW_TEAMS = '/team'; export const TEAM = '/showteam'; +export const CALLERROR = '/joinerror'; diff --git a/meetsy/src/index.css b/meetsy/src/index.css index 8a072d8..5e81229 100644 --- a/meetsy/src/index.css +++ b/meetsy/src/index.css @@ -22,3 +22,22 @@ code { font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace; } + + +.modal-main { + position:fixed; + background: white; + width: 80%; + height: auto; + top:50%; + left:50%; + transform: translate(-50%,-50%); +} + +.display-block { + display: block; +} + +.display-none { + display: none; +} \ No newline at end of file diff --git a/meetsy/src/index.js b/meetsy/src/index.js index 8a4e4b9..d3920e4 100644 --- a/meetsy/src/index.js +++ b/meetsy/src/index.js @@ -4,10 +4,13 @@ import './index.css'; import App from './components/App'; import reportWebVitals from './reportWebVitals'; import * as serviceWorker from './serviceWorker'; -import Firebase, { FirebaseContext } from './components/Firebase'; +import { FirebaseContext } from './components/Firebase'; +import SingletonFactory from './components/Firebase'; -var firebase = new Firebase(); +var firebase = SingletonFactory.getInstance(); +var firebase2 = SingletonFactory.getInstance(); +console.log(firebase === firebase2); ReactDOM.render( diff --git a/meetsy/src/server.js b/meetsy/src/server.js index adbd5b9..2eadd57 100644 --- a/meetsy/src/server.js +++ b/meetsy/src/server.js @@ -9,7 +9,9 @@ var xss = require("xss") var server = http.createServer(app) var io = require('socket.io')(server) -app.use(cors()) +app.use(cors({ + origin: '*' + })) app.use(bodyParser.json()) if (process.env.NODE_ENV === 'production') { @@ -27,10 +29,26 @@ sanitizeString = (str) => { connections = {} messages = {} timeOnline = {} +participants = {} io.on('connection', (socket) => { - - socket.on('join-call', (path) => { + console.log("conn"); + socket.on('join-call', (path, userId) => { + + console.log("Id-ul este: ", userId); + console.log("Participanti:", participants); + // vendors.filter(function(e) { return e.Name === 'Magenic'; }).length > 0 + if(participants[path] && participants[path].filter(function(el) { return el.id === userId}).length > 0) + io.to(socket.id).emit("already-in-call-error"); + else + { + console.log({id : userId, sockid : socket.id}) + if(participants[path]) + participants[path].push({id : userId, sockid : socket.id}); + else + participants[path] = [{id : userId, sockid : socket.id}]; + + console.log(participants); if (connections[path] === undefined) { connections[path] = [] } @@ -39,7 +57,7 @@ io.on('connection', (socket) => { timeOnline[socket.id] = new Date() for (let a = 0; a < connections[path].length; ++a) { - io.to(connections[path][a]).emit("user-joined", socket.id, connections[path]) + io.to(connections[path][a]).emit("user-joined", socket.id, connections[path], userId) } if (messages[path] !== undefined) { @@ -48,8 +66,8 @@ io.on('connection', (socket) => { messages[path][a]['sender'], messages[path][a]['socket-id-sender']) } } - console.log(path, connections[path]) + } }) socket.on('signal', (toId, message) => { @@ -86,12 +104,14 @@ io.on('connection', (socket) => { socket.on('disconnect', () => { var diffTime = Math.abs(timeOnline[socket.id] - new Date()) + var key for (const [k, v] of JSON.parse(JSON.stringify(Object.entries(connections)))) { for (let a = 0; a < v.length; ++a) { if (v[a] === socket.id) { key = k - + + for (let a = 0; a < connections[key].length; ++a) { io.to(connections[key][a]).emit("user-left", socket.id) } @@ -99,10 +119,15 @@ io.on('connection', (socket) => { var index = connections[key].indexOf(socket.id) connections[key].splice(index, 1) + participants[key] = participants[key].filter(function(el) { return el.sockid !== socket.id}) + console.log("Noi participanti:", participants); console.log(key, socket.id, Math.ceil(diffTime / 1000)) + if(participants[key].length == 0){ + delete participants[key]; + } if (connections[key].length === 0) { - delete connections[key] + delete connections[key]; } } }