client/src/app/+videos/+video-watch/shared/timestamp-route-transformer.directive.ts

   1 import { Directive, EventEmitter, HostListener, Output } from '@angular/core'
   2
   3 @Directive({
   4   selector: '[myTimestampRouteTransformer]'
   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') !== true) return
  14     if (!target.classList.contains('video-timestamp')) return
  15
  16     const ngxLink = document.createElement('a')
  17     ngxLink.href = target.getAttribute('href')
  18
  19     const ngxLinkParams = new URLSearchParams(ngxLink.search)
  20     if (ngxLinkParams.has('start') !== true) return
  21
  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
  33     this.timestampClicked.emit(start)
  34
  35     $event.preventDefault()
  36   }
  37 }