From 87fdea2fbf486f056dd24bfd416841813bd41c58 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Mon, 27 Jun 2022 11:22:21 +0200 Subject: Refactor actor avatar component --- .../shared-abuse-list/abuse-details.component.html | 4 +- .../abuse-list-table.component.html | 2 +- .../actor-avatar-edit.component.html | 2 +- .../actor-avatar-edit.component.ts | 16 +---- .../shared-actor-image/actor-avatar.component.html | 14 +++-- .../shared-actor-image/actor-avatar.component.ts | 73 +++++++++++++++------- .../channel-miniature-markup.component.html | 2 +- .../account-blocklist.component.html | 2 +- .../video-miniature.component.html | 4 +- 9 files changed, 69 insertions(+), 50 deletions(-) (limited to 'client/src/app/shared') diff --git a/client/src/app/shared/shared-abuse-list/abuse-details.component.html b/client/src/app/shared/shared-abuse-list/abuse-details.component.html index b04d46e32..fdf700f7c 100644 --- a/client/src/app/shared/shared-abuse-list/abuse-details.component.html +++ b/client/src/app/shared/shared-abuse-list/abuse-details.component.html @@ -10,7 +10,7 @@ - +
{{ abuse.reporterAccount.nameWithHost }}
@@ -31,7 +31,7 @@ - +
{{ abuse.flaggedAccount ? abuse.flaggedAccount.nameWithHost : '' }}
diff --git a/client/src/app/shared/shared-abuse-list/abuse-list-table.component.html b/client/src/app/shared/shared-abuse-list/abuse-list-table.component.html index f79054d03..5f9db2b3b 100644 --- a/client/src/app/shared/shared-abuse-list/abuse-list-table.component.html +++ b/client/src/app/shared/shared-abuse-list/abuse-list-table.component.html @@ -43,7 +43,7 @@
- +
{{ abuse.reporterAccount.displayName }} {{ abuse.reporterAccount.nameWithHost }} diff --git a/client/src/app/shared/shared-actor-image-edit/actor-avatar-edit.component.html b/client/src/app/shared/shared-actor-image-edit/actor-avatar-edit.component.html index b63bf1f92..6459c5ffe 100644 --- a/client/src/app/shared/shared-actor-image-edit/actor-avatar-edit.component.html +++ b/client/src/app/shared/shared-actor-image-edit/actor-avatar-edit.component.html @@ -1,6 +1,6 @@
- +
diff --git a/client/src/app/shared/shared-actor-image-edit/actor-avatar-edit.component.ts b/client/src/app/shared/shared-actor-image-edit/actor-avatar-edit.component.ts index 01bb401fb..b71a3c485 100644 --- a/client/src/app/shared/shared-actor-image-edit/actor-avatar-edit.component.ts +++ b/client/src/app/shared/shared-actor-image-edit/actor-avatar-edit.component.ts @@ -75,19 +75,9 @@ export class ActorAvatarEditComponent implements OnInit { return !!this.preview || this.actor.avatars.length !== 0 } - isChannel () { - return !!(this.actor as VideoChannel).ownerAccount - } - - getChannel (): VideoChannel { - if (this.isChannel()) return this.actor as VideoChannel - - return undefined - } - - getAccount (): Account { - if (this.isChannel()) return undefined + getActorType () { + if ((this.actor as VideoChannel).ownerAccount) return 'channel' - return this.actor as Account + return 'account' } } diff --git a/client/src/app/shared/shared-actor-image/actor-avatar.component.html b/client/src/app/shared/shared-actor-image/actor-avatar.component.html index ba025da4d..fb9efc20a 100644 --- a/client/src/app/shared/shared-actor-image/actor-avatar.component.html +++ b/client/src/app/shared/shared-actor-image/actor-avatar.component.html @@ -1,19 +1,21 @@ - + -
- {{ initial }} +
+ {{ getActorInitial() }}
+ +
- + - + - + 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 fdc8268d8..437de1d50 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 @@ -18,8 +18,8 @@ export type ActorAvatarSize = '18' | '25' | '28' | '32' | '34' | '35' | '36' | ' export class ActorAvatarComponent implements OnChanges { private _title: string - @Input() account: ActorInput - @Input() channel: ActorInput + @Input() actor: ActorInput + @Input() actorType: 'channel' | 'account' | 'unlogged' @Input() previewImage: string @@ -36,8 +36,8 @@ export class ActorAvatarComponent implements OnChanges { get title () { if (this._title) return this._title - if (this.account) return $localize`${this.account.name} (account page)` - if (this.channel) return $localize`${this.channel.name} (channel page)` + if (this.isAccount()) return $localize`${this.actor.name} (account page)` + if (this.isChannel()) return $localize`${this.actor.name} (channel page)` return '' } @@ -45,48 +45,75 @@ export class ActorAvatarComponent implements OnChanges { classes: string[] = [] get alt () { - if (this.account) return $localize`Account avatar` - if (this.channel) return $localize`Channel avatar` + if (this.isAccount()) return $localize`Account avatar` + if (this.isChannel()) return $localize`Channel avatar` return '' } get defaultAvatarUrl () { - if (this.channel) return VideoChannel.GET_DEFAULT_AVATAR_URL(this.getSizeNumber()) + if (this.isChannel()) return VideoChannel.GET_DEFAULT_AVATAR_URL(this.getSizeNumber()) + // account or unlogged return Account.GET_DEFAULT_AVATAR_URL(this.getSizeNumber()) } get avatarUrl () { - 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()) + if (!this.actor) return '' - return '' - } - - get initial () { - const name = this.account?.name - if (!name) return '' + if (this.isAccount()) return Account.GET_ACTOR_AVATAR_URL(this.actor, this.getSizeNumber()) + if (this.isChannel()) return VideoChannel.GET_ACTOR_AVATAR_URL(this.actor, this.getSizeNumber()) - return name.slice(0, 1) + return '' } ngOnChanges () { this.classes = [ 'avatar' ] - if (this.size) this.classes.push(`avatar-${this.size}`) + if (this.size) { + this.classes.push(`avatar-${this.size}`) + } - if (this.channel) this.classes.push('channel') - else this.classes.push('account') + if (this.isChannel()) { + this.classes.push('channel') + } else { + this.classes.push('account') + } - if (!this.avatarUrl && this.initial) { + // No avatar, use actor name initial + if (this.displayActorInitial()) { this.classes.push('initial') this.classes.push(this.getColorTheme()) } } - hasActor () { - return !!this.account || !!this.channel + displayImage () { + if (this.actorType === 'unlogged') return true + + return !!(this.actor && this.avatarUrl) + } + + displayActorInitial () { + return this.actor && !this.avatarUrl + } + + displayPlaceholder () { + return this.actorType !== 'unlogged' && !this.actor + } + + getActorInitial () { + const name = this.actor?.name + if (!name) return '' + + return name.slice(0, 1) + } + + private isAccount () { + return this.actorType === 'account' + } + + private isChannel () { + return this.actorType === 'channel' } private getSizeNumber () { @@ -96,7 +123,7 @@ export class ActorAvatarComponent implements OnChanges { } private getColorTheme () { - const initialLowercase = this.initial.toLowerCase() + const initialLowercase = this.getActorInitial().toLowerCase() // Keep consistency with CSS const themes = { diff --git a/client/src/app/shared/shared-custom-markup/peertube-custom-tags/channel-miniature-markup.component.html b/client/src/app/shared/shared-custom-markup/peertube-custom-tags/channel-miniature-markup.component.html index 52a402329..395cc8562 100644 --- a/client/src/app/shared/shared-custom-markup/peertube-custom-tags/channel-miniature-markup.component.html +++ b/client/src/app/shared/shared-custom-markup/peertube-custom-tags/channel-miniature-markup.component.html @@ -1,7 +1,7 @@
- +
diff --git a/client/src/app/shared/shared-moderation/account-blocklist.component.html b/client/src/app/shared/shared-moderation/account-blocklist.component.html index 131110318..fef24cfdf 100644 --- a/client/src/app/shared/shared-moderation/account-blocklist.component.html +++ b/client/src/app/shared/shared-moderation/account-blocklist.component.html @@ -33,7 +33,7 @@
- +
{{ accountBlock.blockedAccount.displayName }} {{ accountBlock.blockedAccount.nameWithHost }} diff --git a/client/src/app/shared/shared-video-miniature/video-miniature.component.html b/client/src/app/shared/shared-video-miniature/video-miniature.component.html index 3cf128de0..e8d2ca1c4 100644 --- a/client/src/app/shared/shared-video-miniature/video-miniature.component.html +++ b/client/src/app/shared/shared-video-miniature/video-miniature.component.html @@ -12,13 +12,13 @@
-- cgit v1.2.3