Letterbox video. Hide toolbar in fullscreen

Cleaner-looking Chromecast and Airplay icons

Hide top bar in full screen mode

main/menu.js

@@ -13,6 +13,7 @@ function toggleFullScreen () {
 
 function onToggleFullScreen () {
   getMenuItem('Full Screen').checked = windows.main.isFullScreen()
+  windows.main.send('fullscreenChanged', windows.main.isFullScreen())
 }
 
 // Sets whether the window should always show on top of other windows

renderer/index.css

@@ -117,7 +117,6 @@ a:not(.disabled):hover, i:not(.disabled):hover {
 
 .header .nav {
   font-weight: bold;
-  margin-left: 78px;
   margin-right: 7px;
 }
 
@@ -176,6 +175,11 @@ body.drag::before {
   background-color: #000;
 }
 
+.player .letterbox {
+  height: 100%;
+  display: flex;
+}
+
 .player video {
   display: block;
   width: 100%;
@@ -325,11 +329,6 @@ body.drag::before {
   margin: 5px auto;
 }
 
-.player-controls .chromecast,
-.player-controls .airplay {
-  font-size: 22px; /* make the cast icons less huge */
-}
-
 .player-controls .chromecast,
 .player-controls .airplay,
 .player-controls .fullscreen {
@@ -340,6 +339,12 @@ body.drag::before {
   float: right;
 }
 
+.player-controls .chromecast,
+.player-controls .airplay {
+  font-size: 18px; /* make the cast icons less huge */
+  margin-top: 8px !important;
+}
+
 .player .playback-bar:hover .loading-bar {
   height: 5px;
 }

renderer/index.js

@@ -176,6 +176,11 @@ electron.ipcRenderer.on('seed', function (e, files) {
   seed(files)
 })
 
+electron.ipcRenderer.on('fullscreenChanged', function (e, isFullScreen) {
+  state.view.isFullScreen = isFullScreen
+  update()
+})
+
 function onFiles (files) {
   // .torrent file = start downloading the torrent
   files.filter(isTorrentFile).forEach(function (torrentFile) {

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>
   `