Skip to content

Commit

Permalink
Moved frontend to use Tailwind CSS
Browse files Browse the repository at this point in the history
  • Loading branch information
Kevin Lewis committed Nov 6, 2020
1 parent f25f9e2 commit 2d9d5a4
Show file tree
Hide file tree
Showing 4 changed files with 77 additions and 221 deletions.
27 changes: 16 additions & 11 deletions client/access-required.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,18 +4,23 @@
<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" />
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
</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>
<body class="bg-gray-200">

<div class="w-full max-w-xs mx-auto mt-10">
<div id="alert-message"></div>
<form id="access-form" class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4">
<div class="mb-4">
<label class="block text-gray-700 text-sm font-bold mb-2" for="access-code">Access Code</label>
<input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="access-code" type="text">
</div>
<div class="flex items-center justify-between">
<button class="bg-pink-600 w-full text-white font-bold py-2 px-4 rounded">Enter Room</button>
</div>
</form>
</div>

<script>
const params = Object.fromEntries(new URLSearchParams(location.search))
Expand All @@ -36,7 +41,7 @@ <h1>Provide Access Code</h1>
}

document.getElementById("alert-message").innerText="Access Denied"

})
})
</script>
Expand Down
36 changes: 20 additions & 16 deletions client/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,30 +5,34 @@
<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">
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
</head>

<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" />
<body class="bg-gray-200">
<div class="w-full max-w-xs mx-auto mt-10">
<form id="enter" class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4">
<div class="mb-4">
<label class="block text-gray-700 text-sm font-bold mb-2" for="username">Username</label>
<input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="username" type="text" placeholder="Username">
</div>
<div class="input-group">
<label for="pronouns">Pronouns</label>
<input type="text" id="pronouns">
<div class="mb-4">
<label class="block text-gray-700 text-sm font-bold mb-2" for="pronouns">Pronouns</label>
<input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="pronouns" type="text" placeholder="Pronouns">
</div>
<div class="input-group">
<label for="room">Room Code</label>
<input type="text" id="room" />
<div class="mb-4">
<label class="block text-gray-700 text-sm font-bold mb-2" for="room">Room Code</label>
<input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="room" type="text" placeholder="Code">
</div>
<div class="flex items-center justify-between">
<button class="bg-pink-600 w-full text-white font-bold py-2 px-4 rounded">Enter Room</button>
</div>
<button>Enter Room</button>
</form>
<p class="text-center text-gray-500 text-xs">Built live on <a href="https://twitch.tv/vonagedevs">Twitch</a>. Code on <a href="https://github.com/nexmo-community/build-a-thing-video">GitHub</a>.</p>
</div>
<script>
document.getElementById('enter').addEventListener('submit', event => {
document.querySelector('form').addEventListener('submit', event => {
event.preventDefault()
console.log('Button pressed')
const room = document.getElementById('room').value
let username = document.getElementById('username').value
const pronouns = document.getElementById('pronouns').value
Expand All @@ -48,4 +52,4 @@
</script>
</body>

</html>
</html>
70 changes: 41 additions & 29 deletions client/room.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,39 +4,37 @@
<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" />
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
</head>

<body>
<div id="app">
<main id="videos">
<nav>
<form id="lock-room" @submit.prevent="lockRoom">
<input type="text" id="access-code" placeholder="Access Code" :disabled="roomLocked" v-model="inputAccessCode" />
<button id="lock-button" :class="{ 'lock-button': true, 'locked': roomLocked, 'unlocked': !roomLocked }">{{ roomLocked ? "Click to Unlock" : "Click to Lock" }}</button>
<header class="bg-pink-600 p-2 flex flex-row justify-center">
<div id="publishers"></div>
</header>
<main style="display: grid; grid-template-columns: auto 300px; gap: 2em;">
<div class="p-2">
<div id="subscribers" class="flex flex-row flex-wrap" style="gap: 8px;"></div>
</div>
<div class="bg-gray-100 p-2 flex flex-col" style="height: calc(100vh - 88px)">
<form class="border-b-2 border-gray-300 pb-2" @submit.prevent="lockRoom">
<input :class="{ 'bg-gray-300': roomLocked, 'bg-white': !roomLocked }" class="w-full shadow appearance-none rounded w-full py-2 px-3 text-gray-700 mb-3 leading-tight focus:outline-none focus:shadow-outline" type="text" id="access-code" placeholder="Access Code" :disabled="roomLocked" v-model="inputAccessCode" />
<button id="lock-button" :class="{ 'bg-red-500': roomLocked, 'hover:bg-red-700': roomLocked, 'bg-green-500': !roomLocked, 'hover:bg-green-700': !roomLocked, }" class="w-full text-white font-bold py-2 px-4 rounded">{{ roomLocked ? "Click to Unlock" : "Click to Lock" }}</button>
</form>
</nav>
<section class="video-streams video-streams__publishers">
<h2>Publishers</h2>
<div id="publishers"></div>
</section>
<section class="video-streams video-streams__subscribers">
<h2>Subscribers</h2>
<div id="subscribers"></div>
</section>
<div ref="messages" class="flex-1 overflow-y-scroll">
<ul>
<li v-for="item in messages" class="bg-white p-2 rounded break-all my-2">
<label class="text-sm mb-1">{{item.username}}</label>
<div>{{item.message}}</div>
</li>
</ul>
</div>
<form class="border-t-2 border-gray-300 pt-2" @submit.prevent="submitMessage">
<input class="bg-white w-full shadow appearance-none rounded w-full py-2 px-3 text-gray-700 mb-3 leading-tight focus:outline-none focus:shadow-outline" type="text" id="message" placeholder="New Message..." v-model="newMessage" />
<button class="bg-pink-600 w-full text-white font-bold py-2 px-4 rounded">Send</button>
</form>
</div>
</main>
<aside id="chat">
<ul id="messages">
<li v-for="item in messages">
<label>{{item.username}}</label>
<div>{{item.message}}</div>
</li>
</ul>
<form id="new-message" @submit.prevent="submitMessage">
<input type="text" id="message" placeholder="New Message..." v-model="newMessage" />
<button>Send</button>
</form>
</aside>
</div>

<script src="https://static.opentok.com/v2/js/opentok.min.js"></script>
Expand All @@ -59,7 +57,13 @@ <h2>Subscribers</h2>
const { apiKey, sessionId, token, locked, access } = this.resp
if(!access) window.location.replace(`/access-required?id=${this.params.id}&username=${this.params.username}`)

this.camera = OT.initPublisher('publishers', { mirror: false, name: this.params.username, insertMode: 'append' })
this.camera = OT.initPublisher('publishers', {
mirror: false,
name: this.params.username,
insertMode: 'append',
width: 128,
height: 72
})
this.roomLocked = locked
this.setLock(this.roomLocked,(this.params.code ? this.params.code : ""))

Expand All @@ -76,7 +80,11 @@ <h2>Subscribers</h2>
_subscribeStreamCreated() {
this.session.on('streamCreated', event => {
this.subscribers.push(event.stream)
this.session.subscribe(event.stream, 'subscribers', { insertMode: 'append' })
this.session.subscribe(event.stream, 'subscribers', {
insertMode: 'append',
width: 320,
height: 240
})
})
},
_subscribeStreamDestroyed() {
Expand All @@ -89,6 +97,10 @@ <h2>Subscribers</h2>
switch (event.type) {
case 'signal:message':
this.messages.push(JSON.parse(event.data))
Vue.nextTick(() => {
const messages = this.$refs.messages;
messages.scrollTop = messages.scrollHeight
})
break
case 'signal:lock':
const lockData = JSON.parse(event.data)
Expand Down
165 changes: 0 additions & 165 deletions client/style.css
View file

This file was deleted.

0 comments on commit 2d9d5a4

Please sign in to comment.