1 import { Component, ElementRef, NgZone, OnDestroy, OnInit, ViewChild } from '@angular/core';
2 import { ActivatedRoute } from '@angular/router';
4 import { MetaService } from 'ng2-meta';
5 import * as videojs from 'video.js';
7 import { VideoMagnetComponent } from './video-magnet.component';
8 import { VideoShareComponent } from './video-share.component';
9 import { Video, VideoService } from '../shared';
10 import { WebTorrentService } from './webtorrent.service';
13 selector: 'my-video-watch',
14 templateUrl: './video-watch.component.html',
15 styleUrls: [ './video-watch.component.scss' ]
18 export class VideoWatchComponent implements OnInit, OnDestroy {
19 private static LOADTIME_TOO_LONG: number = 30000;
21 @ViewChild('videoMagnetModal') videoMagnetModal: VideoMagnetComponent;
22 @ViewChild('videoShareModal') videoShareModal: VideoShareComponent;
24 downloadSpeed: number;
25 error: boolean = false;
26 loading: boolean = false;
28 player: VideoJSPlayer;
29 playerElement: Element;
32 videoNotFound = false;
34 private errorTimer: NodeJS.Timer;
36 private torrentInfosInterval: NodeJS.Timer;
39 private elementRef: ElementRef,
40 private ngZone: NgZone,
41 private route: ActivatedRoute,
42 private videoService: VideoService,
43 private metaService: MetaService,
44 private webTorrentService: WebTorrentService
48 this.sub = this.route.params.subscribe(routeParams => {
49 let id = routeParams['id'];
50 this.videoService.getVideo(id).subscribe(
53 this.setOpenGraphTags();
57 this.videoNotFound = true;
62 this.playerElement = this.elementRef.nativeElement.querySelector('#video-container');
64 const videojsOptions = {
70 videojs(this.playerElement, videojsOptions, function () {
76 // Remove WebTorrent stuff
77 console.log('Removing video from webtorrent.');
78 clearInterval(this.torrentInfosInterval);
79 clearTimeout(this.errorTimer);
81 if (this.video !== null) {
82 this.webTorrentService.remove(this.video.magnetUri);
86 videojs(this.playerElement).dispose();
88 // Unsubscribe route subscription
89 this.sub.unsubscribe();
95 // We are loading the video
98 console.log('Adding ' + this.video.magnetUri + '.');
100 // The callback might never return if there are network issues
101 // So we create a timer to inform the user the load is abnormally long
102 this.errorTimer = setTimeout(() => this.loadTooLong(), VideoWatchComponent.LOADTIME_TOO_LONG);
104 this.webTorrentService.add(this.video.magnetUri, (torrent) => {
105 // Clear the error timer
106 clearTimeout(this.errorTimer);
107 // Maybe the error was fired by the timer, so reset it
110 // We are not loading the video anymore
111 this.loading = false;
113 console.log('Added ' + this.video.magnetUri + '.');
114 torrent.files[0].renderTo(this.playerElement, { autoplay: true }, (err) => {
116 alert('Cannot append the file.');
121 this.runInProgress(torrent);
126 this.videoShareModal.show();
129 showMagnetUriModal() {
130 this.videoMagnetModal.show();
133 private loadTooLong() {
135 console.error('The video load seems to be abnormally long.');
138 private setOpenGraphTags() {
139 this.metaService.setTag('og:type', 'video');
141 this.metaService.setTag('og:title', this.video.name);
142 this.metaService.setTag('name', this.video.name);
144 this.metaService.setTag('og:description', this.video.description);
145 this.metaService.setTag('description', this.video.description);
147 this.metaService.setTag('og:image', this.video.thumbnailPath);
149 this.metaService.setTag('og:duration', this.video.duration);
151 this.metaService.setTag('og:site_name', 'PeerTube');
153 this.metaService.setTag('og:url', window.location.href);
154 this.metaService.setTag('url', window.location.href);
157 private runInProgress(torrent: any) {
158 // Refresh each second
159 this.torrentInfosInterval = setInterval(() => {
160 this.ngZone.run(() => {
161 this.downloadSpeed = torrent.downloadSpeed;
162 this.numPeers = torrent.numPeers;
163 this.uploadSpeed = torrent.uploadSpeed;