From 67217bdc7ecb4a79779144a18c35469785052e3d Mon Sep 17 00:00:00 2001
From: Feross Aboukhadijeh <feross@feross.org>
Date: Tue, 8 Mar 2016 17:18:31 -0800
Subject: [PATCH] Lighter window background
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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       | 11 ++++++++++-
 renderer/index.js        | 30 ++++++++++++++++--------------
 renderer/state.js        | 30 ++++++++++++++++--------------
 renderer/views/app.js    |  5 +++--
 renderer/views/header.js |  2 +-
 5 files changed, 46 insertions(+), 32 deletions(-)

diff --git a/renderer/index.css b/renderer/index.css
index dd8ac63c..21899388 100644
--- a/renderer/index.css
+++ b/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;
 }
 
diff --git a/renderer/index.js b/renderer/index.js
index e577d0a2..8edaab5f 100644
--- a/renderer/index.js
+++ b/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)
   }
 }
 
diff --git a/renderer/state.js b/renderer/state.js
index 8fe8b7a2..7cd53bf0 100644
--- a/renderer/state.js
+++ b/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.
diff --git a/renderer/views/app.js b/renderer/views/app.js
index b8615e83..44bd49b2 100644
--- a/renderer/views/app.js
+++ b/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' : ''
   ]
diff --git a/renderer/views/header.js b/renderer/views/header.js
index b40cf3e0..2e063629 100644
--- a/renderer/views/header.js
+++ b/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>`
     }
   }