Add search bars for a user's videos and playlist library

3 files changed, 35 insertions, 5 deletions

diff --git a/client/src/app/+my-account/my-account-videos/my-account-videos.component.html b/client/src/app/+my-account/my-account-videos/my-account-videos.component.html
index 2854093c4..a898cd938 100644
--- a/client/src/app/+my-account/my-account-videos/my-account-videos.component.html
+++ b/client/src/app/+my-account/my-account-videos/my-account-videos.component.html
@@ -1,3 +1,7 @@
+<div class="videos-header">
+  <input type="text" placeholder="Search your videos" i18n-placeholder [(ngModel)]="videosSearch" (ngModelChange)="onVideosSearchChanged()" />
+</div>
+
 <my-videos-selection
   [pagination]="pagination"
   [(selection)]="selection"
diff --git a/client/src/app/+my-account/my-account-videos/my-account-videos.component.scss b/client/src/app/+my-account/my-account-videos/my-account-videos.component.scss
index 87398e7c8..44545b3e1 100644
--- a/client/src/app/+my-account/my-account-videos/my-account-videos.component.scss
+++ b/client/src/app/+my-account/my-account-videos/my-account-videos.component.scss
@@ -1,6 +1,17 @@
 @import '_variables';
 @import '_mixins';
 
+.videos-header {
+  display: flex;
+  justify-content: space-between;
+  text-align: right;
+  margin: 20px 0 50px;
+
+  input[type=text] {
+    @include peertube-input-text(300px);
+  }
+}
+
 .action-button-delete-selection {
   display: inline-block;
 
diff --git a/client/src/app/+my-account/my-account-videos/my-account-videos.component.ts b/client/src/app/+my-account/my-account-videos/my-account-videos.component.ts
index 2c86a3c56..dd4b25d08 100644
--- a/client/src/app/+my-account/my-account-videos/my-account-videos.component.ts
+++ b/client/src/app/+my-account/my-account-videos/my-account-videos.component.ts
@@ -1,6 +1,6 @@
-import { concat, Observable } from 'rxjs'
-import { tap, toArray } from 'rxjs/operators'
-import { Component, ViewChild } from '@angular/core'
+import { concat, Observable, Subject } from 'rxjs'
+import { tap, toArray, debounceTime } from 'rxjs/operators'
+import { Component, ViewChild, OnInit } from '@angular/core'
 import { ActivatedRoute, Router } from '@angular/router'
 import { immutableAssign } from '@app/shared/misc/utils'
 import { ComponentPagination } from '@app/shared/rest/component-pagination.model'
@@ -22,7 +22,7 @@ import { DisableForReuseHook } from '@app/core/routing/disable-for-reuse-hook'
   templateUrl: './my-account-videos.component.html',
   styleUrls: [ './my-account-videos.component.scss' ]
 })
-export class MyAccountVideosComponent implements DisableForReuseHook {
+export class MyAccountVideosComponent implements OnInit, DisableForReuseHook {
   @ViewChild('videosSelection', { static: true }) videosSelection: VideosSelectionComponent
   @ViewChild('videoChangeOwnershipModal', { static: true }) videoChangeOwnershipModal: VideoChangeOwnershipComponent
 
@@ -43,6 +43,8 @@ export class MyAccountVideosComponent implements DisableForReuseHook {
     blacklistInfo: true
   }
   videos: Video[] = []
+  videosSearch: string
+  videosSearchChanged = new Subject<string>()
   getVideosObservableFunction = this.getVideosObservable.bind(this)
 
   constructor (
@@ -59,6 +61,19 @@ export class MyAccountVideosComponent implements DisableForReuseHook {
     this.titlePage = this.i18n('My videos')
   }
 
+  ngOnInit () {
+    this.videosSearchChanged
+      .pipe(
+        debounceTime(500))
+      .subscribe(() => {
+        this.videosSelection.reloadVideos()
+      })
+  }
+
+  onVideosSearchChanged () {
+    this.videosSearchChanged.next()
+  }
+
   disableForReuse () {
     this.videosSelection.disableForReuse()
   }
@@ -70,7 +85,7 @@ export class MyAccountVideosComponent implements DisableForReuseHook {
   getVideosObservable (page: number, sort: VideoSortField) {
     const newPagination = immutableAssign(this.pagination, { currentPage: page })
 
-    return this.videoService.getMyVideos(newPagination, sort)
+    return this.videoService.getMyVideos(newPagination, sort, this.videosSearch)
   }
 
   async deleteSelectedVideos () {