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

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