Delete remote playlists

+ minor ui changes

src/assets/version.json

@@ -1,3 +1,3 @@
 {
-  "date": "2023-03-27"
+  "date": "2023-04-16"
 }

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);
+  }
+}
 </style>

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;
+  }
+}
 </style>

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"></button>
 
             <button
-              v-if="results.items?.songs?.title.startsWith('Local • ')"
+              v-if="results.items?.songs?.items?.[0]?.playlistId"
               class="bi bi-trash3 clickable"
               @click="
-                useRemovePlaylist(
-                  results.items?.songs?.title?.replace('Local • ', ''),
-                )
+                removePlaylist(results.items?.songs?.items?.[0]?.playlistId)
               "></button>
           </div>
         </Transition>

src/components/SongItem.vue

@@ -105,9 +105,9 @@ onMounted(() => {
     <span class="flex content">
       <h4>{{ title }}</h4>
       <a
+        class="ign"
         :href="channel"
-        @click.prevent="artist.getArtist(channel.replace('/channel/', ''))"
-        class="ign">
+        @click.prevent="artist.getArtist(channel.replace('/channel/', ''))">
         <i class="ign">{{ author ? author.replaceAll(' - Topic', '') : '' }}</i>
       </a>
     </span>

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,

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(),

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

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