client/src/app/+videos/+video-watch/shared/metadata/video-description.component.ts

   1 import { Component, EventEmitter, Input, OnChanges, Output } from '@angular/core'
   2 import { MarkdownService, Notifier } from '@app/core'
   3 import { VideoDetails, VideoService } from '@app/shared/shared-main'
   4 import { logger } from '@root-helpers/logger'
   5
   6 @Component({
   7   selector: 'my-video-description',
   8   templateUrl: './video-description.component.html',
   9   styleUrls: [ './video-description.component.scss' ]
  10 })
  11 export class VideoDescriptionComponent implements OnChanges {
  12   @Input() video: VideoDetails
  13
  14   @Output() timestampClicked = new EventEmitter<number>()
  15
  16   descriptionLoading = false
  17   completeDescriptionShown = false
  18
  19   completeVideoDescriptionLoaded = false
  20
  21   videoHTMLTruncatedDescription = ''
  22   videoHTMLDescription = ''
  23
  24   constructor (
  25     private videoService: VideoService,
  26     private notifier: Notifier,
  27     private markdownService: MarkdownService
  28   ) { }
  29
  30   ngOnChanges () {
  31     this.descriptionLoading = false
  32     this.completeDescriptionShown = false
  33
  34     this.setVideoDescriptionHTML()
  35   }
  36
  37   showMoreDescription () {
  38     if (!this.completeVideoDescriptionLoaded) {
  39       return this.loadCompleteDescription()
  40     }
  41
  42     this.completeDescriptionShown = true
  43   }
  44
  45   showLessDescription () {
  46     this.completeDescriptionShown = false
  47   }
  48
  49   loadCompleteDescription () {
  50     this.descriptionLoading = true
  51
  52     this.videoService.loadCompleteDescription(this.video.descriptionPath)
  53         .subscribe({
  54           next: description => {
  55             this.completeDescriptionShown = true
  56             this.descriptionLoading = false
  57
  58             this.video.description = description
  59
  60             this.setVideoDescriptionHTML()
  61               .catch(err => logger.error(err))
  62           },
  63
  64           error: err => {
  65             this.descriptionLoading = false
  66             this.notifier.error(err.message)
  67           }
  68         })
  69   }
  70
  71   onTimestampClicked (timestamp: number) {
  72     this.timestampClicked.emit(timestamp)
  73   }
  74
  75   getHTMLDescription () {
  76     if (this.completeDescriptionShown) {
  77       return this.videoHTMLDescription
  78     }
  79
  80     return this.videoHTMLTruncatedDescription
  81   }
  82
  83   private async setVideoDescriptionHTML () {
  84     {
  85       const html = await this.markdownService.textMarkdownToHTML({ markdown: this.video.description })
  86
  87       this.videoHTMLDescription = this.markdownService.processVideoTimestamps(this.video.shortUUID, html)
  88     }
  89
  90     {
  91       const html = await this.markdownService.textMarkdownToHTML({ markdown: this.video.truncatedDescription })
  92
  93       this.videoHTMLTruncatedDescription = this.markdownService.processVideoTimestamps(this.video.shortUUID, html)
  94     }
  95   }
  96 }