Merge pull request #431 from PickleNik/main

Website & Extension improvements

12 files changed, 151 insertions, 124 deletions

diff --git a/Extensions/combined/popup.css b/Extensions/combined/popup.css
index c996a14..5bb11d0 100644
--- a/Extensions/combined/popup.css
+++ b/Extensions/combined/popup.css
@@ -43,14 +43,47 @@ button:hover {
 }
 
 #ext-version {
+  padding: .25rem .5rem;
+}
+
+#ext-update {
+  cursor: pointer;
+  color: var(--white);
+  text-decoration: none;
+  background: var(--primary);
+  border-radius: .25rem;
+}
+#ext-update:hover {
+  text-decoration: underline;
+}
+
+#ext {
+  padding: .25rem 0;
   z-index: 69;
   position: fixed;
+  background: var(--secondary);
   margin: 0;
   bottom: 1.15rem;
   right: 1.15rem;
-  background: var(--secondary);
-  border-radius: 0.25rem;
-  padding: 0.25rem 0.5rem;
+  border-radius: .25rem;
+}
+
+.switch:before {
+  content: attr(data-hover);
+  visibility: hidden;
+  width: 250px;
+  background-color: var(--secondary);
+  border-radius: .5rem;
+  padding: .5rem;
+
+  position: absolute;
+  z-index: 1;
+  left: 0;
+  top: 160%;
+}
+
+.switch:hover:before {
+  visibility: visible;
 }
 
 #advancedToggle {
diff --git a/Extensions/combined/popup.html b/Extensions/combined/popup.html
index 2cfb6da..56645f6 100644
--- a/Extensions/combined/popup.html
+++ b/Extensions/combined/popup.html
@@ -63,16 +63,19 @@
     </button>
 
     <!-- bottom-right -->
-    <p id="ext-version"></p>
+    <div id="ext">
+      <a href="https://returnyoutubedislike.com/install" target="_blank" id="ext-update"></a>
+      <span id="ext-version"></span>
+    </div>
 
     <!-- dialog box -->
     <fieldset id="advancedSettings">
       <legend id="advancedLegend">Settings</legend>
 
-      <label class="switch">
+      <label class="switch" data-hover="Stops counting your likes and dislikes.">
         <input type="checkbox" id="disable_vote_submission" />
         <span class="slider" />
-        <span class="switchLabel">Disable like/dislike submission</span>
+        <span class="switchLabel">Disable vote submission</span>
       </label>
       <!-- <br />
       <label class="switch">
diff --git a/Extensions/combined/popup.js b/Extensions/combined/popup.js
index b29af47..16c54f9 100644
--- a/Extensions/combined/popup.js
+++ b/Extensions/combined/popup.js
@@ -65,6 +65,19 @@ function initConfig() {
 function initializeVersionNumber() {
   const version = chrome.runtime.getManifest().version;
   document.getElementById('ext-version').innerHTML = 'v' + version;
+
+  fetch(
+    "https://raw.githubusercontent.com/Anarios/return-youtube-dislike/main/Extensions/combined/manifest-chrome.json"
+  )
+    .then((response) => response.json())
+    .then((json) => {
+      if (version !== json.version) {
+        document.getElementById('ext-update').innerHTML = 'update to v' + json.version;
+        document.getElementById('ext-update').style.padding = '.25rem .5rem';
+      }
+    });
+  // .catch(console.error);
+
 }
 
 function initializeDisableVoteSubmission() {
diff --git a/Website/layouts/default.vue b/Website/layouts/default.vue
index 35f1318..7382b5e 100644
--- a/Website/layouts/default.vue
+++ b/Website/layouts/default.vue
@@ -73,29 +73,22 @@ export default {
   }),
   mounted() {
     setTimeout(() => {
-      // check if browser version out of date
+      // Chrome < 70 or FF < 60
       if (
-        window.navigator.userAgent.indexOf("Chrome") > -1 &&
-        window.navigator.userAgent.indexOf("Edge") === -1
+        (this.$ua._parsed.name == "Chrome" &&
+          parseInt(this.$ua._parsed.version.slice(0, 2)) < 70) ||
+        (this.$ua._parsed.name == "Firefox" &&
+          parseInt(this.$ua._parsed.version.slice(0, 2)) < 60)
       ) {
-        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;
-        }
+        this.alert.html = `<b style="background: #222; border-radius: .5rem; padding: .25rem .25rem .25rem .5rem; margin: 0 .25rem;">
+        ${this.$ua._parsed.name} ${this.$ua._parsed.version.slice(0, 2)}
+        </b> is not supported. Consider upgrading 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.`;
+
+      // Win7
+      if (window.navigator.userAgent.indexOf("Windows NT 6.1") > -1) {
+        this.alert.html = `<b style="background: #222; border-radius: .5rem; padding: .25rem .5rem; margin: 0 .25rem;">Windows 7</b> is not supported. Consider upgrading Windows, or installing Linux.`;
         this.alert.show = true;
       }
     }, 1000);
@@ -107,10 +100,9 @@ export default {
 html,
 body {
   height: 100%;
-  background: #111; /* for MacOS/iOS overscroll */
-  height: -webkit-fill-available;
   background: #111;
-  overflow: auto;
+  height: -webkit-fill-available; /* for MacOS/iOS overscroll */
+  scrollbar-color: #424242 #111;
 }
 
 ::selection {
@@ -128,14 +120,18 @@ body {
 
 ::-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 */
+  border-radius: 1rem 0 0 1rem; /* roundness of the scroll thumb */
+  border-bottom: 0.25rem solid #111; /* creates padding around scroll thumb */
+  border-left: 0.25rem solid #111; /* creates padding around scroll thumb */
+  border-top: 0.25rem 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 */
+  border-radius: 1rem 0 0 1rem; /* roundness of the scroll thumb */
+  border-bottom: 0.25rem solid #111; /* creates padding around scroll thumb */
+  border-left: 0.25rem solid #111; /* creates padding around scroll thumb */
+  border-top: 0.25rem solid #111; /* creates padding around scroll thumb */
 }
 
 .debug {
@@ -154,14 +150,17 @@ body {
 .topBar {
   padding: 0 3rem;
   width: fit-content !important;
-  background-color: #222 !important;
+  backdrop-filter: blur(16px) saturate(180%);
+  -webkit-backdrop-filter: blur(16px) saturate(180%);
+  background: rgba(42, 42, 42, 0.75) !important;
   border-radius: 1rem !important;
-  border-radius: 0.75rem;
+  /* border: 1px solid #222; */
   overflow: hidden;
 }
 .title-text {
   font-size: 3rem;
 }
+
 @media (max-width: 768px) {
   /* mobile */
   .title-text {
@@ -186,7 +185,7 @@ body {
 .swoop-right-leave-active {
   transition-duration: 0.1s;
   transition-property: opacity, transform;
-  /* overflow: hidden; */
+  overflow: hidden;
 }
 
 .swoop-left-enter,
diff --git a/Website/pages/docs.vue b/Website/pages/docs.vue
index 04abbd2..a1ef277 100644
--- a/Website/pages/docs.vue
+++ b/Website/pages/docs.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="row wrap justify-center full-width" style="max-width: 100%">
+  <div class="row wrap justify-center full-width mx-auto" style="width: 80vw">
     <!--   Left Section // "Sections" Card   -->
     <v-card
       class="col-xs-12 mx-2 elevation-0"
@@ -8,6 +8,7 @@
         height: max-content;
         position: sticky;
         top: 5.5rem;
+        max-width: 500px;
       "
     >
       <!-- <v-card-title style="padding-bottom: 0 !important; color: #aaa">
@@ -24,12 +25,12 @@
           color="primary"
           style="overflow: hidden; border-radius: 0.75rem"
         >
+          <v-list-item-title style="text-align: right">
+            <v-list-item-title v-text="item.text" />
+          </v-list-item-title>
           <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>
@@ -41,7 +42,7 @@
         height: max-content;
         background-color: #222;
         border-radius: 0.75rem;
-        max-width: 90%;
+        width: 90%;
       "
     >
       <NuxtChild />
diff --git a/Website/pages/docs/endpoints.vue b/Website/pages/docs/endpoints.vue
index ef94c10..2933af1 100644
--- a/Website/pages/docs/endpoints.vue
+++ b/Website/pages/docs/endpoints.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div style="line-height: 3rem">
     <h1 class="primary--text">Available Endpoints</h1>
     List of available endpoints is available here:<br />
     <a :href="endpointUrl" target="_blank" v-text="endpointUrl" />
diff --git a/Website/pages/docs/fetching.vue b/Website/pages/docs/fetching.vue
index 147d78b..f3d9d1b 100644
--- a/Website/pages/docs/fetching.vue
+++ b/Website/pages/docs/fetching.vue
@@ -1,51 +1,51 @@
 <template>
-  <div>
+  <div style="line-height: 3rem">
     <h1 class="primary--text">Basic Fetching Tutorial</h1>
 
     <span>Example to get votes of a given YouTube video ID:</span>
     <a href="https://youtube.com/watch?v=kxOuG8jMIgI" target="_blank"
       >kxOuG8jMIgI</a
-    ><br /><br />
+    >
 
     <h2>Example Request:</h2>
-    <span><b>Request URL:</b></span>
+    <span>Request URL:</span>
     <a
       :href="apiUrl + '/votes?videoId=kxOuG8jMIgI'"
       target="_blank"
       v-text="apiUrl + '/votes?videoId=kxOuG8jMIgI'"
-    /><br />
-    <span
-      ><b>Request Method:</b>
+    />
+    <br />
+    <span>
+      Request Method:
       <a
         href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods/GET"
         target="_blank"
         >HTTP/GET</a
-      ></span
-    ><br />
-    <span><b>Headers:</b></span
-    ><br />
-    <code class="code">
+      >
+    </span>
+    <br />
+    <span>Headers:</span>
+    <br />
+    <div class="code pa-4">
       Accept: text/html,application/xhtml+xml,application/xml;q=0.9<br />
       Pragma: no-cache<br />
       Cache-Control: no-cache<br />
-      Connection: keep-alive </code
-    ><br />
-    <span><b>Response:</b></span
-    ><br />
-    <div class="code">
-      <code style="background-color: rgba(0, 0, 0, 0)">
-        {<br />
-        "id": "kxOuG8jMIgI",<br />
-        "dateCreated": "2021-12-20T12:25:54.418014Z",<br />
-        "likes": 27326,<br />
-        "dislikes": 498153,<br />
-        "rating": 1.212014408444885,<br />
-        "viewCount": 3149885,<br />
-        "deleted": false<br />
-        }
-      </code>
+      Connection: keep-alive
+    </div>
+    <span>Response:</span><br />
+    <div class="code pa-4">
+      {
+      <br />
+      &nbsp;"id": "kxOuG8jMIgI",<br />
+      &nbsp;"dateCreated": "2021-12-20T12:25:54.418014Z",<br />
+      &nbsp;"likes": 27326,<br />
+      &nbsp;"dislikes": 498153,<br />
+      &nbsp;"rating": 1.212014408444885,<br />
+      &nbsp;"viewCount": 3149885,<br />
+      &nbsp;"deleted": false<br />
+      }
     </div>
-    <br /><br />
+    <br />
     <v-alert border="left" color="orange" text type="info">
       <span>An invalid YouTube ID will return status code 404 "Not Found".</span
       ><br />
@@ -71,7 +71,10 @@ export default {
 
 <style scoped>
 .code {
+  color: #aaa;
   background: #353535;
-  border-radius: 0.25rem;
+  border-radius: 0.5rem;
+  font-family: monospace;
+  line-height: 2rem;
 }
 </style>
diff --git a/Website/pages/docs/index.vue b/Website/pages/docs/index.vue
index e84dd73..1a18bb8 100644
--- a/Website/pages/docs/index.vue
+++ b/Website/pages/docs/index.vue
@@ -1,8 +1,8 @@
 <template>
-  <div>
+  <div style="line-height: 3rem">
     <h1>
       Welcome to the <span class="primary--text">official RYD docs</span>!
     </h1>
-    <p>&lt;- To get started, select a section on the left.</p>
+    To get started, select a section from the menu.
   </div>
 </template>
diff --git a/Website/pages/docs/url.vue b/Website/pages/docs/url.vue
index e95f542..3de1158 100644
--- a/Website/pages/docs/url.vue
+++ b/Website/pages/docs/url.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div style="line-height: 3rem">
     <h1 class="primary--text">URL Information</h1>
     The API is accessible over the following base URL:<br />
     <a :href="apiUrl" target="_blank" v-text="apiUrl" />
diff --git a/Website/pages/docs/usage-rights.vue b/Website/pages/docs/usage-rights.vue
index 09bf581..25fa8c1 100644
--- a/Website/pages/docs/usage-rights.vue
+++ b/Website/pages/docs/usage-rights.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div style="line-height: 3rem">
     <h1 class="primary--text">Usage Rights</h1>
     <p>
       Third party use of this open API is allowed with the following
diff --git a/Website/pages/faq.vue b/Website/pages/faq.vue
index 5b784d1..25660fe 100644
--- a/Website/pages/faq.vue
+++ b/Website/pages/faq.vue
@@ -1,11 +1,11 @@
 <template>
-  <div>
+  <div style="width: 90vw" class="mx-auto">
     <h1 class="title-text">Frequently Asked Questions</h1>
     <p style="color: #999; margin-top: 0.5rem; margin-bottom: 1.5rem">
       Still have questions? Feel free to join our Discord!
     </p>
 
-    <v-expansion-panels class="col-xs-12 col-sm-11 col-md-9 col-lg-7">
+    <v-expansion-panels class="col-xs-12 col-sm-11 col-md-9 col-lg-8">
       <v-expansion-panel v-for="(item, i) in items" :key="i">
         <v-expansion-panel-header>
           {{ item.question }}
diff --git a/Website/pages/help.vue b/Website/pages/help.vue
index 8b8adcc..36ea292 100644
--- a/Website/pages/help.vue
+++ b/Website/pages/help.vue
@@ -1,10 +1,10 @@
 <template>
-  <div>
+  <div
+    style="width: 80vw"
+    class="col-xs-12 col-sm-11 col-md-9 col-lg-7 mx-auto"
+  >
     <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"
-    >
+    <ol style="line-height: 3rem; color: #aaa" class="text-left">
       <li>
         Make sure you have latest version of extension installed,
         <code style="color: #eee">
@@ -71,7 +71,8 @@
                 >mdi-content-copy</v-icon
               >
               <span style="color: #f44"> Detected: </span>
-              &nbsp;{{ platform }}
+              &nbsp;
+              {{ platform }}
             </v-btn>
           </li>
 
@@ -113,11 +114,20 @@ export default {
       ? "swoop-left"
       : "swoop-right";
   },
-  data: () => ({
-    version: "2.0.0.3",
-    platform: "Unknown platform",
-    discordLink: "https://discord.gg/mYnESY4Md5",
-  }),
+  data() {
+    return {
+      platform:
+        this.$ua._parsed.os +
+        " " +
+        this.$ua._parsed.os_version +
+        ", " +
+        this.$ua._parsed.name +
+        " " +
+        this.$ua._parsed.version,
+      version: "loading",
+      discordLink: "https://discord.gg/mYnESY4Md5",
+    };
+  },
   mounted() {
     fetch(
       "https://raw.githubusercontent.com/Anarios/return-youtube-dislike/main/Extensions/combined/manifest-chrome.json"
@@ -127,45 +137,10 @@ export default {
         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);
+      navigator.clipboard.writeText("```" + text + "```");
     },
   },
 };