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

moved downloads logic to Vue (except for 1 function) and basic tested

Browse Source
This commit is contained in:
Roberto Tonino 2020-07-16 22:20:13 +02:00
parent 45ad275e65
commit 07df1f2847
7 changed files with 230 additions and 229 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
public/js/bundle.js
View File

File diff suppressed because one or more lines are too long

2
src/js/app.js
View File

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

226
src/js/components/TheDownloadTab.vue
View File

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

1
src/js/components/TheErrorsTab.vue
View File

@ -43,6 +43,7 @@ export default {
},
mounted() {
EventBus.$on('showTabErrors', this.showErrors)
this.$root.$on('showTabErrors', this.showErrors)
}
}
</script>

1
src/js/components/TheFavoritesTab.vue
View File

@ -215,7 +215,6 @@ export default {
target: { id }
} = event
let selectedTab = null
console.log(id)
switch (id) {
case 'favorites_playlist_tab':

220
src/js/downloads.js
View File

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

1
src/js/tabs.js
View File

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