Add video filters to common video pages

3 files changed, 29 insertions, 39 deletions

diff --git a/client/src/app/shared/shared-main/misc/simple-search-input.component.html b/client/src/app/shared/shared-main/misc/simple-search-input.component.html
index c20c02e23..1e2f6c6a9 100644
--- a/client/src/app/shared/shared-main/misc/simple-search-input.component.html
+++ b/client/src/app/shared/shared-main/misc/simple-search-input.component.html
@@ -1,13 +1,18 @@
 <div class="root">
-  <input
-    #ref
-    type="text"
-    [(ngModel)]="value"
-    (keyup.enter)="searchChange()"
-    [hidden]="!inputShown"
-    [name]="name"
-    [placeholder]="placeholder"
-  >
+  <div class="input-group has-feedback has-clear">
+    <input
+      #ref
+      type="text"
+      [(ngModel)]="value"
+      (keyup.enter)="sendSearch()"
+      [hidden]="!inputShown"
+      [name]="name"
+      [placeholder]="placeholder"
+    >
+
+    <a class="glyphicon glyphicon-remove-sign form-control-feedback form-control-clear" (click)="onResetFilter()"></a>
+    <span class="sr-only" i18n>Clear filters</span>
+  </div>
 
   <my-global-icon iconName="search" aria-label="Search" role="button" (click)="onIconClick()" [title]="iconTitle"></my-global-icon>
 
diff --git a/client/src/app/shared/shared-main/misc/simple-search-input.component.scss b/client/src/app/shared/shared-main/misc/simple-search-input.component.scss
index 173204291..d5fcff760 100644
--- a/client/src/app/shared/shared-main/misc/simple-search-input.component.scss
+++ b/client/src/app/shared/shared-main/misc/simple-search-input.component.scss
@@ -11,20 +11,17 @@ my-global-icon {
   height: 28px;
   width: 28px;
   cursor: pointer;
+  color: pvar(--mainColor);
 
   &:hover {
     color: pvar(--mainHoverColor);
   }
-
-  &[iconName=search] {
-    color: pvar(--mainForegroundColor);
-  }
-
-  &[iconName=cross] {
-    color: pvar(--mainForegroundColor);
-  }
 }
 
 input {
   @include peertube-input-text(200px);
+
+  &:focus {
+    box-shadow: 0 0 5px 0 #a5a5a5;
+  }
 }
diff --git a/client/src/app/shared/shared-main/misc/simple-search-input.component.ts b/client/src/app/shared/shared-main/misc/simple-search-input.component.ts
index 292ec4c82..99abb94e7 100644
--- a/client/src/app/shared/shared-main/misc/simple-search-input.component.ts
+++ b/client/src/app/shared/shared-main/misc/simple-search-input.component.ts
@@ -1,7 +1,4 @@
-import { Subject } from 'rxjs'
-import { debounceTime, distinctUntilChanged } from 'rxjs/operators'
 import { Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core'
-import { ActivatedRoute, Router } from '@angular/router'
 
 @Component({
   selector: 'my-simple-search-input',
@@ -22,23 +19,9 @@ export class SimpleSearchInputComponent implements OnInit {
   value = ''
   inputShown: boolean
 
-  private searchSubject = new Subject<string>()
-
-  constructor (
-    private router: Router,
-    private route: ActivatedRoute
-  ) {}
+  private hasAlreadySentSearch = false
 
   ngOnInit () {
-    this.searchSubject
-        .pipe(
-          debounceTime(400),
-          distinctUntilChanged()
-        )
-        .subscribe(value => this.searchChanged.emit(value))
-
-    this.searchSubject.next(this.value)
-
     if (this.isInputShown()) this.showInput(false)
   }
 
@@ -54,7 +37,7 @@ export class SimpleSearchInputComponent implements OnInit {
       return
     }
 
-    this.searchChange()
+    this.sendSearch()
   }
 
   showInput (focus = true) {
@@ -80,9 +63,14 @@ export class SimpleSearchInputComponent implements OnInit {
     this.hideInput()
   }
 
-  searchChange () {
-    this.router.navigate([ './search' ], { relativeTo: this.route })
+  sendSearch () {
+    this.hasAlreadySentSearch = true
+    this.searchChanged.emit(this.value)
+  }
+
+  onResetFilter () {
+    this.value = ''
 
-    this.searchSubject.next(this.value)
+    if (this.hasAlreadySentSearch) this.sendSearch()
   }
 }