From c1f8da978225d41a1cbfd86bb12b2b41623bfbe0 Mon Sep 17 00:00:00 2001
From: vrifox <vrifox@vrifox.cc>
Date: Wed, 19 Jul 2023 12:13:50 +0200
Subject: [PATCH] fix subsribers/subs on artist page

---
 src/components/AlbumItem.vue |  8 +++++---
 src/components/Artist.vue    | 16 +++++++++-------
 src/locales/de.json          |  4 ++++
 src/locales/en.json          |  4 ++++
 4 files changed, 22 insertions(+), 10 deletions(-)

diff --git a/src/components/AlbumItem.vue b/src/components/AlbumItem.vue
index 4d94886..319d79a 100644
--- a/src/components/AlbumItem.vue
+++ b/src/components/AlbumItem.vue
@@ -1,7 +1,9 @@
 <script setup>
 import { useRand } from '@/scripts/colors.js';
+import { useI18n } from '@/stores/misc.js';
 
-const rand = useRand();
+const rand = useRand(),
+{ t } = useI18n();
 
 defineProps({
   name: String,
@@ -21,10 +23,10 @@ defineEmits(['open-album']);
 
 <template>
   <div class="album card pop" @click="$emit('open-album')">
-    <img class="card-bg bg-img pop-2" :src="art" loading="lazy" alt />
+    <img class="card-bg bg-img pop-2" :src="art" loading="lazy" alt="" />
 
     <div class="card-text">
-      <h4>{{ name.replace('subscribers', t('artist.subs')) }}</h4>
+      <h4>{{ name?.replace('subscribers', t('artist.subs')) }}</h4>
       <i>{{ author }}</i>
     </div>
   </div>
diff --git a/src/components/Artist.vue b/src/components/Artist.vue
index b6d31dd..9fdeffa 100644
--- a/src/components/Artist.vue
+++ b/src/components/Artist.vue
@@ -1,13 +1,15 @@
 <script setup>
-import { ref } from 'vue';
+import { onMounted, onUpdated, ref } from 'vue';
 import Btn from './Btn.vue';
 
 import { useStore } from '@/scripts/util.js';
 import { useResults, useArtist } from '@/stores/results.js';
+import { useI18n } from '@/stores/misc.js';
 
 const artist = useArtist(),
   results = useResults(),
-  store = useStore();
+  store = useStore(),
+  { t } = useI18n();
 
 const subs = JSON.parse(store.subs ? store.subs : '[]'),
   hash = artist.state.hash,
@@ -41,9 +43,9 @@ function Sub() {
           @click="
             results.getAlbum('/playlist?list=' + artist.state.playlistId)
           " />
-        <span class="us-box subs" :data-active="isSub" @click="Sub">{{
-          artist.state.subscriberCount || 0
-        }}</span>
+        <span class="us-box subs" :data-active="isSub" :data-subs-l="t('artist.subscribers')" :data-subs="t('artist.subs')" @click="Sub">
+          {{ artist.state.subscriberCount || 0 }}
+        </span>
       </div>
     </div>
   </div>
@@ -105,7 +107,7 @@ p.more {
   transition: background-color 0.4s ease, color 0.4s ease;
 }
 .subs::after {
-  content: ' Subscribers';
+  content: ' ' attr(data-subs-l);
   font-weight: bold;
 }
 .subs:hover,
@@ -116,7 +118,7 @@ p.more {
 }
 @media (max-width: 400px) {
   .subs::after {
-    content: ' Subs';
+    content: ' ' attr(data-subs);
   }
 }
 </style>
diff --git a/src/locales/de.json b/src/locales/de.json
index 038683a..b02e310 100644
--- a/src/locales/de.json
+++ b/src/locales/de.json
@@ -36,6 +36,10 @@
         "sync": "Wiedergabelisten synchronisieren",
         "select": "Hinzufügende Wiedergabeliste auswählen"
     },
+    "artist": {
+        "subscribers": "Abonnenten",
+        "subs": "Abos"
+    },
     "pref": {
         "worst": "schlechteste",
         "theme": "Farbschema",
diff --git a/src/locales/en.json b/src/locales/en.json
index 2807f32..8570f2f 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -36,6 +36,10 @@
     "sync": "Sync playlists",
     "select": "Select Playlist to Add"
   },
+  "artist": {
+    "subscribers": "Subscribers",
+    "subs": "Subs"
+  },
   "pref": {
     "theme": "Theme",
     "dark": "Dark (Default)",