fix: improvements

src/store/mutations.js

@@ -14,6 +14,7 @@ export default {
       src: [mp3],
       autoplay: true,
       html5: true,
+      format: ["mp3", "flac"],
     });
     state.howler.play();
   },

src/views/album.vue

@@ -14,10 +14,13 @@
         <div class="title"> {{ title }}</div>
         <div class="subtitle" v-if="subtitle !== ''">{{ subtitle }}</div>
         <div class="artist">
-          <span>{{ album.type | formatAlbumType(album) }} by </span
+          <span v-if="album.artist.id !== 104700">
-          ><router-link :to="`/artist/${album.artist.id}`">{{
+            <span>{{ album.type | formatAlbumType(album) }} by </span
-            album.artist.name
+            ><router-link :to="`/artist/${album.artist.id}`">{{
-          }}</router-link>
+              album.artist.name
+            }}</router-link></span
+          >
+          <span v-else>Compilation by Various Artists</span>
         </div>
         <div class="date-and-count">
           <span class="explicit-symbol" v-if="album.mark === 1056768"

src/views/playlist.vue

@@ -9,7 +9,11 @@
         :size="288"
       />
       <div class="info">
-        <div class="title">{{ playlist.name }}</div>
+        <div class="title"
+          ><span class="lock-icon" v-if="playlist.privacy === 10">
+            <svg-icon icon-class="lock" /></span
+          >{{ playlist.name }}</div
+        >
         <div class="artist">
           Playlist by
           <span
@@ -229,6 +233,16 @@ export default {
       font-size: 36px;
       font-weight: 700;
       color: var(--color-text);
+
+      .lock-icon {
+        opacity: 0.28;
+        color: var(--color-text);
+        margin-right: 8px;
+        .svg-icon {
+          height: 26px;
+          width: 26px;
+        }
+      }
     }
     .artist {
       font-size: 18px;