Video player polish

No header on Linux and OSX, just a back button on mouseover

ESC exits fullscreen, or if already not in fullscreen, goes back

More accurate scrub position

Removed the calc(100% -38x) hack, replaced with flexbox

renderer/index.css

@@ -27,6 +27,8 @@ body {
   -webkit-user-select: none;
   -webkit-app-region: drag;
   height: 100%;
+  display: flex;
+  flex-flow: column;
 }
 
 /*
@@ -104,6 +106,7 @@ a:not(.disabled):hover, i:not(.disabled):hover {
   height: 37px;
   padding-top: 6px;
   overflow: hidden;
+  flex: 0 1 auto;
 }
 
 .header .title {
@@ -150,9 +153,10 @@ a:not(.disabled):hover, i:not(.disabled):hover {
  */
 
 .content {
+  position: relative;
   width: 100%;
-  height: calc(100% - 38px);
   overflow: auto;
+  flex: 1 1 auto;
 }
 
 body.drag::before {
@@ -171,11 +175,14 @@ body.drag::before {
  */
 
 .player {
+  position: absolute;
+  width: 100%;
   height: 100%;
   background-color: #000;
 }
 
 .player .letterbox {
+  width: 100%;
   height: 100%;
   display: flex;
 }
@@ -269,7 +276,7 @@ body.drag::before {
 
 .player-controls {
   position: fixed;
-  background: rgb(40, 40, 40);
+  background: rgba(40, 40, 40, 0.8);
   width: 100%;
   height: 38px;
   bottom: 0;
@@ -331,11 +338,21 @@ body.drag::before {
 
 .player-controls .chromecast,
 .player-controls .airplay,
-.player-controls .fullscreen {
+.player-controls .fullscreen,
+.player-controls .back {
   display: block;
   width: 20px;
   height: 20px;
   margin: 5px;
+}
+
+.player-controls .back {
+  float: left;
+}
+
+.player-controls .chromecast,
+.player-controls .airplay,
+.player-controls .fullscreen {
   float: right;
 }
 

renderer/index.js

@@ -84,6 +84,17 @@ function init () {
     electron.ipcRenderer.send('addTorrentFromPaste')
   })
 
+  document.addEventListener('keydown', function (e) {
+    console.log('keydown ' + e.which)
+    if (e.which === 27) { /* ESC means either exit fullscreen or go back */
+      if (state.view.isFullScreen) {
+        dispatch('toggleFullScreen')
+      } else {
+        dispatch('back')
+      }
+    }
+  })
+
   window.addEventListener('focus', function () {
     state.view.isFocused = true
     if (state.view.dock.badge > 0) electron.ipcRenderer.send('setBadge', '')

renderer/views/app.js

@@ -17,7 +17,12 @@ function App (state, dispatch) {
     }
   }
 
-  var header = state.view.isFullScreen ? null : Header(state, dispatch)
+  // Show the header only when we're outside of fullscreen
+  // Also don't show it in the video player except in OSX
+  var isOSX = process.platform === 'darwin'
+  var isVideo = state.view.url === '/player'
+  var isFullScreen = state.view.isFullScreen
+  var header = !isFullScreen && (!isVideo || isOSX) ? Header(state, dispatch) : null
 
   return hx`
     <div class="app">

renderer/views/player.js

@@ -54,7 +54,7 @@ function Player (state, dispatch) {
 // TODO: cast buttons
 function renderPlayerControls (state, dispatch) {
   var positionPercent = 100 * state.video.currentTime / state.video.duration
-  var playbackCursorStyle = { left: 'calc(' + positionPercent + '% - 6px)' }
+  var playbackCursorStyle = { left: 'calc(' + positionPercent + '% - 8px)' }
   var torrent = state.view.torrentPlaying._torrent
 
   var elements = [
@@ -75,6 +75,7 @@ function renderPlayerControls (state, dispatch) {
       </i>
     `
   ]
+  // If we've detected a Chromecast or AppleTV, the user can play video there
   if (state.view.devices.chromecast) {
     elements.push(hx`
       <i.icon.chromecast
@@ -93,6 +94,16 @@ function renderPlayerControls (state, dispatch) {
       </i>
     `)
   }
+  // On OSX, the back button is in the title bar of the window; see app.js
+  // On other platforms, we render one over the video on mouseover
+  if(process.platform !== 'darwin') {
+    elements.push(hx`
+      <i.icon.back
+        onclick=${() => dispatch('back')}>
+        chevron_left
+      </i>
+    `)
+  }
   elements.push(hx`
     <i class="icon play-pause" onclick=${() => dispatch('playPause')}>
       ${state.video.isPaused ? 'play_arrow' : 'pause'}