fix subsribers/subs on artist page

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>

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>

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",

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)",