From 7b106e97ab6c7a2161107449743999d5bc66b463 Mon Sep 17 00:00:00 2001
From: Roberto Tonino <roberto.tonino5@gmail.com>
Date: Tue, 21 Apr 2020 22:20:19 +0200
Subject: [PATCH] removed httpVueLoader, moved Vue instances in different
 files, moved socket in different file, other minor code changes

---
 public/index.html                           | 1144 ++++++++++---------
 public/js/app.js                            |  444 +------
 public/js/modules/artist-tab.js             |   90 ++
 public/js/modules/main-search.js            |  110 ++
 public/js/modules/search-tab/main-search.js |   74 --
 public/js/modules/settings-tab.js           |   61 +
 public/js/modules/socket.js                 |    1 +
 public/js/modules/toasts.js                 |   36 +
 public/js/modules/tracklist-tab.js          |  111 ++
 public/js/vendor/httpVueLoader.js           |  478 --------
 10 files changed, 1040 insertions(+), 1509 deletions(-)
 create mode 100644 public/js/modules/artist-tab.js
 create mode 100644 public/js/modules/main-search.js
 delete mode 100644 public/js/modules/search-tab/main-search.js
 create mode 100644 public/js/modules/settings-tab.js
 create mode 100644 public/js/modules/socket.js
 create mode 100644 public/js/modules/toasts.js
 create mode 100644 public/js/modules/tracklist-tab.js
 delete mode 100644 public/js/vendor/httpVueLoader.js
diff --git a/public/index.html b/public/index.html
index 059c118..53a57c1 100644
--- a/public/index.html
+++ b/public/index.html
@@ -1,594 +1,602 @@
 <!DOCTYPE html>
 <html lang="en" dir="ltr">
 
-	<head>
-		<meta charset="utf-8">
-		<title>deemix</title>
-		<link rel="stylesheet" type="text/css" href="/public/css/style.css">
-		<meta name="viewport"
-			content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=0">
-	</head>
+<head>
+	<meta charset="utf-8">
+	<title>deemix</title>
+	<link rel="stylesheet" type="text/css" href="/public/css/style.css">
+	<meta name="viewport"
+		content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=0">
+	<script>
+		if ('true' === localStorage.getItem('darkMode')) {
+			document.documentElement.classList.add('dark-theme')
+		}
+	</script>
+</head>
 
-	<body>
-		<aside role="navigation" id="sidebar">
-			<i class="material-icons side_icon">menu</i>
-			<i id="main_search_tablink" class="main_tablinks"></i>
-			<i role="link" aria-label="home" id="main_home_tablink" class="material-icons side_icon main_tablinks">home</i>
-			<i role="link" aria-label="charts" id="main_charts_tablink"
-				class="material-icons side_icon main_tablinks">bubble_chart</i>
-			<i role="link" aria-label="favorites" id="main_favorites_tablink"
-				class="material-icons side_icon main_tablinks">album</i>
-			<i role="link" aria-label="link analyzer" id="main_analyzer_tablink"
-				class="material-icons side_icon main_tablinks">link</i>
-			<i role="link" aria-label="settings" id="main_settings_tablink"
-				class="material-icons side_icon main_tablinks">settings</i>
-			<i role="link" aria-label="about" id="main_about_tablink" class="material-icons side_icon main_tablinks">info</i>
-		</aside>
-		<main id="main_content">
-			<div id="middle_section">
-				<header id="search"><input id="searchbar" autocomplete="off" type="text" name="searchbar" value=""
-						placeholder="Search..." autofocus></header>
-				<section id="content">
-					<div id="container">
-						<div id="search_tab" class="main_tabcontent">
-							<div class="tab">
-								<button class="search_tablinks" id="search_all_tab">All</button>
-								<button class="search_tablinks" id="search_track_tab">Tracks</button>
-								<button class="search_tablinks" id="search_album_tab">Album</button>
-								<button class="search_tablinks" id="search_artist_tab">Artist</button>
-								<button class="search_tablinks" id="search_playlist_tab">Playlist</button>
-							</div>
-							<div id="search_tab_content">
-								<!-- ### Main Search Tab ### -->
-								<div id="main_search" class="search_tabcontent">
-									<template v-for="section in results.allTab.ORDER">
-										<div
-											v-if="(section != 'TOP_RESULT' && results.allTab[section].data.length > 0) || (results.allTab[section].length > 0)"
-											class="search_section">
-											<h1 v-on:click="changeSearchTab(section)">{{ names[section] }}</h1>
-											<!-- Top result -->
-											<div v-if="section == 'TOP_RESULT'" class="top_result clickable"
-												v-on:click="window[results.allTab.TOP_RESULT[0].type+'View'](event)"
-												v-bind:data-id="results.allTab.TOP_RESULT[0].id">
+<body>
+	<aside role="navigation" id="sidebar">
+		<i class="material-icons side_icon">menu</i>
+		<i id="main_search_tablink" class="main_tablinks"></i>
+		<i role="link" aria-label="home" id="main_home_tablink" class="material-icons side_icon main_tablinks">home</i>
+		<i role="link" aria-label="charts" id="main_charts_tablink"
+			class="material-icons side_icon main_tablinks">bubble_chart</i>
+		<i role="link" aria-label="favorites" id="main_favorites_tablink"
+			class="material-icons side_icon main_tablinks">album</i>
+		<i role="link" aria-label="link analyzer" id="main_analyzer_tablink"
+			class="material-icons side_icon main_tablinks">link</i>
+		<i role="link" aria-label="settings" id="main_settings_tablink"
+			class="material-icons side_icon main_tablinks">settings</i>
+		<i role="link" aria-label="about" id="main_about_tablink" class="material-icons side_icon main_tablinks">info</i>
+	</aside>
+	<main id="main_content">
+		<div id="middle_section">
+			<header id="search"><input id="searchbar" autocomplete="off" type="text" name="searchbar" value=""
+					placeholder="Search..." autofocus></header>
+			<section id="content">
+				<div id="container">
+					<div id="search_tab" class="main_tabcontent">
+						<div class="tab">
+							<button class="search_tablinks" id="search_all_tab">All</button>
+							<button class="search_tablinks" id="search_track_tab">Tracks</button>
+							<button class="search_tablinks" id="search_album_tab">Album</button>
+							<button class="search_tablinks" id="search_artist_tab">Artist</button>
+							<button class="search_tablinks" id="search_playlist_tab">Playlist</button>
+						</div>
+						<div id="search_tab_content">
+							<!-- ### Main Search Tab ### -->
+							<div id="main_search" class="search_tabcontent">
+								<template v-for="section in results.allTab.ORDER">
+									<div
+										v-if="(section != 'TOP_RESULT' && results.allTab[section].data.length > 0) || (results.allTab[section].length > 0)"
+										class="search_section">
+										<h1 v-on:click="changeSearchTab(section)">{{ names[section] }}</h1>
+										<!-- Top result -->
+										<div v-if="section == 'TOP_RESULT'" class="top_result clickable"
+											v-on:click="window[results.allTab.TOP_RESULT[0].type+'View'](event)"
+											v-bind:data-id="results.allTab.TOP_RESULT[0].id">
+											<div class="cover_container">
+												<img v-bind:src="results.allTab.TOP_RESULT[0].picture"
+													v-bind:class="(results.allTab.TOP_RESULT[0].type == 'artist' ? 'circle' : 'rounded') + ' coverart'"></img>
+												<div role="button" aria-label="download" v-on:contextmenu="openQualityModal(event)"
+													v-on:click="addToQueue(event)" v-bind:data-link="results.allTab.TOP_RESULT[0].link"
+													class="download_overlay"><i class="material-icons">get_app</i></div>
+											</div>
+											<div class="info_box">
+												<p class="primary-text">{{ results.allTab.TOP_RESULT[0].title }}</p>
+												<p class="secondary-text">
+													{{ results.allTab.TOP_RESULT[0].type == 'artist' ? numberWithDots(results.allTab.TOP_RESULT[0].nb_fan) + ' fans' : 'by '+results.allTab.TOP_RESULT[0].artist+' - '+results.allTab.TOP_RESULT[0].nb_song+' tracks'}}
+												</p>
+												<span
+													class="tag">{{ results.allTab.TOP_RESULT[0].type.charAt(0).toUpperCase() + results.allTab.TOP_RESULT[0].type.substring(1)}}</span>
+											</div>
+										</div>
+										<div v-else-if="section == 'TRACK'">
+											<table class="tracks_table">
+												<tr v-for="track in results.allTab.TRACK.data.slice(0, 6)" class="track_row">
+													<td style="width: 48px; text-align: center;"><img class="rounded coverart"
+															v-bind:src="'https://e-cdns-images.dzcdn.net/images/cover/'+track.ALB_PICTURE+'/32x32-000000-80-0-0.jpg'">
+													</td>
+													<td class="breakline">{{track.SNG_TITLE + (track.VERSION ? ' '+track.VERSION : '')}}</td>
+													<td class="breakline"><span class="clickable" v-on:click="artistView(event)"
+															v-bind:data-id="artist.ART_ID" v-for="artist in track.ARTISTS">{{artist.ART_NAME}} </span>
+													</td>
+													<td class="breakline clickable" v-on:click="albumView(event)" v-bind:data-id="track.ALB_ID">
+														{{track.ALB_TITLE}}</td>
+													<td>{{convertDuration(track.DURATION)}}</td>
+													<td role="button" aria-label="download" v-on:contextmenu="openQualityModal(event)"
+														v-on:click="addToQueue(event)"
+														v-bind:data-link="'https://www.deezer.com/track/'+track.SNG_ID"
+														style="width: 56px; text-align: center;" class="clickable"><i
+															class="material-icons">get_app</i></td>
+												</tr>
+											</table>
+										</div>
+										<div v-else-if="section == 'ARTIST'" class="release_grid firstrow_only">
+											<div v-for="release in results.allTab.ARTIST.data.slice(0, 10)" class="release clickable"
+												v-on:click="artistView(event)" v-bind:data-id="release.ART_ID">
 												<div class="cover_container">
-													<img v-bind:src="results.allTab.TOP_RESULT[0].picture"
-														v-bind:class="(results.allTab.TOP_RESULT[0].type == 'artist' ? 'circle' : 'rounded') + ' coverart'"></img>
+													<img class="circle coverart"
+														v-bind:src="'https://e-cdns-images.dzcdn.net/images/artist/' + release.ART_PICTURE + '/156x156-000000-80-0-0.jpg'">
 													<div role="button" aria-label="download" v-on:contextmenu="openQualityModal(event)"
-														v-on:click="addToQueue(event)" v-bind:data-link="results.allTab.TOP_RESULT[0].link"
+														v-on:click="addToQueue(event)"
+														v-bind:data-link="'https://deezer.com/artist/'+release.ART_ID" class="download_overlay"><i
+															class="material-icons">get_app</i></div>
+												</div>
+												<p class="primary-text">{{release.ART_NAME}}</p>
+												<p class="secondary-text">{{numberWithDots(release.NB_FAN) + ' fans'}}</p>
+											</div>
+										</div>
+										<div v-else-if="section == 'ALBUM'" class="release_grid firstrow_only">
+											<div v-for="release in results.allTab.ALBUM.data.slice(0, 10)" class="release clickable"
+												v-on:click="albumView(event)" v-bind:data-id="release.ALB_ID">
+												<div class="cover_container">
+													<img class="rounded coverart"
+														v-bind:src="'https://e-cdns-images.dzcdn.net/images/cover/' + release.ALB_PICTURE + '/156x156-000000-80-0-0.jpg'">
+													<div role="button" aria-label="download" v-on:contextmenu="openQualityModal(event)"
+														v-on:click="addToQueue(event)" v-bind:data-link="'https://deezer.com/album/'+release.ALB_ID"
 														class="download_overlay"><i class="material-icons">get_app</i></div>
 												</div>
-												<div class="info_box">
-													<p class="primary-text">{{ results.allTab.TOP_RESULT[0].title }}</p>
-													<p class="secondary-text">
-														{{ results.allTab.TOP_RESULT[0].type == 'artist' ? numberWithDots(results.allTab.TOP_RESULT[0].nb_fan) + ' fans' : 'by '+results.allTab.TOP_RESULT[0].artist+' - '+results.allTab.TOP_RESULT[0].nb_song+' tracks'}}
-													</p>
-													<span
-														class="tag">{{ results.allTab.TOP_RESULT[0].type.charAt(0).toUpperCase() + results.allTab.TOP_RESULT[0].type.substring(1)}}</span>
-												</div>
-											</div>
-											<div v-else-if="section == 'TRACK'">
-												<table class="tracks_table">
-													<tr v-for="track in results.allTab.TRACK.data.slice(0, 6)" class="track_row">
-														<td style="width: 48px; text-align: center;"><img class="rounded coverart"
-																v-bind:src="'https://e-cdns-images.dzcdn.net/images/cover/'+track.ALB_PICTURE+'/32x32-000000-80-0-0.jpg'">
-														</td>
-														<td class="breakline">{{track.SNG_TITLE + (track.VERSION ? ' '+track.VERSION : '')}}</td>
-														<td class="breakline"><span class="clickable" v-on:click="artistView(event)"
-																v-bind:data-id="artist.ART_ID" v-for="artist in track.ARTISTS">{{artist.ART_NAME}} </span>
-														</td>
-														<td class="breakline clickable" v-on:click="albumView(event)" v-bind:data-id="track.ALB_ID">
-															{{track.ALB_TITLE}}</td>
-														<td>{{convertDuration(track.DURATION)}}</td>
-														<td role="button" aria-label="download" v-on:contextmenu="openQualityModal(event)"
-															v-on:click="addToQueue(event)"
-															v-bind:data-link="'https://www.deezer.com/track/'+track.SNG_ID"
-															style="width: 56px; text-align: center;" class="clickable"><i
-																class="material-icons">get_app</i></td>
-													</tr>
-												</table>
-											</div>
-											<div v-else-if="section == 'ARTIST'" class="release_grid firstrow_only">
-												<div v-for="release in results.allTab.ARTIST.data.slice(0, 10)" class="release clickable"
-													v-on:click="artistView(event)" v-bind:data-id="release.ART_ID">
-													<div class="cover_container">
-														<img class="circle coverart"
-															v-bind:src="'https://e-cdns-images.dzcdn.net/images/artist/' + release.ART_PICTURE + '/156x156-000000-80-0-0.jpg'">
-														<div role="button" aria-label="download" v-on:contextmenu="openQualityModal(event)"
-															v-on:click="addToQueue(event)"
-															v-bind:data-link="'https://deezer.com/artist/'+release.ART_ID" class="download_overlay"><i
-																class="material-icons">get_app</i></div>
-													</div>
-													<p class="primary-text">{{release.ART_NAME}}</p>
-													<p class="secondary-text">{{numberWithDots(release.NB_FAN) + ' fans'}}</p>
-												</div>
-											</div>
-											<div v-else-if="section == 'ALBUM'" class="release_grid firstrow_only">
-												<div v-for="release in results.allTab.ALBUM.data.slice(0, 10)" class="release clickable"
-													v-on:click="albumView(event)" v-bind:data-id="release.ALB_ID">
-													<div class="cover_container">
-														<img class="rounded coverart"
-															v-bind:src="'https://e-cdns-images.dzcdn.net/images/cover/' + release.ALB_PICTURE + '/156x156-000000-80-0-0.jpg'">
-														<div role="button" aria-label="download" v-on:contextmenu="openQualityModal(event)"
-															v-on:click="addToQueue(event)" v-bind:data-link="'https://deezer.com/album/'+release.ALB_ID"
-															class="download_overlay"><i class="material-icons">get_app</i></div>
-													</div>
-													<p class="primary-text">{{release.ALB_TITLE}}</p>
-													<p class="secondary-text">{{release.ART_NAME+' - '+release.NUMBER_TRACK+' tracks'}}</p>
-												</div>
-											</div>
-											<div v-else-if="section == 'PLAYLIST'" class="release_grid firstrow_only">
-												<div v-for="release in results.allTab.PLAYLIST.data.slice(0, 10)" class="release clickable"
-													v-on:click="playlistView(event)" v-bind:data-id="release.PLAYLIST_ID">
-													<div class="cover_container">
-														<img class="rounded coverart"
-															v-bind:src="'https://e-cdns-images.dzcdn.net/images/'+ release.PICTURE_TYPE +'/' + release.PLAYLIST_PICTURE + '/156x156-000000-80-0-0.jpg'">
-														<div role="button" aria-label="download" v-on:contextmenu="openQualityModal(event)"
-															v-on:click="addToQueue(event)"
-															v-bind:data-link="'https://deezer.com/playlist/'+release.PLAYLIST_ID"
-															class="download_overlay"><i class="material-icons">get_app</i></div>
-													</div>
-													<p class="primary-text">{{ release.TITLE }}</p>
-													<p class="secondary-text">{{release.NB_SONG+' tracks'}}</p>
-												</div>
+												<p class="primary-text">{{release.ALB_TITLE}}</p>
+												<p class="secondary-text">{{release.ART_NAME+' - '+release.NUMBER_TRACK+' tracks'}}</p>
 											</div>
 										</div>
-									</template>
-									<div
-										v-if="results.allTab.ORDER.every(section => section == 'TOP_RESULT' ? results.allTab[section].length == 0 : results.allTab[section].data.length == 0)">
-										<h1>No results</h1>
-									</div>
-								</div>
-								<!-- ### Track Search Tab ### -->
-								<div id="track_search" class="search_tabcontent">
-									<div v-if="!results.trackTab.loaded">
-										<h1>Loading</h1>
-									</div>
-									<div v-else-if="results.trackTab.data.length == 0">
-										<h1>No Tracks found</h1>
-									</div>
-									<table class="tracks_table" v-if="results.trackTab.data.length > 0">
-										<tr>
-											<th style="width: 48px;"></th>
-											<th>Title</th>
-											<th>Artists</th>
-											<th>Album</th>
-											<th><i class="material-icons">timer</i></th>
-											<th style="width: 56px;"></th>
-										</tr>
-										<tr v-for="track in results.trackTab.data" class="track_row">
-											<td style="width: 48px; text-align: center;"><img class="rounded coverart"
-													v-bind:src="track.album.cover_small"></td>
-											<td class="breakline">{{track.title + (track.title_version ? ' '+track.title_version : '')}}</td>
-											<td class="breakline clickable" v-on:click="artistView(event)"
-												v-bind:data-id="track.artist.id">{{track.artist.name}}</td>
-											<td class="breakline clickable" v-on:click="albumView(event)" v-bind:data-id="track.album.id">
-												{{track.album.title}}</td>
-											<td>{{convertDuration(track.duration)}}</td>
-											<td role="button" aria-label="download" v-on:contextmenu="openQualityModal(event)"
-												v-on:click="addToQueue(event)" v-bind:data-link="track.link"
-												style="width: 56px; text-align: center;" class="clickable"><i class="material-icons">get_app</i>
-											</td>
-										</tr>
-									</table>
-								</div>
-								<!-- ### Album Search Tab ### -->
-								<div id="album_search" class="search_tabcontent">
-									<div v-if="!results.albumTab.loaded">
-										<h1>Loading</h1>
-									</div>
-									<div v-else-if="results.albumTab.data.length == 0">
-										<h1>No Albums found</h1>
-									</div>
-									<div class="release_grid" v-if="results.albumTab.data.length > 0">
-										<div v-for="release in results.albumTab.data" class="release clickable" v-on:click="albumView(event)"
-											v-bind:data-id="release.id">
-											<div class="cover_container">
-												<img class="rounded coverart" v-bind:src="release.cover_medium">
-												<div role="button" aria-label="download" v-on:contextmenu="openQualityModal(event)"
-													v-on:click="addToQueue(event)" v-bind:data-link="release.link" class="download_overlay"><i
-														class="material-icons">get_app</i></div>
+										<div v-else-if="section == 'PLAYLIST'" class="release_grid firstrow_only">
+											<div v-for="release in results.allTab.PLAYLIST.data.slice(0, 10)" class="release clickable"
+												v-on:click="playlistView(event)" v-bind:data-id="release.PLAYLIST_ID">
+												<div class="cover_container">
+													<img class="rounded coverart"
+														v-bind:src="'https://e-cdns-images.dzcdn.net/images/'+ release.PICTURE_TYPE +'/' + release.PLAYLIST_PICTURE + '/156x156-000000-80-0-0.jpg'">
+													<div role="button" aria-label="download" v-on:contextmenu="openQualityModal(event)"
+														v-on:click="addToQueue(event)"
+														v-bind:data-link="'https://deezer.com/playlist/'+release.PLAYLIST_ID"
+														class="download_overlay"><i class="material-icons">get_app</i></div>
+												</div>
+												<p class="primary-text">{{ release.TITLE }}</p>
+												<p class="secondary-text">{{release.NB_SONG+' tracks'}}</p>
 											</div>
-											<p class="primary-text">{{ release.title }}</p>
-											<p class="secondary-text">{{ 'by '+release.artist.name+' - '+release.nb_tracks+' tracks' }}</p>
 										</div>
 									</div>
-								</div>
-								<!-- ### Artist Search Tab ### -->
-								<div id="artist_search" class="search_tabcontent">
-									<div v-if="!results.artistTab.loaded">
-										<h1>Loading</h1>
-									</div>
-									<div v-else-if="results.artistTab.data.length == 0">
-										<h1>No Artists found</h1>
-									</div>
-									<div class="release_grid" v-if="results.artistTab.data.length > 0">
-										<div v-for="release in results.artistTab.data" class="release clickable"
-											v-on:click="artistView(event)" v-bind:data-id="release.id">
-											<div class="cover_container">
-												<img class="circle coverart" v-bind:src="release.picture_medium">
-												<div role="button" aria-label="download" v-on:contextmenu="openQualityModal(event)"
-													v-on:click="addToQueue(event)" v-bind:data-link="release.link" class="download_overlay"><i
-														class="material-icons">get_app</i></div>
-											</div>
-											<p class="primary-text">{{ release.name }}</p>
-											<p class="secondary-text">{{ release.nb_album + ' releases' }}</p>
-										</div>
-									</div>
-								</div>
-								<!-- ### Playlist Search Tab ### -->
-								<div id="playlist_search" class="search_tabcontent">
-									<div v-if="!results.playlistTab.loaded">
-										<h1>Loading</h1>
-									</div>
-									<div v-else-if="results.playlistTab.data.length == 0">
-										<h1>No Playlists found</h1>
-									</div>
-									<div class="release_grid" v-if="results.playlistTab.data.length > 0">
-										<div v-for="release in results.playlistTab.data" class="release clickable"
-											v-on:click="playlistView(event)" v-bind:data-id="release.id">
-											<div class="cover_container">
-												<img class="rounded coverart" v-bind:src="release.picture_medium">
-												<div role="button" aria-label="download" v-on:contextmenu="openQualityModal(event)"
-													v-on:click="addToQueue(event)" v-bind:data-link="release.link" class="download_overlay"><i
-														class="material-icons">get_app</i></div>
-											</div>
-											<p class="primary-text">{{ release.title }}</p>
-											<p class="secondary-text">{{ 'by '+release.user.name+' - '+release.nb_tracks+' tracks' }}</p>
-										</div>
-									</div>
-								</div>
-							</div>
-						</div>
-
-						<div id="home_tab" class="main_tabcontent">
-							<h1>Home</h1>
-						</div>
-
-						<div id="charts_tab" class="main_tabcontent">
-							<h1>Charts</h1>
-						</div>
-
-						<div id="favorites_tab" class="main_tabcontent">
-							<h1>Favorites</h1>
-						</div>
-
-						<div id="analyzer_tab" class="main_tabcontent">
-							<h1>Link Analyzer</h1>
-						</div>
-
-						<div id="settings_tab" class="main_tabcontent fixed_footer">
-							<h1>Settings</h1>
-							<div id="logged_in_info" class="inline-flex">
-								<img id="settings_picture" src="" alt="Profile Picture" class="circle"
-									style="width: 125px;height:125px; margin-right: 12px;" />
-								<div>
-									<p>You are logged in as <b id="settings_username"></b></p>
-									<button id="settings_btn_logout">Logout</button>
-								</div>
-							</div>
-							<div class="inline-flex">
-								<input autocomplete="off" type="password" id="login_input_arl" placeholder="ARL" />
-								<button id="settings_btn_copyArl"><i class="material-icons">assignment</i></button>
-							</div>
-							<p><a href="https://notabug.org/RemixDevs/DeezloaderRemix/wiki/Login+via+userToken" target="_blank">How do I
-									get my own ARL?</a></p>
-							<p><button style="width:100%;" id="settings_btn_updateArl">Update ARL</button></p>
-							<div id="settings_generic_tab">
-								<div class="input_group">
-									<p>Download Path</p>
-									<input type="text" v-model="settings.downloadLocation">
-								</div>
-								<div class="input_group">
-									<p>Trackname template</p>
-									<input type="text" v-model="settings.tracknameTemplate">
-								</div>
-								<div class="input_group">
-									<p>Album track template</p>
-									<input type="text" v-model="settings.albumTracknameTemplate">
-								</div>
-								<div class="input_group">
-									<p>Playlist track template</p>
-									<input type="text" v-model="settings.playlistTracknameTemplate">
-								</div>
-								<div class="input_group">
-									<p>Create folder for playlist</p>
-									<input type="checkbox" v-model="settings.createPlaylistFolder">
-								</div>
-								<div class="input_group" v-if="settings.createPlaylistFolder">
-									<p>Playlist folder template</p>
-									<input type="text" v-model="settings.playlistNameTemplate">
-								</div>
-								<div class="input_group">
-									<p>Create folder for artist</p>
-									<input type="checkbox" v-model="settings.createArtistFolder">
-								</div>
-								<div class="input_group" v-if="settings.createArtistFolder">
-									<p>Artist folder template</p>
-									<input type="text" v-model="settings.artistNameTemplate">
-								</div>
-								<div class="input_group">
-									<p>Create folder for album</p>
-									<input type="checkbox" v-model="settings.createAlbumFolder">
-								</div>
-								<div class="input_group" v-if="settings.createAlbumFolder">
-									<p>Album folder template</p>
-									<input type="text" v-model="settings.albumNameTemplate">
-								</div>
-								<div class="input_group">
-									<p>Create folder for CDs</p>
-									<input type="checkbox" v-model="settings.createCDFolder">
-								</div>
-								<div class="input_group">
-									<p>Create folder structure for playlists</p>
-									<input type="checkbox" v-model="settings.createStructurePlaylist">
-								</div>
-								<div class="input_group">
-									<p>Create folder structure for singles</p>
-									<input type="checkbox" v-model="settings.createSingleFolder">
-								</div>
-								<div class="input_group">
-									<p>Pad tracks</p>
-									<input type="checkbox" v-model="settings.padTracks">
-								</div>
-								<div class="input_group">
-									<p>Overwrite padding size</p>
-									<input type="number" v-model="settings.paddingSize">
-								</div>
-								<div class="input_group">
-									<p>Illegal Character replacer</p>
-									<input type="text" v-model="settings.illegalCharacterReplacer">
-								</div>
-								<div class="input_group">
-									<p>Concurrent Downloads</p>
-									<input type="number" v-model.number="settings.queueConcurrency">
-								</div>
-								<div class="input_group">
-									<p>Preferred Bitrate</p>
-									<select v-model="settings.maxBitrate">
-										<option value="9">FLAC 1411kbps</option>
-										<option value="3">MP3 320kbps</option>
-										<option value="1">MP3 128kbps</option>
-									</select>
-								</div>
-								<div class="input_group">
-									<p>Bitrate fallback</p>
-									<input type="checkbox" v-model="settings.fallbackBitrate">
-								</div>
-								<div class="input_group">
-									<p>Search fallback</p>
-									<input type="checkbox" v-model="settings.fallbackSearch">
-								</div>
-								<div class="input_group">
-									<p>Create log file for errors</p>
-									<input type="checkbox" v-model="settings.logErrors">
-								</div>
-								<div class="input_group">
-									<p>Create log file for searched tracks</p>
-									<input type="checkbox" v-model="settings.logSearched">
-								</div>
-								<div class="input_group">
-									<p>Create playlist file</p>
-									<input type="checkbox" v-model="settings.createM3U8File">
-								</div>
-								<div class="input_group">
-									<p>Create .lyr files (Sync Lyrics)</p>
-									<input type="checkbox" v-model="settings.syncedLyrics">
-								</div>
-								<div class="input_group">
-									<p>Save covers</p>
-									<input type="checkbox" v-model="settings.saveArtwork">
-								</div>
-								<div class="input_group">
-									<p>Cover name template</p>
-									<input type="text" v-model="settings.coverImageTemplate">
-								</div>
-								<div class="input_group">
-									<p>Save artist image</p>
-									<input type="checkbox" v-model="settings.saveArtworkArtist">
-								</div>
-								<div class="input_group">
-									<p>Artist image name template</p>
-									<input type="text" v-model="settings.artistImageTemplate">
-								</div>
-								<div class="input_group">
-									<p>Local artwork size</p>
-									<input type="number" min="100" max="1800" step="100" v-model.number="settings.localArtworkSize">
-								</div>
-								<div class="input_group">
-									<p>Embedded artwork size</p>
-									<input type="number" min="100" max="1800" step="100" v-model.number="settings.embeddedArtworkSize">
-								</div>
-								<div class="input_group">
-									<p>Save images as png</p>
-									<input type="checkbox" v-model="settings.PNGcovers">
-								</div>
-								<div class="input_group">
-									<p>JPEG image quality</p>
-									<input type="number" min="1" max="100" v-model.number="settings.jpegImageQuality">
-								</div>
-								<div class="input_group">
-									<p>Save playlists as compilation</p>
-									<input type="checkbox" v-model="settings.tags.savePlaylistAsCompilation">
-								</div>
-								<div class="input_group">
-									<p>Remove album version from track title</p>
-									<input type="checkbox" v-model="settings.removeAlbumVersion">
-								</div>
-								<div class="input_group">
-									<p>What should I do with featured artists</p>
-									<select v-model="settings.featuredToTitle">
-										<option value="0">Nothing</option>
-										<option value="1">Remove it from the title</option>
-										<option value="2">Move it to the title</option>
-									</select>
-								</div>
-								<div class="input_group">
-									<p>Title casing</p>
-									<select v-model="settings.titleCasing">
-										<option value="nothing">Keep unchanged</option>
-										<option value="lower">lowercase</option>
-										<option value="upper">UPPERCASE</option>
-										<option value="start">Start Of Each Word</option>
-										<option value="sentence">Like a sentence</option>
-									</select>
-								</div>
-								<div class="input_group">
-									<p>Artist casing</p>
-									<select v-model="settings.artistCasing">
-										<option value="nothing">Keep unchanged</option>
-										<option value="lower">lowercase</option>
-										<option value="upper">UPPERCASE</option>
-										<option value="start">Start Of Each Word</option>
-										<option value="sentence">Like a sentence</option>
-									</select>
-								</div>
-							</div>
-							<div id="settings_spotify_tab">
-								<div class="input_group">
-									<p>Spotify clientID</p>
-									<input type="text" v-model="spotifyFeatures.clientId">
-								</div>
-								<div class="input_group">
-									<p>Spotify Client Secret</p>
-									<input type="password" v-model="spotifyFeatures.clientSecret">
-								</div>
-							</div>
-							<footer>
-								<button id="settings_btn_save">Save</button>
-							</footer>
-						</div>
-
-						<div id="about_tab" class="main_tabcontent">
-							<h1>About</h1>
-						</div>
-
-						<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 role="button" aria-label="download" v-on:contextmenu="openQualityModal(event)"
-									v-on:click="addToQueue(event)" v-bind:data-link="link" class="fab right"><i
-										class="material-icons">get_app</i></div>
-							</header>
-
-							<div class="tab">
-								<template v-for="(item, name, index) in body">
-									<button v-bind:class="'selective' + (name==currentTab ? 'active' : '')" v-bind:href="'#artist_' + name"
-										v-on:click="changeTab(name)">{{ name }}</button>
 								</template>
+								<div
+									v-if="results.allTab.ORDER.every(section => section == 'TOP_RESULT' ? results.allTab[section].length == 0 : results.allTab[section].data.length == 0)">
+									<h1>No results</h1>
+								</div>
 							</div>
-
-							<table>
-								<thead>
+							<!-- ### Track Search Tab ### -->
+							<div id="track_search" class="search_tabcontent">
+								<div v-if="!results.trackTab.loaded">
+									<h1>Loading</h1>
+								</div>
+								<div v-else-if="results.trackTab.data.length == 0">
+									<h1>No Tracks found</h1>
+								</div>
+								<table class="tracks_table" v-if="results.trackTab.data.length > 0">
 									<tr>
-										<th v-for="data in head" v-on:click="data.sortKey ? sortBy(data.sortKey) : null"
-											v-bind:style="{ 'width': data.width ? data.width : 'auto'}"
-											v-bind:class="{ 'sort-asc': data.sortKey == sortKey && sortOrder == 'asc', 'sort-desc': data.sortKey == sortKey && sortOrder == 'desc', 'sortable': data.sortKey, 'clickable': data.sortKey }">
-											{{data.title}}
-										</th>
+										<th style="width: 48px;"></th>
+										<th>Title</th>
+										<th>Artists</th>
+										<th>Album</th>
+										<th><i class="material-icons">timer</i></th>
+										<th style="width: 56px;"></th>
 									</tr>
-								</thead>
-								<tbody>
-									<tr v-for="release in showTable">
-										<td class="inline-flex clickable" v-on:click="albumView(event)" v-bind:data-id="release.id">
-											<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>
-											{{release.title}}
-											<i v-if="checkNewRelease(release.release_date)" class="material-icons"
-												style="color:#FF7300;">fiber_new</i>
+									<tr v-for="track in results.trackTab.data" class="track_row">
+										<td style="width: 48px; text-align: center;"><img class="rounded coverart"
+												v-bind:src="track.album.cover_small"></td>
+										<td class="breakline">{{track.title + (track.title_version ? ' '+track.title_version : '')}}</td>
+										<td class="breakline clickable" v-on:click="artistView(event)" v-bind:data-id="track.artist.id">
+											{{track.artist.name}}</td>
+										<td class="breakline clickable" v-on:click="albumView(event)" v-bind:data-id="track.album.id">
+											{{track.album.title}}</td>
+										<td>{{convertDuration(track.duration)}}</td>
+										<td role="button" aria-label="download" v-on:contextmenu="openQualityModal(event)"
+											v-on:click="addToQueue(event)" v-bind:data-link="track.link"
+											style="width: 56px; text-align: center;" class="clickable"><i class="material-icons">get_app</i>
 										</td>
-										<td>{{release.release_date}}</td>
-										<td v-on:click="addToQueue(event)" v-on:contextmenu="openQualityModal(event)"
-												v-bind:data-link="release.link" class="clickable"><i class="material-icons">file_download</i></td>
 									</tr>
-								</tbody>
-							</table>
-
-							<footer>
-								<button onclick="backTab()">Back</button>
-							</footer>
+								</table>
+							</div>
+							<!-- ### Album Search Tab ### -->
+							<div id="album_search" class="search_tabcontent">
+								<div v-if="!results.albumTab.loaded">
+									<h1>Loading</h1>
+								</div>
+								<div v-else-if="results.albumTab.data.length == 0">
+									<h1>No Albums found</h1>
+								</div>
+								<div class="release_grid" v-if="results.albumTab.data.length > 0">
+									<div v-for="release in results.albumTab.data" class="release clickable" v-on:click="albumView(event)"
+										v-bind:data-id="release.id">
+										<div class="cover_container">
+											<img class="rounded coverart" v-bind:src="release.cover_medium">
+											<div role="button" aria-label="download" v-on:contextmenu="openQualityModal(event)"
+												v-on:click="addToQueue(event)" v-bind:data-link="release.link" class="download_overlay"><i
+													class="material-icons">get_app</i></div>
+										</div>
+										<p class="primary-text">{{ release.title }}</p>
+										<p class="secondary-text">{{ 'by '+release.artist.name+' - '+release.nb_tracks+' tracks' }}</p>
+									</div>
+								</div>
+							</div>
+							<!-- ### Artist Search Tab ### -->
+							<div id="artist_search" class="search_tabcontent">
+								<div v-if="!results.artistTab.loaded">
+									<h1>Loading</h1>
+								</div>
+								<div v-else-if="results.artistTab.data.length == 0">
+									<h1>No Artists found</h1>
+								</div>
+								<div class="release_grid" v-if="results.artistTab.data.length > 0">
+									<div v-for="release in results.artistTab.data" class="release clickable"
+										v-on:click="artistView(event)" v-bind:data-id="release.id">
+										<div class="cover_container">
+											<img class="circle coverart" v-bind:src="release.picture_medium">
+											<div role="button" aria-label="download" v-on:contextmenu="openQualityModal(event)"
+												v-on:click="addToQueue(event)" v-bind:data-link="release.link" class="download_overlay"><i
+													class="material-icons">get_app</i></div>
+										</div>
+										<p class="primary-text">{{ release.name }}</p>
+										<p class="secondary-text">{{ release.nb_album + ' releases' }}</p>
+									</div>
+								</div>
+							</div>
+							<!-- ### Playlist Search Tab ### -->
+							<div id="playlist_search" class="search_tabcontent">
+								<div v-if="!results.playlistTab.loaded">
+									<h1>Loading</h1>
+								</div>
+								<div v-else-if="results.playlistTab.data.length == 0">
+									<h1>No Playlists found</h1>
+								</div>
+								<div class="release_grid" v-if="results.playlistTab.data.length > 0">
+									<div v-for="release in results.playlistTab.data" class="release clickable"
+										v-on:click="playlistView(event)" v-bind:data-id="release.id">
+										<div class="cover_container">
+											<img class="rounded coverart" v-bind:src="release.picture_medium">
+											<div role="button" aria-label="download" v-on:contextmenu="openQualityModal(event)"
+												v-on:click="addToQueue(event)" v-bind:data-link="release.link" class="download_overlay"><i
+													class="material-icons">get_app</i></div>
+										</div>
+										<p class="primary-text">{{ release.title }}</p>
+										<p class="secondary-text">{{ 'by '+release.user.name+' - '+release.nb_tracks+' tracks' }}</p>
+									</div>
+								</div>
+							</div>
 						</div>
-
-						<div id="tracklist_tab" class="main_tabcontent fixed_footer image_header">
-							<header
-								v-bind:style="{ 'background-image': 'linear-gradient(to bottom, transparent 0%, var(--main-background) 100%), url(\''+image+'\')' }">
-								<h1 class="inline-flex">{{ title }} <i v-if="explicit" class="material-icons">explicit</i></h1>
-								<h2  class="inline-flex"><span v-if="metadata">{{ metadata }}</span><span class="right" v-if="release_date">{{ release_date }}</span></h2>
-							</header>
-
-							<table>
-								<thead>
-									<tr>
-										<th v-for="data in head" v-html="data.title" v-bind:style="{ 'width': data.width ? data.width : 'auto'}"></th>
-										<th style="width: 32px"><input v-on:click="toggleAll(event)" class="selectAll" type="checkbox"></th>
-									</tr>
-								</thead>
-								<tbody>
-									<template v-for="track in body">
-										<tr v-if="track.type == 'track'">
-											<td><i class="material-icons">play_arrow</i></td>
-											<td>{{ track.track_position }}</td>
-											<td class="inline-flex"><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 class="clickable" v-on:click="artistView(event)" v-bind:data-id="track.artist.id">
-												{{ track.artist.name }}</td>
-											<td class="clickable" v-if="type == 'Playlist'" v-on:click="albumView(event)"
-												v-bind:data-id="track.album.id">{{ track.album.title }}</td>
-											<td>{{ convertDuration(track.duration) }}</td>
-											<td><input class="trackCheckbox" type="checkbox" v-model="track.selected"></td>
-										</tr>
-										<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>
-
-								</tbody>
-							</table>
-							<span v-if="label"
-								style="opacity: 0.40;margin-top: 8px;display: inline-block;font-size: 13px;">{{ label }}</span>
-							<footer>
-								<button v-on:contextmenu="openQualityModal(event)" v-on:click="addToQueue(event)"
-									v-bind:data-link="link">Download {{ type }}</button>
-								<button class="with_icon" v-on:contextmenu="openQualityModal(event)" v-on:click="addToQueue(event)"
-									v-bind:data-link="selectedLinks()">Download selection<i
-										class="material-icons">file_download</i></button>
-								<button onclick="backTab()">Back</button>
-							</footer>
-						</div>
-
 					</div>
-				</section>
-			</div>
 
-			<div id="download_tab_container" class="tab_hidden">
-				<i id="toggle_download_tab" class="material-icons download_bar_icon"></i>
-				<div id="queue_buttons" class="right">
-					<i id="clean_queue" class="material-icons download_bar_icon">clear_all</i>
-					<i id="cancel_queue" class="material-icons download_bar_icon">delete_sweep</i>
+					<div id="home_tab" class="main_tabcontent">
+						<h1>Home</h1>
+					</div>
+
+					<div id="charts_tab" class="main_tabcontent">
+						<h1>Charts</h1>
+					</div>
+
+					<div id="favorites_tab" class="main_tabcontent">
+						<h1>Favorites</h1>
+					</div>
+
+					<div id="analyzer_tab" class="main_tabcontent">
+						<h1>Link Analyzer</h1>
+					</div>
+
+					<div id="settings_tab" class="main_tabcontent fixed_footer">
+						<h1>Settings</h1>
+						<div id="logged_in_info" class="inline-flex">
+							<img id="settings_picture" src="" alt="Profile Picture" class="circle"
+								style="width: 125px;height:125px; margin-right: 12px;" />
+							<div>
+								<p>You are logged in as <b id="settings_username"></b></p>
+								<button id="settings_btn_logout" @click="logout">Logout</button>
+							</div>
+						</div>
+						<div class="inline-flex">
+							<input autocomplete="off" type="password" id="login_input_arl" ref="loginInput" placeholder="ARL" />
+							<button id="settings_btn_copyArl" @click="copyARLtoClipboard"><i
+									class="material-icons">assignment</i></button>
+						</div>
+						<p><a href="https://notabug.org/RemixDevs/DeezloaderRemix/wiki/Login+via+userToken" target="_blank">How do I
+								get my own ARL?</a></p>
+						<p><button id="settings_btn_updateArl" @click="login" style="width:100%;">Update ARL</button></p>
+						<div id="settings_generic_tab">
+							<div class="input_group">
+								<p>Download Path</p>
+								<input type="text" v-model="settings.downloadLocation">
+							</div>
+							<div class="input_group">
+								<p>Trackname template</p>
+								<input type="text" v-model="settings.tracknameTemplate">
+							</div>
+							<div class="input_group">
+								<p>Album track template</p>
+								<input type="text" v-model="settings.albumTracknameTemplate">
+							</div>
+							<div class="input_group">
+								<p>Playlist track template</p>
+								<input type="text" v-model="settings.playlistTracknameTemplate">
+							</div>
+							<div class="input_group">
+								<p>Create folder for playlist</p>
+								<input type="checkbox" v-model="settings.createPlaylistFolder">
+							</div>
+							<div class="input_group" v-if="settings.createPlaylistFolder">
+								<p>Playlist folder template</p>
+								<input type="text" v-model="settings.playlistNameTemplate">
+							</div>
+							<div class="input_group">
+								<p>Create folder for artist</p>
+								<input type="checkbox" v-model="settings.createArtistFolder">
+							</div>
+							<div class="input_group" v-if="settings.createArtistFolder">
+								<p>Artist folder template</p>
+								<input type="text" v-model="settings.artistNameTemplate">
+							</div>
+							<div class="input_group">
+								<p>Create folder for album</p>
+								<input type="checkbox" v-model="settings.createAlbumFolder">
+							</div>
+							<div class="input_group" v-if="settings.createAlbumFolder">
+								<p>Album folder template</p>
+								<input type="text" v-model="settings.albumNameTemplate">
+							</div>
+							<div class="input_group">
+								<p>Create folder for CDs</p>
+								<input type="checkbox" v-model="settings.createCDFolder">
+							</div>
+							<div class="input_group">
+								<p>Create folder structure for playlists</p>
+								<input type="checkbox" v-model="settings.createStructurePlaylist">
+							</div>
+							<div class="input_group">
+								<p>Create folder structure for singles</p>
+								<input type="checkbox" v-model="settings.createSingleFolder">
+							</div>
+							<div class="input_group">
+								<p>Pad tracks</p>
+								<input type="checkbox" v-model="settings.padTracks">
+							</div>
+							<div class="input_group">
+								<p>Overwrite padding size</p>
+								<input type="number" v-model="settings.paddingSize">
+							</div>
+							<div class="input_group">
+								<p>Illegal Character replacer</p>
+								<input type="text" v-model="settings.illegalCharacterReplacer">
+							</div>
+							<div class="input_group">
+								<p>Concurrent Downloads</p>
+								<input type="number" v-model.number="settings.queueConcurrency">
+							</div>
+							<div class="input_group">
+								<p>Preferred Bitrate</p>
+								<select v-model="settings.maxBitrate">
+									<option value="9">FLAC 1411kbps</option>
+									<option value="3">MP3 320kbps</option>
+									<option value="1">MP3 128kbps</option>
+								</select>
+							</div>
+							<div class="input_group">
+								<p>Bitrate fallback</p>
+								<input type="checkbox" v-model="settings.fallbackBitrate">
+							</div>
+							<div class="input_group">
+								<p>Search fallback</p>
+								<input type="checkbox" v-model="settings.fallbackSearch">
+							</div>
+							<div class="input_group">
+								<p>Create log file for errors</p>
+								<input type="checkbox" v-model="settings.logErrors">
+							</div>
+							<div class="input_group">
+								<p>Create log file for searched tracks</p>
+								<input type="checkbox" v-model="settings.logSearched">
+							</div>
+							<div class="input_group">
+								<p>Create playlist file</p>
+								<input type="checkbox" v-model="settings.createM3U8File">
+							</div>
+							<div class="input_group">
+								<p>Create .lyr files (Sync Lyrics)</p>
+								<input type="checkbox" v-model="settings.syncedLyrics">
+							</div>
+							<div class="input_group">
+								<p>Save covers</p>
+								<input type="checkbox" v-model="settings.saveArtwork">
+							</div>
+							<div class="input_group">
+								<p>Cover name template</p>
+								<input type="text" v-model="settings.coverImageTemplate">
+							</div>
+							<div class="input_group">
+								<p>Save artist image</p>
+								<input type="checkbox" v-model="settings.saveArtworkArtist">
+							</div>
+							<div class="input_group">
+								<p>Artist image name template</p>
+								<input type="text" v-model="settings.artistImageTemplate">
+							</div>
+							<div class="input_group">
+								<p>Local artwork size</p>
+								<input type="number" min="100" max="1800" step="100" v-model.number="settings.localArtworkSize">
+							</div>
+							<div class="input_group">
+								<p>Embedded artwork size</p>
+								<input type="number" min="100" max="1800" step="100" v-model.number="settings.embeddedArtworkSize">
+							</div>
+							<div class="input_group">
+								<p>Save images as png</p>
+								<input type="checkbox" v-model="settings.PNGcovers">
+							</div>
+							<div class="input_group">
+								<p>JPEG image quality</p>
+								<input type="number" min="1" max="100" v-model.number="settings.jpegImageQuality">
+							</div>
+							<div class="input_group">
+								<p>Save playlists as compilation</p>
+								<input type="checkbox" v-model="settings.tags.savePlaylistAsCompilation">
+							</div>
+							<div class="input_group">
+								<p>Remove album version from track title</p>
+								<input type="checkbox" v-model="settings.removeAlbumVersion">
+							</div>
+							<div class="input_group">
+								<p>What should I do with featured artists</p>
+								<select v-model="settings.featuredToTitle">
+									<option value="0">Nothing</option>
+									<option value="1">Remove it from the title</option>
+									<option value="2">Move it to the title</option>
+								</select>
+							</div>
+							<div class="input_group">
+								<p>Title casing</p>
+								<select v-model="settings.titleCasing">
+									<option value="nothing">Keep unchanged</option>
+									<option value="lower">lowercase</option>
+									<option value="upper">UPPERCASE</option>
+									<option value="start">Start Of Each Word</option>
+									<option value="sentence">Like a sentence</option>
+								</select>
+							</div>
+							<div class="input_group">
+								<p>Artist casing</p>
+								<select v-model="settings.artistCasing">
+									<option value="nothing">Keep unchanged</option>
+									<option value="lower">lowercase</option>
+									<option value="upper">UPPERCASE</option>
+									<option value="start">Start Of Each Word</option>
+									<option value="sentence">Like a sentence</option>
+								</select>
+							</div>
+						</div>
+						<div id="settings_spotify_tab">
+							<div class="input_group">
+								<p>Spotify clientID</p>
+								<input type="text" v-model="spotifyFeatures.clientId">
+							</div>
+							<div class="input_group">
+								<p>Spotify Client Secret</p>
+								<input type="password" v-model="spotifyFeatures.clientSecret">
+							</div>
+						</div>
+						<footer>
+							<button id="settings_btn_save" @click="saveSettings">Save</button>
+						</footer>
+					</div>
+
+					<div id="about_tab" class="main_tabcontent">
+						<h1>About</h1>
+					</div>
+
+					<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 role="button" aria-label="download" v-on:contextmenu="openQualityModal(event)"
+								v-on:click="addToQueue(event)" v-bind:data-link="link" class="fab right"><i
+									class="material-icons">get_app</i></div>
+						</header>
+
+						<div class="tab">
+							<template v-for="(item, name, index) in body">
+								<button v-bind:class="'selective' + (name==currentTab ? 'active' : '')" v-bind:href="'#artist_' + name"
+									@click="changeTab(name)">{{ name }}</button>
+							</template>
+						</div>
+
+						<table>
+							<thead>
+								<tr>
+									<th v-for="data in head" v-on:click="data.sortKey ? sortBy(data.sortKey) : null"
+										v-bind:style="{ 'width': data.width ? data.width : 'auto'}"
+										v-bind:class="{ 'sort-asc': data.sortKey == sortKey && sortOrder == 'asc', 'sort-desc': data.sortKey == sortKey && sortOrder == 'desc', 'sortable': data.sortKey, 'clickable': data.sortKey }">
+										{{data.title}}
+									</th>
+								</tr>
+							</thead>
+							<tbody>
+								<tr v-for="release in showTable">
+									<td class="inline-flex clickable" v-on:click="albumView(event)" v-bind:data-id="release.id">
+										<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>
+										{{release.title}}
+										<i v-if="checkNewRelease(release.release_date)" class="material-icons"
+											style="color:#FF7300;">fiber_new</i>
+									</td>
+									<td>{{release.release_date}}</td>
+									<td v-on:click="addToQueue(event)" v-on:contextmenu="openQualityModal(event)"
+										v-bind:data-link="release.link" class="clickable"><i class="material-icons">file_download</i></td>
+								</tr>
+							</tbody>
+						</table>
+
+						<footer>
+							<button class="back-button">Back</button>
+						</footer>
+					</div>
+
+					<div id="tracklist_tab" class="main_tabcontent fixed_footer image_header">
+						<header
+							v-bind:style="{ 'background-image': 'linear-gradient(to bottom, transparent 0%, var(--main-background) 100%), url(\''+image+'\')' }">
+							<h1 class="inline-flex">{{ title }} <i v-if="explicit" class="material-icons">explicit</i></h1>
+							<h2 class="inline-flex"><span v-if="metadata">{{ metadata }}</span><span class="right"
+									v-if="release_date">{{ release_date }}</span></h2>
+						</header>
+
+						<table>
+							<thead>
+								<tr>
+									<th v-for="data in head" v-html="data.title"
+										v-bind:style="{ 'width': data.width ? data.width : 'auto'}"></th>
+									<th style="width: 32px"><input v-on:click="toggleAll(event)" class="selectAll" type="checkbox"></th>
+								</tr>
+							</thead>
+							<tbody>
+								<template v-for="track in body">
+									<tr v-if="track.type == 'track'">
+										<td><i class="material-icons">play_arrow</i></td>
+										<td>{{ track.track_position }}</td>
+										<td class="inline-flex"><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 class="clickable" v-on:click="artistView(event)" v-bind:data-id="track.artist.id">
+											{{ track.artist.name }}</td>
+										<td class="clickable" v-if="type == 'Playlist'" v-on:click="albumView(event)"
+											v-bind:data-id="track.album.id">{{ track.album.title }}</td>
+										<td>{{ convertDuration(track.duration) }}</td>
+										<td><input class="trackCheckbox" type="checkbox" v-model="track.selected"></td>
+									</tr>
+									<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>
+
+							</tbody>
+						</table>
+						<span v-if="label"
+							style="opacity: 0.40;margin-top: 8px;display: inline-block;font-size: 13px;">{{ label }}</span>
+						<footer>
+							<button v-on:contextmenu="openQualityModal(event)" v-on:click="addToQueue(event)"
+								v-bind:data-link="link">Download {{ type }}</button>
+							<button class="with_icon" v-on:contextmenu="openQualityModal(event)" v-on:click="addToQueue(event)"
+								v-bind:data-link="selectedLinks()">Download selection<i
+									class="material-icons">file_download</i></button>
+							<button class="back-button">Back</button>
+						</footer>
+					</div>
+
 				</div>
-				<div id="download_list"></div>
-			</div>
-		</main>
-		<div id="modal_quality" class="smallmodal">
-			<!-- Modal content -->
-			<div class="smallmodal-content">
-				<button class="quality-button" data-quality-value="9">Download FLAC</button><br>
-				<button class="quality-button" data-quality-value="3">Download MP3 320kbps</button><br>
-				<button class="quality-button" data-quality-value="1">Download MP3 128kbps</button><br>
-				<button class="quality-button" data-quality-value="15">Download 360 Reality Audio [HQ]</button><br>
-				<button class="quality-button" data-quality-value="14">Download 360 Reality Audio [MQ]</button><br>
-				<button class="quality-button" data-quality-value="13">Download 360 Reality Audio [LQ]</button><br>
-			</div>
+			</section>
 		</div>
-	</body>
-	<script type="text/javascript" src="/public/js/vendor/httpVueLoader.js"></script>
-	<script type="text/javascript" src="/public/js/vendor/socket.io.js"></script>
-	<script type="text/javascript" src="/public/js/vendor/jquery-3.3.1.min.js"></script>
-	<script type="text/javascript" src="/public/js/vendor/vue.min.js"></script>
-	<script type="text/javascript" src="/public/js/vendor/lodash.min.js"></script>
-	<script type="text/javascript" src="/public/js/vendor/toastify.js"></script>
 
-	<script type="module" src="/public/js/app.js"></script>
+		<div id="download_tab_container" class="tab_hidden">
+			<i id="toggle_download_tab" class="material-icons download_bar_icon"></i>
+			<div id="queue_buttons" class="right">
+				<i id="clean_queue" class="material-icons download_bar_icon">clear_all</i>
+				<i id="cancel_queue" class="material-icons download_bar_icon">delete_sweep</i>
+			</div>
+			<div id="download_list"></div>
+		</div>
+	</main>
+	<div id="modal_quality" class="smallmodal">
+		<!-- Modal content -->
+		<div class="smallmodal-content">
+			<button class="quality-button" data-quality-value="9">Download FLAC</button><br>
+			<button class="quality-button" data-quality-value="3">Download MP3 320kbps</button><br>
+			<button class="quality-button" data-quality-value="1">Download MP3 128kbps</button><br>
+			<button class="quality-button" data-quality-value="15">Download 360 Reality Audio [HQ]</button><br>
+			<button class="quality-button" data-quality-value="14">Download 360 Reality Audio [MQ]</button><br>
+			<button class="quality-button" data-quality-value="13">Download 360 Reality Audio [LQ]</button><br>
+		</div>
+	</div>
+</body>
+<script type="text/javascript" src="/public/js/vendor/socket.io.js"></script>
+<script type="text/javascript" src="/public/js/vendor/jquery-3.3.1.min.js"></script>
+<script type="text/javascript" src="/public/js/vendor/vue.min.js"></script>
+<script type="text/javascript" src="/public/js/vendor/lodash.min.js"></script>
+<script type="text/javascript" src="/public/js/vendor/toastify.js"></script>
 
-</html>
+<script type="module" src="/public/js/app.js"></script>
+
+</html>
\ No newline at end of file
diff --git a/public/js/app.js b/public/js/app.js
index cb62e0a..1f378db 100644
--- a/public/js/app.js
+++ b/public/js/app.js
@@ -1,69 +1,28 @@
+/* ===== Imports ===== */
+
 import * as Utils from './modules/utils.js'
-import { MainSearch } from './modules/search-tab/main-search.js'
 
-const socket = io.connect(window.location.href)
-const localStorage = window.localStorage
+/* ===== Vue components ===== */
+import { MainSearch } from './modules/main-search.js'
+import { SettingsTab } from './modules/settings-tab.js'
 
-// Toasts stuff
-window.toastsWithId = {}
+import { resetTracklistTab } from './modules/tracklist-tab.js'
+import { resetArtistTab } from './modules/artist-tab.js'
+import { toast } from './modules/toasts.js'
+import { socket } from './modules/socket.js'
 
-// Settings
-window.lastSettings = {}
-window.lastCredentials = {}
-
-window.toast = function (msg, icon = null, dismiss = true, id = null) {
-	if (toastsWithId[id]) {
-		let toastObj = toastsWithId[id]
-		let toastDOM = $(`div.toastify[toast_id=${id}]`)
-		if (msg) {
-			toastDOM.find('.toast-message').html(msg)
-		}
-		if (icon) {
-			if (icon == 'loading') icon = `<div class="circle-loader"></div>`
-			else icon = `<i class="material-icons">${icon}</i>`
-			toastDOM.find('.toast-icon').html(icon)
-		}
-		if (dismiss !== null && dismiss) {
-			setTimeout(function () {
-				toastObj.hideToast()
-				delete toastsWithId[id]
-			}, 3000)
-		}
-	} else {
-		if (icon == null) icon = ''
-		else if (icon == 'loading') icon = `<div class="circle-loader"></div>`
-		else icon = `<i class="material-icons">${icon}</i>`
-		let toastObj = Toastify({
-			text: `<span class="toast-icon">${icon}</span><span class="toast-message">${msg}</toast>`,
-			duration: dismiss ? 3000 : 0,
-			gravity: 'bottom',
-			position: 'left'
-		}).showToast()
-		if (id) {
-			toastsWithId[id] = toastObj
-			$(toastObj.toastElement).attr('toast_id', id)
-		}
-	}
-}
+/* ===== Globals ===== */
 
 /* ===== Socketio listeners ===== */
-socket.on('toast', data => {
-	toast(data.msg, data.icon || null, data.dismiss !== undefined ? data.dismiss : true, data.id || null)
-})
 
 // Debug messages for socketio
 socket.on('message', function (msg) {
 	console.log(msg)
 })
 
-// Login stuff
-
-window.loginButton = function () {
-	let arl = document.querySelector('#login_input_arl').value
-	if (arl != '' && arl != localStorage.getItem('arl')) {
-		socket.emit('login', arl, true)
-	}
-}
+socket.on('toast', data => {
+	toast(data.msg, data.icon || null, data.dismiss !== undefined ? data.dismiss : true, data.id || null)
+})
 
 socket.on('logging_in', function () {
 	toast('Logging in', 'loading', false, 'login-toast')
@@ -122,28 +81,35 @@ socket.on('logged_out', function () {
 })
 
 /**
- * Adds event listeners.
+ * Adds all event listeners.
  * @returns		{void}
  * @since			0.1.0 (?)
  */
 function linkEventListeners() {
 	document.getElementById('toggle_download_tab').addEventListener('click', toggleDownloadTab)
 	document.getElementById('modal_quality').addEventListener('click', modalQualityButton)
-	document.getElementById('settings_btn_updateArl').addEventListener('click', loginButton)
+	document.getElementById('sidebar').addEventListener('click', handleSidebarClick)
+	document.getElementById('search_tab').addEventListener('click', handleTabClick)
+
+	const backButtons = Array.from(document.getElementsByClassName('back-button'))
+
+	backButtons.forEach(button => {
+		button.addEventListener('click', backTab)
+	})
+
+	document.getElementById('clean_queue').addEventListener('click', () => {
+		socket.emit('removeFinishedDownloads')
+	})
+
+	document.getElementById('cancel_queue').addEventListener('click', () => {
+		socket.emit('cancelAllDownloads')
+	})
 }
 
-/**
- * App initialization.
- * @returns		{void}
- * @since			0.1.0 (?)
- */
+/* ===== App initialization ===== */
 function init() {
 	linkEventListeners()
 
-	if ('true' === localStorage.darkMode) {
-		document.documentElement.classList.add('dark-theme')
-	}
-
 	if (localStorage.getItem('arl')) {
 		let arl = localStorage.getItem('arl')
 
@@ -217,13 +183,16 @@ window.showTab = function (type, id, back = false) {
 	document.getElementById(tab).style.display = 'block'
 }
 
-window.backTab = function () {
+function backTab() {
 	if (windows_stack.length == 1) {
-		clickElement('main_' + main_selected + 'link')
+		document.getElementById(`main_${main_selected}link`).click()
 	} else {
 		let tabObj = windows_stack.pop()
-		if (tabObj.type == 'artist') resetArtistTab()
-		else resetTracklistTab()
+		if (tabObj.type == 'artist') {
+			resetArtistTab()
+		} else {
+			resetTracklistTab()
+		}
 		socket.emit('getTracklist', { type: tabObj.type, id: tabObj.id })
 		showTab(tabObj.type, tabObj.id, true)
 	}
@@ -236,7 +205,7 @@ window.backTab = function () {
  * @param		{Event}		event
  * @since		0.1.0
  */
-window.handleSidebarClick = function (event) {
+function handleSidebarClick(event) {
 	let targetID = event.target.id
 
 	switch (targetID) {
@@ -267,142 +236,7 @@ window.handleSidebarClick = function (event) {
 	}
 }
 
-document.getElementById('sidebar').addEventListener('click', handleSidebarClick)
-
 /* stackedTabs.js */
-var artistTab = new Vue({
-	el: '#artist_tab',
-	data: {
-		currentTab: '',
-		sortKey: 'release_date',
-		sortOrder: 'desc',
-		title: '',
-		image: '',
-		type: '',
-		link: '',
-		head: null,
-		body: null
-	},
-	methods: {
-		addToQueue: function (e) {
-			e.stopPropagation()
-			sendAddToQueue(e.currentTarget.dataset.link)
-		},
-		openQualityModal: function (e) {
-			e.preventDefault()
-			openQualityModal(e.currentTarget.dataset.link)
-		},
-		moreInfo: function (url, e) {
-			if (e) e.preventDefault()
-			showTrackListSelective(url, true)
-		},
-		sortBy: function (key) {
-			if (key == this.sortKey) {
-				this.sortOrder = this.sortOrder == 'asc' ? 'desc' : 'asc'
-			} else {
-				this.sortKey = key
-				this.sortOrder = 'asc'
-			}
-		},
-		changeTab: function (tab) {
-			this.currentTab = tab
-		},
-		checkNewRelease: function (date) {
-			var g1 = new Date()
-			var g2 = new Date(date)
-			g2.setDate(g2.getDate() + 3)
-			g1.setHours(0, 0, 0, 0)
-			if (g1.getTime() <= g2.getTime()) {
-				return true
-			} else {
-				return false
-			}
-		}
-	},
-	computed: {
-		showTable() {
-			if (this.body) return _.orderBy(this.body[this.currentTab], this.sortKey, this.sortOrder)
-			else return []
-		}
-	}
-})
-
-var tracklistTab = new Vue({
-	el: '#tracklist_tab',
-	data: {
-		title: '',
-		metadata: '',
-		release_date: '',
-		label: '',
-		explicit: false,
-		image: '',
-		type: '',
-		link: '',
-		head: null,
-		body: []
-	},
-	methods: {
-		addToQueue: function (e) {
-			e.stopPropagation()
-			sendAddToQueue(e.currentTarget.dataset.link)
-		},
-		openQualityModal: function (e) {
-			e.preventDefault()
-			openQualityModal(e.currentTarget.dataset.link)
-		},
-		toggleAll: function (e) {
-			this.body.forEach(item => {
-				if (item.type == 'track') {
-					item.selected = e.currentTarget.checked
-				}
-			})
-		},
-		selectedLinks: function () {
-			var selected = []
-			if (this.body) {
-				this.body.forEach(item => {
-					if (item.type == 'track' && item.selected) selected.push(item.link)
-				})
-			}
-			return selected.join(';')
-		},
-		convertDuration(duration) {
-			//convert from seconds only to mm:ss format
-			let mm, ss
-			mm = Math.floor(duration / 60)
-			ss = duration - mm * 60
-			//add leading zero if ss < 0
-			if (ss < 10) {
-				ss = '0' + ss
-			}
-			return mm + ':' + ss
-		}
-	}
-})
-
-window.resetArtistTab = function () {
-	artistTab.title = 'Loading...'
-	artistTab.image = ''
-	artistTab.type = ''
-	artistTab.currentTab = ''
-	artistTab.sortKey = 'release_date'
-	artistTab.sortOrder = 'desc'
-	artistTab.link = ''
-	artistTab.head = []
-	artistTab.body = null
-}
-
-window.resetTracklistTab = function () {
-	tracklistTab.title = 'Loading...'
-	tracklistTab.image = ''
-	tracklistTab.metadata = ''
-	tracklistTab.label = ''
-	tracklistTab.release_date = ''
-	tracklistTab.explicit = false
-	tracklistTab.type = ''
-	tracklistTab.head = []
-	tracklistTab.body = []
-}
 
 window.artistView = function (ev) {
 	let id = ev.currentTarget.dataset.id
@@ -423,71 +257,6 @@ window.playlistView = function (ev) {
 	showTab('playlist', id)
 }
 
-socket.on('show_artist', function (data) {
-	artistTab.title = data.name
-	artistTab.image = data.picture_xl
-	artistTab.type = 'Artist'
-	artistTab.link = `https://www.deezer.com/artist/${data.id}`
-	artistTab.currentTab = Object.keys(data.releases)[0]
-	artistTab.sortKey = 'release_date'
-	artistTab.sortOrder = 'desc'
-	artistTab.head = [
-		{ title: 'Title', sortKey: 'title' },
-		{ title: 'Release Date', sortKey: 'release_date' },
-		{ title: '', width: '32px' }
-	]
-	if (_.isEmpty(data.releases)) {
-		artistTab.body = null
-	} else {
-		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
-	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' }
-	]
-	if (_.isEmpty(data.tracks)) {
-		tracklistTab.body = null
-	} else {
-		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' }
-	]
-	if (_.isEmpty(data.tracks)) {
-		tracklistTab.body = null
-	} else {
-		tracklistTab.body = data.tracks
-	}
-})
-
 /* search.js */
 // Load more content when the search page is at the end
 $('#content').on('scroll', function () {
@@ -523,27 +292,6 @@ window.scrolledSearch = function (type) {
 	}
 }
 
-window.searchUpdate = function (result) {
-	let next = 0
-	if (result.next) next = parseInt(result.next.match(/index=(\d*)/)[1])
-	else next = result.total
-	if (MainSearch.results[result.type + 'Tab'].total != result.total)
-		MainSearch.results[result.type + 'Tab'].total = result.total
-	if (MainSearch.results[result.type + 'Tab'].next != next) {
-		MainSearch.results[result.type + 'Tab'].next = next
-		MainSearch.results[result.type + 'Tab'].data = MainSearch.results[result.type + 'Tab'].data.concat(result.data)
-	}
-	MainSearch.results[result.type + 'Tab'].loaded = true
-}
-
-socket.on('search', function (result) {
-	searchUpdate(result)
-})
-
-window.clickElement = function (button) {
-	return document.getElementById(button).click()
-}
-
 window.sendAddToQueue = function (url, bitrate = null) {
 	if (url.indexOf(';') != -1) {
 		urls = url.split(';')
@@ -555,7 +303,7 @@ window.sendAddToQueue = function (url, bitrate = null) {
 	}
 }
 
-window.handleTabClick = function (event) {
+function handleTabClick(event) {
 	let targetID = event.target.id
 
 	switch (targetID) {
@@ -580,8 +328,6 @@ window.handleTabClick = function (event) {
 	}
 }
 
-document.getElementById('search_tab').addEventListener('click', handleTabClick)
-
 // Search section
 $('#searchbar').keyup(function (e) {
 	if (e.keyCode == 13) {
@@ -605,82 +351,11 @@ $('#searchbar').keyup(function (e) {
 	}
 })
 
-window.mainSearchHandler = function (result) {
-	let resetObj = { data: [], next: 0, total: 0, loaded: false }
-	MainSearch.results.allTab = result
-	MainSearch.results.query = result.QUERY
-	MainSearch.results.trackTab = { ...resetObj }
-	MainSearch.results.albumTab = { ...resetObj }
-	MainSearch.results.artistTab = { ...resetObj }
-	MainSearch.results.playlistTab = { ...resetObj }
-	document.getElementById('search_all_tab').click()
-	document.getElementById('search_tab_content').style.display = 'block'
-	document.getElementById('main_search_tablink').click()
-}
-
-socket.on('mainSearch', function (result) {
-	mainSearchHandler(result)
-})
-
 /* settings.js */
-const SettingsTab = new Vue({
-	el: '#settings_tab',
-	data: {
-		settings: { tags: {} },
-		spotifyFeatures: {}
-	},
-	methods: {
-		addListeners() {
-			document.getElementById('settings_btn_save').addEventListener('click', window.saveSettings)
-			document.getElementById('settings_btn_copyArl').addEventListener('click', window.copyARLtoClipboard)
-			document.getElementById('settings_btn_logout').addEventListener('click', window.logout)
-		}
-	},
-	mounted() {
-		this.addListeners()
-	}
-})
-
-socket.on('init_settings', function (settings, credentials) {
-	loadSettings(settings, credentials)
-	toast('Settings loaded!', 'settings')
-})
-
-socket.on('updateSettings', function (settings, credentials) {
-	loadSettings(settings, credentials)
-	toast('Settings updated!', 'settings')
-})
-
-window.loadSettings = function (settings, spotifyCredentials) {
-	lastSettings = { ...settings }
-	lastCredentials = { ...spotifyCredentials }
-	SettingsTab.settings = settings
-	SettingsTab.spotifyFeatures = spotifyCredentials
-}
-
-window.saveSettings = function () {
-	lastSettings = { ...SettingsTab.settings }
-	lastCredentials = { ...SettingsTab.spotifyFeatures }
-	socket.emit('saveSettings', lastSettings, lastCredentials)
-}
-
-window.copyARLtoClipboard = function () {
-	$('#login_input_arl').attr('type', 'text')
-	let copyText = document.querySelector('#login_input_arl')
-	copyText.select()
-	copyText.setSelectionRange(0, 99999)
-	document.execCommand('copy')
-	$('#login_input_arl').attr('type', 'password')
-	toast('ARL copied to clipboard', 'assignment')
-}
-
-window.logout = function () {
-	socket.emit('logout')
-}
 
 /* downloadList.js */
 // Show/Hide Download Tab
-window.toggleDownloadTab = function (ev) {
+function toggleDownloadTab(ev) {
 	ev.preventDefault()
 
 	let isHidden = document.querySelector('#download_tab_container').classList.toggle('tab_hidden')
@@ -753,9 +428,7 @@ window.addToQueue = function (queueItem, current = false) {
 	}
 }
 
-socket.on('addedToQueue', function (queueItem) {
-	addToQueue(queueItem)
-})
+socket.on('addedToQueue', addToQueue)
 
 window.downloadAction = function (evt) {
 	let icon = $(evt.currentTarget).text()
@@ -830,14 +503,6 @@ socket.on('removedFinishedDownloads', function () {
 	queueComplete = []
 })
 
-$('#clean_queue').on('click', function () {
-	socket.emit('removeFinishedDownloads')
-})
-
-$('#cancel_queue').on('click', function () {
-	socket.emit('cancelAllDownloads')
-})
-
 socket.on('updateQueue', function (update) {
 	if (update.uuid && queue.indexOf(update.uuid) > -1) {
 		if (update.downloaded) {
@@ -869,40 +534,41 @@ socket.on('updateQueue', function (update) {
 /* modals.js */
 // quality modal stuff
 var modalQuality = document.getElementById('modal_quality')
+var $modalQuality = $(modalQuality)
 modalQuality.open = false
 
 window.onclick = function (event) {
 	if (event.target == modalQuality && modalQuality.open) {
-		$(modalQuality).addClass('animated fadeOut')
+		$modalQuality.addClass('animated fadeOut')
 	}
 }
 
-$(modalQuality).on('webkitAnimationEnd', function () {
+$modalQuality.on('webkitAnimationEnd', function () {
 	if (modalQuality.open) {
-		$(this).removeClass('animated fadeOut')
-		$(this).css('display', 'none')
+		$modalQuality.removeClass('animated fadeOut')
+		$modalQuality.css('display', 'none')
 		modalQuality.open = false
 	} else {
-		$(this).removeClass('animated fadeIn')
-		$(this).css('display', 'block')
+		$modalQuality.removeClass('animated fadeIn')
+		$modalQuality.css('display', 'block')
 		modalQuality.open = true
 	}
 })
 
 window.openQualityModal = function (link) {
-	$(modalQuality).data('url', link)
-	$(modalQuality).css('display', 'block')
-	$(modalQuality).addClass('animated fadeIn')
+	$modalQuality.data('url', link)
+	$modalQuality.css('display', 'block')
+	$modalQuality.addClass('animated fadeIn')
 }
 
-window.modalQualityButton = function (event) {
+function modalQualityButton(event) {
 	if (!event.target.matches('.quality-button')) {
 		return
 	}
 
 	let bitrate = event.target.dataset.qualityValue
 
-	var url = $(modalQuality).data('url')
+	var url = $modalQuality.data('url')
 	sendAddToQueue(url, bitrate)
-	$(modalQuality).addClass('animated fadeOut')
+	$modalQuality.addClass('animated fadeOut')
 }
diff --git a/public/js/modules/artist-tab.js b/public/js/modules/artist-tab.js
new file mode 100644
index 0000000..937fa60
--- /dev/null
+++ b/public/js/modules/artist-tab.js
@@ -0,0 +1,90 @@
+import { socket } from './socket.js'
+
+export const ArtistTab = new Vue({
+	el: '#artist_tab',
+	data: {
+		currentTab: '',
+		sortKey: 'release_date',
+		sortOrder: 'desc',
+		title: '',
+		image: '',
+		type: '',
+		link: '',
+		head: null,
+		body: null
+	},
+	methods: {
+		addToQueue(e) {
+			e.stopPropagation()
+			sendAddToQueue(e.currentTarget.dataset.link)
+		},
+		openQualityModal(e) {
+			e.preventDefault()
+			openQualityModal(e.currentTarget.dataset.link)
+		},
+		moreInfo(url, e) {
+			if (e) e.preventDefault()
+			showTrackListSelective(url, true)
+		},
+		sortBy(key) {
+			if (key == this.sortKey) {
+				this.sortOrder = this.sortOrder == 'asc' ? 'desc' : 'asc'
+			} else {
+				this.sortKey = key
+				this.sortOrder = 'asc'
+			}
+		},
+		changeTab(tab) {
+			this.currentTab = tab
+		},
+		checkNewRelease(date) {
+			var g1 = new Date()
+			var g2 = new Date(date)
+			g2.setDate(g2.getDate() + 3)
+			g1.setHours(0, 0, 0, 0)
+			if (g1.getTime() <= g2.getTime()) {
+				return true
+			} else {
+				return false
+			}
+		}
+	},
+	computed: {
+		showTable() {
+			if (this.body) return _.orderBy(this.body[this.currentTab], this.sortKey, this.sortOrder)
+			else return []
+		}
+	}
+})
+
+export function resetArtistTab() {
+	ArtistTab.title = 'Loading...'
+	ArtistTab.image = ''
+	ArtistTab.type = ''
+	ArtistTab.currentTab = ''
+	ArtistTab.sortKey = 'release_date'
+	ArtistTab.sortOrder = 'desc'
+	ArtistTab.link = ''
+	ArtistTab.head = []
+	ArtistTab.body = null
+}
+
+socket.on('show_artist', data => {
+	ArtistTab.title = data.name
+	ArtistTab.image = data.picture_xl
+	ArtistTab.type = 'Artist'
+	ArtistTab.link = `https://www.deezer.com/artist/${data.id}`
+	ArtistTab.currentTab = Object.keys(data.releases)[0]
+	ArtistTab.sortKey = 'release_date'
+	ArtistTab.sortOrder = 'desc'
+	ArtistTab.head = [
+		{ title: 'Title', sortKey: 'title' },
+		{ title: 'Release Date', sortKey: 'release_date' },
+		{ title: '', width: '32px' }
+	]
+	if (_.isEmpty(data.releases)) {
+		ArtistTab.body = null
+	} else {
+		ArtistTab.body = data.releases
+	}
+})
diff --git a/public/js/modules/main-search.js b/public/js/modules/main-search.js
new file mode 100644
index 0000000..8817d90
--- /dev/null
+++ b/public/js/modules/main-search.js
@@ -0,0 +1,110 @@
+import { socket } from './socket.js'
+
+export const MainSearch = new Vue({
+	data: {
+		names: {
+			TOP_RESULT: 'Top Result',
+			TRACK: 'Tracks',
+			ARTIST: 'Artists',
+			ALBUM: 'Albums',
+			PLAYLIST: 'Playlists'
+		},
+		results: {
+			query: '',
+			allTab: {
+				ORDER: [],
+				TOP_RESULT: [],
+				ALBUM: {},
+				ARTIST: {},
+				TRACK: {},
+				PLAYLIST: {}
+			},
+			trackTab: {
+				data: [],
+				next: 0,
+				total: 0,
+				loaded: false
+			},
+			albumTab: {
+				data: [],
+				next: 0,
+				total: 0,
+				loaded: false
+			},
+			artistTab: {
+				data: [],
+				next: 0,
+				total: 0,
+				loaded: false
+			},
+			playlistTab: {
+				data: [],
+				next: 0,
+				total: 0,
+				loaded: false
+			}
+		}
+	},
+	methods: {
+		changeSearchTab(section) {
+			if (section != 'TOP_RESULT') {
+				document.getElementById(`search_${section.toLowerCase()}_tab`).click()
+			}
+		},
+		addToQueue: function (e) {
+			e.stopPropagation()
+			sendAddToQueue(e.currentTarget.dataset.link)
+		},
+		openQualityModal: function (e) {
+			e.preventDefault()
+			openQualityModal(e.currentTarget.dataset.link)
+		},
+		numberWithDots(x) {
+			return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, '.')
+		},
+		convertDuration(duration) {
+			//convert from seconds only to mm:ss format
+			let mm, ss
+			mm = Math.floor(duration / 60)
+			ss = duration - mm * 60
+			//add leading zero if ss < 0
+			if (ss < 10) {
+				ss = '0' + ss
+			}
+			return mm + ':' + ss
+		}
+	}
+}).$mount('#search_tab')
+
+socket.on('mainSearch', result => {
+	let resetObj = { data: [], next: 0, total: 0, loaded: false }
+	MainSearch.results.allTab = result
+	MainSearch.results.query = result.QUERY
+	MainSearch.results.trackTab = { ...resetObj }
+	MainSearch.results.albumTab = { ...resetObj }
+	MainSearch.results.artistTab = { ...resetObj }
+	MainSearch.results.playlistTab = { ...resetObj }
+	document.getElementById('search_all_tab').click()
+	document.getElementById('search_tab_content').style.display = 'block'
+	document.getElementById('main_search_tablink').click()
+})
+
+socket.on('search', result => {
+	let next = 0
+
+	if (result.next) {
+		next = parseInt(result.next.match(/index=(\d*)/)[1])
+	} else {
+		next = result.total
+	}
+
+	if (MainSearch.results[result.type + 'Tab'].total != result.total) {
+		MainSearch.results[result.type + 'Tab'].total = result.total
+	}
+
+	if (MainSearch.results[result.type + 'Tab'].next != next) {
+		MainSearch.results[result.type + 'Tab'].next = next
+		MainSearch.results[result.type + 'Tab'].data = MainSearch.results[result.type + 'Tab'].data.concat(result.data)
+	}
+	MainSearch.results[result.type + 'Tab'].loaded = true
+})
diff --git a/public/js/modules/search-tab/main-search.js b/public/js/modules/search-tab/main-search.js
deleted file mode 100644
index 73fcc44..0000000
--- a/public/js/modules/search-tab/main-search.js
+++ /dev/null
@@ -1,74 +0,0 @@
-export const MainSearch = new Vue({
-	el: '#search_tab',
-	data: {
-		names: {
-			TOP_RESULT: 'Top Result',
-			TRACK: 'Tracks',
-			ARTIST: 'Artists',
-			ALBUM: 'Albums',
-			PLAYLIST: 'Playlists'
-		},
-		results: {
-			query: '',
-			allTab: {
-				ORDER: [],
-				TOP_RESULT: [],
-				ALBUM: {},
-				ARTIST: {},
-				TRACK: {},
-				PLAYLIST: {}
-			},
-			trackTab: {
-				data: [],
-				next: 0,
-				total: 0,
-				loaded: false
-			},
-			albumTab: {
-				data: [],
-				next: 0,
-				total: 0,
-				loaded: false
-			},
-			artistTab: {
-				data: [],
-				next: 0,
-				total: 0,
-				loaded: false
-			},
-			playlistTab: {
-				data: [],
-				next: 0,
-				total: 0,
-				loaded: false
-			}
-		}
-	},
-	methods: {
-		changeSearchTab(section) {
-			if (section != 'TOP_RESULT') clickElement('search_' + section.toLowerCase() + '_tab')
-		},
-		addToQueue: function (e) {
-			e.stopPropagation()
-			sendAddToQueue(e.currentTarget.dataset.link)
-		},
-		openQualityModal: function (e) {
-			e.preventDefault()
-			openQualityModal(e.currentTarget.dataset.link)
-		},
-		numberWithDots(x) {
-			return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, '.')
-		},
-		convertDuration(duration) {
-			//convert from seconds only to mm:ss format
-			let mm, ss
-			mm = Math.floor(duration / 60)
-			ss = duration - mm * 60
-			//add leading zero if ss < 0
-			if (ss < 10) {
-				ss = '0' + ss
-			}
-			return mm + ':' + ss
-		}
-	}
-})
\ No newline at end of file
diff --git a/public/js/modules/settings-tab.js b/public/js/modules/settings-tab.js
new file mode 100644
index 0000000..19f7fe0
--- /dev/null
+++ b/public/js/modules/settings-tab.js
@@ -0,0 +1,61 @@
+import { toast } from './toasts.js'
+import { socket } from './socket.js'
+
+// Globals
+window.lastSettings = {}
+window.lastCredentials = {}
+
+export const SettingsTab = new Vue({
+	data() {
+		return {
+			settings: { tags: {} },
+			spotifyFeatures: {}
+		}
+	},
+	methods: {
+		copyARLtoClipboard() {
+			let copyText = this.$refs.loginInput
+
+			copyText.setAttribute('type', 'text')
+			copyText.select()
+			copyText.setSelectionRange(0, 99999)
+			document.execCommand('copy')
+			copyText.setAttribute('type', 'password')
+
+			toast('ARL copied to clipboard', 'assignment')
+		},
+		saveSettings() {
+			console.log(socket)
+
+			lastSettings = { ...SettingsTab.settings }
+			lastCredentials = { ...SettingsTab.spotifyFeatures }
+			socket.emit('saveSettings', lastSettings, lastCredentials)
+		},
+		login() {
+			let arl = this.$refs.loginInput.value
+			if (arl != '' && arl != localStorage.getItem('arl')) {
+				socket.emit('login', arl, true)
+			}
+		},
+		logout() {
+			socket.emit('logout')
+		}
+	}
+}).$mount('#settings_tab')
+
+socket.on('init_settings', function (settings, credentials) {
+	loadSettings(settings, credentials)
+	toast('Settings loaded!', 'settings')
+})
+
+socket.on('updateSettings', function (settings, credentials) {
+	loadSettings(settings, credentials)
+	toast('Settings updated!', 'settings')
+})
+
+function loadSettings(settings, spotifyCredentials) {
+	lastSettings = { ...settings }
+	lastCredentials = { ...spotifyCredentials }
+	SettingsTab.settings = settings
+	SettingsTab.spotifyFeatures = spotifyCredentials
+}
diff --git a/public/js/modules/socket.js b/public/js/modules/socket.js
new file mode 100644
index 0000000..dbfd7b2
--- /dev/null
+++ b/public/js/modules/socket.js
@@ -0,0 +1 @@
+export const socket = io.connect(window.location.href)
diff --git a/public/js/modules/toasts.js b/public/js/modules/toasts.js
new file mode 100644
index 0000000..427e18e
--- /dev/null
+++ b/public/js/modules/toasts.js
@@ -0,0 +1,36 @@
+let toastsWithId = {}
+
+export const toast = function (msg, icon = null, dismiss = true, id = null) {
+	if (toastsWithId[id]) {
+		let toastObj = toastsWithId[id]
+		let toastDOM = $(`div.toastify[toast_id=${id}]`)
+		if (msg) {
+			toastDOM.find('.toast-message').html(msg)
+		}
+		if (icon) {
+			if (icon == 'loading') icon = `<div class="circle-loader"></div>`
+			else icon = `<i class="material-icons">${icon}</i>`
+			toastDOM.find('.toast-icon').html(icon)
+		}
+		if (dismiss !== null && dismiss) {
+			setTimeout(function () {
+				toastObj.hideToast()
+				delete toastsWithId[id]
+			}, 3000)
+		}
+	} else {
+		if (icon == null) icon = ''
+		else if (icon == 'loading') icon = `<div class="circle-loader"></div>`
+		else icon = `<i class="material-icons">${icon}</i>`
+		let toastObj = Toastify({
+			text: `<span class="toast-icon">${icon}</span><span class="toast-message">${msg}</toast>`,
+			duration: dismiss ? 3000 : 0,
+			gravity: 'bottom',
+			position: 'left'
+		}).showToast()
+		if (id) {
+			toastsWithId[id] = toastObj
+			$(toastObj.toastElement).attr('toast_id', id)
+		}
+	}
+}
\ No newline at end of file
diff --git a/public/js/modules/tracklist-tab.js b/public/js/modules/tracklist-tab.js
new file mode 100644
index 0000000..17c5612
--- /dev/null
+++ b/public/js/modules/tracklist-tab.js
@@ -0,0 +1,111 @@
+import { socket } from './socket.js'
+
+export const TracklistTab = new Vue({
+	el: '#tracklist_tab',
+	data: {
+		title: '',
+		metadata: '',
+		release_date: '',
+		label: '',
+		explicit: false,
+		image: '',
+		type: '',
+		link: '',
+		head: null,
+		body: []
+	},
+	methods: {
+		addToQueue: function (e) {
+			e.stopPropagation()
+			sendAddToQueue(e.currentTarget.dataset.link)
+		},
+		openQualityModal: function (e) {
+			e.preventDefault()
+			openQualityModal(e.currentTarget.dataset.link)
+		},
+		toggleAll: function (e) {
+			this.body.forEach(item => {
+				if (item.type == 'track') {
+					item.selected = e.currentTarget.checked
+				}
+			})
+		},
+		selectedLinks: function () {
+			var selected = []
+			if (this.body) {
+				this.body.forEach(item => {
+					if (item.type == 'track' && item.selected) selected.push(item.link)
+				})
+			}
+			return selected.join(';')
+		},
+		convertDuration(duration) {
+			//convert from seconds only to mm:ss format
+			let mm, ss
+			mm = Math.floor(duration / 60)
+			ss = duration - mm * 60
+			//add leading zero if ss < 0
+			if (ss < 10) {
+				ss = '0' + ss
+			}
+			return mm + ':' + ss
+		}
+	}
+})
+
+export function resetTracklistTab() {
+	TracklistTab.title = 'Loading...'
+	TracklistTab.image = ''
+	TracklistTab.metadata = ''
+	TracklistTab.label = ''
+	TracklistTab.release_date = ''
+	TracklistTab.explicit = false
+	TracklistTab.type = ''
+	TracklistTab.head = []
+	TracklistTab.body = []
+}
+
+socket.on('show_album', 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
+	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' }
+	]
+	if (_.isEmpty(data.tracks)) {
+		TracklistTab.body = null
+	} else {
+		TracklistTab.body = data.tracks
+	}
+})
+
+socket.on('show_playlist', 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' }
+	]
+	if (_.isEmpty(data.tracks)) {
+		TracklistTab.body = null
+	} else {
+		TracklistTab.body = data.tracks
+	}
+})
diff --git a/public/js/vendor/httpVueLoader.js b/public/js/vendor/httpVueLoader.js
deleted file mode 100644
index 9bb2d9f..0000000
--- a/public/js/vendor/httpVueLoader.js
+++ /dev/null
@@ -1,478 +0,0 @@
-(function umd(root,factory){
-	if(typeof module==='object' && typeof exports === 'object' )
-		module.exports=factory()
-	else if(typeof define==='function' && define.amd)
-		define([],factory)
-	else
-		root.httpVueLoader=factory()
-})(this,function factory() {
-	'use strict';
-
-	var scopeIndex = 0;
-
-	StyleContext.prototype = {
-
-		withBase: function(callback) {
-
-			var tmpBaseElt;
-			if ( this.component.baseURI ) {
-
-				// firefox and chrome need the <base> to be set while inserting or modifying <style> in a document.
-				tmpBaseElt = document.createElement('base');
-				tmpBaseElt.href = this.component.baseURI;
-
-				var headElt = this.component.getHead();
-				headElt.insertBefore(tmpBaseElt, headElt.firstChild);
-			}
-
-			callback.call(this);
-
-			if ( tmpBaseElt )
-				this.component.getHead().removeChild(tmpBaseElt);
-		},
-
-		scopeStyles: function(styleElt, scopeName) {
-
-			function process() {
-
-				var sheet = styleElt.sheet;
-				var rules = sheet.cssRules;
-
-				for ( var i = 0; i < rules.length; ++i ) {
-
-					var rule = rules[i];
-					if ( rule.type !== 1 )
-						continue;
-
-					var scopedSelectors = [];
-
-					rule.selectorText.split(/\s*,\s*/).forEach(function(sel) {
-
-						scopedSelectors.push(scopeName+' '+sel);
-						var segments = sel.match(/([^ :]+)(.+)?/);
-						scopedSelectors.push(segments[1] + scopeName + (segments[2]||''));
-					});
-
-					var scopedRule = scopedSelectors.join(',') + rule.cssText.substr(rule.selectorText.length);
-					sheet.deleteRule(i);
-					sheet.insertRule(scopedRule, i);
-				}
-			}
-
-			try {
-				// firefox may fail sheet.cssRules with InvalidAccessError
-				process();
-			} catch (ex) {
-
-				if ( ex instanceof DOMException && ex.code === DOMException.INVALID_ACCESS_ERR ) {
-
-					styleElt.sheet.disabled = true;
-					styleElt.addEventListener('load', function onStyleLoaded() {
-
-						styleElt.removeEventListener('load', onStyleLoaded);
-
-						// firefox need this timeout otherwise we have to use document.importNode(style, true)
-						setTimeout(function() {
-
-							process();
-							styleElt.sheet.disabled = false;
-						});
-					});
-					return;
-				}
-
-				throw ex;
-			}
-		},
-
-		compile: function() {
-
-			var hasTemplate = this.template !== null;
-
-			var scoped = this.elt.hasAttribute('scoped');
-
-			if ( scoped ) {
-
-				// no template, no scopable style needed
-				if ( !hasTemplate )
-					return;
-
-				// firefox does not tolerate this attribute
-				this.elt.removeAttribute('scoped');
-			}
-
-			this.withBase(function() {
-
-				this.component.getHead().appendChild(this.elt);
-			});
-
-			if ( scoped )
-				this.scopeStyles(this.elt, '['+this.component.getScopeId()+']');
-
-			return Promise.resolve();
-		},
-
-		getContent: function() {
-
-			return this.elt.textContent;
-		},
-
-		setContent: function(content) {
-
-			this.withBase(function() {
-
-				this.elt.textContent = content;
-			});
-		}
-	};
-
-	function StyleContext(component, elt) {
-
-		this.component = component;
-		this.elt = elt;
-	}
-
-
-	ScriptContext.prototype = {
-
-		getContent: function() {
-
-			return this.elt.textContent;
-		},
-
-		setContent: function(content) {
-
-			this.elt.textContent = content;
-		},
-
-		compile: function(module) {
-
-			var childModuleRequire = function(childURL) {
-
-				return httpVueLoader.require(resolveURL(this.component.baseURI, childURL));
-			}.bind(this);
-
-			var childLoader = function(childURL, childName) {
-
-				return httpVueLoader(resolveURL(this.component.baseURI, childURL), childName);
-			}.bind(this);
-
-			try {
-				Function('exports', 'require', 'httpVueLoader', 'module', this.getContent()).call(this.module.exports, this.module.exports, childModuleRequire, childLoader, this.module);
-			} catch(ex) {
-
-				if ( !('lineNumber' in ex) ) {
-
-					return Promise.reject(ex);
-				}
-				var vueFileData = responseText.replace(/\r?\n/g, '\n');
-				var lineNumber = vueFileData.substr(0, vueFileData.indexOf(script)).split('\n').length + ex.lineNumber - 1;
-				throw new (ex.constructor)(ex.message, url, lineNumber);
-			}
-
-			return Promise.resolve(this.module.exports)
-			.then(httpVueLoader.scriptExportsHandler.bind(this))
-			.then(function(exports) {
-
-				this.module.exports = exports;
-			}.bind(this));
-		}
-	};
-
-	function ScriptContext(component, elt) {
-
-		this.component = component;
-		this.elt = elt;
-		this.module = { exports:{} };
-	}
-
-
-	TemplateContext.prototype = {
-
-		getContent: function() {
-
-			return this.elt.innerHTML;
-		},
-
-		setContent: function(content) {
-
-			this.elt.innerHTML = content;
-		},
-
-		getRootElt: function() {
-
-			var tplElt = this.elt.content || this.elt;
-
-			if ( 'firstElementChild' in tplElt )
-				return tplElt.firstElementChild;
-
-			for ( tplElt = tplElt.firstChild; tplElt !== null; tplElt = tplElt.nextSibling )
-				if ( tplElt.nodeType === Node.ELEMENT_NODE )
-					return tplElt;
-
-			return null;
-		},
-
-		compile: function() {
-
-			return Promise.resolve();
-		}
-	};
-
-	function TemplateContext(component, elt) {
-
-		this.component = component;
-		this.elt = elt;
-	}
-
-
-
-	Component.prototype = {
-
-		getHead: function() {
-
-			return document.head || document.getElementsByTagName('head')[0];
-		},
-
-		getScopeId: function() {
-
-			if ( this._scopeId === '' ) {
-
-				this._scopeId = 'data-s-' + (scopeIndex++).toString(36);
-				this.template.getRootElt().setAttribute(this._scopeId, '');
-			}
-			return this._scopeId;
-		},
-
-		load: function(componentURL) {
-
-			return httpVueLoader.httpRequest(componentURL)
-			.then(function(responseText) {
-
-				this.baseURI = componentURL.substr(0, componentURL.lastIndexOf('/')+1);
-				var doc = document.implementation.createHTMLDocument('');
-
-				// IE requires the <base> to come with <style>
-				doc.body.innerHTML = (this.baseURI ? '<base href="'+this.baseURI+'">' : '') + responseText;
-
-				for ( var it = doc.body.firstChild; it; it = it.nextSibling ) {
-
-					switch ( it.nodeName ) {
-						case 'TEMPLATE':
-							this.template = new TemplateContext(this, it);
-							break;
-						case 'SCRIPT':
-							this.script = new ScriptContext(this, it);
-							break;
-						case 'STYLE':
-							this.styles.push(new StyleContext(this, it));
-							break;
-					}
-				}
-
-				return this;
-			}.bind(this));
-		},
-
-		_normalizeSection: function(eltCx) {
-
-			var p;
-
-			if ( eltCx === null || !eltCx.elt.hasAttribute('src') ) {
-
-				p = Promise.resolve(null);
-			} else {
-
-				p = httpVueLoader.httpRequest(eltCx.elt.getAttribute('src'))
-				.then(function(content) {
-
-					eltCx.elt.removeAttribute('src');
-					return content;
-				});
-			}
-
-			return p
-			.then(function(content) {
-
-				if ( eltCx !== null && eltCx.elt.hasAttribute('lang') ) {
-
-					var lang = eltCx.elt.getAttribute('lang');
-					eltCx.elt.removeAttribute('lang');
-					return httpVueLoader.langProcessor[lang.toLowerCase()].call(this, content === null ? eltCx.getContent() : content);
-				}
-				return content;
-			}.bind(this))
-			.then(function(content) {
-
-				if ( content !== null )
-					eltCx.setContent(content);
-			});
-		},
-
-		normalize: function() {
-
-			return Promise.all(Array.prototype.concat(
-				this._normalizeSection(this.template),
-				this._normalizeSection(this.script),
-				this.styles.map(this._normalizeSection)
-			))
-			.then(function() {
-
-				return this;
-			}.bind(this));
-		},
-
-		compile: function() {
-
-			return Promise.all(Array.prototype.concat(
-				this.template && this.template.compile(),
-				this.script && this.script.compile(),
-				this.styles.map(function(style) { return style.compile(); })
-			))
-			.then(function() {
-
-				return this;
-			}.bind(this));
-		}
-	};
-
-	function Component(name) {
-
-		this.name = name;
-		this.template = null;
-		this.script = null;
-		this.styles = [];
-		this._scopeId = '';
-	}
-
-	function identity(value) {
-
-		return value;
-	}
-
-	function parseComponentURL(url) {
-
-		var comp = url.match(/(.*?)([^/]+?)\/?(\.vue)?(\?.*|#.*|$)/);
-		return {
-			name: comp[2],
-			url: comp[1] + comp[2] + (comp[3] === undefined ? '/index.vue' : comp[3]) + comp[4]
-		};
-	}
-
-	function resolveURL(baseURL, url) {
-
-		if (url.substr(0, 2) === './' || url.substr(0, 3) === '../') {
-			return baseURL + url;
-		}
-		return url;
-	}
-
-
-	httpVueLoader.load = function(url, name) {
-
-		return function() {
-
-			return new Component(name).load(url)
-			.then(function(component) {
-
-				return component.normalize();
-			})
-			.then(function(component) {
-
-				return component.compile();
-			})
-			.then(function(component) {
-
-				var exports = component.script !== null ? component.script.module.exports : {};
-
-				if ( component.template !== null )
-					exports.template = component.template.getContent();
-
-				if ( exports.name === undefined )
-					if ( component.name !== undefined )
-						exports.name = component.name;
-
-				exports._baseURI = component.baseURI;
-
-				return exports;
-			});
-		};
-	};
-
-
-	httpVueLoader.register = function(Vue, url) {
-
-		var comp = parseComponentURL(url);
-		Vue.component(comp.name, httpVueLoader.load(comp.url));
-	};
-
-	httpVueLoader.install = function(Vue) {
-
-		Vue.mixin({
-
-			beforeCreate: function () {
-
-				var components = this.$options.components;
-
-				for ( var componentName in components ) {
-
-					if ( typeof(components[componentName]) === 'string' && components[componentName].substr(0, 4) === 'url:' ) {
-
-						var comp = parseComponentURL(components[componentName].substr(4));
-
-						var componentURL = ('_baseURI' in this.$options) ? resolveURL(this.$options._baseURI, comp.url) : comp.url;
-
-						if ( isNaN(componentName) )
-							components[componentName] = httpVueLoader.load(componentURL, componentName);
-						else
-							components[componentName] = Vue.component(comp.name, httpVueLoader.load(componentURL, comp.name));
-					}
-				}
-			}
-		});
-	};
-
-	httpVueLoader.require = function(moduleName) {
-
-		return window[moduleName];
-	};
-
-	httpVueLoader.httpRequest = function(url) {
-
-		return new Promise(function(resolve, reject) {
-
-			var xhr = new XMLHttpRequest();
-			xhr.open('GET', url);
-            		xhr.responseType = 'text';
-
-			xhr.onreadystatechange = function() {
-
-				if ( xhr.readyState === 4 ) {
-
-					if ( xhr.status >= 200 && xhr.status < 300 )
-						resolve(xhr.responseText);
-					else
-						reject(xhr.status);
-				}
-			};
-
-			xhr.send(null);
-		});
-	};
-
-	httpVueLoader.langProcessor = {
-		html: identity,
-		js: identity,
-		css: identity
-	};
-
-	httpVueLoader.scriptExportsHandler = identity;
-
-	function httpVueLoader(url, name) {
-
-		var comp = parseComponentURL(url);
-		return httpVueLoader.load(comp.url, name);
-	}
-
-	return httpVueLoader;
-});

- {{data.title}} -		Title	Artists	Album
- - - {{release.title}} - +
	{{track.title + (track.title_version ? ' '+track.title_version : '')}}	+ {{track.artist.name}}	+ {{track.album.title}}	{{convertDuration(track.duration)}}		{{release.release_date}}

	{{ track.track_position }}	{{ track.title }} {{track.title_version}}	- {{ track.artist.name }}	{{ track.album.title }}	{{ convertDuration(track.duration) }}
{{ track.number }}

	{{ track.track_position }}	{{ track.title }} {{track.title_version}}	+ {{ track.artist.name }}	{{ track.album.title }}	{{ convertDuration(track.duration) }}
{{ track.number }}