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   completeVideoDescription: string
  19   shortVideoDescription: string
  20   videoHTMLDescription = ''
  21
  22   constructor (
  23     private videoService: VideoService,
  24     private notifier: Notifier,
  25     private markdownService: MarkdownService
  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           next: 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: err => {
  66             this.descriptionLoading = false
  67             this.notifier.error(err.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 => logger.error(err))
  80   }
  81
  82   private async setVideoDescriptionHTML () {
  83     const html = await this.markdownService.textMarkdownToHTML({ markdown: this.video.description })
  84
  85     this.videoHTMLDescription = this.markdownService.processVideoTimestamps(this.video.shortUUID, html)
  86   }
  87 }