Readded medium custom domin names #94

5 files changed, 181 insertions, 57 deletions

diff --git a/src/assets/javascripts/helpers/medium.js b/src/assets/javascripts/helpers/medium.js
index f1425afa..10d56646 100644
--- a/src/assets/javascripts/helpers/medium.js
+++ b/src/assets/javascripts/helpers/medium.js
@@ -7,15 +7,25 @@ const targets = [
   /^medium\.com/,
   /.*\.medium\.com/,
   // // Other domains of medium blogs, source(s): https://findingtom.com/best-medium-blogs-to-follow/#1-forge
-  // /towardsdatascience\.com/,
-  // /uxdesign\.cc/,
-  // /uxplanet\.org/,
-  // /betterprogramming\.pub/,
-  // /aninjusticemag\.com/,
-  // /betterhumans\.pub/,
-  // /psiloveyou\.xyz/,
-  // /entrepreneurshandbook\.co/,
-  // /blog\.coinbase\.com/
+
+  /^towardsdatascience\.com/,
+  /^uxdesign\.cc/,
+  /^uxplanet\.org/,
+  /^betterprogramming\.pub/,
+  /^aninjusticemag\.com/,
+  /^betterhumans\.pub/,
+  /^psiloveyou\.xyz/,
+  /^entrepreneurshandbook\.co/,
+  /^blog\.coinbase\.com/,
+
+  /^ levelup\.gitconnected\.com /,
+  /^javascript\.plainenglish\.io /,
+  /^blog\.bitsrc\.io /,
+  /^ itnext\.io /,
+  /^codeburst\.io /,
+  /^infosecwriteups\.com /,
+  /^ blog\.devgenius.io /,
+  /^ writingcooperative\.com /,
 ];
 
 let redirects = {
@@ -104,21 +114,17 @@ function setProtocol(val) {
   console.log("mediumProtocol: ", val);
 }
 
-function isMedium(url, initiator) {
-  if (disable) return false;
-  if (url.pathname == "/") return false;
-
-  if (
-    commonHelper.isFirefox() &&
-    initiator && ([...redirects.scribe.normal, ...scribeNormalCustomRedirects].includes(initiator.origin) || targets.includes(initiator.host))
-  ) return false;
+function redirect(url, type, initiator) {
 
-  return targets.some((rx) => rx.test(url.host));
-}
-function redirect(url, type) {
+  if (disable) return;
+  if (url.pathname == "/") return;
 
   if (type != "main_frame" && "sub_frame" && "xmlhttprequest" && "other") return null;
 
+  if (initiator && ([...redirects.scribe.normal, ...scribeNormalCustomRedirects].includes(initiator.origin))) return;
+
+  if (!targets.some((rx) => rx.test(url.host))) return;
+
   let instancesList;
   if (protocol == 'normal') instancesList = [...scribeNormalRedirectsChecks, ...scribeNormalCustomRedirects];
   else if (protocol == 'tor') instancesList = [...scribeTorRedirectsChecks, ...scribeTorCustomRedirects];
@@ -156,7 +162,7 @@ function changeInstance(url) {
 }
 
 async function init() {
-  return new Promise((resolve) => {
+  return new Promise(resolve => {
     fetch('/instances/data.json').then(response => response.text()).then(data => {
       let dataJson = JSON.parse(data);
       browser.storage.local.get(
@@ -169,19 +175,19 @@ async function init() {
           "scribeTorCustomRedirects",
           "mediumProtocol"
         ],
-        (result) => {
-          disable = result.disableMedium ?? false;
+        r => {
+          disable = r.disableMedium ?? true;
 
-          protocol = result.mediumProtocol ?? "normal";
+          protocol = r.mediumProtocol ?? "normal";
 
           redirects.scribe = dataJson.scribe;
-          if (result.mediumRedirects) redirects = result.mediumRedirects;
+          if (r.mediumRedirects) redirects = r.mediumRedirects;
 
-          scribeNormalRedirectsChecks = result.scribeNormalRedirectsChecks ?? [...redirects.scribe.normal];
-          scribeNormalCustomRedirects = result.scribeNormalCustomRedirects ?? [];
+          scribeNormalRedirectsChecks = r.scribeNormalRedirectsChecks ?? [...redirects.scribe.normal];
+          scribeNormalCustomRedirects = r.scribeNormalCustomRedirects ?? [];
 
-          scribeTorRedirectsChecks = result.scribeTorRedirectsChecks ?? [...redirects.scribe.tor];
-          scribeTorCustomRedirects = result.scribeTorCustomRedirects ?? [];
+          scribeTorRedirectsChecks = r.scribeTorRedirectsChecks ?? [...redirects.scribe.tor];
+          scribeTorCustomRedirects = r.scribeTorCustomRedirects ?? [];
 
           resolve();
         }
@@ -214,7 +220,6 @@ export default {
   setScribeTorCustomRedirects,
 
   redirect,
-  isMedium,
   init,
   changeInstance,
 };
diff --git a/src/pages/background/background.js b/src/pages/background/background.js
index 6aebda6d..8e935751 100644
--- a/src/pages/background/background.js
+++ b/src/pages/background/background.js
@@ -45,7 +45,6 @@ let BYPASSTABs = [];
 
 browser.webRequest.onBeforeRequest.addListener(
   details => {
-    // console.log("url", details.url);
     const url = new URL(details.url);
     let initiator;
     if (details.originUrl)
@@ -66,7 +65,7 @@ browser.webRequest.onBeforeRequest.addListener(
 
     if (!newUrl) newUrl = redditHelper.redirect(url, details.type, initiator);
 
-    if (mediumHelper.isMedium(url, initiator)) newUrl = mediumHelper.redirect(url, details.type);
+    if (!newUrl) newUrl = mediumHelper.redirect(url, details.type, initiator);
 
     if (imgurHelper.isImgur(url, initiator)) newUrl = imgurHelper.redirect(url, details.type);
 
diff --git a/src/pages/options/general/general.html b/src/pages/options/general/general.html
index 3653fe46..70b26aad 100644
--- a/src/pages/options/general/general.html
+++ b/src/pages/options/general/general.html
@@ -197,22 +197,132 @@
       <h4>Customize Popup</h4>
     </div>
 
-    <div class="checklist" id="popup-frontends-checklist">
-      <div>Youtube<input type="checkbox" id="youtube" /></div>
-      <div>YoutubeMusic<input type="checkbox" id="youtubeMusic" /></div>
-      <div>Twitter<input type="checkbox" id="twitter" /></div>
-      <div>Instagram<input type="checkbox" id="instagram" /></div>
-      <div>TikTok<input type="checkbox" id="tikTok" /></div>
-      <div>Imgur<input type="checkbox" id="imgur" /></div>
-      <div>Reddit<input type="checkbox" id="reddit" /></div>
-      <div>Pixiv<input type="checkbox" id="pixiv" /></div>
-      <div>Search<input type="checkbox" id="search" /></div>
-      <div>Translate<input type="checkbox" id="translate" /></div>
-      <div>Maps<input type="checkbox" id="maps" /></div>
-      <div>Wikipedia<input type="checkbox" id="wikipedia" /></div>
-      <div>Medium<input type="checkbox" id="medium" /></div>
-      <div>Peertube<input type="checkbox" id="peertube" /></div>
-      <div>Send Files<input type="checkbox" id="sendTargets" /></div>
+    <div class="checklist-popup" id="popup-frontends-checklist">
+      <div>
+        <div>
+          <img src="../../../assets/images/youtube-icon.png">
+          YouTube
+        </div>
+        <input type="checkbox" id="youtube" />
+      </div>
+      <div>
+        <div>
+          <img src="../../../assets/images/youtube-music-icon.png">
+          YoutubeMusic
+        </div>
+        <input type="checkbox" id="youtubeMusic" />
+      </div>
+      <div>
+        <div>
+          <img src="../../../assets/images/twitter-icon.png">
+          Twitter
+        </div>
+        <input type="checkbox" id="twitter" />
+      </div>
+      <div>
+        <div>
+          <img src="../../../assets/images/instagram-icon.png">
+          Instagram
+        </div>
+        <input type="checkbox" id="instagram" />
+      </div>
+      <div>
+        <div>
+          <img src="../../../assets/images/tiktok-icon.png">
+          TikTok
+        </div>
+        <input type="checkbox" id="tikTok" />
+      </div>
+      <div>
+        <div>
+          <img src="../../../assets/images/imgur-icon.png">
+          Imgur
+        </div>
+        <input type="checkbox" id="imgur" />
+      </div>
+      <div>
+        <div>
+          <img src="../../../assets/images/reddit-icon.png">
+          Reddit
+        </div>
+        <input type="checkbox" id="reddit" />
+      </div>
+      <div>
+        <div>
+          <img src="../../../assets/images/pixiv-icon.svg">
+          Pixiv
+        </div>
+        <input type="checkbox" id="pixiv" />
+      </div>
+      <div>
+        <div>
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+            <path d="M0 0h24v24H0V0z" fill="none" />
+            <path
+              d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z" />
+          </svg>
+          Search
+        </div>
+        <input type="checkbox" id="search" />
+      </div>
+      <div>
+        <div>
+          <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="currentColor">
+            <path d="M0 0h24v24H0V0z" fill="none" />
+            <path
+              d="M12.87 15.07l-2.54-2.51.03-.03c1.74-1.94 2.98-4.17 3.71-6.53H17V4h-7V2H8v2H1v1.99h11.17C11.5 7.92 10.44 9.75 9 11.35 8.07 10.32 7.3 9.19 6.69 8h-2c.73 1.63 1.73 3.17 2.98 4.56l-5.09 5.02L4 19l5-5 3.11 3.11.76-2.04zM18.5 10h-2L12 22h2l1.12-3h4.75L21 22h2l-4.5-12zm-2.62 7l1.62-4.33L19.12 17h-3.24z" />
+          </svg>
+          Translate
+        </div>
+        <input type="checkbox" id="translate" />
+      </div>
+      <div>
+        <div>
+          <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="currentColor">
+            <path d="M0 0h24v24H0V0z" fill="none" />
+            <path
+              d="M20.5 3l-.16.03L15 5.1 9 3 3.36 4.9c-.21.07-.36.25-.36.48V20.5c0 .28.22.5.5.5l.16-.03L9 18.9l6 2.1 5.64-1.9c.21-.07.36-.25.36-.48V3.5c0-.28-.22-.5-.5-.5zM10 5.47l4 1.4v11.66l-4-1.4V5.47zm-5 .99l3-1.01v11.7l-3 1.16V6.46zm14 11.08l-3 1.01V6.86l3-1.16v11.84z" />
+          </svg>
+          Maps
+        </div>
+        <input type="checkbox" id="maps" />
+      </div>
+      <div>
+        <div>
+          <img src="../../../assets/images/wikipedia-icon.svg">
+          Wikipedia
+        </div>
+        <input type="checkbox" id="wikipedia" />
+      </div>
+      <div>
+        <div>
+          <!-- https://markentier.tech/posts/2020/10/medium-icon-svg/ -->
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1770 1000" fill="currentColor">
+            <circle cx="500" cy="500" r="500" />
+            <ellipse ry="475" rx="250" cy="501" cx="1296" />
+            <ellipse cx="1682" cy="502" rx="88" ry="424" />
+          </svg>
+          Medium
+        </div>
+        <input type="checkbox" id="medium" />
+      </div>
+      <div>
+        <div>
+          <img src="../../../assets/images/peertube-icon.svg">
+          Peertube
+        </div>
+        <input type="checkbox" id="peertube" />
+      </div>
+      <div>
+        <div>
+          <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="currentColor">
+            <path
+              d="M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM14 13v4h-4v-4H7l5-5 5 5h-3z" />
+          </svg>
+          Send Files
+        </div>
+        <input type="checkbox" id="sendTargets" />
+      </div>
     </div>
     <hr>
 
diff --git a/src/pages/options/youtube/youtube.js b/src/pages/options/youtube/youtube.js
index c6e6fb52..3fec42cc 100644
--- a/src/pages/options/youtube/youtube.js
+++ b/src/pages/options/youtube/youtube.js
@@ -97,12 +97,9 @@ enableYoutubeCustomSettingsElement.addEventListener("change",
 
 let volumeElement = document.getElementById("invidious-volume");
 let volumeValueElement = document.getElementById("volume-value");
-volumeElement.addEventListener("input",
-    () => {
-        youtubeHelper.setVolume(volumeElement.value);
-        volumeValueElement.textContent = `${volumeElement.value}%`;
-    }
-);
+
+volumeElement.addEventListener("input", () => volumeValueElement.textContent = `${volumeElement.value}%`);
+volumeElement.addEventListener("change", () => youtubeHelper.setVolume(volumeElement.value));
 
 let autoplayElement = document.getElementById("invidious-youtubeAutoplay");
 autoplayElement.addEventListener("change",
diff --git a/src/pages/stylesheets/styles.css b/src/pages/stylesheets/styles.css
index 999b5afd..a380def1 100644
--- a/src/pages/stylesheets/styles.css
+++ b/src/pages/stylesheets/styles.css
@@ -318,6 +318,19 @@ div.checklist div {
   display: flex;
 }
 
+div.checklist-popup div {
+  justify-content: space-between;
+  margin: 5px 15px;
+  padding: 5px 0;
+  max-width: 200px;
+  display: flex;
+  align-items: center;
+}
+
+div.checklist-popup div div {
+  margin: 0;
+}
+
 button.add {
   background-color: transparent;
   border: none;
@@ -332,9 +345,9 @@ div.disabled {
   background-color: rgb(39, 39, 39);
   position: absolute;
   top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
+  left: 0;
+  width: 100%;
+  height: 100%;
 }
 
 .light-theme.popup,