From 0f155af32a330bc8eb79c6e3ccec5331a1e37922 Mon Sep 17 00:00:00 2001 From: Thibaut Girka Date: Thu, 6 Sep 2018 16:09:57 +0200 Subject: [PATCH] Add notification badge to favicon --- app/javascript/flavours/glitch/features/ui/index.js | 10 ++++++++++ package.json | 1 + yarn.lock | 4 ++++ 3 files changed, 15 insertions(+) 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"