client/src/app/shared/shared-forms/timestamp-input.component.ts

   1 import { ChangeDetectorRef, Component, forwardRef, Input, OnInit } from '@angular/core'
   2 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'
   3 import { secondsToTime, timeToInt } from '../../../assets/player/utils'
   4
   5 @Component({
   6   selector: 'my-timestamp-input',
   7   styleUrls: [ './timestamp-input.component.scss' ],
   8   templateUrl: './timestamp-input.component.html',
   9   providers: [
  10     {
  11       provide: NG_VALUE_ACCESSOR,
  12       useExisting: forwardRef(() => TimestampInputComponent),
  13       multi: true
  14     }
  15   ]
  16 })
  17 export class TimestampInputComponent implements ControlValueAccessor, OnInit {
  18   @Input() maxTimestamp: number
  19   @Input() timestamp: number
  20   @Input() disabled = false
  21
  22   timestampString: string
  23
  24   constructor (private changeDetector: ChangeDetectorRef) {}
  25
  26   ngOnInit () {
  27     this.writeValue(this.timestamp || 0)
  28   }
  29
  30   propagateChange = (_: any) => { /* empty */ }
  31
  32   writeValue (timestamp: number) {
  33     this.timestamp = timestamp
  34
  35     this.timestampString = secondsToTime(this.timestamp, true, ':')
  36   }
  37
  38   registerOnChange (fn: (_: any) => void) {
  39     this.propagateChange = fn
  40   }
  41
  42   registerOnTouched () {
  43     // Unused
  44   }
  45
  46   onModelChange () {
  47     this.timestamp = timeToInt(this.timestampString)
  48
  49     this.propagateChange(this.timestamp)
  50   }
  51
  52   onBlur () {
  53     if (this.maxTimestamp && this.timestamp > this.maxTimestamp) {
  54       this.writeValue(this.maxTimestamp)
  55
  56       this.changeDetector.detectChanges()
  57
  58       this.propagateChange(this.timestamp)
  59     }
  60   }
  61 }