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 @@
- +
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 @@
- +

@@ -51,7 +51,7 @@
- +
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 @@ font-size: var(--myGreyOwnerFontSize); color: pvar(--greyForegroundColor); } + + .account-avatar { + @include actor-avatar-size(48px); + } } .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 { @Input() previewImage: string - @Input() size: ActorAvatarSize = '32' + @Input() size: ActorAvatarSize // Use an external link @Input() href: string @@ -50,13 +50,13 @@ export class ActorAvatarComponent { } get defaultAvatarUrl () { - if (this.account) return Account.GET_DEFAULT_AVATAR_URL(+this.size) - if (this.channel) return VideoChannel.GET_DEFAULT_AVATAR_URL(+this.size) + if (this.account) return Account.GET_DEFAULT_AVATAR_URL(this.getSizeNumber()) + if (this.channel) return VideoChannel.GET_DEFAULT_AVATAR_URL(this.getSizeNumber()) } get avatarUrl () { - if (this.account) return Account.GET_ACTOR_AVATAR_URL(this.account, +this.size) - if (this.channel) return VideoChannel.GET_ACTOR_AVATAR_URL(this.channel, +this.size) + if (this.account) return Account.GET_ACTOR_AVATAR_URL(this.account, this.getSizeNumber()) + if (this.channel) return VideoChannel.GET_ACTOR_AVATAR_URL(this.channel, this.getSizeNumber()) return '' } @@ -88,6 +88,12 @@ export class ActorAvatarComponent { return !!this.account || !!this.channel } + private getSizeNumber () { + if (this.size) return +this.size + + return undefined + } + private getColorTheme () { const initialLowercase = this.initial.toLowerCase() 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 { userId?: number - static GET_ACTOR_AVATAR_URL (actor: { avatars: { width: number, url?: string, path: string }[] }, size: number) { + static GET_ACTOR_AVATAR_URL (actor: { avatars: { width: number, url?: string, path: string }[] }, size?: number) { return Actor.GET_ACTOR_AVATAR_URL(actor, size) } - static GET_DEFAULT_AVATAR_URL (size: number) { - if (size <= 48) { + static GET_DEFAULT_AVATAR_URL (size?: number) { + if (size && size <= 48) { return `${window.location.origin}/client/assets/images/default-avatar-account-48x48.png` } 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 { isLocal: boolean - static GET_ACTOR_AVATAR_URL (actor: { avatars: { width: number, url?: string, path: string }[] }, size: number) { - const avatar = actor.avatars.sort((a, b) => a.width - b.width).find(a => a.width >= size) + static GET_ACTOR_AVATAR_URL (actor: { avatars: { width: number, url?: string, path: string }[] }, size?: number) { + const avatars = actor.avatars.sort((a, b) => a.width - b.width) + + const avatar = size + ? avatars.find(a => a.width >= size) + : avatars[0] if (!avatar) return '' 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 @@ color: pvar(--mainColor); } + .main-avatar { + @include actor-avatar-size(120px); + } + @media screen and (max-width: $mobile-view) { margin-bottom: 15px;