Handle markdown in account/video channel pages

client/src/app/+accounts/account-about/account-about.component.html

@@ -1,7 +1,7 @@
 <div *ngIf="account" class="row">
   <div class="block col-md-6 col-sm-12">
     <div i18n class="small-title">Description</div>
-    <div class="content">{{ getAccountDescription() }}</div>
+    <div class="content" [innerHtml]="getAccountDescription()"></div>
   </div>
 
   <div class="block col-md-6 col-sm-12">

client/src/app/+accounts/account-about/account-about.component.ts

@@ -4,6 +4,7 @@ import { Account } from '@app/shared/account/account.model'
 import { AccountService } from '@app/shared/account/account.service'
 import { I18n } from '@ngx-translate/i18n-polyfill'
 import { Subscription } from 'rxjs'
+import { MarkdownService } from '@app/videos/shared'
 
 @Component({
   selector: 'my-account-about',
@@ -12,19 +13,24 @@ import { Subscription } from 'rxjs'
 })
 export class AccountAboutComponent implements OnInit, OnDestroy {
   account: Account
+  descriptionHTML = ''
 
   private accountSub: Subscription
 
   constructor (
     private route: ActivatedRoute,
     private i18n: I18n,
-    private accountService: AccountService
+    private accountService: AccountService,
+    private markdownService: MarkdownService
   ) { }
 
   ngOnInit () {
     // Parent get the account for us
     this.accountSub = this.accountService.accountLoaded
-      .subscribe(account => this.account = account)
+      .subscribe(account => {
+        this.account = account
+        this.descriptionHTML = this.markdownService.textMarkdownToHTML(this.account.description)
+      })
   }
 
   ngOnDestroy () {
@@ -32,7 +38,7 @@ export class AccountAboutComponent implements OnInit, OnDestroy {
   }
 
   getAccountDescription () {
-    if (this.account.description) return this.account.description
+    if (this.descriptionHTML) return this.descriptionHTML
 
     return this.i18n('No description')
   }

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>
 

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')
   }

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

@@ -23,11 +23,7 @@ export class VideoSupportComponent {
   show () {
     this.modal.show()
 
-    if (this.video.support) {
+    this.videoHTMLSupport = this.markdownService.enhancedMarkdownToHTML(this.video.support)
-      this.videoHTMLSupport = this.markdownService.enhancedMarkdownToHTML(this.video.support)
-    } else {
-      this.videoHTMLSupport = ''
-    }
   }
 
   hide () {

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

@@ -290,11 +290,6 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
   }
 
   private setVideoDescriptionHTML () {
-    if (!this.video.description) {
-      this.videoHTMLDescription = ''
-      return
-    }
-
     this.videoHTMLDescription = this.markdownService.textMarkdownToHTML(this.video.description)
   }
 

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

@@ -23,14 +23,16 @@ export class MarkdownService {
   }
 
   textMarkdownToHTML (markdown: string) {
-    const html = this.textMarkdownIt.render(markdown)
+    if (!markdown) return ''
 
+    const html = this.textMarkdownIt.render(markdown)
     return this.avoidTruncatedLinks(html)
   }
 
   enhancedMarkdownToHTML (markdown: string) {
-    const html = this.enhancedMarkdownIt.render(markdown)
+    if (!markdown) return ''
 
+    const html = this.enhancedMarkdownIt.render(markdown)
     return this.avoidTruncatedLinks(html)
   }