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