Started working on album tab

public/css/modules/stackedTabs.css

@@ -1,4 +1,4 @@
-#artist_tab header{
+.image_header header{
 	background-position: 0% 35%;
 	background-size: cover;
 	padding: 220px 24px 8px;

public/index.html

@@ -364,7 +364,7 @@ <h1>Settings</h1>
 
 					<div id="about_tab" class="main_tabcontent"><h1>About</h1></div>
 
-					<div id="artist_tab" class="main_tabcontent fixed_footer">
+					<div id="artist_tab" class="main_tabcontent fixed_footer image_header">
 						<header class="inline-flex" v-bind:style="{ 'background-image': 'linear-gradient(to bottom, transparent 0%, var(--main-background) 100%), url(\''+image+'\')' }">
 							<h1>{{ title }}</h1>
 							<div class="fab right"><i class="material-icons">get_app</i></div>
@@ -385,18 +385,16 @@ <h1>{{ title }}</h1>
 								</tr>
 							</thead>
 							<tbody>
-								<template v-for="release in showTable">
+								<tr v-for="release in showTable">
-									<tr>
+									<td class="inline-flex clickable" v-on:click="albumView(event)" v-bind:data-id="release.id">
-										<td class="inline-flex">
+										<img class="rounded" v-bind:src="release.cover_small" style="margin-right: 16px;"/>
-											<img class="rounded" v-bind:src="release.cover_small" style="margin-right: 16px;"/>
+										<i v-if="release.explicit_lyrics" class="material-icons" data-tooltip="Explicit" style="color:#FF3B30;">explicit</i>
-											<i v-if="release.explicit_lyrics" class="material-icons" data-tooltip="Explicit" style="color:#FF3B30;">explicit</i>
+										{{release.title}}
-											{{release.title}}
+										<i v-if="checkNewRelease(release.release_date)" class="material-icons" style="color:#FF7300;">fiber_new</i>
-											<i v-if="checkNewRelease(release.release_date)" class="material-icons" style="color:#FF7300;">fiber_new</i>
+									</td>
-										</td>
+									<td>{{release.release_date}}</td>
-										<td>{{release.release_date}}</td>
+									<td><i v-on:click="addToQueue(event)" v-on:contextmenu="openQualityModal(event)" v-bind:data-link="release.link" class="material-icons">file_download</i></td>
-										<td><i v-on:click="addToQueue(event)" v-on:contextmenu="openQualityModal(event)" v-bind:data-link="release.link" class="material-icons">file_download</i></td>
+								</tr>
-									</tr>
-								</template>
 							</tbody>
 						</table>
 
@@ -405,13 +403,33 @@ <h1>{{ title }}</h1>
 						</footer>
 					</div>
 
-					<div id="tracklist_tab" class="main_tabcontent fixed_footer">
+					<div id="tracklist_tab" class="main_tabcontent fixed_footer image_header">
-						<header>
+						<header v-bind:style="{ 'background-image': 'linear-gradient(to bottom, transparent 0%, var(--main-background) 100%), url(\''+image+'\')' }">
 							<h1>{{ title }} <i v-if="explicit" class="material-icons">explicit</i></h1>
 							<h2><span v-if="metadata">{{ metadata }}</span><span v-if="release_date">{{ release_date }}</span></h2>
 						</header>
 
+						<table>
+							<thead>
+								<tr>
+									<th v-for="data in head" v-html="data.title"></th>
+								</tr>
+							</thead>
+							<tbody>
+								<tr v-for="track in body">
+									<td><i class="material-icons">play_arrow</i></td>
+									<td>{{ track.track_position }}</td>
+									<td><i v-if="track.explicit_lyrics" class="material-icons">explicit</i>{{ track.title }} <span v-if="track.title_version">{{track.title_version}}</span></td>
+									<td>{{ track.artist.name }}</td>
+									<td>{{ convertDuration(track.duration) }}</td>
+									<td><input class="trackCheckbox" type="checkbox" v-model="track.selected"></td>
+								</tr>
+							</tbody>
+						</table>
+
 						<footer>
+							<button v-bind:data-link="link">Download {{ type }}</button>
+							<button>Download selection<i class="material-icons right">file_download</i></button>
 							<button onclick="backTab()">Back</button>
 						</footer>
 					</div>

public/js/app/stackedTabs.js

@@ -67,7 +67,14 @@ var tracklistTab = new Vue({
 	},
 	methods: {
 		addToQueue: function(e){e.stopPropagation(); sendAddToQueue(e.currentTarget.dataset.link)},
-		openQualityModal: function(e){e.preventDefault(); openQualityModal(e.currentTarget.dataset.link)}
+		openQualityModal: function(e){e.preventDefault(); openQualityModal(e.currentTarget.dataset.link)},
+		toggleAll: function(e){
+			tracklistTab.body.forEach((item) => {
+				if (item.type == 'track'){
+					item.selected = e.currentTarget.checked
+				}
+			});
+		}
 	}
 })
 
@@ -122,7 +129,7 @@ socket.on('show_artist', function(data){
 	artistTab.image = data.picture_xl
 	artistTab.type = "Artist"
 	artistTab.link = `https://www.deezer.com/artist/${data.id}`
-	artistTab.currentTab = Object.keys(data.data)[0]
+	artistTab.currentTab = Object.keys(data.releases)[0]
 	artistTab.sortKey = 'release_date'
 	artistTab.sortOrder = 'desc'
 	artistTab.head = [
@@ -130,9 +137,34 @@ socket.on('show_artist', function(data){
 		{title: 'Release Date', sortKey: "release_date"},
 		{title: '', width: "56px"}
 	]
-	if (_.isEmpty(data.data)){
+	if (_.isEmpty(data.releases)){
 		artistTab.body = null
 	}else{
-		artistTab.body = data.data
+		artistTab.body = data.releases
+	}
+})
+
+socket.on('show_album', function(data){
+	tracklistTab.type = 'Album'
+	tracklistTab.link = `https://www.deezer.com/album/${data.id}`
+	tracklistTab.title = data.title
+	tracklistTab.explicit = data.explicit_lyrics
+	tracklistTab.label = data.label
+	tracklistTab.metadata = `${data.artist.name} • ${data.tracks.length} songs`
+	tracklistTab.release_date = data.release_date.substring(0,10)
+	tracklistTab.image = data.cover_xl
+	console.log(data.tracks)
+	tracklistTab.head = [
+		{title: '<i class="material-icons">music_note</i>', width: "24px"},
+		{title: '#'},
+		{title: 'Song'},
+		{title: 'Artist'},
+		{title: '<i class="material-icons">timer</i>', width: "40px"},
+		{title: '<input onclick="tracklistTab.toggleAll(event)" class="selectAll" type="checkbox" id="selectAll"><span></span>', width: "24px"}
+	]
+	if (_.isEmpty(data.tracks)){
+		tracklistTab.body = null
+	}else{
+		tracklistTab.body = data.tracks
 	}
 })