aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src
diff options
context:
space:
mode:
authorkontrollanten <6680299+kontrollanten@users.noreply.github.com>2021-04-15 10:01:27 +0200
committerGitHub <noreply@github.com>2021-04-15 10:01:27 +0200
commitfbdcd4ec9f549b730f8311512bcc0c0b7bc2db0a (patch)
treee4c4d3a9abdc52afb2443234a57d74f0819b7d08 /client/src
parent266947e5efc7ff30b0020beb5a74e4d4fc696fa5 (diff)
downloadPeerTube-fbdcd4ec9f549b730f8311512bcc0c0b7bc2db0a.tar.gz
PeerTube-fbdcd4ec9f549b730f8311512bcc0c0b7bc2db0a.tar.zst
PeerTube-fbdcd4ec9f549b730f8311512bcc0c0b7bc2db0a.zip
Add AccountAvatarComponent (#3965)
* refactor(client): create account-avatar component * continue implement account-avatar * fix review comments
Diffstat (limited to 'client/src')
-rw-r--r--client/src/app/+accounts/accounts.component.html2
-rw-r--r--client/src/app/+accounts/accounts.module.ts4
-rw-r--r--client/src/app/+admin/admin.module.ts2
-rw-r--r--client/src/app/+admin/moderation/instance-blocklist/instance-account-blocklist.component.html7
-rw-r--r--client/src/app/+admin/moderation/video-comment-list/video-comment-list.component.html8
-rw-r--r--client/src/app/+admin/users/user-list/user-list.component.html9
-rw-r--r--client/src/app/+admin/users/user-list/user-list.component.ts4
-rw-r--r--client/src/app/+my-account/my-account.module.ts2
-rw-r--r--client/src/app/+my-library/my-library.module.ts4
-rw-r--r--client/src/app/+my-library/my-ownership/my-ownership.component.html7
-rw-r--r--client/src/app/+my-library/my-ownership/my-ownership.component.ts4
-rw-r--r--client/src/app/+video-channels/video-channels.component.html6
-rw-r--r--client/src/app/+video-channels/video-channels.module.ts4
-rw-r--r--client/src/app/+videos/+video-watch/comment/video-comment-add.component.html2
-rw-r--r--client/src/app/+videos/+video-watch/comment/video-comment-add.component.scss4
-rw-r--r--client/src/app/+videos/+video-watch/comment/video-comment-add.component.ts5
-rw-r--r--client/src/app/+videos/+video-watch/comment/video-comment.component.html10
-rw-r--r--client/src/app/+videos/+video-watch/comment/video-comment.component.scss4
-rw-r--r--client/src/app/+videos/+video-watch/comment/video-comment.component.ts4
-rw-r--r--client/src/app/+videos/+video-watch/video-avatar-channel.component.html14
-rw-r--r--client/src/app/+videos/+video-watch/video-watch.module.ts7
-rw-r--r--client/src/app/app.module.ts2
-rw-r--r--client/src/app/core/users/user.model.ts6
-rw-r--r--client/src/app/menu/menu.component.html2
-rw-r--r--client/src/app/menu/menu.component.scss4
-rw-r--r--client/src/app/shared/shared-abuse-list/abuse-details.component.html14
-rw-r--r--client/src/app/shared/shared-abuse-list/abuse-details.component.ts4
-rw-r--r--client/src/app/shared/shared-abuse-list/abuse-list-table.component.html7
-rw-r--r--client/src/app/shared/shared-abuse-list/abuse-list-table.component.ts4
-rw-r--r--client/src/app/shared/shared-abuse-list/shared-abuse-list.module.ts4
-rw-r--r--client/src/app/shared/shared-account-avatar/account-avatar.component.html8
-rw-r--r--client/src/app/shared/shared-account-avatar/account-avatar.component.scss22
-rw-r--r--client/src/app/shared/shared-account-avatar/account-avatar.component.ts38
-rw-r--r--client/src/app/shared/shared-account-avatar/index.ts2
-rw-r--r--client/src/app/shared/shared-account-avatar/shared-account-avatar.module.ts23
-rw-r--r--client/src/app/shared/shared-main/video/video.model.ts2
-rw-r--r--client/src/app/shared/shared-moderation/account-blocklist.component.html7
-rw-r--r--client/src/app/shared/shared-moderation/account-blocklist.component.ts4
-rw-r--r--client/src/app/shared/shared-moderation/shared-moderation.module.ts4
-rw-r--r--client/src/app/shared/shared-video-comment/video-comment.model.ts4
-rw-r--r--client/src/app/shared/shared-video-miniature/shared-video-miniature.module.ts4
-rw-r--r--client/src/app/shared/shared-video-miniature/video-miniature.component.html5
-rw-r--r--client/src/app/shared/shared-video-miniature/video-miniature.component.scss5
-rw-r--r--client/src/app/shared/shared-video-miniature/video-miniature.component.ts2
-rw-r--r--client/src/sass/include/_actor.scss4
45 files changed, 149 insertions, 145 deletions
diff --git a/client/src/app/+accounts/accounts.component.html b/client/src/app/+accounts/accounts.component.html
index 1b2c11311..ea7a317eb 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 <img class="account-avatar" [src]="account.avatarUrl" alt="Avatar" /> 5 <my-account-avatar [account]="account" size="120"></my-account-avatar>
6 6
7 <div> 7 <div>
8 <div class="section-label" i18n>PEERTUBE ACCOUNT</div> 8 <div class="section-label" i18n>PEERTUBE ACCOUNT</div>
diff --git a/client/src/app/+accounts/accounts.module.ts b/client/src/app/+accounts/accounts.module.ts
index 3354b4189..22cdd0642 100644
--- a/client/src/app/+accounts/accounts.module.ts
+++ b/client/src/app/+accounts/accounts.module.ts
@@ -10,6 +10,7 @@ import { AccountVideoChannelsComponent } from './account-video-channels/account-
10import { AccountVideosComponent } from './account-videos/account-videos.component' 10import { AccountVideosComponent } from './account-videos/account-videos.component'
11import { AccountsRoutingModule } from './accounts-routing.module' 11import { AccountsRoutingModule } from './accounts-routing.module'
12import { AccountsComponent } from './accounts.component' 12import { AccountsComponent } from './accounts.component'
13import { SharedAccountAvatarModule } from '../shared/shared-account-avatar/shared-account-avatar.module'
13 14
14@NgModule({ 15@NgModule({
15 imports: [ 16 imports: [
@@ -20,7 +21,8 @@ import { AccountsComponent } from './accounts.component'
20 SharedUserSubscriptionModule, 21 SharedUserSubscriptionModule,
21 SharedModerationModule, 22 SharedModerationModule,
22 SharedVideoMiniatureModule, 23 SharedVideoMiniatureModule,
23 SharedGlobalIconModule 24 SharedGlobalIconModule,
25 SharedAccountAvatarModule
24 ], 26 ],
25 27
26 declarations: [ 28 declarations: [
diff --git a/client/src/app/+admin/admin.module.ts b/client/src/app/+admin/admin.module.ts
index bac65c88e..8d1c3eadb 100644
--- a/client/src/app/+admin/admin.module.ts
+++ b/client/src/app/+admin/admin.module.ts
@@ -39,6 +39,7 @@ import { JobService, LogsComponent, LogsService, SystemComponent } from './syste
39import { DebugComponent, DebugService } from './system/debug' 39import { DebugComponent, DebugService } from './system/debug'
40import { JobsComponent } from './system/jobs/jobs.component' 40import { JobsComponent } from './system/jobs/jobs.component'
41import { UserCreateComponent, UserListComponent, UserPasswordComponent, UsersComponent, UserUpdateComponent } from './users' 41import { UserCreateComponent, UserListComponent, UserPasswordComponent, UsersComponent, UserUpdateComponent } from './users'
42import { SharedAccountAvatarModule } from '../shared/shared-account-avatar/shared-account-avatar.module'
42 43
43@NgModule({ 44@NgModule({
44 imports: [ 45 imports: [
@@ -50,6 +51,7 @@ import { UserCreateComponent, UserListComponent, UserPasswordComponent, UsersCom
50 SharedGlobalIconModule, 51 SharedGlobalIconModule,
51 SharedAbuseListModule, 52 SharedAbuseListModule,
52 SharedVideoCommentModule, 53 SharedVideoCommentModule,
54 SharedAccountAvatarModule,
53 SharedActorImageModule, 55 SharedActorImageModule,
54 56
55 TableModule, 57 TableModule,
diff --git a/client/src/app/+admin/moderation/instance-blocklist/instance-account-blocklist.component.html b/client/src/app/+admin/moderation/instance-blocklist/instance-account-blocklist.component.html
index 128f4962d..f5cf93adb 100644
--- a/client/src/app/+admin/moderation/instance-blocklist/instance-account-blocklist.component.html
+++ b/client/src/app/+admin/moderation/instance-blocklist/instance-account-blocklist.component.html
@@ -34,12 +34,7 @@
34 <td> 34 <td>
35 <a [href]="accountBlock.blockedAccount.url" i18n-title title="Open account in a new tab" target="_blank" rel="noopener noreferrer"> 35 <a [href]="accountBlock.blockedAccount.url" i18n-title title="Open account in a new tab" target="_blank" rel="noopener noreferrer">
36 <div class="chip two-lines"> 36 <div class="chip two-lines">
37 <img 37 <my-account-avatar [account]="accountBlock.blockedAccount"></my-account-avatar>
38 class="avatar"
39 [src]="accountBlock.blockedAccount.avatar?.path"
40 (error)="switchToDefaultAvatar($event)"
41 alt="Avatar"
42 >
43 <div> 38 <div>
44 {{ accountBlock.blockedAccount.displayName }} 39 {{ accountBlock.blockedAccount.displayName }}
45 <span class="text-muted">{{ accountBlock.blockedAccount.nameWithHost }}</span> 40 <span class="text-muted">{{ accountBlock.blockedAccount.nameWithHost }}</span>
diff --git a/client/src/app/+admin/moderation/video-comment-list/video-comment-list.component.html b/client/src/app/+admin/moderation/video-comment-list/video-comment-list.component.html
index d1ecc2834..d360c3c51 100644
--- a/client/src/app/+admin/moderation/video-comment-list/video-comment-list.component.html
+++ b/client/src/app/+admin/moderation/video-comment-list/video-comment-list.component.html
@@ -86,12 +86,8 @@
86 <td> 86 <td>
87 <a [href]="videoComment.account.localUrl" i18n-title title="Open account in a new tab" target="_blank" rel="noopener noreferrer"> 87 <a [href]="videoComment.account.localUrl" i18n-title title="Open account in a new tab" target="_blank" rel="noopener noreferrer">
88 <div class="chip two-lines"> 88 <div class="chip two-lines">
89 <img 89 <my-account-avatar [account]="videoComment.account"></my-account-avatar>
90 class="avatar" 90 <div>
91 [src]="videoComment.accountAvatarUrl"
92 alt=""
93 >
94 <div>
95 {{ videoComment.account.displayName }} 91 {{ videoComment.account.displayName }}
96 <span>{{ videoComment.by }}</span> 92 <span>{{ videoComment.by }}</span>
97 </div> 93 </div>
diff --git a/client/src/app/+admin/users/user-list/user-list.component.html b/client/src/app/+admin/users/user-list/user-list.component.html
index 4a09fb392..e114f3425 100644
--- a/client/src/app/+admin/users/user-list/user-list.component.html
+++ b/client/src/app/+admin/users/user-list/user-list.component.html
@@ -106,13 +106,8 @@
106 <td *ngIf="isSelected('username')"> 106 <td *ngIf="isSelected('username')">
107 <a i18n-title title="Open account in a new tab" target="_blank" rel="noopener noreferrer" [routerLink]="[ '/accounts/' + user.username ]"> 107 <a i18n-title title="Open account in a new tab" target="_blank" rel="noopener noreferrer" [routerLink]="[ '/accounts/' + user.username ]">
108 <div class="chip two-lines"> 108 <div class="chip two-lines">
109 <img 109 <my-account-avatar [account]="user?.account"></my-account-avatar>
110 class="avatar" 110 <div>
111 [src]="user?.account?.avatar?.path"
112 (error)="switchToDefaultAvatar($event)"
113 alt="Avatar"
114 >
115 <div>
116 <span class="user-table-primary-text">{{ user.account.displayName }}</span> 111 <span class="user-table-primary-text">{{ user.account.displayName }}</span>
117 <span class="text-muted">{{ user.username }}</span> 112 <span class="text-muted">{{ user.username }}</span>
118 </div> 113 </div>
diff --git a/client/src/app/+admin/users/user-list/user-list.component.ts b/client/src/app/+admin/users/user-list/user-list.component.ts
index 7875b74ad..339e18206 100644
--- a/client/src/app/+admin/users/user-list/user-list.component.ts
+++ b/client/src/app/+admin/users/user-list/user-list.component.ts
@@ -163,10 +163,6 @@ export class UserListComponent extends RestTable implements OnInit {
163 this.loadData() 163 this.loadData()
164 } 164 }
165 165
166 switchToDefaultAvatar ($event: Event) {
167 ($event.target as HTMLImageElement).src = Account.GET_DEFAULT_AVATAR_URL()
168 }
169
170 async unbanUsers (users: User[]) { 166 async unbanUsers (users: User[]) {
171 const res = await this.confirmService.confirm($localize`Do you really want to unban ${users.length} users?`, $localize`Unban`) 167 const res = await this.confirmService.confirm($localize`Do you really want to unban ${users.length} users?`, $localize`Unban`)
172 if (res === false) return 168 if (res === false) return
diff --git a/client/src/app/+my-account/my-account.module.ts b/client/src/app/+my-account/my-account.module.ts
index 3df48d0aa..050cd4b34 100644
--- a/client/src/app/+my-account/my-account.module.ts
+++ b/client/src/app/+my-account/my-account.module.ts
@@ -23,6 +23,7 @@ import { MyAccountNotificationPreferencesComponent } from './my-account-settings
23import { MyAccountProfileComponent } from './my-account-settings/my-account-profile/my-account-profile.component' 23import { MyAccountProfileComponent } from './my-account-settings/my-account-profile/my-account-profile.component'
24import { MyAccountSettingsComponent } from './my-account-settings/my-account-settings.component' 24import { MyAccountSettingsComponent } from './my-account-settings/my-account-settings.component'
25import { MyAccountComponent } from './my-account.component' 25import { MyAccountComponent } from './my-account.component'
26import { SharedAccountAvatarModule } from '../shared/shared-account-avatar/shared-account-avatar.module'
26 27
27@NgModule({ 28@NgModule({
28 imports: [ 29 imports: [
@@ -39,6 +40,7 @@ import { MyAccountComponent } from './my-account.component'
39 SharedGlobalIconModule, 40 SharedGlobalIconModule,
40 SharedAbuseListModule, 41 SharedAbuseListModule,
41 SharedShareModal, 42 SharedShareModal,
43 SharedAccountAvatarModule,
42 SharedActorImageModule 44 SharedActorImageModule
43 ], 45 ],
44 46
diff --git a/client/src/app/+my-library/my-library.module.ts b/client/src/app/+my-library/my-library.module.ts
index 5518cfd98..a1d706f0b 100644
--- a/client/src/app/+my-library/my-library.module.ts
+++ b/client/src/app/+my-library/my-library.module.ts
@@ -26,6 +26,7 @@ import { MyVideoPlaylistUpdateComponent } from './my-video-playlists/my-video-pl
26import { MyVideoPlaylistsComponent } from './my-video-playlists/my-video-playlists.component' 26import { MyVideoPlaylistsComponent } from './my-video-playlists/my-video-playlists.component'
27import { VideoChangeOwnershipComponent } from './my-videos/modals/video-change-ownership.component' 27import { VideoChangeOwnershipComponent } from './my-videos/modals/video-change-ownership.component'
28import { MyVideosComponent } from './my-videos/my-videos.component' 28import { MyVideosComponent } from './my-videos/my-videos.component'
29import { SharedAccountAvatarModule } from '../shared/shared-account-avatar/shared-account-avatar.module'
29 30
30@NgModule({ 31@NgModule({
31 imports: [ 32 imports: [
@@ -45,7 +46,8 @@ import { MyVideosComponent } from './my-videos/my-videos.component'
45 SharedGlobalIconModule, 46 SharedGlobalIconModule,
46 SharedAbuseListModule, 47 SharedAbuseListModule,
47 SharedShareModal, 48 SharedShareModal,
48 SharedVideoLiveModule 49 SharedVideoLiveModule,
50 SharedAccountAvatarModule
49 ], 51 ],
50 52
51 declarations: [ 53 declarations: [
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 6bf562986..d0eff0521 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,12 +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 <img 40 <my-account-avatar [account]="videoChangeOwnership.initiatorAccount"></my-account-avatar>
41 class="avatar"
42 [src]="videoChangeOwnership.initiatorAccount.avatar?.path"
43 (error)="switchToDefaultAvatar($event)"
44 alt="Avatar"
45 >
46 <div> 41 <div>
47 {{ videoChangeOwnership.initiatorAccount.displayName }} 42 {{ videoChangeOwnership.initiatorAccount.displayName }}
48 <span class="text-muted">{{ videoChangeOwnership.initiatorAccount.nameWithHost }}</span> 43 <span class="text-muted">{{ videoChangeOwnership.initiatorAccount.nameWithHost }}</span>
diff --git a/client/src/app/+my-library/my-ownership/my-ownership.component.ts b/client/src/app/+my-library/my-ownership/my-ownership.component.ts
index 78c3d9192..a938023b4 100644
--- a/client/src/app/+my-library/my-ownership/my-ownership.component.ts
+++ b/client/src/app/+my-library/my-ownership/my-ownership.component.ts
@@ -43,10 +43,6 @@ export class MyOwnershipComponent extends RestTable implements OnInit {
43 } 43 }
44 } 44 }
45 45
46 switchToDefaultAvatar ($event: Event) {
47 ($event.target as HTMLImageElement).src = Account.GET_DEFAULT_AVATAR_URL()
48 }
49
50 openAcceptModal (videoChangeOwnership: VideoChangeOwnership) { 46 openAcceptModal (videoChangeOwnership: VideoChangeOwnership) {
51 this.myAccountAcceptOwnershipComponent.show(videoChangeOwnership) 47 this.myAccountAcceptOwnershipComponent.show(videoChangeOwnership)
52 } 48 }
diff --git a/client/src/app/+video-channels/video-channels.component.html b/client/src/app/+video-channels/video-channels.component.html
index b058a8185..c0d8c7db4 100644
--- a/client/src/app/+video-channels/video-channels.component.html
+++ b/client/src/app/+video-channels/video-channels.component.html
@@ -23,10 +23,8 @@
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 <a [routerLink]="getAccountUrl()" title="View account" i18n-title> 26 <my-account-avatar [account]="videoChannel.ownerAccount" size="120"></my-account-avatar>
27 <img class="account-avatar" [src]="videoChannel.ownerAvatarUrl" alt="Owner account avatar" /> 27
28 </a>
29
30 <div class="actor-info"> 28 <div class="actor-info">
31 <h4> 29 <h4>
32 <a [routerLink]="getAccountUrl()" title="View account" i18n-title>{{ videoChannel.ownerAccount.displayName }}</a> 30 <a [routerLink]="getAccountUrl()" title="View account" i18n-title>{{ videoChannel.ownerAccount.displayName }}</a>
diff --git a/client/src/app/+video-channels/video-channels.module.ts b/client/src/app/+video-channels/video-channels.module.ts
index 408f86225..2e387f401 100644
--- a/client/src/app/+video-channels/video-channels.module.ts
+++ b/client/src/app/+video-channels/video-channels.module.ts
@@ -10,6 +10,7 @@ import { VideoChannelPlaylistsComponent } from './video-channel-playlists/video-
10import { VideoChannelVideosComponent } from './video-channel-videos/video-channel-videos.component' 10import { VideoChannelVideosComponent } from './video-channel-videos/video-channel-videos.component'
11import { VideoChannelsRoutingModule } from './video-channels-routing.module' 11import { VideoChannelsRoutingModule } from './video-channels-routing.module'
12import { VideoChannelsComponent } from './video-channels.component' 12import { VideoChannelsComponent } from './video-channels.component'
13import { SharedAccountAvatarModule } from '../shared/shared-account-avatar/shared-account-avatar.module'
13 14
14@NgModule({ 15@NgModule({
15 imports: [ 16 imports: [
@@ -21,7 +22,8 @@ import { VideoChannelsComponent } from './video-channels.component'
21 SharedVideoMiniatureModule, 22 SharedVideoMiniatureModule,
22 SharedUserSubscriptionModule, 23 SharedUserSubscriptionModule,
23 SharedGlobalIconModule, 24 SharedGlobalIconModule,
24 SharedSupportModal 25 SharedSupportModal,
26 SharedAccountAvatarModule
25 ], 27 ],
26 28
27 declarations: [ 29 declarations: [
diff --git a/client/src/app/+videos/+video-watch/comment/video-comment-add.component.html b/client/src/app/+videos/+video-watch/comment/video-comment-add.component.html
index fdefed09a..930464024 100644
--- a/client/src/app/+videos/+video-watch/comment/video-comment-add.component.html
+++ b/client/src/app/+videos/+video-watch/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 <img [src]="getAvatarUrl()" alt="Avatar" /> 3 <my-account-avatar [account]="user?.account" size="25"></my-account-avatar>
4 4
5 <div class="form-group"> 5 <div class="form-group">
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/comment/video-comment-add.component.scss b/client/src/app/+videos/+video-watch/comment/video-comment-add.component.scss
index d938e2e28..e11b9be5a 100644
--- a/client/src/app/+videos/+video-watch/comment/video-comment-add.component.scss
+++ b/client/src/app/+videos/+video-watch/comment/video-comment-add.component.scss
@@ -9,9 +9,7 @@ form {
9 display: flex; 9 display: flex;
10 margin-bottom: 10px; 10 margin-bottom: 10px;
11 11
12 img { 12 my-account-avatar {
13 @include avatar(25px);
14
15 vertical-align: top; 13 vertical-align: top;
16 margin-right: 10px; 14 margin-right: 10px;
17 } 15 }
diff --git a/client/src/app/+videos/+video-watch/comment/video-comment-add.component.ts b/client/src/app/+videos/+video-watch/comment/video-comment-add.component.ts
index f1f0dfeba..fce7e5edc 100644
--- a/client/src/app/+videos/+video-watch/comment/video-comment-add.component.ts
+++ b/client/src/app/+videos/+video-watch/comment/video-comment-add.component.ts
@@ -143,11 +143,6 @@ export class VideoCommentAddComponent extends FormReactive implements OnChanges,
143 return window.location.href 143 return window.location.href
144 } 144 }
145 145
146 getAvatarUrl () {
147 if (this.user) return this.user.accountAvatarUrl
148 return Account.GET_DEFAULT_AVATAR_URL()
149 }
150
151 gotoLogin () { 146 gotoLogin () {
152 this.hideModals() 147 this.hideModals()
153 this.router.navigate([ '/login' ]) 148 this.router.navigate([ '/login' ])
diff --git a/client/src/app/+videos/+video-watch/comment/video-comment.component.html b/client/src/app/+videos/+video-watch/comment/video-comment.component.html
index ba41b6f48..f13b12b25 100644
--- a/client/src/app/+videos/+video-watch/comment/video-comment.component.html
+++ b/client/src/app/+videos/+video-watch/comment/video-comment.component.html
@@ -1,14 +1,6 @@
1<div *ngIf="isCommentDisplayed()" class="root-comment"> 1<div *ngIf="isCommentDisplayed()" class="root-comment">
2 <div class="left"> 2 <div class="left">
3 <a *ngIf="!comment.isDeleted" [href]="comment.account.url" target="_blank" rel="noopener noreferrer"> 3 <my-account-avatar *ngIf="!comment.isDeleted" [account]="comment.account"></my-account-avatar>
4 <img
5 class="comment-avatar"
6 [src]="comment.accountAvatarUrl"
7 (error)="switchToDefaultAvatar($event)"
8 alt="Avatar"
9 />
10 </a>
11
12 <div class="vertical-border"></div> 4 <div class="vertical-border"></div>
13 </div> 5 </div>
14 6
diff --git a/client/src/app/+videos/+video-watch/comment/video-comment.component.scss b/client/src/app/+videos/+video-watch/comment/video-comment.component.scss
index f6ff376b9..866293eea 100644
--- a/client/src/app/+videos/+video-watch/comment/video-comment.component.scss
+++ b/client/src/app/+videos/+video-watch/comment/video-comment.component.scss
@@ -23,10 +23,6 @@
23 width: 100%; 23 width: 100%;
24 } 24 }
25 25
26 .comment-avatar {
27 @include avatar(36px);
28 }
29
30 .comment { 26 .comment {
31 flex-grow: 1; 27 flex-grow: 1;
32 // Fix word-wrap with flex 28 // Fix word-wrap with flex
diff --git a/client/src/app/+videos/+video-watch/comment/video-comment.component.ts b/client/src/app/+videos/+video-watch/comment/video-comment.component.ts
index 5c5d72b22..dd3db0c65 100644
--- a/client/src/app/+videos/+video-watch/comment/video-comment.component.ts
+++ b/client/src/app/+videos/+video-watch/comment/video-comment.component.ts
@@ -131,10 +131,6 @@ export class VideoCommentComponent implements OnInit, OnChanges {
131 ) 131 )
132 } 132 }
133 133
134 switchToDefaultAvatar ($event: Event) {
135 ($event.target as HTMLImageElement).src = Account.GET_DEFAULT_AVATAR_URL()
136 }
137
138 isCommentDisplayed () { 134 isCommentDisplayed () {
139 // Not deleted 135 // Not deleted
140 return !this.comment.isDeleted || 136 return !this.comment.isDeleted ||
diff --git a/client/src/app/+videos/+video-watch/video-avatar-channel.component.html b/client/src/app/+videos/+video-watch/video-avatar-channel.component.html
index 5058f05dd..545ecb1d5 100644
--- a/client/src/app/+videos/+video-watch/video-avatar-channel.component.html
+++ b/client/src/app/+videos/+video-watch/video-avatar-channel.component.html
@@ -4,15 +4,11 @@
4 <img [src]="video.videoChannelAvatarUrl" i18n-alt alt="Channel avatar" class="channel-avatar" /> 4 <img [src]="video.videoChannelAvatarUrl" i18n-alt alt="Channel avatar" class="channel-avatar" />
5 </a> 5 </a>
6 6
7 <a [routerLink]="[ '/accounts', video.byAccount ]" [title]="accountLinkTitle"> 7 <my-account-avatar [account]="video.account"></my-account-avatar>
8 <img [src]="video.accountAvatarUrl" i18n-alt alt="Account avatar" /> 8</ng-container>
9 </a>
10 </ng-container>
11 9
12 <ng-container *ngIf="!isChannelAvatarNull() && genericChannel"> 10 <ng-container *ngIf="!isChannelAvatarNull() && genericChannel">
13 <a [routerLink]="[ '/accounts', video.byAccount ]" [title]="accountLinkTitle"> 11 <my-account-avatar [account]="video.account"></my-account-avatar>
14 <img [src]="video.accountAvatarUrl" i18n-alt alt="Account avatar" />
15 </a>
16 12
17 <a [routerLink]="[ '/video-channels', video.byVideoChannel ]" [title]="channelLinkTitle"> 13 <a [routerLink]="[ '/video-channels', video.byVideoChannel ]" [title]="channelLinkTitle">
18 <img [src]="video.videoChannelAvatarUrl" i18n-alt alt="Channel avatar" class="channel-avatar" /> 14 <img [src]="video.videoChannelAvatarUrl" i18n-alt alt="Channel avatar" class="channel-avatar" />
@@ -20,8 +16,6 @@
20 </ng-container> 16 </ng-container>
21 17
22 <ng-container *ngIf="isChannelAvatarNull()"> 18 <ng-container *ngIf="isChannelAvatarNull()">
23 <a [routerLink]="[ '/accounts', video.byAccount ]" [title]="accountLinkTitle"> 19 <my-account-avatar [account]="video.account"></my-account-avatar>
24 <img [src]="video.accountAvatarUrl" i18n-alt alt="Account avatar" />
25 </a>
26 </ng-container> 20 </ng-container>
27</div> 21</div>
diff --git a/client/src/app/+videos/+video-watch/video-watch.module.ts b/client/src/app/+videos/+video-watch/video-watch.module.ts
index 29ad92f00..cf6afd852 100644
--- a/client/src/app/+videos/+video-watch/video-watch.module.ts
+++ b/client/src/app/+videos/+video-watch/video-watch.module.ts
@@ -17,10 +17,11 @@ import { VideoCommentsComponent } from './comment/video-comments.component'
17import { PlayerStylesComponent } from './player-styles.component' 17import { PlayerStylesComponent } from './player-styles.component'
18import { RecommendationsModule } from './recommendations/recommendations.module' 18import { RecommendationsModule } from './recommendations/recommendations.module'
19import { TimestampRouteTransformerDirective } from './timestamp-route-transformer.directive' 19import { TimestampRouteTransformerDirective } from './timestamp-route-transformer.directive'
20import { VideoAvatarChannelComponent } from './video-avatar-channel.component'
21import { VideoWatchPlaylistComponent } from './video-watch-playlist.component' 20import { VideoWatchPlaylistComponent } from './video-watch-playlist.component'
22import { VideoWatchRoutingModule } from './video-watch-routing.module' 21import { VideoWatchRoutingModule } from './video-watch-routing.module'
23import { VideoWatchComponent } from './video-watch.component' 22import { VideoWatchComponent } from './video-watch.component'
23import { SharedAccountAvatarModule } from '../../shared/shared-account-avatar/shared-account-avatar.module'
24import { VideoAvatarChannelComponent } from './video-avatar-channel.component'
24 25
25@NgModule({ 26@NgModule({
26 imports: [ 27 imports: [
@@ -37,7 +38,8 @@ import { VideoWatchComponent } from './video-watch.component'
37 SharedVideoCommentModule, 38 SharedVideoCommentModule,
38 SharedShareModal, 39 SharedShareModal,
39 SharedVideoModule, 40 SharedVideoModule,
40 SharedSupportModal 41 SharedSupportModal,
42 SharedAccountAvatarModule
41 ], 43 ],
42 44
43 declarations: [ 45 declarations: [
@@ -47,6 +49,7 @@ import { VideoWatchComponent } from './video-watch.component'
47 VideoCommentsComponent, 49 VideoCommentsComponent,
48 VideoCommentAddComponent, 50 VideoCommentAddComponent,
49 VideoCommentComponent, 51 VideoCommentComponent,
52 VideoAvatarChannelComponent,
50 53
51 VideoAvatarChannelComponent, 54 VideoAvatarChannelComponent,
52 55
diff --git a/client/src/app/app.module.ts b/client/src/app/app.module.ts
index f790a6848..41c59cc86 100644
--- a/client/src/app/app.module.ts
+++ b/client/src/app/app.module.ts
@@ -24,6 +24,7 @@ import { SharedGlobalIconModule } from './shared/shared-icons'
24import { SharedInstanceModule } from './shared/shared-instance' 24import { SharedInstanceModule } from './shared/shared-instance'
25import { SharedMainModule } from './shared/shared-main' 25import { SharedMainModule } from './shared/shared-main'
26import { SharedUserInterfaceSettingsModule } from './shared/shared-user-settings' 26import { SharedUserInterfaceSettingsModule } from './shared/shared-user-settings'
27import { SharedAccountAvatarModule } from './shared/shared-account-avatar/shared-account-avatar.module'
27 28
28registerLocaleData(localeOc, 'oc') 29registerLocaleData(localeOc, 'oc')
29 30
@@ -59,6 +60,7 @@ registerLocaleData(localeOc, 'oc')
59 SharedUserInterfaceSettingsModule, 60 SharedUserInterfaceSettingsModule,
60 SharedGlobalIconModule, 61 SharedGlobalIconModule,
61 SharedInstanceModule, 62 SharedInstanceModule,
63 SharedAccountAvatarModule,
62 64
63 MetaModule.forRoot({ 65 MetaModule.forRoot({
64 provide: MetaLoader, 66 provide: MetaLoader,
diff --git a/client/src/app/core/users/user.model.ts b/client/src/app/core/users/user.model.ts
index 8aaaa238d..7d03e1c40 100644
--- a/client/src/app/core/users/user.model.ts
+++ b/client/src/app/core/users/user.model.ts
@@ -111,12 +111,6 @@ export class User implements UserServerModel {
111 } 111 }
112 } 112 }
113 113
114 get accountAvatarUrl () {
115 if (!this.account) return ''
116
117 return this.account.avatarUrl
118 }
119
120 hasRight (right: UserRight) { 114 hasRight (right: UserRight) {
121 return hasUserRight(this.role, right) 115 return hasUserRight(this.role, right)
122 } 116 }
diff --git a/client/src/app/menu/menu.component.html b/client/src/app/menu/menu.component.html
index 9aa397edd..a0777660f 100644
--- a/client/src/app/menu/menu.component.html
+++ b/client/src/app/menu/menu.component.html
@@ -5,7 +5,7 @@
5 <div> 5 <div>
6 <div class="logged-in-more" ngbDropdown #dropdown="ngbDropdown" placement="bottom-left" [container]="dropdownContainer" (openChange)="onDropdownOpenChange($event)" autoClose="outside"> 6 <div class="logged-in-more" ngbDropdown #dropdown="ngbDropdown" placement="bottom-left" [container]="dropdownContainer" (openChange)="onDropdownOpenChange($event)" autoClose="outside">
7 <div ngbDropdownToggle> 7 <div ngbDropdownToggle>
8 <img [src]="user.accountAvatarUrl" alt="Avatar" /> 8 <my-account-avatar [account]="user.account" size="34"></my-account-avatar>
9 <div class="logged-in-info"> 9 <div class="logged-in-info">
10 <div class="logged-in-display-name">{{ user.account?.displayName }}</div> 10 <div class="logged-in-display-name">{{ user.account?.displayName }}</div>
11 11
diff --git a/client/src/app/menu/menu.component.scss b/client/src/app/menu/menu.component.scss
index aa247d268..729dbc6ee 100644
--- a/client/src/app/menu/menu.component.scss
+++ b/client/src/app/menu/menu.component.scss
@@ -176,9 +176,7 @@ menu {
176 border-radius: $main-radius; 176 border-radius: $main-radius;
177 } 177 }
178 178
179 img { 179 my-account-avatar {
180 @include avatar(34px);
181
182 margin-right: 10px; 180 margin-right: 10px;
183 } 181 }
184} 182}
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 fb8366f4c..658d42537 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,12 +10,7 @@
10 <a [routerLink]="[ baseRoute ]" [queryParams]="{ 'search': 'reporter:&quot;' + abuse.reporterAccount.displayName + '&quot;' }" 10 <a [routerLink]="[ baseRoute ]" [queryParams]="{ 'search': 'reporter:&quot;' + abuse.reporterAccount.displayName + '&quot;' }"
11 class="chip" 11 class="chip"
12 > 12 >
13 <img 13 <my-account-avatar [account]="abuse.reporterAccount"></my-account-avatar>
14 class="avatar"
15 [src]="abuse.reporterAccount.avatar?.path"
16 (error)="switchToDefaultAvatar($event)"
17 alt="Avatar"
18 >
19 <div> 14 <div>
20 <span class="text-muted">{{ abuse.reporterAccount.nameWithHost }}</span> 15 <span class="text-muted">{{ abuse.reporterAccount.nameWithHost }}</span>
21 </div> 16 </div>
@@ -35,12 +30,7 @@
35 <a [routerLink]="[ baseRoute ]" [queryParams]="{ 'search': 'reportee:&quot;' +abuse.flaggedAccount.displayName + '&quot;' }" 30 <a [routerLink]="[ baseRoute ]" [queryParams]="{ 'search': 'reportee:&quot;' +abuse.flaggedAccount.displayName + '&quot;' }"
36 class="chip" 31 class="chip"
37 > 32 >
38 <img 33 <my-account-avatar [account]="abuse.flaggedAccount"></my-account-avatar>
39 class="avatar"
40 [src]="abuse.flaggedAccount?.avatar?.path"
41 (error)="switchToDefaultAvatar($event)"
42 alt="Avatar"
43 >
44 <div> 34 <div>
45 <span class="text-muted">{{ abuse.flaggedAccount ? abuse.flaggedAccount.nameWithHost : '' }}</span> 35 <span class="text-muted">{{ abuse.flaggedAccount ? abuse.flaggedAccount.nameWithHost : '' }}</span>
46 </div> 36 </div>
diff --git a/client/src/app/shared/shared-abuse-list/abuse-details.component.ts b/client/src/app/shared/shared-abuse-list/abuse-details.component.ts
index 31cf3389d..e8ce7e678 100644
--- a/client/src/app/shared/shared-abuse-list/abuse-details.component.ts
+++ b/client/src/app/shared/shared-abuse-list/abuse-details.component.ts
@@ -45,8 +45,4 @@ export class AbuseDetailsComponent {
45 label: this.predefinedReasonsTranslations[r] 45 label: this.predefinedReasonsTranslations[r]
46 })) 46 }))
47 } 47 }
48
49 switchToDefaultAvatar ($event: Event) {
50 ($event.target as HTMLImageElement).src = Account.GET_DEFAULT_AVATAR_URL()
51 }
52} 48}
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 8428032bf..29b51f09c 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
@@ -65,12 +65,7 @@
65 <td *ngIf="isAdminView()"> 65 <td *ngIf="isAdminView()">
66 <a *ngIf="abuse.reporterAccount" [href]="abuse.reporterAccount.url" i18n-title title="Open account in a new tab" target="_blank" rel="noopener noreferrer"> 66 <a *ngIf="abuse.reporterAccount" [href]="abuse.reporterAccount.url" i18n-title title="Open account in a new tab" target="_blank" rel="noopener noreferrer">
67 <div class="chip two-lines"> 67 <div class="chip two-lines">
68 <img 68 <my-account-avatar [account]="abuse.reporterAccount"></my-account-avatar>
69 class="avatar"
70 [src]="abuse.reporterAccount.avatar?.path"
71 (error)="switchToDefaultAvatar($event)"
72 alt="Avatar"
73 >
74 <div> 69 <div>
75 {{ abuse.reporterAccount.displayName }} 70 {{ abuse.reporterAccount.displayName }}
76 <span>{{ abuse.reporterAccount.nameWithHost }}</span> 71 <span>{{ abuse.reporterAccount.nameWithHost }}</span>
diff --git a/client/src/app/shared/shared-abuse-list/abuse-list-table.component.ts b/client/src/app/shared/shared-abuse-list/abuse-list-table.component.ts
index eeb9f128b..8b5771237 100644
--- a/client/src/app/shared/shared-abuse-list/abuse-list-table.component.ts
+++ b/client/src/app/shared/shared-abuse-list/abuse-list-table.component.ts
@@ -122,10 +122,6 @@ export class AbuseListTableComponent extends RestTable implements OnInit, AfterV
122 ) 122 )
123 } 123 }
124 124
125 switchToDefaultAvatar ($event: Event) {
126 ($event.target as HTMLImageElement).src = Account.GET_DEFAULT_AVATAR_URL()
127 }
128
129 async removeAbuse (abuse: AdminAbuse) { 125 async removeAbuse (abuse: AdminAbuse) {
130 const res = await this.confirmService.confirm($localize`Do you really want to delete this abuse report?`, $localize`Delete`) 126 const res = await this.confirmService.confirm($localize`Do you really want to delete this abuse report?`, $localize`Delete`)
131 if (res === false) return 127 if (res === false) return
diff --git a/client/src/app/shared/shared-abuse-list/shared-abuse-list.module.ts b/client/src/app/shared/shared-abuse-list/shared-abuse-list.module.ts
index 663cd902b..19b6d456d 100644
--- a/client/src/app/shared/shared-abuse-list/shared-abuse-list.module.ts
+++ b/client/src/app/shared/shared-abuse-list/shared-abuse-list.module.ts
@@ -10,6 +10,7 @@ import { AbuseDetailsComponent } from './abuse-details.component'
10import { AbuseListTableComponent } from './abuse-list-table.component' 10import { AbuseListTableComponent } from './abuse-list-table.component'
11import { AbuseMessageModalComponent } from './abuse-message-modal.component' 11import { AbuseMessageModalComponent } from './abuse-message-modal.component'
12import { ModerationCommentModalComponent } from './moderation-comment-modal.component' 12import { ModerationCommentModalComponent } from './moderation-comment-modal.component'
13import { SharedAccountAvatarModule } from '../shared-account-avatar/shared-account-avatar.module'
13 14
14@NgModule({ 15@NgModule({
15 imports: [ 16 imports: [
@@ -19,7 +20,8 @@ import { ModerationCommentModalComponent } from './moderation-comment-modal.comp
19 SharedFormModule, 20 SharedFormModule,
20 SharedModerationModule, 21 SharedModerationModule,
21 SharedGlobalIconModule, 22 SharedGlobalIconModule,
22 SharedVideoCommentModule 23 SharedVideoCommentModule,
24 SharedAccountAvatarModule
23 ], 25 ],
24 26
25 declarations: [ 27 declarations: [
diff --git a/client/src/app/shared/shared-account-avatar/account-avatar.component.html b/client/src/app/shared/shared-account-avatar/account-avatar.component.html
new file mode 100644
index 000000000..6bec0b5f3
--- /dev/null
+++ b/client/src/app/shared/shared-account-avatar/account-avatar.component.html
@@ -0,0 +1,8 @@
1<a *ngIf="account" [href]="href" target="_blank" rel="noopener noreferrer" [title]="title">
2 <img
3 [class]="class"
4 [src]="avatarUrl"
5 i18n-alt
6 alt="Account avatar"
7 />
8</a>
diff --git a/client/src/app/shared/shared-account-avatar/account-avatar.component.scss b/client/src/app/shared/shared-account-avatar/account-avatar.component.scss
new file mode 100644
index 000000000..bb941d712
--- /dev/null
+++ b/client/src/app/shared/shared-account-avatar/account-avatar.component.scss
@@ -0,0 +1,22 @@
1@import '_variables';
2@import '_mixins';
3
4.avatar-25 {
5 @include avatar(25px);
6}
7
8.avatar-34 {
9 @include avatar(34px);
10}
11
12.avatar-36 {
13 @include avatar(36px);
14}
15
16.avatar-40 {
17 @include avatar(40px);
18}
19
20.avatar-120 {
21 @include avatar(120px);
22} \ No newline at end of file
diff --git a/client/src/app/shared/shared-account-avatar/account-avatar.component.ts b/client/src/app/shared/shared-account-avatar/account-avatar.component.ts
new file mode 100644
index 000000000..d5533d459
--- /dev/null
+++ b/client/src/app/shared/shared-account-avatar/account-avatar.component.ts
@@ -0,0 +1,38 @@
1import { Component, Input } from '@angular/core'
2import { Account as AccountInterface } from '@shared/models'
3import { Account } from '../shared-main/account/account.model'
4
5@Component({
6 selector: 'my-account-avatar',
7 styleUrls: [ './account-avatar.component.scss' ],
8 templateUrl: './account-avatar.component.html'
9})
10export class AccountAvatarComponent {
11 _href: string
12 _title: string
13
14 @Input() account: { name: string, avatar?: { url?: string }, url: string }
15 @Input() size = '36'
16 @Input() set href (value) {
17 this._href = value
18 }
19 @Input() set title (value) {
20 this._title = value
21 }
22
23 get href () {
24 return this._href || this.account?.url
25 }
26
27 get title () {
28 return this._title || $localize`${this.account.name} (account page)`
29 }
30
31 get class () {
32 return `avatar avatar-${this.size}`
33 }
34
35 get avatarUrl () {
36 return this.account?.avatar ? this.account.avatar.url : Account.GET_DEFAULT_AVATAR_URL()
37 }
38}
diff --git a/client/src/app/shared/shared-account-avatar/index.ts b/client/src/app/shared/shared-account-avatar/index.ts
new file mode 100644
index 000000000..40c742ba5
--- /dev/null
+++ b/client/src/app/shared/shared-account-avatar/index.ts
@@ -0,0 +1,2 @@
1export * from './account-avatar.component'
2export * from './shared-account-avatar.module' \ No newline at end of file
diff --git a/client/src/app/shared/shared-account-avatar/shared-account-avatar.module.ts b/client/src/app/shared/shared-account-avatar/shared-account-avatar.module.ts
new file mode 100644
index 000000000..17b27589f
--- /dev/null
+++ b/client/src/app/shared/shared-account-avatar/shared-account-avatar.module.ts
@@ -0,0 +1,23 @@
1
2import { NgModule } from '@angular/core'
3import { SharedGlobalIconModule } from '../shared-icons'
4import { SharedMainModule } from '../shared-main/shared-main.module'
5import { AccountAvatarComponent } from './account-avatar.component'
6
7@NgModule({
8 imports: [
9 SharedMainModule,
10 SharedGlobalIconModule
11 ],
12
13 declarations: [
14 AccountAvatarComponent
15 ],
16
17 exports: [
18 AccountAvatarComponent
19 ],
20
21 providers: [ ]
22})
23export class SharedAccountAvatarModule { }
diff --git a/client/src/app/shared/shared-main/video/video.model.ts b/client/src/app/shared/shared-main/video/video.model.ts
index 1c2c4a575..14c507295 100644
--- a/client/src/app/shared/shared-main/video/video.model.ts
+++ b/client/src/app/shared/shared-main/video/video.model.ts
@@ -20,7 +20,6 @@ export class Video implements VideoServerModel {
20 byVideoChannel: string 20 byVideoChannel: string
21 byAccount: string 21 byAccount: string
22 22
23 accountAvatarUrl: string
24 videoChannelAvatarUrl: string 23 videoChannelAvatarUrl: string
25 24
26 createdAt: Date 25 createdAt: Date
@@ -144,7 +143,6 @@ export class Video implements VideoServerModel {
144 143
145 this.byAccount = Actor.CREATE_BY_STRING(hash.account.name, hash.account.host) 144 this.byAccount = Actor.CREATE_BY_STRING(hash.account.name, hash.account.host)
146 this.byVideoChannel = Actor.CREATE_BY_STRING(hash.channel.name, hash.channel.host) 145 this.byVideoChannel = Actor.CREATE_BY_STRING(hash.channel.name, hash.channel.host)
147 this.accountAvatarUrl = Account.GET_ACTOR_AVATAR_URL(this.account)
148 this.videoChannelAvatarUrl = VideoChannel.GET_ACTOR_AVATAR_URL(this.channel) 146 this.videoChannelAvatarUrl = VideoChannel.GET_ACTOR_AVATAR_URL(this.channel)
149 147
150 this.category.label = peertubeTranslate(this.category.label, translations) 148 this.category.label = peertubeTranslate(this.category.label, translations)
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 fb6f69cd5..3f2f55559 100644
--- a/client/src/app/shared/shared-moderation/account-blocklist.component.html
+++ b/client/src/app/shared/shared-moderation/account-blocklist.component.html
@@ -38,12 +38,7 @@
38 <td> 38 <td>
39 <a [href]="accountBlock.blockedAccount.url" i18n-title title="Open account in a new tab" target="_blank" rel="noopener noreferrer"> 39 <a [href]="accountBlock.blockedAccount.url" i18n-title title="Open account in a new tab" target="_blank" rel="noopener noreferrer">
40 <div class="chip two-lines"> 40 <div class="chip two-lines">
41 <img 41 <my-account-avatar [account]="accountBlock.blockedAccount"></my-account-avatar>
42 class="avatar"
43 [src]="accountBlock.blockedAccount.avatar?.path"
44 (error)="switchToDefaultAvatar($event)"
45 alt="Avatar"
46 >
47 <div> 42 <div>
48 {{ accountBlock.blockedAccount.displayName }} 43 {{ accountBlock.blockedAccount.displayName }}
49 <span class="text-muted">{{ accountBlock.blockedAccount.nameWithHost }}</span> 44 <span class="text-muted">{{ accountBlock.blockedAccount.nameWithHost }}</span>
diff --git a/client/src/app/shared/shared-moderation/account-blocklist.component.ts b/client/src/app/shared/shared-moderation/account-blocklist.component.ts
index 3de9587b8..1bce65bf0 100644
--- a/client/src/app/shared/shared-moderation/account-blocklist.component.ts
+++ b/client/src/app/shared/shared-moderation/account-blocklist.component.ts
@@ -30,10 +30,6 @@ export class GenericAccountBlocklistComponent extends RestTable implements OnIni
30 this.initialize() 30 this.initialize()
31 } 31 }
32 32
33 switchToDefaultAvatar ($event: Event) {
34 ($event.target as HTMLImageElement).src = Account.GET_DEFAULT_AVATAR_URL()
35 }
36
37 unblockAccount (accountBlock: AccountBlock) { 33 unblockAccount (accountBlock: AccountBlock) {
38 const blockedAccount = accountBlock.blockedAccount 34 const blockedAccount = accountBlock.blockedAccount
39 const operation = this.mode === BlocklistComponentType.Account 35 const operation = this.mode === BlocklistComponentType.Account
diff --git a/client/src/app/shared/shared-moderation/shared-moderation.module.ts b/client/src/app/shared/shared-moderation/shared-moderation.module.ts
index b1b98f8d0..c7e201792 100644
--- a/client/src/app/shared/shared-moderation/shared-moderation.module.ts
+++ b/client/src/app/shared/shared-moderation/shared-moderation.module.ts
@@ -13,13 +13,15 @@ import { UserBanModalComponent } from './user-ban-modal.component'
13import { UserModerationDropdownComponent } from './user-moderation-dropdown.component' 13import { UserModerationDropdownComponent } from './user-moderation-dropdown.component'
14import { VideoBlockComponent } from './video-block.component' 14import { VideoBlockComponent } from './video-block.component'
15import { VideoBlockService } from './video-block.service' 15import { VideoBlockService } from './video-block.service'
16import { SharedAccountAvatarModule } from '../shared-account-avatar/shared-account-avatar.module'
16 17
17@NgModule({ 18@NgModule({
18 imports: [ 19 imports: [
19 SharedMainModule, 20 SharedMainModule,
20 SharedFormModule, 21 SharedFormModule,
21 SharedGlobalIconModule, 22 SharedGlobalIconModule,
22 SharedVideoCommentModule 23 SharedVideoCommentModule,
24 SharedAccountAvatarModule
23 ], 25 ],
24 26
25 declarations: [ 27 declarations: [
diff --git a/client/src/app/shared/shared-video-comment/video-comment.model.ts b/client/src/app/shared/shared-video-comment/video-comment.model.ts
index bf718ae08..9a4e3954e 100644
--- a/client/src/app/shared/shared-video-comment/video-comment.model.ts
+++ b/client/src/app/shared/shared-video-comment/video-comment.model.ts
@@ -17,7 +17,6 @@ export class VideoComment implements VideoCommentServerModel {
17 totalRepliesFromVideoAuthor: number 17 totalRepliesFromVideoAuthor: number
18 totalReplies: number 18 totalReplies: number
19 by: string 19 by: string
20 accountAvatarUrl: string
21 20
22 isLocal: boolean 21 isLocal: boolean
23 22
@@ -38,7 +37,6 @@ export class VideoComment implements VideoCommentServerModel {
38 37
39 if (this.account) { 38 if (this.account) {
40 this.by = Actor.CREATE_BY_STRING(this.account.name, this.account.host) 39 this.by = Actor.CREATE_BY_STRING(this.account.name, this.account.host)
41 this.accountAvatarUrl = Account.GET_ACTOR_AVATAR_URL(this.account)
42 40
43 const absoluteAPIUrl = getAbsoluteAPIUrl() 41 const absoluteAPIUrl = getAbsoluteAPIUrl()
44 const thisHost = new URL(absoluteAPIUrl).host 42 const thisHost = new URL(absoluteAPIUrl).host
@@ -70,7 +68,6 @@ export class VideoCommentAdmin implements VideoCommentAdminServerModel {
70 } 68 }
71 69
72 by: string 70 by: string
73 accountAvatarUrl: string
74 71
75 constructor (hash: VideoCommentAdminServerModel, textHtml: string) { 72 constructor (hash: VideoCommentAdminServerModel, textHtml: string) {
76 this.id = hash.id 73 this.id = hash.id
@@ -97,7 +94,6 @@ export class VideoCommentAdmin implements VideoCommentAdminServerModel {
97 94
98 if (this.account) { 95 if (this.account) {
99 this.by = Actor.CREATE_BY_STRING(this.account.name, this.account.host) 96 this.by = Actor.CREATE_BY_STRING(this.account.name, this.account.host)
100 this.accountAvatarUrl = Account.GET_ACTOR_AVATAR_URL(this.account)
101 97
102 this.account.localUrl = '/accounts/' + this.by 98 this.account.localUrl = '/accounts/' + this.by
103 } 99 }
diff --git a/client/src/app/shared/shared-video-miniature/shared-video-miniature.module.ts b/client/src/app/shared/shared-video-miniature/shared-video-miniature.module.ts
index 7a7868853..32cfdfd68 100644
--- a/client/src/app/shared/shared-video-miniature/shared-video-miniature.module.ts
+++ b/client/src/app/shared/shared-video-miniature/shared-video-miniature.module.ts
@@ -13,6 +13,7 @@ import { VideoDownloadComponent } from './video-download.component'
13import { VideoMiniatureComponent } from './video-miniature.component' 13import { VideoMiniatureComponent } from './video-miniature.component'
14import { VideosSelectionComponent } from './videos-selection.component' 14import { VideosSelectionComponent } from './videos-selection.component'
15import { VideoListHeaderComponent } from './video-list-header.component' 15import { VideoListHeaderComponent } from './video-list-header.component'
16import { SharedAccountAvatarModule } from '../shared-account-avatar/shared-account-avatar.module'
16 17
17@NgModule({ 18@NgModule({
18 imports: [ 19 imports: [
@@ -23,7 +24,8 @@ import { VideoListHeaderComponent } from './video-list-header.component'
23 SharedThumbnailModule, 24 SharedThumbnailModule,
24 SharedGlobalIconModule, 25 SharedGlobalIconModule,
25 SharedVideoLiveModule, 26 SharedVideoLiveModule,
26 SharedVideoModule 27 SharedVideoModule,
28 SharedAccountAvatarModule
27 ], 29 ],
28 30
29 declarations: [ 31 declarations: [
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 bac8bcc2d..4e61c27b3 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
@@ -10,9 +10,10 @@
10 <div class="video-bottom"> 10 <div class="video-bottom">
11 <div class="video-miniature-information"> 11 <div class="video-miniature-information">
12 <div class="d-flex video-miniature-meta"> 12 <div class="d-flex video-miniature-meta">
13 <a *ngIf="displayOptions.avatar" class="avatar" [routerLink]="[ '/video-channels', video.byVideoChannel ]" [title]="channelLinkTitle"> 13 <a *ngIf="displayOptions.avatar && displayOwnerVideoChannel()" class="avatar" [routerLink]="[ '/video-channels', video.byVideoChannel ]" [title]="channelLinkTitle">
14 <img [src]="getAvatarUrl()" alt="" [ngClass]="{ channel: displayOwnerVideoChannel() }" /> 14 <img [src]="getAvatarUrl()" alt="" class="channel" />
15 </a> 15 </a>
16 <my-account-avatar *ngIf="displayOptions.avatar && displayOwnerAccount()" [account]="video.account" size="40" [href]="'/video-channels/' + video.byVideoChannel" [title]="channelLinkTitle"></my-account-avatar>
16 17
17 <div class="w-100 d-flex flex-column"> 18 <div class="w-100 d-flex flex-column">
18 <a *ngIf="!videoHref" tabindex="-1" class="video-miniature-name" 19 <a *ngIf="!videoHref" tabindex="-1" class="video-miniature-name"
diff --git a/client/src/app/shared/shared-video-miniature/video-miniature.component.scss b/client/src/app/shared/shared-video-miniature/video-miniature.component.scss
index 621951919..bf52b870c 100644
--- a/client/src/app/shared/shared-video-miniature/video-miniature.component.scss
+++ b/client/src/app/shared/shared-video-miniature/video-miniature.component.scss
@@ -12,13 +12,10 @@ $more-button-width: 40px;
12 width: calc(100% - #{$more-button-width}); 12 width: calc(100% - #{$more-button-width});
13} 13}
14 14
15my-account-avatar,
15.avatar { 16.avatar {
16 margin: 10px 10px 0 0; 17 margin: 10px 10px 0 0;
17 18
18 img:not(.channel) {
19 @include avatar(40px);
20 }
21
22 img.channel { 19 img.channel {
23 @include channel-avatar(40px); 20 @include channel-avatar(40px);
24 } 21 }
diff --git a/client/src/app/shared/shared-video-miniature/video-miniature.component.ts b/client/src/app/shared/shared-video-miniature/video-miniature.component.ts
index 48da92d6b..8d66aaee2 100644
--- a/client/src/app/shared/shared-video-miniature/video-miniature.component.ts
+++ b/client/src/app/shared/shared-video-miniature/video-miniature.component.ts
@@ -182,7 +182,7 @@ export class VideoMiniatureComponent implements OnInit {
182 182
183 getAvatarUrl () { 183 getAvatarUrl () {
184 if (this.displayOwnerAccount()) { 184 if (this.displayOwnerAccount()) {
185 return this.video.accountAvatarUrl 185 return this.video.account.avatar?.url
186 } 186 }
187 187
188 return this.video.videoChannelAvatarUrl 188 return this.video.videoChannelAvatarUrl
diff --git a/client/src/sass/include/_actor.scss b/client/src/sass/include/_actor.scss
index 8d82a042c..a4798ce1d 100644
--- a/client/src/sass/include/_actor.scss
+++ b/client/src/sass/include/_actor.scss
@@ -29,10 +29,6 @@
29 @include channel-avatar(120px); 29 @include channel-avatar(120px);
30 } 30 }
31 31
32 .account-avatar {
33 @include avatar(120px);
34 }
35
36 > div { 32 > div {
37 margin-left: $img-margin; 33 margin-left: $img-margin;
38 min-width: 1px; 34 min-width: 1px;