114 lines
3.4 KiB
HTML
114 lines
3.4 KiB
HTML
<!DOCTYPE html><html><head>
|
|
<title>ytdl server</title>
|
|
<style>
|
|
|
|
#url_input {
|
|
width: 320px;
|
|
}
|
|
#alias_input {
|
|
width: 64px;
|
|
}
|
|
|
|
#server_output {
|
|
max-height: 160px;
|
|
white-space: pre;
|
|
overflow-y: scroll;
|
|
font-family: monospace;
|
|
border: 1px gray solid;
|
|
padding: 3px;
|
|
}
|
|
|
|
table, th, td {
|
|
border: 1px black solid;
|
|
border-collapse: collapse;
|
|
padding: 3px;
|
|
}
|
|
|
|
</style>
|
|
</head><body>
|
|
<h1>ytdl server</h1>
|
|
<div>paste url from one of <a href="https://github.com/yt-dlp/yt-dlp/blob/master/supportedsites.md" target="_blank">supported sites</a> to import and serve best quality media file for things like vrchat where a streamable url is required.</div>
|
|
<p>
|
|
<div>url: <input id="url_input" type="text" placeholder="https://www.youtube.com/watch?v=dQw4w9WgXcQ" /></label><input id="submit_button" type="submit" /></div>
|
|
</p>
|
|
<p id="server_output"></p>
|
|
|
|
<script>
|
|
var url_input = document.getElementById("url_input");
|
|
var submit_button = document.getElementById("submit_button");
|
|
var server_output = document.getElementById("server_output");
|
|
submit_button.onclick = function() {
|
|
url_input.disabled = true;
|
|
submit_button.disabled = true;
|
|
server_output.innerText = '';
|
|
var ws = new WebSocket(`${location.protocol.replace('http','ws')}//${location.host}/w?url=${encodeURIComponent(url_input.value)}`);
|
|
function print(html) {
|
|
server_output.innerHTML += html + '\n';
|
|
server_output.scrollTop = server_output.scrollHeight;
|
|
}
|
|
ws.onerror = function (event) {
|
|
print(`<span style="color: red">WebSocket connection failed</span>`);
|
|
};
|
|
ws.onmessage = function (evt) {
|
|
console.log(evt.data)
|
|
print(evt.data);
|
|
};
|
|
ws.onclose = function () {
|
|
url_input.value = "";
|
|
url_input.disabled = false;
|
|
submit_button.disabled = false;
|
|
loadList();
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<h2>Downloads</h2>
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th></th>
|
|
<th>File name</th>
|
|
<th>Duration</th>
|
|
<th>Size</th>
|
|
<th>Date added</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="tbody">
|
|
</tbody>
|
|
</table>
|
|
<p id="diskinfo"></p>
|
|
<script>
|
|
function loadList() {
|
|
fetch("/api/list").then(res => res.json()).then(data => {
|
|
tbody.innerHTML = '';
|
|
data.list.forEach((file, index) => {
|
|
var url = `${location.origin}/v/${encodeURIComponent(file.name)}`;
|
|
var row = tbody.insertRow(0);
|
|
row.insertCell().innerHTML = `<button title="Copy URL" onclick="navigator.clipboard.writeText('${url}')">📋</button>`;
|
|
row.insertCell().innerHTML = `<a href="${url}">${file.name}</a>`;
|
|
row.insertCell().innerHTML = `<span title="${file.duration} seconds">${formatDuration(file.duration)}</span>`;
|
|
row.insertCell().innerHTML = `<span title="${file.size} bytes">${formatBytes(file.size)}</span>`
|
|
row.insertCell().innerHTML = `<span title="${file.mtime}">${new Date(file.mtime).toLocaleString()}</span>`;
|
|
});
|
|
diskinfo.innerText = `Disk free: ${formatBytes(data.diskinfo.available)}`;
|
|
});
|
|
}
|
|
|
|
loadList();
|
|
|
|
function formatDuration(seconds) {
|
|
var d = new Date(0);
|
|
d.setSeconds(seconds);
|
|
var hms = d.toISOString().substring(11, 19);
|
|
if (hms.startsWith("00:")) hms = hms.substring(3);
|
|
return hms;
|
|
}
|
|
|
|
function formatBytes(bytes) {
|
|
if (bytes == 0) return "0 B";
|
|
var e = Math.floor(Math.log(bytes) / Math.log(1000));
|
|
return (bytes / Math.pow(1000, e)).toFixed(2) + ' ' + ' KMGTP'.charAt(e) + 'B';
|
|
}
|
|
|
|
</script>
|
|
</body></html> |