2019-02-03 06:23:16 +11:00
|
|
|
import UserAvatar from '../user_avatar/user_avatar.vue'
|
2017-11-21 07:45:09 +11:00
|
|
|
import { hex2rgb } from '../../services/color_convert/color_convert.js'
|
2019-02-10 15:05:23 +11:00
|
|
|
import { requestFollow, requestUnfollow } from '../../services/follow_manipulate/follow_manipulate'
|
2018-12-14 03:57:11 +11:00
|
|
|
import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
|
2017-11-21 07:45:09 +11:00
|
|
|
|
|
|
|
export default {
|
2019-03-05 18:32:23 +11:00
|
|
|
props: [ 'user', 'switcher', 'selected', 'hideBio', 'rounded', 'bordered' ],
|
2018-09-04 09:32:25 +10:00
|
|
|
data () {
|
|
|
|
return {
|
2018-12-04 20:50:29 +11:00
|
|
|
followRequestInProgress: false,
|
|
|
|
followRequestSent: false,
|
2018-10-17 00:09:29 +11:00
|
|
|
hideUserStatsLocal: typeof this.$store.state.config.hideUserStats === 'undefined'
|
|
|
|
? this.$store.state.instance.hideUserStats
|
2018-12-01 00:39:07 +11:00
|
|
|
: this.$store.state.config.hideUserStats,
|
|
|
|
betterShadow: this.$store.state.interface.browserSupport.cssFilter
|
2018-09-04 09:32:25 +10:00
|
|
|
}
|
|
|
|
},
|
2017-11-21 07:45:09 +11:00
|
|
|
computed: {
|
2019-03-05 18:32:23 +11:00
|
|
|
classes () {
|
|
|
|
return [{
|
|
|
|
'user-card-content-rounded': this.rounded === true,
|
|
|
|
'user-card-content-rounded-t': this.rounded === 'top', // top only
|
|
|
|
'user-card-content-bordered': this.bordered
|
|
|
|
}]
|
|
|
|
},
|
|
|
|
style () {
|
2018-11-27 05:22:44 +11:00
|
|
|
const color = this.$store.state.config.customTheme.colors
|
|
|
|
? this.$store.state.config.customTheme.colors.bg // v2
|
|
|
|
: this.$store.state.config.colors.bg // v1
|
2018-11-27 04:25:14 +11:00
|
|
|
|
2017-11-21 07:45:09 +11:00
|
|
|
if (color) {
|
2018-11-22 02:22:05 +11:00
|
|
|
const rgb = (typeof color === 'string') ? hex2rgb(color) : color
|
2018-05-12 23:07:18 +10:00
|
|
|
const tintColor = `rgba(${Math.floor(rgb.r)}, ${Math.floor(rgb.g)}, ${Math.floor(rgb.b)}, .5)`
|
2018-12-14 04:41:23 +11:00
|
|
|
|
|
|
|
const gradient = [
|
|
|
|
[tintColor, this.hideBio ? '60%' : ''],
|
|
|
|
this.hideBio ? [
|
|
|
|
color, '100%'
|
|
|
|
] : [
|
|
|
|
tintColor, ''
|
|
|
|
]
|
|
|
|
].map(_ => _.join(' ')).join(', ')
|
|
|
|
|
2017-11-21 07:45:09 +11:00
|
|
|
return {
|
2018-05-12 23:07:18 +10:00
|
|
|
backgroundColor: `rgb(${Math.floor(rgb.r * 0.53)}, ${Math.floor(rgb.g * 0.56)}, ${Math.floor(rgb.b * 0.59)})`,
|
|
|
|
backgroundImage: [
|
2018-12-14 04:41:23 +11:00
|
|
|
`linear-gradient(to bottom, ${gradient})`,
|
2018-05-12 23:07:18 +10:00
|
|
|
`url(${this.user.cover_photo})`
|
|
|
|
].join(', ')
|
2017-11-21 07:45:09 +11:00
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
isOtherUser () {
|
|
|
|
return this.user.id !== this.$store.state.users.currentUser.id
|
|
|
|
},
|
2018-02-02 06:30:49 +11:00
|
|
|
subscribeUrl () {
|
|
|
|
// eslint-disable-next-line no-undef
|
|
|
|
const serverUrl = new URL(this.user.statusnet_profile_url)
|
|
|
|
return `${serverUrl.protocol}//${serverUrl.host}/main/ostatus`
|
|
|
|
},
|
2017-11-21 07:45:09 +11:00
|
|
|
loggedIn () {
|
|
|
|
return this.$store.state.users.currentUser
|
|
|
|
},
|
|
|
|
dailyAvg () {
|
|
|
|
const days = Math.ceil((new Date() - new Date(this.user.created_at)) / (60 * 60 * 24 * 1000))
|
|
|
|
return Math.round(this.user.statuses_count / days)
|
2018-06-18 18:36:58 +10:00
|
|
|
},
|
2018-08-05 12:18:04 +10:00
|
|
|
userHighlightType: {
|
2018-06-18 18:36:58 +10:00
|
|
|
get () {
|
2018-08-05 12:18:04 +10:00
|
|
|
const data = this.$store.state.config.highlight[this.user.screen_name]
|
|
|
|
return data && data.type || 'disabled'
|
2018-06-18 18:36:58 +10:00
|
|
|
},
|
2018-08-05 12:18:04 +10:00
|
|
|
set (type) {
|
|
|
|
const data = this.$store.state.config.highlight[this.user.screen_name]
|
|
|
|
if (type !== 'disabled') {
|
|
|
|
this.$store.dispatch('setHighlight', { user: this.user.screen_name, color: data && data.color || '#FFFFFF', type })
|
2018-06-18 18:36:58 +10:00
|
|
|
} else {
|
2018-06-19 23:17:50 +10:00
|
|
|
this.$store.dispatch('setHighlight', { user: this.user.screen_name, color: undefined })
|
2018-06-18 18:36:58 +10:00
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
userHighlightColor: {
|
|
|
|
get () {
|
2018-08-05 12:18:04 +10:00
|
|
|
const data = this.$store.state.config.highlight[this.user.screen_name]
|
|
|
|
return data && data.color
|
2018-06-18 18:36:58 +10:00
|
|
|
},
|
2018-06-19 23:17:50 +10:00
|
|
|
set (color) {
|
|
|
|
this.$store.dispatch('setHighlight', { user: this.user.screen_name, color })
|
2018-06-18 18:36:58 +10:00
|
|
|
}
|
2019-02-05 01:03:35 +11:00
|
|
|
},
|
|
|
|
visibleRole () {
|
2019-02-05 02:05:56 +11:00
|
|
|
const validRole = (this.user.role === 'admin' || this.user.role === 'moderator')
|
|
|
|
const showRole = this.isOtherUser || this.user.show_role
|
2019-02-05 01:03:35 +11:00
|
|
|
|
2019-02-05 02:05:56 +11:00
|
|
|
return validRole && showRole && this.user.role
|
2017-11-21 07:45:09 +11:00
|
|
|
}
|
|
|
|
},
|
2018-03-12 10:31:33 +11:00
|
|
|
components: {
|
2019-02-03 06:23:16 +11:00
|
|
|
UserAvatar
|
2018-03-12 10:31:33 +11:00
|
|
|
},
|
2017-11-21 07:45:09 +11:00
|
|
|
methods: {
|
|
|
|
followUser () {
|
2018-12-04 20:50:29 +11:00
|
|
|
this.followRequestInProgress = true
|
2019-02-10 15:05:23 +11:00
|
|
|
requestFollow(this.user, this.$store).then(({sent}) => {
|
|
|
|
this.followRequestInProgress = false
|
|
|
|
this.followRequestSent = sent
|
|
|
|
})
|
2017-11-21 07:45:09 +11:00
|
|
|
},
|
|
|
|
unfollowUser () {
|
2018-12-04 20:50:29 +11:00
|
|
|
this.followRequestInProgress = true
|
2019-02-10 15:05:23 +11:00
|
|
|
requestUnfollow(this.user, this.$store).then(() => {
|
|
|
|
this.followRequestInProgress = false
|
|
|
|
})
|
2017-11-21 07:45:09 +11:00
|
|
|
},
|
|
|
|
blockUser () {
|
|
|
|
const store = this.$store
|
|
|
|
store.state.api.backendInteractor.blockUser(this.user.id)
|
|
|
|
.then((blockedUser) => store.commit('addNewUsers', [blockedUser]))
|
|
|
|
},
|
|
|
|
unblockUser () {
|
|
|
|
const store = this.$store
|
|
|
|
store.state.api.backendInteractor.unblockUser(this.user.id)
|
|
|
|
.then((unblockedUser) => store.commit('addNewUsers', [unblockedUser]))
|
|
|
|
},
|
|
|
|
toggleMute () {
|
|
|
|
const store = this.$store
|
|
|
|
store.commit('setMuted', {user: this.user, muted: !this.user.muted})
|
|
|
|
store.state.api.backendInteractor.setUserMute(this.user)
|
|
|
|
},
|
|
|
|
setProfileView (v) {
|
2018-04-15 15:04:16 +10:00
|
|
|
if (this.switcher) {
|
|
|
|
const store = this.$store
|
|
|
|
store.commit('setProfileView', { v })
|
|
|
|
}
|
2018-12-04 19:38:00 +11:00
|
|
|
},
|
|
|
|
linkClicked ({target}) {
|
|
|
|
if (target.tagName === 'SPAN') {
|
|
|
|
target = target.parentNode
|
|
|
|
}
|
|
|
|
if (target.tagName === 'A') {
|
|
|
|
window.open(target.href, '_blank')
|
|
|
|
}
|
2018-12-15 14:16:44 +11:00
|
|
|
},
|
|
|
|
userProfileLink (user) {
|
2018-12-27 00:50:48 +11:00
|
|
|
return generateProfileLink(user.id, user.screen_name, this.$store.state.instance.restrictedNicknames)
|
2017-11-21 07:45:09 +11:00
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|