wip: improving downloads' managemente
This commit is contained in:
Roberto Tonino
parent
6e195827aa
commit
032762f75c
File diff suppressed because one or more lines are too long
|
|
@ -51,22 +51,18 @@
|
|||
<img
|
||||
class="rounded coverart"
|
||||
: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">
|
||||
explicit
|
||||
</i>
|
||||
<i v-if="release.explicit_lyrics" class="material-icons explicit_icon"> explicit </i>
|
||||
{{ 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
|
||||
</i>
|
||||
</td>
|
||||
<td>{{ release.release_date }}</td>
|
||||
<td>{{ release.nb_song }}</td>
|
||||
<td @click.stop="addToQueue" :data-link="release.link" class="clickable">
|
||||
<i class="material-icons" :title="$t('globals.download_hint')">
|
||||
file_download
|
||||
</i>
|
||||
<i class="material-icons" :title="$t('globals.download_hint')"> file_download </i>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
|
|
@ -184,17 +180,10 @@ export default {
|
|||
}
|
||||
},
|
||||
mounted() {
|
||||
// this.$refs.root.style.display = 'block'
|
||||
console.log('artist mounted')
|
||||
|
||||
socket.on('show_artist', this.showArtist)
|
||||
|
||||
EventBus.$on('artistTab:updateSelected', this.updateSelected)
|
||||
EventBus.$on('artistTab:changeTab', this.changeTab)
|
||||
},
|
||||
beforeDestroy() {
|
||||
console.log('artist bef dest')
|
||||
// this.$refs.root.style.display = 'none'
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -130,16 +130,10 @@ export default {
|
|||
}
|
||||
},
|
||||
mounted() {
|
||||
console.log('charts mounted')
|
||||
// this.$refs.root.style.display = 'block'
|
||||
this.waitCharts()
|
||||
// socket.on('init_charts', this.initCharts)
|
||||
socket.on('setChartTracks', this.setTracklist)
|
||||
},
|
||||
beforeDestroy() {
|
||||
console.log('charts bef dest')
|
||||
// this.$refs.root.style.display = 'none'
|
||||
},
|
||||
methods: {
|
||||
artistView: showView.bind(null, 'artist'),
|
||||
albumView: showView.bind(null, 'album'),
|
||||
|
|
@ -190,7 +184,6 @@ export default {
|
|||
socket.emit('getChartTracks', this.id)
|
||||
},
|
||||
setTracklist(data) {
|
||||
console.log('settracklist')
|
||||
this.chart = data
|
||||
},
|
||||
changeCountry() {
|
||||
|
|
@ -198,7 +191,6 @@ export default {
|
|||
this.id = 0
|
||||
},
|
||||
initCharts() {
|
||||
console.log('init charts')
|
||||
this.countries = this.getCharts
|
||||
this.country = localStorage.getItem('chart') || ''
|
||||
|
||||
|
|
|
|||
|
|
@ -41,7 +41,9 @@
|
|||
delete_sweep
|
||||
</i>
|
||||
</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>
|
||||
</template>
|
||||
|
||||
|
|
@ -57,10 +59,15 @@ import { socket } from '@/utils/socket'
|
|||
import { toast } from '@/utils/toasts'
|
||||
import { mapActions } from 'vuex'
|
||||
|
||||
import QueueItem from '@components/downloads/QueueItem.vue'
|
||||
|
||||
const tabMinWidth = 250
|
||||
const tabMaxWidth = 500
|
||||
|
||||
export default {
|
||||
components: {
|
||||
QueueItem
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
cachedTabWidth: parseInt(localStorage.getItem('downloadTabWidth')) || 300,
|
||||
|
|
@ -112,6 +119,7 @@ export default {
|
|||
}
|
||||
},
|
||||
handleListClick(event) {
|
||||
console.log('this.handleListClick')
|
||||
const { target } = event
|
||||
|
||||
if (!target.matches('.queue_icon[data-uuid]')) {
|
||||
|
|
@ -124,6 +132,7 @@ export default {
|
|||
switch (icon) {
|
||||
case 'remove':
|
||||
socket.emit('removeFromQueue', uuid)
|
||||
|
||||
if ($(`#bar_${uuid}`).hasClass('indeterminate')) {
|
||||
$(`#download_${uuid}`).remove()
|
||||
} else {
|
||||
|
|
@ -134,6 +143,7 @@ export default {
|
|||
}
|
||||
},
|
||||
initQueue(data) {
|
||||
console.log('this.initQueue')
|
||||
const {
|
||||
queue: initQueue,
|
||||
queueComplete: initQueueComplete,
|
||||
|
|
@ -165,6 +175,7 @@ export default {
|
|||
}
|
||||
},
|
||||
addToQueue(queueItem, current = false) {
|
||||
console.log('this.addToQueue')
|
||||
if (Array.isArray(queueItem)) {
|
||||
if (queueItem.length > 1) {
|
||||
queueItem.forEach((item, i) => {
|
||||
|
|
@ -177,44 +188,39 @@ export default {
|
|||
queueItem = queueItem[0]
|
||||
}
|
||||
}
|
||||
this.queueList[queueItem.uuid] = queueItem
|
||||
|
||||
if (queueItem.downloaded + queueItem.failed == queueItem.size) {
|
||||
if (this.queueComplete.indexOf(queueItem.uuid) == -1) {
|
||||
// * Here we have only objects
|
||||
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)
|
||||
}
|
||||
} else {
|
||||
if (this.queue.indexOf(queueItem.uuid) == -1) {
|
||||
let itemIsNotInQueue = this.queue.indexOf(queueItem.uuid) == -1
|
||||
|
||||
if (itemIsNotInQueue) {
|
||||
this.queue.push(queueItem.uuid)
|
||||
}
|
||||
}
|
||||
|
||||
let queueDOM = document.getElementById('download_' + queueItem.uuid)
|
||||
let noItemInQueueDOM = typeof queueDOM == 'undefined' || queueDOM == null
|
||||
|
||||
if (typeof queueDOM == 'undefined' || queueDOM == null) {
|
||||
$(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>`
|
||||
)
|
||||
if (noItemInQueueDOM) {
|
||||
this.appendItem(queueItem)
|
||||
}
|
||||
|
||||
if (queueItem.progress > 0 || current) {
|
||||
let needToStartDownload = queueItem.progress > 0 || current
|
||||
|
||||
if (needToStartDownload) {
|
||||
this.startDownload(queueItem.uuid)
|
||||
}
|
||||
|
||||
|
|
@ -255,10 +261,12 @@ export default {
|
|||
updateQueue(update) {
|
||||
// downloaded and failed default to false?
|
||||
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 (downloaded) {
|
||||
this.queueList[uuid].downloaded++
|
||||
|
||||
$('#download_' + uuid + ' .queue_downloaded').text(
|
||||
this.queueList[uuid].downloaded + this.queueList[uuid].failed
|
||||
)
|
||||
|
|
@ -266,9 +274,11 @@ export default {
|
|||
|
||||
if (failed) {
|
||||
this.queueList[uuid].failed++
|
||||
|
||||
$('#download_' + uuid + ' .queue_downloaded').text(
|
||||
this.queueList[uuid].downloaded + this.queueList[uuid].failed
|
||||
)
|
||||
|
||||
if (this.queueList[uuid].failed == 1 && $('#download_' + uuid + ' .queue_failed').length == 0) {
|
||||
$('#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>`
|
||||
|
|
@ -291,33 +301,45 @@ export default {
|
|||
}
|
||||
},
|
||||
removeFromQueue(uuid) {
|
||||
console.log('this.removeFromQueue')
|
||||
let index = this.queue.indexOf(uuid)
|
||||
|
||||
if (index > -1) {
|
||||
this.queue.splice(index, 1)
|
||||
this.$delete(this.queue, index)
|
||||
|
||||
$(`#download_${uuid}`).remove()
|
||||
delete this.queueList[uuid]
|
||||
|
||||
this.$delete(this.queueList, uuid)
|
||||
}
|
||||
},
|
||||
removeAllDownloads(currentItem) {
|
||||
console.log('this.removeFromQueue')
|
||||
this.queueComplete = []
|
||||
|
||||
if (currentItem == '') {
|
||||
let currentItemIsEmpty = currentItem === ''
|
||||
|
||||
if (currentItemIsEmpty) {
|
||||
this.queue = []
|
||||
this.queueList = {}
|
||||
|
||||
$(listEl).html('')
|
||||
} else {
|
||||
this.queue = [currentItem]
|
||||
|
||||
let tempQueueItem = this.queueList[currentItem]
|
||||
|
||||
this.queueList = {}
|
||||
this.queueList[currentItem] = tempQueueItem
|
||||
|
||||
$('.download_object').each(function (index) {
|
||||
if ($(this).attr('id') != 'download_' + currentItem) $(this).remove()
|
||||
if ($(this).attr('id') != 'download_' + currentItem) {
|
||||
$(this).remove()
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
removedFinishedDownloads() {
|
||||
console.log('this.removedFinishedDownloads')
|
||||
this.queueComplete.forEach(item => {
|
||||
$('#download_' + item).remove()
|
||||
})
|
||||
|
|
@ -339,28 +361,36 @@ export default {
|
|||
localStorage.setItem('downloadTabOpen', !isHidden)
|
||||
},
|
||||
cleanQueue() {
|
||||
console.log('this.cleanQueue')
|
||||
socket.emit('removeFinishedDownloads')
|
||||
},
|
||||
cancelQueue() {
|
||||
console.log('this.cancelQueue')
|
||||
socket.emit('cancelAllDownloads')
|
||||
},
|
||||
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')
|
||||
|
||||
$('#bar_' + uuid).css('width', '100%')
|
||||
|
||||
let resultIcon = $('#download_' + uuid).find('.queue_icon')
|
||||
|
||||
if (this.queueList[uuid].failed == 0) {
|
||||
if (noFailedDownloads) {
|
||||
resultIcon.text('done')
|
||||
} else {
|
||||
let failedButton = $('#download_' + uuid).find('.queue_failed_button')
|
||||
const failedButton = $('#download_' + uuid).find('.queue_failed_button')
|
||||
|
||||
resultIcon.addClass('clickable')
|
||||
failedButton.addClass('clickable')
|
||||
|
||||
resultIcon.bind('click', { item: this.queueList[uuid] }, this.showErrorsTab)
|
||||
|
||||
failedButton.addClass('clickable')
|
||||
failedButton.bind('click', { item: this.queueList[uuid] }, this.showErrorsTab)
|
||||
|
||||
if (this.queueList[uuid].failed >= this.queueList[uuid].size) {
|
||||
|
|
@ -371,6 +401,7 @@ export default {
|
|||
}
|
||||
|
||||
let index = this.queue.indexOf(uuid)
|
||||
|
||||
if (index > -1) {
|
||||
this.queue.splice(index, 1)
|
||||
this.queueComplete.push(uuid)
|
||||
|
|
@ -379,7 +410,6 @@ export default {
|
|||
if (this.queue.length <= 0) {
|
||||
toast(this.$t('toasts.allDownloaded'), 'done_all')
|
||||
}
|
||||
}
|
||||
},
|
||||
openDownloadsFolder() {
|
||||
// if (this.clientMode) {
|
||||
|
|
@ -402,18 +432,44 @@ export default {
|
|||
document.addEventListener('mousemove', this.handleDrag)
|
||||
},
|
||||
startDownload(uuid) {
|
||||
console.log('this.startDownload')
|
||||
$('#bar_' + uuid)
|
||||
.removeClass('converting')
|
||||
.removeClass('indeterminate')
|
||||
.addClass('determinate')
|
||||
},
|
||||
startConversion(uuid) {
|
||||
console.log('this.startConversion')
|
||||
$('#bar_' + uuid)
|
||||
.addClass('converting')
|
||||
.removeClass('indeterminate')
|
||||
.addClass('determinate')
|
||||
.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) {
|
||||
await this.setErrors(clickEvent.data.item)
|
||||
|
||||
|
|
|
|||
|
|
@ -44,7 +44,12 @@
|
|||
</div>
|
||||
<p class="primary-text">{{ release.title }}</p>
|
||||
<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>
|
||||
</div>
|
||||
<div
|
||||
|
|
@ -67,7 +72,12 @@
|
|||
</div>
|
||||
<p class="primary-text">{{ release.title }}</p>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -226,7 +236,6 @@ export default {
|
|||
}
|
||||
},
|
||||
mounted() {
|
||||
console.log('favorites mounted')
|
||||
// ! Need to implement memorization of the last tab clicked
|
||||
// ! Use router query
|
||||
|
||||
|
|
|
|||
|
|
@ -104,7 +104,6 @@ export default {
|
|||
Downloads.sendAddToQueue(e.currentTarget.dataset.link)
|
||||
},
|
||||
initHome(data) {
|
||||
console.log('init home')
|
||||
const {
|
||||
playlists: { data: playlistData },
|
||||
albums: { data: albumData }
|
||||
|
|
|
|||
|
|
@ -180,7 +180,6 @@ export default {
|
|||
this.currentTab = newTab
|
||||
},
|
||||
checkIfShowNewResults(term, mainSelected) {
|
||||
console.log('check if show new results')
|
||||
let needToPerformNewSearch = term !== this.results.query || mainSelected == 'search_tab'
|
||||
|
||||
if (needToPerformNewSearch) {
|
||||
|
|
@ -188,7 +187,6 @@ export default {
|
|||
}
|
||||
},
|
||||
showNewResults(term) {
|
||||
console.log('show new results')
|
||||
socket.emit('mainSearch', { term })
|
||||
|
||||
// Showing loading placeholder
|
||||
|
|
@ -206,8 +204,6 @@ export default {
|
|||
numberWithDots,
|
||||
convertDuration,
|
||||
search(type) {
|
||||
console.log('search method called')
|
||||
|
||||
socket.emit('search', {
|
||||
term: this.results.query,
|
||||
type,
|
||||
|
|
@ -225,7 +221,6 @@ export default {
|
|||
}
|
||||
},
|
||||
handleMainSearch(result) {
|
||||
console.log('handle main search', result)
|
||||
// Hiding loading placeholder
|
||||
this.$root.$emit('updateSearchLoadingState', false)
|
||||
|
||||
|
|
@ -239,7 +234,6 @@ export default {
|
|||
this.results.query = result.QUERY
|
||||
},
|
||||
handleSearch(result) {
|
||||
console.log('handle search', result)
|
||||
const { next: nextResult, total, type, data } = result
|
||||
|
||||
let currentTab = type + 'Tab'
|
||||
|
|
|
|||
|
|
@ -55,9 +55,7 @@
|
|||
</td>
|
||||
<td class="table__cell--large table__cell--with-icon">
|
||||
<div class="table__cell-content table__cell-content--vertical-center">
|
||||
<i v-if="track.explicit_lyrics" class="material-icons explicit_icon">
|
||||
explicit
|
||||
</i>
|
||||
<i v-if="track.explicit_lyrics" class="material-icons explicit_icon"> explicit </i>
|
||||
{{
|
||||
track.title +
|
||||
(track.title_version && track.title.indexOf(track.title_version) == -1
|
||||
|
|
@ -91,9 +89,9 @@
|
|||
<input class="clickable" type="checkbox" v-model="track.selected" />
|
||||
</td>
|
||||
</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>
|
||||
<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>
|
||||
</div>
|
||||
</td>
|
||||
|
|
@ -131,7 +129,7 @@
|
|||
</template>
|
||||
</tbody>
|
||||
</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>
|
||||
<button @click.stop="addToQueue" :data-link="link">
|
||||
{{ `${$t('globals.download', { thing: $tc(`globals.listTabs.${type}`, 1) })}` }}
|
||||
|
|
@ -173,7 +171,6 @@ export default {
|
|||
EventBus.$emit('trackPreview:playPausePreview', e)
|
||||
},
|
||||
reset() {
|
||||
console.log('resetto')
|
||||
this.title = 'Loading...'
|
||||
this.image = ''
|
||||
this.metadata = ''
|
||||
|
|
@ -236,8 +233,6 @@ export default {
|
|||
},
|
||||
showPlaylist(data) {
|
||||
this.reset()
|
||||
console.log(data)
|
||||
console.log('mandi')
|
||||
|
||||
const {
|
||||
id: playlistID,
|
||||
|
|
@ -254,7 +249,10 @@ export default {
|
|||
this.title = playlistTitle
|
||||
this.image = playlistCover
|
||||
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)) {
|
||||
this.body = null
|
||||
|
|
@ -282,7 +280,10 @@ export default {
|
|||
? images[0].url
|
||||
: 'https://e-cdns-images.dzcdn.net/images/cover/d41d8cd98f00b204e9800998ecf8427e/1000x1000-000000-80-0-0.jpg'
|
||||
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)) {
|
||||
this.body = null
|
||||
|
|
@ -295,17 +296,11 @@ export default {
|
|||
}
|
||||
},
|
||||
mounted() {
|
||||
console.log('tracklist mounted')
|
||||
// this.$refs.root.style.display = 'block'
|
||||
EventBus.$on('tracklistTab:selectRow', this.selectRow)
|
||||
|
||||
socket.on('show_album', this.showAlbum)
|
||||
socket.on('show_playlist', this.showPlaylist)
|
||||
socket.on('show_spotifyplaylist', this.showSpotifyPlaylist)
|
||||
},
|
||||
beforeDestroy() {
|
||||
console.log('tracklist bef dest')
|
||||
// this.$refs.root.style.display = 'none'
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -7,12 +7,11 @@ socket.on('connect', () => {
|
|||
})
|
||||
|
||||
socket.on('init_charts', charts => {
|
||||
// store.dispatch('cacheCharts', charts)
|
||||
store.dispatch('cacheCharts', charts)
|
||||
})
|
||||
|
||||
socket.on('init_favorites', favorites => {
|
||||
store.dispatch('setFavorites', favorites)
|
||||
// store.dispatch('setFavorites', JSON.parse(JSON.stringify(favorites)))
|
||||
})
|
||||
|
||||
socket.on('init_settings', (settings, credentials, defaults) => {
|
||||
|
|
|
|||
Loading…
Reference in New Issue