diff options
Diffstat (limited to 'client/src/app/shared/shared-actor-image/actor-avatar.component.ts')
-rw-r--r-- | client/src/app/shared/shared-actor-image/actor-avatar.component.ts | 111 |
1 files changed, 111 insertions, 0 deletions
diff --git a/client/src/app/shared/shared-actor-image/actor-avatar.component.ts b/client/src/app/shared/shared-actor-image/actor-avatar.component.ts new file mode 100644 index 000000000..b06c2bae6 --- /dev/null +++ b/client/src/app/shared/shared-actor-image/actor-avatar.component.ts | |||
@@ -0,0 +1,111 @@ | |||
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 | export type ActorAvatarSize = '18' | '25' | '32' | '34' | '36' | '40' | '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 { | ||
20 | @Input() account: ActorInput | ||
21 | @Input() channel: ActorInput | ||
22 | |||
23 | @Input() previewImage: SafeResourceUrl | ||
24 | |||
25 | @Input() size: ActorAvatarSize | ||
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 | |||
53 | getClass (type: 'avatar' | 'initial') { | ||
54 | const base = [ 'avatar' ] | ||
55 | |||
56 | if (this.size) base.push(`avatar-${this.size}`) | ||
57 | |||
58 | if (this.channel) base.push('channel') | ||
59 | else base.push('account') | ||
60 | |||
61 | if (type === 'initial' && this.initial) { | ||
62 | base.push('initial') | ||
63 | base.push(this.getColorTheme()) | ||
64 | } | ||
65 | |||
66 | return base | ||
67 | } | ||
68 | |||
69 | get defaultAvatarUrl () { | ||
70 | if (this.channel) return VideoChannel.GET_DEFAULT_AVATAR_URL() | ||
71 | |||
72 | return Account.GET_DEFAULT_AVATAR_URL() | ||
73 | } | ||
74 | |||
75 | get avatarUrl () { | ||
76 | if (this.account) return Account.GET_ACTOR_AVATAR_URL(this.account) | ||
77 | if (this.channel) return VideoChannel.GET_ACTOR_AVATAR_URL(this.channel) | ||
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', | ||
102 | stvu: 'red', | ||
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 | } | ||