add delete entry function. add more styling to playlist entries

src/App.vue

@@ -24,7 +24,7 @@ const adjustFooterPadding = computed(() => {
 
     <v-main class="h-100" :style="{ 'padding-bottom': adjustFooterPadding }">
       <play-list />
-      <!--      <audio-detail v-if="audioDetailPopup" :file="audioDetailPopup" />-->
+      <audio-detail v-if="audioDetailPopup" :file="audioDetailPopup" />
       <router-view />
     </v-main>
 
@@ -63,12 +63,4 @@ export default {
     min-height: calc(100vh - 56px) !important;
   }
 }
-
-//#main {
-//  position: absolute;
-//  top: 0;
-//  left: 0;
-//  bottom: 0;
-//  right: 0;
-//}
 </style>

src/components/pageLayout/AppHeader.vue

@@ -64,7 +64,7 @@ const links = [
 
 <template>
   <v-app-bar
-    v-if="route.name !== 'Home'"
+    v-if="route.name !== 'Home' || audioDetailPopup"
     class="px-4"
     height="56"
     :color="route.name !== 'Detail' ? 'ipfsPrimary-lighten-1' : 'toolbar-light'"
@@ -116,6 +116,7 @@ const links = [
               v-if="route.name === 'Detail' || audioDetailPopup"
               :to="{ name: 'Search', query: route.query }"
               replace
+              :disabled="audioDetailPopup"
             >
               <v-btn icon @click="showAudioDetail(undefined)">
                 <v-icon :icon="mdiClose" />
@@ -132,7 +133,13 @@ const links = [
     <v-container class="px-0">
       <v-row>
         <v-col cols="12" xl="8" offset-xl="2" class="d-flex justify-space-between align-center">
-          <div class="d-flex align-center" @click="playlistVisible = false">
+          <div
+            class="d-flex align-center"
+            @click="
+              playlistVisible = false;
+              audioDetailPopup = undefined;
+            "
+          >
             <v-img
               v-if="mdAndUp || !playlistVisible"
               alt="ipfs-search.com logo"

src/components/pageLayout/PlayList.vue

@@ -6,14 +6,15 @@ import {
   playlistVisible,
   startPlaylist,
   showAudioDetail,
-  audioDetailPopup,
+  removePlaylistEntry,
+  formatTime,
 } from "@/composables/audioControls";
-import { mdiCircleSmall, mdiPlay, mdiDisc } from "@mdi/js";
+import { mdiCircleSmall, mdiPlay, mdiDisc, mdiTrashCanOutline } from "@mdi/js";
 import { useDisplay } from "vuetify";
 const { smAndUp } = useDisplay();
 import { picsum } from "@/helpers/picsum";
 
-import { fileTitle, fileAuthor } from "@/helpers/fileHelper";
+import { fileTitle, fileAuthor, fileAlbum } from "@/helpers/fileHelper";
 
 const playlistEntries = computed(() => store.getters["playlist/getPlaylist"].entries);
 import BlinkBlink from "../shared/BlinkBlink.vue";
@@ -31,7 +32,7 @@ import VMarquee from "@/components/shared/VMarquee.vue";
       rounded="0"
       flat
     >
-      <v-list bg-color="planetifyDark" class="">
+      <v-list bg-color="planetifyDark" lines="2">
         <v-hover
           v-for="(entry, index) in playlistEntries"
           :key="index"
@@ -55,8 +56,8 @@ import VMarquee from "@/components/shared/VMarquee.vue";
                   bac
                   :src="
                     picsum({
-                      width: 75,
-                      height: 75,
+                      width: 85,
+                      height: 85,
                       seed: entry.hash,
                       grayscale: !!entry.audio?.error,
                     })
@@ -98,16 +99,26 @@ import VMarquee from "@/components/shared/VMarquee.vue";
                 </v-img>
               </v-list-item-avatar>
             </template>
-            <v-row>
-              <v-col :class="entry.audio?.error ? 'text-grey-darken-1' : ''">
-                <v-marquee :active="isHovering" speed="6">
-                  <v-list-item-title class="d-flex">
-                    <span v-sane-html="fileTitle(entry)" class="mx-1" />
-                    <v-icon :icon="mdiDisc" @click="showAudioDetail(entry)" />
-                  </v-list-item-title>
-                </v-marquee>
-              </v-col>
-            </v-row>
+            <template #append>
+              <div class="d-flex flex-row">
+                <v-icon :icon="mdiDisc" @click="showAudioDetail(entry)" />
+                <v-icon :icon="mdiTrashCanOutline" @click="removePlaylistEntry(index)" />
+              </div>
+            </template>
+            <div
+              :class="{ 'text-grey-darken-1': entry.audio?.error }"
+              class="mr-auto v-list-item-title"
+            >
+              <v-list-item-title>
+                <span v-sane-html="fileTitle(entry)" class="mx-1" />
+              </v-list-item-title>
+              <v-list-item-subtitle>
+                <span
+                  v-sane-html="[fileAuthor(entry), fileAlbum(entry)].filter((e) => !!e).join(' - ')"
+                  class="mx-1"
+                />
+              </v-list-item-subtitle>
+            </div>
           </v-list-item>
         </v-hover>
       </v-list>

src/components/shared/HyperLink.vue

@@ -9,11 +9,18 @@ defineProps({
     type: Boolean,
     default: false,
   },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
 });
 </script>
 
 <template>
-  <router-link :to="to" :replace="replace" style="text-decoration: none; color: inherit">
+  <div v-if="disabled">
+    <slot />
+  </div>
+  <router-link v-else :to="to" :replace="replace" style="text-decoration: none; color: inherit">
     <slot />
   </router-link>
 </template>

src/composables/audioControls.ts

@@ -182,15 +182,12 @@ export const setPlaylist = (entries: IFile[], autoPlay = true) => {
 export const enqueue = (entries: IFile[]) =>
   setPlaylist(store.getters["playlist/getPlaylist"].entries.concat(entries), false);
 
-export const clearPlaylist = () => {
-  store.commit("playlist/setPlaylist", { entries: [] });
-};
-
 let playlistIndex = 0;
 export const loop = ref(false);
 export const toggleLoop = () => {
   loop.value = !loop.value;
 };
+
 export const startPlaylist = async (index?: number) => {
   if (index !== undefined) playlistIndex = index;
   while (playlistIndex < store.getters["playlist/getPlaylist"].entries.length) {
@@ -200,23 +197,34 @@ export const startPlaylist = async (index?: number) => {
     playlistIndex++;
   }
 };
+
 export const previousPlaylistEntry = () => {
   if (playlistIndex === 0) {
     if (loop.value) return store.getters["playlist/getPlaylist"].entries.length - 1;
     return undefined;
   }
   return playlistIndex - 1;
 };
+
 export const playlistSkipPrevious = () => {
   startPlaylist(previousPlaylistEntry());
 };
+
 export const nextPlaylistEntry = () => {
   if (playlistIndex === store.getters["playlist/getPlaylist"].entries.length - 1) {
     if (loop.value) return 0;
     return undefined;
   }
   return playlistIndex + 1;
 };
+
+export const removePlaylistEntry = (index) => {
+  const list = store.getters["playlist/getPlaylist"].entries;
+  store.commit("playlist/setPlaylist", {
+    entries: [...list.slice(0, index), ...list.slice(index + 1)],
+  });
+};
+
 export const playlistSkipNext = () => {
   startPlaylist(nextPlaylistEntry());
 };

src/helpers/fileHelper.ts

@@ -62,3 +62,6 @@ export const fileTitle = (file: IFile): string => {
 export const fileAuthor = (file: IFile): string | undefined => {
   return file.metadata?.metadata?.["dc:creator"]?.[0] || file.author || undefined;
 };
+export const fileAlbum = (file: IFile): string | undefined => {
+  return file.metadata?.metadata?.["xmpDM:album"]?.[0];
+};