feat: Links in torrent details view are now clickable (#506)

src/components/TorrentDetail/Tabs/Info.vue

@@ -139,25 +139,19 @@
           <td :class="commonStyle">
             {{ $t('modals.detail.pageInfo.trackers') }}
           </td>
-          <td>
-            {{ torrent.tracker }}
-          </td>
+          <td v-html="$options.filters.transformUrlToHref(torrent.tracker)" />
         </tr>
         <tr v-if="createdBy">
           <td :class="commonStyle">
             {{ $t('modals.detail.pageInfo.createdBy') }}
           </td>
-          <td>
-            {{ createdBy }}
-          </td>
+          <td v-html="$options.filters.transformUrlToHref(createdBy)" />
         </tr>
         <tr v-if="comment">
           <td :class="commonStyle">
             {{ $t('torrent.comments') | titleCase }}
           </td>
-          <td>
-            {{ comment }}
-          </td>
+          <td v-html="$options.filters.transformUrlToHref(comment)" />
         </tr>
 
         <tr>

src/filters.js

@@ -131,3 +131,11 @@ export function limitToValue(value) {
 }
 
 Vue.filter('limitToValue', limitToValue)
+
+export function transformUrlToHref(string) {
+  const expression = /(https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|www\.[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9]+\.[^\s]{2,}|www\.[a-zA-Z0-9]+\.[^\s]{2,})/gi
+
+  return string.replace(expression, '<a href="$1" target="_blank">$1</a>')
+}
+
+Vue.filter('transformUrlToHref', transformUrlToHref)

tests/unit/filters.spec.js

@@ -1,8 +1,28 @@
-import { titleCase } from '../../src/filters'
+import { titleCase, transformUrlToHref } from '../../src/filters'
 
 describe('Filters', () => {
   it('titleCase', () => {
     expect(titleCase('test')).toEqual('Test')
     expect(titleCase('hello there')).toEqual('Hello There')
   })
+
+  describe('transformUrlToHref()', () => {
+    it('should not transform anything', () => {
+      expect(transformUrlToHref('test')).toEqual('test')
+    })
+
+    it('should transform string where http/https is found', () => {
+      expect(transformUrlToHref('test http://test.something')).toEqual('test <a href="http://test.something" target="_blank">http://test.something</a>')
+      expect(transformUrlToHref('123456 test@345 https://something.else')).toEqual('123456 test@345 <a href="https://something.else" target="_blank">https://something.else</a>')
+    })
+
+    it('should transform string where only www is found', () => {
+      expect(transformUrlToHref('test www.test.something')).toEqual('test <a href="www.test.something" target="_blank">www.test.something</a>')
+    })
+
+    it('should transform string where both www and http/https are found', () => {
+      expect(transformUrlToHref('test http://www.test.something')).toEqual('test <a href="http://www.test.something" target="_blank">http://www.test.something</a>')
+      expect(transformUrlToHref('test https://www.something.else')).toEqual('test <a href="https://www.something.else" target="_blank">https://www.something.else</a>')
+    })
+  })
 })