added some translations

src/components/ArtistTab.vue

@@ -21,15 +21,16 @@
 		</header>
 
 		<div class="tab">
-			<template v-for="(item, name, index) in body">
-				<button
-					:class="'selective' + (name == currentTab ? ' active' : '')"
-					:href="'#artist_' + name"
-					@click="changeTab(name)"
-				>
-					{{ name }}
-				</button>
-			</template>
+			<button
+				v-for="(item, name) in body"
+				:key="name"
+				class="selective"
+				:class="{ active: name === currentTab }"
+				:href="'#artist_' + name"
+				@click="changeTab(name)"
+			>
+				{{ $t(`globals.listTabs.${name}`) }}
+			</button>
 		</div>
 
 		<table class="table">
@@ -46,12 +47,13 @@
 							clickable: data.sortKey
 						}"
 					>
+						<!-- Need to change this behaviour for translations -->
 						{{ data.title }}
 					</th>
 				</tr>
 			</thead>
 			<tbody>
-				<tr v-for="release in showTable">
+				<tr v-for="release in showTable" :key="release.id">
 					<td class="inline-flex clickable" @click="albumView" :data-id="release.id">
 						<img
 							class="rounded coverart"
@@ -82,7 +84,7 @@
 		</table>
 
 		<footer>
-			<button class="back-button">Back</button>
+			<button class="back-button">{{ $t('globals.back') }}</button>
 		</footer>
 	</div>
 </template>

src/components/BaseLoadingPlaceholder.vue

@@ -1,5 +1,5 @@
 <template functional>
-	<div :id="props.id" class="loading_placeholder">
+	<div :id="props.id" class="loading_placeholder" :class="{ 'loading_placeholder--hidden': props.hidden }">
 		<span class="loading_placeholder__text">{{ props.text }}</span>
 		<div class="lds-ring">
 			<div></div>
@@ -20,6 +20,11 @@ export default {
 		id: {
 			type: String,
 			required: false
+		},
+		hidden: {
+			type: Boolean,
+			required: false,
+			default: false
 		}
 	}
 }

src/components/TheChartsTab.vue

@@ -1,9 +1,8 @@
 <template>
 	<div id="charts_tab" class="main_tabcontent">
-		<h2 class="page_heading">Charts</h2>
+		<h2 class="page_heading">{{ $t('charts.title') }}</h2>
 		<div v-if="country === ''" id="charts_selection">
 			<div class="release_grid charts_grid">
-				<!-- Ugly af -->
 				<template v-for="release in countries">
 					<div
 						role="button"
@@ -36,13 +35,13 @@
 			</div>
 		</div>
 		<div v-else id="charts_table">
-			<button @click="changeCountry">Change Country</button>
+			<button @click="changeCountry">{{ $t('charts.changeCountry') }}</button>
 			<button
 				@contextmenu.prevent="openQualityModal"
 				@click.stop="addToQueue"
 				:data-link="'https://www.deezer.com/playlist/' + id"
 			>
-				Download Chart
+				{{ $t('charts.download') }}
 			</button>
 			<table class="table table--charts">
 				<tbody>
@@ -117,6 +116,8 @@ import { showView } from '@js/tabs.js'
 import Downloads from '@/utils/downloads'
 import Utils from '@/utils/utils'
 
+import EventBus from '@/utils/EventBus'
+
 export default {
 	name: 'the-charts-tab',
 	data() {

src/components/TheErrorsTab.vue

@@ -1,14 +1,14 @@
 <template>
 	<div id="errors_tab" class="main_tabcontent">
-		<h1>Errors for {{ title }}</h1>
+		<h1>{{ $t('errors.title') }} {{ title }}</h1>
 		<table>
 			<tr>
 				<th>ID</th>
-				<th>Artist</th>
-				<th>Title</th>
-				<th>Error</th>
+				<th>{{ $tc('globals.listTabs.artist', 1) }}</th>
+				<th>{{ $tc('globals.listTabs.title', 1) }}</th>
+				<th>{{ $tc('globals.listTabs.error', 1) }}</th>
 			</tr>
-			<tr v-for="error in errors">
+			<tr v-for="error in errors" :key="error.data.id">
 				<td>{{ error.data.id }}</td>
 				<td>{{ error.data.artist }}</td>
 				<td>{{ error.data.title }}</td>

src/components/TheFavoritesTab.vue

@@ -1,7 +1,7 @@
 <template>
 	<div id="favorites_tab" class="main_tabcontent" @click="handleFavoritesTabClick">
 		<h2 class="page_heading">
-			Favorites
+			{{ $t('favorites.title') }}
 			<div
 				@click="reloadTabs"
 				class="clickable reload-button reload-button--inline"
@@ -13,15 +13,23 @@
 			</div>
 		</h2>
 		<div class="section-tabs">
-			<div class="section-tabs__tab favorites_tablinks" id="favorites_playlist_tab">Playlists</div>
-			<div class="section-tabs__tab favorites_tablinks" id="favorites_album_tab">Albums</div>
-			<div class="section-tabs__tab favorites_tablinks" id="favorites_artist_tab">Artists</div>
-			<div class="section-tabs__tab favorites_tablinks" id="favorites_track_tab">Tracks</div>
+			<div class="section-tabs__tab favorites_tablinks" id="favorites_playlist_tab">
+				{{ $tc('globals.listTabs.playlist', 2) }}
+			</div>
+			<div class="section-tabs__tab favorites_tablinks" id="favorites_album_tab">
+				{{ $tc('globals.listTabs.album', 2) }}
+			</div>
+			<div class="section-tabs__tab favorites_tablinks" id="favorites_artist_tab">
+				{{ $tc('globals.listTabs.artist', 2) }}
+			</div>
+			<div class="section-tabs__tab favorites_tablinks" id="favorites_track_tab">
+				{{ $tc('globals.listTabs.track', 2) }}
+			</div>
 		</div>
 
 		<div id="playlist_favorites" class="favorites_tabcontent">
 			<div v-if="playlists.length == 0">
-				<h1>No Playlists found</h1>
+				<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">
@@ -39,7 +47,11 @@
 						</div>
 					</div>
 					<p class="primary-text">{{ release.title }}</p>
-					<p class="secondary-text">{{ 'by ' + release.creator.name + ' - ' + release.nb_tracks + ' tracks' }}</p>
+					<p class="secondary-text">
+						{{
+							`${$t('globals.by')} ${release.creator.name} - ${release.nb_tracks} ${$tc('globals.listTabs.track', 2)}`
+						}}
+					</p>
 				</div>
 				<div
 					v-for="release in spotifyPlaylists"
@@ -61,13 +73,20 @@
 						</div>
 					</div>
 					<p class="primary-text">{{ release.title }}</p>
-					<p class="secondary-text">{{ 'by ' + release.creator.name + ' - ' + release.nb_tracks + ' tracks' }}</p>
+					<p class="secondary-text">
+						{{
+							`${$t('globals.by')} ${release.creator.name} - ${release.nb_tracks.name} ${$tc(
+								'globals.listTabs.track',
+								2
+							)}`
+						}}
+					</p>
 				</div>
 			</div>
 		</div>
 		<div id="album_favorites" class="favorites_tabcontent">
 			<div v-if="albums.length == 0">
-				<h1>No Favorite Albums found</h1>
+				<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">
@@ -85,13 +104,13 @@
 						</div>
 					</div>
 					<p class="primary-text">{{ release.title }}</p>
-					<p class="secondary-text">{{ 'by ' + release.artist.name }}</p>
+					<p class="secondary-text">{{ `${$t('globals.by')} ${release.artist.name}` }}</p>
 				</div>
 			</div>
 		</div>
 		<div id="artist_favorites" class="favorites_tabcontent">
 			<div v-if="artists.length == 0">
-				<h1>No Favorite Artist found</h1>
+				<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">
@@ -114,7 +133,7 @@
 		</div>
 		<div id="track_favorites" class="favorites_tabcontent">
 			<div v-if="tracks.length == 0">
-				<h1>No Favorite Tracks found</h1>
+				<h1>{{ $t('favorites.noTracks') }}</h1>
 			</div>
 			<table v-if="tracks.length > 0" class="table">
 				<tr v-for="track in tracks" class="track_row">

src/components/TheHomeTab.vue

@@ -1,14 +1,20 @@
 <template>
 	<div id="home_tab" class="main_tabcontent">
-		<h2 class="page_heading">{{ $t('welcome') }}</h2>
+		<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">You need to log into your deezer account before you can start downloading.</p>
-			<button type="button" name="button" @click="openSettings">Open Settings</button>
+			<p id="home_not_logged_text">{{ $t('home.needTologin') }}</p>
+			<button type="button" name="button" @click="openSettings">{{ $t('home.openSettings') }}</button>
 		</section>
 		<section v-if="playlists.length" class="home_section">
-			<h3 class="section_heading">Popular playlists</h3>
+			<h3 class="section_heading">{{ $t('home.sections.popularPlaylists') }}</h3>
 			<div class="release_grid">
-				<div v-for="release in playlists" class="release clickable" @click="playlistView" :data-id="release.id">
+				<div
+					v-for="release in playlists"
+					:key="release.id"
+					class="release clickable"
+					@click="playlistView"
+					:data-id="release.id"
+				>
 					<div class="cover_container">
 						<img aria-hidden="true" class="rounded coverart" :src="release.picture_medium" />
 						<div
@@ -23,14 +29,22 @@
 						</div>
 					</div>
 					<p class="primary-text">{{ release.title }}</p>
-					<p class="secondary-text">{{ 'by ' + release.user.name + ' - ' + release.nb_tracks + ' tracks' }}</p>
+					<p class="secondary-text">
+						{{ `${$t('globals.by')} ${release.user.name} - ${release.nb_tracks} ${$tc('globals.listTabs.track', 2)}` }}
+					</p>
 				</div>
 			</div>
 		</section>
 		<section v-if="albums.length" class="home_section">
-			<h3 class="section_heading">Most streamed albums</h3>
+			<h3 class="section_heading">{{ $t('home.sections.popularAlbums') }}</h3>
 			<div class="release_grid">
-				<div v-for="release in albums" class="release clickable" @click="albumView" :data-id="release.id">
+				<div
+					v-for="release in albums"
+					:key="release.id"
+					class="release clickable"
+					@click="albumView"
+					:data-id="release.id"
+				>
 					<div class="cover_container">
 						<img aria-hidden="true" class="rounded coverart" :src="release.cover_medium" />
 						<div
@@ -45,7 +59,7 @@
 						</div>
 					</div>
 					<p class="primary-text">{{ release.title }}</p>
-					<p class="secondary-text">{{ 'by ' + release.artist.name }}</p>
+					<p class="secondary-text">{{ `${$t('globals.by')} ${release.artist.name}` }}</p>
 				</div>
 			</div>
 		</section>

src/components/TheLinkAnalyzerTab.vue

@@ -4,7 +4,7 @@
 		<div v-if="link == ''">
 			<p>
 				You can use this section to find out more information about the link you are trying to download<br />This is
-				usefull if you're trying to download some tracks that are not available in your country and want to know where
+				useful if you're trying to download some tracks that are not available in your country and want to know where
 				they are available
 			</p>
 		</div>

src/components/TheMainSearch.vue

@@ -427,7 +427,11 @@
 								</div>
 							</div>
 							<p class="primary-text">{{ release.title }}</p>
-							<p class="secondary-text">{{ 'by ' + release.user.name + ' - ' + release.nb_tracks + ' tracks' }}</p>
+							<p class="secondary-text">
+								{{
+									`${$t('globals.by')} ${release.user.name} - ${release.nb_tracks} ${$tc('globals.listTabs.track', 2)}`
+								}}
+							</p>
 						</div>
 					</div>
 				</div>

src/components/TheMiddleSection.vue

@@ -2,27 +2,20 @@
 	<div id="middle_section">
 		<TheSearchBar />
 		<TheContent />
-
-		<div id="search_placeholder" class="loading_placeholder loading_placeholder--hidden">
-			<span class="loading_placeholder__text">Searching...</span>
-			<div class="lds-ring">
-				<div></div>
-				<div></div>
-				<div></div>
-				<div></div>
-			</div>
-		</div>
+		<BaseLoadingPlaceholder id="search_placeholder" text="Searching..." :hidden="true" />
 	</div>
 </template>
 
 <script>
 import TheContent from '@components/TheContent.vue'
 import TheSearchBar from '@components/TheSearchBar.vue'
+import BaseLoadingPlaceholder from '@components/BaseLoadingPlaceholder.vue'
 
 export default {
 	components: {
 		TheContent,
-		TheSearchBar
+		TheSearchBar,
+		BaseLoadingPlaceholder
 	}
 }
 </script>

src/components/TheQualityModal.vue

@@ -1,12 +1,18 @@
 <template>
 	<div id="modal_quality" class="smallmodal" v-show="open" @click="tryToDownloadTrack($event)" ref="modal">
 		<div class="smallmodal-content">
-			<button class="quality-button" data-quality-value="9">Download FLAC</button>
-			<button class="quality-button" data-quality-value="3">Download MP3 320kbps</button>
-			<button class="quality-button" data-quality-value="1">Download MP3 128kbps</button>
-			<button class="quality-button" data-quality-value="15">Download 360 Reality Audio [HQ]</button>
-			<button class="quality-button" data-quality-value="14">Download 360 Reality Audio [MQ]</button>
-			<button class="quality-button" data-quality-value="13">Download 360 Reality Audio [LQ]</button>
+			<button class="quality-button" data-quality-value="9">{{ $t('globals.download') }} FLAC</button>
+			<button class="quality-button" data-quality-value="3">{{ $t('globals.download') }} MP3 320kbps</button>
+			<button class="quality-button" data-quality-value="1">{{ $t('globals.download') }} MP3 128kbps</button>
+			<button class="quality-button" data-quality-value="15">
+				{{ $t('globals.download') }} 360 Reality Audio [HQ]
+			</button>
+			<button class="quality-button" data-quality-value="14">
+				{{ $t('globals.download') }} 360 Reality Audio [MQ]
+			</button>
+			<button class="quality-button" data-quality-value="13">
+				{{ $t('globals.download') }} 360 Reality Audio [LQ]
+			</button>
 		</div>
 	</div>
 </template>

src/components/TheSettingsTab.vue

@@ -66,7 +66,7 @@
 				<i class="material-icons">font_download</i>{{ $t('settings.templates.title') }}
 			</h3>
 
-			<p>{{ $t('settings.templates.tracknameTemplate') }}/p>
+			<p>{{ $t('settings.templates.tracknameTemplate') }}</p>
 			<input type="text" v-model="settings.tracknameTemplate" />
 
 			<p>{{ $t('settings.templates.albumTracknameTemplate') }}</p>
@@ -386,7 +386,9 @@
 		</div>
 
 		<div class="settings-group">
-			<h3 class="settings-group__header settings-group__header--with-icon"><i class="material-icons">list</i>{{ $t('settings.other.title') }}</h3>
+			<h3 class="settings-group__header settings-group__header--with-icon">
+				<i class="material-icons">list</i>{{ $t('settings.other.title') }}
+			</h3>
 
 			<label class="with_checkbox">
 				<input type="checkbox" v-model="settings.tags.savePlaylistAsCompilation" />
@@ -408,13 +410,13 @@
 				<select v-model="settings.tags.multitagSeparator">
 					<option value="default">{{ $t('settings.other.multitagSeparator.default') }}</option>
 					<option value="andFeat">{{ $t('settings.other.multitagSeparator.andFeat') }}</option>
-					<option value=" & ">{{ $t('settings.other.multitagSeparator.using', [" & "]) }}</option>
-					<option value=",">{{ $t('settings.other.multitagSeparator.using', [","]) }}</option>
-					<option value=", ">{{ $t('settings.other.multitagSeparator.using', [", "]) }}</option>
-					<option value="/">{{ $t('settings.other.multitagSeparator.using', ["/"]) }}</option>
-					<option value=" / ">{{ $t('settings.other.multitagSeparator.using', [" / "]) }}</option>
-					<option value=";">{{ $t('settings.other.multitagSeparator.using', [";"]) }}</option>
-					<option value="; ">{{ $t('settings.other.multitagSeparator.using', ["; "]) }}</option>
+					<option value=" & ">{{ $t('settings.other.multitagSeparator.using', [' & ']) }}</option>
+					<option value=",">{{ $t('settings.other.multitagSeparator.using', [',']) }}</option>
+					<option value=", ">{{ $t('settings.other.multitagSeparator.using', [', ']) }}</option>
+					<option value="/">{{ $t('settings.other.multitagSeparator.using', ['/']) }}</option>
+					<option value=" / ">{{ $t('settings.other.multitagSeparator.using', [' / ']) }}</option>
+					<option value=";">{{ $t('settings.other.multitagSeparator.using', [';']) }}</option>
+					<option value="; ">{{ $t('settings.other.multitagSeparator.using', ['; ']) }}</option>
 				</select>
 			</div>
 
@@ -436,10 +438,26 @@
 			<div class="input_group">
 				<p class="input_group_text">{{ $t('settings.other.dateFormat.title') }}</p>
 				<select v-model="settings.dateFormat">
-					<option value="Y-M-D">{{ `${$t('settings.other.dateFormat.year')}-${$t('settings.other.dateFormat.month')}-${$t('settings.other.dateFormat.day')}` }}</option>
-					<option value="Y-D-M">{{ `${$t('settings.other.dateFormat.year')}-${$t('settings.other.dateFormat.day')}-${$t('settings.other.dateFormat.month')}` }}</option>
-					<option value="D-M-Y">{{ `${$t('settings.other.dateFormat.day')}-${$t('settings.other.dateFormat.month')}-${$t('settings.other.dateFormat.year')}` }}</option>
-					<option value="M-D-Y">{{ `${$t('settings.other.dateFormat.month')}-${$t('settings.other.dateFormat.day')}-${$t('settings.other.dateFormat.year')}` }}</option>
+					<option value="Y-M-D">{{
+						`${$t('settings.other.dateFormat.year')}-${$t('settings.other.dateFormat.month')}-${$t(
+							'settings.other.dateFormat.day'
+						)}`
+					}}</option>
+					<option value="Y-D-M">{{
+						`${$t('settings.other.dateFormat.year')}-${$t('settings.other.dateFormat.day')}-${$t(
+							'settings.other.dateFormat.month'
+						)}`
+					}}</option>
+					<option value="D-M-Y">{{
+						`${$t('settings.other.dateFormat.day')}-${$t('settings.other.dateFormat.month')}-${$t(
+							'settings.other.dateFormat.year'
+						)}`
+					}}</option>
+					<option value="M-D-Y">{{
+						`${$t('settings.other.dateFormat.month')}-${$t('settings.other.dateFormat.day')}-${$t(
+							'settings.other.dateFormat.year'
+						)}`
+					}}</option>
 					<option value="Y">{{ $t('settings.other.dateFormat.year') }}</option>
 				</select>
 			</div>