From e7741937a348fdc1b60aa12180db344df66322ce Mon Sep 17 00:00:00 2001
From: geoffrey45 <geoffreymungai45@gmail.com>
Date: Wed, 9 Feb 2022 22:15:46 +0300
Subject: [PATCH] format seconds into hh:mm:ss

---
 src/components/AlbumView/Header.vue        | 11 +++--
 src/components/RightSideBar/Main.vue       |  4 +-
 src/components/RightSideBar/NowPlaying.vue | 31 +++++++-------
 src/components/Search.vue                  | 49 +++++++++++-----------
 src/components/shared/SongItem.vue         |  3 +-
 src/composables/perks.js                   | 29 +++++++++++--
 6 files changed, 79 insertions(+), 48 deletions(-)

diff --git a/src/components/AlbumView/Header.vue b/src/components/AlbumView/Header.vue
index 7a8cef9..ba9c3fa 100644
--- a/src/components/AlbumView/Header.vue
+++ b/src/components/AlbumView/Header.vue
@@ -2,10 +2,10 @@
   <div class="album-h">
     <div class="a-header rounded card-dark border">
       <div
-        class="art rounded border"
-        :style="{
+          :style="{
           backgroundImage: `url(&quot;${album_info.image}&quot;)`,
         }"
+          class="art rounded border"
       ></div>
       <div class="info">
         <div class="top">
@@ -28,10 +28,10 @@
       <div class="circle circular"></div>
       <div class="rect rounded"></div>
       <div
-        class="avatar image"
-        :style="{
+          :style="{
           backgroundImage: `url(&quot;${album_info.artist_image}&quot;)`,
         }"
+          class="avatar image"
       ></div>
     </div>
   </div>
@@ -47,6 +47,7 @@ export default {
     function playAlbum() {
       perks.updateQueue(state.album_song_list.value[0], "album");
     }
+
     return {
       playAlbum,
     };
@@ -138,6 +139,7 @@ export default {
     }
   }
 }
+
 .a-header {
   position: relative;
   overflow: hidden;
@@ -181,6 +183,7 @@ export default {
       .stats {
         font-weight: bold;
       }
+
       .play {
         height: 2.5rem;
         width: 6rem;
diff --git a/src/components/RightSideBar/Main.vue b/src/components/RightSideBar/Main.vue
index a6391a8..7624179 100644
--- a/src/components/RightSideBar/Main.vue
+++ b/src/components/RightSideBar/Main.vue
@@ -35,7 +35,9 @@ const tabs = {
   queue: "queue",
 };
 
-const current_tab = ref(tabs.queue);
+const default_tab = tabs.home;
+
+const current_tab = ref(default_tab);
 
 function changeTab(tab) {
   current_tab.value = tab;
diff --git a/src/components/RightSideBar/NowPlaying.vue b/src/components/RightSideBar/NowPlaying.vue
index 42a8fb2..71a7bef 100644
--- a/src/components/RightSideBar/NowPlaying.vue
+++ b/src/components/RightSideBar/NowPlaying.vue
@@ -1,27 +1,27 @@
 <template>
   <div class="now-playing border shadow-lg">
     <div class="art-tags">
-      <div class="duration">{{ current.length }}</div>
+      <div class="duration">{{ formatSeconds(current.length) }}</div>
       <div
-        :style="{
+          :style="{
           backgroundImage: `url(&quot;${current.image}&quot;)`,
         }"
-        class="album-art image border"
+          class="album-art image border"
       ></div>
       <div class="t-a">
         <p id="title" class="ellipsis">{{ current.title }}</p>
         <div class="separator no-border"></div>
-        <div v-if="current.artists[0] != ''" id="artist" class="ellip">
+        <div v-if="current.artists[0] !== ''" id="artist" class="ellip">
           <span v-for="artist in putCommas(current.artists)" :key="artist">{{
-            artist
-          }}</span>
+              artist
+            }}</span>
         </div>
         <div v-else id="artist">
           <span>{{ current.albumartist }}</span>
         </div>
         <div id="type">
           <span v-if="current.bitrate > 330"
-            >FLAC • {{ current.bitrate }} Kbps</span
+          >FLAC • {{ current.bitrate }} Kbps</span
           >
           <span v-else>MP3 | {{ current.bitrate }} Kbps</span>
         </div>
@@ -29,7 +29,7 @@
     </div>
     <div class="progress">
       <div class="prog">
-        <Progress />
+        <Progress/>
       </div>
     </div>
     <div class="c-wrapper border rounded">
@@ -38,7 +38,7 @@
           <div class="image"></div>
           <div class="image"></div>
         </div>
-        <HotKeys />
+        <HotKeys/>
         <div class="fav">
           <div class="image"></div>
           <div class="image"></div>
@@ -50,7 +50,7 @@
 
 <script>
 import playAudio from "@/composables/playAudio.js";
-import { ref } from "@vue/reactivity";
+import {ref} from "@vue/reactivity";
 import perks from "../../composables/perks.js";
 import HotKeys from "../shared/HotKeys.vue";
 import Progress from "../shared/Progress.vue";
@@ -61,13 +61,15 @@ export default {
     const putCommas = perks.putCommas;
     const pos = playAudio.pos;
 
-    const { playNext } = playAudio;
-    const { playPrev } = playAudio;
-    const { playPause } = playAudio;
+    const {playNext} = playAudio;
+    const {playPrev} = playAudio;
+    const {playPause} = playAudio;
     const isPlaying = playAudio.playing;
+
     const seek = () => {
       playAudio.seek(document.getElementById("progress").value);
     };
+
     return {
       current,
       putCommas,
@@ -77,9 +79,10 @@ export default {
       pos,
       seek,
       isPlaying,
+      formatSeconds: perks.formatSeconds,
     };
   },
-  components: { Progress, HotKeys },
+  components: {Progress, HotKeys},
 };
 </script>
 
diff --git a/src/components/Search.vue b/src/components/Search.vue
index 6fae205..455246d 100644
--- a/src/components/Search.vue
+++ b/src/components/Search.vue
@@ -2,46 +2,46 @@
   <div class="right-search border">
     <div>
       <div class="input">
-        <Loader />
-        <Filters :filters="filters" @removeFilter="removeFilter" />
+        <Loader/>
+        <Filters :filters="filters" @removeFilter="removeFilter"/>
         <div class="input-loader border">
           <input
-            type="text"
-            id="search"
-            @keyup.backspace="removeLastFilter"
-            placeholder="find your music"
-            v-model="query"
+              id="search"
+              v-model="query"
+              placeholder="find your music"
+              type="text"
+              @keyup.backspace="removeLastFilter"
           />
           <div class="search-icon image"></div>
         </div>
       </div>
       <div class="separator no-border"></div>
-      <Options @addFilter="addFilter" />
+      <Options @addFilter="addFilter"/>
     </div>
     <div class="scrollable">
       <TracksGrid
-        :tracks="tracks.tracks"
-        :more="tracks.more"
-        v-if="tracks.tracks.length"
+          v-if="tracks.tracks.length"
+          :more="tracks.more"
+          :tracks="tracks.tracks"
       />
       <AlbumGrid
-        v-if="albums.albums.length"
-        :albums="albums.albums"
-        :more="albums.more"
+          v-if="albums.albums.length"
+          :albums="albums.albums"
+          :more="albums.more"
       />
       <div class="separator no-border"></div>
       <ArtistGrid
-        v-if="artists.artists.length"
-        :artists="artists.artists"
-        :more="artists.more"
+          v-if="artists.artists.length"
+          :artists="artists.artists"
+          :more="artists.more"
       />
       <div
-        class="no-res"
-        v-if="
+          v-if="
           !artists.artists.length &&
           !tracks.tracks.length &&
           !albums.albums.length && query.length != 0
         "
+          class="no-res"
       >
         <div class="no-res-text">
           No results for <span class="highlight rounded">{{ query }}</span>
@@ -55,9 +55,9 @@
 </template>
 
 <script>
-import { reactive, ref } from "@vue/reactivity";
+import {reactive, ref} from "@vue/reactivity";
 
-import { watch } from "@vue/runtime-core";
+import {watch} from "@vue/runtime-core";
 import state from "@/composables/state.js";
 import searchMusic from "@/composables/searchMusic.js";
 import useDebouncedRef from "@/composables/useDebouncedRef";
@@ -127,9 +127,10 @@ export default {
         albums.albums = [];
         artists.artists = [];
         tracks.tracks = [];
-        
+
         return;
-      };
+      }
+      ;
 
       searchMusic(new_query).then((res) => {
         albums.albums = res.albums.albums;
@@ -153,7 +154,7 @@ export default {
       query,
       filters,
       loading,
-      
+
     };
   },
 };
diff --git a/src/components/shared/SongItem.vue b/src/components/shared/SongItem.vue
index fe74351..c412302 100644
--- a/src/components/shared/SongItem.vue
+++ b/src/components/shared/SongItem.vue
@@ -39,7 +39,7 @@
         {{ song.album }}
       </div>
     </td>
-    <td class="song-duration">{{ song.length }}</td>
+    <td class="song-duration">{{ formatSeconds(song.length) }}</td>
   </tr>
 </template>
 
@@ -66,6 +66,7 @@ export default {
       emitLoadAlbum,
       is_playing: state.is_playing,
       current: state.current,
+      formatSeconds: perks.formatSeconds,
     };
   },
 };
diff --git a/src/composables/perks.js b/src/composables/perks.js
index 3da76d7..9592f8c 100644
--- a/src/composables/perks.js
+++ b/src/composables/perks.js
@@ -4,7 +4,6 @@ import media from "./mediaNotification.js";
 import playAudio from "./playAudio.js";
 import state from "./state.js";
 
-
 const current = ref(state.current);
 
 const next = ref({
@@ -37,7 +36,9 @@ const putCommas = (artists) => {
 };
 
 function updateNext(song_) {
-  const index = state.queue.value.findIndex((item) => item.track_id === song_.track_id);
+  const index = state.queue.value.findIndex(
+    (item) => item.track_id === song_.track_id
+  );
 
   if (index == queue.value.length - 1) {
     next.value = queue.value[0];
@@ -50,7 +51,9 @@ function updateNext(song_) {
 }
 
 function updatePrev(song) {
-  const index = state.queue.value.findIndex((item) => item.track_id === song.track_id);
+  const index = state.queue.value.findIndex(
+    (item) => item.track_id === song.track_id
+  );
 
   if (index == 0) {
     prev.value = queue.value[queue.value.length - 1];
@@ -131,7 +134,6 @@ function focusSearchBox() {
 
 setTimeout(() => {
   watch(current, (new_current) => {
-
     media.showMediaNotif();
 
     updateNext(new_current);
@@ -210,11 +212,30 @@ window.addEventListener("keyup", () => {
   key_down_fired = false;
 });
 
+function formatSeconds(seconds) {
+  const date = new Date(seconds * 1000);
+
+  const hh = date.getUTCHours();
+  const mm = date.getUTCMinutes();
+  const ss = date.getUTCSeconds();
+
+  const _hh = hh < 10 ? `0${hh}` : hh;
+  const _mm = mm < 10 ? `0${mm}` : mm;
+  const _ss = ss < 10 ? `0${ss}` : ss;
+
+  if (hh > 0) {
+    return `${_hh}:${_mm}:${_ss}`;
+  } else {
+    return `${_mm}:${_ss}`;
+  }
+}
+
 export default {
   putCommas,
   readQueue,
   focusCurrent,
   updateQueue,
+  formatSeconds,
   current,
   queue,
   next,