1 import { setInterval, setTimeout } from 'timers'
2 import { Component, ElementRef, NgZone, OnDestroy, OnInit, ViewChild } from '@angular/core';
3 import { ActivatedRoute } from '@angular/router';
5 import { MetaService } from 'ng2-meta';
6 import * as videojs from 'video.js';
8 import { AuthService } from '../../core';
9 import { VideoMagnetComponent } from './video-magnet.component';
10 import { VideoShareComponent } from './video-share.component';
11 import { VideoReportComponent } from './video-report.component';
12 import { Video, VideoService } from '../shared';
13 import { WebTorrentService } from './webtorrent.service';
16 selector: 'my-video-watch',
17 templateUrl: './video-watch.component.html',
18 styleUrls: [ './video-watch.component.scss' ]
21 export class VideoWatchComponent implements OnInit, OnDestroy {
22 private static LOADTIME_TOO_LONG: number = 30000;
24 @ViewChild('videoMagnetModal') videoMagnetModal: VideoMagnetComponent;
25 @ViewChild('videoShareModal') videoShareModal: VideoShareComponent;
26 @ViewChild('videoReportModal') videoReportModal: VideoReportComponent;
28 downloadSpeed: number;
29 error: boolean = false;
30 loading: boolean = false;
32 player: VideoJSPlayer;
33 playerElement: Element;
36 videoNotFound = false;
38 private errorTimer: NodeJS.Timer;
40 private torrentInfosInterval: NodeJS.Timer;
43 private elementRef: ElementRef,
44 private ngZone: NgZone,
45 private route: ActivatedRoute,
46 private videoService: VideoService,
47 private metaService: MetaService,
48 private webTorrentService: WebTorrentService,
49 private authService: AuthService
53 this.sub = this.route.params.subscribe(routeParams => {
54 let id = routeParams['id'];
55 this.videoService.getVideo(id).subscribe(
58 this.setOpenGraphTags();
62 this.videoNotFound = true;
67 this.playerElement = this.elementRef.nativeElement.querySelector('#video-container');
69 const videojsOptions = {
75 videojs(this.playerElement, videojsOptions, function () {
81 // Remove WebTorrent stuff
82 console.log('Removing video from webtorrent.');
83 clearInterval(this.torrentInfosInterval);
84 clearTimeout(this.errorTimer);
86 if (this.video !== null) {
87 this.webTorrentService.remove(this.video.magnetUri);
91 videojs(this.playerElement).dispose();
93 // Unsubscribe route subscription
94 this.sub.unsubscribe();
100 // We are loading the video
103 console.log('Adding ' + this.video.magnetUri + '.');
105 // The callback might never return if there are network issues
106 // So we create a timer to inform the user the load is abnormally long
107 this.errorTimer = setTimeout(() => this.loadTooLong(), VideoWatchComponent.LOADTIME_TOO_LONG);
109 this.webTorrentService.add(this.video.magnetUri, (torrent) => {
110 // Clear the error timer
111 clearTimeout(this.errorTimer);
112 // Maybe the error was fired by the timer, so reset it
115 // We are not loading the video anymore
116 this.loading = false;
118 console.log('Added ' + this.video.magnetUri + '.');
119 torrent.files[0].renderTo(this.playerElement, { autoplay: true }, (err) => {
121 alert('Cannot append the file.');
126 this.runInProgress(torrent);
130 showReportModal(event: Event) {
131 event.preventDefault();
132 this.videoReportModal.show();
136 this.videoShareModal.show();
139 showMagnetUriModal() {
140 this.videoMagnetModal.show();
144 return this.authService.isLoggedIn();
147 private loadTooLong() {
149 console.error('The video load seems to be abnormally long.');
152 private setOpenGraphTags() {
153 this.metaService.setTag('og:type', 'video');
155 this.metaService.setTag('og:title', this.video.name);
156 this.metaService.setTag('name', this.video.name);
158 this.metaService.setTag('og:description', this.video.description);
159 this.metaService.setTag('description', this.video.description);
161 this.metaService.setTag('og:image', this.video.thumbnailPath);
163 this.metaService.setTag('og:duration', this.video.duration);
165 this.metaService.setTag('og:site_name', 'PeerTube');
167 this.metaService.setTag('og:url', window.location.href);
168 this.metaService.setTag('url', window.location.href);
171 private runInProgress(torrent: any) {
172 // Refresh each second
173 this.torrentInfosInterval = setInterval(() => {
174 this.ngZone.run(() => {
175 this.downloadSpeed = torrent.downloadSpeed;
176 this.numPeers = torrent.numPeers;
177 this.uploadSpeed = torrent.uploadSpeed;