From 370240824e2fb28b314255f6c23f5ea7d6b08625 Mon Sep 17 00:00:00 2001 From: Rigel Kent Date: Tue, 19 Jan 2021 13:43:33 +0100 Subject: Allow users/visitors to search through an account's videos (#3589) * WIP: account search * add search to account view * add tests for account search --- .../account-search/account-search.component.ts | 104 +++++++++++++++++++++ .../src/app/+accounts/accounts-routing.module.ts | 34 ++++--- client/src/app/+accounts/accounts.component.html | 4 +- client/src/app/+accounts/accounts.component.ts | 14 +++ client/src/app/+accounts/accounts.module.ts | 4 +- 5 files changed, 146 insertions(+), 14 deletions(-) create mode 100644 client/src/app/+accounts/account-search/account-search.component.ts (limited to 'client/src/app/+accounts') 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 = [ { @@ -21,6 +22,24 @@ const accountsRoutes: Routes = [ redirectTo: 'video-channels', 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, @@ -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 @@ + +
- +
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: [ -- cgit v1.2.3