fix: try to make sure there is always a cover

Author: sifferhans

components/TileItem.vue

@@ -46,7 +46,11 @@ async function shufflePodcast() {
       :to="parseLink(item.showAllLink)"
       class="aspect-square w-[120px] overflow-clip rounded-2xl bg-background-1 lg:w-1/2 lg:rounded-none"
     >
-      <CoverImage :src="item.coverUrl" :alt="item.title" no-border />
+      <CoverImage
+        :src="item.coverUrl ?? coverForTrack(item.track)"
+        :alt="item.title"
+        no-border
+      />
     </NuxtLink>
     <div
       class="flex grow cursor-pointer flex-col gap-0.5 rounded-r-2xl p-0 text-black-1 lg:w-1/2 lg:p-4"

components/media-player/MediaPlayerClosed.vue

@@ -27,7 +27,7 @@ const onPointerDownProgressBar = () => {
   <div class="flex h-full w-full items-start p-3">
     <div class="flex min-w-0 flex-1 gap-4">
       <CoverImage
-        :src="currentTrack?.meta?.attachedPicture"
+        :src="coverForTrack(currentTrack)"
         class="h-[48px] rounded-md"
         :style="`view-transition-name: player-cover-${currentTrack?.id}`"
       />

components/media-player/MediaPlayerOpen.vue

@@ -46,6 +46,8 @@ useDraggable(queueListElement, queue, {
     queue.value.moveTrack(oldIndex, newIndex);
   },
 });
+
+const trackCover = computed(() => coverForTrack(currentTrack.value));
 </script>
 
 <template>
@@ -56,16 +58,16 @@ useDraggable(queueListElement, queue, {
       >
         <div class="relative z-10 hidden overflow-hidden tall:block">
           <CoverImage
-            :src="currentTrack?.meta?.attachedPicture"
+            :src="trackCover"
             class="w-20 rounded-md x-tall:w-40"
             :style="`view-transition-name: player-cover-${currentTrack?.id}`"
           />
         </div>
 
         <!-- translate3d is needed to fix flickering in Safari: https://graffino.com/til/how-to-fix-filter-blur-performance-issue-in-safari -->
         <ProtectedImage
-          v-if="currentTrack?.meta?.attachedPicture"
-          :src="currentTrack?.meta?.attachedPicture"
+          v-if="trackCover"
+          :src="trackCover"
           class="absolute z-0 w-[160px] blur-[80px]"
           style="transform: translate3d(0, 0, 0)"
           no-border

components/track/TrackDetails.vue

@@ -79,7 +79,7 @@ const extractFields = (track: TrackModel) => {
 
 <template>
   <div class="relative flex items-center justify-normal gap-4" v-bind="$attrs">
-    <CoverImage :src="track.meta?.attachedPicture" class="w-24 rounded-md" />
+    <CoverImage :src="coverForTrack(track)" class="w-24 rounded-md" />
     <div>
       <h3 class="py-1 text-2xl font-extrabold text-label-1">
         {{ track.title }}

components/track/TrackItem.vue

@@ -115,10 +115,7 @@ const selectedTrack: Ref<TrackModel | null> = ref(null);
     <div class="relative col-span-full grid grid-cols-subgrid">
       <div v-if="showThumbnail" class="hidden flex-col justify-center lg:flex">
         <div class="relative aspect-square w-10">
-          <CoverImage
-            :src="track.meta?.attachedPicture"
-            class="w-10 rounded-md"
-          />
+          <CoverImage :src="coverForTrack(track)" class="w-10 rounded-md" />
           <div
             v-if="!isPlaying"
             class="absolute inset-0 w-10 opacity-0 group-hover:opacity-100"

utils/tracks.ts

@@ -20,3 +20,14 @@ export function defaultFileForTrack(
 export function trackIsSong(track: TrackModel): boolean {
   return track.subtype === "song" || track.subtype === "singsong";
 }
+
+export function coverForTrack(
+  track: TrackModel | undefined,
+): string | null | undefined {
+  return (
+    track?.cover ??
+    track?.meta.attachedPicture ??
+    track?.meta.parent?.cover ??
+    track?.meta.rootParent?.cover
+  );
+}