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

   1 import { Component, forwardRef, Input, OnInit } from '@angular/core'
   2 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'
   3 import 'rxjs/add/operator/debounceTime'
   4 import 'rxjs/add/operator/distinctUntilChanged'
   5 import { isInMobileView } from '@app/shared/misc/utils'
   6 import { Subject } from 'rxjs/Subject'
   7 import { MarkdownService } from '../../shared'
   8 import truncate from 'lodash-es/truncate'
   9
  10 @Component({
  11   selector: 'my-video-description',
  12   templateUrl: './video-description.component.html',
  13   styleUrls: [ './video-description.component.scss' ],
  14   providers: [
  15     {
  16       provide: NG_VALUE_ACCESSOR,
  17       useExisting: forwardRef(() => VideoDescriptionComponent),
  18       multi: true
  19     }
  20   ]
  21 })
  22
  23 export class VideoDescriptionComponent implements ControlValueAccessor, OnInit {
  24   @Input() description = ''
  25   truncatedDescriptionHTML = ''
  26   descriptionHTML = ''
  27
  28   private descriptionChanged = new Subject<string>()
  29
  30   constructor (private markdownService: MarkdownService) {}
  31
  32   ngOnInit () {
  33     this.descriptionChanged
  34       .debounceTime(150)
  35       .distinctUntilChanged()
  36       .subscribe(() => this.updateDescriptionPreviews())
  37
  38     this.descriptionChanged.next(this.description)
  39   }
  40
  41   propagateChange = (_: any) => { /* empty */ }
  42
  43   writeValue (description: string) {
  44     this.description = description
  45
  46     this.descriptionChanged.next(this.description)
  47   }
  48
  49   registerOnChange (fn: (_: any) => void) {
  50     this.propagateChange = fn
  51   }
  52
  53   registerOnTouched () {
  54     // Unused
  55   }
  56
  57   onModelChange () {
  58     this.propagateChange(this.description)
  59
  60     this.descriptionChanged.next(this.description)
  61   }
  62
  63   arePreviewsDisplayed () {
  64     return isInMobileView() === false
  65   }
  66
  67   private updateDescriptionPreviews () {
  68     if (!this.description) return
  69
  70     this.truncatedDescriptionHTML = this.markdownService.markdownToHTML(truncate(this.description, { length: 250 }))
  71     this.descriptionHTML = this.markdownService.markdownToHTML(this.description)
  72   }
  73 }