Merge pull request #98 from feross/window-ui-improvements

Lighter window background; small state changes

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,12 +162,16 @@ 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;
 }
 
-.app.hide-video-controls .view-player .header {
-  opacity: 0.8;
+.app.hide-video-controls.view-player .header {
+  opacity: 0;
   cursor: none;
 }
 
@@ -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>`
     }
   }