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