added MPRE* support

+ a few strings from #139
+ minor cleanup

src/App.vue

@@ -23,9 +23,7 @@ import Artist from '@/components/Artist.vue';
 /* Async Components */
 const Genres = defineAsyncComponent(() => import('@/components/Genres.vue')),
   Charts = defineAsyncComponent(() => import('@/components/Charts.vue')),
-  NewPlaylist = defineAsyncComponent(() =>
+  Library = defineAsyncComponent(() => import('@/components/Library.vue')),
-    import('@/components/NewPlaylist.vue'),
-  ),
   Prefs = defineAsyncComponent(() => import('@/components/Prefs.vue'));
 
 /* Composables */
@@ -77,6 +75,9 @@ function parseUrl() {
       genreid.value = loc[2];
       nav.state.page = 'explore';
       break;
+    case 'browse':
+      if (loc[2].startsWith('MPRE')) results.getAlbum('?list=' + loc[2]);
+      break;
     case 'charts':
       nav.state.page = 'charts';
       break;
@@ -171,7 +172,7 @@ onMounted(() => {
       <Charts v-if="nav.state.page == 'charts'" @play-urls="playList" />
     </KeepAlive>
 
-    <NewPlaylist
+    <Library
       v-if="nav.state.page == 'library'"
       @play-urls="playList"
       @open-playlist="results.getAlbum" />

src/assets/base.css

@@ -347,7 +347,8 @@ img {
   box-shadow: 0 0 0.5rem var(--color-border);
 }
 
-.grid, .grid-3 {
+.grid,
+.grid-3 {
   --col: 1;
   grid-template-columns: repeat(var(--col), 1fr);
 }

src/assets/version.json

@@ -1,3 +1,3 @@
 {
-  "date": "2023-07-30"
+  "date": "2023-08-12"
 }

src/components/Artist.vue

@@ -40,10 +40,7 @@ function Sub() {
         {{ artist.state.description }}
       </p>
       <div class="us-playwrap">
-        <Btn
+        <Btn @click="results.getAlbum('?list=' + artist.state.playlistId)" />
-          @click="
-            results.getAlbum('/playlist?list=' + artist.state.playlistId)
-          " />
         <span
           class="us-box subs"
           :data-active="isSub"

src/components/Genres.vue

@@ -66,7 +66,7 @@ onMounted(get);
           :author="i.subtitle"
           :art="i.thumbnails[0].url"
           @open-album="
-            getAlbum('/playlist?list=' + i.id);
+            getAlbum('?list=' + i.id);
             nav.state.page = 'home';
           " />
       </div>
@@ -82,7 +82,7 @@ onMounted(get);
           :author="i.subtitle"
           :art="i.thumbnails[0].url"
           @open-album="
-            getAlbum('/playlist?list=' + i.id);
+            getAlbum('?list=' + i.id);
             nav.state.page = 'home';
           " />
       </div>

src/components/Info.vue

@@ -3,7 +3,7 @@ import { useI18n } from '@/stores/misc.js';
 
 import TextModal from './TextModal.vue';
 
-defineProps(['text']);
+defineProps({ text: String });
 
 const { t } = useI18n(),
   parse = d => new DOMParser().parseFromString(d, 'text/html').body.innerText;

src/components/Library.vue

@@ -436,7 +436,10 @@ onMounted(async () => {
     <h2 v-if="list.length > 0">{{ t('playlist.local') }}</h2>
 
     <div class="grid-3">
-      <AlbumItem name="Offline" :grad="useRand()" @open-album="OpenOffline()" />
+      <AlbumItem
+        :name="t('title.offline')"
+        :grad="useRand()"
+        @open-album="OpenOffline()" />
       <AlbumItem
         v-for="i in list"
         :key="i.name"
@@ -456,7 +459,7 @@ onMounted(async () => {
         :name="i.name.replace('Playlist - ', '')"
         :author="t('title.songs') + ' • ' + i.videos"
         :art="pathname(i.thumbnail) != '/' ? i.thumbnail : undefined"
-        @open-album="$emit('open-playlist', '/playlist?list=' + i.id)" />
+        @open-album="$emit('open-playlist', '?list=' + i.id)" />
     </div>
     <form v-else class="login" @submit.prevent>
       <input

src/components/Player.vue

@@ -21,9 +21,7 @@ function audioCanPlay() {
     player.state.status = 'play';
   });
 
-  if (location.pathname != '/playlist') {
+  if (location.pathname != '/playlist') useRoute(data.state.url);
-    useRoute(data.state.url);
-  }
 
   document.title = `Playing: ${data.state.title} by ${data.state.artist}`;
 }

src/components/Search.vue

@@ -341,9 +341,7 @@ onDeactivated(() => {
     </div>
     <a
       v-if="artist.state.playlistId"
-      @click.prevent="
+      @click.prevent="results.getAlbum('?list=' + artist.state.playlistId)"
-        results.getAlbum('/playlist?list=' + artist.state.playlistId)
-      "
       class="more"
       :href="'/playlist?list=' + artist.state.playlistId"
       >{{ t('info.see_all') }}</a
@@ -361,9 +359,7 @@ onDeactivated(() => {
         :author="album.uploaderName || album.subtitle"
         :name="album.name || album.title"
         :art="album.thumbnail || album.thumbnails[0].url"
-        @open-album="
+        @open-album="results.getAlbum(album.url || '?list=' + album.id)" />
-          results.getAlbum(album.url || '/playlist?list=' + album.id)
-        " />
     </div>
     <a
       v-if="results.items.albums.more?.params"
@@ -399,7 +395,7 @@ onDeactivated(() => {
         :author="single.subtitle"
         :name="single.title"
         :art="single.thumbnails[0].url"
-        @open-album="results.getAlbum('/playlist?list=' + single.id)" />
+        @open-album="results.getAlbum('?list=' + single.id)" />
     </div>
     <a
       v-if="results.items.singles.more?.params"
@@ -429,7 +425,7 @@ onDeactivated(() => {
           ? results.items.artists.items
           : results.items.recommendedArtists.items"
         :key="a.id || a.url"
-        :author="a.subtitle"
+        :author="a.subtitle.replace('subscribers', t('artist.subscribers'))"
         :name="a.name || a.title"
         :art="a.thumbnail || a.thumbnails[0].url"
         @open-album="

src/locales/en.json

@@ -15,7 +15,8 @@
     "local": "Local",
     "remote": "Remote",
     "search": "Search",
-    "feeds": "Feeds"
+    "feeds": "Feeds",
+    "offline": "Offline"
   },
   "action": {
     "back": "Back",

src/stores/results.js

@@ -40,7 +40,11 @@ export const useResults = defineStore('results', () => {
   async function getAlbum(e) {
     const hash = new URLSearchParams(e.substring(e.indexOf('?'))).get('list'),
       isAuth = useVerifyAuth(hash),
-      path = '/playlists/' + hash,
+      path =
+        '/playlists/' +
+        (hash.startsWith('MPRE')
+          ? (await getJsonHyp('/album/' + hash))?.id
+          : hash),
       json = isAuth ? await getJsonAuth(path) : await getJsonPiped(path);
 
     resetItems();
@@ -58,7 +62,7 @@ export const useResults = defineStore('results', () => {
       title: json.name,
     });
 
-    useRoute(e);
+    useRoute('/playlist?list=' + hash);
     useNav().state.page = 'home';
     document.body.scrollIntoView();