153 lines
4.3 KiB
HTML
153 lines
4.3 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8" />
|
||
|
|
<meta
|
||
|
|
name="viewport"
|
||
|
|
content="width=device-width, initial-scale=0.9, user-scalable=no, viewport-fit=cover"
|
||
|
|
/>
|
||
|
|
<title>VReader - Home</title>
|
||
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
||
|
|
</head>
|
||
|
|
<body class="bg-slate-200">
|
||
|
|
<header class="w-screen h-16 bg-slate-300 mb-5">
|
||
|
|
<div
|
||
|
|
class="flex px-2 h-16 w-11/12 md:w-5/6 mx-auto rounded bg-slate-300"
|
||
|
|
>
|
||
|
|
<span class="font-bold flex justify-center items-center">VReader</span>
|
||
|
|
</div>
|
||
|
|
</header>
|
||
|
|
|
||
|
|
<main class="flex flex-col gap-4">
|
||
|
|
<div id="submit"
|
||
|
|
class="flex gap-4 items-center text-lg w-11/12 md:w-4/6 mx-auto rounded px-6 py-3 bg-slate-300"
|
||
|
|
>
|
||
|
|
<input type="text" placeholder="YouTube URL" class="w-full p-2 bg-gray-700 text-white">
|
||
|
|
<button class="p-2 bg-gray-500 text-gray-800 hover:bg-gray-100" type="submit">Generate</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{% for article in articles %}
|
||
|
|
<a
|
||
|
|
href="/articles/{{ article.video_id }}"
|
||
|
|
class="flex items-center text-lg w-11/12 md:w-4/6 mx-auto rounded px-6 py-3 bg-slate-300 hover:bg-slate-400 transition-all duration-200"
|
||
|
|
>
|
||
|
|
<img class="h-14 md:h-24 mr-6 rounded" src="https://i.ytimg.com/vi_webp/{{ article.video_id }}/maxresdefault.webp"></img>
|
||
|
|
<span>{{ article.title }}</span>
|
||
|
|
</a>
|
||
|
|
{% endfor %}
|
||
|
|
</main>
|
||
|
|
<script>
|
||
|
|
const LOADING_SVG = `<svg
|
||
|
|
class="w-full"
|
||
|
|
width="24"
|
||
|
|
height="24"
|
||
|
|
viewBox="0 0 24 24"
|
||
|
|
xmlns="http://www.w3.org/2000/svg"
|
||
|
|
fill="currentColor"
|
||
|
|
>
|
||
|
|
<style>
|
||
|
|
.spinner_qM83 {
|
||
|
|
animation: spinner_8HQG 1.05s infinite;
|
||
|
|
}
|
||
|
|
.spinner_oXPr {
|
||
|
|
animation-delay: 0.1s;
|
||
|
|
}
|
||
|
|
.spinner_ZTLf {
|
||
|
|
animation-delay: 0.2s;
|
||
|
|
}
|
||
|
|
@keyframes spinner_8HQG {
|
||
|
|
0%,
|
||
|
|
57.14% {
|
||
|
|
animation-timing-function: cubic-bezier(0.33, 0.66, 0.66, 1);
|
||
|
|
transform: translate(0);
|
||
|
|
}
|
||
|
|
28.57% {
|
||
|
|
animation-timing-function: cubic-bezier(0.33, 0, 0.66, 0.33);
|
||
|
|
transform: translateY(-6px);
|
||
|
|
}
|
||
|
|
100% {
|
||
|
|
transform: translate(0);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
<circle class="spinner_qM83" cx="4" cy="12" r="3"></circle>
|
||
|
|
<circle class="spinner_qM83 spinner_oXPr" cx="12" cy="12" r="3"></circle>
|
||
|
|
<circle class="spinner_qM83 spinner_ZTLf" cx="20" cy="12" r="3"></circle>
|
||
|
|
</svg>`;
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Wrapper API Call
|
||
|
|
**/
|
||
|
|
function apiCall(data) {
|
||
|
|
let fetchObj = {
|
||
|
|
method: data.method || "GET",
|
||
|
|
headers: {
|
||
|
|
"Content-Type": "application/json",
|
||
|
|
},
|
||
|
|
};
|
||
|
|
|
||
|
|
if (fetchObj.method == "POST")
|
||
|
|
fetchObj.body = JSON.stringify(data.data || {});
|
||
|
|
|
||
|
|
return fetch(data.url, fetchObj).then((resp) => resp.json());
|
||
|
|
}
|
||
|
|
|
||
|
|
function getVideoArticle(videoID) {
|
||
|
|
return apiCall({
|
||
|
|
url: "/api/v1/generate",
|
||
|
|
method: "POST",
|
||
|
|
data: { video: videoID },
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
function generateAction(){
|
||
|
|
let inputEl = document.querySelector("input");
|
||
|
|
let inputVal = inputEl.value;
|
||
|
|
let videoID = getYouTubeVideoId(inputVal);
|
||
|
|
if (!videoID) return alert("Invalid URL")
|
||
|
|
|
||
|
|
// Loading
|
||
|
|
let submitEl = document.querySelector("#submit");
|
||
|
|
let oldHTML = submitEl.innerHTML;
|
||
|
|
submitEl.innerHTML = LOADING_SVG;
|
||
|
|
|
||
|
|
// Do API Call
|
||
|
|
apiCall({
|
||
|
|
url: "/api/v1/generate",
|
||
|
|
method: "POST",
|
||
|
|
data: { video: videoID },
|
||
|
|
}).then((resp) => {
|
||
|
|
if ("error" in resp) throw new Error(resp.error);
|
||
|
|
window.location.href = "/articles/" + videoID;
|
||
|
|
}).catch(e => {
|
||
|
|
console.log(e);
|
||
|
|
alert(e.message);
|
||
|
|
submitEl.innerHTML = oldHTML;
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
function initListeners(){
|
||
|
|
let buttonEl = document.querySelector("button");
|
||
|
|
let inputEl = document.querySelector("input");
|
||
|
|
buttonEl.addEventListener("click", generateAction);
|
||
|
|
inputEl.addEventListener("keydown", function(event) {
|
||
|
|
if (event.keyCode !== 13) return;
|
||
|
|
generateAction();
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
function getYouTubeVideoId(url) {
|
||
|
|
var regExp = /^.*(?:youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=)([^#\&\?]*).*/;
|
||
|
|
var match = url.match(regExp);
|
||
|
|
if (match && match[1]) {
|
||
|
|
return match[1];
|
||
|
|
} else {
|
||
|
|
return null;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
initListeners();
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|