NotificationCard.vue 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324
  1. <template>
  2. <div>
  3. <transition name="fade">
  4. <div class="card notification-card shadow-none border">
  5. <div v-if="loading" class="card-body loader text-center" style="height: 240px;">
  6. <div class="spinner-border" role="status">
  7. <span class="sr-only">Loading...</span>
  8. </div>
  9. </div>
  10. <div v-if="!loading && notifications.length > 0" class="card-body px-0 py-0 contents" style="height: 240px; overflow-y: scroll;">
  11. <div v-if="profile.locked" class="media align-items-center mt-n2 px-3 py-2 border-bottom border-lighter bg-light cursor-pointer" @click="redirect('/account/follow-requests')">
  12. <div class="media-body font-weight-light pt-2 small d-flex align-items-center justify-content-between">
  13. <p class="mb-0 text-lighter"><i class="fas fa-cog text-light"></i></p>
  14. <p class="text-center pt-1 mb-1 text-dark font-weight-bold"><strong>{{followRequests.count}}</strong> Follow Requests</p>
  15. <p class="mb-0 text-lighter"><i class="fas fa-chevron-right"></i></p>
  16. </div>
  17. </div>
  18. <div v-if="notifications.length > 0" class="media align-items-center px-3 py-2 border-bottom border-light" v-for="(n, index) in notifications">
  19. <img class="mr-2 rounded-circle" style="border:1px solid #ccc" :src="n.account.avatar" alt="" width="32px" height="32px" onerror="this.onerror=null;this.src='/storage/avatars/default.png';">
  20. <div class="media-body font-weight-light small">
  21. <div v-if="n.type == 'favourite'">
  22. <p class="my-0">
  23. <a :href="getProfileUrl(n.account)" class="font-weight-bold text-dark word-break" :title="n.account.username">{{n.account.local == false ? '@':''}}{{truncate(n.account.username)}}</a> liked your
  24. <span v-if="n.status && n.status.hasOwnProperty('media_attachments')">
  25. <a class="font-weight-bold" v-bind:href="getPostUrl(n.status)" :id="'fvn-' + n.id">post</a>.
  26. <b-popover :target="'fvn-' + n.id" title="" triggers="hover" placement="top" boundary="window">
  27. <img :src="notificationPreview(n)" width="100px" height="100px" style="object-fit: cover;">
  28. </b-popover>
  29. </span>
  30. <span v-else>
  31. <a class="font-weight-bold" v-bind:href="getPostUrl(n.status)">post</a>.
  32. </span>
  33. </p>
  34. </div>
  35. <div v-else-if="n.type == 'comment'">
  36. <p class="my-0">
  37. <a :href="getProfileUrl(n.account)" class="font-weight-bold text-dark word-break" :title="n.account.username">{{n.account.local == false ? '@':''}}{{truncate(n.account.username)}}</a> commented on your <a class="font-weight-bold" v-bind:href="getPostUrl(n.status)">post</a>.
  38. </p>
  39. </div>
  40. <div v-else-if="n.type == 'mention'">
  41. <p class="my-0">
  42. <a :href="getProfileUrl(n.account)" class="font-weight-bold text-dark word-break" :title="n.account.username">{{n.account.local == false ? '@':''}}{{truncate(n.account.username)}}</a> <a class="font-weight-bold" v-bind:href="mentionUrl(n.status)">mentioned</a> you.
  43. </p>
  44. </div>
  45. <div v-else-if="n.type == 'follow'">
  46. <p class="my-0">
  47. <a :href="getProfileUrl(n.account)" class="font-weight-bold text-dark word-break" :title="n.account.username">{{n.account.local == false ? '@':''}}{{truncate(n.account.username)}}</a> followed you.
  48. </p>
  49. </div>
  50. <div v-else-if="n.type == 'share'">
  51. <p class="my-0">
  52. <a :href="getProfileUrl(n.account)" class="font-weight-bold text-dark word-break" :title="n.account.username">{{n.account.local == false ? '@':''}}{{truncate(n.account.username)}}</a> shared your <a class="font-weight-bold" v-bind:href="getPostUrl(n.status)">post</a>.
  53. </p>
  54. </div>
  55. <div v-else-if="n.type == 'modlog'">
  56. <p class="my-0">
  57. <a :href="getProfileUrl(n.account)" class="font-weight-bold text-dark word-break" :title="n.account.username">{{truncate(n.account.username)}}</a> updated a <a class="font-weight-bold" v-bind:href="n.modlog.url">modlog</a>.
  58. </p>
  59. </div>
  60. <div v-else-if="n.type == 'tagged'">
  61. <p class="my-0">
  62. <a :href="getProfileUrl(n.account)" class="font-weight-bold text-dark word-break" :title="n.account.username">{{n.account.local == false ? '@':''}}{{truncate(n.account.username)}}</a> tagged you in a <a class="font-weight-bold" v-bind:href="n.tagged.post_url">post</a>.
  63. </p>
  64. </div>
  65. <div v-else-if="n.type == 'direct'">
  66. <p class="my-0">
  67. <a :href="getProfileUrl(n.account)" class="font-weight-bold text-dark word-break" :title="n.account.username">{{n.account.local == false ? '@':''}}{{truncate(n.account.username)}}</a> sent a <a class="font-weight-bold" v-bind:href="'/account/direct/t/'+n.account.id">dm</a>.
  68. </p>
  69. </div>
  70. <div v-else>
  71. <p class="my-0">
  72. We cannot display this notification at this time.
  73. </p>
  74. </div>
  75. </div>
  76. <div class="small text-muted font-weight-bold" :title="n.created_at">{{timeAgo(n.created_at)}}</div>
  77. </div>
  78. <div v-if="notifications.length">
  79. <infinite-loading @infinite="infiniteNotifications">
  80. <div slot="no-results" class="font-weight-bold"></div>
  81. <div slot="no-more" class="font-weight-bold"></div>
  82. </infinite-loading>
  83. </div>
  84. <div v-if="notifications.length == 0" class="text-lighter text-center py-3">
  85. <p class="mb-0"><i class="fas fa-inbox fa-3x"></i></p>
  86. <p class="mb-0 small font-weight-bold">0 Notifications!</p>
  87. </div>
  88. </div>
  89. <div v-if="!loading && !notifications.length" class="card-body px-0 py-0" style="height: 240px;">
  90. <div class="text-lighter text-center py-3">
  91. <p class="mb-0"><i class="fas fa-inbox fa-3x"></i></p>
  92. <p class="mb-0 small font-weight-bold">No notifications yet</p>
  93. <p v-if="showRefresh && !attemptedRefresh" class="mt-2 small font-weight-bold text-primary cursor-pointer" @click="refreshNotifications"><i class="fas fa-redo"></i> Refresh</p>
  94. </div>
  95. </div>
  96. </div>
  97. </transition>
  98. </div>
  99. </template>
  100. <style type="text/css" scoped></style>
  101. <script type="text/javascript">
  102. export default {
  103. data() {
  104. return {
  105. loading: true,
  106. notifications: {},
  107. notificationCursor: 2,
  108. notificationMaxId: 0,
  109. profile: {
  110. locked: false
  111. },
  112. followRequests: null,
  113. showRefresh: false,
  114. attemptedRefresh: false
  115. };
  116. },
  117. mounted() {
  118. let self = this;
  119. this.fetchNotifications();
  120. setTimeout(function() {
  121. self.profile = window._sharedData.curUser;
  122. self.fetchFollowRequests();
  123. }, 1500);
  124. },
  125. updated() {
  126. },
  127. methods: {
  128. fetchNotifications() {
  129. axios.get('/api/pixelfed/v1/notifications?pg=true')
  130. .then(res => {
  131. let data = res.data.filter(n => {
  132. if(n.type == 'share' && !n.status) {
  133. return false;
  134. }
  135. if(n.type == 'comment' && !n.status) {
  136. return false;
  137. }
  138. if(n.type == 'mention' && !n.status) {
  139. return false;
  140. }
  141. if(n.type == 'favourite' && !n.status) {
  142. return false;
  143. }
  144. if(n.type == 'follow' && !n.account) {
  145. return false;
  146. }
  147. return true;
  148. });
  149. let ids = data.map(n => n.id);
  150. this.notificationMaxId = Math.min(...ids);
  151. this.notifications = data;
  152. this.loading = false;
  153. if(data.length == 0 && !this.attemptedRefresh) {
  154. this.showRefresh = true;
  155. }
  156. //this.notificationPoll();
  157. });
  158. },
  159. infiniteNotifications($state) {
  160. if(this.notificationCursor > 5) {
  161. $state.complete();
  162. return;
  163. }
  164. axios.get('/api/pixelfed/v1/notifications', {
  165. params: {
  166. max_id: this.notificationMaxId
  167. }
  168. }).then(res => {
  169. if(res.data.length) {
  170. let data = res.data.filter(n => {
  171. if(n.type == 'share' && !n.status) {
  172. return false;
  173. }
  174. if(n.type == 'comment' && !n.status) {
  175. return false;
  176. }
  177. if(n.type == 'mention' && !n.status) {
  178. return false;
  179. }
  180. if(n.type == 'favourite' && !n.status) {
  181. return false;
  182. }
  183. if(n.type == 'follow' && !n.account) {
  184. return false;
  185. }
  186. if(_.find(this.notifications, {id: n.id})) {
  187. return false;
  188. }
  189. return true;
  190. });
  191. let ids = data.map(n => n.id);
  192. this.notificationMaxId = Math.min(...ids);
  193. this.notifications.push(...data);
  194. this.notificationCursor++;
  195. $state.loaded();
  196. } else {
  197. $state.complete();
  198. }
  199. });
  200. },
  201. truncate(text) {
  202. if(text.length <= 15) {
  203. return text;
  204. }
  205. return text.slice(0,15) + '...'
  206. },
  207. timeAgo(ts) {
  208. return window.App.util.format.timeAgo(ts);
  209. },
  210. mentionUrl(status) {
  211. let username = status.account.username;
  212. let id = status.id;
  213. return '/p/' + username + '/' + id;
  214. },
  215. notificationPoll() {
  216. let interval = this.notifications.length > 5 ? 15000 : 120000;
  217. let self = this;
  218. setInterval(function() {
  219. axios.get('/api/pixelfed/v1/notifications')
  220. .then(res => {
  221. let data = res.data.filter(n => {
  222. if(n.type == 'share' || self.notificationMaxId >= n.id) {
  223. return false;
  224. }
  225. return true;
  226. });
  227. if(data.length) {
  228. let ids = data.map(n => n.id);
  229. self.notificationMaxId = Math.max(...ids);
  230. self.notifications.unshift(...data);
  231. let beep = new Audio('/static/beep.mp3');
  232. beep.volume = 0.7;
  233. beep.play();
  234. $('.notification-card .far.fa-bell').addClass('fas text-danger').removeClass('far text-muted');
  235. }
  236. });
  237. }, interval);
  238. },
  239. refreshNotifications() {
  240. let self = this;
  241. axios.get('/api/pixelfed/v1/notifications')
  242. .then(res => {
  243. let data = res.data.filter(n => {
  244. if(n.type == 'share' || self.notificationMaxId >= n.id) {
  245. return false;
  246. }
  247. return true;
  248. });
  249. if(data.length > 0) {
  250. let ids = data.map(n => n.id);
  251. let max = Math.max(ids);
  252. if(max <= self.notificationMaxId) {
  253. return;
  254. } else {
  255. self.notificationMaxId = max;
  256. self.notifications = data;
  257. let beep = new Audio('/static/beep.mp3');
  258. beep.volume = 0.7;
  259. beep.play();
  260. }
  261. }
  262. });
  263. },
  264. fetchFollowRequests() {
  265. if(window._sharedData.curUser.locked == true) {
  266. axios.get('/account/follow-requests.json')
  267. .then(res => {
  268. this.followRequests = res.data;
  269. })
  270. }
  271. },
  272. redirect(url) {
  273. window.location.href = url;
  274. },
  275. notificationPreview(n) {
  276. if(!n.status || !n.status.hasOwnProperty('media_attachments') || !n.status.media_attachments.length) {
  277. return '/storage/no-preview.png';
  278. }
  279. return n.status.media_attachments[0].preview_url;
  280. },
  281. getProfileUrl(account) {
  282. if(account.local == true) {
  283. return account.url;
  284. }
  285. return '/i/web/profile/_/' + account.id;
  286. },
  287. getPostUrl(status) {
  288. if(!status) {
  289. return;
  290. }
  291. if(!status.hasOwnProperty('local') || status.local == true) {
  292. return status.url;
  293. }
  294. return '/i/web/post/_/' + status.account.id + '/' + status.id;
  295. },
  296. refreshNotifications() {
  297. this.attemptedRefresh = true;
  298. this.fetchNotifications();
  299. }
  300. }
  301. }
  302. </script>