mirror of
https://github.com/pixelfed/pixelfed.git
synced 2024-12-23 16:24:29 +00:00
235 lines
9 KiB
Vue
235 lines
9 KiB
Vue
|
<template>
|
||
|
|
<div class="media mb-2 align-items-center px-3 shadow-sm py-2 bg-white" style="border-radius: 15px;">
|
||
|
|
<a href="#" @click.prevent="getProfileUrl(n.account)" v-b-tooltip.hover :title="n.account.acct">
|
||
|
|
<img class="mr-3 shadow-sm" style="border-radius:8px" :src="n.account.avatar" alt="" width="40" height="40" onerror="this.onerror=null;this.src='/storage/avatars/default.jpg';">
|
||
|
|
</a>
|
||
|
|
|
||
|
|
<div class="media-body font-weight-light">
|
||
|
|
<div v-if="n.type == 'favourite'">
|
||
|
|
<p class="my-0">
|
||
|
|
<a :href="displayProfileUrl(n.account)" @click.prevent="getProfileUrl(n.account)" class="font-weight-bold text-dark text-break" :title="n.account.acct">@{{n.account.acct}}</a> {{ $t('notifications.liked') }} <a class="font-weight-bold" :href="displayPostUrl(n.status)" @click.prevent="getPostUrl(n.status)">post</a>.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div v-else-if="n.type == 'comment'">
|
||
|
|
<p class="my-0">
|
||
|
|
<a :href="displayProfileUrl(n.account)" @click.prevent="getProfileUrl(n.account)" class="font-weight-bold text-dark text-break" :title="n.account.acct">@{{n.account.acct}}</a> {{ $t('notifications.commented') }} <a class="font-weight-bold" :href="displayPostUrl(n.status)" @click.prevent="getPostUrl(n.status)">post</a>.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- <div v-else-if="n.type == 'group:comment'">
|
||
|
|
<p class="my-0">
|
||
|
|
<a href="#" @click.prevent="getProfileUrl(n.account)" class="font-weight-bold text-dark text-break" :title="n.account.acct">@{{n.account.acct}}</a> {{ $t('notifications.commented') }} <a class="font-weight-bold" v-bind:href="n.group_post_url">{{ $('notifications.groupPost') }}</a>.
|
||
|
|
</p>
|
||
|
|
</div> -->
|
||
|
|
|
||
|
|
<div v-else-if="n.type == 'story:react'">
|
||
|
|
<p class="my-0">
|
||
|
|
<a :href="displayProfileUrl(n.account)" @click.prevent="getProfileUrl(n.account)" class="font-weight-bold text-dark text-break" :title="n.account.acct">@{{n.account.acct}}</a> {{ $t('notifications.reacted') }} <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="displayProfileUrl(n.account)" @click.prevent="getProfileUrl(n.account)" class="font-weight-bold text-dark text-break" :title="n.account.acct">@{{n.account.acct}}</a> {{ $t('notifications.commented') }} <a class="font-weight-bold" v-bind:href="'/account/direct/t/'+n.account.id">{{ $t('notifications.story') }}</a>.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div v-else-if="n.type == 'mention'">
|
||
|
|
<p class="my-0">
|
||
|
|
<a :href="displayProfileUrl(n.account)" @click.prevent="getProfileUrl(n.account)" class="font-weight-bold text-dark text-break" :title="n.account.acct">@{{n.account.acct}}</a> <a class="font-weight-bold" v-bind:href="mentionUrl(n.status)">{{ $t('notifications.mentioned') }}</a> {{ $t('notifications.you') }}.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div v-else-if="n.type == 'follow'">
|
||
|
|
<p class="my-0">
|
||
|
|
<a :href="displayProfileUrl(n.account)" @click.prevent="getProfileUrl(n.account)" class="font-weight-bold text-dark text-break" :title="n.account.acct">@{{n.account.acct}}</a> {{ $t('notifications.followed') }} {{ $t('notifications.you') }}.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div v-else-if="n.type == 'share'">
|
||
|
|
<p class="my-0">
|
||
|
|
<a :href="displayProfileUrl(n.account)" @click.prevent="getProfileUrl(n.account)" class="font-weight-bold text-dark text-break" :title="n.account.acct">@{{n.account.acct}}</a> {{ $t('notifications.shared') }} <a class="font-weight-bold" :href="displayPostUrl(n.status)" @click.prevent="getPostUrl(n.status)">{{ $t('notifications.post') }}</a>.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div v-else-if="n.type == 'modlog'">
|
||
|
|
<p class="my-0">
|
||
|
|
<a :href="displayProfileUrl(n.account)" @click.prevent="getProfileUrl(n.account)" class="font-weight-bold text-dark text-break" :title="n.account.acct">{{truncate(n.account.username)}}</a> {{ $t('notifications.updatedA') }} <a class="font-weight-bold" v-bind:href="n.modlog.url">{{ $t('notifications.modlog') }}</a>.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div v-else-if="n.type == 'tagged'">
|
||
|
|
<p class="my-0">
|
||
|
|
<a :href="displayProfileUrl(n.account)" @click.prevent="getProfileUrl(n.account)" class="font-weight-bold text-dark text-break" :title="n.account.acct">@{{n.account.acct}}</a> {{ $t('notifications.tagged') }} <a class="font-weight-bold" v-bind:href="n.tagged.post_url">{{ $t('notifications.post') }}</a>.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div v-else-if="n.type == 'direct'">
|
||
|
|
<p class="my-0">
|
||
|
|
<a :href="displayProfileUrl(n.account)" @click.prevent="getProfileUrl(n.account)" class="font-weight-bold text-dark text-break" :title="n.account.acct">@{{n.account.acct}}</a> {{ $t('notifications.sentA') }} <router-link class="font-weight-bold" :to="'/i/web/direct/thread/'+n.account.id">{{ $t('notifications.dm') }}</router-link>.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div v-else-if="n.type == 'group.join.approved'">
|
||
|
|
<p class="my-0">
|
||
|
|
{{ $t('notifications.yourApplication') }} <a :href="n.group.url" class="font-weight-bold text-dark text-break" :title="n.group.name">{{truncate(n.group.name)}}</a> {{ $t('notifications.applicationApproved') }}
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div v-else-if="n.type == 'group.join.rejected'">
|
||
|
|
<p class="my-0">
|
||
|
|
{{ $t('notifications.yourApplication') }} <a :href="n.group.url" class="font-weight-bold text-dark text-break" :title="n.group.name">{{truncate(n.group.name)}}</a> {{ $t('notifications.applicationRejected') }}
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div v-else>
|
||
|
|
<p class="my-0 d-flex justify-content-between align-items-center">
|
||
|
|
<span class="font-weight-bold">Notification</span>
|
||
|
|
<span style="font-size:8px;">e_{{ n.type }}::{{ n.id }}</span>
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="align-items-center">
|
||
|
|
<span class="small text-muted" data-toggle="tooltip" data-placement="bottom" :title="n.created_at">{{timeAgo(n.created_at)}}</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<div v-if="n.status && n.status && n.status.media_attachments && n.status.media_attachments.length">
|
||
|
|
<a href="#" @click.prevent="getPostUrl(n.status)">
|
||
|
|
<img :src="n.status.media_attachments[0].preview_url" width="32px" height="32px">
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
<div v-else-if="n.status && n.status.parent && n.status.parent.media_attachments && n.status.parent.media_attachments.length">
|
||
|
|
<a :href="n.status.parent.url">
|
||
|
|
<img :src="n.status.parent.media_attachments[0].preview_url" width="32px" height="32px">
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
<!-- <div v-else-if="n.status && n.status.parent && n.status.parent.media_attachments && n.status.parent.media_attachments.length">
|
||
|
|
<a :href="n.status.parent.url">
|
||
|
|
<img :src="n.status.parent.media_attachments[0].preview_url" width="32px" height="32px">
|
||
|
|
</a>
|
||
|
|
</div> -->
|
||
|
|
|
||
|
|
<!-- <div v-else>
|
||
|
|
<a v-if="viewContext(n) != '/'" class="btn btn-outline-primary py-0 font-weight-bold" href="#" @click.prevent="viewContext(n)">View</a>
|
||
|
|
</div> -->
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script type="text/javascript">
|
||
|
|
export default {
|
||
|
|
props: {
|
||
|
|
n: {
|
||
|
|
type: Object
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
profile: window._sharedData.user
|
||
|
|
};
|
||
|
|
},
|
||
|
|
|
||
|
|
methods: {
|
||
|
|
truncate(text, limit = 30) {
|
||
|
|
if(text.length <= limit) {
|
||
|
|
return text;
|
||
|
|
}
|
||
|
|
|
||
|
|
return text.slice(0, limit) + '...'
|
||
|
|
},
|
||
|
|
|
||
|
|
timeAgo(ts) {
|
||
|
|
let date = Date.parse(ts);
|
||
|
|
let seconds = Math.floor((new Date() - date) / 1000);
|
||
|
|
let interval = Math.floor(seconds / 31536000);
|
||
|
|
if (interval >= 1) {
|
||
|
|
return interval + "y";
|
||
|
|
}
|
||
|
|
interval = Math.floor(seconds / 604800);
|
||
|
|
if (interval >= 1) {
|
||
|
|
return interval + "w";
|
||
|
|
}
|
||
|
|
interval = Math.floor(seconds / 86400);
|
||
|
|
if (interval >= 1) {
|
||
|
|
return interval + "d";
|
||
|
|
}
|
||
|
|
interval = Math.floor(seconds / 3600);
|
||
|
|
if (interval >= 1) {
|
||
|
|
return interval + "h";
|
||
|
|
}
|
||
|
|
interval = Math.floor(seconds / 60);
|
||
|
|
if (interval >= 1) {
|
||
|
|
return interval + "m";
|
||
|
|
}
|
||
|
|
return Math.floor(seconds) + "s";
|
||
|
|
},
|
||
|
|
|
||
|
|
mentionUrl(status) {
|
||
|
|
let username = status.account.username;
|
||
|
|
let id = status.id;
|
||
|
|
return '/p/' + username + '/' + id;
|
||
|
|
},
|
||
|
|
|
||
|
|
viewContext(n) {
|
||
|
|
switch(n.type) {
|
||
|
|
case 'follow':
|
||
|
|
return this.getProfileUrl(n.account);
|
||
|
|
return n.account.url;
|
||
|
|
break;
|
||
|
|
case 'mention':
|
||
|
|
return n.status.url;
|
||
|
|
break;
|
||
|
|
case 'like':
|
||
|
|
case 'favourite':
|
||
|
|
case 'comment':
|
||
|
|
return this.getPostUrl(n.status);
|
||
|
|
// return n.status.url;
|
||
|
|
break;
|
||
|
|
case 'tagged':
|
||
|
|
return n.tagged.post_url;
|
||
|
|
break;
|
||
|
|
case 'direct':
|
||
|
|
return '/account/direct/t/'+n.account.id;
|
||
|
|
break
|
||
|
|
}
|
||
|
|
return '/';
|
||
|
|
},
|
||
|
|
|
||
|
|
displayProfileUrl(account) {
|
||
|
|
return `/i/web/profile/${account.id}`;
|
||
|
|
},
|
||
|
|
|
||
|
|
displayPostUrl(status) {
|
||
|
|
return `/i/web/post/${status.id}`;
|
||
|
|
},
|
||
|
|
|
||
|
|
getProfileUrl(account) {
|
||
|
|
this.$router.push({
|
||
|
|
name: 'profile',
|
||
|
|
path: `/i/web/profile/${account.id}`,
|
||
|
|
params: {
|
||
|
|
id: account.id,
|
||
|
|
cachedProfile: account,
|
||
|
|
cachedUser: this.profile
|
||
|
|
}
|
||
|
|
});
|
||
|
|
},
|
||
|
|
|
||
|
|
getPostUrl(status) {
|
||
|
|
this.$router.push({
|
||
|
|
name: 'post',
|
||
|
|
path: `/i/web/post/${status.id}`,
|
||
|
|
params: {
|
||
|
|
id: status.id,
|
||
|
|
cachedStatus: status,
|
||
|
|
cachedProfile: this.profile
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|