37 files changed, 492 insertions, 350 deletions

diff --git a/client/.stylelintrc.json b/client/.stylelintrc.json
index 25f0b1002..6a322da62 100644
--- a/client/.stylelintrc.json
+++ b/client/.stylelintrc.json
@@ -24,6 +24,12 @@
     "rule-empty-line-before": null,
     "selector-max-id": null,
     "scss/at-function-pattern": null,
-    "function-parentheses-space-inside": "never-single-line"
+    "function-parentheses-space-inside": "never-single-line",
+    "property-no-vendor-prefix": [
+      true,
+      {
+        "ignoreProperties": [ "mask-image" ]
+      }
+    ]
   }
 }
diff --git a/client/e2e/src/po/video-upload.po.ts b/client/e2e/src/po/video-upload.po.ts
index 942025b6b..ad2acee7f 100644
--- a/client/e2e/src/po/video-upload.po.ts
+++ b/client/e2e/src/po/video-upload.po.ts
@@ -26,7 +26,12 @@ export class VideoUploadPage {
     await elem.sendKeys(fileToUpload)
 
     // Wait for the upload to finish
-    await browser.wait(browser.ExpectedConditions.elementToBeClickable(this.getSecondStepSubmitButton()))
+    await browser.wait(async () => {
+      const actionButton = this.getSecondStepSubmitButton().element(by.css('.action-button'))
+
+      const klass = await actionButton.getAttribute('class')
+      return !klass.includes('disabled')
+    })
   }
 
   async validSecondUploadStep (videoName: string) {
diff --git a/client/package.json b/client/package.json
index 140fc3095..8486ace22 100644
--- a/client/package.json
+++ b/client/package.json
@@ -96,6 +96,7 @@
     "lodash-es": "^4.17.4",
     "markdown-it": "12.0.4",
     "mini-css-extract-plugin": "^1.3.1",
+    "ngx-uploadx": "^4.1.0",
     "p2p-media-loader-hlsjs": "^0.6.2",
     "path-browserify": "^1.0.0",
     "primeng": "^11.0.0-rc.1",
diff --git a/client/src/app/+about/about-follows/about-follows.component.html b/client/src/app/+about/about-follows/about-follows.component.html
index f81465f88..6bc1d0448 100644
--- a/client/src/app/+about/about-follows/about-follows.component.html
+++ b/client/src/app/+about/about-follows/about-follows.component.html
@@ -9,7 +9,7 @@
       {{ follower}}
     </a>
 
-    <button i18n class="showMore" *ngIf="!loadedAllFollowers && canLoadMoreFollowers()" (click)="loadAllFollowers()">Show full list</button>
+    <button i18n class="show-more" *ngIf="!loadedAllFollowers && canLoadMoreFollowers()" (click)="loadAllFollowers()">Show full list</button>
   </div>
 
   <div class="col-xl-6 col-md-12">
diff --git a/client/src/app/+accounts/account-video-channels/account-video-channels.component.ts b/client/src/app/+accounts/account-video-channels/account-video-channels.component.ts
index 0628c7a96..7e916e122 100644
--- a/client/src/app/+accounts/account-video-channels/account-video-channels.component.ts
+++ b/client/src/app/+accounts/account-video-channels/account-video-channels.component.ts
@@ -79,7 +79,13 @@ export class AccountVideoChannelsComponent implements OnInit, OnDestroy {
   }
 
   loadMoreChannels () {
-    this.videoChannelService.listAccountVideoChannels(this.account, this.channelPagination)
+    const options = {
+      account: this.account,
+      componentPagination: this.channelPagination,
+      sort: '-updatedAt'
+    }
+
+    this.videoChannelService.listAccountVideoChannels(options)
       .pipe(
         tap(res => this.channelPagination.totalItems = res.total),
         switchMap(res => from(res.data)),
diff --git a/client/src/app/+accounts/accounts.component.ts b/client/src/app/+accounts/accounts.component.ts
index fbd7380a9..c69b04a01 100644
--- a/client/src/app/+accounts/accounts.component.ts
+++ b/client/src/app/+accounts/accounts.component.ts
@@ -66,7 +66,7 @@ export class AccountsComponent implements OnInit, OnDestroy {
                           distinctUntilChanged(),
                           switchMap(accountId => this.accountService.getAccount(accountId)),
                           tap(account => this.onAccount(account)),
-                          switchMap(account => this.videoChannelService.listAccountVideoChannels(account)),
+                          switchMap(account => this.videoChannelService.listAccountVideoChannels({ account })),
                           catchError(err => this.restExtractor.redirectTo404IfNotFound(err, 'other', [
                             HttpStatusCode.BAD_REQUEST_400,
                             HttpStatusCode.NOT_FOUND_404
diff --git a/client/src/app/+admin/plugins/plugin-search/plugin-search.component.html b/client/src/app/+admin/plugins/plugin-search/plugin-search.component.html
index 6900e8717..8d8f12c48 100644
--- a/client/src/app/+admin/plugins/plugin-search/plugin-search.component.html
+++ b/client/src/app/+admin/plugins/plugin-search/plugin-search.component.html
@@ -20,7 +20,7 @@
     <my-global-icon iconName="search"></my-global-icon>
 
     <ng-container i18n>
-      {{ pagination.totalItems }} {pagination.totalItems, plural, =1 {result} other {results}} for {{ search }}"
+      {{ pagination.totalItems }} {pagination.totalItems, plural, =1 {result} other {results}} for "{{ search }}"
     </ng-container>
   </ng-container>
 </div>
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 c16368952..a0f2f28f8 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
@@ -2,7 +2,7 @@ import { ViewportScroller } from '@angular/common'
 import { HttpErrorResponse } from '@angular/common/http'
 import { AfterViewChecked, Component, OnInit } from '@angular/core'
 import { AuthService, Notifier, User, UserService } from '@app/core'
-import { uploadErrorHandler } from '@app/helpers'
+import { genericUploadErrorHandler } from '@app/helpers'
 
 @Component({
   selector: 'my-account-settings',
@@ -46,7 +46,7 @@ export class MyAccountSettingsComponent implements OnInit, AfterViewChecked {
           this.user.updateAccountAvatar(data.avatar)
         },
 
-        (err: HttpErrorResponse) => uploadErrorHandler({
+        (err: HttpErrorResponse) => genericUploadErrorHandler({
           err,
           name: $localize`avatar`,
           notifier: this.notifier
diff --git a/client/src/app/+my-library/+my-video-channels/my-video-channel-update.component.ts b/client/src/app/+my-library/+my-video-channels/my-video-channel-update.component.ts
index a29af176c..c9173039a 100644
--- a/client/src/app/+my-library/+my-video-channels/my-video-channel-update.component.ts
+++ b/client/src/app/+my-library/+my-video-channels/my-video-channel-update.component.ts
@@ -3,7 +3,7 @@ import { HttpErrorResponse } from '@angular/common/http'
 import { Component, OnDestroy, OnInit } from '@angular/core'
 import { ActivatedRoute, Router } from '@angular/router'
 import { AuthService, Notifier, ServerService } from '@app/core'
-import { uploadErrorHandler } from '@app/helpers'
+import { genericUploadErrorHandler } from '@app/helpers'
 import {
   VIDEO_CHANNEL_DESCRIPTION_VALIDATOR,
   VIDEO_CHANNEL_DISPLAY_NAME_VALIDATOR,
@@ -109,7 +109,7 @@ export class MyVideoChannelUpdateComponent extends MyVideoChannelEdit implements
             this.videoChannel.updateAvatar(data.avatar)
           },
 
-          (err: HttpErrorResponse) => uploadErrorHandler({
+          (err: HttpErrorResponse) => genericUploadErrorHandler({
             err,
             name: $localize`avatar`,
             notifier: this.notifier
@@ -139,7 +139,7 @@ export class MyVideoChannelUpdateComponent extends MyVideoChannelEdit implements
             this.videoChannel.updateBanner(data.banner)
           },
 
-          (err: HttpErrorResponse) => uploadErrorHandler({
+          (err: HttpErrorResponse) => genericUploadErrorHandler({
             err,
             name: $localize`banner`,
             notifier: this.notifier
diff --git a/client/src/app/+my-library/+my-video-channels/my-video-channels.component.ts b/client/src/app/+my-library/+my-video-channels/my-video-channels.component.ts
index 9e3bf35b4..67b3ee496 100644
--- a/client/src/app/+my-library/+my-video-channels/my-video-channels.component.ts
+++ b/client/src/app/+my-library/+my-video-channels/my-video-channels.component.ts
@@ -68,8 +68,14 @@ channel with the same name (${videoChannel.name})!`,
     this.authService.userInformationLoaded
         .pipe(mergeMap(() => {
           const user = this.authService.getUser()
+          const options = {
+            account: user.account,
+            withStats: true,
+            search: this.search,
+            sort: '-updatedAt'
+          }
 
-          return this.videoChannelService.listAccountVideoChannels(user.account, null, true, this.search)
+          return this.videoChannelService.listAccountVideoChannels(options)
         })).subscribe(res => {
           this.videoChannels = res.data
           this.totalItems = res.total
diff --git a/client/src/app/+my-library/my-ownership/my-accept-ownership/my-accept-ownership.component.html b/client/src/app/+my-library/my-ownership/my-accept-ownership/my-accept-ownership.component.html
index 088765b20..d0393a2a4 100644
--- a/client/src/app/+my-library/my-ownership/my-accept-ownership/my-accept-ownership.component.html
+++ b/client/src/app/+my-library/my-ownership/my-accept-ownership/my-accept-ownership.component.html
@@ -8,13 +8,8 @@
   <div class="modal-body" [formGroup]="form">
     <div class="form-group">
       <label i18n for="channel">Select a channel to receive the video</label>
-      <div class="peertube-select-container">
-        <select formControlName="channel" id="channel" class="form-control">
-          <option i18n value="undefined" disabled>Channel that will receive the video</option>
-          <option *ngFor="let channel of videoChannels" [value]="channel.id">{{ channel.displayName }}
-          </option>
-        </select>
-      </div>
+      <my-select-channel labelForId="channel" formControlName="channel" [items]="videoChannels"></my-select-channel>
+
       <div *ngIf="formErrors.channel" class="form-error">{{ formErrors.channel }}</div>
     </div>
   </div>
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 0e2395754..7889d0985 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,11 +1,12 @@
-import { switchMap } from 'rxjs/operators'
+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 { OWNERSHIP_CHANGE_CHANNEL_VALIDATOR } from '@app/shared/form-validators/video-ownership-change-validators'
 import { FormReactive, FormValidatorService } from '@app/shared/shared-forms'
-import { VideoChannelService, VideoOwnershipService } from '@app/shared/shared-main'
+import { VideoOwnershipService } from '@app/shared/shared-main'
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
-import { VideoChangeOwnership, VideoChannel } from '@shared/models'
+import { VideoChangeOwnership } from '@shared/models'
 
 @Component({
   selector: 'my-accept-ownership',
@@ -18,8 +19,7 @@ export class MyAcceptOwnershipComponent extends FormReactive implements OnInit {
   @ViewChild('modal', { static: true }) modal: ElementRef
 
   videoChangeOwnership: VideoChangeOwnership | undefined = undefined
-
-  videoChannels: VideoChannel[]
+  videoChannels: SelectChannelItem[]
 
   error: string = null
 
@@ -28,7 +28,6 @@ export class MyAcceptOwnershipComponent extends FormReactive implements OnInit {
     private videoOwnershipService: VideoOwnershipService,
     private notifier: Notifier,
     private authService: AuthService,
-    private videoChannelService: VideoChannelService,
     private modalService: NgbModal
     ) {
     super()
@@ -37,9 +36,8 @@ export class MyAcceptOwnershipComponent extends FormReactive implements OnInit {
   ngOnInit () {
     this.videoChannels = []
 
-    this.authService.userInformationLoaded
-      .pipe(switchMap(() => this.videoChannelService.listAccountVideoChannels(this.authService.getUser().account)))
-      .subscribe(videoChannels => this.videoChannels = videoChannels.data)
+    listUserChannels(this.authService)
+      .subscribe(channels => this.videoChannels = channels)
 
     this.buildForm({
       channel: OWNERSHIP_CHANGE_CHANNEL_VALIDATOR
diff --git a/client/src/app/+search/search-filters.component.html b/client/src/app/+search/search-filters.component.html
index 1d1e7b868..421bc7f6f 100644
--- a/client/src/app/+search/search-filters.component.html
+++ b/client/src/app/+search/search-filters.component.html
@@ -18,6 +18,25 @@
 
       <div class="form-group">
         <div class="radio-label label-container">
+          <label i18n>Display only</label>
+          <button i18n class="reset-button reset-button-small" (click)="resetField('isLive')" *ngIf="advancedSearch.isLive !== undefined">
+            Reset
+          </button>
+        </div>
+
+        <div class="peertube-radio-container">
+          <input type="radio" name="isLive" id="isLiveTrue" value="true" [(ngModel)]="advancedSearch.isLive">
+          <label i18n for="isLiveTrue" class="radio">Live videos</label>
+        </div>
+
+        <div class="peertube-radio-container">
+          <input type="radio" name="isLive" id="isLiveFalse" value="false" [(ngModel)]="advancedSearch.isLive">
+          <label i18n for="isLiveFalse" class="radio">VOD videos</label>
+        </div>
+      </div>
+
+      <div class="form-group">
+        <div class="radio-label label-container">
           <label i18n>Display sensitive content</label>
           <button i18n class="reset-button reset-button-small" (click)="resetField('nsfw')" *ngIf="advancedSearch.nsfw !== undefined">
             Reset
@@ -44,7 +63,7 @@
         </div>
 
         <div class="peertube-radio-container" *ngFor="let date of publishedDateRanges">
-          <input type="radio" (change)="inputUpdated()" name="publishedDateRange" [id]="date.id" [value]="date.id" [(ngModel)]="publishedDateRange">
+          <input type="radio" (change)="onInputUpdated()" name="publishedDateRange" [id]="date.id" [value]="date.id" [(ngModel)]="publishedDateRange">
           <label [for]="date.id" class="radio">{{ date.label }}</label>
         </div>
       </div>
@@ -60,7 +79,7 @@
         <div class="row">
           <div class="pl-0 col-sm-6">
             <input
-              (change)="inputUpdated()"
+              (change)="onInputUpdated()"
               (keydown.enter)="$event.preventDefault()"
               type="text" id="original-publication-after" name="original-publication-after"
               i18n-placeholder placeholder="After..."
@@ -70,7 +89,7 @@
           </div>
           <div class="pr-0 col-sm-6">
             <input
-              (change)="inputUpdated()"
+              (change)="onInputUpdated()"
               (keydown.enter)="$event.preventDefault()"
               type="text" id="original-publication-before" name="original-publication-before"
               i18n-placeholder placeholder="Before..."
@@ -93,7 +112,7 @@
         </div>
 
         <div class="peertube-radio-container" *ngFor="let duration of durationRanges">
-          <input type="radio" (change)="inputUpdated()" name="durationRange" [id]="duration.id" [value]="duration.id" [(ngModel)]="durationRange">
+          <input type="radio" (change)="onInputUpdated()" name="durationRange" [id]="duration.id" [value]="duration.id" [(ngModel)]="durationRange">
           <label [for]="duration.id" class="radio">{{ duration.label }}</label>
         </div>
       </div>
diff --git a/client/src/app/+search/search-filters.component.ts b/client/src/app/+search/search-filters.component.ts
index a2af9a942..59aba22ff 100644
--- a/client/src/app/+search/search-filters.component.ts
+++ b/client/src/app/+search/search-filters.component.ts
@@ -3,6 +3,8 @@ import { ServerService } from '@app/core'
 import { AdvancedSearch } from '@app/shared/shared-search'
 import { ServerConfig, VideoConstant } from '@shared/models'
 
+type FormOption = { id: string, label: string }
+
 @Component({
   selector: 'my-search-filters',
   styleUrls: [ './search-filters.component.scss' ],
@@ -17,9 +19,10 @@ export class SearchFiltersComponent implements OnInit {
   videoLicences: VideoConstant<number>[] = []
   videoLanguages: VideoConstant<string>[] = []
 
-  publishedDateRanges: { id: string, label: string }[] = []
-  sorts: { id: string, label: string }[] = []
-  durationRanges: { id: string, label: string }[] = []
+  publishedDateRanges: FormOption[] = []
+  sorts: FormOption[] = []
+  durationRanges: FormOption[] = []
+  videoType: FormOption[] = []
 
   publishedDateRange: string
   durationRange: string
@@ -34,10 +37,6 @@ export class SearchFiltersComponent implements OnInit {
   ) {
     this.publishedDateRanges = [
       {
-        id: 'any_published_date',
-        label: $localize`Any`
-      },
-      {
         id: 'today',
         label: $localize`Today`
       },
@@ -55,12 +54,19 @@ export class SearchFiltersComponent implements OnInit {
       }
     ]
 
-    this.durationRanges = [
+    this.videoType = [
       {
-        id: 'any_duration',
-        label: $localize`Any`
+        id: 'vod',
+        label: $localize`VOD videos`
       },
       {
+        id: 'live',
+        label: $localize`Live videos`
+      }
+    ]
+
+    this.durationRanges = [
+      {
         id: 'short',
         label: $localize`Short (< 4 min)`
       },
@@ -104,24 +110,26 @@ export class SearchFiltersComponent implements OnInit {
     this.loadOriginallyPublishedAtYears()
   }
 
-  inputUpdated () {
+  onInputUpdated () {
     this.updateModelFromDurationRange()
     this.updateModelFromPublishedRange()
     this.updateModelFromOriginallyPublishedAtYears()
   }
 
   formUpdated () {
-    this.inputUpdated()
+    this.onInputUpdated()
     this.filtered.emit(this.advancedSearch)
   }
 
   reset () {
     this.advancedSearch.reset()
+
+    this.resetOriginalPublicationYears()
+
     this.durationRange = undefined
     this.publishedDateRange = undefined
-    this.originallyPublishedStartYear = undefined
-    this.originallyPublishedEndYear = undefined
-    this.inputUpdated()
+
+    this.onInputUpdated()
   }
 
   resetField (fieldName: string, value?: any) {
@@ -130,7 +138,7 @@ export class SearchFiltersComponent implements OnInit {
 
   resetLocalField (fieldName: string, value?: any) {
     this[fieldName] = value
-    this.inputUpdated()
+    this.onInputUpdated()
   }
 
   resetOriginalPublicationYears () {
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 094b4d3b3..16233f9e0 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
@@ -5,7 +5,7 @@
       <a ngbNavLink i18n>Basic info</a>
 
       <ng-template ngbNavContent>
-        <div class="row">
+        <div class="form-columns">
           <div class="col-video-edit">
             <div class="form-group">
               <label i18n for="name">Title</label>
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 bc32d7964..c1c7c686d 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
@@ -1,9 +1,3 @@
-// Bootstrap grid utilities require functions, variables and mixins
-@import 'node_modules/bootstrap/scss/functions';
-@import 'node_modules/bootstrap/scss/variables';
-@import 'node_modules/bootstrap/scss/mixins';
-@import 'node_modules/bootstrap/scss/grid';
-
 @import 'variables';
 @import 'mixins';
 
@@ -57,65 +51,62 @@ my-peertube-checkbox {
   }
 }
 
-.captions {
-
-  .captions-header {
-    text-align: right;
-    margin-bottom: 1rem;
+.captions-header {
+  text-align: right;
+  margin-bottom: 1rem;
+}
 
-    .create-caption {
-      @include create-button;
-    }
-  }
+.create-caption {
+  @include create-button;
+}
 
-  .caption-entry {
-    display: flex;
-    height: 40px;
-    align-items: center;
+.caption-entry {
+  display: flex;
+  height: 40px;
+  align-items: center;
 
-    a.caption-entry-label {
-      @include disable-default-a-behaviour;
+  a.caption-entry-label {
+    @include disable-default-a-behaviour;
 
-      flex-grow: 1;
-      color: #000;
+    flex-grow: 1;
+    color: #000;
 
-      &:hover {
-        opacity: 0.8;
-      }
+    &:hover {
+      opacity: 0.8;
     }
+  }
 
-    .caption-entry-label {
-      font-size: 15px;
-      font-weight: bold;
-
-      margin-right: 20px;
-      width: 150px;
-    }
+  .caption-entry-label {
+    font-size: 15px;
+    font-weight: bold;
 
-    .caption-entry-state {
-      width: 200px;
+    margin-right: 20px;
+    width: 150px;
+  }
 
-      &.caption-entry-state-create {
-        color: #39CC0B;
-      }
+  .caption-entry-state {
+    width: 200px;
 
-      &.caption-entry-state-delete {
-        color: #FF0000;
-      }
+    &.caption-entry-state-create {
+      color: #39CC0B;
     }
 
-    .caption-entry-delete {
-      @include peertube-button;
-      @include grey-button;
+    &.caption-entry-state-delete {
+      color: #FF0000;
     }
   }
 
-  .no-caption {
-    text-align: center;
-    font-size: 15px;
+  .caption-entry-delete {
+    @include peertube-button;
+    @include grey-button;
   }
 }
 
+.no-caption {
+  text-align: center;
+  font-size: 15px;
+}
+
 .submit-container {
   text-align: right;
 
@@ -143,35 +134,15 @@ p-calendar {
   }
 }
 
-// columns for the video
-.col-video-edit {
-  @include make-col-ready();
+.form-columns {
+  display: grid;
 
-  @include media-breakpoint-up(md) {
-    @include make-col(7);
-
-    + .col-video-edit {
-      @include make-col(5);
-    }
-  }
-
-  @include media-breakpoint-up(xl) {
-    @include make-col(8);
-
-    + .col-video-edit {
-      @include make-col(4);
-    }
-  }
+  grid-template-columns: 66% 1fr;
+  grid-gap: 30px;
 }
 
-:host-context(.expanded) {
-  .col-video-edit {
-    @include media-breakpoint-up(md) {
-      @include make-col(8);
-
-      + .col-video-edit {
-        @include make-col(4);
-      }
-    }
+@include on-small-main-col {
+  .form-columns {
+    grid-template-columns: 1fr;
   }
 }
diff --git a/client/src/app/+videos/+video-edit/video-add-components/uploaderx-form-data.ts b/client/src/app/+videos/+video-edit/video-add-components/uploaderx-form-data.ts
new file mode 100644
index 000000000..3392a0d8a
--- /dev/null
+++ b/client/src/app/+videos/+video-edit/video-add-components/uploaderx-form-data.ts
@@ -0,0 +1,48 @@
+import { objectToFormData } from '@app/helpers'
+import { resolveUrl, UploaderX } from 'ngx-uploadx'
+
+/**
+ * multipart/form-data uploader extending the UploaderX implementation of Google Resumable
+ * for use with multer
+ *
+ * @see https://github.com/kukhariev/ngx-uploadx/blob/637e258fe366b8095203f387a6101a230ee4f8e6/src/uploadx/lib/uploaderx.ts
+ * @example
+ *
+ *   options: UploadxOptions = {
+ *     uploaderClass: UploaderXFormData
+ *   };
+ */
+export class UploaderXFormData extends UploaderX {
+
+  async getFileUrl (): Promise<string> {
+    const headers = {
+      'X-Upload-Content-Length': this.size.toString(),
+      'X-Upload-Content-Type': this.file.type || 'application/octet-stream'
+    }
+
+    const previewfile = this.metadata.previewfile as any as File
+    delete this.metadata.previewfile
+
+    const data = objectToFormData(this.metadata)
+    if (previewfile !== undefined) {
+      data.append('previewfile', previewfile, previewfile.name)
+      data.append('thumbnailfile', previewfile, previewfile.name)
+    }
+
+    await this.request({
+      method: 'POST',
+      body: data,
+      url: this.endpoint,
+      headers
+    })
+
+    const location = this.getValueFromResponse('location')
+    if (!location) {
+      throw new Error('Invalid or missing Location header')
+    }
+
+    this.offset = this.responseStatus === 201 ? 0 : undefined
+
+    return resolveUrl(location, this.endpoint)
+  }
+}
diff --git a/client/src/app/+videos/+video-edit/video-add-components/video-upload.component.html b/client/src/app/+videos/+video-edit/video-add-components/video-upload.component.html
index 4c0b09894..86a779f8a 100644
--- a/client/src/app/+videos/+video-edit/video-add-components/video-upload.component.html
+++ b/client/src/app/+videos/+video-edit/video-add-components/video-upload.component.html
@@ -1,12 +1,17 @@
-<div *ngIf="!isUploadingVideo" class="upload-video-container" dragDrop (fileDropped)="setVideoFile($event)">
+<div *ngIf="!isUploadingVideo" class="upload-video-container" dragDrop (fileDropped)="onFileDropped($event)">
   <div class="first-step-block">
     <my-global-icon class="upload-icon" iconName="upload" aria-hidden="true"></my-global-icon>
 
     <div class="button-file form-control" [ngbTooltip]="'(extensions: ' + videoExtensions + ')'">
       <span i18n>Select the file to upload</span>
       <input
-        aria-label="Select the file to upload" i18n-aria-label
-        #videofileInput type="file" name="videofile" id="videofile" [accept]="videoExtensions" (change)="fileChange()" autofocus
+        aria-label="Select the file to upload"
+        i18n-aria-label
+        #videofileInput
+        [accept]="videoExtensions"
+        (change)="onFileChange($event)"
+        id="videofile"
+        type="file"
       />
     </div>
 
@@ -41,7 +46,13 @@
       </div>
 
       <div class="form-group upload-audio-button">
-        <my-button className="orange-button" i18n-label [label]="getAudioUploadLabel()" icon="upload" (click)="uploadFirstStep(true)"></my-button>
+        <my-button
+          className="orange-button"
+          [label]="getAudioUploadLabel()"
+          icon="upload"
+          (click)="uploadAudio()"
+        >
+        </my-button>
       </div>
     </ng-container>
   </div>
@@ -64,6 +75,7 @@
       <span>{{ error }}</span>
     </div>
   </div>
+
   <div class="btn-group" role="group">
     <input type="button" class="btn" i18n-value="Retry failed upload of a video" value="Retry" (click)="retryUpload()" />
     <input type="button" class="btn" i18n-value="Cancel ongoing upload of a video" value="Cancel" (click)="cancelUpload()" />
diff --git a/client/src/app/+videos/+video-edit/video-add-components/video-upload.component.scss b/client/src/app/+videos/+video-edit/video-add-components/video-upload.component.scss
index 9549257f6..d9f348a70 100644
--- a/client/src/app/+videos/+video-edit/video-add-components/video-upload.component.scss
+++ b/client/src/app/+videos/+video-edit/video-add-components/video-upload.component.scss
@@ -47,8 +47,4 @@
 
     margin-left: 10px;
   }
-
-  .btn-group > input:not(:first-child) {
-    margin-left: 0;
-  }
 }
diff --git a/client/src/app/+videos/+video-edit/video-add-components/video-upload.component.ts b/client/src/app/+videos/+video-edit/video-add-components/video-upload.component.ts
index effb37077..2d3fc3578 100644
--- a/client/src/app/+videos/+video-edit/video-add-components/video-upload.component.ts
+++ b/client/src/app/+videos/+video-edit/video-add-components/video-upload.component.ts
@@ -1,15 +1,16 @@
-import { Subscription } from 'rxjs'
-import { HttpErrorResponse, HttpEventType, HttpResponse } from '@angular/common/http'
 import { AfterViewInit, Component, ElementRef, EventEmitter, OnDestroy, OnInit, Output, ViewChild } from '@angular/core'
 import { Router } from '@angular/router'
+import { UploadxOptions, UploadState, UploadxService } from 'ngx-uploadx'
+import { UploaderXFormData } from './uploaderx-form-data'
 import { AuthService, CanComponentDeactivate, HooksService, Notifier, ServerService, UserService } from '@app/core'
-import { scrollToTop, uploadErrorHandler } from '@app/helpers'
+import { scrollToTop, genericUploadErrorHandler } from '@app/helpers'
 import { FormValidatorService } from '@app/shared/shared-forms'
 import { BytesPipe, VideoCaptionService, VideoEdit, VideoService } from '@app/shared/shared-main'
 import { LoadingBarService } from '@ngx-loading-bar/core'
 import { HttpStatusCode } from '@shared/core-utils/miscs/http-error-codes'
 import { VideoPrivacy } from '@shared/models'
 import { VideoSend } from './video-send'
+import { HttpErrorResponse, HttpEventType, HttpHeaders } from '@angular/common/http'
 
 @Component({
   selector: 'my-video-upload',
@@ -20,23 +21,18 @@ import { VideoSend } from './video-send'
     './video-send.scss'
   ]
 })
-export class VideoUploadComponent extends VideoSend implements OnInit, AfterViewInit, OnDestroy, CanComponentDeactivate {
+export class VideoUploadComponent extends VideoSend implements OnInit, OnDestroy, AfterViewInit, CanComponentDeactivate {
   @Output() firstStepDone = new EventEmitter<string>()
   @Output() firstStepError = new EventEmitter<void>()
   @ViewChild('videofileInput') videofileInput: ElementRef<HTMLInputElement>
 
-  // So that it can be accessed in the template
-  readonly SPECIAL_SCHEDULED_PRIVACY = VideoEdit.SPECIAL_SCHEDULED_PRIVACY
-
   userVideoQuotaUsed = 0
   userVideoQuotaUsedDaily = 0
 
   isUploadingAudioFile = false
   isUploadingVideo = false
-  isUpdatingVideo = false
 
   videoUploaded = false
-  videoUploadObservable: Subscription = null
   videoUploadPercents = 0
   videoUploadedIds = {
     id: 0,
@@ -49,7 +45,13 @@ export class VideoUploadComponent extends VideoSend implements OnInit, AfterView
   error: string
   enableRetryAfterError: boolean
 
+  // So that it can be accessed in the template
   protected readonly DEFAULT_VIDEO_PRIVACY = VideoPrivacy.PUBLIC
+  protected readonly BASE_VIDEO_UPLOAD_URL = VideoService.BASE_VIDEO_URL + 'upload-resumable'
+
+  private uploadxOptions: UploadxOptions
+  private isUpdatingVideo = false
+  private fileToUpload: File
 
   constructor (
     protected formValidatorService: FormValidatorService,
@@ -61,15 +63,77 @@ export class VideoUploadComponent extends VideoSend implements OnInit, AfterView
     protected videoCaptionService: VideoCaptionService,
     private userService: UserService,
     private router: Router,
-    private hooks: HooksService
-    ) {
+    private hooks: HooksService,
+    private resumableUploadService: UploadxService
+  ) {
     super()
+
+    this.uploadxOptions = {
+      endpoint: this.BASE_VIDEO_UPLOAD_URL,
+      multiple: false,
+      token: this.authService.getAccessToken(),
+      uploaderClass: UploaderXFormData,
+      retryConfig: {
+        maxAttempts: 6,
+        shouldRetry: (code: number) => {
+          return code < 400 || code >= 501
+        }
+      }
+    }
   }
 
   get videoExtensions () {
     return this.serverConfig.video.file.extensions.join(', ')
   }
 
+  onUploadVideoOngoing (state: UploadState) {
+    switch (state.status) {
+      case 'error':
+        const error = state.response?.error || 'Unknow error'
+
+        this.handleUploadError({
+          error: new Error(error),
+          name: 'HttpErrorResponse',
+          message: error,
+          ok: false,
+          headers: new HttpHeaders(state.responseHeaders),
+          status: +state.responseStatus,
+          statusText: error,
+          type: HttpEventType.Response,
+          url: state.url
+        })
+        break
+
+      case 'cancelled':
+        this.isUploadingVideo = false
+        this.videoUploadPercents = 0
+
+        this.firstStepError.emit()
+        this.enableRetryAfterError = false
+        this.error = ''
+        break
+
+      case 'queue':
+        this.closeFirstStep(state.name)
+        break
+
+      case 'uploading':
+        this.videoUploadPercents = state.progress
+        break
+
+      case 'paused':
+        this.notifier.info($localize`Upload cancelled`)
+        break
+
+      case 'complete':
+        this.videoUploaded = true
+        this.videoUploadPercents = 100
+
+        this.videoUploadedIds = state?.response.video
+        break
+    }
+  }
+
   ngOnInit () {
     super.ngOnInit()
 
@@ -78,6 +142,9 @@ export class VideoUploadComponent extends VideoSend implements OnInit, AfterView
           this.userVideoQuotaUsed = data.videoQuotaUsed
           this.userVideoQuotaUsedDaily = data.videoQuotaUsedDaily
         })
+
+    this.resumableUploadService.events
+      .subscribe(state => this.onUploadVideoOngoing(state))
   }
 
   ngAfterViewInit () {
@@ -85,7 +152,7 @@ export class VideoUploadComponent extends VideoSend implements OnInit, AfterView
   }
 
   ngOnDestroy () {
-    if (this.videoUploadObservable) this.videoUploadObservable.unsubscribe()
+    this.cancelUpload()
   }
 
   canDeactivate () {
@@ -105,137 +172,43 @@ export class VideoUploadComponent extends VideoSend implements OnInit, AfterView
     }
   }
 
-  getVideoFile () {
-    return this.videofileInput.nativeElement.files[0]
-  }
-
-  setVideoFile (files: FileList) {
+  onFileDropped (files: FileList) {
     this.videofileInput.nativeElement.files = files
-    this.fileChange()
-  }
-
-  getAudioUploadLabel () {
-    const videofile = this.getVideoFile()
-    if (!videofile) return $localize`Upload`
 
-    return $localize`Upload ${videofile.name}`
+    this.onFileChange({ target: this.videofileInput.nativeElement })
   }
 
-  fileChange () {
-    this.uploadFirstStep()
-  }
-
-  retryUpload () {
-    this.enableRetryAfterError = false
-    this.error = ''
-    this.uploadVideo()
-  }
-
-  cancelUpload () {
-    if (this.videoUploadObservable !== null) {
-      this.videoUploadObservable.unsubscribe()
-    }
-
-    this.isUploadingVideo = false
-    this.videoUploadPercents = 0
-    this.videoUploadObservable = null
+  onFileChange (event: Event | { target: HTMLInputElement }) {
+    const file = (event.target as HTMLInputElement).files[0]
 
-    this.firstStepError.emit()
-    this.enableRetryAfterError = false
-    this.error = ''
+    if (!file) return
 
-    this.notifier.info($localize`Upload cancelled`)
-  }
+    if (!this.checkGlobalUserQuota(file)) return
+    if (!this.checkDailyUserQuota(file)) return
 
-  uploadFirstStep (clickedOnButton = false) {
-    const videofile = this.getVideoFile()
-    if (!videofile) return
-
-    if (!this.checkGlobalUserQuota(videofile)) return
-    if (!this.checkDailyUserQuota(videofile)) return
-
-    if (clickedOnButton === false && this.isAudioFile(videofile.name)) {
+    if (this.isAudioFile(file.name)) {
       this.isUploadingAudioFile = true
       return
     }
 
-    // Build name field
-    const nameWithoutExtension = videofile.name.replace(/\.[^/.]+$/, '')
-    let name: string
-
-    // If the name of the file is very small, keep the extension
-    if (nameWithoutExtension.length < 3) name = videofile.name
-    else name = nameWithoutExtension
-
-    const nsfw = this.serverConfig.instance.isNSFW
-    const waitTranscoding = true
-    const commentsEnabled = true
-    const downloadEnabled = true
-    const channelId = this.firstStepChannelId.toString()
-
-    this.formData = new FormData()
-    this.formData.append('name', name)
-    // Put the video "private" -> we are waiting the user validation of the second step
-    this.formData.append('privacy', VideoPrivacy.PRIVATE.toString())
-    this.formData.append('nsfw', '' + nsfw)
-    this.formData.append('commentsEnabled', '' + commentsEnabled)
-    this.formData.append('downloadEnabled', '' + downloadEnabled)
-    this.formData.append('waitTranscoding', '' + waitTranscoding)
-    this.formData.append('channelId', '' + channelId)
-    this.formData.append('videofile', videofile)
-
-    if (this.previewfileUpload) {
-      this.formData.append('previewfile', this.previewfileUpload)
-      this.formData.append('thumbnailfile', this.previewfileUpload)
-    }
-
     this.isUploadingVideo = true
-    this.firstStepDone.emit(name)
-
-    this.form.patchValue({
-      name,
-      privacy: this.firstStepPrivacyId,
-      nsfw,
-      channelId: this.firstStepChannelId,
-      previewfile: this.previewfileUpload
-    })
+    this.fileToUpload = file
 
-    this.uploadVideo()
+    this.uploadFile(file)
   }
 
-  uploadVideo () {
-    this.videoUploadObservable = this.videoService.uploadVideo(this.formData).subscribe(
-      event => {
-        if (event.type === HttpEventType.UploadProgress) {
-          this.videoUploadPercents = Math.round(100 * event.loaded / event.total)
-        } else if (event instanceof HttpResponse) {
-          this.videoUploaded = true
-
-          this.videoUploadedIds = event.body.video
-
-          this.videoUploadObservable = null
-        }
-      },
+  uploadAudio () {
+    this.uploadFile(this.getInputVideoFile(), this.previewfileUpload)
+  }
 
-      (err: HttpErrorResponse) => {
-        // Reset progress (but keep isUploadingVideo true)
-        this.videoUploadPercents = 0
-        this.videoUploadObservable = null
-        this.enableRetryAfterError = true
-
-        this.error = uploadErrorHandler({
-          err,
-          name: $localize`video`,
-          notifier: this.notifier,
-          sticky: false
-        })
+  retryUpload () {
+    this.enableRetryAfterError = false
+    this.error = ''
+    this.uploadFile(this.fileToUpload)
+  }
 
-        if (err.status === HttpStatusCode.PAYLOAD_TOO_LARGE_413 ||
-            err.status === HttpStatusCode.UNSUPPORTED_MEDIA_TYPE_415) {
-          this.cancelUpload()
-        }
-      }
-    )
+  cancelUpload () {
+    this.resumableUploadService.control({ action: 'cancel' })
   }
 
   isPublishingButtonDisabled () {
@@ -245,6 +218,13 @@ export class VideoUploadComponent extends VideoSend implements OnInit, AfterView
       !this.videoUploadedIds.id
   }
 
+  getAudioUploadLabel () {
+    const videofile = this.getInputVideoFile()
+    if (!videofile) return $localize`Upload`
+
+    return $localize`Upload ${videofile.name}`
+  }
+
   updateSecondStep () {
     if (this.isPublishingButtonDisabled() || !this.checkForm()) {
       return
@@ -275,6 +255,62 @@ export class VideoUploadComponent extends VideoSend implements OnInit, AfterView
         )
   }
 
+  private getInputVideoFile () {
+    return this.videofileInput.nativeElement.files[0]
+  }
+
+  private uploadFile (file: File, previewfile?: File) {
+    const metadata = {
+      waitTranscoding: true,
+      commentsEnabled: true,
+      downloadEnabled: true,
+      channelId: this.firstStepChannelId,
+      nsfw: this.serverConfig.instance.isNSFW,
+      privacy: VideoPrivacy.PRIVATE.toString(),
+      filename: file.name,
+      previewfile: previewfile as any
+    }
+
+    this.resumableUploadService.handleFiles(file, {
+      ...this.uploadxOptions,
+      metadata
+    })
+
+    this.isUploadingVideo = true
+  }
+
+  private handleUploadError (err: HttpErrorResponse) {
+    // Reset progress (but keep isUploadingVideo true)
+    this.videoUploadPercents = 0
+    this.enableRetryAfterError = true
+
+    this.error = genericUploadErrorHandler({
+      err,
+      name: $localize`video`,
+      notifier: this.notifier,
+      sticky: false
+    })
+
+    if (err.status === HttpStatusCode.UNSUPPORTED_MEDIA_TYPE_415) {
+      this.cancelUpload()
+    }
+  }
+
+  private closeFirstStep (filename: string) {
+    const nameWithoutExtension = filename.replace(/\.[^/.]+$/, '')
+    const name = nameWithoutExtension.length < 3 ? filename : nameWithoutExtension
+
+    this.form.patchValue({
+      name,
+      privacy: this.firstStepPrivacyId,
+      nsfw: this.serverConfig.instance.isNSFW,
+      channelId: this.firstStepChannelId,
+      previewfile: this.previewfileUpload
+    })
+
+    this.firstStepDone.emit(name)
+  }
+
   private checkGlobalUserQuota (videofile: File) {
     const bytePipes = new BytesPipe()
 
@@ -285,8 +321,7 @@ export class VideoUploadComponent extends VideoSend implements OnInit, AfterView
       const videoQuotaUsedBytes = bytePipes.transform(this.userVideoQuotaUsed, 0)
       const videoQuotaBytes = bytePipes.transform(videoQuota, 0)
 
-      const msg = $localize`Your video quota is exceeded with this video (
-video size: ${videoSizeBytes}, used: ${videoQuotaUsedBytes}, quota: ${videoQuotaBytes})`
+      const msg = $localize`Your video quota is exceeded with this video (video size: ${videoSizeBytes}, used: ${videoQuotaUsedBytes}, quota: ${videoQuotaBytes})`
       this.notifier.error(msg)
 
       return false
@@ -304,9 +339,7 @@ video size: ${videoSizeBytes}, used: ${videoQuotaUsedBytes}, quota: ${videoQuota
       const videoSizeBytes = bytePipes.transform(videofile.size, 0)
       const quotaUsedDailyBytes = bytePipes.transform(this.userVideoQuotaUsedDaily, 0)
       const quotaDailyBytes = bytePipes.transform(videoQuotaDaily, 0)
-
-      const msg = $localize`Your daily video quota is exceeded with this video (
-video size: ${videoSizeBytes}, used: ${quotaUsedDailyBytes}, quota: ${quotaDailyBytes})`
+      const msg = $localize`Your daily video quota is exceeded with this video (video size: ${videoSizeBytes}, used: ${quotaUsedDailyBytes}, quota: ${quotaDailyBytes})`
       this.notifier.error(msg)
 
       return false
diff --git a/client/src/app/+videos/+video-edit/video-add.module.ts b/client/src/app/+videos/+video-edit/video-add.module.ts
index da651119b..e836cf81e 100644
--- a/client/src/app/+videos/+video-edit/video-add.module.ts
+++ b/client/src/app/+videos/+video-edit/video-add.module.ts
@@ -1,5 +1,6 @@
 import { NgModule } from '@angular/core'
 import { CanDeactivateGuard } from '@app/core'
+import { UploadxModule } from 'ngx-uploadx'
 import { VideoEditModule } from './shared/video-edit.module'
 import { DragDropDirective } from './video-add-components/drag-drop.directive'
 import { VideoImportTorrentComponent } from './video-add-components/video-import-torrent.component'
@@ -13,7 +14,9 @@ import { VideoAddComponent } from './video-add.component'
   imports: [
     VideoAddRoutingModule,
 
-    VideoEditModule
+    VideoEditModule,
+
+    UploadxModule
   ],
 
   declarations: [
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 276548b79..9172b78a8 100644
--- a/client/src/app/+videos/+video-edit/video-update.resolver.ts
+++ b/client/src/app/+videos/+video-edit/video-update.resolver.ts
@@ -2,7 +2,9 @@ import { forkJoin, of } from 'rxjs'
 import { map, switchMap } from 'rxjs/operators'
 import { Injectable } from '@angular/core'
 import { ActivatedRouteSnapshot, Resolve } from '@angular/router'
-import { VideoCaptionService, VideoChannelService, VideoDetails, VideoService } from '@app/shared/shared-main'
+import { AuthService } from '@app/core'
+import { listUserChannels } from '@app/helpers'
+import { VideoCaptionService, VideoDetails, VideoService } from '@app/shared/shared-main'
 import { LiveVideoService } from '@app/shared/shared-video-live'
 
 @Injectable()
@@ -10,7 +12,7 @@ export class VideoUpdateResolver implements Resolve<any> {
   constructor (
     private videoService: VideoService,
     private liveVideoService: LiveVideoService,
-    private videoChannelService: VideoChannelService,
+    private authService: AuthService,
     private videoCaptionService: VideoCaptionService
   ) {
   }
@@ -31,17 +33,7 @@ export class VideoUpdateResolver implements Resolve<any> {
         .loadCompleteDescription(video.descriptionPath)
         .pipe(map(description => Object.assign(video, { description }))),
 
-      this.videoChannelService
-        .listAccountVideoChannels(video.account)
-        .pipe(
-          map(result => result.data),
-          map(videoChannels => videoChannels.map(c => ({
-            id: c.id,
-            label: c.displayName,
-            support: c.support,
-            avatarPath: c.avatar?.path
-          })))
-        ),
+      listUserChannels(this.authService),
 
       this.videoCaptionService
         .listCaptions(video.id)
diff --git a/client/src/app/app.component.scss b/client/src/app/app.component.scss
index e21ada0f1..0543564b4 100644
--- a/client/src/app/app.component.scss
+++ b/client/src/app/app.component.scss
@@ -40,8 +40,10 @@
   }
 
   .icon-menu {
-    background-color: pvar(--mainForegroundColor);
     mask-image: url('../assets/images/misc/menu.svg');
+    -webkit-mask-image: url('../assets/images/misc/menu.svg');
+
+    background-color: pvar(--mainForegroundColor);
     margin: 0 18px 0 20px;
 
     @media screen and (max-width: $mobile-view) {
diff --git a/client/src/app/helpers/utils.ts b/client/src/app/helpers/utils.ts
index a1747af3c..94f6def26 100644
--- a/client/src/app/helpers/utils.ts
+++ b/client/src/app/helpers/utils.ts
@@ -1,4 +1,4 @@
-import { map } from 'rxjs/operators'
+import { first, map } from 'rxjs/operators'
 import { SelectChannelItem } from 'src/types/select-options-item.model'
 import { DatePipe } from '@angular/common'
 import { HttpErrorResponse } from '@angular/common/http'
@@ -23,20 +23,29 @@ function getParameterByName (name: string, url: string) {
 
 function listUserChannels (authService: AuthService) {
   return authService.userInformationLoaded
-    .pipe(map(() => {
-      const user = authService.getUser()
-      if (!user) return undefined
-
-      const videoChannels = user.videoChannels
-      if (Array.isArray(videoChannels) === false) return undefined
-
-      return videoChannels.map(c => ({
-        id: c.id,
-        label: c.displayName,
-        support: c.support,
-        avatarPath: c.avatar?.path
-      }) as SelectChannelItem)
-    }))
+    .pipe(
+      first(),
+      map(() => {
+        const user = authService.getUser()
+        if (!user) return undefined
+
+        const videoChannels = user.videoChannels
+        if (Array.isArray(videoChannels) === false) return undefined
+
+        return videoChannels
+          .sort((a, b) => {
+            if (a.updatedAt < b.updatedAt) return 1
+            if (a.updatedAt > b.updatedAt) return -1
+            return 0
+          })
+          .map(c => ({
+            id: c.id,
+            label: c.displayName,
+            support: c.support,
+            avatarPath: c.avatar?.path
+          }) as SelectChannelItem)
+      })
+    )
 }
 
 function getAbsoluteAPIUrl () {
@@ -167,8 +176,8 @@ function isXPercentInViewport (el: HTMLElement, percentVisible: number) {
   )
 }
 
-function uploadErrorHandler (parameters: {
-  err: HttpErrorResponse
+function genericUploadErrorHandler (parameters: {
+  err: Pick<HttpErrorResponse, 'message' | 'status' | 'headers'>
   name: string
   notifier: Notifier
   sticky?: boolean
@@ -180,6 +189,9 @@ function uploadErrorHandler (parameters: {
   if (err instanceof ErrorEvent) { // network error
     message = $localize`The connection was interrupted`
     notifier.error(message, title, null, sticky)
+  } else if (err.status === HttpStatusCode.INTERNAL_SERVER_ERROR_500) {
+    message = $localize`The server encountered an error`
+    notifier.error(message, title, null, sticky)
   } else if (err.status === HttpStatusCode.REQUEST_TIMEOUT_408) {
     message = $localize`Your ${name} file couldn't be transferred before the set timeout (usually 10min)`
     notifier.error(message, title, null, sticky)
@@ -210,5 +222,5 @@ export {
   isInViewport,
   isXPercentInViewport,
   listUserChannels,
-  uploadErrorHandler
+  genericUploadErrorHandler
 }
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 6d9f0ee65..7b5611f35 100644
--- a/client/src/app/shared/shared-main/account/account.model.ts
+++ b/client/src/app/shared/shared-main/account/account.model.ts
@@ -4,8 +4,12 @@ import { Actor } from './actor.model'
 export class Account extends Actor implements ServerAccount {
   displayName: string
   description: string
+
+  updatedAt: Date | string
+
   nameWithHost: string
   nameWithHostForced: string
+
   mutedByUser: boolean
   mutedByInstance: boolean
   mutedServerByUser: boolean
@@ -30,6 +34,8 @@ export class Account extends Actor implements ServerAccount {
     this.nameWithHost = Actor.CREATE_BY_STRING(this.name, this.host)
     this.nameWithHostForced = Actor.CREATE_BY_STRING(this.name, this.host, true)
 
+    if (hash.updatedAt) this.updatedAt = new Date(hash.updatedAt.toString())
+
     this.mutedByUser = false
     this.mutedByInstance = false
     this.mutedServerByUser = false
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 6ba0bb09e..2fccc472a 100644
--- a/client/src/app/shared/shared-main/account/actor.model.ts
+++ b/client/src/app/shared/shared-main/account/actor.model.ts
@@ -12,7 +12,6 @@ export abstract class Actor implements ServerActor {
   followersCount: number
 
   createdAt: Date | string
-  updatedAt: Date | string
 
   avatar: ActorImage
 
@@ -55,7 +54,6 @@ export abstract class Actor implements ServerActor {
     this.followersCount = hash.followersCount
 
     if (hash.createdAt) this.createdAt = new Date(hash.createdAt.toString())
-    if (hash.updatedAt) this.updatedAt = new Date(hash.updatedAt.toString())
 
     this.avatar = hash.avatar
     this.isLocal = Actor.IS_LOCAL(this.host)
diff --git a/client/src/app/shared/shared-main/buttons/button.component.scss b/client/src/app/shared/shared-main/buttons/button.component.scss
index 09b5f95d7..22b24c853 100644
--- a/client/src/app/shared/shared-main/buttons/button.component.scss
+++ b/client/src/app/shared/shared-main/buttons/button.component.scss
@@ -30,7 +30,7 @@ span[class$=-button] {
 
 .action-button {
   @include peertube-button-link;
-  @include button-with-icon(21px, 0, -1px);
+  @include button-with-icon(21px);
 }
 
 .orange-button {
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 c40dd5311..a9dcf2fa2 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
@@ -16,6 +16,8 @@ export class VideoChannel extends Actor implements ServerVideoChannel {
   banner: ActorImage
   bannerUrl: string
 
+  updatedAt: Date | string
+
   ownerAccount?: ServerAccount
   ownerBy?: string
 
@@ -59,6 +61,8 @@ export class VideoChannel extends Actor implements ServerVideoChannel {
 
     this.videosCount = hash.videosCount
 
+    if (hash.updatedAt) this.updatedAt = new Date(hash.updatedAt.toString())
+
     if (hash.viewsPerDay) {
       this.viewsPerDay = hash.viewsPerDay.map(v => ({ ...v, date: new Date(v.date) }))
     }
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 e65261763..a89f1065a 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
@@ -40,23 +40,24 @@ export class VideoChannelService {
                )
   }
 
-  listAccountVideoChannels (
-    account: Account,
-    componentPagination?: ComponentPaginationLight,
-    withStats = false,
+  listAccountVideoChannels (options: {
+    account: Account
+    componentPagination?: ComponentPaginationLight
+    withStats?: boolean
+    sort?: string
     search?: string
-  ): Observable<ResultList<VideoChannel>> {
+  }): Observable<ResultList<VideoChannel>> {
+    const { account, componentPagination, withStats = false, sort, search } = options
+
     const pagination = componentPagination
       ? this.restService.componentPaginationToRestPagination(componentPagination)
       : { start: 0, count: 20 }
 
     let params = new HttpParams()
-    params = this.restService.addRestGetParams(params, pagination)
+    params = this.restService.addRestGetParams(params, pagination, sort)
     params = params.set('withStats', withStats + '')
 
-    if (search) {
-      params = params.set('search', search)
-    }
+    if (search) params = params.set('search', search)
 
     const url = AccountService.BASE_ACCOUNT_URL + account.nameWithHost + '/video-channels'
     return this.authHttp.get<ResultList<VideoChannelServer>>(url, { params })
diff --git a/client/src/app/shared/shared-search/advanced-search.model.ts b/client/src/app/shared/shared-search/advanced-search.model.ts
index 0e3924841..2c83f53b6 100644
--- a/client/src/app/shared/shared-search/advanced-search.model.ts
+++ b/client/src/app/shared/shared-search/advanced-search.model.ts
@@ -1,4 +1,4 @@
-import { BooleanBothQuery, SearchTargetType } from '@shared/models'
+import { BooleanBothQuery, BooleanQuery, SearchTargetType, VideosSearchQuery } from '@shared/models'
 
 export class AdvancedSearch {
   startDate: string // ISO 8601
@@ -21,6 +21,8 @@ export class AdvancedSearch {
   durationMin: number // seconds
   durationMax: number // seconds
 
+  isLive: BooleanQuery
+
   sort: string
 
   searchTarget: SearchTargetType
@@ -41,6 +43,8 @@ export class AdvancedSearch {
     tagsOneOf?: any
     tagsAllOf?: any
 
+    isLive?: BooleanQuery
+
     durationMin?: string
     durationMax?: string
     sort?: string
@@ -54,6 +58,8 @@ export class AdvancedSearch {
     this.originallyPublishedEndDate = options.originallyPublishedEndDate || undefined
 
     this.nsfw = options.nsfw || undefined
+    this.isLive = options.isLive || undefined
+
     this.categoryOneOf = options.categoryOneOf || undefined
     this.licenceOneOf = options.licenceOneOf || undefined
     this.languageOneOf = options.languageOneOf || undefined
@@ -94,6 +100,7 @@ export class AdvancedSearch {
     this.tagsAllOf = undefined
     this.durationMin = undefined
     this.durationMax = undefined
+    this.isLive = undefined
 
     this.sort = '-match'
   }
@@ -112,12 +119,16 @@ export class AdvancedSearch {
       tagsAllOf: this.tagsAllOf,
       durationMin: this.durationMin,
       durationMax: this.durationMax,
+      isLive: this.isLive,
       sort: this.sort,
       searchTarget: this.searchTarget
     }
   }
 
-  toAPIObject () {
+  toAPIObject (): VideosSearchQuery {
+    let isLive: boolean
+    if (this.isLive) isLive = this.isLive === 'true'
+
     return {
       startDate: this.startDate,
       endDate: this.endDate,
@@ -131,6 +142,7 @@ export class AdvancedSearch {
       tagsAllOf: this.tagsAllOf,
       durationMin: this.durationMin,
       durationMax: this.durationMax,
+      isLive,
       sort: this.sort,
       searchTarget: this.searchTarget
     }
diff --git a/client/src/app/shared/shared-video-miniature/video-miniature.component.scss b/client/src/app/shared/shared-video-miniature/video-miniature.component.scss
index 5df89d019..0bbdff1e6 100644
--- a/client/src/app/shared/shared-video-miniature/video-miniature.component.scss
+++ b/client/src/app/shared/shared-video-miniature/video-miniature.component.scss
@@ -95,6 +95,7 @@ my-actor-avatar {
   .video-bottom {
     display: flex;
     width: 100%;
+    min-width: 1px;
   }
 
   .video-miniature-name {
@@ -145,6 +146,7 @@ my-actor-avatar {
 
   .video-bottom {
     display: flex;
+    min-width: 1px;
   }
 
   // We don't display avatar in row mode
diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss
index 89b6f0c4c..ae511aa02 100644
--- a/client/src/sass/application.scss
+++ b/client/src/sass/application.scss
@@ -402,7 +402,26 @@ ngx-loading-bar {
     }
 
     .admin-sub-header {
-      @include admin-sub-header-responsive;
+      flex-direction: column;
+
+      .form-sub-title {
+        margin-right: 0 !important;
+        margin-bottom: 10px;
+        text-align: center;
+      }
+
+      .admin-sub-nav {
+        display: block;
+        overflow-x: auto;
+        white-space: nowrap;
+        height: 50px;
+        padding: 10px 0;
+        width: 100%;
+
+        a {
+          margin-left: 5px;
+        }
+      }
     }
 
     my-markdown-textarea {
diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss
index b2083e516..06e55532a 100644
--- a/client/src/sass/include/_mixins.scss
+++ b/client/src/sass/include/_mixins.scss
@@ -336,20 +336,6 @@
   cursor: pointer;
 }
 
-@mixin select-arrow-down {
-  top: 50%;
-  right: calc(0% + 15px);
-  content: ' ';
-  height: 0;
-  width: 0;
-  position: absolute;
-  pointer-events: none;
-  border: 5px solid rgba(0, 0, 0, 0);
-  border-top-color: #000;
-  margin-top: -2px;
-  z-index: 100;
-}
-
 @mixin responsive-width ($width) {
   width: $width;
 
@@ -381,7 +367,17 @@
   }
 
   &::after {
-    @include select-arrow-down;
+    top: 50%;
+    right: calc(0% + 15px);
+    content: ' ';
+    height: 0;
+    width: 0;
+    position: absolute;
+    pointer-events: none;
+    border: 5px solid rgba(0, 0, 0, 0);
+    border-top-color: #000;
+    margin-top: -2px;
+    z-index: 100;
   }
 
   select {
@@ -849,29 +845,6 @@
   }
 }
 
-@mixin admin-sub-header-responsive {
-  flex-direction: column;
-
-  .form-sub-title {
-    margin-right: 0 !important;
-    margin-bottom: 10px;
-    text-align: center;
-  }
-
-  .admin-sub-nav {
-    display: block;
-    overflow-x: auto;
-    white-space: nowrap;
-    height: 50px;
-    padding: 10px 0;
-    width: 100%;
-
-    a {
-      margin-left: 5px;
-    }
-  }
-}
-
 // applies ratio (default to 16:9) to a child element (using $selector) only using
 // an immediate's parent size. This allows to set a ratio without explicit
 // dimensions, as width/height cannot be computed from each other.
diff --git a/client/src/sass/player/context-menu.scss b/client/src/sass/player/context-menu.scss
index 45cee3e77..1738f486d 100644
--- a/client/src/sass/player/context-menu.scss
+++ b/client/src/sass/player/context-menu.scss
@@ -47,6 +47,7 @@ $context-menu-width: 350px;
       @each $icon in $icons {
         &[class$="-#{$icon}"] {
           mask-image: url('#{$assets-path}/player/images/#{$icon}.svg');
+          -webkit-mask-image: url('#{$assets-path}/player/images/#{$icon}.svg');
         }
       }
 
diff --git a/client/src/sass/player/peertube-skin.scss b/client/src/sass/player/peertube-skin.scss
index 8fe2e054d..c010f7297 100644
--- a/client/src/sass/player/peertube-skin.scss
+++ b/client/src/sass/player/peertube-skin.scss
@@ -346,6 +346,8 @@ body {
         &.icon-next,
         &.icon-previous {
           mask-image: url('#{$assets-path}/player/images/next.svg');
+          -webkit-mask-image: url('#{$assets-path}/player/images/next.svg');
+
           background-color: #fff;
           mask-size: cover;
           width: 11px;
diff --git a/client/src/sass/player/playlist.scss b/client/src/sass/player/playlist.scss
index 8558fc837..3279bd263 100644
--- a/client/src/sass/player/playlist.scss
+++ b/client/src/sass/player/playlist.scss
@@ -40,10 +40,12 @@ $playlist-menu-width: 350px;
     }
 
     .cross {
+      mask-image: url('#{$assets-path}/images/feather/x.svg');
+      -webkit-mask-image: url('#{$assets-path}/images/feather/x.svg');
+
       cursor: pointer;
       width: 20px;
       height: 20px;
-      mask-image: url('#{$assets-path}/images/feather/x.svg');
       background-color: #fff;
       mask-size: cover;
     }
@@ -85,9 +87,11 @@ $playlist-menu-width: 350px;
 }
 
 .vjs-playlist-icon {
+  mask-image: url('#{$assets-path}/images/feather/list.svg');
+  -webkit-mask-image: url('#{$assets-path}/images/feather/list.svg');
+
   width: 22px;
   height: 22px;
-  mask-image: url('#{$assets-path}/images/feather/list.svg');
   background-color: #fff;
   mask-size: cover;
   margin-bottom: 3px;
diff --git a/client/yarn.lock b/client/yarn.lock
index 571314f22..1b1455cc8 100644
--- a/client/yarn.lock
+++ b/client/yarn.lock
@@ -7793,6 +7793,13 @@ next-tick@~1.0.0:
   resolved "https://registry.yarnpkg.com/next-tick/-/next-tick-1.0.0.tgz#ca86d1fe8828169b0120208e3dc8424b9db8342c"
   integrity sha1-yobR/ogoFpsBICCOPchCS524NCw=
 
+ngx-uploadx@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/ngx-uploadx/-/ngx-uploadx-4.1.0.tgz#b3ed4566a2505239026bbdc10c2345aae28d67df"
+  integrity sha512-KCG0NT4SBc/5MRl8aR6joHHg+WeTdrkhLeC1DrNgVxrTBuuenlEwOVDpkLJMPX/8HE6Bq33rx1U2NNZYVl9NMQ==
+  dependencies:
+    tslib "^1.9.0"
+
 nice-try@^1.0.4:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/nice-try/-/nice-try-1.0.5.tgz#a3378a7696ce7d223e88fc9b764bd7ef1089e366"