detect portrait mode on mobile so it doesnt go into two col layout when keyboard is up, (#178)

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({

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,
     });

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';

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/';

webroot/styles/app.css

@@ -132,12 +132,6 @@ header {
   min-height: auto;
 }
 
-.short-wide #message-input {
-  height: 3rem;
-}
-
-
-
 
 /* *********** single col layout ***************************** */