115 files changed, 1141 insertions, 335 deletions
diff --git a/client/src/app/+accounts/account-video-channels/account-video-channels.component.html b/client/src/app/+accounts/account-video-channels/account-video-channels.component.html
index 105bc12c3..379c0443e 100644
--- a/client/src/app/+accounts/account-video-channels/account-video-channels.component.html
+++ b/client/src/app/+accounts/account-video-channels/account-video-channels.component.html
@@ -9,8 +9,11 @@
      <div class="channel-avatar-row">
        <my-actor-avatar
-          [channel]="videoChannel" [internalHref]="getVideoChannelLink(videoChannel)"
+          [channel]="videoChannel"
-          i18n-title title="See this video channel"
+          [internalHref]="getVideoChannelLink(videoChannel)"
+          i18n-title
+          title="See this video channel"
+          size="75"
        ></my-actor-avatar>
        <h2>
diff --git a/client/src/app/+accounts/account-video-channels/account-video-channels.component.scss b/client/src/app/+accounts/account-video-channels/account-video-channels.component.scss
index be9e94f69..30b8098be 100644
--- a/client/src/app/+accounts/account-video-channels/account-video-channels.component.scss
+++ b/client/src/app/+accounts/account-video-channels/account-video-channels.component.scss
@@ -29,7 +29,6 @@
  grid-template-rows: auto 1fr;
  my-actor-avatar {
-    @include actor-avatar-size(75px);
    @include margin-right(15px);
    grid-column: 1;
diff --git a/client/src/app/+accounts/accounts.component.html b/client/src/app/+accounts/accounts.component.html
index 8362e6b7e..1544ad034 100644
--- a/client/src/app/+accounts/accounts.component.html
+++ b/client/src/app/+accounts/accounts.component.html
@@ -2,7 +2,7 @@
  <div class="account-info">
    <div class="account-avatar-row">
-      <my-actor-avatar class="main-avatar" [account]="account"></my-actor-avatar>
+      <my-actor-avatar class="main-avatar" [account]="account" size="120"></my-actor-avatar>
      <div>
        <div class="section-label" i18n>ACCOUNT</div>
diff --git a/client/src/app/+admin/admin.component.ts b/client/src/app/+admin/admin.component.ts
index b8a957d1c..746549555 100644
--- a/client/src/app/+admin/admin.component.ts
+++ b/client/src/app/+admin/admin.component.ts
@@ -52,6 +52,14 @@ export class AdminComponent implements OnInit {
      })
    }
+    if (this.hasVideoCommentsRight()) {
+      overviewItems.children.push({
+        label: $localize`Comments`,
+        routerLink: '/admin/comments',
+        iconName: 'message-circle'
+      })
+    }
    if (overviewItems.children.length !== 0) {
      this.menuEntries.push(overviewItems)
    }
@@ -104,14 +112,6 @@ export class AdminComponent implements OnInit {
      })
    }
-    if (this.hasVideoCommentsRight()) {
-      moderationItems.children.push({
-        label: $localize`Video comments`,
-        routerLink: '/admin/moderation/video-comments/list',
-        iconName: 'message-circle'
-      })
-    }
    if (this.hasAccountsBlocklistRight()) {
      moderationItems.children.push({
        label: $localize`Muted accounts`,
diff --git a/client/src/app/+admin/admin.module.ts b/client/src/app/+admin/admin.module.ts
index c672fa280..366e29883 100644
--- a/client/src/app/+admin/admin.module.ts
+++ b/client/src/app/+admin/admin.module.ts
@@ -32,13 +32,13 @@ import { RedundancyCheckboxComponent } from './follows/shared/redundancy-checkbo
 import { VideoRedundancyInformationComponent } from './follows/video-redundancies-list/video-redundancy-information.component'
 import { AbuseListComponent, VideoBlockListComponent } from './moderation'
 import { InstanceAccountBlocklistComponent, InstanceServerBlocklistComponent } from './moderation/instance-blocklist'
-import { VideoCommentListComponent } from './moderation/video-comment-list'
 import {
  UserCreateComponent,
  UserListComponent,
  UserPasswordComponent,
  UserUpdateComponent,
  VideoAdminService,
+  VideoCommentListComponent,
  VideoListComponent
 } from './overview'
 import {
diff --git a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.ts b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.ts
index f2eaa3033..e3b6f8305 100644
--- a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.ts
+++ b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.ts
@@ -197,6 +197,9 @@ export class EditCustomConfigComponent extends FormReactive implements OnInit {
          resolutions: {}
        }
      },
+      videoEditor: {
+        enabled: null
+      },
      autoBlacklist: {
        videos: {
          ofUsers: {
diff --git a/client/src/app/+admin/config/edit-custom-config/edit-vod-transcoding.component.html b/client/src/app/+admin/config/edit-custom-config/edit-vod-transcoding.component.html
index 1158f027b..2be855756 100644
--- a/client/src/app/+admin/config/edit-custom-config/edit-vod-transcoding.component.html
+++ b/client/src/app/+admin/config/edit-custom-config/edit-vod-transcoding.component.html
@@ -192,4 +192,29 @@
    </div>
  </div>
+  <div class="form-row mt-2"> <!-- video editor grid -->
+    <div class="form-group col-12 col-lg-4 col-xl-3">
+      <div i18n class="inner-form-title">VIDEO EDITOR</div>
+      <div i18n class="inner-form-description">
+        Allows your users to edit their video (cut, add intro/outro, add a watermark etc)
+      </div>
+    </div>
+    <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
+      <ng-container formGroupName="videoEditor">
+        <div class="form-group" [ngClass]="getTranscodingDisabledClass()">
+          <my-peertube-checkbox
+            inputName="videoEditorEnabled" formControlName="enabled"
+            i18n-labelText labelText="Enable video editor"
+          >
+            <ng-container ngProjectAs="description" *ngIf="!isTranscodingEnabled()">
+              <span i18n>⚠️ You need to enable transcoding first to enable video editor</span>
+            </ng-container>
+          </my-peertube-checkbox>
+        </div>
+      </ng-container>
+    </div>
+  </div>
 </ng-container>
diff --git a/client/src/app/+admin/config/edit-custom-config/edit-vod-transcoding.component.ts b/client/src/app/+admin/config/edit-custom-config/edit-vod-transcoding.component.ts
index 3397c3dbd..948c10b69 100644
--- a/client/src/app/+admin/config/edit-custom-config/edit-vod-transcoding.component.ts
+++ b/client/src/app/+admin/config/edit-custom-config/edit-vod-transcoding.component.ts
@@ -71,6 +71,8 @@ export class EditVODTranscodingComponent implements OnInit, OnChanges {
  }
  private checkTranscodingFields () {
+    const transcodingControl = this.form.get('transcoding.enabled')
+    const videoEditorControl = this.form.get('videoEditor.enabled')
    const hlsControl = this.form.get('transcoding.hls.enabled')
    const webtorrentControl = this.form.get('transcoding.webtorrent.enabled')
@@ -95,5 +97,12 @@ export class EditVODTranscodingComponent implements OnInit, OnChanges {
                  webtorrentControl.enable()
                }
              })
+    transcodingControl.valueChanges
+              .subscribe(newValue => {
+                if (newValue === false) {
+                  videoEditorControl.setValue(false)
+                }
+              })
  }
 }
diff --git a/client/src/app/+admin/moderation/instance-blocklist/instance-account-blocklist.component.html b/client/src/app/+admin/moderation/instance-blocklist/instance-account-blocklist.component.html
deleted file mode 100644
index feade0c26..000000000
--- a/client/src/app/+admin/moderation/instance-blocklist/instance-account-blocklist.component.html
+++ /dev/null
@@ -1,56 +0,0 @@
-<p-table
-  [value]="blockedAccounts" [paginator]="totalRecords > 0" [totalRecords]="totalRecords" [rows]="rowsPerPage" [rowsPerPageOptions]="rowsPerPageOptions"
-  [sortField]="sort.field" [sortOrder]="sort.order"
-  [lazy]="true" (onLazyLoad)="loadLazy($event)" [lazyLoadOnInit]="false"
-  [showCurrentPageReport]="true" i18n-currentPageReportTemplate
-  currentPageReportTemplate="Showing {{'{first}'}} to {{'{last}'}} of {{'{totalRecords}'}} muted accounts"
->
-  <ng-template pTemplate="caption">
-    <div class="caption">
-      <div class="ml-auto">
-        <my-advanced-input-filter (search)="onSearch($event)"></my-advanced-input-filter>
-      </div>
-    </div>
-  </ng-template>
-  <ng-template pTemplate="header">
-    <tr>
-      <th style="width: 150px;">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>
-  </ng-template>
-  <ng-template pTemplate="body" let-accountBlock>
-    <tr>
-      <td class="action-cell">
-        <button class="unblock-button" (click)="unblockAccount(accountBlock)" i18n>Unmute</button>
-      </td>
-      <td>
-        <a [href]="accountBlock.blockedAccount.url" i18n-title title="Open account in a new tab" target="_blank" rel="noopener noreferrer">
-          <div class="chip two-lines">
-            <my-actor-avatar [account]="accountBlock.blockedAccount"></my-actor-avatar>
-            <div>
-              {{ accountBlock.blockedAccount.displayName }}
-              <span class="text-muted">{{ accountBlock.blockedAccount.nameWithHost }}</span>
-            </div>
-          </div>
-        </a>
-      </td>
-      <td>{{ accountBlock.createdAt | date: 'short' }}</td>
-    </tr>
-  </ng-template>
-  <ng-template pTemplate="emptymessage">
-    <tr>
-      <td colspan="6">
-        <div class="no-results">
-          <ng-container *ngIf="search" i18n>No account found matching current filters.</ng-container>
-          <ng-container *ngIf="!search" i18n>No account found.</ng-container>
-        </div>
-      </td>
-    </tr>
-  </ng-template>
-</p-table>
diff --git a/client/src/app/+admin/moderation/moderation.routes.ts b/client/src/app/+admin/moderation/moderation.routes.ts
index 5c39ff366..1ad301039 100644
--- a/client/src/app/+admin/moderation/moderation.routes.ts
+++ b/client/src/app/+admin/moderation/moderation.routes.ts
@@ -2,7 +2,6 @@ import { Routes } from '@angular/router'
 import { AbuseListComponent } from '@app/+admin/moderation/abuse-list'
 import { InstanceAccountBlocklistComponent, InstanceServerBlocklistComponent } from '@app/+admin/moderation/instance-blocklist'
 import { VideoBlockListComponent } from '@app/+admin/moderation/video-block-list'
-import { VideoCommentListComponent } from './video-comment-list'
 import { UserRightGuard } from '@app/core'
 import { UserRight } from '@shared/models'
@@ -69,6 +68,7 @@ export const ModerationRoutes: Routes = [
        }
      },
+      // We move this component in admin overview pages
      {
        path: 'video-comments',
        redirectTo: 'video-comments/list',
@@ -76,14 +76,8 @@ export const ModerationRoutes: Routes = [
      },
      {
        path: 'video-comments/list',
-        component: VideoCommentListComponent,
+        redirectTo: '/admin/comments/list',
-        canActivate: [ UserRightGuard ],
+        pathMatch: 'full'
-        data: {
-          userRight: UserRight.SEE_ALL_COMMENTS,
-          meta: {
-            title: $localize`Video comments`
-          }
-        }
      },
      {
diff --git a/client/src/app/+admin/moderation/video-comment-list/index.ts b/client/src/app/+admin/overview/comments/index.ts
index eb08b4177..c487f7a81 100644
--- a/client/src/app/+admin/moderation/video-comment-list/index.ts
+++ b/client/src/app/+admin/overview/comments/index.ts
@@ -1 +1,2 @@
 export * from './video-comment-list.component'
+export * from './video-comment.routes'
diff --git a/client/src/app/+admin/moderation/video-comment-list/video-comment-list.component.html b/client/src/app/+admin/overview/comments/video-comment-list.component.html
index 9bf23c21a..27a5d82ff 100644
--- a/client/src/app/+admin/moderation/video-comment-list/video-comment-list.component.html
+++ b/client/src/app/+admin/overview/comments/video-comment-list.component.html
@@ -25,8 +25,10 @@
        </my-action-dropdown>
      </div>
-      <div class="ml-auto">
+      <div class="ml-auto right-form">
        <my-advanced-input-filter [filters]="inputFilters" (search)="onSearch($event)"></my-advanced-input-filter>
+        <my-button i18n-label label="Refresh" icon="refresh" (click)="reloadData()"></my-button>
      </div>
    </div>
  </ng-template>
@@ -66,7 +68,7 @@
      <td>
        <a [href]="videoComment.account.localUrl" i18n-title title="Open account in a new tab" target="_blank" rel="noopener noreferrer">
          <div class="chip two-lines">
-            <my-actor-avatar [account]="videoComment.account"></my-actor-avatar>
+            <my-actor-avatar [account]="videoComment.account" size="32"></my-actor-avatar>
          <div>
              {{ videoComment.account.displayName }}
              <span>{{ videoComment.by }}</span>
diff --git a/client/src/app/+admin/moderation/video-comment-list/video-comment-list.component.scss b/client/src/app/+admin/overview/comments/video-comment-list.component.scss
index 3cf7b8db6..d7eb02142 100644
--- a/client/src/app/+admin/moderation/video-comment-list/video-comment-list.component.scss
+++ b/client/src/app/+admin/overview/comments/video-comment-list.component.scss
@@ -45,6 +45,14 @@ my-global-icon {
  }
 }
+.right-form {
+  display: flex;
+  > *:not(:last-child) {
+    @include margin-right(10px);
+  }
+}
 @media screen and (max-width: $primeng-breakpoint) {
  .video {
    align-items: flex-start !important;
diff --git a/client/src/app/+admin/moderation/video-comment-list/video-comment-list.component.ts b/client/src/app/+admin/overview/comments/video-comment-list.component.ts
index 25fe65133..f3f43a900 100644
--- a/client/src/app/+admin/moderation/video-comment-list/video-comment-list.component.ts
+++ b/client/src/app/+admin/overview/comments/video-comment-list.component.ts
@@ -117,7 +117,7 @@ export class VideoCommentListComponent extends RestTable implements OnInit {
    return this.selectedComments.length !== 0
  }
-  protected reloadData () {
+  reloadData () {
    this.videoCommentService.getAdminVideoComments({
      pagination: this.pagination,
      sort: this.sort,
diff --git a/client/src/app/+admin/overview/comments/video-comment.routes.ts b/client/src/app/+admin/overview/comments/video-comment.routes.ts
new file mode 100644
index 000000000..f0bd440ad
--- /dev/null
+++ b/client/src/app/+admin/overview/comments/video-comment.routes.ts
@@ -0,0 +1,30 @@
+import { Routes } from '@angular/router'
+import { UserRightGuard } from '@app/core'
+import { UserRight } from '@shared/models'
+import { VideoCommentListComponent } from './video-comment-list.component'
+export const commentRoutes: Routes = [
+  {
+    path: 'comments',
+    canActivate: [ UserRightGuard ],
+    data: {
+      userRight: UserRight.SEE_ALL_COMMENTS
+    },
+    children: [
+      {
+        path: '',
+        redirectTo: 'list',
+        pathMatch: 'full'
+      },
+      {
+        path: 'list',
+        component: VideoCommentListComponent,
+        data: {
+          meta: {
+            title: $localize`Comments list`
+          }
+        }
+      }
+    ]
+  }
+]
diff --git a/client/src/app/+admin/overview/index.ts b/client/src/app/+admin/overview/index.ts
index a9c46893f..111360734 100644
--- a/client/src/app/+admin/overview/index.ts
+++ b/client/src/app/+admin/overview/index.ts
@@ -1,3 +1,4 @@
+export * from './comments'
 export * from './users'
 export * from './videos'
 export * from './overview.routes'
diff --git a/client/src/app/+admin/overview/overview.routes.ts b/client/src/app/+admin/overview/overview.routes.ts
index 1e6686d16..72d6835d7 100644
--- a/client/src/app/+admin/overview/overview.routes.ts
+++ b/client/src/app/+admin/overview/overview.routes.ts
@@ -1,8 +1,10 @@
 import { Routes } from '@angular/router'
-import { UsersRoutes } from './users'
+import { commentRoutes } from './comments'
-import { VideosRoutes } from './videos'
+import { usersRoutes } from './users'
+import { videosRoutes } from './videos'
 export const OverviewRoutes: Routes = [
-  ...UsersRoutes,
+  ...commentRoutes,
-  ...VideosRoutes
+  ...usersRoutes,
+  ...videosRoutes
 ]
diff --git a/client/src/app/+admin/overview/users/user-list/user-list.component.html b/client/src/app/+admin/overview/users/user-list/user-list.component.html
index 7eb89fea1..0662e3ac3 100644
--- a/client/src/app/+admin/overview/users/user-list/user-list.component.html
+++ b/client/src/app/+admin/overview/users/user-list/user-list.component.html
@@ -62,10 +62,10 @@
        </div>
      </th>
      <th *ngIf="isSelected('username')" pResizableColumn  pSortableColumn="username">{{ getColumn('username').label }} <p-sortIcon field="username"></p-sortIcon></th>
+      <th *ngIf="isSelected('role')" style="width: 120px;"  pSortableColumn="role">{{ getColumn('role').label }} <p-sortIcon field="role"></p-sortIcon></th>
      <th *ngIf="isSelected('email')">{{ getColumn('email').label }}</th>
      <th *ngIf="isSelected('quota')" style="width: 160px;"  pSortableColumn="videoQuotaUsed">{{ getColumn('quota').label }} <p-sortIcon field="videoQuotaUsed"></p-sortIcon></th>
      <th *ngIf="isSelected('quotaDaily')" style="width: 160px;">{{ getColumn('quotaDaily').label }}</th>
-      <th *ngIf="isSelected('role')" style="width: 120px;"  pSortableColumn="role">{{ getColumn('role').label }} <p-sortIcon field="role"></p-sortIcon></th>
      <th *ngIf="isSelected('pluginAuth')" style="width: 140px;" pResizableColumn >{{ getColumn('pluginAuth').label }}</th>
      <th *ngIf="isSelected('createdAt')" style="width: 150px;"  pSortableColumn="createdAt">{{ getColumn('createdAt').label }} <p-sortIcon field="createdAt"></p-sortIcon></th>
      <th *ngIf="isSelected('lastLoginDate')" style="width: 150px;"  pSortableColumn="lastLoginDate">{{ getColumn('lastLoginDate').label }} <p-sortIcon field="lastLoginDate"></p-sortIcon></th>
@@ -84,8 +84,9 @@
      </td>
      <td class="action-cell">
-        <my-user-moderation-dropdown *ngIf="!isInSelectionMode()" [user]="user" container="body"
+        <my-user-moderation-dropdown
-          (userChanged)="onUserChanged()" (userDeleted)="onUserChanged()">
+          *ngIf="!isInSelectionMode()" [user]="user" [account]="user.accountMutedStatus" [displayOptions]="userModerationDisplayOptions"
+          container="body" (userChanged)="onUserChanged()" (userDeleted)="onUserChanged()">
        </my-user-moderation-dropdown>
      </td>
@@ -99,6 +100,14 @@
            </div>
          </div>
        </a>
+        <div *ngIf="user.accountMutedStatus.mutedByInstance" class="badges-username badge badge-red" i18n>Muted</div>
+        <div *ngIf="user.blocked" class="badges-username badge badge-red" i18n>Banned</div>
+      </td>
+      <td *ngIf="isSelected('role')">
+        <span *ngIf="user.blocked" class="badge badge-banned" i18n-title title="The user was banned">{{ user.roleLabel }}</span>
+        <span *ngIf="!user.blocked" class="badge" [ngClass]="getRoleClass(user.role)">{{ user.roleLabel }}</span>
      </td>
      <td *ngIf="isSelected('email')" [title]="user.email">
@@ -138,11 +147,6 @@
        </div>
      </td>
-      <td *ngIf="isSelected('role')">
-        <span *ngIf="user.blocked" class="badge badge-banned" i18n-title title="The user was banned">{{ user.roleLabel }}</span>
-        <span *ngIf="!user.blocked" class="badge" [ngClass]="getRoleClass(user.role)">{{ user.roleLabel }}</span>
-      </td>
      <td *ngIf="isSelected('pluginAuth')">
        <ng-container *ngIf="user.pluginAuth">{{ user.pluginAuth }}</ng-container>
      </td>
diff --git a/client/src/app/+admin/overview/users/user-list/user-list.component.scss b/client/src/app/+admin/overview/users/user-list/user-list.component.scss
index 335bd2995..8160703f0 100644
--- a/client/src/app/+admin/overview/users/user-list/user-list.component.scss
+++ b/client/src/app/+admin/overview/users/user-list/user-list.component.scss
@@ -23,6 +23,10 @@ tr.banned > td {
  font-weight: $font-semibold;
 }
+.badges-username {
+  margin-left: 15px;
+}
 .user-table-primary-text .glyphicon {
  @include margin-left(0.1rem);
diff --git a/client/src/app/+admin/overview/users/user-list/user-list.component.ts b/client/src/app/+admin/overview/users/user-list/user-list.component.ts
index 9a9d0f5c6..d22e1355e 100644
--- a/client/src/app/+admin/overview/users/user-list/user-list.component.ts
+++ b/client/src/app/+admin/overview/users/user-list/user-list.component.ts
@@ -2,9 +2,10 @@ import { SortMeta } from 'primeng/api'
 import { Component, OnInit, ViewChild } from '@angular/core'
 import { ActivatedRoute, Router } from '@angular/router'
 import { AuthService, ConfirmService, Notifier, RestPagination, RestTable, ServerService } from '@app/core'
+import { getAPIHost } from '@app/helpers'
 import { AdvancedInputFilter } from '@app/shared/shared-forms'
-import { DropdownAction } from '@app/shared/shared-main'
+import { Actor, DropdownAction } from '@app/shared/shared-main'
-import { UserBanModalComponent } from '@app/shared/shared-moderation'
+import { AccountMutedStatus, BlocklistService, UserBanModalComponent, UserModerationDisplayType } from '@app/shared/shared-moderation'
 import { UserAdminService } from '@app/shared/shared-users'
 import { User, UserRole } from '@shared/models'
@@ -23,7 +24,7 @@ type UserForList = User & {
 export class UserListComponent extends RestTable implements OnInit {
  @ViewChild('userBanModal', { static: true }) userBanModal: UserBanModalComponent
-  users: User[] = []
+  users: (User & { accountMutedStatus: AccountMutedStatus })[] = []
  totalRecords = 0
  sort: SortMeta = { field: 'createdAt', order: 1 }
@@ -47,6 +48,12 @@ export class UserListComponent extends RestTable implements OnInit {
    }
  ]
+  userModerationDisplayOptions: UserModerationDisplayType = {
+    instanceAccount: true,
+    instanceUser: true,
+    myAccount: false
+  }
  requiresEmailVerification = false
  private _selectedColumns: string[]
@@ -58,6 +65,7 @@ export class UserListComponent extends RestTable implements OnInit {
    private confirmService: ConfirmService,
    private serverService: ServerService,
    private auth: AuthService,
+    private blocklist: BlocklistService,
    private userAdminService: UserAdminService
  ) {
    super()
@@ -115,9 +123,9 @@ export class UserListComponent extends RestTable implements OnInit {
    this.columns = [
      { id: 'username', label: $localize`Username` },
+      { id: 'role', label: $localize`Role` },
      { id: 'email', label: $localize`Email` },
      { id: 'quota', label: $localize`Video quota` },
-      { id: 'role', label: $localize`Role` },
      { id: 'createdAt', label: $localize`Created` }
    ]
@@ -237,11 +245,35 @@ export class UserListComponent extends RestTable implements OnInit {
      search: this.search
    }).subscribe({
      next: resultList => {
-        this.users = resultList.data
+        this.users = resultList.data.map(u => ({
+          ...u,
+          accountMutedStatus: {
+            ...u.account,
+            nameWithHost: Actor.CREATE_BY_STRING(u.account.name, u.account.host),
+            mutedByInstance: false,
+            mutedByUser: false,
+            mutedServerByInstance: false,
+            mutedServerByUser: false
+          }
+        }))
        this.totalRecords = resultList.total
+        this.loadMutedStatus()
      },
      error: err => this.notifier.error(err.message)
    })
  }
+  private loadMutedStatus () {
+    this.blocklist.getStatus({ accounts: this.users.map(u => u.username + '@' + getAPIHost()) })
+      .subscribe(blockStatus => {
+        for (const user of this.users) {
+          user.accountMutedStatus.mutedByInstance = blockStatus.accounts[user.username + '@' + getAPIHost()].blockedByServer
+        }
+      })
+  }
 }
diff --git a/client/src/app/+admin/overview/users/users.routes.ts b/client/src/app/+admin/overview/users/users.routes.ts
index 8b63f5bc7..c9724e5fb 100644
--- a/client/src/app/+admin/overview/users/users.routes.ts
+++ b/client/src/app/+admin/overview/users/users.routes.ts
@@ -4,7 +4,7 @@ import { UserRight } from '@shared/models'
 import { UserCreateComponent, UserUpdateComponent } from './user-edit'
 import { UserListComponent } from './user-list'
-export const UsersRoutes: Routes = [
+export const usersRoutes: Routes = [
  {
    path: 'users',
    canActivate: [ UserRightGuard ],
diff --git a/client/src/app/+admin/overview/videos/video-list.component.html b/client/src/app/+admin/overview/videos/video-list.component.html
index 974912b32..75d9be5f1 100644
--- a/client/src/app/+admin/overview/videos/video-list.component.html
+++ b/client/src/app/+admin/overview/videos/video-list.component.html
@@ -24,9 +24,7 @@
      <div class="ml-auto right-form">
        <my-advanced-input-filter [filters]="inputFilters" (search)="onSearch($event)"></my-advanced-input-filter>
-        <div class="button-filter-block">
+        <my-button i18n-label label="Refresh" icon="refresh" (click)="reloadData()"></my-button>
-          <my-button i18n-label label="Refresh" icon="refresh" (click)="reloadData()"></my-button>
-        </div>
      </div>
    </div>
diff --git a/client/src/app/+admin/overview/videos/video-list.component.scss b/client/src/app/+admin/overview/videos/video-list.component.scss
index 543cb433c..cb47b6548 100644
--- a/client/src/app/+admin/overview/videos/video-list.component.scss
+++ b/client/src/app/+admin/overview/videos/video-list.component.scss
@@ -1,5 +1,6 @@
 @use '_variables' as *;
 @use '_mixins' as *;
 my-embed {
  display: block;
  max-width: 500px;
@@ -27,4 +28,3 @@ my-embed {
    @include margin-right(10px);
  }
 }
diff --git a/client/src/app/+admin/overview/videos/video.routes.ts b/client/src/app/+admin/overview/videos/video.routes.ts
index 984df7b82..01cb5b497 100644
--- a/client/src/app/+admin/overview/videos/video.routes.ts
+++ b/client/src/app/+admin/overview/videos/video.routes.ts
@@ -3,7 +3,7 @@ import { UserRightGuard } from '@app/core'
 import { UserRight } from '@shared/models'
 import { VideoListComponent } from './video-list.component'
-export const VideosRoutes: Routes = [
+export const videosRoutes: Routes = [
  {
    path: 'videos',
    canActivate: [ UserRightGuard ],
diff --git a/client/src/app/+manage/video-channel-edit/video-channel-update.component.ts b/client/src/app/+manage/video-channel-edit/video-channel-update.component.ts
index 21b6167b2..51cd45605 100644
--- a/client/src/app/+manage/video-channel-edit/video-channel-update.component.ts
+++ b/client/src/app/+manage/video-channel-edit/video-channel-update.component.ts
@@ -111,7 +111,7 @@ export class VideoChannelUpdateComponent extends VideoChannelEdit implements OnI
          next: data => {
            this.notifier.success($localize`Avatar changed.`)
-            this.videoChannel.updateAvatar(data.avatar)
+            this.videoChannel.updateAvatar(data.avatars)
          },
          error: (err: HttpErrorResponse) => genericUploadErrorHandler({
@@ -141,7 +141,7 @@ export class VideoChannelUpdateComponent extends VideoChannelEdit implements OnI
          next: data => {
            this.notifier.success($localize`Banner changed.`)
-            this.videoChannel.updateBanner(data.banner)
+            this.videoChannel.updateBanner(data.banners)
          },
          error: (err: HttpErrorResponse) => genericUploadErrorHandler({
diff --git a/client/src/app/+my-account/my-account-settings/my-account-settings.component.ts b/client/src/app/+my-account/my-account-settings/my-account-settings.component.ts
index a5bcb6496..577f4a252 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-settings.component.ts
+++ b/client/src/app/+my-account/my-account-settings/my-account-settings.component.ts
@@ -43,7 +43,7 @@ export class MyAccountSettingsComponent implements OnInit, AfterViewChecked {
        next: data => {
          this.notifier.success($localize`Avatar changed.`)
-          this.user.updateAccountAvatar(data.avatar)
+          this.user.updateAccountAvatar(data.avatars)
        },
        error: (err: HttpErrorResponse) => genericUploadErrorHandler({
diff --git a/client/src/app/+my-library/+my-video-channels/my-video-channels.component.html b/client/src/app/+my-library/+my-video-channels/my-video-channels.component.html
index 77947315b..c1ded0f6d 100644
--- a/client/src/app/+my-library/+my-video-channels/my-video-channels.component.html
+++ b/client/src/app/+my-library/+my-video-channels/my-video-channels.component.html
@@ -19,7 +19,7 @@
 <div class="video-channels">
  <div *ngFor="let videoChannel of videoChannels; let i = index" class="video-channel">
-    <my-actor-avatar [channel]="videoChannel" [internalHref]="[ '/c', videoChannel.nameWithHost ]"></my-actor-avatar>
+    <my-actor-avatar [channel]="videoChannel" [internalHref]="[ '/c', videoChannel.nameWithHost ]" size="80"></my-actor-avatar>
    <div class="video-channel-info">
      <a [routerLink]="[ '/c', videoChannel.nameWithHost ]" class="video-channel-names" i18n-title title="Channel page">
diff --git a/client/src/app/+my-library/+my-video-channels/my-video-channels.component.scss b/client/src/app/+my-library/+my-video-channels/my-video-channels.component.scss
index 998e46cb2..484355967 100644
--- a/client/src/app/+my-library/+my-video-channels/my-video-channels.component.scss
+++ b/client/src/app/+my-library/+my-video-channels/my-video-channels.component.scss
@@ -24,7 +24,6 @@ my-edit-button {
  padding-bottom: 0;
  my-actor-avatar {
-    @include actor-avatar-size(80px);
    @include margin-right(10px);
  }
 }
diff --git a/client/src/app/+my-library/my-follows/my-followers.component.html b/client/src/app/+my-library/my-follows/my-followers.component.html
index eac750c86..4303695a3 100644
--- a/client/src/app/+my-library/my-follows/my-followers.component.html
+++ b/client/src/app/+my-library/my-follows/my-followers.component.html
@@ -14,7 +14,7 @@
 <div class="actors" myInfiniteScroller (nearOfBottom)="onNearOfBottom()" [dataObservable]="onDataSubject.asObservable()">
  <div *ngFor="let follow of follows" class="actor">
-    <my-actor-avatar [account]="follow.follower" [href]="follow.follower.url"></my-actor-avatar>
+    <my-actor-avatar [account]="follow.follower" [href]="follow.follower.url" size="40"></my-actor-avatar>
    <div class="actor-info">
      <a [href]="follow.follower.url" class="actor-names" rel="noopener noreferrer" target="_blank" i18n-title title="Follower page">
diff --git a/client/src/app/+my-library/my-follows/my-followers.component.scss b/client/src/app/+my-library/my-follows/my-followers.component.scss
index 15b51c419..fae4cd972 100644
--- a/client/src/app/+my-library/my-follows/my-followers.component.scss
+++ b/client/src/app/+my-library/my-follows/my-followers.component.scss
@@ -12,7 +12,7 @@ input[type=text] {
 }
 .actor {
-  @include actor-row($avatar-size: 40px, $min-height: auto, $separator: true);
+  @include actor-row($min-height: auto, $separator: true);
  .actor-display-name {
    font-size: 16px;
diff --git a/client/src/app/+my-library/my-follows/my-subscriptions.component.html b/client/src/app/+my-library/my-follows/my-subscriptions.component.html
index 775f0e783..391c4d3be 100644
--- a/client/src/app/+my-library/my-follows/my-subscriptions.component.html
+++ b/client/src/app/+my-library/my-follows/my-subscriptions.component.html
@@ -14,7 +14,7 @@
 <div class="actors" myInfiniteScroller (nearOfBottom)="onNearOfBottom()" [dataObservable]="onDataSubject.asObservable()">
  <div *ngFor="let videoChannel of videoChannels" class="actor">
-    <my-actor-avatar [channel]="videoChannel" [internalHref]="[ '/c', videoChannel.nameWithHost ]"></my-actor-avatar>
+    <my-actor-avatar [channel]="videoChannel" [internalHref]="[ '/c', videoChannel.nameWithHost ]" size="80"></my-actor-avatar>
    <div class="actor-info">
      <a [routerLink]="[ '/c', videoChannel.nameWithHost ]" class="actor-names" i18n-title title="Channel page">
diff --git a/client/src/app/+my-library/my-ownership/my-accept-ownership/my-accept-ownership.component.ts b/client/src/app/+my-library/my-ownership/my-accept-ownership/my-accept-ownership.component.ts
index 764da2369..8ead237c7 100644
--- a/client/src/app/+my-library/my-ownership/my-accept-ownership/my-accept-ownership.component.ts
+++ b/client/src/app/+my-library/my-ownership/my-accept-ownership/my-accept-ownership.component.ts
@@ -1,7 +1,7 @@
 import { SelectChannelItem } from 'src/types/select-options-item.model'
 import { Component, ElementRef, EventEmitter, OnInit, Output, ViewChild } from '@angular/core'
 import { AuthService, Notifier } from '@app/core'
-import { listUserChannels } from '@app/helpers'
+import { listUserChannelsForSelect } from '@app/helpers'
 import { OWNERSHIP_CHANGE_CHANNEL_VALIDATOR } from '@app/shared/form-validators/video-ownership-change-validators'
 import { FormReactive, FormValidatorService } from '@app/shared/shared-forms'
 import { VideoOwnershipService } from '@app/shared/shared-main'
@@ -36,7 +36,7 @@ export class MyAcceptOwnershipComponent extends FormReactive implements OnInit {
  ngOnInit () {
    this.videoChannels = []
-    listUserChannels(this.authService)
+    listUserChannelsForSelect(this.authService)
      .subscribe(channels => this.videoChannels = channels)
    this.buildForm({
diff --git a/client/src/app/+my-library/my-ownership/my-ownership.component.html b/client/src/app/+my-library/my-ownership/my-ownership.component.html
index 4c02c78fc..cb032505e 100644
--- a/client/src/app/+my-library/my-ownership/my-ownership.component.html
+++ b/client/src/app/+my-library/my-ownership/my-ownership.component.html
@@ -37,7 +37,7 @@
      <td>
        <a [href]="videoChangeOwnership.initiatorAccount.url" i18n-title title="Open account in a new tab" target="_blank" rel="noopener noreferrer">
          <div class="chip two-lines">
-            <my-actor-avatar [account]="videoChangeOwnership.initiatorAccount"></my-actor-avatar>
+            <my-actor-avatar [account]="videoChangeOwnership.initiatorAccount" size="32"></my-actor-avatar>
            <div>
              {{ videoChangeOwnership.initiatorAccount.displayName }}
              <span class="text-muted">{{ videoChangeOwnership.initiatorAccount.nameWithHost }}</span>
diff --git a/client/src/app/+my-library/my-video-playlists/my-video-playlist-create.component.ts b/client/src/app/+my-library/my-video-playlists/my-video-playlist-create.component.ts
index 8bc78b2db..9eb3e9888 100644
--- a/client/src/app/+my-library/my-video-playlists/my-video-playlist-create.component.ts
+++ b/client/src/app/+my-library/my-video-playlists/my-video-playlist-create.component.ts
@@ -1,7 +1,7 @@
 import { Component, OnInit } from '@angular/core'
 import { Router } from '@angular/router'
 import { AuthService, Notifier, ServerService } from '@app/core'
-import { listUserChannels } from '@app/helpers'
+import { listUserChannelsForSelect } from '@app/helpers'
 import {
  setPlaylistChannelValidator,
  VIDEO_PLAYLIST_CHANNEL_ID_VALIDATOR,
@@ -46,7 +46,7 @@ export class MyVideoPlaylistCreateComponent extends MyVideoPlaylistEdit implemen
      setPlaylistChannelValidator(this.form.get('videoChannelId'), privacy)
    })
-    listUserChannels(this.authService)
+    listUserChannelsForSelect(this.authService)
      .subscribe(channels => this.userVideoChannels = channels)
    this.serverService.getVideoPlaylistPrivacies()
diff --git a/client/src/app/+my-library/my-video-playlists/my-video-playlist-update.component.ts b/client/src/app/+my-library/my-video-playlists/my-video-playlist-update.component.ts
index 06ac3ad50..ef7ba0018 100644
--- a/client/src/app/+my-library/my-video-playlists/my-video-playlist-update.component.ts
+++ b/client/src/app/+my-library/my-video-playlists/my-video-playlist-update.component.ts
@@ -3,7 +3,7 @@ import { map, switchMap } from 'rxjs/operators'
 import { Component, OnDestroy, OnInit } from '@angular/core'
 import { ActivatedRoute, Router } from '@angular/router'
 import { AuthService, Notifier, ServerService } from '@app/core'
-import { listUserChannels } from '@app/helpers'
+import { listUserChannelsForSelect } from '@app/helpers'
 import {
  setPlaylistChannelValidator,
  VIDEO_PLAYLIST_CHANNEL_ID_VALIDATOR,
@@ -51,7 +51,7 @@ export class MyVideoPlaylistUpdateComponent extends MyVideoPlaylistEdit implemen
      setPlaylistChannelValidator(this.form.get('videoChannelId'), privacy)
    })
-    listUserChannels(this.authService)
+    listUserChannelsForSelect(this.authService)
      .subscribe(channels => this.userVideoChannels = channels)
    this.paramsSub = this.route.params
diff --git a/client/src/app/+my-library/my-videos/my-videos.component.ts b/client/src/app/+my-library/my-videos/my-videos.component.ts
index 261e87f99..c998b7c49 100644
--- a/client/src/app/+my-library/my-videos/my-videos.component.ts
+++ b/client/src/app/+my-library/my-videos/my-videos.component.ts
@@ -9,7 +9,7 @@ import { AdvancedInputFilter } from '@app/shared/shared-forms'
 import { DropdownAction, Video, VideoService } from '@app/shared/shared-main'
 import { LiveStreamInformationComponent } from '@app/shared/shared-video-live'
 import { MiniatureDisplayOptions, SelectionType, VideosSelectionComponent } from '@app/shared/shared-video-miniature'
-import { VideoChannel, VideoSortField } from '@shared/models'
+import { VideoChannel, VideoSortField, VideoState } from '@shared/models'
 import { VideoChangeOwnershipComponent } from './modals/video-change-ownership.component'
 @Component({
@@ -205,6 +205,12 @@ export class MyVideosComponent implements OnInit, DisableForReuseHook {
  private buildActions () {
    this.videoActions = [
      {
+        label: $localize`Editor`,
+        linkBuilder: ({ video }) => [ '/video-editor/edit', video.uuid ],
+        isDisplayed: ({ video }) => video.state.id === VideoState.PUBLISHED,
+        iconName: 'film'
+      },
+      {
        label: $localize`Display live information`,
        handler: ({ video }) => this.displayLiveInformation(video),
        isDisplayed: ({ video }) => video.isLive,
diff --git a/client/src/app/+search/search.component.html b/client/src/app/+search/search.component.html
index 412b962d1..2c84dd930 100644
--- a/client/src/app/+search/search.component.html
+++ b/client/src/app/+search/search.component.html
@@ -36,7 +36,7 @@
  <ng-container *ngFor="let result of results">
    <div *ngIf="isVideoChannel(result)" class="entry video-channel">
-      <my-actor-avatar [channel]="result" [internalHref]="getInternalChannelUrl(result)" [href]="getExternalChannelUrl(result)"></my-actor-avatar>
+      <my-actor-avatar [channel]="result" [internalHref]="getInternalChannelUrl(result)" [href]="getExternalChannelUrl(result)" size="120"></my-actor-avatar>
      <div class="video-channel-info">
        <a *ngIf="!isExternalChannelUrl()" [routerLink]="getInternalChannelUrl(result)" class="video-channel-names">
diff --git a/client/src/app/+search/search.component.scss b/client/src/app/+search/search.component.scss
index b521825e5..cab1d0e88 100644
--- a/client/src/app/+search/search.component.scss
+++ b/client/src/app/+search/search.component.scss
@@ -58,10 +58,6 @@
  max-width: 800px;
 }
-.video-channel my-actor-avatar {
-  @include build-channel-img-size($video-thumbnail-width);
-}
 .video-channel-info {
  flex-grow: 1;
  margin: 0 10px;
diff --git a/client/src/app/+video-channels/video-channels.component.html b/client/src/app/+video-channels/video-channels.component.html
index 212e2f867..09f81d2ce 100644
--- a/client/src/app/+video-channels/video-channels.component.html
+++ b/client/src/app/+video-channels/video-channels.component.html
@@ -23,7 +23,7 @@
        <div class="section-label" i18n>OWNER ACCOUNT</div>
        <div class="avatar-row">
-          <my-actor-avatar class="account-avatar" [account]="ownerAccount" [internalHref]="getAccountUrl()"></my-actor-avatar>
+          <my-actor-avatar class="account-avatar" [account]="ownerAccount" [internalHref]="getAccountUrl()" size="48"></my-actor-avatar>
          <div class="actor-info">
            <h4>
@@ -51,7 +51,7 @@
    </ng-template>
    <div class="channel-avatar-row">
-      <my-actor-avatar class="main-avatar" [channel]="videoChannel"></my-actor-avatar>
+      <my-actor-avatar class="main-avatar" [channel]="videoChannel" size="120"></my-actor-avatar>
      <div>
        <div class="section-label" i18n>VIDEO CHANNEL</div>
diff --git a/client/src/app/+video-channels/video-channels.component.scss b/client/src/app/+video-channels/video-channels.component.scss
index 72ee2d7bb..004ad7998 100644
--- a/client/src/app/+video-channels/video-channels.component.scss
+++ b/client/src/app/+video-channels/video-channels.component.scss
@@ -107,10 +107,6 @@
    display: flex;
    margin-bottom: 15px;
-    .account-avatar {
-      @include actor-avatar-size(48px);
-    }
    .actor-info {
      @include margin-left(15px);
    }
diff --git a/client/src/app/+video-editor/edit/index.ts b/client/src/app/+video-editor/edit/index.ts
new file mode 100644
index 000000000..390ca80fc
--- /dev/null
+++ b/client/src/app/+video-editor/edit/index.ts
@@ -0,0 +1,2 @@
+export * from './video-editor-edit.component'
+export * from './video-editor-edit.resolver'
diff --git a/client/src/app/+video-editor/edit/video-editor-edit.component.html b/client/src/app/+video-editor/edit/video-editor-edit.component.html
new file mode 100644
index 000000000..d33dfaf18
--- /dev/null
+++ b/client/src/app/+video-editor/edit/video-editor-edit.component.html
@@ -0,0 +1,88 @@
+<div class="margin-content">
+  <h1 class="title-page title-page-single" i18n>Edit {{ video.name }}</h1>
+  <div class="columns">
+    <form role="form" [formGroup]="form">
+      <div class="section cut" formGroupName="cut">
+        <h2 i18n>CUT VIDEO</h2>
+        <div i18n class="description">Set a new start/end.</div>
+        <div class="form-group">
+          <label i18n for="cutStart">New start</label>
+          <my-timestamp-input inputName="cutStart" [disableBorder]="false" [maxTimestamp]="video.duration" formControlName="start"></my-timestamp-input>
+        </div>
+        <div class="form-group">
+          <label i18n for="cutEnd">New end</label>
+          <my-timestamp-input inputName="cutEnd" [disableBorder]="false" [maxTimestamp]="video.duration" formControlName="end"></my-timestamp-input>
+        </div>
+      </div>
+      <div class="section" formGroupName="add-intro">
+        <h2 i18n>ADD INTRO</h2>
+        <div i18n class="description">Concatenate a file at the beginning of the video.</div>
+        <div class="form-group">
+          <my-reactive-file
+            formControlName="file" inputName="addIntroFile" i18n-inputLabel inputLabel="Select the intro video file"
+            [extensions]="videoExtensions" [displayFilename]="true"
+            [ngbTooltip]="getIntroOutroTooltip()"
+          ></my-reactive-file>
+        </div>
+      </div>
+      <div class="section" formGroupName="add-outro">
+        <h2 i18n>ADD OUTRO</h2>
+        <div i18n class="description">Concatenate a file at the end of the video.</div>
+        <div class="form-group">
+          <my-reactive-file
+            formControlName="file" inputName="addOutroFile" i18n-inputLabel inputLabel="Select the outro video file"
+            [extensions]="videoExtensions" [displayFilename]="true"
+            [ngbTooltip]="getIntroOutroTooltip()"
+          ></my-reactive-file>
+        </div>
+      </div>
+      <div class="section" formGroupName="add-watermark">
+        <h2 i18n>ADD WATERMARK</h2>
+        <div i18n class="description">Add a watermark image to the video.</div>
+        <div class="form-group">
+          <my-reactive-file
+            formControlName="file" inputName="addWatermarkFile" i18n-inputLabel inputLabel="Select watermark image file"
+            [extensions]="imageExtensions" [displayFilename]="true"
+            [ngbTooltip]="getWatermarkTooltip()"
+          ></my-reactive-file>
+        </div>
+      </div>
+      <my-button
+        className="orange-button" i18n-label label="Run video edition" icon="circle-tick"
+        (click)="runEdition()" (keydown.enter)="runEdition()"
+        [disabled]="!form.valid || isRunningEdition || noEdition()"
+      ></my-button>
+    </form>
+    <div class="information">
+      <div>
+        <label i18n>Video before edition</label>
+        <my-embed [video]="video"></my-embed>
+      </div>
+      <div *ngIf="!noEdition()">
+        <label i18n>Edition tasks:</label>
+        <ol>
+          <li *ngFor="let task of getTasksSummary()">{{ task }}</li>
+        </ol>
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/client/src/app/+video-editor/edit/video-editor-edit.component.scss b/client/src/app/+video-editor/edit/video-editor-edit.component.scss
new file mode 100644
index 000000000..43f336f59
--- /dev/null
+++ b/client/src/app/+video-editor/edit/video-editor-edit.component.scss
@@ -0,0 +1,76 @@
+@use '_variables' as *;
+@use '_mixins' as *;
+.columns {
+  display: flex;
+  .information {
+    width: 100%;
+    margin-left: 50px;
+    > div {
+      margin-bottom: 30px;
+    }
+    @media screen and (max-width: $small-view) {
+      display: none;
+    }
+  }
+}
+h1 {
+  font-size: 20px;
+}
+h2 {
+  font-weight: $font-bold;
+  font-size: 16px;
+  color: pvar(--mainColor);
+  background-color: pvar(--mainBackgroundColor);
+  padding: 0 5px;
+  width: fit-content;
+  margin: -8px 0 0;
+}
+.section {
+  $min-width: 600px;
+  @include padding-left(10px);
+  min-width: $min-width;
+  margin-bottom: 50px;
+  border: 1px solid $separator-border-color;
+  border-radius: 5px;
+  width: fit-content;
+  .form-group,
+  .description {
+    @include margin-left(5px);
+  }
+  .description {
+    color: pvar(--greyForegroundColor);
+    margin-top: 5px;
+    margin-bottom: 15px;
+  }
+  @media screen and (max-width: $min-width) {
+    min-width: none;
+  }
+}
+my-timestamp-input {
+  display: block;
+}
+my-embed {
+  display: block;
+  max-width: 500px;
+  width: 100%;
+}
+my-reactive-file {
+  display: block;
+  width: fit-content;
+}
diff --git a/client/src/app/+video-editor/edit/video-editor-edit.component.ts b/client/src/app/+video-editor/edit/video-editor-edit.component.ts
new file mode 100644
index 000000000..93d7ffcec
--- /dev/null
+++ b/client/src/app/+video-editor/edit/video-editor-edit.component.ts
@@ -0,0 +1,202 @@
+import { Component, OnInit } from '@angular/core'
+import { ActivatedRoute, Router } from '@angular/router'
+import { ConfirmService, Notifier, ServerService } from '@app/core'
+import { FormReactive, FormValidatorService } from '@app/shared/shared-forms'
+import { Video, VideoDetails } from '@app/shared/shared-main'
+import { LoadingBarService } from '@ngx-loading-bar/core'
+import { secondsToTime } from '@shared/core-utils'
+import { VideoEditorTask, VideoEditorTaskCut } from '@shared/models'
+import { VideoEditorService } from '../shared'
+@Component({
+  selector: 'my-video-editor-edit',
+  templateUrl: './video-editor-edit.component.html',
+  styleUrls: [ './video-editor-edit.component.scss' ]
+})
+export class VideoEditorEditComponent extends FormReactive implements OnInit {
+  isRunningEdition = false
+  video: VideoDetails
+  constructor (
+    protected formValidatorService: FormValidatorService,
+    private serverService: ServerService,
+    private notifier: Notifier,
+    private router: Router,
+    private route: ActivatedRoute,
+    private videoEditorService: VideoEditorService,
+    private loadingBar: LoadingBarService,
+    private confirmService: ConfirmService
+  ) {
+    super()
+  }
+  ngOnInit () {
+    this.video = this.route.snapshot.data.video
+    const defaultValues = {
+      cut: {
+        start: 0,
+        end: this.video.duration
+      }
+    }
+    this.buildForm({
+      cut: {
+        start: null,
+        end: null
+      },
+      'add-intro': {
+        file: null
+      },
+      'add-outro': {
+        file: null
+      },
+      'add-watermark': {
+        file: null
+      }
+    }, defaultValues)
+  }
+  get videoExtensions () {
+    return this.serverService.getHTMLConfig().video.file.extensions
+  }
+  get imageExtensions () {
+    return this.serverService.getHTMLConfig().video.image.extensions
+  }
+  async runEdition () {
+    if (this.isRunningEdition) return
+    const title = $localize`Are you sure you want to edit "${this.video.name}"?`
+    const listHTML = this.getTasksSummary().map(t => `<li>${t}</li>`).join('')
+    // eslint-disable-next-line max-len
+    const confirmHTML = $localize`The current video will be overwritten by this edited video and <strong>you won't be able to recover it</strong>.<br /><br />` +
+      $localize`As a reminder, the following tasks will be executed: <ol>${listHTML}</ol>`
+    if (await this.confirmService.confirm(confirmHTML, title) !== true) return
+    this.isRunningEdition = true
+    const tasks = this.buildTasks()
+    this.loadingBar.useRef().start()
+    return this.videoEditorService.editVideo(this.video.uuid, tasks)
+      .subscribe({
+        next: () => {
+          this.notifier.success($localize`Video updated.`)
+          this.router.navigateByUrl(Video.buildWatchUrl(this.video))
+        },
+        error: err => {
+          this.loadingBar.useRef().complete()
+          this.isRunningEdition = false
+          this.notifier.error(err.message)
+          console.error(err)
+        }
+      })
+  }
+  getIntroOutroTooltip () {
+    return $localize`(extensions: ${this.videoExtensions.join(', ')})`
+  }
+  getWatermarkTooltip () {
+    return $localize`(extensions: ${this.imageExtensions.join(', ')})`
+  }
+  noEdition () {
+    return this.buildTasks().length === 0
+  }
+  getTasksSummary () {
+    const tasks = this.buildTasks()
+    return tasks.map(t => {
+      if (t.name === 'add-intro') {
+        return $localize`"${this.getFilename(t.options.file)}" will be added at the beggining of the video`
+      }
+      if (t.name === 'add-outro') {
+        return $localize`"${this.getFilename(t.options.file)}" will be added at the end of the video`
+      }
+      if (t.name === 'add-watermark') {
+        return $localize`"${this.getFilename(t.options.file)}" image watermark will be added to the video`
+      }
+      if (t.name === 'cut') {
+        const { start, end } = t.options
+        if (start !== undefined && end !== undefined) {
+          return $localize`Video will begin at ${secondsToTime(start)} and stop at ${secondsToTime(end)}`
+        }
+        if (start !== undefined) {
+          return $localize`Video will begin at ${secondsToTime(start)}`
+        }
+        if (end !== undefined) {
+          return $localize`Video will stop at ${secondsToTime(end)}`
+        }
+      }
+      return ''
+    })
+  }
+  private getFilename (obj: any) {
+    return obj.name
+  }
+  private buildTasks () {
+    const tasks: VideoEditorTask[] = []
+    const value = this.form.value
+    const cut = value['cut']
+    if (cut['start'] !== 0 || cut['end'] !== this.video.duration) {
+      const options: VideoEditorTaskCut['options'] = {}
+      if (cut['start'] !== 0) options.start = cut['start']
+      if (cut['end'] !== this.video.duration) options.end = cut['end']
+      tasks.push({
+        name: 'cut',
+        options
+      })
+    }
+    if (value['add-intro']?.['file']) {
+      tasks.push({
+        name: 'add-intro',
+        options: {
+          file: value['add-intro']['file']
+        }
+      })
+    }
+    if (value['add-outro']?.['file']) {
+      tasks.push({
+        name: 'add-outro',
+        options: {
+          file: value['add-outro']['file']
+        }
+      })
+    }
+    if (value['add-watermark']?.['file']) {
+      tasks.push({
+        name: 'add-watermark',
+        options: {
+          file: value['add-watermark']['file']
+        }
+      })
+    }
+    return tasks
+  }
+}
diff --git a/client/src/app/+video-editor/edit/video-editor-edit.resolver.ts b/client/src/app/+video-editor/edit/video-editor-edit.resolver.ts
new file mode 100644
index 000000000..7b95ae834
--- /dev/null
+++ b/client/src/app/+video-editor/edit/video-editor-edit.resolver.ts
@@ -0,0 +1,18 @@
+import { Injectable } from '@angular/core'
+import { ActivatedRouteSnapshot, Resolve } from '@angular/router'
+import { VideoService } from '@app/shared/shared-main'
+@Injectable()
+export class VideoEditorEditResolver implements Resolve<any> {
+  constructor (
+    private videoService: VideoService
+  ) {
+  }
+  resolve (route: ActivatedRouteSnapshot) {
+    const videoId: string = route.params['videoId']
+    return this.videoService.getVideo({ videoId })
+  }
+}
diff --git a/client/src/app/+video-editor/index.ts b/client/src/app/+video-editor/index.ts
new file mode 100644
index 000000000..5a9e9fdd0
--- /dev/null
+++ b/client/src/app/+video-editor/index.ts
@@ -0,0 +1 @@
+export * from './video-editor.module'
diff --git a/client/src/app/+video-editor/shared/index.ts b/client/src/app/+video-editor/shared/index.ts
new file mode 100644
index 000000000..eaf88b6f4
--- /dev/null
+++ b/client/src/app/+video-editor/shared/index.ts
@@ -0,0 +1 @@
+export * from './video-editor.service'
diff --git a/client/src/app/+video-editor/shared/video-editor.service.ts b/client/src/app/+video-editor/shared/video-editor.service.ts
new file mode 100644
index 000000000..5b7053039
--- /dev/null
+++ b/client/src/app/+video-editor/shared/video-editor.service.ts
@@ -0,0 +1,28 @@
+import { catchError } from 'rxjs'
+import { HttpClient } from '@angular/common/http'
+import { Injectable } from '@angular/core'
+import { RestExtractor } from '@app/core'
+import { objectToFormData } from '@app/helpers'
+import { VideoService } from '@app/shared/shared-main'
+import { VideoEditorCreateEdition, VideoEditorTask } from '@shared/models'
+@Injectable()
+export class VideoEditorService {
+  constructor (
+    private authHttp: HttpClient,
+    private restExtractor: RestExtractor
+  ) {}
+  editVideo (videoId: number | string, tasks: VideoEditorTask[]) {
+    const url = VideoService.BASE_VIDEO_URL + '/' + videoId + '/editor/edit'
+    const body: VideoEditorCreateEdition = {
+      tasks
+    }
+    const data = objectToFormData(body)
+    return this.authHttp.post(url, data)
+      .pipe(catchError(err => this.restExtractor.handleError(err)))
+  }
+}
diff --git a/client/src/app/+video-editor/video-editor-routing.module.ts b/client/src/app/+video-editor/video-editor-routing.module.ts
new file mode 100644
index 000000000..9f37a0dae
--- /dev/null
+++ b/client/src/app/+video-editor/video-editor-routing.module.ts
@@ -0,0 +1,30 @@
+import { NgModule } from '@angular/core'
+import { RouterModule, Routes } from '@angular/router'
+import { VideoEditorEditResolver } from './edit'
+import { VideoEditorEditComponent } from './edit/video-editor-edit.component'
+const videoEditorRoutes: Routes = [
+  {
+    path: '',
+    children: [
+      {
+        path: 'edit/:videoId',
+        component: VideoEditorEditComponent,
+        data: {
+          meta: {
+            title: $localize`Edit video`
+          }
+        },
+        resolve: {
+          video: VideoEditorEditResolver
+        }
+      }
+    ]
+  }
+]
+@NgModule({
+  imports: [ RouterModule.forChild(videoEditorRoutes) ],
+  exports: [ RouterModule ]
+})
+export class VideoEditorRoutingModule {}
diff --git a/client/src/app/+video-editor/video-editor.module.ts b/client/src/app/+video-editor/video-editor.module.ts
new file mode 100644
index 000000000..7bbebc17b
--- /dev/null
+++ b/client/src/app/+video-editor/video-editor.module.ts
@@ -0,0 +1,27 @@
+import { NgModule } from '@angular/core'
+import { SharedFormModule } from '@app/shared/shared-forms'
+import { SharedMainModule } from '@app/shared/shared-main'
+import { VideoEditorEditComponent, VideoEditorEditResolver } from './edit'
+import { VideoEditorService } from './shared'
+import { VideoEditorRoutingModule } from './video-editor-routing.module'
+@NgModule({
+  imports: [
+    VideoEditorRoutingModule,
+    SharedMainModule,
+    SharedFormModule
+  ],
+  declarations: [
+    VideoEditorEditComponent
+  ],
+  exports: [],
+  providers: [
+    VideoEditorService,
+    VideoEditorEditResolver
+  ]
+})
+export class VideoEditorModule { }
diff --git a/client/src/app/+videos/+video-edit/shared/video-caption-add-modal.component.ts b/client/src/app/+videos/+video-edit/shared/video-caption-add-modal.component.ts
index 5c4152884..6deadfcbe 100644
--- a/client/src/app/+videos/+video-edit/shared/video-caption-add-modal.component.ts
+++ b/client/src/app/+videos/+video-edit/shared/video-caption-add-modal.component.ts
@@ -77,7 +77,8 @@ export class VideoCaptionAddModalComponent extends FormReactive implements OnIni
    this.captionAdded.emit({
      language: languageObject,
-      captionfile: this.form.value['captionfile']
+      captionfile: this.form.value['captionfile'],
+      action: 'CREATE'
    })
    this.hide()
diff --git a/client/src/app/+videos/+video-edit/shared/video-caption-edit-modal/video-caption-edit-modal.component.html b/client/src/app/+videos/+video-edit/shared/video-caption-edit-modal/video-caption-edit-modal.component.html
new file mode 100644
index 000000000..be6f676c2
--- /dev/null
+++ b/client/src/app/+videos/+video-edit/shared/video-caption-edit-modal/video-caption-edit-modal.component.html
@@ -0,0 +1,36 @@
+<ng-template #modal>
+  <ng-container [formGroup]="form">
+    <div class="modal-header">
+      <h4 i18n class="modal-title">Edit caption</h4>
+      <my-global-icon iconName="cross" aria-label="Close" role="button" (click)="hide()"></my-global-icon>
+    </div>
+    <div class="modal-body">
+      <label i18n for="captionFileContent">Caption</label>
+      <textarea
+        id="captionFileContent"
+        formControlName="captionFileContent"
+        class="form-control caption-textarea"
+        [ngClass]="{ 'input-error': formErrors['captionFileContent'] }"
+      >
+      </textarea>
+      <div *ngIf="formErrors.captionFileContent" class="form-error">
+        {{ formErrors.captionFileContent }}
+      </div>
+    </div>
+    <div class="modal-footer inputs">
+      <input
+        type="button" role="button" i18n-value value="Cancel" class="peertube-button grey-button"
+        (click)="cancel()" (key.enter)="cancel()"
+      >
+      <input
+        type="submit" i18n-value value="Edit this caption" class="peertube-button orange-button"
+        [disabled]="!form.valid" (click)="updateCaption()"
+      >
+    </div>
+  </ng-container>
+</ng-template>
diff --git a/client/src/app/+videos/+video-edit/shared/video-caption-edit-modal/video-caption-edit-modal.component.scss b/client/src/app/+videos/+video-edit/shared/video-caption-edit-modal/video-caption-edit-modal.component.scss
new file mode 100644
index 000000000..bd96f2b7a
--- /dev/null
+++ b/client/src/app/+videos/+video-edit/shared/video-caption-edit-modal/video-caption-edit-modal.component.scss
@@ -0,0 +1,4 @@
+.caption-textarea {
+  min-height: 600px;
+}
diff --git a/client/src/app/+videos/+video-edit/shared/video-caption-edit-modal/video-caption-edit-modal.component.ts b/client/src/app/+videos/+video-edit/shared/video-caption-edit-modal/video-caption-edit-modal.component.ts
new file mode 100644
index 000000000..f74f3c5ea
--- /dev/null
+++ b/client/src/app/+videos/+video-edit/shared/video-caption-edit-modal/video-caption-edit-modal.component.ts
@@ -0,0 +1,83 @@
+import { Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core'
+import { VIDEO_CAPTION_FILE_CONTENT_VALIDATOR } from '@app/shared/form-validators/video-captions-validators'
+import { FormReactive, FormValidatorService } from '@app/shared/shared-forms'
+import { VideoCaptionEdit, VideoCaptionService, VideoCaptionWithPathEdit } from '@app/shared/shared-main'
+import { NgbModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap'
+import { HTMLServerConfig, VideoConstant } from '@shared/models'
+import { ServerService } from '../../../../core'
+@Component({
+  selector: 'my-video-caption-edit-modal',
+  styleUrls: [ './video-caption-edit-modal.component.scss' ],
+  templateUrl: './video-caption-edit-modal.component.html'
+})
+export class VideoCaptionEditModalComponent extends FormReactive implements OnInit {
+  @Input() videoCaption: VideoCaptionWithPathEdit
+  @Input() serverConfig: HTMLServerConfig
+  @Output() captionEdited = new EventEmitter<VideoCaptionEdit>()
+  @ViewChild('modal', { static: true }) modal: ElementRef
+  videoCaptionLanguages: VideoConstant<string>[] = []
+  private openedModal: NgbModalRef
+  constructor (
+    protected formValidatorService: FormValidatorService,
+    private modalService: NgbModal,
+    private videoCaptionService: VideoCaptionService,
+    private serverService: ServerService
+  ) {
+    super()
+  }
+  ngOnInit () {
+    this.serverService.getVideoLanguages().subscribe(languages => this.videoCaptionLanguages = languages)
+    this.buildForm({ captionFileContent: VIDEO_CAPTION_FILE_CONTENT_VALIDATOR })
+    this.loadCaptionContent()
+  }
+  loadCaptionContent () {
+    const { captionPath } = this.videoCaption
+    if (!captionPath) return
+    this.videoCaptionService.getCaptionContent({ captionPath })
+      .subscribe(res => {
+        this.form.patchValue({
+          captionFileContent: res
+        })
+      })
+  }
+  show () {
+    this.openedModal = this.modalService.open(this.modal, { centered: true, keyboard: false })
+  }
+  hide () {
+    this.openedModal.close()
+  }
+  cancel () {
+    this.hide()
+  }
+  updateCaption () {
+    const format = 'vtt'
+    const languageId = this.videoCaption.language.id
+    const languageObject = this.videoCaptionLanguages.find(l => l.id === languageId)
+    this.captionEdited.emit({
+      language: languageObject,
+      captionfile: new File([ this.form.value['captionFileContent'] ], `${languageId}.${format}`, {
+        type: 'text/vtt',
+        lastModified: Date.now()
+      }),
+      action: 'UPDATE'
+    })
+    this.hide()
+  }
+}
diff --git a/client/src/app/+videos/+video-edit/shared/video-edit.component.html b/client/src/app/+videos/+video-edit/shared/video-edit.component.html
index 9bb13ba88..2281f8631 100644
--- a/client/src/app/+videos/+video-edit/shared/video-edit.component.html
+++ b/client/src/app/+videos/+video-edit/shared/video-edit.component.html
@@ -186,6 +186,7 @@
                <div i18n class="caption-entry-state">Already uploaded  &#10004;</div>
+                <span i18n class="caption-entry-edit" (click)="videoCaptionEditModal.show()">Edit</span>
                <span i18n class="caption-entry-delete" (click)="deleteCaption(videoCaption)">Delete</span>
              </ng-container>
@@ -197,6 +198,14 @@
                <span i18n class="caption-entry-delete" (click)="deleteCaption(videoCaption)">Cancel create</span>
              </ng-container>
+              <ng-container *ngIf="videoCaption.action === 'UPDATE'">
+                <span class="caption-entry-label">{{ videoCaption.language.label }}</span>
+                <div i18n class="caption-entry-state caption-entry-state-create">Will be edited on update</div>
+                <span i18n class="caption-entry-delete" (click)="deleteCaption(videoCaption)">Cancel edition</span>
+              </ng-container>
              <ng-container *ngIf="videoCaption.action === 'REMOVE'">
                <span class="caption-entry-label">{{ videoCaption.language.label }}</span>
@@ -204,6 +213,13 @@
                <span i18n class="caption-entry-delete" (click)="deleteCaption(videoCaption)">Cancel deletion</span>
              </ng-container>
+              <my-video-caption-edit-modal
+                #videoCaptionEditModal
+                [videoCaption]="videoCaption"
+                [serverConfig]="serverConfig"
+                (captionEdited)="onCaptionEdited($event)"
+              ></my-video-caption-edit-modal>
            </div>
          </div>
@@ -373,5 +389,5 @@
 </div>
 <my-video-caption-add-modal
-  #videoCaptionAddModal [existingCaptions]="getExistingCaptions()" [serverConfig]="serverConfig" (captionAdded)="onCaptionAdded($event)"
+  #videoCaptionAddModal [existingCaptions]="getExistingCaptions()" [serverConfig]="serverConfig" (captionAdded)="onCaptionEdited($event)"
 ></my-video-caption-add-modal>
diff --git a/client/src/app/+videos/+video-edit/shared/video-edit.component.scss b/client/src/app/+videos/+video-edit/shared/video-edit.component.scss
index 4b1dec89a..5344e5431 100644
--- a/client/src/app/+videos/+video-edit/shared/video-edit.component.scss
+++ b/client/src/app/+videos/+video-edit/shared/video-edit.component.scss
@@ -96,6 +96,10 @@ my-peertube-checkbox {
    }
  }
+  .caption-entry-edit {
+    @include peertube-button;
+  }
  .caption-entry-delete {
    @include peertube-button;
    @include grey-button;
diff --git a/client/src/app/+videos/+video-edit/shared/video-edit.component.ts b/client/src/app/+videos/+video-edit/shared/video-edit.component.ts
index 31dbe43e6..2801fc519 100644
--- a/client/src/app/+videos/+video-edit/shared/video-edit.component.ts
+++ b/client/src/app/+videos/+video-edit/shared/video-edit.component.ts
@@ -21,7 +21,7 @@ import {
 } from '@app/shared/form-validators/video-validators'
 import { FormReactiveValidationMessages, FormValidatorService } from '@app/shared/shared-forms'
 import { InstanceService } from '@app/shared/shared-instance'
-import { VideoCaptionEdit, VideoEdit, VideoService } from '@app/shared/shared-main'
+import { VideoCaptionEdit, VideoCaptionWithPathEdit, VideoEdit, VideoService } from '@app/shared/shared-main'
 import { PluginInfo } from '@root-helpers/plugins-manager'
 import {
  HTMLServerConfig,
@@ -34,6 +34,7 @@ import {
 } from '@shared/models'
 import { I18nPrimengCalendarService } from './i18n-primeng-calendar.service'
 import { VideoCaptionAddModalComponent } from './video-caption-add-modal.component'
+import { VideoCaptionEditModalComponent } from './video-caption-edit-modal/video-caption-edit-modal.component'
 import { VideoEditType } from './video-edit.type'
 type VideoLanguages = VideoConstant<string> & { group?: string }
@@ -58,13 +59,14 @@ export class VideoEditComponent implements OnInit, OnDestroy {
  @Input() userVideoChannels: SelectChannelItem[] = []
  @Input() forbidScheduledPublication = true
-  @Input() videoCaptions: (VideoCaptionEdit & { captionPath?: string })[] = []
+  @Input() videoCaptions: VideoCaptionWithPathEdit[] = []
  @Input() waitTranscodingEnabled = true
  @Input() type: VideoEditType
  @Input() liveVideo: LiveVideo
  @ViewChild('videoCaptionAddModal', { static: true }) videoCaptionAddModal: VideoCaptionAddModalComponent
+  @ViewChild('videoCaptionEditModal', { static: true }) editCaptionModal: VideoCaptionEditModalComponent
  @Output() formBuilt = new EventEmitter<void>()
  @Output() pluginFieldsAdded = new EventEmitter<void>()
@@ -228,12 +230,12 @@ export class VideoEditComponent implements OnInit, OnDestroy {
               .map(c => c.language.id)
  }
-  onCaptionAdded (caption: VideoCaptionEdit) {
+  onCaptionEdited (caption: VideoCaptionEdit) {
    const existingCaption = this.videoCaptions.find(c => c.language.id === caption.language.id)
    // Replace existing caption?
    if (existingCaption) {
-      Object.assign(existingCaption, caption, { action: 'CREATE' as 'CREATE' })
+      Object.assign(existingCaption, caption)
    } else {
      this.videoCaptions.push(
        Object.assign(caption, { action: 'CREATE' as 'CREATE' })
@@ -251,7 +253,7 @@ export class VideoEditComponent implements OnInit, OnDestroy {
    }
    // This caption is not on the server, just remove it from our array
-    if (caption.action === 'CREATE') {
+    if (caption.action === 'CREATE' || caption.action === 'UPDATE') {
      removeElementFromArray(this.videoCaptions, caption)
      return
    }
diff --git a/client/src/app/+videos/+video-edit/shared/video-edit.module.ts b/client/src/app/+videos/+video-edit/shared/video-edit.module.ts
index 7a3854065..4e8767364 100644
--- a/client/src/app/+videos/+video-edit/shared/video-edit.module.ts
+++ b/client/src/app/+videos/+video-edit/shared/video-edit.module.ts
@@ -6,6 +6,7 @@ import { SharedMainModule } from '@app/shared/shared-main'
 import { SharedVideoLiveModule } from '@app/shared/shared-video-live'
 import { I18nPrimengCalendarService } from './i18n-primeng-calendar.service'
 import { VideoCaptionAddModalComponent } from './video-caption-add-modal.component'
+import { VideoCaptionEditModalComponent } from './video-caption-edit-modal/video-caption-edit-modal.component'
 import { VideoEditComponent } from './video-edit.component'
 @NgModule({
@@ -20,7 +21,8 @@ import { VideoEditComponent } from './video-edit.component'
  declarations: [
    VideoEditComponent,
-    VideoCaptionAddModalComponent
+    VideoCaptionAddModalComponent,
+    VideoCaptionEditModalComponent
  ],
  exports: [
diff --git a/client/src/app/+videos/+video-edit/video-add-components/video-send.ts b/client/src/app/+videos/+video-edit/video-add-components/video-send.ts
index 3d0e1bf2a..9de373cd3 100644
--- a/client/src/app/+videos/+video-edit/video-add-components/video-send.ts
+++ b/client/src/app/+videos/+video-edit/video-add-components/video-send.ts
@@ -2,7 +2,7 @@ import { catchError, switchMap, tap } from 'rxjs/operators'
 import { SelectChannelItem } from 'src/types/select-options-item.model'
 import { Directive, EventEmitter, OnInit } from '@angular/core'
 import { AuthService, CanComponentDeactivateResult, Notifier, ServerService } from '@app/core'
-import { listUserChannels } from '@app/helpers'
+import { listUserChannelsForSelect } from '@app/helpers'
 import { FormReactive } from '@app/shared/shared-forms'
 import { VideoCaptionEdit, VideoCaptionService, VideoEdit, VideoService } from '@app/shared/shared-main'
 import { LoadingBarService } from '@ngx-loading-bar/core'
@@ -38,7 +38,7 @@ export abstract class VideoSend extends FormReactive implements OnInit {
  ngOnInit () {
    this.buildForm({})
-    listUserChannels(this.authService)
+    listUserChannelsForSelect(this.authService)
      .subscribe(channels => {
        this.userVideoChannels = channels
        this.firstStepChannelId = this.userVideoChannels[0].id
diff --git a/client/src/app/+videos/+video-edit/video-update.resolver.ts b/client/src/app/+videos/+video-edit/video-update.resolver.ts
index 91e76b7fe..82dae5c1c 100644
--- a/client/src/app/+videos/+video-edit/video-update.resolver.ts
+++ b/client/src/app/+videos/+video-edit/video-update.resolver.ts
@@ -3,7 +3,7 @@ import { map, switchMap } from 'rxjs/operators'
 import { Injectable } from '@angular/core'
 import { ActivatedRouteSnapshot, Resolve } from '@angular/router'
 import { AuthService } from '@app/core'
-import { listUserChannels } from '@app/helpers'
+import { listUserChannelsForSelect } from '@app/helpers'
 import { VideoCaptionService, VideoDetails, VideoService } from '@app/shared/shared-main'
 import { LiveVideoService } from '@app/shared/shared-video-live'
@@ -33,7 +33,7 @@ export class VideoUpdateResolver implements Resolve<any> {
        .loadCompleteDescription(video.descriptionPath)
        .pipe(map(description => Object.assign(video, { description }))),
-      listUserChannels(this.authService),
+      listUserChannelsForSelect(this.authService),
      this.videoCaptionService
        .listCaptions(video.id)
diff --git a/client/src/app/+videos/+video-watch/shared/action-buttons/action-buttons.component.ts b/client/src/app/+videos/+video-watch/shared/action-buttons/action-buttons.component.ts
index e59238ffe..6e8a64f46 100644
--- a/client/src/app/+videos/+video-watch/shared/action-buttons/action-buttons.component.ts
+++ b/client/src/app/+videos/+video-watch/shared/action-buttons/action-buttons.component.ts
@@ -35,6 +35,7 @@ export class ActionButtonsComponent implements OnInit, OnChanges {
    playlist: false,
    download: true,
    update: true,
+    editor: true,
    blacklist: true,
    delete: true,
    report: true,
diff --git a/client/src/app/+videos/+video-watch/shared/comment/video-comment.component.html b/client/src/app/+videos/+video-watch/shared/comment/video-comment.component.html
index d0e9bcd29..5014b9692 100644
--- a/client/src/app/+videos/+video-watch/shared/comment/video-comment.component.html
+++ b/client/src/app/+videos/+video-watch/shared/comment/video-comment.component.html
@@ -1,6 +1,6 @@
 <div *ngIf="isCommentDisplayed()" class="root-comment" [ngClass]="{ 'is-child': isChild() }">
  <div class="left">
-    <my-actor-avatar *ngIf="!comment.isDeleted" [href]="comment.account.url" [account]="comment.account"></my-actor-avatar>
+    <my-actor-avatar *ngIf="!comment.isDeleted" [href]="comment.account.url" [account]="comment.account" [size]="isChild() ? '25' : '36'"></my-actor-avatar>
    <div class="vertical-border"></div>
  </div>
diff --git a/client/src/app/+videos/+video-watch/shared/comment/video-comment.component.scss b/client/src/app/+videos/+video-watch/shared/comment/video-comment.component.scss
index 87e313d41..54f828014 100644
--- a/client/src/app/+videos/+video-watch/shared/comment/video-comment.component.scss
+++ b/client/src/app/+videos/+video-watch/shared/comment/video-comment.component.scss
@@ -25,10 +25,6 @@
  }
 }
-my-actor-avatar {
-  @include actor-avatar-size(36px);
-}
 .comment {
  flex-grow: 1;
  // Fix word-wrap with flex
@@ -160,11 +156,6 @@ my-video-comment-add {
 }
 .is-child {
-  // Reduce avatars size for replies
-  my-actor-avatar {
-    @include actor-avatar-size(25px);
-  }
  .left {
    @include margin-right(6px);
  }
diff --git a/client/src/app/+videos/+video-watch/shared/information/video-alert.component.html b/client/src/app/+videos/+video-watch/shared/information/video-alert.component.html
index 0c4d46714..c6ffb1abd 100644
--- a/client/src/app/+videos/+video-watch/shared/information/video-alert.component.html
+++ b/client/src/app/+videos/+video-watch/shared/information/video-alert.component.html
@@ -14,6 +14,10 @@
  The video is being transcoded, it may not work properly.
 </div>
+<div i18n class="alert alert-warning" *ngIf="isVideoToEdit()">
+  The video is being edited, it may not work properly.
+</div>
 <div i18n class="alert alert-warning" *ngIf="isVideoToMoveToExternalStorage()">
  The video is being moved to an external server, it may not work properly.
 </div>
diff --git a/client/src/app/+videos/+video-watch/shared/information/video-alert.component.ts b/client/src/app/+videos/+video-watch/shared/information/video-alert.component.ts
index a3d3fa6fb..79b56705f 100644
--- a/client/src/app/+videos/+video-watch/shared/information/video-alert.component.ts
+++ b/client/src/app/+videos/+video-watch/shared/information/video-alert.component.ts
@@ -14,6 +14,10 @@ export class VideoAlertComponent {
    return this.video && this.video.state.id === VideoState.TO_TRANSCODE
  }
+  isVideoToEdit () {
+    return this.video && this.video.state.id === VideoState.TO_EDIT
+  }
  isVideoTranscodingFailed () {
    return this.video && this.video.state.id === VideoState.TRANSCODING_FAILED
  }
diff --git a/client/src/app/+videos/+video-watch/shared/metadata/video-avatar-channel.component.html b/client/src/app/+videos/+video-watch/shared/metadata/video-avatar-channel.component.html
index d433c7aba..a23152b67 100644
--- a/client/src/app/+videos/+video-watch/shared/metadata/video-avatar-channel.component.html
+++ b/client/src/app/+videos/+video-watch/shared/metadata/video-avatar-channel.component.html
@@ -2,19 +2,19 @@
  <my-actor-avatar
    *ngIf="showChannel"
    class="channel"
-    [class.main-avatar]="showChannel"
    [channel]="video.channel"
    [internalHref]="[ '/c', video.byVideoChannel ]"
    [title]="channelLinkTitle"
+    size="35"
  ></my-actor-avatar>
  <my-actor-avatar
    *ngIf="showAccount"
    class="account"
-    [class.main-avatar]="!showChannel"
    [class.second-avatar]="showChannel"
    [account]="video.account"
    [internalHref]="[ '/a', video.byAccount ]"
-    [title]="accountLinkTitle">
+    [title]="accountLinkTitle"
+    size="35">
  </my-actor-avatar>
 </div>
diff --git a/client/src/app/+videos/+video-watch/shared/metadata/video-avatar-channel.component.scss b/client/src/app/+videos/+video-watch/shared/metadata/video-avatar-channel.component.scss
index 71c5e4b5a..80711ff32 100644
--- a/client/src/app/+videos/+video-watch/shared/metadata/video-avatar-channel.component.scss
+++ b/client/src/app/+videos/+video-watch/shared/metadata/video-avatar-channel.component.scss
@@ -1,9 +1,5 @@
 @use '_mixins' as *;
-@mixin main {
-  @include actor-avatar-size(35px);
-}
 @mixin secondary {
  height: 60%;
  width: 60%;
@@ -14,16 +10,11 @@
 }
 .wrapper {
-  @include actor-avatar-size(35px);
  @include margin-right(5px);
  position: relative;
  margin-bottom: 5px;
-  .main-avatar {
-    @include main();
-  }
  .second-avatar {
    @include secondary();
  }
diff --git a/client/src/app/+videos/+video-watch/shared/metadata/video-avatar-channel.component.ts b/client/src/app/+videos/+video-watch/shared/metadata/video-avatar-channel.component.ts
index 146c440b3..4bfc7bd9d 100644
--- a/client/src/app/+videos/+video-watch/shared/metadata/video-avatar-channel.component.ts
+++ b/client/src/app/+videos/+video-watch/shared/metadata/video-avatar-channel.component.ts
@@ -20,8 +20,4 @@ export class VideoAvatarChannelComponent implements OnInit {
    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/+videos/+video-watch/shared/playlist/video-watch-playlist.component.scss b/client/src/app/+videos/+video-watch/shared/playlist/video-watch-playlist.component.scss
index 75ed9d901..fc67ac65a 100644
--- a/client/src/app/+videos/+video-watch/shared/playlist/video-watch-playlist.component.scss
+++ b/client/src/app/+videos/+video-watch/shared/playlist/video-watch-playlist.component.scss
@@ -4,6 +4,7 @@
 @use '_miniature' as *;
 .playlist {
+  position: relative;
  min-width: 200px;
  max-width: 470px;
  height: 66vh;
diff --git a/client/src/app/+videos/+video-watch/shared/playlist/video-watch-playlist.component.ts b/client/src/app/+videos/+video-watch/shared/playlist/video-watch-playlist.component.ts
index b44238310..879d296a7 100644
--- a/client/src/app/+videos/+video-watch/shared/playlist/video-watch-playlist.component.ts
+++ b/client/src/app/+videos/+video-watch/shared/playlist/video-watch-playlist.component.ts
@@ -1,9 +1,10 @@
 import { Component, EventEmitter, Input, Output } from '@angular/core'
 import { Router } from '@angular/router'
 import { AuthService, ComponentPagination, HooksService, Notifier, SessionStorageService, UserService } from '@app/core'
+import { isInViewport } from '@app/helpers'
 import { VideoPlaylist, VideoPlaylistElement, VideoPlaylistService } from '@app/shared/shared-video-playlist'
-import { peertubeSessionStorage } from '@root-helpers/peertube-web-storage'
 import { getBoolOrDefault } from '@root-helpers/local-storage-utils'
+import { peertubeSessionStorage } from '@root-helpers/peertube-web-storage'
 import { VideoPlaylistPrivacy } from '@shared/models'
 @Component({
@@ -132,7 +133,12 @@ export class VideoWatchPlaylistComponent {
        this.videoFound.emit(playlistElement.video.uuid)
        setTimeout(() => {
-          document.querySelector('.element-' + this.currentPlaylistPosition).scrollIntoView(false)
+          const element = document.querySelector<HTMLElement>('.element-' + this.currentPlaylistPosition)
+          const container = document.querySelector<HTMLElement>('.playlist')
+          if (isInViewport(element, container)) return
+          container.scrollTop = element.offsetTop
        })
        return
diff --git a/client/src/app/+videos/+video-watch/video-watch.component.html b/client/src/app/+videos/+video-watch/video-watch.component.html
index 830215225..4c15ae3d7 100644
--- a/client/src/app/+videos/+video-watch/video-watch.component.html
+++ b/client/src/app/+videos/+video-watch/video-watch.component.html
@@ -11,11 +11,7 @@
      <img class="placeholder-image" *ngIf="playerPlaceholderImgSrc" [src]="playerPlaceholderImgSrc" alt="Placeholder image" i18n-alt>
    </div>
-    <my-video-watch-playlist
+    <my-video-watch-playlist #videoWatchPlaylist [playlist]="playlist" (videoFound)="onPlaylistVideoFound($event)"></my-video-watch-playlist>
-      #videoWatchPlaylist
-      [playlist]="playlist" class="playlist"
-      (videoFound)="onPlaylistVideoFound($event)"
-    ></my-video-watch-playlist>
    <my-plugin-placeholder pluginId="player-next"></my-plugin-placeholder>
  </div>
diff --git a/client/src/app/+videos/video-list/overview/video-overview.component.html b/client/src/app/+videos/video-list/overview/video-overview.component.html
index 1a715560c..f250c2407 100644
--- a/client/src/app/+videos/video-list/overview/video-overview.component.html
+++ b/client/src/app/+videos/video-list/overview/video-overview.component.html
@@ -33,7 +33,7 @@
      <div class="section channel videos" *ngFor="let object of overview.channels">
        <div class="section-title">
          <a [routerLink]="[ '/c', buildVideoChannelBy(object) ]">
-            <my-actor-avatar [channel]="buildVideoChannel(object)"></my-actor-avatar>
+            <my-actor-avatar [channel]="buildVideoChannel(object)" size="28"></my-actor-avatar>
            <h2 class="section-title">{{ object.channel.displayName }}</h2>
          </a>
diff --git a/client/src/app/+videos/video-list/overview/video-overview.component.scss b/client/src/app/+videos/video-list/overview/video-overview.component.scss
index 2239d1913..8b2aa88f2 100644
--- a/client/src/app/+videos/video-list/overview/video-overview.component.scss
+++ b/client/src/app/+videos/video-list/overview/video-overview.component.scss
@@ -52,7 +52,6 @@
        align-items: center;
        my-actor-avatar {
-          @include actor-avatar-size(28px);
          @include margin-right(8px);
          font-size: initial;
diff --git a/client/src/app/app-routing.module.ts b/client/src/app/app-routing.module.ts
index b5afc9c92..cd499845b 100644
--- a/client/src/app/app-routing.module.ts
+++ b/client/src/app/app-routing.module.ts
@@ -143,6 +143,12 @@ const routes: Routes = [
    canActivateChild: [ MetaGuard ]
  },
+  {
+    path: 'video-editor',
+    loadChildren: () => import('./+video-editor/video-editor.module').then(m => m.VideoEditorModule),
+    canActivateChild: [ MetaGuard ]
+  },
  // Matches /@:actorName
  {
    matcher: (url): UrlMatchResult => {
diff --git a/client/src/app/core/users/user.model.ts b/client/src/app/core/users/user.model.ts
index f211051ce..6ba30e4b8 100644
--- a/client/src/app/core/users/user.model.ts
+++ b/client/src/app/core/users/user.model.ts
@@ -132,8 +132,8 @@ export class User implements UserServerModel {
    }
  }
-  updateAccountAvatar (newAccountAvatar?: ActorImage) {
+  updateAccountAvatar (newAccountAvatars?: ActorImage[]) {
-    if (newAccountAvatar) this.account.updateAvatar(newAccountAvatar)
+    if (newAccountAvatars) this.account.updateAvatar(newAccountAvatars)
    else this.account.resetAvatar()
  }
diff --git a/client/src/app/core/users/user.service.ts b/client/src/app/core/users/user.service.ts
index b14bff193..b4024c02d 100644
--- a/client/src/app/core/users/user.service.ts
+++ b/client/src/app/core/users/user.service.ts
@@ -118,7 +118,7 @@ export class UserService {
  changeAvatar (avatarForm: FormData) {
    const url = UserService.BASE_USERS_URL + 'me/avatar/pick'
-    return this.authHttp.post<{ avatar: ActorImage }>(url, avatarForm)
+    return this.authHttp.post<{ avatars: ActorImage[] }>(url, avatarForm)
               .pipe(catchError(err => this.restExtractor.handleError(err)))
  }
diff --git a/client/src/app/helpers/utils/channel.ts b/client/src/app/helpers/utils/channel.ts
index 93863a8af..83f36b70f 100644
--- a/client/src/app/helpers/utils/channel.ts
+++ b/client/src/app/helpers/utils/channel.ts
@@ -1,8 +1,10 @@
+import { minBy } from 'lodash-es'
 import { first, map } from 'rxjs/operators'
 import { SelectChannelItem } from 'src/types/select-options-item.model'
+import { VideoChannel } from '@shared/models'
 import { AuthService } from '../../core/auth'
-function listUserChannels (authService: AuthService) {
+function listUserChannelsForSelect (authService: AuthService) {
  return authService.userInformationLoaded
    .pipe(
      first(),
@@ -23,12 +25,20 @@ function listUserChannels (authService: AuthService) {
            id: c.id,
            label: c.displayName,
            support: c.support,
-            avatarPath: c.avatar?.path
+            avatarPath: getAvatarPath(c)
          }) as SelectChannelItem)
      })
    )
 }
 export {
-  listUserChannels
+  listUserChannelsForSelect
+}
+// ---------------------------------------------------------------------------
+function getAvatarPath (c: VideoChannel) {
+  if (!c.avatars || c.avatars.length === 0) return undefined
+  return minBy(c.avatars, 'width').path
 }
diff --git a/client/src/app/helpers/utils/ui.ts b/client/src/app/helpers/utils/dom.ts
index ac8298926..f65e4d726 100644
--- a/client/src/app/helpers/utils/ui.ts
+++ b/client/src/app/helpers/utils/dom.ts
@@ -6,14 +6,24 @@ function scrollToTop (behavior: 'auto' | 'smooth' = 'auto') {
  })
 }
-function isInViewport (el: HTMLElement) {
+function isInViewport (el: HTMLElement, container: HTMLElement = document.documentElement) {
-  const bounding = el.getBoundingClientRect()
+  const boundingEl = el.getBoundingClientRect()
-  return (
+  const boundingContainer = container.getBoundingClientRect()
-    bounding.top >= 0 &&
-      bounding.left >= 0 &&
+  const relativePos = {
-      bounding.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
+    top: 0,
-      bounding.right <= (window.innerWidth || document.documentElement.clientWidth)
+    left: 0,
-  )
+    bottom: 0,
+    right: 0
+  }
+  relativePos.top = boundingEl.top - boundingContainer.top
+  relativePos.left = boundingEl.left - boundingContainer.left
+  return relativePos.top >= 0 &&
+    relativePos.left >= 0 &&
+    boundingEl.bottom <= boundingContainer.bottom &&
+    boundingEl.right <= boundingContainer.right
 }
 function isXPercentInViewport (el: HTMLElement, percentVisible: number) {
diff --git a/client/src/app/helpers/utils/index.ts b/client/src/app/helpers/utils/index.ts
index dc09c92ab..f821985c9 100644
--- a/client/src/app/helpers/utils/index.ts
+++ b/client/src/app/helpers/utils/index.ts
@@ -2,6 +2,6 @@ export * from './channel'
 export * from './date'
 export * from './html'
 export * from './object'
-export * from './ui'
+export * from './dom'
 export * from './upload'
 export * from './url'
diff --git a/client/src/app/helpers/utils/url.ts b/client/src/app/helpers/utils/url.ts
index b3cded8f4..08c27e3c1 100644
--- a/client/src/app/helpers/utils/url.ts
+++ b/client/src/app/helpers/utils/url.ts
@@ -13,6 +13,10 @@ function getAbsoluteAPIUrl () {
  return absoluteAPIUrl
 }
+function getAPIHost () {
+  return new URL(getAbsoluteAPIUrl()).host
+}
 function getAbsoluteEmbedUrl () {
  let absoluteEmbedUrl = environment.originServerUrl
  if (!absoluteEmbedUrl) {
@@ -52,5 +56,6 @@ function objectToFormData (obj: any, form?: FormData, namespace?: string) {
 export {
  objectToFormData,
  getAbsoluteAPIUrl,
+  getAPIHost,
  getAbsoluteEmbedUrl
 }
diff --git a/client/src/app/modal/account-setup-warning-modal.component.ts b/client/src/app/modal/account-setup-warning-modal.component.ts
index c78de447d..c4cbf92b6 100644
--- a/client/src/app/modal/account-setup-warning-modal.component.ts
+++ b/client/src/app/modal/account-setup-warning-modal.component.ts
@@ -32,7 +32,7 @@ export class AccountSetupWarningModalComponent {
  }
  hasAccountAvatar (user: User) {
-    return !!user.account.avatar
+    return user.account.avatars.length !== 0
  }
  hasAccountDescription (user: User) {
diff --git a/client/src/app/shared/form-validators/video-captions-validators.ts b/client/src/app/shared/form-validators/video-captions-validators.ts
index a16216422..e589fe934 100644
--- a/client/src/app/shared/form-validators/video-captions-validators.ts
+++ b/client/src/app/shared/form-validators/video-captions-validators.ts
@@ -14,3 +14,10 @@ export const VIDEO_CAPTION_FILE_VALIDATOR: BuildFormValidator = {
    required: $localize`Video caption file is required.`
  }
 }
+export const VIDEO_CAPTION_FILE_CONTENT_VALIDATOR: BuildFormValidator = {
+  VALIDATORS: [ Validators.required ],
+  MESSAGES: {
+    required: $localize`Caption content is required.`
+  }
+}
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 07cc73461..f0a27c6e2 100644
--- a/client/src/app/shared/shared-abuse-list/abuse-list-table.component.html
+++ b/client/src/app/shared/shared-abuse-list/abuse-list-table.component.html
@@ -43,7 +43,7 @@
      <td *ngIf="isAdminView()">
        <a *ngIf="abuse.reporterAccount" [href]="abuse.reporterAccount.url" i18n-title title="Open account in a new tab" target="_blank" rel="noopener noreferrer">
          <div class="chip two-lines">
-            <my-actor-avatar [account]="abuse.reporterAccount"></my-actor-avatar>
+            <my-actor-avatar [account]="abuse.reporterAccount" size="32"></my-actor-avatar>
            <div>
              {{ abuse.reporterAccount.displayName }}
              <span>{{ abuse.reporterAccount.nameWithHost }}</span>
diff --git a/client/src/app/shared/shared-actor-image-edit/actor-avatar-edit.component.ts b/client/src/app/shared/shared-actor-image-edit/actor-avatar-edit.component.ts
index 8b7d64ed3..01bb401fb 100644
--- a/client/src/app/shared/shared-actor-image-edit/actor-avatar-edit.component.ts
+++ b/client/src/app/shared/shared-actor-image-edit/actor-avatar-edit.component.ts
@@ -72,7 +72,7 @@ export class ActorAvatarEditComponent implements OnInit {
  }
  hasAvatar () {
-    return !!this.preview || !!this.actor.avatar
+    return !!this.preview || this.actor.avatars.length !== 0
  }
  isChannel () {
diff --git a/client/src/app/shared/shared-actor-image/actor-avatar.component.html b/client/src/app/shared/shared-actor-image/actor-avatar.component.html
index 13a5385a8..c285b6cc3 100644
--- a/client/src/app/shared/shared-actor-image/actor-avatar.component.html
+++ b/client/src/app/shared/shared-actor-image/actor-avatar.component.html
@@ -1,7 +1,7 @@
 <ng-template #img>
  <img *ngIf="previewImage || avatarUrl || !initial" [class]="getClass('avatar')" [src]="previewImage || avatarUrl || defaultAvatarUrl" [alt]="alt" />
-  <div *ngIf="!avatarUrl && initial" [class]="getClass('initial')">
+  <div *ngIf="!avatarUrl && initial" [ngClass]="getClass('initial')">
    <span>{{ initial }}</span>
  </div>
 </ng-template>
diff --git a/client/src/app/shared/shared-actor-image/actor-avatar.component.scss b/client/src/app/shared/shared-actor-image/actor-avatar.component.scss
index a2424b593..68bf74553 100644
--- a/client/src/app/shared/shared-actor-image/actor-avatar.component.scss
+++ b/client/src/app/shared/shared-actor-image/actor-avatar.component.scss
@@ -20,38 +20,23 @@
  }
 }
-.avatar-18 {
+$sizes: '18', '25', '28', '32', '34', '35', '36', '40', '48', '75', '80', '100', '120';
-  --avatarSize: 18px;
-  --initialFontSize: 13px;
-}
-.avatar-25 {
+@each $size in $sizes {
-  --avatarSize: 25px;
+  .avatar-#{$size} {
+    --avatarSize: #{$size}px;
+  }  
 }
-.avatar-32 {
+.avatar-18 {
-  --avatarSize: 32px;
+  --initialFontSize: 13px;
-}
-.avatar-34 {
-  --avatarSize: 34px;
-}
-.avatar-36 {
-  --avatarSize: 36px;
-}
-.avatar-40 {
-  --avatarSize: 40px;
 }
 .avatar-100 {
-  --avatarSize: 100px;
  --initialFontSize: 40px;
 }
 .avatar-120 {
-  --avatarSize: 120px;
  --initialFontSize: 46px;
 }
diff --git a/client/src/app/shared/shared-actor-image/actor-avatar.component.ts b/client/src/app/shared/shared-actor-image/actor-avatar.component.ts
index c323dc724..b2e1ef46e 100644
--- a/client/src/app/shared/shared-actor-image/actor-avatar.component.ts
+++ b/client/src/app/shared/shared-actor-image/actor-avatar.component.ts
@@ -4,11 +4,11 @@ import { Account } from '../shared-main/account/account.model'
 type ActorInput = {
  name: string
-  avatar?: { url?: string, path: string }
+  avatars: { width: number, url?: string, path: string }[]
  url: string
 }
-export type ActorAvatarSize = '18' | '25' | '32' | '34' | '36' | '40' | '100' | '120'
+export type ActorAvatarSize = '18' | '25' | '28' | '32' | '34' | '35' | '36' | '40' | '48' | '75' | '80' | '100' | '120'
 @Component({
  selector: 'my-actor-avatar',
@@ -23,7 +23,7 @@ export class ActorAvatarComponent {
  @Input() previewImage: string
-  @Input() size: ActorAvatarSize
+  @Input() size: ActorAvatarSize = '32'
  // Use an external link
  @Input() href: string
@@ -50,14 +50,13 @@ export class ActorAvatarComponent {
  }
  get defaultAvatarUrl () {
-    if (this.channel) return VideoChannel.GET_DEFAULT_AVATAR_URL()
+    if (this.account) return Account.GET_DEFAULT_AVATAR_URL(+this.size)
+    if (this.channel) return VideoChannel.GET_DEFAULT_AVATAR_URL(+this.size)
-    return Account.GET_DEFAULT_AVATAR_URL()
  }
  get avatarUrl () {
-    if (this.account) return Account.GET_ACTOR_AVATAR_URL(this.account)
+    if (this.account) return Account.GET_ACTOR_AVATAR_URL(this.account, +this.size)
-    if (this.channel) return VideoChannel.GET_ACTOR_AVATAR_URL(this.channel)
+    if (this.channel) return VideoChannel.GET_ACTOR_AVATAR_URL(this.channel, +this.size)
    return ''
  }
@@ -90,9 +89,11 @@ export class ActorAvatarComponent {
  }
  private getColorTheme () {
+    const initialLowercase = this.initial.toLowerCase()
    // Keep consistency with CSS
    const themes = {
-      abc: 'blue',
+      '0123456789abc': 'blue',
      def: 'green',
      ghi: 'purple',
      jkl: 'gray',
@@ -103,7 +104,7 @@ export class ActorAvatarComponent {
    }
    const theme = Object.keys(themes)
-                        .find(chars => chars.includes(this.initial))
+                        .find(chars => chars.includes(initialLowercase))
    return themes[theme]
  }
diff --git a/client/src/app/shared/shared-custom-markup/peertube-custom-tags/channel-miniature-markup.component.html b/client/src/app/shared/shared-custom-markup/peertube-custom-tags/channel-miniature-markup.component.html
index de150aac9..52a402329 100644
--- a/client/src/app/shared/shared-custom-markup/peertube-custom-tags/channel-miniature-markup.component.html
+++ b/client/src/app/shared/shared-custom-markup/peertube-custom-tags/channel-miniature-markup.component.html
@@ -1,7 +1,7 @@
 <div *ngIf="channel" class="channel">
  <div class="channel-avatar-row">
-    <my-actor-avatar [channel]="channel" [internalHref]="getVideoChannelLink()" i18n-title title="See this video channel"></my-actor-avatar>
+    <my-actor-avatar [channel]="channel" [internalHref]="getVideoChannelLink()" i18n-title title="See this video channel" size="75"></my-actor-avatar>
    <h6>
      <a [routerLink]="getVideoChannelLink()" i18n-title title="See this video channel">
diff --git a/client/src/app/shared/shared-custom-markup/peertube-custom-tags/channel-miniature-markup.component.scss b/client/src/app/shared/shared-custom-markup/peertube-custom-tags/channel-miniature-markup.component.scss
index 39e8d2091..e8ef478d9 100644
--- a/client/src/app/shared/shared-custom-markup/peertube-custom-tags/channel-miniature-markup.component.scss
+++ b/client/src/app/shared/shared-custom-markup/peertube-custom-tags/channel-miniature-markup.component.scss
@@ -26,8 +26,6 @@
  }
  my-actor-avatar {
-    @include actor-avatar-size(75px);
    grid-column: 1;
    grid-row: 1 / 4;
  }
diff --git a/client/src/app/shared/shared-forms/form-reactive.ts b/client/src/app/shared/shared-forms/form-reactive.ts
index 07a12c6f6..6b3a6c773 100644
--- a/client/src/app/shared/shared-forms/form-reactive.ts
+++ b/client/src/app/shared/shared-forms/form-reactive.ts
@@ -24,7 +24,7 @@ export abstract class FormReactive {
    this.formErrors = formErrors
    this.validationMessages = validationMessages
-    this.form.statusChanges.subscribe(async status => {
+    this.form.statusChanges.subscribe(async () => {
      // FIXME: remove when https://github.com/angular/angular/issues/41519 is fixed
      await this.waitPendingCheck()
diff --git a/client/src/app/shared/shared-forms/form-validator.service.ts b/client/src/app/shared/shared-forms/form-validator.service.ts
index 0fe50ac9b..f67d5bb33 100644
--- a/client/src/app/shared/shared-forms/form-validator.service.ts
+++ b/client/src/app/shared/shared-forms/form-validator.service.ts
@@ -30,7 +30,7 @@ export class FormValidatorService {
      if (field?.MESSAGES) validationMessages[name] = field.MESSAGES as { [ name: string ]: string }
-      const defaultValue = defaultValues[name] || ''
+      const defaultValue = defaultValues[name] ?? ''
      if (field?.VALIDATORS) group[name] = [ defaultValue, field.VALIDATORS ]
      else group[name] = [ defaultValue ]
diff --git a/client/src/app/shared/shared-forms/select/select-channel.component.ts b/client/src/app/shared/shared-forms/select/select-channel.component.ts
index 40a7c53bb..5fcae0050 100644
--- a/client/src/app/shared/shared-forms/select/select-channel.component.ts
+++ b/client/src/app/shared/shared-forms/select/select-channel.component.ts
@@ -31,7 +31,7 @@ export class SelectChannelComponent implements ControlValueAccessor, OnChanges {
    this.channels = this.items.map(c => {
      const avatarPath = c.avatarPath
        ? c.avatarPath
-        : VideoChannel.GET_DEFAULT_AVATAR_URL()
+        : VideoChannel.GET_DEFAULT_AVATAR_URL(20)
      return Object.assign({}, c, { avatarPath })
    })
diff --git a/client/src/app/shared/shared-forms/timestamp-input.component.html b/client/src/app/shared/shared-forms/timestamp-input.component.html
index c57a4b32c..c89a7b019 100644
--- a/client/src/app/shared/shared-forms/timestamp-input.component.html
+++ b/client/src/app/shared/shared-forms/timestamp-input.component.html
@@ -1,4 +1,5 @@
 <p-inputMask
  [disabled]="disabled" [(ngModel)]="timestampString" (onBlur)="onBlur()"
-  mask="9:99:99" slotChar="0" (ngModelChange)="onModelChange()"
+  [ngClass]="{ 'border-disabled': disableBorder }"
+  mask="9:99:99" slotChar="0" (ngModelChange)="onModelChange()" [inputId]="inputName"
 ></p-inputMask>
diff --git a/client/src/app/shared/shared-forms/timestamp-input.component.scss b/client/src/app/shared/shared-forms/timestamp-input.component.scss
index d2358c027..27d6fa173 100644
--- a/client/src/app/shared/shared-forms/timestamp-input.component.scss
+++ b/client/src/app/shared/shared-forms/timestamp-input.component.scss
@@ -1,10 +1,10 @@
 @use '_variables' as *;
+@use '_mixins' as *;
 p-inputmask {
  ::ng-deep input {
    width: 80px;
    font-size: 15px;
-    border: 0;
    &:focus-within,
    &:focus {
@@ -16,4 +16,16 @@ p-inputmask {
      opacity: 0.5;
    }
  }
+  &.border-disabled {
+    ::ng-deep input {
+      border: 0;
+    }
+  }
+  &:not(.border-disabled) {
+    ::ng-deep input {
+      @include peertube-input-text(80px);
+    }
+  }
 }
diff --git a/client/src/app/shared/shared-forms/timestamp-input.component.ts b/client/src/app/shared/shared-forms/timestamp-input.component.ts
index 3fc705905..79ca63673 100644
--- a/client/src/app/shared/shared-forms/timestamp-input.component.ts
+++ b/client/src/app/shared/shared-forms/timestamp-input.component.ts
@@ -18,6 +18,8 @@ export class TimestampInputComponent implements ControlValueAccessor, OnInit {
  @Input() maxTimestamp: number
  @Input() timestamp: number
  @Input() disabled = false
+  @Input() inputName: string
+  @Input() disableBorder = true
  @Output() inputBlur = new EventEmitter()
diff --git a/client/src/app/shared/shared-instance/instance-statistics.component.html b/client/src/app/shared/shared-instance/instance-statistics.component.html
index 399cf10fe..2ca61fd94 100644
--- a/client/src/app/shared/shared-instance/instance-statistics.component.html
+++ b/client/src/app/shared/shared-instance/instance-statistics.component.html
@@ -1,13 +1,13 @@
 <p i18n *ngIf="null === serverStats">Loading instance statistics...</p>
 <section *ngIf="null !== serverStats">
-  <h3 i18n>Local</h3>
+  <h3 i18n>By users on this instance</h3>
  <div class="row">
    <div class="col-6 col-lg-4 col-xl-3">
      <div class="card stat">
        <div class="card-body">
-          <p class="stat-value">{{ serverStats.totalUsers }}</p>
+          <p class="stat-value">{{ serverStats.totalUsers | number }}</p>
          <p class="stat-label" i18n>users</p>
        </div>
        <i class="glyphicon glyphicon-user icon-bottom"></i>
@@ -17,7 +17,7 @@
    <div class="col-6 col-lg-4 col-xl-3">
      <div class="card stat">
        <div class="card-body">
-          <p class="stat-value">{{ serverStats.totalLocalVideos }}</p>
+          <p class="stat-value">{{ serverStats.totalLocalVideos | number }}</p>
          <p class="stat-label" i18n>videos</p>
        </div>
        <i class="glyphicon glyphicon-facetime-video"></i>
@@ -27,8 +27,8 @@
    <div class="col-6 col-lg-4 col-xl-3">
      <div class="card stat">
        <div class="card-body">
-          <p class="stat-value">{{ serverStats.totalLocalVideoViews }}</p>
+          <p class="stat-value">{{ serverStats.totalLocalVideoViews | number }}</p>
-          <p class="stat-label" i18n>video views</p>
+          <p class="stat-label" i18n>views</p>
        </div>
        <i class="glyphicon glyphicon-eye-open"></i>
      </div>
@@ -37,8 +37,8 @@
    <div class="col-6 col-lg-4 col-xl-3">
      <div class="card stat">
        <div class="card-body">
-          <p class="stat-value">{{ serverStats.totalLocalVideoComments }}</p>
+          <p class="stat-value">{{ serverStats.totalLocalVideoComments | number }}</p>
-          <p class="stat-label" i18n>video comments</p>
+          <p class="stat-label" i18n>comments</p>
        </div>
        <i class="glyphicon glyphicon-comment"></i>
      </div>
@@ -48,20 +48,20 @@
      <div class="card stat">
        <div class="card-body">
          <p class="stat-value">{{ serverStats.totalLocalVideoFilesSize | bytes:1 }}</p>
-          <p class="stat-label" i18n>of hosted video</p>
+          <p class="stat-label" i18n>hosted video</p>
        </div>
        <i class="glyphicon glyphicon-hdd"></i>
      </div>
    </div>
  </div>
-  <h3 i18n>Federation</h3>
+  <h3 i18n>In this instance federation</h3>
  <div class="row">
    <div class="col-6 col-lg-4 col-xl-3">
      <div class="card stat">
        <div class="card-body">
-          <p class="stat-value">{{ serverStats.totalVideos }}</p>
+          <p class="stat-value">{{ serverStats.totalVideos | number }}</p>
          <p class="stat-label" i18n>videos</p>
        </div>
        <i class="glyphicon glyphicon-facetime-video"></i>
@@ -71,8 +71,8 @@
    <div class="col-6 col-lg-4 col-xl-3">
      <div class="card stat">
        <div class="card-body">
-          <p class="stat-value">{{ serverStats.totalVideoComments }}</p>
+          <p class="stat-value">{{ serverStats.totalVideoComments | number }}</p>
-          <p class="stat-label" i18n>video comments</p>
+          <p class="stat-label" i18n>comments</p>
        </div>
        <i class="glyphicon glyphicon-comment"></i>
      </div>
@@ -81,7 +81,7 @@
    <div class="col-6 col-lg-4 col-xl-3">
      <div class="card stat">
        <div class="card-body">
-          <p class="stat-value">{{ serverStats.totalInstanceFollowers }}</p>
+          <p class="stat-value">{{ serverStats.totalInstanceFollowers | number }}</p>
          <p class="stat-label" i18n>followers</p>
        </div>
        <i class="glyphicon glyphicon-retweet"></i>
@@ -91,7 +91,7 @@
    <div class="col-6 col-lg-4 col-xl-3">
      <div class="card stat">
        <div class="card-body">
-          <p class="stat-value">{{ serverStats.totalInstanceFollowing }}</p>
+          <p class="stat-value">{{ serverStats.totalInstanceFollowing | number }}</p>
          <p class="stat-label" i18n>following</p>
        </div>
        <i class="glyphicon glyphicon-retweet"></i>
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 8b78d01a6..a26a9c11c 100644
--- a/client/src/app/shared/shared-main/account/account.model.ts
+++ b/client/src/app/shared/shared-main/account/account.model.ts
@@ -17,11 +17,15 @@ export class Account extends Actor implements ServerAccount {
  userId?: number
-  static GET_ACTOR_AVATAR_URL (actor: { avatar?: { url?: string, path: string } }) {
+  static GET_ACTOR_AVATAR_URL (actor: { avatars: { width: number, url?: string, path: string }[] }, size: number) {
-    return Actor.GET_ACTOR_AVATAR_URL(actor)
+    return Actor.GET_ACTOR_AVATAR_URL(actor, size)
  }
-  static GET_DEFAULT_AVATAR_URL () {
+  static GET_DEFAULT_AVATAR_URL (size: number) {
+    if (size <= 48) {
+      return `${window.location.origin}/client/assets/images/default-avatar-account-48x48.png`
+    }
    return `${window.location.origin}/client/assets/images/default-avatar-account.png`
  }
@@ -42,12 +46,12 @@ export class Account extends Actor implements ServerAccount {
    this.mutedServerByInstance = false
  }
-  updateAvatar (newAvatar: ActorImage) {
+  updateAvatar (newAvatars: ActorImage[]) {
-    this.avatar = newAvatar
+    this.avatars = newAvatars
  }
  resetAvatar () {
-    this.avatar = null
+    this.avatars = []
  }
  updateBlockStatus (blockStatus: BlockStatus) {
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 082f44fb9..bd693860d 100644
--- a/client/src/app/shared/shared-main/account/actor.model.ts
+++ b/client/src/app/shared/shared-main/account/actor.model.ts
@@ -1,4 +1,4 @@
-import { getAbsoluteAPIUrl } from '@app/helpers'
+import { getAbsoluteAPIUrl, getAPIHost } from '@app/helpers'
 import { Actor as ServerActor, ActorImage } from '@shared/models'
 export abstract class Actor implements ServerActor {
@@ -13,25 +13,26 @@ export abstract class Actor implements ServerActor {
  createdAt: Date | string
-  avatar: ActorImage
+  // TODO: remove, deprecated in 4.2
+  avatar: never
+  avatars: ActorImage[]
  isLocal: boolean
-  static GET_ACTOR_AVATAR_URL (actor: { avatar?: { url?: string, path: string } }) {
+  static GET_ACTOR_AVATAR_URL (actor: { avatars: { width: number, url?: string, path: string }[] }, size: number) {
-    if (actor?.avatar?.url) return actor.avatar.url
+    const avatar = actor.avatars.sort((a, b) => a.width - b.width).find(a => a.width >= size)
-    if (actor?.avatar) {
+    if (!avatar) return ''
-      const absoluteAPIUrl = getAbsoluteAPIUrl()
+    if (avatar.url) return avatar.url
-      return absoluteAPIUrl + actor.avatar.path
+    const absoluteAPIUrl = getAbsoluteAPIUrl()
-    }
-    return ''
+    return absoluteAPIUrl + avatar.path
  }
  static CREATE_BY_STRING (accountName: string, host: string, forceHostname = false) {
-    const absoluteAPIUrl = getAbsoluteAPIUrl()
+    const thisHost = getAPIHost()
-    const thisHost = new URL(absoluteAPIUrl).host
    if (host.trim() === thisHost && !forceHostname) return accountName
@@ -39,8 +40,7 @@ export abstract class Actor implements ServerActor {
  }
  static IS_LOCAL (host: string) {
-    const absoluteAPIUrl = getAbsoluteAPIUrl()
+    const thisHost = getAPIHost()
-    const thisHost = new URL(absoluteAPIUrl).host
    return host.trim() === thisHost
  }
@@ -55,7 +55,7 @@ export abstract class Actor implements ServerActor {
    if (hash.createdAt) this.createdAt = new Date(hash.createdAt.toString())
-    this.avatar = hash.avatar
+    this.avatars = hash.avatars
    this.isLocal = Actor.IS_LOCAL(this.host)
  }
 }
diff --git a/client/src/app/shared/shared-main/misc/channels-setup-message.component.ts b/client/src/app/shared/shared-main/misc/channels-setup-message.component.ts
index 702475029..4f9cbc525 100644
--- a/client/src/app/shared/shared-main/misc/channels-setup-message.component.ts
+++ b/client/src/app/shared/shared-main/misc/channels-setup-message.component.ts
@@ -19,7 +19,7 @@ export class ChannelsSetupMessageComponent implements OnInit {
  hasChannelNotConfigured () {
    if (!this.user.videoChannels) return false
-    return this.user.videoChannels.filter((channel: VideoChannel) => (!channel.avatar || !channel.description)).length > 0
+    return this.user.videoChannels.filter((channel: VideoChannel) => (channel.avatars.length === 0 || !channel.description)).length > 0
  }
  ngOnInit () {
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 439547102..1eb69d5a2 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
@@ -254,11 +254,11 @@ export class UserNotification implements UserNotificationServer {
    return [ this.buildVideoUrl(comment.video), { threadId: comment.threadId } ]
  }
-  private setAccountAvatarUrl (actor: { avatarUrl?: string, avatar?: { url?: string, path: string } }) {
+  private setAccountAvatarUrl (actor: { avatarUrl?: string, avatars: { width: number, url?: string, path: string }[] }) {
-    actor.avatarUrl = Account.GET_ACTOR_AVATAR_URL(actor) || Account.GET_DEFAULT_AVATAR_URL()
+    actor.avatarUrl = VideoChannel.GET_ACTOR_AVATAR_URL(actor, 48) || Account.GET_DEFAULT_AVATAR_URL(48)
  }
-  private setVideoChannelAvatarUrl (actor: { avatarUrl?: string, avatar?: { url?: string, path: string } }) {
+  private setVideoChannelAvatarUrl (actor: { avatarUrl?: string, avatars: { width: number, url?: string, path: string }[] }) {
-    actor.avatarUrl = VideoChannel.GET_ACTOR_AVATAR_URL(actor) || VideoChannel.GET_DEFAULT_AVATAR_URL()
+    actor.avatarUrl = VideoChannel.GET_ACTOR_AVATAR_URL(actor, 48) || VideoChannel.GET_DEFAULT_AVATAR_URL(48)
  }
 }
diff --git a/client/src/app/shared/shared-main/video-caption/video-caption-edit.model.ts b/client/src/app/shared/shared-main/video-caption/video-caption-edit.model.ts
index 732f20158..129e80bc0 100644
--- a/client/src/app/shared/shared-main/video-caption/video-caption-edit.model.ts
+++ b/client/src/app/shared/shared-main/video-caption/video-caption-edit.model.ts
@@ -4,6 +4,8 @@ export interface VideoCaptionEdit {
    label?: string
  }
-  action?: 'CREATE' | 'REMOVE'
+  action?: 'CREATE' | 'REMOVE' | 'UPDATE'
  captionfile?: any
 }
+export type VideoCaptionWithPathEdit = VideoCaptionEdit & { captionPath?: string }
diff --git a/client/src/app/shared/shared-main/video-caption/video-caption.service.ts b/client/src/app/shared/shared-main/video-caption/video-caption.service.ts
index 97b79d842..00ebe5bc6 100644
--- a/client/src/app/shared/shared-main/video-caption/video-caption.service.ts
+++ b/client/src/app/shared/shared-main/video-caption/video-caption.service.ts
@@ -7,6 +7,7 @@ import { objectToFormData, sortBy } from '@app/helpers'
 import { VideoService } from '@app/shared/shared-main/video'
 import { peertubeTranslate } from '@shared/core-utils/i18n'
 import { ResultList, VideoCaption } from '@shared/models'
+import { environment } from '../../../../environments/environment'
 import { VideoCaptionEdit } from './video-caption-edit.model'
 @Injectable()
@@ -57,7 +58,7 @@ export class VideoCaptionService {
    let obs: Observable<any> = of(undefined)
    for (const videoCaption of videoCaptions) {
-      if (videoCaption.action === 'CREATE') {
+      if (videoCaption.action === 'CREATE' || videoCaption.action === 'UPDATE') {
        obs = obs.pipe(switchMap(() => this.addCaption(videoId, videoCaption.language.id, videoCaption.captionfile)))
      } else if (videoCaption.action === 'REMOVE') {
        obs = obs.pipe(switchMap(() => this.removeCaption(videoId, videoCaption.language.id)))
@@ -66,4 +67,8 @@ export class VideoCaptionService {
    return obs
  }
+  getCaptionContent ({ captionPath }: Pick<VideoCaption, 'captionPath'>) {
+    return this.authHttp.get(environment.originServerUrl + captionPath, { responseType: 'text' })
+  }
 }
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 ac2679b42..e22b0cfd0 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
@@ -12,7 +12,11 @@ export class VideoChannel extends Actor implements ServerVideoChannel {
  nameWithHost: string
  nameWithHostForced: string
-  banner: ActorImage
+  // TODO: remove, deprecated in 4.2
+  banner: never
+  banners: ActorImage[]
  bannerUrl: string
  updatedAt: Date | string
@@ -24,23 +28,25 @@ export class VideoChannel extends Actor implements ServerVideoChannel {
  viewsPerDay?: ViewsPerDate[]
-  static GET_ACTOR_AVATAR_URL (actor: { avatar?: { url?: string, path: string } }) {
+  static GET_ACTOR_AVATAR_URL (actor: { avatars: { width: number, url?: string, path: string }[] }, size: number) {
-    return Actor.GET_ACTOR_AVATAR_URL(actor)
+    return Actor.GET_ACTOR_AVATAR_URL(actor, size)
  }
  static GET_ACTOR_BANNER_URL (channel: ServerVideoChannel) {
-    if (channel?.banner?.url) return channel.banner.url
+    if (!channel) return ''
-    if (channel?.banner) {
-      const absoluteAPIUrl = getAbsoluteAPIUrl()
-      return absoluteAPIUrl + channel.banner.path
+    const banner = channel.banners[0]
-    }
+    if (!banner) return ''
-    return ''
+    if (banner.url) return banner.url
+    return getAbsoluteAPIUrl() + banner.path
  }
-  static GET_DEFAULT_AVATAR_URL () {
+  static GET_DEFAULT_AVATAR_URL (size: number) {
+    if (size <= 48) {
+      return `${window.location.origin}/client/assets/images/default-avatar-video-channel-48x48.png`
+    }
    return `${window.location.origin}/client/assets/images/default-avatar-video-channel.png`
  }
@@ -51,7 +57,7 @@ export class VideoChannel extends Actor implements ServerVideoChannel {
    this.description = hash.description
    this.support = hash.support
-    this.banner = hash.banner
+    this.banners = hash.banners
    this.isLocal = hash.isLocal
@@ -74,24 +80,24 @@ export class VideoChannel extends Actor implements ServerVideoChannel {
    this.updateComputedAttributes()
  }
-  updateAvatar (newAvatar: ActorImage) {
+  updateAvatar (newAvatars: ActorImage[]) {
-    this.avatar = newAvatar
+    this.avatars = newAvatars
    this.updateComputedAttributes()
  }
  resetAvatar () {
-    this.updateAvatar(null)
+    this.updateAvatar([])
  }
-  updateBanner (newBanner: ActorImage) {
+  updateBanner (newBanners: ActorImage[]) {
-    this.banner = newBanner
+    this.banners = newBanners
    this.updateComputedAttributes()
  }
  resetBanner () {
-    this.updateBanner(null)
+    this.updateBanner([])
  }
  updateComputedAttributes () {
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 f37f13c51..480d250fb 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
@@ -80,7 +80,7 @@ export class VideoChannelService {
  changeVideoChannelImage (videoChannelName: string, avatarForm: FormData, type: 'avatar' | 'banner') {
    const url = VideoChannelService.BASE_VIDEO_CHANNEL_URL + videoChannelName + '/' + type + '/pick'
-    return this.authHttp.post<{ avatar?: ActorImage, banner?: ActorImage }>(url, avatarForm)
+    return this.authHttp.post<{ avatars?: ActorImage[], banners?: ActorImage[] }>(url, avatarForm)
               .pipe(catchError(err => this.restExtractor.handleError(err)))
  }
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 fe5643688..8e275181c 100644
--- a/client/src/app/shared/shared-main/video/video.model.ts
+++ b/client/src/app/shared/shared-main/video/video.model.ts
@@ -84,7 +84,11 @@ export class Video implements VideoServerModel {
    displayName: string
    url: string
    host: string
-    avatar?: ActorImage
+    // TODO: remove, deprecated in 4.2
+    avatar: ActorImage
+    avatars: ActorImage[]
  }
  channel: {
@@ -93,7 +97,11 @@ export class Video implements VideoServerModel {
    displayName: string
    url: string
    host: string
-    avatar?: ActorImage
+    // TODO: remove, deprecated in 4.2
+    avatar: ActorImage
+    avatars: ActorImage[]
  }
  userHistory?: {
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 637abcb51..0143194e9 100644
--- a/client/src/app/shared/shared-moderation/account-blocklist.component.html
+++ b/client/src/app/shared/shared-moderation/account-blocklist.component.html
@@ -33,7 +33,7 @@
      <td>
        <a [href]="accountBlock.blockedAccount.url" i18n-title title="Open account in a new tab" target="_blank" rel="noopener noreferrer">
          <div class="chip two-lines">
-            <my-actor-avatar [account]="accountBlock.blockedAccount"></my-actor-avatar>
+            <my-actor-avatar [account]="accountBlock.blockedAccount" size="32"></my-actor-avatar>
            <div>
              {{ accountBlock.blockedAccount.displayName }}
              <span class="text-muted">{{ accountBlock.blockedAccount.nameWithHost }}</span>
diff --git a/client/src/app/shared/shared-moderation/blocklist.service.ts b/client/src/app/shared/shared-moderation/blocklist.service.ts
index f4836c6c4..3e92c2831 100644
--- a/client/src/app/shared/shared-moderation/blocklist.service.ts
+++ b/client/src/app/shared/shared-moderation/blocklist.service.ts
@@ -1,5 +1,6 @@
 import { SortMeta } from 'primeng/api'
-import { catchError, map } from 'rxjs/operators'
+import { from } from 'rxjs'
+import { catchError, concatMap, map, toArray } from 'rxjs/operators'
 import { HttpClient, HttpParams } from '@angular/common/http'
 import { Injectable } from '@angular/core'
 import { RestExtractor, RestPagination, RestService } from '@app/core'
@@ -120,11 +121,15 @@ export class BlocklistService {
               )
  }
-  blockAccountByInstance (account: Pick<Account, 'nameWithHost'>) {
+  blockAccountByInstance (accountsArg: Pick<Account, 'nameWithHost'> | Pick<Account, 'nameWithHost'>[]) {
-    const body = { accountName: account.nameWithHost }
+    const accounts = Array.isArray(accountsArg) ? accountsArg : [ accountsArg ]
-    return this.authHttp.post(BlocklistService.BASE_SERVER_BLOCKLIST_URL + '/accounts', body)
+    return from(accounts)
-               .pipe(catchError(err => this.restExtractor.handleError(err)))
+      .pipe(
+        concatMap(a => this.authHttp.post(BlocklistService.BASE_SERVER_BLOCKLIST_URL + '/accounts', { accountName: a.nameWithHost })),
+        toArray(),
+        catchError(err => this.restExtractor.handleError(err))
+      )
  }
  unblockAccountByInstance (account: Pick<Account, 'nameWithHost'>) {
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 b41ae230d..2b6726bdc 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
@@ -1,11 +1,15 @@
 <ng-template #modal>
  <div class="modal-header">
-    <h4 i18n class="modal-title">Ban</h4>
+    <h4 i18n class="modal-title">{{ getModalTitle() }}</h4>
    <my-global-icon iconName="cross" aria-label="Close" role="button" (click)="hide()"></my-global-icon>
  </div>
  <div class="modal-body">
+    <div class="description" i18n>
+      A banned user will no longer be able to login.
+    </div>
    <form novalidate [formGroup]="form" (ngSubmit)="banUser()">
      <div class="form-group">
        <textarea
@@ -17,8 +21,12 @@
        </div>
      </div>
-      <div i18n>
+      <div class="form-group">
-        A banned user will no longer be able to login.
+        <my-peertube-checkbox
+          inputName="banMute" formControlName="mute"
+          i18n-labelText labelText="Mute to also hide videos/comments"
+        >
+        </my-peertube-checkbox>
      </div>
      <div class="form-group inputs">
@@ -27,7 +35,7 @@
          (click)="hide()" (key.enter)="hide()"
        >
-        <input type="submit" i18n-value [value]="modalMessage" class="peertube-button orange-button" [disabled]="!form.valid" />
+        <input type="submit" i18n-value [value]="getModalTitle()" class="peertube-button orange-button" [disabled]="!form.valid" />
      </div>
    </form>
  </div>
diff --git a/client/src/app/shared/shared-moderation/user-ban-modal.component.scss b/client/src/app/shared/shared-moderation/user-ban-modal.component.scss
index 08e072d8f..2c46c3d03 100644
--- a/client/src/app/shared/shared-moderation/user-ban-modal.component.scss
+++ b/client/src/app/shared/shared-moderation/user-ban-modal.component.scss
@@ -1,6 +1,11 @@
 @use '_variables' as *;
 @use '_mixins' as *;
+.description {
+  font-size: 15px;
+  margin-bottom: 15px;
+}
 textarea {
  @include peertube-textarea(100%, 60px);
 }
diff --git a/client/src/app/shared/shared-moderation/user-ban-modal.component.ts b/client/src/app/shared/shared-moderation/user-ban-modal.component.ts
index 17cad18ec..9edfac388 100644
--- a/client/src/app/shared/shared-moderation/user-ban-modal.component.ts
+++ b/client/src/app/shared/shared-moderation/user-ban-modal.component.ts
@@ -1,3 +1,4 @@
+import { forkJoin } from 'rxjs'
 import { Component, EventEmitter, OnInit, Output, ViewChild } from '@angular/core'
 import { Notifier } from '@app/core'
 import { FormReactive, FormValidatorService } from '@app/shared/shared-forms'
@@ -5,7 +6,9 @@ import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
 import { NgbModalRef } from '@ng-bootstrap/ng-bootstrap/modal/modal-ref'
 import { User } from '@shared/models'
 import { USER_BAN_REASON_VALIDATOR } from '../form-validators/user-validators'
+import { Account } from '../shared-main'
 import { UserAdminService } from '../shared-users'
+import { BlocklistService } from './blocklist.service'
 @Component({
  selector: 'my-user-ban-modal',
@@ -24,23 +27,22 @@ export class UserBanModalComponent extends FormReactive implements OnInit {
    protected formValidatorService: FormValidatorService,
    private modalService: NgbModal,
    private notifier: Notifier,
-    private userAdminService: UserAdminService
+    private userAdminService: UserAdminService,
+    private blocklistService: BlocklistService
  ) {
    super()
  }
  ngOnInit () {
    this.buildForm({
-      reason: USER_BAN_REASON_VALIDATOR
+      reason: USER_BAN_REASON_VALIDATOR,
+      mute: null
    })
  }
  openModal (user: User | User[]) {
    this.usersToBan = user
    this.openedModal = this.modalService.open(this.modal, { centered: true })
-    const isSingleUser = !(Array.isArray(this.usersToBan) && this.usersToBan.length > 1)
-    this.modalMessage = isSingleUser ? $localize`Ban this user` : $localize`Ban these users`
  }
  hide () {
@@ -50,8 +52,15 @@ export class UserBanModalComponent extends FormReactive implements OnInit {
  banUser () {
    const reason = this.form.value['reason'] || undefined
+    const mute = this.form.value['mute']
+    const observables = [
+      this.userAdminService.banUsers(this.usersToBan, reason)
+    ]
+    if (mute) observables.push(this.muteAccounts())
-    this.userAdminService.banUsers(this.usersToBan, reason)
+    forkJoin(observables)
      .subscribe({
        next: () => {
          const message = Array.isArray(this.usersToBan)
@@ -61,6 +70,7 @@ export class UserBanModalComponent extends FormReactive implements OnInit {
          this.notifier.success(message)
          this.userBanned.emit(this.usersToBan)
          this.hide()
        },
@@ -68,4 +78,17 @@ export class UserBanModalComponent extends FormReactive implements OnInit {
      })
  }
+  getModalTitle () {
+    if (Array.isArray(this.usersToBan)) return $localize`Ban ${this.usersToBan.length} users`
+    return $localize`Ban "${this.usersToBan.username}"`
+  }
+  private muteAccounts () {
+    const accounts = Array.isArray(this.usersToBan)
+      ? this.usersToBan.map(u => new Account(u.account))
+      : new Account(this.usersToBan.account)
+    return this.blocklistService.blockAccountByInstance(accounts)
+  }
 }
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 0d19565ef..787318c2c 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
@@ -7,6 +7,16 @@ import { BlocklistService } from './blocklist.service'
 import { BulkService } from './bulk.service'
 import { UserBanModalComponent } from './user-ban-modal.component'
+export type AccountMutedStatus =
+  Pick<Account, 'id' | 'nameWithHost' | 'host' | 'userId' |
+  'mutedByInstance' | 'mutedByUser' | 'mutedServerByInstance' | 'mutedServerByUser'>
+export type UserModerationDisplayType = {
+  myAccount?: boolean
+  instanceAccount?: boolean
+  instanceUser?: boolean
+}
 @Component({
  selector: 'my-user-moderation-dropdown',
  templateUrl: './user-moderation-dropdown.component.html'
@@ -15,8 +25,8 @@ export class UserModerationDropdownComponent implements OnInit, OnChanges {
  @ViewChild('userBanModal') userBanModal: UserBanModalComponent
  @Input() user: User
-  @Input() account: Account
+  @Input() account: AccountMutedStatus
-  @Input() prependActions: DropdownAction<{ user: User, account: Account }>[]
+  @Input() prependActions: DropdownAction<{ user: User, account: AccountMutedStatus }>[]
  @Input() buttonSize: 'normal' | 'small' = 'normal'
  @Input() buttonStyled = true
@@ -24,10 +34,16 @@ export class UserModerationDropdownComponent implements OnInit, OnChanges {
  @Input() label: string
  @Input() container: 'body' | undefined = undefined
+  @Input() displayOptions: UserModerationDisplayType = {
+    myAccount: true,
+    instanceAccount: true,
+    instanceUser: true
+  }
  @Output() userChanged = new EventEmitter()
  @Output() userDeleted = new EventEmitter()
-  userActions: DropdownAction<{ user: User, account: Account }>[][] = []
+  userActions: DropdownAction<{ user: User, account: AccountMutedStatus }>[][] = []
  requiresEmailVerification = false
@@ -111,7 +127,7 @@ export class UserModerationDropdownComponent implements OnInit, OnChanges {
      })
  }
-  blockAccountByUser (account: Account) {
+  blockAccountByUser (account: AccountMutedStatus) {
    this.blocklistService.blockAccountByUser(account)
        .subscribe({
          next: () => {
@@ -125,7 +141,7 @@ export class UserModerationDropdownComponent implements OnInit, OnChanges {
        })
  }
-  unblockAccountByUser (account: Account) {
+  unblockAccountByUser (account: AccountMutedStatus) {
    this.blocklistService.unblockAccountByUser(account)
        .subscribe({
          next: () => {
@@ -167,7 +183,7 @@ export class UserModerationDropdownComponent implements OnInit, OnChanges {
        })
  }
-  blockAccountByInstance (account: Account) {
+  blockAccountByInstance (account: AccountMutedStatus) {
    this.blocklistService.blockAccountByInstance(account)
        .subscribe({
          next: () => {
@@ -181,7 +197,7 @@ export class UserModerationDropdownComponent implements OnInit, OnChanges {
        })
  }
-  unblockAccountByInstance (account: Account) {
+  unblockAccountByInstance (account: AccountMutedStatus) {
    this.blocklistService.unblockAccountByInstance(account)
        .subscribe({
          next: () => {
@@ -246,7 +262,7 @@ export class UserModerationDropdownComponent implements OnInit, OnChanges {
    return user && this.authService.getUser().id === user.id
  }
-  private isMyAccount (account: Account) {
+  private isMyAccount (account: AccountMutedStatus) {
    return account && this.authService.getUser().account.id === account.id
  }
@@ -267,9 +283,9 @@ export class UserModerationDropdownComponent implements OnInit, OnChanges {
  }
  private buildMyAccountModerationActions () {
-    if (!this.account || !this.authService.isLoggedIn()) return []
+    if (!this.account || !this.displayOptions.myAccount || !this.authService.isLoggedIn()) return []
-    const myAccountActions: DropdownAction<{ user: User, account: Account }>[] = [
+    const myAccountActions: DropdownAction<{ user: User, account: AccountMutedStatus }>[] = [
      {
        label: $localize`My account moderation`,
        class: [ 'red' ],
@@ -315,9 +331,9 @@ export class UserModerationDropdownComponent implements OnInit, OnChanges {
    const authUser = this.authService.getUser()
-    let instanceActions: DropdownAction<{ user: User, account: Account }>[] = []
+    let instanceActions: DropdownAction<{ user: User, account: AccountMutedStatus }>[] = []
-    if (this.user && authUser.hasRight(UserRight.MANAGE_USERS) && authUser.canManage(this.user)) {
+    if (this.user && this.displayOptions.instanceUser && authUser.hasRight(UserRight.MANAGE_USERS) && authUser.canManage(this.user)) {
      instanceActions = instanceActions.concat([
        {
          label: $localize`Edit user`,
@@ -351,7 +367,7 @@ export class UserModerationDropdownComponent implements OnInit, OnChanges {
    }
    // Instance actions on account blocklists
-    if (this.account && authUser.hasRight(UserRight.MANAGE_ACCOUNTS_BLOCKLIST)) {
+    if (this.account && this.displayOptions.instanceAccount && authUser.hasRight(UserRight.MANAGE_ACCOUNTS_BLOCKLIST)) {
      instanceActions = instanceActions.concat([
        {
          label: $localize`Mute this account`,
@@ -369,7 +385,7 @@ export class UserModerationDropdownComponent implements OnInit, OnChanges {
    }
    // Instance actions on server blocklists
-    if (this.account && authUser.hasRight(UserRight.MANAGE_SERVERS_BLOCKLIST)) {
+    if (this.account && this.displayOptions.instanceAccount && authUser.hasRight(UserRight.MANAGE_SERVERS_BLOCKLIST)) {
      instanceActions = instanceActions.concat([
        {
          label: $localize`Mute the instance`,
@@ -386,7 +402,7 @@ export class UserModerationDropdownComponent implements OnInit, OnChanges {
      ])
    }
-    if (this.account && authUser.hasRight(UserRight.REMOVE_ANY_VIDEO_COMMENT)) {
+    if (this.account && this.displayOptions.instanceAccount && authUser.hasRight(UserRight.REMOVE_ANY_VIDEO_COMMENT)) {
      instanceActions = instanceActions.concat([
        {
          label: $localize`Remove comments from your instance`,
diff --git a/client/src/app/shared/shared-user-settings/user-video-settings.component.html b/client/src/app/shared/shared-user-settings/user-video-settings.component.html
index 4843f65b9..446ade445 100644
--- a/client/src/app/shared/shared-user-settings/user-video-settings.component.html
+++ b/client/src/app/shared/shared-user-settings/user-video-settings.component.html
@@ -42,7 +42,7 @@
      i18n-labelText labelText="Help share videos being played"
    >
      <ng-container ngProjectAs="description">
-        <span i18n>The <a routerLink="/about/peertube" fragment="privacy">sharing system</a> implies that some technical information about your system (such as a public IP address) can be sent to other peers, but greatly helps to reduce server load.</span>
+        <span i18n>The <a routerLink="/about/peertube" fragment="privacy" target="_blank">sharing system</a> implies that some technical information about your system (such as a public IP address) can be sent to other peers, but greatly helps to reduce server load.</span>
      </ng-container>
    </my-peertube-checkbox>
  </div>
diff --git a/client/src/app/shared/shared-video-miniature/video-actions-dropdown.component.ts b/client/src/app/shared/shared-video-miniature/video-actions-dropdown.component.ts
index c2a318285..abbfc63f8 100644
--- a/client/src/app/shared/shared-video-miniature/video-actions-dropdown.component.ts
+++ b/client/src/app/shared/shared-video-miniature/video-actions-dropdown.component.ts
@@ -1,8 +1,8 @@
 import { Component, EventEmitter, Input, OnChanges, Output, ViewChild } from '@angular/core'
-import { AuthService, ConfirmService, Notifier, ScreenService } from '@app/core'
+import { AuthService, ConfirmService, Notifier, ScreenService, ServerService } from '@app/core'
 import { BlocklistService, VideoBlockComponent, VideoBlockService, VideoReportComponent } from '@app/shared/shared-moderation'
 import { NgbDropdown } from '@ng-bootstrap/ng-bootstrap'
-import { VideoCaption } from '@shared/models'
+import { VideoCaption, VideoState } from '@shared/models'
 import {
  Actor,
  DropdownAction,
@@ -29,6 +29,7 @@ export type VideoActionsDisplayType = {
  liveInfo?: boolean
  removeFiles?: boolean
  transcoding?: boolean
+  editor?: boolean
 }
 @Component({
@@ -59,7 +60,8 @@ export class VideoActionsDropdownComponent implements OnChanges {
    mute: true,
    liveInfo: false,
    removeFiles: false,
-    transcoding: false
+    transcoding: false,
+    editor: true
  }
  @Input() placement = 'left'
@@ -89,7 +91,8 @@ export class VideoActionsDropdownComponent implements OnChanges {
    private videoBlocklistService: VideoBlockService,
    private screenService: ScreenService,
    private videoService: VideoService,
-    private redundancyService: RedundancyService
+    private redundancyService: RedundancyService,
+    private serverService: ServerService
  ) { }
  get user () {
@@ -149,6 +152,12 @@ export class VideoActionsDropdownComponent implements OnChanges {
    return this.video.isUpdatableBy(this.user)
  }
+  isVideoEditable () {
+    return this.serverService.getHTMLConfig().videoEditor.enabled &&
+      this.video.state?.id === VideoState.PUBLISHED &&
+      this.video.isUpdatableBy(this.user)
+  }
  isVideoRemovable () {
    return this.video.isRemovableBy(this.user)
  }
@@ -330,6 +339,12 @@ export class VideoActionsDropdownComponent implements OnChanges {
          isDisplayed: () => this.authService.isLoggedIn() && this.displayOptions.update && this.isVideoUpdatable()
        },
        {
+          label: $localize`Editor`,
+          linkBuilder: ({ video }) => [ '/video-editor/edit', video.uuid ],
+          iconName: 'film',
+          isDisplayed: () => this.authService.isLoggedIn() && this.displayOptions.editor && this.isVideoEditable()
+        },
+        {
          label: $localize`Block`,
          handler: () => this.showBlockModal(),
          iconName: 'no',
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 30483831a..3cf128de0 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
@@ -13,11 +13,13 @@
        <my-actor-avatar
          *ngIf="displayOptions.avatar && displayOwnerVideoChannel() && !displayAsRow" [title]="channelLinkTitle"
          [channel]="video.channel" [size]="actorImageSize" [internalHref]="[ '/c', video.byVideoChannel ]"
+          size="32"
        ></my-actor-avatar>
        <my-actor-avatar
          *ngIf="displayOptions.avatar && displayOwnerAccount() && !displayAsRow" [title]="channelLinkTitle"
          [account]="video.account" [size]="actorImageSize" [internalHref]="[ '/c', video.byVideoChannel ]"
+          size="32"
        ></my-actor-avatar>
        <div class="w-100 d-flex flex-column">
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 847e401ed..7de9fc8e2 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
@@ -195,6 +195,10 @@ export class VideoMiniatureComponent implements OnInit {
      return $localize`To import`
    }
+    if (video.state.id === VideoState.TO_EDIT) {
+      return $localize`To edit`
+    }
    return ''
  }