Client: add ability to report a video

6 files changed, 144 insertions, 4 deletions

diff --git a/client/src/app/videos/video-watch/index.ts b/client/src/app/videos/video-watch/index.ts
index 1a8403b0a..ed0ed2fc0 100644
--- a/client/src/app/videos/video-watch/index.ts
+++ b/client/src/app/videos/video-watch/index.ts
@@ -1,4 +1,5 @@
 export * from './video-magnet.component';
 export * from './video-share.component';
+export * from './video-report.component';
 export * from './video-watch.component';
 export * from './webtorrent.service';
diff --git a/client/src/app/videos/video-watch/video-report.component.html b/client/src/app/videos/video-watch/video-report.component.html
new file mode 100644
index 000000000..741080ead
--- /dev/null
+++ b/client/src/app/videos/video-watch/video-report.component.html
@@ -0,0 +1,38 @@
+<div bsModal #modal="bs-modal" class="modal" tabindex="-1">
+  <div class="modal-dialog">
+    <div class="modal-content modal-lg">
+
+      <div class="modal-header">
+        <button type="button" class="close" aria-label="Close" (click)="hide()">
+          <span aria-hidden="true">&times;</span>
+        </button>
+        <h4 class="modal-title">Report video</h4>
+      </div>
+
+      <div class="modal-body">
+
+        <form novalidate [formGroup]="form">
+          <div class="form-group">
+            <label for="description">Reason</label>
+            <textarea
+              id="reason" class="form-control" placeholder="Reason..."
+              formControlName="reason"
+            >
+            </textarea>
+            <div *ngIf="formErrors.reason" class="alert alert-danger">
+              {{ formErrors.reason }}
+            </div>
+          </div>
+
+          <div class="form-group">
+            <input
+              type="button" value="Report" class="btn btn-default form-control"
+              [disabled]="!form.valid" (click)="report()"
+            >
+          </div>
+        </form>
+
+      </div>
+    </div>
+  </div>
+</div>
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..7bc1677ab
--- /dev/null
+++ b/client/src/app/videos/video-watch/video-report.component.ts
@@ -0,0 +1,68 @@
+import { Component, Input, OnInit, ViewChild } from '@angular/core';
+import { FormBuilder, FormGroup } from '@angular/forms';
+
+import { ModalDirective } from 'ng2-bootstrap/modal';
+
+import { FormReactive, VIDEO_REPORT_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_REPORT_REASON.MESSAGES
+  };
+
+  constructor(
+    private formBuilder: FormBuilder,
+    private videoService: VideoService
+   ) {
+    super();
+  }
+
+  ngOnInit() {
+    this.buildForm();
+  }
+
+  buildForm() {
+    this.form = this.formBuilder.group({
+      reason: [ '', VIDEO_REPORT_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.videoService.reportVideo(this.video.id, reason)
+                     .subscribe(
+                       // TODO: move alert to beautiful notifications
+                       ok => {
+                         alert('Video reported.');
+                         this.hide();
+                       },
+
+                       err => alert(err.text)
+                      )
+  }
+}
diff --git a/client/src/app/videos/video-watch/video-watch.component.html b/client/src/app/videos/video-watch/video-watch.component.html
index a726ef3ff..8cee9959d 100644
--- a/client/src/app/videos/video-watch/video-watch.component.html
+++ b/client/src/app/videos/video-watch/video-watch.component.html
@@ -60,6 +60,19 @@
       <button title="Get magnet URI" id="magnet-uri" class="btn btn-default" (click)="showMagnetUriModal()">
         <span class="glyphicon glyphicon-magnet"></span> Magnet
       </button>
+
+      <div *ngIf="isUserLoggedIn()" class="btn-group" dropdown>
+        <button id="single-button" type="button" id="more" class="btn btn-default" dropdownToggle>
+          <span class="glyphicon glyphicon-option-horizontal"></span> More
+        </button>
+        <ul dropdownMenu id="more-menu" role="menu" aria-labelledby="single-button">
+          <li role="menuitem">
+            <a class="dropdown-item" href="#" (click)="showReportModal($event)">
+              <span class="glyphicon glyphicon-alert"></span> Report
+            </a>
+          </li>
+        </ul>
+      </div>
     </div>
   </div>
 
@@ -79,5 +92,8 @@
   </div>
 </div>
 
-<my-video-share #videoShareModal *ngIf="video !== null" [video]="video"></my-video-share>
-<my-video-magnet #videoMagnetModal *ngIf="video !== null" [video]="video"></my-video-magnet>
+<template [ngIf]="video !== null">
+  <my-video-share #videoShareModal [video]="video"></my-video-share>
+  <my-video-magnet #videoMagnetModal [video]="video"></my-video-magnet>
+  <my-video-report #videoReportModal [video]="video"></my-video-report>
+</template>
diff --git a/client/src/app/videos/video-watch/video-watch.component.scss b/client/src/app/videos/video-watch/video-watch.component.scss
index ac62b04e7..794412707 100644
--- a/client/src/app/videos/video-watch/video-watch.component.scss
+++ b/client/src/app/videos/video-watch/video-watch.component.scss
@@ -47,10 +47,14 @@
       top: 2px;
     }
 
-    #magnet-uri, #share {
+    #magnet-uri, #share, #more {
       font-weight: bold;
       opacity: 0.85;
     }
+
+    #more-menu .dropdown-item .glyphicon {
+      margin-right: 5px;
+    }
   }
 
   #video-by-date {
diff --git a/client/src/app/videos/video-watch/video-watch.component.ts b/client/src/app/videos/video-watch/video-watch.component.ts
index 256ffef99..d83cc5a7a 100644
--- a/client/src/app/videos/video-watch/video-watch.component.ts
+++ b/client/src/app/videos/video-watch/video-watch.component.ts
@@ -5,8 +5,10 @@ import { ActivatedRoute } from '@angular/router';
 import { MetaService } from 'ng2-meta';
 import * as videojs from 'video.js';
 
+import { AuthService } from '../../core';
 import { VideoMagnetComponent } from './video-magnet.component';
 import { VideoShareComponent } from './video-share.component';
+import { VideoReportComponent } from './video-report.component';
 import { Video, VideoService } from '../shared';
 import { WebTorrentService } from './webtorrent.service';
 
@@ -21,6 +23,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
 
   @ViewChild('videoMagnetModal') videoMagnetModal: VideoMagnetComponent;
   @ViewChild('videoShareModal') videoShareModal: VideoShareComponent;
+  @ViewChild('videoReportModal') videoReportModal: VideoReportComponent;
 
   downloadSpeed: number;
   error: boolean = false;
@@ -42,7 +45,8 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
     private route: ActivatedRoute,
     private videoService: VideoService,
     private metaService: MetaService,
-    private webTorrentService: WebTorrentService
+    private webTorrentService: WebTorrentService,
+    private authService: AuthService
   ) {}
 
   ngOnInit() {
@@ -123,6 +127,11 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
     });
   }
 
+  showReportModal(event: Event) {
+    event.preventDefault();
+    this.videoReportModal.show();
+  }
+
   showShareModal() {
     this.videoShareModal.show();
   }
@@ -131,6 +140,10 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
     this.videoMagnetModal.show();
   }
 
+  isUserLoggedIn() {
+    return this.authService.isLoggedIn();
+  }
+
   private loadTooLong() {
     this.error = true;
     console.error('The video load seems to be abnormally long.');