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

6 files changed, 130 insertions, 20 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
+});
diff --git a/pages/popup/open.svg b/pages/popup/open.svg
new file mode 100644
index 00000000..04f56c15
--- /dev/null
+++ b/pages/popup/open.svg
@@ -0,0 +1,5 @@
+<svg xmlns='http://www.w3.org/2000/svg' width='512' height='512' viewBox='0 0 512 512'>
+  <path d='M384,224V408a40,40,0,0,1-40,40H104a40,40,0,0,1-40-40V168a40,40,0,0,1,40-40H271.48' style='fill:none;stroke:#FFF;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px'/>
+  <polyline points='336 64 448 64 448 176' style='fill:none;stroke:#FFF;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px'/>
+  <line x1='224' y1='288' x2='440' y2='72' style='fill:none;stroke:#FFF;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px'/>
+</svg>
\ No newline at end of file
diff --git a/pages/popup/popup.html b/pages/popup/popup.html
index 40cf3e7f..2f05f87f 100644
--- a/pages/popup/popup.html
+++ b/pages/popup/popup.html
@@ -8,7 +8,7 @@
   <link href="../styles.css" rel="stylesheet">
 </head>
 
-<body>
+<body class="popup">
   <header>
     <div class="logo-container">
       <img src="../../images/logo.png" alt="Privacy Redirect logo">
@@ -90,6 +90,13 @@
     </datalist>
   </section>
 
+  <footer>
+    <a class="button" id="more-options">
+      <span>More Options&nbsp;</span>
+      <img height="18px" src="open.svg" alt="more-options" />
+    </a>
+  </footer>
+
   <script src="./popup.js"></script>
 
 </body>
diff --git a/pages/popup/popup.js b/pages/popup/popup.js
index 9b30c039..172a66e7 100644
--- a/pages/popup/popup.js
+++ b/pages/popup/popup.js
@@ -103,3 +103,7 @@ disableBibliogram.addEventListener('change', event => {
 disableOsm.addEventListener('change', event => {
   browser.storage.sync.set({ disableOsm: !event.target.checked });
 });
+
+document.querySelector('#more-options').addEventListener('click', () => {
+  browser.runtime.openOptionsPage();
+});
diff --git a/pages/styles.css b/pages/styles.css
index 89ae5a83..a68d9bbc 100644
--- a/pages/styles.css
+++ b/pages/styles.css
@@ -12,9 +12,13 @@
 body {
   color: var(--text-secondary);
   margin: 0;
+  background-color: var(--dark-grey);
+}
+
+.popup {
   max-width: 400px;
   min-width: 300px;
-  background-color: var(--dark-grey);
+  overflow: hidden;
 }
 
 header {
@@ -80,7 +84,7 @@ footer a.button {
 
 /* Elements */
 
-input[type=url] {
+input[type=url], select {
   width: 100%;
   margin-bottom: 5px;
 }
@@ -148,6 +152,10 @@ input:checked+label:after {
   transition-duration: 0.4s;
 }
 
+.button * {
+  vertical-align: middle;
+}
+
 .button:hover {
   background-color: var(--active);
   color: #fff;
@@ -168,4 +176,3 @@ input[type="url"]:invalid {
 .margin-bottom {
   margin-bottom: 20px;
 }
-