good nuff hacks for nowz

webroot/js/app.js

@@ -27,10 +27,7 @@ function setupApp() {
 
   // style hackings
   window.VIDEOJS_NO_DYNAMIC_STYLE = true;
-  if (hasTouchScreen()) {
-    setVHvar();
-    window.onorientationchange = handleOrientationChange;
-  }
+  setVHvar();
 
 
   // init messaging interactions
@@ -102,7 +99,7 @@ function setupWebsocket() {
     ws.close()
   }
 
-  window.ws = ws
+  window.ws = ws;
 }
 
 setupApp()

webroot/js/message.js

@@ -72,11 +72,16 @@ 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 (hasTouchScreen) {
+		this.initLocalStates();
+
+		if (hasTouchScreen()) {
+			this.tagAppContainer.classList.add("touch-screen");
+			window.onorientationchange = this.handleOrientationChange.bind(this);
+			this.handleOrientationChange();
+
 			this.formMessageInput.addEventListener("focus", this.handleKeyboardAppear.bind(this));
 			this.formMessageInput.addEventListener("blur", this.handleKeyboardOut.bind(this));
 		}
-		this.initLocalStates();
 
 	}
 
@@ -97,6 +102,25 @@ class Messaging {
 		this.tagAppContainer.className = this.chatDisplayed ?  "flex" : "flex no-chat";
 	}
 
+	handleOrientationChange() {
+		console.log("====orientation change 123", event, window.screen.orientation, window.orientation,  window.matchMedia("(orientation: landscape)"))
+		mobileVHhack();
+		// if small landscape, hide chat
+		// var mql = window.matchMedia("(orientation: landscape)"); // what it _was_
+
+		var isPortrait = Math.abs(window.orientation % 180) === 0;
+
+		if(!isPortrait) {
+			if (document.body.clientWidth < 1024) {
+				this.tagAppContainer.classList.add("no-chat");
+				this.tagAppContainer.classList.add("landscape");
+			}
+		} else {
+			if (this.chatDisplayed) this.tagAppContainer.classList.remove("no-chat");
+			this.tagAppContainer.classList.remove("landscape");
+		}
+	}
+	
 	handleKeyboardAppear() {
 		setTimeout(() => {this.tagAppContainer.classList.add("message-input-focus");}, 50);
 		mobileVHhack();

webroot/js/utils.js

@@ -49,11 +49,6 @@ function mobileVHhack() {
   setTimeout(setVHvar, 100);
 }
 
-function isAndroidMobile() {
-  var isAndroid = navigator.userAgent.toLowerCase().indexOf("android") > -1; 
-  //&& ua.indexOf("mobile");
-  return isAndroid;
-}
 
 // Trying to determine if browser is mobile/tablet.
 // Source: https://developer.mozilla.org/en-US/docs/Web/HTTP/Browser_detection_using_the_user_agent
@@ -81,7 +76,3 @@ function hasTouchScreen() {
   return hasTouchScreen;
 }
 
-function handleOrientationChange(event) {
-  console.log("====orientation change 123", event, window.screen.orientation, window.orientation)
-  mobileVHhack();
-}

webroot/styles/layout.css

@@ -171,7 +171,6 @@ header h1 {
   padding: .5em 2em;
   text-align: center;
   font-size: .7em;
-  min-height: 3em; /*ios safari hack*/
 
   flex-direction: row;
   justify-content: space-between;
@@ -263,6 +262,12 @@ header h1 {
 
 /* ************************************************8 */
 
+.landscape #chat-toggle {
+  display: none;
+}
+
+/* ************************************************8 */
+
 @media screen and (max-width: 860px) {
   :root {
     --right-col-width: 20em;
@@ -293,9 +298,12 @@ header h1 {
     flex-direction: column;
     justify-content: stretch;
     z-index: 100;
+    height: 55%;
+    min-height: 300px;
   }
   .right-col {
     overflow: hidden;
+    height: 45%;
   }
 
   #user-info {
@@ -312,11 +320,14 @@ header h1 {
   }
 
   .owncast-video-container {
-    height: 40vh;
-    height: calc((var(--vh, 1vh) * 40));
-    min-height: 300px;
+    height: 100%;
+  }
+  .no-chat  .left-col {
+    height: 100%;
+  }
+  .no-chat .owncast-video-container {
+    min-height: 50vh;
   }
-
   .no-chat  .right-col {
     display: none;
   }