refactor logo, bottom bar and perks.js

- add new logo
- add tsconfig.json
- move logo to new component
- update bottombar
- remove props from hotkeys and progress bar
- convert perks.js -> perks.ts

src/stores/gsearch.js

@@ -1,67 +0,0 @@
-import { defineStore } from "pinia";
-import useDebouncedRef from "../composables/useDebouncedRef";
-
-export default defineStore("gsearch", {
-  state: () => ({
-    filters: [],
-    query: useDebouncedRef("", 600),
-    results: {
-      tracks: {
-        items: [],
-        more: false,
-      },
-      albums: {
-        items: [],
-        more: false,
-      },
-      artists: {
-        items: [],
-        more: false,
-      },
-    },
-  }),
-  actions: {
-    addFilter(filter) {
-      if (this.filters.includes(filter)) {
-        return;
-      }
-      this.filters.push(filter);
-    },
-    removeFilter(filter) {
-      this.filters = this.filters.filter((f) => f !== filter);
-    },
-    removeLastFilter() {
-      this.filters.pop();
-    },
-    updateQuery(query) {
-      this.query = query;
-    },
-    updateTrackResults(results) {
-      this.results.tracks = results;
-    },
-    addMoreTrackResults(results) {
-      this.results.tracks.items = [
-        ...this.results.tracks.items,
-        ...results.items,
-      ];
-    },
-    updateAlbumResults(results) {
-      this.results.albums = results;
-    },
-    addMoreAlbumResults(results) {
-      this.results.albums.items = [
-        ...this.results.albums.items,
-        ...results.items,
-      ];
-    },
-    updateArtistResults(results) {
-      this.results.artists = results;
-    },
-    addMoreArtistResults(results) {
-      this.results.artists.items = [
-        ...this.results.artists.items,
-        ...results.items,
-      ];
-    },
-  },
-});

src/stores/loader.ts

@@ -12,7 +12,6 @@ export default defineStore("Loader", {
     },
     stopLoading() {
       const diff = new Date().getTime() - this.duration;
-      console.log(diff);
 
       if (diff <= 250) {
         setTimeout(() => {

src/stores/queue.ts

@@ -12,7 +12,6 @@ import {
 import notif from "../composables/mediaNotification";
 import { FromOptions } from "../composables/enums";
 
-
 function writeQueue(
   from: fromFolder | fromAlbum | fromPlaylist,
   tracks: Track[]
@@ -49,11 +48,15 @@ export default defineStore("Queue", {
   state: () => ({
     progressElem: HTMLElement,
     audio: new Audio(),
+    track: {
+      current_time: 0,
+      duration: 0,
+    },
     current: <Track>{},
+    length: 0,
     next: <Track>{},
     prev: <Track>{},
     playing: false,
-    current_time: 0,
     from: <fromFolder>{} || <fromAlbum>{} || <fromPlaylist>{},
     tracks: <Track[]>[defaultTrack],
   }),
@@ -69,12 +72,15 @@ export default defineStore("Queue", {
         this.audio.onerror = reject;
       })
         .then(() => {
+          this.length = this.audio.duration;
+
           this.audio.play().then(() => {
             this.playing = true;
             notif(track, this.playPause, this.playNext, this.playPrev);
 
             this.audio.ontimeupdate = () => {
-              this.current_time =
+              this.track.current_time = this.audio.currentTime;
+              const current_time =
                 (this.audio.currentTime / this.audio.duration) * 100;
               elem.style.backgroundSize = `${this.current_time}% 100%`;
             };