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);