organizations of js files
This commit is contained in:
Roberto Tonino
95
public/js/modules/components/artist-tab.js
Normal file
95
public/js/modules/components/artist-tab.js
Normal file
@@ -0,0 +1,95 @@
|
||||
import { socket } from '../socket.js'
|
||||
import Downloads from '../downloads.js'
|
||||
import QualityModal from '../quality-modal.js'
|
||||
import { albumView } from '../tabs.js'
|
||||
|
||||
const ArtistTab = new Vue({
|
||||
data() {
|
||||
return {
|
||||
currentTab: '',
|
||||
sortKey: 'release_date',
|
||||
sortOrder: 'desc',
|
||||
title: '',
|
||||
image: '',
|
||||
type: '',
|
||||
link: '',
|
||||
head: null,
|
||||
body: null
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
albumView,
|
||||
reset() {
|
||||
this.title = 'Loading...'
|
||||
this.image = ''
|
||||
this.type = ''
|
||||
this.currentTab = ''
|
||||
this.sortKey = 'release_date'
|
||||
this.sortOrder = 'desc'
|
||||
this.link = ''
|
||||
this.head = []
|
||||
this.body = null
|
||||
},
|
||||
addToQueue(e) {
|
||||
e.stopPropagation()
|
||||
Downloads.sendAddToQueue(e.currentTarget.dataset.link)
|
||||
},
|
||||
openQualityModal(e) {
|
||||
e.preventDefault()
|
||||
QualityModal.open(e.currentTarget.dataset.link)
|
||||
},
|
||||
moreInfo(url, e) {
|
||||
if (e) e.preventDefault()
|
||||
showTrackListSelective(url, true)
|
||||
},
|
||||
sortBy(key) {
|
||||
if (key == this.sortKey) {
|
||||
this.sortOrder = this.sortOrder == 'asc' ? 'desc' : 'asc'
|
||||
} else {
|
||||
this.sortKey = key
|
||||
this.sortOrder = 'asc'
|
||||
}
|
||||
},
|
||||
changeTab(tab) {
|
||||
this.currentTab = tab
|
||||
},
|
||||
checkNewRelease(date) {
|
||||
let g1 = new Date()
|
||||
let g2 = new Date(date)
|
||||
g2.setDate(g2.getDate() + 3)
|
||||
g1.setHours(0, 0, 0, 0)
|
||||
|
||||
return g1.getTime() <= g2.getTime()
|
||||
},
|
||||
showArtist(data) {
|
||||
this.title = data.name
|
||||
this.image = data.picture_xl
|
||||
this.type = 'Artist'
|
||||
this.link = `https://www.deezer.com/artist/${data.id}`
|
||||
this.currentTab = Object.keys(data.releases)[0]
|
||||
this.sortKey = 'release_date'
|
||||
this.sortOrder = 'desc'
|
||||
this.head = [
|
||||
{ title: 'Title', sortKey: 'title' },
|
||||
{ title: 'Release Date', sortKey: 'release_date' },
|
||||
{ title: '', width: '32px' }
|
||||
]
|
||||
if (_.isEmpty(data.releases)) {
|
||||
this.body = null
|
||||
} else {
|
||||
this.body = data.releases
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
showTable() {
|
||||
if (this.body) return _.orderBy(this.body[this.currentTab], this.sortKey, this.sortOrder)
|
||||
else return []
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
socket.on('show_artist', this.showArtist)
|
||||
}
|
||||
}).$mount('#artist_tab')
|
||||
|
||||
export default ArtistTab
|
||||
62
public/js/modules/components/link-analyzer-tab.js
Normal file
62
public/js/modules/components/link-analyzer-tab.js
Normal file
@@ -0,0 +1,62 @@
|
||||
import { socket } from '../socket.js'
|
||||
import { albumView } from '../tabs.js'
|
||||
import Utils from '../utils.js'
|
||||
|
||||
const LinkAnalyzerTab = new Vue({
|
||||
data() {
|
||||
return {
|
||||
title: '',
|
||||
subtitle: '',
|
||||
image: '',
|
||||
data: {},
|
||||
type: '',
|
||||
link: '',
|
||||
countries: []
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
albumView,
|
||||
convertDuration: Utils.convertDuration,
|
||||
reset() {
|
||||
this.title = 'Loading...'
|
||||
this.subtitle = ''
|
||||
this.image = ''
|
||||
this.data = {}
|
||||
this.type = ''
|
||||
this.link = ''
|
||||
this.countries = []
|
||||
},
|
||||
showTrack(data) {
|
||||
this.title =
|
||||
data.title +
|
||||
(data.title_version && data.title.indexOf(data.title_version) == -1 ? ' ' + data.title_version : '')
|
||||
this.subtitle = `by ${data.artist.name}\nin ${data.album.title}`
|
||||
this.image = data.album.cover_xl
|
||||
this.type = 'track'
|
||||
this.link = data.link
|
||||
data.available_countries.forEach(cc => {
|
||||
let temp = []
|
||||
let chars = [...cc].map(c => c.charCodeAt() + 127397)
|
||||
temp.push(String.fromCodePoint(...chars))
|
||||
temp.push(Utils.COUNTRIES[cc])
|
||||
this.countries.push(temp)
|
||||
})
|
||||
this.data = data
|
||||
},
|
||||
showAlbum(data) {
|
||||
console.log(data)
|
||||
this.title = data.title
|
||||
this.subtitle = `by ${data.artist.name}\n${data.nb_tracks} tracks`
|
||||
this.image = data.cover_xl
|
||||
this.type = 'album'
|
||||
this.link = data.link
|
||||
this.data = data
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
socket.on('analyze_track', this.showTrack)
|
||||
socket.on('analyze_album', this.showAlbum)
|
||||
}
|
||||
}).$mount('#analyzer_tab')
|
||||
|
||||
export default LinkAnalyzerTab
|
||||
149
public/js/modules/components/main-search.js
Normal file
149
public/js/modules/components/main-search.js
Normal file
@@ -0,0 +1,149 @@
|
||||
import { socket } from '../socket.js'
|
||||
import { artistView, albumView, playlistView } from '../tabs.js'
|
||||
import Downloads from '../downloads.js'
|
||||
import QualityModal from '../quality-modal.js'
|
||||
import TrackPreview from '../track-preview.js'
|
||||
import Utils from '../utils.js'
|
||||
|
||||
const MainSearch = new Vue({
|
||||
data: {
|
||||
names: {
|
||||
TOP_RESULT: 'Top Result',
|
||||
TRACK: 'Tracks',
|
||||
ARTIST: 'Artists',
|
||||
ALBUM: 'Albums',
|
||||
PLAYLIST: 'Playlists'
|
||||
},
|
||||
results: {
|
||||
query: '',
|
||||
allTab: {
|
||||
ORDER: [],
|
||||
TOP_RESULT: [],
|
||||
ALBUM: {},
|
||||
ARTIST: {},
|
||||
TRACK: {},
|
||||
PLAYLIST: {}
|
||||
},
|
||||
trackTab: {
|
||||
data: [],
|
||||
next: 0,
|
||||
total: 0,
|
||||
loaded: false
|
||||
},
|
||||
albumTab: {
|
||||
data: [],
|
||||
next: 0,
|
||||
total: 0,
|
||||
loaded: false
|
||||
},
|
||||
artistTab: {
|
||||
data: [],
|
||||
next: 0,
|
||||
total: 0,
|
||||
loaded: false
|
||||
},
|
||||
playlistTab: {
|
||||
data: [],
|
||||
next: 0,
|
||||
total: 0,
|
||||
loaded: false
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
artistView,
|
||||
albumView,
|
||||
playlistView,
|
||||
playPausePreview: TrackPreview.playPausePreview,
|
||||
previewMouseEnter: TrackPreview.previewMouseEnter,
|
||||
previewMouseLeave: TrackPreview.previewMouseLeave,
|
||||
handleClickTopResult(event) {
|
||||
let topResultType = this.results.allTab.TOP_RESULT[0].type
|
||||
|
||||
switch (topResultType) {
|
||||
case 'artist':
|
||||
this.artistView(event)
|
||||
break
|
||||
case 'album':
|
||||
this.albumView(event)
|
||||
break
|
||||
case 'playlist':
|
||||
this.playlistView(event)
|
||||
break
|
||||
|
||||
default:
|
||||
break
|
||||
}
|
||||
},
|
||||
changeSearchTab(section) {
|
||||
if (section != 'TOP_RESULT') {
|
||||
document.getElementById(`search_${section.toLowerCase()}_tab`).click()
|
||||
}
|
||||
},
|
||||
addToQueue: function (e) {
|
||||
e.stopPropagation()
|
||||
Downloads.sendAddToQueue(e.currentTarget.dataset.link)
|
||||
},
|
||||
openQualityModal: function (e) {
|
||||
e.preventDefault()
|
||||
QualityModal.open(e.currentTarget.dataset.link)
|
||||
},
|
||||
numberWithDots: Utils.numberWithDots,
|
||||
convertDuration: Utils.convertDuration,
|
||||
search(type) {
|
||||
socket.emit('search', {
|
||||
term: this.results.query,
|
||||
type: type,
|
||||
start: this.results[type + 'Tab'].next,
|
||||
nb: 30
|
||||
})
|
||||
},
|
||||
scrolledSearch(type) {
|
||||
if (this.results[type + 'Tab'].next < this.results[type + 'Tab'].total) {
|
||||
socket.emit('search', {
|
||||
term: this.results.query,
|
||||
type: type,
|
||||
start: this.results[type + 'Tab'].next,
|
||||
nb: 30
|
||||
})
|
||||
}
|
||||
},
|
||||
handleMainSearch(result) {
|
||||
let resetObj = { data: [], next: 0, total: 0, loaded: false }
|
||||
this.results.allTab = result
|
||||
this.results.query = result.QUERY
|
||||
this.results.trackTab = { ...resetObj }
|
||||
this.results.albumTab = { ...resetObj }
|
||||
this.results.artistTab = { ...resetObj }
|
||||
this.results.playlistTab = { ...resetObj }
|
||||
document.getElementById('search_all_tab').click()
|
||||
document.getElementById('search_tab_content').style.display = 'block'
|
||||
document.getElementById('main_search_tablink').click()
|
||||
},
|
||||
handleSearch(result) {
|
||||
let next = 0
|
||||
|
||||
if (result.next) {
|
||||
next = parseInt(result.next.match(/index=(\d*)/)[1])
|
||||
} else {
|
||||
next = result.total
|
||||
}
|
||||
|
||||
if (this.results[result.type + 'Tab'].total != result.total) {
|
||||
this.results[result.type + 'Tab'].total = result.total
|
||||
}
|
||||
|
||||
if (this.results[result.type + 'Tab'].next != next) {
|
||||
this.results[result.type + 'Tab'].next = next
|
||||
this.results[result.type + 'Tab'].data = this.results[result.type + 'Tab'].data.concat(result.data)
|
||||
}
|
||||
this.results[result.type + 'Tab'].loaded = true
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
socket.on('mainSearch', this.handleMainSearch)
|
||||
socket.on('search', this.handleSearch)
|
||||
}
|
||||
}).$mount('#search_tab')
|
||||
|
||||
export default MainSearch
|
||||
60
public/js/modules/components/settings-tab.js
Normal file
60
public/js/modules/components/settings-tab.js
Normal file
@@ -0,0 +1,60 @@
|
||||
import { toast } from '../toasts.js'
|
||||
import { socket } from '../socket.js'
|
||||
|
||||
const SettingsTab = new Vue({
|
||||
data() {
|
||||
return {
|
||||
settings: { tags: {} },
|
||||
lastSettings: {},
|
||||
lastCredentials: {},
|
||||
spotifyFeatures: {}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
copyARLtoClipboard() {
|
||||
let copyText = this.$refs.loginInput
|
||||
|
||||
copyText.setAttribute('type', 'text')
|
||||
copyText.select()
|
||||
copyText.setSelectionRange(0, 99999)
|
||||
document.execCommand('copy')
|
||||
copyText.setAttribute('type', 'password')
|
||||
|
||||
toast('ARL copied to clipboard', 'assignment')
|
||||
},
|
||||
saveSettings() {
|
||||
this.lastSettings = { ...SettingsTab.settings }
|
||||
this.lastCredentials = { ...SettingsTab.spotifyFeatures }
|
||||
socket.emit('saveSettings', this.lastSettings, this.lastCredentials)
|
||||
},
|
||||
loadSettings(settings, spotifyCredentials) {
|
||||
this.lastSettings = { ...settings }
|
||||
this.lastCredentials = { ...spotifyCredentials }
|
||||
this.settings = settings
|
||||
this.spotifyFeatures = spotifyCredentials
|
||||
},
|
||||
login() {
|
||||
let arl = this.$refs.loginInput.value
|
||||
if (arl != '' && arl != localStorage.getItem('arl')) {
|
||||
socket.emit('login', arl, true)
|
||||
}
|
||||
},
|
||||
logout() {
|
||||
socket.emit('logout')
|
||||
},
|
||||
initSettings(settings, credentials) {
|
||||
this.loadSettings(settings, credentials)
|
||||
toast('Settings loaded!', 'settings')
|
||||
},
|
||||
updateSettings(settings, credentials) {
|
||||
this.loadSettings(settings, credentials)
|
||||
toast('Settings updated!', 'settings')
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
socket.on('init_settings', this.initSettings)
|
||||
socket.on('updateSettings', this.updateSettings)
|
||||
}
|
||||
}).$mount('#settings_tab')
|
||||
|
||||
export default SettingsTab
|
||||
122
public/js/modules/components/tracklist-tab.js
Normal file
122
public/js/modules/components/tracklist-tab.js
Normal file
@@ -0,0 +1,122 @@
|
||||
import { socket } from '../socket.js'
|
||||
import { albumView, artistView } from '../tabs.js'
|
||||
import Downloads from '../downloads.js'
|
||||
import QualityModal from '../quality-modal.js'
|
||||
import TrackPreview from '../track-preview.js'
|
||||
|
||||
const TracklistTab = new Vue({
|
||||
data: {
|
||||
title: '',
|
||||
metadata: '',
|
||||
release_date: '',
|
||||
label: '',
|
||||
explicit: false,
|
||||
image: '',
|
||||
type: '',
|
||||
link: '',
|
||||
head: null,
|
||||
body: []
|
||||
},
|
||||
methods: {
|
||||
artistView,
|
||||
albumView,
|
||||
playPausePreview: TrackPreview.playPausePreview,
|
||||
reset() {
|
||||
this.title = 'Loading...'
|
||||
this.image = ''
|
||||
this.metadata = ''
|
||||
this.label = ''
|
||||
this.release_date = ''
|
||||
this.explicit = false
|
||||
this.type = ''
|
||||
this.head = []
|
||||
this.body = []
|
||||
},
|
||||
addToQueue: function (e) {
|
||||
e.stopPropagation()
|
||||
Downloads.sendAddToQueue(e.currentTarget.dataset.link)
|
||||
},
|
||||
openQualityModal: function (e) {
|
||||
e.preventDefault()
|
||||
QualityModal.open(e.currentTarget.dataset.link)
|
||||
},
|
||||
toggleAll: function (e) {
|
||||
this.body.forEach(item => {
|
||||
if (item.type == 'track') {
|
||||
item.selected = e.currentTarget.checked
|
||||
}
|
||||
})
|
||||
},
|
||||
selectedLinks: function () {
|
||||
var selected = []
|
||||
if (this.body) {
|
||||
this.body.forEach(item => {
|
||||
if (item.type == 'track' && item.selected) selected.push(item.link)
|
||||
})
|
||||
}
|
||||
return selected.join(';')
|
||||
},
|
||||
convertDuration(duration) {
|
||||
//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) {
|
||||
this.type = 'Album'
|
||||
this.link = `https://www.deezer.com/album/${data.id}`
|
||||
this.title = data.title
|
||||
this.explicit = data.explicit_lyrics
|
||||
this.label = data.label
|
||||
this.metadata = `${data.artist.name} • ${data.tracks.length} songs`
|
||||
this.release_date = data.release_date.substring(0, 10)
|
||||
this.image = data.cover_xl
|
||||
this.head = [
|
||||
{ title: '<i class="material-icons">music_note</i>', width: '24px' },
|
||||
{ title: '#' },
|
||||
{ title: 'Song' },
|
||||
{ title: 'Artist' },
|
||||
{ title: '<i class="material-icons">timer</i>', width: '40px' }
|
||||
]
|
||||
if (_.isEmpty(data.tracks)) {
|
||||
console.log('show e lodash ok')
|
||||
|
||||
this.body = null
|
||||
} else {
|
||||
this.body = data.tracks
|
||||
}
|
||||
},
|
||||
showPlaylist(data) {
|
||||
this.type = 'Playlist'
|
||||
this.link = `https://www.deezer.com/playlist/${data.id}`
|
||||
this.title = data.title
|
||||
this.image = data.picture_xl
|
||||
this.release_date = data.creation_date.substring(0, 10)
|
||||
this.metadata = `by ${data.creator.name} • ${data.tracks.length} songs`
|
||||
this.head = [
|
||||
{ title: '<i class="material-icons">music_note</i>', width: '24px' },
|
||||
{ title: '#' },
|
||||
{ title: 'Song' },
|
||||
{ title: 'Artist' },
|
||||
{ title: 'Album' },
|
||||
{ title: '<i class="material-icons">timer</i>', width: '40px' }
|
||||
]
|
||||
if (_.isEmpty(data.tracks)) {
|
||||
this.body = null
|
||||
} else {
|
||||
this.body = data.tracks
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
socket.on('show_album', this.showAlbum)
|
||||
socket.on('show_playlist', this.showPlaylist)
|
||||
}
|
||||
}).$mount('#tracklist_tab')
|
||||
|
||||
export default TracklistTab
|
||||
Reference in New Issue
Block a user