1 import { Component, ElementRef, NgZone, OnDestroy, OnInit, ViewChild } from '@angular/core';
2 import { ActivatedRoute } from '@angular/router';
3 import { Subscription } from 'rxjs/Subscription';
5 import * as videojs from 'video.js';
6 import { MetaService } from 'ng2-meta';
7 import { NotificationsService } from 'angular2-notifications';
9 import { AuthService } from '../../core';
10 import { VideoMagnetComponent } from './video-magnet.component';
11 import { VideoShareComponent } from './video-share.component';
12 import { VideoReportComponent } from './video-report.component';
13 import { Video, VideoService } from '../shared';
14 import { WebTorrentService } from './webtorrent.service';
17 selector: 'my-video-watch',
18 templateUrl: './video-watch.component.html',
19 styleUrls: [ './video-watch.component.scss' ]
22 export class VideoWatchComponent implements OnInit, OnDestroy {
23 private static LOADTIME_TOO_LONG: number = 20000;
25 @ViewChild('videoMagnetModal') videoMagnetModal: VideoMagnetComponent;
26 @ViewChild('videoShareModal') videoShareModal: VideoShareComponent;
27 @ViewChild('videoReportModal') videoReportModal: VideoReportComponent;
29 downloadSpeed: number;
30 error: boolean = false;
31 loading: boolean = false;
33 player: VideoJSPlayer;
34 playerElement: Element;
37 videoNotFound = false;
39 private errorTimer: number;
40 private paramsSub: Subscription;
41 private errorsSub: Subscription;
42 private warningsSub: Subscription;
43 private torrentInfosInterval: number;
46 private elementRef: ElementRef,
47 private ngZone: NgZone,
48 private route: ActivatedRoute,
49 private videoService: VideoService,
50 private metaService: MetaService,
51 private webTorrentService: WebTorrentService,
52 private authService: AuthService,
53 private notificationsService: NotificationsService
57 this.paramsSub = this.route.params.subscribe(routeParams => {
58 let id = routeParams['id'];
59 this.videoService.getVideo(id).subscribe(
62 this.setOpenGraphTags();
66 this.videoNotFound = true;
71 this.playerElement = this.elementRef.nativeElement.querySelector('#video-container');
73 const videojsOptions = {
79 videojs(this.playerElement, videojsOptions, function () {
83 this.errorsSub = this.webTorrentService.errors.subscribe(err => this.notificationsService.error('Error', err.message));
84 this.warningsSub = this.webTorrentService.errors.subscribe(err => this.notificationsService.alert('Warning', err.message));
88 // Remove WebTorrent stuff
89 console.log('Removing video from webtorrent.');
90 window.clearInterval(this.torrentInfosInterval);
91 window.clearTimeout(this.errorTimer);
93 if (this.video !== null) {
94 this.webTorrentService.remove(this.video.magnetUri);
98 videojs(this.playerElement).dispose();
100 // Unsubscribe subscriptions
101 this.paramsSub.unsubscribe();
102 this.errorsSub.unsubscribe();
103 this.warningsSub.unsubscribe();
109 // We are loading the video
112 console.log('Adding ' + this.video.magnetUri + '.');
114 // The callback might never return if there are network issues
115 // So we create a timer to inform the user the load is abnormally long
116 this.errorTimer = window.setTimeout(() => this.loadTooLong(), VideoWatchComponent.LOADTIME_TOO_LONG);
118 this.webTorrentService.add(this.video.magnetUri, (torrent) => {
119 // Clear the error timer
120 window.clearTimeout(this.errorTimer);
121 // Maybe the error was fired by the timer, so reset it
124 // We are not loading the video anymore
125 this.loading = false;
127 console.log('Added ' + this.video.magnetUri + '.');
128 torrent.files[0].renderTo(this.playerElement, { autoplay: true }, (err) => {
130 this.notificationsService.error('Error', 'Cannot append the file in the video element.');
135 this.runInProgress(torrent);
139 showReportModal(event: Event) {
140 event.preventDefault();
141 this.videoReportModal.show();
145 this.videoShareModal.show();
148 showMagnetUriModal() {
149 this.videoMagnetModal.show();
153 return this.authService.isLoggedIn();
156 private loadTooLong() {
158 console.error('The video load seems to be abnormally long.');
161 private setOpenGraphTags() {
162 this.metaService.setTag('og:type', 'video');
164 this.metaService.setTag('og:title', this.video.name);
165 this.metaService.setTag('name', this.video.name);
167 this.metaService.setTag('og:description', this.video.description);
168 this.metaService.setTag('description', this.video.description);
170 this.metaService.setTag('og:image', this.video.thumbnailPath);
172 this.metaService.setTag('og:duration', this.video.duration);
174 this.metaService.setTag('og:site_name', 'PeerTube');
176 this.metaService.setTag('og:url', window.location.href);
177 this.metaService.setTag('url', window.location.href);
180 private runInProgress(torrent: any) {
181 // Refresh each second
182 this.torrentInfosInterval = window.setInterval(() => {
183 this.ngZone.run(() => {
184 this.downloadSpeed = torrent.downloadSpeed;
185 this.numPeers = torrent.numPeers;
186 this.uploadSpeed = torrent.uploadSpeed;