Migrate to bootstrap 4 and ng-bootstrap

1 files changed, 9 insertions, 4 deletions

diff --git a/client/src/app/videos/+video-watch/modal/video-report.component.ts b/client/src/app/videos/+video-watch/modal/video-report.component.ts
index d9768fdac..297afb19f 100644
--- a/client/src/app/videos/+video-watch/modal/video-report.component.ts
+++ b/client/src/app/videos/+video-watch/modal/video-report.component.ts
@@ -1,11 +1,12 @@
 import { Component, Input, OnInit, ViewChild } from '@angular/core'
 import { NotificationsService } from 'angular2-notifications'
-import { ModalDirective } from 'ngx-bootstrap/modal'
 import { FormReactive, VideoAbuseService } from '../../../shared/index'
 import { VideoDetails } from '../../../shared/video/video-details.model'
 import { I18n } from '@ngx-translate/i18n-polyfill'
 import { FormValidatorService } from '@app/shared/forms/form-validators/form-validator.service'
 import { VideoAbuseValidatorsService } from '@app/shared/forms/form-validators/video-abuse-validators.service'
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
+import { NgbModalRef } from '@ng-bootstrap/ng-bootstrap/modal/modal-ref'
 
 @Component({
   selector: 'my-video-report',
@@ -15,12 +16,15 @@ import { VideoAbuseValidatorsService } from '@app/shared/forms/form-validators/v
 export class VideoReportComponent extends FormReactive implements OnInit {
   @Input() video: VideoDetails = null
 
-  @ViewChild('modal') modal: ModalDirective
+  @ViewChild('modal') modal: NgbModal
 
   error: string = null
 
+  private openedModal: NgbModalRef
+
   constructor (
     protected formValidatorService: FormValidatorService,
+    private modalService: NgbModal,
     private videoAbuseValidatorsService: VideoAbuseValidatorsService,
     private videoAbuseService: VideoAbuseService,
     private notificationsService: NotificationsService,
@@ -36,11 +40,12 @@ export class VideoReportComponent extends FormReactive implements OnInit {
   }
 
   show () {
-    this.modal.show()
+    this.openedModal = this.modalService.open(this.modal, { keyboard: false })
   }
 
   hide () {
-    this.modal.hide()
+    this.openedModal.close()
+    this.openedModal = null
   }
 
   report () {