Try to optimize frontend

1 files changed, 69 insertions, 0 deletions

diff --git a/client/src/app/videos/+video-watch/video-report.component.ts b/client/src/app/videos/+video-watch/video-report.component.ts
new file mode 100644
index 000000000..d9c83a640
--- /dev/null
+++ b/client/src/app/videos/+video-watch/video-report.component.ts
@@ -0,0 +1,69 @@
+import { Component, Input, OnInit, ViewChild } from '@angular/core'
+import { FormBuilder, FormGroup } from '@angular/forms'
+
+import { ModalDirective } from 'ngx-bootstrap/modal'
+import { NotificationsService } from 'angular2-notifications'
+
+import { FormReactive, VideoAbuseService, VIDEO_ABUSE_REASON } from '../../shared'
+import { Video, VideoService } from '../shared'
+
+@Component({
+  selector: 'my-video-report',
+  templateUrl: './video-report.component.html'
+})
+export class VideoReportComponent extends FormReactive implements OnInit {
+  @Input() video: Video = null
+
+  @ViewChild('modal') modal: ModalDirective
+
+  error: string = null
+  form: FormGroup
+  formErrors = {
+    reason: ''
+  }
+  validationMessages = {
+    reason: VIDEO_ABUSE_REASON.MESSAGES
+  }
+
+  constructor (
+    private formBuilder: FormBuilder,
+    private videoAbuseService: VideoAbuseService,
+    private notificationsService: NotificationsService
+   ) {
+    super()
+  }
+
+  ngOnInit () {
+    this.buildForm()
+  }
+
+  buildForm () {
+    this.form = this.formBuilder.group({
+      reason: [ '', VIDEO_ABUSE_REASON.VALIDATORS ]
+    })
+
+    this.form.valueChanges.subscribe(data => this.onValueChanged(data))
+  }
+
+  show () {
+    this.modal.show()
+  }
+
+  hide () {
+    this.modal.hide()
+  }
+
+  report () {
+    const reason = this.form.value['reason']
+
+    this.videoAbuseService.reportVideo(this.video.id, reason)
+                          .subscribe(
+                            () => {
+                              this.notificationsService.success('Success', 'Video reported.')
+                              this.hide()
+                            },
+
+                            err => this.notificationsService.error('Error', err.message)
+                           )
+  }
+}