troubleshooting page & chrome custom scrollbar

Website/layouts/default.vue

@@ -39,6 +39,10 @@ export default {
         name: "Install",
         path: "/install",
       },
+      {
+        name: "Help",
+        path: "/help",
+      },
       {
         name: "FAQ",
         path: "/faq",
@@ -66,6 +70,20 @@ body {
   overflow: auto;
 }
 
+::-webkit-scrollbar {
+  width: 1rem;
+}
+
+::-webkit-scrollbar-track {
+  background: #111; /* color of the tracking area */
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: #ff4444; /* color of the scroll thumb */
+  border-radius: 20px; /* roundness of the scroll thumb */
+  border: 4px solid #111; /* creates padding around scroll thumb */
+}
+
 .debug {
   /* usage: add class="debug" to the element */
   outline: 2px solid red;

Website/pages/donate.vue

@@ -23,7 +23,7 @@
 export default {
   transition(to, from) {
     if (!from) return "swoop-in";
-    let routes = ["index", "install", "faq", "donate", "links"];
+    let routes = ["index", "install", "help", "faq", "donate", "links"];
     if (routes.indexOf(to.name) < 0) return "swoop-out";
     if (routes.indexOf(from.name) < 0) return "swoop-in";
     return routes.indexOf(to.name) > routes.indexOf(from.name)

Website/pages/faq.vue

@@ -24,7 +24,7 @@
 export default {
   transition(to, from) {
     if (!from) return "swoop-in";
-    let routes = ["index", "install", "faq", "donate", "links"];
+    let routes = ["index", "install", "help", "faq", "donate", "links"];
     if (routes.indexOf(to.name) < 0) return "swoop-out";
     if (routes.indexOf(from.name) < 0) return "swoop-in";
     return routes.indexOf(to.name) > routes.indexOf(from.name)
@@ -49,8 +49,7 @@ export default {
           "The extension collects the video ID of the video you are watching, fetches the dislike (and other fields like views, likes etc) using our API. The extension then displays the dislike count and ratio on the page. If you dislike or like a video, that is recorded and sent to the database so an accurate dislike count can be extrapolated.",
       },
       {
-        question:
-        "Can I share my dislke count with you?",
+        question: "Can I share my dislke count with you?",
         answer:
           "Coming soon. We are looking into using Oauth or a different read only API with a limited scope so creators can share their dislike counts verifiability. ",
       },

Website/pages/help.vue

@@ -0,0 +1,114 @@
+<template>
+  <div>
+    <h1 class="title-text pt-12">Troubleshooting</h1>
+    <ol
+      class="col-xs-12 col-sm-11 col-md-9 col-lg-7 q-mx-auto text-left"
+      style="line-height: 2.5rem; color: #aaa"
+    >
+      <li>
+        Make sure you have latest version of extension installed,
+        <code
+          ><b>{{ version }}</b></code
+        >
+        right now
+      </li>
+      <li>
+        Try removing extension and installing it again, then restarting the
+        browser (all active windows, not just one tab).
+      </li>
+      <li>
+        Make sure that this link opens:
+        <a href="https://returnyoutubedislikeapi.com/votes?videoId=QOFEgexls14">
+          https://returnyoutubedislikeapi.com/votes?videoId=QOFEgexls14
+        </a>
+        , you should see plain text: <br />
+        <span style="color: #eee">
+          {"id":"QOFEgexls14", "dateCreated":"2021-12-15T16:54:12.250813Z",
+          "likes":2907, "dislikes":215, "rating":4.725641025641026,
+          "viewCount":28222, "deleted":false}
+        </span>
+      </li>
+      <li>
+        If nothing of above helps - report your problem in
+        <code>#bugs-and-problems</code> in our
+        <v-btn
+          class="mainAltButton"
+          style="
+            font-size: 0.5rem;
+            height: 1.5rem;
+            padding-left: 0.25rem !important;
+          "
+          :href="discordLink"
+          target="_blank"
+        >
+          <v-icon style="margin-right: 0.5em">mdi-discord</v-icon>
+          Discord
+        </v-btn>
+        <ol type="a">
+          <li>
+            Tell us your <b>Operating System</b>, <b>Browser Name</b> and
+            <b>Browser Version</b>.
+          </li>
+
+          <li style="position: relative; width: 100%">
+            Take screenshot of page with problem (i.e. youtube video page) with
+            console open (press <code>F12</code>) - example screenshot below.
+            <img
+              width="100%"
+              style="border-radius: 1rem; border: 2px solid #333"
+              src="ui/troubleshooting.png"
+              alt="example-screenshot"
+            />
+          </li>
+
+          <li>
+            Take screenshot of extensions page of your browser with extension
+            installed. <br />
+            To see extensions put this into adress bar:
+            <br />
+            <code>about:addons</code> for Firefox
+            <br />
+            <code>chrome://extensions</code> for Chrome, Edge, Brave, Opera,
+            Vivaldi
+          </li>
+        </ol>
+      </li>
+    </ol>
+  </div>
+</template>
+
+<script>
+export default {
+  transition(to, from) {
+    if (!from) return "swoop-in";
+    let routes = ["index", "install", "help", "faq", "donate", "links"];
+    if (routes.indexOf(to.name) < 0) return "swoop-out";
+    if (routes.indexOf(from.name) < 0) return "swoop-in";
+    return routes.indexOf(to.name) > routes.indexOf(from.name)
+      ? "swoop-left"
+      : "swoop-right";
+  },
+  data: () => ({
+    version: "2.0.0.3",
+  }),
+  mounted() {
+    fetch(
+      "https://raw.githubusercontent.com/Anarios/return-youtube-dislike/main/Extensions/combined/manifest-chrome.json"
+    )
+      .then((response) => response.json())
+      .then((data) => {
+        console.log(data);
+        // for (const product of data.products) {
+        //   let listItem = document.createElement("li");
+        //   listItem.appendChild(document.createElement("strong")).textContent =
+        //     product.Name;
+        //   listItem.append(` can be found in ${product.Location}. Cost: `);
+        //   listItem.appendChild(
+        //     document.createElement("strong")
+        //   ).textContent = `£${product.Price}`;
+        // }
+      });
+    // .catch(console.error);
+  },
+};
+</script>

Website/pages/index.vue

@@ -81,7 +81,7 @@
 export default {
   transition(to, from) {
     if (!from) return "swoop-in";
-    let routes = ["index", "install", "faq", "donate", "links"];
+    let routes = ["index", "install", "help", "faq", "donate", "links"];
     if (routes.indexOf(to.name) < 0) return "swoop-out";
     if (routes.indexOf(from.name) < 0) return "swoop-in";
     return routes.indexOf(to.name) > routes.indexOf(from.name)
@@ -97,8 +97,14 @@ export default {
         { name: "Piepacker", link: "https://piepacker.com/" },
         { name: "nodetube", link: "https://github.com/mayeaux/nodetube" },
         { name: "trig404" },
-        { name: "Peter33", link: "https://www.youtube.com/watch?v=G5kzUpWAusI" },
-        { name: "Seed4.Me VPN", link: "https://www.seed4.me/users/register?gift=ReturnYoutubeDislike" },
+        {
+          name: "Peter33",
+          link: "https://www.youtube.com/watch?v=G5kzUpWAusI",
+        },
+        {
+          name: "Seed4.Me VPN",
+          link: "https://www.seed4.me/users/register?gift=ReturnYoutubeDislike",
+        },
       ],
     };
   },

Website/pages/install.vue

@@ -76,7 +76,7 @@
 export default {
   transition(to, from) {
     if (!from) return "swoop-in";
-    let routes = ["index", "install", "faq", "donate", "links"];
+    let routes = ["index", "install", "help", "faq", "donate", "links"];
     if (routes.indexOf(to.name) < 0) return "swoop-out";
     if (routes.indexOf(from.name) < 0) return "swoop-in";
     return routes.indexOf(to.name) > routes.indexOf(from.name)

Website/pages/links.vue

@@ -41,7 +41,7 @@
 export default {
   transition(to, from) {
     if (!from) return "swoop-in";
-    let routes = ["index", "install", "faq", "donate", "links"];
+    let routes = ["index", "install", "help", "faq", "donate", "links"];
     if (routes.indexOf(to.name) < 0) return "swoop-out";
     if (routes.indexOf(from.name) < 0) return "swoop-in";
     return routes.indexOf(to.name) > routes.indexOf(from.name)