Android improvements, incompatible browser detection. (#15)

* Improved Android phone browser performances. * Add incompatible web browser detection.
kshetline · Apr 23, 2022 · b84519b · b84519b
1 parent ba6a632
commit b84519b
Show file tree

Hide file tree

Showing 9 changed files with 123 additions and 12 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,8 @@
+## 1.4.8
+
+* Improved Android phone browser performances.
+* Add incompatible web browser detection.
+
 ## 1.4.7
 
 * Turned off minimization of CSS, as that seems to be related to unwanted page reloads in iOS Safari when changing from portrait to landscape mode.

diff --git a/angular.json b/angular.json
@@ -59,11 +59,8 @@
           },
           "configurations": {
             "production": {
-              "optimization": {
-                "scripts": true,
-                "fonts": true,
-                "styles": false
-              },
+              "optimization": true,
+              "sourceMap": true,
               "fileReplacements": [
                 {
                   "replace": "src/environments/environment.ts",

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "prague-clock",
-  "version": "1.4.7",
+  "version": "1.4.8",
   "scripts": {
     "ng": "ng",
     "start": "ng serve --configuration=development",

diff --git a/src/app/app.component.scss b/src/app/app.component.scss
@@ -234,7 +234,7 @@ svg {
 
   &.controls-collapsed {
     height: calc(max(var(--mfvh) - 16px, 320px));
-    width: calc(max(var(--mfvh) - 16px, 320px));
+    width: calc(min(max(var(--mfvh) - 16px, 320px), calc(100vw - 28px)));
   }
 }
 
@@ -385,8 +385,8 @@ svg {
 
     &.collapsed {
       margin-left: 0;
-      min-width: 400px;
-      width: 400px;
+      min-width: 320px;
+      width: 320px;
     }
 
     i.pi-bars.collapsed {

diff --git a/src/assets/incompatible.html b/src/assets/incompatible.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Pražský Orloj - Simulator incompatible with your web browser</title>
+  <base href="./">
+<style>
+  body {
+    align-items: center;
+    background: rgb(212,150,76);
+    background: linear-gradient(90deg,
+      rgba(212, 150, 76, 0.33) 0%, rgba(176, 186, 177, 0.33) 8%, rgba(140, 168, 167, 0.33) 17%, rgba(71, 153, 174, 0.33) 25%,
+      rgba(24, 146, 178, 0.33) 33%, rgba(11, 138, 176, 0.33) 42%, rgba(18, 133, 174, 0.33) 50%, rgba(11, 138, 176, 0.33) 58%,
+      rgba(24, 146, 178, 0.33) 67%, rgba(71, 153, 174, 0.33) 75%, rgba(140, 168, 167, 0.33) 83%, rgba(176, 186, 177, 0.33) 92%,
+      rgba(212, 150, 76, 0.33) 100%);
+    color: #444;
+    display: flex;
+    flex-direction: column;
+    font: 14px Arial, Helvetica, sans-serif;
+    margin: 1em;
+    width: calc(100vw - 2em);
+  }
+
+  .page {
+    background: none;
+    width: calc(min(800px, calc(100vw - 2em)));
+  }
+</style>
+</head>
+<body>
+  <div class="page">
+    <p>Your web browser does not have the capabilities needed to run the simulator.</p>
+    <!-- cspell:disable -->
+    <p>Váš webový prohlížeč nemá schopnosti potřebné ke spuštění simulátoru.</p>
+    <p>Ihr Webbrowser verfügt nicht über die zum Ausführen des Simulators erforderlichen Funktionen.</p>
+    <p>Su navegador web no tiene las capacidades necesarias para ejecutar el simulador.</p>
+    <p>Votre navigateur Web n'a pas les capacités nécessaires pour exécuter le simulateur.</p>
+    <a href="https://orloj.eu">orloj.eu</a>
+  </div>
+</body>
+</html>
diff --git a/src/index.html b/src/index.html
@@ -13,9 +13,32 @@
   <meta property="og:image" content="https://shetline.com/orloj/assets/clock.jpg">
   <base href="/">
   <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
+  <meta name="mobile-web-app-capable" content="yes">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
   <script>
-    (() => {
+    (function () {
+      // Test browser feature support.
+      // noinspection ES6ConvertVarToLetConst
+      var success;
+
+      try {
+        eval('// noinspection JSUnusedLocalSymbols\nlet a = `a`');
+        eval('// noinspection JSUnusedLocalSymbols\nconst [x, y] = [1, 2]');
+        eval('(y = 0) => -y');
+        eval('Symbol("symbol")');
+        eval('Array.from([])');
+        eval('new Promise(resolve => resolve()).finally()');
+        success = !!(''.startsWith && document.createElement('canvas').getContext('webgl2'));
+      }
+      catch (e) {
+        success = false;
+      }
+
+      if (!success) {
+        location.href = location.origin + '/orloj/assets/incompatible.html';
+        return;
+      }
+
       // Handle forwarding of settings from old site.
       if (!location.search)
         return;

diff --git a/src/main.ts b/src/main.ts
@@ -8,5 +8,42 @@ if (environment.production) {
   enableProdMode();
 }
 
+const width = Math.min(window.innerWidth, document.documentElement.clientWidth);
+const height = Math.min(window.innerHeight, document.documentElement.clientHeight);
+
+if (Math.min(width, height) < 428) {
+  const viewport = document.querySelector('meta[name="viewport"]');
+
+  if (viewport) {
+    viewport.setAttribute('content', 'width=device-width, initial-scale=0.95, minimum-scale=0.95, maximum-scale=0.95');
+  }
+}
+
+let screenOrientationSucceeded = false;
+let orientationChangeTimer: any;
+
+function orientationChange(): void {
+  if (orientationChangeTimer)
+    clearTimeout(orientationChangeTimer);
+
+  document.body.classList.add('orientation-change');
+  orientationChangeTimer = setTimeout(() => {
+    orientationChangeTimer = undefined;
+    document.body.classList.remove('orientation-change');
+  }, 1000);
+}
+
+try {
+  if (screen.orientation) {
+    screen.orientation.addEventListener('change', orientationChange);
+    screenOrientationSucceeded = true;
+  }
+}
+catch {}
+
+if (!screenOrientationSucceeded) {
+  window.addEventListener('orientationchange', orientationChange);
+}
+
 platformBrowserDynamic().bootstrapModule(AppModule)
   .catch(err => console.error(err));
diff --git a/src/styles.scss b/src/styles.scss
@@ -278,3 +278,11 @@ span.p-menuitem-text {
     opacity: 1;
   }
 }
+
+.orientation-changing {
+  .controls, svg {
+    transition-duration: unset !important;
+    transition-property: unset !important;
+    transition-timing-function: unset !important;
+  }
+}