use hash mode in vue router

- rename keyboard.ts -> useKeyboard.ts

src/App.vue

@@ -33,7 +33,7 @@ import ContextMenu from "./components/contextMenu.vue";
 import Modal from "./components/modal.vue";
 import Notification from "./components/Notification.vue";
 import useQStore from "./stores/queue";
-import listenForKeyboardEvents from "./composables/keyboard";
+import useShortcuts from "./composables/useKeyboard";
 import Logo from "./components/Logo.vue";
 
 const RightSideBar = Main;
@@ -42,7 +42,7 @@ const queue = useQStore();
 const app_dom = document.getElementById("app");
 
 queue.readQueue();
-listenForKeyboardEvents(queue);
+useShortcuts(queue);
 
 app_dom.addEventListener("click", (e) => {
   if (context_store.visible) {

src/components/PlaylistView/Header.vue

@@ -11,7 +11,7 @@
     <div class="carddd">
       <div class="info">
         <div class="btns">
-          <PlayBtnRect :source="playSources.playlist" />
+          <PlayBtnRect :source="playSources.playlist" :store="usePStore" />
           <Option @showDropdown="showDropdown" :src="context.src" />
         </div>
         <div class="duration">
@@ -46,7 +46,7 @@ import Option from "../shared/Option.vue";
 import pContext from "../../contexts/playlist";
 import useContextStore from "../../stores/context";
 import { paths } from "../../config";
-import { onBeforeUnmount } from "vue";
+import usePStore from "@/stores/p.ptracks";
 
 const imguri = paths.images.playlist;
 const context = useContextStore();

src/components/playlists/PlaylistCard.vue

@@ -13,9 +13,6 @@
         backgroundImage: `url(${imguri + props.playlist.thumb})`,
       }"
     ></div>
-    <div class="pbtn">
-      <PlayBtn />
-    </div>
     <div class="bottom">
       <div class="name ellip">{{ props.playlist.name }}</div>
       <div class="count">

src/composables/useKeyboard.ts

@@ -13,10 +13,14 @@ export default function (queue: any) {
     let target = e.target;
     let ctrlKey = e.ctrlKey;
 
+    function FocusedOnInput(target: any) {
+      return target.tagName === "INPUT" || target.tagName === "TEXTAREA";
+    }
+
+    if (FocusedOnInput(target)) return;
+
     switch (e.key) {
       case "ArrowRight":
-        if (target.tagName === "INPUT" || target.tagName === "TEXTAREA") return;
-
         {
           if (!key_down_fired) {
             key_down_fired = true;
@@ -33,8 +37,6 @@ export default function (queue: any) {
       case "ArrowLeft":
         {
           if (!key_down_fired) {
-            if (target.tagName === "INPUT" || target.tagName === "TEXTAREA") return;
-
             key_down_fired = true;
 
             queue.playPrev();
@@ -50,7 +52,6 @@ export default function (queue: any) {
       case " ":
         {
           if (!key_down_fired) {
-            if (target.tagName === "INPUT" || target.tagName === "TEXTAREA") return;
             e.preventDefault();
             key_down_fired = true;
 
@@ -65,14 +66,15 @@ export default function (queue: any) {
           if (!ctrlKey) return;
           e.preventDefault();
 
-
           key_down_fired = true;
         }
       }
-      case "/": {{
-        e.preventDefault();
-        focusSearchBox();
-      }}
+      case "/": {
+        {
+          e.preventDefault();
+          focusSearchBox();
+        }
+      }
     }
   });
 }

src/composables/usePlayFrom.ts

@@ -23,28 +23,25 @@ export default function play(
     // check which route the play request come from
     case playSources.folder:
       store = store as typeof folder;
+      const f = store();
 
-      useQueue.playFromFolder(store().path, store().tracks);
-      useQueue.play(store().tracks[0]);
+      useQueue.playFromFolder(f.path, f.tracks);
+      useQueue.play(f.tracks[0]);
       break;
     case playSources.album:
       store = store as typeof album;
+      const a = store();
 
-      useQueue.playFromAlbum(
-        store().info.title,
-        store().info.artist,
-        store().tracks
-      );
+      useQueue.playFromAlbum(a.info.title, a.info.artist, a.tracks);
       useQueue.play(store().tracks[0]);
       break;
     case playSources.playlist:
       store = store as typeof playlist;
+      const p = store();
 
-      useQueue.playFromPlaylist(
-        store().info.name,
-        store().info.playlistid,
-        store().tracks
-      );
+      if (p.tracks.length === 0) return;
+
+      useQueue.playFromPlaylist(p.info.name, p.info.playlistid, p.tracks);
       useQueue.play(store().tracks[0]);
       break;
   }

src/router/index.js

@@ -1,4 +1,4 @@
-import { createRouter, createWebHistory } from "vue-router";
+import { createRouter, createWebHashHistory } from "vue-router";
 import Home from "../views/Home.vue";
 import FolderView from "../views/FolderView.vue";
 import PlaylistView from "../views/PlaylistView.vue";
@@ -93,7 +93,8 @@ const routes = [
 ];
 
 const router = createRouter({
-  history: createWebHistory(import.meta.env.BASE_URL),
+  mode: "hash",
+  history: createWebHashHistory(import.meta.env.BASE_URL),
   routes,
 });