refactor: app improve

.github/workflows/release.yml

@@ -22,7 +22,7 @@ jobs:
       - name: Install Node.js, NPM and Yarn
         uses: actions/setup-node@v2
         with:
-          node-version: 12
+          node-version: 14
 
       - name: Install Snapcraft
         uses: samuelmeuli/action-snapcraft@v1

package.json

@@ -193,8 +193,8 @@
     ]
   },
   "dependencies": {
-    "@babel/runtime": "^7.14.0",
-    "@motrix/nat-api": "^0.3.1",
+    "@babel/runtime": "^7.14.6",
+    "@motrix/nat-api": "^0.3.2",
     "@panter/vue-i18next": "^0.15.2",
     "axios": "^0.21.1",
     "bittorrent-peerid": "^1.3.3",
@@ -205,71 +205,72 @@
     "electron-log": "^4.3.5",
     "electron-store": "^8.0.0",
     "electron-updater": "^4.3.9",
-    "element-ui": "^2.15.2",
-    "i18next": "^20.3.1",
+    "element-ui": "^2.15.3",
+    "i18next": "^20.3.2",
     "lodash": "^4.17.21",
     "node-fetch": "^2.6.1",
     "normalize.css": "^8.0.1",
     "parse-torrent": "^9.1.3",
     "randomatic": "^3.1.1",
     "svg-innerhtml": "^1.1.0",
-    "vue": "^2.6.12",
+    "vue": "^2.6.14",
     "vue-electron": "^1.0.6",
-    "vue-router": "^3.5.1",
+    "vue-router": "^3.5.2",
+    "vue-selectable": "^0.5.0",
     "vuex": "^3.6.2",
     "vuex-router-sync": "^5.0.0",
-    "ws": "^7.4.6"
+    "ws": "^7.5.2"
   },
   "devDependencies": {
-    "@babel/core": "^7.14.3",
-    "@babel/plugin-proposal-class-properties": "^7.13.0",
-    "@babel/plugin-transform-runtime": "^7.14.3",
-    "@babel/preset-env": "^7.14.4",
-    "@babel/register": "^7.13.16",
-    "@electron/remote": "^1.1.0",
+    "@babel/core": "^7.14.6",
+    "@babel/plugin-proposal-class-properties": "^7.14.5",
+    "@babel/plugin-transform-runtime": "^7.14.5",
+    "@babel/preset-env": "^7.14.7",
+    "@babel/register": "^7.14.5",
+    "@electron/remote": "^1.2.0",
     "@motrix/multispinner": "^0.2.2",
     "@vue/eslint-config-standard": "^6.0.0",
-    "ajv": "^8.5.0",
+    "ajv": "^8.6.0",
     "babel-eslint": "^10.1.0",
     "babel-loader": "^8.2.2",
     "babel-plugin-component": "^1.1.1",
-    "cfonts": "^2.9.2",
+    "cfonts": "^2.9.3",
     "chalk": "^4.1.1",
-    "copy-webpack-plugin": "^9.0.0",
+    "copy-webpack-plugin": "^9.0.1",
     "cross-env": "^7.0.3",
     "css-loader": "^5.2.6",
-    "css-minimizer-webpack-plugin": "^3.0.0",
+    "css-minimizer-webpack-plugin": "^3.0.2",
     "del": "^6.0.0",
-    "electron": "^11.4.7",
-    "electron-builder": "22.10.5",
+    "electron": "^11.4.9",
+    "electron-builder": "^22.11.7",
     "electron-builder-notarize": "^1.2.0",
     "electron-devtools-installer": "^3.2.0",
     "electron-notarize": "^1.0.0",
     "electron-osx-sign": "^0.5.0",
-    "eslint": "^7.27.0",
+    "eslint": "^7.30.0",
     "eslint-friendly-formatter": "^4.0.1",
-    "eslint-plugin-import": "^2.23.3",
+    "eslint-plugin-import": "^2.23.4",
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-promise": "^5.1.0",
-    "eslint-plugin-vue": "^7.10.0",
+    "eslint-plugin-vue": "^7.12.1",
     "eslint-webpack-plugin": "^2.5.4",
     "file-loader": "^6.2.0",
-    "html-webpack-plugin": "^5.3.1",
-    "mini-css-extract-plugin": "1.6.0",
+    "html-webpack-plugin": "^5.3.2",
+    "mini-css-extract-plugin": "2.0.0",
     "node-loader": "^2.0.0",
     "sass": "1.32.13",
     "sass-loader": "^11.1.1",
-    "style-loader": "^2.0.0",
-    "terser-webpack-plugin": "^5.1.2",
+    "style-loader": "^3.0.0",
+    "terser-webpack-plugin": "^5.1.4",
     "url-loader": "^4.1.1",
     "vue-loader": "^15.9.7",
     "vue-style-loader": "^4.1.3",
-    "vue-template-compiler": "^2.6.12",
-    "webpack": "^5.38.1",
-    "webpack-cli": "^4.7.0",
+    "vue-template-compiler": "^2.6.14",
+    "webpack": "^5.42.0",
+    "webpack-cli": "^4.7.2",
     "webpack-dev-server": "^3.11.2",
     "webpack-hot-middleware": "^2.25.0",
-    "webpack-merge": "^5.7.3",
+    "webpack-merge": "^5.8.0",
     "worker-loader": "^3.0.8"
   }
 }

src/index.ejs

@@ -10,15 +10,42 @@
       </script>
     <% } %>
   </head>
+
+  <style>
+    .skeleton-aside {
+      background-color: rgba(0, 0, 0, 0.8);
+      width: 78px;
+    }
+    .skeleton-subnav {
+      background-color: #f4f5f7;
+      width: 200px;
+    }
+    .skeleton-main {
+      background-color: #fff;
+    }
+
+    @media (prefers-color-scheme: dark) {
+      .skeleton-aside {
+        background-color: rgba(0, 0, 0, 0.9);
+      }
+      .skeleton-subnav {
+        background-color: #2D2D2D;
+      }
+      .skeleton-main {
+        background-color: #343434;
+      }
+    }
+  </style>
+
   <body>
     <div id="app">
       <div class="title-bar"></div>
       <section class="el-container" id="container">
-        <aside class="el-aside aside" style="width: 78px;">
+        <aside class="el-aside skeleton-aside hidden-sm-and-down">
         </aside>
-        <aside class="el-aside subnav" style="width: 200px;">
+        <aside class="el-aside skeleton-subnav hidden-xs-only">
         </aside>
-        <section class="el-container main">
+        <section class="el-container skeleton-main">
         </section>
       </section>
     </div>

src/main/Application.js

@@ -13,7 +13,8 @@ import {
 import { checkIsNeedRun } from '@shared/utils'
 import {
   convertTrackerDataToComma,
-  fetchBtTrackerFromSource
+  fetchBtTrackerFromSource,
+  reduceTrackerString
 } from '@shared/utils/tracker'
 import logger from './core/Logger'
 import ConfigManager from './core/ConfigManager'
@@ -316,7 +317,8 @@ export default class Application extends EventEmitter {
           return
         }
 
-        const tracker = convertTrackerDataToComma(data)
+        let tracker = convertTrackerDataToComma(data)
+        tracker = reduceTrackerString(tracker)
         this.savePreference({
           system: {
             'bt-tracker': tracker

src/main/configs/page.js

@@ -6,7 +6,7 @@ export default {
       title: 'Motrix',
       width: 1024,
       height: 768,
-      minWidth: 400,
+      minWidth: 478,
       minHeight: 420,
       // backgroundColor: '#FFFFFF',
       transparent: !is.windows()

src/main/core/ConfigManager.js

@@ -19,6 +19,7 @@ import {
   NGOSANG_TRACKERS_BEST_URL_CDN
 } from '@shared/constants'
 import { separateConfig } from '@shared/utils'
+import { reduceTrackerString } from '@shared/utils/tracker'
 
 export default class ConfigManager {
   constructor () {
@@ -59,8 +60,8 @@ export default class ConfigManager {
         'dht-file-path6': getDhtPath(IP_VERSION.V6),
         'dht-listen-port': 26701,
         'dir': getUserDownloadsPath(),
-        'follow-metalink': false,
-        'follow-torrent': false,
+        'follow-metalink': true,
+        'follow-torrent': true,
         'listen-port': 21301,
         'max-concurrent-downloads': 5,
         'max-connection-per-server': getMaxConnectionPerServer(),
@@ -70,6 +71,7 @@ export default class ConfigManager {
         'min-split-size': '1M',
         'no-proxy': EMPTY_STRING,
         'pause': true,
+        'pause-metadata': false,
         'rpc-listen-port': 16800,
         'rpc-secret': EMPTY_STRING,
         'seed-ratio': 1,
@@ -142,6 +144,10 @@ export default class ConfigManager {
     Object.keys(others).forEach(key => {
       this.systemConfig.delete(key)
     })
+
+    // Fix spawn ENAMETOOLONG on Windows
+    const tracker = reduceTrackerString(this.systemConfig.get('bt-tracker'))
+    this.setSystemConfig('bt-tracker', tracker)
   }
 
   fixUserConfig () {

src/renderer/components/DragSelect/Index.vue

@@ -8,6 +8,11 @@
 </template>
 
 <script>
+  const getCoords = (e, containerRect) => ({
+    x: e.clientX - containerRect.left,
+    y: e.clientY - containerRect.top
+  })
+
   const getDimensions = (p1, p2) => ({
     width: Math.abs(p1.x - p2.x),
     height: Math.abs(p1.y - p2.y)
@@ -51,12 +56,6 @@
       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 }
@@ -74,7 +73,7 @@
       function startDrag (e) {
         containerRect = container.getBoundingClientRect()
         self.children = container.childNodes
-        start = getCoords(e)
+        start = getCoords(e, containerRect)
         end = start
         document.addEventListener('mousemove', drag)
         document.addEventListener('touchmove', touchMove)
@@ -87,7 +86,7 @@
       }
 
       function drag (e) {
-        end = getCoords(e)
+        end = getCoords(e, containerRect)
         const dimensions = getDimensions(start, end)
 
         if (end.x < start.x) {

src/renderer/components/Main.vue

@@ -57,7 +57,7 @@
 <style lang="scss">
   .mo-speedometer {
     position: fixed;
-    right: 36px;
+    right: 16px;
     bottom: 24px;
     z-index: 20;
   }

src/renderer/components/Preference/Advanced.vue

@@ -60,14 +60,26 @@
           v-if="form.useProxy"
           style="margin-top: -16px;"
         >
-          <el-col class="form-item-sub" :span="16">
+          <el-col
+            class="form-item-sub"
+            :xs="24"
+            :sm="20"
+            :md="16"
+            :lg="16"
+          >
             <el-input
               placeholder="[http://][USER:PASSWORD@]HOST[:PORT]"
               @change="onAllProxyBackupChange"
               v-model="form.allProxyBackup">
             </el-input>
           </el-col>
-          <el-col class="form-item-sub" :span="20">
+          <el-col
+            class="form-item-sub"
+            :xs="24"
+            :sm="24"
+            :md="20"
+            :lg="20"
+          >
             <el-input
               type="textarea"
               rows="2"
@@ -182,7 +194,13 @@
           :label-width="formLabelWidth"
         >
           <el-row style="margin-bottom: 8px;">
-            <el-col class="form-item-sub" :span="12">
+            <el-col
+              class="form-item-sub"
+              :xs="24"
+              :sm="18"
+              :md="12"
+              :lg="12"
+            >
               <el-switch
                 v-model="form.enableUpnp"
                 active-text="UPnP/NAT-PMP"
@@ -191,7 +209,12 @@
             </el-col>
           </el-row>
           <el-row style="margin-bottom: 8px;">
-            <el-col class="form-item-sub" :span="10">
+            <el-col class="form-item-sub"
+              :xs="24"
+              :sm="18"
+              :md="10"
+              :lg="10"
+            >
               {{ $t('preferences.bt-port') }}
               <el-input
                 placeholder="BT Port"
@@ -205,7 +228,13 @@
             </el-col>
           </el-row>
           <el-row>
-            <el-col class="form-item-sub" :span="10">
+            <el-col
+              class="form-item-sub"
+              :xs="24"
+              :sm="18"
+              :md="10"
+              :lg="10"
+            >
               {{ $t('preferences.dht-port') }}
               <el-input
                 placeholder="DHT Port"
@@ -261,7 +290,13 @@
               <el-button @click="() => changeUA('du')">du</el-button>
             </el-button-group>
           </el-col>
-          <el-col class="form-item-sub" :span="18">
+          <el-col
+            class="form-item-sub"
+            :xs="24"
+            :sm="18"
+            :md="18"
+            :lg="18"
+          >
             {{ $t('preferences.rpc-secret') }}
             <el-input
               :show-password="hideRpcSecret"
@@ -352,7 +387,7 @@
     diffConfig,
     getRandomInt
   } from '@shared/utils'
-  import { convertTrackerDataToLine } from '@shared/utils/tracker'
+  import { convertTrackerDataToLine, reduceTrackerString } from '@shared/utils/tracker'
   import '@/components/Icons/dice'
   import '@/components/Icons/sync'
   import '@/components/Icons/refresh'
@@ -578,7 +613,7 @@
 
           const { btTracker, noProxy } = changed
           if (btTracker) {
-            data.btTracker = convertLineToComma(btTracker)
+            data.btTracker = reduceTrackerString(convertLineToComma(btTracker))
           }
 
           if (noProxy) {