Windows/Linux: Add About Window (#220)

config.js

@@ -21,8 +21,6 @@ module.exports = {
   CONFIG_POSTER_PATH: path.join(applicationConfigPath(APP_NAME), 'Posters'),
   CONFIG_TORRENT_PATH: path.join(applicationConfigPath(APP_NAME), 'Torrents'),
 
-  INDEX: 'file://' + path.join(__dirname, 'renderer', 'index.html'),
-
   IS_PRODUCTION: isProduction(),
 
   ROOT_PATH: __dirname,
@@ -59,7 +57,10 @@ module.exports = {
   SOUND_STARTUP: {
     url: 'file://' + path.join(__dirname, 'static', 'sound', 'startup.wav'),
     volume: 0.4
-  }
+  },
+
+  WINDOW_ABOUT: 'file://' + path.join(__dirname, 'renderer', 'about.html'),
+  WINDOW_MAIN: 'file://' + path.join(__dirname, 'renderer', 'main.html')
 }
 
 function isProduction () {

main/index.js

@@ -65,11 +65,7 @@ function init () {
   })
 
   app.on('activate', function () {
-    if (windows.main) {
-      windows.main.show()
-    } else {
-      windows.createMainWindow()
-    }
+    windows.createMainWindow()
   })
 
   app.on('window-all-closed', function () {
@@ -88,7 +84,7 @@ function onOpen (e, torrentId) {
     // confirmation dialog Chrome shows causes Chrome to steal back the focus.
     // Electron issue: https://github.com/atom/electron/issues/4338
     setTimeout(function () {
-      windows.focusMainWindow()
+      windows.focusWindow(windows.main)
     }, 100)
   } else {
     argv.push(torrentId)
@@ -100,7 +96,7 @@ function onAppOpen (newArgv) {
 
   if (app.ipcReady) {
     log('Second app instance opened, but was prevented:', newArgv)
-    windows.focusMainWindow()
+    windows.focusWindow(windows.main)
 
     processArgv(newArgv)
   } else {

main/menu.js

@@ -300,12 +300,12 @@ function getAppMenuTemplate () {
   ]
 
   if (process.platform === 'darwin') {
-    var name = app.getName()
+    // WebTorrent menu (OS X)
     template.unshift({
-      label: name,
+      label: config.APP_NAME,
       submenu: [
         {
-          label: 'About ' + name,
+          label: 'About ' + config.APP_NAME,
           role: 'about'
         },
         {
@@ -320,7 +320,7 @@ function getAppMenuTemplate () {
           type: 'separator'
         },
         {
-          label: 'Hide ' + name,
+          label: 'Hide ' + config.APP_NAME,
           accelerator: 'Command+H',
           role: 'hide'
         },
@@ -339,12 +339,12 @@ function getAppMenuTemplate () {
         {
           label: 'Quit',
           accelerator: 'Command+Q',
-          click: function () { app.quit() }
+          click: () => app.quit()
         }
       ]
     })
 
-    // Window menu
+    // Window menu (OS X)
     template[4].submenu.push(
       {
         type: 'separator'
@@ -354,6 +354,17 @@ function getAppMenuTemplate () {
         role: 'front'
       }
     )
+  } else {
+    // Help menu (Windows, Linux)
+    template[4].submenu.push(
+      {
+        type: 'separator'
+      },
+      {
+        label: 'About ' + config.APP_NAME,
+        click: windows.createAboutWindow
+      }
+    )
   }
 
   return template

main/windows.js

@@ -1,7 +1,9 @@
 var windows = module.exports = {
+  about: null,
   main: null,
+  createAboutWindow: createAboutWindow,
   createMainWindow: createMainWindow,
-  focusMainWindow: focusMainWindow
+  focusWindow: focusWindow
 }
 
 var electron = require('electron')
@@ -11,7 +13,42 @@ var app = electron.app
 var config = require('../config')
 var menu = require('./menu')
 
+function createAboutWindow () {
+  if (windows.about) {
+    return focusWindow(windows.about)
+  }
+  var win = windows.about = new electron.BrowserWindow({
+    backgroundColor: '#ECECEC',
+    show: false,
+    center: true,
+    resizable: false,
+    icon: config.APP_ICON + '.png',
+    title: process.platform !== 'darwin'
+      ? 'About ' + config.APP_WINDOW_TITLE
+      : '',
+    useContentSize: true, // Specify web page size without OS chrome
+    width: 290,
+    height: 160,
+    minimizable: false,
+    maximizable: false,
+    fullscreen: false,
+    skipTaskbar: true
+  })
+  win.loadURL(config.WINDOW_ABOUT)
+
+  win.webContents.on('did-finish-load', function () {
+    win.show()
+  })
+
+  win.once('closed', function () {
+    windows.about = null
+  })
+}
+
 function createMainWindow () {
+  if (windows.main) {
+    return focusWindow(windows.main)
+  }
   var win = windows.main = new electron.BrowserWindow({
     backgroundColor: '#282828',
     darkTheme: true, // Forces dark theme (GTK+3)
@@ -25,7 +62,7 @@ function createMainWindow () {
     width: 450,
     height: 38 + (120 * 4) // header height + 4 torrents
   })
-  win.loadURL(config.INDEX)
+  win.loadURL(config.WINDOW_MAIN)
 
   win.webContents.on('dom-ready', function () {
     menu.onToggleFullScreen()
@@ -54,9 +91,9 @@ function createMainWindow () {
   })
 }
 
-function focusMainWindow () {
-  if (windows.main.isMinimized()) {
-    windows.main.restore()
+function focusWindow (win) {
+  if (win.isMinimized()) {
+    win.restore()
   }
-  windows.main.show() // shows and gives focus
+  win.show() // shows and gives focus
 }

renderer/about.html

@@ -0,0 +1,31 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <style>
+      body {
+        background-color: #ECECEC;
+        font-family: BlinkMacSystemFont, 'Helvetica Neue', Helvetica, sans-serif;
+        text-align: center;
+        overflow: hidden;
+      }
+      img {
+        width: 65px;
+        height: 65px;
+      }
+      h1 {
+        font-size: 14px;
+      }
+      p {
+        font-size: 10px;
+      }
+    </style>
+  </head>
+  <body>
+    <img src="../static/WebTorrent.png">
+    <h1>WebTorrent</h1>
+    <p>Version <script>document.write(require('../package.json').version)</script></p>
+    <p><script>document.write(require('../config').APP_COPYRIGHT)</script></p>
+  </body>
+</html>