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
|
import { Component, Input, OnChanges } from '@angular/core'
import { VideoChannel } from '../shared-main'
import { Account } from '../shared-main/account/account.model'
type ActorInput = {
name: string
avatars: { width: number, url?: string, path: string }[]
url: string
}
export type ActorAvatarSize = '18' | '25' | '28' | '32' | '34' | '35' | '36' | '40' | '48' | '75' | '80' | '100' | '120'
@Component({
selector: 'my-actor-avatar',
styleUrls: [ './actor-avatar.component.scss' ],
templateUrl: './actor-avatar.component.html'
})
export class ActorAvatarComponent implements OnChanges {
private _title: string
@Input() account: ActorInput
@Input() channel: ActorInput
@Input() previewImage: string
@Input() size: ActorAvatarSize
// Use an external link
@Input() href: string
// Use routerLink
@Input() internalHref: string | any[]
@Input() set title (value) {
this._title = value
}
get title () {
if (this._title) return this._title
if (this.account) return $localize`${this.account.name} (account page)`
if (this.channel) return $localize`${this.channel.name} (channel page)`
return ''
}
classes: string[] = []
get alt () {
if (this.account) return $localize`Account avatar`
if (this.channel) return $localize`Channel avatar`
return ''
}
get defaultAvatarUrl () {
if (this.account) return Account.GET_DEFAULT_AVATAR_URL(this.getSizeNumber())
if (this.channel) return VideoChannel.GET_DEFAULT_AVATAR_URL(this.getSizeNumber())
}
get avatarUrl () {
if (this.account) return Account.GET_ACTOR_AVATAR_URL(this.account, this.getSizeNumber())
if (this.channel) return VideoChannel.GET_ACTOR_AVATAR_URL(this.channel, this.getSizeNumber())
return ''
}
get initial () {
const name = this.account?.name
if (!name) return ''
return name.slice(0, 1)
}
ngOnChanges () {
this.classes = [ 'avatar' ]
if (this.size) this.classes.push(`avatar-${this.size}`)
if (this.channel) this.classes.push('channel')
else this.classes.push('account')
if (!this.avatarUrl && this.initial) {
this.classes.push('initial')
this.classes.push(this.getColorTheme())
}
}
hasActor () {
return !!this.account || !!this.channel
}
private getSizeNumber () {
if (this.size) return +this.size
return undefined
}
private getColorTheme () {
const initialLowercase = this.initial.toLowerCase()
// Keep consistency with CSS
const themes = {
'0123456789abc': 'blue',
def: 'green',
ghi: 'purple',
jkl: 'gray',
mno: 'yellow',
pqr: 'orange',
stvu: 'red',
wxyz: 'dark-blue'
}
const theme = Object.keys(themes)
.find(chars => chars.includes(initialLowercase))
return themes[theme]
}
}
|
