Correctly truncate HTML

We can because we don't use the video truncated description since v5.0

4 files changed, 40 insertions, 72 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 @@
 
               <my-markdown-textarea
                 formControlName="description" [markdownVideo]="videoToUpdate"
-                [formError]="formErrors.description" [truncate]="250"
+                [formError]="formErrors.description" [truncateTo3Lines]="true"
               ></my-markdown-textarea>
             </div>
           </div>
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 @@
 <div class="video-info-description">
   <div
+    #descriptionHTML
     class="video-info-description-html"
-    [innerHTML]="getHTMLDescription()"
+    [ngClass]="{ 'ellipsis-multiline-3': !completeDescriptionShown }"
+    [innerHTML]="videoHTMLDescription"
     (timestampClicked)="onTimestampClicked($event)"
     myTimestampRouteTransformer
   ></div>
 
   <button
-    *ngIf="completeDescriptionShown === false && video.description?.length >= 250"
-    (click)="showMoreDescription()" class="video-info-description-more button-unstyle"
+    *ngIf="(hasEllipsis() && !completeDescriptionShown) || completeDescriptionShown"
+    (click)="completeDescriptionShown = !completeDescriptionShown"
+    class="video-info-description-more button-unstyle"
   >
-    <ng-container i18n>Show more</ng-container>
-    <span *ngIf="descriptionLoading === false" class="chevron-down"></span>
-    <my-loader size="sm" class="description-loading" [loading]="descriptionLoading"></my-loader>
-  </button>
+    <ng-container *ngIf="!completeDescriptionShown">
+      <ng-container i18n>Show more</ng-container>
+      <span class="chevron-down"></span>
+    </ng-container>
 
-  <button
-    *ngIf="completeDescriptionShown === true"
-    (click)="showLessDescription()" class="video-info-description-more button-unstyle"
-  >
-    <ng-container i18n>Show less</ng-container>
-    <span *ngIf="descriptionLoading === false" class="chevron-up"></span>
+    <ng-container *ngIf="completeDescriptionShown">
+      <ng-container i18n>Show less</ng-container>
+      <span class="chevron-up"></span>
+    </ng-container>
   </button>
 </div>
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<HTMLElement>
+
   @Input() video: VideoDetails
 
   @Output() timestampClicked = new EventEmitter<number>()
 
-  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 })
-
-      this.videoHTMLDescription = this.markdownService.processVideoTimestamps(this.video.shortUUID, html)
-    }
-
-    {
-      const html = await this.markdownService.textMarkdownToHTML({ markdown: this.video.truncatedDescription })
+    const html = await this.markdownService.textMarkdownToHTML({ markdown: this.video.description })
 
-      this.videoHTMLTruncatedDescription = this.markdownService.processVideoTimestamps(this.video.shortUUID, html)
-    }
+    this.videoHTMLDescription = this.markdownService.processVideoTimestamps(this.video.shortUUID, html)
   }
 }