added language change logic, added flags, added more translations

package.json

@@ -19,6 +19,7 @@
 	"dependencies": {
 		"jquery": "^3.5.1",
 		"lodash-es": "^4.17.15",
+		"svg-country-flags": "^1.2.7",
 		"toastify-js": "^1.8.0",
 		"vue": "^2.6.11",
 		"vue-i18n": "^8.18.2"
@@ -28,10 +29,12 @@
 		"@rollup/plugin-commonjs": "^11.0.2",
 		"@rollup/plugin-node-resolve": "^8.0.1",
 		"@rollup/plugin-replace": "^2.3.2",
+		"node-sass": "^4.14.1",
 		"npm-run-all": "^4.1.5",
 		"rimraf": "^3.0.2",
 		"rollup": "^2.14.0",
 		"rollup-plugin-analyzer": "^3.2.3",
+		"rollup-plugin-svg": "^2.0.0",
 		"rollup-plugin-terser": "^6.1.0",
 		"rollup-plugin-vue": "^4.2.0",
 		"sass": "^1.26.8",

rollup.config.js

@@ -5,6 +5,7 @@ import replace from '@rollup/plugin-replace'
 import alias from '@rollup/plugin-alias'
 import analyze from 'rollup-plugin-analyzer'
 import vue from 'rollup-plugin-vue'
+import svg from 'rollup-plugin-svg'
 
 // 'rollup -c' -> 'production' is false
 // 'rollup -c -w' -> 'production' is true
@@ -46,6 +47,7 @@ export default {
 		}),
 		resolve(), // Tells Rollup how to find imported modules in node_modules
 		commonjs(), // Converts imported modules to ES modules, if necessary
+		svg(),
 		vue(),
 		production && terser(), // Minify, but only in production
 		production && analyze({ showExports: true, limit: 15 }) // Show useful information about bundles, only in production

src/assets/it.svg

@@ -0,0 +1,38 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
+<circle style="fill:#F0F0F0;" cx="256" cy="256" r="256"/>
+<path style="fill:#D80027;" d="M512,256c0-110.071-69.472-203.906-166.957-240.077v480.155C442.528,459.906,512,366.071,512,256z"/>
+<path style="fill:#6DA544;" d="M0,256c0,110.071,69.472,203.906,166.957,240.077V15.923C69.472,52.094,0,145.929,0,256z"/>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>

src/components/TheSearchBar.vue

@@ -9,7 +9,7 @@
 			type="search"
 			name="searchbar"
 			value=""
-			placeholder="Search what you want (or just paste a link)"
+			:placeholder="$t('searchbar')"
 			autofocus
 			ref="searchbar"
 			@keyup="handleSearchBarKeyup($event)"

src/components/TheSettingsTab.vue

@@ -33,15 +33,17 @@
 			<h3 class="settings-group__header settings-group__header--with-icon">
 				<i class="material-icons">language</i>{{ $t('settings.languages') }}
 			</h3>
-			<span
+			<div>
-				v-for="locale in locales"
+				<span
-				:key="locale"
+					v-for="locale in locales"
-				style="width: 50px; height: 50px; cursor:pointer; border: 1px solid var(--foreground); flex: 1 50px; display: flex; justify-content: center; align-items: center;"
+					:key="locale"
-				:data-locale="locale"
+					class="locale-flag"
-				@click="$i18n.locale = locale"
+					:class="{ 'locale-flag--current': currentLocale === locale }"
-			>
+					@click="changeLocale(locale)"
-				{{ locale.toUpperCase() }}
+					v-html="flags[locale]"
-			</span>
+				>
+				</span>
+			</div>
 		</div>
 
 		<div class="settings-group">
@@ -557,15 +559,43 @@
 		</footer>
 	</div>
 </template>
+<style lang="scss">
+.locale-flag {
+	width: 60px;
+	display: inline-flex;
+	justify-content: center;
+	align-items: center;
+	cursor: pointer;
+
+	&:not(:last-child) {
+		margin-right: 10px;
+	}
+
+	&.locale-flag--current {
+		svg {
+			filter: brightness(1);
+		}
+	}
+
+	svg {
+		width: 40px;
+		height: 40px;
+		filter: brightness(0.5);
+	}
+}
+</style>
 
 <script>
 import { toast } from '@/utils/toasts'
 import { socket } from '@/utils/socket'
 import EventBus from '@/utils/EventBus'
+import flags from '@/utils/flags'
 
 export default {
 	name: 'the-settings-tab',
 	data: () => ({
+		flags,
+		currentLocale: 'en',
 		locales: [],
 		settings: { tags: {} },
 		lastSettings: {},
@@ -610,6 +640,11 @@ export default {
 
 			toast(this.$t('settings.toasts.ARLcopied'), 'assignment')
 		},
+		changeLocale(newLocale) {
+			this.$i18n.locale = newLocale
+			this.currentLocale = newLocale
+			localStorage.setItem('locale', newLocale)
+		},
 		updateMaxVolume() {
 			localStorage.setItem('previewVolume', this.previewVolume.preview_max_volume)
 		},
@@ -677,11 +712,23 @@ export default {
 
 		this.$refs.loggedInInfo.classList.add('hide')
 
-		if (localStorage.getItem('arl')) {
+		let storedLocale = localStorage.getItem('locale')
-			this.$refs.loginInput.value = localStorage.getItem('arl').trim()
+
+		if (storedLocale) {
+			this.$i18n.locale = storedLocale
+			this.currentLocale = storedLocale
 		}
-		if (localStorage.getItem('accountNum')) {
+
-			this.accountNum = localStorage.getItem('accountNum')
+		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')
@@ -709,5 +756,4 @@ export default {
 }
 </script>
 
-<style>
+
-</style>

src/components/TheSidebar.vue

@@ -2,50 +2,42 @@
 	<aside id="sidebar" role="navigation" @click="handleSidebarClick">
 		<span id="main_home_tablink" class="main_tablinks" role="link" aria-label="home">
 			<i class="material-icons side_icon">home</i>
-			<span class="main_tablinks_text">Home</span>
+			<span class="main_tablinks_text">{{ $t('sidebar.home') }}</span>
 		</span>
 		<span id="main_search_tablink" class="main_tablinks" role="link" aria-label="search">
 			<i class="material-icons side_icon">search</i>
-			<span class="main_tablinks_text">Search</span>
+			<span class="main_tablinks_text">{{ $t('sidebar.search') }}</span>
 		</span>
 		<span id="main_charts_tablink" class="main_tablinks" role="link" aria-label="charts">
 			<i class="material-icons side_icon">bubble_chart</i>
-			<span class="main_tablinks_text">Charts</span>
+			<span class="main_tablinks_text">{{ $t('sidebar.charts') }}</span>
 		</span>
 		<span id="main_favorites_tablink" class="main_tablinks" role="link" aria-label="favorites">
 			<i class="material-icons side_icon">album</i>
-			<span class="main_tablinks_text">Favorites</span>
+			<span class="main_tablinks_text">{{ $t('sidebar.favorites') }}</span>
 		</span>
 		<span id="main_analyzer_tablink" class="main_tablinks" role="link" aria-label="link analyzer">
 			<i class="material-icons side_icon">link</i>
-			<span class="main_tablinks_text">Link Analyzer</span>
+			<span class="main_tablinks_text">{{ $t('sidebar.linkAnalyzer') }}</span>
 		</span>
 		<span id="main_settings_tablink" class="main_tablinks" role="link" aria-label="settings">
 			<i class="material-icons side_icon">settings</i>
-			<span class="main_tablinks_text">Settings</span>
+			<span class="main_tablinks_text">{{ $t('sidebar.settings') }}</span>
 		</span>
 		<span id="main_about_tablink" class="main_tablinks" role="link" aria-label="info">
 			<i class="material-icons side_icon">info</i>
-			<span class="main_tablinks_text">About</span>
+			<span class="main_tablinks_text">{{ $t('sidebar.about') }}</span>
 		</span>
 		<span id="theme_selector" class="main_tablinks" role="link" aria-label="theme selector">
 			<i class="material-icons side_icon side_icon--theme">palette</i>
 			<div id="theme_togglers">
 				<div
-					class="theme_toggler theme_toggler--purple"
+					v-for="theme of themes"
-					:class="{ 'theme_toggler--active': activeTheme === 'purple' }"
+					:key="theme"
-					@click="changeTheme('purple')"
+					class="theme_toggler "
-				/>
+					:class="[{ 'theme_toggler--active': activeTheme === theme }, `theme_toggler--${theme}`]"
-				<div
+					@click="changeTheme(theme)"
-					class="theme_toggler theme_toggler--dark"
+				></div>
-					:class="{ 'theme_toggler--active': activeTheme === 'dark' }"
-					@click="changeTheme('dark')"
-				/>
-				<div
-					class="theme_toggler theme_toggler--light"
-					:class="{ 'theme_toggler--active': activeTheme === 'light' }"
-					@click="changeTheme('light')"
-				/>
 			</div>
 		</span>
 		<div id="network-status" :class="{ online: appOnline, offline: !appOnline }">
@@ -89,12 +81,11 @@ import { changeTab } from '@js/tabs.js'
 
 export default {
 	name: 'the-sidebar',
-	data() {
+	data: () => ({
-		return {
+		appOnline: null,
-			appOnline: null,
+		activeTheme: 'light',
-			activeTheme: 'light'
+		themes: ['purple', 'dark', 'light']
-		}
+	}),
-	},
 	mounted() {
 		/* === Online status handling === */
 		this.appOnline = navigator.onLine

src/components/TracklistTab.vue

@@ -10,8 +10,8 @@
 				{{ title }} <i v-if="explicit" class="material-icons explicit_icon explicit_icon--right">explicit</i>
 			</h1>
 			<h2 class="inline-flex">
-				<span v-if="metadata">{{ metadata }}</span
+				<span v-if="metadata">{{ metadata }}</span>
-				><span class="right" v-if="release_date">{{ release_date }}</span>
+				<span class="right" v-if="release_date">{{ release_date }}</span>
 			</h2>
 		</header>
 
@@ -22,9 +22,9 @@
 						<i class="material-icons">music_note</i>
 					</th>
 					<th>#</th>
-					<th>Song</th>
+					<th>{{ $tc('globals.listTabs.track', 1) }}</th>
-					<th>Artist</th>
+					<th>{{ $tc('globals.listTabs.artist', 1) }}</th>
-					<th v-if="type == 'Playlist'">Album</th>
+					<th v-if="type === 'Playlist'">{{ $tc('globals.listTabs.album', 1) }}</th>
 					<th>
 						<i class="material-icons">timer</i>
 					</th>
@@ -111,8 +111,9 @@
 								@click="playPausePreview"
 								:class="'material-icons' + (track.preview_url ? ' preview_playlist_controls' : '')"
 								:data-preview="track.preview_url"
-								>play_arrow</i
 							>
+								play_arrow
+							</i>
 							<i v-else class="material-icons disabled">play_arrow</i>
 						</td>
 						<td>{{ i + 1 }}</td>
@@ -131,7 +132,8 @@
 		<span v-if="label" style="opacity: 0.40;margin-top: 8px;display: inline-block;font-size: 13px;">{{ label }}</span>
 		<footer>
 			<button @contextmenu.prevent="openQualityModal" @click.stop="addToQueue" :data-link="link">
-				Download {{ type }}
+				<!-- vue-i18n throws a warning beacuse of the reset -->
+				{{ `${$t('globals.download')} ${$tc(`globals.listTabs.${type}`, 1)}` }}
 			</button>
 			<button
 				class="with_icon"
@@ -139,9 +141,9 @@
 				@click.stop="addToQueue"
 				:data-link="selectedLinks()"
 			>
-				Download selection<i class="material-icons">file_download</i>
+				{{ $t('tracklist.downloadSelection') }}<i class="material-icons">file_download</i>
 			</button>
-			<button class="back-button">Back</button>
+			<button class="back-button">{{ $t('globals.back') }}</button>
 		</footer>
 	</div>
 </template>
@@ -163,7 +165,7 @@ export default {
 		label: '',
 		explicit: false,
 		image: '',
-		type: '',
+		type: 'empty',
 		link: '',
 		body: []
 	}),
@@ -180,7 +182,7 @@ export default {
 			this.label = ''
 			this.release_date = ''
 			this.explicit = false
-			this.type = ''
+			this.type = 'empty'
 			this.body = []
 		},
 		addToQueue(e) {
@@ -220,12 +222,12 @@ export default {
 				cover_xl
 			} = data
 
-			this.type = 'Album'
+			this.type = `${this.$tc('globals.listTabs.album', 1)}`
 			this.link = `https://www.deezer.com/album/${albumID}`
 			this.title = albumTitle
 			this.explicit = explicit_lyrics
 			this.label = albumLabel
-			this.metadata = `${artistName} • ${numberOfTracks} songs`
+			this.metadata = `${artistName} • ${numberOfTracks} ${this.$tc('globals.listTabs.track', 2)}`
 			this.release_date = release_date.substring(0, 10)
 			this.image = cover_xl
 
@@ -246,12 +248,15 @@ export default {
 				tracks: { length: numberOfTracks }
 			} = data
 
-			this.type = 'Playlist'
+			this.type = `${this.$tc('globals.listTabs.playlist', 1)}`
 			this.link = `https://www.deezer.com/playlist/${playlistID}`
 			this.title = playlistTitle
 			this.image = playlistCover
 			this.release_date = creation_date.substring(0, 10)
-			this.metadata = `by ${creatorName} • ${numberOfTracks} songs`
+			this.metadata = `${this.$t('globals.by')} ${creatorName} • ${numberOfTracks} ${this.$tc(
+				'globals.listTabs.track',
+				2
+			)}`
 
 			if (isEmpty(playlistTracks)) {
 				this.body = null
@@ -270,14 +275,17 @@ export default {
 				tracks: { length: numberOfTracks }
 			} = data
 
-			this.type = 'Spotify Playlist'
+			this.type = `${this.$tc('globals.listTabs.spotifyPlaylist', 1)}`
 			this.link = playlistURI
 			this.title = playlistName
 			this.image = numberOfImages
 				? images[0].url
 				: 'https://e-cdns-images.dzcdn.net/images/cover/d41d8cd98f00b204e9800998ecf8427e/1000x1000-000000-80-0-0.jpg'
 			this.release_date = ''
-			this.metadata = `by ${ownerName} • ${numberOfTracks} songs`
+			this.metadata = `${this.$t('globals.by')} ${ownerName} • ${numberOfTracks} ${this.$tc(
+				'globals.listTabs.track',
+				2
+			)}`
 
 			if (isEmpty(playlistTracks)) {
 				this.body = null

src/lang/en.js

@@ -6,6 +6,7 @@ const en = {
 		download: 'Download',
 		by: 'by',
 		listTabs: {
+			empty: '',
 			all: 'all',
 			album: 'album | albums',
 			artist: 'artist | artists',
@@ -13,6 +14,7 @@ const en = {
 			title: 'title | titles',
 			track: 'track | tracks',
 			playlist: 'playlist | playlists',
+			spotifyPlaylist: 'spotify playlist | spotify playlists',
 			releaseDate: 'release date',
 			error: 'error'
 		}
@@ -40,6 +42,7 @@ const en = {
 			popularAlbums: 'Most streamed albums'
 		}
 	},
+	searchbar: 'Search anything you want (or just paste a link)',
 	settings: {
 		title: 'Settings',
 		languages: 'Languages',
@@ -117,9 +120,9 @@ const en = {
 			embeddedArtworkSize: 'Embedded artwork size',
 			localArtworkFormat: {
 				title: 'What format do you want the local artwork to be?',
-				jpg: "A jpeg image",
+				jpg: 'A jpeg image',
-				png: "A png image",
+				png: 'A png image',
-				both: "Both a jpeg and a png"
+				both: 'Both a jpeg and a png'
 			},
 			jpegImageQuality: 'JPEG image quality'
 		},
@@ -206,6 +209,18 @@ const en = {
 			update: 'Settings updated!',
 			ARLcopied: 'ARL copied to clipboard'
 		}
+	},
+	sidebar: {
+		home: 'home',
+		search: 'search',
+		charts: 'charts',
+		favorites: 'favorites',
+		linkAnalyzer: 'link analyzer',
+		settings: 'settings',
+		about: 'about'
+	},
+	tracklist: {
+		downloadSelection: 'Download selection'
 	}
 }
 

src/lang/it.js

@@ -13,8 +13,10 @@ const it = {
 			title: 'titolo | titoli',
 			track: 'traccia | tracce',
 			playlist: 'playlist',
+			spotifyPlaylist: 'playlist spotify',
 			releaseDate: 'data di rilascio',
-			error: 'errore'
+			error: 'errore',
+			empty: ''
 		}
 	},
 	charts: {
@@ -40,6 +42,7 @@ const it = {
 			popularAlbums: 'Album più riprodotti'
 		}
 	},
+	searchbar: 'Cerca qualsiasi cosa (o incolla semplicemente un link)',
 	settings: {
 		title: 'Impostazioni',
 		languages: 'Lingue',
@@ -156,12 +159,12 @@ const it = {
 			saveID3v1: 'Salva anche il ID3v1',
 			multiArtistSeparator: {
 				title: 'Come vuoi separare gli artisti?',
-				nothing: 'Salva solo l\'artista principale',
+				nothing: "Salva solo l'artista principale",
 				default: 'Usando la specificazione standard',
 				andFeat: 'Usando & e feat.',
 				using: 'Usando "{0}"'
 			},
-			singleAlbumArtist: 'Salva solo l\'artista dell\'album principale',
+			singleAlbumArtist: "Salva solo l'artista dell'album principale",
 			albumVariousArtists: 'Lascia "Artisti Vari" negli artisti dell\'album',
 			removeAlbumVersion: 'Rimuovi "Album Version" dal titolo del brano',
 			removeDuplicateArtists: 'Rimuovi le combinazioni di artisti',
@@ -206,6 +209,18 @@ const it = {
 			update: 'Impostazioni aggiornate!',
 			ARLcopied: 'ARL copiato negli appunti'
 		}
+	},
+	sidebar: {
+		home: 'home',
+		search: 'ricerca',
+		charts: 'classifiche',
+		favorites: 'preferiti',
+		linkAnalyzer: 'analizza link',
+		settings: 'impostazioni',
+		about: 'info'
+	},
+	tracklist: {
+		downloadSelection: 'Scarica selezionati'
 	}
 }
 

src/styles/scss/_sidebar.scss

@@ -45,6 +45,8 @@ $sidebar-delay: 75ms;
 		margin-left: 20px;
 		opacity: 0;
 		overflow: hidden;
+		text-transform: capitalize;
+		letter-spacing: 1.3px;
 		white-space: nowrap;
 		transition: all 50ms ease-in-out 200ms;
 	}

src/utils/flags.js

@@ -0,0 +1,7 @@
+import it from 'svg-country-flags/svg/it.svg'
+import gb from 'svg-country-flags/svg/gb.svg'
+
+export default {
+	it,
+	en: gb
+}