diff --git a/src/App.vue b/src/App.vue index b14838f..41390a4 100644 --- a/src/App.vue +++ b/src/App.vue @@ -23,11 +23,7 @@
- + @@ -58,7 +54,6 @@ export default { setup() { const collapsed = ref(true); - const queue = ref(JSON.parse(localStorage.getItem("queue")) || []); perks.readQueue(); @@ -91,7 +86,6 @@ export default { expandSearch, collapseSearch, search, - queue, }; }, }; @@ -118,10 +112,6 @@ export default { animation-iteration-count: 1; } -.l-sidebar { - position: relative; -} - .l-container #toggle { position: absolute; left: 0.2rem; @@ -134,8 +124,9 @@ export default { cursor: pointer; } -// .m-np { -// position: absolute; -// bottom: 0; -// } +.r-sidebar { + &::-webkit-scrollbar { + display: none; + } +} diff --git a/src/assets/css/global.scss b/src/assets/css/global.scss index cc28ee2..5b6c735 100644 --- a/src/assets/css/global.scss +++ b/src/assets/css/global.scss @@ -12,8 +12,7 @@ body { margin: 0; background: #0d0e0e; color: #fff; - font-family: "Helvetica Neue", sans-serif; - font-size: 1rem; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-size: 1rem; } .heading { diff --git a/src/assets/icons/heart.svg b/src/assets/icons/heart.svg index 7e7bb25..d4668ca 100644 --- a/src/assets/icons/heart.svg +++ b/src/assets/icons/heart.svg @@ -1,3 +1,3 @@ - - + + diff --git a/src/assets/icons/plus.svg b/src/assets/icons/plus.svg new file mode 100644 index 0000000..71dca58 --- /dev/null +++ b/src/assets/icons/plus.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/assets/icons/repeat.svg b/src/assets/icons/repeat.svg new file mode 100644 index 0000000..6b91482 --- /dev/null +++ b/src/assets/icons/repeat.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/icons/shuffle.svg b/src/assets/icons/shuffle.svg new file mode 100644 index 0000000..0991473 --- /dev/null +++ b/src/assets/icons/shuffle.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/components/FolderView/SongList.vue b/src/components/FolderView/SongList.vue index 57bc91e..ecf7c10 100644 --- a/src/components/FolderView/SongList.vue +++ b/src/components/FolderView/SongList.vue @@ -14,7 +14,10 @@
item._id.$oid === song._id.$oid - ); - - if (index == perks.queue.value.length - 1) { - perks.next.value = perks.queue.value[0]; - } else { - perks.next.value = perks.queue.value[index + 1]; - } - - localStorage.setItem( - "next", - JSON.stringify(perks.queue.value[index + 1]) - ); - }; const resizeSongTitleWidth = () => { try { let a = songtitle.value.clientWidth; - + songTitleWidth.value = a > minWidth.value * 4 ? a / 4 : a / 3; } catch (error) { return; @@ -123,6 +110,8 @@ export default { }); }); + const playAudio = audio.playAudio; + return { songtitle, songTitleWidth, @@ -147,25 +136,6 @@ export default { } } -.folder .table table { - border-collapse: collapse; - text-transform: capitalize; - position: relative; - margin: 1rem; - - tbody tr { - cursor: pointer; - transition: all 0.5s ease; - - &:hover { - td { - background-color: rgba(255, 174, 0, 0.534); - } - transform: scale(0.99); - } - } -} - .folder .table table td .album-art { width: 3rem; height: 3rem; @@ -187,6 +157,8 @@ td, th { padding: 8px; text-align: left; + outline: none; + border: none; } th { @@ -210,4 +182,23 @@ td .artist { font-weight: lighter; margin-right: 0.5rem; } + +.folder .table table { + border-collapse: collapse; + text-transform: capitalize; + position: relative; + margin: 1rem; + + tbody tr { + cursor: pointer; + transition: all 0.5s ease; + + &:hover { + & { + background-color: rgba(255, 174, 0, 0.534); + } + transform: scale(0.99); + } + } +} \ No newline at end of file diff --git a/src/components/RightSideBar/NowPlaying.vue b/src/components/RightSideBar/NowPlaying.vue index a744f93..5a18dfe 100644 --- a/src/components/RightSideBar/NowPlaying.vue +++ b/src/components/RightSideBar/NowPlaying.vue @@ -17,10 +17,23 @@
+
+ +
- -
- +
+
+
+
+
+ +
+ +
+
+
+
+
@@ -28,87 +41,191 @@ - \ No newline at end of file diff --git a/src/components/RightSideBar/UpNext.vue b/src/components/RightSideBar/UpNext.vue index 4b9fd37..74460d6 100644 --- a/src/components/RightSideBar/UpNext.vue +++ b/src/components/RightSideBar/UpNext.vue @@ -3,7 +3,7 @@

COMING UP NEXT SEE ALL

-
+
-
+
{ emit("expandQueue"); }; + const { playNext } = audio; + const {playAudio} = audio; + + const playThis = (song) => { + playAudio(song.filepath); + perks.current.value = song; + } + + const queue = ref(perks.queue); + const next = ref(perks.next); + const putCommas = perks.putCommas; - return { collapse, is_expanded, putCommas, queue, next }; + return { collapse, is_expanded, playNext, playThis, putCommas, queue, next }; }, }; diff --git a/src/composables/perks.js b/src/composables/perks.js index 59d6340..53219be 100644 --- a/src/composables/perks.js +++ b/src/composables/perks.js @@ -1,23 +1,38 @@ import { ref } from "@vue/reactivity"; +import { watch } from "@vue/runtime-core"; const current = ref({ - title: "Nothing played yet", - artists: ["... blah blah blah"], + title: "Nothing played yet", + artists: ["... blah blah blah"], + _id: { + $oid: "", + }, }); const next = ref({ - title: "Next song shows here", - artists: ["... blah blah blah"], + title: "The next song", + artists: ["... blah blah blah"], + _id: { + $oid: "", + }, +}); + +const prev = ref({ + title: "The previous song", + artists: ["... blah blah blah"], + _id: { + $oid: "", + }, }); const queue = ref([ - { - title: "Nothing played yet", - artists: ["... blah blah blah"], - _id: { - $oid: "" - } - } + { + title: "Nothing played yet", + artists: ["... blah blah blah"], + _id: { + $oid: "", + }, + }, ]); const putCommas = (artists) => { @@ -42,21 +57,40 @@ const doThat = (songs, current) => { }; const readQueue = () => { - const prev_queue = JSON.parse(localStorage.getItem("queue")); - const last_played = JSON.parse(localStorage.getItem("current")); - const next_ = JSON.parse(localStorage.getItem("next")); + const prev_queue = JSON.parse(localStorage.getItem("queue")); + const last_played = JSON.parse(localStorage.getItem("current")); + const next_ = JSON.parse(localStorage.getItem("next")); - if (last_played){ - current.value = last_played; - } + if (last_played) { + current.value = last_played; + } - if (prev_queue){ - queue.value = prev_queue; - } + if (prev_queue) { + queue.value = prev_queue; + } - if (next_){ - next.value = next_; - } -} + if (next_) { + next.value = next_; + } +}; -export default { putCommas, doThat, readQueue, current, queue, next }; +watch(current, (new_current) => { + localStorage.setItem("current", JSON.stringify(new_current)); + + const index = queue.value.findIndex( + (item) => item._id.$oid === new_current._id.$oid + ); + + if (index == queue.value.length - 1) { + next.value = queue.value[0]; + prev.value = queue.value[queue.value.length - 2]; + } else if (index == 0) { + next.value = queue.value[1]; + prev.value = queue.value[queue.value.length - 1]; + } else { + next.value = queue.value[index + 1]; + prev.value = queue.value[index - 1]; + } +}); + +export default { putCommas, doThat, readQueue, current, queue, next, prev }; diff --git a/src/composables/playAudio.js b/src/composables/playAudio.js index 663d885..587fb66 100644 --- a/src/composables/playAudio.js +++ b/src/composables/playAudio.js @@ -1,14 +1,44 @@ import { ref } from "@vue/reactivity"; +import perks from "./perks"; + const audio = ref(new Audio()).value; +const pos = ref(0); + +const url = "http://127.0.0.1:8901/"; const playAudio = (path) => { - const full_path = "http://127.0.0.1:8901/" + encodeURIComponent(path); + const full_path = url + encodeURIComponent(path); audio.src = full_path; - audio.addEventListener("canplaythrough", () => { - audio.play(); + + audio.play(); + + audio.ontimeupdate = () => { + pos.value = audio.currentTime / audio.duration * 100; + } + + audio.addEventListener("ended", () => { + playNext(); }); }; -export { playAudio }; +function playNext() { + playAudio(perks.next.value.filepath); + perks.current.value = perks.next.value; +} + +function playPrev() { + playAudio(perks.prev.value.filepath); + perks.current.value = perks.prev.value; +} + +function playPause() { + if (audio.paused) { + audio.play(); + } else { + audio.pause(); + } +} + +export default { playAudio, playNext, playPrev, playPause, pos }; diff --git a/src/router/index.js b/src/router/index.js index 98f6a8f..1b9f6ea 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -19,6 +19,10 @@ const routes = [ name: "FolderView", component: FolderView, }, + { + path: "/folder/", + redirect: "/folder/home", + }, { path: "/playlist", name: "PlaylistView",