mirror of
https://github.com/nickzuber/meteorite.git
synced 2024-09-11 11:36:03 +03:00
Add tab icon syncing with notificaitons
This commit is contained in:
parent
97f8402c91
commit
ddc382fb3f
BIN
public/iconDot.png
Normal file
BIN
public/iconDot.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 36 KiB |
BIN
src/images/iconDot.png
Normal file
BIN
src/images/iconDot.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 36 KiB |
@ -14,6 +14,8 @@ import { Reasons, Badges } from '../../constants/reasons';
|
||||
import Scene, { getMessageFromReasons } from './Scene';
|
||||
import issueIcon from '../../images/issue-bg.png';
|
||||
import prIcon from '../../images/pr-bg.png';
|
||||
import tabIcon from '../../images/icon.png';
|
||||
import tabDotIcon from '../../images/iconDot.png';
|
||||
|
||||
const PER_PAGE = 10;
|
||||
|
||||
@ -119,6 +121,7 @@ class NotificationsPage extends React.Component {
|
||||
super(props);
|
||||
|
||||
this.notificationSent = false;
|
||||
this.isUnreadTab = false;
|
||||
}
|
||||
|
||||
state = {
|
||||
@ -142,6 +145,13 @@ class NotificationsPage extends React.Component {
|
||||
}
|
||||
|
||||
this.props.notificationsApi.fetchNotifications();
|
||||
|
||||
this.tabSyncer = setInterval(() => {
|
||||
if (!document.hidden && this.isUnreadTab) {
|
||||
this.updateTabIcon(false);
|
||||
}
|
||||
}, 2000);
|
||||
|
||||
this.syncer = setInterval(() => {
|
||||
this.props.notificationsApi.fetchNotificationsSync()
|
||||
.catch(error => this.setState({error}));
|
||||
@ -160,10 +170,7 @@ class NotificationsPage extends React.Component {
|
||||
|
||||
componentWillUnmount () {
|
||||
clearInterval(this.syncer);
|
||||
}
|
||||
|
||||
diffForWebNotification (nextProps, nextState) {
|
||||
this.sendWebNotification();
|
||||
clearInterval(this.tabSyncer);
|
||||
}
|
||||
|
||||
onChangePage = page => {
|
||||
@ -225,13 +232,27 @@ class NotificationsPage extends React.Component {
|
||||
this.props.notificationsApi.setNotificationsPermission(...args);
|
||||
}
|
||||
|
||||
updateTabIcon (hasUnread = true) {
|
||||
this.isUnreadTab = hasUnread;
|
||||
var link = document.querySelector("link[rel*='icon']") || document.createElement('link');
|
||||
link.rel = 'shortcut icon';
|
||||
link.href = hasUnread ? tabDotIcon : tabIcon;
|
||||
document.getElementsByTagName('head')[0].appendChild(link);
|
||||
}
|
||||
|
||||
sendWebNotification = newNotifcations => {
|
||||
if (this.notificationSent || newNotifcations.length === 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Only show these notifications and title change if the tab is out of focus.
|
||||
if (!document.hidden) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Set this even if we don't actually send the notification due to permissions.
|
||||
this.notificationSent = true;
|
||||
this.updateTabIcon();
|
||||
|
||||
// No permission, no notification.
|
||||
if (this.props.notificationsApi.notificationsPermission !== 'granted') {
|
||||
@ -332,8 +353,6 @@ class NotificationsPage extends React.Component {
|
||||
this.sendWebNotification(this.props.notificationsApi.newChanges);
|
||||
}
|
||||
|
||||
console.warn(this.props.notificationsApi);
|
||||
|
||||
return {
|
||||
notifications: scoredAndSortedNotifications,
|
||||
queuedCount: notificationsQueued.length,
|
||||
|
Loading…
Reference in New Issue
Block a user