diff options
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 { | |||
6 | ContainerMarkupData, | 6 | ContainerMarkupData, |
7 | EmbedMarkupData, | 7 | EmbedMarkupData, |
8 | PlaylistMiniatureMarkupData, | 8 | PlaylistMiniatureMarkupData, |
9 | VideoFilter, | ||
9 | VideoMiniatureMarkupData, | 10 | VideoMiniatureMarkupData, |
10 | VideosListMarkupData | 11 | VideosListMarkupData |
11 | } from '@shared/models' | 12 | } from '@shared/models' |
@@ -108,15 +109,6 @@ export class CustomMarkupService { | |||
108 | return component | 109 | return component |
109 | } | 110 | } |
110 | 111 | ||
111 | private videoMiniatureBuilder (el: HTMLElement) { | ||
112 | const data = el.dataset as VideoMiniatureMarkupData | ||
113 | const component = this.dynamicElementService.createElement(VideoMiniatureMarkupComponent) | ||
114 | |||
115 | this.dynamicElementService.setModel(component, { uuid: data.uuid }) | ||
116 | |||
117 | return component | ||
118 | } | ||
119 | |||
120 | private playlistMiniatureBuilder (el: HTMLElement) { | 112 | private playlistMiniatureBuilder (el: HTMLElement) { |
121 | const data = el.dataset as PlaylistMiniatureMarkupData | 113 | const data = el.dataset as PlaylistMiniatureMarkupData |
122 | const component = this.dynamicElementService.createElement(PlaylistMiniatureMarkupComponent) | 114 | const component = this.dynamicElementService.createElement(PlaylistMiniatureMarkupComponent) |
@@ -150,14 +142,30 @@ export class CustomMarkupService { | |||
150 | return component | 142 | return component |
151 | } | 143 | } |
152 | 144 | ||
145 | private videoMiniatureBuilder (el: HTMLElement) { | ||
146 | const data = el.dataset as VideoMiniatureMarkupData | ||
147 | const component = this.dynamicElementService.createElement(VideoMiniatureMarkupComponent) | ||
148 | |||
149 | const model = { | ||
150 | uuid: data.uuid, | ||
151 | onlyDisplayTitle: this.buildBoolean(data.onlyDisplayTitle) ?? false | ||
152 | } | ||
153 | |||
154 | this.dynamicElementService.setModel(component, model) | ||
155 | |||
156 | return component | ||
157 | } | ||
158 | |||
153 | private videosListBuilder (el: HTMLElement) { | 159 | private videosListBuilder (el: HTMLElement) { |
154 | const data = el.dataset as VideosListMarkupData | 160 | const data = el.dataset as VideosListMarkupData |
155 | const component = this.dynamicElementService.createElement(VideosListMarkupComponent) | 161 | const component = this.dynamicElementService.createElement(VideosListMarkupComponent) |
156 | 162 | ||
157 | const model = { | 163 | const model = { |
158 | sort: data.sort, | 164 | onlyDisplayTitle: this.buildBoolean(data.onlyDisplayTitle) ?? false, |
159 | categoryOneOf: this.buildArrayNumber(data.categoryOneOf), | 165 | sort: data.sort || '-publishedAt', |
160 | languageOneOf: this.buildArrayString(data.languageOneOf), | 166 | categoryOneOf: this.buildArrayNumber(data.categoryOneOf) ?? [], |
167 | languageOneOf: this.buildArrayString(data.languageOneOf) ?? [], | ||
168 | filter: this.buildBoolean(data.onlyLocal) ? 'local' as VideoFilter : undefined, | ||
161 | count: this.buildNumber(data.count) || 10 | 169 | count: this.buildNumber(data.count) || 10 |
162 | } | 170 | } |
163 | 171 | ||
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' | |||
14 | }) | 14 | }) |
15 | export class VideoMiniatureMarkupComponent implements OnInit { | 15 | export class VideoMiniatureMarkupComponent implements OnInit { |
16 | @Input() uuid: string | 16 | @Input() uuid: string |
17 | @Input() onlyDisplayTitle: boolean | ||
17 | 18 | ||
18 | video: Video | 19 | video: Video |
19 | 20 | ||
@@ -38,6 +39,12 @@ export class VideoMiniatureMarkupComponent implements OnInit { | |||
38 | } | 39 | } |
39 | 40 | ||
40 | ngOnInit () { | 41 | ngOnInit () { |
42 | if (this.onlyDisplayTitle) { | ||
43 | for (const key of Object.keys(this.displayOptions)) { | ||
44 | this.displayOptions[key] = false | ||
45 | } | ||
46 | } | ||
47 | |||
41 | this.videoService.getVideo({ videoId: this.uuid }) | 48 | this.videoService.getVideo({ videoId: this.uuid }) |
42 | .subscribe(video => this.video = video) | 49 | .subscribe(video => this.video = video) |
43 | } | 50 | } |
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 @@ | |||
1 | import { Component, Input, OnInit } from '@angular/core' | 1 | import { Component, Input, OnInit } from '@angular/core' |
2 | import { AuthService } from '@app/core' | 2 | import { AuthService } from '@app/core' |
3 | import { VideoSortField } from '@shared/models' | 3 | import { VideoFilter, VideoSortField } from '@shared/models' |
4 | import { Video, VideoService } from '../../shared-main' | 4 | import { Video, VideoService } from '../../shared-main' |
5 | import { MiniatureDisplayOptions } from '../../shared-video-miniature' | 5 | import { MiniatureDisplayOptions } from '../../shared-video-miniature' |
6 | 6 | ||
@@ -14,15 +14,17 @@ import { MiniatureDisplayOptions } from '../../shared-video-miniature' | |||
14 | styleUrls: [ 'videos-list-markup.component.scss' ] | 14 | styleUrls: [ 'videos-list-markup.component.scss' ] |
15 | }) | 15 | }) |
16 | export class VideosListMarkupComponent implements OnInit { | 16 | export class VideosListMarkupComponent implements OnInit { |
17 | @Input() sort = '-publishedAt' | 17 | @Input() sort: string |
18 | @Input() categoryOneOf: number[] | 18 | @Input() categoryOneOf: number[] |
19 | @Input() languageOneOf: string[] | 19 | @Input() languageOneOf: string[] |
20 | @Input() count = 10 | 20 | @Input() count: number |
21 | @Input() onlyDisplayTitle: boolean | ||
22 | @Input() filter: VideoFilter | ||
21 | 23 | ||
22 | videos: Video[] | 24 | videos: Video[] |
23 | 25 | ||
24 | displayOptions: MiniatureDisplayOptions = { | 26 | displayOptions: MiniatureDisplayOptions = { |
25 | date: true, | 27 | date: false, |
26 | views: true, | 28 | views: true, |
27 | by: true, | 29 | by: true, |
28 | avatar: false, | 30 | avatar: false, |
@@ -42,6 +44,12 @@ export class VideosListMarkupComponent implements OnInit { | |||
42 | } | 44 | } |
43 | 45 | ||
44 | ngOnInit () { | 46 | ngOnInit () { |
47 | if (this.onlyDisplayTitle) { | ||
48 | for (const key of Object.keys(this.displayOptions)) { | ||
49 | this.displayOptions[key] = false | ||
50 | } | ||
51 | } | ||
52 | |||
45 | const options = { | 53 | const options = { |
46 | videoPagination: { | 54 | videoPagination: { |
47 | currentPage: 1, | 55 | currentPage: 1, |
@@ -49,6 +57,7 @@ export class VideosListMarkupComponent implements OnInit { | |||
49 | }, | 57 | }, |
50 | categoryOneOf: this.categoryOneOf, | 58 | categoryOneOf: this.categoryOneOf, |
51 | languageOneOf: this.languageOneOf, | 59 | languageOneOf: this.languageOneOf, |
60 | filter: this.filter, | ||
52 | sort: this.sort as VideoSortField | 61 | sort: this.sort as VideoSortField |
53 | } | 62 | } |
54 | 63 | ||
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 = { | |||
6 | export type VideoMiniatureMarkupData = { | 6 | export type VideoMiniatureMarkupData = { |
7 | // Video uuid | 7 | // Video uuid |
8 | uuid: string | 8 | uuid: string |
9 | |||
10 | onlyDisplayTitle?: string // boolean | ||
9 | } | 11 | } |
10 | 12 | ||
11 | export type PlaylistMiniatureMarkupData = { | 13 | export type PlaylistMiniatureMarkupData = { |
@@ -19,17 +21,22 @@ export type ChannelMiniatureMarkupData = { | |||
19 | } | 21 | } |
20 | 22 | ||
21 | export type VideosListMarkupData = { | 23 | export type VideosListMarkupData = { |
22 | sort: string | 24 | onlyDisplayTitle?: string // boolean |
23 | categoryOneOf: string // coma separated values | 25 | |
24 | languageOneOf: string // coma separated values | 26 | sort?: string |
25 | count: string | 27 | count?: string |
28 | |||
29 | categoryOneOf?: string // coma separated values | ||
30 | languageOneOf?: string // coma separated values | ||
31 | |||
32 | onlyLocal?: string // boolean | ||
26 | } | 33 | } |
27 | 34 | ||
28 | export type ButtonMarkupData = { | 35 | export type ButtonMarkupData = { |
29 | theme: 'primary' | 'secondary' | 36 | theme: 'primary' | 'secondary' |
30 | href: string | 37 | href: string |
31 | label: string | 38 | label: string |
32 | blankTarget?: string | 39 | blankTarget?: string // boolean |
33 | } | 40 | } |
34 | 41 | ||
35 | export type ContainerMarkupData = { | 42 | export type ContainerMarkupData = { |