From 16a97e59e957e1b8607a05d891fe28ea499f1b3e Mon Sep 17 00:00:00 2001 From: Mary Jo Staebler Date: Thu, 22 Oct 2020 16:07:25 -0700 Subject: [PATCH 1/3] Adding username for video tiles --- client/index.html | 17 ++++++++++++++++- client/room.html | 3 ++- 2 files changed, 18 insertions(+), 2 deletions(-) diff --git a/client/index.html b/client/index.html index c9c47cb..bf3e421 100644 --- a/client/index.html +++ b/client/index.html @@ -11,6 +11,10 @@
+
+ + +
@@ -22,9 +26,20 @@ document.getElementById('enter').addEventListener('submit', event => { event.preventDefault() const room = document.getElementById('room').value + let username = document.getElementById('username').value + if (!username) return alert('Please provide a username') + if (username.indexOf('&') > 0 || username.indexOf('<') > 0 || username.indexOf('>') > 0 ) return alert('Please provide an username without special characters') if (!room) return alert('Please provide a room code') - window.location.replace(`/room?id=${room}`) + username = sanitizeHTML(username) + window.location.replace(`/room?id=${room}&username=${username}`) }) + + function sanitizeHTML(text) { + var element = document.createElement('div'); + element.innerText = text; + return element.innerHTML; + } + diff --git a/client/room.html b/client/room.html index 08da4c6..e4390bd 100644 --- a/client/room.html +++ b/client/room.html @@ -29,6 +29,7 @@

Subscribers

+ + diff --git a/client/room.html b/client/room.html index fa8a86b..0e7f309 100644 --- a/client/room.html +++ b/client/room.html @@ -9,6 +9,12 @@
+

Publishers

@@ -33,11 +39,19 @@

Subscribers

camera, subscribers = [] const username = params.username; - fetch(`/api/session?room=${params.id}`) + const buttonLock = document.getElementById("lock-button") + let roomLocked = false; + fetch(`/api/session?room=${params.id}&code=${params.code}`) .then(r => r.json()) - .then(({ apiKey, sessionId, token }) => { + .then(({ apiKey, sessionId, token, locked, access }) => { + + if(!access){ + window.location.replace(`/access-required?id=${params.id}&username=${username}`) + } session = OT.initSession(apiKey, sessionId) camera = OT.initPublisher('publishers', { mirror: false, name:username }) + roomLocked = locked + setLock(roomLocked,(params.code ? params.code : "")) session.connect(token, () => { session.publish(camera) }) @@ -64,6 +78,10 @@

Subscribers

li.appendChild(divMessage) messages.appendChild(li) break + case 'signal:lock': + const lockData = JSON.parse(event.data) + setLock(lockData.lock,lockData.code) + break } }) }) @@ -79,6 +97,29 @@

Subscribers

input.value = '' } }) + document.getElementById('lock-room').addEventListener('submit', event => { + event.preventDefault() + console.log('lock button clicked') + const accessCode = document.getElementById('access-code').value; + fetch(`/api/session?room=${params.id}&lock=${!roomLocked}&code=${accessCode}`) + .then(r => r.json()) + .then(({ apiKey, sessionId, token, locked }) => { + roomLocked = locked + session.signal({ + data: JSON.stringify({lock:locked,code:accessCode }), + type:'lock' + }) + setLock(roomLocked,accessCode) + }) + }) + + function setLock(locked, code) { + const inputAccessCode = document.getElementById('access-code') + inputAccessCode.value = code + inputAccessCode.disabled = locked + buttonLock.innerText = locked ? "Room Locked" : "Lock Room" + buttonLock.className = locked ? "lock-button locked" : "lock-button unlocked" + } diff --git a/client/style.css b/client/style.css index 994cc16..6bc5e8e 100644 --- a/client/style.css +++ b/client/style.css @@ -105,6 +105,11 @@ main h2 { border-radius: 1rem; } +nav { + display: flex; + justify-content: flex-end; +} + /* CHAT */ #chat { diff --git a/functions/session.js b/functions/session.js index 4362b6e..a4e8581 100644 --- a/functions/session.js +++ b/functions/session.js @@ -9,18 +9,56 @@ exports.handler = async event => { const sessions = client.db('bat').collection('sessions') let session = await sessions.findOne({ friendly: event.queryStringParameters.room }) + if(event.queryStringParameters.accesscode){ + return { + statusCode: 200, + body: JSON.stringify({ + access: session.code === event.queryStringParameters.accesscode + }) + } + } + + if(event.queryStringParameters.lock){ + const isLockRoom = event.queryStringParameters.lock === 'true'; + + if(isLockRoom && !event.queryStringParameters.code){ + + return { statusCode: 500, body: String("Provide Access Code") } + } + + const updateResponse = await sessions.updateOne({ friendly: event.queryStringParameters.room }, + {$set:{locked:isLockRoom, code:event.queryStringParameters.code}}) + + if(updateResponse.matchedCount === 0) + { + return { statusCode: 404, body: String(updateResponse) } + } + session = await sessions.findOne({ friendly: event.queryStringParameters.room }) + return { + statusCode: 200, + body: JSON.stringify({ + sessionId: session.sessionId, + locked: session.locked, + code: session.code + }) + } + } + if (!session) { - const newSession = { sessionId: await createSession(), friendly: event.queryStringParameters.room } + const newSession = { sessionId: await createSession(), friendly: event.queryStringParameters.room, locked: false } await sessions.insertOne(newSession) session = newSession } + const access = !session.locked || (event.queryStringParameters.code === session.code); return { statusCode: 200, body: JSON.stringify({ sessionId: session.sessionId, apiKey: process.env.VIDEO_KEY, - token: OT.generateToken(session.sessionId, { role: 'publisher' }) + token: OT.generateToken(session.sessionId, { role: 'publisher' }), + locked: session.locked, + access: access }) } } catch (err) {