Add support to video support on client

4 files changed, 38 insertions, 22 deletions

diff --git a/client/src/app/shared/forms/form-validators/video.ts b/client/src/app/shared/forms/form-validators/video.ts
index 34a237a12..9ecbbbd60 100644
--- a/client/src/app/shared/forms/form-validators/video.ts
+++ b/client/src/app/shared/forms/form-validators/video.ts
@@ -44,10 +44,10 @@ export const VIDEO_CHANNEL = {
 }
 
 export const VIDEO_DESCRIPTION = {
-  VALIDATORS: [ Validators.minLength(3), Validators.maxLength(3000) ],
+  VALIDATORS: [ Validators.minLength(3), Validators.maxLength(10000) ],
   MESSAGES: {
     'minlength': 'Video description must be at least 3 characters long.',
-    'maxlength': 'Video description cannot be more than 3000 characters long.'
+    'maxlength': 'Video description cannot be more than 10000 characters long.'
   }
 }
 
@@ -58,3 +58,11 @@ export const VIDEO_TAGS = {
     'maxlength': 'A tag should be less than 30 characters long.'
   }
 }
+
+export const VIDEO_SUPPORT = {
+  VALIDATORS: [ Validators.minLength(3), Validators.maxLength(300) ],
+  MESSAGES: {
+    'minlength': 'Video support must be at least 3 characters long.',
+    'maxlength': 'Video support cannot be more than 300 characters long.'
+  }
+}
diff --git a/client/src/app/shared/forms/markdown-textarea.component.html b/client/src/app/shared/forms/markdown-textarea.component.html
index e8c5ded5b..46a97b163 100644
--- a/client/src/app/shared/forms/markdown-textarea.component.html
+++ b/client/src/app/shared/forms/markdown-textarea.component.html
@@ -1,12 +1,12 @@
 <div class="root" [ngStyle]="{ 'flex-direction': flexDirection }">
   <textarea
-    [(ngModel)]="description" (ngModelChange)="onModelChange()"
-    [ngClass]="classes" [ngStyle]="{ width: textareaWidth, height: textareaHeight, 'margin-right': textareaMarginRight }"
-    id="description" name="description">
+      [(ngModel)]="content" (ngModelChange)="onModelChange()"
+      [ngClass]="classes" [ngStyle]="{ width: textareaWidth, height: textareaHeight, 'margin-right': textareaMarginRight }"
+      id="description" name="description">
   </textarea>
 
   <tabset *ngIf="arePreviewsDisplayed()" class="previews">
-    <tab *ngIf="truncate !== undefined" heading="Truncated description preview" [innerHTML]="truncatedDescriptionHTML"></tab>
-    <tab heading="Complete description preview" [innerHTML]="descriptionHTML"></tab>
+    <tab *ngIf="truncate !== undefined" heading="Truncated preview" [innerHTML]="truncatedPreviewHTML"></tab>
+    <tab heading="Complete preview" [innerHTML]="previewHTML"></tab>
   </tabset>
 </div>
diff --git a/client/src/app/shared/forms/markdown-textarea.component.scss b/client/src/app/shared/forms/markdown-textarea.component.scss
index 82aff541d..6f7494621 100644
--- a/client/src/app/shared/forms/markdown-textarea.component.scss
+++ b/client/src/app/shared/forms/markdown-textarea.component.scss
@@ -22,6 +22,7 @@
       min-height: 75px;
       padding: 15px;
       font-size: 15px;
+      word-wrap: break-word;
     }
   }
 }
diff --git a/client/src/app/shared/forms/markdown-textarea.component.ts b/client/src/app/shared/forms/markdown-textarea.component.ts
index 2eae1b27e..928a63b28 100644
--- a/client/src/app/shared/forms/markdown-textarea.component.ts
+++ b/client/src/app/shared/forms/markdown-textarea.component.ts
@@ -21,29 +21,30 @@ import truncate from 'lodash-es/truncate'
 })
 
 export class MarkdownTextareaComponent implements ControlValueAccessor, OnInit {
-  @Input() description = ''
+  @Input() content = ''
   @Input() classes: string[] = []
   @Input() textareaWidth = '100%'
   @Input() textareaHeight = '150px'
   @Input() previewColumn = false
   @Input() truncate: number
+  @Input() markdownType: 'text' | 'enhanced' = 'text'
 
   textareaMarginRight = '0'
   flexDirection = 'column'
-  truncatedDescriptionHTML = ''
-  descriptionHTML = ''
+  truncatedPreviewHTML = ''
+  previewHTML = ''
 
-  private descriptionChanged = new Subject<string>()
+  private contentChanged = new Subject<string>()
 
   constructor (private markdownService: MarkdownService) {}
 
   ngOnInit () {
-    this.descriptionChanged
+    this.contentChanged
       .debounceTime(150)
       .distinctUntilChanged()
-      .subscribe(() => this.updateDescriptionPreviews())
+      .subscribe(() => this.updatePreviews())
 
-    this.descriptionChanged.next(this.description)
+    this.contentChanged.next(this.content)
 
     if (this.previewColumn) {
       this.flexDirection = 'row'
@@ -54,9 +55,9 @@ export class MarkdownTextareaComponent implements ControlValueAccessor, OnInit {
   propagateChange = (_: any) => { /* empty */ }
 
   writeValue (description: string) {
-    this.description = description
+    this.content = description
 
-    this.descriptionChanged.next(this.description)
+    this.contentChanged.next(this.content)
   }
 
   registerOnChange (fn: (_: any) => void) {
@@ -68,19 +69,25 @@ export class MarkdownTextareaComponent implements ControlValueAccessor, OnInit {
   }
 
   onModelChange () {
-    this.propagateChange(this.description)
+    this.propagateChange(this.content)
 
-    this.descriptionChanged.next(this.description)
+    this.contentChanged.next(this.content)
   }
 
   arePreviewsDisplayed () {
     return isInSmallView() === false
   }
 
-  private updateDescriptionPreviews () {
-    if (this.description === null || this.description === undefined) return
+  private updatePreviews () {
+    if (this.content === null || this.content === undefined) return
 
-    this.truncatedDescriptionHTML = this.markdownService.markdownToHTML(truncate(this.description, { length: this.truncate }))
-    this.descriptionHTML = this.markdownService.markdownToHTML(this.description)
+    this.truncatedPreviewHTML = this.markdownRender(truncate(this.content, { length: this.truncate }))
+    this.previewHTML = this.markdownRender(this.content)
+  }
+
+  private markdownRender (text: string) {
+    if (this.markdownType === 'text') return this.markdownService.textMarkdownToHTML(text)
+
+    return this.markdownService.enhancedMarkdownToHTML(text)
   }
 }