format seconds into hh:mm:ss

This commit is contained in:
geoffrey45 2022-02-09 22:15:46 +03:00
parent 214ae82344
commit e7741937a3
6 changed files with 79 additions and 48 deletions

View File

@ -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;

View File

@ -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;

View File

@ -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>

View File

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

View File

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

View File

@ -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,