combining some of piped and invidious settings #14

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

@@ -180,7 +180,6 @@ function isYoutube(url) {
       ...targets,
       ...invidiousHostNames(),
     ]
-    console.log("mightyList.includes(url.host)", mightyList.includes(url.host))
     return mightyList.includes(url.host);
   } else
     return targets.includes(url.host)
@@ -244,7 +243,7 @@ function redirect(url, initiator, type) {
   )
     return null;
 
-  if (url.host.split(".")[0] === "studio") return null;// Avoid `studio.youtube.com`
+  if (url.hostname == "studio.youtube.com") return null;
 
   if (url.pathname.match(/iframe_api/) || url.pathname.match(/www-widgetapi/)) return null; // Don't redirect YouTube Player API.
 
@@ -265,20 +264,21 @@ function redirect(url, initiator, type) {
 
     let randomInstance = commonHelper.getRandomInstance(redirects.invidious.normal)
 
-    return `${randomInstance}${url.pathname.replace("/shorts", "")}${url.search}`;
+    return `${randomInstance}${url.pathname.replace("/shorts/", "/watch?v=")}${url.search}`;
 
   } else if (frontend == 'piped') {
 
     if (invidiousOnlyEmbeddedVideo && type !== "sub_frame") return null;
 
+    
+    if (invidiousTheme != "DEFAULT") url.searchParams.append("theme", invidiousTheme);
+    if (invidiousVolume != "--") url.searchParams.append("volume", invidiousVolume / 100);
+    if (invidiousAutoplay != "DEFAULT") url.searchParams.append("playerAutoPlay", invidiousAutoplay);
+
     let randomInstance = commonHelper.getRandomInstance(redirects.piped.normal);
 
-    if (
-      url.hostname.endsWith("youtube.com") ||
-      url.hostname.endsWith("youtube-nocookie.com") ||
-      invidiousHostNames().includes(url.hostname)
-    )
-      return `${randomInstance}${url.pathname}${url.search}`;
+    if (url.hostname.endsWith("youtube.com") || url.hostname.endsWith("youtube-nocookie.com") || invidiousHostNames().includes(url.hostname))
+      return `${randomInstance}${url.pathname.replace("/shorts/", "/watch?v=")}${url.search}`;
 
     if (url.hostname.endsWith("youtu.be") && url.pathname.length > 1)
       return `${randomInstance}/watch?v=${url.pathname.substring(1)}`;

src/pages/options/youtube/youtube.html

@@ -56,32 +56,15 @@
             </select>
         </div>
 
+        <hr>
+
+        <div id="invidious-piped">
+
             <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>
-            </div>
-
-            <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 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" />
@@ -96,17 +79,37 @@
             </div>
 
             <div class="some-block option-block">
-                <h4 data-localise="__MSG_invidiousAlwaysProxy__">Always proxy videos</h4>
-                <select id="invidious-always-proxy">
+                <h4>Theme</h4>
+                <select id="invidious-theme">
                     <option value="DEFAULT">Default</option>
-                    <option value="true">True</option>
-                    <option value="true">False</option>
+                    <option value="dark">Dark</option>
+                    <option value="light">Light</option>
                 </select>
             </div>
 
             <div class="some-block option-block">
                 <h4>Autoplay Video</h4>
                 <select id="invidious-autoplay">
+                    <option value="DEFAULT">Default</option>
+                    <option value="true">True</option>
+                    <option value="false">False</option>
+                </select>
+            </div>
+        </div>
+
+        <div id="invidious">
+            <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 option-block">
+                <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>

src/pages/options/youtube/youtube.js

@@ -6,16 +6,20 @@ let disableYoutubeElement = document.getElementById("disable-invidious");
 let youtubeFrontendElement = document.getElementById("youtube-frontend");
 let invidiousDivElement = document.getElementById("invidious")
 let pipedDivElement = document.getElementById("piped")
+let invidiousPipedDivElement = document.getElementById("invidious-piped")
 function changeFrontendsSettings(frontend) {
     if (frontend == 'piped') {
+        invidiousPipedDivElement.style.display = 'block'
         pipedDivElement.style.display = 'block';
         invidiousDivElement.style.display = 'none';
     }
     else if (frontend == 'invidious') {
+        invidiousPipedDivElement.style.display = 'block'
         pipedDivElement.style.display = 'none';
         invidiousDivElement.style.display = 'block';
     }
     else if (frontend == 'freeTube') {
+        invidiousPipedDivElement.style.display = 'none'
         pipedDivElement.style.display = 'none';
         invidiousDivElement.style.display = 'none';
     }

src/pages/popup/popup.html

@@ -55,9 +55,6 @@
   </div>
 
   <div class="buttons">
-    <a class="button" id="update-instances">
-      <span>Update Instances&nbsp;</span>
-    </a>
     <a class="button" id="more-options">
       <span data-localise="__MSG_moreOptions__">More Options&nbsp;</span>
       <svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512">

src/pages/popup/popup.js

@@ -86,18 +86,6 @@ disableMediumElement.addEventListener("change",
   (event) => mediumHelper.setDisableMedium(!event.target.checked)
 );
 
-document.querySelector("#update-instances").addEventListener("click", () => {
-  document.querySelector("#update-instances").innerHTML = '...';
-  if (commonHelper.updateInstances()) {
-    document.querySelector("#update-instances").innerHTML = 'Done!';
-    new Promise(resolve => setTimeout(resolve, 1500)).then( // Sleep 1500ms
-      () => document.querySelector("#update-instances").innerHTML = 'Update Instances'
-    )
-  }
-  else
-    document.querySelector("#update-instances").innerHTML = 'Failed Miserabely';
-});
-
 document.querySelector("#more-options").addEventListener("click", () => {
   browser.runtime.openOptionsPage();
 });