Merge pull request #467 from Artikash/manual-use-option

Add option to get dislikes manually from website

Website/pages/index.vue

@@ -54,6 +54,11 @@
       </v-btn>
     </div>
 
+    <div class="mb-4" style="color: #999">
+      Get dislikes manually: <input placeholder=" Video URL">
+      <p id="output"></p>
+    </div>
+
     <v-spacer />
 
     <div id="sponsors" class="d-flex flex-column items-center py-8">
@@ -111,6 +116,18 @@ export default {
       ],
     };
   },
+  mounted() {
+    const YOUTUBE_REGEX = /(?:http:|https:)*?\/\/(?:www\.|)(?:youtube\.com|m\.youtube\.com|youtu\.|youtube-nocookie\.com).*(?:v=|v%3D|v\/|(?:a|p)\/(?:a|u)\/\d.*\/|watch\?|vi(?:=|\/)|\/embed\/|oembed\?|be\/|e\/)([^&?%#\/\n]*)/;
+    let lastVideoId = "";
+    window.oninput = (e) => {
+      const videoId = (e.target.value.match(YOUTUBE_REGEX) || {})[1] || e.target.value;
+      if (videoId !== lastVideoId && videoId.length === 11) {
+        fetch("https://returnyoutubedislikeapi.com/votes?videoId=" + (lastVideoId = videoId))
+          .then(resp => resp.json())
+          .then(data => document.getElementById("output").innerText = "Likes=" + data.likes + " Dislikes=" + data.dislikes);
+      }
+    };
+  },
 };
 </script>
 
@@ -120,6 +137,10 @@ export default {
   height: max-content;
 }
 
+input {
+  background-color: #999999;
+}
+
 @media (max-width: 767px) {
   .sponsor {
     margin: 0.5rem;