chore: removed main_selected global; perf: added route links instead of showView method and removed tabs.js

rollup.config.js

@@ -31,10 +31,6 @@ export default {
 					find: '@',
 					replacement: __dirname + '/src'
 				},
-				{
-					find: '@js',
-					replacement: __dirname + '/src/js'
-				},
 				{
 					find: '@components',
 					replacement: __dirname + '/src/components'

src/components/ArtistTab.vue

@@ -47,7 +47,11 @@
 			</thead>
 			<tbody>
 				<tr v-for="release in showTable" :key="release.id">
-					<td class="inline-flex clickable" @click="albumView" :data-id="release.id">
+					<router-link
+						tag="td"
+						class="inline-flex clickable"
+						:to="{ name: 'Tracklist', params: { type: 'album', id: release.id } }"
+					>
 						<img
 							class="rounded coverart"
 							:src="release.cover_small"
@@ -58,7 +62,7 @@
 						<i v-if="checkNewRelease(release.release_date)" class="material-icons" style="color: #ff7300">
 							fiber_new
 						</i>
-					</td>
+					</router-link>
 					<td>{{ release.release_date }}</td>
 					<td>{{ release.nb_song }}</td>
 					<td @click.stop="addToQueue" :data-link="release.link" class="clickable">
@@ -78,7 +82,6 @@
 import { isEmpty, orderBy } from 'lodash-es'
 import { socket } from '@/utils/socket'
 import Downloads from '@/utils/downloads'
-import { showView } from '@js/tabs'
 import EventBus from '@/utils/EventBus'
 
 export default {
@@ -97,7 +100,6 @@ export default {
 		}
 	},
 	methods: {
-		albumView: showView.bind(null, 'album'),
 		reset() {
 			this.title = 'Loading...'
 			this.image = ''
@@ -124,10 +126,9 @@ export default {
 		changeTab(tab) {
 			this.currentTab = tab
 		},
-		getCurrentTab() {
+		updateSelected() {
-			return this.currentTab
+			// Last tab opened logic
 		},
-		updateSelected() {},
 		checkNewRelease(date) {
 			let g1 = new Date()
 			let g2 = new Date(date)

src/components/TheChartsTab.vue

@@ -71,20 +71,20 @@
 								(track.title_version && track.title.indexOf(track.title_version) == -1 ? ' ' + track.title_version : '')
 							}}
 						</td>
-						<td
+						<router-link
-							class="table__cell--medium table__cell--center breakline clickable"
+							tag="td"
-							@click="artistView"
+							class="table__cell table__cell--medium table__cell--center breakline clickable"
-							:data-id="track.artist.id"
+							:to="{ name: 'Artist', params: { id: track.artist.id } }"
 						>
 							{{ track.artist.name }}
-						</td>
+						</router-link>
-						<td
+						<router-link
+							tag="td"
 							class="table__cell--medium table__cell--center breakline clickable"
-							@click="albumView"
+							:to="{ name: 'Tracklist', params: { type: 'album', id: track.album.id } }"
-							:data-id="track.album.id"
 						>
 							{{ track.album.title }}
-						</td>
+						</router-link>
 						<td class="table__cell--small table__cell--center">
 							{{ convertDuration(track.duration) }}
 						</td>
@@ -107,7 +107,6 @@
 <script>
 import { mapGetters } from 'vuex'
 import { socket } from '@/utils/socket'
-import { showView } from '@js/tabs.js'
 import { sendAddToQueue } from '@/utils/downloads'
 import { convertDuration } from '@/utils/utils'
 
@@ -136,8 +135,6 @@ export default {
 	},
 	methods: {
 		convertDuration,
-		artistView: showView.bind(null, 'artist'),
-		albumView: showView.bind(null, 'album'),
 		playPausePreview(e) {
 			EventBus.$emit('trackPreview:playPausePreview', e)
 		},

src/components/TheContextMenu.vue

@@ -13,9 +13,9 @@
 </template>
 
 <script>
-import Downloads from '@/utils/downloads'
+import { sendAddToQueue } from '@/utils/downloads'
-import downloadQualities from '@js/qualities'
 import { generatePath, copyToClipboard } from '@/utils/utils'
+import { downloadQualities } from '@/data/qualities'
 
 export default {
 	data() {
@@ -95,10 +95,10 @@ export default {
 
 			downloadQualities.forEach((quality, index) => {
 				options[quality.objName] = {
-					label: `${this.$t('globals.download', {thing: quality.label})}`,
+					label: `${this.$t('globals.download', { thing: quality.label })}`,
 					show: false,
 					position: nextValuePosition + index,
-					action: this.tryToDownloadTrack.bind(null, quality.value)
+					action: sendAddToQueue.bind(null, this.deezerHref, quality.value)
 				}
 			})
 
@@ -123,7 +123,6 @@ export default {
 	},
 	methods: {
 		showMenu(contextMenuEvent) {
-			// contextMenuEvent.preventDefault()
 			const { pageX, pageY, target: elementClicked } = contextMenuEvent
 			const path = generatePath(elementClicked)
 			let deezerLink = null
@@ -213,9 +212,6 @@ export default {
 			downloadQualities.forEach(quality => {
 				this.options[quality.objName].show = true
 			})
-		},
-		tryToDownloadTrack(qualityValue) {
-			Downloads.sendAddToQueue(this.deezerHref, qualityValue)
 		}
 	}
 }

src/components/TheFavoritesTab.vue

@@ -29,35 +29,12 @@
 				<h1>{{ $t('favorites.noPlaylists') }}</h1>
 			</div>
 			<div class="release_grid" v-if="playlists.length > 0 || spotifyPlaylists > 0">
-				<div v-for="release in playlists" class="release clickable" @click="playlistView" :data-id="release.id">
+				<router-link
-					<div class="cover_container">
+					tag="div"
-						<img aria-hidden="true" class="rounded coverart" :src="release.picture_medium" />
+					v-for="release in playlists"
-						<button
+					:key="release.id"
-							role="button"
-							aria-label="download"
-							@click.stop="addToQueue"
-							:data-link="release.link"
-							class="download_overlay"
-							tabindex="0"
-						>
-							<i class="material-icons" :title="$t('globals.download_hint')">get_app</i>
-						</button>
-					</div>
-					<p class="primary-text">{{ release.title }}</p>
-					<p class="secondary-text">
-						{{
-							`${$t('globals.by', { artist: release.creator.name })} - ${$tc(
-								'globals.listTabs.trackN',
-								release.nb_tracks
-							)}`
-						}}
-					</p>
-				</div>
-				<div
-					v-for="release in spotifyPlaylists"
 					class="release clickable"
-					@click="spotifyPlaylistView"
+					:to="{ name: 'Tracklist', params: { type: 'playlist', id: release.id } }"
-					:data-id="release.id"
 				>
 					<div class="cover_container">
 						<img aria-hidden="true" class="rounded coverart" :src="release.picture_medium" />
@@ -81,7 +58,37 @@
 							)}`
 						}}
 					</p>
+				</router-link>
+				<router-link
+					tag="div"
+					v-for="release in spotifyPlaylists"
+					:key="release.id"
+					class="release clickable"
+					:to="{ name: 'Tracklist', params: { type: 'spotifyplaylist', id: release.id } }"
+				>
+					<div class="cover_container">
+						<img aria-hidden="true" class="rounded coverart" :src="release.picture_medium" />
+						<button
+							role="button"
+							aria-label="download"
+							@click.stop="addToQueue"
+							:data-link="release.link"
+							class="download_overlay"
+							tabindex="0"
+						>
+							<i class="material-icons" :title="$t('globals.download_hint')">get_app</i>
+						</button>
 					</div>
+					<p class="primary-text">{{ release.title }}</p>
+					<p class="secondary-text">
+						{{
+							`${$t('globals.by', { artist: release.creator.name })} - ${$tc(
+								'globals.listTabs.trackN',
+								release.nb_tracks
+							)}`
+						}}
+					</p>
+				</router-link>
 			</div>
 		</div>
 
@@ -90,7 +97,13 @@
 				<h1>{{ $t('favorites.noAlbums') }}</h1>
 			</div>
 			<div class="release_grid" v-if="albums.length > 0">
-				<div v-for="release in albums" class="release clickable" @click="albumView" :data-id="release.id">
+				<router-link
+					tag="div"
+					class="release clickable"
+					v-for="release in albums"
+					:key="release.id"
+					:to="{ name: 'Tracklist', params: { type: 'album', id: release.id } }"
+				>
 					<div class="cover_container">
 						<img aria-hidden="true" class="rounded coverart" :src="release.cover_medium" />
 						<button
@@ -106,7 +119,7 @@
 					</div>
 					<p class="primary-text">{{ release.title }}</p>
 					<p class="secondary-text">{{ `${$t('globals.by', { artist: release.artist.name })}` }}</p>
-				</div>
+				</router-link>
 			</div>
 		</div>
 
@@ -115,7 +128,13 @@
 				<h1>{{ $t('favorites.noArtists') }}</h1>
 			</div>
 			<div class="release_grid" v-if="artists.length > 0">
-				<div v-for="release in artists" class="release clickable" @click="artistView" :data-id="release.id">
+				<router-link
+					tag="div"
+					class="release clickable"
+					v-for="release in artists"
+					:key="release.id"
+					:to="{ name: 'Artist', params: { id: release.id } }"
+				>
 					<div class="cover_container">
 						<img aria-hidden="true" class="circle coverart" :src="release.picture_medium" />
 						<button
@@ -130,7 +149,7 @@
 						</button>
 					</div>
 					<p class="primary-text">{{ release.name }}</p>
-				</div>
+				</router-link>
 			</div>
 		</div>
 
@@ -169,20 +188,20 @@
 							(track.title_version && track.title.indexOf(track.title_version) == -1 ? ' ' + track.title_version : '')
 						}}
 					</td>
-					<td
+					<router-link
-						class="table__cell--medium table__cell--center breakline clickable"
+						tag="td"
-						@click="artistView"
+						class="table__cell table__cell--medium table__cell--center breakline clickable"
-						:data-id="track.artist.id"
+						:to="{ name: 'Artist', params: { id: track.artist.id } }"
 					>
 						{{ track.artist.name }}
-					</td>
+					</router-link>
-					<td
+					<router-link
+						tag="td"
 						class="table__cell--medium table__cell--center breakline clickable"
-						@click="albumView"
+						:to="{ name: 'Tracklist', params: { type: 'album', id: track.album.id } }"
-						:data-id="track.album.id"
 					>
 						{{ track.album.title }}
-					</td>
+					</router-link>
 					<td class="table__cell--small">
 						{{ convertDuration(track.duration) }}
 					</td>
@@ -214,8 +233,6 @@
 </style>
 
 <script>
-import { showView } from '@js/tabs'
-
 import { socket } from '@/utils/socket'
 import { sendAddToQueue } from '@/utils/downloads'
 import { convertDuration } from '@/utils/utils'
@@ -261,10 +278,6 @@ export default {
 		})
 	},
 	methods: {
-		artistView: showView.bind(null, 'artist'),
-		albumView: showView.bind(null, 'album'),
-		playlistView: showView.bind(null, 'playlist'),
-		spotifyPlaylistView: showView.bind(null, 'spotifyplaylist'),
 		playPausePreview(e) {
 			EventBus.$emit('trackPreview:playPausePreview', e)
 		},

src/components/TheHomeTab.vue

@@ -12,13 +12,13 @@
 		<section v-if="playlists.length" class="home_section">
 			<h3 class="section_heading">{{ $t('home.sections.popularPlaylists') }}</h3>
 			<div class="release_grid">
-				<div
+				<router-link
+					tag="div"
 					v-for="release in playlists"
 					:key="release.id"
 					class="release clickable"
-					@click="playlistView"
+					:to="{ name: 'Tracklist', params: { type: 'playlist', id: release.id } }"
-					@keyup.enter="playlistView"
+					@keyup.enter.native="$router.push({ name: 'Tracklist', params: { type: 'playlist', id: release.id } })"
-					:data-id="release.id"
 					tabindex="0"
 				>
 					<div class="cover_container">
@@ -43,19 +43,20 @@
 							)}`
 						}}
 					</p>
-				</div>
+				</router-link>
 			</div>
 		</section>
 
 		<section v-if="albums.length" class="home_section">
 			<h3 class="section_heading">{{ $t('home.sections.popularAlbums') }}</h3>
 			<div class="release_grid">
-				<div
+				<router-link
+					tag="div"
 					v-for="release in albums"
 					:key="release.id"
 					class="release clickable"
-					@click="albumView"
+					:to="{ name: 'Tracklist', params: { type: 'album', id: release.id } }"
-					@keyup.enter="albumView"
+					@keyup.enter.native="$router.push({ name: 'Tracklist', params: { type: 'album', id: release.id } })"
 					:data-id="release.id"
 					tabindex="0"
 				>
@@ -74,7 +75,7 @@
 					</div>
 					<p class="primary-text">{{ release.title }}</p>
 					<p class="secondary-text">{{ `${$t('globals.by', { artist: release.artist.name })}` }}</p>
-				</div>
+				</router-link>
 			</div>
 		</section>
 	</div>
@@ -83,7 +84,6 @@
 <script>
 import { mapGetters } from 'vuex'
 
-import { showView } from '@js/tabs'
 import { sendAddToQueue } from '@/utils/downloads'
 import { getHomeData } from '@/data/home'
 
@@ -100,15 +100,9 @@ export default {
 		this.initHome(homeData)
 	},
 	computed: {
-		...mapGetters(['isLoggedIn']),
+		...mapGetters(['isLoggedIn'])
-		needToWait() {
-			return this.getHomeData.albums.data.length === 0 && this.getHomeData.playlists.data.length === 0
-		}
 	},
 	methods: {
-		artistView: showView.bind(null, 'artist'),
-		albumView: showView.bind(null, 'album'),
-		playlistView: showView.bind(null, 'playlist'),
 		addToQueue(e) {
 			sendAddToQueue(e.currentTarget.dataset.link)
 		},

src/components/TheLinkAnalyzerTab.vue

@@ -25,24 +25,39 @@
 			>
 				<div>
 					<h1>{{ title }}</h1>
-					<h2 v-if="type == 'track'">
+					<h2 v-if="type === 'track'">
 						<i18n path="globals.by" tag="span">
-							<span place="artist" class="clickable" @click="artistView" :data-id="data.artist.id">{{
+							<router-link
-								data.artist.name
+								tag="span"
-							}}</span>
+								place="artist"
+								class="clickable"
+								:to="{ name: 'Artist', params: { id: data.artist.id } }"
+							>
+								{{ data.artist.name }}
+							</router-link>
 						</i18n>
 						•
 						<i18n path="globals.in" tag="span">
-							<span place="album" class="clickable" @click="albumView" :data-id="data.album.id">{{
+							<router-link
-								data.album.title
+								tag="span"
-							}}</span>
+								place="album"
+								class="clickable"
+								:to="{ name: 'Tracklist', params: { type: 'album', id: data.album.id } }"
+							>
+								{{ data.album.title }}
+							</router-link>
 						</i18n>
 					</h2>
-					<h2 v-else-if="type == 'album'">
+					<h2 v-else-if="type === 'album'">
 						<i18n path="globals.by" tag="span">
-							<span place="artist" class="clickable" @click="artistView" :data-id="data.artist.id">{{
+							<router-link
-								data.artist.name
+								tag="span"
-							}}</span>
+								place="artist"
+								class="clickable"
+								:to="{ name: 'Artist', params: { id: data.artist.id } }"
+							>
+								{{ data.artist.name }}
+							</router-link>
 						</i18n>
 						{{ ` • ${$tc('globals.listTabs.trackN', data.nb_tracks)}` }}
 					</h2>
@@ -106,7 +121,9 @@
 			</table>
 
 			<div v-if="type == 'album'">
-				<button @click="albumView" :data-id="id">{{ $t('linkAnalyzer.table.tracklist') }}</button>
+				<router-link tag="button" :to="{ name: 'Tracklist', params: { type: 'album', id } }">
+					{{ $t('linkAnalyzer.table.tracklist') }}
+				</router-link>
 			</div>
 			<div v-if="countries.length">
 				<p v-for="country in countries">{{ country[0] }} - {{ country[1] }}</p>
@@ -117,7 +134,6 @@
 
 <script>
 import { socket } from '@/utils/socket'
-import { showView } from '@js/tabs'
 import { convertDuration } from '@/utils/utils'
 import { COUNTRIES } from '@/utils/countries'
 import EventBus from '@/utils/EventBus'
@@ -137,8 +153,6 @@ export default {
 		}
 	},
 	methods: {
-		artistView: showView.bind(null, 'artist'),
-		albumView: showView.bind(null, 'album'),
 		convertDuration,
 		reset() {
 			this.title = 'Loading...'

src/components/TheMainSearch.vue

@@ -23,9 +23,6 @@
 					:is="currentTab.component"
 					:results="results"
 					@add-to-queue="addToQueue"
-					@artist-view="artistView"
-					@album-view="albumView"
-					@playlist-view="playlistView"
 					@change-search-tab="changeSearchTab"
 				></component>
 			</keep-alive>
@@ -42,7 +39,6 @@ import ResultsPlaylists from '@components/search/ResultsPlaylists.vue'
 import ResultsTracks from '@components/search/ResultsTracks.vue'
 
 import { socket } from '@/utils/socket'
-import { showView } from '@js/tabs'
 import { sendAddToQueue } from '@/utils/downloads'
 import { numberWithDots, convertDuration } from '@/utils/utils'
 import EventBus from '@/utils/EventBus'
@@ -162,9 +158,6 @@ export default {
 		socket.on('search', this.handleSearch)
 	},
 	methods: {
-		artistView: showView.bind(null, 'artist'),
-		albumView: showView.bind(null, 'album'),
-		playlistView: showView.bind(null, 'playlist'),
 		changeSearchTab(sectionName) {
 			sectionName = sectionName.toLowerCase()
 

src/components/TheSearchBar.vue

@@ -105,7 +105,7 @@ export default {
 					this.lastTextSearch = term
 				}
 
-				this.$root.$emit('mainSearch:showNewResults', term /* , window.main_selected */)
+				this.$root.$emit('mainSearch:showNewResults', term)
 			}
 		}
 	}

src/components/TracklistTab.vue

@@ -64,21 +64,21 @@
 									}}
 								</div>
 							</td>
-							<td
+							<router-link
+								tag="td"
 								class="table__cell--medium table__cell--center clickable"
-								@click="artistView"
+								:to="{ name: 'Artist', params: { id: track.artist.id } }"
-								:data-id="track.artist.id"
 							>
 								{{ track.artist.name }}
-							</td>
+							</router-link>
-							<td
+							<router-link
-								v-if="type == 'playlist'"
+								tag="td"
+								v-if="type === 'playlist'"
 								class="table__cell--medium table__cell--center clickable"
-								@click="albumView"
+								:to="{ name: 'Tracklist', params: { type: 'album', id: track.album.id } }"
-								:data-id="track.album.id"
 							>
 								{{ track.album.title }}
-							</td>
+							</router-link>
 							<td
 								class="table__cell--center"
 								:class="{ 'table__cell--small': type === 'album', 'table__cell--x-small': type === 'playlist' }"
@@ -145,14 +145,13 @@
 <script>
 import { isEmpty } from 'lodash-es'
 import { socket } from '@/utils/socket'
-import { showView } from '@js/tabs.js'
 import Downloads from '@/utils/downloads'
 import Utils from '@/utils/utils'
 import EventBus from '@/utils/EventBus'
 
 export default {
-	name: 'tracklist-tab',
+	data() {
-	data: () => ({
+		return {
 			title: '',
 			metadata: '',
 			release_date: '',
@@ -162,10 +161,9 @@ export default {
 			type: 'empty',
 			link: '',
 			body: []
-	}),
+		}
+	},
 	methods: {
-		artistView: showView.bind(null, 'artist'),
-		albumView: showView.bind(null, 'album'),
 		playPausePreview(e) {
 			EventBus.$emit('trackPreview:playPausePreview', e)
 		},

src/components/search/ResultsTracks.vue

@@ -46,20 +46,20 @@
 							}}
 						</div>
 					</td>
-					<td
+					<router-link
+						tag="td"
 						class="table__cell table__cell--medium table__cell--center breakline clickable"
-						@click.stop="artistView"
+						:to="{ name: 'Artist', params: { id: track.artist.id } }"
-						:data-id="track.artist.id"
 					>
 						{{ track.artist.name }}
-					</td>
+					</router-link>
-					<td
+					<router-link
+						tag="td"
 						class="table__cell table__cell--medium table__cell--center breakline clickable"
-						@click.stop="albumView"
+						:to="{ name: 'Tracklist', params: { type: 'album', id: track.album.id } }"
-						:data-id="track.album.id"
 					>
 						{{ track.album.title }}
-					</td>
+					</router-link>
 					<td class="table__cell table__cell--small table__cell--center">
 						{{ convertDuration(track.duration) }}
 					</td>
@@ -81,7 +81,7 @@
 <script>
 import BaseLoadingPlaceholder from '@components/BaseLoadingPlaceholder.vue'
 
-import EventBus from '@/utils/EventBus.js'
+import EventBus from '@/utils/EventBus'
 import { convertDuration } from '@/utils/utils'
 
 export default {
@@ -91,15 +91,6 @@ export default {
 	},
 	methods: {
 		convertDuration,
-		artistView(event) {
-			this.$emit('artist-view', event)
-		},
-		albumView(event) {
-			this.$emit('album-view', event)
-		},
-		playlistView(event) {
-			this.$emit('playlist-view', event)
-		},
 		playPausePreview(e) {
 			EventBus.$emit('trackPreview:playPausePreview', e)
 		},

src/data/qualities.js

@@ -1,4 +1,4 @@
-export default [
+export const downloadQualities = [
 	{
 		objName: 'flac',
 		label: 'FLAC',

src/js/tabs.js

@@ -1,20 +0,0 @@
-import router from '@/router'
-
-/* ===== Globals ====== */
-window.main_selected = ''
-
-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
-	})
-}

src/jsconfig.json

@@ -4,7 +4,6 @@
 		"baseUrl": ".",
 		"paths": {
 			"@/*": ["./*"],
-			"@js/*": ["./js/*"],
 			"@components/*": ["./components/*"]
 		}
 	},