From fb0ee2041cc383706fab9dd0552fc2622e38f437 Mon Sep 17 00:00:00 2001 From: Morgane Ciot Date: Fri, 17 Apr 2020 14:45:18 -0400 Subject: [PATCH] basic prototype --- app/index.html | 1 - app/jsx/Navigation.jsx | 19 ++++++++-------- app/jsx/Room.jsx | 51 +++++++++++++++++++++++++++++++----------- app/jsx/Vestibule.jsx | 49 ---------------------------------------- app/jsx/Welcome.jsx | 50 +++++++++++++++++++++++++++++++++++++++++ app/jsx/directions.jsx | 20 +++++++++++++++++ app/jsx/reducers.jsx | 15 +++++++++++-- app/jsx/routes.jsx | 7 +++--- app/styles/styles.css | 19 ++++++++++++++++ 9 files changed, 154 insertions(+), 77 deletions(-) delete mode 100644 app/jsx/Vestibule.jsx create mode 100644 app/jsx/Welcome.jsx create mode 100644 app/jsx/directions.jsx diff --git a/app/index.html b/app/index.html index 44dff3a56..28270c607 100644 --- a/app/index.html +++ b/app/index.html @@ -6,7 +6,6 @@ Jitsi Party
-

Welcome have fun

diff --git a/app/jsx/Navigation.jsx b/app/jsx/Navigation.jsx index cd31a6dcc..43e05b0a0 100644 --- a/app/jsx/Navigation.jsx +++ b/app/jsx/Navigation.jsx @@ -1,5 +1,4 @@ import React, { Component } from 'react' -import { Link } from 'react-router-dom' import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' import { faArrowUp, faArrowDown, faArrowLeft, faArrowRight } from '@fortawesome/free-solid-svg-icons' @@ -9,28 +8,30 @@ export default class Navigation extends Component { } render() { + const onClick = this.props.onClick + const { north, south, east, west } = this.props.directions return (
-
- -
-
diff --git a/app/jsx/Room.jsx b/app/jsx/Room.jsx index 9448e0d26..51aec3356 100644 --- a/app/jsx/Room.jsx +++ b/app/jsx/Room.jsx @@ -1,23 +1,40 @@ import React, { Component } from 'react' import { Link } from 'react-router-dom' +import { connect } from 'react-redux' +import reducers from './reducers.jsx' import Navigation from './Navigation.jsx' import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' import { faSpinner } from '@fortawesome/free-solid-svg-icons' +import directions from './directions.jsx' -export default class Room extends Component { +class Room extends Component { constructor(props) { super(props) this.state = { + room: this.props.currentRoom, hasLoaded: false } } - async componentDidMount() { + componentDidMount() { + this.connectToRoom(this.state.room) + } + + componentWillUnmount() { + if (this.api) { + this.api.dispose() + } + } + + connectToRoom(room) { + if (this.api) { + this.api.dispose() + } // TODO need to disable the ability to hang up I think try { const domain = 'meet.jit.si' const options = { - roomName: this.props.roomName, + roomName: room, height: 800, parentNode: document.getElementById('jitsi-container'), interfaceConfigOverwrite: { @@ -28,16 +45,22 @@ export default class Room extends Component { disableSimulcast: false } } - const api = new window.JitsiMeetExternalAPI(domain, options) + this.api = new window.JitsiMeetExternalAPI(domain, options) this.setState({ hasLoaded: true }) - api.addEventListener('videoConferenceJoined', () => { - api.executeCommand('displayName', this.props.displayName) + this.api.addEventListener('videoConferenceJoined', () => { + this.api.executeCommand('displayName', this.props.displayName) }) } catch (err) { console.log('failed:', err) } } + onSwitchRoom(room) { + this.setState({ room }) + this.props.updateCurrentRoom(room) + this.connectToRoom(room) + } + getLoadingSpinner() { if (!this.state.hasLoaded) { return @@ -45,19 +68,21 @@ export default class Room extends Component { } render() { - const directions = { - north: 'The Room of Disquiet', - east: 'Literally hell', - west: 'Bathroom' - } + console.log(directions[this.state.room]) return (
+

{this.state.room}

{this.getLoadingSpinner()}
- {this.props.roomName} + Map -
) } } + +export default connect( + state => state, + { + updateCurrentRoom: reducers.updateCurrentRoomActionCreator + })(Room) diff --git a/app/jsx/Vestibule.jsx b/app/jsx/Vestibule.jsx deleted file mode 100644 index 00adb4fe9..000000000 --- a/app/jsx/Vestibule.jsx +++ /dev/null @@ -1,49 +0,0 @@ -import _ from 'lodash' -import React, { Component } from 'react' -import { connect } from 'react-redux' -import reducers from './reducers.jsx' -import Room from './Room.jsx' -import { Link } from 'react-router-dom' - -class Vestibule extends Component { - constructor(props) { - super(props) - this.state = { - displayName: this.props.displayName, - avatar: this.props.vatar, - isReady: !!(this.props.displayName) - } - } - - handleDisplayNameChange(event) { - this.setState({ displayName: event.target.value }) - this.props.updateDisplayName(event.target.value) - } - - handleReady() { - this.setState({ isReady: true }) - } - - getContent() { - if (this.state.isReady) { - return - } - return ( -
- - -
- ) - } - - render() { - return ( -
- About - {this.getContent()} -
- ) - } -} - -export default connect(state => state, { updateDisplayName: reducers.updateDisplayNameActionCreator })(Vestibule) diff --git a/app/jsx/Welcome.jsx b/app/jsx/Welcome.jsx new file mode 100644 index 000000000..5fc44efd3 --- /dev/null +++ b/app/jsx/Welcome.jsx @@ -0,0 +1,50 @@ +import _ from 'lodash' +import React, { Component } from 'react' +import { connect } from 'react-redux' +import reducers from './reducers.jsx' +import { Link, Redirect } from 'react-router-dom' + +class Welcome extends Component { + constructor(props) { + super(props) + this.state = { + displayName: this.props.displayName, + avatar: this.props.avatar, + redirect: null + } + } + + handleDisplayNameChange(event) { + this.setState({ displayName: event.target.value }) + } + + handleReady() { + // TODO make sure don't submit empty name + this.props.updateDisplayName(this.state.displayName) + this.props.updateCurrentRoom('Vestibule') + this.setState({ redirect: '/party' }) + } + + render() { + if (this.state.redirect) { + return + } + return ( +
+

Welcome have fun

+
+ + +
+ About +
+ ) + } +} + +export default connect( + state => state, + { + updateDisplayName: reducers.updateDisplayNameActionCreator, + updateCurrentRoom: reducers.updateCurrentRoomActionCreator + })(Welcome) diff --git a/app/jsx/directions.jsx b/app/jsx/directions.jsx new file mode 100644 index 000000000..6de985cf6 --- /dev/null +++ b/app/jsx/directions.jsx @@ -0,0 +1,20 @@ +export default { + 'Vestibule': { + north: 'Literally Hell', + west: 'Bathroom', + east: 'Room of Disquiet' + }, + 'Literally Hell': { + north: 'Sexy Room', + south: 'Vestibule' + }, + 'Bathroom': { + east: 'Vestibule' + }, + 'Room of Disquiet': { + west: 'Vestibule' + }, + 'Sexy Room': { + south: 'Literally Hell' + } +} diff --git a/app/jsx/reducers.jsx b/app/jsx/reducers.jsx index 90add327c..d5e20658f 100644 --- a/app/jsx/reducers.jsx +++ b/app/jsx/reducers.jsx @@ -1,14 +1,20 @@ import { handleActions } from 'redux-actions' const UPDATE_DISPLAY_NAME = 'UPDATE_DISPLAY_NAME' +const UPDATE_CURRENT_ROOM = 'UPDATE_CURRENT_ROOM' const initialState = { displayName: '', - avatar: '' + avatar: '', + currentRoom: '' } function updateDisplayNameAction(state, displayName) { - return Object.assign({}, state, { displayName }) + return Object.assign({}, state, displayName) +} + +function updateCurrentRoomAction(state, currentRoom) { + return Object.assign({}, state, currentRoom) } export default { @@ -17,8 +23,13 @@ export default { type: UPDATE_DISPLAY_NAME, displayName }), + updateCurrentRoomActionCreator: currentRoom => ({ + type: UPDATE_CURRENT_ROOM, + currentRoom + }), /* Reducers */ reducer: handleActions({ [UPDATE_DISPLAY_NAME]: updateDisplayNameAction, + [UPDATE_CURRENT_ROOM]: updateCurrentRoomAction, }, initialState) } diff --git a/app/jsx/routes.jsx b/app/jsx/routes.jsx index c04ffaf6e..72b54ffc4 100644 --- a/app/jsx/routes.jsx +++ b/app/jsx/routes.jsx @@ -1,15 +1,16 @@ import React from 'react' import { Router, Route } from 'react-router' import { createBrowserHistory } from 'history' -import Vestibule from './Vestibule.jsx' +import Welcome from './Welcome.jsx' import About from './About.jsx' import Map from './Map.jsx' +import Room from './Room.jsx' export default ( - + - + ) diff --git a/app/styles/styles.css b/app/styles/styles.css index 45fd972d7..addb2f5ce 100644 --- a/app/styles/styles.css +++ b/app/styles/styles.css @@ -5,6 +5,25 @@ body { color: #ea03c3; text-align: center; } +.vestibule { + display: flex; + flex-direction: column; + text-align: center; +} +.vestibule .display-name { + margin-top: 50px; +} +.vestibule .display-name input[type=text] { + width: 30%; + height: 30px; + font-size: 25px; +} +.vestibule .display-name input[type=button] { + margin-left: 10px; +} +.vestibule a { + margin-top: 50px; +} .about { color: #fff; }