mirror of
https://github.com/pixelfed/pixelfed.git
synced 2024-11-27 16:53:17 +00:00
416 lines
13 KiB
Vue
416 lines
13 KiB
Vue
|
<template>
|
||
|
|
<div class="notifications-component">
|
||
|
|
<div class="card shadow-sm mb-3" style="overflow: hidden;border-radius: 15px !important;">
|
||
|
|
<div class="card-body pb-0">
|
||
|
|
<div class="d-flex justify-content-between align-items-center mb-3">
|
||
|
|
<span class="text-muted font-weight-bold">Notifications</span>
|
||
|
|
<div v-if="feed && feed.length">
|
||
|
|
<router-link to="/i/web/notifications" class="btn btn-outline-light btn-sm mr-2" style="color: #B8C2CC !important">
|
||
|
|
<i class="far fa-filter"></i>
|
||
|
|
</router-link>
|
||
|
|
<button
|
||
|
|
v-if="hasLoaded && feed.length"
|
||
|
|
class="btn btn-light btn-sm"
|
||
|
|
:class="{ 'text-lighter': isRefreshing }"
|
||
|
|
:disabled="isRefreshing"
|
||
|
|
@click="refreshNotifications">
|
||
|
|
<i class="fal fa-redo"></i>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div v-if="!hasLoaded" class="notifications-component-feed">
|
||
|
|
<div class="d-flex align-items-center justify-content-center flex-column bg-light rounded-lg p-3 mb-3" style="min-height: 100px;">
|
||
|
|
<b-spinner variant="grow" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div v-else class="notifications-component-feed">
|
||
|
|
<template v-if="isEmpty">
|
||
|
|
<div class="d-flex align-items-center justify-content-center flex-column bg-light rounded-lg p-3 mb-3" style="min-height: 100px;">
|
||
|
|
<i class="fal fa-bell fa-2x text-lighter"></i>
|
||
|
|
<p class="mt-2 small font-weight-bold text-center mb-0">{{ $t('notifications.noneFound') }}</p>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<template v-else>
|
||
|
|
<div v-for="(n, index) in feed" class="mb-2">
|
||
|
|
<div class="media align-items-center">
|
||
|
|
<img
|
||
|
|
class="mr-2 rounded-circle shadow-sm"
|
||
|
|
:src="n.account.avatar"
|
||
|
|
width="32"
|
||
|
|
height="32"
|
||
|
|
onerror="this.onerror=null;this.src='/storage/avatars/default.png';">
|
||
|
|
|
||
|
|
<div class="media-body font-weight-light small">
|
||
|
|
<div v-if="n.type == 'favourite'">
|
||
|
|
<p class="my-0">
|
||
|
|
<a :href="getProfileUrl(n.account)" class="font-weight-bold text-dark word-break" :title="n.account.acct">{{n.account.local == false ? '@':''}}{{truncate(n.account.username)}}</a> liked your
|
||
|
|
<span v-if="n.status && n.status.hasOwnProperty('media_attachments')">
|
||
|
|
<a class="font-weight-bold" v-bind:href="getPostUrl(n.status)" :id="'fvn-' + n.id" @click.prevent="goToPost(n.status)">post</a>.
|
||
|
|
<b-popover :target="'fvn-' + n.id" title="" triggers="hover" placement="top" boundary="window">
|
||
|
|
<img :src="notificationPreview(n)" width="100px" height="100px" style="object-fit: cover;">
|
||
|
|
</b-popover>
|
||
|
|
</span>
|
||
|
|
<span v-else>
|
||
|
|
<a class="font-weight-bold" :href="getPostUrl(n.status)" @click.prevent="goToPost(n.status)">post</a>.
|
||
|
|
</span>
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
<div v-else-if="n.type == 'comment'">
|
||
|
|
<p class="my-0">
|
||
|
|
<a :href="getProfileUrl(n.account)" class="font-weight-bold text-dark word-break" :title="n.account.acct">{{n.account.local == false ? '@':''}}{{truncate(n.account.username)}}</a> commented on your <a class="font-weight-bold" :href="getPostUrl(n.status)" @click.prevent="goToPost(n.status)">post</a>.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
<div v-else-if="n.type == 'group:comment'">
|
||
|
|
<p class="my-0">
|
||
|
|
<a :href="getProfileUrl(n.account)" class="font-weight-bold text-dark word-break" :title="n.account.acct">{{n.account.local == false ? '@':''}}{{truncate(n.account.username)}}</a> commented on your <a class="font-weight-bold" :href="n.group_post_url">group post</a>.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
<div v-else-if="n.type == 'story:react'">
|
||
|
|
<p class="my-0">
|
||
|
|
<a :href="getProfileUrl(n.account)" class="font-weight-bold text-dark word-break" :title="n.account.acct">{{n.account.local == false ? '@':''}}{{truncate(n.account.username)}}</a> reacted to your <a class="font-weight-bold" v-bind:href="'/account/direct/t/'+n.account.id">story</a>.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
<div v-else-if="n.type == 'story:comment'">
|
||
|
|
<p class="my-0">
|
||
|
|
<a :href="getProfileUrl(n.account)" class="font-weight-bold text-dark word-break" :title="n.account.acct">{{n.account.local == false ? '@':''}}{{truncate(n.account.username)}}</a> commented on your <a class="font-weight-bold" v-bind:href="'/account/direct/t/'+n.account.id">story</a>.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
<div v-else-if="n.type == 'mention'">
|
||
|
|
<p class="my-0">
|
||
|
|
<a :href="getProfileUrl(n.account)" class="font-weight-bold text-dark word-break" :title="n.account.acct">{{n.account.local == false ? '@':''}}{{truncate(n.account.username)}}</a> <a class="font-weight-bold" v-bind:href="mentionUrl(n.status)" @click.prevent="goToPost(n.status)">mentioned</a> you.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
<div v-else-if="n.type == 'follow'">
|
||
|
|
<p class="my-0">
|
||
|
|
<a :href="getProfileUrl(n.account)" class="font-weight-bold text-dark word-break" :title="n.account.acct">{{n.account.local == false ? '@':''}}{{truncate(n.account.username)}}</a> followed you.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
<div v-else-if="n.type == 'share'">
|
||
|
|
<p class="my-0">
|
||
|
|
<a :href="getProfileUrl(n.account)" class="font-weight-bold text-dark word-break" :title="n.account.acct">{{n.account.local == false ? '@':''}}{{truncate(n.account.username)}}</a> shared your <a class="font-weight-bold" :href="getPostUrl(n.status)" @click.prevent="goToPost(n.status)">post</a>.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
<div v-else-if="n.type == 'modlog'">
|
||
|
|
<p class="my-0">
|
||
|
|
<a :href="getProfileUrl(n.account)" class="font-weight-bold text-dark word-break" :title="n.account.acct">{{truncate(n.account.username)}}</a> updated a <a class="font-weight-bold" v-bind:href="n.modlog.url">modlog</a>.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
<div v-else-if="n.type == 'tagged'">
|
||
|
|
<p class="my-0">
|
||
|
|
<a :href="getProfileUrl(n.account)" class="font-weight-bold text-dark word-break" :title="n.account.acct">{{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>.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
<div v-else-if="n.type == 'direct'">
|
||
|
|
<p class="my-0">
|
||
|
|
<a :href="getProfileUrl(n.account)" class="font-weight-bold text-dark word-break" :title="n.account.acct">{{n.account.local == false ? '@':''}}{{truncate(n.account.username)}}</a> sent a <router-link class="font-weight-bold" :to="'/i/web/direct/thread/'+n.account.id">dm</router-link>.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div v-else-if="n.type == 'group.join.approved'">
|
||
|
|
<p class="my-0">
|
||
|
|
Your application to join the <a :href="n.group.url" class="font-weight-bold text-dark word-break" :title="n.group.name">{{truncate(n.group.name)}}</a> group was approved!
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div v-else-if="n.type == 'group.join.rejected'">
|
||
|
|
<p class="my-0">
|
||
|
|
Your application to join <a :href="n.group.url" class="font-weight-bold text-dark word-break" :title="n.group.name">{{truncate(n.group.name)}}</a> was rejected.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div v-else-if="n.type == 'group:invite'">
|
||
|
|
<p class="my-0">
|
||
|
|
<a :href="getProfileUrl(n.account)" class="font-weight-bold text-dark word-break" :title="n.account.acct">{{n.account.local == false ? '@':''}}{{truncate(n.account.username)}}</a> invited you to join <a :href="n.group.url + '/invite/claim'" class="font-weight-bold text-dark word-break" :title="n.group.name">{{n.group.name}}</a>.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div v-else>
|
||
|
|
<p class="my-0">
|
||
|
|
We cannot display this notification at this time.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="small text-muted font-weight-bold" :title="n.created_at">{{timeAgo(n.created_at)}}</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div v-if="hasLoaded && feed.length == 0">
|
||
|
|
<p class="small font-weight-bold text-center mb-0">{{ $t('notifications.noneFound') }}</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div v-else>
|
||
|
|
<intersect v-if="hasLoaded && canLoadMore" @enter="enterIntersect">
|
||
|
|
<placeholder small style="margin-top: -6px" />
|
||
|
|
<placeholder small/>
|
||
|
|
<placeholder small/>
|
||
|
|
<placeholder small/>
|
||
|
|
</intersect>
|
||
|
|
|
||
|
|
<div v-else class="d-block" style="height: 10px;">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script type="text/javascript">
|
||
|
|
import Placeholder from './../partials/placeholders/NotificationPlaceholder.vue';
|
||
|
|
import Intersect from 'vue-intersect';
|
||
|
|
|
||
|
|
export default {
|
||
|
|
props: {
|
||
|
|
profile: {
|
||
|
|
type: Object
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
components: {
|
||
|
|
"intersect": Intersect,
|
||
|
|
"placeholder": Placeholder
|
||
|
|
},
|
||
|
|
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
feed: {},
|
||
|
|
maxId: undefined,
|
||
|
|
isIntersecting: false,
|
||
|
|
canLoadMore: false,
|
||
|
|
isRefreshing: false,
|
||
|
|
hasLoaded: false,
|
||
|
|
isEmpty: false,
|
||
|
|
retryTimeout: undefined,
|
||
|
|
retryAttempts: 0
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
mounted() {
|
||
|
|
this.init();
|
||
|
|
},
|
||
|
|
|
||
|
|
destroyed() {
|
||
|
|
clearTimeout(this.retryTimeout);
|
||
|
|
},
|
||
|
|
|
||
|
|
methods: {
|
||
|
|
init() {
|
||
|
|
if(this.retryAttempts == 3) {
|
||
|
|
this.hasLoaded = true;
|
||
|
|
this.isEmpty = true;
|
||
|
|
clearTimeout(this.retryTimeout);
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
axios.get('/api/pixelfed/v1/notifications', {
|
||
|
|
params: {
|
||
|
|
limit: 9,
|
||
|
|
}
|
||
|
|
})
|
||
|
|
.then(res => {
|
||
|
|
if(!res || !res.data || !res.data.length) {
|
||
|
|
this.retryAttempts = this.retryAttempts + 1;
|
||
|
|
this.retryTimeout = setTimeout(() => this.init(), this.retryAttempts * 1500);
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
let data = res.data.filter(n => {
|
||
|
|
if(n.type == 'share' && !n.status) {
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
if(n.type == 'comment' && !n.status) {
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
if(n.type == 'mention' && !n.status) {
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
if(n.type == 'favourite' && !n.status) {
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
if(n.type == 'follow' && !n.account) {
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
if(n.type == 'modlog' && !n.modlog) {
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
return true;
|
||
|
|
});
|
||
|
|
|
||
|
|
if(!res.data.length) {
|
||
|
|
this.canLoadMore = false;
|
||
|
|
} else {
|
||
|
|
this.canLoadMore = true;
|
||
|
|
}
|
||
|
|
|
||
|
|
if(this.retryTimeout || this.retryAttempts) {
|
||
|
|
this.retryAttempts = 0;
|
||
|
|
clearTimeout(this.retryTimeout);
|
||
|
|
}
|
||
|
|
this.maxId = res.data[res.data.length - 1].id;
|
||
|
|
this.feed = data;
|
||
|
|
|
||
|
|
this.hasLoaded = true;
|
||
|
|
setTimeout(() => {
|
||
|
|
this.isRefreshing = false;
|
||
|
|
}, 15000);
|
||
|
|
});
|
||
|
|
},
|
||
|
|
|
||
|
|
refreshNotifications() {
|
||
|
|
event.currentTarget.blur();
|
||
|
|
this.isRefreshing = true;
|
||
|
|
this.init();
|
||
|
|
},
|
||
|
|
|
||
|
|
enterIntersect() {
|
||
|
|
if(this.isIntersecting || !this.canLoadMore) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
this.isIntersecting = true;
|
||
|
|
|
||
|
|
axios.get('/api/pixelfed/v1/notifications', {
|
||
|
|
params: {
|
||
|
|
limit: 9,
|
||
|
|
max_id: this.maxId
|
||
|
|
}
|
||
|
|
})
|
||
|
|
.then(res => {
|
||
|
|
if(!res.data || !res.data.length) {
|
||
|
|
this.canLoadMore = false;
|
||
|
|
this.isIntersecting = false;
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
let data = res.data.filter(n => {
|
||
|
|
if(n.type == 'share' && !n.status) {
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
if(n.type == 'comment' && !n.status) {
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
if(n.type == 'mention' && !n.status) {
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
if(n.type == 'favourite' && !n.status) {
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
if(n.type == 'follow' && !n.account) {
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
if(n.type == 'modlog' && !n.modlog) {
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
return true;
|
||
|
|
});
|
||
|
|
|
||
|
|
if(!res.data.length) {
|
||
|
|
this.canLoadMore = false;
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
this.maxId = res.data[res.data.length - 1].id;
|
||
|
|
this.feed.push(...data);
|
||
|
|
|
||
|
|
this.$nextTick(() => {
|
||
|
|
this.isIntersecting = false;
|
||
|
|
})
|
||
|
|
});
|
||
|
|
},
|
||
|
|
|
||
|
|
truncate(text) {
|
||
|
|
if(text.length <= 15) {
|
||
|
|
return text;
|
||
|
|
}
|
||
|
|
|
||
|
|
return text.slice(0,15) + '...'
|
||
|
|
},
|
||
|
|
|
||
|
|
timeAgo(ts) {
|
||
|
|
return window.App.util.format.timeAgo(ts);
|
||
|
|
},
|
||
|
|
|
||
|
|
mentionUrl(status) {
|
||
|
|
let username = status.account.username;
|
||
|
|
let id = status.id;
|
||
|
|
return '/p/' + username + '/' + id;
|
||
|
|
},
|
||
|
|
|
||
|
|
redirect(url) {
|
||
|
|
window.location.href = url;
|
||
|
|
},
|
||
|
|
|
||
|
|
notificationPreview(n) {
|
||
|
|
if(!n.status || !n.status.hasOwnProperty('media_attachments') || !n.status.media_attachments.length) {
|
||
|
|
return '/storage/no-preview.png';
|
||
|
|
}
|
||
|
|
return n.status.media_attachments[0].preview_url;
|
||
|
|
},
|
||
|
|
|
||
|
|
getProfileUrl(account) {
|
||
|
|
return '/i/web/profile/' + account.id;
|
||
|
|
},
|
||
|
|
|
||
|
|
getPostUrl(status) {
|
||
|
|
if(!status) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
return '/i/web/post/' + status.id;
|
||
|
|
},
|
||
|
|
|
||
|
|
goToPost(status) {
|
||
|
|
this.$router.push({
|
||
|
|
name: 'post',
|
||
|
|
path: `/i/web/post/${status.id}`,
|
||
|
|
params: {
|
||
|
|
id: status.id,
|
||
|
|
cachedStatus: status,
|
||
|
|
cachedProfile: this.profile
|
||
|
|
}
|
||
|
|
})
|
||
|
|
},
|
||
|
|
|
||
|
|
goToProfile(account) {
|
||
|
|
this.$router.push({
|
||
|
|
name: 'profile',
|
||
|
|
path: `/i/web/profile/${account.id}`,
|
||
|
|
params: {
|
||
|
|
id: account.id,
|
||
|
|
cachedProfile: account,
|
||
|
|
cachedUser: this.profile
|
||
|
|
}
|
||
|
|
})
|
||
|
|
},
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss">
|
||
|
|
.notifications-component {
|
||
|
|
&-feed {
|
||
|
|
min-height: 50px;
|
||
|
|
max-height: 300px;
|
||
|
|
overflow-y: auto;
|
||
|
|
|
||
|
|
-ms-overflow-style: none;
|
||
|
|
scrollbar-width: none;
|
||
|
|
overflow-y: scroll;
|
||
|
|
|
||
|
|
&::-webkit-scrollbar {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
.card {
|
||
|
|
width: 100%;
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
|
||
|
|
.card-body {
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|