fix: general fixes and README update (#562)

2025-03-14 12:10:18 +03:00 · 2022-12-08 16:19:29 +08:00 · 2022-12-08 16:19:29 +08:00 · 8b6caf0335
commit 8b6caf0335
parent 6c0014e98e
9 changed files with 157 additions and 158 deletions
--- a/.env.development
+++ b/.env.development
@ -1,2 +0,0 @@
-VITE_USE_FAKE_TORRENTS=false
-VITE_FAKE_TORRENT_COUNT=30
--- a/.gitignore
+++ b/.gitignore
@ -25,4 +25,5 @@ yarn-error.log*

 vuetorrent/**
 config
-Downloads
+Downloads
+.env.development
--- a/README.md
+++ b/README.md
@ -1,47 +1,37 @@
-# VueTorrent
+<div>
+  <img align="left" width="200" src="https://cdn.jsdelivr.net/gh/WDaan/VueTorrent/VueTorrent-logo.png" alt="VueTorrent"/>
+  <h1>VueTorrent</h1>
+  <p>The sleekest looking WebUI for qBittorrent made with Vue.js!</p>
+</div>

-<p>
-<img align="right" width="200px" src="https://imgur.com/x6dKNB3.png">
+![Vue](https://img.shields.io/badge/Vue-%5E2.7.14-brightgreen) 
+![qBittorrent](https://img.shields.io/badge/qBittorrent-4.4%2B-brightgreen) 
+![Vuetify](https://img.shields.io/badge/Vuetify-%5E2.6.10-brightgreen) 

-<p>&nbsp;</p>
-The sleekest looking WebUI for qBittorrent made with Vue.js!

-> Vue, qBittorrent, Vuetify
+![stars](https://img.shields.io/github/stars/WDaan/VueTorrent)
+![Forks](https://img.shields.io/github/forks/WDaan/VueTorrent)
+![Issues](https://img.shields.io/github/issues/WDaan/VueTorrent)
+![Closed](https://img.shields.io/github/issues-closed/WDaan/VueTorrent)
+![Closed PR](https://img.shields.io/github/issues-pr-closed/WDaan/VueTorrent)
+![Version](https://img.shields.io/github/v/release/wdaan/vuetorrent)
+![Test Status](https://img.shields.io/github/workflow/status/wdaan/vuetorrent/Test%20Core%20Components)
+![Downloads](https://img.shields.io/github/downloads/WDaan/VueTorrent/total)

-</p>
-<p>&nbsp;</p>
-<p>&nbsp;</p>
-<p align="center">
-      <a href="https://img.shields.io/github/stars/WDaan/VueTorrent" alt="stars">
-        <img src="https://img.shields.io/github/stars/WDaan/VueTorrent" /></a>
-      <a href="https://img.shields.io/github/forks/WDaan/VueTorrent" alt="Forks">
-        <img src="https://img.shields.io/github/forks/WDaan/VueTorrent" /></a>
-      <a href="https://img.shields.io/github/issues/WDaan/VueTorrent" alt="Issues">
-        <img src="https://img.shields.io/github/issues/WDaan/VueTorrent" /></a>
-      <a href="https://img.shields.io/github/issues-closed/wdaan/vuetorrent" alt="Issues Closed">
-        <img src="https://img.shields.io/github/issues-closed/WDaan/VueTorrent" /></a>
-      <a href="https://img.shields.io/github/issues-pr-closed/wdaan/VueTorrent" alt="Closed PR">
-        <img src="https://img.shields.io/github/issues-pr-closed/wdaan/VueTorrent" /></a>
-      <a href="https://img.shields.io/github/v/release/wdaan/vuetorrent" alt="Version">
-        <img src="https://img.shields.io/github/v/release/wdaan/vuetorrent" /></a>
-      <a href="https://img.shields.io/github/workflow/status/wdaan/vuetorrent/Test%20Core%20Components">
-        <img src="https://img.shields.io/github/workflow/status/wdaan/vuetorrent/Test%20Core%20Components" alt="Test Status"></a>
-      <a href="https://img.shields.io/github/downloads/wdaan/vuetorrent/total">
-        <img src="https://img.shields.io/github/downloads/wdaan/vuetorrent/total" alt="Downloads"></a>
-</p>

 ## Screenshots

-![Desktop screenshot](https://imgur.com/IUkaDnI.png)
+ Destop  
+![](readme_assets/screenshot-desktop.png)  

-|                                    |                                    |                                    |
-| :--------------------------------: | :--------------------------------: | :--------------------------------: |
-| ![](https://imgur.com/Zcm98H3.png) | ![](https://imgur.com/OujrH0f.png) | ![](https://imgur.com/3FZTXPL.png) |
-| ![](https://imgur.com/QYpNCXs.png) | ![](https://imgur.com/6j5wxhl.png) | ![](https://imgur.com/jnzDKjW.png) |

-<p align="center">
-<img src="https://imgur.com/weOOI7n.png" width="300" alt="Mobile screenshot">
-</p>
+ Desktop Dark Mode  
+![](readme_assets/screenshot-desktop-dark-mode.png)  
+
+
+ Mobile Dark Mode  
+![](readme_assets/screenshot-mobile-dark-mode.png)  
+

 ## Installation

--- a/readme_assets/screenshot-desktop-dark-mode.png
+++ b/readme_assets/screenshot-desktop-dark-mode.png
--- a/readme_assets/screenshot-desktop.png
+++ b/readme_assets/screenshot-desktop.png
--- a/readme_assets/screenshot-mobile-dark-mode.png
+++ b/readme_assets/screenshot-mobile-dark-mode.png
--- a/src/components/TorrentDetail/Tabs/Content.vue
+++ b/src/components/TorrentDetail/Tabs/Content.vue
@ -90,6 +90,7 @@ export default {
  },
  data() {
    return {
+      inited: false,
      opened: null,
      selected: [],
      treeData: null,
@ -115,7 +116,12 @@ export default {
  watch: {
    isActive(active) {
      if (active) {
-        this.getTorrentFiles()
+        if (this.inited) {
+          this.getTorrentFiles()
+        } else {
+          this.initFiles()
+          this.inited = true
+        }
      }
    },
    selected(newValue, oldValue) {
@ -123,12 +129,11 @@ export default {
    }
  },
  created() {
-    this.initFiles()
  },
  methods: {
    initFiles() {
      this.getTorrentFiles().then(() => {
-        this.opened = [].concat(...this.treeData.map(file => file.name.split('/')).filter(f => f.splice(-1, 1))).filter((f, index, self) => index === self.indexOf(f))
+        this.opened = []
        this.selected = this.treeData.filter(file => file.priority !== 0).map(file => file.name)
      })
    },
@ -141,7 +146,7 @@ export default {
      this.treeData = data
    },
    async changeFilePriorities(newValue, oldValue) {
-      if (newValue.length == oldValue.length) return
+      if (newValue.length === oldValue.length) return

      const filesToExclude = oldValue
        .filter(f => !newValue.includes(f))
--- a/src/components/TorrentDetail/Tabs/DetailPeers.vue
+++ b/src/components/TorrentDetail/Tabs/DetailPeers.vue
@ -80,20 +80,20 @@ export default {
    isActive(active) {
      if (active) {
        this.getTorrentPeers()
+        this.refreshTimer = setInterval(
+            function () {
+              this.getTorrentPeers()
+            }.bind(this),
+            2000
+        )
+      } else {
+        clearTimeout(this.refreshTimer)
      }
    }
  },
  created() {
-    this.getTorrentPeers()
-    this.refreshTimer = setInterval(
-      function () {
-        this.getTorrentPeers()
-      }.bind(this),
-      2000
-    )
  },
  beforeDestroy() {
-    clearTimeout(this.refreshTimer)
  },
  methods: {
    codeToFlag(val) {
--- a/vite.config.js
+++ b/vite.config.js
@ -1,5 +1,5 @@
 import { resolve, dirname } from 'path'
-import { defineConfig } from 'vite'
+import { defineConfig, loadEnv } from 'vite'
 import vue from '@vitejs/plugin-vue2'
 import { VitePWA } from 'vite-plugin-pwa'
 import Components from 'unplugin-vue-components/vite'
@ -9,117 +9,122 @@ import { fileURLToPath, URL } from 'node:url'

 const version = process.env.NODE_ENV === 'production' ? process.env.npm_package_version : JSON.stringify(process.env.npm_package_version)

-const qBittorrentPort = process.env['QBITTORRENT_PORT'] ?? 8080
-const proxyTarget = process.env['QBITTORRENT_TARGET'] ?? 'http://127.0.0.1'

-export default defineConfig({
-  resolve: {
-    alias: {
-      '@': fileURLToPath(new URL('./src', import.meta.url)),
-      '~': fileURLToPath(new URL('./node_modules', import.meta.url))
-    }
-  },
-  plugins: [
-    vue(),
-    Components({
-      dts: false,
-      directives: false,
-      resolvers: [VuetifyResolver()],
-      types: [
-        {
-          from: 'vue-router',
-          names: ['RouterLink', 'RouterView']
-        }
-      ]
-    }),
-    VitePWA({
-      includeAssets: [
-        'favicon.ico',
-        'robots.txt',
-        './icons/android-chrome-192x192.png',
-        './icons/android-chrome-512x512.png',
-        './icons/android-chrome-maskable-192x192.png',
-        './icons/android-chrome-maskable-512x512.png',
-        './icons/apple-touch-icon.png',
-        './icons/safari-pinned-tab.svg',
-        './icons/msapplication-icon-144x144.png'
-      ],
-      manifest: {
-        name: 'VueTorrent',
-        short_name: 'VueTorrent',
-        theme_color: '#597566',
-        start_url: '.',
-        background_color: '#000',
-        icons: [
-          {
-            src: './icons/android-chrome-192x192.png',
-            sizes: '192x192',
-            type: 'image/png'
-          },
-          {
-            src: './icons/android-chrome-512x512.png',
-            sizes: '512x512',
-            type: 'image/png'
-          },
-          {
-            src: './icons/android-chrome-maskable-192x192.png',
-            sizes: '192x192',
-            type: 'image/png',
-            purpose: 'maskable'
-          },
-          {
-            src: './icons/android-chrome-maskable-512x512.png',
-            sizes: '512x512',
-            type: 'image/png',
-            purpose: 'maskable'
-          },

-          {
-            src: './icons/apple-touch-icon.png',
-            sizes: '180x180',
-            type: 'image/png'
-          },
-          {
-            src: './icons/safari-pinned-tab.svg',
-            sizes: '683x683',
-            type: 'image/svg+xml'
-          },
-          {
-            src: './icons/msapplication-icon-144x144.png',
-            sizes: '144x144',
-            type: 'image/png'
-          }
-        ]
-      },
-      // Other options
-      registerType: 'autoUpdate',
-      base: './',
-      useCredentials: true,
-      workbox: {
-        skipWaiting: true,
-        globPatterns: ['**/*.{js,css,html,ico,png,svg}']
-      }
-    })
-  ],
-  build: {
-    target: 'esnext',
-    rollupOptions: {
-      output: {
-        manualChunks: {
-          vue: ['vue', 'vue-router', 'vue-router/composables', 'vuex', 'vuex-persist']
-        }
+export default defineConfig(({ command, mode }) => {
+  const theEnv = loadEnv(mode, process.cwd())
+  const qBittorrentPort = theEnv.VITE_QBITTORRENT_PORT ?? 8080
+  const proxyTarget = theEnv.VITE_QBITTORRENT_TARGET ?? 'http://127.0.0.1'
+
+  return {
+    resolve: {
+      alias: {
+        '@': fileURLToPath(new URL('./src', import.meta.url)),
+        '~': fileURLToPath(new URL('./node_modules', import.meta.url))
      }
    },
-    outDir: './vuetorrent/public'
-  },
-  define: {
-    'import.meta.env.VITE_PACKAGE_VERSION': version
-  },
-  base: './',
-  publicDir: './public',
-  server: {
-    proxy: {
-      '/api': `${proxyTarget}:${qBittorrentPort}`
+    plugins: [
+      vue(),
+      Components({
+        dts: false,
+        directives: false,
+        resolvers: [VuetifyResolver()],
+        types: [
+          {
+            from: 'vue-router',
+            names: ['RouterLink', 'RouterView']
+          }
+        ]
+      }),
+      VitePWA({
+        includeAssets: [
+          'favicon.ico',
+          'robots.txt',
+          './icons/android-chrome-192x192.png',
+          './icons/android-chrome-512x512.png',
+          './icons/android-chrome-maskable-192x192.png',
+          './icons/android-chrome-maskable-512x512.png',
+          './icons/apple-touch-icon.png',
+          './icons/safari-pinned-tab.svg',
+          './icons/msapplication-icon-144x144.png'
+        ],
+        manifest: {
+          name: 'VueTorrent',
+          short_name: 'VueTorrent',
+          theme_color: '#597566',
+          start_url: '.',
+          background_color: '#000',
+          icons: [
+            {
+              src: './icons/android-chrome-192x192.png',
+              sizes: '192x192',
+              type: 'image/png'
+            },
+            {
+              src: './icons/android-chrome-512x512.png',
+              sizes: '512x512',
+              type: 'image/png'
+            },
+            {
+              src: './icons/android-chrome-maskable-192x192.png',
+              sizes: '192x192',
+              type: 'image/png',
+              purpose: 'maskable'
+            },
+            {
+              src: './icons/android-chrome-maskable-512x512.png',
+              sizes: '512x512',
+              type: 'image/png',
+              purpose: 'maskable'
+            },
+
+            {
+              src: './icons/apple-touch-icon.png',
+              sizes: '180x180',
+              type: 'image/png'
+            },
+            {
+              src: './icons/safari-pinned-tab.svg',
+              sizes: '683x683',
+              type: 'image/svg+xml'
+            },
+            {
+              src: './icons/msapplication-icon-144x144.png',
+              sizes: '144x144',
+              type: 'image/png'
+            }
+          ]
+        },
+        // Other options
+        registerType: 'autoUpdate',
+        base: './',
+        useCredentials: true,
+        workbox: {
+          skipWaiting: true,
+          globPatterns: ['**/*.{js,css,html,ico,png,svg}']
+        }
+      })
+    ],
+    build: {
+      target: 'esnext',
+      rollupOptions: {
+        output: {
+          manualChunks: {
+            vue: ['vue', 'vue-router', 'vue-router/composables', 'vuex', 'vuex-persist']
+          }
+        }
+      },
+      outDir: './vuetorrent/public'
+    },
+    define: {
+      'import.meta.env.VITE_PACKAGE_VERSION': version
+    },
+    base: './',
+    publicDir: './public',
+    server: {
+      proxy: {
+        '/api': `${proxyTarget}:${qBittorrentPort}`
+      }
    }
  }
 })