Lock Room Feature

nexmo-community · Oct 23, 2020 · 1d683bc · 1d683bc
1 parent b5e83c6
commit 1d683bc
Show file tree

Hide file tree

Showing 4 changed files with 132 additions and 4 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/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>
@@ -33,11 +39,19 @@ <h2>Subscribers</h2>
         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 @@ <h2>Subscribers</h2>
                 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 @@ <h2>Subscribers</h2>
           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 {

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) {