Fix follows backend URL
[oweals/peertube.git] / client / src / app / search / search.component.ts
1 import { Component, OnDestroy, OnInit } from '@angular/core'
2 import { ActivatedRoute, Router } from '@angular/router'
3 import { AuthService, Notifier } from '@app/core'
4 import { forkJoin, Subscription } from 'rxjs'
5 import { SearchService } from '@app/search/search.service'
6 import { ComponentPagination } from '@app/shared/rest/component-pagination.model'
7 import { I18n } from '@ngx-translate/i18n-polyfill'
8 import { MetaService } from '@ngx-meta/core'
9 import { AdvancedSearch } from '@app/search/advanced-search.model'
10 import { VideoChannel } from '@app/shared/video-channel/video-channel.model'
11 import { immutableAssign } from '@app/shared/misc/utils'
12 import { Video } from '@app/shared/video/video.model'
13
14 @Component({
15   selector: 'my-search',
16   styleUrls: [ './search.component.scss' ],
17   templateUrl: './search.component.html'
18 })
19 export class SearchComponent implements OnInit, OnDestroy {
20   results: (Video | VideoChannel)[] = []
21
22   pagination: ComponentPagination = {
23     currentPage: 1,
24     itemsPerPage: 10, // Only for videos, use another variable for channels
25     totalItems: null
26   }
27   advancedSearch: AdvancedSearch = new AdvancedSearch()
28   isSearchFilterCollapsed = true
29   currentSearch: string
30
31   private subActivatedRoute: Subscription
32   private isInitialLoad = false // set to false to show the search filters on first arrival
33   private firstSearch = true
34
35   private channelsPerPage = 2
36
37   constructor (
38     private i18n: I18n,
39     private route: ActivatedRoute,
40     private router: Router,
41     private metaService: MetaService,
42     private notifier: Notifier,
43     private searchService: SearchService,
44     private authService: AuthService
45   ) { }
46
47   get user () {
48     return this.authService.getUser()
49   }
50
51   ngOnInit () {
52     this.subActivatedRoute = this.route.queryParams.subscribe(
53       queryParams => {
54         const querySearch = queryParams['search']
55
56         // Search updated, reset filters
57         if (this.currentSearch !== querySearch) {
58           this.resetPagination()
59           this.advancedSearch.reset()
60
61           this.currentSearch = querySearch || undefined
62           this.updateTitle()
63         }
64
65         this.advancedSearch = new AdvancedSearch(queryParams)
66
67         // Don't hide filters if we have some of them AND the user just came on the webpage
68         this.isSearchFilterCollapsed = this.isInitialLoad === false || !this.advancedSearch.containsValues()
69         this.isInitialLoad = false
70
71         this.search()
72       },
73
74       err => this.notifier.error(err.text)
75     )
76   }
77
78   ngOnDestroy () {
79     if (this.subActivatedRoute) this.subActivatedRoute.unsubscribe()
80   }
81
82   isVideoChannel (d: VideoChannel | Video): d is VideoChannel {
83     return d instanceof VideoChannel
84   }
85
86   isVideo (v: VideoChannel | Video): v is Video {
87     return v instanceof Video
88   }
89
90   isUserLoggedIn () {
91     return this.authService.isLoggedIn()
92   }
93
94   search () {
95     forkJoin([
96       this.searchService.searchVideos(this.currentSearch, this.pagination, this.advancedSearch),
97       this.searchService.searchVideoChannels(this.currentSearch, immutableAssign(this.pagination, { itemsPerPage: this.channelsPerPage }))
98     ])
99       .subscribe(
100         ([ videosResult, videoChannelsResult ]) => {
101           this.results = this.results
102                              .concat(videoChannelsResult.data)
103                              .concat(videosResult.videos)
104           this.pagination.totalItems = videosResult.totalVideos + videoChannelsResult.total
105
106           // Focus on channels if there are no enough videos
107           if (this.firstSearch === true && videosResult.videos.length < this.pagination.itemsPerPage) {
108             this.resetPagination()
109             this.firstSearch = false
110
111             this.channelsPerPage = 10
112             this.search()
113           }
114
115           this.firstSearch = false
116         },
117
118         err => this.notifier.error(err.message)
119       )
120
121   }
122
123   onNearOfBottom () {
124     // Last page
125     if (this.pagination.totalItems <= (this.pagination.currentPage * this.pagination.itemsPerPage)) return
126
127     this.pagination.currentPage += 1
128     this.search()
129   }
130
131   onFiltered () {
132     this.resetPagination()
133
134     this.updateUrlFromAdvancedSearch()
135   }
136
137   numberOfFilters () {
138     return this.advancedSearch.size()
139   }
140
141   removeVideoFromArray (video: Video) {
142     this.results = this.results.filter(r => !this.isVideo(r) || r.id !== video.id)
143   }
144
145   private resetPagination () {
146     this.pagination.currentPage = 1
147     this.pagination.totalItems = null
148     this.channelsPerPage = 2
149
150     this.results = []
151   }
152
153   private updateTitle () {
154     const suffix = this.currentSearch ? ' ' + this.currentSearch : ''
155     this.metaService.setTitle(this.i18n('Search') + suffix)
156   }
157
158   private updateUrlFromAdvancedSearch () {
159     const search = this.currentSearch || undefined
160
161     this.router.navigate([], {
162       relativeTo: this.route,
163       queryParams: Object.assign({}, this.advancedSearch.toUrlObject(), { search })
164     })
165   }
166 }