Minimize to tray

Fixes #150

main/index.js

@@ -11,6 +11,7 @@ var menu = require('./menu')
 var shortcuts = require('./shortcuts')
 var squirrelWin32 = require('./squirrel-win32')
 var windows = require('./windows')
+var tray = require('./tray')
 
 var shouldQuit = false
 var argv = sliceArgv(process.argv)
@@ -52,6 +53,7 @@ function init () {
     menu.init()
     windows.createMainWindow()
     shortcuts.init()
+    tray.init()
     if (process.platform !== 'win32') handlers.init()
   })
 
@@ -67,12 +69,6 @@ function init () {
   app.on('activate', function () {
     windows.createMainWindow()
   })
-
-  app.on('window-all-closed', function () {
-    if (process.platform !== 'darwin') {
-      app.quit()
-    }
-  })
 }
 
 function onOpen (e, torrentId) {

main/tray.js

@@ -0,0 +1,31 @@
+module.exports = {
+  init
+}
+
+var path = require('path')
+var electron = require('electron')
+var windows = require('./windows')
+
+function init () {
+  // No tray icon on OSX
+  if (process.platform === 'darwin') return
+
+  var trayIcon = new electron.Tray(path.join(__dirname, '..', 'static', 'WebTorrentSmall.png'))
+
+  // On Windows, left click to open the app, right click for context menu
+  // On Linux, any click (right or left) opens the context menu
+  trayIcon.on('click', showApp)
+  var contextMenu = electron.Menu.buildFromTemplate([
+    { label: 'Show', click: showApp },
+    { label: 'Quit', click: quitApp }
+  ])
+  trayIcon.setContextMenu(contextMenu)
+}
+
+function showApp () {
+  windows.main.show()
+}
+
+function quitApp () {
+  electron.app.quit()
+}

main/windows.js

@@ -8,8 +8,6 @@ var windows = module.exports = {
 
 var electron = require('electron')
 
-var app = electron.app
-
 var config = require('../config')
 var menu = require('./menu')
 
@@ -78,7 +76,7 @@ function createMainWindow () {
   win.on('leave-full-screen', () => menu.onToggleFullScreen(false))
 
   win.on('close', function (e) {
-    if (process.platform === 'darwin' && !app.isQuitting) {
+    if (!electron.app.isQuitting) {
       e.preventDefault()
       win.send('dispatch', 'pause')
       win.hide()

renderer/index.css

@@ -142,6 +142,7 @@ i:not(.disabled):hover {
  */
 
 .header {
+  background: rgb(40, 40, 40);
   border-bottom: 1px solid rgb(20, 20, 20);
   height: 37px; /* vertically center OS menu buttons (OS X) */
   padding-top: 6px;
@@ -158,6 +159,10 @@ i:not(.disabled):hover {
   z-index: 1;
 }
 
+.app:not(.is-focused) .header {
+  background: rgb(50, 50, 50);
+}
+
 .app.view-player .header {
   opacity: 0.8;
 }

renderer/index.js

@@ -270,6 +270,13 @@ function dispatch (action, ...args) {
   }
   if (action === 'pause') {
     playPause(true)
+
+    // Work around virtual-dom issue: it doesn't expose its redraw function,
+    // and only redraws on requestAnimationFrame(). That means when the user
+    // closes the window (hide window / minimize to tray) and we want to pause
+    // the video, we update the vdom but it keeps playing until you reopen!
+    var videoTag = document.querySelector('video')
+    if (videoTag) videoTag.pause()
   }
   if (action === 'playbackJump') {
     jumpToTime(args[0] /* seconds */)