From c3f6c054e53c69b7184d5aedcf7c8b98f6ed2ef8 Mon Sep 17 00:00:00 2001
From: Jahnavi Gupta <guptajhnv@gmail.com>
Date: Fri, 16 Oct 2020 20:53:52 +0530
Subject: [PATCH 1/4] Display song completion status

---
 index.html       |  1 +
 scripts/state.js | 16 ++++++++++++++++
 2 files changed, 17 insertions(+)

diff --git a/index.html b/index.html
index 3074d34..28535bb 100644
--- a/index.html
+++ b/index.html
@@ -218,6 +218,7 @@ <h6 class="now-playing-track-artist">{{ song.artists.join(", ") }}</h6>
           </div>
           <div class="now-playing-options">
               <input type="hidden" :value="onRepeatChange">
+              <p>{{ state.completionStatus }}</p>
               <button id="repeat" :class="{active: repeat === true}" @click="toggleRepeat()"><i class="material-icons">repeat</i></button>
               <button id="loved" v-bind:class="{active: loved === true}" @click="toggleLoved"><i class="material-icons">favorite</i></button>
           </div>
diff --git a/scripts/state.js b/scripts/state.js
index 7062d45..33505dd 100644
--- a/scripts/state.js
+++ b/scripts/state.js
@@ -20,6 +20,7 @@ const state = new Vue({
       ids: [],
       src: "",
       song: {},
+      elapsed: 0,
       completion: 0,
       instance: false,
       tracker: false
@@ -53,6 +54,20 @@ const state = new Vue({
       })
 
       return arr
+    },
+    completionStatus(){
+      let duration = Math.floor(this.nowplaying.elapsed)
+      let min = Math.floor(duration / 60)
+      let sec = Math.floor(duration % 60)
+      let completion = min.toString().padStart(2,"0") + ":" + sec.toString().padStart(2,"0")
+
+      duration = Math.floor(this.nowplaying.instance.duration())
+      min = Math.floor(duration / 60)
+      sec = Math.floor(duration % 60)
+      let length = min.toString().padStart(2,"0") + ":" + sec.toString().padStart(2,"0")
+
+      status = completion + "/" + length
+      return status
     }
   },
   methods: {
@@ -70,6 +85,7 @@ const state = new Vue({
       // When song starts playing
       this.nowplaying.instance.on("play", () => {
         this.nowplaying.tracker = setInterval(() => {
+          this.nowplaying.elapsed = this.nowplaying.instance.seek()
           this.nowplaying.completion =
           this.nowplaying.instance.seek() * 1000 / (this.nowplaying.instance.duration() * 10)
         }, 100)

From 122ada1316d5d96ea62730b3efc6efd87a3c2446 Mon Sep 17 00:00:00 2001
From: Jahnavi Gupta <guptajhnv@gmail.com>
Date: Fri, 16 Oct 2020 20:59:28 +0530
Subject: [PATCH 2/4] Update completion%

---
 scripts/state.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/scripts/state.js b/scripts/state.js
index 33505dd..4a2a601 100644
--- a/scripts/state.js
+++ b/scripts/state.js
@@ -87,7 +87,7 @@ const state = new Vue({
         this.nowplaying.tracker = setInterval(() => {
           this.nowplaying.elapsed = this.nowplaying.instance.seek()
           this.nowplaying.completion =
-          this.nowplaying.instance.seek() * 1000 / (this.nowplaying.instance.duration() * 10)
+          this.nowplaying.instance.seek() * 100 / this.nowplaying.instance.duration()
         }, 100)
       })
 

From f2178d70943fadc55ef0edb2ce25422a176ca886 Mon Sep 17 00:00:00 2001
From: Jahnavi Gupta <guptajhnv@gmail.com>
Date: Fri, 16 Oct 2020 21:09:55 +0530
Subject: [PATCH 3/4] Update completion status

---
 scripts/state.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/scripts/state.js b/scripts/state.js
index 4a2a601..e463e00 100644
--- a/scripts/state.js
+++ b/scripts/state.js
@@ -100,6 +100,7 @@ const state = new Vue({
       // When the song ends
       this.nowplaying.instance.on("end", () => {
         this.nowplaying.src = ""
+        this.nowplaying.elapsed = 0
         this.nowplaying.completion = 0
         clearInterval(this.nowplaying.tracker)
       })

From 2e2374b8fe2aa6ccd660d86a94cf2ac6f7ce4a5f Mon Sep 17 00:00:00 2001
From: Jahnavi Gupta <guptajhnv@gmail.com>
Date: Fri, 16 Oct 2020 21:29:56 +0530
Subject: [PATCH 4/4] :shower: Linted

---
 scripts/state.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/scripts/state.js b/scripts/state.js
index e463e00..6f5a7ac 100644
--- a/scripts/state.js
+++ b/scripts/state.js
@@ -59,12 +59,12 @@ const state = new Vue({
       let duration = Math.floor(this.nowplaying.elapsed)
       let min = Math.floor(duration / 60)
       let sec = Math.floor(duration % 60)
-      let completion = min.toString().padStart(2,"0") + ":" + sec.toString().padStart(2,"0")
+      let completion = min.toString().padStart(2, "0") + ":" + sec.toString().padStart(2, "0")
 
       duration = Math.floor(this.nowplaying.instance.duration())
       min = Math.floor(duration / 60)
       sec = Math.floor(duration % 60)
-      let length = min.toString().padStart(2,"0") + ":" + sec.toString().padStart(2,"0")
+      let length = min.toString().padStart(2, "0") + ":" + sec.toString().padStart(2, "0")
 
       status = completion + "/" + length
       return status
@@ -143,7 +143,7 @@ const state = new Vue({
       for(i in this.nowplaying.ids){
         this.nowplaying.instance.pause(this.nowplaying.ids[i])
       }
-    }
+    },
   }
 })