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

wip: improving downloads' managemente

Browse Source
This commit is contained in:
Roberto Tonino 2020-09-19 17:07:28 +02:00
parent 6e195827aa
commit 032762f75c
10 changed files with 182 additions and 118 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
public/js/bundle.js
View File

File diff suppressed because one or more lines are too long

19
src/components/ArtistTab.vue
View File

@ -51,22 +51,18 @@
<img <img
class="rounded coverart" class="rounded coverart"
:src="release.cover_small" :src="release.cover_small"
style="margin-right: 16px; width: 56px; height: 56px;" style="margin-right: 16px; width: 56px; height: 56px"
/> />
<i v-if="release.explicit_lyrics" class="material-icons explicit_icon"> <i v-if="release.explicit_lyrics" class="material-icons explicit_icon"> explicit </i>
explicit
</i>
{{ release.title }} {{ release.title }}
<i v-if="checkNewRelease(release.release_date)" class="material-icons" style="color: #ff7300;"> <i v-if="checkNewRelease(release.release_date)" class="material-icons" style="color: #ff7300">
fiber_new fiber_new
</i> </i>
</td> </td>
<td>{{ release.release_date }}</td> <td>{{ release.release_date }}</td>
<td>{{ release.nb_song }}</td> <td>{{ release.nb_song }}</td>
<td @click.stop="addToQueue" :data-link="release.link" class="clickable"> <td @click.stop="addToQueue" :data-link="release.link" class="clickable">
<i class="material-icons" :title="$t('globals.download_hint')"> <i class="material-icons" :title="$t('globals.download_hint')"> file_download </i>
file_download
</i>
</td> </td>
</tr> </tr>
</tbody> </tbody>
@ -184,17 +180,10 @@ export default {
} }
}, },
mounted() { mounted() {
// this.$refs.root.style.display = 'block'
console.log('artist mounted')
socket.on('show_artist', this.showArtist) socket.on('show_artist', this.showArtist)
EventBus.$on('artistTab:updateSelected', this.updateSelected) EventBus.$on('artistTab:updateSelected', this.updateSelected)
EventBus.$on('artistTab:changeTab', this.changeTab) EventBus.$on('artistTab:changeTab', this.changeTab)
},
beforeDestroy() {
console.log('artist bef dest')
// this.$refs.root.style.display = 'none'
} }
} }
</script> </script>

8
src/components/TheChartsTab.vue
View File

@ -130,16 +130,10 @@ export default {
} }
}, },
mounted() { mounted() {
console.log('charts mounted')
// this.$refs.root.style.display = 'block'
this.waitCharts() this.waitCharts()
// socket.on('init_charts', this.initCharts) // socket.on('init_charts', this.initCharts)
socket.on('setChartTracks', this.setTracklist) socket.on('setChartTracks', this.setTracklist)
}, },
beforeDestroy() {
console.log('charts bef dest')
// this.$refs.root.style.display = 'none'
},
methods: { methods: {
artistView: showView.bind(null, 'artist'), artistView: showView.bind(null, 'artist'),
albumView: showView.bind(null, 'album'), albumView: showView.bind(null, 'album'),
@ -190,7 +184,6 @@ export default {
socket.emit('getChartTracks', this.id) socket.emit('getChartTracks', this.id)
}, },
setTracklist(data) { setTracklist(data) {
console.log('settracklist')
this.chart = data this.chart = data
}, },
changeCountry() { changeCountry() {
@ -198,7 +191,6 @@ export default {
this.id = 0 this.id = 0
}, },
initCharts() { initCharts() {
console.log('init charts')
this.countries = this.getCharts this.countries = this.getCharts
this.country = localStorage.getItem('chart') || '' this.country = localStorage.getItem('chart') || ''

134
src/components/TheDownloadTab.vue
View File

@ -41,7 +41,9 @@
delete_sweep delete_sweep
</i> </i>
</div> </div>
<div id="download_list" @click="handleListClick" ref="list"></div> <div id="download_list" @click="handleListClick" ref="list">
<QueueItem v-for="item in queueList" :queue-item="item" :key="item.uuid" />
</div>
</div> </div>
</template> </template>
@ -57,10 +59,15 @@ import { socket } from '@/utils/socket'
import { toast } from '@/utils/toasts' import { toast } from '@/utils/toasts'
import { mapActions } from 'vuex' import { mapActions } from 'vuex'
import QueueItem from '@components/downloads/QueueItem.vue'
const tabMinWidth = 250 const tabMinWidth = 250
const tabMaxWidth = 500 const tabMaxWidth = 500
export default { export default {
components: {
QueueItem
},
data() { data() {
return { return {
cachedTabWidth: parseInt(localStorage.getItem('downloadTabWidth')) || 300, cachedTabWidth: parseInt(localStorage.getItem('downloadTabWidth')) || 300,
@ -112,6 +119,7 @@ export default {
} }
}, },
handleListClick(event) { handleListClick(event) {
console.log('this.handleListClick')
const { target } = event const { target } = event
if (!target.matches('.queue_icon[data-uuid]')) { if (!target.matches('.queue_icon[data-uuid]')) {
@ -124,6 +132,7 @@ export default {
switch (icon) { switch (icon) {
case 'remove': case 'remove':
socket.emit('removeFromQueue', uuid) socket.emit('removeFromQueue', uuid)
if ($(`#bar_${uuid}`).hasClass('indeterminate')) { if ($(`#bar_${uuid}`).hasClass('indeterminate')) {
$(`#download_${uuid}`).remove() $(`#download_${uuid}`).remove()
} else { } else {
@ -134,6 +143,7 @@ export default {
} }
}, },
initQueue(data) { initQueue(data) {
console.log('this.initQueue')
const { const {
queue: initQueue, queue: initQueue,
queueComplete: initQueueComplete, queueComplete: initQueueComplete,
@ -165,6 +175,7 @@ export default {
} }
}, },
addToQueue(queueItem, current = false) { addToQueue(queueItem, current = false) {
console.log('this.addToQueue')
if (Array.isArray(queueItem)) { if (Array.isArray(queueItem)) {
if (queueItem.length > 1) { if (queueItem.length > 1) {
queueItem.forEach((item, i) => { queueItem.forEach((item, i) => {
@ -177,44 +188,39 @@ export default {
queueItem = queueItem[0] queueItem = queueItem[0]
} }
} }
this.queueList[queueItem.uuid] = queueItem
if (queueItem.downloaded + queueItem.failed == queueItem.size) { // * Here we have only objects
if (this.queueComplete.indexOf(queueItem.uuid) == -1) { this.$set(this.queueList, queueItem.uuid, queueItem)
// this.queueList[queueItem.uuid] = queueItem
// * Used when opening the app in another tab
let itemIsAlreadyDownloaded = queueItem.downloaded + queueItem.failed == queueItem.size
if (itemIsAlreadyDownloaded) {
let itemIsNotInCompletedQueue = this.queueComplete.indexOf(queueItem.uuid) == -1
if (itemIsNotInCompletedQueue) {
// * Add it
this.queueComplete.push(queueItem.uuid) this.queueComplete.push(queueItem.uuid)
} }
} else { } else {
if (this.queue.indexOf(queueItem.uuid) == -1) { let itemIsNotInQueue = this.queue.indexOf(queueItem.uuid) == -1
if (itemIsNotInQueue) {
this.queue.push(queueItem.uuid) this.queue.push(queueItem.uuid)
} }
} }
let queueDOM = document.getElementById('download_' + queueItem.uuid) let queueDOM = document.getElementById('download_' + queueItem.uuid)
let noItemInQueueDOM = typeof queueDOM == 'undefined' || queueDOM == null
if (typeof queueDOM == 'undefined' || queueDOM == null) { if (noItemInQueueDOM) {
$(this.$refs.list).append( this.appendItem(queueItem)
`<div class="download_object" id="download_${queueItem.uuid}" data-deezerid="${queueItem.id}">
<div class="download_info">
<img width="75px" class="rounded coverart" src="${queueItem.cover}" alt="Cover ${queueItem.title}"/>
<div class="download_info_data">
<span class="download_line">${queueItem.title}</span> <span class="download_slim_separator"> - </span>
<span class="secondary-text">${queueItem.artist}</span>
</div>
<div class="download_info_status">
<span class="download_line"><span class="queue_downloaded">${queueItem.downloaded + queueItem.failed}</span>/${
queueItem.size
}</span>
</div>
</div>
<div class="download_bar">
<div class="progress"><div id="bar_${queueItem.uuid}" class="indeterminate"></div></div>
<i class="material-icons queue_icon" data-uuid="${queueItem.uuid}">remove</i>
</div>
</div>`
)
} }
if (queueItem.progress > 0 || current) { let needToStartDownload = queueItem.progress > 0 || current
if (needToStartDownload) {
this.startDownload(queueItem.uuid) this.startDownload(queueItem.uuid)
} }
@ -255,10 +261,12 @@ export default {
updateQueue(update) { updateQueue(update) {
// downloaded and failed default to false? // downloaded and failed default to false?
const { uuid, downloaded, failed, progress, conversion, error, data, errid } = update const { uuid, downloaded, failed, progress, conversion, error, data, errid } = update
console.log('this.updateQueue', !!this.queueList[uuid])
if (uuid && this.queue.indexOf(uuid) > -1) { if (uuid && this.queue.indexOf(uuid) > -1) {
if (downloaded) { if (downloaded) {
this.queueList[uuid].downloaded++ this.queueList[uuid].downloaded++
$('#download_' + uuid + ' .queue_downloaded').text( $('#download_' + uuid + ' .queue_downloaded').text(
this.queueList[uuid].downloaded + this.queueList[uuid].failed this.queueList[uuid].downloaded + this.queueList[uuid].failed
) )
@ -266,9 +274,11 @@ export default {
if (failed) { if (failed) {
this.queueList[uuid].failed++ this.queueList[uuid].failed++
$('#download_' + uuid + ' .queue_downloaded').text( $('#download_' + uuid + ' .queue_downloaded').text(
this.queueList[uuid].downloaded + this.queueList[uuid].failed this.queueList[uuid].downloaded + this.queueList[uuid].failed
) )
if (this.queueList[uuid].failed == 1 && $('#download_' + uuid + ' .queue_failed').length == 0) { if (this.queueList[uuid].failed == 1 && $('#download_' + uuid + ' .queue_failed').length == 0) {
$('#download_' + uuid + ' .download_info_status').append( $('#download_' + uuid + ' .download_info_status').append(
`<span class="secondary-text inline-flex"><span class="download_slim_separator">(</span><span class="queue_failed_button inline-flex"><span class="queue_failed">1</span> <i class="material-icons">error_outline</i></span><span class="download_slim_separator">)</span></span>` `<span class="secondary-text inline-flex"><span class="download_slim_separator">(</span><span class="queue_failed_button inline-flex"><span class="queue_failed">1</span> <i class="material-icons">error_outline</i></span><span class="download_slim_separator">)</span></span>`
@ -291,33 +301,45 @@ export default {
} }
}, },
removeFromQueue(uuid) { removeFromQueue(uuid) {
console.log('this.removeFromQueue')
let index = this.queue.indexOf(uuid) let index = this.queue.indexOf(uuid)
if (index > -1) { if (index > -1) {
this.queue.splice(index, 1) this.$delete(this.queue, index)
$(`#download_${uuid}`).remove() $(`#download_${uuid}`).remove()
delete this.queueList[uuid]
this.$delete(this.queueList, uuid)
} }
}, },
removeAllDownloads(currentItem) { removeAllDownloads(currentItem) {
console.log('this.removeFromQueue')
this.queueComplete = [] this.queueComplete = []
if (currentItem == '') { let currentItemIsEmpty = currentItem === ''
if (currentItemIsEmpty) {
this.queue = [] this.queue = []
this.queueList = {} this.queueList = {}
$(listEl).html('') $(listEl).html('')
} else { } else {
this.queue = [currentItem] this.queue = [currentItem]
let tempQueueItem = this.queueList[currentItem] let tempQueueItem = this.queueList[currentItem]
this.queueList = {} this.queueList = {}
this.queueList[currentItem] = tempQueueItem this.queueList[currentItem] = tempQueueItem
$('.download_object').each(function (index) { $('.download_object').each(function (index) {
if ($(this).attr('id') != 'download_' + currentItem) $(this).remove() if ($(this).attr('id') != 'download_' + currentItem) {
$(this).remove()
}
}) })
} }
}, },
removedFinishedDownloads() { removedFinishedDownloads() {
console.log('this.removedFinishedDownloads')
this.queueComplete.forEach(item => { this.queueComplete.forEach(item => {
$('#download_' + item).remove() $('#download_' + item).remove()
}) })
@ -339,28 +361,36 @@ export default {
localStorage.setItem('downloadTabOpen', !isHidden) localStorage.setItem('downloadTabOpen', !isHidden)
}, },
cleanQueue() { cleanQueue() {
console.log('this.cleanQueue')
socket.emit('removeFinishedDownloads') socket.emit('removeFinishedDownloads')
}, },
cancelQueue() { cancelQueue() {
console.log('this.cancelQueue')
socket.emit('cancelAllDownloads') socket.emit('cancelAllDownloads')
}, },
finishDownload(uuid) { finishDownload(uuid) {
if (this.queue.indexOf(uuid) > -1) { console.log('this.finishDownload')
let isInQueue = this.queue.indexOf(uuid) > -1
if (!isInQueue) return
const resultIcon = $('#download_' + uuid).find('.queue_icon')
const noFailedDownloads = this.queueList[uuid].failed == 0
toast(this.$t('toasts.finishDownload', { item: this.queueList[uuid].title }), 'done') toast(this.$t('toasts.finishDownload', { item: this.queueList[uuid].title }), 'done')
$('#bar_' + uuid).css('width', '100%') $('#bar_' + uuid).css('width', '100%')
let resultIcon = $('#download_' + uuid).find('.queue_icon') if (noFailedDownloads) {
if (this.queueList[uuid].failed == 0) {
resultIcon.text('done') resultIcon.text('done')
} else { } else {
let failedButton = $('#download_' + uuid).find('.queue_failed_button') const failedButton = $('#download_' + uuid).find('.queue_failed_button')
resultIcon.addClass('clickable') resultIcon.addClass('clickable')
failedButton.addClass('clickable')
resultIcon.bind('click', { item: this.queueList[uuid] }, this.showErrorsTab) resultIcon.bind('click', { item: this.queueList[uuid] }, this.showErrorsTab)
failedButton.addClass('clickable')
failedButton.bind('click', { item: this.queueList[uuid] }, this.showErrorsTab) failedButton.bind('click', { item: this.queueList[uuid] }, this.showErrorsTab)
if (this.queueList[uuid].failed >= this.queueList[uuid].size) { if (this.queueList[uuid].failed >= this.queueList[uuid].size) {
@ -371,6 +401,7 @@ export default {
} }
let index = this.queue.indexOf(uuid) let index = this.queue.indexOf(uuid)
if (index > -1) { if (index > -1) {
this.queue.splice(index, 1) this.queue.splice(index, 1)
this.queueComplete.push(uuid) this.queueComplete.push(uuid)
@ -379,7 +410,6 @@ export default {
if (this.queue.length <= 0) { if (this.queue.length <= 0) {
toast(this.$t('toasts.allDownloaded'), 'done_all') toast(this.$t('toasts.allDownloaded'), 'done_all')
} }
}
}, },
openDownloadsFolder() { openDownloadsFolder() {
// if (this.clientMode) { // if (this.clientMode) {
@ -402,18 +432,44 @@ export default {
document.addEventListener('mousemove', this.handleDrag) document.addEventListener('mousemove', this.handleDrag)
}, },
startDownload(uuid) { startDownload(uuid) {
console.log('this.startDownload')
$('#bar_' + uuid) $('#bar_' + uuid)
.removeClass('converting') .removeClass('converting')
.removeClass('indeterminate') .removeClass('indeterminate')
.addClass('determinate') .addClass('determinate')
}, },
startConversion(uuid) { startConversion(uuid) {
console.log('this.startConversion')
$('#bar_' + uuid) $('#bar_' + uuid)
.addClass('converting') .addClass('converting')
.removeClass('indeterminate') .removeClass('indeterminate')
.addClass('determinate') .addClass('determinate')
.css('width', '100%') .css('width', '100%')
}, },
appendItem(queueItem) {
return
console.log('this.appendItem')
$(this.$refs.list).append(
`<div class="download_object" id="download_${queueItem.uuid}" data-deezerid="${queueItem.id}">
<div class="download_info">
<img width="75px" class="rounded coverart" src="${queueItem.cover}" alt="Cover ${queueItem.title}"/>
<div class="download_info_data">
<span class="download_line">${queueItem.title}</span> <span class="download_slim_separator"> - </span>
<span class="secondary-text">${queueItem.artist}</span>
</div>
<div class="download_info_status">
<span class="download_line"><span class="queue_downloaded">${queueItem.downloaded + queueItem.failed}</span>/${
queueItem.size
}</span>
</div>
</div>
<div class="download_bar">
<div class="progress"><div id="bar_${queueItem.uuid}" class="indeterminate"></div></div>
<i class="material-icons queue_icon" data-uuid="${queueItem.uuid}">remove</i>
</div>
</div>`
)
},
async showErrorsTab(clickEvent) { async showErrorsTab(clickEvent) {
await this.setErrors(clickEvent.data.item) await this.setErrors(clickEvent.data.item)

15
src/components/TheFavoritesTab.vue
View File

@ -44,7 +44,12 @@
</div> </div>
<p class="primary-text">{{ release.title }}</p> <p class="primary-text">{{ release.title }}</p>
<p class="secondary-text"> <p class="secondary-text">
{{ `${$t('globals.by', {artist: release.creator.name})} - ${$tc('globals.listTabs.trackN', release.nb_tracks)}` }} {{
`${$t('globals.by', { artist: release.creator.name })} - ${$tc(
'globals.listTabs.trackN',
release.nb_tracks
)}`
}}
</p> </p>
</div> </div>
<div <div
@ -67,7 +72,12 @@
</div> </div>
<p class="primary-text">{{ release.title }}</p> <p class="primary-text">{{ release.title }}</p>
<p class="secondary-text"> <p class="secondary-text">
{{ `${$t('globals.by', {artist: release.creator.name})} - ${$tc('globals.listTabs.trackN', release.nb_tracks)}` }} {{
`${$t('globals.by', { artist: release.creator.name })} - ${$tc(
'globals.listTabs.trackN',
release.nb_tracks
)}`
}}
</p> </p>
</div> </div>
</div> </div>
@ -226,7 +236,6 @@ export default {
} }
}, },
mounted() { mounted() {
console.log('favorites mounted')
// ! Need to implement memorization of the last tab clicked // ! Need to implement memorization of the last tab clicked
// ! Use router query // ! Use router query

1
src/components/TheHomeTab.vue
View File

@ -104,7 +104,6 @@ export default {
Downloads.sendAddToQueue(e.currentTarget.dataset.link) Downloads.sendAddToQueue(e.currentTarget.dataset.link)
}, },
initHome(data) { initHome(data) {
console.log('init home')
const { const {
playlists: { data: playlistData }, playlists: { data: playlistData },
albums: { data: albumData } albums: { data: albumData }

6
src/components/TheMainSearch.vue
View File

@ -180,7 +180,6 @@ export default {
this.currentTab = newTab this.currentTab = newTab
}, },
checkIfShowNewResults(term, mainSelected) { checkIfShowNewResults(term, mainSelected) {
console.log('check if show new results')
let needToPerformNewSearch = term !== this.results.query || mainSelected == 'search_tab' let needToPerformNewSearch = term !== this.results.query || mainSelected == 'search_tab'
if (needToPerformNewSearch) { if (needToPerformNewSearch) {
@ -188,7 +187,6 @@ export default {
} }
}, },
showNewResults(term) { showNewResults(term) {
console.log('show new results')
socket.emit('mainSearch', { term }) socket.emit('mainSearch', { term })
// Showing loading placeholder // Showing loading placeholder
@ -206,8 +204,6 @@ export default {
numberWithDots, numberWithDots,
convertDuration, convertDuration,
search(type) { search(type) {
console.log('search method called')
socket.emit('search', { socket.emit('search', {
term: this.results.query, term: this.results.query,
type, type,
@ -225,7 +221,6 @@ export default {
} }
}, },
handleMainSearch(result) { handleMainSearch(result) {
console.log('handle main search', result)
// Hiding loading placeholder // Hiding loading placeholder
this.$root.$emit('updateSearchLoadingState', false) this.$root.$emit('updateSearchLoadingState', false)
@ -239,7 +234,6 @@ export default {
this.results.query = result.QUERY this.results.query = result.QUERY
}, },
handleSearch(result) { handleSearch(result) {
console.log('handle search', result)
const { next: nextResult, total, type, data } = result const { next: nextResult, total, type, data } = result
let currentTab = type + 'Tab' let currentTab = type + 'Tab'

29
src/components/TracklistTab.vue
View File

@ -55,9 +55,7 @@
</td> </td>
<td class="table__cell--large table__cell--with-icon"> <td class="table__cell--large table__cell--with-icon">
<div class="table__cell-content table__cell-content--vertical-center"> <div class="table__cell-content table__cell-content--vertical-center">
<i v-if="track.explicit_lyrics" class="material-icons explicit_icon"> <i v-if="track.explicit_lyrics" class="material-icons explicit_icon"> explicit </i>
explicit
</i>
{{ {{
track.title + track.title +
(track.title_version && track.title.indexOf(track.title_version) == -1 (track.title_version && track.title.indexOf(track.title_version) == -1
@ -91,9 +89,9 @@
<input class="clickable" type="checkbox" v-model="track.selected" /> <input class="clickable" type="checkbox" v-model="track.selected" />
</td> </td>
</tr> </tr>
<tr v-else-if="track.type == 'disc_separator'" class="table__row-no-highlight" style="opacity: 0.54;"> <tr v-else-if="track.type == 'disc_separator'" class="table__row-no-highlight" style="opacity: 0.54">
<td> <td>
<div class="table__cell-content table__cell-content--vertical-center" style="opacity: 0.54;"> <div class="table__cell-content table__cell-content--vertical-center" style="opacity: 0.54">
<i class="material-icons">album</i> <i class="material-icons">album</i>
</div> </div>
</td> </td>
@ -131,7 +129,7 @@
</template> </template>
</tbody> </tbody>
</table> </table>
<span v-if="label" style="opacity: 0.4; margin-top: 8px; display: inline-block; font-size: 13px;">{{ label }}</span> <span v-if="label" style="opacity: 0.4; margin-top: 8px; display: inline-block; font-size: 13px">{{ label }}</span>
<footer> <footer>
<button @click.stop="addToQueue" :data-link="link"> <button @click.stop="addToQueue" :data-link="link">
{{ `${$t('globals.download', { thing: $tc(`globals.listTabs.${type}`, 1) })}` }} {{ `${$t('globals.download', { thing: $tc(`globals.listTabs.${type}`, 1) })}` }}
@ -173,7 +171,6 @@ export default {
EventBus.$emit('trackPreview:playPausePreview', e) EventBus.$emit('trackPreview:playPausePreview', e)
}, },
reset() { reset() {
console.log('resetto')
this.title = 'Loading...' this.title = 'Loading...'
this.image = '' this.image = ''
this.metadata = '' this.metadata = ''
@ -236,8 +233,6 @@ export default {
}, },
showPlaylist(data) { showPlaylist(data) {
this.reset() this.reset()
console.log(data)
console.log('mandi')
const { const {
id: playlistID, id: playlistID,
@ -254,7 +249,10 @@ export default {
this.title = playlistTitle this.title = playlistTitle
this.image = playlistCover this.image = playlistCover
this.release_date = creation_date.substring(0, 10) this.release_date = creation_date.substring(0, 10)
this.metadata = `${this.$t('globals.by', {artist: creatorName})} • ${this.$tc('globals.listTabs.trackN', numberOfTracks)}` this.metadata = `${this.$t('globals.by', { artist: creatorName })} • ${this.$tc(
'globals.listTabs.trackN',
numberOfTracks
)}`
if (isEmpty(playlistTracks)) { if (isEmpty(playlistTracks)) {
this.body = null this.body = null
@ -282,7 +280,10 @@ export default {
? 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 = `${this.$t('globals.by', {artist: ownerName})} • ${this.$tc('globals.listTabs.trackN', numberOfTracks)}` this.metadata = `${this.$t('globals.by', { artist: ownerName })} • ${this.$tc(
'globals.listTabs.trackN',
numberOfTracks
)}`
if (isEmpty(playlistTracks)) { if (isEmpty(playlistTracks)) {
this.body = null this.body = null
@ -295,17 +296,11 @@ export default {
} }
}, },
mounted() { mounted() {
console.log('tracklist mounted')
// this.$refs.root.style.display = 'block'
EventBus.$on('tracklistTab:selectRow', this.selectRow) EventBus.$on('tracklistTab:selectRow', this.selectRow)
socket.on('show_album', this.showAlbum) socket.on('show_album', this.showAlbum)
socket.on('show_playlist', this.showPlaylist) socket.on('show_playlist', this.showPlaylist)
socket.on('show_spotifyplaylist', this.showSpotifyPlaylist) socket.on('show_spotifyplaylist', this.showSpotifyPlaylist)
},
beforeDestroy() {
console.log('tracklist bef dest')
// this.$refs.root.style.display = 'none'
} }
} }
</script> </script>

31
src/components/downloads/QueueItem.vue Normal file
View File

@ -0,0 +1,31 @@
<template>
<div class="download_object" :id="`download_${queueItem.uuid}`" :data-deezerid="queueItem.id">
<div class="download_info">
<img width="75px" class="rounded coverart" :src="queueItem.cover" :alt="`Cover ${queueItem.title}`" />
<div class="download_info_data">
<span class="download_line">{{ queueItem.title }}</span> <span class="download_slim_separator"> - </span>
<span class="secondary-text">{{ queueItem.artist }}</span>
</div>
<div class="download_info_status">
<span class="download_line">
<span class="queue_downloaded">{{ queueItem.downloaded + queueItem.failed }}</span
>/{{ queueItem.size }}
</span>
</div>
</div>
<div class="download_bar">
<div class="progress">
<div :id="`bar_${queueItem.uuid}`" class="indeterminate" :ref="`bar_${queueItem.uuid}`"></div>
</div>
<i class="material-icons queue_icon" :data-uuid="queueItem.uuid">remove</i>
</div>
</div>
</template>
<script>
export default {
props: {
queueItem: Object
}
}
</script>

3
src/utils/socket.js
View File

@ -7,12 +7,11 @@ socket.on('connect', () => {
}) })
socket.on('init_charts', charts => { socket.on('init_charts', charts => {
// store.dispatch('cacheCharts', charts) store.dispatch('cacheCharts', charts)
}) })
socket.on('init_favorites', favorites => { socket.on('init_favorites', favorites => {
store.dispatch('setFavorites', favorites) store.dispatch('setFavorites', favorites)
// store.dispatch('setFavorites', JSON.parse(JSON.stringify(favorites)))
}) })
socket.on('init_settings', (settings, credentials, defaults) => { socket.on('init_settings', (settings, credentials, defaults) => {