aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app
diff options
context:
space:
mode:
authorChocobozzz <florian.bigard@gmail.com>2017-12-05 10:44:11 +0100
committerChocobozzz <florian.bigard@gmail.com>2017-12-05 11:04:15 +0100
commitbe6a4802326b1748e85c0d6fdadf06e70e6ecbb0 (patch)
treec096a9e3476b7dbeb0f197c25165557f1c51c70f /client/src/app
parent62e23e40dad8fbd6148a9201fba2e73ced3f1877 (diff)
downloadPeerTube-be6a4802326b1748e85c0d6fdadf06e70e6ecbb0.tar.gz
PeerTube-be6a4802326b1748e85c0d6fdadf06e70e6ecbb0.tar.zst
PeerTube-be6a4802326b1748e85c0d6fdadf06e70e6ecbb0.zip
Design video player
Diffstat (limited to 'client/src/app')
-rw-r--r--client/src/app/videos/+video-watch/video-watch.component.html11
-rw-r--r--client/src/app/videos/+video-watch/video-watch.component.scss18
-rw-r--r--client/src/app/videos/+video-watch/video-watch.component.ts11
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()