mobile hackery

This commit is contained in:
Ginger Wong
2020-06-15 15:45:55 -07:00
parent 08d20a1096
commit 4497cc86c2
6 changed files with 60 additions and 6 deletions

View File

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

View File

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

View File

@@ -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);
window.ws.send(messageJSON);
if (window && window.ws) {
window.ws.send(messageJSON);
}
// clear out things.
this.formMessageInput.value = "";

View File

@@ -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();
}