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

1 files changed, 85 insertions, 13 deletions

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
+});