Merge pull request #1272 from pixelfed/frontend-ui-refactor

Frontend ui refactor

public/mix-manifest.json

@@ -11,5 +11,5 @@
     "/js/profile.js": "/js/profile.js?id=6386a007bdb1796dcc80",
     "/js/search.js": "/js/search.js?id=0d3d080dc05f4f49b204",
     "/js/status.js": "/js/status.js?id=a95243f92346f1724a35",
-    "/js/timeline.js": "/js/timeline.js?id=ba77f07b34e8ac999e39"
+    "/js/timeline.js": "/js/timeline.js?id=265d634706cec1b2653d"
 }

resources/assets/js/components/NotificationCard.vue

@@ -67,7 +67,8 @@
 		data() {
 			return {
 				notifications: {},
-				notificationCursor: 2
+				notificationCursor: 2,
+				notificationMaxId: 0,
 			};
 		},
 
@@ -91,9 +92,12 @@
 						}
 						return true;
 					});
+					let ids = res.data.map(n => n.id);
+					this.notificationMaxId = Math.max(...ids);
 					this.notifications = data;
 					$('.notification-card .loader').addClass('d-none');
 					$('.notification-card .contents').removeClass('d-none');
+					this.notificationPoll();
 				});
 			},
 
@@ -161,6 +165,32 @@
 				let username = status.account.username;
 				let id = status.id;
 				return '/p/' + username + '/' + id;
+			},
+
+			notificationPoll() {
+				let interval = this.notifications.length > 5 ? 15000 : 120000;
+				let self = this;
+				setInterval(function() {
+					axios.get('/api/v1/notifications')
+					.then(res => {
+						let data = res.data.filter(n => {
+							if(n.type == 'share' || self.notificationMaxId >= n.id) {
+								return false;
+							}
+							return true;
+						});
+						if(data.length) {
+							let ids = data.map(n => n.id);
+							self.notificationMaxId = Math.max(...ids);
+
+							self.notifications.unshift(...data);
+							let beep = new Audio('/static/beep.mp3');
+							beep.volume = 0.7;
+							beep.play();
+							$('.notification-card .far.fa-bell').addClass('fas text-danger').removeClass('far text-muted');
+						}
+					});
+				}, interval);
 			}
 		}
 	}