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/components/AlbumView/Header.vue

@@ -23,8 +23,8 @@
         <div class="bottom">
           <div class="stats">
             {{ props.album.count }} Tracks •
-            {{ perks.formatSeconds(props.album.duration, "long") }} •
-            {{ props.album.date }} • {{ props.album.artist }}
+            {{ formatSeconds(props.album.duration) }} • {{ props.album.date }} •
+            {{ 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 { AlbumInfo } from "../../interfaces.js";
+import { formatSeconds } from "../../composables/perks";
+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">{{
-            formatSeconds(state.current.value.length)
-          }}</span>
+          <span class="durationx">{{ formatSeconds(q.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>
-import "../../assets/css/BottomBar/BottomBar.scss";
-import Progress from "../shared/Progress.vue";
-import HotKeys from "../shared/HotKeys.vue";
-import state from "../../composables/state";
-import perks from "../../composables/perks";
-import playAudio from "../../composables/playAudio";
+<script setup lang="ts">
+import "@/assets/css/BottomBar/BottomBar.scss";
+import Progress from "../LeftSidebar/NP/Progress.vue";
+import HotKeys from "../LeftSidebar/NP/HotKeys.vue";
+import { formatSeconds } from "@/composables/perks";
 
-const current_pos = playAudio.current_time;
-const formatSeconds = perks.formatSeconds;
-</script> -->
+import useQStore from "@/stores/queue";
+
+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"
-      :class="{ isPlaying: props.playing }"
+      @click="q.playPause"
+      :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<{
-  playing: boolean;
-  playPause: () => void;
-  next: () => void;
-  prev: () => void;
-}>();
+import useQStore from "@/stores/queue";
+
+const q = useQStore();
 </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 = () => {
-  const value = Number(document.getElementById("progress").value);
-  props.seek(value);
-};
+import useQStore from "../../../stores/queue";
 
-const props = defineProps<{
-  pos: number;
-  seek: (time: number) => void;
-}>();
+const q = useQStore();
+const seek = () => {
+  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;
-  padding: 10px $small $small;
-  margin-top: 1rem;
+  margin: 1rem 0;
   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 0.6rem 0;
+    padding: 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 putCommas = perks.putCommas;
+const imguri = paths.images.thumb;
 
 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" />
-      <HotKeys
-        :playing="queue.playing"
-        :playPause="queue.playPause"
-        :next="queue.playNext"
-        :prev="queue.playPrev"
-      />
+      <Progress />
+      <HotKeys />
     </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);
 };