client/src/app/videos/video-watch/video-watch.component.ts

   1 import { Component, ElementRef, NgZone, OnDestroy, OnInit } from '@angular/core';
   2 import { ActivatedRoute } from '@angular/router';
   3
   4 import { BytesPipe } from 'angular-pipes/src/math/bytes.pipe';
   5
   6 import { LoaderComponent, Video, VideoService } from '../shared';
   7 import { WebTorrentService } from './webtorrent.service';
   8
   9 @Component({
  10   selector: 'my-video-watch',
  11   template: require('./video-watch.component.html'),
  12   styles: [ require('./video-watch.component.scss') ],
  13   providers: [ WebTorrentService ],
  14   directives: [ LoaderComponent ],
  15   pipes: [ BytesPipe ]
  16 })
  17
  18 export class VideoWatchComponent implements OnInit, OnDestroy {
  19   private static LOADTIME_TOO_LONG: number = 30000;
  20
  21   downloadSpeed: number;
  22   error: boolean = false;
  23   loading: boolean = false;
  24   numPeers: number;
  25   uploadSpeed: number;
  26   video: Video;
  27
  28   private errorTimer: NodeJS.Timer;
  29   private sub: any;
  30   private torrentInfosInterval: NodeJS.Timer;
  31
  32   constructor(
  33     private elementRef: ElementRef,
  34     private ngZone: NgZone,
  35     private route: ActivatedRoute,
  36     private videoService: VideoService,
  37     private webTorrentService: WebTorrentService
  38   ) {}
  39
  40   loadVideo() {
  41     // Reset the error
  42     this.error = false;
  43     // We are loading the video
  44     this.loading = true;
  45
  46     console.log('Adding ' + this.video.magnetUri + '.');
  47
  48     // The callback might never return if there are network issues
  49     // So we create a timer to inform the user the load is abnormally long
  50     this.errorTimer = setTimeout(() => this.loadTooLong(), VideoWatchComponent.LOADTIME_TOO_LONG);
  51
  52     this.webTorrentService.add(this.video.magnetUri, (torrent) => {
  53       // Clear the error timer
  54       clearTimeout(this.errorTimer);
  55       // Maybe the error was fired by the timer, so reset it
  56       this.error = false;
  57
  58       // We are not loading the video anymore
  59       this.loading = false;
  60
  61       console.log('Added ' + this.video.magnetUri + '.');
  62       torrent.files[0].appendTo(this.elementRef.nativeElement.querySelector('.embed-responsive'), (err) => {
  63         if (err) {
  64           alert('Cannot append the file.');
  65           console.error(err);
  66         }
  67       });
  68
  69       this.runInProgress(torrent);
  70     });
  71   }
  72
  73   ngOnDestroy() {
  74     console.log('Removing video from webtorrent.');
  75     clearInterval(this.torrentInfosInterval);
  76     this.webTorrentService.remove(this.video.magnetUri);
  77
  78     this.sub.unsubscribe();
  79   }
  80
  81   ngOnInit() {
  82     this.sub = this.route.params.subscribe(routeParams => {
  83       let id = routeParams['id'];
  84       this.videoService.getVideo(id).subscribe(
  85         video => {
  86           this.video = video;
  87           this.loadVideo();
  88         },
  89         error => alert(error.text)
  90       );
  91     });
  92   }
  93
  94   private loadTooLong() {
  95     this.error = true;
  96     console.error('The video load seems to be abnormally long.');
  97   }
  98
  99   private runInProgress(torrent: any) {
 100     // Refresh each second
 101     this.torrentInfosInterval = setInterval(() => {
 102       this.ngZone.run(() => {
 103         this.downloadSpeed = torrent.downloadSpeed;
 104         this.numPeers = torrent.numPeers;
 105         this.uploadSpeed = torrent.uploadSpeed;
 106       });
 107     }, 1000);
 108   }
 109 }