Add notification badge to favicon

3 files changed, 15 insertions, 0 deletions

diff --git a/app/javascript/flavours/glitch/features/ui/index.js b/app/javascript/flavours/glitch/features/ui/index.js
index c41436090..3dd894383 100644
--- a/app/javascript/flavours/glitch/features/ui/index.js
+++ b/app/javascript/flavours/glitch/features/ui/index.js
@@ -17,6 +17,7 @@ import { WrappedSwitch, WrappedRoute } from 'flavours/glitch/util/react_router_h
 import UploadArea from './components/upload_area';
 import ColumnsAreaContainer from './containers/columns_area_container';
 import classNames from 'classnames';
+import Favico from 'favico.js';
 import {
   Drawer,
   Status,
@@ -64,6 +65,7 @@ const mapStateToProps = state => ({
   isWide: state.getIn(['local_settings', 'stretch']),
   navbarUnder: state.getIn(['local_settings', 'navbar_under']),
   dropdownMenuIsOpen: state.getIn(['dropdown_menu', 'openId']) !== null,
+  unreadNotifications: state.getIn(['notifications', 'unread']),
 });
 
 const keyMap = {
@@ -115,6 +117,7 @@ export default class UI extends React.Component {
     history: PropTypes.object.isRequired,
     intl: PropTypes.object.isRequired,
     dropdownMenuIsOpen: PropTypes.bool,
+    unreadNotifications: PropTypes.number,
   };
 
   state = {
@@ -239,6 +242,8 @@ export default class UI extends React.Component {
       navigator.serviceWorker.addEventListener('message', this.handleServiceWorkerPostMessage);
     }
 
+    this.favicon = new Favico({ animation:"none" });
+
     this.props.dispatch(expandHomeTimeline());
     this.props.dispatch(expandNotifications());
     setTimeout(() => this.props.dispatch(fetchFilters()), 500);
@@ -267,6 +272,11 @@ export default class UI extends React.Component {
     if (![this.props.location.pathname, '/'].includes(prevProps.location.pathname)) {
       this.columnsAreaNode.handleChildrenContentChange();
     }
+    if (this.props.unreadNotifications != prevProps.unreadNotifications) {
+      if (this.favicon) {
+        this.favicon.badge(this.props.unreadNotifications);
+      }
+    }
   }
 
   componentWillUnmount () {
diff --git a/package.json b/package.json
index 3f6f4c7fd..5636cb883 100644
--- a/package.json
+++ b/package.json
@@ -52,6 +52,7 @@
     "escape-html": "^1.0.3",
     "exif-js": "^2.3.0",
     "express": "^4.16.2",
+    "favico.js": "^0.3.10",
     "file-loader": "^1.1.11",
     "font-awesome": "^4.7.0",
     "glob": "^7.1.1",
diff --git a/yarn.lock b/yarn.lock
index e8c41786d..6b83d0544 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3091,6 +3091,10 @@ fastparse@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/fastparse/-/fastparse-1.1.1.tgz#d1e2643b38a94d7583b479060e6c4affc94071f8"
 
+favico.js@^0.3.10:
+  version "0.3.10"
+  resolved "https://registry.yarnpkg.com/favico.js/-/favico.js-0.3.10.tgz#80586e27a117f24a8d51c18a99bdc714d4339301"
+
 faye-websocket@^0.10.0:
   version "0.10.0"
   resolved "https://registry.yarnpkg.com/faye-websocket/-/faye-websocket-0.10.0.tgz#4e492f8d04dfb6f89003507f6edbf2d501e7c6f4"