Fix gitignores

[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 09255de5d3d2076db05b1acae3946198841053a6..e705fa555b65ac19cebc58eb43f38e04c7c33ed7 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,29 +1,29 @@
-import { Component, ElementRef, OnDestroy, OnInit } from '@angular/core';
+import { Component, ElementRef, NgZone, OnDestroy, OnInit, ViewChild } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 
-import { BytesPipe } from 'angular-pipes/src/math/bytes.pipe';
+import { ModalDirective } from 'ng2-bootstrap/components/modal';
+import { MetaService } from 'ng2-meta';
 
-import { LoaderComponent, Video, VideoService } from '../shared';
+import { Video, VideoService } from '../shared';
 import { WebTorrentService } from './webtorrent.service';
 
 @Component({
   selector: 'my-video-watch',
-  template: require('./video-watch.component.html'),
-  styles: [ require('./video-watch.component.scss') ],
-  providers: [ WebTorrentService ],
-  directives: [ LoaderComponent ],
-  pipes: [ BytesPipe ]
+  templateUrl: './video-watch.component.html',
+  styleUrls: [ './video-watch.component.scss' ]
 })
 
 export class VideoWatchComponent implements OnInit, OnDestroy {
   private static LOADTIME_TOO_LONG: number = 30000;
 
+  @ViewChild('magnetUriModal') magnetUriModal: ModalDirective;
+
   downloadSpeed: number;
   error: boolean = false;
   loading: boolean = false;
   numPeers: number;
   uploadSpeed: number;
-  video: Video;
+  video: Video = null;
 
   private errorTimer: NodeJS.Timer;
   private sub: any;
@@ -31,11 +31,36 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
 
   constructor(
     private elementRef: ElementRef,
+    private ngZone: NgZone,
     private route: ActivatedRoute,
     private videoService: VideoService,
+    private metaService: MetaService,
     private webTorrentService: WebTorrentService
   ) {}
 
+  ngOnInit() {
+    this.sub = this.route.params.subscribe(routeParams => {
+      let id = routeParams['id'];
+      this.videoService.getVideo(id).subscribe(
+        video => {
+          this.video = video;
+          this.setOpenGraphTags();
+          this.loadVideo();
+        },
+        error => alert(error.text)
+      );
+    });
+  }
+
+  ngOnDestroy() {
+    console.log('Removing video from webtorrent.');
+    clearInterval(this.torrentInfosInterval);
+    clearTimeout(this.errorTimer);
+    this.webTorrentService.remove(this.video.magnetUri);
+
+    this.sub.unsubscribe();
+  }
+
   loadVideo() {
     // Reset the error
     this.error = false;
@@ -65,38 +90,50 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
         }
       });
 
-      // Refresh each second
-      this.torrentInfosInterval = setInterval(() => {
-        this.downloadSpeed = torrent.downloadSpeed;
-        this.numPeers = torrent.numPeers;
-        this.uploadSpeed = torrent.uploadSpeed;
-      }, 1000);
+      this.runInProgress(torrent);
     });
   }
 
-  ngOnDestroy() {
-    console.log('Removing video from webtorrent.');
-    clearInterval(this.torrentInfosInterval);
-    this.webTorrentService.remove(this.video.magnetUri);
-
-    this.sub.unsubscribe();
+  showMagnetUriModal() {
+    this.magnetUriModal.show();
   }
 
-  ngOnInit() {
-    this.sub = this.route.params.subscribe(routeParams => {
-      let id = routeParams['id'];
-      this.videoService.getVideo(id).subscribe(
-        video => {
-          this.video = video;
-          this.loadVideo();
-        },
-        error => alert(error)
-      );
-    });
+  hideMagnetUriModal() {
+    this.magnetUriModal.hide();
   }
 
   private loadTooLong() {
     this.error = true;
     console.error('The video load seems to be abnormally long.');
   }
+
+  private setOpenGraphTags() {
+    this.metaService.setTag('og:type', 'video');
+
+    this.metaService.setTag('og:title', this.video.name);
+    this.metaService.setTag('name', this.video.name);
+
+    this.metaService.setTag('og:description', this.video.description);
+    this.metaService.setTag('description', this.video.description);
+
+    this.metaService.setTag('og:image', this.video.thumbnailPath);
+
+    this.metaService.setTag('og:duration', this.video.duration);
+
+    this.metaService.setTag('og:site_name', 'PeerTube');
+
+    this.metaService.setTag('og:url', window.location.href);
+    this.metaService.setTag('url', window.location.href);
+  }
+
+  private runInProgress(torrent: any) {
+    // Refresh each second
+    this.torrentInfosInterval = setInterval(() => {
+      this.ngZone.run(() => {
+        this.downloadSpeed = torrent.downloadSpeed;
+        this.numPeers = torrent.numPeers;
+        this.uploadSpeed = torrent.uploadSpeed;
+      });
+    }, 1000);
+  }
 }