forks
/
peertube
1
0
Fork 0
Code Releases Activity

Add an alert if the video load seems to be too long

This commit is contained in:
Chocobozzz 2016-06-05 12:20:25 +02:00
parent 1d1b7891b4
commit 3ad109e449
2 changed files with 46 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
client/src/app/videos/video-watch/video-watch.component.html
View File

@ -1,3 +1,17 @@
<div *ngIf="error" class="alert alert-danger">
The video load seems to be abnormally long. You could:
<ul>
<li>Check your browser console to see potentials errors</li>
<li>Your firewall or NAT could be too restrictive for WebRTC (there is no TURN server)</li>
<li>
Report an issue on
<a href="https://github.com/Chocobozzz/PeerTube/issues" title="Report an issue">
https://github.com/Chocobozzz/PeerTube/issues
</a>
</li>
</ul>
</div>
<div class="embed-responsive embed-responsive-19by9">
<my-loader [loading]="loading"></my-loader>
</div>

38
client/src/app/videos/video-watch/video-watch.component.ts
View File

@ -16,13 +16,17 @@ import { WebTorrentService } from './webtorrent.service';
})
export class VideoWatchComponent implements OnInit, CanDeactivate {
private static LOADTIME_TOO_LONG: number = 30000;
downloadSpeed: number;
error: boolean = false;
loading: boolean = false;
numPeers: number;
uploadSpeed: number;
video: Video;
private interval: NodeJS.Timer;
private errorTimer: NodeJS.Timer;
private torrentInfosInterval: NodeJS.Timer;
constructor(
private elementRef: ElementRef,
@ -31,13 +35,27 @@ export class VideoWatchComponent implements OnInit, CanDeactivate {
private webTorrentService: WebTorrentService
) {}
loadVideo(video: Video) {
loadVideo() {
// Reset the error
this.error = false;
// We are loading the video
this.loading = true;
this.video = video;
console.log('Adding ' + this.video.magnetUri + '.');
// The callback might never return if there are network issues
// So we create a timer to inform the user the load is abnormally long
this.errorTimer = setTimeout(() => this.loadTooLong(), VideoWatchComponent.LOADTIME_TOO_LONG);
this.webTorrentService.add(this.video.magnetUri, (torrent) => {
// Clear the error timer
clearTimeout(this.errorTimer);
// Maybe the error was fired by the timer, so reset it
this.error = false;
// We are not loading the video anymore
this.loading = false;
console.log('Added ' + this.video.magnetUri + '.');
torrent.files[0].appendTo(this.elementRef.nativeElement.querySelector('.embed-responsive'), (err) => {
if (err) {
@ -47,7 +65,7 @@ export class VideoWatchComponent implements OnInit, CanDeactivate {
});
// Refresh each second
this.interval = setInterval(() => {
this.torrentInfosInterval = setInterval(() => {
this.downloadSpeed = torrent.downloadSpeed;
this.numPeers = torrent.numPeers;
this.uploadSpeed = torrent.uploadSpeed;
@ -58,15 +76,23 @@ export class VideoWatchComponent implements OnInit, CanDeactivate {
ngOnInit() {
let id = this.routeParams.get('id');
this.videoService.getVideo(id).subscribe(
video => this.loadVideo(video),
video => {
this.video = video;
this.loadVideo();
},
error => alert(error)
);
}
routerCanDeactivate(next: ComponentInstruction, prev: ComponentInstruction) {
console.log('Removing video from webtorrent.');
clearInterval(this.interval);
clearInterval(this.torrentInfosInterval);
this.webTorrentService.remove(this.video.magnetUri);
return true;
}
private loadTooLong() {
this.error = true;
console.error('The video load seems to be abnormally long.');
}
}