93 files changed, 1359 insertions, 849 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 fb8366f4c..658d42537 100644
--- a/client/src/app/shared/shared-abuse-list/abuse-details.component.html
+++ b/client/src/app/shared/shared-abuse-list/abuse-details.component.html
@@ -10,12 +10,7 @@
        <a [routerLink]="[ baseRoute ]" [queryParams]="{ 'search': 'reporter:&quot;' + abuse.reporterAccount.displayName + '&quot;' }"
          class="chip"
        >
-          <img
+          <my-account-avatar [account]="abuse.reporterAccount"></my-account-avatar>
-            class="avatar"
-            [src]="abuse.reporterAccount.avatar?.path"
-            (error)="switchToDefaultAvatar($event)"
-            alt="Avatar"
-          >
          <div>
            <span class="text-muted">{{ abuse.reporterAccount.nameWithHost }}</span>
          </div>
@@ -35,12 +30,7 @@
        <a [routerLink]="[ baseRoute ]" [queryParams]="{ 'search': 'reportee:&quot;' +abuse.flaggedAccount.displayName + '&quot;' }"
          class="chip"
        >
-          <img
+          <my-account-avatar [account]="abuse.flaggedAccount"></my-account-avatar>
-            class="avatar"
-            [src]="abuse.flaggedAccount?.avatar?.path"
-            (error)="switchToDefaultAvatar($event)"
-            alt="Avatar"
-          >
          <div>
            <span class="text-muted">{{ abuse.flaggedAccount ? abuse.flaggedAccount.nameWithHost : '' }}</span>
          </div>
diff --git a/client/src/app/shared/shared-abuse-list/abuse-details.component.ts b/client/src/app/shared/shared-abuse-list/abuse-details.component.ts
index 31cf3389d..e8ce7e678 100644
--- a/client/src/app/shared/shared-abuse-list/abuse-details.component.ts
+++ b/client/src/app/shared/shared-abuse-list/abuse-details.component.ts
@@ -45,8 +45,4 @@ export class AbuseDetailsComponent {
      label: this.predefinedReasonsTranslations[r]
    }))
  }
-  switchToDefaultAvatar ($event: Event) {
-    ($event.target as HTMLImageElement).src = Account.GET_DEFAULT_AVATAR_URL()
-  }
 }
diff --git a/client/src/app/shared/shared-abuse-list/abuse-list-table.component.html b/client/src/app/shared/shared-abuse-list/abuse-list-table.component.html
index 8428032bf..29b51f09c 100644
--- a/client/src/app/shared/shared-abuse-list/abuse-list-table.component.html
+++ b/client/src/app/shared/shared-abuse-list/abuse-list-table.component.html
@@ -65,12 +65,7 @@
      <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">
-            <img
+            <my-account-avatar [account]="abuse.reporterAccount"></my-account-avatar>
-              class="avatar"
-              [src]="abuse.reporterAccount.avatar?.path"
-              (error)="switchToDefaultAvatar($event)"
-              alt="Avatar"
-            >
            <div>
              {{ abuse.reporterAccount.displayName }}
              <span>{{ abuse.reporterAccount.nameWithHost }}</span>
diff --git a/client/src/app/shared/shared-abuse-list/abuse-list-table.component.ts b/client/src/app/shared/shared-abuse-list/abuse-list-table.component.ts
index e34836a18..8b5771237 100644
--- a/client/src/app/shared/shared-abuse-list/abuse-list-table.component.ts
+++ b/client/src/app/shared/shared-abuse-list/abuse-list-table.component.ts
@@ -117,14 +117,11 @@ export class AbuseListTableComponent extends RestTable implements OnInit, AfterV
        warningTitle: false,
        startTime: abuse.video.startAt,
        stopTime: abuse.video.endAt
-      })
+      }),
+      abuse.video.name
    )
  }
-  switchToDefaultAvatar ($event: Event) {
-    ($event.target as HTMLImageElement).src = Account.GET_DEFAULT_AVATAR_URL()
-  }
  async removeAbuse (abuse: AdminAbuse) {
    const res = await this.confirmService.confirm($localize`Do you really want to delete this abuse report?`, $localize`Delete`)
    if (res === false) return
diff --git a/client/src/app/shared/shared-abuse-list/abuse-message-modal.component.html b/client/src/app/shared/shared-abuse-list/abuse-message-modal.component.html
index 17e9ce4cf..ab6967f28 100644
--- a/client/src/app/shared/shared-abuse-list/abuse-message-modal.component.html
+++ b/client/src/app/shared/shared-abuse-list/abuse-message-modal.component.html
@@ -41,7 +41,7 @@
      </div>
      <div class="form-group inputs">
-        <input type="submit" i18n-value value="Add a message" class="action-button-submit" [disabled]="!form.valid || sendingMessage">
+        <input type="submit" i18n-value value="Add a message" class="peertube-button orange-button" [disabled]="!form.valid || sendingMessage">
      </div>
    </form>
diff --git a/client/src/app/shared/shared-abuse-list/moderation-comment-modal.component.html b/client/src/app/shared/shared-abuse-list/moderation-comment-modal.component.html
index 8082e93f4..cc7bb6c92 100644
--- a/client/src/app/shared/shared-abuse-list/moderation-comment-modal.component.html
+++ b/client/src/app/shared/shared-abuse-list/moderation-comment-modal.component.html
@@ -23,14 +23,11 @@
      <div class="form-group inputs">
        <input
-          type="button" role="button" i18n-value value="Cancel" class="action-button action-button-cancel"
+          type="button" role="button" i18n-value value="Cancel" class="peertube-button grey-button"
          (click)="hide()" (key.enter)="hide()"
        >
-        <input
+        <input type="submit" i18n-value value="Update this comment" class="peertube-button orange-button" [disabled]="!form.valid" />
-          type="submit" i18n-value value="Update this comment" class="action-button-submit"
-          [disabled]="!form.valid"
-        >
      </div>
    </form>
  </div>
diff --git a/client/src/app/shared/shared-abuse-list/shared-abuse-list.module.ts b/client/src/app/shared/shared-abuse-list/shared-abuse-list.module.ts
index 663cd902b..19b6d456d 100644
--- a/client/src/app/shared/shared-abuse-list/shared-abuse-list.module.ts
+++ b/client/src/app/shared/shared-abuse-list/shared-abuse-list.module.ts
@@ -10,6 +10,7 @@ import { AbuseDetailsComponent } from './abuse-details.component'
 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'
 @NgModule({
  imports: [
@@ -19,7 +20,8 @@ import { ModerationCommentModalComponent } from './moderation-comment-modal.comp
    SharedFormModule,
    SharedModerationModule,
    SharedGlobalIconModule,
-    SharedVideoCommentModule
+    SharedVideoCommentModule,
+    SharedAccountAvatarModule
  ],
  declarations: [
diff --git a/client/src/app/shared/shared-account-avatar/account-avatar.component.html b/client/src/app/shared/shared-account-avatar/account-avatar.component.html
new file mode 100644
index 000000000..ca4ceb12f
--- /dev/null
+++ b/client/src/app/shared/shared-account-avatar/account-avatar.component.html
@@ -0,0 +1,15 @@
+<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
new file mode 100644
index 000000000..bb941d712
--- /dev/null
+++ b/client/src/app/shared/shared-account-avatar/account-avatar.component.scss
@@ -0,0 +1,22 @@
+@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
new file mode 100644
index 000000000..02a0a18bf
--- /dev/null
+++ b/client/src/app/shared/shared-account-avatar/account-avatar.component.ts
@@ -0,0 +1,39 @@
+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
new file mode 100644
index 000000000..40c742ba5
--- /dev/null
+++ b/client/src/app/shared/shared-account-avatar/index.ts
@@ -0,0 +1,2 @@
+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
new file mode 100644
index 000000000..17b27589f
--- /dev/null
+++ b/client/src/app/shared/shared-account-avatar/shared-account-avatar.module.ts
@@ -0,0 +1,23 @@
+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/actor-avatar-edit.component.html
new file mode 100644
index 000000000..0829263f4
--- /dev/null
+++ b/client/src/app/shared/shared-actor-image/actor-avatar-edit.component.html
@@ -0,0 +1,41 @@
+<div class="actor" *ngIf="actor">
+  <div class="d-flex">
+    <img [ngClass]="{ channel: isChannel() }" [src]="preview || actor.avatarUrl" alt="Avatar" />
+    <div class="actor-img-edit-container">
+      <div *ngIf="editable && !hasAvatar()" class="actor-img-edit-button" [ngbTooltip]="avatarFormat" placement="right" container="body">
+        <my-global-icon iconName="upload"></my-global-icon>
+        <label class="sr-only" for="avatarfile" i18n>Upload a new avatar</label>
+        <input #avatarfileInput type="file" name="avatarfile" id="avatarfile" [accept]="avatarExtensions" (change)="onAvatarChange(avatarfileInput)"/>
+      </div>
+      <div
+        *ngIf="editable && hasAvatar()" class="actor-img-edit-button"
+        #avatarPopover="ngbPopover" [ngbPopover]="avatarEditContent" popoverClass="popover-image-info" autoClose="outside" placement="right"
+      >
+        <my-global-icon iconName="edit"></my-global-icon>
+        <label class="sr-only" for="avatarMenu" i18n>Change your avatar</label>
+      </div>
+    </div>
+  </div>
+  <div class="actor-info">
+    <div class="actor-info-display-name">{{ actor.displayName }}</div>
+    <div *ngIf="displayUsername" class="actor-info-username">{{ actor.name }}</div>
+    <div *ngIf="displaySubscribers" i18n class="actor-info-followers">{{ actor.followersCount }} subscribers</div>
+  </div>
+</div>
+<ng-template #avatarEditContent>
+  <div class="dropdown-item c-hand" [ngbTooltip]="avatarFormat" placement="right" container="body">
+    <my-global-icon iconName="upload"></my-global-icon>
+    <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>
+  </div>
+</ng-template>
diff --git a/client/src/app/shared/shared-actor-image/actor-avatar-edit.component.scss b/client/src/app/shared/shared-actor-image/actor-avatar-edit.component.scss
new file mode 100644
index 000000000..8b0172315
--- /dev/null
+++ b/client/src/app/shared/shared-actor-image/actor-avatar-edit.component.scss
@@ -0,0 +1,54 @@
+@import '_variables';
+@import '_mixins';
+.actor {
+  display: flex;
+  img {
+    margin-right: 15px;
+    &:not(.channel) {
+      @include avatar(100px);
+    }
+    &.channel {
+      @include channel-avatar(100px);
+    }
+  }
+  .actor-info {
+    display: inline-flex;
+    flex-direction: column;
+    .actor-info-display-name {
+      font-size: 20px;
+      font-weight: $font-bold;
+      @media screen and (max-width: $small-view) {
+        font-size: 16px;
+      }
+    }
+    .actor-info-username {
+      position: relative;
+      font-size: 14px;
+      color: pvar(--greyForegroundColor);
+    }
+    .actor-info-followers {
+      font-size: 15px;
+      padding-bottom: .5rem;
+    }
+  }
+}
+.actor-img-edit-container {
+  position: relative;
+  width: 0;
+}
+.actor-img-edit-button {
+  top: 55px;
+  right: 45px;
+  border-radius: 50%;
+}
diff --git a/client/src/app/shared/shared-main/account/actor-avatar-info.component.ts b/client/src/app/shared/shared-actor-image/actor-avatar-edit.component.ts
index b459c591f..d0d269489 100644
--- a/client/src/app/shared/shared-main/account/actor-avatar-info.component.ts
+++ b/client/src/app/shared/shared-actor-image/actor-avatar-edit.component.ts
@@ -1,21 +1,27 @@
-import { Component, ElementRef, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges, ViewChild } from '@angular/core'
+import { Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core'
+import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser'
 import { Notifier, ServerService } from '@app/core'
+import { Account, VideoChannel } from '@app/shared/shared-main'
 import { NgbPopover } from '@ng-bootstrap/ng-bootstrap'
 import { getBytes } from '@root-helpers/bytes'
-import { Account } from '../account/account.model'
-import { VideoChannel } from '../video-channel/video-channel.model'
-import { Actor } from './actor.model'
 @Component({
-  selector: 'my-actor-avatar-info',
+  selector: 'my-actor-avatar-edit',
-  templateUrl: './actor-avatar-info.component.html',
+  templateUrl: './actor-avatar-edit.component.html',
-  styleUrls: [ './actor-avatar-info.component.scss' ]
+  styleUrls: [
+    './actor-image-edit.scss',
+    './actor-avatar-edit.component.scss'
+  ]
 })
-export class ActorAvatarInfoComponent implements OnInit, OnChanges {
+export class ActorAvatarEditComponent implements OnInit {
  @ViewChild('avatarfileInput') avatarfileInput: ElementRef<HTMLInputElement>
  @ViewChild('avatarPopover') avatarPopover: NgbPopover
  @Input() actor: VideoChannel | Account
+  @Input() editable = true
+  @Input() displaySubscribers = true
+  @Input() displayUsername = true
+  @Input() previewImage = false
  @Output() avatarChange = new EventEmitter<FormData>()
  @Output() avatarDelete = new EventEmitter<void>()
@@ -24,9 +30,10 @@ export class ActorAvatarInfoComponent implements OnInit, OnChanges {
  maxAvatarSize = 0
  avatarExtensions = ''
-  private avatarUrl: string
+  preview: SafeResourceUrl
  constructor (
+    private sanitizer: DomSanitizer,
    private serverService: ServerService,
    private notifier: Notifier
  ) { }
@@ -42,12 +49,6 @@ export class ActorAvatarInfoComponent implements OnInit, OnChanges {
        })
  }
-  ngOnChanges (changes: SimpleChanges) {
-    if (changes['actor']) {
-      this.avatarUrl = Actor.GET_ACTOR_AVATAR_URL(this.actor)
-    }
-  }
  onAvatarChange (input: HTMLInputElement) {
    this.avatarfileInput = new ElementRef(input)
@@ -61,13 +62,22 @@ export class ActorAvatarInfoComponent implements OnInit, OnChanges {
    formData.append('avatarfile', avatarfile)
    this.avatarPopover?.close()
    this.avatarChange.emit(formData)
+    if (this.previewImage) {
+      this.preview = this.sanitizer.bypassSecurityTrustResourceUrl(URL.createObjectURL(avatarfile))
+    }
  }
  deleteAvatar () {
+    this.preview = undefined
    this.avatarDelete.emit()
  }
  hasAvatar () {
-    return !!this.avatarUrl
+    return !!this.preview || !!this.actor.avatar
+  }
+  isChannel () {
+    return !!(this.actor as VideoChannel).ownerAccount
  }
 }
diff --git a/client/src/app/shared/shared-actor-image/actor-banner-edit.component.html b/client/src/app/shared/shared-actor-image/actor-banner-edit.component.html
new file mode 100644
index 000000000..266fc26c5
--- /dev/null
+++ b/client/src/app/shared/shared-actor-image/actor-banner-edit.component.html
@@ -0,0 +1,34 @@
+<div class="actor" *ngIf="actor">
+  <div class="actor-img-edit-container">
+    <div class="banner-placeholder">
+      <img *ngIf="hasBanner()" [src]="preview || actor.bannerUrl" alt="Banner" />
+    </div>
+    <div *ngIf="!hasBanner()" class="actor-img-edit-button" [ngbTooltip]="bannerFormat" placement="right" container="body">
+      <my-global-icon iconName="upload"></my-global-icon>
+      <label for="bannerfile" i18n>Upload a new banner</label>
+      <input #bannerfileInput type="file" name="bannerfile" id="bannerfile" [accept]="bannerExtensions" (change)="onBannerChange(bannerfileInput)"/>
+    </div>
+    <div
+      *ngIf="hasBanner()" class="actor-img-edit-button"
+      #bannerPopover="ngbPopover" [ngbPopover]="bannerEditContent" popoverClass="popover-image-info" autoClose="outside" placement="right"
+    >
+      <my-global-icon iconName="edit"></my-global-icon>
+      <label for="bannerMenu" i18n>Change your banner</label>
+    </div>
+  </div>
+</div>
+<ng-template #bannerEditContent>
+  <div class="dropdown-item c-hand" [ngbTooltip]="bannerFormat" placement="right" container="body">
+    <my-global-icon iconName="upload"></my-global-icon>
+    <span for="bannerfile" i18n>Upload a new banner</span>
+    <input #bannerfileInput type="file" name="bannerfile" id="bannerfile" [accept]="bannerExtensions" (change)="onBannerChange(bannerfileInput)"/>
+  </div>
+  <div class="dropdown-item c-hand" (click)="deleteBanner()" (key.enter)="deleteBanner()">
+    <my-global-icon iconName="delete"></my-global-icon>
+    <span i18n>Remove banner</span>
+  </div>
+</ng-template>
diff --git a/client/src/app/shared/shared-actor-image/actor-banner-edit.component.scss b/client/src/app/shared/shared-actor-image/actor-banner-edit.component.scss
new file mode 100644
index 000000000..23606f871
--- /dev/null
+++ b/client/src/app/shared/shared-actor-image/actor-banner-edit.component.scss
@@ -0,0 +1,27 @@
+@import '_variables';
+@import '_mixins';
+.banner-placeholder {
+  @include block-ratio('> div, > img', $banner-inverted-ratio);
+}
+.banner-placeholder {
+  background-color: pvar(--greyBackgroundColor);
+}
+.actor-img-edit-container {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.actor-img-edit-button {
+  position: absolute;
+  width: auto;
+  label {
+    font-weight: $font-semibold;
+    margin-bottom: 0;
+  }
+}
diff --git a/client/src/app/shared/shared-actor-image/actor-banner-edit.component.ts b/client/src/app/shared/shared-actor-image/actor-banner-edit.component.ts
new file mode 100644
index 000000000..8c12d3c4c
--- /dev/null
+++ b/client/src/app/shared/shared-actor-image/actor-banner-edit.component.ts
@@ -0,0 +1,76 @@
+import { Component, ElementRef, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges, ViewChild } from '@angular/core'
+import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser'
+import { Notifier, ServerService } from '@app/core'
+import { VideoChannel } from '@app/shared/shared-main'
+import { NgbPopover } from '@ng-bootstrap/ng-bootstrap'
+import { getBytes } from '@root-helpers/bytes'
+@Component({
+  selector: 'my-actor-banner-edit',
+  templateUrl: './actor-banner-edit.component.html',
+  styleUrls: [
+    './actor-image-edit.scss',
+    './actor-banner-edit.component.scss'
+  ]
+})
+export class ActorBannerEditComponent implements OnInit {
+  @ViewChild('bannerfileInput') bannerfileInput: ElementRef<HTMLInputElement>
+  @ViewChild('bannerPopover') bannerPopover: NgbPopover
+  @Input() actor: VideoChannel
+  @Input() previewImage = false
+  @Output() bannerChange = new EventEmitter<FormData>()
+  @Output() bannerDelete = new EventEmitter<void>()
+  bannerFormat = ''
+  maxBannerSize = 0
+  bannerExtensions = ''
+  preview: SafeResourceUrl
+  constructor (
+    private sanitizer: DomSanitizer,
+    private serverService: ServerService,
+    private notifier: Notifier
+  ) { }
+  ngOnInit (): void {
+    this.serverService.getConfig()
+        .subscribe(config => {
+          this.maxBannerSize = config.banner.file.size.max
+          this.bannerExtensions = config.banner.file.extensions.join(', ')
+          // tslint:disable:max-line-length
+          this.bannerFormat = $localize`ratio 6/1, recommended size: 1600x266, max size: ${getBytes(this.maxBannerSize)}, extensions: ${this.bannerExtensions}`
+        })
+  }
+  onBannerChange (input: HTMLInputElement) {
+    this.bannerfileInput = new ElementRef(input)
+    const bannerfile = this.bannerfileInput.nativeElement.files[ 0 ]
+    if (bannerfile.size > this.maxBannerSize) {
+      this.notifier.error('Error', $localize`This image is too large.`)
+      return
+    }
+    const formData = new FormData()
+    formData.append('bannerfile', bannerfile)
+    this.bannerPopover?.close()
+    this.bannerChange.emit(formData)
+    if (this.previewImage) {
+      this.preview = this.sanitizer.bypassSecurityTrustResourceUrl(URL.createObjectURL(bannerfile))
+    }
+  }
+  deleteBanner () {
+    this.preview = undefined
+    this.bannerDelete.emit()
+  }
+  hasBanner () {
+    return !!this.preview || !!this.actor.bannerUrl
+  }
+}
diff --git a/client/src/app/shared/shared-actor-image/actor-image-edit.scss b/client/src/app/shared/shared-actor-image/actor-image-edit.scss
new file mode 100644
index 000000000..918955a89
--- /dev/null
+++ b/client/src/app/shared/shared-actor-image/actor-image-edit.scss
@@ -0,0 +1,35 @@
+@import '_variables';
+@import '_mixins';
+.actor ::ng-deep .popover-image-info .popover-body {
+  padding: 0;
+  .dropdown-item {
+    padding: 6px 10px;
+    border-radius: 4px;
+    &:first-child {
+      @include peertube-file;
+      display: block;
+    }
+  }
+}
+.actor-img-edit-button {
+  @include peertube-button-file(21px);
+  @include button-with-icon(19px);
+  @include orange-button;
+  margin-top: 10px;
+  margin-bottom: 5px;
+  cursor: pointer;
+  input {
+    width: 30px;
+    height: 30px;
+  }
+  my-global-icon {
+    right: 7px;
+  }
+}
diff --git a/client/src/app/shared/shared-actor-image/index.ts b/client/src/app/shared/shared-actor-image/index.ts
new file mode 100644
index 000000000..18a9038eb
--- /dev/null
+++ b/client/src/app/shared/shared-actor-image/index.ts
@@ -0,0 +1 @@
+export * from './shared-actor-image.module'
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
new file mode 100644
index 000000000..6044f9925
--- /dev/null
+++ b/client/src/app/shared/shared-actor-image/shared-actor-image.module.ts
@@ -0,0 +1,29 @@
+import { CommonModule } from '@angular/common'
+import { NgModule } from '@angular/core'
+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,
+    SharedGlobalIconModule
+  ],
+  declarations: [
+    ActorAvatarEditComponent,
+    ActorBannerEditComponent
+  ],
+  exports: [
+    ActorAvatarEditComponent,
+    ActorBannerEditComponent
+  ],
+  providers: [ ]
+})
+export class SharedActorImageModule { }
diff --git a/client/src/app/shared/shared-forms/dynamic-form-field.component.html b/client/src/app/shared/shared-forms/dynamic-form-field.component.html
index c358cb119..c228069b5 100644
--- a/client/src/app/shared/shared-forms/dynamic-form-field.component.html
+++ b/client/src/app/shared/shared-forms/dynamic-form-field.component.html
@@ -1,10 +1,23 @@
 <div [formGroup]="form">
-  <label *ngIf="setting.type !== 'input-checkbox'" [attr.for]="setting.name" [innerHTML]="setting.label"></label>
+  <label *ngIf="setting.label && setting.type !== 'input-checkbox'" [attr.for]="setting.name" [innerHTML]="setting.label"></label>
+  <my-peertube-checkbox
+    *ngIf="setting.type === 'input-checkbox'"
+    [inputName]="setting.name"
+    [formControlName]="setting.name"
+    [labelInnerHTML]="setting.label"
+  ></my-peertube-checkbox>
  <div *ngIf="setting.descriptionHTML" class="label-small-info" [innerHTML]="setting.descriptionHTML"></div>
  <input *ngIf="setting.type === 'input'" type="text" [id]="setting.name" [formControlName]="setting.name" />
+  <div *ngIf="setting.type === 'select'" class="peertube-select-container">
+    <select  [id]="setting.name" [formControlName]="setting.name" class="form-control">
+      <option *ngFor="let option of setting.options" [value]="option.value">{{ option.label }}</option>
+    </select>
+  </div>
  <my-input-toggle-hidden *ngIf="setting.type === 'input-password'" [formControlName]="setting.name" [inputId]="setting.name"></my-input-toggle-hidden>
  <textarea *ngIf="setting.type === 'input-textarea'" type="text" [id]="setting.name" [formControlName]="setting.name"></textarea>
@@ -25,12 +38,7 @@
    [classes]="{ 'input-error': formErrors['settings.name'] }"
  ></my-markdown-textarea>
-  <my-peertube-checkbox
+  <div *ngIf="setting.type === 'html'" [innerHTML]="setting.html"></div>
-    *ngIf="setting.type === 'input-checkbox'"
-    [inputName]="setting.name"
-    [formControlName]="setting.name"
-    [labelInnerHTML]="setting.label"
-  ></my-peertube-checkbox>
  <div *ngIf="formErrors[setting.name]" class="form-error">
    {{ formErrors[setting.name] }}
diff --git a/client/src/app/shared/shared-forms/dynamic-form-field.component.scss b/client/src/app/shared/shared-forms/dynamic-form-field.component.scss
index 89193ed85..45ba28951 100644
--- a/client/src/app/shared/shared-forms/dynamic-form-field.component.scss
+++ b/client/src/app/shared/shared-forms/dynamic-form-field.component.scss
@@ -22,3 +22,7 @@ textarea {
  margin-bottom: 10px;
  font-size: 13px;
 }
+my-peertube-checkbox + .label-small-info {
+  margin-top: 5px;
+}
diff --git a/client/src/app/shared/shared-forms/input-toggle-hidden.component.html b/client/src/app/shared/shared-forms/input-toggle-hidden.component.html
index e7441e4c1..9f252f299 100644
--- a/client/src/app/shared/shared-forms/input-toggle-hidden.component.html
+++ b/client/src/app/shared/shared-forms/input-toggle-hidden.component.html
@@ -12,9 +12,10 @@
    <button
      *ngIf="withCopy" [cdkCopyToClipboard]="input.value" (click)="activateCopiedMessage()" type="button"
-      class="btn btn-outline-secondary" i18n-title title="Copy"
+      class="btn btn-outline-secondary text-uppercase" i18n-title title="Copy"
    >
-      <span class="glyphicon glyphicon-copy"></span>
+      <span class="glyphicon glyphicon-duplicate"></span>
+      Copy
    </button>
  </div>
 </div>
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 fcddfea03..8203c7d1c 100644
--- a/client/src/app/shared/shared-forms/markdown-textarea.component.scss
+++ b/client/src/app/shared/shared-forms/markdown-textarea.component.scss
@@ -131,7 +131,7 @@ $input-border-radius: 3px;
    border-right: none;
    :last-child {
-      margin-right: $not-expanded-horizontal-margins;
+      margin-right: pvar(--horizontalMarginContent);
    }
  }
diff --git a/client/src/app/shared/shared-forms/select/select-options.component.ts b/client/src/app/shared/shared-forms/select/select-options.component.ts
index 2890670e5..8482b9dea 100644
--- a/client/src/app/shared/shared-forms/select/select-options.component.ts
+++ b/client/src/app/shared/shared-forms/select/select-options.component.ts
@@ -1,4 +1,4 @@
-import { Component, forwardRef, Input } from '@angular/core'
+import { Component, forwardRef, HostListener, Input } from '@angular/core'
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'
 import { SelectOptionsItem } from '../../../../types/select-options-item.model'
@@ -26,6 +26,13 @@ export class SelectOptionsComponent implements ControlValueAccessor {
  propagateChange = (_: any) => { /* empty */ }
+  // Allow plugins to update our value
+  @HostListener('change', [ '$event.target' ])
+  handleChange (event: any) {
+    this.writeValue(event.value)
+    this.onModelChange()
+  }
  writeValue (id: number | string) {
    this.selectedId = id
  }
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 275600d60..2f6b420e3 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
@@ -31,7 +31,7 @@ ngb-accordion ::ng-deep {
      padding: 0;
      & + .collapse.show {
-        background-color: var(--submenuColor);
+        background-color: var(--submenuBackgroundColor);
      }
    }
  }
diff --git a/client/src/app/shared/shared-instance/instance-features-table.component.html b/client/src/app/shared/shared-instance/instance-features-table.component.html
index ce2557147..d505b6739 100644
--- a/client/src/app/shared/shared-instance/instance-features-table.component.html
+++ b/client/src/app/shared/shared-instance/instance-features-table.component.html
@@ -11,7 +11,7 @@
    <tr>
      <th i18n class="label" scope="row">
        <div>Default NSFW/sensitive videos policy</div>
-        <div class="more-info">can be redefined by the users</div>
+        <div class="c-hand more-info" (click)="openQuickSettingsHighlight()">can be redefined by the users</div>
      </th>
      <td class="value">{{ buildNSFWLabel() }}</td>
diff --git a/client/src/app/shared/shared-instance/instance-features-table.component.ts b/client/src/app/shared/shared-instance/instance-features-table.component.ts
index 0166157f9..c3b3dfdfd 100644
--- a/client/src/app/shared/shared-instance/instance-features-table.component.ts
+++ b/client/src/app/shared/shared-instance/instance-features-table.component.ts
@@ -1,6 +1,7 @@
 import { Component, OnInit } from '@angular/core'
 import { ServerService } from '@app/core'
 import { ServerConfig } from '@shared/models'
+import { PeertubeModalService } from '../shared-main/peertube-modal/peertube-modal.service'
 @Component({
  selector: 'my-instance-features-table',
@@ -11,7 +12,10 @@ export class InstanceFeaturesTableComponent implements OnInit {
  quotaHelpIndication = ''
  serverConfig: ServerConfig
-  constructor (private serverService: ServerService) { }
+  constructor (
+    private serverService: ServerService,
+    private modalService: PeertubeModalService
+  ) { }
  get initialUserVideoQuota () {
    return this.serverConfig.user.videoQuota
@@ -56,6 +60,10 @@ export class InstanceFeaturesTableComponent implements OnInit {
    return this.serverService.getServerVersionAndCommit()
  }
+  openQuickSettingsHighlight () {
+    this.modalService.openQuickSettingsSubject.next()
+  }
  private getApproximateTime (seconds: number) {
    const hours = Math.floor(seconds / 3600)
    let pluralSuffix = ''
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 b71a893d1..65e6798d4 100644
--- a/client/src/app/shared/shared-main/account/account.model.ts
+++ b/client/src/app/shared/shared-main/account/account.model.ts
@@ -1,4 +1,4 @@
-import { Account as ServerAccount, Avatar } from '@shared/models'
+import { Account as ServerAccount, Actor as ServerActor, ActorImage } from '@shared/models'
 import { Actor } from './actor.model'
 export class Account extends Actor implements ServerAccount {
@@ -13,7 +13,7 @@ export class Account extends Actor implements ServerAccount {
  userId?: number
-  static GET_ACTOR_AVATAR_URL (actor: object) {
+  static GET_ACTOR_AVATAR_URL (actor: { avatar?: { url?: string, path: string } }) {
    return Actor.GET_ACTOR_AVATAR_URL(actor) || this.GET_DEFAULT_AVATAR_URL()
  }
@@ -38,7 +38,7 @@ export class Account extends Actor implements ServerAccount {
    this.mutedServerByInstance = false
  }
-  updateAvatar (newAvatar: Avatar) {
+  updateAvatar (newAvatar: ActorImage) {
    this.avatar = newAvatar
    this.updateComputedAttributes()
diff --git a/client/src/app/shared/shared-main/account/actor-avatar-info.component.html b/client/src/app/shared/shared-main/account/actor-avatar-info.component.html
deleted file mode 100644
index 30584fd00..000000000
--- a/client/src/app/shared/shared-main/account/actor-avatar-info.component.html
+++ /dev/null
@@ -1,43 +0,0 @@
-<ng-container *ngIf="actor">
-  <div class="actor">
-    <div class="d-flex">
-      <img [src]="actor.avatarUrl" alt="Avatar" />
-      <div class="actor-img-edit-container">
-        <div *ngIf="!hasAvatar()" class="actor-img-edit-button" [ngbTooltip]="avatarFormat" placement="right" container="body">
-          <my-global-icon iconName="upload"></my-global-icon>
-          <label class="sr-only" for="avatarfile" i18n>Upload a new avatar</label>
-          <input #avatarfileInput type="file" title=" " name="avatarfile" id="avatarfile" [accept]="avatarExtensions" (change)="onAvatarChange(avatarfileInput)"/>
-        </div>
-        <div *ngIf="hasAvatar()" class="actor-img-edit-button" #avatarPopover="ngbPopover" [ngbPopover]="avatarEditContent" popoverClass="popover-avatar-info" autoClose="outside" placement="right">
-          <my-global-icon iconName="edit"></my-global-icon>
-          <label class="sr-only" for="avatarMenu" i18n>Change your avatar</label>
-        </div>
-      </div>
-    </div>
-    <div class="actor-info">
-      <div class="actor-info-names">
-        <div class="actor-info-display-name">{{ actor.displayName }}</div>
-        <div class="actor-info-username">{{ actor.name }}</div>
-      </div>
-      <div i18n class="actor-info-followers">{{ actor.followersCount }} subscribers</div>
-    </div>
-  </div>
-</ng-container>
-<ng-template #avatarEditContent>
-  <div class="dropdown-item c-hand" [ngbTooltip]="avatarFormat" placement="right" container="body">
-    <my-global-icon iconName="upload"></my-global-icon>
-    <span for="avatarfile" i18n>Upload a new avatar</span>
-    <input #avatarfileInput type="file" title=" " 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>
-  </div>
-</ng-template>
diff --git a/client/src/app/shared/shared-main/account/actor-avatar-info.component.scss b/client/src/app/shared/shared-main/account/actor-avatar-info.component.scss
deleted file mode 100644
index 57c298508..000000000
--- a/client/src/app/shared/shared-main/account/actor-avatar-info.component.scss
+++ /dev/null
@@ -1,86 +0,0 @@
-@import '_variables';
-@import '_mixins';
-.actor {
-  display: flex;
-  img {
-    @include avatar(100px);
-    margin-right: 15px;
-  }
-  .actor-img-edit-container {
-    position: relative;
-    width: 0;
-    .actor-img-edit-button {
-      @include peertube-button-file(21px);
-      @include button-with-icon(19px);
-      @include orange-button;
-    
-      margin-top: 10px;
-      margin-bottom: 5px;
-      border-radius: 50%;
-      top: 55px;
-      right: 45px;
-      cursor: pointer;
-      input {
-        width: 30px;
-        height: 30px;
-      }
-      my-global-icon {
-        right: 7px;
-      }
-    }
-  }
-  .actor-info {
-    justify-content: center;
-    display: inline-flex;
-    flex-direction: column;
-    .actor-info-names {
-      display: flex;
-      align-items: center;
-      .actor-info-display-name {
-        font-size: 20px;
-        font-weight: $font-bold;
-        @media screen and (max-width: $small-view) {
-          font-size: 16px;
-        }
-      }
-      .actor-info-username {
-        margin-left: 7px;
-        position: relative;
-        top: 2px;
-        font-size: 14px;
-        color: $grey-actor-name;
-      }
-    }
-    .actor-info-followers {
-      font-size: 15px;
-      padding-bottom: .5rem;
-    }
-  }
-}
-.actor-img-edit-container ::ng-deep .popover-avatar-info .popover-body {
-  padding: 0;
-  .dropdown-item {
-    padding: 6px 10px;
-    border-radius: 4px;
-    &:first-child {
-      @include peertube-file;
-      display: block;
-    }
-  }
-}
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 8222c9769..4b036341f 100644
--- a/client/src/app/shared/shared-main/account/actor.model.ts
+++ b/client/src/app/shared/shared-main/account/actor.model.ts
@@ -1,17 +1,20 @@
-import { Actor as ActorServer, Avatar } from '@shared/models'
 import { getAbsoluteAPIUrl } from '@app/helpers'
+import { Actor as ServerActor, ActorImage } from '@shared/models'
-export abstract class Actor implements ActorServer {
+export abstract class Actor implements ServerActor {
  id: number
-  url: string
  name: string
  host: string
+  url: string
  followingCount: number
  followersCount: number
  createdAt: Date | string
  updatedAt: Date | string
-  avatar: Avatar
+  avatar: ActorImage
  avatarUrl: string
  isLocal: boolean
@@ -24,6 +27,8 @@ export abstract class Actor implements ActorServer {
      return absoluteAPIUrl + actor.avatar.path
    }
+    return ''
  }
  static CREATE_BY_STRING (accountName: string, host: string, forceHostname = false) {
@@ -42,11 +47,11 @@ export abstract class Actor implements ActorServer {
    return host.trim() === thisHost
  }
-  protected constructor (hash: ActorServer) {
+  protected constructor (hash: Partial<ServerActor>) {
    this.id = hash.id
-    this.url = hash.url
+    this.url = hash.url ?? ''
-    this.name = hash.name
+    this.name = hash.name ?? ''
-    this.host = hash.host
+    this.host = hash.host ?? ''
    this.followingCount = hash.followingCount
    this.followersCount = hash.followersCount
diff --git a/client/src/app/shared/shared-main/account/index.ts b/client/src/app/shared/shared-main/account/index.ts
index 61c800e56..b80ddb9f5 100644
--- a/client/src/app/shared/shared-main/account/index.ts
+++ b/client/src/app/shared/shared-main/account/index.ts
@@ -1,5 +1,3 @@
 export * from './account.model'
 export * from './account.service'
-export * from './actor-avatar-info.component'
 export * from './actor.model'
-export * from './video-avatar-channel.component'
diff --git a/client/src/app/shared/shared-main/account/video-avatar-channel.component.html b/client/src/app/shared/shared-main/account/video-avatar-channel.component.html
deleted file mode 100644
index 310cc926f..000000000
--- a/client/src/app/shared/shared-main/account/video-avatar-channel.component.html
+++ /dev/null
@@ -1,26 +0,0 @@
-<div class="wrapper" [ngClass]="'avatar-' + size">
-  <ng-container *ngIf="!isChannelAvatarNull() && !genericChannel">
-    <a [routerLink]="[ '/video-channels', video.byVideoChannel ]" [title]="channelLinkTitle">
-      <img [src]="video.videoChannelAvatarUrl" i18n-alt alt="Channel avatar" />
-    </a>
-    <a [routerLink]="[ '/accounts', video.byAccount ]" [title]="accountLinkTitle">
-      <img [src]="video.accountAvatarUrl" i18n-alt alt="Account avatar" />
-    </a>
-  </ng-container>
-  <ng-container *ngIf="!isChannelAvatarNull() && genericChannel">
-    <a [routerLink]="[ '/accounts', video.byAccount ]" [title]="accountLinkTitle">
-      <img [src]="video.accountAvatarUrl" i18n-alt alt="Account avatar" />
-    </a>
-    <a [routerLink]="[ '/video-channels', video.byVideoChannel ]" [title]="channelLinkTitle">
-      <img [src]="video.videoChannelAvatarUrl" i18n-alt alt="Channel avatar" />
-    </a>
-  </ng-container>
-  <ng-container *ngIf="isChannelAvatarNull()">
-    <a [routerLink]="[ '/accounts', video.byAccount ]" [title]="accountLinkTitle">
-      <img [src]="video.accountAvatarUrl" i18n-alt alt="Account avatar" />
-    </a>
-  </ng-container>
-</div>
diff --git a/client/src/app/shared/shared-main/account/video-avatar-channel.component.scss b/client/src/app/shared/shared-main/account/video-avatar-channel.component.scss
deleted file mode 100644
index 37709fce6..000000000
--- a/client/src/app/shared/shared-main/account/video-avatar-channel.component.scss
+++ /dev/null
@@ -1,40 +0,0 @@
-@import '_mixins';
-.wrapper {
-  $avatar-size: 35px;
-  width: $avatar-size;
-  height: $avatar-size;
-  position: relative;
-  margin-right: 5px;
-  margin-bottom: 5px;
-  &.avatar-sm {
-    width: 28px;
-    height: 28px;
-    margin-bottom: 3px;
-  }
-  a {
-    @include disable-outline;
-  }
-  a img {
-    height: 100%;
-    object-fit: cover;
-    position: absolute;
-    top:50%;
-    left:50%;
-    border-radius: 50%;
-    transform: translate(-50%,-50%)
-  }
-  a:nth-of-type(2) img {
-    height: 60%;
-    width: 60%;
-    border: 2px solid pvar(--mainBackgroundColor);
-    transform: translateX(15%);
-    position: relative;
-    background-color: pvar(--mainBackgroundColor);
-  }
-}
diff --git a/client/src/app/shared/shared-main/account/video-avatar-channel.component.ts b/client/src/app/shared/shared-main/account/video-avatar-channel.component.ts
deleted file mode 100644
index 440e2b522..000000000
--- a/client/src/app/shared/shared-main/account/video-avatar-channel.component.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import { Component, Input, OnInit } from '@angular/core'
-import { Video } from '../video/video.model'
-@Component({
-  selector: 'my-video-avatar-channel',
-  templateUrl: './video-avatar-channel.component.html',
-  styleUrls: [ './video-avatar-channel.component.scss' ]
-})
-export class VideoAvatarChannelComponent implements OnInit {
-  @Input() video: Video
-  @Input() byAccount: string
-  @Input() size: 'md' | 'sm' = 'md'
-  @Input() genericChannel: boolean
-  channelLinkTitle = ''
-  accountLinkTitle = ''
-  ngOnInit () {
-    this.channelLinkTitle = $localize`${this.video.account.name} (channel page)`
-    this.accountLinkTitle = $localize`${this.video.byAccount} (account page)`
-  }
-  isChannelAvatarNull () {
-    return this.video.channel.avatar === null
-  }
-}
diff --git a/client/src/app/shared/shared-main/angular/autofocus.directive.ts b/client/src/app/shared/shared-main/angular/autofocus.directive.ts
new file mode 100644
index 000000000..5f087d79d
--- /dev/null
+++ b/client/src/app/shared/shared-main/angular/autofocus.directive.ts
@@ -0,0 +1,12 @@
+import { AfterViewInit, Directive, ElementRef } from '@angular/core'
+@Directive({
+  selector: '[autofocus]'
+})
+export class AutofocusDirective implements AfterViewInit {
+  constructor (private host: ElementRef) { }
+  ngAfterViewInit () {
+    this.host.nativeElement.focus()
+  }
+}
diff --git a/client/src/app/shared/shared-main/angular/index.ts b/client/src/app/shared/shared-main/angular/index.ts
index 29f8b3650..8ea47bb33 100644
--- a/client/src/app/shared/shared-main/angular/index.ts
+++ b/client/src/app/shared/shared-main/angular/index.ts
@@ -1,3 +1,4 @@
+export * from './autofocus.directive'
 export * from './bytes.pipe'
 export * from './duration-formatter.pipe'
 export * from './from-now.pipe'
diff --git a/client/src/app/shared/shared-main/auth/auth-interceptor.service.ts b/client/src/app/shared/shared-main/auth/auth-interceptor.service.ts
index 3ddaffbdf..4fe3b964d 100644
--- a/client/src/app/shared/shared-main/auth/auth-interceptor.service.ts
+++ b/client/src/app/shared/shared-main/auth/auth-interceptor.service.ts
@@ -27,7 +27,9 @@ export class AuthInterceptor implements HttpInterceptor {
                 catchError((err: HttpErrorResponse) => {
                   if (err.status === HttpStatusCode.UNAUTHORIZED_401 && err.error && err.error.code === 'invalid_token') {
                     return this.handleTokenExpired(req, next)
-                   } else if (err.status === HttpStatusCode.UNAUTHORIZED_401) {
+                   }
+                   if (err.status === HttpStatusCode.UNAUTHORIZED_401) {
                     return this.handleNotAuthenticated(err)
                   }
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 333d59440..b655ee708 100644
--- a/client/src/app/shared/shared-main/feeds/feed.component.scss
+++ b/client/src/app/shared/shared-main/feeds/feed.component.scss
@@ -2,19 +2,17 @@
 @import '_mixins';
 .feed {
-  width: min-content;
+  width: 100%;
  a {
    color: black;
    display: block;
  }
+}
-  my-global-icon {
+my-global-icon {
-    cursor: pointer;
+  cursor: pointer;
-    width: 12px;
+  width: 100%;
-    position: relative;
-    top: -2px;
-    @include apply-svg-color(pvar(--mainForegroundColor))
+  @include apply-svg-color(pvar(--mainForegroundColor))
-  }
 }
diff --git a/client/src/app/shared/shared-main/misc/simple-search-input.component.html b/client/src/app/shared/shared-main/misc/simple-search-input.component.html
index fb0d97122..c20c02e23 100644
--- a/client/src/app/shared/shared-main/misc/simple-search-input.component.html
+++ b/client/src/app/shared/shared-main/misc/simple-search-input.component.html
@@ -1,14 +1,15 @@
-<span>
+<div class="root">
-  <my-global-icon iconName="search" aria-label="Search" role="button" (click)="showInput()"></my-global-icon>
  <input
    #ref
    type="text"
    [(ngModel)]="value"
-    (focusout)="focusLost()"
    (keyup.enter)="searchChange()"
-    [hidden]="!shown"
+    [hidden]="!inputShown"
    [name]="name"
    [placeholder]="placeholder"
  >
-</span>
+  <my-global-icon iconName="search" aria-label="Search" role="button" (click)="onIconClick()" [title]="iconTitle"></my-global-icon>
+  <my-global-icon *ngIf="!alwaysShow && inputShown" i18n-title title="Close search" iconName="cross" (click)="hideInput()"></my-global-icon>
+</div>
diff --git a/client/src/app/shared/shared-main/misc/simple-search-input.component.scss b/client/src/app/shared/shared-main/misc/simple-search-input.component.scss
index 591b04fb2..5ae48f81b 100644
--- a/client/src/app/shared/shared-main/misc/simple-search-input.component.scss
+++ b/client/src/app/shared/shared-main/misc/simple-search-input.component.scss
@@ -1,29 +1,29 @@
 @import '_variables';
 @import '_mixins';
-span {
+.root {
-  opacity: .6;
+  display: flex;
-  
-  &:focus-within {
-    opacity: 1;
-  }
 }
 my-global-icon {
-  height: 18px;
+  height: 28px;
-  position: relative;
+  width: 28px;
-  top: -2px;
+  margin-left: 10px;
-}
+  cursor: pointer;
-input {
+  &:hover {
-  @include peertube-input-text(150px);
+    color: pvar(--mainHoverColor);
+  }
-  height: 22px; // maximum height for the account/video-channels links
+  &[iconName=search] {
-  padding-left: 10px;
+    color: pvar(--mainForegroundColor);
-  background-color: transparent;
+  }
-  border: none;
-  &::placeholder {
+  &[iconName=cross] {
-    font-size: 15px;
+    color: pvar(--mainForegroundColor);
  }
 }
+input {
+  @include peertube-input-text(200px);
+}
diff --git a/client/src/app/shared/shared-main/misc/simple-search-input.component.ts b/client/src/app/shared/shared-main/misc/simple-search-input.component.ts
index 86ae9ab42..224d71134 100644
--- a/client/src/app/shared/shared-main/misc/simple-search-input.component.ts
+++ b/client/src/app/shared/shared-main/misc/simple-search-input.component.ts
@@ -1,7 +1,7 @@
-import { Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core'
-import { ActivatedRoute, Router } from '@angular/router'
 import { Subject } from 'rxjs'
 import { debounceTime, distinctUntilChanged } from 'rxjs/operators'
+import { Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core'
+import { ActivatedRoute, Router } from '@angular/router'
 @Component({
  selector: 'simple-search-input',
@@ -13,11 +13,14 @@ export class SimpleSearchInputComponent implements OnInit {
  @Input() name = 'search'
  @Input() placeholder = $localize`Search`
+  @Input() iconTitle = $localize`Search`
+  @Input() alwaysShow = true
  @Output() searchChanged = new EventEmitter<string>()
+  @Output() inputDisplayChanged = new EventEmitter<boolean>()
  value = ''
-  shown: boolean
+  inputShown: boolean
  private searchSubject = new Subject<string>()
@@ -35,20 +38,51 @@ export class SimpleSearchInputComponent implements OnInit {
        .subscribe(value => this.searchChanged.emit(value))
    this.searchSubject.next(this.value)
+    if (this.isInputShown()) this.showInput(false)
  }
-  showInput () {
+  isInputShown () {
-    this.shown = true
+    if (this.alwaysShow) return true
-    setTimeout(() => this.input.nativeElement.focus())
+    return this.inputShown
+  }
+  onIconClick () {
+    if (!this.isInputShown()) {
+      this.showInput()
+      return
+    }
+    this.searchChange()
+  }
+  showInput (focus = true) {
+    this.inputShown = true
+    this.inputDisplayChanged.emit(this.inputShown)
+    if (focus) {
+      setTimeout(() => this.input.nativeElement.focus())
+    }
+  }
+  hideInput () {
+    this.inputShown = false
+    if (this.isInputShown() === false) {
+      this.inputDisplayChanged.emit(this.inputShown)
+    }
  }
  focusLost () {
-    if (this.value !== '') return
+    if (this.value) return
-    this.shown = false
+    this.hideInput()
  }
  searchChange () {
-    this.router.navigate(['./search'], { relativeTo: this.route })
+    this.router.navigate([ './search' ], { relativeTo: this.route })
    this.searchSubject.next(this.value)
  }
 }
diff --git a/client/src/app/shared/shared-main/peertube-modal/index.ts b/client/src/app/shared/shared-main/peertube-modal/index.ts
new file mode 100644
index 000000000..d631522e4
--- /dev/null
+++ b/client/src/app/shared/shared-main/peertube-modal/index.ts
@@ -0,0 +1 @@
+export * from './peertube-modal.service'
diff --git a/client/src/app/shared/shared-main/peertube-modal/peertube-modal.service.ts b/client/src/app/shared/shared-main/peertube-modal/peertube-modal.service.ts
new file mode 100644
index 000000000..79da08a5c
--- /dev/null
+++ b/client/src/app/shared/shared-main/peertube-modal/peertube-modal.service.ts
@@ -0,0 +1,7 @@
+import { Injectable } from '@angular/core'
+import { Subject } from 'rxjs'
+@Injectable({ providedIn: 'root' })
+export class PeertubeModalService {
+  openQuickSettingsSubject = new Subject<void>()
+}
diff --git a/client/src/app/shared/shared-main/plugins/index.ts b/client/src/app/shared/shared-main/plugins/index.ts
new file mode 100644
index 000000000..f36dab624
--- /dev/null
+++ b/client/src/app/shared/shared-main/plugins/index.ts
@@ -0,0 +1 @@
+export * from './plugin-placeholder.component'
diff --git a/client/src/app/shared/shared-main/plugins/plugin-placeholder.component.ts b/client/src/app/shared/shared-main/plugins/plugin-placeholder.component.ts
new file mode 100644
index 000000000..93ba9fb9b
--- /dev/null
+++ b/client/src/app/shared/shared-main/plugins/plugin-placeholder.component.ts
@@ -0,0 +1,15 @@
+import { Component, Input } from '@angular/core'
+import { PluginElementPlaceholder } from '@shared/models'
+@Component({
+  selector: 'my-plugin-placeholder',
+  template: '<div [id]="getId()"></div>'
+})
+export class PluginPlaceholderComponent {
+  @Input() pluginId: PluginElementPlaceholder
+  getId () {
+    return 'plugin-placeholder-' + this.pluginId
+  }
+}
diff --git a/client/src/app/shared/shared-main/shared-main.module.ts b/client/src/app/shared/shared-main/shared-main.module.ts
index 9d550996d..772198cb2 100644
--- a/client/src/app/shared/shared-main/shared-main.module.ts
+++ b/client/src/app/shared/shared-main/shared-main.module.ts
@@ -6,19 +6,20 @@ import { NgModule } from '@angular/core'
 import { FormsModule, ReactiveFormsModule } from '@angular/forms'
 import { RouterModule } from '@angular/router'
 import {
+  NgbButtonsModule,
  NgbCollapseModule,
  NgbDropdownModule,
  NgbModalModule,
  NgbNavModule,
  NgbPopoverModule,
-  NgbTooltipModule,
+  NgbTooltipModule
-  NgbButtonsModule
 } from '@ng-bootstrap/ng-bootstrap'
 import { LoadingBarModule } from '@ngx-loading-bar/core'
 import { LoadingBarHttpClientModule } from '@ngx-loading-bar/http-client'
 import { SharedGlobalIconModule } from '../shared-icons'
-import { AccountService, ActorAvatarInfoComponent, VideoAvatarChannelComponent } from './account'
+import { AccountService } from './account'
 import {
+  AutofocusDirective,
  BytesPipe,
  DurationFormatterPipe,
  FromNowPipe,
@@ -31,7 +32,8 @@ import { ActionDropdownComponent, ButtonComponent, DeleteButtonComponent, EditBu
 import { DateToggleComponent } from './date'
 import { FeedComponent } from './feeds'
 import { LoaderComponent, SmallLoaderComponent } from './loaders'
-import { HelpComponent, ListOverflowComponent, TopMenuDropdownComponent, SimpleSearchInputComponent } from './misc'
+import { HelpComponent, ListOverflowComponent, SimpleSearchInputComponent, TopMenuDropdownComponent } from './misc'
+import { PluginPlaceholderComponent } from './plugins'
 import { UserHistoryService, UserNotificationsComponent, UserNotificationService, UserQuotaComponent } from './users'
 import { RedundancyService, VideoImportService, VideoOwnershipService, VideoService } from './video'
 import { VideoCaptionService } from './video-caption'
@@ -64,13 +66,11 @@ import { VideoChannelService } from './video-channel'
  ],
  declarations: [
-    VideoAvatarChannelComponent,
-    ActorAvatarInfoComponent,
    FromNowPipe,
    NumberFormatterPipe,
    BytesPipe,
    DurationFormatterPipe,
+    AutofocusDirective,
    InfiniteScrollerDirective,
    PeerTubeTemplateDirective,
@@ -93,7 +93,9 @@ import { VideoChannelService } from './video-channel'
    SimpleSearchInputComponent,
    UserQuotaComponent,
-    UserNotificationsComponent
+    UserNotificationsComponent,
+    PluginPlaceholderComponent
  ],
  exports: [
@@ -118,13 +120,11 @@ import { VideoChannelService } from './video-channel'
    PrimeSharedModule,
-    VideoAvatarChannelComponent,
-    ActorAvatarInfoComponent,
    FromNowPipe,
    BytesPipe,
    NumberFormatterPipe,
    DurationFormatterPipe,
+    AutofocusDirective,
    InfiniteScrollerDirective,
    PeerTubeTemplateDirective,
@@ -147,7 +147,9 @@ import { VideoChannelService } from './video-channel'
    SimpleSearchInputComponent,
    UserQuotaComponent,
-    UserNotificationsComponent
+    UserNotificationsComponent,
+    PluginPlaceholderComponent
  ],
  providers: [
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 1211995fd..88a4811da 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
@@ -6,6 +6,7 @@ import {
  AbuseState,
  ActorInfo,
  FollowState,
+  PluginType,
  UserNotification as UserNotificationServer,
  UserNotificationType,
  UserRight,
@@ -74,20 +75,40 @@ export class UserNotification implements UserNotificationServer {
    }
  }
+  plugin?: {
+    name: string
+    type: PluginType
+    latestVersion: string
+  }
+  peertube?: {
+    latestVersion: string
+  }
  createdAt: string
  updatedAt: string
  // Additional fields
  videoUrl?: string
  commentUrl?: any[]
  abuseUrl?: string
  abuseQueryParams?: { [id: string]: string } = {}
  videoAutoBlacklistUrl?: string
  accountUrl?: string
  videoImportIdentifier?: string
  videoImportUrl?: string
  instanceFollowUrl?: string
+  peertubeVersionLink?: string
+  pluginUrl?: string
+  pluginQueryParams?: { [id: string]: string } = {}
  constructor (hash: UserNotificationServer, user: AuthUser) {
    this.id = hash.id
    this.type = hash.type
@@ -114,6 +135,9 @@ export class UserNotification implements UserNotificationServer {
      this.actorFollow = hash.actorFollow
      if (this.actorFollow) this.setAccountAvatarUrl(this.actorFollow.follower)
+      this.plugin = hash.plugin
+      this.peertube = hash.peertube
      this.createdAt = hash.createdAt
      this.updatedAt = hash.updatedAt
@@ -197,6 +221,15 @@ export class UserNotification implements UserNotificationServer {
        case UserNotificationType.AUTO_INSTANCE_FOLLOWING:
          this.instanceFollowUrl = '/admin/follows/following-list'
          break
+        case UserNotificationType.NEW_PEERTUBE_VERSION:
+          this.peertubeVersionLink = 'https://joinpeertube.org/news'
+          break
+        case UserNotificationType.NEW_PLUGIN_VERSION:
+          this.pluginUrl = `/admin/plugins/list-installed`
+          this.pluginQueryParams.pluginType = this.plugin.type + ''
+          break
      }
    } catch (err) {
      this.type = null
diff --git a/client/src/app/shared/shared-main/users/user-notifications.component.html b/client/src/app/shared/shared-main/users/user-notifications.component.html
index 265af8d55..325f0eaae 100644
--- a/client/src/app/shared/shared-main/users/user-notifications.component.html
+++ b/client/src/app/shared/shared-main/users/user-notifications.component.html
@@ -4,7 +4,7 @@
  <div *ngFor="let notification of notifications" class="notification" [ngClass]="{ unread: !notification.read }" (click)="markAsRead(notification)">
    <ng-container [ngSwitch]="notification.type">
-      <ng-container *ngSwitchCase="UserNotificationType.NEW_VIDEO_FROM_SUBSCRIPTION">
+      <ng-container *ngSwitchCase="1"> <!-- UserNotificationType.NEW_VIDEO_FROM_SUBSCRIPTION -->
        <ng-container *ngIf="notification.video; then hasVideo; else noVideo"></ng-container>
        <ng-template #hasVideo>
@@ -26,7 +26,7 @@
        </ng-template>
      </ng-container>
-      <ng-container *ngSwitchCase="UserNotificationType.UNBLACKLIST_ON_MY_VIDEO">
+      <ng-container *ngSwitchCase="5"> <!-- UserNotificationType.UNBLACKLIST_ON_MY_VIDEO -->
        <my-global-icon iconName="undo" aria-hidden="true"></my-global-icon>
        <div class="message" i18n>
@@ -34,7 +34,7 @@
        </div>
      </ng-container>
-      <ng-container *ngSwitchCase="UserNotificationType.BLACKLIST_ON_MY_VIDEO">
+      <ng-container *ngSwitchCase="4"> <!-- UserNotificationType.BLACKLIST_ON_MY_VIDEO -->
        <my-global-icon iconName="no" aria-hidden="true"></my-global-icon>
        <div class="message" i18n>
@@ -42,7 +42,7 @@
        </div>
      </ng-container>
-      <ng-container *ngSwitchCase="UserNotificationType.NEW_ABUSE_FOR_MODERATORS">
+      <ng-container *ngSwitchCase="3"> <!-- UserNotificationType.NEW_ABUSE_FOR_MODERATORS -->
        <my-global-icon iconName="flag" aria-hidden="true"></my-global-icon>
        <div class="message" *ngIf="notification.videoUrl" i18n>
@@ -63,7 +63,7 @@
        </div>
      </ng-container>
-      <ng-container *ngSwitchCase="UserNotificationType.ABUSE_STATE_CHANGE">
+      <ng-container *ngSwitchCase="15"> <!-- UserNotificationType.ABUSE_STATE_CHANGE -->
        <my-global-icon iconName="flag" aria-hidden="true"></my-global-icon>
        <div class="message" i18n>
@@ -73,7 +73,7 @@
        </div>
      </ng-container>
-      <ng-container *ngSwitchCase="UserNotificationType.ABUSE_NEW_MESSAGE">
+      <ng-container *ngSwitchCase="16"> <!-- UserNotificationType.ABUSE_NEW_MESSAGE -->
        <my-global-icon iconName="flag" aria-hidden="true"></my-global-icon>
        <div class="message" i18n>
@@ -81,7 +81,7 @@
        </div>
      </ng-container>
-      <ng-container *ngSwitchCase="UserNotificationType.VIDEO_AUTO_BLACKLIST_FOR_MODERATORS">
+      <ng-container *ngSwitchCase="12"> <!-- UserNotificationType.VIDEO_AUTO_BLACKLIST_FOR_MODERATORS -->
        <my-global-icon iconName="no" aria-hidden="true"></my-global-icon>
        <div class="message" i18n>
@@ -89,7 +89,7 @@
        </div>
      </ng-container>
-      <ng-container *ngSwitchCase="UserNotificationType.NEW_COMMENT_ON_MY_VIDEO">
+      <ng-container *ngSwitchCase="2">
        <ng-container *ngIf="notification.comment">
          <a (click)="markAsRead(notification)" [routerLink]="notification.accountUrl">
            <img alt="" aria-labelledby="avatar" class="avatar" [src]="notification.comment.account.avatarUrl" />
@@ -109,7 +109,7 @@
        </ng-container>
      </ng-container>
-      <ng-container *ngSwitchCase="UserNotificationType.MY_VIDEO_PUBLISHED">
+      <ng-container *ngSwitchCase="6"> <!-- UserNotificationType.MY_VIDEO_PUBLISHED -->
        <my-global-icon iconName="film" aria-hidden="true"></my-global-icon>
        <div class="message" i18n>
@@ -117,7 +117,7 @@
        </div>
      </ng-container>
-      <ng-container *ngSwitchCase="UserNotificationType.MY_VIDEO_IMPORT_SUCCESS">
+      <ng-container *ngSwitchCase="7"> <!-- UserNotificationType.MY_VIDEO_IMPORT_SUCCESS -->
        <my-global-icon iconName="cloud-download" aria-hidden="true"></my-global-icon>
        <div class="message" i18n>
@@ -125,7 +125,7 @@
        </div>
      </ng-container>
-      <ng-container *ngSwitchCase="UserNotificationType.MY_VIDEO_IMPORT_ERROR">
+      <ng-container *ngSwitchCase="8"> <!-- UserNotificationType.MY_VIDEO_IMPORT_ERROR -->
        <my-global-icon iconName="cloud-error" aria-hidden="true"></my-global-icon>
        <div class="message" i18n>
@@ -133,7 +133,7 @@
        </div>
      </ng-container>
-      <ng-container *ngSwitchCase="UserNotificationType.NEW_USER_REGISTRATION">
+      <ng-container *ngSwitchCase="9"> <!-- UserNotificationType.NEW_USER_REGISTRATION -->
        <my-global-icon iconName="user-add" aria-hidden="true"></my-global-icon>
        <div class="message" i18n>
@@ -141,7 +141,7 @@
        </div>
      </ng-container>
-      <ng-container *ngSwitchCase="UserNotificationType.NEW_FOLLOW">
+      <ng-container *ngSwitchCase="10"> <!-- UserNotificationType.NEW_FOLLOW -->
        <a (click)="markAsRead(notification)" [routerLink]="notification.accountUrl">
          <img alt="" aria-labelledby="avatar" class="avatar" [src]="notification.actorFollow.follower.avatarUrl" />
        </a>
@@ -154,7 +154,7 @@
        </div>
      </ng-container>
-      <ng-container *ngSwitchCase="UserNotificationType.COMMENT_MENTION">
+      <ng-container *ngSwitchCase="11">
        <ng-container *ngIf="notification.comment">
          <a (click)="markAsRead(notification)" [routerLink]="notification.accountUrl">
            <img alt="" aria-labelledby="avatar" class="avatar" [src]="notification.comment.account.avatarUrl" />
@@ -174,7 +174,7 @@
        </ng-container>
      </ng-container>
-      <ng-container *ngSwitchCase="UserNotificationType.NEW_INSTANCE_FOLLOWER">
+      <ng-container *ngSwitchCase="13"> <!-- UserNotificationType.NEW_INSTANCE_FOLLOWER -->
        <my-global-icon iconName="users" aria-hidden="true"></my-global-icon>
        <div class="message" i18n>
@@ -183,7 +183,7 @@
        </div>
      </ng-container>
-      <ng-container *ngSwitchCase="UserNotificationType.AUTO_INSTANCE_FOLLOWING">
+      <ng-container *ngSwitchCase="14"> <!-- UserNotificationType.AUTO_INSTANCE_FOLLOWING -->
        <my-global-icon iconName="users" aria-hidden="true"></my-global-icon>
        <div class="message" i18n>
@@ -191,6 +191,22 @@
        </div>
      </ng-container>
+      <ng-container *ngSwitchCase="17"> <!-- UserNotificationType.NEW_PLUGIN_VERSION -->
+        <my-global-icon iconName="cog" aria-hidden="true"></my-global-icon>
+        <div class="message" i18n>
+          <a (click)="markAsRead(notification)" [routerLink]="notification.pluginUrl" [queryParams]="notification.pluginQueryParams">A new version of the plugin/theme {{ notification.plugin.name }}</a> is available: {{ notification.plugin.latestVersion }}
+        </div>
+      </ng-container>
+      <ng-container *ngSwitchCase="18"> <!-- UserNotificationType.NEW_PEERTUBE_VERSION -->
+        <my-global-icon iconName="cog" aria-hidden="true"></my-global-icon>
+        <div class="message" i18n>
+            <a (click)="markAsRead(notification)" [href]="notification.peertubeVersionLink" target="_blank" rel="noopener noreferer">A new version of PeerTube</a> is available: {{ notification.peertube.latestVersion }}
+        </div>
+      </ng-container>
      <ng-container *ngSwitchDefault>
        <my-global-icon iconName="alert" aria-hidden="true"></my-global-icon>
diff --git a/client/src/app/shared/shared-main/users/user-notifications.component.ts b/client/src/app/shared/shared-main/users/user-notifications.component.ts
index 387c49d94..d7c722355 100644
--- a/client/src/app/shared/shared-main/users/user-notifications.component.ts
+++ b/client/src/app/shared/shared-main/users/user-notifications.component.ts
@@ -21,9 +21,6 @@ export class UserNotificationsComponent implements OnInit {
  notifications: UserNotification[] = []
  sortField = 'createdAt'
-  // So we can access it in the template
-  UserNotificationType = UserNotificationType
  componentPagination: ComponentPagination
  onDataSubject = new Subject<any[]>()
@@ -48,7 +45,7 @@ export class UserNotificationsComponent implements OnInit {
  }
  loadNotifications (reset?: boolean) {
-    this.userNotificationService.listMyNotifications({
+    const options = {
      pagination: this.componentPagination,
      ignoreLoadingBar: this.ignoreLoadingBar,
      sort: {
@@ -56,7 +53,9 @@ export class UserNotificationsComponent implements OnInit {
        // if we order by creation date, we want DESC. all other fields are ASC (like unread).
        order: this.sortField === 'createdAt' ? -1 : 1
      }
-    })
+    }
+    this.userNotificationService.listMyNotifications(options)
        .subscribe(
          result => {
            this.notifications = reset ? result.data : this.notifications.concat(result.data)
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 c6a63fe6c..1ba3fcc0e 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
@@ -1,15 +1,22 @@
-import { VideoChannel as ServerVideoChannel, ViewsPerDate, Account, Avatar } from '@shared/models'
+import { getAbsoluteAPIUrl } from '@app/helpers'
+import { Account as ServerAccount, ActorImage, VideoChannel as ServerVideoChannel, ViewsPerDate } from '@shared/models'
+import { Account } from '../account/account.model'
 import { Actor } from '../account/actor.model'
 export class VideoChannel extends Actor implements ServerVideoChannel {
  displayName: string
  description: string
  support: string
  isLocal: boolean
  nameWithHost: string
  nameWithHostForced: string
-  ownerAccount?: Account
+  banner: ActorImage
+  bannerUrl: string
+  ownerAccount?: ServerAccount
  ownerBy?: string
  ownerAvatarUrl?: string
@@ -21,19 +28,33 @@ export class VideoChannel extends Actor implements ServerVideoChannel {
    return Actor.GET_ACTOR_AVATAR_URL(actor) || this.GET_DEFAULT_AVATAR_URL()
  }
+  static GET_ACTOR_BANNER_URL (channel: ServerVideoChannel) {
+    if (channel?.banner?.url) return channel.banner.url
+    if (channel && channel.banner) {
+      const absoluteAPIUrl = getAbsoluteAPIUrl()
+      return absoluteAPIUrl + channel.banner.path
+    }
+    return ''
+  }
  static GET_DEFAULT_AVATAR_URL () {
    return `${window.location.origin}/client/assets/images/default-avatar-videochannel.png`
  }
-  constructor (hash: ServerVideoChannel) {
+  constructor (hash: Partial<ServerVideoChannel>) {
    super(hash)
-    this.updateComputedAttributes()
    this.displayName = hash.displayName
    this.description = hash.description
    this.support = hash.support
+    this.banner = hash.banner
    this.isLocal = hash.isLocal
    this.nameWithHost = Actor.CREATE_BY_STRING(this.name, this.host)
    this.nameWithHostForced = Actor.CREATE_BY_STRING(this.name, this.host, true)
@@ -46,22 +67,34 @@ 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 = Actor.GET_ACTOR_AVATAR_URL(this.ownerAccount)
+      this.ownerAvatarUrl = Account.GET_ACTOR_AVATAR_URL(this.ownerAccount)
    }
+    this.updateComputedAttributes()
  }
-  updateAvatar (newAvatar: Avatar) {
+  updateAvatar (newAvatar: ActorImage) {
    this.avatar = newAvatar
    this.updateComputedAttributes()
  }
  resetAvatar () {
-    this.avatar = null
+    this.updateAvatar(null)
-    this.avatarUrl = VideoChannel.GET_DEFAULT_AVATAR_URL()
+  }
+  updateBanner (newBanner: ActorImage) {
+    this.banner = newBanner
+    this.updateComputedAttributes()
+  }
+  resetBanner () {
+    this.updateBanner(null)
  }
-  private updateComputedAttributes () {
+  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-channel/video-channel.service.ts b/client/src/app/shared/shared-main/video-channel/video-channel.service.ts
index eff3fad4d..e65261763 100644
--- a/client/src/app/shared/shared-main/video-channel/video-channel.service.ts
+++ b/client/src/app/shared/shared-main/video-channel/video-channel.service.ts
@@ -3,7 +3,7 @@ import { catchError, map, tap } from 'rxjs/operators'
 import { HttpClient, HttpParams } from '@angular/common/http'
 import { Injectable } from '@angular/core'
 import { ComponentPaginationLight, RestExtractor, RestService } from '@app/core'
-import { Avatar, ResultList, VideoChannel as VideoChannelServer, VideoChannelCreate, VideoChannelUpdate } from '@shared/models'
+import { ActorImage, ResultList, VideoChannel as VideoChannelServer, VideoChannelCreate, VideoChannelUpdate } from '@shared/models'
 import { environment } from '../../../../environments/environment'
 import { Account } from '../account'
 import { AccountService } from '../account/account.service'
@@ -82,15 +82,15 @@ export class VideoChannelService {
               )
  }
-  changeVideoChannelAvatar (videoChannelName: string, avatarForm: FormData) {
+  changeVideoChannelImage (videoChannelName: string, avatarForm: FormData, type: 'avatar' | 'banner') {
-    const url = VideoChannelService.BASE_VIDEO_CHANNEL_URL + videoChannelName + '/avatar/pick'
+    const url = VideoChannelService.BASE_VIDEO_CHANNEL_URL + videoChannelName + '/' + type + '/pick'
-    return this.authHttp.post<{ avatar: Avatar }>(url, avatarForm)
+    return this.authHttp.post<{ avatar?: ActorImage, banner?: ActorImage }>(url, avatarForm)
               .pipe(catchError(err => this.restExtractor.handleError(err)))
  }
-  deleteVideoChannelAvatar (videoChannelName: string) {
+  deleteVideoChannelImage (videoChannelName: string, type: 'avatar' | 'banner') {
-    const url = VideoChannelService.BASE_VIDEO_CHANNEL_URL + videoChannelName + '/avatar'
+    const url = VideoChannelService.BASE_VIDEO_CHANNEL_URL + videoChannelName + '/' + type
    return this.authHttp.delete(url)
               .pipe(
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 adb6e884f..14c507295 100644
--- a/client/src/app/shared/shared-main/video/video.model.ts
+++ b/client/src/app/shared/shared-main/video/video.model.ts
@@ -6,7 +6,7 @@ import { Actor } from '@app/shared/shared-main/account/actor.model'
 import { VideoChannel } from '@app/shared/shared-main/video-channel/video-channel.model'
 import { peertubeTranslate } from '@shared/core-utils/i18n'
 import {
-  Avatar,
+  ActorImage,
  ServerConfig,
  UserRight,
  Video as VideoServerModel,
@@ -20,7 +20,6 @@ export class Video implements VideoServerModel {
  byVideoChannel: string
  byAccount: string
-  accountAvatarUrl: string
  videoChannelAvatarUrl: string
  createdAt: Date
@@ -72,7 +71,7 @@ export class Video implements VideoServerModel {
    displayName: string
    url: string
    host: string
-    avatar?: Avatar
+    avatar?: ActorImage
  }
  channel: {
@@ -81,7 +80,7 @@ export class Video implements VideoServerModel {
    displayName: string
    url: string
    host: string
-    avatar?: Avatar
+    avatar?: ActorImage
  }
  userHistory?: {
@@ -144,7 +143,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.accountAvatarUrl = Account.GET_ACTOR_AVATAR_URL(this.account)
    this.videoChannelAvatarUrl = VideoChannel.GET_ACTOR_AVATAR_URL(this.channel)
    this.category.label = peertubeTranslate(this.category.label, translations)
diff --git a/client/src/app/shared/shared-moderation/account-blocklist.component.html b/client/src/app/shared/shared-moderation/account-blocklist.component.html
index 7eca6411e..3f2f55559 100644
--- a/client/src/app/shared/shared-moderation/account-blocklist.component.html
+++ b/client/src/app/shared/shared-moderation/account-blocklist.component.html
@@ -24,7 +24,7 @@
  <ng-template pTemplate="header">
    <tr>
-      <th style="width: 150px;">Action</th> <!-- column for action buttons -->
+      <th style="width: 150px;" i18n>Action</th> <!-- column for action buttons -->
      <th style="width: calc(100% - 300px);" i18n>Account</th>
      <th style="width: 150px;" i18n pSortableColumn="createdAt">Muted at <p-sortIcon field="createdAt"></p-sortIcon></th>
    </tr>
@@ -38,12 +38,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">
-            <img
+            <my-account-avatar [account]="accountBlock.blockedAccount"></my-account-avatar>
-              class="avatar"
-              [src]="accountBlock.blockedAccount.avatar?.path"
-              (error)="switchToDefaultAvatar($event)"
-              alt="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.ts b/client/src/app/shared/shared-moderation/account-blocklist.component.ts
index 3de9587b8..1bce65bf0 100644
--- a/client/src/app/shared/shared-moderation/account-blocklist.component.ts
+++ b/client/src/app/shared/shared-moderation/account-blocklist.component.ts
@@ -30,10 +30,6 @@ export class GenericAccountBlocklistComponent extends RestTable implements OnIni
    this.initialize()
  }
-  switchToDefaultAvatar ($event: Event) {
-    ($event.target as HTMLImageElement).src = Account.GET_DEFAULT_AVATAR_URL()
-  }
  unblockAccount (accountBlock: AccountBlock) {
    const blockedAccount = accountBlock.blockedAccount
    const operation = this.mode === BlocklistComponentType.Account
diff --git a/client/src/app/shared/shared-moderation/batch-domains-modal.component.html b/client/src/app/shared/shared-moderation/batch-domains-modal.component.html
index 1b85c8f48..6a3c65721 100644
--- a/client/src/app/shared/shared-moderation/batch-domains-modal.component.html
+++ b/client/src/app/shared/shared-moderation/batch-domains-modal.component.html
@@ -28,14 +28,11 @@
      <div class="form-group inputs">
        <input
-          type="button" role="button" i18n-value value="Cancel" class="action-button action-button-cancel"
+          type="button" role="button" i18n-value value="Cancel" class="peertube-button grey-button"
          (click)="hide()" (key.enter)="hide()"
        >
-        <input
+        <input type="submit" [value]="action" class="peertube-button orange-button" [disabled]="!form.valid" />
-          type="submit" [value]="action" class="action-button-submit"
-          [disabled]="!form.valid"
-        >
      </div>
    </form>
  </div>
diff --git a/client/src/app/shared/shared-moderation/moderation.scss b/client/src/app/shared/shared-moderation/moderation.scss
index 4a4e05535..cdcc12fe0 100644
--- a/client/src/app/shared/shared-moderation/moderation.scss
+++ b/client/src/app/shared/shared-moderation/moderation.scss
@@ -32,7 +32,7 @@
    color: pvar(--inputPlaceholderColor);
  }
-  @include large-screen-ratio($selector: 'div, ::ng-deep iframe') {
+  @include block-ratio($selector: 'div, ::ng-deep iframe') {
    width: 100% !important;
    height: 100% !important;
    left: 0;
diff --git a/client/src/app/shared/shared-moderation/report-modals/report.component.html b/client/src/app/shared/shared-moderation/report-modals/report.component.html
index bda62312f..6c99180ef 100644
--- a/client/src/app/shared/shared-moderation/report-modals/report.component.html
+++ b/client/src/app/shared/shared-moderation/report-modals/report.component.html
@@ -51,10 +51,11 @@
    <div class="form-group inputs">
      <input
-        type="button" role="button" i18n-value value="Cancel" class="action-button action-button-cancel"
+        type="button" role="button" i18n-value value="Cancel" class="peertube-button grey-button"
        (click)="hide()" (key.enter)="hide()"
      >
-      <input type="submit" i18n-value value="Submit" class="action-button-submit" [disabled]="!form.valid">
+      <input type="submit" i18n-value value="Submit" class="peertube-button orange-button" [disabled]="!form.valid">
    </div>
    </form>
diff --git a/client/src/app/shared/shared-moderation/report-modals/report.component.scss b/client/src/app/shared/shared-moderation/report-modals/report.component.scss
index b2606cbd8..0567330f5 100644
--- a/client/src/app/shared/shared-moderation/report-modals/report.component.scss
+++ b/client/src/app/shared/shared-moderation/report-modals/report.component.scss
@@ -21,7 +21,7 @@ textarea {
 }
 .screenratio {
-  @include large-screen-ratio($selector: 'div, ::ng-deep iframe') {
+  @include block-ratio($selector: 'div, ::ng-deep iframe') {
    left: 0;
  };
 }
diff --git a/client/src/app/shared/shared-moderation/report-modals/video-report.component.html b/client/src/app/shared/shared-moderation/report-modals/video-report.component.html
index 4947088d1..1aae64bff 100644
--- a/client/src/app/shared/shared-moderation/report-modals/video-report.component.html
+++ b/client/src/app/shared/shared-moderation/report-modals/video-report.component.html
@@ -89,10 +89,11 @@
    <div class="form-group inputs">
      <input
-        type="button" role="button" i18n-value value="Cancel" class="action-button action-button-cancel"
+        type="button" role="button" i18n-value value="Cancel" class="peertube-button grey-button"
        (click)="hide()" (key.enter)="hide()"
      >
-      <input type="submit" i18n-value value="Submit" class="action-button-submit" [disabled]="!form.valid">
+      <input type="submit" i18n-value value="Submit" class="peertube-button orange-button" [disabled]="!form.valid">
    </div>
    </form>
diff --git a/client/src/app/shared/shared-moderation/report-modals/video-report.component.ts b/client/src/app/shared/shared-moderation/report-modals/video-report.component.ts
index 5b06c0bc7..4ca6f52ad 100644
--- a/client/src/app/shared/shared-moderation/report-modals/video-report.component.ts
+++ b/client/src/app/shared/shared-moderation/report-modals/video-report.component.ts
@@ -61,7 +61,8 @@ export class VideoReportComponent extends FormReactive implements OnInit {
          baseUrl: this.video.embedUrl,
          title: false,
          warningTitle: false
-        })
+        }),
+        this.video.name
      )
    )
  }
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 a6e974b36..537186f05 100644
--- a/client/src/app/shared/shared-moderation/server-blocklist.component.html
+++ b/client/src/app/shared/shared-moderation/server-blocklist.component.html
@@ -31,7 +31,7 @@
  <ng-template pTemplate="header">
    <tr>
-      <th style="width: 150px;">Action</th> <!-- column for action buttons -->
+      <th style="width: 150px;" i18n>Action</th> <!-- column for action buttons -->
      <th style="width: calc(100% - 300px);" i18n>Instance</th>
      <th style="width: 150px;" i18n pSortableColumn="createdAt">Muted at <p-sortIcon field="createdAt"></p-sortIcon></th>
    </tr>
diff --git a/client/src/app/shared/shared-moderation/shared-moderation.module.ts b/client/src/app/shared/shared-moderation/shared-moderation.module.ts
index b1b98f8d0..c7e201792 100644
--- a/client/src/app/shared/shared-moderation/shared-moderation.module.ts
+++ b/client/src/app/shared/shared-moderation/shared-moderation.module.ts
@@ -13,13 +13,15 @@ import { UserBanModalComponent } from './user-ban-modal.component'
 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'
 @NgModule({
  imports: [
    SharedMainModule,
    SharedFormModule,
    SharedGlobalIconModule,
-    SharedVideoCommentModule
+    SharedVideoCommentModule,
+    SharedAccountAvatarModule
  ],
  declarations: [
diff --git a/client/src/app/shared/shared-moderation/user-ban-modal.component.html b/client/src/app/shared/shared-moderation/user-ban-modal.component.html
index 365eb1938..7129b00ca 100644
--- a/client/src/app/shared/shared-moderation/user-ban-modal.component.html
+++ b/client/src/app/shared/shared-moderation/user-ban-modal.component.html
@@ -23,14 +23,11 @@
      <div class="form-group inputs">
        <input
-          type="button" role="button" i18n-value value="Cancel" class="action-button action-button-cancel"
+          type="button" role="button" i18n-value value="Cancel" class="peertube-button grey-button"
          (click)="hide()" (key.enter)="hide()"
        >
-        <input
+        <input type="submit" i18n-value value="Ban this user" class="peertube-button orange-button" [disabled]="!form.valid" />
-          type="submit" i18n-value value="Ban this user" class="action-button-submit"
-          [disabled]="!form.valid"
-        >
      </div>
    </form>
  </div>
diff --git a/client/src/app/shared/shared-moderation/user-moderation-dropdown.component.html b/client/src/app/shared/shared-moderation/user-moderation-dropdown.component.html
index 4d562387a..f1680e385 100644
--- a/client/src/app/shared/shared-moderation/user-moderation-dropdown.component.html
+++ b/client/src/app/shared/shared-moderation/user-moderation-dropdown.component.html
@@ -4,6 +4,6 @@
  <my-action-dropdown
    [actions]="userActions" [entry]="{ user: user, account: account }"
    [buttonSize]="buttonSize" [placement]="placement" [label]="label"
-    [container]="container"
+    [container]="container" [buttonStyled]="buttonStyled"
  ></my-action-dropdown>
 </ng-container>
diff --git a/client/src/app/shared/shared-moderation/user-moderation-dropdown.component.ts b/client/src/app/shared/shared-moderation/user-moderation-dropdown.component.ts
index f59910d1c..f510a82f9 100644
--- a/client/src/app/shared/shared-moderation/user-moderation-dropdown.component.ts
+++ b/client/src/app/shared/shared-moderation/user-moderation-dropdown.component.ts
@@ -18,6 +18,7 @@ export class UserModerationDropdownComponent implements OnInit, OnChanges {
  @Input() prependActions: DropdownAction<{ user: User, account: Account }>[]
  @Input() buttonSize: 'normal' | 'small' = 'normal'
+  @Input() buttonStyled = true
  @Input() placement = 'right-top right-bottom auto'
  @Input() label: string
  @Input() container: 'body' | undefined = undefined
diff --git a/client/src/app/shared/shared-moderation/video-block.component.html b/client/src/app/shared/shared-moderation/video-block.component.html
index e982c4d77..5e9e8493c 100644
--- a/client/src/app/shared/shared-moderation/video-block.component.html
+++ b/client/src/app/shared/shared-moderation/video-block.component.html
@@ -35,14 +35,11 @@
      <div class="form-group inputs">
        <input
-          type="button" role="button" i18n-value value="Cancel" class="action-button action-button-cancel"
+          type="button" role="button" i18n-value value="Cancel" class="peertube-button grey-button"
          (click)="hide()" (key.enter)="hide()"
        >
-        <input
+        <input type="submit" i18n-value value="Submit" class="peertube-button orange-button" [disabled]="!form.valid" />
-          type="submit" i18n-value value="Submit" class="action-button-submit"
-          [disabled]="!form.valid"
-        >
      </div>
    </form>
diff --git a/client/src/app/shared/shared-share-modal/video-share.component.ts b/client/src/app/shared/shared-share-modal/video-share.component.ts
index b06ff3751..e8760bfcc 100644
--- a/client/src/app/shared/shared-share-modal/video-share.component.ts
+++ b/client/src/app/shared/shared-share-modal/video-share.component.ts
@@ -86,14 +86,14 @@ export class VideoShareComponent {
    const options = this.getVideoOptions(this.video.embedUrl)
    const embedUrl = buildVideoLink(options)
-    return buildVideoOrPlaylistEmbed(embedUrl)
+    return buildVideoOrPlaylistEmbed(embedUrl, this.video.name)
  }
  getPlaylistIframeCode () {
    const options = this.getPlaylistOptions(this.playlist.embedUrl)
    const embedUrl = buildPlaylistLink(options)
-    return buildVideoOrPlaylistEmbed(embedUrl)
+    return buildVideoOrPlaylistEmbed(embedUrl, this.playlist.displayName)
  }
  getVideoUrl () {
diff --git a/client/src/app/shared/shared-support-modal/index.ts b/client/src/app/shared/shared-support-modal/index.ts
new file mode 100644
index 000000000..f41bb4bc2
--- /dev/null
+++ b/client/src/app/shared/shared-support-modal/index.ts
@@ -0,0 +1,3 @@
+export * from './support-modal.component'
+export * from './shared-support-modal.module'
diff --git a/client/src/app/shared/shared-support-modal/shared-support-modal.module.ts b/client/src/app/shared/shared-support-modal/shared-support-modal.module.ts
new file mode 100644
index 000000000..1101d5535
--- /dev/null
+++ b/client/src/app/shared/shared-support-modal/shared-support-modal.module.ts
@@ -0,0 +1,24 @@
+import { NgModule } from '@angular/core'
+import { SharedFormModule } from '../shared-forms'
+import { SharedGlobalIconModule } from '../shared-icons'
+import { SharedMainModule } from '../shared-main/shared-main.module'
+import { SupportModalComponent } from './support-modal.component'
+@NgModule({
+  imports: [
+    SharedMainModule,
+    SharedFormModule,
+    SharedGlobalIconModule
+  ],
+  declarations: [
+    SupportModalComponent
+  ],
+  exports: [
+    SupportModalComponent
+  ],
+  providers: [ ]
+})
+export class SharedSupportModal { }
diff --git a/client/src/app/shared/shared-support-modal/support-modal.component.html b/client/src/app/shared/shared-support-modal/support-modal.component.html
new file mode 100644
index 000000000..289adcb6a
--- /dev/null
+++ b/client/src/app/shared/shared-support-modal/support-modal.component.html
@@ -0,0 +1,15 @@
+<ng-template #modal let-hide="close">
+  <div class="modal-header">
+    <h4 i18n class="modal-title">Support {{ displayName }}</h4>
+    <my-global-icon iconName="cross" aria-label="Close" role="button" (click)="hide()"></my-global-icon>
+  </div>
+  <div class="modal-body" [innerHTML]="htmlSupport"></div>
+  <div class="modal-footer inputs">
+    <input
+      type="button" role="button" i18n-value value="Maybe later" class="peertube-button grey-button"
+      (click)="hide()" (key.enter)="hide()"
+    >
+  </div>
+</ng-template>
diff --git a/client/src/app/shared/shared-support-modal/support-modal.component.ts b/client/src/app/shared/shared-support-modal/support-modal.component.ts
new file mode 100644
index 000000000..a0b9fada6
--- /dev/null
+++ b/client/src/app/shared/shared-support-modal/support-modal.component.ts
@@ -0,0 +1,39 @@
+import { Component, Input, ViewChild } from '@angular/core'
+import { MarkdownService } from '@app/core'
+import { VideoDetails } from '@app/shared/shared-main'
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
+import { VideoChannel } from '@shared/models'
+@Component({
+  selector: 'my-support-modal',
+  templateUrl: './support-modal.component.html'
+})
+export class SupportModalComponent {
+  @Input() video: VideoDetails = null
+  @Input() videoChannel: VideoChannel = null
+  @ViewChild('modal', { static: true }) modal: NgbModal
+  htmlSupport = ''
+  displayName = ''
+  constructor (
+    private markdownService: MarkdownService,
+    private modalService: NgbModal
+  ) { }
+  show () {
+    const modalRef = this.modalService.open(this.modal, { centered: true })
+    const support = this.video?.support || this.videoChannel.support
+    this.markdownService.enhancedMarkdownToHTML(support)
+      .then(r => this.htmlSupport = r)
+    this.displayName = this.video
+      ? this.video.channel.displayName
+      : this.videoChannel.displayName
+    return modalRef
+  }
+}
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 2b723a15a..ea59ab346 100644
--- a/client/src/app/shared/shared-thumbnail/video-thumbnail.component.scss
+++ b/client/src/app/shared/shared-thumbnail/video-thumbnail.component.scss
@@ -4,82 +4,82 @@
 .video-thumbnail {
  @include miniature-thumbnail;
+}
-  .progress-bar {
+.progress-bar {
-    height: 3px;
+  height: 3px;
-    width: 100%;
+  width: 100%;
-    position: absolute;
+  position: absolute;
-    bottom: 0;
+  bottom: 0;
-    background-color: rgba(0, 0, 0, 0.20);
+  background-color: rgba(0, 0, 0, 0.20);
-    div {
+  div {
-      height: 100%;
+    height: 100%;
-      background-color: pvar(--mainColor);
+    background-color: pvar(--mainColor);
-    }
  }
+}
-  .video-thumbnail-watch-later-overlay,
+.video-thumbnail-watch-later-overlay,
-  .video-thumbnail-label-overlay,
+.video-thumbnail-label-overlay,
-  .video-thumbnail-duration-overlay,
+.video-thumbnail-duration-overlay,
-  .video-thumbnail-live-overlay {
+.video-thumbnail-live-overlay {
-    @include static-thumbnail-overlay;
+  @include static-thumbnail-overlay;
-    border-radius: 3px;
+  border-radius: 3px;
-    font-size: 12px;
+  font-size: 12px;
-    font-weight: $font-semibold;
+  font-weight: $font-semibold;
-    line-height: 1.1;
+  line-height: 1.1;
-    z-index: z(miniature);
+  z-index: z(miniature);
-  }
+}
-  .video-thumbnail-label-overlay {
+.video-thumbnail-label-overlay {
-    position: absolute;
+  position: absolute;
-    padding: 0 5px;
+  padding: 0 5px;
-    left: 5px;
+  left: 5px;
-    top: 5px;
+  top: 5px;
-    font-weight: $font-bold;
+  font-weight: $font-bold;
-    &.warning { background-color: orange; }
+  &.warning { background-color: orange; }
-    &.danger { background-color: red; }
+  &.danger { background-color: red; }
-  }
+}
-  .video-thumbnail-duration-overlay,
+.video-thumbnail-duration-overlay,
-  .video-thumbnail-live-overlay {
+.video-thumbnail-live-overlay {
-    position: absolute;
+  position: absolute;
-    padding: 0 3px;
+  padding: 0 3px;
-    right: 5px;
+  right: 5px;
-    bottom: 5px;
+  bottom: 5px;
-  }
+}
-  .video-thumbnail-live-overlay {
+.video-thumbnail-live-overlay {
-    font-weight: $font-semibold;
+  font-weight: $font-semibold;
-    color: #fff;
+  color: #fff;
-    &:not(.live-ended) {
+  &:not(.live-ended) {
-      background-color: rgba(224, 8, 8, 0.7);
+    background-color: rgba(224, 8, 8, 0.7);
-    }
  }
+}
-  .video-thumbnail-actions-overlay {
+.video-thumbnail-actions-overlay {
-    position: absolute;
+  position: absolute;
-    display: flex;
+  display: flex;
-    flex-direction: column;
+  flex-direction: column;
-    right: 5px;
+  right: 5px;
-    top: 5px;
+  top: 5px;
-    opacity: 0;
+  opacity: 0;
-    div:not(:first-child) {
+  div:not(:first-child) {
-      margin-top: 2px;
+    margin-top: 2px;
-    }
+  }
+}
-    .video-thumbnail-watch-later-overlay {
+.video-thumbnail-watch-later-overlay {
-      padding: 3px;
+  padding: 3px;
-      my-global-icon {
+  my-global-icon {
-        width: 22px;
+    width: 22px;
-        height: 22px;
+    height: 22px;
-        @include apply-svg-color(#fff);
+    @include apply-svg-color(#fff);
-      }
-    }
  }
 }
diff --git a/client/src/app/shared/shared-video-comment/video-comment.model.ts b/client/src/app/shared/shared-video-comment/video-comment.model.ts
index bf718ae08..9a4e3954e 100644
--- a/client/src/app/shared/shared-video-comment/video-comment.model.ts
+++ b/client/src/app/shared/shared-video-comment/video-comment.model.ts
@@ -17,7 +17,6 @@ export class VideoComment implements VideoCommentServerModel {
  totalRepliesFromVideoAuthor: number
  totalReplies: number
  by: string
-  accountAvatarUrl: string
  isLocal: boolean
@@ -38,7 +37,6 @@ export class VideoComment implements VideoCommentServerModel {
    if (this.account) {
      this.by = Actor.CREATE_BY_STRING(this.account.name, this.account.host)
-      this.accountAvatarUrl = Account.GET_ACTOR_AVATAR_URL(this.account)
      const absoluteAPIUrl = getAbsoluteAPIUrl()
      const thisHost = new URL(absoluteAPIUrl).host
@@ -70,7 +68,6 @@ export class VideoCommentAdmin implements VideoCommentAdminServerModel {
  }
  by: string
-  accountAvatarUrl: string
  constructor (hash: VideoCommentAdminServerModel, textHtml: string) {
    this.id = hash.id
@@ -97,7 +94,6 @@ export class VideoCommentAdmin implements VideoCommentAdminServerModel {
    if (this.account) {
      this.by = Actor.CREATE_BY_STRING(this.account.name, this.account.host)
-      this.accountAvatarUrl = Account.GET_ACTOR_AVATAR_URL(this.account)
      this.account.localUrl = '/accounts/' + this.by
    }
diff --git a/client/src/app/shared/shared-video-live/live-stream-information.component.html b/client/src/app/shared/shared-video-live/live-stream-information.component.html
index 57920239d..d6ee67ba9 100644
--- a/client/src/app/shared/shared-video-live/live-stream-information.component.html
+++ b/client/src/app/shared/shared-video-live/live-stream-information.component.html
@@ -30,10 +30,7 @@
  <div class="modal-footer">
    <div class="form-group inputs">
-      <input
+      <input type="button" role="button" i18n-value value="Close" class="peertube-button grey-button" (click)="dismiss()" />
-        type="button" role="button" i18n-value value="Close" class="action-button action-button-cancel"
-        (click)="dismiss()"
-      >
      <my-edit-button
        i18n-label label="Update live settings"
diff --git a/client/src/app/shared/shared-video-miniature/abstract-video-list.html b/client/src/app/shared/shared-video-miniature/abstract-video-list.html
index 07f79cd6d..9ffeac5e8 100644
--- a/client/src/app/shared/shared-video-miniature/abstract-video-list.html
+++ b/client/src/app/shared/shared-video-miniature/abstract-video-list.html
@@ -4,6 +4,7 @@
    <div class="action-block">
      <my-feed *ngIf="syndicationItems" [syndicationItems]="syndicationItems"></my-feed>
      <ng-container *ngFor="let action of actions">
        <a *ngIf="action.routerLink" class="ml-2" [routerLink]="action.routerLink" routerLinkActive="active">
          <ng-container *ngTemplateOutlet="actionContent; context:{ $implicit: action }"></ng-container>
@@ -43,7 +44,7 @@
  <div class="no-results" i18n *ngIf="hasDoneFirstQuery && videos.length === 0">No results.</div>
  <div
    myInfiniteScroller (nearOfBottom)="onNearOfBottom()" [autoInit]="true" [dataObservable]="onDataSubject.asObservable()"
-    class="videos"
+    class="videos" [ngClass]="{ 'display-as-row': displayAsRow() }"
  >
    <ng-container *ngFor="let video of videos; trackBy: videoById;">
      <h2 class="date-title" *ngIf="getCurrentGroupedDateLabel(video)">
@@ -52,8 +53,7 @@
      <div class="video-wrapper">
        <my-video-miniature
-          [fitWidth]="true"
+          [video]="video" [user]="userMiniature" [displayAsRow]="displayAsRow()"
-          [video]="video" [user]="userMiniature" [ownerDisplayType]="ownerDisplayType"
          [displayVideoActions]="displayVideoActions" [displayOptions]="displayOptions"
          (videoBlocked)="removeVideoFromArray(video)" (videoRemoved)="removeVideoFromArray(video)"
        >
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 0a8aa8fa4..467ca1d2c 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
@@ -15,18 +15,9 @@ $iconSize: 16px;
  justify-content: space-between;
  align-items: center;
-  .action-block {
+  my-feed {
-    ::ng-deep my-feed {
+    display: inline-block;
-      my-global-icon {
+    width: calc(#{$iconSize} - 2px);
-        width: calc(#{$iconSize} - 2px);
-      }
-    }
-    a button {
-      @include peertube-button;
-      @include grey-button;
-      @include button-with-icon($iconSize, 3px, -1px);
-    }
  }
  .moderation-block {
@@ -34,21 +25,12 @@ $iconSize: 16px;
    my-global-icon {
      position: relative;
      width: $iconSize;
-      top: -2px;
    }
    margin-left: .4rem;
    display: flex;
    justify-content: flex-end;
    align-items: center;
-    .dropdown-item {
-      padding: 0;
-      ::ng-deep my-peertube-checkbox label {
-        padding: 3px 15px;
-      }
-    }
  }
 }
@@ -69,7 +51,16 @@ $iconSize: 16px;
 }
 .margin-content {
-  @include fluid-videos-miniature-layout;
+  @include grid-videos-miniature-layout;
+}
+.display-as-row.videos {
+  margin-left: pvar(--horizontalMarginContent);
+  margin-right: pvar(--horizontalMarginContent);
+  .video-wrapper {
+    margin-bottom: 15px;
+  }
 }
 @media screen and (max-width: $mobile-view) {
diff --git a/client/src/app/shared/shared-video-miniature/abstract-video-list.ts b/client/src/app/shared/shared-video-miniature/abstract-video-list.ts
index c13cb3748..f83380513 100644
--- a/client/src/app/shared/shared-video-miniature/abstract-video-list.ts
+++ b/client/src/app/shared/shared-video-miniature/abstract-video-list.ts
@@ -28,8 +28,8 @@ import { isLastMonth, isLastWeek, isThisMonth, isToday, isYesterday } from '@sha
 import { ServerConfig, UserRight, VideoFilter, VideoSortField } from '@shared/models'
 import { NSFWPolicyType } from '@shared/models/videos/nsfw-policy.type'
 import { Syndication, Video } from '../shared-main'
-import { MiniatureDisplayOptions, OwnerDisplayType } from './video-miniature.component'
 import { GenericHeaderComponent, VideoListHeaderComponent } from './video-list-header.component'
+import { MiniatureDisplayOptions } from './video-miniature.component'
 enum GroupDate {
  UNKNOWN = 0,
@@ -65,7 +65,6 @@ export abstract class AbstractVideoList implements OnInit, OnDestroy, AfterConte
  loadOnInit = true
  loadUserVideoPreferences = false
-  ownerDisplayType: OwnerDisplayType = 'account'
  displayModerationBlock = false
  titleTooltip: string
  displayVideoActions = true
@@ -320,6 +319,11 @@ export abstract class AbstractVideoList implements OnInit, OnDestroy, AfterConte
    viewContainerRef.createComponent(componentFactory, 0, injector)
  }
+  // Can be redefined by child
+  displayAsRow () {
+    return false
+  }
  // On videos hook for children that want to do something
  protected onMoreVideos () { /* empty */ }
diff --git a/client/src/app/shared/shared-video-miniature/shared-video-miniature.module.ts b/client/src/app/shared/shared-video-miniature/shared-video-miniature.module.ts
index 7a7868853..32cfdfd68 100644
--- a/client/src/app/shared/shared-video-miniature/shared-video-miniature.module.ts
+++ b/client/src/app/shared/shared-video-miniature/shared-video-miniature.module.ts
@@ -13,6 +13,7 @@ import { VideoDownloadComponent } from './video-download.component'
 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'
 @NgModule({
  imports: [
@@ -23,7 +24,8 @@ import { VideoListHeaderComponent } from './video-list-header.component'
    SharedThumbnailModule,
    SharedGlobalIconModule,
    SharedVideoLiveModule,
-    SharedVideoModule
+    SharedVideoModule,
+    SharedAccountAvatarModule
  ],
  declarations: [
diff --git a/client/src/app/shared/shared-video-miniature/video-download.component.html b/client/src/app/shared/shared-video-miniature/video-download.component.html
index 4608e93e7..4ac74c106 100644
--- a/client/src/app/shared/shared-video-miniature/video-download.component.html
+++ b/client/src/app/shared/shared-video-miniature/video-download.component.html
@@ -4,10 +4,10 @@
      <ng-container i18n>Download</ng-container>
      <div *ngIf="videoCaptions" ngbDropdown class="d-inline-block ml-1">
-        <span id="dropdownDownloadType" ngbDropdownToggle>
+        <span id="dropdown-download-type" ngbDropdownToggle>
          {{ type }}
        </span>
-        <div ngbDropdownMenu aria-labelledby="dropdownDownloadType">
+        <div ngbDropdownMenu aria-labelledby="dropdown-download-type">
          <button *ngIf="type === 'video'" (click)="switchToType('subtitles')" ngbDropdownItem i18n>subtitles</button>
          <button *ngIf="type === 'subtitles'" (click)="switchToType('video')" ngbDropdownItem i18n>video</button>
        </div>
@@ -17,96 +17,124 @@
  </div>
  <div class="modal-body">
-    <div class="form-group">
+    <div class="alert alert-warning" *ngIf="isConfidentialVideo()" i18n>
-      <div class="alert alert-warning" *ngIf="isConfidentialVideo()" i18n>
+      The following link contains a private token and should not be shared with anyone.
-        The following link contains a private token and should not be shared with anyone.
+    </div>
-      </div>
+    <ng-container *ngIf="type === 'subtitles'">
      <div class="input-group input-group-sm">
-        <div class="input-group-prepend peertube-select-container">
-          <select *ngIf="type === 'video'" [(ngModel)]="resolutionId" (ngModelChange)="onResolutionIdChange()">
-            <option *ngFor="let file of getVideoFiles()" [value]="file.resolution.id">{{ file.resolution.label }}</option>
-          </select>
-          <select *ngIf="type === 'subtitles'" [(ngModel)]="subtitleLanguageId">
-            <option *ngFor="let caption of videoCaptions" [value]="caption.language.id">{{ caption.language.label }}</option>
-          </select>
-        </div>
        <input #urlInput (click)="urlInput.select()" type="text" class="form-control input-sm readonly" readonly [value]="getLink()" />
        <div class="input-group-append" *ngIf="!isConfidentialVideo()">
          <button [cdkCopyToClipboard]="urlInput.value" (click)="activateCopiedMessage()" type="button" class="btn btn-outline-secondary">
-            <span class="glyphicon glyphicon-copy"></span>
+            <span class="glyphicon glyphicon-duplicate"></span>
          </button>
        </div>
      </div>
-    </div>
+    </ng-container>
-    <ng-container *ngIf="type === 'video' && videoFile?.metadata">
+    <ng-container *ngIf="type === 'video'">
-      <div ngbNav #nav="ngbNav" class="nav-tabs">
+      <div ngbNav #resolutionNav="ngbNav" class="nav-tabs" [activeId]="resolutionId" (activeIdChange)="onResolutionIdChange($event)">
-        <ng-container ngbNavItem>
+        <ng-container *ngFor="let file of getVideoFiles()" [ngbNavItem]="file.resolution.id">
-          <a ngbNavLink i18n>Format</a>
+          <a ngbNavLink i18n>{{ file.resolution.label }}</a>
-          <ng-template ngbNavContent>
-            <div class="file-metadata">
-              <div class="metadata-attribute metadata-attribute-tags" *ngFor="let item of videoFileMetadataFormat | keyvalue">
-                <span i18n class="metadata-attribute-label">{{ item.value.label }}</span>
-                <span class="metadata-attribute-value">{{ item.value.value }}</span>
-              </div>
-            </div>
-          </ng-template>
-        </ng-container>
-        <ng-container ngbNavItem [disabled]="videoFileMetadataVideoStream === undefined">
-          <a ngbNavLink i18n>Video stream</a>
          <ng-template ngbNavContent>
-            <div class="file-metadata">
+            <div class="nav-content">
-              <div class="metadata-attribute metadata-attribute-tags" *ngFor="let item of videoFileMetadataVideoStream | keyvalue">
+              <div class="input-group input-group-sm">
-                <span i18n class="metadata-attribute-label">{{ item.value.label }}</span>
+                <input #urlInput (click)="urlInput.select()" type="text" class="form-control input-sm readonly" readonly [value]="getLink()" />
-                <span class="metadata-attribute-value">{{ item.value.value }}</span>
+                <div class="input-group-append" *ngIf="!isConfidentialVideo()">
+                  <button [cdkCopyToClipboard]="urlInput.value" (click)="activateCopiedMessage()" type="button" class="btn btn-outline-secondary">
+                    <span class="glyphicon glyphicon-duplicate"></span>
+                  </button>
+                </div>
              </div>
            </div>
          </ng-template>
        </ng-container>
+      </div>
+      <div [ngbNavOutlet]="resolutionNav"></div>
-        <ng-container ngbNavItem [disabled]="videoFileMetadataAudioStream === undefined">
+      <div class="advanced-filters collapse-transition" [ngbCollapse]="isAdvancedCustomizationCollapsed">
-          <a ngbNavLink i18n>Audio stream</a>
+        <ng-container *ngIf="videoFile?.metadata">
-          <ng-template ngbNavContent>
+          <div ngbNav #nav="ngbNav" class="nav-tabs nav-metadata">
-            <div class="file-metadata">
+            <ng-container ngbNavItem>
-              <div class="metadata-attribute metadata-attribute-tags" *ngFor="let item of videoFileMetadataAudioStream | keyvalue">
+              <a ngbNavLink i18n>Format</a>
-                <span i18n class="metadata-attribute-label">{{ item.value.label }}</span>
+              <ng-template ngbNavContent>
-                <span class="metadata-attribute-value">{{ item.value.value }}</span>
+                <div class="file-metadata">
-              </div>
+                  <div class="metadata-attribute metadata-attribute-tags" *ngFor="let item of videoFileMetadataFormat | keyvalue">
+                    <span i18n class="metadata-attribute-label">{{ item.value.label }}</span>
+                    <span class="metadata-attribute-value">{{ item.value.value }}</span>
+                  </div>
+                </div>
+              </ng-template>
+              <ng-container ngbNavItem [disabled]="videoFileMetadataVideoStream === undefined">
+                <a ngbNavLink i18n>Video stream</a>
+                <ng-template ngbNavContent>
+                  <div class="file-metadata">
+                    <div class="metadata-attribute metadata-attribute-tags" *ngFor="let item of videoFileMetadataVideoStream | keyvalue">
+                      <span i18n class="metadata-attribute-label">{{ item.value.label }}</span>
+                      <span class="metadata-attribute-value">{{ item.value.value }}</span>
+                    </div>
+                  </div>
+                </ng-template>
+              </ng-container>
+              <ng-container ngbNavItem [disabled]="videoFileMetadataAudioStream === undefined">
+                <a ngbNavLink i18n>Audio stream</a>
+                <ng-template ngbNavContent>
+                  <div class="file-metadata">
+                    <div class="metadata-attribute metadata-attribute-tags" *ngFor="let item of videoFileMetadataAudioStream | keyvalue">
+                      <span i18n class="metadata-attribute-label">{{ item.value.label }}</span>
+                      <span class="metadata-attribute-value">{{ item.value.value }}</span>
+                    </div>
+                  </div>
+                </ng-template>
+              </ng-container>
+            </ng-container>
+          </div>
+          <div [ngbNavOutlet]="nav"></div>
+          <div class="download-type">
+            <div class="peertube-radio-container">
+              <input type="radio" name="download" id="download-direct" [(ngModel)]="downloadType" value="direct">
+              <label i18n for="download-direct">Direct download</label>
            </div>
-          </ng-template>
+            <div class="peertube-radio-container">
+              <input type="radio" name="download" id="download-torrent" [(ngModel)]="downloadType" value="torrent">
+              <label i18n for="download-torrent">Torrent (.torrent file)</label>
+            </div>
+          </div>
        </ng-container>
      </div>
-      <div [ngbNavOutlet]="nav"></div>
+      <div (click)="isAdvancedCustomizationCollapsed = !isAdvancedCustomizationCollapsed" role="button" class="advanced-filters-button"
-    </ng-container>
+      [attr.aria-expanded]="!isAdvancedCustomizationCollapsed" aria-controls="collapseBasic">
+        <ng-container *ngIf="isAdvancedCustomizationCollapsed">
+          <span class="glyphicon glyphicon-menu-down"></span>
-    <div class="download-type" *ngIf="type === 'video'">
+          <ng-container i18n>
-      <div class="peertube-radio-container">
+            Advanced
-        <input type="radio" name="download" id="download-direct" [(ngModel)]="downloadType" value="direct">
+          </ng-container>
-        <label i18n for="download-direct">Direct download</label>
+        </ng-container>
-      </div>
+        <ng-container *ngIf="!isAdvancedCustomizationCollapsed">
+          <span class="glyphicon glyphicon-menu-up"></span>
-      <div class="peertube-radio-container">
+          <ng-container i18n>
-        <input type="radio" name="download" id="download-torrent" [(ngModel)]="downloadType" value="torrent">
+            Simple
-        <label i18n for="download-torrent">Torrent (.torrent file)</label>
+          </ng-container>
+        </ng-container>
      </div>
-    </div>
+    </ng-container>
  </div>
  <div class="modal-footer inputs">
    <input
-      type="button" role="button" i18n-value value="Cancel" class="action-button action-button-cancel"
+      type="button" role="button" i18n-value value="Cancel" class="peertube-button grey-button"
      (click)="hide()" (key.enter)="hide()"
    >
-    <input
+    <input type="submit" i18n-value value="Download" class="peertube-button orange-button" (click)="download()" />
-      type="submit" i18n-value value="Download" class="action-button-submit"
-      (click)="download()"
-    >
  </div>
 </ng-template>
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 d407e9531..7f6e03c87 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
@@ -1,6 +1,28 @@
 @import 'variables';
 @import 'mixins';
+.nav-content {
+  margin-top: 30px;
+}
+.advanced-filters-button {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-top: 20px;
+  font-size: 16px;
+  font-weight: 600;
+  cursor: pointer;
+  .nav-tabs {
+    margin-top: 10x;
+  }
+  .glyphicon {
+    margin-right: 5px;
+  }
+}
 .peertube-select-container {
  @include peertube-select-container(85px);
@@ -15,12 +37,12 @@
  }
 }
-#dropdownDownloadType {
+#dropdown-download-type {
  cursor: pointer;
 }
 .download-type {
-  margin-top: 30px;
+  margin-top: 20px;
  .peertube-radio-container {
    @include peertube-radio-container;
@@ -30,6 +52,10 @@
  }
 }
+.nav-metadata {
+  margin-top: 20px;
+}
 .file-metadata {
  padding: 1rem;
 }
diff --git a/client/src/app/shared/shared-video-miniature/video-download.component.ts b/client/src/app/shared/shared-video-miniature/video-download.component.ts
index 90f4daf7c..1e3745d94 100644
--- a/client/src/app/shared/shared-video-miniature/video-download.component.ts
+++ b/client/src/app/shared/shared-video-miniature/video-download.component.ts
@@ -1,7 +1,9 @@
 import { mapValues, pick } from 'lodash-es'
+import { pipe } from 'rxjs'
+import { tap } from 'rxjs/operators'
 import { Component, ElementRef, Inject, LOCALE_ID, ViewChild } from '@angular/core'
-import { AuthService, Notifier } from '@app/core'
+import { AuthService, HooksService, Notifier } from '@app/core'
-import { NgbActiveModal, NgbModal } from '@ng-bootstrap/ng-bootstrap'
+import { NgbModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap'
 import { VideoCaption, VideoFile, VideoPrivacy } from '@shared/models'
 import { BytesPipe, NumberFormatterPipe, VideoDetails, VideoService } from '../shared-main'
@@ -16,7 +18,7 @@ type FileMetadata = { [key: string]: { label: string, value: string }}
 export class VideoDownloadComponent {
  @ViewChild('modal', { static: true }) modal: ElementRef
-  downloadType: 'direct' | 'torrent' = 'torrent'
+  downloadType: 'direct' | 'torrent' = 'direct'
  resolutionId: number | string = -1
  subtitleLanguageId: string
@@ -26,7 +28,9 @@ export class VideoDownloadComponent {
  videoFileMetadataVideoStream: FileMetadata | undefined
  videoFileMetadataAudioStream: FileMetadata | undefined
  videoCaptions: VideoCaption[]
-  activeModal: NgbActiveModal
+  activeModal: NgbModalRef
+  isAdvancedCustomizationCollapsed = true
  type: DownloadType = 'video'
@@ -38,7 +42,8 @@ export class VideoDownloadComponent {
    private notifier: Notifier,
    private modalService: NgbModal,
    private videoService: VideoService,
-    private auth: AuthService
+    private auth: AuthService,
+    private hooks: HooksService
  ) {
    this.bytesPipe = new BytesPipe()
    this.numbersPipe = new NumberFormatterPipe(this.localeId)
@@ -62,9 +67,13 @@ export class VideoDownloadComponent {
    this.activeModal = this.modalService.open(this.modal, { centered: true })
-    this.resolutionId = this.getVideoFiles()[0].resolution.id
+    this.onResolutionIdChange(this.getVideoFiles()[0].resolution.id)
-    this.onResolutionIdChange()
    if (this.videoCaptions) this.subtitleLanguageId = this.videoCaptions[0].language.id
+    this.activeModal.shown.subscribe(() => {
+      this.hooks.runAction('action:modal.video-download.shown', 'common')
+    })
  }
  onClose () {
@@ -83,11 +92,15 @@ export class VideoDownloadComponent {
      : this.getVideoFileLink()
  }
-  async onResolutionIdChange () {
+  async onResolutionIdChange (resolutionId: number) {
+    this.resolutionId = resolutionId
    this.videoFile = this.getVideoFile()
-    if (this.videoFile.metadata || !this.videoFile.metadataUrl) return
-    await this.hydrateMetadataFromMetadataUrl(this.videoFile)
+    if (!this.videoFile.metadata) {
+      if (!this.videoFile.metadataUrl) return
+      await this.hydrateMetadataFromMetadataUrl(this.videoFile)
+    }
    this.videoFileMetadataFormat = this.videoFile
      ? this.getMetadataFormat(this.videoFile.metadata.format)
@@ -101,9 +114,6 @@ export class VideoDownloadComponent {
  }
  getVideoFile () {
-    // HTML select send us a string, so convert it to a number
-    this.resolutionId = parseInt(this.resolutionId.toString(), 10)
    const file = this.getVideoFiles().find(f => f.resolution.id === this.resolutionId)
    if (!file) {
      console.error('Could not find file with resolution %d.', this.resolutionId)
@@ -201,7 +211,7 @@ export class VideoDownloadComponent {
  private hydrateMetadataFromMetadataUrl (file: VideoFile) {
    const observable = this.videoService.getVideoFileMetadata(file.metadataUrl)
-    observable.subscribe(res => file.metadata = res)
+      .pipe(tap(res => file.metadata = res))
    return observable.toPromise()
  }
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 7a6df7b64..bc19127aa 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
@@ -1,4 +1,4 @@
-<div class="video-miniature" [ngClass]="{ 'display-as-row': displayAsRow, 'fit-width': fitWidth }" (mouseenter)="loadActions()">
+<div class="video-miniature" [ngClass]="getClasses()" (mouseenter)="loadActions()">
  <my-video-thumbnail
    [video]="video" [nsfw]="isVideoBlur" [videoRouterLink]="videoRouterLink" [videoHref]="videoHref" [videoTarget]="videoTarget"
    [displayWatchLaterPlaylist]="isWatchLaterPlaylistDisplayed()" [inWatchLaterPlaylist]="inWatchLaterPlaylist" (watchLaterClick)="onWatchLaterClick($event)"
@@ -9,11 +9,16 @@
  <div class="video-bottom">
    <div class="video-miniature-information">
-      <div class="d-inline-flex video-miniature-meta">
+      <div class="d-flex video-miniature-meta">
-        <a *ngIf="displayOptions.avatar" class="avatar" [routerLink]="[ '/video-channels', video.byVideoChannel ]" [title]="channelLinkTitle">
+        <a *ngIf="displayOptions.avatar && displayOwnerVideoChannel()" class="channel-avatar" [routerLink]="[ '/video-channels', video.byVideoChannel ]" [title]="channelLinkTitle">
          <img [src]="getAvatarUrl()" alt="" />
        </a>
+        <my-account-avatar
+          *ngIf="displayOptions.avatar && displayOwnerAccount()" [title]="channelLinkTitle"
+          [account]="video.account" size="40" [internalHref]="'/video-channels/' + video.byVideoChannel"
+        ></my-account-avatar>
        <div class="w-100 d-flex flex-column">
          <a *ngIf="!videoHref" tabindex="-1" class="video-miniature-name"
            [routerLink]="videoRouterLink" [attr.title]="video.name" [ngClass]="{ 'blur-filter': isVideoBlur }"
@@ -33,7 +38,7 @@
            </span>
          </span>
-          <a tabindex="-1" *ngIf="displayOptions.by && displayOwnerAccount()" class="video-miniature-account" [routerLink]="[ '/accounts', video.byAccount ]">
+          <a tabindex="-1" *ngIf="displayOptions.by && displayOwnerAccount()" class="video-miniature-account" [routerLink]="[ '/video-channels', video.byVideoChannel ]">
            {{ video.byAccount }}
          </a>
          <a tabindex="-1" *ngIf="displayOptions.by && displayOwnerVideoChannel()" class="video-miniature-channel" [routerLink]="[ '/video-channels', video.byVideoChannel ]">
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 38cac5b6e..f6f2925f0 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
@@ -3,198 +3,202 @@
 @import '_miniature';
 $more-button-width: 40px;
-$more-margin-right: 15px;
-.video-miniature {
+.video-miniature-name {
-  display: inline-flex;
+  @include miniature-name;
-  flex-direction: column;
+}
-  padding-bottom: $video-miniature-margin-bottom;
-  vertical-align: top;
-  .video-bottom {
+.video-miniature-information {
-    display: flex;
+  width: calc(100% - #{$more-button-width});
+}
-    .video-miniature-information {
+my-account-avatar,
-      width: $video-miniature-width - $more-button-width - $more-margin-right;
+.channel-avatar {
-      line-height: normal;
+  margin: 10px 10px 0 0;
+}
-      .avatar {
+.channel-avatar img{
-        margin: 10px 10px 0 0;
+  @include channel-avatar(40px);
+}
-        img {
+.video-miniature-created-at-views {
-          @include avatar(40px);
+  font-size: 13px;
-        }
+}
-      }
-      .video-miniature-name {
+.video-miniature-account,
-        @include miniature-name;
+.video-miniature-channel {
-        width: calc(100% - #{$more-button-width});
+  @include disable-default-a-behaviour;
-      }
+  @include ellipsis;
-      .video-miniature-meta {
+  display: block;
-        width: calc(100% + #{$more-button-width});
+  font-size: 13px;
-        overflow: hidden;
+  color: pvar(--greyForegroundColor);
-      }
-      .video-miniature-created-at-views {
+  &:hover {
-        display: block;
+    color: $grey-foreground-hover-color;
-        font-size: 13px;
+  }
-      }
+}
-      .video-miniature-account,
+.video-info-privacy,
-      .video-miniature-channel {
+.video-info-blocked .blocked-label,
-        @include disable-default-a-behaviour;
+.video-info-nsfw {
-        @include ellipsis;
+  font-weight: $font-semibold;
+}
-        display: block;
+.video-info-blocked {
-        font-size: 13px;
+  color: red;
-        color: pvar(--greyForegroundColor);
-        &:hover {
+  .blocked-reason::before {
-          color: $grey-foreground-hover-color;
+    content: ' - ';
-        }
+  }
-      }
+}
-      .video-info-privacy,
+.video-info-nsfw {
-      .video-info-blocked .blocked-label,
+  color: red;
-      .video-info-nsfw {
+}
-        font-weight: $font-semibold;
-      }
-      .video-info-blocked {
+.video-actions {
-        color: red;
+  width: $more-button-width;
+  height: 30px;
-        .blocked-reason::before {
+  ::ng-deep .dropdown-root:not(.show) {
-          content: ' - ';
+    opacity: 0;
-        }
+  }
-      }
-      .video-info-nsfw {
+  ::ng-deep .playlist-dropdown.show + my-action-dropdown .dropdown-root {
-        color: red;
+    opacity: 1;
-      }
+  }
-    }
-    .video-actions {
+  ::ng-deep .more-icon {
-      margin-top: 3px;
+    opacity: .6;
-      width: $more-button-width;
-      height: 30px;
-      ::ng-deep .dropdown-root:not(.show) {
+    &:hover {
-        opacity: 0;
+      opacity: 1;
-      }
+    }
+  }
+}
-      ::ng-deep .playlist-dropdown.show + my-action-dropdown .dropdown-root {
+.video-miniature:hover {
-        opacity: 1;
+  ::ng-deep .video-thumbnail-actions-overlay,
-      }
+  .video-actions ::ng-deep .dropdown-root {
+    opacity: 1 !important;
+  }
+}
-      ::ng-deep .more-icon {
+// Grid mode
-        opacity: .6;
+// Takes all the width on mobile
+.video-miniature:not(.display-as-row) {
+  display: flex;
+  flex-direction: column;
+  padding-bottom: $video-miniature-margin-bottom;
+  width: 100%;
-        &:hover {
+  my-video-thumbnail {
-          opacity: 1;
+    @include block-ratio($selector: '::ng-deep .video-thumbnail');
-        }
+  }
-      }
-    }
-    @media screen and (max-width: $small-view) {
+  .video-bottom {
-      .video-miniature-information {
+    display: flex;
-        margin: 0 10px;
+    width: 100%;
-      }
+  }
-      .video-actions {
+  .video-miniature-name {
-        margin: 0;
+    margin-top: 10px;
-        top: -3px;
+    margin-bottom: 5px;
+  }
-        ::ng-deep .dropdown-root {
+  .video-miniature-created-at-views {
-          opacity: 1 !important;
+    display: block;
-        }
-      }
-    }
  }
-  &:hover ::ng-deep .video-thumbnail .video-thumbnail-actions-overlay,
+  .video-actions {
-  &:hover .video-bottom .video-actions ::ng-deep .dropdown-root {
+    margin-top: 3px;
-    opacity: 1;
  }
-  &.fit-width {
+  @media screen and (max-width: $small-view) {
    width: 100%;
+    margin-bottom: 25px;
+    .video-miniature-information {
+      margin: 0 10px;
+      width: 100%;
+      text-align: left;
+    }
-    .video-bottom {
+    .video-actions {
-      width: 100% !important;
+      margin: 0;
+      top: -3px;
-      .video-miniature-information {
+      ::ng-deep .dropdown-root {
-        width: calc(100% - #{$more-button-width}) !important;
+        opacity: 1 !important;
      }
    }
-    my-video-thumbnail {
+    ::ng-deep .video-thumbnail {
-      @include large-screen-ratio($selector: '::ng-deep .video-thumbnail');
+      border-radius: 0;
    }
  }
+}
+.video-miniature.display-as-row {
+  --rowThumbnailWidth: #{$video-thumbnail-width};
+  --rowThumbnailHeight: #{$video-thumbnail-height};
-  &.display-as-row {
+  display: flex;
-    flex-direction: row;
+  flex-direction: row;
-    padding-bottom: 0;
-    height: auto;
+  .video-bottom {
    display: flex;
-    flex-grow: 1;
+  }
-    my-video-thumbnail {
+  // We don't display avatar in row mode
-      margin-right: 10px;
+  .channel-avatar {
-    }
+    display: none;
+  }
-    .video-bottom {
+  my-video-thumbnail {
-      .video-miniature-information {
+    min-width: var(--rowThumbnailWidth);
-        @media screen and (min-width: $small-view) {
+    max-width: var(--rowThumbnailWidth);
-          width: auto;
+    height: var(--rowThumbnailHeight);
-          min-width: 500px;
+    margin-right: 10px;
-        }
+  }
-        .video-miniature-name {
-          @include ellipsis-multiline(1.3em, 2);
-          margin-top: 2px;
-          margin-bottom: 5px;
-        }
-        .video-miniature-created-at-views,
-        .video-miniature-account,
-        .video-miniature-channel {
-          font-size: 95%;
-          width: fit-content;
-        }
-        .video-miniature-created-at-views + .video-miniature-channel {
-          margin-top: 5px;
-        }
-        .video-info-privacy {
-          margin-top: 5px;
-        }
-        .video-info-blocked {
-          margin-top: 3px;
-        }
-      }
-      .video-actions {
+  .video-miniature-name {
-        margin: 0;
+    @include ellipsis-multiline($video-miniature-row-name-font-size, 2);
-        top: -3px;
+  }
-      }
-    }
-    @media screen and (max-width: $small-view) {
+  .video-miniature-created-at-views,
-      flex-direction: column;
+  .video-miniature-account,
-      height: auto;
+  .video-miniature-channel {
+    font-size: $video-miniature-row-info-font-size;
+  }
-      my-video-thumbnail {
+  .video-actions {
-        margin-right: 0;
+    margin-top: -3px;
-      }
+  }
+}
-      .video-miniature-information {
+@include on-small-main-col {
-        min-width: initial;
+  .video-miniature.display-as-row {
-      }
+    --rowThumbnailWidth: #{$video-thumbnail-medium-width};
+    --rowThumbnailHeight: #{$video-thumbnail-medium-height};
+  }
+}
+@include on-mobile-main-col {
+  .video-miniature.display-as-row {
+    --rowThumbnailWidth: #{$video-thumbnail-small-width};
+    --rowThumbnailHeight: #{$video-thumbnail-small-height};
+    .video-miniature-name {
+      font-size: $video-miniature-row-info-font-size;
+    }
+    .video-miniature-created-at-views,
+    .video-miniature-account,
+    .video-miniature-channel {
+      font-size: $video-miniature-row-mobile-info-font-size;
    }
  }
 }
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 cc5665ab1..8d66aaee2 100644
--- a/client/src/app/shared/shared-video-miniature/video-miniature.component.ts
+++ b/client/src/app/shared/shared-video-miniature/video-miniature.component.ts
@@ -16,7 +16,6 @@ import { Video } from '../shared-main'
 import { VideoPlaylistService } from '../shared-video-playlist'
 import { VideoActionsDisplayType } from './video-actions-dropdown.component'
-export type OwnerDisplayType = 'account' | 'videoChannel' | 'auto'
 export type MiniatureDisplayOptions = {
  date?: boolean
  views?: boolean
@@ -40,7 +39,6 @@ export class VideoMiniatureComponent implements OnInit {
  @Input() user: User
  @Input() video: Video
-  @Input() ownerDisplayType: OwnerDisplayType = 'account'
  @Input() displayOptions: MiniatureDisplayOptions = {
    date: true,
    views: true,
@@ -51,9 +49,9 @@ export class VideoMiniatureComponent implements OnInit {
    state: false,
    blacklistInfo: false
  }
-  @Input() displayAsRow = false
  @Input() displayVideoActions = true
-  @Input() fitWidth = false
+  @Input() displayAsRow = false
  @Input() videoLinkType: VideoLinkType = 'internal'
@@ -89,7 +87,7 @@ export class VideoMiniatureComponent implements OnInit {
  videoHref: string
  videoTarget: string
-  private ownerDisplayTypeChosen: 'account' | 'videoChannel'
+  private ownerDisplayType: 'account' | 'videoChannel'
  constructor (
    private screenService: ScreenService,
@@ -140,11 +138,11 @@ export class VideoMiniatureComponent implements OnInit {
  }
  displayOwnerAccount () {
-    return this.ownerDisplayTypeChosen === 'account'
+    return this.ownerDisplayType === 'account'
  }
  displayOwnerVideoChannel () {
-    return this.ownerDisplayTypeChosen === 'videoChannel'
+    return this.ownerDisplayType === 'videoChannel'
  }
  isUnlistedVideo () {
@@ -183,8 +181,8 @@ export class VideoMiniatureComponent implements OnInit {
  }
  getAvatarUrl () {
-    if (this.ownerDisplayTypeChosen === 'account') {
+    if (this.displayOwnerAccount()) {
-      return this.video.accountAvatarUrl
+      return this.video.account.avatar?.url
    }
    return this.video.videoChannelAvatarUrl
@@ -244,21 +242,26 @@ export class VideoMiniatureComponent implements OnInit {
    return this.displayVideoActions && this.isUserLoggedIn() && this.inWatchLaterPlaylist !== undefined
  }
-  private setUpBy () {
+  getClasses () {
-    if (this.ownerDisplayType === 'account' || this.ownerDisplayType === 'videoChannel') {
+    return {
-      this.ownerDisplayTypeChosen = this.ownerDisplayType
+      'display-as-row': this.displayAsRow
-      return
    }
+  }
+  private setUpBy () {
+    const accountName = this.video.account.name
-    // If the video channel name an UUID (not really displayable, we changed this behaviour in v1.0.0-beta.12)
+    // If the video channel name is an UUID (not really displayable, we changed this behaviour in v1.0.0-beta.12)
+    // Or has not been customized (default created channel display name)
    // -> Use the account name
    if (
-      this.video.channel.name === `${this.video.account.name}_channel` ||
+      this.video.channel.displayName === `Default ${accountName} channel` ||
+      this.video.channel.displayName === `Main ${accountName} channel` ||
      this.video.channel.name.match(/^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/)
    ) {
-      this.ownerDisplayTypeChosen = 'account'
+      this.ownerDisplayType = 'account'
    } else {
-      this.ownerDisplayTypeChosen = 'videoChannel'
+      this.ownerDisplayType = 'videoChannel'
    }
  }
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 8caeaf092..dec9e99f3 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
@@ -9,8 +9,7 @@
    <my-video-miniature
      [video]="video" [displayAsRow]="true" [displayOptions]="miniatureDisplayOptions"
-      [displayVideoActions]="false" [ownerDisplayType]="ownerDisplayType"
+      [displayVideoActions]="false" [user]="user"
-      [user]="user"
    ></my-video-miniature>
    <!-- Display only once -->
diff --git a/client/src/app/shared/shared-video-miniature/videos-selection.component.scss b/client/src/app/shared/shared-video-miniature/videos-selection.component.scss
index c33e11889..a2939d521 100644
--- a/client/src/app/shared/shared-video-miniature/videos-selection.component.scss
+++ b/client/src/app/shared/shared-video-miniature/videos-selection.component.scss
@@ -5,24 +5,24 @@
  display: flex;
  justify-content: flex-end;
  flex-grow: 1;
+}
-  .action-selection-mode-child {
+.action-selection-mode-child {
-    position: fixed;
+  position: fixed;
-    .action-button {
-      display: block;
-      margin-left: 55px;
-    }
-    .action-button-cancel-selection {
+  .action-button {
-      @include peertube-button;
+    display: block;
-      @include grey-button;
+    margin-left: 55px;
-    }
  }
 }
+.action-button-cancel-selection {
+  @include peertube-button;
+  @include grey-button;
+}
 .video {
-  @include row-blocks;
+  @include row-blocks($column-responsive: false);
  &:first-child {
    margin-top: 47px;
@@ -40,18 +40,16 @@
  }
 }
-@media screen and (max-width: $small-view) {
-  .video {
-    flex-direction: column;
-    height: auto;
-    .checkbox-container {
+@include on-small-main-col {
-      display: none;
+  .video {
-    }
+    flex-wrap: wrap;
+  }
+}
-    my-button {
+@include on-mobile-main-col {
-      margin-top: 10px;
+  .checkbox-container {
-    }
+    display: none;
  }
  .action-selection-mode {
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 ca1cf2264..f8c3800d7 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
@@ -17,7 +17,7 @@ import { AuthService, ComponentPagination, LocalStorageService, Notifier, Screen
 import { ResultList, VideoSortField } from '@shared/models'
 import { PeerTubeTemplateDirective, Video } from '../shared-main'
 import { AbstractVideoList } from './abstract-video-list'
-import { MiniatureDisplayOptions, OwnerDisplayType } from './video-miniature.component'
+import { MiniatureDisplayOptions } from './video-miniature.component'
 export type SelectionType = { [ id: number ]: boolean }
@@ -31,7 +31,6 @@ export class VideosSelectionComponent extends AbstractVideoList implements OnIni
  @Input() pagination: ComponentPagination
  @Input() titlePage: string
  @Input() miniatureDisplayOptions: MiniatureDisplayOptions
-  @Input() ownerDisplayType: OwnerDisplayType
  @Input() getVideosObservableFunction: (page: number, sort?: VideoSortField) => Observable<ResultList<Video>>
diff --git a/client/src/app/shared/shared-video-playlist/video-playlist-miniature.component.html b/client/src/app/shared/shared-video-playlist/video-playlist-miniature.component.html
index 86f6664cb..f50f95003 100644
--- a/client/src/app/shared/shared-video-playlist/video-playlist-miniature.component.html
+++ b/client/src/app/shared/shared-video-playlist/video-playlist-miniature.component.html
@@ -1,4 +1,4 @@
-<div class="miniature" [ngClass]="{ 'no-videos': playlist.videosLength === 0, 'to-manage': toManage }">
+<div class="miniature" [ngClass]="{ 'no-videos': playlist.videosLength === 0, 'to-manage': toManage, 'display-as-row': displayAsRow }">
  <a
    [routerLink]="getPlaylistUrl()" [attr.title]="playlist.description"
    class="miniature-thumbnail"
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 1b16dbb01..c5be5f292 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
@@ -4,6 +4,7 @@
 .miniature {
  display: inline-block;
+  width: 100%;
  &.no-videos:not(.to-manage){
    a {
@@ -17,62 +18,92 @@
      display: none;
    }
  }
+}
-  .miniature-thumbnail {
+.miniature-thumbnail {
-    @include miniature-thumbnail;
+  @include miniature-thumbnail;
-    .miniature-playlist-info-overlay {
+  .miniature-playlist-info-overlay {
-      @include static-thumbnail-overlay;
+    @include static-thumbnail-overlay;
-      position: absolute;
+    position: absolute;
-      right: 0;
+    right: 0;
-      bottom: 0;
+    bottom: 0;
-      height: $video-thumbnail-height;
+    height: 100%;
-      padding: 0 10px;
+    padding: 0 10px;
-      display: flex;
+    display: flex;
-      align-items: center;
+    align-items: center;
-      font-size: 14px;
+    font-size: 14px;
-      font-weight: $font-semibold;
+    font-weight: $font-semibold;
-    }
  }
+}
-  .miniature-info {
+.miniature-info {
-    width: 200px;
-    margin-top: 2px;
-    line-height: normal;
-    .miniature-name {
-      @include miniature-name;
-      @include ellipsis-multiline(1.3em, 2);
+  .miniature-name {
+    @include miniature-name;
+    @include ellipsis-multiline(1.3em, 2);
-      margin: 0;
+    margin: 0;
-    }
+  }
-    .by {
+  .by {
-      @include disable-default-a-behaviour;
+    @include disable-default-a-behaviour;
-      display: block;
+    display: block;
-      color: pvar(--greyForegroundColor);
+    color: pvar(--greyForegroundColor);
-    }
+  }
-    .privacy-date {
+  .privacy-date {
-      margin-top: 5px;
+    margin-top: 5px;
-      .video-info-privacy {
+    .video-info-privacy {
-        font-size: 14px;
+      font-size: 14px;
-        font-weight: $font-semibold;
+      font-weight: $font-semibold;
-        &::after {
+      &::after {
-          content: '-';
+        content: '-';
-          margin: 0 3px;
+        margin: 0 3px;
-        }
      }
    }
+  }
-    .video-info-description {
+  .video-info-description {
-      margin-top: 10px;
+    margin-top: 10px;
-      color: pvar(--greyForegroundColor);
+    color: pvar(--greyForegroundColor);
-    }
+  }
+}
+.miniature:not(.display-as-row) {
+  .miniature-thumbnail {
+    margin-top: 10px;
+    margin-bottom: 5px;
+  }
+}
+.miniature.display-as-row {
+  --rowThumbnailWidth: #{$video-thumbnail-width};
+  --rowThumbnailHeight: #{$video-thumbnail-height};
+  display: flex;
+  .miniature-thumbnail {
+    width: var(--rowThumbnailWidth);
+    height: var(--rowThumbnailHeight);
+    margin-right: 10px;
+  }
+}
+@include on-small-main-col {
+  .miniature.display-as-row {
+    --rowThumbnailWidth: #{$video-thumbnail-medium-width};
+    --rowThumbnailHeight: #{$video-thumbnail-medium-height};
+  }
+}
+@include on-mobile-main-col {
+  .miniature.display-as-row {
+    --rowThumbnailWidth: #{$video-thumbnail-small-width};
+    --rowThumbnailHeight: #{$video-thumbnail-small-height};
  }
 }
diff --git a/client/src/app/shared/shared-video-playlist/video-playlist-miniature.component.ts b/client/src/app/shared/shared-video-playlist/video-playlist-miniature.component.ts
index 251aa868a..6b0b1056f 100644
--- a/client/src/app/shared/shared-video-playlist/video-playlist-miniature.component.ts
+++ b/client/src/app/shared/shared-video-playlist/video-playlist-miniature.component.ts
@@ -12,6 +12,7 @@ export class VideoPlaylistMiniatureComponent {
  @Input() displayChannel = false
  @Input() displayDescription = false
  @Input() displayPrivacy = false
+  @Input() displayAsRow = false
  getPlaylistUrl () {
    if (this.toManage) return [ '/my-library/video-playlists', this.playlist.uuid ]