client/src/app/shared/angular/timestamp-route-transformer.directive.ts

   1 import { Directive, EventEmitter, HostListener, Output } from '@angular/core'
   2
   3 @Directive({
   4   selector: '[timestampRouteTransformer]'
   5 })
   6 export class TimestampRouteTransformerDirective {
   7   @Output() timestampClicked = new EventEmitter<number>()
   8
   9   @HostListener('click', ['$event'])
  10   public onClick ($event: Event) {
  11     const target = $event.target as HTMLLinkElement
  12
  13     if (target.hasAttribute('href')) {
  14       const ngxLink = document.createElement('a')
  15       ngxLink.href = target.getAttribute('href')
  16
  17       // we only care about reflective links
  18       if (ngxLink.host !== window.location.host) return
  19
  20       const ngxLinkParams = new URLSearchParams(ngxLink.search)
  21       if (ngxLinkParams.has('start')) {
  22         const separators = ['h', 'm', 's']
  23         const start = ngxLinkParams
  24           .get('start')
  25           .match(new RegExp('(\\d{1,9}[' + separators.join('') + '])','g')) // match digits before any given separator
  26           .map(t => {
  27             if (t.includes('h')) return parseInt(t, 10) * 3600
  28             if (t.includes('m')) return parseInt(t, 10) * 60
  29             return parseInt(t, 10)
  30           })
  31           .reduce((acc, t) => acc + t)
  32         this.timestampClicked.emit(start)
  33       }
  34
  35       $event.preventDefault()
  36     }
  37
  38     return
  39   }
  40 }