From 19fc65e6c0c83ae26570f771f2bfa5968fb1f77e Mon Sep 17 00:00:00 2001
From: Shiny Nematoda <shiny_nematoda@codeberg.org>
Date: Tue, 3 May 2022 19:17:48 +0530
Subject: [PATCH] Search Improvements

---
 README.md                      |  18 +--
 index.html                     |   8 +-
 package-lock.json              |  11 ++
 package.json                   |   1 +
 public/manifest.json           |   3 +-
 src/App.vue                    |  98 ++++++++---------
 src/assets/base.css            |   4 +-
 src/components/AlbumItem.vue   |   4 +-
 src/components/Modal.vue       | 193 +++++++++++++++++----------------
 src/components/NavBar.vue      |  37 ++++---
 src/components/NewPlaylist.vue | 173 ++++++++++++++++-------------
 src/components/NowPlaying.vue  |   7 +-
 src/components/Search.vue      |  88 ++++++++++-----
 src/components/SearchBar.vue   |   2 +
 src/components/SongItem.vue    |  18 +--
 src/components/StatusBar.vue   |  84 +++++++++++---
 src/scripts/colors.js          |  18 +--
 src/scripts/db.js              | 172 ++++++++++++++++-------------
 src/scripts/util.js            |  10 +-
 19 files changed, 545 insertions(+), 404 deletions(-)

diff --git a/README.md b/README.md
index 8d7f106..13f945a 100644
--- a/README.md
+++ b/README.md
@@ -1,4 +1,4 @@
-# Hyperpipe
+# \[WIP\] Hyperpipe
 
 ![On Codeberg](https://codeberg.org/Hyperpipe/static/raw/branch/master/on-codeberg.svg)
 
@@ -9,7 +9,7 @@ A Privacy Respecting Frontend for YouTube Music inspired and built with the help
 
 ## Usage
 
-***HYPERPIPE IS ONLY BEING DEVELOPED, EXPECT BUGS AND MESSY CODE***
+**_HYPERPIPE IS ONLY BEING DEVELOPED, EXPECT BUGS AND MESSY CODE_**
 
 ```sh
 npm install
@@ -37,17 +37,19 @@ npm run build
 
 ## Instances
 
-| Instance                     | Country (Backend) |
+|           Instance           | Country (Backend) |
 | :--------------------------: | :---------------: |
-| [hyperpipe.surge.sh][hypipe] | 🇩🇪                |
+| [hyperpipe.surge.sh][hypipe] |        🇩🇪         |
 
 ## LICENSE
 
 ### GPL v3 Only
 
-Please refer to [LICENSE][LICENSE].
+Please refer to [LICENSE][license].
 
-You can reach out to me on <TODO>
+You can reach out to me on
+
+- snematoda.751k2 [at] aleeas [dot] com
 
 ### Dependencies and Mentions
 
@@ -60,10 +62,10 @@ You can reach out to me on <TODO>
 
 [hypipe]: https://hyperpipe.surge.sh
 [piped]: https://piped.kavin.rocks
-[LICENSE]: https://codeberg.org/Hyperpipe/Hyperpipe/src/branch/main/LICENSE.txt
+[license]: https://codeberg.org/Hyperpipe/Hyperpipe/src/branch/main/LICENSE.txt
 [vue]: https://github.com/vuejs/core/blob/main/LICENSE
 [vite]: https://github.com/vitejs/vite/blob/main/LICENSE
 [bi]: https://github.com/twbs/icons/blob/main/LICENSE.md
 [hls]: https://github.com/video-dev/hls.js/blob/master/LICENSE
 [nord]: https://github.com/arcticicestudio/nord/blob/develop/LICENSE.md
-[vuetheme]: https://github.com/vuejs/theme/blob/main/LICENSE
\ No newline at end of file
+[vuetheme]: https://github.com/vuejs/theme/blob/main/LICENSE
diff --git a/index.html b/index.html
index e1297a9..982f95b 100644
--- a/index.html
+++ b/index.html
@@ -7,8 +7,8 @@
     <link rel="preconnect" href="https://cdn.jsdelivr.net" />
     <link rel="preconnect" href="https://hyperpipeapi.onrender.com" />
     <link rel="dns-prefetch" href="https://hyperpipe-proxy.onrender.com" />
-    
-    <link rel="manifest" href="/manifest.json">
+
+    <link rel="manifest" href="/manifest.json" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
     <title>Hyperpipe</title>
@@ -23,9 +23,5 @@
       href="https://cdn.jsdelivr.net/npm/bootstrap-icons@latest/font/bootstrap-icons.css" />
 
     <script type="module" src="/src/main.js"></script>
-
-    <script
-      src="https://cdn.jsdelivr.net/npm/hls.js@latest/dist/hls.min.js"
-      defer></script>
   </body>
 </html>
diff --git a/package-lock.json b/package-lock.json
index f5df5d2..b5d2270 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,7 @@
       "name": "hyperpipe",
       "version": "0.0.0",
       "dependencies": {
+        "hls.js": "^1.1.5",
         "vue": "^3.2.31"
       },
       "devDependencies": {
@@ -539,6 +540,11 @@
         "node": ">= 0.4.0"
       }
     },
+    "node_modules/hls.js": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/hls.js/-/hls.js-1.1.5.tgz",
+      "integrity": "sha512-mQX5TSNtJEzGo5HPpvcQgCu+BWoKDQM6YYtg/KbgWkmVAcqOCvSTi0SuqG2ZJLXxIzdnFcKU2z7Mrw/YQWhPOA=="
+    },
     "node_modules/is-core-module": {
       "version": "2.8.1",
       "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.8.1.tgz",
@@ -1040,6 +1046,11 @@
         "function-bind": "^1.1.1"
       }
     },
+    "hls.js": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/hls.js/-/hls.js-1.1.5.tgz",
+      "integrity": "sha512-mQX5TSNtJEzGo5HPpvcQgCu+BWoKDQM6YYtg/KbgWkmVAcqOCvSTi0SuqG2ZJLXxIzdnFcKU2z7Mrw/YQWhPOA=="
+    },
     "is-core-module": {
       "version": "2.8.1",
       "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.8.1.tgz",
diff --git a/package.json b/package.json
index f2cdcf9..4b1e297 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,7 @@
     "check": "prettier --check ."
   },
   "dependencies": {
+    "hls.js": "^1.1.5",
     "vue": "^3.2.31"
   },
   "devDependencies": {
diff --git a/public/manifest.json b/public/manifest.json
index 8e268e3..22b8c52 100644
--- a/public/manifest.json
+++ b/public/manifest.json
@@ -4,6 +4,5 @@
 	"start_url": "/",
 	"display": "standalone",
 	"background_color": "#fff",
-	"description": "Privacy respecting YouTube Music Frontend.",
-
+	"description": "Privacy respecting YouTube Music Frontend."
 }
\ No newline at end of file
diff --git a/src/App.vue b/src/App.vue
index 97ae643..10457c1 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,4 +1,5 @@
 <script setup>
+import Hls from 'hls.js';
 import { ref, reactive, onMounted } from 'vue';
 
 import NavBar from './components/NavBar.vue';
@@ -11,7 +12,7 @@ import Artist from './components/Artist.vue';
 
 import { getJson, getJsonPiped } from './scripts/fetch.js';
 import { useLazyLoad } from './scripts/util.js';
-import { useUpdatePlaylist } from './scripts/db.js'
+import { useSetupDB, useUpdatePlaylist } from './scripts/db.js';
 
 const data = reactive({
   artUrl: '',
@@ -24,6 +25,7 @@ const data = reactive({
   items: {},
   title: '',
   artist: '',
+  artistUrl: '',
   state: 'play',
   duration: 0,
   time: 0,
@@ -39,7 +41,8 @@ const artist = reactive({
   thumbnails: [],
 });
 
-const search = ref(''), page = ref('home');
+const search = ref(''),
+  page = ref('home');
 
 const audio = ref(null);
 
@@ -50,8 +53,8 @@ function parseUrl() {
 
   switch (loc[3].replace(location.search, '')) {
     case '':
-      search.value = ''
-      page.value = 'home'
+      search.value = '';
+      page.value = 'home';
       break;
     case 'search':
       search.value = loc[4];
@@ -75,7 +78,7 @@ function parseUrl() {
 
 function Toggle(e) {
   console.log(e, data[e]);
-  data[e] = !data[e]
+  data[e] = !data[e];
 }
 
 function timeUpdate(t) {
@@ -122,7 +125,7 @@ function playNext(u) {
   audio.value.src = '';
 
   const i = data.urls.map((s) => s.url).indexOf(data.url),
-        next = data.urls[i + 1];
+    next = data.urls[i + 1];
 
   console.log('Index: ' + i);
   console.log(data.url, data.urls, next);
@@ -150,6 +153,7 @@ async function getSong(e) {
   data.cover = `--art: url(${json.thumbnailUrl});`;
   data.nowtitle = json.title;
   data.nowartist = json.uploader.split(' - ')[0];
+  data.artistUrl = json.uploaderUrl;
   data.duration = json.duration;
   data.url = e;
 
@@ -200,7 +204,11 @@ async function getArtist(e) {
 }
 
 async function getNext(hash) {
-  if (!data.urls || data.urls.map((s) => s.url).indexOf(data.url) < 0 || data.urls.length == 1) {
+  if (
+    !data.urls ||
+    data.urls.map((s) => s.url).indexOf(data.url) < 0 ||
+    data.urls.length == 1
+  ) {
     const json = await getJson(
       'https://hyperpipeapi.onrender.com/next/' + hash,
     );
@@ -266,14 +274,18 @@ function audioCanPlay() {
 }
 
 function SaveTrack(e) {
-  useUpdatePlaylist(e, {
-    url: data.url,
-    title: data.nowtitle
-  }, (e) => {
-    if (e === true) {
-      console.log('Added Song To '+ e)
-    }
-  })
+  useUpdatePlaylist(
+    e,
+    {
+      url: data.url,
+      title: data.nowtitle,
+    },
+    (e) => {
+      if (e === true) {
+        console.log('Added Song To ' + e);
+      }
+    },
+  );
 }
 
 function setMetadata() {
@@ -281,7 +293,7 @@ function setMetadata() {
     const i = data.urls.map((u) => u.url).indexOf(data.url);
 
     let artwork = [],
-        album = undefined;
+      album = undefined;
 
     console.log(i);
 
@@ -320,7 +332,7 @@ onMounted(() => {
   document.addEventListener('orientationChange', useLazyLoad);
 
   window.addEventListener('popstate', parseUrl);
-  
+
   window.onbeforeunload = () => {
     if (data.url) {
       return 'Are you Sure?';
@@ -344,32 +356,7 @@ onMounted(() => {
     });
   }
 
-  if ('indexedDB' in window) {
-    const req = indexedDB.open('hyperpipedb', 1)
-
-    req.onupgradeneeded = e => {
-      const db = e.target.result;
-      console.log(db)
-
-      if (!db.objectStoreNames.contains("playlist")) {
-
-        const store = db.createObjectStore("playlist", { keyPath: 'name' })
-
-        store.createIndex('urls', 'urls', {  unique: false })
-      
-      }
-    }
-
-    req.onerror = e => {
-      console.log("Please let me use indexedDB!!")
-      console.log(e)
-    }
-
-    req.onsuccess = e => {
-      window.db = e.target.result
-    }
-
-  }
+  useSetupDB()
 
   parseUrl();
 
@@ -384,7 +371,11 @@ onMounted(() => {
         search = e;
       }
     "
-    @update-page="(e) => { page = e }"
+    @update-page="
+      (e) => {
+        page = e;
+      }
+    "
     :search="search" />
 
   <template v-if="artist">
@@ -401,27 +392,24 @@ onMounted(() => {
     <div v-if="data.cover" class="art bg-img" :style="data.cover"></div>
 
     <div class="wrapper">
-      <NowPlaying
-        :title="data.nowtitle"
-        :artist="data.nowartist" />
+      <NowPlaying @get-artist="getArtist" :title="data.nowtitle" :artist="data.nowartist" :artistUrl="data.artistUrl" />
     </div>
   </header>
 
   <main class="placeholder">
     <template v-if="page == 'home'">
       <Search
-      @get-album="getAlbum"
-      @get-artist="getArtist"
-      @play-urls="playList"
-      @add-song="addSong"
-      :items="data.items"
-      :songItems="data.songItems"
-      :search="search" />
+        @get-album="getAlbum"
+        @get-artist="getArtist"
+        @play-urls="playList"
+        @add-song="addSong"
+        :items="data.items"
+        :songItems="data.songItems"
+        :search="search" />
     </template>
     <template v-if="page == 'playlist'">
       <NewPlaylist @play-urls="playList" />
     </template>
-    
   </main>
 
   <Playlists
diff --git a/src/assets/base.css b/src/assets/base.css
index 987feb4..bb604d7 100644
--- a/src/assets/base.css
+++ b/src/assets/base.css
@@ -142,10 +142,10 @@ button {
 }
 
 .textbox {
-  padding: .5rem 1rem;
+  padding: 0.5rem 1rem;
   color: var(--color-text);
   background: var(--color-background-mute);
-  border-radius: .25rem;
+  border-radius: 0.25rem;
   font-size: 1rem;
   border: none;
   appearence: none;
diff --git a/src/components/AlbumItem.vue b/src/components/AlbumItem.vue
index 811c74a..3abac2e 100644
--- a/src/components/AlbumItem.vue
+++ b/src/components/AlbumItem.vue
@@ -3,7 +3,7 @@ defineProps({
   name: String,
   author: {
     type: String,
-    default: ''
+    default: '',
   },
   grad: String,
   art: {
@@ -39,7 +39,7 @@ defineEmits(['open-album']);
 }
 .card-bg {
   --art: v-bind('grad || art');
-  background: v-bind('grad');
+  background-color: v-bind('grad');
   height: 13rem;
   width: 13rem;
 }
diff --git a/src/components/Modal.vue b/src/components/Modal.vue
index d8337a9..b521d48 100644
--- a/src/components/Modal.vue
+++ b/src/components/Modal.vue
@@ -1,104 +1,107 @@
 <script setup>
-	import { ref, watch } from 'vue'
+import { ref, watch } from 'vue';
 
-	const props = defineProps(['display', 'title', 'n']),
-	emit = defineEmits(['show']),
-	show = ref(props.display);
+const props = defineProps(['display', 'title', 'n']),
+  emit = defineEmits(['show']),
+  show = ref(props.display);
 
-	watch(() => props.display, (n) => {
-		console.log(n, props.display)
-		show.value = n
-	})
-	watch(show, (n) => {
-		emit('show', show.value)
-	})
+watch(
+  () => props.display,
+  (n) => {
+    console.log(n, props.display);
+    show.value = n;
+  },
+);
+watch(show, (n) => {
+  emit('show', show.value);
+});
 </script>
 <template>
-	<Transition name="fade">
-		<div class="modal" v-if="show">
-			<span class="bi bi-x modal-close" @click="show = false"></span>
-			<div class="modal-box">
-				<div class="modal-title">{{ title }}</div>
-				<div class="modal-content">
-					<slot name="content"></slot>
-				</div>
-				<div class="modal-buttons">
-					<slot name="buttons"></slot>
-				</div>
-			</div>
-		</div>
-	</Transition>
+  <Transition name="fade">
+    <div class="modal" v-if="show">
+      <span class="bi bi-x modal-close" @click="show = false"></span>
+      <div class="modal-box">
+        <div class="modal-title">{{ title }}</div>
+        <div class="modal-content">
+          <slot name="content"></slot>
+        </div>
+        <div class="modal-buttons">
+          <slot name="buttons"></slot>
+        </div>
+      </div>
+    </div>
+  </Transition>
 </template>
 
 <style>
-	.modal {
-		display: flex;
-		position: fixed;
-		align-items: center;
-		justify-content: center;
-		top: 0;
-		bottom: 0;
-		left: 0;
-		right: 0;
-		background-color: #00000066;
-		z-index: 9999;
-	}
-	.modal-box {
-		width: 50vw;
-		border-radius: .5rem;
-		background-color: var(--color-background-soft);
-	}
-	.modal-title {
-		font-size: 1.25rem;
-		padding: 1rem 2rem;
-		border-bottom: 1px solid var(--color-shadow);
-	}
-	.modal-content {
-		padding: 1rem;
-	}
-	.modal-content * {
-		width: 100%;
-		padding: 1rem;
-	}
-	.modal-close {
-		color: var(--color-background);
-		font-size: 2rem;
-		position: fixed;
-		top: 1rem;
-		right: 1rem;
-	}
-	.modal-buttons {
-		width: 100%;
-		border-top: 1px solid var(--color-shadow);
-	}
-	.modal-buttons button {
-		padding: 1rem 2rem;
-		color: var(--color-foreground);
-		width: calc(100% / v-bind('n'));
-		font-size: 1rem;
-		font-weight: bold;
-		border-right: 1px solid var(--color-shadow);
-	}
-	.modal-buttons button:first-child {
-		color: indianred;
-		border-bottom-left-radius: .5rem;
-	}
-	.modal-buttons button:last-child {
-		border: none;
-		border-bottom-right-radius: .5rem;
-	}
-	.modal-buttons button:hover {
-		background-color: var(--color-background-mute);
-	}
+.modal {
+  display: flex;
+  position: fixed;
+  align-items: center;
+  justify-content: center;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background-color: #00000066;
+  z-index: 9999;
+}
+.modal-box {
+  width: 50vw;
+  border-radius: 0.5rem;
+  background-color: var(--color-background-soft);
+}
+.modal-title {
+  font-size: 1.25rem;
+  padding: 1rem 2rem;
+  border-bottom: 1px solid var(--color-shadow);
+}
+.modal-content {
+  padding: 1rem;
+}
+.modal-content * {
+  width: 100%;
+  padding: 1rem;
+}
+.modal-close {
+  color: var(--color-background);
+  font-size: 2rem;
+  position: fixed;
+  top: 1rem;
+  right: 1rem;
+}
+.modal-buttons {
+  width: 100%;
+  border-top: 1px solid var(--color-shadow);
+}
+.modal-buttons button {
+  padding: 1rem 2rem;
+  color: var(--color-foreground);
+  width: calc(100% / v-bind('n'));
+  font-size: 1rem;
+  font-weight: bold;
+  border-right: 1px solid var(--color-shadow);
+}
+.modal-buttons button:first-child {
+  color: indianred;
+  border-bottom-left-radius: 0.5rem;
+}
+.modal-buttons button:last-child {
+  border: none;
+  border-bottom-right-radius: 0.5rem;
+}
+.modal-buttons button:hover {
+  background-color: var(--color-background-mute);
+}
 
-	@media (max-width: 530px) {
-		.modal-box {
-			width: 80vw;
-		}
-	}
-	@media (min-width: 1024px) {
-		.modal-box {
-			width: 40vw;
-		}
-	}
-</style>
\ No newline at end of file
+@media (max-width: 530px) {
+  .modal-box {
+    width: 80vw;
+  }
+}
+@media (min-width: 1024px) {
+  .modal-box {
+    width: 40vw;
+  }
+}
+</style>
diff --git a/src/components/NavBar.vue b/src/components/NavBar.vue
index 6e48837..45c4192 100644
--- a/src/components/NavBar.vue
+++ b/src/components/NavBar.vue
@@ -1,25 +1,25 @@
 <script setup>
-import { reactive } from 'vue'
+import { reactive } from 'vue';
 import SearchBar from '../components/SearchBar.vue';
 
-const emit = defineEmits(['update-page', 'update-search']);
+const emit = defineEmits(['update-page', 'update-search']),
 
-const page = reactive({
+page = reactive({
   home: true,
-  playlist: false
-})
+  playlist: false,
+}),
 
-function Toggle(p) {
+Toggle = (p) => {
   for (let pg in page) {
-    page[pg] = false
+    page[pg] = false;
   }
-  page[p] = true
+  page[p] = true;
   emit('update-page', p);
-}
-function home() {
-  history.pushState('', {}, '/')
-}
+},
 
+home = () => {
+  history.pushState('', {}, '/');
+};
 </script>
 
 <template>
@@ -27,8 +27,12 @@ function home() {
     <h1 class="bi bi-vinyl" @click="home"></h1>
 
     <div class="wrap">
-      <span :class="'nav-ico bi bi-house ' + page.home" @click="Toggle('home')"></span>
-      <span :class="'nav-ico bi bi-collection ' + page.playlist" @click="Toggle('playlist')"></span>
+      <span
+        :class="'nav-ico bi bi-house ' + page.home"
+        @click="Toggle('home')"></span>
+      <span
+        :class="'nav-ico bi bi-collection ' + page.playlist"
+        @click="Toggle('playlist')"></span>
     </div>
 
     <div class="wrap">
@@ -53,14 +57,13 @@ h1.bi {
   font-size: calc(1.75rem + 1.5vw);
 }
 .bi {
-  font-size: calc(1rem + 1vw);
+  font-size: calc(1rem + 1.5vw);
 }
 .wrap {
   text-align: center;
   margin-left: auto;
-  margin-right: .5rem;
 }
 .nav-ico {
-  margin: 0 .5rem;
+  margin: 0 0.5rem;
 }
 </style>
diff --git a/src/components/NewPlaylist.vue b/src/components/NewPlaylist.vue
index fa3c595..e4e679d 100644
--- a/src/components/NewPlaylist.vue
+++ b/src/components/NewPlaylist.vue
@@ -1,90 +1,111 @@
 <script setup>
-	import { ref, onMounted } from 'vue'
-	import AlbumItem from './AlbumItem.vue'
-	import Modal from './Modal.vue'
+import { ref, onMounted } from 'vue';
+import AlbumItem from './AlbumItem.vue';
+import Modal from './Modal.vue';
 
-	import { useRand } from '../scripts/colors.js'
-	import { useListPlaylists, useGetPlaylist, useCreatePlaylist } from '../scripts/db.js'
+import { useRand } from '../scripts/colors.js';
 
-	const emit = defineEmits(['play-urls'])
+import {
+  useListPlaylists,
+  useGetPlaylist,
+  useCreatePlaylist,
+} from '../scripts/db.js';
 
-	const list = ref([]),
-	show = ref(false),
-	text = ref('');
+const emit = defineEmits(['play-urls']),
 
-	function Play(key) {
-		console.log(key);
+list = ref([]),
+  show = ref(false),
+  text = ref(''),
 
-		useGetPlaylist(key, res => {
-			console.log(res);
-			emit('play-urls', res.urls)
-		})
-	}
-	function List() {
-		useListPlaylists((res) => {
-			list.value = res
-		})
-	}
-	function Create() {
-		if (text.value) {
-			useCreatePlaylist(text.value, [], () => {
-				List()
-				show.value = false
-			})
-		}
-	}
+Play = (key) => {
+  console.log(key);
 
-	onMounted(() => {
-		List()
-	})
+  useGetPlaylist(key, (res) => {
+    console.log(res);
+    emit('play-urls', res.urls);
+  });
+},
+
+List = () => {
+  useListPlaylists((res) => {
+    list.value = res;
+  });
+},
+
+Create = () => {
+  if (text.value) {
+    useCreatePlaylist(text.value, [], () => {
+      List();
+      show.value = false;
+    });
+  }
+};
+
+onMounted(() => {
+  List();
+});
 </script>
 
 <template>
-	<div class="npl-wrap">
-		
-		<Modal n="2" :display="show" title="Create a new Playlist..." @show="(e) => { show = e }" >
-			<template #content>
-				<input type="text" placeholder="Playlist name..." class="textbox" v-model="text" />
-			</template>
-			<template #buttons>
-				<button @click="show = false">Cancel</button>
-				<button @click="Create">Create</button>
-			</template>
-		</Modal>
+  <div class="npl-wrap">
+    <Modal
+      n="2"
+      :display="show"
+      title="Create a new Playlist..."
+      @show="
+        (e) => {
+          show = e;
+        }
+      ">
+      <template #content>
+        <input
+          type="text"
+          placeholder="Playlist name..."
+          class="textbox"
+          v-model="text" />
+      </template>
+      <template #buttons>
+        <button @click="show = false">Cancel</button>
+        <button @click="Create">Create</button>
+      </template>
+    </Modal>
 
-		<div class="npl-box bi bi-plus-lg pop" @click="show = true"></div>
-		<div class="grid-3">
-			<template v-for="i in list">
-				<AlbumItem :name="i.name" :grad="useRand()" @open-album="Play(i.name)" />
-			</template>
-		</div>
-	</div>
+    <div class="npl-box bi bi-plus-lg pop" @click="show = true"></div>
+    <div class="grid-3">
+      <template v-for="i in list">
+        <AlbumItem
+          :name="i.name"
+          :grad="useRand()"
+          @open-album="Play(i.name)" />
+      </template>
+    </div>
+  </div>
 </template>
 
 <style scoped>
-	.npl-wrap {
-		padding-bottom: 5rem;
-	}
-	.npl-box {
-		margin: 0 auto 5rem auto;
-		border-radius: .5rem;
-		background-color: var(--color-background-mute);
-		padding: 2rem 3rem;
-		font-size: 4rem;
-		width: 10rem;
-	}
-	.npl-box:hover {
-		background-color: var(--color-background-soft);
-	}
-	.npl-round {
-		float: left;
-		display: inline-block;
-		height: 5rem;
-		width: 5rem;
-		border-radius: 50%;
-		background: v-bind('bg');
-	}
-	.text-box {
-		padding: 2rem;
-	}
-</style>
\ No newline at end of file
+.npl-wrap {
+  padding-bottom: 5rem;
+}
+.npl-box {
+  margin: 0 auto 5rem auto;
+  border-radius: 0.5rem;
+  background-color: var(--color-background-mute);
+  padding: 2rem 3rem;
+  font-size: 4rem;
+  width: 10rem;
+}
+.npl-box:hover {
+  background-color: var(--color-background-soft);
+}
+.npl-round {
+  float: left;
+  display: inline-block;
+  height: 5rem;
+  width: 5rem;
+  border-radius: 50%;
+  background: v-bind('bg');
+}
+.text-box {
+  padding: 2rem;
+}
+</style>
diff --git a/src/components/NowPlaying.vue b/src/components/NowPlaying.vue
index f7fefce..d6c9a2e 100644
--- a/src/components/NowPlaying.vue
+++ b/src/components/NowPlaying.vue
@@ -8,13 +8,18 @@ defineProps({
     type: String,
     default: '',
   },
+  artistUrl: {
+    type: String,
+    default: '',
+  }
 });
+defineEmits(['get-artist'])
 </script>
 
 <template>
   <div v-if="title && artist" class="wrap">
     <h1>{{ title }}</h1>
-    <h3>{{ artist }}</h3>
+    <h3><a :href="artistUrl" @click.prevent="$emit('get-artist', artistUrl)">{{ artist }}</a></h3>
   </div>
 </template>
 
diff --git a/src/components/Search.vue b/src/components/Search.vue
index 3190aef..418b6e9 100644
--- a/src/components/Search.vue
+++ b/src/components/Search.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { reactive, watch } from 'vue';
+import { ref, reactive, watch } from 'vue';
 import PlayBtn from './PlayBtn.vue';
 import SongItem from './SongItem.vue';
 import AlbumItem from './AlbumItem.vue';
@@ -7,39 +7,49 @@ import AlbumItem from './AlbumItem.vue';
 import { getJsonPiped, getPipedQuery } from '../scripts/fetch.js';
 import { useLazyLoad } from '../scripts/util.js';
 
-const props = defineProps(['search', 'songItems', 'items']);
+const props = defineProps(['search', 'songItems', 'items']),
 
-const emit = defineEmits(['get-album', 'get-artist', 'play-urls', 'add-song']);
+emit = defineEmits(['get-album', 'get-artist', 'play-urls', 'add-song']),
 
-const data = reactive({
+filters = ['music_songs', 'music_albums', 'music_artists'],
+
+filter = ref('music_songs'),
+
+isSearch = ref(/search/.test(location.pathname)),
+
+data = reactive({
   notes: null,
   albums: null,
   albumTitle: null,
   songs: null,
+  artists: null,
   recommendedArtists: null,
-});
+}),
+
+Reset = () => {
+  isSearch.value = /search/.test(location.pathname);
 
-function Reset() {
   for (let i in data) {
     data[i] = null;
   }
-}
+},
 
-function playAlbum() {
+playAlbum = () => {
   const urls = data.songs.items.map((item) => {
     return { url: item.url, title: item.title };
   });
 
   emit('play-urls', urls);
-}
+},
 
-function getSearch(q) {
+getSearch = (q) => {
   if (q) {
     const pq = q.split(' ').join('+');
 
     history.pushState({}, '', `/search/${pq + getPipedQuery()}`);
 
     document.title = 'Search Results for ' + q;
+    isSearch.value = /search/.test(location.pathname);
 
     getResults(pq);
     useLazyLoad();
@@ -51,18 +61,17 @@ function getSearch(q) {
 
     console.log('No Search');
   }
-}
+},
 
-async function getResults(q) {
-  const filters = ['music_songs', 'music_albums'];
+getResults = async (q) => {
 
-  for (let filter of filters) {
-    const json = await getJsonPiped(`/search?q=${q}&filter=${filter}`);
+  const f = filter.value || 'music_songs',
+  
+  json = await getJsonPiped(`/search?q=${q}&filter=${f}`);
 
-    data[filter.split('_')[1]] = json;
-    console.log(json, data);
-  }
-}
+  data[f.split('_')[1]] = json;
+  console.log(json, data);
+};
 
 watch(
   () => props.search,
@@ -115,6 +124,12 @@ watch(
     <span>{{ data.albumTitle }}</span>
   </div>
 
+  <div v-if="isSearch" class="filters">
+    <button v-for="f in filters" class="filter caps" @click="filter = f; Reset(); getSearch(search)" :data-active="f == filter">
+      {{ f.split('_')[1] }}
+    </button>
+  </div>
+
   <div v-if="data.songs && data.songs.items[0]" class="search-songs">
     <h2>Songs</h2>
     <div class="grid">
@@ -129,7 +144,7 @@ watch(
             $emit('play-urls', [
               {
                 url: song.url || '/watch?v=' + song.id,
-                title: (song.title || song.name),
+                title: song.title || song.name,
               },
             ])
           "
@@ -178,16 +193,16 @@ watch(
   </div>
 
   <div
-    v-if="data.recommendedArtists && data.recommendedArtists.items[0]"
+    v-if="( data.recommendedArtists && data.recommendedArtists.items[0] ) || ( data.artists && data.artists.items[0] )"
     class="search-artists">
-    <h2>Similar Artists</h2>
+    <h2>{{ data.artists ? 'Artists' : 'Similar Artists' }}</h2>
     <div class="grid-3 circle">
-      <template v-for="artist in data.recommendedArtists.items">
+      <template v-for="artist in ( data.artists ? data.artists.items : data.recommendedArtists.items)">
         <AlbumItem
           :author="artist.subtitle"
-          :name="artist.title"
-          :art="'url(' + artist.thumbnails[0].url + ')'"
-          @open-album="$emit('get-artist', artist.id)" />
+          :name="artist.name || artist.title"
+          :art="'url(' + (artist.thumbnail || artist.thumbnails[0].url) + ')'"
+          @open-album="$emit('get-artist', (artist.id || artist.url.replace('/channel/', '') ) )" />
       </template>
     </div>
   </div>
@@ -208,6 +223,27 @@ watch(
 .search-artists {
   text-align: center;
 }
+.filters {
+  display: flex;
+  width: 100%;
+  justify-content: center;
+  margin-bottom: 5rem;
+}
+.filter {
+  width: calc(80% / v-bind('filters.length'));
+  max-width: 200px;
+  margin: 1rem;
+  padding: .5rem;
+  font-size: 1.25rem;
+  border-radius: .25rem;
+}
+.filter:hover {
+  background: var(--color-background-mute);
+}
+.filter[data-active=true] {
+  border-bottom: .125rem var(--color-text) solid;
+  border-radius: .25rem .25rem 0 0;
+}
 .text-full {
   padding: 1rem;
   font-size: 1.5rem;
diff --git a/src/components/SearchBar.vue b/src/components/SearchBar.vue
index 1374745..e1e38ea 100644
--- a/src/components/SearchBar.vue
+++ b/src/components/SearchBar.vue
@@ -9,6 +9,7 @@ const show = ref(false);
 
 <template>
   <button
+    aria-label="Search Button"
     class="bi bi-search popup-wrap"
     @mouseenter="show = true"
     @mouseleave="show = false">
@@ -16,6 +17,7 @@ const show = ref(false);
       <div v-if="show" class="popup">
         <input
           type="text"
+          aria-label="Search Input"
           placeholder="Search..."
           @change="$emit('update-search', $event.target.value)"
           :value="search" />
diff --git a/src/components/SongItem.vue b/src/components/SongItem.vue
index 4f79b19..e09d413 100644
--- a/src/components/SongItem.vue
+++ b/src/components/SongItem.vue
@@ -7,19 +7,19 @@ const props = defineProps({
   channel: String,
   play: String,
   art: String,
-});
+}),
 
-const emit = defineEmits(['get-artist', 'open-song']);
+emit = defineEmits(['get-artist', 'open-song']),
 
-const show = ref(false);
+show = ref(false),
 
-function openSong(el) {
+openSong = (el) => {
   if (!el.classList.contains('ign')) {
     emit('open-song', props.play);
   }
-}
+},
 
-async function Share() {
+Share = async () => {
   if ('share' in navigator) {
     const data = {
       title: `Listen to ${props.title} by ${props.author} on Hyperpipe`,
@@ -42,11 +42,11 @@ async function Share() {
       },
     );
   }
-}
+};
 
 onMounted(() => {
-  console.log(props)
-})
+  console.log(props);
+});
 </script>
 <template>
   <div class="song card flex pop" @click="openSong($event.target)">
diff --git a/src/components/StatusBar.vue b/src/components/StatusBar.vue
index a807d19..9494a92 100644
--- a/src/components/StatusBar.vue
+++ b/src/components/StatusBar.vue
@@ -1,7 +1,7 @@
 <script setup>
 import { ref, watch } from 'vue';
-import Modal from './Modal.vue'
-import { useListPlaylists } from '../scripts/db.js'
+import Modal from './Modal.vue';
+import { useListPlaylists } from '../scripts/db.js';
 
 defineProps({
   state: String,
@@ -10,8 +10,20 @@ defineProps({
   loop: Boolean,
 });
 
-const emit = defineEmits(['vol', 'play', 'list', 'loop', 'save', 'change-time']),
-showVol = ref(false), vol = ref(1), showmenu = ref(false), showpl = ref(false), pl = ref(''), list = ref([]);
+const emit = defineEmits([
+    'vol',
+    'play',
+    'list',
+    'loop',
+    'save',
+    'change-time',
+  ]),
+  showVol = ref(false),
+  vol = ref(1),
+  showmenu = ref(false),
+  showpl = ref(false),
+  pl = ref(''),
+  list = ref([]);
 
 function Save() {
   showpl.value = true;
@@ -19,21 +31,39 @@ function Save() {
     console.log(res);
     list.value = res;
     showmenu.value = false;
-  })
+  });
 }
 </script>
 <template>
   <Teleport to="body">
     <Transition name="fade">
-      <Modal n="2" :display="showpl" title="Select Playlist to Add" @show="(e) => { showpl = e }">
+      <Modal
+        n="2"
+        :display="showpl"
+        title="Select Playlist to Add"
+        @show="
+          (e) => {
+            showpl = e;
+          }
+        ">
         <template #content>
           <template v-for="i in list">
-            <div class="flex" @click="pl = i.name"><span>{{ i.name }}</span><span class="ml-auto">{{ i.urls.length || '' }}</span></div>
+            <div class="flex item" @click="pl = i.name">
+              <span>{{ i.name }}</span
+              ><span class="ml-auto">{{ i.urls.length || '' }}</span>
+            </div>
           </template>
         </template>
         <template #buttons>
-          <button @click="showpl = false">Cancel</button>
-          <button @click="if (pl) $emit('save', pl); showpl = false">Add</button>
+          <button aria-label="Cancel" @click="showpl = false">Cancel</button>
+          <button
+            aria-label="Add Song"
+            @click="
+              if (pl) $emit('save', pl);
+              showpl = false;
+            ">
+            Add
+          </button>
         </template>
       </Modal>
     </Transition>
@@ -43,6 +73,7 @@ function Save() {
     <div class="flex statusbar-left">
       <button
         id="btn-play-pause"
+        aria-label="Play or Pause"
         :class="'bi bi-' + state"
         @click="$emit('play')"></button>
 
@@ -51,6 +82,7 @@ function Save() {
         class="range-wrap"
         :style="'--fw:' + time + '%;'">
         <input
+          aria-label="Change Time"
           :value="time"
           type="range"
           name="statusbar-progress"
@@ -62,31 +94,49 @@ function Save() {
     <div class="flex statusbar-right">
       <button
         id="vol-btn"
+        aria-label="Volume Buttons"
         @click="showVol = !showVol"
         class="popup-wrap bi bi-volume-up">
         <Transition name="fade">
           <div v-if="showVol" id="vol" class="popup">
             <input
               id="vol-input"
+              aria-label="Volume Input"
               type="range"
               :value="vol"
               max="1"
               step=".01"
-              @input="$emit('vol', $event.target.value); vol = $event.target.value" />
+              @input="
+                $emit('vol', $event.target.value);
+                vol = $event.target.value;
+              " />
           </div>
         </Transition>
       </button>
-      <button class="bi bi-three-dots" @click="showmenu = !showmenu; if (show) $emit('list', 'showplaylist')"></button>
+      <button
+        class="bi bi-three-dots"
+        aria-label="More Controls"
+        @click="
+          showmenu = !showmenu;
+          if (show) $emit('list', 'showplaylist');
+        "></button>
       <div id="menu" v-if="showmenu" class="popup">
-        <button id="addToPlaylist" title="Add Current Song to a Playlist" class="bi bi-collection" @click="Save"></button>
+        <button
+          id="addToPlaylist"
+          title="Add Current Song to a Playlist"
+          aria-label="Add Current Song to a Playlist"
+          class="bi bi-collection"
+          @click="Save"></button>
         <button
           id="list-btn"
           title="Current Playlist"
+          aria-label="Current Playlist"
           :class="'bi bi-music-note-list ' + show"
           @click="$emit('list', 'showplaylist')"></button>
         <button
           id="loop-btn"
           title="Loop"
+          aria-label="Loop"
           :class="'bi bi-infinity ' + loop"
           @click="$emit('loop', 'loop')"></button>
       </div>
@@ -125,16 +175,22 @@ function Save() {
 .ml-auto {
   margin-left: auto;
 }
+.item {
+  border-radius: 50rem 0 0 50rem;
+}
+.item:hover {
+  background-color: var(--color-background-mute);
+}
 #menu {
   bottom: 1.5rem;
   left: -1.75rem;
-  box-shadow: .5rem .5rem 2rem var(--color-shadow);
+  box-shadow: 0.5rem 0.5rem 2rem var(--color-shadow);
 }
 #vol {
   --h: 6.5rem;
   --w: 1rem;
   display: flex;
-  box-shadow: -.5rem -.5rem 2rem var(--color-shadow);
+  box-shadow: -0.5rem -0.5rem 2rem var(--color-shadow);
   transform: rotateZ(270deg) translateX(calc(calc(var(--h) / 2) - 0.5rem))
     translateY(calc(calc(var(--w) + 2rem) * -1));
 }
diff --git a/src/scripts/colors.js b/src/scripts/colors.js
index dc74d76..e081c29 100644
--- a/src/scripts/colors.js
+++ b/src/scripts/colors.js
@@ -1,16 +1,16 @@
 const c = [
-	"linear-gradient(45deg, #88c0d0, #5e81ac)",
-	"linear-gradient(45deg, #5e81ac, #b48ead)",
-	"linear-gradient(45deg, #a3be8c, #88c0d0)",
-	"linear-gradient(45deg, #ebcb8b, #a3be8c)",
-	"linear-gradient(45deg, #d08770, #bf616a)"
+  'linear-gradient(45deg, #88c0d0, #5e81ac)',
+  'linear-gradient(45deg, #5e81ac, #b48ead)',
+  'linear-gradient(45deg, #a3be8c, #88c0d0)',
+  'linear-gradient(45deg, #ebcb8b, #a3be8c)',
+  'linear-gradient(45deg, #d08770, #bf616a)',
 ];
 
 export function useColors() {
-	return c
+  return c;
 }
 
 export function useRand() {
-	const i = Math.floor(Math.random() * c.length);
-	return c[i]	
-}
\ No newline at end of file
+  const i = Math.floor(Math.random() * c.length);
+  return c[i];
+}
diff --git a/src/scripts/db.js b/src/scripts/db.js
index 041acdd..da73934 100644
--- a/src/scripts/db.js
+++ b/src/scripts/db.js
@@ -1,98 +1,116 @@
+export function useSetupDB() {
+  if ('indexedDB' in window) {
+    const req = indexedDB.open('hyperpipedb', 1);
+
+    req.onupgradeneeded = (e) => {
+      const db = e.target.result;
+      console.log(db);
+
+      if (!db.objectStoreNames.contains('playlist')) {
+        const store = db.createObjectStore('playlist', { keyPath: 'name' });
+
+        store.createIndex('urls', 'urls', { unique: false });
+      }
+    };
+
+    req.onerror = (e) => {
+      console.log('Please let me use indexedDB!!');
+      console.log(e);
+    };
+
+    req.onsuccess = (e) => {
+      window.db = e.target.result;
+    };
+  }
+}
+
 export function useUpdatePlaylist(key, obj, cb = () => null) {
-	
-	if (window.db && key) {
-		
-		const store = window.db.transaction(['playlist'], "readwrite").objectStore('playlist'),
-		req = store.get(key);
+  if (window.db && key) {
+    const store = window.db
+        .transaction(['playlist'], 'readwrite')
+        .objectStore('playlist'),
+      req = store.get(key);
 
-		req.onerror = (e) => {
-			console.log('Error!!', e)
-		}
+    req.onerror = (e) => {
+      console.log('Error!!', e);
+    };
 
-		req.onsuccess = e => {
-			const itm = e.target.result;
-
-			if (itm) {
-				itm.urls.push(obj)
-				store.put(itm)
-				cb(true)
-			}
-		}
-
-	} else alert('No indexedDB Created')
+    req.onsuccess = (e) => {
+      const itm = e.target.result;
 
+      if (itm) {
+        itm.urls.push(obj);
+        store.put(itm);
+        cb(true);
+      }
+    };
+  } else alert('No indexedDB Created');
 }
 
-export function useCreatePlaylist(key, obj, cb = () => null ) {
-	if (window.db && key && obj) {
-		
-		const store = window.db.transaction(['playlist'], "readwrite").objectStore('playlist'),
-		req = store.get(key);
+export function useCreatePlaylist(key, obj, cb = () => null) {
+  if (window.db && key && obj) {
+    const store = window.db
+        .transaction(['playlist'], 'readwrite')
+        .objectStore('playlist'),
+      req = store.get(key);
 
-		req.onerror = (e) => {
-			console.log('Error!!', e)
-		}
+    req.onerror = (e) => {
+      console.log('Error!!', e);
+    };
 
-		req.onsuccess = (e) => {
-			const res = e.target.result;
+    req.onsuccess = (e) => {
+      const res = e.target.result;
 
-			if (!res) {
+      if (!res) {
+        store.add({
+          name: key,
+          urls: obj,
+        });
 
-				store.add({
-					name: key, urls: obj
-				});
-
-				cb(res);
-
-			} else {
-				console.log(e.target.result);
-				alert(`Error: Playlist with name ${key} exists`)
-			}
-
-		}
-	} else alert('No indexedDB Created')
+        cb(res);
+      } else {
+        console.log(e.target.result);
+        alert(`Error: Playlist with name ${key} exists`);
+      }
+    };
+  } else alert('No indexedDB Created');
 }
 
-export function useGetPlaylist(key, cb = () => null ) {
+export function useGetPlaylist(key, cb = () => null) {
+  if (window.db && key) {
+    const store = window.db.transaction(['playlist']).objectStore('playlist'),
+      req = store.get(key);
 
-	if (window.db && key) {
-		
-		const store = window.db.transaction(['playlist']).objectStore('playlist'),
-		req = store.get(key);
+    req.onerror = (e) => {
+      console.log('Error!!', e);
+    };
 
-		req.onerror = (e) => {
-			console.log('Error!!', e)
-		}
+    req.onsuccess = (e) => {
+      const res = e.target.result;
 
-		req.onsuccess = e => {
-			const res = e.target.result;
-
-			if (res) {
-				cb(res)
-			}
-		}
-
-	} else alert('No indexedDB Created')
+      if (res) {
+        cb(res);
+      }
+    };
+  } else alert('No indexedDB Created');
 }
 
 export function useListPlaylists(cb = () => null) {
-	if (window.db) {
+  if (window.db) {
+    let pls = [];
 
-		let pls = [];
+    const store = window.db.transaction(['playlist']).objectStore('playlist'),
+      cursor = store.openCursor();
 
-		const store = window.db.transaction(['playlist']).objectStore('playlist'),
-		cursor = store.openCursor();
+    cursor.onsuccess = (e) => {
+      const pl = e.target.result;
 
-		cursor.onsuccess = (e) => {
-			const pl = e.target.result;
-
-			if (pl) {
-				pls.push(pl.value)
-				pl.continue()
-			} else {
-				cb(pls)
-			}
-
-		}
-	}
-}
\ No newline at end of file
+      if (pl) {
+        pls.push(pl.value);
+        pl.continue();
+      } else {
+        cb(pls);
+      }
+    };
+  }
+}
diff --git a/src/scripts/util.js b/src/scripts/util.js
index f3efe56..e7227be 100644
--- a/src/scripts/util.js
+++ b/src/scripts/util.js
@@ -1,8 +1,8 @@
 export function usePrefs(key) {
-	if (localStorage) {
-		if (localStorage.get(key)) return true
-		else return false
-	} else return false
+  if (localStorage) {
+    if (localStorage.get(key)) return true;
+    else return false;
+  } else return false;
 }
 
 export function useLazyLoad() {
@@ -30,4 +30,4 @@ export function useLazyLoad() {
   } else {
     console.log('Failed');
   }
-}
\ No newline at end of file
+}