153 files changed, 2662 insertions, 1108 deletions
diff --git a/client/src/app/+about/about-follows/about-follows.component.html b/client/src/app/+about/about-follows/about-follows.component.html
new file mode 100644
index 000000000..18689bbf7
--- /dev/null
+++ b/client/src/app/+about/about-follows/about-follows.component.html
@@ -0,0 +1,22 @@
+<div class="row" myInfiniteScroller [autoInit]="true" (nearOfBottom)="onNearOfBottom()">
+  <div class="col-xl-6 col-md-12">
+    <div i18n class="subtitle">Followers</div>
+    <div i18n class="no-results" *ngIf="followersPagination.totalItems === 0">This instance does not have followers.</div>
+    <a *ngFor="let follower of followers" [href]="buildLink(follower)" target="_blank" rel="noopener noreferrer">
+      {{ follower }}
+    </a>
+  </div>
+  <div class="col-xl-6 col-md-12">
+    <div i18n class="subtitle">Followings</div>
+    <div i18n class="no-results" *ngIf="followingsPagination.totalItems === 0">This instance does not have followings.</div>
+    <a *ngFor="let following of followings" [href]="buildLink(following)" target="_blank" rel="noopener noreferrer">
+      {{ following }}
+    </a>
+  </div>
+</div>
diff --git a/client/src/app/+about/about-follows/about-follows.component.scss b/client/src/app/+about/about-follows/about-follows.component.scss
new file mode 100644
index 000000000..e0d597a96
--- /dev/null
+++ b/client/src/app/+about/about-follows/about-follows.component.scss
@@ -0,0 +1,14 @@
+@import '_variables';
+@import '_mixins';
+.subtitle {
+  font-size: 18px;
+  font-weight: $font-semibold;
+  margin-bottom: 20px;
+}
+a {
+  display: block;
+  width: fit-content;
+  margin-top: 3px;
+}
diff --git a/client/src/app/+about/about-follows/about-follows.component.ts b/client/src/app/+about/about-follows/about-follows.component.ts
new file mode 100644
index 000000000..f0e1375d6
--- /dev/null
+++ b/client/src/app/+about/about-follows/about-follows.component.ts
@@ -0,0 +1,103 @@
+import { Component, OnInit } from '@angular/core'
+import { FollowService } from '@app/shared/instance/follow.service'
+import { ComponentPagination, hasMoreItems } from '@app/shared/rest/component-pagination.model'
+import { Notifier } from '@app/core'
+import { RestService } from '@app/shared'
+import { SortMeta } from 'primeng/api'
+@Component({
+  selector: 'my-about-follows',
+  templateUrl: './about-follows.component.html',
+  styleUrls: [ './about-follows.component.scss' ]
+})
+export class AboutFollowsComponent implements OnInit {
+  followers: string[] = []
+  followings: string[] = []
+  followersPagination: ComponentPagination = {
+    currentPage: 1,
+    itemsPerPage: 40,
+    totalItems: null
+  }
+  followingsPagination: ComponentPagination = {
+    currentPage: 1,
+    itemsPerPage: 40,
+    totalItems: null
+  }
+  sort: SortMeta = {
+    field: 'createdAt',
+    order: -1
+  }
+  constructor (
+    private restService: RestService,
+    private notifier: Notifier,
+    private followService: FollowService
+  ) { }
+  ngOnInit () {
+    this.loadMoreFollowers()
+    this.loadMoreFollowings()
+  }
+  onNearOfBottom () {
+    this.onNearOfFollowersBottom()
+    this.onNearOfFollowingsBottom()
+  }
+  onNearOfFollowersBottom () {
+    if (!hasMoreItems(this.followersPagination)) return
+    this.followersPagination.currentPage += 1
+    this.loadMoreFollowers()
+  }
+  onNearOfFollowingsBottom () {
+    if (!hasMoreItems(this.followingsPagination)) return
+    this.followingsPagination.currentPage += 1
+    this.loadMoreFollowings()
+  }
+  buildLink (host: string) {
+    return window.location.protocol + '//' + host
+  }
+  private loadMoreFollowers () {
+    const pagination = this.restService.componentPaginationToRestPagination(this.followersPagination)
+    this.followService.getFollowers(pagination, this.sort)
+        .subscribe(
+          resultList => {
+            const newFollowers = resultList.data.map(r => r.follower.host)
+            this.followers = this.followers.concat(newFollowers)
+            this.followersPagination.totalItems = resultList.total
+          },
+          err => this.notifier.error(err.message)
+        )
+  }
+  private loadMoreFollowings () {
+    const pagination = this.restService.componentPaginationToRestPagination(this.followingsPagination)
+    this.followService.getFollowing(pagination, this.sort)
+        .subscribe(
+          resultList => {
+            const newFollowings = resultList.data.map(r => r.following.host)
+            this.followings = this.followings.concat(newFollowings)
+            this.followingsPagination.totalItems = resultList.total
+          },
+          err => this.notifier.error(err.message)
+        )
+  }
+}
diff --git a/client/src/app/+about/about-routing.module.ts b/client/src/app/+about/about-routing.module.ts
index c83c62c7f..33e5070cb 100644
--- a/client/src/app/+about/about-routing.module.ts
+++ b/client/src/app/+about/about-routing.module.ts
@@ -4,6 +4,7 @@ import { MetaGuard } from '@ngx-meta/core'
 import { AboutComponent } from './about.component'
 import { AboutInstanceComponent } from '@app/+about/about-instance/about-instance.component'
 import { AboutPeertubeComponent } from '@app/+about/about-peertube/about-peertube.component'
+import { AboutFollowsComponent } from '@app/+about/about-follows/about-follows.component'
 const aboutRoutes: Routes = [
  {
@@ -33,6 +34,15 @@ const aboutRoutes: Routes = [
            title: 'About PeerTube'
          }
        }
+      },
+      {
+        path: 'follows',
+        component: AboutFollowsComponent,
+        data: {
+          meta: {
+            title: 'About follows'
+          }
+        }
      }
    ]
  }
diff --git a/client/src/app/+about/about.component.html b/client/src/app/+about/about.component.html
index 8c50835c1..0c4a5156d 100644
--- a/client/src/app/+about/about.component.html
+++ b/client/src/app/+about/about.component.html
@@ -5,10 +5,12 @@
      <a i18n routerLink="instance" routerLinkActive="active" class="title-page">Instance</a>
      <a i18n routerLink="peertube" routerLinkActive="active" class="title-page">PeerTube</a>
+      <a i18n routerLink="follows" routerLinkActive="active" class="title-page">Follows</a>
    </div>
  </div>
  <div class="margin-content">
    <router-outlet></router-outlet>
  </div>
-</div>
-\ No newline at end of file
+</div>
diff --git a/client/src/app/+about/about.module.ts b/client/src/app/+about/about.module.ts
index 9c6b29740..49a7a52f8 100644
--- a/client/src/app/+about/about.module.ts
+++ b/client/src/app/+about/about.module.ts
@@ -6,6 +6,7 @@ import { SharedModule } from '../shared'
 import { AboutInstanceComponent } from '@app/+about/about-instance/about-instance.component'
 import { AboutPeertubeComponent } from '@app/+about/about-peertube/about-peertube.component'
 import { ContactAdminModalComponent } from '@app/+about/about-instance/contact-admin-modal.component'
+import { AboutFollowsComponent } from '@app/+about/about-follows/about-follows.component'
 @NgModule({
  imports: [
@@ -17,6 +18,7 @@ import { ContactAdminModalComponent } from '@app/+about/about-instance/contact-a
    AboutComponent,
    AboutInstanceComponent,
    AboutPeertubeComponent,
+    AboutFollowsComponent,
    ContactAdminModalComponent
  ],
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..e9c8179b7 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,25 @@
-<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>
+      <div *ngIf="getVideosOf(videoChannel)" class="videos">
+        <div class="no-results" i18n *ngIf="getVideosOf(videoChannel).length === 0">This channel does not have videos.</div>
+        <my-video-miniature *ngFor="let video of getVideosOf(videoChannel)" [video]="video" [user]="user" [displayVideoActions]="false"></my-video-miniature>
+      </div>
+    </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..98931f0c2 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,28 @@
 @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;
+  overflow: visible; // For the subscribe dropdown
-  text-align: center;
+  padding-top: 0 !important;
-  color: var(--mainForegroundColor);
-  margin: 10px 30px;
-  img {
+  .section-title {
-    @include avatar(80px);
+    align-items: center;
-    margin-bottom: 10px;
  }
-  .video-channel-display-name {
+  .videos {
-    font-size: 20px;
+    overflow: hidden;
-    font-weight: $font-bold;
-  }
-  .video-channel-followers {
+    .no-results {
-    font-size: 15px;
+      height: 50px;
+    }
  }
-}
-\ 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..a8d4237e8 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..45b24eb55 100644
--- a/client/src/app/+accounts/accounts-routing.module.ts
+++ b/client/src/app/+accounts/accounts-routing.module.ts
@@ -8,13 +8,17 @@ import { AccountVideoChannelsComponent } from './account-video-channels/account-
 const accountsRoutes: Routes = [
  {
+    path: 'peertube',
+    redirectTo: '/videos/local'
+  },
+  {
    path: ':accountId',
    component: AccountsComponent,
    canActivateChild: [ MetaGuard ],
    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/admin.module.ts b/client/src/app/+admin/admin.module.ts
index 71a4dfc4a..9ab883f60 100644
--- a/client/src/app/+admin/admin.module.ts
+++ b/client/src/app/+admin/admin.module.ts
@@ -5,7 +5,7 @@ import { TableModule } from 'primeng/table'
 import { SharedModule } from '../shared'
 import { AdminRoutingModule } from './admin-routing.module'
 import { AdminComponent } from './admin.component'
-import { FollowersListComponent, FollowingAddComponent, FollowsComponent, FollowService } from './follows'
+import { FollowersListComponent, FollowingAddComponent, FollowsComponent } from './follows'
 import { FollowingListComponent } from './follows/following-list/following-list.component'
 import { UserCreateComponent, UserListComponent, UserPasswordComponent, UsersComponent, UserUpdateComponent } from './users'
 import {
@@ -66,7 +66,6 @@ import { DebugComponent, DebugService } from '@app/+admin/system/debug'
  ],
  providers: [
-    FollowService,
    RedundancyService,
    JobService,
    LogsService,
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..d5b625d9c 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">
@@ -301,8 +309,8 @@
            <ng-container formGroupName="resolutions">
              <div class="form-group" *ngFor="let resolution of resolutions">
                <my-peertube-checkbox
-                  [inputName]="getResolutionKey(resolution)" [formControlName]="resolution"
+                  [inputName]="getResolutionKey(resolution.id)" [formControlName]="resolution.id"
-                  i18n-labelText labelText="Resolution {{resolution}} enabled"
+                  i18n-labelText labelText="Resolution {{resolution.label}} enabled"
                ></my-peertube-checkbox>
              </div>
            </ng-container>
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..055bae851 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
@@ -15,7 +15,7 @@ import { FormValidatorService } from '@app/shared/forms/form-validators/form-val
 export class EditCustomConfigComponent extends FormReactive implements OnInit {
  customConfig: CustomConfig
-  resolutions: string[] = []
+  resolutions: { id: string, label: string }[] = []
  transcodingThreadOptions: { label: string, value: number }[] = []
  constructor (
@@ -30,11 +30,30 @@ export class EditCustomConfigComponent extends FormReactive implements OnInit {
    super()
    this.resolutions = [
-      this.i18n('240p'),
+      {
-      this.i18n('360p'),
+        id: '240p',
-      this.i18n('480p'),
+        label: this.i18n('240p')
-      this.i18n('720p'),
+      },
-      this.i18n('1080p')
+      {
+        id: '360p',
+        label: this.i18n('360p')
+      },
+      {
+        id: '480p',
+        label: this.i18n('480p')
+      },
+      {
+        id: '720p',
+        label: this.i18n('720p')
+      },
+      {
+        id: '1080p',
+        label: this.i18n('1080p')
+      },
+      {
+        id: '2160p',
+        label: this.i18n('2160p')
+      }
    ]
    this.transcodingThreadOptions = [
@@ -116,6 +135,7 @@ export class EditCustomConfigComponent extends FormReactive implements OnInit {
        enabled: null,
        threads: this.customConfigValidatorsService.TRANSCODING_THREADS,
        allowAdditionalExtensions: null,
+        allowAudioFiles: null,
        resolutions: {}
      },
      autoBlacklist: {
@@ -139,8 +159,8 @@ export class EditCustomConfigComponent extends FormReactive implements OnInit {
      }
    }
    for (const resolution of this.resolutions) {
-      defaultValues.transcoding.resolutions[resolution] = 'false'
+      defaultValues.transcoding.resolutions[resolution.id] = 'false'
-      formGroupData.transcoding.resolutions[resolution] = null
+      formGroupData.transcoding.resolutions[resolution.id] = null
    }
    this.buildForm(formGroupData)
diff --git a/client/src/app/+admin/follows/followers-list/followers-list.component.ts b/client/src/app/+admin/follows/followers-list/followers-list.component.ts
index b78cdf656..e25d9ab66 100644
--- a/client/src/app/+admin/follows/followers-list/followers-list.component.ts
+++ b/client/src/app/+admin/follows/followers-list/followers-list.component.ts
@@ -3,7 +3,7 @@ import { ConfirmService, Notifier } from '@app/core'
 import { SortMeta } from 'primeng/primeng'
 import { ActorFollow } from '../../../../../../shared/models/actors/follow.model'
 import { RestPagination, RestTable } from '../../../shared'
-import { FollowService } from '../shared'
+import { FollowService } from '@app/shared/instance/follow.service'
 import { I18n } from '@ngx-translate/i18n-polyfill'
 @Component({
diff --git a/client/src/app/+admin/follows/following-add/following-add.component.ts b/client/src/app/+admin/follows/following-add/following-add.component.ts
index 2bb249746..308bbb0c5 100644
--- a/client/src/app/+admin/follows/following-add/following-add.component.ts
+++ b/client/src/app/+admin/follows/following-add/following-add.component.ts
@@ -3,7 +3,7 @@ import { Router } from '@angular/router'
 import { Notifier } from '@app/core'
 import { ConfirmService } from '../../../core'
 import { validateHost } from '../../../shared'
-import { FollowService } from '../shared'
+import { FollowService } from '@app/shared/instance/follow.service'
 import { I18n } from '@ngx-translate/i18n-polyfill'
 @Component({
diff --git a/client/src/app/+admin/follows/following-list/following-list.component.ts b/client/src/app/+admin/follows/following-list/following-list.component.ts
index 4517a721e..ded616624 100644
--- a/client/src/app/+admin/follows/following-list/following-list.component.ts
+++ b/client/src/app/+admin/follows/following-list/following-list.component.ts
@@ -4,7 +4,7 @@ import { SortMeta } from 'primeng/primeng'
 import { ActorFollow } from '../../../../../../shared/models/actors/follow.model'
 import { ConfirmService } from '../../../core/confirm/confirm.service'
 import { RestPagination, RestTable } from '../../../shared'
-import { FollowService } from '../shared'
+import { FollowService } from '@app/shared/instance/follow.service'
 import { I18n } from '@ngx-translate/i18n-polyfill'
 @Component({
diff --git a/client/src/app/+admin/follows/index.ts b/client/src/app/+admin/follows/index.ts
index 7849a06e7..e94f33710 100644
--- a/client/src/app/+admin/follows/index.ts
+++ b/client/src/app/+admin/follows/index.ts
@@ -1,6 +1,5 @@
 export * from './following-add'
 export * from './followers-list'
 export * from './following-list'
-export * from './shared'
 export * from './follows.component'
 export * from './follows.routes'
diff --git a/client/src/app/+admin/follows/shared/index.ts b/client/src/app/+admin/follows/shared/index.ts
deleted file mode 100644
index 78d456def..000000000
--- a/client/src/app/+admin/follows/shared/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './follow.service'
diff --git a/client/src/app/+admin/users/user-edit/user-edit.ts b/client/src/app/+admin/users/user-edit/user-edit.ts
index adce1b2d4..ee6d2c489 100644
--- a/client/src/app/+admin/users/user-edit/user-edit.ts
+++ b/client/src/app/+admin/users/user-edit/user-edit.ts
@@ -7,7 +7,8 @@ import { UserAdminFlag } from '@shared/models/users/user-flag.model'
 export abstract class UserEdit extends FormReactive {
  videoQuotaOptions: { value: string, label: string }[] = []
  videoQuotaDailyOptions: { value: string, label: string }[] = []
-  roles = Object.keys(USER_ROLE_LABELS).map(key => ({ value: key.toString(), label: USER_ROLE_LABELS[key] }))
+  roles = Object.keys(USER_ROLE_LABELS)
+                .map(key => ({ value: key.toString(), label: USER_ROLE_LABELS[key] }))
  username: string
  userId: number
@@ -27,7 +28,7 @@ export abstract class UserEdit extends FormReactive {
    const transcodingConfig = this.serverService.getConfig().transcoding
    const resolutions = transcodingConfig.enabledResolutions
-    const higherResolution = VideoResolution.H_1080P
+    const higherResolution = VideoResolution.H_4K
    let multiplier = 0
    for (const resolution of resolutions) {
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-settings/my-account-change-email/index.ts b/client/src/app/+my-account/my-account-settings/my-account-change-email/index.ts
new file mode 100644
index 000000000..f42af361e
--- /dev/null
+++ b/client/src/app/+my-account/my-account-settings/my-account-change-email/index.ts
@@ -0,0 +1 @@
+export * from './my-account-change-email.component'
diff --git a/client/src/app/+my-account/my-account-settings/my-account-change-email/my-account-change-email.component.html b/client/src/app/+my-account/my-account-settings/my-account-change-email/my-account-change-email.component.html
new file mode 100644
index 000000000..5492cdf22
--- /dev/null
+++ b/client/src/app/+my-account/my-account-settings/my-account-change-email/my-account-change-email.component.html
@@ -0,0 +1,36 @@
+<div *ngIf="error" class="alert alert-danger">{{ error }}</div>
+<div *ngIf="success" class="alert alert-success">{{ success }}</div>
+<div i18n class="current-email">
+  Your current email is <span class="email">{{ user.email }}</span>
+</div>
+<div i18n class="pending-email" *ngIf="user.pendingEmail">
+  <span class="email">{{ user.pendingEmail }}</span> is awaiting email verification
+</div>
+<form role="form" class="change-email" (ngSubmit)="changeEmail()" [formGroup]="form">
+  <div class="form-group">
+    <label i18n for="new-email">New email</label>
+    <input
+      type="email" id="new-email" i18n-placeholder placeholder="Your new email"
+      formControlName="new-email" [ngClass]="{ 'input-error': formErrors['new-email'] }"
+    >
+    <div *ngIf="formErrors['new-email']" class="form-error">
+      {{ formErrors['new-email'] }}
+    </div>
+  </div>
+  <div class="form-group">
+    <input
+      type="password" id="password" i18n-placeholder placeholder="Your password"
+      formControlName="password" [ngClass]="{ 'input-error': formErrors['password'] }"
+    >
+    <div *ngIf="formErrors['password']" class="form-error">
+      {{ formErrors['password'] }}
+    </div>
+  </div>
+  <input type="submit" i18n-value value="Change email" [disabled]="!form.valid">
+</form>
diff --git a/client/src/app/+my-account/my-account-settings/my-account-change-email/my-account-change-email.component.scss b/client/src/app/+my-account/my-account-settings/my-account-change-email/my-account-change-email.component.scss
new file mode 100644
index 000000000..81eba3ec9
--- /dev/null
+++ b/client/src/app/+my-account/my-account-settings/my-account-change-email/my-account-change-email.component.scss
@@ -0,0 +1,24 @@
+@import '_variables';
+@import '_mixins';
+input[type=password],
+input[type=email] {
+  @include peertube-input-text(340px);
+  display: block;
+}
+input[type=submit] {
+  @include peertube-button;
+  @include orange-button;
+}
+.current-email,
+.pending-email {
+  font-size: 16px;
+  margin: 15px 0;
+  .email {
+    font-weight: $font-semibold;
+  }
+}
diff --git a/client/src/app/+my-account/my-account-settings/my-account-change-email/my-account-change-email.component.ts b/client/src/app/+my-account/my-account-settings/my-account-change-email/my-account-change-email.component.ts
new file mode 100644
index 000000000..ec7cf935c
--- /dev/null
+++ b/client/src/app/+my-account/my-account-settings/my-account-change-email/my-account-change-email.component.ts
@@ -0,0 +1,73 @@
+import { Component, OnInit } from '@angular/core'
+import { AuthService, Notifier, ServerService } from '@app/core'
+import { FormReactive, UserService } from '../../../shared'
+import { I18n } from '@ngx-translate/i18n-polyfill'
+import { FormValidatorService } from '@app/shared/forms/form-validators/form-validator.service'
+import { UserValidatorsService } from '@app/shared/forms/form-validators/user-validators.service'
+import { User } from '../../../../../../shared'
+import { tap } from 'rxjs/operators'
+@Component({
+  selector: 'my-account-change-email',
+  templateUrl: './my-account-change-email.component.html',
+  styleUrls: [ './my-account-change-email.component.scss' ]
+})
+export class MyAccountChangeEmailComponent extends FormReactive implements OnInit {
+  error: string = null
+  success: string = null
+  user: User = null
+  constructor (
+    protected formValidatorService: FormValidatorService,
+    private userValidatorsService: UserValidatorsService,
+    private notifier: Notifier,
+    private authService: AuthService,
+    private userService: UserService,
+    private serverService: ServerService,
+    private i18n: I18n
+  ) {
+    super()
+  }
+  ngOnInit () {
+    this.buildForm({
+      'new-email': this.userValidatorsService.USER_EMAIL,
+      'password': this.userValidatorsService.USER_PASSWORD
+    })
+    this.user = this.authService.getUser()
+  }
+  changeEmail () {
+    this.error = null
+    this.success = null
+    const password = this.form.value[ 'password' ]
+    const email = this.form.value[ 'new-email' ]
+    this.userService.changeEmail(password, email)
+        .pipe(
+          tap(() => this.authService.refreshUserInformation())
+        )
+        .subscribe(
+          () => {
+            this.form.reset()
+            if (this.serverService.getConfig().signup.requiresEmailVerification) {
+              this.success = this.i18n('Please check your emails to verify your new email.')
+            } else {
+              this.success = this.i18n('Email updated.')
+            }
+          },
+          err => {
+            if (err.status === 401) {
+              this.error = this.i18n('You current password is invalid.')
+              return
+            }
+            this.error = err.message
+          }
+        )
+  }
+}
diff --git a/client/src/app/+my-account/my-account-settings/my-account-change-password/my-account-change-password.component.html b/client/src/app/+my-account/my-account-settings/my-account-change-password/my-account-change-password.component.html
index ae797d1bc..a39061ee3 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-change-password/my-account-change-password.component.html
+++ b/client/src/app/+my-account/my-account-settings/my-account-change-password/my-account-change-password.component.html
@@ -2,7 +2,7 @@
 <form role="form" (ngSubmit)="changePassword()" [formGroup]="form">
-  <label i18n for="new-password">Change password</label>
+  <label i18n for="current-password">Change password</label>
  <input
    type="password" id="current-password" i18n-placeholder placeholder="Current password"
    formControlName="current-password" [ngClass]="{ 'input-error': formErrors['current-password'] }"
diff --git a/client/src/app/+my-account/my-account-settings/my-account-profile/my-account-profile.component.ts b/client/src/app/+my-account/my-account-settings/my-account-profile/my-account-profile.component.ts
index a9503ed1b..fcad5a6c2 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-profile/my-account-profile.component.ts
+++ b/client/src/app/+my-account/my-account-settings/my-account-profile/my-account-profile.component.ts
@@ -30,7 +30,7 @@ export class MyAccountProfileComponent extends FormReactive implements OnInit {
  ngOnInit () {
    this.buildForm({
-      'display-name': this.userValidatorsService.USER_DISPLAY_NAME,
+      'display-name': this.userValidatorsService.USER_DISPLAY_NAME_REQUIRED,
      description: this.userValidatorsService.USER_DESCRIPTION
    })
diff --git a/client/src/app/+my-account/my-account-settings/my-account-settings.component.html b/client/src/app/+my-account/my-account-settings/my-account-settings.component.html
index ad64f28fe..f93d41110 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-settings.component.html
+++ b/client/src/app/+my-account/my-account-settings/my-account-settings.component.html
@@ -13,6 +13,9 @@
 <div i18n class="account-title">Password</div>
 <my-account-change-password></my-account-change-password>
+<div i18n class="account-title">Email</div>
+<my-account-change-email></my-account-change-email>
 <div i18n class="account-title">Video settings</div>
 <my-account-video-settings [user]="user" [userInformationLoaded]="userInformationLoaded"></my-account-video-settings>
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-create.component.ts b/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-create.component.ts
index 87a10961f..8aed8b513 100644
--- a/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-create.component.ts
+++ b/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-create.component.ts
@@ -7,7 +7,6 @@ import { FormValidatorService } from '@app/shared/forms/form-validators/form-val
 import { VideoPlaylistValidatorsService } from '@app/shared'
 import { VideoPlaylistCreate } from '@shared/models/videos/playlist/video-playlist-create.model'
 import { VideoPlaylistService } from '@app/shared/video-playlist/video-playlist.service'
-import { VideoConstant } from '@shared/models'
 import { VideoPlaylistPrivacy } from '@shared/models/videos/playlist/video-playlist-privacy.model'
 import { populateAsyncUserVideoChannels } from '@app/shared/misc/utils'
@@ -18,7 +17,6 @@ import { populateAsyncUserVideoChannels } from '@app/shared/misc/utils'
 })
 export class MyAccountVideoPlaylistCreateComponent extends MyAccountVideoPlaylistEdit implements OnInit {
  error: string
-  videoPlaylistPrivacies: VideoConstant<VideoPlaylistPrivacy>[] = []
  constructor (
    protected formValidatorService: FormValidatorService,
@@ -47,6 +45,7 @@ export class MyAccountVideoPlaylistCreateComponent extends MyAccountVideoPlaylis
    })
    populateAsyncUserVideoChannels(this.authService, this.userVideoChannels)
+      .catch(err => console.error('Cannot populate user video channels.', err))
    this.serverService.videoPlaylistPrivaciesLoaded.subscribe(
      () => {
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..e94188786 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,12 +1,12 @@
 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'
+import { VideoConstant, VideoPlaylistPrivacy } from '@shared/models'
 export abstract class MyAccountVideoPlaylistEdit extends FormReactive {
  // Declare it here to avoid errors in create template
  videoPlaylistToUpdate: VideoPlaylist
  userVideoChannels: { id: number, label: string }[] = []
+  videoPlaylistPrivacies: VideoConstant<VideoPlaylistPrivacy>[] = []
  abstract isCreation (): boolean
  abstract getFormButtonTitle (): string
diff --git a/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-update.component.ts b/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-update.component.ts
index 4887fdfb4..917ad7258 100644
--- a/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-update.component.ts
+++ b/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-update.component.ts
@@ -9,9 +9,8 @@ import { populateAsyncUserVideoChannels } from '@app/shared/misc/utils'
 import { VideoPlaylistService } from '@app/shared/video-playlist/video-playlist.service'
 import { VideoPlaylistValidatorsService } from '@app/shared'
 import { VideoPlaylistUpdate } from '@shared/models/videos/playlist/video-playlist-update.model'
-import { VideoConstant } from '@shared/models'
-import { VideoPlaylistPrivacy } from '@shared/models/videos/playlist/video-playlist-privacy.model'
 import { VideoPlaylist } from '@app/shared/video-playlist/video-playlist.model'
+import { delayWhen, map, switchMap } from 'rxjs/operators'
 @Component({
  selector: 'my-account-video-playlist-update',
@@ -21,7 +20,6 @@ import { VideoPlaylist } from '@app/shared/video-playlist/video-playlist.model'
 export class MyAccountVideoPlaylistUpdateComponent extends MyAccountVideoPlaylistEdit implements OnInit, OnDestroy {
  error: string
  videoPlaylistToUpdate: VideoPlaylist
-  videoPlaylistPrivacies: VideoConstant<VideoPlaylistPrivacy>[] = []
  private paramsSub: Subscription
@@ -53,31 +51,24 @@ export class MyAccountVideoPlaylistUpdateComponent extends MyAccountVideoPlaylis
    })
    populateAsyncUserVideoChannels(this.authService, this.userVideoChannels)
+      .catch(err => console.error('Cannot populate user video channels.', err))
-    this.paramsSub = this.route.params.subscribe(routeParams => {
-      const videoPlaylistId = routeParams['videoPlaylistId']
+    this.paramsSub = this.route.params
+                         .pipe(
-      this.videoPlaylistService.getVideoPlaylist(videoPlaylistId).subscribe(
+                           map(routeParams => routeParams['videoPlaylistId']),
-        videoPlaylistToUpdate => {
+                           switchMap(videoPlaylistId => this.videoPlaylistService.getVideoPlaylist(videoPlaylistId)),
-          this.videoPlaylistToUpdate = videoPlaylistToUpdate
+                           delayWhen(() => this.serverService.videoPlaylistPrivaciesLoaded)
+                         )
-          this.hydrateFormFromPlaylist()
+                         .subscribe(
+                           videoPlaylistToUpdate => {
-          this.serverService.videoPlaylistPrivaciesLoaded.subscribe(
+                             this.videoPlaylistPrivacies = this.serverService.getVideoPlaylistPrivacies()
-            () => {
+                             this.videoPlaylistToUpdate = videoPlaylistToUpdate
-              this.videoPlaylistPrivacies = this.serverService.getVideoPlaylistPrivacies()
-                .filter(p => {
+                             this.hydrateFormFromPlaylist()
-                  // If the playlist is not private, we cannot put it in private anymore
+                           },
-                  return this.videoPlaylistToUpdate.privacy.id === VideoPlaylistPrivacy.PRIVATE ||
-                    p.id !== VideoPlaylistPrivacy.PRIVATE
+                           err => this.error = err.message
-                })
+                         )
-            }
-          )
-        },
-        err => this.error = err.message
-      )
-    })
  }
  ngOnDestroy () {
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/+my-account/my-account.module.ts b/client/src/app/+my-account/my-account.module.ts
index 4a18a9968..ca5b1f7cb 100644
--- a/client/src/app/+my-account/my-account.module.ts
+++ b/client/src/app/+my-account/my-account.module.ts
@@ -36,6 +36,7 @@ import {
  MyAccountVideoPlaylistElementsComponent
 } from '@app/+my-account/my-account-video-playlists/my-account-video-playlist-elements.component'
 import { DragDropModule } from '@angular/cdk/drag-drop'
+import { MyAccountChangeEmailComponent } from '@app/+my-account/my-account-settings/my-account-change-email'
 @NgModule({
  imports: [
@@ -54,7 +55,10 @@ import { DragDropModule } from '@angular/cdk/drag-drop'
    MyAccountChangePasswordComponent,
    MyAccountVideoSettingsComponent,
    MyAccountProfileComponent,
+    MyAccountChangeEmailComponent,
    MyAccountVideosComponent,
    VideoChangeOwnershipComponent,
    MyAccountOwnershipComponent,
    MyAccountAcceptOwnershipComponent,
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..253374f87
--- /dev/null
+++ b/client/src/app/+signup/+register/register-step-channel.component.html
@@ -0,0 +1,54 @@
+<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="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>
+  <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 class="name-information" i18n>
+      The channel name is a unique identifier of your channel on this instance. It's like an address mail, so other people can find your channel.
+    </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>
+</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..e434b91a7
--- /dev/null
+++ b/client/src/app/+signup/+register/register-step-channel.component.ts
@@ -0,0 +1,56 @@
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'
+import { AuthService } from '@app/core'
+import { FormReactive, UserService, VideoChannelValidatorsService } from '@app/shared'
+import { FormValidatorService } from '@app/shared/forms/form-validators/form-validator.service'
+import { FormGroup } from '@angular/forms'
+import { pairwise } from 'rxjs/operators'
+import { concat, of } from 'rxjs'
+@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 userService: UserService,
+    private videoChannelValidatorsService: VideoChannelValidatorsService
+  ) {
+    super()
+  }
+  get instanceHost () {
+    return window.location.host
+  }
+  ngOnInit () {
+    this.buildForm({
+      displayName: this.videoChannelValidatorsService.VIDEO_CHANNEL_DISPLAY_NAME,
+      name: this.videoChannelValidatorsService.VIDEO_CHANNEL_NAME
+    })
+    setTimeout(() => this.formBuilt.emit(this.form))
+    concat(
+      of(''),
+      this.form.get('displayName').valueChanges
+    ).pipe(pairwise())
+     .subscribe(([ oldValue, newValue ]) => this.onDisplayNameChange(oldValue, newValue))
+  }
+  isSameThanUsername () {
+    return this.username && this.username === this.form.value['name']
+  }
+  private onDisplayNameChange (oldDisplayName: string, newDisplayName: string) {
+    const name = this.form.value['name'] || ''
+    const newName = this.userService.getNewUsername(oldDisplayName, newDisplayName, name)
+    this.form.patchValue({ name: newName })
+  }
+}
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..47b3be8cc
--- /dev/null
+++ b/client/src/app/+signup/+register/register-step-user.component.html
@@ -0,0 +1,73 @@
+<form role="form" [formGroup]="form">
+  <div class="form-group">
+    <label for="displayName" i18n>Display name</label>
+    <div class="input-group">
+      <input
+        type="text" id="displayName" placeholder="John Doe"
+        formControlName="displayName" [ngClass]="{ 'input-error': formErrors['displayName'] }"
+      >
+    </div>
+    <div *ngIf="formErrors.displayName" class="form-error">
+      {{ formErrors.displayName }}
+    </div>
+  </div>
+  <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 class="name-information" i18n>
+      The username is a unique identifier of your account on this instance. It's like an address mail, so other people can find you.
+    </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..3b71fd3c4
--- /dev/null
+++ b/client/src/app/+signup/+register/register-step-user.component.ts
@@ -0,0 +1,54 @@
+import { Component, EventEmitter, OnInit, Output } from '@angular/core'
+import { AuthService } from '@app/core'
+import { FormReactive, UserService, UserValidatorsService } from '@app/shared'
+import { FormValidatorService } from '@app/shared/forms/form-validators/form-validator.service'
+import { FormGroup } from '@angular/forms'
+import { pairwise } from 'rxjs/operators'
+import { concat, of } from 'rxjs'
+@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 userService: UserService,
+    private userValidatorsService: UserValidatorsService
+  ) {
+    super()
+  }
+  get instanceHost () {
+    return window.location.host
+  }
+  ngOnInit () {
+    this.buildForm({
+      displayName: this.userValidatorsService.USER_DISPLAY_NAME_REQUIRED,
+      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))
+    concat(
+      of(''),
+      this.form.get('displayName').valueChanges
+    ).pipe(pairwise())
+     .subscribe(([ oldValue, newValue ]) => this.onDisplayNameChange(oldValue, newValue))
+  }
+  private onDisplayNameChange (oldDisplayName: string, newDisplayName: string) {
+    const username = this.form.value['username'] || ''
+    const newUsername = this.userService.getNewUsername(oldDisplayName, newDisplayName, username)
+    this.form.patchValue({ username: newUsername })
+  }
+}
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..d7e47c1a8
--- /dev/null
+++ b/client/src/app/+signup/+register/register.component.html
@@ -0,0 +1,47 @@
+<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="!signupDone && !error" class="done-loader">
+            <my-loader [loading]="true"></my-loader>
+            <div i18n>PeerTube is creating your account...</div>
+          </div>
+          <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/+register/register.component.scss b/client/src/app/+signup/+register/register.component.scss
new file mode 100644
index 000000000..8d14992e7
--- /dev/null
+++ b/client/src/app/+signup/+register/register.component.scss
@@ -0,0 +1,81 @@
+@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-group-terms {
+  margin: 30px 0;
+}
+.input-group {
+  @include peertube-input-group(400px);
+}
+.input-group-append {
+  height: 30px;
+}
+input:not([type=submit]) {
+  @include peertube-input-text(400px);
+  display: block;
+  &#username,
+  &#name {
+    width: auto !important;
+    flex-grow: 1;
+  }
+}
+input[type=submit],
+button {
+  @include peertube-button;
+  @include orange-button;
+}
+.name-information {
+  margin-top: 10px;
+}
+.done-loader {
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  align-items: center;
+  my-loader {
+    margin-bottom: 20px;
+    /deep/ .loader div {
+      border-color: var(--mainColor) transparent transparent transparent;
+    }
+    & + div {
+      font-size: 15px;
+    }
+  }
+}
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/+signup/+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
new file mode 100644
index 000000000..47519c943
--- /dev/null
+++ b/client/src/app/+signup/+verify-account/verify-account-email/verify-account-email.component.html
@@ -0,0 +1,18 @@
+<div class="margin-content">
+  <div i18n class="title-page title-page-single">
+    Verify account email confirmation
+  </div>
+  <my-signup-success i18n *ngIf="!isPendingEmail && success" message="Your email has been verified and you may now login.">
+  </my-signup-success>
+  <div i18n class="alert alert-success" *ngIf="isPendingEmail && success">
+    Email updated.
+  </div>
+  <div *ngIf="failed">
+    <span i18n>An error occurred.</span>
+    <a i18n routerLink="/verify-account/ask-send-email" [queryParams]="{ isPendingEmail: isPendingEmail }">Request new verification email.</a>
+  </div>
+</div>
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..054f04310 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
@@ -1,7 +1,7 @@
 import { Component, OnInit } from '@angular/core'
 import { ActivatedRoute, Router } from '@angular/router'
 import { I18n } from '@ngx-translate/i18n-polyfill'
-import { Notifier } from '@app/core'
+import { AuthService, Notifier } from '@app/core'
 import { UserService } from '@app/shared'
 @Component({
@@ -11,12 +11,15 @@ import { UserService } from '@app/shared'
 export class VerifyAccountEmailComponent implements OnInit {
  success = false
+  failed = false
+  isPendingEmail = false
  private userId: number
  private verificationString: string
  constructor (
    private userService: UserService,
+    private authService: AuthService,
    private notifier: Notifier,
    private router: Router,
    private route: ActivatedRoute,
@@ -25,8 +28,12 @@ export class VerifyAccountEmailComponent implements OnInit {
  }
  ngOnInit () {
-    this.userId = this.route.snapshot.queryParams['userId']
+    const queryParams = this.route.snapshot.queryParams
-    this.verificationString = this.route.snapshot.queryParams['verificationString']
+    this.userId = queryParams['userId']
+    this.verificationString = queryParams['verificationString']
+    this.isPendingEmail = queryParams['isPendingEmail'] === 'true'
+    console.log(this.isPendingEmail)
    if (!this.userId || !this.verificationString) {
      this.notifier.error(this.i18n('Unable to find user id or verification string.'))
@@ -36,16 +43,17 @@ export class VerifyAccountEmailComponent implements OnInit {
  }
  verifyEmail () {
-    this.userService.verifyEmail(this.userId, this.verificationString)
+    this.userService.verifyEmail(this.userId, this.verificationString, this.isPendingEmail)
      .subscribe(
        () => {
+          this.authService.refreshUserInformation()
          this.success = true
-          setTimeout(() => {
-            this.router.navigate([ '/login' ])
-          }, 2000)
        },
        err => {
+          this.failed = true
          this.notifier.error(err.message)
        }
      )
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-email/verify-account-email.component.html b/client/src/app/+verify-account/verify-account-email/verify-account-email.component.html
deleted file mode 100644
index a83d4a3c2..000000000
--- a/client/src/app/+verify-account/verify-account-email/verify-account-email.component.html
+++ /dev/null
@@ -1,15 +0,0 @@
-<div class="margin-content">
-  <div i18n class="title-page title-page-single">
-    Verify account email confirmation
-  </div>
-  <div i18n *ngIf="success; else verificationError">
-    Your email has been verified and you may now login. Redirecting...
-  </div>
-  <ng-template #verificationError>
-    <div>
-      <span i18n>An error occurred. </span>
-      <a i18n routerLink="/verify-account/ask-send-email">Request new verification email.</a>
-    </div>
-  </ng-template>
-</div>
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/core/server/server.service.ts b/client/src/app/core/server/server.service.ts
index 3a8a535fd..689f25a40 100644
--- a/client/src/app/core/server/server.service.ts
+++ b/client/src/app/core/server/server.service.ts
@@ -10,6 +10,7 @@ import { isDefaultLocale, peertubeTranslate } from '../../../../../shared/models
 import { getDevLocale, isOnDevLocale } from '@app/shared/i18n/i18n-utils'
 import { sortBy } from '@app/shared/misc/utils'
 import { VideoPlaylistPrivacy } from '@shared/models/videos/playlist/video-playlist-privacy.model'
+import { cloneDeep } from 'lodash-es'
 @Injectable()
 export class ServerService {
@@ -160,27 +161,27 @@ export class ServerService {
  }
  getConfig () {
-    return this.config
+    return cloneDeep(this.config)
  }
  getVideoCategories () {
-    return this.videoCategories
+    return cloneDeep(this.videoCategories)
  }
  getVideoLicences () {
-    return this.videoLicences
+    return cloneDeep(this.videoLicences)
  }
  getVideoLanguages () {
-    return this.videoLanguages
+    return cloneDeep(this.videoLanguages)
  }
  getVideoPrivacies () {
-    return this.videoPrivacies
+    return cloneDeep(this.videoPrivacies)
  }
  getVideoPlaylistPrivacies () {
-    return this.videoPlaylistPrivacies
+    return cloneDeep(this.videoPlaylistPrivacies)
  }
  private loadAttributeEnum (
diff --git a/client/src/app/menu/menu.component.html b/client/src/app/menu/menu.component.html
index e80e6b803..588cb8548 100644
--- a/client/src/app/menu/menu.component.html
+++ b/client/src/app/menu/menu.component.html
@@ -63,7 +63,7 @@
        <a routerLink="/videos/overview" routerLinkActive="active">
          <my-global-icon iconName="globe"></my-global-icon>
-          <ng-container i18n>Overview</ng-container>
+          <ng-container i18n>Discover</ng-container>
        </a>
        <a routerLink="/videos/trending" routerLinkActive="active">
diff --git a/client/src/app/search/search.component.html b/client/src/app/search/search.component.html
index 0a9f78cb2..055f64cc8 100644
--- a/client/src/app/search/search.component.html
+++ b/client/src/app/search/search.component.html
@@ -20,7 +20,7 @@
      </div>
    </div>
-    <div class="results-filter" [ngbCollapse]="isSearchFilterCollapsed">
+    <div class="results-filter collapse-transition" [ngbCollapse]="isSearchFilterCollapsed">
      <my-search-filters [advancedSearch]="advancedSearch" (filtered)="onFiltered()"></my-search-filters>
    </div>
  </div>
diff --git a/client/src/app/search/search.component.scss b/client/src/app/search/search.component.scss
index 4e3ce1c96..3343a276d 100644
--- a/client/src/app/search/search.component.scss
+++ b/client/src/app/search/search.component.scss
@@ -35,18 +35,6 @@
        }
      }
    }
-    .results-filter {
-      // Animation when we show/hide the filters
-      transition: max-height 0.3s;
-      display: block !important;
-      overflow: hidden !important;
-      max-height: 0;
-      &.show {
-        max-height: 1500px;
-      }
-    }
  }
  .entry {
diff --git a/client/src/app/search/search.module.ts b/client/src/app/search/search.module.ts
index 0411fbe24..8b791621e 100644
--- a/client/src/app/search/search.module.ts
+++ b/client/src/app/search/search.module.ts
@@ -4,14 +4,11 @@ import { SearchComponent } from '@app/search/search.component'
 import { SearchService } from '@app/search/search.service'
 import { SearchRoutingModule } from '@app/search/search-routing.module'
 import { SearchFiltersComponent } from '@app/search/search-filters.component'
-import { NgbCollapseModule } from '@ng-bootstrap/ng-bootstrap'
 @NgModule({
  imports: [
    SearchRoutingModule,
-    SharedModule,
+    SharedModule
-    NgbCollapseModule
  ],
  declarations: [
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/form-validators/user-validators.service.ts b/client/src/app/shared/forms/form-validators/user-validators.service.ts
index 6589b2580..2dafb1816 100644
--- a/client/src/app/shared/forms/form-validators/user-validators.service.ts
+++ b/client/src/app/shared/forms/form-validators/user-validators.service.ts
@@ -12,7 +12,7 @@ export class UserValidatorsService {
  readonly USER_VIDEO_QUOTA: BuildFormValidator
  readonly USER_VIDEO_QUOTA_DAILY: BuildFormValidator
  readonly USER_ROLE: BuildFormValidator
-  readonly USER_DISPLAY_NAME: BuildFormValidator
+  readonly USER_DISPLAY_NAME_REQUIRED: BuildFormValidator
  readonly USER_DESCRIPTION: BuildFormValidator
  readonly USER_TERMS: BuildFormValidator
@@ -85,18 +85,7 @@ export class UserValidatorsService {
      }
    }
-    this.USER_DISPLAY_NAME = {
+    this.USER_DISPLAY_NAME_REQUIRED = this.getDisplayName(true)
-      VALIDATORS: [
-        Validators.required,
-        Validators.minLength(1),
-        Validators.maxLength(50)
-      ],
-      MESSAGES: {
-        'required': this.i18n('Display name is required.'),
-        'minlength': this.i18n('Display name must be at least 1 character long.'),
-        'maxlength': this.i18n('Display name cannot be more than 50 characters long.')
-      }
-    }
    this.USER_DESCRIPTION = {
      VALIDATORS: [
@@ -129,4 +118,22 @@ export class UserValidatorsService {
      }
    }
  }
+  private getDisplayName (required: boolean) {
+    const control = {
+      VALIDATORS: [
+        Validators.minLength(1),
+        Validators.maxLength(120)
+      ],
+      MESSAGES: {
+        'required': this.i18n('Display name is required.'),
+        'minlength': this.i18n('Display name must be at least 1 character long.'),
+        'maxlength': this.i18n('Display name cannot be more than 50 characters long.')
+      }
+    }
+    if (required) control.VALIDATORS.push(Validators.required)
+    return control
+  }
 }
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/+admin/follows/shared/follow.service.ts b/client/src/app/shared/instance/follow.service.ts
index c2b8ef006..5a44c64f1 100644
--- a/client/src/app/+admin/follows/shared/follow.service.ts
+++ b/client/src/app/shared/instance/follow.service.ts
@@ -3,13 +3,13 @@ import { HttpClient, HttpParams } from '@angular/common/http'
 import { Injectable } from '@angular/core'
 import { SortMeta } from 'primeng/primeng'
 import { Observable } from 'rxjs'
-import { ActorFollow, ResultList } from '../../../../../../shared'
+import { ActorFollow, ResultList } from '@shared/index'
-import { environment } from '../../../../environments/environment'
+import { environment } from '../../../environments/environment'
-import { RestExtractor, RestPagination, RestService } from '../../../shared'
+import { RestExtractor, RestPagination, RestService } from '../rest'
 @Injectable()
 export class FollowService {
-  private static BASE_APPLICATION_URL = environment.apiUrl + '/api/v1/server'
+  private static BASE_APPLICATION_URL = 'https://peertube2.cpy.re' + '/api/v1/server'
  constructor (
    private authHttp: HttpClient,
diff --git a/client/src/app/shared/misc/loader.component.html b/client/src/app/shared/misc/loader.component.html
index b8b7ad343..ca8ed063e 100644
--- a/client/src/app/shared/misc/loader.component.html
+++ b/client/src/app/shared/misc/loader.component.html
@@ -1,5 +1,5 @@
 <div *ngIf="loading">
-  <div class="lds-ring">
+  <div class="loader">
    <div></div>
    <div></div>
    <div></div>
diff --git a/client/src/app/shared/misc/loader.component.scss b/client/src/app/shared/misc/loader.component.scss
index ddb64f07a..ffac9c707 100644
--- a/client/src/app/shared/misc/loader.component.scss
+++ b/client/src/app/shared/misc/loader.component.scss
@@ -3,14 +3,14 @@
 // Thanks to https://loading.io/css/ (CC0 License)
-.lds-ring {
+.loader {
  display: inline-block;
  position: relative;
  width: 50px;
  height: 50px;
 }
-.lds-ring div {
+.loader div {
  box-sizing: border-box;
  display: block;
  position: absolute;
@@ -19,23 +19,23 @@
  margin: 6px;
  border: 4px solid;
  border-radius: 50%;
-  animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
+  animation: loader 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  border-color: #999999 transparent transparent transparent;
 }
-.lds-ring div:nth-child(1) {
+.loader div:nth-child(1) {
  animation-delay: -0.45s;
 }
-.lds-ring div:nth-child(2) {
+.loader div:nth-child(2) {
  animation-delay: -0.3s;
 }
-.lds-ring div:nth-child(3) {
+.loader div:nth-child(3) {
  animation-delay: -0.15s;
 }
-@keyframes lds-ring {
+@keyframes loader {
  0% {
    transform: rotate(0deg);
  }
diff --git a/client/src/app/shared/shared.module.ts b/client/src/app/shared/shared.module.ts
index ded65653f..eb57a2fff 100644
--- a/client/src/app/shared/shared.module.ts
+++ b/client/src/app/shared/shared.module.ts
@@ -53,7 +53,14 @@ import { VideoCaptionService } from '@app/shared/video-caption'
 import { PeertubeCheckboxComponent } from '@app/shared/forms/peertube-checkbox.component'
 import { VideoImportService } from '@app/shared/video-import/video-import.service'
 import { ActionDropdownComponent } from '@app/shared/buttons/action-dropdown.component'
-import { NgbDropdownModule, NgbModalModule, NgbPopoverModule, NgbTabsetModule, NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap'
+import {
+  NgbCollapseModule,
+  NgbDropdownModule,
+  NgbModalModule,
+  NgbPopoverModule,
+  NgbTabsetModule,
+  NgbTooltipModule
+} from '@ng-bootstrap/ng-bootstrap'
 import { RemoteSubscribeComponent, SubscribeButtonComponent, UserSubscriptionService } from '@app/shared/user-subscription'
 import { InstanceFeaturesTableComponent } from '@app/shared/instance/instance-features-table.component'
 import { OverviewService } from '@app/shared/overview'
@@ -69,7 +76,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'
@@ -85,6 +92,7 @@ import { VideoBlacklistComponent } from '@app/shared/video/modals/video-blacklis
 import { VideoDownloadComponent } from '@app/shared/video/modals/video-download.component'
 import { VideoReportComponent } from '@app/shared/video/modals/video-report.component'
 import { ClipboardModule } from 'ngx-clipboard'
+import { FollowService } from '@app/shared/instance/follow.service'
 @NgModule({
  imports: [
@@ -99,6 +107,7 @@ import { ClipboardModule } from 'ngx-clipboard'
    NgbPopoverModule,
    NgbTabsetModule,
    NgbTooltipModule,
+    NgbCollapseModule,
    ClipboardModule,
@@ -154,7 +163,7 @@ import { ClipboardModule } from 'ngx-clipboard'
    ConfirmComponent,
    GlobalIconComponent,
-    ImageUploadComponent
+    PreviewUploadComponent
  ],
  exports: [
@@ -169,6 +178,7 @@ import { ClipboardModule } from 'ngx-clipboard'
    NgbPopoverModule,
    NgbTabsetModule,
    NgbTooltipModule,
+    NgbCollapseModule,
    ClipboardModule,
@@ -218,7 +228,7 @@ import { ClipboardModule } from 'ngx-clipboard'
    ConfirmComponent,
    GlobalIconComponent,
-    ImageUploadComponent,
+    PreviewUploadComponent,
    NumberFormatterPipe,
    ObjectLengthPipe,
@@ -271,6 +281,8 @@ import { ClipboardModule } from 'ngx-clipboard'
    UserNotificationService,
+    FollowService,
    I18n
  ]
 })
diff --git a/client/src/app/shared/users/user-notifications.component.scss b/client/src/app/shared/users/user-notifications.component.scss
index 88f38d9cf..0c6c70d98 100644
--- a/client/src/app/shared/users/user-notifications.component.scss
+++ b/client/src/app/shared/users/user-notifications.component.scss
@@ -14,6 +14,7 @@
  font-size: inherit;
  padding: 15px 5px 15px 10px;
  border-bottom: 1px solid $separator-border-color;
+  word-break: break-word;
  &.unread {
    background-color: rgba(0, 0, 0, 0.05);
diff --git a/client/src/app/shared/users/user.model.ts b/client/src/app/shared/users/user.model.ts
index e3ed2dfbd..14d13959a 100644
--- a/client/src/app/shared/users/user.model.ts
+++ b/client/src/app/shared/users/user.model.ts
@@ -8,6 +8,7 @@ export class User implements UserServerModel {
  id: number
  username: string
  email: string
+  pendingEmail: string | null
  emailVerified: boolean
  nsfwPolicy: NSFWPolicyType
diff --git a/client/src/app/shared/users/user.service.ts b/client/src/app/shared/users/user.service.ts
index cc5c051f1..41ee87197 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 {
@@ -37,6 +38,20 @@ export class UserService {
               )
  }
+  changeEmail (password: string, newEmail: string) {
+    const url = UserService.BASE_USERS_URL + 'me'
+    const body: UserUpdateMe = {
+      currentPassword: password,
+      email: newEmail
+    }
+    return this.authHttp.put(url, body)
+               .pipe(
+                 map(this.restExtractor.extractDataBool),
+                 catchError(err => this.restExtractor.handleError(err))
+               )
+  }
  updateMyProfile (profile: UserUpdateMe) {
    const url = UserService.BASE_USERS_URL + 'me'
@@ -64,7 +79,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),
@@ -103,10 +118,11 @@ export class UserService {
               )
  }
-  verifyEmail (userId: number, verificationString: string) {
+  verifyEmail (userId: number, verificationString: string, isPendingEmail: boolean) {
    const url = `${UserService.BASE_USERS_URL}/${userId}/verify-email`
    const body = {
-      verificationString
+      verificationString,
+      isPendingEmail
    }
    return this.authHttp.post(url, body)
@@ -135,6 +151,22 @@ export class UserService {
      .pipe(catchError(res => this.restExtractor.handleError(res)))
  }
+  getNewUsername (oldDisplayName: string, newDisplayName: string, currentUsername: string) {
+    // Don't update display name, the user seems to have changed it
+    if (this.displayNameToUsername(oldDisplayName) !== currentUsername) return currentUsername
+    return this.displayNameToUsername(newDisplayName)
+  }
+  displayNameToUsername (displayName: string) {
+    if (!displayName) return ''
+    return displayName
+      .toLowerCase()
+      .replace(/\s/g, '_')
+      .replace(/[^a-z0-9_.]/g, '')
+  }
  /* ###### Admin methods ###### */
  addUser (userCreate: UserCreate) {
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..efd369bca 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,17 @@
    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..dc8f9cda9 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 { isLastMonth, isLastWeek, isToday, isYesterday } from '@shared/core-utils/miscs/date'
+enum GroupDate {
+  UNKNOWN = 0,
+  TODAY = 1,
+  YESTERDAY = 2,
+  LAST_WEEK = 3,
+  LAST_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.LAST_WEEK]: this.i18n('Last week'),
+      [GroupDate.LAST_MONTH]: this.i18n('Last 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,59 @@ 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)) {
+        if (currentGroupedDate === GroupDate.TODAY) continue
+        currentGroupedDate = GroupDate.TODAY
+        this.groupedDates[ video.id ] = currentGroupedDate
+        continue
+      }
+      if (currentGroupedDate <= GroupDate.YESTERDAY && isYesterday(publishedDate)) {
+        if (currentGroupedDate === GroupDate.YESTERDAY) continue
+        currentGroupedDate = GroupDate.YESTERDAY
+        this.groupedDates[ video.id ] = currentGroupedDate
+        continue
+      }
+      if (currentGroupedDate <= GroupDate.LAST_WEEK && isLastWeek(publishedDate)) {
+        if (currentGroupedDate === GroupDate.LAST_WEEK) continue
+        currentGroupedDate = GroupDate.LAST_WEEK
+        this.groupedDates[ video.id ] = currentGroupedDate
+        continue
+      }
+      if (currentGroupedDate <= GroupDate.LAST_MONTH && isLastMonth(publishedDate)) {
+        if (currentGroupedDate === GroupDate.LAST_MONTH) continue
+        currentGroupedDate = GroupDate.LAST_MONTH
+        this.groupedDates[ video.id ] = currentGroupedDate
+        continue
+      }
+      if (currentGroupedDate <= GroupDate.OLDER) {
+        if (currentGroupedDate === GroupDate.OLDER) continue
+        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.html b/client/src/app/shared/video/modals/video-download.component.html
index dd01c1388..935d01330 100644
--- a/client/src/app/shared/video/modals/video-download.component.html
+++ b/client/src/app/shared/video/modals/video-download.component.html
@@ -31,11 +31,6 @@
        <input type="radio" name="download" id="download-torrent" [(ngModel)]="downloadType" value="torrent">
        <label i18n for="download-torrent">Torrent (.torrent file)</label>
      </div>
-      <div class="peertube-radio-container">
-        <input type="radio" name="download" id="download-magnet" [(ngModel)]="downloadType" value="magnet">
-        <label i18n for="download-magnet">Torrent (magnet link)</label>
-      </div>
    </div>
  </div>
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..16f3621b4 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'
@@ -12,10 +12,11 @@ import { Notifier } from '@app/core'
 export class VideoDownloadComponent {
  @ViewChild('modal') modal: ElementRef
-  downloadType: 'direct' | 'torrent' | 'magnet' = 'torrent'
+  downloadType: 'direct' | 'torrent' = 'torrent'
  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 () {
@@ -57,9 +57,6 @@ export class VideoDownloadComponent {
      case 'torrent':
        return file.torrentDownloadUrl
-      case 'magnet':
-        return file.magnetUri
    }
  }
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.scss b/client/src/app/signup/signup.component.scss
deleted file mode 100644
index 90e1e8e74..000000000
--- a/client/src/app/signup/signup.component.scss
+++ /dev/null
@@ -1,39 +0,0 @@
-@import '_variables';
-@import '_mixins';
-my-instance-features-table {
-  display: block;
-  margin-bottom: 40px;
-}
-form {
-  margin: 0 60px 40px 0;
-}
-.form-group-terms {
-  margin: 30px 0;
-}
-.input-group {
-  @include peertube-input-group(400px);
-}
-.input-group-append {
-  height: 30px;
-}
-input:not([type=submit]) {
-  @include peertube-input-text(400px);
-  display: block;
-  &#username {
-    width: auto;
-    flex-grow: 1;
-  }
-}
-input[type=submit] {
-  @include peertube-button;
-  @include orange-button;
-}
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 8345645f6..cea352bfb 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
@@ -13,6 +13,7 @@ import { VideoCaptionAddModalComponent } from '@app/videos/+video-edit/shared/vi
 import { VideoCaptionEdit } from '@app/shared/video-caption/video-caption-edit.model'
 import { removeElementFromArray } from '@app/shared/misc/utils'
 import { VideoConstant, VideoPrivacy } from '../../../../../../shared'
+import { VideoService } from '@app/shared/video/video.service'
 @Component({
  selector: 'my-video-edit',
@@ -23,7 +24,6 @@ export class VideoEditComponent implements OnInit, OnDestroy {
  @Input() form: FormGroup
  @Input() formErrors: { [ id: string ]: string } = {}
  @Input() validationMessages: FormReactiveValidationMessages = {}
-  @Input() videoPrivacies: VideoConstant<VideoPrivacy>[] = []
  @Input() userVideoChannels: { id: number, label: string, support: string }[] = []
  @Input() schedulePublicationPossible = true
  @Input() videoCaptions: (VideoCaptionEdit & { captionPath?: string })[] = []
@@ -34,6 +34,7 @@ export class VideoEditComponent implements OnInit, OnDestroy {
  // So that it can be accessed in the template
  readonly SPECIAL_SCHEDULED_PRIVACY = VideoEdit.SPECIAL_SCHEDULED_PRIVACY
+  videoPrivacies: VideoConstant<VideoPrivacy>[] = []
  videoCategories: VideoConstant<number>[] = []
  videoLicences: VideoConstant<number>[] = []
  videoLanguages: VideoConstant<string>[] = []
@@ -58,6 +59,7 @@ export class VideoEditComponent implements OnInit, OnDestroy {
    private formValidatorService: FormValidatorService,
    private videoValidatorsService: VideoValidatorsService,
    private videoCaptionService: VideoCaptionService,
+    private videoService: VideoService,
    private route: ActivatedRoute,
    private router: Router,
    private notifier: Notifier,
@@ -100,7 +102,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,
@@ -133,6 +134,9 @@ export class VideoEditComponent implements OnInit, OnDestroy {
    this.videoLicences = this.serverService.getVideoLicences()
    this.videoLanguages = this.serverService.getVideoLanguages()
+    const privacies = this.serverService.getVideoPrivacies()
+    this.videoPrivacies = this.videoService.explainedPrivacyLabels(privacies)
    this.initialVideoCaptions = this.videoCaptions.map(c => c.language.id)
    this.ngZone.runOutsideAngular(() => {
diff --git a/client/src/app/videos/+video-edit/video-add-components/video-import-torrent.component.html b/client/src/app/videos/+video-edit/video-add-components/video-import-torrent.component.html
index 537d7ffa2..7a495fea5 100644
--- a/client/src/app/videos/+video-edit/video-add-components/video-import-torrent.component.html
+++ b/client/src/app/videos/+video-edit/video-add-components/video-import-torrent.component.html
@@ -58,7 +58,7 @@
 <form [hidden]="!hasImportedVideo" novalidate [formGroup]="form">
  <my-video-edit
    [form]="form" [formErrors]="formErrors" [videoCaptions]="videoCaptions" [schedulePublicationPossible]="false"
-    [validationMessages]="validationMessages" [videoPrivacies]="explainedVideoPrivacies" [userVideoChannels]="userVideoChannels"
+    [validationMessages]="validationMessages" [userVideoChannels]="userVideoChannels"
  ></my-video-edit>
  <div class="submit-container">
diff --git a/client/src/app/videos/+video-edit/video-add-components/video-import-torrent.component.ts b/client/src/app/videos/+video-edit/video-add-components/video-import-torrent.component.ts
index d2e9f6cfe..e47624dd6 100644
--- a/client/src/app/videos/+video-edit/video-add-components/video-import-torrent.component.ts
+++ b/client/src/app/videos/+video-edit/video-add-components/video-import-torrent.component.ts
@@ -100,8 +100,6 @@ export class VideoImportTorrentComponent extends VideoSend implements OnInit, Ca
          previewUrl: null
        }))
-        this.explainedVideoPrivacies = this.videoService.explainedPrivacyLabels(this.videoPrivacies)
        this.hydrateFormFromVideo()
      },
diff --git a/client/src/app/videos/+video-edit/video-add-components/video-import-url.component.html b/client/src/app/videos/+video-edit/video-add-components/video-import-url.component.html
index 984b9d590..e4f19faa8 100644
--- a/client/src/app/videos/+video-edit/video-add-components/video-import-url.component.html
+++ b/client/src/app/videos/+video-edit/video-add-components/video-import-url.component.html
@@ -51,7 +51,7 @@
 <form [hidden]="!hasImportedVideo" novalidate [formGroup]="form">
  <my-video-edit
    [form]="form" [formErrors]="formErrors" [videoCaptions]="videoCaptions" [schedulePublicationPossible]="false"
-    [validationMessages]="validationMessages" [videoPrivacies]="explainedVideoPrivacies" [userVideoChannels]="userVideoChannels"
+    [validationMessages]="validationMessages" [userVideoChannels]="userVideoChannels"
  ></my-video-edit>
  <div class="submit-container">
diff --git a/client/src/app/videos/+video-edit/video-add-components/video-import-url.component.ts b/client/src/app/videos/+video-edit/video-add-components/video-import-url.component.ts
index 2dffdbf0e..a5578bebd 100644
--- a/client/src/app/videos/+video-edit/video-add-components/video-import-url.component.ts
+++ b/client/src/app/videos/+video-edit/video-add-components/video-import-url.component.ts
@@ -91,8 +91,6 @@ export class VideoImportUrlComponent extends VideoSend implements OnInit, CanCom
          previewUrl: null
        }))
-        this.explainedVideoPrivacies = this.videoService.explainedPrivacyLabels(this.videoPrivacies)
        this.hydrateFormFromVideo()
      },
diff --git a/client/src/app/videos/+video-edit/video-add-components/video-send.ts b/client/src/app/videos/+video-edit/video-add-components/video-send.ts
index 8401caeec..580c123a0 100644
--- a/client/src/app/videos/+video-edit/video-add-components/video-send.ts
+++ b/client/src/app/videos/+video-edit/video-add-components/video-send.ts
@@ -14,7 +14,6 @@ import { CanComponentDeactivateResult } from '@app/shared/guards/can-deactivate-
 export abstract class VideoSend extends FormReactive implements OnInit {
  userVideoChannels: { id: number, label: string, support: string }[] = []
  videoPrivacies: VideoConstant<VideoPrivacy>[] = []
-  explainedVideoPrivacies: VideoConstant<VideoPrivacy>[] = []
  videoCaptions: VideoCaptionEdit[] = []
  firstStepPrivacyId = 0
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..0f904affb 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>
@@ -50,7 +71,7 @@
 <form [hidden]="!isUploadingVideo" novalidate [formGroup]="form">
  <my-video-edit
    [form]="form" [formErrors]="formErrors" [videoCaptions]="videoCaptions"
-    [validationMessages]="validationMessages" [videoPrivacies]="explainedVideoPrivacies" [userVideoChannels]="userVideoChannels"
+    [validationMessages]="validationMessages" [userVideoChannels]="userVideoChannels"
    [waitTranscodingEnabled]="waitTranscodingEnabled"
  ></my-video-edit>
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..69fa13a2f 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,11 +184,10 @@ export class VideoUploadComponent extends VideoSend implements OnInit, OnDestroy
      name,
      privacy,
      nsfw,
-      channelId
+      channelId,
+      previewfile: this.previewfileUpload
    })
-    this.explainedVideoPrivacies = this.videoService.explainedPrivacyLabels(this.videoPrivacies)
    this.videoUploadObservable = this.videoService.uploadVideo(formData).subscribe(
      event => {
        if (event.type === HttpEventType.UploadProgress) {
@@ -251,4 +247,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-edit/video-update.component.html b/client/src/app/videos/+video-edit/video-update.component.html
index b5cab7ed5..aa148311f 100644
--- a/client/src/app/videos/+video-edit/video-update.component.html
+++ b/client/src/app/videos/+video-edit/video-update.component.html
@@ -7,7 +7,7 @@
    <my-video-edit
      [form]="form" [formErrors]="formErrors" [schedulePublicationPossible]="schedulePublicationPossible"
-      [validationMessages]="validationMessages" [videoPrivacies]="explainedVideoPrivacies" [userVideoChannels]="userVideoChannels"
+      [validationMessages]="validationMessages" [userVideoChannels]="userVideoChannels"
      [videoCaptions]="videoCaptions" [waitTranscodingEnabled]="waitTranscodingEnabled"
    ></my-video-edit>
diff --git a/client/src/app/videos/+video-edit/video-update.component.ts b/client/src/app/videos/+video-edit/video-update.component.ts
index 10f797d02..81c66ff20 100644
--- a/client/src/app/videos/+video-edit/video-update.component.ts
+++ b/client/src/app/videos/+video-edit/video-update.component.ts
@@ -3,7 +3,6 @@ import { Component, HostListener, OnInit } from '@angular/core'
 import { ActivatedRoute, Router } from '@angular/router'
 import { LoadingBarService } from '@ngx-loading-bar/core'
 import { Notifier } from '@app/core'
-import { VideoConstant, VideoPrivacy } from '../../../../../shared/models/videos'
 import { ServerService } from '../../core'
 import { FormReactive } from '../../shared'
 import { VideoEdit } from '../../shared/video/video-edit.model'
@@ -13,6 +12,7 @@ import { FormValidatorService } from '@app/shared/forms/form-validators/form-val
 import { VideoCaptionService } from '@app/shared/video-caption'
 import { VideoCaptionEdit } from '@app/shared/video-caption/video-caption-edit.model'
 import { VideoDetails } from '@app/shared/video/video-details.model'
+import { VideoPrivacy } from '@shared/models'
 @Component({
  selector: 'my-videos-update',
@@ -23,8 +23,6 @@ export class VideoUpdateComponent extends FormReactive implements OnInit {
  video: VideoEdit
  isUpdatingVideo = false
-  videoPrivacies: VideoConstant<VideoPrivacy>[] = []
-  explainedVideoPrivacies: VideoConstant<VideoPrivacy>[] = []
  userVideoChannels: { id: number, label: string, support: string }[] = []
  schedulePublicationPossible = false
  videoCaptions: VideoCaptionEdit[] = []
@@ -49,9 +47,6 @@ export class VideoUpdateComponent extends FormReactive implements OnInit {
  ngOnInit () {
    this.buildForm({})
-    this.serverService.videoPrivaciesLoaded
-        .subscribe(() => this.videoPrivacies = this.serverService.getVideoPrivacies())
    this.route.data
        .pipe(map(data => data.videoData))
        .subscribe(({ video, videoChannels, videoCaptions }) => {
@@ -59,14 +54,7 @@ export class VideoUpdateComponent extends FormReactive implements OnInit {
          this.userVideoChannels = videoChannels
          this.videoCaptions = videoCaptions
-          // We cannot set private a video that was not private
+          this.schedulePublicationPossible = this.video.privacy === VideoPrivacy.PRIVATE
-          if (this.video.privacy !== VideoPrivacy.PRIVATE) {
-            this.videoPrivacies = this.videoPrivacies.filter(p => p.id !== VideoPrivacy.PRIVATE)
-          } else { // We can schedule video publication only if it it is private
-            this.schedulePublicationPossible = this.video.privacy === VideoPrivacy.PRIVATE
-          }
-          this.explainedVideoPrivacies = this.videoService.explainedPrivacyLabels(this.videoPrivacies)
          const videoFiles = (video as VideoDetails).files
          if (videoFiles.length > 1) { // Already transcoded
diff --git a/client/src/app/videos/+video-watch/modal/video-share.component.html b/client/src/app/videos/+video-watch/modal/video-share.component.html
index 955b2b80c..82e59d04d 100644
--- a/client/src/app/videos/+video-watch/modal/video-share.component.html
+++ b/client/src/app/videos/+video-watch/modal/video-share.component.html
@@ -5,53 +5,167 @@
  </div>
  <div class="modal-body">
+    <ngb-tabset class="root-tabset bootstrap" (tabChange)="onTabChange($event)">
-    <div class="start-at">
+      <ngb-tab i18n-title title="URL" id="url">
-      <my-peertube-checkbox
+        <ng-template ngbTabContent>
-        inputName="startAt" [(ngModel)]="startAtCheckbox"
-        i18n-labelText labelText="Start at"
+          <div class="tab-content">
-      ></my-peertube-checkbox>
+            <div class="input-group">
+              <input #urlInput (click)="urlInput.select()" type="text" class="form-control readonly" readonly [value]="getVideoUrl()" />
-      <my-timestamp-input
+              <div class="input-group-append">
-        [timestamp]="currentVideoTimestamp"
+                <button [ngxClipboard]="urlInput" (click)="activateCopiedMessage()" type="button" class="btn btn-outline-secondary">
-        [maxTimestamp]="video.duration"
+                  <span class="glyphicon glyphicon-copy"></span>
-        [disabled]="!startAtCheckbox"
+                </button>
-        [(ngModel)]="currentVideoTimestamp"
+              </div>
-      >
+            </div>
-      </my-timestamp-input>
+          </div>
-    </div>
+        </ng-template>
+      </ngb-tab>
+      <ngb-tab i18n-title title="QR-Code" id="qrcode">
+        <ng-template ngbTabContent>
+          <div class="tab-content">
+            <ngx-qrcode qrc-element-type="url" [qrc-value]="getVideoUrl()" qrc-errorCorrectionLevel="Q"></ngx-qrcode>
+          </div>
+        </ng-template>
+      </ngb-tab>
+      <ngb-tab i18n-title title="Embed" id="embed">
+        <ng-template ngbTabContent>
+          <div class="tab-content">
+            <div class="input-group">
+              <input #shareInput (click)="shareInput.select()" type="text" class="form-control readonly" readonly [value]="getVideoIframeCode()" />
+              <div class="input-group-append">
+                <button [ngxClipboard]="shareInput" (click)="activateCopiedMessage()" type="button" class="btn btn-outline-secondary">
+                  <span class="glyphicon glyphicon-copy"></span>
+                </button>
+              </div>
+            </div>
+            <div i18n *ngIf="notSecure()" class="alert alert-warning">
+              The url is not secured (no HTTPS), so the embed video won't work on HTTPS websites (web browsers block non secured HTTP requests on HTTPS websites).
+            </div>
+          </div>
+        </ng-template>
+      </ngb-tab>
+    </ngb-tabset>
-    <div class="form-group">
+    <div class="filters">
-      <label i18n>URL</label>
+      <div>
-      <div class="input-group input-group-sm">
+        <div class="form-group start-at">
-        <input #urlInput (click)="urlInput.select()" type="text" class="form-control input-sm readonly" readonly [value]="getVideoUrl()" />
+          <my-peertube-checkbox
-        <div class="input-group-append">
+            inputName="startAt" [(ngModel)]="customizations.startAtCheckbox"
-          <button [ngxClipboard]="urlInput" (click)="activateCopiedMessage()" type="button" class="btn btn-outline-secondary">
+            i18n-labelText labelText="Start at"
-            <span class="glyphicon glyphicon-copy"></span>
+          ></my-peertube-checkbox>
-          </button>
+          <my-timestamp-input
+            [timestamp]="customizations.startAt"
+            [maxTimestamp]="video.duration"
+            [disabled]="!customizations.startAtCheckbox"
+            [(ngModel)]="customizations.startAt"
+          >
+          </my-timestamp-input>
        </div>
-      </div>
-    </div>
-    <div class="form-group qr-code-group">
+        <div *ngIf="videoCaptions.length !== 0" class="form-group video-caption-block">
-      <label i18n>QR-Code</label>
+          <my-peertube-checkbox
-      <ngx-qrcode qrc-element-type="url" [qrc-value]="getVideoUrl()" qrc-errorCorrectionLevel="Q"></ngx-qrcode>
+            inputName="subtitleCheckbox" [(ngModel)]="customizations.subtitleCheckbox"
-    </div>
+            i18n-labelText labelText="Auto select subtitle"
+          ></my-peertube-checkbox>
-    <div class="form-group">
+          <div class="peertube-select-container" [ngClass]="{ disabled: !customizations.subtitleCheckbox }">
-      <label i18n>Embed</label>
+            <select [(ngModel)]="customizations.subtitle" [disabled]="!customizations.subtitleCheckbox">
-      <div class="input-group input-group-sm">
+              <option *ngFor="let caption of videoCaptions" [value]="caption.language.id">{{ caption.language.label }}</option>
-        <input #shareInput (click)="shareInput.select()" type="text" class="form-control input-sm readonly" readonly [value]="getVideoIframeCode()" />
+            </select>
-        <div class="input-group-append">
+          </div>
-          <button [ngxClipboard]="shareInput" (click)="activateCopiedMessage()" type="button" class="btn btn-outline-secondary">
-            <span class="glyphicon glyphicon-copy"></span>
-          </button>
        </div>
      </div>
-    </div>
-    <div i18n *ngIf="notSecure()" class="alert alert-warning">
+      <div (click)="isAdvancedCustomizationCollapsed = !isAdvancedCustomizationCollapsed" role="button" class="advanced-filters-button"
-      The url is not secured (no HTTPS), so the embed video won't work on HTTPS websites (web browsers block non secured HTTP requests on HTTPS websites).
+           [attr.aria-expanded]="!isAdvancedCustomizationCollapsed" aria-controls="collapseBasic">
+        <ng-container *ngIf="isAdvancedCustomizationCollapsed">
+          <span class="glyphicon glyphicon-menu-down"></span>
+          <ng-container i18n>
+            More customization
+          </ng-container>
+        </ng-container>
+        <ng-container *ngIf="!isAdvancedCustomizationCollapsed">
+          <span class="glyphicon glyphicon-menu-up"></span>
+          <ng-container i18n>
+            Less customization
+          </ng-container>
+        </ng-container>
+      </div>
+      <div class="advanced-filters collapse-transition" [ngbCollapse]="isAdvancedCustomizationCollapsed">
+        <div>
+          <div class="form-group stop-at">
+            <my-peertube-checkbox
+              inputName="stopAt" [(ngModel)]="customizations.stopAtCheckbox"
+              i18n-labelText labelText="Stop at"
+            ></my-peertube-checkbox>
+            <my-timestamp-input
+              [timestamp]="customizations.stopAt"
+              [maxTimestamp]="video.duration"
+              [disabled]="!customizations.stopAtCheckbox"
+              [(ngModel)]="customizations.stopAt"
+            >
+            </my-timestamp-input>
+          </div>
+          <div class="form-group">
+            <my-peertube-checkbox
+              inputName="autoplay" [(ngModel)]="customizations.autoplay"
+              i18n-labelText labelText="Autoplay"
+            ></my-peertube-checkbox>
+          </div>
+          <div class="form-group">
+            <my-peertube-checkbox
+              inputName="muted" [(ngModel)]="customizations.muted"
+              i18n-labelText labelText="Muted"
+            ></my-peertube-checkbox>
+          </div>
+          <div class="form-group">
+            <my-peertube-checkbox
+              inputName="loop" [(ngModel)]="customizations.loop"
+              i18n-labelText labelText="Loop"
+            ></my-peertube-checkbox>
+          </div>
+        </div>
+        <ng-container *ngIf="isInEmbedTab()">
+          <div class="form-group">
+            <my-peertube-checkbox
+              inputName="title" [(ngModel)]="customizations.title"
+              i18n-labelText labelText="Display video title"
+            ></my-peertube-checkbox>
+          </div>
+          <div class="form-group">
+            <my-peertube-checkbox
+              inputName="warningTitle" [(ngModel)]="customizations.warningTitle"
+              i18n-labelText labelText="Display privacy warning"
+            ></my-peertube-checkbox>
+          </div>
+          <div class="form-group">
+            <my-peertube-checkbox
+              inputName="controls" [(ngModel)]="customizations.controls"
+              i18n-labelText labelText="Display player controls"
+            ></my-peertube-checkbox>
+          </div>
+        </ng-container>
+      </div>
    </div>
  </div>
diff --git a/client/src/app/videos/+video-watch/modal/video-share.component.scss b/client/src/app/videos/+video-watch/modal/video-share.component.scss
index 472a45920..c48abf9e0 100644
--- a/client/src/app/videos/+video-watch/modal/video-share.component.scss
+++ b/client/src/app/videos/+video-watch/modal/video-share.component.scss
@@ -1,5 +1,9 @@
-@import '~bootstrap/scss/functions';
+@import '_mixins';
-@import '~bootstrap/scss/variables';
+@import '_variables';
+.peertube-select-container {
+  @include peertube-select-container(200px);
+}
 .action-button-cancel {
  margin-right: 0 !important;
@@ -9,13 +13,65 @@
  text-align: center;
 }
-.start-at {
+.tab-content {
+  margin-top: 30px;
  display: flex;
  justify-content: center;
-  margin-top: 10px;
  align-items: center;
+  flex-direction: column;
+}
+.alert {
+  margin-top: 20px;
+}
+input.readonly {
+  font-size: 15px;
+}
+.filters {
+  margin-top: 30px;
+  padding-top: 30px;
+  border-top: 1px solid $separator-border-color;
+  .advanced-filters-button {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-top: 30px;
+    font-size: 16px;
+    font-weight: $font-semibold;
+    cursor: pointer;
+    .glyphicon {
+      margin-right: 5px;
+    }
+  }
+  .form-group {
+    margin-bottom: 0;
+    height: 34px;
+    display: flex;
+    align-items: center;
+  }
+  .video-caption-block {
+    display: flex;
+    align-items: center;
+    .peertube-select-container {
+      margin-left: 10px;
+    }
+  }
+  .start-at,
+  .stop-at {
+    width: 300px;
+    display: flex;
+    align-items: center;
-  my-timestamp-input {
+    my-timestamp-input {
-    margin-left: 10px;
+      margin-left: 10px;
+    }
  }
 }
diff --git a/client/src/app/videos/+video-watch/modal/video-share.component.ts b/client/src/app/videos/+video-watch/modal/video-share.component.ts
index 6565d7f88..eaaf6b902 100644
--- a/client/src/app/videos/+video-watch/modal/video-share.component.ts
+++ b/client/src/app/videos/+video-watch/modal/video-share.component.ts
@@ -3,8 +3,26 @@ import { Notifier } from '@app/core'
 import { VideoDetails } from '../../../shared/video/video-details.model'
 import { buildVideoEmbed, buildVideoLink } from '../../../../assets/player/utils'
 import { I18n } from '@ngx-translate/i18n-polyfill'
-import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
+import { NgbModal, NgbTabChangeEvent } from '@ng-bootstrap/ng-bootstrap'
-import { durationToString } from '@app/shared/misc/utils'
+import { VideoCaption } from '@shared/models'
+type Customizations = {
+  startAtCheckbox: boolean
+  startAt: number
+  stopAtCheckbox: boolean
+  stopAt: number
+  subtitleCheckbox: boolean
+  subtitle: string
+  loop: boolean
+  autoplay: boolean
+  muted: boolean
+  title: boolean
+  warningTitle: boolean
+  controls: boolean
+}
 @Component({
  selector: 'my-video-share',
@@ -15,9 +33,13 @@ export class VideoShareComponent {
  @ViewChild('modal') modal: ElementRef
  @Input() video: VideoDetails = null
+  @Input() videoCaptions: VideoCaption[] = []
-  currentVideoTimestamp: number
+  activeId: 'url' | 'qrcode' | 'embed'
-  startAtCheckbox = false
+  customizations: Customizations
+  isAdvancedCustomizationCollapsed = true
+  private currentVideoTimestamp: number
  constructor (
    private modalService: NgbModal,
@@ -26,19 +48,47 @@ export class VideoShareComponent {
  ) { }
  show (currentVideoTimestamp?: number) {
-    this.currentVideoTimestamp = currentVideoTimestamp ? Math.floor(currentVideoTimestamp) : 0
+    this.currentVideoTimestamp = currentVideoTimestamp
+    let subtitle: string
+    if (this.videoCaptions.length !== 0) {
+      subtitle = this.videoCaptions[0].language.id
+    }
+    this.customizations = {
+      startAtCheckbox: false,
+      startAt: currentVideoTimestamp ? Math.floor(currentVideoTimestamp) : 0,
+      stopAtCheckbox: false,
+      stopAt: this.video.duration,
+      subtitleCheckbox: false,
+      subtitle,
+      loop: false,
+      autoplay: false,
+      muted: false,
+      // Embed options
+      title: true,
+      warningTitle: true,
+      controls: true
+    }
    this.modalService.open(this.modal)
  }
  getVideoIframeCode () {
-    const embedUrl = buildVideoLink(this.getVideoTimestampIfEnabled(), this.video.embedUrl)
+    const options = this.getOptions(this.video.embedUrl)
+    const embedUrl = buildVideoLink(options)
    return buildVideoEmbed(embedUrl)
  }
  getVideoUrl () {
-    return buildVideoLink(this.getVideoTimestampIfEnabled())
+    const options = this.getOptions()
+    return buildVideoLink(options)
  }
  notSecure () {
@@ -49,9 +99,30 @@ export class VideoShareComponent {
    this.notifier.success(this.i18n('Copied'))
  }
-  private getVideoTimestampIfEnabled () {
+  onTabChange (event: NgbTabChangeEvent) {
-    if (this.startAtCheckbox === true) return this.currentVideoTimestamp
+    this.activeId = event.nextId as any
+  }
+  isInEmbedTab () {
+    return this.activeId === 'embed'
+  }
+  private getOptions (baseUrl?: string) {
+    return {
+      baseUrl,
+      startTime: this.customizations.startAtCheckbox ? this.customizations.startAt : undefined,
+      stopTime: this.customizations.stopAtCheckbox ? this.customizations.stopAt : undefined,
+      subtitle: this.customizations.subtitleCheckbox ? this.customizations.subtitle : undefined,
+      loop: this.customizations.loop,
+      autoplay: this.customizations.autoplay,
+      muted: this.customizations.muted,
-    return undefined
+      title: this.customizations.title,
+      warningTitle: this.customizations.warningTitle,
+      controls: this.customizations.controls
+    }
  }
 }
diff --git a/client/src/app/videos/+video-watch/video-watch.component.html b/client/src/app/videos/+video-watch/video-watch.component.html
index 2e39b9c6b..6a02f630a 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.html
+++ b/client/src/app/videos/+video-watch/video-watch.component.html
@@ -219,5 +219,5 @@
 <ng-template [ngIf]="video !== null">
  <my-video-support #videoSupportModal [video]="video"></my-video-support>
-  <my-video-share #videoShareModal [video]="video"></my-video-share>
+  <my-video-share #videoShareModal [video]="video" [videoCaptions]="videoCaptions"></my-video-share>
 </ng-template>
diff --git a/client/src/app/videos/+video-watch/video-watch.component.scss b/client/src/app/videos/+video-watch/video-watch.component.scss
index bada9bae8..35ea0fffd 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.scss
+++ b/client/src/app/videos/+video-watch/video-watch.component.scss
@@ -347,6 +347,7 @@ $player-factor: 1.7; // 16/9
  /deep/ .other-videos {
    padding-left: 15px;
    flex-basis: $other-videos-width;
+    min-width: $other-videos-width;
    .title-page {
      margin-top: 0 !important;
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..3f1a98f89 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'
@@ -20,6 +20,7 @@ import { environment } from '../../../environments/environment'
 import { VideoCaptionService } from '@app/shared/video-caption'
 import { MarkdownService } from '@app/shared/renderer'
 import {
+  CustomizationOptions,
  P2PMediaLoaderOptions,
  PeertubePlayerManager,
  PeertubePlayerManagerOptions,
@@ -28,8 +29,9 @@ import {
 import { VideoPlaylist } from '@app/shared/video-playlist/video-playlist.model'
 import { VideoPlaylistService } from '@app/shared/video-playlist/video-playlist.service'
 import { Video } from '@app/shared/video/video.model'
-import { isWebRTCDisabled } from '../../../assets/player/utils'
+import { isWebRTCDisabled, timeToInt } from '../../../assets/player/utils'
 import { VideoWatchPlaylistComponent } from '@app/videos/+video-watch/video-watch-playlist.component'
+import { getStoredTheater } from '../../../assets/player/peertube-player-local-storage'
 @Component({
  selector: 'my-video-watch',
@@ -48,9 +50,11 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
  playerElement: HTMLVideoElement
  theaterEnabled = false
  userRating: UserVideoRateType = null
-  video: VideoDetails = null
  descriptionLoading = false
+  video: VideoDetails = null
+  videoCaptions: VideoCaption[] = []
  playlist: VideoPlaylist = null
  completeDescriptionShown = false
@@ -120,6 +124,8 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
    })
    this.initHotkeys()
+    this.theaterEnabled = getStoredTheater()
  }
  ngOnDestroy () {
@@ -135,22 +141,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 +251,20 @@ 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,
+          muted: queryParams.muted,
+          loop: queryParams.loop,
+          subtitle: queryParams.subtitle,
+          playerMode: queryParams.mode,
+          peertubeLink: false
+        }
+        this.onVideoFetched(video, captionsResult.data, urlOptions)
            .catch(err => this.handleError(err))
      })
  }
@@ -279,6 +289,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 () {
@@ -327,9 +338,10 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
  private async onVideoFetched (
    video: VideoDetails,
    videoCaptions: VideoCaption[],
-    urlOptions: { startTime?: number, stopTime?: number, subtitle?: string, playerMode?: string }
+    urlOptions: CustomizationOptions & { playerMode: PlayerMode }
  ) {
    this.video = video
+    this.videoCaptions = videoCaptions
    // Re init attributes
    this.descriptionLoading = false
@@ -339,7 +351,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
    this.videoWatchPlaylist.updatePlaylistIndex(video)
-    let startTime = urlOptions.startTime || (this.video.userHistory ? this.video.userHistory.currentTime : 0)
+    let startTime = timeToInt(urlOptions.startTime) || (this.video.userHistory ? this.video.userHistory.currentTime : 0)
    // If we are at the end of the video, reset the timer
    if (this.video.duration - startTime <= 1) startTime = 0
@@ -378,20 +390,26 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
        enableHotkeys: true,
        inactivityTimeout: 2500,
        poster: this.video.previewUrl,
        startTime,
        stopTime: urlOptions.stopTime,
+        controls: urlOptions.controls,
+        muted: urlOptions.muted,
+        loop: urlOptions.loop,
+        subtitle: urlOptions.subtitle,
+        peertubeLink: urlOptions.peertubeLink,
        theaterMode: true,
        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,
-        subtitle: urlOptions.subtitle,
        userWatching: this.user && this.user.videosHistoryEnabled === true ? {
          url: this.videoService.getUserWatchingVideoUrl(this.video.uuid),
          authorizationHeader: this.authService.getRequestHeaderValue()
@@ -433,7 +451,6 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
    this.zone.runOutsideAngular(async () => {
      this.player = await PeertubePlayerManager.initialize(mode, options)
-      this.theaterEnabled = this.player.theaterEnabled
      this.player.on('customError', ({ err }: { err: any }) => this.handleError(err))
@@ -466,20 +483,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 +555,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-local-storage.ts b/client/src/assets/player/peertube-player-local-storage.ts
index 059fca308..f6c5c5419 100644
--- a/client/src/assets/player/peertube-player-local-storage.ts
+++ b/client/src/assets/player/peertube-player-local-storage.ts
@@ -29,7 +29,7 @@ function getStoredTheater () {
  const value = getLocalStorage('theater-enabled')
  if (value !== null && value !== undefined) return value === 'true'
-  return undefined
+  return false
 }
 function saveVolumeInStore (value: number) {
diff --git a/client/src/assets/player/peertube-player-manager.ts b/client/src/assets/player/peertube-player-manager.ts
index 6cdd54372..083c621d2 100644
--- a/client/src/assets/player/peertube-player-manager.ts
+++ b/client/src/assets/player/peertube-player-manager.ts
@@ -39,7 +39,19 @@ export type P2PMediaLoaderOptions = {
  videoFiles: VideoFile[]
 }
-export type CommonOptions = {
+export interface CustomizationOptions {
+  startTime: number | string
+  stopTime: number | string
+  controls?: boolean
+  muted?: boolean
+  loop?: boolean
+  subtitle?: string
+  peertubeLink: boolean
+}
+export interface CommonOptions extends CustomizationOptions {
  playerElement: HTMLVideoElement
  onPlayerElementChange: (element: HTMLVideoElement) => void
@@ -48,21 +60,14 @@ export type CommonOptions = {
  enableHotkeys: boolean
  inactivityTimeout: number
  poster: string
-  startTime: number | string
-  stopTime: number | string
  theaterMode: boolean
  captions: boolean
-  peertubeLink: boolean
  videoViewUrl: string
  embedUrl: string
  language?: string
-  controls?: boolean
-  muted?: boolean
-  loop?: boolean
-  subtitle?: string
  videoCaptions: VideoJSCaption[]
@@ -117,8 +122,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)
@@ -432,7 +446,7 @@ export class PeertubePlayerManager {
        label: player.localize('Copy the video URL at the current time'),
        listener: function () {
          const player = this as videojs.Player
-          copyToClipboard(buildVideoLink(player.currentTime()))
+          copyToClipboard(buildVideoLink({ startTime: player.currentTime() }))
        }
      },
      {
diff --git a/client/src/assets/player/utils.ts b/client/src/assets/player/utils.ts
index 366689962..777abb568 100644
--- a/client/src/assets/player/utils.ts
+++ b/client/src/assets/player/utils.ts
@@ -27,18 +27,55 @@ function isMobile () {
  return /iPhone|iPad|iPod|Android/i.test(navigator.userAgent)
 }
-function buildVideoLink (time?: number, url?: string) {
+function buildVideoLink (options: {
-  if (!url) url = window.location.origin + window.location.pathname.replace('/embed/', '/watch/')
+  baseUrl?: string,
-  if (time) {
+  startTime?: number,
-    const timeInt = Math.floor(time)
+  stopTime?: number,
-    const params = new URLSearchParams(window.location.search)
+  subtitle?: string,
-    params.set('start', secondsToTime(timeInt))
-    return url + '?' + params.toString()
+  loop?: boolean,
+  autoplay?: boolean,
+  muted?: boolean,
+  // Embed options
+  title?: boolean,
+  warningTitle?: boolean,
+  controls?: boolean
+} = {}) {
+  const { baseUrl } = options
+  const url = baseUrl
+    ? baseUrl
+    : window.location.origin + window.location.pathname.replace('/embed/', '/watch/')
+  const params = new URLSearchParams(window.location.search)
+  if (options.startTime) {
+    const startTimeInt = Math.floor(options.startTime)
+    params.set('start', secondsToTime(startTimeInt))
+  }
+  if (options.stopTime) {
+    const stopTimeInt = Math.floor(options.stopTime)
+    params.set('stop', secondsToTime(stopTimeInt))
  }
+  if (options.subtitle) params.set('subtitle', options.subtitle)
+  if (options.loop === true) params.set('loop', '1')
+  if (options.autoplay === true) params.set('autoplay', '1')
+  if (options.muted === true) params.set('muted', '1')
+  if (options.title === false) params.set('title', '0')
+  if (options.warningTitle === false) params.set('warningTitle', '0')
+  if (options.controls === false) params.set('controls', '0')
+  let hasParams = false
+  params.forEach(() => hasParams = true)
+  if (hasParams) return url + '?' + params.toString()
  return url
 }
diff --git a/client/src/assets/player/videojs-components/peertube-link-button.ts b/client/src/assets/player/videojs-components/peertube-link-button.ts
index fed8ea33e..4d0ea37f5 100644
--- a/client/src/assets/player/videojs-components/peertube-link-button.ts
+++ b/client/src/assets/player/videojs-components/peertube-link-button.ts
@@ -16,7 +16,7 @@ class PeerTubeLinkButton extends Button {
  }
  updateHref () {
-    this.el().setAttribute('href', buildVideoLink(this.player().currentTime()))
+    this.el().setAttribute('href', buildVideoLink({ startTime: this.player().currentTime() }))
  }
  handleClick () {
diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss
index d84766240..c64a8ebf8 100644
--- a/client/src/sass/application.scss
+++ b/client/src/sass/application.scss
@@ -12,6 +12,7 @@ $assets-path: '../assets/';
 @import './player/index';
 @import './loading-bar';
+@import './bootstrap';
 @import './primeng-custom';
 [hidden] {
@@ -181,128 +182,11 @@ label {
  font-weight: bold;
 }
-// Thanks https://gist.github.com/alexandrevicenzi/680147013e902a4eaa5d
-.glyphicon-refresh-animate {
-  animation: spin .7s infinite linear;
-}
 @keyframes spin {
  from { transform: scale(1) rotate(0deg);}
  to { transform: scale(1) rotate(360deg);}
 }
-// Bootstrap customizations
-.dropdown-menu {
-  border-radius: 3px;
-  box-shadow: 0 3px 6px;
-  font-size: 15px;
-  .dropdown-item {
-    padding: 3px 15px;
-    &:active {
-      color: #000 !important;
-    }
-  }
-  button {
-    @include disable-default-a-behaviour;
-  }
-  a {
-    @include disable-default-a-behaviour;
-    color: #000 !important;
-  }
-}
-.modal {
-  .modal-content {
-    background-color: var(--mainBackgroundColor);
-  }
-  .modal-header {
-    border-bottom: none;
-    margin-bottom: 5px;
-    .modal-title {
-      font-size: 20px;
-      font-weight: $font-semibold;
-    }
-    my-global-icon {
-      @include icon(24px);
-      position: relative;
-      top: 3px;
-      float: right;
-      margin: 0;
-      padding: 0;
-      opacity: 1;
-    }
-  }
-  .inputs {
-    margin-bottom: 0;
-    text-align: right;
-    .action-button-cancel {
-      @include peertube-button;
-      @include grey-button;
-      display: inline-block;
-      margin-right: 10px;
-    }
-    .action-button-submit {
-      @include peertube-button;
-      @include orange-button;
-    }
-  }
-}
-// Nav customizations
-.nav .nav-link {
-  display: flex !important;
-  align-items: center;
-  height: 30px !important;
-  padding: 10px 15px !important;
-}
-.nav.nav-pills {
-  font-size: 16px !important;
-  .nav-link.active {
-    font-weight: $font-semibold !important;
-  }
-  a {
-    @include disable-default-a-behaviour;
-    color: var(--mainForegroundColor);
-  }
-}
-ngb-tabset.bootstrap {
-  .nav-link {
-    &, & a {
-      @include disable-default-a-behaviour;
-      color: var(--mainForegroundColor) !important;
-    }
-  }
-  .nav-pills .nav-link.active {
-    color: #000 !important;
-  }
-}
-.nav-tabs .nav-link.active {
-  background-color: var(--mainBackgroundColor) !important;
-  border-bottom: none;
-}
 .orange-button {
  @include peertube-button;
  @include orange-button;
diff --git a/client/src/sass/bootstrap.scss b/client/src/sass/bootstrap.scss
new file mode 100644
index 000000000..12e73278a
--- /dev/null
+++ b/client/src/sass/bootstrap.scss
@@ -0,0 +1,138 @@
+$icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
+@import '_bootstrap';
+@import '_variables';
+@import '_mixins';
+// Thanks https://gist.github.com/alexandrevicenzi/680147013e902a4eaa5d
+.glyphicon-refresh-animate {
+  animation: spin .7s infinite linear;
+}
+@keyframes spin {
+  from { transform: scale(1) rotate(0deg);}
+  to { transform: scale(1) rotate(360deg);}
+}
+.dropdown-menu {
+  border-radius: 3px;
+  box-shadow: 0 3px 6px;
+  font-size: 15px;
+  .dropdown-item {
+    padding: 3px 15px;
+    &:active {
+      color: #000 !important;
+    }
+  }
+  button {
+    @include disable-default-a-behaviour;
+  }
+  a {
+    @include disable-default-a-behaviour;
+    color: #000 !important;
+  }
+}
+.modal {
+  .modal-content {
+    background-color: var(--mainBackgroundColor);
+  }
+  .modal-header {
+    border-bottom: none;
+    margin-bottom: 5px;
+    .modal-title {
+      font-size: 20px;
+      font-weight: $font-semibold;
+    }
+    my-global-icon {
+      @include icon(24px);
+      position: relative;
+      top: 3px;
+      float: right;
+      margin: 0;
+      padding: 0;
+      opacity: 1;
+    }
+  }
+  .inputs {
+    margin-bottom: 0;
+    text-align: right;
+    .action-button-cancel {
+      @include peertube-button;
+      @include grey-button;
+      display: inline-block;
+      margin-right: 10px;
+    }
+    .action-button-submit {
+      @include peertube-button;
+      @include orange-button;
+    }
+  }
+}
+// Nav customizations
+.nav .nav-link {
+  display: flex !important;
+  align-items: center;
+  height: 30px !important;
+  padding: 10px 15px !important;
+}
+.nav.nav-pills {
+  font-size: 16px !important;
+  .nav-link.active {
+    font-weight: $font-semibold !important;
+  }
+  a {
+    @include disable-default-a-behaviour;
+    color: var(--mainForegroundColor);
+  }
+}
+ngb-tabset.bootstrap {
+  .nav-link {
+    &, & a {
+      @include disable-default-a-behaviour;
+      color: var(--mainForegroundColor) !important;
+    }
+  }
+  .nav-pills .nav-link.active {
+    color: #000 !important;
+  }
+}
+.nav-tabs .nav-link.active {
+  background-color: var(--mainBackgroundColor) !important;
+  border-bottom: none;
+}
+.collapse-transition {
+  // Animation when we show/hide the filters
+  transition: max-height 0.3s;
+  display: block !important;
+  overflow: hidden !important;
+  max-height: 0;
+  &.show {
+    max-height: 1500px;
+  }
+}
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..f608e9299 100644
--- a/client/src/sass/include/_mixins.scss
+++ b/client/src/sass/include/_mixins.scss
@@ -235,6 +235,14 @@
  position: relative;
  font-size: 15px;
+  &.disabled {
+    background-color: #E5E5E5;
+    select {
+      cursor: default;
+    }
+  }
  @media screen and (max-width: $width) {
    width: 100%;
  }
@@ -282,16 +290,6 @@
  }
 }
-@mixin peertube-select-disabled-container ($width) {
-  @include peertube-select-container($width);
-  background-color: #E5E5E5;
-  select {
-    cursor: default;
-  }
-}
 // Thanks: https://codepen.io/triss90/pen/XNEdRe/
 @mixin peertube-radio-container {
  input[type="radio"] {
@@ -331,7 +329,12 @@
 }
 @mixin peertube-checkbox ($border-width) {
-  display: none;
+  opacity: 0;
+  position: absolute;
+  &:focus + span {
+    outline: 1px solid #1e5180;
+  }
  & + span {
    position: relative;
diff --git a/client/src/sass/include/_variables.scss b/client/src/sass/include/_variables.scss
index c7b205b11..aafeda257 100644
--- a/client/src/sass/include/_variables.scss
+++ b/client/src/sass/include/_variables.scss
@@ -71,7 +71,9 @@ $variables: (
  --menuForegroundColor: var(--menuForegroundColor),
  --submenuColor: var(--submenuColor),
  --inputColor: var(--inputColor),
-  --inputPlaceholderColor: var(--inputPlaceholderColor)
+  --inputPlaceholderColor: var(--inputPlaceholderColor),
+  --embedForegroundColor: var(--embedForegroundColor),
+  --embedBigPlayBackgroundColor: var(--embedBigPlayBackgroundColor)
 );
 /*** theme helper ***/
diff --git a/client/src/sass/player/_player-variables.scss b/client/src/sass/player/_player-variables.scss
index 110129790..4e9e8736c 100644
--- a/client/src/sass/player/_player-variables.scss
+++ b/client/src/sass/player/_player-variables.scss
@@ -10,4 +10,10 @@ $slider-bg-color: lighten($primary-background-color, 33%);
 $progress-margin: 10px;
-$assets-path: '../../assets/' !default;
-\ No newline at end of file
+$assets-path: '../../assets/' !default;
+body {
+  --embedForegroundColor: #{$primary-foreground-color};
+  --embedBigPlayBackgroundColor: #{$primary-background-color};
+}
diff --git a/client/src/sass/player/context-menu.scss b/client/src/sass/player/context-menu.scss
index 71d6d1b1d..eeab0ccdf 100644
--- a/client/src/sass/player/context-menu.scss
+++ b/client/src/sass/player/context-menu.scss
@@ -14,7 +14,7 @@ $context-menu-width: 350px;
  .vjs-menu-content {
    opacity: $primary-foreground-opacity;
-    color: $primary-foreground-color;
+    color: var(--embedForegroundCsolor);
    font-size: $font-size !important;
    font-weight: $font-semibold;
  }
@@ -30,4 +30,4 @@ $context-menu-width: 350px;
      background-color: rgba(255, 255, 255, 0.2);
    }
  }
-}
-\ No newline at end of file
+}
diff --git a/client/src/sass/player/peertube-skin.scss b/client/src/sass/player/peertube-skin.scss
index e63a2875c..996024ade 100644
--- a/client/src/sass/player/peertube-skin.scss
+++ b/client/src/sass/player/peertube-skin.scss
@@ -10,9 +10,8 @@
 }
 .video-js.vjs-peertube-skin {
  font-size: $font-size;
-  color: $primary-foreground-color;
+  color: var(--embedForegroundColor);
  .vjs-dock-text {
    padding-right: 10px;
@@ -114,7 +113,7 @@
  .vjs-control-bar,
  .vjs-big-play-button,
  .vjs-settings-dialog {
-    background-color: rgba($primary-background-color, 0.5);
+    background-color: var(--embedBigPlayBackgroundColor);
  }
  .vjs-poster {
@@ -139,7 +138,8 @@
    .vjs-theater-control,
    .vjs-settings
    {
-      color: $primary-foreground-color !important;
+      color: var(--embedForegroundColor) !important;
      opacity: $primary-foreground-opacity;
      transition: opacity .1s;
@@ -151,7 +151,7 @@
    .vjs-current-time,
    .vjs-duration,
    .vjs-peertube {
-      color: $primary-foreground-color;
+      color: var(--embedForegroundColor);
      opacity: $primary-foreground-opacity;
    }
@@ -171,7 +171,7 @@
        transition: none;
        .vjs-play-progress {
-          background: $primary-foreground-color;
+          background: var(--embedForegroundColor);
          // Not display the circle if the progress is not hovered
          &::before {
diff --git a/client/src/sass/player/settings-menu.scss b/client/src/sass/player/settings-menu.scss
index 61965c85e..83407b445 100644
--- a/client/src/sass/player/settings-menu.scss
+++ b/client/src/sass/player/settings-menu.scss
@@ -38,7 +38,7 @@ $setting-transition-easing: ease-out;
    position: absolute;
    right: .5em;
    bottom: 3.5em;
-    color: $primary-foreground-color;
+    color: var(--embedForegroundColor);
    opacity: $primary-foreground-opacity;
    margin: 0 auto;
    font-size: $font-size !important;
diff --git a/client/src/standalone/videos/embed-api.ts b/client/src/standalone/videos/embed-api.ts
new file mode 100644
index 000000000..169e371da
--- /dev/null
+++ b/client/src/standalone/videos/embed-api.ts
@@ -0,0 +1,130 @@
+import './embed.scss'
+import * as Channel from 'jschannel'
+import { PeerTubeResolution } from '../player/definitions'
+import { PeerTubeEmbed } from './embed'
+/**
+ * Embed API exposes control of the embed player to the outside world via
+ * JSChannels and window.postMessage
+ */
+export class PeerTubeEmbedApi {
+  private channel: Channel.MessagingChannel
+  private isReady = false
+  private resolutions: PeerTubeResolution[] = null
+  constructor (private embed: PeerTubeEmbed) {
+  }
+  initialize () {
+    this.constructChannel()
+    this.setupStateTracking()
+    // We're ready!
+    this.notifyReady()
+  }
+  private get element () {
+    return this.embed.videoElement
+  }
+  private constructChannel () {
+    const channel = Channel.build({ window: window.parent, origin: '*', scope: this.embed.scope })
+    channel.bind('play', (txn, params) => this.embed.player.play())
+    channel.bind('pause', (txn, params) => this.embed.player.pause())
+    channel.bind('seek', (txn, time) => this.embed.player.currentTime(time))
+    channel.bind('setVolume', (txn, value) => this.embed.player.volume(value))
+    channel.bind('getVolume', (txn, value) => this.embed.player.volume())
+    channel.bind('isReady', (txn, params) => this.isReady)
+    channel.bind('setResolution', (txn, resolutionId) => this.setResolution(resolutionId))
+    channel.bind('getResolutions', (txn, params) => this.resolutions)
+    channel.bind('setPlaybackRate', (txn, playbackRate) => this.embed.player.playbackRate(playbackRate))
+    channel.bind('getPlaybackRate', (txn, params) => this.embed.player.playbackRate())
+    channel.bind('getPlaybackRates', (txn, params) => this.embed.playerOptions.playbackRates)
+    this.channel = channel
+  }
+  private setResolution (resolutionId: number) {
+    if (resolutionId === -1 && this.embed.player.webtorrent().isAutoResolutionForbidden()) return
+    // Auto resolution
+    if (resolutionId === -1) {
+      this.embed.player.webtorrent().enableAutoResolution()
+      return
+    }
+    this.embed.player.webtorrent().disableAutoResolution()
+    this.embed.player.webtorrent().updateResolution(resolutionId)
+  }
+  /**
+   * Let the host know that we're ready to go!
+   */
+  private notifyReady () {
+    this.isReady = true
+    this.channel.notify({ method: 'ready', params: true })
+  }
+  private setupStateTracking () {
+    let currentState: 'playing' | 'paused' | 'unstarted' = 'unstarted'
+    setInterval(() => {
+      const position = this.element.currentTime
+      const volume = this.element.volume
+      this.channel.notify({
+        method: 'playbackStatusUpdate',
+        params: {
+          position,
+          volume,
+          playbackState: currentState
+        }
+      })
+    }, 500)
+    this.element.addEventListener('play', ev => {
+      currentState = 'playing'
+      this.channel.notify({ method: 'playbackStatusChange', params: 'playing' })
+    })
+    this.element.addEventListener('pause', ev => {
+      currentState = 'paused'
+      this.channel.notify({ method: 'playbackStatusChange', params: 'paused' })
+    })
+    // PeerTube specific capabilities
+    if (this.embed.player.webtorrent) {
+      this.embed.player.webtorrent().on('autoResolutionUpdate', () => this.loadWebTorrentResolutions())
+      this.embed.player.webtorrent().on('videoFileUpdate', () => this.loadWebTorrentResolutions())
+    }
+  }
+  private loadWebTorrentResolutions () {
+    const resolutions = []
+    const currentResolutionId = this.embed.player.webtorrent().getCurrentResolutionId()
+    for (const videoFile of this.embed.player.webtorrent().videoFiles) {
+      let label = videoFile.resolution.label
+      if (videoFile.fps && videoFile.fps >= 50) {
+        label += videoFile.fps
+      }
+      resolutions.push({
+        id: videoFile.resolution.id,
+        label,
+        src: videoFile.magnetUri,
+        active: videoFile.resolution.id === currentResolutionId
+      })
+    }
+    this.resolutions = resolutions
+    this.channel.notify({
+      method: 'resolutionUpdate',
+      params: this.resolutions
+    })
+  }
+}
diff --git a/client/src/standalone/videos/embed.html b/client/src/standalone/videos/embed.html
index c3b6e08ca..5a15bf552 100644
--- a/client/src/standalone/videos/embed.html
+++ b/client/src/standalone/videos/embed.html
@@ -11,7 +11,7 @@
    <link rel="icon" type="image/png" href="/client/assets/images/favicon.png" />
  </head>
-  <body>
+  <body id="custom-css">
    <div id="error-block">
      <h1 id="error-title"></h1>
diff --git a/client/src/standalone/videos/embed.ts b/client/src/standalone/videos/embed.ts
index 707f04253..cfe8e94b1 100644
--- a/client/src/standalone/videos/embed.ts
+++ b/client/src/standalone/videos/embed.ts
@@ -1,9 +1,6 @@
 import './embed.scss'
-import * as Channel from 'jschannel'
 import { peertubeTranslate, ResultList, ServerConfig, VideoDetails } from '../../../../shared'
-import { PeerTubeResolution } from '../player/definitions'
 import { VideoJSCaption } from '../../assets/player/peertube-videojs-typings'
 import { VideoCaption } from '../../../../shared/models/videos/caption/video-caption.model'
 import {
@@ -13,133 +10,9 @@ import {
  PlayerMode
 } from '../../assets/player/peertube-player-manager'
 import { VideoStreamingPlaylistType } from '../../../../shared/models/videos/video-streaming-playlist.type'
+import { PeerTubeEmbedApi } from './embed-api'
-/**
+export class PeerTubeEmbed {
- * Embed API exposes control of the embed player to the outside world via
- * JSChannels and window.postMessage
- */
-class PeerTubeEmbedApi {
-  private channel: Channel.MessagingChannel
-  private isReady = false
-  private resolutions: PeerTubeResolution[] = null
-  constructor (private embed: PeerTubeEmbed) {
-  }
-  initialize () {
-    this.constructChannel()
-    this.setupStateTracking()
-    // We're ready!
-    this.notifyReady()
-  }
-  private get element () {
-    return this.embed.videoElement
-  }
-  private constructChannel () {
-    const channel = Channel.build({ window: window.parent, origin: '*', scope: this.embed.scope })
-    channel.bind('play', (txn, params) => this.embed.player.play())
-    channel.bind('pause', (txn, params) => this.embed.player.pause())
-    channel.bind('seek', (txn, time) => this.embed.player.currentTime(time))
-    channel.bind('setVolume', (txn, value) => this.embed.player.volume(value))
-    channel.bind('getVolume', (txn, value) => this.embed.player.volume())
-    channel.bind('isReady', (txn, params) => this.isReady)
-    channel.bind('setResolution', (txn, resolutionId) => this.setResolution(resolutionId))
-    channel.bind('getResolutions', (txn, params) => this.resolutions)
-    channel.bind('setPlaybackRate', (txn, playbackRate) => this.embed.player.playbackRate(playbackRate))
-    channel.bind('getPlaybackRate', (txn, params) => this.embed.player.playbackRate())
-    channel.bind('getPlaybackRates', (txn, params) => this.embed.playerOptions.playbackRates)
-    this.channel = channel
-  }
-  private setResolution (resolutionId: number) {
-    if (resolutionId === -1 && this.embed.player.webtorrent().isAutoResolutionForbidden()) return
-    // Auto resolution
-    if (resolutionId === -1) {
-      this.embed.player.webtorrent().enableAutoResolution()
-      return
-    }
-    this.embed.player.webtorrent().disableAutoResolution()
-    this.embed.player.webtorrent().updateResolution(resolutionId)
-  }
-  /**
-   * Let the host know that we're ready to go!
-   */
-  private notifyReady () {
-    this.isReady = true
-    this.channel.notify({ method: 'ready', params: true })
-  }
-  private setupStateTracking () {
-    let currentState: 'playing' | 'paused' | 'unstarted' = 'unstarted'
-    setInterval(() => {
-      const position = this.element.currentTime
-      const volume = this.element.volume
-      this.channel.notify({
-        method: 'playbackStatusUpdate',
-        params: {
-          position,
-          volume,
-          playbackState: currentState
-        }
-      })
-    }, 500)
-    this.element.addEventListener('play', ev => {
-      currentState = 'playing'
-      this.channel.notify({ method: 'playbackStatusChange', params: 'playing' })
-    })
-    this.element.addEventListener('pause', ev => {
-      currentState = 'paused'
-      this.channel.notify({ method: 'playbackStatusChange', params: 'paused' })
-    })
-    // PeerTube specific capabilities
-    if (this.embed.player.webtorrent) {
-      this.embed.player.webtorrent().on('autoResolutionUpdate', () => this.loadWebTorrentResolutions())
-      this.embed.player.webtorrent().on('videoFileUpdate', () => this.loadWebTorrentResolutions())
-    }
-  }
-  private loadWebTorrentResolutions () {
-    const resolutions = []
-    const currentResolutionId = this.embed.player.webtorrent().getCurrentResolutionId()
-    for (const videoFile of this.embed.player.webtorrent().videoFiles) {
-      let label = videoFile.resolution.label
-      if (videoFile.fps && videoFile.fps >= 50) {
-        label += videoFile.fps
-      }
-      resolutions.push({
-        id: videoFile.resolution.id,
-        label,
-        src: videoFile.magnetUri,
-        active: videoFile.resolution.id === currentResolutionId
-      })
-    }
-    this.resolutions = resolutions
-    this.channel.notify({
-      method: 'resolutionUpdate',
-      params: this.resolutions
-    })
-  }
-}
-class PeerTubeEmbed {
  videoElement: HTMLVideoElement
  player: any
  playerOptions: any
@@ -152,6 +25,12 @@ class PeerTubeEmbed {
  enableApi = false
  startTime: number | string = 0
  stopTime: number | string
+  title: boolean
+  warningTitle: boolean
+  bigPlayBackgroundColor: string
+  foregroundColor: string
  mode: PlayerMode
  scope = 'peertube'
@@ -245,13 +124,18 @@ class PeerTubeEmbed {
      this.controls = this.getParamToggle(params, 'controls', true)
      this.muted = this.getParamToggle(params, 'muted', false)
      this.loop = this.getParamToggle(params, 'loop', false)
+      this.title = this.getParamToggle(params, 'title', true)
      this.enableApi = this.getParamToggle(params, 'api', this.enableApi)
+      this.warningTitle = this.getParamToggle(params, 'warningTitle', true)
      this.scope = this.getParamString(params, 'scope', this.scope)
      this.subtitle = this.getParamString(params, 'subtitle')
      this.startTime = this.getParamString(params, 'start')
      this.stopTime = this.getParamString(params, 'stop')
+      this.bigPlayBackgroundColor = this.getParamString(params, 'bigPlayBackgroundColor')
+      this.foregroundColor = this.getParamString(params, 'foregroundColor')
      this.mode = this.getParamString(params, 'mode') === 'p2p-media-loader' ? 'p2p-media-loader' : 'webtorrent'
    } catch (err) {
      console.error('Cannot get params from URL.', err)
@@ -276,15 +160,7 @@ class PeerTubeEmbed {
    }
    const videoInfo: VideoDetails = await videoResponse.json()
-    let videoCaptions: VideoJSCaption[] = []
+    const videoCaptions = await this.buildCaptions(serverTranslations, captionsResponse)
-    if (captionsResponse.ok) {
-      const { data } = (await captionsResponse.json()) as ResultList<VideoCaption>
-      videoCaptions = data.map(c => ({
-        label: peertubeTranslate(c.language.label, serverTranslations),
-        language: c.language.id,
-        src: window.location.origin + c.captionPath
-      }))
-    }
    this.loadParams()
@@ -337,33 +213,66 @@ class PeerTubeEmbed {
    }
    this.player = await PeertubePlayerManager.initialize(this.mode, options)
    this.player.on('customError', (event: any, data: any) => this.handleError(data.err, serverTranslations))
    window[ 'videojsPlayer' ] = this.player
+    this.buildCSS()
+    await this.buildDock(videoInfo, configResponse)
+    this.initializeApi()
+  }
+  private handleError (err: Error, translations?: { [ id: string ]: string }) {
+    if (err.message.indexOf('from xs param') !== -1) {
+      this.player.dispose()
+      this.videoElement = null
+      this.displayError('This video is not available because the remote instance is not responding.', translations)
+      return
+    }
+  }
+  private async buildDock (videoInfo: VideoDetails, configResponse: Response) {
    if (this.controls) {
+      const title = this.title ? videoInfo.name : undefined
      const config: ServerConfig = await configResponse.json()
-      const description = config.tracker.enabled
+      const description = config.tracker.enabled && this.warningTitle
        ? '<span class="text">' + this.player.localize('Uses P2P, others may know your IP is downloading this video.') + '</span>'
        : undefined
      this.player.dock({
-        title: videoInfo.name,
+        title,
        description
      })
    }
+  }
-    this.initializeApi()
+  private buildCSS () {
+    const body = document.getElementById('custom-css')
+    if (this.bigPlayBackgroundColor) {
+      body.style.setProperty('--embedBigPlayBackgroundColor', this.bigPlayBackgroundColor)
+    }
+    if (this.foregroundColor) {
+      body.style.setProperty('--embedForegroundColor', this.foregroundColor)
+    }
  }
-  private handleError (err: Error, translations?: { [ id: string ]: string }) {
+  private async buildCaptions (serverTranslations: any, captionsResponse: Response): Promise<VideoJSCaption[]> {
-    if (err.message.indexOf('from xs param') !== -1) {
+    if (captionsResponse.ok) {
-      this.player.dispose()
+      const { data } = (await captionsResponse.json()) as ResultList<VideoCaption>
-      this.videoElement = null
-      this.displayError('This video is not available because the remote instance is not responding.', translations)
+      return data.map(c => ({
-      return
+        label: peertubeTranslate(c.language.label, serverTranslations),
+        language: c.language.id,
+        src: window.location.origin + c.captionPath
+      }))
    }
+    return []
  }
 }