Client: add ability to report a video

[github/Chocobozzz/PeerTube.git] / client / src / app / videos / video-watch / video-watch.component.ts

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 1d5fd45eebb841525d3576bb85c4a791a6dc8982..d83cc5a7aa9f4a3ab6562ded5f232c382e9ce8af 100644 (file)
--- a/client/src/app/videos/video-watch/video-watch.component.ts
+++ b/client/src/app/videos/video-watch/video-watch.component.ts
@@ -1,9 +1,14 @@
+import { setInterval, setTimeout } from 'timers'
 import { Component, ElementRef, NgZone, OnDestroy, OnInit, ViewChild } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 
-import { ModalDirective } from 'ng2-bootstrap/components/modal';
 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';
 
@@ -16,14 +21,19 @@ import { WebTorrentService } from './webtorrent.service';
 export class VideoWatchComponent implements OnInit, OnDestroy {
   private static LOADTIME_TOO_LONG: number = 30000;
 
-  @ViewChild('magnetUriModal') magnetUriModal: ModalDirective;
+  @ViewChild('videoMagnetModal') videoMagnetModal: VideoMagnetComponent;
+  @ViewChild('videoShareModal') videoShareModal: VideoShareComponent;
+  @ViewChild('videoReportModal') videoReportModal: VideoReportComponent;
 
   downloadSpeed: number;
   error: boolean = false;
   loading: boolean = false;
   numPeers: number;
+  player: VideoJSPlayer;
+  playerElement: Element;
   uploadSpeed: number;
   video: Video = null;
+  videoNotFound = false;
 
   private errorTimer: NodeJS.Timer;
   private sub: any;
@@ -35,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() {
@@ -47,24 +58,43 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
           this.setOpenGraphTags();
           this.loadVideo();
         },
-        error => alert(error.text)
+        error => {
+          this.videoNotFound = true;
+        }
       );
     });
+
+    this.playerElement = this.elementRef.nativeElement.querySelector('#video-container');
+
+    const videojsOptions = {
+      controls: true,
+      autoplay: false
+    };
+
+    const self = this;
+    videojs(this.playerElement, videojsOptions, function () {
+      self.player = this;
+    });
   }
 
   ngOnDestroy() {
+    // Remove WebTorrent stuff
     console.log('Removing video from webtorrent.');
     clearInterval(this.torrentInfosInterval);
     clearTimeout(this.errorTimer);
-    this.webTorrentService.remove(this.video.magnetUri);
 
+    if (this.video !== null) {
+      this.webTorrentService.remove(this.video.magnetUri);
+    }
+
+    // Remove player
+    videojs(this.playerElement).dispose();
+
+    // Unsubscribe route subscription
     this.sub.unsubscribe();
   }
 
   loadVideo() {
-
-    console.log('<iframe width="560" height="315" src="' + window.location.origin + '/videos/embed/' + this.video.id + '" frameborder="0" allowfullscreen></iframe>');
-
     // Reset the error
     this.error = false;
     // We are loading the video
@@ -86,7 +116,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
       this.loading = false;
 
       console.log('Added ' + this.video.magnetUri + '.');
-      torrent.files[0].appendTo(this.elementRef.nativeElement.querySelector('.embed-responsive'), (err) => {
+      torrent.files[0].renderTo(this.playerElement, { autoplay: true }, (err) => {
         if (err) {
           alert('Cannot append the file.');
           console.error(err);
@@ -97,12 +127,21 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
     });
   }
 
+  showReportModal(event: Event) {
+    event.preventDefault();
+    this.videoReportModal.show();
+  }
+
+  showShareModal() {
+    this.videoShareModal.show();
+  }
+
   showMagnetUriModal() {
-    this.magnetUriModal.show();
+    this.videoMagnetModal.show();
   }
 
-  hideMagnetUriModal() {
-    this.magnetUriModal.hide();
+  isUserLoggedIn() {
+    return this.authService.isLoggedIn();
   }
 
   private loadTooLong() {