diff options
author | Chocobozzz <me@florianbigard.com> | 2021-04-28 11:49:34 +0200 |
---|---|---|
committer | Chocobozzz <me@florianbigard.com> | 2021-04-28 11:49:34 +0200 |
commit | 746018f6b81b40e8858303662ac9ec5ce59ac6eb (patch) | |
tree | 7b115d12c1926e6283346072fe1c6adbf056abd7 /client/src/app/shared/shared-actor-image/actor-avatar.component.ts | |
parent | ec489ce2f74570f94dffb62266f4ed6f18621b3e (diff) | |
download | PeerTube-746018f6b81b40e8858303662ac9ec5ce59ac6eb.tar.gz PeerTube-746018f6b81b40e8858303662ac9ec5ce59ac6eb.tar.zst PeerTube-746018f6b81b40e8858303662ac9ec5ce59ac6eb.zip |
Refactor actor avatar display
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 | 110 |
1 files changed, 110 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..6bb3b65fa --- /dev/null +++ b/client/src/app/shared/shared-actor-image/actor-avatar.component.ts | |||
@@ -0,0 +1,110 @@ | |||
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 | @Component({ | ||
13 | selector: 'my-actor-avatar', | ||
14 | styleUrls: [ './actor-avatar.component.scss' ], | ||
15 | templateUrl: './actor-avatar.component.html' | ||
16 | }) | ||
17 | export class ActorAvatarComponent { | ||
18 | @Input() account: ActorInput | ||
19 | @Input() channel: ActorInput | ||
20 | |||
21 | @Input() previewImage: SafeResourceUrl | ||
22 | |||
23 | @Input() size: '18' | '25' | '32' | '34' | '36' | '40' | '100' | '120' | ||
24 | |||
25 | // Use an external link | ||
26 | @Input() href: string | ||
27 | // Use routerLink | ||
28 | @Input() internalHref: string | any[] | ||
29 | |||
30 | @Input() set title (value) { | ||
31 | this._title = value | ||
32 | } | ||
33 | |||
34 | private _title: string | ||
35 | |||
36 | get title () { | ||
37 | if (this._title) return this._title | ||
38 | if (this.account) return $localize`${this.account.name} (account page)` | ||
39 | if (this.channel) return $localize`${this.channel.name} (channel page)` | ||
40 | |||
41 | return '' | ||
42 | } | ||
43 | |||
44 | get alt () { | ||
45 | if (this.account) return $localize`Account avatar` | ||
46 | if (this.channel) return $localize`Channel avatar` | ||
47 | |||
48 | return '' | ||
49 | } | ||
50 | |||
51 | get class () { | ||
52 | const base = [ 'avatar' ] | ||
53 | |||
54 | if (this.size) base.push(`avatar-${this.size}`) | ||
55 | |||
56 | if (this.account) base.push('account') | ||
57 | else base.push('channel') | ||
58 | |||
59 | if (this.initial) { | ||
60 | base.push('initial') | ||
61 | base.push(this.getColorTheme()) | ||
62 | } | ||
63 | |||
64 | return base | ||
65 | } | ||
66 | |||
67 | get defaultAvatarUrl () { | ||
68 | if (this.account) Account.GET_DEFAULT_AVATAR_URL() | ||
69 | if (this.channel) return VideoChannel.GET_DEFAULT_AVATAR_URL() | ||
70 | |||
71 | return '' | ||
72 | } | ||
73 | |||
74 | get avatarUrl () { | ||
75 | if (this.account) return Account.GET_ACTOR_AVATAR_URL(this.account) | ||
76 | if (this.channel) return VideoChannel.GET_ACTOR_AVATAR_URL(this.account) | ||
77 | |||
78 | return '' | ||
79 | } | ||
80 | |||
81 | get initial () { | ||
82 | const name = this.account?.name | ||
83 | if (!name) return '' | ||
84 | |||
85 | return name.slice(0, 1) | ||
86 | } | ||
87 | |||
88 | hasActor () { | ||
89 | return !!this.account || !!this.channel | ||
90 | } | ||
91 | |||
92 | private getColorTheme () { | ||
93 | // Keep consistency with CSS | ||
94 | const themes = { | ||
95 | abc: 'blue', | ||
96 | def: 'green', | ||
97 | ghi: 'purple', | ||
98 | jkl: 'gray', | ||
99 | mno: 'yellow', | ||
100 | pqr: 'orange', | ||
101 | stv: 'red', | ||
102 | wxyz: 'dark-blue' | ||
103 | } | ||
104 | |||
105 | const theme = Object.keys(themes) | ||
106 | .find(chars => chars.includes(this.initial)) | ||
107 | |||
108 | return themes[theme] | ||
109 | } | ||
110 | } | ||