Merge pull request #377 from PickleNik/main

Troubleshooting (Help) page for the website

Website/layouts/default.vue

@@ -1,7 +1,7 @@
 <template>
   <v-app dark>
     <!-- height = 4rem, margin-y = 1rem -->
-    <v-app-bar app flat class="topBar fly-in-from-top my-4 mx-auto">
+    <v-app-bar app text class="topBar fly-in-from-top my-4 mx-auto">
       <v-tabs centered center-active color="primary" router show-arrows>
         <v-tab v-for="link in links" :key="link.path" :to="link.path">
           {{ link.name }}
@@ -12,7 +12,7 @@
     <!-- abstract background -->
     <v-img
       src="/ui/abstract.svg"
-      style="position: absolute; left: 0; right: 0; width: 100%; height: 100%"
+      style="position: absolute; left: 0; right: 0; width: 100vw; height: 100vh"
     />
 
     <v-main style="padding-top: 4rem !important">
@@ -24,6 +24,33 @@
         <nuxt />
       </center>
     </v-main>
+
+    <!--   Debugger Notification   -->
+    <v-snackbar
+      v-model="alert.show"
+      :timeout="-1"
+      class="ma-4 desktop-only"
+      transition="slide-y-reverse-transition"
+      color="primary"
+      bottom
+      left
+      text
+    >
+      <v-icon color="primary" class="mr-4">mdi-alert-circle-outline</v-icon>
+      <span class="my-auto" v-html="alert.html"></span>
+
+      <template #action="{ attrs }">
+        <v-btn
+          v-bind="attrs"
+          color="primary"
+          text
+          icon
+          @click="alert.show = false"
+        >
+          <v-icon>mdi-close-circle-outline</v-icon>
+        </v-btn>
+      </template>
+    </v-snackbar>
   </v-app>
 </template>
 
@@ -33,12 +60,46 @@ export default {
     links: [
       { name: "Home", path: "/" },
       { name: "Install", path: "/install" },
+      { name: "API", path: "/docs" },
+      { name: "Help", path: "/help" },
       { name: "FAQ", path: "/faq" },
       { name: "Donate", path: "/donate" },
       { name: "Links", path: "/links" },
-      { name: "API", path: "/documentation" },
     ],
+    alert: {
+      show: false,
+      html: "",
+    },
   }),
+  mounted() {
+    setTimeout(() => {
+      // check if browser version out of date
+      if (
+        window.navigator.userAgent.indexOf("Chrome") > -1 &&
+        window.navigator.userAgent.indexOf("Edge") === -1
+      ) {
+        let chrome = window.navigator.userAgent.match(/Chrome\/(\d+)/);
+        let chromeVersion = chrome ? chrome[1] : 0;
+        if (chromeVersion < 70) {
+          this.alert.html = `You are using <b style="background: #222; border-radius: .5rem; padding: .25rem .5rem;">${this.$ua._parsed.name} ${this.$ua._parsed.version}</b>. Please update to the latest version.`;
+          this.alert.show = true;
+        }
+      }
+      if (window.navigator.userAgent.indexOf("Firefox") > -1) {
+        let firefox = window.navigator.userAgent.match(/Firefox\/(\d+)/);
+        let firefoxVersion = firefox ? firefox[1] : 0;
+        if (firefoxVersion < 60) {
+          this.alert.html = `You are using <b style="background: #222; border-radius: .5rem; padding: .25rem .5rem;">${this.$ua._parsed.name} ${this.$ua._parsed.version}</b>. Please update to the latest version.`;
+          this.alert.show = true;
+        }
+      }
+      // check for IE browser
+      if (window.navigator.userAgent.indexOf("MSIE") > -1) {
+        this.alert.html = `Looks like you're using <b style="background: #222; border-radius: .5rem; padding: .25rem .5rem;">Internet Explorer</b>. Stop it, get some help.`;
+        this.alert.show = true;
+      }
+    }, 1000);
+  },
 };
 </script>
 
@@ -52,11 +113,40 @@ body {
   overflow: auto;
 }
 
+::selection {
+  background: #f44;
+  color: #111;
+}
+
+::-webkit-scrollbar {
+  width: 1rem;
+}
+
+::-webkit-scrollbar-track {
+  background: #111; /* color of the tracking area */
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: #333; /* color of the scroll thumb */
+  border-radius: 20px; /* roundness of the scroll thumb */
+  border: 4px solid #111; /* creates padding around scroll thumb */
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background-color: #f22; /* 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;
 }
 
+.v-sheet.v-snack__wrapper {
+  border-radius: 0.75rem !important;
+}
+
 .mainAltButton {
   margin: 0.25em;
 }

Website/package-lock.json

@@ -14,7 +14,6 @@
         "vuetify": "^2.5.5"
       },
       "devDependencies": {
-        "@nuxtjs/device": "^2.1.0",
         "@nuxtjs/vuetify": "^1.12.1",
         "babel-eslint": "^10.1.0",
         "eslint": "^7.32.0",
@@ -2645,21 +2644,6 @@
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
       "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A=="
     },
-    "node_modules/@nuxtjs/device": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/@nuxtjs/device/-/device-2.1.0.tgz",
-      "integrity": "sha512-TYBdt1w2bmCCWp+MhgcBATZtqyUBi3nSdNpcLGILw5USLwCsC/yZtIkq9YisuEzuRnod9w/RZpoE80MxLftEuA==",
-      "dev": true,
-      "dependencies": {
-        "defu": "^3.2.2"
-      }
-    },
-    "node_modules/@nuxtjs/device/node_modules/defu": {
-      "version": "3.2.2",
-      "resolved": "https://registry.npmjs.org/defu/-/defu-3.2.2.tgz",
-      "integrity": "sha512-8UWj5lNv7HD+kB0e9w77Z7TdQlbUYDVWqITLHNqFIn6khrNHv5WQo38Dcm1f6HeNyZf0U7UbPf6WeZDSdCzGDQ==",
-      "dev": true
-    },
     "node_modules/@nuxtjs/vuetify": {
       "version": "1.12.1",
       "resolved": "https://registry.npmjs.org/@nuxtjs/vuetify/-/vuetify-1.12.1.tgz",
@@ -16658,23 +16642,6 @@
         }
       }
     },
-    "@nuxtjs/device": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/@nuxtjs/device/-/device-2.1.0.tgz",
-      "integrity": "sha512-TYBdt1w2bmCCWp+MhgcBATZtqyUBi3nSdNpcLGILw5USLwCsC/yZtIkq9YisuEzuRnod9w/RZpoE80MxLftEuA==",
-      "dev": true,
-      "requires": {
-        "defu": "^3.2.2"
-      },
-      "dependencies": {
-        "defu": {
-          "version": "3.2.2",
-          "resolved": "https://registry.npmjs.org/defu/-/defu-3.2.2.tgz",
-          "integrity": "sha512-8UWj5lNv7HD+kB0e9w77Z7TdQlbUYDVWqITLHNqFIn6khrNHv5WQo38Dcm1f6HeNyZf0U7UbPf6WeZDSdCzGDQ==",
-          "dev": true
-        }
-      }
-    },
     "@nuxtjs/vuetify": {
       "version": "1.12.1",
       "resolved": "https://registry.npmjs.org/@nuxtjs/vuetify/-/vuetify-1.12.1.tgz",

Website/pages/debug.vue

@@ -40,6 +40,9 @@
 
 <script>
 export default {
+  transition(to) {
+    return to.name == "debug" ? "swoop-in" : "swoop-out";
+  },
   data() {
     return {
       device: this.$ua,

Website/pages/docs.vue

@@ -0,0 +1,91 @@
+<template>
+  <div class="row wrap justify-center full-width" style="max-width: 100%">
+    <!--   Left Section // "Sections" Card   -->
+    <v-card
+      class="col-xs-12 mx-2 elevation-0"
+      style="
+        background: transparent;
+        height: max-content;
+        position: sticky;
+        top: 5.5rem;
+      "
+    >
+      <!-- <v-card-title style="padding-bottom: 0 !important; color: #aaa">
+        Sections
+      </v-card-title> -->
+      <v-list style="background: transparent">
+        <!--   Dynamically Generate Links From Below   -->
+        <v-list-item
+          v-for="(item, i) in links"
+          :key="i"
+          :to="item.to"
+          router
+          class="mt-4"
+          color="primary"
+          style="overflow: hidden; border-radius: 0.75rem"
+        >
+          <v-list-item-icon>
+            <v-icon v-text="item.icon" />
+          </v-list-item-icon>
+          <v-list-item-title style="text-align: left">
+            <v-list-item-title v-text="item.text" />
+          </v-list-item-title>
+        </v-list-item>
+      </v-list>
+    </v-card>
+
+    <!--   Child Pages // Card   -->
+    <v-card
+      class="col-xs-12 col-md-6 text-left mx-2 my-6 pa-8"
+      style="
+        height: max-content;
+        background-color: #222;
+        border-radius: 0.75rem;
+        max-width: 90%;
+      "
+    >
+      <NuxtChild />
+    </v-card>
+  </div>
+</template>
+
+<script>
+export default {
+  transition(to, from) {
+    if (!from) return "swoop-in";
+    let routes = ["index", "install", "docs", "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() {
+    return {
+      //---   Links To Generate Above    ---//
+      links: [
+        {
+          text: "Usage Rights",
+          icon: "mdi-book-open-variant",
+          to: "/docs/usage-rights",
+        },
+        {
+          text: "URL Information",
+          icon: "mdi-web",
+          to: "/docs/url",
+        },
+        {
+          text: "Available Endpoints",
+          icon: "mdi-transit-connection-variant",
+          to: "/docs/endpoints",
+        },
+        {
+          text: "Basic Fetching Tutorial",
+          icon: "mdi-school",
+          to: "/docs/fetching",
+        },
+      ],
+    };
+  },
+};
+</script>

Website/pages/documentation/fetching.vue → Website/pages/docs/fetching.vue

@@ -61,9 +61,8 @@
 
 <style scoped>
 .code {
-  width: 100%;
   background: #353535;
-  border-radius: 3px;
+  border-radius: 0.25rem;
 }
 </style>
 

Website/pages/documentation/index.vue → Website/pages/docs/index.vue

@@ -3,6 +3,6 @@
     <h1>
       Welcome to the <span class="primary--text">official RYD docs</span>!
     </h1>
-    <p>To get started, select a section.</p>
+    <p>&lt;- To get started, select a section on the left.</p>
   </div>
 </template>

Website/pages/documentation.vue

@@ -1,60 +0,0 @@
-<template>
-  <div>
-    <!--   Top Section // "Sections" Card   -->
-    <v-card max-width="600px" class="rounded-lg">
-      <v-card-title style="padding-bottom: 0">Sections</v-card-title>
-      <v-list>
-        <!--   Dynamically Generate Links From Below   -->
-        <v-list-item v-for="(item, i) in links" :key="i" router :to="item.to">
-          <v-list-item-icon>
-            <v-icon v-text="item.icon" />
-          </v-list-item-icon>
-          <v-list-item-title style="text-align: left">
-            <v-list-item-title v-text="item.text" />
-          </v-list-item-title>
-        </v-list-item>
-      </v-list>
-    </v-card>
-
-    <!--   Child Pages // Card   -->
-    <v-card
-      max-width="600px"
-      class="rounded-lg"
-      style="margin: 1em; padding: 0.75em; text-align: left"
-    >
-      <NuxtChild />
-    </v-card>
-  </div>
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      //---   Links To Generate Above    ---//
-      links: [
-        {
-          text: "Usage Rights",
-          icon: "mdi-book-open-variant",
-          to: "/documentation/usage-rights",
-        },
-        {
-          text: "URL Information",
-          icon: "mdi-web",
-          to: "/documentation/url",
-        },
-        {
-          text: "Available Endpoints",
-          icon: "mdi-transit-connection-variant",
-          to: "/documentation/endpoints",
-        },
-        {
-          text: "Basic Fetching Tutorial",
-          icon: "mdi-school",
-          to: "/documentation/fetching",
-        },
-      ],
-    };
-  },
-};
-</script>

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", "docs", "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", "docs", "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/help.vue

@@ -0,0 +1,172 @@
+<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: 3rem; color: #aaa"
+    >
+      <li>
+        Make sure you have latest version of extension installed,
+        <code style="color: #eee">
+          <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
+          class="px-2 py-1"
+          style="background: #222; border-radius: 0.25rem"
+          href="https://returnyoutubedislikeapi.com/votes?videoId=QOFEgexls14"
+        >
+          https://returnyoutubedislikeapi.com/votes?videoId=QOFEgexls14
+        </a>
+        , <br />
+        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;
+            color: #aaa;
+            padding-left: 0.25rem !important;
+            padding-right: 0.5rem !important;
+          "
+          :href="discordLink"
+          target="_blank"
+        >
+          <v-icon size="1rem" 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>.
+            <v-btn
+              class="mainAltButton"
+              style="
+                height: 1.5rem;
+                font-size: 0.75rem;
+                text-transform: none !important;
+                padding-left: 0.5rem !important;
+                padding-right: 0.25rem !important;
+              "
+              target="_blank"
+              @click="copyToClipboard(platform)"
+            >
+              <v-icon size=".75rem" color="primary" style="margin-right: 0.5em"
+                >mdi-content-copy</v-icon
+              >
+              <span style="color: #f44"> Detected: </span>
+              &nbsp;{{ platform }}
+            </v-btn>
+          </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", "docs", "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",
+    platform: "Unknown platform",
+    discordLink: "https://discord.gg/mYnESY4Md5",
+  }),
+  mounted() {
+    fetch(
+      "https://raw.githubusercontent.com/Anarios/return-youtube-dislike/main/Extensions/combined/manifest-chrome.json"
+    )
+      .then((response) => response.json())
+      .then((json) => {
+        this.version = json.version;
+      });
+    // .catch(console.error);
+
+    // This script sets OSName variable as follows:
+    // "Windows"    for all versions of Windows
+    // "MacOS"      for all versions of Macintosh OS
+    // "Linux"      for all versions of Linux
+    // "UNIX"       for all other UNIX flavors
+    // "Unknown OS" indicates failure to detect the OS
+
+    var OSName = "Unknown OS";
+    if (navigator.appVersion.indexOf("Win") != -1) OSName = "Windows";
+    if (navigator.appVersion.indexOf("Mac") != -1) OSName = "MacOS";
+    if (navigator.appVersion.indexOf("X11") != -1) OSName = "UNIX";
+    if (navigator.appVersion.indexOf("Linux") != -1) OSName = "Linux";
+
+    // browser parcer
+    navigator.sayswho = (function () {
+      var ua = navigator.userAgent;
+      var tem;
+      var M =
+        ua.match(
+          /(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+)/i
+        ) || [];
+      if (/trident/i.test(M[1])) {
+        tem = /\brv[ :]+(\d+)/g.exec(ua) || [];
+        return "IE " + (tem[1] || "");
+      }
+      if (M[1] === "Chrome") {
+        tem = ua.match(/\b(OPR|Edge)\/(\d+)/);
+        if (tem != null) return tem.slice(1).join(" ").replace("OPR", "Opera");
+      }
+      M = M[2] ? [M[1], M[2]] : [navigator.appName, navigator.appVersion, "-?"];
+      if ((tem = ua.match(/version\/(\d+)/i)) != null) M.splice(1, 1, tem[1]);
+      return M.join(" ");
+    })();
+    this.platform = OSName + ", " + navigator.sayswho;
+  },
+  methods: {
+    copyToClipboard(text) {
+      navigator.clipboard.writeText(text);
+    },
+  },
+};
+</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", "docs", "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/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", "docs", "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

@@ -28,11 +28,8 @@
     <p id="credits" class="flex-row no-wrap">
       Site by <v-icon color="#555">mdi-discord</v-icon> Front#2990
       <br />
-      <span style="color: #444; font-size: 0.75rem"
-        >&
-        <v-icon color="#333" size="1rem">mdi-discord</v-icon>
-        PickleNik#0864</span
-      >
+      & <v-icon color="#555">mdi-discord</v-icon>
+      PickleNik#0864
     </p>
   </div>
 </template>
@@ -41,7 +38,7 @@
 export default {
   transition(to, from) {
     if (!from) return "swoop-in";
-    let routes = ["index", "install", "faq", "donate", "links"];
+    let routes = ["index", "install", "docs", "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)