Lighter window background

Native windows get lighter when they’re backgrounded so they stand out
less (at least on OS X). Let’s do this too.

Even the Spotify app, which has dozens of developers gets this wrong.
We’re so awesome :)

Also:

- Renamed a bunch of state variables (next time will make separate
commit, sry)
- All window-related variables (e.g. isFullScreen, isFocused, etc.)
live in `state.window` now
- Remove negative class name, use CSS :not() instead

renderer/index.css

@@ -67,6 +67,11 @@ body {
   display: flex;
   flex-flow: column;
   animation: fadein 0.3s;
+  background: rgb(40, 40, 40);
+}
+
+.app:not(.is-focused) {
+  background: rgb(50, 50, 50);
 }
 
 /*
@@ -157,6 +162,10 @@ a:not(.disabled):hover, i:not(.disabled):hover {
   line-height: 1.5em;
 }
 
+.app:not(.is-focused) .header {
+  background: rgb(50, 50, 50);
+}
+
 .view-player .header {
   opacity: 0.8;
 }
@@ -184,7 +193,7 @@ a:not(.disabled):hover, i:not(.disabled):hover {
   float: left;
 }
 
-.darwin.not-fullscreen .header .nav.left {
+.app.is-darwin:not(.is-fullscreen) .header .nav.left {
   margin-left: 78px;
 }
 

renderer/index.js

@@ -95,7 +95,7 @@ function init () {
   // ...keyboard shortcuts
   document.addEventListener('keydown', function (e) {
     if (e.which === 27) { /* ESC means either exit fullscreen or go back */
-      if (state.isFullScreen) {
+      if (state.window.isFullScreen) {
         dispatch('toggleFullScreen')
       } else {
         dispatch('back')
@@ -107,12 +107,14 @@ function init () {
 
   // ...focus and blur. Needed to show correct dock icon text ("badge") in OSX
   window.addEventListener('focus', function () {
-    state.isFocused = true
+    state.window.isFocused = true
     state.dock.badge = 0
+    update()
   })
 
   window.addEventListener('blur', function () {
-    state.isFocused = false
+    state.window.isFocused = false
+    update()
   })
 
   // Done! Ideally we want to get here <100ms after the user clicks the app
@@ -133,9 +135,9 @@ function update () {
 }
 
 function updateElectron () {
-  if (state.title !== state.prev.title) {
-    state.prev.title = state.title
-    ipcRenderer.send('setTitle', state.title)
+  if (state.window.title !== state.prev.title) {
+    state.prev.title = state.window.title
+    ipcRenderer.send('setTitle', state.window.title)
   }
   if (state.dock.progress !== state.prev.progress) {
     state.prev.progress = state.dock.progress
@@ -213,7 +215,7 @@ function setupIpc () {
   })
 
   ipcRenderer.on('fullscreenChanged', function (e, isFullScreen) {
-    state.isFullScreen = isFullScreen
+    state.window.isFullScreen = isFullScreen
     update()
   })
 
@@ -386,7 +388,7 @@ function addTorrentEvents (torrent) {
     var torrentSummary = getTorrentSummary(torrent.infoHash)
     torrentSummary.status = 'seeding'
 
-    if (!state.isFocused) {
+    if (!state.window.isFocused) {
       state.dock.badge += 1
     }
 
@@ -456,17 +458,17 @@ function openPlayer (torrentSummary) {
 
     // otherwise, play the video
     state.url = '/player'
-    state.title = torrentSummary.name
+    state.window.title = torrentSummary.name
     update()
   })
 }
 
 function closePlayer () {
   state.url = '/'
-  state.title = config.APP_NAME
+  state.window.title = config.APP_NAME
   update()
 
-  if (state.isFullScreen) {
+  if (state.window.isFullScreen) {
     dispatch('toggleFullScreen', false)
   }
   restoreBounds()
@@ -519,7 +521,7 @@ function openAirplay (infoHash) {
 
 // Set window dimensions to match video dimensions or fill the screen
 function setDimensions (dimensions) {
-  state.mainWindowBounds = {
+  state.window.bounds = {
     x: window.screenX,
     y: window.screenY,
     width: window.outerWidth,
@@ -547,8 +549,8 @@ function setDimensions (dimensions) {
 
 function restoreBounds () {
   ipcRenderer.send('setAspectRatio', 0)
-  if (state.mainWindowBounds) {
-    ipcRenderer.send('setBounds', state.mainWindowBounds, true)
+  if (state.window.bounds) {
+    ipcRenderer.send('setBounds', state.window.bounds, true)
   }
 }
 

renderer/state.js

@@ -7,31 +7,33 @@ module.exports = {
   /* Temporary state disappears once the program exits.
    * It can contain complex objects like open connections, etc.
    */
-  url: '/',
   client: null, /* the WebTorrent client */
+  prev: {}, /* used for state diffing in updateElectron() */
   server: null, /* local WebTorrent-to-HTTP server */
-  dock: {
-    badge: 0,
-    progress: 0
-  },
+  torrentPlaying: null, /* the torrent we're streaming. see client.torrents */
+  // history: [], /* track how we got to the current view. enables Back button */
+  // historyIndex: 0,
+  url: '/',
   devices: {
     airplay: null, /* airplay client. finds and manages AppleTVs */
     chromecast: null /* chromecast client. finds and manages Chromecasts */
   },
-  torrentPlaying: null, /* the torrent we're streaming. see client.torrents */
-  // history: [], /* track how we got to the current view. enables Back button */
-  // historyIndex: 0,
-  isFocused: true,
-  isFullScreen: false,
-  mainWindowBounds: null, /* x y width height */
-  title: config.APP_NAME, /* current window title */
+  dock: {
+    badge: 0,
+    progress: 0
+  },
+  window: {
+    bounds: null, /* x y width height */
+    isFocused: true,
+    isFullScreen: false,
+    title: config.APP_NAME /* current window title */
+  },
   video: {
-    isPaused: false,
     currentTime: 0, /* seconds */
     duration: 1, /* seconds */
+    isPaused: false,
     mouseStationarySince: 0 /* Unix time in ms */
   },
-  prev: {}, /* used for state diffing in updateElectron() */
 
   /* Saved state is read from and written to a file every time the app runs.
    * It should be simple and minimal and must be JSON.

renderer/views/app.js

@@ -22,8 +22,9 @@ function App (state, dispatch) {
     !state.video.isPaused
 
   var cls = [
-    process.platform, /* 'windows', 'linux', or 'darwin' for OSX */
-    state.isFullScreen ? 'fullscreen' : 'not-fullscreen',
+    'is-' + process.platform, /* 'is-darwin' (OS X), 'is-win32' (Windows), 'is-linux' */
+    state.window.isFullScreen ? 'is-fullscreen' : '',
+    state.window.isFocused ? 'is-focused' : '',
     isVideoPlayer ? 'view-player' : '',
     hideControls ? 'hide-video-controls' : ''
   ]

renderer/views/header.js

@@ -30,7 +30,7 @@ function Header (state, dispatch) {
 
   function getTitle () {
     if (process.platform === 'darwin') {
-      return hx`<div class='title'>${state.title}</div>`
+      return hx`<div class='title'>${state.window.title}</div>`
     }
   }