Move watch later logic in miniature

[github/Chocobozzz/PeerTube.git] / client / src / app / shared / video-playlist / video-add-to-playlist.component.ts

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
index 152f20c856014e3754ce333020daded6ef84d5bb..25ba8cbcaa1d4ab0dfae993aff0e2f0e4975b59b 100644 (file)
--- 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
@@ -1,7 +1,8 @@
-import { Component, Input, OnInit } from '@angular/core'
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core'
 import { VideoPlaylistService } from '@app/shared/video-playlist/video-playlist.service'
 import { AuthService, Notifier } from '@app/core'
-import { forkJoin } from 'rxjs'
+import { forkJoin, Subject } from 'rxjs'
+import { debounceTime } from 'rxjs/operators'
 import { Video, VideoPlaylistCreate, VideoPlaylistElementCreate, VideoPlaylistPrivacy } from '@shared/models'
 import { FormReactive, FormValidatorService, VideoPlaylistValidatorsService } from '@app/shared/forms'
 import { I18n } from '@ngx-translate/i18n-polyfill'
@@ -12,6 +13,7 @@ type PlaylistSummary = {
   inPlaylist: boolean
   displayName: string
 
+  playlistElementId?: number
   startTimestamp?: number
   stopTimestamp?: number
 }
@@ -19,14 +21,17 @@ type PlaylistSummary = {
 @Component({
   selector: 'my-video-add-to-playlist',
   styleUrls: [ './video-add-to-playlist.component.scss' ],
-  templateUrl: './video-add-to-playlist.component.html'
+  templateUrl: './video-add-to-playlist.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class VideoAddToPlaylistComponent extends FormReactive implements OnInit {
+export class VideoAddToPlaylistComponent extends FormReactive implements OnInit, OnChanges {
   @Input() video: Video
   @Input() currentVideoTimestamp: number
   @Input() lazyLoad = false
 
   isNewPlaylistBlockOpened = false
+  videoPlaylistSearch: string
+  videoPlaylistSearchChanged = new Subject<string>()
   videoPlaylists: PlaylistSummary[] = []
   timestampOptions: {
     startTimestampEnabled: boolean
@@ -42,7 +47,8 @@ export class VideoAddToPlaylistComponent extends FormReactive implements OnInit
     private notifier: Notifier,
     private i18n: I18n,
     private videoPlaylistService: VideoPlaylistService,
-    private videoPlaylistValidatorsService: VideoPlaylistValidatorsService
+    private videoPlaylistValidatorsService: VideoPlaylistValidatorsService,
+    private cd: ChangeDetectorRef
   ) {
     super()
   }
@@ -52,22 +58,47 @@ export class VideoAddToPlaylistComponent extends FormReactive implements OnInit
   }
 
   ngOnInit () {
-    this.resetOptions(true)
-
     this.buildForm({
       displayName: this.videoPlaylistValidatorsService.VIDEO_PLAYLIST_DISPLAY_NAME
     })
 
+    this.videoPlaylistSearchChanged
+      .pipe(
+        debounceTime(500))
+      .subscribe(() => {
+        this.load()
+      })
+  }
+
+  ngOnChanges (simpleChanges: SimpleChanges) {
+    if (simpleChanges['video']) {
+      this.reload()
+    }
+  }
+
+  init () {
+    this.resetOptions(true)
+
     if (this.lazyLoad !== true) this.load()
   }
 
+  reload () {
+    this.videoPlaylists = []
+    this.videoPlaylistSearch = undefined
+
+    this.init()
+
+    this.cd.markForCheck()
+  }
+
   load () {
     forkJoin([
-      this.videoPlaylistService.listAccountPlaylists(this.user.account, '-updatedAt'),
+      this.videoPlaylistService.listAccountPlaylists(this.user.account, undefined, '-updatedAt', this.videoPlaylistSearch),
       this.videoPlaylistService.doesVideoExistInPlaylist(this.video.id)
     ])
       .subscribe(
         ([ playlistsResult, existResult ]) => {
+          this.videoPlaylists = []
           for (const playlist of playlistsResult.data) {
             const existingPlaylist = existResult[ this.video.id ].find(p => p.playlistId === playlist.id)
 
@@ -75,10 +106,13 @@ export class VideoAddToPlaylistComponent extends FormReactive implements OnInit
               id: playlist.id,
               displayName: playlist.displayName,
               inPlaylist: !!existingPlaylist,
+              playlistElementId:  existingPlaylist ? existingPlaylist.playlistElementId : undefined,
               startTimestamp: existingPlaylist ? existingPlaylist.startTimestamp : undefined,
               stopTimestamp: existingPlaylist ? existingPlaylist.stopTimestamp : undefined
             })
           }
+
+          this.cd.markForCheck()
         }
       )
   }
@@ -107,6 +141,8 @@ export class VideoAddToPlaylistComponent extends FormReactive implements OnInit
 
     playlist.inPlaylist = !playlist.inPlaylist
     this.resetOptions()
+
+    this.cd.markForCheck()
   }
 
   createPlaylist () {
@@ -126,6 +162,8 @@ export class VideoAddToPlaylistComponent extends FormReactive implements OnInit
         })
 
         this.isNewPlaylistBlockOpened = false
+
+        this.cd.markForCheck()
       },
 
       err => this.notifier.error(err.message)
@@ -152,20 +190,29 @@ export class VideoAddToPlaylistComponent extends FormReactive implements OnInit
     return `(${start}-${stop})`
   }
 
+  onVideoPlaylistSearchChanged () {
+    this.videoPlaylistSearchChanged.next()
+  }
+
   private removeVideoFromPlaylist (playlist: PlaylistSummary) {
-    this.videoPlaylistService.removeVideoFromPlaylist(playlist.id, this.video.id)
+    if (!playlist.playlistElementId) return
+
+    this.videoPlaylistService.removeVideoFromPlaylist(playlist.id, playlist.playlistElementId)
         .subscribe(
           () => {
             this.notifier.success(this.i18n('Video removed from {{name}}', { name: playlist.displayName }))
 
             playlist.inPlaylist = false
+            playlist.playlistElementId = undefined
           },
 
           err => {
             this.notifier.error(err.message)
 
             playlist.inPlaylist = true
-          }
+          },
+
+          () => this.cd.markForCheck()
         )
   }
 
@@ -177,8 +224,9 @@ export class VideoAddToPlaylistComponent extends FormReactive implements OnInit
 
     this.videoPlaylistService.addVideoInPlaylist(playlist.id, body)
       .subscribe(
-        () => {
+        res => {
           playlist.inPlaylist = true
+          playlist.playlistElementId = res.videoPlaylistElement.id
 
           playlist.startTimestamp = body.startTimestamp
           playlist.stopTimestamp = body.stopTimestamp
@@ -194,7 +242,9 @@ export class VideoAddToPlaylistComponent extends FormReactive implements OnInit
           this.notifier.error(err.message)
 
           playlist.inPlaylist = false
-        }
+        },
+
+        () => this.cd.markForCheck()
       )
   }
 }