From c5f8dc0533153658f46b68a9e214646b41abebfc Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Thu, 17 Aug 2023 14:26:49 +0200 Subject: [PATCH] Correctly truncate HTML We can because we don't use the video truncated description since v5.0 --- .../shared/video-edit.component.html | 2 +- .../metadata/video-description.component.html | 27 ++++---- .../metadata/video-description.component.scss | 14 +++- .../metadata/video-description.component.ts | 69 ++++--------------- .../src/app/core/renderer/markdown.service.ts | 10 +-- .../abuse-details.component.html | 2 +- .../abuse-list-table.component.html | 3 +- .../abuse-list-table.component.ts | 7 +- .../processed-abuse.model.ts | 3 +- .../markdown-textarea.component.html | 4 +- .../markdown-textarea.component.ts | 5 +- client/src/sass/class-helpers/_text.scss | 8 +++ 12 files changed, 58 insertions(+), 96 deletions(-) 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 @@
- + Truncated preview -
+
diff --git a/client/src/app/shared/shared-forms/markdown-textarea.component.ts b/client/src/app/shared/shared-forms/markdown-textarea.component.ts index 7edcf868c..169be39d1 100644 --- a/client/src/app/shared/shared-forms/markdown-textarea.component.ts +++ b/client/src/app/shared/shared-forms/markdown-textarea.component.ts @@ -1,4 +1,3 @@ -import truncate from 'lodash-es/truncate' import { Subject } from 'rxjs' import { debounceTime, distinctUntilChanged } from 'rxjs/operators' import { ViewportScroller } from '@angular/common' @@ -26,7 +25,7 @@ export class MarkdownTextareaComponent implements ControlValueAccessor, OnInit { @Input() formError: string - @Input() truncate: number + @Input() truncateTo3Lines: boolean @Input() markdownType: 'text' | 'enhanced' | 'to-unsafe-html' = 'text' @Input() customMarkdownRenderer?: (text: string) => Promise @@ -42,7 +41,6 @@ export class MarkdownTextareaComponent implements ControlValueAccessor, OnInit { @ViewChild('textarea') textareaElement: ElementRef @ViewChild('previewElement') previewElement: ElementRef - truncatedPreviewHTML: SafeHtml | string = '' previewHTML: SafeHtml | string = '' isMaximized = false @@ -129,7 +127,6 @@ export class MarkdownTextareaComponent implements ControlValueAccessor, OnInit { private async updatePreviews () { if (this.content === null || this.content === undefined) return - this.truncatedPreviewHTML = await this.markdownRender(truncate(this.content, { length: this.truncate })) this.previewHTML = await this.markdownRender(this.content) } diff --git a/client/src/sass/class-helpers/_text.scss b/client/src/sass/class-helpers/_text.scss index 0fe698d4f..2231219fd 100644 --- a/client/src/sass/class-helpers/_text.scss +++ b/client/src/sass/class-helpers/_text.scss @@ -36,6 +36,10 @@ overflow: hidden; } +.ellipsis-multiline-1 { + @include ellipsis-multiline(1); +} + .ellipsis-multiline-2 { @include ellipsis-multiline(2); } @@ -45,3 +49,7 @@ } // --------------------------------------------------------------------------- + +.ellipsis { + @include ellipsis; +}