From 9105634f16e5dfc66df198f23dbfae77dff2d821 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Wed, 9 Jun 2021 09:32:47 +0200 Subject: Add more filters for video miniatures --- .../shared-custom-markup/custom-markup.service.ts | 32 ++++++++++++++-------- .../video-miniature-markup.component.ts | 7 +++++ .../videos-list-markup.component.ts | 17 +++++++++--- .../custom-markup/custom-markup-data.model.ts | 17 ++++++++---- 4 files changed, 52 insertions(+), 21 deletions(-) diff --git a/client/src/app/shared/shared-custom-markup/custom-markup.service.ts b/client/src/app/shared/shared-custom-markup/custom-markup.service.ts index a3b7303d8..db5f64ee8 100644 --- a/client/src/app/shared/shared-custom-markup/custom-markup.service.ts +++ b/client/src/app/shared/shared-custom-markup/custom-markup.service.ts @@ -6,6 +6,7 @@ import { ContainerMarkupData, EmbedMarkupData, PlaylistMiniatureMarkupData, + VideoFilter, VideoMiniatureMarkupData, VideosListMarkupData } from '@shared/models' @@ -108,15 +109,6 @@ export class CustomMarkupService { return component } - private videoMiniatureBuilder (el: HTMLElement) { - const data = el.dataset as VideoMiniatureMarkupData - const component = this.dynamicElementService.createElement(VideoMiniatureMarkupComponent) - - this.dynamicElementService.setModel(component, { uuid: data.uuid }) - - return component - } - private playlistMiniatureBuilder (el: HTMLElement) { const data = el.dataset as PlaylistMiniatureMarkupData const component = this.dynamicElementService.createElement(PlaylistMiniatureMarkupComponent) @@ -150,14 +142,30 @@ export class CustomMarkupService { return component } + private videoMiniatureBuilder (el: HTMLElement) { + const data = el.dataset as VideoMiniatureMarkupData + const component = this.dynamicElementService.createElement(VideoMiniatureMarkupComponent) + + const model = { + uuid: data.uuid, + onlyDisplayTitle: this.buildBoolean(data.onlyDisplayTitle) ?? false + } + + this.dynamicElementService.setModel(component, model) + + return component + } + private videosListBuilder (el: HTMLElement) { const data = el.dataset as VideosListMarkupData const component = this.dynamicElementService.createElement(VideosListMarkupComponent) const model = { - sort: data.sort, - categoryOneOf: this.buildArrayNumber(data.categoryOneOf), - languageOneOf: this.buildArrayString(data.languageOneOf), + onlyDisplayTitle: this.buildBoolean(data.onlyDisplayTitle) ?? false, + sort: data.sort || '-publishedAt', + categoryOneOf: this.buildArrayNumber(data.categoryOneOf) ?? [], + languageOneOf: this.buildArrayString(data.languageOneOf) ?? [], + filter: this.buildBoolean(data.onlyLocal) ? 'local' as VideoFilter : undefined, count: this.buildNumber(data.count) || 10 } diff --git a/client/src/app/shared/shared-custom-markup/peertube-custom-tags/video-miniature-markup.component.ts b/client/src/app/shared/shared-custom-markup/peertube-custom-tags/video-miniature-markup.component.ts index c833c56c7..dfb4c497f 100644 --- a/client/src/app/shared/shared-custom-markup/peertube-custom-tags/video-miniature-markup.component.ts +++ b/client/src/app/shared/shared-custom-markup/peertube-custom-tags/video-miniature-markup.component.ts @@ -14,6 +14,7 @@ import { MiniatureDisplayOptions } from '../../shared-video-miniature' }) export class VideoMiniatureMarkupComponent implements OnInit { @Input() uuid: string + @Input() onlyDisplayTitle: boolean video: Video @@ -38,6 +39,12 @@ export class VideoMiniatureMarkupComponent implements OnInit { } ngOnInit () { + if (this.onlyDisplayTitle) { + for (const key of Object.keys(this.displayOptions)) { + this.displayOptions[key] = false + } + } + this.videoService.getVideo({ videoId: this.uuid }) .subscribe(video => this.video = video) } diff --git a/client/src/app/shared/shared-custom-markup/peertube-custom-tags/videos-list-markup.component.ts b/client/src/app/shared/shared-custom-markup/peertube-custom-tags/videos-list-markup.component.ts index c3710484e..fe084afd9 100644 --- a/client/src/app/shared/shared-custom-markup/peertube-custom-tags/videos-list-markup.component.ts +++ b/client/src/app/shared/shared-custom-markup/peertube-custom-tags/videos-list-markup.component.ts @@ -1,6 +1,6 @@ import { Component, Input, OnInit } from '@angular/core' import { AuthService } from '@app/core' -import { VideoSortField } from '@shared/models' +import { VideoFilter, VideoSortField } from '@shared/models' import { Video, VideoService } from '../../shared-main' import { MiniatureDisplayOptions } from '../../shared-video-miniature' @@ -14,15 +14,17 @@ import { MiniatureDisplayOptions } from '../../shared-video-miniature' styleUrls: [ 'videos-list-markup.component.scss' ] }) export class VideosListMarkupComponent implements OnInit { - @Input() sort = '-publishedAt' + @Input() sort: string @Input() categoryOneOf: number[] @Input() languageOneOf: string[] - @Input() count = 10 + @Input() count: number + @Input() onlyDisplayTitle: boolean + @Input() filter: VideoFilter videos: Video[] displayOptions: MiniatureDisplayOptions = { - date: true, + date: false, views: true, by: true, avatar: false, @@ -42,6 +44,12 @@ export class VideosListMarkupComponent implements OnInit { } ngOnInit () { + if (this.onlyDisplayTitle) { + for (const key of Object.keys(this.displayOptions)) { + this.displayOptions[key] = false + } + } + const options = { videoPagination: { currentPage: 1, @@ -49,6 +57,7 @@ export class VideosListMarkupComponent implements OnInit { }, categoryOneOf: this.categoryOneOf, languageOneOf: this.languageOneOf, + filter: this.filter, sort: this.sort as VideoSortField } diff --git a/shared/models/custom-markup/custom-markup-data.model.ts b/shared/models/custom-markup/custom-markup-data.model.ts index d38f9412c..085ea7cf6 100644 --- a/shared/models/custom-markup/custom-markup-data.model.ts +++ b/shared/models/custom-markup/custom-markup-data.model.ts @@ -6,6 +6,8 @@ export type EmbedMarkupData = { export type VideoMiniatureMarkupData = { // Video uuid uuid: string + + onlyDisplayTitle?: string // boolean } export type PlaylistMiniatureMarkupData = { @@ -19,17 +21,22 @@ export type ChannelMiniatureMarkupData = { } export type VideosListMarkupData = { - sort: string - categoryOneOf: string // coma separated values - languageOneOf: string // coma separated values - count: string + onlyDisplayTitle?: string // boolean + + sort?: string + count?: string + + categoryOneOf?: string // coma separated values + languageOneOf?: string // coma separated values + + onlyLocal?: string // boolean } export type ButtonMarkupData = { theme: 'primary' | 'secondary' href: string label: string - blankTarget?: string + blankTarget?: string // boolean } export type ContainerMarkupData = { -- cgit v1.2.3