Merge pull request #21 from MaryJoStaebler/main

Three Features: Lock Room, Add Name to Video Card, and Add Name to Chat Message
nexmo-community · Oct 23, 2020 · ec84731 · ec84731
2 parents 00aef3f + 1d683bc
commit ec84731
Show file tree

Hide file tree

Showing 5 changed files with 169 additions and 9 deletions.
diff --git a/client/access-required.html b/client/access-required.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Build a Thing Video App</title>
+    <link rel="stylesheet" href="style.css" />
+  </head>
+
+  <body>
+    <main id="access-screen">
+        <div id="alert-message"></div>
+        <form id="access-form">
+          <h1>Provide Access Code</h1>
+          <input type="text" id="access-code" placeholder="Access Code" />
+          <button>Submit</button>
+        </form>
+    </main>
+
+    <script>
+      const params = Object.fromEntries(new URLSearchParams(location.search))
+      const room = params.id
+      const username = params.username
+
+      document.getElementById('access-form').addEventListener('submit', event => {
+        event.preventDefault()
+        const accessCode = document.getElementById('access-code').value;
+        document.getElementById("alert-message").innerText="Checking Code..."
+        fetch(`/api/session?room=${params.id}&accesscode=${accessCode}`)
+          .then(r => r.json())
+          .then(({ access }) => {
+
+            if(access){
+              window.location.replace(`/room?id=${room}&username=${username}&code=${accessCode}`)
+              return
+            }
+
+            document.getElementById("alert-message").innerText="Access Denied"
+
+          })
+      })
+    </script>
+  </body>
+</html>
diff --git a/client/index.html b/client/index.html
@@ -11,6 +11,10 @@
 <body class="flex__center">
   <div class="wrapper flex__center">
     <form id="enter">
+      <div class="input-group">
+        <label for="username">Username</label>
+        <input type="text" id="username" />
+      </div>
       <div class="input-group">
         <label for="room">Room Code</label>
         <input type="text" id="room" />
@@ -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;
+    }
+
   </script>
 </body>
 

diff --git a/client/room.html b/client/room.html
@@ -9,6 +9,12 @@
 
   <body>
     <main id="videos">
+      <nav>
+        <form id="lock-room">
+          <input type="text" id="access-code" placeholder="Access Code" />
+          <button id="lock-button" class="lock-button unlocked">Lock Room</button>
+        </form>
+      </nav>
       <section class="video-streams video-streams__publishers">
         <h2>Publishers</h2>
         <div id="publishers"></div>
@@ -32,11 +38,20 @@ <h2>Subscribers</h2>
       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 @@ <h2>Subscribers</h2>
               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 @@ <h2>Subscribers</h2>
         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"
+      }
     </script>
   </body>
 </html>
diff --git 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
@@ -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) {