add ...playlist.elements.loaded hook (#4387)

* client: add ...playlist.elements.loaded hook

closes #4385

* fix linting error

* client: add playlist metadata to video-watch hooks

* Prefer using a filter for playlist elements hook

Co-authored-by: Chocobozzz <me@florianbigard.com>

client/src/app/+my-library/my-video-playlists/my-video-playlist-elements.component.ts

@@ -155,7 +155,7 @@ export class MyVideoPlaylistElementsComponent implements OnInit, OnDestroy {
   }
 
   private loadElements () {
-    this.videoPlaylistService.getPlaylistVideos(this.videoPlaylistId, this.pagination)
+    this.videoPlaylistService.getPlaylistVideos({ videoPlaylistId: this.videoPlaylistId, componentPagination: this.pagination })
         .subscribe(({ total, data }) => {
           this.playlistElements = this.playlistElements.concat(data)
           this.pagination.totalItems = total

client/src/app/+videos/+video-watch/shared/playlist/video-watch-playlist.component.ts

@@ -1,6 +1,14 @@
 import { Component, EventEmitter, Input, Output } from '@angular/core'
 import { Router } from '@angular/router'
-import { AuthService, ComponentPagination, LocalStorageService, Notifier, SessionStorageService, UserService } from '@app/core'
+import {
+  AuthService,
+  ComponentPagination,
+  HooksService,
+  LocalStorageService,
+  Notifier,
+  SessionStorageService,
+  UserService
+} from '@app/core'
 import { VideoPlaylist, VideoPlaylistElement, VideoPlaylistService } from '@app/shared/shared-video-playlist'
 import { peertubeLocalStorage, peertubeSessionStorage } from '@root-helpers/peertube-web-storage'
 import { VideoPlaylistPrivacy } from '@shared/models'
@@ -34,6 +42,7 @@ export class VideoWatchPlaylistComponent {
   currentPlaylistPosition: number
 
   constructor (
+    private hooks: HooksService,
     private userService: UserService,
     private auth: AuthService,
     private notifier: Notifier,
@@ -87,31 +96,38 @@ export class VideoWatchPlaylistComponent {
   }
 
   loadPlaylistElements (playlist: VideoPlaylist, redirectToFirst = false, position?: number) {
-    this.videoPlaylist.getPlaylistVideos(playlist.uuid, this.playlistPagination)
+    const obs = this.hooks.wrapObsFun(
-        .subscribe(({ total, data }) => {
+      this.videoPlaylist.getPlaylistVideos.bind(this.videoPlaylist),
-          this.playlistElements = this.playlistElements.concat(data)
+      { videoPlaylistId: playlist.uuid, componentPagination: this.playlistPagination },
-          this.playlistPagination.totalItems = total
+      'video-watch',
+      'filter:api.video-watch.video-playlist-elements.get.params',
+      'filter:api.video-watch.video-playlist-elements.get.result'
+    )
 
-          const firstAvailableVideo = this.playlistElements.find(e => !!e.video)
+    obs.subscribe(({ total, data: playlistElements }) => {
-          if (!firstAvailableVideo) {
+      this.playlistElements = this.playlistElements.concat(playlistElements)
-            this.noPlaylistVideos = true
+      this.playlistPagination.totalItems = total
-            return
-          }
 
-          if (position) this.updatePlaylistIndex(position)
+      const firstAvailableVideo = this.playlistElements.find(e => !!e.video)
+      if (!firstAvailableVideo) {
+        this.noPlaylistVideos = true
+        return
+      }
 
-          if (redirectToFirst) {
+      if (position) this.updatePlaylistIndex(position)
-            const extras = {
+
-              queryParams: {
+      if (redirectToFirst) {
-                start: firstAvailableVideo.startTimestamp,
+        const extras = {
-                stop: firstAvailableVideo.stopTimestamp,
+          queryParams: {
-                playlistPosition: firstAvailableVideo.position
+            start: firstAvailableVideo.startTimestamp,
-              },
+            stop: firstAvailableVideo.stopTimestamp,
-              replaceUrl: true
+            playlistPosition: firstAvailableVideo.position
-            }
+          },
-            this.router.navigate([], extras)
+          replaceUrl: true
-          }
+        }
-        })
+        this.router.navigate([], extras)
+      }
+    })
   }
 
   updatePlaylistIndex (position: number) {

client/src/app/+videos/+video-watch/video-watch.component.ts

@@ -455,7 +455,13 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
         this.zone.run(() => this.theaterEnabled = enabled)
       })
 
-      this.hooks.runAction('action:video-watch.player.loaded', 'video-watch', { player: this.player, videojs, video: this.video })
+      this.hooks.runAction('action:video-watch.player.loaded', 'video-watch', {
+        player: this.player,
+        playlist: this.playlist,
+        playlistPosition: this.playlistPosition,
+        videojs,
+        video: this.video
+      })
     })
   }
 

client/src/app/shared/shared-video-playlist/video-playlist.service.ts

@@ -256,12 +256,12 @@ export class VideoPlaylistService {
                )
   }
 
-  getPlaylistVideos (
+  getPlaylistVideos (options: {
-    videoPlaylistId: number | string,
+    videoPlaylistId: number | string
     componentPagination: ComponentPaginationLight
-  ): Observable<ResultList<VideoPlaylistElement>> {
+  }): Observable<ResultList<VideoPlaylistElement>> {
-    const path = VideoPlaylistService.BASE_VIDEO_PLAYLIST_URL + videoPlaylistId + '/videos'
+    const path = VideoPlaylistService.BASE_VIDEO_PLAYLIST_URL + options.videoPlaylistId + '/videos'
-    const pagination = this.restService.componentPaginationToRestPagination(componentPagination)
+    const pagination = this.restService.componentPaginationToRestPagination(options.componentPagination)
 
     let params = new HttpParams()
     params = this.restService.addRestGetParams(params, pagination)

shared/models/plugins/client/client-hook.model.ts

@@ -26,6 +26,10 @@ export const clientFilterHookObject = {
   'filter:api.video-watch.video.get.params': true,
   'filter:api.video-watch.video.get.result': true,
 
+  // Filter params/result of the function that fetch video playlist elements of the video-watch page
+  'filter:api.video-watch.video-playlist-elements.get.params': true,
+  'filter:api.video-watch.video-playlist-elements.get.result': true,
+
   // Filter params/result of the function that fetch the threads of the video-watch page
   'filter:api.video-watch.video-threads.list.params': true,
   'filter:api.video-watch.video-threads.list.result': true,