From 8fae0a3ee6818fdc4836f4ea68aa570e974225ab Mon Sep 17 00:00:00 2001
From: Mickael KERJEAN <mickael.kerjean@gmail.com>
Date: Tue, 29 May 2018 22:36:01 +1000
Subject: [PATCH] improvement (video): improve UI of the video player

---
 client/pages/viewerpage/videoplayer.js   | 15 +++++----
 client/pages/viewerpage/videoplayer.scss | 39 ++++++++++++++++++++++++
 package.json                             |  1 +
 3 files changed, 49 insertions(+), 6 deletions(-)
 create mode 100644 client/pages/viewerpage/videoplayer.scss

diff --git a/client/pages/viewerpage/videoplayer.js b/client/pages/viewerpage/videoplayer.js
index c2758458..e39628e0 100644
--- a/client/pages/viewerpage/videoplayer.js
+++ b/client/pages/viewerpage/videoplayer.js
@@ -1,7 +1,10 @@
 import React from 'react';
 import { MenuBar } from './menubar';
 import videojs from 'video.js';
+import 'videojs-contrib-hls';
+
 import 'video.js/dist/video-js.css';
+import './videoplayer.scss';
 
 export class VideoPlayer extends React.Component {
     constructor(props){
@@ -21,20 +24,20 @@ export class VideoPlayer extends React.Component {
 
     componentWillUnmount() {
         if (this.player) {
-            this.player.dispose()
+            this.player.dispose();
         }
     }
 
     render(){
         return (
-            <div style={{background: '#525659', height: '100%'}}>
+            <div className="component_videoplayer">
               <MenuBar title={this.props.filename} download={this.props.data} />
-              <div style={{padding: '20px'}}>
-                <div style={{maxWidth: '800px', width: '100%', margin: '0 auto'}}>
-                  <video ref={ node => this.videoNode = node } className="video-js my-skin" style={{boxShadow: 'rgba(0, 0, 0, 0.14) 0px 4px 5px 0px, rgba(0, 0, 0, 0.12) 0px 1px 10px 0px, rgba(0, 0, 0, 0.2) 0px 2px 4px -1px'}}></video>
+              <div className="video_container">
+                <div>
+                  <video ref={ node => this.videoNode = node } className="video-js vjs-default-skin vjs-big-play-centered" style={{boxShadow: 'rgba(0, 0, 0, 0.14) 0px 4px 5px 0px, rgba(0, 0, 0, 0.12) 0px 1px 10px 0px, rgba(0, 0, 0, 0.2) 0px 2px 4px -1px'}}></video>
                 </div>
               </div>
             </div>
-        )
+        );
     }
 }
diff --git a/client/pages/viewerpage/videoplayer.scss b/client/pages/viewerpage/videoplayer.scss
new file mode 100644
index 00000000..4ac275d8
--- /dev/null
+++ b/client/pages/viewerpage/videoplayer.scss
@@ -0,0 +1,39 @@
+.component_videoplayer{
+    background: #525659;
+    height: 100%;
+    .video_container{
+        padding: 20px;
+        > div{
+            max-width: 800px;
+            width: 100%;
+            margin: 0 auto;
+            video{
+                outline: none;
+                boxShadow: rgba(0, 0, 0, 0.14) 0px 4px 5px 0px, rgba(0, 0, 0, 0.12) 0px 1px 10px 0px, rgba(0, 0, 0, 0.2) 0px 2px 4px -1px;
+            }
+        }
+    }
+}
+
+
+
+
+/* SKIN FOR VIDEOJS: */
+.video-js{
+    font-size: 14px; /* Chromium bug */
+
+    .vjs-control-bar{
+        background: rgba(255,255,255,0.15);
+    }
+    .vjs-load-progress div{
+        background: var(--primary);
+    }
+    .vjs-big-play-button{
+        background-color: var(--primary)!important;
+        border-color: var(--emphasis-primary)!important;
+        border-width: 2px;
+        margin-top: -40px;
+        border-radius: 10px;
+        &:before{ font-size: 45px; color: var(--bg-color); }
+    }
+}
diff --git a/package.json b/package.json
index 6a3b4f90..2c1e0045 100644
--- a/package.json
+++ b/package.json
@@ -91,6 +91,7 @@
     "style-loader": "^0.20.2",
     "url-loader": "^0.6.2",
     "video.js": "^5.19.2",
+    "videojs-contrib-hls": "^5.14.1",
     "videojs-sublime-skin": "^1.0.3",
     "watchify": "^3.11.0",
     "wavesurfer.js": "^1.4.0",