From 9b1865e43e0c2052bcab523f7c3a1cb9d2eb40d7 Mon Sep 17 00:00:00 2001
From: Ciaran Ainsworth <ciaranainsworth@outlook.com>
Date: Thu, 10 Feb 2022 13:22:58 +0100
Subject: [PATCH] Add fallback to generic album cover for tracks with no album

---
 changes/changelog.d/1703.bugfix              |   1 +
 front/src/components/library/TrackDetail.vue | 719 ++++++++++---------
 2 files changed, 361 insertions(+), 359 deletions(-)
 create mode 100644 changes/changelog.d/1703.bugfix

diff --git a/changes/changelog.d/1703.bugfix b/changes/changelog.d/1703.bugfix
new file mode 100644
index 000000000..673ea5c1a
--- /dev/null
+++ b/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)
diff --git a/front/src/components/library/TrackDetail.vue b/front/src/components/library/TrackDetail.vue
index 276edcba9..17d480a0f 100644
--- a/front/src/components/library/TrackDetail.vue
+++ b/front/src/components/library/TrackDetail.vue
@@ -1,368 +1,369 @@
 <template>
-  <div v-if="track">
-    <section class="ui vertical stripe segment">
-      <div class="ui stackable grid row container">
-        <div class="six wide column">
-          <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)"
-              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-lazy="$store.getters['instance/absoluteUrl'](track.album.cover.urls.large_square_crop)"
-              alt="Cover Image"
-              class="ui fluid image track-cover-image"
-            >
-            <h3 class="ui header">
-              <translate
-                v-if="track.artist.content_category === 'music'"
-                key="1"
-                translate-context="Content/*/*"
-              >
-                Track Details
-              </translate>
-              <translate
-                v-else
-                key="2"
-                translate-context="Content/*/*"
-              >
-                Episode Details
-              </translate>
-            </h3>
-            <table class="ui basic table">
-              <tbody>
-                <tr>
-                  <td>
-                    <translate translate-context="Content/*/*">
-                      Duration
-                    </translate>
-                  </td>
-                  <td class="right aligned">
-                    <template v-if="upload.duration">
-                      {{ upload.duration | duration }}
-                    </template>
-                    <translate
-                      v-else
-                      translate-context="*/*/*"
-                    >
-                      N/A
-                    </translate>
-                  </td>
-                </tr>
-                <tr>
-                  <td>
-                    <translate translate-context="Content/*/*/Noun">
-                      Size
-                    </translate>
-                  </td>
-                  <td class="right aligned">
-                    <template v-if="upload.size">
-                      {{ upload.size | humanSize }}
-                    </template>
-                    <translate
-                      v-else
-                      translate-context="*/*/*"
-                    >
-                      N/A
-                    </translate>
-                  </td>
-                </tr>
-                <tr>
-                  <td>
-                    <translate translate-context="Content/*/*/Noun">
-                      Codec
-                    </translate>
-                  </td>
-                  <td class="right aligned">
-                    <template v-if="upload.extension">
-                      {{ upload.extension }}
-                    </template>
-                    <translate
-                      v-else
-                      translate-context="*/*/*"
-                    >
-                      N/A
-                    </translate>
-                  </td>
-                </tr>
-                <tr>
-                  <td>
-                    <translate translate-context="Content/Track/*/Noun">
-                      Bitrate
-                    </translate>
-                  </td>
-                  <td class="right aligned">
-                    <template v-if="upload.bitrate">
-                      {{ upload.bitrate | humanSize }}/s
-                    </template>
-                    <translate
-                      v-else
-                      translate-context="*/*/*"
-                    >
-                      N/A
-                    </translate>
-                  </td>
-                </tr>
-                <tr>
-                  <td>
-                    <translate translate-context="Content/*/*">
-                      Downloads
-                    </translate>
-                  </td>
-                  <td class="right aligned">
-                    {{ track.downloads_count }}
-                  </td>
-                </tr>
-              </tbody>
-            </table>
-          </template>
-        </div>
-        <div class="ten wide column">
-          <template v-if="track.tags && track.tags.length > 0">
-            <tags-list :tags="track.tags" />
-            <div class="ui hidden divider" />
-          </template>
+	<div v-if="track">
+		<section class="ui vertical stripe segment">
+			<div class="ui stackable grid row container">
+				<div class="six wide column">
+					<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
+								)
+							"
+							alt="Cover Image"
+							class="ui fluid image track-cover-image"
+						/>
+						<img
+							v-else-if="
+								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'"
+								key="1"
+								translate-context="Content/*/*"
+							>
+								Track Details
+							</translate>
+							<translate v-else key="2" translate-context="Content/*/*">
+								Episode Details
+							</translate>
+						</h3>
+						<table class="ui basic table">
+							<tbody>
+								<tr>
+									<td>
+										<translate translate-context="Content/*/*">
+											Duration
+										</translate>
+									</td>
+									<td class="right aligned">
+										<template v-if="upload.duration">
+											{{ upload.duration | duration }}
+										</template>
+										<translate v-else translate-context="*/*/*">
+											N/A
+										</translate>
+									</td>
+								</tr>
+								<tr>
+									<td>
+										<translate translate-context="Content/*/*/Noun">
+											Size
+										</translate>
+									</td>
+									<td class="right aligned">
+										<template v-if="upload.size">
+											{{ upload.size | humanSize }}
+										</template>
+										<translate v-else translate-context="*/*/*">
+											N/A
+										</translate>
+									</td>
+								</tr>
+								<tr>
+									<td>
+										<translate translate-context="Content/*/*/Noun">
+											Codec
+										</translate>
+									</td>
+									<td class="right aligned">
+										<template v-if="upload.extension">
+											{{ upload.extension }}
+										</template>
+										<translate v-else translate-context="*/*/*">
+											N/A
+										</translate>
+									</td>
+								</tr>
+								<tr>
+									<td>
+										<translate translate-context="Content/Track/*/Noun">
+											Bitrate
+										</translate>
+									</td>
+									<td class="right aligned">
+										<template v-if="upload.bitrate">
+											{{ upload.bitrate | humanSize }}/s
+										</template>
+										<translate v-else translate-context="*/*/*">
+											N/A
+										</translate>
+									</td>
+								</tr>
+								<tr>
+									<td>
+										<translate translate-context="Content/*/*">
+											Downloads
+										</translate>
+									</td>
+									<td class="right aligned">
+										{{ track.downloads_count }}
+									</td>
+								</tr>
+							</tbody>
+						</table>
+					</template>
+				</div>
+				<div class="ten wide column">
+					<template v-if="track.tags && track.tags.length > 0">
+						<tags-list :tags="track.tags" />
+						<div class="ui hidden divider" />
+					</template>
 
-          <rendered-description
-            :content="track.description"
-            :can-update="false"
-          />
-          <h2 class="ui header">
-            <translate translate-context="Content/*/*">
-              Release Details
-            </translate>
-          </h2>
-          <table class="ui basic table ellipsis-rows">
-            <tbody>
-              <tr>
-                <td>
-                  <translate translate-context="*/*/*/Noun">
-                    Artist
-                  </translate>
-                </td>
-                <td class="right aligned">
-                  <router-link :to="{name: 'library.artists.detail', params: {id: track.artist.id}}">
-                    {{ track.artist.name }}
-                  </router-link>
-                </td>
-              </tr>
-              <tr v-if="track.album">
-                <td>
-                  <translate
-                    v-if="track.album.artist.content_category === 'music'"
-                    key="1"
-                    translate-context="*/*/*/Noun"
-                  >
-                    Album
-                  </translate>
-                  <translate
-                    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}}">
-                    {{ track.album.title }}
-                  </router-link>
-                </td>
-              </tr>
-              <tr>
-                <td>
-                  <translate translate-context="*/*/*">
-                    Year
-                  </translate>
-                </td>
-                <td class="right aligned">
-                  <template v-if="track.album && track.album.release_date">
-                    {{ track.album.release_date | moment('Y') }}
-                  </template>
-                  <template v-else>
-                    <translate translate-context="*/*/*">
-                      N/A
-                    </translate>
-                  </template>
-                </td>
-              </tr>
-              <tr>
-                <td>
-                  <translate translate-context="Content/Track/*/Noun">
-                    Copyright
-                  </translate>
-                </td>
-                <td class="right aligned">
-                  <span
-                    v-if="track.copyright"
-                    :title="track.copyright"
-                  >{{ track.copyright|truncate(50) }}</span>
-                  <template v-else>
-                    <translate translate-context="*/*/*">
-                      N/A
-                    </translate>
-                  </template>
-                </td>
-              </tr>
-              <tr>
-                <td>
-                  <translate translate-context="Content/*/*/Noun">
-                    License
-                  </translate>
-                </td>
-                <td class="right aligned">
-                  <a
-                    v-if="license"
-                    :href="license.url"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                  >{{ license.name }}</a>
-                  <translate
-                    v-else
-                    translate-context="*/*/*"
-                  >
-                    N/A
-                  </translate>
-                </td>
-              </tr>
-              <tr v-if="!track.is_local">
-                <td>
-                  <translate translate-context="Content/*/*/Noun">
-                    URL
-                  </translate>
-                </td>
-                <td :title="track.fid">
-                  <a
-                    :href="track.fid"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                  >
-                    {{ track.fid|truncate(65) }}
-                  </a>
-                </td>
-              </tr>
-            </tbody>
-          </table>
-          <a
-            v-if="musicbrainzUrl"
-            :href="musicbrainzUrl"
-            target="_blank"
-            rel="noreferrer noopener"
-          >
-            <i class="external icon" />
-            <translate translate-context="Content/*/*/Clickable, Verb">View on MusicBrainz</translate>
-          </a>
-          <h2 class="ui header">
-            <translate translate-context="Content/*/Title/Noun">
-              Related Playlists
-            </translate>
-          </h2>
-          <playlist-widget
-            :url="'playlists/'"
-            :filters="{track: track.id, playable: true, ordering: '-modification_date'}"
-          />
+					<rendered-description
+						:content="track.description"
+						:can-update="false"
+					/>
+					<h2 class="ui header">
+						<translate translate-context="Content/*/*">
+							Release Details
+						</translate>
+					</h2>
+					<table class="ui basic table ellipsis-rows">
+						<tbody>
+							<tr>
+								<td>
+									<translate translate-context="*/*/*/Noun"> Artist </translate>
+								</td>
+								<td class="right aligned">
+									<router-link
+										:to="{
+											name: 'library.artists.detail',
+											params: { id: track.artist.id },
+										}"
+									>
+										{{ track.artist.name }}
+									</router-link>
+								</td>
+							</tr>
+							<tr v-if="track.album">
+								<td>
+									<translate
+										v-if="track.album.artist.content_category === 'music'"
+										key="1"
+										translate-context="*/*/*/Noun"
+									>
+										Album
+									</translate>
+									<translate 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 },
+										}"
+									>
+										{{ track.album.title }}
+									</router-link>
+								</td>
+							</tr>
+							<tr>
+								<td>
+									<translate translate-context="*/*/*"> Year </translate>
+								</td>
+								<td class="right aligned">
+									<template v-if="track.album && track.album.release_date">
+										{{ track.album.release_date | moment("Y") }}
+									</template>
+									<template v-else>
+										<translate translate-context="*/*/*"> N/A </translate>
+									</template>
+								</td>
+							</tr>
+							<tr>
+								<td>
+									<translate translate-context="Content/Track/*/Noun">
+										Copyright
+									</translate>
+								</td>
+								<td class="right aligned">
+									<span v-if="track.copyright" :title="track.copyright">{{
+										track.copyright | truncate(50)
+									}}</span>
+									<template v-else>
+										<translate translate-context="*/*/*"> N/A </translate>
+									</template>
+								</td>
+							</tr>
+							<tr>
+								<td>
+									<translate translate-context="Content/*/*/Noun">
+										License
+									</translate>
+								</td>
+								<td class="right aligned">
+									<a
+										v-if="license"
+										:href="license.url"
+										target="_blank"
+										rel="noopener noreferrer"
+										>{{ license.name }}</a
+									>
+									<translate v-else translate-context="*/*/*"> N/A </translate>
+								</td>
+							</tr>
+							<tr v-if="!track.is_local">
+								<td>
+									<translate translate-context="Content/*/*/Noun">
+										URL
+									</translate>
+								</td>
+								<td :title="track.fid">
+									<a
+										:href="track.fid"
+										target="_blank"
+										rel="noopener noreferrer"
+									>
+										{{ track.fid | truncate(65) }}
+									</a>
+								</td>
+							</tr>
+						</tbody>
+					</table>
+					<a
+						v-if="musicbrainzUrl"
+						:href="musicbrainzUrl"
+						target="_blank"
+						rel="noreferrer noopener"
+					>
+						<i class="external icon" />
+						<translate translate-context="Content/*/*/Clickable, Verb"
+							>View on MusicBrainz</translate
+						>
+					</a>
+					<h2 class="ui header">
+						<translate translate-context="Content/*/Title/Noun">
+							Related Playlists
+						</translate>
+					</h2>
+					<playlist-widget
+						:url="'playlists/'"
+						:filters="{
+							track: track.id,
+							playable: true,
+							ordering: '-modification_date',
+						}"
+					/>
 
-          <h2 class="ui header">
-            <translate translate-context="Content/*/Title/Noun">
-              Related Libraries
-            </translate>
-          </h2>
-          <library-widget
-            :url="'tracks/' + id + '/libraries/'"
-            @loaded="$emit('libraries-loaded', $event)"
-          >
-            <translate
-              slot="subtitle"
-              translate-context="Content/Track/Paragraph"
-            >
-              This track is present in the following libraries:
-            </translate>
-          </library-widget>
-        </div>
-      </div>
-    </section>
-  </div>
+					<h2 class="ui header">
+						<translate translate-context="Content/*/Title/Noun">
+							Related Libraries
+						</translate>
+					</h2>
+					<library-widget
+						:url="'tracks/' + id + '/libraries/'"
+						@loaded="$emit('libraries-loaded', $event)"
+					>
+						<translate
+							slot="subtitle"
+							translate-context="Content/Track/Paragraph"
+						>
+							This track is present in the following libraries:
+						</translate>
+					</library-widget>
+				</div>
+			</div>
+		</section>
+	</div>
 </template>
 
 <script>
-import axios from 'axios'
-import LibraryWidget from '@/components/federation/LibraryWidget'
-import TagsList from '@/components/tags/List'
-import PlaylistWidget from '@/components/playlists/Widget'
+import axios from "axios";
+import LibraryWidget from "@/components/federation/LibraryWidget";
+import TagsList from "@/components/tags/List";
+import PlaylistWidget from "@/components/playlists/Widget";
 
 export default {
-  components: {
-    LibraryWidget,
-    TagsList,
-    PlaylistWidget
-  },
-  props: {
-    track: { type: Object, required: true },
-    libraries: { type: Array, default: null }
-  },
-  data () {
-    return {
-      id: this.track.id,
-      licenseData: null
-    }
-  },
-  computed: {
-    labels () {
-      return {
-        title: this.$pgettext('*/*/*/Noun', 'Track')
-      }
-    },
-    musicbrainzUrl () {
-      if (this.track.mbid) {
-        return 'https://musicbrainz.org/recording/' + this.track.mbid
-      }
-      return null
-    },
-    upload () {
-      if (this.track.uploads) {
-        return this.track.uploads[0]
-      }
-      return null
-    },
-    license () {
-      if (!this.track || !this.track.license) {
-        return null
-      }
-      return this.licenseData
-    },
-    cover () {
-      if (this.track.cover && this.track.cover.urls.original) {
-        return this.track.cover
-      }
-      if (this.track.album && this.track.album.cover) {
-        return this.track.album.cover
-      }
-      return null
-    }
-  },
-  watch: {
-    track (v) {
-      if (v && v.license) {
-        this.fetchLicenseData(v.license)
-      }
-    }
-  },
-  created () {
-    if (this.track && this.track.license) {
-      this.fetchLicenseData(this.track.license)
-    }
-  },
-  methods: {
-    fetchLicenseData (licenseId) {
-      const self = this
-      const url = `licenses/${licenseId}`
-      axios.get(url).then(response => {
-        self.licenseData = response.data
-      })
-    }
-  }
-}
+	components: {
+		LibraryWidget,
+		TagsList,
+		PlaylistWidget,
+	},
+	props: {
+		track: { type: Object, required: true },
+		libraries: { type: Array, default: null },
+	},
+	data() {
+		return {
+			id: this.track.id,
+			licenseData: null,
+		};
+	},
+	computed: {
+		labels() {
+			return {
+				title: this.$pgettext("*/*/*/Noun", "Track"),
+			};
+		},
+		musicbrainzUrl() {
+			if (this.track.mbid) {
+				return "https://musicbrainz.org/recording/" + this.track.mbid;
+			}
+			return null;
+		},
+		upload() {
+			if (this.track.uploads) {
+				return this.track.uploads[0];
+			}
+			return null;
+		},
+		license() {
+			if (!this.track || !this.track.license) {
+				return null;
+			}
+			return this.licenseData;
+		},
+		cover() {
+			if (this.track.cover && this.track.cover.urls.original) {
+				return this.track.cover;
+			}
+			if (this.track.album && this.track.album.cover) {
+				return this.track.album.cover;
+			}
+			return null;
+		},
+	},
+	watch: {
+		track(v) {
+			if (v && v.license) {
+				this.fetchLicenseData(v.license);
+			}
+		},
+	},
+	created() {
+		if (this.track && this.track.license) {
+			this.fetchLicenseData(this.track.license);
+		}
+	},
+	methods: {
+		fetchLicenseData(licenseId) {
+			const self = this;
+			const url = `licenses/${licenseId}`;
+			axios.get(url).then((response) => {
+				self.licenseData = response.data;
+			});
+		},
+	},
+};
 </script>