259 files changed, 6283 insertions, 1859 deletions

diff --git a/client/src/app/+about/about-instance/about-instance.component.html b/client/src/app/+about/about-instance/about-instance.component.html
index 8c700752e..7c27ec760 100644
--- a/client/src/app/+about/about-instance/about-instance.component.html
+++ b/client/src/app/+about/about-instance/about-instance.component.html
@@ -8,6 +8,8 @@
 
     <div class="short-description">
       <div>{{ shortDescription }}</div>
+
+      <div *ngIf="isNSFW" class="dedicated-to-nsfw">This instance is dedicated to sensitive/NSFW content.</div>
     </div>
 
     <div class="description">
@@ -21,26 +23,6 @@
 
       <div [innerHTML]="termsHTML"></div>
     </div>
-
-    <div class="signup">
-      <div i18n class="section-title">Signup</div>
-
-      <div *ngIf="isSignupAllowed">
-        <ng-container i18n>User registration is allowed and</ng-container>
-
-        <ng-container i18n *ngIf="userVideoQuota !== -1">
-          this instance provides a baseline quota of {{ userVideoQuota | bytes: 0 }} space for the videos of its users.
-        </ng-container>
-
-        <ng-container i18n *ngIf="userVideoQuota === -1">
-          this instance provides unlimited space for the videos of its users.
-        </ng-container>
-      </div>
-
-      <div i18n *ngIf="isSignupAllowed === false">
-        User registration is currently not allowed.
-      </div>
-    </div>
   </div>
 
   <div class="col-md-12 col-xl-6">
diff --git a/client/src/app/+about/about-instance/about-instance.component.scss b/client/src/app/+about/about-instance/about-instance.component.scss
index 75cf57322..0296ae8e9 100644
--- a/client/src/app/+about/about-instance/about-instance.component.scss
+++ b/client/src/app/+about/about-instance/about-instance.component.scss
@@ -14,6 +14,8 @@
   & > .contact-admin {
     @include peertube-button;
     @include orange-button;
+
+    height: fit-content;
   }
 }
 
@@ -26,3 +28,8 @@
 .short-description, .description, .terms, .signup {
   margin-bottom: 30px;
 }
+
+.short-description .dedicated-to-nsfw {
+  margin-top: 20px;
+  font-weight: $font-semibold;
+}
diff --git a/client/src/app/+about/about-instance/about-instance.component.ts b/client/src/app/+about/about-instance/about-instance.component.ts
index a1b30fa8c..4a63f5e38 100644
--- a/client/src/app/+about/about-instance/about-instance.component.ts
+++ b/client/src/app/+about/about-instance/about-instance.component.ts
@@ -29,25 +29,22 @@ export class AboutInstanceComponent implements OnInit {
     return this.serverService.getConfig().instance.name
   }
 
-  get userVideoQuota () {
-    return this.serverService.getConfig().user.videoQuota
-  }
-
-  get isSignupAllowed () {
-    return this.serverService.getConfig().signup.allowed
-  }
-
   get isContactFormEnabled () {
     return this.serverService.getConfig().email.enabled && this.serverService.getConfig().contactForm.enabled
   }
 
+  get isNSFW () {
+    return this.serverService.getConfig().instance.isNSFW
+  }
+
   ngOnInit () {
     this.instanceService.getAbout()
       .subscribe(
-        res => {
+        async res => {
           this.shortDescription = res.instance.shortDescription
-          this.descriptionHTML = this.markdownService.textMarkdownToHTML(res.instance.description)
-          this.termsHTML = this.markdownService.textMarkdownToHTML(res.instance.terms)
+
+          this.descriptionHTML = await this.markdownService.textMarkdownToHTML(res.instance.description)
+          this.termsHTML = await this.markdownService.textMarkdownToHTML(res.instance.terms)
         },
 
         () => this.notifier.error(this.i18n('Cannot get about information from server'))
diff --git a/client/src/app/+accounts/account-about/account-about.component.ts b/client/src/app/+accounts/account-about/account-about.component.ts
index 13890a0ee..ce22d3c2e 100644
--- a/client/src/app/+accounts/account-about/account-about.component.ts
+++ b/client/src/app/+accounts/account-about/account-about.component.ts
@@ -25,9 +25,9 @@ export class AccountAboutComponent implements OnInit, OnDestroy {
   ngOnInit () {
     // Parent get the account for us
     this.accountSub = this.accountService.accountLoaded
-      .subscribe(account => {
+      .subscribe(async account => {
         this.account = account
-        this.descriptionHTML = this.markdownService.textMarkdownToHTML(this.account.description)
+        this.descriptionHTML = await this.markdownService.textMarkdownToHTML(this.account.description)
       })
   }
 
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 13b634a01..0d579fa0c 100644
--- a/client/src/app/+accounts/account-videos/account-videos.component.ts
+++ b/client/src/app/+accounts/account-videos/account-videos.component.ts
@@ -1,6 +1,5 @@
 import { Component, OnDestroy, OnInit } from '@angular/core'
 import { ActivatedRoute, Router } from '@angular/router'
-import { Location } from '@angular/common'
 import { immutableAssign } from '@app/shared/misc/utils'
 import { AuthService } from '../../core/auth'
 import { ConfirmService } from '../../core/confirm'
@@ -8,11 +7,11 @@ import { AbstractVideoList } from '../../shared/video/abstract-video-list'
 import { VideoService } from '../../shared/video/video.service'
 import { Account } from '@app/shared/account/account.model'
 import { AccountService } from '@app/shared/account/account.service'
-import { tap } from 'rxjs/operators'
+import { first, tap } from 'rxjs/operators'
 import { I18n } from '@ngx-translate/i18n-polyfill'
 import { Subscription } from 'rxjs'
 import { ScreenService } from '@app/shared/misc/screen.service'
-import { Notifier } from '@app/core'
+import { Notifier, ServerService } from '@app/core'
 
 @Component({
   selector: 'my-account-videos',
@@ -24,8 +23,6 @@ import { Notifier } from '@app/core'
 })
 export class AccountVideosComponent extends AbstractVideoList implements OnInit, OnDestroy {
   titlePage: string
-  marginContent = false // Disable margin
-  currentRoute = '/accounts/videos'
   loadOnInit = false
 
   private account: Account
@@ -33,13 +30,13 @@ export class AccountVideosComponent extends AbstractVideoList implements OnInit,
 
   constructor (
     protected router: Router,
+    protected serverService: ServerService,
     protected route: ActivatedRoute,
     protected authService: AuthService,
     protected notifier: Notifier,
     protected confirmService: ConfirmService,
-    protected location: Location,
     protected screenService: ScreenService,
-    protected i18n: I18n,
+    private i18n: I18n,
     private accountService: AccountService,
     private videoService: VideoService
   ) {
@@ -53,13 +50,13 @@ export class AccountVideosComponent extends AbstractVideoList implements OnInit,
 
     // Parent get the account for us
     this.accountSub = this.accountService.accountLoaded
-      .subscribe(account => {
-        this.account = account
-        this.currentRoute = '/accounts/' + this.account.nameWithHost + '/videos'
+                          .pipe(first())
+                          .subscribe(account => {
+                            this.account = account
 
-        this.reloadVideos()
-        this.generateSyndicationList()
-      })
+                            this.reloadVideos()
+                            this.generateSyndicationList()
+                          })
   }
 
   ngOnDestroy () {
diff --git a/client/src/app/+accounts/accounts-routing.module.ts b/client/src/app/+accounts/accounts-routing.module.ts
index ffe606b43..531d763c4 100644
--- a/client/src/app/+accounts/accounts-routing.module.ts
+++ b/client/src/app/+accounts/accounts-routing.module.ts
@@ -23,6 +23,10 @@ const accountsRoutes: Routes = [
         data: {
           meta: {
             title: 'Account videos'
+          },
+          reuse: {
+            enabled: true,
+            key: 'account-videos-list'
           }
         }
       },
diff --git a/client/src/app/+accounts/accounts.component.ts b/client/src/app/+accounts/accounts.component.ts
index e8339b78b..d9786fb5c 100644
--- a/client/src/app/+accounts/accounts.component.ts
+++ b/client/src/app/+accounts/accounts.component.ts
@@ -7,7 +7,6 @@ import { catchError, distinctUntilChanged, map, switchMap, tap } from 'rxjs/oper
 import { Subscription } from 'rxjs'
 import { AuthService, Notifier, RedirectService } from '@app/core'
 import { User, UserRight } from '../../../../shared'
-import { I18n } from '@ngx-translate/i18n-polyfill'
 
 @Component({
   templateUrl: './accounts.component.html',
diff --git a/client/src/app/+admin/admin-routing.module.ts b/client/src/app/+admin/admin-routing.module.ts
index ca31ba585..215da1e4f 100644
--- a/client/src/app/+admin/admin-routing.module.ts
+++ b/client/src/app/+admin/admin-routing.module.ts
@@ -6,9 +6,9 @@ import { MetaGuard } from '@ngx-meta/core'
 
 import { AdminComponent } from './admin.component'
 import { FollowsRoutes } from './follows'
-import { JobsRoutes } from './jobs/job.routes'
 import { UsersRoutes } from './users'
 import { ModerationRoutes } from '@app/+admin/moderation/moderation.routes'
+import { SystemRoutes } from '@app/+admin/system'
 
 const adminRoutes: Routes = [
   {
@@ -25,7 +25,7 @@ const adminRoutes: Routes = [
       ...FollowsRoutes,
       ...UsersRoutes,
       ...ModerationRoutes,
-      ...JobsRoutes,
+      ...SystemRoutes,
       ...ConfigRoutes
     ]
   }
diff --git a/client/src/app/+admin/admin.component.html b/client/src/app/+admin/admin.component.html
index 345fb9f5a..98f45a7d1 100644
--- a/client/src/app/+admin/admin.component.html
+++ b/client/src/app/+admin/admin.component.html
@@ -12,13 +12,13 @@
       Moderation
     </a>
 
-    <a i18n *ngIf="hasJobsRight()" routerLink="/admin/jobs" routerLinkActive="active" class="title-page">
-      Jobs
-    </a>
-
     <a i18n *ngIf="hasConfigRight()" routerLink="/admin/config" routerLinkActive="active" class="title-page">
       Configuration
     </a>
+
+    <a i18n *ngIf="hasJobsRight() || hasLogsRight() || hasDebugRight()" routerLink="/admin/system" routerLinkActive="active" class="title-page">
+      System
+    </a>
   </div>
 
   <div class="margin-content">
diff --git a/client/src/app/+admin/admin.component.scss b/client/src/app/+admin/admin.component.scss
deleted file mode 100644
index e69de29bb..000000000
--- a/client/src/app/+admin/admin.component.scss
+++ /dev/null
diff --git a/client/src/app/+admin/admin.component.ts b/client/src/app/+admin/admin.component.ts
index 1a4dd6786..408de4837 100644
--- a/client/src/app/+admin/admin.component.ts
+++ b/client/src/app/+admin/admin.component.ts
@@ -3,8 +3,7 @@ import { UserRight } from '../../../../shared'
 import { AuthService } from '../core/auth/auth.service'
 
 @Component({
-  templateUrl: './admin.component.html',
-  styleUrls: [ './admin.component.scss' ]
+  templateUrl: './admin.component.html'
 })
 export class AdminComponent {
   constructor (private auth: AuthService) {}
@@ -25,11 +24,19 @@ export class AdminComponent {
     return this.auth.getUser().hasRight(UserRight.MANAGE_VIDEO_BLACKLIST)
   }
 
+  hasConfigRight () {
+    return this.auth.getUser().hasRight(UserRight.MANAGE_CONFIGURATION)
+  }
+
+  hasLogsRight () {
+    return this.auth.getUser().hasRight(UserRight.MANAGE_LOGS)
+  }
+
   hasJobsRight () {
     return this.auth.getUser().hasRight(UserRight.MANAGE_JOBS)
   }
 
-  hasConfigRight () {
-    return this.auth.getUser().hasRight(UserRight.MANAGE_CONFIGURATION)
+  hasDebugRight () {
+    return this.auth.getUser().hasRight(UserRight.MANAGE_DEBUG)
   }
 }
diff --git a/client/src/app/+admin/admin.module.ts b/client/src/app/+admin/admin.module.ts
index c06ae1d60..71a4dfc4a 100644
--- a/client/src/app/+admin/admin.module.ts
+++ b/client/src/app/+admin/admin.module.ts
@@ -7,15 +7,20 @@ import { AdminRoutingModule } from './admin-routing.module'
 import { AdminComponent } from './admin.component'
 import { FollowersListComponent, FollowingAddComponent, FollowsComponent, FollowService } from './follows'
 import { FollowingListComponent } from './follows/following-list/following-list.component'
-import { JobsComponent } from './jobs/job.component'
-import { JobsListComponent } from './jobs/jobs-list/jobs-list.component'
-import { JobService } from './jobs/shared/job.service'
-import { UserCreateComponent, UserListComponent, UsersComponent, UserUpdateComponent } from './users'
-import { ModerationCommentModalComponent, VideoAbuseListComponent, VideoBlacklistListComponent } from './moderation'
+import { UserCreateComponent, UserListComponent, UserPasswordComponent, UsersComponent, UserUpdateComponent } from './users'
+import {
+  ModerationCommentModalComponent,
+  VideoAbuseListComponent,
+  VideoAutoBlacklistListComponent,
+  VideoBlacklistListComponent
+} from './moderation'
 import { ModerationComponent } from '@app/+admin/moderation/moderation.component'
 import { RedundancyCheckboxComponent } from '@app/+admin/follows/shared/redundancy-checkbox.component'
 import { RedundancyService } from '@app/+admin/follows/shared/redundancy.service'
 import { InstanceAccountBlocklistComponent, InstanceServerBlocklistComponent } from '@app/+admin/moderation/instance-blocklist'
+import { JobsComponent } from '@app/+admin/system/jobs/jobs.component'
+import { JobService, LogsComponent, LogsService, SystemComponent } from '@app/+admin/system'
+import { DebugComponent, DebugService } from '@app/+admin/system/debug'
 
 @NgModule({
   imports: [
@@ -36,17 +41,21 @@ import { InstanceAccountBlocklistComponent, InstanceServerBlocklistComponent } f
     UsersComponent,
     UserCreateComponent,
     UserUpdateComponent,
+    UserPasswordComponent,
     UserListComponent,
 
     ModerationComponent,
     VideoBlacklistListComponent,
     VideoAbuseListComponent,
+    VideoAutoBlacklistListComponent,
     ModerationCommentModalComponent,
     InstanceServerBlocklistComponent,
     InstanceAccountBlocklistComponent,
 
+    SystemComponent,
     JobsComponent,
-    JobsListComponent,
+    LogsComponent,
+    DebugComponent,
 
     ConfigComponent,
     EditCustomConfigComponent
@@ -60,6 +69,8 @@ import { InstanceAccountBlocklistComponent, InstanceServerBlocklistComponent } f
     FollowService,
     RedundancyService,
     JobService,
+    LogsService,
+    DebugService,
     ConfigService
   ]
 })
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 52eb00d93..637484622 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
@@ -45,6 +45,15 @@
           </div>
 
           <div class="form-group">
+            <my-peertube-checkbox
+              inputName="instanceIsNSFW" formControlName="isNSFW"
+              i18n-labelText labelText="Dedicated to sensitive or NSFW content"
+              i18n-helpHtml helpHtml="Enabling it will allow other administrators to know that you are mainly federating sensitive content.<br /><br />
+              Moreover, the NSFW checkbox on video upload will be automatically checked by default."
+            ></my-peertube-checkbox>
+          </div>
+
+          <div class="form-group">
             <label i18n for="instanceDefaultClientRoute">Default client route</label>
             <div class="peertube-select-container">
               <select id="instanceDefaultClientRoute" formControlName="defaultClientRoute">
@@ -75,6 +84,7 @@
           </div>
         </ng-container>
 
+
         <div i18n class="inner-form-title">Signup</div>
 
         <ng-container formGroupName="signup">
@@ -102,6 +112,7 @@
           </div>
         </ng-container>
 
+
         <div i18n class="inner-form-title">Users</div>
 
         <ng-container formGroupName="user">
@@ -130,6 +141,7 @@
           </div>
         </ng-container>
 
+
         <div i18n class="inner-form-title">Import</div>
 
         <ng-container formGroupName="import">
@@ -152,6 +164,47 @@
           </ng-container>
         </ng-container>
 
+
+        <div i18n class="inner-form-title">Auto-blacklist</div>
+
+        <ng-container formGroupName="autoBlacklist">
+          <ng-container formGroupName="videos">
+            <ng-container formGroupName="ofUsers">
+
+              <div class="form-group">
+                <my-peertube-checkbox
+                  inputName="autoBlacklistVideosOfUsersEnabled" formControlName="enabled"
+                  i18n-labelText labelText="New videos of users automatically blacklisted enabled"
+                ></my-peertube-checkbox>
+              </div>
+
+            </ng-container>
+          </ng-container>
+        </ng-container>
+
+
+        <div i18n class="inner-form-title">Instance followers</div>
+
+        <ng-container formGroupName="followers">
+          <ng-container formGroupName="instance">
+
+            <div class="form-group">
+              <my-peertube-checkbox
+                inputName="followersInstanceEnabled" formControlName="enabled"
+                i18n-labelText labelText="Other instances can follow your instance"
+              ></my-peertube-checkbox>
+            </div>
+
+            <div class="form-group">
+              <my-peertube-checkbox
+                inputName="followersInstanceManualApproval" formControlName="manualApproval"
+                i18n-labelText labelText="Manually approve new instance follower"
+              ></my-peertube-checkbox>
+            </div>
+          </ng-container>
+        </ng-container>
+
+
         <div i18n class="inner-form-title">Administrator</div>
 
         <div class="form-group" formGroupName="admin">
@@ -309,18 +362,18 @@
                   helpType="custom"
                   i18n-customHtml
                   customHtml="
-                    Write directly CSS code. Example:<br />
+                    Write directly CSS code. Example:<br /><br />
                     <pre>
-          body {{ '{' }}
-            background-color: red;
-          {{ '}' }}
+  #custom-css {{ '{' }}
+    color: red;
+  {{ '}' }}
                     </pre>
 
-                    Prepend with <em>#custom-css</em> to override styles. Example:
+                    Prepend with <em>#custom-css</em> to override styles. Example:<br /><br />
                     <pre>
-          #custom-css .logged-in-email {{ '{' }}
-            color: red;
-          {{ '}' }}
+  #custom-css .logged-in-email {{ '{' }}
+    color: red;
+  {{ '}' }}
                     </pre>
                   "
               ></my-help>
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 654a076b0..e64750713 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
@@ -5,7 +5,7 @@ import { CustomConfigValidatorsService, FormReactive, UserValidatorsService } fr
 import { Notifier } from '@app/core'
 import { CustomConfig } from '../../../../../../shared/models/server/custom-config.model'
 import { I18n } from '@ngx-translate/i18n-polyfill'
-import { BuildFormDefaultValues, FormValidatorService } from '@app/shared/forms/form-validators/form-validator.service'
+import { FormValidatorService } from '@app/shared/forms/form-validators/form-validator.service'
 
 @Component({
   selector: 'my-edit-custom-config',
@@ -66,6 +66,7 @@ export class EditCustomConfigComponent extends FormReactive implements OnInit {
         description: null,
         terms: null,
         defaultClientRoute: null,
+        isNSFW: false,
         defaultNSFWPolicy: null,
         customizations: {
           javascript: null,
@@ -116,6 +117,19 @@ export class EditCustomConfigComponent extends FormReactive implements OnInit {
         threads: this.customConfigValidatorsService.TRANSCODING_THREADS,
         allowAdditionalExtensions: null,
         resolutions: {}
+      },
+      autoBlacklist: {
+        videos: {
+          ofUsers: {
+            enabled: null
+          }
+        }
+      },
+      followers: {
+        instance: {
+          enabled: null,
+          manualApproval: null
+        }
       }
     }
 
diff --git a/client/src/app/+admin/follows/followers-list/followers-list.component.html b/client/src/app/+admin/follows/followers-list/followers-list.component.html
index fc022bdb4..da0ba95e3 100644
--- a/client/src/app/+admin/follows/followers-list/followers-list.component.html
+++ b/client/src/app/+admin/follows/followers-list/followers-list.component.html
@@ -14,25 +14,33 @@
   <ng-template pTemplate="header">
     <tr>
       <th i18n style="width: 60px">ID</th>
-      <th i18n>Score</th>
-      <th i18n>Name</th>
-      <th i18n>Host</th>
+      <th i18n>Follower handle</th>
       <th i18n>State</th>
+      <th i18n>Score</th>
       <th i18n pSortableColumn="createdAt">Created <p-sortIcon field="createdAt"></p-sortIcon></th>
+      <th></th>
     </tr>
   </ng-template>
 
   <ng-template pTemplate="body" let-follow>
     <tr>
       <td>{{ follow.id }}</td>
-      <td>{{ follow.score }}</td>
-      <td>{{ follow.follower.name }}</td>
-      <td>{{ follow.follower.host }}</td>
+      <td>{{ follow.follower.name + '@' + follow.follower.host }}</td>
 
       <td *ngIf="follow.state === 'accepted'" i18n>Accepted</td>
       <td *ngIf="follow.state === 'pending'" i18n>Pending</td>
 
+      <td>{{ follow.score }}</td>
       <td>{{ follow.createdAt }}</td>
+
+      <td class="action-cell">
+        <ng-container *ngIf="follow.state === 'pending'">
+          <my-button i18n-label label="Accept" icon="tick" (click)="acceptFollower(follow)"></my-button>
+          <my-button i18n-label label="Refuse" icon="cross" (click)="rejectFollower(follow)"></my-button>
+        </ng-container>
+
+        <my-delete-button *ngIf="follow.state === 'accepted'" (click)="deleteFollower(follow)"></my-delete-button>
+      </td>
     </tr>
   </ng-template>
 </p-table>
diff --git a/client/src/app/+admin/follows/followers-list/followers-list.component.scss b/client/src/app/+admin/follows/followers-list/followers-list.component.scss
index a6f0656b8..964b3f99b 100644
--- a/client/src/app/+admin/follows/followers-list/followers-list.component.scss
+++ b/client/src/app/+admin/follows/followers-list/followers-list.component.scss
@@ -7,4 +7,10 @@
   input {
     @include peertube-input-text(250px);
   }
-}
\ No newline at end of file
+}
+
+.action-cell {
+  my-button:first-child {
+    margin-right: 10px;
+  }
+}
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 9a8848bfb..b78cdf656 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
@@ -1,6 +1,5 @@
 import { Component, OnInit } from '@angular/core'
-
-import { Notifier } from '@app/core'
+import { ConfirmService, Notifier } from '@app/core'
 import { SortMeta } from 'primeng/primeng'
 import { ActorFollow } from '../../../../../../shared/models/actors/follow.model'
 import { RestPagination, RestTable } from '../../../shared'
@@ -20,9 +19,10 @@ export class FollowersListComponent extends RestTable implements OnInit {
   pagination: RestPagination = { count: this.rowsPerPage, start: 0 }
 
   constructor (
+    private confirmService: ConfirmService,
     private notifier: Notifier,
-    private followService: FollowService,
-    private i18n: I18n
+    private i18n: I18n,
+    private followService: FollowService
   ) {
     super()
   }
@@ -31,6 +31,62 @@ export class FollowersListComponent extends RestTable implements OnInit {
     this.initialize()
   }
 
+  acceptFollower (follow: ActorFollow) {
+    follow.state = 'accepted'
+
+    this.followService.acceptFollower(follow)
+      .subscribe(
+        () => {
+          const handle = follow.follower.name + '@' + follow.follower.host
+          this.notifier.success(this.i18n('{{handle}} accepted in instance followers', { handle }))
+        },
+
+        err => {
+          follow.state = 'pending'
+          this.notifier.error(err.message)
+        }
+      )
+  }
+
+  async rejectFollower (follow: ActorFollow) {
+    const message = this.i18n('Do you really want to reject this follower?')
+    const res = await this.confirmService.confirm(message, this.i18n('Reject'))
+    if (res === false) return
+
+    this.followService.rejectFollower(follow)
+        .subscribe(
+          () => {
+            const handle = follow.follower.name + '@' + follow.follower.host
+            this.notifier.success(this.i18n('{{handle}} rejected from instance followers', { handle }))
+
+            this.loadData()
+          },
+
+          err => {
+            follow.state = 'pending'
+            this.notifier.error(err.message)
+          }
+        )
+  }
+
+  async deleteFollower (follow: ActorFollow) {
+    const message = this.i18n('Do you really want to delete this follower?')
+    const res = await this.confirmService.confirm(message, this.i18n('Delete'))
+    if (res === false) return
+
+    this.followService.removeFollower(follow)
+        .subscribe(
+          () => {
+            const handle = follow.follower.name + '@' + follow.follower.host
+            this.notifier.success(this.i18n('{{handle}} removed from instance followers', { handle }))
+
+            this.loadData()
+          },
+
+          err => this.notifier.error(err.message)
+        )
+  }
+
   protected loadData () {
     this.followService.getFollowers(this.pagination, this.sort, this.search)
                       .subscribe(
diff --git a/client/src/app/+admin/follows/shared/follow.service.ts b/client/src/app/+admin/follows/shared/follow.service.ts
index a2904179e..c2b8ef006 100644
--- a/client/src/app/+admin/follows/shared/follow.service.ts
+++ b/client/src/app/+admin/follows/shared/follow.service.ts
@@ -63,4 +63,34 @@ export class FollowService {
                  catchError(res => this.restExtractor.handleError(res))
                )
   }
+
+  acceptFollower (follow: ActorFollow) {
+    const handle = follow.follower.name + '@' + follow.follower.host
+
+    return this.authHttp.post(`${FollowService.BASE_APPLICATION_URL}/followers/${handle}/accept`, {})
+               .pipe(
+                 map(this.restExtractor.extractDataBool),
+                 catchError(res => this.restExtractor.handleError(res))
+               )
+  }
+
+  rejectFollower (follow: ActorFollow) {
+    const handle = follow.follower.name + '@' + follow.follower.host
+
+    return this.authHttp.post(`${FollowService.BASE_APPLICATION_URL}/followers/${handle}/reject`, {})
+               .pipe(
+                 map(this.restExtractor.extractDataBool),
+                 catchError(res => this.restExtractor.handleError(res))
+               )
+  }
+
+  removeFollower (follow: ActorFollow) {
+    const handle = follow.follower.name + '@' + follow.follower.host
+
+    return this.authHttp.delete(`${FollowService.BASE_APPLICATION_URL}/followers/${handle}`)
+               .pipe(
+                 map(this.restExtractor.extractDataBool),
+                 catchError(res => this.restExtractor.handleError(res))
+               )
+  }
 }
diff --git a/client/src/app/+admin/jobs/index.ts b/client/src/app/+admin/jobs/index.ts
deleted file mode 100644
index c0e0cc95d..000000000
--- a/client/src/app/+admin/jobs/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export * from './shared'
-export * from './jobs-list'
-export * from './job.routes'
-export * from './job.component'
diff --git a/client/src/app/+admin/jobs/job.component.ts b/client/src/app/+admin/jobs/job.component.ts
deleted file mode 100644
index bc80c9a6a..000000000
--- a/client/src/app/+admin/jobs/job.component.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import { Component } from '@angular/core'
-
-@Component({
-  template: '<router-outlet></router-outlet>'
-})
-export class JobsComponent {}
diff --git a/client/src/app/+admin/jobs/job.routes.ts b/client/src/app/+admin/jobs/job.routes.ts
deleted file mode 100644
index 331dc2af2..000000000
--- a/client/src/app/+admin/jobs/job.routes.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-import { Routes } from '@angular/router'
-import { UserRight } from '../../../../../shared'
-import { UserRightGuard } from '../../core'
-import { JobsComponent } from './job.component'
-import { JobsListComponent } from './jobs-list/jobs-list.component'
-
-export const JobsRoutes: Routes = [
-  {
-    path: 'jobs',
-    component: JobsComponent,
-    canActivate: [ UserRightGuard ],
-    data: {
-      userRight: UserRight.MANAGE_JOBS
-    },
-    children: [
-      {
-        path: '',
-        redirectTo: 'list',
-        pathMatch: 'full'
-      },
-      {
-        path: 'list',
-        component: JobsListComponent,
-        data: {
-          meta: {
-            title: 'Jobs list'
-          }
-        }
-      }
-    ]
-  }
-]
diff --git a/client/src/app/+admin/jobs/jobs-list/index.ts b/client/src/app/+admin/jobs/jobs-list/index.ts
deleted file mode 100644
index cf590a6f8..000000000
--- a/client/src/app/+admin/jobs/jobs-list/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './jobs-list.component'
diff --git a/client/src/app/+admin/jobs/shared/index.ts b/client/src/app/+admin/jobs/shared/index.ts
deleted file mode 100644
index 609439e5c..000000000
--- a/client/src/app/+admin/jobs/shared/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './job.service'
diff --git a/client/src/app/+admin/moderation/index.ts b/client/src/app/+admin/moderation/index.ts
index 66e2c6a39..3c683a28c 100644
--- a/client/src/app/+admin/moderation/index.ts
+++ b/client/src/app/+admin/moderation/index.ts
@@ -1,4 +1,5 @@
 export * from './video-abuse-list'
+export * from './video-auto-blacklist-list'
 export * from './video-blacklist-list'
 export * from './moderation.component'
 export * from './moderation.routes'
diff --git a/client/src/app/+admin/moderation/moderation.component.html b/client/src/app/+admin/moderation/moderation.component.html
index 01457936c..b70027957 100644
--- a/client/src/app/+admin/moderation/moderation.component.html
+++ b/client/src/app/+admin/moderation/moderation.component.html
@@ -4,7 +4,9 @@
   <div class="admin-sub-nav">
     <a *ngIf="hasVideoAbusesRight()" i18n routerLink="video-abuses/list" routerLinkActive="active">Video abuses</a>
 
-    <a *ngIf="hasVideoBlacklistRight()" i18n routerLink="video-blacklist/list" routerLinkActive="active">Blacklisted videos</a>
+    <a *ngIf="hasVideoBlacklistRight()" i18n routerLink="video-blacklist/list" routerLinkActive="active">{{ autoBlacklistVideosEnabled ? 'Manually blacklisted videos' : 'Blacklisted videos' }}</a>
+
+    <a *ngIf="autoBlacklistVideosEnabled && hasVideoBlacklistRight()" i18n routerLink="video-auto-blacklist/list" routerLinkActive="active">Auto-blacklisted videos</a>
 
     <a *ngIf="hasAccountsBlocklistRight()" i18n routerLink="blocklist/accounts" routerLinkActive="active">Muted accounts</a>
 
diff --git a/client/src/app/+admin/moderation/moderation.component.ts b/client/src/app/+admin/moderation/moderation.component.ts
index 2b2618933..47154af3f 100644
--- a/client/src/app/+admin/moderation/moderation.component.ts
+++ b/client/src/app/+admin/moderation/moderation.component.ts
@@ -1,13 +1,20 @@
 import { Component } from '@angular/core'
 import { UserRight } from '../../../../../shared'
-import { AuthService } from '@app/core/auth/auth.service'
+import { AuthService, ServerService } from '@app/core'
 
 @Component({
   templateUrl: './moderation.component.html',
   styleUrls: [ './moderation.component.scss' ]
 })
 export class ModerationComponent {
-  constructor (private auth: AuthService) {}
+  autoBlacklistVideosEnabled: boolean
+
+  constructor (
+    private auth: AuthService,
+    private serverService: ServerService
+  ) {
+    this.autoBlacklistVideosEnabled = this.serverService.getConfig().autoBlacklist.videos.ofUsers.enabled
+  }
 
   hasVideoAbusesRight () {
     return this.auth.getUser().hasRight(UserRight.MANAGE_VIDEO_ABUSES)
diff --git a/client/src/app/+admin/moderation/moderation.routes.ts b/client/src/app/+admin/moderation/moderation.routes.ts
index 6f6dde290..a024f2bee 100644
--- a/client/src/app/+admin/moderation/moderation.routes.ts
+++ b/client/src/app/+admin/moderation/moderation.routes.ts
@@ -3,6 +3,7 @@ import { UserRight } from '../../../../../shared'
 import { UserRightGuard } from '@app/core'
 import { VideoAbuseListComponent } from '@app/+admin/moderation/video-abuse-list'
 import { VideoBlacklistListComponent } from '@app/+admin/moderation/video-blacklist-list'
+import { VideoAutoBlacklistListComponent } from '@app/+admin/moderation/video-auto-blacklist-list'
 import { ModerationComponent } from '@app/+admin/moderation/moderation.component'
 import { InstanceAccountBlocklistComponent, InstanceServerBlocklistComponent } from '@app/+admin/moderation/instance-blocklist'
 
@@ -27,6 +28,11 @@ export const ModerationRoutes: Routes = [
         pathMatch: 'full'
       },
       {
+        path: 'video-auto-blacklist',
+        redirectTo: 'video-auto-blacklist/list',
+        pathMatch: 'full'
+      },
+      {
         path: 'video-abuses/list',
         component: VideoAbuseListComponent,
         canActivate: [ UserRightGuard ],
@@ -38,6 +44,17 @@ export const ModerationRoutes: Routes = [
         }
       },
       {
+        path: 'video-auto-blacklist/list',
+        component: VideoAutoBlacklistListComponent,
+        canActivate: [ UserRightGuard ],
+        data: {
+          userRight: UserRight.MANAGE_VIDEO_BLACKLIST,
+          meta: {
+            title: 'Auto-blacklisted videos'
+          }
+        }
+      },
+      {
         path: 'video-blacklist/list',
         component: VideoBlacklistListComponent,
         canActivate: [ UserRightGuard ],
diff --git a/client/src/app/+admin/moderation/video-abuse-list/video-abuse-list.component.html b/client/src/app/+admin/moderation/video-abuse-list/video-abuse-list.component.html
index 05b549de6..627437053 100644
--- a/client/src/app/+admin/moderation/video-abuse-list/video-abuse-list.component.html
+++ b/client/src/app/+admin/moderation/video-abuse-list/video-abuse-list.component.html
@@ -51,11 +51,11 @@
         <td class="moderation-expanded" colspan="6">
           <div>
             <span i18n class="moderation-expanded-label">Reason:</span>
-            <span class="moderation-expanded-text" [innerHTML]="toHtml(videoAbuse.reason)"></span>
+            <span class="moderation-expanded-text" [innerHTML]="videoAbuse.reasonHtml"></span>
           </div>
           <div *ngIf="videoAbuse.moderationComment">
             <span i18n class="moderation-expanded-label">Moderation comment:</span>
-            <span class="moderation-expanded-text" [innerHTML]="toHtml(videoAbuse.moderationComment)"></span>
+            <span class="moderation-expanded-text" [innerHTML]="videoAbuse.moderationCommentHtml"></span>
           </div>
         </td>
       </tr>
diff --git a/client/src/app/+admin/moderation/video-abuse-list/video-abuse-list.component.ts b/client/src/app/+admin/moderation/video-abuse-list/video-abuse-list.component.ts
index 00c871659..3aa875668 100644
--- a/client/src/app/+admin/moderation/video-abuse-list/video-abuse-list.component.ts
+++ b/client/src/app/+admin/moderation/video-abuse-list/video-abuse-list.component.ts
@@ -19,7 +19,7 @@ import { MarkdownService } from '@app/shared/renderer'
 export class VideoAbuseListComponent extends RestTable implements OnInit {
   @ViewChild('moderationCommentModal') moderationCommentModal: ModerationCommentModalComponent
 
-  videoAbuses: VideoAbuse[] = []
+  videoAbuses: (VideoAbuse & { moderationCommentHtml?: string, reasonHtml?: string })[] = []
   totalRecords = 0
   rowsPerPage = 10
   sort: SortMeta = { field: 'createdAt', order: 1 }
@@ -110,19 +110,28 @@ export class VideoAbuseListComponent extends RestTable implements OnInit {
 
   }
 
-  toHtml (text: string) {
-    return this.markdownRenderer.textMarkdownToHTML(text)
-  }
-
   protected loadData () {
     return this.videoAbuseService.getVideoAbuses(this.pagination, this.sort)
                .subscribe(
-                 resultList => {
-                   this.videoAbuses = resultList.data
+                 async resultList => {
                    this.totalRecords = resultList.total
+
+                   this.videoAbuses = resultList.data
+
+                   for (const abuse of this.videoAbuses) {
+                     Object.assign(abuse, {
+                       reasonHtml: await this.toHtml(abuse.reason),
+                       moderationCommentHtml: await this.toHtml(abuse.moderationComment)
+                     })
+                   }
+
                  },
 
                  err => this.notifier.error(err.message)
                )
   }
+
+  private toHtml (text: string) {
+    return this.markdownRenderer.textMarkdownToHTML(text)
+  }
 }
diff --git a/client/src/app/+admin/moderation/video-auto-blacklist-list/index.ts b/client/src/app/+admin/moderation/video-auto-blacklist-list/index.ts
new file mode 100644
index 000000000..e3522f68c
--- /dev/null
+++ b/client/src/app/+admin/moderation/video-auto-blacklist-list/index.ts
@@ -0,0 +1 @@
+export * from './video-auto-blacklist-list.component'
diff --git a/client/src/app/+admin/moderation/video-auto-blacklist-list/video-auto-blacklist-list.component.html b/client/src/app/+admin/moderation/video-auto-blacklist-list/video-auto-blacklist-list.component.html
new file mode 100644
index 000000000..62dde60bb
--- /dev/null
+++ b/client/src/app/+admin/moderation/video-auto-blacklist-list/video-auto-blacklist-list.component.html
@@ -0,0 +1,19 @@
+<my-videos-selection
+  [(selection)]="selection"
+  [(videosModel)]="videos"
+  [miniatureDisplayOptions]="miniatureDisplayOptions"
+  [titlePage]="titlePage"
+  [getVideosObservableFunction]="getVideosObservableFunction"
+>
+  <ng-template ptTemplate="globalButtons">
+    <span class="action-button action-button-unblacklist-selection" (click)="removeSelectedVideosFromBlacklist()">
+      <my-global-icon iconName="tick"></my-global-icon>
+      <ng-container i18n>Unblacklist</ng-container>
+    </span>
+  </ng-template>
+
+  <ng-template ptTemplate="rowButtons" let-video>
+    <my-button i18n-label label="Unblacklist" icon="tick" (click)="removeVideoFromBlacklist(video)"></my-button>
+  </ng-template>
+
+</my-videos-selection>
diff --git a/client/src/app/+admin/moderation/video-auto-blacklist-list/video-auto-blacklist-list.component.scss b/client/src/app/+admin/moderation/video-auto-blacklist-list/video-auto-blacklist-list.component.scss
new file mode 100644
index 000000000..85ebc6041
--- /dev/null
+++ b/client/src/app/+admin/moderation/video-auto-blacklist-list/video-auto-blacklist-list.component.scss
@@ -0,0 +1,14 @@
+@import '_variables';
+@import '_mixins';
+
+.action-button-unblacklist-selection {
+  display: inline-block;
+
+  @include peertube-button;
+  @include orange-button;
+  @include button-with-icon(21px);
+
+  my-global-icon {
+    @include apply-svg-color(#fff);
+  }
+}
diff --git a/client/src/app/+admin/moderation/video-auto-blacklist-list/video-auto-blacklist-list.component.ts b/client/src/app/+admin/moderation/video-auto-blacklist-list/video-auto-blacklist-list.component.ts
new file mode 100644
index 000000000..fb2962b47
--- /dev/null
+++ b/client/src/app/+admin/moderation/video-auto-blacklist-list/video-auto-blacklist-list.component.ts
@@ -0,0 +1,86 @@
+import { Component } from '@angular/core'
+import { I18n } from '@ngx-translate/i18n-polyfill'
+import { ActivatedRoute, Router } from '@angular/router'
+import { ComponentPagination } from '@app/shared/rest/component-pagination.model'
+import { AuthService, Notifier, ServerService } from '@app/core'
+import { VideoBlacklistService } from '@app/shared'
+import { immutableAssign } from '@app/shared/misc/utils'
+import { ScreenService } from '@app/shared/misc/screen.service'
+import { MiniatureDisplayOptions } from '@app/shared/video/video-miniature.component'
+import { SelectionType } from '@app/shared/video/videos-selection.component'
+import { Video } from '@app/shared/video/video.model'
+
+@Component({
+  selector: 'my-video-auto-blacklist-list',
+  templateUrl: './video-auto-blacklist-list.component.html',
+  styleUrls: [ './video-auto-blacklist-list.component.scss' ]
+})
+export class VideoAutoBlacklistListComponent {
+  titlePage: string
+  selection: SelectionType = {}
+  miniatureDisplayOptions: MiniatureDisplayOptions = {
+    date: true,
+    views: false,
+    by: true,
+    privacyLabel: false,
+    privacyText: true,
+    state: false,
+    blacklistInfo: false,
+    nsfw: true
+  }
+  pagination: ComponentPagination = {
+    currentPage: 1,
+    itemsPerPage: 5,
+    totalItems: null
+  }
+  videos: Video[] = []
+  getVideosObservableFunction = this.getVideosObservable.bind(this)
+
+  constructor (
+    protected router: Router,
+    protected route: ActivatedRoute,
+    protected notifier: Notifier,
+    protected authService: AuthService,
+    protected screenService: ScreenService,
+    protected serverService: ServerService,
+    private i18n: I18n,
+    private videoBlacklistService: VideoBlacklistService
+  ) {
+    this.titlePage = this.i18n('Auto-blacklisted videos')
+  }
+
+  getVideosObservable (page: number) {
+    const newPagination = immutableAssign(this.pagination, { currentPage: page })
+
+    return this.videoBlacklistService.getAutoBlacklistedAsVideoList(newPagination)
+  }
+
+  removeVideoFromBlacklist (entry: Video) {
+    this.videoBlacklistService.removeVideoFromBlacklist(entry.id).subscribe(
+      () => {
+        this.notifier.success(this.i18n('Video {{name}} removed from blacklist.', { name: entry.name }))
+
+        this.videos = this.videos.filter(v => v.id !== entry.id)
+      },
+
+      error => this.notifier.error(error.message)
+    )
+  }
+
+  removeSelectedVideosFromBlacklist () {
+    const toReleaseVideosIds = Object.keys(this.selection)
+                                      .filter(k => this.selection[ k ] === true)
+                                      .map(k => parseInt(k, 10))
+
+    this.videoBlacklistService.removeVideoFromBlacklist(toReleaseVideosIds).subscribe(
+      () => {
+        this.notifier.success(this.i18n('{{num}} videos removed from blacklist.', { num: toReleaseVideosIds.length }))
+
+        this.selection = {}
+        this.videos = this.videos.filter(v => toReleaseVideosIds.includes(v.id) === false)
+      },
+
+      error => this.notifier.error(error.message)
+    )
+  }
+}
diff --git a/client/src/app/+admin/moderation/video-blacklist-list/video-blacklist-list.component.html b/client/src/app/+admin/moderation/video-blacklist-list/video-blacklist-list.component.html
index 247f441c1..608dff2d8 100644
--- a/client/src/app/+admin/moderation/video-blacklist-list/video-blacklist-list.component.html
+++ b/client/src/app/+admin/moderation/video-blacklist-list/video-blacklist-list.component.html
@@ -41,7 +41,7 @@
     <tr>
       <td class="moderation-expanded" colspan="6">
         <span i18n class="moderation-expanded-label">Blacklist reason:</span>
-        <span class="moderation-expanded-text" [innerHTML]="toHtml(videoBlacklist.reason)"></span>
+        <span class="moderation-expanded-text" [innerHTML]="videoBlacklist.reasonHtml"></span>
       </td>
     </tr>
   </ng-template>
diff --git a/client/src/app/+admin/moderation/video-blacklist-list/video-blacklist-list.component.ts b/client/src/app/+admin/moderation/video-blacklist-list/video-blacklist-list.component.ts
index b27bbbfef..f4bce7c48 100644
--- a/client/src/app/+admin/moderation/video-blacklist-list/video-blacklist-list.component.ts
+++ b/client/src/app/+admin/moderation/video-blacklist-list/video-blacklist-list.component.ts
@@ -1,9 +1,9 @@
 import { Component, OnInit } from '@angular/core'
 import { SortMeta } from 'primeng/components/common/sortmeta'
-import { Notifier } from '@app/core'
+import { Notifier, ServerService } from '@app/core'
 import { ConfirmService } from '../../../core'
 import { RestPagination, RestTable, VideoBlacklistService } from '../../../shared'
-import { VideoBlacklist } from '../../../../../../shared'
+import { VideoBlacklist, VideoBlacklistType } from '../../../../../../shared'
 import { I18n } from '@ngx-translate/i18n-polyfill'
 import { DropdownAction } from '../../../shared/buttons/action-dropdown.component'
 import { Video } from '../../../shared/video/video.model'
@@ -15,16 +15,18 @@ import { MarkdownService } from '@app/shared/renderer'
   styleUrls: [ '../moderation.component.scss' ]
 })
 export class VideoBlacklistListComponent extends RestTable implements OnInit {
-  blacklist: VideoBlacklist[] = []
+  blacklist: (VideoBlacklist & { reasonHtml?: string })[] = []
   totalRecords = 0
   rowsPerPage = 10
   sort: SortMeta = { field: 'createdAt', order: 1 }
   pagination: RestPagination = { count: this.rowsPerPage, start: 0 }
+  listBlacklistTypeFilter: VideoBlacklistType = undefined
 
   videoBlacklistActions: DropdownAction<VideoBlacklist>[] = []
 
   constructor (
     private notifier: Notifier,
+    private serverService: ServerService,
     private confirmService: ConfirmService,
     private videoBlacklistService: VideoBlacklistService,
     private markdownRenderer: MarkdownService,
@@ -32,6 +34,11 @@ export class VideoBlacklistListComponent extends RestTable implements OnInit {
   ) {
     super()
 
+    // don't filter if auto-blacklist not enabled as this will be only list
+    if (this.serverService.getConfig().autoBlacklist.videos.ofUsers.enabled) {
+      this.listBlacklistTypeFilter = VideoBlacklistType.MANUAL
+    }
+
     this.videoBlacklistActions = [
       {
         label: this.i18n('Unblacklist'),
@@ -77,11 +84,16 @@ export class VideoBlacklistListComponent extends RestTable implements OnInit {
   }
 
   protected loadData () {
-    this.videoBlacklistService.listBlacklist(this.pagination, this.sort)
+    this.videoBlacklistService.listBlacklist(this.pagination, this.sort, this.listBlacklistTypeFilter)
       .subscribe(
-        resultList => {
-          this.blacklist = resultList.data
+        async resultList => {
           this.totalRecords = resultList.total
+
+          this.blacklist = resultList.data
+
+          for (const element of this.blacklist) {
+            Object.assign(element, { reasonHtml: await this.toHtml(element.reason) })
+          }
         },
 
         err => this.notifier.error(err.message)
diff --git a/client/src/app/+admin/system/debug/debug.component.html b/client/src/app/+admin/system/debug/debug.component.html
new file mode 100644
index 000000000..f35414b37
--- /dev/null
+++ b/client/src/app/+admin/system/debug/debug.component.html
@@ -0,0 +1,19 @@
+<div class="root">
+  <h4>IP</h4>
+
+  <p>PeerTube thinks your public IP is <strong>{{ debug?.ip }}</strong>.</p>
+
+  <p>If this is not your correct public IP, please consider fixing it because:</p>
+  <ul>
+    <li>Views may not be counted correctly (reduced compared to what they should be)</li>
+    <li>Anti brute force system could be overzealous</li>
+    <li>P2P system could not work correctly</li>
+  </ul>
+
+  <p>To fix it:<p>
+  <ul>
+    <li>Check the <code>trust_proxy</code> configuration key</li>
+    <li>If you run PeerTube using Docker, check you run the <code>reverse-proxy</code> with <code>network_mode: "host"</code>
+      (see <a href="https://github.com/Chocobozzz/PeerTube/issues/1643#issuecomment-464789666">issue 1643</a>)</li>
+  </ul>
+</div>
diff --git a/client/src/app/+admin/system/debug/debug.component.scss b/client/src/app/+admin/system/debug/debug.component.scss
new file mode 100644
index 000000000..90addd284
--- /dev/null
+++ b/client/src/app/+admin/system/debug/debug.component.scss
@@ -0,0 +1,6 @@
+@import '_variables';
+@import '_mixins';
+
+.root {
+  font-size: 14px;
+}
diff --git a/client/src/app/+admin/system/debug/debug.component.ts b/client/src/app/+admin/system/debug/debug.component.ts
new file mode 100644
index 000000000..8a77f79f7
--- /dev/null
+++ b/client/src/app/+admin/system/debug/debug.component.ts
@@ -0,0 +1,31 @@
+import { Component, OnInit } from '@angular/core'
+import { Notifier } from '@app/core'
+import { Debug } from '@shared/models/server'
+import { DebugService } from '@app/+admin/system/debug/debug.service'
+
+@Component({
+  templateUrl: './debug.component.html',
+  styleUrls: [ './debug.component.scss' ]
+})
+export class DebugComponent implements OnInit {
+  debug: Debug
+
+  constructor (
+    private debugService: DebugService,
+    private notifier: Notifier
+  ) {
+  }
+
+  ngOnInit (): void {
+    this.load()
+  }
+
+  load () {
+    this.debugService.getDebug()
+        .subscribe(
+          debug => this.debug = debug,
+
+          err => this.notifier.error(err.message)
+        )
+  }
+}
diff --git a/client/src/app/+admin/system/debug/debug.service.ts b/client/src/app/+admin/system/debug/debug.service.ts
new file mode 100644
index 000000000..6c722d177
--- /dev/null
+++ b/client/src/app/+admin/system/debug/debug.service.ts
@@ -0,0 +1,25 @@
+import { catchError } from 'rxjs/operators'
+import { HttpClient } from '@angular/common/http'
+import { Injectable } from '@angular/core'
+import { Observable } from 'rxjs'
+import { environment } from '../../../../environments/environment'
+import { RestExtractor, RestService } from '../../../shared'
+import { Debug } from '@shared/models/server'
+
+@Injectable()
+export class DebugService {
+  private static BASE_DEBUG_URL = environment.apiUrl + '/api/v1/server/debug'
+
+  constructor (
+    private authHttp: HttpClient,
+    private restService: RestService,
+    private restExtractor: RestExtractor
+  ) {}
+
+  getDebug (): Observable<Debug> {
+    return this.authHttp.get<Debug>(DebugService.BASE_DEBUG_URL)
+               .pipe(
+                 catchError(err => this.restExtractor.handleError(err))
+               )
+  }
+}
diff --git a/client/src/app/+admin/system/debug/index.ts b/client/src/app/+admin/system/debug/index.ts
new file mode 100644
index 000000000..7fc7a0721
--- /dev/null
+++ b/client/src/app/+admin/system/debug/index.ts
@@ -0,0 +1,2 @@
+export * from './debug.component'
+export * from './debug.service'
diff --git a/client/src/app/+admin/system/index.ts b/client/src/app/+admin/system/index.ts
new file mode 100644
index 000000000..226d999d2
--- /dev/null
+++ b/client/src/app/+admin/system/index.ts
@@ -0,0 +1,4 @@
+export * from './jobs'
+export * from './logs'
+export * from './system.component'
+export * from './system.routes'
diff --git a/client/src/app/+admin/system/jobs/index.ts b/client/src/app/+admin/system/jobs/index.ts
new file mode 100644
index 000000000..486a745e4
--- /dev/null
+++ b/client/src/app/+admin/system/jobs/index.ts
@@ -0,0 +1,2 @@
+export * from './job.service'
+export * from './jobs.component'
diff --git a/client/src/app/+admin/jobs/shared/job.service.ts b/client/src/app/+admin/system/jobs/job.service.ts
index b96dc3359..b96dc3359 100644
--- a/client/src/app/+admin/jobs/shared/job.service.ts
+++ b/client/src/app/+admin/system/jobs/job.service.ts
diff --git a/client/src/app/+admin/jobs/jobs-list/jobs-list.component.html b/client/src/app/+admin/system/jobs/jobs.component.html
index 7ed1888e2..7ed1888e2 100644
--- a/client/src/app/+admin/jobs/jobs-list/jobs-list.component.html
+++ b/client/src/app/+admin/system/jobs/jobs.component.html
diff --git a/client/src/app/+admin/jobs/jobs-list/jobs-list.component.scss b/client/src/app/+admin/system/jobs/jobs.component.scss
index ab05f1982..ab05f1982 100644
--- a/client/src/app/+admin/jobs/jobs-list/jobs-list.component.scss
+++ b/client/src/app/+admin/system/jobs/jobs.component.scss
diff --git a/client/src/app/+admin/jobs/jobs-list/jobs-list.component.ts b/client/src/app/+admin/system/jobs/jobs.component.ts
index b265e1dd6..ebfb52779 100644
--- a/client/src/app/+admin/jobs/jobs-list/jobs-list.component.ts
+++ b/client/src/app/+admin/system/jobs/jobs.component.ts
@@ -5,15 +5,15 @@ import { SortMeta } from 'primeng/primeng'
 import { Job } from '../../../../../../shared/index'
 import { JobState } from '../../../../../../shared/models'
 import { RestPagination, RestTable } from '../../../shared'
-import { JobService } from '../shared'
+import { JobService } from './job.service'
 import { I18n } from '@ngx-translate/i18n-polyfill'
 
 @Component({
-  selector: 'my-jobs-list',
-  templateUrl: './jobs-list.component.html',
-  styleUrls: [ './jobs-list.component.scss' ]
+  selector: 'my-jobs',
+  templateUrl: './jobs.component.html',
+  styleUrls: [ './jobs.component.scss' ]
 })
-export class JobsListComponent extends RestTable implements OnInit {
+export class JobsComponent extends RestTable implements OnInit {
   private static JOB_STATE_LOCAL_STORAGE_STATE = 'jobs-list-state'
 
   jobState: JobState = 'waiting'
@@ -58,12 +58,12 @@ export class JobsListComponent extends RestTable implements OnInit {
   }
 
   private loadJobState () {
-    const result = peertubeLocalStorage.getItem(JobsListComponent.JOB_STATE_LOCAL_STORAGE_STATE)
+    const result = peertubeLocalStorage.getItem(JobsComponent.JOB_STATE_LOCAL_STORAGE_STATE)
 
     if (result) this.jobState = result as JobState
   }
 
   private saveJobState () {
-    peertubeLocalStorage.setItem(JobsListComponent.JOB_STATE_LOCAL_STORAGE_STATE, this.jobState)
+    peertubeLocalStorage.setItem(JobsComponent.JOB_STATE_LOCAL_STORAGE_STATE, this.jobState)
   }
 }
diff --git a/client/src/app/+admin/system/logs/index.ts b/client/src/app/+admin/system/logs/index.ts
new file mode 100644
index 000000000..7b56d4237
--- /dev/null
+++ b/client/src/app/+admin/system/logs/index.ts
@@ -0,0 +1,2 @@
+export * from './logs.component'
+export * from './logs.service'
diff --git a/client/src/app/+admin/system/logs/log-row.model.ts b/client/src/app/+admin/system/logs/log-row.model.ts
new file mode 100644
index 000000000..9bc7dafdd
--- /dev/null
+++ b/client/src/app/+admin/system/logs/log-row.model.ts
@@ -0,0 +1,21 @@
+import { LogLevel } from '@shared/models/server/log-level.type'
+import omit from 'lodash-es/omit'
+
+export class LogRow {
+  date: Date
+  localeDate: string
+  level: LogLevel
+  message: string
+  meta: string
+
+  constructor (row: any) {
+    this.date = new Date(row.timestamp)
+    this.localeDate = this.date.toLocaleString()
+    this.level = row.level
+    this.message = row.message
+
+    const metaObj = omit(row, 'timestamp', 'level', 'message', 'label')
+
+    if (Object.keys(metaObj).length !== 0) this.meta = JSON.stringify(metaObj, undefined, 2)
+  }
+}
diff --git a/client/src/app/+admin/system/logs/logs.component.html b/client/src/app/+admin/system/logs/logs.component.html
new file mode 100644
index 000000000..45723a655
--- /dev/null
+++ b/client/src/app/+admin/system/logs/logs.component.html
@@ -0,0 +1,31 @@
+<div class="header">
+  <div class="peertube-select-container">
+    <select [(ngModel)]="startDate" (ngModelChange)="refresh()">
+      <option *ngFor="let timeChoice of timeChoices" [value]="timeChoice.id">{{ timeChoice.label }}</option>
+    </select>
+  </div>
+
+  <div class="peertube-select-container">
+    <select [(ngModel)]="level" (ngModelChange)="refresh()">
+      <option *ngFor="let levelChoice of levelChoices" [value]="levelChoice.id">{{ levelChoice.label }}</option>
+    </select>
+  </div>
+
+  <my-button i18n-label label="Refresh" icon="refresh" (click)="refresh()"></my-button>
+</div>
+
+<div class="logs">
+  <div *ngIf="loading">Loading...</div>
+
+  <div #logsElement>
+    <div *ngFor="let log of logs" class="log-row" [ngClass]="{ error: log.level === 'error', warn: log.level === 'warn' }">
+      <span class="log-level">{{ log.level }}</span>
+
+      <span class="log-date">[{{ log.localeDate }}]</span>
+
+      {{ log.message }}
+
+      {{ log.meta }}
+    </div>
+  </div>
+</div>
diff --git a/client/src/app/+admin/system/logs/logs.component.scss b/client/src/app/+admin/system/logs/logs.component.scss
new file mode 100644
index 000000000..7ad2e853c
--- /dev/null
+++ b/client/src/app/+admin/system/logs/logs.component.scss
@@ -0,0 +1,49 @@
+@import '_variables';
+@import '_mixins';
+
+.logs {
+  font-family: monospace;
+  font-size: 13px;
+  max-height: 500px;
+  overflow-y: auto;
+  background: rgba(0, 0, 0, 0.03);
+  padding: 20px;
+
+  .log-row {
+    margin-top: 1px;
+    word-break: break-word;
+
+    &:hover {
+      background: rgba(0, 0, 0, 0.07);
+    }
+  }
+
+  .log-level {
+    font-weight: $font-semibold;
+    margin-right: 5px;
+  }
+
+  .warn {
+    color: $orange-color;
+  }
+
+  .error {
+    color: $red;
+  }
+}
+
+.header {
+  display: flex;
+  justify-content: flex-end;
+  margin-bottom: 10px;
+
+  .peertube-select-container {
+    @include peertube-select-container(150px);
+  }
+
+  my-button,
+  .peertube-select-container {
+    margin-left: 10px;
+  }
+}
+
diff --git a/client/src/app/+admin/system/logs/logs.component.ts b/client/src/app/+admin/system/logs/logs.component.ts
new file mode 100644
index 000000000..1a3508a3b
--- /dev/null
+++ b/client/src/app/+admin/system/logs/logs.component.ts
@@ -0,0 +1,111 @@
+import { Component, ElementRef, OnInit, ViewChild } from '@angular/core'
+import { LogsService } from '@app/+admin/system/logs/logs.service'
+import { Notifier } from '@app/core'
+import { LogRow } from '@app/+admin/system/logs/log-row.model'
+import { I18n } from '@ngx-translate/i18n-polyfill'
+import { LogLevel } from '@shared/models/server/log-level.type'
+
+@Component({
+  templateUrl: './logs.component.html',
+  styleUrls: [ './logs.component.scss' ]
+})
+export class LogsComponent implements OnInit {
+  @ViewChild('logsElement') logsElement: ElementRef<HTMLElement>
+
+  loading = false
+
+  logs: LogRow[] = []
+  timeChoices: { id: string, label: string }[] = []
+  levelChoices: { id: LogLevel, label: string }[] = []
+
+  startDate: string
+  level: LogLevel
+
+  constructor (
+    private logsService: LogsService,
+    private notifier: Notifier,
+    private i18n: I18n
+  ) { }
+
+  ngOnInit (): void {
+    this.buildTimeChoices()
+    this.buildLevelChoices()
+
+    this.load()
+  }
+
+  refresh () {
+    this.logs = []
+    this.load()
+  }
+
+  load () {
+    this.loading = true
+
+    this.logsService.getLogs(this.level, this.startDate)
+        .subscribe(
+          logs => {
+            this.logs = logs
+
+            setTimeout(() => {
+              this.logsElement.nativeElement.scrollIntoView({ block: 'end', inline: 'nearest' })
+            })
+          },
+
+          err => this.notifier.error(err.message),
+
+          () => this.loading = false
+        )
+  }
+
+  buildTimeChoices () {
+    const lastHour = new Date()
+    lastHour.setHours(lastHour.getHours() - 1)
+
+    const lastDay = new Date()
+    lastDay.setDate(lastDay.getDate() - 1)
+
+    const lastWeek = new Date()
+    lastWeek.setDate(lastWeek.getDate() - 7)
+
+    this.timeChoices = [
+      {
+        id: lastWeek.toISOString(),
+        label: this.i18n('Last week')
+      },
+      {
+        id: lastDay.toISOString(),
+        label: this.i18n('Last day')
+      },
+      {
+        id: lastHour.toISOString(),
+        label: this.i18n('Last hour')
+      }
+    ]
+
+    this.startDate = lastHour.toISOString()
+  }
+
+  buildLevelChoices () {
+    this.levelChoices = [
+      {
+        id: 'debug',
+        label: this.i18n('Debug')
+      },
+      {
+        id: 'info',
+        label: this.i18n('Info')
+      },
+      {
+        id: 'warn',
+        label: this.i18n('Warning')
+      },
+      {
+        id: 'error',
+        label: this.i18n('Error')
+      }
+    ]
+
+    this.level = 'warn'
+  }
+}
diff --git a/client/src/app/+admin/system/logs/logs.service.ts b/client/src/app/+admin/system/logs/logs.service.ts
new file mode 100644
index 000000000..24b9cb6d1
--- /dev/null
+++ b/client/src/app/+admin/system/logs/logs.service.ts
@@ -0,0 +1,33 @@
+import { catchError, map } from 'rxjs/operators'
+import { HttpClient, HttpParams } from '@angular/common/http'
+import { Injectable } from '@angular/core'
+import { Observable } from 'rxjs'
+import { environment } from '../../../../environments/environment'
+import { RestExtractor, RestService } from '../../../shared'
+import { LogRow } from '@app/+admin/system/logs/log-row.model'
+import { LogLevel } from '@shared/models/server/log-level.type'
+
+@Injectable()
+export class LogsService {
+  private static BASE_LOG_URL = environment.apiUrl + '/api/v1/server/logs'
+
+  constructor (
+    private authHttp: HttpClient,
+    private restService: RestService,
+    private restExtractor: RestExtractor
+  ) {}
+
+  getLogs (level: LogLevel, startDate: string, endDate?: string): Observable<any[]> {
+    let params = new HttpParams()
+    params = params.append('startDate', startDate)
+    params = params.append('level', level)
+
+    if (endDate) params.append('endDate', endDate)
+
+    return this.authHttp.get<any[]>(LogsService.BASE_LOG_URL, { params })
+               .pipe(
+                 map(rows => rows.map(r => new LogRow(r))),
+                 catchError(err => this.restExtractor.handleError(err))
+               )
+  }
+}
diff --git a/client/src/app/+admin/system/system.component.html b/client/src/app/+admin/system/system.component.html
new file mode 100644
index 000000000..7c4278d35
--- /dev/null
+++ b/client/src/app/+admin/system/system.component.html
@@ -0,0 +1,13 @@
+<div class="admin-sub-header">
+  <div i18n class="form-sub-title">System</div>
+
+  <div class="admin-sub-nav">
+    <a *ngIf="hasJobsRight()" i18n routerLink="jobs" routerLinkActive="active">Jobs</a>
+
+    <a *ngIf="hasLogsRight()" i18n routerLink="logs" routerLinkActive="active">Logs</a>
+
+    <a *ngIf="hasDebugRight()" i18n routerLink="debug" routerLinkActive="active">Debug</a>
+  </div>
+</div>
+
+<router-outlet></router-outlet>
diff --git a/client/src/app/+admin/system/system.component.scss b/client/src/app/+admin/system/system.component.scss
new file mode 100644
index 000000000..766d7853b
--- /dev/null
+++ b/client/src/app/+admin/system/system.component.scss
@@ -0,0 +1,4 @@
+.form-sub-title {
+  flex-grow: 0;
+  margin-right: 30px;
+}
diff --git a/client/src/app/+admin/system/system.component.ts b/client/src/app/+admin/system/system.component.ts
new file mode 100644
index 000000000..b544c2a97
--- /dev/null
+++ b/client/src/app/+admin/system/system.component.ts
@@ -0,0 +1,24 @@
+import { Component } from '@angular/core'
+import { UserRight } from '@shared/models'
+import { AuthService } from '@app/core'
+
+@Component({
+  templateUrl: './system.component.html',
+  styleUrls: [ './system.component.scss' ]
+})
+export class SystemComponent {
+
+  constructor (private auth: AuthService) {}
+
+  hasLogsRight () {
+    return this.auth.getUser().hasRight(UserRight.MANAGE_LOGS)
+  }
+
+  hasJobsRight () {
+    return this.auth.getUser().hasRight(UserRight.MANAGE_JOBS)
+  }
+
+  hasDebugRight () {
+    return this.auth.getUser().hasRight(UserRight.MANAGE_DEBUG)
+  }
+}
diff --git a/client/src/app/+admin/system/system.routes.ts b/client/src/app/+admin/system/system.routes.ts
new file mode 100644
index 000000000..2d851794d
--- /dev/null
+++ b/client/src/app/+admin/system/system.routes.ts
@@ -0,0 +1,56 @@
+import { Routes } from '@angular/router'
+import { UserRightGuard } from '../../core'
+import { UserRight } from '../../../../../shared'
+import { JobsComponent } from '@app/+admin/system/jobs/jobs.component'
+import { LogsComponent } from '@app/+admin/system/logs'
+import { SystemComponent } from '@app/+admin/system/system.component'
+import { DebugComponent } from '@app/+admin/system/debug'
+
+export const SystemRoutes: Routes = [
+  {
+    path: 'system',
+    component: SystemComponent,
+    data: {
+    },
+    children: [
+      {
+        path: '',
+        redirectTo: 'jobs',
+        pathMatch: 'full'
+      },
+      {
+        path: 'jobs',
+        canActivate: [ UserRightGuard ],
+        component: JobsComponent,
+        data: {
+          meta: {
+            userRight: UserRight.MANAGE_JOBS,
+            title: 'Jobs'
+          }
+        }
+      },
+      {
+        path: 'logs',
+        canActivate: [ UserRightGuard ],
+        component: LogsComponent,
+        data: {
+          meta: {
+            userRight: UserRight.MANAGE_LOGS,
+            title: 'Logs'
+          }
+        }
+      },
+      {
+        path: 'debug',
+        canActivate: [ UserRightGuard ],
+        component: DebugComponent,
+        data: {
+          meta: {
+            userRight: UserRight.MANAGE_DEBUG,
+            title: 'Debug'
+          }
+        }
+      }
+    ]
+  }
+]
diff --git a/client/src/app/+admin/users/user-edit/index.ts b/client/src/app/+admin/users/user-edit/index.ts
index fd80a02e0..ec734ef92 100644
--- a/client/src/app/+admin/users/user-edit/index.ts
+++ b/client/src/app/+admin/users/user-edit/index.ts
@@ -1,2 +1,3 @@
 export * from './user-create.component'
 export * from './user-update.component'
+export * from './user-password.component'
diff --git a/client/src/app/+admin/users/user-edit/user-create.component.ts b/client/src/app/+admin/users/user-edit/user-create.component.ts
index 137ecfcbd..9a6801806 100644
--- a/client/src/app/+admin/users/user-edit/user-create.component.ts
+++ b/client/src/app/+admin/users/user-edit/user-create.component.ts
@@ -8,6 +8,7 @@ import { FormValidatorService } from '@app/shared/forms/form-validators/form-val
 import { UserValidatorsService } from '@app/shared/forms/form-validators/user-validators.service'
 import { ConfigService } from '@app/+admin/config/shared/config.service'
 import { UserService } from '@app/shared'
+import { UserAdminFlag } from '@shared/models/users/user-flag.model'
 
 @Component({
   selector: 'my-user-create',
@@ -45,7 +46,8 @@ export class UserCreateComponent extends UserEdit implements OnInit {
       password: this.userValidatorsService.USER_PASSWORD,
       role: this.userValidatorsService.USER_ROLE,
       videoQuota: this.userValidatorsService.USER_VIDEO_QUOTA,
-      videoQuotaDaily: this.userValidatorsService.USER_VIDEO_QUOTA_DAILY
+      videoQuotaDaily: this.userValidatorsService.USER_VIDEO_QUOTA_DAILY,
+      byPassAutoBlacklist: null
     }, defaultValues)
   }
 
@@ -54,8 +56,11 @@ export class UserCreateComponent extends UserEdit implements OnInit {
 
     const userCreate: UserCreate = this.form.value
 
+    userCreate.adminFlags = this.buildAdminFlags(this.form.value)
+
     // A select in HTML is always mapped as a string, we convert it to number
     userCreate.videoQuota = parseInt(this.form.value['videoQuota'], 10)
+    userCreate.videoQuotaDaily = parseInt(this.form.value['videoQuotaDaily'], 10)
 
     this.userService.addUser(userCreate).subscribe(
       () => {
diff --git a/client/src/app/+admin/users/user-edit/user-edit.component.html b/client/src/app/+admin/users/user-edit/user-edit.component.html
index 56cf7d17d..400bac5d4 100644
--- a/client/src/app/+admin/users/user-edit/user-edit.component.html
+++ b/client/src/app/+admin/users/user-edit/user-edit.component.html
@@ -79,5 +79,26 @@
     </div>
   </div>
 
+  <div class="form-group">
+    <my-peertube-checkbox
+      inputName="byPassAutoBlacklist" formControlName="byPassAutoBlacklist"
+      i18n-labelText labelText="Bypass video auto blacklist"
+    ></my-peertube-checkbox>
+  </div>
+
   <input type="submit" value="{{ getFormButtonTitle() }}" [disabled]="!form.valid">
 </form>
+
+<div *ngIf="!isCreation()" class="danger-zone">
+  <div class="account-title" i18n>Danger Zone</div>
+
+  <div class="form-group reset-password-email">
+    <label i18n>Send a link to reset the password by email to the user</label>
+    <button (click)="resetPassword()" i18n>Ask for new password</button>
+  </div>
+
+  <div class="form-group">
+    <label i18n>Manually set the user password</label>
+    <my-user-password [userId]="userId"></my-user-password>
+  </div>
+</div>
diff --git a/client/src/app/+admin/users/user-edit/user-edit.component.scss b/client/src/app/+admin/users/user-edit/user-edit.component.scss
index 6675f65cc..c1cc4ca45 100644
--- a/client/src/app/+admin/users/user-edit/user-edit.component.scss
+++ b/client/src/app/+admin/users/user-edit/user-edit.component.scss
@@ -14,7 +14,7 @@ input:not([type=submit]) {
   @include peertube-select-container(340px);
 }
 
-input[type=submit] {
+input[type=submit], button {
   @include peertube-button;
   @include orange-button;
 
@@ -25,3 +25,23 @@ input[type=submit] {
   margin-top: 5px;
   font-size: 11px;
 }
+
+.account-title {
+  @include in-content-small-title;
+
+  margin-top: 55px;
+  margin-bottom: 30px;
+}
+
+.danger-zone {
+  .reset-password-email {
+    margin-bottom: 30px;
+    padding-bottom: 30px;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+
+    button {
+      display: block;
+      margin-top: 0;
+    }
+  }
+}
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 0b3511e8e..adce1b2d4 100644
--- a/client/src/app/+admin/users/user-edit/user-edit.ts
+++ b/client/src/app/+admin/users/user-edit/user-edit.ts
@@ -2,12 +2,14 @@ import { ServerService } from '../../../core'
 import { FormReactive } from '../../../shared'
 import { USER_ROLE_LABELS, VideoResolution } from '../../../../../../shared'
 import { ConfigService } from '@app/+admin/config/shared/config.service'
+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] }))
   username: string
+  userId: number
 
   protected abstract serverService: ServerService
   protected abstract configService: ConfigService
@@ -22,7 +24,9 @@ export abstract class UserEdit extends FormReactive {
   }
 
   computeQuotaWithTranscoding () {
-    const resolutions = this.serverService.getConfig().transcoding.enabledResolutions
+    const transcodingConfig = this.serverService.getConfig().transcoding
+
+    const resolutions = transcodingConfig.enabledResolutions
     const higherResolution = VideoResolution.H_1080P
     let multiplier = 0
 
@@ -30,9 +34,19 @@ export abstract class UserEdit extends FormReactive {
       multiplier += resolution / higherResolution
     }
 
+    if (transcodingConfig.hls.enabled) multiplier *= 2
+
     return multiplier * parseInt(this.form.value['videoQuota'], 10)
   }
 
+  resetPassword () {
+    return
+  }
+
+  protected buildAdminFlags (formValue: any) {
+    return formValue.byPassAutoBlacklist ? UserAdminFlag.BY_PASS_VIDEO_AUTO_BLACKLIST : UserAdminFlag.NONE
+  }
+
   protected buildQuotaOptions () {
     // These are used by a HTML select, so convert key into strings
     this.videoQuotaOptions = this.configService
diff --git a/client/src/app/+admin/users/user-edit/user-password.component.html b/client/src/app/+admin/users/user-edit/user-password.component.html
new file mode 100644
index 000000000..a1e1f6216
--- /dev/null
+++ b/client/src/app/+admin/users/user-edit/user-password.component.html
@@ -0,0 +1,21 @@
+<form role="form" (ngSubmit)="formValidated()" [formGroup]="form">
+  <div class="form-group">
+
+    <div class="input-group">
+      <input id="password" [attr.type]="showPassword ? 'text' : 'password'"
+        formControlName="password" [ngClass]="{ 'input-error': formErrors['password'] }"
+      >
+      <div class="input-group-append">
+        <button class="btn btn-sm btn-outline-secondary" (click)="togglePasswordVisibility()" type="button">
+          <ng-container *ngIf="!showPassword" i18n>Show</ng-container>
+          <ng-container *ngIf="!!showPassword" i18n>Hide</ng-container>
+        </button>
+      </div>
+    </div>
+    <div *ngIf="formErrors.password" class="form-error">
+      {{ formErrors.password }}
+    </div>
+  </div>
+
+  <input type="submit" value="{{ getFormButtonTitle() }}" [disabled]="!form.valid">
+</form>
diff --git a/client/src/app/+admin/users/user-edit/user-password.component.scss b/client/src/app/+admin/users/user-edit/user-password.component.scss
new file mode 100644
index 000000000..217d585af
--- /dev/null
+++ b/client/src/app/+admin/users/user-edit/user-password.component.scss
@@ -0,0 +1,22 @@
+@import '_variables';
+@import '_mixins';
+
+input:not([type=submit]):not([type=checkbox]) {
+  @include peertube-input-text(340px);
+
+  display: block;
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+  border-right: none;
+}
+
+input[type=submit] {
+  @include peertube-button;
+  @include orange-button;
+
+  margin-top: 10px;
+}
+
+.input-group-append {
+  height: 30px;
+}
diff --git a/client/src/app/+admin/users/user-edit/user-password.component.ts b/client/src/app/+admin/users/user-edit/user-password.component.ts
new file mode 100644
index 000000000..5b3040440
--- /dev/null
+++ b/client/src/app/+admin/users/user-edit/user-password.component.ts
@@ -0,0 +1,64 @@
+import { Component, Input, OnInit } from '@angular/core'
+import { ActivatedRoute, Router } from '@angular/router'
+import { UserService } from '@app/shared/users/user.service'
+import { Notifier } from '../../../core'
+import { User, UserUpdate } 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 { FormReactive } from '../../../shared'
+
+@Component({
+  selector: 'my-user-password',
+  templateUrl: './user-password.component.html',
+  styleUrls: [ './user-password.component.scss' ]
+})
+export class UserPasswordComponent extends FormReactive implements OnInit {
+  error: string
+  username: string
+  showPassword = false
+
+  @Input() userId: number
+
+  constructor (
+    protected formValidatorService: FormValidatorService,
+    private userValidatorsService: UserValidatorsService,
+    private route: ActivatedRoute,
+    private router: Router,
+    private notifier: Notifier,
+    private userService: UserService,
+    private i18n: I18n
+  ) {
+    super()
+  }
+
+  ngOnInit () {
+    this.buildForm({
+      password: this.userValidatorsService.USER_PASSWORD
+    })
+  }
+
+  formValidated () {
+    this.error = undefined
+
+    const userUpdate: UserUpdate = this.form.value
+
+    this.userService.updateUser(this.userId, userUpdate).subscribe(
+      () => {
+        this.notifier.success(
+          this.i18n('Password changed for user {{username}}.', { username: this.username })
+        )
+      },
+
+      err => this.error = err.message
+    )
+  }
+
+  togglePasswordVisibility () {
+    this.showPassword = !this.showPassword
+  }
+
+  getFormButtonTitle () {
+    return this.i18n('Update user password')
+  }
+}
diff --git a/client/src/app/+admin/users/user-edit/user-update.component.ts b/client/src/app/+admin/users/user-edit/user-update.component.ts
index 61e641823..04b2935f4 100644
--- a/client/src/app/+admin/users/user-edit/user-update.component.ts
+++ b/client/src/app/+admin/users/user-edit/user-update.component.ts
@@ -10,6 +10,7 @@ import { FormValidatorService } from '@app/shared/forms/form-validators/form-val
 import { UserValidatorsService } from '@app/shared/forms/form-validators/user-validators.service'
 import { ConfigService } from '@app/+admin/config/shared/config.service'
 import { UserService } from '@app/shared'
+import { UserAdminFlag } from '@shared/models/users/user-flag.model'
 
 @Component({
   selector: 'my-user-update',
@@ -19,6 +20,7 @@ import { UserService } from '@app/shared'
 export class UserUpdateComponent extends UserEdit implements OnInit, OnDestroy {
   error: string
   userId: number
+  userEmail: string
   username: string
 
   private paramsSub: Subscription
@@ -45,7 +47,8 @@ export class UserUpdateComponent extends UserEdit implements OnInit, OnDestroy {
       email: this.userValidatorsService.USER_EMAIL,
       role: this.userValidatorsService.USER_ROLE,
       videoQuota: this.userValidatorsService.USER_VIDEO_QUOTA,
-      videoQuotaDaily: this.userValidatorsService.USER_VIDEO_QUOTA_DAILY
+      videoQuotaDaily: this.userValidatorsService.USER_VIDEO_QUOTA_DAILY,
+      byPassAutoBlacklist: null
     }, defaultValues)
 
     this.paramsSub = this.route.params.subscribe(routeParams => {
@@ -66,6 +69,7 @@ export class UserUpdateComponent extends UserEdit implements OnInit, OnDestroy {
     this.error = undefined
 
     const userUpdate: UserUpdate = this.form.value
+    userUpdate.adminFlags = this.buildAdminFlags(this.form.value)
 
     // A select in HTML is always mapped as a string, we convert it to number
     userUpdate.videoQuota = parseInt(this.form.value['videoQuota'], 10)
@@ -89,15 +93,29 @@ export class UserUpdateComponent extends UserEdit implements OnInit, OnDestroy {
     return this.i18n('Update user')
   }
 
+  resetPassword () {
+    this.userService.askResetPassword(this.userEmail).subscribe(
+      () => {
+        this.notifier.success(
+          this.i18n('An email asking for password reset has been sent to {{username}}.', { username: this.username })
+        )
+      },
+
+      err => this.error = err.message
+    )
+  }
+
   private onUserFetched (userJson: User) {
     this.userId = userJson.id
     this.username = userJson.username
+    this.userEmail = userJson.email
 
     this.form.patchValue({
       email: userJson.email,
       role: userJson.role,
       videoQuota: userJson.videoQuota,
-      videoQuotaDaily: userJson.videoQuotaDaily
+      videoQuotaDaily: userJson.videoQuotaDaily,
+      byPassAutoBlacklist: userJson.adminFlags & UserAdminFlag.BY_PASS_VIDEO_AUTO_BLACKLIST
     })
   }
 }
diff --git a/client/src/app/+my-account/my-account-history/my-account-history.component.html b/client/src/app/+my-account/my-account-history/my-account-history.component.html
index d42af37d4..6e274f689 100644
--- a/client/src/app/+my-account/my-account-history/my-account-history.component.html
+++ b/client/src/app/+my-account/my-account-history/my-account-history.component.html
@@ -4,24 +4,19 @@
     <label i18n>History enabled</label>
   </div>
 
-  <div class="delete-history">
-    <button (click)="deleteHistory()" i18n>Delete history</button>
-  </div>
+  <button class="delete-history" (click)="deleteHistory()" i18n>
+    <my-global-icon iconName="delete"></my-global-icon>
+    Delete history
+  </button>
 </div>
 
 
 <div class="no-history" i18n *ngIf="pagination.totalItems === 0">You don't have videos history yet.</div>
 
-<div myInfiniteScroller (nearOfBottom)="onNearOfBottom()" class="videos" #videosElement>
-  <div *ngFor="let videos of videoPages;" class="videos-page">
-    <div class="video" *ngFor="let video of videos">
-      <my-video-thumbnail [video]="video"></my-video-thumbnail>
-
-      <div class="video-info">
-        <a tabindex="-1" class="video-info-name" [routerLink]="['/videos/watch', video.uuid]" [attr.title]="video.name">{{ video.name }}</a>
-        <span i18n class="video-info-date-views">{{ video.views | myNumberFormatter }} views</span>
-        <a tabindex="-1" class="video-info-account" [routerLink]="[ '/accounts', video.byAccount ]">{{ video.byAccount }}</a>
-      </div>
-    </div>
+<div myInfiniteScroller (nearOfBottom)="onNearOfBottom()" [autoInit]="true" class="videos">
+  <div class="video" *ngFor="let video of videos">
+    <my-video-miniature
+      [video]="video" [displayAsRow]="true"
+      (videoRemoved)="removeVideoFromArray(video)" (videoBlacklisted)="removeVideoFromArray(video)"></my-video-miniature>
   </div>
 </div>
diff --git a/client/src/app/+my-account/my-account-history/my-account-history.component.scss b/client/src/app/+my-account/my-account-history/my-account-history.component.scss
index e7c6863f1..af6395fb1 100644
--- a/client/src/app/+my-account/my-account-history/my-account-history.component.scss
+++ b/client/src/app/+my-account/my-account-history/my-account-history.component.scss
@@ -23,77 +23,18 @@
   }
 
   .delete-history {
-    font-size: 15px;
+    @include peertube-button;
+    @include grey-button;
+    @include button-with-icon;
 
-    button {
-      @include peertube-button;
-      @include grey-button;
-    }
+    font-size: 15px;
   }
 }
 
 .video {
   @include row-blocks;
 
-  my-video-thumbnail {
-    margin-right: 10px;
-  }
-
-  .video-info {
+  .my-video-miniature {
     flex-grow: 1;
-
-    .video-info-name {
-      @include disable-default-a-behaviour;
-
-      color: var(--mainForegroundColor);
-      display: block;
-      width: fit-content;
-      font-size: 18px;
-      font-weight: $font-semibold;
-    }
-
-    .video-info-date-views {
-      font-size: 14px;
-    }
-
-    .video-info-account {
-      @include disable-default-a-behaviour;
-
-      display: block;
-      width: fit-content;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      font-size: 14px;
-      color: $grey-foreground-color;
-
-      &:hover {
-        color: $grey-foreground-hover-color;
-      }
-    }
-  }
-}
-
-@media screen and (max-width: $small-view) {
-  .video {
-    flex-direction: column;
-    height: auto;
-    text-align: center;
-
-    .video-info-name {
-      margin: auto;
-    }
-
-    input[type=checkbox] {
-      display: none;
-    }
-
-    my-video-thumbnail {
-      margin-right: 0;
-    }
-
-    .video-buttons {
-      margin-top: 10px;
-    }
   }
 }
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 394091bad..73340d21a 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
@@ -1,6 +1,5 @@
 import { Component, OnDestroy, OnInit } from '@angular/core'
 import { ActivatedRoute, Router } from '@angular/router'
-import { Location } from '@angular/common'
 import { immutableAssign } from '@app/shared/misc/utils'
 import { ComponentPagination } from '@app/shared/rest/component-pagination.model'
 import { AuthService } from '../../core/auth'
@@ -11,7 +10,7 @@ import { I18n } from '@ngx-translate/i18n-polyfill'
 import { ScreenService } from '@app/shared/misc/screen.service'
 import { UserHistoryService } from '@app/shared/users/user-history.service'
 import { UserService } from '@app/shared'
-import { Notifier } from '@app/core'
+import { Notifier, ServerService } from '@app/core'
 
 @Component({
   selector: 'my-account-history',
@@ -20,7 +19,6 @@ import { Notifier } from '@app/core'
 })
 export class MyAccountHistoryComponent extends AbstractVideoList implements OnInit, OnDestroy {
   titlePage: string
-  currentRoute = '/my-account/history/videos'
   pagination: ComponentPagination = {
     currentPage: 1,
     itemsPerPage: 5,
@@ -28,16 +26,13 @@ export class MyAccountHistoryComponent extends AbstractVideoList implements OnIn
   }
   videosHistoryEnabled: boolean
 
-  protected baseVideoWidth = -1
-  protected baseVideoHeight = 155
-
   constructor (
     protected router: Router,
+    protected serverService: ServerService,
     protected route: ActivatedRoute,
     protected authService: AuthService,
     protected userService: UserService,
     protected notifier: Notifier,
-    protected location: Location,
     protected screenService: ScreenService,
     protected i18n: I18n,
     private confirmService: ConfirmService,
diff --git a/client/src/app/+my-account/my-account-ownership/my-account-ownership.component.html b/client/src/app/+my-account/my-account-ownership/my-account-ownership.component.html
index 5709e9f54..c5fd3ccb9 100644
--- a/client/src/app/+my-account/my-account-ownership/my-account-ownership.component.html
+++ b/client/src/app/+my-account/my-account-ownership/my-account-ownership.component.html
@@ -30,8 +30,7 @@
         </a>
       </td>
       <td>
-        <a [href]="videoChangeOwnership.video.url" i18n-title title="Go to the video" target="_blank"
-           rel="noopener noreferrer">
+        <a [href]="videoChangeOwnership.video.url" i18n-title title="Go to the video" target="_blank" rel="noopener noreferrer">
           {{ videoChangeOwnership.video.name }}
         </a>
       </td>
@@ -39,16 +38,12 @@
       <td i18n>{{ videoChangeOwnership.status }}</td>
       <td class="action-cell">
         <ng-container *ngIf="videoChangeOwnership.status === 'WAITING'">
-          <my-button i18n label="Accept"
-                     icon="tick"
-                     (click)="openAcceptModal(videoChangeOwnership)"></my-button>
-          <my-button i18n label="Refuse"
-                     icon="cross"
-                     (click)="refuse(videoChangeOwnership)">Refuse</my-button>
+          <my-button i18n-label label="Accept" icon="tick" (click)="openAcceptModal(videoChangeOwnership)"></my-button>
+          <my-button i18n-label label="Refuse" icon="cross" (click)="refuse(videoChangeOwnership)"></my-button>
         </ng-container>
       </td>
     </tr>
   </ng-template>
 </p-table>
 
-<my-account-accept-ownership #myAccountAcceptOwnershipComponent (accepted)="accepted()"></my-account-accept-ownership>
\ No newline at end of file
+<my-account-accept-ownership #myAccountAcceptOwnershipComponent (accepted)="accepted()"></my-account-accept-ownership>
diff --git a/client/src/app/+my-account/my-account-routing.module.ts b/client/src/app/+my-account/my-account-routing.module.ts
index 9996218ca..018d6f996 100644
--- a/client/src/app/+my-account/my-account-routing.module.ts
+++ b/client/src/app/+my-account/my-account-routing.module.ts
@@ -15,6 +15,16 @@ import { MyAccountBlocklistComponent } from '@app/+my-account/my-account-blockli
 import { MyAccountServerBlocklistComponent } from '@app/+my-account/my-account-blocklist/my-account-server-blocklist.component'
 import { MyAccountHistoryComponent } from '@app/+my-account/my-account-history/my-account-history.component'
 import { MyAccountNotificationsComponent } from '@app/+my-account/my-account-notifications/my-account-notifications.component'
+import { MyAccountVideoPlaylistsComponent } from '@app/+my-account/my-account-video-playlists/my-account-video-playlists.component'
+import {
+  MyAccountVideoPlaylistCreateComponent
+} from '@app/+my-account/my-account-video-playlists/my-account-video-playlist-create.component'
+import {
+  MyAccountVideoPlaylistUpdateComponent
+} from '@app/+my-account/my-account-video-playlists/my-account-video-playlist-update.component'
+import {
+  MyAccountVideoPlaylistElementsComponent
+} from '@app/+my-account/my-account-video-playlists/my-account-video-playlist-elements.component'
 
 const myAccountRoutes: Routes = [
   {
@@ -36,6 +46,7 @@ const myAccountRoutes: Routes = [
           }
         }
       },
+
       {
         path: 'video-channels',
         component: MyAccountVideoChannelsComponent,
@@ -63,12 +74,54 @@ const myAccountRoutes: Routes = [
           }
         }
       },
+
+      {
+        path: 'video-playlists',
+        component: MyAccountVideoPlaylistsComponent,
+        data: {
+          meta: {
+            title: 'Account playlists'
+          }
+        }
+      },
+      {
+        path: 'video-playlists/create',
+        component: MyAccountVideoPlaylistCreateComponent,
+        data: {
+          meta: {
+            title: 'Create new playlist'
+          }
+        }
+      },
+      {
+        path: 'video-playlists/:videoPlaylistId',
+        component: MyAccountVideoPlaylistElementsComponent,
+        data: {
+          meta: {
+            title: 'Playlist elements'
+          }
+        }
+      },
+      {
+        path: 'video-playlists/update/:videoPlaylistId',
+        component: MyAccountVideoPlaylistUpdateComponent,
+        data: {
+          meta: {
+            title: 'Update playlist'
+          }
+        }
+      },
+
       {
         path: 'videos',
         component: MyAccountVideosComponent,
         data: {
           meta: {
             title: 'Account videos'
+          },
+          reuse: {
+            enabled: true,
+            key: 'my-account-videos-list'
           }
         }
       },
@@ -123,6 +176,10 @@ const myAccountRoutes: Routes = [
         data: {
           meta: {
             title: 'Videos history'
+          },
+          reuse: {
+            enabled: true,
+            key: 'my-videos-history-list'
           }
         }
       },
diff --git a/client/src/app/+my-account/my-account-settings/my-account-notification-preferences/my-account-notification-preferences.component.html b/client/src/app/+my-account/my-account-settings/my-account-notification-preferences/my-account-notification-preferences.component.html
index 59422d682..93e294a96 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-notification-preferences/my-account-notification-preferences.component.html
+++ b/client/src/app/+my-account/my-account-settings/my-account-notification-preferences/my-account-notification-preferences.component.html
@@ -4,8 +4,8 @@
   <div i18n *ngIf="emailEnabled">Email</div>
 </div>
 
-<div class="custom-row" *ngFor="let notificationType of notificationSettingKeys">
-  <ng-container *ngIf="hasUserRight(notificationType)">
+<ng-container *ngFor="let notificationType of notificationSettingKeys">
+  <div class="custom-row" *ngIf="hasUserRight(notificationType)">
     <div>{{ labelNotifications[notificationType] }}</div>
 
     <div>
@@ -15,5 +15,5 @@
     <div *ngIf="emailEnabled">
       <p-inputSwitch [(ngModel)]="emailNotifications[notificationType]" (onChange)="updateEmailSetting(notificationType, $event.checked)"></p-inputSwitch>
     </div>
-  </ng-container>
-</div>
+  </div>
+</ng-container>
diff --git a/client/src/app/+my-account/my-account-settings/my-account-notification-preferences/my-account-notification-preferences.component.scss b/client/src/app/+my-account/my-account-settings/my-account-notification-preferences/my-account-notification-preferences.component.scss
index 6feb16ab1..7cd5c3b46 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-notification-preferences/my-account-notification-preferences.component.scss
+++ b/client/src/app/+my-account/my-account-settings/my-account-notification-preferences/my-account-notification-preferences.component.scss
@@ -4,7 +4,7 @@
 .custom-row {
   display: flex;
   align-items: center;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.10);
+  border-bottom: 1px solid $separator-border-color;
 
   &:first-child {
     font-size: 16px;
@@ -16,6 +16,14 @@
 
   & > div {
     width: 350px;
+
+    @media screen and (max-width: $small-view) {
+      width: auto;
+
+      &:first-child {
+        flex-grow: 1;
+      }
+    }
   }
 
   & > div {
diff --git a/client/src/app/+my-account/my-account-settings/my-account-notification-preferences/my-account-notification-preferences.component.ts b/client/src/app/+my-account/my-account-settings/my-account-notification-preferences/my-account-notification-preferences.component.ts
index 519bdfab4..34febc457 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-notification-preferences/my-account-notification-preferences.component.ts
+++ b/client/src/app/+my-account/my-account-settings/my-account-notification-preferences/my-account-notification-preferences.component.ts
@@ -31,22 +31,27 @@ export class MyAccountNotificationPreferencesComponent implements OnInit {
     private serverService: ServerService,
     private notifier: Notifier
   ) {
+
     this.labelNotifications = {
       newVideoFromSubscription: this.i18n('New video from your subscriptions'),
       newCommentOnMyVideo: this.i18n('New comment on your video'),
-      videoAbuseAsModerator: this.i18n('New video abuse on local video'),
+      videoAbuseAsModerator: this.i18n('New video abuse'),
+      videoAutoBlacklistAsModerator: this.i18n('Video auto-blacklisted waiting review'),
       blacklistOnMyVideo: this.i18n('One of your video is blacklisted/unblacklisted'),
       myVideoPublished: this.i18n('Video published (after transcoding/scheduled update)'),
       myVideoImportFinished: this.i18n('Video import finished'),
       newUserRegistration: this.i18n('A new user registered on your instance'),
       newFollow: this.i18n('You or your channel(s) has a new follower'),
-      commentMention: this.i18n('Someone mentioned you in video comments')
+      commentMention: this.i18n('Someone mentioned you in video comments'),
+      newInstanceFollower: this.i18n('Your instance has a new follower')
     }
     this.notificationSettingKeys = Object.keys(this.labelNotifications) as (keyof UserNotificationSetting)[]
 
     this.rightNotifications = {
       videoAbuseAsModerator: UserRight.MANAGE_VIDEO_ABUSES,
-      newUserRegistration: UserRight.MANAGE_USERS
+      videoAutoBlacklistAsModerator: UserRight.MANAGE_VIDEO_BLACKLIST,
+      newUserRegistration: UserRight.MANAGE_USERS,
+      newInstanceFollower: UserRight.MANAGE_SERVER_FOLLOW
     }
 
     this.emailEnabled = this.serverService.getConfig().email.enabled
diff --git a/client/src/app/+my-account/my-account-subscriptions/my-account-subscriptions.component.ts b/client/src/app/+my-account/my-account-subscriptions/my-account-subscriptions.component.ts
index 9d2dccdf0..6ce22989b 100644
--- a/client/src/app/+my-account/my-account-subscriptions/my-account-subscriptions.component.ts
+++ b/client/src/app/+my-account/my-account-subscriptions/my-account-subscriptions.component.ts
@@ -1,7 +1,6 @@
 import { Component, OnInit } from '@angular/core'
 import { Notifier } from '@app/core'
 import { VideoChannel } from '@app/shared/video-channel/video-channel.model'
-import { I18n } from '@ngx-translate/i18n-polyfill'
 import { UserSubscriptionService } from '@app/shared/user-subscription'
 import { ComponentPagination } from '@app/shared/rest/component-pagination.model'
 
@@ -21,8 +20,7 @@ export class MyAccountSubscriptionsComponent implements OnInit {
 
   constructor (
     private userSubscriptionService: UserSubscriptionService,
-    private notifier: Notifier,
-    private i18n: I18n
+    private notifier: Notifier
   ) {}
 
   ngOnInit () {
diff --git a/client/src/app/+my-account/my-account-video-channels/my-account-video-channels.component.html b/client/src/app/+my-account/my-account-video-channels/my-account-video-channels.component.html
index 51db2e75d..11e87ba79 100644
--- a/client/src/app/+my-account/my-account-video-channels/my-account-video-channels.component.html
+++ b/client/src/app/+my-account/my-account-video-channels/my-account-video-channels.component.html
@@ -1,7 +1,7 @@
 <div class="video-channels-header">
   <a class="create-button" routerLink="create">
     <my-global-icon iconName="add"></my-global-icon>
-    <ng-container i18n>Create another video channel</ng-container>
+    <ng-container i18n>Create a new video channel</ng-container>
   </a>
 </div>
 
diff --git a/client/src/app/+my-account/my-account-video-channels/my-account-video-channels.component.ts b/client/src/app/+my-account/my-account-video-channels/my-account-video-channels.component.ts
index da2c5bcd3..3b01b6c9f 100644
--- a/client/src/app/+my-account/my-account-video-channels/my-account-video-channels.component.ts
+++ b/client/src/app/+my-account/my-account-video-channels/my-account-video-channels.component.ts
@@ -35,8 +35,8 @@ export class MyAccountVideoChannelsComponent implements OnInit {
   async deleteVideoChannel (videoChannel: VideoChannel) {
     const res = await this.confirmService.confirmWithInput(
       this.i18n(
-        'Do you really want to delete {{channelDisplayName}}? It will delete all videos uploaded in this channel, ' +
-        'and you will not be able to create another channel with the same name ({{channelName}})!',
+        // tslint:disable
+        'Do you really want to delete {{channelDisplayName}}? It will delete all videos uploaded in this channel, and you will not be able to create another channel with the same name ({{channelName}})!',
         { channelDisplayName: videoChannel.displayName, channelName: videoChannel.name }
       ),
       this.i18n(
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
new file mode 100644
index 000000000..87a10961f
--- /dev/null
+++ b/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-create.component.ts
@@ -0,0 +1,93 @@
+import { Component, OnInit } from '@angular/core'
+import { Router } from '@angular/router'
+import { AuthService, Notifier, ServerService } from '@app/core'
+import { MyAccountVideoPlaylistEdit } from './my-account-video-playlist-edit'
+import { I18n } from '@ngx-translate/i18n-polyfill'
+import { FormValidatorService } from '@app/shared/forms/form-validators/form-validator.service'
+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'
+
+@Component({
+  selector: 'my-account-video-playlist-create',
+  templateUrl: './my-account-video-playlist-edit.component.html',
+  styleUrls: [ './my-account-video-playlist-edit.component.scss' ]
+})
+export class MyAccountVideoPlaylistCreateComponent extends MyAccountVideoPlaylistEdit implements OnInit {
+  error: string
+  videoPlaylistPrivacies: VideoConstant<VideoPlaylistPrivacy>[] = []
+
+  constructor (
+    protected formValidatorService: FormValidatorService,
+    private authService: AuthService,
+    private videoPlaylistValidatorsService: VideoPlaylistValidatorsService,
+    private notifier: Notifier,
+    private router: Router,
+    private videoPlaylistService: VideoPlaylistService,
+    private serverService: ServerService,
+    private i18n: I18n
+  ) {
+    super()
+  }
+
+  ngOnInit () {
+    this.buildForm({
+      displayName: this.videoPlaylistValidatorsService.VIDEO_PLAYLIST_DISPLAY_NAME,
+      privacy: this.videoPlaylistValidatorsService.VIDEO_PLAYLIST_PRIVACY,
+      description: this.videoPlaylistValidatorsService.VIDEO_PLAYLIST_DESCRIPTION,
+      videoChannelId: this.videoPlaylistValidatorsService.VIDEO_PLAYLIST_CHANNEL_ID,
+      thumbnailfile: null
+    })
+
+    this.form.get('privacy').valueChanges.subscribe(privacy => {
+      this.videoPlaylistValidatorsService.setChannelValidator(this.form.get('videoChannelId'), privacy)
+    })
+
+    populateAsyncUserVideoChannels(this.authService, this.userVideoChannels)
+
+    this.serverService.videoPlaylistPrivaciesLoaded.subscribe(
+      () => {
+        this.videoPlaylistPrivacies = this.serverService.getVideoPlaylistPrivacies()
+
+        this.form.patchValue({
+          privacy: VideoPlaylistPrivacy.PRIVATE
+        })
+      }
+    )
+  }
+
+  formValidated () {
+    this.error = undefined
+
+    const body = this.form.value
+    const videoPlaylistCreate: VideoPlaylistCreate = {
+      displayName: body.displayName,
+      privacy: body.privacy,
+      description: body.description || null,
+      videoChannelId: body.videoChannelId || null,
+      thumbnailfile: body.thumbnailfile || null
+    }
+
+    this.videoPlaylistService.createVideoPlaylist(videoPlaylistCreate).subscribe(
+      () => {
+        this.notifier.success(
+          this.i18n('Playlist {{playlistName}} created.', { playlistName: videoPlaylistCreate.displayName })
+        )
+        this.router.navigate([ '/my-account', 'video-playlists' ])
+      },
+
+      err => this.error = err.message
+    )
+  }
+
+  isCreation () {
+    return true
+  }
+
+  getFormButtonTitle () {
+    return this.i18n('Create')
+  }
+}
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
new file mode 100644
index 000000000..303fc46f7
--- /dev/null
+++ b/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-edit.component.html
@@ -0,0 +1,69 @@
+<div i18n class="form-sub-title" *ngIf="isCreation() === true">Create a new playlist</div>
+
+<div *ngIf="error" class="alert alert-danger">{{ error }}</div>
+
+<form role="form" (ngSubmit)="formValidated()" [formGroup]="form">
+  <div class="row">
+    <div class="col-md-12 col-xl-6">
+      <div class="form-group">
+        <label i18n for="displayName">Display name</label>
+        <input
+          type="text" id="displayName"
+          formControlName="displayName" [ngClass]="{ 'input-error': formErrors['displayName'] }"
+        >
+        <div *ngIf="formErrors['displayName']" class="form-error">
+          {{ formErrors['displayName'] }}
+        </div>
+      </div>
+
+      <div class="form-group">
+        <label i18n for="description">Description</label>
+        <textarea
+          id="description" formControlName="description"
+          [ngClass]="{ 'input-error': formErrors['description'] }"
+        ></textarea>
+        <div *ngIf="formErrors.description" class="form-error">
+          {{ formErrors.description }}
+        </div>
+      </div>
+    </div>
+
+    <div class="col-md-12 col-xl-6">
+      <div class="form-group">
+        <label i18n for="privacy">Privacy</label>
+        <div class="peertube-select-container">
+          <select id="privacy" formControlName="privacy">
+            <option *ngFor="let privacy of videoPlaylistPrivacies" [value]="privacy.id">{{ privacy.label }}</option>
+          </select>
+        </div>
+
+        <div *ngIf="formErrors.privacy" class="form-error">
+          {{ formErrors.privacy }}
+        </div>
+      </div>
+
+      <div class="form-group">
+        <label i18n>Channel</label>
+        <div class="peertube-select-container">
+          <select formControlName="videoChannelId">
+            <option></option>
+            <option *ngFor="let channel of userVideoChannels" [value]="channel.id">{{ channel.label }}</option>
+          </select>
+        </div>
+
+        <div *ngIf="formErrors['videoChannelId']" class="form-error">
+          {{ formErrors['videoChannelId'] }}
+        </div>
+      </div>
+
+      <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>
+  </div>
+
+  <input type="submit" value="{{ getFormButtonTitle() }}" [disabled]="!form.valid">
+</form>
diff --git a/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-edit.component.scss b/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-edit.component.scss
new file mode 100644
index 000000000..5af846d8e
--- /dev/null
+++ b/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-edit.component.scss
@@ -0,0 +1,27 @@
+@import '_variables';
+@import '_mixins';
+
+.form-sub-title {
+  margin-bottom: 20px;
+}
+
+input[type=text] {
+  @include peertube-input-text(340px);
+
+  display: block;
+}
+
+textarea {
+  @include peertube-textarea(500px, 150px);
+
+  display: block;
+}
+
+.peertube-select-container {
+  @include peertube-select-container(340px);
+}
+
+input[type=submit] {
+  @include peertube-button;
+  @include orange-button;
+}
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
new file mode 100644
index 000000000..fbfb4c8f7
--- /dev/null
+++ b/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-edit.ts
@@ -0,0 +1,13 @@
+import { FormReactive } from '@app/shared'
+import { VideoChannel } from '@app/shared/video-channel/video-channel.model'
+import { ServerService } from '@app/core'
+import { VideoPlaylist } from '@shared/models/videos/playlist/video-playlist.model'
+
+export abstract class MyAccountVideoPlaylistEdit extends FormReactive {
+  // Declare it here to avoid errors in create template
+  videoPlaylistToUpdate: VideoPlaylist
+  userVideoChannels: { id: number, label: string }[] = []
+
+  abstract isCreation (): boolean
+  abstract getFormButtonTitle (): string
+}
diff --git a/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-elements.component.html b/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-elements.component.html
new file mode 100644
index 000000000..284694b7f
--- /dev/null
+++ b/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-elements.component.html
@@ -0,0 +1,26 @@
+<div class="row">
+
+  <div class="playlist-info col-xs-12 col-md-5 col-xl-3">
+    <my-video-playlist-miniature
+      *ngIf="playlist" [playlist]="playlist" [toManage]="false" [displayChannel]="true"
+      [displayDescription]="true" [displayPrivacy]="true"
+    ></my-video-playlist-miniature>
+  </div>
+
+  <div class="playlist-elements col-xs-12 col-md-7 col-xl-9">
+    <div i18n class="no-results" *ngIf="pagination.totalItems === 0">No videos in this playlist.</div>
+
+    <div
+      class="videos" myInfiniteScroller [autoInit]="true" (nearOfBottom)="onNearOfBottom()"
+      cdkDropList (cdkDropListDropped)="drop($event)"
+    >
+      <div class="video" *ngFor="let video of videos; trackBy: trackByFn" cdkDrag (cdkDragMoved)="onDragMove($event)">
+        <my-video-playlist-element-miniature
+          [video]="video" [playlist]="playlist" [owned]="true" (elementRemoved)="onElementRemoved($event)"
+          [position]="video.playlistElement.position"
+        >
+        </my-video-playlist-element-miniature>
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-elements.component.scss b/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-elements.component.scss
new file mode 100644
index 000000000..900669827
--- /dev/null
+++ b/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-elements.component.scss
@@ -0,0 +1,39 @@
+@import '_variables';
+@import '_mixins';
+@import '_miniature';
+
+.playlist-info {
+  background-color: var(--submenuColor);
+  margin-left: -15px;
+  margin-top: -$sub-menu-margin-bottom;
+
+  padding: $sub-menu-margin-bottom 0;
+
+  display: flex;
+  justify-content: center;
+}
+
+// Thanks Angular CDK <3 https://material.angular.io/cdk/drag-drop/examples
+.cdk-drag-preview {
+  box-sizing: border-box;
+  border-radius: 4px;
+  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
+  0 8px 10px 1px rgba(0, 0, 0, 0.14),
+  0 3px 14px 2px rgba(0, 0, 0, 0.12);
+}
+
+.cdk-drag-placeholder {
+  opacity: 0;
+}
+
+.cdk-drag-animating {
+  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+}
+
+.video:last-child {
+  border: none;
+}
+
+.videos.cdk-drop-list-dragging .video:not(.cdk-drag-placeholder) {
+  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+}
diff --git a/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-elements.component.ts b/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-elements.component.ts
new file mode 100644
index 000000000..25d51d2cb
--- /dev/null
+++ b/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-elements.component.ts
@@ -0,0 +1,153 @@
+import { Component, OnDestroy, OnInit } from '@angular/core'
+import { Notifier, ServerService } from '@app/core'
+import { AuthService } from '../../core/auth'
+import { ConfirmService } from '../../core/confirm'
+import { ComponentPagination } from '@app/shared/rest/component-pagination.model'
+import { Video } from '@app/shared/video/video.model'
+import { Subject, Subscription } from 'rxjs'
+import { ActivatedRoute } from '@angular/router'
+import { VideoService } from '@app/shared/video/video.service'
+import { VideoPlaylistService } from '@app/shared/video-playlist/video-playlist.service'
+import { VideoPlaylist } from '@app/shared/video-playlist/video-playlist.model'
+import { I18n } from '@ngx-translate/i18n-polyfill'
+import { CdkDragDrop, CdkDragMove } from '@angular/cdk/drag-drop'
+import { throttleTime } from 'rxjs/operators'
+
+@Component({
+  selector: 'my-account-video-playlist-elements',
+  templateUrl: './my-account-video-playlist-elements.component.html',
+  styleUrls: [ './my-account-video-playlist-elements.component.scss' ]
+})
+export class MyAccountVideoPlaylistElementsComponent implements OnInit, OnDestroy {
+  videos: Video[] = []
+  playlist: VideoPlaylist
+
+  pagination: ComponentPagination = {
+    currentPage: 1,
+    itemsPerPage: 30,
+    totalItems: null
+  }
+
+  private videoPlaylistId: string | number
+  private paramsSub: Subscription
+  private dragMoveSubject = new Subject<number>()
+
+  constructor (
+    private authService: AuthService,
+    private serverService: ServerService,
+    private notifier: Notifier,
+    private confirmService: ConfirmService,
+    private route: ActivatedRoute,
+    private i18n: I18n,
+    private videoService: VideoService,
+    private videoPlaylistService: VideoPlaylistService
+  ) {}
+
+  ngOnInit () {
+    this.paramsSub = this.route.params.subscribe(routeParams => {
+      this.videoPlaylistId = routeParams[ 'videoPlaylistId' ]
+      this.loadElements()
+
+      this.loadPlaylistInfo()
+    })
+
+    this.dragMoveSubject.asObservable()
+      .pipe(throttleTime(200))
+      .subscribe(y => this.checkScroll(y))
+  }
+
+  ngOnDestroy () {
+    if (this.paramsSub) this.paramsSub.unsubscribe()
+  }
+
+  drop (event: CdkDragDrop<any>) {
+    const previousIndex = event.previousIndex
+    const newIndex = event.currentIndex
+
+    if (previousIndex === newIndex) return
+
+    const oldPosition = this.videos[previousIndex].playlistElement.position
+    const insertAfter = newIndex === 0 ? 0 : this.videos[newIndex].playlistElement.position
+
+    this.videoPlaylistService.reorderPlaylist(this.playlist.id, oldPosition, insertAfter)
+      .subscribe(
+        () => { /* nothing to do */ },
+
+        err => this.notifier.error(err.message)
+      )
+
+    const video = this.videos[previousIndex]
+
+    this.videos.splice(previousIndex, 1)
+    this.videos.splice(newIndex, 0, video)
+
+    this.reorderClientPositions()
+  }
+
+  onDragMove (event: CdkDragMove<any>) {
+    this.dragMoveSubject.next(event.pointerPosition.y)
+  }
+
+  checkScroll (pointerY: number) {
+    // FIXME: Uncomment when https://github.com/angular/material2/issues/14098 is fixed
+    // FIXME: Remove when https://github.com/angular/material2/issues/13588 is implemented
+    // if (pointerY < 150) {
+    //   window.scrollBy({
+    //     left: 0,
+    //     top: -20,
+    //     behavior: 'smooth'
+    //   })
+    //
+    //   return
+    // }
+    //
+    // if (window.innerHeight - pointerY <= 50) {
+    //   window.scrollBy({
+    //     left: 0,
+    //     top: 20,
+    //     behavior: 'smooth'
+    //   })
+    // }
+  }
+
+  onElementRemoved (video: Video) {
+    this.videos = this.videos.filter(v => v.id !== video.id)
+    this.reorderClientPositions()
+  }
+
+  onNearOfBottom () {
+    // Last page
+    if (this.pagination.totalItems <= (this.pagination.currentPage * this.pagination.itemsPerPage)) return
+
+    this.pagination.currentPage += 1
+    this.loadElements()
+  }
+
+  trackByFn (index: number, elem: Video) {
+    return elem.id
+  }
+
+  private loadElements () {
+    this.videoService.getPlaylistVideos(this.videoPlaylistId, this.pagination)
+        .subscribe(({ totalVideos, videos }) => {
+          this.videos = this.videos.concat(videos)
+          this.pagination.totalItems = totalVideos
+        })
+  }
+
+  private loadPlaylistInfo () {
+    this.videoPlaylistService.getVideoPlaylist(this.videoPlaylistId)
+      .subscribe(playlist => {
+        this.playlist = playlist
+      })
+  }
+
+  private reorderClientPositions () {
+    let i = 1
+
+    for (const video of this.videos) {
+      video.playlistElement.position = i
+      i++
+    }
+  }
+}
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
new file mode 100644
index 000000000..4887fdfb4
--- /dev/null
+++ b/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-update.component.ts
@@ -0,0 +1,136 @@
+import { Component, OnDestroy, OnInit } from '@angular/core'
+import { ActivatedRoute, Router } from '@angular/router'
+import { AuthService, Notifier, ServerService } from '@app/core'
+import { Subscription } from 'rxjs'
+import { I18n } from '@ngx-translate/i18n-polyfill'
+import { FormValidatorService } from '@app/shared/forms/form-validators/form-validator.service'
+import { MyAccountVideoPlaylistEdit } from '@app/+my-account/my-account-video-playlists/my-account-video-playlist-edit'
+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'
+
+@Component({
+  selector: 'my-account-video-playlist-update',
+  templateUrl: './my-account-video-playlist-edit.component.html',
+  styleUrls: [ './my-account-video-playlist-edit.component.scss' ]
+})
+export class MyAccountVideoPlaylistUpdateComponent extends MyAccountVideoPlaylistEdit implements OnInit, OnDestroy {
+  error: string
+  videoPlaylistToUpdate: VideoPlaylist
+  videoPlaylistPrivacies: VideoConstant<VideoPlaylistPrivacy>[] = []
+
+  private paramsSub: Subscription
+
+  constructor (
+    protected formValidatorService: FormValidatorService,
+    private authService: AuthService,
+    private videoPlaylistValidatorsService: VideoPlaylistValidatorsService,
+    private notifier: Notifier,
+    private router: Router,
+    private route: ActivatedRoute,
+    private videoPlaylistService: VideoPlaylistService,
+    private i18n: I18n,
+    private serverService: ServerService
+  ) {
+    super()
+  }
+
+  ngOnInit () {
+    this.buildForm({
+      displayName: this.videoPlaylistValidatorsService.VIDEO_PLAYLIST_DISPLAY_NAME,
+      privacy: this.videoPlaylistValidatorsService.VIDEO_PLAYLIST_PRIVACY,
+      description: this.videoPlaylistValidatorsService.VIDEO_PLAYLIST_DESCRIPTION,
+      videoChannelId: this.videoPlaylistValidatorsService.VIDEO_PLAYLIST_CHANNEL_ID,
+      thumbnailfile: null
+    })
+
+    this.form.get('privacy').valueChanges.subscribe(privacy => {
+      this.videoPlaylistValidatorsService.setChannelValidator(this.form.get('videoChannelId'), privacy)
+    })
+
+    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
+      )
+    })
+  }
+
+  ngOnDestroy () {
+    if (this.paramsSub) this.paramsSub.unsubscribe()
+  }
+
+  formValidated () {
+    this.error = undefined
+
+    const body = this.form.value
+    const videoPlaylistUpdate: VideoPlaylistUpdate = {
+      displayName: body.displayName,
+      privacy: body.privacy,
+      description: body.description || null,
+      videoChannelId: body.videoChannelId || null,
+      thumbnailfile: body.thumbnailfile || undefined
+    }
+
+    this.videoPlaylistService.updateVideoPlaylist(this.videoPlaylistToUpdate, videoPlaylistUpdate).subscribe(
+      () => {
+        this.notifier.success(
+          this.i18n('Playlist {{videoPlaylistName}} updated.', { videoPlaylistName: videoPlaylistUpdate.displayName })
+        )
+
+        this.router.navigate([ '/my-account', 'video-playlists' ])
+      },
+
+      err => this.error = err.message
+    )
+  }
+
+  isCreation () {
+    return false
+  }
+
+  getFormButtonTitle () {
+    return this.i18n('Update')
+  }
+
+  private hydrateFormFromPlaylist () {
+    this.form.patchValue({
+      displayName: this.videoPlaylistToUpdate.displayName,
+      privacy: this.videoPlaylistToUpdate.privacy.id,
+      description: this.videoPlaylistToUpdate.description,
+      videoChannelId: this.videoPlaylistToUpdate.videoChannel ? this.videoPlaylistToUpdate.videoChannel.id : null
+    })
+
+    fetch(this.videoPlaylistToUpdate.thumbnailUrl)
+      .then(response => response.blob())
+      .then(data => {
+        this.form.patchValue({
+          thumbnailfile: data
+        })
+      })
+  }
+}
diff --git a/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlists.component.html b/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlists.component.html
new file mode 100644
index 000000000..322560673
--- /dev/null
+++ b/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlists.component.html
@@ -0,0 +1,21 @@
+<div class="video-playlists-header">
+  <a class="create-button" routerLink="create">
+    <my-global-icon iconName="add"></my-global-icon>
+    <ng-container i18n>Create a new playlist</ng-container>
+  </a>
+</div>
+
+<div class="video-playlists" myInfiniteScroller (nearOfBottom)="onNearOfBottom()">
+  <div *ngFor="let playlist of videoPlaylists" class="video-playlist">
+    <div class="miniature-wrapper">
+      <my-video-playlist-miniature [playlist]="playlist" [toManage]="true" [displayChannel]="true" [displayDescription]="true" [displayPrivacy]="true"
+      ></my-video-playlist-miniature>
+    </div>
+
+    <div *ngIf="isRegularPlaylist(playlist)" class="video-playlist-buttons">
+      <my-delete-button (click)="deleteVideoPlaylist(playlist)"></my-delete-button>
+
+      <my-edit-button [routerLink]="[ 'update', playlist.uuid ]"></my-edit-button>
+    </div>
+  </div>
+</div>
diff --git a/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlists.component.scss b/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlists.component.scss
new file mode 100644
index 000000000..f648c33e4
--- /dev/null
+++ b/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlists.component.scss
@@ -0,0 +1,51 @@
+@import '_variables';
+@import '_mixins';
+
+.create-button {
+  @include create-button;
+}
+
+/deep/ .action-button {
+  &.action-button-delete {
+    margin-right: 10px;
+  }
+}
+
+.video-playlist {
+  @include row-blocks;
+
+  .miniature-wrapper {
+    flex-grow: 1;
+
+    /deep/ .miniature {
+      display: flex;
+
+      .miniature-info {
+        margin-left: 10px;
+        width: auto;
+      }
+    }
+  }
+
+  .video-playlist-buttons {
+    min-width: 190px;
+  }
+}
+
+.video-playlists-header {
+  text-align: right;
+  margin: 20px 0 50px;
+}
+
+@media screen and (max-width: 800px) {
+  .video-playlists-header {
+    text-align: center;
+  }
+
+  .video-playlist {
+
+    .video-playlist-buttons {
+      margin-top: 10px;
+    }
+  }
+}
diff --git a/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlists.component.ts b/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlists.component.ts
new file mode 100644
index 000000000..e30656b92
--- /dev/null
+++ b/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlists.component.ts
@@ -0,0 +1,88 @@
+import { Component, OnInit } from '@angular/core'
+import { Notifier } from '@app/core'
+import { AuthService } from '../../core/auth'
+import { ConfirmService } from '../../core/confirm'
+import { User } from '@app/shared'
+import { flatMap } from 'rxjs/operators'
+import { I18n } from '@ngx-translate/i18n-polyfill'
+import { VideoPlaylist } from '@app/shared/video-playlist/video-playlist.model'
+import { ComponentPagination } from '@app/shared/rest/component-pagination.model'
+import { VideoPlaylistService } from '@app/shared/video-playlist/video-playlist.service'
+import { VideoPlaylistType } from '@shared/models'
+
+@Component({
+  selector: 'my-account-video-playlists',
+  templateUrl: './my-account-video-playlists.component.html',
+  styleUrls: [ './my-account-video-playlists.component.scss' ]
+})
+export class MyAccountVideoPlaylistsComponent implements OnInit {
+  videoPlaylists: VideoPlaylist[] = []
+
+  pagination: ComponentPagination = {
+    currentPage: 1,
+    itemsPerPage: 10,
+    totalItems: null
+  }
+
+  private user: User
+
+  constructor (
+    private authService: AuthService,
+    private notifier: Notifier,
+    private confirmService: ConfirmService,
+    private videoPlaylistService: VideoPlaylistService,
+    private i18n: I18n
+  ) {}
+
+  ngOnInit () {
+    this.user = this.authService.getUser()
+
+    this.loadVideoPlaylists()
+  }
+
+  async deleteVideoPlaylist (videoPlaylist: VideoPlaylist) {
+    const res = await this.confirmService.confirm(
+      this.i18n(
+        'Do you really want to delete {{playlistDisplayName}}?',
+        { playlistDisplayName: videoPlaylist.displayName }
+      ),
+      this.i18n('Delete')
+    )
+    if (res === false) return
+
+    this.videoPlaylistService.removeVideoPlaylist(videoPlaylist)
+      .subscribe(
+        () => {
+          this.videoPlaylists = this.videoPlaylists
+                                    .filter(p => p.id !== videoPlaylist.id)
+
+          this.notifier.success(
+            this.i18n('Playlist {{playlistDisplayName}} deleted.', { playlistDisplayName: videoPlaylist.displayName })
+          )
+        },
+
+        error => this.notifier.error(error.message)
+      )
+  }
+
+  isRegularPlaylist (playlist: VideoPlaylist) {
+    return playlist.type.id === VideoPlaylistType.REGULAR
+  }
+
+  onNearOfBottom () {
+    // Last page
+    if (this.pagination.totalItems <= (this.pagination.currentPage * this.pagination.itemsPerPage)) return
+
+    this.pagination.currentPage += 1
+    this.loadVideoPlaylists()
+  }
+
+  private loadVideoPlaylists () {
+    this.authService.userInformationLoaded
+        .pipe(flatMap(() => this.videoPlaylistService.listAccountPlaylists(this.user.account, '-updatedAt')))
+        .subscribe(res => {
+          this.videoPlaylists = this.videoPlaylists.concat(res.data)
+          this.pagination.totalItems = res.total
+        })
+  }
+}
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 69748ef37..d7993fdc2 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
@@ -1,56 +1,30 @@
-<div i18n *ngIf="pagination.totalItems === 0">No results.</div>
-
-<div
-  myInfiniteScroller
-  [pageHeight]="pageHeight"
-  (nearOfTop)="onNearOfTop()" (nearOfBottom)="onNearOfBottom()" (pageChanged)="onPageChanged($event)"
-  class="videos" #videosElement
+<my-videos-selection
+  [(selection)]="selection"
+  [(videosModel)]="videos"
+  [miniatureDisplayOptions]="miniatureDisplayOptions"
+  [titlePage]="titlePage"
+  [getVideosObservableFunction]="getVideosObservableFunction"
+  #videosSelection
 >
-  <div *ngFor="let videos of videoPages; let i = index" class="videos-page">
-    <div class="video" *ngFor="let video of videos; let j = index">
-      <div class="checkbox-container">
-        <my-peertube-checkbox [inputName]="'video-check-' + video.id" [(ngModel)]="checkedVideos[video.id]"></my-peertube-checkbox>
-      </div>
-
-      <my-video-thumbnail [video]="video"></my-video-thumbnail>
-
-      <div class="video-info">
-        <a class="video-info-name" [routerLink]="['/videos/watch', video.uuid]" [attr.title]="video.name">{{ video.name }}</a>
-        <span i18n class="video-info-date-views">{{ video.createdAt | myFromNow }} - {{ video.views | myNumberFormatter }} views</span>
-        <div class="video-info-private">{{ video.privacy.label }}{{ getStateLabel(video) }}</div>
-        <div *ngIf="video.blacklisted" class="video-info-blacklisted">
-          <span class="blacklisted-label" i18n>Blacklisted</span>
-          <span class="blacklisted-reason" *ngIf="video.blacklistedReason">{{ video.blacklistedReason }}</span>
-        </div>
-      </div>
-
-      <!-- Display only once -->
-      <div class="action-selection-mode" *ngIf="isInSelectionMode() === true && i === 0 && j === 0">
-        <div class="action-selection-mode-child">
-          <span i18n class="action-button action-button-cancel-selection" (click)="abortSelectionMode()">
-            Cancel
-          </span>
-
-          <span class="action-button action-button-delete-selection" (click)="deleteSelectedVideos()">
-            <my-global-icon iconName="delete"></my-global-icon>
-            <ng-container i18n>Delete</ng-container>
-          </span>
-        </div>
-      </div>
-
-      <div class="video-buttons" *ngIf="isInSelectionMode() === false">
-        <my-delete-button (click)="deleteVideo(video)"></my-delete-button>
-
-        <my-edit-button [routerLink]="[ '/videos', 'update', video.uuid ]"></my-edit-button>
+  <ng-template ptTemplate="globalButtons">
+    <span class="action-button action-button-delete-selection" (click)="deleteSelectedVideos()">
+      <my-global-icon iconName="delete"></my-global-icon>
+      <ng-container i18n>Delete</ng-container>
+    </span>
+  </ng-template>
+
+  <ng-template ptTemplate="rowButtons" let-video>
+    <my-delete-button (click)="deleteVideo(video)"></my-delete-button>
+
+    <my-edit-button [routerLink]="[ '/videos', 'update', video.uuid ]"></my-edit-button>
+
+    <my-button i18n-label label="Change ownership"
+               className="action-button-change-ownership"
+               icon="im-with-her"
+               (click)="changeOwnership($event, video)"
+    ></my-button>
+  </ng-template>
+</my-videos-selection>
 
-        <my-button i18n-label label="Change ownership"
-                   className="action-button-change-ownership"
-                   icon="im-with-her"
-                   (click)="changeOwnership($event, video)"
-        ></my-button>
-      </div>
-    </div>
-  </div>
-</div>
 
 <my-video-change-ownership #videoChangeOwnershipModal></my-video-change-ownership>
diff --git a/client/src/app/+my-account/my-account-videos/my-account-videos.component.scss b/client/src/app/+my-account/my-account-videos/my-account-videos.component.scss
index 39d0cf2f7..87398e7c8 100644
--- a/client/src/app/+my-account/my-account-videos/my-account-videos.component.scss
+++ b/client/src/app/+my-account/my-account-videos/my-account-videos.component.scss
@@ -1,119 +1,19 @@
 @import '_variables';
 @import '_mixins';
 
-.action-selection-mode {
-  width: 174px;
-  display: flex;
-  justify-content: flex-end;
+.action-button-delete-selection {
+  display: inline-block;
 
-  .action-selection-mode-child {
-    position: fixed;
+  @include peertube-button;
+  @include orange-button;
+  @include button-with-icon(21px);
 
-    .action-button {
-      display: inline-block;
-    }
-
-    .action-button-cancel-selection {
-      @include peertube-button;
-      @include grey-button;
-
-      margin-right: 10px;
-    }
-
-    .action-button-delete-selection {
-      @include peertube-button;
-      @include orange-button;
-      @include button-with-icon(21px);
-
-      my-global-icon {
-        @include apply-svg-color(#fff);
-      }
-    }
-  }
-}
-
-.video {
-  @include row-blocks;
-
-  &:first-child {
-    margin-top: 47px;
-  }
-
-  .checkbox-container {
-    display: flex;
-    align-items: center;
-    margin-right: 20px;
-    margin-left: 12px;
-  }
-
-  my-video-thumbnail {
-    margin-right: 10px;
-  }
-
-  .video-info {
-    flex-grow: 1;
-
-    .video-info-name {
-      @include disable-default-a-behaviour;
-
-      color: var(--mainForegroundColor);
-      display: block;
-      width: fit-content;
-      font-size: 16px;
-      font-weight: $font-semibold;
-    }
-
-    .video-info-date-views,
-    .video-info-private,
-    .video-info-blacklisted {
-      font-size: 13px;
-
-      &.video-info-private,
-      &.video-info-blacklisted .blacklisted-label {
-        font-weight: $font-semibold;
-      }
-
-      &.video-info-blacklisted {
-        color: red;
-
-        .blacklisted-reason {
-          &::before {
-            content: ' - ';
-          }
-        }
-      }
-    }
-  }
-
-  .video-buttons {
-    min-width: 190px;
-
-    *:not(:last-child) {
-      margin-right: 10px;
-    }
+  my-global-icon {
+    @include apply-svg-color(#fff);
   }
 }
 
-@media screen and (max-width: $small-view) {
-  .video {
-    flex-direction: column;
-    height: auto;
-    text-align: center;
-
-    .video-info-name {
-      margin: auto;
-    }
-
-    input[type=checkbox] {
-      display: none;
-    }
-
-    my-video-thumbnail {
-      margin-right: 0;
-    }
-
-    .video-buttons {
-      margin-top: 10px;
-    }
-  }
+my-delete-button,
+my-edit-button {
+  margin-right: 10px;
 }
diff --git a/client/src/app/+my-account/my-account-videos/my-account-videos.component.ts b/client/src/app/+my-account/my-account-videos/my-account-videos.component.ts
index 41608f796..5f29364a8 100644
--- a/client/src/app/+my-account/my-account-videos/my-account-videos.component.ts
+++ b/client/src/app/+my-account/my-account-videos/my-account-videos.component.ts
@@ -1,87 +1,81 @@
-import { from as observableFrom, Observable } from 'rxjs'
-import { concatAll, tap } from 'rxjs/operators'
-import { Component, OnDestroy, OnInit, Inject, LOCALE_ID, ViewChild } from '@angular/core'
+import { concat, Observable } from 'rxjs'
+import { tap, toArray } from 'rxjs/operators'
+import { Component, ViewChild } from '@angular/core'
 import { ActivatedRoute, Router } from '@angular/router'
-import { Location } from '@angular/common'
 import { immutableAssign } from '@app/shared/misc/utils'
 import { ComponentPagination } from '@app/shared/rest/component-pagination.model'
-import { Notifier } from '@app/core'
+import { Notifier, ServerService } from '@app/core'
 import { AuthService } from '../../core/auth'
 import { ConfirmService } from '../../core/confirm'
-import { AbstractVideoList } from '../../shared/video/abstract-video-list'
 import { Video } from '../../shared/video/video.model'
 import { VideoService } from '../../shared/video/video.service'
 import { I18n } from '@ngx-translate/i18n-polyfill'
-import { VideoPrivacy, VideoState } from '../../../../../shared/models/videos'
 import { ScreenService } from '@app/shared/misc/screen.service'
 import { VideoChangeOwnershipComponent } from './video-change-ownership/video-change-ownership.component'
+import { MiniatureDisplayOptions } from '@app/shared/video/video-miniature.component'
+import { SelectionType, VideosSelectionComponent } from '@app/shared/video/videos-selection.component'
+import { VideoSortField } from '@app/shared/video/sort-field.type'
+import { DisableForReuseHook } from '@app/core/routing/disable-for-reuse-hook'
 
 @Component({
   selector: 'my-account-videos',
   templateUrl: './my-account-videos.component.html',
   styleUrls: [ './my-account-videos.component.scss' ]
 })
-export class MyAccountVideosComponent extends AbstractVideoList implements OnInit, OnDestroy {
+export class MyAccountVideosComponent implements DisableForReuseHook {
+  @ViewChild('videosSelection') videosSelection: VideosSelectionComponent
+  @ViewChild('videoChangeOwnershipModal') videoChangeOwnershipModal: VideoChangeOwnershipComponent
+
   titlePage: string
-  currentRoute = '/my-account/videos'
-  checkedVideos: { [ id: number ]: boolean } = {}
+  selection: SelectionType = {}
   pagination: ComponentPagination = {
     currentPage: 1,
     itemsPerPage: 5,
     totalItems: null
   }
-
-  protected baseVideoWidth = -1
-  protected baseVideoHeight = 155
-
-  @ViewChild('videoChangeOwnershipModal') videoChangeOwnershipModal: VideoChangeOwnershipComponent
+  miniatureDisplayOptions: MiniatureDisplayOptions = {
+    date: true,
+    views: true,
+    by: false,
+    privacyLabel: false,
+    privacyText: true,
+    state: true,
+    blacklistInfo: true
+  }
+  videos: Video[] = []
+  getVideosObservableFunction = this.getVideosObservable.bind(this)
 
   constructor (
     protected router: Router,
+    protected serverService: ServerService,
     protected route: ActivatedRoute,
     protected authService: AuthService,
     protected notifier: Notifier,
-    protected location: Location,
     protected screenService: ScreenService,
-    protected i18n: I18n,
+    private i18n: I18n,
     private confirmService: ConfirmService,
-    private videoService: VideoService,
-    @Inject(LOCALE_ID) private localeId: string
+    private videoService: VideoService
   ) {
-    super()
-
     this.titlePage = this.i18n('My videos')
   }
 
-  ngOnInit () {
-    super.ngOnInit()
-  }
-
-  ngOnDestroy () {
-    super.ngOnDestroy()
-  }
-
-  abortSelectionMode () {
-    this.checkedVideos = {}
+  disableForReuse () {
+    this.videosSelection.disableForReuse()
   }
 
-  isInSelectionMode () {
-    return Object.keys(this.checkedVideos).some(k => this.checkedVideos[ k ] === true)
+  enabledForReuse () {
+    this.videosSelection.enabledForReuse()
   }
 
-  getVideosObservable (page: number) {
+  getVideosObservable (page: number, sort: VideoSortField) {
     const newPagination = immutableAssign(this.pagination, { currentPage: page })
 
-    return this.videoService.getMyVideos(newPagination, this.sort)
-  }
-
-  generateSyndicationList () {
-    throw new Error('Method not implemented.')
+    return this.videoService.getMyVideos(newPagination, sort)
   }
 
   async deleteSelectedVideos () {
-    const toDeleteVideosIds = Object.keys(this.checkedVideos)
-                                    .filter(k => this.checkedVideos[ k ] === true)
+    const toDeleteVideosIds = Object.keys(this.selection)
+                                    .filter(k => this.selection[ k ] === true)
                                     .map(k => parseInt(k, 10))
 
     const res = await this.confirmService.confirm(
@@ -93,19 +87,18 @@ export class MyAccountVideosComponent extends AbstractVideoList implements OnIni
     const observables: Observable<any>[] = []
     for (const videoId of toDeleteVideosIds) {
       const o = this.videoService.removeVideo(videoId)
-                    .pipe(tap(() => this.spliceVideosById(videoId)))
+                    .pipe(tap(() => this.removeVideoFromArray(videoId)))
 
       observables.push(o)
     }
 
-    observableFrom(observables)
-      .pipe(concatAll())
+    concat(...observables)
+      .pipe(toArray())
       .subscribe(
-        res => {
+        () => {
           this.notifier.success(this.i18n('{{deleteLength}} videos deleted.', { deleteLength: toDeleteVideosIds.length }))
 
-          this.abortSelectionMode()
-          this.reloadVideos()
+          this.selection = {}
         },
 
         err => this.notifier.error(err.message)
@@ -123,7 +116,7 @@ export class MyAccountVideosComponent extends AbstractVideoList implements OnIni
         .subscribe(
           () => {
             this.notifier.success(this.i18n('Video {{videoName}} deleted.', { videoName: video.name }))
-            this.reloadVideos()
+            this.removeVideoFromArray(video.id)
           },
 
           error => this.notifier.error(error.message)
@@ -135,41 +128,7 @@ export class MyAccountVideosComponent extends AbstractVideoList implements OnIni
     this.videoChangeOwnershipModal.show(video)
   }
 
-  getStateLabel (video: Video) {
-    let suffix: string
-
-    if (video.privacy.id !== VideoPrivacy.PRIVATE && video.state.id === VideoState.PUBLISHED) {
-      suffix = this.i18n('Published')
-    } else if (video.scheduledUpdate) {
-      const updateAt = new Date(video.scheduledUpdate.updateAt.toString()).toLocaleString(this.localeId)
-      suffix = this.i18n('Publication scheduled on ') + updateAt
-    } else if (video.state.id === VideoState.TO_TRANSCODE && video.waitTranscoding === true) {
-      suffix = this.i18n('Waiting transcoding')
-    } else if (video.state.id === VideoState.TO_TRANSCODE) {
-      suffix = this.i18n('To transcode')
-    } else if (video.state.id === VideoState.TO_IMPORT) {
-      suffix = this.i18n('To import')
-    } else {
-      return ''
-    }
-
-    return ' - ' + suffix
-  }
-
-  protected buildVideoHeight () {
-    // In account videos, the video height is fixed
-    return this.baseVideoHeight
-  }
-
-  private spliceVideosById (id: number) {
-    for (const key of Object.keys(this.loadedPages)) {
-      const videos: Video[] = this.loadedPages[ key ]
-      const index = videos.findIndex(v => v.id === id)
-
-      if (index !== -1) {
-        videos.splice(index, 1)
-        return
-      }
-    }
+  private removeVideoFromArray (id: number) {
+    this.videos = this.videos.filter(v => v.id !== id)
   }
 }
diff --git a/client/src/app/+my-account/my-account.component.ts b/client/src/app/+my-account/my-account.component.ts
index 8a4102d80..d98d06f8e 100644
--- a/client/src/app/+my-account/my-account.component.ts
+++ b/client/src/app/+my-account/my-account.component.ts
@@ -21,19 +21,28 @@ export class MyAccountComponent {
       children: [
         {
           label: this.i18n('My channels'),
-          routerLink: '/my-account/video-channels'
+          routerLink: '/my-account/video-channels',
+          iconName: 'folder'
         },
         {
           label: this.i18n('My videos'),
-          routerLink: '/my-account/videos'
+          routerLink: '/my-account/videos',
+          iconName: 'videos'
+        },
+        {
+          label: this.i18n('My playlists'),
+          routerLink: '/my-account/video-playlists',
+          iconName: 'playlists'
         },
         {
           label: this.i18n('My subscriptions'),
-          routerLink: '/my-account/subscriptions'
+          routerLink: '/my-account/subscriptions',
+          iconName: 'subscriptions'
         },
         {
           label: this.i18n('My history'),
-          routerLink: '/my-account/history/videos'
+          routerLink: '/my-account/history/videos',
+          iconName: 'history'
         }
       ]
     }
@@ -41,7 +50,8 @@ export class MyAccountComponent {
     if (this.isVideoImportEnabled()) {
       libraryEntries.children.push({
         label: 'My imports',
-        routerLink: '/my-account/video-imports'
+        routerLink: '/my-account/video-imports',
+        iconName: 'cloud-download'
       })
     }
 
@@ -50,15 +60,18 @@ export class MyAccountComponent {
       children: [
         {
           label: this.i18n('Muted accounts'),
-          routerLink: '/my-account/blocklist/accounts'
+          routerLink: '/my-account/blocklist/accounts',
+          iconName: 'user'
         },
         {
           label: this.i18n('Muted instances'),
-          routerLink: '/my-account/blocklist/servers'
+          routerLink: '/my-account/blocklist/servers',
+          iconName: 'server'
         },
         {
           label: this.i18n('Ownership changes'),
-          routerLink: '/my-account/ownership'
+          routerLink: '/my-account/ownership',
+          iconName: 'im-with-her'
         }
       ]
     }
diff --git a/client/src/app/+my-account/my-account.module.ts b/client/src/app/+my-account/my-account.module.ts
index 18f51f171..4a18a9968 100644
--- a/client/src/app/+my-account/my-account.module.ts
+++ b/client/src/app/+my-account/my-account.module.ts
@@ -25,6 +25,17 @@ import { MyAccountServerBlocklistComponent } from '@app/+my-account/my-account-b
 import { MyAccountHistoryComponent } from '@app/+my-account/my-account-history/my-account-history.component'
 import { MyAccountNotificationsComponent } from '@app/+my-account/my-account-notifications/my-account-notifications.component'
 import { MyAccountNotificationPreferencesComponent } from '@app/+my-account/my-account-settings/my-account-notification-preferences'
+import {
+  MyAccountVideoPlaylistCreateComponent
+} from '@app/+my-account/my-account-video-playlists/my-account-video-playlist-create.component'
+import {
+  MyAccountVideoPlaylistUpdateComponent
+} from '@app/+my-account/my-account-video-playlists/my-account-video-playlist-update.component'
+import { MyAccountVideoPlaylistsComponent } from '@app/+my-account/my-account-video-playlists/my-account-video-playlists.component'
+import {
+  MyAccountVideoPlaylistElementsComponent
+} from '@app/+my-account/my-account-video-playlists/my-account-video-playlist-elements.component'
+import { DragDropModule } from '@angular/cdk/drag-drop'
 
 @NgModule({
   imports: [
@@ -33,7 +44,8 @@ import { MyAccountNotificationPreferencesComponent } from '@app/+my-account/my-a
     AutoCompleteModule,
     SharedModule,
     TableModule,
-    InputSwitchModule
+    InputSwitchModule,
+    DragDropModule
   ],
 
   declarations: [
@@ -57,7 +69,12 @@ import { MyAccountNotificationPreferencesComponent } from '@app/+my-account/my-a
     MyAccountServerBlocklistComponent,
     MyAccountHistoryComponent,
     MyAccountNotificationsComponent,
-    MyAccountNotificationPreferencesComponent
+    MyAccountNotificationPreferencesComponent,
+
+    MyAccountVideoPlaylistCreateComponent,
+    MyAccountVideoPlaylistUpdateComponent,
+    MyAccountVideoPlaylistsComponent,
+    MyAccountVideoPlaylistElementsComponent
   ],
 
   exports: [
diff --git a/client/src/app/+my-account/shared/actor-avatar-info.component.scss b/client/src/app/+my-account/shared/actor-avatar-info.component.scss
index 0b0c83de5..86f8108b9 100644
--- a/client/src/app/+my-account/shared/actor-avatar-info.component.scss
+++ b/client/src/app/+my-account/shared/actor-avatar-info.component.scss
@@ -18,6 +18,10 @@
       .actor-info-display-name {
         font-size: 20px;
         font-weight: $font-bold;
+
+        @media screen and (max-width: $small-view) {
+          font-size: 16px;
+        }
       }
 
       .actor-info-username {
@@ -48,4 +52,4 @@
 
   position: relative;
   top: -10px;
-}
\ No newline at end of file
+}
diff --git a/client/src/app/+video-channels/video-channel-about/video-channel-about.component.ts b/client/src/app/+video-channels/video-channel-about/video-channel-about.component.ts
index 895b19064..11f9391e1 100644
--- a/client/src/app/+video-channels/video-channel-about/video-channel-about.component.ts
+++ b/client/src/app/+video-channels/video-channel-about/video-channel-about.component.ts
@@ -26,11 +26,11 @@ export class VideoChannelAboutComponent implements OnInit, OnDestroy {
   ngOnInit () {
     // Parent get the video channel for us
     this.videoChannelSub = this.videoChannelService.videoChannelLoaded
-      .subscribe(videoChannel => {
+      .subscribe(async videoChannel => {
         this.videoChannel = videoChannel
 
-        this.descriptionHTML = this.markdownService.textMarkdownToHTML(this.videoChannel.description)
-        this.supportHTML = this.markdownService.enhancedMarkdownToHTML(this.videoChannel.support)
+        this.descriptionHTML = await this.markdownService.textMarkdownToHTML(this.videoChannel.description)
+        this.supportHTML = await this.markdownService.enhancedMarkdownToHTML(this.videoChannel.support)
       })
   }
 
diff --git a/client/src/app/+video-channels/video-channel-playlists/video-channel-playlists.component.html b/client/src/app/+video-channels/video-channel-playlists/video-channel-playlists.component.html
new file mode 100644
index 000000000..befc7143c
--- /dev/null
+++ b/client/src/app/+video-channels/video-channel-playlists/video-channel-playlists.component.html
@@ -0,0 +1,11 @@
+<div i18n class="title-page title-page-single">
+  Created {{ pagination.totalItems }} playlists
+</div>
+
+<div i18n class="no-results" *ngIf="pagination.totalItems === 0">This channel does not have playlists.</div>
+
+<div class="video-playlist" myInfiniteScroller (nearOfBottom)="onNearOfBottom()">
+  <div *ngFor="let playlist of videoPlaylists">
+    <my-video-playlist-miniature [playlist]="playlist" [toManage]="false"></my-video-playlist-miniature>
+  </div>
+</div>
diff --git a/client/src/app/+video-channels/video-channel-playlists/video-channel-playlists.component.scss b/client/src/app/+video-channels/video-channel-playlists/video-channel-playlists.component.scss
new file mode 100644
index 000000000..fe9104794
--- /dev/null
+++ b/client/src/app/+video-channels/video-channel-playlists/video-channel-playlists.component.scss
@@ -0,0 +1,9 @@
+.video-playlist {
+  display: flex;
+  justify-content: center;
+
+  my-video-playlist-miniature {
+    margin-right: 15px;
+    margin-bottom: 30px;
+  }
+}
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
new file mode 100644
index 000000000..907aefae1
--- /dev/null
+++ b/client/src/app/+video-channels/video-channel-playlists/video-channel-playlists.component.ts
@@ -0,0 +1,63 @@
+import { Component, OnDestroy, OnInit } from '@angular/core'
+import { ConfirmService } from '../../core/confirm'
+import { VideoChannelService } from '@app/shared/video-channel/video-channel.service'
+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 { VideoPlaylistService } from '@app/shared/video-playlist/video-playlist.service'
+
+@Component({
+  selector: 'my-video-channel-playlists',
+  templateUrl: './video-channel-playlists.component.html',
+  styleUrls: [ './video-channel-playlists.component.scss' ]
+})
+export class VideoChannelPlaylistsComponent implements OnInit, OnDestroy {
+  videoPlaylists: VideoPlaylist[] = []
+
+  pagination: ComponentPagination = {
+    currentPage: 1,
+    itemsPerPage: 20,
+    totalItems: null
+  }
+
+  private videoChannelSub: Subscription
+  private videoChannel: VideoChannel
+
+  constructor (
+    private notifier: Notifier,
+    private confirmService: ConfirmService,
+    private videoPlaylistService: VideoPlaylistService,
+    private videoChannelService: VideoChannelService
+  ) {}
+
+  ngOnInit () {
+    // Parent get the video channel for us
+    this.videoChannelSub = this.videoChannelService.videoChannelLoaded
+                               .subscribe(videoChannel => {
+                                 this.videoChannel = videoChannel
+                                 this.loadVideoPlaylists()
+                               })
+  }
+
+  ngOnDestroy () {
+    if (this.videoChannelSub) this.videoChannelSub.unsubscribe()
+  }
+
+  onNearOfBottom () {
+    // Last page
+    if (this.pagination.totalItems <= (this.pagination.currentPage * this.pagination.itemsPerPage)) return
+
+    this.pagination.currentPage += 1
+    this.loadVideoPlaylists()
+  }
+
+  private loadVideoPlaylists () {
+    this.videoPlaylistService.listChannelPlaylists(this.videoChannel)
+        .subscribe(res => {
+          this.videoPlaylists = this.videoPlaylists.concat(res.data)
+          this.pagination.totalItems = res.total
+        })
+  }
+}
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 dea378a6e..5e60b34b4 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
@@ -1,6 +1,5 @@
 import { Component, OnDestroy, OnInit } from '@angular/core'
 import { ActivatedRoute, Router } from '@angular/router'
-import { Location } from '@angular/common'
 import { immutableAssign } from '@app/shared/misc/utils'
 import { AuthService } from '../../core/auth'
 import { ConfirmService } from '../../core/confirm'
@@ -8,11 +7,11 @@ import { AbstractVideoList } from '../../shared/video/abstract-video-list'
 import { VideoService } from '../../shared/video/video.service'
 import { VideoChannelService } from '@app/shared/video-channel/video-channel.service'
 import { VideoChannel } from '@app/shared/video-channel/video-channel.model'
-import { tap } from 'rxjs/operators'
+import { first, tap } from 'rxjs/operators'
 import { I18n } from '@ngx-translate/i18n-polyfill'
 import { Subscription } from 'rxjs'
 import { ScreenService } from '@app/shared/misc/screen.service'
-import { Notifier } from '@app/core'
+import { Notifier, ServerService } from '@app/core'
 
 @Component({
   selector: 'my-video-channel-videos',
@@ -24,8 +23,6 @@ import { Notifier } from '@app/core'
 })
 export class VideoChannelVideosComponent extends AbstractVideoList implements OnInit, OnDestroy {
   titlePage: string
-  marginContent = false // Disable margin
-  currentRoute = '/video-channels/videos'
   loadOnInit = false
 
   private videoChannel: VideoChannel
@@ -33,13 +30,13 @@ export class VideoChannelVideosComponent extends AbstractVideoList implements On
 
   constructor (
     protected router: Router,
+    protected serverService: ServerService,
     protected route: ActivatedRoute,
     protected authService: AuthService,
     protected notifier: Notifier,
     protected confirmService: ConfirmService,
-    protected location: Location,
     protected screenService: ScreenService,
-    protected i18n: I18n,
+    private i18n: I18n,
     private videoChannelService: VideoChannelService,
     private videoService: VideoService
   ) {
@@ -53,13 +50,13 @@ export class VideoChannelVideosComponent extends AbstractVideoList implements On
 
     // Parent get the video channel for us
     this.videoChannelSub = this.videoChannelService.videoChannelLoaded
-      .subscribe(videoChannel => {
-        this.videoChannel = videoChannel
-        this.currentRoute = '/video-channels/' + this.videoChannel.nameWithHost + '/videos'
+                               .pipe(first())
+                               .subscribe(videoChannel => {
+                                 this.videoChannel = videoChannel
 
-        this.reloadVideos()
-        this.generateSyndicationList()
-      })
+                                 this.reloadVideos()
+                                 this.generateSyndicationList()
+                               })
   }
 
   ngOnDestroy () {
diff --git a/client/src/app/+video-channels/video-channels-routing.module.ts b/client/src/app/+video-channels/video-channels-routing.module.ts
index 3ac3533d9..d4872a0a5 100644
--- a/client/src/app/+video-channels/video-channels-routing.module.ts
+++ b/client/src/app/+video-channels/video-channels-routing.module.ts
@@ -4,6 +4,7 @@ import { MetaGuard } from '@ngx-meta/core'
 import { VideoChannelsComponent } from './video-channels.component'
 import { VideoChannelVideosComponent } from './video-channel-videos/video-channel-videos.component'
 import { VideoChannelAboutComponent } from './video-channel-about/video-channel-about.component'
+import { VideoChannelPlaylistsComponent } from '@app/+video-channels/video-channel-playlists/video-channel-playlists.component'
 
 const videoChannelsRoutes: Routes = [
   {
@@ -22,6 +23,19 @@ const videoChannelsRoutes: Routes = [
         data: {
           meta: {
             title: 'Video channel videos'
+          },
+          reuse: {
+            enabled: true,
+            key: 'video-channel-videos-list'
+          }
+        }
+      },
+      {
+        path: 'video-playlists',
+        component: VideoChannelPlaylistsComponent,
+        data: {
+          meta: {
+            title: 'Video channel playlists'
           }
         }
       },
diff --git a/client/src/app/+video-channels/video-channels.component.html b/client/src/app/+video-channels/video-channels.component.html
index c65b5713d..600b7a365 100644
--- a/client/src/app/+video-channels/video-channels.component.html
+++ b/client/src/app/+video-channels/video-channels.component.html
@@ -22,6 +22,7 @@
 
     <div class="links">
       <a i18n routerLink="videos" routerLinkActive="active" class="title-page">Videos</a>
+      <a i18n routerLink="video-playlists" routerLinkActive="active" class="title-page">Video playlists</a>
       <a i18n routerLink="about" routerLinkActive="active" class="title-page">About</a>
     </div>
   </div>
diff --git a/client/src/app/+video-channels/video-channels.module.ts b/client/src/app/+video-channels/video-channels.module.ts
index a09ea6f11..6975d05b2 100644
--- a/client/src/app/+video-channels/video-channels.module.ts
+++ b/client/src/app/+video-channels/video-channels.module.ts
@@ -4,6 +4,7 @@ import { VideoChannelsRoutingModule } from './video-channels-routing.module'
 import { VideoChannelsComponent } from './video-channels.component'
 import { VideoChannelVideosComponent } from './video-channel-videos/video-channel-videos.component'
 import { VideoChannelAboutComponent } from './video-channel-about/video-channel-about.component'
+import { VideoChannelPlaylistsComponent } from '@app/+video-channels/video-channel-playlists/video-channel-playlists.component'
 
 @NgModule({
   imports: [
@@ -14,7 +15,8 @@ import { VideoChannelAboutComponent } from './video-channel-about/video-channel-
   declarations: [
     VideoChannelsComponent,
     VideoChannelVideosComponent,
-    VideoChannelAboutComponent
+    VideoChannelAboutComponent,
+    VideoChannelPlaylistsComponent
   ],
 
   exports: [
diff --git a/client/src/app/app-routing.module.ts b/client/src/app/app-routing.module.ts
index cff37a7d6..db8888dba 100644
--- a/client/src/app/app-routing.module.ts
+++ b/client/src/app/app-routing.module.ts
@@ -1,8 +1,9 @@
 import { NgModule } from '@angular/core'
-import { RouterModule, Routes } from '@angular/router'
+import { RouteReuseStrategy, RouterModule, Routes } from '@angular/router'
 
 import { PreloadSelectedModulesList } from './core'
 import { AppComponent } from '@app/app.component'
+import { CustomReuseStrategy } from '@app/core/routing/custom-reuse-strategy'
 
 const routes: Routes = [
   {
@@ -43,12 +44,14 @@ const routes: Routes = [
   imports: [
     RouterModule.forRoot(routes, {
       useHash: Boolean(history.pushState) === false,
+      scrollPositionRestoration: 'disabled',
       preloadingStrategy: PreloadSelectedModulesList,
-      anchorScrolling: 'enabled'
+      anchorScrolling: 'disabled'
     })
   ],
   providers: [
-    PreloadSelectedModulesList
+    PreloadSelectedModulesList,
+    { provide: RouteReuseStrategy, useClass: CustomReuseStrategy }
   ],
   exports: [ RouterModule ]
 })
diff --git a/client/src/app/app.component.scss b/client/src/app/app.component.scss
index 881f3ff31..3f8b9777a 100644
--- a/client/src/app/app.component.scss
+++ b/client/src/app/app.component.scss
@@ -48,9 +48,8 @@
       overflow: hidden;
 
       .instance-name {
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
+        @include ellipsis;
+
         width: 100%;
       }
 
diff --git a/client/src/app/app.component.ts b/client/src/app/app.component.ts
index 7583fdee8..915466af7 100644
--- a/client/src/app/app.component.ts
+++ b/client/src/app/app.component.ts
@@ -1,13 +1,14 @@
 import { Component, OnInit } from '@angular/core'
 import { DomSanitizer, SafeHtml } from '@angular/platform-browser'
-import { GuardsCheckStart, NavigationEnd, Router } from '@angular/router'
+import { Event, GuardsCheckStart, NavigationEnd, Router, Scroll } from '@angular/router'
 import { AuthService, RedirectService, ServerService, ThemeService } from '@app/core'
 import { is18nPath } from '../../../shared/models/i18n'
 import { ScreenService } from '@app/shared/misc/screen.service'
-import { skip, debounceTime } from 'rxjs/operators'
-import { HotkeysService, Hotkey } from 'angular2-hotkeys'
+import { debounceTime, filter, map, pairwise, skip } from 'rxjs/operators'
+import { Hotkey, HotkeysService } from 'angular2-hotkeys'
 import { I18n } from '@ngx-translate/i18n-polyfill'
 import { fromEvent } from 'rxjs'
+import { ViewportScroller } from '@angular/common'
 
 @Component({
   selector: 'my-app',
@@ -22,6 +23,7 @@ export class AppComponent implements OnInit {
 
   constructor (
     private i18n: I18n,
+    private viewportScroller: ViewportScroller,
     private router: Router,
     private authService: AuthService,
     private serverService: ServerService,
@@ -52,15 +54,6 @@ export class AppComponent implements OnInit {
   ngOnInit () {
     document.getElementById('incompatible-browser').className += ' browser-ok'
 
-    this.router.events.subscribe(e => {
-      if (e instanceof NavigationEnd) {
-        const pathname = window.location.pathname
-        if (!pathname || pathname === '/' || is18nPath(pathname)) {
-          this.redirectService.redirectToHomepage(true)
-        }
-      }
-    })
-
     this.authService.loadClientCredentials()
 
     if (this.isUserLoggedIn()) {
@@ -74,21 +67,101 @@ export class AppComponent implements OnInit {
     this.serverService.loadVideoLanguages()
     this.serverService.loadVideoLicences()
     this.serverService.loadVideoPrivacies()
+    this.serverService.loadVideoPlaylistPrivacies()
 
     // Do not display menu on small screens
     if (this.screenService.isInSmallView()) {
       this.isMenuDisplayed = false
     }
 
-    this.router.events.subscribe(
-      e => {
-        // User clicked on a link in the menu, change the page
-        if (e instanceof GuardsCheckStart && this.screenService.isInSmallView()) {
-          this.isMenuDisplayed = false
-        }
+    this.initRouteEvents()
+    this.injectJS()
+    this.injectCSS()
+
+    this.initHotkeys()
+
+    fromEvent(window, 'resize')
+      .pipe(debounceTime(200))
+      .subscribe(() => this.onResize())
+  }
+
+  isUserLoggedIn () {
+    return this.authService.isLoggedIn()
+  }
+
+  toggleMenu () {
+    this.isMenuDisplayed = !this.isMenuDisplayed
+    this.isMenuChangedByUser = true
+  }
+
+  onResize () {
+    this.isMenuDisplayed = window.innerWidth >= 800 && !this.isMenuChangedByUser
+  }
+
+  private initRouteEvents () {
+    let resetScroll = true
+    const eventsObs = this.router.events
+
+    const scrollEvent = eventsObs.pipe(filter((e: Event): e is Scroll => e instanceof Scroll))
+    const navigationEndEvent = eventsObs.pipe(filter((e: Event): e is NavigationEnd => e instanceof NavigationEnd))
+
+    scrollEvent.subscribe(e => {
+      if (e.position) {
+        return this.viewportScroller.scrollToPosition(e.position)
       }
-    )
 
+      if (e.anchor) {
+        return this.viewportScroller.scrollToAnchor(e.anchor)
+      }
+
+      if (resetScroll) {
+        return this.viewportScroller.scrollToPosition([ 0, 0 ])
+      }
+    })
+
+    // When we add the a-state parameter, we don't want to alter the scroll
+    navigationEndEvent.pipe(pairwise())
+                      .subscribe(([ e1, e2 ]) => {
+                        try {
+                          resetScroll = false
+
+                          const previousUrl = new URL(window.location.origin + e1.urlAfterRedirects)
+                          const nextUrl = new URL(window.location.origin + e2.urlAfterRedirects)
+
+                          if (previousUrl.pathname !== nextUrl.pathname) {
+                            resetScroll = true
+                            return
+                          }
+
+                          const nextSearchParams = nextUrl.searchParams
+                          nextSearchParams.delete('a-state')
+
+                          const previousSearchParams = previousUrl.searchParams
+
+                          nextSearchParams.sort()
+                          previousSearchParams.sort()
+
+                          if (nextSearchParams.toString() !== previousSearchParams.toString()) {
+                            resetScroll = true
+                          }
+                        } catch (e) {
+                          console.error('Cannot parse URL to check next scroll.', e)
+                          resetScroll = true
+                        }
+                      })
+
+    navigationEndEvent.pipe(
+      map(() => window.location.pathname),
+      filter(pathname => !pathname || pathname === '/' || is18nPath(pathname))
+    ).subscribe(() => this.redirectService.redirectToHomepage(true))
+
+    eventsObs.pipe(
+      filter((e: Event): e is GuardsCheckStart => e instanceof GuardsCheckStart),
+      filter(() => this.screenService.isInSmallView())
+    ).subscribe(() => this.isMenuDisplayed = false) // User clicked on a link in the menu, change the page
+  }
+
+  private injectJS () {
     // Inject JS
     this.serverService.configLoaded
         .subscribe(() => {
@@ -103,7 +176,9 @@ export class AppComponent implements OnInit {
             }
           }
         })
+  }
 
+  private injectCSS () {
     // Inject CSS if modified (admin config settings)
     this.serverService.configLoaded
         .pipe(skip(1)) // We only want to subscribe to reloads, because the CSS is already injected by the server
@@ -119,7 +194,9 @@ export class AppComponent implements OnInit {
             this.customCSS = this.domSanitizer.bypassSecurityTrustHtml(styleTag)
           }
         })
+  }
 
+  private initHotkeys () {
     this.hotkeysService.add([
       new Hotkey(['/', 's'], (event: KeyboardEvent): boolean => {
         document.getElementById('search-video').focus()
@@ -154,22 +231,5 @@ export class AppComponent implements OnInit {
         return false
       }, undefined, this.i18n('Toggle Dark theme'))
     ])
-
-    fromEvent(window, 'resize')
-      .pipe(debounceTime(200))
-      .subscribe(() => this.onResize())
-  }
-
-  isUserLoggedIn () {
-    return this.authService.isLoggedIn()
-  }
-
-  toggleMenu () {
-    this.isMenuDisplayed = !this.isMenuDisplayed
-    this.isMenuChangedByUser = true
-  }
-
-  onResize () {
-    this.isMenuDisplayed = window.innerWidth >= 800 && !this.isMenuChangedByUser
   }
 }
diff --git a/client/src/app/core/auth/auth.service.ts b/client/src/app/core/auth/auth.service.ts
index eaa822e0f..4fc04a05c 100644
--- a/client/src/app/core/auth/auth.service.ts
+++ b/client/src/app/core/auth/auth.service.ts
@@ -153,7 +153,7 @@ export class AuthService {
       response_type: 'code',
       grant_type: 'password',
       scope: 'upload',
-      username,
+      username: username.toLowerCase(),
       password
     }
 
diff --git a/client/src/app/core/core.module.ts b/client/src/app/core/core.module.ts
index 4ef3b1e73..d3e72afb4 100644
--- a/client/src/app/core/core.module.ts
+++ b/client/src/app/core/core.module.ts
@@ -19,6 +19,7 @@ import { ToastModule } from 'primeng/toast'
 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'
 
 @NgModule({
   imports: [
@@ -60,7 +61,8 @@ import { UserNotificationSocket } from '@app/core/notification/user-notification
     RedirectService,
     Notifier,
     MessageService,
-    UserNotificationSocket
+    UserNotificationSocket,
+    ServerConfigResolver
   ]
 })
 export class CoreModule {
diff --git a/client/src/app/core/hotkeys/hotkeys.component.scss b/client/src/app/core/hotkeys/hotkeys.component.scss
index 9af10b7c4..3aa0b6252 100644
--- a/client/src/app/core/hotkeys/hotkeys.component.scss
+++ b/client/src/app/core/hotkeys/hotkeys.component.scss
@@ -1,5 +1,6 @@
 .cfp-hotkeys-container {
-  display: table !important;
+  display: flex !important;
+  align-items: center;
   position: fixed;
   overflow: auto;
   width: 100%;
@@ -35,9 +36,7 @@
 
 .cfp-hotkeys {
   width: 100%;
-  height: 100%;
-  display: table-cell;
-  vertical-align: middle;
+  max-height: 100%;
 }
 
 .cfp-hotkeys table {
@@ -102,4 +101,4 @@
   .cfp-hotkeys {
     font-size: 1.2em;
   }
-}
\ No newline at end of file
+}
diff --git a/client/src/app/core/notification/user-notification-socket.service.ts b/client/src/app/core/notification/user-notification-socket.service.ts
index f367d9ae4..3f22da476 100644
--- a/client/src/app/core/notification/user-notification-socket.service.ts
+++ b/client/src/app/core/notification/user-notification-socket.service.ts
@@ -1,8 +1,7 @@
-import { Injectable } from '@angular/core'
+import { Injectable, NgZone } from '@angular/core'
 import { environment } from '../../../environments/environment'
 import { UserNotification as UserNotificationServer } from '../../../../../shared'
 import { Subject } from 'rxjs'
-import * as io from 'socket.io-client'
 import { AuthService } from '../auth'
 
 export type NotificationEvent = 'new' | 'read' | 'read-all'
@@ -14,28 +13,32 @@ export class UserNotificationSocket {
   private socket: SocketIOClient.Socket
 
   constructor (
-    private auth: AuthService
+    private auth: AuthService,
+    private ngZone: NgZone
   ) {}
 
   dispatch (type: NotificationEvent, notification?: UserNotificationServer) {
     this.notificationSubject.next({ type, notification })
   }
 
-  getMyNotificationsSocket () {
-    const socket = this.getSocket()
-
-    socket.on('new-notification', (n: UserNotificationServer) => this.dispatch('new', n))
+  async getMyNotificationsSocket () {
+    await this.initSocket()
 
     return this.notificationSubject.asObservable()
   }
 
-  private getSocket () {
-    if (this.socket) return this.socket
+  private async initSocket () {
+    if (this.socket) return
 
-    this.socket = io(environment.apiUrl + '/user-notifications', {
-      query: { accessToken: this.auth.getAccessToken() }
-    })
+    // FIXME: import('..') returns a struct module, containing a "default" field corresponding to our sanitizeHtml function
+    const io: typeof import ('socket.io-client') = (await import('socket.io-client') as any).default
 
-    return this.socket
+    this.ngZone.runOutsideAngular(() => {
+      this.socket = io(environment.apiUrl + '/user-notifications', {
+        query: { accessToken: this.auth.getAccessToken() }
+      })
+
+      this.socket.on('new-notification', (n: UserNotificationServer) => this.dispatch('new', n))
+    })
   }
 }
diff --git a/client/src/app/core/routing/custom-reuse-strategy.ts b/client/src/app/core/routing/custom-reuse-strategy.ts
new file mode 100644
index 000000000..a9f61acec
--- /dev/null
+++ b/client/src/app/core/routing/custom-reuse-strategy.ts
@@ -0,0 +1,81 @@
+import { ActivatedRouteSnapshot, DetachedRouteHandle, RouteReuseStrategy } from '@angular/router'
+
+export class CustomReuseStrategy implements RouteReuseStrategy {
+  storedRouteHandles = new Map<string, DetachedRouteHandle>()
+  recentlyUsed: string
+
+  private readonly MAX_SIZE = 2
+
+  // Decides if the route should be stored
+  shouldDetach (route: ActivatedRouteSnapshot): boolean {
+    return this.isReuseEnabled(route)
+  }
+
+  // Store the information for the route we're destructing
+  store (route: ActivatedRouteSnapshot, handle: DetachedRouteHandle): void {
+    if (!handle) return
+
+    const key = this.generateKey(route)
+    this.recentlyUsed = key
+
+    console.log('Storing component %s to reuse later.', key);
+
+    (handle as any).componentRef.instance.disableForReuse()
+
+    this.storedRouteHandles.set(key, handle)
+
+    this.gb()
+  }
+
+  // Return true if we have a stored route object for the next route
+  shouldAttach (route: ActivatedRouteSnapshot): boolean {
+    const key = this.generateKey(route)
+    return this.isReuseEnabled(route) && this.storedRouteHandles.has(key)
+  }
+
+  // If we returned true in shouldAttach(), now return the actual route data for restoration
+  retrieve (route: ActivatedRouteSnapshot): DetachedRouteHandle {
+    if (!this.isReuseEnabled(route)) return undefined
+
+    const key = this.generateKey(route)
+    this.recentlyUsed = key
+
+    console.log('Reusing component %s.', key)
+
+    const handle = this.storedRouteHandles.get(key)
+    if (!handle) return handle;
+
+    (handle as any).componentRef.instance.enabledForReuse()
+
+    return handle
+  }
+
+  // Reuse the route if we're going to and from the same route
+  shouldReuseRoute (future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
+    return future.routeConfig === curr.routeConfig
+  }
+
+  private gb () {
+    if (this.storedRouteHandles.size >= this.MAX_SIZE) {
+      this.storedRouteHandles.forEach((r, key) => {
+        if (key === this.recentlyUsed) return
+
+        console.log('Removing stored component %s.', key);
+
+        (r as any).componentRef.destroy()
+        this.storedRouteHandles.delete(key)
+      })
+    }
+  }
+
+  private generateKey (route: ActivatedRouteSnapshot) {
+    const reuse = route.data.reuse
+    if (!reuse) return undefined
+
+    return reuse.key + JSON.stringify(route.queryParams)
+  }
+
+  private isReuseEnabled (route: ActivatedRouteSnapshot) {
+    return route.data.reuse && route.data.reuse.enabled && route.queryParams['a-state']
+  }
+}
diff --git a/client/src/app/core/routing/disable-for-reuse-hook.ts b/client/src/app/core/routing/disable-for-reuse-hook.ts
new file mode 100644
index 000000000..c5eb5c578
--- /dev/null
+++ b/client/src/app/core/routing/disable-for-reuse-hook.ts
@@ -0,0 +1,7 @@
+export interface DisableForReuseHook {
+
+  disableForReuse (): void
+
+  enabledForReuse (): void
+
+}
diff --git a/client/src/app/core/routing/server-config-resolver.service.ts b/client/src/app/core/routing/server-config-resolver.service.ts
new file mode 100644
index 000000000..ec7d6428f
--- /dev/null
+++ b/client/src/app/core/routing/server-config-resolver.service.ts
@@ -0,0 +1,17 @@
+import { Injectable } from '@angular/core'
+import { Resolve } from '@angular/router'
+import { ServerService } from '@app/core/server'
+
+@Injectable()
+export class ServerConfigResolver implements Resolve<boolean> {
+  constructor (
+    private server: ServerService
+  ) {}
+
+  resolve () {
+    // FIXME: directly returning this.server.configLoaded does not seem to work
+    return new Promise<boolean>(res => {
+      return this.server.configLoaded.subscribe(() => res(true))
+    })
+  }
+}
diff --git a/client/src/app/core/server/server.service.ts b/client/src/app/core/server/server.service.ts
index 4ae72427b..3a8a535fd 100644
--- a/client/src/app/core/server/server.service.ts
+++ b/client/src/app/core/server/server.service.ts
@@ -4,23 +4,25 @@ import { Inject, Injectable, LOCALE_ID } from '@angular/core'
 import { peertubeLocalStorage } from '@app/shared/misc/peertube-local-storage'
 import { Observable, of, ReplaySubject } from 'rxjs'
 import { getCompleteLocale, ServerConfig } from '../../../../../shared'
-import { About } from '../../../../../shared/models/server/about.model'
 import { environment } from '../../../environments/environment'
 import { VideoConstant, VideoPrivacy } from '../../../../../shared/models/videos'
 import { isDefaultLocale, peertubeTranslate } from '../../../../../shared/models/i18n'
 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'
 
 @Injectable()
 export class ServerService {
   private static BASE_SERVER_URL = environment.apiUrl + '/api/v1/server/'
   private static BASE_CONFIG_URL = environment.apiUrl + '/api/v1/config/'
   private static BASE_VIDEO_URL = environment.apiUrl + '/api/v1/videos/'
+  private static BASE_VIDEO_PLAYLIST_URL = environment.apiUrl + '/api/v1/video-playlists/'
   private static BASE_LOCALE_URL = environment.apiUrl + '/client/locales/'
   private static CONFIG_LOCAL_STORAGE_KEY = 'server-config'
 
   configLoaded = new ReplaySubject<boolean>(1)
   videoPrivaciesLoaded = new ReplaySubject<boolean>(1)
+  videoPlaylistPrivaciesLoaded = new ReplaySubject<boolean>(1)
   videoCategoriesLoaded = new ReplaySubject<boolean>(1)
   videoLicencesLoaded = new ReplaySubject<boolean>(1)
   videoLanguagesLoaded = new ReplaySubject<boolean>(1)
@@ -32,6 +34,7 @@ export class ServerService {
       shortDescription: 'PeerTube, a federated (ActivityPub) video streaming platform  ' +
                         'using P2P (BitTorrent) directly in the web browser with WebTorrent and Angular.',
       defaultClientRoute: '',
+      isNSFW: false,
       defaultNSFWPolicy: 'do_not_list' as 'do_not_list',
       customizations: {
         javascript: '',
@@ -51,7 +54,10 @@ export class ServerService {
       requiresEmailVerification: false
     },
     transcoding: {
-      enabledResolutions: []
+      enabledResolutions: [],
+      hls: {
+        enabled: false
+      }
     },
     avatar: {
       file: {
@@ -92,12 +98,23 @@ export class ServerService {
       videos: {
         intervalDays: 0
       }
+    },
+    autoBlacklist: {
+      videos: {
+        ofUsers: {
+          enabled: false
+        }
+      }
+    },
+    tracker: {
+      enabled: true
     }
   }
   private videoCategories: Array<VideoConstant<number>> = []
   private videoLicences: Array<VideoConstant<number>> = []
   private videoLanguages: Array<VideoConstant<string>> = []
   private videoPrivacies: Array<VideoConstant<VideoPrivacy>> = []
+  private videoPlaylistPrivacies: Array<VideoConstant<VideoPlaylistPrivacy>> = []
 
   constructor (
     private http: HttpClient,
@@ -118,19 +135,28 @@ export class ServerService {
   }
 
   loadVideoCategories () {
-    return this.loadVideoAttributeEnum('categories', this.videoCategories, this.videoCategoriesLoaded, true)
+    return this.loadAttributeEnum(ServerService.BASE_VIDEO_URL, 'categories', this.videoCategories, this.videoCategoriesLoaded, true)
   }
 
   loadVideoLicences () {
-    return this.loadVideoAttributeEnum('licences', this.videoLicences, this.videoLicencesLoaded)
+    return this.loadAttributeEnum(ServerService.BASE_VIDEO_URL, 'licences', this.videoLicences, this.videoLicencesLoaded)
   }
 
   loadVideoLanguages () {
-    return this.loadVideoAttributeEnum('languages', this.videoLanguages, this.videoLanguagesLoaded, true)
+    return this.loadAttributeEnum(ServerService.BASE_VIDEO_URL, 'languages', this.videoLanguages, this.videoLanguagesLoaded, true)
   }
 
   loadVideoPrivacies () {
-    return this.loadVideoAttributeEnum('privacies', this.videoPrivacies, this.videoPrivaciesLoaded)
+    return this.loadAttributeEnum(ServerService.BASE_VIDEO_URL, 'privacies', this.videoPrivacies, this.videoPrivaciesLoaded)
+  }
+
+  loadVideoPlaylistPrivacies () {
+    return this.loadAttributeEnum(
+      ServerService.BASE_VIDEO_PLAYLIST_URL,
+      'privacies',
+      this.videoPlaylistPrivacies,
+      this.videoPlaylistPrivaciesLoaded
+    )
   }
 
   getConfig () {
@@ -153,7 +179,12 @@ export class ServerService {
     return this.videoPrivacies
   }
 
-  private loadVideoAttributeEnum (
+  getVideoPlaylistPrivacies () {
+    return this.videoPlaylistPrivacies
+  }
+
+  private loadAttributeEnum (
+    baseUrl: string,
     attributeName: 'categories' | 'licences' | 'languages' | 'privacies',
     hashToPopulate: VideoConstant<string | number>[],
     notifier: ReplaySubject<boolean>,
@@ -162,7 +193,7 @@ export class ServerService {
     this.localeObservable
         .pipe(
           switchMap(translations => {
-            return this.http.get<{ [id: string]: string }>(ServerService.BASE_VIDEO_URL + attributeName)
+            return this.http.get<{ [id: string]: string }>(baseUrl + attributeName)
                        .pipe(map(data => ({ data, translations })))
           })
         )
diff --git a/client/src/app/login/login-routing.module.ts b/client/src/app/login/login-routing.module.ts
index 4d8913041..5a41f4e7e 100644
--- a/client/src/app/login/login-routing.module.ts
+++ b/client/src/app/login/login-routing.module.ts
@@ -1,9 +1,8 @@
 import { NgModule } from '@angular/core'
 import { RouterModule, Routes } from '@angular/router'
-
 import { MetaGuard } from '@ngx-meta/core'
-
 import { LoginComponent } from './login.component'
+import { ServerConfigResolver } from '@app/core/routing/server-config-resolver.service'
 
 const loginRoutes: Routes = [
   {
@@ -14,6 +13,9 @@ const loginRoutes: Routes = [
       meta: {
         title: 'Login'
       }
+    },
+    resolve: {
+      serverConfigLoaded: ServerConfigResolver
     }
   }
 ]
diff --git a/client/src/app/menu/avatar-notification.component.html b/client/src/app/menu/avatar-notification.component.html
index 4ef3f0e89..a5ef43d42 100644
--- a/client/src/app/menu/avatar-notification.component.html
+++ b/client/src/app/menu/avatar-notification.component.html
@@ -1,6 +1,6 @@
 <div
   [ngbPopover]="popContent" autoClose="outside" placement="bottom-left" container="body" popoverClass="popover-notifications"
-  i18n-title title="View your notifications" class="notification-avatar" #popover="ngbPopover"
+  i18n-title title="View your notifications" class="notification-avatar" #popover="ngbPopover" (hidden)="onPopoverHidden()"
 >
   <div *ngIf="unreadNotifications > 0" class="unread-notifications">{{ unreadNotifications }}</div>
 
@@ -8,16 +8,25 @@
 </div>
 
 <ng-template #popContent>
-  <div class="notifications-header">
-    <div i18n>Notifications</div>
+  <div class="content" [ngClass]="{ loaded: loaded }">
+    <div class="notifications-header">
+      <div i18n>Notifications</div>
 
-    <a
-      i18n-title title="Update your notification preferences" class="glyphicon glyphicon-cog"
-      routerLink="/my-account/settings" fragment="notifications"
-    ></a>
-  </div>
+      <a
+        i18n-title title="Update your notification preferences" class="glyphicon glyphicon-cog"
+        routerLink="/my-account/settings" fragment="notifications"
+      ></a>
+    </div>
+
+    <div *ngIf="!loaded" class="loader">
+      <my-loader [loading]="!loaded"></my-loader>
+    </div>
 
-  <my-user-notifications [ignoreLoadingBar]="true" [infiniteScroll]="false" itemsPerPage="10"></my-user-notifications>
+    <my-user-notifications
+      [ignoreLoadingBar]="true" [infiniteScroll]="false" itemsPerPage="10"
+      (notificationsLoaded)="onNotificationLoaded()"
+    ></my-user-notifications>
 
-  <a class="all-notifications" routerLink="/my-account/notifications" i18n>See all your notifications</a>
+    <a *ngIf="loaded" class="all-notifications" routerLink="/my-account/notifications" i18n>See all your notifications</a>
+  </div>
 </ng-template>
diff --git a/client/src/app/menu/avatar-notification.component.scss b/client/src/app/menu/avatar-notification.component.scss
index e785db788..201668b6e 100644
--- a/client/src/app/menu/avatar-notification.component.scss
+++ b/client/src/app/menu/avatar-notification.component.scss
@@ -9,11 +9,27 @@
       padding: 0;
       font-size: 14px;
       font-family: $main-fonts;
-      overflow-y: auto;
-      max-height: 500px;
+      overflow-y: scroll;
       width: 400px;
       box-shadow: 0 6px 14px rgba(0, 0, 0, 0.30);
 
+      .loader {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        padding: 5px 0;
+      }
+
+      .content {
+        max-height: 150px;
+        transition: max-height 0.15s ease-out;
+
+        &.loaded {
+          max-height: 500px;
+        }
+      }
+
       .notifications-header {
         display: flex;
         justify-content: space-between;
diff --git a/client/src/app/menu/avatar-notification.component.ts b/client/src/app/menu/avatar-notification.component.ts
index f1af08096..a77a001ca 100644
--- a/client/src/app/menu/avatar-notification.component.ts
+++ b/client/src/app/menu/avatar-notification.component.ts
@@ -17,6 +17,7 @@ export class AvatarNotificationComponent implements OnInit, OnDestroy {
   @Input() user: User
 
   unreadNotifications = 0
+  loaded = false
 
   private notificationSub: Subscription
   private routeSub: Subscription
@@ -26,18 +27,19 @@ export class AvatarNotificationComponent implements OnInit, OnDestroy {
     private userNotificationSocket: UserNotificationSocket,
     private notifier: Notifier,
     private router: Router
-  ) {}
+  ) {
+  }
 
   ngOnInit () {
     this.userNotificationService.countUnreadNotifications()
-      .subscribe(
-        result => {
-          this.unreadNotifications = Math.min(result, 99) // Limit number to 99
-          this.subscribeToNotifications()
-        },
+        .subscribe(
+          result => {
+            this.unreadNotifications = Math.min(result, 99) // Limit number to 99
+            this.subscribeToNotifications()
+          },
 
-        err => this.notifier.error(err.message)
-      )
+          err => this.notifier.error(err.message)
+        )
 
     this.routeSub = this.router.events
                         .pipe(filter(event => event instanceof NavigationEnd))
@@ -53,13 +55,22 @@ export class AvatarNotificationComponent implements OnInit, OnDestroy {
     this.popover.close()
   }
 
-  private subscribeToNotifications () {
-    this.notificationSub = this.userNotificationSocket.getMyNotificationsSocket()
-                               .subscribe(data => {
-                                 if (data.type === 'new') return this.unreadNotifications++
-                                 if (data.type === 'read') return this.unreadNotifications--
-                                 if (data.type === 'read-all') return this.unreadNotifications = 0
-                               })
+  onPopoverHidden () {
+    this.loaded = false
+  }
+
+  onNotificationLoaded () {
+    this.loaded = true
+  }
+
+  private async subscribeToNotifications () {
+    const obs = await this.userNotificationSocket.getMyNotificationsSocket()
+
+    this.notificationSub = obs.subscribe(data => {
+      if (data.type === 'new') return this.unreadNotifications++
+      if (data.type === 'read') return this.unreadNotifications--
+      if (data.type === 'read-all') return this.unreadNotifications = 0
+    })
   }
 
 }
diff --git a/client/src/app/menu/menu.component.html b/client/src/app/menu/menu.component.html
index 1e532ec13..e80e6b803 100644
--- a/client/src/app/menu/menu.component.html
+++ b/client/src/app/menu/menu.component.html
@@ -1,5 +1,5 @@
 <div class="menu-wrapper">
-  <menu>
+  <menu [ngClass]="{ 'logged-in': isLoggedIn }">
     <div class="top-menu">
       <div *ngIf="isLoggedIn" class="logged-in-block">
         <my-avatar-notification [user]="user"></my-avatar-notification>
@@ -10,23 +10,19 @@
         </div>
 
         <div class="logged-in-more" ngbDropdown placement="bottom-right">
-          <span class="glyphicon glyphicon-option-vertical" ngbDropdownToggle role="button"></span>
+          <my-global-icon iconName="more-vertical" ngbDropdownToggle role="button"></my-global-icon>
 
           <div ngbDropdownMenu>
-            <a *ngIf="user.account" i18n [routerLink]="[ '/accounts', user.account.nameWithHost ]" class="dropdown-item">
-             My public profile
+            <a *ngIf="user.account" [routerLink]="[ '/accounts', user.account.nameWithHost ]" class="dropdown-item">
+              <my-global-icon iconName="go"></my-global-icon> <ng-container i18n>My public profile</ng-container>
             </a>
 
-            <a i18n routerLink="/my-account" class="dropdown-item">
-              My account
+            <a routerLink="/my-account" class="dropdown-item">
+              <my-global-icon iconName="user"></my-global-icon> <ng-container i18n>My account</ng-container>
             </a>
 
-            <a i18n routerLink="/my-account/videos" class="dropdown-item">
-              My videos
-            </a>
-
-            <a i18n (click)="logout($event)" class="dropdown-item" href="#">
-              Log out
+            <a (click)="logout($event)" class="dropdown-item" href="#">
+              <my-global-icon iconName="sign-out"></my-global-icon> <ng-container i18n>Log out</ng-container>
             </a>
           </div>
         </div>
@@ -37,31 +33,51 @@
         <a i18n *ngIf="isRegistrationAllowed()" routerLink="/signup" class="create-account-button">Create an account</a>
       </div>
 
-      <div class="panel-block">
-        <div i18n class="block-title">Videos</div>
+      <div *ngIf="isLoggedIn" class="panel-block">
+        <div i18n class="block-title">My library</div>
+
+        <a routerLink="/my-account/videos" routerLinkActive="active">
+          <my-global-icon iconName="videos"></my-global-icon>
+          <ng-container i18n>Videos</ng-container>
+        </a>
+
+        <a routerLink="/my-account/video-playlists" routerLinkActive="active">
+          <my-global-icon iconName="playlists"></my-global-icon>
+          <ng-container i18n>Playlists</ng-container>
+        </a>
 
-        <a *ngIf="isLoggedIn" routerLink="/videos/subscriptions" routerLinkActive="active">
-          <span class="icon icon-videos-subscriptions"></span>
+        <a routerLink="/videos/subscriptions" routerLinkActive="active">
+          <my-global-icon iconName="subscriptions"></my-global-icon>
           <ng-container i18n>Subscriptions</ng-container>
         </a>
 
+        <a routerLink="/my-account/history/videos" routerLinkActive="active">
+          <my-global-icon iconName="history"></my-global-icon>
+          <ng-container i18n>History</ng-container>
+        </a>
+
+      </div>
+
+      <div class="panel-block">
+        <div i18n class="block-title">Videos</div>
+
         <a routerLink="/videos/overview" routerLinkActive="active">
-          <span class="icon icon-videos-overview"></span>
+          <my-global-icon iconName="globe"></my-global-icon>
           <ng-container i18n>Overview</ng-container>
         </a>
 
         <a routerLink="/videos/trending" routerLinkActive="active">
-          <span class="icon icon-videos-trending"></span>
+          <my-global-icon iconName="trending"></my-global-icon>
           <ng-container i18n>Trending</ng-container>
         </a>
 
         <a routerLink="/videos/recently-added" routerLinkActive="active">
-          <span class="icon icon-videos-recently-added"></span>
+          <my-global-icon iconName="recently-added"></my-global-icon>
           <ng-container i18n>Recently added</ng-container>
         </a>
 
         <a routerLink="/videos/local" routerLinkActive="active">
-          <span class="icon icon-videos-local"></span>
+          <my-global-icon iconName="home"></my-global-icon>
           <ng-container i18n>Local</ng-container>
         </a>
       </div>
@@ -70,12 +86,12 @@
         <div class="block-title" i18n>More</div>
 
         <a *ngIf="userHasAdminAccess" [routerLink]="getFirstAdminRouteAvailable()" routerLinkActive="active">
-          <span class="icon icon-administration"></span>
+          <my-global-icon iconName="administration"></my-global-icon>
           <ng-container i18n>Administration</ng-container>
         </a>
 
         <a routerLink="/about" routerLinkActive="active">
-          <span class="icon icon-about"></span>
+          <my-global-icon iconName="about"></my-global-icon>
           <ng-container i18n>About</ng-container>
         </a>
       </div>
diff --git a/client/src/app/menu/menu.component.scss b/client/src/app/menu/menu.component.scss
index 69704674a..2f23fa5f8 100644
--- a/client/src/app/menu/menu.component.scss
+++ b/client/src/app/menu/menu.component.scss
@@ -10,12 +10,12 @@
 }
 
 menu {
+  @include ellipsis;
+
   background-color: var(--menuBackgroundColor);
   margin: 0;
   padding: 0;
   height: 100%;
-  white-space: nowrap;
-  text-overflow: ellipsis;
   overflow: auto;
   color: var(--menuForegroundColor);
   display: flex;
@@ -26,6 +26,16 @@ menu {
     overflow-y: auto;
   }
 
+  &.logged-in {
+    .panel-block {
+      margin-bottom: 25px;
+    }
+
+    .block-title {
+      margin-bottom: 15px;
+    }
+  }
+
   .top-menu {
     flex-grow: 1;
     width: $menu-width;
@@ -37,9 +47,11 @@ menu {
     display: flex;
     align-items: center;
     justify-content: center;
-    margin-bottom: 35px;
+    margin-bottom: 20px;
 
     .logged-in-info {
+      @include ellipsis;
+
       flex-grow: 1;
       white-space: nowrap;
       overflow: hidden;
@@ -55,11 +67,10 @@ menu {
       }
 
       .logged-in-username {
+        @include ellipsis;
+
         font-size: 13px;
         color: #C6C6C6;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
         max-width: 140px;
       }
     }
@@ -67,14 +78,33 @@ menu {
     .logged-in-more {
       margin-right: 20px;
 
-      .glyphicon {
+      my-global-icon {
+        @include apply-svg-color(var(--mainBackgroundColor));
+
         cursor: pointer;
-        font-size: 18px;
 
         &::after {
           border: none;
         }
       }
+
+      .dropdown-item {
+        @include dropdown-with-icon-item;
+
+        my-global-icon {
+          @include apply-svg-color(var(--mainForegroundColor));
+
+          width: 22px;
+          height: 22px;
+
+          &[iconName="sign-out"] {
+            position: relative;
+            right: -1px;
+            height: 21px;
+            width: 21px;
+          }
+        }
+      }
     }
   }
 
@@ -135,57 +165,31 @@ menu {
         background-color: rgba(255, 255, 255, 0.10);
       }
 
-      .icon {
-        @include icon(22px);
+      my-global-icon {
+        @include apply-svg-color(#808080);
 
+        display: flex;
+        width: 22px;
+        height: 22px;
         margin-right: 18px;
 
-        &.icon-videos-subscriptions {
-          position: relative;
-          top: -1px;
-          background-image: url('../../assets/images/menu/subscriptions.svg');
-        }
-
-        &.icon-videos-overview {
-          position: relative;
-          background-image: url('../../assets/images/menu/globe.svg');
-        }
-
-        &.icon-videos-trending {
-          position: relative;
-          top: -1px;
-          background-image: url('../../assets/images/menu/trending.svg');
-        }
+        &[iconName="playlists"] {
+          height: 24px;
+          width: 24px;
 
-        &.icon-videos-recently-added {
-          width: 23px;
-          height: 23px;
-          background-image: url('../../assets/images/menu/recently-added.svg');
+          margin-right: 16px;
         }
 
-        &.icon-videos-local {
-          width: 23px;
-          height: 23px;
-
+        &[iconName="videos"] {
           position: relative;
-          top: -1px;
-
-          background-image: url('../../assets/images/menu/home.svg');
-        }
-
-        &.icon-administration {
-          width: 23px;
-          height: 23px;
-
-          background-image: url('../../assets/images/menu/administration.svg');
+          right: -1px;
         }
+      }
 
-        &.icon-about  {
-          width: 23px;
-          height: 23px;
+      .icon {
+        @include icon(22px);
 
-          background-image: url('../../assets/images/menu/about.svg');
-        }
+        margin-right: 18px;
       }
     }
   }
@@ -224,7 +228,6 @@ menu {
           height: 24px;
 
           background-image: url('../../assets/images/menu/keyboard.png');
-          background-color: #fff;
           filter: invert(100%);
         }
 
diff --git a/client/src/app/search/advanced-search.model.ts b/client/src/app/search/advanced-search.model.ts
index 033fa9bba..5b713e145 100644
--- a/client/src/app/search/advanced-search.model.ts
+++ b/client/src/app/search/advanced-search.model.ts
@@ -4,6 +4,9 @@ export class AdvancedSearch {
   startDate: string // ISO 8601
   endDate: string // ISO 8601
 
+  originallyPublishedStartDate: string // ISO 8601
+  originallyPublishedEndDate: string // ISO 8601
+
   nsfw: NSFWQuery
 
   categoryOneOf: string
@@ -23,6 +26,8 @@ export class AdvancedSearch {
   constructor (options?: {
     startDate?: string
     endDate?: string
+    originallyPublishedStartDate?: string
+    originallyPublishedEndDate?: string
     nsfw?: NSFWQuery
     categoryOneOf?: string
     licenceOneOf?: string
@@ -37,6 +42,9 @@ export class AdvancedSearch {
 
     this.startDate = options.startDate || undefined
     this.endDate = options.endDate || undefined
+    this.originallyPublishedStartDate = options.originallyPublishedStartDate || undefined
+    this.originallyPublishedEndDate = options.originallyPublishedEndDate || undefined
+
     this.nsfw = options.nsfw || undefined
     this.categoryOneOf = options.categoryOneOf || undefined
     this.licenceOneOf = options.licenceOneOf || undefined
@@ -66,6 +74,8 @@ export class AdvancedSearch {
   reset () {
     this.startDate = undefined
     this.endDate = undefined
+    this.originallyPublishedStartDate = undefined
+    this.originallyPublishedEndDate = undefined
     this.nsfw = undefined
     this.categoryOneOf = undefined
     this.licenceOneOf = undefined
@@ -82,6 +92,8 @@ export class AdvancedSearch {
     return {
       startDate: this.startDate,
       endDate: this.endDate,
+      originallyPublishedStartDate: this.originallyPublishedStartDate,
+      originallyPublishedEndDate: this.originallyPublishedEndDate,
       nsfw: this.nsfw,
       categoryOneOf: this.categoryOneOf,
       licenceOneOf: this.licenceOneOf,
@@ -98,6 +110,8 @@ export class AdvancedSearch {
     return {
       startDate: this.startDate,
       endDate: this.endDate,
+      originallyPublishedStartDate: this.originallyPublishedStartDate,
+      originallyPublishedEndDate: this.originallyPublishedEndDate,
       nsfw: this.nsfw,
       categoryOneOf: this.intoArray(this.categoryOneOf),
       licenceOneOf: this.intoArray(this.licenceOneOf),
diff --git a/client/src/app/search/search-filters.component.html b/client/src/app/search/search-filters.component.html
index 74bb781f4..8220a990b 100644
--- a/client/src/app/search/search-filters.component.html
+++ b/client/src/app/search/search-filters.component.html
@@ -21,6 +21,27 @@
       </div>
 
       <div class="form-group">
+        <label i18n for="original-publication-after">Original publication year</label>
+
+        <div class="row">
+          <div class="col-sm-6">
+            <input
+              type="text" id="original-publication-after" name="original-publication-after"
+              i18n-placeholder placeholder="After..."
+              [(ngModel)]="originallyPublishedStartYear"
+            >
+          </div>
+          <div class="col-sm-6">
+            <input
+              type="text" id="original-publication-before" name="original-publication-before"
+              i18n-placeholder placeholder="Before..."
+              [(ngModel)]="originallyPublishedEndYear"
+            >
+          </div>
+        </div>
+      </div>
+
+      <div class="form-group">
         <div i18n class="radio-label">Duration</div>
 
         <div class="peertube-radio-container" *ngFor="let duration of durationRanges">
@@ -93,4 +114,4 @@
   <div class="submit-button">
     <input type="submit" i18n-value value="Filter">
   </div>
-</form>
\ No newline at end of file
+</form>
diff --git a/client/src/app/search/search-filters.component.ts b/client/src/app/search/search-filters.component.ts
index 3fdc6df35..762a6b7f2 100644
--- a/client/src/app/search/search-filters.component.ts
+++ b/client/src/app/search/search-filters.component.ts
@@ -25,6 +25,9 @@ export class SearchFiltersComponent implements OnInit {
   publishedDateRange: string
   durationRange: string
 
+  originallyPublishedStartYear: string
+  originallyPublishedEndYear: string
+
   constructor (
     private i18n: I18n,
     private serverService: ServerService
@@ -86,15 +89,27 @@ export class SearchFiltersComponent implements OnInit {
 
     this.loadFromDurationRange()
     this.loadFromPublishedRange()
+    this.loadOriginallyPublishedAtYears()
   }
 
   formUpdated () {
     this.updateModelFromDurationRange()
     this.updateModelFromPublishedRange()
+    this.updateModelFromOriginallyPublishedAtYears()
 
     this.filtered.emit(this.advancedSearch)
   }
 
+  private loadOriginallyPublishedAtYears () {
+    this.originallyPublishedStartYear = this.advancedSearch.originallyPublishedStartDate
+      ? new Date(this.advancedSearch.originallyPublishedStartDate).getFullYear().toString()
+      : null
+
+    this.originallyPublishedEndYear = this.advancedSearch.originallyPublishedEndDate
+      ? new Date(this.advancedSearch.originallyPublishedEndDate).getFullYear().toString()
+      : null
+  }
+
   private loadFromDurationRange () {
     if (this.advancedSearch.durationMin || this.advancedSearch.durationMax) {
       const fourMinutes = 60 * 4
@@ -127,6 +142,32 @@ export class SearchFiltersComponent implements OnInit {
     }
   }
 
+  private updateModelFromOriginallyPublishedAtYears () {
+    const baseDate = new Date()
+    baseDate.setHours(0, 0, 0, 0)
+    baseDate.setMonth(0, 1)
+
+    if (this.originallyPublishedStartYear) {
+      const year = parseInt(this.originallyPublishedStartYear, 10)
+      const start = new Date(baseDate)
+      start.setFullYear(year)
+
+      this.advancedSearch.originallyPublishedStartDate = start.toISOString()
+    } else {
+      this.advancedSearch.originallyPublishedStartDate = null
+    }
+
+    if (this.originallyPublishedEndYear) {
+      const year = parseInt(this.originallyPublishedEndYear, 10)
+      const end = new Date(baseDate)
+      end.setFullYear(year)
+
+      this.advancedSearch.originallyPublishedEndDate = end.toISOString()
+    } else {
+      this.advancedSearch.originallyPublishedEndDate = null
+    }
+  }
+
   private updateModelFromDurationRange () {
     if (!this.durationRange) return
 
@@ -174,4 +215,5 @@ export class SearchFiltersComponent implements OnInit {
 
     this.advancedSearch.startDate = date.toISOString()
   }
+
 }
diff --git a/client/src/app/search/search.component.html b/client/src/app/search/search.component.html
index 82a5f0f26..0a9f78cb2 100644
--- a/client/src/app/search/search.component.html
+++ b/client/src/app/search/search.component.html
@@ -48,13 +48,10 @@
     </div>
 
     <div *ngIf="isVideo(result)" class="entry video">
-      <my-video-thumbnail [video]="result" [nsfw]="isVideoBlur(result)"></my-video-thumbnail>
-
-      <div class="video-info">
-        <a tabindex="-1" class="video-info-name" [routerLink]="['/videos/watch', result.uuid]" [attr.title]="result.name">{{ result.name }}</a>
-        <span i18n class="video-info-date-views">{{ result.publishedAt | myFromNow }} - {{ result.views | myNumberFormatter }} views</span>
-        <a tabindex="-1" class="video-info-account" [routerLink]="[ '/accounts', result.byAccount ]">{{ result.byAccount }}</a>
-      </div>
+      <my-video-miniature
+        [video]="result" [user]="user" [displayAsRow]="true"
+        (videoBlacklisted)="removeVideoFromArray(result)" (videoRemoved)="removeVideoFromArray(result)"
+      ></my-video-miniature>
     </div>
   </ng-container>
 
diff --git a/client/src/app/search/search.component.scss b/client/src/app/search/search.component.scss
index 6de13d276..4e3ce1c96 100644
--- a/client/src/app/search/search.component.scss
+++ b/client/src/app/search/search.component.scss
@@ -55,53 +55,14 @@
     padding-bottom: 20px;
     margin-bottom: 20px;
 
-    &.video {
-
-      my-video-thumbnail {
-        margin-right: 10px;
-      }
-
-      .video-info {
-        flex-grow: 1;
-
-        .video-info-name {
-          @include disable-default-a-behaviour;
-
-          color: var(--mainForegroundColor);
-          display: block;
-          width: fit-content;
-          font-size: 18px;
-          font-weight: $font-semibold;
-        }
-
-        .video-info-date-views {
-          font-size: 14px;
-        }
-
-        .video-info-account {
-          @include disable-default-a-behaviour;
-
-          display: block;
-          width: fit-content;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          white-space: nowrap;
-          font-size: 14px;
-          color: $grey-foreground-color;
-
-          &:hover {
-            color: $grey-foreground-hover-color;
-          }
-        }
-      }
-    }
-
     &.video-channel {
-
       img {
-        @include avatar(120px);
+        $image-size: 130px;
+        $margin-size: ($video-thumbnail-width - $image-size) / 2; // So we have the same width than the video miniature
+
+        @include avatar($image-size);
 
-        margin: 0 50px 0 40px;
+        margin: 0 ($margin-size + 10) 0 $margin-size;
       }
 
       .video-channel-info {
diff --git a/client/src/app/search/search.component.ts b/client/src/app/search/search.component.ts
index c4a4b1fde..a7ddbe1f8 100644
--- a/client/src/app/search/search.component.ts
+++ b/client/src/app/search/search.component.ts
@@ -1,6 +1,6 @@
 import { Component, OnDestroy, OnInit } from '@angular/core'
 import { ActivatedRoute, Router } from '@angular/router'
-import { AuthService, Notifier, ServerService } from '@app/core'
+import { AuthService, Notifier } from '@app/core'
 import { forkJoin, Subscription } from 'rxjs'
 import { SearchService } from '@app/search/search.service'
 import { ComponentPagination } from '@app/shared/rest/component-pagination.model'
@@ -41,10 +41,13 @@ export class SearchComponent implements OnInit, OnDestroy {
     private metaService: MetaService,
     private notifier: Notifier,
     private searchService: SearchService,
-    private authService: AuthService,
-    private serverService: ServerService
+    private authService: AuthService
   ) { }
 
+  get user () {
+    return this.authService.getUser()
+  }
+
   ngOnInit () {
     this.subActivatedRoute = this.route.queryParams.subscribe(
       queryParams => {
@@ -76,10 +79,6 @@ export class SearchComponent implements OnInit, OnDestroy {
     if (this.subActivatedRoute) this.subActivatedRoute.unsubscribe()
   }
 
-  isVideoBlur (video: Video) {
-    return video.isVideoNSFWForUser(this.authService.getUser(), this.serverService.getConfig())
-  }
-
   isVideoChannel (d: VideoChannel | Video): d is VideoChannel {
     return d instanceof VideoChannel
   }
@@ -139,6 +138,10 @@ export class SearchComponent implements OnInit, OnDestroy {
     return this.advancedSearch.size()
   }
 
+  removeVideoFromArray (video: Video) {
+    this.results = this.results.filter(r => !this.isVideo(r) || r.id !== video.id)
+  }
+
   private resetPagination () {
     this.pagination.currentPage = 1
     this.pagination.totalItems = null
diff --git a/client/src/app/shared/misc/from-now.pipe.ts b/client/src/app/shared/angular/from-now.pipe.ts
index 00b5be6c9..3a9a76411 100644
--- a/client/src/app/shared/misc/from-now.pipe.ts
+++ b/client/src/app/shared/angular/from-now.pipe.ts
@@ -35,6 +35,6 @@ export class FromNowPipe implements PipeTransform {
     interval = Math.floor(seconds / 60)
     if (interval >= 1) return this.i18n('{{interval}} min ago', { interval })
 
-    return this.i18n('{{interval}} sec ago', { interval: Math.floor(seconds) })
+    return this.i18n('{{interval}} sec ago', { interval: Math.max(0, seconds) })
   }
 }
diff --git a/client/src/app/shared/misc/number-formatter.pipe.ts b/client/src/app/shared/angular/number-formatter.pipe.ts
index 8a0756a36..8a0756a36 100644
--- a/client/src/app/shared/misc/number-formatter.pipe.ts
+++ b/client/src/app/shared/angular/number-formatter.pipe.ts
diff --git a/client/src/app/shared/misc/object-length.pipe.ts b/client/src/app/shared/angular/object-length.pipe.ts
index 84d182052..84d182052 100644
--- a/client/src/app/shared/misc/object-length.pipe.ts
+++ b/client/src/app/shared/angular/object-length.pipe.ts
diff --git a/client/src/app/shared/angular/peertube-template.directive.ts b/client/src/app/shared/angular/peertube-template.directive.ts
new file mode 100644
index 000000000..a514b6057
--- /dev/null
+++ b/client/src/app/shared/angular/peertube-template.directive.ts
@@ -0,0 +1,12 @@
+import { Directive, Input, TemplateRef } from '@angular/core'
+
+@Directive({
+  selector: '[ptTemplate]'
+})
+export class PeerTubeTemplateDirective {
+  @Input('ptTemplate') name: string
+
+  constructor (public template: TemplateRef<any>) {
+    // empty
+  }
+}
diff --git a/client/src/app/shared/buttons/action-dropdown.component.html b/client/src/app/shared/buttons/action-dropdown.component.html
index 114b1d71f..cc244dc76 100644
--- a/client/src/app/shared/buttons/action-dropdown.component.html
+++ b/client/src/app/shared/buttons/action-dropdown.component.html
@@ -1,9 +1,11 @@
 <div class="dropdown-root" ngbDropdown [placement]="placement">
   <div
-    class="action-button" [ngClass]="{ small: buttonSize === 'small', grey: theme === 'grey', orange: theme === 'orange' }"
+    class="action-button" [ngClass]="{ small: buttonSize === 'small', grey: theme === 'grey', orange: theme === 'orange', 'button-styled': buttonStyled }"
     ngbDropdownToggle role="button"
   >
-    <my-global-icon *ngIf="!label" class="more-icon" iconName="more"></my-global-icon>
+    <my-global-icon *ngIf="!label && buttonDirection === 'horizontal'" class="more-icon" iconName="more-horizontal"></my-global-icon>
+    <my-global-icon *ngIf="!label && buttonDirection === 'vertical'" class="more-icon" iconName="more-vertical"></my-global-icon>
+
     <span *ngIf="label" class="dropdown-toggle">{{ label }}</span>
   </div>
 
@@ -12,15 +14,24 @@
 
       <ng-container *ngFor="let action of actions">
         <ng-container *ngIf="action.isDisplayed === undefined || action.isDisplayed(entry) === true">
-          <a *ngIf="action.linkBuilder" class="dropdown-item" [routerLink]="action.linkBuilder(entry)">{{ action.label }}</a>
 
-          <span *ngIf="!action.linkBuilder" class="custom-action dropdown-item" (click)="action.handler(entry)" role="button">
+          <a *ngIf="action.linkBuilder" [ngClass]="{ 'with-icon': !!action.iconName }" class="dropdown-item" [routerLink]="action.linkBuilder(entry)">
+            <my-global-icon *ngIf="action.iconName" [iconName]="action.iconName" [ngClass]="'icon-' + action.iconName"></my-global-icon>
+            {{ action.label }}
+          </a>
+
+          <span
+            *ngIf="!action.linkBuilder" [ngClass]="{ 'with-icon': !!action.iconName }" (click)="action.handler(entry)"
+            class="custom-action dropdown-item" role="button"
+          >
+            <my-global-icon *ngIf="action.iconName" [iconName]="action.iconName" [ngClass]="'icon-' + action.iconName"></my-global-icon>
             {{ action.label }}
           </span>
+
         </ng-container>
       </ng-container>
 
-      <div class="dropdown-divider"></div>
+      <div *ngIf="areActionsDisplayed(actions, entry)" class="dropdown-divider"></div>
 
     </ng-container>
   </div>
diff --git a/client/src/app/shared/buttons/action-dropdown.component.scss b/client/src/app/shared/buttons/action-dropdown.component.scss
index 985b2ca88..5073190b0 100644
--- a/client/src/app/shared/buttons/action-dropdown.component.scss
+++ b/client/src/app/shared/buttons/action-dropdown.component.scss
@@ -8,12 +8,19 @@
 .action-button {
   @include peertube-button;
 
-  &.grey {
-    @include grey-button;
-  }
+  &.button-styled {
+
+    &.grey {
+      @include grey-button;
+    }
+
+    &.orange {
+      @include orange-button;
+    }
 
-  &.orange {
-    @include orange-button;
+    &:hover, &:active, &:focus {
+      background-color: $grey-background-color;
+    }
   }
 
   display: inline-block;
@@ -23,10 +30,6 @@
     display: none;
   }
 
-  &:hover, &:active, &:focus {
-    background-color: $grey-background-color;
-  }
-
   .more-icon {
     width: 21px;
   }
@@ -48,6 +51,10 @@
     cursor: pointer;
     color: #000 !important;
 
+    &.with-icon {
+      @include dropdown-with-icon-item;
+    }
+
     a, span {
       display: block;
       width: 100%;
diff --git a/client/src/app/shared/buttons/action-dropdown.component.ts b/client/src/app/shared/buttons/action-dropdown.component.ts
index 275e2b51e..f5345831b 100644
--- a/client/src/app/shared/buttons/action-dropdown.component.ts
+++ b/client/src/app/shared/buttons/action-dropdown.component.ts
@@ -1,12 +1,18 @@
 import { Component, Input } from '@angular/core'
+import { GlobalIconName } from '@app/shared/images/global-icon.component'
 
 export type DropdownAction<T> = {
   label?: string
+  iconName?: GlobalIconName
   handler?: (a: T) => any
   linkBuilder?: (a: T) => (string | number)[]
   isDisplayed?: (a: T) => boolean
 }
 
+export type DropdownButtonSize = 'normal' | 'small'
+export type DropdownTheme = 'orange' | 'grey'
+export type DropdownDirection = 'horizontal' | 'vertical'
+
 @Component({
   selector: 'my-action-dropdown',
   styleUrls: [ './action-dropdown.component.scss' ],
@@ -16,14 +22,29 @@ export type DropdownAction<T> = {
 export class ActionDropdownComponent<T> {
   @Input() actions: DropdownAction<T>[] | DropdownAction<T>[][] = []
   @Input() entry: T
+
   @Input() placement = 'bottom-left'
-  @Input() buttonSize: 'normal' | 'small' = 'normal'
+
+  @Input() buttonSize: DropdownButtonSize = 'normal'
+  @Input() buttonDirection: DropdownDirection = 'horizontal'
+  @Input() buttonStyled = true
+
   @Input() label: string
-  @Input() theme: 'orange' | 'grey' = 'grey'
+  @Input() theme: DropdownTheme = 'grey'
 
   getActions () {
     if (this.actions.length !== 0 && Array.isArray(this.actions[0])) return this.actions
 
     return [ this.actions ]
   }
+
+  areActionsDisplayed (actions: DropdownAction<T>[], entry: T) {
+    return actions.some(a => a.isDisplayed === undefined || a.isDisplayed(entry))
+  }
+
+  handleClick (event: Event, action: DropdownAction<T>) {
+    event.preventDefault()
+
+    // action.handler(entry)
+  }
 }
diff --git a/client/src/app/shared/buttons/button.component.ts b/client/src/app/shared/buttons/button.component.ts
index a91e9c7eb..c2b69d31a 100644
--- a/client/src/app/shared/buttons/button.component.ts
+++ b/client/src/app/shared/buttons/button.component.ts
@@ -1,5 +1,5 @@
 import { Component, Input } from '@angular/core'
-import { GlobalIconName } from '@app/shared/icons/global-icon.component'
+import { GlobalIconName } from '@app/shared/images/global-icon.component'
 
 @Component({
   selector: 'my-button',
diff --git a/client/src/app/shared/forms/form-reactive.ts b/client/src/app/shared/forms/form-reactive.ts
index b9873af2c..0d40b6f4a 100644
--- a/client/src/app/shared/forms/form-reactive.ts
+++ b/client/src/app/shared/forms/form-reactive.ts
@@ -59,7 +59,7 @@ export abstract class FormReactive {
       const isDirty = control.dirty || forceCheck === true
       if (control && isDirty && !control.valid) {
         const messages = validationMessages[ field ]
-        for (const key in control.errors) {
+        for (const key of Object.keys(control.errors)) {
           formErrors[ field ] += messages[ key ] + ' '
         }
       }
diff --git a/client/src/app/shared/forms/form-validators/index.ts b/client/src/app/shared/forms/form-validators/index.ts
index fdcbedb71..e3de3ae13 100644
--- a/client/src/app/shared/forms/form-validators/index.ts
+++ b/client/src/app/shared/forms/form-validators/index.ts
@@ -10,6 +10,7 @@ export * from './video-blacklist-validators.service'
 export * from './video-channel-validators.service'
 export * from './video-comment-validators.service'
 export * from './video-validators.service'
+export * from './video-playlist-validators.service'
 export * from './video-captions-validators.service'
 export * from './video-change-ownership-validators.service'
 export * from './video-accept-ownership-validators.service'
diff --git a/client/src/app/shared/forms/form-validators/video-playlist-validators.service.ts b/client/src/app/shared/forms/form-validators/video-playlist-validators.service.ts
new file mode 100644
index 000000000..a2c9a5368
--- /dev/null
+++ b/client/src/app/shared/forms/form-validators/video-playlist-validators.service.ts
@@ -0,0 +1,66 @@
+import { I18n } from '@ngx-translate/i18n-polyfill'
+import { AbstractControl, FormControl, Validators } from '@angular/forms'
+import { Injectable } from '@angular/core'
+import { BuildFormValidator } from '@app/shared'
+import { VideoPlaylistPrivacy } from '@shared/models'
+
+@Injectable()
+export class VideoPlaylistValidatorsService {
+  readonly VIDEO_PLAYLIST_DISPLAY_NAME: BuildFormValidator
+  readonly VIDEO_PLAYLIST_PRIVACY: BuildFormValidator
+  readonly VIDEO_PLAYLIST_DESCRIPTION: BuildFormValidator
+  readonly VIDEO_PLAYLIST_CHANNEL_ID: BuildFormValidator
+
+  constructor (private i18n: I18n) {
+    this.VIDEO_PLAYLIST_DISPLAY_NAME = {
+      VALIDATORS: [
+        Validators.required,
+        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 120 characters long.')
+      }
+    }
+
+    this.VIDEO_PLAYLIST_PRIVACY = {
+      VALIDATORS: [
+        Validators.required
+      ],
+      MESSAGES: {
+        'required': this.i18n('Privacy is required.')
+      }
+    }
+
+    this.VIDEO_PLAYLIST_DESCRIPTION = {
+      VALIDATORS: [
+        Validators.minLength(3),
+        Validators.maxLength(1000)
+      ],
+      MESSAGES: {
+        'minlength': i18n('Description must be at least 3 characters long.'),
+        'maxlength': i18n('Description cannot be more than 1000 characters long.')
+      }
+    }
+
+    this.VIDEO_PLAYLIST_CHANNEL_ID = {
+      VALIDATORS: [ ],
+      MESSAGES: {
+        'required': this.i18n('The channel is required when the playlist is public.')
+      }
+    }
+  }
+
+  setChannelValidator (channelControl: AbstractControl, privacy: VideoPlaylistPrivacy) {
+    if (privacy.toString() === VideoPlaylistPrivacy.PUBLIC.toString()) {
+      channelControl.setValidators([ Validators.required ])
+    } else {
+      channelControl.setValidators(null)
+    }
+
+    channelControl.markAsDirty()
+    channelControl.updateValueAndValidity()
+  }
+}
diff --git a/client/src/app/shared/forms/form-validators/video-validators.service.ts b/client/src/app/shared/forms/form-validators/video-validators.service.ts
index 81ed0666f..e3f7a0969 100644
--- a/client/src/app/shared/forms/form-validators/video-validators.service.ts
+++ b/client/src/app/shared/forms/form-validators/video-validators.service.ts
@@ -16,6 +16,7 @@ export class VideoValidatorsService {
   readonly VIDEO_TAGS: BuildFormValidator
   readonly VIDEO_SUPPORT: BuildFormValidator
   readonly VIDEO_SCHEDULE_PUBLICATION_AT: BuildFormValidator
+  readonly VIDEO_ORIGINALLY_PUBLISHED_AT: BuildFormValidator
 
   constructor (private i18n: I18n) {
 
@@ -92,5 +93,10 @@ export class VideoValidatorsService {
         'required': this.i18n('A date is required to schedule video update.')
       }
     }
+
+    this.VIDEO_ORIGINALLY_PUBLISHED_AT = {
+      VALIDATORS: [ ],
+      MESSAGES: {}
+    }
   }
 }
diff --git a/client/src/app/shared/forms/markdown-textarea.component.ts b/client/src/app/shared/forms/markdown-textarea.component.ts
index e87aca0d4..49a57f29d 100644
--- a/client/src/app/shared/forms/markdown-textarea.component.ts
+++ b/client/src/app/shared/forms/markdown-textarea.component.ts
@@ -82,11 +82,11 @@ export class MarkdownTextareaComponent implements ControlValueAccessor, OnInit {
     return this.screenService.isInSmallView() === false
   }
 
-  private updatePreviews () {
+  private async updatePreviews () {
     if (this.content === null || this.content === undefined) return
 
-    this.truncatedPreviewHTML = this.markdownRender(truncate(this.content, { length: this.truncate }))
-    this.previewHTML = this.markdownRender(this.content)
+    this.truncatedPreviewHTML = await this.markdownRender(truncate(this.content, { length: this.truncate }))
+    this.previewHTML = await this.markdownRender(this.content)
   }
 
   private markdownRender (text: string) {
diff --git a/client/src/app/shared/forms/peertube-checkbox.component.scss b/client/src/app/shared/forms/peertube-checkbox.component.scss
index 6e4e20775..ea321ee65 100644
--- a/client/src/app/shared/forms/peertube-checkbox.component.scss
+++ b/client/src/app/shared/forms/peertube-checkbox.component.scss
@@ -28,4 +28,4 @@
     position: relative;
     top: -2px;
   }
-}
\ No newline at end of file
+}
diff --git a/client/src/app/shared/forms/peertube-checkbox.component.ts b/client/src/app/shared/forms/peertube-checkbox.component.ts
index c1a6915e8..9578f5618 100644
--- a/client/src/app/shared/forms/peertube-checkbox.component.ts
+++ b/client/src/app/shared/forms/peertube-checkbox.component.ts
@@ -1,4 +1,4 @@
-import { Component, forwardRef, Input } from '@angular/core'
+import { ChangeDetectorRef, Component, forwardRef, Input, OnChanges, SimpleChanges } from '@angular/core'
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'
 
 @Component({
@@ -21,10 +21,19 @@ export class PeertubeCheckboxComponent implements ControlValueAccessor {
   @Input() helpHtml: string
   @Input() disabled = false
 
+  // FIXME: https://github.com/angular/angular/issues/10816#issuecomment-307567836
+  @Input() onPushWorkaround = false
+
+  constructor (private cdr: ChangeDetectorRef) { }
+
   propagateChange = (_: any) => { /* empty */ }
 
   writeValue (checked: boolean) {
     this.checked = checked
+
+    if (this.onPushWorkaround) {
+      this.cdr.markForCheck()
+    }
   }
 
   registerOnChange (fn: (_: any) => void) {
diff --git a/client/src/app/shared/forms/timestamp-input.component.html b/client/src/app/shared/forms/timestamp-input.component.html
new file mode 100644
index 000000000..c57a4b32c
--- /dev/null
+++ b/client/src/app/shared/forms/timestamp-input.component.html
@@ -0,0 +1,4 @@
+<p-inputMask
+  [disabled]="disabled" [(ngModel)]="timestampString" (onBlur)="onBlur()"
+  mask="9:99:99" slotChar="0" (ngModelChange)="onModelChange()"
+></p-inputMask>
diff --git a/client/src/app/shared/forms/timestamp-input.component.scss b/client/src/app/shared/forms/timestamp-input.component.scss
new file mode 100644
index 000000000..7115777fd
--- /dev/null
+++ b/client/src/app/shared/forms/timestamp-input.component.scss
@@ -0,0 +1,8 @@
+p-inputmask {
+  /deep/ input {
+    width: 80px;
+    font-size: 15px;
+
+    border: none;
+  }
+}
diff --git a/client/src/app/shared/forms/timestamp-input.component.ts b/client/src/app/shared/forms/timestamp-input.component.ts
new file mode 100644
index 000000000..8d67a96ac
--- /dev/null
+++ b/client/src/app/shared/forms/timestamp-input.component.ts
@@ -0,0 +1,61 @@
+import { ChangeDetectorRef, Component, forwardRef, Input, OnInit } from '@angular/core'
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'
+import { secondsToTime, timeToInt } from '../../../assets/player/utils'
+
+@Component({
+  selector: 'my-timestamp-input',
+  styleUrls: [ './timestamp-input.component.scss' ],
+  templateUrl: './timestamp-input.component.html',
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => TimestampInputComponent),
+      multi: true
+    }
+  ]
+})
+export class TimestampInputComponent implements ControlValueAccessor, OnInit {
+  @Input() maxTimestamp: number
+  @Input() timestamp: number
+  @Input() disabled = false
+
+  timestampString: string
+
+  constructor (private changeDetector: ChangeDetectorRef) {}
+
+  ngOnInit () {
+    this.writeValue(this.timestamp || 0)
+  }
+
+  propagateChange = (_: any) => { /* empty */ }
+
+  writeValue (timestamp: number) {
+    this.timestamp = timestamp
+
+    this.timestampString = secondsToTime(this.timestamp, true, ':')
+  }
+
+  registerOnChange (fn: (_: any) => void) {
+    this.propagateChange = fn
+  }
+
+  registerOnTouched () {
+    // Unused
+  }
+
+  onModelChange () {
+    this.timestamp = timeToInt(this.timestampString)
+
+    this.propagateChange(this.timestamp)
+  }
+
+  onBlur () {
+    if (this.maxTimestamp && this.timestamp > this.maxTimestamp) {
+      this.writeValue(this.maxTimestamp)
+
+      this.changeDetector.detectChanges()
+
+      this.propagateChange(this.timestamp)
+    }
+  }
+}
diff --git a/client/src/app/shared/icons/global-icon.component.html b/client/src/app/shared/icons/global-icon.component.html
deleted file mode 100644
index e69de29bb..000000000
--- a/client/src/app/shared/icons/global-icon.component.html
+++ /dev/null
diff --git a/client/src/app/shared/icons/global-icon.component.scss b/client/src/app/shared/images/global-icon.component.scss
index 6805fb6f7..6805fb6f7 100644
--- a/client/src/app/shared/icons/global-icon.component.scss
+++ b/client/src/app/shared/images/global-icon.component.scss
diff --git a/client/src/app/shared/icons/global-icon.component.ts b/client/src/app/shared/images/global-icon.component.ts
index e8ada0324..5a3db4531 100644
--- a/client/src/app/shared/icons/global-icon.component.ts
+++ b/client/src/app/shared/images/global-icon.component.ts
@@ -1,7 +1,9 @@
-import { Component, ElementRef, Input, OnInit } from '@angular/core'
+import { ChangeDetectionStrategy, Component, ElementRef, Input, OnInit } from '@angular/core'
 
 const icons = {
   'add': require('../../../assets/images/global/add.html'),
+  'user': require('../../../assets/images/global/user.html'),
+  'sign-out': require('../../../assets/images/global/sign-out.html'),
   'syndication': require('../../../assets/images/global/syndication.html'),
   'help': require('../../../assets/images/global/help.html'),
   'sparkle': require('../../../assets/images/global/sparkle.html'),
@@ -11,21 +13,39 @@ const icons = {
   'no': require('../../../assets/images/global/no.html'),
   'cloud-download': require('../../../assets/images/global/cloud-download.html'),
   'undo': require('../../../assets/images/global/undo.html'),
+  'history': require('../../../assets/images/global/history.html'),
   'circle-tick': require('../../../assets/images/global/circle-tick.html'),
   'cog': require('../../../assets/images/global/cog.html'),
   'download': require('../../../assets/images/global/download.html'),
+  'go': require('../../../assets/images/menu/go.html'),
   'edit': require('../../../assets/images/global/edit.html'),
   'im-with-her': require('../../../assets/images/global/im-with-her.html'),
   'delete': require('../../../assets/images/global/delete.html'),
+  'server': require('../../../assets/images/global/server.html'),
   'cross': require('../../../assets/images/global/cross.html'),
   'validate': require('../../../assets/images/global/validate.html'),
   'tick': require('../../../assets/images/global/tick.html'),
   'dislike': require('../../../assets/images/video/dislike.html'),
   'heart': require('../../../assets/images/video/heart.html'),
   'like': require('../../../assets/images/video/like.html'),
-  'more': require('../../../assets/images/video/more.html'),
+  'more-horizontal': require('../../../assets/images/global/more-horizontal.html'),
+  'more-vertical': require('../../../assets/images/global/more-vertical.html'),
   'share': require('../../../assets/images/video/share.html'),
-  'upload': require('../../../assets/images/video/upload.html')
+  'upload': require('../../../assets/images/video/upload.html'),
+  'playlist-add': require('../../../assets/images/video/playlist-add.html'),
+  'play': require('../../../assets/images/global/play.html'),
+  'playlists': require('../../../assets/images/global/playlists.html'),
+  'about': require('../../../assets/images/menu/about.html'),
+  'globe': require('../../../assets/images/menu/globe.html'),
+  'home': require('../../../assets/images/menu/home.html'),
+  'recently-added': require('../../../assets/images/menu/recently-added.html'),
+  'trending': require('../../../assets/images/menu/trending.html'),
+  'videos': require('../../../assets/images/global/videos.html'),
+  'folder': require('../../../assets/images/global/folder.html'),
+  'administration': require('../../../assets/images/menu/administration.html'),
+  'subscriptions': require('../../../assets/images/menu/subscriptions.html'),
+  'users': require('../../../assets/images/global/users.html'),
+  'refresh': require('../../../assets/images/global/refresh.html')
 }
 
 export type GlobalIconName = keyof typeof icons
@@ -33,7 +53,8 @@ export type GlobalIconName = keyof typeof icons
 @Component({
   selector: 'my-global-icon',
   template: '',
-  styleUrls: [ './global-icon.component.scss' ]
+  styleUrls: [ './global-icon.component.scss' ],
+  changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class GlobalIconComponent implements OnInit {
   @Input() iconName: GlobalIconName
diff --git a/client/src/app/videos/+video-edit/shared/video-image.component.html b/client/src/app/shared/images/image-upload.component.html
index c09c862c4..c09c862c4 100644
--- a/client/src/app/videos/+video-edit/shared/video-image.component.html
+++ b/client/src/app/shared/images/image-upload.component.html
diff --git a/client/src/app/videos/+video-edit/shared/video-image.component.scss b/client/src/app/shared/images/image-upload.component.scss
index b63963bca..b63963bca 100644
--- a/client/src/app/videos/+video-edit/shared/video-image.component.scss
+++ b/client/src/app/shared/images/image-upload.component.scss
diff --git a/client/src/app/videos/+video-edit/shared/video-image.component.ts b/client/src/app/shared/images/image-upload.component.ts
index a604cde90..2da1592ff 100644
--- a/client/src/app/videos/+video-edit/shared/video-image.component.ts
+++ b/client/src/app/shared/images/image-upload.component.ts
@@ -4,18 +4,18 @@ import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser'
 import { ServerService } from '@app/core'
 
 @Component({
-  selector: 'my-video-image',
-  styleUrls: [ './video-image.component.scss' ],
-  templateUrl: './video-image.component.html',
+  selector: 'my-image-upload',
+  styleUrls: [ './image-upload.component.scss' ],
+  templateUrl: './image-upload.component.html',
   providers: [
     {
       provide: NG_VALUE_ACCESSOR,
-      useExisting: forwardRef(() => VideoImageComponent),
+      useExisting: forwardRef(() => ImageUploadComponent),
       multi: true
     }
   ]
 })
-export class VideoImageComponent implements ControlValueAccessor {
+export class ImageUploadComponent implements ControlValueAccessor {
   @Input() inputLabel: string
   @Input() inputName: string
   @Input() previewWidth: string
diff --git a/client/src/app/shared/instance/instance-features-table.component.html b/client/src/app/shared/instance/instance-features-table.component.html
index dc8db8cc1..2885f97e3 100644
--- a/client/src/app/shared/instance/instance-features-table.component.html
+++ b/client/src/app/shared/instance/instance-features-table.component.html
@@ -2,6 +2,20 @@
 
   <table class="table">
     <tr>
+      <td i18n class="label">Default NSFW/sensitive videos policy (can be redefined by the users)</td>
+
+      <td class="value">{{ buildNSFWLabel() }}</td>
+    </tr>
+
+    <tr *ngFor="let feature of features">
+      <td class="label">{{ feature.label }}</td>
+      <td>
+        <span *ngIf="feature.value === true" class="glyphicon glyphicon-ok"></span>
+        <span *ngIf="feature.value === false" class="glyphicon glyphicon-remove"></span>
+      </td>
+    </tr>
+
+    <tr>
       <td i18n class="label">Video quota</td>
 
       <td class="value">
@@ -16,13 +30,5 @@
         </ng-container>
       </td>
     </tr>
-
-    <tr *ngFor="let feature of features">
-      <td class="label">{{ feature.label }}</td>
-      <td>
-        <span *ngIf="feature.value === true" class="glyphicon glyphicon-ok"></span>
-        <span *ngIf="feature.value === false" class="glyphicon glyphicon-remove"></span>
-      </td>
-    </tr>
   </table>
-</div>
\ No newline at end of file
+</div>
diff --git a/client/src/app/shared/instance/instance-features-table.component.ts b/client/src/app/shared/instance/instance-features-table.component.ts
index da8da0702..72e7c2730 100644
--- a/client/src/app/shared/instance/instance-features-table.component.ts
+++ b/client/src/app/shared/instance/instance-features-table.component.ts
@@ -33,11 +33,27 @@ export class InstanceFeaturesTableComponent implements OnInit {
         })
   }
 
+  buildNSFWLabel () {
+    const policy = this.serverService.getConfig().instance.defaultNSFWPolicy
+
+    if (policy === 'do_not_list') return this.i18n('Hidden')
+    if (policy === 'blur') return this.i18n('Blurred with confirmation request')
+    if (policy === 'display') return this.i18n('Displayed')
+  }
+
   private buildFeatures () {
     const config = this.serverService.getConfig()
 
     this.features = [
       {
+        label: this.i18n('User registration allowed'),
+        value: config.signup.allowed
+      },
+      {
+        label: this.i18n('Video uploads require manual validation by moderators'),
+        value: config.autoBlacklist.videos.ofUsers.enabled
+      },
+      {
         label: this.i18n('Transcode your videos in multiple resolutions'),
         value: config.transcoding.enabledResolutions.length !== 0
       },
@@ -48,9 +64,12 @@ export class InstanceFeaturesTableComponent implements OnInit {
       {
         label: this.i18n('Torrent import'),
         value: config.import.videos.torrent.enabled
+      },
+      {
+        label: this.i18n('P2P enabled'),
+        value: config.tracker.enabled
       }
     ]
-
   }
 
   private getApproximateTime (seconds: number) {
@@ -84,5 +103,4 @@ export class InstanceFeaturesTableComponent implements OnInit {
 
     this.quotaHelpIndication = lines.join('<br />')
   }
-
 }
diff --git a/client/src/app/shared/menu/top-menu-dropdown.component.html b/client/src/app/shared/menu/top-menu-dropdown.component.html
index d3c896019..35511ee62 100644
--- a/client/src/app/shared/menu/top-menu-dropdown.component.html
+++ b/client/src/app/shared/menu/top-menu-dropdown.component.html
@@ -3,7 +3,7 @@
 
     <a *ngIf="menuEntry.routerLink" [routerLink]="menuEntry.routerLink" routerLinkActive="active" class="title-page">{{ menuEntry.label }}</a>
 
-    <div *ngIf="!menuEntry.routerLink" ngbDropdown class="parent-entry" #dropdown="ngbDropdown" (mouseleave)="closeDropdownIfHovered(dropdown)">
+    <div *ngIf="!menuEntry.routerLink" ngbDropdown [container]="container" class="parent-entry" #dropdown="ngbDropdown" (mouseleave)="closeDropdownIfHovered(dropdown)">
       <span
         (mouseenter)="openDropdownOnHover(dropdown)" [ngClass]="{ active: !!suffixLabels[menuEntry.label] }" ngbDropdownAnchor
         (click)="dropdownAnchorClicked(dropdown)" role="button" class="title-page"
@@ -13,7 +13,11 @@
       </span>
 
       <div ngbDropdownMenu>
-        <a *ngFor="let menuChild of menuEntry.children" class="dropdown-item" [routerLink]="menuChild.routerLink">{{ menuChild.label }}</a>
+        <a *ngFor="let menuChild of menuEntry.children" class="dropdown-item" [ngClass]="{ icon: hasIcons }" [routerLink]="menuChild.routerLink">
+          <my-global-icon *ngIf="menuChild.iconName" [iconName]="menuChild.iconName"></my-global-icon>
+
+          {{ menuChild.label }}
+        </a>
       </div>
     </div>
 
diff --git a/client/src/app/shared/menu/top-menu-dropdown.component.scss b/client/src/app/shared/menu/top-menu-dropdown.component.scss
index 77159532f..d7c7de957 100644
--- a/client/src/app/shared/menu/top-menu-dropdown.component.scss
+++ b/client/src/app/shared/menu/top-menu-dropdown.component.scss
@@ -1,3 +1,6 @@
+@import '_variables';
+@import '_mixins';
+
 .parent-entry {
   span[role=button] {
     cursor: pointer;
@@ -16,3 +19,9 @@
 /deep/ .dropdown-menu {
   margin-top: 0 !important;
 }
+
+.icon {
+  @include dropdown-with-icon-item;
+
+  top: -1px;
+}
diff --git a/client/src/app/shared/menu/top-menu-dropdown.component.ts b/client/src/app/shared/menu/top-menu-dropdown.component.ts
index e859c30dd..5ccdafb54 100644
--- a/client/src/app/shared/menu/top-menu-dropdown.component.ts
+++ b/client/src/app/shared/menu/top-menu-dropdown.component.ts
@@ -3,6 +3,8 @@ import { filter, take } from 'rxjs/operators'
 import { NavigationEnd, Router } from '@angular/router'
 import { Subscription } from 'rxjs'
 import { NgbDropdown } from '@ng-bootstrap/ng-bootstrap'
+import { GlobalIconName } from '@app/shared/images/global-icon.component'
+import { ScreenService } from '@app/shared/misc/screen.service'
 
 export type TopMenuDropdownParam = {
   label: string
@@ -11,6 +13,8 @@ export type TopMenuDropdownParam = {
   children?: {
     label: string
     routerLink: string
+
+    iconName?: GlobalIconName
   }[]
 }
 
@@ -23,11 +27,16 @@ export class TopMenuDropdownComponent implements OnInit, OnDestroy {
   @Input() menuEntries: TopMenuDropdownParam[] = []
 
   suffixLabels: { [ parentLabel: string ]: string }
+  hasIcons = false
+  container: undefined | 'body' = undefined
 
   private openedOnHover = false
   private routeSub: Subscription
 
-  constructor (private router: Router) {}
+  constructor (
+    private router: Router,
+    private screen: ScreenService
+  ) {}
 
   ngOnInit () {
     this.updateChildLabels(window.location.pathname)
@@ -35,6 +44,16 @@ export class TopMenuDropdownComponent implements OnInit, OnDestroy {
     this.routeSub = this.router.events
                         .pipe(filter(event => event instanceof NavigationEnd))
                         .subscribe(() => this.updateChildLabels(window.location.pathname))
+
+    this.hasIcons = this.menuEntries.some(
+      e => e.children && e.children.some(c => !!c.iconName)
+    )
+
+    // FIXME: We have to set body for the container to avoid because of scroll overflow on mobile view
+    // But this break our hovering system
+    if (this.screen.isInMobileView()) {
+      this.container = 'body'
+    }
   }
 
   ngOnDestroy () {
@@ -48,7 +67,7 @@ export class TopMenuDropdownComponent implements OnInit, OnDestroy {
     // Menu was closed
     dropdown.openChange
             .pipe(take(1))
-            .subscribe(e => this.openedOnHover = false)
+            .subscribe(() => this.openedOnHover = false)
   }
 
   dropdownAnchorClicked (dropdown: NgbDropdown) {
diff --git a/client/src/app/shared/misc/help.component.html b/client/src/app/shared/misc/help.component.html
index 444425c9f..e31eef06a 100644
--- a/client/src/app/shared/misc/help.component.html
+++ b/client/src/app/shared/misc/help.component.html
@@ -22,7 +22,7 @@
   [attr.aria-pressed]="isPopoverOpened"
   [ngbPopover]="tooltipTemplate"
   [placement]="tooltipPlacement"
-  [autoClose]="true"
+  autoClose="outside"
   (onHidden)="onPopoverHidden()"
   (onShown)="onPopoverShown()"
 >
diff --git a/client/src/app/shared/misc/loader.component.html b/client/src/app/shared/misc/loader.component.html
index 38d06950e..b8b7ad343 100644
--- a/client/src/app/shared/misc/loader.component.html
+++ b/client/src/app/shared/misc/loader.component.html
@@ -1,3 +1,8 @@
-<div id="video-loading" *ngIf="loading">
-  <div class="glyphicon glyphicon-refresh glyphicon-refresh-animate"></div>
+<div *ngIf="loading">
+  <div class="lds-ring">
+    <div></div>
+    <div></div>
+    <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
new file mode 100644
index 000000000..ddb64f07a
--- /dev/null
+++ b/client/src/app/shared/misc/loader.component.scss
@@ -0,0 +1,45 @@
+@import '_variables';
+@import '_mixins';
+
+// Thanks to https://loading.io/css/ (CC0 License)
+
+.lds-ring {
+  display: inline-block;
+  position: relative;
+  width: 50px;
+  height: 50px;
+}
+
+.lds-ring div {
+  box-sizing: border-box;
+  display: block;
+  position: absolute;
+  width: 44px;
+  height: 44px;
+  margin: 6px;
+  border: 4px solid;
+  border-radius: 50%;
+  animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
+  border-color: #999999 transparent transparent transparent;
+}
+
+.lds-ring div:nth-child(1) {
+  animation-delay: -0.45s;
+}
+
+.lds-ring div:nth-child(2) {
+  animation-delay: -0.3s;
+}
+
+.lds-ring div:nth-child(3) {
+  animation-delay: -0.15s;
+}
+
+@keyframes lds-ring {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
diff --git a/client/src/app/shared/misc/loader.component.ts b/client/src/app/shared/misc/loader.component.ts
index f37d70c85..e3b1eea3a 100644
--- a/client/src/app/shared/misc/loader.component.ts
+++ b/client/src/app/shared/misc/loader.component.ts
@@ -2,10 +2,9 @@ import { Component, Input } from '@angular/core'
 
 @Component({
   selector: 'my-loader',
-  styleUrls: [ ],
+  styleUrls: [ './loader.component.scss' ],
   templateUrl: './loader.component.html'
 })
-
 export class LoaderComponent {
   @Input() loading: boolean
 }
diff --git a/client/src/app/shared/misc/screen.service.ts b/client/src/app/shared/misc/screen.service.ts
index 1cbc96b14..af75569d9 100644
--- a/client/src/app/shared/misc/screen.service.ts
+++ b/client/src/app/shared/misc/screen.service.ts
@@ -18,6 +18,10 @@ export class ScreenService {
     return this.getWindowInnerWidth() < 500
   }
 
+  isInTouchScreen () {
+    return 'ontouchstart' in window || navigator.msMaxTouchPoints
+  }
+
   // Cache window inner width, because it's an expensive call
   private getWindowInnerWidth () {
     if (this.cacheWindowInnerWidthExpired()) this.refreshWindowInnerWidth()
@@ -32,6 +36,8 @@ export class ScreenService {
   }
 
   private cacheWindowInnerWidthExpired () {
+    if (!this.lastFunctionCallTime) return true
+
     return new Date().getTime() > (this.lastFunctionCallTime + this.cacheForMs)
   }
 }
diff --git a/client/src/app/shared/misc/small-loader.component.html b/client/src/app/shared/misc/small-loader.component.html
new file mode 100644
index 000000000..5a7cea738
--- /dev/null
+++ b/client/src/app/shared/misc/small-loader.component.html
@@ -0,0 +1,3 @@
+<div *ngIf="loading">
+  <div class="glyphicon glyphicon-refresh glyphicon-refresh-animate"></div>
+</div>
diff --git a/client/src/app/shared/misc/small-loader.component.ts b/client/src/app/shared/misc/small-loader.component.ts
new file mode 100644
index 000000000..191877f14
--- /dev/null
+++ b/client/src/app/shared/misc/small-loader.component.ts
@@ -0,0 +1,11 @@
+import { Component, Input } from '@angular/core'
+
+@Component({
+  selector: 'my-small-loader',
+  styleUrls: [ ],
+  templateUrl: './small-loader.component.html'
+})
+
+export class SmallLoaderComponent {
+  @Input() loading: boolean
+}
diff --git a/client/src/app/shared/misc/utils.ts b/client/src/app/shared/misc/utils.ts
index 7cc6055c2..85fc1c3a0 100644
--- a/client/src/app/shared/misc/utils.ts
+++ b/client/src/app/shared/misc/utils.ts
@@ -17,7 +17,7 @@ function getParameterByName (name: string, url: string) {
   return decodeURIComponent(results[2].replace(/\+/g, ' '))
 }
 
-function populateAsyncUserVideoChannels (authService: AuthService, channel: { id: number, label: string, support: string }[]) {
+function populateAsyncUserVideoChannels (authService: AuthService, channel: { id: number, label: string, support?: string }[]) {
   return new Promise(res => {
     authService.userInformationLoaded
       .subscribe(
@@ -78,10 +78,10 @@ function objectToUrlEncoded (obj: any) {
 
 // Thanks: https://gist.github.com/ghinda/8442a57f22099bdb2e34
 function objectToFormData (obj: any, form?: FormData, namespace?: string) {
-  let fd = form || new FormData()
+  const fd = form || new FormData()
   let formKey
 
-  for (let key of Object.keys(obj)) {
+  for (const key of Object.keys(obj)) {
     if (namespace) formKey = `${namespace}[${key}]`
     else formKey = key
 
diff --git a/client/src/app/shared/moderation/user-moderation-dropdown.component.scss b/client/src/app/shared/moderation/user-moderation-dropdown.component.scss
deleted file mode 100644
index e69de29bb..000000000
--- a/client/src/app/shared/moderation/user-moderation-dropdown.component.scss
+++ /dev/null
diff --git a/client/src/app/shared/moderation/user-moderation-dropdown.component.ts b/client/src/app/shared/moderation/user-moderation-dropdown.component.ts
index 9a2461ebf..9dd16812b 100644
--- a/client/src/app/shared/moderation/user-moderation-dropdown.component.ts
+++ b/client/src/app/shared/moderation/user-moderation-dropdown.component.ts
@@ -10,8 +10,7 @@ import { BlocklistService } from '@app/shared/blocklist'
 
 @Component({
   selector: 'my-user-moderation-dropdown',
-  templateUrl: './user-moderation-dropdown.component.html',
-  styleUrls: [ './user-moderation-dropdown.component.scss' ]
+  templateUrl: './user-moderation-dropdown.component.html'
 })
 export class UserModerationDropdownComponent implements OnChanges {
   @ViewChild('userBanModal') userBanModal: UserBanModalComponent
diff --git a/client/src/app/shared/overview/videos-overview.model.ts b/client/src/app/shared/overview/videos-overview.model.ts
index c8eafc8e8..21abe1697 100644
--- a/client/src/app/shared/overview/videos-overview.model.ts
+++ b/client/src/app/shared/overview/videos-overview.model.ts
@@ -1,9 +1,9 @@
-import { VideoChannelAttribute, VideoConstant, VideosOverview as VideosOverviewServer } from '../../../../../shared/models'
+import { VideoChannelSummary, VideoConstant, VideosOverview as VideosOverviewServer } from '../../../../../shared/models'
 import { Video } from '@app/shared/video/video.model'
 
 export class VideosOverview implements VideosOverviewServer {
   channels: {
-    channel: VideoChannelAttribute
+    channel: VideoChannelSummary
     videos: Video[]
   }[]
 
diff --git a/client/src/app/shared/renderer/html-renderer.service.ts b/client/src/app/shared/renderer/html-renderer.service.ts
index d49df9b6d..28ef51e72 100644
--- a/client/src/app/shared/renderer/html-renderer.service.ts
+++ b/client/src/app/shared/renderer/html-renderer.service.ts
@@ -1,6 +1,5 @@
 import { Injectable } from '@angular/core'
 import { LinkifierService } from '@app/shared/renderer/linkifier.service'
-import * as sanitizeHtml from 'sanitize-html'
 
 @Injectable()
 export class HtmlRendererService {
@@ -9,7 +8,10 @@ export class HtmlRendererService {
 
   }
 
-  toSafeHtml (text: string) {
+  async toSafeHtml (text: string) {
+    // FIXME: import('..') returns a struct module, containing a "default" field corresponding to our sanitizeHtml function
+    const sanitizeHtml: typeof import ('sanitize-html') = (await import('sanitize-html') as any).default
+
     // Convert possible markdown to html
     const html = this.linkifier.linkify(text)
 
diff --git a/client/src/app/shared/renderer/linkifier.service.ts b/client/src/app/shared/renderer/linkifier.service.ts
index 2529c9eaf..95d5f17cc 100644
--- a/client/src/app/shared/renderer/linkifier.service.ts
+++ b/client/src/app/shared/renderer/linkifier.service.ts
@@ -1,8 +1,7 @@
 import { Injectable } from '@angular/core'
 import { getAbsoluteAPIUrl } from '@app/shared/misc/utils'
-// FIXME: use @types/linkify when https://github.com/DefinitelyTyped/DefinitelyTyped/pull/29682/files is merged?
-const linkify = require('linkifyjs')
-const linkifyHtml = require('linkifyjs/html')
+import * as linkify from 'linkifyjs'
+import linkifyHtml from 'linkifyjs/html'
 
 @Injectable()
 export class LinkifierService {
diff --git a/client/src/app/shared/renderer/markdown.service.ts b/client/src/app/shared/renderer/markdown.service.ts
index 07017eca5..9a9066351 100644
--- a/client/src/app/shared/renderer/markdown.service.ts
+++ b/client/src/app/shared/renderer/markdown.service.ts
@@ -1,6 +1,6 @@
 import { Injectable } from '@angular/core'
 
-import * as MarkdownIt from 'markdown-it'
+import { MarkdownIt } from 'markdown-it'
 
 @Injectable()
 export class MarkdownService {
@@ -14,32 +14,38 @@ export class MarkdownService {
   ]
   static ENHANCED_RULES = MarkdownService.TEXT_RULES.concat([ 'image' ])
 
-  private textMarkdownIt: MarkdownIt.MarkdownIt
-  private enhancedMarkdownIt: MarkdownIt.MarkdownIt
+  private textMarkdownIt: MarkdownIt
+  private enhancedMarkdownIt: MarkdownIt
 
-  constructor () {
-    this.textMarkdownIt = this.createMarkdownIt(MarkdownService.TEXT_RULES)
-    this.enhancedMarkdownIt = this.createMarkdownIt(MarkdownService.ENHANCED_RULES)
-  }
-
-  textMarkdownToHTML (markdown: string) {
+  async textMarkdownToHTML (markdown: string) {
     if (!markdown) return ''
 
+    if (!this.textMarkdownIt) {
+      this.textMarkdownIt = await this.createMarkdownIt(MarkdownService.TEXT_RULES)
+    }
+
     const html = this.textMarkdownIt.render(markdown)
     return this.avoidTruncatedTags(html)
   }
 
-  enhancedMarkdownToHTML (markdown: string) {
+  async enhancedMarkdownToHTML (markdown: string) {
     if (!markdown) return ''
 
+    if (!this.enhancedMarkdownIt) {
+      this.enhancedMarkdownIt = await this.createMarkdownIt(MarkdownService.ENHANCED_RULES)
+    }
+
     const html = this.enhancedMarkdownIt.render(markdown)
     return this.avoidTruncatedTags(html)
   }
 
-  private createMarkdownIt (rules: string[]) {
-    const markdownIt = new MarkdownIt('zero', { linkify: true, breaks: true })
+  private async createMarkdownIt (rules: string[]) {
+    // FIXME: import('..') returns a struct module, containing a "default" field corresponding to our sanitizeHtml function
+    const MarkdownItClass: typeof import ('markdown-it') = (await import('markdown-it') as any).default
+
+    const markdownIt = new MarkdownItClass('zero', { linkify: true, breaks: true })
 
-    for (let rule of rules) {
+    for (const rule of rules) {
       markdownIt.enable(rule)
     }
 
@@ -48,7 +54,7 @@ export class MarkdownService {
     return markdownIt
   }
 
-  private setTargetToLinks (markdownIt: MarkdownIt.MarkdownIt) {
+  private setTargetToLinks (markdownIt: MarkdownIt) {
     // Snippet from markdown-it documentation: https://github.com/markdown-it/markdown-it/blob/master/docs/architecture.md#renderer
     const defaultRender = markdownIt.renderer.rules.link_open || function (tokens, idx, options, env, self) {
       return self.renderToken(tokens, idx, options)
diff --git a/client/src/app/shared/shared.module.ts b/client/src/app/shared/shared.module.ts
index 6f8625c7e..ded65653f 100644
--- a/client/src/app/shared/shared.module.ts
+++ b/client/src/app/shared/shared.module.ts
@@ -14,10 +14,7 @@ import { AUTH_INTERCEPTOR_PROVIDER } from './auth'
 import { ButtonComponent } from './buttons/button.component'
 import { DeleteButtonComponent } from './buttons/delete-button.component'
 import { EditButtonComponent } from './buttons/edit-button.component'
-import { FromNowPipe } from './misc/from-now.pipe'
 import { LoaderComponent } from './misc/loader.component'
-import { NumberFormatterPipe } from './misc/number-formatter.pipe'
-import { ObjectLengthPipe } from './misc/object-length.pipe'
 import { RestExtractor, RestService } from './rest'
 import { UserService } from './users'
 import { VideoAbuseService } from './video-abuse'
@@ -45,9 +42,11 @@ import {
   VideoChangeOwnershipValidatorsService,
   VideoChannelValidatorsService,
   VideoCommentValidatorsService,
+  VideoPlaylistValidatorsService,
   VideoValidatorsService
 } from '@app/shared/forms'
 import { I18nPrimengCalendarService } from '@app/shared/i18n/i18n-primeng-calendar'
+import { InputMaskModule } from 'primeng/inputmask'
 import { ScreenService } from '@app/shared/misc/screen.service'
 import { VideoCaptionsValidatorsService } from '@app/shared/forms/form-validators/video-captions-validators.service'
 import { VideoCaptionService } from '@app/shared/video-caption'
@@ -68,7 +67,24 @@ import { UserNotificationsComponent } from '@app/shared/users/user-notifications
 import { InstanceService } from '@app/shared/instance/instance.service'
 import { HtmlRendererService, LinkifierService, MarkdownService } from '@app/shared/renderer'
 import { ConfirmComponent } from '@app/shared/confirm/confirm.component'
-import { GlobalIconComponent } from '@app/shared/icons/global-icon.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 { 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'
+import { TimestampInputComponent } from '@app/shared/forms/timestamp-input.component'
+import { VideoPlaylistElementMiniatureComponent } from '@app/shared/video-playlist/video-playlist-element-miniature.component'
+import { VideosSelectionComponent } from '@app/shared/video/videos-selection.component'
+import { NumberFormatterPipe } from '@app/shared/angular/number-formatter.pipe'
+import { ObjectLengthPipe } from '@app/shared/angular/object-length.pipe'
+import { FromNowPipe } from '@app/shared/angular/from-now.pipe'
+import { PeerTubeTemplateDirective } from '@app/shared/angular/peertube-template.directive'
+import { VideoActionsDropdownComponent } from '@app/shared/video/video-actions-dropdown.component'
+import { VideoBlacklistComponent } from '@app/shared/video/modals/video-blacklist.component'
+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'
 
 @NgModule({
   imports: [
@@ -84,28 +100,50 @@ import { GlobalIconComponent } from '@app/shared/icons/global-icon.component'
     NgbTabsetModule,
     NgbTooltipModule,
 
+    ClipboardModule,
+
     PrimeSharedModule,
+    InputMaskModule,
     NgPipesModule
   ],
 
   declarations: [
     LoaderComponent,
+    SmallLoaderComponent,
+
     VideoThumbnailComponent,
     VideoMiniatureComponent,
+    VideoPlaylistMiniatureComponent,
+    VideoAddToPlaylistComponent,
+    VideoPlaylistElementMiniatureComponent,
+    VideosSelectionComponent,
+    VideoActionsDropdownComponent,
+
+    VideoDownloadComponent,
+    VideoReportComponent,
+    VideoBlacklistComponent,
+
     FeedComponent,
+
     ButtonComponent,
     DeleteButtonComponent,
     EditButtonComponent,
-    ActionDropdownComponent,
+
     NumberFormatterPipe,
     ObjectLengthPipe,
     FromNowPipe,
+    PeerTubeTemplateDirective,
+
+    ActionDropdownComponent,
     MarkdownTextareaComponent,
     InfiniteScrollerDirective,
     TextareaAutoResizeDirective,
     HelpComponent,
+
     ReactiveFileComponent,
     PeertubeCheckboxComponent,
+    TimestampInputComponent,
+
     SubscribeButtonComponent,
     RemoteSubscribeComponent,
     InstanceFeaturesTableComponent,
@@ -114,7 +152,9 @@ import { GlobalIconComponent } from '@app/shared/icons/global-icon.component'
     TopMenuDropdownComponent,
     UserNotificationsComponent,
     ConfirmComponent,
-    GlobalIconComponent
+
+    GlobalIconComponent,
+    ImageUploadComponent
   ],
 
   exports: [
@@ -130,24 +170,44 @@ import { GlobalIconComponent } from '@app/shared/icons/global-icon.component'
     NgbTabsetModule,
     NgbTooltipModule,
 
+    ClipboardModule,
+
     PrimeSharedModule,
+    InputMaskModule,
     BytesPipe,
     KeysPipe,
 
     LoaderComponent,
+    SmallLoaderComponent,
+
     VideoThumbnailComponent,
     VideoMiniatureComponent,
+    VideoPlaylistMiniatureComponent,
+    VideoAddToPlaylistComponent,
+    VideoPlaylistElementMiniatureComponent,
+    VideosSelectionComponent,
+    VideoActionsDropdownComponent,
+
+    VideoDownloadComponent,
+    VideoReportComponent,
+    VideoBlacklistComponent,
+
     FeedComponent,
+
     ButtonComponent,
     DeleteButtonComponent,
     EditButtonComponent,
+
     ActionDropdownComponent,
     MarkdownTextareaComponent,
     InfiniteScrollerDirective,
     TextareaAutoResizeDirective,
     HelpComponent,
+
     ReactiveFileComponent,
     PeertubeCheckboxComponent,
+    TimestampInputComponent,
+
     SubscribeButtonComponent,
     RemoteSubscribeComponent,
     InstanceFeaturesTableComponent,
@@ -156,11 +216,14 @@ import { GlobalIconComponent } from '@app/shared/icons/global-icon.component'
     TopMenuDropdownComponent,
     UserNotificationsComponent,
     ConfirmComponent,
+
     GlobalIconComponent,
+    ImageUploadComponent,
 
     NumberFormatterPipe,
     ObjectLengthPipe,
-    FromNowPipe
+    FromNowPipe,
+    PeerTubeTemplateDirective
   ],
 
   providers: [
@@ -174,6 +237,7 @@ import { GlobalIconComponent } from '@app/shared/icons/global-icon.component'
     VideoService,
     AccountService,
     VideoChannelService,
+    VideoPlaylistService,
     VideoCaptionService,
     VideoImportService,
     UserSubscriptionService,
@@ -183,6 +247,7 @@ import { GlobalIconComponent } from '@app/shared/icons/global-icon.component'
     LoginValidatorsService,
     ResetPasswordValidatorsService,
     UserValidatorsService,
+    VideoPlaylistValidatorsService,
     VideoAbuseValidatorsService,
     VideoChannelValidatorsService,
     VideoCommentValidatorsService,
diff --git a/client/src/app/shared/user-subscription/subscribe-button.component.ts b/client/src/app/shared/user-subscription/subscribe-button.component.ts
index 8f1754c7f..ef470ee44 100644
--- a/client/src/app/shared/user-subscription/subscribe-button.component.ts
+++ b/client/src/app/shared/user-subscription/subscribe-button.component.ts
@@ -38,7 +38,7 @@ export class SubscribeButtonComponent implements OnInit {
 
   ngOnInit () {
     if (this.isUserLoggedIn()) {
-      this.userSubscriptionService.isSubscriptionExists(this.uri)
+      this.userSubscriptionService.doesSubscriptionExist(this.uri)
         .subscribe(
           res => this.subscribed = res[this.uri],
 
diff --git a/client/src/app/shared/user-subscription/user-subscription.service.ts b/client/src/app/shared/user-subscription/user-subscription.service.ts
index 3d05f071e..cfd5b100f 100644
--- a/client/src/app/shared/user-subscription/user-subscription.service.ts
+++ b/client/src/app/shared/user-subscription/user-subscription.service.ts
@@ -28,7 +28,7 @@ export class UserSubscriptionService {
     this.existsObservable = this.existsSubject.pipe(
       bufferTime(500),
       filter(uris => uris.length !== 0),
-      switchMap(uris => this.areSubscriptionExist(uris)),
+      switchMap(uris => this.doSubscriptionsExist(uris)),
       share()
     )
   }
@@ -69,13 +69,13 @@ export class UserSubscriptionService {
                )
   }
 
-  isSubscriptionExists (nameWithHost: string) {
+  doesSubscriptionExist (nameWithHost: string) {
     this.existsSubject.next(nameWithHost)
 
     return this.existsObservable.pipe(first())
   }
 
-  private areSubscriptionExist (uris: string[]): Observable<SubscriptionExistResult> {
+  private doSubscriptionsExist (uris: string[]): Observable<SubscriptionExistResult> {
     const url = UserSubscriptionService.BASE_USER_SUBSCRIPTIONS_URL + '/exist'
     let params = new HttpParams()
 
diff --git a/client/src/app/shared/users/user-notification.model.ts b/client/src/app/shared/users/user-notification.model.ts
index 5d0dc19ae..72fc3e7b4 100644
--- a/client/src/app/shared/users/user-notification.model.ts
+++ b/client/src/app/shared/users/user-notification.model.ts
@@ -1,4 +1,4 @@
-import { UserNotification as UserNotificationServer, UserNotificationType, VideoInfo, ActorInfo } from '../../../../../shared'
+import { ActorInfo, FollowState, UserNotification as UserNotificationServer, UserNotificationType, VideoInfo } from '../../../../../shared'
 import { Actor } from '@app/shared/actor/actor.model'
 
 export class UserNotification implements UserNotificationServer {
@@ -39,6 +39,7 @@ export class UserNotification implements UserNotificationServer {
 
   actorFollow?: {
     id: number
+    state: FollowState
     follower: ActorInfo & { avatarUrl?: string }
     following: {
       type: 'account' | 'channel'
@@ -54,9 +55,11 @@ export class UserNotification implements UserNotificationServer {
   videoUrl?: string
   commentUrl?: any[]
   videoAbuseUrl?: string
+  videoAutoBlacklistUrl?: string
   accountUrl?: string
   videoImportIdentifier?: string
   videoImportUrl?: string
+  instanceFollowUrl?: string
 
   constructor (hash: UserNotificationServer) {
     this.id = hash.id
@@ -107,6 +110,11 @@ export class UserNotification implements UserNotificationServer {
           this.videoUrl = this.buildVideoUrl(this.videoAbuse.video)
           break
 
+        case UserNotificationType.VIDEO_AUTO_BLACKLIST_FOR_MODERATORS:
+          this.videoAutoBlacklistUrl = '/admin/moderation/video-auto-blacklist/list'
+          this.videoUrl = this.buildVideoUrl(this.video)
+          break
+
         case UserNotificationType.BLACKLIST_ON_MY_VIDEO:
           this.videoUrl = this.buildVideoUrl(this.videoBlacklist.video)
           break
@@ -118,7 +126,8 @@ export class UserNotification implements UserNotificationServer {
         case UserNotificationType.MY_VIDEO_IMPORT_SUCCESS:
           this.videoImportUrl = this.buildVideoImportUrl()
           this.videoImportIdentifier = this.buildVideoImportIdentifier(this.videoImport)
-          this.videoUrl = this.buildVideoUrl(this.videoImport.video)
+
+          if (this.videoImport.video) this.videoUrl = this.buildVideoUrl(this.videoImport.video)
           break
 
         case UserNotificationType.MY_VIDEO_IMPORT_ERROR:
@@ -133,6 +142,10 @@ export class UserNotification implements UserNotificationServer {
         case UserNotificationType.NEW_FOLLOW:
           this.accountUrl = this.buildAccountUrl(this.actorFollow.follower)
           break
+
+        case UserNotificationType.NEW_INSTANCE_FOLLOWER:
+          this.instanceFollowUrl = '/admin/follows/followers-list'
+          break
       }
     } catch (err) {
       console.error(err)
diff --git a/client/src/app/shared/users/user-notification.service.ts b/client/src/app/shared/users/user-notification.service.ts
index f8a30955d..ae0bc9cb1 100644
--- a/client/src/app/shared/users/user-notification.service.ts
+++ b/client/src/app/shared/users/user-notification.service.ts
@@ -7,7 +7,7 @@ import { ResultList, UserNotification as UserNotificationServer, UserNotificatio
 import { UserNotification } from './user-notification.model'
 import { AuthService } from '../../core'
 import { ComponentPagination } from '../rest/component-pagination.model'
-import { User } from '..'
+import { User } from '../users/user.model'
 import { UserNotificationSocket } from '@app/core/notification/user-notification-socket.service'
 
 @Injectable()
diff --git a/client/src/app/shared/users/user-notifications.component.html b/client/src/app/shared/users/user-notifications.component.html
index 0d69e0feb..d0d9d9f35 100644
--- a/client/src/app/shared/users/user-notifications.component.html
+++ b/client/src/app/shared/users/user-notifications.component.html
@@ -36,6 +36,14 @@
         </div>
       </ng-container>
 
+      <ng-container i18n *ngSwitchCase="UserNotificationType.VIDEO_AUTO_BLACKLIST_FOR_MODERATORS">
+        <my-global-icon iconName="no"></my-global-icon>
+
+        <div class="message">
+          The recently added video <a (click)="markAsRead(notification)" [routerLink]="notification.videoUrl">{{ notification.video.name }}</a> has been <a (click)="markAsRead(notification)" [routerLink]="notification.videoAutoBlacklistUrl">auto-blacklisted</a>
+        </div>
+      </ng-container>
+
       <ng-container i18n *ngSwitchCase="UserNotificationType.NEW_COMMENT_ON_MY_VIDEO">
         <img alt="" aria-labelledby="avatar" class="avatar" [src]="notification.comment.account.avatarUrl" />
 
@@ -56,7 +64,7 @@
         <my-global-icon iconName="cloud-download"></my-global-icon>
 
         <div class="message">
-          <a (click)="markAsRead(notification)" [routerLink]="notification.videoUrl">Your video import</a> {{ notification.videoImportIdentifier }} succeeded
+          <a (click)="markAsRead(notification)" [routerLink]="notification.videoUrl || notification.videoImportUrl">Your video import</a> {{ notification.videoImportIdentifier }} succeeded
         </div>
       </ng-container>
 
@@ -94,6 +102,15 @@
           <a (click)="markAsRead(notification)" [routerLink]="notification.accountUrl">{{ notification.comment.account.displayName }}</a> mentioned you on <a (click)="markAsRead(notification)" [routerLink]="notification.commentUrl">video {{ notification.comment.video.name }}</a>
         </div>
       </ng-container>
+
+      <ng-container i18n *ngSwitchCase="UserNotificationType.NEW_INSTANCE_FOLLOWER">
+        <my-global-icon iconName="users"></my-global-icon>
+
+        <div class="message">
+          Your instance has <a (click)="markAsRead(notification)" [routerLink]="notification.instanceFollowUrl">a new follower</a> ({{ notification.actorFollow.follower.host }})
+          <ng-container *ngIf="notification.actorFollow.state === 'pending'"> awaiting your approval</ng-container>
+        </div>
+      </ng-container>
     </ng-container>
 
     <div class="from-date">{{ notification.createdAt | myFromNow }}</div>
diff --git a/client/src/app/shared/users/user-notifications.component.scss b/client/src/app/shared/users/user-notifications.component.scss
index 315d504c9..88f38d9cf 100644
--- a/client/src/app/shared/users/user-notifications.component.scss
+++ b/client/src/app/shared/users/user-notifications.component.scss
@@ -13,7 +13,7 @@
   align-items: center;
   font-size: inherit;
   padding: 15px 5px 15px 10px;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.10);
+  border-bottom: 1px solid $separator-border-color;
 
   &.unread {
     background-color: rgba(0, 0, 0, 0.05);
diff --git a/client/src/app/shared/users/user-notifications.component.ts b/client/src/app/shared/users/user-notifications.component.ts
index b5f9fd399..ce43b604a 100644
--- a/client/src/app/shared/users/user-notifications.component.ts
+++ b/client/src/app/shared/users/user-notifications.component.ts
@@ -1,4 +1,4 @@
-import { Component, Input, OnInit } from '@angular/core'
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'
 import { UserNotificationService } from '@app/shared/users/user-notification.service'
 import { UserNotificationType } from '../../../../../shared'
 import { ComponentPagination, hasMoreItems } from '@app/shared/rest/component-pagination.model'
@@ -15,6 +15,8 @@ export class UserNotificationsComponent implements OnInit {
   @Input() infiniteScroll = true
   @Input() itemsPerPage = 20
 
+  @Output() notificationsLoaded = new EventEmitter()
+
   notifications: UserNotification[] = []
 
   // So we can access it in the template
@@ -43,6 +45,8 @@ export class UserNotificationsComponent implements OnInit {
           result => {
             this.notifications = this.notifications.concat(result.data)
             this.componentPagination.totalItems = result.total
+
+            this.notificationsLoaded.emit()
           },
 
           err => this.notifier.error(err.message)
diff --git a/client/src/app/shared/users/user.model.ts b/client/src/app/shared/users/user.model.ts
index c15f1de8c..e3ed2dfbd 100644
--- a/client/src/app/shared/users/user.model.ts
+++ b/client/src/app/shared/users/user.model.ts
@@ -2,15 +2,18 @@ import { hasUserRight, User as UserServerModel, UserNotificationSetting, UserRig
 import { NSFWPolicyType } from '../../../../../shared/models/videos/nsfw-policy.type'
 import { Account } from '@app/shared/account/account.model'
 import { Avatar } from '../../../../../shared/models/avatars/avatar.model'
+import { UserAdminFlag } from '@shared/models/users/user-flag.model'
 
 export class User implements UserServerModel {
   id: number
   username: string
   email: string
   emailVerified: boolean
-  role: UserRole
   nsfwPolicy: NSFWPolicyType
 
+  role: UserRole
+  roleLabel: string
+
   webTorrentEnabled: boolean
   autoPlayVideo: boolean
   videosHistoryEnabled: boolean
@@ -21,6 +24,8 @@ export class User implements UserServerModel {
   videoChannels: VideoChannel[]
   createdAt: Date
 
+  adminFlags?: UserAdminFlag
+
   blocked: boolean
   blockedReason?: string
 
@@ -30,6 +35,7 @@ export class User implements UserServerModel {
     this.id = hash.id
     this.username = hash.username
     this.email = hash.email
+
     this.role = hash.role
 
     this.videoChannels = hash.videoChannels
@@ -40,6 +46,9 @@ export class User implements UserServerModel {
     this.videosHistoryEnabled = hash.videosHistoryEnabled
     this.autoPlayVideo = hash.autoPlayVideo
     this.createdAt = hash.createdAt
+
+    this.adminFlags = hash.adminFlags
+
     this.blocked = hash.blocked
     this.blockedReason = hash.blockedReason
 
diff --git a/client/src/app/shared/video-blacklist/video-blacklist.service.ts b/client/src/app/shared/video-blacklist/video-blacklist.service.ts
index 94e46d7c2..a9eab9b6f 100644
--- a/client/src/app/shared/video-blacklist/video-blacklist.service.ts
+++ b/client/src/app/shared/video-blacklist/video-blacklist.service.ts
@@ -1,11 +1,13 @@
-import { catchError, map } from 'rxjs/operators'
+import { catchError, map, concatMap, toArray } from 'rxjs/operators'
 import { HttpClient, HttpParams } from '@angular/common/http'
 import { Injectable } from '@angular/core'
 import { SortMeta } from 'primeng/components/common/sortmeta'
-import { Observable } from 'rxjs'
-import { VideoBlacklist, ResultList } from '../../../../../shared'
+import { from as observableFrom, Observable } from 'rxjs'
+import { VideoBlacklist, VideoBlacklistType, ResultList } from '../../../../../shared'
+import { Video } from '../video/video.model'
 import { environment } from '../../../environments/environment'
 import { RestExtractor, RestPagination, RestService } from '../rest'
+import { ComponentPagination } from '../rest/component-pagination.model'
 
 @Injectable()
 export class VideoBlacklistService {
@@ -17,10 +19,14 @@ export class VideoBlacklistService {
     private restExtractor: RestExtractor
   ) {}
 
-  listBlacklist (pagination: RestPagination, sort: SortMeta): Observable<ResultList<VideoBlacklist>> {
+  listBlacklist (pagination: RestPagination, sort: SortMeta, type?: VideoBlacklistType): Observable<ResultList<VideoBlacklist>> {
     let params = new HttpParams()
     params = this.restService.addRestGetParams(params, pagination, sort)
 
+    if (type) {
+      params = params.set('type', type.toString())
+    }
+
     return this.authHttp.get<ResultList<VideoBlacklist>>(VideoBlacklistService.BASE_VIDEOS_URL + 'blacklist', { params })
                .pipe(
                  map(res => this.restExtractor.convertResultListDateToHuman(res)),
@@ -28,12 +34,37 @@ export class VideoBlacklistService {
                )
   }
 
-  removeVideoFromBlacklist (videoId: number) {
-    return this.authHttp.delete(VideoBlacklistService.BASE_VIDEOS_URL + videoId + '/blacklist')
-               .pipe(
-                 map(this.restExtractor.extractDataBool),
-                 catchError(res => this.restExtractor.handleError(res))
-               )
+  getAutoBlacklistedAsVideoList (videoPagination: ComponentPagination): Observable<{ videos: Video[], totalVideos: number}> {
+    const pagination = this.restService.componentPaginationToRestPagination(videoPagination)
+
+    // prioritize first created since waiting longest
+    const AUTO_BLACKLIST_SORT = 'createdAt'
+
+    let params = new HttpParams()
+    params = this.restService.addRestGetParams(params, pagination, AUTO_BLACKLIST_SORT)
+
+    params = params.set('type', VideoBlacklistType.AUTO_BEFORE_PUBLISHED.toString())
+
+    return this.authHttp.get<ResultList<VideoBlacklist>>(VideoBlacklistService.BASE_VIDEOS_URL + 'blacklist', { params })
+              .pipe(
+                map(res => {
+                  const videos = res.data.map(videoBlacklist => new Video(videoBlacklist.video))
+                  const totalVideos = res.total
+                  return { videos, totalVideos }
+                }),
+                catchError(res => this.restExtractor.handleError(res))
+              )
+  }
+
+  removeVideoFromBlacklist (videoIdArgs: number | number[]) {
+    const videoIds = Array.isArray(videoIdArgs) ? videoIdArgs : [ videoIdArgs ]
+
+    return observableFrom(videoIds)
+      .pipe(
+        concatMap(id => this.authHttp.delete(VideoBlacklistService.BASE_VIDEOS_URL + id + '/blacklist')),
+        toArray(),
+        catchError(err => this.restExtractor.handleError(err))
+      )
   }
 
   blacklistVideo (videoId: number, reason: string, unfederate: boolean) {
diff --git a/client/src/app/shared/video-import/video-import.service.ts b/client/src/app/shared/video-import/video-import.service.ts
index 7ae66ddfc..7ae13154d 100644
--- a/client/src/app/shared/video-import/video-import.service.ts
+++ b/client/src/app/shared/video-import/video-import.service.ts
@@ -67,6 +67,7 @@ export class VideoImportService {
     const description = video.description || null
     const support = video.support || null
     const scheduleUpdate = video.scheduleUpdate || null
+    const originallyPublishedAt = video.originallyPublishedAt || null
 
     return {
       name: video.name,
@@ -81,9 +82,11 @@ export class VideoImportService {
       nsfw: video.nsfw,
       waitTranscoding: video.waitTranscoding,
       commentsEnabled: video.commentsEnabled,
+      downloadEnabled: video.downloadEnabled,
       thumbnailfile: video.thumbnailfile,
       previewfile: video.previewfile,
-      scheduleUpdate
+      scheduleUpdate,
+      originallyPublishedAt
     }
   }
 
diff --git a/client/src/app/shared/video-playlist/video-add-to-playlist.component.html b/client/src/app/shared/video-playlist/video-add-to-playlist.component.html
new file mode 100644
index 000000000..648d580fa
--- /dev/null
+++ b/client/src/app/shared/video-playlist/video-add-to-playlist.component.html
@@ -0,0 +1,76 @@
+<div class="root">
+  <div class="header">
+    <div class="first-row">
+      <div i18n class="title">Save to</div>
+
+      <div class="options" (click)="displayOptions = !displayOptions">
+        <my-global-icon iconName="cog"></my-global-icon>
+
+        <span i18n>Options</span>
+      </div>
+    </div>
+
+    <div class="options-row" *ngIf="displayOptions">
+      <div>
+        <my-peertube-checkbox
+          inputName="startAt" [(ngModel)]="timestampOptions.startTimestampEnabled"
+          i18n-labelText labelText="Start at"
+        ></my-peertube-checkbox>
+
+        <my-timestamp-input
+          [timestamp]="timestampOptions.startTimestamp"
+          [maxTimestamp]="video.duration"
+          [disabled]="!timestampOptions.startTimestampEnabled"
+          [(ngModel)]="timestampOptions.startTimestamp"
+        ></my-timestamp-input>
+      </div>
+
+      <div>
+        <my-peertube-checkbox
+          inputName="stopAt" [(ngModel)]="timestampOptions.stopTimestampEnabled"
+          i18n-labelText labelText="Stop at"
+        ></my-peertube-checkbox>
+
+        <my-timestamp-input
+          [timestamp]="timestampOptions.stopTimestamp"
+          [maxTimestamp]="video.duration"
+          [disabled]="!timestampOptions.stopTimestampEnabled"
+          [(ngModel)]="timestampOptions.stopTimestamp"
+        ></my-timestamp-input>
+      </div>
+    </div>
+  </div>
+
+  <div class="playlist dropdown-item" *ngFor="let playlist of videoPlaylists" (click)="togglePlaylist($event, playlist)">
+    <my-peertube-checkbox [inputName]="'in-playlist-' + playlist.id" [(ngModel)]="playlist.inPlaylist" [onPushWorkaround]="true"></my-peertube-checkbox>
+
+    <div class="display-name">
+      {{ playlist.displayName }}
+
+      <div *ngIf="playlist.inPlaylist && (playlist.startTimestamp || playlist.stopTimestamp)" class="timestamp-info">
+        {{ formatTimestamp(playlist) }}
+      </div>
+    </div>
+  </div>
+
+  <div class="new-playlist-button dropdown-item" (click)="openCreateBlock($event)" [hidden]="isNewPlaylistBlockOpened">
+    <my-global-icon iconName="add"></my-global-icon>
+
+    Create a private playlist
+  </div>
+
+  <form class="new-playlist-block dropdown-item" *ngIf="isNewPlaylistBlockOpened" (ngSubmit)="createPlaylist()" [formGroup]="form">
+    <div class="form-group">
+      <label i18n for="displayName">Display name</label>
+      <input
+        type="text" id="displayName"
+        formControlName="displayName" [ngClass]="{ 'input-error': formErrors['displayName'] }"
+      >
+      <div *ngIf="formErrors['displayName']" class="form-error">
+        {{ formErrors['displayName'] }}
+      </div>
+    </div>
+
+    <input type="submit" i18n-value value="Create" [disabled]="!form.valid">
+  </form>
+</div>
diff --git a/client/src/app/shared/video-playlist/video-add-to-playlist.component.scss b/client/src/app/shared/video-playlist/video-add-to-playlist.component.scss
new file mode 100644
index 000000000..c677fea6c
--- /dev/null
+++ b/client/src/app/shared/video-playlist/video-add-to-playlist.component.scss
@@ -0,0 +1,107 @@
+@import '_variables';
+@import '_mixins';
+
+.root {
+  max-height: 300px;
+  overflow-y: auto;
+}
+
+.header {
+  min-width: 240px;
+  padding: 6px 24px 10px 24px;
+
+  margin-bottom: 10px;
+  border-bottom: 1px solid $separator-border-color;
+
+  .first-row {
+    display: flex;
+    align-items: center;
+
+    .title {
+      font-size: 18px;
+      flex-grow: 1;
+    }
+
+    .options {
+      display: flex;
+      align-items: center;
+      font-size: 14px;
+      cursor: pointer;
+
+      my-global-icon {
+        @include apply-svg-color(#333);
+
+        width: 16px;
+        height: 23px;
+        margin-right: 3px;
+      }
+    }
+  }
+
+  .options-row {
+    margin-top: 10px;
+    padding-left: 10px;
+
+    > div {
+      display: flex;
+      align-items: center;
+    }
+  }
+}
+
+.dropdown-item {
+  padding: 6px 24px;
+}
+
+.playlist {
+  display: flex;
+  cursor: pointer;
+
+  my-peertube-checkbox {
+    margin-right: 10px;
+  }
+
+  .display-name {
+    display: flex;
+    align-items: flex-end;
+
+    .timestamp-info {
+      font-size: 0.9em;
+      color: $grey-foreground-color;
+      margin-left: 5px;
+    }
+  }
+}
+
+.new-playlist-button,
+.new-playlist-block {
+  padding-top: 10px;
+  margin-top: 10px;
+  border-top: 1px solid $separator-border-color;
+}
+
+.new-playlist-button  {
+  cursor: pointer;
+
+  my-global-icon {
+    @include apply-svg-color(#333);
+
+    position: relative;
+    left: -1px;
+    top: -1px;
+    margin-right: 4px;
+    width: 21px;
+    height: 21px;
+  }
+}
+
+input[type=text] {
+  @include peertube-input-text(200px);
+
+  display: block;
+}
+
+input[type=submit] {
+  @include peertube-button;
+  @include orange-button;
+}
diff --git a/client/src/app/shared/video-playlist/video-add-to-playlist.component.ts b/client/src/app/shared/video-playlist/video-add-to-playlist.component.ts
new file mode 100644
index 000000000..7dcdf7a9e
--- /dev/null
+++ b/client/src/app/shared/video-playlist/video-add-to-playlist.component.ts
@@ -0,0 +1,212 @@
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnInit } from '@angular/core'
+import { VideoPlaylistService } from '@app/shared/video-playlist/video-playlist.service'
+import { AuthService, Notifier } from '@app/core'
+import { forkJoin } from 'rxjs'
+import { Video, VideoPlaylistCreate, VideoPlaylistElementCreate, VideoPlaylistPrivacy } from '@shared/models'
+import { FormReactive, FormValidatorService, VideoPlaylistValidatorsService } from '@app/shared/forms'
+import { I18n } from '@ngx-translate/i18n-polyfill'
+import { secondsToTime } from '../../../assets/player/utils'
+
+type PlaylistSummary = {
+  id: number
+  inPlaylist: boolean
+  displayName: string
+
+  startTimestamp?: number
+  stopTimestamp?: number
+}
+
+@Component({
+  selector: 'my-video-add-to-playlist',
+  styleUrls: [ './video-add-to-playlist.component.scss' ],
+  templateUrl: './video-add-to-playlist.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class VideoAddToPlaylistComponent extends FormReactive implements OnInit {
+  @Input() video: Video
+  @Input() currentVideoTimestamp: number
+  @Input() lazyLoad = false
+
+  isNewPlaylistBlockOpened = false
+  videoPlaylists: PlaylistSummary[] = []
+  timestampOptions: {
+    startTimestampEnabled: boolean
+    startTimestamp: number
+    stopTimestampEnabled: boolean
+    stopTimestamp: number
+  }
+  displayOptions = false
+
+  constructor (
+    protected formValidatorService: FormValidatorService,
+    private authService: AuthService,
+    private notifier: Notifier,
+    private i18n: I18n,
+    private videoPlaylistService: VideoPlaylistService,
+    private videoPlaylistValidatorsService: VideoPlaylistValidatorsService,
+    private cd: ChangeDetectorRef
+  ) {
+    super()
+  }
+
+  get user () {
+    return this.authService.getUser()
+  }
+
+  ngOnInit () {
+    this.resetOptions(true)
+
+    this.buildForm({
+      displayName: this.videoPlaylistValidatorsService.VIDEO_PLAYLIST_DISPLAY_NAME
+    })
+
+    if (this.lazyLoad !== true) this.load()
+  }
+
+  load () {
+    forkJoin([
+      this.videoPlaylistService.listAccountPlaylists(this.user.account, '-updatedAt'),
+      this.videoPlaylistService.doesVideoExistInPlaylist(this.video.id)
+    ])
+      .subscribe(
+        ([ playlistsResult, existResult ]) => {
+          for (const playlist of playlistsResult.data) {
+            const existingPlaylist = existResult[ this.video.id ].find(p => p.playlistId === playlist.id)
+
+            this.videoPlaylists.push({
+              id: playlist.id,
+              displayName: playlist.displayName,
+              inPlaylist: !!existingPlaylist,
+              startTimestamp: existingPlaylist ? existingPlaylist.startTimestamp : undefined,
+              stopTimestamp: existingPlaylist ? existingPlaylist.stopTimestamp : undefined
+            })
+          }
+
+          this.cd.markForCheck()
+        }
+      )
+  }
+
+  openChange (opened: boolean) {
+    if (opened === false) {
+      this.isNewPlaylistBlockOpened = false
+      this.displayOptions = false
+    }
+  }
+
+  openCreateBlock (event: Event) {
+    event.preventDefault()
+
+    this.isNewPlaylistBlockOpened = true
+  }
+
+  togglePlaylist (event: Event, playlist: PlaylistSummary) {
+    event.preventDefault()
+
+    if (playlist.inPlaylist === true) {
+      this.removeVideoFromPlaylist(playlist)
+    } else {
+      this.addVideoInPlaylist(playlist)
+    }
+
+    playlist.inPlaylist = !playlist.inPlaylist
+    this.resetOptions()
+
+    this.cd.markForCheck()
+  }
+
+  createPlaylist () {
+    const displayName = this.form.value[ 'displayName' ]
+
+    const videoPlaylistCreate: VideoPlaylistCreate = {
+      displayName,
+      privacy: VideoPlaylistPrivacy.PRIVATE
+    }
+
+    this.videoPlaylistService.createVideoPlaylist(videoPlaylistCreate).subscribe(
+      res => {
+        this.videoPlaylists.push({
+          id: res.videoPlaylist.id,
+          displayName,
+          inPlaylist: false
+        })
+
+        this.isNewPlaylistBlockOpened = false
+
+        this.cd.markForCheck()
+      },
+
+      err => this.notifier.error(err.message)
+    )
+  }
+
+  resetOptions (resetTimestamp = false) {
+    this.displayOptions = false
+
+    this.timestampOptions = {} as any
+    this.timestampOptions.startTimestampEnabled = false
+    this.timestampOptions.stopTimestampEnabled = false
+
+    if (resetTimestamp) {
+      this.timestampOptions.startTimestamp = 0
+      this.timestampOptions.stopTimestamp = this.video.duration
+    }
+  }
+
+  formatTimestamp (playlist: PlaylistSummary) {
+    const start = playlist.startTimestamp ? secondsToTime(playlist.startTimestamp) : ''
+    const stop = playlist.stopTimestamp ? secondsToTime(playlist.stopTimestamp) : ''
+
+    return `(${start}-${stop})`
+  }
+
+  private removeVideoFromPlaylist (playlist: PlaylistSummary) {
+    this.videoPlaylistService.removeVideoFromPlaylist(playlist.id, this.video.id)
+        .subscribe(
+          () => {
+            this.notifier.success(this.i18n('Video removed from {{name}}', { name: playlist.displayName }))
+
+            playlist.inPlaylist = false
+          },
+
+          err => {
+            this.notifier.error(err.message)
+
+            playlist.inPlaylist = true
+          },
+
+          () => this.cd.markForCheck()
+        )
+  }
+
+  private addVideoInPlaylist (playlist: PlaylistSummary) {
+    const body: VideoPlaylistElementCreate = { videoId: this.video.id }
+
+    if (this.timestampOptions.startTimestampEnabled) body.startTimestamp = this.timestampOptions.startTimestamp
+    if (this.timestampOptions.stopTimestampEnabled) body.stopTimestamp = this.timestampOptions.stopTimestamp
+
+    this.videoPlaylistService.addVideoInPlaylist(playlist.id, body)
+      .subscribe(
+        () => {
+          playlist.inPlaylist = true
+
+          playlist.startTimestamp = body.startTimestamp
+          playlist.stopTimestamp = body.stopTimestamp
+
+          const message = body.startTimestamp || body.stopTimestamp
+            ? this.i18n('Video added in {{n}} at timestamps {{t}}', { n: playlist.displayName, t: this.formatTimestamp(playlist) })
+            : this.i18n('Video added in {{n}}', { n: playlist.displayName })
+
+          this.notifier.success(message)
+        },
+
+        err => {
+          this.notifier.error(err.message)
+
+          playlist.inPlaylist = false
+        },
+
+        () => this.cd.markForCheck()
+      )
+  }
+}
diff --git a/client/src/app/shared/video-playlist/video-playlist-element-miniature.component.html b/client/src/app/shared/video-playlist/video-playlist-element-miniature.component.html
new file mode 100644
index 000000000..ab5a78928
--- /dev/null
+++ b/client/src/app/shared/video-playlist/video-playlist-element-miniature.component.html
@@ -0,0 +1,73 @@
+<div class="video" [ngClass]="{ playing: playing }">
+  <a [routerLink]="buildRouterLink()" [queryParams]="buildRouterQuery()">
+    <div class="position">
+      <my-global-icon *ngIf="playing" iconName="play"></my-global-icon>
+      <ng-container *ngIf="!playing">{{ position }}</ng-container>
+    </div>
+
+    <my-video-thumbnail
+      [video]="video" [nsfw]="isVideoBlur(video)"
+      [routerLink]="buildRouterLink()" [queryParams]="buildRouterQuery()"
+    ></my-video-thumbnail>
+
+    <div class="video-info">
+      <a tabindex="-1" class="video-info-name"
+         [routerLink]="buildRouterLink()" [queryParams]="buildRouterQuery()"
+         [attr.title]="video.name"
+      >{{ video.name }}</a>
+
+      <a *ngIf="accountLink" tabindex="-1" class="video-info-account" [routerLink]="[ '/accounts', video.byAccount ]">{{ video.byAccount }}</a>
+      <span *ngIf="!accountLink" tabindex="-1" class="video-info-account">{{ video.byAccount }}</span>
+
+      <span tabindex="-1" class="video-info-timestamp">{{ formatTimestamp(video) }}</span>
+    </div>
+  </a>
+
+  <div *ngIf="owned" class="more" ngbDropdown #moreDropdown="ngbDropdown" placement="bottom-right" (openChange)="onDropdownOpenChange()"
+       autoClose="outside">
+    <my-global-icon iconName="more-vertical" ngbDropdownToggle role="button" class="icon-more" (click)="$event.preventDefault()"></my-global-icon>
+
+    <div ngbDropdownMenu>
+      <div class="dropdown-item" (click)="toggleDisplayTimestampsOptions($event, video)">
+        <my-global-icon iconName="edit"></my-global-icon>
+        <ng-container i18n>Edit starts/stops at</ng-container>
+      </div>
+
+      <div class="timestamp-options" *ngIf="displayTimestampOptions">
+        <div>
+          <my-peertube-checkbox
+            inputName="startAt" [(ngModel)]="timestampOptions.startTimestampEnabled"
+            i18n-labelText labelText="Start at"
+          ></my-peertube-checkbox>
+
+          <my-timestamp-input
+            [timestamp]="timestampOptions.startTimestamp"
+            [maxTimestamp]="video.duration"
+            [disabled]="!timestampOptions.startTimestampEnabled"
+            [(ngModel)]="timestampOptions.startTimestamp"
+          ></my-timestamp-input>
+        </div>
+
+        <div>
+          <my-peertube-checkbox
+            inputName="stopAt" [(ngModel)]="timestampOptions.stopTimestampEnabled"
+            i18n-labelText labelText="Stop at"
+          ></my-peertube-checkbox>
+
+          <my-timestamp-input
+            [timestamp]="timestampOptions.stopTimestamp"
+            [maxTimestamp]="video.duration"
+            [disabled]="!timestampOptions.stopTimestampEnabled"
+            [(ngModel)]="timestampOptions.stopTimestamp"
+          ></my-timestamp-input>
+        </div>
+
+        <input type="submit" i18n-value value="Save" (click)="updateTimestamps(video)">
+      </div>
+
+      <span class="dropdown-item" (click)="removeFromPlaylist(video)">
+            <my-global-icon iconName="delete"></my-global-icon> <ng-container i18n>Delete from {{ playlist?.displayName }}</ng-container>
+          </span>
+    </div>
+  </div>
+</div>
diff --git a/client/src/app/shared/video-playlist/video-playlist-element-miniature.component.scss b/client/src/app/shared/video-playlist/video-playlist-element-miniature.component.scss
new file mode 100644
index 000000000..cb7072d7f
--- /dev/null
+++ b/client/src/app/shared/video-playlist/video-playlist-element-miniature.component.scss
@@ -0,0 +1,125 @@
+@import '_variables';
+@import '_mixins';
+@import '_miniature';
+
+my-video-thumbnail {
+  @include thumbnail-size-component(130px, 72px);
+
+  display: flex; // Avoids an issue with line-height that adds space below the element
+  margin-right: 10px;
+}
+
+.video {
+  display: flex;
+  align-items: center;
+  background-color: var(--mainBackgroundColor);
+  padding: 10px;
+  border-bottom: 1px solid $separator-border-color;
+
+  &:hover {
+    background-color: rgba(0, 0, 0, 0.05);
+
+    .more {
+      opacity: 1;
+    }
+  }
+
+  &.playing {
+    background-color: rgba(0, 0, 0, 0.02);
+  }
+
+  a {
+    @include disable-default-a-behaviour;
+
+    display: flex;
+    min-width: 0;
+    align-items: center;
+    cursor: pointer;
+
+    .position {
+      font-weight: $font-semibold;
+      margin-right: 10px;
+      color: $grey-foreground-color;
+      min-width: 25px;
+
+      my-global-icon {
+        @include apply-svg-color($grey-foreground-color);
+
+        width: 17px;
+        position: relative;
+        left: -2px;
+      }
+    }
+
+    .video-info {
+      display: flex;
+      flex-direction: column;
+      align-self: flex-start;
+      min-width: 0;
+
+      a {
+        color: var(--mainForegroundColor);
+        width: auto;
+
+        &:hover {
+          text-decoration: underline !important;
+        }
+      }
+
+      .video-info-name {
+        font-size: 18px;
+        font-weight: $font-semibold;
+        display: inline-block;
+
+        @include ellipsis;
+      }
+
+      .video-info-account, .video-info-timestamp {
+        color: $grey-foreground-color;
+      }
+    }
+  }
+
+  .more {
+    justify-self: flex-end;
+    margin-left: auto;
+    cursor: pointer;
+    opacity: 0;
+
+    &.show {
+      opacity: 1;
+    }
+
+    .icon-more {
+      @include apply-svg-color($grey-foreground-color);
+
+      display: flex;
+
+      &::after {
+        border: none;
+      }
+    }
+
+    .dropdown-item {
+      @include dropdown-with-icon-item;
+    }
+
+    .timestamp-options {
+      padding-top: 0;
+      padding-left: 35px;
+      margin-bottom: 15px;
+
+      > div {
+        display: flex;
+        align-items: center;
+      }
+
+      input {
+        @include peertube-button;
+        @include orange-button;
+
+        margin-top: 10px;
+      }
+    }
+  }
+}
diff --git a/client/src/app/shared/video-playlist/video-playlist-element-miniature.component.ts b/client/src/app/shared/video-playlist/video-playlist-element-miniature.component.ts
new file mode 100644
index 000000000..57990707a
--- /dev/null
+++ b/client/src/app/shared/video-playlist/video-playlist-element-miniature.component.ts
@@ -0,0 +1,159 @@
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, Input, Output, ViewChild } from '@angular/core'
+import { Video } from '@app/shared/video/video.model'
+import { VideoPlaylistElementUpdate } from '@shared/models'
+import { AuthService, ConfirmService, Notifier, ServerService } from '@app/core'
+import { ActivatedRoute } from '@angular/router'
+import { I18n } from '@ngx-translate/i18n-polyfill'
+import { VideoService } from '@app/shared/video/video.service'
+import { VideoPlaylistService } from '@app/shared/video-playlist/video-playlist.service'
+import { NgbDropdown } from '@ng-bootstrap/ng-bootstrap'
+import { VideoPlaylist } from '@app/shared/video-playlist/video-playlist.model'
+import { secondsToTime } from '../../../assets/player/utils'
+
+@Component({
+  selector: 'my-video-playlist-element-miniature',
+  styleUrls: [ './video-playlist-element-miniature.component.scss' ],
+  templateUrl: './video-playlist-element-miniature.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class VideoPlaylistElementMiniatureComponent {
+  @ViewChild('moreDropdown') moreDropdown: NgbDropdown
+
+  @Input() playlist: VideoPlaylist
+  @Input() video: Video
+  @Input() owned = false
+  @Input() playing = false
+  @Input() rowLink = false
+  @Input() accountLink = true
+  @Input() position: number
+
+  @Output() elementRemoved = new EventEmitter<Video>()
+
+  displayTimestampOptions = false
+
+  timestampOptions: {
+    startTimestampEnabled: boolean
+    startTimestamp: number
+    stopTimestampEnabled: boolean
+    stopTimestamp: number
+  } = {} as any
+
+  constructor (
+    private authService: AuthService,
+    private serverService: ServerService,
+    private notifier: Notifier,
+    private confirmService: ConfirmService,
+    private route: ActivatedRoute,
+    private i18n: I18n,
+    private videoService: VideoService,
+    private videoPlaylistService: VideoPlaylistService,
+    private cdr: ChangeDetectorRef
+  ) {}
+
+  buildRouterLink () {
+    if (!this.playlist) return null
+
+    return [ '/videos/watch/playlist', this.playlist.uuid ]
+  }
+
+  buildRouterQuery () {
+    if (!this.video) return {}
+
+    return {
+      videoId: this.video.uuid,
+      start: this.video.playlistElement.startTimestamp,
+      stop: this.video.playlistElement.stopTimestamp
+    }
+  }
+
+  isVideoBlur (video: Video) {
+    return video.isVideoNSFWForUser(this.authService.getUser(), this.serverService.getConfig())
+  }
+
+  removeFromPlaylist (video: Video) {
+    this.videoPlaylistService.removeVideoFromPlaylist(this.playlist.id, video.id)
+        .subscribe(
+          () => {
+            this.notifier.success(this.i18n('Video removed from {{name}}', { name: this.playlist.displayName }))
+
+            this.elementRemoved.emit(this.video)
+          },
+
+          err => this.notifier.error(err.message)
+        )
+
+    this.moreDropdown.close()
+  }
+
+  updateTimestamps (video: Video) {
+    const body: VideoPlaylistElementUpdate = {}
+
+    body.startTimestamp = this.timestampOptions.startTimestampEnabled ? this.timestampOptions.startTimestamp : null
+    body.stopTimestamp = this.timestampOptions.stopTimestampEnabled ? this.timestampOptions.stopTimestamp : null
+
+    this.videoPlaylistService.updateVideoOfPlaylist(this.playlist.id, video.id, body)
+        .subscribe(
+          () => {
+            this.notifier.success(this.i18n('Timestamps updated'))
+
+            video.playlistElement.startTimestamp = body.startTimestamp
+            video.playlistElement.stopTimestamp = body.stopTimestamp
+
+            this.cdr.detectChanges()
+          },
+
+          err => this.notifier.error(err.message)
+        )
+
+    this.moreDropdown.close()
+  }
+
+  formatTimestamp (video: Video) {
+    const start = video.playlistElement.startTimestamp
+    const stop = video.playlistElement.stopTimestamp
+
+    const startFormatted = secondsToTime(start, true, ':')
+    const stopFormatted = secondsToTime(stop, true, ':')
+
+    if (start === null && stop === null) return ''
+
+    if (start !== null && stop === null) return this.i18n('Starts at ') + startFormatted
+    if (start === null && stop !== null) return this.i18n('Stops at ') + stopFormatted
+
+    return this.i18n('Starts at ') + startFormatted + this.i18n(' and stops at ') + stopFormatted
+  }
+
+  onDropdownOpenChange () {
+    this.displayTimestampOptions = false
+  }
+
+  toggleDisplayTimestampsOptions (event: Event, video: Video) {
+    event.preventDefault()
+
+    this.displayTimestampOptions = !this.displayTimestampOptions
+
+    if (this.displayTimestampOptions === true) {
+      this.timestampOptions = {
+        startTimestampEnabled: false,
+        stopTimestampEnabled: false,
+        startTimestamp: 0,
+        stopTimestamp: video.duration
+      }
+
+      if (video.playlistElement.startTimestamp) {
+        this.timestampOptions.startTimestampEnabled = true
+        this.timestampOptions.startTimestamp = video.playlistElement.startTimestamp
+      }
+
+      if (video.playlistElement.stopTimestamp) {
+        this.timestampOptions.stopTimestampEnabled = true
+        this.timestampOptions.stopTimestamp = video.playlistElement.stopTimestamp
+      }
+    }
+
+    // FIXME: why do we have to use setTimeout here?
+    setTimeout(() => {
+      this.cdr.detectChanges()
+    })
+  }
+}
diff --git a/client/src/app/shared/video-playlist/video-playlist-miniature.component.html b/client/src/app/shared/video-playlist/video-playlist-miniature.component.html
new file mode 100644
index 000000000..86f6664cb
--- /dev/null
+++ b/client/src/app/shared/video-playlist/video-playlist-miniature.component.html
@@ -0,0 +1,34 @@
+<div class="miniature" [ngClass]="{ 'no-videos': playlist.videosLength === 0, 'to-manage': toManage }">
+  <a
+    [routerLink]="getPlaylistUrl()" [attr.title]="playlist.description"
+    class="miniature-thumbnail"
+  >
+    <img alt="" [attr.aria-labelledby]="playlist.displayName" [attr.src]="playlist.thumbnailUrl" />
+
+    <div class="miniature-playlist-info-overlay">
+      <ng-container i18n>{playlist.videosLength, plural, =0 {No videos} =1 {1 video} other {{{ playlist.videosLength }} videos}}</ng-container>
+    </div>
+
+    <div class="play-overlay">
+      <div class="icon"></div>
+    </div>
+  </a>
+
+  <div class="miniature-info">
+    <a tabindex="-1" class="miniature-name" [routerLink]="getPlaylistUrl()" [attr.title]="playlist.description">
+      {{ playlist.displayName }}
+    </a>
+
+    <a i18n [routerLink]="[ '/video-channels', playlist.videoChannelBy ]" class="by" *ngIf="displayChannel && playlist.videoChannelBy">
+      {{ playlist.videoChannelBy }}
+    </a>
+
+    <div class="privacy-date">
+      <span class="video-info-privacy" *ngIf="displayPrivacy">{{ playlist.privacy.label }}</span>
+
+      <span i18n class="updated-at">Updated {{ playlist.updatedAt | myFromNow }}</span>
+    </div>
+
+    <div *ngIf="displayDescription" class="video-info-description">{{ playlist.description }}</div>
+  </div>
+</div>
diff --git a/client/src/app/shared/video-playlist/video-playlist-miniature.component.scss b/client/src/app/shared/video-playlist/video-playlist-miniature.component.scss
new file mode 100644
index 000000000..8947e72d1
--- /dev/null
+++ b/client/src/app/shared/video-playlist/video-playlist-miniature.component.scss
@@ -0,0 +1,78 @@
+@import '_variables';
+@import '_mixins';
+@import '_miniature';
+
+.miniature {
+  display: inline-block;
+
+  &.no-videos:not(.to-manage){
+    a {
+      cursor: default !important;
+    }
+  }
+
+  &.to-manage,
+  &.no-videos {
+    .play-overlay {
+      display: none;
+    }
+  }
+
+  .miniature-thumbnail {
+    @include miniature-thumbnail;
+
+    .miniature-playlist-info-overlay {
+      @include static-thumbnail-overlay;
+
+      position: absolute;
+      right: 0;
+      bottom: 0;
+      height: $video-thumbnail-height;
+      padding: 0 10px;
+      display: flex;
+      align-items: center;
+      font-size: 14px;
+      font-weight: $font-semibold;
+    }
+  }
+
+  .miniature-info {
+    width: 200px;
+    margin-top: 2px;
+    line-height: normal;
+
+    .miniature-name {
+      @include miniature-name;
+
+      @include ellipsis-multiline(1.3em, 2);
+
+      margin: 0;
+    }
+
+    .by {
+      @include disable-default-a-behaviour;
+
+      display: block;
+      color: $grey-foreground-color;
+    }
+
+    .privacy-date {
+      margin-top: 5px;
+
+      .video-info-privacy {
+        font-size: 14px;
+        font-weight: $font-semibold;
+
+        &::after {
+          content: '-';
+          margin: 0 3px;
+        }
+      }
+    }
+
+    .video-info-description {
+      margin-top: 10px;
+      color: $grey-foreground-color;
+    }
+  }
+}
diff --git a/client/src/app/shared/video-playlist/video-playlist-miniature.component.ts b/client/src/app/shared/video-playlist/video-playlist-miniature.component.ts
new file mode 100644
index 000000000..523e96f2a
--- /dev/null
+++ b/client/src/app/shared/video-playlist/video-playlist-miniature.component.ts
@@ -0,0 +1,22 @@
+import { Component, Input } from '@angular/core'
+import { VideoPlaylist } from '@app/shared/video-playlist/video-playlist.model'
+
+@Component({
+  selector: 'my-video-playlist-miniature',
+  styleUrls: [ './video-playlist-miniature.component.scss' ],
+  templateUrl: './video-playlist-miniature.component.html'
+})
+export class VideoPlaylistMiniatureComponent {
+  @Input() playlist: VideoPlaylist
+  @Input() toManage = false
+  @Input() displayChannel = false
+  @Input() displayDescription = false
+  @Input() displayPrivacy = false
+
+  getPlaylistUrl () {
+    if (this.toManage) return [ '/my-account/video-playlists', this.playlist.uuid ]
+    if (this.playlist.videosLength === 0) return null
+
+    return [ '/videos/watch/playlist', this.playlist.uuid ]
+  }
+}
diff --git a/client/src/app/shared/video-playlist/video-playlist.model.ts b/client/src/app/shared/video-playlist/video-playlist.model.ts
new file mode 100644
index 000000000..7e311aa54
--- /dev/null
+++ b/client/src/app/shared/video-playlist/video-playlist.model.ts
@@ -0,0 +1,84 @@
+import {
+  VideoChannelSummary,
+  VideoConstant,
+  VideoPlaylist as ServerVideoPlaylist,
+  VideoPlaylistPrivacy,
+  VideoPlaylistType
+} from '../../../../../shared/models/videos'
+import { AccountSummary, peertubeTranslate } from '@shared/models'
+import { Actor } from '@app/shared/actor/actor.model'
+import { getAbsoluteAPIUrl } from '@app/shared/misc/utils'
+
+export class VideoPlaylist implements ServerVideoPlaylist {
+  id: number
+  uuid: string
+  isLocal: boolean
+
+  displayName: string
+  description: string
+  privacy: VideoConstant<VideoPlaylistPrivacy>
+
+  thumbnailPath: string
+
+  videosLength: number
+
+  type: VideoConstant<VideoPlaylistType>
+
+  createdAt: Date | string
+  updatedAt: Date | string
+
+  ownerAccount: AccountSummary
+  videoChannel?: VideoChannelSummary
+
+  thumbnailUrl: string
+
+  ownerBy: string
+  ownerAvatarUrl: string
+
+  videoChannelBy?: string
+  videoChannelAvatarUrl?: string
+
+  constructor (hash: ServerVideoPlaylist, translations: {}) {
+    const absoluteAPIUrl = getAbsoluteAPIUrl()
+
+    this.id = hash.id
+    this.uuid = hash.uuid
+    this.isLocal = hash.isLocal
+
+    this.displayName = hash.displayName
+
+    this.description = hash.description
+    this.privacy = hash.privacy
+
+    this.thumbnailPath = hash.thumbnailPath
+
+    if (this.thumbnailPath) {
+      this.thumbnailUrl = absoluteAPIUrl + hash.thumbnailPath
+    } else {
+      this.thumbnailUrl = window.location.origin + '/client/assets/images/default-playlist.jpg'
+    }
+
+    this.videosLength = hash.videosLength
+
+    this.type = hash.type
+
+    this.createdAt = new Date(hash.createdAt)
+    this.updatedAt = new Date(hash.updatedAt)
+
+    this.ownerAccount = hash.ownerAccount
+    this.ownerBy = Actor.CREATE_BY_STRING(hash.ownerAccount.name, hash.ownerAccount.host)
+    this.ownerAvatarUrl = Actor.GET_ACTOR_AVATAR_URL(this.ownerAccount)
+
+    if (hash.videoChannel) {
+      this.videoChannel = hash.videoChannel
+      this.videoChannelBy = Actor.CREATE_BY_STRING(hash.videoChannel.name, hash.videoChannel.host)
+      this.videoChannelAvatarUrl = Actor.GET_ACTOR_AVATAR_URL(this.videoChannel)
+    }
+
+    this.privacy.label = peertubeTranslate(this.privacy.label, translations)
+
+    if (this.type.id === VideoPlaylistType.WATCH_LATER) {
+      this.displayName = peertubeTranslate(this.displayName, translations)
+    }
+  }
+}
diff --git a/client/src/app/shared/video-playlist/video-playlist.service.ts b/client/src/app/shared/video-playlist/video-playlist.service.ts
new file mode 100644
index 000000000..da7437507
--- /dev/null
+++ b/client/src/app/shared/video-playlist/video-playlist.service.ts
@@ -0,0 +1,179 @@
+import { bufferTime, catchError, filter, first, map, share, switchMap } from 'rxjs/operators'
+import { Injectable } from '@angular/core'
+import { Observable, ReplaySubject, Subject } from 'rxjs'
+import { RestExtractor } from '../rest/rest-extractor.service'
+import { HttpClient, HttpParams } from '@angular/common/http'
+import { ResultList, VideoPlaylistElementCreate, VideoPlaylistElementUpdate } from '../../../../../shared'
+import { environment } from '../../../environments/environment'
+import { VideoPlaylist as VideoPlaylistServerModel } from '@shared/models/videos/playlist/video-playlist.model'
+import { VideoChannelService } from '@app/shared/video-channel/video-channel.service'
+import { VideoChannel } from '@app/shared/video-channel/video-channel.model'
+import { VideoPlaylistCreate } from '@shared/models/videos/playlist/video-playlist-create.model'
+import { VideoPlaylistUpdate } from '@shared/models/videos/playlist/video-playlist-update.model'
+import { objectToFormData } from '@app/shared/misc/utils'
+import { ServerService } from '@app/core'
+import { VideoPlaylist } from '@app/shared/video-playlist/video-playlist.model'
+import { AccountService } from '@app/shared/account/account.service'
+import { Account } from '@app/shared/account/account.model'
+import { RestService } from '@app/shared/rest'
+import { VideoExistInPlaylist } from '@shared/models/videos/playlist/video-exist-in-playlist.model'
+import { VideoPlaylistReorder } from '@shared/models/videos/playlist/video-playlist-reorder.model'
+
+@Injectable()
+export class VideoPlaylistService {
+  static BASE_VIDEO_PLAYLIST_URL = environment.apiUrl + '/api/v1/video-playlists/'
+  static MY_VIDEO_PLAYLIST_URL = environment.apiUrl + '/api/v1/users/me/video-playlists/'
+
+  // Use a replay subject because we "next" a value before subscribing
+  private videoExistsInPlaylistSubject: Subject<number> = new ReplaySubject(1)
+  private readonly videoExistsInPlaylistObservable: Observable<VideoExistInPlaylist>
+
+  constructor (
+    private authHttp: HttpClient,
+    private serverService: ServerService,
+    private restExtractor: RestExtractor,
+    private restService: RestService
+  ) {
+    this.videoExistsInPlaylistObservable = this.videoExistsInPlaylistSubject.pipe(
+      bufferTime(500),
+      filter(videoIds => videoIds.length !== 0),
+      switchMap(videoIds => this.doVideosExistInPlaylist(videoIds)),
+      share()
+    )
+  }
+
+  listChannelPlaylists (videoChannel: VideoChannel): Observable<ResultList<VideoPlaylist>> {
+    const url = VideoChannelService.BASE_VIDEO_CHANNEL_URL + videoChannel.nameWithHost + '/video-playlists'
+
+    return this.authHttp.get<ResultList<VideoPlaylist>>(url)
+               .pipe(
+                 switchMap(res => this.extractPlaylists(res)),
+                 catchError(err => this.restExtractor.handleError(err))
+               )
+  }
+
+  listAccountPlaylists (account: Account, sort: string): Observable<ResultList<VideoPlaylist>> {
+    const url = AccountService.BASE_ACCOUNT_URL + account.nameWithHost + '/video-playlists'
+
+    let params = new HttpParams()
+    params = this.restService.addRestGetParams(params, undefined, sort)
+
+    return this.authHttp.get<ResultList<VideoPlaylist>>(url, { params })
+               .pipe(
+                 switchMap(res => this.extractPlaylists(res)),
+                 catchError(err => this.restExtractor.handleError(err))
+               )
+  }
+
+  getVideoPlaylist (id: string | number) {
+    const url = VideoPlaylistService.BASE_VIDEO_PLAYLIST_URL + id
+
+    return this.authHttp.get<VideoPlaylist>(url)
+               .pipe(
+                 switchMap(res => this.extractPlaylist(res)),
+                 catchError(err => this.restExtractor.handleError(err))
+               )
+  }
+
+  createVideoPlaylist (body: VideoPlaylistCreate) {
+    const data = objectToFormData(body)
+
+    return this.authHttp.post<{ videoPlaylist: { id: number } }>(VideoPlaylistService.BASE_VIDEO_PLAYLIST_URL, data)
+               .pipe(
+                 catchError(err => this.restExtractor.handleError(err))
+               )
+  }
+
+  updateVideoPlaylist (videoPlaylist: VideoPlaylist, body: VideoPlaylistUpdate) {
+    const data = objectToFormData(body)
+
+    return this.authHttp.put(VideoPlaylistService.BASE_VIDEO_PLAYLIST_URL + videoPlaylist.id, data)
+               .pipe(
+                 map(this.restExtractor.extractDataBool),
+                 catchError(err => this.restExtractor.handleError(err))
+               )
+  }
+
+  removeVideoPlaylist (videoPlaylist: VideoPlaylist) {
+    return this.authHttp.delete(VideoPlaylistService.BASE_VIDEO_PLAYLIST_URL + videoPlaylist.id)
+               .pipe(
+                 map(this.restExtractor.extractDataBool),
+                 catchError(err => this.restExtractor.handleError(err))
+               )
+  }
+
+  addVideoInPlaylist (playlistId: number, body: VideoPlaylistElementCreate) {
+    return this.authHttp.post(VideoPlaylistService.BASE_VIDEO_PLAYLIST_URL + playlistId + '/videos', body)
+               .pipe(
+                 map(this.restExtractor.extractDataBool),
+                 catchError(err => this.restExtractor.handleError(err))
+               )
+  }
+
+  updateVideoOfPlaylist (playlistId: number, videoId: number, body: VideoPlaylistElementUpdate) {
+    return this.authHttp.put(VideoPlaylistService.BASE_VIDEO_PLAYLIST_URL + playlistId + '/videos/' + videoId, body)
+               .pipe(
+                 map(this.restExtractor.extractDataBool),
+                 catchError(err => this.restExtractor.handleError(err))
+               )
+  }
+
+  removeVideoFromPlaylist (playlistId: number, videoId: number) {
+    return this.authHttp.delete(VideoPlaylistService.BASE_VIDEO_PLAYLIST_URL + playlistId + '/videos/' + videoId)
+               .pipe(
+                 map(this.restExtractor.extractDataBool),
+                 catchError(err => this.restExtractor.handleError(err))
+               )
+  }
+
+  reorderPlaylist (playlistId: number, oldPosition: number, newPosition: number) {
+    const body: VideoPlaylistReorder = {
+      startPosition: oldPosition,
+      insertAfterPosition: newPosition
+    }
+
+    return this.authHttp.post(VideoPlaylistService.BASE_VIDEO_PLAYLIST_URL + playlistId + '/videos/reorder', body)
+               .pipe(
+                 map(this.restExtractor.extractDataBool),
+                 catchError(err => this.restExtractor.handleError(err))
+               )
+  }
+
+  doesVideoExistInPlaylist (videoId: number) {
+    this.videoExistsInPlaylistSubject.next(videoId)
+
+    return this.videoExistsInPlaylistObservable.pipe(first())
+  }
+
+  extractPlaylists (result: ResultList<VideoPlaylistServerModel>) {
+    return this.serverService.localeObservable
+               .pipe(
+                 map(translations => {
+                   const playlistsJSON = result.data
+                   const total = result.total
+                   const playlists: VideoPlaylist[] = []
+
+                   for (const playlistJSON of playlistsJSON) {
+                     playlists.push(new VideoPlaylist(playlistJSON, translations))
+                   }
+
+                   return { data: playlists, total }
+                 })
+               )
+  }
+
+  extractPlaylist (playlist: VideoPlaylistServerModel) {
+    return this.serverService.localeObservable
+               .pipe(map(translations => new VideoPlaylist(playlist, translations)))
+  }
+
+  private doVideosExistInPlaylist (videoIds: number[]): Observable<VideoExistInPlaylist> {
+    const url = VideoPlaylistService.MY_VIDEO_PLAYLIST_URL + 'videos-exist'
+    let params = new HttpParams()
+
+    params = this.restService.addObjectParams(params, { videoIds })
+
+    return this.authHttp.get<VideoExistInPlaylist>(url, { params })
+               .pipe(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 1f97bc389..268677977 100644
--- a/client/src/app/shared/video/abstract-video-list.html
+++ b/client/src/app/shared/video/abstract-video-list.html
@@ -1,4 +1,4 @@
-<div [ngClass]="{ 'margin-content': marginContent }">
+<div class="margin-content">
   <div class="videos-header">
     <div *ngIf="titlePage" class="title-page title-page-single">
       <div placement="bottom" [ngbTooltip]="titleTooltip" container="body">
@@ -11,7 +11,7 @@
     <div class="moderation-block" *ngIf="displayModerationBlock">
       <my-peertube-checkbox
         (change)="toggleModerationDisplay()"
-        inputName="display-unlisted-private"  i18n-labelText labelText="Display unlisted and private videos"
+        inputName="display-unlisted-private" i18n-labelText labelText="Display unlisted and private videos"
       >
       </my-peertube-checkbox>
     </div>
@@ -19,13 +19,14 @@
 
   <div class="no-results" i18n *ngIf="pagination.totalItems === 0">No results.</div>
   <div
-    myInfiniteScroller
-    [pageHeight]="pageHeight" [firstLoadedPage]="firstLoadedPage"
-    (nearOfTop)="onNearOfTop()" (nearOfBottom)="onNearOfBottom()" (pageChanged)="onPageChanged($event)"
-    class="videos" #videosElement
+    myInfiniteScroller (nearOfBottom)="onNearOfBottom()" [autoInit]="true"
+    class="videos"
   >
-    <div *ngFor="let videos of videoPages; trackBy: pageByVideoId" class="videos-page">
-      <my-video-miniature *ngFor="let video of videos; trackBy: videoById" [video]="video" [user]="user" [ownerDisplayType]="ownerDisplayType"></my-video-miniature>
-    </div>
+    <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>
   </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 292ede698..9d481d6e4 100644
--- a/client/src/app/shared/video/abstract-video-list.scss
+++ b/client/src/app/shared/video/abstract-video-list.scss
@@ -1,12 +1,5 @@
 @import '_mixins';
-
-.videos {
-  text-align: center;
-
-  my-video-miniature {
-    text-align: left;
-  }
-}
+@import '_miniature';
 
 .videos-header {
   display: flex;
@@ -31,8 +24,33 @@
   }
 }
 
-@media screen and (max-width: 500px) {
-  .videos {
-    @include video-miniature-small-screen;
+.margin-content {
+  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/app/shared/video/abstract-video-list.ts b/client/src/app/shared/video/abstract-video-list.ts
index b0633be4a..fa9d38735 100644
--- a/client/src/app/shared/video/abstract-video-list.ts
+++ b/client/src/app/shared/video/abstract-video-list.ts
@@ -1,66 +1,62 @@
 import { debounceTime } from 'rxjs/operators'
-import { ElementRef, OnDestroy, OnInit, ViewChild } from '@angular/core'
+import { OnDestroy, OnInit } from '@angular/core'
 import { ActivatedRoute, Router } from '@angular/router'
-import { Location } from '@angular/common'
-import { InfiniteScrollerDirective } from '@app/shared/video/infinite-scroller.directive'
 import { fromEvent, Observable, Subscription } from 'rxjs'
 import { AuthService } from '../../core/auth'
 import { ComponentPagination } from '../rest/component-pagination.model'
 import { VideoSortField } from './sort-field.type'
 import { Video } from './video.model'
-import { I18n } from '@ngx-translate/i18n-polyfill'
 import { ScreenService } from '@app/shared/misc/screen.service'
-import { OwnerDisplayType } from '@app/shared/video/video-miniature.component'
+import { MiniatureDisplayOptions, OwnerDisplayType } from '@app/shared/video/video-miniature.component'
 import { Syndication } from '@app/shared/video/syndication.model'
-import { Notifier } from '@app/core'
-
-export abstract class AbstractVideoList implements OnInit, OnDestroy {
-  private static LINES_PER_PAGE = 4
-
-  @ViewChild('videosElement') videosElement: ElementRef
-  @ViewChild(InfiniteScrollerDirective) infiniteScroller: InfiniteScrollerDirective
+import { Notifier, ServerService } from '@app/core'
+import { DisableForReuseHook } from '@app/core/routing/disable-for-reuse-hook'
 
+export abstract class AbstractVideoList implements OnInit, OnDestroy, DisableForReuseHook {
   pagination: ComponentPagination = {
     currentPage: 1,
-    itemsPerPage: 10,
+    itemsPerPage: 25,
     totalItems: null
   }
   sort: VideoSortField = '-publishedAt'
+
   categoryOneOf?: number
   defaultSort: VideoSortField = '-publishedAt'
+
   syndicationItems: Syndication[] = []
 
   loadOnInit = true
-  marginContent = true
-  pageHeight: number
-  videoWidth: number
-  videoHeight: number
-  videoPages: Video[][] = []
+  videos: Video[] = []
   ownerDisplayType: OwnerDisplayType = 'account'
-  firstLoadedPage: number
   displayModerationBlock = false
   titleTooltip: string
+  displayVideoActions = true
 
-  protected baseVideoWidth = 215
-  protected baseVideoHeight = 205
+  disabled = false
+
+  displayOptions: MiniatureDisplayOptions = {
+    date: true,
+    views: true,
+    by: true,
+    privacyLabel: true,
+    privacyText: false,
+    state: false,
+    blacklistInfo: false
+  }
 
   protected abstract notifier: Notifier
   protected abstract authService: AuthService
-  protected abstract router: Router
   protected abstract route: ActivatedRoute
+  protected abstract serverService: ServerService
   protected abstract screenService: ScreenService
-  protected abstract i18n: I18n
-  protected abstract location: Location
-  protected abstract currentRoute: string
+  protected abstract router: Router
   abstract titlePage: string
 
-  protected loadedPages: { [ id: number ]: Video[] } = {}
-  protected loadingPage: { [ id: number ]: boolean } = {}
-  protected otherRouteParams = {}
-
   private resizeSubscription: Subscription
+  private angularState: number
+
+  abstract getVideosObservable (page: number): Observable<{ videos: Video[], totalVideos: number }>
 
-  abstract getVideosObservable (page: number): Observable<{ videos: Video[], totalVideos: number}>
   abstract generateSyndicationList (): void
 
   get user () {
@@ -77,207 +73,96 @@ export abstract class AbstractVideoList implements OnInit, OnDestroy {
       .subscribe(() => this.calcPageSizes())
 
     this.calcPageSizes()
-    if (this.loadOnInit === true) this.loadMoreVideos(this.pagination.currentPage)
+    if (this.loadOnInit === true) this.loadMoreVideos()
   }
 
   ngOnDestroy () {
     if (this.resizeSubscription) this.resizeSubscription.unsubscribe()
   }
 
-  pageByVideoId (index: number, page: Video[]) {
-    // Video are unique in all pages
-    return page.length !== 0 ? page[0].id : 0
+  disableForReuse () {
+    this.disabled = true
   }
 
-  videoById (index: number, video: Video) {
-    return video.id
+  enabledForReuse () {
+    this.disabled = false
   }
 
-  onNearOfTop () {
-    this.previousPage()
+  videoById (index: number, video: Video) {
+    return video.id
   }
 
   onNearOfBottom () {
-    if (this.hasMoreVideos()) {
-      this.nextPage()
-    }
-  }
-
-  onPageChanged (page: number) {
-    this.pagination.currentPage = page
-    this.setNewRouteParams()
-  }
+    if (this.disabled) return
 
-  reloadVideos () {
-    this.loadedPages = {}
-    this.loadMoreVideos(this.pagination.currentPage)
-  }
+    // Last page
+    if (this.pagination.totalItems <= (this.pagination.currentPage * this.pagination.itemsPerPage)) return
 
-  loadMoreVideos (page: number, loadOnTop = false) {
-    this.adjustVideoPageHeight()
+    this.pagination.currentPage += 1
 
-    const currentY = window.scrollY
+    this.setScrollRouteParams()
 
-    if (this.loadedPages[page] !== undefined) return
-    if (this.loadingPage[page] === true) return
+    this.loadMoreVideos()
+  }
 
-    this.loadingPage[page] = true
-    const observable = this.getVideosObservable(page)
+  loadMoreVideos () {
+    const observable = this.getVideosObservable(this.pagination.currentPage)
 
     observable.subscribe(
       ({ videos, totalVideos }) => {
-        this.loadingPage[page] = false
-
-        if (this.firstLoadedPage === undefined || this.firstLoadedPage > page) this.firstLoadedPage = page
-
-        // Paging is too high, return to the first one
-        if (this.pagination.currentPage > 1 && totalVideos <= ((this.pagination.currentPage - 1) * this.pagination.itemsPerPage)) {
-          this.pagination.currentPage = 1
-          this.setNewRouteParams()
-          return this.reloadVideos()
-        }
-
-        this.loadedPages[page] = videos
-        this.buildVideoPages()
         this.pagination.totalItems = totalVideos
+        this.videos = this.videos.concat(videos)
 
-        // Initialize infinite scroller now we loaded the first page
-        if (Object.keys(this.loadedPages).length === 1) {
-          // Wait elements creation
-          setTimeout(() => {
-            this.infiniteScroller.initialize()
-
-            // At our first load, we did not load the first page
-            // Load the previous page so the user can move on the top (and browser previous pages)
-            if (this.pagination.currentPage > 1) this.loadMoreVideos(this.pagination.currentPage - 1, true)
-          }, 500)
-        }
-
-        // Insert elements on the top but keep the scroll in the previous position
-        if (loadOnTop) setTimeout(() => { window.scrollTo(0, currentY + this.pageHeight) }, 0)
+        this.onMoreVideos()
       },
-      error => {
-        this.loadingPage[page] = false
-        this.notifier.error(error.message)
-      }
-    )
-  }
 
-  toggleModerationDisplay () {
-    throw new Error('toggleModerationDisplay is not implemented')
+      error => this.notifier.error(error.message)
+    )
   }
 
-  protected hasMoreVideos () {
-    // No results
-    if (this.pagination.totalItems === 0) return false
-
-    // Not loaded yet
-    if (!this.pagination.totalItems) return true
-
-    const maxPage = this.pagination.totalItems / this.pagination.itemsPerPage
-    return maxPage > this.maxPageLoaded()
+  reloadVideos () {
+    this.pagination.currentPage = 1
+    this.videos = []
+    this.loadMoreVideos()
   }
 
-  protected previousPage () {
-    const min = this.minPageLoaded()
-
-    if (min > 1) {
-      this.loadMoreVideos(min - 1, true)
-    }
+  toggleModerationDisplay () {
+    throw new Error('toggleModerationDisplay is not implemented')
   }
 
-  protected nextPage () {
-    this.loadMoreVideos(this.maxPageLoaded() + 1)
+  removeVideoFromArray (video: Video) {
+    this.videos = this.videos.filter(v => v.id !== video.id)
   }
 
-  protected buildRouteParams () {
-    // There is always a sort and a current page
-    const params = {
-      sort: this.sort,
-      page: this.pagination.currentPage
-    }
-
-    return Object.assign(params, this.otherRouteParams)
-  }
+  // On videos hook for children that want to do something
+  protected onMoreVideos () { /* empty */ }
 
   protected loadRouteParams (routeParams: { [ key: string ]: any }) {
-    this.sort = routeParams['sort'] as VideoSortField || this.defaultSort
-    this.categoryOneOf = routeParams['categoryOneOf']
-    if (routeParams['page'] !== undefined) {
-      this.pagination.currentPage = parseInt(routeParams['page'], 10)
-    } else {
-      this.pagination.currentPage = 1
-    }
-  }
-
-  protected setNewRouteParams () {
-    const paramsObject = this.buildRouteParams()
-
-    const queryParams = Object.keys(paramsObject)
-                              .map(p => p + '=' + paramsObject[p])
-                              .join('&')
-    this.location.replaceState(this.currentRoute, queryParams)
-  }
-
-  protected buildVideoPages () {
-    this.videoPages = Object.values(this.loadedPages)
-  }
-
-  protected adjustVideoPageHeight () {
-    const numberOfPagesLoaded = Object.keys(this.loadedPages).length
-    if (!numberOfPagesLoaded) return
-
-    this.pageHeight = this.videosElement.nativeElement.offsetHeight / numberOfPagesLoaded
-  }
-
-  protected buildVideoHeight () {
-    // Same ratios than base width/height
-    return this.videosElement.nativeElement.offsetWidth * (this.baseVideoHeight / this.baseVideoWidth)
-  }
-
-  private minPageLoaded () {
-    return Math.min(...Object.keys(this.loadedPages).map(e => parseInt(e, 10)))
-  }
-
-  private maxPageLoaded () {
-    return Math.max(...Object.keys(this.loadedPages).map(e => parseInt(e, 10)))
+    this.sort = routeParams[ 'sort' ] as VideoSortField || this.defaultSort
+    this.categoryOneOf = routeParams[ 'categoryOneOf' ]
+    this.angularState = routeParams[ 'a-state' ]
   }
 
   private calcPageSizes () {
-    if (this.screenService.isInMobileView() || this.baseVideoWidth === -1) {
+    if (this.screenService.isInMobileView()) {
       this.pagination.itemsPerPage = 5
-
-      // Video takes all the width
-      this.videoWidth = -1
-      this.videoHeight = this.buildVideoHeight()
-      this.pageHeight = this.pagination.itemsPerPage * this.videoHeight
-    } else {
-      this.videoWidth = this.baseVideoWidth
-      this.videoHeight = this.baseVideoHeight
-
-      const videosWidth = this.videosElement.nativeElement.offsetWidth
-      this.pagination.itemsPerPage = Math.floor(videosWidth / this.videoWidth) * AbstractVideoList.LINES_PER_PAGE
-      this.pageHeight = this.videoHeight * AbstractVideoList.LINES_PER_PAGE
     }
+  }
 
-    // Rebuild pages because maybe we modified the number of items per page
-    const videos = [].concat(...this.videoPages)
-    this.loadedPages = {}
+  private setScrollRouteParams () {
+    // Already set
+    if (this.angularState) return
 
-    let i = 1
-    // Don't include the last page if it not complete
-    while (videos.length >= this.pagination.itemsPerPage && i < 10000) { // 10000 -> Hard limit in case of infinite loop
-      this.loadedPages[i] = videos.splice(0, this.pagination.itemsPerPage)
-      i++
-    }
+    this.angularState = 42
 
-    // Re fetch the last page
-    if (videos.length !== 0) {
-      this.loadMoreVideos(i)
-    } else {
-      this.buildVideoPages()
+    const queryParams = {
+      'a-state': this.angularState,
+      categoryOneOf: this.categoryOneOf
     }
 
-    console.log('Rebuilt pages with %s elements per page.', this.pagination.itemsPerPage)
+    let path = this.router.url
+    if (!path || path === '/') path = this.serverService.getConfig().instance.defaultClientRoute
+
+    this.router.navigate([ path ], { queryParams, replaceUrl: true, queryParamsHandling: 'merge' })
   }
 }
diff --git a/client/src/app/shared/video/infinite-scroller.directive.ts b/client/src/app/shared/video/infinite-scroller.directive.ts
index a02e9444a..5f8a1dd6e 100644
--- a/client/src/app/shared/video/infinite-scroller.directive.ts
+++ b/client/src/app/shared/video/infinite-scroller.directive.ts
@@ -1,30 +1,23 @@
 import { distinct, distinctUntilChanged, filter, map, share, startWith, throttleTime } from 'rxjs/operators'
-import { Directive, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core'
+import { Directive, ElementRef, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core'
 import { fromEvent, Subscription } from 'rxjs'
 
 @Directive({
   selector: '[myInfiniteScroller]'
 })
 export class InfiniteScrollerDirective implements OnInit, OnDestroy {
-  @Input() containerHeight: number
-  @Input() pageHeight: number
-  @Input() firstLoadedPage = 1
   @Input() percentLimit = 70
   @Input() autoInit = false
+  @Input() onItself = false
 
   @Output() nearOfBottom = new EventEmitter<void>()
-  @Output() nearOfTop = new EventEmitter<void>()
-  @Output() pageChanged = new EventEmitter<number>()
 
   private decimalLimit = 0
   private lastCurrentBottom = -1
-  private lastCurrentTop = 0
   private scrollDownSub: Subscription
-  private scrollUpSub: Subscription
-  private pageChangeSub: Subscription
-  private middleScreen: number
+  private container: HTMLElement
 
-  constructor () {
+  constructor (private el: ElementRef) {
     this.decimalLimit = this.percentLimit / 100
   }
 
@@ -34,21 +27,21 @@ export class InfiniteScrollerDirective implements OnInit, OnDestroy {
 
   ngOnDestroy () {
     if (this.scrollDownSub) this.scrollDownSub.unsubscribe()
-    if (this.scrollUpSub) this.scrollUpSub.unsubscribe()
-    if (this.pageChangeSub) this.pageChangeSub.unsubscribe()
   }
 
   initialize () {
-    this.middleScreen = window.innerHeight / 2
+    if (this.onItself) {
+      this.container = this.el.nativeElement
+    }
 
     // Emit the last value
     const throttleOptions = { leading: true, trailing: true }
 
-    const scrollObservable = fromEvent(window, 'scroll')
+    const scrollObservable = fromEvent(this.container || window, 'scroll')
       .pipe(
         startWith(null),
         throttleTime(200, undefined, throttleOptions),
-        map(() => ({ current: window.scrollY, maximumScroll: document.body.clientHeight - window.innerHeight })),
+        map(() => this.getScrollInfo()),
         distinctUntilChanged((o1, o2) => o1.current === o2.current),
         share()
       )
@@ -66,39 +59,13 @@ export class InfiniteScrollerDirective implements OnInit, OnDestroy {
         filter(({ current, maximumScroll }) => maximumScroll <= 0 || (current / maximumScroll) > this.decimalLimit)
       )
       .subscribe(() => this.nearOfBottom.emit())
-
-    // Scroll up
-    this.scrollUpSub = scrollObservable
-      .pipe(
-        // Check we scroll up
-        filter(({ current }) => {
-          const res = this.lastCurrentTop > current
-
-          this.lastCurrentTop = current
-          return res
-        }),
-        filter(({ current, maximumScroll }) => {
-          return current !== 0 && (1 - (current / maximumScroll)) > this.decimalLimit
-        })
-      )
-      .subscribe(() => this.nearOfTop.emit())
-
-    // Page change
-    this.pageChangeSub = scrollObservable
-      .pipe(
-        distinct(),
-        map(({ current }) => this.calculateCurrentPage(current)),
-        distinctUntilChanged()
-      )
-      .subscribe(res => this.pageChanged.emit(res))
   }
 
-  private calculateCurrentPage (current: number) {
-    const scrollY = current + this.middleScreen
-
-    const page = Math.max(1, Math.ceil(scrollY / this.pageHeight))
+  private getScrollInfo () {
+    if (this.container) {
+      return { current: this.container.scrollTop, maximumScroll: this.container.scrollHeight }
+    }
 
-    // Offset page
-    return page + (this.firstLoadedPage - 1)
+    return { current: window.scrollY, maximumScroll: document.body.clientHeight - window.innerHeight }
   }
 }
diff --git a/client/src/app/videos/+video-watch/modal/video-blacklist.component.html b/client/src/app/shared/video/modals/video-blacklist.component.html
index 1a87bdcd4..1a87bdcd4 100644
--- a/client/src/app/videos/+video-watch/modal/video-blacklist.component.html
+++ b/client/src/app/shared/video/modals/video-blacklist.component.html
diff --git a/client/src/app/videos/+video-watch/modal/video-blacklist.component.scss b/client/src/app/shared/video/modals/video-blacklist.component.scss
index afcdb9a16..afcdb9a16 100644
--- a/client/src/app/videos/+video-watch/modal/video-blacklist.component.scss
+++ b/client/src/app/shared/video/modals/video-blacklist.component.scss
diff --git a/client/src/app/videos/+video-watch/modal/video-blacklist.component.ts b/client/src/app/shared/video/modals/video-blacklist.component.ts
index 50a7cadd1..4e4e8dc50 100644
--- a/client/src/app/videos/+video-watch/modal/video-blacklist.component.ts
+++ b/client/src/app/shared/video/modals/video-blacklist.component.ts
@@ -1,11 +1,12 @@
-import { Component, Input, OnInit, ViewChild } from '@angular/core'
+import { Component, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core'
 import { Notifier, RedirectService } from '@app/core'
-import { FormReactive, VideoBlacklistService, VideoBlacklistValidatorsService } from '../../../shared/index'
+import { VideoBlacklistService } from '../../../shared/video-blacklist'
 import { VideoDetails } from '../../../shared/video/video-details.model'
 import { I18n } from '@ngx-translate/i18n-polyfill'
 import { FormValidatorService } from '@app/shared/forms/form-validators/form-validator.service'
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
 import { NgbModalRef } from '@ng-bootstrap/ng-bootstrap/modal/modal-ref'
+import { FormReactive, VideoBlacklistValidatorsService } from '@app/shared/forms'
 
 @Component({
   selector: 'my-video-blacklist',
@@ -17,6 +18,8 @@ export class VideoBlacklistComponent extends FormReactive implements OnInit {
 
   @ViewChild('modal') modal: NgbModal
 
+  @Output() videoBlacklisted = new EventEmitter()
+
   error: string = null
 
   private openedModal: NgbModalRef
@@ -60,7 +63,11 @@ export class VideoBlacklistComponent extends FormReactive implements OnInit {
           () => {
             this.notifier.success(this.i18n('Video blacklisted.'))
             this.hide()
-            this.redirectService.redirectToHomepage()
+
+            this.video.blacklisted = true
+            this.video.blacklistedReason = reason
+
+            this.videoBlacklisted.emit()
           },
 
           err => this.notifier.error(err.message)
diff --git a/client/src/app/videos/+video-watch/modal/video-download.component.html b/client/src/app/shared/video/modals/video-download.component.html
index 2bb5d6d37..dd01c1388 100644
--- a/client/src/app/videos/+video-watch/modal/video-download.component.html
+++ b/client/src/app/shared/video/modals/video-download.component.html
@@ -9,7 +9,7 @@
       <div class="input-group input-group-sm">
         <div class="input-group-prepend peertube-select-container">
           <select [(ngModel)]="resolutionId">
-            <option *ngFor="let file of video.files" [value]="file.resolution.id">{{ file.resolution.label }}</option>
+            <option *ngFor="let file of video?.files" [value]="file.resolution.id">{{ file.resolution.label }}</option>
           </select>
         </div>
         <input #urlInput (click)="urlInput.select()" type="text" class="form-control input-sm readonly" readonly [value]="getLink()" />
diff --git a/client/src/app/videos/+video-watch/modal/video-download.component.scss b/client/src/app/shared/video/modals/video-download.component.scss
index 3e826c3b6..3e826c3b6 100644
--- a/client/src/app/videos/+video-watch/modal/video-download.component.scss
+++ b/client/src/app/shared/video/modals/video-download.component.scss
diff --git a/client/src/app/videos/+video-watch/modal/video-download.component.ts b/client/src/app/shared/video/modals/video-download.component.ts
index 834385771..d6d10d29e 100644
--- a/client/src/app/videos/+video-watch/modal/video-download.component.ts
+++ b/client/src/app/shared/video/modals/video-download.component.ts
@@ -1,4 +1,4 @@
-import { Component, ElementRef, Input, OnInit, ViewChild } from '@angular/core'
+import { Component, ElementRef, ViewChild } from '@angular/core'
 import { VideoDetails } from '../../../shared/video/video-details.model'
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
 import { I18n } from '@ngx-translate/i18n-polyfill'
@@ -9,26 +9,32 @@ import { Notifier } from '@app/core'
   templateUrl: './video-download.component.html',
   styleUrls: [ './video-download.component.scss' ]
 })
-export class VideoDownloadComponent implements OnInit {
-  @Input() video: VideoDetails = null
-
+export class VideoDownloadComponent {
   @ViewChild('modal') modal: ElementRef
 
   downloadType: 'direct' | 'torrent' | 'magnet' = 'torrent'
   resolutionId: number | string = -1
 
+  video: VideoDetails
+
   constructor (
     private notifier: Notifier,
     private modalService: NgbModal,
     private i18n: I18n
   ) { }
 
-  ngOnInit () {
+  show (video: VideoDetails) {
+    this.video = video
+
+    const m = this.modalService.open(this.modal)
+    m.result.then(() => this.onClose())
+     .catch(() => this.onClose())
+
     this.resolutionId = this.video.files[0].resolution.id
   }
 
-  show () {
-    this.modalService.open(this.modal)
+  onClose () {
+    this.video = undefined
   }
 
   download () {
@@ -45,21 +51,16 @@ export class VideoDownloadComponent implements OnInit {
       return
     }
 
-    const link = (() => {
-      switch (this.downloadType) {
-        case 'direct': {
-          return file.fileDownloadUrl
-        }
-        case 'torrent': {
-          return file.torrentDownloadUrl
-        }
-        case 'magnet': {
-          return file.magnetUri
-        }
-      }
-    })()
+    switch (this.downloadType) {
+      case 'direct':
+        return file.fileDownloadUrl
+
+      case 'torrent':
+        return file.torrentDownloadUrl
 
-    return link
+      case 'magnet':
+        return file.magnetUri
+    }
   }
 
   activateCopiedMessage () {
diff --git a/client/src/app/videos/+video-watch/modal/video-report.component.html b/client/src/app/shared/video/modals/video-report.component.html
index b9434da26..b9434da26 100644
--- a/client/src/app/videos/+video-watch/modal/video-report.component.html
+++ b/client/src/app/shared/video/modals/video-report.component.html
diff --git a/client/src/app/videos/+video-watch/modal/video-report.component.scss b/client/src/app/shared/video/modals/video-report.component.scss
index 4713660a2..4713660a2 100644
--- a/client/src/app/videos/+video-watch/modal/video-report.component.scss
+++ b/client/src/app/shared/video/modals/video-report.component.scss
diff --git a/client/src/app/videos/+video-watch/modal/video-report.component.ts b/client/src/app/shared/video/modals/video-report.component.ts
index 911f3b447..725dd020f 100644
--- a/client/src/app/videos/+video-watch/modal/video-report.component.ts
+++ b/client/src/app/shared/video/modals/video-report.component.ts
@@ -1,12 +1,13 @@
 import { Component, Input, OnInit, ViewChild } from '@angular/core'
 import { Notifier } from '@app/core'
-import { FormReactive, VideoAbuseService } from '../../../shared/index'
+import { FormReactive } from '../../../shared/forms'
 import { VideoDetails } from '../../../shared/video/video-details.model'
 import { I18n } from '@ngx-translate/i18n-polyfill'
 import { FormValidatorService } from '@app/shared/forms/form-validators/form-validator.service'
 import { VideoAbuseValidatorsService } from '@app/shared/forms/form-validators/video-abuse-validators.service'
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
 import { NgbModalRef } from '@ng-bootstrap/ng-bootstrap/modal/modal-ref'
+import { VideoAbuseService } from '@app/shared/video-abuse'
 
 @Component({
   selector: 'my-video-report',
diff --git a/client/src/app/shared/video/video-actions-dropdown.component.html b/client/src/app/shared/video/video-actions-dropdown.component.html
new file mode 100644
index 000000000..ec03fa55d
--- /dev/null
+++ b/client/src/app/shared/video/video-actions-dropdown.component.html
@@ -0,0 +1,21 @@
+<ng-container *ngIf="videoActions.length !== 0">
+
+  <div class="playlist-dropdown" ngbDropdown #playlistDropdown="ngbDropdown" role="button" autoClose="outside" [placement]="getPlaylistDropdownPlacement()"
+    *ngIf="isUserLoggedIn() && displayOptions.playlist" (openChange)="playlistAdd.openChange($event)"
+  >
+    <span class="anchor" ngbDropdownAnchor></span>
+
+    <div ngbDropdownMenu>
+      <my-video-add-to-playlist #playlistAdd [video]="video" [lazyLoad]="true"></my-video-add-to-playlist>
+    </div>
+  </div>
+
+  <my-action-dropdown
+    [actions]="videoActions" [label]="label" [entry]="{ video: video }" (click)="loadDropdownInformation()"
+    [buttonSize]="buttonSize" [placement]="placement" [buttonDirection]="buttonDirection" [buttonStyled]="buttonStyled"
+  ></my-action-dropdown>
+
+  <my-video-download #videoDownloadModal></my-video-download>
+  <my-video-report #videoReportModal [video]="video"></my-video-report>
+  <my-video-blacklist #videoBlacklistModal [video]="video" (videoBlacklisted)="onVideoBlacklisted()"></my-video-blacklist>
+</ng-container>
diff --git a/client/src/app/shared/video/video-actions-dropdown.component.scss b/client/src/app/shared/video/video-actions-dropdown.component.scss
new file mode 100644
index 000000000..7ffdce822
--- /dev/null
+++ b/client/src/app/shared/video/video-actions-dropdown.component.scss
@@ -0,0 +1,12 @@
+.playlist-dropdown {
+  position: absolute;
+
+  .anchor {
+    display: block;
+    opacity: 0;
+  }
+}
+
+/deep/ .icon-playlist-add {
+  left: 2px;
+}
diff --git a/client/src/app/shared/video/video-actions-dropdown.component.ts b/client/src/app/shared/video/video-actions-dropdown.component.ts
new file mode 100644
index 000000000..ee2f44f9e
--- /dev/null
+++ b/client/src/app/shared/video/video-actions-dropdown.component.ts
@@ -0,0 +1,241 @@
+import { AfterViewInit, Component, EventEmitter, Input, OnChanges, Output, ViewChild } from '@angular/core'
+import { I18n } from '@ngx-translate/i18n-polyfill'
+import { DropdownAction, DropdownButtonSize, DropdownDirection } from '@app/shared/buttons/action-dropdown.component'
+import { AuthService, ConfirmService, Notifier, ServerService } from '@app/core'
+import { BlocklistService } from '@app/shared/blocklist'
+import { Video } from '@app/shared/video/video.model'
+import { VideoService } from '@app/shared/video/video.service'
+import { VideoDetails } from '@app/shared/video/video-details.model'
+import { NgbDropdown } from '@ng-bootstrap/ng-bootstrap'
+import { VideoAddToPlaylistComponent } from '@app/shared/video-playlist/video-add-to-playlist.component'
+import { VideoDownloadComponent } from '@app/shared/video/modals/video-download.component'
+import { VideoReportComponent } from '@app/shared/video/modals/video-report.component'
+import { VideoBlacklistComponent } from '@app/shared/video/modals/video-blacklist.component'
+import { VideoBlacklistService } from '@app/shared/video-blacklist'
+import { ScreenService } from '@app/shared/misc/screen.service'
+
+export type VideoActionsDisplayType = {
+  playlist?: boolean
+  download?: boolean
+  update?: boolean
+  blacklist?: boolean
+  delete?: boolean
+  report?: boolean
+}
+
+@Component({
+  selector: 'my-video-actions-dropdown',
+  templateUrl: './video-actions-dropdown.component.html',
+  styleUrls: [ './video-actions-dropdown.component.scss' ]
+})
+export class VideoActionsDropdownComponent implements OnChanges {
+  @ViewChild('playlistDropdown') playlistDropdown: NgbDropdown
+  @ViewChild('playlistAdd') playlistAdd: VideoAddToPlaylistComponent
+
+  @ViewChild('videoDownloadModal') videoDownloadModal: VideoDownloadComponent
+  @ViewChild('videoReportModal') videoReportModal: VideoReportComponent
+  @ViewChild('videoBlacklistModal') videoBlacklistModal: VideoBlacklistComponent
+
+  @Input() video: Video | VideoDetails
+
+  @Input() displayOptions: VideoActionsDisplayType = {
+    playlist: false,
+    download: true,
+    update: true,
+    blacklist: true,
+    delete: true,
+    report: true
+  }
+  @Input() placement = 'left'
+
+  @Input() label: string
+
+  @Input() buttonStyled = false
+  @Input() buttonSize: DropdownButtonSize = 'normal'
+  @Input() buttonDirection: DropdownDirection = 'vertical'
+
+  @Output() videoRemoved = new EventEmitter()
+  @Output() videoUnblacklisted = new EventEmitter()
+  @Output() videoBlacklisted = new EventEmitter()
+
+  videoActions: DropdownAction<{ video: Video }>[][] = []
+
+  private loaded = false
+
+  constructor (
+    private authService: AuthService,
+    private notifier: Notifier,
+    private confirmService: ConfirmService,
+    private videoBlacklistService: VideoBlacklistService,
+    private serverService: ServerService,
+    private screenService: ScreenService,
+    private videoService: VideoService,
+    private blocklistService: BlocklistService,
+    private i18n: I18n
+  ) { }
+
+  get user () {
+    return this.authService.getUser()
+  }
+
+  ngOnChanges () {
+    this.buildActions()
+  }
+
+  isUserLoggedIn () {
+    return this.authService.isLoggedIn()
+  }
+
+  loadDropdownInformation () {
+    if (!this.isUserLoggedIn() || this.loaded === true) return
+
+    this.loaded = true
+
+    if (this.displayOptions.playlist) this.playlistAdd.load()
+  }
+
+  /* Show modals */
+
+  showDownloadModal () {
+    this.videoDownloadModal.show(this.video as VideoDetails)
+  }
+
+  showReportModal () {
+    this.videoReportModal.show()
+  }
+
+  showBlacklistModal () {
+    this.videoBlacklistModal.show()
+  }
+
+  /* Actions checker */
+
+  isVideoUpdatable () {
+    return this.video.isUpdatableBy(this.user)
+  }
+
+  isVideoRemovable () {
+    return this.video.isRemovableBy(this.user)
+  }
+
+  isVideoBlacklistable () {
+    return this.video.isBlackistableBy(this.user)
+  }
+
+  isVideoUnblacklistable () {
+    return this.video.isUnblacklistableBy(this.user)
+  }
+
+  isVideoDownloadable () {
+    return this.video && this.video instanceof VideoDetails && this.video.downloadEnabled
+  }
+
+  /* Action handlers */
+
+  async unblacklistVideo () {
+    const confirmMessage = this.i18n(
+      'Do you really want to remove this video from the blacklist? It will be available again in the videos list.'
+    )
+
+    const res = await this.confirmService.confirm(confirmMessage, this.i18n('Unblacklist'))
+    if (res === false) return
+
+    this.videoBlacklistService.removeVideoFromBlacklist(this.video.id).subscribe(
+      () => {
+        this.notifier.success(this.i18n('Video {{name}} removed from the blacklist.', { name: this.video.name }))
+
+        this.video.blacklisted = false
+        this.video.blacklistedReason = null
+
+        this.videoUnblacklisted.emit()
+      },
+
+      err => this.notifier.error(err.message)
+    )
+  }
+
+  async removeVideo () {
+    const res = await this.confirmService.confirm(this.i18n('Do you really want to delete this video?'), this.i18n('Delete'))
+    if (res === false) return
+
+    this.videoService.removeVideo(this.video.id)
+        .subscribe(
+          () => {
+            this.notifier.success(this.i18n('Video {{videoName}} deleted.', { videoName: this.video.name }))
+
+            this.videoRemoved.emit()
+          },
+
+          error => this.notifier.error(error.message)
+        )
+  }
+
+  onVideoBlacklisted () {
+    this.videoBlacklisted.emit()
+  }
+
+  getPlaylistDropdownPlacement () {
+    if (this.screenService.isInSmallView()) {
+      return 'bottom-right'
+    }
+
+    return 'bottom-left bottom-right'
+  }
+
+  private buildActions () {
+    this.videoActions = []
+
+    if (this.authService.isLoggedIn()) {
+      this.videoActions.push([
+        {
+          label: this.i18n('Save to playlist'),
+          handler: () => this.playlistDropdown.toggle(),
+          isDisplayed: () => this.displayOptions.playlist,
+          iconName: 'playlist-add'
+        }
+      ])
+
+      this.videoActions.push([
+        {
+          label: this.i18n('Download'),
+          handler: () => this.showDownloadModal(),
+          isDisplayed: () => this.displayOptions.download && this.isVideoDownloadable(),
+          iconName: 'download'
+        },
+        {
+          label: this.i18n('Update'),
+          linkBuilder: ({ video }) => [ '/videos/update', video.uuid ],
+          iconName: 'edit',
+          isDisplayed: () => this.displayOptions.update && this.isVideoUpdatable()
+        },
+        {
+          label: this.i18n('Blacklist'),
+          handler: () => this.showBlacklistModal(),
+          iconName: 'no',
+          isDisplayed: () => this.displayOptions.blacklist && this.isVideoBlacklistable()
+        },
+        {
+          label: this.i18n('Unblacklist'),
+          handler: () => this.unblacklistVideo(),
+          iconName: 'undo',
+          isDisplayed: () => this.displayOptions.blacklist && this.isVideoUnblacklistable()
+        },
+        {
+          label: this.i18n('Delete'),
+          handler: () => this.removeVideo(),
+          isDisplayed: () => this.displayOptions.delete && this.isVideoRemovable(),
+          iconName: 'delete'
+        }
+      ])
+
+      this.videoActions.push([
+        {
+          label: this.i18n('Report'),
+          handler: () => this.showReportModal(),
+          isDisplayed: () => this.displayOptions.report,
+          iconName: 'alert'
+        }
+      ])
+    }
+  }
+}
diff --git a/client/src/app/shared/video/video-details.model.ts b/client/src/app/shared/video/video-details.model.ts
index fa4ca7f93..22f024656 100644
--- a/client/src/app/shared/video/video-details.model.ts
+++ b/client/src/app/shared/video/video-details.model.ts
@@ -3,6 +3,8 @@ import { AuthUser } from '../../core'
 import { Video } from '../../shared/video/video.model'
 import { Account } from '@app/shared/account/account.model'
 import { VideoChannel } from '@app/shared/video-channel/video-channel.model'
+import { VideoStreamingPlaylist } from '../../../../../shared/models/videos/video-streaming-playlist.model'
+import { VideoStreamingPlaylistType } from '../../../../../shared/models/videos/video-streaming-playlist.type'
 
 export class VideoDetails extends Video implements VideoDetailsServerModel {
   descriptionPath: string
@@ -12,6 +14,7 @@ export class VideoDetails extends Video implements VideoDetailsServerModel {
   files: VideoFile[]
   account: Account
   commentsEnabled: boolean
+  downloadEnabled: boolean
 
   waitTranscoding: boolean
   state: VideoConstant<VideoState>
@@ -19,6 +22,10 @@ export class VideoDetails extends Video implements VideoDetailsServerModel {
   likesPercent: number
   dislikesPercent: number
 
+  trackerUrls: string[]
+
+  streamingPlaylists: VideoStreamingPlaylist[]
+
   constructor (hash: VideoDetailsServerModel, translations = {}) {
     super(hash, translations)
 
@@ -29,28 +36,24 @@ export class VideoDetails extends Video implements VideoDetailsServerModel {
     this.tags = hash.tags
     this.support = hash.support
     this.commentsEnabled = hash.commentsEnabled
+    this.downloadEnabled = hash.downloadEnabled
 
-    this.buildLikeAndDislikePercents()
-  }
+    this.trackerUrls = hash.trackerUrls
+    this.streamingPlaylists = hash.streamingPlaylists
 
-  isRemovableBy (user: AuthUser) {
-    return user && this.isLocal === true && (this.account.name === user.username || user.hasRight(UserRight.REMOVE_ANY_VIDEO))
-  }
-
-  isBlackistableBy (user: AuthUser) {
-    return this.blacklisted !== true && user && user.hasRight(UserRight.MANAGE_VIDEO_BLACKLIST) === true
+    this.buildLikeAndDislikePercents()
   }
 
-  isUnblacklistableBy (user: AuthUser) {
-    return this.blacklisted === true && user && user.hasRight(UserRight.MANAGE_VIDEO_BLACKLIST) === true
+  buildLikeAndDislikePercents () {
+    this.likesPercent = (this.likes / (this.likes + this.dislikes)) * 100
+    this.dislikesPercent = (this.dislikes / (this.likes + this.dislikes)) * 100
   }
 
-  isUpdatableBy (user: AuthUser) {
-    return user && this.isLocal === true && (this.account.name === user.username || user.hasRight(UserRight.UPDATE_ANY_VIDEO))
+  getHlsPlaylist () {
+    return this.streamingPlaylists.find(p => p.type === VideoStreamingPlaylistType.HLS)
   }
 
-  buildLikeAndDislikePercents () {
-    this.likesPercent = (this.likes / (this.likes + this.dislikes)) * 100
-    this.dislikesPercent = (this.dislikes / (this.likes + this.dislikes)) * 100
+  hasHlsPlaylist () {
+    return !!this.getHlsPlaylist()
   }
 }
diff --git a/client/src/app/shared/video/video-edit.model.ts b/client/src/app/shared/video/video-edit.model.ts
index fc772a3cf..1f633d427 100644
--- a/client/src/app/shared/video/video-edit.model.ts
+++ b/client/src/app/shared/video/video-edit.model.ts
@@ -14,6 +14,7 @@ export class VideoEdit implements VideoUpdate {
   tags: string[]
   nsfw: boolean
   commentsEnabled: boolean
+  downloadEnabled: boolean
   waitTranscoding: boolean
   channelId: number
   privacy: VideoPrivacy
@@ -25,8 +26,17 @@ export class VideoEdit implements VideoUpdate {
   uuid?: string
   id?: number
   scheduleUpdate?: VideoScheduleUpdate
+  originallyPublishedAt?: Date | string
 
-  constructor (video?: Video & { tags: string[], commentsEnabled: boolean, support: string, thumbnailUrl: string, previewUrl: string }) {
+  constructor (
+    video?: Video & {
+      tags: string[],
+      commentsEnabled: boolean,
+      downloadEnabled: boolean,
+      support: string,
+      thumbnailUrl: string,
+      previewUrl: string
+    }) {
     if (video) {
       this.id = video.id
       this.uuid = video.uuid
@@ -38,6 +48,7 @@ export class VideoEdit implements VideoUpdate {
       this.tags = video.tags
       this.nsfw = video.nsfw
       this.commentsEnabled = video.commentsEnabled
+      this.downloadEnabled = video.downloadEnabled
       this.waitTranscoding = video.waitTranscoding
       this.channelId = video.channel.id
       this.privacy = video.privacy.id
@@ -46,6 +57,7 @@ export class VideoEdit implements VideoUpdate {
       this.previewUrl = video.previewUrl
 
       this.scheduleUpdate = video.scheduledUpdate
+      this.originallyPublishedAt = video.originallyPublishedAt ? new Date(video.originallyPublishedAt) : null
     }
   }
 
@@ -67,6 +79,12 @@ export class VideoEdit implements VideoUpdate {
     } else {
       this.scheduleUpdate = null
     }
+
+    // Convert originallyPublishedAt to string so that function objectToFormData() works correctly
+    if (this.originallyPublishedAt) {
+      const originallyPublishedAt = new Date(values['originallyPublishedAt'])
+      this.originallyPublishedAt = originallyPublishedAt.toISOString()
+    }
   }
 
   toFormPatch () {
@@ -80,9 +98,11 @@ export class VideoEdit implements VideoUpdate {
       tags: this.tags,
       nsfw: this.nsfw,
       commentsEnabled: this.commentsEnabled,
+      downloadEnabled: this.downloadEnabled,
       waitTranscoding: this.waitTranscoding,
       channelId: this.channelId,
-      privacy: this.privacy
+      privacy: this.privacy,
+      originallyPublishedAt: this.originallyPublishedAt
     }
 
     // Special case if we scheduled an update
diff --git a/client/src/app/shared/video/video-miniature.component.html b/client/src/app/shared/video/video-miniature.component.html
index 2c635fa2f..7af0f1113 100644
--- a/client/src/app/shared/video/video-miniature.component.html
+++ b/client/src/app/shared/video/video-miniature.component.html
@@ -1,25 +1,56 @@
-<div class="video-miniature">
+<div class="video-miniature" [ngClass]="{ 'display-as-row': displayAsRow }" (mouseenter)="loadActions()">
   <my-video-thumbnail [video]="video" [nsfw]="isVideoBlur"></my-video-thumbnail>
 
-  <div class="video-miniature-information">
-    <a
-      tabindex="-1"
-      class="video-miniature-name"
-      [routerLink]="[ '/videos/watch', video.uuid ]" [attr.title]="video.name" [ngClass]="{ 'blur-filter': isVideoBlur }"
-    >
-      <span *ngIf="isUnlistedVideo()" class="badge badge-warning" i18n>Unlisted</span>
-      <span *ngIf="isPrivateVideo()" class="badge badge-danger" i18n>Private</span>
-
-      {{ video.name }}
-    </a>
-
-    <span i18n class="video-miniature-created-at-views">{{ video.publishedAt | myFromNow }} - {{ video.views | myNumberFormatter }} views</span>
-
-    <a tabindex="-1" *ngIf="displayOwnerAccount()" class="video-miniature-account" [routerLink]="[ '/accounts', video.byAccount ]">
-      {{ video.byAccount }}
-    </a>
-    <a tabindex="-1" *ngIf="displayOwnerVideoChannel()" class="video-miniature-channel" [routerLink]="[ '/video-channels', video.byVideoChannel ]">
-      {{ video.byVideoChannel }}
-    </a>
+  <div class="video-bottom">
+    <div class="video-miniature-information">
+      <a
+        tabindex="-1"
+        class="video-miniature-name"
+        [routerLink]="[ '/videos/watch', video.uuid ]" [attr.title]="video.name" [ngClass]="{ 'blur-filter': isVideoBlur }"
+      >
+        <ng-container *ngIf="displayOptions.privacyLabel">
+          <span *ngIf="isUnlistedVideo()" class="badge badge-warning" i18n>Unlisted</span>
+          <span *ngIf="isPrivateVideo()" class="badge badge-danger" i18n>Private</span>
+        </ng-container>
+
+        {{ video.name }}
+      </a>
+
+      <span class="video-miniature-created-at-views">
+        <ng-container *ngIf="displayOptions.date">{{ video.publishedAt | myFromNow }}</ng-container>
+        <ng-container *ngIf="displayOptions.date && displayOptions.views"> - </ng-container>
+        <ng-container i18n *ngIf="displayOptions.views">{{ video.views | myNumberFormatter }} views</ng-container>
+      </span>
+
+      <a tabindex="-1" *ngIf="displayOptions.by && displayOwnerAccount()" class="video-miniature-account" [routerLink]="[ '/accounts', video.byAccount ]">
+        {{ video.byAccount }}
+      </a>
+      <a tabindex="-1" *ngIf="displayOptions.by && displayOwnerVideoChannel()" class="video-miniature-channel" [routerLink]="[ '/video-channels', video.byVideoChannel ]">
+        {{ video.byVideoChannel }}
+      </a>
+
+      <div class="video-info-privacy">
+        <ng-container *ngIf="displayOptions.privacyText">{{ video.privacy.label }}</ng-container>
+        <ng-container *ngIf="displayOptions.privacyText && displayOptions.state"> - </ng-container>
+        <ng-container *ngIf="displayOptions.state">{{ getStateLabel(video) }}</ng-container>
+      </div>
+
+      <div *ngIf="displayOptions.blacklistInfo && video.blacklisted" class="video-info-blacklisted">
+        <span class="blacklisted-label" i18n>Blacklisted</span>
+        <span class="blacklisted-reason" *ngIf="video.blacklistedReason">{{ video.blacklistedReason }}</span>
+      </div>
+
+      <div i18n *ngIf="displayOptions.nsfw && video.nsfw" class="video-info-nsfw">
+        Sensitive
+      </div>
+    </div>
+
+    <div class="video-actions">
+      <!-- FIXME: remove bottom placement when overflow is fixed in bootstrap dropdown -->
+      <my-video-actions-dropdown
+        *ngIf="showActions" [video]="video" [displayOptions]="videoActionsDisplayOptions" placement="bottom-left bottom-right left"
+        (videoRemoved)="onVideoRemoved()" (videoBlacklisted)="onVideoBlacklisted()" (videoUnblacklisted)="onVideoUnblacklisted()"
+      ></my-video-actions-dropdown>
+    </div>
   </div>
 </div>
diff --git a/client/src/app/shared/video/video-miniature.component.scss b/client/src/app/shared/video/video-miniature.component.scss
index f44bdf9a9..d665ce021 100644
--- a/client/src/app/shared/video/video-miniature.component.scss
+++ b/client/src/app/shared/video/video-miniature.component.scss
@@ -1,59 +1,156 @@
 @import '_variables';
 @import '_mixins';
+@import '_miniature';
+
+$more-button-width: 41px;
+$more-margin-right: 10px;
 
 .video-miniature {
-  display: inline-block;
-  padding-right: 15px;
+  width: $video-miniature-width;
+  display: inline-flex;
+  flex-direction: column;
   margin-bottom: 30px;
-  height: 175px;
+  height: 195px;
   vertical-align: top;
 
-  .video-miniature-information {
-    width: 200px;
-    margin-top: 2px;
-    line-height: normal;
+  .video-bottom {
+    display: flex;
+
+    .video-miniature-information {
+      width: $video-miniature-width - $more-button-width - $more-margin-right;
+      line-height: normal;
+
+      .video-miniature-name {
+        @include miniature-name;
+      }
+
+      .video-miniature-created-at-views {
+        display: block;
+        font-size: 13px;
+      }
+
+      .video-miniature-account,
+      .video-miniature-channel {
+        @include disable-default-a-behaviour;
+        @include ellipsis;
+
+        display: block;
+        font-size: 13px;
+        color: $grey-foreground-color;
+
+        &:hover {
+          color: $grey-foreground-hover-color;
+        }
+      }
+
+      .video-info-privacy,
+      .video-info-blacklisted .blacklisted-label,
+      .video-info-nsfw {
+        font-weight: $font-semibold;
+      }
+
+      .video-info-blacklisted {
+        color: red;
+
+        .blacklisted-reason::before {
+          content: ' - ';
+        }
+      }
+
+      .video-info-nsfw {
+        color: red;
+      }
+    }
 
-    .video-miniature-name {
-      @include ellipsis-multiline(
-        $font-size: 1rem,
-        $line-height: 1,
-        $lines-to-show: 2
-      );
-      transition: color 0.2s;
-      font-size: 16px;
-      font-weight: $font-semibold;
-      color: var(--mainForegroundColor);
-      margin-top: 5px;
-      margin-bottom: 5px;
+    .video-actions {
+      margin-top: 3px;
+      margin-right: $more-margin-right;
+      width: $more-button-width;
+      height: 30px;
 
-      &:hover {
-        text-decoration: none;
+      /deep/ .dropdown-root:not(.show) {
+        opacity: 0;
       }
 
-      &.blur-filter {
-        filter: blur(3px);
-        padding-left: 4px;
+      /deep/ .playlist-dropdown.show + my-action-dropdown .dropdown-root {
+        opacity: 1;
       }
     }
 
-    .video-miniature-created-at-views {
-      display: block;
-      font-size: 13px;
+    &:hover .video-actions /deep/ .dropdown-root {
+      opacity: 1;
     }
 
-    .video-miniature-account,
-    .video-miniature-channel {
-      @include disable-default-a-behaviour;
+    @media screen and (max-width: $small-view) {
+      .video-miniature-information .video-miniature-name {
+        margin-top: 0;
+      }
+
+      .video-actions {
+        margin: 0;
+        top: -3px;
 
-      display: block;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      font-size: 13px;
-      color: $grey-foreground-color;
+        /deep/ .dropdown-root {
+          opacity: 1 !important;
+        }
+      }
+    }
+  }
+
+  &.display-as-row {
+    flex-direction: row;
+    margin-bottom: 0;
+    height: auto;
+    width: 100%;
+
+    my-video-thumbnail {
+      margin-right: 10px;
+    }
+
+    .video-bottom {
+      .video-miniature-information {
+        width: auto;
+        min-width: 500px;
+
+        .video-miniature-name {
+          @include ellipsis-multiline(1.3em, 2);
+
+          margin-top: 2px;
+          margin-bottom: 5px;
+        }
+
+        .video-miniature-created-at-views,
+        .video-miniature-account,
+        .video-miniature-channel {
+          font-size: 14px;
+          width: fit-content;
+        }
+
+        .video-info-privacy {
+          margin-top: 5px;
+        }
+
+        .video-info-blacklisted {
+          margin-top: 3px;
+        }
+      }
+
+      .video-actions {
+        margin: 0;
+        top: -3px;
+      }
+    }
+
+    @media screen and (max-width: $small-view) {
+      flex-direction: column;
+      height: auto;
+
+      my-video-thumbnail {
+        margin-right: 0;
+      }
 
-      &:hover {
-        color: $grey-foreground-hover-color;
+      .video-miniature-information {
+        min-width: initial;
       }
     }
   }
diff --git a/client/src/app/shared/video/video-miniature.component.ts b/client/src/app/shared/video/video-miniature.component.ts
index 2f951a1f1..48475033c 100644
--- a/client/src/app/shared/video/video-miniature.component.ts
+++ b/client/src/app/shared/video/video-miniature.component.ts
@@ -1,10 +1,23 @@
-import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core'
+import { ChangeDetectionStrategy, Component, EventEmitter, Inject, Input, LOCALE_ID, OnInit, Output } from '@angular/core'
 import { User } from '../users'
 import { Video } from './video.model'
 import { ServerService } from '@app/core'
-import { VideoPrivacy } from '../../../../../shared'
+import { VideoPrivacy, VideoState } from '../../../../../shared'
+import { I18n } from '@ngx-translate/i18n-polyfill'
+import { VideoActionsDisplayType } from '@app/shared/video/video-actions-dropdown.component'
+import { ScreenService } from '@app/shared/misc/screen.service'
 
 export type OwnerDisplayType = 'account' | 'videoChannel' | 'auto'
+export type MiniatureDisplayOptions = {
+  date?: boolean
+  views?: boolean
+  by?: boolean
+  privacyLabel?: boolean
+  privacyText?: boolean
+  state?: boolean
+  blacklistInfo?: boolean
+  nsfw?: boolean
+}
 
 @Component({
   selector: 'my-video-miniature',
@@ -15,31 +28,53 @@ export type OwnerDisplayType = 'account' | 'videoChannel' | 'auto'
 export class VideoMiniatureComponent implements OnInit {
   @Input() user: User
   @Input() video: Video
+
   @Input() ownerDisplayType: OwnerDisplayType = 'account'
+  @Input() displayOptions: MiniatureDisplayOptions = {
+    date: true,
+    views: true,
+    by: true,
+    privacyLabel: false,
+    privacyText: false,
+    state: false,
+    blacklistInfo: false
+  }
+  @Input() displayAsRow = false
+  @Input() displayVideoActions = true
+
+  @Output() videoBlacklisted = new EventEmitter()
+  @Output() videoUnblacklisted = new EventEmitter()
+  @Output() videoRemoved = new EventEmitter()
+
+  videoActionsDisplayOptions: VideoActionsDisplayType = {
+    playlist: true,
+    download: false,
+    update: true,
+    blacklist: true,
+    delete: true,
+    report: true
+  }
+  showActions = false
 
   private ownerDisplayTypeChosen: 'account' | 'videoChannel'
 
-  constructor (private serverService: ServerService) { }
+  constructor (
+    private screenService: ScreenService,
+    private serverService: ServerService,
+    private i18n: I18n,
+    @Inject(LOCALE_ID) private localeId: string
+  ) { }
 
   get isVideoBlur () {
     return this.video.isVideoNSFWForUser(this.user, this.serverService.getConfig())
   }
 
   ngOnInit () {
-    if (this.ownerDisplayType === 'account' || this.ownerDisplayType === 'videoChannel') {
-      this.ownerDisplayTypeChosen = this.ownerDisplayType
-      return
-    }
+    this.setUpBy()
 
-    // If the video channel name an UUID (not really displayable, we changed this behaviour in v1.0.0-beta.12)
-    // -> Use the account name
-    if (
-      this.video.channel.name === `${this.video.account.name}_channel` ||
-      this.video.channel.name.match(/^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/)
-    ) {
-      this.ownerDisplayTypeChosen = 'account'
-    } else {
-      this.ownerDisplayTypeChosen = 'videoChannel'
+    // We rely on mouseenter to lazy load actions
+    if (this.screenService.isInTouchScreen()) {
+      this.loadActions()
     }
   }
 
@@ -58,4 +93,63 @@ export class VideoMiniatureComponent implements OnInit {
   isPrivateVideo () {
     return this.video.privacy.id === VideoPrivacy.PRIVATE
   }
+
+  getStateLabel (video: Video) {
+    if (video.privacy.id !== VideoPrivacy.PRIVATE && video.state.id === VideoState.PUBLISHED) {
+      return this.i18n('Published')
+    }
+
+    if (video.scheduledUpdate) {
+      const updateAt = new Date(video.scheduledUpdate.updateAt.toString()).toLocaleString(this.localeId)
+      return this.i18n('Publication scheduled on ') + updateAt
+    }
+
+    if (video.state.id === VideoState.TO_TRANSCODE && video.waitTranscoding === true) {
+      return this.i18n('Waiting transcoding')
+    }
+
+    if (video.state.id === VideoState.TO_TRANSCODE) {
+      return this.i18n('To transcode')
+    }
+
+    if (video.state.id === VideoState.TO_IMPORT) {
+      return this.i18n('To import')
+    }
+
+    return ''
+  }
+
+  loadActions () {
+    if (this.displayVideoActions) this.showActions = true
+  }
+
+  onVideoBlacklisted () {
+    this.videoBlacklisted.emit()
+  }
+
+  onVideoUnblacklisted () {
+    this.videoUnblacklisted.emit()
+  }
+
+  onVideoRemoved () {
+    this.videoRemoved.emit()
+  }
+
+  private setUpBy () {
+    if (this.ownerDisplayType === 'account' || this.ownerDisplayType === 'videoChannel') {
+      this.ownerDisplayTypeChosen = this.ownerDisplayType
+      return
+    }
+
+    // If the video channel name an UUID (not really displayable, we changed this behaviour in v1.0.0-beta.12)
+    // -> Use the account name
+    if (
+      this.video.channel.name === `${this.video.account.name}_channel` ||
+      this.video.channel.name.match(/^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/)
+    ) {
+      this.ownerDisplayTypeChosen = 'account'
+    } else {
+      this.ownerDisplayTypeChosen = 'videoChannel'
+    }
+  }
 }
diff --git a/client/src/app/shared/video/video-thumbnail.component.html b/client/src/app/shared/video/video-thumbnail.component.html
index d25666916..b302ebd0f 100644
--- a/client/src/app/shared/video/video-thumbnail.component.html
+++ b/client/src/app/shared/video/video-thumbnail.component.html
@@ -1,10 +1,14 @@
 <a
-  [routerLink]="['/videos/watch', video.uuid]" [attr.title]="video.name"
+  [routerLink]="getVideoRouterLink()" [queryParams]="queryParams" [attr.title]="video.name"
   class="video-thumbnail"
 >
   <img alt="" [attr.aria-labelledby]="video.name" [attr.src]="getImageUrl()" [ngClass]="{ 'blur-filter': nsfw }" />
 
-  <div class="video-thumbnail-overlay">{{ video.durationLabel }}</div>
+  <div class="video-thumbnail-duration-overlay">{{ video.durationLabel }}</div>
+
+  <div class="play-overlay">
+    <div class="icon"></div>
+  </div>
 
   <div class="progress-bar" *ngIf="video.userHistory?.currentTime">
     <div [ngStyle]="{ 'width.%': getProgressPercent() }"></div>
diff --git a/client/src/app/shared/video/video-thumbnail.component.scss b/client/src/app/shared/video/video-thumbnail.component.scss
index 4772edaf0..469b659e9 100644
--- a/client/src/app/shared/video/video-thumbnail.component.scss
+++ b/client/src/app/shared/video/video-thumbnail.component.scss
@@ -1,39 +1,15 @@
 @import '_variables';
 @import '_mixins';
+@import '_miniature';
 
 .video-thumbnail {
-  display: inline-block;
-  position: relative;
-  border-radius: 4px;
-  overflow: hidden;
-  width: $video-thumbnail-width;
-  height: $video-thumbnail-height;
-  background-color: #ececec;
-
-  &:hover {
-    text-decoration: none !important;
-  }
-
-  @include disable-outline;
-  &.focus-visible {
-    box-shadow: 0 0 0 2px var(--mainColor);
-  }
-
-  img {
-    width: $video-thumbnail-width;
-    height: $video-thumbnail-height;
-
-    &.blur-filter {
-      filter: blur(5px);
-      transform : scale(1.03);
-    }
-  }
+  @include miniature-thumbnail;
 
   .progress-bar {
     height: 3px;
     width: 100%;
-    position: relative;
-    top: -3px;
+    position: absolute;
+    bottom: 0;
     background-color: rgba(0, 0, 0, 0.20);
 
     div {
@@ -42,16 +18,15 @@
     }
   }
 
-  .video-thumbnail-overlay {
+  .video-thumbnail-duration-overlay {
+    @include static-thumbnail-overlay;
+
     position: absolute;
     right: 5px;
     bottom: 5px;
-    display: inline-block;
-    background-color: rgba(0, 0, 0, 0.7);
-    color: #fff;
+    padding: 0 5px;
+    border-radius: 3px;
     font-size: 12px;
     font-weight: $font-bold;
-    border-radius: 3px;
-    padding: 0 5px;
   }
 }
diff --git a/client/src/app/shared/video/video-thumbnail.component.ts b/client/src/app/shared/video/video-thumbnail.component.ts
index ca43700c7..fe65ade94 100644
--- a/client/src/app/shared/video/video-thumbnail.component.ts
+++ b/client/src/app/shared/video/video-thumbnail.component.ts
@@ -10,8 +10,11 @@ import { ScreenService } from '@app/shared/misc/screen.service'
 export class VideoThumbnailComponent {
   @Input() video: Video
   @Input() nsfw = false
+  @Input() routerLink: any[]
+  @Input() queryParams: any[]
 
-  constructor (private screenService: ScreenService) {}
+  constructor (private screenService: ScreenService) {
+  }
 
   getImageUrl () {
     if (!this.video) return ''
@@ -30,4 +33,10 @@ export class VideoThumbnailComponent {
 
     return (currentTime / this.video.duration) * 100
   }
+
+  getVideoRouterLink () {
+    if (this.routerLink) return this.routerLink
+
+    return [ '/videos/watch', this.video.uuid ]
+  }
 }
diff --git a/client/src/app/shared/video/video.model.ts b/client/src/app/shared/video/video.model.ts
index 6ea83d13b..0cef3eb8f 100644
--- a/client/src/app/shared/video/video.model.ts
+++ b/client/src/app/shared/video/video.model.ts
@@ -1,11 +1,12 @@
 import { User } from '../'
-import { Video as VideoServerModel, VideoPrivacy, VideoState } from '../../../../../shared'
+import { PlaylistElement, UserRight, Video as VideoServerModel, VideoPrivacy, VideoState } from '../../../../../shared'
 import { Avatar } from '../../../../../shared/models/avatars/avatar.model'
 import { VideoConstant } from '../../../../../shared/models/videos/video-constant.model'
 import { durationToString, getAbsoluteAPIUrl } from '../misc/utils'
 import { peertubeTranslate, ServerConfig } from '../../../../../shared/models'
 import { Actor } from '@app/shared/actor/actor.model'
 import { VideoScheduleUpdate } from '../../../../../shared/models/videos/video-schedule-update.model'
+import { AuthUser } from '@app/core'
 
 export class Video implements VideoServerModel {
   byVideoChannel: string
@@ -17,6 +18,7 @@ export class Video implements VideoServerModel {
   createdAt: Date
   updatedAt: Date
   publishedAt: Date
+  originallyPublishedAt: Date | string
   category: VideoConstant<number>
   licence: VideoConstant<number>
   language: VideoConstant<string>
@@ -46,6 +48,8 @@ export class Video implements VideoServerModel {
   blacklisted?: boolean
   blacklistedReason?: string
 
+  playlistElement?: PlaylistElement
+
   account: {
     id: number
     uuid: string
@@ -116,12 +120,16 @@ export class Video implements VideoServerModel {
     this.privacy.label = peertubeTranslate(this.privacy.label, translations)
 
     this.scheduledUpdate = hash.scheduledUpdate
+    this.originallyPublishedAt = hash.originallyPublishedAt ? new Date(hash.originallyPublishedAt.toString()) : null
+
     if (this.state) this.state.label = peertubeTranslate(this.state.label, translations)
 
     this.blacklisted = hash.blacklisted
     this.blacklistedReason = hash.blacklistedReason
 
     this.userHistory = hash.userHistory
+
+    this.playlistElement = hash.playlistElement
   }
 
   isVideoNSFWForUser (user: User, serverConfig: ServerConfig) {
@@ -134,4 +142,20 @@ export class Video implements VideoServerModel {
     // Return default instance config
     return serverConfig.instance.defaultNSFWPolicy !== 'display'
   }
+
+  isRemovableBy (user: AuthUser) {
+    return user && this.isLocal === true && (this.account.name === user.username || user.hasRight(UserRight.REMOVE_ANY_VIDEO))
+  }
+
+  isBlackistableBy (user: AuthUser) {
+    return this.blacklisted !== true && user && user.hasRight(UserRight.MANAGE_VIDEO_BLACKLIST) === true
+  }
+
+  isUnblacklistableBy (user: AuthUser) {
+    return this.blacklisted === true && user && user.hasRight(UserRight.MANAGE_VIDEO_BLACKLIST) === true
+  }
+
+  isUpdatableBy (user: AuthUser) {
+    return user && this.isLocal === true && (this.account.name === user.username || user.hasRight(UserRight.UPDATE_ANY_VIDEO))
+  }
 }
diff --git a/client/src/app/shared/video/video.service.ts b/client/src/app/shared/video/video.service.ts
index 55844f988..ef489648c 100644
--- a/client/src/app/shared/video/video.service.ts
+++ b/client/src/app/shared/video/video.service.ts
@@ -31,6 +31,8 @@ import { ServerService } from '@app/core'
 import { UserSubscriptionService } from '@app/shared/user-subscription/user-subscription.service'
 import { VideoChannel } from '@app/shared/video-channel/video-channel.model'
 import { I18n } from '@ngx-translate/i18n-polyfill'
+import { VideoPlaylist } from '@app/shared/video-playlist/video-playlist.model'
+import { VideoPlaylistService } from '@app/shared/video-playlist/video-playlist.service'
 
 export interface VideosProvider {
   getVideos (
@@ -81,6 +83,7 @@ export class VideoService implements VideosProvider {
     const description = video.description || null
     const support = video.support || null
     const scheduleUpdate = video.scheduleUpdate || null
+    const originallyPublishedAt = video.originallyPublishedAt || null
 
     const body: VideoUpdate = {
       name: video.name,
@@ -95,9 +98,11 @@ export class VideoService implements VideosProvider {
       nsfw: video.nsfw,
       waitTranscoding: video.waitTranscoding,
       commentsEnabled: video.commentsEnabled,
+      downloadEnabled: video.downloadEnabled,
       thumbnailfile: video.thumbnailfile,
       previewfile: video.previewfile,
-      scheduleUpdate
+      scheduleUpdate,
+      originallyPublishedAt
     }
 
     const data = objectToFormData(body)
@@ -167,6 +172,23 @@ export class VideoService implements VideosProvider {
                )
   }
 
+  getPlaylistVideos (
+    videoPlaylistId: number | string,
+    videoPagination: ComponentPagination
+  ): Observable<{ videos: Video[], totalVideos: number }> {
+    const pagination = this.restService.componentPaginationToRestPagination(videoPagination)
+
+    let params = new HttpParams()
+    params = this.restService.addRestGetParams(params, pagination)
+
+    return this.authHttp
+               .get<ResultList<Video>>(VideoPlaylistService.BASE_VIDEO_PLAYLIST_URL + videoPlaylistId + '/videos', { params })
+               .pipe(
+                 switchMap(res => this.extractVideos(res)),
+                 catchError(err => this.restExtractor.handleError(err))
+               )
+  }
+
   getUserSubscriptionVideos (
     videoPagination: ComponentPagination,
     sort: VideoSortField
diff --git a/client/src/app/shared/video/videos-selection.component.html b/client/src/app/shared/video/videos-selection.component.html
new file mode 100644
index 000000000..53809b6fd
--- /dev/null
+++ b/client/src/app/shared/video/videos-selection.component.html
@@ -0,0 +1,26 @@
+<div class="no-results" i18n *ngIf="pagination.totalItems === 0">No results.</div>
+
+<div myInfiniteScroller [autoInit]="true" (nearOfBottom)="onNearOfBottom()" class="videos">
+  <div class="video" *ngFor="let video of videos; let i = index">
+    <div class="checkbox-container">
+      <my-peertube-checkbox [inputName]="'video-check-' + video.id" [(ngModel)]="_selection[video.id]"></my-peertube-checkbox>
+    </div>
+
+    <my-video-miniature [video]="video" [displayAsRow]="true" [displayOptions]="miniatureDisplayOptions" [displayVideoActions]="false"></my-video-miniature>
+
+    <!-- Display only once -->
+    <div class="action-selection-mode" *ngIf="isInSelectionMode() === true && i === 0">
+      <div class="action-selection-mode-child">
+        <span i18n class="action-button action-button-cancel-selection" (click)="abortSelectionMode()">
+          Cancel
+        </span>
+
+        <ng-container *ngTemplateOutlet="globalButtonsTemplate"></ng-container>
+      </div>
+    </div>
+
+    <ng-container  *ngIf="isInSelectionMode() === false">
+      <ng-container *ngTemplateOutlet="rowButtonsTemplate; context: {$implicit: video}"></ng-container>
+    </ng-container>
+  </div>
+</div>
diff --git a/client/src/app/shared/video/videos-selection.component.scss b/client/src/app/shared/video/videos-selection.component.scss
new file mode 100644
index 000000000..d3cbabf23
--- /dev/null
+++ b/client/src/app/shared/video/videos-selection.component.scss
@@ -0,0 +1,57 @@
+@import '_variables';
+@import '_mixins';
+
+.action-selection-mode {
+  display: flex;
+  justify-content: flex-end;
+  flex-grow: 1;
+
+  .action-selection-mode-child {
+    position: fixed;
+
+    .action-button {
+      display: inline-block;
+    }
+
+    .action-button-cancel-selection {
+      @include peertube-button;
+      @include grey-button;
+
+      margin-right: 10px;
+    }
+  }
+}
+
+.video {
+  @include row-blocks;
+
+  &:first-child {
+    margin-top: 47px;
+  }
+
+  .checkbox-container {
+    display: flex;
+    align-items: center;
+    margin-right: 20px;
+    margin-left: 12px;
+  }
+
+  my-video-miniature {
+    flex-grow: 1;
+  }
+}
+
+@media screen and (max-width: $small-view) {
+  .video {
+    flex-direction: column;
+    height: auto;
+
+    .checkbox-container {
+      display: none;
+    }
+
+    my-button {
+      margin-top: 10px;
+    }
+  }
+}
diff --git a/client/src/app/shared/video/videos-selection.component.ts b/client/src/app/shared/video/videos-selection.component.ts
new file mode 100644
index 000000000..b6bedafd8
--- /dev/null
+++ b/client/src/app/shared/video/videos-selection.component.ts
@@ -0,0 +1,112 @@
+import {
+  AfterContentInit,
+  Component,
+  ContentChildren,
+  EventEmitter,
+  Input,
+  OnDestroy,
+  OnInit,
+  Output,
+  QueryList,
+  TemplateRef
+} from '@angular/core'
+import { ActivatedRoute, Router } from '@angular/router'
+import { AbstractVideoList } from '@app/shared/video/abstract-video-list'
+import { AuthService, Notifier, ServerService } from '@app/core'
+import { ScreenService } from '@app/shared/misc/screen.service'
+import { MiniatureDisplayOptions } from '@app/shared/video/video-miniature.component'
+import { Observable } from 'rxjs'
+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'
+
+export type SelectionType = { [ id: number ]: boolean }
+
+@Component({
+  selector: 'my-videos-selection',
+  templateUrl: './videos-selection.component.html',
+  styleUrls: [ './videos-selection.component.scss' ]
+})
+export class VideosSelectionComponent extends AbstractVideoList implements OnInit, OnDestroy, AfterContentInit {
+  @Input() titlePage: string
+  @Input() miniatureDisplayOptions: MiniatureDisplayOptions
+  @Input() getVideosObservableFunction: (page: number, sort?: VideoSortField) => Observable<{ videos: Video[], totalVideos: number }>
+  @ContentChildren(PeerTubeTemplateDirective) templates: QueryList<PeerTubeTemplateDirective>
+
+  @Output() selectionChange = new EventEmitter<SelectionType>()
+  @Output() videosModelChange = new EventEmitter<Video[]>()
+
+  _selection: SelectionType = {}
+
+  rowButtonsTemplate: TemplateRef<any>
+  globalButtonsTemplate: TemplateRef<any>
+
+  constructor (
+    protected router: Router,
+    protected route: ActivatedRoute,
+    protected notifier: Notifier,
+    protected authService: AuthService,
+    protected screenService: ScreenService,
+    protected serverService: ServerService
+  ) {
+    super()
+  }
+
+  ngAfterContentInit () {
+    {
+      const t = this.templates.find(t => t.name === 'rowButtons')
+      if (t) this.rowButtonsTemplate = t.template
+    }
+
+    {
+      const t = this.templates.find(t => t.name === 'globalButtons')
+      if (t) this.globalButtonsTemplate = t.template
+    }
+  }
+
+  @Input() get selection () {
+    return this._selection
+  }
+
+  set selection (selection: SelectionType) {
+    this._selection = selection
+    this.selectionChange.emit(this._selection)
+  }
+
+  @Input() get videosModel () {
+    return this.videos
+  }
+
+  set videosModel (videos: Video[]) {
+    this.videos = videos
+    this.videosModelChange.emit(this.videos)
+  }
+
+  ngOnInit () {
+    super.ngOnInit()
+  }
+
+  ngOnDestroy () {
+    super.ngOnDestroy()
+  }
+
+  getVideosObservable (page: number) {
+    return this.getVideosObservableFunction(page, this.sort)
+  }
+
+  abortSelectionMode () {
+    this._selection = {}
+  }
+
+  isInSelectionMode () {
+    return Object.keys(this._selection).some(k => this._selection[ k ] === true)
+  }
+
+  generateSyndicationList () {
+    throw new Error('Method not implemented.')
+  }
+
+  protected onMoreVideos () {
+    this.videosModel = this.videos
+  }
+}
diff --git a/client/src/app/signup/signup-routing.module.ts b/client/src/app/signup/signup-routing.module.ts
index b7ac69b53..820d16d4d 100644
--- a/client/src/app/signup/signup-routing.module.ts
+++ b/client/src/app/signup/signup-routing.module.ts
@@ -1,9 +1,8 @@
 import { NgModule } from '@angular/core'
 import { RouterModule, Routes } from '@angular/router'
-
 import { MetaGuard } from '@ngx-meta/core'
-
 import { SignupComponent } from './signup.component'
+import { ServerConfigResolver } from '@app/core/routing/server-config-resolver.service'
 
 const signupRoutes: Routes = [
   {
@@ -14,6 +13,9 @@ const signupRoutes: Routes = [
       meta: {
         title: 'Signup'
       }
+    },
+    resolve: {
+      serverConfigLoaded: ServerConfigResolver
     }
   }
 ]
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 092c0e862..99695204d 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
@@ -121,11 +121,6 @@
             ></my-peertube-checkbox>
 
             <my-peertube-checkbox
-              inputName="commentsEnabled" formControlName="commentsEnabled"
-              i18n-labelText labelText="Enable video comments"
-            ></my-peertube-checkbox>
-
-            <my-peertube-checkbox
               *ngIf="waitTranscodingEnabled"
               inputName="waitTranscoding" formControlName="waitTranscoding"
               i18n-labelText labelText="Wait transcoding before publishing the video"
@@ -190,31 +185,59 @@
 
     <ngb-tab i18n-title title="Advanced settings">
       <ng-template ngbTabContent>
-        <div class="advanced-settings">
-          <div class="form-group">
-            <my-video-image
-              i18n-inputLabel inputLabel="Upload thumbnail" inputName="thumbnailfile" formControlName="thumbnailfile"
-              previewWidth="200px" previewHeight="110px"
-            ></my-video-image>
-          </div>
+        <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"
+                previewWidth="360px" previewHeight="200px"
+              ></my-image-upload>
+            </div>
 
-          <div class="form-group">
-            <my-video-image
-              i18n-inputLabel inputLabel="Upload preview" inputName="previewfile" formControlName="previewfile"
-              previewWidth="360px" previewHeight="200px"
-            ></my-video-image>
+            <div class="form-group">
+              <label i18n for="support">Support</label>
+              <my-help helpType="markdownEnhanced" i18n-preHtml preHtml="Short text to tell people how they can support you (membership platform...)."></my-help>
+              <my-markdown-textarea
+                id="support" formControlName="support" textareaWidth="500px" [previewColumn]="true" markdownType="enhanced"
+                [classes]="{ 'input-error': formErrors['support'] }"
+              ></my-markdown-textarea>
+              <div *ngIf="formErrors.support" class="form-error">
+                {{ formErrors.support }}
+              </div>
+            </div>
           </div>
 
-          <div class="form-group">
-            <label i18n for="support">Support</label>
-            <my-help helpType="markdownEnhanced" i18n-preHtml preHtml="Short text to tell people how they can support you (membership platform...)."></my-help>
-            <my-markdown-textarea
-              id="support" formControlName="support" textareaWidth="500px" [previewColumn]="true" markdownType="enhanced"
-              [classes]="{ 'input-error': formErrors['support'] }"
-            ></my-markdown-textarea>
-            <div *ngIf="formErrors.support" class="form-error">
-              {{ formErrors.support }}
+          <div class="col-md-12 col-xl-4">
+            <div class="form-group originally-published-at">
+              <label i18n for="originallyPublishedAt">Original publication date</label>
+              <my-help i18n-preHtml preHtml="This is the date when the content was originally published (e.g. the release date for a film)"></my-help>
+              <p-calendar
+                id="originallyPublishedAt" formControlName="originallyPublishedAt" [dateFormat]="calendarDateFormat"
+                [locale]="calendarLocale" [showTime]="true" [hideOnDateTimeSelect]="true" [monthNavigator]="true" [yearNavigator]="true" [yearRange]="myYearRange"
+              >
+              </p-calendar>
+
+              <div *ngIf="formErrors.originallyPublishedAt" class="form-error">
+                {{ formErrors.originallyPublishedAt }}
+              </div>
             </div>
+
+            <my-peertube-checkbox
+              inputName="commentsEnabled" formControlName="commentsEnabled"
+              i18n-labelText labelText="Enable video comments"
+            ></my-peertube-checkbox>
+
+            <my-peertube-checkbox
+              inputName="downloadEnabled" formControlName="downloadEnabled"
+              i18n-labelText labelText="Enable download"
+            ></my-peertube-checkbox>
           </div>
         </div>
       </ng-template>
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 85e015901..c80efd802 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
@@ -1,4 +1,4 @@
-import { Component, Input, OnDestroy, OnInit, ViewChild } from '@angular/core'
+import { Component, Input, NgZone, OnDestroy, OnInit, ViewChild } from '@angular/core'
 import { FormArray, FormControl, FormGroup, ValidatorFn, Validators } from '@angular/forms'
 import { ActivatedRoute, Router } from '@angular/router'
 import { FormReactiveValidationMessages, VideoValidatorsService } from '@app/shared'
@@ -26,7 +26,7 @@ export class VideoEditComponent implements OnInit, OnDestroy {
   @Input() videoPrivacies: VideoConstant<VideoPrivacy>[] = []
   @Input() userVideoChannels: { id: number, label: string, support: string }[] = []
   @Input() schedulePublicationPossible = true
-  @Input() videoCaptions: VideoCaptionEdit[] = []
+  @Input() videoCaptions: (VideoCaptionEdit & { captionPath?: string })[] = []
   @Input() waitTranscodingEnabled = true
 
   @ViewChild('videoCaptionAddModal') videoCaptionAddModal: VideoCaptionAddModalComponent
@@ -45,6 +45,7 @@ export class VideoEditComponent implements OnInit, OnDestroy {
 
   calendarLocale: any = {}
   minScheduledDate = new Date()
+  myYearRange = '1880:' + (new Date()).getFullYear()
 
   calendarTimezone: string
   calendarDateFormat: string
@@ -61,7 +62,8 @@ export class VideoEditComponent implements OnInit, OnDestroy {
     private router: Router,
     private notifier: Notifier,
     private serverService: ServerService,
-    private i18nPrimengCalendarService: I18nPrimengCalendarService
+    private i18nPrimengCalendarService: I18nPrimengCalendarService,
+    private ngZone: NgZone
   ) {
     this.tagValidators = this.videoValidatorsService.VIDEO_TAGS.VALIDATORS
     this.tagValidatorsMessages = this.videoValidatorsService.VIDEO_TAGS.MESSAGES
@@ -81,6 +83,7 @@ export class VideoEditComponent implements OnInit, OnDestroy {
     const defaultValues: any = {
       nsfw: 'false',
       commentsEnabled: 'true',
+      downloadEnabled: 'true',
       waitTranscoding: 'true',
       tags: []
     }
@@ -90,6 +93,7 @@ export class VideoEditComponent implements OnInit, OnDestroy {
       channelId: this.videoValidatorsService.VIDEO_CHANNEL,
       nsfw: null,
       commentsEnabled: null,
+      downloadEnabled: null,
       waitTranscoding: null,
       category: this.videoValidatorsService.VIDEO_CATEGORY,
       licence: this.videoValidatorsService.VIDEO_LICENCE,
@@ -99,7 +103,8 @@ export class VideoEditComponent implements OnInit, OnDestroy {
       thumbnailfile: null,
       previewfile: null,
       support: this.videoValidatorsService.VIDEO_SUPPORT,
-      schedulePublicationAt: this.videoValidatorsService.VIDEO_SCHEDULE_PUBLICATION_AT
+      schedulePublicationAt: this.videoValidatorsService.VIDEO_SCHEDULE_PUBLICATION_AT,
+      originallyPublishedAt: this.videoValidatorsService.VIDEO_ORIGINALLY_PUBLISHED_AT
     }
 
     this.formValidatorService.updateForm(
@@ -128,9 +133,11 @@ export class VideoEditComponent implements OnInit, OnDestroy {
     this.videoLicences = this.serverService.getVideoLicences()
     this.videoLanguages = this.serverService.getVideoLanguages()
 
-    this.schedulerInterval = setInterval(() => this.minScheduledDate = new Date(), 1000 * 60) // Update every minute
-
     this.initialVideoCaptions = this.videoCaptions.map(c => c.language.id)
+
+    this.ngZone.runOutsideAngular(() => {
+      this.schedulerInterval = setInterval(() => this.minScheduledDate = new Date(), 1000 * 60) // Update every minute
+    })
   }
 
   ngOnDestroy () {
diff --git a/client/src/app/videos/+video-edit/shared/video-edit.module.ts b/client/src/app/videos/+video-edit/shared/video-edit.module.ts
index f441d3fde..39b6daa93 100644
--- a/client/src/app/videos/+video-edit/shared/video-edit.module.ts
+++ b/client/src/app/videos/+video-edit/shared/video-edit.module.ts
@@ -2,7 +2,6 @@ import { NgModule } from '@angular/core'
 import { TagInputModule } from 'ngx-chips'
 import { SharedModule } from '../../../shared/'
 import { VideoEditComponent } from './video-edit.component'
-import { VideoImageComponent } from './video-image.component'
 import { CalendarModule } from 'primeng/components/calendar/calendar'
 import { VideoCaptionAddModalComponent } from './video-caption-add-modal.component'
 
@@ -16,7 +15,6 @@ import { VideoCaptionAddModalComponent } from './video-caption-add-modal.compone
 
   declarations: [
     VideoEditComponent,
-    VideoImageComponent,
     VideoCaptionAddModalComponent
   ],
 
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 28eb143c9..537d7ffa2 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]="videoPrivacies" [userVideoChannels]="userVideoChannels"
+    [validationMessages]="validationMessages" [videoPrivacies]="explainedVideoPrivacies" [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 307806bb9..d2e9f6cfe 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
@@ -79,6 +79,7 @@ export class VideoImportTorrentComponent extends VideoSend implements OnInit, Ca
       privacy: this.firstStepPrivacyId,
       waitTranscoding: false,
       commentsEnabled: true,
+      downloadEnabled: true,
       channelId: this.firstStepChannelId
     }
 
@@ -93,12 +94,13 @@ export class VideoImportTorrentComponent extends VideoSend implements OnInit, Ca
 
         this.video = new VideoEdit(Object.assign(res.video, {
           commentsEnabled: videoUpdate.commentsEnabled,
+          downloadEnabled: videoUpdate.downloadEnabled,
           support: null,
           thumbnailUrl: null,
           previewUrl: null
         }))
 
-        this.videoPrivacies = this.videoService.explainedPrivacyLabels(this.videoPrivacies)
+        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 3550c3585..984b9d590 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]="videoPrivacies" [userVideoChannels]="userVideoChannels"
+    [validationMessages]="validationMessages" [videoPrivacies]="explainedVideoPrivacies" [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 257c6e5db..2dffdbf0e 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
@@ -70,6 +70,7 @@ export class VideoImportUrlComponent extends VideoSend implements OnInit, CanCom
       privacy: this.firstStepPrivacyId,
       waitTranscoding: false,
       commentsEnabled: true,
+      downloadEnabled: true,
       channelId: this.firstStepChannelId
     }
 
@@ -84,12 +85,13 @@ export class VideoImportUrlComponent extends VideoSend implements OnInit, CanCom
 
         this.video = new VideoEdit(Object.assign(res.video, {
           commentsEnabled: videoUpdate.commentsEnabled,
+          downloadEnabled: videoUpdate.downloadEnabled,
           support: null,
           thumbnailUrl: null,
           previewUrl: null
         }))
 
-        this.videoPrivacies = this.videoService.explainedPrivacyLabels(this.videoPrivacies)
+        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 580c123a0..8401caeec 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,6 +14,7 @@ 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 b252cd60a..536769d2f 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
@@ -50,7 +50,7 @@
 <form [hidden]="!isUploadingVideo" novalidate [formGroup]="form">
   <my-video-edit
     [form]="form" [formErrors]="formErrors" [videoCaptions]="videoCaptions"
-    [validationMessages]="validationMessages" [videoPrivacies]="videoPrivacies" [userVideoChannels]="userVideoChannels"
+    [validationMessages]="validationMessages" [videoPrivacies]="explainedVideoPrivacies" [userVideoChannels]="userVideoChannels"
     [waitTranscodingEnabled]="waitTranscodingEnabled"
   ></my-video-edit>
 
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 e4d54b654..d6d4bad21 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
@@ -163,9 +163,10 @@ export class VideoUploadComponent extends VideoSend implements OnInit, OnDestroy
     }
 
     const privacy = this.firstStepPrivacyId.toString()
-    const nsfw = false
+    const nsfw = this.serverService.getConfig().instance.isNSFW
     const waitTranscoding = true
     const commentsEnabled = true
+    const downloadEnabled = true
     const channelId = this.firstStepChannelId.toString()
 
     const formData = new FormData()
@@ -174,6 +175,7 @@ export class VideoUploadComponent extends VideoSend implements OnInit, OnDestroy
     formData.append('privacy', VideoPrivacy.PRIVATE.toString())
     formData.append('nsfw', '' + nsfw)
     formData.append('commentsEnabled', '' + commentsEnabled)
+    formData.append('downloadEnabled', '' + downloadEnabled)
     formData.append('waitTranscoding', '' + waitTranscoding)
     formData.append('channelId', '' + channelId)
     formData.append('videofile', videofile)
@@ -188,7 +190,7 @@ export class VideoUploadComponent extends VideoSend implements OnInit, OnDestroy
       channelId
     })
 
-    this.videoPrivacies = this.videoService.explainedPrivacyLabels(this.videoPrivacies)
+    this.explainedVideoPrivacies = this.videoService.explainedPrivacyLabels(this.videoPrivacies)
 
     this.videoUploadObservable = this.videoService.uploadVideo(formData).subscribe(
       event => {
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 4992bb369..b5cab7ed5 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]="videoPrivacies" [userVideoChannels]="userVideoChannels"
+      [validationMessages]="validationMessages" [videoPrivacies]="explainedVideoPrivacies" [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 9e849014e..10f797d02 100644
--- a/client/src/app/videos/+video-edit/video-update.component.ts
+++ b/client/src/app/videos/+video-edit/video-update.component.ts
@@ -24,6 +24,7 @@ export class VideoUpdateComponent extends FormReactive implements OnInit {
 
   isUpdatingVideo = false
   videoPrivacies: VideoConstant<VideoPrivacy>[] = []
+  explainedVideoPrivacies: VideoConstant<VideoPrivacy>[] = []
   userVideoChannels: { id: number, label: string, support: string }[] = []
   schedulePublicationPossible = false
   videoCaptions: VideoCaptionEdit[] = []
@@ -65,7 +66,7 @@ export class VideoUpdateComponent extends FormReactive implements OnInit {
             this.schedulePublicationPossible = this.video.privacy === VideoPrivacy.PRIVATE
           }
 
-          this.videoPrivacies = this.videoService.explainedPrivacyLabels(this.videoPrivacies)
+          this.explainedVideoPrivacies = this.videoService.explainedPrivacyLabels(this.videoPrivacies)
 
           const videoFiles = (video as VideoDetails).files
           if (videoFiles.length > 1) { // Already transcoded
diff --git a/client/src/app/videos/+video-edit/video-update.resolver.ts b/client/src/app/videos/+video-edit/video-update.resolver.ts
index 269fe3684..384458127 100644
--- a/client/src/app/videos/+video-edit/video-update.resolver.ts
+++ b/client/src/app/videos/+video-edit/video-update.resolver.ts
@@ -4,6 +4,7 @@ import { ActivatedRouteSnapshot, Resolve } from '@angular/router'
 import { map, switchMap } from 'rxjs/operators'
 import { VideoChannelService } from '@app/shared/video-channel/video-channel.service'
 import { VideoCaptionService } from '@app/shared/video-caption'
+import { forkJoin } from 'rxjs'
 
 @Injectable()
 export class VideoUpdateResolver implements Resolve<any> {
@@ -11,35 +12,35 @@ export class VideoUpdateResolver implements Resolve<any> {
     private videoService: VideoService,
     private videoChannelService: VideoChannelService,
     private videoCaptionService: VideoCaptionService
-  ) {}
+  ) {
+  }
 
   resolve (route: ActivatedRouteSnapshot) {
     const uuid: string = route.params[ 'uuid' ]
 
     return this.videoService.getVideo(uuid)
-        .pipe(
-          switchMap(video => {
-            return this.videoService
-                       .loadCompleteDescription(video.descriptionPath)
-                       .pipe(map(description => Object.assign(video, { description })))
-          }),
-          switchMap(video => {
-            return this.videoChannelService
-                       .listAccountVideoChannels(video.account)
-                       .pipe(
-                         map(result => result.data),
-                         map(videoChannels => videoChannels.map(c => ({ id: c.id, label: c.displayName, support: c.support }))),
-                         map(videoChannels => ({ video, videoChannels }))
-                       )
-          }),
-          switchMap(({ video, videoChannels }) => {
-            return this.videoCaptionService
-                       .listCaptions(video.id)
-                       .pipe(
-                         map(result => result.data),
-                         map(videoCaptions => ({ video, videoChannels, videoCaptions }))
-                       )
-          })
-        )
+               .pipe(
+                 switchMap(video => {
+                   return forkJoin([
+                     this.videoService
+                         .loadCompleteDescription(video.descriptionPath)
+                         .pipe(map(description => Object.assign(video, { description }))),
+
+                     this.videoChannelService
+                         .listAccountVideoChannels(video.account)
+                         .pipe(
+                           map(result => result.data),
+                           map(videoChannels => videoChannels.map(c => ({ id: c.id, label: c.displayName, support: c.support })))
+                         ),
+
+                     this.videoCaptionService
+                         .listCaptions(video.id)
+                         .pipe(
+                           map(result => result.data)
+                         )
+                   ])
+                 }),
+                 map(([ video, videoChannels, videoCaptions ]) => ({ video, videoChannels, videoCaptions }))
+               )
   }
 }
diff --git a/client/src/app/videos/+video-watch/comment/video-comment.component.ts b/client/src/app/videos/+video-watch/comment/video-comment.component.ts
index aba7f9d1c..172eb0a39 100644
--- a/client/src/app/videos/+video-watch/comment/video-comment.component.ts
+++ b/client/src/app/videos/+video-watch/comment/video-comment.component.ts
@@ -85,8 +85,8 @@ export class VideoCommentComponent implements OnInit, OnChanges {
       )
   }
 
-  private init () {
-    this.sanitizedCommentHTML = this.htmlRenderer.toSafeHtml(this.comment.text)
+  private async init () {
+    this.sanitizedCommentHTML = await this.htmlRenderer.toSafeHtml(this.comment.text)
 
     this.newParentComments = this.parentComments.concat([ this.comment ])
   }
diff --git a/client/src/app/videos/+video-watch/comment/video-comment.model.ts b/client/src/app/videos/+video-watch/comment/video-comment.model.ts
index 824fb24c3..3ed3ddcc7 100644
--- a/client/src/app/videos/+video-watch/comment/video-comment.model.ts
+++ b/client/src/app/videos/+video-watch/comment/video-comment.model.ts
@@ -1,6 +1,7 @@
 import { Account as AccountInterface } from '../../../../../../shared/models/actors'
 import { VideoComment as VideoCommentServerModel } from '../../../../../../shared/models/videos/video-comment.model'
 import { Actor } from '@app/shared/actor/actor.model'
+import { getAbsoluteAPIUrl } from '@app/shared/misc/utils'
 
 export class VideoComment implements VideoCommentServerModel {
   id: number
@@ -16,6 +17,8 @@ export class VideoComment implements VideoCommentServerModel {
   by: string
   accountAvatarUrl: string
 
+  isLocal: boolean
+
   constructor (hash: VideoCommentServerModel) {
     this.id = hash.id
     this.url = hash.url
@@ -30,5 +33,9 @@ export class VideoComment implements VideoCommentServerModel {
 
     this.by = Actor.CREATE_BY_STRING(this.account.name, this.account.host)
     this.accountAvatarUrl = Actor.GET_ACTOR_AVATAR_URL(this.account)
+
+    const absoluteAPIUrl = getAbsoluteAPIUrl()
+    const thisHost = new URL(absoluteAPIUrl).host
+    this.isLocal = this.account.host.trim() === thisHost
   }
 }
diff --git a/client/src/app/videos/+video-watch/comment/video-comments.component.html b/client/src/app/videos/+video-watch/comment/video-comments.component.html
index 44016d8ad..7b941454a 100644
--- a/client/src/app/videos/+video-watch/comment/video-comments.component.html
+++ b/client/src/app/videos/+video-watch/comment/video-comments.component.html
@@ -54,7 +54,7 @@
           <ng-container i18n>View all {{ comment.totalReplies }} replies</ng-container>
 
           <span *ngIf="!threadLoading[comment.id]" class="glyphicon glyphicon-menu-down"></span>
-          <my-loader class="comment-thread-loading" [loading]="threadLoading[comment.id]"></my-loader>
+          <my-small-loader class="comment-thread-loading" [loading]="threadLoading[comment.id]"></my-small-loader>
         </div>
       </div>
     </div>
diff --git a/client/src/app/videos/+video-watch/comment/video-comments.component.ts b/client/src/app/videos/+video-watch/comment/video-comments.component.ts
index 2616820d2..3acddbe6a 100644
--- a/client/src/app/videos/+video-watch/comment/video-comments.component.ts
+++ b/client/src/app/videos/+video-watch/comment/video-comments.component.ts
@@ -121,10 +121,17 @@ export class VideoCommentsComponent implements OnInit, OnChanges, OnDestroy {
 
   async onWantedToDelete (commentToDelete: VideoComment) {
     let message = 'Do you really want to delete this comment?'
+
     if (commentToDelete.totalReplies !== 0) {
       message += this.i18n(' {{totalReplies}} replies will be deleted too.', { totalReplies: commentToDelete.totalReplies })
     }
 
+    if (commentToDelete.isLocal) {
+      message += this.i18n(' The deletion will be sent to remote instances so they remove the comment too.')
+    } else {
+      message += this.i18n(' It is a remote comment, so the deletion will only be effective on your instance.')
+    }
+
     const res = await this.confirmService.confirm(message, this.i18n('Delete'))
     if (res === false) return
 
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 9f3c37fe8..955b2b80c 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
@@ -6,11 +6,19 @@
 
   <div class="modal-body">
 
-    <div *ngIf="currentVideoTimestampString" class="start-at">
+    <div class="start-at">
       <my-peertube-checkbox
         inputName="startAt" [(ngModel)]="startAtCheckbox"
-        i18n-labelText [labelText]="getStartCheckboxLabel()"
+        i18n-labelText labelText="Start at"
       ></my-peertube-checkbox>
+
+      <my-timestamp-input
+        [timestamp]="currentVideoTimestamp"
+        [maxTimestamp]="video.duration"
+        [disabled]="!startAtCheckbox"
+        [(ngModel)]="currentVideoTimestamp"
+      >
+      </my-timestamp-input>
     </div>
 
     <div class="form-group">
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 4937506b9..472a45920 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
@@ -13,4 +13,9 @@
   display: flex;
   justify-content: center;
   margin-top: 10px;
+  align-items: center;
+
+  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 c6205e355..6565d7f88 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
@@ -16,10 +16,8 @@ export class VideoShareComponent {
 
   @Input() video: VideoDetails = null
 
+  currentVideoTimestamp: number
   startAtCheckbox = false
-  currentVideoTimestampString: string
-
-  private currentVideoTimestamp: number
 
   constructor (
     private modalService: NgbModal,
@@ -28,8 +26,7 @@ export class VideoShareComponent {
   ) { }
 
   show (currentVideoTimestamp?: number) {
-    this.currentVideoTimestamp = Math.floor(currentVideoTimestamp)
-    this.currentVideoTimestampString = durationToString(this.currentVideoTimestamp)
+    this.currentVideoTimestamp = currentVideoTimestamp ? Math.floor(currentVideoTimestamp) : 0
 
     this.modalService.open(this.modal)
   }
@@ -52,10 +49,6 @@ export class VideoShareComponent {
     this.notifier.success(this.i18n('Copied'))
   }
 
-  getStartCheckboxLabel () {
-    return this.i18n('Start at {{timestamp}}', { timestamp: this.currentVideoTimestampString })
-  }
-
   private getVideoTimestampIfEnabled () {
     if (this.startAtCheckbox === true) return this.currentVideoTimestamp
 
diff --git a/client/src/app/videos/+video-watch/modal/video-support.component.ts b/client/src/app/videos/+video-watch/modal/video-support.component.ts
index deb8fbc67..5e7afa012 100644
--- a/client/src/app/videos/+video-watch/modal/video-support.component.ts
+++ b/client/src/app/videos/+video-watch/modal/video-support.component.ts
@@ -21,7 +21,9 @@ export class VideoSupportComponent {
   ) { }
 
   show () {
-    this.videoHTMLSupport = this.markdownService.enhancedMarkdownToHTML(this.video.support)
     this.modalService.open(this.modal)
+
+    this.markdownService.enhancedMarkdownToHTML(this.video.support)
+      .then(r => this.videoHTMLSupport = r)
   }
 }
diff --git a/client/src/app/videos/+video-watch/video-watch-playlist.component.html b/client/src/app/videos/+video-watch/video-watch-playlist.component.html
new file mode 100644
index 000000000..c168a3130
--- /dev/null
+++ b/client/src/app/videos/+video-watch/video-watch-playlist.component.html
@@ -0,0 +1,25 @@
+<div *ngIf="playlist && video" class="playlist" myInfiniteScroller [autoInit]="true" [onItself]="true" (nearOfBottom)="onPlaylistVideosNearOfBottom()">
+  <div class="playlist-info">
+    <div class="playlist-display-name">
+      {{ playlist.displayName }}
+
+      <span *ngIf="isUnlistedPlaylist()" class="badge badge-warning" i18n>Unlisted</span>
+      <span *ngIf="isPrivatePlaylist()" class="badge badge-danger" i18n>Private</span>
+      <span *ngIf="isPublicPlaylist()" class="badge badge-info" i18n>Public</span>
+    </div>
+
+    <div class="playlist-by-index">
+      <div class="playlist-by">{{ playlist.ownerBy }}</div>
+      <div class="playlist-index">
+        <span>{{ currentPlaylistPosition }}</span><span>{{ playlistPagination.totalItems }}</span>
+      </div>
+    </div>
+  </div>
+
+  <div *ngFor="let playlistVideo of playlistVideos">
+    <my-video-playlist-element-miniature
+      [video]="playlistVideo" [playlist]="playlist" [owned]="isPlaylistOwned()" (elementRemoved)="onElementRemoved($event)"
+      [playing]="currentPlaylistPosition === playlistVideo.playlistElement.position" [accountLink]="false" [position]="playlistVideo.playlistElement.position"
+    ></my-video-playlist-element-miniature>
+  </div>
+</div>
diff --git a/client/src/app/videos/+video-watch/video-watch-playlist.component.scss b/client/src/app/videos/+video-watch/video-watch-playlist.component.scss
new file mode 100644
index 000000000..5da55c2f8
--- /dev/null
+++ b/client/src/app/videos/+video-watch/video-watch-playlist.component.scss
@@ -0,0 +1,59 @@
+@import '_variables';
+@import '_mixins';
+@import '_bootstrap-variables';
+@import '_miniature';
+
+.playlist {
+  min-width: 200px;
+  max-width: 470px;
+  height: 66vh;
+  background-color: var(--mainBackgroundColor);
+  overflow-y: auto;
+  border-bottom: 1px solid $separator-border-color;
+
+  .playlist-info {
+    padding: 5px 30px;
+    background-color: #e4e4e4;
+
+    .playlist-display-name {
+      font-size: 18px;
+      font-weight: $font-semibold;
+      margin-bottom: 5px;
+    }
+
+    .playlist-by-index {
+      color: $grey-foreground-color;
+      display: flex;
+
+      .playlist-by {
+        margin-right: 5px;
+      }
+
+      .playlist-index span:first-child::after {
+        content: '/';
+        margin: 0 3px;
+      }
+    }
+  }
+
+  my-video-playlist-element-miniature {
+    /deep/ {
+      .video {
+        .position {
+          margin-right: 0;
+        }
+
+        .video-info {
+          .video-info-name {
+            font-size: 15px;
+          }
+        }
+      }
+
+      my-video-thumbnail {
+        @include thumbnail-size-component(90px, 50px);
+      }
+    }
+  }
+}
+
diff --git a/client/src/app/videos/+video-watch/video-watch-playlist.component.ts b/client/src/app/videos/+video-watch/video-watch-playlist.component.ts
new file mode 100644
index 000000000..bccdaf7b2
--- /dev/null
+++ b/client/src/app/videos/+video-watch/video-watch-playlist.component.ts
@@ -0,0 +1,113 @@
+import { Component, Input } from '@angular/core'
+import { VideoPlaylist } from '@app/shared/video-playlist/video-playlist.model'
+import { ComponentPagination } from '@app/shared/rest/component-pagination.model'
+import { Video } from '@app/shared/video/video.model'
+import { VideoDetails, VideoPlaylistPrivacy } from '@shared/models'
+import { VideoService } from '@app/shared/video/video.service'
+import { Router } from '@angular/router'
+import { AuthService } from '@app/core'
+
+@Component({
+  selector: 'my-video-watch-playlist',
+  templateUrl: './video-watch-playlist.component.html',
+  styleUrls: [ './video-watch-playlist.component.scss' ]
+})
+export class VideoWatchPlaylistComponent {
+  @Input() video: VideoDetails
+  @Input() playlist: VideoPlaylist
+
+  playlistVideos: Video[] = []
+  playlistPagination: ComponentPagination = {
+    currentPage: 1,
+    itemsPerPage: 30,
+    totalItems: null
+  }
+
+  noPlaylistVideos = false
+  currentPlaylistPosition = 1
+
+  constructor (
+    private auth: AuthService,
+    private videoService: VideoService,
+    private router: Router
+  ) {}
+
+  onPlaylistVideosNearOfBottom () {
+    // Last page
+    if (this.playlistPagination.totalItems <= (this.playlistPagination.currentPage * this.playlistPagination.itemsPerPage)) return
+
+    this.playlistPagination.currentPage += 1
+    this.loadPlaylistElements(this.playlist,false)
+  }
+
+  onElementRemoved (video: Video) {
+    this.playlistVideos = this.playlistVideos.filter(v => v.id !== video.id)
+
+    this.playlistPagination.totalItems--
+  }
+
+  isPlaylistOwned () {
+    return this.playlist.isLocal === true &&
+      this.auth.isLoggedIn() &&
+      this.playlist.ownerAccount.name === this.auth.getUser().username
+  }
+
+  isUnlistedPlaylist () {
+    return this.playlist.privacy.id === VideoPlaylistPrivacy.UNLISTED
+  }
+
+  isPrivatePlaylist () {
+    return this.playlist.privacy.id === VideoPlaylistPrivacy.PRIVATE
+  }
+
+  isPublicPlaylist () {
+    return this.playlist.privacy.id === VideoPlaylistPrivacy.PUBLIC
+  }
+
+  loadPlaylistElements (playlist: VideoPlaylist, redirectToFirst = false) {
+    this.videoService.getPlaylistVideos(playlist.uuid, this.playlistPagination)
+        .subscribe(({ totalVideos, videos }) => {
+          this.playlistVideos = this.playlistVideos.concat(videos)
+          this.playlistPagination.totalItems = totalVideos
+
+          if (totalVideos === 0) {
+            this.noPlaylistVideos = true
+            return
+          }
+
+          this.updatePlaylistIndex(this.video)
+
+          if (redirectToFirst) {
+            const extras = {
+              queryParams: { videoId: this.playlistVideos[ 0 ].uuid },
+              replaceUrl: true
+            }
+            this.router.navigate([], extras)
+          }
+        })
+  }
+
+  updatePlaylistIndex (video: VideoDetails) {
+    if (this.playlistVideos.length === 0 || !video) return
+
+    for (const playlistVideo of this.playlistVideos) {
+      if (playlistVideo.id === video.id) {
+        this.currentPlaylistPosition = playlistVideo.playlistElement.position
+        return
+      }
+    }
+
+    // Load more videos to find our video
+    this.onPlaylistVideosNearOfBottom()
+  }
+
+  navigateToNextPlaylistVideo () {
+    if (this.currentPlaylistPosition < this.playlistPagination.totalItems) {
+      const next = this.playlistVideos.find(v => v.playlistElement.position === this.currentPlaylistPosition + 1)
+
+      const start = next.playlistElement.startTimestamp
+      const stop = next.playlistElement.stopTimestamp
+      this.router.navigate([],{ queryParams: { videoId: next.uuid, start, stop } })
+    }
+  }
+}
diff --git a/client/src/app/videos/+video-watch/video-watch-routing.module.ts b/client/src/app/videos/+video-watch/video-watch-routing.module.ts
index bdd4f945e..ce9250bdc 100644
--- a/client/src/app/videos/+video-watch/video-watch-routing.module.ts
+++ b/client/src/app/videos/+video-watch/video-watch-routing.module.ts
@@ -7,7 +7,16 @@ import { VideoWatchComponent } from './video-watch.component'
 
 const videoWatchRoutes: Routes = [
   {
-    path: '',
+    path: 'playlist/:playlistId',
+    component: VideoWatchComponent,
+    canActivate: [ MetaGuard ]
+  },
+  {
+    path: ':videoId/comments/:commentId',
+    redirectTo: ':videoId'
+  },
+  {
+    path: ':videoId',
     component: VideoWatchComponent,
     canActivate: [ MetaGuard ]
   }
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 709eb91a8..2e39b9c6b 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.html
+++ b/client/src/app/videos/+video-watch/video-watch.component.html
@@ -1,37 +1,53 @@
-<div class="root-row row">
+<div class="root" [ngClass]="{ 'theater-enabled': theaterEnabled }">
   <!-- We need the video container for videojs so we just hide it -->
-  <div id="video-element-wrapper">
+  <div id="video-wrapper">
     <div *ngIf="remoteServerDown" class="remote-server-down">
       Sorry, but this video is not available because the remote instance is not responding.
       <br />
       Please try again later.
     </div>
-  </div>
 
-  <div i18n class="alert alert-warning" *ngIf="isVideoToImport()">
-    The video is being imported, it will be available when the import is finished.
-  </div>
+    <div id="videojs-wrapper"></div>
 
-  <div i18n class="alert alert-warning" *ngIf="isVideoToTranscode()">
-    The video is being transcoded, it may not work properly.
+    <my-video-watch-playlist
+      #videoWatchPlaylist
+      [video]="video" [playlist]="playlist" class="playlist"
+    ></my-video-watch-playlist>
   </div>
 
-  <div i18n class="alert alert-info" *ngIf="hasVideoScheduledPublication()">
-    This video will be published on {{ video.scheduledUpdate.updateAt | date: 'full' }}.
-  </div>
+  <div class="row">
+    <div i18n class="col-md-12 alert alert-warning" *ngIf="isVideoToImport()">
+      The video is being imported, it will be available when the import is finished.
+    </div>
+
+    <div i18n class="col-md-12 alert alert-warning" *ngIf="isVideoToTranscode()">
+      The video is being transcoded, it may not work properly.
+    </div>
+
+    <div i18n class="col-md-12 alert alert-info" *ngIf="hasVideoScheduledPublication()">
+      This video will be published on {{ video.scheduledUpdate.updateAt | date: 'full' }}.
+    </div>
 
-  <div class="alert alert-danger" *ngIf="video?.blacklisted">
-    <div class="blacklisted-label" i18n>This video is blacklisted.</div>
-    {{ video.blacklistedReason }}
+    <div class="col-md-12 alert alert-danger" *ngIf="video?.blacklisted">
+      <div class="blacklisted-label" i18n>This video is blacklisted.</div>
+      {{ video.blacklistedReason }}
+    </div>
   </div>
 
   <!-- Video information -->
   <div *ngIf="video" class="margin-content video-bottom">
-    <div class="row fullWidth">
-      <div class="col-12 col-lg-auto video-info">
-        <div class="video-info-first-row">
-          <div>
-            <div class="d-block d-sm-none"> <!-- only shown on small devices, has its conterpart for larger viewports below -->
+    <div class="video-info">
+      <div class="video-info-first-row">
+        <div>
+          <div class="d-block d-md-none"> <!-- only shown on medium devices, has its conterpart for larger viewports below -->
+            <h1 class="video-info-name">{{ video.name }}</h1>
+            <div i18n class="video-info-date-views">
+              Published {{ video.publishedAt | myFromNow }} - {{ video.views | myNumberFormatter }} views
+            </div>
+          </div>
+
+          <div class="d-flex justify-content-between align-items-md-end">
+            <div class="d-none d-md-block">
               <h1 class="video-info-name">{{ video.name }}</h1>
 
               <div i18n class="video-info-date-views">
@@ -39,173 +55,154 @@
               </div>
             </div>
 
-            <div class="d-flex justify-content-between align-items-sm-end">
-              <div class="d-none d-sm-block">
-                <h1 class="video-info-name">{{ video.name }}</h1>
+            <div class="video-actions-rates">
+              <div class="video-actions fullWidth justify-content-end">
+                <div
+                  *ngIf="isUserLoggedIn()" [ngClass]="{ 'activated': userRating === 'like' }" (click)="setLike()"
+                  class="action-button action-button-like" role="button" [attr.aria-pressed]="userRating === 'like'"
+                  i18n-title title="Like this video"
+                >
+                  <my-global-icon iconName="like"></my-global-icon>
+                </div>
 
-                <div i18n class="video-info-date-views">
-                  Published {{ video.publishedAt | myFromNow }} - {{ video.views | myNumberFormatter }} views
+                <div
+                  *ngIf="isUserLoggedIn()" [ngClass]="{ 'activated': userRating === 'dislike' }" (click)="setDislike()"
+                  class="action-button action-button-dislike" role="button" [attr.aria-pressed]="userRating === 'dislike'"
+                  i18n-title title="Dislike this video"
+                >
+                  <my-global-icon iconName="dislike"></my-global-icon>
                 </div>
-              </div>
 
-              <div class="video-actions-rates">
-                <div class="video-actions fullWidth justify-content-end">
-                  <div
-                    *ngIf="isUserLoggedIn()" [ngClass]="{ 'activated': userRating === 'like' }" (click)="setLike()"
-                    class="action-button action-button-like" role="button" [attr.aria-pressed]="userRating === 'like'"
-                    i18n-title title="Like this video"
-                  >
-                    <my-global-icon iconName="like"></my-global-icon>
-                  </div>
+                <div *ngIf="video.support" (click)="showSupportModal()" class="action-button">
+                  <my-global-icon iconName="heart"></my-global-icon>
+                  <span class="icon-text" i18n>Support</span>
+                </div>
 
-                  <div
-                    *ngIf="isUserLoggedIn()" [ngClass]="{ 'activated': userRating === 'dislike' }" (click)="setDislike()"
-                    class="action-button action-button-dislike" role="button" [attr.aria-pressed]="userRating === 'dislike'"
-                    i18n-title title="Dislike this video"
-                  >
-                    <my-global-icon iconName="dislike"></my-global-icon>
-                  </div>
+                <div (click)="showShareModal()" class="action-button" role="button">
+                  <my-global-icon iconName="share"></my-global-icon>
+                  <span class="icon-text" i18n>Share</span>
+                </div>
 
-                  <div *ngIf="video.support" (click)="showSupportModal()" class="action-button action-button-support">
-                    <my-global-icon iconName="heart"></my-global-icon>
-                    <span class="icon-text" i18n>Support</span>
+                <div
+                  class="action-dropdown" ngbDropdown placement="top" role="button" autoClose="outside"
+                   *ngIf="isUserLoggedIn()" (openChange)="addContent.openChange($event)"
+                >
+                  <div class="action-button action-button-save" ngbDropdownToggle role="button">
+                    <my-global-icon iconName="playlist-add"></my-global-icon>
+                    <span class="icon-text" i18n>Save</span>
                   </div>
 
-                  <div (click)="showShareModal()" class="action-button action-button-share" role="button">
-                    <my-global-icon iconName="share"></my-global-icon>
-                    <span class="icon-text" i18n>Share</span>
-                  </div>
-
-                  <div class="action-more" ngbDropdown placement="top" role="button">
-                    <div class="action-button" ngbDropdownToggle role="button">
-                      <my-global-icon class="more-icon" iconName="more"></my-global-icon>
-                    </div>
-
-                    <div ngbDropdownMenu>
-                      <a class="dropdown-item" i18n-title title="Download the video" href="#" (click)="showDownloadModal($event)">
-                        <my-global-icon iconName="download"></my-global-icon> <ng-container i18n>Download</ng-container>
-                      </a>
-
-                      <a *ngIf="isUserLoggedIn()" class="dropdown-item" i18n-title title="Report this video" href="#" (click)="showReportModal($event)">
-                        <my-global-icon iconName="alert"></my-global-icon> <ng-container i18n>Report</ng-container>
-                      </a>
-
-                      <a *ngIf="isVideoUpdatable()" class="dropdown-item" i18n-title title="Update this video" href="#" [routerLink]="[ '/videos/update', video.uuid ]">
-                        <my-global-icon iconName="edit"></my-global-icon> <ng-container i18n>Update</ng-container>
-                      </a>
-
-                      <a *ngIf="isVideoBlacklistable()" class="dropdown-item" i18n-title title="Blacklist this video" href="#" (click)="showBlacklistModal($event)">
-                        <my-global-icon iconName="no"></my-global-icon> <ng-container i18n>Blacklist</ng-container>
-                      </a>
-
-                      <a *ngIf="isVideoUnblacklistable()" class="dropdown-item" i18n-title title="Unblacklist this video" href="#" (click)="unblacklistVideo($event)">
-                        <my-global-icon iconName="undo"></my-global-icon> <ng-container i18n>Unblacklist</ng-container>
-                      </a>
-
-                      <a *ngIf="isVideoRemovable()" class="dropdown-item" i18n-title title="Delete this video" href="#" (click)="removeVideo($event)">
-                        <my-global-icon iconName="delete"></my-global-icon> <ng-container i18n>Delete</ng-container>
-                      </a>
-                    </div>
+                  <div ngbDropdownMenu>
+                    <my-video-add-to-playlist #addContent [video]="video"></my-video-add-to-playlist>
                   </div>
                 </div>
 
-                <div
-                  class="video-info-likes-dislikes-bar"
-                  *ngIf="video.likes !== 0 || video.dislikes !== 0"
-                  [ngbTooltip]="likesBarTooltipText"
-                  placement="bottom"
-                >
-                  <div class="likes-bar" [ngStyle]="{ 'width.%': video.likesPercent }"></div>
-                </div>
+                <my-video-actions-dropdown
+                  placement="top" buttonDirection="horizontal" [buttonStyled]="true" [video]="video" (videoRemoved)="onVideoRemoved()"
+                ></my-video-actions-dropdown>
               </div>
-            </div>
 
+              <div
+                class="video-info-likes-dislikes-bar"
+                *ngIf="video.likes !== 0 || video.dislikes !== 0"
+                [ngbTooltip]="likesBarTooltipText"
+                placement="bottom"
+              >
+                <div class="likes-bar" [ngStyle]="{ 'width.%': video.likesPercent }"></div>
+              </div>
+            </div>
+          </div>
 
-            <div class="pt-3 border-top video-info-channel">
-              <a [routerLink]="[ '/video-channels', video.byVideoChannel ]" i18n-title title="Go the channel page">
-                {{ video.channel.displayName }}
 
-                <img [src]="video.videoChannelAvatarUrl" alt="Video channel avatar" />
-              </a>
+          <div class="pt-3 border-top video-info-channel">
+            <a [routerLink]="[ '/video-channels', video.byVideoChannel ]" i18n-title title="Go the channel page">
+              {{ video.channel.displayName }}
 
-              <my-subscribe-button #subscribeButton [videoChannel]="video.channel" size="small"></my-subscribe-button>
-            </div>
+              <img [src]="video.videoChannelAvatarUrl" alt="Video channel avatar" />
+            </a>
 
-            <div class="video-info-by">
-              <a [routerLink]="[ '/accounts', video.byAccount ]" i18n-title title="Go to the account page">
-                <span i18n>By {{ video.byAccount }}</span>
-                <img [src]="video.accountAvatarUrl" alt="Account avatar" />
-              </a>
-            </div>
+            <my-subscribe-button #subscribeButton [videoChannel]="video.channel" size="small"></my-subscribe-button>
           </div>
 
+          <div class="video-info-by">
+            <a [routerLink]="[ '/accounts', video.byAccount ]" i18n-title title="Go to the account page">
+              <span i18n>By {{ video.byAccount }}</span>
+              <img [src]="video.accountAvatarUrl" alt="Account avatar" />
+            </a>
+          </div>
         </div>
 
-        <div class="video-info-description">
-          <div class="video-info-description-html" [innerHTML]="videoHTMLDescription"></div>
+      </div>
 
-          <div class="video-info-description-more" *ngIf="completeDescriptionShown === false && video.description?.length >= 250" (click)="showMoreDescription()">
-            <ng-container i18n>Show more</ng-container>
-            <span *ngIf="descriptionLoading === false" class="glyphicon glyphicon-menu-down"></span>
-            <my-loader class="description-loading" [loading]="descriptionLoading"></my-loader>
-          </div>
+      <div class="video-info-description">
+        <div class="video-info-description-html" [innerHTML]="videoHTMLDescription"></div>
 
-          <div *ngIf="completeDescriptionShown === true" (click)="showLessDescription()" class="video-info-description-more">
-            <ng-container i18n>Show less</ng-container>
-            <span *ngIf="descriptionLoading === false" class="glyphicon glyphicon-menu-up"></span>
-          </div>
+        <div class="video-info-description-more" *ngIf="completeDescriptionShown === false && video.description?.length >= 250" (click)="showMoreDescription()">
+          <ng-container i18n>Show more</ng-container>
+          <span *ngIf="descriptionLoading === false" class="glyphicon glyphicon-menu-down"></span>
+          <my-small-loader class="description-loading" [loading]="descriptionLoading"></my-small-loader>
         </div>
 
-        <div class="video-attributes">
-          <div class="video-attribute">
-            <span i18n class="video-attribute-label">Privacy</span>
-            <span class="video-attribute-value">{{ video.privacy.label }}</span>
-          </div>
+        <div *ngIf="completeDescriptionShown === true" (click)="showLessDescription()" class="video-info-description-more">
+          <ng-container i18n>Show less</ng-container>
+          <span *ngIf="descriptionLoading === false" class="glyphicon glyphicon-menu-up"></span>
+        </div>
+      </div>
 
-          <div class="video-attribute">
-            <span i18n class="video-attribute-label">Category</span>
-            <span *ngIf="!video.category.id" class="video-attribute-value">{{ video.category.label }}</span>
-            <a
-              *ngIf="video.category.id" class="video-attribute-value"
-              [routerLink]="[ '/search' ]" [queryParams]="{ categoryOneOf: [ video.category.id ] }"
-            >{{ video.category.label }}</a>
-          </div>
+      <div class="video-attributes">
+        <div class="video-attribute">
+          <span i18n class="video-attribute-label">Privacy</span>
+          <span class="video-attribute-value">{{ video.privacy.label }}</span>
+        </div>
 
-          <div class="video-attribute">
-            <span i18n class="video-attribute-label">Licence</span>
-            <span *ngIf="!video.licence.id" class="video-attribute-value">{{ video.licence.label }}</span>
-            <a
-              *ngIf="video.licence.id" class="video-attribute-value"
-              [routerLink]="[ '/search' ]" [queryParams]="{ licenceOneOf: [ video.licence.id ] }"
-            >{{ video.licence.label }}</a>
-          </div>
+        <div *ngIf="!!video.originallyPublishedAt" class="video-attribute">
+          <span i18n class="video-attribute-label">Originally published</span>
+          <span class="video-attribute-value">{{ video.originallyPublishedAt | date: 'dd MMMM yyyy' }}</span>
+        </div>
 
-          <div class="video-attribute">
-            <span i18n class="video-attribute-label">Language</span>
-            <span *ngIf="!video.language.id" class="video-attribute-value">{{ video.language.label }}</span>
-            <a
-              *ngIf="video.language.id" class="video-attribute-value"
-              [routerLink]="[ '/search' ]" [queryParams]="{ languageOneOf: [ video.language.id ] }"
-            >{{ video.language.label }}</a>
-          </div>
+        <div class="video-attribute">
+          <span i18n class="video-attribute-label">Category</span>
+          <span *ngIf="!video.category.id" class="video-attribute-value">{{ video.category.label }}</span>
+          <a
+            *ngIf="video.category.id" class="video-attribute-value"
+            [routerLink]="[ '/search' ]" [queryParams]="{ categoryOneOf: [ video.category.id ] }"
+          >{{ video.category.label }}</a>
+        </div>
 
-          <div class="video-attribute video-attribute-tags">
-            <span i18n class="video-attribute-label">Tags</span>
-            <a
-              *ngFor="let tag of getVideoTags()"
-              class="video-attribute-value" [routerLink]="[ '/search' ]" [queryParams]="{ tagsOneOf: [ tag ] }"
-            >{{ tag }}</a>
-          </div>
+        <div class="video-attribute">
+          <span i18n class="video-attribute-label">Licence</span>
+          <span *ngIf="!video.licence.id" class="video-attribute-value">{{ video.licence.label }}</span>
+          <a
+            *ngIf="video.licence.id" class="video-attribute-value"
+            [routerLink]="[ '/search' ]" [queryParams]="{ licenceOneOf: [ video.licence.id ] }"
+          >{{ video.licence.label }}</a>
         </div>
 
-        <my-video-comments [video]="video" [user]="user"></my-video-comments>
+        <div class="video-attribute">
+          <span i18n class="video-attribute-label">Language</span>
+          <span *ngIf="!video.language.id" class="video-attribute-value">{{ video.language.label }}</span>
+          <a
+            *ngIf="video.language.id" class="video-attribute-value"
+            [routerLink]="[ '/search' ]" [queryParams]="{ languageOneOf: [ video.language.id ] }"
+          >{{ video.language.label }}</a>
+        </div>
+
+        <div class="video-attribute video-attribute-tags">
+          <span i18n class="video-attribute-label">Tags</span>
+          <a
+            *ngFor="let tag of getVideoTags()"
+            class="video-attribute-value" [routerLink]="[ '/search' ]" [queryParams]="{ tagsOneOf: [ tag ] }"
+          >{{ tag }}</a>
+        </div>
       </div>
 
-      <my-recommended-videos [inputRecommendation]="{ uuid: video.uuid, tags: video.tags }" [user]="user"></my-recommended-videos>
+      <my-video-comments [video]="video" [user]="user"></my-video-comments>
     </div>
+
+    <my-recommended-videos [inputRecommendation]="{ uuid: video.uuid, tags: video.tags }" [user]="user"></my-recommended-videos>
   </div>
 
-  <div class="privacy-concerns" *ngIf="hasAlreadyAcceptedPrivacyConcern === false">
+  <div class="row privacy-concerns" *ngIf="hasAlreadyAcceptedPrivacyConcern === false">
     <div class="privacy-concerns-text">
       <strong i18n>Friendly Reminder: </strong>
       <ng-container i18n>
@@ -218,11 +215,9 @@
       OK
     </div>
   </div>
+</div>
 
 <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-download #videoDownloadModal [video]="video"></my-video-download>
-  <my-video-report #videoReportModal [video]="video"></my-video-report>
-  <my-video-blacklist #videoBlacklistModal [video]="video"></my-video-blacklist>
 </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 b03ed197d..8ca5c4118 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.scss
+++ b/client/src/app/videos/+video-watch/video-watch.component.scss
@@ -1,22 +1,63 @@
 @import '_variables';
 @import '_mixins';
 @import '_bootstrap-variables';
+@import '_miniature';
 
 $other-videos-width: 260px;
+$player-factor: 1.7; // 16/9
 
-.root-row {
-  flex-direction: column;
+@function getPlayerHeight($width){
+  @return calc(#{$width} / #{$player-factor})
+}
+
+@function getPlayerWidth($height){
+  @return calc(#{$height} * #{$player-factor})
+}
+
+@mixin playlist-below-player {
+  width: 100% !important;
+  height: auto !important;
+  max-height: 300px !important;
+  border-bottom: 1px solid $separator-border-color !important;
+}
+
+.root {
+  &.theater-enabled #video-wrapper {
+    flex-direction: column;
+    justify-content: center;
+
+    #videojs-wrapper {
+      width: 100%;
+    }
+
+    /deep/ .video-js {
+      $height: calc(100vh - #{$header-height} - #{$theater-bottom-space});
+
+      height: $height;
+      width: 100%;
+    }
+
+    my-video-watch-playlist /deep/ .playlist {
+      @include playlist-below-player;
+    }
+  }
 }
 
 .blacklisted-label {
   font-weight: $font-semibold;
 }
 
-#video-element-wrapper {
+#video-wrapper {
   background-color: #000;
   display: flex;
   justify-content: center;
-  flex-grow: 1;
+  margin: 0 -15px;
+
+  #videojs-wrapper {
+    display: flex;
+    justify-content: center;
+    flex-grow: 1;
+  }
 
   .remote-server-down {
     color: #fff;
@@ -40,13 +81,8 @@ $other-videos-width: 260px;
   }
 
   /deep/ .video-js {
-    width: 888px;
-    height: 500px;
-
-    &.vjs-theater-enabled {
-      height: calc(100vh - #{$header-height} - #{$theater-bottom-space});
-      width: 100%;
-    }
+    width: getPlayerWidth(66vh);
+    height: 66vh;
 
     // VideoJS create an inner video player
     video {
@@ -59,13 +95,14 @@ $other-videos-width: 260px;
     .remote-server-down,
     /deep/ .video-js {
       width: 100vw;
-      height: calc(100vw / 1.7); // 16/9
+      height: getPlayerHeight(100vw)
     }
   }
 }
 
 .alert {
   text-align: center;
+  border-radius: 0;
 }
 
 #video-not-found {
@@ -78,6 +115,7 @@ $other-videos-width: 260px;
 }
 
 .video-bottom {
+  display: flex;
   margin-top: 40px;
 
   .video-info {
@@ -176,7 +214,9 @@ $other-videos-width: 260px;
           display: flex;
           align-items: center;
 
-          .action-button:not(:first-child), .action-more {
+          .action-button:not(:first-child),
+          .action-dropdown,
+          my-video-actions-dropdown {
             margin-left: 10px;
           }
 
@@ -212,25 +252,16 @@ $other-videos-width: 260px;
               }
             }
 
-            .icon-text {
-              margin-left: 3px;
-            }
-          }
-
-          .action-more {
-            display: inline-block;
-
-            .dropdown-menu .dropdown-item {
-              padding: 6px 24px;
-
+            &.action-button-save {
               my-global-icon {
-                width: 24px;
-
-                margin-right: 10px;
-                position: relative;
-                top: -2px;
+                top: 0 !important;
+                right: -1px;
               }
             }
+
+            .icon-text {
+              margin-left: 3px;
+            }
           }
         }
 
@@ -286,7 +317,7 @@ $other-videos-width: 260px;
       margin-bottom: 12px;
 
       .video-attribute-label {
-        min-width: 91px;
+        min-width: 142px;
         padding-right: 5px;
         display: inline-block;
         color: $grey-foreground-color;
@@ -314,7 +345,7 @@ $other-videos-width: 260px;
 
   /deep/ .other-videos {
     padding-left: 15px;
-    width: $other-videos-width;
+    flex-basis: $other-videos-width;
 
     .title-page {
       margin-top: 0 !important;
@@ -322,14 +353,11 @@ $other-videos-width: 260px;
 
     .video-miniature {
       display: flex;
+      width: $other-videos-width;
       height: 100%;
       margin-bottom: 20px;
       flex-wrap: wrap;
 
-      .video-miniature-information {
-        flex-grow: 1;
-      }
-
       .video-thumbnail {
         margin-right: 10px
       }
@@ -350,14 +378,14 @@ my-video-comments {
 
 @media screen and (max-width: $small-view) {
   .privacy-concerns {
-    margin-left: $menu-width;
+    margin-left: $menu-width - 15px; // Menu is absolute
   }
 }
 
 :host-context(.expanded) {
   .privacy-concerns {
     width: 100%;
-    margin-left: 0;
+    margin-left: -15px;
   }
 }
 
@@ -368,6 +396,7 @@ my-video-comments {
   padding: 5px 15px;
 
   display: flex;
+  flex-wrap: nowrap;
   align-items: center;
   justify-content: flex-start;
   background-color: rgba(0, 0, 0, 0.9);
@@ -403,12 +432,6 @@ my-video-comments {
   }
 }
 
-@media screen and (min-width: map-get($grid-breakpoints, xl)) {
-  .video-bottom .video-info {
-    max-width: calc(100% - #{$other-videos-width});
-  }
-}
-
 @media screen and (max-width: 1600px) {
   .video-bottom .video-info .video-attributes .video-attribute {
     margin-bottom: 5px;
@@ -426,9 +449,33 @@ my-video-comments {
   }
 }
 
+@media screen and (max-width: 1100px) {
+  #video-wrapper {
+    flex-direction: column;
+    justify-content: center;
+
+    my-video-watch-playlist /deep/ .playlist {
+      @include playlist-below-player;
+    }
+  }
+
+  .video-bottom {
+    flex-direction: column;
+
+    /deep/ .other-videos {
+      padding-left: 0 !important;
+
+      /deep/ .video-miniature  {
+        flex-direction: row;
+        width: auto;
+      }
+    }
+  }
+}
+
 @media screen and (max-width: 600px) {
   .video-bottom {
-    margin: 20px 0 0 0;
+    margin: 20px 0 0 0 !important;
 
     .video-info {
       padding: 0;
@@ -443,12 +490,8 @@ my-video-comments {
     }
   }
 
-  /deep/ .other-videos {
-    padding-left: 0 !important;
-
-    /deep/ .video-miniature  {
-      flex-direction: column;
-    }
+  /deep/ .other-videos .video-miniature  {
+    flex-direction: column;
   }
 
   .privacy-concerns {
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 ee504bc58..b147b75b0 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.ts
+++ b/client/src/app/videos/+video-watch/video-watch.component.ts
@@ -7,29 +7,29 @@ import { VideoSupportComponent } from '@app/videos/+video-watch/modal/video-supp
 import { MetaService } from '@ngx-meta/core'
 import { Notifier, ServerService } from '@app/core'
 import { forkJoin, Subscription } from 'rxjs'
-// FIXME: something weird with our path definition in tsconfig and typings
-// @ts-ignore
-import videojs from 'video.js'
-import 'videojs-hotkeys'
 import { Hotkey, HotkeysService } from 'angular2-hotkeys'
-import * as WebTorrent from 'webtorrent'
 import { UserVideoRateType, VideoCaption, VideoPrivacy, VideoState } from '../../../../../shared'
-import '../../../assets/player/peertube-videojs-plugin'
 import { AuthService, ConfirmService } from '../../core'
 import { RestExtractor, VideoBlacklistService } from '../../shared'
 import { VideoDetails } from '../../shared/video/video-details.model'
 import { VideoService } from '../../shared/video/video.service'
-import { VideoDownloadComponent } from './modal/video-download.component'
-import { VideoReportComponent } from './modal/video-report.component'
 import { VideoShareComponent } from './modal/video-share.component'
-import { VideoBlacklistComponent } from './modal/video-blacklist.component'
 import { SubscribeButtonComponent } from '@app/shared/user-subscription/subscribe-button.component'
-import { addContextMenu, getVideojsOptions, loadLocaleInVideoJS } from '../../../assets/player/peertube-player'
 import { I18n } from '@ngx-translate/i18n-polyfill'
 import { environment } from '../../../environments/environment'
-import { getDevLocale, isOnDevLocale } from '@app/shared/i18n/i18n-utils'
 import { VideoCaptionService } from '@app/shared/video-caption'
 import { MarkdownService } from '@app/shared/renderer'
+import {
+  P2PMediaLoaderOptions,
+  PeertubePlayerManager,
+  PeertubePlayerManagerOptions,
+  PlayerMode
+} from '../../../assets/player/peertube-player-manager'
+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 { VideoWatchPlaylistComponent } from '@app/videos/+video-watch/video-watch-playlist.component'
 
 @Component({
   selector: 'my-video-watch',
@@ -39,19 +39,20 @@ import { MarkdownService } from '@app/shared/renderer'
 export class VideoWatchComponent implements OnInit, OnDestroy {
   private static LOCAL_STORAGE_PRIVACY_CONCERN_KEY = 'video-watch-privacy-concern'
 
-  @ViewChild('videoDownloadModal') videoDownloadModal: VideoDownloadComponent
+  @ViewChild('videoWatchPlaylist') videoWatchPlaylist: VideoWatchPlaylistComponent
   @ViewChild('videoShareModal') videoShareModal: VideoShareComponent
-  @ViewChild('videoReportModal') videoReportModal: VideoReportComponent
   @ViewChild('videoSupportModal') videoSupportModal: VideoSupportComponent
-  @ViewChild('videoBlacklistModal') videoBlacklistModal: VideoBlacklistComponent
   @ViewChild('subscribeButton') subscribeButton: SubscribeButtonComponent
 
-  player: videojs.Player
+  player: any
   playerElement: HTMLVideoElement
+  theaterEnabled = false
   userRating: UserVideoRateType = null
   video: VideoDetails = null
   descriptionLoading = false
 
+  playlist: VideoPlaylist = null
+
   completeDescriptionShown = false
   completeVideoDescription: string
   shortVideoDescription: string
@@ -61,8 +62,10 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
   remoteServerDown = false
   hotkeys: Hotkey[]
 
-  private videojsLocaleLoaded = false
+  private currentTime: number
   private paramsSub: Subscription
+  private queryParamsSub: Subscription
+  private configSub: Subscription
 
   constructor (
     private elementRef: ElementRef,
@@ -70,6 +73,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
     private route: ActivatedRoute,
     private router: Router,
     private videoService: VideoService,
+    private playlistService: VideoPlaylistService,
     private videoBlacklistService: VideoBlacklistService,
     private confirmService: ConfirmService,
     private metaService: MetaService,
@@ -91,37 +95,28 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
   }
 
   ngOnInit () {
-    if (
-      WebTorrent.WEBRTC_SUPPORT === false ||
-      peertubeLocalStorage.getItem(VideoWatchComponent.LOCAL_STORAGE_PRIVACY_CONCERN_KEY) === 'true'
-    ) {
-      this.hasAlreadyAcceptedPrivacyConcern = true
-    }
+    this.configSub = this.serverService.configLoaded
+        .subscribe(() => {
+          if (
+            isWebRTCDisabled() ||
+            this.serverService.getConfig().tracker.enabled === false ||
+            peertubeLocalStorage.getItem(VideoWatchComponent.LOCAL_STORAGE_PRIVACY_CONCERN_KEY) === 'true'
+          ) {
+            this.hasAlreadyAcceptedPrivacyConcern = true
+          }
+        })
 
     this.paramsSub = this.route.params.subscribe(routeParams => {
-      const uuid = routeParams[ 'uuid' ]
-
-      // Video did not change
-      if (this.video && this.video.uuid === uuid) return
-
-      if (this.player) this.player.pause()
+      const videoId = routeParams[ 'videoId' ]
+      if (videoId) this.loadVideo(videoId)
 
-      // Video did change
-      forkJoin(
-        this.videoService.getVideo(uuid),
-        this.videoCaptionService.listCaptions(uuid)
-      )
-        .pipe(
-          // If 401, the video is private or blacklisted so redirect to 404
-          catchError(err => this.restExtractor.redirectTo404IfNotFound(err, [ 400, 401, 403, 404 ]))
-        )
-        .subscribe(([ video, captionsResult ]) => {
-          const startTime = this.route.snapshot.queryParams.start
-          const subtitle = this.route.snapshot.queryParams.subtitle
+      const playlistId = routeParams[ 'playlistId' ]
+      if (playlistId) this.loadPlaylist(playlistId)
+    })
 
-          this.onVideoFetched(video, captionsResult.data, { startTime, subtitle })
-              .catch(err => this.handleError(err))
-        })
+    this.queryParamsSub = this.route.queryParams.subscribe(queryParams => {
+      const videoId = queryParams[ 'videoId' ]
+      if (videoId) this.loadVideo(videoId)
     })
 
     this.hotkeys = [
@@ -147,7 +142,8 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
     this.flushPlayer()
 
     // Unsubscribe subscriptions
-    this.paramsSub.unsubscribe()
+    if (this.paramsSub) this.paramsSub.unsubscribe()
+    if (this.queryParamsSub) this.queryParamsSub.unsubscribe()
 
     // Unbind hotkeys
     if (this.isUserLoggedIn()) this.hotkeysService.remove(this.hotkeys)
@@ -209,96 +205,26 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
         )
   }
 
-  showReportModal (event: Event) {
-    event.preventDefault()
-    this.videoReportModal.show()
-  }
-
   showSupportModal () {
     this.videoSupportModal.show()
   }
 
   showShareModal () {
-    const currentTime = this.player ? this.player.currentTime() : undefined
-
-    this.videoShareModal.show(currentTime)
-  }
-
-  showDownloadModal (event: Event) {
-    event.preventDefault()
-    this.videoDownloadModal.show()
-  }
-
-  showBlacklistModal (event: Event) {
-    event.preventDefault()
-    this.videoBlacklistModal.show()
-  }
-
-  async unblacklistVideo (event: Event) {
-    event.preventDefault()
-
-    const confirmMessage = this.i18n(
-      'Do you really want to remove this video from the blacklist? It will be available again in the videos list.'
-    )
-
-    const res = await this.confirmService.confirm(confirmMessage, this.i18n('Unblacklist'))
-    if (res === false) return
-
-    this.videoBlacklistService.removeVideoFromBlacklist(this.video.id).subscribe(
-      () => {
-        this.notifier.success(this.i18n('Video {{name}} removed from the blacklist.', { name: this.video.name }))
-
-        this.video.blacklisted = false
-        this.video.blacklistedReason = null
-      },
-
-      err => this.notifier.error(err.message)
-    )
+    this.videoShareModal.show(this.currentTime)
   }
 
   isUserLoggedIn () {
     return this.authService.isLoggedIn()
   }
 
-  isVideoUpdatable () {
-    return this.video.isUpdatableBy(this.authService.getUser())
-  }
-
-  isVideoBlacklistable () {
-    return this.video.isBlackistableBy(this.user)
-  }
-
-  isVideoUnblacklistable () {
-    return this.video.isUnblacklistableBy(this.user)
-  }
-
   getVideoTags () {
     if (!this.video || Array.isArray(this.video.tags) === false) return []
 
     return this.video.tags
   }
 
-  isVideoRemovable () {
-    return this.video.isRemovableBy(this.authService.getUser())
-  }
-
-  async removeVideo (event: Event) {
-    event.preventDefault()
-
-    const res = await this.confirmService.confirm(this.i18n('Do you really want to delete this video?'), this.i18n('Delete'))
-    if (res === false) return
-
-    this.videoService.removeVideo(this.video.id)
-        .subscribe(
-          () => {
-            this.notifier.success(this.i18n('Video {{videoName}} deleted.', { videoName: this.video.name }))
-
-            // Go back to the video-list.
-            this.redirectService.redirectToHomepage()
-          },
-
-          error => this.notifier.error(error.message)
-        )
+  onVideoRemoved () {
+    this.redirectService.redirectToHomepage()
   }
 
   acceptedPrivacyConcern () {
@@ -318,13 +244,61 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
     return this.video && this.video.scheduledUpdate !== undefined
   }
 
+  isVideoBlur (video: Video) {
+    return video.isVideoNSFWForUser(this.user, this.serverService.getConfig())
+  }
+
+  private loadVideo (videoId: string) {
+    // Video did not change
+    if (this.video && this.video.uuid === videoId) return
+
+    if (this.player) this.player.pause()
+
+    // Video did change
+    forkJoin(
+      this.videoService.getVideo(videoId),
+      this.videoCaptionService.listCaptions(videoId)
+    )
+      .pipe(
+        // If 401, the video is private or blacklisted so redirect to 404
+        catchError(err => this.restExtractor.redirectTo404IfNotFound(err, [ 400, 401, 403, 404 ]))
+      )
+      .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 })
+            .catch(err => this.handleError(err))
+      })
+  }
+
+  private loadPlaylist (playlistId: string) {
+    // Playlist did not change
+    if (this.playlist && this.playlist.uuid === playlistId) return
+
+    this.playlistService.getVideoPlaylist(playlistId)
+      .pipe(
+        // If 401, the video is private or blacklisted so redirect to 404
+        catchError(err => this.restExtractor.redirectTo404IfNotFound(err, [ 400, 401, 403, 404 ]))
+      )
+      .subscribe(playlist => {
+        this.playlist = playlist
+
+        const videoId = this.route.snapshot.queryParams['videoId']
+        this.videoWatchPlaylist.loadPlaylistElements(playlist, !videoId)
+      })
+  }
+
   private updateVideoDescription (description: string) {
     this.video.description = description
     this.setVideoDescriptionHTML()
   }
 
-  private setVideoDescriptionHTML () {
-    this.videoHTMLDescription = this.markdownService.textMarkdownToHTML(this.video.description)
+  private async setVideoDescriptionHTML () {
+    this.videoHTMLDescription = await this.markdownService.textMarkdownToHTML(this.video.description)
   }
 
   private setVideoLikesBarTooltipText () {
@@ -366,19 +340,26 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
         )
   }
 
-  private async onVideoFetched (video: VideoDetails, videoCaptions: VideoCaption[], urlOptions: { startTime: number, subtitle: string }) {
+  private async onVideoFetched (
+    video: VideoDetails,
+    videoCaptions: VideoCaption[],
+    urlOptions: { startTime?: number, stopTime?: number, subtitle?: string, playerMode?: string }
+  ) {
     this.video = video
 
     // Re init attributes
     this.descriptionLoading = false
     this.completeDescriptionShown = false
     this.remoteServerDown = false
+    this.currentTime = undefined
+
+    this.videoWatchPlaylist.updatePlaylistIndex(video)
 
     let startTime = 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
 
-    if (this.video.isVideoNSFWForUser(this.user, this.serverService.getConfig())) {
+    if (this.isVideoBlur(this.video)) {
       const res = await this.confirmService.confirm(
         this.i18n('This video contains mature or explicit content. Are you sure you want to watch it?'),
         this.i18n('Mature or explicit content')
@@ -390,7 +371,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
     this.flushPlayer()
 
     // Build video element, because videojs remove it on dispose
-    const playerElementWrapper = this.elementRef.nativeElement.querySelector('#video-element-wrapper')
+    const playerElementWrapper = this.elementRef.nativeElement.querySelector('#videojs-wrapper')
     this.playerElement = document.createElement('video')
     this.playerElement.className = 'video-js vjs-peertube-skin'
     this.playerElement.setAttribute('playsinline', 'true')
@@ -402,40 +383,94 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
       src: environment.apiUrl + c.captionPath
     }))
 
-    const videojsOptions = getVideojsOptions({
-      autoplay: this.isAutoplay(),
-      inactivityTimeout: 2500,
-      videoFiles: this.video.files,
-      videoCaptions: playerCaptions,
-      playerElement: this.playerElement,
-      videoViewUrl: this.video.privacy.id !== VideoPrivacy.PRIVATE ? this.videoService.getVideoViewUrl(this.video.uuid) : null,
-      videoDuration: this.video.duration,
-      enableHotkeys: true,
-      peertubeLink: false,
-      poster: this.video.previewUrl,
-      startTime,
-      subtitle: urlOptions.subtitle,
-      theaterMode: true,
-      language: this.localeId,
-
-      userWatching: this.user && this.user.videosHistoryEnabled === true ? {
-        url: this.videoService.getUserWatchingVideoUrl(this.video.uuid),
-        authorizationHeader: this.authService.getRequestHeaderValue()
-      } : undefined
-    })
+    const options: PeertubePlayerManagerOptions = {
+      common: {
+        autoplay: this.isAutoplay(),
+
+        playerElement: this.playerElement,
+        onPlayerElementChange: (element: HTMLVideoElement) => this.playerElement = element,
+
+        videoDuration: this.video.duration,
+        enableHotkeys: true,
+        inactivityTimeout: 2500,
+        poster: this.video.previewUrl,
+        startTime,
+        stopTime: urlOptions.stopTime,
+
+        theaterMode: true,
+        captions: videoCaptions.length !== 0,
+        peertubeLink: false,
+
+        videoViewUrl: this.video.privacy.id !== VideoPrivacy.PRIVATE ? this.videoService.getVideoViewUrl(this.video.uuid) : null,
+        embedUrl: this.video.embedUrl,
 
-    if (this.videojsLocaleLoaded === false) {
-      await loadLocaleInVideoJS(environment.apiUrl, videojs, isOnDevLocale() ? getDevLocale() : this.localeId)
-      this.videojsLocaleLoaded = true
+        language: this.localeId,
+
+        subtitle: urlOptions.subtitle,
+
+        userWatching: this.user && this.user.videosHistoryEnabled === true ? {
+          url: this.videoService.getUserWatchingVideoUrl(this.video.uuid),
+          authorizationHeader: this.authService.getRequestHeaderValue()
+        } : undefined,
+
+        serverUrl: environment.apiUrl,
+
+        videoCaptions: playerCaptions
+      },
+
+      webtorrent: {
+        videoFiles: this.video.files
+      }
+    }
+
+    let mode: PlayerMode
+
+    if (urlOptions.playerMode) {
+      if (urlOptions.playerMode === 'p2p-media-loader') mode = 'p2p-media-loader'
+      else mode = 'webtorrent'
+    } else {
+      if (this.video.hasHlsPlaylist()) mode = 'p2p-media-loader'
+      else mode = 'webtorrent'
+    }
+
+    if (mode === 'p2p-media-loader') {
+      const hlsPlaylist = this.video.getHlsPlaylist()
+
+      const p2pMediaLoader = {
+        playlistUrl: hlsPlaylist.playlistUrl,
+        segmentsSha256Url: hlsPlaylist.segmentsSha256Url,
+        redundancyBaseUrls: hlsPlaylist.redundancies.map(r => r.baseUrl),
+        trackerAnnounce: this.video.trackerUrls,
+        videoFiles: this.video.files
+      } as P2PMediaLoaderOptions
+
+      Object.assign(options, { p2pMediaLoader })
     }
 
-    const self = this
     this.zone.runOutsideAngular(async () => {
-      videojs(this.playerElement, videojsOptions, function (this: videojs.Player) {
-        self.player = this
-        this.on('customError', ({ err }: { err: any }) => self.handleError(err))
+      this.player = await PeertubePlayerManager.initialize(mode, options)
+      this.theaterEnabled = this.player.theaterEnabled
+
+      this.player.on('customError', ({ err }: { err: any }) => this.handleError(err))
+
+      this.player.on('timeupdate', () => {
+        this.currentTime = Math.floor(this.player.currentTime())
+      })
+
+      this.player.one('ended', () => {
+        if (this.playlist) {
+          this.zone.run(() => this.videoWatchPlaylist.navigateToNextPlaylistVideo())
+        }
+      })
+
+      this.player.one('stopped', () => {
+        if (this.playlist) {
+          this.zone.run(() => this.videoWatchPlaylist.navigateToNextPlaylistVideo())
+        }
+      })
 
-        addContextMenu(self.player, self.video.embedUrl)
+      this.player.on('theaterChange', (_: any, enabled: boolean) => {
+        this.zone.run(() => this.theaterEnabled = enabled)
       })
     })
 
diff --git a/client/src/app/videos/+video-watch/video-watch.module.ts b/client/src/app/videos/+video-watch/video-watch.module.ts
index 2f448db78..67596a3da 100644
--- a/client/src/app/videos/+video-watch/video-watch.module.ts
+++ b/client/src/app/videos/+video-watch/video-watch.module.ts
@@ -1,26 +1,22 @@
 import { NgModule } from '@angular/core'
 import { VideoSupportComponent } from '@app/videos/+video-watch/modal/video-support.component'
-import { ClipboardModule } from 'ngx-clipboard'
 import { SharedModule } from '../../shared'
 import { VideoCommentAddComponent } from './comment/video-comment-add.component'
 import { VideoCommentComponent } from './comment/video-comment.component'
 import { VideoCommentService } from './comment/video-comment.service'
 import { VideoCommentsComponent } from './comment/video-comments.component'
-import { VideoDownloadComponent } from './modal/video-download.component'
-import { VideoReportComponent } from './modal/video-report.component'
 import { VideoShareComponent } from './modal/video-share.component'
 import { VideoWatchRoutingModule } from './video-watch-routing.module'
 import { VideoWatchComponent } from './video-watch.component'
 import { NgxQRCodeModule } from 'ngx-qrcode2'
 import { NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap'
-import { VideoBlacklistComponent } from '@app/videos/+video-watch/modal/video-blacklist.component'
 import { RecommendationsModule } from '@app/videos/recommendations/recommendations.module'
+import { VideoWatchPlaylistComponent } from '@app/videos/+video-watch/video-watch-playlist.component'
 
 @NgModule({
   imports: [
     VideoWatchRoutingModule,
     SharedModule,
-    ClipboardModule,
     NgbTooltipModule,
     NgxQRCodeModule,
     RecommendationsModule
@@ -28,11 +24,9 @@ import { RecommendationsModule } from '@app/videos/recommendations/recommendatio
 
   declarations: [
     VideoWatchComponent,
+    VideoWatchPlaylistComponent,
 
-    VideoDownloadComponent,
     VideoShareComponent,
-    VideoReportComponent,
-    VideoBlacklistComponent,
     VideoSupportComponent,
     VideoCommentsComponent,
     VideoCommentAddComponent,
diff --git a/client/src/app/videos/recommendations/recent-videos-recommendation.service.spec.ts b/client/src/app/videos/recommendations/recent-videos-recommendation.service.spec.ts
deleted file mode 100644
index 698b2e27b..000000000
--- a/client/src/app/videos/recommendations/recent-videos-recommendation.service.spec.ts
+++ /dev/null
@@ -1,66 +0,0 @@
-import { RecentVideosRecommendationService } from '@app/videos/recommendations/recent-videos-recommendation.service'
-import { VideosProvider } from '@app/shared/video/video.service'
-import { EMPTY, of } from 'rxjs'
-import Mock = jest.Mock
-
-describe('"Recent Videos" Recommender', () => {
-  describe('getRecommendations', () => {
-    let videosService: VideosProvider
-    let service: RecentVideosRecommendationService
-    let getVideosMock: Mock<any>
-    beforeEach(() => {
-      getVideosMock = jest.fn(() => EMPTY)
-      videosService = {
-        getVideos: getVideosMock
-      }
-      service = new RecentVideosRecommendationService(videosService)
-    })
-    it('should filter out the given UUID from the results', async (done) => {
-      const vids = [
-        { uuid: 'uuid1' },
-        { uuid: 'uuid2' }
-      ]
-      getVideosMock.mockReturnValueOnce(of({ videos: vids }))
-      const result = await service.getRecommendations({ uuid: 'uuid1' }).toPromise()
-      const uuids = result.map(v => v.uuid)
-      expect(uuids).toEqual(['uuid2'])
-      done()
-    })
-    it('should return 5 results when the given UUID is NOT in the first 5 results', async (done) => {
-      const vids = [
-        { uuid: 'uuid2' },
-        { uuid: 'uuid3' },
-        { uuid: 'uuid4' },
-        { uuid: 'uuid5' },
-        { uuid: 'uuid6' },
-        { uuid: 'uuid7' }
-      ]
-      getVideosMock.mockReturnValueOnce(of({ videos: vids }))
-      const result = await service.getRecommendations({ uuid: 'uuid1' }).toPromise()
-      expect(result.length).toEqual(5)
-      done()
-    })
-    it('should return 5 results when the given UUID IS PRESENT in the first 5 results', async (done) => {
-      const vids = [
-        { uuid: 'uuid1' },
-        { uuid: 'uuid2' },
-        { uuid: 'uuid3' },
-        { uuid: 'uuid4' },
-        { uuid: 'uuid5' },
-        { uuid: 'uuid6' }
-      ]
-      getVideosMock
-        .mockReturnValueOnce(of({ videos: vids }))
-      const result = await service.getRecommendations({ uuid: 'uuid1' }).toPromise()
-      expect(result.length).toEqual(5)
-      done()
-    })
-    it('should fetch an extra result in case the given UUID is in the list', async (done) => {
-      await service.getRecommendations({ uuid: 'uuid1' }).toPromise()
-      let expectedSize = service.pageSize + 1
-      let params = { currentPage: jasmine.anything(), itemsPerPage: expectedSize }
-      expect(getVideosMock).toHaveBeenCalledWith(params, jasmine.anything())
-      done()
-    })
-  })
-})
diff --git a/client/src/app/videos/recommendations/recommended-videos.component.html b/client/src/app/videos/recommendations/recommended-videos.component.html
index 73f9f0fe1..1fb89f8b0 100644
--- a/client/src/app/videos/recommendations/recommended-videos.component.html
+++ b/client/src/app/videos/recommendations/recommended-videos.component.html
@@ -4,6 +4,6 @@
     </div>
 
     <div *ngFor="let video of (videos$ | async)">
-        <my-video-miniature [video]="video" [user]="user"></my-video-miniature>
+        <my-video-miniature [video]="video" [user]="user" (videoBlacklisted)="onVideoRemoved()" (videoRemoved)="onVideoRemoved()"></my-video-miniature>
     </div>
 </div>
diff --git a/client/src/app/videos/recommendations/recommended-videos.component.ts b/client/src/app/videos/recommendations/recommended-videos.component.ts
index c6c1d9e5d..68fd750cc 100644
--- a/client/src/app/videos/recommendations/recommended-videos.component.ts
+++ b/client/src/app/videos/recommendations/recommended-videos.component.ts
@@ -29,4 +29,7 @@ export class RecommendedVideosComponent implements OnChanges {
     }
   }
 
+  onVideoRemoved () {
+    this.store.requestNewRecommendations(this.inputRecommendation)
+  }
 }
diff --git a/client/src/app/videos/recommendations/recommended-videos.store.spec.ts b/client/src/app/videos/recommendations/recommended-videos.store.spec.ts
deleted file mode 100644
index e12a3f520..000000000
--- a/client/src/app/videos/recommendations/recommended-videos.store.spec.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import { RecommendedVideosStore } from '@app/videos/recommendations/recommended-videos.store'
-import { RecommendationService } from '@app/videos/recommendations/recommendations.service'
-
-describe('RecommendedVideosStore', () => {
-  describe('requestNewRecommendations', () => {
-    let store: RecommendedVideosStore
-    let service: RecommendationService
-    beforeEach(() => {
-      service = {
-        getRecommendations: jest.fn(() => new Promise((r) => r()))
-      }
-      store = new RecommendedVideosStore(service)
-    })
-    it('should pull new videos from the service one time when given the same UUID twice', () => {
-      store.requestNewRecommendations('some-uuid')
-      store.requestNewRecommendations('some-uuid')
-      // Requests aren't fulfilled until someone asks for them (ie: subscribes)
-      store.recommendations$.subscribe()
-      expect(service.getRecommendations).toHaveBeenCalledTimes(1)
-    })
-  })
-})
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 c0be4b885..13d4023c2 100644
--- a/client/src/app/videos/video-list/video-local.component.ts
+++ b/client/src/app/videos/video-list/video-local.component.ts
@@ -1,7 +1,6 @@
 import { Component, OnDestroy, OnInit } from '@angular/core'
 import { ActivatedRoute, Router } from '@angular/router'
 import { immutableAssign } from '@app/shared/misc/utils'
-import { Location } from '@angular/common'
 import { AuthService } from '../../core/auth'
 import { AbstractVideoList } from '../../shared/video/abstract-video-list'
 import { VideoSortField } from '../../shared/video/sort-field.type'
@@ -10,7 +9,7 @@ import { VideoFilter } from '../../../../../shared/models/videos/video-query.typ
 import { I18n } from '@ngx-translate/i18n-polyfill'
 import { ScreenService } from '@app/shared/misc/screen.service'
 import { UserRight } from '../../../../../shared/models/users'
-import { Notifier } from '@app/core'
+import { Notifier, ServerService } from '@app/core'
 
 @Component({
   selector: 'my-videos-local',
@@ -19,18 +18,17 @@ import { Notifier } from '@app/core'
 })
 export class VideoLocalComponent extends AbstractVideoList implements OnInit, OnDestroy {
   titlePage: string
-  currentRoute = '/videos/local'
   sort = '-publishedAt' as VideoSortField
   filter: VideoFilter = 'local'
 
   constructor (
     protected router: Router,
+    protected serverService: ServerService,
     protected route: ActivatedRoute,
     protected notifier: Notifier,
     protected authService: AuthService,
-    protected location: Location,
-    protected i18n: I18n,
     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 cb26592e3..b644dd798 100644
--- a/client/src/app/videos/video-list/video-overview.component.html
+++ b/client/src/app/videos/video-list/video-overview.component.html
@@ -7,7 +7,7 @@
       <a routerLink="/search" [queryParams]="{ categoryOneOf: [ object.category.id ] }">{{ object.category.label }}</a>
     </div>
 
-    <my-video-miniature *ngFor="let video of object.videos" [video]="video" [user]="user"></my-video-miniature>
+    <my-video-miniature *ngFor="let video of object.videos" [video]="video" [user]="user" [displayVideoActions]="false"></my-video-miniature>
   </div>
 
   <div class="section" *ngFor="let object of overview.tags">
@@ -15,7 +15,7 @@
       <a routerLink="/search" [queryParams]="{ tagsOneOf: [ object.tag ] }">#{{ object.tag }}</a>
     </div>
 
-    <my-video-miniature *ngFor="let video of object.videos" [video]="video" [user]="user"></my-video-miniature>
+    <my-video-miniature *ngFor="let video of object.videos" [video]="video" [user]="user" [displayVideoActions]="false"></my-video-miniature>
   </div>
 
   <div class="section channel" *ngFor="let object of overview.channels">
@@ -27,7 +27,7 @@
       </a>
     </div>
 
-    <my-video-miniature *ngFor="let video of object.videos" [video]="video" [user]="user"></my-video-miniature>
+    <my-video-miniature *ngFor="let video of object.videos" [video]="video" [user]="user" [displayVideoActions]="false"></my-video-miniature>
   </div>
 
 </div>
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 aff45c072..a24766783 100644
--- a/client/src/app/videos/video-list/video-overview.component.scss
+++ b/client/src/app/videos/video-list/video-overview.component.scss
@@ -1,7 +1,10 @@
 @import '_variables';
 @import '_mixins';
+@import '_miniature';
 
 .section {
+  max-height: 500px; // 2 rows max
+  overflow: hidden;
   padding-top: 10px;
 
   &:first-child {
@@ -43,11 +46,18 @@
 }
 
 @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;
   }
-}
\ No newline at end of file
+}
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 f99c8abb6..80cef813e 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
@@ -1,6 +1,5 @@
 import { Component, OnDestroy, OnInit } from '@angular/core'
 import { ActivatedRoute, Router } from '@angular/router'
-import { Location } from '@angular/common'
 import { immutableAssign } from '@app/shared/misc/utils'
 import { AuthService } from '../../core/auth'
 import { AbstractVideoList } from '../../shared/video/abstract-video-list'
@@ -8,7 +7,7 @@ import { VideoSortField } from '../../shared/video/sort-field.type'
 import { VideoService } from '../../shared/video/video.service'
 import { I18n } from '@ngx-translate/i18n-polyfill'
 import { ScreenService } from '@app/shared/misc/screen.service'
-import { Notifier } from '@app/core'
+import { Notifier, ServerService } from '@app/core'
 
 @Component({
   selector: 'my-videos-recently-added',
@@ -17,17 +16,16 @@ import { Notifier } from '@app/core'
 })
 export class VideoRecentlyAddedComponent extends AbstractVideoList implements OnInit, OnDestroy {
   titlePage: string
-  currentRoute = '/videos/recently-added'
   sort: VideoSortField = '-publishedAt'
 
   constructor (
-    protected router: Router,
     protected route: ActivatedRoute,
-    protected location: Location,
+    protected serverService: ServerService,
+    protected router: Router,
     protected notifier: Notifier,
     protected authService: AuthService,
-    protected i18n: I18n,
     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 6fd74e67a..e2ad95bc4 100644
--- a/client/src/app/videos/video-list/video-trending.component.ts
+++ b/client/src/app/videos/video-list/video-trending.component.ts
@@ -1,6 +1,5 @@
 import { Component, OnDestroy, OnInit } from '@angular/core'
 import { ActivatedRoute, Router } from '@angular/router'
-import { Location } from '@angular/common'
 import { immutableAssign } from '@app/shared/misc/utils'
 import { AuthService } from '../../core/auth'
 import { AbstractVideoList } from '../../shared/video/abstract-video-list'
@@ -17,18 +16,16 @@ import { Notifier, ServerService } from '@app/core'
 })
 export class VideoTrendingComponent extends AbstractVideoList implements OnInit, OnDestroy {
   titlePage: string
-  currentRoute = '/videos/trending'
   defaultSort: VideoSortField = '-trending'
 
   constructor (
     protected router: Router,
+    protected serverService: ServerService,
     protected route: ActivatedRoute,
     protected notifier: Notifier,
     protected authService: AuthService,
-    protected location: Location,
     protected screenService: ScreenService,
-    private serverService: ServerService,
-    protected i18n: I18n,
+    private i18n: I18n,
     private videoService: VideoService
   ) {
     super()
@@ -45,11 +42,11 @@ export class VideoTrendingComponent extends AbstractVideoList implements OnInit,
 
         if (trendingDays === 1) {
           this.titlePage = this.i18n('Trending for the last 24 hours')
-          this.titleTooltip = this.i18n('Trending videos are those totalizing the greatest number of views during the last 24 hours.')
+          this.titleTooltip = this.i18n('Trending videos are those totalizing the greatest number of views during the last 24 hours')
         } else {
           this.titlePage = this.i18n('Trending for the last {{days}} days', { days: trendingDays })
           this.titleTooltip = this.i18n(
-            'Trending videos are those totalizing the greatest number of views during the last {{days}} days.',
+            'Trending videos are those totalizing the greatest number of views during the last {{days}} days',
             { days: trendingDays }
           )
         }
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 bee828e12..2f0685ccc 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
@@ -1,7 +1,6 @@
 import { Component, OnDestroy, OnInit } from '@angular/core'
 import { ActivatedRoute, Router } from '@angular/router'
 import { immutableAssign } from '@app/shared/misc/utils'
-import { Location } from '@angular/common'
 import { AuthService } from '../../core/auth'
 import { AbstractVideoList } from '../../shared/video/abstract-video-list'
 import { VideoSortField } from '../../shared/video/sort-field.type'
@@ -9,7 +8,7 @@ import { VideoService } from '../../shared/video/video.service'
 import { I18n } from '@ngx-translate/i18n-polyfill'
 import { ScreenService } from '@app/shared/misc/screen.service'
 import { OwnerDisplayType } from '@app/shared/video/video-miniature.component'
-import { Notifier } from '@app/core'
+import { Notifier, ServerService } from '@app/core'
 
 @Component({
   selector: 'my-videos-user-subscriptions',
@@ -18,18 +17,17 @@ import { Notifier } from '@app/core'
 })
 export class VideoUserSubscriptionsComponent extends AbstractVideoList implements OnInit, OnDestroy {
   titlePage: string
-  currentRoute = '/videos/subscriptions'
   sort = '-publishedAt' as VideoSortField
   ownerDisplayType: OwnerDisplayType = 'auto'
 
   constructor (
     protected router: Router,
+    protected serverService: ServerService,
     protected route: ActivatedRoute,
     protected notifier: Notifier,
     protected authService: AuthService,
-    protected location: Location,
-    protected i18n: I18n,
     protected screenService: ScreenService,
+    private i18n: I18n,
     private videoService: VideoService
   ) {
     super()
diff --git a/client/src/app/videos/videos-routing.module.ts b/client/src/app/videos/videos-routing.module.ts
index 58988ffd1..505173a5b 100644
--- a/client/src/app/videos/videos-routing.module.ts
+++ b/client/src/app/videos/videos-routing.module.ts
@@ -29,6 +29,10 @@ const videosRoutes: Routes = [
         data: {
           meta: {
             title: 'Trending videos'
+          },
+          reuse: {
+            enabled: true,
+            key: 'trending-videos-list'
           }
         }
       },
@@ -38,6 +42,10 @@ const videosRoutes: Routes = [
         data: {
           meta: {
             title: 'Recently added videos'
+          },
+          reuse: {
+            enabled: true,
+            key: 'recently-added-videos-list'
           }
         }
       },
@@ -47,6 +55,10 @@ const videosRoutes: Routes = [
         data: {
           meta: {
             title: 'Subscriptions'
+          },
+          reuse: {
+            enabled: true,
+            key: 'subscription-videos-list'
           }
         }
       },
@@ -56,6 +68,10 @@ const videosRoutes: Routes = [
         data: {
           meta: {
             title: 'Local videos'
+          },
+          reuse: {
+            enabled: true,
+            key: 'local-videos-list'
           }
         }
       },
@@ -78,11 +94,7 @@ const videosRoutes: Routes = [
         }
       },
       {
-        path: 'watch/:uuid/comments/:commentId',
-        redirectTo: 'watch/:uuid'
-      },
-      {
-        path: 'watch/:uuid',
+        path: 'watch',
         loadChildren: 'app/videos/+video-watch/video-watch.module#VideoWatchModule',
         data: {
           preload: 3000