Add video comment components

9 files changed, 311 insertions, 0 deletions

diff --git a/client/src/app/videos/+video-watch/modal/video-download.component.html b/client/src/app/videos/+video-watch/modal/video-download.component.html
new file mode 100644
index 000000000..f8f17a471
--- /dev/null
+++ b/client/src/app/videos/+video-watch/modal/video-download.component.html
@@ -0,0 +1,42 @@
+<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">Download video</h4>
+      </div>
+
+      <div class="modal-body">
+        <div class="peertube-select-container">
+          <select [(ngModel)]="resolution">
+            <option *ngFor="let file of video.files" [value]="file.resolution">{{ file.resolutionLabel }}</option>
+          </select>
+        </div>
+
+        <div class="download-type">
+          <div class="peertube-radio-container">
+            <input type="radio" name="download" id="download-torrent" [(ngModel)]="downloadType" value="torrent">
+            <label for="download-torrent">Torrent</label>
+          </div>
+
+          <div class="peertube-radio-container">
+            <input type="radio" name="download" id="download-direct" [(ngModel)]="downloadType" value="direct">
+            <label for="download-direct">Direct download</label>
+          </div>
+        </div>
+
+        <div class="form-group inputs">
+          <span class="action-button action-button-cancel" (click)="hide()">
+            Cancel
+          </span>
+
+          <input
+            type="submit" value="Download" class="action-button-submit"
+            (click)="download()"
+          >
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/client/src/app/videos/+video-watch/modal/video-download.component.scss b/client/src/app/videos/+video-watch/modal/video-download.component.scss
new file mode 100644
index 000000000..6325f67a3
--- /dev/null
+++ b/client/src/app/videos/+video-watch/modal/video-download.component.scss
@@ -0,0 +1,17 @@
+@import 'variables';
+@import 'mixins';
+
+.peertube-select-container {
+  @include peertube-select-container(130px);
+}
+
+.download-type {
+  margin-top: 30px;
+
+  .peertube-radio-container {
+    @include peertube-radio-container;
+
+    display: inline-block;
+    margin-right: 30px;
+  }
+}
diff --git a/client/src/app/videos/+video-watch/modal/video-download.component.ts b/client/src/app/videos/+video-watch/modal/video-download.component.ts
new file mode 100644
index 000000000..1a73ea6df
--- /dev/null
+++ b/client/src/app/videos/+video-watch/modal/video-download.component.ts
@@ -0,0 +1,44 @@
+import { Component, Input, OnInit, ViewChild } from '@angular/core'
+import { ModalDirective } from 'ngx-bootstrap/modal'
+import { VideoDetails } from '../../../shared/video/video-details.model'
+
+@Component({
+  selector: 'my-video-download',
+  templateUrl: './video-download.component.html',
+  styleUrls: [ './video-download.component.scss' ]
+})
+export class VideoDownloadComponent implements OnInit {
+  @Input() video: VideoDetails = null
+
+  @ViewChild('modal') modal: ModalDirective
+
+  downloadType: 'direct' | 'torrent' = 'torrent'
+  resolution = -1
+
+  constructor () {
+    // empty
+  }
+
+  ngOnInit () {
+    this.resolution = this.video.files[0].resolution
+  }
+
+  show () {
+    this.modal.show()
+  }
+
+  hide () {
+    this.modal.hide()
+  }
+
+  download () {
+    const file = this.video.files.find(f => f.resolution === this.resolution)
+    if (!file) {
+      console.error('Could not find file with resolution %d.', this.resolution)
+      return
+    }
+
+    const link = this.downloadType === 'direct' ? file.fileUrl : file.torrentUrl
+    window.open(link)
+  }
+}
diff --git a/client/src/app/videos/+video-watch/modal/video-report.component.html b/client/src/app/videos/+video-watch/modal/video-report.component.html
new file mode 100644
index 000000000..a9a7beb48
--- /dev/null
+++ b/client/src/app/videos/+video-watch/modal/video-report.component.html
@@ -0,0 +1,36 @@
+<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">Report video</h4>
+      </div>
+
+      <div class="modal-body">
+
+        <form novalidate [formGroup]="form" (ngSubmit)="report()">
+          <div class="form-group">
+            <textarea placeholder="Reason..." formControlName="reason" [ngClass]="{ 'input-error': formErrors['reason'] }">
+            </textarea>
+            <div *ngIf="formErrors.reason" class="form-error">
+              {{ formErrors.reason }}
+            </div>
+          </div>
+
+          <div class="form-group inputs">
+            <span class="action-button action-button-cancel" (click)="hide()">
+              Cancel
+            </span>
+
+            <input
+              type="submit" value="Submit" class="action-button-submit"
+              [disabled]="!form.valid"
+            >
+          </div>
+        </form>
+
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/client/src/app/videos/+video-watch/modal/video-report.component.scss b/client/src/app/videos/+video-watch/modal/video-report.component.scss
new file mode 100644
index 000000000..84562f15c
--- /dev/null
+++ b/client/src/app/videos/+video-watch/modal/video-report.component.scss
@@ -0,0 +1,6 @@
+@import 'variables';
+@import 'mixins';
+
+textarea {
+  @include peertube-textarea(100%, 60px);
+}
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
new file mode 100644
index 000000000..050e827e7
--- /dev/null
+++ b/client/src/app/videos/+video-watch/modal/video-report.component.ts
@@ -0,0 +1,68 @@
+import { Component, Input, OnInit, ViewChild } from '@angular/core'
+import { FormBuilder, FormGroup } from '@angular/forms'
+import { NotificationsService } from 'angular2-notifications'
+import { ModalDirective } from 'ngx-bootstrap/modal'
+import { FormReactive, VIDEO_ABUSE_REASON, VideoAbuseService } from '../../../shared/index'
+import { VideoDetails } from '../../../shared/video/video-details.model'
+
+@Component({
+  selector: 'my-video-report',
+  templateUrl: './video-report.component.html',
+  styleUrls: [ './video-report.component.scss' ]
+})
+export class VideoReportComponent extends FormReactive implements OnInit {
+  @Input() video: VideoDetails = 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)
+                           )
+  }
+}
diff --git a/client/src/app/videos/+video-watch/modal/video-share.component.html b/client/src/app/videos/+video-watch/modal/video-share.component.html
new file mode 100644
index 000000000..85cf10a6c
--- /dev/null
+++ b/client/src/app/videos/+video-watch/modal/video-share.component.html
@@ -0,0 +1,47 @@
+<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">Share</h4>
+      </div>
+
+      <div class="modal-body">
+        <div class="form-group">
+          <label>URL</label>
+          <div class="input-group input-group-sm">
+            <input #urlInput (click)="urlInput.select()" type="text" class="form-control input-sm readonly" readonly [value]="getVideoUrl()" />
+            <div class="input-group-btn" placement="bottom right">
+              <button [ngxClipboard]="urlInput" (click)="activateCopiedMessage()" type="button" class="btn btn-default btn-search">
+                <span class="glyphicon glyphicon-copy"></span>
+              </button>
+            </div>
+          </div>
+        </div>
+
+        <div class="form-group">
+          <label>Embed</label>
+          <div class="input-group input-group-sm">
+            <input #shareInput (click)="shareInput.select()" type="text" class="form-control input-sm readonly" readonly [value]="getVideoIframeCode()" />
+            <div class="input-group-btn" placement="bottom right">
+              <button [ngxClipboard]="shareInput" (click)="activateCopiedMessage()" type="button" class="btn btn-default btn-search">
+                <span class="glyphicon glyphicon-copy"></span>
+              </button>
+            </div>
+          </div>
+        </div>
+
+        <div *ngIf="notSecure()" class="alert alert-warning">
+          The url is not secured (no HTTPS), so the embed video won't work on HTTPS websites (web browsers block non secured HTTP requests on HTTPS websites).
+        </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-share.component.scss b/client/src/app/videos/+video-watch/modal/video-share.component.scss
new file mode 100644
index 000000000..184e09027
--- /dev/null
+++ b/client/src/app/videos/+video-watch/modal/video-share.component.scss
@@ -0,0 +1,3 @@
+.action-button-cancel {
+  margin-right: 0 !important;
+}
diff --git a/client/src/app/videos/+video-watch/modal/video-share.component.ts b/client/src/app/videos/+video-watch/modal/video-share.component.ts
new file mode 100644
index 000000000..678cccfb5
--- /dev/null
+++ b/client/src/app/videos/+video-watch/modal/video-share.component.ts
@@ -0,0 +1,48 @@
+import { Component, Input, ViewChild } from '@angular/core'
+
+import { NotificationsService } from 'angular2-notifications'
+
+import { ModalDirective } from 'ngx-bootstrap/modal'
+import { VideoDetails } from '../../../shared/video/video-details.model'
+
+@Component({
+  selector: 'my-video-share',
+  templateUrl: './video-share.component.html',
+  styleUrls: [ './video-share.component.scss' ]
+})
+export class VideoShareComponent {
+  @Input() video: VideoDetails = null
+
+  @ViewChild('modal') modal: ModalDirective
+
+  constructor (private notificationsService: NotificationsService) {
+    // empty
+  }
+
+  show () {
+    this.modal.show()
+  }
+
+  hide () {
+    this.modal.hide()
+  }
+
+  getVideoIframeCode () {
+    return '<iframe width="560" height="315" ' +
+           'src="' + this.video.embedUrl + '" ' +
+           'frameborder="0" allowfullscreen>' +
+           '</iframe>'
+  }
+
+  getVideoUrl () {
+    return window.location.href
+  }
+
+  notSecure () {
+    return window.location.protocol === 'http:'
+  }
+
+  activateCopiedMessage () {
+    this.notificationsService.success('Success', 'Copied')
+  }
+}