diff --git a/src/assets/version.json b/src/assets/version.json index 7c883ce..fccf8d6 100644 --- a/src/assets/version.json +++ b/src/assets/version.json @@ -1,3 +1,3 @@ { - "date": "2023-03-27" + "date": "2023-04-16" } diff --git a/src/components/Genres.vue b/src/components/Genres.vue index 2da26a8..16bdfcb 100644 --- a/src/components/Genres.vue +++ b/src/components/Genres.vue @@ -138,6 +138,7 @@ onMounted(get); font-size: 1rem; font-weight: bold; letter-spacing: 0.125rem; + line-break: anywhere; background-color: var(--color-background-mute); color: var(--btn-color); transition: background-color 0.1s ease; @@ -153,4 +154,9 @@ onMounted(get); text-align: center; text-transform: capitalize; } +@media (max-width: 600px) { + .btn-grid { + grid-template-columns: repeat(3, 1fr); + } +} diff --git a/src/components/NewPlaylist.vue b/src/components/NewPlaylist.vue index cd39e07..dc50370 100644 --- a/src/components/NewPlaylist.vue +++ b/src/components/NewPlaylist.vue @@ -473,7 +473,7 @@ onMounted(async () => { .grid { display: grid; width: fit-content; - gap: 2rem; + gap: 1rem; grid-auto-rows: 10rem; margin: 0 auto; } @@ -553,4 +553,9 @@ input[type='file']::file-selector-button { display: block; text-align: center; } +@media (min-width: 400px) { + .grid { + grid-template-columns: 1fr 1fr; + } +} diff --git a/src/components/Search.vue b/src/components/Search.vue index 184b124..98a10c3 100644 --- a/src/components/Search.vue +++ b/src/components/Search.vue @@ -5,8 +5,12 @@ import Btn from './Btn.vue'; import SongItem from './SongItem.vue'; import AlbumItem from './AlbumItem.vue'; -import { getJsonPiped, getPipedQuery } from '@/scripts/fetch.js'; -import { useRoute, useWrap, useShare } from '@/scripts/util.js'; +import { + getJsonPiped, + getPipedQuery, + useAuthRemovePlaylist, +} from '@/scripts/fetch.js'; +import { useVerifyAuth, useRoute, useWrap, useShare } from '@/scripts/util.js'; import { useCreatePlaylist, useRemovePlaylist } from '@/scripts/db.js'; import { useResults, useArtist } from '@/stores/results.js'; @@ -103,6 +107,20 @@ const shuffleAdd = () => { }); } }, + removePlaylist = async id => { + if (!id && !prompt('Confirm?')) return; + + if (useVerifyAuth(id)) { + const { message } = await useAuthRemovePlaylist(id); + if (message != 'ok') { + alert(message); + return; + } + } else useRemovePlaylist(id); + + useRoute('/library'); + nav.state.page = 'library'; + }, getSearch = q => { if (q) { const pq = useWrap(q); @@ -252,12 +270,10 @@ onDeactivated(() => { @click="shuffleAdd"> diff --git a/src/components/SongItem.vue b/src/components/SongItem.vue index baa1a9a..069ed4f 100644 --- a/src/components/SongItem.vue +++ b/src/components/SongItem.vue @@ -107,9 +107,9 @@ onMounted(() => {

{{ title }}

+ @click.prevent="artist.getArtist(channel.replace('/channel/', ''))"> {{ author ? author.replaceAll(' - Topic', '') : '' }}
diff --git a/src/components/StatusBar.vue b/src/components/StatusBar.vue index 4b0a7ad..efcf703 100644 --- a/src/components/StatusBar.vue +++ b/src/components/StatusBar.vue @@ -308,7 +308,7 @@ async function Like() { border-top: 0.25rem solid var(--color-foreground); background: var(--color-background); min-height: 15vh; - z-index: 2; + z-index: 999; } .statusbar-progress-container, diff --git a/src/scripts/fetch.js b/src/scripts/fetch.js index 901c834..7229530 100644 --- a/src/scripts/fetch.js +++ b/src/scripts/fetch.js @@ -107,6 +107,22 @@ export async function useAuthAddToPlaylist(id, path) { }); } +export async function useAuthRemovePlaylist(id) { + const auth = useAuthToken(); + + if (auth && id) { + return getJsonAuth('/user/playlists/delete', { + method: 'POST', + headers: { + Authorization: auth, + }, + body: JSON.stringify({ + playlistId: id, + }), + }); + } +} + export async function useAuthLogout() { const auth = useAuthToken(), ctrl = new AbortController(), diff --git a/src/scripts/util.js b/src/scripts/util.js index be7add9..1ebe818 100644 --- a/src/scripts/util.js +++ b/src/scripts/util.js @@ -6,6 +6,12 @@ export function useSanitize(txt) { }); } +export function useVerifyAuth(hash) { + return /[\da-fA-F]{8}-[\da-fA-F]{4}-[\da-fA-F]{4}-[\da-fA-F]{4}-[\da-fA-F]{12}/.test( + hash, + ); +} + export function useRoute(l) { history.pushState({}, '', l); } diff --git a/src/stores/results.js b/src/stores/results.js index 95e29f3..cf14582 100644 --- a/src/stores/results.js +++ b/src/stores/results.js @@ -4,7 +4,7 @@ import { defineStore } from 'pinia'; import { useNav } from '@/stores/misc.js'; import { getJsonPiped, getJsonHyp, getJsonAuth } from '@/scripts/fetch.js'; -import { useRoute } from '@/scripts/util.js'; +import { useVerifyAuth, useRoute } from '@/scripts/util.js'; export const useResults = defineStore('results', () => { const items = ref({}), @@ -39,10 +39,7 @@ export const useResults = defineStore('results', () => { async function getAlbum(e) { const hash = new URLSearchParams(e.substring(e.indexOf('?'))).get('list'), - isAuth = - /[\da-fA-F]{8}-[\da-fA-F]{4}-[\da-fA-F]{4}-[\da-fA-F]{4}-[\da-fA-F]{12}/.test( - hash, - ), + isAuth = useVerifyAuth(hash), path = '/playlists/' + hash, json = isAuth ? await getJsonAuth(path) : await getJsonPiped(path);