2021-04-28 11:49:34 +02:00
|
|
|
import { Component, Input } from '@angular/core'
|
|
|
|
import { SafeResourceUrl } from '@angular/platform-browser'
|
|
|
|
import { VideoChannel } from '../shared-main'
|
|
|
|
import { Account } from '../shared-main/account/account.model'
|
|
|
|
|
|
|
|
type ActorInput = {
|
|
|
|
name: string
|
|
|
|
avatar?: { url?: string, path: string }
|
|
|
|
url: string
|
|
|
|
}
|
|
|
|
|
2021-05-05 09:44:24 +02:00
|
|
|
export type ActorAvatarSize = '18' | '25' | '32' | '34' | '36' | '40' | '100' | '120'
|
|
|
|
|
2021-04-28 11:49:34 +02:00
|
|
|
@Component({
|
|
|
|
selector: 'my-actor-avatar',
|
|
|
|
styleUrls: [ './actor-avatar.component.scss' ],
|
|
|
|
templateUrl: './actor-avatar.component.html'
|
|
|
|
})
|
|
|
|
export class ActorAvatarComponent {
|
2021-08-17 14:42:53 +02:00
|
|
|
private _title: string
|
|
|
|
|
2021-04-28 11:49:34 +02:00
|
|
|
@Input() account: ActorInput
|
|
|
|
@Input() channel: ActorInput
|
|
|
|
|
|
|
|
@Input() previewImage: SafeResourceUrl
|
|
|
|
|
2021-05-05 09:44:24 +02:00
|
|
|
@Input() size: ActorAvatarSize
|
2021-04-28 11:49:34 +02:00
|
|
|
|
|
|
|
// 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 ''
|
|
|
|
}
|
|
|
|
|
|
|
|
get alt () {
|
|
|
|
if (this.account) return $localize`Account avatar`
|
|
|
|
if (this.channel) return $localize`Channel avatar`
|
|
|
|
|
|
|
|
return ''
|
|
|
|
}
|
|
|
|
|
|
|
|
get defaultAvatarUrl () {
|
|
|
|
if (this.channel) return VideoChannel.GET_DEFAULT_AVATAR_URL()
|
|
|
|
|
2021-05-05 09:52:33 +02:00
|
|
|
return Account.GET_DEFAULT_AVATAR_URL()
|
2021-04-28 11:49:34 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
get avatarUrl () {
|
|
|
|
if (this.account) return Account.GET_ACTOR_AVATAR_URL(this.account)
|
2021-04-28 15:59:46 +02:00
|
|
|
if (this.channel) return VideoChannel.GET_ACTOR_AVATAR_URL(this.channel)
|
2021-04-28 11:49:34 +02:00
|
|
|
|
|
|
|
return ''
|
|
|
|
}
|
|
|
|
|
|
|
|
get initial () {
|
|
|
|
const name = this.account?.name
|
|
|
|
if (!name) return ''
|
|
|
|
|
|
|
|
return name.slice(0, 1)
|
|
|
|
}
|
|
|
|
|
2021-08-17 14:42:53 +02:00
|
|
|
getClass (type: 'avatar' | 'initial') {
|
|
|
|
const base = [ 'avatar' ]
|
|
|
|
|
|
|
|
if (this.size) base.push(`avatar-${this.size}`)
|
|
|
|
|
|
|
|
if (this.channel) base.push('channel')
|
|
|
|
else base.push('account')
|
|
|
|
|
|
|
|
if (type === 'initial' && this.initial) {
|
|
|
|
base.push('initial')
|
|
|
|
base.push(this.getColorTheme())
|
|
|
|
}
|
|
|
|
|
|
|
|
return base
|
|
|
|
}
|
|
|
|
|
2021-04-28 11:49:34 +02:00
|
|
|
hasActor () {
|
|
|
|
return !!this.account || !!this.channel
|
|
|
|
}
|
|
|
|
|
|
|
|
private getColorTheme () {
|
|
|
|
// Keep consistency with CSS
|
|
|
|
const themes = {
|
|
|
|
abc: 'blue',
|
|
|
|
def: 'green',
|
|
|
|
ghi: 'purple',
|
|
|
|
jkl: 'gray',
|
|
|
|
mno: 'yellow',
|
|
|
|
pqr: 'orange',
|
2021-05-03 11:06:19 +02:00
|
|
|
stvu: 'red',
|
2021-04-28 11:49:34 +02:00
|
|
|
wxyz: 'dark-blue'
|
|
|
|
}
|
|
|
|
|
|
|
|
const theme = Object.keys(themes)
|
|
|
|
.find(chars => chars.includes(this.initial))
|
|
|
|
|
|
|
|
return themes[theme]
|
|
|
|
}
|
|
|
|
}
|