From 61cbafc1f80a33a895b54b15751a42e0d78af231 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Wed, 9 Jun 2021 10:31:27 +0200 Subject: [PATCH] Improve channel card custom markup --- .../account-video-channels.component.scss | 12 +--- .../custom-markup-container.component.scss | 10 ++++ .../custom-markup.service.ts | 15 ++++- .../channel-miniature-markup.component.html | 28 +++++++-- .../channel-miniature-markup.component.scss | 58 +++++++++++++++++-- .../channel-miniature-markup.component.ts | 49 +++++++++++++++- client/src/sass/include/_mixins.scss | 13 +++++ .../custom-markup/custom-markup-data.model.ts | 4 ++ 8 files changed, 166 insertions(+), 23 deletions(-) diff --git a/client/src/app/+accounts/account-video-channels/account-video-channels.component.scss b/client/src/app/+accounts/account-video-channels/account-video-channels.component.scss index da3751b47..60914ec12 100644 --- a/client/src/app/+accounts/account-video-channels/account-video-channels.component.scss +++ b/client/src/app/+accounts/account-video-channels/account-video-channels.component.scss @@ -52,19 +52,10 @@ .actor-counters { @include margin-left(15px); + @include actor-counters; grid-row: 1; grid-column: 3; - color: pvar(--greyForegroundColor); - font-size: 16px; - display: flex; - align-items: center; - } - - .actor-counters > *:not(:last-child)::after { - content: '•'; - margin: 0 10px; - color: pvar(--mainColor); } .description-html { @@ -94,6 +85,7 @@ my-subscribe-button { my-video-miniature { @include margin-right(15px); + min-width: $video-thumbnail-medium-width; max-width: $video-thumbnail-medium-width; } diff --git a/client/src/app/shared/shared-custom-markup/custom-markup-container.component.scss b/client/src/app/shared/shared-custom-markup/custom-markup-container.component.scss index 044db9536..862da7c18 100644 --- a/client/src/app/shared/shared-custom-markup/custom-markup-container.component.scss +++ b/client/src/app/shared/shared-custom-markup/custom-markup-container.component.scss @@ -6,5 +6,15 @@ h4 { margin-bottom: 0; } + + .layout-row { + display: flex; + flex-direction: row; + } + + .layout-column { + display: flex; + flex-direction: column; + } } } 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 db5f64ee8..aa5dbe643 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 @@ -122,7 +122,13 @@ export class CustomMarkupService { const data = el.dataset as ChannelMiniatureMarkupData const component = this.dynamicElementService.createElement(ChannelMiniatureMarkupComponent) - this.dynamicElementService.setModel(component, { name: data.name }) + const model = { + name: data.name, + displayLatestVideo: this.buildBoolean(data.displayLatestVideo) ?? true, + displayDescription: this.buildBoolean(data.displayDescription) ?? true + } + + this.dynamicElementService.setModel(component, model) return component } @@ -178,7 +184,12 @@ export class CustomMarkupService { const data = el.dataset as ContainerMarkupData const root = document.createElement('div') - root.classList.add('peertube-container') + + const layoutClass = data.layout + ? 'layout-' + data.layout + : 'layout-row' + + root.classList.add('peertube-container', layoutClass) if (data.width) { root.setAttribute('width', data.width) diff --git a/client/src/app/shared/shared-custom-markup/peertube-custom-tags/channel-miniature-markup.component.html b/client/src/app/shared/shared-custom-markup/peertube-custom-tags/channel-miniature-markup.component.html index da81006b9..2efc56ab2 100644 --- a/client/src/app/shared/shared-custom-markup/peertube-custom-tags/channel-miniature-markup.component.html +++ b/client/src/app/shared/shared-custom-markup/peertube-custom-tags/channel-miniature-markup.component.html @@ -1,8 +1,28 @@
- -
{{ channel.displayName }}
-
{{ channel.name }}
+
+ -
{{ channel.description }}
+
+ + {{ channel.displayName }} + +
+ +
+
{channel.followersCount, plural, =1 {1 subscriber} other {{{ channel.followersCount }} subscribers}}
+ + + {totalVideos, plural, =1 {1 videos} other {{{ totalVideos }} videos}} + +
+ +
+
+ +
+
Latest published video
+ + +
diff --git a/client/src/app/shared/shared-custom-markup/peertube-custom-tags/channel-miniature-markup.component.scss b/client/src/app/shared/shared-custom-markup/peertube-custom-tags/channel-miniature-markup.component.scss index 85018afe2..80c36a58b 100644 --- a/client/src/app/shared/shared-custom-markup/peertube-custom-tags/channel-miniature-markup.component.scss +++ b/client/src/app/shared/shared-custom-markup/peertube-custom-tags/channel-miniature-markup.component.scss @@ -2,8 +2,58 @@ @import '_mixins'; .channel { - border-radius: 15px; - padding: 10px; - width: min-content; - border: 1px solid pvar(--mainColor); + padding: 20px; + background-color: pvar(--channelBackgroundColor); + margin: 0 30px 30px 0; + width: fit-content; +} + +.channel-avatar-row, +.video { + width: 280px; +} + +.channel-avatar-row { + display: grid; + grid-template-columns: auto 1fr; + grid-template-rows: auto auto 1fr; + column-gap: 15px; + + a { + @include peertube-word-wrap; + + color: pvar(--mainForegroundColor); + } + + my-actor-avatar { + @include actor-avatar-size(75px); + + grid-column: 1; + grid-row: 1 / 4; + } + + h6 { + grid-column: 2; + margin: 0; + } + + .actor-counters { + @include actor-counters(5px); + + font-size: 13px; + grid-column: 2; + } + + .description-html { + @include fade-text(30px, pvar(--channelBackgroundColor)); + + max-height: 60px; + grid-column: 2; + } +} + +.video-label { + font-size: 12px; + color: pvar(--greyForegroundColor); + margin: 15px 0 5px; } diff --git a/client/src/app/shared/shared-custom-markup/peertube-custom-tags/channel-miniature-markup.component.ts b/client/src/app/shared/shared-custom-markup/peertube-custom-tags/channel-miniature-markup.component.ts index 25deafb80..87caec8a5 100644 --- a/client/src/app/shared/shared-custom-markup/peertube-custom-tags/channel-miniature-markup.component.ts +++ b/client/src/app/shared/shared-custom-markup/peertube-custom-tags/channel-miniature-markup.component.ts @@ -1,5 +1,8 @@ +import { map, switchMap } from 'rxjs/operators' import { Component, Input, OnInit } from '@angular/core' -import { VideoChannel, VideoChannelService } from '../../shared-main' +import { MarkdownService, UserService } from '@app/core' +import { Video, VideoSortField } from '@shared/models/videos' +import { VideoChannel, VideoChannelService, VideoService } from '../../shared-main' /* * Markup component that creates a channel miniature only @@ -12,15 +15,55 @@ import { VideoChannel, VideoChannelService } from '../../shared-main' }) export class ChannelMiniatureMarkupComponent implements OnInit { @Input() name: string + @Input() displayLatestVideo: boolean + @Input() displayDescription: boolean channel: VideoChannel + descriptionHTML: string + totalVideos: number + video: Video constructor ( - private channelService: VideoChannelService + private markdown: MarkdownService, + private channelService: VideoChannelService, + private videoService: VideoService, + private userService: UserService ) { } ngOnInit () { this.channelService.getVideoChannel(this.name) - .subscribe(channel => this.channel = channel) + .subscribe(async channel => { + this.channel = channel + + this.descriptionHTML = await this.markdown.textMarkdownToHTML(channel.description) + + this.loadVideos() + }) + } + + getVideoChannelLink () { + return [ '/c', this.channel.nameWithHost ] + } + + private loadVideos () { + const videoOptions = { + videoChannel: this.channel, + videoPagination: { + currentPage: 1, + itemsPerPage: 1 + }, + sort: '-publishedAt' as VideoSortField, + count: 1 + } + + this.userService.getAnonymousOrLoggedUser() + .pipe( + map(user => user.nsfwPolicy), + switchMap(nsfwPolicy => this.videoService.getVideoChannelVideos({ ...videoOptions, nsfwPolicy })) + ) + .subscribe(({ total, data }) => { + this.totalVideos = total + this.video = data[0] + }) } } diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss index 19454cdb2..0822e0ca6 100644 --- a/client/src/sass/include/_mixins.scss +++ b/client/src/sass/include/_mixins.scss @@ -569,6 +569,19 @@ min-height: $size; } +@mixin actor-counters ($separator-margin: 10px) { + color: pvar(--greyForegroundColor); + font-size: 16px; + display: flex; + align-items: center; + + > *:not(:last-child)::after { + content: '•'; + margin: 0 $separator-margin; + color: pvar(--mainColor); + } +} + @mixin chevron ($size, $border-width) { border-style: solid; border-width: $border-width $border-width 0 0; diff --git a/shared/models/custom-markup/custom-markup-data.model.ts b/shared/models/custom-markup/custom-markup-data.model.ts index 085ea7cf6..f3c23ec2c 100644 --- a/shared/models/custom-markup/custom-markup-data.model.ts +++ b/shared/models/custom-markup/custom-markup-data.model.ts @@ -18,6 +18,9 @@ export type PlaylistMiniatureMarkupData = { export type ChannelMiniatureMarkupData = { // Channel name (username) name: string + + displayLatestVideo?: string // boolean + displayDescription?: string // boolean } export type VideosListMarkupData = { @@ -43,4 +46,5 @@ export type ContainerMarkupData = { width?: string title?: string description?: string + layout?: 'row' | 'column' } -- 2.41.0