continued js refactor: added downloads.js, quality-modal.js, stacke-tabs.js, minor improvements

public/index.html

@@ -50,16 +50,15 @@
 									<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>
+										<h1 @click="changeSearchTab(section)">{{ names[section] }}</h1>
 										<!-- Top result -->
-										<div v-if="section == 'TOP_RESULT'" class="top_result clickable"
+										<div v-if="section == 'TOP_RESULT'" class="top_result clickable" @click="handleClickTopResult"
-											v-on:click="window[results.allTab.TOP_RESULT[0].type+'View'](event)"
+											:data-id="results.allTab.TOP_RESULT[0].id">
-											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)"
+												<div role="button" aria-label="download" @contextmenu="openQualityModal(event)"
-													v-on:click="addToQueue(event)" v-bind:data-link="results.allTab.TOP_RESULT[0].link"
+													@click="addToQueue" 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">
@@ -78,15 +77,14 @@ <h1 v-on:click="changeSearchTab(section)">{{ names[section] }}</h1>
 															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)"
+													<td class="breakline"><span class="clickable" @click="artistView"
 															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">
+													<td class="breakline clickable" @click="albumView" 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)"
+													<td role="button" aria-label="download" @contextmenu="openQualityModal(event)"
-														v-on:click="addToQueue(event)"
+														@click="addToQueue" v-bind:data-link="'https://www.deezer.com/track/'+track.SNG_ID"
-														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>
@@ -94,14 +92,13 @@ <h1 v-on:click="changeSearchTab(section)">{{ names[section] }}</h1>
 										</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">
+												@click="artistView" 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)"
+													<div role="button" aria-label="download" @contextmenu="openQualityModal(event)"
-														v-on:click="addToQueue(event)"
+														@click="addToQueue" v-bind:data-link="'https://deezer.com/artist/'+release.ART_ID"
-														v-bind:data-link="'https://deezer.com/artist/'+release.ART_ID" class="download_overlay"><i
+														class="download_overlay"><i class="material-icons">get_app</i></div>
-															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>
@@ -109,12 +106,12 @@ <h1 v-on:click="changeSearchTab(section)">{{ names[section] }}</h1>
 										</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">
+												@click="albumView" 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)"
+													<div role="button" aria-label="download" @contextmenu="openQualityModal(event)"
-														v-on:click="addToQueue(event)" v-bind:data-link="'https://deezer.com/album/'+release.ALB_ID"
+														@click="addToQueue" 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>
@@ -123,13 +120,12 @@ <h1 v-on:click="changeSearchTab(section)">{{ names[section] }}</h1>
 										</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">
+												@click="playlistView" 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)"
+													<div role="button" aria-label="download" @contextmenu="openQualityModal(event)"
-														v-on:click="addToQueue(event)"
+														@click="addToQueue" v-bind:data-link="'https://deezer.com/playlist/'+release.PLAYLIST_ID"
-														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>
@@ -164,14 +160,14 @@ <h1>No Tracks found</h1>
 										<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">
+										<td class="breakline clickable" @click="artistView" 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">
+										<td class="breakline clickable" @click="albumView" 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)"
+										<td role="button" aria-label="download" @contextmenu="openQualityModal(event)" @click="addToQueue"
-											v-on:click="addToQueue(event)" v-bind:data-link="track.link"
+											v-bind:data-link="track.link" style="width: 56px; text-align: center;" class="clickable"><i
-											style="width: 56px; text-align: center;" class="clickable"><i class="material-icons">get_app</i>
+												class="material-icons">get_app</i>
 										</td>
 									</tr>
 								</table>
@@ -185,12 +181,12 @@ <h1>Loading</h1>
 									<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)"
+									<div v-for="release in results.albumTab.data" class="release clickable" @click="albumView"
 										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)"
+											<div role="button" aria-label="download" @contextmenu="openQualityModal(event)"
-												v-on:click="addToQueue(event)" v-bind:data-link="release.link" class="download_overlay"><i
+												@click="addToQueue" 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>
@@ -207,12 +203,12 @@ <h1>Loading</h1>
 									<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"
+									<div v-for="release in results.artistTab.data" class="release clickable" @click="artistView"
-										v-on:click="artistView(event)" v-bind:data-id="release.id">
+										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)"
+											<div role="button" aria-label="download" @contextmenu="openQualityModal(event)"
-												v-on:click="addToQueue(event)" v-bind:data-link="release.link" class="download_overlay"><i
+												@click="addToQueue" 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>
@@ -229,12 +225,12 @@ <h1>Loading</h1>
 									<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"
+									<div v-for="release in results.playlistTab.data" class="release clickable" @click="playlistView"
-										v-on:click="playlistView(event)" v-bind:data-id="release.id">
+										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)"
+											<div role="button" aria-label="download" @contextmenu="openQualityModal(event)"
-												v-on:click="addToQueue(event)" v-bind:data-link="release.link" class="download_overlay"><i
+												@click="addToQueue" 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>
@@ -472,9 +468,8 @@ <h1>About</h1>
 						<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)"
+							<div role="button" aria-label="download" @contextmenu="openQualityModal(event)" @click="addToQueue"
-								v-on:click="addToQueue(event)" v-bind:data-link="link" class="fab right"><i
+								v-bind:data-link="link" class="fab right"><i class="material-icons">get_app</i></div>
-									class="material-icons">get_app</i></div>
 						</header>
 
 						<div class="tab">
@@ -487,7 +482,7 @@ <h1>{{ title }}</h1>
 						<table>
 							<thead>
 								<tr>
-									<th v-for="data in head" v-on:click="data.sortKey ? sortBy(data.sortKey) : null"
+									<th v-for="data in head" @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}}
@@ -496,7 +491,7 @@ <h1>{{ title }}</h1>
 							</thead>
 							<tbody>
 								<tr v-for="release in showTable">
-									<td class="inline-flex clickable" v-on:click="albumView(event)" v-bind:data-id="release.id">
+									<td class="inline-flex clickable" @click="albumView" 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>
@@ -505,8 +500,8 @@ <h1>{{ title }}</h1>
 											style="color:#FF7300;">fiber_new</i>
 									</td>
 									<td>{{release.release_date}}</td>
-									<td v-on:click="addToQueue(event)" v-on:contextmenu="openQualityModal(event)"
+									<td @click="addToQueue" @contextmenu="openQualityModal(event)" v-bind:data-link="release.link"
-										v-bind:data-link="release.link" class="clickable"><i class="material-icons">file_download</i></td>
+										class="clickable"><i class="material-icons">file_download</i></td>
 								</tr>
 							</tbody>
 						</table>
@@ -529,7 +524,7 @@ <h2 class="inline-flex"><span v-if="metadata">{{ metadata }}</span><span class="
 								<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>
+									<th style="width: 32px"><input @click="toggleAll(event)" class="selectAll" type="checkbox"></th>
 								</tr>
 							</thead>
 							<tbody>
@@ -540,10 +535,10 @@ <h2 class="inline-flex"><span v-if="metadata">{{ metadata }}</span><span class="
 										<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">
+										<td class="clickable" @click="artistView" v-bind:data-id="track.artist.id">
 											{{ track.artist.name }}</td>
-										<td class="clickable" v-if="type == 'Playlist'" v-on:click="albumView(event)"
+										<td class="clickable" v-if="type == 'Playlist'" @click="albumView" v-bind:data-id="track.album.id">
-											v-bind:data-id="track.album.id">{{ track.album.title }}</td>
+											{{ track.album.title }}</td>
 										<td>{{ convertDuration(track.duration) }}</td>
 										<td><input class="trackCheckbox" type="checkbox" v-model="track.selected"></td>
 									</tr>
@@ -557,9 +552,9 @@ <h2 class="inline-flex"><span v-if="metadata">{{ metadata }}</span><span class="
 						<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)"
+							<button @contextmenu="openQualityModal(event)" @click="addToQueue" v-bind:data-link="link">Download
-								v-bind:data-link="link">Download {{ type }}</button>
+								{{ type }}</button>
-							<button class="with_icon" v-on:contextmenu="openQualityModal(event)" v-on:click="addToQueue(event)"
+							<button class="with_icon" @contextmenu="openQualityModal(event)" @click="addToQueue"
 								v-bind:data-link="selectedLinks()">Download selection<i
 									class="material-icons">file_download</i></button>
 							<button class="back-button">Back</button>

public/js/app.js

@@ -3,15 +3,15 @@
 import * as Utils from './modules/utils.js'
 
 /* ===== Vue components ===== */
-import { MainSearch } from './modules/main-search.js'
+import MainSearch from './modules/main-search.js'
-import { SettingsTab } from './modules/settings-tab.js'
+import SettingsTab from './modules/settings-tab.js'
 
+import { socket } from './modules/socket.js'
+import { toast } from './modules/toasts.js'
 import { resetTracklistTab } from './modules/tracklist-tab.js'
 import { resetArtistTab } from './modules/artist-tab.js'
-import { toast } from './modules/toasts.js'
+import Downloads from './modules/downloads.js'
-import { socket } from './modules/socket.js'
+import QualityModal from './modules/quality-modal.js'
-
-/* ===== Globals ===== */
 
 /* ===== Socketio listeners ===== */
 
@@ -20,14 +20,14 @@ socket.on('message', function (msg) {
 	console.log(msg)
 })
 
-socket.on('toast', data => {
+// Needs:
-	toast(data.msg, data.icon || null, data.dismiss !== undefined ? data.dismiss : true, data.id || null)
+// 1. toast
-})
-
 socket.on('logging_in', function () {
 	toast('Logging in', 'loading', false, 'login-toast')
 })
 
+// Needs:
+// 1. toast
 socket.on('logged_in', function (data) {
 	switch (data.status) {
 		case 1:
@@ -70,6 +70,8 @@ socket.on('logged_in', function (data) {
 	}
 })
 
+// Needs:
+// 1. toast
 socket.on('logged_out', function () {
 	toast('Logged out', 'done', true, 'login-toast')
 	localStorage.removeItem('arl')
@@ -86,17 +88,17 @@ socket.on('logged_out', function () {
  * @since			0.1.0 (?)
  */
 function linkEventListeners() {
-	document.getElementById('toggle_download_tab').addEventListener('click', toggleDownloadTab)
-	document.getElementById('modal_quality').addEventListener('click', modalQualityButton)
 	document.getElementById('sidebar').addEventListener('click', handleSidebarClick)
 	document.getElementById('search_tab').addEventListener('click', handleTabClick)
 
+	// Back buttons
 	const backButtons = Array.from(document.getElementsByClassName('back-button'))
 
 	backButtons.forEach(button => {
 		button.addEventListener('click', backTab)
 	})
 
+	// Queue buttons
 	document.getElementById('clean_queue').addEventListener('click', () => {
 		socket.emit('removeFinishedDownloads')
 	})
@@ -109,6 +111,8 @@ function linkEventListeners() {
 /* ===== App initialization ===== */
 function init() {
 	linkEventListeners()
+	Downloads.linkListeners()
+	QualityModal.init()
 
 	if (localStorage.getItem('arl')) {
 		let arl = localStorage.getItem('arl')
@@ -134,6 +138,14 @@ window.main_selected = ''
 window.windows_stack = []
 window.currentStack = {}
 
+// Needs:
+// 1. windows_stack
+// 2. currentStack
+// 3. main_selected
+// 4. SettingsTab
+// 5. lastSettings
+// 6. search_selected
+// 7. MainSearch
 window.changeTab = function (evt, section, tabName) {
 	windows_stack = []
 	currentStack = {}
@@ -154,7 +166,7 @@ window.changeTab = function (evt, section, tabName) {
 	window[section + '_selected'] = tabName
 
 	// Not choosing .currentTarget beacuse the event
-	// is delegated, so it refers to #sidebar
+	// is delegated
 	evt.target.classList.add('active')
 
 	// Check if you need to load more content in the search tab
@@ -163,10 +175,14 @@ window.changeTab = function (evt, section, tabName) {
 		['track_search', 'album_search', 'artist_search', 'playlist_search'].indexOf(search_selected) != -1 &&
 		MainSearch.results[search_selected.split('_')[0] + 'Tab'].data.length == 0
 	) {
-		search(search_selected.split('_')[0])
+		MainSearch.search(search_selected.split('_')[0])
 	}
 }
 
+// Needs:
+// 1. windows_stack
+// 2. main_selected
+// 3. currentStack
 window.showTab = function (type, id, back = false) {
 	if (windows_stack.length == 0) windows_stack.push({ tab: main_selected })
 	else if (!back) windows_stack.push(currentStack)
@@ -183,6 +199,13 @@ window.showTab = function (type, id, back = false) {
 	document.getElementById(tab).style.display = 'block'
 }
 
+// Needs:
+// 1. windows_stack
+// 2. main_selected
+// 3. resetArtistTab
+// 4. resetTracklistTab
+// 5. socket
+// 6. showTab
 function backTab() {
 	if (windows_stack.length == 1) {
 		document.getElementById(`main_${main_selected}link`).click()
@@ -198,6 +221,54 @@ function backTab() {
 	}
 }
 
+/* search.js */
+// Load more content when the search page is at the end
+// Needs:
+// 1. main_selected
+// 2. search_selected
+// 3. MainSearch
+$('#content').on('scroll', function () {
+	if ($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {
+		if (
+			main_selected == 'search_tab' &&
+			['track_search', 'album_search', 'artist_search', 'playlist_search'].indexOf(search_selected) != -1
+		) {
+			MainSearch.scrolledSearch(search_selected.split('_')[0])
+		}
+	}
+})
+
+// Search section
+// Needs:
+// 1. QualityModal
+// 2. Downloads
+// 3. socket
+// 4. MainSearch
+// 5. main_selected
+$('#searchbar').keyup(function (e) {
+	if (e.keyCode == 13) {
+		let term = this.value
+		if (Utils.isValidURL(term)) {
+			if (e.ctrlKey) {
+				QualityModal.open(term)
+			} else {
+				Downloads.sendAddToQueue(term)
+			}
+		} else {
+			if (term != MainSearch.query || main_selected == 'search_tab') {
+				document.getElementById('search_tab_content').style.display = 'none'
+				socket.emit('mainSearch', { term: term })
+			} else {
+				document.getElementById('search_all_tab').click()
+				document.getElementById('search_tab_content').style.display = 'block'
+				document.getElementById('main_search_tablink').click()
+			}
+		}
+	}
+})
+
+/* ===== Handlers ===== */
+
 /**
  * Handles click Event on the sidebar and changes tab
  * according to clicked icon.
@@ -236,73 +307,6 @@ function handleSidebarClick(event) {
 	}
 }
 
-/* stackedTabs.js */
-
-window.artistView = function (ev) {
-	let id = ev.currentTarget.dataset.id
-	resetArtistTab()
-	socket.emit('getTracklist', { type: 'artist', id: id })
-	showTab('artist', id)
-}
-window.albumView = function (ev) {
-	let id = ev.currentTarget.dataset.id
-	resetTracklistTab()
-	socket.emit('getTracklist', { type: 'album', id: id })
-	showTab('album', id)
-}
-window.playlistView = function (ev) {
-	let id = ev.currentTarget.dataset.id
-	resetTracklistTab()
-	socket.emit('getTracklist', { type: 'playlist', id: id })
-	showTab('playlist', id)
-}
-
-/* search.js */
-// Load more content when the search page is at the end
-$('#content').on('scroll', function () {
-	if ($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {
-		if (
-			main_selected == 'search_tab' &&
-			['track_search', 'album_search', 'artist_search', 'playlist_search'].indexOf(search_selected) != -1
-		) {
-			scrolledSearch(search_selected.split('_')[0])
-		}
-	}
-})
-
-window.search = function (type) {
-	let query = MainSearch.results.query
-	socket.emit('search', {
-		term: query,
-		type: type,
-		start: MainSearch.results[type + 'Tab'].next,
-		nb: 30
-	})
-}
-
-window.scrolledSearch = function (type) {
-	let query = MainSearch.results.query
-	if (MainSearch.results[type + 'Tab'].next < MainSearch.results[type + 'Tab'].total) {
-		socket.emit('search', {
-			term: query,
-			type: type,
-			start: MainSearch.results[type + 'Tab'].next,
-			nb: 30
-		})
-	}
-}
-
-window.sendAddToQueue = function (url, bitrate = null) {
-	if (url.indexOf(';') != -1) {
-		urls = url.split(';')
-		urls.forEach(url => {
-			socket.emit('addToQueue', { url: url, bitrate: bitrate })
-		})
-	} else if (url != '') {
-		socket.emit('addToQueue', { url: url, bitrate: bitrate })
-	}
-}
-
 function handleTabClick(event) {
 	let targetID = event.target.id
 
@@ -327,248 +331,3 @@ function handleTabClick(event) {
 			break
 	}
 }
-
-// Search section
-$('#searchbar').keyup(function (e) {
-	if (e.keyCode == 13) {
-		let term = this.value
-		if (Utils.isValidURL(term)) {
-			if (e.ctrlKey) {
-				openQualityModal(term)
-			} else {
-				sendAddToQueue(term)
-			}
-		} else {
-			if (term != MainSearch.query || main_selected == 'search_tab') {
-				document.getElementById('search_tab_content').style.display = 'none'
-				socket.emit('mainSearch', { term: term })
-			} else {
-				document.getElementById('search_all_tab').click()
-				document.getElementById('search_tab_content').style.display = 'block'
-				document.getElementById('main_search_tablink').click()
-			}
-		}
-	}
-})
-
-/* settings.js */
-
-/* downloadList.js */
-// Show/Hide Download Tab
-function toggleDownloadTab(ev) {
-	ev.preventDefault()
-
-	let isHidden = document.querySelector('#download_tab_container').classList.toggle('tab_hidden')
-
-	localStorage.setItem('downloadTabOpen', !isHidden)
-}
-
-var queueList = {}
-var queue = []
-var queueComplete = []
-
-socket.on('init_downloadQueue', function (data) {
-	if (data.queueComplete.length) {
-		data.queueComplete.forEach(item => {
-			addToQueue(data.queueList[item])
-		})
-	}
-	if (data.currentItem) {
-		addToQueue(data['queueList'][data.currentItem], true)
-	}
-	data.queue.forEach(item => {
-		addToQueue(data.queueList[item])
-	})
-})
-
-window.addToQueue = function (queueItem, current = false) {
-	queueList[queueItem.uuid] = queueItem
-	if (queueItem.downloaded + queueItem.failed == queueItem.size) queueComplete.push(queueItem.uuid)
-	else queue.push(queueItem.uuid)
-	$('#download_list').append(
-		`<div class="download_object" id="download_${queueItem.uuid}" data-deezerid="${queueItem.id}">
-		<div class="download_info">
-			<img width="75px" class="rounded coverart" src="${queueItem.cover}" alt="Cover ${queueItem.title}"/>
-			<div class="download_info_data">
-				<span class="download_line">${queueItem.title}</span> <span class="download_slim_separator"> - </span>
-				<span class="secondary-text">${queueItem.artist}</span>
-			</div>
-			<div class="download_info_status">
-				<span class="download_line"><span class="queue_downloaded">${queueItem.downloaded + queueItem.failed}</span>/${
-			queueItem.size
-		}</span>
-			</div>
-		</div>
-		<div class="download_bar">
-			<div class="progress"><div id="bar_${queueItem.uuid}" class="indeterminate"></div></div>
-			<i onclick="downloadAction(event)" class="material-icons queue_icon" data-uuid="${queueItem.uuid}">remove</i>
-		</div>
-	</div>`
-	)
-	if (queueItem.progress > 0 || current) {
-		$('#bar_' + queueItem.uuid)
-			.removeClass('indeterminate')
-			.addClass('determinate')
-	}
-	$('#bar_' + queueItem.uuid).css('width', queueItem.progress + '%')
-	if (queueItem.failed >= 1) {
-		$('#download_' + queueItem.uuid + ' .download_info_status').append(
-			`<span class="secondary-text inline-flex"><span class="download_slim_separator">(</span><span class="queue_failed">${queueItem.failed}</span><i class="material-icons">error_outline</i><span class="download_slim_separator">)</span></span>`
-		)
-	}
-	if (queueItem.downloaded + queueItem.failed == queueItem.size) {
-		let result_icon = $('#download_' + queueItem.uuid).find('.queue_icon')
-		if (queueItem.failed == 0) {
-			result_icon.text('done')
-		} else if (queueItem.failed == queueItem.size) {
-			result_icon.text('error')
-		} else {
-			result_icon.text('warning')
-		}
-	}
-}
-
-socket.on('addedToQueue', addToQueue)
-
-window.downloadAction = function (evt) {
-	let icon = $(evt.currentTarget).text()
-	let uuid = $(evt.currentTarget).data('uuid')
-	switch (icon) {
-		case 'remove':
-			socket.emit('removeFromQueue', uuid)
-			break
-		default:
-	}
-}
-
-socket.on('removedFromQueue', function (uuid) {
-	let index = queue.indexOf(uuid)
-	if (index > -1) {
-		queue.splice(index, 1)
-		$(`#download_${queueList[uuid].uuid}`).remove()
-		delete queueList[uuid]
-	}
-})
-
-socket.on('startDownload', function (uuid) {
-	$('#bar_' + uuid)
-		.removeClass('indeterminate')
-		.addClass('determinate')
-})
-
-socket.on('finishDownload', function (uuid) {
-	if (queue.indexOf(uuid) > -1) {
-		toast(`${queueList[uuid].title} finished downloading.`, 'done')
-		$('#bar_' + uuid).css('width', '100%')
-		let result_icon = $('#download_' + uuid).find('.queue_icon')
-		if (queueList[uuid].failed == 0) {
-			result_icon.text('done')
-		} else if (queueList[uuid].failed >= queueList[uuid].size) {
-			result_icon.text('error')
-		} else {
-			result_icon.text('warning')
-		}
-		let index = queue.indexOf(uuid)
-		if (index > -1) {
-			queue.splice(index, 1)
-			queueComplete.push(uuid)
-		}
-		if (queue.length <= 0) {
-			toast('All downloads completed!', 'done_all')
-		}
-	}
-})
-
-socket.on('removedAllDownloads', function (currentItem) {
-	queueComplete = []
-	if (currentItem == '') {
-		queue = []
-		queueList = {}
-		$('#download_list').html('')
-	} else {
-		queue = [currentItem]
-		let tempQueueItem = queueList[currentItem]
-		queueList = {}
-		queueList[currentItem] = tempQueueItem
-		$('.download_object').each(function (index) {
-			if ($(this).attr('id') != 'download_' + currentItem) $(this).remove()
-		})
-	}
-})
-
-socket.on('removedFinishedDownloads', function () {
-	queueComplete.forEach(item => {
-		$('#download_' + item).remove()
-	})
-	queueComplete = []
-})
-
-socket.on('updateQueue', function (update) {
-	if (update.uuid && queue.indexOf(update.uuid) > -1) {
-		if (update.downloaded) {
-			queueList[update.uuid].downloaded++
-			$('#download_' + update.uuid + ' .queue_downloaded').text(
-				queueList[update.uuid].downloaded + queueList[update.uuid].failed
-			)
-		}
-		if (update.failed) {
-			queueList[update.uuid].failed++
-			$('#download_' + update.uuid + ' .queue_downloaded').text(
-				queueList[update.uuid].downloaded + queueList[update.uuid].failed
-			)
-			if (queueList[update.uuid].failed == 1) {
-				$('#download_' + update.uuid + ' .download_info_status').append(
-					`<span class="secondary-text inline-flex"><span class="download_slim_separator">(</span><span class="queue_failed">1</span> <i class="material-icons">error_outline</i><span class="download_slim_separator">)</span></span>`
-				)
-			} else {
-				$('#download_' + update.uuid + ' .queue_failed').text(queueList[update.uuid].failed)
-			}
-		}
-		if (update.progress) {
-			queueList[update.uuid].progress = update.progress
-			$('#bar_' + update.uuid).css('width', update.progress + '%')
-		}
-	}
-})
-
-/* 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.on('webkitAnimationEnd', function () {
-	if (modalQuality.open) {
-		$modalQuality.removeClass('animated fadeOut')
-		$modalQuality.css('display', 'none')
-		modalQuality.open = false
-	} else {
-		$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')
-}
-
-function modalQualityButton(event) {
-	if (!event.target.matches('.quality-button')) {
-		return
-	}
-
-	let bitrate = event.target.dataset.qualityValue
-
-	var url = $modalQuality.data('url')
-	sendAddToQueue(url, bitrate)
-	$modalQuality.addClass('animated fadeOut')
-}

public/js/modules/artist-tab.js

@@ -1,4 +1,7 @@
 import { socket } from './socket.js'
+import { albumView } from './stacked-tabs.js'
+import Downloads from './downloads.js'
+import QualityModal from './quality-modal.js'
 
 export const ArtistTab = new Vue({
 	el: '#artist_tab',
@@ -14,13 +17,14 @@ export const ArtistTab = new Vue({
 		body: null
 	},
 	methods: {
+		albumView,
 		addToQueue(e) {
 			e.stopPropagation()
-			sendAddToQueue(e.currentTarget.dataset.link)
+			Downloads.sendAddToQueue(e.currentTarget.dataset.link)
 		},
 		openQualityModal(e) {
 			e.preventDefault()
-			openQualityModal(e.currentTarget.dataset.link)
+			QualityModal.open(e.currentTarget.dataset.link)
 		},
 		moreInfo(url, e) {
 			if (e) e.preventDefault()
@@ -54,6 +58,9 @@ export const ArtistTab = new Vue({
 			if (this.body) return _.orderBy(this.body[this.currentTab], this.sortKey, this.sortOrder)
 			else return []
 		}
+	},
+	mounted() {
+		console.log('artist tab mounted')
 	}
 })
 

public/js/modules/downloads.js

@@ -0,0 +1,247 @@
+import { socket } from './socket.js'
+import { toast } from './toasts.js'
+
+let queueList = {}
+let queue = []
+let queueComplete = []
+
+const downloadListEl = document.getElementById('download_list')
+
+function linkListeners() {
+	downloadListEl.addEventListener('click', handleListClick)
+	document.getElementById('toggle_download_tab').addEventListener('click', toggleDownloadTab)
+}
+
+function sendAddToQueue(url, bitrate = null) {
+	if (url.indexOf(';') !== -1) {
+		let urls = url.split(';')
+		urls.forEach(url => {
+			socket.emit('addToQueue', { url: url, bitrate: bitrate })
+		})
+	} else if (url != '') {
+		socket.emit('addToQueue', { url: url, bitrate: bitrate })
+	}
+}
+
+function addToQueue(queueItem, current = false) {
+	queueList[queueItem.uuid] = queueItem
+	if (queueItem.downloaded + queueItem.failed == queueItem.size) {
+		queueComplete.push(queueItem.uuid)
+	} else {
+		queue.push(queueItem.uuid)
+	}
+	$(downloadListEl).append(
+		`<div class="download_object" id="download_${queueItem.uuid}" data-deezerid="${queueItem.id}">
+		<div class="download_info">
+			<img width="75px" class="rounded coverart" src="${queueItem.cover}" alt="Cover ${queueItem.title}"/>
+			<div class="download_info_data">
+				<span class="download_line">${queueItem.title}</span> <span class="download_slim_separator"> - </span>
+				<span class="secondary-text">${queueItem.artist}</span>
+			</div>
+			<div class="download_info_status">
+				<span class="download_line"><span class="queue_downloaded">${queueItem.downloaded + queueItem.failed}</span>/${
+			queueItem.size
+		}</span>
+			</div>
+		</div>
+		<div class="download_bar">
+			<div class="progress"><div id="bar_${queueItem.uuid}" class="indeterminate"></div></div>
+			<i class="material-icons queue_icon" data-uuid="${queueItem.uuid}">remove</i>
+		</div>
+	</div>`
+	)
+	if (queueItem.progress > 0 || current) {
+		$('#bar_' + queueItem.uuid)
+			.removeClass('indeterminate')
+			.addClass('determinate')
+	}
+	$('#bar_' + queueItem.uuid).css('width', queueItem.progress + '%')
+	if (queueItem.failed >= 1) {
+		$('#download_' + queueItem.uuid + ' .download_info_status').append(
+			`<span class="secondary-text inline-flex"><span class="download_slim_separator">(</span><span class="queue_failed">${queueItem.failed}</span><i class="material-icons">error_outline</i><span class="download_slim_separator">)</span></span>`
+		)
+	}
+	if (queueItem.downloaded + queueItem.failed == queueItem.size) {
+		let result_icon = $('#download_' + queueItem.uuid).find('.queue_icon')
+		if (queueItem.failed == 0) {
+			result_icon.text('done')
+		} else if (queueItem.failed == queueItem.size) {
+			result_icon.text('error')
+		} else {
+			result_icon.text('warning')
+		}
+	}
+}
+
+function initQueue(data) {
+	if (data.queueComplete.length) {
+		data.queueComplete.forEach(item => {
+			addToQueue(data.queueList[item])
+		})
+	}
+	if (data.currentItem) {
+		addToQueue(data['queueList'][data.currentItem], true)
+	}
+	data.queue.forEach(item => {
+		addToQueue(data.queueList[item])
+	})
+}
+
+function startDownload(uuid) {
+	$('#bar_' + uuid)
+		.removeClass('indeterminate')
+		.addClass('determinate')
+}
+
+socket.on('startDownload', startDownload)
+
+function handleListClick(event) {
+	if (!event.target.matches('.queue_icon[data-uuid]')) {
+		return
+	}
+
+	let icon = event.target.innerText
+	let uuid = $(event.target).data('uuid')
+
+	switch (icon) {
+		case 'remove':
+			socket.emit('removeFromQueue', uuid)
+			break
+		default:
+	}
+}
+
+// Show/Hide Download Tab
+function toggleDownloadTab(ev) {
+	ev.preventDefault()
+
+	let isHidden = document.querySelector('#download_tab_container').classList.toggle('tab_hidden')
+
+	localStorage.setItem('downloadTabOpen', !isHidden)
+}
+
+socket.on('init_downloadQueue', initQueue)
+socket.on('addedToQueue', addToQueue)
+
+function removeFromQueue(uuid) {
+	let index = queue.indexOf(uuid)
+	if (index > -1) {
+		queue.splice(index, 1)
+		$(`#download_${queueList[uuid].uuid}`).remove()
+		delete queueList[uuid]
+	}
+}
+
+// Needs:
+// 1. socket
+// 2. queue
+// 3. queueList
+socket.on('removedFromQueue', removeFromQueue)
+
+// Needs:
+// 1. socket
+// 2. queue
+// 3. queueList
+// 4. queueComplete
+// 5. toast
+function finishDownload(uuid) {
+	if (queue.indexOf(uuid) > -1) {
+		toast(`${queueList[uuid].title} finished downloading.`, 'done')
+		$('#bar_' + uuid).css('width', '100%')
+		let result_icon = $('#download_' + uuid).find('.queue_icon')
+		if (queueList[uuid].failed == 0) {
+			result_icon.text('done')
+		} else if (queueList[uuid].failed >= queueList[uuid].size) {
+			result_icon.text('error')
+		} else {
+			result_icon.text('warning')
+		}
+		let index = queue.indexOf(uuid)
+		if (index > -1) {
+			queue.splice(index, 1)
+			queueComplete.push(uuid)
+		}
+		if (queue.length <= 0) {
+			toast('All downloads completed!', 'done_all')
+		}
+	}
+}
+
+socket.on('finishDownload', finishDownload)
+
+// Needs:
+// 1. socket
+// 2. queueComplete
+// 3. queue
+// 4. queueList
+
+function removeAllDownloads(currentItem) {
+	queueComplete = []
+	if (currentItem == '') {
+		queue = []
+		queueList = {}
+		$(downloadListEl).html('')
+	} else {
+		queue = [currentItem]
+		let tempQueueItem = queueList[currentItem]
+		queueList = {}
+		queueList[currentItem] = tempQueueItem
+		$('.download_object').each(function (index) {
+			if ($(this).attr('id') != 'download_' + currentItem) $(this).remove()
+		})
+	}
+}
+
+socket.on('removedAllDownloads', removeAllDownloads)
+
+// Needs:
+// 1. socket
+// 2. queueComplete
+function removedFinishedDownloads() {
+	queueComplete.forEach(item => {
+		$('#download_' + item).remove()
+	})
+	queueComplete = []
+}
+
+socket.on('removedFinishedDownloads', removedFinishedDownloads)
+
+// Needs:
+// 1. socket
+// 2. queue
+// 3. queueList
+function updateQueue(update) {
+	if (update.uuid && queue.indexOf(update.uuid) > -1) {
+		if (update.downloaded) {
+			queueList[update.uuid].downloaded++
+			$('#download_' + update.uuid + ' .queue_downloaded').text(
+				queueList[update.uuid].downloaded + queueList[update.uuid].failed
+			)
+		}
+		if (update.failed) {
+			queueList[update.uuid].failed++
+			$('#download_' + update.uuid + ' .queue_downloaded').text(
+				queueList[update.uuid].downloaded + queueList[update.uuid].failed
+			)
+			if (queueList[update.uuid].failed == 1) {
+				$('#download_' + update.uuid + ' .download_info_status').append(
+					`<span class="secondary-text inline-flex"><span class="download_slim_separator">(</span><span class="queue_failed">1</span> <i class="material-icons">error_outline</i><span class="download_slim_separator">)</span></span>`
+				)
+			} else {
+				$('#download_' + update.uuid + ' .queue_failed').text(queueList[update.uuid].failed)
+			}
+		}
+		if (update.progress) {
+			queueList[update.uuid].progress = update.progress
+			$('#bar_' + update.uuid).css('width', update.progress + '%')
+		}
+	}
+}
+
+socket.on('updateQueue', updateQueue)
+
+export default {
+	linkListeners,
+	sendAddToQueue,
+	addToQueue
+}

public/js/modules/main-search.js

@@ -1,6 +1,9 @@
 import { socket } from './socket.js'
+import { artistView, albumView, playlistView } from './stacked-tabs.js'
+import Downloads from './downloads.js'
+import QualityModal from './quality-modal.js'
 
-export const MainSearch = new Vue({
+const MainSearch = new Vue({
 	data: {
 		names: {
 			TOP_RESULT: 'Top Result',
@@ -46,6 +49,27 @@ export const MainSearch = new Vue({
 		}
 	},
 	methods: {
+		artistView,
+		albumView,
+		playlistView,
+		handleClickTopResult(event) {
+			let topResultType = this.results.allTab.TOP_RESULT[0].type
+
+			switch (topResultType) {
+				case 'artist':
+					artistView(event)
+					break
+				case 'album':
+					albumView(event)
+					break
+				case 'playlist':
+					playlistView(event)
+					break
+
+				default:
+					break
+			}
+		},
 		changeSearchTab(section) {
 			if (section != 'TOP_RESULT') {
 				document.getElementById(`search_${section.toLowerCase()}_tab`).click()
@@ -53,11 +77,11 @@ export const MainSearch = new Vue({
 		},
 		addToQueue: function (e) {
 			e.stopPropagation()
-			sendAddToQueue(e.currentTarget.dataset.link)
+			Downloads.sendAddToQueue(e.currentTarget.dataset.link)
 		},
 		openQualityModal: function (e) {
 			e.preventDefault()
-			openQualityModal(e.currentTarget.dataset.link)
+			QualityModal.open(e.currentTarget.dataset.link)
 		},
 		numberWithDots(x) {
 			return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, '.')
@@ -72,7 +96,28 @@ export const MainSearch = new Vue({
 				ss = '0' + ss
 			}
 			return mm + ':' + ss
+		},
+		search(type) {
+			socket.emit('search', {
+				term: this.results.query,
+				type: type,
+				start: this.results[type + 'Tab'].next,
+				nb: 30
+			})
+		},
+		scrolledSearch(type) {
+			if (this.results[type + 'Tab'].next < this.results[type + 'Tab'].total) {
+				socket.emit('search', {
+					term: this.results.query,
+					type: type,
+					start: this.results[type + 'Tab'].next,
+					nb: 30
+				})
+			}
 		}
+	},
+	mounted() {
+		console.log('main search mounted')
 	}
 }).$mount('#search_tab')
 
@@ -108,3 +153,5 @@ socket.on('search', result => {
 	}
 	MainSearch.results[result.type + 'Tab'].loaded = true
 })
+
+export default MainSearch

public/js/modules/quality-modal.js

@@ -0,0 +1,47 @@
+import Downloads from './downloads.js'
+
+const QualityModal = {
+	// Defaults
+	open: false,
+	url: ''
+}
+
+function init() {
+	QualityModal.element = document.getElementById('modal_quality')
+
+	linkListeners()
+}
+
+function open(link) {
+	QualityModal.url = link
+	QualityModal.element.style.display = 'block'
+	QualityModal.element.classList.add('animated', 'fadeIn')
+}
+
+function linkListeners() {
+	QualityModal.element.addEventListener('click', handleClick)
+	QualityModal.element.addEventListener('webkitAnimationEnd', handleAnimationEnd)
+}
+
+function handleClick(event) {
+	QualityModal.element.classList.add('animated', 'fadeOut')
+
+	if (!event.target.matches('.quality-button')) {
+		return
+	}
+
+	let bitrate = event.target.dataset.qualityValue
+
+	Downloads.sendAddToQueue(QualityModal.url, bitrate)
+}
+
+function handleAnimationEnd() {
+	QualityModal.element.classList.remove('animated', QualityModal.open ? 'fadeOut' : 'fadeIn')
+	QualityModal.element.style.display = QualityModal.open ? 'none' : 'block'
+	QualityModal.open = !QualityModal.open
+}
+
+export default {
+	init,
+	open
+}

public/js/modules/settings-tab.js

@@ -5,7 +5,7 @@ import { socket } from './socket.js'
 window.lastSettings = {}
 window.lastCredentials = {}
 
-export const SettingsTab = new Vue({
+const SettingsTab = new Vue({
 	data() {
 		return {
 			settings: { tags: {} },
@@ -25,8 +25,6 @@ export const SettingsTab = new Vue({
 			toast('ARL copied to clipboard', 'assignment')
 		},
 		saveSettings() {
-			console.log(socket)
-
 			lastSettings = { ...SettingsTab.settings }
 			lastCredentials = { ...SettingsTab.spotifyFeatures }
 			socket.emit('saveSettings', lastSettings, lastCredentials)
@@ -59,3 +57,5 @@ function loadSettings(settings, spotifyCredentials) {
 	SettingsTab.settings = settings
 	SettingsTab.spotifyFeatures = spotifyCredentials
 }
+
+export default SettingsTab

public/js/modules/stacked-tabs.js

@@ -0,0 +1,26 @@
+import { resetArtistTab } from './artist-tab.js'
+import { resetTracklistTab } from './tracklist-tab.js'
+import { socket } from './socket.js'
+
+export function artistView(ev) {
+	let id = ev.currentTarget.dataset.id
+	resetArtistTab()
+	socket.emit('getTracklist', { type: 'artist', id: id })
+	showTab('artist', id)
+}
+
+export function albumView(ev) {
+	let id = ev.currentTarget.dataset.id
+	console.log('album view', id)
+	resetTracklistTab()
+	socket.emit('getTracklist', { type: 'album', id: id })
+	showTab('album', id)
+}
+
+export function playlistView(ev) {
+	let id = ev.currentTarget.dataset.id
+	console.log('playlist view', id)
+	resetTracklistTab()
+	socket.emit('getTracklist', { type: 'playlist', id: id })
+	showTab('playlist', id)
+}

public/js/modules/toasts.js

@@ -1,3 +1,5 @@
+import { socket } from './socket.js'
+
 let toastsWithId = {}
 
 export const toast = function (msg, icon = null, dismiss = true, id = null) {
@@ -34,3 +36,7 @@ export const toast = function (msg, icon = null, dismiss = true, id = null) {
 		}
 	}
 }
+
+socket.on('toast', data => {
+	toast(data.msg, data.icon || null, data.dismiss !== undefined ? data.dismiss : true, data.id || null)
+})

public/js/modules/tracklist-tab.js

@@ -1,4 +1,7 @@
 import { socket } from './socket.js'
+import { artistView, albumView } from './stacked-tabs.js'
+import Downloads from './downloads.js'
+import QualityModal from './quality-modal.js'
 
 export const TracklistTab = new Vue({
 	el: '#tracklist_tab',
@@ -15,13 +18,15 @@ export const TracklistTab = new Vue({
 		body: []
 	},
 	methods: {
+		artistView,
+		albumView,
 		addToQueue: function (e) {
 			e.stopPropagation()
-			sendAddToQueue(e.currentTarget.dataset.link)
+			Downloads.sendAddToQueue(e.currentTarget.dataset.link)
 		},
 		openQualityModal: function (e) {
 			e.preventDefault()
-			openQualityModal(e.currentTarget.dataset.link)
+			QualityModal.open(e.currentTarget.dataset.link)
 		},
 		toggleAll: function (e) {
 			this.body.forEach(item => {
@@ -50,6 +55,9 @@ export const TracklistTab = new Vue({
 			}
 			return mm + ':' + ss
 		}
+	},
+	mounted() {
+		console.log('tracklist tab mounted')
 	}
 })