mobile style hacks

webroot/index.html

@@ -47,7 +47,7 @@
             <button id="button-cancel-change" class="bg-gray-900 hover:bg-gray-800 py-1 px-2 rounded user-btn" title="cancel">X</button>
           </div>
         </div>
-        <div id="chat-toggle" class="flex">💬</div>
+        <button type="button" id="chat-toggle" class="flex">💬</button>
       </div>
 
     </header>
@@ -67,7 +67,7 @@
             poster="https://goth.land/thumbnail.png"
             data-setup='{}'
           >
-            <source src="https://goth.land/hls/stream.m3u8" type="application/x-mpegURL"/>
+            <!-- <source src="https://goth.land/hls/stream.m3u8" type="application/x-mpegURL"/> -->
           </video>
         </div>
 

webroot/js/app.js

@@ -25,7 +25,12 @@ function setupApp() {
   })
 
 
+  // style hackings
   window.VIDEOJS_NO_DYNAMIC_STYLE = true;
+  mobileVHhack();
+
+
+  // init messaging interactions
   var appMessagingMisc = new Messaging();
   appMessagingMisc.init();
 

webroot/js/utils.js

@@ -36,4 +36,14 @@ function uuidv4() {
     const r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);
     return v.toString(16);
   });
+}
+
+function setVHvar() {
+  let vh = window.innerHeight * 0.01;
+  // Then we set the value in the --vh custom property to the root of the document
+  document.documentElement.style.setProperty('--vh', `${vh}px`);
+}
+function mobileVHhack() {
+  setVHvar();
+  window.addEventListener("orientationchange", setVHvar);
 }

webroot/styles/layout.css

@@ -7,11 +7,9 @@
   --header-bg-color: rgba(20,0,40,1);
 }
 
-
 body {
   font-size: 14px;
   background-color: #eee;
-  /* color: white; */
 }
 ::-webkit-scrollbar {
   width: 0px;
@@ -155,11 +153,15 @@ header h1 {
   justify-content: flex-start;
   align-items: center;
   background-color: black;
+
+  height: calc(100vh - 8em); /* Fallback for browsers that do not support Custom Properties */
+  height: calc((var(--vh, 1vh) * 100) - var(--header-height) - 5em);
+
 }
 .owncast-video-container .video-js {
   width: 100%;
+  height: 100%;
   display: block;
-  height: calc(100vh - var(--header-height) - 5em);
 }
 .owncast-video-container video {
   width: 100%;
@@ -194,7 +196,10 @@ header h1 {
   height: 100%;
   width: var(--right-col-width);
   background-color: var(--chat-bg-color);
-  height: calc(100vh - var(--header-height));
+
+  height: calc(100vh - 3em); /* Fallback for browsers that do not support Custom Properties */
+  height: calc((var(--vh, 1vh) * 100) - var(--header-height));
+
   overflow: hidden;
   display: flex;
   flex-direction: column;
@@ -258,7 +263,7 @@ header h1 {
 }
 .message-text {
   color: #ccc;
-  font-weight: 100;
+  font-weight: 200;
 }
 
 /* ************************************************8 */
@@ -293,7 +298,6 @@ header h1 {
   #main-content-container {
     flex-direction: column;
     justify-content: space-between;
-    height: calc(100vh - var(--header-height));
   }
 
   .main-cols {
@@ -302,13 +306,14 @@ header h1 {
   .left-col {
     flex-direction: column;
     justify-content: stretch;
+    z-index: 100;
   }
   .right-col {
     overflow: hidden;
   }
 
   #user-info {
-    width: 12em;    
+    width: 9em;    
   }
   #user-content {
     display: none;
@@ -320,18 +325,17 @@ header h1 {
     height: auto;
   }
 
-  .owncast-video-container .video-js {
+  .owncast-video-container {
     height: 40vh;
+    height: calc((var(--vh, 1vh) * 40));
+    min-height: 300px;
   }
 
-  .no-chat  .left-col {
-    height: 100%;
-  }
   .no-chat  .right-col {
     display: none;
   }
   .no-chat #stream-info {
-    display: block;
+    display: flex;
   }
   .no-chat   #user-content {
     display: block;