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

   1 import { Component, EventEmitter, Inject, Input, LOCALE_ID, 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     @Inject(LOCALE_ID) private localeId: string
  26   ) { }
  27
  28   ngOnChanges () {
  29     this.descriptionLoading = false
  30     this.completeDescriptionShown = false
  31     this.completeVideoDescription = undefined
  32
  33     this.setVideoDescriptionHTML()
  34   }
  35
  36   showMoreDescription () {
  37     if (this.completeVideoDescription === undefined) {
  38       return this.loadCompleteDescription()
  39     }
  40
  41     this.updateVideoDescription(this.completeVideoDescription)
  42     this.completeDescriptionShown = true
  43   }
  44
  45   showLessDescription () {
  46     this.updateVideoDescription(this.shortVideoDescription)
  47     this.completeDescriptionShown = false
  48   }
  49
  50   loadCompleteDescription () {
  51     this.descriptionLoading = true
  52
  53     this.videoService.loadCompleteDescription(this.video.descriptionPath)
  54         .subscribe(
  55           description => {
  56             this.completeDescriptionShown = true
  57             this.descriptionLoading = false
  58
  59             this.shortVideoDescription = this.video.description
  60             this.completeVideoDescription = description
  61
  62             this.updateVideoDescription(this.completeVideoDescription)
  63           },
  64
  65           error => {
  66             this.descriptionLoading = false
  67             this.notifier.error(error.message)
  68           }
  69         )
  70   }
  71
  72   onTimestampClicked (timestamp: number) {
  73     this.timestampClicked.emit(timestamp)
  74   }
  75
  76   private updateVideoDescription (description: string) {
  77     this.video.description = description
  78     this.setVideoDescriptionHTML()
  79       .catch(err => console.error(err))
  80   }
  81
  82   private async setVideoDescriptionHTML () {
  83     const html = await this.markdownService.textMarkdownToHTML(this.video.description)
  84     this.videoHTMLDescription = this.markdownService.processVideoTimestamps(html)
  85   }
  86 }