Added translation support for toast messages

src/app.js

@@ -44,7 +44,7 @@ socket.on('message', function(msg) {
 })
 
 socket.on('logging_in', function() {
-	toast('Logging in', 'loading', false, 'login-toast')
+	toast(i18n.t('toasts.loggingIn'), 'loading', false, 'login-toast')
 })
 
 socket.on('init_autologin', function() {
@@ -64,7 +64,7 @@ socket.on('logged_in', function(data) {
 	switch (data.status) {
 		case 1:
 		case 3:
-			toast('Logged in', 'done', true, 'login-toast')
+			toast(i18n.t('toasts.loggedIn'), 'done', true, 'login-toast')
 			if (data.arl) {
 				localStorage.setItem('arl', data.arl)
 				$('#login_input_arl').val(data.arl)
@@ -82,7 +82,7 @@ socket.on('logged_in', function(data) {
 			document.getElementById('home_not_logged_in').classList.add('hide')
 			break
 		case 2:
-			toast('Already logged in', 'done', true, 'login-toast')
+			toast(i18n.t('toasts.alreadyLogged'), 'done', true, 'login-toast')
 			if (data.user) {
 				$('#settings_username').text(data.user.name)
 				$('#settings_picture').attr(
@@ -95,7 +95,7 @@ socket.on('logged_in', function(data) {
 			document.getElementById('home_not_logged_in').classList.add('hide')
 			break
 		case 0:
-			toast("Couldn't log in", 'close', true, 'login-toast')
+			toast(i18n.t('toasts.loginFailed'), 'close', true, 'login-toast')
 			localStorage.removeItem('arl')
 			$('#login_input_arl').val('')
 			$('#open_login_prompt').show()
@@ -109,7 +109,7 @@ socket.on('logged_in', function(data) {
 })
 
 socket.on('logged_out', function() {
-	toast('Logged out', 'done', true, 'login-toast')
+	toast(i18n.t('toasts.loggedOut'), 'done', true, 'login-toast')
 	localStorage.removeItem('arl')
 	$('#login_input_arl').val('')
 	$('#open_login_prompt').show()
@@ -120,27 +120,27 @@ socket.on('logged_out', function() {
 })
 
 socket.on('cancellingCurrentItem', function(uuid) {
-	toast('Cancelling current item.', 'loading', false, 'cancelling_' + uuid)
+	toast(i18n.t('toasts.cancellingCurrentItem'), 'loading', false, 'cancelling_' + uuid)
 })
 
 socket.on('currentItemCancelled', function(uuid) {
-	toast('Current item cancelled.', 'done', true, 'cancelling_' + uuid)
+	toast(i18n.t('toasts.currentItemCancelled'), 'done', true, 'cancelling_' + uuid)
 })
 
 socket.on('startAddingArtist', function(data) {
-	toast(`Adding ${data.name} albums to queue`, 'loading', false, 'artist_' + data.id)
+	toast(i18n.t('toasts.startAddingArtist', [data.name]), 'loading', false, 'artist_' + data.id)
 })
 
 socket.on('finishAddingArtist', function(data) {
-	toast(`Added ${data.name} albums to queue`, 'done', true, 'artist_' + data.id)
+	toast(i18n.t('toasts.finishAddingArtist', [data.name]), 'done', true, 'artist_' + data.id)
 })
 
 socket.on('startConvertingSpotifyPlaylist', function(id) {
-	toast('Converting spotify tracks to deezer tracks', 'loading', false, 'spotifyplaylist_' + id)
+	toast(i18n.t('toasts.startConvertingSpotifyPlaylist'), 'loading', false, 'spotifyplaylist_' + id)
 })
 
 socket.on('finishConvertingSpotifyPlaylist', function(id) {
-	toast('Spotify playlist converted', 'done', true, 'spotifyplaylist_' + id)
+	toast(i18n.t('toasts.finishConvertingSpotifyPlaylist'), 'done', true, 'spotifyplaylist_' + id)
 })
 
 socket.on('errorMessage', function(error) {
@@ -148,5 +148,5 @@ socket.on('errorMessage', function(error) {
 })
 
 socket.on('alreadyInQueue', function(data) {
-	toast(`${data.title} is already in queue!`, 'playlist_add_check')
+	toast(i18n.t('toasts.alreadyInQueue', [data.title]), 'playlist_add_check')
 })

src/components/TheDownloadTab.vue

@@ -4,6 +4,7 @@
 		class="tab_hidden"
 		@transitionend="$refs.container.style.transition = ''"
 		ref="container"
+		:data-label="$t('downloads')"
 	>
 		<div id="download_tab_drag_handler" @mousedown.prevent="startDrag" ref="dragHandler"></div>
 		<i
@@ -187,7 +188,7 @@ export default {
 			}
 
 			if (!queueItem.init) {
-				toast(`${queueItem.title} added to queue`, 'playlist_add_check')
+				toast(this.$t('toasts.addedToQueue', [queueItem.title]), 'playlist_add_check')
 			}
 		},
 		updateQueue(update) {
@@ -280,7 +281,7 @@ export default {
 		},
 		finishDownload(uuid) {
 			if (this.queue.indexOf(uuid) > -1) {
-				toast(`${this.queueList[uuid].title} finished downloading.`, 'done')
+				toast(this.$t('toasts.finishDownload', [this.queueList[uuid].title]), 'done')
 
 				$('#bar_' + uuid).css('width', '100%')
 
@@ -311,7 +312,7 @@ export default {
 				}
 
 				if (this.queue.length <= 0) {
-					toast('All downloads completed!', 'done_all')
+					toast(this.$t('toasts.allDownloaded'), 'done_all')
 				}
 			}
 		},
@@ -348,4 +349,4 @@ export default {
 </script>
 
 <style>
-</style>
+</style>

src/components/TheFavoritesTab.vue

@@ -303,7 +303,7 @@ export default {
 				'animationiteration',
 				() => {
 					this.$refs.reloadButton.classList.remove('spin')
-					toast('Refresh completed!', 'done', true)
+					toast(this.$t('toasts.refreshFavs'), 'done', true)
 				},
 				{ once: true }
 			)

src/components/TheMainSearch.vue

@@ -1,10 +1,8 @@
 <template>
 	<div id="search_tab" class="main_tabcontent" @click="handleSearchTabClick">
 		<div :class="{ hide: results.query != '' }">
-			<h2>Start searching!</h2>
+			<h2>{{ $t('search.startSearching') }}</h2>
-			<p>
+			<p>{{ $t('search.description') }}</p>
-				You can search a track, a whole album, an artist, a playlist.... everything! You can also paste a Deezer link
-			</p>
 		</div>
 		<div v-show="results.query !== ''">
 			<ul class="section-tabs">

src/lang/en.js

@@ -73,6 +73,25 @@ const en = {
 			'You can search a track, a whole album, an artist, a playlist.... everything! You can also paste a Deezer link'
 	},
 	searchbar: 'Search anything you want (or just paste a link)',
+	downloads: 'downloads',
+	toasts: {
+		addedToQueue: '{0} added to queue',
+		alreadyInQueue: '{0} is already in queue!',
+		finishDownload: '{0} finished downloading.',
+		allDownloaded: 'All downloads completed!',
+		refreshFavs: 'Refresh completed!',
+		loggingIn: 'Logging in',
+		loggedIn: 'Logged in',
+		alreadyLogged: 'Already logged in',
+		loginFailed: 'Couldn\'t log in',
+		loggedOut: 'Logged out',
+		cancellingCurrentItem: 'Cancelling current item.',
+		currentItemCancelled: 'Current item cancelled.',
+		startAddingArtist: 'Adding {0} albums to queue',
+		finishAddingArtist: 'Added {0} albums to queue',
+		startConvertingSpotifyPlaylist: 'Converting spotify tracks to deezer tracks',
+		finishConvertingSpotifyPlaylist: 'Spotify playlist converted'
+	},
 	settings: {
 		title: 'Settings',
 		languages: 'Languages',

src/lang/it.js

@@ -68,7 +68,30 @@ const it = {
 			tracklist: 'Lista tracce'
 		}
 	},
+	search: {
+		startSearching: 'Inizia a cercare!',
+		description:
+			'Puoi cercare una traccia, un intero album, un artista, una playlist.... quello che vuoi! Puoi anche incollare un link di Deezer'
+	},
 	searchbar: 'Cerca qualsiasi cosa (o incolla semplicemente un link)',
+	downloads: 'download',
+	toasts: {
+		addedToQueue: '{0} aggiunto alla coda',
+		finishDownload: '{0} ha finito di scaricarsi.',
+		allDownloaded: 'Tutti i download completati!',
+		refreshFavs: 'Preferiti ricaricati!',
+		loggingIn: 'Effettuando il login',
+		loggedIn: 'Login effettuato',
+		alreadyLogged: 'Sei già loggato',
+		loginFailed: 'Impossibile loggarsi',
+		loggedOut: 'Disconnesso',
+		cancellingCurrentItem: 'Cancellando download corrente.',
+		currentItemCancelled: 'Download corrente cancellato.',
+		startAddingArtist: 'Aggiungendo gli album di {0} alla coda',
+		finishAddingArtist: 'Aggiunto gli album di {0} alla coda',
+		startConvertingSpotifyPlaylist: 'Convertendo le tracce da spotify a deezer',
+		finishConvertingSpotifyPlaylist: 'Playlist di spotify convertita'
+	},
 	settings: {
 		title: 'Impostazioni',
 		languages: 'Lingue',
@@ -104,7 +127,7 @@ const it = {
 			albumNameTemplate: 'Template nome della cartella Album',
 			createCDFolder: 'Crea cartelle per i CD',
 			createStructurePlaylist: 'Crea la struttura di cartelle per le Playlist',
-			createSingleFolder: 'Crea la struttura di cartelle per le traccie singole'
+			createSingleFolder: 'Crea la struttura di cartelle per le tracce singole'
 		},
 		trackTitles: {
 			title: 'Titoli tracce',
@@ -159,7 +182,7 @@ const it = {
 			album: 'Album',
 			cover: 'Copertina',
 			trackNumber: 'Numero Traccia',
-			trackTotal: 'Traccie Totali',
+			trackTotal: 'Tracce Totali',
 			discNumber: 'Numero Disco',
 			discTotal: 'Dischi Totali',
 			albumArtist: "Artista dell'album",

src/styles/scss/tabs/_download-tab.scss

@@ -38,7 +38,7 @@
 		}
 
 		&::after {
-			content: 'downloads';
+			content: attr(data-label);
 			display: flex;
 			align-items: center;
 			text-transform: capitalize;