From effa5c46c59a4faeed7f7167de78f6d5150e2af3 Mon Sep 17 00:00:00 2001 From: Sergey Stepanov Date: Wed, 3 Apr 2024 19:52:42 +0300 Subject: [PATCH] Update UA/PLT detection --- web/js/env.js | 73 ++++++++++++++++------------------------ web/js/input/joystick.js | 18 +++++----- web/js/stream.js | 10 +++--- 3 files changed, 43 insertions(+), 58 deletions(-) diff --git a/web/js/env.js b/web/js/env.js index ef1ef3d56..b9d5f2e7b 100644 --- a/web/js/env.js +++ b/web/js/env.js @@ -3,6 +3,9 @@ const page = document.getElementsByTagName('html')[0]; const gameBoy = document.getElementById('gamebody'); const sourceLink = document.getElementsByClassName('source')[0]; +export const browser = {unknown: 0, firefox: 1, chrome: 2, edge: 3, safari: 4} +export const platform = {unknown: 0, windows: 1, linux: 2, macos: 3, android: 4,} + let isLayoutSwitched = false; // Window rerender / rotate screen if needed @@ -44,53 +47,35 @@ const rescaleGameBoy = (targetWidth, targetHeight) => { gameBoy.style['transform'] = transformations.join(' '); } -const getOS = () => { - // linux? ios? - let OSName = 'unknown'; - if (navigator.appVersion.indexOf('Win') !== -1) OSName = 'win'; - else if (navigator.appVersion.indexOf('Mac') !== -1) OSName = 'mac'; - else if (navigator.userAgent.indexOf('Linux') !== -1) OSName = 'linux'; - else if (navigator.userAgent.indexOf('Android') !== -1) OSName = 'android'; - return OSName; -}; +const os = () => { + const ua = window.navigator.userAgent; + // noinspection JSUnresolvedReference,JSDeprecatedSymbols + const plt = window.navigator?.userAgentData?.platform || window.navigator.platform; + const macs = ["Macintosh", "MacIntel"]; + const wins = ["Win32", "Win64", "Windows"]; + if (wins.indexOf(plt) !== -1) return platform.windows; + if (macs.indexOf(plt) !== -1) return platform.macos; + if (/Linux/.test(plt)) return platform.linux; + if (/Android/.test(ua)) return platform.android; + return platform.unknown +} -const getBrowser = () => { - let browserName = 'unknown'; - if (navigator.userAgent.indexOf('Firefox') !== -1) browserName = 'firefox'; - if (navigator.userAgent.indexOf('Chrome') !== -1) browserName = 'chrome'; - if (navigator.userAgent.indexOf('Edge') !== -1) browserName = 'edge'; - if (navigator.userAgent.indexOf('Version/') !== -1) browserName = 'safari'; - if (navigator.userAgent.indexOf('UCBrowser') !== -1) browserName = 'uc'; - return browserName; -}; +const _browser = () => { + if (navigator.userAgent.indexOf('Firefox') !== -1) return browser.firefox; + if (navigator.userAgent.indexOf('Chrome') !== -1) return browser.chrome; + if (navigator.userAgent.indexOf('Edge') !== -1) return browser.edge; + if (navigator.userAgent.indexOf('Version/') !== -1) return browser.safari; + return browser.unknown; +} + +const isMobile = () => /Mobi|Android|iPhone/i.test(navigator.userAgent); const isPortrait = () => getWidth(page) < getHeight(page); const toggleFullscreen = (enable, element) => { const el = enable ? element : document; - - if (enable) { - if (el.requestFullscreen) { - el.requestFullscreen(); - } else if (el.mozRequestFullScreen) { /* Firefox */ - el.mozRequestFullScreen(); - } else if (el.webkitRequestFullscreen) { /* Chrome, Safari and Opera */ - el.webkitRequestFullscreen(); - } else if (el.msRequestFullscreen) { /* IE/Edge */ - el.msRequestFullscreen(); - } - } else { - if (el.exitFullscreen) { - el.exitFullscreen(); - } else if (el.mozCancelFullScreen) { /* Firefox */ - el.mozCancelFullScreen(); - } else if (el.webkitExitFullscreen) { /* Chrome, Safari and Opera */ - el.webkitExitFullscreen(); - } else if (el.msExitFullscreen) { /* IE/Edge */ - el.msExitFullscreen(); - } - } -}; + enable ? el.requestFullscreen?.() : el.exitFullscreen?.(); +} function getHeight(el) { return parseFloat(getComputedStyle(el, null).height.replace("px", "")); @@ -105,9 +90,9 @@ window.addEventListener('orientationchange', fixScreenLayout); document.addEventListener('DOMContentLoaded', () => fixScreenLayout(), false); export const env = { - getOs: getOS, - getBrowser: getBrowser, - isMobileDevice: () => /Mobi|Android|iPhone/i.test(navigator.userAgent), + getOs: os(), + getBrowser: _browser(), + isMobileDevice: isMobile(), display: () => ({ isPortrait: isPortrait, toggleFullscreen: toggleFullscreen, diff --git a/web/js/input/joystick.js b/web/js/input/joystick.js index b7f9a54a6..4faa30cea 100644 --- a/web/js/input/joystick.js +++ b/web/js/input/joystick.js @@ -8,7 +8,7 @@ import { KEY_PRESSED, KEY_RELEASED } from 'event'; -import {env} from 'env'; +import {env, browser as br, platform} from 'env'; import {KEY} from 'input'; import {log} from 'log'; @@ -98,10 +98,10 @@ const onGamepadConnected = (e) => { // Ref: https://github.com/giongto35/cloud-game/issues/14 // get mapping first (default KeyMap2) - let os = env.getOs(); - let browser = env.getBrowser(); + const os = env.getOs(); + const browser = env.getBrowser(); - if (os === 'android') { + if (os === platform.android) { // default of android is KeyMap1 joystickMap = { 2: KEY.A, @@ -135,7 +135,7 @@ const onGamepadConnected = (e) => { }; } - if (os === 'android' && (browser === 'firefox' || browser === 'uc')) { //KeyMap2 + if (os === platform.android && browser === br.firefox) { //KeyMap2 joystickMap = { 0: KEY.A, 1: KEY.B, @@ -152,7 +152,7 @@ const onGamepadConnected = (e) => { }; } - if (os === 'win' && browser === 'firefox') { //KeyMap3 + if (os === platform.windows && browser === br.firefox) { //KeyMap3 joystickMap = { 1: KEY.A, 2: KEY.B, @@ -165,7 +165,7 @@ const onGamepadConnected = (e) => { }; } - if (os === 'mac' && browser === 'safari') { //KeyMap4 + if (os === platform.macos && browser === br.safari) { //KeyMap4 joystickMap = { 1: KEY.A, 2: KEY.B, @@ -182,7 +182,7 @@ const onGamepadConnected = (e) => { }; } - if (os === 'mac' && browser === 'firefox') { //KeyMap5 + if (os === platform.macos && browser === br.firefox) { //KeyMap5 joystickMap = { 1: KEY.A, 2: KEY.B, @@ -201,7 +201,7 @@ const onGamepadConnected = (e) => { // https://bugs.chromium.org/p/chromium/issues/detail?id=1076272 if (gamepad.id.includes('PLAYSTATION(R)3')) { - if (browser === 'chrome') { + if (browser === br.chrome) { joystickMap = { 1: KEY.A, 0: KEY.B, diff --git a/web/js/stream.js b/web/js/stream.js index 3ccfaee49..9a3d68b05 100644 --- a/web/js/stream.js +++ b/web/js/stream.js @@ -26,7 +26,7 @@ let options = { aspect: 4 / 3 }; -const mute = (mute) => screen.muted = mute +const mute = (mute) => (screen.muted = mute) const _stream = () => { screen.play() @@ -96,14 +96,14 @@ const screenToAspect = (el) => { screen.addEventListener('fullscreenchange', () => { state.fullscreen = !!document.fullscreenElement; - if (!state.fullscreen) { - screen.style.padding = '0' - } else { + if (state.fullscreen) { screenToAspect(document.fullscreenElement); // chrome bug setTimeout(() => { screenToAspect(document.fullscreenElement) }, 1) + } else { + screen.style.padding = '0' } makeFullscreen(state.fullscreen); @@ -115,7 +115,7 @@ const makeFullscreen = (make = false) => { } const forceFullscreenMaybe = () => { - const touchMode = env.isMobileDevice(); + const touchMode = env.isMobileDevice; log.debug('touch check', touchMode) !touchMode && options.forceFullscreen && toggleFullscreen(); }