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

   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
   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 OnInit, OnChanges {
  19   private _title: string
  20
  21   @Input() actor: ActorInput
  22   @Input() actorType: 'channel' | 'account' | 'unlogged'
  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.isAccount()) return $localize`${this.actor.name} (account page)`
  40     if (this.isChannel()) return $localize`${this.actor.name} (channel page)`
  41
  42     return ''
  43   }
  44
  45   classes: string[] = []
  46   alt: string
  47   defaultAvatarUrl: string
  48   avatarUrl: string
  49
  50   ngOnInit () {
  51     this.buildDefaultAvatarUrl()
  52
  53     this.buildAlt()
  54     this.buildAvatarUrl()
  55     this.buildClasses()
  56   }
  57
  58   ngOnChanges () {
  59     this.buildAlt()
  60     this.buildAvatarUrl()
  61     this.buildClasses()
  62   }
  63
  64   private buildClasses () {
  65     this.classes = [ 'avatar' ]
  66
  67     if (this.size) {
  68       this.classes.push(`avatar-${this.size}`)
  69     }
  70
  71     if (this.isChannel()) {
  72       this.classes.push('channel')
  73     } else {
  74       this.classes.push('account')
  75     }
  76
  77     // No avatar, use actor name initial
  78     if (this.displayActorInitial()) {
  79       this.classes.push('initial')
  80       this.classes.push(this.getColorTheme())
  81     }
  82   }
  83
  84   private buildAlt () {
  85     if (this.isAccount()) this.alt = $localize`Account avatar`
  86     else if (this.isChannel()) this.alt = $localize`Channel avatar`
  87     else this.alt = ''
  88   }
  89
  90   private buildDefaultAvatarUrl () {
  91     this.defaultAvatarUrl = this.isChannel()
  92       ? VideoChannel.GET_DEFAULT_AVATAR_URL(this.getSizeNumber())
  93       : Account.GET_DEFAULT_AVATAR_URL(this.getSizeNumber())
  94   }
  95
  96   private buildAvatarUrl () {
  97     if (!this.actor) {
  98       this.avatarUrl = ''
  99       return
 100     }
 101
 102     if (this.isAccount()) {
 103       this.avatarUrl = Account.GET_ACTOR_AVATAR_URL(this.actor, this.getSizeNumber())
 104       return
 105     }
 106
 107     if (this.isChannel()) {
 108       this.avatarUrl = VideoChannel.GET_ACTOR_AVATAR_URL(this.actor, this.getSizeNumber())
 109       return
 110     }
 111
 112     this.avatarUrl = ''
 113   }
 114
 115   displayImage () {
 116     if (this.actorType === 'unlogged') return true
 117     if (this.previewImage) return true
 118
 119     return !!(this.actor && this.avatarUrl)
 120   }
 121
 122   displayActorInitial () {
 123     return !this.displayImage() && this.actor && !this.avatarUrl
 124   }
 125
 126   displayPlaceholder () {
 127     return this.actorType !== 'unlogged' && !this.actor
 128   }
 129
 130   getActorInitial () {
 131     const name = this.actor?.name
 132     if (!name) return ''
 133
 134     return name.slice(0, 1)
 135   }
 136
 137   private isAccount () {
 138     return this.actorType === 'account'
 139   }
 140
 141   private isChannel () {
 142     return this.actorType === 'channel'
 143   }
 144
 145   private getSizeNumber () {
 146     if (this.size) return +this.size
 147
 148     return undefined
 149   }
 150
 151   private getColorTheme () {
 152     const initialLowercase = this.getActorInitial().toLowerCase()
 153
 154     // Keep consistency with CSS
 155     const themes = {
 156       '0123456789abc': 'blue',
 157       def: 'green',
 158       ghi: 'purple',
 159       jkl: 'gray',
 160       mno: 'yellow',
 161       pqr: 'orange',
 162       stvu: 'red',
 163       wxyz: 'dark-blue'
 164     }
 165
 166     const theme = Object.keys(themes)
 167                         .find(chars => chars.includes(initialLowercase))
 168
 169     return themes[theme] || 'blue'
 170   }
 171 }