11 files changed, 188 insertions, 31 deletions

diff --git a/client/src/app/shared/shared-forms/advanced-input-filter.component.html b/client/src/app/shared/shared-forms/advanced-input-filter.component.html
new file mode 100644
index 000000000..10d1296cf
--- /dev/null
+++ b/client/src/app/shared/shared-forms/advanced-input-filter.component.html
@@ -0,0 +1,24 @@
+<div class="input-group has-feedback has-clear">
+  <div *ngIf="hasFilters()" class="input-group-prepend c-hand" ngbDropdown placement="bottom-left auto" container="body">
+    <div class="input-group-text" ngbDropdownToggle>
+      <span class="caret" aria-haspopup="menu" role="button"></span>
+    </div>
+
+    <div role="menu" ngbDropdownMenu>
+      <h6 class="dropdown-header" i18n>Advanced filters</h6>
+
+      <a *ngFor="let filter of filters" [routerLink]="[ '.' ]" [queryParams]="filter.queryParams" class="dropdown-item">
+        {{ filter.label }}
+      </a>
+    </div>
+  </div>
+
+  <input
+    type="text" name="table-filter" id="table-filter" i18n-placeholder placeholder="Filter..."
+    [(ngModel)]="searchValue"
+    (keyup)="onInputSearch($event)"
+  >
+
+  <a class="glyphicon glyphicon-remove-sign form-control-feedback form-control-clear" (click)="onResetTableFilter()"></a>
+  <span class="sr-only" i18n>Clear filters</span>
+</div>
diff --git a/client/src/app/shared/shared-forms/advanced-input-filter.component.scss b/client/src/app/shared/shared-forms/advanced-input-filter.component.scss
new file mode 100644
index 000000000..7c2198927
--- /dev/null
+++ b/client/src/app/shared/shared-forms/advanced-input-filter.component.scss
@@ -0,0 +1,10 @@
+@import '_variables';
+@import '_mixins';
+
+input {
+  @include peertube-input-text(250px);
+}
+
+.input-group-text {
+  background-color: transparent;
+}
diff --git a/client/src/app/shared/shared-forms/advanced-input-filter.component.ts b/client/src/app/shared/shared-forms/advanced-input-filter.component.ts
new file mode 100644
index 000000000..c11f1ad1d
--- /dev/null
+++ b/client/src/app/shared/shared-forms/advanced-input-filter.component.ts
@@ -0,0 +1,116 @@
+import * as debug from 'debug'
+import { Subject } from 'rxjs'
+import { debounceTime, distinctUntilChanged } from 'rxjs/operators'
+import { AfterViewInit, Component, EventEmitter, Input, OnInit, Output } from '@angular/core'
+import { ActivatedRoute, Params, Router } from '@angular/router'
+
+export type AdvancedInputFilter = {
+  label: string
+  queryParams: Params
+}
+
+const logger = debug('peertube:AdvancedInputFilterComponent')
+
+@Component({
+  selector: 'my-advanced-input-filter',
+  templateUrl: './advanced-input-filter.component.html',
+  styleUrls: [ './advanced-input-filter.component.scss' ]
+})
+export class AdvancedInputFilterComponent implements OnInit, AfterViewInit {
+  @Input() filters: AdvancedInputFilter[] = []
+
+  @Output() search = new EventEmitter<string>()
+
+  searchValue: string
+
+  private searchStream: Subject<string>
+
+  private viewInitialized = false
+  private emitSearchAfterViewInit = false
+
+  constructor (
+    private route: ActivatedRoute,
+    private router: Router
+  ) { }
+
+  ngOnInit () {
+    this.initSearchStream()
+    this.listenToRouteSearchChange()
+  }
+
+  ngAfterViewInit () {
+    this.viewInitialized = true
+
+    // Init after view init to not send an event too early
+    if (this.emitSearchAfterViewInit) this.emitSearch()
+  }
+
+  onInputSearch (event: Event) {
+    this.scheduleSearchUpdate((event.target as HTMLInputElement).value)
+  }
+
+  onResetTableFilter () {
+    this.immediateSearchUpdate('')
+  }
+
+  hasFilters () {
+    return this.filters.length !== 0
+  }
+
+  private scheduleSearchUpdate (value: string) {
+    this.searchValue = value
+    this.searchStream.next(this.searchValue)
+  }
+
+  private immediateSearchUpdate (value: string) {
+    this.searchValue = value
+
+    this.setQueryParams(this.searchValue)
+    this.emitSearch()
+  }
+
+  private listenToRouteSearchChange () {
+    this.route.queryParams
+      .subscribe(params => {
+        const search = params.search || ''
+
+        logger('On route search change "%s".', search)
+
+        this.searchValue = search
+        this.emitSearch()
+      })
+  }
+
+  private initSearchStream () {
+    this.searchStream = new Subject()
+
+    this.searchStream
+      .pipe(
+        debounceTime(300),
+        distinctUntilChanged()
+      )
+      .subscribe(() => {
+        this.setQueryParams(this.searchValue)
+
+        this.emitSearch()
+      })
+  }
+
+  private emitSearch () {
+    if (!this.viewInitialized) {
+      this.emitSearchAfterViewInit = true
+      return
+    }
+
+    logger('On search "%s".', this.searchValue)
+
+    this.search.emit(this.searchValue)
+  }
+
+  private setQueryParams (search: string) {
+    const queryParams: Params = {}
+
+    if (search) Object.assign(queryParams, { search })
+    this.router.navigate([ ], { queryParams })
+  }
+}
diff --git a/client/src/app/shared/shared-forms/index.ts b/client/src/app/shared/shared-forms/index.ts
index 1d859b991..727416a40 100644
--- a/client/src/app/shared/shared-forms/index.ts
+++ b/client/src/app/shared/shared-forms/index.ts
@@ -1,12 +1,14 @@
-export * from './form-validator.service'
+export * from './advanced-input-filter.component'
 export * from './form-reactive'
-export * from './select'
-export * from './input-toggle-hidden.component'
+export * from './form-validator.service'
+export * from './form-validator.service'
 export * from './input-switch.component'
+export * from './input-toggle-hidden.component'
 export * from './markdown-textarea.component'
 export * from './peertube-checkbox.component'
 export * from './preview-upload.component'
 export * from './reactive-file.component'
+export * from './select'
+export * from './shared-form.module'
 export * from './textarea-autoresize.directive'
 export * from './timestamp-input.component'
-export * from './shared-form.module'
diff --git a/client/src/app/shared/shared-forms/input-switch.component.scss b/client/src/app/shared/shared-forms/input-switch.component.scss
index c14950bd7..290a70db8 100644
--- a/client/src/app/shared/shared-forms/input-switch.component.scss
+++ b/client/src/app/shared/shared-forms/input-switch.component.scss
@@ -5,7 +5,7 @@ input {
   position: absolute;
   visibility: hidden;
 
-  & + label {
+  + label {
     cursor: pointer;
     text-indent: -9999px;
     width: 35px;
@@ -16,7 +16,7 @@ input {
     position: relative;
     margin: 0;
 
-    &:after {
+    &::after {
       content: '';
       position: absolute;
       top: 3px;
@@ -28,7 +28,7 @@ input {
       transition: 0.3s ease-out;
     }
 
-    &:active:after {
+    &:active::after {
       width: 40px;
     }
   }
@@ -36,7 +36,7 @@ input {
   &:checked + label {
     background: pvar(--mainColor);
 
-    &:after {
+    &::after {
       left: calc(100% - 3px);
       transform: translateX(-100%);
     }
diff --git a/client/src/app/shared/shared-forms/markdown-textarea.component.scss b/client/src/app/shared/shared-forms/markdown-textarea.component.scss
index 8203c7d1c..1f72dbc32 100644
--- a/client/src/app/shared/shared-forms/markdown-textarea.component.scss
+++ b/client/src/app/shared/shared-forms/markdown-textarea.component.scss
@@ -18,7 +18,7 @@ $input-border-radius: 3px;
 
       font-family: monospace;
       font-size: 13px;
-      border-bottom: none;
+      border-bottom: 0;
       border-bottom-left-radius: unset;
       border-bottom-right-radius: unset;
     }
@@ -51,7 +51,8 @@ $input-border-radius: 3px;
             opacity: 0.6;
           }
 
-          &:hover, &:active {
+          &:hover,
+          &:active {
             svg {
               opacity: 1;
             }
@@ -105,6 +106,8 @@ $input-border-radius: 3px;
 }
 
 @mixin maximized-base {
+  $nav-preview-vertical-padding: 40px;
+
   flex-direction: row;
   z-index: #{z(header) - 1};
   position: fixed;
@@ -115,20 +118,18 @@ $input-border-radius: 3px;
   width: calc(100% - #{$menu-width});
   height: calc(100vh - #{$header-height}) !important;
 
-  $nav-preview-vertical-padding: 40px;
-
   .nav-preview {
     @include nav-preview-medium();
     padding-top: #{$nav-preview-vertical-padding / 2};
     padding-bottom: #{$nav-preview-vertical-padding / 2};
-    padding-left: 0px;
-    padding-right: 0px;
+    padding-left: 0;
+    padding-right: 0;
     position: absolute;
     background-color: pvar(--mainBackgroundColor);
     width: 100% !important;
-    border-top: none;
-    border-left: none;
-    border-right: none;
+    border-top: 0;
+    border-left: 0;
+    border-right: 0;
 
     :last-child {
       margin-right: pvar(--horizontalMarginContent);
@@ -148,7 +149,7 @@ $input-border-radius: 3px;
     margin-top: #{$nav-preview-tab-height + $nav-preview-vertical-padding} !important;
     height: calc(100vh - #{$header-height + $nav-preview-tab-height + $nav-preview-vertical-padding}) !important;
     width: 50% !important;
-    border: none !important;
+    border: 0 !important;
     border-radius: unset !important;
   }
 
@@ -249,11 +250,11 @@ $input-border-radius: 3px;
 }
 
 @media only screen and (min-width: $small-view) {
+  @include maximized-in-medium-view();
+
   :host-context(.expanded) {
     @include in-medium-view();
   }
-
-  @include maximized-in-medium-view();
 }
 
 @media only screen and (min-width: #{$small-view + $menu-width}) {
diff --git a/client/src/app/shared/shared-forms/peertube-checkbox.component.scss b/client/src/app/shared/shared-forms/peertube-checkbox.component.scss
index cf8540dc3..203b82d0b 100644
--- a/client/src/app/shared/shared-forms/peertube-checkbox.component.scss
+++ b/client/src/app/shared/shared-forms/peertube-checkbox.component.scss
@@ -46,7 +46,7 @@
     line-height: 12px;
     font-weight: 500;
     color: pvar(--inputPlaceholderColor);
-    background-color: rgba(217,225,232,.1);
-    border: 1px solid rgba(217,225,232,.5);
+    background-color: rgba(217, 225, 232, .1);
+    border: 1px solid rgba(217, 225, 232, .5);
   }
-}
\ No newline at end of file
+}
diff --git a/client/src/app/shared/shared-forms/preview-upload.component.scss b/client/src/app/shared/shared-forms/preview-upload.component.scss
index 88eccd5f7..c2ee0d6a9 100644
--- a/client/src/app/shared/shared-forms/preview-upload.component.scss
+++ b/client/src/app/shared/shared-forms/preview-upload.component.scss
@@ -21,7 +21,7 @@
       max-width: 100%;
 
       &.no-image {
-        border: 2px solid grey;
+        border: 2px solid #808080;
         background-color: pvar(--mainBackgroundColor);
       }
     }
diff --git a/client/src/app/shared/shared-forms/select/select-shared.component.scss b/client/src/app/shared/shared-forms/select/select-shared.component.scss
index 80196b8df..7006adab1 100644
--- a/client/src/app/shared/shared-forms/select/select-shared.component.scss
+++ b/client/src/app/shared/shared-forms/select/select-shared.component.scss
@@ -32,7 +32,7 @@ ng-select ::ng-deep {
 }
 
 .root {
-  display:flex;
+  display: flex;
   align-items: center;
 
   > my-select-options {
@@ -41,9 +41,9 @@ ng-select ::ng-deep {
 }
 
 my-select-options + input {
-  margin-left: 5px;
-
   @include peertube-input-text($form-base-input-width);
+
+  margin-left: 5px;
   display: block;
 }
 
diff --git a/client/src/app/shared/shared-forms/shared-form.module.ts b/client/src/app/shared/shared-forms/shared-form.module.ts
index 9bdd138a1..5417f7342 100644
--- a/client/src/app/shared/shared-forms/shared-form.module.ts
+++ b/client/src/app/shared/shared-forms/shared-form.module.ts
@@ -5,6 +5,7 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms'
 import { NgSelectModule } from '@ng-select/ng-select'
 import { SharedGlobalIconModule } from '../shared-icons'
 import { SharedMainModule } from '../shared-main/shared-main.module'
+import { AdvancedInputFilterComponent } from './advanced-input-filter.component'
 import { DynamicFormFieldComponent } from './dynamic-form-field.component'
 import { FormValidatorService } from './form-validator.service'
 import { InputSwitchComponent } from './input-switch.component'
@@ -52,7 +53,9 @@ import { TimestampInputComponent } from './timestamp-input.component'
     SelectCheckboxComponent,
     SelectCustomValueComponent,
 
-    DynamicFormFieldComponent
+    DynamicFormFieldComponent,
+
+    AdvancedInputFilterComponent
   ],
 
   exports: [
@@ -78,7 +81,9 @@ import { TimestampInputComponent } from './timestamp-input.component'
     SelectCheckboxComponent,
     SelectCustomValueComponent,
 
-    DynamicFormFieldComponent
+    DynamicFormFieldComponent,
+
+    AdvancedInputFilterComponent
   ],
 
   providers: [
diff --git a/client/src/app/shared/shared-forms/timestamp-input.component.scss b/client/src/app/shared/shared-forms/timestamp-input.component.scss
index 66e9aa032..36f5711a6 100644
--- a/client/src/app/shared/shared-forms/timestamp-input.component.scss
+++ b/client/src/app/shared/shared-forms/timestamp-input.component.scss
@@ -4,8 +4,7 @@ p-inputmask {
   ::ng-deep input {
     width: 80px;
     font-size: 15px;
-
-    border: none;
+    border: 0;
 
     &:focus-within,
     &:focus {