1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
|
<template>
<div class="timeline-entry">
<div v-if="item.type === 'SocialAppNotification'">
{{ actionSummary }}
</div>
<div v-if="item.type === 'Announce'" class="boost">
<div class="container-icon-boost">
<span class="icon-boost" />
</div>
<router-link v-if="item.actor_info" :to="{ name: 'profile', params: { account: item.local ? item.actor_info.preferredUsername : item.actor_info.account }}">
<span v-tooltip.bottom="item.actor_info.account" class="post-author">
{{ userDisplayName(item.actor_info) }}
</span>
</router-link>
<a v-else :href="item.attributedTo">
<span class="post-author-id">
{{ item.attributedTo }}
</span>
</a>
{{ boosted }}
</div>
<timeline-post
v-if="item.type === 'SocialAppNotification' && item.details.post"
:item="item.details.post" />
<timeline-post
v-else
:item="entryContent"
:parent-announce="isBoost" />
</div>
</template>
<script>
import TimelinePost from './TimelinePost.vue'
export default {
name: 'TimelineEntry',
components: {
TimelinePost
},
props: {
item: { type: Object, default: () => {} }
},
data() {
return {
}
},
computed: {
entryContent() {
if (this.item.type === 'Announce') {
return this.item.cache[this.item.object].object
} else {
return this.item
}
},
isBoost() {
if (this.item.type === 'Announce') {
return this.item
}
return {}
},
boosted() {
return t('social', 'boosted')
},
actionSummary() {
let summary = this.item.summary
for (var key in this.item.details) {
let keyword = '{' + key + '}'
if (typeof this.item.details[key] !== 'string' && this.item.details[key].length > 1) {
let concatination = ''
for (var stringKey in this.item.details[key]) {
if (this.item.details[key].length > 3 && stringKey === '3') {
// ellipses the actors' list to 3 actors when it's big
concatination = concatination.substring(0, concatination.length - 2)
concatination += ' and ' + (this.item.details[key].length - 3).toString() + ' other(s), '
break
} else {
concatination += this.item.details[key][stringKey] + ', '
}
}
concatination = concatination.substring(0, concatination.length - 2)
summary = summary.replace(keyword, concatination)
} else {
summary = summary.replace(keyword, this.item.details[key])
}
}
return summary
}
},
methods: {
userDisplayName(actorInfo) {
return actorInfo.name !== '' ? actorInfo.name : actorInfo.preferredUsername
}
}
}
</script>
<style scoped lang="scss">
.timeline-entry {
padding: 10px;
margin-bottom: 10px;
&:hover {
background-color: var(--color-background-hover);
}
}
.container-icon-boost {
display: inline-block;
padding-right: 6px;
}
.icon-boost {
display: inline-block;
width: 38px;
height: 17px;
opacity: .5;
background-position: right center;
vertical-align: middle;
}
.boost {
opacity: .5;
}
</style>
|
