Reorganized pug files. Added Unify settings to libreddit #234

27 files changed, 110 insertions, 174 deletions

diff --git a/src/pages/background/background.js b/src/pages/background/background.js
index 31412117..7bf960c9 100644
--- a/src/pages/background/background.js
+++ b/src/pages/background/background.js
@@ -173,23 +173,14 @@ async function redirectOfflineInstance(url, tabId) {
 
   newUrl = youtubeHelper.switchInstance(url);
   if (!newUrl) newUrl = twitterHelper.switchInstance(url);
-
   if (!newUrl) newUrl = instagramHelper.switchInstance(url);
-
   if (!newUrl) newUrl = redditHelper.switchInstance(url);
-
   if (!newUrl) newUrl = searchHelper.switchInstance(url);
-
   if (!newUrl) newUrl = translateHelper.switchInstance(url);
-
   if (!newUrl) newUrl = mediumHelper.switchInstance(url);
-
   if (!newUrl) newUrl = imgurHelper.switchInstance(url);
-
   if (!newUrl) newUrl = wikipediaHelper.switchInstance(url);
-
   if (!newUrl) newUrl = peertubeHelper.switchInstance(url);
-
   if (!newUrl) newUrl = lbryHelper.switchInstance(url);
 
   if (newUrl) {
diff --git a/pug/options/general/general.pug b/src/pages/options/general/general.pug
index b5b46d5f..b5b46d5f 100644
--- a/pug/options/general/general.pug
+++ b/src/pages/options/general/general.pug
diff --git a/pug/options/imgur/imgur.pug b/src/pages/options/imgur/imgur.pug
index f195ca66..f195ca66 100644
--- a/pug/options/imgur/imgur.pug
+++ b/src/pages/options/imgur/imgur.pug
diff --git a/pug/options/instagram/instagram.pug b/src/pages/options/instagram/instagram.pug
index 6e1ef19a..6e1ef19a 100644
--- a/pug/options/instagram/instagram.pug
+++ b/src/pages/options/instagram/instagram.pug
diff --git a/pug/options/lbry/lbry.pug b/src/pages/options/lbry/lbry.pug
index aca0d489..aca0d489 100644
--- a/pug/options/lbry/lbry.pug
+++ b/src/pages/options/lbry/lbry.pug
diff --git a/pug/options/maps/maps.pug b/src/pages/options/maps/maps.pug
index 2da94a43..2da94a43 100644
--- a/pug/options/maps/maps.pug
+++ b/src/pages/options/maps/maps.pug
diff --git a/pug/options/medium/medium.pug b/src/pages/options/medium/medium.pug
index f5b698d2..f5b698d2 100644
--- a/pug/options/medium/medium.pug
+++ b/src/pages/options/medium/medium.pug
diff --git a/pug/options/peertube/peertube.pug b/src/pages/options/peertube/peertube.pug
index d9b25bbc..d9b25bbc 100644
--- a/pug/options/peertube/peertube.pug
+++ b/src/pages/options/peertube/peertube.pug
diff --git a/src/pages/options/reddit/reddit.html b/src/pages/options/reddit/reddit.html
index 6fa9090d..e3fc40d9 100644
--- a/src/pages/options/reddit/reddit.html
+++ b/src/pages/options/reddit/reddit.html
@@ -78,92 +78,22 @@
       <input id="bypass-watch-on-reddit" type="checkbox">
     </div>
     <div id="libreddit">
+      <hr>
       <div class="some-block option-block">
-        <h4 data-localise="__MSG_enableCustomSettings__">Enable Custom Settings (will use cookies)</h4>
-        <input id="enable-libreddit-custom-settings" type="checkbox">
+        <h4>Unify cookies across selected instances</h4>
       </div>
-      <hr>
-      <div class="custom-settings"> 
-        <div class="some-block option-block">
-          <h2>Appearance</h2>
-        </div>
-        <div class="some-block option-block">
-          <h4 data-localise="__MSG_theme__">Theme</h4>
-          <select class="theme">
-            <option value="system">System</option>
-            <option value="light">Light</option>
-            <option value="dark">Dark</option>
-            <option value="black">Black</option>
-            <option value="dracula">Dracula</option>
-            <option value="nord">Nord</option>
-            <option value="laserwave">Laserwave</option>
-            <option value="violet">Violet</option>
-            <option value="gold">Gold</option>
-          </select>
-        </div>
-        <div class="some-block option-block">
-          <h2>Interface</h2>
-        </div>
-        <div class="some-block option-block">
-          <h4 data-localise="__MSG_frontPage__">Front page</h4>
-          <select class="front_page">
-            <option value="default">Default</option>
-            <option value="popular">Popular</option>
-            <option value="all">All</option>
-          </select>
-        </div>
-        <div class="some-block option-block">
-          <h4 data-localise="__MSG_frontLayout__">Front Layout</h4>
-          <select class="layout">
-            <option value="card">Card</option>
-            <option value="clean">Clean</option>
-            <option value="compact">Compact</option>
-          </select>
-        </div>
-        <div class="some-block option-block">
-          <h4 data-localise="__MSG_wideUI__">Wide UI</h4>
-          <input class="wide" type="checkbox">
-        </div>
+      <form>
         <div class="some-block option-block">
-          <h2>Content</h2>
+          <input type="url" placeholder="https://libreddit.com">
+          <button class="add" type="submit">
+            <svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="currentColor">
+              <rect fill="none" height="24" width="24"></rect>
+              <path d="M18,2H9C7.9,2,7,2.9,7,4v12c0,1.1,0.9,2,2,2h9c1.1,0,2-0.9,2-2V4C20,2.9,19.1,2,18,2z M18,16H9V4h9V16z M3,15v-2h2v2H3z M3,9.5h2v2H3V9.5z M10,20h2v2h-2V20z M3,18.5v-2h2v2H3z M5,22c-1.1,0-2-0.9-2-2h2V22z M8.5,22h-2v-2h2V22z M13.5,22L13.5,22l0-2h2 v0C15.5,21.1,14.6,22,13.5,22z M5,6L5,6l0,2H3v0C3,6.9,3.9,6,5,6z"></path>
+            </svg>
+          </button>
         </div>
-        <div class="some-block option-block">
-          <h4 data-localise="__MSG_defaultSubredditPostSort__">Default subreddit post sort</h4>
-          <select class="post_sort">
-            <option value="hot">Hot</option>
-            <option value="new">New</option>
-            <option value="top">Top</option>
-            <option value="rising">Rising</option>
-            <option value="controversial">Controversial</option>
-          </select>
-        </div>
-        <div class="some-block option-block">
-          <h4 data-localise="__MSG_defaultCommentSort__">Default comment sort</h4>
-          <select class="comment_sort">
-            <option value="confidence">Confidence</option>
-            <option value="top">Top</option>
-            <option value="new">New</option>
-            <option value="controversial">Controversial</option>
-            <option value="old">Old</option>
-          </select>
-        </div>
-        <div class="some-block option-block">
-          <h4 data-localise="__MSG_showNsfwPosts__">Show NSFW posts</h4>
-          <input class="show_nsfw" type="checkbox">
-        </div>
-        <div class="some-block option-block">
-          <h4 data-localise="__MSG_autoplayVideos__">Autoplay videos</h4>
-          <input class="autoplay_videos" type="checkbox">
-        </div>
-        <div class="some-block option-block">
-          <h4 data-localise="__MSG_useHlsForVideos__">Use HLS for videos</h4>
-          <input class="use_hls" type="checkbox">
-        </div>
-        <div class="some-block option-block">
-          <h4 data-localise="__MSG_hideNotificationAboutPossibleHlsUsage__">Hide notification about possible HLS usage</h4>
-          <input class="hide_hls_notification" type="checkbox">
-        </div>
-      </div>
+      </form>
+      <hr>
       <div class="normal">
                 <div class="some-block option-block">
                   <h4 data-localise="__MSG_defaultInstances__">Default Instances</h4>
diff --git a/src/pages/options/reddit/reddit.js b/src/pages/options/reddit/reddit.js
index 475f8b61..65ad284c 100644
--- a/src/pages/options/reddit/reddit.js
+++ b/src/pages/options/reddit/reddit.js
@@ -3,49 +3,31 @@ import commonHelper from "../../../assets/javascripts/helpers/common.js";
 
 let libredditDivElement = document.getElementById("libreddit")
 let tedditDivElement = document.getElementById("teddit")
-let enableLibredditSettingsElement = document.getElementById("enable-libreddit-custom-settings");
-let customSettingsDivElement = document.getElementsByClassName("custom-settings");
 
 let disableRedditElement = document.getElementById("disable-reddit");
 let redditFrontendElement = document.getElementById("reddit-frontend");
 let protocolElement = document.getElementById("protocol")
 let bypassWatchOnRedditElement = document.getElementById("bypass-watch-on-reddit")
 
-let theme = document.getElementById('libreddit').getElementsByClassName('theme')[0];
-let front_page = document.getElementById('libreddit').getElementsByClassName('front_page')[0];
-let layout = document.getElementById('libreddit').getElementsByClassName('layout')[0];
-let wide = document.getElementById('libreddit').getElementsByClassName('wide')[0];
-let post_sort = document.getElementById('libreddit').getElementsByClassName('post_sort')[0];
-let comment_sort = document.getElementById('libreddit').getElementsByClassName('comment_sort')[0];
-let show_nsfw = document.getElementById('libreddit').getElementsByClassName('show_nsfw')[0];
-let autoplay_videos = document.getElementById('libreddit').getElementsByClassName('autoplay_videos')[0];
-let use_hls = document.getElementById('libreddit').getElementsByClassName('use_hls')[0];
-let hide_hls_notification = document.getElementById('libreddit').getElementsByClassName('hide_hls_notification')[0];
-
 document.addEventListener("change", async () => {
     await browser.storage.local.set({
         disableReddit: !disableRedditElement.checked,
         bypassWatchOnReddit: bypassWatchOnRedditElement.checked,
         redditProtocol: protocolElement.value,
         redditFrontend: redditFrontendElement.value,
-
-        enableLibredditCustomSettings: enableLibredditSettingsElement.checked,
-
-        redditTheme: theme.value,
-        redditFrontPage: front_page.value,
-        redditLayout: layout.value,
-        redditWide: wide.checked,
-        redditPostSort: post_sort.value,
-        redditCommentSort: comment_sort.value,
-        redditShowNsfw: show_nsfw.checked,
-        redditAutoplayVideos: autoplay_videos.checked,
-        redditUseHls: use_hls.checked,
-        redditHideHlsNotification: hide_hls_notification.checked,
     });
     changeFrontendsSettings(redditFrontendElement.value);
     changeProtocolSettings(protocolElement.value);
 })
 
+const libredditForm = libredditDivElement.getElementsByTagName('form')[0];
+const libredditCookies = libredditForm.getElementsByTagName('input')[0];
+libredditForm.addEventListener('submit', async event => {
+    event.preventDefault();
+    const url = new URL(libredditCookies.value);
+    redditHelper.initLibredditCookies(url);
+})
+
 function changeProtocolSettings(protocol) {
     let normalLibredditDiv = libredditDivElement.getElementsByClassName("normal")[0];
     let torLibredditDiv = libredditDivElement.getElementsByClassName("tor")[0];
@@ -64,10 +46,6 @@ function changeProtocolSettings(protocol) {
         torTedditDiv.style.display = 'block';
         torLibredditDiv.style.display = 'block';
     }
-    if (enableLibredditSettingsElement.checked)
-        for (const item of customSettingsDivElement) item.style.display = 'block';
-    else
-        for (const item of customSettingsDivElement) item.style.display = 'none';
 }
 function changeFrontendsSettings(frontend) {
     let frontendElement = document.getElementById("frontend");
@@ -96,37 +74,14 @@ browser.storage.local.get(
         "redditFrontend",
 
         "enableLibredditCustomSettings",
-
-        "redditTheme",
-        "redditFrontPage",
-        "redditLayout",
-        "redditWide",
-        "redditPostSort",
-        "redditCommentSort",
-        "redditShowNsfw",
-        "redditAutoplayVideos",
-        "redditUseHls",
-        "redditHideHlsNotification",
     ],
     r => {
         disableRedditElement.checked = !r.disableReddit
         bypassWatchOnRedditElement.checked = r.bypassWatchOnReddit
         protocolElement.value = r.redditProtocol
         redditFrontendElement.value = r.redditFrontend
-        enableLibredditSettingsElement.checked = r.enableLibredditCustomSettings
         changeFrontendsSettings(r.redditFrontend);
         changeProtocolSettings(r.redditProtocol);
-
-        theme.value = r.redditTheme;
-        front_page.value = r.redditFrontPage;
-        layout.value = r.redditLayout;
-        wide.checked = r.redditWide;
-        post_sort.value = r.redditPostSort;
-        comment_sort.value = r.redditCommentSort;
-        show_nsfw.checked = r.redditShowNsfw;
-        autoplay_videos.checked = r.redditAutoplayVideos;
-        use_hls.checked = r.redditUseHls;
-        hide_hls_notification.checked = r.redditHideHlsNotification;
     }
 )
 
@@ -172,9 +127,4 @@ latencyTedditElement.addEventListener("click",
             latencyTedditElement.removeEventListener("click", reloadWindow);
         });
     }
-);
-
-window.onblur = () => {
-    redditHelper.initLibredditCookies();
-    redditHelper.initTedditCookies();
-}
\ No newline at end of file
+);
\ No newline at end of file
diff --git a/src/pages/options/reddit/reddit.pug b/src/pages/options/reddit/reddit.pug
new file mode 100644
index 00000000..7262a7f4
--- /dev/null
+++ b/src/pages/options/reddit/reddit.pug
@@ -0,0 +1,65 @@
+doctype html
+html(lang="en")
+    include ../../widgets/head.pug
+        title General
+script(type="module" src="../../../assets/javascripts/localise.js")
+body.option(dir="auto")
+    include ../../widgets/links.pug
+    +links('reddit')
+
+    section.option-block
+        .some-block.option-block
+            h4(data-localise="__MSG_enable__") Enable
+            input#disable-reddit(type="checkbox")
+
+        .some-block.option-block
+            h4#frontend(data-localise="__MSG_frontend__") Frontend
+            select#reddit-frontend
+                option(value="libreddit") Libreddit
+                option(value="teddit") Teddit
+
+        .some-block.option-block
+            h4(data-localise="__MSG_protocol__") Protocol
+            select#protocol
+                option(value="normal" data-localise="__MSG_normal__") Normal
+                option(value="tor" data-localise="__MSG_tor__") Tor
+
+        .some-block.option-block
+            h4(data-localise="__MSG_bypassReddit__") Bypass "Open in Reddit"
+            input#bypass-watch-on-reddit(type="checkbox")
+
+        #libreddit
+            hr
+            .some-block.option-block
+                h4 Unify cookies across selected instances
+            form
+                .some-block.option-block
+                    input(type="url" placeholder="https://libreddit.com")
+                    button.add(type="submit")
+                        svg(xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="currentColor")
+                            rect(fill="none" height="24" width="24")
+                            path(d="M18,2H9C7.9,2,7,2.9,7,4v12c0,1.1,0.9,2,2,2h9c1.1,0,2-0.9,2-2V4C20,2.9,19.1,2,18,2z M18,16H9V4h9V16z M3,15v-2h2v2H3z M3,9.5h2v2H3V9.5z M10,20h2v2h-2V20z M3,18.5v-2h2v2H3z M5,22c-1.1,0-2-0.9-2-2h2V22z M8.5,22h-2v-2h2V22z M13.5,22L13.5,22l0-2h2 v0C15.5,21.1,14.6,22,13.5,22z M5,6L5,6l0,2H3v0C3,6.9,3.9,6,5,6z")
+
+            hr
+
+            .normal
+                include ../../widgets/instances.pug
+                +instances('https://libreddit.com')
+                include ../../widgets/latency.pug
+                +latency('libreddit')
+            .tor
+                include ../../widgets/instances.pug
+                +instances('https://libreddit.onion')
+
+        #teddit
+            hr
+            .normal
+                include ../../widgets/instances.pug
+                +instances('https://teddit.com')
+                +latency('teddit')
+            .tor
+                include ../../widgets/instances.pug
+                +instances('https://teddit.onion')
+
+    script(type="module" src="../init.js")
+    script(type="module" src="./reddit.js")
\ No newline at end of file
diff --git a/pug/options/search/search.pug b/src/pages/options/search/search.pug
index 78825611..78825611 100644
--- a/pug/options/search/search.pug
+++ b/src/pages/options/search/search.pug
diff --git a/pug/options/sendTargets/sendTargets.pug b/src/pages/options/sendTargets/sendTargets.pug
index 3017fa87..3017fa87 100644
--- a/pug/options/sendTargets/sendTargets.pug
+++ b/src/pages/options/sendTargets/sendTargets.pug
diff --git a/pug/options/tiktok/tiktok.pug b/src/pages/options/tiktok/tiktok.pug
index 31ae18df..31ae18df 100644
--- a/pug/options/tiktok/tiktok.pug
+++ b/src/pages/options/tiktok/tiktok.pug
diff --git a/pug/options/translate/translate.pug b/src/pages/options/translate/translate.pug
index f6a192c4..f6a192c4 100644
--- a/pug/options/translate/translate.pug
+++ b/src/pages/options/translate/translate.pug
diff --git a/pug/options/twitter/twitter.pug b/src/pages/options/twitter/twitter.pug
index 230aefd1..230aefd1 100644
--- a/pug/options/twitter/twitter.pug
+++ b/src/pages/options/twitter/twitter.pug
diff --git a/pug/options/wikipedia/wikipedia.pug b/src/pages/options/wikipedia/wikipedia.pug
index 54ca8730..54ca8730 100644
--- a/pug/options/wikipedia/wikipedia.pug
+++ b/src/pages/options/wikipedia/wikipedia.pug
diff --git a/pug/options/youtube/youtube.pug b/src/pages/options/youtube/youtube.pug
index be88aac8..be88aac8 100644
--- a/pug/options/youtube/youtube.pug
+++ b/src/pages/options/youtube/youtube.pug
diff --git a/pug/options/youtubeMusic/youtubeMusic.pug b/src/pages/options/youtubeMusic/youtubeMusic.pug
index 10d2deef..10d2deef 100644
--- a/pug/options/youtubeMusic/youtubeMusic.pug
+++ b/src/pages/options/youtubeMusic/youtubeMusic.pug
diff --git a/src/pages/popup/popup.js b/src/pages/popup/popup.js
index f6dab091..e3f52baf 100644
--- a/src/pages/popup/popup.js
+++ b/src/pages/popup/popup.js
@@ -104,7 +104,7 @@ document.getElementById("more-options").addEventListener("click",
 );
 
 function switchInstance() {
-  browser.tabs.query({ active: true, currentWindow: true }, function (tabs) {
+  browser.tabs.query({ active: true, currentWindow: true }, async tabs => {
     let currTab = tabs[0];
     if (currTab) {
       let url = currTab.url;
@@ -113,29 +113,18 @@ function switchInstance() {
       catch (_) { return false; }
       let newUrl;
 
-      newUrl = youtubeHelper.switchInstance(tabUrl);
-
-      if (!newUrl) newUrl = twitterHelper.switchInstance(tabUrl);
-
-      if (!newUrl) newUrl = instagramHelper.switchInstance(tabUrl);
-
-      if (!newUrl) newUrl = redditHelper.switchInstance(tabUrl);
-
-      if (!newUrl) newUrl = searchHelper.switchInstance(tabUrl);
-
-      if (!newUrl) newUrl = translateHelper.switchInstance(tabUrl);
-
-      if (!newUrl) newUrl = mediumHelper.switchInstance(tabUrl);
-
-      if (!newUrl) newUrl = sendTargetsHelper.switchInstance(tabUrl);
-
-      if (!newUrl) newUrl = peertubeHelper.switchInstance(tabUrl);
-
-      if (!newUrl) newUrl = lbryHelper.switchInstance(tabUrl);
-
-      if (!newUrl) newUrl = imgurHelper.switchInstance(tabUrl);
-
-      if (!newUrl) newUrl = wikipediaHelper.switchInstance(tabUrl);
+      // newUrl = youtubeHelper.switchInstance(tabUrl);
+      // if (!newUrl) newUrl = twitterHelper.switchInstance(tabUrl);
+      // if (!newUrl) newUrl = instagramHelper.switchInstance(tabUrl);
+      if (!newUrl) newUrl = await redditHelper.switchInstance(tabUrl);
+      // if (!newUrl) newUrl = searchHelper.switchInstance(tabUrl);
+      // if (!newUrl) newUrl = translateHelper.switchInstance(tabUrl);
+      // if (!newUrl) newUrl = mediumHelper.switchInstance(tabUrl);
+      // if (!newUrl) newUrl = sendTargetsHelper.switchInstance(tabUrl);
+      // if (!newUrl) newUrl = peertubeHelper.switchInstance(tabUrl);
+      // if (!newUrl) newUrl = lbryHelper.switchInstance(tabUrl);
+      // if (!newUrl) newUrl = imgurHelper.switchInstance(tabUrl);
+      // if (!newUrl) newUrl = wikipediaHelper.switchInstance(tabUrl);
 
       if (newUrl) {
         browser.tabs.update({ url: newUrl });
diff --git a/src/pages/stylesheets/styles.css b/src/pages/stylesheets/styles.css
index 8b2718cd..c1c2a53f 100644
--- a/src/pages/stylesheets/styles.css
+++ b/src/pages/stylesheets/styles.css
@@ -444,4 +444,15 @@ section.general div {
 
 #customize-popup {
   width: 250px;
+}
+
+button {
+  background-color:transparent;
+  color: var(--text);
+  border: none;
+  padding: 10px 5px;
+  text-decoration: none;
+  display: inline-block;
+  cursor: pointer;
+  border-radius: 5px;
 }
\ No newline at end of file
diff --git a/pug/widgets/captions_options.pug b/src/pages/widgets/captions_options.pug
index 51d18d62..51d18d62 100644
--- a/pug/widgets/captions_options.pug
+++ b/src/pages/widgets/captions_options.pug
diff --git a/pug/widgets/from-to.pug b/src/pages/widgets/from-to.pug
index 9140e094..9140e094 100644
--- a/pug/widgets/from-to.pug
+++ b/src/pages/widgets/from-to.pug
diff --git a/pug/widgets/head.pug b/src/pages/widgets/head.pug
index 53de42d3..53de42d3 100644
--- a/pug/widgets/head.pug
+++ b/src/pages/widgets/head.pug
diff --git a/pug/widgets/instances.pug b/src/pages/widgets/instances.pug
index 950bd46b..950bd46b 100644
--- a/pug/widgets/instances.pug
+++ b/src/pages/widgets/instances.pug
diff --git a/pug/widgets/latency.pug b/src/pages/widgets/latency.pug
index 0069ca74..0069ca74 100644
--- a/pug/widgets/latency.pug
+++ b/src/pages/widgets/latency.pug
diff --git a/pug/widgets/links.pug b/src/pages/widgets/links.pug
index 8daf48ba..8daf48ba 100644
--- a/pug/widgets/links.pug
+++ b/src/pages/widgets/links.pug