Started working on playlist tab

public/index.html

@@ -422,10 +422,11 @@ <h2><span v-if="metadata">{{ metadata }}</span><span v-if="release_date">{{ rele
 										<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 v-if="type == 'Playlist'">{{ track.album.title }}</td>
 										<td>{{ convertDuration(track.duration) }}</td>
 										<td><input class="trackCheckbox" type="checkbox" v-model="track.selected"></td>
 									</tr>
-									<tr v-if="track.type == 'disc_separator'">
+									<tr v-else-if="track.type == 'disc_separator'">
 										<td colspan="6" style="opacity: 0.54;"><i class="material-icons">album</i>{{ track.number }}</td>
 									</tr>
 								</template>

public/js/app/stackedTabs.js

@@ -168,3 +168,26 @@ socket.on('show_album', function(data){
 		tracklistTab.body = data.tracks
 	}
 })
+
+socket.on('show_playlist', function(data){
+	tracklistTab.type = "Playlist"
+	tracklistTab.link = `https://www.deezer.com/playlist/${data.id}`
+	tracklistTab.title = data.title
+	tracklistTab.image = data.picture_xl
+	tracklistTab.release_date = data.creation_date.substring(0,10)
+	tracklistTab.metadata = `by ${data.creator.name} • ${data.tracks.length} songs`
+	tracklistTab.head = [
+		{title: '<i class="material-icons">music_note</i>', width: "24px"},
+		{title: '#'},
+		{title: 'Song'},
+		{title: 'Artist'},
+		{title: 'Album'},
+		{title: '<i class="material-icons">timer</i>', width: "40px"},
+		{title: '<div class="valign-wrapper"><label><input class="selectAll" type="checkbox" id="selectAll"><span></span></label></div>', width: "24px"}
+	]
+	if (_.isEmpty(data.tracks)){
+		tracklistTab.body = null
+	}else{
+		tracklistTab.body = data.tracks
+	}
+})