Closes #36 - added option to persist Invidious prefs

3 files changed, 35 insertions, 3 deletions

diff --git a/pages/options/options.html b/pages/options/options.html
index 321babe8..35ef7a43 100644
--- a/pages/options/options.html
+++ b/pages/options/options.html
@@ -138,6 +138,24 @@
     </section>
 
     <section class="options settings_block">
+      <div class="onoffswitch switch" aria-label="Invidious dark mode aways on">
+        <h1>Invidious dark mode always on</h1>
+        <input aria-hidden="true" id="invidious-dark-mode" type="checkbox" checked>&nbsp;
+        <label for="invidious-dark-mode" class="checkbox-label">
+        </label>
+      </div>
+    </section>
+
+    <section class="options settings_block">
+      <div class="onoffswitch switch" aria-label="Persist Invidious preferences">
+        <h1>Persist Invidious preferences (as cookie)</h1>
+        <input aria-hidden="true" id="persist-invidious-prefs" type="checkbox" checked>&nbsp;
+        <label for="persist-invidious-prefs" class="checkbox-label">
+        </label>
+      </div>
+    </section>
+
+    <section class="options settings_block">
       <div class="onoffswitch switch" aria-label="Proactively remove Twitter service worker">
         <h1>Proactively remove Twitter service worker</h1>
         <input aria-hidden="true" id="remove-twitter-sw" type="checkbox" checked>&nbsp;
diff --git a/pages/options/options.js b/pages/options/options.js
index 821d6ed4..8b848e64 100644
--- a/pages/options/options.js
+++ b/pages/options/options.js
@@ -12,6 +12,8 @@ let alwaysProxy = document.getElementById('always-proxy');
 let onlyEmbeddedVideo = document.getElementById('only-embed');
 let videoQuality = document.getElementById('video-quality');
 let removeTwitterSW = document.getElementById('remove-twitter-sw');
+let invidiousDarkMode = document.getElementById('invidious-dark-mode');
+let persistInvidiousPrefs = document.getElementById('persist-invidious-prefs');
 let whitelist;
 
 window.browser = window.browser || window.chrome;
@@ -46,7 +48,9 @@ browser.storage.sync.get(
     'onlyEmbeddedVideo',
     'videoQuality',
     'removeTwitterSW',
-    'whitelist'
+    'whitelist',
+    'invidiousDarkMode',
+    'persistInvidiousPrefs'
   ],
   result => {
     nitterInstance.value = result.nitterInstance || '';
@@ -61,6 +65,8 @@ browser.storage.sync.get(
     onlyEmbeddedVideo.checked = result.onlyEmbeddedVideo;
     videoQuality.value = result.videoQuality || '';
     removeTwitterSW.checked = !result.removeTwitterSW;
+    invidiousDarkMode.checked = result.invidiousDarkMode;
+    persistInvidiousPrefs.checked = result.persistInvidiousPrefs;
     whitelist = result.whitelist || [];
     whitelist.forEach(prependWhitelistItem);
   }
@@ -199,3 +205,11 @@ videoQuality.addEventListener('change', event => {
 removeTwitterSW.addEventListener('change', event => {
   browser.storage.sync.set({ removeTwitterSW: !event.target.checked });
 });
+
+invidiousDarkMode.addEventListener('change', event => {
+  browser.storage.sync.set({ invidiousDarkMode: event.target.checked });
+});
+
+persistInvidiousPrefs.addEventListener('change', event => {
+  browser.storage.sync.set({ persistInvidiousPrefs: event.target.checked });
+});
diff --git a/pages/styles.css b/pages/styles.css
index 0d5b5337..1e9a764c 100644
--- a/pages/styles.css
+++ b/pages/styles.css
@@ -21,7 +21,7 @@ body {
 
 .popup {
   width: 300px;
-  height: auto;
+  min-height: auto;
   overflow: hidden;
   background-color: var(--dark-grey);
 }
@@ -145,7 +145,7 @@ input:checked+label:after {
 
 .settings_block {
   display: block;
-  padding: 5px 1em 20px 1em;
+  padding: 10px 1em 1em 1em;
   border-bottom: var(--dark-grey) solid 1px;
 }