perf: add check latest version #941

README.md

@@ -100,8 +100,7 @@ If you like to always have the latest and greatest, please sync to the `nightly-
 
 ## Contributing
 
-Open up a PR or create an issue to discuss.
+Open up a PR or create an issue to discuss. Reach out on Discord if you need help getting started!
-Reach out on Discord if you need help getting started!
 
 [FAQ](../../wiki/FAQ)
 

src/components/Settings/VueTorrent/General.vue

@@ -5,12 +5,15 @@ import { useAppStore, useHistoryStore, useVueTorrentStore } from '@/stores'
 import { computed, onBeforeMount, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { toast } from 'vue3-toastify'
+import { Github } from '@/services/Github'
 
 const { t } = useI18n()
 const appStore = useAppStore()
 const historyStore = useHistoryStore()
 const vueTorrentStore = useVueTorrentStore()
 
+const github = new Github()
+
 const titleOptionsList = [
   { title: t('constants.titleOptions.default'), value: TitleOptions.DEFAULT },
   { title: t('constants.titleOptions.global_speed'), value: TitleOptions.GLOBAL_SPEED },
@@ -68,6 +71,15 @@ const registerMagnetHandler = () => {
   toast.success(t('toast.magnet_handler.registered'))
 }
 
+const checkNewVersion = async () => {
+  if (vueTorrentVersion.value === 'DEV') return
+
+  const latest = await github.getVersion()
+  if ('vueTorrentVersion.value' === latest) return
+
+  toast.info(t('toast.new_version'))
+}
+
 onBeforeMount(() => {
   appStore.fetchQbitVersion()
 })
@@ -149,50 +161,35 @@ onBeforeMount(() => {
       </v-row>
     </v-list-item>
 
-    <v-list-item>
+    <v-list-item :class="$vuetify.display.mdAndDown ? 'w-100' : 'w-50'" class="mx-auto">
-      <v-row>
-        <v-col cols="12" sm="6" md="3">
       <v-select v-model="vueTorrentStore.language" flat hide-details :items="LOCALES" :label="t('settings.vuetorrent.general.language')" />
-        </v-col>
-        <v-col cols="12" sm="6" md="3">
       <v-select v-model="vueTorrentStore.paginationSize" flat hide-details :items="paginationSizes" :label="t('settings.vuetorrent.general.paginationSize.label')" />
-        </v-col>
-        <v-col cols="12" sm="6" md="3">
       <v-select v-model="vueTorrentStore.uiTitleType" flat hide-details :items="titleOptionsList" :label="t('settings.vuetorrent.general.vueTorrentTitle')" />
-        </v-col>
+      <v-text-field :disabled="vueTorrentStore.uiTitleType !== TitleOptions.CUSTOM" v-model="vueTorrentStore.uiTitleCustom" :label="t('settings.vuetorrent.general.customTitle')" />
-        <v-col cols="12" sm="6" md="3">
+      <v-select v-model="theme" :items="themeOptions" :label="t('settings.vuetorrent.general.theme')" />
-          <v-text-field
+      <v-text-field v-model="vueTorrentStore.dateFormat" placeholder="DD/MM/YYYY, HH:mm:ss" hint="using Dayjs" :label="t('settings.vuetorrent.general.dateFormat')" />
-            :disabled="vueTorrentStore.uiTitleType !== TitleOptions.CUSTOM"
-            v-model="vueTorrentStore.uiTitleCustom"
-            :label="t('settings.vuetorrent.general.customTitle')" />
-        </v-col>
-      </v-row>
     </v-list-item>
 
     <v-list-item>
       <v-row>
-        <v-col cols="12" md="3" class="d-flex align-center justify-center">
+        <v-col cols="4" class="d-flex align-center justify-center">
           <h3>
             {{ t('settings.vuetorrent.general.currentVersion') }}
             <span v-if="!vueTorrentVersion">undefined</span>
-            <a v-else-if="vueTorrentVersion === 'DEV'" target="_blank" href="https://github.com/WDaan/VueTorrent/">{{ vueTorrentVersion }}</a>
+            <a v-else-if="vueTorrentVersion === 'DEV'" target="_blank" href="https://github.com/VueTorrent/VueTorrent/">{{ vueTorrentVersion }}</a>
-            <a v-else target="_blank" :href="`https://github.com/WDaan/VueTorrent/releases/tag/v${vueTorrentVersion}`">{{ vueTorrentVersion }}</a>
+            <a v-else target="_blank" :href="`https://github.com/VueTorrent/VueTorrent/releases/tag/v${vueTorrentVersion}`">{{ vueTorrentVersion }}</a>
           </h3>
         </v-col>
 
-        <v-col cols="12" md="3" class="d-flex align-center justify-center">
+        <v-col cols="4" class="d-flex align-center justify-center">
           <h3>
             {{ t('settings.vuetorrent.general.qbittorrentVersion') }}
             <a target="_blank" :href="`https://github.com/qbittorrent/qBittorrent/releases/tag/release-${appStore.version}`">{{ appStore.version }}</a>
           </h3>
         </v-col>
 
-        <v-col cols="12" md="3">
+        <v-col cols="4">
-          <v-select v-model="theme" :items="themeOptions" :label="t('settings.vuetorrent.general.theme')" />
+          <v-btn color="primary" @click="checkNewVersion">{{ t('settings.vuetorrent.general.check_new') }} </v-btn>
-        </v-col>
-
-        <v-col cols="12" md="3">
-          <v-text-field v-model="vueTorrentStore.dateFormat" placeholder="DD/MM/YYYY, HH:mm:ss" hint="using Dayjs" :label="t('settings.vuetorrent.general.dateFormat')" />
         </v-col>
       </v-row>
     </v-list-item>

src/services/Github.ts

@@ -0,0 +1,18 @@
+import { AxiosInstance } from 'axios'
+import axios from 'axios'
+
+export class Github {
+  private axios: AxiosInstance
+
+  constructor() {
+    this.axios = axios.create()
+  }
+
+  /**
+   * Fetches the latest version of VueTorrent
+   */
+  async getVersion(): Promise<string> {
+    const { data } = await this.axios.get('https://api.github.com/repos/vuetorrent/vuetorrent/releases/latest')
+    return data.tag_name
+  }
+}