]> git.immae.eu Git - github/Chocobozzz/PeerTube.git/blame - client/src/app/shared/shared-actor-image/actor-avatar.component.ts
Fix release script
[github/Chocobozzz/PeerTube.git] / client / src / app / shared / shared-actor-image / actor-avatar.component.ts
CommitLineData
746018f6 1import { Component, Input } from '@angular/core'
746018f6
C
2import { VideoChannel } from '../shared-main'
3import { Account } from '../shared-main/account/account.model'
4
5type ActorInput = {
6 name: string
d0800f76 7 avatars: { width: number, url?: string, path: string }[]
746018f6
C
8 url: string
9}
10
d0800f76 11export type ActorAvatarSize = '18' | '25' | '28' | '32' | '34' | '35' | '36' | '40' | '48' | '75' | '80' | '100' | '120'
06ec4bdd 12
746018f6
C
13@Component({
14 selector: 'my-actor-avatar',
15 styleUrls: [ './actor-avatar.component.scss' ],
16 templateUrl: './actor-avatar.component.html'
17})
18export class ActorAvatarComponent {
9df52d66
C
19 private _title: string
20
746018f6
C
21 @Input() account: ActorInput
22 @Input() channel: ActorInput
23
0ea2f79d 24 @Input() previewImage: string
746018f6 25
4428ad54 26 @Input() size: ActorAvatarSize
746018f6
C
27
28 // Use an external link
29 @Input() href: string
30 // Use routerLink
31 @Input() internalHref: string | any[]
32
33 @Input() set title (value) {
34 this._title = value
35 }
36
746018f6
C
37 get title () {
38 if (this._title) return this._title
39 if (this.account) return $localize`${this.account.name} (account page)`
40 if (this.channel) return $localize`${this.channel.name} (channel page)`
41
42 return ''
43 }
44
45 get alt () {
46 if (this.account) return $localize`Account avatar`
47 if (this.channel) return $localize`Channel avatar`
48
49 return ''
50 }
51
746018f6 52 get defaultAvatarUrl () {
4428ad54
C
53 if (this.account) return Account.GET_DEFAULT_AVATAR_URL(this.getSizeNumber())
54 if (this.channel) return VideoChannel.GET_DEFAULT_AVATAR_URL(this.getSizeNumber())
746018f6
C
55 }
56
57 get avatarUrl () {
4428ad54
C
58 if (this.account) return Account.GET_ACTOR_AVATAR_URL(this.account, this.getSizeNumber())
59 if (this.channel) return VideoChannel.GET_ACTOR_AVATAR_URL(this.channel, this.getSizeNumber())
746018f6
C
60
61 return ''
62 }
63
64 get initial () {
65 const name = this.account?.name
66 if (!name) return ''
67
68 return name.slice(0, 1)
69 }
70
9df52d66
C
71 getClass (type: 'avatar' | 'initial') {
72 const base = [ 'avatar' ]
73
74 if (this.size) base.push(`avatar-${this.size}`)
75
76 if (this.channel) base.push('channel')
77 else base.push('account')
78
79 if (type === 'initial' && this.initial) {
80 base.push('initial')
81 base.push(this.getColorTheme())
82 }
83
84 return base
85 }
86
746018f6
C
87 hasActor () {
88 return !!this.account || !!this.channel
89 }
90
4428ad54
C
91 private getSizeNumber () {
92 if (this.size) return +this.size
93
94 return undefined
95 }
96
746018f6 97 private getColorTheme () {
f41efa52
C
98 const initialLowercase = this.initial.toLowerCase()
99
746018f6
C
100 // Keep consistency with CSS
101 const themes = {
f41efa52 102 '0123456789abc': 'blue',
746018f6
C
103 def: 'green',
104 ghi: 'purple',
105 jkl: 'gray',
106 mno: 'yellow',
107 pqr: 'orange',
1fd61899 108 stvu: 'red',
746018f6
C
109 wxyz: 'dark-blue'
110 }
111
112 const theme = Object.keys(themes)
f41efa52 113 .find(chars => chars.includes(initialLowercase))
746018f6
C
114
115 return themes[theme]
116 }
117}