feat(aot) Add intersection observer (#168)

Author: horymury

alwaysontop/constants.js

@@ -21,7 +21,9 @@ module.exports = {
         HIDE: 'aot-hide',
         OPEN: 'aot-open',
         SHOW: 'aot-show',
-        SHOW_MAIN_WINDOW: 'aot-main-window-show'
+        SHOW_MAIN_WINDOW: 'aot-main-window-show',
+        SHOW_AOT_WINDOW: 'show-aot-window',
+        HIDE_AOT_WINDOW: 'hide-aot-window'
     },
     STORAGE: {
         AOT_X: 'aot-x',

alwaysontop/main/index.js

@@ -88,10 +88,10 @@ const onNewWindow = (event, url, frameName, disposition, options) => {
 };
 
 /**
- * Handle blur event on mainWindow
+ * Handle show aot event.
  */
-const onBlur = () => {
-    logInfo('handling main window blur');
+const showAot = () => {
+    logInfo('show aot handler');
 
     let state;
 
@@ -106,10 +106,10 @@ const onBlur = () => {
 };
 
 /**
- * Handle blur event on mainWindow
+ * Handle hide aot event.
  */
- const onFocus = () => {
-    logInfo('handling main window focus');
+ const hideAot = () => {
+    logInfo('hide aot handler');
 
     hideWindow();
 };
@@ -129,8 +129,8 @@ const onClose = () => {
 const addWindowHandlers = () => {
     logInfo(`adding main window event handlers`);
 
-    mainWindow.on('blur', onBlur);
-    mainWindow.on('focus', onFocus);
+    mainWindow.on('blur', showAot);
+    mainWindow.on('focus', hideAot);
 
     // this might be redundant, since child windows will be closed anyway
     mainWindow.on('close', onClose);
@@ -142,8 +142,8 @@ const addWindowHandlers = () => {
 const removeWindowHandlers = () => {
     logInfo(`removing main window event handlers`);
 
-    mainWindow.removeListener('blur', onBlur);
-    mainWindow.removeListener('focus', onFocus);
+    mainWindow.removeListener('blur', showAot);
+    mainWindow.removeListener('focus', hideAot);
     mainWindow.removeListener('close', onClose);
 };
 
@@ -194,6 +194,12 @@ const onStateChange = (event, { value }) => {
             // this will switch focus to main window, which in turns triggers hide on aot
             mainWindow.show();
             break;
+        case STATES.SHOW_AOT_WINDOW:
+            showAot();
+            break;
+        case STATES.HIDE_AOT_WINDOW:
+            hideAot();
+            break;
         default:
             break;
     }

alwaysontop/render/index.js

@@ -37,13 +37,14 @@ class AlwaysOnTop extends EventEmitter {
         super();
 
         this._api = api;
-
         this._closeWindow = this._closeWindow.bind(this);
         this._dismiss = this._dismiss.bind(this);
         this._onConferenceJoined = this._onConferenceJoined.bind(this);
         this._onStateChange = this._onStateChange.bind(this);
         this._switchToMainWindow = this._switchToMainWindow.bind(this);
         this._updateLargeVideoSrc = this._updateLargeVideoSrc.bind(this);
+        this._onIntersection = this._onIntersection.bind(this);
+        this._intersectionObserver = new IntersectionObserver(this._onIntersection);
 
         this._api.on('_willDispose', this._closeWindow);
         this._api.on('videoConferenceJoined', this._onConferenceJoined);
@@ -75,6 +76,25 @@ class AlwaysOnTop extends EventEmitter {
         ipcRenderer.on(EVENTS.UPDATE_STATE, this._onStateChange);
 
         sendStateUpdate(STATES.CONFERENCE_JOINED);
+
+        this._intersectionObserver.observe(this._api.getIFrame());
+    }
+
+    /**
+     * Handles intersection events for the instance's IntersectionObserver
+     *
+     * @param {IntersectionObserverEntry[]} entries
+     * @param {IntersectionObserver} observer
+     */
+    _onIntersection(entries) {
+        logInfo('handling main window intersection');
+        const singleEntry = entries.pop();
+
+        if (singleEntry.isIntersecting) {
+            sendStateUpdate(STATES.HIDE_AOT_WINDOW);
+        } else {
+            sendStateUpdate(STATES.SHOW_AOT_WINDOW);
+        }
     }
 
     /**
@@ -193,6 +213,7 @@ class AlwaysOnTop extends EventEmitter {
     _closeWindow() {
         logInfo(`closing window and cleaning listeners`);
 
+        this._intersectionObserver.unobserve(this._api.getIFrame());
         this.emit(EXTERNAL_EVENTS.ALWAYSONTOP_WILL_CLOSE);
 
         sendStateUpdate(STATES.CLOSE);