3 files changed, 61 insertions, 0 deletions

diff --git a/client/src/app/videos/+video-watch/modal/video-support.component.html b/client/src/app/videos/+video-watch/modal/video-support.component.html
new file mode 100644
index 000000000..16ad9502a
--- /dev/null
+++ b/client/src/app/videos/+video-watch/modal/video-support.component.html
@@ -0,0 +1,22 @@
+<div bsModal #modal="bs-modal" class="modal" tabindex="-1">
+  <div class="modal-dialog">
+    <div class="modal-content">
+
+      <div class="modal-header">
+        <span class="close" aria-hidden="true" (click)="hide()"></span>
+        <h4 class="modal-title">Support</h4>
+      </div>
+
+      <div class="modal-body">
+
+        <div [innerHTML]="videoHTMLSupport"></div>
+
+        <div class="form-group inputs">
+          <span class="action-button action-button-cancel" (click)="hide()">
+            Cancel
+          </span>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/client/src/app/videos/+video-watch/modal/video-support.component.scss b/client/src/app/videos/+video-watch/modal/video-support.component.scss
new file mode 100644
index 000000000..184e09027
--- /dev/null
+++ b/client/src/app/videos/+video-watch/modal/video-support.component.scss
@@ -0,0 +1,3 @@
+.action-button-cancel {
+  margin-right: 0 !important;
+}
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
new file mode 100644
index 000000000..f805215b9
--- /dev/null
+++ b/client/src/app/videos/+video-watch/modal/video-support.component.ts
@@ -0,0 +1,36 @@
+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'
+
+@Component({
+  selector: 'my-video-support',
+  templateUrl: './video-support.component.html',
+  styleUrls: [ './video-support.component.scss' ]
+})
+export class VideoSupportComponent {
+  @Input() video: VideoDetails = null
+
+  @ViewChild('modal') modal: ModalDirective
+
+  videoHTMLSupport = ''
+
+  constructor (private markdownService: MarkdownService) {
+    // empty
+  }
+
+  show () {
+    this.modal.show()
+
+    if (this.video.support) {
+      this.videoHTMLSupport = this.markdownService.enhancedMarkdownToHTML(this.video.support)
+    } else {
+      this.videoHTMLSupport = ''
+    }
+  }
+
+  hide () {
+    this.modal.hide()
+  }
+}