Implement fuzzy page search using fuse.js (#86)

src/composables/colors/album.ts

@@ -25,8 +25,14 @@ interface BtnColor {
  * @returns {BtnColor} A color to use as the play button background
  */
 export function getButtonColor(colors: string[]): BtnColor {
+  const def = {
+    color: "#fff",
+    isDark: true,
+  };
+
+  if (!colors || colors.length === 0) return def;
+
   const base_color = colors[0];
-  if (colors.length === 0) return { color: "#fff", isDark: true };
 
   for (let i = 0; i < colors.length; i++) {
     if (theyContrast(base_color, colors[i])) {
@@ -37,10 +43,7 @@ export function getButtonColor(colors: string[]): BtnColor {
     }
   }
 
-  return {
-    color: "#fff",
-    isDark: true,
-  };
+  return def;
 }
 
 /**

src/composables/enums.ts

@@ -37,3 +37,12 @@ export enum Routes {
   search = "SearchView",
   queue = "QueueView",
 }
+
+export const FuseTrackOptions = {
+  keys: [
+    { name: "title", weight: 1 },
+    { name: "album", weight: 0.7 },
+    { name: "artists", weight: 0.5 },
+    { name: "albumartist", weight: 0.25 },
+  ],
+};

src/composables/fetch/album.ts

@@ -21,11 +21,7 @@ const getAlbumData = async (hash: string, ToastStore: typeof useNotifStore) => {
   if (status == 204) {
     ToastStore().showNotification("Album not created yet!", NotifType.Error);
     return {
-      info: {
-        album: "",
-        artist: "",
-        colors: []
-      },
+      info: {} as AlbumInfo,
       tracks: [],
     };
   }

src/composables/useKeyboard.ts

@@ -2,8 +2,8 @@ import useQStore from "@/stores/queue";
 
 let key_down_fired = false;
 
-function focusSearchBox() {
-  const elem = document.getElementById("globalsearch");
+function focusPageSearchBox() {
+  const elem = document.getElementById("page-search") as HTMLInputElement;
 
   elem.focus();
 }
@@ -66,16 +66,11 @@ export default function (queue: typeof useQStore) {
         if (!key_down_fired) {
           if (!ctrlKey) return;
           e.preventDefault();
+          focusPageSearchBox();
 
           key_down_fired = true;
         }
       }
-      case "/": {
-        {
-          e.preventDefault();
-          focusSearchBox();
-        }
-      }
     }
   });
 }

src/composables/usePlayFrom.ts

@@ -24,7 +24,7 @@ export default function play(
       store = store as typeof folder;
       const f = store();
 
-      useQueue.playFromFolder(f.path, f.tracks);
+      useQueue.playFromFolder(f.path, f.allTracks);
       useQueue.play();
       break;
     case playSources.album:
@@ -35,7 +35,7 @@ export default function play(
         a_store.info.title,
         a_store.info.artist,
         a_store.info.hash,
-        a_store.tracks
+        a_store.allTracks
       );
       useQueue.play();
       break;