Bug Fixes:

- Fixed Navbar links (closes #8)
- Fixed Lyrics not updating

src/components/Genres.vue

@@ -1,7 +1,7 @@
 <script setup>
-import { reactive, ref, onMounted } from 'vue';
+import { reactive, ref, onMounted, onUnmounted } from 'vue';
 
-import { getJson } from '../scripts/fetch.js';
+import { getJsonHyp } from '../scripts/fetch.js';
 import { useRandColor } from '../scripts/colors.js';
 import { useRoute } from '../scripts/util.js';
 
@@ -19,25 +19,28 @@ const data = reactive({
   btns = reactive({
     moods: [],
     genres: [],
-  });
+  }),
+  todo = ['title', 'community', 'spotlight', 'featured'];
 
 function get(id) {
-  if (props.id || id) {
-    getJson(
-      'https://hyperpipeapi.onrender.com/genres/' + (props.id || id),
-    ).then(res => {
+  if (props.id || typeof id == 'string') {
+    getJsonHyp('/genres/' + (props.id || id)).then(res => {
       console.log(res);
 
-      for (let i of ['title', 'community', 'spotlight', 'featured']) {
+      for (let i of todo) {
         data[i] = res[i];
       }
 
       useRoute('/explore/' + (props.id || id));
     });
   } else {
-    getJson('https://hyperpipeapi.onrender.com/genres').then(res => {
+    getJsonHyp('/genres').then(res => {
       console.log(res);
 
+      for (let i of todo) {
+        data[i] = undefined;
+      }
+
       for (let i of ['moods', 'genres']) {
         btns[i] = res[i];
       }
@@ -52,6 +55,8 @@ onMounted(get);
 
 <template>
   <template v-if="data.title">
+    <i class="bi bi-arrow-left back" @click="get"> Back</i>
+
     <h2 class="head">{{ data.title }}</h2>
 
     <template v-for="type in ['featured', 'spotlight', 'community']">
@@ -62,7 +67,10 @@ onMounted(get);
             :name="i.title"
             :author="i.subtitle"
             :art="'url(' + i.thumbnails[0].url + ')'"
-            @open-album="$emit('get-album', '/playlist?list=' + i.id)" />
+            @open-album="
+              $emit('get-album', '/playlist?list=' + i.id);
+              nav.state.page = 'home';
+            " />
         </template>
       </div>
     </template>
@@ -96,6 +104,9 @@ onMounted(get);
 </template>
 
 <style scoped>
+.back {
+  width: fit-content;
+}
 .btn-grid {
   display: grid;
   grid-template-columns: calc(100% / 3) calc(100% / 3) calc(100% / 3);

src/components/Lyrics.vue

@@ -14,31 +14,29 @@ const data = useData(),
 function get() {
   status.value = false;
 
-  if (data.state.lyrics && data.state.urls === data.state.urls[0]?.url) {
-    getJsonHyp('/browse/' + data.state.lyrics).then(res => {
+  const set = id => {
+    getJsonHyp('/browse/' + id).then(res => {
       text.value = res.text;
       source.value = res.source;
       status.value = true;
     });
-  } else if (data.state.urls[0]?.url) {
-    getJsonHyp(
-      '/next/' + data.state.urls[0]?.url.replace('/watch?v=', ''),
-    ).then(next => {
-      if (next.lyricsId) {
-        getJsonHyp('/browse/' + next.lyricsId).then(res => {
-          text.value = res.text;
-          source.value = res.source;
-          status.value = true;
-        });
-      }
-    });
+  };
+
+  if (data.state.lyrics && data.state.urls === data.state.url) {
+    set(data.state.lyrics);
+  } else if (data.state.url) {
+    getJsonHyp('/next/' + data.state.url.replace('/watch?v=', '')).then(
+      next => {
+        if (next.lyricsId) set(next.lyricsId);
+      },
+    );
   }
 }
 
 get();
 
 watch(
-  () => data.state.urls[0]?.url,
+  () => data.state.url,
   () => {
     get();
   },

src/components/NavBar.vue

@@ -4,7 +4,26 @@ import SearchBar from '../components/SearchBar.vue';
 
 import { useNav } from '@/stores/misc.js';
 
+import { useRoute } from '@/scripts/util.js';
+
+const emit = defineEmits(['explore']);
+
 const nav = useNav();
+
+function home() {
+  useRoute('/');
+  nav.state.page = 'home';
+  emit('explore');
+}
+
+function set(page) {
+  nav.state.page = page;
+  if (page == 'home') {
+    useRoute('/');
+  } else {
+    useRoute(`/${page}/`);
+  }
+}
 </script>
 
 <template>
@@ -15,19 +34,19 @@ const nav = useNav();
       <span
         class="nav-ico bi bi-house"
         :data-active="nav.state.page == 'home'"
-        @click="nav.state.page = 'home'"></span>
+        @click="set('home')"></span>
       <span
         class="nav-ico bi bi-compass"
-        :data-active="nav.state.page == 'genres'"
-        @click="nav.state.page = 'genres'"></span>
+        :data-active="nav.state.page == 'explore'"
+        @click="set('explore')"></span>
       <span
         class="nav-ico bi bi-collection"
-        :data-active="nav.state.page == 'playlist'"
-        @click="nav.state.page = 'playlist'"></span>
+        :data-active="nav.state.page == 'library'"
+        @click="set('library')"></span>
       <span
         class="nav-ico bi bi-gear"
         :data-active="nav.state.page == 'prefs'"
-        @click="nav.state.page = 'prefs'"></span>
+        @click="set('prefs')"></span>
     </div>
 
     <div class="wrap">

src/components/Search.vue

@@ -30,11 +30,15 @@ const playAlbum = () => {
   },
   saveAlbum = () => {
     const urls = results.items?.songs?.items?.map(item => {
-        return { url: item.url, title: item.title };
-      }),
-      title = results.items?.songs?.title;
+      return { url: item.url, title: item.title };
+    });
+
+    let title = results.items?.songs?.title;
 
     if (title) {
+      if (title == 'Songs')
+        title += ' - ' + results.items.songs.items[0].uploaderName;
+
       useCreatePlaylist(title, urls, () => {
         alert('Saved!');
       });