]>
Commit | Line | Data |
---|---|---|
746018f6 | 1 | import { Component, Input } from '@angular/core' |
746018f6 C |
2 | import { VideoChannel } from '../shared-main' |
3 | import { Account } from '../shared-main/account/account.model' | |
4 | ||
5 | type ActorInput = { | |
6 | name: string | |
d0800f76 | 7 | avatars: { width: number, url?: string, path: string }[] |
746018f6 C |
8 | url: string |
9 | } | |
10 | ||
d0800f76 | 11 | export type ActorAvatarSize = '18' | '25' | '28' | '32' | '34' | '35' | '36' | '40' | '48' | '75' | '80' | '100' | '120' |
06ec4bdd | 12 | |
746018f6 C |
13 | @Component({ |
14 | selector: 'my-actor-avatar', | |
15 | styleUrls: [ './actor-avatar.component.scss' ], | |
16 | templateUrl: './actor-avatar.component.html' | |
17 | }) | |
18 | export class ActorAvatarComponent { | |
9df52d66 C |
19 | private _title: string |
20 | ||
746018f6 C |
21 | @Input() account: ActorInput |
22 | @Input() channel: ActorInput | |
23 | ||
0ea2f79d | 24 | @Input() previewImage: string |
746018f6 | 25 | |
d0800f76 | 26 | @Input() size: ActorAvatarSize = '32' |
746018f6 C |
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 | ||
746018f6 C |
37 | get title () { |
38 | if (this._title) return this._title | |
39 | if (this.account) return $localize`${this.account.name} (account page)` | |
40 | if (this.channel) return $localize`${this.channel.name} (channel page)` | |
41 | ||
42 | return '' | |
43 | } | |
44 | ||
45 | get alt () { | |
46 | if (this.account) return $localize`Account avatar` | |
47 | if (this.channel) return $localize`Channel avatar` | |
48 | ||
49 | return '' | |
50 | } | |
51 | ||
746018f6 | 52 | get defaultAvatarUrl () { |
d0800f76 | 53 | if (this.account) return Account.GET_DEFAULT_AVATAR_URL(+this.size) |
54 | if (this.channel) return VideoChannel.GET_DEFAULT_AVATAR_URL(+this.size) | |
746018f6 C |
55 | } |
56 | ||
57 | get avatarUrl () { | |
d0800f76 | 58 | if (this.account) return Account.GET_ACTOR_AVATAR_URL(this.account, +this.size) |
59 | if (this.channel) return VideoChannel.GET_ACTOR_AVATAR_URL(this.channel, +this.size) | |
746018f6 C |
60 | |
61 | return '' | |
62 | } | |
63 | ||
64 | get initial () { | |
65 | const name = this.account?.name | |
66 | if (!name) return '' | |
67 | ||
68 | return name.slice(0, 1) | |
69 | } | |
70 | ||
9df52d66 C |
71 | getClass (type: 'avatar' | 'initial') { |
72 | const base = [ 'avatar' ] | |
73 | ||
74 | if (this.size) base.push(`avatar-${this.size}`) | |
75 | ||
76 | if (this.channel) base.push('channel') | |
77 | else base.push('account') | |
78 | ||
79 | if (type === 'initial' && this.initial) { | |
80 | base.push('initial') | |
81 | base.push(this.getColorTheme()) | |
82 | } | |
83 | ||
84 | return base | |
85 | } | |
86 | ||
746018f6 C |
87 | hasActor () { |
88 | return !!this.account || !!this.channel | |
89 | } | |
90 | ||
91 | private getColorTheme () { | |
f41efa52 C |
92 | const initialLowercase = this.initial.toLowerCase() |
93 | ||
746018f6 C |
94 | // Keep consistency with CSS |
95 | const themes = { | |
f41efa52 | 96 | '0123456789abc': 'blue', |
746018f6 C |
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) | |
f41efa52 | 107 | .find(chars => chars.includes(initialLowercase)) |
746018f6 C |
108 | |
109 | return themes[theme] | |
110 | } | |
111 | } |