From 521c195570201d9d24aba19f30532b6a0111ef5b Mon Sep 17 00:00:00 2001 From: geoffrey45 Date: Tue, 11 Jan 2022 01:36:04 +0300 Subject: [PATCH] client: move table items to a independent component --- server/app/api.py | 2 - src/components/FolderView/FolderList.vue | 2 +- src/components/FolderView/SongList.vue | 101 +++++---------------- src/components/RightSideBar/NowPlaying.vue | 2 +- src/components/RightSideBar/UpNext.vue | 4 +- src/components/SongItem.vue | 79 ++++++++++++++++ src/composables/perks.js | 43 ++++++--- src/composables/playAudio.js | 4 +- 8 files changed, 138 insertions(+), 99 deletions(-) create mode 100644 src/components/SongItem.vue diff --git a/server/app/api.py b/server/app/api.py index ff12b8b..d1e8aa5 100644 --- a/server/app/api.py +++ b/server/app/api.py @@ -272,7 +272,6 @@ def getArtistData(artist: str): @cache.cached() def getFolderTree(folder: str = None): req_dir = folder.replace('|', '/') - print(folder) if folder == "home": req_dir = home_dir @@ -316,7 +315,6 @@ def getFolderTree(folder: str = None): except: pass - print(song['image']) song['image'] = img_path + song['image'] return {"files": remove_duplicates(songs), "folders": sorted(folders, key=lambda i: i['name'])} diff --git a/src/components/FolderView/FolderList.vue b/src/components/FolderView/FolderList.vue index fb28c48..d692db6 100644 --- a/src/components/FolderView/FolderList.vue +++ b/src/components/FolderView/FolderList.vue @@ -52,7 +52,7 @@ export default { background-image: url(../../assets/icons/folder.svg); background-repeat: no-repeat; background-position: 1rem; - background-size: 10% 100%; + background-size: 1.5rem; background-color: rgb(22, 36, 85); transition: all 0.2s ease; diff --git a/src/components/FolderView/SongList.vue b/src/components/FolderView/SongList.vue index 315682e..e7c0205 100644 --- a/src/components/FolderView/SongList.vue +++ b/src/components/FolderView/SongList.vue @@ -11,62 +11,17 @@ - - -
-
-
-
- {{ song.title }} -
- - -
- {{ artist }} -
-
- {{ song.album_artist }} -
- - - {{ song.album }} - - - {{ `${Math.trunc(song.length / 60)} min` }} - - + @updateQueue="updateQueue" + /> @@ -84,30 +39,21 @@ import { computed, ref, toRefs } from "@vue/reactivity"; import { onMounted, onUnmounted } from "@vue/runtime-core"; -import audio from "@/composables/playAudio.js"; +import SongItem from "../SongItem.vue"; import perks from "@/composables/perks.js"; import state from "@/composables/state.js"; export default { props: ["songs"], + components: { + SongItem, + }, setup(props) { const song_list = toRefs(props).songs; const songtitle = ref(null); const songTitleWidth = ref(null); const minWidth = ref(300); - const putCommas = perks.putCommas; - - const updateQueue = async (song) => { - if (state.queue.value[0]._id.$oid !== song_list.value[0]._id.$oid) { - const new_queue = song_list.value; - localStorage.setItem("queue", JSON.stringify(new_queue)); - state.queue.value = new_queue; - } - - state.current.value = song; - localStorage.setItem("current", JSON.stringify(song)); - }; const resizeSongTitleWidth = () => { try { @@ -133,21 +79,26 @@ export default { }); }); - const playAudio = audio.playAudio; const current = ref(perks.current); const search_query = ref(state.search_query); - function doNothing(e) { - e.preventDefault(); - e.stopImmediatePropagation(); - console.log('mwathani') - } + const updateQueue = async (song) => { + if (state.queue.value[0]._id.$oid !== song_list.value[0]._id.$oid) { + const new_queue = song_list.value; + localStorage.setItem("queue", JSON.stringify(new_queue)); + state.queue.value = new_queue; + } + + state.current.value = song; + localStorage.setItem("current", JSON.stringify(song)); + }; const searchSongs = computed(() => { const songs = []; if (search_query.value.length > 2) { state.loading.value = true; + for (let i = 0; i < song_list.value.length; i++) { if ( song_list.value[i].title @@ -168,16 +119,12 @@ export default { return { searchSongs, - doNothing, + updateQueue, songtitle, songTitleWidth, minWidth, - playAudio, - updateQueue, - putCommas, current, search_query, - is_playing: state.is_playing, }; }, }; diff --git a/src/components/RightSideBar/NowPlaying.vue b/src/components/RightSideBar/NowPlaying.vue index f796a94..048bc10 100644 --- a/src/components/RightSideBar/NowPlaying.vue +++ b/src/components/RightSideBar/NowPlaying.vue @@ -10,7 +10,7 @@

{{ current.title }}

-
+
{{ artist }} diff --git a/src/components/RightSideBar/UpNext.vue b/src/components/RightSideBar/UpNext.vue index 1ca40af..aff5a6c 100644 --- a/src/components/RightSideBar/UpNext.vue +++ b/src/components/RightSideBar/UpNext.vue @@ -11,9 +11,9 @@ }" >
-

{{ next.title }}

+

{{ next.title }}

-

+

{{ artist }} diff --git a/src/components/SongItem.vue b/src/components/SongItem.vue new file mode 100644 index 0000000..b87bee5 --- /dev/null +++ b/src/components/SongItem.vue @@ -0,0 +1,79 @@ + + + + + \ No newline at end of file diff --git a/src/composables/perks.js b/src/composables/perks.js index 33b0ae4..8278dda 100644 --- a/src/composables/perks.js +++ b/src/composables/perks.js @@ -92,23 +92,35 @@ function focusCurrent() { } } +function getElem(identifier, type){ + switch(type){ + case "class": { + return document.getElementsByClassName(identifier)[0] + } + case "id": { + return document.getElementById(identifier) + } + } +} + +function focusSearchBox() { + const elem = getElem('search', 'id') + + elem.focus() +} + setTimeout(() => { watch(current, (new_current) => { media.showMediaNotif(); - new Promise((resolve) => { - updateNext(new_current); - updatePrev(new_current); - resolve(); - }).then(() => { - focusCurrent(); - }); + updateNext(new_current); + updatePrev(new_current); localStorage.setItem("current", JSON.stringify(new_current)); }); }, 1000); -var key_down_fired = false; +let key_down_fired = false; window.addEventListener("keydown", (e) => { let target = e.target; @@ -123,7 +135,7 @@ window.addEventListener("keydown", (e) => { setTimeout(() => { key_down_fired = false; }, 1000); - + playAudio.playNext(); } } @@ -134,11 +146,12 @@ window.addEventListener("keydown", (e) => { if (!key_down_fired) { key_down_fired = true; + playAudio.playPrev(); + setTimeout(() => { key_down_fired = false; }, 1000); - playAudio.playPrev(); } } @@ -148,6 +161,7 @@ window.addEventListener("keydown", (e) => { { if (!key_down_fired) { if (target.tagName == "INPUT") return; + e.preventDefault(); key_down_fired = true; playAudio.playPause(); @@ -159,18 +173,17 @@ window.addEventListener("keydown", (e) => { case "f": { if (!key_down_fired) { if (!ctrlKey) return; + e.preventDefault(); + focusSearchBox() - console.log("ctrl + f pressed"); key_down_fired = true; } } } }); -window.addEventListener("keyup", (e) => { - if (e.code == "Space") { - key_down_fired = false; - } +window.addEventListener("keyup", () => { + key_down_fired = false; }); export default { diff --git a/src/composables/playAudio.js b/src/composables/playAudio.js index c9efb3e..8b3de2f 100644 --- a/src/composables/playAudio.js +++ b/src/composables/playAudio.js @@ -20,6 +20,8 @@ const playAudio = (path) => { }) .then(() => { audio.play(); + perks.focusCurrent() + state.is_playing.value = true; audio.ontimeupdate = () => { @@ -41,7 +43,6 @@ function playPrev() { } function seek(pos) { - console.log(pos); audio.currentTime = (pos / 1000) * audio.duration; } @@ -68,4 +69,5 @@ audio.addEventListener("pause", () => { audio.addEventListener("ended", () => { playNext(); }); + export default { playAudio, playNext, playPrev, playPause, seek, pos, playing };