Fix #654 stereo: cannot dismiss "Please rotate" overlay

mistic100 · Mar 26, 2022 · 0c37d39 · 0c37d39
1 parent 0535864
commit 0c37d39
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 13 deletions.
diff --git a/src/components/Overlay.js b/src/components/Overlay.js
@@ -56,9 +56,8 @@ export class Overlay extends AbstractComponent {
     this.subtext.className = 'psv-overlay-subtext';
     this.container.appendChild(this.subtext);
 
-    this.container.addEventListener('mouseup', this);
-
-    document.addEventListener('keydown', this);
+    this.psv.on(EVENTS.CLICK, this);
+    this.psv.on(EVENTS.KEY_PRESS, this);
 
     super.hide();
   }
@@ -67,7 +66,8 @@ export class Overlay extends AbstractComponent {
    * @override
    */
   destroy() {
-    document.removeEventListener('keydown', this);
+    this.psv.off(EVENTS.CLICK, this);
+    this.psv.off(EVENTS.KEY_PRESS, this);
 
     delete this.image;
     delete this.text;
@@ -84,10 +84,18 @@ export class Overlay extends AbstractComponent {
   handleEvent(e) {
     /* eslint-disable */
     switch (e.type) {
-      // @formatter:off
-      case 'mouseup':  this.prop.dissmisable && this.hide(); break;
-      case 'keydown':  e.key === KEY_CODES.Escape && this.prop.dissmisable && this.hide(); break;
-      // @formatter:on
+      case EVENTS.CLICK:
+        if (this.isVisible() && this.prop.dissmisable) {
+          this.hide();
+          e.stopPropagation();
+        }
+        break;
+      case EVENTS.KEY_PRESS:
+        if (this.isVisible() && this.prop.dissmisable && e.args[0] === KEY_CODES.Escape) {
+          this.hide();
+          e.preventDefault();
+        }
+        break;
     }
     /* eslint-enable */
   }

diff --git a/src/components/Panel.js b/src/components/Panel.js
@@ -77,20 +77,20 @@ export class Panel extends AbstractComponent {
     this.psv.container.addEventListener('mousemove', this);
     this.psv.container.addEventListener('touchmove', this);
 
-    document.addEventListener('keydown', this);
+    this.psv.on(EVENTS.KEY_PRESS, this);
   }
 
   /**
    * @override
    */
   destroy() {
+    this.psv.off(EVENTS.KEY_PRESS, this);
+
     this.psv.container.removeEventListener('mousemove', this);
     this.psv.container.removeEventListener('touchmove', this);
     this.psv.container.removeEventListener('mouseup', this);
     this.psv.container.removeEventListener('touchend', this);
 
-    document.removeEventListener('keydown', this);
-
     delete this.prop;
     delete this.content;
 
@@ -112,7 +112,12 @@ export class Panel extends AbstractComponent {
       case 'touchmove':  this.__onTouchMove(e);  break;
       case 'mouseup':    this.__onMouseUp(e);    break;
       case 'touchend':   this.__onMouseUp(e);    break;
-      case 'keydown':    e.key === KEY_CODES.Escape && this.hide(); break;
+      case EVENTS.KEY_PRESS:
+        if (this.isVisible() && e.args[0] === KEY_CODES.Escape) {
+          this.hide();
+          e.preventDefault();
+        }
+        break;
       // @formatter:on
     }
     /* eslint-enable */

diff --git a/src/plugins/stereo/index.js b/src/plugins/stereo/index.js
@@ -245,7 +245,7 @@ export class StereoPlugin extends AbstractPlugin {
     let displayRotateMessageTimeout;
 
     const displayRotateMessage = () => {
-      if (this.isEnabled() && window.innerHeight > window.innerWidth) {
+      if (window.innerHeight > window.innerWidth) {
         this.psv.overlay.show({
           id     : ID_OVERLAY_PLEASE_ROTATE,
           image  : mobileRotateIcon,