Design video player

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 @@
 
 <div class="row">
   <!-- We need the video container for videojs so we just hide it -->
-  <div [hidden]="videoNotFound" class="embed-responsive embed-responsive-19by9">
-     <video id="video-container" class="video-js vjs-sublime-skin"></video>
+  <div [hidden]="videoNotFound" id="video-container">
+     <video id="video-element" class="video-js vjs-peertube-skin"></video>
   </div>
 
   <div *ngIf="videoNotFound" id="video-not-found">Video not found :'(</div>
 </div>
 
-<!-- P2P information -->
-<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>
-
 <!-- Video information -->
 <div *ngIf="video !== null" id="video-info">
   <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 @@
 #video-container {
-  width: 100%;
-  height: 100%;
+  background-color: #000;
+  display: flex;
+  justify-content: center;
+
+  #video-element {
+    width: 888px;
+    height: 500px;
+  }
 }
 
 #video-not-found {
@@ -11,14 +17,6 @@
   font-weight: bold;
 }
 
-.embed-responsive {
-  height: 500px;
-
-  @media screen and (max-width: 600px) {
-    height: 300px;
-  }
-}
-
 #torrent-info {
   font-size: 10px;
   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 {
   @ViewChild('videoShareModal') videoShareModal: VideoShareComponent
   @ViewChild('videoReportModal') videoReportModal: VideoReportComponent
 
-  downloadSpeed: number
   error = false
   loading = false
-  numPeers: number
   player: videojs.Player
   playerElement: HTMLMediaElement
-  uploadSpeed: number
   userRating: UserVideoRateType = null
   video: VideoDetails = null
   videoPlayerLoaded = false
@@ -283,7 +280,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
           return this.router.navigate([ '/videos/list' ])
         }
 
-        this.playerElement = this.elementRef.nativeElement.querySelector('#video-container')
+        this.playerElement = this.elementRef.nativeElement.querySelector('#video-element')
 
         const videojsOptions = {
           controls: true,
@@ -306,12 +303,6 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
           this.on('customError', (event, data) => {
             self.handleError(data.err)
           })
-
-          this.on('torrentInfo', (event, data) => {
-            self.downloadSpeed = data.downloadSpeed
-            self.numPeers = data.numPeers
-            self.uploadSpeed = data.uploadSpeed
-          })
         })
 
         this.setVideoDescriptionHTML()