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 Scene, { getMessageFromReasons } from './Scene';
|
||||||
import issueIcon from '../../images/issue-bg.png';
|
import issueIcon from '../../images/issue-bg.png';
|
||||||
import prIcon from '../../images/pr-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;
|
const PER_PAGE = 10;
|
||||||
|
|
||||||
@ -119,6 +121,7 @@ class NotificationsPage extends React.Component {
|
|||||||
super(props);
|
super(props);
|
||||||
|
|
||||||
this.notificationSent = false;
|
this.notificationSent = false;
|
||||||
|
this.isUnreadTab = false;
|
||||||
}
|
}
|
||||||
|
|
||||||
state = {
|
state = {
|
||||||
@ -142,6 +145,13 @@ class NotificationsPage extends React.Component {
|
|||||||
}
|
}
|
||||||
|
|
||||||
this.props.notificationsApi.fetchNotifications();
|
this.props.notificationsApi.fetchNotifications();
|
||||||
|
|
||||||
|
this.tabSyncer = setInterval(() => {
|
||||||
|
if (!document.hidden && this.isUnreadTab) {
|
||||||
|
this.updateTabIcon(false);
|
||||||
|
}
|
||||||
|
}, 2000);
|
||||||
|
|
||||||
this.syncer = setInterval(() => {
|
this.syncer = setInterval(() => {
|
||||||
this.props.notificationsApi.fetchNotificationsSync()
|
this.props.notificationsApi.fetchNotificationsSync()
|
||||||
.catch(error => this.setState({error}));
|
.catch(error => this.setState({error}));
|
||||||
@ -160,10 +170,7 @@ class NotificationsPage extends React.Component {
|
|||||||
|
|
||||||
componentWillUnmount () {
|
componentWillUnmount () {
|
||||||
clearInterval(this.syncer);
|
clearInterval(this.syncer);
|
||||||
}
|
clearInterval(this.tabSyncer);
|
||||||
|
|
||||||
diffForWebNotification (nextProps, nextState) {
|
|
||||||
this.sendWebNotification();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
onChangePage = page => {
|
onChangePage = page => {
|
||||||
@ -225,13 +232,27 @@ class NotificationsPage extends React.Component {
|
|||||||
this.props.notificationsApi.setNotificationsPermission(...args);
|
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 => {
|
sendWebNotification = newNotifcations => {
|
||||||
if (this.notificationSent || newNotifcations.length === 0) {
|
if (this.notificationSent || newNotifcations.length === 0) {
|
||||||
return;
|
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.
|
// Set this even if we don't actually send the notification due to permissions.
|
||||||
this.notificationSent = true;
|
this.notificationSent = true;
|
||||||
|
this.updateTabIcon();
|
||||||
|
|
||||||
// No permission, no notification.
|
// No permission, no notification.
|
||||||
if (this.props.notificationsApi.notificationsPermission !== 'granted') {
|
if (this.props.notificationsApi.notificationsPermission !== 'granted') {
|
||||||
@ -332,8 +353,6 @@ class NotificationsPage extends React.Component {
|
|||||||
this.sendWebNotification(this.props.notificationsApi.newChanges);
|
this.sendWebNotification(this.props.notificationsApi.newChanges);
|
||||||
}
|
}
|
||||||
|
|
||||||
console.warn(this.props.notificationsApi);
|
|
||||||
|
|
||||||
return {
|
return {
|
||||||
notifications: scoredAndSortedNotifications,
|
notifications: scoredAndSortedNotifications,
|
||||||
queuedCount: notificationsQueued.length,
|
queuedCount: notificationsQueued.length,
|
||||||
|
Loading…
Reference in New Issue
Block a user