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 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="radio-label label-container">
<label i18n>Display sensitive content</label>
@ -44,7 +63,7 @@
</div>
<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>
</div>
</div>
@ -60,7 +79,7 @@
<div class="row">
<div class="pl-0 col-sm-6">
<input
(change)="inputUpdated()"
(change)="onInputUpdated()"
(keydown.enter)="$event.preventDefault()"
type="text" id="original-publication-after" name="original-publication-after"
i18n-placeholder placeholder="After..."
@ -70,7 +89,7 @@
</div>
<div class="pr-0 col-sm-6">
<input
(change)="inputUpdated()"
(change)="onInputUpdated()"
(keydown.enter)="$event.preventDefault()"
type="text" id="original-publication-before" name="original-publication-before"
i18n-placeholder placeholder="Before..."
@ -93,7 +112,7 @@
</div>
<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>
</div>
</div>

View File

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

View File

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

View File

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