balki/ytui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Cleanup

Browse Source 
* Modernize java-script
* Add CSP meta tag
* Minor refactor
* Add Makefile to update bootstrap css
* Fix filename in dummytdl tool
This commit is contained in:
Balakrishnan Balasubramanian
2022-07-18 19:21:06 -04:00
parent 44e7d1f1a6
commit 8c85e5f005
6 changed files with 87 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
templates/index.html
View File

@ -3,52 +3,46 @@
<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.css" rel="stylesheet" >
<link href="assets/bootstrap.min.css" rel="stylesheet" >
<script>
// https://developer.mozilla.org/en-US/docs/Web/API/Window/DOMContentLoaded_event
window.addEventListener('DOMContentLoaded', () => {
progressElems = document.querySelectorAll("[data-ytstatus=progress")
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
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
var url = new URL("/ws/" + ytid, window.location.href);
url.protocol = url.protocol.replace('http', 'ws');
// 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 = function(event) {
item.innerHTML = event.data
}
socket.onclose = function(event) {
window.location.reload();
}
});
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(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")
});
})
});
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>
</head>
<body>
<h1 class="text-center"> {{ $.Title }} </h1>
<h1 class="text-center">{{ $.Title }}</h1>
<div class="container">
<div class="row my-4 text-center">
<form method="POST" action="/">
<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>
@ -72,7 +66,7 @@
{{ 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>
<span class="border border-danger w-100 text-center d-block">{{ .Status }}</span>
{{ end }}
</div>
</div>