aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/videos/video-watch
diff options
context:
space:
mode:
authorChocobozzz <florian.bigard@gmail.com>2016-11-04 16:04:50 +0100
committerChocobozzz <florian.bigard@gmail.com>2016-11-04 16:04:50 +0100
commitd1992b93f0f4a4408f803d6320cd26a713e22d5b (patch)
treee01a8d5b6c37ebdf0f2a190a374d7b97c0508d8b /client/src/app/videos/video-watch
parent4d19d2f10b691650abe030d0dbb52dc7c8a62441 (diff)
downloadPeerTube-d1992b93f0f4a4408f803d6320cd26a713e22d5b.tar.gz
PeerTube-d1992b93f0f4a4408f803d6320cd26a713e22d5b.tar.zst
PeerTube-d1992b93f0f4a4408f803d6320cd26a713e22d5b.zip
Client: add more informations to watch video view
Diffstat (limited to 'client/src/app/videos/video-watch')
-rw-r--r--client/src/app/videos/video-watch/video-watch.component.html83
-rw-r--r--client/src/app/videos/video-watch/video-watch.component.scss53
-rw-r--r--client/src/app/videos/video-watch/video-watch.component.ts46
3 files changed, 143 insertions, 39 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 ddabdc9e9..14947da88 100644
--- a/client/src/app/videos/video-watch/video-watch.component.html
+++ b/client/src/app/videos/video-watch/video-watch.component.html
@@ -1,23 +1,74 @@
1<div *ngIf="error" class="alert alert-danger"> 1<div *ngIf="error" class="row">
2 The video load seems to be abnormally long. You could: 2 <div class="alert alert-danger">
3 <ul> 3 The video load seems to be abnormally long.
4 <li>Check your browser console to see potentials errors</li> 4 <ul>
5 <li>Your firewall or NAT could be too restrictive for WebRTC (there is no TURN server)</li> 5 <li>Maybe the server {{ video.podUrl }} is down :(</li>
6 <li> 6 <li>
7 Report an issue on 7 If not, you can report an issue on
8 <a href="https://github.com/Chocobozzz/PeerTube/issues" title="Report an issue"> 8 <a href="https://github.com/Chocobozzz/PeerTube/issues" title="Report an issue">
9 https://github.com/Chocobozzz/PeerTube/issues 9 https://github.com/Chocobozzz/PeerTube/issues
10 </a> 10 </a>
11 </li> 11 </li>
12 </ul> 12 </ul>
13 </div>
13</div> 14</div>
14 15
15<div class="embed-responsive embed-responsive-19by9"> 16<div class="row">
16 <my-loader [loading]="loading"></my-loader> 17 <div class="col-md-12">
18 <div class="embed-responsive embed-responsive-19by9">
19 <my-loader [loading]="loading"></my-loader>
20 </div>
21 </div>
17</div> 22</div>
18 23
19<div id="torrent-info"> 24<div id="torrent-info" class="row">
20 <div id="torrent-info-download" class="col-md-4 col-sm-4 col-xs-4">Download: {{ downloadSpeed | bytes }}/s</div> 25 <div id="torrent-info-download" class="col-md-4 col-sm-4 col-xs-4">Download: {{ downloadSpeed | bytes }}/s</div>
21 <div id="torrent-info-upload" class="col-md-4 col-sm-4 col-xs-4">Upload: {{ uploadSpeed | bytes }}/s</div> 26 <div id="torrent-info-upload" class="col-md-4 col-sm-4 col-xs-4">Upload: {{ uploadSpeed | bytes }}/s</div>
22 <div id="torrent-info-peers" class="col-md-4 col-sm-4 col-xs-4">Number of peers: {{ numPeers }}</div> 27 <div id="torrent-info-peers" class="col-md-4 col-sm-4 col-xs-4">Number of peers: {{ numPeers }}</div>
23<div> 28</div>
29
30<div *ngIf="video !== null" id="video-info">
31 <div class="row" id="video-name-actions">
32 <div class="col-md-8">
33 <div class="row">
34 <div id="video-name" class="col-md-12">
35 {{ video.name }}
36 </div>
37 </div>
38
39 <div class="row">
40 <div class="col-md-12" id="video-by-date">
41 <span id="video-by">
42 from
43 <a [routerLink]="['/videos/list', { field: 'author', search: video.author }]" class="video-miniature-author">
44 {{ video.by }}
45 </a>
46 </span>
47 <span id="video-date">on {{ video.createdDate | date:'short' }}</span>
48 </div>
49 </div>
50 </div>
51
52 <div id="video-actions" class="col-md-4 text-right">
53 <button title="Get magnet URI" id="magnet-uri" class="btn btn-default">
54 <span class="glyphicon glyphicon-magnet"></span> Magnet
55 </button>
56 </div>
57 </div>
58
59 <div id="video-tags" class="row">
60 <div class="col-md-12">
61 <a *ngFor="let tag of video.tags" [routerLink]="['/videos/list', { field: 'tags', search: tag }]" class="label label-primary">
62 {{ tag }}
63 </a>
64 </div>
65 </div>
66
67 <div id="video-description" class="row">
68 <div class="col-md-12">
69 <div id="description-label">Description</div>
70 {{ video.description }}
71 </div>
72 </div>
73</div>
74
diff --git a/client/src/app/videos/video-watch/video-watch.component.scss b/client/src/app/videos/video-watch/video-watch.component.scss
index 96420582a..e1d9300cd 100644
--- a/client/src/app/videos/video-watch/video-watch.component.scss
+++ b/client/src/app/videos/video-watch/video-watch.component.scss
@@ -24,3 +24,56 @@ my-loader {
24 height: 300px; 24 height: 300px;
25 } 25 }
26} 26}
27
28#video-info {
29 border-top: 1px solid rgba(0, 0, 0, 0.1);
30 margin-top: 10px;
31 padding-top: 5px;
32
33 #video-name-actions {
34
35 #video-name {
36 font-size: 20px;
37 }
38
39 .btn .glyphicon {
40 position: relative;
41 top: 2px;
42 }
43
44 #magnet-uri {
45 font-weight: bold;
46 opacity: 0.85;
47 }
48 }
49
50 #video-by-date {
51 font-size: 13px;
52 opacity: 0.6;
53
54 a {
55 color: black;
56 }
57
58 #video-date:before {
59 content: '\002022';
60 margin: 0 5px;
61 }
62 }
63
64 #video-tags {
65 margin-top: 10px;
66
67 a {
68 margin-right: 5px;
69 }
70 }
71
72 #video-description {
73 margin-top: 15px;
74
75 #description-label {
76 font-weight: bold;
77 }
78 }
79}
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 239e24c99..9a36c17e2 100644
--- a/client/src/app/videos/video-watch/video-watch.component.ts
+++ b/client/src/app/videos/video-watch/video-watch.component.ts
@@ -18,7 +18,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
18 loading: boolean = false; 18 loading: boolean = false;
19 numPeers: number; 19 numPeers: number;
20 uploadSpeed: number; 20 uploadSpeed: number;
21 video: Video; 21 video: Video = null;
22 22
23 private errorTimer: NodeJS.Timer; 23 private errorTimer: NodeJS.Timer;
24 private sub: any; 24 private sub: any;
@@ -32,6 +32,28 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
32 private webTorrentService: WebTorrentService 32 private webTorrentService: WebTorrentService
33 ) {} 33 ) {}
34 34
35 ngOnInit() {
36 this.sub = this.route.params.subscribe(routeParams => {
37 let id = routeParams['id'];
38 this.videoService.getVideo(id).subscribe(
39 video => {
40 this.video = video;
41 this.loadVideo();
42 },
43 error => alert(error.text)
44 );
45 });
46 }
47
48 ngOnDestroy() {
49 console.log('Removing video from webtorrent.');
50 clearInterval(this.torrentInfosInterval);
51 clearTimeout(this.errorTimer);
52 this.webTorrentService.remove(this.video.magnetUri);
53
54 this.sub.unsubscribe();
55 }
56
35 loadVideo() { 57 loadVideo() {
36 // Reset the error 58 // Reset the error
37 this.error = false; 59 this.error = false;
@@ -65,28 +87,6 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
65 }); 87 });
66 } 88 }
67 89
68 ngOnDestroy() {
69 console.log('Removing video from webtorrent.');
70 clearInterval(this.torrentInfosInterval);
71 clearTimeout(this.errorTimer);
72 this.webTorrentService.remove(this.video.magnetUri);
73
74 this.sub.unsubscribe();
75 }
76
77 ngOnInit() {
78 this.sub = this.route.params.subscribe(routeParams => {
79 let id = routeParams['id'];
80 this.videoService.getVideo(id).subscribe(
81 video => {
82 this.video = video;
83 this.loadVideo();
84 },
85 error => alert(error.text)
86 );
87 });
88 }
89
90 private loadTooLong() { 90 private loadTooLong() {
91 this.error = true; 91 this.error = true;
92 console.error('The video load seems to be abnormally long.'); 92 console.error('The video load seems to be abnormally long.');