aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2022-06-27 11:22:21 +0200
committerChocobozzz <me@florianbigard.com>2022-06-27 11:22:21 +0200
commit87fdea2fbf486f056dd24bfd416841813bd41c58 (patch)
tree24cc7e153620d792d255d5c441e8bf1609cbe636 /client/src
parente722fb5923ddf11d72e48cec9788abc64327c22f (diff)
downloadPeerTube-87fdea2fbf486f056dd24bfd416841813bd41c58.tar.gz
PeerTube-87fdea2fbf486f056dd24bfd416841813bd41c58.tar.zst
PeerTube-87fdea2fbf486f056dd24bfd416841813bd41c58.zip
Refactor actor avatar component
Diffstat (limited to 'client/src')
-rw-r--r--client/src/app/+accounts/account-video-channels/account-video-channels.component.html2
-rw-r--r--client/src/app/+accounts/accounts.component.html2
-rw-r--r--client/src/app/+admin/overview/comments/video-comment-list.component.html2
-rw-r--r--client/src/app/+admin/overview/users/user-list/user-list.component.html4
-rw-r--r--client/src/app/+admin/overview/users/user-list/user-list.component.ts1
-rw-r--r--client/src/app/+my-library/+my-video-channels/my-video-channels.component.html2
-rw-r--r--client/src/app/+my-library/my-follows/my-followers.component.html2
-rw-r--r--client/src/app/+my-library/my-follows/my-subscriptions.component.html4
-rw-r--r--client/src/app/+my-library/my-ownership/my-ownership.component.html2
-rw-r--r--client/src/app/+search/search.component.html2
-rw-r--r--client/src/app/+video-channels/video-channels.component.html4
-rw-r--r--client/src/app/+videos/+video-watch/shared/comment/video-comment-add.component.html2
-rw-r--r--client/src/app/+videos/+video-watch/shared/comment/video-comment-add.component.ts7
-rw-r--r--client/src/app/+videos/+video-watch/shared/comment/video-comment.component.html6
-rw-r--r--client/src/app/+videos/+video-watch/shared/metadata/video-avatar-channel.component.html4
-rw-r--r--client/src/app/+videos/video-list/overview/video-overview.component.html2
-rw-r--r--client/src/app/menu/menu.component.html3
-rw-r--r--client/src/app/shared/shared-abuse-list/abuse-details.component.html4
-rw-r--r--client/src/app/shared/shared-abuse-list/abuse-list-table.component.html2
-rw-r--r--client/src/app/shared/shared-actor-image-edit/actor-avatar-edit.component.html2
-rw-r--r--client/src/app/shared/shared-actor-image-edit/actor-avatar-edit.component.ts16
-rw-r--r--client/src/app/shared/shared-actor-image/actor-avatar.component.html14
-rw-r--r--client/src/app/shared/shared-actor-image/actor-avatar.component.ts73
-rw-r--r--client/src/app/shared/shared-custom-markup/peertube-custom-tags/channel-miniature-markup.component.html2
-rw-r--r--client/src/app/shared/shared-moderation/account-blocklist.component.html2
-rw-r--r--client/src/app/shared/shared-video-miniature/video-miniature.component.html4
26 files changed, 100 insertions, 70 deletions
diff --git a/client/src/app/+accounts/account-video-channels/account-video-channels.component.html b/client/src/app/+accounts/account-video-channels/account-video-channels.component.html
index 0dfa87074..200d9415f 100644
--- a/client/src/app/+accounts/account-video-channels/account-video-channels.component.html
+++ b/client/src/app/+accounts/account-video-channels/account-video-channels.component.html
@@ -9,7 +9,7 @@
9 9
10 <div class="channel-avatar-row"> 10 <div class="channel-avatar-row">
11 <my-actor-avatar 11 <my-actor-avatar
12 [channel]="videoChannel" 12 [actor]="videoChannel" actorType="channel"
13 [internalHref]="getVideoChannelLink(videoChannel)" 13 [internalHref]="getVideoChannelLink(videoChannel)"
14 i18n-title 14 i18n-title
15 title="See this video channel" 15 title="See this video channel"
diff --git a/client/src/app/+accounts/accounts.component.html b/client/src/app/+accounts/accounts.component.html
index 0be2271c7..226fa8f31 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"></my-actor-avatar> 5 <my-actor-avatar class="main-avatar" actorType="account" [actor]="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/+admin/overview/comments/video-comment-list.component.html b/client/src/app/+admin/overview/comments/video-comment-list.component.html
index 6fdefbfe2..b7fc0a1eb 100644
--- a/client/src/app/+admin/overview/comments/video-comment-list.component.html
+++ b/client/src/app/+admin/overview/comments/video-comment-list.component.html
@@ -68,7 +68,7 @@
68 <td> 68 <td>
69 <a [href]="videoComment.account.localUrl" i18n-title title="Open account in a new tab" target="_blank" rel="noopener noreferrer"> 69 <a [href]="videoComment.account.localUrl" i18n-title title="Open account in a new tab" target="_blank" rel="noopener noreferrer">
70 <div class="chip two-lines"> 70 <div class="chip two-lines">
71 <my-actor-avatar [account]="videoComment.account" size="32"></my-actor-avatar> 71 <my-actor-avatar [actor]="videoComment.account" actorType="account" size="32"></my-actor-avatar>
72 <div> 72 <div>
73 {{ videoComment.account.displayName }} 73 {{ videoComment.account.displayName }}
74 <span>{{ videoComment.by }}</span> 74 <span>{{ videoComment.by }}</span>
diff --git a/client/src/app/+admin/overview/users/user-list/user-list.component.html b/client/src/app/+admin/overview/users/user-list/user-list.component.html
index 4da46dc7b..aa3def63a 100644
--- a/client/src/app/+admin/overview/users/user-list/user-list.component.html
+++ b/client/src/app/+admin/overview/users/user-list/user-list.component.html
@@ -93,8 +93,8 @@
93 <td *ngIf="isSelected('username')" class="cell-username"> 93 <td *ngIf="isSelected('username')" class="cell-username">
94 <a i18n-title title="Open account in a new tab" target="_blank" rel="noopener noreferrer" [routerLink]="[ '/a/' + user.username ]"> 94 <a i18n-title title="Open account in a new tab" target="_blank" rel="noopener noreferrer" [routerLink]="[ '/a/' + user.username ]">
95 <div class="chip two-lines"> 95 <div class="chip two-lines">
96 <my-actor-avatar [account]="user?.account" size="32"></my-actor-avatar> 96 <my-actor-avatar [actor]="user?.account" actorType="account" size="32"></my-actor-avatar>
97 <div> 97 <div>
98 <span class="user-table-primary-text">{{ user.account.displayName }}</span> 98 <span class="user-table-primary-text">{{ user.account.displayName }}</span>
99 <span class="muted">{{ user.username }}</span> 99 <span class="muted">{{ user.username }}</span>
100 </div> 100 </div>
diff --git a/client/src/app/+admin/overview/users/user-list/user-list.component.ts b/client/src/app/+admin/overview/users/user-list/user-list.component.ts
index 91f42546b..3e1a5f6b8 100644
--- a/client/src/app/+admin/overview/users/user-list/user-list.component.ts
+++ b/client/src/app/+admin/overview/users/user-list/user-list.component.ts
@@ -190,7 +190,6 @@ export class UserListComponent extends RestTable implements OnInit {
190 } 190 }
191 191
192 getUserVideoQuotaDailyPercentage (user: UserForList) { 192 getUserVideoQuotaDailyPercentage (user: UserForList) {
193 console.log(user.rawVideoQuotaUsedDaily * 100 / user.rawVideoQuotaDaily)
194 return user.rawVideoQuotaUsedDaily * 100 / user.rawVideoQuotaDaily 193 return user.rawVideoQuotaUsedDaily * 100 / user.rawVideoQuotaDaily
195 } 194 }
196 195
diff --git a/client/src/app/+my-library/+my-video-channels/my-video-channels.component.html b/client/src/app/+my-library/+my-video-channels/my-video-channels.component.html
index f39f90803..e942e002b 100644
--- a/client/src/app/+my-library/+my-video-channels/my-video-channels.component.html
+++ b/client/src/app/+my-library/+my-video-channels/my-video-channels.component.html
@@ -19,7 +19,7 @@
19 19
20<div class="video-channels"> 20<div class="video-channels">
21 <div *ngFor="let videoChannel of videoChannels; let i = index" class="video-channel"> 21 <div *ngFor="let videoChannel of videoChannels; let i = index" class="video-channel">
22 <my-actor-avatar [channel]="videoChannel" [internalHref]="[ '/c', videoChannel.nameWithHost ]" size="80"></my-actor-avatar> 22 <my-actor-avatar [actor]="videoChannel" actorType="channel" [internalHref]="[ '/c', videoChannel.nameWithHost ]" size="80"></my-actor-avatar>
23 23
24 <div class="video-channel-info"> 24 <div class="video-channel-info">
25 <a [routerLink]="[ '/c', videoChannel.nameWithHost ]" class="video-channel-names" i18n-title title="Channel page"> 25 <a [routerLink]="[ '/c', videoChannel.nameWithHost ]" class="video-channel-names" i18n-title title="Channel page">
diff --git a/client/src/app/+my-library/my-follows/my-followers.component.html b/client/src/app/+my-library/my-follows/my-followers.component.html
index ef2ab7aca..e9b0f6355 100644
--- a/client/src/app/+my-library/my-follows/my-followers.component.html
+++ b/client/src/app/+my-library/my-follows/my-followers.component.html
@@ -14,7 +14,7 @@
14 14
15<div class="actors" myInfiniteScroller (nearOfBottom)="onNearOfBottom()" [dataObservable]="onDataSubject.asObservable()"> 15<div class="actors" myInfiniteScroller (nearOfBottom)="onNearOfBottom()" [dataObservable]="onDataSubject.asObservable()">
16 <div *ngFor="let follow of follows" class="actor"> 16 <div *ngFor="let follow of follows" class="actor">
17 <my-actor-avatar [account]="follow.follower" [href]="follow.follower.url" size="40"></my-actor-avatar> 17 <my-actor-avatar [actor]="follow.follower" actorType="account" [href]="follow.follower.url" size="40"></my-actor-avatar>
18 18
19 <div class="actor-info"> 19 <div class="actor-info">
20 <a [href]="follow.follower.url" class="actor-names" rel="noopener noreferrer" target="_blank" i18n-title title="Follower page"> 20 <a [href]="follow.follower.url" class="actor-names" rel="noopener noreferrer" target="_blank" i18n-title title="Follower page">
diff --git a/client/src/app/+my-library/my-follows/my-subscriptions.component.html b/client/src/app/+my-library/my-follows/my-subscriptions.component.html
index 11d460b19..d5f164bf2 100644
--- a/client/src/app/+my-library/my-follows/my-subscriptions.component.html
+++ b/client/src/app/+my-library/my-follows/my-subscriptions.component.html
@@ -14,7 +14,7 @@
14 14
15<div class="actors" myInfiniteScroller (nearOfBottom)="onNearOfBottom()" [dataObservable]="onDataSubject.asObservable()"> 15<div class="actors" myInfiniteScroller (nearOfBottom)="onNearOfBottom()" [dataObservable]="onDataSubject.asObservable()">
16 <div *ngFor="let videoChannel of videoChannels" class="actor"> 16 <div *ngFor="let videoChannel of videoChannels" class="actor">
17 <my-actor-avatar [channel]="videoChannel" [internalHref]="[ '/c', videoChannel.nameWithHost ]" size="80"></my-actor-avatar> 17 <my-actor-avatar [actor]="videoChannel" actorType="channel" [internalHref]="[ '/c', videoChannel.nameWithHost ]" size="80"></my-actor-avatar>
18 18
19 <div class="actor-info"> 19 <div class="actor-info">
20 <a [routerLink]="[ '/c', videoChannel.nameWithHost ]" class="actor-names" i18n-title title="Channel page"> 20 <a [routerLink]="[ '/c', videoChannel.nameWithHost ]" class="actor-names" i18n-title title="Channel page">
@@ -27,7 +27,7 @@
27 <a [routerLink]="[ '/a', videoChannel.ownerBy ]" i18n-title title="Owner account page" class="actor-owner"> 27 <a [routerLink]="[ '/a', videoChannel.ownerBy ]" i18n-title title="Owner account page" class="actor-owner">
28 <span i18n>Created by {{ videoChannel.ownerBy }}</span> 28 <span i18n>Created by {{ videoChannel.ownerBy }}</span>
29 29
30 <my-actor-avatar [account]="videoChannel.ownerAccount" size="18"></my-actor-avatar> 30 <my-actor-avatar [actor]="videoChannel.ownerAccount" actorType="account" size="18"></my-actor-avatar>
31 </a> 31 </a>
32 </div> 32 </div>
33 33
diff --git a/client/src/app/+my-library/my-ownership/my-ownership.component.html b/client/src/app/+my-library/my-ownership/my-ownership.component.html
index 01470e46f..649b3fef1 100644
--- a/client/src/app/+my-library/my-ownership/my-ownership.component.html
+++ b/client/src/app/+my-library/my-ownership/my-ownership.component.html
@@ -37,7 +37,7 @@
37 <td> 37 <td>
38 <a [href]="videoChangeOwnership.initiatorAccount.url" i18n-title title="Open account in a new tab" target="_blank" rel="noopener noreferrer"> 38 <a [href]="videoChangeOwnership.initiatorAccount.url" i18n-title title="Open account in a new tab" target="_blank" rel="noopener noreferrer">
39 <div class="chip two-lines"> 39 <div class="chip two-lines">
40 <my-actor-avatar [account]="videoChangeOwnership.initiatorAccount" size="32"></my-actor-avatar> 40 <my-actor-avatar [actor]="videoChangeOwnership.initiatorAccount" actorType="account" size="32"></my-actor-avatar>
41 <div> 41 <div>
42 {{ videoChangeOwnership.initiatorAccount.displayName }} 42 {{ videoChangeOwnership.initiatorAccount.displayName }}
43 <span class="muted">{{ videoChangeOwnership.initiatorAccount.nameWithHost }}</span> 43 <span class="muted">{{ videoChangeOwnership.initiatorAccount.nameWithHost }}</span>
diff --git a/client/src/app/+search/search.component.html b/client/src/app/+search/search.component.html
index 247dfb56a..37da67005 100644
--- a/client/src/app/+search/search.component.html
+++ b/client/src/app/+search/search.component.html
@@ -36,7 +36,7 @@
36 <ng-container *ngFor="let result of results"> 36 <ng-container *ngFor="let result of results">
37 <div *ngIf="isVideoChannel(result)" class="entry video-channel"> 37 <div *ngIf="isVideoChannel(result)" class="entry video-channel">
38 38
39 <my-actor-avatar [channel]="result" [internalHref]="getInternalChannelUrl(result)" [href]="getExternalChannelUrl(result)" size="120"></my-actor-avatar> 39 <my-actor-avatar [actor]="result" actorType="channel" [internalHref]="getInternalChannelUrl(result)" [href]="getExternalChannelUrl(result)" size="120"></my-actor-avatar>
40 40
41 <div class="video-channel-info"> 41 <div class="video-channel-info">
42 <a *ngIf="!isExternalChannelUrl()" [routerLink]="getInternalChannelUrl(result)" class="video-channel-names"> 42 <a *ngIf="!isExternalChannelUrl()" [routerLink]="getInternalChannelUrl(result)" class="video-channel-names">
diff --git a/client/src/app/+video-channels/video-channels.component.html b/client/src/app/+video-channels/video-channels.component.html
index 0fe6e808a..d92aa072d 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()"></my-actor-avatar> 26 <my-actor-avatar class="account-avatar" [actor]="ownerAccount" actorType="account" [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"></my-actor-avatar> 54 <my-actor-avatar class="main-avatar" [actor]="videoChannel" actorType="channel"></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/+videos/+video-watch/shared/comment/video-comment-add.component.html b/client/src/app/+videos/+video-watch/shared/comment/video-comment-add.component.html
index 95d117eec..135dc8b6e 100644
--- a/client/src/app/+videos/+video-watch/shared/comment/video-comment-add.component.html
+++ b/client/src/app/+videos/+video-watch/shared/comment/video-comment-add.component.html
@@ -1,6 +1,6 @@
1<form novalidate [formGroup]="form" (ngSubmit)="formValidated()"> 1<form novalidate [formGroup]="form" (ngSubmit)="formValidated()">
2 <div class="avatar-and-textarea"> 2 <div class="avatar-and-textarea">
3 <my-actor-avatar [account]="user?.account" size="25"></my-actor-avatar> 3 <my-actor-avatar [actor]="user?.account" [actorType]="getAvatarActorType()" size="25"></my-actor-avatar>
4 4
5 <div class="textarea-wrapper"> 5 <div class="textarea-wrapper">
6 <textarea i18n-placeholder placeholder="Add comment..." myAutoResize 6 <textarea i18n-placeholder placeholder="Add comment..." myAutoResize
diff --git a/client/src/app/+videos/+video-watch/shared/comment/video-comment-add.component.ts b/client/src/app/+videos/+video-watch/shared/comment/video-comment-add.component.ts
index b2aa4cb7b..6e7f434b3 100644
--- a/client/src/app/+videos/+video-watch/shared/comment/video-comment-add.component.ts
+++ b/client/src/app/+videos/+video-watch/shared/comment/video-comment-add.component.ts
@@ -57,6 +57,7 @@ export class VideoCommentAddComponent extends FormReactive implements OnChanges,
57 } 57 }
58 58
59 get emojiMarkupList () { 59 get emojiMarkupList () {
60 console.log('hi')
60 const emojiMarkupObjectList = require('markdown-it-emoji/lib/data/light.json') 61 const emojiMarkupObjectList = require('markdown-it-emoji/lib/data/light.json')
61 62
62 // Populate emoji-markup-list from object to array to avoid keys alphabetical order 63 // Populate emoji-markup-list from object to array to avoid keys alphabetical order
@@ -174,6 +175,12 @@ export class VideoCommentAddComponent extends FormReactive implements OnChanges,
174 return getLocaleDirection(this.localeId) === 'rtl' 175 return getLocaleDirection(this.localeId) === 'rtl'
175 } 176 }
176 177
178 getAvatarActorType () {
179 if (this.user) return 'account'
180
181 return 'unlogged'
182 }
183
177 private addCommentReply (commentCreate: VideoCommentCreate) { 184 private addCommentReply (commentCreate: VideoCommentCreate) {
178 return this.videoCommentService 185 return this.videoCommentService
179 .addCommentReply(this.video.uuid, this.parentComment.id, commentCreate) 186 .addCommentReply(this.video.uuid, this.parentComment.id, commentCreate)
diff --git a/client/src/app/+videos/+video-watch/shared/comment/video-comment.component.html b/client/src/app/+videos/+video-watch/shared/comment/video-comment.component.html
index 160865519..da35a9a2e 100644
--- a/client/src/app/+videos/+video-watch/shared/comment/video-comment.component.html
+++ b/client/src/app/+videos/+video-watch/shared/comment/video-comment.component.html
@@ -1,6 +1,10 @@
1<div *ngIf="isCommentDisplayed()" class="root-comment" [ngClass]="{ 'is-child': isChild() }"> 1<div *ngIf="isCommentDisplayed()" class="root-comment" [ngClass]="{ 'is-child': isChild() }">
2 <div class="left"> 2 <div class="left">
3 <my-actor-avatar *ngIf="!comment.isDeleted" [href]="comment.account.url" [account]="comment.account" [size]="isChild() ? '25' : '36'"></my-actor-avatar> 3 <my-actor-avatar
4 *ngIf="!comment.isDeleted" [href]="comment.account.url"
5 [actor]="comment.account" actorType="account" [size]="isChild() ? '25' : '36'"
6 ></my-actor-avatar>
7
4 <div class="vertical-border"></div> 8 <div class="vertical-border"></div>
5 </div> 9 </div>
6 10
diff --git a/client/src/app/+videos/+video-watch/shared/metadata/video-avatar-channel.component.html b/client/src/app/+videos/+video-watch/shared/metadata/video-avatar-channel.component.html
index a23152b67..a608a22f6 100644
--- a/client/src/app/+videos/+video-watch/shared/metadata/video-avatar-channel.component.html
+++ b/client/src/app/+videos/+video-watch/shared/metadata/video-avatar-channel.component.html
@@ -2,7 +2,7 @@
2 <my-actor-avatar 2 <my-actor-avatar
3 *ngIf="showChannel" 3 *ngIf="showChannel"
4 class="channel" 4 class="channel"
5 [channel]="video.channel" 5 [actor]="video.channel" actorType="channel"
6 [internalHref]="[ '/c', video.byVideoChannel ]" 6 [internalHref]="[ '/c', video.byVideoChannel ]"
7 [title]="channelLinkTitle" 7 [title]="channelLinkTitle"
8 size="35" 8 size="35"
@@ -12,7 +12,7 @@
12 *ngIf="showAccount" 12 *ngIf="showAccount"
13 class="account" 13 class="account"
14 [class.second-avatar]="showChannel" 14 [class.second-avatar]="showChannel"
15 [account]="video.account" 15 [actor]="video.account" actorType="account"
16 [internalHref]="[ '/a', video.byAccount ]" 16 [internalHref]="[ '/a', video.byAccount ]"
17 [title]="accountLinkTitle" 17 [title]="accountLinkTitle"
18 size="35"> 18 size="35">
diff --git a/client/src/app/+videos/video-list/overview/video-overview.component.html b/client/src/app/+videos/video-list/overview/video-overview.component.html
index 20cbb239b..b38516af8 100644
--- a/client/src/app/+videos/video-list/overview/video-overview.component.html
+++ b/client/src/app/+videos/video-list/overview/video-overview.component.html
@@ -33,7 +33,7 @@
33 <div class="section channel videos" *ngFor="let object of overview.channels"> 33 <div class="section channel videos" *ngFor="let object of overview.channels">
34 <div class="section-title"> 34 <div class="section-title">
35 <a class="link-orange" [routerLink]="[ '/c', buildVideoChannelBy(object) ]"> 35 <a class="link-orange" [routerLink]="[ '/c', buildVideoChannelBy(object) ]">
36 <my-actor-avatar [channel]="buildVideoChannel(object)" size="28"></my-actor-avatar> 36 <my-actor-avatar [actor]="buildVideoChannel(object)" actorType="channel" size="28"></my-actor-avatar>
37 37
38 <h2 class="section-title">{{ object.channel.displayName }}</h2> 38 <h2 class="section-title">{{ object.channel.displayName }}</h2>
39 </a> 39 </a>
diff --git a/client/src/app/menu/menu.component.html b/client/src/app/menu/menu.component.html
index 66ccb9870..1a9ac9e8b 100644
--- a/client/src/app/menu/menu.component.html
+++ b/client/src/app/menu/menu.component.html
@@ -8,7 +8,8 @@
8 [container]="dropdownContainer" (openChange)="onDropdownOpenChange($event)" autoClose="outside" 8 [container]="dropdownContainer" (openChange)="onDropdownOpenChange($event)" autoClose="outside"
9 > 9 >
10 <div ngbDropdownToggle> 10 <div ngbDropdownToggle>
11 <my-actor-avatar [account]="user.account" size="34"></my-actor-avatar> 11 <my-actor-avatar [actor]="user.account" actorType="account" size="34"></my-actor-avatar>
12
12 <div class="logged-in-info"> 13 <div class="logged-in-info">
13 <div class="logged-in-display-name">{{ user.account?.displayName }}</div> 14 <div class="logged-in-display-name">{{ user.account?.displayName }}</div>
14 15
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 @@
10 <a [routerLink]="[ '.' ]" [queryParams]="{ 'search': 'reporter:&quot;' + abuse.reporterAccount.displayName + '&quot;' }" 10 <a [routerLink]="[ '.' ]" [queryParams]="{ 'search': 'reporter:&quot;' + abuse.reporterAccount.displayName + '&quot;' }"
11 class="chip" 11 class="chip"
12 > 12 >
13 <my-actor-avatar size="18" [account]="abuse.reporterAccount"></my-actor-avatar> 13 <my-actor-avatar size="18" [actor]="abuse.reporterAccount" actorType="account"></my-actor-avatar>
14 <div> 14 <div>
15 <span class="muted">{{ abuse.reporterAccount.nameWithHost }}</span> 15 <span class="muted">{{ abuse.reporterAccount.nameWithHost }}</span>
16 </div> 16 </div>
@@ -31,7 +31,7 @@
31 <a [routerLink]="[ '.' ]" [queryParams]="{ 'search': 'reportee:&quot;' +abuse.flaggedAccount.displayName + '&quot;' }" 31 <a [routerLink]="[ '.' ]" [queryParams]="{ 'search': 'reportee:&quot;' +abuse.flaggedAccount.displayName + '&quot;' }"
32 class="chip" 32 class="chip"
33 > 33 >
34 <my-actor-avatar size="18" [account]="abuse.flaggedAccount"></my-actor-avatar> 34 <my-actor-avatar size="18" [actor]="abuse.flaggedAccount" actorType="account"></my-actor-avatar>
35 <div> 35 <div>
36 <span class="muted">{{ abuse.flaggedAccount ? abuse.flaggedAccount.nameWithHost : '' }}</span> 36 <span class="muted">{{ abuse.flaggedAccount ? abuse.flaggedAccount.nameWithHost : '' }}</span>
37 </div> 37 </div>
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 @@
43 <td *ngIf="isAdminView()"> 43 <td *ngIf="isAdminView()">
44 <a *ngIf="abuse.reporterAccount" [href]="abuse.reporterAccount.url" i18n-title title="Open account in a new tab" target="_blank" rel="noopener noreferrer"> 44 <a *ngIf="abuse.reporterAccount" [href]="abuse.reporterAccount.url" i18n-title title="Open account in a new tab" target="_blank" rel="noopener noreferrer">
45 <div class="chip two-lines"> 45 <div class="chip two-lines">
46 <my-actor-avatar [account]="abuse.reporterAccount" size="32"></my-actor-avatar> 46 <my-actor-avatar [actor]="abuse.reporterAccount" actorType="account" size="32"></my-actor-avatar>
47 <div> 47 <div>
48 {{ abuse.reporterAccount.displayName }} 48 {{ abuse.reporterAccount.displayName }}
49 <span>{{ abuse.reporterAccount.nameWithHost }}</span> 49 <span>{{ abuse.reporterAccount.nameWithHost }}</span>
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 @@
1<div class="actor" *ngIf="actor"> 1<div class="actor" *ngIf="actor">
2 <div class="d-flex"> 2 <div class="d-flex">
3 <my-actor-avatar [channel]="getChannel()" [account]="getAccount()" [previewImage]="preview" size="100"></my-actor-avatar> 3 <my-actor-avatar [actor]="actor" [actorType]="getActorType()" [previewImage]="preview" size="100"></my-actor-avatar>
4 4
5 <div class="actor-img-edit-container"> 5 <div class="actor-img-edit-container">
6 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 {
75 return !!this.preview || this.actor.avatars.length !== 0 75 return !!this.preview || this.actor.avatars.length !== 0
76 } 76 }
77 77
78 isChannel () { 78 getActorType () {
79 return !!(this.actor as VideoChannel).ownerAccount 79 if ((this.actor as VideoChannel).ownerAccount) return 'channel'
80 }
81
82 getChannel (): VideoChannel {
83 if (this.isChannel()) return this.actor as VideoChannel
84
85 return undefined
86 }
87
88 getAccount (): Account {
89 if (this.isChannel()) return undefined
90 80
91 return this.actor as Account 81 return 'account'
92 } 82 }
93} 83}
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 @@
1<ng-template #img> 1<ng-template #img>
2 <img *ngIf="previewImage || avatarUrl || !initial" [class]="classes" [src]="previewImage || avatarUrl || defaultAvatarUrl" [alt]="alt" /> 2 <img *ngIf="displayImage()" [class]="classes" [src]="previewImage || avatarUrl || defaultAvatarUrl" [alt]="alt" />
3 3
4 <div *ngIf="!avatarUrl && initial" [ngClass]="classes"> 4 <div *ngIf="displayActorInitial()" [ngClass]="classes">
5 <span>{{ initial }}</span> 5 <span>{{ getActorInitial() }}</span>
6 </div> 6 </div>
7
8 <div *ngIf="displayPlaceholder()" [ngClass]="classes"></div>
7</ng-template> 9</ng-template>
8 10
9<a *ngIf="hasActor() && href" [href]="href" target="_blank" rel="noopener noreferrer" [title]="title"> 11<a *ngIf="actor && href" [href]="href" target="_blank" rel="noopener noreferrer" [title]="title">
10 <ng-template *ngTemplateOutlet="img"></ng-template> 12 <ng-template *ngTemplateOutlet="img"></ng-template>
11</a> 13</a>
12 14
13<a *ngIf="hasActor() && internalHref" [routerLink]="internalHref" [title]="title"> 15<a *ngIf="actor && internalHref" [routerLink]="internalHref" [title]="title">
14 <ng-template *ngTemplateOutlet="img"></ng-template> 16 <ng-template *ngTemplateOutlet="img"></ng-template>
15</a> 17</a>
16 18
17<ng-container *ngIf="!hasActor() || (!href && !internalHref)"> 19<ng-container *ngIf="!actor || (!href && !internalHref)">
18 <ng-template *ngTemplateOutlet="img"></ng-template> 20 <ng-template *ngTemplateOutlet="img"></ng-template>
19</ng-container> 21</ng-container>
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' | '
18export class ActorAvatarComponent implements OnChanges { 18export class ActorAvatarComponent implements OnChanges {
19 private _title: string 19 private _title: string
20 20
21 @Input() account: ActorInput 21 @Input() actor: ActorInput
22 @Input() channel: ActorInput 22 @Input() actorType: 'channel' | 'account' | 'unlogged'
23 23
24 @Input() previewImage: string 24 @Input() previewImage: string
25 25
@@ -36,8 +36,8 @@ export class ActorAvatarComponent implements OnChanges {
36 36
37 get title () { 37 get title () {
38 if (this._title) return this._title 38 if (this._title) return this._title
39 if (this.account) return $localize`${this.account.name} (account page)` 39 if (this.isAccount()) return $localize`${this.actor.name} (account page)`
40 if (this.channel) return $localize`${this.channel.name} (channel page)` 40 if (this.isChannel()) return $localize`${this.actor.name} (channel page)`
41 41
42 return '' 42 return ''
43 } 43 }
@@ -45,48 +45,75 @@ export class ActorAvatarComponent implements OnChanges {
45 classes: string[] = [] 45 classes: string[] = []
46 46
47 get alt () { 47 get alt () {
48 if (this.account) return $localize`Account avatar` 48 if (this.isAccount()) return $localize`Account avatar`
49 if (this.channel) return $localize`Channel avatar` 49 if (this.isChannel()) return $localize`Channel avatar`
50 50
51 return '' 51 return ''
52 } 52 }
53 53
54 get defaultAvatarUrl () { 54 get defaultAvatarUrl () {
55 if (this.channel) return VideoChannel.GET_DEFAULT_AVATAR_URL(this.getSizeNumber()) 55 if (this.isChannel()) return VideoChannel.GET_DEFAULT_AVATAR_URL(this.getSizeNumber())
56 56
57 // account or unlogged
57 return Account.GET_DEFAULT_AVATAR_URL(this.getSizeNumber()) 58 return Account.GET_DEFAULT_AVATAR_URL(this.getSizeNumber())
58 } 59 }
59 60
60 get avatarUrl () { 61 get avatarUrl () {
61 if (this.account) return Account.GET_ACTOR_AVATAR_URL(this.account, this.getSizeNumber()) 62 if (!this.actor) return ''
62 if (this.channel) return VideoChannel.GET_ACTOR_AVATAR_URL(this.channel, this.getSizeNumber())
63 63
64 return '' 64 if (this.isAccount()) return Account.GET_ACTOR_AVATAR_URL(this.actor, this.getSizeNumber())
65 } 65 if (this.isChannel()) return VideoChannel.GET_ACTOR_AVATAR_URL(this.actor, this.getSizeNumber())
66
67 get initial () {
68 const name = this.account?.name
69 if (!name) return ''
70 66
71 return name.slice(0, 1) 67 return ''
72 } 68 }
73 69
74 ngOnChanges () { 70 ngOnChanges () {
75 this.classes = [ 'avatar' ] 71 this.classes = [ 'avatar' ]
76 72
77 if (this.size) this.classes.push(`avatar-${this.size}`) 73 if (this.size) {
74 this.classes.push(`avatar-${this.size}`)
75 }
78 76
79 if (this.channel) this.classes.push('channel') 77 if (this.isChannel()) {
80 else this.classes.push('account') 78 this.classes.push('channel')
79 } else {
80 this.classes.push('account')
81 }
81 82
82 if (!this.avatarUrl && this.initial) { 83 // No avatar, use actor name initial
84 if (this.displayActorInitial()) {
83 this.classes.push('initial') 85 this.classes.push('initial')
84 this.classes.push(this.getColorTheme()) 86 this.classes.push(this.getColorTheme())
85 } 87 }
86 } 88 }
87 89
88 hasActor () { 90 displayImage () {
89 return !!this.account || !!this.channel 91 if (this.actorType === 'unlogged') return true
92
93 return !!(this.actor && this.avatarUrl)
94 }
95
96 displayActorInitial () {
97 return this.actor && !this.avatarUrl
98 }
99
100 displayPlaceholder () {
101 return this.actorType !== 'unlogged' && !this.actor
102 }
103
104 getActorInitial () {
105 const name = this.actor?.name
106 if (!name) return ''
107
108 return name.slice(0, 1)
109 }
110
111 private isAccount () {
112 return this.actorType === 'account'
113 }
114
115 private isChannel () {
116 return this.actorType === 'channel'
90 } 117 }
91 118
92 private getSizeNumber () { 119 private getSizeNumber () {
@@ -96,7 +123,7 @@ export class ActorAvatarComponent implements OnChanges {
96 } 123 }
97 124
98 private getColorTheme () { 125 private getColorTheme () {
99 const initialLowercase = this.initial.toLowerCase() 126 const initialLowercase = this.getActorInitial().toLowerCase()
100 127
101 // Keep consistency with CSS 128 // Keep consistency with CSS
102 const themes = { 129 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 @@
1<div *ngIf="channel" class="channel"> 1<div *ngIf="channel" class="channel">
2 2
3 <div class="channel-avatar-row"> 3 <div class="channel-avatar-row">
4 <my-actor-avatar [channel]="channel" [internalHref]="getVideoChannelLink()" i18n-title title="See this video channel" size="75"></my-actor-avatar> 4 <my-actor-avatar [actor]="channel" actorType="channel" [internalHref]="getVideoChannelLink()" i18n-title title="See this video channel" size="75"></my-actor-avatar>
5 5
6 <h6> 6 <h6>
7 <a [routerLink]="getVideoChannelLink()" i18n-title title="See this video channel"> 7 <a [routerLink]="getVideoChannelLink()" i18n-title title="See this video channel">
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 @@
33 <td> 33 <td>
34 <a [href]="accountBlock.blockedAccount.url" i18n-title title="Open account in a new tab" target="_blank" rel="noopener noreferrer"> 34 <a [href]="accountBlock.blockedAccount.url" i18n-title title="Open account in a new tab" target="_blank" rel="noopener noreferrer">
35 <div class="chip two-lines"> 35 <div class="chip two-lines">
36 <my-actor-avatar [account]="accountBlock.blockedAccount" size="32"></my-actor-avatar> 36 <my-actor-avatar [actor]="accountBlock.blockedAccount" actorType="account" size="32"></my-actor-avatar>
37 <div> 37 <div>
38 {{ accountBlock.blockedAccount.displayName }} 38 {{ accountBlock.blockedAccount.displayName }}
39 <span class="muted">{{ accountBlock.blockedAccount.nameWithHost }}</span> 39 <span class="muted">{{ accountBlock.blockedAccount.nameWithHost }}</span>
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 @@
12 <div class="d-flex video-miniature-meta"> 12 <div class="d-flex video-miniature-meta">
13 <my-actor-avatar 13 <my-actor-avatar
14 *ngIf="displayOptions.avatar && displayOwnerVideoChannel() && !displayAsRow" [title]="channelLinkTitle" 14 *ngIf="displayOptions.avatar && displayOwnerVideoChannel() && !displayAsRow" [title]="channelLinkTitle"
15 [channel]="video.channel" [size]="actorImageSize" [internalHref]="[ '/c', video.byVideoChannel ]" 15 [actor]="video.channel" actorType="channel" [size]="actorImageSize" [internalHref]="[ '/c', video.byVideoChannel ]"
16 size="32" 16 size="32"
17 ></my-actor-avatar> 17 ></my-actor-avatar>
18 18
19 <my-actor-avatar 19 <my-actor-avatar
20 *ngIf="displayOptions.avatar && displayOwnerAccount() && !displayAsRow" [title]="channelLinkTitle" 20 *ngIf="displayOptions.avatar && displayOwnerAccount() && !displayAsRow" [title]="channelLinkTitle"
21 [account]="video.account" [size]="actorImageSize" [internalHref]="[ '/c', video.byVideoChannel ]" 21 [actor]="video.account" actorType="channel" [size]="actorImageSize" [internalHref]="[ '/c', video.byVideoChannel ]"
22 size="32" 22 size="32"
23 ></my-actor-avatar> 23 ></my-actor-avatar>
24 24