Handle markdown in account/video channel pages

2 files changed, 15 insertions, 6 deletions

diff --git a/client/src/app/+video-channels/video-channel-about/video-channel-about.component.html b/client/src/app/+video-channels/video-channel-about/video-channel-about.component.html
index b7125ff71..9655668d7 100644
--- a/client/src/app/+video-channels/video-channel-about/video-channel-about.component.html
+++ b/client/src/app/+video-channels/video-channel-about/video-channel-about.component.html
@@ -2,12 +2,12 @@
   <div class="description col-md-6 col-sm-12">
     <div class="block">
       <div i18n class="small-title">Description</div>
-      <div class="content">{{ getVideoChannelDescription() }}</div>
+      <div class="content" [innerHtml]="getVideoChannelDescription()"></div>
     </div>
 
-    <div class="block" *ngIf="videoChannel.support">
+    <div class="block" *ngIf="supportHTML">
       <div i18n class="small-title">Support this channel</div>
-      <div class="content">{{ videoChannel.support }}</div>
+      <div class="content" [innerHtml]="supportHTML"></div>
     </div>
   </div>
 
diff --git a/client/src/app/+video-channels/video-channel-about/video-channel-about.component.ts b/client/src/app/+video-channels/video-channel-about/video-channel-about.component.ts
index dc0893962..901c91de9 100644
--- a/client/src/app/+video-channels/video-channel-about/video-channel-about.component.ts
+++ b/client/src/app/+video-channels/video-channel-about/video-channel-about.component.ts
@@ -4,6 +4,7 @@ import { VideoChannelService } from '@app/shared/video-channel/video-channel.ser
 import { VideoChannel } from '@app/shared/video-channel/video-channel.model'
 import { I18n } from '@ngx-translate/i18n-polyfill'
 import { Subscription } from 'rxjs'
+import { MarkdownService } from '@app/videos/shared'
 
 @Component({
   selector: 'my-video-channel-about',
@@ -12,19 +13,27 @@ import { Subscription } from 'rxjs'
 })
 export class VideoChannelAboutComponent implements OnInit, OnDestroy {
   videoChannel: VideoChannel
+  descriptionHTML = ''
+  supportHTML = ''
 
   private videoChannelSub: Subscription
 
   constructor (
     private route: ActivatedRoute,
     private i18n: I18n,
-    private videoChannelService: VideoChannelService
+    private videoChannelService: VideoChannelService,
+    private markdownService: MarkdownService
   ) { }
 
   ngOnInit () {
     // Parent get the video channel for us
     this.videoChannelSub = this.videoChannelService.videoChannelLoaded
-      .subscribe(videoChannel => this.videoChannel = videoChannel)
+      .subscribe(videoChannel => {
+        this.videoChannel = videoChannel
+
+        this.descriptionHTML = this.markdownService.textMarkdownToHTML(this.videoChannel.description)
+        this.supportHTML = this.markdownService.enhancedMarkdownToHTML(this.videoChannel.support)
+      })
   }
 
   ngOnDestroy () {
@@ -32,7 +41,7 @@ export class VideoChannelAboutComponent implements OnInit, OnDestroy {
   }
 
   getVideoChannelDescription () {
-    if (this.videoChannel.description) return this.videoChannel.description
+    if (this.descriptionHTML) return this.descriptionHTML
 
     return this.i18n('No description')
   }