83 lines
3.4 KiB
HTML
83 lines
3.4 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Youtube Downloader UI</title>
|
|
<!-- Diable favicon requests: https://stackoverflow.com/a/13416784 -->
|
|
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
|
|
<script>
|
|
// https://developer.mozilla.org/en-US/docs/Web/API/Window/DOMContentLoaded_event
|
|
window.addEventListener('DOMContentLoaded', () => {
|
|
progressElems = document.querySelectorAll(".ytprogress")
|
|
progressElems.forEach(function(item) {
|
|
// https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes
|
|
item.innerText = item.dataset.ytid
|
|
ytid = item.dataset.ytid
|
|
|
|
// https://stackoverflow.com/a/47472874
|
|
var url = new URL("/ws/" + ytid, window.location.href);
|
|
url.protocol = url.protocol.replace('http', 'ws');
|
|
|
|
let socket = new WebSocket(url.href)
|
|
socket.onmessage = function(event) {
|
|
item.innerHTML = event.data
|
|
}
|
|
});
|
|
|
|
pendingTitles = document.querySelectorAll(".yttitle")
|
|
pendingTitles.forEach(function(item) {
|
|
ytid = item.dataset.ytid
|
|
fetch("/title/" + ytid).then(function(response) {
|
|
if(response.ok) {
|
|
return response.text().then(function(text) {
|
|
item.innerText = text
|
|
})
|
|
}
|
|
console.log("Response not ok")
|
|
});
|
|
})
|
|
});
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<form method="POST" action="/">
|
|
<input type="text" name="youtube_url">
|
|
<input type="submit" value="Ask">
|
|
</form>
|
|
<table>
|
|
<caption>Vidoes</caption>
|
|
<thead>
|
|
<tr>
|
|
<th>Date</th>
|
|
<th>URL</th>
|
|
<th>Title</th>
|
|
<th>Link</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{{ range .Items }}
|
|
<tr>
|
|
<td>{{ .Date }}</td>
|
|
<td>{{ .URL }}</td>
|
|
<td>
|
|
{{ if eq .Title "Loading" }}
|
|
<span class="yttitle" data-ytid="{{.Id}}">Loading...</span>
|
|
{{ else }}
|
|
{{ .Title }}
|
|
{{ end }}
|
|
</td>
|
|
<td>
|
|
{{ if eq .Status "Done" }}
|
|
<a target="_blank" href="{{ vids_prefix }}/{{ .FileName }}">Watch</a>
|
|
{{ else if eq .Status "InProgress" }}
|
|
<span class="ytprogress" data-ytid="{{.Id}}">In Progress</span>
|
|
{{ else }}
|
|
{{ .Status }}
|
|
{{ end }}
|
|
</td>
|
|
</tr>
|
|
{{ end }}
|
|
</tbody>
|
|
</table>
|
|
</body>
|
|
</html>
|