chore: upgrade electron-builder

refactor: redesigned the lab page

.babelrc

@@ -2,19 +2,11 @@
   "comments": false,
   "env": {
     "main": {
-      "presets": [
-        ["env", {
-          "targets": { "node": 7 }
-        }],
-        "stage-0"
-      ]
+      "presets": ["@babel/preset-env"]
     },
     "renderer": {
       "presets": [
-        ["env", {
-          "modules": false
-        }],
-        "stage-0"
+        "@babel/preset-env"
       ],
       "plugins": [
         [
@@ -27,12 +19,7 @@
       ]
     },
     "web": {
-      "presets": [
-        ["env", {
-          "modules": false
-        }],
-        "stage-0"
-      ],
+      "presets": ["@babel/preset-env"],
       "plugins": [
         [
           "component",
@@ -44,5 +31,8 @@
       ]
     }
   },
-  "plugins": ["transform-runtime"]
+  "plugins": [
+    "@babel/plugin-proposal-class-properties",
+    "@babel/plugin-transform-runtime"
+  ]
 }

.electron-vue/build.js

@@ -19,9 +19,13 @@ const errorLog = chalk.bgRed.white(' ERROR ') + ' '
 const okayLog = chalk.bgBlue.white(' OKAY ') + ' '
 const isCI = process.env.CI || false
 
-if (process.env.BUILD_TARGET === 'clean') clean()
-else if (process.env.BUILD_TARGET === 'web') web()
-else build()
+if (process.env.BUILD_TARGET === 'clean') {
+  clean()
+} else if (process.env.BUILD_TARGET === 'web') {
+  web()
+} else {
+  build()
+}
 
 function clean () {
   del.sync(['build/*', '!build/icons', '!build/icons/icon.*'])
@@ -74,8 +78,9 @@ function pack (config) {
   return new Promise((resolve, reject) => {
     config.mode = 'production'
     webpack(config, (err, stats) => {
-      if (err) reject(err.stack || err)
-      else if (stats.hasErrors()) {
+      if (err) {
+        reject(err.stack || err)
+      } else if (stats.hasErrors()) {
         let err = ''
 
         stats.toString({
@@ -129,4 +134,4 @@ function greeting () {
     })
   } else console.log(chalk.yellow.bold('\n  lets-build'))
   console.log()
-}
+}

.electron-vue/dev-runner.js

@@ -8,6 +8,7 @@ const { spawn } = require('child_process')
 const webpack = require('webpack')
 const WebpackDevServer = require('webpack-dev-server')
 const webpackHotMiddleware = require('webpack-hot-middleware')
+const HtmlWebpackPlugin = require('html-webpack-plugin');
 
 const mainConfig = require('./webpack.main.config')
 const rendererConfig = require('./webpack.renderer.config')
@@ -49,7 +50,7 @@ function startRenderer () {
     })
 
     compiler.hooks.compilation.tap('compilation', compilation => {
-      compilation.hooks.htmlWebpackPluginAfterEmit.tapAsync('html-webpack-plugin-after-emit', (data, cb) => {
+      HtmlWebpackPlugin.getHooks(compilation).afterEmit.tapAsync('html-webpack-plugin-after-emit', (data, cb) => {
         hotMiddleware.publish({ action: 'reload' })
         cb()
       })

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

@@ -6,8 +6,7 @@ const devMode = process.env.NODE_ENV !== 'production'
 const path = require('path')
 const { dependencies, build } = require('../package.json')
 const webpack = require('webpack')
-
-const BabiliWebpackPlugin = require('babili-webpack-plugin')
+const TerserPlugin = require('terser-webpack-plugin');
 
 let mainConfig = {
   entry: {
@@ -59,7 +58,15 @@ let mainConfig = {
     },
     extensions: ['.js', '.json', '.node']
   },
-  target: 'electron-main'
+  target: 'electron-main',
+  optimization: {
+    minimize: !devMode,
+    minimizer: [
+      new TerserPlugin({
+        extractComments: false,
+      })
+    ],
+  },
 }
 
 /**
@@ -79,7 +86,6 @@ if (devMode) {
  */
 if (!devMode) {
   mainConfig.plugins.push(
-    new BabiliWebpackPlugin(),
     new webpack.DefinePlugin({
       'process.env.NODE_ENV': '"production"',
       'appId': `"${build.appId}"`

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

@@ -6,8 +6,7 @@ const devMode = process.env.NODE_ENV !== 'production'
 const path = require('path')
 const { dependencies } = require('../package.json')
 const webpack = require('webpack')
-
-const BabiliWebpackPlugin = require('babili-webpack-plugin')
+const TerserPlugin = require('terser-webpack-plugin');
 const CopyWebpackPlugin = require('copy-webpack-plugin')
 const MiniCssExtractPlugin = require('mini-css-extract-plugin')
 const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
@@ -52,8 +51,11 @@ let rendererConfig = {
           {
             loader: 'sass-loader',
             options: {
-              data: '@import "@/components/Theme/Variables.scss";',
-              includePaths:[__dirname, 'src']
+              implementation: require('sass'),
+              prependData: '@import "@/components/Theme/Variables.scss";',
+              sassOptions: {
+                includePaths:[__dirname, 'src']
+              }
             },
           }
         ]
@@ -66,9 +68,12 @@ let rendererConfig = {
           {
             loader: 'sass-loader',
             options: {
+              implementation: require('sass'),
               indentedSyntax: true,
-              data: '@import "@/components/Theme/Variables.scss";',
-              includePaths:[__dirname, 'src']
+              prependData: '@import "@/components/Theme/Variables.scss";',
+              sassOptions: {
+                includePaths:[__dirname, 'src']
+              }
             },
           }
         ]
@@ -166,6 +171,18 @@ let rendererConfig = {
       filename: 'index.html',
       chunks: ['index'],
       template: path.resolve(__dirname, '../src/index.ejs'),
+      templateParameters(compilation, assets, options) {
+        return {
+          compilation: compilation,
+          webpack: compilation.getStats().toJson(),
+          webpackConfig: compilation.options,
+          htmlWebpackPlugin: {
+            files: assets,
+            options: options
+          },
+          process
+        }
+      },
       // minify: {
       //   collapseWhitespace: true,
       //   removeAttributeQuotes: true,
@@ -191,7 +208,15 @@ let rendererConfig = {
     },
     extensions: ['.js', '.vue', '.json', '.css', '.node']
   },
-  target: 'electron-renderer'
+  target: 'electron-renderer',
+  optimization: {
+    minimize: !devMode,
+    minimizer: [
+      new TerserPlugin({
+        extractComments: false,
+      })
+    ],
+  },
 }
 
 /**
@@ -212,7 +237,6 @@ if (!devMode) {
   rendererConfig.devtool = ''
 
   rendererConfig.plugins.push(
-    new BabiliWebpackPlugin(),
     new CopyWebpackPlugin([
       {
         from: path.join(__dirname, '../static'),

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

@@ -6,8 +6,7 @@ const devMode = process.env.NODE_ENV !== 'production'
 const path = require('path')
 const { dependencies } = require('../package.json')
 const webpack = require('webpack')
-
-const BabiliWebpackPlugin = require('babili-webpack-plugin')
+const TerserPlugin = require('terser-webpack-plugin');
 const CopyWebpackPlugin = require('copy-webpack-plugin')
 const MiniCssExtractPlugin = require('mini-css-extract-plugin')
 const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
@@ -49,7 +48,16 @@ let webConfig = {
         use: [
           devMode ? 'vue-style-loader' : MiniCssExtractPlugin.loader,
           'css-loader',
-          'sass-loader'
+          {
+            loader: 'sass-loader',
+            options: {
+              implementation: require('sass'),
+              prependData: '@import "@/components/Theme/Variables.scss";',
+              sassOptions: {
+                includePaths:[__dirname, 'src']
+              }
+            },
+          }
         ]
       },
       {
@@ -57,7 +65,17 @@ let webConfig = {
         use: [
           devMode ? 'vue-style-loader' : MiniCssExtractPlugin.loader,
           'css-loader',
-          'sass-loader?indentedSyntax'
+          {
+            loader: 'sass-loader',
+            options: {
+              implementation: require('sass'),
+              indentedSyntax: true,
+              prependData: '@import "@/components/Theme/Variables.scss";',
+              sassOptions: {
+                includePaths:[__dirname, 'src']
+              }
+            },
+          }
         ]
       },
       {
@@ -134,6 +152,18 @@ let webConfig = {
       filename: 'index.html',
       chunks: ['index'],
       template: path.resolve(__dirname, '../src/index.ejs'),
+      templateParameters(compilation, assets, options) {
+        return {
+          compilation: compilation,
+          webpack: compilation.getStats().toJson(),
+          webpackConfig: compilation.options,
+          htmlWebpackPlugin: {
+            files: assets,
+            options: options
+          },
+          process
+        }
+      },
       // minify: {
       //   collapseWhitespace: true,
       //   removeAttributeQuotes: true,
@@ -161,7 +191,15 @@ let webConfig = {
     },
     extensions: ['.js', '.vue', '.json', '.css']
   },
-  target: 'web'
+  target: 'web',
+  optimization: {
+    minimize: !devMode,
+    minimizer: [
+      new TerserPlugin({
+        extractComments: false,
+      })
+    ],
+  },
 }
 
 /**
@@ -171,7 +209,6 @@ if (!devMode) {
   webConfig.devtool = ''
 
   webConfig.plugins.push(
-    new BabiliWebpackPlugin(),
     new CopyWebpackPlugin([
       {
         from: path.join(__dirname, '../static'),

.eslintignore

@@ -0,0 +1,7 @@
+src/renderer/components/Icons/*.js
+
+src/shared/locales/*
+!src/shared/locales/all.js
+!src/shared/locales/app.js
+!src/shared/locales/index.js
+!src/shared/locales/LocalManager.js

.eslintrc.js

@@ -1,27 +1,34 @@
 module.exports = {
   root: true,
-  parser: 'babel-eslint',
-  parserOptions: {
-    sourceType: 'module'
-  },
   env: {
     browser: true,
     node: true
   },
-  extends: 'standard',
+  extends: [
+    'plugin:vue/essential',
+    '@vue/standard'
+  ],
+  parserOptions: {
+    parser: 'babel-eslint'
+  },
   globals: {
     appId: true,
     __static: true
   },
-  plugins: [
-    'html'
-  ],
-  'rules': {
-    // allow paren-less arrow functions
-    'arrow-parens': 0,
-    // allow async-await
-    'generator-star-spacing': 0,
-    // allow debugger during development
-    'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0
-  }
-}
+  rules: {
+    'no-console': 'off',
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+    'indent': ['error', 2],
+    'vue/script-indent': ['error', 2, {
+      'baseIndent': 1
+    }],
+  },
+  overrides: [
+    {
+      'files': ['*.vue'],
+      'rules': {
+        'indent': 'off'
+      }
+    }
+  ]
+};

.github/ISSUE_TEMPLATE/bug_report.md

@@ -11,6 +11,7 @@ assignees: ''
 Before you feedback, please search for the issues to see if there are similar problems that can solve your problem.
 
 **Please delete the above and the contents of this line, then fill in the feedback form in the following format, Thanks.**
+<!-- Windows and Linux versions hide the application menu by default. Please use the keyboard shortcut "Ctrl+Shift+I" to open "Developer Tools" -->
 
 **Describe the bug**
 A clear and concise description of what the bug is.

.github/ISSUE_TEMPLATE/bug_report_cn.md

@@ -6,12 +6,14 @@ labels: ''
 assignees: ''
 
 ---
-**反馈之前**
+
+<!--
 反馈之前请搜索一下已有 issues 和 帮助文档，看是否有类似问题可以解决你的问题
 https://github.com/agalwood/Motrix/issues
 http://motrix.app/support
 
-**请删除上面和本行的内容，然后按以下格式填写反馈信息，谢谢**
+按以下格式填写反馈信息，谢谢
+-->
 
 **错误描述**
 清楚简洁地描述错误，方便我们复现之后处理。
@@ -24,11 +26,12 @@ http://motrix.app/support
 4. 发现报错
 
 **预期的行为**
-清楚简洁地描述您期望发生的事情。
+清楚简洁地描述你期望发生的事情。
 
 **截图**
-请添加屏幕截图以帮助解释您的问题：
+请添加屏幕截图以帮助解释你的问题：
 打开应用菜单中的「帮助」——「开发者工具」—— 切换到 console，然后**完整**截图。
+<!-- Windows 和 Linux 版本默认隐藏了应用菜单，请使用键盘快捷键 Ctrl+Shift+I 打开「开发者工具」 -->
 
 **运行环境**
  - 操作系统类型： [如 macOS, Windows, Linux]
@@ -37,4 +40,4 @@ http://motrix.app/support
  - 安装包类型：[如 dmg, AppImage]
 
 **更多信息**
-添加有关此问题的任何其他上下文信息。
+补充有关该问题的其他信息。

.github/ISSUE_TEMPLATE/feature_request_cn.md

@@ -0,0 +1,28 @@
+---
+name: 新功能请求
+about: 你期望 Motrix 未来添加的新功能
+title: ''
+labels: enhancement ✨
+assignees: ''
+
+---
+
+<!--
+反馈之前请搜索一下已有 issues 和 帮助文档，看是否已经有人提交了类似的新功能请求
+https://github.com/agalwood/Motrix/issues
+http://motrix.app/support
+
+按以下格式填写反馈信息，谢谢
+-->
+
+**请描述一下你的新功能请求是否与已知问题有关？**
+简明扼要地描述了问题所在。
+
+**描述你想要的解决方案**
+简明扼要地描述你想要的解决方案。
+
+**描述你考虑过的替代方案**
+简明扼要地描述你考虑过的任何替代解决方案或功能。
+
+**更多信息**
+补充有关该新功能的其他信息。

.github/PULL_REQUEST_TEMPLATE.md

@@ -0,0 +1,16 @@
+<!-- You can erase any parts of this template not applicable to your Pull Request. -->
+
+## Description
+<!-- Write a brief description of the changes introduced by this PR -->
+
+## Related Issues
+<!--
+  Link to the issue that is fixed by this PR (if there is one)
+  e.g. Fixes #1234, Addresses #1234, Related to #1234, etc.
+-->
+
+### Checklist:
+
+* [ ] Have you checked to ensure there aren't other open [Pull Requests](../../../pulls) for the same update/change?
+* [ ] Have you linted your code locally prior to submission?
+* [ ] Have you successfully ran app with your changes locally?

.github/lock.yml

@@ -1,7 +1,7 @@
 # Configuration for Lock Threads - https://github.com/dessant/lock-threads
 
 # Number of days of inactivity before a closed issue or pull request is locked
-daysUntilLock: 30
+daysUntilLock: 60
 
 # Skip issues and pull requests created before a given timestamp. Timestamp must
 # follow ISO 8601 (`YYYY-MM-DD`). Set to `false` to disable

.github/workflows/release.yml

@@ -0,0 +1,60 @@
+name: Build/release
+
+on:
+  push:
+    branches: [ master ]
+  pull_request:
+    branches: [ master ]
+
+jobs:
+  release:
+    runs-on: ${{ matrix.os }}
+
+    # Platforms to build on/for
+    strategy:
+      matrix:
+        os: [macos-latest, ubuntu-latest, windows-latest]
+
+    steps:
+      - name: Check out Git repository
+        uses: actions/checkout@v2
+
+      - name: Install Node.js, NPM and Yarn
+        uses: actions/setup-node@v1
+        with:
+          node-version: 12
+
+      - name: Install Snapcraft
+        uses: samuelmeuli/action-snapcraft@v1
+        # Only install Snapcraft on Ubuntu
+        if: startsWith(matrix.os, 'ubuntu')
+        with:
+          # Log in to Snap Store
+          snapcraft_token: ${{ secrets.snapcraft_token }}
+
+      - name: Prepare for app notarization (macOS)
+        if: startsWith(matrix.os, 'macos')
+        # Import Apple API key for app notarization on macOS
+        run: |
+          mkdir -p ~/private_keys/
+          echo '${{ secrets.api_key }}' > ~/private_keys/AuthKey_${{ secrets.api_key_id }}.p8
+
+      - name: Build/release Electron app
+        uses: samuelmeuli/action-electron-builder@v1
+        with:
+          build_script_name: 'build:github'
+          # GitHub token, automatically provided to the action
+          # (No need to define this secret in the repo settings)
+          github_token: ${{ secrets.github_token }}
+
+          # macOS code signing certificate
+          mac_certs: ${{ secrets.mac_certs }}
+          mac_certs_password: ${{ secrets.mac_certs_password }}
+
+          # If the commit is tagged with a version (e.g. "v1.0.0"),
+          # release the app after building
+          release: ${{ startsWith(github.ref, 'refs/tags/v') }}
+        env:
+          # macOS notarization API key
+          API_KEY_ID: ${{ secrets.api_key_id }}
+          API_KEY_ISSUER_ID: ${{ secrets.api_key_issuer_id }}

.travis.yml

@@ -1,32 +1,44 @@
-osx_image: xcode10.1
 sudo: required
 dist: trusty
+
 language: c
-matrix:
+
+jobs:
   include:
   - os: osx
+    osx_image: xcode11.3
   - os: linux
     env: CC=clang CXX=clang++ npm_config_clang=1
     compiler: clang
+
 cache:
   directories:
   - node_modules
-  - "$HOME/.electron"
-  - "$HOME/.cache"
+  - $HOME/.cache/electron
+  - $HOME/.cache/electron-builder
+
 addons:
   apt:
     packages:
     - libgnome-keyring-dev
     - icnsutils
+    - rpm
+
 before_install:
 - if [[ "$TRAVIS_OS_NAME" == "linux" ]]; then sudo apt-get install --no-install-recommends -y icnsutils graphicsmagick xz-utils; fi
+
 install:
-- nvm install 10
+- nvm install 12.14.1
 - source ~/.bashrc
 - npm install -g xvfb-maybe
 - npm install
+
 script:
 - npm run release
+
+before_cache:
+  - rm -rf $HOME/.cache/electron-builder/wine
+
 branches:
   only:
   - master

CODE_OF_CONDUCT.md

@@ -0,0 +1,76 @@
+# Contributor Covenant Code of Conduct
+
+## Our Pledge
+
+In the interest of fostering an open and welcoming environment, we as
+contributors and maintainers pledge to making participation in our project and
+our community a harassment-free experience for everyone, regardless of age, body
+size, disability, ethnicity, sex characteristics, gender identity and expression,
+level of experience, education, socio-economic status, nationality, personal
+appearance, race, religion, or sexual identity and orientation.
+
+## Our Standards
+
+Examples of behavior that contributes to creating a positive environment
+include:
+
+* Using welcoming and inclusive language
+* Being respectful of differing viewpoints and experiences
+* Gracefully accepting constructive criticism
+* Focusing on what is best for the community
+* Showing empathy towards other community members
+
+Examples of unacceptable behavior by participants include:
+
+* The use of sexualized language or imagery and unwelcome sexual attention or
+ advances
+* Trolling, insulting/derogatory comments, and personal or political attacks
+* Public or private harassment
+* Publishing others' private information, such as a physical or electronic
+ address, without explicit permission
+* Other conduct which could reasonably be considered inappropriate in a
+ professional setting
+
+## Our Responsibilities
+
+Project maintainers are responsible for clarifying the standards of acceptable
+behavior and are expected to take appropriate and fair corrective action in
+response to any instances of unacceptable behavior.
+
+Project maintainers have the right and responsibility to remove, edit, or
+reject comments, commits, code, wiki edits, issues, and other contributions
+that are not aligned to this Code of Conduct, or to ban temporarily or
+permanently any contributor for other behaviors that they deem inappropriate,
+threatening, offensive, or harmful.
+
+## Scope
+
+This Code of Conduct applies both within project spaces and in public spaces
+when an individual is representing the project or its community. Examples of
+representing a project or community include using an official project e-mail
+address, posting via an official social media account, or acting as an appointed
+representative at an online or offline event. Representation of a project may be
+further defined and clarified by project maintainers.
+
+## Enforcement
+
+Instances of abusive, harassing, or otherwise unacceptable behavior may be
+reported by contacting the project team at agalwood.net@gmail.com. All
+complaints will be reviewed and investigated and will result in a response that
+is deemed necessary and appropriate to the circumstances. The project team is
+obligated to maintain confidentiality with regard to the reporter of an incident.
+Further details of specific enforcement policies may be posted separately.
+
+Project maintainers who do not follow or enforce the Code of Conduct in good
+faith may face temporary or permanent repercussions as determined by other
+members of the project's leadership.
+
+## Attribution
+
+This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4,
+available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html
+
+[homepage]: https://www.contributor-covenant.org
+
+For answers to common questions about this code of conduct, see
+https://www.contributor-covenant.org/faq

CONTRIBUTING-CN.md

@@ -1,5 +1,7 @@
 # Motrix 贡献指南
 
+开始贡献之前，确保你已经理解了 [GitHub 的协作流程](https://guides.github.com/introduction/flow/)。
+
 ## 🌍 翻译指南
 
 首先你要确定一个语言的英文简写作为 **locale**，如 en-US，这个 locale 值请严格参考 [Electron 的 Locales 文档](https://electronjs.org/docs/api/locales)

CONTRIBUTING.md

@@ -1,5 +1,7 @@
 # Motrix Contributing Guide
 
+Before you start contributing, make sure you already understand [GitHub flow](https://guides.github.com/introduction/flow/).
+
 ## 🌍 Translation Guide
 
 First you need to determine the English abbreviation of a language as **locale**, such as en-US, this locale value should strictly refer to the [electron's documentation](https://electronjs.org/docs/api/locales).

LICENSE

@@ -1,4 +1,6 @@
-Copyright 2018 Dr_rOot
+The MIT License
+
+Copyright 2018-present Dr_rOot
 
 Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 

README-CN.md

@@ -8,11 +8,11 @@
 
 ## 一款全能的下载工具
 
-[![GitHub release](https://img.shields.io/github/release/agalwood/Motrix.svg)](https://github.com/agalwood/Motrix/releases) [![Build Status](https://travis-ci.org/agalwood/Motrix.svg?branch=master)](https://travis-ci.org/agalwood/Motrix) [![Build status](https://ci.appveyor.com/api/projects/status/l11d5h05xwwcvoux/branch/master?svg=true)](https://ci.appveyor.com/project/agalwood/motrix/branch/master) [![Total Downloads](https://img.shields.io/github/downloads/agalwood/Motrix/total.svg)](https://github.com/agalwood/Motrix/releases) ![Support Platforms](https://camo.githubusercontent.com/a50c47295f350646d08f2e1ccd797ceca3840e52/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f706c6174666f726d2d6d61634f5325323025374325323057696e646f77732532302537432532304c696e75782d6c69676874677265792e737667)
+[![GitHub release](https://img.shields.io/github/release/agalwood/Motrix.svg)](https://github.com/agalwood/Motrix/releases) ![Build/release](https://github.com/agalwood/Motrix/workflows/Build/release/badge.svg) [![Build Status](https://travis-ci.com/agalwood/Motrix.svg?branch=master)](https://travis-ci.com/agalwood/Motrix) [![Build status](https://ci.appveyor.com/api/projects/status/l11d5h05xwwcvoux/branch/master?svg=true)](https://ci.appveyor.com/project/agalwood/motrix/branch/master) [![Total Downloads](https://img.shields.io/github/downloads/agalwood/Motrix/total.svg)](https://github.com/agalwood/Motrix/releases) ![Support Platforms](https://camo.githubusercontent.com/a50c47295f350646d08f2e1ccd797ceca3840e52/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f706c6174666f726d2d6d61634f5325323025374325323057696e646f77732532302537432532304c696e75782d6c69676874677265792e737667)
 
 我是个兴趣使然的桌面应用开发者🤓，利用搬砖之余开发了 Motrix。
 
-Motrix 是一款全能的下载工具，支持下载 HTTP、FTP、BT、磁力链、百度网盘等资源。它的界面简洁易用，希望大家喜欢 👻。
+Motrix 是一款全能的下载工具，支持下载 HTTP、FTP、BT、磁力链、某盘等资源。它的界面简洁易用，希望大家喜欢 👻。
 
 ✈️ 去 [官网](https://motrix.app/zh-CN) 逛逛  |  📖 查看 [帮助手册](http://motrix.app/support/issues)
 
@@ -20,9 +20,20 @@ Motrix 是一款全能的下载工具，支持下载 HTTP、FTP、BT、磁力链
 
 [GitHub](https://github.com/agalwood/Motrix/releases) 和 [官网](https://motrix.app/zh-CN) 提供了已经编译好的稳定版安装包，当然你也可以自己克隆代码编译打包。
 
+### Windows
+
+建议使用安装包（Motrix-Setup-x.y.z.exe）安装 Motrix 以确保完整的体验，例如关联 torrent 文件，捕获磁力链等。
+
+如果你更喜欢便携版，你可以使用 [scoop](https://github.com/lukesampson/scoop)（需要 Windows 7+，天朝用户可能需要设置 Git 代理）安装最新便携版本的 Motrix。
+
+```bash
+scoop bucket add extras
+scoop install motrix
+```
+
 ### macOS
 
-更新：macOS 用户支持 `brew cask` 安装，感谢 [Mitscherlich](https://github.com/Mitscherlich) 的 [PR](https://github.com/Homebrew/homebrew-cask/pull/59494)。
+macOS 用户可以使用 `brew cask` 安装 Motrix，感谢 [Mitscherlich](https://github.com/Mitscherlich) 的 [PR](https://github.com/Homebrew/homebrew-cask/pull/59494)。
 
 ```bash
 brew update && brew cask install motrix
@@ -30,7 +41,7 @@ brew update && brew cask install motrix
 
 ### Linux
 
-您可以下载 AppImage（适用于所有Linux发行版）软件包或 snap 或从源代码构建。
+你可以下载 AppImage（适用于所有 Linux 发行版）软件包或 snap 或从源代码构建安装 Motrix。
 
 构建请阅读 **编译打包** 部分。
 
@@ -42,16 +53,20 @@ brew update && brew cask install motrix
 yay motrix
 ```
 
+Motrix 在 Linux 中首次启动可能需要使用 `sudo` 运行，因为可能没有创建下载会话文件的权限 (`/var/cache/aria2.session`)。
+
 ## ✨ 特性
 
 - 🕹 简洁明了的图形操作界面
 - 🦄 支持BT和磁力链任务
-- 💾 支持下载百度云盘资源
+- ☑️ 支持选择性下载BT部分文件
+- 💾 支持下载某盘资源
 - 🎛 最高支持 10 个任务同时下载
 - 🚀 单任务最高支持 64 线程下载
+- 🚥 设置上传/下载限速
 - 🕶 模拟用户代理UA
 - 🔔 下载完成后通知
-- 💻 支持触控栏快捷健 (Mac 专享)
+- 💻 支持触控栏快捷键 (Mac 专享)
 - 🤖 常驻系统托盘，操作更加便捷
 - 🌑 深色模式
 - 🗑 移除任务时可同时删除相关文件
@@ -85,6 +100,10 @@ export ELECTRON_MIRROR='https://npm.taobao.org/mirrors/electron/'
 export SASS_BINARY_SITE='https://npm.taobao.org/mirrors/node-sass'
 ```
 
+> Error: Electron failed to install correctly, please delete node_modules/electron and try installing again
+
+`Electron` 下载安装失败的问题，解决方式请参考 https://github.com/electron/electron/issues/8466#issuecomment-571425574
+
 如果喜欢 [Yarn](https://yarnpkg.com/)，也可以使用 `yarn` 安装依赖
 
 ### 开发模式
@@ -121,14 +140,17 @@ npm run build
 
 | Key   | Name                | Status       |
 |-------|:--------------------|:-------------|
-| de    | German              | ✔️ [@Schloemicher](https://github.com/Schloemicher) |
+| ca    | Català              | ✔️ [@marcizhu](https://github.com/marcizhu) |
+| de    | Deutsch             | ✔️ [@Schloemicher](https://github.com/Schloemicher) |
 | en-US | English             | ✔️           |
 | fa    | فارسی               | ✔️ [@Nima-Ra](https://github.com/Nima-Ra) |
 | fr    | Français            | ✔️ [@gpatarin](https://github.com/gpatarin) |
 | ja    | 日本語               | ✔️ [@hbkrkzk](https://github.com/hbkrkzk) |
 | ko    | 한국어                | ✔️ [@KOZ39](https://github.com/KOZ39) |
 | pt-BR | Portuguese (Brazil) | ✔️ [@andrenoberto](https://github.com/andrenoberto) |
+| ru    | Русский             | ✔️ [@bladeaweb](https://github.com/bladeaweb) |
 | tr    | Türkçe              | ✔️ [@abdullah](https://github.com/abdullah) |
+| uk    | Українська          | ✔️ [@bladeaweb](https://github.com/bladeaweb) |
 | zh-CN | 简体中文             | ✔️           |
 | zh-TW | 繁體中文             | ✔️ [@Yukaii](https://github.com/Yukaii) |
 

README.md

@@ -6,11 +6,11 @@
 
 ## A full-featured download manager
 
-[![GitHub release](https://img.shields.io/github/release/agalwood/Motrix.svg)](https://github.com/agalwood/Motrix/releases) [![Build Status](https://travis-ci.org/agalwood/Motrix.svg?branch=master)](https://travis-ci.org/agalwood/Motrix) [![Build status](https://ci.appveyor.com/api/projects/status/l11d5h05xwwcvoux/branch/master?svg=true)](https://ci.appveyor.com/project/agalwood/motrix/branch/master) [![Total Downloads](https://img.shields.io/github/downloads/agalwood/Motrix/total.svg)](https://github.com/agalwood/Motrix/releases) ![Support Platforms](https://camo.githubusercontent.com/a50c47295f350646d08f2e1ccd797ceca3840e52/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f706c6174666f726d2d6d61634f5325323025374325323057696e646f77732532302537432532304c696e75782d6c69676874677265792e737667)
+[![GitHub release](https://img.shields.io/github/release/agalwood/Motrix.svg)](https://github.com/agalwood/Motrix/releases) ![Build/release](https://github.com/agalwood/Motrix/workflows/Build/release/badge.svg) [![Build Status](https://travis-ci.com/agalwood/Motrix.svg?branch=master)](https://travis-ci.com/agalwood/Motrix) [![Build status](https://ci.appveyor.com/api/projects/status/l11d5h05xwwcvoux/branch/master?svg=true)](https://ci.appveyor.com/project/agalwood/motrix/branch/master) [![Total Downloads](https://img.shields.io/github/downloads/agalwood/Motrix/total.svg)](https://github.com/agalwood/Motrix/releases) ![Support Platforms](https://camo.githubusercontent.com/a50c47295f350646d08f2e1ccd797ceca3840e52/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f706c6174666f726d2d6d61634f5325323025374325323057696e646f77732532302537432532304c696e75782d6c69676874677265792e737667)
 
 English | [简体中文](./README-CN.md)
 
-Motrix is a full-featured download manager that supports downloading HTTP, FTP, BitTorrent, Magnet, Baidu Net Disk, etc.
+Motrix is a full-featured download manager that supports downloading HTTP, FTP, BitTorrent, Magnet, etc.
 
 Motrix has a clean and easy to use interface. I hope you will like it 👻.
 
@@ -20,9 +20,20 @@ Motrix has a clean and easy to use interface. I hope you will like it 👻.
 
 Download from [GitHub Releases](https://github.com/agalwood/Motrix/releases) and install it.
 
+### Windows
+
+It is recommended to install Motrix using the installation package (Motrix-Setup-x.y.z.exe) to ensure a complete experience, such as associating torrent files, capturing magnet links, etc.
+
+If you prefer the portable version, you can use [scoop](https://github.com/lukesampson/scoop) (need Windows 7+) to install Motrix.
+
+```bash
+scoop bucket add extras
+scoop install motrix
+```
+
 ### macOS
 
-Update: macOS user support `brew cask` installation, thanks to [PR](https://github.com/Homebrew/homebrew-cask/pull/59494) of [Mitscherlich](https://github.com/Mitscherlich).
+The macOS users can install Motrix using `brew cask`, thanks to [PR](https://github.com/Homebrew/homebrew-cask/pull/59494) of [Mitscherlich](https://github.com/Mitscherlich).
 
 ```bash
 brew update && brew cask install motrix
@@ -30,7 +41,7 @@ brew update && brew cask install motrix
 
 ### Linux
 
-You can download the AppImage(for all Linux distributions) package or snap or just build from source code.
+You can download the AppImage (for all Linux distributions) package or snap or just build from source code to install Motrix.
 
 Please read the **Build** section.
 
@@ -42,13 +53,17 @@ Run the following command to install:
 yay motrix
 ```
 
+Motrix may need to run with `sudo` for the first time in Linux because there is no permission to create the download session file (`/var/cache/aria2.session`).
+
 ## ✨ Features
 
 - 🕹 Simple and clear user interface
 - 🦄 Supports BitTorrent & Magnet
-- 💾 Supports downloading Baidu Net Disk
+- ☑️ BitTorrent selective download
+- 💾 Supports downloading BD Net Disk
 - 🎛 Up to 10 concurrent download tasks
 - 🚀 Supports 64 threads in a single task
+- 🚥 Supports speed limit
 - 🕶 Mock User-Agent
 - 🔔 Download completed Notification
 - 💻 Ready for Touch Bar (Mac only)
@@ -77,6 +92,10 @@ cd Motrix
 npm install
 ```
 
+> Error: Electron failed to install correctly, please delete node_modules/electron and try installing again
+
+`Electron` failed to install correctly, please refer to https://github.com/electron/electron/issues/8466#issuecomment-571425574
+
 If you like [Yarn](https://yarnpkg.com/), you can also use `yarn` to install dependencies.
 
 ### Dev Mode
@@ -113,14 +132,17 @@ Translations into versions for other languages are welcome 🧐! Please read the
 
 | Key   | Name                | Status       |
 |-------|:--------------------|:-------------|
-| de    | German              | ✔️ [@Schloemicher](https://github.com/Schloemicher) |
+| ca    | Català              | ✔️ [@marcizhu](https://github.com/marcizhu) |
+| de    | Deutsch             | ✔️ [@Schloemicher](https://github.com/Schloemicher) |
 | en-US | English             | ✔️           |
 | fa    | فارسی               | ✔️ [@Nima-Ra](https://github.com/Nima-Ra) |
 | fr    | Français            | ✔️ [@gpatarin](https://github.com/gpatarin) |
 | ja    | 日本語               | ✔️ [@hbkrkzk](https://github.com/hbkrkzk) |
 | ko    | 한국어                | ✔️ [@KOZ39](https://github.com/KOZ39) |
 | pt-BR | Portuguese (Brazil) | ✔️ [@andrenoberto](https://github.com/andrenoberto) |
+| ru    | Русский             | ✔️ [@bladeaweb](https://github.com/bladeaweb) |
 | tr    | Türkçe              | ✔️ [@abdullah](https://github.com/abdullah) |
+| uk    | Українська          | ✔️ [@bladeaweb](https://github.com/bladeaweb) |
 | zh-CN | 简体中文             | ✔️           |
 | zh-TW | 繁體中文             | ✔️ [@Yukaii](https://github.com/Yukaii) |
 

app-update.yml

@@ -1,2 +1,2 @@
 provider: generic
-url: 'https://motrix.app/release/'
+url: 'https://dl.motrix.app/release/'

appveyor.yml

@@ -1,24 +1,17 @@
-version: 1.0.{build}
-
-branches:
-  only:
-    - master
-
 image: Visual Studio 2017
+
 platform:
   - x64
 
 cache:
   - node_modules
-  - '%APPDATA%\npm-cache'
   - '%USERPROFILE%\.electron'
-  - '%USERPROFILE%\AppData\Local\Yarn\cache'
 
 init:
   - git config --global core.autocrlf input
 
 install:
-  - ps: Install-Product node 10 x64
+  - ps: Install-Product node 12.14.1 x64
   - git reset --hard HEAD
   - npm install
   - node --version
@@ -27,3 +20,7 @@ build_script:
   - npm run release
 
 test: off
+
+branches:
+  only:
+    - master

build/afterPackHook.js

@@ -0,0 +1,94 @@
+//  Forked from https://github.com/samuelmeuli/mini-diary/blob/master/scripts/after-pack.js
+
+/**
+ * Source: https://github.com/patrikx3/redis-ui/blob/master/src/build/after-pack.js
+ *
+ * Copyright (c) 2019 Patrik Laszlo / P3X / Corifeus and contributors.
+ *
+ * MIT License
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+// TODO: Remove script once https://github.com/electron/electron/issues/17972 is solved by
+// `electron-builder`
+
+const fs = require('fs')
+const { spawn } = require('child_process')
+const { chdir } = require('process')
+
+const pkg = require('../package.json')
+const binName = `${pkg.name}`.toLowerCase()
+
+const exec = async function exec (cmd, args = []) {
+  const child = spawn(cmd, args, { shell: true })
+  redirectOutputFor(child)
+  await waitFor(child)
+}
+
+const redirectOutputFor = child => {
+  const printStdout = data => {
+    process.stdout.write(data.toString())
+  }
+  const printStderr = data => {
+    process.stderr.write(data.toString())
+  }
+  child.stdout.on('data', printStdout)
+  child.stderr.on('data', printStderr)
+
+  child.once('close', () => {
+    child.stdout.off('data', printStdout)
+    child.stderr.off('data', printStderr)
+  })
+}
+
+const waitFor = async function (child) {
+  return new Promise(resolve => {
+    child.once('close', () => resolve())
+  })
+}
+
+const linuxTargets = [
+  'AppImage',
+  'deb',
+  'rpm',
+  'snap'
+]
+
+module.exports = async function (context) {
+  console.warn('after build; disable sandbox')
+  const isLinux = context.targets.find(
+    target => linuxTargets.includes(target)
+  )
+  if (!isLinux) {
+    return
+  }
+  const originalDir = process.cwd()
+  const dirname = context.appOutDir
+  chdir(dirname)
+
+  await exec('mv', [binName, binName + '.bin'])
+  const wrapperScript = `#!/bin/bash
+    "\${BASH_SOURCE%/*}"/${binName}.bin "$@" --no-sandbox
+  `
+  fs.writeFileSync(binName, wrapperScript)
+  await exec('chmod', ['+x', binName])
+
+  chdir(originalDir)
+}

build/afterSignHook.js

@@ -0,0 +1,27 @@
+require('dotenv').config()
+const { notarize } = require('electron-notarize')
+const pkg = require('../package.json')
+
+exports.default = async function (context) {
+  const { electronPlatformName, appOutDir } = context
+  if (electronPlatformName !== 'darwin') {
+    return
+  }
+
+  const skipNotarize = process.env.SKIP_NOTARIZE
+  if (skipNotarize === 'yes') {
+    console.log('skipping notarize')
+    return
+  }
+
+  const appBundleId = pkg.build.appId
+  const appName = context.packager.appInfo.productFilename
+
+  return await notarize({
+    appBundleId,
+    appPath: `${appOutDir}/${appName}.app`,
+    ascProvider: process.env.TEAM_ID,
+    appleId: process.env.APPLE_ID,
+    appleIdPassword: process.env.APPLE_ID_PWD
+  })
+}

extra/README.md

@@ -0,0 +1,3 @@
+# aria2
+
+Source code: https://github.com/agalwood/aria2

extra/darwin/engine/aria2.conf

@@ -1,108 +1,71 @@
-## '#'开头为注释内容, 选项都有相应的注释说明, 根据需要修改 ##
-## 被注释的选项填写的是默认值, 建议在需要修改时再取消注释  ##
-## 添加了@和默认启用的选项都是系统需要调用的，请不要随意改动否则可能无法正常运行
+###############################
+# Motrix macOS Aria2 config file
+#
+# @see https://aria2.github.io/manual/en/html/aria2c.html
+#
+###############################
 
-## 文件保存相关 ##
 
-# 文件的保存路径(可使用绝对路径或相对路径), 默认: 当前启动位置
-# 此项 OS X 无法使用 $HOME 及 ~/ 设置路径  建议使用 /users/用户名/downloads
-#@dir=$HOME/downloads
-# 启用磁盘缓存, 0为禁用缓存, 需1.16以上版本, 默认:16M
-#@disk-cache=32M
-# 文件预分配方式, 能有效降低磁盘碎片, 默认:prealloc
-# 预分配所需时间: none < falloc ? trunc < prealloc
-# falloc和trunc则需要文件系统和内核支持
-# NTFS建议使用falloc, EXT3/4建议trunc, MAC 下需要注释此项
-# file-allocation=none
-# 断点续传
-#@continue=true
-
-## 下载连接相关 ##
-
-# 最大同时下载任务数, 运行时可修改, 默认:5
-#@max-concurrent-downloads=10
-# 同一服务器连接数, 添加时可指定, 默认:1
-#@max-connection-per-server=15
-# 最小文件分片大小, 添加时可指定, 取值范围1M -1024M, 默认:20M
-# 假定size=10M, 文件为20MiB 则使用两个来源下载; 文件为15MiB 则使用一个来源下载
-#@min-split-size=10M
-# 单个任务最大线程数, 添加时可指定, 默认:5
-#@split=15
-# 整体下载速度限制, 运行时可修改, 默认:0
-#@max-overall-download-limit=0
-# 单个任务下载速度限制, 默认:0
-#@max-download-limit=0
-# 整体上传速度限制, 运行时可修改, 默认:0
-max-overall-upload-limit=128K
-# 单个任务上传速度限制, 默认:0
-#@max-upload-limit=0
-# 禁用IPv6, 默认:false
-disable-ipv6=false
-#运行覆盖已存在文件
-#@allow-overwrite=true
-#自动重命名
-#@auto-file-renaming=true
-
-## 进度保存相关 ##
-
-# 从会话文件中读取下载任务
-#@input-file=/Users/Shared/aria2.session
-# 在Aria2退出时保存`错误/未完成`的下载任务到会话文件
-#@save-session=/Users/Shared/aria2.session
-# 定时保存会话, 0为退出时才保存, 需1.16.1以上版本, 默认:0
-save-session-interval=30
-
-## RPC相关设置 ##
-
-# 启用RPC, 默认:false
+################ RPC ################
+# Enable JSON-RPC/XML-RPC server.
 enable-rpc=true
-# 允许所有来源, 默认:false
+# Add Access-Control-Allow-Origin header field with value * to the RPC response.
 rpc-allow-origin-all=true
-# 允许非外部访问, 默认:false
+# Listen incoming JSON-RPC/XML-RPC requests on all network interfaces.
 rpc-listen-all=true
-# 事件轮询方式, 取值:[epoll, kqueue, port, poll, select], 不同系统默认值不同
-#event-poll=select
-# RPC监听端口, 端口被占用时可以修改, 默认:6800
-# 使用本客户端请勿修改此项
-# rpc-listen-port=6800
-# 设置的RPC授权令牌, v1.18.4新增功能, 取代 --rpc-user 和 --rpc-passwd 选项
-#rpc-secret=token
 
-## BT/PT下载相关 ##
 
-# 当下载的是一个种子(以.torrent结尾)时, 自动开始BT任务, 默认:true
-#follow-torrent=true
-# BT监听端口, 当端口被屏蔽时使用, 默认:6881-6999
-listen-port=50101-50109
-# 单个种子最大连接数, 默认:55
-#bt-max-peers=55
-# 打开DHT功能, PT需要禁用, 默认:true
-enable-dht=true
-# 打开IPv6 DHT功能, PT需要禁用
-enable-dht6=true
-# DHT网络监听端口, 默认:6881-6999
-dht-listen-port=50101-50109
+################ File system ################
+# Save a control file(*.aria2) every SEC seconds.
+auto-save-interval=10
+# Enable disk cache.
+disk-cache=32M
+# Specify file allocation method.
+file-allocation=falloc
+# Save error/unfinished downloads to a file specified by --save-session option every SEC seconds.
+save-session-interval=10
+
+
+################ Task ################
+# Exclude seed only downloads when counting concurrent active downloads
+bt-detach-seed-only=true
+# Verify the peer using certificates specified in --ca-certificate option.
+check-certificate=false
+# If aria2 receives "file not found" status from the remote HTTP/FTP servers NUM times
+# without getting a single byte, then force the download to fail.
+max-file-not-found=5
+# Set number of tries.
+max-tries=5
+# aria2 does not split less than 2*SIZE byte range.
+min-split-size=1M
+# Set user agent for HTTP(S) downloads.
+user-agent=Transmission/2.94
+
+
+################ BT Task ################
+# Enable Local Peer Discovery.
+bt-enable-lpd=true
+# Requires BitTorrent message payload encryption with arc4.
+bt-force-encryption=true
+# If true is given, after hash check using --check-integrity option and file is complete, continue to seed file.
+bt-hash-check-seed=true
+# Specify the maximum number of peers per torrent.
+bt-max-peers=255
+# Removes the unselected files when download is completed in BitTorrent.
+bt-remove-unselected-file=true
+# Seed previously downloaded files without verifying piece hashes.
+bt-seed-unverified=true
 # Set host and port as an entry point to IPv4 DHT network.
 dht-entry-point=dht.transmissionbt.com:6881
 # Set host and port as an entry point to IPv6 DHT network.
 dht-entry-point6=dht.transmissionbt.com:6881
-# 本地节点查找, PT需要禁用, 默认:false
-bt-enable-lpd=true
-# 种子交换, PT需要禁用, 默认:true
+# Enable IPv4 DHT functionality. It also enables UDP tracker support.
+enable-dht=true
+# Enable IPv6 DHT functionality.
+enable-dht6=true
+# Enable Peer Exchange extension.
 enable-peer-exchange=true
-# 每个种子限速, 对少种的PT很有用, 默认:50K
-#bt-request-peer-speed-limit=50K
-# 客户端伪装, PT需要
-peer-id-prefix=-TR2770-
-user-agent=Transmission/2.94
-# 当种子的分享率达到这个数时, 自动停止做种, 0为一直做种, 默认:1.0
-seed-ratio=1.0
-# 强制保存会话, 即使任务已经完成, 默认:false
-# 较新的版本开启后会在任务完成后依然保留.aria2文件
-#force-save=false
-# BT校验相关, 默认:true
-#bt-hash-check-seed=true
-# 继续之前的BT任务时, 无需再次校验, 默认:false
-bt-seed-unverified=true
-# 保存磁力链接元数据为种子文件(.torrent文件), 默认:false
-bt-save-metadata=false
+# Specify the string used during the bitorrent extended handshake for the peer's client version.
+peer-agent=Transmission/2.94
+# Specify the prefix of peer ID.
+peer-id-prefix=-TR2940-

extra/linux/engine/aria2.conf

@@ -1,108 +1,71 @@
-## '#'开头为注释内容, 选项都有相应的注释说明, 根据需要修改 ##
-## 被注释的选项填写的是默认值, 建议在需要修改时再取消注释  ##
-## 添加了@和默认启用的选项都是系统需要调用的，请不要随意改动否则可能无法正常运行
+###############################
+# Motrix Linux Aria2 config file
+#
+# @see https://aria2.github.io/manual/en/html/aria2c.html
+#
+###############################
 
-## 文件保存相关 ##
 
-# 文件的保存路径(可使用绝对路径或相对路径), 默认: 当前启动位置
-# 此项 OS X 无法使用 $HOME 及 ~/ 设置路径  建议使用 /users/用户名/downloads
-#@dir=$HOME/downloads
-# 启用磁盘缓存, 0为禁用缓存, 需1.16以上版本, 默认:16M
-#@disk-cache=32M
-# 文件预分配方式, 能有效降低磁盘碎片, 默认:prealloc
-# 预分配所需时间: none < falloc ? trunc < prealloc
-# falloc和trunc则需要文件系统和内核支持
-# NTFS建议使用falloc, EXT3/4建议trunc, MAC 下需要注释此项
-file-allocation=trunc
-# 断点续传
-#@continue=true
-
-## 下载连接相关 ##
-
-# 最大同时下载任务数, 运行时可修改, 默认:5
-#@max-concurrent-downloads=10
-# 同一服务器连接数, 添加时可指定, 默认:1
-#@max-connection-per-server=15
-# 最小文件分片大小, 添加时可指定, 取值范围1M -1024M, 默认:20M
-# 假定size=10M, 文件为20MiB 则使用两个来源下载; 文件为15MiB 则使用一个来源下载
-#@min-split-size=10M
-# 单个任务最大线程数, 添加时可指定, 默认:5
-#@split=15
-# 整体下载速度限制, 运行时可修改, 默认:0
-#@max-overall-download-limit=0
-# 单个任务下载速度限制, 默认:0
-#@max-download-limit=0
-# 整体上传速度限制, 运行时可修改, 默认:0
-max-overall-upload-limit=128K
-# 单个任务上传速度限制, 默认:0
-#@max-upload-limit=0
-# 禁用IPv6, 默认:false
-disable-ipv6=false
-#运行覆盖已存在文件
-#@allow-overwrite=true
-#自动重命名
-#@auto-file-renaming=true
-
-## 进度保存相关 ##
-
-# 从会话文件中读取下载任务
-#@input-file=/Users/Shared/aria2.session
-# 在Aria2退出时保存`错误/未完成`的下载任务到会话文件
-#@save-session=/Users/Shared/aria2.session
-# 定时保存会话, 0为退出时才保存, 需1.16.1以上版本, 默认:0
-save-session-interval=30
-
-## RPC相关设置 ##
-
-# 启用RPC, 默认:false
+################ RPC ################
+# Enable JSON-RPC/XML-RPC server.
 enable-rpc=true
-# 允许所有来源, 默认:false
+# Add Access-Control-Allow-Origin header field with value * to the RPC response.
 rpc-allow-origin-all=true
-# 允许非外部访问, 默认:false
+# Listen incoming JSON-RPC/XML-RPC requests on all network interfaces.
 rpc-listen-all=true
-# 事件轮询方式, 取值:[epoll, kqueue, port, poll, select], 不同系统默认值不同
-#event-poll=select
-# RPC监听端口, 端口被占用时可以修改, 默认:6800
-# 使用本客户端请勿修改此项
-# rpc-listen-port=6800
-# 设置的RPC授权令牌, v1.18.4新增功能, 取代 --rpc-user 和 --rpc-passwd 选项
-#rpc-secret=token
 
-## BT/PT下载相关 ##
 
-# 当下载的是一个种子(以.torrent结尾)时, 自动开始BT任务, 默认:true
-#follow-torrent=true
-# BT监听端口, 当端口被屏蔽时使用, 默认:6881-6999
-listen-port=50101-50109
-# 单个种子最大连接数, 默认:55
-#bt-max-peers=55
-# 打开DHT功能, PT需要禁用, 默认:true
-enable-dht=true
-# 打开IPv6 DHT功能, PT需要禁用
-enable-dht6=true
-# DHT网络监听端口, 默认:6881-6999
-dht-listen-port=50101-50109
+################ File system ################
+# Save a control file(*.aria2) every SEC seconds.
+auto-save-interval=10
+# Enable disk cache.
+disk-cache=32M
+# Specify file allocation method.
+file-allocation=trunc
+# Save error/unfinished downloads to a file specified by --save-session option every SEC seconds.
+save-session-interval=10
+
+
+################ Task ################
+# Exclude seed only downloads when counting concurrent active downloads
+bt-detach-seed-only=true
+# Verify the peer using certificates specified in --ca-certificate option.
+check-certificate=false
+# If aria2 receives "file not found" status from the remote HTTP/FTP servers NUM times
+# without getting a single byte, then force the download to fail.
+max-file-not-found=5
+# Set number of tries.
+max-tries=5
+# aria2 does not split less than 2*SIZE byte range.
+min-split-size=1M
+# Set user agent for HTTP(S) downloads.
+user-agent=Transmission/2.94
+
+
+################ BT Task ################
+# Enable Local Peer Discovery.
+bt-enable-lpd=true
+# Requires BitTorrent message payload encryption with arc4.
+bt-force-encryption=true
+# If true is given, after hash check using --check-integrity option and file is complete, continue to seed file.
+bt-hash-check-seed=true
+# Specify the maximum number of peers per torrent.
+bt-max-peers=255
+# Removes the unselected files when download is completed in BitTorrent.
+bt-remove-unselected-file=true
+# Seed previously downloaded files without verifying piece hashes.
+bt-seed-unverified=true
 # Set host and port as an entry point to IPv4 DHT network.
 dht-entry-point=dht.transmissionbt.com:6881
 # Set host and port as an entry point to IPv6 DHT network.
 dht-entry-point6=dht.transmissionbt.com:6881
-# 本地节点查找, PT需要禁用, 默认:false
-bt-enable-lpd=true
-# 种子交换, PT需要禁用, 默认:true
+# Enable IPv4 DHT functionality. It also enables UDP tracker support.
+enable-dht=true
+# Enable IPv6 DHT functionality.
+enable-dht6=true
+# Enable Peer Exchange extension.
 enable-peer-exchange=true
-# 每个种子限速, 对少种的PT很有用, 默认:50K
-#bt-request-peer-speed-limit=50K
-# 客户端伪装, PT需要
-peer-id-prefix=-TR2770-
-user-agent=Transmission/2.94
-# 当种子的分享率达到这个数时, 自动停止做种, 0为一直做种, 默认:1.0
-seed-ratio=1.0
-# 强制保存会话, 即使任务已经完成, 默认:false
-# 较新的版本开启后会在任务完成后依然保留.aria2文件
-#force-save=false
-# BT校验相关, 默认:true
-#bt-hash-check-seed=true
-# 继续之前的BT任务时, 无需再次校验, 默认:false
-bt-seed-unverified=true
-# 保存磁力链接元数据为种子文件(.torrent文件), 默认:false
-bt-save-metadata=false
+# Specify the string used during the bitorrent extended handshake for the peer's client version.
+peer-agent=Transmission/2.94
+# Specify the prefix of peer ID.
+peer-id-prefix=-TR2940-

extra/win32/engine/aria2.conf

@@ -1,108 +1,71 @@
-## '#'开头为注释内容, 选项都有相应的注释说明, 根据需要修改 ##
-## 被注释的选项填写的是默认值, 建议在需要修改时再取消注释  ##
-## 添加了@和默认启用的选项都是系统需要调用的，请不要随意改动否则可能无法正常运行
+###############################
+# Motrix Windows Aria2 config file
+#
+# @see https://aria2.github.io/manual/en/html/aria2c.html
+#
+###############################
 
-## 文件保存相关 ##
 
-# 文件的保存路径(可使用绝对路径或相对路径), 默认: 当前启动位置
-# 此项 OS X 无法使用 $HOME 及 ~/ 设置路径  建议使用 /users/用户名/downloads
-#@dir=$HOME/downloads
-# 启用磁盘缓存, 0为禁用缓存, 需1.16以上版本, 默认:16M
-#@disk-cache=32M
-# 文件预分配方式, 能有效降低磁盘碎片, 默认:prealloc
-# 预分配所需时间: none < falloc ? trunc < prealloc
-# falloc和trunc则需要文件系统和内核支持
-# NTFS建议使用falloc, EXT3/4建议trunc, MAC 下需要注释此项
-file-allocation=falloc
-# 断点续传
-#@continue=true
-
-## 下载连接相关 ##
-
-# 最大同时下载任务数, 运行时可修改, 默认:5
-#@max-concurrent-downloads=10
-# 同一服务器连接数, 添加时可指定, 默认:1
-#@max-connection-per-server=15
-# 最小文件分片大小, 添加时可指定, 取值范围1M -1024M, 默认:20M
-# 假定size=10M, 文件为20MiB 则使用两个来源下载; 文件为15MiB 则使用一个来源下载
-#@min-split-size=10M
-# 单个任务最大线程数, 添加时可指定, 默认:5
-#@split=15
-# 整体下载速度限制, 运行时可修改, 默认:0
-#@max-overall-download-limit=0
-# 单个任务下载速度限制, 默认:0
-#@max-download-limit=0
-# 整体上传速度限制, 运行时可修改, 默认:0
-max-overall-upload-limit=128K
-# 单个任务上传速度限制, 默认:0
-#@max-upload-limit=0
-# 禁用IPv6, 默认:false
-disable-ipv6=false
-#运行覆盖已存在文件
-#@allow-overwrite=true
-#自动重命名
-#@auto-file-renaming=true
-
-## 进度保存相关 ##
-
-# 从会话文件中读取下载任务
-#@input-file=/Users/Shared/aria2.session
-# 在Aria2退出时保存`错误/未完成`的下载任务到会话文件
-#@save-session=/Users/Shared/aria2.session
-# 定时保存会话, 0为退出时才保存, 需1.16.1以上版本, 默认:0
-save-session-interval=30
-
-## RPC相关设置 ##
-
-# 启用RPC, 默认:false
+################ RPC ################
+# Enable JSON-RPC/XML-RPC server.
 enable-rpc=true
-# 允许所有来源, 默认:false
+# Add Access-Control-Allow-Origin header field with value * to the RPC response.
 rpc-allow-origin-all=true
-# 允许非外部访问, 默认:false
+# Listen incoming JSON-RPC/XML-RPC requests on all network interfaces.
 rpc-listen-all=true
-# 事件轮询方式, 取值:[epoll, kqueue, port, poll, select], 不同系统默认值不同
-#event-poll=select
-# RPC监听端口, 端口被占用时可以修改, 默认:6800
-# 使用本客户端请勿修改此项
-# rpc-listen-port=6800
-# 设置的RPC授权令牌, v1.18.4新增功能, 取代 --rpc-user 和 --rpc-passwd 选项
-#rpc-secret=token
 
-## BT/PT下载相关 ##
 
-# 当下载的是一个种子(以.torrent结尾)时, 自动开始BT任务, 默认:true
-#follow-torrent=true
-# BT监听端口, 当端口被屏蔽时使用, 默认:6881-6999
-listen-port=50101-50109
-# 单个种子最大连接数, 默认:55
-#bt-max-peers=55
-# 打开DHT功能, PT需要禁用, 默认:true
-enable-dht=true
-# 打开IPv6 DHT功能, PT需要禁用
-enable-dht6=true
-# DHT网络监听端口, 默认:6881-6999
-dht-listen-port=50101-50109
+################ File system ################
+# Save a control file(*.aria2) every SEC seconds.
+auto-save-interval=10
+# Enable disk cache.
+disk-cache=32M
+# Specify file allocation method.
+file-allocation=falloc
+# Save error/unfinished downloads to a file specified by --save-session option every SEC seconds.
+save-session-interval=10
+
+
+################ Task ################
+# Exclude seed only downloads when counting concurrent active downloads
+bt-detach-seed-only=true
+# Verify the peer using certificates specified in --ca-certificate option.
+check-certificate=false
+# If aria2 receives "file not found" status from the remote HTTP/FTP servers NUM times
+# without getting a single byte, then force the download to fail.
+max-file-not-found=5
+# Set number of tries.
+max-tries=5
+# aria2 does not split less than 2*SIZE byte range.
+min-split-size=1M
+# Set user agent for HTTP(S) downloads.
+user-agent=Transmission/2.94
+
+
+################ BT Task ################
+# Enable Local Peer Discovery.
+bt-enable-lpd=true
+# Requires BitTorrent message payload encryption with arc4.
+bt-force-encryption=true
+# If true is given, after hash check using --check-integrity option and file is complete, continue to seed file.
+bt-hash-check-seed=true
+# Specify the maximum number of peers per torrent.
+bt-max-peers=255
+# Removes the unselected files when download is completed in BitTorrent.
+bt-remove-unselected-file=true
+# Seed previously downloaded files without verifying piece hashes.
+bt-seed-unverified=true
 # Set host and port as an entry point to IPv4 DHT network.
 dht-entry-point=dht.transmissionbt.com:6881
 # Set host and port as an entry point to IPv6 DHT network.
 dht-entry-point6=dht.transmissionbt.com:6881
-# 本地节点查找, PT需要禁用, 默认:false
-bt-enable-lpd=true
-# 种子交换, PT需要禁用, 默认:true
+# Enable IPv4 DHT functionality. It also enables UDP tracker support.
+enable-dht=true
+# Enable IPv6 DHT functionality.
+enable-dht6=true
+# Enable Peer Exchange extension.
 enable-peer-exchange=true
-# 每个种子限速, 对少种的PT很有用, 默认:50K
-#bt-request-peer-speed-limit=50K
-# 客户端伪装, PT需要
-peer-id-prefix=-TR2770-
-user-agent=Transmission/2.94
-# 当种子的分享率达到这个数时, 自动停止做种, 0为一直做种, 默认:1.0
-seed-ratio=1.0
-# 强制保存会话, 即使任务已经完成, 默认:false
-# 较新的版本开启后会在任务完成后依然保留.aria2文件
-#force-save=false
-# BT校验相关, 默认:true
-#bt-hash-check-seed=true
-# 继续之前的BT任务时, 无需再次校验, 默认:false
-bt-seed-unverified=true
-# 保存磁力链接元数据为种子文件(.torrent文件), 默认:false
-bt-save-metadata=false
+# Specify the string used during the bitorrent extended handshake for the peer's client version.
+peer-agent=Transmission/2.94
+# Specify the prefix of peer ID.
+peer-id-prefix=-TR2940-

package.json

@@ -1,6 +1,6 @@
 {
   "name": "Motrix",
-  "version": "1.3.8",
+  "version": "1.5.7",
   "description": "A full-featured download manager",
   "homepage": "https://motrix.app",
   "author": {
@@ -17,6 +17,7 @@
   "scripts": {
     "release": "npm run build --publish onTagOrDraft",
     "build": "node .electron-vue/build.js && electron-builder",
+    "build:github": "node .electron-vue/build.js",
     "build:dir": "node .electron-vue/build.js && electron-builder --dir",
     "build:clean": "cross-env BUILD_TARGET=clean node .electron-vue/build.js",
     "build:web": "cross-env BUILD_TARGET=web node .electron-vue/build.js",
@@ -27,11 +28,13 @@
     "pack": "npm run pack:main && npm run pack:renderer",
     "pack:main": "cross-env NODE_ENV=production webpack --mode production --progress --colors --config .electron-vue/webpack.main.config.js",
     "pack:renderer": "cross-env NODE_ENV=production webpack --mode production --progress --colors --config .electron-vue/webpack.renderer.config.js",
-    "postinstall": "npm run lint:fix"
+    "postinstall": "electron-builder install-app-deps && npm run lint:fix"
   },
   "build": {
     "productName": "Motrix",
     "appId": "net.agalwood.Motrix",
+    "afterPack": "./build/afterPackHook.js",
+    "afterSign": "electron-builder-notarize",
     "fileAssociations": [
       {
         "ext": "torrent",
@@ -60,6 +63,12 @@
         "schemes": [
           "magnet"
         ]
+      },
+      {
+        "name": "Thunder Protocol",
+        "schemes": [
+          "thunder"
+        ]
       }
     ],
     "dmg": {
@@ -88,6 +97,7 @@
       ],
       "type": "distribution",
       "darkModeSupport": true,
+      "hardenedRuntime": true,
       "extraResources": {
         "from": "./extra/darwin/",
         "to": "./",
@@ -95,9 +105,6 @@
           "**/*"
         ]
       },
-      "binaries": [
-        "./release/mac/Motrix.app/Contents/Resources/engine/aria2c"
-      ],
       "category": "public.app-category.utilities"
     },
     "win": {
@@ -139,9 +146,10 @@
     "linux": {
       "category": "Network",
       "target": [
+        "AppImage",
         "deb",
-        "snap",
-        "AppImage"
+        "rpm",
+        "snap"
       ],
       "extraResources": {
         "from": "./extra/linux/",
@@ -151,10 +159,21 @@
         ]
       }
     },
+    "snap": {
+      "publish": [
+        {
+          "provider": "github"
+        },
+        {
+          "provider": "snapStore",
+          "channel": "edge"
+        }
+      ]
+    },
     "publish": [
       {
         "provider": "generic",
-        "url": "https://motrix.app/release/"
+        "url": "https://dl.motrix.app/release/"
       },
       {
         "provider": "github"
@@ -162,84 +181,84 @@
     ]
   },
   "dependencies": {
-    "@panter/vue-i18next": "^0.15.0",
-    "aria2": "^4.0.3",
-    "axios": "^0.18.0",
+    "@babel/runtime": "^7.9.2",
+    "@panter/vue-i18next": "^0.15.2",
+    "aria2": "^4.1.0",
+    "axios": "^0.19.2",
     "blob-util": "^2.0.2",
-    "clipboard-polyfill": "^2.8.0",
-    "electron-debug": "^2.2.0",
+    "clipboard-polyfill": "^2.8.6",
+    "electron-debug": "^3.0.1",
     "electron-is": "^3.0.0",
-    "electron-log": "^3.0.5",
-    "electron-updater": "^4.0.9",
-    "element-ui": "^2.7.2",
-    "forever-monitor": "^1.7.1",
-    "i18next": "^15.0.9",
-    "lodash": "^4.17.11",
+    "electron-log": "^4.1.1",
+    "electron-store": "^5.1.1",
+    "electron-updater": "^4.3.1",
+    "element-ui": "^2.13.1",
+    "forever-monitor": "1.7.2",
+    "i18next": "^19.4.4",
+    "lodash": "^4.17.15",
+    "nat-api": "^0.1.3",
+    "node-fetch": "^2.6.0",
     "normalize.css": "^8.0.1",
-    "parse-torrent": "^6.1.2",
+    "parse-torrent": "^7.1.2",
+    "randomatic": "^3.1.1",
     "svg-innerhtml": "^1.1.0",
-    "vue": "^2.6.10",
+    "vue": "^2.6.11",
     "vue-electron": "^1.0.6",
-    "vue-router": "^3.0.6",
-    "vuex": "^3.1.0",
+    "vue-router": "^3.1.6",
+    "vuex": "^3.3.0",
     "vuex-router-sync": "^5.0.0"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "^3.6.0",
-    "@vue/cli-plugin-eslint": "^3.6.0",
-    "@vue/cli-service": "^3.6.0",
-    "@vue/eslint-config-standard": "^4.0.0",
-    "ajv": "^6.10.0",
-    "babel-core": "^6.26.3",
-    "babel-eslint": "^10.0.1",
-    "babel-loader": "^7.1.5",
+    "@babel/core": "^7.9.0",
+    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-runtime": "^7.9.0",
+    "@babel/preset-env": "^7.9.5",
+    "@babel/register": "^7.9.0",
+    "@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",
-    "babel-plugin-transform-runtime": "^6.23.0",
-    "babel-preset-env": "^1.7.0",
-    "babel-preset-stage-0": "^6.24.1",
-    "babel-register": "^6.26.0",
-    "babili-webpack-plugin": "^0.1.2",
-    "cfonts": "^2.4.2",
-    "chalk": "^2.4.2",
-    "copy-webpack-plugin": "^5.0.3",
-    "cross-env": "^5.1.6",
-    "css-loader": "^2.1.1",
-    "del": "^4.1.0",
+    "cfonts": "^2.8.1",
+    "chalk": "^4.0.0",
+    "copy-webpack-plugin": "^5.1.1",
+    "cross-env": "^7.0.2",
+    "css-loader": "^3.5.3",
+    "del": "^5.1.0",
     "devtron": "^1.4.0",
-    "electron": "^4.1.5",
-    "electron-builder": "^20.39.0",
-    "electron-devtools-installer": "^2.2.4",
-    "electron-notarize": "^0.0.5",
-    "electron-osx-sign": "^0.4.11",
-    "electron-store": "^2.0.0",
-    "eslint": "^5.16.0",
-    "eslint-config-standard": "^12.0.0",
+    "electron": "^8.2.3",
+    "electron-builder": "^22.6.0",
+    "electron-builder-notarize": "^1.1.2",
+    "electron-devtools-installer": "^3.0.0",
+    "electron-notarize": "^0.3.0",
+    "electron-osx-sign": "^0.4.15",
+    "eslint": "^6.8.0",
     "eslint-friendly-formatter": "^4.0.1",
-    "eslint-loader": "^2.1.2",
-    "eslint-plugin-html": "^4.0.6",
-    "eslint-plugin-import": "^2.17.2",
-    "eslint-plugin-node": "^8.0.1",
-    "eslint-plugin-promise": "^4.1.1",
-    "eslint-plugin-standard": "^4.0.0",
-    "eslint-plugin-vue": "^5.2.2",
-    "file-loader": "^3.0.1",
-    "html-webpack-plugin": "^3.2.0",
-    "mini-css-extract-plugin": "0.6.0",
+    "eslint-loader": "^4.0.2",
+    "eslint-plugin-import": "^2.20.2",
+    "eslint-plugin-node": "^11.1.0",
+    "eslint-plugin-promise": "^4.2.1",
+    "eslint-plugin-standard": "^4.0.1",
+    "eslint-plugin-vue": "^6.2.2",
+    "file-loader": "^6.0.0",
+    "html-webpack-plugin": "^4.2.0",
+    "mini-css-extract-plugin": "0.9.0",
     "multispinner": "^0.2.1",
     "node-loader": "^0.6.0",
-    "node-sass": "^4.10.0",
-    "optimize-css-assets-webpack-plugin": "^5.0.1",
-    "sass-loader": "^7.1.0",
-    "style-loader": "^0.23.1",
-    "url-loader": "^1.1.2",
+    "optimize-css-assets-webpack-plugin": "^5.0.3",
+    "sass": "^1.26.5",
+    "sass-loader": "^8.0.2",
+    "style-loader": "^1.2.0",
+    "terser-webpack-plugin": "^2.3.6",
+    "url-loader": "^4.1.0",
     "vue-html-loader": "^1.2.4",
-    "vue-loader": "^15.7.0",
+    "vue-loader": "^15.9.1",
     "vue-style-loader": "^4.1.2",
-    "vue-template-compiler": "^2.6.10",
-    "webpack": "^4.30.0",
-    "webpack-cli": "^3.3.1",
-    "webpack-dev-server": "^3.3.1",
-    "webpack-hot-middleware": "^2.24.3",
-    "webpack-merge": "^4.2.1"
+    "vue-template-compiler": "^2.6.11",
+    "webpack": "^4.43.0",
+    "webpack-cli": "^3.3.11",
+    "webpack-dev-server": "^3.10.3",
+    "webpack-hot-middleware": "^2.25.0",
+    "webpack-merge": "^4.2.2"
   }
 }

src/main/Application.js

@@ -3,11 +3,15 @@ import { app, shell, dialog, ipcMain } from 'electron'
 import is from 'electron-is'
 import { readFile } from 'fs'
 import { extname, basename } from 'path'
+import { isEmpty } from 'lodash'
 
 import logger from './core/Logger'
 import ConfigManager from './core/ConfigManager'
 import { setupLocaleManager } from '@/ui/Locale'
 import Engine from './core/Engine'
+import EngineClient from './core/EngineClient'
+import UPnPManager from './core/UPnPManager'
+import AutoLaunchManager from './core/AutoLaunchManager'
 import UpdateManager from './core/UpdateManager'
 import EnergyManager from './core/EnergyManager'
 import ProtocolManager from './core/ProtocolManager'
@@ -15,7 +19,11 @@ import WindowManager from './ui/WindowManager'
 import MenuManager from './ui/MenuManager'
 import TouchBarManager from './ui/TouchBarManager'
 import TrayManager from './ui/TrayManager'
+import DockManager from './ui/DockManager'
 import ThemeManager from './ui/ThemeManager'
+import { AUTO_SYNC_TRACKER_INTERVAL, AUTO_CHECK_UPDATE_INTERVAL } from '@shared/constants'
+import { checkIsNeedRun } from '@shared/utils'
+import { convertTrackerDataToComma, fetchBtTrackerFromSource } from '@shared/utils/tracker'
 
 export default class Application extends EventEmitter {
   constructor () {
@@ -36,9 +44,7 @@ export default class Application extends EventEmitter {
 
     this.initTouchBarManager()
 
-    this.windowManager = new WindowManager({
-      userConfig: this.configManager.getUserConfig()
-    })
+    this.initWindowManager()
 
     this.engine = new Engine({
       systemConfig: this.configManager.getSystemConfig(),
@@ -46,21 +52,40 @@ export default class Application extends EventEmitter {
     })
     this.startEngine()
 
-    this.trayManager = new TrayManager()
+    this.initEngineClient()
 
-    this.initThemeManager()
+    this.initUPnPManager()
+
+    this.autoSyncTracker()
+
+    this.trayManager = new TrayManager({
+      theme: this.configManager.getUserConfig('tray-theme')
+    })
+
+    this.dockManager = new DockManager({
+      runMode: this.configManager.getUserConfig('run-mode')
+    })
+
+    this.autoLaunchManager = new AutoLaunchManager()
 
     this.energyManager = new EnergyManager()
 
+    this.initThemeManager()
+
     this.initUpdaterManager()
 
     this.initProtocolManager()
 
     this.handleCommands()
+
+    this.handleEvents()
+
     this.handleIpcMessages()
   }
 
   startEngine () {
+    const self = this
+
     try {
       this.engine.start()
     } catch (err) {
@@ -69,20 +94,180 @@ export default class Application extends EventEmitter {
         type: 'error',
         title: this.i18n.t('app.system-error-title'),
         message: this.i18n.t('app.system-error-message', { message })
-      }, () => {
+      }).then(_ => {
         setTimeout(() => {
-          app.quit()
+          self.quit()
         }, 100)
       })
     }
   }
 
-  start (page) {
-    this.showPage(page)
+  async stopEngine () {
+    try {
+      await this.engineClient.shutdown({ force: true })
+    } catch (err) {
+      logger.warn('[Motrix] shutdown engine fail: ', err.message)
+    } finally {
+      this.engine.stop()
+    }
   }
 
-  showPage (page) {
-    const win = this.windowManager.openWindow(page)
+  initEngineClient () {
+    const port = this.configManager.getSystemConfig('rpc-listen-port')
+    const secret = this.configManager.getSystemConfig('rpc-secret')
+    this.engineClient = new EngineClient({
+      port,
+      secret
+    })
+  }
+
+  initUPnPManager () {
+    this.upnp = new UPnPManager()
+
+    this.watchEnableUPnPChange()
+
+    this.watchPortsChange()
+
+    const enable = this.configManager.getUserConfig('enable-upnp')
+    if (!enable) {
+      return
+    }
+
+    this.startUPnPMapping()
+  }
+
+  async startUPnPMapping () {
+    const btPort = this.configManager.getSystemConfig('listen-port')
+    const dhtPort = this.configManager.getSystemConfig('dht-listen-port')
+
+    const promises = [
+      this.upnp.map(btPort),
+      this.upnp.map(dhtPort)
+    ]
+    try {
+      await Promise.all(promises)
+    } catch (e) {
+      logger.warn('[Motrix] start UPnP mapping fail', e)
+    }
+  }
+
+  async stopUPnPMapping () {
+    const btPort = this.configManager.getSystemConfig('listen-port')
+    const dhtPort = this.configManager.getSystemConfig('dht-listen-port')
+
+    const promises = [
+      this.upnp.unmap(btPort),
+      this.upnp.unmap(dhtPort)
+    ]
+    try {
+      await Promise.all(promises)
+    } catch (e) {
+      logger.warn('[Motrix] stop UPnP mapping fail', e)
+    }
+  }
+
+  watchPortsChange () {
+    const watchKeys = ['listen-port', 'dht-listen-port']
+
+    watchKeys.map((key) => {
+      this.configManager.systemConfig.onDidChange(key, async (newValue, oldValue) => {
+        logger.info('[Motrix] detected port change event:', key, newValue, oldValue)
+        const enable = this.configManager.getUserConfig('enable-upnp')
+        if (!enable) {
+          return
+        }
+
+        const promises = [
+          this.upnp.unmap(oldValue),
+          this.upnp.map(newValue)
+        ]
+        try {
+          await Promise.all(promises)
+        } catch (e) {
+          logger.info('[Motrix] change UPnP port mapping failed:', e)
+        }
+      })
+    })
+  }
+
+  watchEnableUPnPChange () {
+    this.configManager.userConfig.onDidChange('enable-upnp', async (newValue, oldValue) => {
+      logger.info('[Motrix] detected enable-upnp value change event:', newValue, oldValue)
+      if (newValue) {
+        this.startUPnPMapping()
+      } else {
+        this.stopUPnPMapping()
+      }
+    })
+  }
+
+  async shutdownUPnPManager () {
+    const enable = this.configManager.getUserConfig('enable-upnp')
+    if (enable) {
+      await this.stopUPnPMapping()
+    }
+
+    this.upnp.destroy()
+  }
+
+  autoSyncTracker () {
+    const enable = this.configManager.getUserConfig('auto-sync-tracker')
+    const lastTime = this.configManager.getUserConfig('last-sync-tracker-time')
+    const result = checkIsNeedRun(enable, lastTime, AUTO_SYNC_TRACKER_INTERVAL)
+    if (!result) {
+      return
+    }
+
+    setTimeout(() => {
+      const source = this.configManager.getUserConfig('tracker-source')
+      fetchBtTrackerFromSource(source).then((data) => {
+        const tracker = convertTrackerDataToComma(data)
+        this.savePreference({
+          system: {
+            'bt-tracker': tracker
+          },
+          user: {
+            'last-sync-tracker-time': Date.now()
+          }
+        })
+      })
+    }, 3000)
+  }
+
+  initWindowManager () {
+    this.windowManager = new WindowManager({
+      userConfig: this.configManager.getUserConfig()
+    })
+
+    this.windowManager.on('window-resized', (data) => {
+      this.storeWindowState(data)
+    })
+    this.windowManager.on('window-moved', (data) => {
+      this.storeWindowState(data)
+    })
+    this.windowManager.on('window-closed', (data) => {
+      this.storeWindowState(data)
+    })
+  }
+
+  storeWindowState (data = {}) {
+    const enabled = this.configManager.getUserConfig('keep-window-state')
+    if (!enabled) {
+      return
+    }
+
+    const state = this.configManager.getUserConfig('window-state', {})
+    const { page, bounds } = data
+    const newState = {
+      ...state,
+      [page]: bounds
+    }
+    this.configManager.setUserConfig('window-state', newState)
+  }
+
+  start (page, options = {}) {
+    const win = this.showPage(page, options)
+
     win.once('ready-to-show', () => {
       this.isReady = true
       this.emit('ready')
@@ -92,13 +277,21 @@ export default class Application extends EventEmitter {
     }
   }
 
+  showPage (page, options = {}) {
+    const { openedAtLogin } = options
+    const autoHideWindow = this.configManager.getUserConfig('auto-hide-window')
+    return this.windowManager.openWindow(page, {
+      hidden: openedAtLogin || autoHideWindow
+    })
+  }
+
   show (page = 'index') {
     this.windowManager.showWindow(page)
   }
 
   hide (page) {
     if (page) {
-      this.windowManager.hideWindow(page)
+      this.windowManager.autoHideWindow(page)
     } else {
       this.windowManager.hideAllWindow()
     }
@@ -112,10 +305,23 @@ export default class Application extends EventEmitter {
     this.windowManager.destroyWindow(page)
   }
 
-  stop () {
-    this.engine.stop()
-    this.energyManager.stopPowerSaveBlocker()
-    this.trayManager.destroy()
+  async stop () {
+    try {
+      await this.shutdownUPnPManager()
+
+      this.energyManager.stopPowerSaveBlocker()
+
+      this.trayManager.destroy()
+
+      await this.stopEngine()
+    } catch (err) {
+      logger.warn('[Motrix] stop error: ', err.message)
+    }
+  }
+
+  async quit () {
+    await this.stop()
+    app.exit()
   }
 
   sendCommand (command, ...args) {
@@ -160,7 +366,10 @@ export default class Application extends EventEmitter {
     if (is.dev() || is.mas()) {
       return
     }
-    this.protocolManager = new ProtocolManager()
+    const protocols = this.configManager.getUserConfig('protocols', {})
+    this.protocolManager = new ProtocolManager({
+      protocols
+    })
   }
 
   handleProtocol (url) {
@@ -200,11 +409,11 @@ export default class Application extends EventEmitter {
     if (is.mas()) {
       return
     }
+
+    const enable = this.configManager.getUserConfig('auto-check-update')
+    const lastTime = this.configManager.getUserConfig('last-check-update-time')
     this.updateManager = new UpdateManager({
-      autoCheck: this.configManager.getUserConfig('auto-check-update')
-        ? (new Date().getTime() - this.configManager.getUserConfig('last-check-update-time') > 7 * 24 * 60 * 60 * 1000)
-        : false,
-      setCheckTime: this.configManager
+      autoCheck: checkIsNeedRun(enable, lastTime, AUTO_CHECK_UPDATE_INTERVAL)
     })
     this.handleUpdaterEvents()
   }
@@ -212,6 +421,8 @@ export default class Application extends EventEmitter {
   handleUpdaterEvents () {
     this.updateManager.on('checking', (event) => {
       this.menuManager.updateMenuItemEnabledState('app.check-for-updates', false)
+      this.trayManager.updateMenuItemEnabledState('app.check-for-updates', false)
+      this.configManager.setUserConfig('last-check-update-time', Date.now())
     })
 
     this.updateManager.on('download-progress', (event) => {
@@ -221,10 +432,12 @@ export default class Application extends EventEmitter {
 
     this.updateManager.on('update-not-available', (event) => {
       this.menuManager.updateMenuItemEnabledState('app.check-for-updates', true)
+      this.trayManager.updateMenuItemEnabledState('app.check-for-updates', true)
     })
 
     this.updateManager.on('update-downloaded', (event) => {
       this.menuManager.updateMenuItemEnabledState('app.check-for-updates', true)
+      this.trayManager.updateMenuItemEnabledState('app.check-for-updates', true)
       const win = this.windowManager.getWindow('index')
       win.setProgressBar(0)
     })
@@ -235,30 +448,52 @@ export default class Application extends EventEmitter {
 
     this.updateManager.on('update-error', (event) => {
       this.menuManager.updateMenuItemEnabledState('app.check-for-updates', true)
+      this.trayManager.updateMenuItemEnabledState('app.check-for-updates', true)
     })
   }
 
-  relaunch (page = 'index') {
+  relaunch () {
     this.stop()
     app.relaunch()
     app.exit()
-    // this.closePage(page)
-    // if (page === 'index') {
-    //   this.engine.restart()
-    // }
-    // setTimeout(() => {
-    //   this.showPage(page)
-    // }, 500)
+  }
+
+  savePreference (config = {}) {
+    logger.info('[Motrix] save preference:', config)
+    const { system, user } = config
+    if (!isEmpty(system)) {
+      console.info('[Motrix] main save system config: ', system)
+      this.configManager.setSystemConfig(system)
+      this.engineClient.changeGlobalOption(system)
+    }
+
+    if (!isEmpty(user)) {
+      console.info('[Motrix] main save user config: ', user)
+      this.configManager.setUserConfig(user)
+    }
   }
 
   handleCommands () {
+    this.on('application:save-preference', this.savePreference)
+
     this.on('application:relaunch', () => {
       this.relaunch()
     })
 
-    this.on('application:exit', () => {
-      this.engine.stop()
-      app.exit()
+    this.on('application:quit', () => {
+      this.quit()
+    })
+
+    this.on('application:open-at-login', (openAtLogin) => {
+      if (is.linux()) {
+        return
+      }
+
+      if (openAtLogin) {
+        this.autoLaunchManager.enable()
+      } else {
+        this.autoLaunchManager.disable()
+      }
     })
 
     this.on('application:show', (page) => {
@@ -284,7 +519,6 @@ export default class Application extends EventEmitter {
     })
 
     this.on('application:change-locale', (locale) => {
-      logger.info('[Motrix] application:change-locale===>', locale)
       this.localeManager.changeLanguageByLocale(locale)
         .then(() => {
           this.menuManager.setup(locale)
@@ -292,6 +526,29 @@ export default class Application extends EventEmitter {
         })
     })
 
+    this.on('application:toggle-dock', (visible) => {
+      if (visible) {
+        this.dockManager.show()
+      } else {
+        this.dockManager.hide()
+        // Hiding the dock icon will trigger the entire app to hide.
+        this.show()
+      }
+    })
+
+    this.on('application:auto-hide-window', (hide) => {
+      if (hide) {
+        this.windowManager.handleWindowBlur()
+      } else {
+        this.windowManager.unbindWindowBlur()
+      }
+    })
+
+    this.on('application:change-menu-states', (visibleStates, enabledStates, checkedStates) => {
+      this.menuManager.updateMenuStates(visibleStates, enabledStates, checkedStates)
+      this.trayManager.updateMenuStates(visibleStates, enabledStates, checkedStates)
+    })
+
     this.on('application:open-file', (event) => {
       dialog.showOpenDialog({
         properties: ['openFile'],
@@ -301,8 +558,8 @@ export default class Application extends EventEmitter {
             extensions: ['torrent']
           }
         ]
-      }, (filePaths) => {
-        if (!filePaths || filePaths.length === 0) {
+      }).then(({ canceled, filePaths }) => {
+        if (canceled || filePaths.length === 0) {
           return
         }
 
@@ -315,6 +572,14 @@ export default class Application extends EventEmitter {
       app.clearRecentDocuments()
     })
 
+    this.on('application:setup-protocols-client', (protocols) => {
+      if (is.dev() || is.mas()) {
+        return
+      }
+      logger.info('[Motrix] setup protocols client:', protocols)
+      this.protocolManager.setup(protocols)
+    })
+
     this.on('help:official-website', () => {
       const url = 'https://motrix.app/'
       shell.openExternal(url)
@@ -336,18 +601,38 @@ export default class Application extends EventEmitter {
     })
   }
 
+  handleEvents () {
+    // this.configManager.systemConfig.onDidAnyChange(() => {
+    //   this.engineClient.changeGlobalOption(this.configManager.getSystemConfig())
+    // })
+
+    this.on('download-status-change', (downloading) => {
+      this.trayManager.updateTrayByStatus(downloading)
+      if (downloading) {
+        this.energyManager.startPowerSaveBlocker()
+      } else {
+        this.energyManager.stopPowerSaveBlocker()
+      }
+    })
+
+    this.on('download-speed-change', (speed) => {
+      this.dockManager.setBadge(speed)
+    })
+
+    this.on('task-download-complete', (task, path) => {
+      this.dockManager.openDock(path)
+    })
+  }
+
   handleIpcMessages () {
     ipcMain.on('command', (event, command, ...args) => {
-      logger.log('receive command', command, ...args)
+      logger.log('[Motrix] ipc receive command', command, ...args)
       this.emit(command, ...args)
     })
 
-    ipcMain.on('update-menu-states', (event, visibleStates, enabledStates, checkedStates) => {
-      this.menuManager.updateStates(visibleStates, enabledStates, checkedStates)
-    })
-
-    ipcMain.on('download-status-change', (event, status) => {
-      this.trayManager.updateStatus(status)
+    ipcMain.on('event', (event, eventName, ...args) => {
+      logger.log('[Motrix] ipc receive event', eventName, ...args)
+      this.emit(eventName, ...args)
     })
   }
 }

src/main/Launcher.js

@@ -5,9 +5,12 @@ import is from 'electron-is'
 import ExceptionHandler from './core/ExceptionHandler'
 import logger from './core/Logger'
 import Application from './Application'
-import { parseArgvAsUrl, parseArgvAsFile } from './utils'
-
-const EMPTY_STRING = ''
+import {
+  splitArgv,
+  parseArgvAsUrl,
+  parseArgvAsFile
+} from './utils'
+import { EMPTY_STRING } from '@shared/constants'
 
 export default class Launcher extends EventEmitter {
   constructor () {
@@ -23,7 +26,7 @@ export default class Launcher extends EventEmitter {
   makeSingleInstance (callback) {
     // Mac App Store Sandboxed App not support requestSingleInstanceLock
     if (is.mas()) {
-      callback()
+      callback && callback()
       return
     }
 
@@ -33,20 +36,29 @@ export default class Launcher extends EventEmitter {
       app.quit()
     } else {
       app.on('second-instance', (event, argv, workingDirectory) => {
-        logger.warn('second-instance====>', event, argv, workingDirectory)
         global.application.showPage('index')
-        if (!is.macOS() && argv.length > 1) { // Windows, Linux
+        if (!is.macOS() && argv.length > 1) {
           this.handleAppLaunchArgv(argv)
         }
       })
 
-      callback()
+      callback && callback()
     }
   }
 
   init () {
     this.exceptionHandler = new ExceptionHandler()
 
+    this.openedAtLogin = is.macOS()
+      ? app.getLoginItemSettings().wasOpenedAtLogin
+      : false
+
+    if (process.argv.length > 1) {
+      this.handleAppLaunchArgv(process.argv)
+    }
+
+    logger.info('[Motrix] openedAtLogin:', this.openedAtLogin)
+
     this.handleAppEvents()
   }
 
@@ -60,11 +72,12 @@ export default class Launcher extends EventEmitter {
 
   /**
    * handleOpenUrl
+   * Event 'open-url' macOS only
    * "name": "Motrix Protocol",
    * "schemes": ["mo", "motrix"]
    */
   handleOpenUrl () {
-    if (is.mas()) {
+    if (is.mas() || !is.macOS()) {
       return
     }
     app.on('open-url', (event, url) => {
@@ -77,30 +90,44 @@ export default class Launcher extends EventEmitter {
 
   /**
    * handleOpenFile
+   * Event 'open-file' macOS only
    * handle open torrent file
    */
   handleOpenFile () {
-    // macOS
-    if (is.macOS()) {
-      app.on('open-file', (event, path) => {
-        logger.info(`[Motrix] open-file: ${path}`)
-        event.preventDefault()
-        this.file = path
-        this.sendFileToApplication()
-      })
-    } else if (process.argv.length > 1) { // Windows, Linux
-      this.handleAppLaunchArgv(process.argv)
+    if (!is.macOS()) {
+      return
     }
+    app.on('open-file', (event, path) => {
+      logger.info(`[Motrix] open-file: ${path}`)
+      event.preventDefault()
+      this.file = path
+      this.sendFileToApplication()
+    })
   }
 
+  /**
+   * handleAppLaunchArgv
+   * For Windows, Linux
+   * @param {array} argv
+   */
   handleAppLaunchArgv (argv) {
-    const file = parseArgvAsFile(argv)
+    logger.info('[Motrix] handleAppLaunchArgv:', argv)
+
+    // args: array, extra: map
+    const { args, extra } = splitArgv(argv)
+    logger.info('[Motrix] split argv args:', args)
+    logger.info('[Motrix] split argv extra:', extra)
+    if (extra['--opened-at-login'] === '1') {
+      this.openedAtLogin = true
+    }
+
+    const file = parseArgvAsFile(args)
     if (file) {
       this.file = file
       this.sendFileToApplication()
     }
 
-    const url = parseArgvAsUrl(argv)
+    const url = parseArgvAsUrl(args)
     if (url) {
       this.url = url
       this.sendUrlToApplication()
@@ -125,7 +152,10 @@ export default class Launcher extends EventEmitter {
     app.on('ready', () => {
       global.application = new Application()
 
-      global.application.start('index')
+      const { openedAtLogin } = this
+      global.application.start('index', {
+        openedAtLogin
+      })
 
       global.application.on('ready', () => {
         this.sendUrlToApplication()

src/main/configs/engine.js

@@ -1,5 +1,5 @@
 export default {
-  'darwin': 'aria2c',
-  'win32': 'aria2c.exe',
-  'linux': 'aria2c'
+  darwin: 'aria2c',
+  win32: 'aria2c.exe',
+  linux: 'aria2c'
 }

src/main/configs/page.js

@@ -6,12 +6,12 @@ export default {
       title: 'Motrix',
       width: 1024,
       height: 768,
-      minWidth: 840,
+      minWidth: 400,
       minHeight: 420,
       // backgroundColor: '#FFFFFF',
       transparent: !is.windows()
     },
     bindCloseToHide: true,
-    url: is.dev() ? `http://localhost:9080` : `file://${__dirname}/index.html`
+    url: is.dev() ? 'http://localhost:9080' : `file://${__dirname}/index.html`
   }
 }

src/main/configs/protocol.js

@@ -1,3 +1,4 @@
+/* eslint quote-props: ["error", "always"] */
 export default {
   'task-list': 'application:task-list',
   'new-task': 'application:new-task',

src/main/core/AutoLaunchManager.js

@@ -0,0 +1,35 @@
+import { app } from 'electron'
+
+export default class AutoLaunchManager {
+  enable () {
+    return new Promise((resolve, reject) => {
+      const enabled = app.getLoginItemSettings().openAtLogin
+      if (enabled) {
+        resolve()
+      }
+
+      app.setLoginItemSettings({
+        openAtLogin: true,
+        // For Windows
+        args: [
+          '--opened-at-login=1'
+        ]
+      })
+      resolve()
+    })
+  }
+
+  disable () {
+    return new Promise((resolve, reject) => {
+      app.setLoginItemSettings({ openAtLogin: false })
+      resolve()
+    })
+  }
+
+  isEnabled () {
+    return new Promise((resolve, reject) => {
+      const enabled = app.getLoginItemSettings().openAtLogin
+      resolve(enabled)
+    })
+  }
+}

src/main/core/ConfigManager.js

@@ -1,12 +1,23 @@
 import { app } from 'electron'
 import is from 'electron-is'
 import Store from 'electron-store'
+
 import {
   getDhtPath,
   getLogPath,
   getSessionPath,
-  getUserDownloadsPath
+  getUserDownloadsPath,
+  getMaxConnectionPerServer
 } from '../utils/index'
+import {
+  APP_RUN_MODE,
+  APP_THEME,
+  EMPTY_STRING,
+  NGOSANG_TRACKERS_BEST_IP_URL,
+  NGOSANG_TRACKERS_BEST_URL,
+  IP_VERSION
+} from '@shared/constants'
+import { separateConfig } from '@shared/utils'
 
 export default class ConfigManager {
   constructor () {
@@ -26,74 +37,43 @@ export default class ConfigManager {
    * https://aria2.github.io/manual/en/html/aria2c.html
    *
    * Best bt trackers
-   * https://github.com/ngosang/trackerslist
+   * @see https://github.com/ngosang/trackerslist
+   *
+   * @see https://github.com/XIU2/TrackersListCollection
    */
   initSystemConfig () {
     this.systemConfig = new Store({
       name: 'system',
+      /* eslint-disable quote-props */
       defaults: {
-        'all-proxy': '',
-        'allow-overwrite': true,
+        'all-proxy': EMPTY_STRING,
+        'allow-overwrite': false,
         'auto-file-renaming': true,
-        'bt-tracker': [
-          'udp://62.138.0.158:6969/announce',
-          'udp://188.241.58.209:6969/announce',
-          'udp://188.241.58.209:6969/announce',
-          'udp://208.83.20.20:6969/announce',
-          'udp://151.80.120.115:2710/announce',
-          'udp://185.225.17.100:1337/announce',
-          'udp://151.80.120.113:2710/announce',
-          'udp://62.210.88.151:1337/announce',
-          'http://176.113.71.19:6961/announce',
-          'http://104.27.134.253:8080/announce',
-          'udp://5.2.79.219:1337/announce',
-          'udp://91.216.110.52:451/announce',
-          'udp://5.206.58.23:6969/announce',
-          'udp://159.100.245.181:6969/announce',
-          'udp://5.2.79.22:6969/announce',
-          'udp://176.31.241.153:80/announce',
-          'udp://95.211.168.204:2710/announce',
-          'udp://188.246.227.212:80/announce',
-          'udp://51.38.184.185:6969/announce',
-          'udp://51.15.40.114:80/announce',
-          'udp://tracker.coppersurfer.tk:6969/announce',
-          'udp://tracker.open-internet.nl:6969/announce',
-          'udp://tracker.leechers-paradise.org:6969/announce',
-          'udp://exodus.desync.com:6969/announce',
-          'udp://tracker.internetwarriors.net:1337/announce',
-          'udp://9.rarbg.to:2710/announce',
-          'udp://9.rarbg.me:2710/announce',
-          'udp://tracker.opentrackr.org:1337/announce',
-          'http://tracker3.itzmx.com:6961/announce',
-          'http://tracker1.itzmx.com:8080/announce',
-          'udp://open.demonii.si:1337/announce',
-          'udp://tracker.torrent.eu.org:451/announce',
-          'udp://tracker.tiny-vps.com:6969/announce',
-          'udp://tracker.cyberia.is:6969/announce',
-          'udp://denis.stalker.upeer.me:6969/announce',
-          'udp://thetracker.org:80/announce',
-          'udp://bt.xxx-tracker.com:2710/announce',
-          'udp://open.stealth.si:80/announce',
-          'udp://tracker.port443.xyz:6969/announce',
-          'udp://ipv4.tracker.harry.lu:80/announce'
-        ].join(','),
+        'bt-tracker': EMPTY_STRING,
         'continue': true,
-        'dht-file-path': getDhtPath(4),
-        'dht-file-path6': getDhtPath(6),
+        'dht-file-path': getDhtPath(IP_VERSION.V4),
+        'dht-file-path6': getDhtPath(IP_VERSION.V6),
+        'dht-listen-port': 26701,
         'dir': getUserDownloadsPath(),
+        'listen-port': 21301,
         'max-concurrent-downloads': 5,
-        'max-connection-per-server': is.macOS() ? 64 : 16,
+        'max-connection-per-server': getMaxConnectionPerServer(),
         'max-download-limit': 0,
         'max-overall-download-limit': 0,
-        'max-overall-upload-limit': '128K',
+        'max-overall-upload-limit': '256K',
         'min-split-size': '1M',
+        'no-proxy': EMPTY_STRING,
         'pause': true,
         'rpc-listen-port': 16800,
-        'rpc-secret': '',
-        'split': 16,
+        'rpc-secret': EMPTY_STRING,
+        'seed-ratio': 1,
+        'seed-time': 60,
+        'split': 128,
         'user-agent': 'Transmission/2.94'
       }
+      /* eslint-enable quote-props */
     })
+    this.fixSystemConfig()
   }
 
   initUserConfig () {
@@ -107,22 +87,68 @@ export default class ConfigManager {
       //     enum: ['auto', 'light', 'dark']
       //   }
       // },
+      /* eslint-disable quote-props */
       defaults: {
-        'all-proxy-backup': '',
-        'auto-check-update': false,
+        'all-proxy-backup': EMPTY_STRING,
+        'auto-check-update': is.macOS(),
+        'auto-hide-window': false,
+        'auto-sync-tracker': true,
+        'enable-upnp': true,
+        'engine-max-connection-per-server': getMaxConnectionPerServer(),
         'hide-app-menu': is.windows() || is.linux(),
+        'keep-window-state': false,
         'last-check-update-time': 0,
+        'last-sync-tracker-time': 0,
         'locale': app.getLocale(),
         'log-path': getLogPath(),
         'new-task-show-downloading': true,
+        'open-at-login': false,
+        'protocols': { 'magnet': true, 'thunder': false },
         'resume-all-when-app-launched': false,
+        'run-mode': APP_RUN_MODE.STANDARD,
         'session-path': getSessionPath(),
         'task-notification': true,
-        'theme': 'auto',
+        'theme': APP_THEME.AUTO,
+        'tracker-source': [
+          NGOSANG_TRACKERS_BEST_IP_URL,
+          NGOSANG_TRACKERS_BEST_URL
+        ],
+        'tray-theme': APP_THEME.AUTO,
         'update-channel': 'latest',
-        'use-proxy': false
+        'use-proxy': false,
+        'window-state': {}
       }
+      /* eslint-enable quote-props */
     })
+    this.fixUserConfig()
+  }
+
+  fixSystemConfig () {
+    // Remove aria2c unrecognized options
+    const { others } = separateConfig(this.systemConfig.store)
+    if (!others) {
+      return
+    }
+
+    Object.keys(others).forEach(key => {
+      this.systemConfig.delete(key)
+    })
+  }
+
+  fixUserConfig () {
+    // Fix the value of open-at-login when the user delete
+    // the Motrix self-starting item through startup management.
+    const openAtLogin = app.getLoginItemSettings().openAtLogin
+    if (this.getUserConfig('open-at-login') !== openAtLogin) {
+      this.setUserConfig('open-at-login', openAtLogin)
+    }
+
+    if (this.getUserConfig('tracker-source').length === 0) {
+      this.setUserConfig('tracker-source', [
+        NGOSANG_TRACKERS_BEST_IP_URL,
+        NGOSANG_TRACKERS_BEST_URL
+      ])
+    }
   }
 
   getSystemConfig (key, defaultValue) {

src/main/core/EnergyManager.js

@@ -1,6 +1,8 @@
 import { powerSaveBlocker } from 'electron'
 
-let psbId = null
+import logger from './Logger'
+
+let psbId
 export default class EnergyManager {
   startPowerSaveBlocker () {
     if (psbId && powerSaveBlocker.isStarted(psbId)) {
@@ -8,16 +10,16 @@ export default class EnergyManager {
     }
 
     psbId = powerSaveBlocker.start('prevent-app-suspension')
-    console.log('startPowerSaveBlocker===>', psbId)
+    logger.info('[Motrix] start power save blocker:', psbId)
   }
 
   stopPowerSaveBlocker () {
-    if (!psbId || !powerSaveBlocker.isStarted(psbId)) {
+    if (typeof psbId === 'undefined' || !powerSaveBlocker.isStarted(psbId)) {
       return
     }
 
     powerSaveBlocker.stop(psbId)
-    console.log('stopPowerSaveBlocker===>', psbId)
-    psbId = null
+    logger.info('[Motrix] stop power save blocker:', psbId)
+    psbId = undefined
   }
 }

src/main/core/Engine.js

@@ -1,10 +1,9 @@
-'use strict'
-
 import { app } from 'electron'
 import is from 'electron-is'
 import { existsSync } from 'fs'
 import { resolve, join } from 'path'
 import forever from 'forever-monitor'
+
 import logger from './Logger'
 import { getI18n } from '@/ui/Locale'
 import {
@@ -37,16 +36,16 @@ export default class Engine {
       throw new Error(this.i18n.t('app.engine-damaged-message'))
     }
 
-    let binPath = join(basePath, `/engine/${binName}`)
+    const binPath = join(basePath, `/engine/${binName}`)
     const binIsExist = existsSync(binPath)
     if (!binIsExist) {
-      logger.error('[Motrix] engine bin is not exist===>', binPath)
+      logger.error('[Motrix] engine bin is not exist:', binPath)
       throw new Error(this.i18n.t('app.engine-missing-message'))
     }
 
-    let confPath = join(basePath, '/engine/aria2.conf')
+    const confPath = join(basePath, '/engine/aria2.conf')
 
-    let sessionPath = this.userConfig['session-path'] || getSessionPath()
+    const sessionPath = this.userConfig['session-path'] || getSessionPath()
     const sessionIsExist = existsSync(sessionPath)
 
     let result = [`${binPath}`, `--conf-path=${confPath}`, `--save-session=${sessionPath}`]
@@ -62,9 +61,9 @@ export default class Engine {
 
   start () {
     const sh = this.getStartSh()
-    logger.info('[Motrix] Engine start sh===>', sh)
+    logger.info('[Motrix] Engine start sh:', sh)
     this.instance = forever.start(sh, {
-      max: 10,
+      max: is.dev() ? 1 : 100,
       parser: function (command, args) {
         return {
           command: command,
@@ -75,30 +74,30 @@ export default class Engine {
     })
 
     const { child } = this.instance
-    logger.info('[Motrix] Engine pid===>', child.pid)
+    logger.info('[Motrix] Engine pid:', child.pid)
 
     this.instance.on('error', (err) => {
-      logger.info(`[Motrix] Engine error===> ${err}`)
+      logger.info(`[Motrix] Engine error: ${err}`)
     })
 
     this.instance.on('start', function (process, data) {
-      logger.info(`[Motrix] Engine started===>`)
+      logger.info('[Motrix] Engine started')
     })
 
     this.instance.on('stop', function (process) {
-      logger.info(`[Motrix] Engine stopped===>`)
+      logger.info('[Motrix] Engine stopped')
     })
 
-    this.instance.on('restart', function (forever) {
-      logger.info(`[Motrix] Engine exit===>`)
-    })
+    // this.instance.on('restart', function (forever) {
+    //   logger.info(`[Motrix] Engine exit:`)
+    // })
 
-    this.instance.on('exit:code', function (code) {
-      logger.info(`[Motrix] Engine exit===> ${code}`)
-    })
+    // this.instance.on('exit:code', function (code) {
+    //   logger.info(`[Motrix] Engine exit: ${code}`)
+    // })
 
     // this.instance.on('stderr', (data) => {
-    //   logger.info(`[Motrix] Engine stderr===> ${data}`)
+    //   logger.info(`[Motrix] Engine stderr: ${data}`)
     // })
   }
 
@@ -113,10 +112,10 @@ export default class Engine {
   stop () {
     const { pid } = this.instance.child
     try {
-      logger.info('[Motrix] Engine stopping===>')
+      logger.info('[Motrix] Engine stopping')
       this.instance.stop()
     } catch (err) {
-      logger.error('[Motrix] Engine stop fail===>', err.message)
+      logger.error('[Motrix] Engine stop fail:', err.message)
       this.forceStop(pid)
     } finally {
     }
@@ -128,7 +127,7 @@ export default class Engine {
         process.kill(pid)
       }
     } catch (err) {
-      logger.warn('[Motrix] Engine forceStop fail===>', err)
+      logger.warn('[Motrix] Engine force stop fail:', err)
     }
   }
 

src/main/core/EngineClient.js

@@ -0,0 +1,70 @@
+'use strict'
+
+import Aria2 from 'aria2'
+
+import logger from './Logger'
+import {
+  compactUndefined,
+  formatOptionsForEngine
+} from '@shared/utils'
+import {
+  ENGINE_RPC_HOST,
+  ENGINE_RPC_PORT,
+  EMPTY_STRING
+} from '@shared/constants'
+
+const defaults = {
+  host: ENGINE_RPC_HOST,
+  port: ENGINE_RPC_PORT,
+  secret: EMPTY_STRING
+}
+
+export default class EngineClient {
+  static instance = null
+  static client = null
+
+  constructor (options = {}) {
+    this.options = {
+      ...defaults,
+      ...options
+    }
+
+    this.init()
+  }
+
+  init () {
+    this.connect()
+  }
+
+  connect () {
+    logger.info('[Motrix] main engine client connect', this.options)
+    const { host, port, secret } = this.options
+    this.client = new Aria2({
+      host,
+      port,
+      secret
+    })
+  }
+
+  async call (method, ...args) {
+    return this.client.call(method, ...args).catch((err) => {
+      logger.warn('[Motrix] call client fail:', err.message)
+    })
+  }
+
+  async changeGlobalOption (options) {
+    logger.info('[Motrix] change engine global option:', options)
+    const args = formatOptionsForEngine(options)
+
+    return this.call('changeGlobalOption', args)
+  }
+
+  async shutdown (options = {}) {
+    const { force = false } = options
+    const { secret } = this.options
+
+    const method = force ? 'forceShutdown' : 'shutdown'
+    const args = compactUndefined([secret])
+    return this.call(method, ...args)
+  }
+}

src/main/core/ExceptionHandler.js

@@ -1,5 +1,6 @@
 import { app, dialog } from 'electron'
 import is from 'electron-is'
+
 import logger from './Logger'
 
 const defaults = {

src/main/core/Logger.js

@@ -2,7 +2,7 @@ import is from 'electron-is'
 import logger from 'electron-log'
 
 logger.transports.file.level = is.production() ? 'warn' : 'silly'
-logger.info('Logger init')
+logger.info('[Motrix] Logger init')
 logger.warn('[Motrix] Logger init')
 
 export default logger

src/main/core/ProtocolManager.js

@@ -1,35 +1,53 @@
 
 import { EventEmitter } from 'events'
 import { app } from 'electron'
+
 import logger from './Logger'
 import protocolMap from '../configs/protocol'
+import { ADD_TASK_TYPE } from '@shared/constants'
 
 export default class ProtocolManager extends EventEmitter {
   constructor (options = {}) {
     super()
     this.options = options
 
+    // package.json:build.protocols[].schemes[]
+    // options.protocols: { 'magnet': true, 'thunder': false }
+    this.protocols = {
+      mo: true,
+      motrix: true,
+      ...options.protocols
+    }
+
     this.init()
   }
 
   init () {
-    // package.json:build.protocols[].schemes[]
-    if (!app.isDefaultProtocolClient('mo')) {
-      app.setAsDefaultProtocolClient('mo')
-    }
-    if (!app.isDefaultProtocolClient('motrix')) {
-      app.setAsDefaultProtocolClient('motrix')
-    }
-    if (!app.isDefaultProtocolClient('magnet')) {
-      app.setAsDefaultProtocolClient('magnet')
-    }
+    const { protocols } = this
+    this.setup(protocols)
+  }
+
+  setup (protocols) {
+    Object.keys(protocols).forEach((protocol) => {
+      const enabled = protocols[protocol]
+      if (enabled) {
+        if (!app.isDefaultProtocolClient(protocol)) {
+          app.setAsDefaultProtocolClient(protocol)
+        }
+      } else {
+        app.removeAsDefaultProtocolClient(protocol)
+      }
+    })
   }
 
   handle (url) {
     logger.info(`[Motrix] protocol url: ${url}`)
 
-    if (url.toLowerCase().startsWith('magnet:')) {
-      return this.handleMagnetProtocol(url)
+    if (
+      url.toLowerCase().startsWith('magnet:') ||
+      url.toLowerCase().startsWith('thunder:')
+    ) {
+      return this.handleMagnetAndThunderProtocol(url)
     }
 
     if (
@@ -40,13 +58,12 @@ export default class ProtocolManager extends EventEmitter {
     }
   }
 
-  handleMagnetProtocol (url) {
+  handleMagnetAndThunderProtocol (url) {
     if (!url) {
       return
     }
-    logger.error(`[Motrix] handleMagnetProtocol url: ${url}`)
 
-    global.application.sendCommandToAll('application:new-task', 'uri', url)
+    global.application.sendCommandToAll('application:new-task', ADD_TASK_TYPE.URI, url)
   }
 
   handleMoProtocol (url) {

src/main/core/UPnPManager.js

@@ -0,0 +1,84 @@
+import NatAPI from 'nat-api'
+
+import logger from './Logger'
+
+let client = null
+const mappingStatus = {}
+
+export default class UPnPManager {
+  constructor (options = {}) {
+    this.options = {
+      ...options
+    }
+  }
+
+  init () {
+    if (client) {
+      return
+    }
+
+    client = new NatAPI()
+  }
+
+  map (port) {
+    this.init()
+
+    return new Promise((resolve, reject) => {
+      logger.info('[Motrix] UPnPManager port mapping: ', port)
+      if (!port) {
+        reject(new Error('[Motrix] port was not specified'))
+        return
+      }
+
+      client.map(port, (err) => {
+        if (err) {
+          logger.warn(`[Motrix] UPnPManager map ${port} failed, error: `, err)
+          reject(err.message)
+          return
+        }
+
+        mappingStatus[port] = true
+        logger.info(`[Motrix] UPnPManager port ${port} mapping succeeded`)
+        resolve()
+      })
+    })
+  }
+
+  unmap (port) {
+    this.init()
+
+    return new Promise((resolve, reject) => {
+      logger.info('[Motrix] UPnPManager port unmapping: ', port)
+      if (!port) {
+        reject(new Error('[Motrix] port was not specified'))
+        return
+      }
+
+      if (!mappingStatus[port]) {
+        resolve()
+        return
+      }
+
+      client.unmap(port, (err) => {
+        if (err) {
+          logger.warn(`[Motrix] UPnPManager unmap ${port} failed, error: `, err)
+          reject(err.message)
+          return
+        }
+
+        logger.info(`[Motrix] UPnPManager port ${port} unmapping succeeded`)
+        mappingStatus[port] = false
+        resolve()
+      })
+    })
+  }
+
+  destroy () {
+    if (!client) {
+      return
+    }
+
+    client.destroy()
+    client = null
+  }
+}

src/main/core/UpdateManager.js

@@ -1,8 +1,9 @@
 import { EventEmitter } from 'events'
+import { resolve } from 'path'
 import { dialog } from 'electron'
 import is from 'electron-is'
 import { autoUpdater } from 'electron-updater'
-import { resolve } from 'path'
+
 import logger from './Logger'
 import { getI18n } from '@/ui/Locale'
 
@@ -43,13 +44,11 @@ export default class UpdateManager extends EventEmitter {
 
     if (this.autoCheckData.checkEnable) {
       this.autoCheckData.userCheck = false
-      this.options.setCheckTime.setUserConfig('last-check-update-time', new Date().getTime())
       this.updater.checkForUpdates()
     }
   }
 
   check () {
-    this.options.setCheckTime.setUserConfig('last-check-update-time', new Date().getTime())
     this.autoCheckData.userCheck = true
     this.updater.checkForUpdates()
   }
@@ -66,8 +65,8 @@ export default class UpdateManager extends EventEmitter {
       message: this.i18n.t('app.update-available-message'),
       buttons: [this.i18n.t('app.yes'), this.i18n.t('app.no')],
       cancelId: 1
-    }, (buttonIndex) => {
-      if (buttonIndex === 0) {
+    }).then(({ response }) => {
+      if (response === 0) {
         this.updater.downloadUpdate()
       }
     })
@@ -102,7 +101,7 @@ export default class UpdateManager extends EventEmitter {
     dialog.showMessageBox({
       title: this.i18n.t('app.check-for-updates-title'),
       message: this.i18n.t('app.update-downloaded-message')
-    }, () => {
+    }).then(_ => {
       this.emit('will-updated')
       setImmediate(() => {
         this.updater.quitAndInstall()
@@ -112,7 +111,10 @@ export default class UpdateManager extends EventEmitter {
 
   updateError (event, error) {
     this.emit('update-error', error)
-    const msg = error == null ? this.i18n.t('update-error-message') : (error.stack || error).toString()
+    const msg = (error == null)
+      ? this.i18n.t('update-error-message')
+      : (error.stack || error).toString()
+
     this.updater.logger.warn(`[Motrix] update-error: ${msg}`)
     dialog.showErrorBox(msg)
   }

src/main/index.dev.js

@@ -14,7 +14,7 @@ require('electron-debug')({
 })
 
 // Install `vue-devtools`
-require('electron').app.on('ready', () => {
+require('electron').app.whenReady().then(() => {
   let installExtension = require('electron-devtools-installer')
   installExtension.default(installExtension.VUEJS_DEVTOOLS)
     .then(() => {})

src/main/menus/darwin.json

@@ -11,7 +11,7 @@
         { "id": "app.hide-others", "role": "hideothers" },
         { "id": "app.unhide", "role": "unhide" },
         { "type": "separator" },
-        { "id": "app.quit", "role": "quit" }
+        { "id": "app.quit", "command": "application:quit" }
       ]
     },
     {
@@ -29,6 +29,7 @@
         { "type": "separator" },
         { "id": "task.pause-all-task", "command": "application:pause-all-task" },
         { "id": "task.resume-all-task", "command": "application:resume-all-task" },
+        { "id": "task.select-all-task", "command": "application:select-all-task" },
         { "type": "separator" },
         { "id": "task.clear-recent-tasks", "command": "application:clear-recent-tasks" }
       ]

src/main/menus/linux.json

@@ -9,7 +9,7 @@
         { "id": "app.check-for-updates", "command": "application:check-for-updates" },
         { "id": "app.show", "command": "application:show", "command-arg": "index" },
         { "type": "separator" },
-        { "id": "app.quit", "role": "quit" }
+        { "id": "app.quit", "command": "application:quit" }
       ]
     },
     {
@@ -26,7 +26,8 @@
         { "id": "task.move-task-down", "command": "application:move-task-down" },
         { "type": "separator" },
         { "id": "task.pause-all-task", "command": "application:pause-all-task" },
-        { "id": "task.resume-all-task", "command": "application:resume-all-task" }
+        { "id": "task.resume-all-task", "command": "application:resume-all-task" },
+        { "id": "task.select-all-task", "command": "application:select-all-task" }
       ]
     },
     {

src/main/menus/tray.json

@@ -5,7 +5,8 @@
   { "type": "separator" },
   { "id": "app.show", "command": "application:show", "command-arg": "index" },
   { "id": "help.manual", "command": "help:manual" },
+  { "id": "app.check-for-updates", "command": "application:check-for-updates" },
   { "type": "separator" },
   { "id": "app.preferences", "command": "application:preferences", "command-before": "application:show,index" },
-  { "id": "app.quit", "role": "quit" }
+  { "id": "app.quit", "command": "application:quit" }
 ]

src/main/menus/win32.json

@@ -9,7 +9,7 @@
         { "id": "app.check-for-updates", "command": "application:check-for-updates" },
         { "id": "app.show", "command": "application:show", "command-arg": "index" },
         { "type": "separator" },
-        { "id": "app.quit", "role": "quit" }
+        { "id": "app.quit", "command": "application:quit" }
       ]
     },
     {
@@ -27,6 +27,7 @@
         { "type": "separator" },
         { "id": "task.pause-all-task", "command": "application:pause-all-task" },
         { "id": "task.resume-all-task", "command": "application:resume-all-task" },
+        { "id": "task.select-all-task", "command": "application:select-all-task" },
         { "type": "separator" },
         { "id": "task.clear-recent-tasks", "command": "application:clear-recent-tasks" }
       ]

src/main/ui/DockManager.js

@@ -0,0 +1,36 @@
+import is from 'electron-is'
+import { EventEmitter } from 'events'
+import { app } from 'electron'
+
+import {
+  APP_RUN_MODE
+} from '@shared/constants'
+
+const isMac = is.macOS()
+
+export default class DockManager extends EventEmitter {
+  constructor (options) {
+    super()
+    this.options = options
+    const { runMode } = this.options
+    if (runMode !== APP_RUN_MODE.STANDARD) {
+      this.hide()
+    }
+  }
+
+  show = isMac ? () => {
+    return app.dock.show()
+  } : () => {}
+
+  hide = isMac ? () => {
+    app.dock.hide()
+  } : () => {}
+
+  setBadge = isMac ? (text) => {
+    app.dock.setBadge(text)
+  } : (text) => {}
+
+  openDock = isMac ? (path) => {
+    app.dock.downloadFinished(path)
+  } : (path) => {}
+}

src/main/ui/MenuManager.js

@@ -1,5 +1,6 @@
 import { EventEmitter } from 'events'
 import { Menu } from 'electron'
+
 import {
   translateTemplate,
   flattenMenuItems,
@@ -23,13 +24,13 @@ export default class MenuManager extends EventEmitter {
   }
 
   load () {
-    let template = require(`../menus/${process.platform}.json`)
-    this.template = template['menu']
+    const template = require(`../menus/${process.platform}.json`)
+    this.template = template.menu
   }
 
   build () {
     const keystrokesByCommand = {}
-    for (let item in this.keymap) {
+    for (const item in this.keymap) {
       keystrokesByCommand[this.keymap[item]] = item
     }
 
@@ -50,7 +51,7 @@ export default class MenuManager extends EventEmitter {
     this.setup()
   }
 
-  updateStates (visibleStates, enabledStates, checkedStates) {
+  updateMenuStates (visibleStates, enabledStates, checkedStates) {
     updateStates(this.items, visibleStates, enabledStates, checkedStates)
   }
 
@@ -58,13 +59,13 @@ export default class MenuManager extends EventEmitter {
     const visibleStates = {
       [id]: flag
     }
-    this.updateStates(visibleStates, null, null)
+    this.updateMenuStates(visibleStates, null, null)
   }
 
   updateMenuItemEnabledState (id, flag) {
     const enabledStates = {
       [id]: flag
     }
-    this.updateStates(null, enabledStates, null)
+    this.updateMenuStates(null, enabledStates, null)
   }
 }

src/main/ui/ThemeManager.js

@@ -1,7 +1,8 @@
 import { EventEmitter } from 'events'
-import { systemPreferences } from 'electron'
+import { nativeTheme, systemPreferences } from 'electron'
+
 import is from 'electron-is'
-import { LIGHT_THEME, DARK_THEME } from '@shared/constants'
+import { APP_THEME } from '@shared/constants'
 
 export default class ThemeManager extends EventEmitter {
   constructor (options = {}) {
@@ -15,11 +16,11 @@ export default class ThemeManager extends EventEmitter {
   }
 
   getSystemTheme () {
-    let result = LIGHT_THEME
+    let result = APP_THEME.LIGHT
     if (!is.macOS()) {
       return result
     }
-    result = systemPreferences.isDarkMode() ? DARK_THEME : LIGHT_THEME
+    result = nativeTheme.shouldUseDarkColors ? APP_THEME.DARK : APP_THEME.LIGHT
     return result
   }
 
@@ -27,18 +28,15 @@ export default class ThemeManager extends EventEmitter {
     if (!is.macOS()) {
       return
     }
-    systemPreferences.subscribeNotification(
-      'AppleInterfaceThemeChangedNotification',
-      () => {
-        const theme = this.getSystemTheme()
-        this.updateAppAppearance(theme)
-        this.emit('system-theme-changed', theme)
-      }
-    )
+    nativeTheme.on('updated', () => {
+      const theme = this.getSystemTheme()
+      this.updateAppAppearance(theme)
+      this.emit('system-theme-changed', theme)
+    })
   }
 
   updateAppAppearance (theme) {
-    if (!is.macOS() || theme !== LIGHT_THEME || theme !== DARK_THEME) {
+    if (!is.macOS() || theme !== APP_THEME.LIGHT || theme !== APP_THEME.DARK) {
       return
     }
     systemPreferences.setAppLevelAppearance(theme)

src/main/ui/TouchBarManager.js

@@ -1,6 +1,7 @@
 import { EventEmitter } from 'events'
 import { join } from 'path'
 import { TouchBar, nativeImage } from 'electron'
+
 import { handleCommand } from '../utils/menu'
 import logger from '../core/Logger'
 
@@ -15,7 +16,7 @@ export default class TouchBarManager extends EventEmitter {
   }
 
   load () {
-    this.template = require(`../menus/touchBar.json`)
+    this.template = require('../menus/touchBar.json')
   }
 
   getClickFn (item) {
@@ -41,30 +42,32 @@ export default class TouchBarManager extends EventEmitter {
     const { label, backgroundColor, textColor, size } = options
 
     switch (type) {
-      case 'button':
-        const icon = this.getIconImage(options.icon)
-        const click = this.getClickFn(options)
-        result = new TouchBarButton({
-          label,
-          backgroundColor,
-          icon,
-          click
+    case 'button':
+      result = new TouchBarButton({
+        label,
+        backgroundColor,
+        icon: this.getIconImage(options.icon),
+        click: this.getClickFn(options)
+      })
+      break
+    case 'label':
+      result = new TouchBarLabel({
+        label,
+        textColor
+      })
+      break
+    case 'spacer':
+      result = new TouchBarSpacer({ size })
+      break
+    case 'group':
+      result = new TouchBarGroup({
+        items: new TouchBar({
+          items: options.items
         })
-        break
-      case 'label':
-        result = new TouchBarLabel({
-          label,
-          textColor
-        })
-        break
-      case 'spacer':
-        result = new TouchBarSpacer({ size })
-        break
-      case 'group':
-        result = new TouchBarGroup({ items: options.items })
-        break
-      default:
-        result = null
+      })
+      break
+    default:
+      result = null
     }
 
     return result
@@ -90,7 +93,7 @@ export default class TouchBarManager extends EventEmitter {
     if (!bar) {
       try {
         const items = this.build(this.template)
-        bar = new TouchBar(items)
+        bar = new TouchBar({ items })
         this.bars[page] = bar
       } catch (e) {
         logger.info('getTouchBarByPage fail', e)

src/main/ui/TrayManager.js

@@ -1,10 +1,15 @@
 import { EventEmitter } from 'events'
 import { join } from 'path'
-import { Tray, Menu, systemPreferences } from 'electron'
+import { Tray, Menu, nativeTheme } from 'electron'
 import is from 'electron-is'
-import { translateTemplate } from '../utils/menu'
+
+import {
+  translateTemplate,
+  flattenMenuItems,
+  updateStates
+} from '../utils/menu'
 import { getI18n } from '@/ui/Locale'
-import { LIGHT_THEME, DARK_THEME } from '@shared/constants'
+import { APP_THEME } from '@shared/constants'
 
 let tray = null
 
@@ -12,8 +17,8 @@ export default class TrayManager extends EventEmitter {
   constructor (options = {}) {
     super()
 
+    this.theme = options.theme || APP_THEME.AUTO
     this.i18n = getI18n()
-
     this.menu = null
 
     this.load()
@@ -23,21 +28,29 @@ export default class TrayManager extends EventEmitter {
   }
 
   load () {
-    this.template = require(`../menus/tray.json`)
-    const theme = systemPreferences.isDarkMode() ? DARK_THEME : LIGHT_THEME
+    this.template = require('../menus/tray.json')
 
-    if (is.macOS()) {
-      this.normalIcon = join(__static, `./mo-tray-${theme}-normal.png`)
-      this.activeIcon = join(__static, `./mo-tray-${theme}-active.png`)
-    } else {
-      this.normalIcon = join(__static, './mo-tray-colorful-normal.png')
-      this.activeIcon = join(__static, './mo-tray-colorful-active.png')
+    let theme = APP_THEME.LIGHT
+
+    if (is.windows()) {
+      theme = 'colorful'
+    } else if (is.macOS()) {
+      theme = nativeTheme.shouldUseDarkColors ? APP_THEME.DARK : APP_THEME.LIGHT
+    } else if (is.linux()) {
+      theme = (this.theme === APP_THEME.AUTO) ? APP_THEME.DARK : this.theme
     }
+
+    this.setIcons(theme)
+  }
+
+  setIcons (theme) {
+    this.normalIcon = join(__static, `./mo-tray-${theme}-normal.png`)
+    this.activeIcon = join(__static, `./mo-tray-${theme}-active.png`)
   }
 
   build () {
     const keystrokesByCommand = {}
-    for (let item in this.keymap) {
+    for (const item in this.keymap) {
       keystrokesByCommand[this.keymap[item]] = item
     }
 
@@ -45,6 +58,7 @@ export default class TrayManager extends EventEmitter {
     const template = JSON.parse(JSON.stringify(this.template))
     const tpl = translateTemplate(template, keystrokesByCommand, this.i18n)
     this.menu = Menu.buildFromTemplate(tpl)
+    this.items = flattenMenuItems(this.menu)
   }
 
   setup () {
@@ -92,25 +106,42 @@ export default class TrayManager extends EventEmitter {
     global.application.handleFile(files[0])
   }
 
-  updateStatus (status) {
+  updateTrayByStatus (status) {
     this.status = status
-    this.updateIcon()
+    this.updateTray()
   }
 
-  updateIcon () {
+  updateTray () {
     const icon = this.status ? this.activeIcon : this.normalIcon
     tray.setImage(icon)
   }
 
-  changeIconTheme (theme = LIGHT_THEME) {
+  changeIconTheme (theme = APP_THEME.LIGHT) {
     if (!is.macOS()) {
       return
     }
 
-    this.normalIcon = join(__static, `./mo-tray-${theme}-normal.png`)
-    this.activeIcon = join(__static, `./mo-tray-${theme}-active.png`)
+    this.setIcons(theme)
 
-    this.updateIcon()
+    this.updateTray()
+  }
+
+  updateMenuStates (visibleStates, enabledStates, checkedStates) {
+    updateStates(this.items, visibleStates, enabledStates, checkedStates)
+  }
+
+  updateMenuItemVisibleState (id, flag) {
+    const visibleStates = {
+      [id]: flag
+    }
+    this.updateMenuStates(visibleStates, null, null)
+  }
+
+  updateMenuItemEnabledState (id, flag) {
+    const enabledStates = {
+      [id]: flag
+    }
+    this.updateMenuStates(null, enabledStates, null)
   }
 
   destroy () {

src/main/ui/WindowManager.js

@@ -4,15 +4,16 @@ import { app, shell, screen, BrowserWindow } from 'electron'
 import is from 'electron-is'
 import pageConfig from '../configs/page'
 import logger from '../core/Logger'
+import { debounce } from 'lodash'
 
 const defaultBrowserOptions = {
   titleBarStyle: 'hiddenInset',
-  useContentSize: true,
   show: false,
   width: 1024,
   height: 768,
   webPreferences: {
-    nodeIntegration: true
+    nodeIntegration: true,
+    webviewTag: true
   }
 }
 
@@ -57,41 +58,63 @@ export default class WindowManager extends EventEmitter {
     return result
   }
 
-  openWindow (page) {
-    const options = this.getPageOptions(page)
+  getPageBounds (page) {
+    const enabled = this.userConfig['keep-window-state']
+    const windowStateMap = this.userConfig['window-state'] || {}
+    let result = null
+    if (enabled) {
+      result = windowStateMap[page]
+    }
 
+    return result
+  }
+
+  openWindow (page, options = {}) {
+    const pageOptions = this.getPageOptions(page)
+    const { hidden } = options
+    const autoHideWindow = this.userConfig['auto-hide-window']
     let window = this.windows[page] || null
     if (window) {
-      window.restore()
+      window.show()
       window.focus()
       return window
     }
 
     window = new BrowserWindow({
       ...defaultBrowserOptions,
-      ...options.attrs
+      ...pageOptions.attrs
     })
 
+    const bounds = this.getPageBounds(page)
+    if (bounds) {
+      window.setBounds(bounds)
+    }
+
     window.webContents.on('new-window', (e, url) => {
       e.preventDefault()
       shell.openExternal(url)
     })
 
-    if (options.url) {
-      window.loadURL(options.url)
+    if (pageOptions.url) {
+      window.loadURL(pageOptions.url)
     }
 
     window.once('ready-to-show', () => {
-      window.show()
+      if (!hidden) {
+        window.show()
+      }
     })
 
-    if (options.bindCloseToHide) {
-      this.bindCloseToHide(page, window)
-    }
+    this.handleWindowState(page, window)
+
+    this.handleWindowClose(pageOptions, page, window)
 
     this.bindAfterClosed(page, window)
 
     this.addWindow(page, window)
+    if (autoHideWindow) {
+      this.handleWindowBlur()
+    }
     return window
   }
 
@@ -114,6 +137,9 @@ export default class WindowManager extends EventEmitter {
   destroyWindow (page) {
     const win = this.getWindow(page)
     this.removeWindow(page)
+    win.removeListener('closed')
+    win.removeListener('move')
+    win.removeListener('resize')
     win.destroy()
   }
 
@@ -127,12 +153,26 @@ export default class WindowManager extends EventEmitter {
     })
   }
 
-  bindCloseToHide (page, window) {
+  handleWindowState (page, window) {
+    window.on('resize', debounce(() => {
+      const bounds = window.getBounds()
+      this.emit('window-resized', { page, bounds })
+    }, 500))
+
+    window.on('move', debounce(() => {
+      const bounds = window.getBounds()
+      this.emit('window-moved', { page, bounds })
+    }, 500))
+  }
+
+  handleWindowClose (pageOptions, page, window) {
     window.on('close', (event) => {
-      if (!this.willQuit) {
+      if (pageOptions.bindCloseToHide && !this.willQuit) {
         event.preventDefault()
         window.hide()
       }
+      const bounds = window.getBounds()
+      this.emit('window-closed', { page, bounds })
     })
   }
 
@@ -144,7 +184,7 @@ export default class WindowManager extends EventEmitter {
     window.show()
   }
 
-  hideWindow (page) {
+  autoHideWindow (page) {
     const window = this.getWindow(page)
     if (!window) {
       return
@@ -180,6 +220,18 @@ export default class WindowManager extends EventEmitter {
     })
   }
 
+  onWindowBlur (event, window) {
+    window.hide()
+  }
+
+  handleWindowBlur () {
+    app.on('browser-window-blur', this.onWindowBlur)
+  }
+
+  unbindWindowBlur () {
+    app.removeListener('browser-window-blur', this.onWindowBlur)
+  }
+
   handleAllWindowClosed () {
     app.on('window-all-closed', (event) => {
       event.preventDefault()
@@ -190,7 +242,7 @@ export default class WindowManager extends EventEmitter {
     if (!window) {
       return
     }
-    logger.info('[Motrix] sendCommandTo===>', window, command, ...args)
+    logger.info('[Motrix] send command to:', command, ...args)
     window.webContents.send('command', command, ...args)
   }
 

src/main/utils/index.js

@@ -2,6 +2,11 @@ import { app } from 'electron'
 import is from 'electron-is'
 import { resolve } from 'path'
 import { existsSync, lstatSync } from 'fs'
+
+import {
+  ENGINE_MAX_CONNECTION_PER_SERVER,
+  IP_VERSION
+} from '@shared/constants'
 import logger from '../core/Logger'
 import engineBinMap from '../configs/engine'
 
@@ -10,7 +15,7 @@ export function getLogPath () {
 }
 
 export function getDhtPath (protocol) {
-  const name = protocol === 6 ? 'dht6.dat' : 'dht.dat'
+  const name = protocol === IP_VERSION.V6 ? 'dht6.dat' : 'dht.dat'
   return resolve(app.getPath('userData'), `./${name}`)
 }
 
@@ -27,12 +32,12 @@ export function getUserDownloadsPath () {
 }
 
 export function getEngineBin (platform) {
-  let result = engineBinMap.hasOwnProperty(platform) ? engineBinMap[platform] : ''
+  const result = engineBinMap[platform] || ''
   return result
 }
 
 export function transformConfig (config) {
-  let result = []
+  const result = []
   for (const [k, v] of Object.entries(config)) {
     if (v !== '') {
       result.push(`--${k}=${v}`)
@@ -65,25 +70,50 @@ export function moveAppToApplicationsFolder (errorMsg = '') {
   })
 }
 
+export function splitArgv (argv) {
+  const args = []
+  const extra = {}
+  for (const arg of argv) {
+    if (arg.startsWith('--')) {
+      const kv = arg.split('=')
+      const key = kv[0]
+      const value = kv[1] || '1'
+      extra[key] = value
+      continue
+    }
+    args.push(arg)
+  }
+  return { args, extra }
+}
+
 export function parseArgvAsUrl (argv) {
-  let arg = argv[1]
+  const arg = argv[1]
   if (!arg) {
     return
   }
 
-  if (
-    arg.toLowerCase().startsWith('mo:') ||
-    arg.toLowerCase().startsWith('motrix:') ||
-    arg.toLowerCase().startsWith('http:') ||
-    arg.toLowerCase().startsWith('https:') ||
-    arg.toLowerCase().startsWith('ftp:') ||
-    arg.toLowerCase().startsWith('magnet:') ||
-    arg.toLowerCase().startsWith('thunder:')
-  ) {
+  if (checkIsSupportedSchema(arg)) {
     return arg
   }
 }
 
+export function checkIsSupportedSchema (url = '') {
+  const str = url.toLowerCase()
+  if (
+    str.startsWith('mo:') ||
+    str.startsWith('motrix:') ||
+    str.startsWith('http:') ||
+    str.startsWith('https:') ||
+    str.startsWith('ftp:') ||
+    str.startsWith('magnet:') ||
+    str.startsWith('thunder:')
+  ) {
+    return true
+  } else {
+    return false
+  }
+}
+
 export function isDirectory (path) {
   return existsSync(path) && lstatSync(path).isDirectory()
 }
@@ -99,3 +129,7 @@ export function parseArgvAsFile (argv) {
   }
   return arg
 }
+
+export const getMaxConnectionPerServer = () => {
+  return ENGINE_MAX_CONNECTION_PER_SERVER
+}

src/main/utils/menu.js

@@ -3,31 +3,31 @@ export function concat (template, submenu, submenuToAdd) {
     let relativeItem = null
     if (sub.position) {
       switch (sub.position) {
-        case 'first':
-          submenu.unshift(sub)
-          break
-        case 'last':
-          submenu.push(sub)
-          break
-        case 'before':
-          relativeItem = findById(template, sub['relative-id'])
-          if (relativeItem) {
-            let array = relativeItem.__parent
-            let index = array.indexOf(relativeItem)
-            array.splice(index, 0, sub)
-          }
-          break
-        case 'after':
-          relativeItem = findById(template, sub['relative-id'])
-          if (relativeItem) {
-            let array = relativeItem.__parent
-            let index = array.indexOf(relativeItem)
-            array.splice(index + 1, 0, sub)
-          }
-          break
-        default:
-          submenu.push(sub)
-          break
+      case 'first':
+        submenu.unshift(sub)
+        break
+      case 'last':
+        submenu.push(sub)
+        break
+      case 'before':
+        relativeItem = findById(template, sub['relative-id'])
+        if (relativeItem) {
+          const array = relativeItem.__parent
+          const index = array.indexOf(relativeItem)
+          array.splice(index, 0, sub)
+        }
+        break
+      case 'after':
+        relativeItem = findById(template, sub['relative-id'])
+        if (relativeItem) {
+          const array = relativeItem.__parent
+          const index = array.indexOf(relativeItem)
+          array.splice(index + 1, 0, sub)
+        }
+        break
+      default:
+        submenu.push(sub)
+        break
       }
     } else {
       submenu.push(sub)
@@ -37,7 +37,7 @@ export function concat (template, submenu, submenuToAdd) {
 
 export function merge (template, item) {
   if (item.id) {
-    let matched = findById(template, item.id)
+    const matched = findById(template, item.id)
     if (matched) {
       if (item.submenu && Array.isArray(item.submenu)) {
         if (!Array.isArray(matched.submenu)) {
@@ -54,15 +54,15 @@ export function merge (template, item) {
 }
 
 function findById (template, id) {
-  for (let i in template) {
-    let item = template[i]
+  for (const i in template) {
+    const item = template[i]
     if (item.id === id) {
       // Returned item need to have a reference to parent Array (.__parent).
       // This is required to handle `position` and `relative-id`
       item.__parent = template
       return item
     } else if (Array.isArray(item.submenu)) {
-      let result = findById(item.submenu, id)
+      const result = findById(item.submenu, id)
       if (result) {
         return result
       }
@@ -72,8 +72,8 @@ function findById (template, id) {
 }
 
 export function translateTemplate (template, keystrokesByCommand, i18n) {
-  for (let i in template) {
-    let item = template[i]
+  for (const i in template) {
+    const item = template[i]
     if (item.command) {
       item.accelerator = acceleratorForCommand(item.command, keystrokesByCommand)
     }
@@ -112,22 +112,18 @@ export function handleCommand (item) {
 }
 
 function handleCommandBefore (item) {
-  console.log('handleCommandBefore==1=>', item)
   if (!item['command-before']) {
     return
   }
-  const [ command, ...args ] = item['command-before'].split(',')
-  console.log('handleCommandBefore==2=>', command, ...args)
+  const [command, ...args] = item['command-before'].split(',')
   global.application.sendCommandToAll(command, ...args)
 }
 
 function handleCommandAfter (item) {
-  console.log('handleCommandAfter==1=>', item)
   if (!item['command-after']) {
     return
   }
-  const [ command, ...args ] = item['command-after'].split(',')
-  console.log('handleCommandAfter==2=>', command, ...args)
+  const [command, ...args] = item['command-after'].split(',')
   global.application.sendCommandToAll(command, ...args)
 }
 
@@ -135,7 +131,7 @@ function acceleratorForCommand (command, keystrokesByCommand) {
   const keystroke = keystrokesByCommand[command]
   if (keystroke) {
     let modifiers = keystroke.split(/-(?=.)/)
-    let key = modifiers.pop().toUpperCase()
+    const key = modifiers.pop().toUpperCase()
       .replace('+', 'Plus')
       .replace('MINUS', '-')
     modifiers = modifiers.map((modifier) => {
@@ -152,14 +148,14 @@ function acceleratorForCommand (command, keystrokesByCommand) {
           .replace(/alt/ig, 'Alt')
       }
     })
-    let keys = modifiers.concat([key])
+    const keys = modifiers.concat([key])
     return keys.join('+')
   }
   return null
 }
 
 export function flattenMenuItems (menu) {
-  let flattenItems = {}
+  const flattenItems = {}
   menu.items.forEach(item => {
     if (item.id) {
       flattenItems[item.id] = item
@@ -173,24 +169,24 @@ export function flattenMenuItems (menu) {
 
 export function updateStates (itemsById, visibleStates, enabledStates, checkedStates) {
   if (visibleStates) {
-    for (let command in visibleStates) {
-      let item = itemsById[command]
+    for (const command in visibleStates) {
+      const item = itemsById[command]
       if (item) {
         item.visible = visibleStates[command]
       }
     }
   }
   if (enabledStates) {
-    for (let command in enabledStates) {
-      let item = itemsById[command]
+    for (const command in enabledStates) {
+      const item = itemsById[command]
       if (item) {
         item.enabled = enabledStates[command]
       }
     }
   }
   if (checkedStates) {
-    for (let id in checkedStates) {
-      let item = itemsById[id]
+    for (const id in checkedStates) {
+      const item = itemsById[id]
       if (item) {
         item.checked = checkedStates[id]
       }

src/renderer/api/Api.js

@@ -1,18 +1,16 @@
-import { remote } from 'electron'
+import { ipcRenderer, remote } from 'electron'
 import is from 'electron-is'
 import { isEmpty } from 'lodash'
 import Aria2 from 'aria2'
 import {
   separateConfig,
   compactUndefined,
+  formatOptionsForEngine,
   mergeTaskResult,
   changeKeysToCamelCase,
   changeKeysToKebabCase
 } from '@shared/utils'
-import {
-  BEST_TRACKERS_URL,
-  BEST_TRACKERS_IP_URL
-} from '@shared/constants'
+import { ENGINE_RPC_HOST } from '@shared/constants'
 
 const application = remote.getGlobal('application')
 
@@ -57,7 +55,9 @@ export default class Api {
       rpcListenPort: port,
       rpcSecret: secret
     } = this.config
+    const host = ENGINE_RPC_HOST
     this.client = new Aria2({
+      host,
       port,
       secret
     })
@@ -84,9 +84,9 @@ export default class Api {
   savePreference (params = {}) {
     const kebabParams = changeKeysToKebabCase(params)
     if (is.renderer()) {
-      this.savePreferenceToNativeStore(kebabParams)
+      return this.savePreferenceToNativeStore(kebabParams)
     } else {
-      this.savePreferenceToLocalStorage(kebabParams)
+      return this.savePreferenceToLocalStorage(kebabParams)
     }
   }
 
@@ -96,25 +96,36 @@ export default class Api {
 
   savePreferenceToNativeStore (params = {}) {
     const { user, system, others } = separateConfig(params)
-    if (!isEmpty(system)) {
-      console.info('[Motrix] save system config: ', system)
-      application.configManager.setSystemConfig(system)
-    }
+    const config = {}
 
     if (!isEmpty(user)) {
       console.info('[Motrix] save user config: ', user)
-      application.configManager.setUserConfig(user)
+      config.user = user
+    }
+
+    if (!isEmpty(system)) {
+      console.info('[Motrix] save system config: ', system)
+      config.system = system
+      this.updateActiveTaskOption(system)
     }
 
     if (!isEmpty(others)) {
-      console.info('[Motrix] save config found iillegal key: ', others)
+      console.info('[Motrix] save config found illegal key: ', others)
     }
+
+    ipcRenderer.send('command', 'application:save-preference', config)
   }
 
   getVersion () {
     return this.client.call('getVersion')
   }
 
+  changeGlobalOption (options) {
+    const args = formatOptionsForEngine(options)
+
+    return this.client.call('changeGlobalOption', args)
+  }
+
   getGlobalOption () {
     return new Promise((resolve) => {
       this.client.call('getGlobalOption')
@@ -124,6 +135,40 @@ export default class Api {
     })
   }
 
+  getOption (params = {}) {
+    const { gid } = params
+    const args = compactUndefined([gid])
+
+    return new Promise((resolve) => {
+      this.client.call('getOption', ...args)
+        .then((data) => {
+          resolve(changeKeysToCamelCase(data))
+        })
+    })
+  }
+
+  updateActiveTaskOption (options) {
+    this.fetchTaskList({ type: 'active' })
+      .then((data) => {
+        if (isEmpty(data)) {
+          return
+        }
+
+        const gids = data.map((task) => task.gid)
+        this.batchChangeOption({ gids, options })
+      })
+  }
+
+  changeOption (params = {}) {
+    let { gid, options = {} } = params
+    options = formatOptionsForEngine(options)
+
+    const kebabOptions = changeKeysToKebabCase(options)
+    const args = compactUndefined([gid, kebabOptions])
+
+    return this.client.call('changeOption', ...args)
+  }
+
   getGlobalStat () {
     return this.client.call('getGlobalStat')
   }
@@ -131,11 +176,16 @@ export default class Api {
   addUri (params) {
     const {
       uris,
+      outs,
       options
     } = params
-    const tasks = uris.map((uri) => {
-      const args = compactUndefined([[uri], options])
-      return [ 'aria2.addUri', ...args ]
+    const tasks = uris.map((uri, index) => {
+      const kebabOptions = changeKeysToKebabCase(options)
+      if (outs && outs[index]) {
+        kebabOptions.out = outs[index]
+      }
+      const args = compactUndefined([[uri], kebabOptions])
+      return ['aria2.addUri', ...args]
     })
     return this.client.multicall(tasks)
   }
@@ -145,7 +195,8 @@ export default class Api {
       torrent,
       options
     } = params
-    const args = compactUndefined([torrent, [], options])
+    const kebabOptions = changeKeysToKebabCase(options)
+    const args = compactUndefined([torrent, [], kebabOptions])
     return this.client.call('addTorrent', ...args)
   }
 
@@ -154,7 +205,8 @@ export default class Api {
       metalink,
       options
     } = params
-    const args = compactUndefined([metalink, options])
+    const kebabOptions = changeKeysToKebabCase(options)
+    const args = compactUndefined([metalink, kebabOptions])
     return this.client.call('addMetalink', ...args)
   }
 
@@ -164,14 +216,14 @@ export default class Api {
     const waitingArgs = compactUndefined([offset, num, keys])
     return new Promise((resolve, reject) => {
       this.client.multicall([
-        [ 'aria2.tellActive', ...activeArgs ],
-        [ 'aria2.tellWaiting', ...waitingArgs ]
+        ['aria2.tellActive', ...activeArgs],
+        ['aria2.tellWaiting', ...waitingArgs]
       ]).then((data) => {
-        console.log('fetchDownloadingTaskList data', data)
+        console.log('[Motrix] fetch downloading task list data:', data)
         const result = mergeTaskResult(data)
         resolve(result)
       }).catch((err) => {
-        console.log('fetchDownloadingTaskList fail===>', err)
+        console.log('[Motrix] fetch downloading task list fail:', err)
         reject(err)
       })
     })
@@ -192,14 +244,14 @@ export default class Api {
   fetchTaskList (params = {}) {
     const { type } = params
     switch (type) {
-      case 'active':
-        return this.fetchDownloadingTaskList(params)
-      case 'waiting':
-        return this.fetchWaitingTaskList(params)
-      case 'stopped':
-        return this.fetchStoppedTaskList(params)
-      default:
-        return this.fetchDownloadingTaskList(params)
+    case 'active':
+      return this.fetchDownloadingTaskList(params)
+    case 'waiting':
+      return this.fetchWaitingTaskList(params)
+    case 'stopped':
+      return this.fetchStoppedTaskList(params)
+    default:
+      return this.fetchDownloadingTaskList(params)
     }
   }
 
@@ -209,6 +261,12 @@ export default class Api {
     return this.client.call('tellStatus', ...args)
   }
 
+  fetchTaskItemPeers (params = {}) {
+    const { gid, keys } = params
+    const args = compactUndefined([gid, keys])
+    return this.client.call('getPeers', ...args)
+  }
+
   pauseTask (params = {}) {
     const { gid } = params
     const args = compactUndefined([gid])
@@ -265,24 +323,35 @@ export default class Api {
     return this.client.call('removeDownloadResult', ...args)
   }
 
-  startPowerSaveBlocker () {
-    application.energyManager.startPowerSaveBlocker()
-  }
+  multicall (method, params = {}) {
+    let { gids, options = {} } = params
+    options = formatOptionsForEngine(options)
 
-  stopPowerSaveBlocker () {
-    application.energyManager.stopPowerSaveBlocker()
-  }
-
-  fetchBtTrackerFromGitHub () {
-    const now = Date.now()
-    const promises = [
-      fetch(`${BEST_TRACKERS_IP_URL}?t=${now}`).then((res) => res.text()),
-      fetch(`${BEST_TRACKERS_URL}?t=${now}`).then((res) => res.text())
-    ]
-
-    return Promise.all(promises).then((values) => {
-      let result = values.join('\r\n').replace(/^\s*[\r\n]/gm, '')
-      return result
+    const data = gids.map((gid, index) => {
+      const kebabOptions = changeKeysToKebabCase(options)
+      const args = compactUndefined([gid, kebabOptions])
+      return [method, ...args]
     })
+    return this.client.multicall(data)
+  }
+
+  batchChangeOption (params = {}) {
+    return this.multicall('aria2.changeOption', params)
+  }
+
+  batchRemoveTask (params = {}) {
+    return this.multicall('aria2.remove', params)
+  }
+
+  batchResumeTask (params = {}) {
+    return this.multicall('aria2.unpause', params)
+  }
+
+  batchPauseTask (params = {}) {
+    return this.multicall('aria2.pause', params)
+  }
+
+  batchForcePauseTask (params = {}) {
+    return this.multicall('aria2.forcePause', params)
   }
 }

src/renderer/assets/icons/arrow-down.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
+  <g class="nc-icon-wrapper" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" stroke="currentColor">
+    <line data-cap="butt" data-color="color-2" fill="none" stroke-miterlimit="10" x1="12" y1="2" x2="12" y2="22"/>
+    <polyline fill="none" stroke="currentColor" stroke-miterlimit="10" points="19,15 12,22 5,15 "/>
+  </g>
+</svg>

src/renderer/assets/icons/arrow-up.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
+  <g class="nc-icon-wrapper" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" stroke="currentColor">
+    <line data-cap="butt" data-color="color-2" fill="none" stroke-miterlimit="10" x1="12" y1="22" x2="12" y2="2"/>
+    <polyline fill="none" stroke="currentColor" stroke-miterlimit="10" points="5,9 12,2 19,9 "/>
+  </g>
+</svg>

src/renderer/assets/icons/audio.svg

@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
+  <g stroke-linecap="round" stroke-linejoin="round" stroke-width="2" stroke="currentColor">
+    <rect x="4" y="3" width="16" height="18" fill="none" stroke="currentColor" stroke-miterlimit="10"/>
+    <line data-color="color-2" x1="1" y1="6" x2="1" y2="18" fill="none" stroke-miterlimit="10"/>
+    <line data-color="color-2" x1="23" y1="6" x2="23" y2="18" fill="none" stroke-miterlimit="10"/>
+    <polyline data-cap="butt" points="10 15 10 8 16 8 16 14" fill="none" stroke="currentColor" stroke-miterlimit="10"/>
+    <circle data-stroke="none" cx="9" cy="15" r="2" stroke="none"/>
+    <circle data-stroke="none" cx="15" cy="14" r="2" stroke="none"/>
+  </g>
+</svg>

src/renderer/assets/icons/dice.svg

@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
+  <g stroke-linecap="round" stroke-linejoin="round" stroke-width="2" stroke="currentColor">
+    <polyline data-cap="butt" fill="none" stroke="currentColor" stroke-miterlimit="10" points="17,23 17,7 1,7 "/>
+    <line data-cap="butt" fill="none" stroke="currentColor" stroke-miterlimit="10" x1="17" y1="7" x2="23" y2="1"/>
+    <polygon fill="none" stroke="currentColor" stroke-miterlimit="10" points="17,23 23,17 23,1 7,1 1,7 1,23 "/>
+    <circle data-color="color-2" data-stroke="none" cx="12" cy="12" r="1" stroke-linejoin="miter" stroke-linecap="square" stroke="none"/>
+    <circle data-color="color-2" data-stroke="none" cx="6" cy="12" r="1" stroke-linejoin="miter" stroke-linecap="square" stroke="none"/>
+    <circle data-color="color-2" data-stroke="none" cx="12" cy="18" r="1" stroke-linejoin="miter" stroke-linecap="square" stroke="none"/>
+    <circle data-color="color-2" data-stroke="none" cx="6" cy="18" r="1" stroke-linejoin="miter" stroke-linecap="square" stroke="none"/>
+  </g>
+</svg>

src/renderer/assets/icons/image.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
+  <g stroke-linecap="round" stroke-linejoin="round" stroke-width="2" stroke="currentColor">
+    <polyline data-cap="butt" data-color="color-2" points="1 20 6 14 10 18 17 10 23 17" fill="none" stroke-miterlimit="10"/>
+    <rect x="1" y="3" width="22" height="18" fill="none" stroke="currentColor" stroke-miterlimit="10"/>
+    <circle data-color="color-2" cx="9" cy="8" r="2" fill="none" stroke-miterlimit="10"/>
+  </g>
+</svg>

src/renderer/assets/icons/node.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
+  <g class="nc-icon-wrapper" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" stroke="currentColor">
+    <polyline data-cap="butt" fill="none" stroke-miterlimit="10" points="12,9 12,13 7.8,16.1 "/>
+    <line data-cap="butt" fill="none" stroke-miterlimit="10" x1="12" y1="13" x2="16.2" y2="16.1"/>
+    <circle fill="none" stroke="currentColor" stroke-miterlimit="10" cx="12" cy="5" r="4"/>
+    <circle fill="none" stroke="currentColor" stroke-miterlimit="10" cx="5" cy="19" r="4"/>
+    <circle fill="none" stroke="currentColor" stroke-miterlimit="10" cx="19" cy="19" r="4"/>
+  </g>
+</svg>

src/renderer/assets/icons/task-history.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
+  <g>
+    <path d="M12,0C5.383,0,0,5.383,0,12s5.383,12,12,12s12-5.383,12-12S18.617,0,12,0z M19,13h-8V5h2v6h6V13z"/>
+  </g>
+</svg>

src/renderer/assets/icons/task-restart.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
+  <g stroke-linecap="round" stroke-linejoin="round" stroke-width="2" stroke="currentColor">
+    <path data-cap="butt" fill="none" stroke="currentColor" stroke-miterlimit="10" d="M6.121,20.121 C7.727,21.22,9.907,22,12,22c5.523,0,10-4.477,10-10c0-5.523-4.477-10-10-10C8.101,2,4.728,4.233,3.078,7.488"/>
+    <polyline fill="none" stroke="currentColor" stroke-miterlimit="10" points="2.278,1.588 3.078,7.488 9.078,6.688 "/>
+    <circle data-color="color-2" fill="none" stroke-miterlimit="10" cx="4" cy="18" r="3"/>
+  </g>
+</svg>

src/renderer/assets/icons/video.svg

@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
+  <g stroke-linecap="round" stroke-linejoin="round" stroke-width="2" stroke="currentColor">
+    <line data-cap="butt" data-color="color-2" x1="2" y1="6" x2="22" y2="6" fill="none" stroke-miterlimit="10"/>
+    <line data-cap="butt" data-color="color-2" x1="12" y1="2" x2="12" y2="22" fill="none" stroke-miterlimit="10"/>
+    <line data-cap="butt" data-color="color-2" x1="7" y1="2" x2="7" y2="6" fill="none" stroke-miterlimit="10"/>
+    <line data-cap="butt" data-color="color-2" x1="17" y1="2" x2="17" y2="6" fill="none" stroke-miterlimit="10"/>
+    <line data-cap="butt" data-color="color-2" x1="2" y1="18" x2="22" y2="18" fill="none" stroke-miterlimit="10"/>
+    <line data-cap="butt" data-color="color-2" x1="7" y1="22" x2="7" y2="18" fill="none" stroke-miterlimit="10"/>
+    <line data-cap="butt" data-color="color-2" x1="17" y1="22" x2="17" y2="18" fill="none" stroke-miterlimit="10"/>
+    <rect x="2" y="2" width="20" height="20" fill="none" stroke="currentColor" stroke-miterlimit="10"/>
+  </g>
+</svg>

src/renderer/components/About/AboutPanel.vue

@@ -12,7 +12,6 @@
 </template>
 
 <script>
-  import is from 'electron-is'
   import { mapState } from 'vuex'
   import AppInfo from '@/components/About/AppInfo'
   import Copyright from '@/components/About/Copyright'
@@ -41,8 +40,6 @@
       })
     },
     methods: {
-      isRenderer: is.renderer,
-      isMas: is.mas,
       handleOpen () {
         this.$store.dispatch('app/fetchEngineInfo')
       },
@@ -58,6 +55,7 @@
 <style lang="scss">
   .app-about-dialog {
     max-width: 632px;
+    min-width: 380px;
     .el-dialog__header {
       padding-top: 0;
       padding-bottom: 0;

src/renderer/components/About/AppInfo.vue

@@ -34,9 +34,11 @@
       },
       engine: {
         type: Object,
-        default: {
-          version: '',
-          enabledFeatures: []
+        default () {
+          return {
+            version: '',
+            enabledFeatures: []
+          }
         }
       }
     },
@@ -71,7 +73,7 @@
       margin: 50px 35% 0 8px;
       h4 {
         font-size: $--font-size-base;
-        font-weight: $--font-weight-secondary;
+        font-weight: normal;
         color: $--app-engine-title-color;
       }
       ul {

src/renderer/components/About/Copyright.vue

@@ -1,18 +1,21 @@
 <template>
   <el-row class="copyright">
     <el-col :span="6" class="copyright-left">
-      <a target="_blank" href="https://motrix.app/" rel="noopener noreferrer">
-        &copy;2018 Motrix
+      <a target="_blank" rel="noopener noreferrer" href="https://motrix.app/">
+        &copy;2019 Motrix
       </a>
     </el-col>
     <el-col :span="18" class="copyright-right">
-      <a target="_blank" href="https://motrix.app/about" rel="noopener noreferrer">
+      <a target="_blank" rel="noopener noreferrer" href="https://motrix.app/license">
+        {{ $t('about.license') }}
+      </a>
+      <a target="_blank" rel="noopener noreferrer" href="https://motrix.app/about">
         {{ $t('about.about') }}
       </a>
-      <a target="_blank" href="https://motrix.app/support" rel="noopener noreferrer">
+      <a target="_blank" rel="noopener noreferrer" href="https://motrix.app/support">
         {{ $t('about.support') }}
       </a>
-      <a target="_blank" href="https://motrix.app/release" rel="noopener noreferrer">
+      <a target="_blank" rel="noopener noreferrer" href="https://motrix.app/release">
         {{ $t('about.release') }}
       </a>
     </el-col>

src/renderer/components/Aside/Index.vue

@@ -1,20 +1,20 @@
 <template>
-  <el-aside width="78px" :class="['aside', { 'draggable': asideDraggable }]">
+  <el-aside width="78px" :class="['aside', 'hidden-sm-and-down', { 'draggable': asideDraggable }]">
     <div class="aside-inner">
       <mo-logo-mini />
       <ul class="menu top-menu">
-        <li @click="nav('/task')">
+        <li @click="nav('/task')" class="non-draggable">
           <mo-icon name="menu-task" width="20" height="20" />
         </li>
-        <li @click="showAddTask()">
+        <li @click="showAddTask()" class="non-draggable">
           <mo-icon name="menu-add" width="20" height="20" />
         </li>
       </ul>
       <ul class="menu bottom-menu">
-        <li @click="nav('/preference')">
+        <li @click="nav('/preference')" class="non-draggable">
           <mo-icon name="menu-preference" width="20" height="20" />
         </li>
-        <li @click="showAboutPanel">
+        <li @click="showAboutPanel" class="non-draggable">
           <mo-icon name="menu-about" width="20" height="20" />
         </li>
       </ul>
@@ -25,6 +25,7 @@
 <script>
   import is from 'electron-is'
   import { mapState } from 'vuex'
+  import { ADD_TASK_TYPE } from '@shared/constants'
   import LogoMini from '@/components/Logo/LogoMini'
   import '@/components/Icons/menu-task'
   import '@/components/Icons/menu-add'
@@ -45,22 +46,17 @@
       }
     },
     methods: {
-      open (link) {
-        this.$electron.shell.openExternal(link)
-      },
-      showAddTask (taskType = 'uri') {
+      showAddTask (taskType = ADD_TASK_TYPE.URI) {
         this.$store.dispatch('app/showAddTaskDialog', taskType)
       },
       showAboutPanel () {
-        // if (is.renderer()) {
-        //   this.$electron.ipcRenderer.send('command', 'application:about')
-        // } else {
         this.$store.dispatch('app/showAboutPanel')
-        // }
       },
       nav (page) {
         this.$router.push({
           path: page
+        }).catch(err => {
+          console.log(err)
         })
       }
     }

src/renderer/components/Browser/index.vue

@@ -0,0 +1,78 @@
+<template>
+  <div ref="webviewViewport" class="webview-viewport">
+    <webview
+      class="mo-webview"
+      ref="webview"
+      :src="src"
+    ></webview>
+  </div>
+</template>
+
+<script>
+  import is from 'electron-is'
+  import { Loading } from 'element-ui'
+
+  import {
+    openExternal
+  } from '@/components/Native/utils'
+
+  export default {
+    name: 'mo-browser',
+    components: {
+    },
+    props: {
+      src: {
+        type: String,
+        default: ''
+      }
+    },
+    data () {
+      return {
+        loading: null
+      }
+    },
+    computed: {
+      isRenderer: () => is.renderer()
+    },
+    mounted () {
+      const { webview } = this.$refs
+
+      webview.addEventListener('did-start-loading', this.loadStart.bind(this))
+      webview.addEventListener('did-stop-loading', this.loadStop.bind(this))
+      webview.addEventListener('dom-ready', this.ready.bind(this))
+    },
+    methods: {
+      loadStart () {
+        const { webviewViewport } = this.$refs
+        this.loading = Loading.service({
+          target: webviewViewport
+        })
+      },
+      loadStop () {
+        this.$nextTick(() => {
+          this.loading.close()
+        })
+      },
+      ready () {
+        const { webview } = this.$refs
+
+        const webContents = this.$electron.remote.webContents.fromId(webview.getWebContentsId())
+        webContents.on('new-window', (event, url) => {
+          event.preventDefault()
+          openExternal(url)
+        })
+      }
+    }
+  }
+</script>
+
+<style lang="scss">
+.webview-viewport {
+  position: relative;
+}
+.mo-webview {
+  display: inline-flex;;
+  flex: 1;
+  flex-basis: auto;
+}
+</style>

src/renderer/components/Command/index.js

@@ -1,10 +1,12 @@
+import { Message } from 'element-ui'
+import { base64StringToBlob } from 'blob-util'
+
 import router from '@/router'
 import store from '@/store'
-import CommandManager from './CommandManager'
-import { Message } from 'element-ui'
-import { getLocaleManager } from '@/components/Locale'
-import { base64StringToBlob } from 'blob-util'
 import { buildFileList } from '@shared/utils'
+import { ADD_TASK_TYPE } from '@shared/constants'
+import { getLocaleManager } from '@/components/Locale'
+import CommandManager from './CommandManager'
 
 const commands = new CommandManager()
 const i18n = getLocaleManager().getI18n()
@@ -21,33 +23,37 @@ function showAboutPanel () {
   store.dispatch('app/showAboutPanel')
 }
 
-function showAddTask (taskType = 'uri', task = '') {
-  if (taskType === 'uri' && task) {
+function showAddTask (taskType = ADD_TASK_TYPE.URI, task = '') {
+  if (taskType === ADD_TASK_TYPE.URI && task) {
     store.dispatch('app/updateAddTaskUrl', task)
   }
   store.dispatch('app/showAddTaskDialog', taskType)
 }
 
 function showAddBtTask () {
-  store.dispatch('app/showAddTaskDialog', 'torrent')
+  store.dispatch('app/showAddTaskDialog', ADD_TASK_TYPE.TORRENT)
 }
 
 function showAddBtTaskWithFile (fileName, base64Data = '') {
   const blob = base64StringToBlob(base64Data, 'application/x-bittorrent')
   const file = new File([blob], fileName, { type: 'application/x-bittorrent' })
   const fileList = buildFileList(file)
-  store.dispatch('app/showAddTaskDialog', 'torrent')
+  store.dispatch('app/showAddTaskDialog', ADD_TASK_TYPE.TORRENT)
   setTimeout(() => {
     store.dispatch('app/addTaskAddTorrents', { fileList })
   }, 200)
 }
 
 function navigateTaskList (status = 'active') {
-  router.push({ path: `/task/${status}` })
+  router.push({ path: `/task/${status}` }).catch(err => {
+    console.log(err)
+  })
 }
 
 function navigatePreferences () {
-  router.push({ path: '/preference' })
+  router.push({ path: '/preference' }).catch(err => {
+    console.log(err)
+  })
 }
 
 function showUnderDevelopmentMessage () {
@@ -55,11 +61,11 @@ function showUnderDevelopmentMessage () {
 }
 
 function pauseTask () {
-  showUnderDevelopmentMessage()
+  store.dispatch('task/batchPauseSelectedTasks')
 }
 
 function resumeTask () {
-  showUnderDevelopmentMessage()
+  store.dispatch('task/batchResumeSelectedTasks')
 }
 
 function deleteTask () {
@@ -82,6 +88,10 @@ function resumeAllTask () {
   store.dispatch('task/resumeAllTask')
 }
 
+function selectAllTask () {
+  store.dispatch('task/selectAllTask')
+}
+
 commands.register('application:system-theme', updateSystemTheme)
 commands.register('application:theme', updateTheme)
 commands.register('application:about', showAboutPanel)
@@ -98,6 +108,7 @@ commands.register('application:move-task-up', moveTaskUp)
 commands.register('application:move-task-down', moveTaskDown)
 commands.register('application:pause-all-task', pauseAllTask)
 commands.register('application:resume-all-task', resumeAllTask)
+commands.register('application:select-all-task', selectAllTask)
 
 export {
   commands

src/renderer/components/DragSelect/Index.vue

@@ -0,0 +1,162 @@
+<template>
+  <div
+    ref="container"
+    style="position: relative; user-select: none; overflow-x: hidden; touch-action: none;"
+  >
+    <slot v-bind="{ selected: intersected }" />
+  </div>
+</template>
+
+<script>
+  const getDimensions = (p1, p2) => ({
+    width: Math.abs(p1.x - p2.x),
+    height: Math.abs(p1.y - p2.y)
+  })
+
+  const collisionCheck = (node1, node2) =>
+    node1.left < node2.left + node2.width &&
+    node1.left + node1.width > node2.left &&
+    node1.top < node2.top + node2.height &&
+    node1.top + node1.height > node2.top
+
+  export default {
+    name: 'mo-drag-select',
+    props: {
+      attribute: {
+        type: String,
+        required: true
+      },
+      color: {
+        type: String,
+        default: '#bad7fb'
+      },
+      opacity: {
+        type: Number,
+        default: 0.7
+      }
+    },
+    data () {
+      return {
+        intersected: [],
+        children: []
+      }
+    },
+    watch: {
+      intersected (i) {
+        this.$emit('change', i)
+      }
+    },
+    mounted () {
+      const { container } = this.$refs
+      const self = this
+
+      let containerRect = container.getBoundingClientRect()
+
+      const getCoords = e => ({
+        x: e.clientX - containerRect.left,
+        y: e.clientY - containerRect.top
+      })
+
+      const box = this.createBox()
+      let start = { x: 0, y: 0 }
+      let end = { x: 0, y: 0 }
+
+      function touchStart (e) {
+        e.preventDefault()
+        startDrag(e.touches[0])
+      }
+
+      function touchMove (e) {
+        e.preventDefault()
+        drag(e.touches[0])
+      }
+
+      function startDrag (e) {
+        containerRect = container.getBoundingClientRect()
+        self.children = container.childNodes
+        start = getCoords(e)
+        end = start
+        document.addEventListener('mousemove', drag)
+        document.addEventListener('touchmove', touchMove)
+
+        box.style.top = start.y + 'px'
+        box.style.left = start.x + 'px'
+
+        container.prepend(box)
+        self.intersection(box)
+      }
+
+      function drag (e) {
+        end = getCoords(e)
+        const dimensions = getDimensions(start, end)
+
+        if (end.x < start.x) {
+          box.style.left = end.x + 'px'
+        }
+        if (end.y < start.y) {
+          box.style.top = end.y + 'px'
+        }
+        box.style.width = dimensions.width + 'px'
+        box.style.height = dimensions.height + 'px'
+
+        self.intersection(box)
+      }
+
+      function endDrag () {
+        start = { x: 0, y: 0 }
+        end = { x: 0, y: 0 }
+
+        box.style.width = 0
+        box.style.height = 0
+
+        document.removeEventListener('mousemove', drag)
+        document.removeEventListener('touchmove', touchMove)
+        box.remove()
+      }
+
+      container.addEventListener('mousedown', startDrag)
+      container.addEventListener('touchstart', touchStart)
+
+      document.addEventListener('mouseup', endDrag)
+      document.addEventListener('touchend', endDrag)
+
+      this.$once('on:destroy', () => {
+        container.removeEventListener('mousedown', startDrag)
+        container.removeEventListener('touchstart', touchStart)
+        document.removeEventListener('mouseup', endDrag)
+        document.removeEventListener('touchend', endDrag)
+      })
+    },
+    methods: {
+      createBox () {
+        const box = document.createElement('div')
+        box.setAttribute('data-drag-box-component', '')
+        box.style.position = 'absolute'
+        box.style.backgroundColor = this.color
+        box.style.opacity = this.opacity
+        box.style.zIndex = 1000
+
+        return box
+      },
+      intersection (box) {
+        const { children } = this
+        const rect = box.getBoundingClientRect()
+        const intersected = []
+
+        for (let i = 0; i < children.length; i++) {
+          if (collisionCheck(rect, children[i].getBoundingClientRect())) {
+            const attr = children[i].getAttribute(this.attribute)
+            if (children[i].hasAttribute(this.attribute)) {
+              intersected.push(attr)
+            }
+          }
+        }
+
+        if (
+          JSON.stringify([...intersected]) !==
+          JSON.stringify([...this.intersected])
+        ) { this.intersected = intersected }
+      }
+    }
+  }
+</script>

src/renderer/components/Dragger/Index.vue

@@ -3,46 +3,48 @@
 </template>
 
 <script>
-export default {
-  name: 'mo-dragger',
-  mounted () {
-    this.preventDefault = ev => ev.preventDefault()
-    let count = 0
-    this.onDragEnter = (ev) => {
-      if (count === 0) {
-        this.$store.dispatch('app/showAddTaskDialog', 'torrent')
+  import { ADD_TASK_TYPE } from '@shared/constants'
+
+  export default {
+    name: 'mo-dragger',
+    mounted () {
+      this.preventDefault = ev => ev.preventDefault()
+      let count = 0
+      this.onDragEnter = (ev) => {
+        if (count === 0) {
+          this.$store.dispatch('app/showAddTaskDialog', ADD_TASK_TYPE.TORRENT)
+        }
+        count++
       }
-      count++
-    }
 
-    this.onDragLeave = (ev) => {
-      count--
-      if (count === 0) {
-        this.$store.dispatch('app/hideAddTaskDialog')
+      this.onDragLeave = (ev) => {
+        count--
+        if (count === 0) {
+          this.$store.dispatch('app/hideAddTaskDialog')
+        }
       }
-    }
 
-    this.onDrop = (ev) => {
-      count = 0
+      this.onDrop = (ev) => {
+        count = 0
 
-      const fileList = [...ev.dataTransfer.files]
-        .map(item => ({ raw: item, name: item.name }))
-        .filter(item => /\.torrent$/.test(item.name))
-      if (!fileList.length) {
-        this.$msg.error(this.$t('task.select-torrent'))
+        const fileList = [...ev.dataTransfer.files]
+          .map(item => ({ raw: item, name: item.name }))
+          .filter(item => /\.torrent$/.test(item.name))
+        if (!fileList.length) {
+          this.$msg.error(this.$t('task.select-torrent'))
+        }
       }
-    }
 
-    document.addEventListener('dragover', this.preventDefault)
-    document.body.addEventListener('dragenter', this.onDragEnter)
-    document.body.addEventListener('dragleave', this.onDragLeave)
-    document.body.addEventListener('drop', this.onDrop)
-  },
-  destroyed () {
-    document.removeEventListener('dragover', this.preventDefault)
-    document.body.removeEventListener('dragenter', this.onDragEnter)
-    document.body.removeEventListener('dragleave', this.onDragLeave)
-    document.body.removeEventListener('drop', this.onDrop)
+      document.addEventListener('dragover', this.preventDefault)
+      document.body.addEventListener('dragenter', this.onDragEnter)
+      document.body.addEventListener('dragleave', this.onDragLeave)
+      document.body.addEventListener('drop', this.onDrop)
+    },
+    destroyed () {
+      document.removeEventListener('dragover', this.preventDefault)
+      document.body.removeEventListener('dragenter', this.onDragEnter)
+      document.body.removeEventListener('dragleave', this.onDragLeave)
+      document.body.removeEventListener('drop', this.onDrop)
+    }
   }
-}
 </script>

src/renderer/components/Icons/Icon.vue

@@ -58,171 +58,171 @@
 </style>
 
 <script>
-let icons = {}
+  const icons = {}
 
-export default {
-  name: 'fa-icon',
-  props: {
-    name: {
-      type: String,
-      validator (val) {
-        if (val && !(val in icons)) {
-          console.warn(`Invalid prop: prop "name" is referring to an unregistered icon "${val}".` +
-            `\nPlease make sure you have imported this icon before using it.`)
+  export default {
+    name: 'fa-icon',
+    props: {
+      name: {
+        type: String,
+        validator (val) {
+          if (val && !(val in icons)) {
+            console.warn(`Invalid prop: prop "name" is referring to an unregistered icon "${val}".` +
+              '\nPlease make sure you have imported this icon before using it.')
+            return false
+          }
+          return true
+        }
+      },
+      scale: [Number, String],
+      spin: Boolean,
+      inverse: Boolean,
+      pulse: Boolean,
+      flip: {
+        validator (val) {
+          return val === 'horizontal' || val === 'vertical'
+        }
+      },
+      label: String
+    },
+    data () {
+      return {
+        x: false,
+        y: false,
+        childrenWidth: 0,
+        childrenHeight: 0,
+        outerScale: 1
+      }
+    },
+    computed: {
+      normalizedScale () {
+        let scale = this.scale
+        scale = typeof scale === 'undefined' ? 1 : Number(scale)
+        if (isNaN(scale) || scale <= 0) {
+          console.warn('Invalid prop: prop "scale" should be a number over 0.', this)
+          return this.outerScale
+        }
+        return scale * this.outerScale
+      },
+      klass () {
+        return {
+          'fa-icon': true,
+          'fa-spin': this.spin,
+          'fa-flip-horizontal': this.flip === 'horizontal',
+          'fa-flip-vertical': this.flip === 'vertical',
+          'fa-inverse': this.inverse,
+          'fa-pulse': this.pulse,
+          [this.$options.name]: true
+        }
+      },
+      icon () {
+        if (this.name) {
+          return icons[this.name]
+        }
+        return null
+      },
+      box () {
+        if (this.icon) {
+          return `0 0 ${this.icon.width} ${this.icon.height}`
+        }
+        return `0 0 ${this.width} ${this.height}`
+      },
+      ratio () {
+        if (!this.icon) {
+          return 1
+        }
+        const { width, height } = this.icon
+        return Math.max(width, height) / 16
+      },
+      width () {
+        return this.childrenWidth || (this.icon && this.icon.width / this.ratio * this.normalizedScale) || 0
+      },
+      height () {
+        return this.childrenHeight || (this.icon && this.icon.height / this.ratio * this.normalizedScale) || 0
+      },
+      style () {
+        if (this.normalizedScale === 1) {
           return false
         }
-        return true
+        return {
+          fontSize: this.normalizedScale + 'em'
+        }
+      },
+      raw () {
+        // generate unique id for each icon's SVG element with ID
+        if (!this.icon || !this.icon.raw) {
+          return null
+        }
+        let raw = this.icon.raw
+        const ids = {}
+        raw = raw.replace(/\s(?:xml:)?id=(["']?)([^"')\s]+)\1/g, (match, quote, id) => {
+          const uniqueId = getId()
+          ids[id] = uniqueId
+          return ` id="${uniqueId}"`
+        })
+        raw = raw.replace(/#(?:([^'")\s]+)|xpointer\(id\((['"]?)([^')]+)\2\)\))/g, (match, rawId, _, pointerId) => {
+          const id = rawId || pointerId
+          if (!id || !ids[id]) {
+            return match
+          }
+
+          return `#${ids[id]}`
+        })
+
+        return raw
       }
     },
-    scale: [Number, String],
-    spin: Boolean,
-    inverse: Boolean,
-    pulse: Boolean,
-    flip: {
-      validator (val) {
-        return val === 'horizontal' || val === 'vertical'
+    mounted () {
+      if (!this.name && this.$children.length === 0) {
+        console.warn('Invalid prop: prop "name" is required.')
+        return
       }
-    },
-    label: String
-  },
-  data () {
-    return {
-      x: false,
-      y: false,
-      childrenWidth: 0,
-      childrenHeight: 0,
-      outerScale: 1
-    }
-  },
-  computed: {
-    normalizedScale () {
-      let scale = this.scale
-      scale = typeof scale === 'undefined' ? 1 : Number(scale)
-      if (isNaN(scale) || scale <= 0) {
-        console.warn(`Invalid prop: prop "scale" should be a number over 0.`, this)
-        return this.outerScale
-      }
-      return scale * this.outerScale
-    },
-    klass () {
-      return {
-        'fa-icon': true,
-        'fa-spin': this.spin,
-        'fa-flip-horizontal': this.flip === 'horizontal',
-        'fa-flip-vertical': this.flip === 'vertical',
-        'fa-inverse': this.inverse,
-        'fa-pulse': this.pulse,
-        [this.$options.name]: true
-      }
-    },
-    icon () {
-      if (this.name) {
-        return icons[this.name]
-      }
-      return null
-    },
-    box () {
+
       if (this.icon) {
-        return `0 0 ${this.icon.width} ${this.icon.height}`
+        return
       }
-      return `0 0 ${this.width} ${this.height}`
-    },
-    ratio () {
-      if (!this.icon) {
-        return 1
-      }
-      let { width, height } = this.icon
-      return Math.max(width, height) / 16
-    },
-    width () {
-      return this.childrenWidth || (this.icon && this.icon.width / this.ratio * this.normalizedScale) || 0
-    },
-    height () {
-      return this.childrenHeight || (this.icon && this.icon.height / this.ratio * this.normalizedScale) || 0
-    },
-    style () {
-      if (this.normalizedScale === 1) {
-        return false
-      }
-      return {
-        fontSize: this.normalizedScale + 'em'
-      }
-    },
-    raw () {
-      // generate unique id for each icon's SVG element with ID
-      if (!this.icon || !this.icon.raw) {
-        return null
-      }
-      let raw = this.icon.raw
-      let ids = {}
-      raw = raw.replace(/\s(?:xml:)?id=(["']?)([^"')\s]+)\1/g, (match, quote, id) => {
-        let uniqueId = getId()
-        ids[id] = uniqueId
-        return ` id="${uniqueId}"`
+
+      let width = 0
+      let height = 0
+      this.$children.forEach(child => {
+        child.outerScale = this.normalizedScale
+
+        width = Math.max(width, child.width)
+        height = Math.max(height, child.height)
       })
-      raw = raw.replace(/#(?:([^'")\s]+)|xpointer\(id\((['"]?)([^')]+)\2\)\))/g, (match, rawId, _, pointerId) => {
-        let id = rawId || pointerId
-        if (!id || !ids[id]) {
-          return match
+      this.childrenWidth = width
+      this.childrenHeight = height
+      this.$children.forEach(child => {
+        child.x = (width - child.width) / 2
+        child.y = (height - child.height) / 2
+      })
+    },
+    register (data) {
+      for (const name in data) {
+        const icon = data[name]
+
+        if (!icon.paths) {
+          icon.paths = []
+        }
+        if (icon.d) {
+          icon.paths.push({ d: icon.d })
         }
 
-        return `#${ids[id]}`
-      })
+        if (!icon.polygons) {
+          icon.polygons = []
+        }
+        if (icon.points) {
+          icon.polygons.push({ points: icon.points })
+        }
 
-      return raw
-    }
-  },
-  mounted () {
-    if (!this.name && this.$children.length === 0) {
-      console.warn(`Invalid prop: prop "name" is required.`)
-      return
-    }
-
-    if (this.icon) {
-      return
-    }
-
-    let width = 0
-    let height = 0
-    this.$children.forEach(child => {
-      child.outerScale = this.normalizedScale
-
-      width = Math.max(width, child.width)
-      height = Math.max(height, child.height)
-    })
-    this.childrenWidth = width
-    this.childrenHeight = height
-    this.$children.forEach(child => {
-      child.x = (width - child.width) / 2
-      child.y = (height - child.height) / 2
-    })
-  },
-  register (data) {
-    for (let name in data) {
-      let icon = data[name]
-
-      if (!icon.paths) {
-        icon.paths = []
-      }
-      if (icon.d) {
-        icon.paths.push({ d: icon.d })
+        icons[name] = icon
       }
+    },
+    icons
+  }
 
-      if (!icon.polygons) {
-        icon.polygons = []
-      }
-      if (icon.points) {
-        icon.polygons.push({ points: icon.points })
-      }
-
-      icons[name] = icon
-    }
-  },
-  icons
-}
-
-let cursor = 0xd4937
-function getId () {
-  return `fa-${(cursor++).toString(16)}`
-}
+  let cursor = 0xd4937
+  function getId () {
+    return `fa-${(cursor++).toString(16)}`
+  }
 </script>

src/renderer/components/Icons/arrow-down.js

@@ -0,0 +1,18 @@
+import Icon from '@/components/Icons/Icon'
+
+Icon.register({
+  'arrow-down': {
+    'width': 24,
+    'height': 24,
+    'raw': `<g class="nc-icon-wrapper" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" stroke="currentColor">
+      <line data-cap="butt" data-color="color-2" fill="none" stroke-miterlimit="10" x1="12" y1="2" x2="12" y2="22"/>
+      <polyline fill="none" stroke="currentColor" stroke-miterlimit="10" points="19,15 12,22 5,15 "/>
+    </g>`,
+    'g': {
+      'stroke': 'currentColor',
+      'stroke-linecap': 'round',
+      'stroke-linejoin': 'round',
+      'stroke-width': '2'
+    }
+  }
+})

src/renderer/components/Icons/arrow-up.js

@@ -0,0 +1,18 @@
+import Icon from '@/components/Icons/Icon'
+
+Icon.register({
+  'arrow-up': {
+    'width': 24,
+    'height': 24,
+    'raw': `<g class="nc-icon-wrapper" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" stroke="currentColor">
+      <line data-cap="butt" data-color="color-2" fill="none" stroke-miterlimit="10" x1="12" y1="22" x2="12" y2="2"/>
+      <polyline fill="none" stroke="currentColor" stroke-miterlimit="10" points="5,9 12,2 19,9 "/>
+    </g>`,
+    'g': {
+      'stroke': 'currentColor',
+      'stroke-linecap': 'round',
+      'stroke-linejoin': 'round',
+      'stroke-width': '2'
+    }
+  }
+})

src/renderer/components/Icons/audio.js

@@ -0,0 +1,20 @@
+import Icon from '@/components/Icons/Icon'
+
+Icon.register({
+  'audio': {
+    'width': 24,
+    'height': 24,
+    'raw': `<rect x="4" y="3" width="16" height="18" fill="none" stroke="currentColor" stroke-miterlimit="10"/>
+      <line data-color="color-2" x1="1" y1="6" x2="1" y2="18" fill="none" stroke-miterlimit="10"/>
+      <line data-color="color-2" x1="23" y1="6" x2="23" y2="18" fill="none" stroke-miterlimit="10"/>
+      <polyline data-cap="butt" points="10 15 10 8 16 8 16 14" fill="none" stroke="currentColor" stroke-miterlimit="10"/>
+      <circle data-stroke="none" cx="9" cy="15" r="2" stroke="none"/>
+      <circle data-stroke="none" cx="15" cy="14" r="2" stroke="none"/>`,
+    'g': {
+      'stroke': 'currentColor',
+      'stroke-linecap': 'round',
+      'stroke-linejoin': 'round',
+      'stroke-width': '2'
+    }
+  }
+})

src/renderer/components/Icons/dice.js

@@ -0,0 +1,21 @@
+import Icon from '@/components/Icons/Icon'
+
+Icon.register({
+  'dice': {
+    'width': 24,
+    'height': 24,
+    'raw': `<polyline data-cap="butt" fill="none" stroke="currentColor" stroke-miterlimit="10" points="17,23 17,7 1,7 "/>
+      <line data-cap="butt" fill="none" stroke="currentColor" stroke-miterlimit="10" x1="17" y1="7" x2="23" y2="1"/>
+      <polygon fill="none" stroke="currentColor" stroke-miterlimit="10" points="17,23 23,17 23,1 7,1 1,7 1,23 "/>
+      <circle data-color="color-2" data-stroke="none" cx="12" cy="12" r="1" stroke-linejoin="miter" stroke-linecap="square" stroke="none"/>
+      <circle data-color="color-2" data-stroke="none" cx="6" cy="12" r="1" stroke-linejoin="miter" stroke-linecap="square" stroke="none"/>
+      <circle data-color="color-2" data-stroke="none" cx="12" cy="18" r="1" stroke-linejoin="miter" stroke-linecap="square" stroke="none"/>
+      <circle data-color="color-2" data-stroke="none" cx="6" cy="18" r="1" stroke-linejoin="miter" stroke-linecap="square" stroke="none"/>`,
+    'g': {
+      'stroke': 'currentColor',
+      'stroke-linecap': 'round',
+      'stroke-linejoin': 'round',
+      'stroke-width': '2'
+    }
+  }
+})

src/renderer/components/Icons/image.js

@@ -0,0 +1,17 @@
+import Icon from '@/components/Icons/Icon'
+
+Icon.register({
+  'image': {
+    'width': 24,
+    'height': 24,
+    'raw': `<polyline data-cap="butt" data-color="color-2" points="1 20 6 14 10 18 17 10 23 17" fill="none" stroke-miterlimit="10"/>
+      <rect x="1" y="3" width="22" height="18" fill="none" stroke="currentColor" stroke-miterlimit="10"/>
+      <circle data-color="color-2" cx="9" cy="8" r="2" fill="none" stroke-miterlimit="10"/>`,
+    'g': {
+      'stroke': 'currentColor',
+      'stroke-linecap': 'round',
+      'stroke-linejoin': 'round',
+      'stroke-width': '2'
+    }
+  }
+})

src/renderer/components/Icons/menu-add.js

@@ -4,8 +4,8 @@ Icon.register({
   'menu-add': {
     'width': 24,
     'height': 24,
-    'raw': `<line fill="none" stroke="#fff" stroke-miterlimit="10" x1="12" y1="2" x2="12" y2="22" />
-      <line fill="none" stroke="#fff" stroke-miterlimit="10" x1="22" y1="12" x2="2" y2="12" />`,
+    'raw': `<line fill="none" stroke-miterlimit="10" x1="12" y1="2" x2="12" y2="22" />
+      <line fill="none" stroke-miterlimit="10" x1="22" y1="12" x2="2" y2="12" />`,
     'g': {
       'stroke': 'currentColor',
       'stroke-linecap': 'round',

src/renderer/components/Icons/node.js

@@ -0,0 +1,20 @@
+import Icon from '@/components/Icons/Icon'
+
+Icon.register({
+  'node': {
+    'width': 24,
+    'height': 24,
+    'raw': `
+      <polyline data-cap="butt" fill="none" stroke-miterlimit="10" points="12,9 12,13 7.8,16.1 "/>
+      <line data-cap="butt" fill="none" stroke-miterlimit="10" x1="12" y1="13" x2="16.2" y2="16.1"/>
+      <circle fill="none" stroke="currentColor" stroke-miterlimit="10" cx="12" cy="5" r="4"/>
+      <circle fill="none" stroke="currentColor" stroke-miterlimit="10" cx="5" cy="19" r="4"/>
+      <circle fill="none" stroke="currentColor" stroke-miterlimit="10" cx="19" cy="19" r="4"/>`,
+    'g': {
+      'stroke': 'currentColor',
+      'stroke-linecap': 'round',
+      'stroke-linejoin': 'round',
+      'stroke-width': '2'
+    }
+  }
+})

src/renderer/components/Icons/task-history.js

@@ -0,0 +1,11 @@
+import Icon from '@/components/Icons/Icon'
+
+Icon.register({
+  'task-history': {
+    'width': 24,
+    'height': 24,
+    'paths': [{
+      'd': 'M12,0C5.383,0,0,5.383,0,12s5.383,12,12,12s12-5.383,12-12S18.617,0,12,0z M19,13h-8V5h2v6h6V13z'
+    }]
+  }
+})

src/renderer/components/Icons/task-restart.js

@@ -0,0 +1,17 @@
+import Icon from '@/components/Icons/Icon'
+
+Icon.register({
+  'task-restart': {
+    'width': 24,
+    'height': 24,
+    'raw': `<path data-cap="butt" fill="none" stroke="currentColor" stroke-miterlimit="10" d="M6.121,20.121 C7.727,21.22,9.907,22,12,22c5.523,0,10-4.477,10-10c0-5.523-4.477-10-10-10C8.101,2,4.728,4.233,3.078,7.488"/>
+      <polyline fill="none" stroke="currentColor" stroke-miterlimit="10" points="2.278,1.588 3.078,7.488 9.078,6.688 "/>
+      <circle data-color="color-2" fill="none" stroke-miterlimit="10" cx="4" cy="18" r="3"/>`,
+    'g': {
+      'stroke': 'currentColor',
+      'stroke-linecap': 'round',
+      'stroke-linejoin': 'round',
+      'stroke-width': '2'
+    }
+  }
+})

src/renderer/components/Icons/video.js

@@ -0,0 +1,22 @@
+import Icon from '@/components/Icons/Icon'
+
+Icon.register({
+  'video': {
+    'width': 24,
+    'height': 24,
+    'raw': `<line data-cap="butt" data-color="color-2" x1="2" y1="6" x2="22" y2="6" fill="none" stroke-miterlimit="10"/>
+      <line data-cap="butt" data-color="color-2" x1="12" y1="2" x2="12" y2="22" fill="none" stroke-miterlimit="10"/>
+      <line data-cap="butt" data-color="color-2" x1="7" y1="2" x2="7" y2="6" fill="none" stroke-miterlimit="10"/>
+      <line data-cap="butt" data-color="color-2" x1="17" y1="2" x2="17" y2="6" fill="none" stroke-miterlimit="10"/>
+      <line data-cap="butt" data-color="color-2" x1="2" y1="18" x2="22" y2="18" fill="none" stroke-miterlimit="10"/>
+      <line data-cap="butt" data-color="color-2" x1="7" y1="22" x2="7" y2="18" fill="none" stroke-miterlimit="10"/>
+      <line data-cap="butt" data-color="color-2" x1="17" y1="22" x2="17" y2="18" fill="none" stroke-miterlimit="10"/>
+      <rect x="2" y="2" width="20" height="20" fill="none" stroke="currentColor" stroke-miterlimit="10"/>`,
+    'g': {
+      'stroke': 'currentColor',
+      'stroke-linecap': 'round',
+      'stroke-linejoin': 'round',
+      'stroke-width': '2'
+    }
+  }
+})

src/renderer/components/Main.vue

@@ -14,7 +14,6 @@
   import { mapState } from 'vuex'
   import AboutPanel from '@/components/About/AboutPanel'
   import Aside from '@/components/Aside/Index'
-  import Subnav from '@/components/Subnav/Index'
   import Speedometer from '@/components/Speedometer/Speedometer'
   import AddTask from '@/components/Task/AddTask'
   import TaskItemInfo from '@/components/Task/TaskItemInfo'
@@ -25,7 +24,6 @@
     components: {
       [AboutPanel.name]: AboutPanel,
       [Aside.name]: Aside,
-      [Subnav.name]: Subnav,
       [Speedometer.name]: Speedometer,
       [AddTask.name]: AddTask,
       [TaskItemInfo.name]: TaskItemInfo,
@@ -52,5 +50,6 @@
     position: fixed;
     right: 36px;
     bottom: 24px;
+    z-index: 20;
   }
 </style>

src/renderer/components/Native/EngineClient.vue

@@ -8,11 +8,10 @@
   import api from '@/api'
   import {
     showItemInFolder,
-    addToRecentTask,
-    openDownloadDock,
-    showDownloadSpeedInDock
+    addToRecentTask
   } from '@/components/Native/utils'
   import {
+    bytesToSize,
     getTaskName,
     getTaskFullPath
   } from '@shared/utils'
@@ -40,15 +39,16 @@
       })
     },
     watch: {
-      downloadSpeed: function (val, oldVal) {
-        showDownloadSpeedInDock(val)
+      downloadSpeed (val, oldVal) {
+        const speed = val > 0 ? `${bytesToSize(val)}/s` : ''
+        this.$electron.ipcRenderer.send('event', 'download-speed-change', speed)
       },
-      numActive: function (val, oldVal) {
+      numActive (val, oldVal) {
         this.downloading = val > 0
       },
-      downloading: function (val, oldVal) {
+      downloading (val, oldVal) {
         if (val !== oldVal && this.isRenderer) {
-          this.$electron.ipcRenderer.send('download-status-change', val)
+          this.$electron.ipcRenderer.send('event', 'download-status-change', val)
         }
       }
     },
@@ -59,7 +59,7 @@
             console.warn(`fetchTaskItem fail: ${e.message}`)
           })
       },
-      onDownloadStart: function (event) {
+      onDownloadStart (event) {
         this.$store.dispatch('task/fetchList')
         this.$store.dispatch('app/resetInterval')
         console.log('aria2 onDownloadStart', event)
@@ -71,7 +71,7 @@
             this.$msg.info(message)
           })
       },
-      onDownloadPause: function (event) {
+      onDownloadPause (event) {
         console.log('aria2 onDownloadPause')
         const [{ gid }] = event
         this.fetchTaskItem({ gid })
@@ -81,7 +81,7 @@
             this.$msg.info(message)
           })
       },
-      onDownloadStop: function (event) {
+      onDownloadStop (event) {
         console.log('aria2 onDownloadStop')
         const [{ gid }] = event
         this.fetchTaskItem({ gid })
@@ -91,17 +91,25 @@
             this.$msg.info(message)
           })
       },
-      onDownloadError: function (event) {
-        console.log('aria2 onDownloadError', event)
+      onDownloadError (event) {
         const [{ gid }] = event
         this.fetchTaskItem({ gid })
           .then((task) => {
             const taskName = getTaskName(task)
+            const { errorCode, errorMessage } = task
+            console.error(`[Motrix] download error gid: ${gid}, #${errorCode}, ${errorMessage}`)
             const message = this.$t('task.download-error-message', { taskName })
-            this.$msg.error(message)
+            const link = `<a target="_blank" href="https://github.com/agalwood/Motrix/wiki/Error#${errorCode}" rel="noopener noreferrer">#${errorCode}</a>`
+            this.$msg({
+              type: 'error',
+              showClose: true,
+              duration: 5000,
+              dangerouslyUseHTMLString: true,
+              message: `${message} ${link}`
+            })
           })
       },
-      onDownloadComplete: function (event) {
+      onDownloadComplete (event) {
         console.log('aria2 onDownloadComplete')
         this.$store.dispatch('task/fetchList')
         const [{ gid }] = event
@@ -110,7 +118,7 @@
             this.handleDownloadComplete(task, false)
           })
       },
-      onBtDownloadComplete: function (event) {
+      onBtDownloadComplete (event) {
         console.log('aria2 onBtDownloadComplete')
         this.$store.dispatch('task/fetchList')
         const [{ gid }] = event
@@ -119,15 +127,16 @@
             this.handleDownloadComplete(task, true)
           })
       },
-      handleDownloadComplete: function (task, isBT) {
+      handleDownloadComplete (task, isBT) {
         const path = getTaskFullPath(task)
 
-        addToRecentTask(task)
-        openDownloadDock(path)
-
         this.showTaskCompleteNotify(task, isBT, path)
+
+        addToRecentTask(task)
+
+        this.$electron.ipcRenderer.send('event', 'task-download-complete', task, path)
       },
-      showTaskCompleteNotify: function (task, isBT, path) {
+      showTaskCompleteNotify (task, isBT, path) {
         const taskName = getTaskName(task)
         const message = isBT
           ? this.$t('task.bt-download-complete-message', { taskName })
@@ -142,11 +151,11 @@
           return
         }
 
-        /* eslint-disable no-new */
         const notifyMessage = isBT
           ? this.$t('task.bt-download-complete-notify')
           : this.$t('task.download-complete-notify')
 
+        /* eslint-disable no-new */
         const notify = new Notification(notifyMessage, {
           body: `${taskName}${tips}`
         })
@@ -156,7 +165,7 @@
           })
         }
       },
-      showTaskErrorNotify: function (task) {
+      showTaskErrorNotify (task) {
         const taskName = getTaskName(task)
 
         const message = this.$t('task.download-fail-message', { taskName })
@@ -171,7 +180,7 @@
           body: taskName
         })
       },
-      bindEngineEvents: function () {
+      bindEngineEvents () {
         api.client.on('onDownloadStart', this.onDownloadStart)
         // api.client.on('onDownloadPause', this.onDownloadPause)
         api.client.on('onDownloadStop', this.onDownloadStop)
@@ -179,7 +188,7 @@
         api.client.on('onDownloadError', this.onDownloadError)
         api.client.on('onBtDownloadComplete', this.onBtDownloadComplete)
       },
-      unbindEngineEvents: function () {
+      unbindEngineEvents () {
         api.client.removeListener('onDownloadStart', this.onDownloadStart)
         // api.client.removeListener('onDownloadPause', this.onDownloadPause)
         api.client.removeListener('onDownloadStop', this.onDownloadStop)
@@ -187,33 +196,37 @@
         api.client.removeListener('onDownloadError', this.onDownloadError)
         api.client.removeListener('onBtDownloadComplete', this.onBtDownloadComplete)
       },
-      startPolling: function () {
+      startPolling () {
         this.timer = setTimeout(() => {
           this.polling()
           this.startPolling()
         }, this.interval)
       },
-      polling: function () {
+      polling () {
         this.$store.dispatch('app/fetchGlobalStat')
         this.$store.dispatch('task/fetchList')
+
         if (this.taskItemInfoVisible && this.currentTaskItem) {
           this.$store.dispatch('task/fetchItem', this.currentTaskItem.gid)
         }
       },
-      stopPolling: function () {
+      stopPolling () {
         clearTimeout(this.timer)
         this.timer = null
       }
     },
-    created: function () {
-      this.$store.dispatch('app/fetchEngineInfo')
-      this.$store.dispatch('app/fetchEngineOptions')
-
-      this.startPolling()
-
+    created () {
       this.bindEngineEvents()
     },
-    destroyed: function () {
+    mounted () {
+      setTimeout(() => {
+        this.$store.dispatch('app/fetchEngineInfo')
+        this.$store.dispatch('app/fetchEngineOptions')
+
+        this.startPolling()
+      }, 100)
+    },
+    destroyed () {
       this.$store.dispatch('task/saveSession')
 
       this.unbindEngineEvents()

src/renderer/components/Native/Ipc.vue

@@ -31,14 +31,14 @@
     created: function () {
       this.bindIpcEvents()
       // id of the menu item
-      let visibleStates = {}
+      const visibleStates = {}
       if (is.mas()) {
         visibleStates['app.check-for-updates'] = false
         if (!this.enableEggFeatures) {
           visibleStates['task.new-bt-task'] = false
         }
       }
-      this.$electron.ipcRenderer.send('update-menu-states', visibleStates, null, null)
+      this.$electron.ipcRenderer.send('command', 'application:change-menu-states', visibleStates, null, null)
     },
     destroyed: function () {
       this.unbindIpcEvents()

src/renderer/components/Native/SelectDirectory.vue

@@ -18,11 +18,12 @@
       onFolderClick: function () {
         const self = this
         this.$electron.remote.dialog.showOpenDialog({
-          properties: ['openDirectory']
-        }, (filePaths) => {
-          if (!filePaths) {
+          properties: ['openDirectory', 'createDirectory']
+        }).then(({ canceled, filePaths }) => {
+          if (canceled || filePaths.length === 0) {
             return
           }
+
           const [path] = filePaths
           self.$emit('selected', path)
         })

src/renderer/components/Native/ShowInFolder.vue

@@ -6,6 +6,9 @@
 
 <script>
   import '@/components/Icons/folder'
+  import {
+    showItemInFolder
+  } from '@/components/Native/utils'
 
   export default {
     name: 'mo-show-in-folder',
@@ -21,7 +24,7 @@
         if (!this.path) {
           return
         }
-        this.$electron.shell.showItemInFolder(this.path, {
+        showItemInFolder(this.path, {
           errorMsg: this.$t('task.file-not-exist')
         })
       }

src/renderer/components/Native/TitleBar.vue

@@ -75,8 +75,8 @@
     z-index: 5100;
     > li {
       display: inline-block;
-      padding: 5px 10px;
-      margin: 0 5px;
+      padding: 5px 15px;
+      margin: 0;
       color: $--titlebar-actions-color;
       &:hover {
         background-color: $--titlebar-actions-active-background;

src/renderer/components/Native/utils.js

@@ -1,12 +1,13 @@
 import is from 'electron-is'
-import { existsSync } from 'fs'
+import { access, constants } from 'fs'
 import { Message } from 'element-ui'
+
 import {
   isMagnetTask,
   getTaskFullPath,
   bytesToSize
 } from '@shared/utils'
-import { LIGHT_THEME, DARK_THEME } from '@shared/constants'
+import { APP_THEME, TASK_STATUS } from '@shared/constants'
 
 const remote = is.renderer() ? require('electron').remote : {}
 
@@ -24,11 +25,16 @@ export function showItemInFolder (fullPath, { errorMsg }) {
   if (!fullPath) {
     return
   }
-  const result = remote.shell.showItemInFolder(fullPath)
-  if (!result && errorMsg) {
-    Message.error(errorMsg)
-  }
-  return result
+
+  access(fullPath, constants.F_OK, (err) => {
+    console.log(`${fullPath} ${err ? 'does not exist' : 'exists'}`)
+    if (err) {
+      Message.error(errorMsg)
+      return
+    }
+
+    remote.shell.showItemInFolder(fullPath)
+  })
 }
 
 export function openItem (fullPath, { errorMsg }) {
@@ -42,40 +48,44 @@ export function openItem (fullPath, { errorMsg }) {
   return result
 }
 
-export function moveTaskFilesToTrash (task, messages = {}) {
+export function moveTaskFilesToTrash (task) {
   /**
-   * 磁力链接任务，有 bittorrent，但没有 bittorrent.info ，
-   * 在没下完变成BT任务之前 path 不是一个完整路径，
-   * 未避免误删所在目录，所以删除时直接返回 true
+   * For magnet link tasks, there is bittorrent, but there is no bittorrent.info.
+   * The path is not a complete path before it becomes a BT task.
+   * In order to avoid accidentally deleting the directory
+   * where the task is located, it directly returns true when deleting.
    */
   if (isMagnetTask(task)) {
     return true
   }
 
-  const { pathErrorMsg, delFailMsg, delConfigFailMsg } = messages
-  const { dir } = task
+  const { dir, status } = task
   const path = getTaskFullPath(task)
   if (!path || dir === path) {
-    if (pathErrorMsg) {
-      Message.error(pathErrorMsg)
-    }
-    return false
+    throw new Error('task.file-path-error')
   }
 
-  const deleteResult1 = remote.shell.moveItemToTrash(path)
-  if (!deleteResult1 && delFailMsg) {
-    Message.error(delFailMsg)
+  let deleteResult1 = true
+  access(path, constants.F_OK, (err) => {
+    console.log(`${path} ${err ? 'does not exist' : 'exists'}`)
+    if (!err) {
+      deleteResult1 = remote.shell.moveItemToTrash(path)
+    }
+  })
+
+  // There is no configuration file for the completed task.
+  if (status === TASK_STATUS.COMPLETE) {
+    return deleteResult1
   }
 
   let deleteResult2 = true
   const extraFilePath = `${path}.aria2`
-  const isExtraExist = existsSync(extraFilePath)
-  if (isExtraExist) {
-    deleteResult2 = remote.shell.moveItemToTrash(extraFilePath)
-    if (!deleteResult2 && delConfigFailMsg) {
-      Message.error(delConfigFailMsg)
+  access(extraFilePath, constants.F_OK, (err) => {
+    console.log(`${extraFilePath} ${err ? 'does not exist' : 'exists'}`)
+    if (!err) {
+      deleteResult2 = remote.shell.moveItemToTrash(extraFilePath)
     }
-  }
+  })
 
   return deleteResult1 && deleteResult2
 }
@@ -125,10 +135,18 @@ export function clearRecentTasks () {
 }
 
 export function getSystemTheme () {
-  let result = LIGHT_THEME
+  let result = APP_THEME.LIGHT
   if (!is.macOS()) {
     return result
   }
-  result = remote.systemPreferences.isDarkMode() ? DARK_THEME : LIGHT_THEME
+  result = remote.nativeTheme.shouldUseDarkColors ? APP_THEME.DARK : APP_THEME.LIGHT
   return result
 }
+
+export const openExternal = (url, options) => {
+  if (!url) {
+    return
+  }
+
+  remote.shell.openExternal(url, options)
+}

src/renderer/components/Preference/Advanced.vue

@@ -1,7 +1,12 @@
 <template>
   <el-container class="content panel" direction="vertical">
     <el-header class="panel-header" height="84">
-      <h4>{{ title }}</h4>
+      <h4 class="hidden-xs-only">{{ title }}</h4>
+      <mo-subnav-switcher
+        :title="title"
+        :subnavs="subnavs"
+        class="hidden-sm-and-up"
+      />
     </el-header>
     <el-main class="panel-content">
       <el-form
@@ -10,36 +15,39 @@
         label-position="right"
         size="mini"
         :model="form"
-        :rules="rules">
-        <el-form-item :label="`${$t('preferences.appearance')}: `" :label-width="formLabelWidth">
+        :rules="rules"
+      >
+        <el-form-item
+          :label="`${$t('preferences.auto-update')}: `"
+          :label-width="formLabelWidth"
+        >
           <el-col class="form-item-sub" :span="24">
-            <mo-theme-switcher
-              v-model="form.theme"
-              @change="handleThemeChange"
-            />
-          </el-col>
-          <el-col v-if="showHideAppMenuOption" class="form-item-sub" :span="16">
-            <el-checkbox v-model="form.hideAppMenu">
-              {{ $t('preferences.hide-app-menu') }}
+            <el-checkbox v-model="form.autoCheckUpdate">
+              {{ $t('preferences.auto-check-update') }}
             </el-checkbox>
+            <div
+              class="el-form-item__info"
+              style="margin-top: 8px;"
+              v-if="form.lastCheckUpdateTime !== 0"
+            >
+              {{
+                $t('preferences.last-check-update-time') + ': ' +
+                (
+                  form.lastCheckUpdateTime !== 0 ?
+                    new Date(form.lastCheckUpdateTime).toLocaleString() :
+                    new Date().toLocaleString()
+                )
+              }}
+              <span class="action-link" @click.prevent="onCheckUpdateClick">
+                {{ $t('app.check-updates-now') }}
+              </span>
+            </div>
           </el-col>
         </el-form-item>
-        <el-form-item :label="`${$t('preferences.language')}: `" :label-width="formLabelWidth">
-          <el-col class="form-item-sub" :span="16">
-            <el-select
-              v-model="form.locale"
-              @change="handleLocaleChange"
-              :placeholder="$t('preferences.change-language')">
-              <el-option
-                v-for="item in locales"
-                :key="item.value"
-                :label="item.label"
-                :value="item.value">
-              </el-option>
-            </el-select>
-          </el-col>
-        </el-form-item>
-        <el-form-item :label="`${$t('preferences.proxy')}: `" :label-width="formLabelWidth">
+        <el-form-item
+          :label="`${$t('preferences.proxy')}: `"
+          :label-width="formLabelWidth"
+        >
           <el-switch
             v-model="form.useProxy"
             :active-text="$t('preferences.use-proxy')"
@@ -47,7 +55,11 @@
             >
           </el-switch>
         </el-form-item>
-        <el-form-item label="" :label-width="formLabelWidth" v-if="form.useProxy">
+        <el-form-item
+          :label-width="formLabelWidth"
+          v-if="form.useProxy"
+          style="margin-top: -16px;"
+        >
           <el-col class="form-item-sub" :span="16">
             <el-input
               placeholder="[http://][USER:PASSWORD@]HOST[:PORT]"
@@ -55,52 +67,176 @@
               v-model="form.allProxyBackup">
             </el-input>
           </el-col>
-        </el-form-item>
-        <el-form-item :label="`${$t('preferences.bt-tracker')}: `" :label-width="formLabelWidth">
-          <div class="bt-tracker">
+          <el-col class="form-item-sub" :span="20">
             <el-input
               type="textarea"
-              :autosize="{ minRows: 3, maxRows: 5 }"
+              rows="2"
+              auto-complete="off"
+              :placeholder="`${$t('preferences.no-proxy-input-tips')}`"
+              v-model="form.noProxy">
+            </el-input>
+            <div class="el-form-item__info" style="margin-top: 8px;">
+              <a target="_blank" href="https://github.com/agalwood/Motrix/wiki/Proxy" rel="noopener noreferrer">
+                {{ $t('preferences.proxy-tips') }}
+                <mo-icon name="link" width="12" height="12" />
+              </a>
+            </div>
+          </el-col>
+        </el-form-item>
+        <el-form-item
+          :label="`${$t('preferences.bt-tracker')}: `"
+          :label-width="formLabelWidth"
+        >
+          <div class="form-item-sub bt-tracker">
+            <el-row :gutter="10" style="line-height: 0;">
+              <el-col :span="20">
+                <div class="track-source">
+                  <el-select
+                    class="select-track-source"
+                    v-model="form.trackerSource"
+                    multiple
+                  >
+                    <el-option-group
+                      v-for="group in trackerSourceOptions"
+                      :key="group.label"
+                      :label="group.label"
+                    >
+                      <el-option
+                        v-for="item in group.options"
+                        :key="item.value"
+                        :label="item.label"
+                        :value="item.value">
+                      </el-option>
+                    </el-option-group>
+                  </el-select>
+                </div>
+              </el-col>
+              <el-col :span="3">
+                <div class="sync-tracker">
+                  <el-tooltip
+                    class="item"
+                    effect="dark"
+                    :content="$t('preferences.sync-tracker-tips')"
+                    placement="bottom"
+                  >
+                    <el-button
+                      @click="syncTrackerFromSource"
+                      class="sync-tracker-btn"
+                    >
+                      <mo-icon
+                        name="refresh"
+                        width="12"
+                        height="12"
+                        :spin="true"
+                        v-if="trackerSyncing"
+                      />
+                      <mo-icon name="sync" width="12" height="12" v-else />
+                    </el-button>
+                  </el-tooltip>
+                </div>
+              </el-col>
+            </el-row>
+            <el-input
+              type="textarea"
+              rows="3"
               auto-complete="off"
               :placeholder="`${$t('preferences.bt-tracker-input-tips')}`"
               v-model="form.btTracker">
             </el-input>
-            <div class="sync-tracker">
-              <el-tooltip
-                class="item"
-                effect="dark"
-                :content="$t('preferences.sync-tracker-tips')"
-                placement="bottom"
-              >
-                <el-button
-                  @click="syncTrackerFromGitHub"
-                >
-                  <mo-icon
-                    name="refresh"
-                    width="12"
-                    height="12"
-                    :spin="true"
-                    v-if="isSyncTracker"
-                  />
-                  <mo-icon name="sync" width="12" height="12" v-else />
-                </el-button>
-              </el-tooltip>
+            <div class="el-form-item__info" style="margin-top: 8px;">
+              {{ $t('preferences.bt-tracker-tips') }}
+              <a target="_blank" href="https://github.com/ngosang/trackerslist" rel="noopener noreferrer">
+                ngosang/trackerslist
+                <mo-icon name="link" width="12" height="12" />
+              </a>
+              <a target="_blank" href="https://github.com/XIU2/TrackersListCollection" rel="noopener noreferrer">
+                XIU2/TrackersListCollection
+                <mo-icon name="link" width="12" height="12" />
+              </a>
             </div>
           </div>
-          <div class="el-form-item__info" style="margin-top: 8px;">
-            {{ $t('preferences.bt-tracker-tips') }}
-            <a target="_blank" href="https://github.com/ngosang/trackerslist" rel="noopener noreferrer">
-              https://github.com/ngosang/trackerslist
-              <mo-icon name="link" width="12" height="12" />
-            </a>
+          <div class="form-item-sub">
+            <el-checkbox v-model="form.autoSyncTracker">
+              {{ $t('preferences.auto-sync-tracker') }}
+            </el-checkbox>
+            <div class="el-form-item__info" style="margin-top: 8px;" v-if="form.lastSyncTrackerTime > 0">
+              {{ new Date(form.lastSyncTrackerTime).toLocaleString() }}
+            </div>
           </div>
         </el-form-item>
-        <el-form-item :label="`${$t('preferences.developer')}: `" :label-width="formLabelWidth">
+        <el-form-item
+          :label="`${$t('preferences.port')}: `"
+          :label-width="formLabelWidth"
+        >
+          <el-row style="margin-bottom: 8px;">
+            <el-col class="form-item-sub" :span="10">
+              <el-switch
+                v-model="form.enableUpnp"
+                active-text="UPnP"
+                >
+              </el-switch>
+            </el-col>
+          </el-row>
+          <el-row style="margin-bottom: 8px;">
+            <el-col class="form-item-sub" :span="10">
+              {{ $t('preferences.bt-port') }}
+              <el-input
+                placeholder="BT Port"
+                :maxlength="8"
+                v-model="form.listenPort"
+              >
+                <i slot="append" @click.prevent="onPortDiceClick">
+                  <mo-icon name="dice" width="12" height="12" />
+                </i>
+              </el-input>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col class="form-item-sub" :span="10">
+              {{ $t('preferences.dht-port') }}
+              <el-input
+                placeholder="DHT Port"
+                :maxlength="8"
+                v-model="form.dhtListenPort"
+              >
+                <i slot="append" @click.prevent="onDhtPortDiceClick">
+                  <mo-icon name="dice" width="12" height="12" />
+                </i>
+              </el-input>
+            </el-col>
+          </el-row>
+        </el-form-item>
+        <el-form-item
+          :label="`${$t('preferences.download-protocol')}: `"
+          :label-width="formLabelWidth"
+        >
+          {{ $t('preferences.protocols-default-client') }}
+          <el-col class="form-item-sub" :span="24">
+            <el-switch
+              v-model="form.protocols.magnet"
+              :active-text="$t('preferences.protocols-magnet')"
+              @change="(val) => onProtocolsChange('magnet', val)"
+              >
+            </el-switch>
+          </el-col>
+          <el-col class="form-item-sub" :span="24">
+            <el-switch
+              v-model="form.protocols.thunder"
+              :active-text="$t('preferences.protocols-thunder')"
+              @change="(val) => onProtocolsChange('thunder', val)"
+              >
+            </el-switch>
+          </el-col>
+        </el-form-item>
+        <el-form-item
+          :label="`${$t('preferences.security')}: `"
+          :label-width="formLabelWidth"
+        >
           <el-col class="form-item-sub" :span="24">
             {{ $t('preferences.mock-user-agent') }}
             <el-input
               type="textarea"
-              :autosize="{ minRows: 2, maxRows: 3 }"
+              rows="2"
               auto-complete="off"
               placeholder="User-Agent"
               v-model="form.userAgent">
@@ -111,12 +247,36 @@
               <el-button @click="() => changeUA('du')">du</el-button>
             </el-button-group>
           </el-col>
+          <el-col class="form-item-sub" :span="18">
+            {{ $t('preferences.rpc-secret') }}
+            <el-input
+              :show-password="hideRpcSecret"
+              placeholder="RPC Secret"
+              :maxlength="24"
+              v-model="form.rpcSecret"
+            >
+              <i slot="append" @click.prevent="onDiceClick">
+                <mo-icon name="dice" width="12" height="12" />
+              </i>
+            </el-input>
+            <div class="el-form-item__info" style="margin-top: 8px;">
+              <a target="_blank" href="https://github.com/agalwood/Motrix/wiki/RPC" rel="noopener noreferrer">
+                {{ $t('preferences.rpc-secret-tips') }}
+                <mo-icon name="link" width="12" height="12" />
+              </a>
+            </div>
+          </el-col>
+        </el-form-item>
+        <el-form-item
+          :label="`${$t('preferences.developer')}: `"
+          :label-width="formLabelWidth"
+        >
           <el-col class="form-item-sub" :span="24">
             {{ $t('preferences.app-log-path') }}
             <el-input placeholder="" disabled v-model="logPath">
               <mo-show-in-folder
                 slot="append"
-                v-if="isRenderer()"
+                v-if="isRenderer"
                 :path="logPath"
               />
             </el-input>
@@ -126,7 +286,7 @@
             <el-input placeholder="" disabled v-model="sessionPath">
               <mo-show-in-folder
                 slot="append"
-                v-if="isRenderer()"
+                v-if="isRenderer"
                 :path="sessionPath"
               />
             </el-input>
@@ -139,8 +299,17 @@
         </el-form-item>
       </el-form>
       <div class="form-actions">
-        <el-button type="primary" @click="submitForm('advancedForm')">{{ $t('preferences.save') }}</el-button>
-        <el-button @click="resetForm('advancedForm')">{{ $t('preferences.discard') }}</el-button>
+        <el-button
+          type="primary"
+          @click="submitForm('advancedForm')"
+        >
+          {{ $t('preferences.save') }}
+        </el-button>
+        <el-button
+          @click="resetForm('advancedForm')"
+        >
+          {{ $t('preferences.discard') }}
+        </el-button>
       </div>
     </el-main>
   </el-container>
@@ -149,15 +318,24 @@
 <script>
   import is from 'electron-is'
   import { mapState } from 'vuex'
-  import ThemeSwitcher from '@/components/Preference/ThemeSwitcher'
+  import { cloneDeep } from 'lodash'
+  import randomize from 'randomatic'
+  import * as clipboard from 'clipboard-polyfill'
   import ShowInFolder from '@/components/Native/ShowInFolder'
+  import SubnavSwitcher from '@/components/Subnav/SubnavSwitcher'
   import userAgentMap from '@shared/ua'
-  import { availableLanguages, getLanguage } from '@shared/locales'
-  import { getLocaleManager } from '@/components/Locale'
+  import { trackerSourceOptions } from '@shared/constants'
   import {
+    buildRpcUrl,
+    calcFormLabelWidth,
+    checkIsNeedRestart,
     convertCommaToLine,
-    convertLineToComma
+    convertLineToComma,
+    diffConfig,
+    getRandomInt
   } from '@shared/utils'
+  import { convertTrackerDataToLine } from '@shared/utils/tracker'
+  import '@/components/Icons/dice'
   import '@/components/Icons/sync'
   import '@/components/Icons/refresh'
 
@@ -165,20 +343,42 @@
     const {
       allProxy,
       allProxyBackup,
+      autoCheckUpdate,
+      autoSyncTracker,
       btTracker,
+      dhtListenPort,
+      enableUpnp,
       hideAppMenu,
-      locale,
-      theme,
+      lastCheckUpdateTime,
+      lastSyncTrackerTime,
+      listenPort,
+      noProxy,
+      protocols,
+      rpcListenPort,
+      rpcSecret,
+      trackerSource,
       useProxy,
       userAgent
     } = config
     const result = {
       allProxy,
       allProxyBackup,
+      autoCheckUpdate,
+      autoSyncTracker,
       btTracker: convertCommaToLine(btTracker),
+      dhtListenPort,
+      enableUpnp,
       hideAppMenu,
-      locale,
-      theme,
+      lastCheckUpdateTime,
+      lastSyncTrackerTime,
+      listenPort,
+      noProxy: convertCommaToLine(noProxy),
+      protocols: {
+        ...protocols
+      },
+      rpcListenPort,
+      rpcSecret,
+      trackerSource,
       useProxy,
       userAgent
     }
@@ -188,25 +388,47 @@
   export default {
     name: 'mo-preference-advanced',
     components: {
-      [ThemeSwitcher.name]: ThemeSwitcher,
+      [SubnavSwitcher.name]: SubnavSwitcher,
       [ShowInFolder.name]: ShowInFolder
     },
-    data: function () {
+    data () {
+      const { locale } = this.$store.state.preference.config
+      const form = initialForm(this.$store.state.preference.config)
+      const formOriginal = cloneDeep(form)
+
       return {
-        formLabelWidth: '23%',
-        form: initialForm(this.$store.state.preference.config),
-        isSyncTracker: false,
+        form,
+        formLabelWidth: calcFormLabelWidth(locale),
+        formOriginal,
+        hideRpcSecret: true,
         rules: {},
-        color: '#c00',
-        locales: availableLanguages
+        trackerSourceOptions,
+        trackerSyncing: false
       }
     },
     computed: {
-      title: function () {
+      isRenderer () { return is.renderer() },
+      title () {
         return this.$t('preferences.advanced')
       },
-      showHideAppMenuOption: function () {
-        return is.windows() || is.linux()
+      subnavs: function () {
+        return [
+          {
+            key: 'basic',
+            title: this.$t('preferences.basic'),
+            route: '/preference/basic'
+          },
+          {
+            key: 'advanced',
+            title: this.$t('preferences.advanced'),
+            route: '/preference/advanced'
+          },
+          {
+            key: 'lab',
+            title: this.$t('preferences.lab'),
+            route: '/preference/lab'
+          }
+        ]
       },
       ...mapState('preference', {
         config: state => state.config,
@@ -215,29 +437,44 @@
       })
     },
     watch: {
+      'form.rpcSecret' (val) {
+        const url = buildRpcUrl({
+          port: this.form.rpcListenPort,
+          secret: val
+        })
+        clipboard.writeText(url)
+      }
     },
     methods: {
-      isRenderer: is.renderer,
-      handleLocaleChange (locale) {
-        const lng = getLanguage(locale)
-        getLocaleManager().changeLanguage(lng)
-        this.$electron.ipcRenderer.send('command', 'application:change-locale', lng)
+      onCheckUpdateClick () {
+        this.$electron.ipcRenderer.send('command', 'application:check-for-updates')
+        this.$msg.info(this.$t('app.checking-for-updates'))
+        this.$store.dispatch('preference/fetchPreference')
+          .then((config) => {
+            const { lastCheckUpdateTime } = config
+            this.form.lastCheckUpdateTime = lastCheckUpdateTime
+          })
       },
-      handleThemeChange (theme) {
-        this.form.theme = theme
-        this.$electron.ipcRenderer.send('command', 'application:change-theme', theme)
-      },
-      syncTrackerFromGitHub () {
-        this.isSyncTracker = true
-        this.$store.dispatch('preference/fetchBtTracker')
+      syncTrackerFromSource () {
+        this.trackerSyncing = true
+        const { trackerSource } = this.form
+        this.$store.dispatch('preference/fetchBtTracker', trackerSource)
           .then((data) => {
-            console.log('syncTrackerFromGitHub data====>', data)
-            this.form.btTracker = data
+            const tracker = convertTrackerDataToLine(data)
+            this.form.lastSyncTrackerTime = Date.now()
+            this.form.btTracker = tracker
           })
           .finally(() => {
-            this.isSyncTracker = false
+            this.trackerSyncing = false
           })
       },
+      onProtocolsChange (protocol, enabled) {
+        const { protocols } = this.form
+        this.form.protocols = {
+          ...protocols,
+          [protocol]: enabled
+        }
+      },
       onUseProxyChange (flag) {
         this.form.allProxy = flag ? this.form.allProxyBackup : ''
       },
@@ -251,6 +488,23 @@
         }
         this.form.userAgent = ua
       },
+      onPortDiceClick () {
+        const port = getRandomInt(20000, 24999)
+        this.form.listenPort = port
+      },
+      onDhtPortDiceClick () {
+        const port = getRandomInt(25000, 29999)
+        this.form.dhtListenPort = port
+      },
+      onDiceClick () {
+        this.hideRpcSecret = false
+        const rpcSecret = randomize('Aa0', 12)
+        this.form.rpcSecret = rpcSecret
+
+        setTimeout(() => {
+          this.hideRpcSecret = true
+        }, 2000)
+      },
       onFactoryResetClick () {
         this.$electron.remote.dialog.showMessageBox({
           type: 'warning',
@@ -258,32 +512,67 @@
           message: this.$t('preferences.factory-reset-confirm'),
           buttons: [this.$t('app.yes'), this.$t('app.no')],
           cancelId: 1
-        }, (buttonIndex) => {
-          if (buttonIndex === 0) {
+        }).then(({ response }) => {
+          if (response === 0) {
             this.$electron.ipcRenderer.send('command', 'application:reset')
           }
         })
       },
+      syncFormConfig () {
+        this.$store.dispatch('preference/fetchPreference')
+          .then((config) => {
+            this.form = initialForm(config)
+            this.formOriginal = cloneDeep(this.form)
+          })
+      },
       submitForm (formName) {
         this.$refs[formName].validate((valid) => {
           if (!valid) {
-            console.log('error submit!!')
+            console.log('[Motrix] preference form valid:', valid)
             return false
           }
+
+          const changed = diffConfig(this.formOriginal, this.form)
           const data = {
-            ...this.form,
-            btTracker: convertLineToComma(this.form.btTracker)
+            ...changed,
+            protocols: {
+              ...this.form.protocols
+            }
           }
 
-          console.log('this.form===>', data)
+          const { btTracker, noProxy } = changed
+          if (btTracker) {
+            data.btTracker = convertLineToComma(btTracker)
+          }
+
+          if (noProxy) {
+            data.noProxy = convertLineToComma(noProxy)
+          }
+
+          console.log('[Motrix] preference changed data:', data)
+
           this.$store.dispatch('preference/save', data)
-          if (this.isRenderer()) {
-            this.$electron.ipcRenderer.send('command', 'application:relaunch')
+            .then(() => {
+              this.$store.dispatch('app/fetchEngineOptions')
+              this.syncFormConfig()
+              this.$msg.success(this.$t('preferences.save-success-message'))
+            })
+            .catch((e) => {
+              this.$msg.success(this.$t('preferences.save-fail-message'))
+            })
+
+          if (this.isRenderer) {
+            this.$electron.ipcRenderer.send('command',
+                                            'application:setup-protocols-client', data.protocols)
+
+            if (checkIsNeedRestart(data)) {
+              this.$electron.ipcRenderer.send('command', 'application:relaunch')
+            }
           }
         })
       },
       resetForm (formName) {
-        this.form = initialForm(this.$store.state.preference.config)
+        this.syncFormConfig()
       }
     }
   }
@@ -292,10 +581,14 @@
 <style lang="scss">
 .bt-tracker {
   position: relative;
-  .sync-tracker {
-    position: absolute;
-    top: 8px;
-    right: 8px;
+  .sync-tracker-btn {
+    line-height: 0;
+  }
+  .track-source {
+    margin-bottom: 16px;
+    .select-track-source {
+      width: 100%;
+    }
   }
 }
 .ua-group {

src/renderer/components/Preference/Basic.vue

@@ -1,7 +1,12 @@
 <template>
   <el-container class="content panel" direction="vertical">
     <el-header class="panel-header" height="84">
-      <h4>{{ title }}</h4>
+      <h4 class="hidden-xs-only">{{ title }}</h4>
+      <mo-subnav-switcher
+        :title="title"
+        :subnavs="subnavs"
+        class="hidden-sm-and-up"
+      />
     </el-header>
     <el-main class="panel-content">
       <el-form
@@ -10,36 +15,132 @@
         label-position="right"
         size="mini"
         :model="form"
-        :rules="rules">
-        <el-form-item :label="`${$t('preferences.startup')}: `" :label-width="formLabelWidth">
+        :rules="rules"
+      >
+        <el-form-item
+          :label="`${$t('preferences.appearance')}: `"
+          :label-width="formLabelWidth"
+        >
+          <el-col class="form-item-sub" :span="24">
+            <mo-theme-switcher
+              v-model="form.theme"
+              @change="handleThemeChange"
+            />
+          </el-col>
+          <el-col v-if="showHideAppMenuOption" class="form-item-sub" :span="16">
+            <el-checkbox v-model="form.hideAppMenu">
+              {{ $t('preferences.hide-app-menu') }}
+            </el-checkbox>
+          </el-col>
+          <el-col class="form-item-sub" :span="16">
+            <el-checkbox v-model="form.autoHideWindow">
+              {{ $t('preferences.auto-hide-window') }}
+            </el-checkbox>
+          </el-col>
+        </el-form-item>
+        <el-form-item
+          :label="`${$t('preferences.run-mode')}: `"
+          :label-width="formLabelWidth"
+        >
+          <el-col class="form-item-sub" :span="24">
+            <el-select v-model="form.runMode">
+              <el-option
+                v-for="item in runModes"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value">
+              </el-option>
+            </el-select>
+          </el-col>
+        </el-form-item>
+        <el-form-item
+          :label="`${$t('preferences.language')}: `"
+          :label-width="formLabelWidth"
+        >
+          <el-col class="form-item-sub" :span="16">
+            <el-select
+              v-model="form.locale"
+              @change="handleLocaleChange"
+              :placeholder="$t('preferences.change-language')">
+              <el-option
+                v-for="item in locales"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value">
+              </el-option>
+            </el-select>
+          </el-col>
+        </el-form-item>
+        <el-form-item
+          :label="`${$t('preferences.startup')}: `"
+          :label-width="formLabelWidth"
+        >
+          <el-col
+            class="form-item-sub"
+            :span="24"
+            v-if="!isLinux"
+          >
+            <el-checkbox v-model="form.openAtLogin">
+              {{ $t('preferences.open-at-login') }}
+            </el-checkbox>
+          </el-col>
+          <el-col class="form-item-sub" :span="24">
+            <el-checkbox v-model="form.keepWindowState">
+              {{ $t('preferences.keep-window-state') }}
+            </el-checkbox>
+          </el-col>
           <el-col class="form-item-sub" :span="24">
             <el-checkbox v-model="form.resumeAllWhenAppLaunched">
               {{ $t('preferences.auto-resume-all') }}
             </el-checkbox>
           </el-col>
-          <el-col class="form-item-sub" :span="24">
-            <el-checkbox v-model="form.autoCheckUpdate">
-              {{ $t('preferences.auto-check-update') }}
-            </el-checkbox>
-            <div class="el-form-item__info" style="margin-top: 8px;" v-if="form.lastCheckUpdateTime !== 0">
-              {{ $t('preferences.last-check-update-time') + ': ' + (form.lastCheckUpdateTime !== 0 ?  new
-              Date(form.lastCheckUpdateTime).toLocaleString() : new Date().toLocaleString()) }}
-            </div>
-          </el-col>
         </el-form-item>
-        <el-form-item :label="`${$t('preferences.default-dir')}: `" :label-width="formLabelWidth">
-          <el-input placeholder="" v-model="downloadDir" :readonly="isMas()">
+        <el-form-item
+          :label="`${$t('preferences.default-dir')}: `"
+          :label-width="formLabelWidth"
+        >
+          <el-input placeholder="" v-model="form.dir" :readonly="isMas">
             <mo-select-directory
-              v-if="isRenderer()"
+              v-if="isRenderer"
               slot="append"
               @selected="onDirectorySelected"
             />
           </el-input>
-          <div class="el-form-item__info" v-if="isMas()" style="margin-top: 8px;">
+          <div class="el-form-item__info" v-if="isMas" style="margin-top: 8px;">
             {{ $t('preferences.mas-default-dir-tips') }}
           </div>
         </el-form-item>
-        <el-form-item :label="`${$t('preferences.task-manage')}: `" :label-width="formLabelWidth">
+        <el-form-item
+          :label="`${$t('preferences.transfer-settings')}: `"
+          :label-width="formLabelWidth"
+        >
+          <el-col class="form-item-sub" :span="24">
+            {{ $t('preferences.transfer-speed-upload') }}
+            <el-select v-model="form.maxOverallUploadLimit">
+              <el-option
+                v-for="item in speedOptions"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value">
+              </el-option>
+            </el-select>
+          </el-col>
+          <el-col class="form-item-sub" :span="24">
+            {{ $t('preferences.transfer-speed-download') }}
+            <el-select v-model="form.maxOverallDownloadLimit">
+              <el-option
+                v-for="item in speedOptions"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value">
+              </el-option>
+            </el-select>
+          </el-col>
+        </el-form-item>
+        <el-form-item
+          :label="`${$t('preferences.task-manage')}: `"
+          :label-width="formLabelWidth"
+        >
           <el-col class="form-item-sub" :span="24">
             {{ $t('preferences.max-concurrent-downloads') }}
             <el-input-number
@@ -53,10 +154,10 @@
           <el-col class="form-item-sub" :span="24">
             {{ $t('preferences.max-connection-per-server') }}
             <el-input-number
-              v-model="form.split"
+              v-model="form.maxConnectionPerServer"
               controls-position="right"
               :min="1"
-              :max="form.maxConnectionPerServer"
+              :max="form.engineMaxConnectionPerServer"
               :label="$t('preferences.max-connection-per-server')">
             </el-input-number>
           </el-col>
@@ -78,8 +179,17 @@
         </el-form-item>
       </el-form>
       <div class="form-actions">
-        <el-button type="primary" @click="submitForm('basicForm')">{{ $t('preferences.save') }}</el-button>
-        <el-button @click="resetForm('basicForm')">{{ $t('preferences.discard') }}</el-button>
+        <el-button
+          type="primary"
+          @click="submitForm('basicForm')"
+        >
+          {{ $t('preferences.save') }}
+        </el-button>
+        <el-button
+          @click="resetForm('basicForm')"
+        >
+          {{ $t('preferences.discard') }}
+        </el-button>
       </div>
     </el-main>
   </el-container>
@@ -88,32 +198,57 @@
 <script>
   import is from 'electron-is'
   import { mapState } from 'vuex'
+  import { cloneDeep } from 'lodash'
+  import SubnavSwitcher from '@/components/Subnav/SubnavSwitcher'
   import SelectDirectory from '@/components/Native/SelectDirectory'
+  import ThemeSwitcher from '@/components/Preference/ThemeSwitcher'
+  import { availableLanguages, getLanguage } from '@shared/locales'
+  import { getLocaleManager } from '@/components/Locale'
   import { prettifyDir } from '@/components/Native/utils'
+  import {
+    calcFormLabelWidth,
+    checkIsNeedRestart,
+    diffConfig
+  } from '@shared/utils'
+  import { APP_RUN_MODE } from '@shared/constants'
 
   const initialForm = (config) => {
     const {
+      autoHideWindow,
       dir,
-      split,
-      resumeAllWhenAppLaunched,
+      engineMaxConnectionPerServer,
+      hideAppMenu,
+      keepWindowState,
+      locale,
       maxConcurrentDownloads,
       maxConnectionPerServer,
-      taskNotification,
-      autoCheckUpdate,
+      maxOverallDownloadLimit,
+      maxOverallUploadLimit,
       newTaskShowDownloading,
-      lastCheckUpdateTime
+      openAtLogin,
+      resumeAllWhenAppLaunched,
+      runMode,
+      taskNotification,
+      theme
     } = config
     const result = {
-      dir,
-      split,
+      autoHideWindow,
       continue: config.continue,
-      resumeAllWhenAppLaunched,
+      dir,
+      engineMaxConnectionPerServer,
+      hideAppMenu,
+      keepWindowState,
+      locale,
       maxConcurrentDownloads,
       maxConnectionPerServer,
-      taskNotification,
-      autoCheckUpdate,
+      maxOverallDownloadLimit,
+      maxOverallUploadLimit,
       newTaskShowDownloading,
-      lastCheckUpdateTime
+      openAtLogin,
+      resumeAllWhenAppLaunched,
+      runMode,
+      taskNotification,
+      theme
     }
     return result
   }
@@ -121,20 +256,97 @@
   export default {
     name: 'mo-preference-basic',
     components: {
-      [SelectDirectory.name]: SelectDirectory
+      [SubnavSwitcher.name]: SubnavSwitcher,
+      [SelectDirectory.name]: SelectDirectory,
+      [ThemeSwitcher.name]: ThemeSwitcher
     },
-    data: function () {
+    data () {
+      const { locale } = this.$store.state.preference.config
+      const form = initialForm(this.$store.state.preference.config)
+      const formOriginal = cloneDeep(form)
+
       return {
-        formLabelWidth: '23%',
-        form: initialForm(this.$store.state.preference.config),
+        form,
+        formLabelWidth: calcFormLabelWidth(locale),
+        formOriginal,
+        locales: availableLanguages,
         rules: {}
       }
     },
     computed: {
-      title: function () {
+      isRenderer () { return is.renderer() },
+      isMas () { return is.mas() },
+      isLinux () { return is.linux() },
+      title () {
         return this.$t('preferences.basic')
       },
-      downloadDir: function () {
+      runModes () {
+        return [
+          {
+            label: this.$t('preferences.run-mode-standard'),
+            value: 1
+          },
+          {
+            label: this.$t('preferences.run-mode-menu-bar'),
+            value: 2
+          }
+        ]
+      },
+      speedOptions () {
+        return [
+          {
+            label: this.$t('preferences.transfer-speed-unlimited'),
+            value: 0
+          },
+          {
+            label: '128 KB/s',
+            value: '128K'
+          },
+          {
+            label: '256 KB/s',
+            value: '256K'
+          },
+          {
+            label: '512 KB/s',
+            value: '512K'
+          },
+          {
+            label: '1 MB/s',
+            value: '1M'
+          },
+          {
+            label: '5 MB/s',
+            value: '5M'
+          },
+          {
+            label: '10 MB/s',
+            value: '10M'
+          }
+        ]
+      },
+      subnavs: function () {
+        return [
+          {
+            key: 'basic',
+            title: this.$t('preferences.basic'),
+            route: '/preference/basic'
+          },
+          {
+            key: 'advanced',
+            title: this.$t('preferences.advanced'),
+            route: '/preference/advanced'
+          },
+          {
+            key: 'lab',
+            title: this.$t('preferences.lab'),
+            route: '/preference/lab'
+          }
+        ]
+      },
+      showHideAppMenuOption () {
+        return is.windows() || is.linux()
+      },
+      downloadDir () {
         return prettifyDir(this.form.dir)
       },
       ...mapState('preference', {
@@ -142,26 +354,70 @@
       })
     },
     methods: {
-      isRenderer: is.renderer,
-      isMas: is.mas,
+      handleLocaleChange (locale) {
+        const lng = getLanguage(locale)
+        getLocaleManager().changeLanguage(lng)
+        this.$electron.ipcRenderer.send('command',
+                                        'application:change-locale', lng)
+      },
+      handleThemeChange (theme) {
+        this.form.theme = theme
+        this.$electron.ipcRenderer.send('command',
+                                        'application:change-theme', theme)
+      },
       onDirectorySelected (dir) {
         this.form.dir = dir
       },
+      syncFormConfig () {
+        this.$store.dispatch('preference/fetchPreference')
+          .then((config) => {
+            this.form = initialForm(config)
+            this.formOriginal = cloneDeep(this.form)
+          })
+      },
       submitForm (formName) {
         this.$refs[formName].validate((valid) => {
           if (!valid) {
-            console.log('error submit!!')
+            console.log('[Motrix] preference form valid:', valid)
             return false
           }
 
-          this.$store.dispatch('preference/save', this.form)
-          if (this.isRenderer()) {
-            this.$electron.ipcRenderer.send('command', 'application:relaunch')
+          const { runMode, openAtLogin, autoHideWindow } = this.form
+          const changed = diffConfig(this.formOriginal, this.form)
+          const data = {
+            ...changed
+          }
+          console.log('[Motrix] preference changed data:', data)
+
+          this.$store.dispatch('preference/save', data)
+            .then(() => {
+              this.$store.dispatch('app/fetchEngineOptions')
+              this.syncFormConfig()
+              this.$msg.success(this.$t('preferences.save-success-message'))
+            })
+            .catch(() => {
+              this.$msg.success(this.$t('preferences.save-fail-message'))
+            })
+
+          if (this.isRenderer) {
+            this.$electron.ipcRenderer.send('command',
+                                            'application:open-at-login', openAtLogin)
+
+            this.$electron.ipcRenderer.send('command',
+                                            'application:toggle-dock', runMode === APP_RUN_MODE.STANDARD)
+
+            this.$electron.ipcRenderer.send('command',
+                                            'application:auto-hide-window', autoHideWindow)
+
+            if (checkIsNeedRestart(data)) {
+              this.$electron.ipcRenderer.send('command',
+                                              'application:relaunch')
+            }
           }
         })
       },
       resetForm (formName) {
-        this.form = initialForm(this.$store.state.preference.config)
+        this.syncFormConfig()
       }
     }
   }