Address issues #21, #22, #23, #24, #25 & #26

2 files changed, 103 insertions, 16 deletions

diff --git a/pages/options/options.html b/pages/options/options.html
index 2c9c3e81..b7e273f9 100644
--- a/pages/options/options.html
+++ b/pages/options/options.html
@@ -92,9 +92,24 @@
     </div>
   </section>
 
-  <footer>
-    <a class="button" id="save">Save</a>
-  </footer>
+  <section class="options settings_block">
+    <div class="onoffswitch switch" aria-label="Only redirect embedded video to Invidious">
+      <h1>Only redirect embedded video to Invidious?</h1>
+      <input aria-hidden="true" id="only-embed" type="checkbox" checked>&nbsp;
+      <label for="only-embed" class="checkbox-label">
+      </label>
+    </div>
+  </section>
+
+  <section class="options settings_block">
+    <h1>Invidious Video Quality</h1>
+    <select id="video-quality">
+      <option value="">Default</option>
+      <option value="hd720">720p</option>
+      <option value="medium">480p</option>
+      <option value="dash">DASH (Dynamic Adaptive Streaming over HTTP)</option>
+    </select>
+  </section>
 
   <script src="./options.js"></script>
 
diff --git a/pages/options/options.js b/pages/options/options.js
index 8b30d90d..4a1c198c 100644
--- a/pages/options/options.js
+++ b/pages/options/options.js
@@ -9,6 +9,8 @@ let disableInvidious = document.querySelector('#disable-invidious');
 let disableBibliogram = document.querySelector('#disable-bibliogram');
 let disableOsm = document.querySelector('#disable-osm');
 let alwaysProxy = document.querySelector('#always-proxy');
+let onlyEmbeddedVideo = document.querySelector('#only-embed');
+let videoQuality = document.querySelector('#video-quality');
 
 window.browser = window.browser || window.chrome;
 
@@ -22,7 +24,9 @@ browser.storage.sync.get(
     'disableInvidious',
     'disableBibliogram',
     'disableOsm',
-    'alwaysProxy'
+    'alwaysProxy',
+    'onlyEmbeddedVideo',
+    'videoQuality'
   ],
   result => {
     nitterInstance.value = result.nitterInstance || '';
@@ -34,20 +38,88 @@ browser.storage.sync.get(
     disableBibliogram.checked = !result.disableBibliogram;
     disableOsm.checked = !result.disableOsm;
     alwaysProxy.checked = result.alwaysProxy;
+    onlyEmbeddedVideo.checked = result.onlyEmbeddedVideo;
+    videoQuality.value = result.videoQuality || '';
   }
 );
 
-document.querySelector('#save').addEventListener('click', () => {
+function debounce(func, wait, immediate) {
+  let timeout;
+  return () => {
+    let context = this, args = arguments;
+    let later = () => {
+      timeout = null;
+      if (!immediate) func.apply(context, args);
+    };
+    let callNow = immediate && !timeout;
+    clearTimeout(timeout);
+    timeout = setTimeout(later, wait);
+    if (callNow) func.apply(context, args);
+  };
+};
+
+let nitterInstanceChange = debounce(() => {
+  if (nitterInstance.checkValidity()) {
+    browser.storage.sync.set({
+      nitterInstance: nitterInstance.value ? new URL(nitterInstance.value).origin : ''
+    });
+  }
+}, 500);
+nitterInstance.addEventListener('input', nitterInstanceChange);
+
+let invidiousInstanceChange = debounce(() => {
+  if (invidiousInstance.checkValidity()) {
+    browser.storage.sync.set({
+      invidiousInstance: invidiousInstance.value ? new URL(invidiousInstance.value).origin : ''
+    });
+  }
+}, 500);
+invidiousInstance.addEventListener('input', invidiousInstanceChange);
+
+let bibliogramInstanceChange = debounce(() => {
+  if (bibliogramInstance.checkValidity()) {
+    browser.storage.sync.set({
+      bibliogramInstance: bibliogramInstance.value ? new URL(bibliogramInstance.value).origin : ''
+    });
+  }
+}, 500);
+bibliogramInstance.addEventListener('input', bibliogramInstanceChange);
+
+let osmInstanceChange = debounce(() => {
+  if (osmInstance.checkValidity()) {
+    browser.storage.sync.set({
+      osmInstance: osmInstance.value ? new URL(osmInstance.value).origin : ''
+    });
+  }
+}, 500);
+osmInstance.addEventListener('input', osmInstanceChange);
+
+disableNitter.addEventListener('change', event => {
+  browser.storage.sync.set({ disableNitter: !event.target.checked });
+});
+
+disableInvidious.addEventListener('change', event => {
+  browser.storage.sync.set({ disableInvidious: !event.target.checked });
+});
+
+disableBibliogram.addEventListener('change', event => {
+  browser.storage.sync.set({ disableBibliogram: !event.target.checked });
+});
+
+disableOsm.addEventListener('change', event => {
+  browser.storage.sync.set({ disableOsm: !event.target.checked });
+});
+
+alwaysProxy.addEventListener('change', event => {
+  browser.storage.sync.set({ alwaysProxy: event.target.checked });
+});
+
+onlyEmbeddedVideo.addEventListener('change', event => {
+  browser.storage.sync.set({ onlyEmbeddedVideo: event.target.checked });
+});
+
+videoQuality.addEventListener('change', event => {
   browser.storage.sync.set({
-    nitterInstance: nitterInstance.value && nitterInstance.checkValidity() ? new URL(nitterInstance.value).origin : '',
-    invidiousInstance: invidiousInstance.value && invidiousInstance.checkValidity() ? new URL(invidiousInstance.value).origin : '',
-    bibliogramInstance: bibliogramInstance.value && bibliogramInstance.checkValidity() ? new URL(bibliogramInstance.value).origin : '',
-    osmInstance: osmInstance.value && osmInstance.checkValidity() ? new URL(osmInstance.value).origin : '',
-    disableNitter: !disableNitter.checked,
-    disableInvidious: !disableInvidious.checked,
-    disableBibliogram: !disableBibliogram.checked,
-    disableOsm: !disableOsm.checked,
-    alwaysProxy: alwaysProxy.checked
+    videoQuality: event.target.options[videoQuality.selectedIndex].value
   });
-  window.close();
-});
\ No newline at end of file
+});