DarkCat09/musicdlp
1
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Simpliest frontend UI

Browse source
This commit is contained in:
DarkCat09 2024-05-05 19:44:37 +04:00
parent 44fc039ac9
commit e1ef74cc1c
Signed by: DarkCat09
GPG key ID: 0A26CD5B3345D6E3
3 changed files with 62 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

34
frontend/index.html
View file

@ -1 +1,33 @@
<!-- TODO: simple web ui, websockets --> <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>musicdlp</title>
<link rel="stylesheet" href="/style.css">
<script src="/script.js"></script>
</head>
<body>
<div>
<input type="text" id="url" placeholder="Playlist or track URL">
<button type="button" id="guess-site-btn">Guess site</button>
</div>
<div>
<select id="site-select">
<option value="youtube" selected>YouTube</option>
<option value="yt_proxied">YT proxied</option>
<option value="yandex">Yandex Music</option>
</select>
</div>
<div>
<button type="button" id="items-btn">Get playlist items</button>
</div>
<div id="items-container"></div>
<div>
<button type="button">Download</button>
</div>
<div>
<label>Progress: <span id="progress">not implemented</span></label>
</div>
</body>
</html>

18
frontend/script.js Normal file
View file

@ -0,0 +1,18 @@
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'
}
})
})

11
frontend/style.css Normal file
View file

@ -0,0 +1,11 @@
body {
margin: 0;
padding: 0.5rem;
display: flex;
flex-direction: column;
align-items: center;
row-gap: 0.25rem;
font-family: 'Noto Sans', 'Roboto', 'Ubuntu', sans-serif;
}