From 529be8c55ee7a4b8bbc7c2ca89122595583adddf Mon Sep 17 00:00:00 2001
From: Haocen <Haocen@users.noreply.github.com>
Date: Tue, 13 Sep 2022 01:35:05 -0400
Subject: [PATCH] QoL: Native notification improvements

Only send native notification when document is not visible, clear notifications when document become visible.
---
 client/scripts/ui.js | 34 +++++++++++++++++++++-------------
 1 file changed, 21 insertions(+), 13 deletions(-)

diff --git a/client/scripts/ui.js b/client/scripts/ui.js
index 0c15984..7fff1f7 100644
--- a/client/scripts/ui.js
+++ b/client/scripts/ui.js
@@ -420,7 +420,7 @@ class Notifications {
         });
     }
 
-    _notify(message, body, closeTimeout = 20000) {
+    _notify(message, body) {
         const config = {
             body: body,
             icon: '/images/logo_transparent_128x128.png',
@@ -435,27 +435,35 @@ class Notifications {
         }
 
         // Notification is persistent on Android. We have to close it manually
-        if (closeTimeout) {
-            setTimeout(_ => notification.close(), closeTimeout);
-        }
+        const visibilitychangeHandler = () => {                             
+            if (document.visibilityState === 'visible') {    
+                notification.close();
+                document.removeEventListener('visibilitychange', visibilitychangeHandler);
+            }                                                       
+        };                                                                                
+        document.addEventListener('visibilitychange', visibilitychangeHandler);
 
         return notification;
     }
 
     _messageNotification(message) {
-        if (isURL(message)) {
-            const notification = this._notify(message, 'Click to open link');
-            this._bind(notification, e => window.open(message, '_blank', null, true));
-        } else {
-            const notification = this._notify(message, 'Click to copy text');
-            this._bind(notification, e => this._copyText(message, notification));
+        if (document.visibilityState !== 'visible') {
+            if (isURL(message)) {
+                const notification = this._notify(message, 'Click to open link');
+                this._bind(notification, e => window.open(message, '_blank', null, true));
+            } else {
+                const notification = this._notify(message, 'Click to copy text');
+                this._bind(notification, e => this._copyText(message, notification));
+            }
         }
     }
 
     _downloadNotification(message) {
-        const notification = this._notify(message, 'Click to download');
-        if (!window.isDownloadSupported) return;
-        this._bind(notification, e => this._download(notification));
+        if (document.visibilityState !== 'visible') {
+            const notification = this._notify(message, 'Click to download');
+            if (!window.isDownloadSupported) return;
+            this._bind(notification, e => this._download(notification));
+        }
     }
 
     _download(notification) {