From 4278710d5b48546709720fac46657b84bba52a18 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Tue, 24 Jul 2018 11:40:04 +0200 Subject: Add ability to click on category/licence/language/tags in watch page --- client/src/app/search/advanced-search.model.ts | 18 +++++-- client/src/app/search/search.component.html | 5 +- client/src/app/search/search.component.ts | 3 +- client/src/app/search/search.service.ts | 3 +- .../videos/+video-watch/video-watch.component.html | 58 ++++++++++------------ .../videos/+video-watch/video-watch.component.scss | 17 +++++++ .../videos/+video-watch/video-watch.component.ts | 2 +- 7 files changed, 65 insertions(+), 41 deletions(-) (limited to 'client') 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 { startDate: this.startDate, endDate: this.endDate, nsfw: this.nsfw, - categoryOneOf: this.categoryOneOf ? this.categoryOneOf.split(',') : undefined, - licenceOneOf: this.licenceOneOf ? this.licenceOneOf.split(',') : undefined, - languageOneOf: this.languageOneOf ? this.languageOneOf.split(',') : undefined, - tagsOneOf: this.tagsOneOf ? this.tagsOneOf.split(',') : undefined, - tagsAllOf: this.tagsAllOf ? this.tagsAllOf.split(',') : undefined, + categoryOneOf: this.intoArray(this.categoryOneOf), + licenceOneOf: this.intoArray(this.licenceOneOf), + languageOneOf: this.intoArray(this.languageOneOf), + tagsOneOf: this.intoArray(this.tagsOneOf), + tagsAllOf: this.intoArray(this.tagsAllOf), durationMin: this.durationMin, durationMax: this.durationMax, sort: this.sort } } + + private intoArray (value: any) { + if (!value) return undefined + + if (typeof value === 'string') return value.split(',') + + return [ value ] + } } 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 @@
- {{ pagination.totalItems | myNumberFormatter }} results for {{ currentSearch }} + {{ pagination.totalItems | myNumberFormatter }} results + + for {{ currentSearch }} +
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 { queryParams => { const querySearch = queryParams['search'] - if (!querySearch) return this.redirectService.redirectToHomepage() + // New empty search + if (this.currentSearch && !querySearch) return this.redirectService.redirectToHomepage() // Search updated, reset filters 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 { let params = new HttpParams() params = this.restService.addRestGetParams(params, pagination) - params = params.append('search', search) + + if (search) params = params.append('search', search) const advancedSearchObject = advancedSearch.toAPIObject() 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 @@
- - Privacy - - - {{ video.privacy.label }} - + Privacy + {{ video.privacy.label }}
- - Category - - - {{ video.category.label }} - + Category + {{ video.category.label }} + {{ video.category.label }}
- - Licence - - - {{ video.licence.label }} - + Licence + {{ video.licence.label }} + {{ video.licence.label }}
- - Language - - - {{ video.language.label }} - + Language + {{ video.language.label }} + {{ video.language.label }}
-
- - Tags - - - - {{ getVideoTags() }} - +
+ Tags + {{ tag }}
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 @@ color: #585858; font-weight: $font-bold; } + + a.video-attribute-value { + @include disable-default-a-behaviour; + color: #000; + + &:hover { + opacity: 0.9; + } + } + + &.video-attribute-tags { + .video-attribute-value:not(:nth-child(2)) { + &::before { + content: ', ' + } + } + } } } 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 { getVideoTags () { if (!this.video || Array.isArray(this.video.tags) === false) return [] - return this.video.tags.join(', ') + return this.video.tags } isVideoRemovable () { -- cgit v1.2.3