Restructuring Settings Structure

2 files changed, 151 insertions, 81 deletions

diff --git a/src/pages/options/twitter/twitter.html b/src/pages/options/twitter/twitter.html
index 980fd557..d017ba78 100644
--- a/src/pages/options/twitter/twitter.html
+++ b/src/pages/options/twitter/twitter.html
@@ -149,84 +149,154 @@
       <input id="bypass-watch-on-twitter" type="checkbox" checked />
     </div>
 
-    <hr>
-
-    <div class="custom-settings">
-      <div class="some-block option-block">
-        <h4 data-localise="__MSG_theme__">Theme</h4>
-        <select name="theme">
-          <option value="Auto">Auto</option>
-          <option value="Auto (Twitter)">Auto (Twitter)</option>
-          <option value="Auto (Twitter)">Auto (Twitter)</option>
-          <option value="Black">Black</option>
-          <option value="Mastodon">Mastodon</option>
-          <option value="Nitter">Nitter</option>
-          <option value="Pleroma">Pleroma</option>
-          <option value="Twitter">Twitter</option>
-          <option value="Twitter Dark" selected="">Twitter Dark</option>
-        </select>
-      </div>
+    <div class="some-block option-block">
+      <h4 data-localise="__MSG_enableCustomNitter__">Enable Custom Settings (will use cookies)</h4>
+      <input id="enable-twitter-custom-settings" type="checkbox" />
     </div>
 
+    <div id="nitter">
 
-    <div class="some-block option-block">
-      <h4 data-localise="__MSG_infiniteScroll__">Infinite scrolling (experimental, requires JavaScript)</h4>
-      <input id="infiniteScroll" type="checkbox" />
-    </div>
+      <div class="custom-settings">
 
-    <div class="some-block option-block">
-      <h4 data-localise="__MSG_stickyProfile__">Make profile sidebar stick to top</h4>
-      <input id="stickyProfile" type="checkbox" />
-    </div>
+        <hr>
+        <div class="some-block option-block">
+          <h2>Display</h2>
+        </div>
 
-    <hr>
+        <div class="some-block option-block">
+          <h4 data-localise="__MSG_theme__">Theme</h4>
+          <select name="theme">
+            <option value="Auto">Auto</option>
+            <option value="Auto (Twitter)">Auto (Twitter)</option>
+            <option value="Auto (Twitter)">Auto (Twitter)</option>
+            <option value="Black">Black</option>
+            <option value="Mastodon">Mastodon</option>
+            <option value="Nitter">Nitter</option>
+            <option value="Pleroma">Pleroma</option>
+            <option value="Twitter">Twitter</option>
+            <option value="Twitter Dark" selected="">Twitter Dark</option>
+          </select>
+        </div>
 
-    <div id="normal">
+        <div class="some-block option-block">
+          <h4 data-localise="__MSG_infiniteScroll__">Infinite scrolling (experimental, requires JavaScript)</h4>
+          <input class="infiniteScroll" type="checkbox" />
+        </div>
 
-      <div class="some-block option-block">
-        <h4 data-localise="__MSG_defaultInstances__">Default Instances</h4>
-      </div>
-      <div class="checklist" id="nitter-normal-checklist"></div>
-      <hr>
-      <div class="some-block option-block">
-        <h4 data-localise="__MSG_customInstances__">Custom Instances</h4>
-      </div>
-      <form id="custom-nitter-normal-instance-form">
         <div class="some-block option-block">
-          <input id="nitter-normal-custom-instance" placeholder="https://nitter.com" type="url" />
-          <button type="submit" class="add" id="nitter-normal-add-instance">
-            <svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px" fill="currentColor">
-              <path d="M0 0h24v24H0V0z" fill="none" />
-              <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" />
-            </svg>
-          </button>
+          <h4 data-localise="__MSG_stickyProfile__">Make profile sidebar stick to top</h4>
+          <input class="stickyProfile" type="checkbox" />
         </div>
-      </form>
-      <div class="checklist" id="nitter-normal-custom-checklist"></div>
 
-    </div>
+        <div class="some-block option-block">
+          <h4 data-localise="__MSG_bidiSupport__">Support bidirectional text (makes clicking on tweets harder)</h4>
+          <input class="bidiSupport" type="checkbox" />
+        </div>
+
+        <div class="some-block option-block">
+          <h4 data-localise="__MSG_hideTweetStats__">Hide tweet stats (replies, retweets, likes)</h4>
+          <input class="hideTweetStats" type="checkbox" />
+        </div>
+
+        <div class="some-block option-block">
+          <h4 data-localise="__MSG_hideBanner__">Hide profile banner</h4>
+          <input class="hideBanner" type="checkbox" />
+        </div>
+
+        <div class="some-block option-block">
+          <h4 data-localise="__MSG_hidePins__">Hide pinned tweets</h4>
+          <input class="hidePins" type="checkbox" />
+        </div>
+
+        <div class="some-block option-block">
+          <h4 data-localise="__MSG_hideReplies__">Hide tweet replies</h4>
+          <input class="hideReplies" type="checkbox" />
+        </div>
+
+        <div class="some-block option-block">
+          <h4 data-localise="__MSG_squareAvatars__">Square profile pictures</h4>
+          <input class="squareAvatars" type="checkbox" />
+        </div>
+
+        <hr>
+
+        <div class="some-block option-block">
+          <h2>Media</h2>
+        </div>
+
+        <div class="some-block option-block">
+          <h4 data-localise="__MSG_mp4Playback__">Enable mp4 video playback (only for gifs)</h4>
+          <input class="mp4Playback" type="checkbox" />
+        </div>
+
+        <div class="some-block option-block">
+          <h4 data-localise="__MSG_hlsPlayback__">Enable hls video streaming (requires JavaScript)</h4>
+          <input class="hlsPlayback" type="checkbox" />
+        </div>
+
+        <div class="some-block option-block">
+          <h4 data-localise="__MSG_proxyVideos__">Proxy video streaming through the server (might be slow)</h4>
+          <input class="proxyVideos" type="checkbox" />
+        </div>
+
+        <div class="some-block option-block">
+          <h4 data-localise="__MSG_autoplayGifs__">Autoplay gifs</h4>
+          <input class="autoplayGifs" type="checkbox" />
+        </div>
 
-    <div id="tor">
-      <div class="some-block option-block">
-        <h4 data-localise="__MSG_defaultInstances__">Default Tor Instances</h4>
       </div>
-      <div class="checklist" id="nitter-tor-checklist"></div>
       <hr>
-      <div class="some-block option-block">
-        <h4 data-localise="__MSG_customInstances__">Custom Instances</h4>
+
+      <div class="normal">
+
+        <div class="some-block option-block">
+          <h4 data-localise="__MSG_defaultInstances__">Default Instances</h4>
+        </div>
+        <div class="checklist checklist"></div>
+        <hr>
+        <div class="some-block option-block">
+          <h4 data-localise="__MSG_customInstances__">Custom Instances</h4>
+        </div>
+        <form class="custom-instance-form">
+          <div class="some-block option-block">
+            <input class="custom-instance" placeholder="https://nitter.com" type="url" />
+            <button type="submit" class="add add-instance">
+              <svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px"
+                fill="currentColor">
+                <path d="M0 0h24v24H0V0z" fill="none" />
+                <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" />
+              </svg>
+            </button>
+          </div>
+        </form>
+        <div class="checklist custom-checklist"></div>
+
       </div>
-      <form id="custom-nitter-tor-instance-form">
+
+      <div class="tor">
         <div class="some-block option-block">
-          <input id="nitter-tor-custom-instance" placeholder="https://nitter.com" type="url" />
-          <button type="submit" class="add" id="nitter-tor-add-instance">
-            <svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px" fill="currentColor">
-              <path d="M0 0h24v24H0V0z" fill="none" />
-              <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" />
-            </svg>
-          </button>
+          <h4 data-localise="__MSG_defaultInstances__">Default Tor Instances</h4>
         </div>
-      </form>
-      <div class="checklist" id="nitter-tor-custom-checklist"></div>
+        <div class="checklist checklist"></div>
+        <hr>
+        <div class="some-block option-block">
+          <h4 data-localise="__MSG_customInstances__">Custom Instances</h4>
+        </div>
+        <form class="custom-instance-form">
+          <div class="some-block option-block">
+            <input class="custom-instance" placeholder="https://nitter.com" type="url" />
+            <button type="submit" class="add add-instance">
+              <svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px"
+                fill="currentColor">
+                <path d="M0 0h24v24H0V0z" fill="none" />
+                <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" />
+              </svg>
+            </button>
+          </div>
+        </form>
+        <div class="checklist custom-checklist"></div>
+      </div>
+
     </div>
 
   </section>
diff --git a/src/pages/options/twitter/twitter.js b/src/pages/options/twitter/twitter.js
index 2d86d9a8..c6d7ea16 100644
--- a/src/pages/options/twitter/twitter.js
+++ b/src/pages/options/twitter/twitter.js
@@ -2,23 +2,23 @@ import twitterHelper from "../../../assets/javascripts/helpers/twitter.js";
 import commonHelper from "../../../assets/javascripts/helpers/common.js";
 
 let disableTwitterElement = document.getElementById("disable-nitter");
-disableTwitterElement.addEventListener("change",
-    (event) => twitterHelper.setDisable(!event.target.checked)
-);
-
-let protocolElement = document.getElementById("protocol")
-protocolElement.addEventListener("change",
-    (event) => {
-        let protocol = event.target.options[protocolElement.selectedIndex].value
-        twitterHelper.setProtocol(protocol);
-        changeProtocolSettings(protocol);
-    }
-);
+let customSettingsDivElement = document.getElementsByClassName("custom-settings");
+let protocolElement = document.getElementById("protocol");
+let enableYoutubeCustomSettingsElement = document.getElementById("enable-twitter-custom-settings");
+let bypassWatchOnTwitterElement = document.getElementById("bypass-watch-on-twitter");
 
+let nitterElement = document.getElementById("nitter");
+document.addEventListener("change", _ => {
+    twitterHelper.setDisable(!disableTwitterElement.checked)
+    twitterHelper.setProtocol(protocolElement.value);
+    twitterHelper.setEnableCustomSettings(enableYoutubeCustomSettingsElement.checked);
+    twitterHelper.setBypassWatchOnTwitter(bypassWatchOnTwitterElement.checked);
+    changeProtocolSettings(protocolElement.value);
+})
 
 function changeProtocolSettings(protocol) {
-    let normalDiv = document.getElementById("normal");
-    let torDiv = document.getElementById("tor");
+    let normalDiv = nitterElement.getElementsByClassName("normal")[0];
+    let torDiv = nitterElement.getElementsByClassName("tor")[0];
     if (protocol == 'normal') {
         normalDiv.style.display = 'block';
         torDiv.style.display = 'none';
@@ -27,15 +27,15 @@ function changeProtocolSettings(protocol) {
         normalDiv.style.display = 'none';
         torDiv.style.display = 'block';
     }
+    if (enableYoutubeCustomSettingsElement.checked)
+        for (const item of customSettingsDivElement) item.style.display = 'block';
+    else
+        for (const item of customSettingsDivElement) item.style.display = 'none';
 }
 
-let bypassWatchOnTwitterElement = document.getElementById("bypass-watch-on-twitter")
-bypassWatchOnTwitterElement.addEventListener("change",
-    event => twitterHelper.setBypassWatchOnTwitter(event.target.checked)
-);
-
 twitterHelper.init().then(() => {
     disableTwitterElement.checked = !twitterHelper.getDisable();
+    enableYoutubeCustomSettingsElement.checked = twitterHelper.getEnableCustomSettings();
     bypassWatchOnTwitterElement.checked = twitterHelper.getBypassWatchOnTwitter();
 
     let protocol = twitterHelper.getProtocol();