Add to playlist dropdown

18 files changed, 580 insertions, 19 deletions

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/images/global-icon.component.html b/client/src/app/shared/images/global-icon.component.html
deleted file mode 100644
index e69de29bb..000000000
--- a/client/src/app/shared/images/global-icon.component.html
+++ /dev/null
diff --git a/client/src/app/shared/images/global-icon.component.ts b/client/src/app/shared/images/global-icon.component.ts
index e8ada0324..3fda7ee4d 100644
--- a/client/src/app/shared/images/global-icon.component.ts
+++ b/client/src/app/shared/images/global-icon.component.ts
@@ -25,7 +25,8 @@ const icons = {
   'like': require('../../../assets/images/video/like.html'),
   'more': require('../../../assets/images/video/more.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')
 }
 
 export type GlobalIconName = keyof typeof icons
diff --git a/client/src/app/shared/shared.module.ts b/client/src/app/shared/shared.module.ts
index 60a7bd6e2..1f9eee0b7 100644
--- a/client/src/app/shared/shared.module.ts
+++ b/client/src/app/shared/shared.module.ts
@@ -9,6 +9,7 @@ import { InfiniteScrollerDirective } from '@app/shared/video/infinite-scroller.d
 
 import { BytesPipe, KeysPipe, NgPipesModule } from 'ngx-pipes'
 import { SharedModule as PrimeSharedModule } from 'primeng/components/common/shared'
+import { KeyFilterModule } from 'primeng/keyfilter'
 
 import { AUTH_INTERCEPTOR_PROVIDER } from './auth'
 import { ButtonComponent } from './buttons/button.component'
@@ -49,6 +50,7 @@ import {
   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'
@@ -74,6 +76,8 @@ import { VideoPlaylistService } from '@app/shared/video-playlist/video-playlist.
 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'
 
 @NgModule({
   imports: [
@@ -90,6 +94,8 @@ import { VideoPlaylistMiniatureComponent } from '@app/shared/video-playlist/vide
     NgbTooltipModule,
 
     PrimeSharedModule,
+    InputMaskModule,
+    KeyFilterModule,
     NgPipesModule
   ],
 
@@ -100,11 +106,14 @@ import { VideoPlaylistMiniatureComponent } from '@app/shared/video-playlist/vide
     VideoThumbnailComponent,
     VideoMiniatureComponent,
     VideoPlaylistMiniatureComponent,
+    VideoAddToPlaylistComponent,
 
     FeedComponent,
+
     ButtonComponent,
     DeleteButtonComponent,
     EditButtonComponent,
+
     ActionDropdownComponent,
     NumberFormatterPipe,
     ObjectLengthPipe,
@@ -113,8 +122,11 @@ import { VideoPlaylistMiniatureComponent } from '@app/shared/video-playlist/vide
     InfiniteScrollerDirective,
     TextareaAutoResizeDirective,
     HelpComponent,
+
     ReactiveFileComponent,
     PeertubeCheckboxComponent,
+    TimestampInputComponent,
+
     SubscribeButtonComponent,
     RemoteSubscribeComponent,
     InstanceFeaturesTableComponent,
@@ -142,6 +154,8 @@ import { VideoPlaylistMiniatureComponent } from '@app/shared/video-playlist/vide
     NgbTooltipModule,
 
     PrimeSharedModule,
+    InputMaskModule,
+    KeyFilterModule,
     BytesPipe,
     KeysPipe,
 
@@ -151,18 +165,24 @@ import { VideoPlaylistMiniatureComponent } from '@app/shared/video-playlist/vide
     VideoThumbnailComponent,
     VideoMiniatureComponent,
     VideoPlaylistMiniatureComponent,
+    VideoAddToPlaylistComponent,
 
     FeedComponent,
+
     ButtonComponent,
     DeleteButtonComponent,
     EditButtonComponent,
+
     ActionDropdownComponent,
     MarkdownTextareaComponent,
     InfiniteScrollerDirective,
     TextareaAutoResizeDirective,
     HelpComponent,
+
     ReactiveFileComponent,
     PeertubeCheckboxComponent,
+    TimestampInputComponent,
+
     SubscribeButtonComponent,
     RemoteSubscribeComponent,
     InstanceFeaturesTableComponent,
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-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/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..ed3cd8dc5
--- /dev/null
+++ b/client/src/app/shared/video-playlist/video-add-to-playlist.component.html
@@ -0,0 +1,74 @@
+<div class="header">
+  <div class="first-row">
+    <div i18n class="title">Save to</div>
+
+    <div i18n class="options" (click)="displayOptions = !displayOptions">
+      <my-global-icon iconName="cog"></my-global-icon>
+
+      Options
+    </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"></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 new playlist
+</div>
+
+<form class="new-playlist-block dropdown-item" *ngIf="isNewPlaylistBlockOpened" (ngSubmit)="createPlaylist()" [formGroup]="form">
+  <div class="form-group">
+    <label i18n for="display-name">Display name</label>
+    <input
+      type="text" id="display-name"
+      formControlName="display-name" [ngClass]="{ 'input-error': formErrors['display-name'] }"
+    >
+    <div *ngIf="formErrors['display-name']" class="form-error">
+      {{ formErrors['display-name'] }}
+    </div>
+  </div>
+
+  <input type="submit" i18n-value value="Create" [disabled]="!form.valid">
+</form>
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..68dcda1eb
--- /dev/null
+++ b/client/src/app/shared/video-playlist/video-add-to-playlist.component.scss
@@ -0,0 +1,98 @@
+@import '_variables';
+@import '_mixins';
+
+.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 {
+      font-size: 14px;
+      cursor: pointer;
+
+      my-global-icon {
+        @include apply-svg-color(#333);
+
+        width: 16px;
+        height: 16px;
+      }
+    }
+  }
+
+  .options-row {
+    margin-top: 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..c6fb6dbed
--- /dev/null
+++ b/client/src/app/shared/video-playlist/video-add-to-playlist.component.ts
@@ -0,0 +1,195 @@
+import { 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, timeToInt } 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'
+})
+export class VideoAddToPlaylistComponent extends FormReactive implements OnInit {
+  @Input() video: Video
+  @Input() currentVideoTimestamp: number
+
+  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
+  ) {
+    super()
+  }
+
+  get user () {
+    return this.authService.getUser()
+  }
+
+  ngOnInit () {
+    this.resetOptions(true)
+
+    this.buildForm({
+      'display-name': this.videoPlaylistValidatorsService.VIDEO_PLAYLIST_DISPLAY_NAME
+    })
+
+    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
+            })
+          }
+        }
+      )
+  }
+
+  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()
+  }
+
+  createPlaylist () {
+    const displayName = this.form.value[ 'display-name' ]
+
+    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
+      },
+
+      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
+          }
+        )
+  }
+
+  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
+        }
+      )
+  }
+}
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
index 1a39f5fe5..a136f9233 100644
--- a/client/src/app/shared/video-playlist/video-playlist-miniature.component.html
+++ b/client/src/app/shared/video-playlist/video-playlist-miniature.component.html
@@ -1,6 +1,6 @@
-<div class="miniature">
+<div class="miniature" [ngClass]="{ 'no-videos': playlist.videosLength === 0, 'to-manage': toManage }">
   <a
-    [routerLink]="[ '/videos/watch' ]" [attr.title]="playlist.displayName"
+    [routerLink]="getPlaylistUrl()" [attr.title]="playlist.displayName"
     class="miniature-thumbnail"
   >
     <img alt="" [attr.aria-labelledby]="playlist.displayName" [attr.src]="playlist.thumbnailUrl" />
@@ -15,7 +15,7 @@
   </a>
 
   <div class="miniature-bottom">
-    <a tabindex="-1" class="miniature-name" [routerLink]="[ '/videos/watch' ]" [attr.title]="playlist.displayName">
+    <a tabindex="-1" class="miniature-name" [routerLink]="getPlaylistUrl()" [attr.title]="playlist.displayName">
       {{ playlist.displayName }}
     </a>
   </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
index a47206577..f8cd47f73 100644
--- a/client/src/app/shared/video-playlist/video-playlist-miniature.component.scss
+++ b/client/src/app/shared/video-playlist/video-playlist-miniature.component.scss
@@ -5,6 +5,17 @@
 .miniature {
   display: inline-block;
 
+  &.no-videos:not(.to-manage){
+    a {
+      cursor: default !important;
+    }
+  }
+
+  &.to-manage .play-overlay,
+  &.no-videos {
+    display: none;
+  }
+
   .miniature-thumbnail {
     @include miniature-thumbnail;
 
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
index b3bba7c87..cb5803400 100644
--- a/client/src/app/shared/video-playlist/video-playlist-miniature.component.ts
+++ b/client/src/app/shared/video-playlist/video-playlist-miniature.component.ts
@@ -8,4 +8,12 @@ import { VideoPlaylist } from '@app/shared/video-playlist/video-playlist.model'
 })
 export class VideoPlaylistMiniatureComponent {
   @Input() playlist: VideoPlaylist
+  @Input() toManage = 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
index 9d0b02789..ec8013e89 100644
--- a/client/src/app/shared/video-playlist/video-playlist.model.ts
+++ b/client/src/app/shared/video-playlist/video-playlist.model.ts
@@ -46,6 +46,7 @@ export class VideoPlaylist implements ServerVideoPlaylist {
     this.isLocal = hash.isLocal
 
     this.displayName = hash.displayName
+
     this.description = hash.description
     this.privacy = hash.privacy
 
@@ -70,5 +71,9 @@ export class VideoPlaylist implements ServerVideoPlaylist {
     }
 
     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
index 8b66e122c..f7b37f83a 100644
--- a/client/src/app/shared/video-playlist/video-playlist.service.ts
+++ b/client/src/app/shared/video-playlist/video-playlist.service.ts
@@ -1,9 +1,9 @@
-import { catchError, map, switchMap } from 'rxjs/operators'
+import { bufferTime, catchError, filter, first, map, share, switchMap } from 'rxjs/operators'
 import { Injectable } from '@angular/core'
-import { Observable } from 'rxjs'
+import { Observable, ReplaySubject, Subject } from 'rxjs'
 import { RestExtractor } from '../rest/rest-extractor.service'
-import { HttpClient } from '@angular/common/http'
-import { ResultList } from '../../../../../shared'
+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'
@@ -15,16 +15,31 @@ 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'
 
 @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 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'
@@ -36,10 +51,13 @@ export class VideoPlaylistService {
                )
   }
 
-  listAccountPlaylists (account: Account): Observable<ResultList<VideoPlaylist>> {
+  listAccountPlaylists (account: Account, sort: string): Observable<ResultList<VideoPlaylist>> {
     const url = AccountService.BASE_ACCOUNT_URL + account.nameWithHost + '/video-playlists'
 
-    return this.authHttp.get<ResultList<VideoPlaylist>>(url)
+    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))
@@ -59,9 +77,8 @@ export class VideoPlaylistService {
   createVideoPlaylist (body: VideoPlaylistCreate) {
     const data = objectToFormData(body)
 
-    return this.authHttp.post(VideoPlaylistService.BASE_VIDEO_PLAYLIST_URL, data)
+    return this.authHttp.post<{ videoPlaylist: { id: number } }>(VideoPlaylistService.BASE_VIDEO_PLAYLIST_URL, data)
                .pipe(
-                 map(this.restExtractor.extractDataBool),
                  catchError(err => this.restExtractor.handleError(err))
                )
   }
@@ -84,6 +101,36 @@ export class VideoPlaylistService {
                )
   }
 
+  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))
+               )
+  }
+
+  doesVideoExistInPlaylist (videoId: number) {
+    this.videoExistsInPlaylistSubject.next(videoId)
+
+    return this.videoExistsInPlaylistObservable.pipe(first())
+  }
+
   extractPlaylists (result: ResultList<VideoPlaylistServerModel>) {
     return this.serverService.localeObservable
                .pipe(
@@ -105,4 +152,14 @@ export class VideoPlaylistService {
     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/video.service.ts b/client/src/app/shared/video/video.service.ts
index 960846e21..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 (
@@ -170,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