Readded medium custom domin names #94

4 files changed, 146 insertions, 27 deletions

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,