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