Letterbox video. Hide toolbar in fullscreen

Cleaner-looking Chromecast and Airplay icons

Hide top bar in full screen mode

renderer/views/app.js

@@ -17,9 +17,11 @@ function App (state, dispatch) {
     }
   }
 
+  var header = state.view.isFullScreen ? null : Header(state, dispatch)
+
   return hx`
     <div class="app">
-      ${Header(state, dispatch)}
+      ${header}
       <div class="content">${getView()}</div>
     </div>
   `

renderer/views/header.js

@@ -5,10 +5,13 @@ 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 */
   return hx`
     <div class="header">
       ${getTitle()}
-      <div class="nav left">
+      <div class="nav left" style=${navLeftStyle}>
         <i class="icon back" onclick=${onBack}>chevron_left</i>
         <i class="icon forward" onclick=${onForward}>chevron_right</i>
       </div>

renderer/views/player.js

@@ -27,11 +27,13 @@ function Player (state, dispatch) {
   // Show the video as large as will fit in the window, play immediately
   return hx`
     <div class="player">
-      <video
-        src="${state.server.localURL}"
-        onloadedmetadata="${onLoadedMetadata}"
-        autoplay="true">
-      </video>
+      <div class="letterbox">
+        <video
+          src="${state.server.localURL}"
+          onloadedmetadata="${onLoadedMetadata}"
+          autoplay="true">
+        </video>
+      </div>
       ${renderPlayerControls(state, dispatch)}
     </div>
   `