86 files changed, 728 insertions, 451 deletions
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)