finished using destructuring synthax when useful

This commit is contained in:
Roberto Tonino 2020-06-02 16:40:12 +02:00
parent 791e218154
commit e59ff93b1d
8 changed files with 141 additions and 100 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -3,8 +3,8 @@ import { socket } from '../socket.js'
import { showView } from '../tabs.js' import { showView } from '../tabs.js'
import Downloads from '../downloads.js' import Downloads from '../downloads.js'
import QualityModal from '../quality-modal.js' import QualityModal from '../quality-modal.js'
import TrackPreview from '../track-preview.js' // import TrackPreview from '../track-preview.js'
import Utils from '../utils.js' // import Utils from '../utils.js'
const HomeTab = new Vue({ const HomeTab = new Vue({
data() { data() {
@ -21,15 +21,19 @@ const HomeTab = new Vue({
document.getElementById('main_settings_tablink').click() document.getElementById('main_settings_tablink').click()
}, },
addToQueue(e) { addToQueue(e) {
e.stopPropagation()
Downloads.sendAddToQueue(e.currentTarget.dataset.link) Downloads.sendAddToQueue(e.currentTarget.dataset.link)
}, },
openQualityModal(e) { openQualityModal(e) {
QualityModal.open(e.currentTarget.dataset.link) QualityModal.open(e.currentTarget.dataset.link)
}, },
initHome(data) { initHome(data) {
this.playlists = data.playlists.data const {
this.albums = data.albums.data playlists: { data: playlistData },
albums: { data: albumData }
} = data
this.playlists = playlistData
this.albums = albumData
} }
}, },
mounted() { mounted() {

View File

@ -29,26 +29,36 @@ const LinkAnalyzerTab = new Vue({
this.countries = [] this.countries = []
}, },
showTrack(data) { showTrack(data) {
this.title = const {
data.title + title,
(data.title_version && data.title.indexOf(data.title_version) == -1 ? ' ' + data.title_version : '') title_version,
this.image = data.album.cover_xl album: { cover_xl },
link,
available_countries
} = data
this.title = title + (title_version && title.indexOf(title_version) == -1 ? ' ' + title_version : '')
this.image = cover_xl
this.type = 'track' this.type = 'track'
this.link = data.link this.link = link
data.available_countries.forEach(cc => {
available_countries.forEach(cc => {
let temp = [] let temp = []
let chars = [...cc].map(c => c.charCodeAt() + 127397) let chars = [...cc].map(c => c.charCodeAt() + 127397)
temp.push(String.fromCodePoint(...chars)) temp.push(String.fromCodePoint(...chars))
temp.push(Utils.COUNTRIES[cc]) temp.push(Utils.COUNTRIES[cc])
this.countries.push(temp) this.countries.push(temp)
}) })
this.data = data this.data = data
}, },
showAlbum(data) { showAlbum(data) {
this.title = data.title const { title, cover_xl, link } = data
this.image = data.cover_xl
this.title = title
this.image = cover_xl
this.type = 'album' this.type = 'album'
this.link = data.link this.link = link
this.data = data this.data = data
} }
}, },

View File

@ -77,9 +77,30 @@ const MainSearch = new Vue({
} }
}, },
changeSearchTab(section) { changeSearchTab(section) {
if (section != 'TOP_RESULT') { if (section === 'TOP_RESULT') return
document.getElementById(`search_${section.toLowerCase()}_tab`).click()
let tabID
// Using the switch beacuse it's tricky to find refernces of the belo IDs
switch (section) {
case 'TRACK':
tabID = 'search_track_tab'
break
case 'ALBUM':
tabID = 'search_album_tab'
break
case 'ARTIST':
tabID = 'search_artist_tab'
break
case 'PLAYLIST':
tabID = 'search_playlist_tab'
break
default:
break
} }
document.getElementById(tabID).click()
}, },
addToQueue(e) { addToQueue(e) {
Downloads.sendAddToQueue(e.currentTarget.dataset.link) Downloads.sendAddToQueue(e.currentTarget.dataset.link)
@ -98,45 +119,54 @@ const MainSearch = new Vue({
}) })
}, },
scrolledSearch(type) { scrolledSearch(type) {
if (this.results[type + 'Tab'].next < this.results[type + 'Tab'].total) { let currentTab = type + 'Tab'
if (this.results[currentTab].next < this.results[currentTab].total) {
socket.emit('search', { socket.emit('search', {
term: this.results.query, term: this.results.query,
type: type, type: type,
start: this.results[type + 'Tab'].next, start: this.results[currentTab].next,
nb: 30 nb: 30
}) })
} }
}, },
handleMainSearch(result) { handleMainSearch(result) {
let resetObj = { data: [], next: 0, total: 0, loaded: false } let resetObj = { data: [], next: 0, total: 0, loaded: false }
this.results.allTab = result this.results.allTab = result
this.results.trackTab = { ...resetObj } this.results.trackTab = { ...resetObj }
this.results.albumTab = { ...resetObj } this.results.albumTab = { ...resetObj }
this.results.artistTab = { ...resetObj } this.results.artistTab = { ...resetObj }
this.results.playlistTab = { ...resetObj } this.results.playlistTab = { ...resetObj }
if (this.results.query == '') document.getElementById('search_all_tab').click() if (this.results.query == '') document.getElementById('search_all_tab').click()
this.results.query = result.QUERY this.results.query = result.QUERY
document.getElementById('search_tab_content').style.display = 'block' document.getElementById('search_tab_content').style.display = 'block'
document.getElementById('main_search_tablink').click() document.getElementById('main_search_tablink').click()
}, },
handleSearch(result) { handleSearch(result) {
const { next: nextResult, total, type, data } = result
let currentTab = type + 'Tab'
let next = 0 let next = 0
if (result.next) { if (nextResult) {
next = parseInt(result.next.match(/index=(\d*)/)[1]) next = parseInt(nextResult.match(/index=(\d*)/)[1])
} else { } else {
next = result.total next = total
} }
if (this.results[result.type + 'Tab'].total != result.total) { if (this.results[currentTab].total != total) {
this.results[result.type + 'Tab'].total = result.total this.results[currentTab].total = total
} }
if (this.results[result.type + 'Tab'].next != next) { if (this.results[currentTab].next != next) {
this.results[result.type + 'Tab'].next = next this.results[currentTab].next = next
this.results[result.type + 'Tab'].data = this.results[result.type + 'Tab'].data.concat(result.data) this.results[currentTab].data = this.results[currentTab].data.concat(data)
} }
this.results[result.type + 'Tab'].loaded = true
this.results[currentTab].loaded = true
} }
}, },
mounted() { mounted() {

View File

@ -40,7 +40,7 @@ const SettingsTab = new Vue({
toast('ARL copied to clipboard', 'assignment') toast('ARL copied to clipboard', 'assignment')
}, },
updateMaxVolume(){ updateMaxVolume() {
localStorage.setItem('previewVolume', this.previewVolume.preview_max_volume) localStorage.setItem('previewVolume', this.previewVolume.preview_max_volume)
}, },
saveSettings() { saveSettings() {
@ -72,17 +72,17 @@ const SettingsTab = new Vue({
socket.emit('login', arl, true, this.accountNum) socket.emit('login', arl, true, this.accountNum)
} }
}, },
changeAccount(){ changeAccount() {
socket.emit('changeAccount', this.accountNum) socket.emit('changeAccount', this.accountNum)
}, },
accountChanged(user, accountNum){ accountChanged(user, accountNum) {
this.$refs.username.innerText = user.name this.$refs.username.innerText = user.name
this.$refs.userpicture.src = `https://e-cdns-images.dzcdn.net/images/user/${user.picture}/125x125-000000-80-0-0.jpg` this.$refs.userpicture.src = `https://e-cdns-images.dzcdn.net/images/user/${user.picture}/125x125-000000-80-0-0.jpg`
this.accountNum = accountNum this.accountNum = accountNum
localStorage.setItem('accountNum', this.accountNum) localStorage.setItem('accountNum', this.accountNum)
}, },
initAccounts(accounts){ initAccounts(accounts) {
this.accounts = accounts; this.accounts = accounts
}, },
logout() { logout() {
socket.emit('logout') socket.emit('logout')
@ -120,13 +120,12 @@ const SettingsTab = new Vue({
this.changeSlimDownloads = 'true' === localStorage.getItem('slimDownloads') this.changeSlimDownloads = 'true' === localStorage.getItem('slimDownloads')
let volume = parseInt(localStorage.getItem('previewVolume')) let volume = parseInt(localStorage.getItem('previewVolume'))
if (isNaN(volume)){ if (isNaN(volume)) {
volume = 80 volume = 80
localStorage.setItem('previewVolume', volume) localStorage.setItem('previewVolume', volume)
} }
window.vol.preview_max_volume = volume window.vol.preview_max_volume = volume
socket.on('init_settings', this.initSettings) socket.on('init_settings', this.initSettings)
socket.on('updateSettings', this.updateSettings) socket.on('updateSettings', this.updateSettings)
socket.on('accountChanged', this.accountChanged) socket.on('accountChanged', this.accountChanged)

View File

@ -5,6 +5,7 @@ import { showView } from '../tabs.js'
import Downloads from '../downloads.js' import Downloads from '../downloads.js'
import QualityModal from '../quality-modal.js' import QualityModal from '../quality-modal.js'
import TrackPreview from '../track-preview.js' import TrackPreview from '../track-preview.js'
import Utils from '../utils.js'
const TracklistTab = new Vue({ const TracklistTab = new Vue({
data: () => ({ data: () => ({
@ -16,7 +17,6 @@ const TracklistTab = new Vue({
image: '', image: '',
type: '', type: '',
link: '', link: '',
head: null,
body: [] body: []
}), }),
methods: { methods: {
@ -31,11 +31,9 @@ const TracklistTab = new Vue({
this.release_date = '' this.release_date = ''
this.explicit = false this.explicit = false
this.type = '' this.type = ''
this.head = []
this.body = [] this.body = []
}, },
addToQueue(e) { addToQueue(e) {
e.stopPropagation()
Downloads.sendAddToQueue(e.currentTarget.dataset.link) Downloads.sendAddToQueue(e.currentTarget.dataset.link)
}, },
openQualityModal(e) { openQualityModal(e) {
@ -58,83 +56,83 @@ const TracklistTab = new Vue({
} }
return selected.join(';') return selected.join(';')
}, },
convertDuration(duration) { convertDuration: Utils.convertDuration,
//convert from seconds only to mm:ss format
let mm, ss
mm = Math.floor(duration / 60)
ss = duration - mm * 60
//add leading zero if ss < 0
if (ss < 10) {
ss = '0' + ss
}
return mm + ':' + ss
},
showAlbum(data) { showAlbum(data) {
this.type = 'Album' const {
this.link = `https://www.deezer.com/album/${data.id}` id: albumID,
this.title = data.title title: albumTitle,
this.explicit = data.explicit_lyrics explicit_lyrics,
this.label = data.label label: albumLabel,
this.metadata = `${data.artist.name}${data.tracks.length} songs` artist: { name: artistName },
this.release_date = data.release_date.substring(0, 10) tracks: albumTracks,
this.image = data.cover_xl tracks: { length: numberOfTracks },
this.head = [ release_date,
{ title: '<i class="material-icons">music_note</i>', width: '24px' }, cover_xl
{ title: '#' }, } = data
{ title: 'Song' },
{ title: 'Artist' },
{ title: '<i class="material-icons">timer</i>', width: '40px' }
]
if (_.isEmpty(data.tracks)) { this.type = 'Album'
this.link = `https://www.deezer.com/album/${albumID}`
this.title = albumTitle
this.explicit = explicit_lyrics
this.label = albumLabel
this.metadata = `${artistName}${numberOfTracks} songs`
this.release_date = release_date.substring(0, 10)
this.image = cover_xl
if (_.isEmpty(albumTracks)) {
this.body = null this.body = null
} else { } else {
this.body = data.tracks this.body = albumTracks
} }
}, },
showPlaylist(data) { showPlaylist(data) {
this.type = 'Playlist' const {
this.link = `https://www.deezer.com/playlist/${data.id}` id: playlistID,
this.title = data.title title: playlistTitle,
this.image = data.picture_xl picture_xl: playlistCover,
this.release_date = data.creation_date.substring(0, 10) creation_date,
this.metadata = `by ${data.creator.name}${data.tracks.length} songs` creator: { name: creatorName },
this.head = [ tracks: playlistTracks,
{ title: '<i class="material-icons">music_note</i>', width: '24px' }, tracks: { length: numberOfTracks }
{ title: '#' }, } = data
{ title: 'Song' },
{ title: 'Artist' },
{ title: 'Album' },
{ title: '<i class="material-icons">timer</i>', width: '40px' }
]
if (_.isEmpty(data.tracks)) { this.type = 'Playlist'
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`
if (_.isEmpty(playlistTracks)) {
this.body = null this.body = null
} else { } else {
this.body = data.tracks this.body = playlistTracks
} }
}, },
showSpotifyPlaylist(data) { showSpotifyPlaylist(data) {
const {
uri: playlistURI,
name: playlistName,
images,
images: { length: numberOfImages },
owner: { display_name: ownerName },
tracks: playlistTracks,
tracks: { length: numberOfTracks }
} = data
this.type = 'Spotify Playlist' this.type = 'Spotify Playlist'
this.link = data.uri this.link = playlistURI
this.title = data.name this.title = playlistName
this.image = data.images.length this.image = numberOfImages
? data.images[0].url ? images[0].url
: 'https://e-cdns-images.dzcdn.net/images/cover/d41d8cd98f00b204e9800998ecf8427e/1000x1000-000000-80-0-0.jpg' : 'https://e-cdns-images.dzcdn.net/images/cover/d41d8cd98f00b204e9800998ecf8427e/1000x1000-000000-80-0-0.jpg'
this.release_date = '' this.release_date = ''
this.metadata = `by ${data.owner.display_name}${data.tracks.length} songs` this.metadata = `by ${ownerName}${numberOfTracks} songs`
this.head = [
{ title: '<i class="material-icons">music_note</i>', width: '24px' }, if (_.isEmpty(playlistTracks)) {
{ title: '#' },
{ title: 'Song' },
{ title: 'Artist' },
{ title: 'Album' },
{ title: '<i class="material-icons">timer</i>', width: '40px' }
]
if (_.isEmpty(data.tracks)) {
this.body = null this.body = null
} else { } else {
this.body = data.tracks this.body = playlistTracks
} }
} }
}, },

View File

@ -12,11 +12,11 @@ function isValidURL(text) {
} }
function convertDuration(duration) { function convertDuration(duration) {
// convert from seconds only to mm:ss format // Convert from seconds only to mm:ss format
let mm, ss let mm, ss
mm = Math.floor(duration / 60) mm = Math.floor(duration / 60)
ss = duration - mm * 60 ss = duration - mm * 60
//add leading zero if ss < 0 // Add leading zero if ss < 0
if (ss < 10) { if (ss < 10) {
ss = '0' + ss ss = '0' + ss
} }