added artist and tracklist tab routing

src/app.js

@@ -7,7 +7,7 @@ window.vol = {
 
 import App from '@components/App.vue'
 import i18n from '@/plugins/i18n'
-// import router from '@/plugins/router'
+import router from '@/plugins/router'
 
 import $ from 'jquery'
 import { socket } from '@/utils/socket'
@@ -23,7 +23,7 @@ function startApp() {
 
 function mountApp() {
 	new Vue({
-		// router,
+		router,
 		i18n,
 		render: h => h(App)
 	}).$mount('#app')

src/components/ArtistTab.vue

@@ -1,5 +1,5 @@
 <template>
-	<div id="artist_tab" class="main_tabcontent fixed_footer image_header">
+	<div id="artist_tab" class="main_tabcontent fixed_footer image_header" ref="root">
 		<header
 			class="inline-flex"
 			:style="{
@@ -64,7 +64,7 @@
 							explicit
 						</i>
 						{{ release.title }}
-						<i v-if="checkNewRelease(release.release_date)" class="material-icons" style="color:#FF7300;">
+						<i v-if="checkNewRelease(release.release_date)" class="material-icons" style="color: #ff7300;">
 							fiber_new
 						</i>
 					</td>
@@ -84,7 +84,7 @@
 		</table>
 
 		<footer>
-			<button class="back-button">{{ $t('globals.back') }}</button>
+			<button class="back-button" @click="backTab">{{ $t('globals.back') }}</button>
 		</footer>
 	</div>
 </template>
@@ -93,7 +93,7 @@
 import { isEmpty, orderBy } from 'lodash-es'
 import { socket } from '@/utils/socket'
 import Downloads from '@/utils/downloads'
-import { showView } from '@js/tabs'
+import { showView, backTab } from '@js/tabs'
 import EventBus from '@/utils/EventBus'
 
 export default {
@@ -112,6 +112,7 @@ export default {
 		}
 	},
 	methods: {
+		backTab,
 		albumView: showView.bind(null, 'album'),
 		reset() {
 			this.title = 'Loading...'
@@ -157,6 +158,8 @@ export default {
 			return g1.getTime() <= g2.getTime()
 		},
 		showArtist(data) {
+			this.reset()
+
 			const { name, picture_xl, id, releases } = data
 
 			this.title = name
@@ -185,11 +188,17 @@ export default {
 		}
 	},
 	mounted() {
+		this.$refs.root.style.display = 'block'
+		console.log('artist mounted')
+
 		socket.on('show_artist', this.showArtist)
 
-		EventBus.$on('artistTab:reset', this.reset)
 		EventBus.$on('artistTab:updateSelected', this.updateSelected)
 		EventBus.$on('artistTab:changeTab', this.changeTab)
+	},
+	beforeDestroy() {
+		console.log('artist bef dest')
+		this.$refs.root.style.display = 'none'
 	}
 }
 </script>

src/components/TheContent.vue

@@ -1,28 +1,30 @@
 <template>
 	<section id="content" @scroll="handleContentScroll" ref="content">
 		<div id="container">
-			<ArtistTab />
+			<router-view></router-view>
+
+			<!-- <ArtistTab /> -->
+			<!-- <TracklistTab /> -->
+			<!-- <TheHomeTab /> -->
 			<TheChartsTab />
 			<TheFavoritesTab />
 			<TheErrorsTab />
-			<TheHomeTab />
 			<TheLinkAnalyzerTab />
 			<TheAboutTab />
 			<TheSettingsTab />
 			<TheMainSearch :scrolled-search-type="newScrolled" />
-			<TracklistTab />
 		</div>
 	</section>
 </template>
 
 <script>
-import ArtistTab from '@components/ArtistTab.vue'
+// import ArtistTab from '@components/ArtistTab.vue'
-import TracklistTab from '@components/TracklistTab.vue'
+// import TracklistTab from '@components/TracklistTab.vue'
 
 import TheChartsTab from '@components/TheChartsTab.vue'
 import TheFavoritesTab from '@components/TheFavoritesTab.vue'
 import TheErrorsTab from '@components/TheErrorsTab.vue'
-import TheHomeTab from '@components/TheHomeTab.vue'
+// import TheHomeTab from '@components/TheHomeTab.vue'
 import TheLinkAnalyzerTab from '@components/TheLinkAnalyzerTab.vue'
 import TheAboutTab from '@components/TheAboutTab.vue'
 import TheSettingsTab from '@components/TheSettingsTab.vue'
@@ -33,16 +35,16 @@ import EventBus from '@/utils/EventBus.js'
 
 export default {
 	components: {
-		ArtistTab,
+		// ArtistTab,
+		// TracklistTab
 		TheChartsTab,
 		TheFavoritesTab,
 		TheErrorsTab,
-		TheHomeTab,
+		// TheHomeTab,
 		TheLinkAnalyzerTab,
 		TheAboutTab,
 		TheSettingsTab,
-		TheMainSearch,
+		TheMainSearch
-		TracklistTab
 	},
 	data: () => ({
 		newScrolled: null

src/components/TheHomeTab.vue

@@ -1,5 +1,5 @@
 <template>
-	<div id="home_tab" class="main_tabcontent">
+	<div id="home_tab" class="main_tabcontent" ref="root">
 		<h2 class="page_heading">{{ $t('globals.welcome') }}</h2>
 		<section id="home_not_logged_in" class="home_section" ref="notLogged">
 			<p id="home_not_logged_text">{{ $t('home.needTologin') }}</p>
@@ -103,11 +103,19 @@ export default {
 		}
 	},
 	mounted() {
+		console.log('home mounted')
+		this.$refs.root.style.display = 'block'
+
 		if (localStorage.getItem('arl')) {
 			this.$refs.notLogged.classList.add('hide')
 		}
 
+		// ! Need to init home everytime, atm this is called only on connect
 		socket.on('init_home', this.initHome)
+	},
+	beforeDestroy() {
+		console.log('home bef dest')
+		this.$refs.root.style.display = 'none'
 	}
 }
 </script>

src/components/TheMainContent.vue

@@ -1,7 +1,5 @@
 <template>
 	<main id="main_content">
-		<!-- <router-link to="/tracklist/132">Go to Foo</router-link> -->
-		<!-- <router-view></router-view> -->
 		<TheMiddleSection />
 		<TheDownloadTab />
 	</main>
@@ -15,9 +13,6 @@ export default {
 	components: {
 		TheMiddleSection,
 		TheDownloadTab
-	},
-	mounted() {
-		console.log(this.$route)
 	}
 }
 </script>

src/components/TheSettingsTab.vue

@@ -611,6 +611,56 @@ export default {
 		accountNum: 0,
 		accounts: []
 	}),
+	mounted() {
+		this.locales = this.$i18n.availableLocales
+
+		EventBus.$on('settingsTab:revertSettings', this.revertSettings)
+		EventBus.$on('settingsTab:revertCredentials', this.revertCredentials)
+
+		this.$refs.loggedInInfo.classList.add('hide')
+
+		let storedLocale = localStorage.getItem('locale')
+
+		if (storedLocale) {
+			this.$i18n.locale = storedLocale
+			this.currentLocale = storedLocale
+		}
+
+		let storedArl = localStorage.getItem('arl')
+
+		if (storedArl) {
+			this.$refs.loginInput.value = storedArl.trim()
+		}
+
+		let storedAccountNum = localStorage.getItem('accountNum')
+
+		if (storedAccountNum) {
+			this.accountNum = storedAccountNum
+		}
+
+		let spotifyUser = localStorage.getItem('spotifyUser')
+
+		if (spotifyUser) {
+			this.lastUser = spotifyUser
+			this.spotifyUser = spotifyUser
+			socket.emit('update_userSpotifyPlaylists', spotifyUser)
+		}
+
+		this.changeSlimDownloads = 'true' === localStorage.getItem('slimDownloads')
+
+		let volume = parseInt(localStorage.getItem('previewVolume'))
+		if (isNaN(volume)) {
+			volume = 80
+			localStorage.setItem('previewVolume', volume)
+		}
+
+		window.vol.preview_max_volume = volume
+
+		socket.on('init_settings', this.initSettings)
+		socket.on('updateSettings', this.updateSettings)
+		socket.on('accountChanged', this.accountChanged)
+		socket.on('familyAccounts', this.initAccounts)
+	},
 	computed: {
 		changeSlimDownloads: {
 			get() {
@@ -705,55 +755,6 @@ export default {
 		resetSettings() {
 			this.settings = { ...this.defaultSettings }
 		}
-	},
-	mounted() {
-		this.locales = this.$i18n.availableLocales
-
-		EventBus.$on('settingsTab:revertSettings', this.revertSettings)
-		EventBus.$on('settingsTab:revertCredentials', this.revertCredentials)
-
-		this.$refs.loggedInInfo.classList.add('hide')
-
-		let storedLocale = localStorage.getItem('locale')
-
-		if (storedLocale) {
-			this.$i18n.locale = storedLocale
-			this.currentLocale = storedLocale
-		}
-
-		let storedArl = localStorage.getItem('arl')
-
-		if (storedArl) {
-			this.$refs.loginInput.value = storedArl.trim()
-		}
-
-		let storedAccountNum = localStorage.getItem('accountNum')
-
-		if (storedAccountNum) {
-			this.accountNum = storedAccountNum
-		}
-
-		let spotifyUser = localStorage.getItem('spotifyUser')
-
-		if (spotifyUser) {
-			this.lastUser = spotifyUser
-			this.spotifyUser = spotifyUser
-			socket.emit('update_userSpotifyPlaylists', spotifyUser)
-		}
-
-		this.changeSlimDownloads = 'true' === localStorage.getItem('slimDownloads')
-
-		let volume = parseInt(localStorage.getItem('previewVolume'))
-		if (isNaN(volume)) {
-			volume = 80
-			localStorage.setItem('previewVolume', volume)
-		}
-		window.vol.preview_max_volume = volume
-
-		socket.on('init_settings', this.initSettings)
-		socket.on('updateSettings', this.updateSettings)
-		socket.on('accountChanged', this.accountChanged)
-		socket.on('familyAccounts', this.initAccounts)
 	}
 }
 </script>

src/components/TheTrackPreview.vue

@@ -104,15 +104,7 @@ export default {
 		previewMouseLeave(event) {
 			const { currentTarget: obj } = event
 
-			if (
+			if (($(obj).parent().attr('playing') && this.previewStopped) || !$(obj).parent().attr('playing')) {
-				($(obj)
-					.parent()
-					.attr('playing') &&
-					this.previewStopped) ||
-				!$(obj)
-					.parent()
-					.attr('playing')
-			) {
 				$(obj).css({ opacity: 0 }, 200)
 			}
 		}

src/components/TracklistTab.vue

@@ -1,5 +1,5 @@
 <template>
-	<div id="tracklist_tab" class="main_tabcontent fixed_footer image_header">
+	<div id="tracklist_tab" class="main_tabcontent fixed_footer image_header" ref="root">
 		<header
 			:style="{
 				'background-image':
@@ -144,7 +144,7 @@
 			>
 				{{ $t('tracklist.downloadSelection') }}<i class="material-icons">file_download</i>
 			</button>
-			<button class="back-button">{{ $t('globals.back') }}</button>
+			<button class="back-button" @click="backTab">{{ $t('globals.back') }}</button>
 		</footer>
 	</div>
 </template>
@@ -152,7 +152,7 @@
 <script>
 import { isEmpty } from 'lodash-es'
 import { socket } from '@/utils/socket'
-import { showView } from '@js/tabs.js'
+import { showView, backTab } from '@js/tabs.js'
 import Downloads from '@/utils/downloads'
 import Utils from '@/utils/utils'
 import EventBus from '@/utils/EventBus'
@@ -171,12 +171,14 @@ export default {
 		body: []
 	}),
 	methods: {
+		backTab,
 		artistView: showView.bind(null, 'artist'),
 		albumView: showView.bind(null, 'album'),
 		playPausePreview(e) {
 			EventBus.$emit('trackPreview:playPausePreview', e)
 		},
 		reset() {
+			console.log('resetto')
 			this.title = 'Loading...'
 			this.image = ''
 			this.metadata = ''
@@ -211,6 +213,8 @@ export default {
 		},
 		convertDuration: Utils.convertDuration,
 		showAlbum(data) {
+			this.reset()
+
 			const {
 				id: albumID,
 				title: albumTitle,
@@ -239,6 +243,8 @@ export default {
 			}
 		},
 		showPlaylist(data) {
+			this.reset()
+
 			const {
 				id: playlistID,
 				title: playlistTitle,
@@ -263,6 +269,8 @@ export default {
 			}
 		},
 		showSpotifyPlaylist(data) {
+			this.reset()
+
 			const {
 				uri: playlistURI,
 				name: playlistName,
@@ -294,12 +302,16 @@ export default {
 	},
 	mounted() {
 		console.log('tracklist mounted')
-		EventBus.$on('tracklistTab:reset', this.reset)
+		this.$refs.root.style.display = 'block'
 		EventBus.$on('tracklistTab:selectRow', this.selectRow)
 
 		socket.on('show_album', this.showAlbum)
 		socket.on('show_playlist', this.showPlaylist)
 		socket.on('show_spotifyplaylist', this.showSpotifyPlaylist)
+	},
+	beforeDestroy() {
+		console.log('tracklist bef dest')
+		this.$refs.root.style.display = 'none'
 	}
 }
 </script>

src/js/tabs.js

@@ -1,5 +1,6 @@
 import { socket } from '@/utils/socket'
 import EventBus from '@/utils/EventBus'
+import router from '@/plugins/router'
 
 /* ===== Globals ====== */
 window.search_selected = ''
@@ -7,35 +8,6 @@ window.main_selected = ''
 window.windows_stack = []
 window.currentStack = {}
 
-// Exporting this function out of the default export
-// because it's used in components that are needed
-// in this file too
-export function showView(viewType, event) {
-	// console.error('SHOW VIEW')
-	const {
-		currentTarget: {
-			dataset: { id }
-		}
-	} = event
-
-	switch (viewType) {
-		case 'artist':
-			EventBus.$emit('artistTab:reset')
-			break
-		case 'album':
-		case 'playlist':
-		case 'spotifyplaylist':
-			EventBus.$emit('tracklistTab:reset')
-			break
-
-		default:
-			break
-	}
-
-	socket.emit('getTracklist', { type: viewType, id })
-	showTab(viewType, id)
-}
-
 /**
  * Changes the tab to the wanted one
  * Need to understand the difference from showTab
@@ -87,14 +59,41 @@ export function changeTab(sidebarEl, section, tabName) {
 	}
 }
 
+export function showView(viewType, event) {
+	const {
+		currentTarget: {
+			dataset: { id }
+		}
+	} = event
+	const isArtist = viewType === 'artist'
+	const name = isArtist ? 'Artist' : 'Tracklist'
+	const params = isArtist ? { id } : { type: viewType, id }
+
+	router.push({
+		name,
+		params
+	})
+
+	// showTab(viewType, id)
+}
+
 /**
  * Shows the passed tab, keeping track of the one that the user is coming from.
  *
  * Needs EventBus
  */
 function showTab(type, id, back = false) {
+	return
+	updateStack(type, id, back)
+	window.tab = type === 'artist' ? 'artist_tab' : 'tracklist_tab'
+	displayTabs()
+}
+
+function updateStack(type, id, back) {
 	if (window.windows_stack.length === 0) {
-		window.windows_stack.push({ tab: window.main_selected })
+		window.windows_stack.push({
+			tab: window.main_selected
+		})
 	} else if (!back) {
 		if (window.currentStack.type === 'artist') {
 			EventBus.$emit('artistTab:updateSelected')
@@ -103,18 +102,21 @@ function showTab(type, id, back = false) {
 		window.windows_stack.push(window.currentStack)
 	}
 
-	window.tab = type === 'artist' ? 'artist_tab' : 'tracklist_tab'
-
 	window.currentStack = { type, id }
+}
+
+function displayTabs() {
 	let tabcontent = document.getElementsByClassName('main_tabcontent')
 
 	for (let i = 0; i < tabcontent.length; i++) {
 		tabcontent[i].style.display = 'none'
 	}
 
-	document.getElementById(window.tab).style.display = 'block'
+	let newTab = document.getElementById(window.tab)
 
-	EventBus.$emit('trackPreview:stopStackedTabsPreview')
+	if (newTab) {
+		newTab.style.display = 'block'
+	}
 }
 
 /**
@@ -122,42 +124,31 @@ function showTab(type, id, back = false) {
  *
  * Needs EventBus and socket
  */
-function backTab() {
+export function backTab() {
+	router.back()
+
+	// ! Need to implement the memory of the opened artist tab
+	return
+
 	if (window.windows_stack.length == 1) {
-		document.getElementById(`main_${window.main_selected}link`).click()
+		console.log(window.main_selected)
+		if (document.getElementById(`main_${window.main_selected}link`)) {
+			// document.getElementById(`main_${window.main_selected}link`).click()
+		}
 	} else {
 		// Retrieving tab type and tab id
 		let data = window.windows_stack.pop()
 		let { type, id, selected } = data
 
-		if (type === 'artist') {
+		if (type === 'artist' && selected) {
-			EventBus.$emit('artistTab:reset')
-
-			if (selected) {
 			EventBus.$emit('artistTab:changeTab', selected)
 		}
-		} else {
+
-			EventBus.$emit('tracklistTab:reset')
+		// showTab(type, id, true)
 	}
-
-		socket.emit('getTracklist', { type, id })
-		showTab(type, id, true)
-	}
-
-	EventBus.$emit('trackPreview:stopStackedTabsPreview')
-}
-
-function _linkListeners() {
-	const backButtons = Array.prototype.slice.call(document.getElementsByClassName('back-button'))
-
-	backButtons.forEach(button => {
-		button.addEventListener('click', backTab)
-	})
 }
 
 export function init() {
 	// Open default tab
 	changeTab(document.getElementById('main_home_tablink'), 'main', 'home_tab')
-
-	_linkListeners()
 }

src/plugins/router.js

@@ -1,18 +1,30 @@
 import Vue from 'vue'
 import VueRouter from 'vue-router'
+import { socket } from '@/utils/socket'
+import EventBus from '@/utils/EventBus'
 
+import TheHomeTab from '@components/TheHomeTab.vue'
 import TracklistTab from '@components/TracklistTab.vue'
-
+import ArtistTab from '@components/ArtistTab.vue'
-console.log(TracklistTab)
 
 Vue.use(VueRouter)
 
 const routes = [
 	{
-		path: '/tracklist/:id',
+		path: '/',
+		component: TheHomeTab
+	},
+	{
+		path: '/tracklist/:type/:id',
+		name: 'Tracklist',
 		component: TracklistTab
 	},
-	// 404
+	{
+		path: '/artist/:id',
+		name: 'Artist',
+		component: ArtistTab
+	},
+	// 404 client side
 	{
 		path: '*',
 		component: TracklistTab
@@ -29,7 +41,28 @@ const router = new VueRouter({
 })
 
 router.beforeEach((to, from, next) => {
-	console.log({ from, to })
+	console.log('before route change', to)
+
+	switch (to.name) {
+		case 'Artist':
+			socket.emit('getTracklist', {
+				type: 'artist',
+				id: to.params.id
+			})
+			break
+		case 'Tracklist':
+			socket.emit('getTracklist', {
+				type: to.params.type,
+				id: to.params.id
+			})
+			break
+
+		default:
+			break
+	}
+
+	EventBus.$emit('trackPreview:stopStackedTabsPreview')
+
 	next()
 })