Playback controls: fix scrub ghosting

renderer/index.css

@@ -290,8 +290,8 @@ body.drag::before {
 .player-controls .loading-bar {
   position: relative;
   width: 100%;
+  top: -3px;
   height: 3px;
-  margin-top: 7px;
   background-color: rgba(0, 0, 0, 0.3);
   transition: all 0.1s ease-out;
   position: absolute;
@@ -306,7 +306,7 @@ body.drag::before {
 
 .player-controls .playback-cursor {
   position: absolute;
-  top: 2px;
+  top: -8px;
   background-color: #FFF;
   width: 0;
   height: 0;
@@ -325,6 +325,11 @@ body.drag::before {
   margin: 5px auto;
 }
 
+.player-controls .chromecast,
+.player-controls .airplay {
+  font-size: 22px; /* make the cast icons less huge */
+}
+
 .player-controls .chromecast,
 .player-controls .airplay,
 .player-controls .fullscreen {
@@ -335,12 +340,11 @@ body.drag::before {
   float: right;
 }
 
-.player .scrub-bar:hover .loading-bar {
+.player .playback-bar:hover .loading-bar {
   height: 5px;
-  margin-top: 6px;
 }
 
-.player .scrub-bar:hover .playback-cursor {
+.player .playback-bar:hover .playback-cursor {
   width: 14px;
   height: 14px;
   border-radius: 7px;

renderer/views/player.js

@@ -52,18 +52,25 @@ function Player (state, dispatch) {
 // TODO: cast buttons
 function renderPlayerControls (state, dispatch) {
   var positionPercent = 100 * state.video.currentTime / state.video.duration
-  var playbackCursorStyle = { left: 'calc(' + positionPercent + '% - 4px)' }
+  var playbackCursorStyle = { left: 'calc(' + positionPercent + '% - 6px)' }
   var torrent = state.view.torrentPlaying._torrent
 
   var elements = [
     hx`
-      <div class="scrub-bar"
-        draggable="true"
-        onclick=${handleScrub},
-        ondrag=${handleScrub}>
+      <div class="playback-bar">
         ${renderLoadingBar(state)}
         <div class="playback-cursor" style=${playbackCursorStyle}></div>
+        <div class="scrub-bar"
+          draggable="true"
+          onclick=${handleScrub},
+          ondrag=${handleScrub}></div>
       </div>
+    `,
+    hx`
+      <i class="icon fullscreen"
+        onclick=${() => dispatch('toggleFullScreen')}>
+        fullscreen
+      </i>
     `
   ]
   if (state.view.devices.chromecast) {
@@ -84,12 +91,6 @@ function renderPlayerControls (state, dispatch) {
       </i>
     `)
   }
-  elements.push(hx`
-    <i class="icon fullscreen"
-      onclick=${() => dispatch('toggleFullScreen')}>
-      fullscreen
-    </i>
-  `)
   elements.push(hx`
     <i class="icon play-pause" onclick=${() => dispatch('playPause')}>
       ${state.video.isPaused ? 'play_arrow' : 'pause'}