1 import { Component, Input } from '@angular/core'
2 import { SafeResourceUrl } from '@angular/platform-browser'
3 import { VideoChannel } from '../shared-main'
4 import { Account } from '../shared-main/account/account.model'
8 avatar?: { url?: string, path: string }
12 export type ActorAvatarSize = '18' | '25' | '32' | '34' | '36' | '40' | '100' | '120'
15 selector: 'my-actor-avatar',
16 styleUrls: [ './actor-avatar.component.scss' ],
17 templateUrl: './actor-avatar.component.html'
19 export class ActorAvatarComponent {
20 private _title: string
22 @Input() account: ActorInput
23 @Input() channel: ActorInput
25 @Input() previewImage: SafeResourceUrl
27 @Input() size: ActorAvatarSize
29 // Use an external link
32 @Input() internalHref: string | any[]
34 @Input() set title (value) {
39 if (this._title) return this._title
40 if (this.account) return $localize`${this.account.name} (account page)`
41 if (this.channel) return $localize`${this.channel.name} (channel page)`
47 if (this.account) return $localize`Account avatar`
48 if (this.channel) return $localize`Channel avatar`
53 get defaultAvatarUrl () {
54 if (this.channel) return VideoChannel.GET_DEFAULT_AVATAR_URL()
56 return Account.GET_DEFAULT_AVATAR_URL()
60 if (this.account) return Account.GET_ACTOR_AVATAR_URL(this.account)
61 if (this.channel) return VideoChannel.GET_ACTOR_AVATAR_URL(this.channel)
67 const name = this.account?.name
70 return name.slice(0, 1)
73 getClass (type: 'avatar' | 'initial') {
74 const base = [ 'avatar' ]
76 if (this.size) base.push(`avatar-${this.size}`)
78 if (this.channel) base.push('channel')
79 else base.push('account')
81 if (type === 'initial' && this.initial) {
83 base.push(this.getColorTheme())
90 return !!this.account || !!this.channel
93 private getColorTheme () {
94 // Keep consistency with CSS
106 const theme = Object.keys(themes)
107 .find(chars => chars.includes(this.initial))