feat(alwaysontop): add dismiss button and event

Author: gimre

README.md

@@ -80,6 +80,8 @@ alwaysOnTop.on('will-close', handleAlwaysOnTopClose);
 
 `setupAlwaysOnTopRender` return an instance of EventEmitter with the following events:
 
+* _dismissed_ - emitted when the always on top window is explicitly dismissed via its close button
+
 * _will-close_ - emitted right before the always on top window is going to close
 
 #### WiFi Stats

alwaysontop/alwaysontop.css

@@ -17,3 +17,42 @@ video {
     margin: 0;
     padding: 0;
 }
+
+html:hover .dismiss {
+    opacity: 1;
+}
+
+.dismiss {
+    align-items: center;
+    background-color: rgba(40, 52, 71, 0.7);
+    border-radius: 50%;
+    color: white;
+    cursor: pointer;
+    display: flex;
+    font-size: 20px;
+    height: 25px;
+    justify-content: center;
+    opacity: 0;
+    position: absolute;
+    right: 8px;
+    top: 16px;
+    transition: opacity .25s linear;
+    width: 25px;
+}
+
+.dismiss:after, .dismiss:before {
+    display: block;
+    content: ' ';
+    height: 2px;
+    background-color: white;
+    position: absolute;
+    width: calc(100% - 12px);
+}
+
+.dismiss:after {
+    transform: rotate(45deg);
+}
+
+.dismiss:before {
+    transform: rotate(-45deg);
+}

alwaysontop/alwaysontop.js

@@ -5,7 +5,8 @@ const {
     onload,
     onbeforeunload,
     shouldImplementDrag,
-    getCurrentSize
+    getCurrentSize,
+    dismiss
 } = window.alwaysOnTop;
 
 /**
@@ -15,6 +16,11 @@ const {
  */
 let initialSize;
 
+const dismissButton = document.querySelector('.dismiss');
+if (dismissButton) {
+    dismissButton.addEventListener('click', dismiss);
+}
+
 window.addEventListener('beforeunload', onbeforeunload);
 
 window.addEventListener('dblclick', ondblclick);

alwaysontop/constants.js

@@ -1,4 +1,5 @@
 module.exports = {
+    ALWAYSONTOP_DISMISSED: 'dismissed',
     ALWAYSONTOP_WILL_CLOSE: 'will-close',
     SIZE: {
         width: 320,

alwaysontop/render.js

@@ -5,7 +5,7 @@ const { EventEmitter } = require('events');
 const os = require('os');
 const path = require('path');
 
-const { ALWAYSONTOP_WILL_CLOSE, SIZE } = require('./constants');
+const { ALWAYSONTOP_DISMISSED, ALWAYSONTOP_WILL_CLOSE, SIZE } = require('./constants');
 
 /**
  * Returieves and trying to parse a numeric value from the local storage.
@@ -51,6 +51,7 @@ class AlwaysOnTop extends EventEmitter {
         this._onConferenceJoined = this._onConferenceJoined.bind(this);
         this._onConferenceLeft = this._onConferenceLeft.bind(this);
         this._onIntersection = this._onIntersection.bind(this);
+        this._dismiss = this._dismiss.bind(this);
 
         this._api = api;
         this._jitsiMeetElectronWindow = remote.getCurrentWindow();
@@ -250,6 +251,15 @@ class AlwaysOnTop extends EventEmitter {
             this._setupAlwaysOnTopWindow();
         }
     }
+    /**
+     * Dismisses always on top window.
+     *
+     * @returns {void}
+     */
+    _dismiss() {
+        this.emit(ALWAYSONTOP_DISMISSED);
+        this._closeAlwaysOnTopWindow();
+    }
 
     /**
      * Sets all necessary content (HTML, CSS, JS) to the always on top window.
@@ -262,6 +272,7 @@ class AlwaysOnTop extends EventEmitter {
         }
         this._alwaysOnTopWindow.alwaysOnTop = {
             api: this._api,
+            dismiss: this._dismiss,
             onload: this._updateLargeVideoSrc,
             onbeforeunload: () => {
                 this.emit(ALWAYSONTOP_WILL_CLOSE);
@@ -319,6 +330,7 @@ class AlwaysOnTop extends EventEmitter {
             this._alwaysOnTopWindow.document.body.innerHTML = `
               <div id="react"></div>
               <video autoplay="" id="video" style="transform: none;" muted></video>
+              <div class="dismiss"></div>
               <link rel="stylesheet" href="file://${ cssPath }">
             `;