From a43b0907e2414a50083ed42a47d636e5cc6c9c56 Mon Sep 17 00:00:00 2001
From: Shiny Nematoda <snematoda@noreply.codeberg.org>
Date: Thu, 14 Jul 2022 11:42:57 +0000
Subject: [PATCH] Added Explore Tab

---
 src/App.vue               |  43 +++++++++---
 src/assets/base.css       |  19 +++++-
 src/components/Genres.vue | 140 ++++++++++++++++++++++++++++++++++++++
 src/components/NavBar.vue |  20 +++++-
 src/components/Prefs.vue  |   1 +
 src/scripts/util.js       |   8 ++-
 6 files changed, 214 insertions(+), 17 deletions(-)
 create mode 100644 src/components/Genres.vue

diff --git a/src/App.vue b/src/App.vue
index 626e52e..03e65a8 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -7,6 +7,7 @@ import { ref, reactive, onBeforeMount, onMounted } from 'vue';
 import NavBar from './components/NavBar.vue';
 import StatusBar from './components/StatusBar.vue';
 import NowPlaying from './components/NowPlaying.vue';
+import Genres from './components/Genres.vue';
 import Search from './components/Search.vue';
 import NewPlaylist from './components/NewPlaylist.vue';
 import Playlists from './components/Playlists.vue';
@@ -52,36 +53,44 @@ const artist = reactive({
 });
 
 const search = ref(''),
+  genreid = ref(''),
   page = ref('home'),
-  title = ref('');
+  path = ref(location.pathname);
 
 const audio = ref(null);
 
 /* Functions */
 function parseUrl() {
-  const loc = location.href.split('/');
+  const loc = location.pathname.split('/'),
+    base = loc[1].replace(location.search, '');
 
-  console.log(loc, loc[3].replace(location.search, ''));
+  console.log(loc, base);
 
-  switch (loc[3].replace(location.search, '')) {
+  path.value = location.pathname;
+
+  switch (base) {
     case '':
       getExplore();
       break;
     case 'search':
-      search.value = loc[4];
+      search.value = loc[2];
       console.log(search.value);
       break;
     case 'watch':
-      getSong(loc[3]);
-      console.log(loc[3]);
+      getSong(loc[1] + location.search);
+      console.log(loc[1]);
       break;
     case 'playlist':
-      getAlbum(loc[3]);
-      console.log(loc[3]);
+      getAlbum(loc[1] + location.search);
+      console.log(loc[1]);
       break;
     case 'channel':
-      getArtist(loc[4]);
-      console.log(loc[4]);
+      getArtist(loc[1]);
+      console.log(loc[1]);
+      break;
+    case 'explore':
+      genreid.value = loc[2];
+      page.value = 'genres';
     default:
       console.log(loc);
   }
@@ -476,6 +485,18 @@ onMounted(() => {
         :search="search" />
     </KeepAlive>
 
+    <KeepAlive>
+      <Genres
+        v-if="page == 'genres'"
+        :id="genreid"
+        @get-album="
+          e => {
+            getAlbum(e);
+            page = 'home';
+          }
+        " />
+    </KeepAlive>
+
     <NewPlaylist v-if="page == 'playlist'" @play-urls="playList" />
 
     <Prefs v-if="page == 'prefs'" />
diff --git a/src/assets/base.css b/src/assets/base.css
index 4006f0e..7eab181 100644
--- a/src/assets/base.css
+++ b/src/assets/base.css
@@ -54,6 +54,22 @@ body[data-theme='light'] {
   --color-text: var(--vt-c-text-light-1);
 }
 
+body[data-theme='nord'] {
+  --color-foreground: var(--vt-c-blue);
+  --color-background: #2e3440;
+  --color-background-soft: #3b4252;
+  --color-background-mute: #434c5e;
+
+  --color-border: #4c566a;
+  --color-border-hover: #4c566a;
+
+  --color-shadow: #4c566a;
+  --color-scrollbar: var(--vt-c-blue);
+
+  --color-heading: #d8dee9;
+  --color-text: #d8dee9;
+}
+
 *,
 *::before,
 *::after {
@@ -146,7 +162,8 @@ button {
   transition: color 0.3s ease;
 }
 .bi:hover,
-.bi.true {
+.bi.true,
+.bi[data-active='true'] {
   color: var(--color-foreground);
 }
 
diff --git a/src/components/Genres.vue b/src/components/Genres.vue
new file mode 100644
index 0000000..00dddbe
--- /dev/null
+++ b/src/components/Genres.vue
@@ -0,0 +1,140 @@
+<script setup>
+import { reactive, ref, onMounted } from 'vue';
+
+import { getJson } from '../scripts/fetch.js';
+import { useRandColor } from '../scripts/colors.js';
+import { useRoute } from '../scripts/util.js';
+
+import AlbumItem from './AlbumItem.vue';
+
+const props = defineProps(['id']);
+defineEmits(['get-album']);
+
+const data = reactive({
+    title: '',
+    spotlight: [],
+    featured: [],
+    community: [],
+  }),
+  btns = reactive({
+    moods: [],
+    genres: [],
+  });
+
+function get(id) {
+  if (props.id || id) {
+    getJson(
+      'https://hyperpipeapi.onrender.com/genres/' + (props.id || id),
+    ).then(res => {
+      console.log(res);
+
+      for (let i of ['title', 'community', 'spotlight', 'featured']) {
+        data[i] = res[i];
+      }
+
+      useRoute('/explore/' + (props.id || id));
+    });
+  } else {
+    getJson('https://hyperpipeapi.onrender.com/genres').then(res => {
+      console.log(res);
+
+      for (let i of ['moods', 'genres']) {
+        btns[i] = res[i];
+      }
+
+      useRoute('/explore/');
+    });
+  }
+}
+
+onMounted(get);
+</script>
+
+<template>
+  <template v-if="data.title">
+    <h2 class="head">{{ data.title }}</h2>
+
+    <template v-for="type in ['featured', 'spotlight', 'community']">
+      <h3 class="head">{{ type }}</h3>
+      <div class="grid-3">
+        <template v-for="i in data[type]">
+          <AlbumItem
+            :name="i.title"
+            :author="i.subtitle"
+            :art="'url(' + i.thumbnails[0].url + ')'"
+            @open-album="$emit('get-album', '/playlist?list=' + i.id)" />
+        </template>
+      </div>
+    </template>
+  </template>
+
+  <template v-else>
+    <h2 v-if="btns.moods.length > 0">Moods</h2>
+
+    <div class="btn-grid">
+      <button
+        v-for="i in btns.moods"
+        class="btn"
+        :style="`--btn-color: ${i.subtitle};`"
+        @click="get(i.id)">
+        {{ i.title }}
+      </button>
+    </div>
+
+    <h2 v-if="btns.genres.length > 0">Genres</h2>
+
+    <div class="btn-grid">
+      <button
+        v-for="i in btns.genres"
+        class="btn"
+        :style="`--btn-color: ${i.subtitle};`"
+        @click="get(i.id)">
+        {{ i.title }}
+      </button>
+    </div>
+  </template>
+</template>
+
+<style scoped>
+.btn-grid {
+  display: grid;
+  grid-template-columns: calc(100% / 3) calc(100% / 3) calc(100% / 3);
+  grid-auto-rows: 1fr;
+  grid-gap: 0.125rem;
+  padding: 1rem 0;
+}
+.btn {
+  aspect-ratio: 1;
+  padding: 0.75rem;
+  border-radius: 0.25rem;
+  font-size: 1rem;
+  font-weight: bold;
+  letter-spacing: 0.125rem;
+  background-color: var(--color-background-mute);
+  color: var(--btn-color);
+}
+.btn:hover {
+  background-color: var(--color-background-soft);
+}
+.head {
+  margin-top: 1.75rem;
+  text-align: center;
+  text-transform: capitalize;
+}
+
+@media (min-width: 760px) {
+  .btn-grid {
+    grid-template-columns: calc(100% / 4) calc(100% / 4) calc(100% / 4) calc(
+        100% / 4
+      );
+  }
+}
+
+@media (min-width: 1024px) {
+  .btn-grid {
+    grid-template-columns: calc(100% / 5) calc(100% / 5) calc(100% / 5) calc(
+        100% / 5
+      ) calc(100% / 5);
+  }
+}
+</style>
diff --git a/src/components/NavBar.vue b/src/components/NavBar.vue
index 3f3d4c2..e525ad0 100644
--- a/src/components/NavBar.vue
+++ b/src/components/NavBar.vue
@@ -11,6 +11,7 @@ const emit = defineEmits(['update-page', 'update-search']),
     home: true,
     playlist: false,
     prefs: false,
+    genres: false,
   });
 
 const Toggle = p => {
@@ -33,13 +34,20 @@ const Toggle = p => {
 
     <div class="wrap">
       <span
-        :class="'nav-ico bi bi-house ' + page.home"
+        class="nav-ico bi bi-house"
+        :data-active="page.home"
         @click="Toggle('home')"></span>
       <span
-        :class="'nav-ico bi bi-collection ' + page.playlist"
+        class="nav-ico bi bi-compass"
+        :data-active="page.genres"
+        @click="Toggle('genres')"></span>
+      <span
+        class="nav-ico bi bi-collection"
+        :data-active="page.playlist"
         @click="Toggle('playlist')"></span>
       <span
-        :class="'nav-ico bi bi-gear ' + page.prefs"
+        class="nav-ico bi bi-gear"
+        :data-active="page.prefs"
         @click="Toggle('prefs')"></span>
     </div>
 
@@ -64,6 +72,7 @@ nav {
 }
 h1.bi {
   font-size: calc(1.75rem + 1.5vw);
+  padding-bottom: 0;
 }
 .bi {
   font-size: calc(1rem + 1.5vw);
@@ -75,4 +84,9 @@ h1.bi {
 .nav-ico {
   margin: 0 0.5rem;
 }
+@media (min-width: 1024px) {
+  .bi {
+    font-size: 1.5rem;
+  }
+}
 </style>
diff --git a/src/components/Prefs.vue b/src/components/Prefs.vue
index ed90538..4bffd19 100644
--- a/src/components/Prefs.vue
+++ b/src/components/Prefs.vue
@@ -63,6 +63,7 @@ onMounted(() => {
     @change="setTheme($event.target.value)">
     <option value="dark">Dark (Default)</option>
     <option value="light">Light</option>
+    <option value="nord">Nord</option>
   </select>
 
   <h2>Audio Player</h2>
diff --git a/src/scripts/util.js b/src/scripts/util.js
index 1676ea7..889bfec 100644
--- a/src/scripts/util.js
+++ b/src/scripts/util.js
@@ -1,4 +1,8 @@
-export const useStore = () => {
+export function useRoute(l) {
+  history.pushState({}, '', l);
+}
+
+export function useStore() {
   try {
     return window.localStorage;
   } catch (err) {
@@ -13,7 +17,7 @@ export const useStore = () => {
       setItem: error,
     };
   }
-};
+}
 
 export function useLazyLoad() {
   let lazyElems;