mirror of
https://github.com/tcsenpai/swingmusic.git
synced 2025-07-28 13:41:42 +00:00
format seconds into hh:mm:ss
This commit is contained in:
parent
214ae82344
commit
e7741937a3
@ -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("${album_info.image}")`,
|
||||
}"
|
||||
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("${album_info.artist_image}")`,
|
||||
}"
|
||||
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;
|
||||
|
@ -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;
|
||||
|
@ -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("${current.image}")`,
|
||||
}"
|
||||
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>
|
||||
|
||||
|
@ -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,
|
||||
|
||||
|
||||
};
|
||||
},
|
||||
};
|
||||
|
@ -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,
|
||||
};
|
||||
},
|
||||
};
|
||||
|
@ -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,
|
||||
|
Loading…
x
Reference in New Issue
Block a user