Nicer player controls

- make bottom bar match header bar color
- enlarge cursor and loading bar on hover
- remove extraneous .bottom-bar class

renderer/index.css

@@ -91,7 +91,7 @@ a:not(.disabled):hover, i:not(.disabled):hover {
   height: 40px;
   border-radius: 20px;
   font-size: 22px;
-  transition: all 0.05s ease-out;
+  transition: all 0.1s ease-out;
   text-align: center;
 }
 
@@ -192,7 +192,7 @@ body.drag::before {
   background-repeat: no-repeat;
   background-size: cover;
   background-position: 0 50%;
-  transition: all 0.05s ease-out;
+  transition: all 0.1s ease-out;
   position: relative;
 }
 
@@ -260,20 +260,20 @@ body.drag::before {
 }
 
 /*
- * VIDEO CONTROLS
+ * PLAYER CONTROLS
  */
 
-.player-controls .bottom-bar {
+.player-controls {
   position: fixed;
+  background: rgb(40, 40, 40);
   width: 100%;
   height: 38px;
   bottom: 0;
   opacity: 0;
-  background-color: rgba(0, 0, 0, 0.25);
   transition: all 0.1s ease-out;
 }
 
-.player:hover .bottom-bar {
+.player:hover .player-controls {
  opacity: 1;
 }
 
@@ -290,23 +290,29 @@ body.drag::before {
   position: relative;
   width: 100%;
   height: 3px;
+  margin-top: 7px;
   background-color: rgba(0, 0, 0, 0.3);
+  transition: all 0.1s ease-out;
+  position: absolute;
 }
 
 .player-controls .loading-bar-part {
   position: absolute;
+  background-color: #dd0000;
   top: 0;
   height: 100%;
-  background-color: #dd0000;
 }
 
 .player-controls .playback-cursor {
   position: absolute;
-  top: -2px;
-  width: 7px;
-  height: 7px;
-  border-radius: 2px;
-  border: 3px solid #bbbbbb;
+  top: 2px;
+  margin-top: 7px;
+  margin-left: 7px;
+  background-color: #FFF;
+  width: 0;
+  height: 0;
+  border-radius: 0;
+  transition: all 0.1s ease-out;
 }
 
 .player-controls .play-pause {
@@ -315,3 +321,16 @@ body.drag::before {
   height: 20px;
   margin: 5px auto;
 }
+
+.player .scrub-bar:hover .loading-bar {
+  height: 5px;
+  margin-top: 6px;
+}
+
+.player .scrub-bar:hover .playback-cursor {
+  width: 14px;
+  height: 14px;
+  margin-top: 0;
+  margin-left: 0;
+  border-radius: 7px;
+}

renderer/views/player.js

@@ -49,26 +49,26 @@ function Player (state, dispatch) {
 function renderPlayerControls (state, dispatch) {
   var positionPercent = 100 * state.video.currentTime / state.video.duration
   return h('.player-controls', [
-    h('.bottom-bar', [
+    h('.scrub-bar', {
+      onclick: handleScrub,
+      ondrag: handleScrub
+    }, [
       h('.loading-bar', renderLoadingBar(state)),
-      h('.scrub-bar', {
-        draggable: true,
-        onclick: handleScrub,
-        ondrag: handleScrub
-      }),
       h('.playback-cursor', {
         style: {
           left: 'calc(' + positionPercent + '% - 4px)'
         }
-      }),
-      h('i.icon.play-pause', {
-        onclick: () => dispatch('playPause')
-      }, state.video.isPaused ? 'play_arrow' : 'pause')
-    ])
+      })
+    ]),
+    h('i.icon.play-pause', {
+      onclick: () => dispatch('playPause')
+    }, state.video.isPaused ? 'play_arrow' : 'pause')
   ])
 
   // Handles a click or drag to scrub (jump to another position in the video)
   function handleScrub (e) {
+    // TODO: don't use remote -- it does IPC with the main process which is overkill
+    // just to get the width
     var windowWidth = electron.remote.getCurrentWindow().getBounds().width
     var fraction = e.clientX / windowWidth
     var position = fraction * state.video.duration /* seconds */