diff options
Diffstat (limited to 'client/src/app/videos')
3 files changed, 11 insertions, 29 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 f528d73c3..aa1f2f77e 100644 --- a/client/src/app/videos/+video-watch/video-watch.component.html +++ b/client/src/app/videos/+video-watch/video-watch.component.html | |||
@@ -15,20 +15,13 @@ | |||
15 | 15 | ||
16 | <div class="row"> | 16 | <div class="row"> |
17 | <!-- We need the video container for videojs so we just hide it --> | 17 | <!-- We need the video container for videojs so we just hide it --> |
18 | <div [hidden]="videoNotFound" class="embed-responsive embed-responsive-19by9"> | 18 | <div [hidden]="videoNotFound" id="video-container"> |
19 | <video id="video-container" class="video-js vjs-sublime-skin"></video> | 19 | <video id="video-element" class="video-js vjs-peertube-skin"></video> |
20 | </div> | 20 | </div> |
21 | 21 | ||
22 | <div *ngIf="videoNotFound" id="video-not-found">Video not found :'(</div> | 22 | <div *ngIf="videoNotFound" id="video-not-found">Video not found :'(</div> |
23 | </div> | 23 | </div> |
24 | 24 | ||
25 | <!-- P2P information --> | ||
26 | <div id="torrent-info" class="row"> | ||
27 | <div id="torrent-info-download" class="col-md-4 col-sm-4 col-xs-4">Download: {{ downloadSpeed | bytes }}/s</div> | ||
28 | <div id="torrent-info-upload" class="col-md-4 col-sm-4 col-xs-4">Upload: {{ uploadSpeed | bytes }}/s</div> | ||
29 | <div id="torrent-info-peers" class="col-md-4 col-sm-4 col-xs-4">Number of peers: {{ numPeers }}</div> | ||
30 | </div> | ||
31 | |||
32 | <!-- Video information --> | 25 | <!-- Video information --> |
33 | <div *ngIf="video !== null" id="video-info"> | 26 | <div *ngIf="video !== null" id="video-info"> |
34 | <div class="row video-name-views"> | 27 | <div class="row video-name-views"> |
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 cad21dd18..06c2de7c6 100644 --- a/client/src/app/videos/+video-watch/video-watch.component.scss +++ b/client/src/app/videos/+video-watch/video-watch.component.scss | |||
@@ -1,6 +1,12 @@ | |||
1 | #video-container { | 1 | #video-container { |
2 | width: 100%; | 2 | background-color: #000; |
3 | height: 100%; | 3 | display: flex; |
4 | justify-content: center; | ||
5 | |||
6 | #video-element { | ||
7 | width: 888px; | ||
8 | height: 500px; | ||
9 | } | ||
4 | } | 10 | } |
5 | 11 | ||
6 | #video-not-found { | 12 | #video-not-found { |
@@ -11,14 +17,6 @@ | |||
11 | font-weight: bold; | 17 | font-weight: bold; |
12 | } | 18 | } |
13 | 19 | ||
14 | .embed-responsive { | ||
15 | height: 500px; | ||
16 | |||
17 | @media screen and (max-width: 600px) { | ||
18 | height: 300px; | ||
19 | } | ||
20 | } | ||
21 | |||
22 | #torrent-info { | 20 | #torrent-info { |
23 | font-size: 10px; | 21 | font-size: 10px; |
24 | margin-top: 10px; | 22 | margin-top: 10px; |
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 eac676be8..48842602e 100644 --- a/client/src/app/videos/+video-watch/video-watch.component.ts +++ b/client/src/app/videos/+video-watch/video-watch.component.ts | |||
@@ -26,13 +26,10 @@ export class VideoWatchComponent implements OnInit, OnDestroy { | |||
26 | @ViewChild('videoShareModal') videoShareModal: VideoShareComponent | 26 | @ViewChild('videoShareModal') videoShareModal: VideoShareComponent |
27 | @ViewChild('videoReportModal') videoReportModal: VideoReportComponent | 27 | @ViewChild('videoReportModal') videoReportModal: VideoReportComponent |
28 | 28 | ||
29 | downloadSpeed: number | ||
30 | error = false | 29 | error = false |
31 | loading = false | 30 | loading = false |
32 | numPeers: number | ||
33 | player: videojs.Player | 31 | player: videojs.Player |
34 | playerElement: HTMLMediaElement | 32 | playerElement: HTMLMediaElement |
35 | uploadSpeed: number | ||
36 | userRating: UserVideoRateType = null | 33 | userRating: UserVideoRateType = null |
37 | video: VideoDetails = null | 34 | video: VideoDetails = null |
38 | videoPlayerLoaded = false | 35 | videoPlayerLoaded = false |
@@ -283,7 +280,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy { | |||
283 | return this.router.navigate([ '/videos/list' ]) | 280 | return this.router.navigate([ '/videos/list' ]) |
284 | } | 281 | } |
285 | 282 | ||
286 | this.playerElement = this.elementRef.nativeElement.querySelector('#video-container') | 283 | this.playerElement = this.elementRef.nativeElement.querySelector('#video-element') |
287 | 284 | ||
288 | const videojsOptions = { | 285 | const videojsOptions = { |
289 | controls: true, | 286 | controls: true, |
@@ -306,12 +303,6 @@ export class VideoWatchComponent implements OnInit, OnDestroy { | |||
306 | this.on('customError', (event, data) => { | 303 | this.on('customError', (event, data) => { |
307 | self.handleError(data.err) | 304 | self.handleError(data.err) |
308 | }) | 305 | }) |
309 | |||
310 | this.on('torrentInfo', (event, data) => { | ||
311 | self.downloadSpeed = data.downloadSpeed | ||
312 | self.numPeers = data.numPeers | ||
313 | self.uploadSpeed = data.uploadSpeed | ||
314 | }) | ||
315 | }) | 306 | }) |
316 | 307 | ||
317 | this.setVideoDescriptionHTML() | 308 | this.setVideoDescriptionHTML() |