Add hyperlink video timestamps in description

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

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 ? await this.markdownService.processVideoTimestamps(html) : html
   }
 }

client/src/app/shared/renderer/markdown.service.ts

@@ -1,6 +1,6 @@
 import { Injectable } from '@angular/core'
-
 import { MarkdownIt } from 'markdown-it'
+import { buildVideoLink } from '../../../assets/player/utils'
 
 @Injectable()
 export class MarkdownService {
@@ -52,6 +52,14 @@ export class MarkdownService {
     return this.avoidTruncatedTags(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 (rules: string[], html = false) {
     // 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

client/src/app/videos/+video-edit/shared/video-edit.component.html

@@ -43,7 +43,7 @@
                 </ng-template>
               </my-help>
 
-              <my-markdown-textarea truncate="250" formControlName="description"></my-markdown-textarea>
+              <my-markdown-textarea truncate="250" formControlName="description" markdownVideo="true"></my-markdown-textarea>
 
               <div *ngIf="formErrors.description" class="form-error">
                 {{ formErrors.description }}

client/src/app/videos/+video-watch/comment/video-comment.component.ts

@@ -4,7 +4,7 @@ import { VideoCommentThreadTree } from '../../../../../../shared/models/videos/v
 import { AuthService } from '../../../core/auth'
 import { Video } from '../../../shared/video/video.model'
 import { VideoComment } from './video-comment.model'
-import { HtmlRendererService } from '@app/shared/renderer'
+import { HtmlRendererService, MarkdownService } from '@app/shared/renderer'
 
 @Component({
   selector: 'my-video-comment',
@@ -29,6 +29,7 @@ export class VideoCommentComponent implements OnInit, OnChanges {
 
   constructor (
     private htmlRenderer: HtmlRendererService,
+    private markdownService: MarkdownService,
     private authService: AuthService
   ) {}
 
@@ -86,8 +87,8 @@ export class VideoCommentComponent implements OnInit, OnChanges {
   }
 
   private async init () {
-    this.sanitizedCommentHTML = await this.htmlRenderer.toSafeHtml(this.comment.text)
-
+    const safeHTML = await this.htmlRenderer.toSafeHtml(this.comment.text)
+    this.sanitizedCommentHTML = await this.markdownService.processVideoTimestamps(safeHTML)
     this.newParentComments = this.parentComments.concat([ this.comment ])
   }
 }

client/src/app/videos/+video-watch/video-watch.component.ts

@@ -318,7 +318,8 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
   }
 
   private async setVideoDescriptionHTML () {
-    this.videoHTMLDescription = await this.markdownService.textMarkdownToHTML(this.video.description)
+    const html = await this.markdownService.textMarkdownToHTML(this.video.description)
+    this.videoHTMLDescription = await this.markdownService.processVideoTimestamps(html)
   }
 
   private setVideoLikesBarTooltipText () {