Bug Fixes:

- Closes #42
- Closes #44
- Closes #45

src/App.vue

@@ -29,7 +29,7 @@ const Genres = defineAsyncComponent(() => import('@/components/Genres.vue')),
   Prefs = defineAsyncComponent(() => import('@/components/Prefs.vue'));
 
 /* Composables */
-import { useStore } from '@/scripts/util.js';
+import { useStore, useUnwrap } from '@/scripts/util.js';
 import { useSetupDB, useUpdatePlaylist } from '@/scripts/db.js';
 
 /* Stores */
@@ -62,8 +62,7 @@ function parseUrl() {
       results.getExplore();
       break;
     case 'search':
-      nav.state.search = loc[2];
-      console.log(nav.state.search);
+      nav.state.search = useUnwrap(loc[2]);
       break;
     case 'watch':
       player.state.status = 'circle';

src/components/NavBar.vue

@@ -48,7 +48,7 @@ function set(page) {
         :data-active="nav.state.page == 'explore'"
         @click="set('explore')"></span>
       <span
-        class="nav-ico bi bi-graph-down clickable"
+        class="nav-ico bi bi-graph-up-arrow clickable"
         :data-active="nav.state.page == 'charts'"
         @click="set('charts')"></span>
       <span

src/components/Search.vue

@@ -6,7 +6,7 @@ import SongItem from './SongItem.vue';
 import AlbumItem from './AlbumItem.vue';
 
 import { getJsonPiped, getPipedQuery } from '@/scripts/fetch.js';
-import { useRoute } from '@/scripts/util.js';
+import { useRoute, useWrap } from '@/scripts/util.js';
 import { useCreatePlaylist } from '@/scripts/db.js';
 
 import { useResults, useArtist } from '@/stores/results.js';
@@ -74,7 +74,7 @@ const shuffleAdd = () => {
   },
   getSearch = q => {
     if (q) {
-      const pq = q.split(' ').join('+');
+      const pq = useWrap(q);
 
       history.pushState({}, '', `/search/${pq + getPipedQuery()}`);
 

src/scripts/util.js

@@ -10,6 +10,14 @@ export function useRoute(l) {
   history.pushState({}, '', l);
 }
 
+export function useWrap(txt) {
+  return encodeURIComponent(txt).replaceAll('%20', '+');
+}
+
+export function useUnwrap(txt) {
+  return decodeURIComponent(txt).replaceAll('+', ' ');
+}
+
 export function useStore() {
   try {
     return window.localStorage;

src/stores/player.js

@@ -31,8 +31,10 @@ export const useData = defineStore('data', () => {
 
     state.art = json.thumbnailUrl;
     state.description = json.description;
-    state.title = json.title;
-    state.artist = json.uploader.replace(' - Topic', '');
+    state.title = json.title.replaceAll('&', '&');
+    state.artist = json.uploader
+      .replace(' - Topic', '')
+      .replaceAll('&', '&');
     state.artistUrl = json.uploaderUrl;
     player.state.duration = json.duration;
     player.state.hls = json.hls;