1 import { Component, Input, OnChanges, OnInit } from '@angular/core'
2 import { VideoChannel } from '../shared-main'
3 import { Account } from '../shared-main/account/account.model'
4 import { objectKeysTyped } from '@shared/core-utils'
8 avatars: { width: number, url?: string, path: string }[]
12 export type ActorAvatarSize = '18' | '25' | '28' | '32' | '34' | '35' | '36' | '40' | '48' | '75' | '80' | '100' | '120'
15 selector: 'my-actor-avatar',
16 styleUrls: [ './actor-avatar.component.scss' ],
17 templateUrl: './actor-avatar.component.html'
19 export class ActorAvatarComponent implements OnInit, OnChanges {
20 private _title: string
22 @Input() actor: ActorInput
23 @Input() actorType: 'channel' | 'account' | 'unlogged'
25 @Input() previewImage: string
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.isAccount()) return $localize`${this.actor.name} (account page)`
41 if (this.isChannel()) return $localize`${this.actor.name} (channel page)`
46 classes: string[] = []
47 defaultAvatarUrl: string
51 this.buildDefaultAvatarUrl()
62 private buildClasses () {
63 this.classes = [ 'avatar' ]
66 this.classes.push(`avatar-${this.size}`)
69 if (this.isChannel()) {
70 this.classes.push('channel')
72 this.classes.push('account')
75 // No avatar, use actor name initial
76 if (this.displayActorInitial()) {
77 this.classes.push('initial')
78 this.classes.push(this.getColorTheme())
82 private buildDefaultAvatarUrl () {
83 this.defaultAvatarUrl = this.isChannel()
84 ? VideoChannel.GET_DEFAULT_AVATAR_URL(this.getSizeNumber())
85 : Account.GET_DEFAULT_AVATAR_URL(this.getSizeNumber())
88 private buildAvatarUrl () {
94 if (this.isAccount()) {
95 this.avatarUrl = Account.GET_ACTOR_AVATAR_URL(this.actor, this.getSizeNumber())
99 if (this.isChannel()) {
100 this.avatarUrl = VideoChannel.GET_ACTOR_AVATAR_URL(this.actor, this.getSizeNumber())
108 if (this.actorType === 'unlogged') return true
109 if (this.previewImage) return true
111 return !!(this.actor && this.avatarUrl)
114 displayActorInitial () {
115 return !this.displayImage() && this.actor && !this.avatarUrl
118 displayPlaceholder () {
119 return this.actorType !== 'unlogged' && !this.actor
123 const name = this.actor?.name
126 return name.slice(0, 1)
129 private isAccount () {
130 return this.actorType === 'account'
133 private isChannel () {
134 return this.actorType === 'channel'
137 private getSizeNumber () {
138 if (this.size) return +this.size
143 private getColorTheme () {
144 const initialLowercase = this.getActorInitial().toLowerCase()
146 // Keep consistency with CSS
148 '0123456789abc': 'blue',
158 const theme = objectKeysTyped(themes)
159 .find(chars => chars.includes(initialLowercase))
161 return themes[theme] || 'blue'