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
   5 @Component({
   6   selector: 'my-video-description',
   7   templateUrl: './video-description.component.html',
   8   styleUrls: [ './video-description.component.scss' ]
   9 })
  10 export class VideoDescriptionComponent implements OnChanges {
  11   @Input() video: VideoDetails
  12
  13   @Output() timestampClicked = new EventEmitter<number>()
  14
  15   descriptionLoading = false
  16   completeDescriptionShown = false
  17   completeVideoDescription: string
  18   shortVideoDescription: string
  19   videoHTMLDescription = ''
  20
  21   constructor (
  22     private videoService: VideoService,
  23     private notifier: Notifier,
  24     private markdownService: MarkdownService
  25   ) { }
  26
  27   ngOnChanges () {
  28     this.descriptionLoading = false
  29     this.completeDescriptionShown = false
  30     this.completeVideoDescription = undefined
  31
  32     this.setVideoDescriptionHTML()
  33   }
  34
  35   showMoreDescription () {
  36     if (this.completeVideoDescription === undefined) {
  37       return this.loadCompleteDescription()
  38     }
  39
  40     this.updateVideoDescription(this.completeVideoDescription)
  41     this.completeDescriptionShown = true
  42   }
  43
  44   showLessDescription () {
  45     this.updateVideoDescription(this.shortVideoDescription)
  46     this.completeDescriptionShown = false
  47   }
  48
  49   loadCompleteDescription () {
  50     this.descriptionLoading = true
  51
  52     this.videoService.loadCompleteDescription(this.video.descriptionPath)
  53         .subscribe(
  54           description => {
  55             this.completeDescriptionShown = true
  56             this.descriptionLoading = false
  57
  58             this.shortVideoDescription = this.video.description
  59             this.completeVideoDescription = description
  60
  61             this.updateVideoDescription(this.completeVideoDescription)
  62           },
  63
  64           error => {
  65             this.descriptionLoading = false
  66             this.notifier.error(error.message)
  67           }
  68         )
  69   }
  70
  71   onTimestampClicked (timestamp: number) {
  72     this.timestampClicked.emit(timestamp)
  73   }
  74
  75   private updateVideoDescription (description: string) {
  76     this.video.description = description
  77     this.setVideoDescriptionHTML()
  78       .catch(err => console.error(err))
  79   }
  80
  81   private async setVideoDescriptionHTML () {
  82     const html = await this.markdownService.textMarkdownToHTML(this.video.description)
  83     this.videoHTMLDescription = this.markdownService.processVideoTimestamps(html)
  84   }
  85 }