forks/peertube
1
0
Fork 0
Code Releases Activity

Client: add more informations to watch video view

Browse source
This commit is contained in:
Chocobozzz 2016-11-04 16:04:50 +01:00
parent 4d19d2f10b
commit d1992b93f0
5 changed files with 145 additions and 39 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
client/src/app/videos/shared/video.model.ts
View file

@ -21,6 +21,7 @@ export class Video {
port = ':' + port;
}
return author + '@' + host + port;
}

1
client/src/app/videos/shared/video.service.ts
View file

@ -22,6 +22,7 @@ export class VideoService {
getVideo(id: string): Observable<Video> {
return this.http.get(VideoService.BASE_VIDEO_URL + id)
.map(this.restExtractor.extractDataGet)
.map(video_hash => new Video(video_hash))
.catch((res) => this.restExtractor.handleError(res));
}

65
client/src/app/videos/video-watch/video-watch.component.html
View file

@ -1,23 +1,74 @@
<div *ngIf="error" class="alert alert-danger">
The video load seems to be abnormally long. You could:
<div *ngIf="error" class="row">
<div class="alert alert-danger">
The video load seems to be abnormally long.
<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>Maybe the server {{ video.podUrl }} is down :(</li>
<li>
Report an issue on
If not, you can 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>
<div class="row">
<div class="col-md-12">
<div class="embed-responsive embed-responsive-19by9">
<my-loader [loading]="loading"></my-loader>
</div>
</div>
</div>
<div id="torrent-info">
<div id="torrent-info" class="row">
<div id="torrent-info-download" class="col-md-4 col-sm-4 col-xs-4">Download: {{ downloadSpeed | bytes }}/s</div>
<div id="torrent-info-upload" class="col-md-4 col-sm-4 col-xs-4">Upload: {{ uploadSpeed | bytes }}/s</div>
<div id="torrent-info-peers" class="col-md-4 col-sm-4 col-xs-4">Number of peers: {{ numPeers }}</div>
<div>
</div>
<div *ngIf="video !== null" id="video-info">
<div class="row" id="video-name-actions">
<div class="col-md-8">
<div class="row">
<div id="video-name" class="col-md-12">
{{ video.name }}
</div>
</div>
<div class="row">
<div class="col-md-12" id="video-by-date">
<span id="video-by">
from
<a [routerLink]="['/videos/list', { field: 'author', search: video.author }]" class="video-miniature-author">
{{ video.by }}
</a>
</span>
<span id="video-date">on {{ video.createdDate | date:'short' }}</span>
</div>
</div>
</div>
<div id="video-actions" class="col-md-4 text-right">
<button title="Get magnet URI" id="magnet-uri" class="btn btn-default">
<span class="glyphicon glyphicon-magnet"></span> Magnet
</button>
</div>
</div>
<div id="video-tags" class="row">
<div class="col-md-12">
<a *ngFor="let tag of video.tags" [routerLink]="['/videos/list', { field: 'tags', search: tag }]" class="label label-primary">
{{ tag }}
</a>
</div>
</div>
<div id="video-description" class="row">
<div class="col-md-12">
<div id="description-label">Description</div>
{{ video.description }}
</div>
</div>
</div>

53
client/src/app/videos/video-watch/video-watch.component.scss
View file

@ -24,3 +24,56 @@ my-loader {
height: 300px;
}
}
#video-info {
border-top: 1px solid rgba(0, 0, 0, 0.1);
margin-top: 10px;
padding-top: 5px;
#video-name-actions {
#video-name {
font-size: 20px;
}
.btn .glyphicon {
position: relative;
top: 2px;
}
#magnet-uri {
font-weight: bold;
opacity: 0.85;
}
}
#video-by-date {
font-size: 13px;
opacity: 0.6;
a {
color: black;
}
#video-date:before {
content: '\002022';
margin: 0 5px;
}
}
#video-tags {
margin-top: 10px;
a {
margin-right: 5px;
}
}
#video-description {
margin-top: 15px;
#description-label {
font-weight: bold;
}
}
}

46
client/src/app/videos/video-watch/video-watch.component.ts
View file

@ -18,7 +18,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
loading: boolean = false;
numPeers: number;
uploadSpeed: number;
video: Video;
video: Video = null;
private errorTimer: NodeJS.Timer;
private sub: any;
@ -32,6 +32,28 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
private webTorrentService: WebTorrentService
) {}
ngOnInit() {
this.sub = this.route.params.subscribe(routeParams => {
let id = routeParams['id'];
this.videoService.getVideo(id).subscribe(
video => {
this.video = video;
this.loadVideo();
},
error => alert(error.text)
);
});
}
ngOnDestroy() {
console.log('Removing video from webtorrent.');
clearInterval(this.torrentInfosInterval);
clearTimeout(this.errorTimer);
this.webTorrentService.remove(this.video.magnetUri);
this.sub.unsubscribe();
}
loadVideo() {
// Reset the error
this.error = false;
@ -65,28 +87,6 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
});
}
ngOnDestroy() {
console.log('Removing video from webtorrent.');
clearInterval(this.torrentInfosInterval);
clearTimeout(this.errorTimer);
this.webTorrentService.remove(this.video.magnetUri);
this.sub.unsubscribe();
}
ngOnInit() {
this.sub = this.route.params.subscribe(routeParams => {
let id = routeParams['id'];
this.videoService.getVideo(id).subscribe(
video => {
this.video = video;
this.loadVideo();
},
error => alert(error.text)
);
});
}
private loadTooLong() {
this.error = true;
console.error('The video load seems to be abnormally long.');