Fixed issue #25

6 files changed, 84 insertions, 43 deletions

diff --git a/src/assets/javascripts/helpers/youtube/youtube.js b/src/assets/javascripts/helpers/youtube/youtube.js
index daea8b7e..2c03a971 100644
--- a/src/assets/javascripts/helpers/youtube/youtube.js
+++ b/src/assets/javascripts/helpers/youtube/youtube.js
@@ -154,21 +154,13 @@ function setFrontend(val) {
   console.log("youtubeFrontend: ", val)
 }
 
-let useFreeTube;
-function setUseFreeTube(val) {
-  useFreeTube = val;
-  browser.storage.sync.set({ useFreeTube })
-  console.log("useFreeTube: ", useFreeTube)
-}
-const getUseFreeTube = () => useFreeTube;
-
 let persistInvidiousPrefs;
+const getPersistInvidiousPrefs = () => persistInvidiousPrefs;
 function setPersistInvidiousPrefs(val) {
   persistInvidiousPrefs = val;
   browser.storage.sync.set({ persistInvidiousPrefs })
   console.log("persistInvidiousPrefs: ", persistInvidiousPrefs)
 }
-const getPersistInvidiousPrefs = () => persistInvidiousPrefs;
 
 function isYoutube(url) {
   return targets.includes(url.host);
@@ -188,7 +180,6 @@ async function init() {
       "invidiousPlayerStyle",
       "invidiousSubtitles",
       "invidiousAutoplay",
-      "useFreeTube",
       "youtubeRedirects",
       "youtubeFrontend",
     ]);
@@ -198,18 +189,16 @@ async function init() {
 
   invidiousInstance = result.invidiousInstance;
 
-  invidiousAlwaysProxy = result.invidiousAlwaysProxy ?? true;
+  invidiousAlwaysProxy = result.invidiousAlwaysProxy ?? 'DEFAULT';
   invidiousOnlyEmbeddedVideo = result.invidiousOnlyEmbeddedVideo ?? false;
-  invidiousVideoQuality = result.invidiousVideoQuality ?? 'medium';
-  invidiousTheme = result.invidiousTheme ?? 'dark';
-  invidiousVolume = result.invidiousVolume ?? 50;
-  invidiousPlayerStyle = result.invidiousPlayerStyle ?? 'invidious';
+  invidiousVideoQuality = result.invidiousVideoQuality ?? 'DEFAULT';
+  invidiousTheme = result.invidiousTheme ?? 'DEFAULT';
+  invidiousVolume = result.invidiousVolume ?? '--';
+  invidiousPlayerStyle = result.invidiousPlayerStyle ?? 'DEFAULT';
   invidiousSubtitles = result.invidiousSubtitles || '';
-  invidiousAutoplay = result.invidiousAutoplay ?? true;
+  invidiousAutoplay = result.invidiousAutoplay ?? 'DEFAULT';
 
   persistInvidiousPrefs = result.persistInvidiousPrefs ?? false;
-
-  useFreeTube = result.useFreeTube ?? false;
 }
 
 function invidiousInitCookies(tabId) {
@@ -237,6 +226,7 @@ function redirect(url, initiator, type) {
 
   if (frontend == 'freeTube' && type === "main_frame")
     return `freetube://${url}`;
+
   else if (frontend == 'invidious') {
 
     if (url.pathname.match(/iframe_api/) || url.pathname.match(/www-widgetapi/)) return null; // Don't redirect YouTube Player API.
@@ -248,19 +238,33 @@ function redirect(url, initiator, type) {
 
     if (invidiousOnlyEmbeddedVideo && type !== "sub_frame") return null;
 
-    url.searchParams.append("local", invidiousAlwaysProxy);
-    url.searchParams.append("quality", invidiousVideoQuality);
-    url.searchParams.append("dark_mode", invidiousTheme);
-    url.searchParams.append("volume", invidiousVolume);
-    url.searchParams.append("player_style", invidiousPlayerStyle);
-    url.searchParams.append("subtitles", invidiousSubtitles);
-    url.searchParams.append("autoplay", invidiousAutoplay);
+    if (invidiousAlwaysProxy != "DEFAULT")
+      url.searchParams.append("local", invidiousAlwaysProxy);
+
+    if (invidiousVideoQuality != "DEFAULT")
+      url.searchParams.append("quality", invidiousVideoQuality);
+
+    if (invidiousTheme != "DEFAULT")
+      url.searchParams.append("dark_mode", invidiousTheme);
+
+    if (invidiousVolume != "--")
+      url.searchParams.append("volume", invidiousVolume);
+
+    if (invidiousPlayerStyle != "DEFAULT")
+      url.searchParams.append("player_style", invidiousPlayerStyle);
+
+    if (invidiousSubtitles.trim() != '')
+      url.searchParams.append("subtitles", invidiousSubtitles);
+
+    if (invidiousAutoplay != "DEFAULT")
+      url.searchParams.append("autoplay", invidiousAutoplay);
 
     let randomInstance = commonHelper.getRandomInstance(redirects.invidious.normal)
 
     return `${randomInstance}${url.pathname.replace("/shorts", "")}${url.search}`;
 
   } else if (frontend == 'piped') {
+    if (invidiousOnlyEmbeddedVideo && type !== "sub_frame") return null;
     let randomInstance = commonHelper.getRandomInstance(redirects.piped.normal);
     if (url.hostname.endsWith("youtube.com") || url.hostname.endsWith("youtube-nocookie.com"))
       return `${randomInstance}${url.pathname}${url.search}`;
@@ -314,9 +318,6 @@ export default {
   setInvidiousAutoplay,
   getInvidiousAutoplay,
 
-  getUseFreeTube,
-  setUseFreeTube,
-
   getPersistInvidiousPrefs,
   setPersistInvidiousPrefs,
 
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;