aboutsummaryrefslogtreecommitdiffhomepage
path: root/client
diff options
context:
space:
mode:
Diffstat (limited to 'client')
-rw-r--r--client/src/app/+accounts/accounts.component.html2
-rw-r--r--client/src/app/+video-channels/video-channels.component.html4
-rw-r--r--client/src/app/+video-channels/video-channels.component.scss4
-rw-r--r--client/src/app/shared/shared-actor-image/actor-avatar.component.ts16
-rw-r--r--client/src/app/shared/shared-main/account/account.model.ts6
-rw-r--r--client/src/app/shared/shared-main/account/actor.model.ts8
-rw-r--r--client/src/sass/include/_account-channel-page.scss4
7 files changed, 31 insertions, 13 deletions
diff --git a/client/src/app/+accounts/accounts.component.html b/client/src/app/+accounts/accounts.component.html
index 1544ad034..8362e6b7e 100644
--- a/client/src/app/+accounts/accounts.component.html
+++ b/client/src/app/+accounts/accounts.component.html
@@ -2,7 +2,7 @@
2 <div class="account-info"> 2 <div class="account-info">
3 3
4 <div class="account-avatar-row"> 4 <div class="account-avatar-row">
5 <my-actor-avatar class="main-avatar" [account]="account" size="120"></my-actor-avatar> 5 <my-actor-avatar class="main-avatar" [account]="account"></my-actor-avatar>
6 6
7 <div> 7 <div>
8 <div class="section-label" i18n>ACCOUNT</div> 8 <div class="section-label" i18n>ACCOUNT</div>
diff --git a/client/src/app/+video-channels/video-channels.component.html b/client/src/app/+video-channels/video-channels.component.html
index 09f81d2ce..212e2f867 100644
--- a/client/src/app/+video-channels/video-channels.component.html
+++ b/client/src/app/+video-channels/video-channels.component.html
@@ -23,7 +23,7 @@
23 <div class="section-label" i18n>OWNER ACCOUNT</div> 23 <div class="section-label" i18n>OWNER ACCOUNT</div>
24 24
25 <div class="avatar-row"> 25 <div class="avatar-row">
26 <my-actor-avatar class="account-avatar" [account]="ownerAccount" [internalHref]="getAccountUrl()" size="48"></my-actor-avatar> 26 <my-actor-avatar class="account-avatar" [account]="ownerAccount" [internalHref]="getAccountUrl()"></my-actor-avatar>
27 27
28 <div class="actor-info"> 28 <div class="actor-info">
29 <h4> 29 <h4>
@@ -51,7 +51,7 @@
51 </ng-template> 51 </ng-template>
52 52
53 <div class="channel-avatar-row"> 53 <div class="channel-avatar-row">
54 <my-actor-avatar class="main-avatar" [channel]="videoChannel" size="120"></my-actor-avatar> 54 <my-actor-avatar class="main-avatar" [channel]="videoChannel"></my-actor-avatar>
55 55
56 <div> 56 <div>
57 <div class="section-label" i18n>VIDEO CHANNEL</div> 57 <div class="section-label" i18n>VIDEO CHANNEL</div>
diff --git a/client/src/app/+video-channels/video-channels.component.scss b/client/src/app/+video-channels/video-channels.component.scss
index 004ad7998..c00dacae5 100644
--- a/client/src/app/+video-channels/video-channels.component.scss
+++ b/client/src/app/+video-channels/video-channels.component.scss
@@ -124,6 +124,10 @@
124 font-size: var(--myGreyOwnerFontSize); 124 font-size: var(--myGreyOwnerFontSize);
125 color: pvar(--greyForegroundColor); 125 color: pvar(--greyForegroundColor);
126 } 126 }
127
128 .account-avatar {
129 @include actor-avatar-size(48px);
130 }
127 } 131 }
128 132
129 .owner-description { 133 .owner-description {
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
index b2e1ef46e..600984aa2 100644
--- a/client/src/app/shared/shared-actor-image/actor-avatar.component.ts
+++ b/client/src/app/shared/shared-actor-image/actor-avatar.component.ts
@@ -23,7 +23,7 @@ export class ActorAvatarComponent {
23 23
24 @Input() previewImage: string 24 @Input() previewImage: string
25 25
26 @Input() size: ActorAvatarSize = '32' 26 @Input() size: ActorAvatarSize
27 27
28 // Use an external link 28 // Use an external link
29 @Input() href: string 29 @Input() href: string
@@ -50,13 +50,13 @@ export class ActorAvatarComponent {
50 } 50 }
51 51
52 get defaultAvatarUrl () { 52 get defaultAvatarUrl () {
53 if (this.account) return Account.GET_DEFAULT_AVATAR_URL(+this.size) 53 if (this.account) return Account.GET_DEFAULT_AVATAR_URL(this.getSizeNumber())
54 if (this.channel) return VideoChannel.GET_DEFAULT_AVATAR_URL(+this.size) 54 if (this.channel) return VideoChannel.GET_DEFAULT_AVATAR_URL(this.getSizeNumber())
55 } 55 }
56 56
57 get avatarUrl () { 57 get avatarUrl () {
58 if (this.account) return Account.GET_ACTOR_AVATAR_URL(this.account, +this.size) 58 if (this.account) return Account.GET_ACTOR_AVATAR_URL(this.account, this.getSizeNumber())
59 if (this.channel) return VideoChannel.GET_ACTOR_AVATAR_URL(this.channel, +this.size) 59 if (this.channel) return VideoChannel.GET_ACTOR_AVATAR_URL(this.channel, this.getSizeNumber())
60 60
61 return '' 61 return ''
62 } 62 }
@@ -88,6 +88,12 @@ export class ActorAvatarComponent {
88 return !!this.account || !!this.channel 88 return !!this.account || !!this.channel
89 } 89 }
90 90
91 private getSizeNumber () {
92 if (this.size) return +this.size
93
94 return undefined
95 }
96
91 private getColorTheme () { 97 private getColorTheme () {
92 const initialLowercase = this.initial.toLowerCase() 98 const initialLowercase = this.initial.toLowerCase()
93 99
diff --git a/client/src/app/shared/shared-main/account/account.model.ts b/client/src/app/shared/shared-main/account/account.model.ts
index a26a9c11c..e34f6ef64 100644
--- a/client/src/app/shared/shared-main/account/account.model.ts
+++ b/client/src/app/shared/shared-main/account/account.model.ts
@@ -17,12 +17,12 @@ export class Account extends Actor implements ServerAccount {
17 17
18 userId?: number 18 userId?: number
19 19
20 static GET_ACTOR_AVATAR_URL (actor: { avatars: { width: number, url?: string, path: string }[] }, size: number) { 20 static GET_ACTOR_AVATAR_URL (actor: { avatars: { width: number, url?: string, path: string }[] }, size?: number) {
21 return Actor.GET_ACTOR_AVATAR_URL(actor, size) 21 return Actor.GET_ACTOR_AVATAR_URL(actor, size)
22 } 22 }
23 23
24 static GET_DEFAULT_AVATAR_URL (size: number) { 24 static GET_DEFAULT_AVATAR_URL (size?: number) {
25 if (size <= 48) { 25 if (size && size <= 48) {
26 return `${window.location.origin}/client/assets/images/default-avatar-account-48x48.png` 26 return `${window.location.origin}/client/assets/images/default-avatar-account-48x48.png`
27 } 27 }
28 28
diff --git a/client/src/app/shared/shared-main/account/actor.model.ts b/client/src/app/shared/shared-main/account/actor.model.ts
index 977fdb7e5..8427c9902 100644
--- a/client/src/app/shared/shared-main/account/actor.model.ts
+++ b/client/src/app/shared/shared-main/account/actor.model.ts
@@ -20,8 +20,12 @@ export abstract class Actor implements ServerActor {
20 20
21 isLocal: boolean 21 isLocal: boolean
22 22
23 static GET_ACTOR_AVATAR_URL (actor: { avatars: { width: number, url?: string, path: string }[] }, size: number) { 23 static GET_ACTOR_AVATAR_URL (actor: { avatars: { width: number, url?: string, path: string }[] }, size?: number) {
24 const avatar = actor.avatars.sort((a, b) => a.width - b.width).find(a => a.width >= size) 24 const avatars = actor.avatars.sort((a, b) => a.width - b.width)
25
26 const avatar = size
27 ? avatars.find(a => a.width >= size)
28 : avatars[0]
25 29
26 if (!avatar) return '' 30 if (!avatar) return ''
27 if (avatar.url) return avatar.url 31 if (avatar.url) return avatar.url
diff --git a/client/src/sass/include/_account-channel-page.scss b/client/src/sass/include/_account-channel-page.scss
index 06384b98d..f05b8169e 100644
--- a/client/src/sass/include/_account-channel-page.scss
+++ b/client/src/sass/include/_account-channel-page.scss
@@ -70,6 +70,10 @@
70 color: pvar(--mainColor); 70 color: pvar(--mainColor);
71 } 71 }
72 72
73 .main-avatar {
74 @include actor-avatar-size(120px);
75 }
76
73 @media screen and (max-width: $mobile-view) { 77 @media screen and (max-width: $mobile-view) {
74 margin-bottom: 15px; 78 margin-bottom: 15px;
75 79