From a14e8ba250ebac3034a548d10c7fcf7591225001 Mon Sep 17 00:00:00 2001
From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Date: Tue, 13 Apr 2021 19:25:19 +0530
Subject: [PATCH] Fix: Adds favicon badge for notification alert. (#2079)
* Adds favicon badge for notification alert.
---
app/javascript/packs/application.js | 2 ++
.../shared/helpers/AudioNotificationHelper.js | 2 ++
.../shared/helpers/faviconHelper.js | 21 ++++++++++++++++++
app/views/layouts/vueapp.html.erb | 6 ++---
public/favicon-badge-16x16.png | Bin 0 -> 900 bytes
public/favicon-badge-32x32.png | Bin 0 -> 1619 bytes
public/favicon-badge-96x96.png | Bin 0 -> 5400 bytes
7 files changed, 28 insertions(+), 3 deletions(-)
create mode 100644 app/javascript/shared/helpers/faviconHelper.js
create mode 100644 public/favicon-badge-16x16.png
create mode 100644 public/favicon-badge-32x32.png
create mode 100644 public/favicon-badge-96x96.png
diff --git a/app/javascript/packs/application.js b/app/javascript/packs/application.js
index b7abc18c2..e021b1ec7 100644
--- a/app/javascript/packs/application.js
+++ b/app/javascript/packs/application.js
@@ -21,6 +21,7 @@ import i18n from '../dashboard/i18n';
import createAxios from '../dashboard/helper/APIHelper';
import commonHelpers from '../dashboard/helper/commons';
import { getAlertAudio } from '../shared/helpers/AudioNotificationHelper';
+import { initFaviconSwitcher } from '../shared/helpers/faviconHelper';
import router from '../dashboard/routes';
import store from '../dashboard/store';
import vueActionCable from '../dashboard/helper/actionCable';
@@ -80,4 +81,5 @@ window.addEventListener('load', () => {
})
);
getAlertAudio();
+ initFaviconSwitcher();
});
diff --git a/app/javascript/shared/helpers/AudioNotificationHelper.js b/app/javascript/shared/helpers/AudioNotificationHelper.js
index 90d3bcdaa..8aeb32b91 100644
--- a/app/javascript/shared/helpers/AudioNotificationHelper.js
+++ b/app/javascript/shared/helpers/AudioNotificationHelper.js
@@ -1,6 +1,7 @@
import { MESSAGE_TYPE } from 'shared/constants/messages';
const notificationAudio = require('shared/assets/audio/ding.mp3');
import axios from 'axios';
+import { showBadgeOnFavicon } from './faviconHelper';
export const playNotificationAudio = () => {
try {
@@ -74,5 +75,6 @@ export const newMessageNotification = data => {
if (enableAudioAlerts && playAudio) {
window.playAudioAlert();
+ showBadgeOnFavicon();
}
};
diff --git a/app/javascript/shared/helpers/faviconHelper.js b/app/javascript/shared/helpers/faviconHelper.js
new file mode 100644
index 000000000..6adc45c60
--- /dev/null
+++ b/app/javascript/shared/helpers/faviconHelper.js
@@ -0,0 +1,21 @@
+export const showBadgeOnFavicon = () => {
+ const favicons = document.querySelectorAll('.favicon');
+
+ favicons.forEach(favicon => {
+ const newFileName = `/favicon-badge-${favicon.sizes[[0]]}.png`;
+ favicon.href = newFileName;
+ });
+};
+
+export const initFaviconSwitcher = () => {
+ const favicons = document.querySelectorAll('.favicon');
+
+ document.addEventListener('visibilitychange', () => {
+ if (document.visibilityState === 'visible') {
+ favicons.forEach(favicon => {
+ const oldFileName = `/favicon-${favicon.sizes[[0]]}.png`;
+ favicon.href = oldFileName;
+ });
+ }
+ });
+};
diff --git a/app/views/layouts/vueapp.html.erb b/app/views/layouts/vueapp.html.erb
index 6ec5e5c01..b9350e3b9 100644
--- a/app/views/layouts/vueapp.html.erb
+++ b/app/views/layouts/vueapp.html.erb
@@ -23,9 +23,9 @@
-
-
-
+
+
+
<% end %>
diff --git a/public/favicon-badge-16x16.png b/public/favicon-badge-16x16.png
new file mode 100644
index 0000000000000000000000000000000000000000..325f317855c4dda81dce23e4b18919777c338ea2
GIT binary patch
literal 900
zcmZ`$Ye|sHnW5vMfy>ob78}87qzCYwzjrenwpxC$!xP#Wa?bl)NU4PAeohA
zM(zK|gvq=Q-zn&N&b7M)u@eVBtvE%DP*;5rmA?e<*Qga4DF~Ib5IS`hp+!ucnndU*
zfzXr+Az>3jp~cM)(-RS5q@-=nl*!E`AcXO+DQ`K&Hn?Z&gCiO!(t_OvcscBU8=$WG
zPY#J(xZ8%n&0A9CU`#f9^+y`6Ky)~8qkzu_ZX|G7
z3JbZp&1JT}rIYxufdf3&);1@<17`F(n#WdJNRf%G=q4xdVN|;yE*b=EEGup$t9upz
zJT&IZb-;^CwvduG(z)nydntgS0bqrLh@aavPkC^o2aHX0Ty)l*d3Znct5nx+?N4Z#
z8=j_d1!x+FOM?(^g``$j=AC)c4VZ3xIlsl^+-fFex5%rn7Q4Sv-CwAlQR>)Z*CrDw
zY?<5GGAC&z5$n)9{NfS%j8yzNzO0sU+A}gSUBmG8YxR8WbyGF;5<
zac0;6XNNn%hY^zdFwvxMjwsq`9O!RYUJ|iSX6SVrUyK2Cb*oQ&n7MJSNLyBGG5RET
zn(Q4F_ssEw^1&VX(u?hPMcO{C|M0VVNo?qH3OQkE*UN>o+90fY~=
Ay#N3J
literal 0
HcmV?d00001
diff --git a/public/favicon-badge-32x32.png b/public/favicon-badge-32x32.png
new file mode 100644
index 0000000000000000000000000000000000000000..e68f6912fb47429e2a232b3447e8d014e213dd54
GIT binary patch
literal 1619
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
literal 0
HcmV?d00001