Video controls: never hide when paused

Also simplifies CSS

renderer/index.css

@@ -153,12 +153,12 @@ a:not(.disabled):hover, i:not(.disabled):hover {
 }
 
 .view-player .header {
-  opacity: 0;
+  opacity: 0.8;
 }
 
-.view-player:hover .header:not(.hide) {
+.app.hide-video-controls .view-player .header {
   opacity: 0.8;
-  cursor: default;
+  cursor: none;
 }
 
 .header .title {
@@ -368,22 +368,22 @@ body.drag::before {
   width: 100%;
   height: 38px;
   bottom: 0;
-  opacity: 0;
   transition: all 0.15s ease-out;
 }
 
-.player:hover .player-controls {
-  opacity: 1;
-}
-
-.player.hide:hover .player-controls {
+.app.hide-video-controls .player-controls {
   opacity: 0;
 }
 
-.player.hide {
+.app.hide-video-controls .player {
   cursor: none;
 }
 
+.app.hide-video-controls .player .player-controls:hover {
+  opacity: 1;
+  cursor: default;
+}
+
 /* invisible click target for scrubbing */
 .player-controls .scrub-bar {
   position: absolute;

renderer/index.js

@@ -74,7 +74,7 @@ function init () {
   }, 1000)
 
   // All state lives in state.js. `state.saved` is read from and written to a
-  // file. All other state is ephemeral. Here we'll load state.saved:
+  // file. All other state is ephemeral.
   window.addEventListener('beforeunload', saveState)
 
   // listen for messages from the main process

renderer/views/app.js

@@ -11,10 +11,21 @@ var TorrentList = require('./torrent-list')
 var isOSX = process.platform === 'darwin'
 
 function App (state, dispatch) {
+  // Hide player controls while playing video, if the mouse stays still for a while
+  // Never hide the controls when:
+  // * The mouse is over the controls or we're scrubbing (see CSS)
+  // * The video is paused
+  var isVideoPlayer = state.url === '/player'
+  var hideControls = isVideoPlayer &&
+    state.video.mouseStationarySince !== 0 &&
+    new Date().getTime() - state.video.mouseStationarySince > 2000 &&
+    !state.video.isPaused
+
   var cls = [
-    process.platform,
+    process.platform, /* 'windows', 'linux', or 'darwin' for OSX */
     state.isFullScreen ? 'fullscreen' : 'not-fullscreen',
-    state.url === '/player' ? 'view-player' : ''
+    isVideoPlayer ? 'view-player' : '',
+    hideControls ? 'hide-video-controls' : ''
   ]
 
   return hx`

renderer/views/header.js

@@ -5,12 +5,8 @@ var hyperx = require('hyperx')
 var hx = hyperx(h)
 
 function Header (state, dispatch) {
-  var hideControls = state.url === '/player' &&
-    state.video.mouseStationarySince !== 0 &&
-    new Date().getTime() - state.video.mouseStationarySince > 2000
-
   return hx`
-    <div class='header ${hideControls ? 'hide' : ''}'>
+    <div class='header'>
       ${getTitle()}
       <div class='nav left'>
         <i

renderer/views/player.js

@@ -23,14 +23,10 @@ function Player (state, dispatch) {
     state.video.duration = videoElement.duration
   }
 
-  // When in fullscreen, hide player controls if the mouse stays still for a while
-  var hideControls = state.video.mouseStationarySince !== 0 &&
-    new Date().getTime() - state.video.mouseStationarySince > 2000
-
   // Show the video as large as will fit in the window, play immediately
   return hx`
     <div
-      class='player ${hideControls ? 'hide' : ''}'
+      class='player'
       onmousemove=${() => dispatch('videoMouseMoved')}>
       <div
         class='letterbox'