Merge pull request #45 from feross/header-disappear

header disappear when mouse not over

renderer/index.css

@@ -114,12 +114,16 @@ a:not(.disabled):hover, i:not(.disabled):hover {
   top: 0;
   right: 0;
   z-index: 1000;
-  transition: opacity 0.1s ease-out;
+  transition: opacity 0.15s ease-out;
 }
 
-.header.hide {
+.view-player .header {
   opacity: 0;
-  cursor: none;
+}
+
+.view-player:hover .header:not(.hide) {
+  opacity: 0.8;
+  cursor: default;
 }
 
 .header .title {
@@ -140,6 +144,10 @@ a:not(.disabled):hover, i:not(.disabled):hover {
   float: left;
 }
 
+.darwin.not-fullscreen .header .nav.left {
+  margin-left: 78px;
+}
+
 .header .nav.right {
   float: right;
 }
@@ -298,7 +306,7 @@ body.drag::before {
   height: 38px;
   bottom: 0;
   opacity: 0;
-  transition: all 0.1s ease-out;
+  transition: all 0.15s ease-out;
 }
 
 .player:hover .player-controls {

renderer/index.js

@@ -20,8 +20,6 @@ var patch = require('virtual-dom/patch')
 
 var App = require('./views/app')
 
-var HEADER_HEIGHT = 38
-
 // Force use of webtorrent trackers on all torrents
 global.WEBTORRENT_ANNOUNCE = createTorrent.announceList
   .map(function (arr) {
@@ -329,16 +327,11 @@ function setDimensions (dimensions) {
   var width = Math.floor(dimensions.width * scaleFactor)
   var height = Math.floor(dimensions.height * scaleFactor)
 
-  // Video player header only shows in OSX where it's part of the title bar. See app.js
-  if (process.platform === 'darwin') {
-    height += HEADER_HEIGHT
-  }
-
   // Center window on screen
   var x = Math.floor((workAreaSize.width - width) / 2)
   var y = Math.floor((workAreaSize.height - height) / 2)
 
-  electron.ipcRenderer.send('setAspectRatio', aspectRatio, {width: 0, height: HEADER_HEIGHT})
+  electron.ipcRenderer.send('setAspectRatio', aspectRatio)
   electron.ipcRenderer.send('setBounds', {x, y, width, height})
 }
 

renderer/views/app.js

@@ -11,8 +11,14 @@ var TorrentList = require('./torrent-list')
 var isOSX = process.platform === 'darwin'
 
 function App (state, dispatch) {
+  var cls = [
+    process.platform,
+    state.isFullScreen ? 'fullscreen' : 'not-fullscreen',
+    state.url === '/player' ? 'view-player' : ''
+  ]
+
   return hx`
-    <div class='app'>
+    <div class='app ${cls.join(' ')}'>
       ${getHeader()}
       <div class='content'>${getView()}</div>
     </div>

renderer/views/header.js

@@ -8,14 +8,11 @@ function Header (state, dispatch) {
   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 ${hideControls ? 'hide' : ''}'>
       ${getTitle()}
-      <div class='nav left' style=${navLeftStyle}>
+      <div class='nav left'>
         <i
           class='icon back'
           title='back'