diff --git a/client/access-required.html b/client/access-required.html new file mode 100644 index 0000000..3fa7160 --- /dev/null +++ b/client/access-required.html @@ -0,0 +1,44 @@ + + + + + + Build a Thing Video App + + + + +
+
+
+

Provide Access Code

+ + +
+
+ + + + 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..0e7f309 100644 --- a/client/room.html +++ b/client/room.html @@ -9,6 +9,12 @@
+

Publishers

@@ -32,11 +38,20 @@

Subscribers

let session, camera, subscribers = [] - fetch(`/api/session?room=${params.id}`) + const username = params.username; + 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 }) + camera = OT.initPublisher('publishers', { mirror: false, name:username }) + roomLocked = locked + setLock(roomLocked,(params.code ? params.code : "")) session.connect(token, () => { session.publish(camera) }) @@ -54,10 +69,19 @@

Subscribers

case 'signal:message': const messages = document.getElementById('messages') const li = document.createElement('li') - const message = document.createTextNode(event.data) - li.appendChild(message) + const messageData = JSON.parse(event.data) + const labelUsername = document.createElement('label') + labelUsername.innerText = messageData.username; + li.appendChild(labelUsername) + const divMessage = document.createElement('div') + divMessage.innerText = messageData.message + li.appendChild(divMessage) messages.appendChild(li) break + case 'signal:lock': + const lockData = JSON.parse(event.data) + setLock(lockData.lock,lockData.code) + break } }) }) @@ -67,12 +91,35 @@

Subscribers

const input = document.getElementById('message') if (input.value) { session.signal({ - data: input.value, + data: JSON.stringify({username:username,message:input.value }), type: 'message' }) 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 006b783..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 { @@ -122,6 +127,17 @@ main h2 { background: white; padding: 0.5em; border-radius: 10px; + display:grid; + grid-template-columns: 100px 1fr; +} + +#messages li label { + font-size:0.9rem; + margin-bottom:0; + margin-right: 0.5rem; + text-overflow:ellipsis; + overflow:hidden; + white-space: nowrap; } @media all and (max-width: 750px) { diff --git a/functions/session.js b/functions/session.js index 87c07c0..c641bd2 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) {