80 lines
3.8 KiB
HTML
80 lines
3.8 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<meta http-equiv="Content-Security-Policy" content="default-src 'self' 'unsafe-inline' data: ;">
|
|
<title>{{ $.Title }}</title>
|
|
<!-- Diable favicon requests: https://stackoverflow.com/a/13416784 -->
|
|
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
|
|
<link href="assets/bootstrap.min.css" rel="stylesheet" >
|
|
<script>
|
|
window.addEventListener('DOMContentLoaded', () => {
|
|
progressElems = document.querySelectorAll("[data-ytstatus=progress]")
|
|
progressElems.forEach(item => {
|
|
// https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes
|
|
let ytid = item.innerText = item.dataset.ytid
|
|
|
|
// https://stackoverflow.com/a/47472874
|
|
let url = new URL("/ws/" + ytid, window.location.href);
|
|
url.protocol = url.protocol.replace('http', 'ws');
|
|
|
|
let socket = new WebSocket(url.href)
|
|
socket.onmessage = event => item.innerText = event.data
|
|
socket.onclose = () => window.location.reload()
|
|
});
|
|
|
|
pendingTitles = document.querySelectorAll("[data-yttitle]")
|
|
pendingTitles.forEach(async item => {
|
|
let ytid = item.dataset.ytid
|
|
let resp = await fetch("/title/" + ytid)
|
|
if(resp.ok) {
|
|
let text = await resp.text()
|
|
item.innerText = text
|
|
} else {
|
|
console.log("Response not ok: ", response)
|
|
}
|
|
})
|
|
})
|
|
</script>
|
|
<script src="assets/bootstrap.min.js" defer></script>
|
|
</head>
|
|
<body>
|
|
<h1 class="text-center">{{ $.Title }}</h1>
|
|
<div class="container">
|
|
<div class="row my-4 text-center">
|
|
<form method="post" action="/">
|
|
<input class="col-md-8 h-100" placeholder="Enter video link" type="text" name="youtube_url">
|
|
<input class="btn btn-outline-primary mx-2" type="submit" value="Download">
|
|
</form>
|
|
</div>
|
|
<div class="row row-cols-1 row-cols-md-3 row-cols-lg-4 m-4 g-3">
|
|
{{ range .Items }}
|
|
<div class="col my-2">
|
|
<div class="card h-100">
|
|
<div class="card-body">
|
|
<h5 class="card-title">
|
|
{{ if eq .Title "Loading" }}
|
|
<span data-yttitle="" data-ytid="{{.Id}}">Loading...</span>
|
|
{{ else }}
|
|
{{ .Title }}
|
|
{{ end }}
|
|
</h5>
|
|
<h6 class="card-subtitle mb-2 text-muted">On {{ .Date }}</h6>
|
|
<a href="{{ .URL }}" class="card-link d-block mb-2">Youtube Link</a>
|
|
{{ if eq .Status "Done" }}
|
|
<a class="btn btn-primary w-100" target="_blank" href="{{ $.VidoesUrl }}/{{ .FileName }}">Watch</a>
|
|
{{ else if eq .Status "InProgress" }}
|
|
<span class="border border-info w-100 text-center d-block" data-ytstatus="progress" data-ytid="{{.Id}}">In Progress</span>
|
|
{{ else }}
|
|
<span class="border border-danger w-100 text-center d-block">{{ .Status }}</span>
|
|
{{ end }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{{ end }}
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|