From aead6d6b13f7a6b213fdb017093bb90496e955d8 Mon Sep 17 00:00:00 2001
From: Ginger Wong <omqmail@gmail.com>
Date: Sun, 14 Jun 2020 16:32:39 -0700
Subject: [PATCH 1/2] videojs video sizing hacks, other css

---
 webroot/index.html        | 27 ++++++++++++++++++++++-----
 webroot/styles/layout.css | 19 ++++++++++++++++---
 2 files changed, 38 insertions(+), 8 deletions(-)

diff --git a/webroot/index.html b/webroot/index.html
index e77ff0c46..112f13cbe 100644
--- a/webroot/index.html
+++ b/webroot/index.html
@@ -51,7 +51,7 @@
       <!-- LEFT CONTAINER SIDE-->
       <div class="flex main-cols left-col">
 
-        <div id="video-container" class="flex shadow-md">
+        <div id="video-container" class="flex shadow-md owncast-video-container">
           <video
             class="video-js"
             id="video"
@@ -66,10 +66,27 @@
           </video>
         </div>
 
-        <div id="stream-info">
-          {{ streamStatus }} {{ viewerCount }} {{ 'viewer' | plural(viewerCount) }}.
-          Max {{ sessionMaxViewerCount }} {{ 'viewer' | plural(sessionMaxViewerCount) }},
-          {{ overallMaxViewerCount }} overall.
+        <div id="stream-info" class="flex">
+          <span>{{ streamStatus }}</span>
+          <span>{{ viewerCount }} {{ 'viewer' | plural(viewerCount) }}.</span>
+          <span> Max {{ sessionMaxViewerCount }} {{ 'viewer' | plural(sessionMaxViewerCount) }}.</span>
+          <span>{{ overallMaxViewerCount }} overall.</span>        
+        </div>
+
+        <div id="user-content">
+
+          <!-- USER CONTENT... -->
+          <div>
+            Blathers is an owl with brown feathers. His face is white and he has a yellow beak. His arms are wing shaped and he has yellow talons. His eyes are very big with small black irises. He also has big pink cheek circles on his cheeks. His belly appears to be checkered in diamonds with light brown and white squares, similar to an argyle vest, which is traditionally associated with academia. His green bowtie further alludes to his academic nature.
+
+
+          </div>
+          <div>
+            Blathers is an owl with brown feathers. His face is white and he has a yellow beak. His arms are wing shaped and he has yellow talons. His eyes are very big with small black irises. He also has big pink cheek circles on his cheeks. His belly appears to be checkered in diamonds with light brown and white squares, similar to an argyle vest, which is traditionally associated with academia. His green bowtie further alludes to his academic nature.
+
+
+          </div>
+
         </div>
       </div>
 
diff --git a/webroot/styles/layout.css b/webroot/styles/layout.css
index 4587e9d55..39a157211 100644
--- a/webroot/styles/layout.css
+++ b/webroot/styles/layout.css
@@ -148,7 +148,7 @@ header h1 {
 
 /* ************************************************8 */
 
-#video-container {
+.owncast-video-container {
   width: 100%;
   height: auto;
   display: flex;
@@ -157,19 +157,32 @@ header h1 {
   align-items: center;
   background-color: black;
 }
-#video-container video {
+.owncast-video-container .video-js {
+  width: 100%;
+  display: block;
+  height: calc(100vh - var(--header-height) - 5em);
+}
+.owncast-video-container video {
   width: 100%;
   display: block;
   min-height: 100%
 }
+/* ************************************************8 */
 
 #stream-info {
-  padding: .5em;
+  padding: .5em 2em;
   text-align: center;
   font-family: monospace;
   font-size: .75em;
   background-color: rgba(0,0,0,.5);
   border-bottom: 1px solid black;
+
+  flex-direction: row;
+  justify-content: space-between;
+}
+
+#user-content {
+  padding: 2em;
 }
 
 /* ************************************************8 */

From 687920a4cda52412ab2c06b5a3e42f53a3bdb1fa Mon Sep 17 00:00:00 2001
From: Ginger Wong <omqmail@gmail.com>
Date: Sun, 14 Jun 2020 17:02:10 -0700
Subject: [PATCH 2/2] more css

---
 webroot/index.html        |  2 +-
 webroot/styles/layout.css | 19 +++++++++++--------
 2 files changed, 12 insertions(+), 9 deletions(-)

diff --git a/webroot/index.html b/webroot/index.html
index 112f13cbe..fbdd5a6cc 100644
--- a/webroot/index.html
+++ b/webroot/index.html
@@ -69,7 +69,7 @@
         <div id="stream-info" class="flex">
           <span>{{ streamStatus }}</span>
           <span>{{ viewerCount }} {{ 'viewer' | plural(viewerCount) }}.</span>
-          <span> Max {{ sessionMaxViewerCount }} {{ 'viewer' | plural(sessionMaxViewerCount) }}.</span>
+          <span>Max {{ sessionMaxViewerCount }} {{ 'viewer' | plural(sessionMaxViewerCount) }}.</span>
           <span>{{ overallMaxViewerCount }} overall.</span>        
         </div>
 
diff --git a/webroot/styles/layout.css b/webroot/styles/layout.css
index 39a157211..bf7bbe6be 100644
--- a/webroot/styles/layout.css
+++ b/webroot/styles/layout.css
@@ -75,7 +75,7 @@ header h1 {
 #user-info-display {
   display: flex;
   flex-direction: row;
-  justify-content: center;
+  justify-content: flex-end;
   align-items: center;
   cursor: pointer;
   padding: .5em 1em;
@@ -260,8 +260,8 @@ header h1 {
   color: #ccc;
   font-weight: 100;
 }
-/* ************************************************8 */
 
+/* ************************************************8 */
 
 .no-chat .left-col {
   width: 100vw;
@@ -310,12 +310,9 @@ header h1 {
   #user-info {
     width: 12em;    
   }
-  #stream-info {
+  #user-content {
     display: none;
-    overflow: auto;
-    height: auto;
   }
-
   #chat-container {
     width: 100%;
     height: 100%;
@@ -323,14 +320,20 @@ header h1 {
     height: auto;
   }
 
+  .owncast-video-container .video-js {
+    height: 40vh;
+  }
+
   .no-chat  .left-col {
     height: 100%;
   }
   .no-chat  .right-col {
     display: none;
   }
-  .no-chat #info {
+  .no-chat #stream-info {
+    display: block;
+  }
+  .no-chat   #user-content {
     display: block;
   }
-
 }
\ No newline at end of file