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
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>

8
src/components/TheChartsTab.vue
View File

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

172
src/components/TheDownloadTab.vue
View File

@ -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,46 +361,54 @@ 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) {
toast(this.$t('toasts.finishDownload', { item: this.queueList[uuid].title }), 'done')
console.log('this.finishDownload')
$('#bar_' + uuid).css('width', '100%')
let isInQueue = this.queue.indexOf(uuid) > -1
let resultIcon = $('#download_' + uuid).find('.queue_icon')
if (!isInQueue) return
if (this.queueList[uuid].failed == 0) {
resultIcon.text('done')
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%')
if (noFailedDownloads) {
resultIcon.text('done')
} else {
const failedButton = $('#download_' + uuid).find('.queue_failed_button')
resultIcon.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) {
resultIcon.text('error')
} else {
let failedButton = $('#download_' + uuid).find('.queue_failed_button')
resultIcon.addClass('clickable')
failedButton.addClass('clickable')
resultIcon.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) {
resultIcon.text('error')
} else {
resultIcon.text('warning')
}
resultIcon.text('warning')
}
}
let index = this.queue.indexOf(uuid)
if (index > -1) {
this.queue.splice(index, 1)
this.queueComplete.push(uuid)
}
let index = this.queue.indexOf(uuid)
if (this.queue.length <= 0) {
toast(this.$t('toasts.allDownloaded'), 'done_all')
}
if (index > -1) {
this.queue.splice(index, 1)
this.queueComplete.push(uuid)
}
if (this.queue.length <= 0) {
toast(this.$t('toasts.allDownloaded'), 'done_all')
}
},
openDownloadsFolder() {
@ -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)

17
src/components/TheFavoritesTab.vue
View File

@ -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>
@ -92,7 +102,7 @@
</div>
</div>
<p class="primary-text">{{ release.title }}</p>
<p class="secondary-text">{{ `${$t('globals.by', {artist: release.artist.name})}` }}</p>
<p class="secondary-text">{{ `${$t('globals.by', { artist: release.artist.name })}` }}</p>
</div>
</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

1
src/components/TheHomeTab.vue
View File

@ -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 }

6
src/components/TheMainSearch.vue
View File

@ -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'

31
src/components/TracklistTab.vue
View File

@ -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,10 +129,10 @@
</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)})}` }}
{{ `${$t('globals.download', { thing: $tc(`globals.listTabs.${type}`, 1) })}` }}
</button>
<button class="with_icon" @click.stop="addToQueue" :data-link="selectedLinks()">
{{ $t('tracklist.downloadSelection') }}<i class="material-icons">file_download</i>
@ -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>

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 => {
// 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) => {