]>
Commit | Line | Data |
---|---|---|
3154f382 | 1 | import { Component, ElementRef, NgZone, OnDestroy, OnInit, ViewChild } from '@angular/core'; |
0629423c | 2 | import { ActivatedRoute } from '@angular/router'; |
8140a704 | 3 | |
e31f6ad6 | 4 | import * as videojs from 'video.js'; |
7ddd02c9 C |
5 | import { MetaService } from 'ng2-meta'; |
6 | import { NotificationsService } from 'angular2-notifications'; | |
3154f382 | 7 | |
4f8c0eb0 | 8 | import { AuthService } from '../../core'; |
cf02fbfb C |
9 | import { VideoMagnetComponent } from './video-magnet.component'; |
10 | import { VideoShareComponent } from './video-share.component'; | |
4f8c0eb0 | 11 | import { VideoReportComponent } from './video-report.component'; |
ab32b0fc | 12 | import { Video, VideoService } from '../shared'; |
d3ef341a | 13 | import { WebTorrentService } from './webtorrent.service'; |
dc8bc31b | 14 | |
dc8bc31b C |
15 | @Component({ |
16 | selector: 'my-video-watch', | |
ec8d8440 C |
17 | templateUrl: './video-watch.component.html', |
18 | styleUrls: [ './video-watch.component.scss' ] | |
dc8bc31b C |
19 | }) |
20 | ||
0629423c | 21 | export class VideoWatchComponent implements OnInit, OnDestroy { |
0d4fb7e6 | 22 | private static LOADTIME_TOO_LONG: number = 20000; |
3ad109e4 | 23 | |
cf02fbfb C |
24 | @ViewChild('videoMagnetModal') videoMagnetModal: VideoMagnetComponent; |
25 | @ViewChild('videoShareModal') videoShareModal: VideoShareComponent; | |
4f8c0eb0 | 26 | @ViewChild('videoReportModal') videoReportModal: VideoReportComponent; |
3154f382 | 27 | |
8cfecb2a | 28 | downloadSpeed: number; |
3ad109e4 | 29 | error: boolean = false; |
da932efc | 30 | loading: boolean = false; |
4fd8aa32 | 31 | numPeers: number; |
e31f6ad6 | 32 | player: VideoJSPlayer; |
067e3f84 | 33 | playerElement: Element; |
4fd8aa32 | 34 | uploadSpeed: number; |
d1992b93 | 35 | video: Video = null; |
9c89a45c | 36 | videoNotFound = false; |
dc8bc31b | 37 | |
0d4fb7e6 | 38 | private errorTimer: number; |
0629423c | 39 | private sub: any; |
0d4fb7e6 | 40 | private torrentInfosInterval: number; |
dc8bc31b C |
41 | |
42 | constructor( | |
4fd8aa32 | 43 | private elementRef: ElementRef, |
c323efb9 | 44 | private ngZone: NgZone, |
0629423c | 45 | private route: ActivatedRoute, |
d3ef341a | 46 | private videoService: VideoService, |
3ec343a4 | 47 | private metaService: MetaService, |
4f8c0eb0 | 48 | private webTorrentService: WebTorrentService, |
7ddd02c9 C |
49 | private authService: AuthService, |
50 | private notificationsService: NotificationsService | |
d3ef341a | 51 | ) {} |
dc8bc31b | 52 | |
d1992b93 C |
53 | ngOnInit() { |
54 | this.sub = this.route.params.subscribe(routeParams => { | |
55 | let id = routeParams['id']; | |
56 | this.videoService.getVideo(id).subscribe( | |
57 | video => { | |
58 | this.video = video; | |
3ec343a4 | 59 | this.setOpenGraphTags(); |
d1992b93 C |
60 | this.loadVideo(); |
61 | }, | |
9c89a45c C |
62 | error => { |
63 | this.videoNotFound = true; | |
64 | } | |
d1992b93 C |
65 | ); |
66 | }); | |
e31f6ad6 | 67 | |
067e3f84 C |
68 | this.playerElement = this.elementRef.nativeElement.querySelector('#video-container'); |
69 | ||
e31f6ad6 C |
70 | const videojsOptions = { |
71 | controls: true, | |
72 | autoplay: false | |
73 | }; | |
74 | ||
75 | const self = this; | |
067e3f84 | 76 | videojs(this.playerElement, videojsOptions, function () { |
e31f6ad6 C |
77 | self.player = this; |
78 | }); | |
d1992b93 C |
79 | } |
80 | ||
81 | ngOnDestroy() { | |
067e3f84 | 82 | // Remove WebTorrent stuff |
d1992b93 | 83 | console.log('Removing video from webtorrent.'); |
0d4fb7e6 C |
84 | window.clearInterval(this.torrentInfosInterval); |
85 | window.clearTimeout(this.errorTimer); | |
9c89a45c C |
86 | |
87 | if (this.video !== null) { | |
88 | this.webTorrentService.remove(this.video.magnetUri); | |
89 | } | |
d1992b93 | 90 | |
067e3f84 C |
91 | // Remove player |
92 | videojs(this.playerElement).dispose(); | |
93 | ||
94 | // Unsubscribe route subscription | |
d1992b93 C |
95 | this.sub.unsubscribe(); |
96 | } | |
97 | ||
3ad109e4 C |
98 | loadVideo() { |
99 | // Reset the error | |
100 | this.error = false; | |
101 | // We are loading the video | |
da932efc | 102 | this.loading = true; |
3ad109e4 | 103 | |
2c4a0b5d | 104 | console.log('Adding ' + this.video.magnetUri + '.'); |
d3ef341a | 105 | |
3ad109e4 C |
106 | // The callback might never return if there are network issues |
107 | // So we create a timer to inform the user the load is abnormally long | |
0d4fb7e6 | 108 | this.errorTimer = window.setTimeout(() => this.loadTooLong(), VideoWatchComponent.LOADTIME_TOO_LONG); |
3ad109e4 | 109 | |
d3ef341a | 110 | this.webTorrentService.add(this.video.magnetUri, (torrent) => { |
3ad109e4 | 111 | // Clear the error timer |
0d4fb7e6 | 112 | window.clearTimeout(this.errorTimer); |
3ad109e4 C |
113 | // Maybe the error was fired by the timer, so reset it |
114 | this.error = false; | |
115 | ||
116 | // We are not loading the video anymore | |
da932efc | 117 | this.loading = false; |
3ad109e4 | 118 | |
2c4a0b5d | 119 | console.log('Added ' + this.video.magnetUri + '.'); |
067e3f84 | 120 | torrent.files[0].renderTo(this.playerElement, { autoplay: true }, (err) => { |
dc8bc31b | 121 | if (err) { |
7ddd02c9 | 122 | this.notificationsService.error('Error', 'Cannot append the file in the video element.'); |
dc8bc31b C |
123 | console.error(err); |
124 | } | |
44124980 | 125 | }); |
8cfecb2a | 126 | |
c323efb9 | 127 | this.runInProgress(torrent); |
44124980 | 128 | }); |
dc8bc31b | 129 | } |
98b01bac | 130 | |
4f8c0eb0 C |
131 | showReportModal(event: Event) { |
132 | event.preventDefault(); | |
133 | this.videoReportModal.show(); | |
134 | } | |
135 | ||
99cc4f49 | 136 | showShareModal() { |
cf02fbfb | 137 | this.videoShareModal.show(); |
99cc4f49 C |
138 | } |
139 | ||
cf02fbfb C |
140 | showMagnetUriModal() { |
141 | this.videoMagnetModal.show(); | |
99cc4f49 C |
142 | } |
143 | ||
4f8c0eb0 C |
144 | isUserLoggedIn() { |
145 | return this.authService.isLoggedIn(); | |
146 | } | |
147 | ||
3ad109e4 C |
148 | private loadTooLong() { |
149 | this.error = true; | |
150 | console.error('The video load seems to be abnormally long.'); | |
151 | } | |
c323efb9 | 152 | |
3ec343a4 C |
153 | private setOpenGraphTags() { |
154 | this.metaService.setTag('og:type', 'video'); | |
155 | ||
156 | this.metaService.setTag('og:title', this.video.name); | |
157 | this.metaService.setTag('name', this.video.name); | |
158 | ||
159 | this.metaService.setTag('og:description', this.video.description); | |
160 | this.metaService.setTag('description', this.video.description); | |
161 | ||
162 | this.metaService.setTag('og:image', this.video.thumbnailPath); | |
163 | ||
164 | this.metaService.setTag('og:duration', this.video.duration); | |
165 | ||
166 | this.metaService.setTag('og:site_name', 'PeerTube'); | |
167 | ||
168 | this.metaService.setTag('og:url', window.location.href); | |
169 | this.metaService.setTag('url', window.location.href); | |
170 | } | |
171 | ||
c323efb9 C |
172 | private runInProgress(torrent: any) { |
173 | // Refresh each second | |
0d4fb7e6 | 174 | this.torrentInfosInterval = window.setInterval(() => { |
c323efb9 C |
175 | this.ngZone.run(() => { |
176 | this.downloadSpeed = torrent.downloadSpeed; | |
177 | this.numPeers = torrent.numPeers; | |
178 | this.uploadSpeed = torrent.uploadSpeed; | |
179 | }); | |
180 | }, 1000); | |
181 | } | |
dc8bc31b | 182 | } |