Added a button for enabling cookies #104

8 files changed, 676 insertions, 717 deletions

diff --git a/src/assets/javascripts/helpers/youtube/invidious-options.js b/src/assets/javascripts/helpers/youtube/invidious-options.js
index 201a8709..ea45ae01 100644
--- a/src/assets/javascripts/helpers/youtube/invidious-options.js
+++ b/src/assets/javascripts/helpers/youtube/invidious-options.js
@@ -153,23 +153,22 @@ export async function invidiousInit() {
                     "invidiousSavePlayerPos",
                 ],
                 r => {
-                    invidiousQuality = r.invidiousQuality ?? 'DEFAULT';
-                    invidiousAlwaysProxy = r.invidiousAlwaysProxy ?? 'DEFAULT';
-                    invidiousPlayerStyle = r.invidiousPlayerStyle ?? 'DEFAULT';
-                    invidiousVideoLoop = r.invidiousVideoLoop ?? 'DEFAULT';
-                    invidiousContinueAutoplay = r.invidiousContinueAutoplay ?? 'DEFAULT';
-                    invidiousContinue = r.invidiousContinue ?? 'DEFAULT';
-                    invidiousListen = r.invidiousListen ?? 'DEFAULT';
-                    invidiousSpeed = r.invidiousSpeed ?? 'DEFAULT';
-                    invidiousQualityDash = r.invidiousQualityDash ?? 'DEFAULT';
-                    invidiousComments = r.invidiousComments ?? ['DEFAULT', 'DEFAULT'];
-                    invidiousCaptions = r.invidiousCaptions ?? ['DEFAULT', 'DEFAULT', 'DEFAULT'];
-                    invidiousRelatedVideos = r.invidiousRelatedVideos ?? 'DEFAULT';
-                    invidiousAnnotations = r.invidiousAnnotations ?? 'DEFAULT';
-                    invidiousExtendDesc = r.invidiousExtendDesc ?? 'DEFAULT';
-                    invidiousVrMode = r.invidiousVrMode ?? 'DEFAULT';
-                    invidiousSavePlayerPos = r.invidiousSavePlayerPos ?? 'DEFAULT';
-
+                    invidiousVideoLoop = r.invidiousVideoLoop ?? false;
+                    invidiousAlwaysProxy = r.invidiousAlwaysProxy ?? false;
+                    invidiousPlayerStyle = r.invidiousPlayerStyle ?? 'invidious';
+                    invidiousQuality = r.invidiousQuality ?? 'hd720';
+                    invidiousContinueAutoplay = r.invidiousContinueAutoplay ?? true;
+                    invidiousContinue = r.invidiousContinue ?? false;
+                    invidiousListen = r.invidiousListen ?? false;
+                    invidiousSpeed = r.invidiousSpeed ?? '1.0';
+                    invidiousQualityDash = r.invidiousQualityDash ?? 'auto';
+                    invidiousComments = r.invidiousComments ?? ['youtube', ''];
+                    invidiousCaptions = r.invidiousCaptions ?? ['', '', ''];
+                    invidiousRelatedVideos = r.invidiousRelatedVideos ?? true;
+                    invidiousAnnotations = r.invidiousAnnotations ?? false;
+                    invidiousExtendDesc = r.invidiousExtendDesc ?? false;
+                    invidiousVrMode = r.invidiousVrMode ?? true;
+                    invidiousSavePlayerPos = r.invidiousSavePlayerPos ?? false;
 
                     resolve();
                 }
diff --git a/src/assets/javascripts/helpers/youtube/piped-preferences.js b/src/assets/javascripts/helpers/youtube/piped-preferences.js
index 6edd5ba2..f4b41e5c 100644
--- a/src/assets/javascripts/helpers/youtube/piped-preferences.js
+++ b/src/assets/javascripts/helpers/youtube/piped-preferences.js
@@ -3,37 +3,16 @@ window.browser = window.browser || window.chrome;
 browser.storage.local.get(
     [
         "theme",
-        "applyThemeToSites",
-
         "youtubeVolume",
         "youtubeAutoplay"
     ],
     r => {
-        let applyThemeToSites = r.applyThemeToSites ?? false;
-
-        if (
-            applyThemeToSites &&
-            r.theme != "DEFAULT" &&
-            localStorage.getItem("theme") != r.theme
-        )
-            localStorage.setItem("theme", r.theme);
+        let theme = r.theme ?? "dark";
+        let youtubeAutoplay = r.youtubeAutoplay ?? false;
+        let youtubeVolume = r.youtubeVolume ?? 100;
 
-        if (
-            r.youtubeVolume != "--" &&
-            localStorage.getItem("volume") != r.youtubeVolume
-        )
-            localStorage.setItem("volume", r.youtubeVolume / 100);
-
-        if (
-            r.youtubeAutoplay != "DEFAULT" &&
-            localStorage.getItem("playerAutoPlay") != r.youtubeAutoplay
-        )
-            localStorage.setItem("playerAutoPlay", r.youtubeAutoplay);
+        localStorage.setItem("theme", theme);
+        localStorage.setItem("volume", youtubeVolume / 100);
+        localStorage.setItem("playerAutoPlay", youtubeAutoplay);
     }
-)
-
-window.onunload = () => {
-    localStorage.removeItem("theme");
-    localStorage.removeItem("volume");
-    localStorage.removeItem("playerAutoPlay");
-};
+)
\ No newline at end of file
diff --git a/src/assets/javascripts/helpers/youtube/pipedMaterial-preferences.js b/src/assets/javascripts/helpers/youtube/pipedMaterial-preferences.js
index e244cb47..94d54dd3 100644
--- a/src/assets/javascripts/helpers/youtube/pipedMaterial-preferences.js
+++ b/src/assets/javascripts/helpers/youtube/pipedMaterial-preferences.js
@@ -3,23 +3,22 @@ window.browser = window.browser || window.chrome;
 browser.storage.local.get(
     [
         "theme",
-        "applyThemeToSites",
+        "youtubeVolume",
         "youtubeAutoplay",
     ],
     r => {
-        let applyThemeToSites = r.applyThemeToSites ?? false;
-        let theme = r.theme ?? "DEFAULT";
-        let youtubeAutoplay = r.youtubeAutoplay ?? "DEFAULT";
+        let theme = r.theme ?? "dark";
+        let youtubeAutoplay = r.youtubeAutoplay ?? false;
+        let youtubeVolume = r.youtubeVolume ?? 100;
 
         let prefs = {};
         if (localStorage.getItem("PREFERENCES")) prefs = JSON.parse(localStorage.getItem("PREFERENCES"));
 
-        if (applyThemeToSites && theme == 'dark') prefs.darkMode = true;
-        if (applyThemeToSites && theme == 'light') prefs.darkMode = false;
+        if (theme == 'dark') prefs.darkMode = true;
+        if (theme == 'light') prefs.darkMode = false;
 
-        if (youtubeAutoplay != "DEFAULT") prefs.playerAutoplay = youtubeAutoplay == 'true';
-
-        console.log("prefs", JSON.stringify(prefs));
+        prefs.playerAutoplay = youtubeAutoplay == 'true';
+        prefs.volume = youtubeVolume / 100;
 
         localStorage.setItem("PREFERENCES", JSON.stringify(prefs));
     }
diff --git a/src/assets/javascripts/helpers/youtube/youtube.js b/src/assets/javascripts/helpers/youtube/youtube.js
index 596f6d96..1f4bf298 100644
--- a/src/assets/javascripts/helpers/youtube/youtube.js
+++ b/src/assets/javascripts/helpers/youtube/youtube.js
@@ -247,6 +247,14 @@ function setDisable(val) {
   console.log("disableYoutube: ", disable)
 }
 
+let enableCustomSettings;
+const getEnableCustomSettings = () => enableCustomSettings;
+function setEnableCustomSettings(val) {
+  enableCustomSettings = val;
+  browser.storage.local.set({ enableYoutubeCustomSettings: enableCustomSettings })
+  console.log("enableYoutubeCustomSettings: ", enableCustomSettings)
+}
+
 let protocol;
 const getProtocol = () => protocol;
 function setProtocol(val) {
@@ -554,23 +562,25 @@ function isPipedorInvidious(url, type, frontend) {
 }
 
 function initPipedLocalStorage(tabId) {
-  browser.tabs.executeScript(
-    tabId,
-    {
-      file: "/assets/javascripts/helpers/youtube/piped-preferences.js",
-      runAt: "document_start"
-    }
-  );
+  if (enableCustomSettings)
+    browser.tabs.executeScript(
+      tabId,
+      {
+        file: "/assets/javascripts/helpers/youtube/piped-preferences.js",
+        runAt: "document_start"
+      }
+    );
 }
 
 function initPipedMaterialLocalStorage(tabId) {
-  browser.tabs.executeScript(
-    tabId,
-    {
-      file: "/assets/javascripts/helpers/youtube/pipedMaterial-preferences.js",
-      runAt: "document_start"
-    }
-  );
+  if (enableCustomSettings)
+    browser.tabs.executeScript(
+      tabId,
+      {
+        file: "/assets/javascripts/helpers/youtube/pipedMaterial-preferences.js",
+        runAt: "document_start"
+      }
+    );
 }
 
 function initInvidiousCookies() {
@@ -582,64 +592,57 @@ function initInvidiousCookies() {
     ...invidiousTorCustomRedirects,
   ];
 
-  for (const instanceUrl of checkedInstances)
-    browser.cookies.get(
-      {
-        url: instanceUrl,
-        name: "PREFS",
-      },
-      cookie => {
-        let prefs = {};
-        if (cookie) {
-          prefs = JSON.parse(decodeURIComponent(cookie.value));
-          browser.cookies.remove({ url: instanceUrl, name: "PREFS" });
-        }
-
-        if (invidiousAlwaysProxy != "DEFAULT") prefs.local = invidiousAlwaysProxy == 'true';
-        if (applyThemeToSites && theme != "DEFAULT") prefs.dark_mode = theme;
-        if (invidiousVideoLoop != "DEFAULT") prefs.video_loop = invidiousVideoLoop == 'true';
-        if (invidiousContinueAutoplay != "DEFAULT") prefs.continue_autoplay = invidiousContinueAutoplay == 'true';
-        if (invidiousContinue != "DEFAULT") prefs.continue = invidiousContinue == 'true';
-        if (invidiousListen != "DEFAULT") prefs.listen = invidiousListen == 'true';
-        if (invidiousSpeed != "DEFAULT") prefs.speed = parseFloat(invidiousSpeed);
-        if (invidiousQuality != "DEFAULT") prefs.quality = invidiousQuality;
-        if (invidiousQualityDash != "DEFAULT") prefs.quality_dash = invidiousQualityDash;
-
-        if (invidiousComments[0] != "DEFAULT" || invidiousComments[1] != "DEFAULT") prefs.comments = []
+  if (enableCustomSettings)
+    for (const instanceUrl of checkedInstances)
+      browser.cookies.get(
+        {
+          url: instanceUrl,
+          name: "PREFS",
+        },
+        cookie => {
+          let prefs = {};
+          if (cookie) {
+            prefs = JSON.parse(decodeURIComponent(cookie.value));
+            browser.cookies.remove({ url: instanceUrl, name: "PREFS" });
+          }
 
-        if (invidiousComments[0] != "DEFAULT") prefs.comments[0] = invidiousComments[0];
-        else if (invidiousComments[1] != "DEFAULT") prefs.comments[0] = ""
-        if (invidiousComments[1] != "DEFAULT") prefs.comments[1] = invidiousComments[1];
-        else if (invidiousComments[0] != "DEFAULT") prefs.comments[1] = ""
+          prefs.local = invidiousAlwaysProxy == 'true';
+          prefs.dark_mode = theme;
+          prefs.video_loop = invidiousVideoLoop == 'true';
+          prefs.continue_autoplay = invidiousContinueAutoplay == 'true';
+          prefs.continue = invidiousContinue == 'true';
+          prefs.listen = invidiousListen == 'true';
+          prefs.speed = parseFloat(invidiousSpeed);
+          prefs.quality = invidiousQuality;
+          prefs.quality_dash = invidiousQualityDash;
 
-        if (invidiousCaptions[0] != "DEFAULT" || invidiousCaptions[1] != "DEFAULT" || invidiousCaptions[2] != "DEFAULT") prefs.captions = [];
+          prefs.comments = [];
+          prefs.comments[0] = invidiousComments[0];
+          prefs.comments[1] = invidiousComments[1];
 
-        if (invidiousCaptions[0] != "DEFAULT") prefs.captions[0] = invidiousCaptions[0];
-        else if (invidiousCaptions[1] != "DEFAULT" || invidiousCaptions[2] != "DEFAULT") prefs.captions[0] = "";
 
-        if (invidiousCaptions[1] != "DEFAULT") prefs.captions[1] = invidiousCaptions[1];
-        else if (invidiousCaptions[0] != "DEFAULT" || invidiousCaptions[2] != "DEFAULT") prefs.captions[1] = "";
+          prefs.captions = [];
+          prefs.captions[0] = invidiousCaptions[0];
+          prefs.captions[1] = invidiousCaptions[1];
+          prefs.captions[2] = invidiousCaptions[2];
 
-        if (invidiousCaptions[2] != "DEFAULT") prefs.captions[2] = invidiousCaptions[2];
-        else if (invidiousCaptions[0] != "DEFAULT" || invidiousCaptions[1] != "DEFAULT") prefs.captions[2] = "";
+          prefs.related_videos = invidiousRelatedVideos == 'true';
+          prefs.annotations = invidiousAnnotations == 'true'
+          prefs.extend_desc = invidiousExtendDesc == 'true';
+          prefs.vr_mode = invidiousVrMode == 'true';
+          prefs.save_player_pos = invidiousSavePlayerPos == 'true';
 
-        if (invidiousRelatedVideos != "DEFAULT") prefs.related_videos = invidiousRelatedVideos == 'true';
-        if (invidiousAnnotations != "DEFAULT") prefs.annotations = invidiousAnnotations == 'true';
-        if (invidiousExtendDesc != "DEFAULT") prefs.extend_desc = invidiousExtendDesc == 'true';
-        if (invidiousVrMode != "DEFAULT") prefs.vr_mode = invidiousVrMode == 'true';
-        if (invidiousSavePlayerPos != "DEFAULT") prefs.save_player_pos = invidiousSavePlayerPos == 'true';
+          prefs.volume = parseInt(volume);
+          prefs.player_style = invidiousPlayerStyle;
+          prefs.autoplay = autoplay == 'true';
 
-        if (volume != "--") prefs.volume = parseInt(volume);
-        if (invidiousPlayerStyle != "DEFAULT") prefs.player_style = invidiousPlayerStyle;
-        if (autoplay != "DEFAULT") prefs.autoplay = autoplay == 'true';
-
-        if (Object.entries(prefs).length !== 0)
           browser.cookies.set({
             url: instanceUrl,
             name: "PREFS",
             value: encodeURIComponent(JSON.stringify(prefs))
           })
-      })
+        }
+      )
 }
 
 async function init() {
@@ -651,8 +654,8 @@ async function init() {
         browser.storage.local.get(
           [
             "theme",
-            "applyThemeToSites",
             "disableYoutube",
+            "enableYoutubeCustomSettings",
             "OnlyEmbeddedVideo",
             "youtubeVolume",
             "youtubeAutoplay",
@@ -689,15 +692,15 @@ async function init() {
             if (r.youtubeRedirects) redirects = r.youtubeRedirects;
 
             disable = r.disableYoutube ?? false;
+            enableCustomSettings = r.enableYoutubeCustomSettings ?? false;
             protocol = r.youtubeProtocol ?? 'normal';
             frontend = r.youtubeFrontend ?? 'invidious';
             youtubeEmbedFrontend = r.youtubeEmbedFrontend ?? 'invidious';
 
-            theme = r.theme ?? 'DEFAULT';
-            applyThemeToSites = r.applyThemeToSites ?? false;
+            theme = r.theme ?? 'dark';
 
-            volume = r.youtubeVolume ?? '--';
-            autoplay = r.youtubeAutoplay ?? 'DEFAULT';
+            volume = r.youtubeVolume ?? 100;
+            autoplay = r.youtubeAutoplay ?? false;
 
             OnlyEmbeddedVideo = r.OnlyEmbeddedVideo ?? 'both';
 
@@ -773,6 +776,9 @@ export default {
   getDisable,
   setDisable,
 
+  getEnableCustomSettings,
+  setEnableCustomSettings,
+
   getProtocol,
   setProtocol,
 
diff --git a/src/pages/options/youtube/invidious.js b/src/pages/options/youtube/invidious.js
index 90361342..d8486e7a 100644
--- a/src/pages/options/youtube/invidious.js
+++ b/src/pages/options/youtube/invidious.js
@@ -3,7 +3,7 @@ import commonHelper from "../../../assets/javascripts/helpers/common.js";
 
 let invidiousAlwaysProxyElement = document.getElementById("invidious-local");
 invidiousAlwaysProxyElement.addEventListener("change",
-    event => youtubeHelper.setInvidiousAlwaysProxy(event.target.options[invidiousAlwaysProxyElement.selectedIndex].value)
+    event => youtubeHelper.setInvidiousAlwaysProxy(event.target.checked)
 );
 
 let invidiousPlayerStyleElement = document.getElementById("invidious-player_style");
@@ -18,22 +18,22 @@ invidiousQualityElement.addEventListener("change",
 
 let invidiousVideoLoopElement = document.getElementById("invidious-video_loop");
 invidiousVideoLoopElement.addEventListener("change",
-    event => youtubeHelper.setInvidiousVideoLoop(event.target.options[invidiousVideoLoopElement.selectedIndex].value)
+    event => youtubeHelper.setInvidiousVideoLoop(event.target.checked)
 );
 
 let invidiousContinueAutoplayElement = document.getElementById("invidious-continue_autoplay");
 invidiousContinueAutoplayElement.addEventListener("change",
-    event => youtubeHelper.setInvidiousContinueAutoplay(event.target.options[invidiousContinueAutoplayElement.selectedIndex].value)
+    event => youtubeHelper.setInvidiousContinueAutoplay(event.target.checked)
 );
 
 let invidiousContinueElement = document.getElementById("invidious-continue");
 invidiousContinueElement.addEventListener("change",
-    event => youtubeHelper.setInvidiousContinue(event.target.options[invidiousContinueElement.selectedIndex].value)
+    event => youtubeHelper.setInvidiousContinue(event.target.checked)
 );
 
 let invidiousListenElement = document.getElementById("invidious-listen");
 invidiousListenElement.addEventListener("change",
-    event => youtubeHelper.setInvidiousListen(event.target.options[invidiousListenElement.selectedIndex].value)
+    event => youtubeHelper.setInvidiousListen(event.target.checked)
 );
 
 let invidiousSpeedElement = document.getElementById("invidious-speed");
@@ -90,28 +90,28 @@ invidiousCaptions2Element.addEventListener("change",
 
 let invidiousRelatedVideoElement = document.getElementById("invidious-related_videos");
 invidiousRelatedVideoElement.addEventListener("change",
-    event => youtubeHelper.setInvidiousRelatedVideos(event.target.options[invidiousRelatedVideoElement.selectedIndex].value)
+    event => youtubeHelper.setInvidiousRelatedVideos(event.target.checked)
 );
 
 let invidiousAnnotationsElement = document.getElementById("invidious-annotations");
 invidiousAnnotationsElement.addEventListener("change",
-    event => youtubeHelper.setInvidiousAnnotations(event.target.options[invidiousAnnotationsElement.selectedIndex].value)
+    event => youtubeHelper.setInvidiousAnnotations(event.target.checked)
 );
 
 
 let invidiousExtendDescElement = document.getElementById("invidious-extend_desc");
 invidiousExtendDescElement.addEventListener("change",
-    event => youtubeHelper.setInvidiousExtendDesc(event.target.options[invidiousExtendDescElement.selectedIndex].value)
+    event => youtubeHelper.setInvidiousExtendDesc(event.target.checked)
 );
 
 let invidiousVrModeElement = document.getElementById("invidious-vr_mode");
 invidiousVrModeElement.addEventListener("change",
-    event => youtubeHelper.setInvidiousVrMode(event.target.options[invidiousVrModeElement.selectedIndex].value)
+    event => youtubeHelper.setInvidiousVrMode(event.target.checked)
 );
 
 let invidiousSavePlayerPosElement = document.getElementById("invidious-save_player_pos");
 invidiousSavePlayerPosElement.addEventListener("change",
-    event => youtubeHelper.setInvidiousSavePlayerPos(event.target.options[invidiousSavePlayerPosElement.selectedIndex].value)
+    event => youtubeHelper.setInvidiousSavePlayerPos(event.target.checked)
 );
 
 youtubeHelper.init().then(() => {
diff --git a/src/pages/options/youtube/youtube.html b/src/pages/options/youtube/youtube.html
index 492843d7..ce4ebf50 100644
--- a/src/pages/options/youtube/youtube.html
+++ b/src/pages/options/youtube/youtube.html
@@ -101,7 +101,7 @@
   <section class="option-block">
     <div class="some-block option-block">
       <h4>Enable</h4>
-      <input id="disable-invidious" type="checkbox" checked />
+      <input id="disable-invidious" type="checkbox" />
     </div>
 
     <div class="some-block option-block">
@@ -151,608 +151,560 @@
 
       <div class="some-block option-block">
         <h4>Bypass Watch On YouTube</h4>
-        <input id="bypass-watch-on-youtube" type="checkbox" checked />
+        <input id="bypass-watch-on-youtube" type="checkbox" />
       </div>
 
+      <hr>
+
       <div class="some-block option-block">
-        <h4>Autoplay Video</h4>
-        <select id="invidious-autoplay">
-          <option value="DEFAULT">Default</option>
-          <option value="true">True</option>
-          <option value="false">False</option>
-        </select>
+        <h4>Enable Custom Settings (will use cookies and localStorage)</h4>
+        <input id="enable-youtube-custom-settings" type="checkbox" />
       </div>
 
-      <div class="some-block option-block">
-        <h4>Volume: <span id="volume-value">--%</span></h4>
-        <input id="invidious-volume" name="invidious-volume" type="range" min="0" max="100" step="1" />
-        <button type="button" class="default" id="clear-invidious-volume">
-          <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="currentColor">
-            <path d="M0 0h24v24H0V0z" fill="none" />
-            <path
-              d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z" />
-          </svg>
-        </button>
+      <div class="custom-settings">
+
+        <div class="some-block option-block">
+          <h4>Autoplay Video</h4>
+          <input id="invidious-autoplay" type="checkbox" />
+        </div>
+
+        <div class="some-block option-block">
+          <h4>Volume: <span id="volume-value">--%</span></h4>
+          <input id="invidious-volume" name="invidious-volume" type="range" min="0" max="100" step="1" />
+        </div>
+
       </div>
+
     </div>
 
+
+
     <div id="invidious">
-      <div class="some-block option-block">
-        <h4>Player Style</h4>
-        <select id="invidious-player_style">
-          <option value="DEFAULT">Default</option>
-          <option value="invidious">Invidious</option>
-          <option value="youtube">YouTube</option>
-        </select>
-      </div>
+      <div class="custom-settings">
+        <div class="some-block option-block">
+          <h4>Player Style</h4>
+          <select id="invidious-player_style">
+            <option value="invidious">Invidious</option>
+            <option value="youtube">YouTube</option>
+          </select>
+        </div>
 
-      <div class="some-block option-block">
-        <h4>Always loop</h4>
-        <select id="invidious-video_loop">
-          <option value="DEFAULT">Default</option>
-          <option value="true">True</option>
-          <option value="false">False</option>
-        </select>
-      </div>
+        <div class="some-block option-block">
+          <h4>Always loop</h4>
+          <input id="invidious-video_loop" type="checkbox" />
+        </div>
 
-      <div class="some-block option-block">
-        <h4>Autoplay next video</h4>
-        <select id="invidious-continue_autoplay">
-          <option value="DEFAULT">Default</option>
-          <option value="true">True</option>
-          <option value="false">False</option>
-        </select>
-      </div>
+        <div class="some-block option-block">
+          <h4>Autoplay next video</h4>
+          <input id="invidious-continue_autoplay" type="checkbox" />
+        </div>
 
-      <div class="some-block option-block">
-        <h4>Play next by default</h4>
-        <select id="invidious-continue">
-          <option value="DEFAULT">Default</option>
-          <option value="true">True</option>
-          <option value="false">False</option>
-        </select>
-      </div>
+        <div class="some-block option-block">
+          <h4>Play next by default</h4>
+          <input id="invidious-continue" type="checkbox" />
+        </div>
 
-      <div class="some-block option-block">
-        <h4>Always proxy videos</h4>
-        <select id="invidious-local">
-          <option value="DEFAULT">Default</option>
-          <option value="true">True</option>
-          <option value="false">False</option>
-        </select>
-      </div>
+        <div class="some-block option-block">
+          <h4>Always proxy videos</h4>
+          <input id="invidious-local" type="checkbox" />
+        </div>
 
-      <div class="some-block option-block">
-        <h4>Listen by default</h4>
-        <select id="invidious-listen">
-          <option value="DEFAULT">Default</option>
-          <option value="true">True</option>
-          <option value="false">False</option>
-        </select>
-      </div>
+        <div class="some-block option-block">
+          <h4>Listen by default</h4>
+          <input id="invidious-listen" type="checkbox" />
+        </div>
 
-      <div class="some-block option-block">
-        <h4>Default speed</h4>
-        <select id="invidious-speed">
-          <option value="DEFAULT">Default</option>
-          <option>2.0</option>
-          <option>1.75</option>
-          <option>1.5</option>
-          <option>1.25</option>
-          <option>1.0</option>
-          <option>0.75</option>
-          <option>0.5</option>
-          <option>0.25</option>
-        </select>
-      </div>
+        <div class="some-block option-block">
+          <h4>Default speed</h4>
+          <select id="invidious-speed">
+            <option>2.0</option>
+            <option>1.75</option>
+            <option>1.5</option>
+            <option>1.25</option>
+            <option>1.0</option>
+            <option>0.75</option>
+            <option>0.5</option>
+            <option>0.25</option>
+          </select>
+        </div>
 
-      <div class="some-block option-block">
-        <h4>Preferred video quality</h4>
-        <select id="invidious-quality">
-          <option value="DEFAULT">Default</option>
-          <option value="hd720">720p</option>
-          <option value="medium">480p</option>
-          <option value="dash">DASH (adaptive quality)</option>
-          </option>
-        </select>
-      </div>
+        <div class="some-block option-block">
+          <h4>Preferred video quality</h4>
+          <select id="invidious-quality">
+            <option value="hd720">720p</option>
+            <option value="medium">480p</option>
+            <option value="dash">DASH (adaptive quality)</option>
+            </option>
+          </select>
+        </div>
 
-      <div class="some-block option-block">
-        <h4>Preferred DASH video quality</h4>
-        <select id="invidious-quality_dash">
-          <option value="DEFAULT">Default</option>
-          <option value="auto">Auto</option>
-          <option value="best">Best</option>
-          <option value="4320p">4320p</option>
-          <option value="2160p">2160p</option>
-          <option value="1440p">1440p</option>
-          <option value="1080p" selected="">1080p</option>
-          <option value="720p">720p</option>
-          <option value="480p">480p</option>
-          <option value="360p">360p</option>
-          <option value="240p">240p</option>
-          <option value="144p">144p</option>
-          <option value="worst">Worst</option>
-          </option>
-        </select>
-      </div>
+        <div class="some-block option-block">
+          <h4>Preferred DASH video quality</h4>
+          <select id="invidious-quality_dash">
+            <option value="auto">Auto</option>
+            <option value="best">Best</option>
+            <option value="4320p">4320p</option>
+            <option value="2160p">2160p</option>
+            <option value="1440p">1440p</option>
+            <option value="1080p" selected="">1080p</option>
+            <option value="720p">720p</option>
+            <option value="480p">480p</option>
+            <option value="360p">360p</option>
+            <option value="240p">240p</option>
+            <option value="144p">144p</option>
+            <option value="worst">Worst</option>
+            </option>
+          </select>
+        </div>
 
-      <div class="some-block option-block">
-        <h4>Default comments</h4>
-        <select id="invidious-comments[0]">
-          <option value="DEFAULT">Default</option>
-          <option value="">none</option>
-          <option value="youtube">YouTube</option>
-          <option value="reddit">Reddit</option>
-          </option>
-        </select>
-        &nbsp;
-        <select id="invidious-comments[1]">
-          <option value="DEFAULT">Default</option>
-          <option value="">none</option>
-          <option value="youtube">YouTube</option>
-          <option value="reddit">Reddit</option>
-        </select>
-      </div>
+        <div class="some-block option-block">
+          <h4>Default comments</h4>
+          <select id="invidious-comments[0]">
+            <option value="">none</option>
+            <option value="youtube">YouTube</option>
+            <option value="reddit">Reddit</option>
+            </option>
+          </select>
+          &nbsp;
+          <select id="invidious-comments[1]">
+            <option value="">none</option>
+            <option value="youtube">YouTube</option>
+            <option value="reddit">Reddit</option>
+          </select>
+        </div>
 
-      <div class="some-block option-block">
-        <h4>Default captions</h4>
-        <select id="invidious-captions[0]">
-          <option value="DEFAULT">Default</option>
-          <option value="">none</option>
-          <option value="English">English</option>
-          <option value="English (auto-generated)">English (auto-generated)</option>
-          <option value="English (United Kingdom)">English (United Kingdom)</option>
-          <option value="English (United States)">English (United States)</option>
-          <option value="Afrikaans">Afrikaans</option>
-          <option value="Albanian">Albanian</option>
-          <option value="Amharic">Amharic</option>
-          <option value="Arabic">Arabic</option>
-          <option value="Armenian">Armenian</option>
-          <option value="Azerbaijani">Azerbaijani</option>
-          <option value="Bangla">Bangla</option>
-          <option value="Basque">Basque</option>
-          <option value="Belarusian">Belarusian</option>
-          <option value="Bosnian">Bosnian</option>
-          <option value="Bulgarian">Bulgarian</option>
-          <option value="Burmese">Burmese</option>
-          <option value="Cantonese (Hong Kong)">Cantonese (Hong Kong)</option>
-          <option value="Catalan">Catalan</option>
-          <option value="Cebuano">Cebuano</option>
-          <option value="Chinese">Chinese</option>
-          <option value="Chinese (China)">Chinese (China)</option>
-          <option value="Chinese (Hong Kong)">Chinese (Hong Kong)</option>
-          <option value="Chinese (Simplified)">Chinese (Simplified)</option>
-          <option value="Chinese (Taiwan)">Chinese (Taiwan)</option>
-          <option value="Chinese (Traditional)">Chinese (Traditional)</option>
-          <option value="Corsican">Corsican</option>
-          <option value="Croatian">Croatian</option>
-          <option value="Czech">Czech</option>
-          <option value="Danish">Danish</option>
-          <option value="Dutch">Dutch</option>
-          <option value="Dutch (auto-generated)">Dutch (auto-generated)</option>
-          <option value="Esperanto">Esperanto</option>
-          <option value="Estonian">Estonian</option>
-          <option value="Filipino">Filipino</option>
-          <option value="Finnish">Finnish</option>
-          <option value="French">French</option>
-          <option value="French (auto-generated)">French (auto-generated)</option>
-          <option value="Galician">Galician</option>
-          <option value="Georgian">Georgian</option>
-          <option value="German">German</option>
-          <option value="German (auto-generated)">German (auto-generated)</option>
-          <option value="Greek">Greek</option>
-          <option value="Gujarati">Gujarati</option>
-          <option value="Haitian Creole">Haitian Creole</option>
-          <option value="Hausa">Hausa</option>
-          <option value="Hawaiian">Hawaiian</option>
-          <option value="Hebrew">Hebrew</option>
-          <option value="Hindi">Hindi</option>
-          <option value="Hmong">Hmong</option>
-          <option value="Hungarian">Hungarian</option>
-          <option value="Icelandic">Icelandic</option>
-          <option value="Igbo">Igbo</option>
-          <option value="Indonesian">Indonesian</option>
-          <option value="Indonesian (auto-generated)">Indonesian (auto-generated)</option>
-          <option value="Interlingue">Interlingue</option>
-          <option value="Irish">Irish</option>
-          <option value="Italian">Italian</option>
-          <option value="Italian (auto-generated)">Italian (auto-generated)</option>
-          <option value="Japanese">Japanese</option>
-          <option value="Japanese (auto-generated)">Japanese (auto-generated)</option>
-          <option value="Javanese">Javanese</option>
-          <option value="Kannada">Kannada</option>
-          <option value="Kazakh">Kazakh</option>
-          <option value="Khmer">Khmer</option>
-          <option value="Korean">Korean</option>
-          <option value="Korean (auto-generated)">Korean (auto-generated)</option>
-          <option value="Kurdish">Kurdish</option>
-          <option value="Kyrgyz">Kyrgyz</option>
-          <option value="Lao">Lao</option>
-          <option value="Latin">Latin</option>
-          <option value="Latvian">Latvian</option>
-          <option value="Lithuanian">Lithuanian</option>
-          <option value="Luxembourgish">Luxembourgish</option>
-          <option value="Macedonian">Macedonian</option>
-          <option value="Malagasy">Malagasy</option>
-          <option value="Malay">Malay</option>
-          <option value="Malayalam">Malayalam</option>
-          <option value="Maltese">Maltese</option>
-          <option value="Maori">Maori</option>
-          <option value="Marathi">Marathi</option>
-          <option value="Mongolian">Mongolian</option>
-          <option value="Nepali">Nepali</option>
-          <option value="Norwegian Bokmål">Norwegian Bokmål</option>
-          <option value="Nyanja">Nyanja</option>
-          <option value="Pashto">Pashto</option>
-          <option value="Persian">Persian</option>
-          <option value="Polish">Polish</option>
-          <option value="Portuguese">Portuguese</option>
-          <option value="Portuguese (auto-generated)">Portuguese (auto-generated)</option>
-          <option value="Portuguese (Brazil)">Portuguese (Brazil)</option>
-          <option value="Punjabi">Punjabi</option>
-          <option value="Romanian">Romanian</option>
-          <option value="Russian">Russian</option>
-          <option value="Russian (auto-generated)">Russian (auto-generated)</option>
-          <option value="Samoan">Samoan</option>
-          <option value="Scottish Gaelic">Scottish Gaelic</option>
-          <option value="Serbian">Serbian</option>
-          <option value="Shona">Shona</option>
-          <option value="Sindhi">Sindhi</option>
-          <option value="Sinhala">Sinhala</option>
-          <option value="Slovak">Slovak</option>
-          <option value="Slovenian">Slovenian</option>
-          <option value="Somali">Somali</option>
-          <option value="Southern Sotho">Southern Sotho</option>
-          <option value="Spanish">Spanish</option>
-          <option value="Spanish (auto-generated)">Spanish (auto-generated)</option>
-          <option value="Spanish (Latin America)">Spanish (Latin America)</option>
-          <option value="Spanish (Mexico)">Spanish (Mexico)</option>
-          <option value="Spanish (Spain)">Spanish (Spain)</option>
-          <option value="Sundanese">Sundanese</option>
-          <option value="Swahili">Swahili</option>
-          <option value="Swedish">Swedish</option>
-          <option value="Tajik">Tajik</option>
-          <option value="Tamil">Tamil</option>
-          <option value="Telugu">Telugu</option>
-          <option value="Thai">Thai</option>
-          <option value="Turkish">Turkish</option>
-          <option value="Turkish (auto-generated)">Turkish (auto-generated)</option>
-          <option value="Ukrainian">Ukrainian</option>
-          <option value="Urdu">Urdu</option>
-          <option value="Uzbek">Uzbek</option>
-          <option value="Vietnamese">Vietnamese</option>
-          <option value="Vietnamese (auto-generated)">Vietnamese (auto-generated)</option>
-          <option value="Welsh">Welsh</option>
-          <option value="Western Frisian">Western Frisian</option>
-          <option value="Xhosa">Xhosa</option>
-          <option value="Yiddish">Yiddish</option>
-          <option value="Yoruba">Yoruba</option>
-          <option value="Zulu">Zulu</option>
-        </select>
-        &nbsp;
-        <select id="invidious-captions[1]">
-          <option value="DEFAULT">Default</option>
-          <option value="">none</option>
-          <option value="English">English</option>
-          <option value="English (auto-generated)">English (auto-generated)</option>
-          <option value="English (United Kingdom)">English (United Kingdom)</option>
-          <option value="English (United States)">English (United States)</option>
-          <option value="Afrikaans">Afrikaans</option>
-          <option value="Albanian">Albanian</option>
-          <option value="Amharic">Amharic</option>
-          <option value="Arabic">Arabic</option>
-          <option value="Armenian">Armenian</option>
-          <option value="Azerbaijani">Azerbaijani</option>
-          <option value="Bangla">Bangla</option>
-          <option value="Basque">Basque</option>
-          <option value="Belarusian">Belarusian</option>
-          <option value="Bosnian">Bosnian</option>
-          <option value="Bulgarian">Bulgarian</option>
-          <option value="Burmese">Burmese</option>
-          <option value="Cantonese (Hong Kong)">Cantonese (Hong Kong)</option>
-          <option value="Catalan">Catalan</option>
-          <option value="Cebuano">Cebuano</option>
-          <option value="Chinese">Chinese</option>
-          <option value="Chinese (China)">Chinese (China)</option>
-          <option value="Chinese (Hong Kong)">Chinese (Hong Kong)</option>
-          <option value="Chinese (Simplified)">Chinese (Simplified)</option>
-          <option value="Chinese (Taiwan)">Chinese (Taiwan)</option>
-          <option value="Chinese (Traditional)">Chinese (Traditional)</option>
-          <option value="Corsican">Corsican</option>
-          <option value="Croatian">Croatian</option>
-          <option value="Czech">Czech</option>
-          <option value="Danish">Danish</option>
-          <option value="Dutch">Dutch</option>
-          <option value="Dutch (auto-generated)">Dutch (auto-generated)</option>
-          <option value="Esperanto">Esperanto</option>
-          <option value="Estonian">Estonian</option>
-          <option value="Filipino">Filipino</option>
-          <option value="Finnish">Finnish</option>
-          <option value="French">French</option>
-          <option value="French (auto-generated)">French (auto-generated)</option>
-          <option value="Galician">Galician</option>
-          <option value="Georgian">Georgian</option>
-          <option value="German">German</option>
-          <option value="German (auto-generated)">German (auto-generated)</option>
-          <option value="Greek">Greek</option>
-          <option value="Gujarati">Gujarati</option>
-          <option value="Haitian Creole">Haitian Creole</option>
-          <option value="Hausa">Hausa</option>
-          <option value="Hawaiian">Hawaiian</option>
-          <option value="Hebrew">Hebrew</option>
-          <option value="Hindi">Hindi</option>
-          <option value="Hmong">Hmong</option>
-          <option value="Hungarian">Hungarian</option>
-          <option value="Icelandic">Icelandic</option>
-          <option value="Igbo">Igbo</option>
-          <option value="Indonesian">Indonesian</option>
-          <option value="Indonesian (auto-generated)">Indonesian (auto-generated)</option>
-          <option value="Interlingue">Interlingue</option>
-          <option value="Irish">Irish</option>
-          <option value="Italian">Italian</option>
-          <option value="Italian (auto-generated)">Italian (auto-generated)</option>
-          <option value="Japanese">Japanese</option>
-          <option value="Japanese (auto-generated)">Japanese (auto-generated)</option>
-          <option value="Javanese">Javanese</option>
-          <option value="Kannada">Kannada</option>
-          <option value="Kazakh">Kazakh</option>
-          <option value="Khmer">Khmer</option>
-          <option value="Korean">Korean</option>
-          <option value="Korean (auto-generated)">Korean (auto-generated)</option>
-          <option value="Kurdish">Kurdish</option>
-          <option value="Kyrgyz">Kyrgyz</option>
-          <option value="Lao">Lao</option>
-          <option value="Latin">Latin</option>
-          <option value="Latvian">Latvian</option>
-          <option value="Lithuanian">Lithuanian</option>
-          <option value="Luxembourgish">Luxembourgish</option>
-          <option value="Macedonian">Macedonian</option>
-          <option value="Malagasy">Malagasy</option>
-          <option value="Malay">Malay</option>
-          <option value="Malayalam">Malayalam</option>
-          <option value="Maltese">Maltese</option>
-          <option value="Maori">Maori</option>
-          <option value="Marathi">Marathi</option>
-          <option value="Mongolian">Mongolian</option>
-          <option value="Nepali">Nepali</option>
-          <option value="Norwegian Bokmål">Norwegian Bokmål</option>
-          <option value="Nyanja">Nyanja</option>
-          <option value="Pashto">Pashto</option>
-          <option value="Persian">Persian</option>
-          <option value="Polish">Polish</option>
-          <option value="Portuguese">Portuguese</option>
-          <option value="Portuguese (auto-generated)">Portuguese (auto-generated)</option>
-          <option value="Portuguese (Brazil)">Portuguese (Brazil)</option>
-          <option value="Punjabi">Punjabi</option>
-          <option value="Romanian">Romanian</option>
-          <option value="Russian">Russian</option>
-          <option value="Russian (auto-generated)">Russian (auto-generated)</option>
-          <option value="Samoan">Samoan</option>
-          <option value="Scottish Gaelic">Scottish Gaelic</option>
-          <option value="Serbian">Serbian</option>
-          <option value="Shona">Shona</option>
-          <option value="Sindhi">Sindhi</option>
-          <option value="Sinhala">Sinhala</option>
-          <option value="Slovak">Slovak</option>
-          <option value="Slovenian">Slovenian</option>
-          <option value="Somali">Somali</option>
-          <option value="Southern Sotho">Southern Sotho</option>
-          <option value="Spanish">Spanish</option>
-          <option value="Spanish (auto-generated)">Spanish (auto-generated)</option>
-          <option value="Spanish (Latin America)">Spanish (Latin America)</option>
-          <option value="Spanish (Mexico)">Spanish (Mexico)</option>
-          <option value="Spanish (Spain)">Spanish (Spain)</option>
-          <option value="Sundanese">Sundanese</option>
-          <option value="Swahili">Swahili</option>
-          <option value="Swedish">Swedish</option>
-          <option value="Tajik">Tajik</option>
-          <option value="Tamil">Tamil</option>
-          <option value="Telugu">Telugu</option>
-          <option value="Thai">Thai</option>
-          <option value="Turkish">Turkish</option>
-          <option value="Turkish (auto-generated)">Turkish (auto-generated)</option>
-          <option value="Ukrainian">Ukrainian</option>
-          <option value="Urdu">Urdu</option>
-          <option value="Uzbek">Uzbek</option>
-          <option value="Vietnamese">Vietnamese</option>
-          <option value="Vietnamese (auto-generated)">Vietnamese (auto-generated)</option>
-          <option value="Welsh">Welsh</option>
-          <option value="Western Frisian">Western Frisian</option>
-          <option value="Xhosa">Xhosa</option>
-          <option value="Yiddish">Yiddish</option>
-          <option value="Yoruba">Yoruba</option>
-          <option value="Zulu">Zulu</option>
-        </select>
-        &nbsp;
-        <select id="invidious-captions[2]">
-          <option value="DEFAULT">Default</option>
-          <option value="">none</option>
-          <option value="English">English</option>
-          <option value="English (auto-generated)">English (auto-generated)</option>
-          <option value="English (United Kingdom)">English (United Kingdom)</option>
-          <option value="English (United States)">English (United States)</option>
-          <option value="Afrikaans">Afrikaans</option>
-          <option value="Albanian">Albanian</option>
-          <option value="Amharic">Amharic</option>
-          <option value="Arabic">Arabic</option>
-          <option value="Armenian">Armenian</option>
-          <option value="Azerbaijani">Azerbaijani</option>
-          <option value="Bangla">Bangla</option>
-          <option value="Basque">Basque</option>
-          <option value="Belarusian">Belarusian</option>
-          <option value="Bosnian">Bosnian</option>
-          <option value="Bulgarian">Bulgarian</option>
-          <option value="Burmese">Burmese</option>
-          <option value="Cantonese (Hong Kong)">Cantonese (Hong Kong)</option>
-          <option value="Catalan">Catalan</option>
-          <option value="Cebuano">Cebuano</option>
-          <option value="Chinese">Chinese</option>
-          <option value="Chinese (China)">Chinese (China)</option>
-          <option value="Chinese (Hong Kong)">Chinese (Hong Kong)</option>
-          <option value="Chinese (Simplified)">Chinese (Simplified)</option>
-          <option value="Chinese (Taiwan)">Chinese (Taiwan)</option>
-          <option value="Chinese (Traditional)">Chinese (Traditional)</option>
-          <option value="Corsican">Corsican</option>
-          <option value="Croatian">Croatian</option>
-          <option value="Czech">Czech</option>
-          <option value="Danish">Danish</option>
-          <option value="Dutch">Dutch</option>
-          <option value="Dutch (auto-generated)">Dutch (auto-generated)</option>
-          <option value="Esperanto">Esperanto</option>
-          <option value="Estonian">Estonian</option>
-          <option value="Filipino">Filipino</option>
-          <option value="Finnish">Finnish</option>
-          <option value="French">French</option>
-          <option value="French (auto-generated)">French (auto-generated)</option>
-          <option value="Galician">Galician</option>
-          <option value="Georgian">Georgian</option>
-          <option value="German">German</option>
-          <option value="German (auto-generated)">German (auto-generated)</option>
-          <option value="Greek">Greek</option>
-          <option value="Gujarati">Gujarati</option>
-          <option value="Haitian Creole">Haitian Creole</option>
-          <option value="Hausa">Hausa</option>
-          <option value="Hawaiian">Hawaiian</option>
-          <option value="Hebrew">Hebrew</option>
-          <option value="Hindi">Hindi</option>
-          <option value="Hmong">Hmong</option>
-          <option value="Hungarian">Hungarian</option>
-          <option value="Icelandic">Icelandic</option>
-          <option value="Igbo">Igbo</option>
-          <option value="Indonesian">Indonesian</option>
-          <option value="Indonesian (auto-generated)">Indonesian (auto-generated)</option>
-          <option value="Interlingue">Interlingue</option>
-          <option value="Irish">Irish</option>
-          <option value="Italian">Italian</option>
-          <option value="Italian (auto-generated)">Italian (auto-generated)</option>
-          <option value="Japanese">Japanese</option>
-          <option value="Japanese (auto-generated)">Japanese (auto-generated)</option>
-          <option value="Javanese">Javanese</option>
-          <option value="Kannada">Kannada</option>
-          <option value="Kazakh">Kazakh</option>
-          <option value="Khmer">Khmer</option>
-          <option value="Korean">Korean</option>
-          <option value="Korean (auto-generated)">Korean (auto-generated)</option>
-          <option value="Kurdish">Kurdish</option>
-          <option value="Kyrgyz">Kyrgyz</option>
-          <option value="Lao">Lao</option>
-          <option value="Latin">Latin</option>
-          <option value="Latvian">Latvian</option>
-          <option value="Lithuanian">Lithuanian</option>
-          <option value="Luxembourgish">Luxembourgish</option>
-          <option value="Macedonian">Macedonian</option>
-          <option value="Malagasy">Malagasy</option>
-          <option value="Malay">Malay</option>
-          <option value="Malayalam">Malayalam</option>
-          <option value="Maltese">Maltese</option>
-          <option value="Maori">Maori</option>
-          <option value="Marathi">Marathi</option>
-          <option value="Mongolian">Mongolian</option>
-          <option value="Nepali">Nepali</option>
-          <option value="Norwegian Bokmål">Norwegian Bokmål</option>
-          <option value="Nyanja">Nyanja</option>
-          <option value="Pashto">Pashto</option>
-          <option value="Persian">Persian</option>
-          <option value="Polish">Polish</option>
-          <option value="Portuguese">Portuguese</option>
-          <option value="Portuguese (auto-generated)">Portuguese (auto-generated)</option>
-          <option value="Portuguese (Brazil)">Portuguese (Brazil)</option>
-          <option value="Punjabi">Punjabi</option>
-          <option value="Romanian">Romanian</option>
-          <option value="Russian">Russian</option>
-          <option value="Russian (auto-generated)">Russian (auto-generated)</option>
-          <option value="Samoan">Samoan</option>
-          <option value="Scottish Gaelic">Scottish Gaelic</option>
-          <option value="Serbian">Serbian</option>
-          <option value="Shona">Shona</option>
-          <option value="Sindhi">Sindhi</option>
-          <option value="Sinhala">Sinhala</option>
-          <option value="Slovak">Slovak</option>
-          <option value="Slovenian">Slovenian</option>
-          <option value="Somali">Somali</option>
-          <option value="Southern Sotho">Southern Sotho</option>
-          <option value="Spanish">Spanish</option>
-          <option value="Spanish (auto-generated)">Spanish (auto-generated)</option>
-          <option value="Spanish (Latin America)">Spanish (Latin America)</option>
-          <option value="Spanish (Mexico)">Spanish (Mexico)</option>
-          <option value="Spanish (Spain)">Spanish (Spain)</option>
-          <option value="Sundanese">Sundanese</option>
-          <option value="Swahili">Swahili</option>
-          <option value="Swedish">Swedish</option>
-          <option value="Tajik">Tajik</option>
-          <option value="Tamil">Tamil</option>
-          <option value="Telugu">Telugu</option>
-          <option value="Thai">Thai</option>
-          <option value="Turkish">Turkish</option>
-          <option value="Turkish (auto-generated)">Turkish (auto-generated)</option>
-          <option value="Ukrainian">Ukrainian</option>
-          <option value="Urdu">Urdu</option>
-          <option value="Uzbek">Uzbek</option>
-          <option value="Vietnamese">Vietnamese</option>
-          <option value="Vietnamese (auto-generated)">Vietnamese (auto-generated)</option>
-          <option value="Welsh">Welsh</option>
-          <option value="Western Frisian">Western Frisian</option>
-          <option value="Xhosa">Xhosa</option>
-          <option value="Yiddish">Yiddish</option>
-          <option value="Yoruba">Yoruba</option>
-          <option value="Zulu">Zulu</option>
-        </select>
-      </div>
+        <div class="some-block option-block">
+          <h4>Default captions</h4>
+          <select id="invidious-captions[0]">
+            <option value="">none</option>
+            <option value="English">English</option>
+            <option value="English (auto-generated)">English (auto-generated)</option>
+            <option value="English (United Kingdom)">English (United Kingdom)</option>
+            <option value="English (United States)">English (United States)</option>
+            <option value="Afrikaans">Afrikaans</option>
+            <option value="Albanian">Albanian</option>
+            <option value="Amharic">Amharic</option>
+            <option value="Arabic">Arabic</option>
+            <option value="Armenian">Armenian</option>
+            <option value="Azerbaijani">Azerbaijani</option>
+            <option value="Bangla">Bangla</option>
+            <option value="Basque">Basque</option>
+            <option value="Belarusian">Belarusian</option>
+            <option value="Bosnian">Bosnian</option>
+            <option value="Bulgarian">Bulgarian</option>
+            <option value="Burmese">Burmese</option>
+            <option value="Cantonese (Hong Kong)">Cantonese (Hong Kong)</option>
+            <option value="Catalan">Catalan</option>
+            <option value="Cebuano">Cebuano</option>
+            <option value="Chinese">Chinese</option>
+            <option value="Chinese (China)">Chinese (China)</option>
+            <option value="Chinese (Hong Kong)">Chinese (Hong Kong)</option>
+            <option value="Chinese (Simplified)">Chinese (Simplified)</option>
+            <option value="Chinese (Taiwan)">Chinese (Taiwan)</option>
+            <option value="Chinese (Traditional)">Chinese (Traditional)</option>
+            <option value="Corsican">Corsican</option>
+            <option value="Croatian">Croatian</option>
+            <option value="Czech">Czech</option>
+            <option value="Danish">Danish</option>
+            <option value="Dutch">Dutch</option>
+            <option value="Dutch (auto-generated)">Dutch (auto-generated)</option>
+            <option value="Esperanto">Esperanto</option>
+            <option value="Estonian">Estonian</option>
+            <option value="Filipino">Filipino</option>
+            <option value="Finnish">Finnish</option>
+            <option value="French">French</option>
+            <option value="French (auto-generated)">French (auto-generated)</option>
+            <option value="Galician">Galician</option>
+            <option value="Georgian">Georgian</option>
+            <option value="German">German</option>
+            <option value="German (auto-generated)">German (auto-generated)</option>
+            <option value="Greek">Greek</option>
+            <option value="Gujarati">Gujarati</option>
+            <option value="Haitian Creole">Haitian Creole</option>
+            <option value="Hausa">Hausa</option>
+            <option value="Hawaiian">Hawaiian</option>
+            <option value="Hebrew">Hebrew</option>
+            <option value="Hindi">Hindi</option>
+            <option value="Hmong">Hmong</option>
+            <option value="Hungarian">Hungarian</option>
+            <option value="Icelandic">Icelandic</option>
+            <option value="Igbo">Igbo</option>
+            <option value="Indonesian">Indonesian</option>
+            <option value="Indonesian (auto-generated)">Indonesian (auto-generated)</option>
+            <option value="Interlingue">Interlingue</option>
+            <option value="Irish">Irish</option>
+            <option value="Italian">Italian</option>
+            <option value="Italian (auto-generated)">Italian (auto-generated)</option>
+            <option value="Japanese">Japanese</option>
+            <option value="Japanese (auto-generated)">Japanese (auto-generated)</option>
+            <option value="Javanese">Javanese</option>
+            <option value="Kannada">Kannada</option>
+            <option value="Kazakh">Kazakh</option>
+            <option value="Khmer">Khmer</option>
+            <option value="Korean">Korean</option>
+            <option value="Korean (auto-generated)">Korean (auto-generated)</option>
+            <option value="Kurdish">Kurdish</option>
+            <option value="Kyrgyz">Kyrgyz</option>
+            <option value="Lao">Lao</option>
+            <option value="Latin">Latin</option>
+            <option value="Latvian">Latvian</option>
+            <option value="Lithuanian">Lithuanian</option>
+            <option value="Luxembourgish">Luxembourgish</option>
+            <option value="Macedonian">Macedonian</option>
+            <option value="Malagasy">Malagasy</option>
+            <option value="Malay">Malay</option>
+            <option value="Malayalam">Malayalam</option>
+            <option value="Maltese">Maltese</option>
+            <option value="Maori">Maori</option>
+            <option value="Marathi">Marathi</option>
+            <option value="Mongolian">Mongolian</option>
+            <option value="Nepali">Nepali</option>
+            <option value="Norwegian Bokmål">Norwegian Bokmål</option>
+            <option value="Nyanja">Nyanja</option>
+            <option value="Pashto">Pashto</option>
+            <option value="Persian">Persian</option>
+            <option value="Polish">Polish</option>
+            <option value="Portuguese">Portuguese</option>
+            <option value="Portuguese (auto-generated)">Portuguese (auto-generated)</option>
+            <option value="Portuguese (Brazil)">Portuguese (Brazil)</option>
+            <option value="Punjabi">Punjabi</option>
+            <option value="Romanian">Romanian</option>
+            <option value="Russian">Russian</option>
+            <option value="Russian (auto-generated)">Russian (auto-generated)</option>
+            <option value="Samoan">Samoan</option>
+            <option value="Scottish Gaelic">Scottish Gaelic</option>
+            <option value="Serbian">Serbian</option>
+            <option value="Shona">Shona</option>
+            <option value="Sindhi">Sindhi</option>
+            <option value="Sinhala">Sinhala</option>
+            <option value="Slovak">Slovak</option>
+            <option value="Slovenian">Slovenian</option>
+            <option value="Somali">Somali</option>
+            <option value="Southern Sotho">Southern Sotho</option>
+            <option value="Spanish">Spanish</option>
+            <option value="Spanish (auto-generated)">Spanish (auto-generated)</option>
+            <option value="Spanish (Latin America)">Spanish (Latin America)</option>
+            <option value="Spanish (Mexico)">Spanish (Mexico)</option>
+            <option value="Spanish (Spain)">Spanish (Spain)</option>
+            <option value="Sundanese">Sundanese</option>
+            <option value="Swahili">Swahili</option>
+            <option value="Swedish">Swedish</option>
+            <option value="Tajik">Tajik</option>
+            <option value="Tamil">Tamil</option>
+            <option value="Telugu">Telugu</option>
+            <option value="Thai">Thai</option>
+            <option value="Turkish">Turkish</option>
+            <option value="Turkish (auto-generated)">Turkish (auto-generated)</option>
+            <option value="Ukrainian">Ukrainian</option>
+            <option value="Urdu">Urdu</option>
+            <option value="Uzbek">Uzbek</option>
+            <option value="Vietnamese">Vietnamese</option>
+            <option value="Vietnamese (auto-generated)">Vietnamese (auto-generated)</option>
+            <option value="Welsh">Welsh</option>
+            <option value="Western Frisian">Western Frisian</option>
+            <option value="Xhosa">Xhosa</option>
+            <option value="Yiddish">Yiddish</option>
+            <option value="Yoruba">Yoruba</option>
+            <option value="Zulu">Zulu</option>
+          </select>
+          &nbsp;
+          <select id="invidious-captions[1]">
+            <option value="">none</option>
+            <option value="English">English</option>
+            <option value="English (auto-generated)">English (auto-generated)</option>
+            <option value="English (United Kingdom)">English (United Kingdom)</option>
+            <option value="English (United States)">English (United States)</option>
+            <option value="Afrikaans">Afrikaans</option>
+            <option value="Albanian">Albanian</option>
+            <option value="Amharic">Amharic</option>
+            <option value="Arabic">Arabic</option>
+            <option value="Armenian">Armenian</option>
+            <option value="Azerbaijani">Azerbaijani</option>
+            <option value="Bangla">Bangla</option>
+            <option value="Basque">Basque</option>
+            <option value="Belarusian">Belarusian</option>
+            <option value="Bosnian">Bosnian</option>
+            <option value="Bulgarian">Bulgarian</option>
+            <option value="Burmese">Burmese</option>
+            <option value="Cantonese (Hong Kong)">Cantonese (Hong Kong)</option>
+            <option value="Catalan">Catalan</option>
+            <option value="Cebuano">Cebuano</option>
+            <option value="Chinese">Chinese</option>
+            <option value="Chinese (China)">Chinese (China)</option>
+            <option value="Chinese (Hong Kong)">Chinese (Hong Kong)</option>
+            <option value="Chinese (Simplified)">Chinese (Simplified)</option>
+            <option value="Chinese (Taiwan)">Chinese (Taiwan)</option>
+            <option value="Chinese (Traditional)">Chinese (Traditional)</option>
+            <option value="Corsican">Corsican</option>
+            <option value="Croatian">Croatian</option>
+            <option value="Czech">Czech</option>
+            <option value="Danish">Danish</option>
+            <option value="Dutch">Dutch</option>
+            <option value="Dutch (auto-generated)">Dutch (auto-generated)</option>
+            <option value="Esperanto">Esperanto</option>
+            <option value="Estonian">Estonian</option>
+            <option value="Filipino">Filipino</option>
+            <option value="Finnish">Finnish</option>
+            <option value="French">French</option>
+            <option value="French (auto-generated)">French (auto-generated)</option>
+            <option value="Galician">Galician</option>
+            <option value="Georgian">Georgian</option>
+            <option value="German">German</option>
+            <option value="German (auto-generated)">German (auto-generated)</option>
+            <option value="Greek">Greek</option>
+            <option value="Gujarati">Gujarati</option>
+            <option value="Haitian Creole">Haitian Creole</option>
+            <option value="Hausa">Hausa</option>
+            <option value="Hawaiian">Hawaiian</option>
+            <option value="Hebrew">Hebrew</option>
+            <option value="Hindi">Hindi</option>
+            <option value="Hmong">Hmong</option>
+            <option value="Hungarian">Hungarian</option>
+            <option value="Icelandic">Icelandic</option>
+            <option value="Igbo">Igbo</option>
+            <option value="Indonesian">Indonesian</option>
+            <option value="Indonesian (auto-generated)">Indonesian (auto-generated)</option>
+            <option value="Interlingue">Interlingue</option>
+            <option value="Irish">Irish</option>
+            <option value="Italian">Italian</option>
+            <option value="Italian (auto-generated)">Italian (auto-generated)</option>
+            <option value="Japanese">Japanese</option>
+            <option value="Japanese (auto-generated)">Japanese (auto-generated)</option>
+            <option value="Javanese">Javanese</option>
+            <option value="Kannada">Kannada</option>
+            <option value="Kazakh">Kazakh</option>
+            <option value="Khmer">Khmer</option>
+            <option value="Korean">Korean</option>
+            <option value="Korean (auto-generated)">Korean (auto-generated)</option>
+            <option value="Kurdish">Kurdish</option>
+            <option value="Kyrgyz">Kyrgyz</option>
+            <option value="Lao">Lao</option>
+            <option value="Latin">Latin</option>
+            <option value="Latvian">Latvian</option>
+            <option value="Lithuanian">Lithuanian</option>
+            <option value="Luxembourgish">Luxembourgish</option>
+            <option value="Macedonian">Macedonian</option>
+            <option value="Malagasy">Malagasy</option>
+            <option value="Malay">Malay</option>
+            <option value="Malayalam">Malayalam</option>
+            <option value="Maltese">Maltese</option>
+            <option value="Maori">Maori</option>
+            <option value="Marathi">Marathi</option>
+            <option value="Mongolian">Mongolian</option>
+            <option value="Nepali">Nepali</option>
+            <option value="Norwegian Bokmål">Norwegian Bokmål</option>
+            <option value="Nyanja">Nyanja</option>
+            <option value="Pashto">Pashto</option>
+            <option value="Persian">Persian</option>
+            <option value="Polish">Polish</option>
+            <option value="Portuguese">Portuguese</option>
+            <option value="Portuguese (auto-generated)">Portuguese (auto-generated)</option>
+            <option value="Portuguese (Brazil)">Portuguese (Brazil)</option>
+            <option value="Punjabi">Punjabi</option>
+            <option value="Romanian">Romanian</option>
+            <option value="Russian">Russian</option>
+            <option value="Russian (auto-generated)">Russian (auto-generated)</option>
+            <option value="Samoan">Samoan</option>
+            <option value="Scottish Gaelic">Scottish Gaelic</option>
+            <option value="Serbian">Serbian</option>
+            <option value="Shona">Shona</option>
+            <option value="Sindhi">Sindhi</option>
+            <option value="Sinhala">Sinhala</option>
+            <option value="Slovak">Slovak</option>
+            <option value="Slovenian">Slovenian</option>
+            <option value="Somali">Somali</option>
+            <option value="Southern Sotho">Southern Sotho</option>
+            <option value="Spanish">Spanish</option>
+            <option value="Spanish (auto-generated)">Spanish (auto-generated)</option>
+            <option value="Spanish (Latin America)">Spanish (Latin America)</option>
+            <option value="Spanish (Mexico)">Spanish (Mexico)</option>
+            <option value="Spanish (Spain)">Spanish (Spain)</option>
+            <option value="Sundanese">Sundanese</option>
+            <option value="Swahili">Swahili</option>
+            <option value="Swedish">Swedish</option>
+            <option value="Tajik">Tajik</option>
+            <option value="Tamil">Tamil</option>
+            <option value="Telugu">Telugu</option>
+            <option value="Thai">Thai</option>
+            <option value="Turkish">Turkish</option>
+            <option value="Turkish (auto-generated)">Turkish (auto-generated)</option>
+            <option value="Ukrainian">Ukrainian</option>
+            <option value="Urdu">Urdu</option>
+            <option value="Uzbek">Uzbek</option>
+            <option value="Vietnamese">Vietnamese</option>
+            <option value="Vietnamese (auto-generated)">Vietnamese (auto-generated)</option>
+            <option value="Welsh">Welsh</option>
+            <option value="Western Frisian">Western Frisian</option>
+            <option value="Xhosa">Xhosa</option>
+            <option value="Yiddish">Yiddish</option>
+            <option value="Yoruba">Yoruba</option>
+            <option value="Zulu">Zulu</option>
+          </select>
+          &nbsp;
+          <select id="invidious-captions[2]">
+            <option value="">none</option>
+            <option value="English">English</option>
+            <option value="English (auto-generated)">English (auto-generated)</option>
+            <option value="English (United Kingdom)">English (United Kingdom)</option>
+            <option value="English (United States)">English (United States)</option>
+            <option value="Afrikaans">Afrikaans</option>
+            <option value="Albanian">Albanian</option>
+            <option value="Amharic">Amharic</option>
+            <option value="Arabic">Arabic</option>
+            <option value="Armenian">Armenian</option>
+            <option value="Azerbaijani">Azerbaijani</option>
+            <option value="Bangla">Bangla</option>
+            <option value="Basque">Basque</option>
+            <option value="Belarusian">Belarusian</option>
+            <option value="Bosnian">Bosnian</option>
+            <option value="Bulgarian">Bulgarian</option>
+            <option value="Burmese">Burmese</option>
+            <option value="Cantonese (Hong Kong)">Cantonese (Hong Kong)</option>
+            <option value="Catalan">Catalan</option>
+            <option value="Cebuano">Cebuano</option>
+            <option value="Chinese">Chinese</option>
+            <option value="Chinese (China)">Chinese (China)</option>
+            <option value="Chinese (Hong Kong)">Chinese (Hong Kong)</option>
+            <option value="Chinese (Simplified)">Chinese (Simplified)</option>
+            <option value="Chinese (Taiwan)">Chinese (Taiwan)</option>
+            <option value="Chinese (Traditional)">Chinese (Traditional)</option>
+            <option value="Corsican">Corsican</option>
+            <option value="Croatian">Croatian</option>
+            <option value="Czech">Czech</option>
+            <option value="Danish">Danish</option>
+            <option value="Dutch">Dutch</option>
+            <option value="Dutch (auto-generated)">Dutch (auto-generated)</option>
+            <option value="Esperanto">Esperanto</option>
+            <option value="Estonian">Estonian</option>
+            <option value="Filipino">Filipino</option>
+            <option value="Finnish">Finnish</option>
+            <option value="French">French</option>
+            <option value="French (auto-generated)">French (auto-generated)</option>
+            <option value="Galician">Galician</option>
+            <option value="Georgian">Georgian</option>
+            <option value="German">German</option>
+            <option value="German (auto-generated)">German (auto-generated)</option>
+            <option value="Greek">Greek</option>
+            <option value="Gujarati">Gujarati</option>
+            <option value="Haitian Creole">Haitian Creole</option>
+            <option value="Hausa">Hausa</option>
+            <option value="Hawaiian">Hawaiian</option>
+            <option value="Hebrew">Hebrew</option>
+            <option value="Hindi">Hindi</option>
+            <option value="Hmong">Hmong</option>
+            <option value="Hungarian">Hungarian</option>
+            <option value="Icelandic">Icelandic</option>
+            <option value="Igbo">Igbo</option>
+            <option value="Indonesian">Indonesian</option>
+            <option value="Indonesian (auto-generated)">Indonesian (auto-generated)</option>
+            <option value="Interlingue">Interlingue</option>
+            <option value="Irish">Irish</option>
+            <option value="Italian">Italian</option>
+            <option value="Italian (auto-generated)">Italian (auto-generated)</option>
+            <option value="Japanese">Japanese</option>
+            <option value="Japanese (auto-generated)">Japanese (auto-generated)</option>
+            <option value="Javanese">Javanese</option>
+            <option value="Kannada">Kannada</option>
+            <option value="Kazakh">Kazakh</option>
+            <option value="Khmer">Khmer</option>
+            <option value="Korean">Korean</option>
+            <option value="Korean (auto-generated)">Korean (auto-generated)</option>
+            <option value="Kurdish">Kurdish</option>
+            <option value="Kyrgyz">Kyrgyz</option>
+            <option value="Lao">Lao</option>
+            <option value="Latin">Latin</option>
+            <option value="Latvian">Latvian</option>
+            <option value="Lithuanian">Lithuanian</option>
+            <option value="Luxembourgish">Luxembourgish</option>
+            <option value="Macedonian">Macedonian</option>
+            <option value="Malagasy">Malagasy</option>
+            <option value="Malay">Malay</option>
+            <option value="Malayalam">Malayalam</option>
+            <option value="Maltese">Maltese</option>
+            <option value="Maori">Maori</option>
+            <option value="Marathi">Marathi</option>
+            <option value="Mongolian">Mongolian</option>
+            <option value="Nepali">Nepali</option>
+            <option value="Norwegian Bokmål">Norwegian Bokmål</option>
+            <option value="Nyanja">Nyanja</option>
+            <option value="Pashto">Pashto</option>
+            <option value="Persian">Persian</option>
+            <option value="Polish">Polish</option>
+            <option value="Portuguese">Portuguese</option>
+            <option value="Portuguese (auto-generated)">Portuguese (auto-generated)</option>
+            <option value="Portuguese (Brazil)">Portuguese (Brazil)</option>
+            <option value="Punjabi">Punjabi</option>
+            <option value="Romanian">Romanian</option>
+            <option value="Russian">Russian</option>
+            <option value="Russian (auto-generated)">Russian (auto-generated)</option>
+            <option value="Samoan">Samoan</option>
+            <option value="Scottish Gaelic">Scottish Gaelic</option>
+            <option value="Serbian">Serbian</option>
+            <option value="Shona">Shona</option>
+            <option value="Sindhi">Sindhi</option>
+            <option value="Sinhala">Sinhala</option>
+            <option value="Slovak">Slovak</option>
+            <option value="Slovenian">Slovenian</option>
+            <option value="Somali">Somali</option>
+            <option value="Southern Sotho">Southern Sotho</option>
+            <option value="Spanish">Spanish</option>
+            <option value="Spanish (auto-generated)">Spanish (auto-generated)</option>
+            <option value="Spanish (Latin America)">Spanish (Latin America)</option>
+            <option value="Spanish (Mexico)">Spanish (Mexico)</option>
+            <option value="Spanish (Spain)">Spanish (Spain)</option>
+            <option value="Sundanese">Sundanese</option>
+            <option value="Swahili">Swahili</option>
+            <option value="Swedish">Swedish</option>
+            <option value="Tajik">Tajik</option>
+            <option value="Tamil">Tamil</option>
+            <option value="Telugu">Telugu</option>
+            <option value="Thai">Thai</option>
+            <option value="Turkish">Turkish</option>
+            <option value="Turkish (auto-generated)">Turkish (auto-generated)</option>
+            <option value="Ukrainian">Ukrainian</option>
+            <option value="Urdu">Urdu</option>
+            <option value="Uzbek">Uzbek</option>
+            <option value="Vietnamese">Vietnamese</option>
+            <option value="Vietnamese (auto-generated)">Vietnamese (auto-generated)</option>
+            <option value="Welsh">Welsh</option>
+            <option value="Western Frisian">Western Frisian</option>
+            <option value="Xhosa">Xhosa</option>
+            <option value="Yiddish">Yiddish</option>
+            <option value="Yoruba">Yoruba</option>
+            <option value="Zulu">Zulu</option>
+          </select>
+        </div>
 
-      <div class="some-block option-block">
-        <h4>Show related videos</h4>
-        <select id="invidious-related_videos">
-          <option value="DEFAULT">Default</option>
-          <option value="true">True</option>
-          <option value="false">False</option>
-          </option>
-        </select>
-      </div>
+        <div class="some-block option-block">
+          <h4>Show related videos</h4>
+          <input id="invidious-related_videos" type="checkbox" />
+        </div>
 
-      <div class="some-block option-block">
-        <h4>Show annotations by default</h4>
-        <select id="invidious-annotations">
-          <option value="DEFAULT">Default</option>
-          <option value="true">True</option>
-          <option value="false">False</option>
-          </option>
-        </select>
-      </div>
+        <div class="some-block option-block">
+          <h4>Show annotations by default</h4>
+          <input id="invidious-annotations" type="checkbox" />
+        </div>
 
-      <div class="some-block option-block">
-        <h4>Automatically extend video description</h4>
-        <select id="invidious-extend_desc">
-          <option value="DEFAULT">Default</option>
-          <option value="true">True</option>
-          <option value="false">False</option>
-          </option>
-        </select>
-      </div>
+        <div class="some-block option-block">
+          <h4>Automatically extend video description</h4>
+          <input id="invidious-extend_desc" type="checkbox" />
+        </div>
 
-      <div class="some-block option-block">
-        <h4>Interactive 360 degree videos (requires WebGL)</h4>
-        <select id="invidious-vr_mode">
-          <option value="DEFAULT">Default</option>
-          <option value="true">True</option>
-          <option value="false">False</option>
-          </option>
-        </select>
-      </div>
+        <div class="some-block option-block">
+          <h4>Interactive 360 degree videos (requires WebGL)</h4>
+          <input id="invidious-vr_mode" type="checkbox" />
+        </div>
 
-      <div class="some-block option-block">
-        <h4>Save playback position</h4>
-        <select id="invidious-save_player_pos">
-          <option value="DEFAULT">Default</option>
-          <option value="true">True</option>
-          <option value="false">False</option>
-          </option>
-        </select>
-      </div>
+        <div class="some-block option-block">
+          <h4>Save playback position</h4>
+          <input id="invidious-save_player_pos" type="checkbox" />
+        </div>
 
+      </div>
       <hr>
 
       <div id="invidious-normal">
+        
         <div class="some-block option-block">
           <h4>Default Instances</h4>
         </div>
diff --git a/src/pages/options/youtube/youtube.js b/src/pages/options/youtube/youtube.js
index cd8e22c0..97bfd44a 100644
--- a/src/pages/options/youtube/youtube.js
+++ b/src/pages/options/youtube/youtube.js
@@ -1,6 +1,6 @@
 import youtubeHelper from "../../../assets/javascripts/helpers/youtube/youtube.js";
 
-let disableYoutubeElement = document.getElementById("disable-invidious");
+
 
 let youtubeFrontendElement = document.getElementById("youtube-frontend");
 let invidiousDivElement = document.getElementById("invidious");
@@ -8,8 +8,20 @@ let pipedDivElement = document.getElementById("piped");
 let pipedMaterialDivElement = document.getElementById("pipedMaterial");
 let invidiousPipedPipedMaterialDivElement = document.getElementById("invidious-piped-pipedMaterial");
 let freetubeYatteeDivElement = document.getElementById("freetube-yatte");
+let customSettingsDivElement = document.getElementsByClassName("custom-settings");
+
+function changeFrontendsSettings() {
+    console.log('changeFrontendsSettings()');
+    let frontend = youtubeFrontendElement.value;
+
+    console.log("customSettingsDivElement", customSettingsDivElement[0].style.display);
+    if (enableYoutubeCustomSettingsElement.checked)
+        for (const item of customSettingsDivElement) item.style.display = 'block';
+    else {
+        console.log("setting it to none");
+        for (const item of customSettingsDivElement) item.style.display = 'none';
+    }
 
-function changeFrontendsSettings(frontend) {
     if (frontend == 'invidious') {
         invidiousPipedPipedMaterialDivElement.style.display = 'block'
         invidiousDivElement.style.display = 'block';
@@ -62,7 +74,7 @@ youtubeFrontendElement.addEventListener("change",
     event => {
         let frontend = event.target.options[youtubeFrontendElement.selectedIndex].value
         youtubeHelper.setFrontend(frontend);
-        changeFrontendsSettings(frontend);
+        changeFrontendsSettings();
     }
 );
 
@@ -75,10 +87,20 @@ youtubeEmbedFrontendElement.addEventListener("change",
     }
 );
 
+let disableYoutubeElement = document.getElementById("disable-invidious");
 disableYoutubeElement.addEventListener("change",
     event => youtubeHelper.setDisable(!event.target.checked)
 );
 
+let enableYoutubeCustomSettingsElement = document.getElementById("enable-youtube-custom-settings");
+enableYoutubeCustomSettingsElement.addEventListener("change",
+    event => {
+        youtubeHelper.setEnableCustomSettings(event.target.checked)
+        changeFrontendsSettings();
+    }
+);
+
+
 let volumeElement = document.getElementById("invidious-volume");
 let volumeValueElement = document.getElementById("volume-value");
 volumeElement.addEventListener("input",
@@ -87,18 +109,10 @@ volumeElement.addEventListener("input",
         volumeValueElement.textContent = `${volumeElement.value}%`;
     }
 );
-let invidiousClearVolumeElement = document.getElementById("clear-invidious-volume");
-invidiousClearVolumeElement.addEventListener("click",
-    (_) => {
-        youtubeHelper.setVolume('--');
-        volumeValueElement.textContent = `--%`;
-        volumeElement.value = null;
-    }
-);
 
 let autoplayElement = document.getElementById("invidious-autoplay");
 autoplayElement.addEventListener("change",
-    event => youtubeHelper.setAutoplay(event.target.options[autoplayElement.selectedIndex].value)
+    event => youtubeHelper.setAutoplay(event.target.checked)
 );
 
 let OnlyEmbeddedVideoElement = document.getElementById("only-embed");
@@ -154,6 +168,7 @@ function changeProtocolSettings(protocol) {
 
 youtubeHelper.init().then(() => {
     disableYoutubeElement.checked = !youtubeHelper.getDisable();
+    enableYoutubeCustomSettingsElement.checked = youtubeHelper.getEnableCustomSettings();
     volumeElement.value = youtubeHelper.getVolume();
     volumeValueElement.textContent = `${youtubeHelper.getVolume()}%`;
     OnlyEmbeddedVideoElement.value = youtubeHelper.getOnlyEmbeddedVideo();
@@ -161,7 +176,7 @@ youtubeHelper.init().then(() => {
     autoplayElement.value = youtubeHelper.getAutoplay();
     let frontend = youtubeHelper.getFrontend();
     youtubeFrontendElement.value = frontend;
-    changeFrontendsSettings(frontend);
+    changeFrontendsSettings();
 
     let protocol = youtubeHelper.getProtocol();
     protocolElement.value = protocol;
diff --git a/src/pages/stylesheets/styles.css b/src/pages/stylesheets/styles.css
index d5452c3d..999b5afd 100644
--- a/src/pages/stylesheets/styles.css
+++ b/src/pages/stylesheets/styles.css
@@ -328,6 +328,15 @@ button.add {
   cursor: pointer;
 }
 
+div.disabled {
+  background-color: rgb(39, 39, 39);
+  position: absolute;
+  top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+}
+
 .light-theme.popup,
 .light-theme .popup {
   background-color: var(--bg-secondary);