fix: prod build

resources/assets/js/components/layout/app-footer/FooterMiddlePane.vue

@@ -2,10 +2,10 @@
   <div class="middle-pane" data-testid="footer-middle-pane">
     <div id="progressPane" class="progress">
       <template v-if="song">
-        <h3 class="title">{{ song.title }}</h3>
+        <h3 class="title">{{ song?.title }}</h3>
         <p class="meta">
-          <a :href="`/#!/artist/${song.artist.id}`" class="artist">{{ song.artist.name }}</a> –
-          <a :href="`/#!/album/${song.album.id}`" class="album">{{ song.album.name }}</a>
+          <a :href="`/#!/artist/${song?.artist.id}`" class="artist">{{ song?.artist.name }}</a> –
+          <a :href="`/#!/album/${song?.album.id}`" class="album">{{ song?.album.name }}</a>
         </p>
       </template>
 

resources/assets/js/components/playlist/PlaylistSidebarItem.vue

@@ -5,13 +5,17 @@
     @dblclick.prevent="makeEditable"
   >
     <a
-      v-koel-droppable:[contentEditable]="handleDrop"
+      v-if="contentEditable"
+      v-koel-droppable="handleDrop"
       :class="{ active }"
       :href="url"
       @contextmenu.prevent="openContextMenu"
     >
       {{ playlist.name }}
     </a>
+    <a v-else :class="{ active }" :href="url" @contextmenu.prevent="openContextMenu">
+      {{ playlist.name }}
+    </a>
 
     <NameEditor
       v-if="nameEditable && editing"

resources/assets/js/directives/droppable.ts

@@ -3,12 +3,6 @@ import { $ } from '@/utils'
 
 export const droppable: Directive = {
   created: (el: HTMLElement, binding) => {
-    const acceptsDrops = binding.arg === undefined || Boolean(binding.arg)
-
-    if (!acceptsDrops) {
-      return
-    }
-
     el.addEventListener('dragenter', (event: DragEvent) => {
       event.preventDefault()
       $.addClass(el, 'droppable')