aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/shared
diff options
context:
space:
mode:
authorChocobozzz <florian.bigard@gmail.com>2017-12-05 17:46:33 +0100
committerChocobozzz <florian.bigard@gmail.com>2017-12-05 18:25:29 +0100
commitf3aaa9a95cc2b61f1f255472d7014d08faa66561 (patch)
tree95e70c8d0ed5b6f1c71c32a77cb7d6cf8478c9d4 /client/src/app/shared
parentd235f6b0d1054a2a3451dacade927caefce8f30c (diff)
downloadPeerTube-f3aaa9a95cc2b61f1f255472d7014d08faa66561.tar.gz
PeerTube-f3aaa9a95cc2b61f1f255472d7014d08faa66561.tar.zst
PeerTube-f3aaa9a95cc2b61f1f255472d7014d08faa66561.zip
Fix client search
Diffstat (limited to 'client/src/app/shared')
-rw-r--r--client/src/app/shared/index.ts1
-rw-r--r--client/src/app/shared/misc/utils.ts18
-rw-r--r--client/src/app/shared/search/index.ts4
-rw-r--r--client/src/app/shared/search/search-field.type.ts1
-rw-r--r--client/src/app/shared/search/search.component.html10
-rw-r--r--client/src/app/shared/search/search.component.scss39
-rw-r--r--client/src/app/shared/search/search.component.ts42
-rw-r--r--client/src/app/shared/search/search.model.ts6
-rw-r--r--client/src/app/shared/search/search.service.ts18
-rw-r--r--client/src/app/shared/shared.module.ts4
-rw-r--r--client/src/app/shared/video/abstract-video-list.ts24
-rw-r--r--client/src/app/shared/video/video.service.ts9
12 files changed, 34 insertions, 142 deletions
diff --git a/client/src/app/shared/index.ts b/client/src/app/shared/index.ts
index 79bf5ef43..413dda16a 100644
--- a/client/src/app/shared/index.ts
+++ b/client/src/app/shared/index.ts
@@ -1,7 +1,6 @@
1export * from './auth' 1export * from './auth'
2export * from './forms' 2export * from './forms'
3export * from './rest' 3export * from './rest'
4export * from './search'
5export * from './users' 4export * from './users'
6export * from './video-abuse' 5export * from './video-abuse'
7export * from './video-blacklist' 6export * from './video-blacklist'
diff --git a/client/src/app/shared/misc/utils.ts b/client/src/app/shared/misc/utils.ts
new file mode 100644
index 000000000..2b5c3686e
--- /dev/null
+++ b/client/src/app/shared/misc/utils.ts
@@ -0,0 +1,18 @@
1// Thanks: https://stackoverflow.com/questions/901115/how-can-i-get-query-string-values-in-javascript
2
3function getParameterByName (name: string, url: string) {
4 if (!url) url = window.location.href
5 name = name.replace(/[\[\]]/g, '\\$&')
6
7 const regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)')
8 const results = regex.exec(url)
9
10 if (!results) return null
11 if (!results[2]) return ''
12
13 return decodeURIComponent(results[2].replace(/\+/g, ' '))
14}
15
16export {
17 getParameterByName
18}
diff --git a/client/src/app/shared/search/index.ts b/client/src/app/shared/search/index.ts
deleted file mode 100644
index d4016cf89..000000000
--- a/client/src/app/shared/search/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
1export * from './search-field.type'
2export * from './search.component'
3export * from './search.model'
4export * from './search.service'
diff --git a/client/src/app/shared/search/search-field.type.ts b/client/src/app/shared/search/search-field.type.ts
deleted file mode 100644
index 7323d6cc3..000000000
--- a/client/src/app/shared/search/search-field.type.ts
+++ /dev/null
@@ -1 +0,0 @@
1export type SearchField = 'name' | 'account' | 'host' | 'tags'
diff --git a/client/src/app/shared/search/search.component.html b/client/src/app/shared/search/search.component.html
deleted file mode 100644
index 9bc9bafe4..000000000
--- a/client/src/app/shared/search/search.component.html
+++ /dev/null
@@ -1,10 +0,0 @@
1<input
2 type="text" id="search-video" name="search-video" placeholder="Search..."
3 [(ngModel)]="searchCriteria.value" (keyup.enter)="doSearch()"
4>
5<span (click)="doSearch()" class="icon icon-search"></span>
6
7<a class="upload-button" routerLink="/videos/upload">
8 <span class="icon icon-upload"></span>
9 Upload
10</a>
diff --git a/client/src/app/shared/search/search.component.scss b/client/src/app/shared/search/search.component.scss
deleted file mode 100644
index 7ba8ef26c..000000000
--- a/client/src/app/shared/search/search.component.scss
+++ /dev/null
@@ -1,39 +0,0 @@
1#search-video {
2 @include peertube-input-text($search-input-width);
3 margin-right: 15px;
4 padding-right: 25px; // For the search icon
5
6 &::placeholder {
7 color: #000;
8 }
9}
10
11.icon.icon-search {
12 display: inline-block;
13 background: url('../../../assets/images/header/search.svg') no-repeat;
14 background-size: contain;
15 width: 25px;
16 height: 21px;
17 vertical-align: middle;
18 cursor: pointer;
19 // yolo
20 position: absolute;
21 margin-left: -50px;
22 margin-top: 5px;
23}
24
25.upload-button {
26 @include peertube-button-link;
27
28 margin-right: 25px;
29
30 .icon.icon-upload {
31 display: inline-block;
32 background: url('../../../assets/images/header/upload.svg') no-repeat;
33 background-size: contain;
34 width: 22px;
35 height: 24px;
36 vertical-align: middle;
37 margin-right: 6px;
38 }
39}
diff --git a/client/src/app/shared/search/search.component.ts b/client/src/app/shared/search/search.component.ts
deleted file mode 100644
index f49ecc8ad..000000000
--- a/client/src/app/shared/search/search.component.ts
+++ /dev/null
@@ -1,42 +0,0 @@
1import { Component, OnInit } from '@angular/core'
2import { Router } from '@angular/router'
3import { Search } from './search.model'
4import { SearchService } from './search.service'
5
6@Component({
7 selector: 'my-search',
8 templateUrl: './search.component.html',
9 styleUrls: [ './search.component.scss' ]
10})
11
12export class SearchComponent implements OnInit {
13 searchCriteria: Search = {
14 field: 'name',
15 value: ''
16 }
17
18 constructor (private searchService: SearchService, private router: Router) {}
19
20 ngOnInit () {
21 // Subscribe if the search changed
22 // Usually changed by videos list component
23 this.searchService.updateSearch.subscribe(
24 newSearchCriteria => {
25 // Put a field by default
26 if (!newSearchCriteria.field) {
27 newSearchCriteria.field = 'name'
28 }
29
30 this.searchCriteria = newSearchCriteria
31 }
32 )
33 }
34
35 doSearch () {
36 // if (this.router.url.indexOf('/videos/list') === -1) {
37 // this.router.navigate([ '/videos/list' ])
38 // }
39
40 this.searchService.searchUpdated.next(this.searchCriteria)
41 }
42}
diff --git a/client/src/app/shared/search/search.model.ts b/client/src/app/shared/search/search.model.ts
deleted file mode 100644
index 174adf2c6..000000000
--- a/client/src/app/shared/search/search.model.ts
+++ /dev/null
@@ -1,6 +0,0 @@
1import { SearchField } from './search-field.type'
2
3export interface Search {
4 field: SearchField
5 value: string
6}
diff --git a/client/src/app/shared/search/search.service.ts b/client/src/app/shared/search/search.service.ts
deleted file mode 100644
index 0480b46bd..000000000
--- a/client/src/app/shared/search/search.service.ts
+++ /dev/null
@@ -1,18 +0,0 @@
1import { Injectable } from '@angular/core'
2import { Subject } from 'rxjs/Subject'
3import { ReplaySubject } from 'rxjs/ReplaySubject'
4
5import { Search } from './search.model'
6
7// This class is needed to communicate between videos/ and search component
8// Remove it when we'll be able to subscribe to router changes
9@Injectable()
10export class SearchService {
11 searchUpdated: Subject<Search>
12 updateSearch: Subject<Search>
13
14 constructor () {
15 this.updateSearch = new Subject<Search>()
16 this.searchUpdated = new ReplaySubject<Search>(1)
17 }
18}
diff --git a/client/src/app/shared/shared.module.ts b/client/src/app/shared/shared.module.ts
index f7ced040d..86e1a380e 100644
--- a/client/src/app/shared/shared.module.ts
+++ b/client/src/app/shared/shared.module.ts
@@ -17,7 +17,6 @@ import { FromNowPipe } from './misc/from-now.pipe'
17import { LoaderComponent } from './misc/loader.component' 17import { LoaderComponent } from './misc/loader.component'
18import { NumberFormatterPipe } from './misc/number-formatter.pipe' 18import { NumberFormatterPipe } from './misc/number-formatter.pipe'
19import { RestExtractor, RestService } from './rest' 19import { RestExtractor, RestService } from './rest'
20import { SearchComponent, SearchService } from './search'
21import { UserService } from './users' 20import { UserService } from './users'
22import { VideoAbuseService } from './video-abuse' 21import { VideoAbuseService } from './video-abuse'
23import { VideoBlacklistService } from './video-blacklist' 22import { VideoBlacklistService } from './video-blacklist'
@@ -43,7 +42,6 @@ import { VideoService } from './video/video.service'
43 ], 42 ],
44 43
45 declarations: [ 44 declarations: [
46 SearchComponent,
47 LoaderComponent, 45 LoaderComponent,
48 VideoThumbnailComponent, 46 VideoThumbnailComponent,
49 NumberFormatterPipe, 47 NumberFormatterPipe,
@@ -66,7 +64,6 @@ import { VideoService } from './video/video.service'
66 BytesPipe, 64 BytesPipe,
67 KeysPipe, 65 KeysPipe,
68 66
69 SearchComponent,
70 LoaderComponent, 67 LoaderComponent,
71 VideoThumbnailComponent, 68 VideoThumbnailComponent,
72 69
@@ -78,7 +75,6 @@ import { VideoService } from './video/video.service'
78 AUTH_INTERCEPTOR_PROVIDER, 75 AUTH_INTERCEPTOR_PROVIDER,
79 RestExtractor, 76 RestExtractor,
80 RestService, 77 RestService,
81 SearchService,
82 VideoAbuseService, 78 VideoAbuseService,
83 VideoBlacklistService, 79 VideoBlacklistService,
84 UserService, 80 UserService,
diff --git a/client/src/app/shared/video/abstract-video-list.ts b/client/src/app/shared/video/abstract-video-list.ts
index cf717cf4c..84ca5cbe4 100644
--- a/client/src/app/shared/video/abstract-video-list.ts
+++ b/client/src/app/shared/video/abstract-video-list.ts
@@ -1,25 +1,25 @@
1import { OnDestroy, OnInit } from '@angular/core' 1import { OnInit } from '@angular/core'
2import { ActivatedRoute, Router } from '@angular/router' 2import { ActivatedRoute, Router } from '@angular/router'
3import { NotificationsService } from 'angular2-notifications' 3import { NotificationsService } from 'angular2-notifications'
4import { Observable } from 'rxjs/Observable' 4import { Observable } from 'rxjs/Observable'
5import { Subscription } from 'rxjs/Subscription'
6import { SortField } from './sort-field.type' 5import { SortField } from './sort-field.type'
7import { VideoPagination } from './video-pagination.model' 6import { VideoPagination } from './video-pagination.model'
8import { Video } from './video.model' 7import { Video } from './video.model'
9 8
10export abstract class AbstractVideoList implements OnInit, OnDestroy { 9export abstract class AbstractVideoList implements OnInit {
11 pagination: VideoPagination = { 10 pagination: VideoPagination = {
12 currentPage: 1, 11 currentPage: 1,
13 itemsPerPage: 25, 12 itemsPerPage: 25,
14 totalItems: null 13 totalItems: null
15 } 14 }
16 sort: SortField = '-createdAt' 15 sort: SortField = '-createdAt'
16 defaultSort: SortField = '-createdAt'
17 videos: Video[] = [] 17 videos: Video[] = []
18 loadOnInit = true
18 19
19 protected notificationsService: NotificationsService 20 protected notificationsService: NotificationsService
20 protected router: Router 21 protected router: Router
21 protected route: ActivatedRoute 22 protected route: ActivatedRoute
22 protected subActivatedRoute: Subscription
23 23
24 protected abstract currentRoute: string 24 protected abstract currentRoute: string
25 25
@@ -32,13 +32,7 @@ export abstract class AbstractVideoList implements OnInit, OnDestroy {
32 // Subscribe to route changes 32 // Subscribe to route changes
33 const routeParams = this.route.snapshot.params 33 const routeParams = this.route.snapshot.params
34 this.loadRouteParams(routeParams) 34 this.loadRouteParams(routeParams)
35 this.loadMoreVideos('after') 35 if (this.loadOnInit === true) this.loadMoreVideos('after')
36 }
37
38 ngOnDestroy () {
39 if (this.subActivatedRoute) {
40 this.subActivatedRoute.unsubscribe()
41 }
42 } 36 }
43 37
44 onNearOfTop () { 38 onNearOfTop () {
@@ -53,6 +47,12 @@ export abstract class AbstractVideoList implements OnInit, OnDestroy {
53 } 47 }
54 } 48 }
55 49
50 reloadVideos () {
51 this.videos = []
52 this.loadedPages = {}
53 this.loadMoreVideos('before')
54 }
55
56 loadMoreVideos (where: 'before' | 'after') { 56 loadMoreVideos (where: 'before' | 'after') {
57 if (this.loadedPages[this.pagination.currentPage] === true) return 57 if (this.loadedPages[this.pagination.currentPage] === true) return
58 58
@@ -105,7 +105,7 @@ export abstract class AbstractVideoList implements OnInit, OnDestroy {
105 } 105 }
106 106
107 protected loadRouteParams (routeParams: { [ key: string ]: any }) { 107 protected loadRouteParams (routeParams: { [ key: string ]: any }) {
108 this.sort = routeParams['sort'] as SortField || '-createdAt' 108 this.sort = routeParams['sort'] as SortField || this.defaultSort
109 109
110 if (routeParams['page'] !== undefined) { 110 if (routeParams['page'] !== undefined) {
111 this.pagination.currentPage = parseInt(routeParams['page'], 10) 111 this.pagination.currentPage = parseInt(routeParams['page'], 10)
diff --git a/client/src/app/shared/video/video.service.ts b/client/src/app/shared/video/video.service.ts
index b2a26417c..3f35b67c4 100644
--- a/client/src/app/shared/video/video.service.ts
+++ b/client/src/app/shared/video/video.service.ts
@@ -11,7 +11,7 @@ import { VideoRateType } from '../../../../../shared/models/videos/video-rate.ty
11import { VideoUpdate } from '../../../../../shared/models/videos/video-update.model' 11import { VideoUpdate } from '../../../../../shared/models/videos/video-update.model'
12import { RestExtractor } from '../rest/rest-extractor.service' 12import { RestExtractor } from '../rest/rest-extractor.service'
13import { RestService } from '../rest/rest.service' 13import { RestService } from '../rest/rest.service'
14import { Search } from '../search/search.model' 14import { Search } from '../header/search.model'
15import { UserService } from '../users/user.service' 15import { UserService } from '../users/user.service'
16import { SortField } from './sort-field.type' 16import { SortField } from './sort-field.type'
17import { VideoDetails } from './video-details.model' 17import { VideoDetails } from './video-details.model'
@@ -91,15 +91,14 @@ export class VideoService {
91 .catch((res) => this.restExtractor.handleError(res)) 91 .catch((res) => this.restExtractor.handleError(res))
92 } 92 }
93 93
94 searchVideos (search: Search, videoPagination: VideoPagination, sort: SortField): Observable<{ videos: Video[], totalVideos: number}> { 94 searchVideos (search: string, videoPagination: VideoPagination, sort: SortField): Observable<{ videos: Video[], totalVideos: number}> {
95 const url = VideoService.BASE_VIDEO_URL + 'search/' + encodeURIComponent(search.value) 95 const url = VideoService.BASE_VIDEO_URL + 'search'
96 96
97 const pagination = this.videoPaginationToRestPagination(videoPagination) 97 const pagination = this.videoPaginationToRestPagination(videoPagination)
98 98
99 let params = new HttpParams() 99 let params = new HttpParams()
100 params = this.restService.addRestGetParams(params, pagination, sort) 100 params = this.restService.addRestGetParams(params, pagination, sort)
101 101 params = params.append('search', search)
102 if (search.field) params.set('field', search.field)
103 102
104 return this.authHttp 103 return this.authHttp
105 .get<ResultList<VideoServerModel>>(url, { params }) 104 .get<ResultList<VideoServerModel>>(url, { params })