aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2018-07-24 11:40:04 +0200
committerChocobozzz <me@florianbigard.com>2018-07-24 14:04:05 +0200
commit4278710d5b48546709720fac46657b84bba52a18 (patch)
tree625adb1ca2701b6b2dd02044a8fbe68eac2dda18 /client/src/app
parentd411245096b7c9ec06e6fa2ceff7aa7b0fc0c3b7 (diff)
downloadPeerTube-4278710d5b48546709720fac46657b84bba52a18.tar.gz
PeerTube-4278710d5b48546709720fac46657b84bba52a18.tar.zst
PeerTube-4278710d5b48546709720fac46657b84bba52a18.zip
Add ability to click on category/licence/language/tags in watch page
Diffstat (limited to 'client/src/app')
-rw-r--r--client/src/app/search/advanced-search.model.ts18
-rw-r--r--client/src/app/search/search.component.html5
-rw-r--r--client/src/app/search/search.component.ts3
-rw-r--r--client/src/app/search/search.service.ts3
-rw-r--r--client/src/app/videos/+video-watch/video-watch.component.html58
-rw-r--r--client/src/app/videos/+video-watch/video-watch.component.scss17
-rw-r--r--client/src/app/videos/+video-watch/video-watch.component.ts2
7 files changed, 65 insertions, 41 deletions
diff --git a/client/src/app/search/advanced-search.model.ts b/client/src/app/search/advanced-search.model.ts
index ce22c3f84..48616a9ae 100644
--- a/client/src/app/search/advanced-search.model.ts
+++ b/client/src/app/search/advanced-search.model.ts
@@ -99,14 +99,22 @@ export class AdvancedSearch {
99 startDate: this.startDate, 99 startDate: this.startDate,
100 endDate: this.endDate, 100 endDate: this.endDate,
101 nsfw: this.nsfw, 101 nsfw: this.nsfw,
102 categoryOneOf: this.categoryOneOf ? this.categoryOneOf.split(',') : undefined, 102 categoryOneOf: this.intoArray(this.categoryOneOf),
103 licenceOneOf: this.licenceOneOf ? this.licenceOneOf.split(',') : undefined, 103 licenceOneOf: this.intoArray(this.licenceOneOf),
104 languageOneOf: this.languageOneOf ? this.languageOneOf.split(',') : undefined, 104 languageOneOf: this.intoArray(this.languageOneOf),
105 tagsOneOf: this.tagsOneOf ? this.tagsOneOf.split(',') : undefined, 105 tagsOneOf: this.intoArray(this.tagsOneOf),
106 tagsAllOf: this.tagsAllOf ? this.tagsAllOf.split(',') : undefined, 106 tagsAllOf: this.intoArray(this.tagsAllOf),
107 durationMin: this.durationMin, 107 durationMin: this.durationMin,
108 durationMax: this.durationMax, 108 durationMax: this.durationMax,
109 sort: this.sort 109 sort: this.sort
110 } 110 }
111 } 111 }
112
113 private intoArray (value: any) {
114 if (!value) return undefined
115
116 if (typeof value === 'string') return value.split(',')
117
118 return [ value ]
119 }
112} 120}
diff --git a/client/src/app/search/search.component.html b/client/src/app/search/search.component.html
index a0b5e6e79..9d14daa4b 100644
--- a/client/src/app/search/search.component.html
+++ b/client/src/app/search/search.component.html
@@ -3,7 +3,10 @@
3 <div class="first-line"> 3 <div class="first-line">
4 <div class="results-counter"> 4 <div class="results-counter">
5 <ng-container *ngIf="pagination.totalItems"> 5 <ng-container *ngIf="pagination.totalItems">
6 {{ pagination.totalItems | myNumberFormatter }} results for <span class="search-value">{{ currentSearch }}</span> 6 {{ pagination.totalItems | myNumberFormatter }} results
7 <span *ngIf="currentSearch">
8 for <span class="search-value">{{ currentSearch }}</span>
9 </span>
7 </ng-container> 10 </ng-container>
8 </div> 11 </div>
9 12
diff --git a/client/src/app/search/search.component.ts b/client/src/app/search/search.component.ts
index 8860b9268..8d615fd05 100644
--- a/client/src/app/search/search.component.ts
+++ b/client/src/app/search/search.component.ts
@@ -44,7 +44,8 @@ export class SearchComponent implements OnInit, OnDestroy {
44 queryParams => { 44 queryParams => {
45 const querySearch = queryParams['search'] 45 const querySearch = queryParams['search']
46 46
47 if (!querySearch) return this.redirectService.redirectToHomepage() 47 // New empty search
48 if (this.currentSearch && !querySearch) return this.redirectService.redirectToHomepage()
48 49
49 // Search updated, reset filters 50 // Search updated, reset filters
50 if (this.currentSearch !== querySearch) { 51 if (this.currentSearch !== querySearch) {
diff --git a/client/src/app/search/search.service.ts b/client/src/app/search/search.service.ts
index b46cb97f4..a37c49161 100644
--- a/client/src/app/search/search.service.ts
+++ b/client/src/app/search/search.service.ts
@@ -36,7 +36,8 @@ export class SearchService {
36 36
37 let params = new HttpParams() 37 let params = new HttpParams()
38 params = this.restService.addRestGetParams(params, pagination) 38 params = this.restService.addRestGetParams(params, pagination)
39 params = params.append('search', search) 39
40 if (search) params = params.append('search', search)
40 41
41 const advancedSearchObject = advancedSearch.toAPIObject() 42 const advancedSearchObject = advancedSearch.toAPIObject()
42 43
diff --git a/client/src/app/videos/+video-watch/video-watch.component.html b/client/src/app/videos/+video-watch/video-watch.component.html
index e7e9f367c..8764d38c7 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.html
+++ b/client/src/app/videos/+video-watch/video-watch.component.html
@@ -135,49 +135,43 @@
135 135
136 <div class="video-attributes"> 136 <div class="video-attributes">
137 <div class="video-attribute"> 137 <div class="video-attribute">
138 <span i18n class="video-attribute-label"> 138 <span i18n class="video-attribute-label">Privacy</span>
139 Privacy 139 <span class="video-attribute-value">{{ video.privacy.label }}</span>
140 </span>
141 <span class="video-attribute-value">
142 {{ video.privacy.label }}
143 </span>
144 </div> 140 </div>
145 141
146 <div class="video-attribute"> 142 <div class="video-attribute">
147 <span i18n class="video-attribute-label"> 143 <span i18n class="video-attribute-label">Category</span>
148 Category 144 <span *ngIf="!video.category.id" class="video-attribute-value">{{ video.category.label }}</span>
149 </span> 145 <a
150 <span class="video-attribute-value"> 146 *ngIf="video.category.id" class="video-attribute-value"
151 {{ video.category.label }} 147 [routerLink]="[ '/search' ]" [queryParams]="{ categoryOneOf: [ video.category.id ] }"
152 </span> 148 >{{ video.category.label }}</a>
153 </div> 149 </div>
154 150
155 <div class="video-attribute"> 151 <div class="video-attribute">
156 <span i18n class="video-attribute-label"> 152 <span i18n class="video-attribute-label">Licence</span>
157 Licence 153 <span *ngIf="!video.licence.id" class="video-attribute-value">{{ video.licence.label }}</span>
158 </span> 154 <a
159 <span class="video-attribute-value"> 155 *ngIf="video.licence.id" class="video-attribute-value"
160 {{ video.licence.label }} 156 [routerLink]="[ '/search' ]" [queryParams]="{ licenceOneOf: [ video.licence.id ] }"
161 </span> 157 >{{ video.licence.label }}</a>
162 </div> 158 </div>
163 159
164 <div class="video-attribute"> 160 <div class="video-attribute">
165 <span i18n class="video-attribute-label"> 161 <span i18n class="video-attribute-label">Language</span>
166 Language 162 <span *ngIf="!video.language.id" class="video-attribute-value">{{ video.language.label }}</span>
167 </span> 163 <a
168 <span class="video-attribute-value"> 164 *ngIf="video.language.id" class="video-attribute-value"
169 {{ video.language.label }} 165 [routerLink]="[ '/search' ]" [queryParams]="{ languageOneOf: [ video.language.id ] }"
170 </span> 166 >{{ video.language.label }}</a>
171 </div> 167 </div>
172 168
173 <div class="video-attribute"> 169 <div class="video-attribute video-attribute-tags">
174 <span i18n class="video-attribute-label"> 170 <span i18n class="video-attribute-label">Tags</span>
175 Tags 171 <a
176 </span> 172 *ngFor="let tag of getVideoTags()"
177 173 class="video-attribute-value" [routerLink]="[ '/search' ]" [queryParams]="{ tagsOneOf: [ tag ] }"
178 <span class="video-attribute-value"> 174 >{{ tag }}</a>
179 {{ getVideoTags() }}
180 </span>
181 </div> 175 </div>
182 </div> 176 </div>
183 177
diff --git a/client/src/app/videos/+video-watch/video-watch.component.scss b/client/src/app/videos/+video-watch/video-watch.component.scss
index a2d56bd39..7bc2cae02 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.scss
+++ b/client/src/app/videos/+video-watch/video-watch.component.scss
@@ -306,6 +306,23 @@
306 color: #585858; 306 color: #585858;
307 font-weight: $font-bold; 307 font-weight: $font-bold;
308 } 308 }
309
310 a.video-attribute-value {
311 @include disable-default-a-behaviour;
312 color: #000;
313
314 &:hover {
315 opacity: 0.9;
316 }
317 }
318
319 &.video-attribute-tags {
320 .video-attribute-value:not(:nth-child(2)) {
321 &::before {
322 content: ', '
323 }
324 }
325 }
309 } 326 }
310 } 327 }
311 328
diff --git a/client/src/app/videos/+video-watch/video-watch.component.ts b/client/src/app/videos/+video-watch/video-watch.component.ts
index ff8baaeb3..afbb0c596 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.ts
+++ b/client/src/app/videos/+video-watch/video-watch.component.ts
@@ -252,7 +252,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
252 getVideoTags () { 252 getVideoTags () {
253 if (!this.video || Array.isArray(this.video.tags) === false) return [] 253 if (!this.video || Array.isArray(this.video.tags) === false) return []
254 254
255 return this.video.tags.join(', ') 255 return this.video.tags
256 } 256 }
257 257
258 isVideoRemovable () { 258 isVideoRemovable () {