Added a style to the Link Analyzer tab

public/css/modules/tabs.css

@@ -5,6 +5,10 @@
 	display: none;
 }
 
+.main_tabcontent h1{
+	margin-bottom: 12px;
+}
+
 .tab button{
 	background-color: var(--primary-background);
 }

public/index.html

@@ -477,10 +477,23 @@ <h1>No Favorite Tracks found</h1>
 							</div>
 						</div>
 
-						<div id="analyzer_tab" class="main_tabcontent">
+						<div id="analyzer_tab" class="main_tabcontent image_header">
 							<h1>Link Analyzer</h1>
+							<div v-if="link == ''">
+								<p>You can use this section to find out more information about the link you are trying to 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>
+								<header class="inline-flex"
+									:style="{ 'background-image': 'linear-gradient(to bottom, transparent 0%, var(--main-background) 100%), url(\''+image+'\')' }">
+									<div>
 										<h1>{{ title }}</h1>
-							<h2>{{ subtitle }}</h2>
+										<h2 v-if="type == 'track'">by <span class="clickable" @click="artistView" :data-id="data.artist.id">{{data.artist.name}}</span> • in <span class="clickable" @click="albumView" :data-id="data.album.id">{{data.album.title}}</span></h2>
+										<h2 v-else-if="type == 'album'">by <span class="clickable" @click="artistView" :data-id="data.artist.id">{{data.artist.name}}</span> • {{data.nb_tracks}} tracks</h2>
+									</div>
+									<div role="button" aria-label="download" @contextmenu.prevent="openQualityModal"
+										@click.stop="addToQueue" :data-link="link" class="fab right"><i class="material-icons">get_app</i>
+									</div>
+								</header>
 								<table>
 									<tr v-if="data.isrc">
 										<td>ISRC</td>
@@ -527,6 +540,7 @@ <h2>{{ subtitle }}</h2>
 									<p v-for="country in countries">{{ country[0] }} - {{ country[1] }}</p>
 								</div>
 							</div>
+						</div>
 
 						<div id="settings_tab" class="main_tabcontent fixed_footer">
 							<h2 id="settings_heading">Settings</h2>

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

@@ -1,6 +1,6 @@
 import Vue from 'vue/dist/vue.esm'
 import { socket } from '../socket.js'
-import { albumView } from '../tabs.js'
+import { albumView, artistView } from '../tabs.js'
 import Utils from '../utils.js'
 
 const LinkAnalyzerTab = new Vue({
@@ -17,6 +17,7 @@ const LinkAnalyzerTab = new Vue({
 	},
 	methods: {
 		albumView,
+		artistView,
 		convertDuration: Utils.convertDuration,
 		reset() {
 			this.title = 'Loading...'
@@ -31,7 +32,6 @@ const LinkAnalyzerTab = new Vue({
 			this.title =
 				data.title +
 				(data.title_version && data.title.indexOf(data.title_version) == -1 ? ' ' + data.title_version : '')
-			this.subtitle = `by ${data.artist.name}\nin ${data.album.title}`
 			this.image = data.album.cover_xl
 			this.type = 'track'
 			this.link = data.link
@@ -47,7 +47,6 @@ const LinkAnalyzerTab = new Vue({
 		showAlbum(data) {
 			console.log(data)
 			this.title = data.title
-			this.subtitle = `by ${data.artist.name}\n${data.nb_tracks} tracks`
 			this.image = data.cover_xl
 			this.type = 'album'
 			this.link = data.link