more concise unsupported platform detector

Website/layouts/default.vue

@@ -40,7 +40,13 @@
       <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-btn
+          v-bind="attrs"
+          color="primary"
+          text
+          icon
+          @click="alert.show = false"
+        >
           <v-icon>mdi-close-circle-outline</v-icon>
         </v-btn>
       </template>
@@ -67,38 +73,22 @@ export default {
   }),
   mounted() {
     setTimeout(() => {
-      // Chrome < 70
+      // 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 = `<b style="background: #222; border-radius: .5rem; padding: .25rem .5rem;">${this.$ua._parsed.name} ${this.$ua._parsed.version}</b> is not supported. Consider updating to the latest version.`;
-          this.alert.show = true;
-        }
-      }
-
-      // FF < 60
-      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 = `<b style="background: #222; border-radius: .5rem; padding: .25rem .5rem;">${this.$ua._parsed.name} ${this.$ua._parsed.version}</b> is not supported. Consider updating to the latest version.`;
-          this.alert.show = true;
-        }
-      }
-
-      // IE
-      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.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;
       }
 
       // Win7
       if (window.navigator.userAgent.indexOf("Windows NT 6.1") > -1) {
-        this.alert.html = `<b style="background: #222; border-radius: .5rem; padding: .25rem .5rem;">Windows 7</b> is not supported. Consider upgrading Windows, or installing Linux.`;
+        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);

Website/pages/docs/fetching.vue

@@ -3,7 +3,9 @@
     <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>
+    <a href="https://youtube.com/watch?v=kxOuG8jMIgI" target="_blank"
+      >kxOuG8jMIgI</a
+    >
 
     <h2>Example Request:</h2>
     <span>Request URL:</span>
@@ -45,8 +47,12 @@
     </div>
     <br />
     <v-alert border="left" color="orange" text type="info">
-      <span>An invalid YouTube ID will return status code 404 "Not Found".</span><br />
-      <span>An incorrectly formatted YouTube ID will return 400 "Bad Request".</span>
+      <span>An invalid YouTube ID will return status code 404 "Not Found".</span
+      ><br />
+      <span
+        >An incorrectly formatted YouTube ID will return 400 "Bad
+        Request".</span
+      >
     </v-alert>
 
     <a :href="endpointUrl" target="_blank" v-text="endpointUrl" />

Website/pages/help.vue

@@ -1,5 +1,8 @@
 <template>
-  <div style="width: 80vw" class="col-xs-12 col-sm-11 col-md-9 col-lg-7 mx-auto">
+  <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 style="line-height: 3rem; color: #aaa" class="text-left">
       <li>
@@ -10,8 +13,8 @@
         right now
       </li>
       <li>
-        Try removing extension and installing it again, then restarting the browser (all
-        active windows, not just one tab).
+        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:
@@ -25,8 +28,9 @@
         , <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}
+          {"id":"QOFEgexls14", "dateCreated":"2021-12-15T16:54:12.250813Z",
+          "likes":2907, "dislikes":215, "rating":4.725641025641026,
+          "viewCount":28222, "deleted":false}
         </span>
       </li>
       <li>
@@ -73,8 +77,8 @@
           </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.
+            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"
@@ -84,13 +88,15 @@
           </li>
 
           <li>
-            Take screenshot of extensions page of your browser with extension installed.
+            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
+            <code>chrome://extensions</code> for Chrome, Edge, Brave, Opera,
+            Vivaldi
           </li>
         </ol>
       </li>