Merge pull request #198 from mozilla/feature/exit-on-blur

Exit scene on blur with grace period

src/assets/translations.data.json

 {
-  "en":
-  {
+  "en": {
     "entry.screen-prefix": "Enter on ",
     "entry.desktop-screen": "Screen",
     "entry.mobile-screen": "Phone",
@@ -33,7 +32,7 @@
     "audio.granted-title": "Mic permissions granted",
     "audio.granted-subtitle": "You can still mute yourself in-game",
     "audio.granted-next": "NEXT",
-    "exit.subtitle": "Your session has ended.",
+    "exit.subtitle": "Your session has ended. Refresh your browser to start a new one.",
     "autoexit.title": "Auto-ending session in ",
     "autoexit.title_units": " seconds",
     "autoexit.subtitle": "You have started another session.",

src/hub.js

@@ -58,6 +58,7 @@ import HubChannel from "./utils/hub-channel";
 
 import "./systems/personal-space-bubble";
 import "./systems/app-mode";
+import "./systems/exit-on-blur";
 
 import "./gltf-component-mappings";
 
@@ -124,6 +125,9 @@ if (!store.state.profile.has_changed_name) {
 }
 
 async function exitScene() {
+  if (NAF.connection.adapter && NAF.connection.adapter.localMediaStream) {
+    NAF.connection.adapter.localMediaStream.getTracks().forEach(t => t.stop());
+  }
   hubChannel.disconnect();
   const scene = document.querySelector("a-scene");
   scene.renderer.animate(null); // Stop animation loop, TODO A-Frame should do this

src/react-components/ui-root.js

@@ -107,6 +107,12 @@ class UIRoot extends Component {
     this.props.scene.addEventListener("loaded", this.onSceneLoaded);
     this.props.scene.addEventListener("stateadded", this.onAframeStateChanged);
     this.props.scene.addEventListener("stateremoved", this.onAframeStateChanged);
+    this.props.scene.addEventListener("exit", this.exit);
+  }
+
+  componentWillUnmount() {
+    this.props.scene.removeEventListener("loaded", this.onSceneLoaded);
+    this.props.scene.removeEventListener("exit", this.exit);
   }
 
   componentDidUpdate(prevProps) {

src/systems/exit-on-blur.js

+AFRAME.registerSystem("exit-on-blur", {
+  init() {
+    this.onBlur = this.onBlur.bind(this);
+    this.onFocus = this.onFocus.bind(this);
+
+    window.addEventListener("blur", this.onBlur);
+    window.addEventListener("focus", this.onFocus);
+
+    this.exitTimeout = null;
+  },
+
+  onBlur() {
+    if (this.el.isMobile) {
+      this.exitTimeout = setTimeout(() => {
+        this.el.dispatchEvent(new CustomEvent("exit"));
+      }, 10 * 1000);
+    }
+  },
+
+  onFocus() {
+    if (this.el.isMobile) {
+      clearTimeout(this.exitTimeout);
+    }
+  },
+
+  remove() {
+    clearTimeout(this.exitTimeout);
+    window.removeEventListener("blur", this.onBlur);
+  }
+});