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

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