Added Tracklist button and error feedback to Link Analyzer Tab

public/index.html

@@ -577,6 +577,10 @@
 									download<br />This is usefull if you're trying to download some tracks that are not available in your
 									country and want to know where they are available</p>
 							</div>
+							<div v-else-if="link == 'error'">
+								<h2>This link is not supported</h2>
+								<p>Seems like this link is not yet supported, try analyzing another one.</p>
+							</div>
 							<div v-else>
 								<header class="inline-flex"
 									:style="{ 'background-image': 'linear-gradient(to bottom, transparent 0%, var(--main-background) 100%), url(\''+image+'\')' }">
@@ -593,6 +597,10 @@
 									</div>
 								</header>
 								<table class="table">
+									<tr v-if="data.id">
+										<td>ID</td>
+										<td>{{ data.id }}</td>
+									</tr>
 									<tr v-if="data.isrc">
 										<td>ISRC</td>
 										<td>{{ data.isrc }}</td>
@@ -634,6 +642,9 @@
 										<td>{{ data.genres.data.map(x => x.name).join("; ") }}</td>
 									</tr>
 								</table>
+								<div v-if="type == 'album'">
+									<button @click="albumView" :data-id="id">Tracklist</button>
+								</div>
 								<div v-if="countries.length">
 									<p v-for="country in countries">{{ country[0] }} - {{ country[1] }}</p>
 								</div>

src/js/modules/components/link-analyzer-tab.js

@@ -12,6 +12,7 @@ const LinkAnalyzerTab = new Vue({
 			data: {},
 			type: '',
 			link: '',
+			id: '0',
 			countries: []
 		}
 	},
@@ -34,13 +35,15 @@ const LinkAnalyzerTab = new Vue({
 				title_version,
 				album: { cover_xl },
 				link,
-				available_countries
+				available_countries,
+				id
 			} = data
 
 			this.title = title + (title_version && title.indexOf(title_version) == -1 ? ' ' + title_version : '')
 			this.image = cover_xl
 			this.type = 'track'
 			this.link = link
+			this.id = id
 
 			available_countries.forEach(cc => {
 				let temp = []
@@ -53,18 +56,23 @@ const LinkAnalyzerTab = new Vue({
 			this.data = data
 		},
 		showAlbum(data) {
-			const { title, cover_xl, link } = data
+			const { title, cover_xl, link, id } = data
 
 			this.title = title
 			this.image = cover_xl
 			this.type = 'album'
 			this.link = link
 			this.data = data
+			this.id = id
+		},
+		notSupported(){
+			this.link = 'error'
 		}
 	},
 	mounted() {
 		socket.on('analyze_track', this.showTrack)
 		socket.on('analyze_album', this.showAlbum)
+		socket.on('analyze_notSupported', this.notSupported)
 	}
 }).$mount('#analyzer_tab')