Create a dedicated component for video description

8 files changed, 161 insertions, 117 deletions

diff --git a/client/src/app/+videos/+video-watch/video-description.component.html b/client/src/app/+videos/+video-watch/video-description.component.html
new file mode 100644
index 000000000..57f682899
--- /dev/null
+++ b/client/src/app/+videos/+video-watch/video-description.component.html
@@ -0,0 +1,19 @@
+<div class="video-info-description">
+  <div
+    class="video-info-description-html"
+    [innerHTML]="videoHTMLDescription"
+    (timestampClicked)="onTimestampClicked($event)"
+    timestampRouteTransformer
+  ></div>
+
+  <div class="video-info-description-more" *ngIf="completeDescriptionShown === false && video.description?.length >= 250" (click)="showMoreDescription()">
+    <ng-container i18n>Show more</ng-container>
+    <span *ngIf="descriptionLoading === false" class="glyphicon glyphicon-menu-down"></span>
+    <my-small-loader class="description-loading" [loading]="descriptionLoading"></my-small-loader>
+  </div>
+
+  <div *ngIf="completeDescriptionShown === true" (click)="showLessDescription()" class="video-info-description-more">
+    <ng-container i18n>Show less</ng-container>
+    <span *ngIf="descriptionLoading === false" class="glyphicon glyphicon-menu-up"></span>
+  </div>
+</div>
diff --git a/client/src/app/+videos/+video-watch/video-description.component.scss b/client/src/app/+videos/+video-watch/video-description.component.scss
new file mode 100644
index 000000000..fc8b4574c
--- /dev/null
+++ b/client/src/app/+videos/+video-watch/video-description.component.scss
@@ -0,0 +1,46 @@
+@use '_variables' as *;
+@use '_mixins' as *;
+
+.video-info-description {
+  @include margin-left($video-watch-info-margin-left);
+  @include margin-right(0);
+
+  margin-top: 20px;
+  margin-bottom: 20px;
+  font-size: 15px;
+
+  .video-info-description-html {
+    @include peertube-word-wrap;
+
+    ::ng-deep a {
+      text-decoration: none;
+    }
+  }
+
+  .glyphicon,
+  .description-loading {
+    @include margin-left(3px);
+  }
+
+  .description-loading {
+    display: inline-block;
+  }
+
+  .video-info-description-more {
+    cursor: pointer;
+    font-weight: $font-semibold;
+    color: pvar(--greyForegroundColor);
+    font-size: 14px;
+
+    .glyphicon {
+      position: relative;
+      top: 2px;
+    }
+  }
+}
+
+@media screen and (max-width: 450px) {
+  .video-info-description {
+    font-size: 14px !important;
+  }
+}
diff --git a/client/src/app/+videos/+video-watch/video-description.component.ts b/client/src/app/+videos/+video-watch/video-description.component.ts
new file mode 100644
index 000000000..2ea3b206f
--- /dev/null
+++ b/client/src/app/+videos/+video-watch/video-description.component.ts
@@ -0,0 +1,87 @@
+import { Component, EventEmitter, Inject, Input, LOCALE_ID, OnChanges, Output } from '@angular/core'
+import { MarkdownService, Notifier } from '@app/core'
+import { VideoDetails, VideoService } from '@app/shared/shared-main'
+
+
+@Component({
+  selector: 'my-video-description',
+  templateUrl: './video-description.component.html',
+  styleUrls: [ './video-description.component.scss' ]
+})
+export class VideoDescriptionComponent implements OnChanges {
+  @Input() video: VideoDetails
+
+  @Output() timestampClicked = new EventEmitter<number>()
+
+  descriptionLoading = false
+  completeDescriptionShown = false
+  completeVideoDescription: string
+  shortVideoDescription: string
+  videoHTMLDescription = ''
+
+  constructor (
+    private videoService: VideoService,
+    private notifier: Notifier,
+    private markdownService: MarkdownService,
+    @Inject(LOCALE_ID) private localeId: string
+  ) { }
+
+  ngOnChanges () {
+    this.descriptionLoading = false
+    this.completeDescriptionShown = false
+    this.completeVideoDescription = undefined
+
+    this.setVideoDescriptionHTML()
+  }
+
+  showMoreDescription () {
+    if (this.completeVideoDescription === undefined) {
+      return this.loadCompleteDescription()
+    }
+
+    this.updateVideoDescription(this.completeVideoDescription)
+    this.completeDescriptionShown = true
+  }
+
+  showLessDescription () {
+    this.updateVideoDescription(this.shortVideoDescription)
+    this.completeDescriptionShown = false
+  }
+
+  loadCompleteDescription () {
+    this.descriptionLoading = true
+
+    this.videoService.loadCompleteDescription(this.video.descriptionPath)
+        .subscribe(
+          description => {
+            this.completeDescriptionShown = true
+            this.descriptionLoading = false
+
+            this.shortVideoDescription = this.video.description
+            this.completeVideoDescription = description
+
+            this.updateVideoDescription(this.completeVideoDescription)
+          },
+
+          error => {
+            this.descriptionLoading = false
+            this.notifier.error(error.message)
+          }
+        )
+  }
+
+  onTimestampClicked (timestamp: number) {
+    this.timestampClicked.emit(timestamp)
+  }
+
+  private updateVideoDescription (description: string) {
+    this.video.description = description
+    this.setVideoDescriptionHTML()
+      .catch(err => console.error(err))
+  }
+
+  private async setVideoDescriptionHTML () {
+    const html = await this.markdownService.textMarkdownToHTML(this.video.description)
+    this.videoHTMLDescription = this.markdownService.processVideoTimestamps(html)
+  }
+}
diff --git a/client/src/app/+videos/+video-watch/video-watch.component.html b/client/src/app/+videos/+video-watch/video-watch.component.html
index a659a7db1..40efa7b35 100644
--- a/client/src/app/+videos/+video-watch/video-watch.component.html
+++ b/client/src/app/+videos/+video-watch/video-watch.component.html
@@ -186,25 +186,7 @@
 
       </div>
 
-      <div class="video-info-description">
-        <div
-          class="video-info-description-html"
-          [innerHTML]="videoHTMLDescription"
-          (timestampClicked)="handleTimestampClicked($event)"
-          timestampRouteTransformer
-        ></div>
-
-        <div class="video-info-description-more" *ngIf="completeDescriptionShown === false && video.description?.length >= 250" (click)="showMoreDescription()">
-          <ng-container i18n>Show more</ng-container>
-          <span *ngIf="descriptionLoading === false" class="glyphicon glyphicon-menu-down"></span>
-          <my-small-loader class="description-loading" [loading]="descriptionLoading"></my-small-loader>
-        </div>
-
-        <div *ngIf="completeDescriptionShown === true" (click)="showLessDescription()" class="video-info-description-more">
-          <ng-container i18n>Show less</ng-container>
-          <span *ngIf="descriptionLoading === false" class="glyphicon glyphicon-menu-up"></span>
-        </div>
-      </div>
+      <my-video-description [video]="video"></my-video-description>
 
       <div class="video-attributes mb-3">
         <div class="video-attribute">
diff --git a/client/src/app/+videos/+video-watch/video-watch.component.scss b/client/src/app/+videos/+video-watch/video-watch.component.scss
index 4d68504f5..f25f3bf31 100644
--- a/client/src/app/+videos/+video-watch/video-watch.component.scss
+++ b/client/src/app/+videos/+video-watch/video-watch.component.scss
@@ -4,15 +4,12 @@
 @use '_bootstrap-variables';
 @use '_miniature' as *;
 
-$player-factor: math.div(16, 9);
-$video-info-margin-left: 44px;
-
 @function getPlayerHeight ($width) {
-  @return calc(#{$width} / #{$player-factor});
+  @return calc(#{$width} / #{$video-watch-player-factor});
 }
 
 @function getPlayerWidth ($height) {
-  @return calc(#{$height} * #{$player-factor});
+  @return calc(#{$height} * #{$video-watch-player-factor});
 }
 
 @mixin playlist-below-player {
@@ -316,46 +313,8 @@ $video-info-margin-left: 44px;
       }
     }
 
-    .video-info-description {
-      @include margin-left($video-info-margin-left);
-      @include margin-right(0);
-
-      margin-top: 20px;
-      margin-bottom: 20px;
-      font-size: 15px;
-
-      .video-info-description-html {
-        @include peertube-word-wrap;
-
-        ::ng-deep a {
-          text-decoration: none;
-        }
-      }
-
-      .glyphicon,
-      .description-loading {
-        @include margin-left(3px);
-      }
-
-      .description-loading {
-        display: inline-block;
-      }
-
-      .video-info-description-more {
-        cursor: pointer;
-        font-weight: $font-semibold;
-        color: pvar(--greyForegroundColor);
-        font-size: 14px;
-
-        .glyphicon {
-          position: relative;
-          top: 2px;
-        }
-      }
-    }
-
     .video-attributes {
-      @include margin-left($video-info-margin-left);
+      @include margin-left($video-watch-info-margin-left);
     }
 
     .video-attributes .video-attribute {
@@ -555,10 +514,6 @@ my-video-comments {
         margin-top: 10px;
       }
     }
-
-    .video-info-description {
-      font-size: 14px !important;
-    }
   }
 }
 
diff --git a/client/src/app/+videos/+video-watch/video-watch.component.ts b/client/src/app/+videos/+video-watch/video-watch.component.ts
index e2fbf7524..e6b353220 100644
--- a/client/src/app/+videos/+video-watch/video-watch.component.ts
+++ b/client/src/app/+videos/+video-watch/video-watch.component.ts
@@ -8,7 +8,6 @@ import {
   AuthService,
   AuthUser,
   ConfirmService,
-  MarkdownService,
   MetaService,
   Notifier,
   PeerTubeSocket,
@@ -139,7 +138,6 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
     private serverService: ServerService,
     private restExtractor: RestExtractor,
     private notifier: Notifier,
-    private markdownService: MarkdownService,
     private zone: NgZone,
     private redirectService: RedirectService,
     private videoCaptionService: VideoCaptionService,
@@ -228,20 +226,6 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
     this.hotkeysService.remove(this.hotkeys)
   }
 
-  showMoreDescription () {
-    if (this.completeVideoDescription === undefined) {
-      return this.loadCompleteDescription()
-    }
-
-    this.updateVideoDescription(this.completeVideoDescription)
-    this.completeDescriptionShown = true
-  }
-
-  showLessDescription () {
-    this.updateVideoDescription(this.shortVideoDescription)
-    this.completeDescriptionShown = false
-  }
-
   showDownloadModal () {
     this.videoDownloadModal.show(this.video, this.videoCaptions)
   }
@@ -250,28 +234,6 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
     return this.video && this.video instanceof VideoDetails && this.video.downloadEnabled && !this.video.isLive
   }
 
-  loadCompleteDescription () {
-    this.descriptionLoading = true
-
-    this.videoService.loadCompleteDescription(this.video.descriptionPath)
-        .subscribe(
-          description => {
-            this.completeDescriptionShown = true
-            this.descriptionLoading = false
-
-            this.shortVideoDescription = this.video.description
-            this.completeVideoDescription = description
-
-            this.updateVideoDescription(this.completeVideoDescription)
-          },
-
-          error => {
-            this.descriptionLoading = false
-            this.notifier.error(error.message)
-          }
-        )
-  }
-
   showSupportModal () {
     this.supportModal.show()
   }
@@ -492,17 +454,6 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
       })
   }
 
-  private updateVideoDescription (description: string) {
-    this.video.description = description
-    this.setVideoDescriptionHTML()
-      .catch(err => console.error(err))
-  }
-
-  private async setVideoDescriptionHTML () {
-    const html = await this.markdownService.textMarkdownToHTML(this.video.description)
-    this.videoHTMLDescription = this.markdownService.processVideoTimestamps(html)
-  }
-
   private setVideoLikesBarTooltipText () {
     this.likesBarTooltipText = `${this.video.likes} likes / ${this.video.dislikes} dislikes`
   }
@@ -552,7 +503,6 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
     this.buildPlayer(urlOptions)
       .catch(err => console.error('Cannot build the player', err))
 
-    this.setVideoDescriptionHTML()
     this.setVideoLikesBarTooltipText()
 
     this.setOpenGraphTags()
diff --git a/client/src/app/+videos/+video-watch/video-watch.module.ts b/client/src/app/+videos/+video-watch/video-watch.module.ts
index 57f36c723..93b143542 100644
--- a/client/src/app/+videos/+video-watch/video-watch.module.ts
+++ b/client/src/app/+videos/+video-watch/video-watch.module.ts
@@ -19,6 +19,7 @@ import { PlayerStylesComponent } from './player-styles.component'
 import { RecommendationsModule } from './recommendations/recommendations.module'
 import { TimestampRouteTransformerDirective } from './timestamp-route-transformer.directive'
 import { VideoAvatarChannelComponent } from './video-avatar-channel.component'
+import { VideoDescriptionComponent } from './video-description.component'
 import { VideoRateComponent } from './video-rate.component'
 import { VideoWatchPlaylistComponent } from './video-watch-playlist.component'
 import { VideoWatchRoutingModule } from './video-watch-routing.module'
@@ -47,6 +48,7 @@ import { VideoWatchComponent } from './video-watch.component'
     VideoWatchComponent,
     VideoWatchPlaylistComponent,
     VideoRateComponent,
+    VideoDescriptionComponent,
 
     VideoCommentsComponent,
     VideoCommentAddComponent,
diff --git a/client/src/sass/include/_variables.scss b/client/src/sass/include/_variables.scss
index 8f3d3c3b4..39e81f270 100644
--- a/client/src/sass/include/_variables.scss
+++ b/client/src/sass/include/_variables.scss
@@ -95,6 +95,9 @@ $activated-action-button-color: #000;
 
 $focus-box-shadow-form: 0 0 0 .2rem;
 
+$video-watch-player-factor: math.div(16, 9);
+$video-watch-info-margin-left: 44px;
+
 /*** map theme ***/
 
 // pass variables into a sass map,