20 files changed, 287 insertions, 229 deletions

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 1814ef455..0d579fa0c 100644
--- a/client/src/app/+accounts/account-videos/account-videos.component.ts
+++ b/client/src/app/+accounts/account-videos/account-videos.component.ts
@@ -7,7 +7,7 @@ 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'
@@ -50,12 +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
+                          .pipe(first())
+                          .subscribe(account => {
+                            this.account = account
 
-        this.reloadVideos()
-        this.generateSyndicationList()
-      })
+                            this.reloadVideos()
+                            this.generateSyndicationList()
+                          })
   }
 
   ngOnDestroy () {
diff --git a/client/src/app/+video-channels/video-channel-playlists/video-channel-playlists.component.ts b/client/src/app/+video-channels/video-channel-playlists/video-channel-playlists.component.ts
index f878a5a24..907aefae1 100644
--- a/client/src/app/+video-channels/video-channel-playlists/video-channel-playlists.component.ts
+++ b/client/src/app/+video-channels/video-channel-playlists/video-channel-playlists.component.ts
@@ -1,9 +1,7 @@
 import { Component, OnDestroy, OnInit } from '@angular/core'
-import { AuthService } from '../../core/auth'
 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 { flatMap } from 'rxjs/operators'
 import { Subscription } from 'rxjs'
 import { Notifier } from '@app/core'
 import { VideoPlaylist } from '@app/shared/video-playlist/video-playlist.model'
@@ -28,7 +26,6 @@ export class VideoChannelPlaylistsComponent implements OnInit, OnDestroy {
   private videoChannel: VideoChannel
 
   constructor (
-    private authService: AuthService,
     private notifier: Notifier,
     private confirmService: ConfirmService,
     private videoPlaylistService: VideoPlaylistService,
@@ -57,8 +54,7 @@ export class VideoChannelPlaylistsComponent implements OnInit, OnDestroy {
   }
 
   private loadVideoPlaylists () {
-    this.authService.userInformationLoaded
-        .pipe(flatMap(() => this.videoPlaylistService.listChannelPlaylists(this.videoChannel)))
+    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 2045a095d..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
@@ -7,7 +7,7 @@ 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'
@@ -50,12 +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
+                               .pipe(first())
+                               .subscribe(videoChannel => {
+                                 this.videoChannel = videoChannel
 
-        this.reloadVideos()
-        this.generateSyndicationList()
-      })
+                                 this.reloadVideos()
+                                 this.generateSyndicationList()
+                               })
   }
 
   ngOnDestroy () {
diff --git a/client/src/app/app.component.ts b/client/src/app/app.component.ts
index ad0588b99..915466af7 100644
--- a/client/src/app/app.component.ts
+++ b/client/src/app/app.component.ts
@@ -125,8 +125,8 @@ export class AppComponent implements OnInit {
                         try {
                           resetScroll = false
 
-                          const previousUrl = new URL(window.location.origin + e1.url)
-                          const nextUrl = new URL(window.location.origin + e2.url)
+                          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
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/shared/menu/top-menu-dropdown.component.html b/client/src/app/shared/menu/top-menu-dropdown.component.html
index 54a8f9e80..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 container="body" 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"
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 e951ea236..5ccdafb54 100644
--- a/client/src/app/shared/menu/top-menu-dropdown.component.ts
+++ b/client/src/app/shared/menu/top-menu-dropdown.component.ts
@@ -4,6 +4,7 @@ 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
@@ -27,11 +28,15 @@ export class TopMenuDropdownComponent implements OnInit, OnDestroy {
 
   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)
@@ -43,6 +48,12 @@ export class TopMenuDropdownComponent implements OnInit, OnDestroy {
     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 () {
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
index f8a068cbc..cb7072d7f 100644
--- 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
@@ -2,6 +2,13 @@
 @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;
@@ -44,13 +51,6 @@
       }
     }
 
-    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-info {
       display: flex;
       flex-direction: column;
diff --git a/client/src/app/shared/video/video-actions-dropdown.component.html b/client/src/app/shared/video/video-actions-dropdown.component.html
index 300fe318a..ec03fa55d 100644
--- a/client/src/app/shared/video/video-actions-dropdown.component.html
+++ b/client/src/app/shared/video/video-actions-dropdown.component.html
@@ -11,7 +11,7 @@
   </div>
 
   <my-action-dropdown
-    [actions]="videoActions" [label]="label" [entry]="{ video: video }" (mouseenter)="loadDropdownInformation()"
+    [actions]="videoActions" [label]="label" [entry]="{ video: video }" (click)="loadDropdownInformation()"
     [buttonSize]="buttonSize" [placement]="placement" [buttonDirection]="buttonDirection" [buttonStyled]="buttonStyled"
   ></my-action-dropdown>
 
diff --git a/client/src/app/shared/video/video-actions-dropdown.component.ts b/client/src/app/shared/video/video-actions-dropdown.component.ts
index 787ef1188..ee2f44f9e 100644
--- a/client/src/app/shared/video/video-actions-dropdown.component.ts
+++ b/client/src/app/shared/video/video-actions-dropdown.component.ts
@@ -1,4 +1,4 @@
-import { Component, EventEmitter, Input, OnChanges, Output, ViewChild } from '@angular/core'
+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'
@@ -126,6 +126,10 @@ export class VideoActionsDropdownComponent implements OnChanges {
     return this.video.isUnblacklistableBy(this.user)
   }
 
+  isVideoDownloadable () {
+    return this.video && this.video instanceof VideoDetails && this.video.downloadEnabled
+  }
+
   /* Action handlers */
 
   async unblacklistVideo () {
@@ -195,7 +199,7 @@ export class VideoActionsDropdownComponent implements OnChanges {
         {
           label: this.i18n('Download'),
           handler: () => this.showDownloadModal(),
-          isDisplayed: () => this.displayOptions.download,
+          isDisplayed: () => this.displayOptions.download && this.isVideoDownloadable(),
           iconName: 'download'
         },
         {
diff --git a/client/src/app/shared/video/video-details.model.ts b/client/src/app/shared/video/video-details.model.ts
index 8463e15d7..22f024656 100644
--- a/client/src/app/shared/video/video-details.model.ts
+++ b/client/src/app/shared/video/video-details.model.ts
@@ -52,4 +52,8 @@ export class VideoDetails extends Video implements VideoDetailsServerModel {
   getHlsPlaylist () {
     return this.streamingPlaylists.find(p => p.type === VideoStreamingPlaylistType.HLS)
   }
+
+  hasHlsPlaylist () {
+    return !!this.getHlsPlaylist()
+  }
 }
diff --git a/client/src/app/shared/video/video-miniature.component.scss b/client/src/app/shared/video/video-miniature.component.scss
index 6e173af99..d665ce021 100644
--- a/client/src/app/shared/video/video-miniature.component.scss
+++ b/client/src/app/shared/video/video-miniature.component.scss
@@ -2,6 +2,9 @@
 @import '_mixins';
 @import '_miniature';
 
+$more-button-width: 41px;
+$more-margin-right: 10px;
+
 .video-miniature {
   width: $video-miniature-width;
   display: inline-flex;
@@ -14,7 +17,7 @@
     display: flex;
 
     .video-miniature-information {
-      width: 200px;
+      width: $video-miniature-width - $more-button-width - $more-margin-right;
       line-height: normal;
 
       .video-miniature-name {
@@ -61,7 +64,9 @@
 
     .video-actions {
       margin-top: 3px;
-      margin-right: 10px;
+      margin-right: $more-margin-right;
+      width: $more-button-width;
+      height: 30px;
 
       /deep/ .dropdown-root:not(.show) {
         opacity: 0;
@@ -86,7 +91,7 @@
         top: -3px;
 
         /deep/ .dropdown-root {
-          display: block !important;
+          opacity: 1 !important;
         }
       }
     }
diff --git a/client/src/app/shared/video/video-miniature.component.ts b/client/src/app/shared/video/video-miniature.component.ts
index e32b8cbc5..48475033c 100644
--- a/client/src/app/shared/video/video-miniature.component.ts
+++ b/client/src/app/shared/video/video-miniature.component.ts
@@ -74,7 +74,7 @@ export class VideoMiniatureComponent implements OnInit {
 
     // We rely on mouseenter to lazy load actions
     if (this.screenService.isInTouchScreen()) {
-      this.showActions = true
+      this.loadActions()
     }
   }
 
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.component.html b/client/src/app/videos/+video-watch/video-watch.component.html
index 7e9b89dd0..2e39b9c6b 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.html
+++ b/client/src/app/videos/+video-watch/video-watch.component.html
@@ -9,31 +9,10 @@
 
     <div id="videojs-wrapper"></div>
 
-    <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>
+    <my-video-watch-playlist
+      #videoWatchPlaylist
+      [video]="video" [playlist]="playlist" class="playlist"
+    ></my-video-watch-playlist>
   </div>
 
   <div class="row">
@@ -49,10 +28,6 @@
       This video will be published on {{ video.scheduledUpdate.updateAt | date: 'full' }}.
     </div>
 
-    <div i18n class="col-md-12 alert alert-info" *ngIf="noPlaylistVideos">
-      This playlist does not have videos.
-    </div>
-
     <div class="col-md-12 alert alert-danger" *ngIf="video?.blacklisted">
       <div class="blacklisted-label" i18n>This video is blacklisted.</div>
       {{ video.blacklistedReason }}
@@ -240,6 +215,7 @@
       OK
     </div>
   </div>
+</div>
 
 <ng-template [ngIf]="video !== null">
   <my-video-support #videoSupportModal [video]="video"></my-video-support>
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 d8113b666..8ca5c4118 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.scss
+++ b/client/src/app/videos/+video-watch/video-watch.component.scss
@@ -15,10 +15,10 @@ $player-factor: 1.7; // 16/9
 }
 
 @mixin playlist-below-player {
-  width: 100%;
-  height: auto;
-  max-height: 300px;
-  border-bottom: 1px solid $separator-border-color;
+  width: 100% !important;
+  height: auto !important;
+  max-height: 300px !important;
+  border-bottom: 1px solid $separator-border-color !important;
 }
 
 .root {
@@ -37,7 +37,7 @@ $player-factor: 1.7; // 16/9
       width: 100%;
     }
 
-    .playlist {
+    my-video-watch-playlist /deep/ .playlist {
       @include playlist-below-player;
     }
   }
@@ -80,60 +80,6 @@ $player-factor: 1.7; // 16/9
     }
   }
 
-  .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);
-        }
-      }
-    }
-  }
-
   /deep/ .video-js {
     width: getPlayerWidth(66vh);
     height: 66vh;
@@ -508,7 +454,7 @@ my-video-comments {
     flex-direction: column;
     justify-content: center;
 
-    .playlist {
+    my-video-watch-playlist /deep/ .playlist {
       @include playlist-below-player;
     }
   }
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 bce652210..b147b75b0 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.ts
+++ b/client/src/app/videos/+video-watch/video-watch.component.ts
@@ -8,7 +8,7 @@ import { MetaService } from '@ngx-meta/core'
 import { Notifier, ServerService } from '@app/core'
 import { forkJoin, Subscription } from 'rxjs'
 import { Hotkey, HotkeysService } from 'angular2-hotkeys'
-import { UserVideoRateType, VideoCaption, VideoPlaylistPrivacy, VideoPrivacy, VideoState } from '../../../../../shared'
+import { UserVideoRateType, VideoCaption, VideoPrivacy, VideoState } from '../../../../../shared'
 import { AuthService, ConfirmService } from '../../core'
 import { RestExtractor, VideoBlacklistService } from '../../shared'
 import { VideoDetails } from '../../shared/video/video-details.model'
@@ -27,9 +27,9 @@ import {
 } 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 { ComponentPagination } from '@app/shared/rest/component-pagination.model'
 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,6 +39,7 @@ import { isWebRTCDisabled } from '../../../assets/player/utils'
 export class VideoWatchComponent implements OnInit, OnDestroy {
   private static LOCAL_STORAGE_PRIVACY_CONCERN_KEY = 'video-watch-privacy-concern'
 
+  @ViewChild('videoWatchPlaylist') videoWatchPlaylist: VideoWatchPlaylistComponent
   @ViewChild('videoShareModal') videoShareModal: VideoShareComponent
   @ViewChild('videoSupportModal') videoSupportModal: VideoSupportComponent
   @ViewChild('subscribeButton') subscribeButton: SubscribeButtonComponent
@@ -51,14 +52,6 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
   descriptionLoading = false
 
   playlist: VideoPlaylist = null
-  playlistVideos: Video[] = []
-  playlistPagination: ComponentPagination = {
-    currentPage: 1,
-    itemsPerPage: 30,
-    totalItems: null
-  }
-  noPlaylistVideos = false
-  currentPlaylistPosition = 1
 
   completeDescriptionShown = false
   completeVideoDescription: string
@@ -230,10 +223,6 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
     return this.video.tags
   }
 
-  isVideoRemovable () {
-    return this.video.isRemovableBy(this.authService.getUser())
-  }
-
   onVideoRemoved () {
     this.redirectService.redirectToHomepage()
   }
@@ -247,10 +236,6 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
     return this.video && this.video.state.id === VideoState.TO_TRANSCODE
   }
 
-  isVideoDownloadable () {
-    return this.video && this.video.downloadEnabled
-  }
-
   isVideoToImport () {
     return this.video && this.video.state.id === VideoState.TO_IMPORT
   }
@@ -263,36 +248,6 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
     return video.isVideoNSFWForUser(this.user, this.serverService.getConfig())
   }
 
-  isPlaylistOwned () {
-    return this.playlist.isLocal === true && this.playlist.ownerAccount.name === this.user.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
-  }
-
-  onPlaylistVideosNearOfBottom () {
-    // Last page
-    if (this.playlistPagination.totalItems <= (this.playlistPagination.currentPage * this.playlistPagination.itemsPerPage)) return
-
-    this.playlistPagination.currentPage += 1
-    this.loadPlaylistElements(false)
-  }
-
-  onElementRemoved (video: Video) {
-    this.playlistVideos = this.playlistVideos.filter(v => v.id !== video.id)
-
-    this.playlistPagination.totalItems--
-  }
-
   private loadVideo (videoId: string) {
     // Video did not change
     if (this.video && this.video.uuid === videoId) return
@@ -333,33 +288,10 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
         this.playlist = playlist
 
         const videoId = this.route.snapshot.queryParams['videoId']
-        this.loadPlaylistElements(!videoId)
+        this.videoWatchPlaylist.loadPlaylistElements(playlist, !videoId)
       })
   }
 
-  private loadPlaylistElements (redirectToFirst = false) {
-    this.videoService.getPlaylistVideos(this.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()
-
-          if (redirectToFirst) {
-            const extras = {
-              queryParams: { videoId: this.playlistVideos[ 0 ].uuid },
-              replaceUrl: true
-            }
-            this.router.navigate([], extras)
-          }
-        })
-  }
-
   private updateVideoDescription (description: string) {
     this.video.description = description
     this.setVideoDescriptionHTML()
@@ -421,7 +353,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
     this.remoteServerDown = false
     this.currentTime = undefined
 
-    this.updatePlaylistIndex()
+    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
@@ -491,7 +423,15 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
       }
     }
 
-    const mode: PlayerMode = urlOptions.playerMode === 'p2p-media-loader' ? 'p2p-media-loader' : 'webtorrent'
+    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()
@@ -519,13 +459,13 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
 
       this.player.one('ended', () => {
         if (this.playlist) {
-          this.zone.run(() => this.navigateToNextPlaylistVideo())
+          this.zone.run(() => this.videoWatchPlaylist.navigateToNextPlaylistVideo())
         }
       })
 
       this.player.one('stopped', () => {
         if (this.playlist) {
-          this.zone.run(() => this.navigateToNextPlaylistVideo())
+          this.zone.run(() => this.videoWatchPlaylist.navigateToNextPlaylistVideo())
         }
       })
 
@@ -586,20 +526,6 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
     this.setVideoLikesBarTooltipText()
   }
 
-  private updatePlaylistIndex () {
-    if (this.playlistVideos.length === 0 || !this.video) return
-
-    for (const video of this.playlistVideos) {
-      if (video.id === this.video.id) {
-        this.currentPlaylistPosition = video.playlistElement.position
-        return
-      }
-    }
-
-    // Load more videos to find our video
-    this.onPlaylistVideosNearOfBottom()
-  }
-
   private setOpenGraphTags () {
     this.metaService.setTitle(this.video.name)
 
@@ -639,14 +565,4 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
       this.player = undefined
     }
   }
-
-  private 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.module.ts b/client/src/app/videos/+video-watch/video-watch.module.ts
index 983350f52..67596a3da 100644
--- a/client/src/app/videos/+video-watch/video-watch.module.ts
+++ b/client/src/app/videos/+video-watch/video-watch.module.ts
@@ -11,6 +11,7 @@ import { VideoWatchComponent } from './video-watch.component'
 import { NgxQRCodeModule } from 'ngx-qrcode2'
 import { NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap'
 import { RecommendationsModule } from '@app/videos/recommendations/recommendations.module'
+import { VideoWatchPlaylistComponent } from '@app/videos/+video-watch/video-watch-playlist.component'
 
 @NgModule({
   imports: [
@@ -23,6 +24,7 @@ import { RecommendationsModule } from '@app/videos/recommendations/recommendatio
 
   declarations: [
     VideoWatchComponent,
+    VideoWatchPlaylistComponent,
 
     VideoShareComponent,
     VideoSupportComponent,