forks/peertube
1
0
Fork 0
Code Releases Activity

Add ability to click on category/licence/language/tags in watch page

Browse source
This commit is contained in:
Chocobozzz 2018-07-24 11:40:04 +02:00
parent d411245096
commit 4278710d5b
7 changed files with 65 additions and 41 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
client/src/app/search/advanced-search.model.ts
View file

@ -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 ]
}
}

5
client/src/app/search/search.component.html
View file

@ -3,7 +3,10 @@
<div class="first-line">
<div class="results-counter">
<ng-container *ngIf="pagination.totalItems">
{{ pagination.totalItems | myNumberFormatter }} results for <span class="search-value">{{ currentSearch }}</span>
{{ pagination.totalItems | myNumberFormatter }} results
<span *ngIf="currentSearch">
for <span class="search-value">{{ currentSearch }}</span>
</span>
</ng-container>
</div>

3
client/src/app/search/search.component.ts
View file

@ -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) {

3
client/src/app/search/search.service.ts
View file

@ -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()

58
client/src/app/videos/+video-watch/video-watch.component.html
View file

@ -135,49 +135,43 @@
<div class="video-attributes">
<div class="video-attribute">
<span i18n class="video-attribute-label">
Privacy
</span>
<span class="video-attribute-value">
{{ video.privacy.label }}
</span>
<span i18n class="video-attribute-label">Privacy</span>
<span class="video-attribute-value">{{ video.privacy.label }}</span>
</div>
<div class="video-attribute">
<span i18n class="video-attribute-label">
Category
</span>
<span class="video-attribute-value">
{{ video.category.label }}
</span>
<span i18n class="video-attribute-label">Category</span>
<span *ngIf="!video.category.id" class="video-attribute-value">{{ video.category.label }}</span>
<a
*ngIf="video.category.id" class="video-attribute-value"
[routerLink]="[ '/search' ]" [queryParams]="{ categoryOneOf: [ video.category.id ] }"
>{{ video.category.label }}</a>
</div>
<div class="video-attribute">
<span i18n class="video-attribute-label">
Licence
</span>
<span class="video-attribute-value">
{{ video.licence.label }}
</span>
<span i18n class="video-attribute-label">Licence</span>
<span *ngIf="!video.licence.id" class="video-attribute-value">{{ video.licence.label }}</span>
<a
*ngIf="video.licence.id" class="video-attribute-value"
[routerLink]="[ '/search' ]" [queryParams]="{ licenceOneOf: [ video.licence.id ] }"
>{{ video.licence.label }}</a>
</div>
<div class="video-attribute">
<span i18n class="video-attribute-label">
Language
</span>
<span class="video-attribute-value">
{{ video.language.label }}
</span>
<span i18n class="video-attribute-label">Language</span>
<span *ngIf="!video.language.id" class="video-attribute-value">{{ video.language.label }}</span>
<a
*ngIf="video.language.id" class="video-attribute-value"
[routerLink]="[ '/search' ]" [queryParams]="{ languageOneOf: [ video.language.id ] }"
>{{ video.language.label }}</a>
</div>
<div class="video-attribute">
<span i18n class="video-attribute-label">
Tags
</span>
<span class="video-attribute-value">
{{ getVideoTags() }}
</span>
<div class="video-attribute video-attribute-tags">
<span i18n class="video-attribute-label">Tags</span>
<a
*ngFor="let tag of getVideoTags()"
class="video-attribute-value" [routerLink]="[ '/search' ]" [queryParams]="{ tagsOneOf: [ tag ] }"
>{{ tag }}</a>
</div>
</div>

17
client/src/app/videos/+video-watch/video-watch.component.scss
View file

@ -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: ', '
}
}
}
}
}

2
client/src/app/videos/+video-watch/video-watch.component.ts
View file

@ -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 () {