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/App.vue

@@ -3,12 +3,8 @@
   <Modal />
   <Notification />
   <div class="l-container">
-    <div class="l-sidebar">
+    <div class="l-sidebar rounded">
-      <div id="logo-container">
+      <Logo />
-        <router-link :to="{ name: 'Home' }">
-          <div class="logo"></div
-        ></router-link>
-      </div>
       <Navigation />
       <div class="l-album-art">
         <nowPlaying />
@@ -24,7 +20,7 @@
   </div>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import Navigation from "./components/LeftSidebar/Navigation.vue";
 
 import Main from "./components/RightSideBar/Main.vue";
@@ -38,6 +34,7 @@ import Modal from "./components/modal.vue";
 import Notification from "./components/Notification.vue";
 import useQStore from "./stores/queue";
 import listenForKeyboardEvents from "./composables/keyboard";
+import Logo from "./components/Logo.vue";
 
 const RightSideBar = Main;
 const context_store = useContextStore();
@@ -55,38 +52,22 @@ app_dom.addEventListener("click", (e) => {
 </script>
 
 <style lang="scss">
+@import "./assets/css/mixins.scss";
+
 .l-sidebar {
   position: relative;
 
   .l-album-art {
+    width: calc(100% - 2rem);
     position: absolute;
     bottom: 0;
+    margin-bottom: 1rem;
   }
 }
 
-#logo-container {
-  position: relative;
-  height: 3.6rem;
-  display: flex;
-  align-items: center;
-  margin-bottom: 0.5rem;
 
-  #toggle {
-    position: absolute;
-    width: 3rem;
-    height: 100%;
-    background: url(./assets/icons/menu.svg) no-repeat center;
-    background-size: 2rem;
-    cursor: pointer;
-  }
-}
 
-.logo {
+
-  height: 4.5rem;
-  width: 15rem;
-  background: url(./assets/icons/logo.svg) no-repeat 1rem;
-  background-size: 9rem;
-}
 
 .r-sidebar {
   &::-webkit-scrollbar {

src/assets/css/BottomBar/BottomBar.scss

@@ -7,46 +7,16 @@
     display: grid;
     height: 100%;
     padding-right: $small;
-
     
-
     @include phone-only {
       grid-template-columns: 1fr 9.2rem;
     }
 
-    .info {
-      display: flex;
-      padding-top: $small;
-      margin-left: $small;
-
-      .art {
-        width: 3rem;
-        height: 3rem;
-        background-image: url("../../images/null.webp");
-      }
-
-      .separator {
-        margin: 2px;
-      }
-
-      .desc {
-        width: calc(100% - 5rem);
-        margin-left: $small;
-        display: flex;
-        align-items: center;
-        margin-top: -$small;
-
-        .artists {
-          font-size: 0.8rem;
-          color: $white;
-        }
-      }
-    }
-
     .controlsx {
       width: 100%;
       overflow: hidden;
-      display: flex;
+      display: grid;
+      grid-template-columns: 12rem 1fr 12rem;
       align-items: center;
       padding: $small;
 
@@ -55,10 +25,6 @@
         align-items: center;
       }
 
-      .controls-bottom {
-        width: min-content;
-      }
-
       .progress-bottom {
         width: 100%;
 

src/assets/css/global.scss

@@ -1,4 +1,5 @@
 @import "../css/ProgressBar.scss";
+@import "mixins.scss";
 
 :root {
   --separator: #ffffff46;
@@ -20,6 +21,8 @@ body {
   image-rendering: -webkit-optimize-contrast;
 }
 
+
+
 .heading {
   font-size: 2rem;
   font-weight: bold;
@@ -39,7 +42,6 @@ a {
 }
 
 .border {
-  // border: solid 1px $gray5;
   background-color: $black;
   box-shadow: 0 0 1rem rgba(0, 0, 0, 0.1);
 }
@@ -95,11 +97,11 @@ a {
 }
 
 .l-sidebar {
-  width: 15rem;
+  width: 17rem;
   grid-area: l-sidebar;
-  padding-top: 0.5rem;
-  // border-right: solid 1px $gray3;
   background-color: $black;
+  margin: $small;
+  padding: 1rem;
 }
 
 .bottom-bar {

src/assets/css/mixins.scss

@@ -0,0 +1,5 @@
+@mixin ximage {
+  background-position: center;
+  background-size: cover;
+  background-repeat: no-repeat;
+}

src/components/AlbumView/Header.vue

@@ -23,8 +23,8 @@
         <div class="bottom">
           <div class="stats">
             {{ props.album.count }} Tracks •
-            {{ perks.formatSeconds(props.album.duration, "long") }} •
+            {{ formatSeconds(props.album.duration) }} • {{ props.album.date }} •
-            {{ props.album.date }} • {{ props.album.artist }}
+            {{ props.album.artist }}
           </div>
           <PlayBtnRect :source="playSources.album" />
         </div>
@@ -34,8 +34,8 @@
 </template>
 
 <script setup lang="ts">
-import perks from "../../composables/perks.js";
+import { formatSeconds } from "../../composables/perks";
-import { AlbumInfo } from "../../interfaces.js";
+import { AlbumInfo } from "../../interfaces";
 import PlayBtnRect from "../shared/PlayBtnRect.vue";
 import { playSources } from "../../composables/enums";
 import { paths } from "../../config";

src/components/BottomBar/BottomBar.vue

@@ -1,37 +1,33 @@
-<!-- <template>
+<template>
   <div class="b-bar">
     <div class="grid rounded">
       <div class="controlsx rounded">
-        <div class="controls controls-bottom">
+        <div class="controls-bottom">
           <HotKeys />
         </div>
         <div class="progress progress-bottom">
-          <span class="durationx">{{ formatSeconds(current_pos) }}</span>
+          <span class="durationx">{{ formatSeconds(q.track.current_time) }}</span>
           <Progress />
-          <span class="durationx">{{
+          <span class="durationx">{{ formatSeconds(q.length) }}</span>
-            formatSeconds(state.current.value.length)
-          }}</span>
         </div>
         <div class="r-group">
           <div id="heart" class="image ctrl-btn"></div>
           <div id="add-to" class="image ctrl-btn"></div>
           <div id="repeat" class="image ctrl-btn"></div>
         </div>
-        <div class="controls controls-bottom"></div>
       </div>
       <div class="volume-group"></div>
     </div>
   </div>
 </template>
 
-<script setup>
+<script setup lang="ts">
-import "../../assets/css/BottomBar/BottomBar.scss";
+import "@/assets/css/BottomBar/BottomBar.scss";
-import Progress from "../shared/Progress.vue";
+import Progress from "../LeftSidebar/NP/Progress.vue";
-import HotKeys from "../shared/HotKeys.vue";
+import HotKeys from "../LeftSidebar/NP/HotKeys.vue";
-import state from "../../composables/state";
+import { formatSeconds } from "@/composables/perks";
-import perks from "../../composables/perks";
-import playAudio from "../../composables/playAudio";
 
-const current_pos = playAudio.current_time;
+import useQStore from "@/stores/queue";
-const formatSeconds = perks.formatSeconds;
+
-</script> -->
+const q = useQStore();
+</script>

src/components/LeftSidebar/NP/HotKeys.vue

@@ -1,33 +1,31 @@
 <template>
   <div class="hotkeys">
-    <div class="image ctrl-btn" id="previous" @click="props.prev"></div>
+    <div class="image ctrl-btn" id="previous" @click="q.playPrev"></div>
     <div
       class="image ctrl-btn play-pause"
-      @click="playPause"
+      @click="q.playPause"
-      :class="{ isPlaying: props.playing }"
+      :class="{ isPlaying: q.playing }"
     ></div>
-    <div class="image ctrl-btn" id="next" @click="props.next"></div>
+    <div class="image ctrl-btn" id="next" @click="q.playNext"></div>
   </div>
 </template>
 
 <script setup lang="ts">
-const props = defineProps<{
+import useQStore from "@/stores/queue";
-  playing: boolean;
+
-  playPause: () => void;
+const q = useQStore();
-  next: () => void;
-  prev: () => void;
-}>();
 </script>
 
 <style lang="scss">
 .hotkeys {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
-  width: 100%;
   gap: $small;
-  height: 3rem;
+  height: 2.5rem;
   align-items: center;
+  justify-content: center;
   place-content: flex-end;
+  width: 100%;
 
   .ctrl-btn {
     height: 2.5rem;
@@ -37,7 +35,7 @@ const props = defineProps<{
     border-radius: 0.5rem;
 
     &:hover {
-      background-color: $red;
+      background-color: $accent;
     }
   }
 

src/components/LeftSidebar/NP/Progress.vue

@@ -2,22 +2,22 @@
   <input
     id="progress"
     type="range"
-    :value="props.pos"
+    :value="q.track.current_time"
     min="0"
-    max="100"
+    :max="q.track.duration"
     step="0.1"
     @change="seek()"
   />
 </template>
 
 <script setup lang="ts">
-const seek = () => {
+import useQStore from "../../../stores/queue";
-  const value = Number(document.getElementById("progress").value);
-  props.seek(value);
-};
 
-const props = defineProps<{
+const q = useQStore();
-  pos: number;
+const seek = () => {
-  seek: (time: number) => void;
+  const elem = <HTMLFormElement>document.getElementById("progress");
-}>();
+  const value = elem.value;
+
+  q.seek(value);
+};
 </script>

src/components/LeftSidebar/Navigation.vue

@@ -15,7 +15,7 @@
   </div>
 </template>
 
-<script setup>
+<script setup lang="ts">
 const menus = [
   {
     name: "home",
@@ -53,9 +53,7 @@ const menus = [
 
 .side-nav-container {
   color: #fff;
-  margin-bottom: 1rem;
+  margin: 1rem 0;
-  padding: 10px $small $small;
-  margin-top: 1rem;
   text-transform: capitalize;
 
   .nav-button {
@@ -63,11 +61,10 @@ const menus = [
     display: flex;
     align-items: flex-start;
     justify-content: flex-start;
-    height: 100%;
+    padding: 0.6rem 0;
-    padding: 0.6rem 0 0.6rem 0;
 
     &:hover {
-      background-color: $gray;
+      background-color: $gray3;
     }
 
     .nav-icon {

src/components/LeftSidebar/SongCard.vue

@@ -34,12 +34,10 @@
 </template>
 
 <script setup lang="ts">
-import perks from "../../composables/perks";
+import { putCommas } from "../../composables/perks";
 import { Track } from "../../interfaces";
 import { paths } from "../../config";
-const imguri = paths.images.thumb
+const imguri = paths.images.thumb;
-
-const putCommas = perks.putCommas;
 
 const props = defineProps<{
   track: Track;

src/components/LeftSidebar/nowPlaying.vue

@@ -5,18 +5,13 @@
     <div class="separator no-border"></div>
     <div>
       <SongCard :track="queue.current" />
-      <Progress :seek="queue.seek" :pos="queue.current_time" />
+      <Progress />
-      <HotKeys
+      <HotKeys />
-        :playing="queue.playing"
-        :playPause="queue.playPause"
-        :next="queue.playNext"
-        :prev="queue.playPrev"
-      />
     </div>
   </div>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import SongCard from "./SongCard.vue";
 import HotKeys from "./NP/HotKeys.vue";
 import Progress from "./NP/Progress.vue";
@@ -28,9 +23,8 @@ const queue = useQStore();
 .l_ {
   padding: 1rem;
   background-color: $primary;
-  margin: $small;
   text-align: center;
-  width: 14rem;
+  width: 100%;
   display: grid;
   position: relative;
   text-transform: capitalize;

src/components/Logo.vue

@@ -0,0 +1,23 @@
+<template>
+  <div id="logo-container">
+    <router-link :to="{ name: 'Home' }">
+      <div id="logo" class="rounded"></div
+    ></router-link>
+  </div>
+</template>
+
+<style lang="scss">
+@import "../assets/css/mixins.scss";
+
+#logo-container {
+  overflow: hidden;
+}
+
+#logo {
+  height: 4.5rem !important;
+  width: 15rem;
+  background-image: url(./../assets/images/logo.webp);
+  background-size: contain;
+  @include ximage;
+}
+</style>

src/components/RightSideBar/NowPlaying.vue

@@ -51,7 +51,7 @@
 <script>
 import playAudio from "@/composables/playAudio.js";
 import {ref} from "@vue/reactivity";
-import perks from "../../composables/perks.js";
+import {putCommas, formatSeconds} from "../../composables/perks.js";
 import HotKeys from "../shared/HotKeys.vue";
 import Progress from "../shared/Progress.vue";
 

src/components/RightSideBar/Search.vue

@@ -15,26 +15,12 @@
 </template>
 
 <script setup lang="ts">
-import { reactive, ref } from "@vue/reactivity";
-import useSearchStore from "../../stores/gsearch";
-import useTabStore from "../../stores/tabs";
 import TabsWrapper from "./TabsWrapper.vue";
 import Tab from "./Tab.vue";
 import TracksGrid from "./Search/TracksGrid.vue";
 import AlbumGrid from "./Search/AlbumGrid.vue";
 import "@/assets/css/Search/Search.scss";
 import ArtistGrid from "./Search/ArtistGrid.vue";
-
-const search = useSearchStore();
-const tabs = useTabStore();
-
-const search_thing = ref(null);
-
-const artists = reactive({
-  artists: [],
-  more: false,
-});
-
 </script>
 
 <style lang="scss">

src/components/RightSideBar/queue/upNext.vue

@@ -12,7 +12,7 @@
         <p class="title ellip">{{ next.title }}</p>
         <hr />
         <p class="artist ellip">
-          <span v-for="artist in perks.putCommas(next.artists)" :key="artist">{{
+          <span v-for="artist in putCommas(next.artists)" :key="artist">{{
             artist
           }}</span>
         </p>
@@ -23,7 +23,7 @@
 
 <script setup lang="ts">
 import { Track } from "../../../interfaces";
-import perks from "../../../composables/perks";
+import {putCommas} from "../../../composables/perks";
 import { paths } from "../../../config";
 const imguri = paths.images.thumb;
 

src/components/shared/SongItem.vue

@@ -29,7 +29,7 @@
       <div class="ellip" v-if="props.song.artists[0] !== ''">
         <span
           class="artist"
-          v-for="artist in perks.putCommas(props.song.artists)"
+          v-for="artist in putCommas(props.song.artists)"
           :key="artist"
           >{{ artist }}</span
         >
@@ -53,13 +53,13 @@
       </div>
     </router-link>
     <div class="song-duration">
-      {{ perks.formatSeconds(props.song.length) }}
+      {{ formatSeconds(props.song.length) }}
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import perks from "../../composables/perks.js";
+import { putCommas, formatSeconds } from "../../composables/perks";
 import useContextStore from "../../stores/context";
 import useModalStore from "../../stores/modal";
 import useQueueStore from "../../stores/queue";
@@ -67,7 +67,7 @@ import { ContextSrc } from "../../composables/enums";
 
 import { ref } from "vue";
 import trackContext from "../../contexts/track_context";
-import { Track } from "../../interfaces.js";
+import { Track } from "../../interfaces";
 import { paths } from "../../config";
 
 const contextStore = useContextStore();

src/components/shared/TrackItem.vue

@@ -36,7 +36,7 @@
 
 <script setup lang="ts">
 import { ref } from "vue";
-import perks from "../../composables/perks";
+import { putCommas } from "../../composables/perks";
 import trackContext from "../../contexts/track_context";
 import { Track } from "../../interfaces";
 import { ContextSrc } from "../../composables/enums";
@@ -46,9 +46,8 @@ import useModalStore from "../../stores/modal";
 import useQueueStore from "../../stores/queue";
 import { paths } from "../../config";
 
-
 const contextStore = useContextStore();
-const imguri = paths.images.thumb
+const imguri = paths.images.thumb;
 
 const props = defineProps<{
   track: Track;
@@ -78,9 +77,6 @@ const emit = defineEmits<{
   (e: "PlayThis", track: Track): void;
 }>();
 
-const current = ref(perks.current);
-const putCommas = perks.putCommas;
-
 const playThis = (track: Track) => {
   emit("PlayThis", track);
 };

src/composables/normalizeContextMenu.js

@@ -1,8 +1,8 @@
-import perks from "./perks";
+import { getElem } from "./perks";
 
 export default (mouseX, mouseY) => {
-  const scope = perks.getElem("app", "id");
+  const scope = getElem("app", "id");
-  const contextMenu = perks.getElem("context-menu", "class");
+  const contextMenu = getElem("context-menu", "class");
   // ? compute what is the mouse position relative to the container element (scope)
   let { left: scopeOffsetX, top: scopeOffsetY } = scope.getBoundingClientRect();
 

src/composables/perks.ts

@@ -1,4 +1,4 @@
-const putCommas = (artists) => {
+const putCommas = (artists: string[]) => {
   let result = [];
 
   artists.forEach((i, index, artists) => {
@@ -24,18 +24,18 @@ function focusCurrent() {
   }
 }
 
-function getElem(identifier, type) {
+function getElem(id: string, type: string) {
   switch (type) {
     case "class": {
-      return document.getElementsByClassName(identifier)[0];
+      return document.getElementsByClassName(id)[0];
     }
     case "id": {
-      return document.getElementById(identifier);
+      return document.getElementById(id);
     }
   }
 }
 
-function formatSeconds(seconds) {
+function formatSeconds(seconds: number) {
   // check if there are arguments
 
   const date = new Date(seconds * 1000);
@@ -75,10 +75,4 @@ function formatSeconds(seconds) {
   }
 }
 
-
+export { putCommas, focusCurrent, formatSeconds, getElem };
-export default {
-  putCommas,
-  focusCurrent,
-  formatSeconds,
-  getElem,
-};

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%`;
             };

tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "compilerOptions": {
+    "jsx": "preserve",
+    "paths": {
+      "baseUrl": ["./"],
+      "@/*": ["./src/*"]
+    }
+  }
+}