Refining code and design

2022-02-04 23:07:47 +03:00 · 2022-02-04 23:07:47 +03:00 · 236f839eac
commit 236f839eac
parent a9f95b3d1d
18 changed files with 150 additions and 252 deletions
--- a/src/assets/javascripts/helpers/common.js
+++ b/src/assets/javascripts/helpers/common.js
@ -28,7 +28,7 @@ function updateInstances() {
  if (request.status === 200) {
    const instances = JSON.parse(request.responseText);

-    youtubeHelper.setRedirects(instances.invidious);
+    youtubeHelper.setInvidiousRedirects(instances.invidious);

    twitterHelper.setRedirects(instances.nitter);

--- a/src/assets/javascripts/helpers/youtube/youtube.js
+++ b/src/assets/javascripts/helpers/youtube/youtube.js
@ -105,12 +105,12 @@ function setInvidiousVideoQuality(val) {
 }
 const getInvidiousVideoQuality = () => invidiousVideoQuality;

-let invidiousDarkMode;
-const getInvidiousDarkMode = () => invidiousDarkMode;
-function setInvidiousDarkMode(val) {
-  invidiousDarkMode = val;
-  browser.storage.sync.set({ invidiousDarkMode })
-  console.log("invidiousDarkMode: ", invidiousDarkMode)
+let invidiousTheme;
+const getInvidiousTheme = () => invidiousTheme;
+function setInvidiousTheme(val) {
+  invidiousTheme = val;
+  browser.storage.sync.set({ invidiousTheme })
+  console.log("invidiousTheme: ", invidiousTheme)
 }

 let invidiousVolume;
@ -179,7 +179,7 @@ async function init() {
    [
      "invidiousAlwaysProxy",
      "invidiousVideoQuality",
-      "invidiousDarkMode",
+      "invidiousTheme",
      "persistInvidiousPrefs",
      "disableYoutube",
      "invidiousInstance",
@ -201,7 +201,7 @@ async function init() {
  invidiousAlwaysProxy = result.invidiousAlwaysProxy ?? true;
  invidiousOnlyEmbeddedVideo = result.invidiousOnlyEmbeddedVideo ?? false;
  invidiousVideoQuality = result.invidiousVideoQuality ?? 'medium';
-  invidiousDarkMode = result.invidiousDarkMode ?? true;
+  invidiousTheme = result.invidiousTheme ?? 'dark';
  invidiousVolume = result.invidiousVolume ?? 50;
  invidiousPlayerStyle = result.invidiousPlayerStyle ?? 'invidious';
  invidiousSubtitles = result.invidiousSubtitles || '';
@ -250,7 +250,7 @@ function redirect(url, initiator, type) {

    url.searchParams.append("local", invidiousAlwaysProxy);
    url.searchParams.append("quality", invidiousVideoQuality);
-    url.searchParams.append("dark_mode", invidiousDarkMode);
+    url.searchParams.append("dark_mode", invidiousTheme);
    url.searchParams.append("volume", invidiousVolume);
    url.searchParams.append("player_style", invidiousPlayerStyle);
    url.searchParams.append("subtitles", invidiousSubtitles);
@ -271,7 +271,6 @@ function redirect(url, initiator, type) {
  }
 }

-
 export default {
  invidiousInitCookies,

@ -300,8 +299,8 @@ export default {
  setInvidiousVideoQuality,
  getInvidiousVideoQuality,

-  setInvidiousDarkMode,
-  getInvidiousDarkMode,
+  setInvidiousTheme,
+  getInvidiousTheme,

  setInvidiousVolume,
  getInvidiousVolume,
--- a/src/assets/javascripts/remove-twitter-sw.js
+++ b/src/assets/javascripts/remove-twitter-sw.js
@ -1,24 +1,5 @@
 "use strict";

-const nitterInstances = [
-  "https://nitter.net",
-  "https://nitter.snopyta.org",
-  "https://nitter.42l.fr",
-  "https://nitter.nixnet.services",
-  "https://nitter.pussthecat.org",
-  "https://nitter.dark.fail",
-  "https://nitter.tedomum.net",
-  "https://nitter.cattube.org",
-  "https://nitter.fdn.fr",
-  "https://nitter.1d4.us",
-  "https://nitter.kavin.rocks",
-  "https://tweet.lambda.dance",
-  "https://nitter.cc",
-  "https://nitter.vxempire.xyz",
-  "https://nitter.unixfox.eu",
-  "https://bird.trom.tf"
-];
-
 let disableTwitter;
 let nitterInstance;
 let redirectBypassFlag;
@ -26,27 +7,32 @@ let exceptions;

 window.browser = window.browser || window.chrome;

-function getRandomInstance() {
-  return nitterInstances[~~(nitterInstances.length * Math.random())];
-}
-
-function isNotException(url) {
-  return !exceptions.some((regex) => regex.test(url.href));
-}
+Promise.all([
+  import(browser.extension.getURL("src/assets/javascripts/helpers/common.js")),
+  import(browser.extension.getURL("src/assets/javascripts/helpers/twitter.js")),
+]).then(
+  (helpers) => {
+    let commonHelper;
+    let twitterHelper;
+    [commonHelper, twitterHelper] = helpers;

    function shouldRedirect(url) {
-  return (!redirectBypassFlag && isNotException(url) && !disableTwitter && url.host !== nitterInstance && !url.pathname.includes("/home"));
+      return (
+        !redirectBypassFlag &&
+        !disableTwitter &&
+        url.host !== nitterInstance &&
+        !url.pathname.includes("/home")
+      );
    }

    function redirectTwitter(url) {
-  if (url.host.split(".")[0] === "pbs") {
+      if (url.host.split(".")[0] === "pbs")
        return `${nitterInstance}/pic/${encodeURIComponent(url.href)}`;
-  } else if (url.host.split(".")[0] === "video") {
+      else if (url.host.split(".")[0] === "video")
        return `${nitterInstance}/gif/${encodeURIComponent(url.href)}`;
-  } else {
+      else
        return `${nitterInstance}${url.pathname}${url.search}`;
    }
-}

    browser.storage.sync.get(
      [
@ -61,12 +47,8 @@ browser.storage.sync.get(
        browser.storage.sync.set({ redirectBypassFlag: false });
        if (!result.removeTwitterSW) {
          disableTwitter = result.disableTwitter;
-      nitterInstance = result.nitterInstance || getRandomInstance();
-      exceptions = result.exceptions
-        ? result.exceptions.map((e) => {
-          return new RegExp(e);
-        })
-        : [];
+          nitterInstance = result.nitterInstance ?? commonHelper.default.getRandomInstance(twitterHelper.default.redirects);
+          exceptions = result.exceptions ? result.exceptions.map((e) => new RegExp(e)) : [];
          navigator.serviceWorker.getRegistrations().then((registrations) => {
            for (let registration of registrations) {
              if (registration.scope === "https://twitter.com/") {
@ -84,95 +66,8 @@ browser.storage.sync.get(
        }
      }
    );
-
-// Keeping this here until https://bugzilla.mozilla.org/show_bug.cgi?id=1536094 is fixed...
-//
-//"use strict";
-//
-//let disableTwitter;
-//let nitterInstance;
-//let redirectBypassFlag;
-//let exceptions;
-//
-//window.browser = window.browser || window.chrome;
-//
-//Promise.all([
-//  import(browser.extension.getURL("src/assets/javascripts/helpers/common.js")),
-//  import(browser.extension.getURL("src/assets/javascripts/helpers/twitter.js")),
-//]).then(
-//  (helpers) => {
-//    let commonHelper;
-//    let twitterHelper;
-//    [commonHelper, twitterHelper] = helpers;
-//
-//    function isNotException(url) {
-//      return !exceptions.some((regex) => regex.test(url.href));
-//    }
-//
-//    function shouldRedirect(url) {
-//      return (
-//        !redirectBypassFlag &&
-//        isNotException(url) &&
-//        !disableTwitter &&
-//        url.host !== nitterInstance &&
-//        !url.pathname.includes("/home")
-//      );
-//    }
-//
-//    function redirectTwitter(url) {
-//      if (url.host.split(".")[0] === "pbs") {
-//        return `${nitterInstance}/pic/${encodeURIComponent(url.href)}`;
-//      } else if (url.host.split(".")[0] === "video") {
-//        return `${nitterInstance}/gif/${encodeURIComponent(url.href)}`;
-//      } else {
-//        return `${nitterInstance}${url.pathname}${url.search}`;
-//      }
-//    }
-//
-//    browser.storage.sync.get(
-//      [
-//        "nitterInstance",
-//        "disableTwitter",
-//        "removeTwitterSW",
-//        "redirectBypassFlag",
-//        "exceptions",
-//      ],
-//      (result) => {
-//        redirectBypassFlag = result.redirectBypassFlag;
-//        browser.storage.sync.set({
-//          redirectBypassFlag: false,
-//        });
-//        if (!result.removeTwitterSW) {
-//          disableTwitter = result.disableTwitter;
-//          nitterInstance =
-//            result.nitterInstance ||
-//            commonHelper.default.getRandomInstance(
-//              twitterHelper.default.redirects
-//            );
-//          exceptions = result.exceptions
-//            ? result.exceptions.map((e) => {
-//                return new RegExp(e);
-//              })
-//            : [];
-//          navigator.serviceWorker.getRegistrations().then((registrations) => {
-//            for (let registration of registrations) {
-//              if (registration.scope === "https://twitter.com/") {
-//                registration.unregister();
-//                console.log("Unregistered Twitter SW", registration);
-//              }
-//            }
-//          });
-//          const url = new URL(window.location);
-//          if (shouldRedirect(url)) {
-//            const redirect = redirectTwitter(url);
-//            console.info("Redirecting", `"${url.href}"`, "=>", `"${redirect}"`);
-//            window.location = redirect;
-//          }
-//        }
-//      }
-//    );
-//  },
-//  (error) => {
-//    console.error(error);
-//  }
-//);
+  },
+  (error) => {
+    console.error(error);
+  }
+);
--- a/src/manifest.json
+++ b/src/manifest.json
@ -47,7 +47,7 @@
    "open_in_tab": true
  },
  "web_accessible_resources": [
-    "assets/javascripts/helpers/*"
+    "assets/javascripts/helpers/youtube/invidious-cookies.js"
  ],
  "browser_specific_settings": {
    "gecko": {
--- a/src/pages/options/general/general.html
+++ b/src/pages/options/general/general.html
@ -38,8 +38,8 @@
        <span>Update Instances</span>
      </a>
    </div>
-    <hr>
-    <section class="settings-block">
+    <!-- <hr> -->
+    <!-- <section class="settings-block">
      <p data-localise="__MSG_exceptionsDescriptionP1__">
        Enter a URL or Regular Expression to be excluded from redirects.
      </p>
@ -95,11 +95,11 @@
      </table>
    </section>
    <ul id="exceptions-items"></ul>
-  </section>
+  </section> -->


-  <script type="module" src="./general.js"></script>
  <script type="module" src="../init.js"></script>
+  <script type="module" src="./general.js"></script>
  <!-- <script src="../../assets/javascripts/localise.js"></script> -->
 </body>

--- a/src/pages/options/general/general.js
+++ b/src/pages/options/general/general.js
@ -11,66 +11,66 @@ let themeElement = document.getElementById("theme");

 window.browser = window.browser || window.chrome;

-function prependExceptionsItem(item, index) {
-  const li = document.createElement("li");
-  li.appendChild(document.createTextNode(item.toString()));
-  const button = document.createElement("button");
-  li.appendChild(button);
-  document.getElementById("exceptions-items").prepend(li);
-  const svg = `<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 512 512'>
-      <line x1='368' y1='368' x2='144' y2='144'
-        style='fill:none;stroke:#FFF;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px' />
-      <line x1='368' y1='144' x2='144' y2='368'
-        style='fill:none;stroke:#FFF;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px' />
-    </svg>`;
-  button.appendChild(domparser.parseFromString(svg, "image/svg+xml").documentElement);
-  button.addEventListener("click", () => {
-    exceptions.splice(index, 1);
-    browser.storage.sync.set({ exceptions: exceptions });
-    li.remove();
-  });
-}
+// function prependExceptionsItem(item, index) {
+//   const li = document.createElement("li");
+//   li.appendChild(document.createTextNode(item.toString()));
+//   const button = document.createElement("button");
+//   li.appendChild(button);
+//   document.getElementById("exceptions-items").prepend(li);
+//   const svg = `<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 512 512'>
+//       <line x1='368' y1='368' x2='144' y2='144'
+//         style='fill:none;stroke:#FFF;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px' />
+//       <line x1='368' y1='144' x2='144' y2='368'
+//         style='fill:none;stroke:#FFF;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px' />
+//     </svg>`;
+//   button.appendChild(domparser.parseFromString(svg, "image/svg+xml").documentElement);
+//   button.addEventListener("click", () => {
+//     exceptions.splice(index, 1);
+//     browser.storage.sync.set({ exceptions: exceptions });
+//     li.remove();
+//   });
+// }

 browser.storage.sync.get(
  [
-    "exceptions",
+    // "exceptions",
    "theme",
  ],
  (result) => {
    data.theme = result.theme || "";
    themeElement.value = result.theme || "";
    if (result.theme) document.body.classList.add(result.theme);
-    data.exceptions = result.exceptions || [];
-    data.exceptions.forEach(prependExceptionsItem);
+    // data.exceptions = result.exceptions || [];
+    // data.exceptions.forEach(prependExceptionsItem);
    shared.autocompletes.forEach((value) => {
    });
  }
 );

-function addToExceptions() {
-  const input = document.getElementById("new-exceptions-item");
-  const type = document.querySelector('input[name="type"]:checked').value;
-  if (input.value) {
-    try {
-      let value = input.value;
-      new RegExp(input.value);
-      if (type === "URL")
-        value = value.replace(/[-\/\\^$*+?.()|[\]{}]/g, "\\$&");
+// function addToExceptions() {
+//   const input = document.getElementById("new-exceptions-item");
+//   const type = document.querySelector('input[name="type"]:checked').value;
+//   if (input.value) {
+//     try {
+//       let value = input.value;
+//       new RegExp(input.value);
+//       if (type === "URL")
+//         value = value.replace(/[-\/\\^$*+?.()|[\]{}]/g, "\\$&");

-      exceptions.push(value);
-      browser.storage.sync.set({
-        exceptions: exceptions,
-      });
-      prependExceptionsItem(value, exceptions.indexOf(value));
-      input.value = "";
-    } catch (error) {
-      input.setCustomValidity("Invalid RegExp");
-    }
-  } else {
-    input.setCustomValidity("Invalid RegExp");
-  }
-}
-document.getElementById("add-to-exceptions").addEventListener("click", addToExceptions);
+//       exceptions.push(value);
+//       browser.storage.sync.set({
+//         exceptions: exceptions,
+//       });
+//       prependExceptionsItem(value, exceptions.indexOf(value));
+//       input.value = "";
+//     } catch (error) {
+//       input.setCustomValidity("Invalid RegExp");
+//     }
+//   } else {
+//     input.setCustomValidity("Invalid RegExp");
+//   }
+// }
+// document.getElementById("add-to-exceptions").addEventListener("click", addToExceptions);

 themeElement.addEventListener("change", (event) => {
  const value = event.target.options[theme.selectedIndex].value;
@ -92,8 +92,12 @@ themeElement.addEventListener("change", (event) => {

 document.querySelector("#update-instances").addEventListener("click", () => {
  document.querySelector("#update-instances").innerHTML = '...';
-  if (commonHelper.updateInstances())
+  if (commonHelper.updateInstances()) {
    document.querySelector("#update-instances").innerHTML = 'Done!';
+    new Promise(resolve => setTimeout(resolve, 1500)).then( // Sleep 1500ms
+      () => document.querySelector("#update-instances").innerHTML = 'Update Instances'
+    )
+  }
  else
    document.querySelector("#update-instances").innerHTML = 'Failed Miserabely';
 });
--- a/src/pages/options/instagram/instagram.html
+++ b/src/pages/options/instagram/instagram.html
@ -25,7 +25,7 @@

    <section class="option-block">
        <div class="some-block option-block">
-            <h1>Enable</h1>
+            <h4>Enable</h4>
            <input id="disable-bibliogram" type="checkbox" checked />
        </div>
        <!-- <div class="some-block option-block">
--- a/src/pages/options/maps/maps.html
+++ b/src/pages/options/maps/maps.html
@ -26,7 +26,7 @@

    <section class="option-block">
        <div class="some-block option-block">
-            <h1>Enable</h1>
+            <h4>Enable</h4>
            <input id="disable-osm" type="checkbox" checked />
        </div>
        <!-- <div class="some-block option-block">
--- a/src/pages/options/medium/medium.html
+++ b/src/pages/options/medium/medium.html
@ -25,7 +25,7 @@

    <section class="option-block">
        <div class="some-block option-block">
-            <h1>Enable</h1>
+            <h4>Enable</h4>
            <input id="disable-scribe" type="checkbox" checked />
        </div>
        <!-- <div class="some-block option-block">
--- a/src/pages/options/reddit/reddit.html
+++ b/src/pages/options/reddit/reddit.html
@ -27,7 +27,7 @@
    <section class="option-block">

        <div class="some-block option-block">
-            <h1>Enable</h1>
+            <h4>Enable</h4>
            <input id="disable-reddit" type="checkbox" checked />
        </div>

--- a/src/pages/options/search/search.html
+++ b/src/pages/options/search/search.html
@ -25,7 +25,7 @@

    <section class="option-block">
        <div class="some-block option-block">
-            <h1>Enable</h1>
+            <h4>Enable</h4>
            <input id="disable-search" type="checkbox" checked />
        </div>
        <!-- <div class="some-block option-block">
--- a/src/pages/options/translate/translate.html
+++ b/src/pages/options/translate/translate.html
@ -24,7 +24,7 @@
    </section>
    <section class="option-block">
        <div class="some-block option-block">
-            <h1>Enable</h1>
+            <h4>Enable</h4>
            <input id="disable-simplyTranslate" type="checkbox" checked />
        </div>
        <!-- <div class="some-block option-block">
--- a/src/pages/options/twitter/twitter.html
+++ b/src/pages/options/twitter/twitter.html
@ -27,7 +27,7 @@
    <section class="option-block">

        <div class="some-block option-block">
-            <h1>Enable</h1>
+            <h4>Enable</h4>
            <input id="disable-nitter" type="checkbox" checked />
        </div>
        <!-- <div class="some-block option-block">
--- a/src/pages/options/twitter/twitter.js
+++ b/src/pages/options/twitter/twitter.js
@ -5,12 +5,6 @@ disableTwitterElement.addEventListener("change",
    (event) => twitterHelper.setDisableTwitter(!event.target.checked)
 );

-let removeTwitterSWElement = document.getElementById("remove-twitter-sw");
-removeTwitterSWElement.addEventListener("change", (event) => {
-    browser.storage.sync.set({ removeTwitterSW: !event.target.checked }); // Problem
-});
-
 twitterHelper.init().then(() => {
    disableTwitterElement.checked = !twitterHelper.getDisableTwitter(); 
-    removeTwitterSWElement.checked = !remove.getRemoveTwitterSW; // Problem
 });
--- a/src/pages/options/wikipedia/wikipedia.html
+++ b/src/pages/options/wikipedia/wikipedia.html
@ -25,7 +25,7 @@

    <section class="option-block">
        <div class="some-block option-block">
-            <h1>Enable</h1>
+            <h4>Enable</h4>
            <input id="disable-wikipedia" type="checkbox" checked />
        </div>
        <!-- <div class="some-block option-block">
--- a/src/pages/options/youtube/youtube.html
+++ b/src/pages/options/youtube/youtube.html
@ -59,6 +59,14 @@
        <hr>

        <div id="invidious">
+            <div class="some-block option-block">
+                <h4>Theme</h4>
+                <select id="invidious-theme">
+                    <option value="dark">Dark</option>
+                    <option value="light">Light</option>
+                </select>
+            </div>
+
            <div class="some-block option-block">
                <h4>Player Style</h4>
                <select id="invidious-player-style">
@ -67,11 +75,6 @@
                </select>
            </div>

-            <div class="some-block option-block">
-                <h4>Dark mode</h4>
-                <input id="invidious-dark-mode" type="checkbox" checked />
-            </div>
-
            <div class="some-block">
                <h4>Volume: <span id="volume-value">50%</span></h4>
                <input id="invidious-volume" name="invidious-volume" type="range" min="0" max="100" step="1" />
@ -90,10 +93,9 @@
            <div class="some-block option-block">
                <h4>Video Quality</h4>
                <select id="video-quality">
-                    <option value="">Default</option>
                    <option value="hd720">720p</option>
                    <option value="medium">480p</option>
-                    <option value="dash">DASH (Dynamic Adaptive Streaming over HTTP)</option>
+                    <option value="dash">DASH (adaptive quality)</option>
                    </option>
                </select>
            </div>
--- a/src/pages/options/youtube/youtube.js
+++ b/src/pages/options/youtube/youtube.js
@ -32,9 +32,9 @@ disableYoutubeElement.addEventListener("change",
    (event) => youtubeHelper.setDisableYoutube(!event.target.checked)
 );

-let invidiousDarkModeElement = document.getElementById("invidious-dark-mode");
-invidiousDarkModeElement.addEventListener("change",
-    (event) => youtubeHelper.setInvidiousDarkMode(event.target.checked)
+let invidiousThemeElement = document.getElementById("invidious-theme");
+invidiousThemeElement.addEventListener("change",
+    (event) => youtubeHelper.setInvidiousTheme(event.target.options[invidiousThemeElement.selectedIndex].value)
 );

 let persistInvidiousPrefsElement = document.getElementById("persist-invidious-prefs");
@ -86,7 +86,7 @@ invidiousVideoQualityElement.addEventListener("change",

 youtubeHelper.init().then(() => {
    disableYoutubeElement.checked = !youtubeHelper.getDisableYoutube();
-    invidiousDarkModeElement.checked = youtubeHelper.getInvidiousDarkMode();
+    invidiousThemeElement.checked = youtubeHelper.getInvidiousTheme();
    persistInvidiousPrefsElement.checked = youtubeHelper.getPersistInvidiousPrefs();
    invidiousVolumeElement.value = youtubeHelper.getInvidiousVolume();
    invidiousVolumeValueElement.textContent = `${youtubeHelper.getInvidiousVolume()}%`;
--- a/src/pages/popup/popup.js
+++ b/src/pages/popup/popup.js
@ -88,8 +88,12 @@ disableMediumElement.addEventListener("change",

 document.querySelector("#update-instances").addEventListener("click", () => {
  document.querySelector("#update-instances").innerHTML = '...';
-  if (commonHelper.updateInstances())
+  if (commonHelper.updateInstances()) {
    document.querySelector("#update-instances").innerHTML = 'Done!';
+    new Promise(resolve => setTimeout(resolve, 1500)).then( // Sleep 1500ms
+      () => document.querySelector("#update-instances").innerHTML = 'Update Instances'
+    )
+  }
  else
    document.querySelector("#update-instances").innerHTML = 'Failed Miserabely';
 });