From a8ae61c32b828e1389df6b179f60f6d52ff63d42 Mon Sep 17 00:00:00 2001
From: ManeraKai <manerakai@protonmail.com>
Date: Sun, 13 Mar 2022 00:32:25 +0300
Subject: Added almost all invidious settings #104

---
 src/pages/options/general/general.js          |   1 -
 src/pages/options/youtube/embed-exceptions.js |   1 -
 src/pages/options/youtube/invidious.js        | 139 ++++++-
 src/pages/options/youtube/youtube.html        | 579 +++++++++++++++++++++++++-
 src/pages/options/youtube/youtube.js          |   2 +-
 src/pages/stylesheets/styles.css              |   9 +-
 6 files changed, 678 insertions(+), 53 deletions(-)

(limited to 'src/pages')

diff --git a/src/pages/options/general/general.js b/src/pages/options/general/general.js
index 54a1fd19..c737759f 100644
--- a/src/pages/options/general/general.js
+++ b/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}">
diff --git a/src/pages/options/youtube/embed-exceptions.js b/src/pages/options/youtube/embed-exceptions.js
index ca2900d4..06be99c4 100644
--- a/src/pages/options/youtube/embed-exceptions.js
+++ b/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}">
diff --git a/src/pages/options/youtube/invidious.js b/src/pages/options/youtube/invidious.js
index 76c9b1ab..90361342 100644
--- a/src/pages/options/youtube/invidious.js
+++ b/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',
@@ -56,5 +156,4 @@ youtubeHelper.init().then(() => {
         youtubeHelper.getInvidiousTorCustomRedirects,
         youtubeHelper.setInvidiousTorCustomRedirects
     );
-});
-
+});
\ No newline at end of file
diff --git a/src/pages/options/youtube/youtube.html b/src/pages/options/youtube/youtube.html
index c4c1da0c..1fa3f716 100644
--- a/src/pages/options/youtube/youtube.html
+++ b/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,16 +167,43 @@
     <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>
         </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>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-always-proxy">
+        <select id="invidious-local">
           <option value="DEFAULT">Default</option>
           <option value="true">True</option>
           <option value="false">False</option>
@@ -196,8 +211,32 @@
       </div>
 
       <div class="some-block option-block">
-        <h4>Video Quality</h4>
-        <select id="video-quality">
+        <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>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>Persist preferences (as cookie)</h4>
-        <input id="persist-invidious-prefs" type="checkbox" checked />
-      </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>
 
diff --git a/src/pages/options/youtube/youtube.js b/src/pages/options/youtube/youtube.js
index 79a206a6..180276ca 100644
--- a/src/pages/options/youtube/youtube.js
+++ b/src/pages/options/youtube/youtube.js
@@ -99,7 +99,7 @@ invidiousClearVolumeElement.addEventListener("click",
     (_) => {
         youtubeHelper.setVolume('--');
         volumeValueElement.textContent = `--%`;
-        volumeElement.value = 50;
+        volumeElement.value = null;
     }
 );
 
diff --git a/src/pages/stylesheets/styles.css b/src/pages/stylesheets/styles.css
index 277ef2e4..cb632c14 100644
--- a/src/pages/stylesheets/styles.css
+++ b/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;
 }
 
-- 
cgit 1.4.1