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>

2 files changed, 49 insertions, 27 deletions

diff --git a/client/src/app/+videos/+video-watch/shared/playlist/video-watch-playlist.component.ts b/client/src/app/+videos/+video-watch/shared/playlist/video-watch-playlist.component.ts
index 78b3af4a7..b2863fed6 100644
--- a/client/src/app/+videos/+video-watch/shared/playlist/video-watch-playlist.component.ts
+++ b/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)
-        .subscribe(({ total, data }) => {
-          this.playlistElements = this.playlistElements.concat(data)
-          this.playlistPagination.totalItems = total
-
-          const firstAvailableVideo = this.playlistElements.find(e => !!e.video)
-          if (!firstAvailableVideo) {
-            this.noPlaylistVideos = true
-            return
-          }
-
-          if (position) this.updatePlaylistIndex(position)
-
-          if (redirectToFirst) {
-            const extras = {
-              queryParams: {
-                start: firstAvailableVideo.startTimestamp,
-                stop: firstAvailableVideo.stopTimestamp,
-                playlistPosition: firstAvailableVideo.position
-              },
-              replaceUrl: true
-            }
-            this.router.navigate([], extras)
-          }
-        })
+    const obs = this.hooks.wrapObsFun(
+      this.videoPlaylist.getPlaylistVideos.bind(this.videoPlaylist),
+      { videoPlaylistId: playlist.uuid, componentPagination: this.playlistPagination },
+      'video-watch',
+      'filter:api.video-watch.video-playlist-elements.get.params',
+      'filter:api.video-watch.video-playlist-elements.get.result'
+    )
+
+    obs.subscribe(({ total, data: playlistElements }) => {
+      this.playlistElements = this.playlistElements.concat(playlistElements)
+      this.playlistPagination.totalItems = total
+
+      const firstAvailableVideo = this.playlistElements.find(e => !!e.video)
+      if (!firstAvailableVideo) {
+        this.noPlaylistVideos = true
+        return
+      }
+
+      if (position) this.updatePlaylistIndex(position)
+
+      if (redirectToFirst) {
+        const extras = {
+          queryParams: {
+            start: firstAvailableVideo.startTimestamp,
+            stop: firstAvailableVideo.stopTimestamp,
+            playlistPosition: firstAvailableVideo.position
+          },
+          replaceUrl: true
+        }
+        this.router.navigate([], extras)
+      }
+    })
   }
 
   updatePlaylistIndex (position: number) {
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 acfd46a41..f0d159be3 100644
--- a/client/src/app/+videos/+video-watch/video-watch.component.ts
+++ b/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
+      })
     })
   }