moved downloads logic to Vue (except for 1 function) and basic tested
This commit is contained in:
Roberto Tonino
parent
45ad275e65
commit
07df1f2847
File diff suppressed because one or more lines are too long
|
|
@ -11,7 +11,6 @@ import TrackPreview from '@/js/track-preview.js'
|
|||
import $ from 'jquery'
|
||||
import { socket } from '@/js/socket.js'
|
||||
import { toast } from '@/js/toasts.js'
|
||||
import Downloads from '@/js/downloads.js'
|
||||
import { init as initTabs } from '@/js/tabs.js'
|
||||
|
||||
/* ===== App initialization ===== */
|
||||
|
|
@ -19,7 +18,6 @@ import { init as initTabs } from '@/js/tabs.js'
|
|||
function startApp() {
|
||||
mountApp()
|
||||
|
||||
Downloads.init()
|
||||
initTabs()
|
||||
TrackPreview.init()
|
||||
}
|
||||
|
|
|
|||
|
|
@ -24,16 +24,30 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import $ from 'jquery'
|
||||
import { socket } from '@/js/socket.js'
|
||||
import { toast } from '@/js/toasts.js'
|
||||
|
||||
const tabMinWidth = 250
|
||||
const tabMaxWidth = 500
|
||||
|
||||
export default {
|
||||
data: () => ({
|
||||
cachedTabWidth: parseInt(localStorage.getItem('downloadTabWidth')) || 300
|
||||
cachedTabWidth: parseInt(localStorage.getItem('downloadTabWidth')) || 300,
|
||||
queue: [],
|
||||
queueList: {},
|
||||
queueComplete: []
|
||||
}),
|
||||
mounted() {
|
||||
socket.on('startDownload', this.startDownload)
|
||||
socket.on('init_downloadQueue', this.initQueue)
|
||||
socket.on('addedToQueue', this.addToQueue)
|
||||
socket.on('updateQueue', this.updateQueue)
|
||||
socket.on('removedFromQueue', this.removeFromQueue)
|
||||
socket.on('finishDownload', this.finishDownload)
|
||||
socket.on('removedAllDownloads', this.removeAllDownloads)
|
||||
socket.on('removedFinishedDownloads', this.removedFinishedDownloads)
|
||||
|
||||
// Check if download tab has slim entries
|
||||
if ('true' === localStorage.getItem('slimDownloads')) {
|
||||
this.$refs.list.classList.add('slim')
|
||||
|
|
@ -80,8 +94,171 @@ export default {
|
|||
default:
|
||||
}
|
||||
},
|
||||
initQueue(data) {
|
||||
const { queue: initQueue, queueComplete: initQueueComplete, currentItem, queueList: initQueueList } = data
|
||||
|
||||
if (initQueueComplete.length) {
|
||||
initQueueComplete.forEach(item => {
|
||||
initQueueList[item].init = true
|
||||
this.addToQueue(initQueueList[item])
|
||||
})
|
||||
}
|
||||
|
||||
if (currentItem) {
|
||||
initQueueList[currentItem].init = true
|
||||
this.addToQueue(initQueueList[currentItem], true)
|
||||
}
|
||||
|
||||
initQueue.forEach(item => {
|
||||
initQueueList[item].init = true
|
||||
this.addToQueue(initQueueList[item])
|
||||
})
|
||||
},
|
||||
addToQueue(queueItem, current = false) {
|
||||
this.queueList[queueItem.uuid] = queueItem
|
||||
|
||||
if (queueItem.downloaded + queueItem.failed == queueItem.size) {
|
||||
if (this.queueComplete.indexOf(queueItem.uuid) == -1) {
|
||||
this.queueComplete.push(queueItem.uuid)
|
||||
}
|
||||
} else {
|
||||
if (this.queue.indexOf(queueItem.uuid) == -1) {
|
||||
this.queue.push(queueItem.uuid)
|
||||
}
|
||||
}
|
||||
|
||||
let queueDOM = document.getElementById('download_' + queueItem.uuid)
|
||||
|
||||
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 (queueItem.progress > 0 || current) {
|
||||
this.startDownload(queueItem.uuid)
|
||||
}
|
||||
|
||||
$('#bar_' + queueItem.uuid).css('width', queueItem.progress + '%')
|
||||
|
||||
if (queueItem.failed >= 1 && $('#download_' + queueItem.uuid + ' .queue_failed').length == 0) {
|
||||
$('#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) {
|
||||
let resultIcon = $('#download_' + queueItem.uuid).find('.queue_icon')
|
||||
|
||||
if (queueItem.failed == 0) {
|
||||
resultIcon.text('done')
|
||||
} else {
|
||||
let failedButton = $('#download_' + queueItem.uuid).find('.queue_failed_button')
|
||||
|
||||
resultIcon.addClass('clickable')
|
||||
failedButton.addClass('clickable')
|
||||
|
||||
resultIcon.bind('click', { item: queueItem }, this.showErrorsTab)
|
||||
failedButton.bind('click', { item: queueItem }, this.showErrorsTab)
|
||||
|
||||
if (queueItem.failed >= queueItem.size) {
|
||||
resultIcon.text('error')
|
||||
} else {
|
||||
resultIcon.text('warning')
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (!queueItem.init) {
|
||||
toast(`${queueItem.title} added to queue`, 'playlist_add_check')
|
||||
}
|
||||
},
|
||||
updateQueue(update) {
|
||||
// downloaded and failed default to false?
|
||||
const { uuid, downloaded, failed, progress, error, data } = update
|
||||
|
||||
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
|
||||
)
|
||||
}
|
||||
|
||||
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>`
|
||||
)
|
||||
} else {
|
||||
$('#download_' + uuid + ' .queue_failed').text(this.queueList[uuid].failed)
|
||||
}
|
||||
|
||||
this.queueList[uuid].errors.push({ message: error, data: data })
|
||||
}
|
||||
|
||||
if (progress) {
|
||||
this.queueList[uuid].progress = progress
|
||||
$('#bar_' + uuid).css('width', progress + '%')
|
||||
}
|
||||
}
|
||||
},
|
||||
removeFromQueue(uuid) {
|
||||
let index = this.queue.indexOf(uuid)
|
||||
|
||||
if (index > -1) {
|
||||
this.queue.splice(index, 1)
|
||||
$(`#download_${this.queueList[uuid].uuid}`).remove()
|
||||
delete this.queueList[uuid]
|
||||
}
|
||||
},
|
||||
removeAllDownloads(currentItem) {
|
||||
this.queueComplete = []
|
||||
|
||||
if (currentItem == '') {
|
||||
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()
|
||||
})
|
||||
}
|
||||
},
|
||||
removedFinishedDownloads() {
|
||||
this.queueComplete.forEach(item => {
|
||||
$('#download_' + item).remove()
|
||||
})
|
||||
|
||||
this.queueComplete = []
|
||||
},
|
||||
toggleDownloadTab(clickEvent) {
|
||||
console.log('toggle')
|
||||
this.setTabWidth()
|
||||
|
||||
this.$refs.container.style.transition = 'all 250ms ease-in-out'
|
||||
|
|
@ -101,6 +278,43 @@ export default {
|
|||
cancelQueue() {
|
||||
socket.emit('cancelAllDownloads')
|
||||
},
|
||||
finishDownload(uuid) {
|
||||
if (this.queue.indexOf(uuid) > -1) {
|
||||
toast(`${this.queueList[uuid].title} finished downloading.`, 'done')
|
||||
|
||||
$('#bar_' + uuid).css('width', '100%')
|
||||
|
||||
let resultIcon = $('#download_' + uuid).find('.queue_icon')
|
||||
|
||||
if (this.queueList[uuid].failed == 0) {
|
||||
resultIcon.text('done')
|
||||
} 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')
|
||||
}
|
||||
}
|
||||
|
||||
let index = this.queue.indexOf(uuid)
|
||||
if (index > -1) {
|
||||
this.queue.splice(index, 1)
|
||||
this.queueComplete.push(uuid)
|
||||
}
|
||||
|
||||
if (this.queue.length <= 0) {
|
||||
toast('All downloads completed!', 'done_all')
|
||||
}
|
||||
}
|
||||
},
|
||||
openDownloadsFolder() {
|
||||
if (window.clientMode) {
|
||||
socket.emit('openDownloadsFolder')
|
||||
|
|
@ -120,6 +334,14 @@ export default {
|
|||
},
|
||||
startDrag() {
|
||||
document.addEventListener('mousemove', this.handleDrag)
|
||||
},
|
||||
startDownload(uuid) {
|
||||
$('#bar_' + uuid)
|
||||
.removeClass('indeterminate')
|
||||
.addClass('determinate')
|
||||
},
|
||||
showErrorsTab(clickEvent) {
|
||||
this.$root.$emit('showTabErrors', clickEvent.data.item, clickEvent.target)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -43,6 +43,7 @@ export default {
|
|||
},
|
||||
mounted() {
|
||||
EventBus.$on('showTabErrors', this.showErrors)
|
||||
this.$root.$on('showTabErrors', this.showErrors)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -215,7 +215,6 @@ export default {
|
|||
target: { id }
|
||||
} = event
|
||||
let selectedTab = null
|
||||
console.log(id)
|
||||
|
||||
switch (id) {
|
||||
case 'favorites_playlist_tab':
|
||||
|
|
|
|||
|
|
@ -1,229 +1,11 @@
|
|||
import $ from 'jquery'
|
||||
import { socket } from '@/js/socket.js'
|
||||
import { toast } from '@/js/toasts.js'
|
||||
import EventBus from '@/js/EventBus'
|
||||
|
||||
/* ===== Locals ===== */
|
||||
|
||||
let queueList = {}
|
||||
let queue = []
|
||||
let queueComplete = []
|
||||
let listEl
|
||||
|
||||
function init() {
|
||||
// Find download DOM elements
|
||||
listEl = document.getElementById('download_list')
|
||||
}
|
||||
|
||||
function sendAddToQueue(url, bitrate = null) {
|
||||
if (url != '') {
|
||||
socket.emit('addToQueue', { url: url, bitrate: bitrate })
|
||||
socket.emit('addToQueue', { url: url, bitrate: bitrate }, () => {})
|
||||
}
|
||||
}
|
||||
|
||||
function _addToQueue(queueItem, current = false) {
|
||||
queueList[queueItem.uuid] = queueItem
|
||||
if (queueItem.downloaded + queueItem.failed == queueItem.size) {
|
||||
if (queueComplete.indexOf(queueItem.uuid) == -1) queueComplete.push(queueItem.uuid)
|
||||
} else {
|
||||
if (queue.indexOf(queueItem.uuid) == -1) queue.push(queueItem.uuid)
|
||||
}
|
||||
let queueDOM = document.getElementById('download_' + queueItem.uuid)
|
||||
if (typeof queueDOM == 'undefined' || queueDOM == null) {
|
||||
$(listEl).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 (queueItem.progress > 0 || current) {
|
||||
$('#bar_' + queueItem.uuid)
|
||||
.removeClass('indeterminate')
|
||||
.addClass('determinate')
|
||||
}
|
||||
$('#bar_' + queueItem.uuid).css('width', queueItem.progress + '%')
|
||||
if (queueItem.failed >= 1 && $('#download_' + queueItem.uuid + ' .queue_failed').length == 0) {
|
||||
$('#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) {
|
||||
let result_icon = $('#download_' + queueItem.uuid).find('.queue_icon')
|
||||
if (queueItem.failed == 0) {
|
||||
result_icon.text('done')
|
||||
} else {
|
||||
let failed_button = $('#download_' + queueItem.uuid).find('.queue_failed_button')
|
||||
result_icon.addClass('clickable')
|
||||
failed_button.addClass('clickable')
|
||||
result_icon.bind('click', { item: queueItem }, showErrorsTab)
|
||||
failed_button.bind('click', { item: queueItem }, showErrorsTab)
|
||||
if (queueItem.failed >= queueItem.size) {
|
||||
result_icon.text('error')
|
||||
} else {
|
||||
result_icon.text('warning')
|
||||
}
|
||||
}
|
||||
}
|
||||
if (!queueItem.init) toast(`${queueItem.title} added to queue`, 'playlist_add_check')
|
||||
}
|
||||
|
||||
// ? Temporary?
|
||||
function showErrorsTab(clickEvent) {
|
||||
EventBus.$emit('showTabErrors', clickEvent.data.item, clickEvent.target)
|
||||
}
|
||||
|
||||
function _initQueue(data) {
|
||||
const { queue, queueComplete, currentItem, queueList } = data
|
||||
|
||||
if (queueComplete.length) {
|
||||
queueComplete.forEach(item => {
|
||||
queueList[item].init = true
|
||||
_addToQueue(queueList[item])
|
||||
})
|
||||
}
|
||||
|
||||
if (currentItem) {
|
||||
queueList[currentItem].init = true
|
||||
_addToQueue(queueList[currentItem], true)
|
||||
}
|
||||
|
||||
queue.forEach(item => {
|
||||
queueList[item].init = true
|
||||
_addToQueue(queueList[item])
|
||||
})
|
||||
}
|
||||
|
||||
function _startDownload(uuid) {
|
||||
$('#bar_' + uuid)
|
||||
.removeClass('indeterminate')
|
||||
.addClass('determinate')
|
||||
}
|
||||
|
||||
socket.on('startDownload', _startDownload)
|
||||
|
||||
socket.on('init_downloadQueue', _initQueue)
|
||||
socket.on('addedToQueue', _addToQueue)
|
||||
|
||||
function _removeFromQueue(uuid) {
|
||||
let index = queue.indexOf(uuid)
|
||||
if (index > -1) {
|
||||
queue.splice(index, 1)
|
||||
$(`#download_${queueList[uuid].uuid}`).remove()
|
||||
delete queueList[uuid]
|
||||
}
|
||||
}
|
||||
|
||||
socket.on('removedFromQueue', _removeFromQueue)
|
||||
|
||||
function _finishDownload(uuid) {
|
||||
if (queue.indexOf(uuid) > -1) {
|
||||
toast(`${queueList[uuid].title} finished downloading.`, 'done')
|
||||
$('#bar_' + uuid).css('width', '100%')
|
||||
let result_icon = $('#download_' + uuid).find('.queue_icon')
|
||||
if (queueList[uuid].failed == 0) {
|
||||
result_icon.text('done')
|
||||
} else {
|
||||
let failed_button = $('#download_' + uuid).find('.queue_failed_button')
|
||||
result_icon.addClass('clickable')
|
||||
failed_button.addClass('clickable')
|
||||
result_icon.bind('click', { item: queueList[uuid] }, showErrorsTab)
|
||||
failed_button.bind('click', { item: queueList[uuid] }, showErrorsTab)
|
||||
if (queueList[uuid].failed >= queueList[uuid].size) {
|
||||
result_icon.text('error')
|
||||
} else {
|
||||
result_icon.text('warning')
|
||||
}
|
||||
}
|
||||
|
||||
let index = queue.indexOf(uuid)
|
||||
if (index > -1) {
|
||||
queue.splice(index, 1)
|
||||
queueComplete.push(uuid)
|
||||
}
|
||||
if (queue.length <= 0) {
|
||||
toast('All downloads completed!', 'done_all')
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
socket.on('finishDownload', _finishDownload)
|
||||
|
||||
function _removeAllDownloads(currentItem) {
|
||||
queueComplete = []
|
||||
if (currentItem == '') {
|
||||
queue = []
|
||||
queueList = {}
|
||||
$(listEl).html('')
|
||||
} else {
|
||||
queue = [currentItem]
|
||||
let tempQueueItem = queueList[currentItem]
|
||||
queueList = {}
|
||||
queueList[currentItem] = tempQueueItem
|
||||
$('.download_object').each(function(index) {
|
||||
if ($(this).attr('id') != 'download_' + currentItem) $(this).remove()
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
socket.on('removedAllDownloads', _removeAllDownloads)
|
||||
|
||||
function _removedFinishedDownloads() {
|
||||
queueComplete.forEach(item => {
|
||||
$('#download_' + item).remove()
|
||||
})
|
||||
queueComplete = []
|
||||
}
|
||||
|
||||
socket.on('removedFinishedDownloads', _removedFinishedDownloads)
|
||||
|
||||
function _updateQueue(update) {
|
||||
// downloaded and failed default to false?
|
||||
const { uuid, downloaded, failed, progress } = update
|
||||
|
||||
if (uuid && queue.indexOf(uuid) > -1) {
|
||||
if (downloaded) {
|
||||
queueList[uuid].downloaded++
|
||||
$('#download_' + uuid + ' .queue_downloaded').text(queueList[uuid].downloaded + queueList[uuid].failed)
|
||||
}
|
||||
if (failed) {
|
||||
queueList[uuid].failed++
|
||||
$('#download_' + uuid + ' .queue_downloaded').text(queueList[uuid].downloaded + queueList[uuid].failed)
|
||||
if (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>`
|
||||
)
|
||||
} else {
|
||||
$('#download_' + uuid + ' .queue_failed').text(queueList[uuid].failed)
|
||||
}
|
||||
queueList[uuid].errors.push({ message: update.error, data: update.data })
|
||||
}
|
||||
if (progress) {
|
||||
queueList[uuid].progress = progress
|
||||
$('#bar_' + uuid).css('width', progress + '%')
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
socket.on('updateQueue', _updateQueue)
|
||||
|
||||
export default {
|
||||
init,
|
||||
sendAddToQueue
|
||||
}
|
||||
|
|
|
|||
|
|
@ -45,7 +45,6 @@ export function showView(viewType, event) {
|
|||
*/
|
||||
export function changeTab(sidebarEl, section, tabName) {
|
||||
// console.error('CHANGE TAB')
|
||||
// console.log(Array.from(arguments))
|
||||
window.windows_stack = []
|
||||
window.currentStack = {}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue