4 files changed, 17 insertions, 4 deletions

diff --git a/client/src/app/+my-library/my-video-playlists/my-video-playlist-elements.component.ts b/client/src/app/+my-library/my-video-playlists/my-video-playlist-elements.component.ts
index 8fba423c3..c9739b6cc 100644
--- a/client/src/app/+my-library/my-video-playlists/my-video-playlist-elements.component.ts
+++ b/client/src/app/+my-library/my-video-playlists/my-video-playlist-elements.component.ts
@@ -2,7 +2,7 @@ import { Subject, Subscription } from 'rxjs'
 import { CdkDragDrop } from '@angular/cdk/drag-drop'
 import { Component, OnDestroy, OnInit, ViewChild } from '@angular/core'
 import { ActivatedRoute, Router } from '@angular/router'
-import { ComponentPagination, ConfirmService, Notifier, ScreenService } from '@app/core'
+import { ComponentPagination, ConfirmService, HooksService, Notifier, ScreenService } from '@app/core'
 import { DropdownAction } from '@app/shared/shared-main'
 import { VideoShareComponent } from '@app/shared/shared-share-modal'
 import { VideoPlaylist, VideoPlaylistElement, VideoPlaylistService } from '@app/shared/shared-video-playlist'
@@ -32,6 +32,7 @@ export class MyVideoPlaylistElementsComponent implements OnInit, OnDestroy {
   private paramsSub: Subscription
 
   constructor (
+    private hooks: HooksService,
     private notifier: Notifier,
     private router: Router,
     private confirmService: ConfirmService,
@@ -155,7 +156,13 @@ export class MyVideoPlaylistElementsComponent implements OnInit, OnDestroy {
   }
 
   private loadElements () {
-    this.videoPlaylistService.getPlaylistVideos({ videoPlaylistId: this.videoPlaylistId, componentPagination: this.pagination })
+    this.hooks.wrapObsFun(
+      this.videoPlaylistService.getPlaylistVideos.bind(this.videoPlaylistService),
+      { videoPlaylistId: this.videoPlaylistId, componentPagination: this.pagination },
+      'my-library',
+      'filter:api.my-library.video-playlist-elements.list.params',
+      'filter:api.my-library.video-playlist-elements.list.result'
+    )
         .subscribe(({ total, data }) => {
           this.playlistElements = this.playlistElements.concat(data)
           this.pagination.totalItems = total
diff --git a/client/src/root-helpers/plugins-manager.ts b/client/src/root-helpers/plugins-manager.ts
index 61731032a..49a19781b 100644
--- a/client/src/root-helpers/plugins-manager.ts
+++ b/client/src/root-helpers/plugins-manager.ts
@@ -67,7 +67,8 @@ class PluginsManager {
     signup: new ReplaySubject<boolean>(1),
     login: new ReplaySubject<boolean>(1),
     'video-edit': new ReplaySubject<boolean>(1),
-    embed: new ReplaySubject<boolean>(1)
+    embed: new ReplaySubject<boolean>(1),
+    'my-library': new ReplaySubject<boolean>(1)
   }
 
   private readonly peertubeHelpersFactory: PeertubeHelpersFactory
diff --git a/shared/models/plugins/client/client-hook.model.ts b/shared/models/plugins/client/client-hook.model.ts
index 04d42d591..466be8946 100644
--- a/shared/models/plugins/client/client-hook.model.ts
+++ b/shared/models/plugins/client/client-hook.model.ts
@@ -51,6 +51,10 @@ export const clientFilterHookObject = {
   // Filter form
   'filter:api.signup.registration.create.params': true,
 
+  // Filter params/result of the function that fetch video playlist elements of the my-library page
+  'filter:api.my-library.video-playlist-elements.list.params': true,
+  'filter:api.my-library.video-playlist-elements.list.result': true,
+
   // Filter the options to create our player
   'filter:internal.video-watch.player.build-options.params': true,
   'filter:internal.video-watch.player.build-options.result': true,
diff --git a/shared/models/plugins/client/plugin-client-scope.type.ts b/shared/models/plugins/client/plugin-client-scope.type.ts
index 8cc234ff2..92734533d 100644
--- a/shared/models/plugins/client/plugin-client-scope.type.ts
+++ b/shared/models/plugins/client/plugin-client-scope.type.ts
@@ -6,4 +6,5 @@ export type PluginClientScope =
   'login' |
   'embed' |
   'video-edit' |
-  'admin-plugin'
+  'admin-plugin' |
+  'my-library'