Fixed issue #25

2 files changed, 36 insertions, 14 deletions

diff --git a/src/pages/options/youtube/youtube.html b/src/pages/options/youtube/youtube.html
index 6facdb4c..99bec8d6 100644
--- a/src/pages/options/youtube/youtube.html
+++ b/src/pages/options/youtube/youtube.html
@@ -56,12 +56,18 @@
             </select>
         </div>
 
+        <div class="some-block option-block">
+            <h4>Only Redirect Embedded-Video</h4>
+            <input id="only-embed" type="checkbox" checked />
+        </div>
+
         <hr>
 
         <div id="invidious">
             <div class="some-block option-block">
                 <h4>Theme</h4>
                 <select id="invidious-theme">
+                    <option value="DEFAULT">Default</option>
                     <option value="dark">Dark</option>
                     <option value="light">Light</option>
                 </select>
@@ -70,29 +76,42 @@
             <div class="some-block option-block">
                 <h4>Player Style</h4>
                 <select id="invidious-player-style">
+                    <option value="DEFAULT">Default</option>
                     <option value="invidious">Invidious</option>
                     <option value="youtube">YouTube</option>
                 </select>
             </div>
 
-            <div class="some-block">
+            <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">
+                    <img src="../icons/clear_white_24dp.svg">
+                </button>
             </div>
 
             <div class="some-block option-block">
-                <h4 data-localise="__MSG_invidiousAlwaysProxy__">Always proxy videos through Invidious</h4>
-                <input id="always-proxy" type="checkbox" checked />
+                <h4 data-localise="__MSG_invidiousAlwaysProxy__">Always proxy videos</h4>
+                <select id="invidious-always-proxy">
+                    <option value="DEFAULT">Default</option>
+                    <option value="true">True</option>
+                    <option value="true">False</option>
+                </select>
             </div>
 
             <div class="some-block option-block">
-                <h4 data-localise="__MSG_invidiousOnlyEmbeddedVideo__">Only redirect embedded video to Invidious</h4>
-                <input id="only-embed" type="checkbox" checked />
+                <h4>Autoplay Video</h4>
+                <select id="invidious-autoplay">
+                    <option value="DEFAULT">Default</option>
+                    <option value="true">True</option>
+                    <option value="true">False</option>
+                </select>
             </div>
 
             <div class="some-block option-block">
                 <h4>Video Quality</h4>
                 <select id="video-quality">
+                    <option value="DEFAULT">Default</option>
                     <option value="hd720">720p</option>
                     <option value="medium">480p</option>
                     <option value="dash">DASH (adaptive quality)</option>
@@ -101,16 +120,11 @@
             </div>
 
             <div class="some-block option-block">
-                <h4>Subtitles - language codes</h4>
+                <h4>Subtitles</h4>
                 <input id="invidious-subtitles" placeholder="en, ar, es" name="invidious-subtitles" type="text" />
             </div>
 
             <div class="some-block option-block">
-                <h4>Automatically play video on load</h4>
-                <input id="invidious-autoplay" type="checkbox" checked />
-            </div>
-
-            <div class="some-block option-block">
                 <h4>Persist preferences (as cookie)</h4>
                 <input id="persist-invidious-prefs" type="checkbox" checked />
             </div>
diff --git a/src/pages/options/youtube/youtube.js b/src/pages/options/youtube/youtube.js
index 5c909578..a1d540f2 100644
--- a/src/pages/options/youtube/youtube.js
+++ b/src/pages/options/youtube/youtube.js
@@ -50,6 +50,14 @@ invidiousVolumeElement.addEventListener("input",
         invidiousVolumeValueElement.textContent = `${invidiousVolumeElement.value}%`;
     }
 );
+let invidiousClearVolumeElement = document.getElementById("clear-invidious-volume");
+invidiousClearVolumeElement.addEventListener("click",
+    (_) => {
+        youtubeHelper.setInvidiousVolume('--');
+        invidiousVolumeValueElement.textContent = `--%`;
+        invidiousVolumeElement.value = 50;
+    }
+);
 
 let invidiousPlayerStyleElement = document.getElementById("invidious-player-style");
 invidiousPlayerStyleElement.addEventListener("change",
@@ -65,12 +73,12 @@ invidiousSubtitlesElement.addEventListener("input",
 
 let invidiousAutoplayElement = document.getElementById("invidious-autoplay");
 invidiousAutoplayElement.addEventListener("change",
-    (event) => youtubeHelper.setInvidiousAutoplay(event.target.checked)
+    (event) => youtubeHelper.setInvidiousAutoplay(event.target.options[invidiousAutoplayElement.selectedIndex].value)
 );
 
-let invidiousAlwaysProxyElement = document.getElementById("always-proxy");
+let invidiousAlwaysProxyElement = document.getElementById("invidious-always-proxy");
 invidiousAlwaysProxyElement.addEventListener("change",
-    (event) => youtubeHelper.setInvidiousAlwaysProxy(event.target.checked)
+    (event) => youtubeHelper.setInvidiousAlwaysProxy(event.target.options[invidiousAlwaysProxyElement.selectedIndex].value)
 );
 
 let invidiousOnlyEmbeddedVideoElement = document.getElementById("only-embed");