Initial Commit

2023-11-10 21:09:31 -05:00
commit c71fef9429
17 changed files with 990 additions and 0 deletions
--- a/vreader/templates/index.html
+++ b/vreader/templates/index.html
@@ -0,0 +1,152 @@
+<!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>