243 files changed, 2049 insertions, 1607 deletions
diff --git a/client/src/app/+about/about-follows/about-follows.component.html b/client/src/app/+about/about-follows/about-follows.component.html
index e9139b503..f81465f88 100644
--- a/client/src/app/+about/about-follows/about-follows.component.html
+++ b/client/src/app/+about/about-follows/about-follows.component.html
@@ -21,7 +21,7 @@
      {{ following }}
    </a>
-    <button i18n class="showMore" *ngIf="!loadedAllFollowings && canLoadMoreFollowings()" (click)="loadAllFollowings()">Show full list</button>
+    <button i18n class="show-more" *ngIf="!loadedAllFollowings && canLoadMoreFollowings()" (click)="loadAllFollowings()">Show full list</button>
  </div>
 </div>
diff --git a/client/src/app/+about/about-follows/about-follows.component.scss b/client/src/app/+about/about-follows/about-follows.component.scss
index a393c9d92..83241e727 100644
--- a/client/src/app/+about/about-follows/about-follows.component.scss
+++ b/client/src/app/+about/about-follows/about-follows.component.scss
@@ -17,9 +17,9 @@ a {
  justify-content: flex-start;
 }
-.showMore {
+.show-more {
  @include peertube-button-link;
  @include grey-button;
-  
  margin-top: 1%;
 }
diff --git a/client/src/app/+about/about-instance/about-instance.component.scss b/client/src/app/+about/about-instance/about-instance.component.scss
index 7158a3a79..9886bdfef 100644
--- a/client/src/app/+about/about-instance/about-instance.component.scss
+++ b/client/src/app/+about/about-instance/about-instance.component.scss
@@ -63,7 +63,8 @@
  position: relative;
-  &:hover, &:active {
+  &:hover,
+  &:active {
    &::after {
      content: '#';
      display: inline-block;
@@ -71,7 +72,8 @@
    }
  }
-  .middle-title, .section-title {
+  .middle-title,
+  .section-title {
    display: inline-block;
  }
diff --git a/client/src/app/+about/about-peertube/about-peertube.component.scss b/client/src/app/+about/about-peertube/about-peertube.component.scss
index e67252410..e5d2bc5b8 100644
--- a/client/src/app/+about/about-peertube/about-peertube.component.scss
+++ b/client/src/app/+about/about-peertube/about-peertube.component.scss
@@ -45,7 +45,8 @@
 .p2p-privacy,
 my-about-peertube-contributors {
  ::ng-deep {
-    p, li {
+    p,
+    li {
      font-size: 15px;
    }
  }
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 19a4b3c9c..922608127 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
@@ -8,9 +8,10 @@
    <div class="channel" *ngFor="let videoChannel of videoChannels">
      <div class="channel-avatar-row">
-        <a class="avatar-link" [routerLink]="getVideoChannelLink(videoChannel)" i18n-title title="See this video channel">
+        <my-actor-avatar
-          <img [src]="videoChannel.avatarUrl" alt="Avatar" />
+          [channel]="videoChannel" [internalHref]="getVideoChannelLink(videoChannel)"
-        </a>
+          i18n-title title="See this video channel"
+        ></my-actor-avatar>
        <h2>
          <a [routerLink]="getVideoChannelLink(videoChannel)" i18n-title title="See this video channel">
diff --git a/client/src/app/+accounts/account-video-channels/account-video-channels.component.scss b/client/src/app/+accounts/account-video-channels/account-video-channels.component.scss
index 7e88802f3..f9d097644 100644
--- a/client/src/app/+accounts/account-video-channels/account-video-channels.component.scss
+++ b/client/src/app/+accounts/account-video-channels/account-video-channels.component.scss
@@ -27,14 +27,12 @@
  grid-template-columns: auto auto 1fr;
  grid-template-rows: auto 1fr;
-  .avatar-link {
+  my-actor-avatar {
+    @include actor-avatar-size(75px);
    grid-column: 1;
    grid-row: 1 / 3;
-    margin-right: 30px;
+    margin-right: 15px;
-  }
-  img {
-    @include channel-avatar(75px);
  }
  a {
@@ -67,13 +65,13 @@
  }
  .description-html {
+    @include fade-text(30px, pvar(--channelBackgroundColor));
    grid-column: 2 / 4;
    grid-row: 2;
    max-height: 80px;
    font-size: 16px;
-    @include fade-text(30px, pvar(--channelBackgroundColor));
  }
 }
diff --git a/client/src/app/+accounts/accounts.component.html b/client/src/app/+accounts/accounts.component.html
index ea7a317eb..350c77f1e 100644
--- a/client/src/app/+accounts/accounts.component.html
+++ b/client/src/app/+accounts/accounts.component.html
@@ -2,7 +2,7 @@
  <div class="account-info">
    <div class="account-avatar-row">
-      <my-account-avatar [account]="account" size="120"></my-account-avatar>
+      <my-actor-avatar class="main-avatar" [account]="account"></my-actor-avatar>
      <div>
        <div class="section-label" i18n>PEERTUBE ACCOUNT</div>
diff --git a/client/src/app/+accounts/accounts.component.scss b/client/src/app/+accounts/accounts.component.scss
index 56927dea6..2e99fe8a5 100644
--- a/client/src/app/+accounts/accounts.component.scss
+++ b/client/src/app/+accounts/accounts.component.scss
@@ -40,7 +40,7 @@ my-user-moderation-dropdown,
 }
 .copy-button {
-  border: none;
+  border: 0;
 }
 .account-info {
@@ -104,9 +104,9 @@ my-user-moderation-dropdown,
  }
  .description:not(.expanded) {
-    max-height: 70px;
    @include fade-text(30px, pvar(--submenuBackgroundColor));
+    max-height: 70px;
  }
  .show-more {
diff --git a/client/src/app/+accounts/accounts.module.ts b/client/src/app/+accounts/accounts.module.ts
index 22cdd0642..1bafc5141 100644
--- a/client/src/app/+accounts/accounts.module.ts
+++ b/client/src/app/+accounts/accounts.module.ts
@@ -10,7 +10,7 @@ import { AccountVideoChannelsComponent } from './account-video-channels/account-
 import { AccountVideosComponent } from './account-videos/account-videos.component'
 import { AccountsRoutingModule } from './accounts-routing.module'
 import { AccountsComponent } from './accounts.component'
-import { SharedAccountAvatarModule } from '../shared/shared-account-avatar/shared-account-avatar.module'
+import { SharedActorImageModule } from '../shared/shared-actor-image/shared-actor-image.module'
 @NgModule({
  imports: [
@@ -22,7 +22,7 @@ import { SharedAccountAvatarModule } from '../shared/shared-account-avatar/share
    SharedModerationModule,
    SharedVideoMiniatureModule,
    SharedGlobalIconModule,
-    SharedAccountAvatarModule
+    SharedActorImageModule
  ],
  declarations: [
diff --git a/client/src/app/+admin/admin.module.ts b/client/src/app/+admin/admin.module.ts
index 8d1c3eadb..45366f9ec 100644
--- a/client/src/app/+admin/admin.module.ts
+++ b/client/src/app/+admin/admin.module.ts
@@ -3,12 +3,13 @@ import { SelectButtonModule } from 'primeng/selectbutton'
 import { TableModule } from 'primeng/table'
 import { NgModule } from '@angular/core'
 import { SharedAbuseListModule } from '@app/shared/shared-abuse-list'
-import { SharedActorImageModule } from '@app/shared/shared-actor-image'
+import { SharedActorImageEditModule } from '@app/shared/shared-actor-image-edit'
 import { SharedFormModule } from '@app/shared/shared-forms'
 import { SharedGlobalIconModule } from '@app/shared/shared-icons'
 import { SharedMainModule } from '@app/shared/shared-main'
 import { SharedModerationModule } from '@app/shared/shared-moderation'
 import { SharedVideoCommentModule } from '@app/shared/shared-video-comment'
+import { SharedActorImageModule } from '../shared/shared-actor-image/shared-actor-image.module'
 import { AdminRoutingModule } from './admin-routing.module'
 import { AdminComponent } from './admin.component'
 import {
@@ -39,7 +40,6 @@ import { JobService, LogsComponent, LogsService, SystemComponent } from './syste
 import { DebugComponent, DebugService } from './system/debug'
 import { JobsComponent } from './system/jobs/jobs.component'
 import { UserCreateComponent, UserListComponent, UserPasswordComponent, UsersComponent, UserUpdateComponent } from './users'
-import { SharedAccountAvatarModule } from '../shared/shared-account-avatar/shared-account-avatar.module'
 @NgModule({
  imports: [
@@ -51,8 +51,8 @@ import { SharedAccountAvatarModule } from '../shared/shared-account-avatar/share
    SharedGlobalIconModule,
    SharedAbuseListModule,
    SharedVideoCommentModule,
-    SharedAccountAvatarModule,
    SharedActorImageModule,
+    SharedActorImageEditModule,
    TableModule,
    SelectButtonModule,
diff --git a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.scss b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.scss
index c12465d45..cc2a98a17 100644
--- a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.scss
+++ b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.scss
@@ -57,7 +57,7 @@ input[type=submit] {
  display: flex;
  margin-left: auto;
-  & + .form-error {
+  + .form-error {
    display: inline;
    margin-left: 5px;
  }
@@ -84,7 +84,8 @@ textarea {
 }
 .disabled-checkbox-extra {
-  &, ::ng-deep label {
+  &,
+  ::ng-deep label {
    opacity: .5;
    pointer-events: none;
  }
diff --git a/client/src/app/+admin/config/edit-custom-config/edit-instance-information.component.html b/client/src/app/+admin/config/edit-custom-config/edit-instance-information.component.html
index 35b42e742..cbff26e5a 100644
--- a/client/src/app/+admin/config/edit-custom-config/edit-instance-information.component.html
+++ b/client/src/app/+admin/config/edit-custom-config/edit-instance-information.component.html
@@ -104,7 +104,7 @@
          <my-help>
            <ng-template ptTemplate="customHtml">
              <ng-container i18n>
-                With <strong>Do not list</strong> or <strong>Blur thumbnails</strong>, a confirmation will be requested to watch the video.
+                With <strong>Hide</strong> or <strong>Blur thumbnails</strong>, a confirmation will be requested to watch the video.
              </ng-container>
            </ng-template>
          </my-help>
@@ -112,7 +112,7 @@
          <div class="peertube-select-container">
            <select id="instanceDefaultNSFWPolicy" formControlName="defaultNSFWPolicy" class="form-control">
              <option i18n value="undefined" disabled>Policy for sensitive videos</option>
-              <option i18n value="do_not_list">Do not list</option>
+              <option i18n value="do_not_list">Hide</option>
              <option i18n value="blur">Blur thumbnails</option>
              <option i18n value="display">Display</option>
            </select>
diff --git a/client/src/app/+admin/follows/followers-list/followers-list.component.html b/client/src/app/+admin/follows/followers-list/followers-list.component.html
index 633de9677..c2e9a4df6 100644
--- a/client/src/app/+admin/follows/followers-list/followers-list.component.html
+++ b/client/src/app/+admin/follows/followers-list/followers-list.component.html
@@ -4,20 +4,16 @@
 </h1>
 <p-table
-  [value]="followers" [lazy]="true" [paginator]="totalRecords > 0" [totalRecords]="totalRecords" [rows]="rowsPerPage" [rowsPerPageOptions]="rowsPerPageOptions"
+  [value]="followers" [paginator]="totalRecords > 0" [totalRecords]="totalRecords" [rows]="rowsPerPage" [rowsPerPageOptions]="rowsPerPageOptions"
-  [sortField]="sort.field" [sortOrder]="sort.order" (onLazyLoad)="loadLazy($event)" (onPage)="onPage($event)"
+  [sortField]="sort.field" [sortOrder]="sort.order" (onPage)="onPage($event)"
+  [lazy]="true" (onLazyLoad)="loadLazy($event)" [lazyLoadOnInit]="false"
  [showCurrentPageReport]="true" i18n-currentPageReportTemplate
  currentPageReportTemplate="Showing {{'{first}'}} to {{'{last}'}} of {{'{totalRecords}'}} followers"
 >
  <ng-template pTemplate="caption">
    <div class="caption">
-      <div class="ml-auto has-feedback has-clear">
+      <div class="ml-auto">
-        <input
+        <my-advanced-input-filter (search)="onSearch($event)"></my-advanced-input-filter>
-          type="text" name="table-filter" id="table-filter" i18n-placeholder placeholder="Filter..."
-          (keyup)="onSearch($event)"
-        >
-        <a class="glyphicon glyphicon-remove-sign form-control-feedback form-control-clear" (click)="resetSearch()"></a>
-        <span class="sr-only" i18n>Clear filters</span>
      </div>
    </div>
  </ng-template>
diff --git a/client/src/app/+admin/follows/followers-list/followers-list.component.scss b/client/src/app/+admin/follows/followers-list/followers-list.component.scss
index f2d752eb5..35f38aae0 100644
--- a/client/src/app/+admin/follows/followers-list/followers-list.component.scss
+++ b/client/src/app/+admin/follows/followers-list/followers-list.component.scss
@@ -1,19 +1,12 @@
 @import '_variables';
 @import '_mixins';
-.caption {
-  justify-content: flex-end;
-  input {
-    @include peertube-input-text(250px);
-  }
-}
 a {
  @include disable-default-a-behaviour;
  display: inline-block;
-  &, &:hover {
+  &,
+  &:hover {
    color: pvar(--mainForegroundColor);
  }
diff --git a/client/src/app/+admin/follows/followers-list/followers-list.component.ts b/client/src/app/+admin/follows/followers-list/followers-list.component.ts
index 904e3c338..4a312f6aa 100644
--- a/client/src/app/+admin/follows/followers-list/followers-list.component.ts
+++ b/client/src/app/+admin/follows/followers-list/followers-list.component.ts
@@ -59,7 +59,7 @@ export class FollowersListComponent extends RestTable implements OnInit {
            const handle = follow.follower.name + '@' + follow.follower.host
            this.notifier.success($localize`${handle} rejected from instance followers`)
-            this.loadData()
+            this.reloadData()
          },
          err => {
@@ -80,14 +80,14 @@ export class FollowersListComponent extends RestTable implements OnInit {
            const handle = follow.follower.name + '@' + follow.follower.host
            this.notifier.success($localize`${handle} removed from instance followers`)
-            this.loadData()
+            this.reloadData()
          },
          err => this.notifier.error(err.message)
        )
  }
-  protected loadData () {
+  protected reloadData () {
    this.followService.getFollowers({ pagination: this.pagination, sort: this.sort, search: this.search })
                      .subscribe(
                        resultList => {
diff --git a/client/src/app/+admin/follows/following-list/following-list.component.html b/client/src/app/+admin/follows/following-list/following-list.component.html
index f4e6a60fe..e7c0c9088 100644
--- a/client/src/app/+admin/follows/following-list/following-list.component.html
+++ b/client/src/app/+admin/follows/following-list/following-list.component.html
@@ -4,8 +4,9 @@
 </h1>
 <p-table
-  [value]="following" [lazy]="true" [paginator]="totalRecords > 0" [totalRecords]="totalRecords" [rows]="rowsPerPage" [rowsPerPageOptions]="rowsPerPageOptions"
+  [value]="following" [paginator]="totalRecords > 0" [totalRecords]="totalRecords" [rows]="rowsPerPage" [rowsPerPageOptions]="rowsPerPageOptions"
  [sortField]="sort.field" [sortOrder]="sort.order" (onLazyLoad)="loadLazy($event)" (onPage)="onPage($event)"
+  [lazy]="true" (onLazyLoad)="loadLazy($event)" [lazyLoadOnInit]="false"
  [showCurrentPageReport]="true" i18n-currentPageReportTemplate
  currentPageReportTemplate="Showing {{'{first}'}} to {{'{last}'}} of {{'{totalRecords}'}} hosts"
 >
@@ -18,13 +19,8 @@
        </a>
      </div>
-      <div class="ml-auto has-feedback has-clear">
+      <div class="ml-auto">
-        <input
+        <my-advanced-input-filter (search)="onSearch($event)"></my-advanced-input-filter>
-          type="text" name="table-filter" id="table-filter" i18n-placeholder placeholder="Filter..."
-          (keyup)="onSearch($event)"
-        >
-        <a class="glyphicon glyphicon-remove-sign form-control-feedback form-control-clear" (click)="resetSearch()"></a>
-        <span class="sr-only" i18n>Clear filters</span>
      </div>
    </div>
  </ng-template>
diff --git a/client/src/app/+admin/follows/following-list/following-list.component.scss b/client/src/app/+admin/follows/following-list/following-list.component.scss
index b108218b8..9474b0a23 100644
--- a/client/src/app/+admin/follows/following-list/following-list.component.scss
+++ b/client/src/app/+admin/follows/following-list/following-list.component.scss
@@ -5,7 +5,8 @@ a {
  @include disable-default-a-behaviour;
  display: inline-block;
-  &, &:hover {
+  &,
+  &:hover {
    color: pvar(--mainForegroundColor);
  }
@@ -15,14 +16,6 @@ a {
  }
 }
-.caption {
-  justify-content: flex-end;
-  input {
-    @include peertube-input-text(250px);
-  }
-}
 .follow-button {
  @include create-button;
 }
diff --git a/client/src/app/+admin/follows/following-list/following-list.component.ts b/client/src/app/+admin/follows/following-list/following-list.component.ts
index f34490cc8..b63fe08c0 100644
--- a/client/src/app/+admin/follows/following-list/following-list.component.ts
+++ b/client/src/app/+admin/follows/following-list/following-list.component.ts
@@ -45,7 +45,7 @@ export class FollowingListComponent extends RestTable implements OnInit {
    this.followService.follow(hosts).subscribe(
      () => {
        this.notifier.success($localize`Follow request(s) sent!`)
-        this.loadData()
+        this.reloadData()
      },
      err => this.notifier.error(err.message)
@@ -62,14 +62,14 @@ export class FollowingListComponent extends RestTable implements OnInit {
    this.followService.unfollow(follow).subscribe(
      () => {
        this.notifier.success($localize`You are not following ${follow.following.host} anymore.`)
-        this.loadData()
+        this.reloadData()
      },
      err => this.notifier.error(err.message)
    )
  }
-  protected loadData () {
+  protected reloadData () {
    this.followService.getFollowing({ pagination: this.pagination, sort: this.sort, search: this.search })
                      .subscribe(
                        resultList => {
diff --git a/client/src/app/+admin/follows/follows.component.scss b/client/src/app/+admin/follows/follows.component.scss
index 33ff17539..1ed0d925f 100644
--- a/client/src/app/+admin/follows/follows.component.scss
+++ b/client/src/app/+admin/follows/follows.component.scss
@@ -1,4 +1,4 @@
-@import "mixins";
+@import 'mixins';
 .form-sub-title {
  flex-grow: 0;
diff --git a/client/src/app/+admin/follows/video-redundancies-list/video-redundancies-list.component.scss b/client/src/app/+admin/follows/video-redundancies-list/video-redundancies-list.component.scss
index adcf2037e..30b9f2147 100644
--- a/client/src/app/+admin/follows/video-redundancies-list/video-redundancies-list.component.scss
+++ b/client/src/app/+admin/follows/video-redundancies-list/video-redundancies-list.component.scss
@@ -5,7 +5,8 @@ a {
  @include disable-default-a-behaviour;
  display: inline-block;
-  &, &:hover {
+  &,
+  &:hover {
    color: pvar(--mainForegroundColor);
  }
diff --git a/client/src/app/+admin/follows/video-redundancies-list/video-redundancies-list.component.ts b/client/src/app/+admin/follows/video-redundancies-list/video-redundancies-list.component.ts
index d6fd1a1ab..3cd65dd6e 100644
--- a/client/src/app/+admin/follows/video-redundancies-list/video-redundancies-list.component.ts
+++ b/client/src/app/+admin/follows/video-redundancies-list/video-redundancies-list.component.ts
@@ -78,7 +78,7 @@ export class VideoRedundanciesListComponent extends RestTable implements OnInit
    this.pagination.start = 0
    this.saveSelectLocalStorage()
-    this.loadData()
+    this.reloadData()
  }
  getRedundancyStrategy (redundancy: VideoRedundancy) {
@@ -145,7 +145,7 @@ export class VideoRedundanciesListComponent extends RestTable implements OnInit
      .subscribe(
        () => {
          this.notifier.success($localize`Video redundancies removed!`)
-          this.loadData()
+          this.reloadData()
        },
        err => this.notifier.error(err.message)
@@ -153,7 +153,7 @@ export class VideoRedundanciesListComponent extends RestTable implements OnInit
  }
-  protected loadData () {
+  protected reloadData () {
    const options = {
      pagination: this.pagination,
      sort: this.sort,
diff --git a/client/src/app/+admin/moderation/abuse-list/abuse-list.component.html b/client/src/app/+admin/moderation/abuse-list/abuse-list.component.html
index 9a6c124e1..a9e0931f8 100644
--- a/client/src/app/+admin/moderation/abuse-list/abuse-list.component.html
+++ b/client/src/app/+admin/moderation/abuse-list/abuse-list.component.html
@@ -3,4 +3,4 @@
  <ng-container i18n>Reports</ng-container>
 </h1>
-<my-abuse-list-table viewType="admin" baseRoute="/admin/moderation/abuses/list"></my-abuse-list-table>
+<my-abuse-list-table viewType="admin"></my-abuse-list-table>
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 f5cf93adb..e3a3a8320 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
@@ -1,18 +1,14 @@
 <p-table
-  [value]="blockedAccounts" [lazy]="true" [paginator]="totalRecords > 0" [totalRecords]="totalRecords" [rows]="rowsPerPage" [rowsPerPageOptions]="rowsPerPageOptions"
+  [value]="blockedAccounts" [paginator]="totalRecords > 0" [totalRecords]="totalRecords" [rows]="rowsPerPage" [rowsPerPageOptions]="rowsPerPageOptions"
-  [sortField]="sort.field" [sortOrder]="sort.order" (onLazyLoad)="loadLazy($event)" (onPage)="onPage($event)"
+  [sortField]="sort.field" [sortOrder]="sort.order" (onPage)="onPage($event)"
+  [lazy]="true" (onLazyLoad)="loadLazy($event)" [lazyLoadOnInit]="false"
  [showCurrentPageReport]="true" i18n-currentPageReportTemplate
  currentPageReportTemplate="Showing {{'{first}'}} to {{'{last}'}} of {{'{totalRecords}'}} muted accounts"
 >
  <ng-template pTemplate="caption">
    <div class="caption">
-      <div class="ml-auto has-feedback has-clear">
+      <div class="ml-auto">
-        <input
+        <my-advanced-input-filter (search)="onSearch($event)"></my-advanced-input-filter>
-          type="text" name="table-filter" id="table-filter" i18n-placeholder placeholder="Filter..."
-          (keyup)="onSearch($event)"
-        >
-        <a class="glyphicon glyphicon-remove-sign form-control-feedback form-control-clear" (click)="resetSearch()"></a>
-        <span class="sr-only" i18n>Clear filters</span>
      </div>
    </div>
  </ng-template>
@@ -34,7 +30,7 @@
      <td>
        <a [href]="accountBlock.blockedAccount.url" i18n-title title="Open account in a new tab" target="_blank" rel="noopener noreferrer">
          <div class="chip two-lines">
-            <my-account-avatar [account]="accountBlock.blockedAccount"></my-account-avatar>
+            <my-actor-avatar [account]="accountBlock.blockedAccount"></my-actor-avatar>
            <div>
              {{ accountBlock.blockedAccount.displayName }}
              <span class="text-muted">{{ accountBlock.blockedAccount.nameWithHost }}</span>
diff --git a/client/src/app/+admin/moderation/instance-blocklist/instance-account-blocklist.component.scss b/client/src/app/+admin/moderation/instance-blocklist/instance-account-blocklist.component.scss
index 6028b75ea..1d98e44d9 100644
--- a/client/src/app/+admin/moderation/instance-blocklist/instance-account-blocklist.component.scss
+++ b/client/src/app/+admin/moderation/instance-blocklist/instance-account-blocklist.component.scss
@@ -4,4 +4,4 @@
 .unblock-button {
  @include peertube-button;
  @include grey-button;
-}
-\ No newline at end of file
+}
diff --git a/client/src/app/+admin/moderation/video-block-list/video-block-list.component.html b/client/src/app/+admin/moderation/video-block-list/video-block-list.component.html
index c7275de1b..d89c8f244 100644
--- a/client/src/app/+admin/moderation/video-block-list/video-block-list.component.html
+++ b/client/src/app/+admin/moderation/video-block-list/video-block-list.component.html
@@ -4,8 +4,9 @@
 </h1>
 <p-table
-  [value]="blocklist" [lazy]="true" [paginator]="totalRecords > 0" [totalRecords]="totalRecords" [rows]="rowsPerPage" [rowsPerPageOptions]="rowsPerPageOptions"
+  [value]="blocklist" [paginator]="totalRecords > 0" [totalRecords]="totalRecords" [rows]="rowsPerPage" [rowsPerPageOptions]="rowsPerPageOptions"
-  [sortField]="sort.field" [sortOrder]="sort.order" (onLazyLoad)="loadLazy($event)" dataKey="id"
+  [sortField]="sort.field" [sortOrder]="sort.order" dataKey="id"
+  [lazy]="true" (onLazyLoad)="loadLazy($event)" [lazyLoadOnInit]="false"
  [showCurrentPageReport]="true" i18n-currentPageReportTemplate
  currentPageReportTemplate="Showing {{'{first}'}} to {{'{last}'}} of {{'{totalRecords}'}} blocked videos"
  (onPage)="onPage($event)" [expandedRowKeys]="expandedRows"
@@ -13,25 +14,7 @@
  <ng-template pTemplate="caption">
    <div class="caption">
      <div class="ml-auto">
-        <div class="input-group has-feedback has-clear">
+        <my-advanced-input-filter [filters]="inputFilters" (search)="onSearch($event)"></my-advanced-input-filter>
-          <div class="input-group-prepend c-hand" ngbDropdown placement="bottom-left auto" container="body">
-            <div class="input-group-text" ngbDropdownToggle>
-              <span class="caret" aria-haspopup="menu" role="button"></span>
-            </div>
-            <div role="menu" ngbDropdownMenu>
-              <h6 class="dropdown-header" i18n>Advanced block filters</h6>
-              <a [routerLink]="[ '/admin/moderation/video-blocks/list' ]" [queryParams]="{ 'search': 'type:auto' }" class="dropdown-item" i18n>Automatic blocks</a>
-              <a [routerLink]="[ '/admin/moderation/video-blocks/list' ]" [queryParams]="{ 'search': 'type:manual' }" class="dropdown-item" i18n>Manual blocks</a>
-            </div>
-          </div>
-          <input
-            type="text" name="table-filter" id="table-filter" i18n-placeholder placeholder="Filter..."
-            (keyup)="onSearch($event)"
-          >
-          <a class="glyphicon glyphicon-remove-sign form-control-feedback form-control-clear" (click)="resetTableFilter()"></a>
-          <span class="sr-only" i18n>Clear filters</span>
-        </div>
      </div>
    </div>
  </ng-template>
diff --git a/client/src/app/+admin/moderation/video-block-list/video-block-list.component.scss b/client/src/app/+admin/moderation/video-block-list/video-block-list.component.scss
index b67e33cc1..068aa2aee 100644
--- a/client/src/app/+admin/moderation/video-block-list/video-block-list.component.scss
+++ b/client/src/app/+admin/moderation/video-block-list/video-block-list.component.scss
@@ -5,23 +5,6 @@ my-global-icon {
  height: 24px;
 }
-.input-group {
-  @include peertube-input-group(300px);
-  .dropdown-toggle::after {
-    margin-left: 0;
-  }
-}
-.caption {
-  justify-content: flex-end;
-  input {
-    @include peertube-input-text(250px);
-    flex-grow: 1;
-  }
-}
 .badge {
  @include table-badge;
 }
diff --git a/client/src/app/+admin/moderation/video-block-list/video-block-list.component.ts b/client/src/app/+admin/moderation/video-block-list/video-block-list.component.ts
index d6aca10e7..498d8321a 100644
--- a/client/src/app/+admin/moderation/video-block-list/video-block-list.component.ts
+++ b/client/src/app/+admin/moderation/video-block-list/video-block-list.component.ts
@@ -2,10 +2,11 @@ import { SortMeta } from 'primeng/api'
 import { switchMap } from 'rxjs/operators'
 import { buildVideoLink, buildVideoOrPlaylistEmbed } from 'src/assets/player/utils'
 import { environment } from 'src/environments/environment'
-import { AfterViewInit, Component, OnInit } from '@angular/core'
+import { Component, OnInit } from '@angular/core'
 import { DomSanitizer } from '@angular/platform-browser'
-import { ActivatedRoute, Params, Router } from '@angular/router'
+import { ActivatedRoute, Router } from '@angular/router'
 import { ConfirmService, MarkdownService, Notifier, RestPagination, RestTable, ServerService } from '@app/core'
+import { AdvancedInputFilter } from '@app/shared/shared-forms'
 import { DropdownAction, Video, VideoService } from '@app/shared/shared-main'
 import { VideoBlockService } from '@app/shared/shared-moderation'
 import { VideoBlacklist, VideoBlacklistType } from '@shared/models'
@@ -15,7 +16,7 @@ import { VideoBlacklist, VideoBlacklistType } from '@shared/models'
  templateUrl: './video-block-list.component.html',
  styleUrls: [ '../../../shared/shared-moderation/moderation.scss', './video-block-list.component.scss' ]
 })
-export class VideoBlockListComponent extends RestTable implements OnInit, AfterViewInit {
+export class VideoBlockListComponent extends RestTable implements OnInit {
  blocklist: (VideoBlacklist & { reasonHtml?: string, embedHtml?: string })[] = []
  totalRecords = 0
  sort: SortMeta = { field: 'createdAt', order: -1 }
@@ -24,6 +25,17 @@ export class VideoBlockListComponent extends RestTable implements OnInit, AfterV
  videoBlocklistActions: DropdownAction<VideoBlacklist>[][] = []
+  inputFilters: AdvancedInputFilter[] = [
+    {
+      queryParams: { 'search': 'type:auto' },
+      label: $localize`Automatic blocks`
+    },
+    {
+      queryParams: { 'search': 'type:manual' },
+      label: $localize`Manual blocks`
+    }
+  ]
  constructor (
    protected route: ActivatedRoute,
    protected router: Router,
@@ -52,7 +64,7 @@ export class VideoBlockListComponent extends RestTable implements OnInit, AfterV
            ).subscribe(
              () => {
                this.notifier.success($localize`Video ${videoBlock.video.name} switched to manual block.`)
-                this.loadData()
+                this.reloadData()
              },
              err => this.notifier.error(err.message)
@@ -104,31 +116,7 @@ export class VideoBlockListComponent extends RestTable implements OnInit, AfterV
        })
    this.initialize()
-    this.listenToSearchChange()
-  }
-  ngAfterViewInit () {
-    if (this.search) this.setTableFilter(this.search, false)
-  }
-  /* Table filter functions */
-  onBlockSearch (event: Event) {
-    this.onSearch(event)
-    this.setQueryParams((event.target as HTMLInputElement).value)
-  }
-  setQueryParams (search: string) {
-    const queryParams: Params = {}
-    if (search) Object.assign(queryParams, { search })
-    this.router.navigate([ '/admin/moderation/video-blocks/list' ], { queryParams })
-  }
-  resetTableFilter () {
-    this.setTableFilter('')
-    this.setQueryParams('')
-    this.resetSearch()
  }
-  /* END Table filter functions */
  getIdentifier () {
    return 'VideoBlockListComponent'
@@ -151,7 +139,7 @@ export class VideoBlockListComponent extends RestTable implements OnInit, AfterV
    this.videoBlocklistService.unblockVideo(entry.video.id).subscribe(
      () => {
        this.notifier.success($localize`Video ${entry.video.name} unblocked.`)
-        this.loadData()
+        this.reloadData()
      },
      err => this.notifier.error(err.message)
@@ -169,7 +157,7 @@ export class VideoBlockListComponent extends RestTable implements OnInit, AfterV
    )
  }
-  protected loadData () {
+  protected reloadData () {
    this.videoBlocklistService.listBlocks({
      pagination: this.pagination,
      sort: this.sort,
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 d360c3c51..9d9283536 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
@@ -8,8 +8,9 @@
 <em i18n>This view also shows comments from muted accounts.</em>
 <p-table
-  [value]="comments" [lazy]="true" [paginator]="totalRecords > 0" [totalRecords]="totalRecords" [rows]="rowsPerPage" [rowsPerPageOptions]="rowsPerPageOptions"
+  [value]="comments" [paginator]="totalRecords > 0" [totalRecords]="totalRecords" [rows]="rowsPerPage" [rowsPerPageOptions]="rowsPerPageOptions"
-  [sortField]="sort.field" [sortOrder]="sort.order" (onLazyLoad)="loadLazy($event)" dataKey="id"
+  [sortField]="sort.field" [sortOrder]="sort.order" dataKey="id"
+  [lazy]="true" (onLazyLoad)="loadLazy($event)" [lazyLoadOnInit]="false"
  [showCurrentPageReport]="true" i18n-currentPageReportTemplate
  currentPageReportTemplate="Showing {{'{first}'}} to {{'{last}'}} of {{'{totalRecords}'}} comments"
  (onPage)="onPage($event)" [expandedRowKeys]="expandedRows"
@@ -26,25 +27,7 @@
      </div>
      <div class="ml-auto">
-        <div class="input-group has-feedback has-clear">
+        <my-advanced-input-filter [filters]="inputFilters" (search)="onSearch($event)"></my-advanced-input-filter>
-          <div class="input-group-prepend c-hand" ngbDropdown placement="bottom-left auto" container="body">
-            <div class="input-group-text" ngbDropdownToggle>
-              <span class="caret" aria-haspopup="menu" role="button"></span>
-            </div>
-            <div role="menu" ngbDropdownMenu>
-              <h6 class="dropdown-header" i18n>Advanced comments filters</h6>
-              <a [routerLink]="[ '/admin/moderation/video-comments/list' ]" [queryParams]="{ 'search': 'local:true' }" class="dropdown-item" i18n>Local comments</a>
-              <a [routerLink]="[ '/admin/moderation/video-comments/list' ]" [queryParams]="{ 'search': 'local:false' }" class="dropdown-item" i18n>Remote comments</a>
-            </div>
-          </div>
-          <input
-            type="text" name="table-filter" id="table-filter" i18n-placeholder placeholder="Filter..."
-            (keyup)="onSearch($event)"
-          >
-          <a class="glyphicon glyphicon-remove-sign form-control-feedback form-control-clear" (click)="resetTableFilter()"></a>
-          <span class="sr-only" i18n>Clear filters</span>
-        </div>
      </div>
    </div>
  </ng-template>
@@ -86,7 +69,7 @@
      <td>
        <a [href]="videoComment.account.localUrl" i18n-title title="Open account in a new tab" target="_blank" rel="noopener noreferrer">
          <div class="chip two-lines">
-            <my-account-avatar [account]="videoComment.account"></my-account-avatar>
+            <my-actor-avatar [account]="videoComment.account"></my-actor-avatar>
          <div>
              {{ videoComment.account.displayName }}
              <span>{{ videoComment.by }}</span>
diff --git a/client/src/app/+admin/moderation/video-comment-list/video-comment-list.component.scss b/client/src/app/+admin/moderation/video-comment-list/video-comment-list.component.scss
index c9262da09..a6f931e3b 100644
--- a/client/src/app/+admin/moderation/video-comment-list/video-comment-list.component.scss
+++ b/client/src/app/+admin/moderation/video-comment-list/video-comment-list.component.scss
@@ -11,23 +11,6 @@ my-global-icon {
  height: 24px;
 }
-.input-group {
-  @include peertube-input-group(300px);
-  .dropdown-toggle::after {
-    margin-left: 0;
-  }
-}
-.caption {
-  justify-content: flex-end;
-  input {
-    @include peertube-input-text(250px);
-    flex-grow: 1;
-  }
-}
 .video {
  display: flex;
  flex-direction: column;
@@ -49,7 +32,8 @@ my-global-icon {
      max-height: 22px;
    }
-    div, p {
+    div,
+    p {
      @include ellipsis;
    }
diff --git a/client/src/app/+admin/moderation/video-comment-list/video-comment-list.component.ts b/client/src/app/+admin/moderation/video-comment-list/video-comment-list.component.ts
index 63493d00d..e2ae993b0 100644
--- a/client/src/app/+admin/moderation/video-comment-list/video-comment-list.component.ts
+++ b/client/src/app/+admin/moderation/video-comment-list/video-comment-list.component.ts
@@ -2,6 +2,7 @@ import { SortMeta } from 'primeng/api'
 import { AfterViewInit, Component, OnInit } from '@angular/core'
 import { ActivatedRoute, Router } from '@angular/router'
 import { AuthService, ConfirmService, MarkdownService, Notifier, RestPagination, RestTable } from '@app/core'
+import { AdvancedInputFilter } from '@app/shared/shared-forms'
 import { DropdownAction } from '@app/shared/shared-main'
 import { BulkService } from '@app/shared/shared-moderation'
 import { VideoCommentAdmin, VideoCommentService } from '@app/shared/shared-video-comment'
@@ -12,9 +13,7 @@ import { FeedFormat, UserRight } from '@shared/models'
  templateUrl: './video-comment-list.component.html',
  styleUrls: [ '../../../shared/shared-moderation/moderation.scss', './video-comment-list.component.scss' ]
 })
-export class VideoCommentListComponent extends RestTable implements OnInit, AfterViewInit {
+export class VideoCommentListComponent extends RestTable implements OnInit {
-  baseRoute = '/admin/moderation/video-comments/list'
  comments: VideoCommentAdmin[]
  totalRecords = 0
  sort: SortMeta = { field: 'createdAt', order: -1 }
@@ -43,6 +42,17 @@ export class VideoCommentListComponent extends RestTable implements OnInit, Afte
  selectedComments: VideoCommentAdmin[] = []
  bulkCommentActions: DropdownAction<VideoCommentAdmin[]>[] = []
+  inputFilters: AdvancedInputFilter[] = [
+    {
+      queryParams: { 'search': 'local:true' },
+      label: $localize`Local comments`
+    },
+    {
+      queryParams: { 'search': 'local:false' },
+      label: $localize`Remote comments`
+    }
+  ]
  get authUser () {
    return this.auth.getUser()
  }
@@ -79,7 +89,6 @@ export class VideoCommentListComponent extends RestTable implements OnInit, Afte
  ngOnInit () {
    this.initialize()
-    this.listenToSearchChange()
    this.bulkCommentActions = [
      {
@@ -91,10 +100,6 @@ export class VideoCommentListComponent extends RestTable implements OnInit, Afte
    ]
  }
-  ngAfterViewInit () {
-    if (this.search) this.setTableFilter(this.search, false)
-  }
  getIdentifier () {
    return 'VideoCommentListComponent'
  }
@@ -107,7 +112,7 @@ export class VideoCommentListComponent extends RestTable implements OnInit, Afte
    return this.selectedComments.length !== 0
  }
-  protected loadData () {
+  protected reloadData () {
    this.videoCommentService.getAdminVideoComments({
      pagination: this.pagination,
      sort: this.sort,
@@ -135,7 +140,7 @@ export class VideoCommentListComponent extends RestTable implements OnInit, Afte
    this.videoCommentService.deleteVideoComments(commentArgs).subscribe(
      () => {
        this.notifier.success($localize`${commentArgs.length} comments deleted.`)
-        this.loadData()
+        this.reloadData()
      },
      err => this.notifier.error(err.message),
@@ -147,7 +152,7 @@ export class VideoCommentListComponent extends RestTable implements OnInit, Afte
  private deleteComment (comment: VideoCommentAdmin) {
    this.videoCommentService.deleteVideoComment(comment.video.id, comment.id)
      .subscribe(
-        () => this.loadData(),
+        () => this.reloadData(),
        err => this.notifier.error(err.message)
      )
diff --git a/client/src/app/+admin/plugins/plugin-list-installed/plugin-list-installed.component.html b/client/src/app/+admin/plugins/plugin-list-installed/plugin-list-installed.component.html
index 9cbec03a1..bc4c2ef88 100644
--- a/client/src/app/+admin/plugins/plugin-list-installed/plugin-list-installed.component.html
+++ b/client/src/app/+admin/plugins/plugin-list-installed/plugin-list-installed.component.html
@@ -23,13 +23,17 @@
        </a>
        <div class="buttons">
-          <my-edit-button *ngIf="!isTheme(plugin)" [routerLink]="getShowRouterLink(plugin)" label="Settings" i18n-label></my-edit-button>
+          <my-edit-button
+            *ngIf="!isTheme(plugin)" [routerLink]="getShowRouterLink(plugin)" label="Settings" i18n-label
-          <my-button class="update-button" *ngIf="isUpdateAvailable(plugin)" (click)="update(plugin)" [loading]="isUpdating(plugin)"
+            [responsiveLabel]="true"
-                     [label]="getUpdateLabel(plugin)" icon="refresh" [attr.disabled]="isUpdating(plugin)"
+          ></my-edit-button>
+          <my-button
+            class="update-button" *ngIf="isUpdateAvailable(plugin)" (click)="update(plugin)" [loading]="isUpdating(plugin)"
+            [label]="getUpdateLabel(plugin)" icon="refresh" [attr.disabled]="isUpdating(plugin)" [responsiveLabel]="true"
          ></my-button>
-          <my-delete-button (click)="uninstall(plugin)" label="Uninstall" i18n-label></my-delete-button>
+          <my-delete-button (click)="uninstall(plugin)" label="Uninstall" i18n-label [responsiveLabel]="true"></my-delete-button>
        </div>
      </div>
diff --git a/client/src/app/+admin/plugins/plugin-list-installed/plugin-list-installed.component.scss b/client/src/app/+admin/plugins/plugin-list-installed/plugin-list-installed.component.scss
index 9376e38b0..22d4a59ab 100644
--- a/client/src/app/+admin/plugins/plugin-list-installed/plugin-list-installed.component.scss
+++ b/client/src/app/+admin/plugins/plugin-list-installed/plugin-list-installed.component.scss
@@ -1,6 +1,6 @@
 @import '_variables';
 @import '_mixins';
-.update-button[disabled="true"] ::ng-deep .action-button {
+.update-button[disabled=true] ::ng-deep .action-button {
  cursor: default !important;
 }
diff --git a/client/src/app/+admin/plugins/plugin-search/plugin-search.component.html b/client/src/app/+admin/plugins/plugin-search/plugin-search.component.html
index 727633399..6900e8717 100644
--- a/client/src/app/+admin/plugins/plugin-search/plugin-search.component.html
+++ b/client/src/app/+admin/plugins/plugin-search/plugin-search.component.html
@@ -48,10 +48,15 @@
        <span *ngIf="plugin.installed" class="badge badge-success">Installed</span>
        <div class="buttons">
-          <my-edit-button *ngIf="plugin.installed === true && !isThemeSearch()" [routerLink]="getShowRouterLink(plugin)" label="Settings" i18n-label></my-edit-button>
+          <my-edit-button
+            *ngIf="plugin.installed === true && !isThemeSearch()" [routerLink]="getShowRouterLink(plugin)"
+            label="Settings" i18n-label [responsiveLabel]="true"
+          ></my-edit-button>
-          <my-button class="update-button" *ngIf="plugin.installed === false" (click)="install(plugin)" [loading]="isInstalling(plugin)"
+          <my-button
-                     label="Install" icon="cloud-download" [attr.disabled]="isInstalling(plugin)"
+            class="update-button" *ngIf="plugin.installed === false" (click)="install(plugin)"
+            [loading]="isInstalling(plugin)" label="Install" [responsiveLabel]="true"
+            icon="cloud-download" [attr.disabled]="isInstalling(plugin)"
          ></my-button>
        </div>
      </div>
diff --git a/client/src/app/+admin/plugins/plugin-show-installed/plugin-show-installed.component.scss b/client/src/app/+admin/plugins/plugin-show-installed/plugin-show-installed.component.scss
index 5ab6e5f1b..6b7b84e29 100644
--- a/client/src/app/+admin/plugins/plugin-show-installed/plugin-show-installed.component.scss
+++ b/client/src/app/+admin/plugins/plugin-show-installed/plugin-show-installed.component.scss
@@ -5,7 +5,8 @@ h2 {
  margin-bottom: 20px;
 }
-input[type=submit], button {
+input[type=submit],
+button {
  @include peertube-button;
  @include orange-button;
diff --git a/client/src/app/+admin/plugins/plugins.component.scss b/client/src/app/+admin/plugins/plugins.component.scss
deleted file mode 100644
index ce9825f53..000000000
--- a/client/src/app/+admin/plugins/plugins.component.scss
+++ /dev/null
@@ -1,28 +0,0 @@
-@import '_variables';
-@import '_mixins';
-@media screen and (max-width: $small-view) {
-  ::ng-deep .plugins .plugin .first-row {
-    flex-wrap: wrap;
-    .plugin-name,
-    .plugin-version,
-    .plugin-icon {
-      margin-bottom: 10px;
-    }
-    .buttons {
-      my-edit-button,
-      my-delete-button,
-      my-button {
-        .action-button {
-          padding: 0 13px;
-        }
-        .button-label {
-          display: none;
-        }
-      }
-    }
-  }
-}
diff --git a/client/src/app/+admin/plugins/plugins.component.ts b/client/src/app/+admin/plugins/plugins.component.ts
index 6ec6fa4a1..de06c0671 100644
--- a/client/src/app/+admin/plugins/plugins.component.ts
+++ b/client/src/app/+admin/plugins/plugins.component.ts
@@ -1,8 +1,7 @@
 import { Component } from '@angular/core'
 @Component({
-  templateUrl: './plugins.component.html',
+  templateUrl: './plugins.component.html'
-  styleUrls: [ './plugins.component.scss' ]
 })
 export class PluginsComponent {
 }
diff --git a/client/src/app/+admin/plugins/shared/plugin-list.component.scss b/client/src/app/+admin/plugins/shared/plugin-list.component.scss
index f59a01b74..47cb1e6e5 100644
--- a/client/src/app/+admin/plugins/shared/plugin-list.component.scss
+++ b/client/src/app/+admin/plugins/shared/plugin-list.component.scss
@@ -27,7 +27,7 @@
    my-global-icon {
      @include apply-svg-color(pvar(--greyForegroundColor));
-      &[iconName="npm"] {
+      &[iconName=npm] {
        @include fill-svg-color(pvar(--greyForegroundColor));
      }
    }
@@ -36,6 +36,7 @@
  .buttons {
    margin-left: auto;
    width: max-content;
    > *:not(:last-child) {
      margin-right: 10px;
    }
@@ -49,7 +50,7 @@
  justify-content: space-between;
  .description {
-    opacity: 0.8
+    opacity: 0.8;
  }
 }
@@ -57,3 +58,14 @@
  @include peertube-button-link;
  @include button-with-icon(21px, 0, -2px);
 }
+@media screen and (max-width: $small-view) {
+  .first-row {
+    flex-wrap: wrap;
+    .buttons {
+      flex-basis: 100%;
+      margin-top: 10px;
+    }
+  }
+}
diff --git a/client/src/app/+admin/system/jobs/jobs.component.scss b/client/src/app/+admin/system/jobs/jobs.component.scss
index 7c6159420..65ee6ec5f 100644
--- a/client/src/app/+admin/system/jobs/jobs.component.scss
+++ b/client/src/app/+admin/system/jobs/jobs.component.scss
@@ -51,7 +51,7 @@ pre {
 }
 .job-error {
-  color: red;
+  color: #ff0000;
 }
 .badge {
diff --git a/client/src/app/+admin/system/jobs/jobs.component.ts b/client/src/app/+admin/system/jobs/jobs.component.ts
index 43578eedd..29ba95c5c 100644
--- a/client/src/app/+admin/system/jobs/jobs.component.ts
+++ b/client/src/app/+admin/system/jobs/jobs.component.ts
@@ -86,7 +86,7 @@ export class JobsComponent extends RestTable implements OnInit {
  onJobStateOrTypeChanged () {
    this.pagination.start = 0
-    this.loadData()
+    this.reloadData()
    this.saveJobStateAndType()
  }
@@ -104,10 +104,10 @@ export class JobsComponent extends RestTable implements OnInit {
    this.jobs = []
    this.totalRecords = 0
-    this.loadData()
+    this.reloadData()
  }
-  protected loadData () {
+  protected reloadData () {
    let jobState = this.jobState as JobState
    if (this.jobState === 'all') jobState = null
diff --git a/client/src/app/+admin/system/logs/logs.component.scss b/client/src/app/+admin/system/logs/logs.component.scss
index 587a9795c..1a7c3be75 100644
--- a/client/src/app/+admin/system/logs/logs.component.scss
+++ b/client/src/app/+admin/system/logs/logs.component.scss
@@ -66,7 +66,7 @@
    ng-select,
    my-button {
      width: 100% !important;
-      margin-left: 0px !important;
+      margin-left: 0 !important;
      margin-bottom: 10px !important;
    }
@@ -85,7 +85,7 @@
      ng-select,
      my-button {
        width: 100% !important;
-        margin-left: 0px !important;
+        margin-left: 0 !important;
        margin-bottom: 10px !important;
      }
diff --git a/client/src/app/+admin/users/user-edit/user-edit.component.scss b/client/src/app/+admin/users/user-edit/user-edit.component.scss
index 8b0ac8783..145177fb9 100644
--- a/client/src/app/+admin/users/user-edit/user-edit.component.scss
+++ b/client/src/app/+admin/users/user-edit/user-edit.component.scss
@@ -37,7 +37,8 @@ my-select-custom-value {
  display: block;
 }
-input[type=submit], button {
+input[type=submit],
+button {
  @include peertube-button;
  @include orange-button;
diff --git a/client/src/app/+admin/users/user-edit/user-password.component.scss b/client/src/app/+admin/users/user-edit/user-password.component.scss
index 1f0d49227..66d15ee9c 100644
--- a/client/src/app/+admin/users/user-edit/user-password.component.scss
+++ b/client/src/app/+admin/users/user-edit/user-password.component.scss
@@ -7,7 +7,7 @@ input:not([type=submit]):not([type=checkbox]) {
  display: block;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
-  border-right: none;
+  border-right: 0;
 }
 input[type=submit] {
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 e114f3425..44d8a7e87 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
@@ -1,7 +1,7 @@
 <p-table
-  [value]="users" [lazy]="true" [paginator]="totalRecords > 0" [totalRecords]="totalRecords" [rows]="rowsPerPage" [rowsPerPageOptions]="rowsPerPageOptions"
+  [value]="users" [paginator]="totalRecords > 0" [totalRecords]="totalRecords" [rows]="rowsPerPage" [rowsPerPageOptions]="rowsPerPageOptions"
-  [sortField]="sort.field" [sortOrder]="sort.order" (onLazyLoad)="loadLazy($event)" dataKey="id" [resizableColumns]="true"
+  [sortField]="sort.field" [sortOrder]="sort.order"  dataKey="id" [resizableColumns]="true" [(selection)]="selectedUsers"
-  [(selection)]="selectedUsers"
+  [lazy]="true" (onLazyLoad)="loadLazy($event)" [lazyLoadOnInit]="false"
  [showCurrentPageReport]="true" i18n-currentPageReportTemplate
  currentPageReportTemplate="Showing {{'{first}'}} to {{'{last}'}} of {{'{totalRecords}'}} users"
  (onPage)="onPage($event)" [expandedRowKeys]="expandedRows"
@@ -22,24 +22,7 @@
      </div>
      <div class="ml-auto">
-        <div class="input-group has-feedback has-clear">
+        <my-advanced-input-filter [filters]="inputFilters" (search)="onSearch($event)"></my-advanced-input-filter>
-          <div class="input-group-prepend c-hand" ngbDropdown placement="bottom-left auto" container="body">
-            <div class="input-group-text" ngbDropdownToggle>
-              <span class="caret" aria-haspopup="menu" role="button"></span>
-            </div>
-            <div role="menu" ngbDropdownMenu>
-              <h6 class="dropdown-header" i18n>Advanced user filters</h6>
-              <a [routerLink]="[ '/admin/users/list' ]" [queryParams]="{ 'search': 'banned:true' }" class="dropdown-item" i18n>Banned users</a>
-            </div>
-          </div>
-          <input
-            type="text" name="table-filter" id="table-filter" i18n-placeholder placeholder="Filter..."
-            (keyup)="onSearch($event)"
-          >
-          <a class="glyphicon glyphicon-remove-sign form-control-feedback form-control-clear" (click)="resetTableFilter()"></a>
-          <span class="sr-only" i18n>Clear filters</span>
-        </div>
      </div>
    </div>
@@ -106,7 +89,7 @@
      <td *ngIf="isSelected('username')">
        <a i18n-title title="Open account in a new tab" target="_blank" rel="noopener noreferrer" [routerLink]="[ '/accounts/' + user.username ]">
          <div class="chip two-lines">
-            <my-account-avatar [account]="user?.account"></my-account-avatar>
+            <my-actor-avatar [account]="user?.account" size="32"></my-actor-avatar>
           <div>
              <span class="user-table-primary-text">{{ user.account.displayName }}</span>
              <span class="text-muted">{{ user.username }}</span>
diff --git a/client/src/app/+admin/users/user-list/user-list.component.scss b/client/src/app/+admin/users/user-list/user-list.component.scss
index 50080bad6..db4979a51 100644
--- a/client/src/app/+admin/users/user-list/user-list.component.scss
+++ b/client/src/app/+admin/users/user-list/user-list.component.scss
@@ -11,6 +11,7 @@ tr.banned > td {
 .table-email {
  @include disable-default-a-behaviour;
  color: pvar(--mainForegroundColor);
 }
@@ -24,18 +25,10 @@ tr.banned > td {
 .user-table-primary-text .glyphicon {
  font-size: 80%;
-  color: gray;
+  color: #808080;
  margin-left: 0.1rem;
 }
-.caption {
-  justify-content: space-between;
-  input {
-    @include peertube-input-text(250px);
-  }
-}
 p-tableCheckbox {
  position: relative;
  top: -2.5px;
@@ -55,18 +48,7 @@ my-global-icon {
 .progress {
  @include progressbar($small: true);
  width: auto;
  max-width: 100%;
 }
-.input-group {
-  @include peertube-input-group(300px);
-  input {
-    flex: 1;
-  }
-  .dropdown-toggle::after {
-    margin-left: 0;
-  }
-}
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 339e18206..1c60adf89 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
@@ -1,8 +1,9 @@
 import { SortMeta } from 'primeng/api'
 import { Component, OnInit, ViewChild } from '@angular/core'
-import { ActivatedRoute, Params, Router } from '@angular/router'
+import { ActivatedRoute, Router } from '@angular/router'
 import { AuthService, ConfirmService, Notifier, RestPagination, RestTable, ServerService, UserService } from '@app/core'
-import { Account, DropdownAction } from '@app/shared/shared-main'
+import { AdvancedInputFilter } from '@app/shared/shared-forms'
+import { DropdownAction } from '@app/shared/shared-main'
 import { UserBanModalComponent } from '@app/shared/shared-moderation'
 import { ServerConfig, User, UserRole } from '@shared/models'
@@ -22,15 +23,24 @@ export class UserListComponent extends RestTable implements OnInit {
  @ViewChild('userBanModal', { static: true }) userBanModal: UserBanModalComponent
  users: User[] = []
  totalRecords = 0
  sort: SortMeta = { field: 'createdAt', order: 1 }
  pagination: RestPagination = { count: this.rowsPerPage, start: 0 }
  highlightBannedUsers = false
  selectedUsers: User[] = []
  bulkUserActions: DropdownAction<User[]>[][] = []
  columns: { id: string, label: string }[]
+  inputFilters: AdvancedInputFilter[] = [
+    {
+      queryParams: { 'search': 'banned:true' },
+      label: $localize`Banned users`
+    }
+  ]
  private _selectedColumns: string[]
  private serverConfig: ServerConfig
@@ -68,7 +78,6 @@ export class UserListComponent extends RestTable implements OnInit {
        .subscribe(config => this.serverConfig = config)
    this.initialize()
-    this.listenToSearchChange()
    this.bulkUserActions = [
      [
@@ -160,7 +169,7 @@ export class UserListComponent extends RestTable implements OnInit {
  }
  onUserChanged () {
-    this.loadData()
+    this.reloadData()
  }
  async unbanUsers (users: User[]) {
@@ -171,7 +180,7 @@ export class UserListComponent extends RestTable implements OnInit {
        .subscribe(
          () => {
            this.notifier.success($localize`${users.length} users unbanned.`)
-            this.loadData()
+            this.reloadData()
          },
          err => this.notifier.error(err.message)
@@ -193,7 +202,7 @@ export class UserListComponent extends RestTable implements OnInit {
    this.userService.removeUser(users).subscribe(
      () => {
        this.notifier.success($localize`${users.length} users deleted.`)
-        this.loadData()
+        this.reloadData()
      },
      err => this.notifier.error(err.message)
@@ -204,7 +213,7 @@ export class UserListComponent extends RestTable implements OnInit {
    this.userService.updateUsers(users, { emailVerified: true }).subscribe(
      () => {
        this.notifier.success($localize`${users.length} users email set as verified.`)
-        this.loadData()
+        this.reloadData()
      },
      err => this.notifier.error(err.message)
@@ -215,7 +224,7 @@ export class UserListComponent extends RestTable implements OnInit {
    return this.selectedUsers.length !== 0
  }
-  protected loadData () {
+  protected reloadData () {
    this.selectedUsers = []
    this.userService.getUsers({
diff --git a/client/src/app/+login/login.component.scss b/client/src/app/+login/login.component.scss
index eddaff542..62ae722c3 100644
--- a/client/src/app/+login/login.component.scss
+++ b/client/src/app/+login/login.component.scss
@@ -33,7 +33,8 @@ input[type=email] {
  }
 }
-.create-an-account, .forgot-password-button {
+.create-an-account,
+.forgot-password-button {
  color: pvar(--mainForegroundColor);
  cursor: pointer;
  transition: opacity cubic-bezier(0.39, 0.575, 0.565, 1);
@@ -49,7 +50,7 @@ input[type=email] {
  justify-content: space-around;
  flex-wrap: wrap;
-  & > div {
+  > div {
    flex: 1 1;
  }
@@ -65,7 +66,8 @@ input[type=email] {
    form {
      margin: 0;
-      &, input {
+      &,
+      input {
        width: 100%;
      }
@@ -82,7 +84,8 @@ input[type=email] {
          color: var(--mainColor);
-          &:hover, &:active {
+          &:hover,
+          &:active {
            color: var(--mainHoverColor);
          }
        }
@@ -111,7 +114,7 @@ input[type=email] {
        min-width: 100px;
        &:hover {
-          background-color: rgba(209, 215, 224, 0.5)
+          background-color: rgba(209, 215, 224, 0.5);
        }
      }
    }
@@ -138,7 +141,7 @@ input[type=email] {
  }
 }
-@mixin columnReverseDisplay {
+@mixin column-reverse-display {
  flex-direction: column-reverse;
  .login-form-and-externals,
@@ -168,14 +171,14 @@ input[type=email] {
 @media screen and (max-width: breakpoint(md)) {
  .wrapper {
-    @include columnReverseDisplay();
+    @include column-reverse-display();
  }
 }
 @media screen and (max-width: breakpoint(md) + $menu-width) {
  :host-context(.main-col:not(.expanded)) {
    .wrapper {
-      @include columnReverseDisplay();
+      @include column-reverse-display();
    }
  }
 }
diff --git a/client/src/app/+my-account/my-account-abuses/my-account-abuses-list.component.html b/client/src/app/+my-account/my-account-abuses/my-account-abuses-list.component.html
index 59ca61be6..e83b59019 100644
--- a/client/src/app/+my-account/my-account-abuses/my-account-abuses-list.component.html
+++ b/client/src/app/+my-account/my-account-abuses/my-account-abuses-list.component.html
@@ -3,4 +3,4 @@
  <ng-container i18n>Reports</ng-container>
 </h1>
-<my-abuse-list-table viewType="user" baseRoute="/my-account/abuses"></my-abuse-list-table>
+<my-abuse-list-table viewType="user"></my-abuse-list-table>
diff --git a/client/src/app/+my-account/my-account-applications/my-account-applications.component.scss b/client/src/app/+my-account/my-account-applications/my-account-applications.component.scss
index 704132c03..c1e1f2432 100644
--- a/client/src/app/+my-account/my-account-applications/my-account-applications.component.scss
+++ b/client/src/app/+my-account/my-account-applications/my-account-applications.component.scss
@@ -21,7 +21,7 @@ input[type=submit] {
  display: flex;
  margin-left: auto;
-  & + .form-error {
+  + .form-error {
    display: inline;
    margin-left: 5px;
  }
diff --git a/client/src/app/+my-account/my-account-notifications/my-account-notifications.component.scss b/client/src/app/+my-account/my-account-notifications/my-account-notifications.component.scss
index 035fa2b27..abf52504a 100644
--- a/client/src/app/+my-account/my-account-notifications/my-account-notifications.component.scss
+++ b/client/src/app/+my-account/my-account-notifications/my-account-notifications.component.scss
@@ -32,7 +32,8 @@ my-user-notifications {
  .header {
    flex-direction: column;
-    & >:first-child, .peertube-select-container {
+    > :first-child,
+    .peertube-select-container {
      margin-bottom: 15px;
    }
diff --git a/client/src/app/+my-account/my-account-settings/my-account-danger-zone/my-account-danger-zone.component.scss b/client/src/app/+my-account/my-account-settings/my-account-danger-zone/my-account-danger-zone.component.scss
index d79ff690b..64f960964 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-danger-zone/my-account-danger-zone.component.scss
+++ b/client/src/app/+my-account/my-account-settings/my-account-danger-zone/my-account-danger-zone.component.scss
@@ -7,4 +7,4 @@
    @include danger-button;
    @include disable-outline;
  }
-}
-\ No newline at end of file
+}
diff --git a/client/src/app/+my-account/my-account-settings/my-account-notification-preferences/my-account-notification-preferences.component.scss b/client/src/app/+my-account/my-account-settings/my-account-notification-preferences/my-account-notification-preferences.component.scss
index b06d8b16d..42319400d 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-notification-preferences/my-account-notification-preferences.component.scss
+++ b/client/src/app/+my-account/my-account-settings/my-account-notification-preferences/my-account-notification-preferences.component.scss
@@ -10,7 +10,7 @@
    font-size: 16px;
  }
-  & > div {
+  > div {
    padding: 10px;
    &:first-child {
diff --git a/client/src/app/+my-account/my-account.component.scss b/client/src/app/+my-account/my-account.component.scss
index a5bb499b4..b32bc84e7 100644
--- a/client/src/app/+my-account/my-account.component.scss
+++ b/client/src/app/+my-account/my-account.component.scss
@@ -2,12 +2,12 @@
 @import '_mixins';
 .row {
+  @include sub-menu-h1;
  flex-direction: column;
  width: 100%;
-  & > my-top-menu-dropdown:nth-child(1) {
+  > my-top-menu-dropdown:nth-child(1) {
    flex-grow: 1;
  }
-  @include sub-menu-h1;
 }
diff --git a/client/src/app/+my-account/my-account.module.ts b/client/src/app/+my-account/my-account.module.ts
index 050cd4b34..4081e4f01 100644
--- a/client/src/app/+my-account/my-account.module.ts
+++ b/client/src/app/+my-account/my-account.module.ts
@@ -3,13 +3,14 @@ import { TableModule } from 'primeng/table'
 import { DragDropModule } from '@angular/cdk/drag-drop'
 import { NgModule } from '@angular/core'
 import { SharedAbuseListModule } from '@app/shared/shared-abuse-list'
-import { SharedActorImageModule } from '@app/shared/shared-actor-image'
+import { SharedActorImageEditModule } from '@app/shared/shared-actor-image-edit'
 import { SharedFormModule } from '@app/shared/shared-forms'
 import { SharedGlobalIconModule } from '@app/shared/shared-icons'
 import { SharedMainModule } from '@app/shared/shared-main'
 import { SharedModerationModule } from '@app/shared/shared-moderation'
 import { SharedShareModal } from '@app/shared/shared-share-modal'
 import { SharedUserInterfaceSettingsModule } from '@app/shared/shared-user-settings'
+import { SharedActorImageModule } from '../shared/shared-actor-image/shared-actor-image.module'
 import { MyAccountAbusesListComponent } from './my-account-abuses/my-account-abuses-list.component'
 import { MyAccountApplicationsComponent } from './my-account-applications/my-account-applications.component'
 import { MyAccountBlocklistComponent } from './my-account-blocklist/my-account-blocklist.component'
@@ -23,7 +24,6 @@ import { MyAccountNotificationPreferencesComponent } from './my-account-settings
 import { MyAccountProfileComponent } from './my-account-settings/my-account-profile/my-account-profile.component'
 import { MyAccountSettingsComponent } from './my-account-settings/my-account-settings.component'
 import { MyAccountComponent } from './my-account.component'
-import { SharedAccountAvatarModule } from '../shared/shared-account-avatar/shared-account-avatar.module'
 @NgModule({
  imports: [
@@ -40,8 +40,8 @@ import { SharedAccountAvatarModule } from '../shared/shared-account-avatar/share
    SharedGlobalIconModule,
    SharedAbuseListModule,
    SharedShareModal,
-    SharedAccountAvatarModule,
+    SharedActorImageModule,
-    SharedActorImageModule
+    SharedActorImageEditModule
  ],
  declarations: [
diff --git a/client/src/app/+my-library/+my-video-channels/my-video-channel-edit.component.scss b/client/src/app/+my-library/+my-video-channels/my-video-channel-edit.component.scss
index 22de103d1..667726c22 100644
--- a/client/src/app/+my-library/+my-video-channels/my-video-channel-edit.component.scss
+++ b/client/src/app/+my-library/+my-video-channels/my-video-channel-edit.component.scss
@@ -66,7 +66,8 @@ textarea {
    width: auto !important;
  }
-  label[for=name] + div, textarea {
+  label[for=name] + div,
+  textarea {
    width: 100%;
  }
 }
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 b704a1cc6..e41cbe921 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
@@ -1,18 +1,11 @@
 <h1>
-  <span>
+  <my-global-icon iconName="channel" aria-hidden="true"></my-global-icon>
-    <my-global-icon iconName="channel" aria-hidden="true"></my-global-icon>
+  <ng-container i18n>My channels</ng-container>
-    <ng-container i18n>My channels</ng-container>
+  <span class="badge badge-secondary">{{ totalItems }}</span>
-    <span class="badge badge-secondary">{{ totalItems }}</span>
-  </span>
 </h1>
 <div class="video-channels-header d-flex justify-content-between">
-  <div class="has-feedback has-clear">
+  <my-advanced-input-filter (search)="onSearch($event)"></my-advanced-input-filter>
-    <input type="text" placeholder="Search your channels" i18n-placeholder [(ngModel)]="channelsSearch"
-      (ngModelChange)="onChannelsSearchChanged()" />
-    <a class="glyphicon glyphicon-remove-sign form-control-feedback form-control-clear" (click)="resetSearch()"></a>
-    <span class="sr-only" i18n>Clear filters</span>
-  </div>
  <a class="create-button" routerLink="create">
    <my-global-icon iconName="add" aria-hidden="true"></my-global-icon>
@@ -20,11 +13,11 @@
  </a>
 </div>
+<div class="no-results" i18n *ngIf="totalItems === 0">No channel found.</div>
 <div class="video-channels">
  <div *ngFor="let videoChannel of videoChannels; let i = index" class="video-channel">
-    <a [routerLink]="[ '/video-channels', videoChannel.nameWithHost ]">
+    <my-actor-avatar [channel]="videoChannel" [internalHref]="[ '/video-channels', videoChannel.nameWithHost ]"></my-actor-avatar>
-      <img [src]="videoChannel.avatarUrl" alt="Avatar" />
-    </a>
    <div class="video-channel-info">
      <a [routerLink]="[ '/video-channels', videoChannel.nameWithHost ]" class="video-channel-names" i18n-title title="Channel page">
diff --git a/client/src/app/+my-library/+my-video-channels/my-video-channels.component.scss b/client/src/app/+my-library/+my-video-channels/my-video-channels.component.scss
index 8804fa95c..191c5169d 100644
--- a/client/src/app/+my-library/+my-video-channels/my-video-channels.component.scss
+++ b/client/src/app/+my-library/+my-video-channels/my-video-channels.component.scss
@@ -1,6 +1,11 @@
 @import '_variables';
 @import '_mixins';
+h1 my-global-icon {
+  position: relative;
+  top: -2px;
+}
 .create-button {
  @include create-button;
 }
@@ -9,10 +14,8 @@ input[type=text] {
  @include peertube-input-text(300px);
 }
-::ng-deep .action-button {
+my-edit-button {
-  &.action-button-edit {
+  margin-right: 10px;
-    margin-right: 10px;
-  }
 }
 .video-channel {
@@ -20,40 +23,40 @@ input[type=text] {
  padding-bottom: 0;
-  img {
+  my-actor-avatar {
-    @include channel-avatar(80px);
+    @include actor-avatar-size(80px);
    margin-right: 10px;
  }
+}
-  .video-channel-info {
+.video-channel-info {
-    flex-grow: 1;
+  flex-grow: 1;
+}
-    a.video-channel-names {
-      @include disable-default-a-behaviour;
-      width: fit-content;
-      display: flex;
-      align-items: baseline;
-      color: pvar(--mainForegroundColor);
-      .video-channel-display-name {
-        font-weight: $font-semibold;
-        font-size: 18px;
-      }
-      .video-channel-name {
-        font-size: 14px;
-        color: $grey-actor-name;
-        margin-left: 5px;
-      }
-    }
-  }
-  .video-channel-buttons {
+.video-channel-names {
-    margin-top: 10px;
+  @include disable-default-a-behaviour;
-    min-width: 190px;
-  }
+  width: fit-content;
+  display: flex;
+  align-items: baseline;
+  color: pvar(--mainForegroundColor);
+}
+.video-channel-display-name {
+  font-weight: $font-semibold;
+  font-size: 18px;
+}
+.video-channel-name {
+  font-size: 14px;
+  color: $grey-actor-name;
+  margin-left: 5px;
+}
+.video-channel-buttons {
+  margin-top: 10px;
+  min-width: 190px;
 }
 ::ng-deep .chartjs-render-monitor {
@@ -73,21 +76,6 @@ input[type=text] {
  .video-channel {
    padding-bottom: 10px;
-    .video-channel-info {
-      padding-bottom: 10px;
-      text-align: center;
-      .video-channel-names {
-        flex-direction: column;
-        align-items: center !important;
-        margin: auto;
-        .video-channel-name {
-          margin-left: 0px !important;
-        }
-      }
-    }
    img {
      margin-right: 0;
    }
@@ -96,6 +84,21 @@ input[type=text] {
      align-self: center;
    }
  }
+  .video-channel-info {
+    padding-bottom: 10px;
+    text-align: center;
+  }
+  .video-channel-names {
+    flex-direction: column;
+    align-items: center !important;
+    margin: auto;
+  }
+  .video-channel-name {
+    margin-left: 0 !important;
+  }
 }
 @media screen and (max-width: $mobile-view) {
diff --git a/client/src/app/+my-library/+my-video-channels/my-video-channels.component.ts b/client/src/app/+my-library/+my-video-channels/my-video-channels.component.ts
index f6ba50a48..9e3bf35b4 100644
--- a/client/src/app/+my-library/+my-video-channels/my-video-channels.component.ts
+++ b/client/src/app/+my-library/+my-video-channels/my-video-channels.component.ts
@@ -1,29 +1,26 @@
 import { ChartData } from 'chart.js'
 import { max, maxBy, min, minBy } from 'lodash-es'
-import { Subject } from 'rxjs'
+import { mergeMap } from 'rxjs/operators'
-import { debounceTime, mergeMap } from 'rxjs/operators'
+import { Component } from '@angular/core'
-import { Component, OnInit } from '@angular/core'
+import { AuthService, ConfirmService, Notifier, ScreenService } from '@app/core'
-import { AuthService, ConfirmService, Notifier, ScreenService, User } from '@app/core'
 import { VideoChannel, VideoChannelService } from '@app/shared/shared-main'
 @Component({
  templateUrl: './my-video-channels.component.html',
  styleUrls: [ './my-video-channels.component.scss' ]
 })
-export class MyVideoChannelsComponent implements OnInit {
+export class MyVideoChannelsComponent {
  totalItems: number
  videoChannels: VideoChannel[] = []
  videoChannelsChartData: ChartData[]
  videoChannelsMinimumDailyViews = 0
  videoChannelsMaximumDailyViews: number
-  channelsSearch: string
-  channelsSearchChanged = new Subject<string>()
  chartOptions: any
-  private user: User
+  search: string
  constructor (
    private authService: AuthService,
@@ -31,31 +28,15 @@ export class MyVideoChannelsComponent implements OnInit {
    private confirmService: ConfirmService,
    private videoChannelService: VideoChannelService,
    private screenService: ScreenService
-    ) {}
+  ) {}
-  ngOnInit () {
-    this.user = this.authService.getUser()
-    this.loadVideoChannels()
-    this.channelsSearchChanged
-      .pipe(debounceTime(500))
-      .subscribe(() => {
-        this.loadVideoChannels()
-      })
-  }
  get isInSmallView () {
    return this.screenService.isInSmallView()
  }
-  resetSearch () {
+  onSearch (search: string) {
-    this.channelsSearch = ''
+    this.search = search
-    this.onChannelsSearchChanged()
+    this.loadVideoChannels()
-  }
-  onChannelsSearchChanged () {
-    this.channelsSearchChanged.next()
  }
  async deleteVideoChannel (videoChannel: VideoChannel) {
@@ -85,8 +66,11 @@ channel with the same name (${videoChannel.name})!`,
  private loadVideoChannels () {
    this.authService.userInformationLoaded
-        .pipe(mergeMap(() => this.videoChannelService.listAccountVideoChannels(this.user.account, null, true, this.channelsSearch)))
+        .pipe(mergeMap(() => {
-        .subscribe(res => {
+          const user = this.authService.getUser()
+          return this.videoChannelService.listAccountVideoChannels(user.account, null, true, this.search)
+        })).subscribe(res => {
          this.videoChannels = res.data
          this.totalItems = res.total
diff --git a/client/src/app/+my-library/+my-video-channels/my-video-channels.module.ts b/client/src/app/+my-library/+my-video-channels/my-video-channels.module.ts
index 53557ca02..c775bfdee 100644
--- a/client/src/app/+my-library/+my-video-channels/my-video-channels.module.ts
+++ b/client/src/app/+my-library/+my-video-channels/my-video-channels.module.ts
@@ -1,6 +1,6 @@
 import { ChartModule } from 'primeng/chart'
 import { NgModule } from '@angular/core'
-import { SharedActorImageModule } from '@app/shared/shared-actor-image'
+import { SharedActorImageEditModule } from '@app/shared/shared-actor-image-edit'
 import { SharedFormModule } from '@app/shared/shared-forms'
 import { SharedGlobalIconModule } from '@app/shared/shared-icons'
 import { SharedMainModule } from '@app/shared/shared-main'
@@ -8,6 +8,7 @@ import { MyVideoChannelCreateComponent } from './my-video-channel-create.compone
 import { MyVideoChannelUpdateComponent } from './my-video-channel-update.component'
 import { MyVideoChannelsRoutingModule } from './my-video-channels-routing.module'
 import { MyVideoChannelsComponent } from './my-video-channels.component'
+import { SharedActorImageModule } from '@app/shared/shared-actor-image/shared-actor-image.module'
 @NgModule({
  imports: [
@@ -18,6 +19,7 @@ import { MyVideoChannelsComponent } from './my-video-channels.component'
    SharedMainModule,
    SharedFormModule,
    SharedGlobalIconModule,
+    SharedActorImageEditModule,
    SharedActorImageModule
  ],
diff --git a/client/src/app/+my-library/my-history/my-history.component.html b/client/src/app/+my-library/my-history/my-history.component.html
index 9dec64645..45ca37e0d 100644
--- a/client/src/app/+my-library/my-history/my-history.component.html
+++ b/client/src/app/+my-library/my-history/my-history.component.html
@@ -5,14 +5,7 @@
 <div class="top-buttons">
  <div class="search-wrapper">
-    <div class="input-group has-feedback has-clear">
+    <my-advanced-input-filter (search)="onSearch($event)"></my-advanced-input-filter>
-      <input
-        type="text" name="history-search" id="history-search" i18n-placeholder placeholder="Search your history"
-        (keyup)="onSearch($event)"
-      >
-      <a class="glyphicon glyphicon-remove-sign form-control-feedback form-control-clear" (click)="resetSearch()"></a>
-      <span class="sr-only" i18n>Clear filters</span>
-    </div>
  </div>
  <div class="history-switch">
@@ -26,14 +19,15 @@
  </button>
 </div>
+<my-videos-selection
-<div class="no-history" i18n *ngIf="hasDoneFirstQuery && videos.length === 0">You don't have any video in your watch history yet.</div>
+  [pagination]="pagination"
+  [(videosModel)]="videos"
-<div myInfiniteScroller (nearOfBottom)="onNearOfBottom()" [autoInit]="true" [dataObservable]="onDataSubject.asObservable()" class="videos">
+  [miniatureDisplayOptions]="miniatureDisplayOptions"
-  <div class="video" *ngFor="let video of videos">
+  [titlePage]="titlePage"
-    <my-video-miniature
+  [getVideosObservableFunction]="getVideosObservableFunction"
-      [video]="video" [displayAsRow]="true"
+  [user]="user"
-      (videoRemoved)="removeVideoFromArray(video)" (videoBlocked)="removeVideoFromArray(video)"
+  [loadOnInit]="false"
-    ></my-video-miniature>
+  i18n-noResultMessage noResultMessage="You don't have any video in your watch history yet."
-  </div>
+  [enableSelection]="false"
-</div>
+  #videosSelection
+></my-videos-selection>
diff --git a/client/src/app/+my-library/my-history/my-history.component.scss b/client/src/app/+my-library/my-history/my-history.component.scss
index af4a34b4b..28b809f71 100644
--- a/client/src/app/+my-library/my-history/my-history.component.scss
+++ b/client/src/app/+my-library/my-history/my-history.component.scss
@@ -39,12 +39,12 @@
  }
  .delete-history {
-    grid-column: 4;
    @include peertube-button;
    @include grey-button;
    @include button-with-icon;
+    grid-column: 4;
    font-size: 15px;
  }
 }
diff --git a/client/src/app/+my-library/my-history/my-history.component.ts b/client/src/app/+my-library/my-history/my-history.component.ts
index 1695bd7ad..ad83db7ab 100644
--- a/client/src/app/+my-library/my-history/my-history.component.ts
+++ b/client/src/app/+my-library/my-history/my-history.component.ts
@@ -1,36 +1,55 @@
-import { Component, ComponentFactoryResolver, OnDestroy, OnInit } from '@angular/core'
+import { Subject } from 'rxjs'
+import { tap } from 'rxjs/operators'
+import { Component, ComponentFactoryResolver, OnInit, ViewChild } from '@angular/core'
 import { ActivatedRoute, Router } from '@angular/router'
 import {
  AuthService,
  ComponentPagination,
  ConfirmService,
+  DisableForReuseHook,
  LocalStorageService,
  Notifier,
  ScreenService,
  ServerService,
+  User,
  UserService
 } from '@app/core'
 import { immutableAssign } from '@app/helpers'
-import { UserHistoryService } from '@app/shared/shared-main'
+import { UserHistoryService, Video } from '@app/shared/shared-main'
-import { AbstractVideoList } from '@app/shared/shared-video-miniature'
+import { MiniatureDisplayOptions, VideosSelectionComponent } from '@app/shared/shared-video-miniature'
-import { Subject } from 'rxjs'
-import { debounceTime, tap, distinctUntilChanged } from 'rxjs/operators'
 @Component({
  templateUrl: './my-history.component.html',
  styleUrls: [ './my-history.component.scss' ]
 })
-export class MyHistoryComponent extends AbstractVideoList implements OnInit, OnDestroy {
+export class MyHistoryComponent implements OnInit, DisableForReuseHook {
+  @ViewChild('videosSelection', { static: true }) videosSelection: VideosSelectionComponent
  titlePage: string
  pagination: ComponentPagination = {
    currentPage: 1,
    itemsPerPage: 5,
    totalItems: null
  }
  videosHistoryEnabled: boolean
-  search: string
-  protected searchStream: Subject<string>
+  miniatureDisplayOptions: MiniatureDisplayOptions = {
+    date: true,
+    views: true,
+    by: true,
+    privacyLabel: false,
+    privacyText: true,
+    state: true,
+    blacklistInfo: true
+  }
+  getVideosObservableFunction = this.getVideosObservable.bind(this)
+  user: User
+  videos: Video[] = []
+  search: string
  constructor (
    protected router: Router,
@@ -45,45 +64,31 @@ export class MyHistoryComponent extends AbstractVideoList implements OnInit, OnD
    private userHistoryService: UserHistoryService,
    protected cfr: ComponentFactoryResolver
  ) {
-    super()
    this.titlePage = $localize`My watch history`
  }
  ngOnInit () {
-    super.ngOnInit()
+    this.user = this.authService.getUser()
    this.authService.userInformationLoaded
-      .subscribe(() => {
+      .subscribe(() => this.videosHistoryEnabled = this.user.videosHistoryEnabled)
-        this.videosHistoryEnabled = this.authService.getUser().videosHistoryEnabled
+  }
-      })
-    this.searchStream = new Subject()
-    this.searchStream
+  disableForReuse () {
-      .pipe(
+    this.videosSelection.disableForReuse()
-        debounceTime(400),
-        distinctUntilChanged()
-      )
-      .subscribe(search => {
-        this.search = search
-        this.reloadVideos()
-      })
  }
-  onSearch (event: Event) {
+  enabledForReuse () {
-    const target = event.target as HTMLInputElement
+    this.videosSelection.enabledForReuse()
-    this.searchStream.next(target.value)
  }
-  resetSearch () {
+  reloadData () {
-    const searchInput = document.getElementById('history-search') as HTMLInputElement
+    this.videosSelection.reloadVideos()
-    searchInput.value = ''
-    this.searchStream.next('')
  }
-  ngOnDestroy () {
+  onSearch (search: string) {
-    super.ngOnDestroy()
+    this.search = search
+    this.reloadData()
  }
  getVideosObservable (page: number) {
@@ -129,7 +134,7 @@ export class MyHistoryComponent extends AbstractVideoList implements OnInit, OnD
          () => {
            this.notifier.success($localize`Videos history deleted`)
-            this.reloadVideos()
+            this.reloadData()
          },
          err => this.notifier.error(err.message)
diff --git a/client/src/app/+my-library/my-library.component.scss b/client/src/app/+my-library/my-library.component.scss
index a5bb499b4..b32bc84e7 100644
--- a/client/src/app/+my-library/my-library.component.scss
+++ b/client/src/app/+my-library/my-library.component.scss
@@ -2,12 +2,12 @@
 @import '_mixins';
 .row {
+  @include sub-menu-h1;
  flex-direction: column;
  width: 100%;
-  & > my-top-menu-dropdown:nth-child(1) {
+  > my-top-menu-dropdown:nth-child(1) {
    flex-grow: 1;
  }
-  @include sub-menu-h1;
 }
diff --git a/client/src/app/+my-library/my-library.module.ts b/client/src/app/+my-library/my-library.module.ts
index a1d706f0b..264ad03f7 100644
--- a/client/src/app/+my-library/my-library.module.ts
+++ b/client/src/app/+my-library/my-library.module.ts
@@ -26,7 +26,7 @@ import { MyVideoPlaylistUpdateComponent } from './my-video-playlists/my-video-pl
 import { MyVideoPlaylistsComponent } from './my-video-playlists/my-video-playlists.component'
 import { VideoChangeOwnershipComponent } from './my-videos/modals/video-change-ownership.component'
 import { MyVideosComponent } from './my-videos/my-videos.component'
-import { SharedAccountAvatarModule } from '../shared/shared-account-avatar/shared-account-avatar.module'
+import { SharedActorImageModule } from '../shared/shared-actor-image/shared-actor-image.module'
 @NgModule({
  imports: [
@@ -47,7 +47,7 @@ import { SharedAccountAvatarModule } from '../shared/shared-account-avatar/share
    SharedAbuseListModule,
    SharedShareModal,
    SharedVideoLiveModule,
-    SharedAccountAvatarModule
+    SharedActorImageModule
  ],
  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 d0eff0521..4c02c78fc 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 @@
      <td>
        <a [href]="videoChangeOwnership.initiatorAccount.url" i18n-title title="Open account in a new tab" target="_blank" rel="noopener noreferrer">
          <div class="chip two-lines">
-            <my-account-avatar [account]="videoChangeOwnership.initiatorAccount"></my-account-avatar>
+            <my-actor-avatar [account]="videoChangeOwnership.initiatorAccount"></my-actor-avatar>
            <div>
              {{ videoChangeOwnership.initiatorAccount.displayName }}
              <span class="text-muted">{{ videoChangeOwnership.initiatorAccount.nameWithHost }}</span>
diff --git a/client/src/app/+my-library/my-ownership/my-ownership.component.scss b/client/src/app/+my-library/my-ownership/my-ownership.component.scss
index 7cac9c9f3..dfc8fc99e 100644
--- a/client/src/app/+my-library/my-ownership/my-ownership.component.scss
+++ b/client/src/app/+my-library/my-ownership/my-ownership.component.scss
@@ -13,15 +13,15 @@
  display: inline-flex;
  .video-table-video-image {
-    @include miniature-thumbnail;
    $image-height: 45px;
+    @include miniature-thumbnail;
    height: $image-height;
    width: #{(16/9) * $image-height};
    margin-right: 0.5rem;
    border-radius: 2px;
-    border: none;
+    border: 0;
    background: transparent;
    display: inline-flex;
    justify-content: center;
@@ -60,7 +60,7 @@
    div .glyphicon {
      font-size: 80%;
-      color: gray;
+      color: #808080;
      margin-left: 0.1rem;
    }
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 a938023b4..aaf028474 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
@@ -48,18 +48,18 @@ export class MyOwnershipComponent extends RestTable implements OnInit {
  }
  accepted () {
-    this.loadData()
+    this.reloadData()
  }
  refuse (videoChangeOwnership: VideoChangeOwnership) {
    this.videoOwnershipService.refuseOwnership(videoChangeOwnership.id)
      .subscribe(
-        () => this.loadData(),
+        () => this.reloadData(),
        err => this.notifier.error(err.message)
      )
  }
-  protected loadData () {
+  protected reloadData () {
    return this.videoOwnershipService.getOwnershipChanges(this.pagination, this.sort)
      .subscribe(
        resultList => {
diff --git a/client/src/app/+my-library/my-subscriptions/my-subscriptions.component.html b/client/src/app/+my-library/my-subscriptions/my-subscriptions.component.html
index ff448ad87..f91cebacf 100644
--- a/client/src/app/+my-library/my-subscriptions/my-subscriptions.component.html
+++ b/client/src/app/+my-library/my-subscriptions/my-subscriptions.component.html
@@ -7,21 +7,14 @@
 </h1>
 <div class="video-subscriptions-header">
-  <div class="has-feedback has-clear">
+  <my-advanced-input-filter (search)="onSearch($event)"></my-advanced-input-filter>
-    <input type="text" placeholder="Search your subscriptions" i18n-placeholder [(ngModel)]="subscriptionsSearch"
-      (ngModelChange)="onSubscriptionsSearchChanged()" />
-    <a class="glyphicon glyphicon-remove-sign form-control-feedback form-control-clear" (click)="resetSearch()"></a>
-    <span class="sr-only" i18n>Clear filters</span>
-  </div>
 </div>
 <div class="no-results" i18n *ngIf="pagination.totalItems === 0">You don't have any subscription yet.</div>
 <div class="video-channels" myInfiniteScroller [autoInit]="true" (nearOfBottom)="onNearOfBottom()" [dataObservable]="onDataSubject.asObservable()">
  <div *ngFor="let videoChannel of videoChannels" class="video-channel">
-    <a [routerLink]="[ '/video-channels', videoChannel.nameWithHost ]">
+    <my-actor-avatar [channel]="videoChannel" [internalHref]="[ '/video-channels', videoChannel.nameWithHost ]"></my-actor-avatar>
-      <img [src]="videoChannel.avatarUrl" alt="Avatar" />
-    </a>
    <div class="video-channel-info">
      <a [routerLink]="[ '/video-channels', videoChannel.nameWithHost ]" class="video-channel-names" i18n-title title="Channel page">
@@ -33,7 +26,8 @@
      <a [routerLink]="[ '/accounts', videoChannel.ownerBy ]" i18n-title title="Owner account page" class="actor-owner">
        <span i18n>Created by {{ videoChannel.ownerBy }}</span>
-        <img [src]="videoChannel.ownerAvatarUrl" alt="Owner account avatar" />
+        <my-actor-avatar [account]="videoChannel.ownerAccount" size="18"></my-actor-avatar>
      </a>
    </div>
diff --git a/client/src/app/+my-library/my-subscriptions/my-subscriptions.component.scss b/client/src/app/+my-library/my-subscriptions/my-subscriptions.component.scss
index 3c1a4d2ad..6c1ddf716 100644
--- a/client/src/app/+my-library/my-subscriptions/my-subscriptions.component.scss
+++ b/client/src/app/+my-library/my-subscriptions/my-subscriptions.component.scss
@@ -8,8 +8,8 @@ input[type=text] {
 .video-channel {
  @include row-blocks;
-  img {
+  > my-actor-avatar {
-    @include channel-avatar(80px);
+    @include actor-avatar-size(80px);
    margin-right: 10px;
  }
@@ -40,13 +40,25 @@ input[type=text] {
 }
 .actor-owner {
-  @include actor-owner;
+  @include disable-default-a-behaviour;
+  font-size: 13px;
+  color: pvar(--mainForegroundColor);
-  margin-top: 0;
+  span:hover {
+    opacity: 0.8;
+  }
+  my-actor-avatar {
+    margin-left: 7px;
+    display: inline-block;
+    vertical-align: top;
+  }
 }
 .video-subscriptions-header {
  margin-bottom: 30px;
+  display: flex;
 }
 @media screen and (max-width: $small-view) {
diff --git a/client/src/app/+my-library/my-subscriptions/my-subscriptions.component.ts b/client/src/app/+my-library/my-subscriptions/my-subscriptions.component.ts
index 3b748eccf..1f4a931a0 100644
--- a/client/src/app/+my-library/my-subscriptions/my-subscriptions.component.ts
+++ b/client/src/app/+my-library/my-subscriptions/my-subscriptions.component.ts
@@ -1,6 +1,5 @@
 import { Subject } from 'rxjs'
-import { debounceTime } from 'rxjs/operators'
+import { Component } from '@angular/core'
-import { Component, OnInit } from '@angular/core'
 import { ComponentPagination, Notifier } from '@app/core'
 import { VideoChannel } from '@app/shared/shared-main'
 import { UserSubscriptionService } from '@app/shared/shared-user-subscription'
@@ -9,7 +8,7 @@ import { UserSubscriptionService } from '@app/shared/shared-user-subscription'
  templateUrl: './my-subscriptions.component.html',
  styleUrls: [ './my-subscriptions.component.scss' ]
 })
-export class MySubscriptionsComponent implements OnInit {
+export class MySubscriptionsComponent {
  videoChannels: VideoChannel[] = []
  pagination: ComponentPagination = {
@@ -20,34 +19,13 @@ export class MySubscriptionsComponent implements OnInit {
  onDataSubject = new Subject<any[]>()
-  subscriptionsSearch: string
+  search: string
-  subscriptionsSearchChanged = new Subject<string>()
  constructor (
    private userSubscriptionService: UserSubscriptionService,
    private notifier: Notifier
  ) {}
-  ngOnInit () {
-    this.loadSubscriptions()
-    this.subscriptionsSearchChanged
-      .pipe(debounceTime(500))
-      .subscribe(() => {
-        this.pagination.currentPage = 1
-        this.loadSubscriptions(false)
-      })
-  }
-  resetSearch () {
-    this.subscriptionsSearch = ''
-    this.onSubscriptionsSearchChanged()
-  }
-  onSubscriptionsSearchChanged () {
-    this.subscriptionsSearchChanged.next()
-  }
  onNearOfBottom () {
    // Last page
    if (this.pagination.totalItems <= (this.pagination.currentPage * this.pagination.itemsPerPage)) return
@@ -56,8 +34,13 @@ export class MySubscriptionsComponent implements OnInit {
    this.loadSubscriptions()
  }
+  onSearch (search: string) {
+    this.search = search
+    this.loadSubscriptions(false)
+  }
  private loadSubscriptions (more = true) {
-    this.userSubscriptionService.listSubscriptions({ pagination: this.pagination, search: this.subscriptionsSearch })
+    this.userSubscriptionService.listSubscriptions({ pagination: this.pagination, search: this.search })
        .subscribe(
          res => {
            this.videoChannels = more
diff --git a/client/src/app/+my-library/my-video-imports/my-video-imports.component.scss b/client/src/app/+my-library/my-video-imports/my-video-imports.component.scss
index a93c28028..c4b847c3d 100644
--- a/client/src/app/+my-library/my-video-imports/my-video-imports.component.scss
+++ b/client/src/app/+my-library/my-video-imports/my-video-imports.component.scss
@@ -6,7 +6,7 @@ pre {
 }
 .video-import-error {
-  color: red;
+  color: #ff0000;
 }
 .badge {
diff --git a/client/src/app/+my-library/my-video-imports/my-video-imports.component.ts b/client/src/app/+my-library/my-video-imports/my-video-imports.component.ts
index d6d7d7a1b..359535526 100644
--- a/client/src/app/+my-library/my-video-imports/my-video-imports.component.ts
+++ b/client/src/app/+my-library/my-video-imports/my-video-imports.component.ts
@@ -62,7 +62,7 @@ export class MyVideoImportsComponent extends RestTable implements OnInit {
    return '/videos/update/' + video.uuid
  }
-  protected loadData () {
+  protected reloadData () {
    this.videoImportService.getMyVideoImports(this.pagination, this.sort)
        .subscribe(
          resultList => {
diff --git a/client/src/app/+my-library/my-video-playlists/my-video-playlist-elements.component.scss b/client/src/app/+my-library/my-video-playlists/my-video-playlist-elements.component.scss
index 0c68dedf6..67587a58a 100644
--- a/client/src/app/+my-library/my-video-playlists/my-video-playlist-elements.component.scss
+++ b/client/src/app/+my-library/my-video-playlists/my-video-playlist-elements.component.scss
@@ -25,8 +25,8 @@
 }
 .playlist-buttons {
-  display:flex;
+  display: flex;
-  margin: 30px 0 10px 0;
+  margin: 30px 0 10px;
  .share-button {
    @include peertube-button;
@@ -42,9 +42,10 @@
 .cdk-drag-preview {
  box-sizing: border-box;
  border-radius: 4px;
-  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
+  box-shadow:
-  0 8px 10px 1px rgba(0, 0, 0, 0.14),
+    0 5px 5px -3px rgba(0, 0, 0, 0.2),
-  0 3px 14px 2px rgba(0, 0, 0, 0.12);
+    0 8px 10px 1px rgba(0, 0, 0, 0.14),
+    0 3px 14px 2px rgba(0, 0, 0, 0.12);
 }
 .cdk-drag-placeholder {
@@ -56,7 +57,7 @@
 }
 .video:last-child {
-  border: none;
+  border: 0;
 }
 .videos.cdk-drop-list-dragging .video:not(.cdk-drag-placeholder) {
diff --git a/client/src/app/+my-library/my-video-playlists/my-video-playlists.component.html b/client/src/app/+my-library/my-video-playlists/my-video-playlists.component.html
index b88ea3db7..309afcf13 100644
--- a/client/src/app/+my-library/my-video-playlists/my-video-playlists.component.html
+++ b/client/src/app/+my-library/my-video-playlists/my-video-playlists.component.html
@@ -4,12 +4,7 @@
 </h1>
 <div class="video-playlists-header d-flex justify-content-between">
-  <div class="has-feedback has-clear">
+  <my-advanced-input-filter (search)="onSearch($event)"></my-advanced-input-filter>
-    <input type="text" placeholder="Search your playlists" i18n-placeholder [(ngModel)]="videoPlaylistsSearch"
-      (ngModelChange)="onVideoPlaylistSearchChanged()" />
-    <a class="glyphicon glyphicon-remove-sign form-control-feedback form-control-clear" (click)="resetSearch()"></a>
-    <span class="sr-only" i18n>Clear filters</span>
-  </div>
  <a class="create-button" routerLink="create">
    <my-global-icon iconName="add" aria-hidden="true"></my-global-icon>
diff --git a/client/src/app/+my-library/my-video-playlists/my-video-playlists.component.ts b/client/src/app/+my-library/my-video-playlists/my-video-playlists.component.ts
index f6d394923..d90102693 100644
--- a/client/src/app/+my-library/my-video-playlists/my-video-playlists.component.ts
+++ b/client/src/app/+my-library/my-video-playlists/my-video-playlists.component.ts
@@ -1,7 +1,7 @@
 import { Subject } from 'rxjs'
-import { debounceTime, mergeMap } from 'rxjs/operators'
+import { mergeMap } from 'rxjs/operators'
-import { Component, OnInit } from '@angular/core'
+import { Component } from '@angular/core'
-import { AuthService, ComponentPagination, ConfirmService, Notifier, User } from '@app/core'
+import { AuthService, ComponentPagination, ConfirmService, Notifier } from '@app/core'
 import { VideoPlaylist, VideoPlaylistService } from '@app/shared/shared-video-playlist'
 import { VideoPlaylistType } from '@shared/models'
@@ -9,10 +9,8 @@ import { VideoPlaylistType } from '@shared/models'
  templateUrl: './my-video-playlists.component.html',
  styleUrls: [ './my-video-playlists.component.scss' ]
 })
-export class MyVideoPlaylistsComponent implements OnInit {
+export class MyVideoPlaylistsComponent {
-  videoPlaylistsSearch: string
  videoPlaylists: VideoPlaylist[] = []
-  videoPlaylistSearchChanged = new Subject<string>()
  pagination: ComponentPagination = {
    currentPage: 1,
@@ -22,27 +20,14 @@ export class MyVideoPlaylistsComponent implements OnInit {
  onDataSubject = new Subject<any[]>()
-  private user: User
+  search: string
  constructor (
    private authService: AuthService,
    private notifier: Notifier,
    private confirmService: ConfirmService,
    private videoPlaylistService: VideoPlaylistService
-    ) {}
+  ) {}
-  ngOnInit () {
-    this.user = this.authService.getUser()
-    this.loadVideoPlaylists()
-    this.videoPlaylistSearchChanged
-      .pipe(
-        debounceTime(500))
-      .subscribe(() => {
-        this.loadVideoPlaylists(true)
-      })
-  }
  async deleteVideoPlaylist (videoPlaylist: VideoPlaylist) {
    const res = await this.confirmService.confirm(
@@ -76,22 +61,20 @@ export class MyVideoPlaylistsComponent implements OnInit {
    this.loadVideoPlaylists()
  }
-  resetSearch () {
+  onSearch (search: string) {
-    this.videoPlaylistsSearch = ''
+    this.search = search
-    this.onVideoPlaylistSearchChanged()
+    this.loadVideoPlaylists(true)
-  }
-  onVideoPlaylistSearchChanged () {
-    this.videoPlaylistSearchChanged.next()
  }
  private loadVideoPlaylists (reset = false) {
    this.authService.userInformationLoaded
        .pipe(mergeMap(() => {
-          return this.videoPlaylistService.listAccountPlaylists(this.user.account, this.pagination, '-updatedAt', this.videoPlaylistsSearch)
+          const user = this.authService.getUser()
-        }))
-        .subscribe(res => {
+          return this.videoPlaylistService.listAccountPlaylists(user.account, this.pagination, '-updatedAt', this.search)
+        })).subscribe(res => {
          if (reset) this.videoPlaylists = []
          this.videoPlaylists = this.videoPlaylists.concat(res.data)
          this.pagination.totalItems = res.total
diff --git a/client/src/app/+my-library/my-videos/modals/video-change-ownership.component.scss b/client/src/app/+my-library/my-videos/modals/video-change-ownership.component.scss
index a79fec179..16187bc4a 100644
--- a/client/src/app/+my-library/my-videos/modals/video-change-ownership.component.scss
+++ b/client/src/app/+my-library/my-videos/modals/video-change-ownership.component.scss
@@ -7,4 +7,4 @@ p-autocomplete {
 .form-group {
  margin: 20px 0;
-}
-\ No newline at end of file
+}
diff --git a/client/src/app/+my-library/my-videos/my-videos.component.html b/client/src/app/+my-library/my-videos/my-videos.component.html
index e9f436378..8d8b482ad 100644
--- a/client/src/app/+my-library/my-videos/my-videos.component.html
+++ b/client/src/app/+my-library/my-videos/my-videos.component.html
@@ -19,12 +19,7 @@
 </h1>
 <div class="videos-header d-flex justify-content-between">
-  <div class="has-feedback has-clear">
+  <my-advanced-input-filter [filters]="inputFilters" (search)="onSearch($event)"></my-advanced-input-filter>
-    <input type="text" placeholder="Search your videos" i18n-placeholder [(ngModel)]="videosSearch"
-      (ngModelChange)="onVideosSearchChanged()" />
-    <a class="glyphicon glyphicon-remove-sign form-control-feedback form-control-clear" (click)="resetSearch()"></a>
-    <span class="sr-only" i18n>Clear filters</span>
-  </div>
  <div class="peertube-select-container peertube-select-button">
    <select [(ngModel)]="sort" (ngModelChange)="onChangeSortColumn()" class="form-control">
@@ -46,6 +41,7 @@
  [titlePage]="titlePage"
  [getVideosObservableFunction]="getVideosObservableFunction"
  [user]="user"
+  [loadOnInit]="false"
  #videosSelection
 >
  <ng-template ptTemplate="globalButtons">
@@ -64,6 +60,5 @@
  </ng-template>
 </my-videos-selection>
 <my-video-change-ownership #videoChangeOwnershipModal></my-video-change-ownership>
 <my-live-stream-information #liveStreamInformationModal></my-live-stream-information>
diff --git a/client/src/app/+my-library/my-videos/my-videos.component.scss b/client/src/app/+my-library/my-videos/my-videos.component.scss
index aaf21126b..57623c36f 100644
--- a/client/src/app/+my-library/my-videos/my-videos.component.scss
+++ b/client/src/app/+my-library/my-videos/my-videos.component.scss
@@ -26,12 +26,12 @@ h1 {
 }
 .action-button-delete-selection {
-  display: inline-block;
  @include peertube-button;
  @include orange-button;
  @include button-with-icon(21px);
+  display: inline-block;
  my-global-icon {
    @include apply-svg-color(#fff);
  }
diff --git a/client/src/app/+my-library/my-videos/my-videos.component.ts b/client/src/app/+my-library/my-videos/my-videos.component.ts
index 356e158d6..1e4a4406d 100644
--- a/client/src/app/+my-library/my-videos/my-videos.component.ts
+++ b/client/src/app/+my-library/my-videos/my-videos.component.ts
@@ -1,10 +1,11 @@
-import { concat, Observable, Subject } from 'rxjs'
+import { concat, Observable } from 'rxjs'
-import { debounceTime, tap, toArray } from 'rxjs/operators'
+import { tap, toArray } from 'rxjs/operators'
 import { Component, OnInit, ViewChild } from '@angular/core'
 import { ActivatedRoute, Router } from '@angular/router'
 import { AuthService, ComponentPagination, ConfirmService, Notifier, ScreenService, ServerService, User } from '@app/core'
 import { DisableForReuseHook } from '@app/core/routing/disable-for-reuse-hook'
 import { immutableAssign } from '@app/helpers'
+import { AdvancedInputFilter } from '@app/shared/shared-forms'
 import { DropdownAction, Video, VideoService } from '@app/shared/shared-main'
 import { LiveStreamInformationComponent } from '@app/shared/shared-video-live'
 import { MiniatureDisplayOptions, SelectionType, VideosSelectionComponent } from '@app/shared/shared-video-miniature'
@@ -40,13 +41,21 @@ export class MyVideosComponent implements OnInit, DisableForReuseHook {
  videoActions: DropdownAction<{ video: Video }>[] = []
  videos: Video[] = []
-  videosSearch: string
-  videosSearchChanged = new Subject<string>()
  getVideosObservableFunction = this.getVideosObservable.bind(this)
  sort: VideoSortField = '-publishedAt'
  user: User
+  inputFilters: AdvancedInputFilter[] = [
+    {
+      queryParams: { 'search': 'isLive:true' },
+      label: $localize`Only live videos`
+    }
+  ]
+  private search: string
  constructor (
    protected router: Router,
    protected serverService: ServerService,
@@ -64,21 +73,15 @@ export class MyVideosComponent implements OnInit, DisableForReuseHook {
    this.buildActions()
    this.user = this.authService.getUser()
-    this.videosSearchChanged
-      .pipe(debounceTime(500))
-      .subscribe(() => {
-        this.videosSelection.reloadVideos()
-      })
  }
-  resetSearch () {
+  onSearch (search: string) {
-    this.videosSearch = ''
+    this.search = search
-    this.onVideosSearchChanged()
+    this.reloadData()
  }
-  onVideosSearchChanged () {
+  reloadData () {
-    this.videosSearchChanged.next()
+    this.videosSelection.reloadVideos()
  }
  onChangeSortColumn () {
@@ -96,7 +99,7 @@ export class MyVideosComponent implements OnInit, DisableForReuseHook {
  getVideosObservable (page: number) {
    const newPagination = immutableAssign(this.pagination, { currentPage: page })
-    return this.videoService.getMyVideos(newPagination, this.sort, this.videosSearch)
+    return this.videoService.getMyVideos(newPagination, this.sort, this.search)
      .pipe(
        tap(res => this.pagination.totalItems = res.total)
      )
diff --git a/client/src/app/+search/search-filters.component.scss b/client/src/app/+search/search-filters.component.scss
index 68ac6d021..cfb7a1d98 100644
--- a/client/src/app/+search/search-filters.component.scss
+++ b/client/src/app/+search/search-filters.component.scss
@@ -46,7 +46,7 @@ input[type=submit] {
  font-weight: $font-semibold;
  display: inline-block;
-  padding: 0 10px 0 10px;
+  padding: 0 10px;
  white-space: nowrap;
  background: transparent;
diff --git a/client/src/app/+search/search.component.html b/client/src/app/+search/search.component.html
index 65d4b6ecd..130be75fc 100644
--- a/client/src/app/+search/search.component.html
+++ b/client/src/app/+search/search.component.html
@@ -33,20 +33,15 @@
  <ng-container *ngFor="let result of results">
    <div *ngIf="isVideoChannel(result)" class="entry video-channel">
-      <a class="link-avatar" *ngIf="!isExternalChannelUrl()" [routerLink]="getChannelUrl(result)">
-        <img [src]="result.avatarUrl" alt="Avatar" />
-      </a>
-      <a class="link-avatar" *ngIf="isExternalChannelUrl()" [href]="getChannelUrl(result)" target="_blank">
+      <my-actor-avatar [channel]="result" [internalHref]="getInternalChannelUrl(result)" [href]="getExternalChannelUrl(result)"></my-actor-avatar>
-        <img [src]="result.avatarUrl" alt="Avatar" />
-      </a>
      <div class="video-channel-info">
-        <a *ngIf="!isExternalChannelUrl()" [routerLink]="getChannelUrl(result)" class="video-channel-names">
+        <a *ngIf="!isExternalChannelUrl()" [routerLink]="getInternalChannelUrl(result)" class="video-channel-names">
          <ng-container *ngTemplateOutlet="aContent"></ng-container>
        </a>
-        <a *ngIf="isExternalChannelUrl()" [href]="getChannelUrl(result)" target="_blank" class="video-channel-names">
+        <a *ngIf="isExternalChannelUrl()" [href]="getExternalChannelUrl(result)" target="_blank" class="video-channel-names">
          <ng-container *ngTemplateOutlet="aContent"></ng-container>
        </a>
diff --git a/client/src/app/+search/search.component.scss b/client/src/app/+search/search.component.scss
index 91c8272d7..a8002ba88 100644
--- a/client/src/app/+search/search.component.scss
+++ b/client/src/app/+search/search.component.scss
@@ -5,7 +5,7 @@
  $image-size: min(130px, $video-img-width);
  $margin-size: ($video-img-width - $image-size) / 2; // So we have the same width than the video miniature
-  @include channel-avatar($image-size);
+  @include actor-avatar-size($image-size);
  margin: 0 $margin-size 0 $margin-size;
 }
@@ -53,10 +53,8 @@
  max-width: 800px;
 }
-.video-channel {
+.video-channel my-actor-avatar {
-  img {
+  @include build-channel-img-size($video-thumbnail-width);
-    @include build-channel-img-size($video-thumbnail-width);
-  }
 }
 .video-channel-info {
@@ -92,14 +90,12 @@
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
-    .link-avatar {
+    my-actor-avatar {
+      @include build-channel-img-size($video-thumbnail-medium-width);
      grid-column: 1;
      grid-row: 1 / -1;
    }
-    img {
-      @include build-channel-img-size($video-thumbnail-medium-width);
-    }
  }
  .video-channel-info {
@@ -115,7 +111,7 @@
 }
 @include on-mobile-main-col {
-  .video-channel img {
+  .video-channel my-actor-avatar {
    @include build-channel-img-size($video-thumbnail-small-width);
  }
 }
diff --git a/client/src/app/+search/search.component.ts b/client/src/app/+search/search.component.ts
index 2be952e16..ecede19a3 100644
--- a/client/src/app/+search/search.component.ts
+++ b/client/src/app/+search/search.component.ts
@@ -132,10 +132,6 @@ export class SearchComponent implements OnInit, OnDestroy {
    return 'internal'
  }
-  isExternalChannelUrl () {
-    return this.getVideoLinkType() === 'external'
-  }
  search () {
    forkJoin([
      this.getVideosObs(),
@@ -200,17 +196,33 @@ export class SearchComponent implements OnInit, OnDestroy {
    this.results = this.results.filter(r => !this.isVideo(r) || r.id !== video.id)
  }
-  getChannelUrl (channel: VideoChannel) {
+  isExternalChannelUrl () {
+    return this.getVideoLinkType() === 'external'
+  }
+  getExternalChannelUrl (channel: VideoChannel) {
    // Same algorithm than videos
    if (this.getVideoLinkType() === 'external') {
      return channel.url
    }
-    if (this.getVideoLinkType() === 'internal') {
+    // lazy-load or internal
+    return undefined
+  }
+  getInternalChannelUrl (channel: VideoChannel) {
+    const linkType = this.getVideoLinkType()
+    if (linkType === 'internal') {
      return [ '/video-channels', channel.nameWithHost ]
    }
-    return [ '/search/lazy-load-channel', { url: channel.url } ]
+    if (linkType === 'lazy-load') {
+      return [ '/search/lazy-load-channel', { url: channel.url } ]
+    }
+    // external
+    return undefined
  }
  hideActions () {
diff --git a/client/src/app/+search/search.module.ts b/client/src/app/+search/search.module.ts
index e85ae07d0..390833abc 100644
--- a/client/src/app/+search/search.module.ts
+++ b/client/src/app/+search/search.module.ts
@@ -1,4 +1,5 @@
 import { NgModule } from '@angular/core'
+import { SharedActorImageModule } from '@app/shared/shared-actor-image/shared-actor-image.module'
 import { SharedFormModule } from '@app/shared/shared-forms'
 import { SharedMainModule } from '@app/shared/shared-main'
 import { SharedSearchModule } from '@app/shared/shared-search'
@@ -18,6 +19,7 @@ import { VideoLazyLoadResolver } from './video-lazy-load.resolver'
    SharedMainModule,
    SharedSearchModule,
    SharedFormModule,
+    SharedActorImageModule,
    SharedUserSubscriptionModule,
    SharedVideoMiniatureModule
  ],
diff --git a/client/src/app/+signup/+register/register.component.scss b/client/src/app/+signup/+register/register.component.scss
index 16ba9e2c0..f6a846ffa 100644
--- a/client/src/app/+signup/+register/register.component.scss
+++ b/client/src/app/+signup/+register/register.component.scss
@@ -84,7 +84,7 @@ button {
      border-color: pvar(--mainColor) transparent transparent transparent;
    }
-    & + div {
+    + div {
      font-size: 15px;
    }
  }
diff --git a/client/src/app/+signup/shared/signup-success.component.scss b/client/src/app/+signup/shared/signup-success.component.scss
index fbc27c8bc..b302366e2 100644
--- a/client/src/app/+signup/shared/signup-success.component.scss
+++ b/client/src/app/+signup/shared/signup-success.component.scss
@@ -9,19 +9,16 @@ svg {
  stroke-dashoffset: 0;
  &.circle {
-    -webkit-animation: dash .9s ease-in-out;
    animation: dash .9s ease-in-out;
  }
  &.line {
    stroke-dashoffset: 1000;
-    -webkit-animation: dash .9s .35s ease-in-out forwards;
    animation: dash .9s .35s ease-in-out forwards;
  }
  &.check {
    stroke-dashoffset: -100;
-    -webkit-animation: dash-check .9s .35s ease-in-out forwards;
    animation: dash-check .9s .35s ease-in-out forwards;
  }
 }
@@ -38,16 +35,6 @@ svg {
  text-align: center;
 }
-@-webkit-keyframes dash {
-  0% {
-    stroke-dashoffset: 1000;
-  }
-  100% {
-    stroke-dashoffset: 0;
-  }
-}
 @keyframes dash {
  0% {
    stroke-dashoffset: 1000;
@@ -57,15 +44,6 @@ svg {
  }
 }
-@-webkit-keyframes dash-check {
-  0% {
-    stroke-dashoffset: -100;
-  }
-  100% {
-    stroke-dashoffset: 900;
-  }
-}
 @keyframes dash-check {
  0% {
    stroke-dashoffset: -100;
diff --git a/client/src/app/+video-channels/video-channels.component.html b/client/src/app/+video-channels/video-channels.component.html
index 9308d5bb6..b4d81fe39 100644
--- a/client/src/app/+video-channels/video-channels.component.html
+++ b/client/src/app/+video-channels/video-channels.component.html
@@ -6,16 +6,16 @@
  <div class="channel-info">
    <ng-template #buttonsTemplate>
-        <a *ngIf="isManageable()" [routerLink]="[ '/my-library/video-channels/update', videoChannel.nameWithHost ]" class="peertube-button-link orange-button" i18n>
+      <a *ngIf="isManageable()" [routerLink]="[ '/my-library/video-channels/update', videoChannel.nameWithHost ]" class="peertube-button-link orange-button" i18n>
-          Manage channel
+        Manage channel
-        </a>
+      </a>
-        <my-subscribe-button *ngIf="!isManageable()" #subscribeButton [videoChannels]="[videoChannel]"></my-subscribe-button>
+      <my-subscribe-button *ngIf="!isManageable()" #subscribeButton [videoChannels]="[videoChannel]"></my-subscribe-button>
-        <button *ngIf="videoChannel.support" (click)="showSupportModal()" class="support-button peertube-button orange-button-inverted">
+      <button *ngIf="videoChannel.support" (click)="showSupportModal()" class="support-button peertube-button orange-button-inverted">
-          <my-global-icon iconName="support" aria-hidden="true"></my-global-icon>
+        <my-global-icon iconName="support" aria-hidden="true"></my-global-icon>
-          <span class="icon-text" i18n>Support</span>
+        <span class="icon-text" i18n>Support</span>
-        </button>
+      </button>
    </ng-template>
    <ng-template #ownerTemplate>
@@ -23,7 +23,7 @@
        <div class="section-label" i18n>OWNER ACCOUNT</div>
        <div class="avatar-row">
-          <my-account-avatar [account]="videoChannel.ownerAccount" [internalHref]="getAccountUrl()" size="120"></my-account-avatar>
+          <my-actor-avatar class="account-avatar" [account]="videoChannel.ownerAccount" [internalHref]="getAccountUrl()"></my-actor-avatar>
          <div class="actor-info">
            <h4>
@@ -49,7 +49,7 @@
    </ng-template>
    <div class="channel-avatar-row">
-      <img class="channel-avatar" [src]="videoChannel.avatarUrl" alt="Avatar" />
+      <my-actor-avatar class="main-avatar" [channel]="videoChannel"></my-actor-avatar>
      <div>
        <div class="section-label" i18n>VIDEO CHANNEL</div>
diff --git a/client/src/app/+video-channels/video-channels.component.scss b/client/src/app/+video-channels/video-channels.component.scss
index e946707ef..470f64878 100644
--- a/client/src/app/+video-channels/video-channels.component.scss
+++ b/client/src/app/+video-channels/video-channels.component.scss
@@ -107,8 +107,8 @@
    display: flex;
    margin-bottom: 15px;
-    img {
+    .account-avatar {
-      @include avatar(48px);
+      @include actor-avatar-size(48px);
    }
    .actor-info {
@@ -131,10 +131,10 @@
  }
  .owner-description {
+    @include fade-text(120px, pvar(--mainBackgroundColor));
    max-height: 140px;
    word-break: break-word;
-    @include fade-text(120px, pvar(--mainBackgroundColor));
  }
 }
@@ -150,7 +150,7 @@
 }
 .copy-button {
-  border: none;
+  border: 0;
 }
 @media screen and (max-width: 1400px) {
@@ -178,9 +178,9 @@
  }
  .channel-description:not(.expanded) {
-    max-height: 70px;
    @include fade-text(30px, pvar(--channelBackgroundColor));
+    max-height: 70px;
  }
  .show-more {
@@ -220,10 +220,10 @@
    }
    .owner-description {
+      @include fade-text(30px, pvar(--mainBackgroundColor));
      grid-column: 2;
      max-height: 70px;
-      @include fade-text(30px, pvar(--mainBackgroundColor));
    }
    .view-account {
@@ -289,8 +289,8 @@
        margin-top: -5px;
      }
-      img {
+      .account-avatar {
-        @include channel-avatar(64px);
+        @include actor-avatar-size(64px);
        margin: -30px 0 0 15px;
      }
diff --git a/client/src/app/+video-channels/video-channels.module.ts b/client/src/app/+video-channels/video-channels.module.ts
index 2e387f401..35c39cc2e 100644
--- a/client/src/app/+video-channels/video-channels.module.ts
+++ b/client/src/app/+video-channels/video-channels.module.ts
@@ -10,7 +10,7 @@ import { VideoChannelPlaylistsComponent } from './video-channel-playlists/video-
 import { VideoChannelVideosComponent } from './video-channel-videos/video-channel-videos.component'
 import { VideoChannelsRoutingModule } from './video-channels-routing.module'
 import { VideoChannelsComponent } from './video-channels.component'
-import { SharedAccountAvatarModule } from '../shared/shared-account-avatar/shared-account-avatar.module'
+import { SharedActorImageModule } from '../shared/shared-actor-image/shared-actor-image.module'
 @NgModule({
  imports: [
@@ -23,7 +23,7 @@ import { SharedAccountAvatarModule } from '../shared/shared-account-avatar/share
    SharedUserSubscriptionModule,
    SharedGlobalIconModule,
    SharedSupportModal,
-    SharedAccountAvatarModule
+    SharedActorImageModule
  ],
  declarations: [
diff --git a/client/src/app/+videos/+video-edit/shared/video-caption-add-modal.component.scss b/client/src/app/+videos/+video-edit/shared/video-caption-add-modal.component.scss
index 0958b5f80..a85cf444c 100644
--- a/client/src/app/+videos/+video-edit/shared/video-caption-add-modal.component.scss
+++ b/client/src/app/+videos/+video-edit/shared/video-caption-add-modal.component.scss
@@ -16,6 +16,6 @@ label {
 }
 .warning-replace-caption {
-  color: red;
+  color: #ff0000;
  margin-top: 10px;
-}
-\ No newline at end of file
+}
diff --git a/client/src/app/+videos/+video-edit/shared/video-edit.component.html b/client/src/app/+videos/+video-edit/shared/video-edit.component.html
index 6fe52af67..094b4d3b3 100644
--- a/client/src/app/+videos/+video-edit/shared/video-edit.component.html
+++ b/client/src/app/+videos/+video-edit/shared/video-edit.component.html
@@ -132,7 +132,7 @@
              </ng-template>
              <ng-template ptTemplate="help">
-                <ng-container i18n>Some instances do not list videos containing mature or explicit content by default.</ng-container>
+                <ng-container i18n>Some instances hide videos containing mature or explicit content by default.</ng-container>
              </ng-template>
            </my-peertube-checkbox>
diff --git a/client/src/app/+videos/+video-edit/shared/video-edit.component.scss b/client/src/app/+videos/+video-edit/shared/video-edit.component.scss
index 0b70b0270..bc32d7964 100644
--- a/client/src/app/+videos/+video-edit/shared/video-edit.component.scss
+++ b/client/src/app/+videos/+video-edit/shared/video-edit.component.scss
@@ -150,7 +150,7 @@ p-calendar {
  @include media-breakpoint-up(md) {
    @include make-col(7);
-    & + .col-video-edit {
+    + .col-video-edit {
      @include make-col(5);
    }
  }
@@ -158,7 +158,7 @@ p-calendar {
  @include media-breakpoint-up(xl) {
    @include make-col(8);
-    & + .col-video-edit {
+    + .col-video-edit {
      @include make-col(4);
    }
  }
@@ -169,7 +169,7 @@ p-calendar {
    @include media-breakpoint-up(md) {
      @include make-col(8);
-      & + .col-video-edit {
+      + .col-video-edit {
        @include make-col(4);
      }
    }
diff --git a/client/src/app/+videos/+video-edit/video-add-components/video-send.scss b/client/src/app/+videos/+video-edit/video-add-components/video-send.scss
index 17c5f63e9..dc9153b2b 100644
--- a/client/src/app/+videos/+video-edit/video-add-components/video-send.scss
+++ b/client/src/app/+videos/+video-edit/video-add-components/video-send.scss
@@ -6,7 +6,7 @@ $width-size: 190px;
 .alert.alert-danger {
  text-align: center;
-  & > div {
+  > div {
    font-weight: $font-semibold;
  }
 }
@@ -17,10 +17,10 @@ $width-size: 190px;
  align-items: center;
  .upload-icon {
+    @include apply-svg-color(#C6C6C6);
    width: 90px;
    margin-bottom: 25px;
-    @include apply-svg-color(#C6C6C6);
  }
  .peertube-select-container {
diff --git a/client/src/app/+videos/+video-edit/video-add.component.scss b/client/src/app/+videos/+video-edit/video-add.component.scss
index 1ebee946b..35bca24d0 100644
--- a/client/src/app/+videos/+video-edit/video-add.component.scss
+++ b/client/src/app/+videos/+video-edit/video-add.component.scss
@@ -44,7 +44,7 @@ $nav-link-height: 40px;
 ::ng-deep .video-add-nav {
  border-bottom: $border-width $border-type $border-color;
-  margin: 20px 0 0 0 !important;
+  margin: 20px 0 0 !important;
  &.hide-nav {
    display: none !important;
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 7bd9b7c90..42adfed8d 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 @@
 <form novalidate [formGroup]="form" (ngSubmit)="formValidated()">
  <div class="avatar-and-textarea">
-    <my-account-avatar [account]="user?.account" size="25"></my-account-avatar>
+    <my-actor-avatar [account]="user?.account" size="25"></my-actor-avatar>
    <div class="form-group">
      <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 1aa9255c2..7743bd41d 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
@@ -13,8 +13,7 @@ form {
  display: flex;
  margin-bottom: 10px;
-  my-account-avatar {
+  my-actor-avatar {
-    vertical-align: top;
    margin-right: 10px;
  }
@@ -32,7 +31,7 @@ form {
    padding-right: $markdown-icon-width + 15px !important;
    @media screen and (max-width: 600px) {
-      padding-right: $markdown-icon-width + 19px  !important;
+      padding-right: $markdown-icon-width + 19px !important;
    }
    &:focus::placeholder {
@@ -58,7 +57,9 @@ form {
      }
    }
-    &:focus, &:active, &:hover {
+    &:focus,
+    &:active,
+    &:hover {
      my-global-icon svg {
        background-color: #C6C6C6;
        color: pvar(--mainBackgroundColor);
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 2b0739261..d7ba40ef6 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,12 +1,10 @@
-<div *ngIf="isCommentDisplayed()" class="root-comment">
+<div *ngIf="isCommentDisplayed()" class="root-comment" [ngClass]="{ 'is-child': isChild() }">
  <div class="left">
-    <my-account-avatar *ngIf="!comment.isDeleted" [href]="comment.account.url" [account]="comment.account"></my-account-avatar>
+    <my-actor-avatar *ngIf="!comment.isDeleted" [href]="comment.account.url" [account]="comment.account"></my-actor-avatar>
    <div class="vertical-border"></div>
  </div>
  <div class="right" [ngClass]="{ 'mb-3': firstInThread }">
-    <span *ngIf="comment.isDeleted" class="comment-avatar"></span>
    <div class="comment">
      <ng-container *ngIf="!comment.isDeleted">
        <div *ngIf="highlightedComment === true" class="highlighted-comment" i18n>Highlighted comment</div>
@@ -68,7 +66,7 @@
        [textValue]="redraftValue"
      ></my-video-comment-add>
-      <div *ngIf="commentTree" class="children">
+      <div *ngIf="commentTree">
        <div *ngFor="let commentChild of commentTree.children">
          <my-video-comment
            [comment]="commentChild.comment"
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 cf33a5b0e..a4d2e237c 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
@@ -24,6 +24,10 @@
  }
 }
+my-actor-avatar {
+  @include actor-avatar-size(36px);
+}
 .comment {
  flex-grow: 1;
  // Fix word-wrap with flex
@@ -58,7 +62,7 @@
  display: inline-flex;
  padding-right: 6px;
  padding-left: 6px;
-  color: white !important;
+  color: #fff !important;
 }
 .comment-account {
@@ -129,7 +133,10 @@
    cursor: pointer;
    margin-right: 10px;
-    &:hover, &:active, &:focus, &:focus-visible {
+    &:hover,
+    &:active,
+    &:focus,
+    &:focus-visible {
      color: pvar(--mainForegroundColor);
    }
  }
@@ -148,10 +155,10 @@ my-video-comment-add {
  }
 }
-.children {
+.is-child {
  // Reduce avatars size for replies
-  .comment-avatar {
+  my-actor-avatar {
-    @include avatar(25px);
+    @include actor-avatar-size(25px);
  }
  .left {
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 dd3db0c65..fd379e80e 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
@@ -138,6 +138,10 @@ export class VideoCommentComponent implements OnInit, OnChanges {
      (this.commentTree?.hasDisplayedChildren) // Or this is a reply that have other replies
  }
+  isChild () {
+    return this.parentComments.length !== 0
+  }
  private getUserIfNeeded (account: Account) {
    if (!account.userId) return
    if (!this.authService.isLoggedIn()) return
diff --git a/client/src/app/+videos/+video-watch/comment/video-comments.component.scss b/client/src/app/+videos/+video-watch/comment/video-comments.component.scss
index e6778e1a9..a7e858069 100644
--- a/client/src/app/+videos/+video-watch/comment/video-comments.component.scss
+++ b/client/src/app/+videos/+video-watch/comment/video-comments.component.scss
@@ -11,7 +11,8 @@
  cursor: pointer;
 }
-.glyphicon, .comment-thread-loading {
+.glyphicon,
+.comment-thread-loading {
  margin-right: 5px;
  display: inline-block;
  font-size: 13px;
@@ -40,7 +41,7 @@
 #dropdown-sort-comments {
  font-weight: 600;
  text-transform: uppercase;
-  border: none;
+  border: 0;
  transform: translateY(-7%);
 }
diff --git a/client/src/app/+videos/+video-watch/recommendations/recommended-videos.component.html b/client/src/app/+videos/+video-watch/recommendations/recommended-videos.component.html
index e0e9f92e7..e1040fead 100644
--- a/client/src/app/+videos/+video-watch/recommendations/recommended-videos.component.html
+++ b/client/src/app/+videos/+video-watch/recommendations/recommended-videos.component.html
@@ -15,7 +15,9 @@
    <ng-container *ngFor="let video of (videos$ | async); let i = index; let length = count">
      <my-video-miniature
        [displayOptions]="displayOptions" [video]="video" [user]="userMiniature" [displayAsRow]="displayAsRow"
-        (videoBlocked)="onVideoRemoved()" (videoRemoved)="onVideoRemoved()" (videoAccountMuted)="onVideoRemoved()">
+        (videoBlocked)="onVideoRemoved()" (videoRemoved)="onVideoRemoved()" (videoAccountMuted)="onVideoRemoved()"
+        actorImageSize="32"
+      >
      </my-video-miniature>
      <hr *ngIf="!playlist && i == 0 && length > 1" />
diff --git a/client/src/app/+videos/+video-watch/recommendations/recommended-videos.component.scss b/client/src/app/+videos/+video-watch/recommendations/recommended-videos.component.scss
index c9fae6f27..5e0373afc 100644
--- a/client/src/app/+videos/+video-watch/recommendations/recommended-videos.component.scss
+++ b/client/src/app/+videos/+video-watch/recommendations/recommended-videos.component.scss
@@ -8,7 +8,8 @@
  margin-bottom: 25px;
  flex-wrap: wrap-reverse;
-  .title-page.active, .title-page.title-page-single {
+  .title-page.active,
+  .title-page.title-page-single {
    margin-bottom: unset;
    margin-right: .5rem !important;
  }
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 a02373f2d..5f149cbd1 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
@@ -1,21 +1,11 @@
-<div class="wrapper" [ngClass]="'avatar-' + size">
+<div class="wrapper" [ngClass]="{ 'generic-channel': genericChannel }">
-  <ng-container *ngIf="!isChannelAvatarNull() && !genericChannel">
+  <my-actor-avatar
-    <a [routerLink]="[ '/video-channels', video.byVideoChannel ]" [title]="channelLinkTitle">
+    class="channel" [channel]="video.channel"
-      <img [src]="video.videoChannelAvatarUrl" i18n-alt alt="Channel avatar" class="channel-avatar" />
+    [internalHref]="[ '/video-channels', video.byVideoChannel ]" [title]="channelLinkTitle"
-    </a>
+  ></my-actor-avatar>
-    <my-account-avatar [account]="video.account" [title]="accountLinkTitle" [internalHref]="[ '/accounts', video.byAccount ]"></my-account-avatar>
+  <my-actor-avatar
-</ng-container>
+    class="account" [account]="video.account"
+    [internalHref]="[ '/accounts', video.byAccount ]" [title]="accountLinkTitle">
-  <ng-container *ngIf="!isChannelAvatarNull() && genericChannel">
+  </my-actor-avatar>
-    <my-account-avatar [account]="video.account" [title]="accountLinkTitle" [internalHref]="[ '/accounts', video.byAccount ]"></my-account-avatar>
-    <a [routerLink]="[ '/video-channels', video.byVideoChannel ]" [title]="channelLinkTitle">
-      <img [src]="video.videoChannelAvatarUrl" i18n-alt alt="Channel avatar" class="channel-avatar" />
-    </a>
-  </ng-container>
-  <ng-container *ngIf="isChannelAvatarNull()">
-    <my-account-avatar [account]="video.account" [title]="accountLinkTitle" [internalHref]="[ '/accounts', video.byAccount ]"></my-account-avatar>
-  </ng-container>
 </div>
diff --git a/client/src/app/+videos/+video-watch/video-avatar-channel.component.scss b/client/src/app/+videos/+video-watch/video-avatar-channel.component.scss
index 4998e85fa..20e32240c 100644
--- a/client/src/app/+videos/+video-watch/video-avatar-channel.component.scss
+++ b/client/src/app/+videos/+video-watch/video-avatar-channel.component.scss
@@ -1,44 +1,42 @@
 @import '_mixins';
+@mixin main {
+  @include actor-avatar-size(35px);
+}
+@mixin secondary {
+  height: 60%;
+  width: 60%;
+  position: absolute;
+  bottom: -5px;
+  right: -5px;
+  background-color: rgba(0, 0, 0, 0);
+}
 .wrapper {
-  $avatar-size: 35px;
+  @include actor-avatar-size(35px);
-  width: $avatar-size;
-  height: $avatar-size;
  position: relative;
  margin-right: 5px;
  margin-bottom: 5px;
-  &.avatar-sm {
+  &.generic-channel {
-    width: 28px;
+    .account {
-    height: 28px;
+      @include main();
-    margin-bottom: 3px;
+    }
-  }
-  a {
+    .channel {
-    @include disable-outline;
+      display: none !important;
+    }
  }
-  a img {
+  &:not(.generic-channel) {
-    height: 100%;
+    .account {
-    object-fit: cover;
+      @include secondary();
-    position: absolute;
-    top:50%;
-    left:50%;
-    transform: translate(-50%,-50%);
-    border-radius: 5px;
-    &:not(.channel-avatar) {
-      border-radius: 50%;
    }
-  }
-  a:nth-of-type(2) img {
+    .channel {
-    height: 60%;
+      @include main();
-    width: 60%;
+    }
-    border: 2px solid pvar(--mainBackgroundColor);
-    transform: translateX(15%);
-    position: relative;
-    background-color: pvar(--mainBackgroundColor);
  }
 }
diff --git a/client/src/app/+videos/+video-watch/video-avatar-channel.component.ts b/client/src/app/+videos/+video-watch/video-avatar-channel.component.ts
index 0b6e796df..63edd7bad 100644
--- a/client/src/app/+videos/+video-watch/video-avatar-channel.component.ts
+++ b/client/src/app/+videos/+video-watch/video-avatar-channel.component.ts
@@ -10,7 +10,6 @@ export class VideoAvatarChannelComponent implements OnInit {
  @Input() video: Video
  @Input() byAccount: string
-  @Input() size: 'md' | 'sm' = 'md'
  @Input() genericChannel: boolean
  channelLinkTitle = ''
diff --git a/client/src/app/+videos/+video-watch/video-watch-playlist.component.scss b/client/src/app/+videos/+video-watch/video-watch-playlist.component.scss
index 0b0a2a899..b3f93b83c 100644
--- a/client/src/app/+videos/+video-watch/video-watch-playlist.component.scss
+++ b/client/src/app/+videos/+video-watch/video-watch-playlist.component.scss
@@ -45,7 +45,7 @@
      my-global-icon {
        &:not(.active) {
-          opacity: .5
+          opacity: .5;
        }
        ::ng-deep {
diff --git a/client/src/app/+videos/+video-watch/video-watch.component.html b/client/src/app/+videos/+video-watch/video-watch.component.html
index eadb2148a..4779602d2 100644
--- a/client/src/app/+videos/+video-watch/video-watch.component.html
+++ b/client/src/app/+videos/+video-watch/video-watch.component.html
@@ -79,7 +79,7 @@
                  <span [innerHTML]="getRatePopoverText()"></span>
                </ng-template>
-                <div class="video-actions fullWidth justify-content-end">
+                <div class="video-actions full-width justify-content-end">
                  <button
                    [ngbPopover]="getRatePopoverText() && ratePopoverText" [ngClass]="{ 'activated': userRating === 'like' }" (click)="setLike()" (keyup.enter)="setLike()"
                    class="action-button action-button-like" [attr.aria-pressed]="userRating === 'like'" [attr.aria-label]="tooltipLike"
diff --git a/client/src/app/+videos/+video-watch/video-watch.component.scss b/client/src/app/+videos/+video-watch/video-watch.component.scss
index e8ad10a11..301762695 100644
--- a/client/src/app/+videos/+video-watch/video-watch.component.scss
+++ b/client/src/app/+videos/+video-watch/video-watch.component.scss
@@ -6,12 +6,12 @@
 $player-factor: 16/9;
 $video-info-margin-left: 44px;
-@function getPlayerHeight($width){
+@function getPlayerHeight ($width) {
-  @return calc(#{$width} / #{$player-factor})
+  @return calc(#{$width} / #{$player-factor});
 }
-@function getPlayerWidth($height){
+@function getPlayerWidth ($height) {
-  @return calc(#{$height} * #{$player-factor})
+  @return calc(#{$height} * #{$player-factor});
 }
 @mixin playlist-below-player {
@@ -24,11 +24,11 @@ $video-info-margin-left: 44px;
 .root {
  &.theater-enabled #video-wrapper {
+    $height: calc(100vh - #{$header-height} - #{$theater-bottom-space});
    flex-direction: column;
    justify-content: center;
-    $height: calc(100vh - #{$header-height} - #{$theater-bottom-space});
    #videojs-wrapper {
      width: 100%;
      height: $height;
@@ -141,7 +141,7 @@ $video-info-margin-left: 44px;
    .video-info-first-row {
      display: flex;
-      & > div:first-child {
+      > div:first-child {
        flex-grow: 1;
      }
@@ -207,7 +207,7 @@ $video-info-margin-left: 44px;
      }
      .video-actions-rates {
-        margin: 0 0 10px 0;
+        margin: 0 0 10px;
        align-items: start;
        width: max-content;
        margin-left: auto;
@@ -231,7 +231,7 @@ $video-info-margin-left: 44px;
            font-size: 100%;
            font-weight: $font-semibold;
            display: inline-block;
-            padding: 0 10px 0 10px;
+            padding: 0 10px;
            white-space: nowrap;
            background-color: transparent !important;
            color: pvar(--actionButtonColor);
@@ -346,7 +346,8 @@ $video-info-margin-left: 44px;
        }
      }
-      .glyphicon, .description-loading {
+      .glyphicon,
+      .description-loading {
        margin-left: 3px;
      }
@@ -396,7 +397,7 @@ $video-info-margin-left: 44px;
      &.video-attribute-tags {
        .video-attribute-value:not(:nth-child(2)) {
          &::before {
-            content: ', '
+            content: ', ';
          }
        }
      }
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 cf6afd852..62ce7be2d 100644
--- a/client/src/app/+videos/+video-watch/video-watch.module.ts
+++ b/client/src/app/+videos/+video-watch/video-watch.module.ts
@@ -20,7 +20,7 @@ import { TimestampRouteTransformerDirective } from './timestamp-route-transforme
 import { VideoWatchPlaylistComponent } from './video-watch-playlist.component'
 import { VideoWatchRoutingModule } from './video-watch-routing.module'
 import { VideoWatchComponent } from './video-watch.component'
-import { SharedAccountAvatarModule } from '../../shared/shared-account-avatar/shared-account-avatar.module'
+import { SharedActorImageModule } from '../../shared/shared-actor-image/shared-actor-image.module'
 import { VideoAvatarChannelComponent } from './video-avatar-channel.component'
 @NgModule({
@@ -39,7 +39,7 @@ import { VideoAvatarChannelComponent } from './video-avatar-channel.component'
    SharedShareModal,
    SharedVideoModule,
    SharedSupportModal,
-    SharedAccountAvatarModule
+    SharedActorImageModule
  ],
  declarations: [
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 639a96c43..e21bffb6c 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 @@
      <div class="section channel videos" *ngFor="let object of overview.channels">
        <div class="section-title">
          <a [routerLink]="[ '/video-channels', buildVideoChannelBy(object) ]">
-            <img [src]="buildVideoChannelAvatarUrl(object)" alt="Avatar" />
+            <my-actor-avatar [channel]="buildVideoChannel(object)"></my-actor-avatar>
            <h2 class="section-title">{{ object.channel.displayName }}</h2>
          </a>
diff --git a/client/src/app/+videos/video-list/overview/video-overview.component.scss b/client/src/app/+videos/video-list/overview/video-overview.component.scss
index ec73c628c..8fbac1b46 100644
--- a/client/src/app/+videos/video-list/overview/video-overview.component.scss
+++ b/client/src/app/+videos/video-list/overview/video-overview.component.scss
@@ -16,7 +16,7 @@
    padding-top: 30px;
    .section-title {
-      border-top: none !important;
+      border-top: 0 !important;
    }
  }
@@ -33,12 +33,14 @@
    }
    a {
-      &:hover, &:focus:not(.focus-visible), &:active {
+      color: pvar(--mainForegroundColor);
+      &:hover,
+      &:focus:not(.focus-visible),
+      &:active {
        text-decoration: none;
        outline: none;
      }
-      color: pvar(--mainForegroundColor);
    }
  }
@@ -49,9 +51,10 @@
        width: fit-content;
        align-items: center;
-        img {
+        my-actor-avatar {
-          @include channel-avatar(28px);
+          @include actor-avatar-size(28px);
+          font-size: initial;
          margin-right: 8px;
        }
      }
diff --git a/client/src/app/+videos/video-list/overview/video-overview.component.ts b/client/src/app/+videos/video-list/overview/video-overview.component.ts
index b3be1d7b5..14532ca1e 100644
--- a/client/src/app/+videos/video-list/overview/video-overview.component.ts
+++ b/client/src/app/+videos/video-list/overview/video-overview.component.ts
@@ -45,8 +45,8 @@ export class VideoOverviewComponent implements OnInit {
    return object.videos[0].byVideoChannel
  }
-  buildVideoChannelAvatarUrl (object: { videos: Video[] }) {
+  buildVideoChannel (object: { videos: Video[] }) {
-    return object.videos[0].videoChannelAvatarUrl
+    return object.videos[0].channel
  }
  buildVideos (videos: Video[]) {
diff --git a/client/src/app/+videos/video-list/trending/video-trending-header.component.scss b/client/src/app/+videos/video-list/trending/video-trending-header.component.scss
index 923a1d67a..6daacc78e 100644
--- a/client/src/app/+videos/video-list/trending/video-trending-header.component.scss
+++ b/client/src/app/+videos/video-list/trending/video-trending-header.component.scss
@@ -14,4 +14,4 @@
    height: 1rem;
    margin-right: .1rem;
  }
-}
-\ No newline at end of file
+}
diff --git a/client/src/app/+videos/videos.module.ts b/client/src/app/+videos/videos.module.ts
index 61d012d63..8a35015d6 100644
--- a/client/src/app/+videos/videos.module.ts
+++ b/client/src/app/+videos/videos.module.ts
@@ -1,4 +1,5 @@
 import { NgModule } from '@angular/core'
+import { SharedActorImageModule } from '@app/shared/shared-actor-image/shared-actor-image.module'
 import { SharedFormModule } from '@app/shared/shared-forms'
 import { SharedGlobalIconModule } from '@app/shared/shared-icons'
 import { SharedMainModule } from '@app/shared/shared-main'
@@ -21,7 +22,8 @@ import { VideosComponent } from './videos.component'
    SharedFormModule,
    SharedVideoMiniatureModule,
    SharedUserSubscriptionModule,
-    SharedGlobalIconModule
+    SharedGlobalIconModule,
+    SharedActorImageModule
  ],
  declarations: [
diff --git a/client/src/app/app.component.scss b/client/src/app/app.component.scss
index e7d05369b..e21ada0f1 100644
--- a/client/src/app/app.component.scss
+++ b/client/src/app/app.component.scss
@@ -79,7 +79,7 @@
    display: inline-block;
    width: 23px;
    height: 24px;
-    margin-right: .5rem;
+    margin-right: 0.5rem;
  }
  @media screen and (max-width: $mobile-view) {
diff --git a/client/src/app/app.module.ts b/client/src/app/app.module.ts
index 41c59cc86..3cec6d739 100644
--- a/client/src/app/app.module.ts
+++ b/client/src/app/app.module.ts
@@ -24,7 +24,7 @@ import { SharedGlobalIconModule } from './shared/shared-icons'
 import { SharedInstanceModule } from './shared/shared-instance'
 import { SharedMainModule } from './shared/shared-main'
 import { SharedUserInterfaceSettingsModule } from './shared/shared-user-settings'
-import { SharedAccountAvatarModule } from './shared/shared-account-avatar/shared-account-avatar.module'
+import { SharedActorImageModule } from './shared/shared-actor-image/shared-actor-image.module'
 registerLocaleData(localeOc, 'oc')
@@ -60,7 +60,7 @@ registerLocaleData(localeOc, 'oc')
    SharedUserInterfaceSettingsModule,
    SharedGlobalIconModule,
    SharedInstanceModule,
-    SharedAccountAvatarModule,
+    SharedActorImageModule,
    MetaModule.forRoot({
      provide: MetaLoader,
diff --git a/client/src/app/core/hotkeys/hotkeys.component.scss b/client/src/app/core/hotkeys/hotkeys.component.scss
index a970260c9..b39ffa98d 100644
--- a/client/src/app/core/hotkeys/hotkeys.component.scss
+++ b/client/src/app/core/hotkeys/hotkeys.component.scss
@@ -12,16 +12,13 @@
  left: 0;
  color: #333;
  font-size: 1em;
-  background-color: rgba(255,255,255,0.9);
+  background-color: rgba(255, 255, 255, 0.9);
 }
 .cfp-hotkeys-container.fade {
  z-index: -1024;
  visibility: hidden;
  opacity: 0;
-  -webkit-transition: opacity 0.15s linear;
-  -moz-transition: opacity 0.15s linear;
-  -o-transition: opacity 0.15s linear;
  transition: opacity 0.15s linear;
 }
diff --git a/client/src/app/core/rest/rest-table.ts b/client/src/app/core/rest/rest-table.ts
index 32c1db446..a5b48f10c 100644
--- a/client/src/app/core/rest/rest-table.ts
+++ b/client/src/app/core/rest/rest-table.ts
@@ -1,8 +1,6 @@
 import * as debug from 'debug'
 import { LazyLoadEvent, SortMeta } from 'primeng/api'
-import { Subject } from 'rxjs'
+import { ActivatedRoute, Router } from '@angular/router'
-import { debounceTime, distinctUntilChanged } from 'rxjs/operators'
-import { ActivatedRoute, Params, Router } from '@angular/router'
 import { peertubeLocalStorage } from '@root-helpers/peertube-web-storage'
 import { RestPagination } from './rest-pagination'
@@ -14,14 +12,11 @@ export abstract class RestTable {
  abstract sort: SortMeta
  abstract pagination: RestPagination
-  search: string
  rowsPerPageOptions = [ 10, 20, 50, 100 ]
  rowsPerPage = this.rowsPerPageOptions[0]
  expandedRows = {}
-  baseRoute: string
+  search: string
-  protected searchStream: Subject<string>
  protected route: ActivatedRoute
  protected router: Router
@@ -30,7 +25,6 @@ export abstract class RestTable {
  initialize () {
    this.loadSort()
-    this.initSearch()
  }
  loadSort () {
@@ -58,7 +52,7 @@ export abstract class RestTable {
      count: this.rowsPerPage
    }
-    this.loadData()
+    this.reloadData()
    this.saveSort()
  }
@@ -66,55 +60,6 @@ export abstract class RestTable {
    peertubeLocalStorage.setItem(this.getSortLocalStorageKey(), JSON.stringify(this.sort))
  }
-  initSearch () {
-    this.searchStream = new Subject()
-    this.searchStream
-      .pipe(
-        debounceTime(400),
-        distinctUntilChanged()
-      )
-      .subscribe(search => {
-        this.search = search
-        logger('On search %s.', this.search)
-        this.loadData()
-      })
-  }
-  onSearch (event: Event) {
-    const target = event.target as HTMLInputElement
-    this.searchStream.next(target.value)
-    this.setQueryParams((event.target as HTMLInputElement).value)
-  }
-  setQueryParams (search: string) {
-    if (!this.baseRoute) return
-    const queryParams: Params = {}
-    if (search) Object.assign(queryParams, { search })
-    this.router.navigate([ this.baseRoute ], { queryParams })
-  }
-  resetTableFilter () {
-    this.setTableFilter('')
-    this.setQueryParams('')
-    this.resetSearch()
-  }
-  listenToSearchChange () {
-    this.route.queryParams
-      .subscribe(params => {
-        this.search = params.search || ''
-        // Primeng table will run an event to load data
-        this.setTableFilter(this.search)
-      })
-  }
  onPage (event: { first: number, rows: number }) {
    logger('On page %o.', event)
@@ -125,28 +70,18 @@ export abstract class RestTable {
        count: this.rowsPerPage
      }
-      this.loadData()
+      this.reloadData()
    }
    this.expandedRows = {}
  }
-  setTableFilter (filter: string, triggerEvent = true) {
+  onSearch (search: string) {
-    // FIXME: cannot use ViewChild, so create a component for the filter input
+    this.search = search
-    const filterInput = document.getElementById('table-filter') as HTMLInputElement
+    this.reloadData()
-    if (!filterInput) return
-    filterInput.value = filter
-    if (triggerEvent) filterInput.dispatchEvent(new Event('keyup'))
-  }
-  resetSearch () {
-    this.searchStream.next('')
-    this.setTableFilter('')
  }
-  protected abstract loadData (): void
+  protected abstract reloadData (): void
  private getSortLocalStorageKey () {
    return 'rest-table-sort-' + this.getIdentifier()
diff --git a/client/src/app/core/rest/rest.service.ts b/client/src/app/core/rest/rest.service.ts
index 4f1fc8848..1696e6709 100644
--- a/client/src/app/core/rest/rest.service.ts
+++ b/client/src/app/core/rest/rest.service.ts
@@ -90,14 +90,20 @@ export class RestService {
      const matchedTokens = tokens.filter(t => t.startsWith(prefix))
                                  .map(t => t.slice(prefix.length)) // Keep the value filter
-                                  .map(t => t.replace(/^"|"$/g, ''))
+                                  .map(t => t.replace(/^"|"$/g, '')) // Remove ""
                                  .map(t => {
                                    if (prefixObj.handler) return prefixObj.handler(t)
+                                    if (prefixObj.isBoolean) {
+                                      if (t === 'true') return true
+                                      if (t === 'false') return false
+                                      return undefined
+                                    }
                                    return t
                                  })
-                                  .filter(t => !!t || t === 0)
+                                  .filter(t => t !== null && t !== undefined)
-                                  .map(t => prefixObj.isBoolean ? t === 'true' : t)
      if (matchedTokens.length === 0) continue
diff --git a/client/src/app/core/users/user.service.ts b/client/src/app/core/users/user.service.ts
index 3de83152c..47db985e1 100644
--- a/client/src/app/core/users/user.service.ts
+++ b/client/src/app/core/users/user.service.ts
@@ -320,13 +320,7 @@ export class UserService {
      const filters = this.restService.parseQueryStringFilter(search, {
        blocked: {
          prefix: 'banned:',
-          isBoolean: true,
+          isBoolean: true
-          handler: v => {
-            if (v === 'true') return v
-            if (v === 'false') return v
-            return undefined
-          }
        }
      })
diff --git a/client/src/app/core/wrappers/screen.service.ts b/client/src/app/core/wrappers/screen.service.ts
index c133b5fe9..fd8268b35 100644
--- a/client/src/app/core/wrappers/screen.service.ts
+++ b/client/src/app/core/wrappers/screen.service.ts
@@ -39,9 +39,9 @@ export class ScreenService {
    let numberOfVideos = 1
    if (screenWidth > 1850) numberOfVideos = 5
-    else if (screenWidth > 1600) numberOfVideos = 4
+    else if (screenWidth > 1410) numberOfVideos = 4
-    else if (screenWidth > 1370) numberOfVideos = 3
+    else if (screenWidth > 1120) numberOfVideos = 3
-    else if (screenWidth > 1100) numberOfVideos = 2
+    else if (screenWidth > 890) numberOfVideos = 2
    return numberOfVideos
  }
diff --git a/client/src/app/header/search-typeahead.component.scss b/client/src/app/header/search-typeahead.component.scss
index c754a99d1..3e0350ba0 100644
--- a/client/src/app/header/search-typeahead.component.scss
+++ b/client/src/app/header/search-typeahead.component.scss
@@ -44,7 +44,8 @@ li.suggestion {
  // soft border-radius for the last suggestion and the link inside
  &:last-of-type {
-    &, & ::ng-deep a {
+    &,
+    ::ng-deep a {
      border-bottom-right-radius: 3px;
      border-bottom-left-radius: 3px;
    }
@@ -74,7 +75,7 @@ li.suggestion {
 #typeahead-container {
  input {
    border: 1px solid pvar(--mainBackgroundColor) !important;
-    box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 20px 0px;
+    box-shadow: rgba(0, 0, 0, 0.1) 0 1px 20px 0;
    flex-grow: 1;
    transition: box-shadow .3s ease, width .2s ease;
  }
@@ -95,7 +96,7 @@ li.suggestion {
    right: 10px;
  }
-  & > div:last-child {
+  > div:last-child {
    // we have to switch the display and not the opacity,
    // to avoid clashing with the rest of the interface.
    display: none;
@@ -103,7 +104,7 @@ li.suggestion {
  &:focus,
  ::ng-deep &:focus-within {
-    & > div:last-child {
+    > div:last-child {
      @media screen and (min-width: $mobile-view) {
        display: initial !important;
      }
@@ -111,12 +112,12 @@ li.suggestion {
      #typeahead-help,
      #typeahead-instructions,
      li.suggestion {
-        box-shadow: rgba(0, 0, 0, 0.2) 0px 10px 20px -5px;
+        box-shadow: rgba(0, 0, 0, 0.2) 0 10px 20px -5px;
      }
    }
    ::ng-deep input {
-      box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 20px 0px;
+      box-shadow: rgba(0, 0, 0, 0.2) 0 1px 20px 0;
      border-end-start-radius: 0;
      border-end-end-radius: 0;
diff --git a/client/src/app/header/suggestion.component.scss b/client/src/app/header/suggestion.component.scss
index 692a81daa..9163de0b1 100644
--- a/client/src/app/header/suggestion.component.scss
+++ b/client/src/app/header/suggestion.component.scss
@@ -2,9 +2,11 @@
 a {
  @include disable-default-a-behaviour;
  width: 100%;
-  &, &:hover {
+  &,
+  &:hover {
    color: pvar(--mainForegroundColor);
    &.focus-visible {
@@ -23,10 +25,10 @@ a {
 }
 my-global-icon {
+  @include apply-svg-color(pvar(--mainForegroundColor));
  width: 17px;
  position: relative;
  top: -2px;
  margin: 5px;
-  @include apply-svg-color(pvar(--mainForegroundColor));
 }
diff --git a/client/src/app/menu/language-chooser.component.scss b/client/src/app/menu/language-chooser.component.scss
index 6226a85cb..800b1ebef 100644
--- a/client/src/app/menu/language-chooser.component.scss
+++ b/client/src/app/menu/language-chooser.component.scss
@@ -5,12 +5,12 @@
  @include peertube-button-link;
  @include orange-button;
+  border-radius: 0;
  &.focus-visible,
  &:focus {
    box-shadow: none;
  }
-  border-radius: 0;
 }
 .modal-body {
diff --git a/client/src/app/menu/menu.component.html b/client/src/app/menu/menu.component.html
index df5c7971d..2e07deca2 100644
--- a/client/src/app/menu/menu.component.html
+++ b/client/src/app/menu/menu.component.html
@@ -5,7 +5,7 @@
        <div>
          <div class="logged-in-more" ngbDropdown #dropdown="ngbDropdown" placement="bottom-left" [container]="dropdownContainer" (openChange)="onDropdownOpenChange($event)" autoClose="outside">
            <div ngbDropdownToggle>
-              <my-account-avatar [account]="user.account" size="34"></my-account-avatar>
+              <my-actor-avatar [account]="user.account" size="34"></my-actor-avatar>
              <div class="logged-in-info">
                <div class="logged-in-display-name">{{ user.account?.displayName }}</div>
diff --git a/client/src/app/menu/menu.component.scss b/client/src/app/menu/menu.component.scss
index 00d1a1f69..d0edd820e 100644
--- a/client/src/app/menu/menu.component.scss
+++ b/client/src/app/menu/menu.component.scss
@@ -24,8 +24,9 @@ $footer-links-base-opacity: .8;
    background-color: rgba(255, 255, 255, 0.15);
  }
-  &:hover, &.focus-visible {
+  &:hover,
-    background-color: rgba(255, 255, 255, 0.10);
+  &.focus-visible {
+    background-color: rgba(255, 255, 255, 0.1);
  }
  my-global-icon {
@@ -60,7 +61,8 @@ menu {
  margin: 0;
  padding: 0;
-  &:focus, &:hover {
+  &:focus,
+  &:hover {
    overflow-y: auto;
  }
@@ -125,7 +127,7 @@ my-notification {
  line-height: 1;
  &.show {
-    background-color: rgba(255, 255, 255, 0.20);
+    background-color: rgba(255, 255, 255, 0.2);
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, .325);
  }
@@ -158,14 +160,14 @@ my-notification {
      position: absolute;
      right: -35px;
      top: -8px;
-      color: grey;
+      color: #808080;
      width: $main-radius;
    }
  }
  .dropdown-toggle {
    &::after {
-      border: none;
+      border: 0;
    }
  }
@@ -177,7 +179,7 @@ my-notification {
  }
 }
-my-account-avatar {
+my-actor-avatar {
  margin-right: 10px;
 }
@@ -193,11 +195,11 @@ my-account-avatar {
 }
 .logged-in-display-name {
+  @include disable-default-a-behaviour;
  font-size: 16px;
  font-weight: $font-semibold;
  color: pvar(--menuForegroundColor);
-  @include disable-default-a-behaviour;
 }
 .logged-in-username {
@@ -251,7 +253,7 @@ my-account-avatar {
 }
 .login-buttons-block {
-  margin: 30px 25px 35px 25px;
+  margin: 30px 25px 35px;
  > a {
    display: block;
@@ -305,7 +307,8 @@ my-account-avatar {
 }
 .footer-links {
-  &, > div {
+  &,
+  > div {
    display: flex;
    flex-wrap: wrap;
  }
@@ -388,29 +391,29 @@ my-account-avatar {
  .dropdown-item:hover,
  .dropdown-item:active {
    &.settings-sensitive my-global-icon ::ng-deep svg {
-      margin-top: 0px !important;
+      margin-top: 0 !important;
    }
  }
 }
 my-global-icon {
-  &[iconName="playlists"] {
+  &[iconName=playlists] {
    height: 24px;
    width: 24px;
    margin-right: 16px;
  }
-  &[iconName="videos"] {
+  &[iconName=videos] {
    position: relative;
    right: -1px;
  }
-  &[iconName="channel"] {
+  &[iconName=channel] {
    margin-top: -2px;
  }
-  &[iconName="sign-out"] {
+  &[iconName='sign-out'] {
    position: relative;
    right: -2px;
    height: 20px;
diff --git a/client/src/app/menu/notification.component.scss b/client/src/app/menu/notification.component.scss
index c65787779..554c20ca9 100644
--- a/client/src/app/menu/notification.component.scss
+++ b/client/src/app/menu/notification.component.scss
@@ -16,19 +16,20 @@
 .notification-inbox-popover,
 .notification-inbox-link a {
  @include apply-svg-color(#808080);
-  ::ng-deep {
-    svg {
-      transition: color .1s ease-in-out;
-    }
-  }
  transition: all .1s ease-in-out;
  border-radius: 25px;
  cursor: pointer;
-  &:hover, &:active {
+  ::ng-deep svg {
-    background-color: rgba(255, 255, 255, 0.15);
+    transition: color .1s ease-in-out;
+  }
+  &:hover,
+  &:active {
    @include apply-svg-color(#fff);
+    background-color: rgba(255, 255, 255, 0.15);
  }
 }
@@ -59,7 +60,7 @@
      font-size: 14px;
      font-family: $main-fonts;
      width: 400px;
-      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.30);
+      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
      .loader {
        display: flex;
@@ -80,7 +81,7 @@
          max-height: 500px;
        }
-        & > my-user-notifications:nth-child(2) {
+        > my-user-notifications:nth-child(2) {
          overflow-y: auto;
          flex-grow: 1;
        }
@@ -110,7 +111,8 @@
          background: transparent;
        }
-        a, button {
+        a,
+        button {
          color: rgba(20, 20, 20, 0.5);
          &:hover:not(:disabled) {
@@ -133,7 +135,8 @@
  }
 }
-.notification-inbox-popover, .notification-inbox-link {
+.notification-inbox-popover,
+.notification-inbox-link {
  cursor: pointer;
  position: relative;
diff --git a/client/src/app/modal/welcome-modal.component.scss b/client/src/app/modal/welcome-modal.component.scss
index 28d5dc49c..5e9e3dc51 100644
--- a/client/src/app/modal/welcome-modal.component.scss
+++ b/client/src/app/modal/welcome-modal.component.scss
@@ -42,7 +42,7 @@ li {
  text-align: center;
  font-weight: 600;
  font-size: 18px;
-  margin: 20px 0 40px 0;
+  margin: 20px 0 40px;
 }
 .columns {
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 658d42537..ca68de4b1 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
@@ -7,16 +7,16 @@
      <span class="col-3 moderation-expanded-label" i18n>Reporter</span>
      <span class="col-9 moderation-expanded-text">
-        <a [routerLink]="[ baseRoute ]" [queryParams]="{ 'search': 'reporter:&quot;' + abuse.reporterAccount.displayName + '&quot;' }"
+        <a [routerLink]="[ '.' ]" [queryParams]="{ 'search': 'reporter:&quot;' + abuse.reporterAccount.displayName + '&quot;' }"
          class="chip"
        >
-          <my-account-avatar [account]="abuse.reporterAccount"></my-account-avatar>
+          <my-actor-avatar size="18" [account]="abuse.reporterAccount"></my-actor-avatar>
          <div>
            <span class="text-muted">{{ abuse.reporterAccount.nameWithHost }}</span>
          </div>
        </a>
-        <a [routerLink]="[ baseRoute ]" [queryParams]="{ 'search': 'reporter:&quot;' + abuse.reporterAccount.displayName + '&quot;' }"
+        <a [routerLink]="[ '.' ]" [queryParams]="{ 'search': 'reporter:&quot;' + abuse.reporterAccount.displayName + '&quot;' }"
          class="ml-auto text-muted abuse-details-links" i18n
        >
          {abuse.countReportsForReporter, plural, =1 {1 report} other {{{ abuse.countReportsForReporter }} reports}}<span class="ml-1 glyphicon glyphicon-flag"></span>
@@ -27,16 +27,16 @@
    <div class="d-flex" *ngIf="abuse.flaggedAccount">
      <span class="col-3 moderation-expanded-label" i18n>Reportee</span>
      <span class="col-9 moderation-expanded-text">
-        <a [routerLink]="[ baseRoute ]" [queryParams]="{ 'search': 'reportee:&quot;' +abuse.flaggedAccount.displayName + '&quot;' }"
+        <a [routerLink]="[ '.' ]" [queryParams]="{ 'search': 'reportee:&quot;' +abuse.flaggedAccount.displayName + '&quot;' }"
          class="chip"
        >
-          <my-account-avatar [account]="abuse.flaggedAccount"></my-account-avatar>
+          <my-actor-avatar size="18" [account]="abuse.flaggedAccount"></my-actor-avatar>
          <div>
            <span class="text-muted">{{ abuse.flaggedAccount ? abuse.flaggedAccount.nameWithHost : '' }}</span>
          </div>
        </a>
-        <a *ngIf="isAdminView" [routerLink]="[ baseRoute ]" [queryParams]="{ 'search': 'reportee:&quot;' +abuse.flaggedAccount.displayName + '&quot;' }"
+        <a *ngIf="isAdminView" [routerLink]="[ '.' ]" [queryParams]="{ 'search': 'reportee:&quot;' +abuse.flaggedAccount.displayName + '&quot;' }"
          class="ml-auto text-muted abuse-details-links" i18n
        >
          {abuse.countReportsForReportee, plural, =1 {1 report} other {{{ abuse.countReportsForReportee }} reports}}<span class="ml-1 glyphicon glyphicon-flag"></span>
@@ -53,7 +53,7 @@
    <div class="mt-3 d-flex">
      <span class="col-3 moderation-expanded-label">
        <ng-container i18n>Report</ng-container>
-        <a [routerLink]="[ baseRoute ]" [queryParams]="{ 'search': '#' + abuse.id  }" class="ml-1 text-muted">#{{ abuse.id }}</a>
+        <a [routerLink]="[ '.' ]" [queryParams]="{ 'search': '#' + abuse.id  }" class="ml-1 text-muted">#{{ abuse.id }}</a>
      </span>
      <span class="col-9 moderation-expanded-text" [innerHTML]="abuse.reasonHtml"></span>
    </div>
@@ -61,7 +61,7 @@
    <div *ngIf="getPredefinedReasons()" class="mt-2 d-flex">
      <span class="col-3"></span>
      <span class="col-9">
-        <a *ngFor="let reason of getPredefinedReasons()"  [routerLink]="[ baseRoute ]"
+        <a *ngFor="let reason of getPredefinedReasons()"  [routerLink]="[ '.' ]"
          [queryParams]="{ 'search': 'tag:' + reason.id  }" class="chip rectangular bg-secondary text-light"
        >
          <div>{{ reason.label }}</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 e8ce7e678..14674c5f0 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
@@ -1,6 +1,5 @@
 import { Component, Input } from '@angular/core'
 import { durationToString } from '@app/helpers'
-import { Account } from '@app/shared/shared-main'
 import { AbusePredefinedReasonsString } from '@shared/models'
 import { ProcessedAbuse } from './processed-abuse.model'
@@ -12,7 +11,6 @@ import { ProcessedAbuse } from './processed-abuse.model'
 export class AbuseDetailsComponent {
  @Input() abuse: ProcessedAbuse
  @Input() isAdminView: boolean
-  @Input() baseRoute: string
  private predefinedReasonsTranslations: { [key in AbusePredefinedReasonsString]: string }
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 29b51f09c..b1c065c7a 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
@@ -1,6 +1,7 @@
 <p-table
-  [value]="abuses" [lazy]="true" [paginator]="totalRecords > 0" [totalRecords]="totalRecords" [rows]="rowsPerPage" [rowsPerPageOptions]="rowsPerPageOptions"
+  [value]="abuses" [paginator]="totalRecords > 0" [totalRecords]="totalRecords" [rows]="rowsPerPage" [rowsPerPageOptions]="rowsPerPageOptions"
-  [sortField]="sort.field" [sortOrder]="sort.order" (onLazyLoad)="loadLazy($event)" dataKey="id" [resizableColumns]="true"
+  [sortField]="sort.field" [sortOrder]="sort.order" dataKey="id" [resizableColumns]="true"
+  [lazy]="true" (onLazyLoad)="loadLazy($event)" [lazyLoadOnInit]="false"
  [showCurrentPageReport]="true" i18n-currentPageReportTemplate
  currentPageReportTemplate="Showing {{'{first}'}} to {{'{last}'}} of {{'{totalRecords}'}} reports"
  (onPage)="onPage($event)" [expandedRowKeys]="expandedRows"
@@ -8,28 +9,7 @@
  <ng-template pTemplate="caption">
    <div class="caption">
      <div class="ml-auto">
-        <div class="input-group has-feedback has-clear">
+        <my-advanced-input-filter [filters]="inputFilters" (search)="onSearch($event)"></my-advanced-input-filter>
-          <div class="input-group-prepend c-hand" ngbDropdown placement="bottom-left auto" container="body">
-            <div class="input-group-text" ngbDropdownToggle>
-              <span class="caret" aria-haspopup="menu" role="button"></span>
-            </div>
-            <div role="menu" ngbDropdownMenu>
-              <h6 class="dropdown-header" i18n>Advanced report filters</h6>
-              <a [routerLink]="[ baseRoute ]" [queryParams]="{ 'search': 'state:pending' }" class="dropdown-item" i18n>Unsolved reports</a>
-              <a [routerLink]="[ baseRoute ]" [queryParams]="{ 'search': 'state:accepted' }" class="dropdown-item" i18n>Accepted reports</a>
-              <a [routerLink]="[ baseRoute ]" [queryParams]="{ 'search': 'state:rejected' }" class="dropdown-item" i18n>Refused reports</a>
-              <a [routerLink]="[ baseRoute ]" [queryParams]="{ 'search': 'videoIs:blacklisted' }" class="dropdown-item" i18n>Reports with blocked videos</a>
-              <a [routerLink]="[ baseRoute ]" [queryParams]="{ 'search': 'videoIs:deleted' }" class="dropdown-item" i18n>Reports with deleted videos</a>
-            </div>
-          </div>
-          <input
-            type="text" name="table-filter" id="table-filter" i18n-placeholder placeholder="Filter..."
-            (keyup)="onSearch($event)"
-          >
-          <a class="glyphicon glyphicon-remove-sign form-control-feedback form-control-clear" (click)="resetTableFilter()"></a>
-          <span class="sr-only" i18n>Clear filters</span>
-        </div>
      </div>
    </div>
  </ng-template>
@@ -65,7 +45,7 @@
      <td *ngIf="isAdminView()">
        <a *ngIf="abuse.reporterAccount" [href]="abuse.reporterAccount.url" i18n-title title="Open account in a new tab" target="_blank" rel="noopener noreferrer">
          <div class="chip two-lines">
-            <my-account-avatar [account]="abuse.reporterAccount"></my-account-avatar>
+            <my-actor-avatar [account]="abuse.reporterAccount"></my-actor-avatar>
            <div>
              {{ abuse.reporterAccount.displayName }}
              <span>{{ abuse.reporterAccount.nameWithHost }}</span>
@@ -171,7 +151,7 @@
  <ng-template pTemplate="rowexpansion" let-abuse>
      <tr>
        <td class="expand-cell" colspan="8">
-          <my-abuse-details [abuse]="abuse" [baseRoute]="baseRoute" [isAdminView]="isAdminView()"></my-abuse-details>
+          <my-abuse-details [abuse]="abuse" [isAdminView]="isAdminView()"></my-abuse-details>
        </td>
      </tr>
  </ng-template>
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 8b5771237..4dc2b4f10 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
@@ -3,7 +3,7 @@ import truncate from 'lodash-es/truncate'
 import { SortMeta } from 'primeng/api'
 import { buildVideoLink, buildVideoOrPlaylistEmbed } from 'src/assets/player/utils'
 import { environment } from 'src/environments/environment'
-import { AfterViewInit, Component, Input, OnInit, ViewChild } from '@angular/core'
+import { Component, Input, OnInit, ViewChild } from '@angular/core'
 import { DomSanitizer } from '@angular/platform-browser'
 import { ActivatedRoute, Router } from '@angular/router'
 import { ConfirmService, MarkdownService, Notifier, RestPagination, RestTable } from '@app/core'
@@ -11,6 +11,7 @@ import { Account, Actor, DropdownAction, Video, VideoService } from '@app/shared
 import { AbuseService, BlocklistService, VideoBlockService } from '@app/shared/shared-moderation'
 import { VideoCommentService } from '@app/shared/shared-video-comment'
 import { AbuseState, AdminAbuse } from '@shared/models'
+import { AdvancedInputFilter } from '../shared-forms'
 import { AbuseMessageModalComponent } from './abuse-message-modal.component'
 import { ModerationCommentModalComponent } from './moderation-comment-modal.component'
 import { ProcessedAbuse } from './processed-abuse.model'
@@ -22,9 +23,8 @@ const logger = debug('peertube:moderation:AbuseListTableComponent')
  templateUrl: './abuse-list-table.component.html',
  styleUrls: [ '../shared-moderation/moderation.scss', './abuse-list-table.component.scss' ]
 })
-export class AbuseListTableComponent extends RestTable implements OnInit, AfterViewInit {
+export class AbuseListTableComponent extends RestTable implements OnInit {
  @Input() viewType: 'admin' | 'user'
-  @Input() baseRoute: string
  @ViewChild('abuseMessagesModal', { static: true }) abuseMessagesModal: AbuseMessageModalComponent
  @ViewChild('moderationCommentModal', { static: true }) moderationCommentModal: ModerationCommentModalComponent
@@ -36,6 +36,29 @@ export class AbuseListTableComponent extends RestTable implements OnInit, AfterV
  abuseActions: DropdownAction<ProcessedAbuse>[][] = []
+  inputFilters: AdvancedInputFilter[] = [
+    {
+      queryParams: { 'search': 'state:pending' },
+      label: $localize`Unsolved reports`
+    },
+    {
+      queryParams: { 'search': 'state:accepted' },
+      label: $localize`Accepted reports`
+    },
+    {
+      queryParams: { 'search': 'state:rejected' },
+      label: $localize`Refused reports`
+    },
+    {
+      queryParams: { 'search': 'videoIs:blacklisted' },
+      label: $localize`Reports with blocked videos`
+    },
+    {
+      queryParams: { 'search': 'videoIs:deleted' },
+      label: $localize`Reports with deleted videos`
+    }
+  ]
  constructor (
    protected route: ActivatedRoute,
    protected router: Router,
@@ -66,11 +89,6 @@ export class AbuseListTableComponent extends RestTable implements OnInit, AfterV
    ]
    this.initialize()
-    this.listenToSearchChange()
-  }
-  ngAfterViewInit () {
-    if (this.search) this.setTableFilter(this.search, false)
  }
  isAdminView () {
@@ -86,7 +104,7 @@ export class AbuseListTableComponent extends RestTable implements OnInit, AfterV
  }
  onModerationCommentUpdated () {
-    this.loadData()
+    this.reloadData()
  }
  isAbuseAccepted (abuse: AdminAbuse) {
@@ -129,7 +147,7 @@ export class AbuseListTableComponent extends RestTable implements OnInit, AfterV
    this.abuseService.removeAbuse(abuse).subscribe(
      () => {
        this.notifier.success($localize`Abuse deleted.`)
-        this.loadData()
+        this.reloadData()
      },
      err => this.notifier.error(err.message)
@@ -139,7 +157,7 @@ export class AbuseListTableComponent extends RestTable implements OnInit, AfterV
  updateAbuseState (abuse: AdminAbuse, state: AbuseState) {
    this.abuseService.updateAbuse(abuse, { state })
      .subscribe(
-        () => this.loadData(),
+        () => this.reloadData(),
        err => this.notifier.error(err.message)
      )
@@ -166,7 +184,7 @@ export class AbuseListTableComponent extends RestTable implements OnInit, AfterV
    return Actor.IS_LOCAL(abuse.reporterAccount.host)
  }
-  protected loadData () {
+  protected reloadData () {
    logger('Loading data.')
    const options = {
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 19b6d456d..8f3830a17 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,7 +10,7 @@ import { AbuseDetailsComponent } from './abuse-details.component'
 import { AbuseListTableComponent } from './abuse-list-table.component'
 import { AbuseMessageModalComponent } from './abuse-message-modal.component'
 import { ModerationCommentModalComponent } from './moderation-comment-modal.component'
-import { SharedAccountAvatarModule } from '../shared-account-avatar/shared-account-avatar.module'
+import { SharedActorImageModule } from '../shared-actor-image/shared-actor-image.module'
 @NgModule({
  imports: [
@@ -21,7 +21,7 @@ import { SharedAccountAvatarModule } from '../shared-account-avatar/shared-accou
    SharedModerationModule,
    SharedGlobalIconModule,
    SharedVideoCommentModule,
-    SharedAccountAvatarModule
+    SharedActorImageModule
  ],
  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
deleted file mode 100644
index ca4ceb12f..000000000
--- a/client/src/app/shared/shared-account-avatar/account-avatar.component.html
+++ /dev/null
@@ -1,15 +0,0 @@
-<ng-template #img>
-  <img [class]="class" [src]="avatarUrl" i18n-alt alt="Account avatar" />
-</ng-template>
-<a *ngIf="account && href" [href]="href" target="_blank" rel="noopener noreferrer" [title]="title">
-  <ng-template *ngTemplateOutlet="img"></ng-template>
-</a>
-<a *ngIf="account && internalHref" [routerLink]="internalHref" [title]="title">
-  <ng-template *ngTemplateOutlet="img"></ng-template>
-</a>
-<ng-container *ngIf="!account || (!href && !internalHref)">
-  <ng-template *ngTemplateOutlet="img"></ng-template>
-</ng-container>
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
deleted file mode 100644
index bb941d712..000000000
--- a/client/src/app/shared/shared-account-avatar/account-avatar.component.scss
+++ /dev/null
@@ -1,22 +0,0 @@
-@import '_variables';
-@import '_mixins';
-.avatar-25 {
-  @include avatar(25px);
-}
-.avatar-34 {
-  @include avatar(34px);
-}
-.avatar-36 {
-  @include avatar(36px);
-}
-.avatar-40 {
-  @include avatar(40px);
-}
-.avatar-120 {
-  @include avatar(120px);
-}
-\ 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
deleted file mode 100644
index 02a0a18bf..000000000
--- a/client/src/app/shared/shared-account-avatar/account-avatar.component.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-import { Component, Input } from '@angular/core'
-import { Account } from '../shared-main/account/account.model'
-@Component({
-  selector: 'my-account-avatar',
-  styleUrls: [ './account-avatar.component.scss' ],
-  templateUrl: './account-avatar.component.html'
-})
-export class AccountAvatarComponent {
-  @Input() account: {
-    name: string
-    avatar?: { url?: string, path: string }
-    url: string
-  }
-  @Input() size: '25' | '34' | '36' | '40' | '120' = '36'
-  // Use an external link
-  @Input() href: string
-  // Use routerLink
-  @Input() internalHref: string | string[]
-  @Input() set title (value) {
-    this._title = value
-  }
-  private _title: string
-  get title () {
-    return this._title || $localize`${this.account.name} (account page)`
-  }
-  get class () {
-    return `avatar avatar-${this.size}`
-  }
-  get avatarUrl () {
-    return Account.GET_ACTOR_AVATAR_URL(this.account)
-  }
-}
diff --git a/client/src/app/shared/shared-account-avatar/index.ts b/client/src/app/shared/shared-account-avatar/index.ts
deleted file mode 100644
index 40c742ba5..000000000
--- a/client/src/app/shared/shared-account-avatar/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './account-avatar.component'
-export * 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
deleted file mode 100644
index 17b27589f..000000000
--- a/client/src/app/shared/shared-account-avatar/shared-account-avatar.module.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import { NgModule } from '@angular/core'
-import { SharedGlobalIconModule } from '../shared-icons'
-import { SharedMainModule } from '../shared-main/shared-main.module'
-import { AccountAvatarComponent } from './account-avatar.component'
-@NgModule({
-  imports: [
-    SharedMainModule,
-    SharedGlobalIconModule
-  ],
-  declarations: [
-    AccountAvatarComponent
-  ],
-  exports: [
-    AccountAvatarComponent
-  ],
-  providers: [ ]
-})
-export class SharedAccountAvatarModule { }
diff --git a/client/src/app/shared/shared-actor-image/actor-avatar-edit.component.html b/client/src/app/shared/shared-actor-image-edit/actor-avatar-edit.component.html
index 0829263f4..e9c5fadcf 100644
--- a/client/src/app/shared/shared-actor-image/actor-avatar-edit.component.html
+++ b/client/src/app/shared/shared-actor-image-edit/actor-avatar-edit.component.html
@@ -1,6 +1,6 @@
 <div class="actor" *ngIf="actor">
  <div class="d-flex">
-    <img [ngClass]="{ channel: isChannel() }" [src]="preview || actor.avatarUrl" alt="Avatar" />
+    <my-actor-avatar [channel]="getChannel()" [account]="getAccount()" [previewImage]="preview" size="100"></my-actor-avatar>
    <div class="actor-img-edit-container">
@@ -34,6 +34,7 @@
    <span for="avatarfile" i18n>Upload a new avatar</span>
    <input #avatarfileInput type="file" name="avatarfile" id="avatarfile" [accept]="avatarExtensions" (change)="onAvatarChange(avatarfileInput)"/>
  </div>
  <div class="dropdown-item c-hand" (click)="deleteAvatar()" (key.enter)="deleteAvatar()">
    <my-global-icon iconName="delete"></my-global-icon>
    <span i18n>Remove avatar</span>
diff --git a/client/src/app/shared/shared-actor-image/actor-avatar-edit.component.scss b/client/src/app/shared/shared-actor-image-edit/actor-avatar-edit.component.scss
index 8b0172315..08e80c3b4 100644
--- a/client/src/app/shared/shared-actor-image/actor-avatar-edit.component.scss
+++ b/client/src/app/shared/shared-actor-image-edit/actor-avatar-edit.component.scss
@@ -4,16 +4,8 @@
 .actor {
  display: flex;
-  img {
+  my-actor-avatar {
    margin-right: 15px;
-    &:not(.channel) {
-      @include avatar(100px);
-    }
-    &.channel {
-      @include channel-avatar(100px);
-    }
  }
  .actor-info {
diff --git a/client/src/app/shared/shared-actor-image/actor-avatar-edit.component.ts b/client/src/app/shared/shared-actor-image-edit/actor-avatar-edit.component.ts
index d0d269489..840946690 100644
--- a/client/src/app/shared/shared-actor-image/actor-avatar-edit.component.ts
+++ b/client/src/app/shared/shared-actor-image-edit/actor-avatar-edit.component.ts
@@ -80,4 +80,16 @@ export class ActorAvatarEditComponent implements OnInit {
  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
+    return this.actor as Account
+  }
 }
diff --git a/client/src/app/shared/shared-actor-image/actor-banner-edit.component.html b/client/src/app/shared/shared-actor-image-edit/actor-banner-edit.component.html
index 266fc26c5..266fc26c5 100644
--- a/client/src/app/shared/shared-actor-image/actor-banner-edit.component.html
+++ b/client/src/app/shared/shared-actor-image-edit/actor-banner-edit.component.html
diff --git a/client/src/app/shared/shared-actor-image/actor-banner-edit.component.scss b/client/src/app/shared/shared-actor-image-edit/actor-banner-edit.component.scss
index 23606f871..23606f871 100644
--- a/client/src/app/shared/shared-actor-image/actor-banner-edit.component.scss
+++ b/client/src/app/shared/shared-actor-image-edit/actor-banner-edit.component.scss
diff --git a/client/src/app/shared/shared-actor-image/actor-banner-edit.component.ts b/client/src/app/shared/shared-actor-image-edit/actor-banner-edit.component.ts
index 8c12d3c4c..8c12d3c4c 100644
--- a/client/src/app/shared/shared-actor-image/actor-banner-edit.component.ts
+++ b/client/src/app/shared/shared-actor-image-edit/actor-banner-edit.component.ts
diff --git a/client/src/app/shared/shared-actor-image/actor-image-edit.scss b/client/src/app/shared/shared-actor-image-edit/actor-image-edit.scss
index 918955a89..918955a89 100644
--- a/client/src/app/shared/shared-actor-image/actor-image-edit.scss
+++ b/client/src/app/shared/shared-actor-image-edit/actor-image-edit.scss
diff --git a/client/src/app/shared/shared-actor-image-edit/index.ts b/client/src/app/shared/shared-actor-image-edit/index.ts
new file mode 100644
index 000000000..276b2e2fb
--- /dev/null
+++ b/client/src/app/shared/shared-actor-image-edit/index.ts
@@ -0,0 +1 @@
+export * from './shared-actor-image-edit.module'
diff --git a/client/src/app/shared/shared-actor-image-edit/shared-actor-image-edit.module.ts b/client/src/app/shared/shared-actor-image-edit/shared-actor-image-edit.module.ts
new file mode 100644
index 000000000..f6a397d5c
--- /dev/null
+++ b/client/src/app/shared/shared-actor-image-edit/shared-actor-image-edit.module.ts
@@ -0,0 +1,31 @@
+import { CommonModule } from '@angular/common'
+import { NgModule } from '@angular/core'
+import { SharedActorImageModule } from '../shared-actor-image/shared-actor-image.module'
+import { SharedGlobalIconModule } from '../shared-icons'
+import { SharedMainModule } from '../shared-main'
+import { ActorAvatarEditComponent } from './actor-avatar-edit.component'
+import { ActorBannerEditComponent } from './actor-banner-edit.component'
+@NgModule({
+  imports: [
+    CommonModule,
+    SharedMainModule,
+    SharedActorImageModule,
+    SharedGlobalIconModule
+  ],
+  declarations: [
+    ActorAvatarEditComponent,
+    ActorBannerEditComponent
+  ],
+  exports: [
+    ActorAvatarEditComponent,
+    ActorBannerEditComponent
+  ],
+  providers: [ ]
+})
+export class SharedActorImageEditModule { }
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
new file mode 100644
index 000000000..13a5385a8
--- /dev/null
+++ b/client/src/app/shared/shared-actor-image/actor-avatar.component.html
@@ -0,0 +1,19 @@
+<ng-template #img>
+  <img *ngIf="previewImage || avatarUrl || !initial" [class]="getClass('avatar')" [src]="previewImage || avatarUrl || defaultAvatarUrl" [alt]="alt" />
+  <div *ngIf="!avatarUrl && initial" [class]="getClass('initial')">
+    <span>{{ initial }}</span>
+  </div>
+</ng-template>
+<a *ngIf="hasActor() && href" [href]="href" target="_blank" rel="noopener noreferrer" [title]="title">
+  <ng-template *ngTemplateOutlet="img"></ng-template>
+</a>
+<a *ngIf="hasActor() && internalHref" [routerLink]="internalHref" [title]="title">
+  <ng-template *ngTemplateOutlet="img"></ng-template>
+</a>
+<ng-container *ngIf="!hasActor() || (!href && !internalHref)">
+  <ng-template *ngTemplateOutlet="img"></ng-template>
+</ng-container>
diff --git a/client/src/app/shared/shared-actor-image/actor-avatar.component.scss b/client/src/app/shared/shared-actor-image/actor-avatar.component.scss
new file mode 100644
index 000000000..bf50de4e9
--- /dev/null
+++ b/client/src/app/shared/shared-actor-image/actor-avatar.component.scss
@@ -0,0 +1,101 @@
+@import '_variables';
+@import '_mixins';
+.avatar {
+  --avatarSize: 100%;
+  --initialFontSize: 22px;
+  width: var(--avatarSize);
+  height: var(--avatarSize);
+  min-width: var(--avatarSize);
+  min-height: var(--avatarSize);
+  &.account {
+    object-fit: cover;
+    border-radius: 50%;
+  }
+  &.channel {
+    border-radius: 5px;
+  }
+}
+.avatar-18 {
+  --avatarSize: 18px;
+  --initialFontSize: 13px;
+}
+.avatar-25 {
+  --avatarSize: 25px;
+}
+.avatar-32 {
+  --avatarSize: 32px;
+}
+.avatar-34 {
+  --avatarSize: 34px;
+}
+.avatar-36 {
+  --avatarSize: 36px;
+}
+.avatar-40 {
+  --avatarSize: 40px;
+}
+.avatar-100 {
+  --avatarSize: 100px;
+  --initialFontSize: 40px;
+}
+.avatar-120 {
+  --avatarSize: 120px;
+  --initialFontSize: 46px;
+}
+a:hover {
+  text-decoration: none;
+}
+.initial {
+  background-color: #3C2109;
+  color: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: var(--initialFontSize);
+  &.blue {
+    background-color: #009FD4;
+  }
+  &.green {
+    background-color: #00AA55;
+  }
+  &.purple {
+    background-color: #B381B3;
+  }
+  &.gray {
+    background-color: #939393;
+  }
+  &.yellow {
+    background-color: #AA8F00;
+  }
+  &.orange {
+    background-color: #D47500;
+  }
+  &.red {
+    background-color: #E76E3C;
+  }
+  &.dark-blue {
+    background-color: #0A3055;
+  }
+}
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
new file mode 100644
index 000000000..b06c2bae6
--- /dev/null
+++ b/client/src/app/shared/shared-actor-image/actor-avatar.component.ts
@@ -0,0 +1,111 @@
+import { Component, Input } from '@angular/core'
+import { SafeResourceUrl } from '@angular/platform-browser'
+import { VideoChannel } from '../shared-main'
+import { Account } from '../shared-main/account/account.model'
+type ActorInput = {
+  name: string
+  avatar?: { url?: string, path: string }
+  url: string
+}
+export type ActorAvatarSize = '18' | '25' | '32' | '34' | '36' | '40' | '100' | '120'
+@Component({
+  selector: 'my-actor-avatar',
+  styleUrls: [ './actor-avatar.component.scss' ],
+  templateUrl: './actor-avatar.component.html'
+})
+export class ActorAvatarComponent {
+  @Input() account: ActorInput
+  @Input() channel: ActorInput
+  @Input() previewImage: SafeResourceUrl
+  @Input() size: ActorAvatarSize
+  // Use an external link
+  @Input() href: string
+  // Use routerLink
+  @Input() internalHref: string | any[]
+  @Input() set title (value) {
+    this._title = value
+  }
+  private _title: string
+  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)`
+    return ''
+  }
+  get alt () {
+    if (this.account) return $localize`Account avatar`
+    if (this.channel) return $localize`Channel avatar`
+    return ''
+  }
+  getClass (type: 'avatar' | 'initial') {
+    const base = [ 'avatar' ]
+    if (this.size) base.push(`avatar-${this.size}`)
+    if (this.channel) base.push('channel')
+    else base.push('account')
+    if (type === 'initial' && this.initial) {
+      base.push('initial')
+      base.push(this.getColorTheme())
+    }
+    return base
+  }
+  get defaultAvatarUrl () {
+    if (this.channel) return VideoChannel.GET_DEFAULT_AVATAR_URL()
+    return Account.GET_DEFAULT_AVATAR_URL()
+  }
+  get avatarUrl () {
+    if (this.account) return Account.GET_ACTOR_AVATAR_URL(this.account)
+    if (this.channel) return VideoChannel.GET_ACTOR_AVATAR_URL(this.channel)
+    return ''
+  }
+  get initial () {
+    const name = this.account?.name
+    if (!name) return ''
+    return name.slice(0, 1)
+  }
+  hasActor () {
+    return !!this.account || !!this.channel
+  }
+  private getColorTheme () {
+    // Keep consistency with CSS
+    const themes = {
+      abc: 'blue',
+      def: 'green',
+      ghi: 'purple',
+      jkl: 'gray',
+      mno: 'yellow',
+      pqr: 'orange',
+      stvu: 'red',
+      wxyz: 'dark-blue'
+    }
+    const theme = Object.keys(themes)
+                        .find(chars => chars.includes(this.initial))
+    return themes[theme]
+  }
+}
diff --git a/client/src/app/shared/shared-actor-image/shared-actor-image.module.ts b/client/src/app/shared/shared-actor-image/shared-actor-image.module.ts
index 6044f9925..8ea4bb2bf 100644
--- a/client/src/app/shared/shared-actor-image/shared-actor-image.module.ts
+++ b/client/src/app/shared/shared-actor-image/shared-actor-image.module.ts
@@ -1,27 +1,21 @@
-import { CommonModule } from '@angular/common'
 import { NgModule } from '@angular/core'
 import { SharedGlobalIconModule } from '../shared-icons'
-import { SharedMainModule } from '../shared-main'
+import { SharedMainModule } from '../shared-main/shared-main.module'
-import { ActorAvatarEditComponent } from './actor-avatar-edit.component'
+import { ActorAvatarComponent } from './actor-avatar.component'
-import { ActorBannerEditComponent } from './actor-banner-edit.component'
 @NgModule({
  imports: [
-    CommonModule,
    SharedMainModule,
    SharedGlobalIconModule
  ],
  declarations: [
-    ActorAvatarEditComponent,
+    ActorAvatarComponent
-    ActorBannerEditComponent
  ],
  exports: [
-    ActorAvatarEditComponent,
+    ActorAvatarComponent
-    ActorBannerEditComponent
  ],
  providers: [ ]
diff --git a/client/src/app/shared/shared-forms/advanced-input-filter.component.html b/client/src/app/shared/shared-forms/advanced-input-filter.component.html
new file mode 100644
index 000000000..10d1296cf
--- /dev/null
+++ b/client/src/app/shared/shared-forms/advanced-input-filter.component.html
@@ -0,0 +1,24 @@
+<div class="input-group has-feedback has-clear">
+  <div *ngIf="hasFilters()" class="input-group-prepend c-hand" ngbDropdown placement="bottom-left auto" container="body">
+    <div class="input-group-text" ngbDropdownToggle>
+      <span class="caret" aria-haspopup="menu" role="button"></span>
+    </div>
+    <div role="menu" ngbDropdownMenu>
+      <h6 class="dropdown-header" i18n>Advanced filters</h6>
+      <a *ngFor="let filter of filters" [routerLink]="[ '.' ]" [queryParams]="filter.queryParams" class="dropdown-item">
+        {{ filter.label }}
+      </a>
+    </div>
+  </div>
+  <input
+    type="text" name="table-filter" id="table-filter" i18n-placeholder placeholder="Filter..."
+    [(ngModel)]="searchValue"
+    (keyup)="onInputSearch($event)"
+  >
+  <a class="glyphicon glyphicon-remove-sign form-control-feedback form-control-clear" (click)="onResetTableFilter()"></a>
+  <span class="sr-only" i18n>Clear filters</span>
+</div>
diff --git a/client/src/app/shared/shared-forms/advanced-input-filter.component.scss b/client/src/app/shared/shared-forms/advanced-input-filter.component.scss
new file mode 100644
index 000000000..7c2198927
--- /dev/null
+++ b/client/src/app/shared/shared-forms/advanced-input-filter.component.scss
@@ -0,0 +1,10 @@
+@import '_variables';
+@import '_mixins';
+input {
+  @include peertube-input-text(250px);
+}
+.input-group-text {
+  background-color: transparent;
+}
diff --git a/client/src/app/shared/shared-forms/advanced-input-filter.component.ts b/client/src/app/shared/shared-forms/advanced-input-filter.component.ts
new file mode 100644
index 000000000..c11f1ad1d
--- /dev/null
+++ b/client/src/app/shared/shared-forms/advanced-input-filter.component.ts
@@ -0,0 +1,116 @@
+import * as debug from 'debug'
+import { Subject } from 'rxjs'
+import { debounceTime, distinctUntilChanged } from 'rxjs/operators'
+import { AfterViewInit, Component, EventEmitter, Input, OnInit, Output } from '@angular/core'
+import { ActivatedRoute, Params, Router } from '@angular/router'
+export type AdvancedInputFilter = {
+  label: string
+  queryParams: Params
+}
+const logger = debug('peertube:AdvancedInputFilterComponent')
+@Component({
+  selector: 'my-advanced-input-filter',
+  templateUrl: './advanced-input-filter.component.html',
+  styleUrls: [ './advanced-input-filter.component.scss' ]
+})
+export class AdvancedInputFilterComponent implements OnInit, AfterViewInit {
+  @Input() filters: AdvancedInputFilter[] = []
+  @Output() search = new EventEmitter<string>()
+  searchValue: string
+  private searchStream: Subject<string>
+  private viewInitialized = false
+  private emitSearchAfterViewInit = false
+  constructor (
+    private route: ActivatedRoute,
+    private router: Router
+  ) { }
+  ngOnInit () {
+    this.initSearchStream()
+    this.listenToRouteSearchChange()
+  }
+  ngAfterViewInit () {
+    this.viewInitialized = true
+    // Init after view init to not send an event too early
+    if (this.emitSearchAfterViewInit) this.emitSearch()
+  }
+  onInputSearch (event: Event) {
+    this.scheduleSearchUpdate((event.target as HTMLInputElement).value)
+  }
+  onResetTableFilter () {
+    this.immediateSearchUpdate('')
+  }
+  hasFilters () {
+    return this.filters.length !== 0
+  }
+  private scheduleSearchUpdate (value: string) {
+    this.searchValue = value
+    this.searchStream.next(this.searchValue)
+  }
+  private immediateSearchUpdate (value: string) {
+    this.searchValue = value
+    this.setQueryParams(this.searchValue)
+    this.emitSearch()
+  }
+  private listenToRouteSearchChange () {
+    this.route.queryParams
+      .subscribe(params => {
+        const search = params.search || ''
+        logger('On route search change "%s".', search)
+        this.searchValue = search
+        this.emitSearch()
+      })
+  }
+  private initSearchStream () {
+    this.searchStream = new Subject()
+    this.searchStream
+      .pipe(
+        debounceTime(300),
+        distinctUntilChanged()
+      )
+      .subscribe(() => {
+        this.setQueryParams(this.searchValue)
+        this.emitSearch()
+      })
+  }
+  private emitSearch () {
+    if (!this.viewInitialized) {
+      this.emitSearchAfterViewInit = true
+      return
+    }
+    logger('On search "%s".', this.searchValue)
+    this.search.emit(this.searchValue)
+  }
+  private setQueryParams (search: string) {
+    const queryParams: Params = {}
+    if (search) Object.assign(queryParams, { search })
+    this.router.navigate([ ], { queryParams })
+  }
+}
diff --git a/client/src/app/shared/shared-forms/index.ts b/client/src/app/shared/shared-forms/index.ts
index 1d859b991..727416a40 100644
--- a/client/src/app/shared/shared-forms/index.ts
+++ b/client/src/app/shared/shared-forms/index.ts
@@ -1,12 +1,14 @@
-export * from './form-validator.service'
+export * from './advanced-input-filter.component'
 export * from './form-reactive'
-export * from './select'
+export * from './form-validator.service'
-export * from './input-toggle-hidden.component'
+export * from './form-validator.service'
 export * from './input-switch.component'
+export * from './input-toggle-hidden.component'
 export * from './markdown-textarea.component'
 export * from './peertube-checkbox.component'
 export * from './preview-upload.component'
 export * from './reactive-file.component'
+export * from './select'
+export * from './shared-form.module'
 export * from './textarea-autoresize.directive'
 export * from './timestamp-input.component'
-export * from './shared-form.module'
diff --git a/client/src/app/shared/shared-forms/input-switch.component.scss b/client/src/app/shared/shared-forms/input-switch.component.scss
index c14950bd7..290a70db8 100644
--- a/client/src/app/shared/shared-forms/input-switch.component.scss
+++ b/client/src/app/shared/shared-forms/input-switch.component.scss
@@ -5,7 +5,7 @@ input {
  position: absolute;
  visibility: hidden;
-  & + label {
+  + label {
    cursor: pointer;
    text-indent: -9999px;
    width: 35px;
@@ -16,7 +16,7 @@ input {
    position: relative;
    margin: 0;
-    &:after {
+    &::after {
      content: '';
      position: absolute;
      top: 3px;
@@ -28,7 +28,7 @@ input {
      transition: 0.3s ease-out;
    }
-    &:active:after {
+    &:active::after {
      width: 40px;
    }
  }
@@ -36,7 +36,7 @@ input {
  &:checked + label {
    background: pvar(--mainColor);
-    &:after {
+    &::after {
      left: calc(100% - 3px);
      transform: translateX(-100%);
    }
diff --git a/client/src/app/shared/shared-forms/markdown-textarea.component.scss b/client/src/app/shared/shared-forms/markdown-textarea.component.scss
index 8203c7d1c..1f72dbc32 100644
--- a/client/src/app/shared/shared-forms/markdown-textarea.component.scss
+++ b/client/src/app/shared/shared-forms/markdown-textarea.component.scss
@@ -18,7 +18,7 @@ $input-border-radius: 3px;
      font-family: monospace;
      font-size: 13px;
-      border-bottom: none;
+      border-bottom: 0;
      border-bottom-left-radius: unset;
      border-bottom-right-radius: unset;
    }
@@ -51,7 +51,8 @@ $input-border-radius: 3px;
            opacity: 0.6;
          }
-          &:hover, &:active {
+          &:hover,
+          &:active {
            svg {
              opacity: 1;
            }
@@ -105,6 +106,8 @@ $input-border-radius: 3px;
 }
 @mixin maximized-base {
+  $nav-preview-vertical-padding: 40px;
  flex-direction: row;
  z-index: #{z(header) - 1};
  position: fixed;
@@ -115,20 +118,18 @@ $input-border-radius: 3px;
  width: calc(100% - #{$menu-width});
  height: calc(100vh - #{$header-height}) !important;
-  $nav-preview-vertical-padding: 40px;
  .nav-preview {
    @include nav-preview-medium();
    padding-top: #{$nav-preview-vertical-padding / 2};
    padding-bottom: #{$nav-preview-vertical-padding / 2};
-    padding-left: 0px;
+    padding-left: 0;
-    padding-right: 0px;
+    padding-right: 0;
    position: absolute;
    background-color: pvar(--mainBackgroundColor);
    width: 100% !important;
-    border-top: none;
+    border-top: 0;
-    border-left: none;
+    border-left: 0;
-    border-right: none;
+    border-right: 0;
    :last-child {
      margin-right: pvar(--horizontalMarginContent);
@@ -148,7 +149,7 @@ $input-border-radius: 3px;
    margin-top: #{$nav-preview-tab-height + $nav-preview-vertical-padding} !important;
    height: calc(100vh - #{$header-height + $nav-preview-tab-height + $nav-preview-vertical-padding}) !important;
    width: 50% !important;
-    border: none !important;
+    border: 0 !important;
    border-radius: unset !important;
  }
@@ -249,11 +250,11 @@ $input-border-radius: 3px;
 }
 @media only screen and (min-width: $small-view) {
+  @include maximized-in-medium-view();
  :host-context(.expanded) {
    @include in-medium-view();
  }
-  @include maximized-in-medium-view();
 }
 @media only screen and (min-width: #{$small-view + $menu-width}) {
diff --git a/client/src/app/shared/shared-forms/peertube-checkbox.component.scss b/client/src/app/shared/shared-forms/peertube-checkbox.component.scss
index cf8540dc3..203b82d0b 100644
--- a/client/src/app/shared/shared-forms/peertube-checkbox.component.scss
+++ b/client/src/app/shared/shared-forms/peertube-checkbox.component.scss
@@ -46,7 +46,7 @@
    line-height: 12px;
    font-weight: 500;
    color: pvar(--inputPlaceholderColor);
-    background-color: rgba(217,225,232,.1);
+    background-color: rgba(217, 225, 232, .1);
-    border: 1px solid rgba(217,225,232,.5);
+    border: 1px solid rgba(217, 225, 232, .5);
  }
-}
-\ No newline at end of file
+}
diff --git a/client/src/app/shared/shared-forms/preview-upload.component.scss b/client/src/app/shared/shared-forms/preview-upload.component.scss
index 88eccd5f7..c2ee0d6a9 100644
--- a/client/src/app/shared/shared-forms/preview-upload.component.scss
+++ b/client/src/app/shared/shared-forms/preview-upload.component.scss
@@ -21,7 +21,7 @@
      max-width: 100%;
      &.no-image {
-        border: 2px solid grey;
+        border: 2px solid #808080;
        background-color: pvar(--mainBackgroundColor);
      }
    }
diff --git a/client/src/app/shared/shared-forms/select/select-shared.component.scss b/client/src/app/shared/shared-forms/select/select-shared.component.scss
index 80196b8df..7006adab1 100644
--- a/client/src/app/shared/shared-forms/select/select-shared.component.scss
+++ b/client/src/app/shared/shared-forms/select/select-shared.component.scss
@@ -32,7 +32,7 @@ ng-select ::ng-deep {
 }
 .root {
-  display:flex;
+  display: flex;
  align-items: center;
  > my-select-options {
@@ -41,9 +41,9 @@ ng-select ::ng-deep {
 }
 my-select-options + input {
-  margin-left: 5px;
  @include peertube-input-text($form-base-input-width);
+  margin-left: 5px;
  display: block;
 }
diff --git a/client/src/app/shared/shared-forms/shared-form.module.ts b/client/src/app/shared/shared-forms/shared-form.module.ts
index 9bdd138a1..5417f7342 100644
--- a/client/src/app/shared/shared-forms/shared-form.module.ts
+++ b/client/src/app/shared/shared-forms/shared-form.module.ts
@@ -5,6 +5,7 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms'
 import { NgSelectModule } from '@ng-select/ng-select'
 import { SharedGlobalIconModule } from '../shared-icons'
 import { SharedMainModule } from '../shared-main/shared-main.module'
+import { AdvancedInputFilterComponent } from './advanced-input-filter.component'
 import { DynamicFormFieldComponent } from './dynamic-form-field.component'
 import { FormValidatorService } from './form-validator.service'
 import { InputSwitchComponent } from './input-switch.component'
@@ -52,7 +53,9 @@ import { TimestampInputComponent } from './timestamp-input.component'
    SelectCheckboxComponent,
    SelectCustomValueComponent,
-    DynamicFormFieldComponent
+    DynamicFormFieldComponent,
+    AdvancedInputFilterComponent
  ],
  exports: [
@@ -78,7 +81,9 @@ import { TimestampInputComponent } from './timestamp-input.component'
    SelectCheckboxComponent,
    SelectCustomValueComponent,
-    DynamicFormFieldComponent
+    DynamicFormFieldComponent,
+    AdvancedInputFilterComponent
  ],
  providers: [
diff --git a/client/src/app/shared/shared-forms/timestamp-input.component.scss b/client/src/app/shared/shared-forms/timestamp-input.component.scss
index 66e9aa032..36f5711a6 100644
--- a/client/src/app/shared/shared-forms/timestamp-input.component.scss
+++ b/client/src/app/shared/shared-forms/timestamp-input.component.scss
@@ -4,8 +4,7 @@ p-inputmask {
  ::ng-deep input {
    width: 80px;
    font-size: 15px;
+    border: 0;
-    border: none;
    &:focus-within,
    &:focus {
diff --git a/client/src/app/shared/shared-instance/instance-about-accordion.component.scss b/client/src/app/shared/shared-instance/instance-about-accordion.component.scss
index 2f6b420e3..615e08bcc 100644
--- a/client/src/app/shared/shared-instance/instance-about-accordion.component.scss
+++ b/client/src/app/shared/shared-instance/instance-about-accordion.component.scss
@@ -1,6 +1,6 @@
 @import '_variables';
 @import '_mixins';
-@import "./_bootstrap-variables";
+@import './_bootstrap-variables';
 @import '~bootstrap/scss/functions';
 @import '~bootstrap/scss/variables';
@@ -30,7 +30,7 @@ ngb-accordion ::ng-deep {
      background-color: unset;
      padding: 0;
-      & + .collapse.show {
+      + .collapse.show {
        background-color: var(--submenuBackgroundColor);
      }
    }
diff --git a/client/src/app/shared/shared-instance/instance-features-table.component.scss b/client/src/app/shared/shared-instance/instance-features-table.component.scss
index d17e91fc2..11cf11616 100644
--- a/client/src/app/shared/shared-instance/instance-features-table.component.scss
+++ b/client/src/app/shared/shared-instance/instance-features-table.component.scss
@@ -19,7 +19,7 @@ table {
    .more-info {
      font-style: italic;
      font-weight: initial;
-      font-size: 14px
+      font-size: 14px;
    }
  }
diff --git a/client/src/app/shared/shared-main/account/account.model.ts b/client/src/app/shared/shared-main/account/account.model.ts
index 65e6798d4..6d9f0ee65 100644
--- a/client/src/app/shared/shared-main/account/account.model.ts
+++ b/client/src/app/shared/shared-main/account/account.model.ts
@@ -14,7 +14,7 @@ export class Account extends Actor implements ServerAccount {
  userId?: number
  static GET_ACTOR_AVATAR_URL (actor: { avatar?: { url?: string, path: string } }) {
-    return Actor.GET_ACTOR_AVATAR_URL(actor) || this.GET_DEFAULT_AVATAR_URL()
+    return Actor.GET_ACTOR_AVATAR_URL(actor)
  }
  static GET_DEFAULT_AVATAR_URL () {
@@ -24,8 +24,6 @@ export class Account extends Actor implements ServerAccount {
  constructor (hash: ServerAccount) {
    super(hash)
-    this.updateComputedAttributes()
    this.displayName = hash.displayName
    this.description = hash.description
    this.userId = hash.userId
@@ -40,16 +38,9 @@ export class Account extends Actor implements ServerAccount {
  updateAvatar (newAvatar: ActorImage) {
    this.avatar = newAvatar
-    this.updateComputedAttributes()
  }
  resetAvatar () {
    this.avatar = null
-    this.avatarUrl = Account.GET_DEFAULT_AVATAR_URL()
-  }
-  private updateComputedAttributes () {
-    this.avatarUrl = Account.GET_ACTOR_AVATAR_URL(this)
  }
 }
diff --git a/client/src/app/shared/shared-main/account/actor.model.ts b/client/src/app/shared/shared-main/account/actor.model.ts
index 4b036341f..6ba0bb09e 100644
--- a/client/src/app/shared/shared-main/account/actor.model.ts
+++ b/client/src/app/shared/shared-main/account/actor.model.ts
@@ -15,7 +15,6 @@ export abstract class Actor implements ServerActor {
  updatedAt: Date | string
  avatar: ActorImage
-  avatarUrl: string
  isLocal: boolean
diff --git a/client/src/app/shared/shared-main/buttons/action-dropdown.component.scss b/client/src/app/shared/shared-main/buttons/action-dropdown.component.scss
index 724a04efc..b9a4d46dc 100644
--- a/client/src/app/shared/shared-main/buttons/action-dropdown.component.scss
+++ b/client/src/app/shared/shared-main/buttons/action-dropdown.component.scss
@@ -8,6 +8,9 @@
 .action-button {
  @include peertube-button;
+  display: inline-block;
+  padding: 0 10px;
  &.button-styled {
    &.grey {
@@ -18,14 +21,13 @@
      @include orange-button;
    }
-    &:hover, &:active, &:focus {
+    &:hover,
+    &:active,
+    &:focus {
      background-color: $grey-background-color;
    }
  }
-  display: inline-block;
-  padding: 0 10px;
  &::after {
    display: none;
  }
@@ -64,7 +66,8 @@
      @include dropdown-with-icon-item;
    }
-    a, span {
+    a,
+    span {
      display: block;
      width: 100%;
    }
diff --git a/client/src/app/shared/shared-main/buttons/button.component.scss b/client/src/app/shared/shared-main/buttons/button.component.scss
index f73b7b808..09b5f95d7 100644
--- a/client/src/app/shared/shared-main/buttons/button.component.scss
+++ b/client/src/app/shared/shared-main/buttons/button.component.scss
@@ -1,6 +1,16 @@
 @import '_variables';
 @import '_mixins';
+@mixin responsive-label {
+  .action-button {
+    padding: 0 13px;
+  }
+  .button-label {
+    display: none;
+  }
+}
 :host {
  outline: none;
 }
@@ -46,12 +56,12 @@ span[class$=-button] {
 // In a table, try to minimize the space taken by this button
 @media screen and (max-width: 1400px) {
  :host-context(td) {
-    .action-button {
+    @include responsive-label;
-      padding: 0 13px;
+  }
-    }
+}
-    .button-label {
+@media screen and (max-width: $small-view) {
-      display: none;
+  .responsive-label {
-    }
+    @include responsive-label;
  }
 }
diff --git a/client/src/app/shared/shared-main/buttons/button.component.ts b/client/src/app/shared/shared-main/buttons/button.component.ts
index 1d2be0bf9..ee74b3d12 100644
--- a/client/src/app/shared/shared-main/buttons/button.component.ts
+++ b/client/src/app/shared/shared-main/buttons/button.component.ts
@@ -3,7 +3,7 @@ import { GlobalIconName } from '@app/shared/shared-icons'
 @Component({
  selector: 'my-button',
-  styleUrls: ['./button.component.scss'],
+  styleUrls: [ './button.component.scss' ],
  templateUrl: './button.component.html'
 })
@@ -14,6 +14,7 @@ export class ButtonComponent {
  @Input() title: string = undefined
  @Input() loading = false
  @Input() disabled = false
+  @Input() responsiveLabel = false
  getTitle () {
    return this.title || this.label
@@ -22,7 +23,8 @@ export class ButtonComponent {
  getClasses () {
    return {
      [this.className]: true,
-      disabled: this.disabled
+      disabled: this.disabled,
+      'responsive-label': this.responsiveLabel
    }
  }
 }
diff --git a/client/src/app/shared/shared-main/buttons/delete-button.component.html b/client/src/app/shared/shared-main/buttons/delete-button.component.html
index c94d8d0c9..d7a6702a7 100644
--- a/client/src/app/shared/shared-main/buttons/delete-button.component.html
+++ b/client/src/app/shared/shared-main/buttons/delete-button.component.html
@@ -1,4 +1,7 @@
-<span class="action-button action-button-delete grey-button" [ngbTooltip]="title" role="button" tabindex="0">
+<span
+  class="action-button action-button-delete grey-button"
+  [ngClass]="{ 'responsive-label': responsiveLabel }" [ngbTooltip]="title" role="button" tabindex="0"
+>
  <my-global-icon iconName="delete" aria-hidden="true"></my-global-icon>
  <span class="button-label" *ngIf="label">{{ label }}</span>
diff --git a/client/src/app/shared/shared-main/buttons/delete-button.component.ts b/client/src/app/shared/shared-main/buttons/delete-button.component.ts
index 18995422a..c091f5309 100644
--- a/client/src/app/shared/shared-main/buttons/delete-button.component.ts
+++ b/client/src/app/shared/shared-main/buttons/delete-button.component.ts
@@ -9,6 +9,7 @@ import { Component, Input, OnInit } from '@angular/core'
 export class DeleteButtonComponent implements OnInit {
  @Input() label: string
  @Input() title: string
+  @Input() responsiveLabel = false
  ngOnInit () {
    // <my-delete-button /> No label
diff --git a/client/src/app/shared/shared-main/buttons/edit-button.component.html b/client/src/app/shared/shared-main/buttons/edit-button.component.html
index ecb709be1..8beeee6c4 100644
--- a/client/src/app/shared/shared-main/buttons/edit-button.component.html
+++ b/client/src/app/shared/shared-main/buttons/edit-button.component.html
@@ -1,4 +1,7 @@
-<a class="action-button action-button-edit grey-button" [routerLink]="routerLink" [ngbTooltip]="title">
+<a
+  class="action-button action-button-edit grey-button"
+  [ngClass]="{ 'responsive-label': responsiveLabel }" [routerLink]="routerLink" [ngbTooltip]="title"
+>
  <my-global-icon iconName="edit" aria-hidden="true"></my-global-icon>
  <span class="button-label" *ngIf="label">{{ label }}</span>
diff --git a/client/src/app/shared/shared-main/buttons/edit-button.component.ts b/client/src/app/shared/shared-main/buttons/edit-button.component.ts
index 4b76551ca..24c8625ff 100644
--- a/client/src/app/shared/shared-main/buttons/edit-button.component.ts
+++ b/client/src/app/shared/shared-main/buttons/edit-button.component.ts
@@ -5,11 +5,11 @@ import { Component, Input, OnInit } from '@angular/core'
  styleUrls: [ './button.component.scss' ],
  templateUrl: './edit-button.component.html'
 })
 export class EditButtonComponent implements OnInit {
  @Input() label: string
  @Input() title: string
  @Input() routerLink: string[] | string = []
+  @Input() responsiveLabel = false
  ngOnInit () {
    // <my-edit-button /> No label
diff --git a/client/src/app/shared/shared-main/date/date-toggle.component.scss b/client/src/app/shared/shared-main/date/date-toggle.component.scss
index 86700d1d4..b87f7c475 100644
--- a/client/src/app/shared/shared-main/date/date-toggle.component.scss
+++ b/client/src/app/shared/shared-main/date/date-toggle.component.scss
@@ -1,5 +1,5 @@
 .date-toggle {
  &:hover {
-    cursor: default
+    cursor: default;
  }
 }
diff --git a/client/src/app/shared/shared-main/feeds/feed.component.scss b/client/src/app/shared/shared-main/feeds/feed.component.scss
index b655ee708..d39f31d70 100644
--- a/client/src/app/shared/shared-main/feeds/feed.component.scss
+++ b/client/src/app/shared/shared-main/feeds/feed.component.scss
@@ -5,14 +5,14 @@
  width: 100%;
  a {
-    color: black;
+    color: #000;
    display: block;
  }
 }
 my-global-icon {
+  @include apply-svg-color(pvar(--mainForegroundColor));
  cursor: pointer;
  width: 100%;
-  @include apply-svg-color(pvar(--mainForegroundColor))
 }
diff --git a/client/src/app/shared/shared-main/loaders/loader.component.scss b/client/src/app/shared/shared-main/loaders/loader.component.scss
index ffac9c707..64138afe4 100644
--- a/client/src/app/shared/shared-main/loaders/loader.component.scss
+++ b/client/src/app/shared/shared-main/loaders/loader.component.scss
@@ -20,7 +20,7 @@
  border: 4px solid;
  border-radius: 50%;
  animation: loader 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
-  border-color: #999999 transparent transparent transparent;
+  border-color: #999999 transparent transparent;
 }
 .loader div:nth-child(1) {
diff --git a/client/src/app/shared/shared-main/misc/help.component.scss b/client/src/app/shared/shared-main/misc/help.component.scss
index ccc91ffab..68d7ad48f 100644
--- a/client/src/app/shared/shared-main/misc/help.component.scss
+++ b/client/src/app/shared/shared-main/misc/help.component.scss
@@ -2,20 +2,19 @@
 @import '_mixins';
 .help-tooltip-button {
-  cursor: pointer;
+  @include disable-outline;
-  border: none;
+  cursor: pointer;
+  border: 0;
  margin: 5px;
  my-global-icon {
+    @include apply-svg-color(pvar(--greyForegroundColor));
    width: 17px;
    position: relative;
    top: -1px;
-    @include apply-svg-color(pvar(--greyForegroundColor))
  }
-  @include disable-outline;
 }
 ::ng-deep {
diff --git a/client/src/app/shared/shared-main/misc/list-overflow.component.html b/client/src/app/shared/shared-main/misc/list-overflow.component.html
index 986572801..b2e0982f1 100644
--- a/client/src/app/shared/shared-main/misc/list-overflow.component.html
+++ b/client/src/app/shared/shared-main/misc/list-overflow.component.html
@@ -2,19 +2,19 @@
  <span [id]="getId(id)" #itemsRendered *ngFor="let item of items; index as id">
    <ng-container *ngTemplateOutlet="itemTemplate; context: {item: item}"></ng-container>
  </span>
-  
  <ng-container *ngIf="isMenuDisplayed()">
    <button *ngIf="isInMobileView" class="btn btn-outline-secondary btn-sm list-overflow-menu" (click)="toggleModal()">
      <span class="glyphicon glyphicon-chevron-down"></span>
    </button>
-  
    <div *ngIf="!isInMobileView" class="list-overflow-menu" ngbDropdown container="body" #dropdown="ngbDropdown" (mouseleave)="closeDropdownIfHovered(dropdown)" (mouseenter)="openDropdownOnHover(dropdown)">
-      <button class="btn btn-outline-secondary btn-sm" [ngClass]="{ routeActive: active }"
+      <button class="btn btn-outline-secondary btn-sm" [ngClass]="{ 'route-active': active }"
        ngbDropdownAnchor (click)="dropdownAnchorClicked(dropdown)" role="button"
      >
        <span class="glyphicon glyphicon-chevron-down"></span>
      </button>
-  
      <div ngbDropdownMenu>
        <a *ngFor="let item of items | slice:showItemsUntilIndexExcluded:items.length"
          [routerLink]="item.routerLink" routerLinkActive="active" class="dropdown-item">
diff --git a/client/src/app/shared/shared-main/misc/list-overflow.component.scss b/client/src/app/shared/shared-main/misc/list-overflow.component.scss
index 1ec044489..7e31d3850 100644
--- a/client/src/app/shared/shared-main/misc/list-overflow.component.scss
+++ b/client/src/app/shared/shared-main/misc/list-overflow.component.scss
@@ -15,13 +15,13 @@
 button {
  width: 30px;
-  border: none;
+  border: 0;
  &::after {
    display: none;
  }
-  &.routeActive {
+  &.route-active {
    &::after {
      display: inherit;
      border: 2px solid pvar(--mainColor);
@@ -36,7 +36,7 @@ button {
  margin-top: 0 !important;
  position: static;
  right: auto;
-  bottom: auto
+  bottom: auto;
 }
 .modal-body {
diff --git a/client/src/app/shared/shared-main/misc/top-menu-dropdown.component.scss b/client/src/app/shared/shared-main/misc/top-menu-dropdown.component.scss
index 84dd7dce3..ffabb3646 100644
--- a/client/src/app/shared/shared-main/misc/top-menu-dropdown.component.scss
+++ b/client/src/app/shared/shared-main/misc/top-menu-dropdown.component.scss
@@ -11,12 +11,12 @@
  }
 }
-::ng-deep .dropdown-toggle::after {
+.sub-menu ::ng-deep .dropdown-toggle::after {
  position: relative;
  top: 2px;
 }
-::ng-deep .dropdown-menu {
+.sub-menu ::ng-deep .dropdown-menu {
  margin-top: 0 !important;
 }
diff --git a/client/src/app/shared/shared-main/users/user-notification.model.ts b/client/src/app/shared/shared-main/users/user-notification.model.ts
index 88a4811da..ed5791794 100644
--- a/client/src/app/shared/shared-main/users/user-notification.model.ts
+++ b/client/src/app/shared/shared-main/users/user-notification.model.ts
@@ -258,10 +258,10 @@ export class UserNotification implements UserNotificationServer {
  }
  private setAccountAvatarUrl (actor: { avatarUrl?: string, avatar?: { url?: string, path: string } }) {
-    actor.avatarUrl = Account.GET_ACTOR_AVATAR_URL(actor)
+    actor.avatarUrl = Account.GET_ACTOR_AVATAR_URL(actor) || Account.GET_DEFAULT_AVATAR_URL()
  }
  private setVideoChannelAvatarUrl (actor: { avatarUrl?: string, avatar?: { url?: string, path: string } }) {
-    actor.avatarUrl = VideoChannel.GET_ACTOR_AVATAR_URL(actor)
+    actor.avatarUrl = VideoChannel.GET_ACTOR_AVATAR_URL(actor) || VideoChannel.GET_DEFAULT_AVATAR_URL()
  }
 }
diff --git a/client/src/app/shared/shared-main/users/user-notifications.component.scss b/client/src/app/shared/shared-main/users/user-notifications.component.scss
index 5166bd559..b69d4b5d6 100644
--- a/client/src/app/shared/shared-main/users/user-notifications.component.scss
+++ b/client/src/app/shared/shared-main/users/user-notifications.component.scss
@@ -21,16 +21,19 @@
  }
  my-global-icon {
+    @include apply-svg-color(#333);
    width: 24px;
    margin-right: 11px;
    margin-left: 3px;
-    @include apply-svg-color(#333);
  }
  .avatar {
-    @include avatar(30px);
+    width: 30px;
+    height: 30px;
+    min-width: 30px;
+    min-height: 30px;
+    border-radius: 5px;
    margin-right: 10px;
  }
diff --git a/client/src/app/shared/shared-main/users/user-quota.component.scss b/client/src/app/shared/shared-main/users/user-quota.component.scss
index c670559d3..c06cafe29 100644
--- a/client/src/app/shared/shared-main/users/user-quota.component.scss
+++ b/client/src/app/shared/shared-main/users/user-quota.component.scss
@@ -11,7 +11,8 @@ label {
    margin-right: 5px;
  }
-  &, .progress {
+  &,
+  .progress {
    width: 100% !important;
  }
diff --git a/client/src/app/shared/shared-main/video-channel/video-channel.model.ts b/client/src/app/shared/shared-main/video-channel/video-channel.model.ts
index 1ba3fcc0e..c40dd5311 100644
--- a/client/src/app/shared/shared-main/video-channel/video-channel.model.ts
+++ b/client/src/app/shared/shared-main/video-channel/video-channel.model.ts
@@ -18,14 +18,13 @@ export class VideoChannel extends Actor implements ServerVideoChannel {
  ownerAccount?: ServerAccount
  ownerBy?: string
-  ownerAvatarUrl?: string
  videosCount?: number
  viewsPerDay?: ViewsPerDate[]
  static GET_ACTOR_AVATAR_URL (actor: object) {
-    return Actor.GET_ACTOR_AVATAR_URL(actor) || this.GET_DEFAULT_AVATAR_URL()
+    return Actor.GET_ACTOR_AVATAR_URL(actor)
  }
  static GET_ACTOR_BANNER_URL (channel: ServerVideoChannel) {
@@ -67,7 +66,6 @@ export class VideoChannel extends Actor implements ServerVideoChannel {
    if (hash.ownerAccount) {
      this.ownerAccount = hash.ownerAccount
      this.ownerBy = Actor.CREATE_BY_STRING(hash.ownerAccount.name, hash.ownerAccount.host)
-      this.ownerAvatarUrl = Account.GET_ACTOR_AVATAR_URL(this.ownerAccount)
    }
    this.updateComputedAttributes()
@@ -94,7 +92,6 @@ export class VideoChannel extends Actor implements ServerVideoChannel {
  }
  updateComputedAttributes () {
-    this.avatarUrl = VideoChannel.GET_ACTOR_AVATAR_URL(this)
    this.bannerUrl = VideoChannel.GET_ACTOR_BANNER_URL(this)
  }
 }
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 14c507295..526d10e32 100644
--- a/client/src/app/shared/shared-main/video/video.model.ts
+++ b/client/src/app/shared/shared-main/video/video.model.ts
@@ -20,8 +20,6 @@ export class Video implements VideoServerModel {
  byVideoChannel: string
  byAccount: string
-  videoChannelAvatarUrl: string
  createdAt: Date
  updatedAt: Date
  publishedAt: Date
@@ -143,7 +141,6 @@ export class Video implements VideoServerModel {
    this.byAccount = Actor.CREATE_BY_STRING(hash.account.name, hash.account.host)
    this.byVideoChannel = Actor.CREATE_BY_STRING(hash.channel.name, hash.channel.host)
-    this.videoChannelAvatarUrl = VideoChannel.GET_ACTOR_AVATAR_URL(this.channel)
    this.category.label = peertubeTranslate(this.category.label, translations)
    this.licence.label = peertubeTranslate(this.licence.label, translations)
diff --git a/client/src/app/shared/shared-main/video/video.service.ts b/client/src/app/shared/shared-main/video/video.service.ts
index 0b708b692..7b17bd2ab 100644
--- a/client/src/app/shared/shared-main/video/video.service.ts
+++ b/client/src/app/shared/shared-main/video/video.service.ts
@@ -124,7 +124,17 @@ export class VideoService implements VideosProvider {
    let params = new HttpParams()
    params = this.restService.addRestGetParams(params, pagination, sort)
-    params = this.restService.addObjectParams(params, { search })
+    if (search) {
+      const filters = this.restService.parseQueryStringFilter(search, {
+        isLive: {
+          prefix: 'isLive:',
+          isBoolean: true
+        }
+      })
+      params = this.restService.addObjectParams(params, filters)
+    }
    return this.authHttp
               .get<ResultList<Video>>(UserService.BASE_USERS_URL + 'me/videos', { params })
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 3f2f55559..a9fac0810 100644
--- a/client/src/app/shared/shared-moderation/account-blocklist.component.html
+++ b/client/src/app/shared/shared-moderation/account-blocklist.component.html
@@ -11,13 +11,8 @@
 >
  <ng-template pTemplate="caption">
    <div class="caption">
-      <div class="ml-auto has-feedback has-clear">
+      <div class="ml-auto">
-        <input
+        <my-advanced-input-filter (search)="onSearch($event)"></my-advanced-input-filter>
-          type="text" name="table-filter" id="table-filter" i18n-placeholder placeholder="Filter..."
-          (keyup)="onSearch($event)"
-        >
-        <a class="glyphicon glyphicon-remove-sign form-control-feedback form-control-clear" (click)="resetSearch()"></a>
-        <span class="sr-only" i18n>Clear filters</span>
      </div>
    </div>
  </ng-template>
@@ -38,7 +33,7 @@
      <td>
        <a [href]="accountBlock.blockedAccount.url" i18n-title title="Open account in a new tab" target="_blank" rel="noopener noreferrer">
          <div class="chip two-lines">
-            <my-account-avatar [account]="accountBlock.blockedAccount"></my-account-avatar>
+            <my-actor-avatar [account]="accountBlock.blockedAccount"></my-actor-avatar>
            <div>
              {{ accountBlock.blockedAccount.displayName }}
              <span class="text-muted">{{ accountBlock.blockedAccount.nameWithHost }}</span>
diff --git a/client/src/app/shared/shared-moderation/account-blocklist.component.scss b/client/src/app/shared/shared-moderation/account-blocklist.component.scss
index 3eede44eb..bc441811e 100644
--- a/client/src/app/shared/shared-moderation/account-blocklist.component.scss
+++ b/client/src/app/shared/shared-moderation/account-blocklist.component.scss
@@ -1,15 +1,6 @@
 @import '_variables';
 @import '_mixins';
-.caption {
-  justify-content: flex-end;
-  input {
-    @include peertube-input-text(250px);
-    flex-grow: 1;
-  }
-}
 .chip {
  @include chip;
 }
@@ -17,4 +8,4 @@
 .unblock-button {
  @include peertube-button;
  @include grey-button;
-}
-\ No newline at end of file
+}
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 1bce65bf0..1146aeec0 100644
--- a/client/src/app/shared/shared-moderation/account-blocklist.component.ts
+++ b/client/src/app/shared/shared-moderation/account-blocklist.component.ts
@@ -44,12 +44,12 @@ export class GenericAccountBlocklistComponent extends RestTable implements OnIni
            : $localize`Account ${blockedAccount.nameWithHost} unmuted by your instance.`
        )
-        this.loadData()
+        this.reloadData()
      }
    )
  }
-  protected loadData () {
+  protected reloadData () {
    const operation = this.mode === BlocklistComponentType.Account
      ? this.blocklistService.getUserAccountBlocklist({
        pagination: this.pagination,
diff --git a/client/src/app/shared/shared-moderation/moderation.scss b/client/src/app/shared/shared-moderation/moderation.scss
index cdcc12fe0..b13d06f03 100644
--- a/client/src/app/shared/shared-moderation/moderation.scss
+++ b/client/src/app/shared/shared-moderation/moderation.scss
@@ -17,33 +17,25 @@
    word-wrap: break-word;
    ::ng-deep p:last-child {
-      margin-bottom: 0px !important;
+      margin-bottom: 0 !important;
    }
  }
 }
 .screenratio {
-  div {
-    @include miniature-thumbnail;
-    display: inline-flex;
-    justify-content: center;
-    align-items: center;
-    color: pvar(--inputPlaceholderColor);
-  }
  @include block-ratio($selector: 'div, ::ng-deep iframe') {
    width: 100% !important;
    height: 100% !important;
    left: 0;
  };
-}
-.input-group {
+  div {
-  @include peertube-input-group(300px);
+    @include miniature-thumbnail;
-  .dropdown-toggle::after {
+    display: inline-flex;
-    margin-left: 0;
+    justify-content: center;
+    align-items: center;
+    color: pvar(--inputPlaceholderColor);
  }
 }
@@ -51,15 +43,6 @@
  @include chip;
 }
-.caption {
-  justify-content: flex-end;
-  input {
-    @include peertube-input-text(250px);
-    flex-grow: 1;
-  }
-}
 my-action-dropdown.show {
  ::ng-deep .dropdown-root {
    display: block !important;
@@ -93,15 +76,15 @@ my-action-dropdown.show {
  display: inline-flex;
  .table-video-image {
-    @include miniature-thumbnail;
    $image-height: 45px;
+    @include miniature-thumbnail;
    height: $image-height;
    width: #{(16/9) * $image-height};
    margin-right: 0.5rem;
    border-radius: 2px;
-    border: none;
+    border: 0;
    background: transparent;
    display: inline-flex;
    justify-content: center;
@@ -139,7 +122,7 @@ my-action-dropdown.show {
    div .glyphicon {
      font-size: 80%;
-      color: gray;
+      color: #808080;
      margin-left: 0.1rem;
    }
diff --git a/client/src/app/shared/shared-moderation/server-blocklist.component.html b/client/src/app/shared/shared-moderation/server-blocklist.component.html
index 537186f05..c6d29bb21 100644
--- a/client/src/app/shared/shared-moderation/server-blocklist.component.html
+++ b/client/src/app/shared/shared-moderation/server-blocklist.component.html
@@ -4,8 +4,9 @@
 </h1>
 <p-table
-  [value]="blockedServers" [lazy]="true" [paginator]="totalRecords > 0" [totalRecords]="totalRecords" [rows]="rowsPerPage" [rowsPerPageOptions]="rowsPerPageOptions"
+  [value]="blockedServers" [paginator]="totalRecords > 0" [totalRecords]="totalRecords" [rows]="rowsPerPage" [rowsPerPageOptions]="rowsPerPageOptions"
-  [sortField]="sort.field" [sortOrder]="sort.order" (onLazyLoad)="loadLazy($event)" (onPage)="onPage($event)"
+  [sortField]="sort.field" [sortOrder]="sort.order" (onPage)="onPage($event)"
+  [lazy]="true" (onLazyLoad)="loadLazy($event)" [lazyLoadOnInit]="false"
  [showCurrentPageReport]="true" i18n-currentPageReportTemplate
  currentPageReportTemplate="Showing {{'{first}'}} to {{'{last}'}} of {{'{totalRecords}'}} muted instances"
 >
@@ -18,13 +19,8 @@
        </a>
      </div>
-      <div class="ml-auto has-feedback has-clear">
+      <div class="ml-auto">
-        <input
+        <my-advanced-input-filter (search)="onSearch($event)"></my-advanced-input-filter>
-          type="text" name="table-filter" id="table-filter" i18n-placeholder placeholder="Filter..."
-          (keyup)="onSearch($event)"
-        >
-        <a class="glyphicon glyphicon-remove-sign form-control-feedback form-control-clear" (click)="resetSearch()"></a>
-        <span class="sr-only" i18n>Clear filters</span>
      </div>
    </div>
  </ng-template>
diff --git a/client/src/app/shared/shared-moderation/server-blocklist.component.scss b/client/src/app/shared/shared-moderation/server-blocklist.component.scss
index 31db4d92b..a22972c5f 100644
--- a/client/src/app/shared/shared-moderation/server-blocklist.component.scss
+++ b/client/src/app/shared/shared-moderation/server-blocklist.component.scss
@@ -5,7 +5,8 @@ a {
  @include disable-default-a-behaviour;
  display: inline-block;
-  &, &:hover {
+  &,
+  &:hover {
    color: pvar(--mainForegroundColor);
  }
@@ -15,15 +16,6 @@ a {
  }
 }
-.caption {
-  justify-content: flex-end;
-  input {
-    @include peertube-input-text(250px);
-    flex-grow: 1;
-  }
-}
 .unblock-button {
  @include peertube-button;
  @include grey-button;
@@ -33,15 +25,6 @@ a {
  @include create-button;
 }
-.caption {
-  justify-content: flex-end;
-  input {
-    @include peertube-input-text(250px);
-    flex-grow: 1;
-  }
-}
 .chip {
  @include chip;
 }
diff --git a/client/src/app/shared/shared-moderation/server-blocklist.component.ts b/client/src/app/shared/shared-moderation/server-blocklist.component.ts
index 546fd53c3..274d8f6e9 100644
--- a/client/src/app/shared/shared-moderation/server-blocklist.component.ts
+++ b/client/src/app/shared/shared-moderation/server-blocklist.component.ts
@@ -46,7 +46,7 @@ export class GenericServerBlocklistComponent extends RestTable implements OnInit
            : $localize`Instance ${host} unmuted by your instance.`
        )
-        this.loadData()
+        this.reloadData()
      }
    )
  }
@@ -69,13 +69,13 @@ export class GenericServerBlocklistComponent extends RestTable implements OnInit
              : $localize`Instance ${domain} muted by your instance.`
          )
-          this.loadData()
+          this.reloadData()
        }
      )
    })
  }
-  protected loadData () {
+  protected reloadData () {
    const operation = this.mode === BlocklistComponentType.Account
      ? this.blocklistService.getUserServerBlocklist({
        pagination: this.pagination,
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 c7e201792..95213e2bd 100644
--- a/client/src/app/shared/shared-moderation/shared-moderation.module.ts
+++ b/client/src/app/shared/shared-moderation/shared-moderation.module.ts
@@ -13,7 +13,7 @@ import { UserBanModalComponent } from './user-ban-modal.component'
 import { UserModerationDropdownComponent } from './user-moderation-dropdown.component'
 import { VideoBlockComponent } from './video-block.component'
 import { VideoBlockService } from './video-block.service'
-import { SharedAccountAvatarModule } from '../shared-account-avatar/shared-account-avatar.module'
+import { SharedActorImageModule } from '../shared-actor-image/shared-actor-image.module'
 @NgModule({
  imports: [
@@ -21,7 +21,7 @@ import { SharedAccountAvatarModule } from '../shared-account-avatar/shared-accou
    SharedFormModule,
    SharedGlobalIconModule,
    SharedVideoCommentModule,
-    SharedAccountAvatarModule
+    SharedActorImageModule
  ],
  declarations: [
diff --git a/client/src/app/shared/shared-moderation/video-block.component.scss b/client/src/app/shared/shared-moderation/video-block.component.scss
index afa0d96f7..a6e33070b 100644
--- a/client/src/app/shared/shared-moderation/video-block.component.scss
+++ b/client/src/app/shared/shared-moderation/video-block.component.scss
@@ -7,5 +7,5 @@ textarea {
 .live-info {
  font-size: 15px;
-  margin: 40px 0 20px 0;
+  margin: 40px 0 20px;
 }
diff --git a/client/src/app/shared/shared-search/advanced-search.model.ts b/client/src/app/shared/shared-search/advanced-search.model.ts
index 30badc8fa..0e3924841 100644
--- a/client/src/app/shared/shared-search/advanced-search.model.ts
+++ b/client/src/app/shared/shared-search/advanced-search.model.ts
@@ -1,4 +1,4 @@
-import { NSFWQuery, SearchTargetType } from '@shared/models'
+import { BooleanBothQuery, SearchTargetType } from '@shared/models'
 export class AdvancedSearch {
  startDate: string // ISO 8601
@@ -7,7 +7,7 @@ export class AdvancedSearch {
  originallyPublishedStartDate: string // ISO 8601
  originallyPublishedEndDate: string // ISO 8601
-  nsfw: NSFWQuery
+  nsfw: BooleanBothQuery
  categoryOneOf: string
@@ -33,7 +33,7 @@ export class AdvancedSearch {
    endDate?: string
    originallyPublishedStartDate?: string
    originallyPublishedEndDate?: string
-    nsfw?: NSFWQuery
+    nsfw?: BooleanBothQuery
    categoryOneOf?: string
    licenceOneOf?: string
    languageOneOf?: string
diff --git a/client/src/app/shared/shared-thumbnail/video-thumbnail.component.scss b/client/src/app/shared/shared-thumbnail/video-thumbnail.component.scss
index ea59ab346..e678d6edf 100644
--- a/client/src/app/shared/shared-thumbnail/video-thumbnail.component.scss
+++ b/client/src/app/shared/shared-thumbnail/video-thumbnail.component.scss
@@ -11,7 +11,7 @@
  width: 100%;
  position: absolute;
  bottom: 0;
-  background-color: rgba(0, 0, 0, 0.20);
+  background-color: rgba(0, 0, 0, 0.2);
  div {
    height: 100%;
@@ -39,8 +39,8 @@
  top: 5px;
  font-weight: $font-bold;
-  &.warning { background-color: orange; }
+  &.warning { background-color: #ffa500; }
-  &.danger { background-color: red; }
+  &.danger { background-color: #ff0000; }
 }
 .video-thumbnail-duration-overlay,
@@ -77,9 +77,9 @@
  padding: 3px;
  my-global-icon {
+    @include apply-svg-color(#fff);
    width: 22px;
    height: 22px;
-    @include apply-svg-color(#fff);
  }
 }
diff --git a/client/src/app/shared/shared-user-settings/user-video-settings.component.html b/client/src/app/shared/shared-user-settings/user-video-settings.component.html
index aa261fdce..a49e11485 100644
--- a/client/src/app/shared/shared-user-settings/user-video-settings.component.html
+++ b/client/src/app/shared/shared-user-settings/user-video-settings.component.html
@@ -5,7 +5,7 @@
    <my-help>
      <ng-template ptTemplate="customHtml">
        <ng-container i18n>
-          With <strong>Do not list</strong> or <strong>Blur thumbnails</strong>, a confirmation will be requested to watch the video.
+          With <strong>Hide</strong> or <strong>Blur thumbnails</strong>, a confirmation will be requested to watch the video.
        </ng-container>
      </ng-template>
    </my-help>
@@ -13,7 +13,7 @@
    <div class="peertube-select-container">
      <select id="nsfwPolicy" formControlName="nsfwPolicy" class="form-control">
        <option i18n value="undefined" disabled>Policy for sensitive videos</option>
-        <option i18n value="do_not_list">Do not list</option>
+        <option i18n value="do_not_list">Hide</option>
        <option i18n value="blur">Blur thumbnails</option>
        <option i18n value="display">Display</option>
      </select>
diff --git a/client/src/app/shared/shared-user-settings/user-video-settings.component.ts b/client/src/app/shared/shared-user-settings/user-video-settings.component.ts
index d74c2b2d8..ae95030c7 100644
--- a/client/src/app/shared/shared-user-settings/user-video-settings.component.ts
+++ b/client/src/app/shared/shared-user-settings/user-video-settings.component.ts
@@ -38,8 +38,6 @@ export class UserVideoSettingsComponent extends FormReactive implements OnInit,
  ngOnInit () {
    this.allLanguagesGroup = $localize`All languages`
-    let oldForm: any
    this.buildForm({
      nsfwPolicy: null,
      webTorrentEnabled: null,
@@ -73,16 +71,7 @@ export class UserVideoSettingsComponent extends FormReactive implements OnInit,
        videoLanguages
      })
-      if (this.reactiveUpdate) {
+      if (this.reactiveUpdate) this.handleReactiveUpdate()
-        oldForm = { ...this.form.value }
-        this.formValuesWatcher = this.form.valueChanges.subscribe((formValue: any) => {
-          const updatedKey = Object.keys(formValue).find(k => formValue[k] !== oldForm[k])
-          oldForm = { ...this.form.value }
-          this.updateDetails([ updatedKey ])
-        })
-      }
    })
  }
@@ -96,7 +85,7 @@ export class UserVideoSettingsComponent extends FormReactive implements OnInit,
    const autoPlayVideo = this.form.value['autoPlayVideo']
    const autoPlayNextVideo = this.form.value['autoPlayNextVideo']
-    const videoLanguagesForm = this.form.value['videoLanguages']
+    let videoLanguagesForm = this.form.value['videoLanguages']
    if (Array.isArray(videoLanguagesForm)) {
      if (videoLanguagesForm.length > 20) {
@@ -104,13 +93,14 @@ export class UserVideoSettingsComponent extends FormReactive implements OnInit,
        return
      }
+      // Automatically use "All languages" if the user did not select any language
      if (videoLanguagesForm.length === 0) {
-        this.notifier.error($localize`You need to enable at least 1 video language.`)
+        videoLanguagesForm = [ this.allLanguagesGroup ]
-        return
+        this.form.patchValue({ videoLanguages: [ { group: this.allLanguagesGroup } ] })
      }
    }
-    const videoLanguages = this.getVideoLanguages(videoLanguagesForm)
+    const videoLanguages = this.buildLanguagesFromForm(videoLanguagesForm)
    let details: UserUpdateMe = {
      nsfwPolicy,
@@ -127,22 +117,13 @@ export class UserVideoSettingsComponent extends FormReactive implements OnInit,
    if (onlyKeys) details = pick(details, onlyKeys)
    if (this.authService.isLoggedIn()) {
-      this.userService.updateMyProfile(details).subscribe(
+      return this.updateLoggedProfile(details)
-        () => {
-          this.authService.refreshUserInformation()
-          if (this.notifyOnUpdate) this.notifier.success($localize`Video settings updated.`)
-        },
-        err => this.notifier.error(err.message)
-      )
-    } else {
-      this.userService.updateMyAnonymousProfile(details)
-      if (this.notifyOnUpdate) this.notifier.success($localize`Display/Video settings updated.`)
    }
+    return this.updateAnonymousProfile(details)
  }
-  private getVideoLanguages (videoLanguages: ItemSelectCheckboxValue[]) {
+  private buildLanguagesFromForm (videoLanguages: ItemSelectCheckboxValue[]) {
    if (!Array.isArray(videoLanguages)) return undefined
    // null means "All"
@@ -166,4 +147,34 @@ export class UserVideoSettingsComponent extends FormReactive implements OnInit,
      return l.id + ''
    })
  }
+  private handleReactiveUpdate () {
+    let oldForm = { ...this.form.value }
+    this.formValuesWatcher = this.form.valueChanges.subscribe((formValue: any) => {
+      const updatedKey = Object.keys(formValue)
+                               .find(k => formValue[k] !== oldForm[k])
+      oldForm = { ...this.form.value }
+      this.updateDetails([ updatedKey ])
+    })
+  }
+  private updateLoggedProfile (details: UserUpdateMe) {
+    this.userService.updateMyProfile(details).subscribe(
+      () => {
+        this.authService.refreshUserInformation()
+        if (this.notifyOnUpdate) this.notifier.success($localize`Video settings updated.`)
+      },
+      err => this.notifier.error(err.message)
+    )
+  }
+  private updateAnonymousProfile (details: UserUpdateMe) {
+    this.userService.updateMyAnonymousProfile(details)
+    if (this.notifyOnUpdate) this.notifier.success($localize`Display/Video settings updated.`)
+  }
 }
diff --git a/client/src/app/shared/shared-user-subscription/remote-subscribe.component.scss b/client/src/app/shared/shared-user-subscription/remote-subscribe.component.scss
index 698c5866a..73db0d090 100644
--- a/client/src/app/shared/shared-user-subscription/remote-subscribe.component.scss
+++ b/client/src/app/shared/shared-user-subscription/remote-subscribe.component.scss
@@ -3,4 +3,4 @@
 .btn-remote-follow {
  @include peertube-button;
  @include orange-button;
-}
-\ No newline at end of file
+}
diff --git a/client/src/app/shared/shared-user-subscription/subscribe-button.component.scss b/client/src/app/shared/shared-user-subscription/subscribe-button.component.scss
index f6cdc11c0..897ee7799 100644
--- a/client/src/app/shared/shared-user-subscription/subscribe-button.component.scss
+++ b/client/src/app/shared/shared-user-subscription/subscribe-button.component.scss
@@ -8,8 +8,8 @@
  float: right;
  padding: 0;
-  & > .btn,
+  > .btn,
-  & > .dropdown > .dropdown-toggle {
+  > .dropdown > .dropdown-toggle {
    font-size: 15px;
  }
@@ -20,7 +20,7 @@
  &.big {
    height: 35px;
-    & > button:first-child {
+    > button:first-child {
      width: max-content;
      min-width: 175px;
    }
@@ -29,7 +29,7 @@
      span:first-child {
        line-height: 80%;
      }
-    
      span:not(:first-child) {
        font-size: 75%;
      }
@@ -37,15 +37,15 @@
  }
  // Unlogged
-  & > .dropdown > .dropdown-toggle span {
+  > .dropdown > .dropdown-toggle span {
    padding-right: 3px;
  }
  // Logged
-  & > .btn {
+  > .btn {
    padding-right: 4px;
-    & + .dropdown > button {
+    + .dropdown > button {
      padding-left: 2px;
      &::after {
diff --git a/client/src/app/shared/shared-video-comment/video-comment.service.ts b/client/src/app/shared/shared-video-comment/video-comment.service.ts
index 0f09778df..c5aeb3c12 100644
--- a/client/src/app/shared/shared-video-comment/video-comment.service.ts
+++ b/client/src/app/shared/shared-video-comment/video-comment.service.ts
@@ -190,13 +190,7 @@ export class VideoCommentService {
    const filters = this.restService.parseQueryStringFilter(search, {
      isLocal: {
        prefix: 'local:',
-        isBoolean: true,
+        isBoolean: true
-        handler: v => {
-          if (v === 'true') return v
-          if (v === 'false') return v
-          return undefined
-        }
      },
      searchAccount: { prefix: 'account:' },
diff --git a/client/src/app/shared/shared-video-miniature/abstract-video-list.scss b/client/src/app/shared/shared-video-miniature/abstract-video-list.scss
index 467ca1d2c..d9cf7a14f 100644
--- a/client/src/app/shared/shared-video-miniature/abstract-video-list.scss
+++ b/client/src/app/shared/shared-video-miniature/abstract-video-list.scss
@@ -3,7 +3,7 @@
 @import '_mixins';
 @import '_miniature';
-$iconSize: 16px;
+$icon-size: 16px;
 ::ng-deep my-video-list-header {
  display: flex;
@@ -17,20 +17,19 @@ $iconSize: 16px;
  my-feed {
    display: inline-block;
-    width: calc(#{$iconSize} - 2px);
+    width: calc(#{$icon-size} - 2px);
  }
  .moderation-block {
-    my-global-icon {
-      position: relative;
-      width: $iconSize;
-    }
    margin-left: .4rem;
    display: flex;
    justify-content: flex-end;
    align-items: center;
+    my-global-icon {
+      position: relative;
+      width: $icon-size;
+    }
  }
 }
@@ -72,7 +71,7 @@ $iconSize: 16px;
    .title-page {
      margin-bottom: 10px;
-      margin-right: 0px;
+      margin-right: 0;
    }
  }
 }
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 32cfdfd68..03be6d2ff 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,7 +13,7 @@ import { VideoDownloadComponent } from './video-download.component'
 import { VideoMiniatureComponent } from './video-miniature.component'
 import { VideosSelectionComponent } from './videos-selection.component'
 import { VideoListHeaderComponent } from './video-list-header.component'
-import { SharedAccountAvatarModule } from '../shared-account-avatar/shared-account-avatar.module'
+import { SharedActorImageModule } from '../shared-actor-image/shared-actor-image.module'
 @NgModule({
  imports: [
@@ -25,7 +25,7 @@ import { SharedAccountAvatarModule } from '../shared-account-avatar/shared-accou
    SharedGlobalIconModule,
    SharedVideoLiveModule,
    SharedVideoModule,
-    SharedAccountAvatarModule
+    SharedActorImageModule
  ],
  declarations: [
diff --git a/client/src/app/shared/shared-video-miniature/video-download.component.scss b/client/src/app/shared/shared-video-miniature/video-download.component.scss
index 7f6e03c87..b689b1046 100644
--- a/client/src/app/shared/shared-video-miniature/video-download.component.scss
+++ b/client/src/app/shared/shared-video-miniature/video-download.component.scss
@@ -28,7 +28,7 @@
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
-  border-right: none;
+  border-right: 0;
  select {
    height: inherit;
@@ -85,7 +85,7 @@
  &.metadata-attribute-tags {
    .metadata-attribute-value:not(:nth-child(2)) {
      &::before {
-        content: ', '
+        content: ', ';
      }
    }
  }
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 bc19127aa..645be92bd 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,14 +10,15 @@
  <div class="video-bottom">
    <div class="video-miniature-information">
      <div class="d-flex video-miniature-meta">
-        <a *ngIf="displayOptions.avatar && displayOwnerVideoChannel()" class="channel-avatar" [routerLink]="[ '/video-channels', video.byVideoChannel ]" [title]="channelLinkTitle">
+        <my-actor-avatar
-          <img [src]="getAvatarUrl()" alt="" />
+          *ngIf="displayOptions.avatar && displayOwnerVideoChannel()" [title]="channelLinkTitle"
-        </a>
+          [channel]="video.channel" [size]="actorImageSize" [internalHref]="[ '/video-channels', video.byVideoChannel ]"
+        ></my-actor-avatar>
-        <my-account-avatar
+        <my-actor-avatar
          *ngIf="displayOptions.avatar && displayOwnerAccount()" [title]="channelLinkTitle"
-          [account]="video.account" size="40" [internalHref]="'/video-channels/' + video.byVideoChannel"
+          [account]="video.account" [size]="actorImageSize" [internalHref]="[ '/video-channels', video.byVideoChannel ]"
-        ></my-account-avatar>
+        ></my-actor-avatar>
        <div class="w-100 d-flex flex-column">
          <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 f6f2925f0..5df89d019 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,15 +12,10 @@ $more-button-width: 40px;
  width: calc(100% - #{$more-button-width});
 }
-my-account-avatar,
+my-actor-avatar {
-.channel-avatar {
  margin: 10px 10px 0 0;
 }
-.channel-avatar img{
-  @include channel-avatar(40px);
-}
 .video-miniature-created-at-views {
  font-size: 13px;
 }
@@ -46,7 +41,7 @@ my-account-avatar,
 }
 .video-info-blocked {
-  color: red;
+  color: #ff0000;
  .blocked-reason::before {
    content: ' - ';
@@ -54,7 +49,7 @@ my-account-avatar,
 }
 .video-info-nsfw {
-  color: red;
+  color: #ff0000;
 }
 .video-actions {
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 8d66aaee2..b58c118be 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
@@ -12,6 +12,7 @@ import {
 } from '@angular/core'
 import { AuthService, ScreenService, ServerService, User } from '@app/core'
 import { ServerConfig, VideoPlaylistType, VideoPrivacy, VideoState } from '@shared/models'
+import { ActorAvatarSize } from '../shared-actor-image/actor-avatar.component'
 import { Video } from '../shared-main'
 import { VideoPlaylistService } from '../shared-video-playlist'
 import { VideoActionsDisplayType } from './video-actions-dropdown.component'
@@ -51,6 +52,8 @@ export class VideoMiniatureComponent implements OnInit {
  }
  @Input() displayVideoActions = true
+  @Input() actorImageSize: ActorAvatarSize = '40'
  @Input() displayAsRow = false
  @Input() videoLinkType: VideoLinkType = 'internal'
@@ -180,14 +183,6 @@ export class VideoMiniatureComponent implements OnInit {
    return ''
  }
-  getAvatarUrl () {
-    if (this.displayOwnerAccount()) {
-      return this.video.account.avatar?.url
-    }
-    return this.video.videoChannelAvatarUrl
-  }
  loadActions () {
    if (this.displayVideoActions) this.showActions = true
diff --git a/client/src/app/shared/shared-video-miniature/videos-selection.component.html b/client/src/app/shared/shared-video-miniature/videos-selection.component.html
index dec9e99f3..4ee90ce7f 100644
--- a/client/src/app/shared/shared-video-miniature/videos-selection.component.html
+++ b/client/src/app/shared/shared-video-miniature/videos-selection.component.html
@@ -1,9 +1,9 @@
-<div class="no-results" i18n *ngIf="hasDoneFirstQuery && videos.length === 0">No results.</div>
+<div class="no-results" i18n *ngIf="hasDoneFirstQuery && videos.length === 0">{{ noResultMessage }}</div>
 <div myInfiniteScroller [autoInit]="true" (nearOfBottom)="onNearOfBottom()" [dataObservable]="onDataSubject.asObservable()" class="videos">
  <div class="video" *ngFor="let video of videos; let i = index; trackBy: videoById">
-    <div class="checkbox-container">
+    <div class="checkbox-container" *ngIf="enableSelection">
      <my-peertube-checkbox [inputName]="'video-check-' + video.id" [(ngModel)]="_selection[video.id]"></my-peertube-checkbox>
    </div>
diff --git a/client/src/app/shared/shared-video-miniature/videos-selection.component.ts b/client/src/app/shared/shared-video-miniature/videos-selection.component.ts
index f8c3800d7..d64ee9b98 100644
--- a/client/src/app/shared/shared-video-miniature/videos-selection.component.ts
+++ b/client/src/app/shared/shared-video-miniature/videos-selection.component.ts
@@ -31,6 +31,9 @@ export class VideosSelectionComponent extends AbstractVideoList implements OnIni
  @Input() pagination: ComponentPagination
  @Input() titlePage: string
  @Input() miniatureDisplayOptions: MiniatureDisplayOptions
+  @Input() noResultMessage = $localize`No results.`
+  @Input() enableSelection = true
+  @Input() loadOnInit = true
  @Input() getVideosObservableFunction: (page: number, sort?: VideoSortField) => Observable<ResultList<Video>>
diff --git a/client/src/app/shared/shared-video-playlist/video-add-to-playlist.component.scss b/client/src/app/shared/shared-video-playlist/video-add-to-playlist.component.scss
index b84cacece..cb1168196 100644
--- a/client/src/app/shared/shared-video-playlist/video-add-to-playlist.component.scss
+++ b/client/src/app/shared/shared-video-playlist/video-add-to-playlist.component.scss
@@ -126,7 +126,7 @@ $timestamp-margin-right: 10px;
  border-top: 1px solid $separator-border-color;
 }
-.new-playlist-button  {
+.new-playlist-button {
  cursor: pointer;
  my-global-icon {
diff --git a/client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.scss b/client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.scss
index 572f7d7a8..9ccd03912 100644
--- a/client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.scss
+++ b/client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.scss
@@ -84,21 +84,23 @@ my-video-thumbnail,
        width: auto;
      }
-      .video-info-account, .video-info-timestamp {
+      .video-info-account,
+      .video-info-timestamp {
        color: pvar(--greyForegroundColor);
      }
    }
  }
  .video-info-name {
+    @include ellipsis;
    font-size: 18px;
    font-weight: $font-semibold;
    display: inline-block;
-    @include ellipsis;
  }
-  .more, my-edit-button {
+  .more,
+  my-edit-button {
    justify-self: flex-end;
    margin-left: auto;
    cursor: pointer;
@@ -118,7 +120,7 @@ my-video-thumbnail,
      display: flex;
      &::after {
-        border: none;
+        border: 0;
      }
    }
  }
diff --git a/client/src/app/shared/shared-video-playlist/video-playlist-miniature.component.scss b/client/src/app/shared/shared-video-playlist/video-playlist-miniature.component.scss
index 99089166c..a46a6e475 100644
--- a/client/src/app/shared/shared-video-playlist/video-playlist-miniature.component.scss
+++ b/client/src/app/shared/shared-video-playlist/video-playlist-miniature.component.scss
@@ -6,7 +6,7 @@
  display: inline-block;
  width: 100%;
-  &.no-videos:not(.to-manage){
+  &.no-videos:not(.to-manage) {
    a {
      cursor: default !important;
    }
diff --git a/client/src/app/shared/shared-video-playlist/video-playlist.model.ts b/client/src/app/shared/shared-video-playlist/video-playlist.model.ts
index 9bec16d77..5b6ba9dbf 100644
--- a/client/src/app/shared/shared-video-playlist/video-playlist.model.ts
+++ b/client/src/app/shared/shared-video-playlist/video-playlist.model.ts
@@ -37,10 +37,8 @@ export class VideoPlaylist implements ServerVideoPlaylist {
  embedUrl: string
  ownerBy: string
-  ownerAvatarUrl: string
  videoChannelBy?: string
-  videoChannelAvatarUrl?: string
  private thumbnailVersion: number
  private originThumbnailUrl: string
@@ -78,12 +76,10 @@ export class VideoPlaylist implements ServerVideoPlaylist {
    this.ownerAccount = hash.ownerAccount
    this.ownerBy = Actor.CREATE_BY_STRING(hash.ownerAccount.name, hash.ownerAccount.host)
-    this.ownerAvatarUrl = Account.GET_ACTOR_AVATAR_URL(this.ownerAccount)
    if (hash.videoChannel) {
      this.videoChannel = hash.videoChannel
      this.videoChannelBy = Actor.CREATE_BY_STRING(hash.videoChannel.name, hash.videoChannel.host)
-      this.videoChannelAvatarUrl = VideoChannel.GET_ACTOR_AVATAR_URL(this.videoChannel)
    }
    this.privacy.label = peertubeTranslate(this.privacy.label, translations)
diff --git a/client/src/assets/player/images/info.svg b/client/src/assets/player/images/info.svg
new file mode 100644
index 000000000..bd1d9c6ca
--- /dev/null
+++ b/client/src/assets/player/images/info.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="feather feather-info"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="16" x2="12" y2="12"></line><line x1="12" y1="8" x2="12.01" y2="8"></line></svg>
+\ No newline at end of file
diff --git a/client/src/assets/player/p2p-media-loader/p2p-media-loader-plugin.ts b/client/src/assets/player/p2p-media-loader/p2p-media-loader-plugin.ts
index e97925ab5..4275a5e5e 100644
--- a/client/src/assets/player/p2p-media-loader/p2p-media-loader-plugin.ts
+++ b/client/src/assets/player/p2p-media-loader/p2p-media-loader-plugin.ts
@@ -1,10 +1,10 @@
+import * as Hlsjs from 'hls.js/dist/hls.light.js'
+import { Events, Segment } from 'p2p-media-loader-core'
+import { Engine, initHlsJsPlayer, initVideoJsContribHlsJsPlayer } from 'p2p-media-loader-hlsjs'
 import videojs from 'video.js'
 import { P2PMediaLoaderPluginOptions, PlayerNetworkInfo } from '../peertube-videojs-typings'
-import { Engine, initHlsJsPlayer, initVideoJsContribHlsJsPlayer } from 'p2p-media-loader-hlsjs'
-import { Events, Segment } from 'p2p-media-loader-core'
 import { timeToInt } from '../utils'
 import { registerConfigPlugin, registerSourceHandler } from './hls-plugin'
-import * as Hlsjs from 'hls.js/dist/hls.light.js'
 registerConfigPlugin(videojs)
 registerSourceHandler(videojs)
@@ -36,6 +36,9 @@ class P2pMediaLoaderPlugin extends Plugin {
  private networkInfoInterval: any
+  private hlsjsCurrentLevel: number
+  private hlsjsLevels: Hlsjs.Level[]
  constructor (player: videojs.Player, options?: P2PMediaLoaderPluginOptions) {
    super(player)
@@ -84,6 +87,16 @@ class P2pMediaLoaderPlugin extends Plugin {
    clearInterval(this.networkInfoInterval)
  }
+  getCurrentLevel () {
+    return this.hlsjsLevels.find(l => l.level === this.hlsjsCurrentLevel)
+  }
+  getLiveLatency () {
+    return undefined as number
+    // FIXME: Use latency when hls >= V1
+    // return this.hlsjs.latency
+  }
  getHLSJS () {
    return this.hlsjs
  }
@@ -140,6 +153,14 @@ class P2pMediaLoaderPlugin extends Plugin {
    this.p2pEngine.on(Events.PeerConnect, () => this.statsP2PBytes.numPeers++)
    this.p2pEngine.on(Events.PeerClose, () => this.statsP2PBytes.numPeers--)
+    this.hlsjs.on(Hlsjs.Events.MANIFEST_PARSED, (_e, manifest) => {
+      this.hlsjsCurrentLevel = manifest.firstLevel
+      this.hlsjsLevels = manifest.levels
+    })
+    this.hlsjs.on(Hlsjs.Events.LEVEL_LOADED, (_e, level) => {
+      this.hlsjsCurrentLevel = level.levelId || (level as any).id
+    })
    this.networkInfoInterval = setInterval(() => {
      const p2pDownloadSpeed = this.arraySum(this.statsP2PBytes.pendingDownload)
      const p2pUploadSpeed = this.arraySum(this.statsP2PBytes.pendingUpload)
@@ -166,7 +187,8 @@ class P2pMediaLoaderPlugin extends Plugin {
          numPeers: this.statsP2PBytes.numPeers,
          downloaded: this.statsP2PBytes.totalDownload,
          uploaded: this.statsP2PBytes.totalUpload
-        }
+        },
+        bandwidthEstimate: (this.hlsjs as any).bandwidthEstimate / 8
      } as PlayerNetworkInfo)
    }, this.CONSTANTS.INFO_SCHEDULER)
  }
diff --git a/client/src/assets/player/peertube-player-local-storage.ts b/client/src/assets/player/peertube-player-local-storage.ts
index cf2cfb472..80aceb239 100644
--- a/client/src/assets/player/peertube-player-local-storage.ts
+++ b/client/src/assets/player/peertube-player-local-storage.ts
@@ -45,6 +45,7 @@ function saveTheaterInStore (enabled: boolean) {
 }
 function saveAverageBandwidth (value: number) {
+  /** used to choose the most fitting resolution */
  return setLocalStorage('average-bandwidth', value.toString())
 }
diff --git a/client/src/assets/player/peertube-player-manager.ts b/client/src/assets/player/peertube-player-manager.ts
index ed82e0496..62dff8285 100644
--- a/client/src/assets/player/peertube-player-manager.ts
+++ b/client/src/assets/player/peertube-player-manager.ts
@@ -4,6 +4,8 @@ import 'videojs-contextmenu-pt'
 import 'videojs-contrib-quality-levels'
 import './upnext/end-card'
 import './upnext/upnext-plugin'
+import './stats/stats-card'
+import './stats/stats-plugin'
 import './bezels/bezels-plugin'
 import './peertube-plugin'
 import './videojs-components/next-previous-video-button'
@@ -170,6 +172,11 @@ export class PeertubePlayerManager {
        self.addContextMenu(mode, player, options.common.embedUrl, options.common.embedTitle)
        player.bezels()
+        player.stats({
+          videoUUID: options.common.videoUUID,
+          videoIsLive: options.common.isLive,
+          mode
+        })
        return res(player)
      })
@@ -538,6 +545,14 @@ export class PeertubePlayerManager {
        })
      }
+      items.push({
+        icon: 'info',
+        label: player.localize('Stats for nerds'),
+        listener: () => {
+          player.stats().show()
+        }
+      })
      return items.map(i => ({
        ...i,
        label: `<span class="vjs-icon-${i.icon || 'link-2'}"></span>` + i.label
diff --git a/client/src/assets/player/peertube-videojs-typings.ts b/client/src/assets/player/peertube-videojs-typings.ts
index 4a6c80247..8afb424a7 100644
--- a/client/src/assets/player/peertube-videojs-typings.ts
+++ b/client/src/assets/player/peertube-videojs-typings.ts
@@ -7,7 +7,9 @@ import { PlayerMode } from './peertube-player-manager'
 import { PeerTubePlugin } from './peertube-plugin'
 import { PlaylistPlugin } from './playlist/playlist-plugin'
 import { EndCardOptions } from './upnext/end-card'
+import { StatsCardOptions } from './stats/stats-card'
 import { WebTorrentPlugin } from './webtorrent/webtorrent-plugin'
+import { StatsForNerdsPlugin } from './stats/stats-plugin'
 declare module 'video.js' {
@@ -36,6 +38,8 @@ declare module 'video.js' {
    bezels (): void
+    stats (options?: StatsCardOptions): StatsForNerdsPlugin
    qualityLevels (): QualityLevels
    textTracks (): TextTrackList & {
@@ -195,6 +199,9 @@ type PlayerNetworkInfo = {
    uploaded: number
    numPeers: number
  }
+  // In bytes
+  bandwidthEstimate: number
 }
 type PlaylistItemOptions = {
diff --git a/client/src/assets/player/stats/stats-card.ts b/client/src/assets/player/stats/stats-card.ts
new file mode 100644
index 000000000..d9f0d2fe9
--- /dev/null
+++ b/client/src/assets/player/stats/stats-card.ts
@@ -0,0 +1,273 @@
+import videojs from 'video.js'
+import { PlayerNetworkInfo as EventPlayerNetworkInfo } from '../peertube-videojs-typings'
+import { bytes, secondsToTime } from '../utils'
+interface StatsCardOptions extends videojs.ComponentOptions {
+  videoUUID: string
+  videoIsLive: boolean
+  mode: 'webtorrent' | 'p2p-media-loader'
+}
+interface PlayerNetworkInfo {
+  downloadSpeed?: string
+  uploadSpeed?: string
+  totalDownloaded?: string
+  totalUploaded?: string
+  numPeers?: number
+  averageBandwidth?: string
+  downloadedFromServer?: string
+  downloadedFromPeers?: string
+}
+const Component = videojs.getComponent('Component')
+class StatsCard extends Component {
+  options_: StatsCardOptions
+  container: HTMLDivElement
+  list: HTMLDivElement
+  closeButton: HTMLElement
+  updateInterval: any
+  mode: 'webtorrent' | 'p2p-media-loader'
+  metadataStore: any = {}
+  intervalMs = 300
+  playerNetworkInfo: PlayerNetworkInfo = {}
+  constructor (player: videojs.Player, options: StatsCardOptions) {
+    super(player, options)
+  }
+  createEl () {
+    const container = super.createEl('div', {
+      className: 'vjs-stats-content',
+      innerHTML: this.getMainTemplate()
+    }) as HTMLDivElement
+    this.container = container
+    this.container.style.display = 'none'
+    this.closeButton = this.container.getElementsByClassName('vjs-stats-close')[0] as HTMLElement
+    this.closeButton.onclick = () => this.hide()
+    this.list = this.container.getElementsByClassName('vjs-stats-list')[0] as HTMLDivElement
+    this.player_.on('p2pInfo', (event: any, data: EventPlayerNetworkInfo) => {
+      if (!data) return // HTTP fallback
+      this.mode = data.source
+      const p2pStats = data.p2p
+      const httpStats = data.http
+      this.playerNetworkInfo.downloadSpeed = bytes(p2pStats.downloadSpeed + httpStats.downloadSpeed).join(' ')
+      this.playerNetworkInfo.uploadSpeed = bytes(p2pStats.uploadSpeed + httpStats.uploadSpeed).join(' ')
+      this.playerNetworkInfo.totalDownloaded = bytes(p2pStats.downloaded + httpStats.downloaded).join(' ')
+      this.playerNetworkInfo.totalUploaded = bytes(p2pStats.uploaded + httpStats.uploaded).join(' ')
+      this.playerNetworkInfo.numPeers = p2pStats.numPeers
+      this.playerNetworkInfo.averageBandwidth = bytes(data.bandwidthEstimate).join(' ') + '/s'
+      if (data.source === 'p2p-media-loader') {
+        this.playerNetworkInfo.downloadedFromServer = bytes(httpStats.downloaded).join(' ')
+        this.playerNetworkInfo.downloadedFromPeers = bytes(p2pStats.downloaded).join(' ')
+      }
+    })
+    return container
+  }
+  toggle () {
+    this.updateInterval
+      ? this.hide()
+      : this.show()
+  }
+  show () {
+    this.container.style.display = 'block'
+    this.updateInterval = setInterval(async () => {
+      try {
+        const options = this.mode === 'webtorrent'
+          ? await this.buildWebTorrentOptions()
+          : await this.buildHLSOptions()
+        this.list.innerHTML = this.getListTemplate(options)
+      } catch (err) {
+        console.error('Cannot update stats.', err)
+        clearInterval(this.updateInterval)
+      }
+    }, this.intervalMs)
+  }
+  hide () {
+    clearInterval(this.updateInterval)
+    this.container.style.display = 'none'
+  }
+  private async buildHLSOptions () {
+    const p2pMediaLoader = this.player_.p2pMediaLoader()
+    const level = p2pMediaLoader.getCurrentLevel()
+    const codecs = level?.videoCodec || level?.audioCodec
+      ? `${level?.videoCodec || ''} / ${level?.audioCodec || ''}`
+      : undefined
+    const resolution = `${level?.height}p${level?.attrs['FRAME-RATE'] || ''}`
+    const buffer = this.timeRangesToString(this.player().buffered())
+    let progress: number
+    let latency: string
+    if (this.options_.videoIsLive) {
+      latency = secondsToTime(p2pMediaLoader.getLiveLatency())
+    } else {
+      progress = this.player().bufferedPercent()
+    }
+    return {
+      playerNetworkInfo: this.playerNetworkInfo,
+      resolution,
+      codecs,
+      buffer,
+      latency,
+      progress
+    }
+  }
+  private async buildWebTorrentOptions () {
+    const videoFile = this.player_.webtorrent().getCurrentVideoFile()
+    if (!this.metadataStore[videoFile.fileUrl]) {
+      this.metadataStore[videoFile.fileUrl] = await fetch(videoFile.metadataUrl).then(res => res.json())
+    }
+    const metadata = this.metadataStore[videoFile.fileUrl]
+    let colorSpace = 'unknown'
+    let codecs = 'unknown'
+    if (metadata?.streams[0]) {
+      const stream = metadata.streams[0]
+      colorSpace = stream['color_space'] !== 'unknown'
+        ? stream['color_space']
+        : 'bt709'
+      codecs = stream['codec_name'] || 'avc1'
+    }
+    const resolution = videoFile?.resolution.label + videoFile?.fps
+    const buffer = this.timeRangesToString(this.player().buffered())
+    const progress = this.player_.webtorrent().getTorrent()?.progress
+    return {
+      playerNetworkInfo: this.playerNetworkInfo,
+      progress,
+      colorSpace,
+      codecs,
+      resolution,
+      buffer
+    }
+  }
+  private getListTemplate (options: {
+    playerNetworkInfo: PlayerNetworkInfo
+    progress: number
+    codecs: string
+    resolution: string
+    buffer: string
+    latency?: string
+    colorSpace?: string
+  }) {
+    const { playerNetworkInfo, progress, colorSpace, codecs, resolution, buffer, latency } = options
+    const player = this.player()
+    const videoQuality: VideoPlaybackQuality = player.getVideoPlaybackQuality()
+    const vw = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0)
+    const vh = Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0)
+    const pr = (window.devicePixelRatio || 1).toFixed(2)
+    const frames = `${vw}x${vh}*${pr} / ${videoQuality.droppedVideoFrames} dropped of ${videoQuality.totalVideoFrames}`
+    const duration = player.duration()
+    let volume = `${Math.round(player.volume() * 100)}`
+    if (player.muted()) volume += ' (muted)'
+    const networkActivity = playerNetworkInfo.downloadSpeed
+      ? `${playerNetworkInfo.downloadSpeed} &dArr; / ${playerNetworkInfo.uploadSpeed} &uArr;`
+      : undefined
+    const totalTransferred = playerNetworkInfo.totalDownloaded
+      ? `${playerNetworkInfo.totalDownloaded} &dArr; / ${playerNetworkInfo.totalUploaded} &uArr;`
+      : undefined
+    const downloadBreakdown = playerNetworkInfo.downloadedFromServer
+      ? `${playerNetworkInfo.downloadedFromServer} from server · ${playerNetworkInfo.downloadedFromPeers} from peers`
+      : undefined
+    const bufferProgress = progress !== undefined
+      ? `${(progress * 100).toFixed(1)}% (${(progress * duration).toFixed(1)}s)`
+      : undefined
+    return `
+      ${this.buildElement(player.localize('Player mode'), this.options_.mode)}
+      ${this.buildElement(player.localize('Video UUID'), this.options_.videoUUID)}
+      ${this.buildElement(player.localize('Viewport / Frames'), frames)}
+      ${this.buildElement(player.localize('Resolution'), resolution)}
+      ${this.buildElement(player.localize('Volume'), volume)}
+      ${this.buildElement(player.localize('Codecs'), codecs)}
+      ${this.buildElement(player.localize('Color'), colorSpace)}
+      ${this.buildElement(player.localize('Connection Speed'), playerNetworkInfo.averageBandwidth)}
+      ${this.buildElement(player.localize('Network Activity'), networkActivity)}
+      ${this.buildElement(player.localize('Total Transfered'), totalTransferred)}
+      ${this.buildElement(player.localize('Download Breakdown'), downloadBreakdown)}
+      ${this.buildElement(player.localize('Buffer Progress'), bufferProgress)}
+      ${this.buildElement(player.localize('Buffer State'), buffer)}
+      ${this.buildElement(player.localize('Live Latency'), latency)}
+    `
+  }
+  private getMainTemplate () {
+    return `
+      <button class="vjs-stats-close" tabindex=0 aria-label="Close stats" title="Close stats">[x]</button>
+      <div class="vjs-stats-list"></div>
+    `
+  }
+  private buildElement (label: string, value?: string) {
+    if (!value) return ''
+    return `<div><div>${label}</div><span>${value}</span></div>`
+  }
+  private timeRangesToString (r: videojs.TimeRange) {
+    let result = ''
+    for (let i = 0; i < r.length; i++) {
+      const start = Math.floor(r.start(i))
+      const end = Math.floor(r.end(i))
+      result += `[${secondsToTime(start)}, ${secondsToTime(end)}] `
+    }
+    return result
+  }
+}
+videojs.registerComponent('StatsCard', StatsCard)
+export {
+  StatsCard,
+  StatsCardOptions
+}
diff --git a/client/src/assets/player/stats/stats-plugin.ts b/client/src/assets/player/stats/stats-plugin.ts
new file mode 100644
index 000000000..8aad80e8a
--- /dev/null
+++ b/client/src/assets/player/stats/stats-plugin.ts
@@ -0,0 +1,31 @@
+import videojs from 'video.js'
+import { StatsCard, StatsCardOptions } from './stats-card'
+const Plugin = videojs.getPlugin('plugin')
+class StatsForNerdsPlugin extends Plugin {
+  private statsCard: StatsCard
+  constructor (player: videojs.Player, options: StatsCardOptions) {
+    const settings = {
+      ...options
+    }
+    super(player)
+    this.player.ready(() => {
+      player.addClass('vjs-stats-for-nerds')
+    })
+    this.statsCard = new StatsCard(player, options)
+    player.addChild(this.statsCard, settings)
+  }
+  show () {
+    this.statsCard.show()
+  }
+}
+videojs.registerPlugin('stats', StatsForNerdsPlugin)
+export { StatsForNerdsPlugin }
diff --git a/client/src/assets/player/videojs-components/settings-menu-button.ts b/client/src/assets/player/videojs-components/settings-menu-button.ts
index e67a3da06..74788a897 100644
--- a/client/src/assets/player/videojs-components/settings-menu-button.ts
+++ b/client/src/assets/player/videojs-components/settings-menu-button.ts
@@ -95,11 +95,6 @@ class SettingsButton extends Button {
      }
    }
-    document.removeEventListener('click', this.documentClickHandler)
-    if (this.isInIframe()) {
-      window.removeEventListener('blur', this.documentClickHandler)
-    }
    this.hideDialog()
    if (this.settingsButtonOptions.entries.length === 0) {
@@ -107,6 +102,14 @@ class SettingsButton extends Button {
    }
  }
+  dispose () {
+    document.removeEventListener('click', this.documentClickHandler)
+    if (this.isInIframe()) {
+      window.removeEventListener('blur', this.documentClickHandler)
+    }
+  }
  onAddSettingsItem (event: any, data: any) {
    const [ entry, options ] = data
diff --git a/client/src/assets/player/webtorrent/webtorrent-plugin.ts b/client/src/assets/player/webtorrent/webtorrent-plugin.ts
index e557fe722..6f5fbe4c9 100644
--- a/client/src/assets/player/webtorrent/webtorrent-plugin.ts
+++ b/client/src/assets/player/webtorrent/webtorrent-plugin.ts
@@ -506,7 +506,8 @@ class WebTorrentPlugin extends Plugin {
          uploadSpeed: this.torrent.uploadSpeed,
          downloaded: this.torrent.downloaded,
          uploaded: this.torrent.uploaded
-        }
+        },
+        bandwidthEstimate: this.webtorrent.downloadSpeed
      } as PlayerNetworkInfo)
    }, this.CONSTANTS.INFO_SCHEDULER)
  }
diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss
index fa9c0d992..89b6f0c4c 100644
--- a/client/src/sass/application.scss
+++ b/client/src/sass/application.scss
@@ -8,9 +8,9 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
 @import './bootstrap';
 @import './primeng-custom';
-@import './ng-select.scss';
+@import './ng-select';
-@import './classes.scss';
+@import './classes';
 [hidden] {
  display: none !important;
@@ -89,14 +89,16 @@ input.readonly {
  background-color: pvar(--inputBackgroundColor) !important;
 }
-input, textarea {
+input,
+textarea {
  outline: none;
  color: pvar(--inputForegroundColor);
 }
 button {
-  background: unset;
  @include disable-outline;
+  background: unset;
 }
 label {
@@ -121,12 +123,12 @@ code {
  margin-top: 5px;
 }
-.input-error
+.input-error,
 my-input-toggle-hidden ::ng-deep input {
  border-color: $red !important;
 }
-.fullWidth {
+.full-width {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
@@ -134,7 +136,7 @@ my-input-toggle-hidden ::ng-deep input {
 }
 .glyphicon-black {
-  color: black;
+  color: #000;
 }
 .row {
@@ -184,26 +186,26 @@ my-input-toggle-hidden ::ng-deep input {
    width: 100%;
  }
-  &.lock-scroll .main-row > router-outlet + * {
+  &.lock-scroll .main-row > router-outlet + * {  /* stylelint-disable-line selector-max-compound-selectors */
    // Lock and hide body scrollbars
    position: fixed;
    // Lock and hide sub-menu scrollbars
-    .sub-menu {
+    .sub-menu { /* stylelint-disable-line */
      overflow-x: hidden;
    }
  }
 }
 .title-page {
+  @include disable-default-a-behaviour;
  opacity: 0.6;
  color: pvar(--mainForegroundColor);
  font-size: 16px;
  display: inline-block;
  margin-right: 55px;
  font-weight: $font-semibold;
-  @include disable-default-a-behaviour;
  border-bottom: 2px solid transparent;
  &.title-page-single {
@@ -219,13 +221,19 @@ my-input-toggle-hidden ::ng-deep input {
    font-size: 125%;
  }
-  &:hover, &:active, &:focus {
+  &:hover,
+  &:active,
+  &:focus {
    color: pvar(--mainForegroundColor);
  }
-  &.active, &:hover,  &:active, &:focus, &.title-page-single {
+  &.active,
+  &:hover,
+  &:active,
+  &:focus,
+  &.title-page-single {
    opacity: 1;
-    outline: 0px hidden !important;
+    outline: 0 hidden !important;
  }
  @media screen and (max-width: $mobile-view) {
@@ -262,7 +270,10 @@ my-input-toggle-hidden ::ng-deep input {
      background-color: pvar(--submenuBackgroundColor);
    }
-    &.active, &:hover, &:active, &:focus {
+    &.active,
+    &:hover,
+    &:active,
+    &:focus {
      opacity: 1;
    }
  }
@@ -275,8 +286,13 @@ my-input-toggle-hidden ::ng-deep input {
 // In tables, don't have a hover different background
 table {
-  .action-button-edit, .action-button-delete {
+  .action-button-edit,
-    &:hover, &:active, &:focus, &[disabled], &.disabled {
+  .action-button-delete {
+    &:hover,
+    &:active,
+    &:focus,
+    &[disabled],
+    &.disabled {
      background-color: $grey-background-color !important;
    }
  }
@@ -329,15 +345,12 @@ ngx-loading-bar {
 @media screen and (max-width: #{breakpoint(xxl)}) {
  .main-col {
-    & {
+    --horizontalMarginContent: #{$not-expanded-horizontal-margins / 2};
-      --horizontalMarginContent: #{$not-expanded-horizontal-margins / 2};
+    --videosHorizontalMarginContent: 30px;
-    }
    &.expanded {
      --horizontalMarginContent: #{$expanded-horizontal-margins / 2};
    }
-    --videosHorizontalMarginContent: 30px;
  }
 }
diff --git a/client/src/sass/bootstrap.scss b/client/src/sass/bootstrap.scss
index 0ab6230c8..548e55e1e 100644
--- a/client/src/sass/bootstrap.scss
+++ b/client/src/sass/bootstrap.scss
@@ -6,7 +6,7 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
 // Thanks https://gist.github.com/alexandrevicenzi/680147013e902a4eaa5d
 .glyphicon-refresh-animate {
-  animation: spin .7s infinite linear;
+  animation: spin 0.7s infinite linear;
 }
 .glyphicon-duplicate {
@@ -25,6 +25,7 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
  from {
    transform: scale(1) rotate(0deg);
  }
  to {
    transform: scale(1) rotate(360deg);
  }
@@ -70,7 +71,7 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
    &.active {
      color: pvar(--mainBackgroundColor) !important;
      background-color: pvar(--mainHoverColor);
-      opacity: .9;
+      opacity: 0.9;
    }
    &:active {
@@ -97,9 +98,9 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
 }
 @media screen and (min-width: #{breakpoint(md)}) {
-  .modal:before {
+  .modal::before {
    vertical-align: middle;
-    content: " ";
+    content: ' ';
    height: 100%;
  }
@@ -123,7 +124,7 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
  }
  .modal-header {
-    border-bottom: none;
+    border-bottom: 0;
    margin-bottom: 5px;
    .modal-title {
@@ -140,10 +141,11 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
      margin: 0;
      padding: 0;
-      opacity: .5;
+      opacity: 0.5;
-      &[iconName="cross"] {
+      &[iconName=cross] { /* stylelint-disable-line selector-max-compound-selectors */
        @include icon(16px);
        top: -3px;
      }
    }
@@ -154,7 +156,7 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
    text-align: right;
    > .peertube-button:not(:first-child) {
-      margin-left: 10px
+      margin-left: 10px;
    }
  }
 }
@@ -168,7 +170,8 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
 // On touchscreen devices, simply overflow: hidden to avoid detached overlay on scroll
 @media (hover: none) and (pointer: coarse) {
-  .modal-open, .menu-open {
+  .modal-open,
+  .menu-open {
    overflow: hidden !important;
  }
@@ -176,7 +179,7 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
  .menu-open {
    .main-col {
      &::before {
-        background-color: black;
+        background-color: #000;
        width: 100vw;
        height: 100vh;
        opacity: 0.75;
@@ -204,7 +207,10 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
  .nav-link {
    opacity: 0.6 !important;
-    &.active, &:hover, &:active, &:focus {
+    &.active,
+    &:hover,
+    &:active,
+    &:focus {
      opacity: 1 !important;
    }
  }
@@ -221,7 +227,7 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
  color: pvar(--mainForegroundColor);
  font-weight: $font-semibold;
-  border: none;
+  border: 0;
  border-bottom: 2px solid transparent;
  opacity: 0.6;
@@ -231,7 +237,10 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
    border-bottom-color: pvar(--mainColor);
  }
-  &.active, &:hover, &:active, &:focus {
+  &.active,
+  &:hover,
+  &:active,
+  &:focus {
    opacity: 1;
  }
 }
@@ -314,9 +323,10 @@ ngb-tooltip-window {
 }
 .input-group {
-  & > .form-control {
+  > .form-control {
    flex: initial;
  }
  input.form-control {
    width: unset !important;
    flex-grow: 1;
@@ -366,7 +376,7 @@ ngb-tooltip-window {
  border: 1px solid #eee;
  border-radius: .25rem;
-  & > label {
+  > label {
    position: relative;
    top: -5px;
    left: -10px;
diff --git a/client/src/sass/include/_actor.scss b/client/src/sass/include/_actor.scss
index a4798ce1d..38bd90ae6 100644
--- a/client/src/sass/include/_actor.scss
+++ b/client/src/sass/include/_actor.scss
@@ -17,7 +17,7 @@
 @mixin show-more-description {
  color: pvar(--mainColor);
  cursor: pointer;
-  margin: 10px auto 45px auto;
+  margin: 10px auto 45px;
 }
 @mixin avatar-row-responsive ($img-margin, $grey-font-size) {
@@ -25,8 +25,8 @@
  grid-column: 1;
  margin-bottom: 30px;
-  .channel-avatar {
+  .main-avatar {
-    @include channel-avatar(120px);
+    @include actor-avatar-size(120px);
  }
  > div {
@@ -77,12 +77,8 @@
      font-size: 22px;
    }
-    .channel-avatar {
+    .main-avatar {
-      @include channel-avatar(80px);
+      @include actor-avatar-size(80px);
-    }
-    .account-avatar {
-      @include avatar(120px);
    }
  }
 }
diff --git a/client/src/sass/include/_bootstrap.scss b/client/src/sass/include/_bootstrap.scss
index b1a23be6b..d9e5efc02 100644
--- a/client/src/sass/include/_bootstrap.scss
+++ b/client/src/sass/include/_bootstrap.scss
@@ -1,4 +1,4 @@
-@import "./_bootstrap-variables";
+@import './_bootstrap-variables';
 @import '~bootstrap/scss/functions';
 @import '~bootstrap/scss/variables';
diff --git a/client/src/sass/include/_fonts.scss b/client/src/sass/include/_fonts.scss
index 6313736e0..514261d01 100644
--- a/client/src/sass/include/_fonts.scss
+++ b/client/src/sass/include/_fonts.scss
@@ -1,4 +1,4 @@
-@font-face{
+@font-face {
  font-family: 'Source Sans Pro';
  font-weight: 200 900;
  font-style: normal;
@@ -7,7 +7,7 @@
  src: url('../fonts/source-sans/WOFF2/VAR/SourceSans3VF-Roman.ttf.woff2') format('woff2');
 }
-@font-face{
+@font-face {
  font-family: 'Source Sans Pro';
  font-weight: 200 900;
  font-style: italic;
diff --git a/client/src/sass/include/_miniature.scss b/client/src/sass/include/_miniature.scss
index 3b86f29b4..070aa3398 100644
--- a/client/src/sass/include/_miniature.scss
+++ b/client/src/sass/include/_miniature.scss
@@ -3,9 +3,8 @@
 @mixin miniature-name {
  @include ellipsis-multiline(1.1em, 2);
+  @include peertube-word-wrap(false);
-  word-break: break-all;
-  word-wrap: break-word;
  transition: color 0.2s;
  font-weight: $font-semibold;
  color: pvar(--mainForegroundColor);
@@ -21,12 +20,12 @@
 }
 @mixin miniature-thumbnail {
-  @include disable-outline;
  $play-overlay-transition: 0.2s ease;
  $play-overlay-height: 26px;
  $play-overlay-width: 18px;
+  @include disable-outline;
  display: flex;
  flex-direction: column;
  position: relative;
@@ -47,7 +46,8 @@
    opacity: 0;
    background-color: rgba(0, 0, 0, 0.3);
-    &, .icon {
+    &,
+    .icon {
      transition: all $play-overlay-transition;
    }
@@ -79,7 +79,7 @@
    &.blur-filter {
      filter: blur(20px);
-      transform : scale(1.03);
+      transform: scale(1.03);
    }
  }
 }
@@ -129,10 +129,7 @@
      column-gap: 30px;
      grid-template-columns: repeat(
        auto-fill,
-        minmax(
+        minmax(var(--miniatureMinWidth), 1fr)
-          var(--miniatureMinWidth),
-          1fr
-        )
      );
      .video-wrapper,
diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss
index e03201cef..b2083e516 100644
--- a/client/src/sass/include/_mixins.scss
+++ b/client/src/sass/include/_mixins.scss
@@ -1,7 +1,9 @@
 @import '_variables';
 @mixin disable-default-a-behaviour {
-  &:hover, &:focus, &:active {
+  &:hover,
+  &:focus,
+  &:active {
    text-decoration: none !important;
    outline: none !important;
  }
@@ -22,7 +24,7 @@
 @mixin ellipsis-multiline($font-size: 16px, $number-of-lines: 2) {
  display: block;
  /* Fallback for non-webkit */
-  display: -webkit-box;
+  display: -webkit-box; /* stylelint-disable-line value-no-vendor-prefix */
  -webkit-line-clamp: $number-of-lines;
  /* Fallback for non-webkit */
  font-size: $font-size;
@@ -36,7 +38,7 @@
  position: relative;
  overflow: hidden;
-  &:after {
+  &::after {
    content: '';
    pointer-events: none;
    width: 100%;
@@ -48,11 +50,14 @@
  }
 }
-@mixin peertube-word-wrap {
+@mixin peertube-word-wrap ($with-hyphen: true) {
  word-break: break-word;
  word-wrap: break-word;
  overflow-wrap: break-word;
-  hyphens: auto;
+  @if $with-hyphen {
+    hyphens: auto;
+  }
 }
 @mixin apply-svg-color ($color) {
@@ -109,9 +114,9 @@
  padding-bottom: 0;
  flex-wrap: nowrap;
-  .input-group-text{
+  .input-group-text {
    font-size: 14px;
-    color: gray;
+    color: #808080;
  }
 }
@@ -128,7 +133,9 @@
 @mixin orange-button {
  @include button-focus(pvar(--mainColorLightest));
-  &, &:active, &:focus {
+  &,
+  &:active,
+  &:focus {
    color: #fff;
    background-color: pvar(--mainColor);
  }
@@ -138,14 +145,15 @@
    background-color: pvar(--mainHoverColor);
  }
-  &[disabled], &.disabled {
+  &[disabled],
+  &.disabled {
    cursor: default;
    color: #fff;
    background-color: #C6C6C6;
  }
  my-global-icon {
-    @include apply-svg-color(#fff)
+    @include apply-svg-color(#fff);
  }
 }
@@ -155,7 +163,9 @@
  border: 2px solid pvar(--mainColor);
  font-weight: $font-semibold;
-  &, &:active, &:focus {
+  &,
+  &:active,
+  &:focus {
    color: pvar(--mainColor);
    background-color: pvar(--mainBackgroundColor);
  }
@@ -165,14 +175,15 @@
    background-color: pvar(--mainColorLightest);
  }
-  &[disabled], &.disabled {
+  &[disabled],
+  &.disabled {
    cursor: default;
    color: pvar(--mainColor);
    background-color: #C6C6C6;
  }
  my-global-icon {
-    @include apply-svg-color(pvar(--mainColor))
+    @include apply-svg-color(pvar(--mainColor));
  }
 }
@@ -182,12 +193,13 @@
  color: pvar(--greyForegroundColor);
  background-color: transparent;
-  &[disabled], &.disabled {
+  &[disabled],
+  .disabled {
    cursor: default;
  }
  my-global-icon {
-    @include apply-svg-color(transparent)
+    @include apply-svg-color(transparent);
  }
 }
@@ -197,17 +209,22 @@
  background-color: $grey-background-color;
  color: pvar(--greyForegroundColor);
-  &:hover, &:active, &:focus, &[disabled], &.disabled {
+  &:hover,
+  &:active,
+  &:focus,
+  &[disabled],
+  &.disabled {
    color: pvar(--greyForegroundColor);
    background-color: $grey-background-hover-color;
  }
-  &[disabled], &.disabled {
+  &[disabled],
+  &.disabled {
    cursor: default;
  }
  my-global-icon {
-    @include apply-svg-color(pvar(--greyForegroundColor))
+    @include apply-svg-color(pvar(--greyForegroundColor));
  }
 }
@@ -216,24 +233,30 @@
  $text: #fff6f5;
  @include button-focus(scale-color($color, $alpha: -95%));
  background-color: $color;
  color: $text;
-  &:hover, &:active, &:focus, &[disabled], &.disabled {
+  &:hover,
+  &:active,
+  &:focus,
+  &[disabled],
+  &.disabled {
    background-color: lighten($color: $color, $amount: 10);
  }
-  &[disabled], &.disabled {
+  &[disabled],
+  &.disabled {
    cursor: default;
  }
  my-global-icon {
-    @include apply-svg-color($text)
+    @include apply-svg-color($text);
  }
 }
 @mixin peertube-button {
-  border: none;
+  border: 0;
  font-weight: $font-semibold;
  font-size: 15px;
  height: $button-height;
@@ -246,18 +269,17 @@
 }
 @mixin peertube-button-link {
-  display: inline-block;
  @include disable-default-a-behaviour;
  @include peertube-button;
-}
-@mixin peertube-button-outline {
  display: inline-block;
+}
+@mixin peertube-button-outline {
  @include disable-default-a-behaviour;
  @include peertube-button;
+  display: inline-block;
  border: 1px solid;
 }
@@ -291,17 +313,17 @@
    filter: alpha(opacity=0);
    opacity: 0;
    outline: none;
-    background: white;
+    background: #fff;
    cursor: inherit;
    display: block;
  }
 }
 @mixin peertube-button-file ($width) {
-  width: $width;
  @include peertube-file;
  @include peertube-button;
+  width: $width;
 }
 @mixin icon ($size) {
@@ -317,7 +339,7 @@
 @mixin select-arrow-down {
  top: 50%;
  right: calc(0% + 15px);
-  content: " ";
+  content: ' ';
  height: 0;
  width: 0;
  position: absolute;
@@ -358,7 +380,7 @@
    width: 100%;
  }
-  &:after {
+  &::after {
    @include select-arrow-down;
  }
@@ -394,21 +416,21 @@
    option {
      font-weight: $font-semibold;
      color: pvar(--greyForegroundColor);
-      border: none;
+      border: 0;
    }
  }
 }
 // Thanks: https://codepen.io/triss90/pen/XNEdRe/
 @mixin peertube-radio-container {
-  input[type="radio"] {
+  input[type=radio] {
    display: none;
-    & + label {
+    + label {
      font-weight: $font-regular;
      cursor: pointer;
-      &:before {
+      &::before {
        position: relative;
        top: -2px;
        content: '';
@@ -425,12 +447,12 @@
      }
    }
-    &:checked + label:before {
+    &:checked + label::before {
      background-color: #000;
      box-shadow: inset 0 0 0 4px #fff;
    }
-    &:focus + label:before {
+    &:focus + label::before {
      outline: none;
      border-color: #000;
    }
@@ -445,7 +467,7 @@
    box-shadow: #{$focus-box-shadow-form} pvar(--mainColorLightest);
  }
-  & + span {
+  + span {
    position: relative;
    width: 18px;
    min-width: 18px;
@@ -455,7 +477,7 @@
    vertical-align: middle;
    cursor: pointer;
-    &:after {
+    &::after {
      content: '';
      position: absolute;
      top: calc(2px - #{$border-width});
@@ -474,13 +496,13 @@
    background: pvar(--mainColor);
    animation: jelly 0.6s ease;
-    &:after {
+    &::after {
      opacity: 1;
      transform: rotate(45deg) scale(1);
    }
  }
-  & + span + span {
+  + span + span {
    font-size: 15px;
    font-weight: $font-regular;
    margin-left: 5px;
@@ -489,7 +511,7 @@
  }
  &[disabled] + span,
-  &[disabled] + span + span{
+  &[disabled] + span + span {
    opacity: 0.5;
    cursor: default;
  }
@@ -539,21 +561,12 @@
  }
 }
-@mixin avatar ($size) {
+@mixin actor-avatar-size ($size) {
-  object-fit: cover;
+  display: inline-block;
-  border-radius: 50%;
-  width: $size;
-  height: $size;
-  min-width: $size;
-  min-height: $size;
-}
-@mixin channel-avatar ($size) {
  width: $size;
  height: $size;
  min-width: $size;
  min-height: $size;
-  border-radius: 5px;
 }
 @mixin chevron ($size, $border-width) {
@@ -595,26 +608,6 @@
  margin-bottom: 10px;
 }
-@mixin actor-owner {
-  @include disable-default-a-behaviour;
-  font-size: 13px;
-  margin-top: 4px;
-  color: pvar(--mainForegroundColor);
-  span:hover {
-    opacity: 0.8;
-  }
-  img {
-    @include avatar(18px);
-    margin-left: 7px;
-    position: relative;
-    top: -2px;
-  }
-}
 @mixin create-button {
  @include peertube-button-link;
  @include orange-button;
@@ -714,13 +707,13 @@
      color: pvar(--mainColor);
    }
-    & + .breadcrumb-item {
+    + .breadcrumb-item {
      padding-left: 0.5rem;
      &::before {
        display: inline-block;
        padding-right: 0.5rem;
        color: #6c757d;
-        content: "/";
+        content: '/';
      }
    }
@@ -735,13 +728,13 @@
  flex-wrap: wrap;
  margin: 0 -5px;
-  & > div {
+  > div {
    box-sizing: border-box;
    flex: 0 0 percentage(1/3);
    padding: 0 5px;
    margin-bottom: 10px;
-    & > a {
+    > a {
      @include disable-default-a-behaviour;
      text-decoration: none;
@@ -756,8 +749,8 @@
      }
    }
-    & > a,
+    > a,
-    & > div {
+    > div {
      padding: 20px;
      background: pvar(--submenuBackgroundColor);
      border-radius: 4px;
@@ -766,7 +759,8 @@
    }
  }
-  .dashboard-num, .dashboard-text {
+  .dashboard-num,
+  .dashboard-text {
    text-align: center;
    font-size: 130%;
    color: pvar(--mainForegroundColor);
@@ -830,17 +824,9 @@
    --chip-padding: .2rem .3rem;
  }
-  .avatar {
+  my-actor-avatar {
    margin-left: -.4rem;
    margin-right: .2rem;
-    height: $avatar-height;
-    width: $avatar-height;
-    border-radius: 50%;
-    display: inline-block;
-    line-height: 1.25;
-    position: relative;
-    vertical-align: middle;
  }
  &.two-lines {
@@ -848,9 +834,8 @@
    height: $avatar-height;
-    .avatar {
+    my-actor-avatar {
-      height: $avatar-height;
+      @include actor-avatar-size($avatar-height);
-      width: $avatar-height;
    }
    div {
@@ -868,7 +853,7 @@
  flex-direction: column;
  .form-sub-title {
-    margin-right: 0px !important;
+    margin-right: 0 !important;
    margin-bottom: 10px;
    text-align: center;
  }
@@ -914,15 +899,17 @@
    padding-bottom: 15px;
    margin-bottom: $sub-menu-margin-bottom;
+    > span > my-global-icon,
    > my-global-icon {
      margin-right: 10px;
-      vertical-align: bottom;
      width: 24px;
      height: 24px;
+      vertical-align: top;
    }
    .badge {
      margin-left: 7px;
+      vertical-align: top;
    }
  }
 }
diff --git a/client/src/sass/include/_variables.scss b/client/src/sass/include/_variables.scss
index d2a5d2bd9..d54563df6 100644
--- a/client/src/sass/include/_variables.scss
+++ b/client/src/sass/include/_variables.scss
@@ -60,7 +60,7 @@ $max-channels-width: 1200px;
 $footer-height: 30px;
 $footer-margin: 30px;
-$separator-border-color: rgba(0, 0, 0, 0.10);
+$separator-border-color: rgba(0, 0, 0, 0.1);
 $video-miniature-margin-bottom: 15px;
@@ -90,7 +90,7 @@ $markdown-textarea-background-color: $grey-background-hover-color;
 $sub-menu-margin-bottom: 30px;
 $sub-menu-margin-bottom-small-view: 10px;
-$activated-action-button-color: black;
+$activated-action-button-color: #000;
 $focus-box-shadow-form: 0 0 0 .2rem;
@@ -147,7 +147,7 @@ $variables: (
  @if map-has-key($variables, $variable) {
    @return map-get($variables, $variable);
  } @else {
-    @error "ERROR: Variable #{$variable} does not exist";
+    @error 'ERROR: Variable #{$variable} does not exist';
  }
 }
diff --git a/client/src/sass/ng-select.scss b/client/src/sass/ng-select.scss
index 61da6d266..13b2012b2 100644
--- a/client/src/sass/ng-select.scss
+++ b/client/src/sass/ng-select.scss
@@ -14,7 +14,7 @@ $ng-select-height: 30px;
 $ng-select-value-padding-left: 15px;
 $ng-select-value-font-size: 15px;
-@import "~@ng-select/ng-select/scss/default.theme.scss";
+@import '~@ng-select/ng-select/scss/default.theme';
 .ng-select {
  font-size: $ng-select-value-font-size;
@@ -31,13 +31,13 @@ $ng-select-value-font-size: 15px;
  }
  .ng-arrow-wrapper {
-    padding-right: 12px
+    padding-right: 12px;
  }
  &.ng-select-single .ng-value-container .ng-value {
    color: pvar(--inputForegroundColor);
-    .ng-value-label {
+    .ng-value-label { /* stylelint-disable-line */
      display: flex;
      align-items: center;
    }
@@ -45,7 +45,8 @@ $ng-select-value-font-size: 15px;
  &.ng-select-multiple .ng-select-container .ng-value-container {
    padding-left: 12px;
-    .ng-value {
+    .ng-value { /* stylelint-disable-line */
      margin-left: 3px;
    }
  }
diff --git a/client/src/sass/player/context-menu.scss b/client/src/sass/player/context-menu.scss
index df78916c6..45cee3e77 100644
--- a/client/src/sass/player/context-menu.scss
+++ b/client/src/sass/player/context-menu.scss
@@ -8,7 +8,7 @@ $context-menu-width: 350px;
 .video-js .vjs-contextmenu-ui-menu {
  position: absolute;
-  background-color: rgba(0, 0, 0, 0.5);
+  background-color: $primary-background-color;
  padding: 8px 0;
  border-radius: 4px;
  width: $context-menu-width;
@@ -31,26 +31,26 @@ $context-menu-width: 350px;
      background-color: rgba(255, 255, 255, 0.2);
    }
-    [class^="vjs-icon-"] {
+    [class^='vjs-icon-'] {
+      $icons: 'link-2', 'repeat', 'code', 'tick-white', 'info';
      display: inline-flex;
      position: relative;
      top: 2px;
      cursor: pointer;
      width: 14px;
      height: 14px;
-      background-color: white;
+      background-color: #fff;
      mask-size: cover;
      margin-right: 0.8rem !important;
-      $icons: 'link-2', 'repeat', 'code', 'tick-white';
      @each $icon in $icons {
        &[class$="-#{$icon}"] {
          mask-image: url('#{$assets-path}/player/images/#{$icon}.svg');
        }
      }
-      &[class$="-tick-white"] {
+      &[class$='-tick-white'] {
        float: right;
        margin: 0 !important;
      }
diff --git a/client/src/sass/player/index.scss b/client/src/sass/player/index.scss
index fe92ce5e0..e674fa2f6 100644
--- a/client/src/sass/player/index.scss
+++ b/client/src/sass/player/index.scss
@@ -4,5 +4,6 @@
 @import './settings-menu';
 @import './spinner';
 @import './upnext';
-@import './bezels.scss';
+@import './bezels';
-@import './playlist.scss';
+@import './playlist';
+@import './stats';
diff --git a/client/src/sass/player/mobile.scss b/client/src/sass/player/mobile.scss
index c2fa855ab..26066d218 100644
--- a/client/src/sass/player/mobile.scss
+++ b/client/src/sass/player/mobile.scss
@@ -13,4 +13,4 @@
      }
    }
  }
-}
-\ No newline at end of file
+}
diff --git a/client/src/sass/player/peertube-skin.scss b/client/src/sass/player/peertube-skin.scss
index 81aacf1d7..8fe2e054d 100644
--- a/client/src/sass/player/peertube-skin.scss
+++ b/client/src/sass/player/peertube-skin.scss
@@ -52,12 +52,12 @@ body {
  }
  .vjs-big-play-button {
-    outline: 0;
-    font-size: 6em;
    $big-play-width: 1.2em;
    $big-play-height: 1.2em;
+    outline: 0;
+    font-size: 6em;
    border: 2px solid #fff;
    border-radius: 100%;
@@ -72,7 +72,7 @@ body {
    &::-moz-focus-inner {
      border: 0;
-      padding: 0
+      padding: 0;
    }
    .vjs-icon-placeholder::before {
@@ -82,8 +82,9 @@ body {
      background-image: url('#{$assets-path}/player/images/big-play-button.svg');
    }
-    &.focus-visible, &:hover {
+    &.focus-visible,
-      background-color: var(--mainColor, dimgray);
+    &:hover {
+      background-color: var(--mainColor, #696969);
    }
  }
@@ -91,16 +92,19 @@ body {
  // Small effect when we click on the play button
  &.vjs-has-big-play-button-clicked {
-    .vjs-big-play-button, .vjs-poster {
+    .vjs-big-play-button,
+    .vjs-poster {
      display: block;
      visibility: hidden;
-      &.vjs-big-play-button, &.vjs-big-play-button::before {
+      &.vjs-big-play-button,
+      &.vjs-big-play-button::before {
        opacity: 0;
        transition: visibility 0.2s, opacity 0.2s;
      }
-      &.vjs-poster, &.vjs-poster::before {
+      &.vjs-poster,
+      &.vjs-poster::before {
        opacity: 0;
        transition: visibility 0.3s, opacity 0.3s;
        transition-delay: 0.05s;
@@ -165,8 +169,7 @@ body {
    .vjs-fullscreen-control,
    .vjs-peertube-link,
    .vjs-theater-control,
-    .vjs-settings
+    .vjs-settings {
-    {
      color: pvar(--embedForegroundColor) !important;
      opacity: $primary-foreground-opacity;
@@ -217,7 +220,8 @@ body {
        }
        .vjs-load-progress {
-          &, & div {
+          &,
+          div {
            background: rgba(255, 255, 255, .2);
          }
        }
@@ -266,7 +270,7 @@ body {
          line-height: calc(#{$control-bar-height} - 1px);
          &::after {
-            content: "/";
+            content: '/';
            margin: 0 1px 0 2px;
          }
        }
@@ -308,11 +312,17 @@ body {
        display: none;
      }
-      .download-speed-number, .upload-speed-number, .peers-number, .http-fallback {
+      .download-speed-number,
+      .upload-speed-number,
+      .peers-number,
+      .http-fallback {
        font-weight: $font-semibold;
      }
-      .download-speed-text, .upload-speed-text, .peers-text, .http-fallback {
+      .download-speed-text,
+      .upload-speed-text,
+      .peers-text,
+      .http-fallback {
        margin-right: 15px;
      }
@@ -336,10 +346,8 @@ body {
        &.icon-next,
        &.icon-previous {
          mask-image: url('#{$assets-path}/player/images/next.svg');
-          -webkit-mask-image: url('#{$assets-path}/player/images/next.svg');
+          background-color: #fff;
-          background-color: white;
          mask-size: cover;
-          -webkit-mask-size: cover;
          width: 11px;
          height: 11px;
          margin-top: -2px;
@@ -410,7 +418,7 @@ body {
    }
    .vjs-volume-bar {
-      background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAcCAQAAACw95UnAAAAMElEQVRIx2NgoBL4n4YKGUYNHkEG4zJg1OCRYDCpBowaPJwMppbLRg0eNXjUYBLEAXWNUA6QNm1lAAAAAElFTkSuQmCC) no-repeat;
+      background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAcCAQAAACw95UnAAAAMElEQVRIx2NgoBL4n4YKGUYNHkEG4zJg1OCRYDCpBowaPJwMppbLRg0eNXjUYBLEAXWNUA6QNm1lAAAAAElFTkSuQmCC') no-repeat;
      background-size: 22px 14px;
      height: 100%;
      width: 100%;
@@ -421,7 +429,7 @@ body {
      top: 3px;
      .vjs-volume-level {
-        background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAcAQAAAAAyhWABAAAAAnRSTlMAAHaTzTgAAAAZSURBVHgBYwAB/g9EUv+JokCqiaT+U4MCAPKPS7WUUOc1AAAAAElFTkSuQmCC) no-repeat;
+        background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAcAQAAAAAyhWABAAAAAnRSTlMAAHaTzTgAAAAZSURBVHgBYwAB/g9EUv+JokCqiaT+U4MCAPKPS7WUUOc1AAAAAElFTkSuQmCC') no-repeat;
        background-size: 22px 14px;
        max-width: 22px;
        max-height: 14px;
diff --git a/client/src/sass/player/playlist.scss b/client/src/sass/player/playlist.scss
index ebbed02d9..8558fc837 100644
--- a/client/src/sass/player/playlist.scss
+++ b/client/src/sass/player/playlist.scss
@@ -44,10 +44,8 @@ $playlist-menu-width: 350px;
      width: 20px;
      height: 20px;
      mask-image: url('#{$assets-path}/images/feather/x.svg');
-      -webkit-mask-image: url('#{$assets-path}/images/feather/x.svg');
+      background-color: #fff;
-      background-color: white;
      mask-size: cover;
-      -webkit-mask-size: cover;
    }
  }
 }
@@ -90,10 +88,8 @@ $playlist-menu-width: 350px;
  width: 22px;
  height: 22px;
  mask-image: url('#{$assets-path}/images/feather/list.svg');
-  -webkit-mask-image: url('#{$assets-path}/images/feather/list.svg');
+  background-color: #fff;
-  background-color: white;
  mask-size: cover;
-  -webkit-mask-size: cover;
  margin-bottom: 3px;
 }
@@ -133,9 +129,9 @@ $playlist-menu-width: 350px;
  }
  .item-player {
-    display: none;
    @include play-icon(20px, 16px);
+    display: none;
  }
  &.vjs-selected {
diff --git a/client/src/sass/player/settings-menu.scss b/client/src/sass/player/settings-menu.scss
index 09c872ef7..74eee7d64 100644
--- a/client/src/sass/player/settings-menu.scss
+++ b/client/src/sass/player/settings-menu.scss
@@ -149,7 +149,7 @@ $setting-transition-easing: ease-out;
            background-color: inherit;
            padding: 8px 8px 13px 12px;
            margin-bottom: 5px;
-            border-bottom: 1px solid grey;
+            border-bottom: 1px solid #808080;
            text-align: left;
            &::before {
diff --git a/client/src/sass/player/spinner.scss b/client/src/sass/player/spinner.scss
index a6af8da33..94f4d1008 100644
--- a/client/src/sass/player/spinner.scss
+++ b/client/src/sass/player/spinner.scss
@@ -51,4 +51,4 @@
      opacity: 1;
    }
  }
-}
-\ No newline at end of file
+}
diff --git a/client/src/sass/player/stats.scss b/client/src/sass/player/stats.scss
new file mode 100644
index 000000000..6fcbcd969
--- /dev/null
+++ b/client/src/sass/player/stats.scss
@@ -0,0 +1,41 @@
+@import './_player-variables';
+$stats-width: 420px;
+$contextmenu-background-color: rgba(0, 0, 0, 0.6);
+.video-js {
+  .vjs-stats-content {
+    @include transition(opacity 0.1s);
+    position: absolute;
+    background-color: $contextmenu-background-color;
+    padding: 5px 0;
+    border-radius: 4px;
+    width: $stats-width;
+    min-width: 27em;
+    max-width: calc(100vw - 20px);
+    left: 10px;
+    top: 10px;
+    z-index: 64;
+    font-size: 12px;
+    line-height: 1.2;
+  }
+  .vjs-stats-close {
+    cursor: pointer;
+    position: absolute;
+    right: 3px;
+    top: 3px;
+    padding: 0;
+  }
+  .vjs-stats-list > div > div {
+    display: inline-block;
+    font-weight: 600;
+    padding: 0 .5em;
+    text-align: right;
+    width: 11.5em;
+    white-space: nowrap;
+  }
+}
diff --git a/client/src/sass/player/upnext.scss b/client/src/sass/player/upnext.scss
index 7614bb3b6..8c9a6f784 100644
--- a/client/src/sass/player/upnext.scss
+++ b/client/src/sass/player/upnext.scss
@@ -11,15 +11,15 @@ $browser-context: 16;
 .video-js {
  .vjs-upnext-content {
+    @include transition(opacity 0.1s);
    font-size: 1.8em;
    pointer-events: auto;
    position: absolute;
    top: 0;
    bottom: 0;
-    background: rgba(0,0,0,0.6);
+    background: rgba(0, 0, 0, 0.6);
    width: 100%;
-    @include transition(opacity 0.1s);
  }
  .vjs-upnext-top {
@@ -77,7 +77,7 @@ $browser-context: 16;
    float: none;
    padding: 10px !important;
    font-size: 16px !important;
-    border: none;
+    border: 0;
  }
  .vjs-upnext-cancel-button,
@@ -86,7 +86,7 @@ $browser-context: 16;
  }
  .vjs-upnext-cancel-button:hover {
-    background-color: rgba(255,255,255,0.25);
+    background-color: rgba(255, 255, 255, 0.25);
    border-radius: 2px;
  }
@@ -95,6 +95,8 @@ $browser-context: 16;
  }
  .vjs-upnext-autoplay-icon {
+    @include transition(stroke-dasharray 0.1s cubic-bezier(0.4,0,1,1));
    position: absolute;
    top: 50%;
    left: 50%;
@@ -102,8 +104,6 @@ $browser-context: 16;
    height: 98px;
    margin: -49px 0 0 -49px;
    cursor: pointer;
-    @include transition(stroke-dasharray 0.1s cubic-bezier(0.4,0,1,1));
  }
 }
diff --git a/client/src/sass/primeng-custom.scss b/client/src/sass/primeng-custom.scss
index 544d0039a..6a4d89dff 100644
--- a/client/src/sass/primeng-custom.scss
+++ b/client/src/sass/primeng-custom.scss
@@ -1,13 +1,18 @@
 @import '_variables';
 @import '_mixins';
+/* stylelint-disable */
 @import '~primeng/resources/primeng.css';
 // Override primeng style we don't want
-input[type="button"] {
+input[type=button] {
  border-radius: inherit;
 }
+p-table .p-datatable-header .caption {
+  margin-bottom: 15px;
+}
 // Taken from old nova light theme
 body .p-disabled {
@@ -511,10 +516,6 @@ p-table {
      .left-buttons {
        padding-left: 15px;
      }
-      .input-group-text {
-        background-color: transparent;
-      }
    }
  }
diff --git a/client/src/standalone/videos/embed.scss b/client/src/standalone/videos/embed.scss
index cbe6bdd01..e32cce54e 100644
--- a/client/src/standalone/videos/embed.scss
+++ b/client/src/standalone/videos/embed.scss
@@ -21,7 +21,8 @@ video {
 }
 /* fill the entire space */
-html, body {
+html,
+body {
  height: 100%;
  margin: 0;
  background-color: #000;
@@ -70,18 +71,18 @@ html, body {
  text-align: center;
  width: 100%;
  height: 100%;
-  color: white;
+  color: #fff;
  box-sizing: border-box;
  font-family: sans-serif;
+}
-  #error-title {
+#error-title {
-    font-size: 45px;
+  font-size: 45px;
-    margin-bottom: 5px;
+  margin-bottom: 5px;
-  }
+}
-  #error-content {
+#error-content {
-    font-size: 24px;
+  font-size: 24px;
-  }
 }
 #placeholder-preview {
@@ -97,10 +98,10 @@ html, body {
 @media screen and (max-width: 300px) {
  #error-block {
    font-size: 36px;
+  }
-    #error-content {
+  #error-content {
-      font-size: 14px;
+    font-size: 14px;
-    }
  }
 }
diff --git a/client/src/standalone/videos/test-embed.scss b/client/src/standalone/videos/test-embed.scss
index 85ce4e0f7..b9ac3e74e 100644
--- a/client/src/standalone/videos/test-embed.scss
+++ b/client/src/standalone/videos/test-embed.scss
@@ -15,7 +15,7 @@ body {
 }
 iframe {
-  border: none;
+  border: 0;
  border-radius: 8px;
  min-width: 200px;
  width: 100%;
@@ -41,7 +41,7 @@ aside {
  .icon {
    height: 100%;
    padding: 0 18px 0 32px;
-    background: white;
+    background: #fff;
    display: flex;
    align-items: center;
    margin-right: 0.5em;
@@ -62,13 +62,13 @@ header {
  width: 100%;
  height: 3.2em;
  background-color: #F1680D;
-  color: white;
+  color: #fff;
  //background-image: url(../../assets/images/backdrop/network-o.png);
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 1em;
-  box-shadow: 1px 0px 10px rgba(0,0,0,0.6);
+  box-shadow: 1px 0 10px rgba(0, 0, 0, 0.6);
  background-size: 50%;
  background-position: top left;
  padding-right: 1em;
@@ -87,13 +87,13 @@ header {
  display: flex;
  flex-wrap: wrap;
-  & > * {
+  > * {
    flex-grow: 0;
  }
 }
 fieldset {
-  border: none;
+  border: 0;
  min-width: 8em;
  legend {
    border-bottom: 1px solid #ccc;
@@ -103,12 +103,12 @@ fieldset {
 button {
  background: #F1680D;
-  color: white;
+  color: #fff;
  font-weight: bold;
  border-radius: 5px;
  margin: 0;
  padding: 1em 1.25em;
-  border: none;
+  border: 0;
 }
 a {
@@ -118,7 +118,11 @@ a {
    text-decoration: underline;
  }
-  &, &:hover, &:focus, &:visited, &:active {
+  &,
+  &:hover,
+  &:focus,
+  &:visited,
+  &:active {
    color: #F44336;
  }
 }