user_card_content.js (3633B)
1 import StillImage from '../still-image/still-image.vue'
2 import { hex2rgb } from '../../services/color_convert/color_convert.js'
3
4 export default {
5 props: [ 'user', 'switcher', 'selected', 'hideBio' ],
6 data () {
7 return {
8 hideUserStatsLocal: typeof this.$store.state.config.hideUserStats === 'undefined'
9 ? this.$store.state.instance.hideUserStats
10 : this.$store.state.config.hideUserStats
11 }
12 },
13 computed: {
14 headingStyle () {
15 const color = this.$store.state.config.colors.bg
16 if (color) {
17 const rgb = hex2rgb(color)
18 const tintColor = `rgba(${Math.floor(rgb.r)}, ${Math.floor(rgb.g)}, ${Math.floor(rgb.b)}, .5)`
19 return {
20 backgroundColor: `rgb(${Math.floor(rgb.r * 0.53)}, ${Math.floor(rgb.g * 0.56)}, ${Math.floor(rgb.b * 0.59)})`,
21 backgroundImage: [
22 `linear-gradient(to bottom, ${tintColor}, ${tintColor})`,
23 `url(${this.user.cover_photo})`
24 ].join(', ')
25 }
26 }
27 },
28 isOtherUser () {
29 return this.user.id !== this.$store.state.users.currentUser.id
30 },
31 subscribeUrl () {
32 // eslint-disable-next-line no-undef
33 const serverUrl = new URL(this.user.statusnet_profile_url)
34 return `${serverUrl.protocol}//${serverUrl.host}/main/ostatus`
35 },
36 loggedIn () {
37 return this.$store.state.users.currentUser
38 },
39 dailyAvg () {
40 const days = Math.ceil((new Date() - new Date(this.user.created_at)) / (60 * 60 * 24 * 1000))
41 return Math.round(this.user.statuses_count / days)
42 },
43 userHighlightType: {
44 get () {
45 const data = this.$store.state.config.highlight[this.user.screen_name]
46 return data && data.type || 'disabled'
47 },
48 set (type) {
49 const data = this.$store.state.config.highlight[this.user.screen_name]
50 if (type !== 'disabled') {
51 this.$store.dispatch('setHighlight', { user: this.user.screen_name, color: data && data.color || '#FFFFFF', type })
52 } else {
53 this.$store.dispatch('setHighlight', { user: this.user.screen_name, color: undefined })
54 }
55 }
56 },
57 userHighlightColor: {
58 get () {
59 const data = this.$store.state.config.highlight[this.user.screen_name]
60 return data && data.color
61 },
62 set (color) {
63 this.$store.dispatch('setHighlight', { user: this.user.screen_name, color })
64 }
65 }
66 },
67 components: {
68 StillImage
69 },
70 methods: {
71 followUser () {
72 const store = this.$store
73 store.state.api.backendInteractor.followUser(this.user.id)
74 .then((followedUser) => store.commit('addNewUsers', [followedUser]))
75 },
76 unfollowUser () {
77 const store = this.$store
78 store.state.api.backendInteractor.unfollowUser(this.user.id)
79 .then((unfollowedUser) => store.commit('addNewUsers', [unfollowedUser]))
80 },
81 blockUser () {
82 const store = this.$store
83 store.state.api.backendInteractor.blockUser(this.user.id)
84 .then((blockedUser) => store.commit('addNewUsers', [blockedUser]))
85 },
86 unblockUser () {
87 const store = this.$store
88 store.state.api.backendInteractor.unblockUser(this.user.id)
89 .then((unblockedUser) => store.commit('addNewUsers', [unblockedUser]))
90 },
91 toggleMute () {
92 const store = this.$store
93 store.commit('setMuted', {user: this.user, muted: !this.user.muted})
94 store.state.api.backendInteractor.setUserMute(this.user)
95 },
96 setProfileView (v) {
97 if (this.switcher) {
98 const store = this.$store
99 store.commit('setProfileView', { v })
100 }
101 }
102 }
103 }