mobile hackery

webroot/index.html

@@ -21,6 +21,19 @@
 GW TODO:
 - off line/ video done mode.
 - remove listeners on unload?
+- config customizations
+
+mobile yucks:
+problems;
+- mobile browsers need custom vh calculation due to browser chrome taken into consideration
+- mobile chrome softkeyboard changes perceived width of page, alters layout
+- chat windwo placementis messedup on orientation changes.. needs new vh.
+orientationchange oly happens on mobile.
+does orientationchange happen when keyboard appears?
+
+possible hacks
+- if mobile, don't show chat + chat icon in landscape?.. 
+
 
 */
 </script>

webroot/js/app.js

@@ -27,7 +27,11 @@ function setupApp() {
 
   // style hackings
   window.VIDEOJS_NO_DYNAMIC_STYLE = true;
+  if (hasTouchScreen()) {
     mobileVHhack();
+    window.onorientationchange = handleOrientationChange;
+    // document.addEventListener("orientationchange", handleOrientationChange);
+  }
 
 
   // init messaging interactions

webroot/js/config.js

@@ -5,7 +5,7 @@ class Config {
   }
 
   async init() {
-    const configFileLocation = "js/config.json";
+    const configFileLocation = "./js/config.json";
     
     try {
       const response = await fetch(configFileLocation);

webroot/js/message.js

@@ -81,7 +81,7 @@ 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) {
+		if (isAndroidMobile && window.screen.width <= 860) {
 			this.formMessageInput.addEventListener("focus", this.handleKeyboardAppear.bind(this));
 			this.formMessageInput.addEventListener("blur", this.handleKeyboardOut.bind(this));
 		}
@@ -203,7 +203,9 @@ class Messaging {
 			id: uuidv4(),
 		});
 		const messageJSON = JSON.stringify(message);
+		if (window && window.ws) {
 			window.ws.send(messageJSON);
+		}
 
 		// clear out things.
 		this.formMessageInput.value = "";

webroot/js/utils.js

@@ -46,7 +46,7 @@ function setVHvar() {
 }
 function mobileVHhack() {
   setVHvar();
-  window.addEventListener("orientationchange", setVHvar);
+  // window.addEventListener("orientationchange", setVHvar);
 }
 
 function isAndroidMobile() {
@@ -55,4 +55,33 @@ function isAndroidMobile() {
   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
+function hasTouchScreen() {
+  var hasTouchScreen = false;
+  if ("maxTouchPoints" in navigator) { 
+      hasTouchScreen = navigator.maxTouchPoints > 0;
+  } else if ("msMaxTouchPoints" in navigator) {
+      hasTouchScreen = navigator.msMaxTouchPoints > 0; 
+  } else {
+      var mQ = window.matchMedia && matchMedia("(pointer:coarse)");
+      if (mQ && mQ.media === "(pointer:coarse)") {
+          hasTouchScreen = !!mQ.matches;
+      } else if ('orientation' in window) {
+          hasTouchScreen = true; // deprecated, but good fallback
+      } else {
+          // Only as a last resort, fall back to user agent sniffing
+          var UA = navigator.userAgent;
+          hasTouchScreen = (
+              /\b(BlackBerry|webOS|iPhone|IEMobile)\b/i.test(UA) ||
+              /\b(Android|Windows Phone|iPad|iPod)\b/i.test(UA)
+          );
+      }
+  }
+  return hasTouchScreen;
+}
 
+function handleOrientationChange(event) {
+  console.log("====orientation change 123", event, window.screen.orientation, window.orientation)
+  setVHvar();
+}

webroot/styles/layout.css

@@ -4,6 +4,7 @@
   --right-col-width: 24em;
 
   --header-bg-color: rgba(20,0,40,1);
+  --vh: 1vh;
 }
 
 body {
@@ -170,9 +171,11 @@ header h1 {
   padding: .5em 2em;
   text-align: center;
   font-size: .7em;
+  min-height: 3em; /*ios safari hack*/
 
   flex-direction: row;
   justify-content: space-between;
+  
 }
 
 #user-content {
@@ -273,7 +276,10 @@ header h1 {
   }
 }
 
-@media screen and (max-width: 640px ) and (orientation: portrait) {
+/* ************************************************8 */
+
+
+@media screen and (max-width: 640px ) {
   #main-content-container {
     flex-direction: column;
     justify-content: space-between;