Allow user to search through their watch history (#3576)

* allow user to search through their watch history

* add tests for search in watch history

* Update client/src/app/shared/shared-main/users/user-history.service.ts

4 files changed, 56 insertions, 9 deletions

diff --git a/client/src/app/+my-library/my-history/my-history.component.html b/client/src/app/+my-library/my-history/my-history.component.html
index 58b874ebf..c180161e7 100644
--- a/client/src/app/+my-library/my-history/my-history.component.html
+++ b/client/src/app/+my-library/my-history/my-history.component.html
@@ -1,12 +1,23 @@
 <h1>
   <my-global-icon iconName="history" aria-hidden="true"></my-global-icon>
-  <ng-container i18n>My history</ng-container>
+  <ng-container i18n>My watch history</ng-container> <span class="badge badge-secondary">{{ pagination.totalItems }}</span>
 </h1>
 
 <div class="top-buttons">
-  <div class="history-switch">
+  <div>
+    <div class="input-group has-feedback has-clear">
+      <input
+        type="text" name="history-search" id="history-search" i18n-placeholder placeholder="Search your history"
+        (keyup)="onSearch($event)"
+      >
+      <a class="glyphicon glyphicon-remove-sign form-control-feedback form-control-clear" (click)="resetSearch()"></a>
+      <span class="sr-only" i18n>Clear filters</span>
+    </div>
+  </div>
+
+  <div class="history-switch ml-auto mr-3">
     <my-input-switch [(ngModel)]="videosHistoryEnabled" (ngModelChange)="onVideosHistoryChange()"></my-input-switch>
-    <label i18n>Video history</label>
+    <label i18n>Track watch history</label>
   </div>
 
   <button class="delete-history" (click)="deleteHistory()" i18n>
@@ -16,7 +27,7 @@
 </div>
 
 
-<div class="no-history" i18n *ngIf="hasDoneFirstQuery && videos.length === 0">You don't have any video history yet.</div>
+<div class="no-history" i18n *ngIf="hasDoneFirstQuery && videos.length === 0">You don't have any video in your watch history yet.</div>
 
 <div myInfiniteScroller (nearOfBottom)="onNearOfBottom()" [autoInit]="true" [dataObservable]="onDataSubject.asObservable()" class="videos">
   <div class="video" *ngFor="let video of videos">
diff --git a/client/src/app/+my-library/my-history/my-history.component.scss b/client/src/app/+my-library/my-history/my-history.component.scss
index 9eeeaf310..928a8a3da 100644
--- a/client/src/app/+my-library/my-history/my-history.component.scss
+++ b/client/src/app/+my-library/my-history/my-history.component.scss
@@ -10,17 +10,23 @@
 }
 
 .top-buttons {
-  margin-bottom: 20px;
+  margin-bottom: 30px;
   display: flex;
   align-items: center;
   flex-wrap: wrap;
 
+  #history-search {
+    @include peertube-input-text(250px);
+  }
+
   .history-switch {
     display: flex;
-    flex-grow: 1;
 
     label {
       margin: 0 0 0 5px;
+      color: var(--greyForegroundColor);
+      font-size: 15px;
+      font-weight: $font-semibold;
     }
   }
 
diff --git a/client/src/app/+my-library/my-history/my-history.component.ts b/client/src/app/+my-library/my-history/my-history.component.ts
index 4ba95124d..0c8e4b83f 100644
--- a/client/src/app/+my-library/my-history/my-history.component.ts
+++ b/client/src/app/+my-library/my-history/my-history.component.ts
@@ -13,6 +13,8 @@ import {
 import { immutableAssign } from '@app/helpers'
 import { UserHistoryService } from '@app/shared/shared-main'
 import { AbstractVideoList } from '@app/shared/shared-video-miniature'
+import { Subject } from 'rxjs'
+import { debounceTime, tap, distinctUntilChanged } from 'rxjs/operators'
 
 @Component({
   templateUrl: './my-history.component.html',
@@ -26,6 +28,9 @@ export class MyHistoryComponent extends AbstractVideoList implements OnInit, OnD
     totalItems: null
   }
   videosHistoryEnabled: boolean
+  search: string
+
+  protected searchStream: Subject<string>
 
   constructor (
     protected router: Router,
@@ -41,7 +46,7 @@ export class MyHistoryComponent extends AbstractVideoList implements OnInit, OnD
   ) {
     super()
 
-    this.titlePage = $localize`My videos history`
+    this.titlePage = $localize`My watch history`
   }
 
   ngOnInit () {
@@ -52,6 +57,28 @@ export class MyHistoryComponent extends AbstractVideoList implements OnInit, OnD
         this.videosHistoryEnabled = this.authService.getUser().videosHistoryEnabled
       })
 
+    this.searchStream = new Subject()
+
+    this.searchStream
+      .pipe(
+        debounceTime(400),
+        distinctUntilChanged()
+      )
+      .subscribe(search => {
+        this.search = search
+        this.reloadVideos()
+      })
+  }
+
+  onSearch (event: Event) {
+    const target = event.target as HTMLInputElement
+    this.searchStream.next(target.value)
+  }
+
+  resetSearch () {
+    const searchInput = document.getElementById('history-search') as HTMLInputElement
+    searchInput.value = ''
+    this.searchStream.next('')
   }
 
   ngOnDestroy () {
@@ -61,7 +88,10 @@ export class MyHistoryComponent extends AbstractVideoList implements OnInit, OnD
   getVideosObservable (page: number) {
     const newPagination = immutableAssign(this.pagination, { currentPage: page })
 
-    return this.userHistoryService.getUserVideosHistory(newPagination)
+    return this.userHistoryService.getUserVideosHistory(newPagination, this.search)
+      .pipe(
+        tap(res => this.pagination.totalItems = res.total)
+      )
   }
 
   generateSyndicationList () {
diff --git a/client/src/app/+my-library/my-subscriptions/my-subscriptions.component.html b/client/src/app/+my-library/my-subscriptions/my-subscriptions.component.html
index 6ab3826ba..510b400c0 100644
--- a/client/src/app/+my-library/my-subscriptions/my-subscriptions.component.html
+++ b/client/src/app/+my-library/my-subscriptions/my-subscriptions.component.html
@@ -15,7 +15,7 @@
   </div>
 </div>
 
-<div class="no-results" i18n *ngIf="pagination.totalItems === 0">You don't have any subscriptions yet.</div>
+<div class="no-results" i18n *ngIf="pagination.totalItems === 0">You don't have any subscription yet.</div>
 
 <div class="video-channels" myInfiniteScroller [autoInit]="true" (nearOfBottom)="onNearOfBottom()" [dataObservable]="onDataSubject.asObservable()">
   <div *ngFor="let videoChannel of videoChannels" class="video-channel">