danolo
/
deemix-webui
mirror of https://gitlab.com/RemixDev/deemix-webui.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

feat: added QueueItem component for data driven queue management

This commit is contained in:
Roberto Tonino 2020-09-20 13:18:06 +02:00
parent 032762f75c
commit 01668a5aaf
3 changed files with 261 additions and 143 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
public/js/bundle.js
View File

File diff suppressed because one or more lines are too long

299
src/components/TheDownloadTab.vue
View File

@ -42,7 +42,13 @@
</i> </i>
</div> </div>
<div id="download_list" @click="handleListClick" ref="list"> <div id="download_list" @click="handleListClick" ref="list">
<QueueItem v-for="item in queueList" :queue-item="item" :key="item.uuid" /> <QueueItem
v-for="item in queueList"
:queue-item="item"
:key="item.uuid"
@show-errors="showErrorsTab"
@remove-item="onRemoveItem"
/>
</div> </div>
</div> </div>
</template> </template>
@ -54,12 +60,12 @@
</style> </style>
<script> <script>
import { mapActions } from 'vuex'
import QueueItem from '@components/downloads/QueueItem.vue'
import $ from 'jquery' import $ from 'jquery'
import { socket } from '@/utils/socket' import { socket } from '@/utils/socket'
import { toast } from '@/utils/toasts' import { toast } from '@/utils/toasts'
import { mapActions } from 'vuex'
import QueueItem from '@components/downloads/QueueItem.vue'
const tabMinWidth = 250 const tabMinWidth = 250
const tabMaxWidth = 500 const tabMaxWidth = 500
@ -109,6 +115,15 @@ export default {
}, },
methods: { methods: {
...mapActions(['setErrors']), ...mapActions(['setErrors']),
onRemoveItem(uuid) {
socket.emit('removeFromQueue', uuid)
if ($(`#bar_${uuid}`).hasClass('indeterminate')) {
// $(`#download_${uuid}`).remove()
} else {
// target.innerHTML = `<div class="circle-loader"></div>`
}
},
setTabWidth(newWidth) { setTabWidth(newWidth) {
if (undefined === newWidth) { if (undefined === newWidth) {
this.$refs.container.style.width = '' this.$refs.container.style.width = ''
@ -120,6 +135,7 @@ export default {
}, },
handleListClick(event) { handleListClick(event) {
console.log('this.handleListClick') console.log('this.handleListClick')
return
const { target } = event const { target } = event
if (!target.matches('.queue_icon[data-uuid]')) { if (!target.matches('.queue_icon[data-uuid]')) {
@ -134,7 +150,7 @@ export default {
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 {
target.innerHTML = `<div class="circle-loader"></div>` target.innerHTML = `<div class="circle-loader"></div>`
} }
@ -189,67 +205,74 @@ export default {
} }
} }
// * Here we have only objects // * Here we have only queueItem objects
this.$set(queueItem, 'current', current)
this.$set(this.queueList, queueItem.uuid, queueItem) this.$set(this.queueList, queueItem.uuid, queueItem)
// this.queueList[queueItem.uuid] = queueItem // this.queueList[queueItem.uuid] = queueItem
// * Used when opening the app in another tab // * Used when opening the app in another tab
let itemIsAlreadyDownloaded = queueItem.downloaded + queueItem.failed == queueItem.size const itemIsAlreadyDownloaded = queueItem.downloaded + queueItem.failed == queueItem.size
if (itemIsAlreadyDownloaded) { if (itemIsAlreadyDownloaded) {
let itemIsNotInCompletedQueue = this.queueComplete.indexOf(queueItem.uuid) == -1 const itemIsNotInCompletedQueue = this.queueComplete.indexOf(queueItem.uuid) == -1
this.$set(this.queueList[queueItem.uuid], 'status', 'download finished')
if (itemIsNotInCompletedQueue) { if (itemIsNotInCompletedQueue) {
// * Add it // * Add it
this.queueComplete.push(queueItem.uuid) this.queueComplete.push(queueItem.uuid)
} }
} else { } else {
let itemIsNotInQueue = this.queue.indexOf(queueItem.uuid) == -1 const itemIsNotInQueue = this.queue.indexOf(queueItem.uuid) == -1
if (itemIsNotInQueue) { 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 // let noItemInQueueDOM = typeof queueDOM == 'undefined' || queueDOM == null
if (noItemInQueueDOM) { // if (noItemInQueueDOM) {
this.appendItem(queueItem) // this.appendItem(queueItem)
} // }
let needToStartDownload = queueItem.progress > 0 || current const needToStartDownload = (queueItem.progress > 0 && queueItem.progress < 100) || current
if (needToStartDownload) { if (needToStartDownload) {
this.startDownload(queueItem.uuid) this.startDownload(queueItem.uuid)
} }
$('#bar_' + queueItem.uuid).css('width', queueItem.progress + '%') // * Setting progress
// $('#bar_' + queueItem.uuid).css('width', queueItem.progress + '%')
if (queueItem.failed >= 1 && $('#download_' + queueItem.uuid + ' .queue_failed').length == 0) { // const needToAddFailedIndicator =
$('#download_' + queueItem.uuid + ' .download_info_status').append( // queueItem.failed >= 1 && $('#download_' + queueItem.uuid + ' .queue_failed').length == 0
`<span class="secondary-text inline-flex"><span class="download_slim_separator">(</span><span class="queue_failed_button inline-flex"><span class="queue_failed">${queueItem.failed}</span><i class="material-icons">error_outline</i></span><span class="download_slim_separator">)</span></span>`
) // if (needToAddFailedIndicator) {
} // $('#download_' + queueItem.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">${queueItem.failed}</span><i class="material-icons">error_outline</i></span><span class="download_slim_separator">)</span></span>`
// )
// }
if (queueItem.downloaded + queueItem.failed == queueItem.size) { if (queueItem.downloaded + queueItem.failed == queueItem.size) {
let resultIcon = $('#download_' + queueItem.uuid).find('.queue_icon') // let resultIcon = $('#download_' + queueItem.uuid).find('.queue_icon')
if (queueItem.failed == 0) { if (queueItem.failed == 0) {
resultIcon.text('done') // resultIcon.text('done')
} else { } else {
let failedButton = $('#download_' + queueItem.uuid).find('.queue_failed_button') // let failedButton = $('#download_' + queueItem.uuid).find('.queue_failed_button')
resultIcon.addClass('clickable') // ! resultIcon.addClass('clickable')
failedButton.addClass('clickable') // ! failedButton.addClass('clickable')
resultIcon.bind('click', { item: queueItem }, this.showErrorsTab) // ! resultIcon.bind('click', { item: queueItem }, this.showErrorsTab)
failedButton.bind('click', { item: queueItem }, this.showErrorsTab) // ! failedButton.bind('click', { item: queueItem }, this.showErrorsTab)
if (queueItem.failed >= queueItem.size) { if (queueItem.failed >= queueItem.size) {
resultIcon.text('error') // resultIcon.text('error')
} else { } else {
resultIcon.text('warning') // resultIcon.text('warning')
} }
} }
} }
@ -267,24 +290,24 @@ export default {
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
) // )
} }
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>`
) // )
} else { } else {
$('#download_' + uuid + ' .queue_failed').text(this.queueList[uuid].failed) // $('#download_' + uuid + ' .queue_failed').text(this.queueList[uuid].failed)
} }
this.queueList[uuid].errors.push({ message: error, data: data, errid: errid }) this.queueList[uuid].errors.push({ message: error, data: data, errid: errid })
@ -292,11 +315,12 @@ export default {
if (progress) { if (progress) {
this.queueList[uuid].progress = progress this.queueList[uuid].progress = progress
$('#bar_' + uuid).css('width', progress + '%') // $('#bar_' + uuid).css('width', progress + '%')
} }
if (conversion) { if (conversion) {
$('#bar_' + uuid).css('width', 100 - conversion + '%') this.queueList[uuid].conversion = conversion
// $('#bar_' + uuid).css('width', 100 - conversion + '%')
} }
} }
}, },
@ -306,23 +330,22 @@ export default {
if (index > -1) { if (index > -1) {
this.$delete(this.queue, index) this.$delete(this.queue, index)
$(`#download_${uuid}`).remove()
this.$delete(this.queueList, uuid) this.$delete(this.queueList, uuid)
// $(`#download_${uuid}`).remove()
} }
}, },
removeAllDownloads(currentItem) { removeAllDownloads(currentItem) {
console.log('this.removeFromQueue') console.log('this.removeFromQueue', currentItem)
this.queueComplete = [] this.queueComplete = []
let currentItemIsEmpty = currentItem === '' // let currentItemIsEmpty = currentItem === ''
if (currentItemIsEmpty) { if (!currentItem) {
this.queue = [] this.queue = []
this.queueList = {} this.queueList = {}
$(listEl).html('') // $(listEl).html('')
} else { } else {
this.queue = [currentItem] this.queue = [currentItem]
@ -331,17 +354,18 @@ export default {
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) { // if ($(this).attr('id') != 'download_' + currentItem) {
$(this).remove() // $(this).remove()
} // }
}) // })
} }
}, },
removedFinishedDownloads() { removedFinishedDownloads() {
console.log('this.removedFinishedDownloads') console.log('this.removedFinishedDownloads')
this.queueComplete.forEach(item => { this.queueComplete.forEach(uuid => {
$('#download_' + item).remove() // $('#download_' + item).remove()
this.$delete(this.queueList, uuid)
}) })
this.queueComplete = [] this.queueComplete = []
@ -368,49 +392,6 @@ export default {
console.log('this.cancelQueue') console.log('this.cancelQueue')
socket.emit('cancelAllDownloads') socket.emit('cancelAllDownloads')
}, },
finishDownload(uuid) {
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%')
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 {
resultIcon.text('warning')
}
}
let index = this.queue.indexOf(uuid)
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() { openDownloadsFolder() {
// if (this.clientMode) { // if (this.clientMode) {
socket.emit('openDownloadsFolder') socket.emit('openDownloadsFolder')
@ -433,45 +414,95 @@ export default {
}, },
startDownload(uuid) { startDownload(uuid) {
console.log('this.startDownload') console.log('this.startDownload')
$('#bar_' + uuid) this.$set(this.queueList[uuid], 'status', 'downloading')
.removeClass('converting')
.removeClass('indeterminate') // $('#bar_' + uuid)
.addClass('determinate') // .removeClass('converting')
// .removeClass('indeterminate')
// .addClass('determinate')
},
finishDownload(uuid) {
console.log('this.finishDownload')
let isInQueue = this.queue.indexOf(uuid) > -1
if (!isInQueue) return
this.$set(this.queueList[uuid], 'status', 'download finished')
// 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 {
// resultIcon.text('warning')
// }
// }
let index = this.queue.indexOf(uuid)
if (index > -1) {
this.queue.splice(index, 1)
this.queueComplete.push(uuid)
}
if (this.queue.length <= 0) {
toast(this.$t('toasts.allDownloaded'), 'done_all')
}
}, },
startConversion(uuid) { startConversion(uuid) {
console.log('this.startConversion') console.log('this.startConversion')
$('#bar_' + uuid) this.$set(this.queueList[uuid], 'status', 'converting')
.addClass('converting') this.$set(this.queueList[uuid], 'conversion', 0)
.removeClass('indeterminate')
.addClass('determinate') // $('#bar_' + uuid)
.css('width', '100%') // .addClass('converting')
// .addClass('determinate')
// .removeClass('indeterminate')
// .css('width', '100%')
}, },
appendItem(queueItem) { // appendItem(queueItem) {
return // return
console.log('this.appendItem') // console.log('this.appendItem')
$(this.$refs.list).append( // $(this.$refs.list).append(
`<div class="download_object" id="download_${queueItem.uuid}" data-deezerid="${queueItem.id}"> // `<div class="download_object" id="download_${queueItem.uuid}" data-deezerid="${queueItem.id}">
<div class="download_info"> // <div class="download_info">
<img width="75px" class="rounded coverart" src="${queueItem.cover}" alt="Cover ${queueItem.title}"/> // <img width="75px" class="rounded coverart" src="${queueItem.cover}" alt="Cover ${queueItem.title}"/>
<div class="download_info_data"> // <div class="download_info_data">
<span class="download_line">${queueItem.title}</span> <span class="download_slim_separator"> - </span> // <span class="download_line">${queueItem.title}</span> <span class="download_slim_separator"> - </span>
<span class="secondary-text">${queueItem.artist}</span> // <span class="secondary-text">${queueItem.artist}</span>
</div> // </div>
<div class="download_info_status"> // <div class="download_info_status">
<span class="download_line"><span class="queue_downloaded">${queueItem.downloaded + queueItem.failed}</span>/${ // <span class="download_line"><span class="queue_downloaded">${queueItem.downloaded + queueItem.failed}</span>/${
queueItem.size // queueItem.size
}</span> // }</span>
</div> // </div>
</div> // </div>
<div class="download_bar"> // <div class="download_bar">
<div class="progress"><div id="bar_${queueItem.uuid}" class="indeterminate"></div></div> // <div class="progress"><div id="bar_${queueItem.uuid}" class="indeterminate"></div></div>
<i class="material-icons queue_icon" data-uuid="${queueItem.uuid}">remove</i> // <i class="material-icons queue_icon" data-uuid="${queueItem.uuid}">remove</i>
</div> // </div>
</div>` // </div>`
) // )
}, // },
async showErrorsTab(clickEvent) { async showErrorsTab(item) {
await this.setErrors(clickEvent.data.item) await this.setErrors(item)
this.$router.push({ name: 'Errors' }) this.$router.push({ name: 'Errors' })
} }

91
src/components/downloads/QueueItem.vue
View File

@ -11,21 +11,108 @@
<span class="queue_downloaded">{{ queueItem.downloaded + queueItem.failed }}</span <span class="queue_downloaded">{{ queueItem.downloaded + queueItem.failed }}</span
>/{{ queueItem.size }} >/{{ queueItem.size }}
</span> </span>
<span class="secondary-text inline-flex" v-if="queueItem.failed >= 1">
<span class="download_slim_separator">(</span>
<span
class="queue_failed_button inline-flex"
:class="{ clickable: finishedWithFails }"
@click="finishedWithFails ? $emit('show-errors', queueItem) : null"
>
<span class="queue_failed">{{ queueItem.failed }}</span>
<i class="material-icons">error_outline</i>
</span>
<span class="download_slim_separator">)</span>
</span>
</div> </div>
</div> </div>
<div class="download_bar"> <div class="download_bar">
<div class="progress"> <div class="progress">
<div :id="`bar_${queueItem.uuid}`" class="indeterminate" :ref="`bar_${queueItem.uuid}`"></div> <!-- class="indeterminate" -->
<div :id="`bar_${queueItem.uuid}`" :class="barClass" :style="barStyle"></div>
</div> </div>
<i class="material-icons queue_icon" :data-uuid="queueItem.uuid">remove</i> <i
class="material-icons queue_icon"
:data-uuid="queueItem.uuid"
:class="{ clickable: finishedWithFails }"
@click="onResultIconClick"
v-if="!isLoading"
>
{{ resultIconText }}
</i>
<div v-else class="circle-loader"></div>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
export default { export default {
data() {
return {
isLoading: false
}
},
props: { props: {
queueItem: Object queueItem: Object
},
computed: {
finishedWithFails() {
return this.queueItem.status === 'download finished' && this.queueItem.failed >= 1
},
barClass() {
return {
converting: this.queueItem.status === 'converting',
indeterminate: ['converting', 'downloading', 'download finished'].indexOf(this.queueItem.status) === -1,
determinate: ['converting', 'downloading', 'download finished'].indexOf(this.queueItem.status) !== -1
}
},
barStyle() {
let width = 0
if (this.queueItem.status === 'download finished') {
width = 100
}
if (this.queueItem.status === 'downloading') {
width = this.queueItem.progress
}
if (this.queueItem.status === 'converting') {
width = 100 - this.queueItem.conversion
}
return {
width: `${width}%`
}
},
resultIconText() {
let text = 'remove'
if (this.queueItem.status === 'download finished') {
if (this.queueItem.failed == 0) {
text = 'done'
} else {
if (this.queueItem.failed >= this.queueItem.size) {
text = 'error'
} else {
text = 'warning'
}
}
}
return text
}
},
methods: {
onResultIconClick() {
if (this.finishedWithFails) {
this.$emit('show-errors', this.queueItem)
}
if (this.queueItem.status === 'downloading') {
this.isLoading = true
this.$emit('remove-item', this.queueItem.uuid)
}
}
} }
} }
</script> </script>