NotificationCard.vue 7.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241
  1. <template>
  2. <div>
  3. <transition name="fade">
  4. <div class="card notification-card shadow-none border">
  5. <div class="card-body loader text-center" style="height: 200px;">
  6. <div class="spinner-border" role="status">
  7. <span class="sr-only">Loading...</span>
  8. </div>
  9. </div>
  10. <div v-if="notifications.length > 0" class="card-body px-0 py-0 contents" style="max-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="n.account.url" class="font-weight-bold text-dark word-break" :title="n.account.username">{{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="n.status.url" :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">
  28. </b-popover>
  29. </span>
  30. <span v-else>
  31. <a class="font-weight-bold" v-bind:href="n.status.url">post</a>.
  32. </span>
  33. </p>
  34. </div>
  35. <div v-else-if="n.type == 'comment'">
  36. <p class="my-0">
  37. <a :href="n.account.url" class="font-weight-bold text-dark word-break" :title="n.account.username">{{truncate(n.account.username)}}</a> commented on your <a class="font-weight-bold" v-bind:href="n.status.url">post</a>.
  38. </p>
  39. </div>
  40. <div v-else-if="n.type == 'mention'">
  41. <p class="my-0">
  42. <a :href="n.account.url" class="font-weight-bold text-dark word-break" :title="n.account.username">{{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="n.account.url" class="font-weight-bold text-dark word-break" :title="n.account.username">{{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="n.account.url" class="font-weight-bold text-dark word-break" :title="n.account.username">{{truncate(n.account.username)}}</a> shared your <a class="font-weight-bold" v-bind:href="n.status.url">post</a>.
  53. </p>
  54. </div>
  55. <div v-else-if="n.type == 'modlog'">
  56. <p class="my-0">
  57. <a :href="n.account.url" 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>
  61. <div class="small text-muted font-weight-bold" :title="n.created_at">{{timeAgo(n.created_at)}}</div>
  62. </div>
  63. <div v-if="notifications.length">
  64. <infinite-loading @infinite="infiniteNotifications">
  65. <div slot="no-results" class="font-weight-bold"></div>
  66. <div slot="no-more" class="font-weight-bold"></div>
  67. </infinite-loading>
  68. </div>
  69. <div v-if="notifications.length == 0" class="text-lighter text-center py-3">
  70. <p class="mb-0"><i class="fas fa-inbox fa-3x"></i></p>
  71. <p class="mb-0 small font-weight-bold">0 Notifications!</p>
  72. </div>
  73. </div>
  74. </div>
  75. </transition>
  76. </div>
  77. </template>
  78. <style type="text/css" scoped></style>
  79. <script type="text/javascript">
  80. export default {
  81. data() {
  82. return {
  83. notifications: {},
  84. notificationCursor: 2,
  85. notificationMaxId: 0,
  86. profile: {
  87. locked: false
  88. },
  89. followRequests: null
  90. };
  91. },
  92. mounted() {
  93. let self = this;
  94. this.fetchNotifications();
  95. setTimeout(function() {
  96. self.profile = window._sharedData.curUser;
  97. self.fetchFollowRequests();
  98. }, 500);
  99. },
  100. updated() {
  101. },
  102. methods: {
  103. fetchNotifications() {
  104. axios.get('/api/pixelfed/v1/notifications?pg=true')
  105. .then(res => {
  106. let data = res.data;
  107. let ids = res.data.map(n => n.id);
  108. this.notificationMaxId = Math.min(...ids);
  109. this.notifications = data;
  110. $('.notification-card .loader').addClass('d-none');
  111. $('.notification-card .contents').removeClass('d-none');
  112. //this.notificationPoll();
  113. });
  114. },
  115. infiniteNotifications($state) {
  116. if(this.notificationCursor > 5) {
  117. $state.complete();
  118. return;
  119. }
  120. axios.get('/api/pixelfed/v1/notifications', {
  121. params: {
  122. page: this.notificationCursor
  123. }
  124. }).then(res => {
  125. if(res.data.length) {
  126. let data = res.data.filter(n => {
  127. if(n.type == 'share' && !status) {
  128. return false;
  129. }
  130. if(_.find(this.notifications, {id: n.id})) {
  131. return false;
  132. }
  133. return true;
  134. });
  135. this.notifications.push(...data);
  136. this.notificationCursor++;
  137. $state.loaded();
  138. } else {
  139. $state.complete();
  140. }
  141. });
  142. },
  143. truncate(text) {
  144. if(text.length <= 15) {
  145. return text;
  146. }
  147. return text.slice(0,15) + '...'
  148. },
  149. timeAgo(ts) {
  150. return window.App.util.format.timeAgo(ts);
  151. },
  152. mentionUrl(status) {
  153. let username = status.account.username;
  154. let id = status.id;
  155. return '/p/' + username + '/' + id;
  156. },
  157. notificationPoll() {
  158. let interval = this.notifications.length > 5 ? 15000 : 120000;
  159. let self = this;
  160. setInterval(function() {
  161. axios.get('/api/pixelfed/v1/notifications')
  162. .then(res => {
  163. let data = res.data.filter(n => {
  164. if(n.type == 'share' || self.notificationMaxId >= n.id) {
  165. return false;
  166. }
  167. return true;
  168. });
  169. if(data.length) {
  170. let ids = data.map(n => n.id);
  171. self.notificationMaxId = Math.max(...ids);
  172. self.notifications.unshift(...data);
  173. let beep = new Audio('/static/beep.mp3');
  174. beep.volume = 0.7;
  175. beep.play();
  176. $('.notification-card .far.fa-bell').addClass('fas text-danger').removeClass('far text-muted');
  177. }
  178. });
  179. }, interval);
  180. },
  181. refreshNotifications() {
  182. let self = this;
  183. axios.get('/api/pixelfed/v1/notifications')
  184. .then(res => {
  185. let data = res.data.filter(n => {
  186. if(n.type == 'share' || self.notificationMaxId >= n.id) {
  187. return false;
  188. }
  189. return true;
  190. });
  191. if(data.length > 0) {
  192. let ids = data.map(n => n.id);
  193. let max = Math.max(ids);
  194. if(max <= self.notificationMaxId) {
  195. return;
  196. } else {
  197. self.notificationMaxId = max;
  198. self.notifications = data;
  199. let beep = new Audio('/static/beep.mp3');
  200. beep.volume = 0.7;
  201. beep.play();
  202. }
  203. }
  204. });
  205. },
  206. fetchFollowRequests() {
  207. if(window._sharedData.curUser.locked == true) {
  208. axios.get('/account/follow-requests.json')
  209. .then(res => {
  210. this.followRequests = res.data;
  211. })
  212. }
  213. },
  214. redirect(url) {
  215. window.location.href = url;
  216. },
  217. notificationPreview(n) {
  218. if(!n.status.hasOwnProperty('media_attachments') || !n.status.media_attachments.length) {
  219. return '/storage/no-preview.png';
  220. }
  221. return n.status.media_attachments[0].preview_url;
  222. }
  223. }
  224. }
  225. </script>