From 19292514b9aae63f374700265888ac0252a6df11 Mon Sep 17 00:00:00 2001
From: Nathan Waters <watersnathan1@gmail.com>
Date: Tue, 27 Oct 2020 12:27:38 -0500
Subject: [PATCH] PauseOnHidden

---
 xrextras/src/aframe/xr-components.js        | 33 +++++++++++++--
 xrextras/src/pauseonhidden/pauseonhidden.js | 46 +++++++++++++++++++++
 xrextras/src/xrextras.js                    |  2 +
 3 files changed, 78 insertions(+), 3 deletions(-)
 create mode 100644 xrextras/src/pauseonhidden/pauseonhidden.js

diff --git a/xrextras/src/aframe/xr-components.js b/xrextras/src/aframe/xr-components.js
index b8cbfeb..96954b5 100644
--- a/xrextras/src/aframe/xr-components.js
+++ b/xrextras/src/aframe/xr-components.js
@@ -1,4 +1,4 @@
-/* globals XRExtras */
+/* globals XRExtras, XR8 */
 
 const {ensureXrAndExtras} = require('./ensure')
 
@@ -129,11 +129,12 @@ const xrComponents = () => {
       const componentMap = {}
 
       const addComponents = ({detail}) => {
-        detail.imageTargets.forEach(({name, metadata, properties}) => {
+        detail.imageTargets.forEach(({name, type, metadata, properties}) => {
           const el = document.createElement(this.data.primitive)
           el.setAttribute('id', `xrextras-imagetargets-${name}`)
           el.setAttribute('name', name)
-          el.setAttribute('rotated', properties.isRotated ? 'true' : 'false')
+          el.setAttribute('type', type)
+          el.setAttribute('rotated', (properties && properties.isRotated) ? 'true' : 'false')
           el.setAttribute(
             'metadata', (typeof metadata === 'string') ? metadata : JSON.stringify(metadata)
           )
@@ -667,6 +668,31 @@ const xrComponents = () => {
     },
   }
 
+  const pauseOnHiddenComponent = {
+    init() {
+      const scene = this.el.sceneEl
+      const onVisChange = () => {
+        if (document.visibilityState === 'visible') {
+          scene.play()
+        } else {
+          scene.pause()
+        }
+      }
+      XR8.addCameraPipelineModule({
+        name: 'pauseonhiddenaframe',
+        onAttach: () => {
+          document.addEventListener('visibilitychange', onVisChange)
+        },
+        onDetach: () => {
+          document.removeEventListener('visibilitychange', onVisChange)
+        },
+      })
+    },
+    remove() {
+      XR8.removeCameraPipelineModule('pauseonhiddenaframe')
+    },
+  }
+
   const faceAnchorComponent = {
     init() {
       let id_ = null
@@ -1338,6 +1364,7 @@ const xrComponents = () => {
     'xrextras-log-to-screen': logToScreenComponent,
     'xrextras-pwa-installer': pwaInstallerComponent,
     'xrextras-pause-on-blur': pauseOnBlurComponent,
+    'xrextras-pause-on-hidden': pauseOnHiddenComponent,
     'xrextras-faceanchor': faceAnchorComponent,
     'xrextras-resource': resourceComponent,
     'xrextras-pbr-material': pbrMaterialComponent,
diff --git a/xrextras/src/pauseonhidden/pauseonhidden.js b/xrextras/src/pauseonhidden/pauseonhidden.js
new file mode 100644
index 0000000..cd3bf074
--- /dev/null
+++ b/xrextras/src/pauseonhidden/pauseonhidden.js
@@ -0,0 +1,46 @@
+/* globals XR8 */
+
+// This pauses XR8 when the tab is hidden and calls resumes XR8 once the tab is visible again.
+// Useful for when you want your camera feed and MediaRecorder audio to continue even if your
+// desktop browser tab isn't focused.  It has nearly identical functionality to PauseOnBlur for
+// mobile.
+// https://developer.mozilla.org/en-US/docs/Web/API/Document/visibilitychange_event
+let pauseOnHidden = null
+
+function create() {
+  const onVisChange = () => {
+    if (document.visibilityState === 'visible') {
+      XR8.resume()
+    } else {
+      XR8.pause()
+    }
+  }
+
+  const pipelineModule = () => ({
+    name: 'pauseonhidden',
+    onAttach: () => {
+      document.addEventListener('visibilitychange', onVisChange)
+    },
+    onDetach: () => {
+      document.removeEventListener('visibilitychange', onVisChange)
+    },
+  })
+
+  return {
+    // Creates a camera pipeline module that, when installed, pauses the camera feed and processing
+    // when the tab is hidden and restarts again when it's visible
+    pipelineModule,
+  }
+}
+
+const PauseOnHiddenFactory = () => {
+  if (pauseOnHidden == null) {
+    pauseOnHidden = create()
+  }
+
+  return pauseOnHidden
+}
+
+module.exports = {
+  PauseOnHiddenFactory,
+}
diff --git a/xrextras/src/xrextras.js b/xrextras/src/xrextras.js
index df40b00..438a36a 100644
--- a/xrextras/src/xrextras.js
+++ b/xrextras/src/xrextras.js
@@ -4,6 +4,7 @@ const {DebugWebViewsFactory} = require('./debugwebviews/debug-web-views.js')
 const {FullWindowCanvasFactory} = require('./fullwindowcanvasmodule/full-window-canvas-module.js')
 const {LoadingFactory} = require('./loadingmodule/loading-module.js')
 const {PauseOnBlurFactory} = require('./pauseonblurmodule/pauseonblur.js')
+const {PauseOnHiddenFactory} = require('./pauseonhiddenmodule/pauseonhidden.js')
 const {PlayCanvasFactory} = require('./playcanvas/playcanvas.js')
 const {PwaInstallerFactory} = require('./pwainstallermodule/pwa-installer-module.js')
 const {RuntimeErrorFactory} = require('./runtimeerrormodule/runtime-error-module.js')
@@ -21,6 +22,7 @@ module.exports = {
     FullWindowCanvas: FullWindowCanvasFactory(),
     Loading: LoadingFactory(),
     PauseOnBlur: PauseOnBlurFactory(),
+    PauseOnHidden: PauseOnHiddenFactory(),
     PlayCanvas: PlayCanvasFactory(),
     PwaInstaller: PwaInstallerFactory(),
     RuntimeError: RuntimeErrorFactory(),