evan/deemixer
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

added language change logic, added flags, added more translations

Browse Source
This commit is contained in:
Roberto Tonino
2020-07-18 22:44:27 +02:00
parent dc95150d7f
commit 636701aa70
14 changed files with 1553 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/TheSearchBar.vue
View File

@@ -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)"

76
src/components/TheSettingsTab.vue
View File

@@ -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
v-for="locale in locales"
:key="locale"
style="width: 50px; height: 50px; cursor:pointer; border: 1px solid var(--foreground); flex: 1 50px; display: flex; justify-content: center; align-items: center;"
:data-locale="locale"
@click="$i18n.locale = locale"
>
{{ locale.toUpperCase() }}
</span>
<div>
<span
v-for="locale in locales"
:key="locale"
class="locale-flag"
:class="{ 'locale-flag--current': currentLocale === locale }"
@click="changeLocale(locale)"
v-html="flags[locale]"
>
</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')) {
this.$refs.loginInput.value = localStorage.getItem('arl').trim()
let storedLocale = localStorage.getItem('locale')
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>

45
src/components/TheSidebar.vue
View File

@@ -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"
:class="{ 'theme_toggler--active': activeTheme === 'purple' }"
@click="changeTheme('purple')"
/>
<div
class="theme_toggler theme_toggler--dark"
: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')"
/>
v-for="theme of themes"
:key="theme"
class="theme_toggler "
:class="[{ 'theme_toggler--active': activeTheme === theme }, `theme_toggler--${theme}`]"
@click="changeTheme(theme)"
></div>
</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() {
return {
appOnline: null,
activeTheme: 'light'
}
},
data: () => ({
appOnline: null,
activeTheme: 'light',
themes: ['purple', 'dark', 'light']
}),
mounted() {
/* === Online status handling === */
this.appOnline = navigator.onLine

42
src/components/TracklistTab.vue
View File

@@ -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 class="right" v-if="release_date">{{ release_date }}</span>
<span v-if="metadata">{{ metadata }}</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>Artist</th>
<th v-if="type == 'Playlist'">Album</th>
<th>{{ $tc('globals.listTabs.track', 1) }}</th>
<th>{{ $tc('globals.listTabs.artist', 1) }}</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