From b38728793189eb9857c13e2ed5d86e634aeb589a Mon Sep 17 00:00:00 2001
From: Ciaran Ainsworth <ciaranainsworth@outlook.com>
Date: Thu, 10 Feb 2022 13:31:32 +0100
Subject: [PATCH] Undo automatic formatting

---
 front/src/components/library/TrackDetail.vue | 725 ++++++++++---------
 1 file changed, 365 insertions(+), 360 deletions(-)

diff --git a/front/src/components/library/TrackDetail.vue b/front/src/components/library/TrackDetail.vue
index 17d480a0f..d57558716 100644
--- a/front/src/components/library/TrackDetail.vue
+++ b/front/src/components/library/TrackDetail.vue
@@ -1,369 +1,374 @@
 <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>
+  <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>