fix: general fixes and README update (#562)

.env.development

@@ -1,2 +0,0 @@
-VITE_USE_FAKE_TORRENTS=false
-VITE_FAKE_TORRENT_COUNT=30

.gitignore

@@ -26,3 +26,4 @@ yarn-error.log*
 vuetorrent/**
 config
 Downloads
+.env.development

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
 

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) {
+        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))

src/components/TorrentDetail/Tabs/DetailPeers.vue

@@ -80,20 +80,20 @@ export default {
     isActive(active) {
       if (active) {
         this.getTorrentPeers()
-      }
-    }
-  },
-  created() {
-    this.getTorrentPeers()
         this.refreshTimer = setInterval(
             function () {
               this.getTorrentPeers()
             }.bind(this),
             2000
         )
+      } else {
+        clearTimeout(this.refreshTimer)
+      }
+    }
+  },
+  created() {
   },
   beforeDestroy() {
-    clearTimeout(this.refreshTimer)
   },
   methods: {
     codeToFlag(val) {

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,10 +9,14 @@ 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({
+
+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)),
@@ -122,4 +126,5 @@ export default defineConfig({
         '/api': `${proxyTarget}:${qBittorrentPort}`
       }
     }
+  }
 })