1 files changed, 7 insertions, 9 deletions

diff --git a/client/src/app/videos/+video-watch/modal/video-support.component.ts b/client/src/app/videos/+video-watch/modal/video-support.component.ts
index c515298a0..2d400e0be 100644
--- a/client/src/app/videos/+video-watch/modal/video-support.component.ts
+++ b/client/src/app/videos/+video-watch/modal/video-support.component.ts
@@ -1,8 +1,8 @@
 import { Component, Input, ViewChild } from '@angular/core'
 import { MarkdownService } from '@app/videos/shared'
 
-import { ModalDirective } from 'ngx-bootstrap/modal'
 import { VideoDetails } from '../../../shared/video/video-details.model'
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
 
 @Component({
   selector: 'my-video-support',
@@ -12,21 +12,19 @@ import { VideoDetails } from '../../../shared/video/video-details.model'
 export class VideoSupportComponent {
   @Input() video: VideoDetails = null
 
-  @ViewChild('modal') modal: ModalDirective
+  @ViewChild('modal') modal: NgbModal
 
   videoHTMLSupport = ''
 
-  constructor (private markdownService: MarkdownService) {
+  constructor (
+    private markdownService: MarkdownService,
+    private modalService: NgbModal
+  ) {
     // empty
   }
 
   show () {
-    this.modal.show()
-
     this.videoHTMLSupport = this.markdownService.enhancedMarkdownToHTML(this.video.support)
-  }
-
-  hide () {
-    this.modal.hide()
+    this.modalService.open(this.modal)
   }
 }