91 files changed, 1297 insertions, 555 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 c3ef1d894..43dbbebb3 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
@@ -1,11 +1,21 @@
-<div *ngIf="account" class="row">
+<div class="margin-content">
-  <a
-    *ngFor="let videoChannel of videoChannels" [routerLink]="[ '/video-channels', videoChannel.nameWithHost ]"
+  <div class="no-results" i18n *ngIf="channelPagination.totalItems === 0">This account does not have channels.</div>
-    class="video-channel" i18n-title title="See this video channel"
-  >
+  <div class="channels" myInfiniteScroller (nearOfBottom)="onNearOfBottom()" [autoInit]="true">
-    <img [src]="videoChannel.avatarUrl" alt="Avatar" />
+    <div class="section channel" *ngFor="let videoChannel of videoChannels">
+      <div class="section-title">
-    <div class="video-channel-display-name">{{ videoChannel.displayName }}</div>
+        <a [routerLink]="[ '/video-channels', videoChannel.nameWithHost ]" i18n-title title="See this video channel">
-    <div i18n class="video-channel-followers">{{ videoChannel.followersCount }} subscribers</div>
+          <img [src]="videoChannel.avatarUrl" alt="Avatar" />
-  </a>
-</div>
-\ No newline at end of file
+          <div>{{ videoChannel.displayName }}</div>
+          <div i18n class="followers">{{ videoChannel.followersCount }} subscribers</div>
+        </a>
+        <my-subscribe-button [videoChannel]="videoChannel"></my-subscribe-button>
+      </div>
+      <my-video-miniature *ngFor="let video of getVideosOf(videoChannel)" [video]="video" [user]="user" [displayVideoActions]="false"></my-video-miniature>
+    </div>
+  </div>
+</div>
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 0c6de2efa..d9f78bdcd 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
@@ -1,30 +1,17 @@
 @import '_variables';
 @import '_mixins';
+@import '_miniature';
-.row {
+.margin-content {
-  justify-content: center;
+  @include adapt-margin-content-width;
 }
-a.video-channel {
+.section {
-  @include disable-default-a-behaviour;
+  @include miniature-rows;
-  display: inline-block;
+  padding-top: 0 !important;
-  text-align: center;
-  color: var(--mainForegroundColor);
-  margin: 10px 30px;
-  img {
+  .section-title {
-    @include avatar(80px);
+    align-items: center;
-    margin-bottom: 10px;
-  }
-  .video-channel-display-name {
-    font-size: 20px;
-    font-weight: $font-bold;
  }
+}
-  .video-channel-followers {
-    font-size: 15px;
-  }
-}
-\ No newline at end of file
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 44f5626bb..ee3b5f8e4 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
@@ -3,9 +3,14 @@ import { ActivatedRoute } from '@angular/router'
 import { Account } from '@app/shared/account/account.model'
 import { AccountService } from '@app/shared/account/account.service'
 import { VideoChannelService } from '@app/shared/video-channel/video-channel.service'
-import { flatMap, map, tap } from 'rxjs/operators'
+import { concatMap, map, switchMap, tap } from 'rxjs/operators'
-import { Subscription } from 'rxjs'
+import { from, Subscription } from 'rxjs'
 import { VideoChannel } from '@app/shared/video-channel/video-channel.model'
+import { Video } from '@app/shared/video/video.model'
+import { AuthService } from '@app/core'
+import { VideoService } from '@app/shared/video/video.service'
+import { VideoSortField } from '@app/shared/video/sort-field.type'
+import { ComponentPagination, hasMoreItems } from '@app/shared/rest/component-pagination.model'
 @Component({
  selector: 'my-account-video-channels',
@@ -15,27 +20,73 @@ import { VideoChannel } from '@app/shared/video-channel/video-channel.model'
 export class AccountVideoChannelsComponent implements OnInit, OnDestroy {
  account: Account
  videoChannels: VideoChannel[] = []
+  videos: { [id: number]: Video[] } = {}
+  channelPagination: ComponentPagination = {
+    currentPage: 1,
+    itemsPerPage: 2
+  }
+  videosPagination: ComponentPagination = {
+    currentPage: 1,
+    itemsPerPage: 12
+  }
+  videosSort: VideoSortField = '-publishedAt'
  private accountSub: Subscription
  constructor (
-    protected route: ActivatedRoute,
+    private route: ActivatedRoute,
+    private authService: AuthService,
    private accountService: AccountService,
-    private videoChannelService: VideoChannelService
+    private videoChannelService: VideoChannelService,
+    private videoService: VideoService
  ) { }
+  get user () {
+    return this.authService.getUser()
+  }
  ngOnInit () {
    // Parent get the account for us
    this.accountSub = this.accountService.accountLoaded
-        .pipe(
+        .subscribe(account => {
-          tap(account => this.account = account),
+          this.account = account
-          flatMap(account => this.videoChannelService.listAccountVideoChannels(account)),
-          map(res => res.data)
+          this.loadMoreChannels()
-        )
+        })
-        .subscribe(videoChannels => this.videoChannels = videoChannels)
  }
  ngOnDestroy () {
    if (this.accountSub) this.accountSub.unsubscribe()
  }
+  loadMoreChannels () {
+    this.videoChannelService.listAccountVideoChannels(this.account, this.channelPagination)
+      .pipe(
+        tap(res => this.channelPagination.totalItems = res.total),
+        switchMap(res => from(res.data)),
+        concatMap(videoChannel => {
+          return this.videoService.getVideoChannelVideos(videoChannel, this.videosPagination, this.videosSort)
+            .pipe(map(data => ({ videoChannel, videos: data.videos })))
+        })
+      )
+      .subscribe(({ videoChannel, videos }) => {
+        this.videoChannels.push(videoChannel)
+        this.videos[videoChannel.id] = videos
+      })
+  }
+  getVideosOf (videoChannel: VideoChannel) {
+    return this.videos[ videoChannel.id ] || []
+  }
+  onNearOfBottom () {
+    if (!hasMoreItems(this.channelPagination)) return
+    this.channelPagination.currentPage += 1
+    this.loadMoreChannels()
+  }
 }
diff --git a/client/src/app/+accounts/account-videos/account-videos.component.ts b/client/src/app/+accounts/account-videos/account-videos.component.ts
index 0d579fa0c..5a99aadce 100644
--- a/client/src/app/+accounts/account-videos/account-videos.component.ts
+++ b/client/src/app/+accounts/account-videos/account-videos.component.ts
@@ -29,6 +29,7 @@ export class AccountVideosComponent extends AbstractVideoList implements OnInit,
  private accountSub: Subscription
  constructor (
+    protected i18n: I18n,
    protected router: Router,
    protected serverService: ServerService,
    protected route: ActivatedRoute,
@@ -36,13 +37,10 @@ export class AccountVideosComponent extends AbstractVideoList implements OnInit,
    protected notifier: Notifier,
    protected confirmService: ConfirmService,
    protected screenService: ScreenService,
-    private i18n: I18n,
    private accountService: AccountService,
    private videoService: VideoService
  ) {
    super()
-    this.titlePage = this.i18n('Published videos')
  }
  ngOnInit () {
diff --git a/client/src/app/+accounts/accounts-routing.module.ts b/client/src/app/+accounts/accounts-routing.module.ts
index 531d763c4..55bce351a 100644
--- a/client/src/app/+accounts/accounts-routing.module.ts
+++ b/client/src/app/+accounts/accounts-routing.module.ts
@@ -14,7 +14,7 @@ const accountsRoutes: Routes = [
    children: [
      {
        path: '',
-        redirectTo: 'videos',
+        redirectTo: 'video-channels',
        pathMatch: 'full'
      },
      {
diff --git a/client/src/app/+accounts/accounts.component.html b/client/src/app/+accounts/accounts.component.html
index c1377c1ea..038e18c4b 100644
--- a/client/src/app/+accounts/accounts.component.html
+++ b/client/src/app/+accounts/accounts.component.html
@@ -26,10 +26,10 @@
    </div>
    <div class="links">
-      <a i18n routerLink="videos" routerLinkActive="active" class="title-page">Videos</a>
      <a i18n routerLink="video-channels" routerLinkActive="active" class="title-page">Video channels</a>
+      <a i18n routerLink="videos" routerLinkActive="active" class="title-page">Videos</a>
      <a i18n routerLink="about" routerLinkActive="active" class="title-page">About</a>
    </div>
  </div>
diff --git a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.html b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.html
index 637484622..44fc6dc26 100644
--- a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.html
+++ b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.html
@@ -287,6 +287,14 @@
            </div>
            <div class="form-group">
+              <my-peertube-checkbox
+                inputName="transcodingAllowAudioFiles" formControlName="allowAudioFiles"
+                i18n-labelText labelText="Allow audio files upload"
+                i18n-helpHtml helpHtml="Allow your users to upload audio files that will be merged with the preview file on upload"
+              ></my-peertube-checkbox>
+            </div>
+            <div class="form-group">
              <label i18n for="transcodingThreads">Transcoding threads</label>
              <div class="peertube-select-container">
                <select id="transcodingThreads" formControlName="threads">
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 e64750713..c238a6c81 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
@@ -116,6 +116,7 @@ export class EditCustomConfigComponent extends FormReactive implements OnInit {
        enabled: null,
        threads: this.customConfigValidatorsService.TRANSCODING_THREADS,
        allowAdditionalExtensions: null,
+        allowAudioFiles: null,
        resolutions: {}
      },
      autoBlacklist: {
diff --git a/client/src/app/+my-account/my-account-history/my-account-history.component.ts b/client/src/app/+my-account/my-account-history/my-account-history.component.ts
index 73340d21a..13607119e 100644
--- a/client/src/app/+my-account/my-account-history/my-account-history.component.ts
+++ b/client/src/app/+my-account/my-account-history/my-account-history.component.ts
@@ -27,6 +27,7 @@ export class MyAccountHistoryComponent extends AbstractVideoList implements OnIn
  videosHistoryEnabled: boolean
  constructor (
+    protected i18n: I18n,
    protected router: Router,
    protected serverService: ServerService,
    protected route: ActivatedRoute,
@@ -34,7 +35,6 @@ export class MyAccountHistoryComponent extends AbstractVideoList implements OnIn
    protected userService: UserService,
    protected notifier: Notifier,
    protected screenService: ScreenService,
-    protected i18n: I18n,
    private confirmService: ConfirmService,
    private videoService: VideoService,
    private userHistoryService: UserHistoryService
diff --git a/client/src/app/+my-account/my-account-video-channels/my-account-video-channel-edit.component.html b/client/src/app/+my-account/my-account-video-channels/my-account-video-channel-edit.component.html
index 81fb11f45..f87df87df 100644
--- a/client/src/app/+my-account/my-account-video-channels/my-account-video-channel-edit.component.html
+++ b/client/src/app/+my-account/my-account-video-channels/my-account-video-channel-edit.component.html
@@ -61,5 +61,12 @@ When you will upload a video in this channel, the video support field will be au
    </div>
  </div>
+  <div class="form-group" *ngIf="isBulkUpdateVideosDisplayed()">
+    <my-peertube-checkbox
+      inputName="bulkVideosSupportUpdate" formControlName="bulkVideosSupportUpdate"
+      i18n-labelText labelText="Overwrite support field of all videos of this channel"
+    ></my-peertube-checkbox>
+  </div>
  <input type="submit" value="{{ getFormButtonTitle() }}" [disabled]="!form.valid">
 </form>
diff --git a/client/src/app/+my-account/my-account-video-channels/my-account-video-channel-edit.ts b/client/src/app/+my-account/my-account-video-channels/my-account-video-channel-edit.ts
index 4dc65dd99..7479442d1 100644
--- a/client/src/app/+my-account/my-account-video-channels/my-account-video-channel-edit.ts
+++ b/client/src/app/+my-account/my-account-video-channels/my-account-video-channel-edit.ts
@@ -11,4 +11,9 @@ export abstract class MyAccountVideoChannelEdit extends FormReactive {
  // FIXME: We need this method so angular does not complain in the child template
  onAvatarChange (formData: FormData) { /* empty */ }
+  // Should be implemented by the child
+  isBulkUpdateVideosDisplayed () {
+    return false
+  }
 }
diff --git a/client/src/app/+my-account/my-account-video-channels/my-account-video-channel-update.component.ts b/client/src/app/+my-account/my-account-video-channels/my-account-video-channel-update.component.ts
index da4fb645a..081e956d2 100644
--- a/client/src/app/+my-account/my-account-video-channels/my-account-video-channel-update.component.ts
+++ b/client/src/app/+my-account/my-account-video-channels/my-account-video-channel-update.component.ts
@@ -20,6 +20,7 @@ export class MyAccountVideoChannelUpdateComponent extends MyAccountVideoChannelE
  videoChannelToUpdate: VideoChannel
  private paramsSub: Subscription
+  private oldSupportField: string
  constructor (
    protected formValidatorService: FormValidatorService,
@@ -39,7 +40,8 @@ export class MyAccountVideoChannelUpdateComponent extends MyAccountVideoChannelE
    this.buildForm({
      'display-name': this.videoChannelValidatorsService.VIDEO_CHANNEL_DISPLAY_NAME,
      description: this.videoChannelValidatorsService.VIDEO_CHANNEL_DESCRIPTION,
-      support: this.videoChannelValidatorsService.VIDEO_CHANNEL_SUPPORT
+      support: this.videoChannelValidatorsService.VIDEO_CHANNEL_SUPPORT,
+      bulkVideosSupportUpdate: null
    })
    this.paramsSub = this.route.params.subscribe(routeParams => {
@@ -49,6 +51,8 @@ export class MyAccountVideoChannelUpdateComponent extends MyAccountVideoChannelE
        videoChannelToUpdate => {
          this.videoChannelToUpdate = videoChannelToUpdate
+          this.oldSupportField = videoChannelToUpdate.support
          this.form.patchValue({
            'display-name': videoChannelToUpdate.displayName,
            description: videoChannelToUpdate.description,
@@ -72,7 +76,8 @@ export class MyAccountVideoChannelUpdateComponent extends MyAccountVideoChannelE
    const videoChannelUpdate: VideoChannelUpdate = {
      displayName: body['display-name'],
      description: body.description || null,
-      support: body.support || null
+      support: body.support || null,
+      bulkVideosSupportUpdate: body.bulkVideosSupportUpdate || false
    }
    this.videoChannelService.updateVideoChannel(this.videoChannelToUpdate.name, videoChannelUpdate).subscribe(
@@ -118,4 +123,10 @@ export class MyAccountVideoChannelUpdateComponent extends MyAccountVideoChannelE
  getFormButtonTitle () {
    return this.i18n('Update')
  }
+  isBulkUpdateVideosDisplayed () {
+    if (this.oldSupportField === undefined) return false
+    return this.oldSupportField !== this.form.value['support']
+  }
 }
diff --git a/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-edit.component.html b/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-edit.component.html
index 303fc46f7..82321459f 100644
--- a/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-edit.component.html
+++ b/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-edit.component.html
@@ -57,10 +57,12 @@
      </div>
      <div class="form-group">
-        <my-image-upload
+        <label i18n>Playlist thumbnail</label>
-          i18n-inputLabel inputLabel="Upload thumbnail" inputName="thumbnailfile" formControlName="thumbnailfile"
-          previewWidth="200px" previewHeight="110px"
+        <my-preview-upload
-        ></my-image-upload>
+          i18n-inputLabel inputLabel="Edit" inputName="thumbnailfile" formControlName="thumbnailfile"
+          previewWidth="223px" previewHeight="122px"
+        ></my-preview-upload>
      </div>
    </div>
  </div>
diff --git a/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-edit.ts b/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-edit.ts
index fbfb4c8f7..81dd9a75f 100644
--- a/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-edit.ts
+++ b/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-edit.ts
@@ -1,6 +1,4 @@
 import { FormReactive } from '@app/shared'
-import { VideoChannel } from '@app/shared/video-channel/video-channel.model'
-import { ServerService } from '@app/core'
 import { VideoPlaylist } from '@shared/models/videos/playlist/video-playlist.model'
 export abstract class MyAccountVideoPlaylistEdit extends FormReactive {
diff --git a/client/src/app/+my-account/my-account-videos/my-account-videos.component.html b/client/src/app/+my-account/my-account-videos/my-account-videos.component.html
index 84d464800..2854093c4 100644
--- a/client/src/app/+my-account/my-account-videos/my-account-videos.component.html
+++ b/client/src/app/+my-account/my-account-videos/my-account-videos.component.html
@@ -20,7 +20,7 @@
    <my-edit-button [routerLink]="[ '/videos', 'update', video.uuid ]"></my-edit-button>
    <my-button i18n-label label="Change ownership"
-               className="action-button-change-ownership"
+               className="action-button-change-ownership grey-button"
               icon="im-with-her"
               (click)="changeOwnership($event, video)"
    ></my-button>
diff --git a/client/src/app/+signup/+register/custom-stepper.component.html b/client/src/app/+signup/+register/custom-stepper.component.html
new file mode 100644
index 000000000..bf507fc4f
--- /dev/null
+++ b/client/src/app/+signup/+register/custom-stepper.component.html
@@ -0,0 +1,25 @@
+<section class="container">
+  <header>
+    <ng-container *ngFor="let step of steps; let i = index; let isLast = last;">
+      <div
+        class="step-info" [ngClass]="{ active: selectedIndex === i, completed: isCompleted(step) }"
+        (click)="onClick(i)"
+      >
+        <div class="step-index">
+          <ng-container *ngIf="!isCompleted(step)">{{ i + 1 }}</ng-container>
+          <my-global-icon *ngIf="isCompleted(step)" iconName="tick"></my-global-icon>
+        </div>
+        <div class="step-label">{{ step.label }}</div>
+      </div>
+      <!-- Do no display if this is the last child -->
+      <div *ngIf="!isLast" class="connector"></div>
+    </ng-container>
+  </header>
+  <div [style.display]="selected ? 'block' : 'none'">
+    <ng-container [ngTemplateOutlet]="selected.content"></ng-container>
+  </div>
+</section>
diff --git a/client/src/app/+signup/+register/custom-stepper.component.scss b/client/src/app/+signup/+register/custom-stepper.component.scss
new file mode 100644
index 000000000..2371c8ae5
--- /dev/null
+++ b/client/src/app/+signup/+register/custom-stepper.component.scss
@@ -0,0 +1,66 @@
+@import '_variables';
+@import '_mixins';
+$grey-color: #9CA3AB;
+$index-block-height: 32px;
+header {
+  display: flex;
+  justify-content: space-between;
+  font-size: 15px;
+  margin-bottom: 30px;
+  .step-info {
+    color: $grey-color;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: $index-block-height;
+    .step-index {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      width: $index-block-height;
+      height: $index-block-height;
+      border-radius: 100px;
+      border: 2px solid $grey-color;
+      margin-bottom: 10px;
+      my-global-icon {
+        @include apply-svg-color(var(--mainBackgroundColor));
+        width: 22px;
+        height: 22px;
+      }
+    }
+    .step-label {
+      width: max-content;
+    }
+    &.active,
+    &.completed {
+      .step-index {
+        border-color: var(--mainColor);
+        background-color: var(--mainColor);
+        color: var(--mainBackgroundColor);
+      }
+      .step-label {
+        color: var(--mainColor);
+      }
+    }
+    &.completed {
+      cursor: pointer;
+    }
+  }
+  .connector {
+    flex: auto;
+    margin: $index-block-height/2 10px 0 10px;
+    height: 2px;
+    background-color: $grey-color;
+  }
+}
diff --git a/client/src/app/+signup/+register/custom-stepper.component.ts b/client/src/app/+signup/+register/custom-stepper.component.ts
new file mode 100644
index 000000000..2ae40f3a9
--- /dev/null
+++ b/client/src/app/+signup/+register/custom-stepper.component.ts
@@ -0,0 +1,19 @@
+import { Component } from '@angular/core'
+import { CdkStep, CdkStepper } from '@angular/cdk/stepper'
+@Component({
+  selector: 'my-custom-stepper',
+  templateUrl: './custom-stepper.component.html',
+  styleUrls: [ './custom-stepper.component.scss' ],
+  providers: [ { provide: CdkStepper, useExisting: CustomStepperComponent } ]
+})
+export class CustomStepperComponent extends CdkStepper {
+  onClick (index: number): void {
+    this.selectedIndex = index
+  }
+  isCompleted (step: CdkStep) {
+    return step.stepControl && step.stepControl.dirty && step.stepControl.valid
+  }
+}
diff --git a/client/src/app/signup/signup-routing.module.ts b/client/src/app/+signup/+register/register-routing.module.ts
index 820d16d4d..e3a5001dc 100644
--- a/client/src/app/signup/signup-routing.module.ts
+++ b/client/src/app/+signup/+register/register-routing.module.ts
@@ -1,17 +1,18 @@
 import { NgModule } from '@angular/core'
 import { RouterModule, Routes } from '@angular/router'
 import { MetaGuard } from '@ngx-meta/core'
-import { SignupComponent } from './signup.component'
+import { RegisterComponent } from './register.component'
 import { ServerConfigResolver } from '@app/core/routing/server-config-resolver.service'
+import { UnloggedGuard } from '@app/core/routing/unlogged-guard.service'
-const signupRoutes: Routes = [
+const registerRoutes: Routes = [
  {
-    path: 'signup',
+    path: '',
-    component: SignupComponent,
+    component: RegisterComponent,
-    canActivate: [ MetaGuard ],
+    canActivate: [ MetaGuard, UnloggedGuard ],
    data: {
      meta: {
-        title: 'Signup'
+        title: 'Register'
      }
    },
    resolve: {
@@ -21,7 +22,7 @@ const signupRoutes: Routes = [
 ]
 @NgModule({
-  imports: [ RouterModule.forChild(signupRoutes) ],
+  imports: [ RouterModule.forChild(registerRoutes) ],
  exports: [ RouterModule ]
 })
-export class SignupRoutingModule {}
+export class RegisterRoutingModule {}
diff --git a/client/src/app/+signup/+register/register-step-channel.component.html b/client/src/app/+signup/+register/register-step-channel.component.html
new file mode 100644
index 000000000..68ea4473a
--- /dev/null
+++ b/client/src/app/+signup/+register/register-step-channel.component.html
@@ -0,0 +1,50 @@
+<form role="form" [formGroup]="form">
+  <div class="channel-explanations">
+    <p i18n>
+      A channel is an entity in which you upload your videos. Creating several of them helps you to organize and separate your content.<br />
+      For example, you could decide to have a channel to publish your piano concerts, and another channel in which you publish your videos talking about ecology.
+    </p>
+    <p>
+      Other users can decide to subscribe any channel they want, to be notified when you publish a new video.
+    </p>
+  </div>
+  <div class="form-group">
+    <label for="name" i18n>Channel name</label>
+    <div class="input-group">
+      <input
+        type="text" id="name" i18n-placeholder placeholder="Example: my_super_channel"
+        formControlName="name" [ngClass]="{ 'input-error': formErrors['name'] }"
+      >
+      <div class="input-group-append">
+        <span class="input-group-text">@{{ instanceHost }}</span>
+      </div>
+    </div>
+    <div *ngIf="formErrors.name" class="form-error">
+      {{ formErrors.name }}
+    </div>
+    <div *ngIf="isSameThanUsername()" class="form-error" i18n>
+      Channel name cannot be the same than your account name. You can click on the first step to update your account name.
+    </div>
+  </div>
+  <div class="form-group">
+    <label for="displayName" i18n>Channel display name</label>
+    <div class="input-group">
+      <input
+        type="text" id="displayName"
+        formControlName="displayName" [ngClass]="{ 'input-error': formErrors['displayName'] }"
+      >
+    </div>
+    <div *ngIf="formErrors.displayName" class="form-error">
+      {{ formErrors.displayName }}
+    </div>
+  </div>
+</form>
diff --git a/client/src/app/+signup/+register/register-step-channel.component.ts b/client/src/app/+signup/+register/register-step-channel.component.ts
new file mode 100644
index 000000000..9e13f75b3
--- /dev/null
+++ b/client/src/app/+signup/+register/register-step-channel.component.ts
@@ -0,0 +1,40 @@
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'
+import { AuthService } from '@app/core'
+import { FormReactive, VideoChannelValidatorsService } from '@app/shared'
+import { FormValidatorService } from '@app/shared/forms/form-validators/form-validator.service'
+import { FormGroup } from '@angular/forms'
+@Component({
+  selector: 'my-register-step-channel',
+  templateUrl: './register-step-channel.component.html',
+  styleUrls: [ './register.component.scss' ]
+})
+export class RegisterStepChannelComponent extends FormReactive implements OnInit {
+  @Input() username: string
+  @Output() formBuilt = new EventEmitter<FormGroup>()
+  constructor (
+    protected formValidatorService: FormValidatorService,
+    private authService: AuthService,
+    private videoChannelValidatorsService: VideoChannelValidatorsService
+  ) {
+    super()
+  }
+  get instanceHost () {
+    return window.location.host
+  }
+  isSameThanUsername () {
+    return this.username && this.username === this.form.value['name']
+  }
+  ngOnInit () {
+    this.buildForm({
+      name: this.videoChannelValidatorsService.VIDEO_CHANNEL_NAME,
+      displayName: this.videoChannelValidatorsService.VIDEO_CHANNEL_DISPLAY_NAME
+    })
+    setTimeout(() => this.formBuilt.emit(this.form))
+  }
+}
diff --git a/client/src/app/+signup/+register/register-step-user.component.html b/client/src/app/+signup/+register/register-step-user.component.html
new file mode 100644
index 000000000..cd0c78bfa
--- /dev/null
+++ b/client/src/app/+signup/+register/register-step-user.component.html
@@ -0,0 +1,54 @@
+<form role="form" [formGroup]="form">
+  <div class="form-group">
+    <label for="username" i18n>Username</label>
+    <div class="input-group">
+      <input
+        type="text" id="username" i18n-placeholder placeholder="Example: jane_doe"
+        formControlName="username" [ngClass]="{ 'input-error': formErrors['username'] }"
+      >
+      <div class="input-group-append">
+        <span class="input-group-text">@{{ instanceHost }}</span>
+      </div>
+    </div>
+    <div *ngIf="formErrors.username" class="form-error">
+      {{ formErrors.username }}
+    </div>
+  </div>
+  <div class="form-group">
+    <label for="email" i18n>Email</label>
+    <input
+      type="text" id="email" i18n-placeholder placeholder="Email"
+      formControlName="email" [ngClass]="{ 'input-error': formErrors['email'] }"
+    >
+    <div *ngIf="formErrors.email" class="form-error">
+      {{ formErrors.email }}
+    </div>
+  </div>
+  <div class="form-group">
+    <label for="password" i18n>Password</label>
+    <input
+      type="password" id="password" i18n-placeholder placeholder="Password"
+      formControlName="password" [ngClass]="{ 'input-error': formErrors['password'] }"
+    >
+    <div *ngIf="formErrors.password" class="form-error">
+      {{ formErrors.password }}
+    </div>
+  </div>
+  <div class="form-group form-group-terms">
+    <my-peertube-checkbox
+      inputName="terms" formControlName="terms"
+      i18n-labelHtml
+      labelHtml="I am at least 16 years old and agree to the <a href='/about/instance#terms-section' target='_blank'rel='noopener noreferrer'>Terms</a> of this instance"
+    ></my-peertube-checkbox>
+    <div *ngIf="formErrors.terms" class="form-error">
+      {{ formErrors.terms }}
+    </div>
+  </div>
+</form>
diff --git a/client/src/app/+signup/+register/register-step-user.component.ts b/client/src/app/+signup/+register/register-step-user.component.ts
new file mode 100644
index 000000000..3825ae371
--- /dev/null
+++ b/client/src/app/+signup/+register/register-step-user.component.ts
@@ -0,0 +1,37 @@
+import { Component, EventEmitter, OnInit, Output } from '@angular/core'
+import { AuthService } from '@app/core'
+import { FormReactive, UserValidatorsService } from '@app/shared'
+import { FormValidatorService } from '@app/shared/forms/form-validators/form-validator.service'
+import { FormGroup } from '@angular/forms'
+@Component({
+  selector: 'my-register-step-user',
+  templateUrl: './register-step-user.component.html',
+  styleUrls: [ './register.component.scss' ]
+})
+export class RegisterStepUserComponent extends FormReactive implements OnInit {
+  @Output() formBuilt = new EventEmitter<FormGroup>()
+  constructor (
+    protected formValidatorService: FormValidatorService,
+    private authService: AuthService,
+    private userValidatorsService: UserValidatorsService
+  ) {
+    super()
+  }
+  get instanceHost () {
+    return window.location.host
+  }
+  ngOnInit () {
+    this.buildForm({
+      username: this.userValidatorsService.USER_USERNAME,
+      password: this.userValidatorsService.USER_PASSWORD,
+      email: this.userValidatorsService.USER_EMAIL,
+      terms: this.userValidatorsService.USER_TERMS
+    })
+    setTimeout(() => this.formBuilt.emit(this.form))
+  }
+}
diff --git a/client/src/app/+signup/+register/register.component.html b/client/src/app/+signup/+register/register.component.html
new file mode 100644
index 000000000..24def68c1
--- /dev/null
+++ b/client/src/app/+signup/+register/register.component.html
@@ -0,0 +1,41 @@
+<div class="margin-content">
+  <div i18n class="title-page title-page-single">
+    Create an account
+  </div>
+  <my-signup-success *ngIf="signupDone" [message]="success"></my-signup-success>
+  <div *ngIf="info" class="alert alert-info">{{ info }}</div>
+  <div class="wrapper" *ngIf="!signupDone">
+    <div>
+      <my-custom-stepper linear *ngIf="!signupDone">
+        <cdk-step [stepControl]="formStepUser" i18n-label label="User information">
+          <my-register-step-user (formBuilt)="onUserFormBuilt($event)"></my-register-step-user>
+          <button i18n cdkStepperNext [disabled]="!formStepUser || !formStepUser.valid">Next</button>
+        </cdk-step>
+        <cdk-step [stepControl]="formStepChannel" i18n-label label="Channel information">
+          <my-register-step-channel (formBuilt)="onChannelFormBuilt($event)" [username]="getUsername()"></my-register-step-channel>
+          <button i18n cdkStepperNext (click)="signup()"
+                  [disabled]="!formStepChannel || !formStepChannel.valid || hasSameChannelAndAccountNames()"
+          >
+            Create my account
+          </button>
+        </cdk-step>
+        <cdk-step i18n-label label="Done" editable="false">
+          <div *ngIf="error" class="alert alert-danger">{{ error }}</div>
+        </cdk-step>
+      </my-custom-stepper>
+    </div>
+    <div>
+      <label i18n>Features found on this instance</label>
+      <my-instance-features-table></my-instance-features-table>
+    </div>
+  </div>
+</div>
diff --git a/client/src/app/signup/signup.component.scss b/client/src/app/+signup/+register/register.component.scss
index 90e1e8e74..6f61b78f7 100644
--- a/client/src/app/signup/signup.component.scss
+++ b/client/src/app/+signup/+register/register.component.scss
@@ -1,16 +1,32 @@
 @import '_variables';
 @import '_mixins';
+.alert {
+  font-size: 15px;
+  text-align: center;
+}
+.wrapper {
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  & > div {
+    margin-bottom: 40px;
+    width: 450px;
+    @media screen and (max-width: 500px) {
+      width: auto;
+    }
+  }
+}
 my-instance-features-table {
  display: block;
  margin-bottom: 40px;
 }
-form {
-  margin: 0 60px 40px 0;
-}
 .form-group-terms {
  margin: 30px 0;
 }
@@ -25,15 +41,18 @@ form {
 input:not([type=submit]) {
  @include peertube-input-text(400px);
  display: block;
-  &#username {
+  &#username,
-    width: auto;
+  &#name {
+    width: auto !important;
    flex-grow: 1;
  }
 }
-input[type=submit] {
+input[type=submit],
+button {
  @include peertube-button;
  @include orange-button;
 }
diff --git a/client/src/app/+signup/+register/register.component.ts b/client/src/app/+signup/+register/register.component.ts
new file mode 100644
index 000000000..cd6059728
--- /dev/null
+++ b/client/src/app/+signup/+register/register.component.ts
@@ -0,0 +1,89 @@
+import { Component } from '@angular/core'
+import { AuthService, Notifier, RedirectService, ServerService } from '@app/core'
+import { UserService, UserValidatorsService } from '@app/shared'
+import { I18n } from '@ngx-translate/i18n-polyfill'
+import { UserRegister } from '@shared/models/users/user-register.model'
+import { FormGroup } from '@angular/forms'
+@Component({
+  selector: 'my-register',
+  templateUrl: './register.component.html',
+  styleUrls: [ './register.component.scss' ]
+})
+export class RegisterComponent {
+  info: string = null
+  error: string = null
+  success: string = null
+  signupDone = false
+  formStepUser: FormGroup
+  formStepChannel: FormGroup
+  constructor (
+    private authService: AuthService,
+    private userValidatorsService: UserValidatorsService,
+    private notifier: Notifier,
+    private userService: UserService,
+    private serverService: ServerService,
+    private redirectService: RedirectService,
+    private i18n: I18n
+  ) {
+  }
+  get requiresEmailVerification () {
+    return this.serverService.getConfig().signup.requiresEmailVerification
+  }
+  hasSameChannelAndAccountNames () {
+    return this.getUsername() === this.getChannelName()
+  }
+  getUsername () {
+    if (!this.formStepUser) return undefined
+    return this.formStepUser.value['username']
+  }
+  getChannelName () {
+    if (!this.formStepChannel) return undefined
+    return this.formStepChannel.value['name']
+  }
+  onUserFormBuilt (form: FormGroup) {
+    this.formStepUser = form
+  }
+  onChannelFormBuilt (form: FormGroup) {
+    this.formStepChannel = form
+  }
+  signup () {
+    this.error = null
+    const body: UserRegister = Object.assign(this.formStepUser.value, { channel: this.formStepChannel.value })
+    this.userService.signup(body).subscribe(
+      () => {
+        this.signupDone = true
+        if (this.requiresEmailVerification) {
+          this.info = this.i18n('Now please check your emails to verify your account and complete signup.')
+          return
+        }
+        // Auto login
+        this.authService.login(body.username, body.password)
+            .subscribe(
+              () => {
+                this.success = this.i18n('You are now logged in as {{username}}!', { username: body.username })
+              },
+              err => this.error = err.message
+            )
+      },
+      err => this.error = err.message
+    )
+  }
+}
diff --git a/client/src/app/+signup/+register/register.module.ts b/client/src/app/+signup/+register/register.module.ts
new file mode 100644
index 000000000..46336cbd0
--- /dev/null
+++ b/client/src/app/+signup/+register/register.module.ts
@@ -0,0 +1,33 @@
+import { NgModule } from '@angular/core'
+import { RegisterRoutingModule } from './register-routing.module'
+import { RegisterComponent } from './register.component'
+import { SharedModule } from '@app/shared'
+import { CdkStepperModule } from '@angular/cdk/stepper'
+import { RegisterStepChannelComponent } from './register-step-channel.component'
+import { RegisterStepUserComponent } from './register-step-user.component'
+import { CustomStepperComponent } from './custom-stepper.component'
+import { SignupSharedModule } from '@app/+signup/shared/signup-shared.module'
+@NgModule({
+  imports: [
+    RegisterRoutingModule,
+    SharedModule,
+    CdkStepperModule,
+    SignupSharedModule
+  ],
+  declarations: [
+    RegisterComponent,
+    CustomStepperComponent,
+    RegisterStepChannelComponent,
+    RegisterStepUserComponent
+  ],
+  exports: [
+    RegisterComponent
+  ],
+  providers: [
+  ]
+})
+export class RegisterModule { }
diff --git a/client/src/app/+verify-account/verify-account-ask-send-email/verify-account-ask-send-email.component.html b/client/src/app/+signup/+verify-account/verify-account-ask-send-email/verify-account-ask-send-email.component.html
index 2e4180632..2e4180632 100644
--- a/client/src/app/+verify-account/verify-account-ask-send-email/verify-account-ask-send-email.component.html
+++ b/client/src/app/+signup/+verify-account/verify-account-ask-send-email/verify-account-ask-send-email.component.html
diff --git a/client/src/app/+verify-account/verify-account-ask-send-email/verify-account-ask-send-email.component.scss b/client/src/app/+signup/+verify-account/verify-account-ask-send-email/verify-account-ask-send-email.component.scss
index efec6b706..efec6b706 100644
--- a/client/src/app/+verify-account/verify-account-ask-send-email/verify-account-ask-send-email.component.scss
+++ b/client/src/app/+signup/+verify-account/verify-account-ask-send-email/verify-account-ask-send-email.component.scss
diff --git a/client/src/app/+verify-account/verify-account-ask-send-email/verify-account-ask-send-email.component.ts b/client/src/app/+signup/+verify-account/verify-account-ask-send-email/verify-account-ask-send-email.component.ts
index cfd471fa4..cfd471fa4 100644
--- a/client/src/app/+verify-account/verify-account-ask-send-email/verify-account-ask-send-email.component.ts
+++ b/client/src/app/+signup/+verify-account/verify-account-ask-send-email/verify-account-ask-send-email.component.ts
diff --git a/client/src/app/+verify-account/verify-account-email/verify-account-email.component.html b/client/src/app/+signup/+verify-account/verify-account-email/verify-account-email.component.html
index a83d4a3c2..728709ca6 100644
--- a/client/src/app/+verify-account/verify-account-email/verify-account-email.component.html
+++ b/client/src/app/+signup/+verify-account/verify-account-email/verify-account-email.component.html
@@ -3,9 +3,9 @@
    Verify account email confirmation
  </div>
-  <div i18n *ngIf="success; else verificationError">
+  <my-signup-success i18n *ngIf="success; else verificationError" message="Your email has been verified and you may now login.">
-    Your email has been verified and you may now login. Redirecting...
+  </my-signup-success>
-  </div>
  <ng-template #verificationError>
    <div>
      <span i18n>An error occurred. </span>
diff --git a/client/src/app/+verify-account/verify-account-email/verify-account-email.component.ts b/client/src/app/+signup/+verify-account/verify-account-email/verify-account-email.component.ts
index f9ecf664b..3fb2d1cd8 100644
--- a/client/src/app/+verify-account/verify-account-email/verify-account-email.component.ts
+++ b/client/src/app/+signup/+verify-account/verify-account-email/verify-account-email.component.ts
@@ -40,9 +40,6 @@ export class VerifyAccountEmailComponent implements OnInit {
      .subscribe(
        () => {
          this.success = true
-          setTimeout(() => {
-            this.router.navigate([ '/login' ])
-          }, 2000)
        },
        err => {
diff --git a/client/src/app/+verify-account/verify-account-routing.module.ts b/client/src/app/+signup/+verify-account/verify-account-routing.module.ts
index a038f0336..16d5fe0d0 100644
--- a/client/src/app/+verify-account/verify-account-routing.module.ts
+++ b/client/src/app/+signup/+verify-account/verify-account-routing.module.ts
@@ -1,12 +1,8 @@
 import { NgModule } from '@angular/core'
 import { RouterModule, Routes } from '@angular/router'
 import { MetaGuard } from '@ngx-meta/core'
+import { VerifyAccountEmailComponent } from './verify-account-email/verify-account-email.component'
-import { VerifyAccountEmailComponent } from '@app/+verify-account/verify-account-email/verify-account-email.component'
+import { VerifyAccountAskSendEmailComponent } from './verify-account-ask-send-email/verify-account-ask-send-email.component'
-import {
-  VerifyAccountAskSendEmailComponent
-} from '@app/+verify-account/verify-account-ask-send-email/verify-account-ask-send-email.component'
 const verifyAccountRoutes: Routes = [
  {
diff --git a/client/src/app/+signup/+verify-account/verify-account.module.ts b/client/src/app/+signup/+verify-account/verify-account.module.ts
new file mode 100644
index 000000000..9fe14e81e
--- /dev/null
+++ b/client/src/app/+signup/+verify-account/verify-account.module.ts
@@ -0,0 +1,25 @@
+import { NgModule } from '@angular/core'
+import { VerifyAccountRoutingModule } from './verify-account-routing.module'
+import { VerifyAccountEmailComponent } from './verify-account-email/verify-account-email.component'
+import { VerifyAccountAskSendEmailComponent } from './verify-account-ask-send-email/verify-account-ask-send-email.component'
+import { SharedModule } from '@app/shared'
+import { SignupSharedModule } from '@app/+signup/shared/signup-shared.module'
+@NgModule({
+  imports: [
+    VerifyAccountRoutingModule,
+    SharedModule,
+    SignupSharedModule
+  ],
+  declarations: [
+    VerifyAccountEmailComponent,
+    VerifyAccountAskSendEmailComponent
+  ],
+  exports: [],
+  providers: []
+})
+export class VerifyAccountModule {
+}
diff --git a/client/src/app/+signup/shared/signup-shared.module.ts b/client/src/app/+signup/shared/signup-shared.module.ts
new file mode 100644
index 000000000..cd21fdef3
--- /dev/null
+++ b/client/src/app/+signup/shared/signup-shared.module.ts
@@ -0,0 +1,21 @@
+import { NgModule } from '@angular/core'
+import { SignupSuccessComponent } from '../shared/signup-success.component'
+import { SharedModule } from '@app/shared'
+@NgModule({
+  imports: [
+    SharedModule
+  ],
+  declarations: [
+    SignupSuccessComponent
+  ],
+  exports: [
+    SignupSuccessComponent
+  ],
+  providers: [
+  ]
+})
+export class SignupSharedModule { }
diff --git a/client/src/app/+signup/shared/signup-success.component.html b/client/src/app/+signup/shared/signup-success.component.html
new file mode 100644
index 000000000..e35f858c6
--- /dev/null
+++ b/client/src/app/+signup/shared/signup-success.component.html
@@ -0,0 +1,16 @@
+<!-- Thanks: Amit Singh Sansoya from https://codepen.io/amit3200/pen/zWMJOO -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 130.2 130.2">
+  <circle class="path circle" fill="none" stroke="#73AF55" stroke-width="6" stroke-miterlimit="10" cx="65.1" cy="65.1" r="62.1"/>
+  <polyline class="path check" fill="none" stroke="#73AF55" stroke-width="6" stroke-linecap="round" stroke-miterlimit="10" points="100.2,40.2 51.5,88.8 29.8,67.5 "/>
+</svg>
+<p class="bottom-message">Welcome on PeerTube!</p>
+<div *ngIf="message" class="alert alert-success">
+  <p>{{ message }}</p>
+  <p i18n>
+    If you need help to use PeerTube, you can take a look to the <a href="https://docs.joinpeertube.org/#/use-setup-account" target="_blank" rel="noopener noreferrer">documentation</a>.
+  </p>
+</div>
diff --git a/client/src/app/+signup/shared/signup-success.component.scss b/client/src/app/+signup/shared/signup-success.component.scss
new file mode 100644
index 000000000..fbc27c8bc
--- /dev/null
+++ b/client/src/app/+signup/shared/signup-success.component.scss
@@ -0,0 +1,76 @@
+svg {
+  width: 100px;
+  display: block;
+  margin: 40px auto 0;
+}
+.path {
+  stroke-dasharray: 1000;
+  stroke-dashoffset: 0;
+  &.circle {
+    -webkit-animation: dash .9s ease-in-out;
+    animation: dash .9s ease-in-out;
+  }
+  &.line {
+    stroke-dashoffset: 1000;
+    -webkit-animation: dash .9s .35s ease-in-out forwards;
+    animation: dash .9s .35s ease-in-out forwards;
+  }
+  &.check {
+    stroke-dashoffset: -100;
+    -webkit-animation: dash-check .9s .35s ease-in-out forwards;
+    animation: dash-check .9s .35s ease-in-out forwards;
+  }
+}
+.bottom-message {
+  text-align: center;
+  margin: 20px 0 60px;
+  font-size: 1.25em;
+  color: #73AF55;
+}
+.alert {
+  font-size: 15px;
+  text-align: center;
+}
+@-webkit-keyframes dash {
+  0% {
+    stroke-dashoffset: 1000;
+  }
+  100% {
+    stroke-dashoffset: 0;
+  }
+}
+@keyframes dash {
+  0% {
+    stroke-dashoffset: 1000;
+  }
+  100% {
+    stroke-dashoffset: 0;
+  }
+}
+@-webkit-keyframes dash-check {
+  0% {
+    stroke-dashoffset: -100;
+  }
+  100% {
+    stroke-dashoffset: 900;
+  }
+}
+@keyframes dash-check {
+  0% {
+    stroke-dashoffset: -100;
+  }
+  100% {
+    stroke-dashoffset: 900;
+  }
+}
diff --git a/client/src/app/+signup/shared/signup-success.component.ts b/client/src/app/+signup/shared/signup-success.component.ts
new file mode 100644
index 000000000..19fb5922a
--- /dev/null
+++ b/client/src/app/+signup/shared/signup-success.component.ts
@@ -0,0 +1,10 @@
+import { Component, Input } from '@angular/core'
+@Component({
+  selector: 'my-signup-success',
+  templateUrl: './signup-success.component.html',
+  styleUrls: [ './signup-success.component.scss' ]
+})
+export class SignupSuccessComponent {
+  @Input() message: string
+}
diff --git a/client/src/app/+verify-account/index.ts b/client/src/app/+verify-account/index.ts
deleted file mode 100644
index 733f5ba77..000000000
--- a/client/src/app/+verify-account/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from '@app/+verify-account/verify-account-routing.module'
-export * from '@app/+verify-account/verify-account.module'
diff --git a/client/src/app/+verify-account/verify-account.module.ts b/client/src/app/+verify-account/verify-account.module.ts
deleted file mode 100644
index 9092c6b4f..000000000
--- a/client/src/app/+verify-account/verify-account.module.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import { NgModule } from '@angular/core'
-import { VerifyAccountRoutingModule } from '@app/+verify-account/verify-account-routing.module'
-import { VerifyAccountEmailComponent } from '@app/+verify-account/verify-account-email/verify-account-email.component'
-import {
-  VerifyAccountAskSendEmailComponent
-} from '@app/+verify-account/verify-account-ask-send-email/verify-account-ask-send-email.component'
-import { SharedModule } from '@app/shared'
-@NgModule({
-  imports: [
-    VerifyAccountRoutingModule,
-    SharedModule
-  ],
-  declarations: [
-    VerifyAccountEmailComponent,
-    VerifyAccountAskSendEmailComponent
-  ],
-  exports: [
-  ],
-  providers: [
-  ]
-})
-export class VerifyAccountModule { }
diff --git a/client/src/app/+video-channels/video-channel-playlists/video-channel-playlists.component.ts b/client/src/app/+video-channels/video-channel-playlists/video-channel-playlists.component.ts
index 907aefae1..7990044a2 100644
--- a/client/src/app/+video-channels/video-channel-playlists/video-channel-playlists.component.ts
+++ b/client/src/app/+video-channels/video-channel-playlists/video-channel-playlists.component.ts
@@ -5,7 +5,7 @@ import { VideoChannel } from '@app/shared/video-channel/video-channel.model'
 import { Subscription } from 'rxjs'
 import { Notifier } from '@app/core'
 import { VideoPlaylist } from '@app/shared/video-playlist/video-playlist.model'
-import { ComponentPagination } from '@app/shared/rest/component-pagination.model'
+import { ComponentPagination, hasMoreItems } from '@app/shared/rest/component-pagination.model'
 import { VideoPlaylistService } from '@app/shared/video-playlist/video-playlist.service'
 @Component({
@@ -46,8 +46,7 @@ export class VideoChannelPlaylistsComponent implements OnInit, OnDestroy {
  }
  onNearOfBottom () {
-    // Last page
+    if (!hasMoreItems(this.pagination)) return
-    if (this.pagination.totalItems <= (this.pagination.currentPage * this.pagination.itemsPerPage)) return
    this.pagination.currentPage += 1
    this.loadVideoPlaylists()
diff --git a/client/src/app/+video-channels/video-channel-videos/video-channel-videos.component.ts b/client/src/app/+video-channels/video-channel-videos/video-channel-videos.component.ts
index 5e60b34b4..629fd4450 100644
--- a/client/src/app/+video-channels/video-channel-videos/video-channel-videos.component.ts
+++ b/client/src/app/+video-channels/video-channel-videos/video-channel-videos.component.ts
@@ -29,6 +29,7 @@ export class VideoChannelVideosComponent extends AbstractVideoList implements On
  private videoChannelSub: Subscription
  constructor (
+    protected i18n: I18n,
    protected router: Router,
    protected serverService: ServerService,
    protected route: ActivatedRoute,
@@ -36,7 +37,6 @@ export class VideoChannelVideosComponent extends AbstractVideoList implements On
    protected notifier: Notifier,
    protected confirmService: ConfirmService,
    protected screenService: ScreenService,
-    private i18n: I18n,
    private videoChannelService: VideoChannelService,
    private videoService: VideoService
  ) {
diff --git a/client/src/app/app-routing.module.ts b/client/src/app/app-routing.module.ts
index db8888dba..7ca51f226 100644
--- a/client/src/app/app-routing.module.ts
+++ b/client/src/app/app-routing.module.ts
@@ -16,7 +16,7 @@ const routes: Routes = [
  },
  {
    path: 'verify-account',
-    loadChildren: './+verify-account/verify-account.module#VerifyAccountModule'
+    loadChildren: './+signup/+verify-account/verify-account.module#VerifyAccountModule'
  },
  {
    path: 'accounts',
@@ -31,6 +31,10 @@ const routes: Routes = [
    loadChildren: './+about/about.module#AboutModule'
  },
  {
+    path: 'signup',
+    loadChildren: './+signup/+register/register.module#RegisterModule'
+  },
+  {
    path: '',
    component: AppComponent // Avoid 404, app component will redirect dynamically
  },
diff --git a/client/src/app/app.module.ts b/client/src/app/app.module.ts
index 0bbc2e08b..1e2936a37 100644
--- a/client/src/app/app.module.ts
+++ b/client/src/app/app.module.ts
@@ -14,7 +14,6 @@ import { HeaderComponent } from './header'
 import { LoginModule } from './login'
 import { AvatarNotificationComponent, LanguageChooserComponent, MenuComponent } from './menu'
 import { SharedModule } from './shared'
-import { SignupModule } from './signup'
 import { VideosModule } from './videos'
 import { buildFileLocale, getCompleteLocale, isDefaultLocale } from '../../../shared/models/i18n'
 import { getDevLocale, isOnDevLocale } from '@app/shared/i18n/i18n-utils'
@@ -53,7 +52,6 @@ export function metaFactory (serverService: ServerService): MetaLoader {
    CoreModule,
    LoginModule,
    ResetPasswordModule,
-    SignupModule,
    SearchModule,
    SharedModule,
    VideosModule,
diff --git a/client/src/app/core/core.module.ts b/client/src/app/core/core.module.ts
index d3e72afb4..06fa8fcf1 100644
--- a/client/src/app/core/core.module.ts
+++ b/client/src/app/core/core.module.ts
@@ -20,6 +20,7 @@ import { Notifier } from './notification'
 import { MessageService } from 'primeng/api'
 import { UserNotificationSocket } from '@app/core/notification/user-notification-socket.service'
 import { ServerConfigResolver } from './routing/server-config-resolver.service'
+import { UnloggedGuard } from '@app/core/routing/unlogged-guard.service'
 @NgModule({
  imports: [
@@ -58,6 +59,8 @@ import { ServerConfigResolver } from './routing/server-config-resolver.service'
    ThemeService,
    LoginGuard,
    UserRightGuard,
+    UnloggedGuard,
    RedirectService,
    Notifier,
    MessageService,
diff --git a/client/src/app/core/routing/redirect.service.ts b/client/src/app/core/routing/redirect.service.ts
index e1db4097b..571822b76 100644
--- a/client/src/app/core/routing/redirect.service.ts
+++ b/client/src/app/core/routing/redirect.service.ts
@@ -42,7 +42,14 @@ export class RedirectService {
  }
  redirectToPreviousRoute () {
-    if (this.previousUrl) return this.router.navigateByUrl(this.previousUrl)
+    const exceptions = [
+      '/verify-account'
+    ]
+    if (this.previousUrl) {
+      const isException = exceptions.find(e => this.previousUrl.startsWith(e))
+      if (!isException) return this.router.navigateByUrl(this.previousUrl)
+    }
    return this.redirectToHomepage()
  }
diff --git a/client/src/app/core/routing/unlogged-guard.service.ts b/client/src/app/core/routing/unlogged-guard.service.ts
new file mode 100644
index 000000000..3132a1a77
--- /dev/null
+++ b/client/src/app/core/routing/unlogged-guard.service.ts
@@ -0,0 +1,25 @@
+import { Injectable } from '@angular/core'
+import { ActivatedRouteSnapshot, CanActivate, CanActivateChild, Router, RouterStateSnapshot } from '@angular/router'
+import { AuthService } from '../auth/auth.service'
+import { RedirectService } from './redirect.service'
+@Injectable()
+export class UnloggedGuard implements CanActivate, CanActivateChild {
+  constructor (
+    private router: Router,
+    private auth: AuthService,
+    private redirectService: RedirectService
+  ) {}
+  canActivate (route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
+    if (this.auth.isLoggedIn() === false) return true
+    this.redirectService.redirectToHomepage()
+    return false
+  }
+  canActivateChild (route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
+    return this.canActivate(route, state)
+  }
+}
diff --git a/client/src/app/shared/actor/actor.model.ts b/client/src/app/shared/actor/actor.model.ts
index adecec1fc..5a517c975 100644
--- a/client/src/app/shared/actor/actor.model.ts
+++ b/client/src/app/shared/actor/actor.model.ts
@@ -4,7 +4,6 @@ import { getAbsoluteAPIUrl } from '@app/shared/misc/utils'
 export abstract class Actor implements ActorServer {
  id: number
-  uuid: string
  url: string
  name: string
  host: string
@@ -35,7 +34,6 @@ export abstract class Actor implements ActorServer {
  protected constructor (hash: ActorServer) {
    this.id = hash.id
-    this.uuid = hash.uuid
    this.url = hash.url
    this.name = hash.name
    this.host = hash.host
diff --git a/client/src/app/shared/buttons/button.component.scss b/client/src/app/shared/buttons/button.component.scss
index 04199a2a9..99d7f51c1 100644
--- a/client/src/app/shared/buttons/button.component.scss
+++ b/client/src/app/shared/buttons/button.component.scss
@@ -5,16 +5,9 @@
  @include peertube-button-link;
  @include button-with-icon(21px, 0, -2px);
-  font-weight: $font-semibold;
+  // FIXME: Firefox does not apply global .orange-button icon color
-  color: $grey-foreground-color;
+  &.orange-button {
-  background-color: $grey-background-color;
+    @include apply-svg-color(#fff)
-  &:hover {
-    background-color: $grey-background-hover-color;
-  }
-  my-global-icon {
-    @include apply-svg-color($grey-foreground-color);
  }
 }
diff --git a/client/src/app/shared/buttons/button.component.ts b/client/src/app/shared/buttons/button.component.ts
index c2b69d31a..cf334e8d5 100644
--- a/client/src/app/shared/buttons/button.component.ts
+++ b/client/src/app/shared/buttons/button.component.ts
@@ -9,7 +9,7 @@ import { GlobalIconName } from '@app/shared/images/global-icon.component'
 export class ButtonComponent {
  @Input() label = ''
-  @Input() className: string = undefined
+  @Input() className = 'grey-button'
  @Input() icon: GlobalIconName = undefined
  @Input() title: string = undefined
diff --git a/client/src/app/shared/buttons/delete-button.component.html b/client/src/app/shared/buttons/delete-button.component.html
index b4acb9d32..25196fbd5 100644
--- a/client/src/app/shared/buttons/delete-button.component.html
+++ b/client/src/app/shared/buttons/delete-button.component.html
@@ -1,4 +1,4 @@
-<span class="action-button action-button-delete" [title]="title" role="button">
+<span class="action-button action-button-delete grey-button" [title]="title" role="button">
  <my-global-icon iconName="delete"></my-global-icon>
  <span class="button-label" *ngIf="label">{{ label }}</span>
diff --git a/client/src/app/shared/buttons/edit-button.component.html b/client/src/app/shared/buttons/edit-button.component.html
index da3addbae..3d7cd4780 100644
--- a/client/src/app/shared/buttons/edit-button.component.html
+++ b/client/src/app/shared/buttons/edit-button.component.html
@@ -1,4 +1,4 @@
-<a class="action-button action-button-edit" [routerLink]="routerLink" i18n-title title="Edit">
+<a class="action-button action-button-edit grey-button" [routerLink]="routerLink" i18n-title title="Edit">
  <my-global-icon iconName="edit"></my-global-icon>
  <span class="button-label" *ngIf="label">{{ label }}</span>
diff --git a/client/src/app/shared/forms/peertube-checkbox.component.scss b/client/src/app/shared/forms/peertube-checkbox.component.scss
index ea321ee65..84ea788af 100644
--- a/client/src/app/shared/forms/peertube-checkbox.component.scss
+++ b/client/src/app/shared/forms/peertube-checkbox.component.scss
@@ -14,9 +14,6 @@
    input {
      @include peertube-checkbox(1px);
-      width: 10px;
-      margin-right: 10px;
    }
  }
diff --git a/client/src/app/shared/forms/reactive-file.component.html b/client/src/app/shared/forms/reactive-file.component.html
index 7d691059d..f6bf5f9ae 100644
--- a/client/src/app/shared/forms/reactive-file.component.html
+++ b/client/src/app/shared/forms/reactive-file.component.html
@@ -1,6 +1,9 @@
 <div class="root">
-  <div class="button-file">
+  <div class="button-file" [ngClass]="{ 'with-icon': !!icon }">
+    <my-global-icon *ngIf="icon" [iconName]="icon"></my-global-icon>
    <span>{{ inputLabel }}</span>
    <input
      type="file"
      [name]="inputName" [id]="inputName" [accept]="extensions"
@@ -8,7 +11,5 @@
    />
  </div>
-  <div i18n class="file-constraints">(extensions: {{ allowedExtensionsMessage }}, max size: {{ maxFileSize | bytes }})</div>
  <div class="filename" *ngIf="displayFilename === true && filename">{{ filename }}</div>
 </div>
diff --git a/client/src/app/shared/forms/reactive-file.component.scss b/client/src/app/shared/forms/reactive-file.component.scss
index d89844264..84c23c1d6 100644
--- a/client/src/app/shared/forms/reactive-file.component.scss
+++ b/client/src/app/shared/forms/reactive-file.component.scss
@@ -8,13 +8,11 @@
  .button-file {
    @include peertube-button-file(auto);
+    @include grey-button;
-    min-width: 190px;
+    &.with-icon {
-  }
+      @include button-with-icon;
+    }
-  .file-constraints {
-    margin-left: 5px;
-    font-size: 13px;
  }
  .filename {
diff --git a/client/src/app/shared/forms/reactive-file.component.ts b/client/src/app/shared/forms/reactive-file.component.ts
index f60c38e8d..b7a821d4f 100644
--- a/client/src/app/shared/forms/reactive-file.component.ts
+++ b/client/src/app/shared/forms/reactive-file.component.ts
@@ -2,6 +2,7 @@ import { Component, EventEmitter, forwardRef, Input, OnInit, Output } from '@ang
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'
 import { Notifier } from '@app/core'
 import { I18n } from '@ngx-translate/i18n-polyfill'
+import { GlobalIconName } from '@app/shared/images/global-icon.component'
 @Component({
  selector: 'my-reactive-file',
@@ -21,6 +22,7 @@ export class ReactiveFileComponent implements OnInit, ControlValueAccessor {
  @Input() extensions: string[] = []
  @Input() maxFileSize: number
  @Input() displayFilename = false
+  @Input() icon: GlobalIconName
  @Output() fileChanged = new EventEmitter<Blob>()
diff --git a/client/src/app/shared/images/image-upload.component.html b/client/src/app/shared/images/image-upload.component.html
deleted file mode 100644
index c09c862c4..000000000
--- a/client/src/app/shared/images/image-upload.component.html
+++ /dev/null
@@ -1,9 +0,0 @@
-<div class="root">
-  <my-reactive-file
-    [inputName]="inputName" [inputLabel]="inputLabel" [extensions]="videoImageExtensions" [maxFileSize]="maxVideoImageSize"
-    (fileChanged)="onFileChanged($event)"
-  ></my-reactive-file>
-  <img *ngIf="imageSrc" [ngStyle]="{ width: previewWidth, height: previewHeight }" [src]="imageSrc" class="preview" />
-  <div *ngIf="!imageSrc" [ngStyle]="{ width: previewWidth, height: previewHeight }" class="preview no-image"></div>
-</div>
diff --git a/client/src/app/shared/images/image-upload.component.scss b/client/src/app/shared/images/image-upload.component.scss
deleted file mode 100644
index b63963bca..000000000
--- a/client/src/app/shared/images/image-upload.component.scss
+++ /dev/null
@@ -1,18 +0,0 @@
-@import '_variables';
-@import '_mixins';
-.root {
-  height: auto;
-  display: flex;
-  align-items: center;
-  .preview {
-    border: 2px solid grey;
-    border-radius: 4px;
-    margin-left: 50px;
-    &.no-image {
-      background-color: #ececec;
-    }
-  }
-}
diff --git a/client/src/app/shared/images/preview-upload.component.html b/client/src/app/shared/images/preview-upload.component.html
new file mode 100644
index 000000000..5e1d5211b
--- /dev/null
+++ b/client/src/app/shared/images/preview-upload.component.html
@@ -0,0 +1,13 @@
+<div class="root">
+  <div class="preview-container">
+    <my-reactive-file
+      [inputName]="inputName" [inputLabel]="inputLabel" [extensions]="videoImageExtensions" [maxFileSize]="maxVideoImageSize"
+      icon="edit" (fileChanged)="onFileChanged($event)"
+    ></my-reactive-file>
+    <img *ngIf="imageSrc" [ngStyle]="{ width: previewWidth, height: previewHeight }" [src]="imageSrc" class="preview" />
+    <div *ngIf="!imageSrc" [ngStyle]="{ width: previewWidth, height: previewHeight }" class="preview no-image"></div>
+  </div>
+  <div i18n class="file-constraints">(extensions: {{ allowedExtensionsMessage }}, max size: {{ maxVideoImageSize | bytes }})</div>
+</div>
diff --git a/client/src/app/shared/images/preview-upload.component.scss b/client/src/app/shared/images/preview-upload.component.scss
new file mode 100644
index 000000000..257060239
--- /dev/null
+++ b/client/src/app/shared/images/preview-upload.component.scss
@@ -0,0 +1,27 @@
+@import '_variables';
+@import '_mixins';
+.root {
+  height: auto;
+  display: flex;
+  flex-direction: column;
+  .preview-container {
+    position: relative;
+    my-reactive-file {
+      position: absolute;
+      bottom: 10px;
+      left: 10px;
+    }
+    .preview {
+      border: 2px solid grey;
+      border-radius: 4px;
+      &.no-image {
+        background-color: #ececec;
+      }
+    }
+  }
+}
diff --git a/client/src/app/shared/images/image-upload.component.ts b/client/src/app/shared/images/preview-upload.component.ts
index 2da1592ff..44b78866e 100644
--- a/client/src/app/shared/images/image-upload.component.ts
+++ b/client/src/app/shared/images/preview-upload.component.ts
@@ -1,27 +1,28 @@
-import { Component, forwardRef, Input } from '@angular/core'
+import { Component, forwardRef, Input, OnInit } from '@angular/core'
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'
 import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser'
 import { ServerService } from '@app/core'
 @Component({
-  selector: 'my-image-upload',
+  selector: 'my-preview-upload',
-  styleUrls: [ './image-upload.component.scss' ],
+  styleUrls: [ './preview-upload.component.scss' ],
-  templateUrl: './image-upload.component.html',
+  templateUrl: './preview-upload.component.html',
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
-      useExisting: forwardRef(() => ImageUploadComponent),
+      useExisting: forwardRef(() => PreviewUploadComponent),
      multi: true
    }
  ]
 })
-export class ImageUploadComponent implements ControlValueAccessor {
+export class PreviewUploadComponent implements OnInit, ControlValueAccessor {
  @Input() inputLabel: string
  @Input() inputName: string
  @Input() previewWidth: string
  @Input() previewHeight: string
  imageSrc: SafeResourceUrl
+  allowedExtensionsMessage = ''
  private file: File
@@ -38,6 +39,10 @@ export class ImageUploadComponent implements ControlValueAccessor {
    return this.serverService.getConfig().video.image.size.max
  }
+  ngOnInit () {
+    this.allowedExtensionsMessage = this.videoImageExtensions.join(', ')
+  }
  onFileChanged (file: File) {
    this.file = file
diff --git a/client/src/app/shared/shared.module.ts b/client/src/app/shared/shared.module.ts
index ded65653f..39f1a69e2 100644
--- a/client/src/app/shared/shared.module.ts
+++ b/client/src/app/shared/shared.module.ts
@@ -69,7 +69,7 @@ import { HtmlRendererService, LinkifierService, MarkdownService } from '@app/sha
 import { ConfirmComponent } from '@app/shared/confirm/confirm.component'
 import { SmallLoaderComponent } from '@app/shared/misc/small-loader.component'
 import { VideoPlaylistService } from '@app/shared/video-playlist/video-playlist.service'
-import { ImageUploadComponent } from '@app/shared/images/image-upload.component'
+import { PreviewUploadComponent } from '@app/shared/images/preview-upload.component'
 import { GlobalIconComponent } from '@app/shared/images/global-icon.component'
 import { VideoPlaylistMiniatureComponent } from '@app/shared/video-playlist/video-playlist-miniature.component'
 import { VideoAddToPlaylistComponent } from '@app/shared/video-playlist/video-add-to-playlist.component'
@@ -154,7 +154,7 @@ import { ClipboardModule } from 'ngx-clipboard'
    ConfirmComponent,
    GlobalIconComponent,
-    ImageUploadComponent
+    PreviewUploadComponent
  ],
  exports: [
@@ -218,7 +218,7 @@ import { ClipboardModule } from 'ngx-clipboard'
    ConfirmComponent,
    GlobalIconComponent,
-    ImageUploadComponent,
+    PreviewUploadComponent,
    NumberFormatterPipe,
    ObjectLengthPipe,
diff --git a/client/src/app/shared/users/user.service.ts b/client/src/app/shared/users/user.service.ts
index cc5c051f1..20883456f 100644
--- a/client/src/app/shared/users/user.service.ts
+++ b/client/src/app/shared/users/user.service.ts
@@ -9,6 +9,7 @@ import { Avatar } from '../../../../../shared/models/avatars/avatar.model'
 import { SortMeta } from 'primeng/api'
 import { BytesPipe } from 'ngx-pipes'
 import { I18n } from '@ngx-translate/i18n-polyfill'
+import { UserRegister } from '@shared/models/users/user-register.model'
 @Injectable()
 export class UserService {
@@ -64,7 +65,7 @@ export class UserService {
               .pipe(catchError(err => this.restExtractor.handleError(err)))
  }
-  signup (userCreate: UserCreate) {
+  signup (userCreate: UserRegister) {
    return this.authHttp.post(UserService.BASE_USERS_URL + 'register', userCreate)
               .pipe(
                 map(this.restExtractor.extractDataBool),
diff --git a/client/src/app/shared/video-channel/video-channel.service.ts b/client/src/app/shared/video-channel/video-channel.service.ts
index d0bec649a..0168d37d9 100644
--- a/client/src/app/shared/video-channel/video-channel.service.ts
+++ b/client/src/app/shared/video-channel/video-channel.service.ts
@@ -2,7 +2,7 @@ import { catchError, map, tap } from 'rxjs/operators'
 import { Injectable } from '@angular/core'
 import { Observable, ReplaySubject } from 'rxjs'
 import { RestExtractor } from '../rest/rest-extractor.service'
-import { HttpClient } from '@angular/common/http'
+import { HttpClient, HttpParams } from '@angular/common/http'
 import { VideoChannel as VideoChannelServer, VideoChannelCreate, VideoChannelUpdate } from '../../../../../shared/models/videos'
 import { AccountService } from '../account/account.service'
 import { ResultList } from '../../../../../shared'
@@ -10,6 +10,8 @@ import { VideoChannel } from './video-channel.model'
 import { environment } from '../../../environments/environment'
 import { Account } from '@app/shared/account/account.model'
 import { Avatar } from '../../../../../shared/models/avatars/avatar.model'
+import { ComponentPagination } from '@app/shared/rest/component-pagination.model'
+import { RestService } from '@app/shared/rest'
 @Injectable()
 export class VideoChannelService {
@@ -29,6 +31,7 @@ export class VideoChannelService {
  constructor (
    private authHttp: HttpClient,
+    private restService: RestService,
    private restExtractor: RestExtractor
  ) { }
@@ -41,8 +44,16 @@ export class VideoChannelService {
               )
  }
-  listAccountVideoChannels (account: Account): Observable<ResultList<VideoChannel>> {
+  listAccountVideoChannels (account: Account, componentPagination?: ComponentPagination): Observable<ResultList<VideoChannel>> {
-    return this.authHttp.get<ResultList<VideoChannelServer>>(AccountService.BASE_ACCOUNT_URL + account.nameWithHost + '/video-channels')
+    const pagination = componentPagination
+      ? this.restService.componentPaginationToRestPagination(componentPagination)
+      : { start: 0, count: 20 }
+    let params = new HttpParams()
+    params = this.restService.addRestGetParams(params, pagination)
+    const url = AccountService.BASE_ACCOUNT_URL + account.nameWithHost + '/video-channels'
+    return this.authHttp.get<ResultList<VideoChannelServer>>(url, { params })
               .pipe(
                 map(res => VideoChannelService.extractVideoChannels(res)),
                 catchError(err => this.restExtractor.handleError(err))
diff --git a/client/src/app/shared/video/abstract-video-list.html b/client/src/app/shared/video/abstract-video-list.html
index 268677977..11cf1bd92 100644
--- a/client/src/app/shared/video/abstract-video-list.html
+++ b/client/src/app/shared/video/abstract-video-list.html
@@ -6,7 +6,7 @@
      </div>
    </div>
-    <my-feed [syndicationItems]="syndicationItems"></my-feed>
+    <my-feed *ngIf="titlePage" [syndicationItems]="syndicationItems"></my-feed>
    <div class="moderation-block" *ngIf="displayModerationBlock">
      <my-peertube-checkbox
@@ -22,11 +22,18 @@
    myInfiniteScroller (nearOfBottom)="onNearOfBottom()" [autoInit]="true"
    class="videos"
  >
-    <my-video-miniature
+    <ng-container *ngFor="let video of videos; trackBy: videoById;">
-      *ngFor="let video of videos; trackBy: videoById" [video]="video" [user]="user" [ownerDisplayType]="ownerDisplayType"
+      <div class="date-title" *ngIf="getCurrentGroupedDateLabel(video)">
-      [displayVideoActions]="displayVideoActions" [displayOptions]="displayOptions"
+        {{ getCurrentGroupedDateLabel(video) }}
-      (videoBlacklisted)="removeVideoFromArray(video)" (videoRemoved)="removeVideoFromArray(video)"
+      </div>
-    >
-    </my-video-miniature>
+      <my-video-miniature
+        [video]="video" [user]="user" [ownerDisplayType]="ownerDisplayType"
+        [displayVideoActions]="displayVideoActions" [displayOptions]="displayOptions"
+        (videoBlacklisted)="removeVideoFromArray(video)" (videoRemoved)="removeVideoFromArray(video)"
+      >
+      </my-video-miniature>
+    </ng-container>
  </div>
 </div>
diff --git a/client/src/app/shared/video/abstract-video-list.scss b/client/src/app/shared/video/abstract-video-list.scss
index 9d481d6e4..98b80fdfd 100644
--- a/client/src/app/shared/video/abstract-video-list.scss
+++ b/client/src/app/shared/video/abstract-video-list.scss
@@ -24,33 +24,19 @@
  }
 }
-.margin-content {
+.date-title {
-  width: $video-miniature-width * 6;
+  font-size: 16px;
-  margin: auto !important;
+  font-weight: $font-semibold;
+  margin-bottom: 20px;
-  @media screen and (max-width: 1800px) {
+  margin-top: -10px;
-    width: $video-miniature-width * 5;
+  padding-top: 20px;
-  }
-  @media screen and (max-width: 1800px - $video-miniature-width) {
+  &:not(:first-child) {
-    width: $video-miniature-width * 4;
+    border-top: 1px solid $separator-border-color;
  }
+}
-  @media screen and (max-width: 1800px - (2* $video-miniature-width)) {
+.margin-content {
-    width: $video-miniature-width * 3;
+  @include adapt-margin-content-width;
-  }
-  @media screen and (max-width: 1800px - (3* $video-miniature-width)) {
-    width: $video-miniature-width * 2;
-  }
-  @media screen and (max-width: 500px) {
-    width: auto;
-    margin: 0 !important;
-    .videos {
-      @include video-miniature-small-screen;
-    }
-  }
 }
diff --git a/client/src/app/shared/video/abstract-video-list.ts b/client/src/app/shared/video/abstract-video-list.ts
index fa9d38735..eba05c07d 100644
--- a/client/src/app/shared/video/abstract-video-list.ts
+++ b/client/src/app/shared/video/abstract-video-list.ts
@@ -11,6 +11,17 @@ import { MiniatureDisplayOptions, OwnerDisplayType } from '@app/shared/video/vid
 import { Syndication } from '@app/shared/video/syndication.model'
 import { Notifier, ServerService } from '@app/core'
 import { DisableForReuseHook } from '@app/core/routing/disable-for-reuse-hook'
+import { I18n } from '@ngx-translate/i18n-polyfill'
+import { isThisMonth, isThisWeek, isToday, isYesterday } from '@shared/core-utils/miscs/date'
+enum GroupDate {
+  UNKNOWN = 0,
+  TODAY = 1,
+  YESTERDAY = 2,
+  THIS_WEEK = 3,
+  THIS_MONTH = 4,
+  OLDER = 5
+}
 export abstract class AbstractVideoList implements OnInit, OnDestroy, DisableForReuseHook {
  pagination: ComponentPagination = {
@@ -31,6 +42,7 @@ export abstract class AbstractVideoList implements OnInit, OnDestroy, DisableFor
  displayModerationBlock = false
  titleTooltip: string
  displayVideoActions = true
+  groupByDate = false
  disabled = false
@@ -50,11 +62,15 @@ export abstract class AbstractVideoList implements OnInit, OnDestroy, DisableFor
  protected abstract serverService: ServerService
  protected abstract screenService: ScreenService
  protected abstract router: Router
+  protected abstract i18n: I18n
  abstract titlePage: string
  private resizeSubscription: Subscription
  private angularState: number
+  private groupedDateLabels: { [id in GroupDate]: string }
+  private groupedDates: { [id: number]: GroupDate } = {}
  abstract getVideosObservable (page: number): Observable<{ videos: Video[], totalVideos: number }>
  abstract generateSyndicationList (): void
@@ -64,6 +80,15 @@ export abstract class AbstractVideoList implements OnInit, OnDestroy, DisableFor
  }
  ngOnInit () {
+    this.groupedDateLabels = {
+      [GroupDate.UNKNOWN]: null,
+      [GroupDate.TODAY]: this.i18n('Today'),
+      [GroupDate.YESTERDAY]: this.i18n('Yesterday'),
+      [GroupDate.THIS_WEEK]: this.i18n('This week'),
+      [GroupDate.THIS_MONTH]: this.i18n('This month'),
+      [GroupDate.OLDER]: this.i18n('Older')
+    }
    // Subscribe to route changes
    const routeParams = this.route.snapshot.queryParams
    this.loadRouteParams(routeParams)
@@ -113,6 +138,8 @@ export abstract class AbstractVideoList implements OnInit, OnDestroy, DisableFor
        this.pagination.totalItems = totalVideos
        this.videos = this.videos.concat(videos)
+        if (this.groupByDate) this.buildGroupedDateLabels()
        this.onMoreVideos()
      },
@@ -134,6 +161,49 @@ export abstract class AbstractVideoList implements OnInit, OnDestroy, DisableFor
    this.videos = this.videos.filter(v => v.id !== video.id)
  }
+  buildGroupedDateLabels () {
+    let currentGroupedDate: GroupDate = GroupDate.UNKNOWN
+    for (const video of this.videos) {
+      const publishedDate = video.publishedAt
+      if (currentGroupedDate < GroupDate.TODAY && isToday(publishedDate)) {
+        currentGroupedDate = GroupDate.TODAY
+        this.groupedDates[ video.id ] = currentGroupedDate
+        continue
+      }
+      if (currentGroupedDate < GroupDate.YESTERDAY && isYesterday(publishedDate)) {
+        currentGroupedDate = GroupDate.YESTERDAY
+        this.groupedDates[ video.id ] = currentGroupedDate
+        continue
+      }
+      if (currentGroupedDate < GroupDate.THIS_WEEK && isThisWeek(publishedDate)) {
+        currentGroupedDate = GroupDate.THIS_WEEK
+        this.groupedDates[ video.id ] = currentGroupedDate
+        continue
+      }
+      if (currentGroupedDate < GroupDate.THIS_MONTH && isThisMonth(publishedDate)) {
+        currentGroupedDate = GroupDate.THIS_MONTH
+        this.groupedDates[ video.id ] = currentGroupedDate
+        continue
+      }
+      if (currentGroupedDate < GroupDate.OLDER) {
+        currentGroupedDate = GroupDate.OLDER
+        this.groupedDates[ video.id ] = currentGroupedDate
+      }
+    }
+  }
+  getCurrentGroupedDateLabel (video: Video) {
+    if (this.groupByDate === false) return undefined
+    return this.groupedDateLabels[this.groupedDates[video.id]]
+  }
  // On videos hook for children that want to do something
  protected onMoreVideos () { /* empty */ }
diff --git a/client/src/app/shared/video/modals/video-download.component.ts b/client/src/app/shared/video/modals/video-download.component.ts
index d6d10d29e..a07560f87 100644
--- a/client/src/app/shared/video/modals/video-download.component.ts
+++ b/client/src/app/shared/video/modals/video-download.component.ts
@@ -1,6 +1,6 @@
 import { Component, ElementRef, ViewChild } from '@angular/core'
 import { VideoDetails } from '../../../shared/video/video-details.model'
-import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
+import { NgbActiveModal, NgbModal } from '@ng-bootstrap/ng-bootstrap'
 import { I18n } from '@ngx-translate/i18n-polyfill'
 import { Notifier } from '@app/core'
@@ -16,6 +16,7 @@ export class VideoDownloadComponent {
  resolutionId: number | string = -1
  video: VideoDetails
+  activeModal: NgbActiveModal
  constructor (
    private notifier: Notifier,
@@ -26,9 +27,7 @@ export class VideoDownloadComponent {
  show (video: VideoDetails) {
    this.video = video
-    const m = this.modalService.open(this.modal)
+    this.activeModal = this.modalService.open(this.modal)
-    m.result.then(() => this.onClose())
-     .catch(() => this.onClose())
    this.resolutionId = this.video.files[0].resolution.id
  }
@@ -39,6 +38,7 @@ export class VideoDownloadComponent {
  download () {
    window.location.assign(this.getLink())
+    this.activeModal.close()
  }
  getLink () {
diff --git a/client/src/app/shared/video/video-details.model.ts b/client/src/app/shared/video/video-details.model.ts
index 22f024656..e4d443a06 100644
--- a/client/src/app/shared/video/video-details.model.ts
+++ b/client/src/app/shared/video/video-details.model.ts
@@ -1,5 +1,4 @@
-import { UserRight, VideoConstant, VideoDetails as VideoDetailsServerModel, VideoFile, VideoState } from '../../../../../shared'
+import { VideoConstant, VideoDetails as VideoDetailsServerModel, VideoFile, VideoState } from '../../../../../shared'
-import { AuthUser } from '../../core'
 import { Video } from '../../shared/video/video.model'
 import { Account } from '@app/shared/account/account.model'
 import { VideoChannel } from '@app/shared/video-channel/video-channel.model'
diff --git a/client/src/app/shared/video/video-edit.model.ts b/client/src/app/shared/video/video-edit.model.ts
index 1f633d427..67d8e7711 100644
--- a/client/src/app/shared/video/video-edit.model.ts
+++ b/client/src/app/shared/video/video-edit.model.ts
@@ -85,6 +85,11 @@ export class VideoEdit implements VideoUpdate {
      const originallyPublishedAt = new Date(values['originallyPublishedAt'])
      this.originallyPublishedAt = originallyPublishedAt.toISOString()
    }
+    // Use the same file than the preview for the thumbnail
+    if (this.previewfile) {
+      this.thumbnailfile = this.previewfile
+    }
  }
  toFormPatch () {
diff --git a/client/src/app/shared/video/video.model.ts b/client/src/app/shared/video/video.model.ts
index 0cef3eb8f..6f9de9241 100644
--- a/client/src/app/shared/video/video.model.ts
+++ b/client/src/app/shared/video/video.model.ts
@@ -52,7 +52,6 @@ export class Video implements VideoServerModel {
  account: {
    id: number
-    uuid: string
    name: string
    displayName: string
    url: string
@@ -62,7 +61,6 @@ export class Video implements VideoServerModel {
  channel: {
    id: number
-    uuid: string
    name: string
    displayName: string
    url: string
diff --git a/client/src/app/shared/video/videos-selection.component.ts b/client/src/app/shared/video/videos-selection.component.ts
index 955ebca9f..d69f7b70e 100644
--- a/client/src/app/shared/video/videos-selection.component.ts
+++ b/client/src/app/shared/video/videos-selection.component.ts
@@ -20,6 +20,7 @@ import { Video } from '@app/shared/video/video.model'
 import { PeerTubeTemplateDirective } from '@app/shared/angular/peertube-template.directive'
 import { VideoSortField } from '@app/shared/video/sort-field.type'
 import { ComponentPagination } from '@app/shared/rest/component-pagination.model'
+import { I18n } from '@ngx-translate/i18n-polyfill'
 export type SelectionType = { [ id: number ]: boolean }
@@ -44,6 +45,7 @@ export class VideosSelectionComponent extends AbstractVideoList implements OnIni
  globalButtonsTemplate: TemplateRef<any>
  constructor (
+    protected i18n: I18n,
    protected router: Router,
    protected route: ActivatedRoute,
    protected notifier: Notifier,
diff --git a/client/src/app/signup/index.ts b/client/src/app/signup/index.ts
deleted file mode 100644
index b0aca9723..000000000
--- a/client/src/app/signup/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export * from './signup-routing.module'
-export * from './signup.component'
-export * from './signup.module'
diff --git a/client/src/app/signup/signup.component.html b/client/src/app/signup/signup.component.html
deleted file mode 100644
index 07d24b381..000000000
--- a/client/src/app/signup/signup.component.html
+++ /dev/null
@@ -1,72 +0,0 @@
-<div class="margin-content">
-  <div i18n class="title-page title-page-single">
-    Create an account
-  </div>
-  <div *ngIf="info" class="alert alert-info">{{ info }}</div>
-  <div *ngIf="error" class="alert alert-danger">{{ error }}</div>
-  <div class="d-flex justify-content-left flex-wrap">
-    <form role="form" (ngSubmit)="signup()" [formGroup]="form">
-      <div class="form-group">
-        <label for="username" i18n>Username</label>
-        <div class="input-group">
-          <input
-            type="text" id="username" i18n-placeholder placeholder="Example: jane_doe"
-            formControlName="username" [ngClass]="{ 'input-error': formErrors['username'] }"
-          >
-          <div class="input-group-append">
-            <span class="input-group-text">@{{ instanceHost }}</span>
-          </div>
-        </div>
-        <div *ngIf="formErrors.username" class="form-error">
-          {{ formErrors.username }}
-        </div>
-      </div>
-      <div class="form-group">
-        <label for="email" i18n>Email</label>
-        <input
-          type="text" id="email" i18n-placeholder placeholder="Email"
-          formControlName="email" [ngClass]="{ 'input-error': formErrors['email'] }"
-        >
-        <div *ngIf="formErrors.email" class="form-error">
-          {{ formErrors.email }}
-        </div>
-      </div>
-      <div class="form-group">
-        <label for="password" i18n>Password</label>
-        <input
-          type="password" id="password" i18n-placeholder placeholder="Password"
-          formControlName="password" [ngClass]="{ 'input-error': formErrors['password'] }"
-        >
-        <div *ngIf="formErrors.password" class="form-error">
-          {{ formErrors.password }}
-        </div>
-      </div>
-      <div class="form-group form-group-terms">
-        <my-peertube-checkbox
-          inputName="terms" formControlName="terms"
-          i18n-labelHtml labelHtml="I am at least 16 years old and agree to the <a href='/about/instance#terms-section' target='_blank'rel='noopener noreferrer'>Terms</a> of this instance"
-        ></my-peertube-checkbox>
-        <div *ngIf="formErrors.terms" class="form-error">
-          {{ formErrors.terms }}
-        </div>
-      </div>
-      <input type="submit" i18n-value value="Signup" [disabled]="!form.valid || signupDone">
-    </form>
-    <div>
-      <label i18n>Features found on this instance</label>
-      <my-instance-features-table></my-instance-features-table>
-    </div>
-  </div>
-</div>
diff --git a/client/src/app/signup/signup.component.ts b/client/src/app/signup/signup.component.ts
deleted file mode 100644
index 13941ec79..000000000
--- a/client/src/app/signup/signup.component.ts
+++ /dev/null
@@ -1,78 +0,0 @@
-import { Component, OnInit } from '@angular/core'
-import { AuthService, Notifier, RedirectService, ServerService } from '@app/core'
-import { UserCreate } from '../../../../shared'
-import { FormReactive, UserService, UserValidatorsService } from '../shared'
-import { I18n } from '@ngx-translate/i18n-polyfill'
-import { FormValidatorService } from '@app/shared/forms/form-validators/form-validator.service'
-@Component({
-  selector: 'my-signup',
-  templateUrl: './signup.component.html',
-  styleUrls: [ './signup.component.scss' ]
-})
-export class SignupComponent extends FormReactive implements OnInit {
-  info: string = null
-  error: string = null
-  signupDone = false
-  constructor (
-    protected formValidatorService: FormValidatorService,
-    private authService: AuthService,
-    private userValidatorsService: UserValidatorsService,
-    private notifier: Notifier,
-    private userService: UserService,
-    private serverService: ServerService,
-    private redirectService: RedirectService,
-    private i18n: I18n
-  ) {
-    super()
-  }
-  get instanceHost () {
-    return window.location.host
-  }
-  get requiresEmailVerification () {
-    return this.serverService.getConfig().signup.requiresEmailVerification
-  }
-  ngOnInit () {
-    this.buildForm({
-      username: this.userValidatorsService.USER_USERNAME,
-      password: this.userValidatorsService.USER_PASSWORD,
-      email: this.userValidatorsService.USER_EMAIL,
-      terms: this.userValidatorsService.USER_TERMS
-    })
-  }
-  signup () {
-    this.error = null
-    const userCreate: UserCreate = this.form.value
-    this.userService.signup(userCreate).subscribe(
-      () => {
-        this.signupDone = true
-        if (this.requiresEmailVerification) {
-          this.info = this.i18n('Welcome! Now please check your emails to verify your account and complete signup.')
-          return
-        }
-        // Auto login
-        this.authService.login(userCreate.username, userCreate.password)
-            .subscribe(
-              () => {
-                this.notifier.success(this.i18n('You are now logged in as {{username}}!', { username: userCreate.username }))
-                this.redirectService.redirectToHomepage()
-              },
-              err => this.error = err.message
-            )
-      },
-      err => this.error = err.message
-    )
-  }
-}
diff --git a/client/src/app/signup/signup.module.ts b/client/src/app/signup/signup.module.ts
deleted file mode 100644
index 61560ddcf..000000000
--- a/client/src/app/signup/signup.module.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import { NgModule } from '@angular/core'
-import { SignupRoutingModule } from './signup-routing.module'
-import { SignupComponent } from './signup.component'
-import { SharedModule } from '../shared'
-@NgModule({
-  imports: [
-    SignupRoutingModule,
-    SharedModule
-  ],
-  declarations: [
-    SignupComponent
-  ],
-  exports: [
-    SignupComponent
-  ],
-  providers: [
-  ]
-})
-export class SignupModule { }
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 99695204d..28572d611 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
@@ -187,18 +187,14 @@
      <ng-template ngbTabContent>
        <div class="row advanced-settings">
          <div class="col-md-12 col-xl-8">
-            <div class="form-group">
-              <my-image-upload
-                i18n-inputLabel inputLabel="Upload thumbnail" inputName="thumbnailfile" formControlName="thumbnailfile"
-                previewWidth="200px" previewHeight="110px"
-              ></my-image-upload>
-            </div>
            <div class="form-group">
-              <my-image-upload
+              <label i18n for="previewfile">Video preview</label>
-                i18n-inputLabel inputLabel="Upload preview" inputName="previewfile" formControlName="previewfile"
+              <my-preview-upload
+                i18n-inputLabel inputLabel="Edit" inputName="previewfile" formControlName="previewfile"
                previewWidth="360px" previewHeight="200px"
-              ></my-image-upload>
+              ></my-preview-upload>
            </div>
            <div class="form-group">
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 c80efd802..95d397b52 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
@@ -100,7 +100,6 @@ export class VideoEditComponent implements OnInit, OnDestroy {
      language: this.videoValidatorsService.VIDEO_LANGUAGE,
      description: this.videoValidatorsService.VIDEO_DESCRIPTION,
      tags: null,
-      thumbnailfile: null,
      previewfile: null,
      support: this.videoValidatorsService.VIDEO_SUPPORT,
      schedulePublicationAt: this.videoValidatorsService.VIDEO_SCHEDULE_PUBLICATION_AT,
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 536769d2f..3247a2bd6 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
@@ -26,6 +26,27 @@
        </select>
      </div>
    </div>
+    <ng-container *ngIf="isUploadingAudioFile">
+      <div  class="form-group audio-preview">
+        <label i18n for="previewfileUpload">Video background image</label>
+        <div i18n class="audio-image-info">
+          Image that will be merged with your audio file.
+          <br />
+          The chosen image will be definitive and cannot be modified.
+        </div>
+        <my-preview-upload
+          i18n-inputLabel inputLabel="Edit" inputName="previewfileUpload" [(ngModel)]="previewfileUpload"
+          previewWidth="360px" previewHeight="200px"
+        ></my-preview-upload>
+      </div>
+      <div class="form-group upload-audio-button">
+        <my-button className="orange-button" i18n-label [label]="getAudioUploadLabel()" icon="upload" (click)="uploadFirstStep(true)"></my-button>
+      </div>
+    </ng-container>
  </div>
 </div>
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 8adf8f169..684342f09 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
@@ -1,9 +1,20 @@
 @import 'variables';
 @import 'mixins';
-.first-step-block .form-group-channel {
+.first-step-block {
-  margin-bottom: 20px;
-  margin-top: 35px;
+  .form-group-channel {
+    margin-bottom: 20px;
+    margin-top: 35px;
+  }
+  .audio-image-info {
+    margin-bottom: 10px;
+  }
+  .audio-preview {
+    margin: 30px 0;
+  }
 }
 .upload-progress-cancel {
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 d6d4bad21..73de25c59 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
@@ -35,8 +35,10 @@ export class VideoUploadComponent extends VideoSend implements OnInit, OnDestroy
  userVideoQuotaUsed = 0
  userVideoQuotaUsedDaily = 0
+  isUploadingAudioFile = false
  isUploadingVideo = false
  isUpdatingVideo = false
  videoUploaded = false
  videoUploadObservable: Subscription = null
  videoUploadPercents = 0
@@ -44,7 +46,9 @@ export class VideoUploadComponent extends VideoSend implements OnInit, OnDestroy
    id: 0,
    uuid: ''
  }
  waitTranscodingEnabled = true
+  previewfileUpload: File
  error: string
@@ -100,6 +104,17 @@ export class VideoUploadComponent extends VideoSend implements OnInit, OnDestroy
    }
  }
+  getVideoFile () {
+    return this.videofileInput.nativeElement.files[0]
+  }
+  getAudioUploadLabel () {
+    const videofile = this.getVideoFile()
+    if (!videofile) return this.i18n('Upload')
+    return this.i18n('Upload {{videofileName}}', { videofileName: videofile.name })
+  }
  fileChange () {
    this.uploadFirstStep()
  }
@@ -114,38 +129,15 @@ export class VideoUploadComponent extends VideoSend implements OnInit, OnDestroy
    }
  }
-  uploadFirstStep () {
+  uploadFirstStep (clickedOnButton = false) {
-    const videofile = this.videofileInput.nativeElement.files[0]
+    const videofile = this.getVideoFile()
    if (!videofile) return
-    // Check global user quota
+    if (!this.checkGlobalUserQuota(videofile)) return
-    const bytePipes = new BytesPipe()
+    if (!this.checkDailyUserQuota(videofile)) return
-    const videoQuota = this.authService.getUser().videoQuota
-    if (videoQuota !== -1 && (this.userVideoQuotaUsed + videofile.size) > videoQuota) {
-      const msg = this.i18n(
-        'Your video quota is exceeded with this video (video size: {{videoSize}}, used: {{videoQuotaUsed}}, quota: {{videoQuota}})',
-        {
-          videoSize: bytePipes.transform(videofile.size, 0),
-          videoQuotaUsed: bytePipes.transform(this.userVideoQuotaUsed, 0),
-          videoQuota: bytePipes.transform(videoQuota, 0)
-        }
-      )
-      this.notifier.error(msg)
-      return
-    }
-    // Check daily user quota
+    if (clickedOnButton === false && this.isAudioFile(videofile.name)) {
-    const videoQuotaDaily = this.authService.getUser().videoQuotaDaily
+      this.isUploadingAudioFile = true
-    if (videoQuotaDaily !== -1 && (this.userVideoQuotaUsedDaily + videofile.size) > videoQuotaDaily) {
-      const msg = this.i18n(
-        'Your daily video quota is exceeded with this video (video size: {{videoSize}}, used: {{quotaUsedDaily}}, quota: {{quotaDaily}})',
-        {
-          videoSize: bytePipes.transform(videofile.size, 0),
-          quotaUsedDaily: bytePipes.transform(this.userVideoQuotaUsedDaily, 0),
-          quotaDaily: bytePipes.transform(videoQuotaDaily, 0)
-        }
-      )
-      this.notifier.error(msg)
      return
    }
@@ -180,6 +172,11 @@ export class VideoUploadComponent extends VideoSend implements OnInit, OnDestroy
    formData.append('channelId', '' + channelId)
    formData.append('videofile', videofile)
+    if (this.previewfileUpload) {
+      formData.append('previewfile', this.previewfileUpload)
+      formData.append('thumbnailfile', this.previewfileUpload)
+    }
    this.isUploadingVideo = true
    this.firstStepDone.emit(name)
@@ -187,7 +184,8 @@ export class VideoUploadComponent extends VideoSend implements OnInit, OnDestroy
      name,
      privacy,
      nsfw,
-      channelId
+      channelId,
+      previewfile: this.previewfileUpload
    })
    this.explainedVideoPrivacies = this.videoService.explainedPrivacyLabels(this.videoPrivacies)
@@ -251,4 +249,52 @@ export class VideoUploadComponent extends VideoSend implements OnInit, OnDestroy
          }
        )
  }
+  private checkGlobalUserQuota (videofile: File) {
+    const bytePipes = new BytesPipe()
+    // Check global user quota
+    const videoQuota = this.authService.getUser().videoQuota
+    if (videoQuota !== -1 && (this.userVideoQuotaUsed + videofile.size) > videoQuota) {
+      const msg = this.i18n(
+        'Your video quota is exceeded with this video (video size: {{videoSize}}, used: {{videoQuotaUsed}}, quota: {{videoQuota}})',
+        {
+          videoSize: bytePipes.transform(videofile.size, 0),
+          videoQuotaUsed: bytePipes.transform(this.userVideoQuotaUsed, 0),
+          videoQuota: bytePipes.transform(videoQuota, 0)
+        }
+      )
+      this.notifier.error(msg)
+      return false
+    }
+    return true
+  }
+  private checkDailyUserQuota (videofile: File) {
+    const bytePipes = new BytesPipe()
+    // Check daily user quota
+    const videoQuotaDaily = this.authService.getUser().videoQuotaDaily
+    if (videoQuotaDaily !== -1 && (this.userVideoQuotaUsedDaily + videofile.size) > videoQuotaDaily) {
+      const msg = this.i18n(
+        'Your daily video quota is exceeded with this video (video size: {{videoSize}}, used: {{quotaUsedDaily}}, quota: {{quotaDaily}})',
+        {
+          videoSize: bytePipes.transform(videofile.size, 0),
+          quotaUsedDaily: bytePipes.transform(this.userVideoQuotaUsedDaily, 0),
+          quotaDaily: bytePipes.transform(videoQuotaDaily, 0)
+        }
+      )
+      this.notifier.error(msg)
+      return false
+    }
+    return true
+  }
+  private isAudioFile (filename: string) {
+    return filename.endsWith('.mp3') || filename.endsWith('.flac') || filename.endsWith('.ogg')
+  }
 }
diff --git a/client/src/app/videos/+video-watch/video-watch.component.ts b/client/src/app/videos/+video-watch/video-watch.component.ts
index 631504eab..2d13f1b58 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.ts
+++ b/client/src/app/videos/+video-watch/video-watch.component.ts
@@ -6,7 +6,7 @@ import { peertubeLocalStorage } from '@app/shared/misc/peertube-local-storage'
 import { VideoSupportComponent } from '@app/videos/+video-watch/modal/video-support.component'
 import { MetaService } from '@ngx-meta/core'
 import { Notifier, ServerService } from '@app/core'
-import { forkJoin, Subscription } from 'rxjs'
+import { forkJoin, Observable, Subscription } from 'rxjs'
 import { Hotkey, HotkeysService } from 'angular2-hotkeys'
 import { UserVideoRateType, VideoCaption, VideoPrivacy, VideoState } from '../../../../../shared'
 import { AuthService, ConfirmService } from '../../core'
@@ -135,22 +135,18 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
  setLike () {
    if (this.isUserLoggedIn() === false) return
-    if (this.userRating === 'like') {
-      // Already liked this video
+    // Already liked this video
-      this.setRating('none')
+    if (this.userRating === 'like') this.setRating('none')
-    } else {
+    else this.setRating('like')
-      this.setRating('like')
-    }
  }
  setDislike () {
    if (this.isUserLoggedIn() === false) return
-    if (this.userRating === 'dislike') {
-      // Already disliked this video
+    // Already disliked this video
-      this.setRating('none')
+    if (this.userRating === 'dislike') this.setRating('none')
-    } else {
+    else this.setRating('dislike')
-      this.setRating('dislike')
-    }
  }
  showMoreDescription () {
@@ -249,12 +245,15 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
      )
      .subscribe(([ video, captionsResult ]) => {
        const queryParams = this.route.snapshot.queryParams
-        const startTime = queryParams.start
-        const stopTime = queryParams.stop
-        const subtitle = queryParams.subtitle
-        const playerMode = queryParams.mode
-        this.onVideoFetched(video, captionsResult.data, { startTime, stopTime, subtitle, playerMode })
+        const urlOptions = {
+          startTime: queryParams.start,
+          stopTime: queryParams.stop,
+          subtitle: queryParams.subtitle,
+          playerMode: queryParams.mode
+        }
+        this.onVideoFetched(video, captionsResult.data, urlOptions)
            .catch(err => this.handleError(err))
      })
  }
@@ -279,6 +278,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
  private updateVideoDescription (description: string) {
    this.video.description = description
    this.setVideoDescriptionHTML()
+      .catch(err => console.error(err))
  }
  private async setVideoDescriptionHTML () {
@@ -385,7 +385,9 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
        captions: videoCaptions.length !== 0,
        peertubeLink: false,
-        videoViewUrl: this.video.privacy.id !== VideoPrivacy.PRIVATE ? this.videoService.getVideoViewUrl(this.video.uuid) : null,
+        videoViewUrl: this.video.privacy.id !== VideoPrivacy.PRIVATE
+          ? this.videoService.getVideoViewUrl(this.video.uuid)
+          : null,
        embedUrl: this.video.embedUrl,
        language: this.localeId,
@@ -466,20 +468,13 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
  }
  private setRating (nextRating: UserVideoRateType) {
-    let method
+    const ratingMethods: { [id in UserVideoRateType]: (id: number) => Observable<any> } = {
-    switch (nextRating) {
+      like: this.videoService.setVideoLike,
-      case 'like':
+      dislike: this.videoService.setVideoDislike,
-        method = this.videoService.setVideoLike
+      none: this.videoService.unsetVideoLike
-        break
-      case 'dislike':
-        method = this.videoService.setVideoDislike
-        break
-      case 'none':
-        method = this.videoService.unsetVideoLike
-        break
    }
-    method.call(this.videoService, this.video.id)
+    ratingMethods[nextRating].call(this.videoService, this.video.id)
          .subscribe(
            () => {
              // Update the video like attribute
@@ -545,25 +540,29 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
  private flushPlayer () {
    // Remove player if it exists
    if (this.player) {
-      this.player.dispose()
+      try {
-      this.player = undefined
+        this.player.dispose()
+        this.player = undefined
+      } catch (err) {
+        console.error('Cannot dispose player.', err)
+      }
    }
  }
  private initHotkeys () {
    this.hotkeys = [
-      new Hotkey('shift+l', (event: KeyboardEvent): boolean => {
+      new Hotkey('shift+l', () => {
        this.setLike()
        return false
      }, undefined, this.i18n('Like the video')),
-      new Hotkey('shift+d', (event: KeyboardEvent): boolean => {
+      new Hotkey('shift+d', () => {
        this.setDislike()
        return false
      }, undefined, this.i18n('Dislike the video')),
-      new Hotkey('shift+s', (event: KeyboardEvent): boolean => {
-        this.subscribeButton.subscribed ?
+      new Hotkey('shift+s', () => {
-          this.subscribeButton.unsubscribe() :
+        this.subscribeButton.subscribed ? this.subscribeButton.unsubscribe() : this.subscribeButton.subscribe()
-          this.subscribeButton.subscribe()
        return false
      }, undefined, this.i18n('Subscribe to the account'))
    ]
diff --git a/client/src/app/videos/video-list/video-local.component.ts b/client/src/app/videos/video-list/video-local.component.ts
index 13d4023c2..65543343c 100644
--- a/client/src/app/videos/video-list/video-local.component.ts
+++ b/client/src/app/videos/video-list/video-local.component.ts
@@ -22,13 +22,13 @@ export class VideoLocalComponent extends AbstractVideoList implements OnInit, On
  filter: VideoFilter = 'local'
  constructor (
+    protected i18n: I18n,
    protected router: Router,
    protected serverService: ServerService,
    protected route: ActivatedRoute,
    protected notifier: Notifier,
    protected authService: AuthService,
    protected screenService: ScreenService,
-    private i18n: I18n,
    private videoService: VideoService
  ) {
    super()
diff --git a/client/src/app/videos/video-list/video-overview.component.html b/client/src/app/videos/video-list/video-overview.component.html
index b644dd798..f59de584a 100644
--- a/client/src/app/videos/video-list/video-overview.component.html
+++ b/client/src/app/videos/video-list/video-overview.component.html
@@ -3,7 +3,7 @@
  <div class="no-results" i18n *ngIf="notResults">No results.</div>
  <div class="section" *ngFor="let object of overview.categories">
-    <div class="section-title" i18n>
+    <div class="section-title">
      <a routerLink="/search" [queryParams]="{ categoryOneOf: [ object.category.id ] }">{{ object.category.label }}</a>
    </div>
@@ -11,7 +11,7 @@
  </div>
  <div class="section" *ngFor="let object of overview.tags">
-    <div class="section-title" i18n>
+    <div class="section-title">
      <a routerLink="/search" [queryParams]="{ tagsOneOf: [ object.tag ] }">#{{ object.tag }}</a>
    </div>
@@ -19,7 +19,7 @@
  </div>
  <div class="section channel" *ngFor="let object of overview.channels">
-    <div class="section-title" i18n>
+    <div class="section-title">
      <a [routerLink]="[ '/video-channels', buildVideoChannelBy(object) ]">
        <img [src]="buildVideoChannelAvatarUrl(object)" alt="Avatar" />
diff --git a/client/src/app/videos/video-list/video-overview.component.scss b/client/src/app/videos/video-list/video-overview.component.scss
index a24766783..ade6f53b7 100644
--- a/client/src/app/videos/video-list/video-overview.component.scss
+++ b/client/src/app/videos/video-list/video-overview.component.scss
@@ -2,62 +2,10 @@
 @import '_mixins';
 @import '_miniature';
-.section {
+.margin-content {
-  max-height: 500px; // 2 rows max
+  @include adapt-margin-content-width;
-  overflow: hidden;
-  padding-top: 10px;
-  &:first-child {
-    padding-top: 30px;
-  }
-  my-video-miniature {
-    text-align: left;
-  }
-}
-.section-title {
-  font-size: 24px;
-  font-weight: $font-semibold;
-  margin-bottom: 10px;
-  a {
-    &:hover, &:focus:not(.focus-visible), &:active {
-      text-decoration: none;
-      outline: none;
-    }
-    color: var(--mainForegroundColor);
-  }
 }
-.channel {
+.section {
-  .section-title a {
+  @include miniature-rows;
-    display: flex;
-    width: fit-content;
-    align-items: center;
-    img {
-      @include avatar(28px);
-      margin-right: 8px;
-    }
-  }
-}
-@media screen and (max-width: 500px) {
-  .margin-content {
-    margin: 0 !important;
-  }
-  .section-title {
-    font-size: 17px;
-  }
-  .section {
-    max-height: initial;
-    overflow: initial;
-    @include video-miniature-small-screen;
-  }
 }
diff --git a/client/src/app/videos/video-list/video-recently-added.component.ts b/client/src/app/videos/video-list/video-recently-added.component.ts
index 80cef813e..f54bade98 100644
--- a/client/src/app/videos/video-list/video-recently-added.component.ts
+++ b/client/src/app/videos/video-list/video-recently-added.component.ts
@@ -17,15 +17,16 @@ import { Notifier, ServerService } from '@app/core'
 export class VideoRecentlyAddedComponent extends AbstractVideoList implements OnInit, OnDestroy {
  titlePage: string
  sort: VideoSortField = '-publishedAt'
+  groupByDate = true
  constructor (
+    protected i18n: I18n,
    protected route: ActivatedRoute,
    protected serverService: ServerService,
    protected router: Router,
    protected notifier: Notifier,
    protected authService: AuthService,
    protected screenService: ScreenService,
-    private i18n: I18n,
    private videoService: VideoService
  ) {
    super()
diff --git a/client/src/app/videos/video-list/video-trending.component.ts b/client/src/app/videos/video-list/video-trending.component.ts
index e2ad95bc4..a2c819ebe 100644
--- a/client/src/app/videos/video-list/video-trending.component.ts
+++ b/client/src/app/videos/video-list/video-trending.component.ts
@@ -19,13 +19,13 @@ export class VideoTrendingComponent extends AbstractVideoList implements OnInit,
  defaultSort: VideoSortField = '-trending'
  constructor (
+    protected i18n: I18n,
    protected router: Router,
    protected serverService: ServerService,
    protected route: ActivatedRoute,
    protected notifier: Notifier,
    protected authService: AuthService,
    protected screenService: ScreenService,
-    private i18n: I18n,
    private videoService: VideoService
  ) {
    super()
diff --git a/client/src/app/videos/video-list/video-user-subscriptions.component.ts b/client/src/app/videos/video-list/video-user-subscriptions.component.ts
index 2f0685ccc..3caa371d8 100644
--- a/client/src/app/videos/video-list/video-user-subscriptions.component.ts
+++ b/client/src/app/videos/video-list/video-user-subscriptions.component.ts
@@ -19,15 +19,16 @@ export class VideoUserSubscriptionsComponent extends AbstractVideoList implement
  titlePage: string
  sort = '-publishedAt' as VideoSortField
  ownerDisplayType: OwnerDisplayType = 'auto'
+  groupByDate = true
  constructor (
+    protected i18n: I18n,
    protected router: Router,
    protected serverService: ServerService,
    protected route: ActivatedRoute,
    protected notifier: Notifier,
    protected authService: AuthService,
    protected screenService: ScreenService,
-    private i18n: I18n,
    private videoService: VideoService
  ) {
    super()
diff --git a/client/src/assets/player/peertube-player-manager.ts b/client/src/assets/player/peertube-player-manager.ts
index 6cdd54372..31cbc7dfd 100644
--- a/client/src/assets/player/peertube-player-manager.ts
+++ b/client/src/assets/player/peertube-player-manager.ts
@@ -117,8 +117,17 @@ export class PeertubePlayerManager {
      videojs(options.common.playerElement, videojsOptions, function (this: any) {
        const player = this
-        player.tech_.one('error', () => self.maybeFallbackToWebTorrent(mode, player, options))
+        let alreadyFallback = false
-        player.one('error', () => self.maybeFallbackToWebTorrent(mode, player, options))
+        player.tech_.one('error', () => {
+          if (!alreadyFallback) self.maybeFallbackToWebTorrent(mode, player, options)
+          alreadyFallback = true
+        })
+        player.one('error', () => {
+          if (!alreadyFallback) self.maybeFallbackToWebTorrent(mode, player, options)
+          alreadyFallback = true
+        })
        self.addContextMenu(mode, player, options.common.embedUrl)
diff --git a/client/src/sass/include/_miniature.scss b/client/src/sass/include/_miniature.scss
index b62187fd2..0c2ee2d0d 100644
--- a/client/src/sass/include/_miniature.scss
+++ b/client/src/sass/include/_miniature.scss
@@ -138,3 +138,100 @@ $play-overlay-width: 18px;
    }
  }
 }
+@mixin miniature-rows {
+  max-height: 540px; // 2 rows max
+  overflow: hidden;
+  padding-top: 10px;
+  &:first-child {
+    padding-top: 30px;
+  }
+  my-video-miniature {
+    text-align: left;
+  }
+  .section-title {
+    font-size: 24px;
+    font-weight: $font-semibold;
+    margin-bottom: 30px;
+    display: flex;
+    justify-content: space-between;
+    a {
+      &:hover, &:focus:not(.focus-visible), &:active {
+        text-decoration: none;
+        outline: none;
+      }
+      color: var(--mainForegroundColor);
+    }
+  }
+  &.channel {
+    .section-title {
+      a {
+        display: flex;
+        width: fit-content;
+        align-items: center;
+        img {
+          @include avatar(28px);
+          margin-right: 8px;
+        }
+      }
+      .followers {
+        color: $grey-foreground-color;
+        font-weight: normal;
+        font-size: 14px;
+        margin-left: 10px;
+        position: relative;
+        top: 2px;
+      }
+    }
+  }
+  @media screen and (max-width: $mobile-view) {
+    max-height: initial;
+    overflow: initial;
+    @include video-miniature-small-screen;
+    .section-title {
+      font-size: 17px;
+    }
+  }
+}
+@mixin adapt-margin-content-width {
+  width: $video-miniature-width * 6;
+  margin: auto !important;
+  @media screen and (max-width: 1800px) {
+    width: $video-miniature-width * 5;
+  }
+  @media screen and (max-width: 1800px - $video-miniature-width) {
+    width: $video-miniature-width * 4;
+  }
+  @media screen and (max-width: 1800px - (2* $video-miniature-width)) {
+    width: $video-miniature-width * 3;
+  }
+  @media screen and (max-width: 1800px - (3* $video-miniature-width)) {
+    width: $video-miniature-width * 2;
+  }
+  @media screen and (max-width: 500px) {
+    width: auto;
+    margin: 0 !important;
+    .videos {
+      @include video-miniature-small-screen;
+    }
+  }
+}
diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss
index 262a8136f..228a6116e 100644
--- a/client/src/sass/include/_mixins.scss
+++ b/client/src/sass/include/_mixins.scss
@@ -331,7 +331,12 @@
 }
 @mixin peertube-checkbox ($border-width) {
-  display: none;
+  opacity: 0;
+  width: 0;
+  &:focus + span {
+    outline: auto;
+  }
  & + span {
    position: relative;