1
0
Fork 0

Add ability to search live videos

This commit is contained in:
Chocobozzz 2021-05-05 12:10:00 +02:00
parent c9783c7b72
commit 7a22a0a56a
No known key found for this signature in database
GPG Key ID: 583A612D890159BE
4 changed files with 62 additions and 22 deletions

View File

@ -16,6 +16,25 @@
</div> </div>
</div> </div>
<div class="form-group">
<div class="radio-label label-container">
<label i18n>Display only</label>
<button i18n class="reset-button reset-button-small" (click)="resetField('isLive')" *ngIf="advancedSearch.isLive !== undefined">
Reset
</button>
</div>
<div class="peertube-radio-container">
<input type="radio" name="isLive" id="isLiveTrue" value="true" [(ngModel)]="advancedSearch.isLive">
<label i18n for="isLiveTrue" class="radio">Live videos</label>
</div>
<div class="peertube-radio-container">
<input type="radio" name="isLive" id="isLiveFalse" value="false" [(ngModel)]="advancedSearch.isLive">
<label i18n for="isLiveFalse" class="radio">VOD videos</label>
</div>
</div>
<div class="form-group"> <div class="form-group">
<div class="radio-label label-container"> <div class="radio-label label-container">
<label i18n>Display sensitive content</label> <label i18n>Display sensitive content</label>
@ -44,7 +63,7 @@
</div> </div>
<div class="peertube-radio-container" *ngFor="let date of publishedDateRanges"> <div class="peertube-radio-container" *ngFor="let date of publishedDateRanges">
<input type="radio" (change)="inputUpdated()" name="publishedDateRange" [id]="date.id" [value]="date.id" [(ngModel)]="publishedDateRange"> <input type="radio" (change)="onInputUpdated()" name="publishedDateRange" [id]="date.id" [value]="date.id" [(ngModel)]="publishedDateRange">
<label [for]="date.id" class="radio">{{ date.label }}</label> <label [for]="date.id" class="radio">{{ date.label }}</label>
</div> </div>
</div> </div>
@ -60,7 +79,7 @@
<div class="row"> <div class="row">
<div class="pl-0 col-sm-6"> <div class="pl-0 col-sm-6">
<input <input
(change)="inputUpdated()" (change)="onInputUpdated()"
(keydown.enter)="$event.preventDefault()" (keydown.enter)="$event.preventDefault()"
type="text" id="original-publication-after" name="original-publication-after" type="text" id="original-publication-after" name="original-publication-after"
i18n-placeholder placeholder="After..." i18n-placeholder placeholder="After..."
@ -70,7 +89,7 @@
</div> </div>
<div class="pr-0 col-sm-6"> <div class="pr-0 col-sm-6">
<input <input
(change)="inputUpdated()" (change)="onInputUpdated()"
(keydown.enter)="$event.preventDefault()" (keydown.enter)="$event.preventDefault()"
type="text" id="original-publication-before" name="original-publication-before" type="text" id="original-publication-before" name="original-publication-before"
i18n-placeholder placeholder="Before..." i18n-placeholder placeholder="Before..."
@ -93,7 +112,7 @@
</div> </div>
<div class="peertube-radio-container" *ngFor="let duration of durationRanges"> <div class="peertube-radio-container" *ngFor="let duration of durationRanges">
<input type="radio" (change)="inputUpdated()" name="durationRange" [id]="duration.id" [value]="duration.id" [(ngModel)]="durationRange"> <input type="radio" (change)="onInputUpdated()" name="durationRange" [id]="duration.id" [value]="duration.id" [(ngModel)]="durationRange">
<label [for]="duration.id" class="radio">{{ duration.label }}</label> <label [for]="duration.id" class="radio">{{ duration.label }}</label>
</div> </div>
</div> </div>

View File

@ -3,6 +3,8 @@ import { ServerService } from '@app/core'
import { AdvancedSearch } from '@app/shared/shared-search' import { AdvancedSearch } from '@app/shared/shared-search'
import { ServerConfig, VideoConstant } from '@shared/models' import { ServerConfig, VideoConstant } from '@shared/models'
type FormOption = { id: string, label: string }
@Component({ @Component({
selector: 'my-search-filters', selector: 'my-search-filters',
styleUrls: [ './search-filters.component.scss' ], styleUrls: [ './search-filters.component.scss' ],
@ -17,9 +19,10 @@ export class SearchFiltersComponent implements OnInit {
videoLicences: VideoConstant<number>[] = [] videoLicences: VideoConstant<number>[] = []
videoLanguages: VideoConstant<string>[] = [] videoLanguages: VideoConstant<string>[] = []
publishedDateRanges: { id: string, label: string }[] = [] publishedDateRanges: FormOption[] = []
sorts: { id: string, label: string }[] = [] sorts: FormOption[] = []
durationRanges: { id: string, label: string }[] = [] durationRanges: FormOption[] = []
videoType: FormOption[] = []
publishedDateRange: string publishedDateRange: string
durationRange: string durationRange: string
@ -33,10 +36,6 @@ export class SearchFiltersComponent implements OnInit {
private serverService: ServerService private serverService: ServerService
) { ) {
this.publishedDateRanges = [ this.publishedDateRanges = [
{
id: 'any_published_date',
label: $localize`Any`
},
{ {
id: 'today', id: 'today',
label: $localize`Today` label: $localize`Today`
@ -55,11 +54,18 @@ export class SearchFiltersComponent implements OnInit {
} }
] ]
this.durationRanges = [ this.videoType = [
{ {
id: 'any_duration', id: 'vod',
label: $localize`Any` label: $localize`VOD videos`
}, },
{
id: 'live',
label: $localize`Live videos`
}
]
this.durationRanges = [
{ {
id: 'short', id: 'short',
label: $localize`Short (< 4 min)` label: $localize`Short (< 4 min)`
@ -104,24 +110,26 @@ export class SearchFiltersComponent implements OnInit {
this.loadOriginallyPublishedAtYears() this.loadOriginallyPublishedAtYears()
} }
inputUpdated () { onInputUpdated () {
this.updateModelFromDurationRange() this.updateModelFromDurationRange()
this.updateModelFromPublishedRange() this.updateModelFromPublishedRange()
this.updateModelFromOriginallyPublishedAtYears() this.updateModelFromOriginallyPublishedAtYears()
} }
formUpdated () { formUpdated () {
this.inputUpdated() this.onInputUpdated()
this.filtered.emit(this.advancedSearch) this.filtered.emit(this.advancedSearch)
} }
reset () { reset () {
this.advancedSearch.reset() this.advancedSearch.reset()
this.resetOriginalPublicationYears()
this.durationRange = undefined this.durationRange = undefined
this.publishedDateRange = undefined this.publishedDateRange = undefined
this.originallyPublishedStartYear = undefined
this.originallyPublishedEndYear = undefined this.onInputUpdated()
this.inputUpdated()
} }
resetField (fieldName: string, value?: any) { resetField (fieldName: string, value?: any) {
@ -130,7 +138,7 @@ export class SearchFiltersComponent implements OnInit {
resetLocalField (fieldName: string, value?: any) { resetLocalField (fieldName: string, value?: any) {
this[fieldName] = value this[fieldName] = value
this.inputUpdated() this.onInputUpdated()
} }
resetOriginalPublicationYears () { resetOriginalPublicationYears () {

View File

@ -1,4 +1,4 @@
import { BooleanBothQuery, SearchTargetType } from '@shared/models' import { BooleanBothQuery, BooleanQuery, SearchTargetType, VideosSearchQuery } from '@shared/models'
export class AdvancedSearch { export class AdvancedSearch {
startDate: string // ISO 8601 startDate: string // ISO 8601
@ -21,6 +21,8 @@ export class AdvancedSearch {
durationMin: number // seconds durationMin: number // seconds
durationMax: number // seconds durationMax: number // seconds
isLive: BooleanQuery
sort: string sort: string
searchTarget: SearchTargetType searchTarget: SearchTargetType
@ -41,6 +43,8 @@ export class AdvancedSearch {
tagsOneOf?: any tagsOneOf?: any
tagsAllOf?: any tagsAllOf?: any
isLive?: BooleanQuery
durationMin?: string durationMin?: string
durationMax?: string durationMax?: string
sort?: string sort?: string
@ -54,6 +58,8 @@ export class AdvancedSearch {
this.originallyPublishedEndDate = options.originallyPublishedEndDate || undefined this.originallyPublishedEndDate = options.originallyPublishedEndDate || undefined
this.nsfw = options.nsfw || undefined this.nsfw = options.nsfw || undefined
this.isLive = options.isLive || undefined
this.categoryOneOf = options.categoryOneOf || undefined this.categoryOneOf = options.categoryOneOf || undefined
this.licenceOneOf = options.licenceOneOf || undefined this.licenceOneOf = options.licenceOneOf || undefined
this.languageOneOf = options.languageOneOf || undefined this.languageOneOf = options.languageOneOf || undefined
@ -94,6 +100,7 @@ export class AdvancedSearch {
this.tagsAllOf = undefined this.tagsAllOf = undefined
this.durationMin = undefined this.durationMin = undefined
this.durationMax = undefined this.durationMax = undefined
this.isLive = undefined
this.sort = '-match' this.sort = '-match'
} }
@ -112,12 +119,16 @@ export class AdvancedSearch {
tagsAllOf: this.tagsAllOf, tagsAllOf: this.tagsAllOf,
durationMin: this.durationMin, durationMin: this.durationMin,
durationMax: this.durationMax, durationMax: this.durationMax,
isLive: this.isLive,
sort: this.sort, sort: this.sort,
searchTarget: this.searchTarget searchTarget: this.searchTarget
} }
} }
toAPIObject () { toAPIObject (): VideosSearchQuery {
let isLive: boolean
if (this.isLive) isLive = this.isLive === 'true'
return { return {
startDate: this.startDate, startDate: this.startDate,
endDate: this.endDate, endDate: this.endDate,
@ -131,6 +142,7 @@ export class AdvancedSearch {
tagsAllOf: this.tagsAllOf, tagsAllOf: this.tagsAllOf,
durationMin: this.durationMin, durationMin: this.durationMin,
durationMax: this.durationMax, durationMax: this.durationMax,
isLive,
sort: this.sort, sort: this.sort,
searchTarget: this.searchTarget searchTarget: this.searchTarget
} }

View File

@ -1 +1,2 @@
export type BooleanBothQuery = 'true' | 'false' | 'both' export type BooleanBothQuery = 'true' | 'false' | 'both'
export type BooleanQuery = 'true' | 'false'