musicdlp/frontend/script.js

72 lines
2 KiB
JavaScript

addEventListener('DOMContentLoaded', () => {
/** @type{HTMLInputElement} */
const urlField = document.getElementById('url')
/** @type{HTMLSelectElement} */
const site = document.getElementById('site-select')
document.getElementById('guess-site-btn').addEventListener('click', () => {
const url = urlField.value
if (url.includes('/watch?v=') || url.includes('/playlist?list=')) {
if (site.value == 'yt_proxied') {
return
}
site.value = 'youtube'
} else if (url.includes('://music.yandex.')) {
site.value = 'yandex'
}
})
const socket = new WebSocket('ws://127.0.0.1:4009')
const itemsDiv = document.getElementById('items-container')
let items = []
document.getElementById('items-btn').addEventListener('click', () => {
socket.send(JSON.stringify({
action: 'list',
site: site.value,
url: urlField.value,
}))
})
document.getElementById('dl-btn').addEventListener('click', () => {
socket.send(JSON.stringify({
action: 'download',
site: site.value,
url: urlField.value,
items: items,
}))
items = []
})
socket.addEventListener('message', ev => {
const msg = JSON.parse(ev.data)
switch (msg.type) {
case 'items':
itemsDiv.textContent = '' // clear
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 'dl_progress':
break
case 'dl_end':
break
}
})
})