format seconds into hh:mm:ss

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="{
           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="{
           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;

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;

src/components/RightSideBar/NowPlaying.vue

@@ -1,7 +1,7 @@
 <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="{
           backgroundImage: `url(&quot;${current.image}&quot;)`,
@@ -11,7 +11,7 @@
       <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>
@@ -65,9 +65,11 @@ export default {
     const {playPrev} = playAudio;
     const {playPause} = playAudio;
     const isPlaying = playAudio.playing;
+
     const seek = () => {
       playAudio.seek(document.getElementById("progress").value);
     };
+
     return {
       current,
       putCommas,
@@ -77,6 +79,7 @@ export default {
       pos,
       seek,
       isPlaying,
+      formatSeconds: perks.formatSeconds,
     };
   },
   components: {Progress, HotKeys},

src/components/Search.vue

@@ -6,11 +6,11 @@
         <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"
+              placeholder="find your music"
+              type="text"
+              @keyup.backspace="removeLastFilter"
           />
           <div class="search-icon image"></div>
         </div>
@@ -20,9 +20,9 @@
     </div>
     <div class="scrollable">
       <TracksGrid
-        :tracks="tracks.tracks"
-        :more="tracks.more"
           v-if="tracks.tracks.length"
+          :more="tracks.more"
+          :tracks="tracks.tracks"
       />
       <AlbumGrid
           v-if="albums.albums.length"
@@ -36,12 +36,12 @@
           :more="artists.more"
       />
       <div
-        class="no-res"
           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>
@@ -129,7 +129,8 @@ export default {
         tracks.tracks = [];
 
         return;
-      };
+      }
+      ;
 
       searchMusic(new_query).then((res) => {
         albums.albums = res.albums.albums;

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,
     };
   },
 };

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,