From 1d379ff3d0745c5231ab54e4ca4978f476d6aad7 Mon Sep 17 00:00:00 2001 From: netpro2k <netpro2k@gmail.com> Date: Tue, 14 Nov 2017 14:05:08 -0800 Subject: [PATCH] Add hardcoded public rooms and ability to create private rooms from lobby --- src/index.js | 11 +++++++--- src/lobby.css | 12 ++++++++++- src/lobby.js | 57 +++++++++++++++++++++++++++++---------------------- 3 files changed, 52 insertions(+), 28 deletions(-) diff --git a/src/index.js b/src/index.js index 527a32cab..e7c77842e 100644 --- a/src/index.js +++ b/src/index.js @@ -21,6 +21,7 @@ import "./systems/personal-space-bubble"; import registerNetworkScheams from "./network-schemas"; import registerInputMappings from "./input-mappings"; import { promptForName } from "./utils"; +import Config from "./config"; registerNetworkScheams(); registerInputMappings(); @@ -29,9 +30,13 @@ window.onSceneLoad = function() { const qs = queryString.parse(location.search); const scene = document.querySelector("a-scene"); - if (qs.room && !isNaN(parseInt(qs.room))) { - scene.setAttribute("networked-scene", "room", parseInt(qs.room)); - } + scene.setAttribute("networked-scene", { + room: + qs.room && !isNaN(parseInt(qs.room)) + ? parseInt(qs.room) + : Config.default_room, + serverUrl: Config.janus_url + }); if (!qs.stats || !/off|false|0/.test(qs.stats)) { scene.setAttribute("stats", true); diff --git a/src/lobby.css b/src/lobby.css index a6db36dd7..ffb15cf97 100644 --- a/src/lobby.css +++ b/src/lobby.css @@ -5,7 +5,7 @@ body { margin: 0; padding: 0; - background: black url(https://cdn.glitch.com/52bf1803-98d8-450b-83f4-f74024eb22e5%2Fwallpaper_HD_firefox.jpg?1510615261238) no-repeat right center; + background: black url(https://cdn.glitch.com/52bf1803-98d8-450b-83f4-f74024eb22e5%2Fwallpaper_HD_firefox.jpg?1510615261238) no-repeat left center; background-size: auto 100%; } @@ -20,6 +20,16 @@ body { .panel { height: 100%; + display: flex; +} + +.scroll { + flex: 1; + overflow-y: auto; +} + +.mdl-list { + margin: 0; } .room-item { diff --git a/src/lobby.js b/src/lobby.js index af7ab5791..e4bb869b0 100644 --- a/src/lobby.js +++ b/src/lobby.js @@ -2,9 +2,9 @@ import React from "react"; import ReactDOM from "react-dom"; import mj from "minijanus"; -import "./lobby.css"; +import Config from "./config"; -const SERVER_URL = "wss://quander.me:8989"; +import "./lobby.css"; class Lobby extends React.Component { constructor() { @@ -17,7 +17,7 @@ class Lobby extends React.Component { } componentDidMount() { - this.ws = new WebSocket(SERVER_URL, "janus-protocol"); + this.ws = new WebSocket(Config.janus_server_url, "janus-protocol"); this.session = new mj.JanusSession(this.ws.send.bind(this.ws)); this.ws.addEventListener("open", this.onWebsocketOpen); this.ws.addEventListener("message", this.onWebsocketMessage); @@ -46,27 +46,20 @@ class Lobby extends React.Component { } fetchRooms() { - return this.handle - .sendMessage({ - kind: "listrooms" - }) - .then(signal => { - const roomIds = signal.plugindata.data.response.room_ids; - return Promise.all( - roomIds.map(room_id => { - return this.handle - .sendMessage({ - kind: "listusers", - room_id - }) - .then(signal => ({ - id: room_id, - limit: 12, - users: signal.plugindata.data.response.user_ids - })); + return Promise.all( + Config.public_rooms.map(room_id => { + return this.handle + .sendMessage({ + kind: "listusers", + room_id }) - ); - }); + .then(signal => ({ + id: room_id, + limit: 12, + users: signal.plugindata.data.response.user_ids + })); + }) + ); } onWebsocketMessage(event) { @@ -87,6 +80,14 @@ const goToRoom = roomId => { window.open(`room.html?room=${roomId}`, "_blank"); }; +const goToNewRoom = () => { + const publicRooms = Config.public_rooms.length + 1; + const roomId = + publicRooms + + Math.floor(Math.random() * (Number.MAX_SAFE_INTEGER - publicRooms)); + goToRoom(roomId); +}; + const RoomListItem = ({ room }) => { return ( <li @@ -107,9 +108,17 @@ const RoomListItem = ({ room }) => { const RoomList = ({ rooms }) => { return ( <div className="mdl-card mdl-shadow--2dp panel"> - <ul className="demo-list-icon mdl-list"> + <ul className="mdl-list scroll"> {rooms.map(room => <RoomListItem key={room.id} room={room} />)} </ul> + <ul className="mdl-list"> + <li className="mdl-list__item room-item" onClick={goToNewRoom}> + <span className="mdl-list__item-primary-content"> + <i className="material-icons mdl-list__item-icon">add</i> + New Meeting Room + </span> + </li> + </ul> </div> ); }; -- GitLab