feat: Add tracker host in Dashboard (#679) @flashlab

src/components/Settings/Tabs/VueTorrent/Dashboard.vue

@@ -87,6 +87,7 @@ export default {
         Seeds: i18n.t(`${localePrefix}.seeds`),
         Status: i18n.t(`${localePrefix}.state`),
         Ratio: i18n.t(`${localePrefix}.ratio`),
+        Tracker: i18n.t(`${localePrefix}.tracker`),
         Category: i18n.t(`${localePrefix}.category`),
         Tags: i18n.t(`${localePrefix}.tags`),
         AddedOn: i18n.t(`${localePrefix}.addedOn`),

src/components/Torrent/DashboardItems/Tracker.vue

@@ -0,0 +1,30 @@
+<template>
+  <v-flex v-if="torrent.tracker" xs6 sm1 md1>
+    <div class="caption grey--text">
+      {{ $t('tracker') }}
+    </div>
+    <v-chip small class="moving white--text caption">
+      {{ trackerString }}
+    </v-chip>
+  </v-flex>
+</template>
+
+<script lang="ts">
+import { TorrentDashboardItem } from '@/mixins'
+import { defineComponent } from 'vue'
+import { Torrent } from '@/models'
+import { getDomainBody } from '@/helpers'
+
+export default defineComponent({
+  name: 'Tracker',
+  mixins: [TorrentDashboardItem],
+  props: {
+    torrent: Torrent
+  },
+  computed: {
+    trackerString() {
+      return getDomainBody(this.torrent.tracker)
+    }
+  }
+})
+</script>

src/components/Torrent/DashboardItems/index.ts

@@ -9,6 +9,7 @@ import ETA from './ETA.vue'
 import Peers from './Peers.vue'
 import Seeds from './Seeds.vue'
 import Status from './Status.vue'
+import Tracker from './Tracker.vue'
 import Category from './Category.vue'
 import Tags from './Tags.vue'
 import AddedOn from './AddedOn.vue'
@@ -33,6 +34,7 @@ export {
   Peers,
   Seeds,
   Status,
+  Tracker,
   Category,
   Tags,
   AddedOn,

src/components/Torrent/MobileCard.vue

@@ -9,6 +9,9 @@
       <v-chip small class="caption white--text" :class="torrent.state.toLowerCase()" style="height: 20px">
         {{ stateString }}
       </v-chip>
+      <v-chip v-if="torrent.tracker" small class="trackers caption white--text" style="height: 20px">
+        {{ trackerHost }}
+      </v-chip>
       <v-chip v-if="torrent.category" small class="upload caption white--text" style="height: 20px">
         {{ torrent.category }}
       </v-chip>
@@ -73,7 +76,8 @@
 </template>
 <script>
 import { mdiChevronUp, mdiChevronDown } from '@mdi/js'
-import {Torrent} from '@/models'
+import { Torrent } from '@/models'
+import { getDomainBody } from '@/helpers'
 
 export default {
   name: 'MobileCard',
@@ -86,10 +90,11 @@ export default {
   }),
   computed: {
     stateString() {
-      if (this.torrent.forced)
-        return `[F] ${this.torrent.state}`
-      else
-        return this.torrent.state
+      if (this.torrent.forced) return `[F] ${this.torrent.state}`
+      else return this.torrent.state
+    },
+    trackerHost() {
+      return getDomainBody(this.torrent.tracker)
     }
   }
 }

src/helpers.js

@@ -161,6 +161,15 @@ export function getBaseURL() {
   return import.meta.env['BASE_URL']
 }
 
+export function getDomainBody(string) {
+  const match = string.match(/:\/\/([^\/]+\.)?([^\/\.]+)\.[^\/\.:]+/i)
+  if (match != null && match.length > 2 && typeof match[2] === 'string' && match[2].length > 0) {
+    return match[2]
+  } else {
+    return ''
+  }
+}
+
 export class ArrayHelper {
   static remove(array, item) {
     const toRemove = Array.isArray(item) ? item : [item]

src/lang/en.json

@@ -197,6 +197,7 @@
           "completedTorrentTip": "Properties to display for completed torrents",
           "properties": {
             "availability": "Availability",
+            "tracker": "Tracker",
             "category": "Category",
             "tags": "Tags",
             "completed": "Completed",

src/store/index.ts

@@ -34,6 +34,7 @@ const propertiesTemplate = [
   { name: 'Seeds', active: true },
   { name: 'Status', active: true },
   { name: 'Ratio', active: true },
+  { name: 'Tracker', active: false },
   { name: 'Category', active: true },
   { name: 'Tags', active: true },
   { name: 'AddedOn', active: true },

tests/unit/helpers.spec.js

@@ -1,5 +1,5 @@
 import { describe, it, expect } from 'vitest'
-import { splitByUrl } from '@/helpers'
+import { splitByUrl, getDomainBody } from '@/helpers'
 
 describe('Helpers', () => {
   describe('splitByUrl()', () => {
@@ -30,4 +30,18 @@ describe('Helpers', () => {
       ])
     })
   })
+  describe('getDomainBody()', () => {
+    it('should not extract anyting', () => {
+      expect(getDomainBody('www.test.org')).toEqual('')
+    })
+    it('should extract if integrated url exists', () => {
+      expect(getDomainBody('https://test.org/announce.php?passkey=123abc')).toEqual('test')
+    })
+    it('should extract correctly from subdomain', () => {
+      expect(getDomainBody('https://ab.cd.test.org/announce.php?passkey=123abc')).toEqual('test')
+    })
+    it('should extract only the first one from multi urls', () => {
+      expect(getDomainBody('https://test.org/announce.php?passkey=123abc https://second.org/announce.php?passkey=123abc')).toEqual('test')
+    })
+  })
 })