feat: menu bar tray speedometer #643

.electron-vue/webpack.renderer.config.js

@@ -32,6 +32,13 @@ let rendererConfig = {
   ],
   module: {
     rules: [
+      {
+        test: /\.worker\.js$/,
+        use: {
+          loader: 'worker-loader',
+          options: { name: '[name].js' }
+        }
+      },
       {
         test: /\.(js|vue)$/,
         enforce: 'pre',
@@ -194,7 +201,8 @@ let rendererConfig = {
   output: {
     filename: '[name].js',
     libraryTarget: 'commonjs2',
-    path: path.join(__dirname, '../dist/electron')
+    path: path.join(__dirname, '../dist/electron'),
+    globalObject: 'this'
   },
   resolve: {
     alias: {

.electron-vue/webpack.web.config.js

@@ -32,6 +32,13 @@ let webConfig = {
   ],
   module: {
     rules: [
+      {
+        test: /\.worker\.js$/,
+        use: {
+          loader: 'worker-loader',
+          options: { name: '[name].js' }
+        }
+      },
       {
         test: /\.(js|vue)$/,
         enforce: 'pre',
@@ -181,7 +188,8 @@ let webConfig = {
   ],
   output: {
     filename: '[name].js',
-    path: path.join(__dirname, '../dist/web')
+    path: path.join(__dirname, '../dist/web'),
+    globalObject: 'this'
   },
   resolve: {
     alias: {

package.json

@@ -181,61 +181,61 @@
     ]
   },
   "dependencies": {
-    "@babel/runtime": "^7.10.2",
+    "@babel/runtime": "^7.10.3",
+    "@motrix/nat-api": "^0.3.1",
     "@panter/vue-i18next": "^0.15.2",
     "aria2": "^4.1.0",
     "axios": "^0.19.2",
     "blob-util": "^2.0.2",
     "clipboard-polyfill": "^2.8.6",
     "electron-debug": "^3.1.0",
     "electron-is": "^3.0.0",
-    "electron-log": "^4.2.1",
-    "electron-store": "^5.1.1",
+    "electron-log": "^4.2.2",
+    "electron-store": "^5.2.0",
     "electron-updater": "^4.3.1",
     "element-ui": "^2.13.2",
     "forever-monitor": "3.0.0",
-    "i18next": "^19.4.5",
+    "i18next": "^19.5.0",
     "lodash": "^4.17.15",
-    "@motrix/nat-api": "^0.3.1",
     "node-fetch": "^2.6.0",
     "normalize.css": "^8.0.1",
     "parse-torrent": "^7.1.3",
     "randomatic": "^3.1.1",
     "svg-innerhtml": "^1.1.0",
     "vue": "^2.6.11",
     "vue-electron": "^1.0.6",
-    "vue-router": "^3.3.2",
+    "vue-router": "^3.3.4",
     "vuex": "^3.4.0",
     "vuex-router-sync": "^5.0.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.10.2",
+    "@babel/core": "^7.10.3",
     "@babel/plugin-proposal-class-properties": "^7.10.1",
-    "@babel/plugin-transform-runtime": "^7.10.1",
-    "@babel/preset-env": "^7.10.2",
-    "@babel/register": "^7.10.1",
+    "@babel/plugin-transform-runtime": "^7.10.3",
+    "@babel/preset-env": "^7.10.3",
+    "@babel/register": "^7.10.3",
     "@vue/eslint-config-standard": "^5.1.2",
     "ajv": "^6.12.2",
     "babel-eslint": "^10.1.0",
     "babel-loader": "^8.1.0",
     "babel-plugin-component": "^1.1.1",
-    "cfonts": "^2.8.2",
-    "chalk": "^4.0.0",
+    "cfonts": "^2.8.5",
+    "chalk": "^4.1.0",
     "copy-webpack-plugin": "^6.0.2",
     "cross-env": "^7.0.2",
-    "css-loader": "^3.5.3",
+    "css-loader": "^3.6.0",
     "del": "^5.1.0",
     "devtron": "^1.4.0",
-    "electron": "^8.3.1",
+    "electron": "^9.0.4",
     "electron-builder": "^22.7.0",
     "electron-builder-notarize": "^1.1.2",
     "electron-devtools-installer": "^3.0.0",
-    "electron-notarize": "^0.3.0",
-    "electron-osx-sign": "^0.4.16",
-    "eslint": "^7.1.0",
+    "electron-notarize": "^1.0.0",
+    "electron-osx-sign": "^0.4.17",
+    "eslint": "^7.3.0",
     "eslint-friendly-formatter": "^4.0.1",
     "eslint-loader": "^4.0.2",
-    "eslint-plugin-import": "^2.20.2",
+    "eslint-plugin-import": "^2.21.2",
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-promise": "^4.2.1",
     "eslint-plugin-standard": "^4.0.1",
@@ -249,15 +249,16 @@
     "sass": "^1.26.8",
     "sass-loader": "^8.0.2",
     "style-loader": "^1.2.1",
-    "terser-webpack-plugin": "^3.0.3",
+    "terser-webpack-plugin": "^3.0.6",
     "url-loader": "^4.1.0",
     "vue-loader": "^15.9.2",
     "vue-style-loader": "^4.1.2",
     "vue-template-compiler": "^2.6.11",
     "webpack": "^4.43.0",
-    "webpack-cli": "^3.3.11",
+    "webpack-cli": "^3.3.12",
     "webpack-dev-server": "^3.11.0",
     "webpack-hot-middleware": "^2.25.0",
-    "webpack-merge": "^4.2.2"
+    "webpack-merge": "^4.2.2",
+    "worker-loader": "^2.0.0"
   }
 }

src/main/Application.js

@@ -78,6 +78,8 @@ export default class Application extends EventEmitter {
 
     this.handleIpcMessages()
 
+    this.handleIpcInvokes()
+
     this.emit('application:initialized')
   }
 
@@ -143,7 +145,34 @@ export default class Application extends EventEmitter {
 
   initTrayManager () {
     this.trayManager = new TrayManager({
-      theme: this.configManager.getUserConfig('tray-theme')
+      theme: this.configManager.getUserConfig('tray-theme'),
+      systemTheme: this.themeManager.getSystemTheme(),
+      speedometer: this.configManager.getUserConfig('tray-speedometer')
+    })
+
+    this.watchTraySpeedometerEnabledChange()
+
+    this.trayManager.on('mouse-down', ({ focused }) => {
+      this.sendCommandToAll('application:update-tray-focused', { focused })
+    })
+
+    this.trayManager.on('mouse-up', ({ focused }) => {
+      this.sendCommandToAll('application:update-tray-focused', { focused })
+    })
+
+    this.trayManager.on('drop-files', (files = []) => {
+      this.handleFile(files[0])
+    })
+
+    this.trayManager.on('drop-text', (text) => {
+      this.handleProtocol(text)
+    })
+  }
+
+  watchTraySpeedometerEnabledChange () {
+    this.configManager.userConfig.onDidChange('tray-speedometer', async (newValue, oldValue) => {
+      logger.info('[Motrix] detected tray speedometer value change event:', newValue, oldValue)
+      this.trayManager.handleSpeedometerEnableChange(newValue)
     })
   }
 
@@ -156,12 +185,12 @@ export default class Application extends EventEmitter {
   initUPnPManager () {
     this.upnp = new UPnPManager()
 
-    this.watchEnableUPnPChange()
+    this.watchUPnPEnabledChange()
 
-    this.watchPortsChange()
+    this.watchUPnPPortsChange()
 
-    const enable = this.configManager.getUserConfig('enable-upnp')
-    if (!enable) {
+    const enabled = this.configManager.getUserConfig('enable-upnp')
+    if (!enabled) {
       return
     }
 
@@ -198,7 +227,7 @@ export default class Application extends EventEmitter {
     }
   }
 
-  watchPortsChange () {
+  watchUPnPPortsChange () {
     const watchKeys = ['listen-port', 'dht-listen-port']
 
     watchKeys.map((key) => {
@@ -222,7 +251,7 @@ export default class Application extends EventEmitter {
     })
   }
 
-  watchEnableUPnPChange () {
+  watchUPnPEnabledChange () {
     this.configManager.userConfig.onDidChange('enable-upnp', async (newValue, oldValue) => {
       logger.info('[Motrix] detected enable-upnp value change event:', newValue, oldValue)
       if (newValue) {
@@ -409,7 +438,7 @@ export default class Application extends EventEmitter {
   initThemeManager () {
     this.themeManager = new ThemeManager()
     this.themeManager.on('system-theme-change', (theme) => {
-      this.trayManager.changeIconTheme(theme)
+      this.trayManager.handleSystemThemeChange(theme)
       this.sendCommandToAll('application:update-system-theme', { theme })
     })
   }
@@ -465,10 +494,10 @@ export default class Application extends EventEmitter {
       return
     }
 
-    const enable = this.configManager.getUserConfig('auto-check-update')
+    const enabled = this.configManager.getUserConfig('auto-check-update')
     const lastTime = this.configManager.getUserConfig('last-check-update-time')
     this.updateManager = new UpdateManager({
-      autoCheck: checkIsNeedRun(enable, lastTime, AUTO_CHECK_UPDATE_INTERVAL)
+      autoCheck: checkIsNeedRun(enabled, lastTime, AUTO_CHECK_UPDATE_INTERVAL)
     })
     this.handleUpdaterEvents()
   }
@@ -531,6 +560,10 @@ export default class Application extends EventEmitter {
   handleCommands () {
     this.on('application:save-preference', this.savePreference)
 
+    this.on('application:update-tray', (tray) => {
+      this.trayManager.updateTrayByImage(tray)
+    })
+
     this.on('application:relaunch', () => {
       this.relaunch()
     })
@@ -576,8 +609,8 @@ export default class Application extends EventEmitter {
     this.on('application:change-locale', (locale) => {
       this.localeManager.changeLanguageByLocale(locale)
         .then(() => {
-          this.trayManager.setup(locale)
           this.menuManager.handleLocaleChange(locale)
+          this.trayManager.handleLocaleChange(locale)
         })
     })
 
@@ -673,16 +706,17 @@ export default class Application extends EventEmitter {
     this.configManager.systemConfig.onDidAnyChange(() => this.handleConfigChange('system'))
 
     this.on('download-status-change', (downloading) => {
-      this.trayManager.updateTrayByStatus(downloading)
+      this.trayManager.handleDownloadStatusChange(downloading)
       if (downloading) {
         this.energyManager.startPowerSaveBlocker()
       } else {
         this.energyManager.stopPowerSaveBlocker()
       }
     })
 
-    this.on('download-speed-change', (speed) => {
-      this.dockManager.setBadge(speed)
+    this.on('speed-change', (speed) => {
+      this.dockManager.handleSpeedChange(speed)
+      this.trayManager.handleSpeedChange(speed)
     })
 
     this.on('task-download-complete', (task, path) => {
@@ -701,4 +735,17 @@ export default class Application extends EventEmitter {
       this.emit(eventName, ...args)
     })
   }
+
+  handleIpcInvokes () {
+    ipcMain.handle('get-app-config', async () => {
+      const systemConfig = this.configManager.getSystemConfig()
+      const userConfig = this.configManager.getUserConfig()
+
+      const result = {
+        ...systemConfig,
+        ...userConfig
+      }
+      return result
+    })
+  }
 }

src/main/core/ConfigManager.js

@@ -117,6 +117,7 @@ export default class ConfigManager {
           NGOSANG_TRACKERS_BEST_URL
         ],
         'tray-theme': APP_THEME.AUTO,
+        'tray-speedometer': is.macOS(),
         'update-channel': 'latest',
         'use-proxy': false,
         'window-state': {}

src/main/ui/DockManager.js

@@ -2,6 +2,8 @@ import is from 'electron-is'
 import { EventEmitter } from 'events'
 import { app } from 'electron'
 
+import { bytesToSize } from '@shared/utils'
+
 import {
   APP_RUN_MODE
 } from '@shared/constants'
@@ -38,6 +40,12 @@ export default class DockManager extends EventEmitter {
     app.dock.setBadge(text)
   } : (text) => {}
 
+  handleSpeedChange = isMac ? (speed) => {
+    const { downloadSpeed } = speed
+    const text = downloadSpeed > 0 ? `${bytesToSize(downloadSpeed)}/s` : ''
+    this.setBadge(text)
+  } : (text) => {}
+
   openDock = isMac ? (path) => {
     app.dock.downloadFinished(path)
   } : (path) => {}