92 lines
2.7 KiB
JavaScript
92 lines
2.7 KiB
JavaScript
addEventListener('DOMContentLoaded', () => {
|
|
/** @type{HTMLInputElement} */
|
|
const urlField = document.getElementById('url')
|
|
/** @type{HTMLSelectElement} */
|
|
const site = document.getElementById('site-select')
|
|
/** @type{HTMLInputElement} */
|
|
const proxyFlag = document.getElementById('proxy-cb')
|
|
|
|
document.getElementById('guess-site-btn').addEventListener('click', () => {
|
|
const url = urlField.value
|
|
if (url.includes('/watch?v=') || url.includes('/playlist?list=')) {
|
|
site.value = 'youtube'
|
|
} else if (url.includes('soundcloud.com/')) {
|
|
site.value = 'soundcloud'
|
|
} else if (url.includes('://music.yandex.')) {
|
|
site.value = 'yandex'
|
|
}
|
|
})
|
|
|
|
const socket = new WebSocket('/ws')
|
|
|
|
const itemsDiv = document.getElementById('items-container')
|
|
let items = []
|
|
|
|
const logField = document.getElementById('log')
|
|
|
|
document.getElementById('items-btn').addEventListener('click', () => {
|
|
socket.send(JSON.stringify({
|
|
action: 'list',
|
|
site: site.value,
|
|
url: urlField.value,
|
|
proxy: proxyFlag.checked,
|
|
}))
|
|
logField.textContent = '' // clear
|
|
})
|
|
|
|
document.getElementById('dl-btn').addEventListener('click', () => {
|
|
socket.send(JSON.stringify({
|
|
action: 'download',
|
|
site: site.value,
|
|
url: urlField.value,
|
|
proxy: proxyFlag.checked,
|
|
items: items,
|
|
}))
|
|
items = []
|
|
logField.textContent = ''
|
|
})
|
|
|
|
socket.addEventListener('message', ev => {
|
|
const msg = JSON.parse(ev.data)
|
|
switch (msg.type) {
|
|
case 'items':
|
|
itemsDiv.textContent = ''
|
|
const len = msg.data.length
|
|
for (let i = 1; i <= len; i++) {
|
|
const itemElem = document.createElement('label')
|
|
const itemCheckbox = document.createElement('input')
|
|
itemCheckbox.type = 'checkbox'
|
|
itemCheckbox.addEventListener('change', () => {
|
|
if (itemCheckbox.checked) {
|
|
items.push(i)
|
|
} else {
|
|
items.splice(items.indexOf(i), 1)
|
|
}
|
|
})
|
|
itemElem.append(itemCheckbox)
|
|
itemText = document.createTextNode(msg.data[i - 1])
|
|
itemElem.append(itemText)
|
|
itemsDiv.append(itemElem)
|
|
}
|
|
break
|
|
case 'ydl_log':
|
|
const lineElem = document.createElement('span')
|
|
switch (msg.level) {
|
|
case 'warning':
|
|
lineElem.className = 'log-warning'
|
|
break
|
|
case 'error':
|
|
lineElem.className = 'log-error'
|
|
break
|
|
default: // add no classes if `debug` or some unknown level
|
|
break
|
|
}
|
|
lineElem.innerText = msg.data + '\n'
|
|
logField.append(lineElem)
|
|
break
|
|
case 'ydl_end':
|
|
break
|
|
}
|
|
})
|
|
})
|