From 9bf98c4c1ba036947e37f0359625aa44a4963b39 Mon Sep 17 00:00:00 2001
From: Nikan Dalvand <nikandalvand@gmail.com>
Date: Thu, 25 Jul 2019 23:40:12 +0430
Subject: [PATCH 1/4] Added duration and current progress binding and started
 DateTime utility class

---
 src/renderer/layouts/PlayerBar.vue | 20 ++++++++++++++++++--
 src/renderer/utility/DateTime.js   | 11 +++++++++++
 2 files changed, 29 insertions(+), 2 deletions(-)
 create mode 100644 src/renderer/utility/DateTime.js

diff --git a/src/renderer/layouts/PlayerBar.vue b/src/renderer/layouts/PlayerBar.vue
index c624840..16ef045 100644
--- a/src/renderer/layouts/PlayerBar.vue
+++ b/src/renderer/layouts/PlayerBar.vue
@@ -8,6 +8,10 @@
         <div class="visualizer">
             <div id="visualizer"></div>
         </div>
+        <div class="duration">
+            <p class="progress active">00:00</p>
+            <p>{{duration}}</p>
+        </div>
         <div class="control-buttons">
             <div class="play-pause-button" @click="togglePlay">
                 <svg v-show="!playingStatus" xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><path d="M24 4C12.95 4 4 12.95 4 24s8.95 20 20 20 20-8.95 20-20S35.05 4 24 4zm-4 29V15l12 9-12 9z"/></svg>
@@ -20,9 +24,11 @@
 <script>
 import WaveSurfer from 'wavesurfer.js'
 import color from 'dominant-color'
+import { formatSeconds } from '../utility/DateTime'
 export default {
   name: 'PlayerBar',
   mounted () {
+    let progress = this.$el.getElementsByClassName('progress')[0]
     this.wavesurfer = WaveSurfer.create({
       container: '#visualizer',
       waveColor: '#c3c3c3',
@@ -35,10 +41,17 @@ export default {
       responsive: true
     })
     this.wavesurfer.load('/static/demo/music.mp3')
+    this.wavesurfer.on('ready', () => {
+      this.duration = formatSeconds(this.getDuration())
+    })
+    this.wavesurfer.on('audioprocess', (amount) => {
+      progress.innerHTML = formatSeconds(amount)
+    })
   },
   data () {
     return {
-      playingStatus: false
+      playingStatus: false,
+      duration: '00:00'
     }
   },
   methods: {
@@ -70,11 +83,14 @@ export default {
       this.wavesurfer.skip(offset)
     },
     getVolume () {
-      this.wavesurfer.getVolume()
+      return this.wavesurfer.getVolume()
     },
     setVolume (volume) {
       this.wavesurfer.setVolume(volume)
     },
+    getDuration () {
+      return this.wavesurfer.getDuration()
+    },
     togglePlay () {
       this.wavesurfer.playPause()
       this.playingStatus = this.isPlaying()
diff --git a/src/renderer/utility/DateTime.js b/src/renderer/utility/DateTime.js
new file mode 100644
index 0000000..59b6369
--- /dev/null
+++ b/src/renderer/utility/DateTime.js
@@ -0,0 +1,11 @@
+export function formatSeconds (input) {
+  var secondNumber = parseInt(input, 10)
+  var hours = Math.floor(secondNumber / 3600)
+  var minutes = Math.floor(secondNumber / 60) % 60
+  var seconds = secondNumber % 60
+
+  return [hours, minutes, seconds]
+    .map(v => v < 10 ? '0' + v : v)
+    .filter((v, i) => v !== '00' || i > 0)
+    .join(':')
+}

From 80e9fc2cbbe385258b80345d944eaacb44268a44 Mon Sep 17 00:00:00 2001
From: Nikan Dalvand <nikandalvand@gmail.com>
Date: Thu, 25 Jul 2019 23:42:06 +0430
Subject: [PATCH 2/4] Update cursor color with the artwork accent

---
 src/renderer/layouts/PlayerBar.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/renderer/layouts/PlayerBar.vue b/src/renderer/layouts/PlayerBar.vue
index 16ef045..46e1982 100644
--- a/src/renderer/layouts/PlayerBar.vue
+++ b/src/renderer/layouts/PlayerBar.vue
@@ -59,6 +59,7 @@ export default {
       let img = this.$el.getElementsByTagName('img')[0]
       color(img.src, (_, color) => {
         this.wavesurfer.setProgressColor(`#${color}`)
+        this.wavesurfer.setCursorColor(`#${color}`)
       })
     },
     play () {

From c8342028bd93b394a64bd460b4791a3d2b6745ba Mon Sep 17 00:00:00 2001
From: Nikan Dalvand <nikandalvand@gmail.com>
Date: Thu, 25 Jul 2019 23:45:56 +0430
Subject: [PATCH 3/4] Change wave cursor to resize

---
 src/renderer/layouts/PlayerBar.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/renderer/layouts/PlayerBar.vue b/src/renderer/layouts/PlayerBar.vue
index 46e1982..8e1d289 100644
--- a/src/renderer/layouts/PlayerBar.vue
+++ b/src/renderer/layouts/PlayerBar.vue
@@ -119,4 +119,5 @@ section.player
         height: 64px
         wave
             overflow-x: hidden !important
+            cursor: e-resize
 </style>

From e6beb201e1c5c23670c55a9fa1b87eeb6f57d481 Mon Sep 17 00:00:00 2001
From: Nikan Dalvand <nikandalvand@gmail.com>
Date: Thu, 25 Jul 2019 23:47:36 +0430
Subject: [PATCH 4/4] Updated the demo title,artist,artwork

---
 src/renderer/layouts/PlayerBar.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/renderer/layouts/PlayerBar.vue b/src/renderer/layouts/PlayerBar.vue
index 8e1d289..b5ab1a0 100644
--- a/src/renderer/layouts/PlayerBar.vue
+++ b/src/renderer/layouts/PlayerBar.vue
@@ -1,9 +1,9 @@
 <template>
     <section class="player">
-        <img @load="onArtworkLoad" class="artwork" src="/static/demo/starboy.png" />
+        <img @load="onArtworkLoad" class="artwork" src="/static/demo/artwork.jpg" />
         <div>
-            <p class="title">Perfidia</p>
-            <p class="artist">Nat King Cole</p>
+            <p class="title">Don't Let Me Down</p>
+            <p class="artist">The Chainsmokers</p>
         </div>
         <div class="visualizer">
             <div id="visualizer"></div>