NotificationCard.vue 9.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262
  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" style="object-fit: cover;">
  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 v-else-if="n.type == 'tagged'">
  61. <p class="my-0">
  62. <a :href="n.account.url" class="font-weight-bold text-dark word-break" :title="n.account.username">{{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="n.account.url" class="font-weight-bold text-dark word-break" :title="n.account.username">{{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-else class="card-body px-0 py-0" style="max-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. notifications: {},
  105. notificationCursor: 2,
  106. notificationMaxId: 0,
  107. profile: {
  108. locked: false
  109. },
  110. followRequests: null
  111. };
  112. },
  113. mounted() {
  114. let self = this;
  115. this.fetchNotifications();
  116. setTimeout(function() {
  117. self.profile = window._sharedData.curUser;
  118. self.fetchFollowRequests();
  119. }, 500);
  120. },
  121. updated() {
  122. },
  123. methods: {
  124. fetchNotifications() {
  125. axios.get('/api/pixelfed/v1/notifications?pg=true')
  126. .then(res => {
  127. let data = res.data;
  128. let ids = res.data.map(n => n.id);
  129. this.notificationMaxId = Math.min(...ids);
  130. this.notifications = data;
  131. $('.notification-card .loader').addClass('d-none');
  132. $('.notification-card .contents').removeClass('d-none');
  133. //this.notificationPoll();
  134. });
  135. },
  136. infiniteNotifications($state) {
  137. if(this.notificationCursor > 5) {
  138. $state.complete();
  139. return;
  140. }
  141. axios.get('/api/pixelfed/v1/notifications', {
  142. params: {
  143. page: this.notificationCursor
  144. }
  145. }).then(res => {
  146. if(res.data.length) {
  147. let data = res.data.filter(n => {
  148. if(n.type == 'share' && !status) {
  149. return false;
  150. }
  151. if(_.find(this.notifications, {id: n.id})) {
  152. return false;
  153. }
  154. return true;
  155. });
  156. this.notifications.push(...data);
  157. this.notificationCursor++;
  158. $state.loaded();
  159. } else {
  160. $state.complete();
  161. }
  162. });
  163. },
  164. truncate(text) {
  165. if(text.length <= 15) {
  166. return text;
  167. }
  168. return text.slice(0,15) + '...'
  169. },
  170. timeAgo(ts) {
  171. return window.App.util.format.timeAgo(ts);
  172. },
  173. mentionUrl(status) {
  174. let username = status.account.username;
  175. let id = status.id;
  176. return '/p/' + username + '/' + id;
  177. },
  178. notificationPoll() {
  179. let interval = this.notifications.length > 5 ? 15000 : 120000;
  180. let self = this;
  181. setInterval(function() {
  182. axios.get('/api/pixelfed/v1/notifications')
  183. .then(res => {
  184. let data = res.data.filter(n => {
  185. if(n.type == 'share' || self.notificationMaxId >= n.id) {
  186. return false;
  187. }
  188. return true;
  189. });
  190. if(data.length) {
  191. let ids = data.map(n => n.id);
  192. self.notificationMaxId = Math.max(...ids);
  193. self.notifications.unshift(...data);
  194. let beep = new Audio('/static/beep.mp3');
  195. beep.volume = 0.7;
  196. beep.play();
  197. $('.notification-card .far.fa-bell').addClass('fas text-danger').removeClass('far text-muted');
  198. }
  199. });
  200. }, interval);
  201. },
  202. refreshNotifications() {
  203. let self = this;
  204. axios.get('/api/pixelfed/v1/notifications')
  205. .then(res => {
  206. let data = res.data.filter(n => {
  207. if(n.type == 'share' || self.notificationMaxId >= n.id) {
  208. return false;
  209. }
  210. return true;
  211. });
  212. if(data.length > 0) {
  213. let ids = data.map(n => n.id);
  214. let max = Math.max(ids);
  215. if(max <= self.notificationMaxId) {
  216. return;
  217. } else {
  218. self.notificationMaxId = max;
  219. self.notifications = data;
  220. let beep = new Audio('/static/beep.mp3');
  221. beep.volume = 0.7;
  222. beep.play();
  223. }
  224. }
  225. });
  226. },
  227. fetchFollowRequests() {
  228. if(window._sharedData.curUser.locked == true) {
  229. axios.get('/account/follow-requests.json')
  230. .then(res => {
  231. this.followRequests = res.data;
  232. })
  233. }
  234. },
  235. redirect(url) {
  236. window.location.href = url;
  237. },
  238. notificationPreview(n) {
  239. if(!n.status.hasOwnProperty('media_attachments') || !n.status.media_attachments.length) {
  240. return '/storage/no-preview.png';
  241. }
  242. return n.status.media_attachments[0].preview_url;
  243. }
  244. }
  245. }
  246. </script>