From dd24f1bb0a4b252e5342b251ba36853364da7b8e Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Thu, 19 Aug 2021 09:24:29 +0200 Subject: Add video filters to common video pages --- .../account-search/account-search.component.ts | 110 --------------------- .../account-video-channels.component.html | 2 +- .../account-videos/account-videos.component.html | 20 ++++ .../account-videos/account-videos.component.ts | 93 +++++++---------- .../src/app/+accounts/accounts-routing.module.ts | 10 +- client/src/app/+accounts/accounts.component.html | 4 +- client/src/app/+accounts/accounts.component.scss | 5 +- client/src/app/+accounts/accounts.component.ts | 22 ++--- client/src/app/+accounts/accounts.module.ts | 6 +- 9 files changed, 74 insertions(+), 198 deletions(-) delete mode 100644 client/src/app/+accounts/account-search/account-search.component.ts create mode 100644 client/src/app/+accounts/account-videos/account-videos.component.html (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 deleted file mode 100644 index f54ab846a..000000000 --- a/client/src/app/+accounts/account-search/account-search.component.ts +++ /dev/null @@ -1,110 +0,0 @@ -import { forkJoin, Subscription } from 'rxjs' -import { first, tap } from 'rxjs/operators' -import { Component, ComponentFactoryResolver, 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 - loadUserVideoPreferences = true - - 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, - protected cfr: ComponentFactoryResolver, - private accountService: AccountService, - private videoService: VideoService - ) { - super() - } - - ngOnInit () { - super.ngOnInit() - - this.enableAllFilterIfPossible() - - // Parent get the account for us - this.accountSub = forkJoin([ - this.accountService.accountLoaded.pipe(first()), - this.onUserLoadedSubject.pipe(first()) - ]).subscribe(([ account ]) => { - this.account = account - - this.reloadVideos() - }) - } - - ngOnDestroy () { - if (this.accountSub) this.accountSub.unsubscribe() - - super.ngOnDestroy() - } - - updateSearch (value: string) { - this.search = value - - if (!this.search) { - this.router.navigate([ '../videos' ], { relativeTo: this.route }) - return - } - - this.videos = [] - 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 () { - /* method disabled */ - throw new Error('Method not implemented.') - } -} diff --git a/client/src/app/+accounts/account-video-channels/account-video-channels.component.html b/client/src/app/+accounts/account-video-channels/account-video-channels.component.html index 922608127..105bc12c3 100644 --- a/client/src/app/+accounts/account-video-channels/account-video-channels.component.html +++ b/client/src/app/+accounts/account-video-channels/account-video-channels.component.html @@ -4,7 +4,7 @@
This account does not have channels.
-
+
diff --git a/client/src/app/+accounts/account-videos/account-videos.component.html b/client/src/app/+accounts/account-videos/account-videos.component.html new file mode 100644 index 000000000..5b4b0937f --- /dev/null +++ b/client/src/app/+accounts/account-videos/account-videos.component.html @@ -0,0 +1,20 @@ + + diff --git a/client/src/app/+accounts/account-videos/account-videos.component.ts b/client/src/app/+accounts/account-videos/account-videos.component.ts index 4ab6d2147..13d1f857d 100644 --- a/client/src/app/+accounts/account-videos/account-videos.component.ts +++ b/client/src/app/+accounts/account-videos/account-videos.component.ts @@ -1,96 +1,69 @@ -import { forkJoin, Subscription } from 'rxjs' +import { Subscription } from 'rxjs' import { first } from 'rxjs/operators' -import { Component, ComponentFactoryResolver, 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 { Component, OnDestroy, OnInit } from '@angular/core' +import { ComponentPaginationLight, DisableForReuseHook, ScreenService } from '@app/core' import { Account, AccountService, VideoService } from '@app/shared/shared-main' -import { AbstractVideoList } from '@app/shared/shared-video-miniature' -import { VideoFilter } from '@shared/models' +import { VideoFilters } from '@app/shared/shared-video-miniature' +import { VideoSortField } from '@shared/models' @Component({ selector: 'my-account-videos', - templateUrl: '../../shared/shared-video-miniature/abstract-video-list.html', - styleUrls: [ - '../../shared/shared-video-miniature/abstract-video-list.scss' - ] + templateUrl: './account-videos.component.html' }) -export class AccountVideosComponent extends AbstractVideoList implements OnInit, OnDestroy { - // No value because we don't want a page title - titlePage: string - loadOnInit = false - loadUserVideoPreferences = true +export class AccountVideosComponent implements OnInit, OnDestroy, DisableForReuseHook { + getVideosObservableFunction = this.getVideosObservable.bind(this) + getSyndicationItemsFunction = this.getSyndicationItems.bind(this) - filter: VideoFilter = null + title = $localize`Videos` + defaultSort = '-publishedAt' as VideoSortField + + account: Account + disabled = false - 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 screenService: ScreenService, private accountService: AccountService, - private videoService: VideoService, - protected cfr: ComponentFactoryResolver + private videoService: VideoService ) { - super() } ngOnInit () { - super.ngOnInit() - - this.enableAllFilterIfPossible() - // Parent get the account for us - this.accountSub = forkJoin([ - this.accountService.accountLoaded.pipe(first()), - this.onUserLoadedSubject.pipe(first()) - ]).subscribe(([ account ]) => { - this.account = account - - this.reloadVideos() - this.generateSyndicationList() - }) + this.accountService.accountLoaded.pipe(first()) + .subscribe(account => this.account = account) } ngOnDestroy () { if (this.accountSub) this.accountSub.unsubscribe() - - super.ngOnDestroy() } - getVideosObservable (page: number) { - const newPagination = immutableAssign(this.pagination, { currentPage: page }) + getVideosObservable (pagination: ComponentPaginationLight, filters: VideoFilters) { const options = { + ...filters.toVideosAPIObject(), + + videoPagination: pagination, account: this.account, - videoPagination: newPagination, - sort: this.sort, - nsfwPolicy: this.nsfwPolicy, - videoFilter: this.filter + skipCount: true } - return this.videoService - .getAccountVideos(options) + return this.videoService.getAccountVideos(options) } - toggleModerationDisplay () { - this.filter = this.buildLocalFilter(this.filter, null) + getSyndicationItems () { + return this.videoService.getAccountFeedUrls(this.account.id) + } - this.reloadVideos() + displayAsRow () { + return this.screenService.isInMobileView() } - generateSyndicationList () { - this.syndicationItems = this.videoService.getAccountFeedUrls(this.account.id) + disableForReuse () { + this.disabled = true } - displayAsRow () { - return this.screenService.isInMobileView() + enabledForReuse () { + this.disabled = false } } diff --git a/client/src/app/+accounts/accounts-routing.module.ts b/client/src/app/+accounts/accounts-routing.module.ts index 2f3792a8d..d80df2293 100644 --- a/client/src/app/+accounts/accounts-routing.module.ts +++ b/client/src/app/+accounts/accounts-routing.module.ts @@ -1,6 +1,5 @@ import { NgModule } from '@angular/core' import { RouterModule, Routes } from '@angular/router' -import { AccountSearchComponent } from './account-search/account-search.component' import { AccountVideoChannelsComponent } from './account-video-channels/account-video-channels.component' import { AccountVideosComponent } from './account-videos/account-videos.component' import { AccountsComponent } from './accounts.component' @@ -41,14 +40,11 @@ const accountsRoutes: Routes = [ } } }, + + // Old URL redirection { path: 'search', - component: AccountSearchComponent, - data: { - meta: { - title: $localize`Search videos within account` - } - } + redirectTo: 'videos' } ] } diff --git a/client/src/app/+accounts/accounts.component.html b/client/src/app/+accounts/accounts.component.html index 0906992fe..245edfd58 100644 --- a/client/src/app/+accounts/accounts.component.html +++ b/client/src/app/+accounts/accounts.component.html @@ -66,7 +66,7 @@
-
+
{{ item.label }} @@ -81,7 +81,7 @@ >
- +
diff --git a/client/src/app/+accounts/accounts.component.scss b/client/src/app/+accounts/accounts.component.scss index 4c1f94024..c4e2159d1 100644 --- a/client/src/app/+accounts/accounts.component.scss +++ b/client/src/app/+accounts/accounts.component.scss @@ -20,7 +20,10 @@ display: flex; justify-content: space-between; align-items: center; - max-width: $max-channels-width; + + &.on-channel-page { + max-width: $max-channels-width; + } simple-search-input { @include margin-left(auto); diff --git a/client/src/app/+accounts/accounts.component.ts b/client/src/app/+accounts/accounts.component.ts index 733cff8d5..e90816c5a 100644 --- a/client/src/app/+accounts/accounts.component.ts +++ b/client/src/app/+accounts/accounts.component.ts @@ -1,7 +1,7 @@ import { Subscription } from 'rxjs' import { catchError, distinctUntilChanged, map, switchMap, tap } from 'rxjs/operators' import { Component, OnDestroy, OnInit, ViewChild } from '@angular/core' -import { ActivatedRoute } from '@angular/router' +import { ActivatedRoute, Router } from '@angular/router' import { AuthService, MarkdownService, Notifier, RedirectService, RestExtractor, ScreenService, UserService } from '@app/core' import { Account, @@ -14,7 +14,6 @@ import { } from '@app/shared/shared-main' import { AccountReportComponent } from '@app/shared/shared-moderation' import { HttpStatusCode, User, UserRight } from '@shared/models' -import { AccountSearchComponent } from './account-search/account-search.component' @Component({ templateUrl: './accounts.component.html', @@ -23,8 +22,6 @@ import { AccountSearchComponent } from './account-search/account-search.componen export class AccountsComponent implements OnInit, OnDestroy { @ViewChild('accountReportModal') accountReportModal: AccountReportComponent - accountSearch: AccountSearchComponent - account: Account accountUser: User @@ -45,6 +42,7 @@ export class AccountsComponent implements OnInit, OnDestroy { constructor ( private route: ActivatedRoute, + private router: Router, private userService: UserService, private accountService: AccountService, private videoChannelService: VideoChannelService, @@ -128,16 +126,10 @@ 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) + const queryParams = { search } + + this.router.navigate([ './videos' ], { queryParams, relativeTo: this.route, queryParamsHandling: 'merge' }) } onSearchInputDisplayChanged (displayed: boolean) { @@ -152,6 +144,10 @@ export class AccountsComponent implements OnInit, OnDestroy { return !this.accountDescriptionExpanded && this.accountDescriptionHTML.length > 100 } + isOnChannelPage () { + return this.route.children[0].snapshot.url[0].path === 'video-channels' + } + private async onAccount (account: Account) { this.accountFollowerTitle = $localize`${account.followersCount} direct account followers` diff --git a/client/src/app/+accounts/accounts.module.ts b/client/src/app/+accounts/accounts.module.ts index 1bafc5141..aedc69b16 100644 --- a/client/src/app/+accounts/accounts.module.ts +++ b/client/src/app/+accounts/accounts.module.ts @@ -5,12 +5,11 @@ import { SharedMainModule } from '@app/shared/shared-main' import { SharedModerationModule } from '@app/shared/shared-moderation' import { SharedUserSubscriptionModule } from '@app/shared/shared-user-subscription' import { SharedVideoMiniatureModule } from '@app/shared/shared-video-miniature' -import { AccountSearchComponent } from './account-search/account-search.component' +import { SharedActorImageModule } from '../shared/shared-actor-image/shared-actor-image.module' import { AccountVideoChannelsComponent } from './account-video-channels/account-video-channels.component' import { AccountVideosComponent } from './account-videos/account-videos.component' import { AccountsRoutingModule } from './accounts-routing.module' import { AccountsComponent } from './accounts.component' -import { SharedActorImageModule } from '../shared/shared-actor-image/shared-actor-image.module' @NgModule({ imports: [ @@ -28,8 +27,7 @@ import { SharedActorImageModule } from '../shared/shared-actor-image/shared-acto declarations: [ AccountsComponent, AccountVideosComponent, - AccountVideoChannelsComponent, - AccountSearchComponent + AccountVideoChannelsComponent ], exports: [ -- cgit v1.2.3