Added almost all invidious settings #104

src/assets/javascripts/helpers/youtube/invidious-options.js

@@ -0,0 +1,177 @@
+export let invidiousQuality;
+export const getinvidiousQuality = () => invidiousQuality;
+export function setinvidiousQuality(val) {
+    invidiousQuality = val;
+    browser.storage.local.set({ invidiousQuality })
+    console.log("invidiousQuality: ", invidiousQuality)
+}
+
+export let invidiousAlwaysProxy;
+export const getInvidiousAlwaysProxy = () => invidiousAlwaysProxy;
+export function setInvidiousAlwaysProxy(val) {
+    invidiousAlwaysProxy = val;
+    browser.storage.local.set({ invidiousAlwaysProxy })
+    console.log("invidiousAlwaysProxy: ", invidiousAlwaysProxy);
+}
+
+export let invidiousPlayerStyle;
+export const getInvidiousPlayerStyle = () => invidiousPlayerStyle;
+export function setInvidiousPlayerStyle(val) {
+    invidiousPlayerStyle = val;
+    browser.storage.local.set({ invidiousPlayerStyle })
+    console.log("invidiousPlayerStyle: ", invidiousPlayerStyle)
+}
+
+export let invidiousVideoLoop;
+export const getInvidiousVideoLoop = () => invidiousVideoLoop;
+export function setInvidiousVideoLoop(val) {
+    invidiousVideoLoop = val;
+    browser.storage.local.set({ invidiousVideoLoop })
+    console.log("invidiousVideoLoop: ", invidiousVideoLoop)
+}
+
+export let invidiousContinueAutoplay;
+export const getInvidiousContinueAutoplay = () => invidiousContinueAutoplay;
+export function setInvidiousContinueAutoplay(val) {
+    invidiousContinueAutoplay = val;
+    browser.storage.local.set({ invidiousContinueAutoplay })
+    console.log("invidiousContinueAutoplay: ", invidiousContinueAutoplay)
+}
+
+export let invidiousContinue;
+export const getInvidiousContinue = () => invidiousContinue;
+export function setInvidiousContinue(val) {
+    invidiousContinue = val;
+    browser.storage.local.set({ invidiousContinue })
+    console.log("invidiousContinue: ", invidiousContinue)
+}
+
+export let invidiousListen;
+export const getInvidiousListen = () => invidiousListen;
+export function setInvidiousListen(val) {
+    invidiousListen = val;
+    browser.storage.local.set({ invidiousListen })
+    console.log("invidiousListen: ", invidiousListen)
+}
+
+export let invidiousSpeed;
+export const getInvidiousSpeed = () => invidiousSpeed;
+export function setInvidiousSpeed(val) {
+    invidiousSpeed = val;
+    browser.storage.local.set({ invidiousSpeed })
+    console.log("invidiousSpeed: ", invidiousSpeed)
+}
+
+export let invidiousQualityDash;
+export const getInvidiousQualityDash = () => invidiousQualityDash;
+export function setInvidiousQualityDash(val) {
+    invidiousQualityDash = val;
+    browser.storage.local.set({ invidiousQualityDash })
+    console.log("invidiousQualityDash: ", invidiousQualityDash)
+}
+
+export let invidiousComments;
+export const getInvidiousComments = () => invidiousComments;
+export function setInvidiousComments(val) {
+    invidiousComments = val;
+    browser.storage.local.set({ invidiousComments })
+    console.log("invidiousComments: ", invidiousComments)
+}
+
+
+export let invidiousCaptions;
+export const getInvidiousCaptions = () => invidiousCaptions;
+export function setInvidiousCaptions(val) {
+    invidiousCaptions = val;
+    browser.storage.local.set({ invidiousCaptions })
+    console.log("invidiousCaptions: ", invidiousCaptions)
+}
+
+export let invidiousRelatedVideos;
+export const getInvidiousRelatedVideos = () => invidiousRelatedVideos;
+export function setInvidiousRelatedVideos(val) {
+    invidiousRelatedVideos = val;
+    browser.storage.local.set({ invidiousRelatedVideos })
+    console.log("invidiousRelatedVideos: ", invidiousRelatedVideos)
+}
+
+export let invidiousAnnotations;
+export const getInvidiousAnnotations = () => invidiousAnnotations;
+export function setInvidiousAnnotations(val) {
+    invidiousAnnotations = val;
+    browser.storage.local.set({ invidiousAnnotations })
+    console.log("invidiousAnnotations: ", invidiousAnnotations)
+}
+
+export let invidiousExtendDesc;
+export const getInvidiousExtendDesc = () => invidiousExtendDesc;
+export function setInvidiousExtendDesc(val) {
+    invidiousExtendDesc = val;
+    browser.storage.local.set({ invidiousExtendDesc })
+    console.log("invidiousExtendDesc: ", invidiousExtendDesc)
+}
+
+export let invidiousVrMode;
+export const getInvidiousVrMode = () => invidiousVrMode;
+export function setInvidiousVrMode(val) {
+    invidiousVrMode = val;
+    browser.storage.local.set({ invidiousVrMode })
+    console.log("invidiousVrMode: ", invidiousVrMode)
+}
+
+export let invidiousSavePlayerPos;
+export const getInvidiousSavePlayerPos = () => invidiousSavePlayerPos;
+export function setInvidiousSavePlayerPos(val) {
+    invidiousSavePlayerPos = val;
+    browser.storage.local.set({ invidiousSavePlayerPos })
+    console.log("invidiousSavePlayerPos: ", invidiousSavePlayerPos)
+}
+
+export async function invidiousInit() {
+    return new Promise(
+        resolve => {
+            browser.storage.local.get(
+                [
+                    "invidiousQuality",
+                    "invidiousAlwaysProxy",
+                    "invidiousQuality",
+                    "invidiousPlayerStyle",
+                    "invidiousVideoLoop",
+                    "invidiousContinueAutoplay",
+                    "invidiousContinue",
+                    "invidiousListen",
+                    "invidiousSpeed",
+                    "invidiousQualityDash",
+                    "invidiousComments",
+                    "invidiousCaptions",
+                    "invidiousRelatedVideos",
+                    "invidiousAnnotations",
+                    "invidiousExtendDesc",
+                    "invidiousVrMode",
+                    "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';
+
+
+                    resolve();
+                }
+            )
+        }
+    )
+}

src/assets/javascripts/helpers/youtube/youtube.js

@@ -1,6 +1,73 @@
 "use strict";
 
 import commonHelper from '../common.js'
+import {
+  invidiousQuality,
+  getinvidiousQuality,
+  setinvidiousQuality,
+
+  invidiousAlwaysProxy,
+  setInvidiousAlwaysProxy,
+  getInvidiousAlwaysProxy,
+
+  invidiousPlayerStyle,
+  getInvidiousPlayerStyle,
+  setInvidiousPlayerStyle,
+
+  invidiousInit,
+  invidiousVideoLoop,
+  getInvidiousVideoLoop,
+  setInvidiousVideoLoop,
+
+  invidiousContinueAutoplay,
+  getInvidiousContinueAutoplay,
+  setInvidiousContinueAutoplay,
+
+  invidiousContinue,
+  getInvidiousContinue,
+  setInvidiousContinue,
+
+  invidiousListen,
+  getInvidiousListen,
+  setInvidiousListen,
+
+  invidiousSpeed,
+  getInvidiousSpeed,
+  setInvidiousSpeed,
+
+  invidiousQualityDash,
+  getInvidiousQualityDash,
+  setInvidiousQualityDash,
+
+  invidiousComments,
+  getInvidiousComments,
+  setInvidiousComments,
+
+  invidiousCaptions,
+  getInvidiousCaptions,
+  setInvidiousCaptions,
+
+  invidiousRelatedVideos,
+  getInvidiousRelatedVideos,
+  setInvidiousRelatedVideos,
+
+  invidiousAnnotations,
+  getInvidiousAnnotations,
+  setInvidiousAnnotations,
+
+  invidiousExtendDesc,
+  getInvidiousExtendDesc,
+  setInvidiousExtendDesc,
+
+  invidiousVrMode,
+  getInvidiousVrMode,
+  setInvidiousVrMode,
+
+  invidiousSavePlayerPos,
+  getInvidiousSavePlayerPos,
+  setInvidiousSavePlayerPos,
+
+} from './invidious-options.js'
 
 window.browser = window.browser || window.chrome;
 
@@ -44,6 +111,7 @@ let redirects = {
 
 const getRedirects = () => redirects;
 
+let applyThemeToSites;
 function getCustomRedirects() {
   return {
     "invidious": {
@@ -187,14 +255,6 @@ function setProtocol(val) {
   console.log("youtubeProtocol: ", val)
 }
 
-let invidiousAlwaysProxy;
-function setInvidiousAlwaysProxy(val) {
-  invidiousAlwaysProxy = val;
-  browser.storage.local.set({ invidiousAlwaysProxy })
-  console.log("invidiousAlwaysProxy: ", invidiousAlwaysProxy);
-}
-const getInvidiousAlwaysProxy = () => invidiousAlwaysProxy;
-
 let OnlyEmbeddedVideo;
 function setOnlyEmbeddedVideo(val) {
   OnlyEmbeddedVideo = val;
@@ -203,21 +263,7 @@ function setOnlyEmbeddedVideo(val) {
 }
 const getOnlyEmbeddedVideo = () => OnlyEmbeddedVideo;
 
-let invidiousVideoQuality;
-function setInvidiousVideoQuality(val) {
-  invidiousVideoQuality = val;
-  browser.storage.local.set({ invidiousVideoQuality })
-  console.log("invidiousVideoQuality: ", invidiousVideoQuality)
-}
-const getInvidiousVideoQuality = () => invidiousVideoQuality;
-
 let theme;
-const getTheme = () => theme;
-function setTheme(val) {
-  theme = val;
-  browser.storage.local.set({ theme: theme })
-  console.log("theme: ", theme)
-}
 
 let volume;
 const getVolume = () => volume;
@@ -227,22 +273,6 @@ function setVolume(val) {
   console.log("youtubeVolume: ", volume)
 }
 
-let invidiousPlayerStyle;
-const getInvidiousPlayerStyle = () => invidiousPlayerStyle;
-function setInvidiousPlayerStyle(val) {
-  invidiousPlayerStyle = val;
-  browser.storage.local.set({ invidiousPlayerStyle })
-  console.log("invidiousPlayerStyle: ", invidiousPlayerStyle)
-}
-
-let invidiousSubtitles;
-let getInvidiousSubtitles = () => invidiousSubtitles;
-function setInvidiousSubtitles(val) {
-  invidiousSubtitles = val;
-  browser.storage.local.set({ invidiousSubtitles })
-  console.log("invidiousSubtitles: ", invidiousSubtitles)
-}
-
 let autoplay;
 const getAutoplay = () => autoplay;
 function setAutoplay(val) {
@@ -267,14 +297,6 @@ function setYoutubeEmbedFrontend(val) {
   console.log("youtubeEmbedFrontend: ", youtubeEmbedFrontend)
 }
 
-let persistInvidiousPrefs;
-const getPersistInvidiousPrefs = () => persistInvidiousPrefs;
-function setPersistInvidiousPrefs(val) {
-  persistInvidiousPrefs = val;
-  browser.storage.local.set({ persistInvidiousPrefs })
-  console.log("persistInvidiousPrefs: ", persistInvidiousPrefs)
-}
-
 let bypassWatchOnYoutube;
 const getBypassWatchOnYoutube = () => bypassWatchOnYoutube;
 function setBypassWatchOnYoutube(val) {
@@ -305,7 +327,6 @@ function isException(url) {
   return false;
 }
 
-
 let alwaysUsePreferred;
 function redirect(url, details, initiator) {
   if (disable) return null;
@@ -441,9 +462,6 @@ function redirect(url, details, initiator) {
 
 function changeInstance(url) {
   let protocolHost = `${url.protocol}//${url.host}`;
-
-  console.log("protocolHost", protocolHost);
-
   if (
     protocol == 'normal' &&
     ![
@@ -555,23 +573,7 @@ function initPipedMaterialLocalStorage(tabId) {
   );
 }
 
-let applyThemeToSites;
 function initInvidiousCookies() {
-  let prefs = {};
-  if (invidiousAlwaysProxy != "DEFAULT") prefs.local = invidiousAlwaysProxy == 'true';
-  if (invidiousVideoQuality != "DEFAULT") prefs.quality = invidiousVideoQuality;
-  if (applyThemeToSites && theme != "DEFAULT") prefs.dark_mode = theme;
-  if (volume != "--") prefs.volume = parseInt(volume);
-  if (invidiousPlayerStyle != "DEFAULT") prefs.player_style = invidiousPlayerStyle;
-  if (invidiousSubtitles != "DEFAULT") prefs.subtitles = invidiousSubtitles;
-  if (autoplay != "DEFAULT") prefs.autoplay = autoplay == 'true';
-
-  let allInstances = [
-    ...redirects.invidious.normal,
-    ...redirects.invidious.tor,
-    ...invidiousNormalCustomRedirects,
-    ...invidiousTorCustomRedirects,
-  ]
 
   let checkedInstances = [
     ...invidiousNormalRedirectsChecks,
@@ -580,37 +582,76 @@ function initInvidiousCookies() {
     ...invidiousTorCustomRedirects,
   ];
 
-  for (const item of allInstances)
-    if (!checkedInstances.includes(item))
-      browser.cookies.remove({
-        url: item,
-        name: "PREFS",
-      })
-
   for (const instanceUrl of checkedInstances)
+    browser.cookies.get(
+      {
+        url: instanceUrl,
+        name: "PREFS",
+      },
+      cookie => {
+        let prefs = {};
+        if (cookie) 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 (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] = ""
+
+        if (invidiousCaptions[0] != "DEFAULT" || invidiousCaptions[1] != "DEFAULT" || invidiousCaptions[2] != "DEFAULT") prefs.captions = [];
+
+        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] = "";
+
+        if (invidiousCaptions[2] != "DEFAULT") prefs.captions[2] = invidiousCaptions[2];
+        else if (invidiousCaptions[0] != "DEFAULT" || invidiousCaptions[1] != "DEFAULT") prefs.captions[2] = "";
+
+        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';
+
+        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() {
-  return new Promise((resolve) => {
+  await invidiousInit();
+  return new Promise(
+    resolve => {
       fetch('/instances/data.json').then(response => response.text()).then(data => {
         let dataJson = JSON.parse(data);
         browser.storage.local.get(
           [
-          "invidiousAlwaysProxy",
-          "invidiousVideoQuality",
             "theme",
             "applyThemeToSites",
-          "persistInvidiousPrefs",
             "disableYoutube",
             "OnlyEmbeddedVideo",
             "youtubeVolume",
-          "invidiousPlayerStyle",
-          "invidiousSubtitles",
             "youtubeAutoplay",
             "youtubeRedirects",
             "youtubeFrontend",
@@ -655,11 +696,7 @@ async function init() {
             volume = r.youtubeVolume ?? '--';
             autoplay = r.youtubeAutoplay ?? 'DEFAULT';
 
-          invidiousAlwaysProxy = r.invidiousAlwaysProxy ?? 'DEFAULT';
             OnlyEmbeddedVideo = r.OnlyEmbeddedVideo ?? 'both';
-          invidiousVideoQuality = r.invidiousVideoQuality ?? 'DEFAULT';
-          invidiousPlayerStyle = r.invidiousPlayerStyle ?? 'DEFAULT';
-          invidiousSubtitles = r.invidiousSubtitles || '';
 
             invidiousNormalRedirectsChecks = r.invidiousNormalRedirectsChecks ?? [...redirects.invidious.normal];
             invidiousNormalCustomRedirects = r.invidiousNormalCustomRedirects ?? [];
@@ -673,15 +710,12 @@ async function init() {
             pipedTorRedirectsChecks = r.pipedTorRedirectsChecks ?? [...redirects.piped.tor];
             pipedTorCustomRedirects = r.pipedTorCustomRedirects ?? [];
 
-
             pipedMaterialNormalRedirectsChecks = r.pipedMaterialNormalRedirectsChecks ?? [...redirects.pipedMaterial.normal];
             pipedMaterialNormalCustomRedirects = r.pipedMaterialNormalCustomRedirects ?? [];
 
             pipedMaterialTorRedirectsChecks = r.pipedMaterialTorRedirectsChecks ?? [...redirects.pipedMaterial.tor];
             pipedMaterialTorCustomRedirects = r.pipedMaterialTorCustomRedirects ?? [];
 
-          persistInvidiousPrefs = r.persistInvidiousPrefs ?? false;
-
             alwaysUsePreferred = r.alwaysUsePreferred ?? false;
 
             bypassWatchOnYoutube = r.bypassWatchOnYoutube ?? true;
@@ -689,8 +723,8 @@ async function init() {
             if (r.youtubeEmbedExceptions) exceptions = r.youtubeEmbedExceptions;
 
             initInvidiousCookies();
-
             resolve();
+
           });
       });
     })
@@ -699,7 +733,7 @@ async function init() {
 export default {
   getBypassWatchOnYoutube,
   setBypassWatchOnYoutube,
-  initInvidiousCookies,
+
   initPipedLocalStorage,
   initPipedMaterialLocalStorage,
 
@@ -719,38 +753,70 @@ export default {
 
   isPipedorInvidious,
 
+  initInvidiousCookies,
+
+  setInvidiousAlwaysProxy,
+  getInvidiousAlwaysProxy,
+
+  setinvidiousQuality,
+  getinvidiousQuality,
+
+  setInvidiousPlayerStyle,
+  getInvidiousPlayerStyle,
+
+  getInvidiousVideoLoop,
+  setInvidiousVideoLoop,
+
   getDisable,
   setDisable,
 
   getProtocol,
   setProtocol,
 
-  setInvidiousAlwaysProxy,
-  getInvidiousAlwaysProxy,
-
   setOnlyEmbeddedVideo,
   getOnlyEmbeddedVideo,
 
-  setInvidiousVideoQuality,
-  getInvidiousVideoQuality,
-
-  setTheme,
-  getTheme,
-
   setVolume,
   getVolume,
 
-  setInvidiousPlayerStyle,
-  getInvidiousPlayerStyle,
-
-  setInvidiousSubtitles,
-  getInvidiousSubtitles,
-
   setAutoplay,
   getAutoplay,
 
-  getPersistInvidiousPrefs,
-  setPersistInvidiousPrefs,
+  getInvidiousContinueAutoplay,
+  setInvidiousContinueAutoplay,
+
+  getInvidiousContinue,
+  setInvidiousContinue,
+
+  getInvidiousListen,
+  setInvidiousListen,
+
+  getInvidiousSpeed,
+  setInvidiousSpeed,
+
+  getInvidiousQualityDash,
+  setInvidiousQualityDash,
+
+  getInvidiousComments,
+  setInvidiousComments,
+
+  getInvidiousCaptions,
+  setInvidiousCaptions,
+
+  getInvidiousRelatedVideos,
+  setInvidiousRelatedVideos,
+
+  getInvidiousAnnotations,
+  setInvidiousAnnotations,
+
+  getInvidiousExtendDesc,
+  setInvidiousExtendDesc,
+
+  getInvidiousVrMode,
+  setInvidiousVrMode,
+
+  getInvidiousSavePlayerPos,
+  setInvidiousSavePlayerPos,
 
   getInvidiousNormalRedirectsChecks,
   setInvidiousNormalRedirectsChecks,

src/pages/options/general/general.js

@@ -115,7 +115,6 @@ generalHelper.init().then(() => {
   )
   let exceptionsCustomInstances = generalHelper.getExceptions();
   function calcExceptionsCustomInstances() {
-    console.log("exceptionsCustomInstances", exceptionsCustomInstances)
     document.getElementById("exceptions-custom-checklist").innerHTML =
       [...exceptionsCustomInstances.url, ...exceptionsCustomInstances.regex].map(
         (x) => `<div>${x}<button class="add" id="clear-${x}">

src/pages/options/youtube/embed-exceptions.js

@@ -23,7 +23,6 @@ youtubeHelper.init().then(() => {
     )
     let exceptionsCustomInstances = youtubeHelper.getExceptions();
     function calcExceptionsCustomInstances() {
-        console.log("exceptionsCustomInstances", exceptionsCustomInstances)
         document.getElementById("exceptions-custom-checklist").innerHTML =
             [...exceptionsCustomInstances.url, ...exceptionsCustomInstances.regex].map(
                 (x) => `<div>${x}<button class="add" id="clear-${x}">

src/pages/options/youtube/invidious.js

@@ -1,39 +1,139 @@
 import youtubeHelper from "../../../assets/javascripts/helpers/youtube/youtube.js";
 import commonHelper from "../../../assets/javascripts/helpers/common.js";
 
-let invidiousAlwaysProxyElement = document.getElementById("invidious-always-proxy");
+let invidiousAlwaysProxyElement = document.getElementById("invidious-local");
 invidiousAlwaysProxyElement.addEventListener("change",
-    (event) => youtubeHelper.setInvidiousAlwaysProxy(event.target.options[invidiousAlwaysProxyElement.selectedIndex].value)
+    event => youtubeHelper.setInvidiousAlwaysProxy(event.target.options[invidiousAlwaysProxyElement.selectedIndex].value)
 );
 
-let invidiousPlayerStyleElement = document.getElementById("invidious-player-style");
+let invidiousPlayerStyleElement = document.getElementById("invidious-player_style");
 invidiousPlayerStyleElement.addEventListener("change",
-    (event) => youtubeHelper.setInvidiousPlayerStyle(event.target.options[invidiousPlayerStyleElement.selectedIndex].value)
+    event => youtubeHelper.setInvidiousPlayerStyle(event.target.options[invidiousPlayerStyleElement.selectedIndex].value)
 );
 
-let invidiousVideoQualityElement = document.getElementById("video-quality");
-invidiousVideoQualityElement.addEventListener("change",
-    (event) => youtubeHelper.setInvidiousVideoQuality(event.target.options[invidiousVideoQualityElement.selectedIndex].value)
+let invidiousQualityElement = document.getElementById("invidious-quality");
+invidiousQualityElement.addEventListener("change",
+    event => youtubeHelper.setinvidiousQuality(event.target.options[invidiousQualityElement.selectedIndex].value)
 );
 
-let invidiousSubtitlesElement = document.getElementById("invidious-subtitles");
-invidiousSubtitlesElement.addEventListener("change",
-    () => youtubeHelper.setInvidiousSubtitles(invidiousSubtitlesElement.value)
+let invidiousVideoLoopElement = document.getElementById("invidious-video_loop");
+invidiousVideoLoopElement.addEventListener("change",
+    event => youtubeHelper.setInvidiousVideoLoop(event.target.options[invidiousVideoLoopElement.selectedIndex].value)
 );
 
-// let persistInvidiousPrefsElement = document.getElementById("persist-invidious-prefs");
-// persistInvidiousPrefsElement.addEventListener("change",
-//     (event) => youtubeHelper.setPersistInvidiousPrefs(event.target.checked)
-// );
+let invidiousContinueAutoplayElement = document.getElementById("invidious-continue_autoplay");
+invidiousContinueAutoplayElement.addEventListener("change",
+    event => youtubeHelper.setInvidiousContinueAutoplay(event.target.options[invidiousContinueAutoplayElement.selectedIndex].value)
+);
 
+let invidiousContinueElement = document.getElementById("invidious-continue");
+invidiousContinueElement.addEventListener("change",
+    event => youtubeHelper.setInvidiousContinue(event.target.options[invidiousContinueElement.selectedIndex].value)
+);
+
+let invidiousListenElement = document.getElementById("invidious-listen");
+invidiousListenElement.addEventListener("change",
+    event => youtubeHelper.setInvidiousListen(event.target.options[invidiousListenElement.selectedIndex].value)
+);
+
+let invidiousSpeedElement = document.getElementById("invidious-speed");
+invidiousSpeedElement.addEventListener("change",
+    event => youtubeHelper.setInvidiousSpeed(event.target.options[invidiousSpeedElement.selectedIndex].value)
+);
+
+let invidiousQualityDashElement = document.getElementById("invidious-quality_dash");
+invidiousQualityDashElement.addEventListener("change",
+    event => youtubeHelper.setInvidiousQualityDash(event.target.options[invidiousQualityDashElement.selectedIndex].value)
+);
+
+let invidiousComments0Element = document.getElementById("invidious-comments[0]");
+invidiousComments0Element.addEventListener("change",
+    event => {
+        let commentsList = youtubeHelper.getInvidiousComments();
+        commentsList[0] = event.target.options[invidiousComments0Element.selectedIndex].value
+        youtubeHelper.setInvidiousComments(commentsList)
+    }
+);
+let invidiousComments1Element = document.getElementById("invidious-comments[1]");
+invidiousComments1Element.addEventListener("change",
+    event => {
+        let commentsList = youtubeHelper.getInvidiousComments();
+        commentsList[1] = event.target.options[invidiousComments1Element.selectedIndex].value
+        youtubeHelper.setInvidiousComments(commentsList)
+    }
+);
+
+let invidiousCaptions0Element = document.getElementById("invidious-captions[0]");
+invidiousCaptions0Element.addEventListener("change",
+    event => {
+        let captionsList = youtubeHelper.getInvidiousCaptions();
+        captionsList[0] = event.target.options[invidiousCaptions0Element.selectedIndex].value
+        youtubeHelper.setInvidiousCaptions(captionsList)
+    }
+);
+let invidiousCaptions1Element = document.getElementById("invidious-captions[1]");
+invidiousCaptions1Element.addEventListener("change",
+    event => {
+        let captionsList = youtubeHelper.getInvidiousCaptions();
+        captionsList[1] = event.target.options[invidiousCaptions1Element.selectedIndex].value
+        youtubeHelper.setInvidiousCaptions(captionsList)
+    }
+);
+let invidiousCaptions2Element = document.getElementById("invidious-captions[2]");
+invidiousCaptions2Element.addEventListener("change",
+    event => {
+        let captionsList = youtubeHelper.getInvidiousCaptions();
+        captionsList[2] = event.target.options[invidiousCaptions2Element.selectedIndex].value
+        youtubeHelper.setInvidiousCaptions(captionsList)
+    }
+);
+
+let invidiousRelatedVideoElement = document.getElementById("invidious-related_videos");
+invidiousRelatedVideoElement.addEventListener("change",
+    event => youtubeHelper.setInvidiousRelatedVideos(event.target.options[invidiousRelatedVideoElement.selectedIndex].value)
+);
+
+let invidiousAnnotationsElement = document.getElementById("invidious-annotations");
+invidiousAnnotationsElement.addEventListener("change",
+    event => youtubeHelper.setInvidiousAnnotations(event.target.options[invidiousAnnotationsElement.selectedIndex].value)
+);
+
+
+let invidiousExtendDescElement = document.getElementById("invidious-extend_desc");
+invidiousExtendDescElement.addEventListener("change",
+    event => youtubeHelper.setInvidiousExtendDesc(event.target.options[invidiousExtendDescElement.selectedIndex].value)
+);
+
+let invidiousVrModeElement = document.getElementById("invidious-vr_mode");
+invidiousVrModeElement.addEventListener("change",
+    event => youtubeHelper.setInvidiousVrMode(event.target.options[invidiousVrModeElement.selectedIndex].value)
+);
+
+let invidiousSavePlayerPosElement = document.getElementById("invidious-save_player_pos");
+invidiousSavePlayerPosElement.addEventListener("change",
+    event => youtubeHelper.setInvidiousSavePlayerPos(event.target.options[invidiousSavePlayerPosElement.selectedIndex].value)
+);
 
 youtubeHelper.init().then(() => {
     invidiousPlayerStyleElement.value = youtubeHelper.getInvidiousPlayerStyle();
     invidiousAlwaysProxyElement.value = youtubeHelper.getInvidiousAlwaysProxy();
-    console.log("youtubeHelper.getInvidiousAlwaysProxy()", youtubeHelper.getInvidiousAlwaysProxy())
-    invidiousVideoQualityElement.value = youtubeHelper.getInvidiousVideoQuality();
-    invidiousSubtitlesElement.value = youtubeHelper.getInvidiousSubtitles();
-    // persistInvidiousPrefsElement.checked = youtubeHelper.getPersistInvidiousPrefs();
+    invidiousVideoLoopElement.value = youtubeHelper.getInvidiousVideoLoop();
+    invidiousContinueAutoplayElement.value = youtubeHelper.getInvidiousContinueAutoplay();
+    invidiousContinueElement.value = youtubeHelper.getInvidiousContinue();
+    invidiousListenElement.value = youtubeHelper.getInvidiousListen();
+    invidiousSpeedElement.value = youtubeHelper.getInvidiousSpeed();
+    invidiousQualityElement.value = youtubeHelper.getinvidiousQuality();
+    invidiousQualityDashElement.value = youtubeHelper.getInvidiousQualityDash();
+    invidiousComments0Element.value = youtubeHelper.getInvidiousComments()[0];
+    invidiousComments1Element.value = youtubeHelper.getInvidiousComments()[1];
+    invidiousCaptions0Element.value = youtubeHelper.getInvidiousCaptions()[0];
+    invidiousCaptions1Element.value = youtubeHelper.getInvidiousCaptions()[1];
+    invidiousCaptions2Element.value = youtubeHelper.getInvidiousCaptions()[2];
+    invidiousRelatedVideoElement.value = youtubeHelper.getInvidiousRelatedVideos();
+    invidiousAnnotationsElement.value = youtubeHelper.getInvidiousAnnotations();
+    invidiousExtendDescElement.value = youtubeHelper.getInvidiousExtendDesc();
+    invidiousVrModeElement.value = youtubeHelper.getInvidiousVrMode();
+    invidiousSavePlayerPosElement.value = youtubeHelper.getInvidiousSavePlayerPos();
 
     commonHelper.processDefaultCustomInstances(
         'invidious',
@@ -57,4 +157,3 @@ youtubeHelper.init().then(() => {
         youtubeHelper.setInvidiousTorCustomRedirects
     );
 });
-

src/pages/options/youtube/youtube.html

@@ -154,18 +154,6 @@
         <input id="bypass-watch-on-youtube" type="checkbox" checked />
       </div>
 
-      <div class="some-block option-block">
-        <h4>Volume: <span id="volume-value">50%</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>
-
       <div class="some-block option-block">
         <h4>Autoplay Video</h4>
         <select id="invidious-autoplay">
@@ -179,7 +167,7 @@
     <div id="invidious">
       <div class="some-block option-block">
         <h4>Player Style</h4>
-        <select id="invidious-player-style">
+        <select id="invidious-player_style">
           <option value="DEFAULT">Default</option>
           <option value="invidious">Invidious</option>
           <option value="youtube">YouTube</option>
@@ -187,8 +175,8 @@
       </div>
 
       <div class="some-block option-block">
-        <h4>Always proxy videos</h4>
-        <select id="invidious-always-proxy">
+        <h4>Always loop</h4>
+        <select id="invidious-video_loop">
           <option value="DEFAULT">Default</option>
           <option value="true">True</option>
           <option value="false">False</option>
@@ -196,8 +184,59 @@
       </div>
 
       <div class="some-block option-block">
-        <h4>Video Quality</h4>
-        <select id="video-quality">
+        <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>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>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>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>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>Preferred video quality</h4>
+        <select id="invidious-quality">
           <option value="DEFAULT">Default</option>
           <option value="hd720">720p</option>
           <option value="medium">480p</option>
@@ -207,14 +246,510 @@
       </div>
 
       <div class="some-block option-block">
-        <h4>Subtitles</h4>
-        <input id="invidious-subtitles" placeholder="en, ar, es" type="text" />
+        <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>Persist preferences (as cookie)</h4>
-        <input id="persist-invidious-prefs" type="checkbox" checked />
-      </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>
+
+
+      <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 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>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 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>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>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>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>
 
       <hr>
 

src/pages/options/youtube/youtube.js

@@ -99,7 +99,7 @@ invidiousClearVolumeElement.addEventListener("click",
     (_) => {
         youtubeHelper.setVolume('--');
         volumeValueElement.textContent = `--%`;
-        volumeElement.value = 50;
+        volumeElement.value = null;
     }
 );
 

src/pages/stylesheets/styles.css

@@ -49,24 +49,17 @@ img, svg {
 input[type="url"],
 input[type="text"],
 select {
-  padding: 5px 10px;
-  width: 350px;
   font-weight: bold;
-  border-radius: 3px;
   box-sizing: border-box;
-  background-color: var(--bg-main);
   border-style: solid;
   border-color: #767676;
   color: var(--text);
-}
-
-select {
   font-size: 16px;
   padding: 8px;
   background-color: var(--bg-secondary);
   border: none;
   margin: 0;
-  width: auto;
+  width: 200px;
   border-radius: 3px;
 }