Fixed issue #25

5 files changed, 55 insertions, 15 deletions

diff --git a/src/pages/options/icons/clear_black_24dp.svg b/src/pages/options/icons/clear_black_24dp.svg
new file mode 100644
index 00000000..5f1267d7
--- /dev/null
+++ b/src/pages/options/icons/clear_black_24dp.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><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>
\ No newline at end of file
diff --git a/src/pages/options/icons/clear_white_24dp.svg b/src/pages/options/icons/clear_white_24dp.svg
new file mode 100644
index 00000000..ec0bd50f
--- /dev/null
+++ b/src/pages/options/icons/clear_white_24dp.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#FFFFFF"><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>
\ No newline at end of file
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");
diff --git a/src/pages/stylesheets/styles.css b/src/pages/stylesheets/styles.css
index e7a7c5f2..1f39d109 100644
--- a/src/pages/stylesheets/styles.css
+++ b/src/pages/stylesheets/styles.css
@@ -329,7 +329,7 @@ h4 {
 
 div.some-block h4 {
   margin: 0;
-  width: 70%;
+  /* width: 70%; */
 }
 
 div.option-block h4 {
@@ -432,6 +432,22 @@ textarea {
   width: 100%;
 }
 
+button.default {
+  margin-left: 30px;
+  background-color: transparent;
+  border: none;
+  color: white;
+  padding: 5px;
+  width: 34px;
+  height: 34px;
+  text-align: center;
+  text-decoration: none;
+  display: inline-block;
+  font-size: 16px;
+  margin: 4px 2px;
+  cursor: pointer;
+}
+
 @media (prefers-color-scheme: light) {
   body {
     --text: #000;