diff --git a/client/access-required.html b/client/access-required.html index 3fa7160..bec216b 100644 --- a/client/access-required.html +++ b/client/access-required.html @@ -4,18 +4,23 @@ Build a Thing Video App - + - -
-
-
-

Provide Access Code

- - -
-
+ + +
+
+
+
+ + +
+
+ +
+
+
diff --git a/client/index.html b/client/index.html index fb87b99..1b6b1ee 100644 --- a/client/index.html +++ b/client/index.html @@ -5,30 +5,34 @@ Build a Thing Video App - + - -
-
-
- - + +
+ +
+ +
-
- - +
+ +
-
- - +
+ + +
+
+
- +

Built live on Twitch. Code on GitHub.

- \ No newline at end of file + diff --git a/client/room.html b/client/room.html index 1188283..22726d9 100644 --- a/client/room.html +++ b/client/room.html @@ -4,39 +4,37 @@ Build a Thing Video App - +
-
- -
-

Publishers

-
-
-
-

Subscribers

-
-
+
+
    +
  • + +
    {{item.message}}
    +
    • +
+
+
+ + +
+
-
@@ -59,7 +57,13 @@

Subscribers

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 : "")) @@ -76,7 +80,11 @@

Subscribers

_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() { @@ -89,6 +97,10 @@

Subscribers

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) diff --git a/client/style.css b/client/style.css deleted file mode 100644 index 0439b12..0000000 --- a/client/style.css +++ /dev/null @@ -1,165 +0,0 @@ -* { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -#app { - font-family: Verdana, Geneva, Tahoma, sans-serif; - font-size: 14px; - min-height: 100vh; - display: grid; - grid-template-columns: 1fr 300px; - grid-gap: 1em; -} - -/*********INDEX***********/ - -.wrapper { - border: 4px rgba(155, 56, 73, 0.938) solid; - min-height: 50%; - min-width: 40%; - max-width: 80%; - padding: 5rem; -} - -form { - text-align: center; -} - -.input-group { - display: flex; - flex-direction: column; -} - -label { - font-size: 1.5rem; - font-weight: bold; - margin-bottom: 0.5rem; -} - -input { - background-color: white; - border-color: rgb(109, 108, 108); - border-radius: 0.3rem; - margin: 0 auto; - padding: 0.5rem; -} - -button { - background-color: rgba(155, 56, 73, 0.938); - color: white; - border: none; - border-radius: 0.5rem; - box-shadow: 0px 2px 7px 1px rgba(0, 0, 0, 0.404); - font-size: inherit; - font-family: inherit; - margin-top: 1rem; - padding: 0.5rem; -} - -button:focus { - outline: none; -} - -button:hover { - transform: translate(0.2rem, -0.05rem); - transform: scale(1.1, 1.1); -} - -/*********CLIENT***********/ - -main { - height: 100%; - width: 100%; - display: flex; - flex-direction: column; -} - -main h2 { - margin-bottom: 1rem; -} - -.video-streams { - padding: 4rem; -} - -/* Align heading with video frame */ -.video-streams__publishers h2 { - margin-left: 2rem; -} - -.video-streams__subscribers { - background-color: #e4e4ea; -} - -#publishers { - /* Override inline styling from API */ - /* height: calc(100% - 2rem) !important; */ - /* width: 100% !important; */ - border-radius: 1rem; - /* margin: 2rem; */ -} - -#subscribers { - border-radius: 1rem; -} - -nav { - display: flex; - justify-content: flex-end; -} - -/* CHAT */ - -#chat { - background: #d9e2e8; - display: flex; - height: 100vh; - flex-direction: column; - justify-content: flex-end; - padding: 1em; -} - -#messages li { - list-style-type: none; - margin-bottom: 1em; - background: white; - padding: 0.5em; - border-radius: 10px; - display:grid; - grid-template-columns: 100px 1fr; - word-break: break-all; -} - -#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) { - #app { - grid-template-columns: 1fr; - } - - #chat { - height: auto; - } - - .video-streams__publishers, - .video-streams__subscribers { - width: 100%; - } - - .video-streams__publishers h2 { - margin-left: unset; - } - - #publishers { - margin: 0; - } -}