Allow users/visitors to search through an account's videos (#3589)

* WIP: account search

* add search to account view

* add tests for account search

5 files changed, 146 insertions, 14 deletions

diff --git a/client/src/app/+accounts/account-search/account-search.component.ts b/client/src/app/+accounts/account-search/account-search.component.ts
new file mode 100644
index 000000000..10c7a12d8
--- /dev/null
+++ b/client/src/app/+accounts/account-search/account-search.component.ts
@@ -0,0 +1,104 @@
+import { Subscription } from 'rxjs'
+import { first, tap } from 'rxjs/operators'
+import { Component, OnDestroy, OnInit } from '@angular/core'
+import { ActivatedRoute, Router } from '@angular/router'
+import { AuthService, ConfirmService, LocalStorageService, Notifier, ScreenService, ServerService, UserService } from '@app/core'
+import { immutableAssign } from '@app/helpers'
+import { Account, AccountService, VideoService } from '@app/shared/shared-main'
+import { AbstractVideoList } from '@app/shared/shared-video-miniature'
+import { VideoFilter } from '@shared/models'
+
+@Component({
+  selector: 'my-account-search',
+  templateUrl: '../../shared/shared-video-miniature/abstract-video-list.html',
+  styleUrls: [
+    '../../shared/shared-video-miniature/abstract-video-list.scss'
+  ]
+})
+export class AccountSearchComponent extends AbstractVideoList implements OnInit, OnDestroy {
+  titlePage: string
+  loadOnInit = false
+
+  search = ''
+  filter: VideoFilter = null
+
+  private account: Account
+  private accountSub: Subscription
+
+  constructor (
+    protected router: Router,
+    protected serverService: ServerService,
+    protected route: ActivatedRoute,
+    protected authService: AuthService,
+    protected userService: UserService,
+    protected notifier: Notifier,
+    protected confirmService: ConfirmService,
+    protected screenService: ScreenService,
+    protected storageService: LocalStorageService,
+    private accountService: AccountService,
+    private videoService: VideoService
+  ) {
+    super()
+  }
+
+  ngOnInit () {
+    super.ngOnInit()
+
+    this.enableAllFilterIfPossible()
+
+    // Parent get the account for us
+    this.accountSub = this.accountService.accountLoaded
+                          .pipe(first())
+                          .subscribe(account => {
+                            this.account = account
+
+                            this.reloadVideos()
+                            this.generateSyndicationList()
+                          })
+  }
+
+  ngOnDestroy () {
+    if (this.accountSub) this.accountSub.unsubscribe()
+
+    super.ngOnDestroy()
+  }
+
+  updateSearch (value: string) {
+    if (value === '') this.router.navigate(['../videos'], { relativeTo: this.route })
+    this.search = value
+
+    this.reloadVideos()
+  }
+
+  getVideosObservable (page: number) {
+    const newPagination = immutableAssign(this.pagination, { currentPage: page })
+    const options = {
+      account: this.account,
+      videoPagination: newPagination,
+      sort: this.sort,
+      nsfwPolicy: this.nsfwPolicy,
+      videoFilter: this.filter,
+      search: this.search
+    }
+
+    return this.videoService
+               .getAccountVideos(options)
+               .pipe(
+                 tap(({ total }) => {
+                   this.titlePage = this.search
+                     ? $localize`Published ${total} videos matching "${this.search}"`
+                     : $localize`Published ${total} videos`
+                 })
+               )
+  }
+
+  toggleModerationDisplay () {
+    this.filter = this.buildLocalFilter(this.filter, null)
+
+    this.reloadVideos()
+  }
+
+  generateSyndicationList () {
+    /* disable syndication */
+  }
+}
diff --git a/client/src/app/+accounts/accounts-routing.module.ts b/client/src/app/+accounts/accounts-routing.module.ts
index d2ca784b0..15937a67b 100644
--- a/client/src/app/+accounts/accounts-routing.module.ts
+++ b/client/src/app/+accounts/accounts-routing.module.ts
@@ -5,6 +5,7 @@ import { AccountsComponent } from './accounts.component'
 import { AccountVideosComponent } from './account-videos/account-videos.component'
 import { AccountAboutComponent } from './account-about/account-about.component'
 import { AccountVideoChannelsComponent } from './account-video-channels/account-video-channels.component'
+import { AccountSearchComponent } from './account-search/account-search.component'
 
 const accountsRoutes: Routes = [
   {
@@ -22,6 +23,24 @@ const accountsRoutes: Routes = [
         pathMatch: 'full'
       },
       {
+        path: 'video-channels',
+        component: AccountVideoChannelsComponent,
+        data: {
+          meta: {
+            title: $localize`Account video channels`
+          }
+        }
+      },
+      {
+        path: 'about',
+        component: AccountAboutComponent,
+        data: {
+          meta: {
+            title: $localize`About account`
+          }
+        }
+      },
+      {
         path: 'videos',
         component: AccountVideosComponent,
         data: {
@@ -35,20 +54,11 @@ const accountsRoutes: Routes = [
         }
       },
       {
-        path: 'video-channels',
-        component: AccountVideoChannelsComponent,
+        path: 'search',
+        component: AccountSearchComponent,
         data: {
           meta: {
-            title: $localize`Account video channels`
-          }
-        }
-      },
-      {
-        path: 'about',
-        component: AccountAboutComponent,
-        data: {
-          meta: {
-            title: $localize`About account`
+            title: $localize`Search videos within account`
           }
         }
       }
diff --git a/client/src/app/+accounts/accounts.component.html b/client/src/app/+accounts/accounts.component.html
index 31c8e3a8e..5bd7b0824 100644
--- a/client/src/app/+accounts/accounts.component.html
+++ b/client/src/app/+accounts/accounts.component.html
@@ -44,11 +44,13 @@
       </ng-template>
 
       <list-overflow [items]="links" [itemTemplate]="linkTemplate"></list-overflow>
+
+      <simple-search-input (searchChanged)="searchChanged($event)" name="search-videos" i18n-placeholder placeholder="Search videos"></simple-search-input>
     </div>
   </div>
 
   <div class="margin-content">
-    <router-outlet></router-outlet>
+    <router-outlet (activate)="onOutletLoaded($event)"></router-outlet>
   </div>
 </div>
 
diff --git a/client/src/app/+accounts/accounts.component.ts b/client/src/app/+accounts/accounts.component.ts
index 4820eaf32..1458ea59c 100644
--- a/client/src/app/+accounts/accounts.component.ts
+++ b/client/src/app/+accounts/accounts.component.ts
@@ -7,6 +7,7 @@ import { Account, AccountService, DropdownAction, ListOverflowItem, VideoChannel
 import { AccountReportComponent } from '@app/shared/shared-moderation'
 import { User, UserRight } from '@shared/models'
 import { HttpStatusCode } from '@shared/core-utils/miscs/http-error-codes'
+import { AccountSearchComponent } from './account-search/account-search.component'
 
 @Component({
   templateUrl: './accounts.component.html',
@@ -14,6 +15,7 @@ import { HttpStatusCode } from '@shared/core-utils/miscs/http-error-codes'
 })
 export class AccountsComponent implements OnInit, OnDestroy {
   @ViewChild('accountReportModal') accountReportModal: AccountReportComponent
+  accountSearch: AccountSearchComponent
 
   account: Account
   accountUser: User
@@ -99,6 +101,18 @@ export class AccountsComponent implements OnInit, OnDestroy {
     return $localize`${count} subscribers`
   }
 
+  onOutletLoaded (component: Component) {
+    if (component instanceof AccountSearchComponent) {
+      this.accountSearch = component
+    } else {
+      this.accountSearch = undefined
+    }
+  }
+
+  searchChanged (search: string) {
+    if (this.accountSearch) this.accountSearch.updateSearch(search)
+  }
+
   private onAccount (account: Account) {
     this.prependModerationActions = undefined
 
diff --git a/client/src/app/+accounts/accounts.module.ts b/client/src/app/+accounts/accounts.module.ts
index 815360341..6da65cbc1 100644
--- a/client/src/app/+accounts/accounts.module.ts
+++ b/client/src/app/+accounts/accounts.module.ts
@@ -8,6 +8,7 @@ import { SharedVideoMiniatureModule } from '@app/shared/shared-video-miniature'
 import { AccountAboutComponent } from './account-about/account-about.component'
 import { AccountVideoChannelsComponent } from './account-video-channels/account-video-channels.component'
 import { AccountVideosComponent } from './account-videos/account-videos.component'
+import { AccountSearchComponent } from './account-search/account-search.component'
 import { AccountsRoutingModule } from './accounts-routing.module'
 import { AccountsComponent } from './accounts.component'
 
@@ -27,7 +28,8 @@ import { AccountsComponent } from './accounts.component'
     AccountsComponent,
     AccountVideosComponent,
     AccountVideoChannelsComponent,
-    AccountAboutComponent
+    AccountAboutComponent,
+    AccountSearchComponent
   ],
 
   exports: [