Add fallback to generic album cover for tracks with no album

changes/changelog.d/1703.bugfix

@@ -0,0 +1 @@
+Fixed an issue where you couldn't load the details page for tracks with no associated album (#1703)

front/src/components/library/TrackDetail.vue

@@ -6,16 +6,34 @@
 					<template v-if="upload">
 						<img
 							v-if="track.cover && track.cover.urls.large_square_crop"
-              v-lazy="$store.getters['instance/absoluteUrl'](track.cover.urls.large_square_crop)"
+							v-lazy="
+								$store.getters['instance/absoluteUrl'](
+									track.cover.urls.large_square_crop
+								)
+							"
 							alt="Cover Image"
 							class="ui fluid image track-cover-image"
-            >
+						/>
 						<img
-              v-else-if="track.album.cover && track.album.cover.urls.large_square_crop"
+							v-else-if="
-              v-lazy="$store.getters['instance/absoluteUrl'](track.album.cover.urls.large_square_crop)"
+								track.album &&
+								track.album.cover &&
+								track.album.cover.urls.large_square_crop
+							"
+							v-lazy="
+								$store.getters['instance/absoluteUrl'](
+									track.album.cover.urls.large_square_crop
+								)
+							"
 							alt="Cover Image"
 							class="ui fluid image track-cover-image"
-            >
+						/>
+						<img
+							v-else
+							src="../../assets/embed/default-cover.jpeg"
+							alt="Cover Image"
+							class="ui fluid image track-cover-image"
+						/>
 						<h3 class="ui header">
 							<translate
 								v-if="track.artist.content_category === 'music'"
@@ -24,11 +42,7 @@
 							>
 								Track Details
 							</translate>
-              <translate
+							<translate v-else key="2" translate-context="Content/*/*">
-                v-else
-                key="2"
-                translate-context="Content/*/*"
-              >
 								Episode Details
 							</translate>
 						</h3>
@@ -44,10 +58,7 @@
 										<template v-if="upload.duration">
 											{{ upload.duration | duration }}
 										</template>
-                    <translate
+										<translate v-else translate-context="*/*/*">
-                      v-else
-                      translate-context="*/*/*"
-                    >
 											N/A
 										</translate>
 									</td>
@@ -62,10 +73,7 @@
 										<template v-if="upload.size">
 											{{ upload.size | humanSize }}
 										</template>
-                    <translate
+										<translate v-else translate-context="*/*/*">
-                      v-else
-                      translate-context="*/*/*"
-                    >
 											N/A
 										</translate>
 									</td>
@@ -80,10 +88,7 @@
 										<template v-if="upload.extension">
 											{{ upload.extension }}
 										</template>
-                    <translate
+										<translate v-else translate-context="*/*/*">
-                      v-else
-                      translate-context="*/*/*"
-                    >
 											N/A
 										</translate>
 									</td>
@@ -98,10 +103,7 @@
 										<template v-if="upload.bitrate">
 											{{ upload.bitrate | humanSize }}/s
 										</template>
-                    <translate
+										<translate v-else translate-context="*/*/*">
-                      v-else
-                      translate-context="*/*/*"
-                    >
 											N/A
 										</translate>
 									</td>
@@ -139,12 +141,15 @@
 						<tbody>
 							<tr>
 								<td>
-                  <translate translate-context="*/*/*/Noun">
+									<translate translate-context="*/*/*/Noun"> Artist </translate>
-                    Artist
-                  </translate>
 								</td>
 								<td class="right aligned">
-                  <router-link :to="{name: 'library.artists.detail', params: {id: track.artist.id}}">
+									<router-link
+										:to="{
+											name: 'library.artists.detail',
+											params: { id: track.artist.id },
+										}"
+									>
 										{{ track.artist.name }}
 									</router-link>
 								</td>
@@ -158,34 +163,31 @@
 									>
 										Album
 									</translate>
-                  <translate
+									<translate v-else key="2" translate-context="*/*/*">
-                    v-else
-                    key="2"
-                    translate-context="*/*/*"
-                  >
 										Serie
 									</translate>
 								</td>
 								<td class="right aligned">
-                  <router-link :to="{name: 'library.albums.detail', params: {id: track.album.id}}">
+									<router-link
+										:to="{
+											name: 'library.albums.detail',
+											params: { id: track.album.id },
+										}"
+									>
 										{{ track.album.title }}
 									</router-link>
 								</td>
 							</tr>
 							<tr>
 								<td>
-                  <translate translate-context="*/*/*">
+									<translate translate-context="*/*/*"> Year </translate>
-                    Year
-                  </translate>
 								</td>
 								<td class="right aligned">
 									<template v-if="track.album && track.album.release_date">
-                    {{ track.album.release_date | moment('Y') }}
+										{{ track.album.release_date | moment("Y") }}
 									</template>
 									<template v-else>
-                    <translate translate-context="*/*/*">
+										<translate translate-context="*/*/*"> N/A </translate>
-                      N/A
-                    </translate>
 									</template>
 								</td>
 							</tr>
@@ -196,14 +198,11 @@
 									</translate>
 								</td>
 								<td class="right aligned">
-                  <span
+									<span v-if="track.copyright" :title="track.copyright">{{
-                    v-if="track.copyright"
+										track.copyright | truncate(50)
-                    :title="track.copyright"
+									}}</span>
-                  >{{ track.copyright|truncate(50) }}</span>
 									<template v-else>
-                    <translate translate-context="*/*/*">
+										<translate translate-context="*/*/*"> N/A </translate>
-                      N/A
-                    </translate>
 									</template>
 								</td>
 							</tr>
@@ -219,13 +218,9 @@
 										:href="license.url"
 										target="_blank"
 										rel="noopener noreferrer"
-                  >{{ license.name }}</a>
+										>{{ license.name }}</a
-                  <translate
-                    v-else
-                    translate-context="*/*/*"
 									>
-                    N/A
+									<translate v-else translate-context="*/*/*"> N/A </translate>
-                  </translate>
 								</td>
 							</tr>
 							<tr v-if="!track.is_local">
@@ -253,7 +248,9 @@
 						rel="noreferrer noopener"
 					>
 						<i class="external icon" />
-            <translate translate-context="Content/*/*/Clickable, Verb">View on MusicBrainz</translate>
+						<translate translate-context="Content/*/*/Clickable, Verb"
+							>View on MusicBrainz</translate
+						>
 					</a>
 					<h2 class="ui header">
 						<translate translate-context="Content/*/Title/Noun">
@@ -262,7 +259,11 @@
 					</h2>
 					<playlist-widget
 						:url="'playlists/'"
-            :filters="{track: track.id, playable: true, ordering: '-modification_date'}"
+						:filters="{
+							track: track.id,
+							playable: true,
+							ordering: '-modification_date',
+						}"
 					/>
 
 					<h2 class="ui header">
@@ -288,81 +289,81 @@
 </template>
 
 <script>
-import axios from 'axios'
+import axios from "axios";
-import LibraryWidget from '@/components/federation/LibraryWidget'
+import LibraryWidget from "@/components/federation/LibraryWidget";
-import TagsList from '@/components/tags/List'
+import TagsList from "@/components/tags/List";
-import PlaylistWidget from '@/components/playlists/Widget'
+import PlaylistWidget from "@/components/playlists/Widget";
 
 export default {
 	components: {
 		LibraryWidget,
 		TagsList,
-    PlaylistWidget
+		PlaylistWidget,
 	},
 	props: {
 		track: { type: Object, required: true },
-    libraries: { type: Array, default: null }
+		libraries: { type: Array, default: null },
 	},
 	data() {
 		return {
 			id: this.track.id,
-      licenseData: null
+			licenseData: null,
-    }
+		};
 	},
 	computed: {
 		labels() {
 			return {
-        title: this.$pgettext('*/*/*/Noun', 'Track')
+				title: this.$pgettext("*/*/*/Noun", "Track"),
-      }
+			};
 		},
 		musicbrainzUrl() {
 			if (this.track.mbid) {
-        return 'https://musicbrainz.org/recording/' + this.track.mbid
+				return "https://musicbrainz.org/recording/" + this.track.mbid;
 			}
-      return null
+			return null;
 		},
 		upload() {
 			if (this.track.uploads) {
-        return this.track.uploads[0]
+				return this.track.uploads[0];
 			}
-      return null
+			return null;
 		},
 		license() {
 			if (!this.track || !this.track.license) {
-        return null
+				return null;
 			}
-      return this.licenseData
+			return this.licenseData;
 		},
 		cover() {
 			if (this.track.cover && this.track.cover.urls.original) {
-        return this.track.cover
+				return this.track.cover;
 			}
 			if (this.track.album && this.track.album.cover) {
-        return this.track.album.cover
+				return this.track.album.cover;
-      }
-      return null
 			}
+			return null;
+		},
 	},
 	watch: {
 		track(v) {
 			if (v && v.license) {
-        this.fetchLicenseData(v.license)
+				this.fetchLicenseData(v.license);
-      }
 			}
 		},
+	},
 	created() {
 		if (this.track && this.track.license) {
-      this.fetchLicenseData(this.track.license)
+			this.fetchLicenseData(this.track.license);
 		}
 	},
 	methods: {
 		fetchLicenseData(licenseId) {
-      const self = this
+			const self = this;
-      const url = `licenses/${licenseId}`
+			const url = `licenses/${licenseId}`;
-      axios.get(url).then(response => {
+			axios.get(url).then((response) => {
-        self.licenseData = response.data
+				self.licenseData = response.data;
-      })
+			});
-    }
+		},
-  }
+	},
-}
+};
 </script>