fix fuzzy search: FuseTrackOptions

+ reduce width required to hide sidebar automatically
+ move ArtistAlbumsFetcher.vue to components folder
+ escape ALT button in keyboard shortcuts
+ use elem.dispatchEvent to toggle page search

package.json

@@ -14,22 +14,22 @@
     "@vueuse/components": "^9.2.0",
     "@vueuse/core": "^8.5.0",
     "@vueuse/integrations": "^9.2.0",
-    "vue-virtual-scroller": "^2.0.0-alpha.1",
     "axios": "^0.26.1",
     "fuse.js": "^6.6.2",
     "pinia": "^2.0.17",
     "pinia-plugin-persistedstate": "^2.1.1",
-    "sass": "^1.49.0",
-    "sass-loader": "^10",
+    "sass": "^1.56.1",
+    "sass-loader": "^13.2.0",
     "vite-svg-loader": "^3.4.0",
     "vue": "^3.2.37",
     "vue-debounce": "^3.0.2",
     "vue-router": "^4.1.3",
     "vue-template-compiler": "^2.0.0",
+    "vue-virtual-scroller": "^2.0.0-alpha.1",
     "webpack": "^5.74.0"
   },
   "devDependencies": {
-    "@vitejs/plugin-vue": "^3.0.1",
+    "@vitejs/plugin-vue": "^3.2.0",
     "eslint": "^8.7.0",
     "eslint-plugin-vue": "^8.3.0",
     "vite": "^3.0.4",

src/components/AlbumView/GenreBanner.vue

@@ -36,10 +36,11 @@ onMounted(async () => {
 .genres-banner.nocontrast {
   color: $black;
 }
+
 .genres-banner {
   display: flex;
   gap: 1rem;
-  margin-top: 1rem;
+  margin-top: 2rem;
   font-size: 0.9rem;
   padding-left: $medium;
   text-transform: capitalize;

src/components/shared/NavSearchInput.vue

@@ -2,6 +2,7 @@
   <div class="header-input-wrapper rounded-sm" :class="{ showInput: clicked }">
     <button
       class="search-btn circular"
+      id="page-search-trigger"
       :class="{ 'btn-active': clicked }"
       @click="handleFocus"
     >

src/components/shared/SongItem.vue

@@ -21,8 +21,15 @@
         ></div>
       </div>
       <div v-tooltip class="song-title">
-        <div class="title ellip" @click.prevent="emitUpdate" ref="artisttitle">
-          {{ track.title }}
+        <div class="with-flag">
+          <span
+            class="title ellip"
+            @click.prevent="emitUpdate"
+            ref="artisttitle"
+          >
+            {{ track.title }}
+          </span>
+          <span v-if="(track.bitrate > 1024)" class="master-flag"><b>M</b> </span>
         </div>
         <div class="isSmallArtists" style="display: none">
           <ArtistName
@@ -71,7 +78,6 @@ import HeartSvg from "@/assets/icons/heart.svg";
 import OptionSvg from "@/assets/icons/more.svg";
 import ArtistName from "./ArtistName.vue";
 
-const context_on = ref(false);
 const imguri = paths.images.thumb.small;
 const context_menu_showing = ref(false);
 
@@ -110,7 +116,27 @@ function showMenu(e: MouseEvent) {
   padding-left: $small;
 
   .song-title {
+    .with-flag {
+      display: flex;
+      align-items: center;
+    }
+
+    .master-flag {
+      font-size: 10px;
+      margin-left: $smaller;
+      background-color: rgba(184, 108, 21, 0.281);
+      color: rgb(255, 153, 0);
+      padding: 2px 5px;
+      border-radius: 5px;
+      opacity: .75;
+    }
+
     cursor: pointer;
+    // outline: solid 1px;
+
+    .title {
+      margin-bottom: 2px;
+    }
   }
 
   &:hover {

src/composables/enums.ts

@@ -43,8 +43,8 @@ export const FuseTrackOptions = {
   keys: [
     { name: "title", weight: 1 },
     { name: "album", weight: 0.7 },
-    { name: "artists", weight: 0.5 },
-    { name: "albumartists", weight: 0.25 },
+    { name: "artist.name", weight: 0.5 },
+    { name: "albumartist", weight: 0.25 },
   ],
 };
 

src/composables/useBreakpoints.ts

@@ -1,7 +1,7 @@
 import { useBreakpoints } from "@vueuse/core";
 
 const breakpoints = useBreakpoints({
-  xl: 1536,
+  xl: 1280,
   xxl: 1720,
 });
 

src/composables/useKeyboard.ts

@@ -3,15 +3,20 @@ import useQStore from "@/stores/queue";
 let key_down_fired = false;
 
 function focusPageSearchBox() {
-  const elem = document.getElementById("page-search") as HTMLInputElement;
-
-  elem.focus();
+  const elem = document.getElementById(
+    "page-search-trigger"
+  ) as HTMLButtonElement;
+  if (elem) {
+    elem.dispatchEvent(new MouseEvent("click", { bubbles: false }));
+  }
 }
 
 export default function (queue: typeof useQStore) {
   const q = queue();
   window.addEventListener("keydown", (e: KeyboardEvent) => {
     const target = e.target as HTMLElement;
+    // if alt is pressed, don't do anything
+    if (e.altKey) return;
     let ctrlKey = e.ctrlKey;
 
     function FocusedOnInput(target: HTMLElement) {

src/interfaces.ts

@@ -15,7 +15,7 @@ export interface Track extends AlbumDisc {
   folder?: string;
   filepath?: string;
   duration?: number;
-  bitrate?: number;
+  bitrate: number;
   genre?: string;
   image: string;
   track: number;

src/utils/useFuse.ts

@@ -1,5 +1,4 @@
 import { useFuse } from "@vueuse/integrations/useFuse";
-import { Ref } from "vue";
 
 /**
  * Fuzzy search using Fuse.js

src/views/AlbumView/index.vue

@@ -22,11 +22,7 @@
 
 <script setup lang="ts">
 import { computed } from "@vue/reactivity";
-import {
-  onBeforeRouteLeave,
-  onBeforeRouteUpdate,
-  RouteLocationNormalized,
-} from "vue-router";
+import { onBeforeRouteLeave, onBeforeRouteUpdate } from "vue-router";
 
 import { Track } from "@/interfaces";
 import { createTrackProps } from "@/utils";
@@ -74,7 +70,7 @@ class songItem {
 const genreBanner: ScrollerItem = {
   id: "genre-banner",
   component: GenreBanner,
-  size: 64,
+  size: 80,
 };
 
 function getSongItems() {

src/views/ArtistView/Main.vue

@@ -36,9 +36,9 @@ import Header from "@/components/ArtistView/Header.vue";
 import TopTracks from "@/components/ArtistView/TopTracks.vue";
 import useArtistPageStore from "@/stores/pages/artist";
 import ArtistAlbums from "@/components/AlbumView/ArtistAlbums.vue";
-import ArtistAlbumsFetcher from "./ArtistAlbumsFetcher.vue";
+import ArtistAlbumsFetcher from "@/components/ArtistView/ArtistAlbumsFetcher.vue";
 import { computed } from "vue";
-import { onBeforeRouteUpdate } from "vue-router";
+import { onBeforeRouteLeave, onBeforeRouteUpdate } from "vue-router";
 
 const store = useArtistPageStore();
 
@@ -86,9 +86,14 @@ const scrollerItems = computed(() => {
 });
 
 onBeforeRouteUpdate(async (to) => {
-
   await store.getData(to.params.hash as string);
 });
+
+onBeforeRouteLeave(async () => {
+  setTimeout(() => {
+    store.resetAlbums();
+  }, 400);
+});
 </script>
 
 <style lang="scss">

tsconfig.json

@@ -13,6 +13,7 @@
     "esModuleInterop": false,
     "lib": ["ESNext", "DOM"],
     "skipLibCheck": true,
+    // "noEmit": true,
     "paths": {
       "baseUrl": ["./"],
       "@/*": ["./src/*"]

yarn.lock

@@ -97,10 +97,10 @@
   resolved "https://registry.yarnpkg.com/@types/web-bluetooth/-/web-bluetooth-0.0.15.tgz#d60330046a6ed8a13b4a53df3813c44942ebdf72"
   integrity sha512-w7hEHXnPMEZ+4nGKl/KDRVpxkwYxYExuHOYXyzIzCDzEZ9ZCGMAewulr9IqJu2LR4N37fcnb1XVeuZ09qgOxhA==
 
-"@vitejs/plugin-vue@^3.0.1":
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/@vitejs/plugin-vue/-/plugin-vue-3.0.1.tgz#b6af8f782485374bbb5fe09edf067a845bf4caae"
-  integrity sha512-Ll9JgxG7ONIz/XZv3dssfoMUDu9qAnlJ+km+pBA0teYSXzwPCIzS/e1bmwNYl5dcQGs677D21amgfYAnzMl17A==
+"@vitejs/plugin-vue@^3.2.0":
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/@vitejs/plugin-vue/-/plugin-vue-3.2.0.tgz#a1484089dd85d6528f435743f84cdd0d215bbb54"
+  integrity sha512-E0tnaL4fr+qkdCNxJ+Xd0yM31UwMkQje76fsDVBBUCoGOUPexu2VDUYHL8P4CwV+zMvWw6nlRw19OnRKmYAJpw==
 
 "@vue/compiler-core@3.2.37":
   version "3.2.37"
@@ -1540,13 +1540,6 @@ json5@^1.0.1:
   dependencies:
     minimist "^1.2.0"
 
-json5@^2.1.2:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/json5/-/json5-2.2.0.tgz#2dfefe720c6ba525d9ebd909950f0515316c89a3"
-  integrity sha512-f+8cldu7X/y7RAJurMEJmdoKXGB/X550w2Nr3tTbezL6RwEE/iMcm+tZnXeoZtKuOq6ft8+CqzEkrIgx1fPoQA==
-  dependencies:
-    minimist "^1.2.5"
-
 klona@^2.0.4:
   version "2.0.5"
   resolved "https://registry.yarnpkg.com/klona/-/klona-2.0.5.tgz#d166574d90076395d9963aa7a928fabb8d76afbc"
@@ -1574,15 +1567,6 @@ loader-utils@^1.2.3:
     emojis-list "^3.0.0"
     json5 "^1.0.1"
 
-loader-utils@^2.0.0:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-2.0.2.tgz#d6e3b4fb81870721ae4e0868ab11dd638368c129"
-  integrity sha512-TM57VeHptv569d/GKh6TAYdzKblwDNiumOdkFnejjD0XwTH87K90w3O7AiJRqdQoXygvi1VQTJTLGhJl7WqA7A==
-  dependencies:
-    big.js "^5.2.2"
-    emojis-list "^3.0.0"
-    json5 "^2.1.2"
-
 lodash.merge@^4.6.2:
   version "4.6.2"
   resolved "https://registry.yarnpkg.com/lodash.merge/-/lodash.merge-4.6.2.tgz#558aa53b43b661e1925a0afdfa36a9a1085fe57a"
@@ -1641,7 +1625,7 @@ minimatch@^3.0.4:
   dependencies:
     brace-expansion "^1.1.7"
 
-minimist@^1.2.0, minimist@^1.2.5, minimist@^1.2.6:
+minimist@^1.2.0, minimist@^1.2.6:
   version "1.2.6"
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.6.tgz#8637a5b759ea0d6e98702cfb3a9283323c93af44"
   integrity sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q==
@@ -1904,21 +1888,18 @@ safe-buffer@^5.1.0:
   resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.2.1.tgz#1eaf9fa9bdb1fdd4ec75f58f9cdb4e6b7827eec6"
   integrity sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==
 
-sass-loader@^10:
-  version "10.2.1"
-  resolved "https://registry.yarnpkg.com/sass-loader/-/sass-loader-10.2.1.tgz#17e51df313f1a7a203889ce8ff91be362651276e"
-  integrity sha512-RRvWl+3K2LSMezIsd008ErK4rk6CulIMSwrcc2aZvjymUgKo/vjXGp1rSWmfTUX7bblEOz8tst4wBwWtCGBqKA==
+sass-loader@^13.2.0:
+  version "13.2.0"
+  resolved "https://registry.yarnpkg.com/sass-loader/-/sass-loader-13.2.0.tgz#80195050f58c9aac63b792fa52acb6f5e0f6bdc3"
+  integrity sha512-JWEp48djQA4nbZxmgC02/Wh0eroSUutulROUusYJO9P9zltRbNN80JCBHqRGzjd4cmZCa/r88xgfkjGD0TXsHg==
   dependencies:
     klona "^2.0.4"
-    loader-utils "^2.0.0"
     neo-async "^2.6.2"
-    schema-utils "^3.0.0"
-    semver "^7.3.2"
 
-sass@^1.49.0:
-  version "1.49.7"
-  resolved "https://registry.yarnpkg.com/sass/-/sass-1.49.7.tgz#22a86a50552b9b11f71404dfad1b9ff44c6b0c49"
-  integrity sha512-13dml55EMIR2rS4d/RDHHP0sXMY3+30e1TKsyXaSz3iLWVoDWEoboY8WzJd5JMnxrRHffKO3wq2mpJ0jxRJiEQ==
+sass@^1.56.1:
+  version "1.56.1"
+  resolved "https://registry.yarnpkg.com/sass/-/sass-1.56.1.tgz#94d3910cd468fd075fa87f5bb17437a0b617d8a7"
+  integrity sha512-VpEyKpyBPCxE7qGDtOcdJ6fFbcpOM+Emu7uZLxVrkX8KVU/Dp5UF7WLvzqRuUhB6mqqQt1xffLoG+AndxTZrCQ==
   dependencies:
     chokidar ">=3.0.0 <4.0.0"
     immutable "^4.0.0"
@@ -1929,7 +1910,7 @@ sax@~1.2.4:
   resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"
   integrity sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==
 
-schema-utils@^3.0.0, schema-utils@^3.1.0, schema-utils@^3.1.1:
+schema-utils@^3.1.0, schema-utils@^3.1.1:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-3.1.1.tgz#bc74c4b6b6995c1d88f76a8b77bea7219e0c8281"
   integrity sha512-Y5PQxS4ITlC+EahLuXaY86TXfR7Dc5lw294alXOq86JAHCihAIZfqv8nNCWvaEJvaC51uN9hbLGeV0cFBdH+Fw==
@@ -1938,7 +1919,7 @@ schema-utils@^3.0.0, schema-utils@^3.1.0, schema-utils@^3.1.1:
     ajv "^6.12.5"
     ajv-keywords "^3.5.2"
 
-semver@^7.3.2, semver@^7.3.5:
+semver@^7.3.5:
   version "7.3.5"
   resolved "https://registry.yarnpkg.com/semver/-/semver-7.3.5.tgz#0b621c879348d8998e4b0e4be94b3f12e6018ef7"
   integrity sha512-PoeGJYh8HK4BTO/a9Tf6ZG3veo/A7ZVsYrSA6J8ny9nb3B1VrpkuN+z9OE5wfE5p6H4LchYZsegiQgbJD94ZFQ==