NotificationCard.vue 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297
  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.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. </div>
  94. </div>
  95. </div>
  96. </transition>
  97. </div>
  98. </template>
  99. <style type="text/css" scoped></style>
  100. <script type="text/javascript">
  101. export default {
  102. data() {
  103. return {
  104. loading: true,
  105. notifications: {},
  106. notificationCursor: 2,
  107. notificationMaxId: 0,
  108. profile: {
  109. locked: false
  110. },
  111. followRequests: null
  112. };
  113. },
  114. mounted() {
  115. let self = this;
  116. this.fetchNotifications();
  117. setTimeout(function() {
  118. self.profile = window._sharedData.curUser;
  119. self.fetchFollowRequests();
  120. }, 500);
  121. },
  122. updated() {
  123. },
  124. methods: {
  125. fetchNotifications() {
  126. axios.get('/api/pixelfed/v1/notifications?pg=true')
  127. .then(res => {
  128. let data = res.data.filter(n => {
  129. if(n.type == 'share' && !n.status) {
  130. return false;
  131. }
  132. if(n.type == 'comment' && !n.status) {
  133. return false;
  134. }
  135. if(n.type == 'mention' && !n.status) {
  136. return false;
  137. }
  138. return true;
  139. });
  140. let ids = data.map(n => n.id);
  141. this.notificationMaxId = Math.min(...ids);
  142. this.notifications = data;
  143. this.loading = false;
  144. //this.notificationPoll();
  145. });
  146. },
  147. infiniteNotifications($state) {
  148. if(this.notificationCursor > 5) {
  149. $state.complete();
  150. return;
  151. }
  152. axios.get('/api/pixelfed/v1/notifications', {
  153. params: {
  154. page: this.notificationCursor
  155. }
  156. }).then(res => {
  157. if(res.data.length) {
  158. let data = res.data.filter(n => {
  159. if(n.type == 'share' && !n.status) {
  160. return false;
  161. }
  162. if(n.type == 'comment' && !n.status) {
  163. return false;
  164. }
  165. if(n.type == 'mention' && !n.status) {
  166. return false;
  167. }
  168. if(_.find(this.notifications, {id: n.id})) {
  169. return false;
  170. }
  171. return true;
  172. });
  173. let ids = data.map(n => n.id);
  174. this.notificationMaxId = Math.min(...ids);
  175. this.notifications.push(...data);
  176. this.notificationCursor++;
  177. $state.loaded();
  178. } else {
  179. $state.complete();
  180. }
  181. });
  182. },
  183. truncate(text) {
  184. if(text.length <= 15) {
  185. return text;
  186. }
  187. return text.slice(0,15) + '...'
  188. },
  189. timeAgo(ts) {
  190. return window.App.util.format.timeAgo(ts);
  191. },
  192. mentionUrl(status) {
  193. let username = status.account.username;
  194. let id = status.id;
  195. return '/p/' + username + '/' + id;
  196. },
  197. notificationPoll() {
  198. let interval = this.notifications.length > 5 ? 15000 : 120000;
  199. let self = this;
  200. setInterval(function() {
  201. axios.get('/api/pixelfed/v1/notifications')
  202. .then(res => {
  203. let data = res.data.filter(n => {
  204. if(n.type == 'share' || self.notificationMaxId >= n.id) {
  205. return false;
  206. }
  207. return true;
  208. });
  209. if(data.length) {
  210. let ids = data.map(n => n.id);
  211. self.notificationMaxId = Math.max(...ids);
  212. self.notifications.unshift(...data);
  213. let beep = new Audio('/static/beep.mp3');
  214. beep.volume = 0.7;
  215. beep.play();
  216. $('.notification-card .far.fa-bell').addClass('fas text-danger').removeClass('far text-muted');
  217. }
  218. });
  219. }, interval);
  220. },
  221. refreshNotifications() {
  222. let self = this;
  223. axios.get('/api/pixelfed/v1/notifications')
  224. .then(res => {
  225. let data = res.data.filter(n => {
  226. if(n.type == 'share' || self.notificationMaxId >= n.id) {
  227. return false;
  228. }
  229. return true;
  230. });
  231. if(data.length > 0) {
  232. let ids = data.map(n => n.id);
  233. let max = Math.max(ids);
  234. if(max <= self.notificationMaxId) {
  235. return;
  236. } else {
  237. self.notificationMaxId = max;
  238. self.notifications = data;
  239. let beep = new Audio('/static/beep.mp3');
  240. beep.volume = 0.7;
  241. beep.play();
  242. }
  243. }
  244. });
  245. },
  246. fetchFollowRequests() {
  247. if(window._sharedData.curUser.locked == true) {
  248. axios.get('/account/follow-requests.json')
  249. .then(res => {
  250. this.followRequests = res.data;
  251. })
  252. }
  253. },
  254. redirect(url) {
  255. window.location.href = url;
  256. },
  257. notificationPreview(n) {
  258. if(!n.status.hasOwnProperty('media_attachments') || !n.status.media_attachments.length) {
  259. return '/storage/no-preview.png';
  260. }
  261. return n.status.media_attachments[0].preview_url;
  262. },
  263. getProfileUrl(account) {
  264. if(account.local == true) {
  265. return account.url;
  266. }
  267. return '/i/web/profile/_/' + account.id;
  268. },
  269. getPostUrl(status) {
  270. if(status.local == true) {
  271. return status.url;
  272. }
  273. return '/i/web/post/_/' + status.account.id + '/' + status.id;
  274. }
  275. }
  276. }
  277. </script>