Improving code structure. Added libreddit settings #192

3 files changed, 239 insertions, 97 deletions

diff --git a/src/pages/options/reddit/reddit.html b/src/pages/options/reddit/reddit.html
index 80aa77c5..47c0b3b2 100644
--- a/src/pages/options/reddit/reddit.html
+++ b/src/pages/options/reddit/reddit.html
@@ -81,9 +81,93 @@
       <h4 data-localise="__MSG_bypassReddit__">Bypass "Open in Reddit"</h4>
       <input id="bypass-watch-on-reddit" type="checkbox">
     </div>
-    <hr>
     <div id="libreddit">
+      <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">
+      </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>
+        <div class="some-block option-block">
+          <h2>Content</h2>
+        </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>
       <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 36bb8a5f..9fb5589a 100644
--- a/src/pages/options/reddit/reddit.js
+++ b/src/pages/options/reddit/reddit.js
@@ -1,48 +1,56 @@
 import redditHelper from "../../../assets/javascripts/helpers/reddit.js";
 import commonHelper from "../../../assets/javascripts/helpers/common.js";
 
-let disableRedditElement = document.getElementById("disable-reddit");
-disableRedditElement.addEventListener("change",
-    (event) => redditHelper.setDisableReddit(!event.target.checked)
-);
 let libredditDivElement = document.getElementById("libreddit")
 let tedditDivElement = document.getElementById("teddit")
+let enableLibredditSettingsElement = document.getElementById("enable-libreddit-custom-settings");
+let customSettingsDivElement = document.getElementsByClassName("custom-settings");
 
-function changeFrontendsSettings(frontend) {
-    let frontendElement = document.getElementById("frontend");
-    if (frontend == 'libreddit') {
-        frontendElement.innerHTML = 'Frontend';
-        libredditDivElement.style.display = 'block';
-        tedditDivElement.style.display = 'none';
-    }
-    else if (frontend == 'teddit') {
-        frontendElement.innerHTML = 'Frontend';
-        libredditDivElement.style.display = 'none';
-        tedditDivElement.style.display = 'block';
-    }
-    else if (frontend == 'old') {
-        frontendElement.innerHTML = `Frontend: <span style="color:red;">This isn't a fully private frontend</span>`;
-        libredditDivElement.style.display = 'none';
-        tedditDivElement.style.display = 'none';
-    }
-}
+let disableRedditElement = document.getElementById("disable-reddit");
 let redditFrontendElement = document.getElementById("reddit-frontend");
-redditFrontendElement.addEventListener("change",
-    (event) => {
-        let frontend = event.target.options[redditFrontendElement.selectedIndex].value
-        redditHelper.setFrontend(frontend)
-        changeFrontendsSettings(frontend);
-    }
-);
-
 let protocolElement = document.getElementById("protocol")
-protocolElement.addEventListener("change",
-    (event) => {
-        let protocol = event.target.options[protocolElement.selectedIndex].value
-        redditHelper.setProtocol(protocol);
-        changeProtocolSettings(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,
+    });
+    init();
+})
+
+
+window.onblur = () => {
+    console.log('initting cookies')
+    redditHelper.initLibredditCookies();
+    redditHelper.initTedditCookies();
+}
 
 function changeProtocolSettings(protocol) {
     let normalLibredditDiv = libredditDivElement.getElementsByClassName("normal")[0];
@@ -62,77 +70,126 @@ 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");
+    if (frontend == 'libreddit') {
+        frontendElement.innerHTML = 'Frontend';
+        libredditDivElement.style.display = 'block';
+        tedditDivElement.style.display = 'none';
+    }
+    else if (frontend == 'teddit') {
+        frontendElement.innerHTML = 'Frontend';
+        libredditDivElement.style.display = 'none';
+        tedditDivElement.style.display = 'block';
+    }
+    else if (frontend == 'old') {
+        frontendElement.innerHTML = `Frontend: <span style="color:red;">This isn't a fully private frontend</span>`;
+        libredditDivElement.style.display = 'none';
+        tedditDivElement.style.display = 'none';
+    }
 }
+function init() {
+    redditHelper.init().then(() => {
+        browser.storage.local.get(
+            [
+                "disableReddit",
+                "bypassWatchOnReddit",
+                "redditProtocol",
+                "redditFrontend",
 
-let bypassWatchOnRedditElement = document.getElementById("bypass-watch-on-reddit")
-bypassWatchOnRedditElement.addEventListener("change",
-    event => redditHelper.setBypassWatchOnReddit(event.target.checked)
-);
+                "enableLibredditCustomSettings",
 
-redditHelper.init().then(() => {
-    disableRedditElement.checked = !redditHelper.getDisableReddit();
-    bypassWatchOnRedditElement.checked = redditHelper.getBypassWatchOnReddit();
+                "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);
 
-    let frontend = redditHelper.getFrontend();
-    redditFrontendElement.value = frontend;
-    changeFrontendsSettings(frontend);
+                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;
+            }
+        )
 
-    let protocol = redditHelper.getProtocol();
-    protocolElement.value = protocol;
-    changeProtocolSettings(protocol);
+        browser.storage.local.get("libredditLatency").then(r => {
+            commonHelper.processDefaultCustomInstances(
+                'libreddit',
+                'normal',
+                redditHelper,
+                document,
+                redditHelper.getLibredditNormalRedirectsChecks,
+                redditHelper.setLibredditNormalRedirectsChecks,
+                redditHelper.getLibredditNormalCustomRedirects,
+                redditHelper.setLibredditNormalCustomRedirects,
+                r.libredditLatency,
+            )
+        })
 
-    browser.storage.local.get("libredditLatency").then(r => {
         commonHelper.processDefaultCustomInstances(
             'libreddit',
-            'normal',
+            'tor',
             redditHelper,
             document,
-            redditHelper.getLibredditNormalRedirectsChecks,
-            redditHelper.setLibredditNormalRedirectsChecks,
-            redditHelper.getLibredditNormalCustomRedirects,
-            redditHelper.setLibredditNormalCustomRedirects,
-            r.libredditLatency,
+            redditHelper.getLibredditTorRedirectsChecks,
+            redditHelper.setLibredditTorRedirectsChecks,
+            redditHelper.getLibredditTorCustomRedirects,
+            redditHelper.setLibredditTorCustomRedirects
         )
-    })
 
-    commonHelper.processDefaultCustomInstances(
-        'libreddit',
-        'tor',
-        redditHelper,
-        document,
-        redditHelper.getLibredditTorRedirectsChecks,
-        redditHelper.setLibredditTorRedirectsChecks,
-        redditHelper.getLibredditTorCustomRedirects,
-        redditHelper.setLibredditTorCustomRedirects
-    )
+        browser.storage.local.get("tedditLatency").then(r => {
+            commonHelper.processDefaultCustomInstances(
+                'teddit',
+                'normal',
+                redditHelper,
+                document,
+                redditHelper.getTedditNormalRedirectsChecks,
+                redditHelper.setTedditNormalRedirectsChecks,
+                redditHelper.getTedditNormalCustomRedirects,
+                redditHelper.setTedditNormalCustomRedirects,
+                r.tedditLatency,
+            );
+        })
 
-    browser.storage.local.get("tedditLatency").then(r => {
         commonHelper.processDefaultCustomInstances(
             'teddit',
-            'normal',
+            'tor',
             redditHelper,
             document,
-            redditHelper.getTedditNormalRedirectsChecks,
-            redditHelper.setTedditNormalRedirectsChecks,
-            redditHelper.getTedditNormalCustomRedirects,
-            redditHelper.setTedditNormalCustomRedirects,
-            r.tedditLatency,
+            redditHelper.getTedditTorRedirectsChecks,
+            redditHelper.setTedditTorRedirectsChecks,
+            redditHelper.getTedditTorCustomRedirects,
+            redditHelper.setTedditTorCustomRedirects
         );
-    })
-
-    commonHelper.processDefaultCustomInstances(
-        'teddit',
-        'tor',
-        redditHelper,
-        document,
-        redditHelper.getTedditTorRedirectsChecks,
-        redditHelper.setTedditTorRedirectsChecks,
-        redditHelper.getTedditTorCustomRedirects,
-        redditHelper.setTedditTorCustomRedirects
-    );
-
-})
 
+    })
+}
+init();
 
 let latencyLibredditElement = document.getElementById("latency-libreddit");
 let latencyLibredditLabel = document.getElementById("latency-libreddit-label");
diff --git a/src/pages/options/twitter/twitter.js b/src/pages/options/twitter/twitter.js
index 4cb31643..bd611497 100644
--- a/src/pages/options/twitter/twitter.js
+++ b/src/pages/options/twitter/twitter.js
@@ -23,14 +23,13 @@ let muteVideos = document.getElementById('nitter').getElementsByClassName('muteV
 let autoplayGifs = document.getElementById('nitter').getElementsByClassName('autoplayGifs')[0];
 
 let nitterElement = document.getElementById("nitter");
-document.addEventListener("change", async _ => {
-    twitterHelper.setDisable(!disableTwitterElement.checked)
-    twitterHelper.setProtocol(protocolElement.value);
-    twitterHelper.setEnableCustomSettings(enableYoutubeCustomSettingsElement.checked);
-    twitterHelper.setBypassWatchOnTwitter(bypassWatchOnTwitterElement.checked);
-    changeProtocolSettings(protocolElement.value);
+document.addEventListener("change", async () => {
+    await browser.storage.local.set({
+        disableTwitter: !disableTwitterElement.checked,
+        twitterProtocol: protocolElement.value,
+        enableTwitterCustomSettings: enableYoutubeCustomSettingsElement.checked,
+        bypassWatchOnTwitter: bypassWatchOnTwitterElement.checked,
 
-    await twitterHelper.setSettings({
         // Display
         nitterTheme: theme.value,
         nitterInfiniteScroll: infiniteScroll.checked,
@@ -121,6 +120,8 @@ function init() {
 }
 init();
 
+window.onblur = twitterHelper.initNitterCookies;
+
 let latencyElement = document.getElementById("latency");
 let latencyLabel = document.getElementById("latency-label");
 latencyElement.addEventListener("click",