diff --git a/src/index.js b/src/index.js index 527a32cab42613b67f14ef87751120fd4cffb227..e7c77842e2eaffe5416bbfade6a2d621bb08553f 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 a6db36dd79089a3352490a0f67ba012be53568b3..ffb15cf974b8ac78c222495ae57beaee6f8ee4c0 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 af7ab57917d1de9780539ac95c6fd2e24d9593d2..e4bb869b0e3ebe2dbe2c2193064263ace3797fef 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> ); };