hacks and fixes

webroot/js/message.js

@@ -78,6 +78,10 @@ class Messaging {
 		this.inputChangeUserName.addEventListener("keydown", this.handleUsernameKeydown.bind(this));
 		this.formMessageInput.addEventListener("keydown", this.handleMessageInputKeydown.bind(this));
 		this.btnSubmitMessage.addEventListener("click", this.handleSubmitChatButton.bind(this));
+		if (isAndroidMobile && window.screen.width < 860) {
+			this.formMessageInput.addEventListener("focus", this.handleKeyboardAppear.bind(this));
+			this.formMessageInput.addEventListener("blur", this.handleKeyboardOut.bind(this));
+		}
 		this.initLocalStates();
 
 	}
@@ -99,6 +103,13 @@ class Messaging {
 		this.tagAppContainer.className = this.chatDisplayed ?  "flex" : "flex no-chat";
 	}
 
+	handleKeyboardAppear() {
+		this.tagAppContainer.classList.add("android-message-focus");
+	}
+	handleKeyboardOut() {
+		this.tagAppContainer.classList.remove("android-message-focus");
+	}
+
 	handleChatToggle() {
 		this.chatDisplayed = !this.chatDisplayed;
 		if (this.chatDisplayed) {

webroot/js/utils.js

@@ -46,4 +46,10 @@ function setVHvar() {
 function mobileVHhack() {
   setVHvar();
   window.addEventListener("orientationchange", setVHvar);
+}
+
+function isAndroidMobile() {
+  var isAndroid = navigator.userAgent.toLowerCase().indexOf("android") > -1; 
+  //&& ua.indexOf("mobile");
+  return isAndroid;
 }

webroot/styles/layout.css

@@ -277,6 +277,7 @@ header h1 {
   #main-content-container {
     flex-direction: column;
     justify-content: space-between;
+    height: calc((var(--vh, 1vh) * 100) - var(--header-height));
   }
 
   .main-cols {
@@ -319,4 +320,43 @@ header h1 {
   .no-chat   #user-content {
     display: block;
   }
+}
+
+
+.android-message-focus  #main-content-container {
+  flex-direction: column;
+  justify-content: space-between;
+  height: calc((var(--vh, 1vh) * 100) - var(--header-height));
+
+}
+
+.android-message-focus .main-cols {
+  width: 100vw;
+}
+.android-message-focus .left-col {
+  flex-direction: column;
+  justify-content: stretch;
+  z-index: 100;
+}
+.android-message-focus .right-col {
+  overflow: hidden;
+}
+
+.android-message-focus  #user-info {
+  width: 9em;    
+}
+.android-message-focus  #user-content {
+  display: none;
+}
+.android-message-focus  #chat-container {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  height: auto;
+}
+
+.android-message-focus  .owncast-video-container {
+  height: 40vh;
+  height: calc((var(--vh, 1vh) * 40));
+  min-height: 300px;
 }