From deb65f34058fcad9e6ce5be20d234e68de5a1cbf Mon Sep 17 00:00:00 2001
From: geoffrey45 <geoffreymungai45@gmail.com>
Date: Tue, 2 Aug 2022 18:55:09 +0300
Subject: [PATCH] add time to now playing card

---
 src/components/LeftSidebar/NP/HotKeys.vue  |  2 ++
 src/components/LeftSidebar/NP/Progress.vue |  4 +--
 src/components/LeftSidebar/nowPlaying.vue  | 32 ++++++++++++++++------
 src/stores/queue.ts                        | 18 +++++++-----
 4 files changed, 39 insertions(+), 17 deletions(-)

diff --git a/src/components/LeftSidebar/NP/HotKeys.vue b/src/components/LeftSidebar/NP/HotKeys.vue
index ae9c9827..cfad16d8 100644
--- a/src/components/LeftSidebar/NP/HotKeys.vue
+++ b/src/components/LeftSidebar/NP/HotKeys.vue
@@ -1,4 +1,5 @@
 <template>
+  
   <div class="hotkeys">
     <div class="image ctrl-btn" id="previous" @click="q.playPrev"></div>
     <div
@@ -17,6 +18,7 @@ const q = useQStore();
 </script>
 
 <style lang="scss">
+
 .hotkeys {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
diff --git a/src/components/LeftSidebar/NP/Progress.vue b/src/components/LeftSidebar/NP/Progress.vue
index 2abfbbdb..49723554 100644
--- a/src/components/LeftSidebar/NP/Progress.vue
+++ b/src/components/LeftSidebar/NP/Progress.vue
@@ -2,9 +2,9 @@
   <input
     id="progress"
     type="range"
-    :value="q.track.current_time"
+    :value="q.duration.current"
     min="0"
-    max="100"
+    :max="q.duration.full"
     step="0.1"
     @change="seek()"
   />
diff --git a/src/components/LeftSidebar/nowPlaying.vue b/src/components/LeftSidebar/nowPlaying.vue
index 3eb3b5e1..5104dad7 100644
--- a/src/components/LeftSidebar/nowPlaying.vue
+++ b/src/components/LeftSidebar/nowPlaying.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="r-now-playing t-center rounded">
+  <div class="now-playing-card t-center rounded">
     <div class="headin">Now Playing</div>
     <div
       class="button menu rounded"
@@ -11,6 +11,10 @@
     <div class="separator no-border"></div>
     <div>
       <SongCard :track="queue.tracks[queue.current]" />
+      <div class="l-track-time">
+        <span class="rounded">{{ formatSeconds(queue.duration.current) }}</span
+        ><span class="rounded">{{ formatSeconds(queue.duration.full) }}</span>
+      </div>
       <Progress />
       <HotKeys />
     </div>
@@ -18,16 +22,17 @@
 </template>
 
 <script setup lang="ts">
-import SongCard from "./SongCard.vue";
-import HotKeys from "./NP/HotKeys.vue";
-import Progress from "./NP/Progress.vue";
-import useQStore from "../../stores/queue";
-import MenuSvg from "../../assets/icons/more.svg";
+import { ContextSrc } from "@/composables/enums";
 import trackContext from "@/contexts/track_context";
 import useContextStore from "@/stores/context";
 import useModalStore from "@/stores/modal";
 import useQueueStore from "@/stores/queue";
-import { ContextSrc } from "@/composables/enums";
+import MenuSvg from "../../assets/icons/more.svg";
+import useQStore from "../../stores/queue";
+import HotKeys from "./NP/HotKeys.vue";
+import Progress from "./NP/Progress.vue";
+import SongCard from "./SongCard.vue";
+import { formatSeconds } from "@/composables/perks";
 
 import { ref } from "vue";
 
@@ -56,7 +61,7 @@ const showContextMenu = (e: Event) => {
 };
 </script>
 <style lang="scss">
-.r-now-playing {
+.now-playing-card {
   padding: 1rem;
   background-color: $primary;
   width: 100%;
@@ -64,6 +69,17 @@ const showContextMenu = (e: Event) => {
   position: relative;
   text-transform: capitalize;
 
+  .l-track-time {
+    display: flex;
+    justify-content: space-between;
+
+    span {
+      font-size: small;
+      // background-color: $gray;
+      padding: $smaller;
+    }
+  }
+
   &:hover {
     ::-moz-range-thumb {
       height: 0.8rem;
diff --git a/src/stores/queue.ts b/src/stores/queue.ts
index 3557991f..7ca7ffc9 100644
--- a/src/stores/queue.ts
+++ b/src/stores/queue.ts
@@ -52,9 +52,9 @@ export default defineStore("Queue", {
   state: () => ({
     progressElem: HTMLElement,
     audio: new Audio(),
-    track: {
-      current_time: 0,
-      duration: 0,
+    duration: {
+      current: 0,
+      full: 0,
     },
     current: 0,
     next: 0,
@@ -80,15 +80,16 @@ export default defineStore("Queue", {
         this.audio.onerror = reject;
       })
         .then(() => {
-          this.track.duration = this.audio.duration;
+          this.duration.full = this.audio.duration;
           this.audio.play().then(() => {
             this.playing = true;
             notif(track, this.playPause, this.playNext, this.playPrev);
 
             this.audio.ontimeupdate = () => {
-              this.track.current_time =
+              this.duration.current = this.audio.currentTime;
+              const bg_size =
                 (this.audio.currentTime / this.audio.duration) * 100;
-              elem.style.backgroundSize = `${this.track.current_time}% 100%`;
+              elem.style.backgroundSize = `${bg_size}% 100%`;
             };
 
             this.audio.onended = () => {
@@ -162,8 +163,11 @@ export default defineStore("Queue", {
       this.prev = index - 1;
     },
     setCurrent(index: number) {
+      const track = this.tracks[index];
+
       this.current = index;
-      this.currentid = this.tracks[index].trackid;
+      this.currentid = track.trackid;
+      this.duration.full = track.length;
     },
     setNewQueue(tracklist: Track[]) {
       if (this.tracks !== tracklist) {