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 import { objectKeysTyped } from '@shared/core-utils'
   5
   6 type ActorInput = {
   7   name: string
   8   avatars: { width: number, url?: string, path: string }[]
   9   url: string
  10 }
  11
  12 export type ActorAvatarSize = '18' | '25' | '28' | '32' | '34' | '35' | '36' | '40' | '48' | '75' | '80' | '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 implements OnInit, OnChanges {
  20   private _title: string
  21
  22   @Input() actor: ActorInput
  23   @Input() actorType: 'channel' | 'account' | 'unlogged'
  24
  25   @Input() previewImage: string
  26
  27   @Input() size: ActorAvatarSize
  28
  29   // Use an external link
  30   @Input() href: string
  31   // Use routerLink
  32   @Input() internalHref: string | any[]
  33
  34   @Input() set title (value) {
  35     this._title = value
  36   }
  37
  38   get title () {
  39     if (this._title) return this._title
  40     if (this.isAccount()) return $localize`${this.actor.name} (account page)`
  41     if (this.isChannel()) return $localize`${this.actor.name} (channel page)`
  42
  43     return ''
  44   }
  45
  46   classes: string[] = []
  47   defaultAvatarUrl: string
  48   avatarUrl: string
  49
  50   ngOnInit () {
  51     this.buildDefaultAvatarUrl()
  52
  53     this.buildAvatarUrl()
  54     this.buildClasses()
  55   }
  56
  57   ngOnChanges () {
  58     this.buildAvatarUrl()
  59     this.buildClasses()
  60   }
  61
  62   private buildClasses () {
  63     this.classes = [ 'avatar' ]
  64
  65     if (this.size) {
  66       this.classes.push(`avatar-${this.size}`)
  67     }
  68
  69     if (this.isChannel()) {
  70       this.classes.push('channel')
  71     } else {
  72       this.classes.push('account')
  73     }
  74
  75     // No avatar, use actor name initial
  76     if (this.displayActorInitial()) {
  77       this.classes.push('initial')
  78       this.classes.push(this.getColorTheme())
  79     }
  80   }
  81
  82   private buildDefaultAvatarUrl () {
  83     this.defaultAvatarUrl = this.isChannel()
  84       ? VideoChannel.GET_DEFAULT_AVATAR_URL(this.getSizeNumber())
  85       : Account.GET_DEFAULT_AVATAR_URL(this.getSizeNumber())
  86   }
  87
  88   private buildAvatarUrl () {
  89     if (!this.actor) {
  90       this.avatarUrl = ''
  91       return
  92     }
  93
  94     if (this.isAccount()) {
  95       this.avatarUrl = Account.GET_ACTOR_AVATAR_URL(this.actor, this.getSizeNumber())
  96       return
  97     }
  98
  99     if (this.isChannel()) {
 100       this.avatarUrl = VideoChannel.GET_ACTOR_AVATAR_URL(this.actor, this.getSizeNumber())
 101       return
 102     }
 103
 104     this.avatarUrl = ''
 105   }
 106
 107   displayImage () {
 108     if (this.actorType === 'unlogged') return true
 109     if (this.previewImage) return true
 110
 111     return !!(this.actor && this.avatarUrl)
 112   }
 113
 114   displayActorInitial () {
 115     return !this.displayImage() && this.actor && !this.avatarUrl
 116   }
 117
 118   displayPlaceholder () {
 119     return this.actorType !== 'unlogged' && !this.actor
 120   }
 121
 122   getActorInitial () {
 123     const name = this.actor?.name
 124     if (!name) return ''
 125
 126     return name.slice(0, 1)
 127   }
 128
 129   private isAccount () {
 130     return this.actorType === 'account'
 131   }
 132
 133   private isChannel () {
 134     return this.actorType === 'channel'
 135   }
 136
 137   private getSizeNumber () {
 138     if (this.size) return +this.size
 139
 140     return undefined
 141   }
 142
 143   private getColorTheme () {
 144     const initialLowercase = this.getActorInitial().toLowerCase()
 145
 146     // Keep consistency with CSS
 147     const themes = {
 148       '0123456789abc': 'blue',
 149       'def': 'green',
 150       'ghi': 'purple',
 151       'jkl': 'gray',
 152       'mno': 'yellow',
 153       'pqr': 'orange',
 154       'stvu': 'red',
 155       'wxyz': 'dark-blue'
 156     }
 157
 158     const theme = objectKeysTyped(themes)
 159       .find(chars => chars.includes(initialLowercase))
 160
 161     return themes[theme] || 'blue'
 162   }
 163 }