Changes:

- Added Blur (Light) theme, Closes #62
- Support Changing Default Tab (related to #56)
- Link to Piped, Closes #48
- Continuations for albums (related to #46)
- Support for recently added languages

src/components/Btn.vue

@@ -16,7 +16,7 @@ defineEmits(['click']);
   height: 4rem;
   width: 4rem;
   font-size: 4rem;
-  color: #fff;
+  color: var(--color-text);
   padding: 0;
   line-height: 0;
   background: var(--color-foreground);

src/components/Prefs.vue

@@ -61,7 +61,7 @@ function getStoreBool(key, ele) {
 const verifyApi = computed(() =>
     hypInstances.value
       .map(i => i.api_url.replace('https://', '').replace('http://'))
-      .includes(getStore('api') || PIPED_INSTANCE),
+      .includes(getStore('api') || HYPERPIPE_INSTANCE),
   ),
   verifyPipedApi = computed(() =>
     instances.value
@@ -89,6 +89,7 @@ onMounted(() => {
     <option value="dark">Dark (Default)</option>
     <option value="light">Light</option>
     <option value="blur">Blur</option>
+    <option value="light blur">Blur (Light)</option>
     <option value="dracula">Dracula</option>
     <option value="nord">Nord</option>
   </select>
@@ -103,6 +104,19 @@ onMounted(() => {
     <option v-for="i in SUPPORTED_LOCALES" :value="i.code">{{ i.name }}</option>
   </select>
 
+  <h2>{{ t('pref.tab') }}</h2>
+
+  <select
+    id="pref-page"
+    class="input"
+    :value="getStore('page') || 'home'"
+    @change="setStore('page', $event.target.value)">
+    <option value="home">Home</option>
+    <option value="explore">Explore</option>
+    <option value="charts">Charts</option>
+    <option value="library">Library</option>
+  </select>
+
   <h2>{{ t('pref.player') }}</h2>
 
   <div class="left">
@@ -198,7 +212,14 @@ onMounted(() => {
     </table>
   </div>
 
-  <h2>{{ t('instances.piped') }}</h2>
+  <h2>
+    {{ t('instances.piped') }}
+    <a
+      href="https://github.com/TeamPiped/Piped"
+      target="_blank"
+      rel="noreferrer noopener"
+      class="bi bi-info-circle"></a>
+  </h2>
   <select
     v-if="instances"
     class="input"

src/components/Search.vue

@@ -99,29 +99,47 @@ const shuffleAdd = () => {
     }
   },
   loading = ref(false),
-  next = ref(null),
-  getSearchNext = async () => {
-    if (!isSearch.value || loading.value || !next.value) return;
+  getNextPage = async () => {
+    if (
+      (!isSearch.value && !results.items?.songs?.title) ||
+      loading.value ||
+      !results.next
+    )
+      return;
+
     if (
       window.innerHeight + window.scrollY >=
       document.body.offsetHeight - window.innerHeight
     ) {
       loading.value = true;
 
-      const f = filter.value || 'music_songs',
-        json = await getJsonPiped(
-          `/nextpage/search?nextpage=${encodeURIComponent(next.value)}&q=${
+      let items, key;
+
+      if (isSearch.value) {
+        const f = filter.value || 'music_songs';
+
+        const json = await getJsonPiped(
+          `/nextpage/search?nextpage=${encodeURIComponent(results.next)}&q=${
             nav.state.search
           }&filter=${f}`,
-        ),
-        key = f.split('_')[1];
+        );
 
-      next.value = json.nextpage;
-      results.items[key].items.push(...json.items);
+        key = f.split('_')[1];
+        results.next = json.nextpage;
+
+        items = json.items;
+      } else {
+        const json = await getJsonPiped(`/nextpage/playlists/${results.next}`);
+        key = 'songs';
+
+        items = json.relatedStreams;
+      }
+
+      results.items[key].items.push(...items);
 
       loading.value = false;
 
-      console.log(json, results.items);
+      console.log(items, results.items);
     }
   },
   getResults = async q => {
@@ -131,7 +149,7 @@ const shuffleAdd = () => {
       json = await getJsonPiped(`/search?q=${q}&filter=${f}`),
       key = f.split('_')[1];
 
-    next.value = json.nextpage;
+    results.next = json.nextpage;
 
     results.setItem(key, json);
     console.log(json, key);
@@ -156,11 +174,11 @@ onUpdated(() => {
 });
 
 onActivated(() => {
-  window.addEventListener('scroll', getSearchNext);
+  window.addEventListener('scroll', getNextPage);
 });
 
 onDeactivated(() => {
-  window.removeEventListener('scroll', getSearchNext);
+  window.removeEventListener('scroll', getNextPage);
 });
 </script>
 

src/components/StatusBar.vue

@@ -40,7 +40,10 @@ function getFormattedTime(sec) {
   minutes -= hours * 60;
 
   if (hours === 0) return `${minutes}:${String(seconds % 60).padStart(2, '0')}`;
-  else return `${hours}:${String(minutes).padStart(2, '0')}:${String(seconds % 60).padStart(2, '0')}`;
+  else
+    return `${hours}:${String(minutes).padStart(2, '0')}:${String(
+      seconds % 60,
+    ).padStart(2, '0')}`;
 }
 
 function List() {
@@ -195,11 +198,13 @@ async function Like() {
       <div class="statusbar-control-item center">
         <button
           :style="{
-            visibility: (data.state.urls[data.state.urls.map(s => s.url).indexOf(data.state.url) - 1] ||
+            visibility:
+              data.state.urls[
+                data.state.urls.map(s => s.url).indexOf(data.state.url) - 1
+              ] ||
               (player.state.loop == 1 && data.state.urls.length > 1)
-            )
-            ? 'visible'
-            : 'hidden'
+                ? 'visible'
+                : 'hidden',
           }"
           id="btn-previoustrack"
           aria-label="Play previous track"
@@ -215,11 +220,13 @@ async function Like() {
 
         <button
           :style="{
-            visibility: (data.state.urls[data.state.urls.map(s => s.url).indexOf(data.state.url) + 1] ||
+            visibility:
+              data.state.urls[
+                data.state.urls.map(s => s.url).indexOf(data.state.url) + 1
+              ] ||
               (player.state.loop == 1 && data.state.urls.length > 1)
-            )
-            ? 'visible'
-            : 'hidden'
+                ? 'visible'
+                : 'hidden',
           }"
           id="btn-nexttrack"
           aria-label="Play next track"