hide header on video after mouse idle

renderer/index.css

@@ -102,11 +102,24 @@ a:not(.disabled):hover, i:not(.disabled):hover {
  */
 
 .header {
+  background: rgb(40, 40, 40);
   border-bottom: 1px solid rgb(20, 20, 20);
-  height: 37px;
+  height: 38px;
   padding-top: 6px;
   overflow: hidden;
   flex: 0 1 auto;
+  opacity: 1;
+  position: fixed;
+  left: 0;
+  top: 0;
+  right: 0;
+  z-index: 1000;
+  transition: opacity 0.1s ease-out;
+}
+
+.header.hide {
+  opacity: 0;
+  cursor: none;
 }
 
 .header .title {
@@ -196,6 +209,10 @@ body.drag::before {
  * TORRENT LIST
  */
 
+.torrent-list {
+  margin-top: 38px;
+}
+
 .torrent {
   height: 120px;
   padding: 20px;

renderer/index.js

@@ -143,6 +143,8 @@ function dispatch (action, ...args) {
     setDimensions(args[0] /* dimensions */)
   }
   if (action === 'back') {
+    // TODO
+    // window.history.back()
     if (state.url === '/player') {
       restoreBounds()
       closeServer()
@@ -150,6 +152,10 @@ function dispatch (action, ...args) {
     state.url = '/'
     update()
   }
+  if (action === 'forward') {
+    // TODO
+    // window.history.forward()
+  }
   if (action === 'playPause') {
     state.video.isPaused = !state.video.isPaused
     update()

renderer/views/header.js

@@ -5,21 +5,26 @@ var hyperx = require('hyperx')
 var hx = hyperx(h)
 
 function Header (state, dispatch) {
-  var navLeftStyle = process.platform === 'darwin'
-    ? {marginLeft: '78px'} /* OSX needs room on the left for min/max/close buttons */
-    : null /* On Windows and Linux, the header is separate & underneath the title bar */
+  var hideControls = state.url === '/player' &&
+    state.video.mouseStationarySince !== 0 &&
+    new Date().getTime() - state.video.mouseStationarySince > 2000
+  var navLeftStyle = (process.platform === 'darwin' && !state.isFullScreen)
+    ? { marginLeft: '78px' } /* OSX needs room on the left for min/max/close buttons */
+    : {} /* On Windows and Linux, the header is separate & underneath the title bar */
 
   return hx`
-    <div class='header'>
+    <div class='header ${hideControls ? 'hide' : ''}'>
       ${getTitle()}
       <div class='nav left' style=${navLeftStyle}>
         <i
           class='icon back'
+          title='back'
           onclick=${() => dispatch('back')}>
           chevron_left
         </i>
         <i
           class='icon forward'
+          title='forward'
           onclick=${() => dispatch('forward')}>
           chevron_right
         </i>
@@ -41,6 +46,7 @@ function Header (state, dispatch) {
       return hx`
         <i
           class='icon add'
+          title='add torrent'
           onclick=${() => dispatch('addTorrent')}>
           add
         </i>