Add video filters to common video pages

7 files changed, 89 insertions, 116 deletions

diff --git a/client/src/app/shared/shared-main/angular/infinite-scroller.directive.ts b/client/src/app/shared/shared-main/angular/infinite-scroller.directive.ts
index dc212788a..bebc6efa7 100644
--- a/client/src/app/shared/shared-main/angular/infinite-scroller.directive.ts
+++ b/client/src/app/shared/shared-main/angular/infinite-scroller.directive.ts
@@ -1,16 +1,19 @@
 import { fromEvent, Observable, Subscription } from 'rxjs'
 import { distinctUntilChanged, filter, map, share, startWith, throttleTime } from 'rxjs/operators'
 import { AfterViewChecked, Directive, ElementRef, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core'
+import { PeerTubeRouterService, RouterSetting } from '@app/core'
 
 @Directive({
   selector: '[myInfiniteScroller]'
 })
 export class InfiniteScrollerDirective implements OnInit, OnDestroy, AfterViewChecked {
   @Input() percentLimit = 70
-  @Input() autoInit = false
   @Input() onItself = false
   @Input() dataObservable: Observable<any[]>
 
+  // Add angular state in query params to reuse the routed component
+  @Input() setAngularState: boolean
+
   @Output() nearOfBottom = new EventEmitter<void>()
 
   private decimalLimit = 0
@@ -20,7 +23,10 @@ export class InfiniteScrollerDirective implements OnInit, OnDestroy, AfterViewCh
 
   private checkScroll = false
 
-  constructor (private el: ElementRef) {
+  constructor (
+    private peertubeRouter: PeerTubeRouterService,
+    private el: ElementRef
+  ) {
     this.decimalLimit = this.percentLimit / 100
   }
 
@@ -36,7 +42,7 @@ export class InfiniteScrollerDirective implements OnInit, OnDestroy, AfterViewCh
   }
 
   ngOnInit () {
-    if (this.autoInit === true) return this.initialize()
+    this.initialize()
   }
 
   ngOnDestroy () {
@@ -67,7 +73,11 @@ export class InfiniteScrollerDirective implements OnInit, OnDestroy, AfterViewCh
         filter(({ current }) => this.isScrollingDown(current)),
         filter(({ current, maximumScroll }) => (current / maximumScroll) > this.decimalLimit)
       )
-      .subscribe(() => this.nearOfBottom.emit())
+      .subscribe(() => {
+        if (this.setAngularState) this.setScrollRouteParams()
+
+        this.nearOfBottom.emit()
+      })
 
     if (this.dataObservable) {
       this.dataObservable
@@ -96,4 +106,8 @@ export class InfiniteScrollerDirective implements OnInit, OnDestroy, AfterViewCh
     this.lastCurrentBottom = current
     return result
   }
+
+  private setScrollRouteParams () {
+    this.peertubeRouter.addRouteSetting(RouterSetting.REUSE_COMPONENT)
+  }
 }
diff --git a/client/src/app/shared/shared-main/feeds/feed.component.scss b/client/src/app/shared/shared-main/feeds/feed.component.scss
index a1838c485..bf1f4eeeb 100644
--- a/client/src/app/shared/shared-main/feeds/feed.component.scss
+++ b/client/src/app/shared/shared-main/feeds/feed.component.scss
@@ -7,12 +7,11 @@
   a {
     color: #000;
     display: block;
+    min-width: 100px;
   }
 }
 
 my-global-icon {
-  @include apply-svg-color(pvar(--mainForegroundColor));
-
   cursor: pointer;
   width: 100%;
 }
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()
   }
 }
diff --git a/client/src/app/shared/shared-main/users/user-notifications.component.html b/client/src/app/shared/shared-main/users/user-notifications.component.html
index 325f0eaae..ee8df864a 100644
--- a/client/src/app/shared/shared-main/users/user-notifications.component.html
+++ b/client/src/app/shared/shared-main/users/user-notifications.component.html
@@ -1,6 +1,6 @@
 <div *ngIf="componentPagination.totalItems === 0" class="no-notification" i18n>You don't have notifications.</div>
 
-<div class="notifications" myInfiniteScroller [autoInit]="true" (nearOfBottom)="onNearOfBottom()" [dataObservable]="onDataSubject.asObservable()">
+<div class="notifications" myInfiniteScroller (nearOfBottom)="onNearOfBottom()" [dataObservable]="onDataSubject.asObservable()">
   <div *ngFor="let notification of notifications" class="notification" [ngClass]="{ unread: !notification.read }" (click)="markAsRead(notification)">
 
     <ng-container [ngSwitch]="notification.type">
diff --git a/client/src/app/shared/shared-main/video/video.service.ts b/client/src/app/shared/shared-main/video/video.service.ts
index 60cc9d160..3481b116f 100644
--- a/client/src/app/shared/shared-main/video/video.service.ts
+++ b/client/src/app/shared/shared-main/video/video.service.ts
@@ -5,6 +5,7 @@ import { Injectable } from '@angular/core'
 import { ComponentPaginationLight, RestExtractor, RestService, ServerService, UserService } from '@app/core'
 import { objectToFormData } from '@app/helpers'
 import {
+  BooleanBothQuery,
   FeedFormat,
   NSFWPolicyType,
   ResultList,
@@ -28,19 +29,21 @@ import { VideoDetails } from './video-details.model'
 import { VideoEdit } from './video-edit.model'
 import { Video } from './video.model'
 
-export interface VideosProvider {
-  getVideos (parameters: {
-    videoPagination: ComponentPaginationLight
-    sort: VideoSortField
-    filter?: VideoFilter
-    categoryOneOf?: number[]
-    languageOneOf?: string[]
-    nsfwPolicy: NSFWPolicyType
-  }): Observable<ResultList<Video>>
+export type CommonVideoParams = {
+  videoPagination: ComponentPaginationLight
+  sort: VideoSortField
+  filter?: VideoFilter
+  categoryOneOf?: number[]
+  languageOneOf?: string[]
+  isLive?: boolean
+  skipCount?: boolean
+  // FIXME: remove?
+  nsfwPolicy?: NSFWPolicyType
+  nsfw?: BooleanBothQuery
 }
 
 @Injectable()
-export class VideoService implements VideosProvider {
+export class VideoService {
   static BASE_VIDEO_URL = environment.apiUrl + '/api/v1/videos/'
   static BASE_FEEDS_URL = environment.apiUrl + '/feeds/videos.'
   static BASE_SUBSCRIPTION_FEEDS_URL = environment.apiUrl + '/feeds/subscriptions.'
@@ -144,32 +147,16 @@ export class VideoService implements VideosProvider {
                )
   }
 
-  getAccountVideos (parameters: {
+  getAccountVideos (parameters: CommonVideoParams & {
     account: Pick<Account, 'nameWithHost'>
-    videoPagination: ComponentPaginationLight
-    sort: VideoSortField
-    nsfwPolicy?: NSFWPolicyType
-    videoFilter?: VideoFilter
     search?: string
   }): Observable<ResultList<Video>> {
-    const { account, videoPagination, sort, videoFilter, nsfwPolicy, search } = parameters
-
-    const pagination = this.restService.componentPaginationToRestPagination(videoPagination)
+    const { account, search } = parameters
 
     let params = new HttpParams()
-    params = this.restService.addRestGetParams(params, pagination, sort)
-
-    if (nsfwPolicy) {
-      params = params.set('nsfw', this.nsfwPolicyToParam(nsfwPolicy))
-    }
-
-    if (videoFilter) {
-      params = params.set('filter', videoFilter)
-    }
+    params = this.buildCommonVideosParams({ params, ...parameters })
 
-    if (search) {
-      params = params.set('search', search)
-    }
+    if (search) params = params.set('search', search)
 
     return this.authHttp
                .get<ResultList<Video>>(AccountService.BASE_ACCOUNT_URL + account.nameWithHost + '/videos', { params })
@@ -179,27 +166,13 @@ export class VideoService implements VideosProvider {
                )
   }
 
-  getVideoChannelVideos (parameters: {
+  getVideoChannelVideos (parameters: CommonVideoParams & {
     videoChannel: Pick<VideoChannel, 'nameWithHost'>
-    videoPagination: ComponentPaginationLight
-    sort: VideoSortField
-    nsfwPolicy?: NSFWPolicyType
-    videoFilter?: VideoFilter
   }): Observable<ResultList<Video>> {
-    const { videoChannel, videoPagination, sort, nsfwPolicy, videoFilter } = parameters
-
-    const pagination = this.restService.componentPaginationToRestPagination(videoPagination)
+    const { videoChannel } = parameters
 
     let params = new HttpParams()
-    params = this.restService.addRestGetParams(params, pagination, sort)
-
-    if (nsfwPolicy) {
-      params = params.set('nsfw', this.nsfwPolicyToParam(nsfwPolicy))
-    }
-
-    if (videoFilter) {
-      params = params.set('filter', videoFilter)
-    }
+    params = this.buildCommonVideosParams({ params, ...parameters })
 
     return this.authHttp
                .get<ResultList<Video>>(VideoChannelService.BASE_VIDEO_CHANNEL_URL + videoChannel.nameWithHost + '/videos', { params })
@@ -209,30 +182,9 @@ export class VideoService implements VideosProvider {
                )
   }
 
-  getVideos (parameters: {
-    videoPagination: ComponentPaginationLight
-    sort: VideoSortField
-    filter?: VideoFilter
-    categoryOneOf?: number[]
-    languageOneOf?: string[]
-    isLive?: boolean
-    skipCount?: boolean
-    nsfwPolicy?: NSFWPolicyType
-  }): Observable<ResultList<Video>> {
-    const { videoPagination, sort, filter, categoryOneOf, languageOneOf, skipCount, nsfwPolicy, isLive } = parameters
-
-    const pagination = this.restService.componentPaginationToRestPagination(videoPagination)
-
+  getVideos (parameters: CommonVideoParams): Observable<ResultList<Video>> {
     let params = new HttpParams()
-    params = this.restService.addRestGetParams(params, pagination, sort)
-
-    if (filter) params = params.set('filter', filter)
-    if (skipCount) params = params.set('skipCount', skipCount + '')
-
-    if (isLive) params = params.set('isLive', isLive)
-    if (nsfwPolicy) params = params.set('nsfw', this.nsfwPolicyToParam(nsfwPolicy))
-    if (languageOneOf) this.restService.addArrayParams(params, 'languageOneOf', languageOneOf)
-    if (categoryOneOf) this.restService.addArrayParams(params, 'categoryOneOf', categoryOneOf)
+    params = this.buildCommonVideosParams({ params, ...parameters })
 
     return this.authHttp
                .get<ResultList<Video>>(VideoService.BASE_VIDEO_URL, { params })
@@ -421,4 +373,22 @@ export class VideoService implements VideosProvider {
                  catchError(err => this.restExtractor.handleError(err))
                )
   }
+
+  private buildCommonVideosParams (options: CommonVideoParams & { params: HttpParams }) {
+    const { params, videoPagination, sort, filter, categoryOneOf, languageOneOf, skipCount, nsfwPolicy, isLive, nsfw } = options
+
+    const pagination = this.restService.componentPaginationToRestPagination(videoPagination)
+    let newParams = this.restService.addRestGetParams(params, pagination, sort)
+
+    if (filter) newParams = newParams.set('filter', filter)
+    if (skipCount) newParams = newParams.set('skipCount', skipCount + '')
+
+    if (isLive) newParams = newParams.set('isLive', isLive)
+    if (nsfw) newParams = newParams.set('nsfw', nsfw)
+    if (nsfwPolicy) newParams = newParams.set('nsfw', this.nsfwPolicyToParam(nsfwPolicy))
+    if (languageOneOf) newParams = this.restService.addArrayParams(newParams, 'languageOneOf', languageOneOf)
+    if (categoryOneOf) newParams = this.restService.addArrayParams(newParams, 'categoryOneOf', categoryOneOf)
+
+    return newParams
+  }
 }