diff --git a/client/src/app/+videos/+video-edit/shared/video-edit.component.html b/client/src/app/+videos/+video-edit/shared/video-edit.component.html index 579b63c6d..ea9909612 100644 --- a/client/src/app/+videos/+video-edit/shared/video-edit.component.html +++ b/client/src/app/+videos/+video-edit/shared/video-edit.component.html @@ -55,7 +55,7 @@ diff --git a/client/src/app/+videos/+video-watch/shared/metadata/video-description.component.html b/client/src/app/+videos/+video-watch/shared/metadata/video-description.component.html index 9db3018e6..16f3e3881 100644 --- a/client/src/app/+videos/+video-watch/shared/metadata/video-description.component.html +++ b/client/src/app/+videos/+video-watch/shared/metadata/video-description.component.html @@ -1,25 +1,26 @@
+ + Show more + + -
diff --git a/client/src/app/+videos/+video-watch/shared/metadata/video-description.component.scss b/client/src/app/+videos/+video-watch/shared/metadata/video-description.component.scss index b503a94cb..d799ae2fc 100644 --- a/client/src/app/+videos/+video-watch/shared/metadata/video-description.component.scss +++ b/client/src/app/+videos/+video-watch/shared/metadata/video-description.component.scss @@ -11,8 +11,14 @@ .video-info-description-html { @include peertube-word-wrap; - ::ng-deep a { - text-decoration: none; + ::ng-deep { + a { + text-decoration: none; + } + + p:last-child { + margin-bottom: 0; + } } } @@ -21,10 +27,12 @@ } .video-info-description-more { + @include font-size(14px); + cursor: pointer; font-weight: $font-semibold; color: pvar(--greyForegroundColor); - font-size: 14px; + margin-top: 1rem; } } diff --git a/client/src/app/+videos/+video-watch/shared/metadata/video-description.component.ts b/client/src/app/+videos/+video-watch/shared/metadata/video-description.component.ts index d01080611..911cf7264 100644 --- a/client/src/app/+videos/+video-watch/shared/metadata/video-description.component.ts +++ b/client/src/app/+videos/+video-watch/shared/metadata/video-description.component.ts @@ -1,7 +1,6 @@ -import { Component, EventEmitter, Input, OnChanges, Output } from '@angular/core' -import { MarkdownService, Notifier } from '@app/core' -import { VideoDetails, VideoService } from '@app/shared/shared-main' -import { logger } from '@root-helpers/logger' +import { Component, EventEmitter, Input, OnChanges, Output, ViewChild, ElementRef } from '@angular/core' +import { MarkdownService } from '@app/core' +import { VideoDetails } from '@app/shared/shared-main' @Component({ selector: 'my-video-description', @@ -9,36 +8,34 @@ import { logger } from '@root-helpers/logger' styleUrls: [ './video-description.component.scss' ] }) export class VideoDescriptionComponent implements OnChanges { + @ViewChild('descriptionHTML') descriptionHTML: ElementRef + @Input() video: VideoDetails @Output() timestampClicked = new EventEmitter() - descriptionLoading = false completeDescriptionShown = false - completeVideoDescriptionLoaded = false - - videoHTMLTruncatedDescription = '' videoHTMLDescription = '' constructor ( - private videoService: VideoService, - private notifier: Notifier, private markdownService: MarkdownService ) { } ngOnChanges () { - this.descriptionLoading = false this.completeDescriptionShown = false this.setVideoDescriptionHTML() } - showMoreDescription () { - if (!this.completeVideoDescriptionLoaded) { - return this.loadCompleteDescription() - } + hasEllipsis () { + const el = this.descriptionHTML?.nativeElement + if (!el) return false + return el.offsetHeight < el.scrollHeight + } + + showMoreDescription () { this.completeDescriptionShown = true } @@ -46,51 +43,13 @@ export class VideoDescriptionComponent implements OnChanges { this.completeDescriptionShown = false } - loadCompleteDescription () { - this.descriptionLoading = true - - this.videoService.loadCompleteDescription(this.video.descriptionPath) - .subscribe({ - next: description => { - this.completeDescriptionShown = true - this.descriptionLoading = false - - this.video.description = description - - this.setVideoDescriptionHTML() - .catch(err => logger.error(err)) - }, - - error: err => { - this.descriptionLoading = false - this.notifier.error(err.message) - } - }) - } - onTimestampClicked (timestamp: number) { this.timestampClicked.emit(timestamp) } - getHTMLDescription () { - if (this.completeDescriptionShown) { - return this.videoHTMLDescription - } - - return this.videoHTMLTruncatedDescription - } - private async setVideoDescriptionHTML () { - { - const html = await this.markdownService.textMarkdownToHTML({ markdown: this.video.description }) + const html = await this.markdownService.textMarkdownToHTML({ markdown: this.video.description }) - this.videoHTMLDescription = this.markdownService.processVideoTimestamps(this.video.shortUUID, html) - } - - { - const html = await this.markdownService.textMarkdownToHTML({ markdown: this.video.truncatedDescription }) - - this.videoHTMLTruncatedDescription = this.markdownService.processVideoTimestamps(this.video.shortUUID, html) - } + this.videoHTMLDescription = this.markdownService.processVideoTimestamps(this.video.shortUUID, html) } } diff --git a/client/src/app/core/renderer/markdown.service.ts b/client/src/app/core/renderer/markdown.service.ts index 907b92232..499ce520e 100644 --- a/client/src/app/core/renderer/markdown.service.ts +++ b/client/src/app/core/renderer/markdown.service.ts @@ -138,8 +138,7 @@ export class MarkdownService { } } - let html = this.markdownParsers[name].render(markdown) - html = this.avoidTruncatedTags(html) + const html = this.markdownParsers[name].render(markdown) if (config.escape) return this.htmlRenderer.toSafeHtml(html, additionalAllowedTags) @@ -181,11 +180,4 @@ export class MarkdownService { return defaultRender(tokens, index, options, env, self) } } - - private avoidTruncatedTags (html: string) { - return html.replace(/\*\*?([^*]+)$/, '$1') - .replace(/]+>([^<]+)<\/a>\s*...((<\/p>)|(<\/li>)|(<\/strong>))?$/mi, '$1...') - .replace(/\[[^\]]+\]\(([^)]+)$/m, '$1') - .replace(/\s?\[[^\]]+\]?[.]{3}<\/p>$/m, '...

') - } } diff --git a/client/src/app/shared/shared-abuse-list/abuse-details.component.html b/client/src/app/shared/shared-abuse-list/abuse-details.component.html index 2d3e26a25..5a4e60fe7 100644 --- a/client/src/app/shared/shared-abuse-list/abuse-details.component.html +++ b/client/src/app/shared/shared-abuse-list/abuse-details.component.html @@ -96,7 +96,7 @@ Comment: -
+
diff --git a/client/src/app/shared/shared-abuse-list/abuse-list-table.component.html b/client/src/app/shared/shared-abuse-list/abuse-list-table.component.html index 5833e3465..253237122 100644 --- a/client/src/app/shared/shared-abuse-list/abuse-list-table.component.html +++ b/client/src/app/shared/shared-abuse-list/abuse-list-table.component.html @@ -90,7 +90,8 @@ - diff --git a/client/src/app/shared/shared-abuse-list/abuse-list-table.component.ts b/client/src/app/shared/shared-abuse-list/abuse-list-table.component.ts index c38e1286f..691859584 100644 --- a/client/src/app/shared/shared-abuse-list/abuse-list-table.component.ts +++ b/client/src/app/shared/shared-abuse-list/abuse-list-table.component.ts @@ -1,5 +1,4 @@ import * as debug from 'debug' -import truncate from 'lodash-es/truncate' import { SortMeta } from 'primeng/api' import { Component, Input, OnInit, ViewChild } from '@angular/core' import { ActivatedRoute, Router } from '@angular/router' @@ -211,11 +210,9 @@ export class AbuseListTableComponent extends RestTable implements OnInit { if (abuse.comment) { if (abuse.comment.deleted) { - abuse.truncatedCommentHtml = abuse.commentHtml = $localize`Deleted comment` + abuse.commentHTML = $localize`Deleted comment` } else { - const truncated = truncate(abuse.comment.text, { length: 100 }) - abuse.truncatedCommentHtml = await this.markdownRenderer.textMarkdownToHTML({ markdown: truncated, withHtml: true }) - abuse.commentHtml = await this.markdownRenderer.textMarkdownToHTML({ markdown: abuse.comment.text, withHtml: true }) + abuse.commentHTML = await this.markdownRenderer.textMarkdownToHTML({ markdown: abuse.comment.text, withHtml: true }) } } diff --git a/client/src/app/shared/shared-abuse-list/processed-abuse.model.ts b/client/src/app/shared/shared-abuse-list/processed-abuse.model.ts index 076ccb40b..c51d6877e 100644 --- a/client/src/app/shared/shared-abuse-list/processed-abuse.model.ts +++ b/client/src/app/shared/shared-abuse-list/processed-abuse.model.ts @@ -12,8 +12,7 @@ export type ProcessedAbuse = AdminAbuse & { reporterAccount?: Account flaggedAccount?: Account - truncatedCommentHtml?: string - commentHtml?: string + commentHTML?: string video: AdminAbuse['video'] & { channel: AdminAbuse['video']['channel'] & { diff --git a/client/src/app/shared/shared-forms/markdown-textarea.component.html b/client/src/app/shared/shared-forms/markdown-textarea.component.html index 63dcdc597..ac2dfd17c 100644 --- a/client/src/app/shared/shared-forms/markdown-textarea.component.html +++ b/client/src/app/shared/shared-forms/markdown-textarea.component.html @@ -8,11 +8,11 @@