diff --git a/src/assets/scss/_variables.scss b/src/assets/scss/_variables.scss index d8a7f4a3..aaa19b8a 100644 --- a/src/assets/scss/_variables.scss +++ b/src/assets/scss/_variables.scss @@ -1,6 +1,5 @@ // colors -$body: #202124; $separator: #ffffff2f; $highlight-blue: #006eff; $darkestblue: #234ece; @@ -26,6 +25,7 @@ $gray2: rgb(99, 99, 102); $gray3: rgb(72, 72, 74); $gray4: rgb(58, 58, 60); $gray5: rgb(44, 44, 46); +$body: $gray; $red: #ff453a; $blue: #0a84ff; @@ -44,7 +44,7 @@ $accent: $gray1; $secondary: $gray5; $danger: $red; $track-hover: $gray4; -$context: $gray; +$context: black; $playlist-card-bg: #46474C; // SVG COLORS diff --git a/src/components/FolderView/FolderItem.vue b/src/components/FolderView/FolderItem.vue index 141db6f1..547ff2fb 100644 --- a/src/components/FolderView/FolderItem.vue +++ b/src/components/FolderView/FolderItem.vue @@ -46,7 +46,7 @@ defineProps<{ .info { .f-item-count { font-size: 0.8rem; - color: rgba(219, 217, 217, 0.63); + color: rgb(219, 217, 217); } .f-item-text { diff --git a/src/components/RightSideBar/SearchInput.vue b/src/components/RightSideBar/SearchInput.vue index ee658db4..e2a31943 100644 --- a/src/components/RightSideBar/SearchInput.vue +++ b/src/components/RightSideBar/SearchInput.vue @@ -15,12 +15,15 @@ diff --git a/src/config.ts b/src/config.ts index b6c6292e..0737c294 100644 --- a/src/config.ts +++ b/src/config.ts @@ -1,9 +1,12 @@ +const baseImgUrl = "http://0.0.0.0:1971" + const paths = { api: "", images: { - thumb: "http://0.0.0.0:1971/t/", - artist: "http://0.0.0.0:1971/a/", - playlist: "http://0.0.0.0:1971/p/" + thumb: `${baseImgUrl}/t/`, + artist: `${baseImgUrl}/a/`, + playlist: `${baseImgUrl}/p/`, + raw: `${baseImgUrl}/raw/` }, }; diff --git a/src/stores/pages/folder.ts b/src/stores/pages/folder.ts index f093b543..a432f946 100644 --- a/src/stores/pages/folder.ts +++ b/src/stores/pages/folder.ts @@ -19,6 +19,7 @@ export default defineStore("FolderDirs&Tracks", { const { tracks, folders } = await fetchThem(path); [this.path, this.allDirs, this.allTracks] = [path, folders, tracks]; + }, resetQuery() { this.query = ""; diff --git a/src/stores/queue.ts b/src/stores/queue.ts index 98783d56..0617e5bd 100644 --- a/src/stores/queue.ts +++ b/src/stores/queue.ts @@ -76,20 +76,27 @@ export default defineStore("Queue", { if (this.currentindex !== this.tracklist.length - 1) { setTimeout(() => { + if (!this.playing) return; this.playNext(); - }, 1000); + }, 5000); } }); }, playPause() { if (audio.src === "") { this.play(this.currentindex); - } else if (audio.paused) { + } + + if (audio.paused) { audio.play(); - this.playing = true; } else { audio.pause(); + } + + if (this.playing) { this.playing = false; + } else { + this.playing = true; } }, playNext() { diff --git a/src/stores/queue/actions.ts b/src/stores/queue/actions.ts deleted file mode 100644 index 55d12e9e..00000000 --- a/src/stores/queue/actions.ts +++ /dev/null @@ -1,16 +0,0 @@ -export function handlePlayPause( - currentIndex: number, - audio: HTMLAudioElement, - state: boolean, - play: (index: number) => void -) { - if (audio.src === "") { - play(currentIndex); - } else if (audio.paused) { - audio.play(); - state = true; - } else { - audio.pause(); - state = false; - } -} diff --git a/src/views/FolderView.vue b/src/views/FolderView.vue index 57b67f88..b0867b9d 100644 --- a/src/views/FolderView.vue +++ b/src/views/FolderView.vue @@ -1,17 +1,6 @@ - - - {{ getFolderName($route) }} - - - (null); -function getFolderName(route: RouteLocationNormalized) { - const path = route.params.path as string; - return path.split("/").pop(); -} - function playFromPage(index: number) { queue.playFromFolder(folder.path, folder.allTracks); queue.play(index); @@ -78,64 +59,10 @@ onBeforeRouteLeave(() => { #f-view-parent { position: relative; overflow: hidden; - - .h { - font-size: 2rem; - font-weight: bold; - } } #scrollable { - scrollbar-color: grey transparent; - display: flex; - flex-direction: column; + display: grid; gap: 1rem; - - .banner { - position: relative; - height: max-content; - height: $banner-height; - pointer-events: none; - user-select: none; - width: 100%; - background-color: $accent; - - .text { - bottom: 1rem; - left: 1rem; - width: max-content; - max-width: calc(100% - 2rem); - background-color: $black; - - @include for-desktop-down { - right: 1rem; - } - - h3 { - margin: $small; - display: grid; - grid-template-columns: max-content 1fr; - align-items: center; - justify-content: center; - gap: $small; - } - } - - img { - height: 100%; - width: 100%; - object-fit: cover; - object-position: bottom right; - transition: all 0.25s ease; - } - } - - @include phone-only { - padding-right: 0; - - &::-webkit-scrollbar { - display: none; - } - } }