X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;f=client%2Fsrc%2Fapp%2F%2Bsearch%2Fsearch.component.ts;h=366fbd459906b293f085fabb2cbb533b3ae41543;hb=4158e67c8d7eb39712e598d3f409c6739eef5f0b;hp=235bbfa4c1660bdfc2dd13af3f48426b2e5c8391;hpb=c4238d68fb24b53eecb908067687060e23c40090;p=github%2FChocobozzz%2FPeerTube.git diff --git a/client/src/app/+search/search.component.ts b/client/src/app/+search/search.component.ts index 235bbfa4c..366fbd459 100644 --- a/client/src/app/+search/search.component.ts +++ b/client/src/app/+search/search.component.ts @@ -1,9 +1,10 @@ -import { forkJoin, of, Subscription } from 'rxjs' +import { forkJoin, Subscription } from 'rxjs' import { LinkType } from 'src/types/link.type' import { Component, OnDestroy, OnInit } from '@angular/core' import { ActivatedRoute, Router } from '@angular/router' import { AuthService, HooksService, MetaService, Notifier, ServerService, User, UserService } from '@app/core' import { immutableAssign } from '@app/helpers' +import { validateHost } from '@app/shared/form-validators/host-validators' import { Video, VideoChannel } from '@app/shared/shared-main' import { AdvancedSearch, SearchService } from '@app/shared/shared-search' import { MiniatureDisplayOptions } from '@app/shared/shared-video-miniature' @@ -16,7 +17,9 @@ import { HTMLServerConfig, SearchTargetType } from '@shared/models' templateUrl: './search.component.html' }) export class SearchComponent implements OnInit, OnDestroy { - results: (Video | VideoChannel)[] = [] + error: string + + results: (Video | VideoChannel | VideoPlaylist)[] = [] pagination = { currentPage: 1, @@ -44,10 +47,6 @@ export class SearchComponent implements OnInit, OnDestroy { private subActivatedRoute: Subscription private isInitialLoad = false // set to false to show the search filters on first arrival - private channelsPerPage = 2 - private playlistsPerPage = 2 - private videosPerPage = 10 - private hasMoreResults = true private isSearching = false @@ -70,34 +69,37 @@ export class SearchComponent implements OnInit, OnDestroy { ngOnInit () { this.serverConfig = this.serverService.getHTMLConfig() - this.subActivatedRoute = this.route.queryParams.subscribe( - async queryParams => { - const querySearch = queryParams['search'] - const searchTarget = queryParams['searchTarget'] + this.subActivatedRoute = this.route.queryParams + .subscribe({ + next: queryParams => { + const querySearch = queryParams['search'] + const searchTarget = queryParams['searchTarget'] - // Search updated, reset filters - if (this.currentSearch !== querySearch || searchTarget !== this.advancedSearch.searchTarget) { - this.resetPagination() - this.advancedSearch.reset() + // Search updated, reset filters + if (this.currentSearch !== querySearch || searchTarget !== this.advancedSearch.searchTarget) { + this.resetPagination() + this.advancedSearch.reset() - this.currentSearch = querySearch || undefined - this.updateTitle() - } + this.currentSearch = querySearch || undefined + this.updateTitle() + } - this.advancedSearch = new AdvancedSearch(queryParams) - if (!this.advancedSearch.searchTarget) { - this.advancedSearch.searchTarget = this.getDefaultSearchTarget() - } + this.advancedSearch = new AdvancedSearch(queryParams) + if (!this.advancedSearch.searchTarget) { + this.advancedSearch.searchTarget = this.getDefaultSearchTarget() + } - // Don't hide filters if we have some of them AND the user just came on the webpage - this.isSearchFilterCollapsed = this.isInitialLoad === false || !this.advancedSearch.containsValues() - this.isInitialLoad = false + this.error = this.checkFieldsAndGetError() - this.search() - }, + // Don't hide filters if we have some of them AND the user just came on the webpage, or we have an error + this.isSearchFilterCollapsed = !this.error && (this.isInitialLoad === false || !this.advancedSearch.containsValues()) + this.isInitialLoad = false - err => this.notifier.error(err.text) - ) + this.search() + }, + + error: err => this.notifier.error(err.message) + }) this.userService.getAnonymousOrLoggedUser() .subscribe(user => this.userMiniature = user) @@ -126,39 +128,44 @@ export class SearchComponent implements OnInit, OnDestroy { } search () { + this.error = this.checkFieldsAndGetError() + if (this.error) return + this.isSearching = true forkJoin([ this.getVideoChannelObs(), this.getVideoPlaylistObs(), this.getVideosObs() - ]).subscribe(results => { - for (const result of results) { - this.results = this.results.concat(result.data) - } + ]).subscribe({ + next: results => { + for (const result of results) { + this.results = this.results.concat(result.data) + } - this.pagination.totalItems = results.reduce((p, r) => p += r.total, 0) - this.lastSearchTarget = this.advancedSearch.searchTarget + this.pagination.totalItems = results.reduce((p, r) => p += r.total, 0) + this.lastSearchTarget = this.advancedSearch.searchTarget - this.hasMoreResults = this.results.length < this.pagination.totalItems - }, + this.hasMoreResults = this.results.length < this.pagination.totalItems + }, - err => { - if (this.advancedSearch.searchTarget !== 'search-index') { - this.notifier.error(err.message) - return - } + error: err => { + if (this.advancedSearch.searchTarget !== 'search-index') { + this.notifier.error(err.message) + return + } - this.notifier.error( - $localize`Search index is unavailable. Retrying with instance results instead.`, - $localize`Search error` - ) - this.advancedSearch.searchTarget = 'local' - this.search() - }, + this.notifier.error( + $localize`Search index is unavailable. Retrying with instance results instead.`, + $localize`Search error` + ) + this.advancedSearch.searchTarget = 'local' + this.search() + }, - () => { - this.isSearching = false + complete: () => { + this.isSearching = false + } }) } @@ -236,17 +243,16 @@ export class SearchComponent implements OnInit, OnDestroy { private resetPagination () { this.pagination.currentPage = 1 this.pagination.totalItems = null - this.channelsPerPage = 2 this.results = [] } private updateTitle () { - const suffix = this.currentSearch - ? ' ' + this.currentSearch - : '' + const title = this.currentSearch + ? $localize`Search ${this.currentSearch}` + : $localize`Search` - this.metaService.setTitle($localize`Search` + suffix) + this.metaService.setTitle(title) } private updateUrlFromAdvancedSearch () { @@ -261,7 +267,7 @@ export class SearchComponent implements OnInit, OnDestroy { private getVideosObs () { const params = { search: this.currentSearch, - componentPagination: immutableAssign(this.pagination, { itemsPerPage: this.videosPerPage }), + componentPagination: immutableAssign(this.pagination, { itemsPerPage: 10 }), advancedSearch: this.advancedSearch } @@ -275,12 +281,10 @@ export class SearchComponent implements OnInit, OnDestroy { } private getVideoChannelObs () { - if (!this.currentSearch) return of({ data: [], total: 0 }) - const params = { search: this.currentSearch, - componentPagination: immutableAssign(this.pagination, { itemsPerPage: this.channelsPerPage }), - searchTarget: this.advancedSearch.searchTarget + componentPagination: immutableAssign(this.pagination, { itemsPerPage: this.buildChannelsPerPage() }), + advancedSearch: this.advancedSearch } return this.hooks.wrapObsFun( @@ -293,12 +297,10 @@ export class SearchComponent implements OnInit, OnDestroy { } private getVideoPlaylistObs () { - if (!this.currentSearch) return of({ data: [], total: 0 }) - const params = { search: this.currentSearch, - componentPagination: immutableAssign(this.pagination, { itemsPerPage: this.playlistsPerPage }), - searchTarget: this.advancedSearch.searchTarget + componentPagination: immutableAssign(this.pagination, { itemsPerPage: this.buildPlaylistsPerPage() }), + advancedSearch: this.advancedSearch } return this.hooks.wrapObsFun( @@ -319,4 +321,24 @@ export class SearchComponent implements OnInit, OnDestroy { return 'local' } + + private checkFieldsAndGetError () { + if (this.advancedSearch.host && !validateHost(this.advancedSearch.host)) { + return $localize`PeerTube instance host filter is invalid` + } + + return undefined + } + + private buildChannelsPerPage () { + if (this.advancedSearch.resultType === 'channels') return 10 + + return 2 + } + + private buildPlaylistsPerPage () { + if (this.advancedSearch.resultType === 'playlists') return 10 + + return 2 + } }