troubleshooting page & chrome custom scrollbar

8 files changed, 146 insertions, 9 deletions

diff --git a/Website/layouts/default.vue b/Website/layouts/default.vue
index 828216f..bde338f 100644
--- a/Website/layouts/default.vue
+++ b/Website/layouts/default.vue
@@ -40,6 +40,10 @@ export default {
         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;
diff --git a/Website/pages/donate.vue b/Website/pages/donate.vue
index eb46ca2..b612058 100644
--- a/Website/pages/donate.vue
+++ b/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)
diff --git a/Website/pages/faq.vue b/Website/pages/faq.vue
index 9ce4693..5ae1289 100644
--- a/Website/pages/faq.vue
+++ b/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. ",
       },
diff --git a/Website/pages/help.vue b/Website/pages/help.vue
new file mode 100644
index 0000000..6e0bc8d
--- /dev/null
+++ b/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>
diff --git a/Website/pages/index.vue b/Website/pages/index.vue
index b6aa094..3a3efd3 100644
--- a/Website/pages/index.vue
+++ b/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",
+        },
       ],
     };
   },
diff --git a/Website/pages/install.vue b/Website/pages/install.vue
index e3a77af..b9b0032 100644
--- a/Website/pages/install.vue
+++ b/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)
diff --git a/Website/pages/links.vue b/Website/pages/links.vue
index 35df9ed..2259da8 100644
--- a/Website/pages/links.vue
+++ b/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)
diff --git a/Website/static/ui/troubleshooting.png b/Website/static/ui/troubleshooting.png
new file mode 100644
index 0000000..00b77ad
--- /dev/null
+++ b/Website/static/ui/troubleshooting.png