3 files changed, 11 insertions, 32 deletions

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 853d47fe6..f91cebacf 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
@@ -7,12 +7,7 @@
 </h1>
 
 <div class="video-subscriptions-header">
-  <div class="has-feedback has-clear">
-    <input type="text" placeholder="Search your subscriptions" i18n-placeholder [(ngModel)]="subscriptionsSearch"
-      (ngModelChange)="onSubscriptionsSearchChanged()" />
-    <a class="glyphicon glyphicon-remove-sign form-control-feedback form-control-clear" (click)="resetSearch()"></a>
-    <span class="sr-only" i18n>Clear filters</span>
-  </div>
+  <my-advanced-input-filter (search)="onSearch($event)"></my-advanced-input-filter>
 </div>
 
 <div class="no-results" i18n *ngIf="pagination.totalItems === 0">You don't have any subscription yet.</div>
diff --git a/client/src/app/+my-library/my-subscriptions/my-subscriptions.component.scss b/client/src/app/+my-library/my-subscriptions/my-subscriptions.component.scss
index 53ceaa250..6c1ddf716 100644
--- a/client/src/app/+my-library/my-subscriptions/my-subscriptions.component.scss
+++ b/client/src/app/+my-library/my-subscriptions/my-subscriptions.component.scss
@@ -58,6 +58,7 @@ input[type=text] {
 
 .video-subscriptions-header {
   margin-bottom: 30px;
+  display: flex;
 }
 
 @media screen and (max-width: $small-view) {
diff --git a/client/src/app/+my-library/my-subscriptions/my-subscriptions.component.ts b/client/src/app/+my-library/my-subscriptions/my-subscriptions.component.ts
index 3b748eccf..1f4a931a0 100644
--- a/client/src/app/+my-library/my-subscriptions/my-subscriptions.component.ts
+++ b/client/src/app/+my-library/my-subscriptions/my-subscriptions.component.ts
@@ -1,6 +1,5 @@
 import { Subject } from 'rxjs'
-import { debounceTime } from 'rxjs/operators'
-import { Component, OnInit } from '@angular/core'
+import { Component } from '@angular/core'
 import { ComponentPagination, Notifier } from '@app/core'
 import { VideoChannel } from '@app/shared/shared-main'
 import { UserSubscriptionService } from '@app/shared/shared-user-subscription'
@@ -9,7 +8,7 @@ import { UserSubscriptionService } from '@app/shared/shared-user-subscription'
   templateUrl: './my-subscriptions.component.html',
   styleUrls: [ './my-subscriptions.component.scss' ]
 })
-export class MySubscriptionsComponent implements OnInit {
+export class MySubscriptionsComponent {
   videoChannels: VideoChannel[] = []
 
   pagination: ComponentPagination = {
@@ -20,34 +19,13 @@ export class MySubscriptionsComponent implements OnInit {
 
   onDataSubject = new Subject<any[]>()
 
-  subscriptionsSearch: string
-  subscriptionsSearchChanged = new Subject<string>()
+  search: string
 
   constructor (
     private userSubscriptionService: UserSubscriptionService,
     private notifier: Notifier
   ) {}
 
-  ngOnInit () {
-    this.loadSubscriptions()
-
-    this.subscriptionsSearchChanged
-      .pipe(debounceTime(500))
-      .subscribe(() => {
-        this.pagination.currentPage = 1
-        this.loadSubscriptions(false)
-      })
-  }
-
-  resetSearch () {
-    this.subscriptionsSearch = ''
-    this.onSubscriptionsSearchChanged()
-  }
-
-  onSubscriptionsSearchChanged () {
-    this.subscriptionsSearchChanged.next()
-  }
-
   onNearOfBottom () {
     // Last page
     if (this.pagination.totalItems <= (this.pagination.currentPage * this.pagination.itemsPerPage)) return
@@ -56,8 +34,13 @@ export class MySubscriptionsComponent implements OnInit {
     this.loadSubscriptions()
   }
 
+  onSearch (search: string) {
+    this.search = search
+    this.loadSubscriptions(false)
+  }
+
   private loadSubscriptions (more = true) {
-    this.userSubscriptionService.listSubscriptions({ pagination: this.pagination, search: this.subscriptionsSearch })
+    this.userSubscriptionService.listSubscriptions({ pagination: this.pagination, search: this.search })
         .subscribe(
           res => {
             this.videoChannels = more