Fix intel#66 - reset orientation

kenchris · Sep 21, 2018 · 582eade · 582eade
1 parent 64c8821
commit 582eade
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 10 deletions.
diff --git a/sensor-tester/build/bundled/index.html b/sensor-tester/build/bundled/index.html
diff --git a/sensor-tester/build/bundled/service-worker.js b/sensor-tester/build/bundled/service-worker.js
@@ -37,7 +37,7 @@
 /* eslint-disable indent, no-unused-vars, no-multiple-empty-lines, max-nested-callbacks, space-before-function-paren, quotes, comma-spacing */
 'use strict';
 
-var precacheConfig = [["images/app-icon-128.png","5c67806f6bd216fe041c9fc4d9a7fc8a"],["images/app-icon-144.png","aea337293cc66ce854f5f20e54b5197f"],["images/app-icon-192.png","c9d515ce9875b4fcf765e4fb1c59d700"],["images/app-icon-48.png","7894f4722aa34a56a6edbb22318ec6d1"],["index.html","d1d1517fcf921adf56b5502167c5cff7"],["manifest.json","c207e76d6dc3a3b0ce2e74c61ffe1256"]];
+var precacheConfig = [["images/app-icon-128.png","5c67806f6bd216fe041c9fc4d9a7fc8a"],["images/app-icon-144.png","aea337293cc66ce854f5f20e54b5197f"],["images/app-icon-192.png","c9d515ce9875b4fcf765e4fb1c59d700"],["images/app-icon-48.png","7894f4722aa34a56a6edbb22318ec6d1"],["index.html","2ab20f767fbab010a4d04d4d93c25f9e"],["manifest.json","c207e76d6dc3a3b0ce2e74c61ffe1256"]];
 var cacheName = 'sw-precache-v3--' + (self.registration ? self.registration.scope : '');
 
 

diff --git a/sensor-tester/src/orientation-changer.js b/sensor-tester/src/orientation-changer.js
@@ -4,6 +4,9 @@ import "@material/mwc-radio/mwc-radio.js";
 import "@material/mwc-formfield/mwc-formfield.js";
 import "@material/mwc-button/mwc-button.js";
 
+// Global as there might be multiple instances.
+let isUserAction = false;
+
 export class OrientationChanger extends LitElement {
   constructor() {
     super();
@@ -12,23 +15,34 @@ export class OrientationChanger extends LitElement {
       || docEl.mozRequestFullScreen || docEl.msRequestFullscreen;
     this._cancelFullScreen = document.exitFullscreen || document.webkitExitFullscreen
       || document.mozCancelFullScreen || document.msExitFullscreen;
-    this._orientation = screen.msOrientation || (screen.orientation || screen.mozOrientation || {});
+
+    screen.orientation.addEventListener('change', () => {
+      if (!isUserAction) {
+        this.reset();
+      }
+    });
+  }
+
+  reset() {
+    this._cancelFullScreen.call(document);
+    this.shadowRoot.querySelector('#one').checked = true;
   }
 
   async lock(orientation) {
+    isUserAction = true;
     this._requestFullScreen.call(document.documentElement);
     try {
-      await this._orientation.lock(orientation);
+      await screen.orientation.lock(orientation);
     } catch(err) {
-      console.log("screen.orientation.lock() is not available on this device.");
-      this._cancelFullScreen.call(document);
+      console.log("Cannot lock to the requested orientation.");
+      this.reset();
     };
+    isUserAction = false;
   }
 
   unlock() {
-    this._orientation.unlock();
-    this._cancelFullScreen.call(document);
-    this.shadowRoot.querySelector('#one').checked = true;
+    screen.orientation.unlock();
+    this.reset();
   }
 
   render() {

diff --git a/sensor-tester/src/sensor-tester.js b/sensor-tester/src/sensor-tester.js
@@ -25,6 +25,9 @@ class SensorTester extends LitElement {
 
       const parts = pathname.slice(1).split('/');
       this.page = parts[parts.length - 1] || 'accelerometer';
+      if (screen.orientation) {
+        screen.orientation.unlock();
+      }
       if (this.drawer && !this.drawer.persistent) {
         this.drawer.close();
       }

diff --git a/sensor-tester/src/sensor-tests-page.js b/sensor-tester/src/sensor-tests-page.js
@@ -243,7 +243,7 @@ class SensorTestsPage extends LitElement {
   
       <div class="${classMap({'hidden': this.isSupported})}">Sensor is not supported by the browser or the device.</div>
       <div class="${classMap({'hidden': !this.isSupported})}">
-        <div class="${this.referenceFrame}">
+        <div class="${classMap({'hidden': this.referenceFrame === 'device' || !screen.orientation})}">
           <orientation-changer></orientation-changer>
         </div>