Add hyperlink video timestamps in description

Fix #1312 (duplicates: #1728 and #2007)
The modification is also applied to comments and video editing.

2 files changed, 16 insertions, 4 deletions

diff --git a/client/src/app/shared/forms/markdown-textarea.component.ts b/client/src/app/shared/forms/markdown-textarea.component.ts
index 49a57f29d..0c5788899 100644
--- a/client/src/app/shared/forms/markdown-textarea.component.ts
+++ b/client/src/app/shared/forms/markdown-textarea.component.ts
@@ -27,6 +27,7 @@ export class MarkdownTextareaComponent implements ControlValueAccessor, OnInit {
   @Input() previewColumn = false
   @Input() truncate: number
   @Input() markdownType: 'text' | 'enhanced' = 'text'
+  @Input() markdownVideo = false
 
   textareaMarginRight = '0'
   flexDirection = 'column'
@@ -89,9 +90,11 @@ export class MarkdownTextareaComponent implements ControlValueAccessor, OnInit {
     this.previewHTML = await this.markdownRender(this.content)
   }
 
-  private markdownRender (text: string) {
-    if (this.markdownType === 'text') return this.markdownService.textMarkdownToHTML(text)
+  private async markdownRender (text: string) {
+    const html = this.markdownType === 'text' ?
+      await this.markdownService.textMarkdownToHTML(text) :
+      await this.markdownService.enhancedMarkdownToHTML(text)
 
-    return this.markdownService.enhancedMarkdownToHTML(text)
+    return this.markdownVideo ? this.markdownService.processVideoTimestamps(html) : html
   }
 }
diff --git a/client/src/app/shared/renderer/markdown.service.ts b/client/src/app/shared/renderer/markdown.service.ts
index 629bbb140..f6b71b88a 100644
--- a/client/src/app/shared/renderer/markdown.service.ts
+++ b/client/src/app/shared/renderer/markdown.service.ts
@@ -1,5 +1,6 @@
 import { Injectable } from '@angular/core'
 import { MarkdownIt } from 'markdown-it'
+import { buildVideoLink } from '../../../assets/player/utils'
 import { HtmlRendererService } from '@app/shared/renderer/html-renderer.service'
 
 type MarkdownParsers = {
@@ -90,6 +91,14 @@ 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
@@ -130,7 +139,7 @@ export class MarkdownService {
   private avoidTruncatedTags (html: string) {
     return html.replace(/\*\*?([^*]+)$/, '$1')
       .replace(/<a[^>]+>([^<]+)<\/a>\s*...((<\/p>)|(<\/li>)|(<\/strong>))?$/mi, '$1...')
-      .replace(/\[[^\]]+\]\(([^\)]+)$/m, '$1')
+      .replace(/\[[^\]]+\]?\(?([^\)]+)$/, '$1')
       .replace(/\s?\[[^\]]+\]?[.]{3}<\/p>$/m, '...</p>')
   }
 }