fix youtube embed sizing and weird zindexing; fix single col video sizing inconsistency across other browsers

webroot/js/components/chat/chat-input.js

@@ -241,7 +241,7 @@ export default class ChatInput extends Component {
     const placeholderText = generatePlaceholderText(inputEnabled, hasSentFirstChatMessage);
     return (
       html`
-        <div id="message-input-container" class="fixed bottom-0 shadow-md bg-gray-900 border-t border-gray-700 border-solid p-4">
+        <div id="message-input-container" class="fixed bottom-0 shadow-md bg-gray-900 border-t border-gray-700 border-solid p-4 z-20">
 
           <${ContentEditable}
             id="message-input"

webroot/js/components/chat/chat.js

@@ -34,8 +34,8 @@ export default class Chat extends Component {
    this.getChatHistory();
 
    if (hasTouchScreen()) {
-    setVHvar();
+    // setVHvar();
-    window.addEventListener("orientationchange", setVHvar);
+    // window.addEventListener("orientationchange", setVHvar);
     }
   }
 
@@ -200,7 +200,7 @@ export default class Chat extends Component {
             <div
               id="messages-container"
               ref=${this.scrollableMessagesContainer}
-              class="py-1 overflow-auto"
+              class="py-1 overflow-auto z-10"
             >
               ${messageList}
             </div>

webroot/js/components/chat/message.js

@@ -29,7 +29,7 @@ export default class Message extends Component {
             >
               <img src=${avatar} class="p-1" />
             </div>
-            <div class="message-content text-sm break-words">
+            <div class="message-content text-sm break-words w-full">
               <div class="message-author text-white font-bold" style=${authorTextColor}>
                 ${author}
               </div>
@@ -47,7 +47,7 @@ export default class Message extends Component {
       return (
         html`
           <div class="message message-name-change flex items-center justify-start p-3">
-            <div class="message-content flex flex-row items-center justify-center text-sm">
+            <div class="message-content flex flex-row items-center justify-center text-sm w-full">
               <div
                 class="message-avatar rounded-full mr-3 bg-gray-900"
               >

webroot/js/utils/chat.js

@@ -211,9 +211,6 @@ export function convertToText(str = '') {
   // Replace `<p>` (from IE).
   value = value.replace(/<p>/gi, '\n');
 
-  // Remove extra tags.
-  value = value.replace(/<(.*?)>/g, '');
-
   // Trim each line.
   value = value
     .split('\n')

webroot/styles/app.css

@@ -143,6 +143,7 @@ header {
 
 .single-col {
   --right-col-width: 0px;
+  --video-container-height: calc((9 / 16) * 100vw);
 }
 .single-col main {
   position: fixed;
@@ -154,9 +155,18 @@ header {
   width: 100%;
   height: auto;
 }
-.single-col #video-container {
+/* .single-col #video-container {
   min-height: auto;
   width: 100%;
+} */
+
+.single-col.chat #video-container,
+.single-col.no-chat #video-container,
+.single-col #video-container #video,
+.single-col.chat #video-container #video {
+  width: 100vw;
+  height: var(--video-container-height);
+  min-height: 212px;
 }
 .single-col #user-content,
 .single-col #chat-container-wrap {

webroot/styles/chat.css

@@ -121,7 +121,7 @@
 }
 
 .message-text .youtube-embed {
-  width: calc(var(--right-col-width) - 3.5em);
+  width: 90%;
   height: auto;
 }
 

webroot/styles/video.css

@@ -10,46 +10,3 @@ video.video-js {
 }
 
 
-
-/* position: relative;
-width: 100%;
-height: calc((9 / 16) * 100vw);
-max-height: calc(100vh - 169px);
-min-height: 480px;
-background: #000; */
-
-/*
-YOUTUBE
-style="--ytd-watch-flexy-scrollbar-width: 15px; --ytd-watch-flexy-panel-max-height: 460px; --ytd-watch-flexy-chat-max-height: 460px;"
-
---ytd-watch-flexy-scrollbar-width: 15px;
---ytd-watch-flexy-panel-max-height: 460px;
---ytd-watch-flexy-chat-max-height: 460px;
-
---ytd-watch-flexy-width-ratio: 16;
---ytd-watch-flexy-height-ratio: 9;
---ytd-watch-flexy-space-below-player: 136px;
-
---ytd-watch-flexy-non-player-height: calc(var(--ytd-watch-flexy-masthead-height) + var(--ytd-margin-6x) + var(--ytd-watch-flexy-space-below-player));
-
---ytd-watch-flexy-non-player-width: calc(var(--ytd-watch-flexy-sidebar-width) + (3 * var(--ytd-margin-6x)));
-
---ytd-watch-flexy-min-player-height: 240px;
-
---ytd-watch-flexy-min-player-width: calc(var(--ytd-watch-flexy-min-player-height) * (var(--ytd-watch-flexy-width-ratio) / var(--ytd-watch-flexy-height-ratio)));
-
---ytd-watch-flexy-max-player-height: calc(100vh -
-(var(--ytd-watch-flexy-masthead-height) + var(--ytd-margin-6x) + var(--ytd-watch-flexy-space-below-player)));
-
---ytd-watch-flexy-max-player-width:
-  calc((100vh - (var(--ytd-watch-flexy-masthead-height) + var(--ytd-margin-6x) + var(--ytd-watch-flexy-space-below-player))) *
-(var(--ytd-watch-flexy-width-ratio) / var(--ytd-watch-flexy-height-ratio)));
-
-
-
---ytd-watch-flexy-sidebar-width: 402px;
---ytd-watch-flexy-sidebar-min-width: 300px;
---ytd-watch-flexy-masthead-height: 56px;
-min-width: 0;
-
-*/