X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;f=client%2Fsrc%2Fapp%2F%2Bsearch%2Fsearch.component.ts;h=fdf9b7cc07ab649a7495548ff2d2cba2fabff1e7;hb=fa12eacc014aae8094d108634371640f2695bf9f;hp=4381659e1f09bbd2003e337c2bc54a26953e7325;hpb=4d7ce9218a3f695bf3d013cbdce1c5c6a5221927;p=github%2FChocobozzz%2FPeerTube.git diff --git a/client/src/app/+search/search.component.ts b/client/src/app/+search/search.component.ts index 4381659e1..fdf9b7cc0 100644 --- a/client/src/app/+search/search.component.ts +++ b/client/src/app/+search/search.component.ts @@ -1,12 +1,14 @@ import { forkJoin, of, 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, ComponentPagination, HooksService, MetaService, Notifier, ServerService, User, UserService } from '@app/core' +import { AuthService, HooksService, MetaService, Notifier, ServerService, User, UserService } from '@app/core' import { immutableAssign } from '@app/helpers' import { Video, VideoChannel } from '@app/shared/shared-main' import { AdvancedSearch, SearchService } from '@app/shared/shared-search' -import { MiniatureDisplayOptions, VideoLinkType } from '@app/shared/shared-video-miniature' -import { SearchTargetType, ServerConfig } from '@shared/models' +import { MiniatureDisplayOptions } from '@app/shared/shared-video-miniature' +import { VideoPlaylist } from '@app/shared/shared-video-playlist' +import { HTMLServerConfig, SearchTargetType } from '@shared/models' @Component({ selector: 'my-search', @@ -16,10 +18,9 @@ import { SearchTargetType, ServerConfig } from '@shared/models' export class SearchComponent implements OnInit, OnDestroy { results: (Video | VideoChannel)[] = [] - pagination: ComponentPagination = { + pagination = { currentPage: 1, - itemsPerPage: 10, // Only for videos, use another variable for channels - totalItems: null + totalItems: null as number } advancedSearch: AdvancedSearch = new AdvancedSearch() isSearchFilterCollapsed = true @@ -37,7 +38,6 @@ export class SearchComponent implements OnInit, OnDestroy { } errorMessage: string - serverConfig: ServerConfig userMiniature: User @@ -46,9 +46,16 @@ export class SearchComponent implements OnInit, OnDestroy { private firstSearch = true private channelsPerPage = 2 + private playlistsPerPage = 2 + private videosPerPage = 10 + + private hasMoreResults = true + private isSearching = false private lastSearchTarget: SearchTargetType + private serverConfig: HTMLServerConfig + constructor ( private route: ActivatedRoute, private router: Router, @@ -62,8 +69,7 @@ export class SearchComponent implements OnInit, OnDestroy { ) { } ngOnInit () { - this.serverService.getConfig() - .subscribe(config => this.serverConfig = config) + this.serverConfig = this.serverService.getHTMLConfig() this.subActivatedRoute = this.route.queryParams.subscribe( async queryParams => { @@ -81,7 +87,7 @@ export class SearchComponent implements OnInit, OnDestroy { this.advancedSearch = new AdvancedSearch(queryParams) if (!this.advancedSearch.searchTarget) { - this.advancedSearch.searchTarget = await this.serverService.getDefaultSearchTarget() + this.advancedSearch.searchTarget = this.getDefaultSearchTarget() } // Don't hide filters if we have some of them AND the user just came on the webpage @@ -104,77 +110,62 @@ export class SearchComponent implements OnInit, OnDestroy { if (this.subActivatedRoute) this.subActivatedRoute.unsubscribe() } - isVideoChannel (d: VideoChannel | Video): d is VideoChannel { + isVideoChannel (d: VideoChannel | Video | VideoPlaylist): d is VideoChannel { return d instanceof VideoChannel } - isVideo (v: VideoChannel | Video): v is Video { + isVideo (v: VideoChannel | Video | VideoPlaylist): v is Video { return v instanceof Video } + isPlaylist (v: VideoChannel | Video | VideoPlaylist): v is VideoPlaylist { + return v instanceof VideoPlaylist + } + isUserLoggedIn () { return this.authService.isLoggedIn() } - getVideoLinkType (): VideoLinkType { - if (this.advancedSearch.searchTarget === 'search-index') { - const remoteUriConfig = this.serverConfig.search.remoteUri + search () { + this.isSearching = true - // Redirect on the external instance if not allowed to fetch remote data - if ((!this.isUserLoggedIn() && !remoteUriConfig.anonymous) || !remoteUriConfig.users) { - return 'external' + forkJoin([ + this.getVideoChannelObs(), + this.getVideoPlaylistObs(), + this.getVideosObs() + ]).subscribe(results => { + for (const result of results) { + this.results = this.results.concat(result.data) } - return 'lazy-load' - } - - return 'internal' - } - - search () { - forkJoin([ - this.getVideosObs(), - this.getVideoChannelObs() - ]).subscribe( - ([videosResult, videoChannelsResult]) => { - this.results = this.results - .concat(videoChannelsResult.data) - .concat(videosResult.data) - - this.pagination.totalItems = videosResult.total + videoChannelsResult.total - this.lastSearchTarget = this.advancedSearch.searchTarget - - // Focus on channels if there are no enough videos - if (this.firstSearch === true && videosResult.data.length < this.pagination.itemsPerPage) { - this.resetPagination() - this.firstSearch = false + this.pagination.totalItems = results.reduce((p, r) => p += r.total, 0) + this.lastSearchTarget = this.advancedSearch.searchTarget - this.channelsPerPage = 10 - this.search() - } + this.hasMoreResults = this.results.length < this.pagination.totalItems + }, - this.firstSearch = false - }, + err => { + if (this.advancedSearch.searchTarget !== 'search-index') { + this.notifier.error(err.message) + return + } - 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 + }) } onNearOfBottom () { // Last page - if (this.pagination.totalItems <= (this.pagination.currentPage * this.pagination.itemsPerPage)) return + if (!this.hasMoreResults || this.isSearching) return this.pagination.currentPage += 1 this.search() @@ -190,18 +181,33 @@ export class SearchComponent implements OnInit, OnDestroy { return this.advancedSearch.size() } - // Add VideoChannel for typings, but the template already checks "video" argument is a video - removeVideoFromArray (video: Video | VideoChannel) { + // Add VideoChannel/VideoPlaylist for typings, but the template already checks "video" argument is a video + removeVideoFromArray (video: Video | VideoChannel | VideoPlaylist) { this.results = this.results.filter(r => !this.isVideo(r) || r.id !== video.id) } + getLinkType (): LinkType { + if (this.advancedSearch.searchTarget === 'search-index') { + const remoteUriConfig = this.serverConfig.search.remoteUri + + // Redirect on the external instance if not allowed to fetch remote data + if ((!this.isUserLoggedIn() && !remoteUriConfig.anonymous) || !remoteUriConfig.users) { + return 'external' + } + + return 'lazy-load' + } + + return 'internal' + } + isExternalChannelUrl () { - return this.getVideoLinkType() === 'external' + return this.getLinkType() === 'external' } getExternalChannelUrl (channel: VideoChannel) { // Same algorithm than videos - if (this.getVideoLinkType() === 'external') { + if (this.getLinkType() === 'external') { return channel.url } @@ -210,7 +216,7 @@ export class SearchComponent implements OnInit, OnDestroy { } getInternalChannelUrl (channel: VideoChannel) { - const linkType = this.getVideoLinkType() + const linkType = this.getLinkType() if (linkType === 'internal') { return [ '/c', channel.nameWithHost ] @@ -256,7 +262,7 @@ export class SearchComponent implements OnInit, OnDestroy { private getVideosObs () { const params = { search: this.currentSearch, - componentPagination: this.pagination, + componentPagination: immutableAssign(this.pagination, { itemsPerPage: this.videosPerPage }), advancedSearch: this.advancedSearch } @@ -286,4 +292,32 @@ export class SearchComponent implements OnInit, OnDestroy { 'filter:api.search.video-channels.list.result' ) } + + 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 + } + + return this.hooks.wrapObsFun( + this.searchService.searchVideoPlaylists.bind(this.searchService), + params, + 'search', + 'filter:api.search.video-playlists.list.params', + 'filter:api.search.video-playlists.list.result' + ) + } + + private getDefaultSearchTarget (): SearchTargetType { + const searchIndexConfig = this.serverConfig.search.searchIndex + + if (searchIndexConfig.enabled && (searchIndexConfig.isDefaultSearch || searchIndexConfig.disableLocalSearch)) { + return 'search-index' + } + + return 'local' + } }