Provide native links for description timestamps, and re-clickability for these

2 files changed, 54 insertions, 9 deletions

diff --git a/client/src/app/shared/angular/timestamp-route-transformer.directive.ts b/client/src/app/shared/angular/timestamp-route-transformer.directive.ts
new file mode 100644
index 000000000..d71077d10
--- /dev/null
+++ b/client/src/app/shared/angular/timestamp-route-transformer.directive.ts
@@ -0,0 +1,45 @@
+import { Directive, ElementRef, HostListener, Output, EventEmitter } from '@angular/core'
+import { Router } from '@angular/router'
+
+type ElementEvent = Omit<Event, 'target'> & {
+  target: HTMLInputElement
+}
+
+@Directive({
+  selector: '[timestampRouteTransformer]'
+})
+export class TimestampRouteTransformerDirective {
+  @Output() timestampClicked = new EventEmitter<number>()
+
+  constructor (private el: ElementRef, private router: Router) { }
+
+  @HostListener('click', ['$event'])
+  public onClick ($event: ElementEvent) {
+    if ($event.target.hasAttribute('href')) {
+      const ngxLink = document.createElement('a')
+      ngxLink.href = $event.target.getAttribute('href')
+
+      // we only care about reflective links
+      if (ngxLink.host !== window.location.host) return
+
+      const ngxLinkParams = new URLSearchParams(ngxLink.search)
+      if (ngxLinkParams.has('start')) {
+        const separators = ['h', 'm', 's']
+        const start = ngxLinkParams
+          .get('start')
+          .match(new RegExp('(\\d{1,9}[' + separators.join('') + '])','g')) // match digits before any given separator
+          .map(t => {
+            if (t.includes('h')) return parseInt(t, 10) * 3600
+            if (t.includes('m')) return parseInt(t, 10) * 60
+            return parseInt(t, 10)
+          })
+          .reduce((acc, t) => acc + t)
+        this.timestampClicked.emit(start)
+      }
+
+      $event.preventDefault()
+    }
+
+    return
+  }
+}
diff --git a/client/src/app/shared/renderer/markdown.service.ts b/client/src/app/shared/renderer/markdown.service.ts
index f6b71b88a..0d3fde537 100644
--- a/client/src/app/shared/renderer/markdown.service.ts
+++ b/client/src/app/shared/renderer/markdown.service.ts
@@ -75,6 +75,14 @@ export class MarkdownService {
     return this.render('completeMarkdownIt', markdown)
   }
 
+  async processVideoTimestamps (html: string) {
+    return html.replace(/((\d{1,2}):)?(\d{1,2}):(\d{1,2})/g, function (str, _, h, m, s) {
+      const t = (3600 * +(h || 0)) + (60 * +(m || 0)) + (+(s || 0))
+      const url = buildVideoLink({ startTime: t })
+      return `<a class="video-timestamp" href="${url}">${str}</a>`
+    })
+  }
+
   private async render (name: keyof MarkdownParsers, markdown: string) {
     if (!markdown) return ''
 
@@ -91,14 +99,6 @@ export class MarkdownService {
     return html
   }
 
-  async processVideoTimestamps (html: string) {
-    return html.replace(/((\d{1,2}):)?(\d{1,2}):(\d{1,2})/g, function (str, _, h, m, s) {
-      const t = (3600 * +(h || 0)) + (60 * +(m || 0)) + (+(s || 0))
-      const url = buildVideoLink({ startTime: t })
-      return `<a href="${url}">${str}</a>`
-    })
-  }
-
   private async createMarkdownIt (config: MarkdownConfig) {
     // FIXME: import('...') returns a struct module, containing a "default" field corresponding to our sanitizeHtml function
     const MarkdownItClass: typeof import ('markdown-it') = (await import('markdown-it') as any).default
@@ -139,7 +139,7 @@ export class MarkdownService {
   private avoidTruncatedTags (html: string) {
     return html.replace(/\*\*?([^*]+)$/, '$1')
       .replace(/<a[^>]+>([^<]+)<\/a>\s*...((<\/p>)|(<\/li>)|(<\/strong>))?$/mi, '$1...')
-      .replace(/\[[^\]]+\]?\(?([^\)]+)$/, '$1')
+      .replace(/\[[^\]]+\]\(([^\)]+)$/m, '$1')
       .replace(/\s?\[[^\]]+\]?[.]{3}<\/p>$/m, '...</p>')
   }
 }