]>
Commit | Line | Data |
---|---|---|
746018f6 C |
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 | ||
06ec4bdd C |
12 | export type ActorAvatarSize = '18' | '25' | '32' | '34' | '36' | '40' | '100' | '120' |
13 | ||
746018f6 C |
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 | ||
06ec4bdd | 25 | @Input() size: ActorAvatarSize |
746018f6 C |
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 | ||
8b5c8cd1 | 53 | getClass (type: 'avatar' | 'initial') { |
746018f6 C |
54 | const base = [ 'avatar' ] |
55 | ||
56 | if (this.size) base.push(`avatar-${this.size}`) | |
57 | ||
936441b9 C |
58 | if (this.channel) base.push('channel') |
59 | else base.push('account') | |
746018f6 | 60 | |
8b5c8cd1 | 61 | if (type === 'initial' && this.initial) { |
746018f6 C |
62 | base.push('initial') |
63 | base.push(this.getColorTheme()) | |
64 | } | |
65 | ||
66 | return base | |
67 | } | |
68 | ||
69 | get defaultAvatarUrl () { | |
746018f6 C |
70 | if (this.channel) return VideoChannel.GET_DEFAULT_AVATAR_URL() |
71 | ||
936441b9 | 72 | return Account.GET_DEFAULT_AVATAR_URL() |
746018f6 C |
73 | } |
74 | ||
75 | get avatarUrl () { | |
76 | if (this.account) return Account.GET_ACTOR_AVATAR_URL(this.account) | |
7d026caf | 77 | if (this.channel) return VideoChannel.GET_ACTOR_AVATAR_URL(this.channel) |
746018f6 C |
78 | |
79 | return '' | |
80 | } | |
81 | ||
82 | get initial () { | |
83 | const name = this.account?.name | |
84 | if (!name) return '' | |
85 | ||
86 | return name.slice(0, 1) | |
87 | } | |
88 | ||
89 | hasActor () { | |
90 | return !!this.account || !!this.channel | |
91 | } | |
92 | ||
93 | private getColorTheme () { | |
94 | // Keep consistency with CSS | |
95 | const themes = { | |
96 | abc: 'blue', | |
97 | def: 'green', | |
98 | ghi: 'purple', | |
99 | jkl: 'gray', | |
100 | mno: 'yellow', | |
101 | pqr: 'orange', | |
1fd61899 | 102 | stvu: 'red', |
746018f6 C |
103 | wxyz: 'dark-blue' |
104 | } | |
105 | ||
106 | const theme = Object.keys(themes) | |
107 | .find(chars => chars.includes(this.initial)) | |
108 | ||
109 | return themes[theme] | |
110 | } | |
111 | } |