Added links to external GUID sources.

frontend/pages/history/[id]/index.vue

@@ -119,9 +119,11 @@
               <span class="icon-text">
                 <span class="icon"><i class="fas fa-link"></i></span>
                 <span>
-                  {{ ucFirst(data.type) }} GUIDs:
+                  <span v-tooltip="'Globally unique identifier for this item'">GUIDs:</span>
                   <span class="tag mr-1" v-for="(guid,source) in data.guids">
-                    {{ source.split('guid_')[1] }} : {{ guid }}
+                    <NuxtLink target="_blank" :href="makeGUIDLink( data.type, source.split('guid_')[1], guid, data)">
+                      {{ source.split('guid_')[1] }}-{{ guid }}
+                    </NuxtLink>
                   </span>
                 </span>
               </span>
@@ -131,9 +133,11 @@
               <span class="icon-text">
                 <span class="icon"><i class="fas fa-link"></i></span>
                 <span>
-                  Series GUIDs:
+                  <span v-tooltip="'Globally unique identifier for the series'">Series GUIDs:</span>
                   <span class="tag mr-1" v-for="(guid,source) in data.parent">
-                    {{ source.split('guid_')[1] }} : {{ guid }}
+                    <NuxtLink target="_blank" :href="makeGUIDLink( 'series', source.split('guid_')[1], guid, data)">
+                      {{ source.split('guid_')[1] }}-{{ guid }}
+                    </NuxtLink>
                   </span>
                 </span>
               </span>
@@ -231,9 +235,11 @@
               <span class="icon-text">
                 <span class="icon"><i class="fas fa-link"></i></span>
                 <span>
-                  {{ ucFirst(item.type) }} GUIDs:
+                  <span v-tooltip="'Globally unique identifier for this item'">GUIDs:</span>
                   <span class="tag mr-1" v-for="(guid,source) in item.guids">
-                    {{ source.split('guid_')[1] }} : {{ guid }}
+                    <NuxtLink target="_blank" :href="makeGUIDLink( item.type, source.split('guid_')[1], guid, item)">
+                      {{ source.split('guid_')[1] }}-{{ guid }}
+                    </NuxtLink>
                   </span>
                 </span>
               </span>
@@ -243,9 +249,11 @@
               <span class="icon-text">
                 <span class="icon"><i class="fas fa-link"></i></span>
                 <span>
-                  Series GUIDs:
+                  <span v-tooltip="'Globally unique identifier for the series'">Series GUIDs:</span>
                   <span class="tag mr-1" v-for="(guid,source) in item.parent">
-                    {{ source.split('guid_')[1] }} : {{ guid }}
+                    <NuxtLink target="_blank" :href="makeGUIDLink( 'series', source.split('guid_')[1], guid, item)">
+                      {{ source.split('guid_')[1] }}-{{ guid }}
+                    </NuxtLink>
                   </span>
                 </span>
               </span>
@@ -257,7 +265,6 @@
     </div>
 
     <div class="column is-12">
-
       <span class="title is-4 is-clickable" @click="showRawData = !showRawData">
         <span class="icon-text">
           <span class="icon">
@@ -276,7 +283,7 @@
 
 <script setup>
 import request from '~/utils/request.js'
-import {ag, notification, ucFirst} from '~/utils/index.js'
+import {ag, makeGUIDLink, notification, ucFirst} from '~/utils/index.js'
 import moment from 'moment'
 
 const id = useRoute().params.id

frontend/utils/index.js

@@ -4,6 +4,36 @@ const {notify} = useNotification();
 
 const AG_SEPARATOR = '.'
 
+const guid_links = {
+    'episode': {
+        'imdb': 'https://www.imdb.com/title/{_guid}',
+        'tmdb': 'https://www.themoviedb.org/tv/{parent.guid_tmdb}/season/{season}/episode/{episode}',
+        'tvdb': 'https://thetvdb.com/dereferrer/episode/{_guid}',
+        'tvmaze': 'https://www.tvmaze.com/episodes/{_guid}',
+        'anidb': 'https://anidb.net/episode/{_guid}',
+        'youtube_video': 'https://www.youtube.com/watch?v={_guid}',
+    },
+    'series': {
+        'imdb': 'https://www.imdb.com/title/{_guid}',
+        'tmdb': 'https://www.themoviedb.org/tv/{_guid}',
+        'tvdb': 'https://thetvdb.com/dereferrer/series/{_guid}',
+        'tvmaze': 'https://www.tvmaze.com/shows/{_guid}/-',
+        'anidb': 'https://anidb.net/anime/{_guid}',
+        'youtube_channel': 'https://www.youtube.com/channel/{_guid}',
+        'youtube_playlist': 'https://www.youtube.com/playlist?list={_guid}',
+    },
+    'movie': {
+        'imdb': 'https://www.imdb.com/title/{_guid}',
+        'tmdb': 'https://www.themoviedb.org/movie/{_guid}',
+        'tvdb': 'https://thetvdb.com/dereferrer/movie/{_guid}',
+        'anidb': 'https://anidb.net/anime/{_guid}',
+        'youtube_video': 'https://www.youtube.com/watch?v={_guid}',
+    },
+}
+
+const YT_CH = new RegExp('(UC|HC)[a-zA-Z0-9\\-_]{22}')
+const YT_PL = new RegExp('PL[^\\[\\]]{32}|PL[^\\[\\]]{16}|(UU|FL|LP|RD)[^\\[\\]]{22}')
+
 /**
  * Get value from object or function
  *
@@ -159,4 +189,64 @@ const notification = (type, title, text, duration = 3000) => {
     return notify({title, text, type: classes, duration})
 }
 
-export {ag_set, ag, humanFileSize, awaitElement, ucFirst, notification}
+/**
+ * Replace tags in text with values from context
+ *
+ * @param {string} text The text with tags
+ * @param {object} context The context with values
+ *
+ * @returns {string} The text with replaced tags
+ */
+const r = (text, context = {}) => {
+    const tagLeft = '{';
+    const tagRight = '}';
+
+    if (!text.includes(tagLeft) || !text.includes(tagRight)) {
+        return text
+    }
+
+    const pattern = new RegExp(`${tagLeft}([\\w_.]+)${tagRight}`, 'g');
+    const matches = text.match(pattern);
+
+    if (!matches) {
+        return text
+    }
+
+    let replacements = {};
+
+    matches.forEach(match => replacements[match] = ag(context, match.slice(1, -1), ''));
+
+    for (let key in replacements) {
+        text = text.replace(new RegExp(key, 'g'), replacements[key]);
+    }
+
+    return text
+}
+
+/**
+ * Make GUID link
+ *
+ * @param {string} type
+ * @param {string} source
+ * @param {string} guid
+ * @param {object} data
+ *
+ * @returns {string}
+ */
+const makeGUIDLink = (type, source, guid, data) => {
+    if ('youtube' === source) {
+        if (YT_CH.test(guid)) {
+            source = 'youtube_channel'
+        } else if (YT_PL.test(guid)) {
+            source = 'youtube_playlist'
+        } else {
+            source = 'youtube_video'
+        }
+    }
+
+    const link = ag(guid_links, `${type}.${source}`, null)
+
+    return null == link ? '' : r(link, {_guid: guid, ...toRaw(data)})
+}
+
+export {ag_set, ag, humanFileSize, awaitElement, ucFirst, notification, makeGUIDLink}