From 85cdc522c6d78006d95377a6719573193734e6b5 Mon Sep 17 00:00:00 2001
From: Feross Aboukhadijeh <feross@feross.org>
Date: Sat, 5 Mar 2016 21:55:19 -0800
Subject: [PATCH 1/3] header disappear when mouse not over

---
 renderer/index.css    | 12 ++++++++----
 renderer/views/app.js |  7 ++++++-
 2 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/renderer/index.css b/renderer/index.css
index 933bb377..8a140783 100644
--- a/renderer/index.css
+++ b/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.2s ease-out;
 }
 
-.header.hide {
+.app.player .header {
   opacity: 0;
-  cursor: none;
+}
+
+.app.player:hover .header:not(.hide) {
+  opacity: 0.8;
+  cursor: default;
 }
 
 .header .title {
@@ -298,7 +302,7 @@ body.drag::before {
   height: 38px;
   bottom: 0;
   opacity: 0;
-  transition: all 0.1s ease-out;
+  transition: all 0.2s ease-out;
 }
 
 .player:hover .player-controls {
diff --git a/renderer/views/app.js b/renderer/views/app.js
index ae9aa38f..a204e7d5 100644
--- a/renderer/views/app.js
+++ b/renderer/views/app.js
@@ -11,8 +11,13 @@ var TorrentList = require('./torrent-list')
 var isOSX = process.platform === 'darwin'
 
 function App (state, dispatch) {
+  var cls = []
+  if (state.url === '/player') {
+    cls.push('player')
+  }
+
   return hx`
-    <div class='app'>
+    <div class='app ${cls.join(' ')}'>
       ${getHeader()}
       <div class='content'>${getView()}</div>
     </div>

From f161a7c7e75b221fc1453ed00af48ce063e79d4a Mon Sep 17 00:00:00 2001
From: Feross Aboukhadijeh <feross@feross.org>
Date: Sat, 5 Mar 2016 21:55:51 -0800
Subject: [PATCH 2/3] no need to account for header in aspect ratio

Since the header floats on top of the video now
---
 renderer/index.js | 9 +--------
 1 file changed, 1 insertion(+), 8 deletions(-)

diff --git a/renderer/index.js b/renderer/index.js
index a04a8810..6d0e074b 100644
--- a/renderer/index.js
+++ b/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})
 }
 

From e0122f81e552f7f760a8b09c72390a35227b89a3 Mon Sep 17 00:00:00 2001
From: Feross Aboukhadijeh <feross@feross.org>
Date: Sat, 5 Mar 2016 22:06:32 -0800
Subject: [PATCH 3/3] don't calculate styles in JavaScript whenever possible

---
 renderer/index.css       | 12 ++++++++----
 renderer/views/app.js    |  9 +++++----
 renderer/views/header.js |  5 +----
 3 files changed, 14 insertions(+), 12 deletions(-)

diff --git a/renderer/index.css b/renderer/index.css
index 8a140783..80bab32e 100644
--- a/renderer/index.css
+++ b/renderer/index.css
@@ -114,14 +114,14 @@ a:not(.disabled):hover, i:not(.disabled):hover {
   top: 0;
   right: 0;
   z-index: 1000;
-  transition: opacity 0.2s ease-out;
+  transition: opacity 0.15s ease-out;
 }
 
-.app.player .header {
+.view-player .header {
   opacity: 0;
 }
 
-.app.player:hover .header:not(.hide) {
+.view-player:hover .header:not(.hide) {
   opacity: 0.8;
   cursor: default;
 }
@@ -144,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;
 }
@@ -302,7 +306,7 @@ body.drag::before {
   height: 38px;
   bottom: 0;
   opacity: 0;
-  transition: all 0.2s ease-out;
+  transition: all 0.15s ease-out;
 }
 
 .player:hover .player-controls {
diff --git a/renderer/views/app.js b/renderer/views/app.js
index a204e7d5..ca661fc0 100644
--- a/renderer/views/app.js
+++ b/renderer/views/app.js
@@ -11,10 +11,11 @@ var TorrentList = require('./torrent-list')
 var isOSX = process.platform === 'darwin'
 
 function App (state, dispatch) {
-  var cls = []
-  if (state.url === '/player') {
-    cls.push('player')
-  }
+  var cls = [
+    process.platform,
+    state.isFullScreen ? 'fullscreen' : 'not-fullscreen',
+    state.url === '/player' ? 'view-player' : ''
+  ]
 
   return hx`
     <div class='app ${cls.join(' ')}'>
diff --git a/renderer/views/header.js b/renderer/views/header.js
index bcd24e3f..d29365c9 100644
--- a/renderer/views/header.js
+++ b/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'