aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/videos/video-watch
diff options
context:
space:
mode:
authorChocobozzz <florian.bigard@gmail.com>2016-06-05 12:20:25 +0200
committerChocobozzz <florian.bigard@gmail.com>2016-06-05 12:20:53 +0200
commit3ad109e44916e82709ac0016f1f9c31c860299c9 (patch)
treebec707edbc5379fa1f6c08c05ce319fae32e7586 /client/src/app/videos/video-watch
parent1d1b7891b4cdc0c8a3ed4ec125a1ab673e6496b1 (diff)
downloadPeerTube-3ad109e44916e82709ac0016f1f9c31c860299c9.tar.gz
PeerTube-3ad109e44916e82709ac0016f1f9c31c860299c9.tar.zst
PeerTube-3ad109e44916e82709ac0016f1f9c31c860299c9.zip
Add an alert if the video load seems to be too long
Diffstat (limited to 'client/src/app/videos/video-watch')
-rw-r--r--client/src/app/videos/video-watch/video-watch.component.html14
-rw-r--r--client/src/app/videos/video-watch/video-watch.component.ts38
2 files changed, 46 insertions, 6 deletions
diff --git a/client/src/app/videos/video-watch/video-watch.component.html b/client/src/app/videos/video-watch/video-watch.component.html
index 353cb2241..047990362 100644
--- a/client/src/app/videos/video-watch/video-watch.component.html
+++ b/client/src/app/videos/video-watch/video-watch.component.html
@@ -1,3 +1,17 @@
1<div *ngIf="error" class="alert alert-danger">
2 The video load seems to be abnormally long. You could:
3 <ul>
4 <li>Check your browser console to see potentials errors</li>
5 <li>Your firewall or NAT could be too restrictive for WebRTC (there is no TURN server)</li>
6 <li>
7 Report an issue on
8 <a href="https://github.com/Chocobozzz/PeerTube/issues" title="Report an issue">
9 https://github.com/Chocobozzz/PeerTube/issues
10 </a>
11 </li>
12 </ul>
13</div>
14
1<div class="embed-responsive embed-responsive-19by9"> 15<div class="embed-responsive embed-responsive-19by9">
2 <my-loader [loading]="loading"></my-loader> 16 <my-loader [loading]="loading"></my-loader>
3</div> 17</div>
diff --git a/client/src/app/videos/video-watch/video-watch.component.ts b/client/src/app/videos/video-watch/video-watch.component.ts
index db82283b4..05e844f60 100644
--- a/client/src/app/videos/video-watch/video-watch.component.ts
+++ b/client/src/app/videos/video-watch/video-watch.component.ts
@@ -16,13 +16,17 @@ import { WebTorrentService } from './webtorrent.service';
16}) 16})
17 17
18export class VideoWatchComponent implements OnInit, CanDeactivate { 18export class VideoWatchComponent implements OnInit, CanDeactivate {
19 private static LOADTIME_TOO_LONG: number = 30000;
20
19 downloadSpeed: number; 21 downloadSpeed: number;
22 error: boolean = false;
20 loading: boolean = false; 23 loading: boolean = false;
21 numPeers: number; 24 numPeers: number;
22 uploadSpeed: number; 25 uploadSpeed: number;
23 video: Video; 26 video: Video;
24 27
25 private interval: NodeJS.Timer; 28 private errorTimer: NodeJS.Timer;
29 private torrentInfosInterval: NodeJS.Timer;
26 30
27 constructor( 31 constructor(
28 private elementRef: ElementRef, 32 private elementRef: ElementRef,
@@ -31,13 +35,27 @@ export class VideoWatchComponent implements OnInit, CanDeactivate {
31 private webTorrentService: WebTorrentService 35 private webTorrentService: WebTorrentService
32 ) {} 36 ) {}
33 37
34 loadVideo(video: Video) { 38 loadVideo() {
39 // Reset the error
40 this.error = false;
41 // We are loading the video
35 this.loading = true; 42 this.loading = true;
36 this.video = video; 43
37 console.log('Adding ' + this.video.magnetUri + '.'); 44 console.log('Adding ' + this.video.magnetUri + '.');
38 45
46 // The callback might never return if there are network issues
47 // So we create a timer to inform the user the load is abnormally long
48 this.errorTimer = setTimeout(() => this.loadTooLong(), VideoWatchComponent.LOADTIME_TOO_LONG);
49
39 this.webTorrentService.add(this.video.magnetUri, (torrent) => { 50 this.webTorrentService.add(this.video.magnetUri, (torrent) => {
51 // Clear the error timer
52 clearTimeout(this.errorTimer);
53 // Maybe the error was fired by the timer, so reset it
54 this.error = false;
55
56 // We are not loading the video anymore
40 this.loading = false; 57 this.loading = false;
58
41 console.log('Added ' + this.video.magnetUri + '.'); 59 console.log('Added ' + this.video.magnetUri + '.');
42 torrent.files[0].appendTo(this.elementRef.nativeElement.querySelector('.embed-responsive'), (err) => { 60 torrent.files[0].appendTo(this.elementRef.nativeElement.querySelector('.embed-responsive'), (err) => {
43 if (err) { 61 if (err) {
@@ -47,7 +65,7 @@ export class VideoWatchComponent implements OnInit, CanDeactivate {
47 }); 65 });
48 66
49 // Refresh each second 67 // Refresh each second
50 this.interval = setInterval(() => { 68 this.torrentInfosInterval = setInterval(() => {
51 this.downloadSpeed = torrent.downloadSpeed; 69 this.downloadSpeed = torrent.downloadSpeed;
52 this.numPeers = torrent.numPeers; 70 this.numPeers = torrent.numPeers;
53 this.uploadSpeed = torrent.uploadSpeed; 71 this.uploadSpeed = torrent.uploadSpeed;
@@ -58,15 +76,23 @@ export class VideoWatchComponent implements OnInit, CanDeactivate {
58 ngOnInit() { 76 ngOnInit() {
59 let id = this.routeParams.get('id'); 77 let id = this.routeParams.get('id');
60 this.videoService.getVideo(id).subscribe( 78 this.videoService.getVideo(id).subscribe(
61 video => this.loadVideo(video), 79 video => {
80 this.video = video;
81 this.loadVideo();
82 },
62 error => alert(error) 83 error => alert(error)
63 ); 84 );
64 } 85 }
65 86
66 routerCanDeactivate(next: ComponentInstruction, prev: ComponentInstruction) { 87 routerCanDeactivate(next: ComponentInstruction, prev: ComponentInstruction) {
67 console.log('Removing video from webtorrent.'); 88 console.log('Removing video from webtorrent.');
68 clearInterval(this.interval); 89 clearInterval(this.torrentInfosInterval);
69 this.webTorrentService.remove(this.video.magnetUri); 90 this.webTorrentService.remove(this.video.magnetUri);
70 return true; 91 return true;
71 } 92 }
93
94 private loadTooLong() {
95 this.error = true;
96 console.error('The video load seems to be abnormally long.');
97 }
72} 98}