1 import { Component, Input, OnChanges } from '@angular/core'
2 import { VideoChannel } from '../shared-main'
3 import { Account } from '../shared-main/account/account.model'
7 avatars: { width: number, url?: string, path: string }[]
11 export type ActorAvatarSize = '18' | '25' | '28' | '32' | '34' | '35' | '36' | '40' | '48' | '75' | '80' | '100' | '120'
14 selector: 'my-actor-avatar',
15 styleUrls: [ './actor-avatar.component.scss' ],
16 templateUrl: './actor-avatar.component.html'
18 export class ActorAvatarComponent implements OnChanges {
19 private _title: string
21 @Input() account: ActorInput
22 @Input() channel: ActorInput
24 @Input() previewImage: string
26 @Input() size: ActorAvatarSize
28 // Use an external link
31 @Input() internalHref: string | any[]
33 @Input() set title (value) {
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)`
45 classes: string[] = []
48 if (this.account) return $localize`Account avatar`
49 if (this.channel) return $localize`Channel avatar`
54 get defaultAvatarUrl () {
55 if (this.account) return Account.GET_DEFAULT_AVATAR_URL(this.getSizeNumber())
56 if (this.channel) return VideoChannel.GET_DEFAULT_AVATAR_URL(this.getSizeNumber())
60 if (this.account) return Account.GET_ACTOR_AVATAR_URL(this.account, this.getSizeNumber())
61 if (this.channel) return VideoChannel.GET_ACTOR_AVATAR_URL(this.channel, this.getSizeNumber())
67 const name = this.account?.name
70 return name.slice(0, 1)
74 this.classes = [ 'avatar' ]
76 if (this.size) this.classes.push(`avatar-${this.size}`)
78 if (this.channel) this.classes.push('channel')
79 else this.classes.push('account')
81 if (!this.avatarUrl && this.initial) {
82 this.classes.push('initial')
83 this.classes.push(this.getColorTheme())
88 return !!this.account || !!this.channel
91 private getSizeNumber () {
92 if (this.size) return +this.size
97 private getColorTheme () {
98 const initialLowercase = this.initial.toLowerCase()
100 // Keep consistency with CSS
102 '0123456789abc': 'blue',
112 const theme = Object.keys(themes)
113 .find(chars => chars.includes(initialLowercase))