client/src/app/shared/shared-actor-image/actor-avatar.component.ts

   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'
   5
   6 type ActorInput = {
   7   name: string
   8   avatar?: { url?: string, path: string }
   9   url: string
  10 }
  11
  12 export type ActorAvatarSize = '18' | '25' | '32' | '34' | '36' | '40' | '100' | '120'
  13
  14 @Component({
  15   selector: 'my-actor-avatar',
  16   styleUrls: [ './actor-avatar.component.scss' ],
  17   templateUrl: './actor-avatar.component.html'
  18 })
  19 export class ActorAvatarComponent {
  20   @Input() account: ActorInput
  21   @Input() channel: ActorInput
  22
  23   @Input() previewImage: SafeResourceUrl
  24
  25   @Input() size: ActorAvatarSize
  26
  27   // Use an external link
  28   @Input() href: string
  29   // Use routerLink
  30   @Input() internalHref: string | any[]
  31
  32   @Input() set title (value) {
  33     this._title = value
  34   }
  35
  36   private _title: string
  37
  38   get title () {
  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)`
  42
  43     return ''
  44   }
  45
  46   get alt () {
  47     if (this.account) return $localize`Account avatar`
  48     if (this.channel) return $localize`Channel avatar`
  49
  50     return ''
  51   }
  52
  53   getClass (type: 'avatar' | 'initial') {
  54     const base = [ 'avatar' ]
  55
  56     if (this.size) base.push(`avatar-${this.size}`)
  57
  58     if (this.account) base.push('account')
  59     else base.push('channel')
  60
  61     if (type === 'initial' && this.initial) {
  62       base.push('initial')
  63       base.push(this.getColorTheme())
  64     }
  65
  66     return base
  67   }
  68
  69   get defaultAvatarUrl () {
  70     if (this.account) Account.GET_DEFAULT_AVATAR_URL()
  71     if (this.channel) return VideoChannel.GET_DEFAULT_AVATAR_URL()
  72
  73     return ''
  74   }
  75
  76   get avatarUrl () {
  77     if (this.account) return Account.GET_ACTOR_AVATAR_URL(this.account)
  78     if (this.channel) return VideoChannel.GET_ACTOR_AVATAR_URL(this.channel)
  79
  80     return ''
  81   }
  82
  83   get initial () {
  84     const name = this.account?.name
  85     if (!name) return ''
  86
  87     return name.slice(0, 1)
  88   }
  89
  90   hasActor () {
  91     return !!this.account || !!this.channel
  92   }
  93
  94   private getColorTheme () {
  95     // Keep consistency with CSS
  96     const themes = {
  97       abc: 'blue',
  98       def: 'green',
  99       ghi: 'purple',
 100       jkl: 'gray',
 101       mno: 'yellow',
 102       pqr: 'orange',
 103       stvu: 'red',
 104       wxyz: 'dark-blue'
 105     }
 106
 107     const theme = Object.keys(themes)
 108                         .find(chars => chars.includes(this.initial))
 109
 110     return themes[theme]
 111   }
 112 }