Adding browser notifications.

- Fixes #153
This commit is contained in:
Dessalines 2019-05-18 16:41:22 -07:00
parent 50231e1cc3
commit 9ae4909e91
3 changed files with 50 additions and 3 deletions

View file

@ -3,7 +3,7 @@ import { Link } from 'inferno-router';
import { Subscription } from "rxjs"; import { Subscription } from "rxjs";
import { retryWhen, delay, take } from 'rxjs/operators'; import { retryWhen, delay, take } from 'rxjs/operators';
import { WebSocketService, UserService } from '../services'; import { WebSocketService, UserService } from '../services';
import { UserOperation, GetRepliesForm, GetRepliesResponse, SortType, GetSiteResponse } from '../interfaces'; import { UserOperation, GetRepliesForm, GetRepliesResponse, SortType, GetSiteResponse, Comment} from '../interfaces';
import { msgOp } from '../utils'; import { msgOp } from '../utils';
import { version } from '../version'; import { version } from '../version';
@ -11,6 +11,7 @@ interface NavbarState {
isLoggedIn: boolean; isLoggedIn: boolean;
expanded: boolean; expanded: boolean;
expandUserDropdown: boolean; expandUserDropdown: boolean;
replies: Array<Comment>,
unreadCount: number; unreadCount: number;
siteName: string; siteName: string;
} }
@ -21,6 +22,7 @@ export class Navbar extends Component<any, NavbarState> {
emptyState: NavbarState = { emptyState: NavbarState = {
isLoggedIn: (UserService.Instance.user !== undefined), isLoggedIn: (UserService.Instance.user !== undefined),
unreadCount: 0, unreadCount: 0,
replies: [],
expanded: false, expanded: false,
expandUserDropdown: false, expandUserDropdown: false,
siteName: undefined siteName: undefined
@ -37,6 +39,7 @@ export class Navbar extends Component<any, NavbarState> {
this.userSub = UserService.Instance.sub.subscribe(user => { this.userSub = UserService.Instance.sub.subscribe(user => {
this.state.isLoggedIn = user.user !== undefined; this.state.isLoggedIn = user.user !== undefined;
this.state.unreadCount = user.unreadCount; this.state.unreadCount = user.unreadCount;
this.requestNotificationPermission();
this.setState(this.state); this.setState(this.state);
}); });
@ -48,6 +51,10 @@ export class Navbar extends Component<any, NavbarState> {
() => console.log('complete') () => console.log('complete')
); );
if (this.state.isLoggedIn) {
this.requestNotificationPermission();
}
WebSocketService.Instance.getSite(); WebSocketService.Instance.getSite();
} }
@ -151,6 +158,12 @@ export class Navbar extends Component<any, NavbarState> {
return; return;
} else if (op == UserOperation.GetReplies) { } else if (op == UserOperation.GetReplies) {
let res: GetRepliesResponse = msg; let res: GetRepliesResponse = msg;
if (res.replies.length > 0 && this.state.replies.length > 0 &&
(JSON.stringify(this.state.replies) !== JSON.stringify(res.replies))) {
this.notify(res.replies);
}
this.state.replies = res.replies;
this.sendRepliesCount(res); this.sendRepliesCount(res);
} else if (op == UserOperation.GetSite) { } else if (op == UserOperation.GetSite) {
let res: GetSiteResponse = msg; let res: GetSiteResponse = msg;
@ -187,5 +200,35 @@ export class Navbar extends Component<any, NavbarState> {
sendRepliesCount(res: GetRepliesResponse) { sendRepliesCount(res: GetRepliesResponse) {
UserService.Instance.sub.next({user: UserService.Instance.user, unreadCount: res.replies.filter(r => !r.read).length}); UserService.Instance.sub.next({user: UserService.Instance.user, unreadCount: res.replies.filter(r => !r.read).length});
} }
}
requestNotificationPermission() {
if (UserService.Instance.user) {
document.addEventListener('DOMContentLoaded', function () {
if (!Notification) {
alert('Desktop notifications not available in your browser. Try Chromium.');
return;
}
if (Notification.permission !== 'granted')
Notification.requestPermission();
});
}
}
notify(replies: Array<Comment>) {
let recentReply = replies[0];
if (Notification.permission !== 'granted')
Notification.requestPermission();
else {
var notification = new Notification(`${replies.length} Unread Messages`, {
icon: `${window.location.protocol}//${window.location.host}/static/assets/apple-touch-icon.png`,
body: recentReply.content
});
notification.onclick = () => {
this.context.router.history.push(`/post/${recentReply.post_id}/comment/${recentReply.id}`);
};
}
}
}

View file

@ -69,7 +69,7 @@ export class Post extends Component<any, PostState> {
if (this.state.scrolled_comment_id && !this.state.scrolled && lastState.comments.length > 0) { if (this.state.scrolled_comment_id && !this.state.scrolled && lastState.comments.length > 0) {
var elmnt = document.getElementById(`comment-${this.state.scrolled_comment_id}`); var elmnt = document.getElementById(`comment-${this.state.scrolled_comment_id}`);
elmnt.scrollIntoView(); elmnt.scrollIntoView();
elmnt.classList.add("mark"); elmnt.classList.add("mark-two");
this.state.scrolled = true; this.state.scrolled = true;
} }
} }

View file

@ -38,6 +38,10 @@ body, .text-white, .navbar-brand, .badge-light, .btn-secondary {
background-color: #333; background-color: #333;
} }
.mark-two {
background-color: #444 !important;
}
.md-div p { .md-div p {
margin-bottom: 0px; margin-bottom: 0px;
} }