Fix intel#66 - reset orientation

kenchris · Sep 21, 2018 · 481cc5e · 481cc5e
1 parent 64c8821
commit 481cc5e
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 8 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","9ecd41b9adc1d48655d39840f52ece43"],["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
@@ -12,23 +12,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 || {});
+
+    this.isChangedByMe = false;
+
+    screen.orientation.addEventListener('change', () => {
+      if (!this.isChangedByMe) {
+        this.shadowRoot.querySelector('#one').checked = true;
+      }
+      // The event listener is called after lock() promise resolves.
+      this.isChangedByMe = false;
+    });
   }
 
   async lock(orientation) {
+    this.isChangedByMe = 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.");
+      console.log("Cannot lock to the requested orientation.");
       this._cancelFullScreen.call(document);
+      this.shadowRoot.querySelector('#one').checked = true;
+      this.isChangedByMe = false;
     };
   }
 
   unlock() {
-    this._orientation.unlock();
+    screen.orientation.unlock();
     this._cancelFullScreen.call(document);
-    this.shadowRoot.querySelector('#one').checked = true;
   }
 
   render() {

diff --git a/sensor-tester/src/sensor-tester.js b/sensor-tester/src/sensor-tester.js
@@ -25,6 +25,14 @@ class SensorTester extends LitElement {
 
       const parts = pathname.slice(1).split('/');
       this.page = parts[parts.length - 1] || 'accelerometer';
+
+      if (screen.orientation) {
+        screen.orientation.unlock();
+      }
+      const exitFullscreen = document.exitFullscreen || document.webkitExitFullscreen
+        || document.mozCancelFullScreen || document.msExitFullscreen;
+      exitFullscreen.call(document);
+
       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>