158 files changed, 2929 insertions, 1140 deletions

diff --git a/client/e2e/src/po/my-account.ts b/client/e2e/src/po/my-account.ts
new file mode 100644
index 000000000..e49372983
--- /dev/null
+++ b/client/e2e/src/po/my-account.ts
@@ -0,0 +1,72 @@
+import { by, element } from 'protractor'
+
+export class MyAccountPage {
+
+  navigateToMyVideos () {
+    return element(by.css('a[href="/my-account/videos"]')).click()
+  }
+
+  navigateToMyPlaylists () {
+    return element(by.css('a[href="/my-account/video-playlists"]')).click()
+  }
+
+  navigateToMyHistory () {
+    return element(by.css('a[href="/my-account/history/videos"]')).click()
+  }
+
+  // My account Videos
+
+  getLastVideoName () {
+    return this.getAllVideoNameElements().first().getText()
+  }
+
+  removeLastVideo () {
+    return this.getLastVideoElement().element(by.css('my-delete-button')).click()
+  }
+
+  validRemove () {
+    return element(by.css('.action-button-submit')).click()
+  }
+
+  countVideos () {
+    return this.getAllVideoNameElements().count()
+  }
+
+  // My account playlists
+
+  getLastUpdatedPlaylistName () {
+    return this.getLastUpdatedPlaylist().element(by.css('.miniature-name')).getText()
+  }
+
+  getLastUpdatedPlaylistVideosText () {
+    return this.getLastUpdatedPlaylist().element(by.css('.miniature-playlist-info-overlay')).getText()
+  }
+
+  clickOnLastUpdatedPlaylist () {
+    return this.getLastUpdatedPlaylist().element(by.css('.miniature-thumbnail')).click()
+  }
+
+  countTotalPlaylistElements () {
+    return element.all(by.css('my-video-playlist-element-miniature')).count()
+  }
+
+  playPlaylist () {
+    return element(by.css('.playlist-info .miniature-thumbnail')).click()
+  }
+
+  // My account Videos
+
+  private getLastVideoElement () {
+    return element.all(by.css('.video')).first()
+  }
+
+  private getAllVideoNameElements () {
+    return element.all(by.css('.video-miniature-name'))
+  }
+
+  // My account playlists
+
+  private getLastUpdatedPlaylist () {
+    return element.all(by.css('my-video-playlist-miniature')).first()
+  }
+}
diff --git a/client/e2e/src/po/video-update.po.ts b/client/e2e/src/po/video-update.po.ts
new file mode 100644
index 000000000..4de3b1b1d
--- /dev/null
+++ b/client/e2e/src/po/video-update.po.ts
@@ -0,0 +1,20 @@
+import { by, element } from 'protractor'
+
+export class VideoUpdatePage {
+
+  async updateName (videoName: string) {
+    const nameInput = element(by.css('input#name'))
+    await nameInput.clear()
+    await nameInput.sendKeys(videoName)
+  }
+
+  async validUpdate () {
+    const submitButton = await this.getSubmitButton()
+
+    return submitButton.click()
+  }
+
+  private getSubmitButton () {
+    return element(by.css('.submit-button:not(.disabled) input'))
+  }
+}
diff --git a/client/e2e/src/po/video-watch.po.ts b/client/e2e/src/po/video-watch.po.ts
index 5f61d5668..9bb0a3919 100644
--- a/client/e2e/src/po/video-watch.po.ts
+++ b/client/e2e/src/po/video-watch.po.ts
@@ -1,4 +1,4 @@
-import { browser, by, element } from 'protractor'
+import { browser, by, element, ElementFinder, ExpectedConditions } from 'protractor'
 
 export class VideoWatchPage {
   async goOnVideosList (isMobileDevice: boolean, isSafari: boolean) {
@@ -44,6 +44,10 @@ export class VideoWatchPage {
       .then(seconds => parseInt(seconds, 10))
   }
 
+  getVideoName () {
+    return this.getVideoNameElement().getText()
+  }
+
   async playAndPauseVideo (isAutoplay: boolean, isMobileDevice: boolean) {
     if (isAutoplay === false) {
       const playButton = element(by.css('.vjs-big-play-button'))
@@ -101,4 +105,41 @@ export class VideoWatchPage {
   async goOnP2PMediaLoaderEmbed () {
     return browser.get('https://peertube2.cpy.re/videos/embed/969bf103-7818-43b5-94a0-de159e13de50?mode=p2p-media-loader')
   }
+
+  async clickOnUpdate () {
+    const dropdown = element(by.css('my-video-actions-dropdown .action-button'))
+    await dropdown.click()
+
+    const items: ElementFinder[] = await element.all(by.css('my-video-actions-dropdown .dropdown-menu .dropdown-item'))
+
+    for (const item of items) {
+      const href = await item.getAttribute('href')
+
+      if (href && href.includes('/update/')) {
+        await item.click()
+        return
+      }
+    }
+  }
+
+  async clickOnSave () {
+    return element(by.css('.action-button-save')).click()
+  }
+
+  async saveToWatchLater () {
+    return element.all(by.css('my-video-add-to-playlist .playlist')).first().click()
+  }
+
+  waitUntilVideoName (name: string, maxTime: number) {
+    const elem = this.getVideoNameElement()
+
+    return browser.wait(ExpectedConditions.textToBePresentInElement(elem, name), maxTime)
+  }
+
+  private getVideoNameElement () {
+    // We have 2 video info name block, pick the first that is not empty
+    return element.all(by.css('.video-bottom .video-info-name'))
+                  .filter(e => e.getText().then(t => !!t))
+                  .first()
+  }
 }
diff --git a/client/e2e/src/videos.e2e-spec.ts b/client/e2e/src/videos.e2e-spec.ts
index 25521cad9..c19ab3092 100644
--- a/client/e2e/src/videos.e2e-spec.ts
+++ b/client/e2e/src/videos.e2e-spec.ts
@@ -2,35 +2,56 @@ import { VideoWatchPage } from './po/video-watch.po'
 import { VideoUploadPage } from './po/video-upload.po'
 import { LoginPage } from './po/login.po'
 import { browser } from 'protractor'
+import { VideoUpdatePage } from './po/video-update.po'
+import { MyAccountPage } from './po/my-account'
+
+async function skipIfUploadNotSupported () {
+  if (await isMobileDevice() || await isSafari()) {
+    console.log('Skipping because we are on a real device or Safari and BrowserStack does not support file upload.')
+    return true
+  }
+
+  return false
+}
+
+async function isMobileDevice () {
+  const caps = await browser.getCapabilities()
+  return caps.get('realMobile') === 'true' || caps.get('realMobile') === true
+}
+
+async function isSafari () {
+  const caps = await browser.getCapabilities()
+  return caps.get('browserName') && caps.get('browserName').toLowerCase() === 'safari'
+}
 
 describe('Videos workflow', () => {
   let videoWatchPage: VideoWatchPage
-  let pageUploadPage: VideoUploadPage
+  let videoUploadPage: VideoUploadPage
+  let videoUpdatePage: VideoUpdatePage
+  let myAccountPage: MyAccountPage
   let loginPage: LoginPage
+
   const videoName = new Date().getTime() + ' video'
-  let isMobileDevice = false
-  let isSafari = false
+  let videoWatchUrl: string
 
   beforeEach(async () => {
     videoWatchPage = new VideoWatchPage()
-    pageUploadPage = new VideoUploadPage()
+    videoUploadPage = new VideoUploadPage()
+    videoUpdatePage = new VideoUpdatePage()
+    myAccountPage = new MyAccountPage()
     loginPage = new LoginPage()
 
-    const caps = await browser.getCapabilities()
-    isMobileDevice = caps.get('realMobile') === 'true' || caps.get('realMobile') === true
-    isSafari = caps.get('browserName') && caps.get('browserName').toLowerCase() === 'safari'
-
-    if (isMobileDevice) {
+    if (await isMobileDevice()) {
       console.log('Mobile device detected.')
     }
 
-    if (isSafari) {
+    if (await isSafari()) {
       console.log('Safari detected.')
     }
   })
 
-  it('Should log in', () => {
-    if (isMobileDevice || isSafari) {
+  it('Should log in', async () => {
+    if (await isMobileDevice() || await isSafari()) {
       console.log('Skipping because we are on a real device or Safari and BrowserStack does not support file upload.')
       return
     }
@@ -39,24 +60,18 @@ describe('Videos workflow', () => {
   })
 
   it('Should upload a video', async () => {
-    if (isMobileDevice || isSafari) {
-      console.log('Skipping because we are on a real device or Safari and BrowserStack does not support file upload.')
-      return
-    }
+    if (await skipIfUploadNotSupported()) return
 
-    await pageUploadPage.navigateTo()
+    await videoUploadPage.navigateTo()
 
-    await pageUploadPage.uploadVideo()
-    return pageUploadPage.validSecondUploadStep(videoName)
+    await videoUploadPage.uploadVideo()
+    return videoUploadPage.validSecondUploadStep(videoName)
   })
 
   it('Should list videos', async () => {
-    await videoWatchPage.goOnVideosList(isMobileDevice, isSafari)
+    await videoWatchPage.goOnVideosList(await isMobileDevice(), await isSafari())
 
-    if (isMobileDevice || isSafari) {
-      console.log('Skipping because we are on a real device or Safari and BrowserStack does not support file upload.')
-      return
-    }
+    if (await skipIfUploadNotSupported()) return
 
     const videoNames = videoWatchPage.getVideosListName()
     expect(videoNames).toContain(videoName)
@@ -65,14 +80,16 @@ describe('Videos workflow', () => {
   it('Should go on video watch page', async () => {
     let videoNameToExcept = videoName
 
-    if (isMobileDevice || isSafari) videoNameToExcept = await videoWatchPage.clickOnFirstVideo()
+    if (await isMobileDevice() || await isSafari()) videoNameToExcept = await videoWatchPage.clickOnFirstVideo()
     else await videoWatchPage.clickOnVideo(videoName)
 
-    return videoWatchPage.waitWatchVideoName(videoNameToExcept, isMobileDevice, isSafari)
+    return videoWatchPage.waitWatchVideoName(videoNameToExcept, await isMobileDevice(), await isSafari())
   })
 
   it('Should play the video', async () => {
-    await videoWatchPage.playAndPauseVideo(true, isMobileDevice)
+    videoWatchUrl = await browser.getCurrentUrl()
+
+    await videoWatchPage.playAndPauseVideo(true, await isMobileDevice())
     expect(videoWatchPage.getWatchVideoPlayerCurrentTime()).toBeGreaterThanOrEqual(2)
   })
 
@@ -81,7 +98,7 @@ describe('Videos workflow', () => {
 
     await videoWatchPage.goOnAssociatedEmbed()
 
-    await videoWatchPage.playAndPauseVideo(false, isMobileDevice)
+    await videoWatchPage.playAndPauseVideo(false, await isMobileDevice())
     expect(videoWatchPage.getWatchVideoPlayerCurrentTime()).toBeGreaterThanOrEqual(2)
 
     await browser.waitForAngularEnabled(true)
@@ -92,9 +109,93 @@ describe('Videos workflow', () => {
 
     await videoWatchPage.goOnP2PMediaLoaderEmbed()
 
-    await videoWatchPage.playAndPauseVideo(false, isMobileDevice)
+    await videoWatchPage.playAndPauseVideo(false, await isMobileDevice())
     expect(videoWatchPage.getWatchVideoPlayerCurrentTime()).toBeGreaterThanOrEqual(2)
 
     await browser.waitForAngularEnabled(true)
   })
+
+  it('Should update the video', async () => {
+    if (await skipIfUploadNotSupported()) return
+
+    await browser.get(videoWatchUrl)
+
+    await videoWatchPage.clickOnUpdate()
+
+    await videoUpdatePage.updateName('my new name')
+
+    await videoUpdatePage.validUpdate()
+
+    const name = await videoWatchPage.getVideoName()
+    expect(name).toEqual('my new name')
+  })
+
+  it('Should add the video in my playlist', async () => {
+    if (await skipIfUploadNotSupported()) return
+
+    await videoWatchPage.clickOnSave()
+    await videoWatchPage.saveToWatchLater()
+
+    await videoUploadPage.navigateTo()
+
+    await videoUploadPage.uploadVideo()
+    await videoUploadPage.validSecondUploadStep('second video')
+
+    await videoWatchPage.clickOnSave()
+    await videoWatchPage.saveToWatchLater()
+  })
+
+  it('Should have the watch later playlist in my account', async () => {
+    if (await skipIfUploadNotSupported()) return
+
+    await myAccountPage.navigateToMyPlaylists()
+
+    const name = await myAccountPage.getLastUpdatedPlaylistName()
+    expect(name).toEqual('Watch later')
+
+    const videosNumberText = await myAccountPage.getLastUpdatedPlaylistVideosText()
+    expect(videosNumberText).toEqual('2 videos')
+
+    await myAccountPage.clickOnLastUpdatedPlaylist()
+
+    const count = await myAccountPage.countTotalPlaylistElements()
+    expect(count).toEqual(2)
+  })
+
+  it('Should watch the playlist', async () => {
+    if (await skipIfUploadNotSupported()) return
+
+    await myAccountPage.playPlaylist()
+
+    await videoWatchPage.waitUntilVideoName('second video', 20000 * 1000)
+  })
+
+  it('Should have the video in my account', async () => {
+    if (await skipIfUploadNotSupported()) return
+
+    await myAccountPage.navigateToMyVideos()
+
+    const lastVideoName = await myAccountPage.getLastVideoName()
+    expect(lastVideoName).toEqual('second video')
+  })
+
+  it('Should delete the last video', async () => {
+    if (await skipIfUploadNotSupported()) return
+
+    await myAccountPage.removeLastVideo()
+    await myAccountPage.validRemove()
+
+    const count = await myAccountPage.countVideos()
+    expect(count).toEqual(1)
+  })
+
+  it('Should delete the first video', async () => {
+    if (await skipIfUploadNotSupported()) return
+
+    await myAccountPage.removeLastVideo()
+    await myAccountPage.validRemove()
+
+    const count = await myAccountPage.countVideos()
+    expect(count).toEqual(0)
+  })
 })
diff --git a/client/proxy.config.json b/client/proxy.config.json
index e5f0dfd61..4a72f1826 100644
--- a/client/proxy.config.json
+++ b/client/proxy.config.json
@@ -8,7 +8,8 @@
     "secure": false
   },
   "/socket.io": {
-    "target": "http://localhost:9000",
-    "secure": false
+    "target": "ws://localhost:9000",
+    "secure": false,
+    "ws": true
   }
 }
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">
-  <a
-    *ngFor="let videoChannel of videoChannels" [routerLink]="[ '/video-channels', videoChannel.nameWithHost ]"
-    class="video-channel" i18n-title title="See this video channel"
-  >
-    <img [src]="videoChannel.avatarUrl" alt="Avatar" />
-
-    <div class="video-channel-display-name">{{ videoChannel.displayName }}</div>
-    <div i18n class="video-channel-followers">{{ videoChannel.followersCount }} subscribers</div>
-  </a>
-</div>
\ No newline at end of file
+<div class="margin-content">
+
+  <div class="no-results" i18n *ngIf="channelPagination.totalItems === 0">This account does not have channels.</div>
+
+  <div class="channels" myInfiniteScroller (nearOfBottom)="onNearOfBottom()" [autoInit]="true">
+    <div class="section channel" *ngFor="let videoChannel of videoChannels">
+      <div class="section-title">
+        <a [routerLink]="[ '/video-channels', videoChannel.nameWithHost ]" i18n-title title="See this video channel">
+          <img [src]="videoChannel.avatarUrl" alt="Avatar" />
+
+          <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 {
-  justify-content: center;
+.margin-content {
+  @include adapt-margin-content-width;
 }
 
-a.video-channel {
-  @include disable-default-a-behaviour;
+.section {
+  @include miniature-rows;
 
-  display: inline-block;
-  text-align: center;
-  color: var(--mainForegroundColor);
-  margin: 10px 30px;
+  overflow: visible; // For the subscribe dropdown
+  padding-top: 0 !important;
 
-  img {
-    @include avatar(80px);
-
-    margin-bottom: 10px;
+  .section-title {
+    align-items: center;
   }
 
-  .video-channel-display-name {
-    font-size: 20px;
-    font-weight: $font-bold;
-  }
+  .videos {
+    overflow: hidden;
 
-  .video-channel-followers {
-    font-size: 15px;
+    .no-results {
+      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 { Subscription } from 'rxjs'
+import { concatMap, map, switchMap, tap } from 'rxjs/operators'
+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(
-          tap(account => this.account = account),
-          flatMap(account => this.videoChannelService.listAccountVideoChannels(account)),
-          map(res => res.data)
-        )
-        .subscribe(videoChannels => this.videoChannels = videoChannels)
+        .subscribe(account => {
+          this.account = account
+
+          this.loadMoreChannels()
+        })
   }
 
   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"
-                  i18n-labelText labelText="Resolution {{resolution}} enabled"
+                  [inputName]="getResolutionKey(resolution.id)" [formControlName]="resolution.id"
+                  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'),
-      this.i18n('480p'),
-      this.i18n('720p'),
-      this.i18n('1080p')
+      {
+        id: '240p',
+        label: this.i18n('240p')
+      },
+      {
+        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'
-      formGroupData.transcoding.resolutions[resolution] = null
+      defaultValues.transcoding.resolutions[resolution.id] = 'false'
+      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
-          i18n-inputLabel inputLabel="Upload thumbnail" inputName="thumbnailfile" formControlName="thumbnailfile"
-          previewWidth="200px" previewHeight="110px"
-        ></my-image-upload>
+        <label i18n>Playlist thumbnail</label>
+
+        <my-preview-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)
-
-    this.paramsSub = this.route.params.subscribe(routeParams => {
-      const videoPlaylistId = routeParams['videoPlaylistId']
-
-      this.videoPlaylistService.getVideoPlaylist(videoPlaylistId).subscribe(
-        videoPlaylistToUpdate => {
-          this.videoPlaylistToUpdate = videoPlaylistToUpdate
-
-          this.hydrateFormFromPlaylist()
-
-          this.serverService.videoPlaylistPrivaciesLoaded.subscribe(
-            () => {
-              this.videoPlaylistPrivacies = this.serverService.getVideoPlaylistPrivacies()
-                .filter(p => {
-                  // 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
-      )
-    })
+      .catch(err => console.error('Cannot populate user video channels.', err))
+
+    this.paramsSub = this.route.params
+                         .pipe(
+                           map(routeParams => routeParams['videoPlaylistId']),
+                           switchMap(videoPlaylistId => this.videoPlaylistService.getVideoPlaylist(videoPlaylistId)),
+                           delayWhen(() => this.serverService.videoPlaylistPrivaciesLoaded)
+                         )
+                         .subscribe(
+                           videoPlaylistToUpdate => {
+                             this.videoPlaylistPrivacies = this.serverService.getVideoPlaylistPrivacies()
+                             this.videoPlaylistToUpdate = videoPlaylistToUpdate
+
+                             this.hydrateFormFromPlaylist()
+                           },
+
+                           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',
-    component: SignupComponent,
-    canActivate: [ MetaGuard ],
+    path: '',
+    component: RegisterComponent,
+    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']
-    this.verificationString = this.route.snapshot.queryParams['verificationString']
+    const queryParams = this.route.snapshot.queryParams
+    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 '@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 { VerifyAccountEmailComponent } from './verify-account-email/verify-account-email.component'
+import { VerifyAccountAskSendEmailComponent } from './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 (this.pagination.totalItems <= (this.pagination.currentPage * this.pagination.itemsPerPage)) return
+    if (!hasMoreItems(this.pagination)) 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,
-
-    NgbCollapseModule
+    SharedModule
   ],
 
   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;
-  color: $grey-foreground-color;
-  background-color: $grey-background-color;
-
-  &:hover {
-    background-color: $grey-background-hover-color;
-  }
-
-  my-global-icon {
-    @include apply-svg-color($grey-foreground-color);
+  // FIXME: Firefox does not apply global .orange-button icon color
+  &.orange-button {
+    @include apply-svg-color(#fff)
   }
 }
 
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 = {
-      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_DISPLAY_NAME_REQUIRED = this.getDisplayName(true)
 
     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;
-  }
-
-  .file-constraints {
-    margin-left: 5px;
-    font-size: 13px;
+    &.with-icon {
+      @include button-with-icon;
+    }
   }
 
   .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',
-  styleUrls: [ './image-upload.component.scss' ],
-  templateUrl: './image-upload.component.html',
+  selector: 'my-preview-upload',
+  styleUrls: [ './preview-upload.component.scss' ],
+  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 { environment } from '../../../../environments/environment'
-import { RestExtractor, RestPagination, RestService } from '../../../shared'
+import { ActorFollow, ResultList } from '@shared/index'
+import { environment } from '../../../environments/environment'
+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>> {
-    return this.authHttp.get<ResultList<VideoChannelServer>>(AccountService.BASE_ACCOUNT_URL + account.nameWithHost + '/video-channels')
+  listAccountVideoChannels (account: Account, componentPagination?: ComponentPagination): Observable<ResultList<VideoChannel>> {
+    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
-      *ngFor="let video of videos; trackBy: videoById" [video]="video" [user]="user" [ownerDisplayType]="ownerDisplayType"
-      [displayVideoActions]="displayVideoActions" [displayOptions]="displayOptions"
-      (videoBlacklisted)="removeVideoFromArray(video)" (videoRemoved)="removeVideoFromArray(video)"
-    >
-    </my-video-miniature>
+    <ng-container *ngFor="let video of videos; trackBy: videoById;">
+      <div class="date-title" *ngIf="getCurrentGroupedDateLabel(video)">
+        {{ getCurrentGroupedDateLabel(video) }}
+      </div>
+
+      <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 {
-  width: $video-miniature-width * 6;
-  margin: auto !important;
-
-  @media screen and (max-width: 1800px) {
-    width: $video-miniature-width * 5;
-  }
+.date-title {
+  font-size: 16px;
+  font-weight: $font-semibold;
+  margin-bottom: 20px;
+  margin-top: -10px;
+  padding-top: 20px;
 
-  @media screen and (max-width: 1800px - $video-miniature-width) {
-    width: $video-miniature-width * 4;
+  &:not(:first-child) {
+    border-top: 1px solid $separator-border-color;
   }
+}
 
-  @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;
-    }
-  }
+.margin-content {
+  @include adapt-margin-content-width;
 }
 
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)
-    m.result.then(() => this.onClose())
-     .catch(() => this.onClose())
+    this.activeModal = this.modalService.open(this.modal)
 
     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 { AuthUser } from '../../core'
+import { VideoConstant, VideoDetails as VideoDetailsServerModel, VideoFile, VideoState } from '../../../../../shared'
 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
-                i18n-inputLabel inputLabel="Upload preview" inputName="previewfile" formControlName="previewfile"
+              <label i18n for="previewfile">Video preview</label>
+
+              <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 {
-  margin-bottom: 20px;
-  margin-top: 35px;
+.first-step-block {
+
+  .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 () {
-    const videofile = this.videofileInput.nativeElement.files[0]
+  uploadFirstStep (clickedOnButton = false) {
+    const videofile = this.getVideoFile()
     if (!videofile) return
 
-    // Check global user quota
-    const bytePipes = new BytesPipe()
-    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
-    }
+    if (!this.checkGlobalUserQuota(videofile)) return
+    if (!this.checkDailyUserQuota(videofile)) return
 
-    // 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)
+    if (clickedOnButton === false && this.isAudioFile(videofile.name)) {
+      this.isUploadingAudioFile = true
       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
-          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)
+          this.schedulePublicationPossible = this.video.privacy === VideoPrivacy.PRIVATE
 
           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">
-      <my-peertube-checkbox
-        inputName="startAt" [(ngModel)]="startAtCheckbox"
-        i18n-labelText labelText="Start at"
-      ></my-peertube-checkbox>
-
-      <my-timestamp-input
-        [timestamp]="currentVideoTimestamp"
-        [maxTimestamp]="video.duration"
-        [disabled]="!startAtCheckbox"
-        [(ngModel)]="currentVideoTimestamp"
-      >
-      </my-timestamp-input>
-    </div>
+      <ngb-tab i18n-title title="URL" id="url">
+        <ng-template ngbTabContent>
+
+          <div class="tab-content">
+            <div class="input-group">
+              <input #urlInput (click)="urlInput.select()" type="text" class="form-control readonly" readonly [value]="getVideoUrl()" />
+              <div class="input-group-append">
+                <button [ngxClipboard]="urlInput" (click)="activateCopiedMessage()" type="button" class="btn btn-outline-secondary">
+                  <span class="glyphicon glyphicon-copy"></span>
+                </button>
+              </div>
+            </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">
-      <label i18n>URL</label>
-      <div class="input-group input-group-sm">
-        <input #urlInput (click)="urlInput.select()" type="text" class="form-control input-sm readonly" readonly [value]="getVideoUrl()" />
-        <div class="input-group-append">
-          <button [ngxClipboard]="urlInput" (click)="activateCopiedMessage()" type="button" class="btn btn-outline-secondary">
-            <span class="glyphicon glyphicon-copy"></span>
-          </button>
+    <div class="filters">
+      <div>
+        <div class="form-group start-at">
+          <my-peertube-checkbox
+            inputName="startAt" [(ngModel)]="customizations.startAtCheckbox"
+            i18n-labelText labelText="Start at"
+          ></my-peertube-checkbox>
+
+          <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">
-      <label i18n>QR-Code</label>
-      <ngx-qrcode qrc-element-type="url" [qrc-value]="getVideoUrl()" qrc-errorCorrectionLevel="Q"></ngx-qrcode>
-    </div>
+        <div *ngIf="videoCaptions.length !== 0" class="form-group video-caption-block">
+          <my-peertube-checkbox
+            inputName="subtitleCheckbox" [(ngModel)]="customizations.subtitleCheckbox"
+            i18n-labelText labelText="Auto select subtitle"
+          ></my-peertube-checkbox>
 
-    <div class="form-group">
-      <label i18n>Embed</label>
-      <div class="input-group input-group-sm">
-        <input #shareInput (click)="shareInput.select()" type="text" class="form-control input-sm 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 class="peertube-select-container" [ngClass]="{ disabled: !customizations.subtitleCheckbox }">
+            <select [(ngModel)]="customizations.subtitle" [disabled]="!customizations.subtitleCheckbox">
+              <option *ngFor="let caption of videoCaptions" [value]="caption.language.id">{{ caption.language.label }}</option>
+            </select>
+          </div>
         </div>
       </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 (click)="isAdvancedCustomizationCollapsed = !isAdvancedCustomizationCollapsed" role="button" class="advanced-filters-button"
+           [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 '~bootstrap/scss/variables';
+@import '_mixins';
+@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 {
-    margin-left: 10px;
+    my-timestamp-input {
+      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 { durationToString } from '@app/shared/misc/utils'
+import { NgbModal, NgbTabChangeEvent } from '@ng-bootstrap/ng-bootstrap'
+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
-  startAtCheckbox = false
+  activeId: 'url' | 'qrcode' | 'embed'
+  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 () {
-    if (this.startAtCheckbox === true) return this.currentVideoTimestamp
+  onTabChange (event: NgbTabChangeEvent) {
+    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
-      this.setRating('none')
-    } else {
-      this.setRating('like')
-    }
+
+    // Already liked this video
+    if (this.userRating === 'like') this.setRating('none')
+    else this.setRating('like')
   }
 
   setDislike () {
     if (this.isUserLoggedIn() === false) return
-    if (this.userRating === 'dislike') {
-      // Already disliked this video
-      this.setRating('none')
-    } else {
-      this.setRating('dislike')
-    }
+
+    // Already disliked this video
+    if (this.userRating === 'dislike') this.setRating('none')
+    else 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
-    switch (nextRating) {
-      case 'like':
-        method = this.videoService.setVideoLike
-        break
-      case 'dislike':
-        method = this.videoService.setVideoDislike
-        break
-      case 'none':
-        method = this.videoService.unsetVideoLike
-        break
+    const ratingMethods: { [id in UserVideoRateType]: (id: number) => Observable<any> } = {
+      like: this.videoService.setVideoLike,
+      dislike: this.videoService.setVideoDislike,
+      none: this.videoService.unsetVideoLike
     }
 
-    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()
-      this.player = undefined
+      try {
+        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 ?
-          this.subscribeButton.unsubscribe() :
-          this.subscribeButton.subscribe()
+
+      new Hotkey('shift+s', () => {
+        this.subscribeButton.subscribed ? this.subscribeButton.unsubscribe() : 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 {
-  max-height: 500px; // 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: 10px;
-
-  a {
-    &:hover, &:focus:not(.focus-visible), &:active {
-      text-decoration: none;
-      outline: none;
-    }
-
-    color: var(--mainForegroundColor);
-  }
+.margin-content {
+  @include adapt-margin-content-width;
 }
 
-.channel {
-  .section-title a {
-    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;
-  }
+.section {
+  @include miniature-rows;
 }
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))
-        player.one('error', () => self.maybeFallbackToWebTorrent(mode, player, options))
+        let alreadyFallback = false
+
+        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) {
-  if (!url) url = window.location.origin + window.location.pathname.replace('/embed/', '/watch/')
+function buildVideoLink (options: {
+  baseUrl?: string,
 
-  if (time) {
-    const timeInt = Math.floor(time)
+  startTime?: number,
+  stopTime?: number,
 
-    const params = new URLSearchParams(window.location.search)
-    params.set('start', secondsToTime(timeInt))
+  subtitle?: string,
 
-    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'
 
-/**
- * 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 {
+export 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[] = []
-    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
-      }))
-    }
+    const videoCaptions = await this.buildCaptions(serverTranslations, captionsResponse)
 
     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 }) {
-    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 buildCaptions (serverTranslations: any, captionsResponse: Response): Promise<VideoJSCaption[]> {
+    if (captionsResponse.ok) {
+      const { data } = (await captionsResponse.json()) as ResultList<VideoCaption>
+
+      return data.map(c => ({
+        label: peertubeTranslate(c.language.label, serverTranslations),
+        language: c.language.id,
+        src: window.location.origin + c.captionPath
+      }))
     }
+
+    return []
   }
 }