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