From 01f956d043daa41fe867221c4975dab2bc08b61a Mon Sep 17 00:00:00 2001
From: Ginger Wong <omqmail@gmail.com>
Date: Tue, 22 Sep 2020 17:09:55 -0700
Subject: [PATCH] detect portrait mode on mobile so it doesnt go into two col
 layout when keyboard is up, (#178)

---
 webroot/js/app.js                  | 13 +++++++++----
 webroot/js/components/chat/chat.js |  3 ---
 webroot/js/utils/constants.js      |  2 ++
 webroot/js/utils/helpers.js        | 17 +++++++++++++++++
 webroot/styles/app.css             |  6 ------
 5 files changed, 28 insertions(+), 13 deletions(-)

diff --git a/webroot/js/app.js b/webroot/js/app.js
index 5d3e4ffd0..9fe34ca40 100644
--- a/webroot/js/app.js
+++ b/webroot/js/app.js
@@ -7,7 +7,7 @@ import SocialIcon from './components/social.js';
 import UsernameForm from './components/chat/username.js';
 import Chat from './components/chat/chat.js';
 import Websocket from './utils/websocket.js';
-import { secondsToHMMSS, hasTouchScreen } from './utils/helpers.js';
+import { secondsToHMMSS, hasTouchScreen, getOrientation } from './utils/helpers.js';
 
 import {
   addNewlines,
@@ -35,6 +35,7 @@ import {
   URL_OWNCAST,
   URL_STATUS,
   WIDTH_SINGLE_COL,
+  ORIENTATION_PORTRAIT,
 } from './utils/constants.js';
 
 export default class App extends Component {
@@ -42,6 +43,7 @@ export default class App extends Component {
     super(props, context);
 
     const chatStorage = getLocalStorage(KEY_CHAT_DISPLAYED);
+    this.hasTouchScreen = hasTouchScreen();
 
     this.state = {
       websocket: new Websocket(),
@@ -67,10 +69,9 @@ export default class App extends Component {
       // dom
       windowWidth: window.innerWidth,
       windowHeight: window.innerHeight,
+      orientation: getOrientation(this.hasTouchScreen),
     };
 
-    this.hasTouchScreen = hasTouchScreen();
-
     // timers
     this.playerRestartTimer = null;
     this.offlineTimer = null;
@@ -344,6 +345,7 @@ export default class App extends Component {
     this.setState({
       windowWidth: window.innerWidth,
       windowHeight: window.innerHeight,
+      orientation: getOrientation(this.hasTouchScreen),
     });
   }
 
@@ -353,6 +355,7 @@ export default class App extends Component {
       configData,
       displayChat,
       extraUserContent,
+      orientation,
       overallMaxViewerCount,
       playerActive,
       sessionMaxViewerCount,
@@ -366,6 +369,7 @@ export default class App extends Component {
       windowWidth,
     } = state;
 
+
     const {
       version: appVersion,
       logo = {},
@@ -409,7 +413,8 @@ export default class App extends Component {
     const mainClass = playerActive ? 'online' : '';
     const streamInfoClass = streamOnline ? 'online' : ''; // need?
 
-    const shortHeight = windowHeight <= HEIGHT_SHORT_WIDE;
+    const isPortrait = this.hasTouchScreen && orientation === ORIENTATION_PORTRAIT;
+    const shortHeight = windowHeight <= HEIGHT_SHORT_WIDE && !isPortrait;
     const singleColMode = windowWidth <= WIDTH_SINGLE_COL && !shortHeight;
 
     const extraAppClasses = classNames({
diff --git a/webroot/js/components/chat/chat.js b/webroot/js/components/chat/chat.js
index 16e02c427..4d2bb274d 100644
--- a/webroot/js/components/chat/chat.js
+++ b/webroot/js/components/chat/chat.js
@@ -127,15 +127,12 @@ export default class Chat extends Component {
   }
 
   websocketConnected() {
-    console.log("=======socket connected.")
     this.setState({
       webSocketConnected: true,
     });
   }
 
   websocketDisconnected() {
-    console.log("=======socket not connected.")
-
     this.setState({
       webSocketConnected: false,
     });
diff --git a/webroot/js/utils/constants.js b/webroot/js/utils/constants.js
index 097f8af24..980bb9ce4 100644
--- a/webroot/js/utils/constants.js
+++ b/webroot/js/utils/constants.js
@@ -51,3 +51,5 @@ export const MESSAGE_JUMPTOBOTTOM_BUFFER = 260;
 // app styling
 export const WIDTH_SINGLE_COL = 730;
 export const HEIGHT_SHORT_WIDE = 500;
+export const ORIENTATION_PORTRAIT = 'portrait';
+export const ORIENTATION_LANDSCAPE = 'landscape';
diff --git a/webroot/js/utils/helpers.js b/webroot/js/utils/helpers.js
index 1634e4f62..196b838d3 100644
--- a/webroot/js/utils/helpers.js
+++ b/webroot/js/utils/helpers.js
@@ -1,3 +1,5 @@
+import { ORIENTATION_LANDSCAPE, ORIENTATION_PORTRAIT } from './constants.js';
+
 export function getLocalStorage(key) {
   try {
     return localStorage.getItem(key);
@@ -75,6 +77,21 @@ export function hasTouchScreen() {
   return hasTouch;
 }
 
+
+export function getOrientation(forTouch = false) {
+  // chrome mobile gives misleading matchMedia result when keyboard is up
+  if (forTouch && window.screen && window.screen.orientation) {
+    return window.screen.orientation.type.match('portrait') ?
+      ORIENTATION_PORTRAIT :
+      ORIENTATION_LANDSCAPE;
+  } else {
+    // all other cases
+    return window.matchMedia("(orientation: portrait)").matches ?
+    ORIENTATION_PORTRAIT :
+    ORIENTATION_LANDSCAPE;
+  }
+}
+
 // generate random avatar from https://robohash.org
 export function generateAvatar(hash) {
   const avatarSource = 'https://robohash.org/';
diff --git a/webroot/styles/app.css b/webroot/styles/app.css
index b7e9e18be..30774ee2b 100644
--- a/webroot/styles/app.css
+++ b/webroot/styles/app.css
@@ -132,12 +132,6 @@ header {
   min-height: auto;
 }
 
-.short-wide #message-input {
-  height: 3rem;
-}
-
-
-
 
 /* *********** single col layout ***************************** */